:root{--tab-h:62px;--safe-b:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:70px}
body{padding-bottom:calc(var(--tab-h) + var(--safe-b));-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
.wrap{width:100%;padding-inline:16px}
input,select,textarea{font-size:16px!important}

.hd{padding-top:env(safe-area-inset-top,0px)}
.hd-in{min-height:56px;gap:10px}
.brand{margin-right:auto;gap:10px}
.brand b{font-size:16px}
.brand small{display:none}
.logo{width:36px;height:36px;flex-basis:36px;font-size:20px}
nav#nav,.burger,.login-link,.user-menu,.cart-link{display:none!important}
.app-back{display:grid;place-items:center;width:38px;height:38px;margin-left:-8px;border-radius:50%;color:#fff;font-size:24px}
.app-back:active{background:#ffffff22}

.tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:70;
  height:calc(var(--tab-h) + var(--safe-b));padding-bottom:var(--safe-b);
  background:#fffdf5;border-top:1px solid #e3e9dd;box-shadow:0 -4px 16px #1f3f2a14}
.tabbar a,.tabbar .is-off{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font:500 11px/1.2 "Kanit",sans-serif;color:#7d8a7e}
.tabbar a .ic,.tabbar .is-off .ic{font-size:24px}
.tabbar a.on{color:var(--green)}
.tabbar a.on .ic{stroke-width:2.4}
.tabbar a:active{background:var(--green-l)}
.tabbar .cbadge{top:5px;right:calc(50% - 24px)}
.tabbar .av{width:26px;height:26px}

.flash{position:sticky;top:56px;z-index:40}

.btn{min-height:48px}
.btn-sm{min-height:42px;padding-inline:18px}

.hero{min-height:420px}
.hero .wrap{padding-inline:16px}
.hero-in{padding:28px 0 24px}
.hero h1{font-size:34px}
.hero .quote{font-size:17px}
.hero .acts .btn{flex:1 1 140px}
.badges{margin-top:28px}

.story,.prod,.feed,.ct,.prof{padding:22px 0 28px}
.story-img{height:220px;border-radius:18px}
.t-row{margin-bottom:16px;gap:12px}
.t-row::before,.t-row::after{width:26px}
.sec-h{font-size:24px}

.p-grid{grid-template-columns:repeat(2,1fr);gap:12px}
.card{border-radius:16px}
.card:hover{transform:none}
.card-img{height:130px}
.card-b{padding:10px 10px 14px}
.card-b h3{font-size:16px}
.card-b p{font-size:12px;min-height:34px}
.card-b .btn-sm,.add-form,.add-form .btn{width:100%}
.add-form{margin-top:6px}

.garden-in{padding:26px 0;gap:18px}
.garden-c h2{font-size:26px}
.pol-img{height:96px}

.ct-g{gap:22px}

.feed-note{margin:-4px 0 14px}
.feed-list{gap:12px}
.post{border-radius:16px;padding:14px}
.post-act{gap:12px}
.cm-form input[name=author]{flex:1 1 100%}
#post-open{position:fixed;right:16px;bottom:calc(var(--tab-h) + var(--safe-b) + 14px);z-index:60;
  min-height:52px;box-shadow:0 8px 22px #0000004d}
.feed .acts{margin:0}


.prof-card,.order,.addr{border-radius:16px}
.prof-card{padding:18px}
.prof-pic{flex-direction:column;align-items:flex-start}
.order header small{margin-left:0;width:100%}
.addr-list{grid-template-columns:1fr}
.addr-bar .btn{width:100%}

dialog,dialog#dlg,dialog#post-dlg,dialog#addr-dlg{width:100%;max-width:100%;margin:auto 0 0;max-height:92vh;
  border-radius:22px 22px 0 0;padding:20px 18px calc(20px + var(--safe-b));animation:sheet .22s ease-out}
dialog::backdrop{animation:fade .22s ease-out}
@keyframes sheet{from{transform:translateY(48px);opacity:0}}
@keyframes fade{from{opacity:0}}
.x{margin:-6px -4px 0 auto;padding:4px 10px}
#map{height:230px}

body>footer{display:none}

/* ===== แถบเมนูล่าง (มือถือ) — ลอยโค้งมน กระจกเบลอ ตัวอักษร Sarabun อ่านง่าย ไอคอนเส้นหนาพอดี ===== */
:root{--tab-h:66px}
body{padding-bottom:calc(var(--tab-h) + var(--safe-b) + 24px)}
.tabbar{left:12px;right:12px;bottom:calc(10px + var(--safe-b));height:var(--tab-h);padding:6px;gap:2px;
  border:1px solid rgba(27,94,63,.08);border-radius:24px;background:rgba(255,253,245,.92);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 12px 32px rgba(19,71,47,.2),0 2px 8px rgba(19,71,47,.08)}
.tabbar a,.tabbar .is-off{gap:3px;border-radius:18px;font:600 11.5px/1.15 "Sarabun","Kanit",sans-serif;letter-spacing:.1px;color:#7b887c;
  -webkit-tap-highlight-color:transparent;transition:background .2s,color .2s,transform .15s}
.tabbar a .ic,.tabbar .is-off .ic{width:24px;height:24px;font-size:24px;stroke-width:1.9;transition:transform .2s,fill .2s}
.tabbar a.on{color:var(--green);background:linear-gradient(180deg,#eef5ea,#dfeedb);font-weight:700;box-shadow:inset 0 0 0 1px rgba(27,94,63,.08)}
.tabbar a.on .ic{stroke-width:2.2;fill:rgba(27,94,63,.14);transform:translateY(-1px)}
.tabbar a:active,.tabbar .is-off:active{background:var(--green-l);transform:scale(.96)}
.tabbar .cbadge{top:5px;right:calc(50% - 25px);min-width:18px;height:18px;padding:0 5px;border:2px solid #fffdf5;font:700 10px/14px "Sarabun",sans-serif}
.tabbar .av{width:26px;height:26px;border:2px solid transparent;box-sizing:border-box}
.tabbar a.on .av{border-color:var(--green)}
.tabbar .is-off.on{color:var(--green);background:linear-gradient(180deg,#eef5ea,#dfeedb);font-weight:700;box-shadow:inset 0 0 0 1px rgba(27,94,63,.08)}
.tabbar .is-off.on .ic{stroke-width:2.2;fill:rgba(27,94,63,.14);transform:translateY(-1px)}

/* ปุ่มสลับภาษาในแถบบนมือถือ */
.lang-sw{margin-right:0;padding:2px}
.lang-sw a{min-width:32px;padding:4px 8px;font-size:12px}

/* ===== กระจกใส (Glassmorphism) — แถบบนและแถบเมนูล่างบนมือถือ ===== */
.hd{background:linear-gradient(180deg,rgba(27,94,63,.72),rgba(19,71,47,.58));
  -webkit-backdrop-filter:blur(18px) saturate(1.7);backdrop-filter:blur(18px) saturate(1.7);
  border-bottom:1px solid rgba(255,255,255,.22);box-shadow:0 6px 24px rgba(19,71,47,.18),inset 0 1px 0 rgba(255,255,255,.25)}
.tabbar{background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,.34));
  -webkit-backdrop-filter:blur(22px) saturate(1.9);backdrop-filter:blur(22px) saturate(1.9);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 14px 36px rgba(19,71,47,.22),0 2px 8px rgba(19,71,47,.08),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.25)}
.tabbar a,.tabbar .is-off{color:#42524a}
.tabbar a.on,.tabbar .is-off.on{color:var(--green-d);background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.45));
  box-shadow:0 2px 10px rgba(19,71,47,.14),inset 0 0 0 1px rgba(255,255,255,.8)}
.tabbar a:active,.tabbar .is-off:active{background:rgba(255,255,255,.55)}
.tabbar .cbadge{border-color:rgba(255,255,255,.9)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hd{background:var(--green)}.tabbar{background:rgba(255,253,245,.96)}}