/* GLOBAL STYLES */
:root{--primary:#272f1a;--primary-dark:#1c2312;--background:#fbf9f5;--surface:#fff;--sand:#f3efe6;--sage:#e3eadf;--text:#171b19;--muted:#717d76;--border:#e8e2d5;--success:#2f7d4f;--danger:#c0392b;--coral:#e76f51;--radius:16px;--shadow:0 2px 8px rgba(23,27,25,.06);--navbg:rgba(255,255,255,.95);--font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);background:var(--sand);color:var(--text);line-height:1.45;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;display:flex;justify-content:center;align-items:center;overflow:hidden}
img{max-width:100%;display:block}button,input,select{font:inherit;color:inherit}button{cursor:pointer;background:none;border:0}a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hide{display:none!important}.noscroll::-webkit-scrollbar{display:none}.noscroll{scrollbar-width:none}
#app{position:relative;width:100%;max-width:448px;height:100%;background:var(--background);display:flex;flex-direction:column;overflow:hidden}
@media(min-width:640px){#app{height:92vh;max-height:880px;border-radius:40px;border:8px solid #292524;box-shadow:0 25px 50px rgba(0,0,0,.25)}}
/* HEADER */
.header{flex:none;padding:12px 16px 10px;border-bottom:1px solid rgba(232,226,213,.7);background:var(--background);z-index:30}
.hrow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.loc{display:flex;align-items:center;gap:8px;text-align:left;min-height:44px}
.loc i{width:32px;height:32px;border-radius:50%;background:rgba(39,47,26,.1);color:var(--primary);display:grid;place-items:center}
.loc b{display:flex;align-items:center;gap:4px;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}.loc small{display:block;font-size:.7rem;color:var(--muted)}
.brand{position:relative;display:block;width:124px;height:46px;overflow:hidden;flex:none}.brand img{position:absolute;left:0;top:-78px;width:124px;height:124px;max-width:none;object-fit:contain}
.hact{display:flex;align-items:center;gap:8px;min-width:0;flex:0 1 auto}.dpill{display:flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:99px;background:var(--sand);font-size:.76rem;font-weight:700;max-width:170px;min-width:0;white-space:nowrap}.dpill span{overflow:hidden;text-overflow:ellipsis}
.cartbtn{position:relative;width:44px;height:44px;border-radius:50%;background:var(--sand);display:grid;place-items:center}
.count{position:absolute;top:0;right:0;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--primary);color:#fff;font-size:.68rem;font-weight:800;display:grid;place-items:center}.count[data-n="0"]{display:none}
.searchrow{margin-top:10px;position:relative;display:flex;align-items:center;gap:8px}.sfield{position:relative;flex:1;min-width:0}.searchrow .icon{position:absolute;left:14px;top:13px;color:var(--muted)}
.searchrow input{width:100%;height:44px;background:var(--sand);border:1px solid transparent;border-radius:16px;padding:0 40px;font-size:.85rem;outline:0}.searchrow input::-webkit-search-cancel-button{display:none}.searchrow input:focus{background:var(--surface);border-color:rgba(39,47,26,.3)}
.searchrow .mic{flex:none;width:44px;height:44px;border-radius:50%;background:var(--sand);color:var(--primary);display:grid;place-items:center;transition:background .2s,color .2s}.searchrow .mic:hover{background:var(--border)}.searchrow .mic .icon{position:static;width:20px;height:20px;color:inherit}.searchrow .mic.on{background:var(--primary);color:#fff}
.vbox{position:absolute;left:50%;top:42%;width:min(240px,calc(100% - 40px));background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:24px;box-shadow:0 16px 40px rgba(0,0,0,.25);z-index:60;display:grid;justify-items:center;gap:12px;padding:30px 16px 20px;transform:translate(-50%,-50%) scale(.92);opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s ease,visibility .22s}
.vbox.show{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.vbox p{font-size:.86rem;font-weight:700;text-align:center}
.vt{min-height:2.4em;max-width:100%;font-size:.8rem;line-height:1.2;color:var(--muted);text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.vl{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.vl button{min-height:32px;padding:0 10px;border-radius:99px;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:.68rem;font-weight:700}.vl button[aria-checked=true]{background:var(--primary);border-color:var(--primary);color:#fff}
.vx{position:absolute;top:6px;right:6px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--muted)}.vx:hover{background:var(--sand)}.vx .icon{width:16px;height:16px}
.vmic{position:relative;width:64px;height:64px;border-radius:50%;background:var(--sage);color:var(--primary);display:grid;place-items:center;transition:opacity .2s}.vmic .icon{width:28px;height:28px}
.vbox.live .vmic::before,.vbox.live .vmic::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--primary);opacity:0;animation:vring 1.8s ease-out infinite}.vbox.live .vmic::after{animation-delay:.9s}
.vbox.live .vmic .icon{animation:vblink 1.8s ease-in-out infinite}
@keyframes vring{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.7);opacity:0}}@keyframes vblink{50%{opacity:.4}}
@media(prefers-reduced-motion:reduce){.vbox.live .vmic{outline:3px solid var(--primary)}}
.searchrow .clr{position:absolute;right:2px;top:2px;width:40px;height:40px;display:none;place-items:center;color:var(--muted)}.searchrow.has .clr{display:grid}
/* CONTENT */
/* Bottom clearance for fixed bars. main is the only scroll container for every tab (Home, Menu, Plans, Track, Account, search results).
   --bottom-nav-height and --cart-bar-h are measured from the real elements by syncBars(); the CSS values are fallbacks. */
#app{--bottom-nav-height:calc(64px + env(safe-area-inset-bottom,0px));--cart-bar-h:52px;--cart-bar-gap:14px;--content-gap:24px;--view-cart-height:0px;--content-bottom:calc(var(--bottom-nav-height) + var(--view-cart-height) + var(--content-gap))}
#app.has-cart{--view-cart-height:calc(var(--cart-bar-h) + var(--cart-bar-gap))}
main{flex:1;overflow-y:auto;padding-bottom:var(--content-bottom);scroll-padding-bottom:var(--content-bottom)}
.tab{padding:16px;display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-content:start}
h2{font-size:1.05rem;font-weight:800}h3{font-size:.95rem;font-weight:800}
.sec-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.link{font-size:.78rem;font-weight:700;color:var(--primary);min-height:32px}
.hscroll{display:flex;gap:12px;overflow-x:auto;margin:0 -16px;padding:2px 16px 8px}
.story{flex:none;display:grid;gap:6px;justify-items:center;width:64px}.story span{font-size:.7rem;font-weight:700;text-align:center}
.story div{width:56px;height:56px;border-radius:16px;border:2px solid var(--primary);background:var(--surface);padding:2px;overflow:hidden;transition:transform .15s}.story:active div{transform:scale(.95)}.story img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.slwrap{display:grid;gap:10px}.slider{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;margin-bottom:-4px}
.promo{flex:0 0 100%;scroll-snap-align:start;position:relative;background:linear-gradient(135deg,#272f1a,#3a4526);border-radius:24px;padding:20px;color:#fff;overflow:hidden;box-shadow:0 10px 24px rgba(39,47,26,.25);min-height:200px;display:flex;align-items:center}
.promo>div{position:relative;z-index:1;width:60%;display:grid;gap:8px;justify-items:start}
.pill{display:inline-block;background:rgba(255,255,255,.2);font-size:.65rem;font-weight:800;text-transform:uppercase;padding:3px 10px;border-radius:99px;color:#a7f3d0;line-height:1.3;white-space:nowrap}
.promo h2{font-size:1.25rem;line-height:1.2}.promo p{font-size:.76rem;color:#d6d3d1}
.promo>img{position:absolute;right:-28px;top:50%;transform:translateY(-50%);width:148px;height:148px;object-fit:cover;border-radius:50%;border:4px solid rgba(255,255,255,.2);box-shadow:0 12px 28px rgba(0,0,0,.3)}
.p2{background:linear-gradient(135deg,#3a4526,#55633a)}.p3{background:linear-gradient(135deg,#1c2312,#3a4526)}
.dots{display:flex;justify-content:center;gap:2px;margin-top:-8px}.dot{width:24px;height:24px;display:grid;place-items:center;border-radius:50%}.dot::after{content:"";width:8px;height:8px;border-radius:99px;background:var(--border);transition:width .25s,background .25s}.dot.on::after{width:22px;background:var(--primary)}
@media(max-width:380px){.promo>div{width:62%}.promo h2{font-size:1.1rem}.promo>img{width:120px;height:120px;right:-32px}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 18px;border-radius:14px;font-weight:700;font-size:.85rem;transition:transform .15s,background .2s}.btn:active{transform:scale(.98)}.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-w{background:#fff;color:#272f1a;border-radius:99px;justify-self:start;min-height:40px;font-size:.78rem;box-shadow:var(--shadow)}
.btn-p{background:var(--primary);color:#fff}.btn-p:hover:not([disabled]){background:var(--primary-dark)}
.btn-s{background:var(--sand);color:var(--text)}.btn-s:hover{background:var(--border)}
.block{width:100%}
.mini{flex:none;width:176px;background:var(--surface);border:1px solid rgba(232,226,213,.8);border-radius:16px;padding:12px;box-shadow:var(--shadow);cursor:pointer}
.mini .ph{position:relative;height:112px;border-radius:12px;overflow:hidden;background:var(--sand);margin-bottom:8px}.mini img,.thumb img{width:100%;height:100%;object-fit:cover}
.tagb{position:absolute;top:6px;left:6px;background:rgba(255,255,255,.92);font-size:.65rem;font-weight:700;padding:2px 8px;border-radius:99px;color:var(--primary)}
.nm{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:4px}.nm h4{font-size:.78rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;font-weight:800;color:var(--primary)}
.plus{width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;flex:none}.plus:active{transform:scale(.9)}.plus[disabled]{background:var(--border);color:var(--muted);cursor:not-allowed}
.vd{width:14px;height:14px;border:1.5px solid #16a34a;border-radius:3px;display:grid;place-items:center;flex:none;background:var(--surface)}.vd::after{content:"";width:6px;height:6px;border-radius:50%;background:#16a34a}.vd.nv{border-color:#dc2626}.vd.nv::after{background:#dc2626}
.box{background:rgba(243,239,230,.7);border:1px solid rgba(232,226,213,.7);border-radius:16px;padding:16px;display:grid;gap:8px}
.box p{font-size:.78rem;color:var(--muted)}.box .t{display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:800;color:var(--primary)}
.steps{display:grid;gap:8px}.step{display:flex;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:12px}
.step b{width:32px;height:32px;border-radius:10px;background:var(--sage);color:var(--primary);display:grid;place-items:center;font-size:.85rem;flex:none}.step h4{font-size:.85rem}.step p{font-size:.75rem;color:var(--muted)}
.rev{flex:none;width:240px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px;font-size:.82rem;display:flex;flex-direction:column;gap:10px}.rev small{color:var(--muted);margin-top:auto}.rev b{display:block;font-size:.8rem;color:var(--text)}
.faq-i{border-bottom:1px solid var(--border)}.faq-q{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;font-weight:700;font-size:.85rem;min-height:48px;padding:6px 0}.faq-q .icon{transition:transform .2s}.faq-q[aria-expanded=true] .icon{transform:rotate(180deg)}
.faq-a{display:none;padding-bottom:12px;font-size:.8rem;color:var(--muted)}.faq-a.open{display:block}
.foot{text-align:center;font-size:.72rem;color:var(--muted);display:grid;gap:6px;padding-bottom:8px}.foot nav{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}.foot a{text-decoration:underline;min-height:24px}
/* MENU */
.pills{display:flex;gap:8px;overflow-x:auto;margin:0 -16px;padding:0 16px 2px}
.cp{flex:none;min-height:36px;padding:0 14px;border-radius:99px;background:var(--surface);border:1px solid var(--border);font-size:.78rem;font-weight:600;transition:all .2s}.cp.on{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:700}
.fr{display:flex;align-items:center;gap:6px}
.fl{display:flex;align-items:center;gap:6px;min-height:36px;padding:0 10px;white-space:nowrap;border-radius:99px;border:1px solid var(--border);background:var(--surface);font-size:.76rem;font-weight:600;color:var(--muted)}.fl.on{background:#ecfdf5;border-color:#10b981;color:#065f46}
select.sort{margin-left:0;flex:1;min-width:0;height:36px;border:1px solid var(--border);border-radius:99px;background:var(--surface);padding:0 10px;font-size:.76rem;font-weight:600}
.list{display:grid;gap:12px}
.row{display:flex;gap:12px;background:var(--surface);border:1px solid rgba(232,226,213,.7);border-radius:16px;padding:14px;box-shadow:var(--shadow);cursor:pointer}
.thumb{position:relative;width:96px;height:96px;border-radius:12px;overflow:hidden;background:var(--sand);flex:none}.thumb .vd{position:absolute;top:4px;left:4px}
.rb{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between}
.rb h4{font-size:.85rem;font-weight:700;line-height:1.25}.rb h4 button{text-align:left;font-weight:700}
.rb p{font-size:.72rem;color:var(--muted);margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rf{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding-top:6px;border-top:1px solid #f5f5f4}.rf b{font-size:.88rem;color:var(--primary)}.rf s{font-size:.72rem;color:var(--muted);font-weight:500;margin-left:4px}.rf small{font-weight:500;color:var(--muted)}
.sold{font-size:.72rem;font-weight:700;color:var(--muted)}
.skel{height:124px;border-radius:16px;background:linear-gradient(90deg,#efeadf 25%,#f7f4ed 50%,#efeadf 75%);background-size:200% 100%;animation:sk 1.3s infinite}@keyframes sk{to{background-position:-200% 0}}
.empty{text-align:center;padding:40px 12px;color:var(--muted);display:grid;gap:10px;justify-items:center;font-size:.85rem}.empty .icon{width:32px;height:32px}.empty b{color:var(--text)}
/* OFFERS / REWARD TILES */
.offer{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:12px}
.offer>div{display:flex;gap:12px;align-items:center}.offer i{width:40px;height:40px;border-radius:12px;background:var(--surface)beb;color:#b45309;display:grid;place-items:center;font-weight:800;font-size:.8rem;font-style:normal;flex:none}
.offer h4{font-size:.82rem}.offer p{font-size:.72rem;color:var(--muted)}.apply{font-size:.78rem;font-weight:700;color:var(--primary);background:var(--sage);padding:0 14px;min-height:36px;border-radius:99px}
.dark{background:var(--primary);color:#fff;border-radius:24px;padding:20px;display:grid;gap:6px}.dark .code{justify-self:start;border:2px dashed rgba(255,255,255,.6);border-radius:12px;padding:6px 14px;font-weight:800;letter-spacing:.06em;margin-top:6px}.dark p{font-size:.8rem;color:#d6d3d1}
/* FORMS */
.form{display:grid;gap:12px}.field{display:grid;gap:4px;font-size:.78rem;font-weight:700}
.field input{height:44px;border:1px solid var(--border);border-radius:12px;padding:0 12px;background:var(--surface);font-weight:500;width:100%;font-size:.88rem}
.field input:invalid:not(:placeholder-shown){border-color:var(--danger)}
.inl{display:flex;gap:8px}.inl input{flex:1;min-width:0;height:44px;border:1px solid var(--border);border-radius:12px;padding:0 12px;background:var(--surface);text-transform:uppercase}#pin{text-transform:none}
.msg{font-size:.8rem;font-weight:700;min-height:22px}.msg.ok{color:var(--success)}.msg.no{color:var(--danger)}
/* BOTTOM NAV + CART PILL */
.nav{position:absolute;left:0;right:0;bottom:0;background:var(--navbg);backdrop-filter:blur(8px);border-top:1px solid rgba(232,226,213,.7);z-index:30;padding-bottom:env(safe-area-inset-bottom,0)}
.nav div{display:grid;grid-template-columns:repeat(5,1fr);height:64px}
.nb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#a8a29e;font-size:.65rem;font-weight:700;min-width:44px}.nb.on{color:var(--primary)}.nb:hover{color:var(--text)}
.pillc{position:absolute;left:16px;right:16px;bottom:calc(var(--bottom-nav-height) + var(--cart-bar-gap));z-index:40}
.pillc button{width:100%;background:var(--primary);color:#fff;border-radius:16px;padding:14px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 12px 28px rgba(0,0,0,.3);min-height:52px}
.pillc .q{width:24px;height:24px;border-radius:50%;background:var(--surface);color:var(--primary);font-size:.72rem;font-weight:800;display:inline-grid;place-items:center;margin-right:10px}.pillc b{font-size:.85rem}
/* SHEETS */
.sh{position:absolute;inset:0;z-index:50;display:flex;flex-direction:column;justify-content:flex-end;background:rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}.sh.open{opacity:1;visibility:visible}
.panel{background:var(--background);border-radius:32px 32px 0 0;max-height:88%;display:flex;flex-direction:column;overflow:hidden;transform:translateY(100%);transition:transform .32s cubic-bezier(.32,.72,0,1)}.sh.open .panel{transform:none}
.ph-h{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid rgba(232,226,213,.7)}.ph-h h2{font-size:1rem}
.xbtn{width:36px;height:36px;border-radius:50%;background:var(--sand);display:grid;place-items:center}.xbtn:hover{background:var(--border)}
.pb{flex:1;overflow-y:auto;padding:20px;display:grid;gap:14px;align-content:start}
.pf{padding:16px 20px calc(16px + env(safe-area-inset-bottom,0));border-top:1px solid rgba(232,226,213,.7);background:var(--surface);display:grid;gap:10px}
.cline{display:flex;gap:12px}.cline img{width:64px;height:64px;border-radius:12px;object-fit:cover;background:var(--sand);flex:none}.cline>div{flex:1;min-width:0}.cline h4{font-size:.85rem}.cline small{display:block;font-size:.72rem;color:var(--muted)}
.cl-r{display:flex;justify-content:space-between;align-items:center;margin-top:6px}.cl-r b{font-size:.85rem}
.qty{display:inline-flex;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:12px}.qty button{width:40px;height:40px;display:grid;place-items:center}.qty button:hover{color:var(--primary)}.qty span{min-width:22px;text-align:center;font-weight:800;font-size:.85rem}
.rm{font-size:.72rem;color:var(--muted);text-decoration:underline;min-height:32px}
.sum{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted)}.sum.disc{color:#047857;font-weight:700}.sum.tot{color:var(--text);font-weight:800;font-size:.92rem;padding-top:6px;border-top:1px solid #f0efed}
.note{font-size:.72rem;color:var(--muted)}
.mh{position:relative;height:190px;background:var(--sand);flex:none}.mh img{width:100%;height:100%;object-fit:cover}.mh .xbtn{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.92)}
.mt{display:flex;justify-content:space-between;align-items:center;gap:8px}.mt h2{font-size:1.1rem;font-weight:800}.mt b{color:var(--primary);font-size:1rem}
.grp{display:grid;gap:8px;padding-top:12px;border-top:1px solid #f0efed}.grp h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}
.opt{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;font-size:.8rem;cursor:pointer;min-height:44px;background:var(--surface)}.opt span{margin-right:auto}.opt input{accent-color:var(--primary);width:18px;height:18px}.opt:has(input:checked){border-color:var(--primary);background:rgba(227,234,223,.35)}
.mfoot{display:flex;align-items:center;gap:12px;padding:14px 16px calc(14px + env(safe-area-inset-bottom,0));border-top:1px solid #f0efed;background:var(--background)}.mfoot .btn{flex:1}
.asum{background:var(--sand);border-radius:14px;padding:12px;display:grid;gap:6px}
.payph{border:1.5px dashed var(--border);border-radius:14px;padding:12px;font-size:.78rem;color:var(--muted);display:flex;gap:10px;align-items:center;background:var(--surface)}
.btn-sm{min-height:38px;padding:0 12px;font-size:.78rem}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.7rem;font-weight:700}.or::before,.or::after{content:"";flex:1;height:1px;background:var(--border)}
.cc{display:grid;place-items:center;height:44px;padding:0 12px;border:1px solid var(--border);border-radius:12px;background:var(--sand);font-weight:700;font-size:.85rem}
.otp{letter-spacing:.5em;text-align:center;font-weight:800;font-size:1.1rem}
.prof{display:flex;align-items:center;gap:12px;background:var(--primary);color:#fff;border-radius:24px;padding:16px}.prof h2{font-size:1.05rem}.prof p{font-size:.75rem;color:#d6d3d1}.prof>div:nth-child(2){flex:1;min-width:0}
.av{width:48px;height:48px;border-radius:50%;background:var(--surface);color:var(--primary);display:grid;place-items:center;font-weight:800;font-size:1.2rem;flex:none}
.prof .btn{background:rgba(255,255,255,.15);color:#fff}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow:var(--shadow)}.stat b{display:block;font-size:1.5rem;color:var(--primary);line-height:1.1}.stat span{font-size:.72rem;color:var(--muted);font-weight:600}
.ord,.acard{background:var(--surface);border:1px solid rgba(232,226,213,.8);border-radius:16px;padding:14px;box-shadow:var(--shadow);display:grid;gap:10px}
.oh{display:flex;justify-content:space-between;align-items:center;gap:8px}.oh small{display:block;font-size:.72rem;color:var(--muted)}.oh b{font-size:.88rem}
.oi{font-size:.78rem;color:var(--muted)}.oa{display:flex;gap:8px;flex-wrap:wrap}.oa .btn{flex:1;min-width:84px}
.st{font-size:.68rem;font-weight:800;padding:3px 10px;border-radius:99px;background:var(--sage);color:var(--primary);white-space:nowrap}.st.go{background:#ecfdf5;color:#065f46}.st.bad{background:#fef2f2;color:var(--danger)}.st.act{background:var(--primary);color:#fff}
.tl{list-style:none;padding-left:4px}.tl li{position:relative;padding:0 0 14px 28px;font-size:.82rem;color:var(--muted)}.tl li::before{content:"";position:absolute;left:0;top:2px;width:14px;height:14px;border-radius:50%;background:var(--surface);border:2px solid var(--border)}.tl li::after{content:"";position:absolute;left:6px;top:18px;bottom:-2px;width:2px;background:var(--border)}.tl li:last-child::after{display:none}.tl li.done{color:var(--text)}.tl li.done::before{background:var(--primary);border-color:var(--primary)}.tl li.done::after{background:var(--primary)}.tl li.cur{font-weight:800;color:var(--primary)}.tl li.cur::before{box-shadow:0 0 0 4px rgba(39,47,26,.15)}
.itm{display:flex;gap:12px;align-items:center}.itm img{width:52px;height:52px;border-radius:12px;object-fit:cover;background:var(--sand);flex:none}.itm div{flex:1;min-width:0}.itm h4{font-size:.82rem}.itm small{display:block;font-size:.72rem;color:var(--muted)}.itm b{font-size:.82rem}
.sw{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 14px;font-size:.82rem;font-weight:600;text-align:left;min-height:48px}
.sw i{width:40px;height:24px;border-radius:99px;background:var(--border);position:relative;flex:none;transition:background .2s}.sw i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--surface);transition:transform .2s}.sw[aria-checked=true] i{background:var(--primary)}.sw[aria-checked=true] i::after{transform:translateX(16px)}
.typ{display:flex;gap:8px}.typ label{cursor:pointer}.typ .cp{display:inline-flex;align-items:center}.typ label:has(input:checked) .cp{background:var(--primary);border-color:var(--primary);color:#fff}.typ input:focus-visible+.cp{outline:2px solid var(--primary);outline-offset:2px}
.kv{display:flex;justify-content:space-between;gap:12px;font-size:.82rem;padding:8px 0;border-bottom:1px solid #f0efed}.kv span{color:var(--muted)}.kv b{text-align:right;word-break:break-word}
.arow{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);font-size:.78rem;cursor:pointer}.arow input{accent-color:var(--primary);margin-top:3px;width:16px;height:16px}.arow:has(input:checked){border-color:var(--primary);background:rgba(227,234,223,.35)}
.tabs{display:flex;gap:8px;overflow-x:auto;margin:0 -16px;padding:0 16px 2px}
.qty.sm button{width:32px;height:32px}.qty.sm span{min-width:20px;font-size:.8rem}
.fbar{background:var(--sand);border-radius:14px;padding:10px 12px;display:grid;gap:6px;font-size:.78rem;font-weight:700}.bar{height:6px;border-radius:99px;background:var(--border);overflow:hidden}.bar i{display:block;height:100%;background:var(--primary);border-radius:99px;transition:width .3s}
.ups{display:grid;gap:8px}.up{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:8px 10px}.up img{width:44px;height:44px;border-radius:10px;object-fit:cover;background:var(--sand);flex:none}.up b{flex:1;min-width:0;font-size:.8rem}.up span{font-size:.8rem;font-weight:800;color:var(--primary)}
.tags{display:flex;flex-wrap:wrap;gap:6px}.tg{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:700;background:var(--sand);padding:4px 10px;border-radius:99px}.tg .icon{width:13px;height:13px}
.bump{animation:bump .35s}@keyframes bump{40%{transform:scale(1.18)}}
.byob{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow:var(--shadow)}.byob i{width:44px;height:44px;border-radius:12px;background:var(--sage);color:var(--primary);display:grid;place-items:center;flex:none}.byob div{flex:1;min-width:0}.byob h4{font-size:.88rem}.byob p{font-size:.72rem;color:var(--muted)}
.bo{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);font-size:.82rem;min-height:48px;transition:border-color .2s,background .2s}.bo[aria-checked=true],.bo.on{border-color:var(--primary);background:rgba(227,234,223,.35)}.bo>span:not(.ck){flex:1;min-width:0;font-weight:600}.bo small{display:block;font-size:.7rem;color:var(--muted);font-weight:500}.bo>b{font-size:.78rem;color:var(--primary);white-space:nowrap}
.ck{width:20px;height:20px;border-radius:50%;border:2px solid var(--border);flex:none;display:grid;place-items:center}.bo[aria-checked=true] .ck{background:var(--primary);border-color:var(--primary);color:#fff}
.bhint{font-size:.75rem;color:var(--muted);margin-top:3px}.bt{display:flex;justify-content:space-between;align-items:center;gap:10px}.bt b{font-size:1.15rem}.bt span{display:block;font-size:.72rem;color:var(--muted)}
#splash{position:fixed;inset:0;z-index:200;background:#272f1a;display:grid;place-items:center;animation:spOut .4s ease 2.1s forwards}
.sp-in{display:grid;justify-items:center;gap:22px;padding:24px;width:100%}
.sp-logo{width:clamp(120px,38vw,200px);height:auto;color:#e8eed7;font-size:1.4rem;opacity:0;transform:scale(.94);animation:spLogo .6s ease .1s forwards}
.sp-line{width:clamp(120px,46vw,220px);height:2px;background:rgba(232,238,215,.18);border-radius:2px;overflow:hidden;opacity:0;animation:spFade .3s ease .45s forwards}
.sp-line i{display:block;height:100%;width:0;background:#e8eed7;animation:spBar .95s cubic-bezier(.4,0,.2,1) .55s forwards}
.sp-msg{color:#e8eed7;font-size:clamp(.85rem,3.6vw,1.05rem);letter-spacing:.04em;text-align:center;max-width:90vw;opacity:0;animation:spFade .5s ease 1.5s forwards}
@keyframes spLogo{to{opacity:1;transform:none}}@keyframes spFade{to{opacity:1}}@keyframes spBar{to{width:100%}}@keyframes spOut{to{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){#splash{display:none}}
.plan{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px;display:grid;gap:10px;box-shadow:var(--shadow)}.plan.hl{border:2px solid var(--primary)}.plan .st{justify-self:start}.pp b{font-size:1.8rem;font-weight:800}.pp span{color:var(--muted);font-size:.82rem;margin-left:4px}
.feat{list-style:none;display:grid;gap:6px;font-size:.82rem}.feat li{display:flex;gap:8px;align-items:center}.feat .icon{color:var(--primary)}
/* Install banner: fixed overlay (never shifts layout). Default sits just under the header so search, location and cart stay usable.
   To place it over the very top instead, set --install-top:calc(8px + env(safe-area-inset-top,0px)) on #app. */
.inst{position:absolute;left:12px;right:12px;top:var(--install-top,calc(var(--header-h,112px) + 8px));z-index:45;display:flex;align-items:center;gap:10px;background:#272f1a;color:#e8eed7;border-radius:16px;padding:10px 8px 10px 10px;box-shadow:0 10px 28px rgba(0,0,0,.28);transform:translateY(-14px);opacity:0;visibility:hidden;transition:transform .28s ease,opacity .28s ease,visibility .28s}
.inst.show{transform:none;opacity:1;visibility:visible}
.inst-ic{flex:none;width:40px;height:40px;border-radius:10px;background:#3a4429;display:grid;place-items:center;overflow:hidden}.inst-ic img{max-width:32px;max-height:24px;object-fit:contain}
.inst-t{flex:1;min-width:0;display:grid;gap:1px}.inst-t b{font-size:.84rem}.inst-t span{font-size:.72rem;line-height:1.3;color:#d3dbbf;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.inst .btn{background:#e8eed7;color:#272f1a;min-height:40px;padding:0 14px;border-radius:12px;font-size:.8rem;flex:none}.inst .btn:hover{background:#fff}
.inst-x{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#e8eed7}.inst-x:hover{background:rgba(232,238,215,.12)}.inst :focus-visible{outline-color:#e8eed7}
@media(prefers-reduced-motion:reduce){.inst{transition:none}}
.savecard{align-self:start;gap:12px;padding:12px 14px;align-items:center;border-radius:16px;box-shadow:var(--shadow)}.sci{width:40px;height:40px;border-radius:12px;background:var(--sage);color:var(--primary);display:grid;place-items:center;flex:none}.sci .icon{width:20px;height:20px}
.sct{flex:1;min-width:0;display:grid;gap:1px;text-align:left}.sct b{font-size:.9rem}.sct small{font-size:.72rem;color:var(--muted);font-weight:500;line-height:1.3}
.savecard[aria-checked=true]{border-color:var(--primary);background:rgba(227,234,223,.35)}.savecard[aria-checked=true] .sci .icon{fill:currentColor}
.savecard.ok{border-color:var(--success);cursor:default}.savecard.ok .sci{color:var(--success)}
.sbbtn{width:40px;height:40px}.rm.ok{text-decoration:none;color:var(--success);font-weight:700}
@media(max-width:420px){.hact{gap:6px}.dpill{padding:0 10px}.dpill>svg:last-child{display:none}}
@media(max-width:380px){.brand{width:108px;height:40px}.brand img{width:108px;height:108px;top:-68px}}
@media(max-width:360px){.dpill{font-size:.7rem}}
@media(max-width:340px){.dpill span{display:none}}
.stk{position:sticky;top:0;z-index:6;background:var(--background);margin:0 -16px;padding:8px 16px;display:grid;gap:8px;border-bottom:1px solid var(--border)}.stk .pills{margin:0;padding:0 0 2px}
.fav{position:absolute;top:6px;right:6px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;color:#57534e;z-index:2}.fav .icon{width:16px;height:16px}.fav.on{color:var(--danger)}.fav.on .icon{fill:currentColor}
.rt{display:flex;align-items:center;gap:4px;font-size:.7rem;font-weight:700;margin-top:3px;flex-wrap:wrap}.rt .icon{width:12px;height:12px;fill:#f59e0b;stroke:#f59e0b}.rt span{color:var(--muted);font-weight:500}.rt .pop{background:var(--sage);color:var(--primary);padding:1px 8px;border-radius:99px;font-size:.65rem;font-weight:800}
.rimg{width:100%;height:110px;object-fit:cover;border-radius:10px;background:var(--sand)}
.sugg{position:absolute;left:0;right:0;top:50px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 10px 24px rgba(0,0,0,.18);padding:8px;z-index:40;display:grid;gap:2px}.searchrow .sugg .icon{position:static;width:14px;height:14px;flex:none;color:var(--muted)}
.sugg h4{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:4px}.sugg button{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 8px;border-radius:10px;text-align:left;font-size:.82rem}.sugg button:hover{background:var(--sand)}
.fcnt{background:var(--primary);color:#fff;border-radius:99px;font-size:.65rem;padding:0 6px;margin-left:2px}
.grp textarea{width:100%;border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:var(--surface);resize:none;font-size:.82rem}
.field select{height:44px;border:1px solid var(--border);border-radius:12px;padding:0 12px;background:var(--surface);width:100%;font-weight:500}
.gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;height:100%}.gal img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:start}.gdots{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;gap:5px;pointer-events:none}.gdots i{width:6px;height:6px;border-radius:99px;background:rgba(255,255,255,.65);transition:width .2s}.gdots i.on{width:16px;background:#fff}
.route{background:var(--sand);border-radius:16px;padding:14px;display:grid;gap:14px}.rp{display:flex;align-items:center;gap:10px;font-size:.7rem;font-weight:700}.rp>span{display:flex;flex-direction:column;align-items:center;gap:2px}.rl{position:relative;flex:1;height:0;border-top:2px dashed var(--border)}.rl i{position:absolute;left:0;top:-2px;height:2px;background:var(--primary)}.rl b{position:absolute;top:-15px;transform:translateX(-50%);width:30px;height:30px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center}.eta b{font-size:1.4rem;color:var(--primary)}.eta span{display:block;font-size:.72rem;color:var(--muted)}
.oagain{flex:none;width:240px}.prefs{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.sw i::after{background:#fff}
html[data-theme=dark]{--primary:#a3be63;--primary-dark:#b9d17c;--onp:#1c2312;--background:#272f1a;--surface:#313a23;--sand:#3a4429;--sage:#46522f;--text:#f1f3e8;--muted:#b4bba3;--border:#4b5736;--danger:#ef7b6e;--navbg:rgba(39,47,26,.96);--shadow:0 2px 10px rgba(0,0,0,.35)}
html[data-theme=dark] :is(.vl button[aria-checked=true],.searchrow .mic.on,.count,.btn-p,.plus,.cp.on,.fcnt,.st.act,.pillc button,.rl b,.bo[aria-checked=true] .ck){color:var(--onp)}
html[data-theme=dark] :is(.prof,.dark){background:#3a4429}html[data-theme=dark] .pillc .q{background:var(--onp);color:var(--primary)}
html[data-theme=dark] .promo{background:linear-gradient(135deg,#3b4727,#566a33)}html[data-theme=dark] .p2{background:linear-gradient(135deg,#4b5a2e,#6b803c)}html[data-theme=dark] .p3{background:linear-gradient(135deg,#323d21,#4d5f2c)}
html[data-theme=dark] .brand img{filter:brightness(0) invert(1)}
html[data-theme=dark] .skel{background:linear-gradient(90deg,#3a4429 25%,#46522f 50%,#3a4429 75%);background-size:200% 100%}
html[data-theme=dark] .st.go,html[data-theme=dark] .fl.on{background:#2f4a2a;color:#bde6a9}html[data-theme=dark] .st.bad{background:#4a2a25;color:#f5a39b}
#toasts{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:90;display:grid;gap:8px;width:calc(100% - 32px);pointer-events:none;justify-items:center}
.toast{background:var(--text);color:#fff;font-size:.78rem;font-weight:700;padding:10px 16px;border-radius:16px;box-shadow:0 10px 24px rgba(0,0,0,.25);animation:tin .25s}.toast.error{background:var(--danger)}@keyframes tin{from{opacity:0;transform:translateY(-8px)}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}