:root{
  --accent:#00A082; --accent-d:#00846B; --brand:#D9483B; --brand-d:#B23227;
  /* --mut was #6B7683. Measured on the LIVE page it hit 4.39:1 against the playful theme's
     cream --bg (#FFF8F0), failing 4.5 body text by a hair across .p-sub/.ds/.p-was/.rv-sub/
     .arr/.sfoot-row at once. #67707C measures 4.76:1 on that cream and 5.01:1 on pure white.
     This is the "grey on grey" complaint: one token, seven symptoms. */
  --ink:#1F2933; --ink2:#3E4C59; --mut:#67707C; --bg:#FFFFFF; --bg2:#F5F6F7; --line:#ECEEF0;
  --red:#E4362B; --amber:#F59E0B;
  /* FILL vs TEXT split. --red/--amber are tuned to be seen as SOLID CHIPS, so reusing them as
     text on a light surface measured 4.10:1 (.p-save) and 2.04:1 (.poptag) — the amber is
     effectively unreadable. These *-ink variants are for text only; the originals stay for
     backgrounds. Dark theme overrides them back to light values, since there the same text sits
     on #0C0E13 and a dark ink would invert the bug. */
  --amber-ink:#B45309; --red-ink:#C0271D;
  /* ink for icons sitting on a SOLID brand/accent chip. app.js recomputes both from the tenant's own
     colours at boot, so a light accent gets dark ink instead of invisible white. */
  --on-accent:#fff; --on-brand:#fff;
  /* Bottom-inset chain. app.js syncInsets() measures the REAL cart bar + order pill and rewrites these,
     so nothing below is a second hardcoded copy of a height that can drift. These are only the
     pre-JS fallbacks (a sane cart-bar height) so the first paint is never wrong either.
     --cbh: true cart-bar height, always. --cbv: 0 while the bar is tucked away. --oph: pill height + gap. */
  --cbh:82px; --cbv:0px; --oph:0px;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --sh:0 1px 3px rgba(15,25,35,.06),0 8px 24px rgba(15,25,35,.06);
  --sh-lg:0 16px 48px rgba(15,25,35,.16);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;-webkit-font-smoothing:antialiased;padding-bottom:calc(var(--cbh) + var(--oph) + 16px)}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
a{text-decoration:none;color:inherit}
.wrap{max-width:640px;margin:0 auto;position:relative}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* loading / error */
.boot{min-height:82vh;display:grid;place-items:center;text-align:center;padding:24px}
.spin{width:40px;height:40px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:sp .8s linear infinite;margin:0 auto 14px}
@keyframes sp{to{transform:rotate(360deg)}}
.boot p{color:var(--mut);font-size:14.5px;margin:0}
.boot .retry{margin-top:16px;background:var(--accent);color:#fff;font-weight:700;border-radius:12px;padding:12px 22px;font-size:14.5px}

/* sticky mini header */
.topbar{position:fixed;top:0;left:0;right:0;z-index:70;max-width:640px;margin:0 auto;display:flex;align-items:center;gap:11px;padding:11px 16px;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line);transform:translateY(-110%);transition:.28s cubic-bezier(.4,0,.2,1)}
.topbar.on{transform:none}
.topbar .tl{width:34px;height:34px;border-radius:50%;background:var(--bg2);display:grid;place-items:center;overflow:hidden;box-shadow:var(--sh)}
.topbar .tl img{width:100%;height:100%;object-fit:cover}.topbar .tl b{color:var(--brand);font-weight:900}
.topbar h3{margin:0;font-size:16px;font-weight:800;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}

/* cover + info card */
.cover{height:230px;background-size:cover;background-position:center;position:relative}
.cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,0) 55%)}
.infocard{position:relative;z-index:5;margin:-64px 14px 0;background:#fff;border-radius:24px;box-shadow:var(--sh-lg);padding:20px 18px 6px}
.ihead{display:flex;align-items:center;gap:13px}
.ilogo{width:58px;height:58px;border-radius:50%;background:#111;display:grid;place-items:center;overflow:hidden;flex:none;border:1px solid var(--line)}
.ilogo img{width:100%;height:100%;object-fit:cover}
.ilogo b{color:#fff;font-weight:900;font-size:24px}
.iname{flex:1;min-width:0}
.iname h1{margin:0;font-size:25px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.iname .tag{color:var(--mut);font-size:14px;margin-top:4px}
.irows{margin-top:14px}
.irow{display:flex;align-items:center;gap:13px;padding:13px 0;border-top:1px solid var(--line);font-size:15px;font-weight:600;color:var(--ink);width:100%;text-align:left}
.irow .ic{width:38px;height:38px;border-radius:12px;background:var(--bg2);display:grid;place-items:center;flex:none;font-size:16px}
.irow .tx{flex:1;min-width:0}
.irow .tx small{display:block;font-weight:500;color:var(--mut);font-size:12.5px;margin-top:1px}
.irow .arr{color:var(--mut);flex:none;transition:.2s}
.irow .arr.up{transform:rotate(180deg)}
/* accent/red as TEXT on a light card. The tenant picks the accent, so it cannot be hardcoded:
   app.js already computes --accent-ink by darkening the owner's own colour until it clears
   4.5:1 (Blaze's #fca311 -> rgb(147,95,10), measured 4.92:1). Raw --accent measured 2.02:1.
   Falls back to --accent-d then --accent so a tenant without computed ink is never worse off. */
.irow .st-open{color:var(--accent-ink,var(--accent-d,var(--accent)))}.irow .st-closed{color:var(--red-ink,var(--red))}
.irow .rate{color:var(--accent-ink,var(--accent-d,var(--accent)));font-weight:800}
.irow .star{color:var(--accent)}
.hourstable{overflow:hidden;max-height:0;transition:.3s}
.hourstable.open{max-height:340px}
.hrow{display:flex;justify-content:space-between;padding:7px 0 7px 51px;font-size:14px;color:var(--mut)}
.hrow.today{color:var(--ink);font-weight:700}
.hrow span:last-child{font-variant-numeric:tabular-nums}

/* promos */
/* Was a fixed-272px horizontal scroll strip, which never lined up with .reorder/.startgroup
   (full width, 14px margins) and left a ragged gap on the right. Now a grid on the same 14px
   gutters: 1 offer fills the row, 2 split it evenly, 3+ wrap. No sideways drift. */
.promos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;padding:16px 14px 2px}
.promos::-webkit-scrollbar{display:none}
/* width now comes from the grid track, not a hardcoded 272px */
.promo{border-radius:18px;padding:16px 17px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--sh)}
.promo.g1{background:linear-gradient(135deg,var(--brand),var(--brand-d))}
.promo.g2{background:linear-gradient(135deg,#1F2937,#0B1220)}
/* promo tiles set their own `color` per variant (white on the brand fill, --ink on street's paper
   tile), so the mask icon just follows currentColor and inherits whatever already passes there. */
.promo .pe{font-size:22px;--mic-fg:var(--icon-c,currentColor)}
.promo h4{margin:6px 0 3px;font-size:15.5px;font-weight:800;letter-spacing:-.01em}
.promo p{margin:0;font-size:12.5px;opacity:.9;line-height:1.4}
.promo::after{content:"";position:absolute;right:-30px;bottom:-30px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.08)}

/* search */
.searchwrap{padding:14px 14px 4px}
.search{display:flex;align-items:center;gap:10px;background:var(--bg2);border-radius:14px;padding:0 14px}
.search svg{width:18px;height:18px;stroke:var(--mut);fill:none;stroke-width:2;flex:none}
.search input{flex:1;border:0;background:none;padding:13px 0;font-family:inherit;font-size:15.5px;color:var(--ink);outline:0}
.search input::placeholder{color:var(--mut)}
.search .clr{color:var(--mut);font-size:20px;padding:4px;display:none}

/* category tabs */
.catbar{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line)}
.catbar .inner{display:flex;gap:2px;overflow-x:auto;padding:0 8px;scrollbar-width:none}
.catbar .inner::-webkit-scrollbar{display:none}
.catbar button{flex:none;padding:16px 13px 13px;font-size:16.5px;font-weight:700;white-space:nowrap;color:var(--ink2);position:relative}
/* The SELECTED category. Raw accent measured 2.02:1, i.e. the one tab telling you where you are
   was the hardest to read. The ::after underline below keeps the raw accent deliberately: it is
   decorative reinforcement, and the state is now carried by the ink weight too. */
.catbar button.on{color:var(--accent-ink,var(--accent-d,var(--accent)))}
.catbar button.on::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--accent)}

/* closed banner */
.closedbar{position:sticky;top:53px;z-index:55;background:#E25A50;color:#fff;text-align:center;font-size:13.5px;font-weight:700;padding:10px 14px}
.closedbar b{text-transform:uppercase;letter-spacing:.04em}

/* menu */
.menu{padding:2px 16px 8px}
.cat-h{font-family:'Plus Jakarta Sans',var(--sans);font-size:26px;font-weight:800;letter-spacing:-.02em;margin:26px 0 2px;scroll-margin-top:64px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.item{display:flex;gap:14px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line)}
.item .info{flex:1;min-width:0;padding-top:2px}
.item .nm{font-weight:700;font-size:16.5px;letter-spacing:-.01em;line-height:1.25}
.item .ds{font-size:13.5px;color:var(--mut);margin-top:4px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* photo-less items have spare vertical room — let the sell copy breathe to 3 lines (expert order #11) */
.item .ds.roomy{-webkit-line-clamp:3}
.priceline{margin-top:8px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.p-main{font-weight:800;font-size:16.5px;letter-spacing:-.01em}
.p-sub{color:var(--mut);font-size:13.5px}
.p-was{color:var(--mut);font-size:13.5px;text-decoration:line-through}
.p-save{color:var(--red-ink,var(--red));font-size:12px;font-weight:800;letter-spacing:.02em;margin-top:4px;text-transform:uppercase}
.poptag{display:inline-flex;align-items:center;gap:4px;color:var(--amber-ink,var(--amber));font-size:12.5px;font-weight:700;margin-top:7px}
.item.out .nm,.item.out .p-main{color:var(--mut)}
.item.out .thumb{opacity:.45}
.souldout{display:inline-block;color:var(--red);font-size:12px;font-weight:800;margin-top:6px;text-transform:uppercase}
.thumbwrap{position:relative;flex:none}
.thumb{width:106px;height:106px;border-radius:20px;display:grid;place-items:center;font-size:46px;background:linear-gradient(150deg,color-mix(in srgb,var(--brand) 12%,#FBF7F3),color-mix(in srgb,var(--brand) 22%,#F3ECE6));overflow:hidden;box-shadow:var(--sh)}
.thumb:has(img){background:var(--brand)}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:20px}
.addwrap{position:absolute;right:-5px;bottom:-5px}
.add{width:38px;height:38px;border-radius:50%;background:#fff;color:var(--accent-ink,var(--accent-d,var(--accent)));font-size:23px;font-weight:600;line-height:1;display:grid;place-items:center;box-shadow:0 3px 12px rgba(15,25,35,.22);transition:.12s}
.add:active{transform:scale(.86)}
.add:disabled{color:#C7CCD1}
.stepper{display:flex;align-items:center;background:#fff;border-radius:100px;box-shadow:0 3px 12px rgba(15,25,35,.22)}
.stepper button{width:34px;height:38px;color:var(--accent);font-size:19px;font-weight:700;display:grid;place-items:center}
.stepper .qn{min-width:16px;text-align:center;color:var(--ink);font-weight:800;font-size:14.5px;font-family:var(--mono)}

/* popular */
.pop-h{font-family:'Plus Jakarta Sans',var(--sans);font-size:26px;font-weight:800;letter-spacing:-.02em;margin:24px 16px 14px}
.pop-h::after{content:"";display:block;width:42px;height:3px;border-radius:2px;background:var(--brand);margin-top:9px}
[data-theme="dark"] .cat-h,[data-theme="dark"] .pop-h,[data-theme="dark"] .iname h1,[data-theme="dark"] .sheet h2,[data-theme="dark"] .done h2{font-family:'Space Grotesk',var(--sans);letter-spacing:-.02em}
[data-theme="punchy"] .pop-h::after,[data-theme="street"] .pop-h::after,[data-theme="editorial"] .pop-h::after{display:none}
[data-theme="playful"] .pop-h::after{height:5px;width:52px;border-radius:99px}
.popgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0 16px}
.popcard{position:relative}
.popcard .pthumb{position:relative;height:150px;border-radius:20px;background:linear-gradient(150deg,color-mix(in srgb,var(--brand) 12%,#FBF7F3),color-mix(in srgb,var(--brand) 22%,#F3ECE6));display:grid;place-items:center;font-size:56px;box-shadow:var(--sh);overflow:hidden}
.popcard .pthumb:has(img){background:var(--brand)}
.popcard .pthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.popcard .nm{font-weight:700;font-size:15px;margin-top:10px;letter-spacing:-.01em}
.popcard .priceline{margin-top:4px}
.popcard .addwrap{position:absolute;right:8px;top:104px}

.noresult{text-align:center;color:var(--mut);padding:40px 20px;font-size:14.5px}
.sfoot{margin:26px 14px 0;padding:14px 4px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.sfoot-row{font-size:12.5px;color:var(--mut);text-decoration:none;line-height:1.4;display:block}
a.sfoot-row:active{opacity:.6}
.powered{text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:#B9C0C7;text-transform:uppercase;padding:22px 0 12px}
.powered b{color:var(--accent)}

/* cart bar */
.cartbar{position:fixed;left:0;right:0;bottom:0;z-index:50;max-width:640px;margin:0 auto;padding:0 16px calc(16px + env(safe-area-inset-bottom))}
.cartbar button{width:100%;background:var(--accent);color:#fff;border-radius:16px;padding:16px 20px;font-weight:800;font-size:15.5px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 14px 34px color-mix(in srgb,var(--accent) 40%,transparent)}
.cartbar .l{display:flex;align-items:center;gap:12px}
.cartbar .q{background:rgba(255,255,255,.26);border-radius:10px;min-width:28px;height:28px;display:grid;place-items:center;font-size:14px;font-weight:800}
.cartbar.hide{transform:translateY(180%);transition:.3s cubic-bezier(.4,0,.2,1)}

/* sheet */
.scrim{position:fixed;inset:0;background:rgba(15,20,25,.5);z-index:80;opacity:0;pointer-events:none;transition:.25s;backdrop-filter:blur(2px)}
.scrim.on{opacity:1;pointer-events:auto}
/* While a sheet is open the scrim (z-index 80) sits over the cart bar (z-index 50) and eats every
   tap. The bar stayed visible through the 50%-opacity scrim, so it looked present but dead —
   reported as "the view order cart is unpressable". A bottom bar has no business showing under a
   modal, so it now gets out of the way instead of teasing a tap that cannot land. */
/* THE "IT'S THERE BUT I CAN'T TAP IT" BUG.
   pointer-events is NOT animatable, so it flips to none the instant a sheet opens. opacity and
   transform ARE, so they fade over .18s (measured far longer on a throttled phone). For that whole
   window the bar is fully VISIBLE and completely dead to touch — which is exactly what a customer
   reports as "the button does nothing". The auto-opening review prompt fires 1.5s after load
   (app.js maybeReviewPopup), landing that dead window right when a thumb is reaching for the cart.
   `transition:none` collapses the gap: the bar vanishes in lockstep with going untappable.
   Do NOT reintroduce a fade here — any fade-out recreates the dead window by definition. */
/* TWO selectors on purpose, and the .sheet-open one is the load-bearing half.
   The :has() version alone was a single point of failure: a browser without :has() support
   discards the ENTIRE rule, and then the scrim (z-index 80, pointer-events auto) sits directly
   above the cart bar (z-index 50) — so the bar renders normally while every tap lands on the
   scrim instead. That is the "it's there but I can't tap it" report, and it is invisible to
   testing on any browser that DOES support :has().
   .sheet-open is a plain class toggled by openSheet()/_closeSheetNow() in app.js, so the guard
   now works on every browser. Keep BOTH: :has() still covers any path that shows the scrim
   without routing through openSheet(). */
body:has(.scrim.on) .cartbar,
body.sheet-open .cartbar{opacity:0;pointer-events:none;transform:translateY(8px);transition:none}
.cartbar{transition:opacity .18s,transform .18s}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:90;max-width:640px;margin:0 auto;background:#fff;border-radius:26px 26px 0 0;max-height:94vh;overflow-y:auto;transform:translateY(100%);transition:.32s cubic-bezier(.4,0,.2,1);padding:8px 18px calc(22px + env(safe-area-inset-bottom))}
.sheet.on{transform:none}
.grab{width:42px;height:5px;border-radius:100px;background:var(--line);margin:8px auto 8px}
.sheetclose{position:fixed;top:calc(14px + env(safe-area-inset-top));right:16px;z-index:95;width:40px;height:40px;border:1px solid rgba(0,0,0,.08);border-radius:50%;background:rgba(255,255,255,.97);color:#141414;font-size:18px;font-weight:700;line-height:1;display:none;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 3px 14px rgba(0,0,0,.45)}
.sheetclose.show{display:flex}
.sheet h2{margin:6px 2px 14px;font-size:22px;font-weight:800;letter-spacing:-.02em}
.line{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.line .lth{width:52px;height:52px;border-radius:14px;background:var(--brand);display:grid;place-items:center;font-size:26px;flex:none;overflow:hidden;position:relative}
.line .lth img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.line .lt{flex:1;min-width:0}.line .ln{font-weight:700;font-size:14.5px}
.line .lp{font-size:12.5px;color:var(--mut);margin-top:3px}
.step{display:flex;align-items:center;background:var(--bg2);border-radius:100px;overflow:hidden;flex:none}
.step button{width:34px;height:34px;color:var(--accent);font-size:18px;font-weight:700}
.step .n{width:24px;text-align:center;font-family:var(--mono);font-weight:800;font-size:13.5px}
.fld{margin:14px 2px 0}
.fld label{display:block;font-size:12px;font-weight:800;color:var(--mut);margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em}
/* mandatory-field marker (delivery address): the driver has nothing to go on without it */
.reqtag{display:inline-block;margin-left:6px;padding:2px 6px;border-radius:6px;font-size:9.5px;font-weight:800;letter-spacing:.06em;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.fld input,.fld textarea{width:100%;border:1.5px solid var(--line);border-radius:13px;padding:13px 15px;font-family:inherit;font-size:15.5px;background:#fff;color:var(--ink);transition:.15s}
.fld input:focus,.fld textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
.fld textarea{min-height:56px;resize:vertical}
.pinbtn{width:100%;margin-top:10px;border:1.5px dashed var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent);color:var(--accent);border-radius:13px;padding:13px;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px}
.pinbtn.done{border-style:solid;background:color-mix(in srgb,var(--accent) 10%,transparent)}
.dzbanner{margin-top:9px;padding:11px 13px;border-radius:12px;font-size:12.5px;line-height:1.45}
.dzbanner b{font-weight:800}
.dzbanner.in{background:rgba(30,158,90,.10);color:#0f6b39}
.dzbanner.out{background:rgba(224,74,59,.12);color:#a02718}
.dzbanner.note{background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--ink2,#4a4a4a)}
.dzany{display:inline-block;margin-top:6px;font-weight:800;text-decoration:underline;font-size:12px;cursor:pointer}
.place:disabled{opacity:.5;filter:grayscale(.3);cursor:not-allowed;box-shadow:none}
.sumrow{display:flex;justify-content:space-between;font-size:14px;color:var(--mut);margin:14px 4px 0}
.sumrow.tot{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);color:var(--ink);align-items:baseline}
.sumrow.tot span:first-child{font-size:16px;font-weight:800}
.sumrow.tot .tv{font-size:20px;font-weight:800;text-align:right}
.sumrow.tot .tv small{display:block;color:var(--mut);font-size:12.5px;font-weight:600;margin-top:2px}
.place{width:100%;margin-top:16px;background:var(--accent);color:#fff;border-radius:16px;padding:17px;font-weight:800;font-size:16.5px;box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 32%,transparent);display:flex;align-items:center;justify-content:center;gap:9px}
/* a disabled place button now carries the REASON it is disabled (missing address / pin / minimum),
   so its label has to be readable: white-on-grey at .5 opacity was not. */
.place:disabled{background:#C3CDCA;box-shadow:none;color:#20262B;opacity:1;filter:none}
.cod{text-align:center;font-size:12px;color:var(--mut);margin-top:11px}

/* success */
.done{text-align:center;padding:38px 20px 26px}
.done .ic{width:86px;height:86px;border-radius:50%;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);display:grid;place-items:center;margin:0 auto 18px;font-size:44px;animation:pop .45s cubic-bezier(.2,1.4,.5,1)}
@keyframes pop{from{transform:scale(0)}}
.done h2{font-size:24px;margin:0 0 8px}
.done p{color:var(--mut);font-size:14.5px;margin:0 auto;max-width:340px;line-height:1.55}
.done p b{color:var(--ink)}
.done .code{display:inline-block;font-family:var(--mono);font-weight:800;font-size:15px;background:var(--bg2);border-radius:10px;padding:7px 14px;margin:14px 0 4px;letter-spacing:.05em}
.done .wabtn{display:inline-flex;align-items:center;gap:9px;margin-top:20px;background:#25D366;color:#fff;text-decoration:none;font-weight:800;padding:15px 26px;border-radius:15px;font-size:15.5px;box-shadow:0 10px 24px rgba(37,211,102,.32)}
.done .again{display:block;margin-top:14px;color:var(--mut);font-size:14px;font-weight:700;width:100%}

/* ===== stars ===== */
.stars{display:inline-flex;gap:1px;white-space:nowrap;vertical-align:middle}
.stars .st{color:#DCE0E4;font-size:15px;line-height:1}
.stars .st.f{color:#FFB400}
.stars.sm .st{font-size:12.5px}
.irow .rate{margin-right:2px}
button.irow{cursor:pointer}

/* ===== reviews section ===== */
.reviews{padding:24px 16px 6px;border-top:8px solid var(--bg2);margin-top:22px}
.rv-h{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:0 0 16px}
.rv-sum{display:flex;gap:20px;align-items:center;margin-bottom:16px}
.rv-avg{text-align:center;flex:none}
.rv-avg .big{font-size:42px;font-weight:800;line-height:1;letter-spacing:-.02em}
.rv-avg .stars{margin-top:5px}
.rv-avg .rc{color:var(--mut);font-size:12px;margin-top:5px;font-weight:600}
.rv-dist{flex:1;min-width:0}
.distrow{display:flex;align-items:center;gap:8px;margin:3px 0}
.distrow .dl{font-size:12px;color:var(--mut);width:8px;font-weight:700;text-align:right}
.distrow .dstar{color:#FFB400;font-size:11px}
.distrow .dbar{flex:1;height:7px;border-radius:100px;background:var(--bg2);overflow:hidden}
.distrow .dbar>span{display:block;height:100%;background:#FFB400;border-radius:100px}
.rv-write{width:100%;border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:14px;font-weight:800;font-size:14.5px;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:8px;transition:.15s}
.rv-write:active{background:var(--bg2)}
.rv-list{margin-top:6px}
.rvw{padding:16px 0;border-bottom:1px solid var(--line)}
.rvw .rvh{display:flex;align-items:center;gap:11px}
.rvw .rav{width:38px;height:38px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:800;font-size:16px;flex:none;text-transform:uppercase}
.rvw .rvm{flex:1;min-width:0}
.rvw .rvm b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.rvw .rvm .stars{margin-top:2px}
.rvw .rvt{color:var(--mut);font-size:12px;flex:none;font-weight:600}
.rvw p{margin:9px 0 0;font-size:14px;color:var(--ink2);line-height:1.5}
.rvempty{text-align:center;color:var(--mut);padding:24px 16px;font-size:14px}
.rv-seed{color:var(--mut);font-size:14px;line-height:1.5;padding:4px 2px 8px}

/* ===== review form ===== */
.rvpick{display:flex;justify-content:center;gap:8px;margin:8px 0 4px}
.rvpick button{font-size:40px;line-height:1;color:#DCE0E4;transition:transform .1s}
.rvpick button.on{color:#FFB400}
.rvpick button:active{transform:scale(1.2)}
.rvhint{text-align:center;color:var(--mut);font-size:13.5px;font-weight:700;min-height:18px;margin-bottom:6px}
.rverr{color:var(--red);font-size:13px;font-weight:600;text-align:center;margin-top:10px;min-height:16px}

/* emoji rating */
.emopick{display:flex;justify-content:space-between;gap:6px;margin:10px 0 6px}
.emopick button{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 2px;border-radius:14px;border:1.5px solid var(--line);background:#fff;transition:.12s}
.emopick button .em{font-size:30px;line-height:1;filter:grayscale(.35);transition:.12s}
.emopick button .eml{font-size:10.5px;font-weight:700;color:var(--mut)}
.emopick button.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.emopick button.on .em{filter:none;transform:scale(1.12)}
.emopick button.on .eml{color:var(--accent-d)}
.rvmsg{border-radius:13px;padding:13px 15px;font-size:13.5px;line-height:1.5;margin:6px 0 4px}
.rvmsg.good{background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--ink)}
.rvmsg.bad{background:rgba(245,158,11,.1);color:var(--ink)}
.rvmsg b{font-weight:800}
.rav.emo{background:var(--bg2);font-size:22px}
.rvw .rvm .rv-emo{font-size:16px}

/* ===== item detail sheet ===== */
.idetail{padding:2px 0 0}
.ihero{height:200px;border-radius:22px;background:linear-gradient(155deg,color-mix(in srgb,var(--brand) 12%,#FBF7F3),color-mix(in srgb,var(--brand) 24%,#F1E9E3));display:grid;place-items:center;font-size:96px;position:relative;overflow:hidden;box-shadow:var(--sh);margin-bottom:16px}
.ihero.img{font-size:0;background:var(--brand)}
.ihero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ihero-tag{position:absolute;left:12px;top:12px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:800;padding:6px 11px;border-radius:100px;backdrop-filter:blur(4px)}
.idetail h2{margin:0 2px 6px;font-size:24px}
.idesc{margin:0 2px;color:var(--ink2);font-size:14.5px;line-height:1.55}
.iprice{margin:12px 2px 4px}
.iprice .priceline{margin-top:0}.iprice .p-main{font-size:20px}
.ioos{margin:14px 2px 2px;color:var(--red);font-weight:800;font-size:15px}
.iqtyrow{display:flex;align-items:center;gap:12px;margin-top:18px}
.step.big{background:var(--bg2);border-radius:100px;flex:none}
.step.big button{width:46px;height:50px;font-size:22px}
.step.big .n{width:34px;font-size:16px}
.iadd{flex:1;background:var(--accent);color:#fff;border-radius:16px;padding:15px 18px;font-weight:800;font-size:15px;box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 32%,transparent);display:flex;align-items:center;justify-content:space-between;gap:10px;white-space:nowrap}
.iadd span{opacity:.95;font-variant-numeric:tabular-nums;font-size:15.5px}
.step.big button{width:42px}
.iadd:active{transform:scale(.99)}

/* item sheet header + actions */
.ihdr{display:flex;align-items:center;justify-content:space-between;margin:0 -18px;padding:6px 18px 8px;position:sticky;top:0;z-index:3;background:#fff}
.ihx,.iha{width:38px;height:38px;border-radius:50%;background:var(--bg2);display:grid;place-items:center;font-size:17px;color:var(--ink);flex:none}
.ihacts{display:flex;gap:9px}
.iha.on{color:var(--red)}
.iha#iShare{font-size:16px}

/* option groups */
.ogrp{margin:18px -18px 0;padding:16px 18px 4px;border-top:8px solid var(--bg2)}
.ogh{font-size:17px;font-weight:800;letter-spacing:-.01em;margin-bottom:10px;display:flex;align-items:center;gap:10px}
.ogh .req{font-size:11px;font-weight:800;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);padding:3px 9px;border-radius:100px;text-transform:uppercase;letter-spacing:.03em}
.orow{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--line);cursor:pointer;font-size:15.5px;font-weight:500}
.orow:last-child{border-bottom:0}
.octrl{width:24px;height:24px;flex:none;border:2px solid #CBD2D9;position:relative;transition:.12s}
.octrl.radio{border-radius:50%}
.octrl.check{border-radius:7px}
.orow .ol{flex:1;min-width:0}
.orow .op{color:var(--mut);font-weight:700;font-size:14px}
.octrl.on{border-color:var(--accent);background:var(--accent)}
.octrl.radio.on{background:#fff;border-width:7px}
.octrl.check.on::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}

/* collapsible instructions */
.ocollapse{margin:8px -18px 0;border-top:8px solid var(--bg2)}
.occ{width:100%;display:flex;align-items:center;justify-content:space-between;padding:18px;font-size:16px;font-weight:800;color:var(--ink)}
.occ-ar{color:var(--mut);transition:.2s}
.occ-ar.up{transform:rotate(180deg)}
.occ-body{max-height:0;overflow:hidden;transition:.28s;padding:0 18px}
.occ-body.open{max-height:200px;padding-bottom:14px}
.occ-body textarea{width:100%;border:1.5px solid var(--line);border-radius:13px;padding:13px 15px;font-family:inherit;font-size:15px;min-height:64px;resize:vertical;outline:0}
.occ-body textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}

/* upsell */
.upsell{margin:8px -18px 0;padding:18px 0 4px;border-top:8px solid var(--bg2)}
.upsell .uh{font-size:17px;font-weight:800;letter-spacing:-.01em;padding:0 18px;margin-bottom:12px}
.urow{display:flex;gap:12px;overflow-x:auto;padding:0 18px 4px;scrollbar-width:none}
.urow::-webkit-scrollbar{display:none}
.ucard{flex:none;width:118px;cursor:pointer}
.uth{position:relative;height:118px;border-radius:16px;background:var(--brand);display:grid;place-items:center;font-size:44px;overflow:hidden;box-shadow:var(--sh)}
.uth img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.uadd{position:absolute;right:6px;bottom:6px;width:32px;height:32px;border-radius:50%;background:#fff;color:var(--accent);font-size:20px;font-weight:600;display:grid;place-items:center;box-shadow:0 3px 10px rgba(15,25,35,.22)}
.ucard .un{font-size:13px;font-weight:700;margin-top:8px;letter-spacing:-.01em;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ucard .upP{font-size:13px;font-weight:800;margin-top:3px}

/* sticky add bar */
.ibar{position:sticky;bottom:0;display:flex;align-items:center;gap:12px;padding:14px 0 calc(6px + env(safe-area-inset-bottom));margin:8px -18px 0;padding-left:18px;padding-right:18px;background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(15,25,35,.06)}

/* cart line options */
.line .lopt{font-size:12px;color:var(--accent);font-weight:600;margin-top:3px;line-height:1.35}

/* ===== Hormozi value layer ===== */
/* reorder chip */
.reorder{width:calc(100% - 28px);margin:14px 14px 0;display:flex;align-items:center;gap:13px;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:13px 15px;text-align:left;box-shadow:var(--sh)}
.reorder .ro-ic{width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--accent) 10%,transparent);display:grid;place-items:center;font-size:19px;flex:none}
.reorder .ro-tx{flex:1;min-width:0}
.reorder .ro-tx b{display:block;font-size:14.5px;font-weight:800}
.reorder .ro-tx small{display:block;font-size:12.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reorder .ro-go{color:var(--accent);font-weight:800;font-size:13.5px;flex:none}

/* "your favorites" rail (expert order #7) */
.favrail{padding:16px 0 2px}
.fav-h{font-size:16px;font-weight:800;letter-spacing:-.01em;margin:0 16px 11px}
.favrow{display:flex;gap:12px;overflow-x:auto;padding:0 14px 4px;scrollbar-width:none}
.favrow::-webkit-scrollbar{display:none}
.favcard{flex:none;width:104px;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.favcard:active{transform:scale(.97)}
.fav-th{position:relative;height:104px;border-radius:18px;background:linear-gradient(150deg,color-mix(in srgb,var(--brand) 12%,#FBF7F3),color-mix(in srgb,var(--brand) 22%,#F3ECE6));display:grid;place-items:center;font-size:42px;box-shadow:var(--sh);overflow:hidden}
.fav-th:has(img){background:var(--brand)}
.fav-th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fav-add{position:absolute;right:6px;bottom:6px;width:32px;height:32px;border-radius:50%;background:#fff;color:var(--accent);font-size:20px;font-weight:600;line-height:1;display:grid;place-items:center;box-shadow:0 3px 10px rgba(15,25,35,.22)}
.fav-add:active{transform:scale(.86)}
.fav-nm{font-weight:700;font-size:13px;margin-top:8px;line-height:1.2;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fav-p{font-weight:800;font-size:13px;margin-top:2px}
[data-theme="dark"] .fav-th{background:linear-gradient(150deg,color-mix(in srgb,var(--brand) 18%,#191D26),color-mix(in srgb,var(--brand) 30%,#12151C))}
[data-theme="dark"] .fav-th:has(img){background:var(--brand)}

/* trust badges */
.trust{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:14px 14px 2px}
.trust .tb{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:15px 8px 14px;min-height:98px;box-shadow:var(--sh)}
.trust .te{--mic-fg:var(--icon-c,var(--brand-ink,var(--brand)));color:var(--brand-ink,var(--brand));font-size:22px;flex:none;line-height:1;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--brand) 13%,transparent)}
.trust .te svg,.sic{width:21px;height:21px;display:block}
.irow .ic svg{width:19px;height:19px;display:block;color:var(--brand)}
.addrchips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:9px}
.addrchip{background:var(--bg2);border:1px solid var(--line);border-radius:100px;padding:7px 12px;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.addrchip:active{transform:scale(.97)}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}
.confetti i{position:absolute;top:-14px;width:8px;height:13px;border-radius:2px;animation:cfall 1.5s ease-in forwards}
@keyframes cfall{to{transform:translateY(108vh) rotate(540deg);opacity:.15}}
.grev{display:inline-block;margin-top:13px;background:#fff;color:#1a1a1a;border:1px solid rgba(0,0,0,.12);font-weight:800;font-size:13px;padding:10px 17px;border-radius:100px;text-decoration:none;box-shadow:0 2px 10px rgba(0,0,0,.1)}
.trust .tbx b{display:block;font-size:12.5px;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.trust .tbx small{display:block;font-size:10.5px;color:var(--mut);margin-top:2px;line-height:1.2}

/* free-unlock progress */
.unlock{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 9%,transparent),color-mix(in srgb,var(--accent) 3%,transparent));border:1.5px solid color-mix(in srgb,var(--accent) 25%,transparent);border-radius:14px;padding:13px 15px;margin:2px 2px 14px}
.unlock .ul-tx{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.4}
.unlock .ul-tx b{color:var(--accent-d);font-weight:800}
.unlock .ul-bar{height:8px;border-radius:100px;background:color-mix(in srgb,var(--accent) 15%,transparent);margin-top:9px;overflow:hidden}
.unlock .ul-bar>span{display:block;height:100%;background:var(--accent);border-radius:100px;transition:width .4s}
.unlock.done{display:flex;align-items:center;gap:10px;border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);font-size:14px;font-weight:700}
.unlock.done .ul-e{font-size:22px}
.unlock.done b{color:var(--accent-d)}

/* free line + tag */
.line.free .lth{opacity:.9}
.freetag{color:var(--accent);font-weight:900;font-size:13px;letter-spacing:.05em;flex:none}
.freetag.sm{font-size:12px}

/* value stack — "what you're getting" (expert order #6) */
.vstack{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,transparent),color-mix(in srgb,var(--accent) 2%,transparent));border:1.5px solid color-mix(in srgb,var(--accent) 22%,transparent);border-radius:14px;padding:12px 14px;margin:16px 2px 4px}
.vs-h{font-size:13px;font-weight:800;color:var(--accent-d);margin-bottom:8px}
.vs-row{display:flex;justify-content:space-between;font-size:13.5px;color:var(--ink2);margin:5px 0}
.vs-row .vs-v{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.vs-tot{display:flex;justify-content:space-between;align-items:center;margin-top:9px;padding-top:9px;border-top:1px dashed color-mix(in srgb,var(--accent) 30%,transparent);font-size:13.5px;color:var(--ink)}
.vs-tot b{font-weight:800;color:var(--accent-d)}
.vs-free{color:var(--accent);font-weight:900;font-size:12.5px;letter-spacing:.05em}

/* tips */
.tips{margin:16px 2px 4px}
.tips-h{font-size:13px;font-weight:800;color:var(--ink);margin-bottom:9px}
.tips-row{display:flex;gap:8px}
.tipb{position:relative;flex:1;padding:12px 4px;border:1.5px solid var(--line);border-radius:12px;font-weight:800;font-size:13.5px;color:var(--ink2);background:#fff;transition:.12s}
.tipb.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent-d)}
.tipb.common{border-color:var(--accent)}
.tipb-tag{position:absolute;left:50%;top:-9px;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:8.5px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;padding:2px 6px;border-radius:100px;white-space:nowrap}
.tips-nudge{font-size:12px;color:var(--mut);font-weight:600;margin-top:8px;text-align:center}

/* coupon */
.coupon{margin:14px 2px 0}
.coupon-in{display:flex;gap:8px}
.coupon-in input{flex:1;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font-family:inherit;font-size:14.5px;outline:0;background:#fff}
.coupon-in input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
.coupon-in button{padding:0 20px;background:var(--ink);color:#fff;border-radius:12px;font-weight:800;font-size:14px}
.coupon-on{display:flex;align-items:center;gap:10px;background:color-mix(in srgb,var(--accent) 8%,transparent);border:1.5px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:12px;padding:12px 14px;font-size:14px}
.coupon-on span:first-child{flex:1}
.coupon-on .cpn-d{color:var(--accent-d);font-weight:800}
.coupon-on button{width:24px;height:24px;border-radius:50%;background:rgba(15,25,35,.08);color:var(--mut);font-size:11px;flex:none}
.cpn-msg{font-size:12.5px;font-weight:600;margin-top:6px;min-height:0}
.cpn-msg.err{color:var(--red)}
.sumrow.disc span:last-child{color:var(--accent-d);font-weight:800}
.sumrow.disc span:first-child{color:var(--accent-d)}

/* guarantee */
.guarantee{display:flex;flex-direction:column;gap:2px;background:rgba(228,54,43,.06);border-radius:13px;padding:13px 15px;margin-top:14px;font-size:13px}
.guarantee b{color:var(--red);font-weight:800;font-size:13.5px}
.guarantee span{color:var(--ink2)}

/* ===== group order ===== */
.gbanner{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--accent);color:#fff;padding:12px 16px;font-size:13.5px;font-weight:700}
.gbanner b{font-weight:800}
.gbanner .gb-view{background:rgba(255,255,255,.22);border-radius:100px;padding:5px 12px;font-weight:800;font-size:12.5px;flex:none}
.startgroup{width:calc(100% - 28px);margin:14px 14px 0;display:flex;align-items:center;gap:13px;background:#fff;border:1.5px dashed var(--accent);border-radius:16px;padding:13px 15px;text-align:left}
.toprow{display:flex;gap:10px;padding:0 14px;margin-top:14px}
/* any block placed half-width by the home layout editor shares the row evenly.
   .reorder/.startgroup keep their own higher-specificity rule below. */
.toprow>*{flex:1;min-width:0;margin-top:0;margin-bottom:0}
.toprow>.reorder,.toprow>.startgroup{width:auto;margin:0;flex:1;min-width:0}
.toprow .ro-tx,.toprow .sg-tx{min-width:0}
.toprow .ro-tx small,.toprow .sg-tx small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
/* Side by side these cards are ~169px wide, and the icon + padding + "Add ›" label consume 136px
   of that, leaving 33px for the title. "Group order" needs 69px even at 12px, so no font size can
   fit and it wrapped to two lines. Reclaim the space by dropping the word "Add" and keeping only
   the chevron: the whole card is already a button, so the word was redundant. */
/* Half-width card is 169px. A 40px icon + 30px padding + 13px gaps + the "Add ›" label consumed
   ~136px, leaving 33px for a title that needs ~78px. No font size fixes that, and forcing nowrap
   alone just swapped wrapping for overflow. So the furniture shrinks in this layout only:
   icon 40→30, padding 15→11, gaps 13→9, and "Add ›" becomes a bare chevron. That frees roughly
   50px, which is enough for the full label on one line. The wide single-card layout is untouched. */
.toprow .reorder,.toprow .startgroup{padding:11px;gap:9px}
.toprow .reorder .ro-ic,.toprow .startgroup .sg-ic{width:30px;height:30px;border-radius:9px;font-size:15px}
/* Chevron dropped entirely in the two-up layout. Shrinking it to a bare '›' still left the title
   ~22px short. The whole card is a button, so the icon plus label already read as tappable. */
.toprow .ro-go{display:none}
/* beats .reorder/.startgroup .ro-tx b, which has equal specificity but is declared later */
.toprow .reorder .ro-tx b,.toprow .startgroup .sg-tx b{font-size:13px;white-space:nowrap;letter-spacing:-.01em}
.startgroup .sg-ic{width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--accent) 10%,transparent);display:grid;place-items:center;font-size:19px;flex:none}
.startgroup .sg-tx{flex:1;min-width:0}
.startgroup .sg-tx b{display:block;font-size:14.5px;font-weight:800}
.startgroup .sg-tx small{display:block;font-size:12px;color:var(--mut)}
.gmeta{color:var(--mut);font-size:13px;font-weight:600;margin:0 2px 14px}
.gmeta b{color:var(--ink)}
.gshare{width:100%;border:1.5px solid var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent);color:var(--accent-d);border-radius:13px;padding:13px;font-weight:800;font-size:14px;margin-bottom:6px}
.gpart{margin-top:14px}
.gpn{font-size:13px;font-weight:800;color:var(--ink);text-transform:uppercase;letter-spacing:.03em;margin-bottom:2px}
.gpn .you{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent-d);font-size:10px;padding:2px 7px;border-radius:100px;margin-left:6px;letter-spacing:0}
.gline{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.gline .gl-t{flex:1;min-width:0;font-size:14.5px;font-weight:600}
.gline .gl-t small{display:block;font-size:12px;color:var(--accent);font-weight:600;margin-top:2px}
.gline .gl-p{font-weight:800;font-size:14px;flex:none}
.gline .gl-x{width:26px;height:26px;border-radius:50%;background:var(--bg2);color:var(--mut);font-size:12px;flex:none}
.gplaced{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent-d);border-radius:13px;padding:14px;text-align:center;font-weight:700;font-size:14px;margin-top:14px}
.gwait{background:var(--bg2);border-radius:13px;padding:14px;text-align:center;color:var(--ink2);font-size:13.5px;line-height:1.5;margin-top:14px}
.gwait b{color:var(--ink)}
.place.alt{background:#fff;color:var(--accent-d);border:1.5px solid var(--accent);box-shadow:none;margin-top:10px}

/* ===== account + loyalty + tracking ===== */
.acct{width:calc(100% - 28px);margin:14px 14px 0;display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:12px 14px;text-align:left;box-shadow:var(--sh)}
.acct.on{border-color:color-mix(in srgb,var(--accent) 30%,transparent);background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 5%,transparent),#fff)}
.acct .acx{flex:1;min-width:0}
.acct .acx b{display:block;font-size:14.5px;font-weight:800}
.acct .acx small{display:block;font-size:12.5px;color:var(--mut)}
.acct-head{display:flex;align-items:center;gap:13px;margin:4px 2px 16px}
.av.big{width:54px;height:54px;font-size:22px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;flex:none;text-transform:uppercase}
.loystat{display:flex;gap:10px}
.loy-n{flex:1;background:var(--bg2);border-radius:14px;padding:13px;text-align:center}
.loy-n b{display:block;font-size:20px;font-weight:800}
.loy-n span{font-size:11px;color:var(--mut);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.loybar{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 9%,transparent),color-mix(in srgb,var(--accent) 3%,transparent));border:1.5px solid color-mix(in srgb,var(--accent) 25%,transparent);border-radius:14px;padding:13px 15px;margin-top:12px}
.loybar .loy-tx{font-size:13.5px;font-weight:600;line-height:1.4}
.loybar .loy-tx b{color:var(--accent-d);font-weight:800}
.loybar .ul-bar{height:8px;border-radius:100px;background:color-mix(in srgb,var(--accent) 15%,transparent);margin-top:9px;overflow:hidden}
.loybar .ul-bar>span{display:block;height:100%;background:var(--accent);border-radius:100px;transition:width .4s}
.trko{border:1px solid var(--line);border-radius:14px;padding:13px;margin-bottom:10px}
.trko-top{display:flex;align-items:center;gap:8px;font-size:13.5px}
.trko-top b{font-family:var(--mono);font-weight:800}
.trko-ago{color:var(--mut);flex:1;font-size:12px}
.trko-tot{font-weight:800}
.trk{display:flex;justify-content:space-between;margin:12px 0 2px;position:relative}
.trk::before{content:"";position:absolute;left:18px;right:18px;top:14px;height:2px;background:var(--line)}
.trk-s{display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;z-index:1;flex:1}
/* 30px -> 40px: Ali reported the tracking steps read as too small on a real phone. The connecting
   line and spacing are unchanged, only the circles grow. */
.trk-i{--mic-fg:var(--mut);width:40px;height:40px;border-radius:50%;background:var(--bg2);color:var(--mut);display:grid;place-items:center;font-size:18px}
.trk-l{font-size:10px;color:var(--mut);font-weight:700;text-align:center}
.trk-s.done .trk-i{--mic-fg:var(--accent);background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent-d)}
.trk-s.done .trk-l{color:var(--ink)}
.trk-s.cur .trk-i{--mic-fg:#fff;background:var(--accent);color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 15%,transparent);animation:pulseTrk 1.6s infinite}
.trk-s.cur .trk-l{color:var(--accent-d);font-weight:800}
@keyframes pulseTrk{0%,100%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 15%,transparent)}50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 6%,transparent)}}
.trk-cancel{color:var(--red);font-weight:800;font-size:13px;margin:8px 0 2px}
/* Design B tracker: the segmented pill that replaces the old .trk stepper Ali disliked. Four
   segments fill as the order advances; the current one shimmers. Theme-aware via --accent. */
.tk-segs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:14px 0 7px}
.tk-seg{height:10px;border-radius:5px;background:color-mix(in srgb,var(--ink) 12%,var(--bg2));overflow:hidden}
.tk-seg i{display:block;height:100%;width:100%;border-radius:5px;transform:scaleX(0);transform-origin:left;background:var(--accent);transition:transform .5s ease}
.tk-seg.tkdone i{transform:scaleX(1)}
.tk-seg.tkcur i{transform:scaleX(1);background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#fff),var(--accent));background-size:200% 100%;animation:tkShim 1.3s linear infinite;box-shadow:0 1px 6px color-mix(in srgb,var(--accent) 45%,transparent)}
@keyframes tkShim{to{background-position:-200% 0}}
.tk-steplabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center;margin-bottom:6px}
.tk-steplabs span{font-size:10px;font-weight:700;color:var(--mut)}
.tk-steplabs span.tkdone{color:var(--ink)}
.tk-steplabs span.tkcur{color:var(--accent-d);font-weight:800}
@media(prefers-reduced-motion:reduce){.tk-seg.tkcur i{animation:none}}
.trko-items{font-size:12.5px;color:var(--mut);margin-top:8px;line-height:1.4}

/* referral */
.refcard{margin-top:14px;background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;border-radius:18px;padding:18px;box-shadow:var(--sh)}
.refcard .ref-h{font-size:16px;font-weight:800;letter-spacing:-.01em}
.refcard p{margin:6px 0 12px;font-size:13px;opacity:.92;line-height:1.5}
.refcard p b{opacity:1}
.refcard .refcode{background:rgba(255,255,255,.16);border:1.5px dashed rgba(255,255,255,.5);border-radius:12px;padding:12px;text-align:center;font-family:var(--mono);font-weight:800;font-size:22px;letter-spacing:.15em}
.refcard .ref-credit{margin-top:10px;background:rgba(255,255,255,.16);border-radius:10px;padding:9px 12px;font-size:12.5px;font-weight:700}
.refcard .place.alt{background:#fff;color:var(--brand);border:0}

/* ============================================================
   THEME ENGINE  ·  data-theme drives the whole look.
   Light is the base :root above. Themes below re-skin it.
   ============================================================ */

/* ---------- DARK PREMIUM ---------- */
[data-theme="dark"]{
  --ink:#F2F4F8; --ink2:#C3CCD9; --mut:#7C8899; --bg:#0C0E13; --bg2:#171A22; --line:#2A2F3A;
  /* inverted on purpose: .poptag/.p-save are NOT re-coloured by any dark rule, so they inherit
     these. On #0C0E13 the light values are the legible ones. */
  --amber-ink:#FBBF24; --red-ink:#FF7A70;
  --accent:#FF4A3D; --accent-d:#E4362B;
  --sh:0 1px 3px rgba(0,0,0,.5),0 12px 34px rgba(0,0,0,.55); --sh-lg:0 26px 70px rgba(0,0,0,.8);
}
[data-theme="dark"] body{background:#0C0E13}
[data-theme="dark"] .infocard{background:#14171F;box-shadow:0 22px 60px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.04)}
[data-theme="dark"] .topbar{background:rgba(12,14,19,.9);border-bottom-color:#2A2F3A}
[data-theme="dark"] .catbar{background:#0C0E13;border-bottom-color:#2A2F3A}
[data-theme="dark"] .add,[data-theme="dark"] .stepper,[data-theme="dark"] .step.big{background:#21252F;box-shadow:0 3px 12px rgba(0,0,0,.5)}
[data-theme="dark"] .sheet{background:#14171F}
[data-theme="dark"] .fld input,[data-theme="dark"] .fld textarea,[data-theme="dark"] .coupon-in input,[data-theme="dark"] .occ-body textarea{background:#21252F;border-color:#2A2F3A;color:var(--ink)}
[data-theme="dark"] .rv-write,[data-theme="dark"] .tipb,[data-theme="dark"] .acct,[data-theme="dark"] .reorder,[data-theme="dark"] .startgroup,[data-theme="dark"] .emopick button{background:#171A22;border-color:#2A2F3A}
[data-theme="dark"] .acct.on{background:linear-gradient(120deg,rgba(255,74,61,.1),#171A22)}
[data-theme="dark"] .coupon-in button{background:#FF4A3D}
[data-theme="dark"] .ihdr,[data-theme="dark"] .ibar{background:#14171F}
[data-theme="dark"] .octrl{border-color:#3A414E}
[data-theme="dark"] .trko{border-color:#2A2F3A}
/* dark theme: keep emoji tiles dark-tinted, not the light warm base */
[data-theme="dark"] .thumb,[data-theme="dark"] .popcard .pthumb,[data-theme="dark"] .ihero{background:linear-gradient(150deg,color-mix(in srgb,var(--brand) 18%,#191D26),color-mix(in srgb,var(--brand) 30%,#12151C))}
[data-theme="dark"] .thumb:has(img),[data-theme="dark"] .popcard .pthumb:has(img),[data-theme="dark"] .ihero.img{background:var(--brand)}
[data-theme="dark"] .rav.emo{background:#21252F}
[data-theme="dark"] .cartbar button,[data-theme="dark"] .place,[data-theme="dark"] .iadd{box-shadow:0 12px 34px rgba(255,74,61,.42)}
[data-theme="dark"] .cover::after{background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 60%)}
[data-theme="dark"] .catbar button.on,[data-theme="dark"] .add,[data-theme="dark"] .stepper button,[data-theme="dark"] .step button,[data-theme="dark"] .rate,[data-theme="dark"] .irow .star,[data-theme="dark"] .irow .rate,[data-theme="dark"] .st-open,[data-theme="dark"] .ro-go{color:var(--accent)}
[data-theme="dark"] .catbar button.on::after{background:var(--accent)}

/* ---------- BOLD & PUNCHY ---------- (light base, streetwear energy) */
[data-theme="punchy"]{--accent:#111;--accent-d:#000;--line:#111;--bg2:#F4F1EA;--ink:#111;--sh:0 4px 0 #111;--sh-lg:0 8px 0 #111}
[data-theme="punchy"] .iname h1,[data-theme="punchy"] .cat-h,[data-theme="punchy"] .pop-h,[data-theme="punchy"] .rv-h,[data-theme="punchy"] .sheet h2,[data-theme="punchy"] .done h2{font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.01em;font-weight:400}
[data-theme="punchy"] .cat-h{font-size:34px;border-bottom:3px solid #111}
[data-theme="punchy"] .infocard,[data-theme="punchy"] .item,[data-theme="punchy"] .popcard .pthumb,[data-theme="punchy"] .thumb,[data-theme="punchy"] .promo,[data-theme="punchy"] .acct,[data-theme="punchy"] .reorder,[data-theme="punchy"] .startgroup,[data-theme="punchy"] .rv-write,[data-theme="punchy"] .trust .tb{border:2.5px solid #111;border-radius:6px;box-shadow:4px 4px 0 #111}
[data-theme="punchy"] .item{padding:16px 15px;margin:0 2px 15px}
[data-theme="punchy"] .menu{padding-bottom:2px}
[data-theme="punchy"] .infocard{border-radius:8px}
[data-theme="punchy"] .cartbar button,[data-theme="punchy"] .place,[data-theme="punchy"] .iadd,[data-theme="punchy"] .add{background:var(--brand);color:#fff;border:2.5px solid #111;box-shadow:4px 4px 0 #111;border-radius:6px}
[data-theme="punchy"] .catbar button.on{color:#fff;background:var(--brand);border-radius:100px;padding:8px 14px}
[data-theme="punchy"] .catbar button.on::after{display:none}
[data-theme="punchy"] .p-save,[data-theme="punchy"] .poptag{background:var(--brand);color:#fff;padding:3px 8px;border-radius:4px;transform:rotate(-3deg);display:inline-block}

/* ---------- MODERN EDITORIAL ---------- (serif, magazine) */
[data-theme="editorial"]{--accent:#1A1A1A;--accent-d:#000;--bg:#FBFAF7;--bg2:#F1EEE7;--ink:#1A1A1A;--ink2:#4A463E;--line:#E4DFD4;--brand:#8A2B20;--brand-d:#6E2118}
[data-theme="editorial"] body{background:#FBFAF7}
[data-theme="editorial"] .iname h1,[data-theme="editorial"] .cat-h,[data-theme="editorial"] .pop-h,[data-theme="editorial"] .rv-h,[data-theme="editorial"] .sheet h2,[data-theme="editorial"] .item .nm,[data-theme="editorial"] .idetail h2{font-family:'Fraunces',Georgia,serif;font-weight:900;letter-spacing:-.01em}
[data-theme="editorial"] .cat-h{font-size:30px;border-bottom:1px solid #1A1A1A;padding-bottom:12px}
[data-theme="editorial"] .infocard{background:#FBFAF7;box-shadow:none;border:1px solid #E4DFD4;border-radius:6px}
[data-theme="editorial"] .thumb,[data-theme="editorial"] .popcard .pthumb,[data-theme="editorial"] .ihero{border-radius:4px}
[data-theme="editorial"] .cartbar button,[data-theme="editorial"] .place,[data-theme="editorial"] .iadd{background:#1A1A1A;border-radius:2px;box-shadow:none;text-transform:uppercase;letter-spacing:.08em;font-size:13px}
[data-theme="editorial"] .catbar button.on{color:#1A1A1A}[data-theme="editorial"] .catbar button.on::after{background:#8A2B20;height:2px}
[data-theme="editorial"] .add,[data-theme="editorial"] .stepper{border:1px solid #1A1A1A;box-shadow:none}

/* ---------- PLAYFUL ENERGETIC ---------- (rounded, warm gradients) */
[data-theme="playful"]{--accent:#FF6B35;--accent-d:#E8551F;--bg:#FFF8F0;--bg2:#FFF0E2;--ink:#2B2233;--ink2:#5B5165;--line:#F2E4D6;--brand:#FF6B35;--brand-d:#E8551F}
[data-theme="playful"] body{background:#FFF8F0;font-family:'Baloo 2','Plus Jakarta Sans',sans-serif}
[data-theme="playful"] .iname h1,[data-theme="playful"] .cat-h,[data-theme="playful"] .pop-h,[data-theme="playful"] .rv-h,[data-theme="playful"] .sheet h2{font-family:'Baloo 2',sans-serif;font-weight:800}
[data-theme="playful"] .infocard{border-radius:30px;box-shadow:0 18px 44px rgba(255,107,53,.16)}
[data-theme="playful"] .thumb,[data-theme="playful"] .popcard .pthumb{border-radius:26px}
[data-theme="playful"] .cover{background:linear-gradient(135deg,#FF6B35,#FF9E2C)!important}
[data-theme="playful"] .cartbar button,[data-theme="playful"] .place,[data-theme="playful"] .iadd,[data-theme="playful"] .add,[data-theme="playful"] .rv-write{border-radius:100px}
[data-theme="playful"] .item{border-bottom:2px dotted #F2E4D6}
[data-theme="playful"] .promo.g1{background:linear-gradient(135deg,#FF6B35,#FF9E2C)}
[data-theme="playful"] .catbar button.on::after{height:4px;border-radius:4px}

/* ==== per-item emoji reactions (Wave 1) ==== */
.ireacts{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.ireacts .ir{display:inline-flex;align-items:center;gap:4px;font-size:13px;line-height:1;background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:6px 11px;color:var(--ink2);font-weight:600;cursor:pointer;transition:.15s}
.ireacts .ir:hover{border-color:var(--accent)}
.ireacts .ir b{font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
.idetail-react{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 8px}
.idetail-react .ir-lab{font-size:12.5px;color:var(--mut);font-weight:600}
.rv-sub{font-size:13px;color:var(--mut);margin:2px 0 12px}
.lovedlist{display:flex;flex-direction:column;gap:8px}
.lovedrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:10px 12px;box-shadow:var(--sh);cursor:pointer}
.lovedrow .lv-th{width:44px;height:44px;flex:none;border-radius:10px;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:22px;overflow:hidden}
.lovedrow .lv-th img{width:100%;height:100%;object-fit:cover}
.lovedrow .lv-i{flex:1;min-width:0}
.lovedrow .lv-i b{display:block;font-weight:800;font-size:14.5px;color:var(--ink);margin-bottom:4px}
.lovedrow .arr{color:var(--mut);font-size:18px}
.reactflow{display:flex;flex-direction:column;gap:14px;margin-bottom:14px}
.rf-item{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:12px}
.rf-nm{font-weight:800;font-size:14.5px;color:var(--ink);margin-bottom:10px}
.rf-emos{display:flex;gap:8px;flex-wrap:wrap}
.rf-e{font-size:26px;line-height:1;width:48px;height:48px;border-radius:12px;background:var(--bg);border:1.5px solid var(--line);cursor:pointer;transition:transform .1s,border-color .1s}
.rf-e:active{transform:scale(.9)}
.rf-e.on{border-color:var(--brand);transform:scale(1.08)}
.rf-neg{margin-top:10px}
.rf-neg textarea{width:100%;min-height:64px;border:1.5px solid var(--line);border-radius:10px;padding:9px 11px;font:inherit;font-size:14px;resize:vertical;background:var(--bg);color:var(--ink)}
.rf-send{margin-top:8px;background:var(--ink);color:var(--bg);border:0;border-radius:10px;padding:9px 16px;font-weight:700;font-size:13.5px;cursor:pointer}
.rf-thx{margin-top:8px;font-size:13.5px;font-weight:700;color:var(--accent)}
/* negative picks stay calm: a quiet grey selection, never the brand red buzzer. disappointed, not angry. */
.rf-e[data-s="neg"].on{border-color:var(--mut);background:var(--bg2);transform:scale(1.04)}
.rf-thx.quiet{color:var(--ink2);font-weight:700}
.rf-hint{margin:4px 0 8px;font-size:12.5px;line-height:1.45;color:var(--mut)}

/* ==== loyalty level tag (shared utility) ==== */
.loylvl{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--accent);color:#fff;border-radius:100px;padding:4px 11px;margin:0 0 12px}

/* ============================================================
   STREET  ·  red/black streetwear poster (flagship theme)
   Paper receipt cards on a near-black wall. Anton + Space Grotesk.
   Hard offset shadows, 2-3px solid borders, radius <= 10px.
   ============================================================ */
[data-theme="street"]{
  --ink:#0B0908; --ink2:#3A332E; --mut:#6E655C;
  --bg:#0B0908; --bg2:#E9E4D8; --line:#0B0908;
  --accent:#E4002B; --accent-d:#8C0F1F;
  --brand:#E4002B; --brand-d:#8C0F1F;
  --red:#E4002B; --amber:#FFB020;
  --paper:#F4F1EA; --green:#2BD576;
  --sh:4px 4px 0 #000; --sh-lg:6px 6px 0 #000;
}
[data-theme="street"] body{background:#0B0908 repeating-linear-gradient(-45deg,rgba(244,241,234,.025) 0 2px,transparent 2px 28px);font-family:'Space Grotesk',var(--sans);color:var(--ink)}

/* display type */
[data-theme="street"] .iname h1,[data-theme="street"] .cat-h,[data-theme="street"] .pop-h,[data-theme="street"] .rv-h,[data-theme="street"] .sheet h2,[data-theme="street"] .done h2,[data-theme="street"] .idetail h2{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.015em}
[data-theme="street"] .p-main{font-family:'Anton',sans-serif;font-weight:400;font-size:19px;letter-spacing:.02em}
[data-theme="street"] .iprice .p-main{font-size:26px}
[data-theme="street"] .sumrow.tot .tv{font-family:'Anton',sans-serif;font-weight:400;font-size:27px;letter-spacing:.02em}
[data-theme="street"] .sumrow.tot span:first-child{text-transform:uppercase;letter-spacing:.05em;font-size:14px}

/* boot */
[data-theme="street"] .boot p{color:var(--paper)}
[data-theme="street"] .spin{border-color:#2A2320;border-top-color:var(--red)}
[data-theme="street"] .boot .retry{background:var(--red);border:3px solid #000;border-radius:6px;box-shadow:0 4px 0 #000;text-transform:uppercase;letter-spacing:.05em}

/* topbar */
[data-theme="street"] .topbar{background:#0B0908;border-bottom:3px solid var(--red);backdrop-filter:none;-webkit-backdrop-filter:none}
[data-theme="street"] .topbar h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.03em;color:var(--paper)}
[data-theme="street"] .topbar .tl{border-radius:5px;background:var(--red);box-shadow:none;border:2px solid var(--paper)}
[data-theme="street"] .topbar .tl b{color:#fff}

/* cover: checkerboard strip + heavier fade */
[data-theme="street"] .cover{border-bottom:3px solid #000}
[data-theme="street"] .cover::after{background:linear-gradient(180deg,rgba(11,9,8,.5),rgba(11,9,8,0) 55%,rgba(11,9,8,.35))}
[data-theme="street"] .cover::before{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;z-index:2;background:repeating-linear-gradient(90deg,#F4F1EA 0 14px,#0B0908 14px 28px)}

/* info card = paper receipt */
[data-theme="street"] .infocard{background:var(--paper);border:3px solid #000;border-radius:8px;box-shadow:6px 6px 0 #000}
[data-theme="street"] .ilogo{border-radius:6px;background:var(--red);border:3px solid #000}
[data-theme="street"] .iname h1{font-size:29px}
[data-theme="street"] .iname .tag{font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:11.5px}
[data-theme="street"] .irow{border-top:1px dashed rgba(11,9,8,.45)}
[data-theme="street"] .irow .ic{border-radius:5px;background:var(--bg2);border:2px solid #000}
[data-theme="street"] .irow .st-open{color:#12813F}
[data-theme="street"] .irow .st-closed{color:var(--red)}
[data-theme="street"] .irow .rate{color:var(--red)}
[data-theme="street"] .hrow.today{color:var(--ink)}

/* account / reorder / group chips = paper tickets */
[data-theme="street"] .acct,[data-theme="street"] .reorder{background:var(--paper);border:3px solid #000;border-radius:6px;box-shadow:4px 4px 0 #000}
[data-theme="street"] .acct.on{background:var(--paper);border-color:#000}
[data-theme="street"] .av.big{border-radius:6px;border:3px solid #000;background:var(--red)}
[data-theme="street"] .reorder .ro-ic{border-radius:5px;background:var(--bg2);border:2px solid #000}
[data-theme="street"] .ro-go{color:var(--red);text-transform:uppercase;letter-spacing:.04em;font-size:12px}
[data-theme="street"] .startgroup{background:var(--paper);border:3px dashed #000;border-radius:6px}
[data-theme="street"] .startgroup .sg-ic{border-radius:5px;background:var(--bg2);border:2px solid #000}

/* trust = stamped badges */
[data-theme="street"] .trust .tb{background:var(--paper);border:2px solid #000;border-radius:5px;box-shadow:3px 3px 0 #000}
[data-theme="street"] .trust .tbx b{text-transform:uppercase;letter-spacing:.02em}
/* solid accent chip: ink must follow the accent's lightness, not a hardcoded white (Blaze's gold
   rendered white-on-gold at 1.77:1). --on-accent is computed from the tenant's own accent in app.js. */
[data-theme="street"] .trust .te{--mic-fg:var(--icon-c,var(--on-accent));background:var(--accent);color:var(--on-accent);border:2px solid #000;border-radius:5px}

/* promos = poster tiles */
[data-theme="street"] .promo{border:3px solid #000;border-radius:6px;box-shadow:5px 5px 0 #000}
[data-theme="street"] .promo.g1{background:var(--red)}
[data-theme="street"] .promo.g2{background:var(--paper);color:var(--ink)}
[data-theme="street"] .promo h4{text-transform:uppercase;letter-spacing:.03em}
[data-theme="street"] .promo::after{inset:auto 0 0 0;width:auto;height:12px;border-radius:0;background:repeating-linear-gradient(-45deg,#000 0 10px,transparent 10px 20px);opacity:.22}

/* search = hard-edged paper input */
[data-theme="street"] .search{background:var(--paper);border:3px solid #000;border-radius:6px;box-shadow:4px 4px 0 #000}
[data-theme="street"] .search svg{stroke:#0B0908}
[data-theme="street"] .search input{color:var(--ink);font-weight:600}
[data-theme="street"] .search input::placeholder{color:var(--mut);text-transform:uppercase;letter-spacing:.05em;font-size:13px}

/* category bar on the black wall */
[data-theme="street"] .catbar{background:#0B0908;border-bottom:3px solid var(--red)}
[data-theme="street"] .catbar button{color:var(--paper);text-transform:uppercase;letter-spacing:.06em;font-size:13px;font-weight:700;padding:15px 12px}
[data-theme="street"] .catbar button.on{color:#fff}
[data-theme="street"] .catbar button.on::after{left:8px;right:8px;bottom:8px;top:8px;height:auto;border-radius:4px;background:var(--red);border:2px solid #000;z-index:-1}
[data-theme="street"] .catbar button{position:relative;z-index:0}

/* closed banner = hazard bar */
[data-theme="street"] .closedbar{top:56px;background:repeating-linear-gradient(45deg,var(--amber) 0 12px,#0B0908 12px 24px) top/100% 8px no-repeat,repeating-linear-gradient(45deg,var(--amber) 0 12px,#0B0908 12px 24px) bottom/100% 8px no-repeat,#0B0908;color:var(--amber);text-transform:uppercase;letter-spacing:.08em;padding:17px 14px}

/* menu = big paper panel with receipt rows */
[data-theme="street"] .menu{background:var(--paper);border:3px solid #000;border-radius:8px;margin:18px 14px 0;padding:0 16px 16px;box-shadow:6px 6px 0 #000}
[data-theme="street"] .cat-h{font-size:34px;border-bottom:3px solid #000;padding-bottom:8px}
[data-theme="street"] .item{border-bottom:1px dashed rgba(11,9,8,.45)}
[data-theme="street"] .item .nm{font-weight:700;text-transform:uppercase;letter-spacing:.01em}
[data-theme="street"] .thumb{border-radius:6px;border:2px solid #000;box-shadow:3px 3px 0 #000}
[data-theme="street"] .thumb img{border-radius:4px}
[data-theme="street"] .add{border-radius:5px;background:var(--red);color:#fff;border:2px solid #000;box-shadow:2px 2px 0 #000}
[data-theme="street"] .add:disabled{background:var(--bg2);color:var(--mut)}
[data-theme="street"] .stepper{border-radius:5px;background:var(--paper);border:2px solid #000;box-shadow:2px 2px 0 #000}
[data-theme="street"] .stepper button{color:var(--red)}
[data-theme="street"] .poptag{background:var(--amber);color:#0B0908;padding:3px 8px;border-radius:3px;border:2px solid #000;text-transform:uppercase;font-size:11px;letter-spacing:.04em}
[data-theme="street"] .souldout{background:var(--red);color:#fff;padding:3px 8px;border-radius:3px;border:2px solid #000;letter-spacing:.05em}
[data-theme="street"] .p-save{background:var(--red);color:#fff;padding:3px 8px;border-radius:3px;display:inline-block;border:2px solid #000}
[data-theme="street"] .ireacts .ir{background:var(--paper);border:1.5px solid #000;border-radius:3px;color:var(--ink)}
[data-theme="street"] .noresult{color:var(--mut);font-weight:600}

/* popular cards on the wall */
[data-theme="street"] .pop-h{color:var(--paper)}
[data-theme="street"] .popcard{background:var(--paper);border:3px solid #000;border-radius:8px;padding:10px 10px 12px;box-shadow:4px 4px 0 #000}
[data-theme="street"] .popcard .pthumb{border-radius:5px;border:2px solid #000;box-shadow:none}
[data-theme="street"] .popcard .nm{text-transform:uppercase}
[data-theme="street"] .popcard .addwrap{right:16px;top:112px}

/* favourites rail on the wall. It sits directly on the black background, not on a paper panel, so
   the base dark --ink rendered the heading, dish name and price black-on-black (1:1 contrast) and
   the card looked like an empty tile nobody could press. Same treatment as .popcard. */
[data-theme="street"] .fav-h{color:var(--paper);font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.015em}
[data-theme="street"] .favcard{background:var(--paper);border:3px solid #000;border-radius:6px;padding:8px 8px 10px;box-shadow:4px 4px 0 #000;width:120px}
[data-theme="street"] .fav-th{border-radius:5px;border:2px solid #000;box-shadow:none}
[data-theme="street"] .fav-nm{text-transform:uppercase;color:var(--ink)}
[data-theme="street"] .fav-p{color:var(--ink);font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.02em;font-size:15px}
[data-theme="street"] .fav-add{border-radius:5px;border:2px solid #000;background:var(--red);color:#fff;box-shadow:none;right:5px;bottom:5px}

/* footer stamp */
[data-theme="street"] .powered{color:#5C554E;letter-spacing:.26em}
[data-theme="street"] .powered b{color:var(--red)}

/* cart bar = red slab */
[data-theme="street"] .cartbar button{background:var(--red);border:3px solid #000;border-radius:8px;box-shadow:0 5px 0 #000;text-transform:uppercase;letter-spacing:.05em;transition:transform .08s,box-shadow .08s}
[data-theme="street"] .cartbar button:active{transform:translateY(3px);box-shadow:0 2px 0 #000}
[data-theme="street"] .cartbar .q{background:#0B0908;border-radius:4px}

/* sheet = paper receipt */
[data-theme="street"] .scrim{background:rgba(0,0,0,.68);backdrop-filter:none}
[data-theme="street"] .sheet{background:var(--paper);border-radius:10px 10px 0 0;border-top:3px solid #000}
[data-theme="street"] .grab{background:#0B0908}
[data-theme="street"] .line{border-bottom:1px dashed rgba(11,9,8,.45)}
[data-theme="street"] .line .lth{border-radius:5px;border:2px solid #000}
[data-theme="street"] .line .lopt{color:var(--accent-d)}
[data-theme="street"] .step{border-radius:5px;background:#fff;border:2px solid #000}
[data-theme="street"] .step button{color:var(--red)}
[data-theme="street"] .fld input,[data-theme="street"] .fld textarea{background:#fff;border:2px solid #000;border-radius:5px}
[data-theme="street"] .fld input:focus,[data-theme="street"] .fld textarea:focus{border-color:var(--red);box-shadow:3px 3px 0 #000}
[data-theme="street"] .fld label{color:var(--ink);letter-spacing:.08em}
[data-theme="street"] .pinbtn{border:2px dashed #000;background:transparent;color:var(--ink);border-radius:5px;text-transform:uppercase;letter-spacing:.03em;font-size:13px}
[data-theme="street"] .pinbtn.done{border-style:solid;background:var(--green);color:#0B0908}
[data-theme="street"] .sumrow{color:var(--ink2)}
[data-theme="street"] .sumrow.tot{border-top:2px dashed rgba(11,9,8,.5)}
[data-theme="street"] .sumrow.disc span:first-child,[data-theme="street"] .sumrow.disc span:last-child{color:var(--accent-d)}
[data-theme="street"] .place{background:var(--red);border:3px solid #000;border-radius:8px;box-shadow:0 5px 0 #000;text-transform:uppercase;letter-spacing:.05em;transition:transform .08s,box-shadow .08s}
[data-theme="street"] .place:active{transform:translateY(3px);box-shadow:0 2px 0 #000}
/* ink, not paper: the disabled label explains WHY it is disabled, so it has to be readable
   (paper-on-#B7AFA2 measured 1.93:1). Ink on the same grey measures ~9.9:1. */
[data-theme="street"] .place:disabled{background:#B7AFA2;color:#100D0B;box-shadow:none}
[data-theme="street"] .place.alt{background:var(--paper);color:#0B0908;border:3px solid #000;box-shadow:0 4px 0 #000}
[data-theme="street"] .cod{font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:10.5px}

/* tips + coupon + unlock + guarantee */
[data-theme="street"] .tipb{background:#fff;border:2px solid #000;border-radius:5px;color:var(--ink)}
[data-theme="street"] .tipb.on{background:#0B0908;border-color:#000;color:var(--paper)}
[data-theme="street"] .coupon-in input{background:#fff;border:2px solid #000;border-radius:5px}
[data-theme="street"] .coupon-in input:focus{border-color:var(--red);box-shadow:3px 3px 0 #000}
[data-theme="street"] .coupon-in button{background:#0B0908;border:2px solid #000;border-radius:5px;color:var(--paper);text-transform:uppercase;letter-spacing:.05em}
[data-theme="street"] .coupon-on{background:#fff;border:2px solid #000;border-radius:5px}
[data-theme="street"] .coupon-on .cpn-d{color:var(--accent-d)}
[data-theme="street"] .unlock{background:#fff;border:2px solid #000;border-radius:5px}
[data-theme="street"] .unlock .ul-tx b{color:var(--accent-d)}
[data-theme="street"] .unlock .ul-bar{background:rgba(11,9,8,.12);border-radius:3px}
[data-theme="street"] .unlock .ul-bar>span{background:var(--red);border-radius:3px}
[data-theme="street"] .unlock.done{background:var(--green);border:2px solid #000;color:#0B0908}
[data-theme="street"] .unlock.done b{color:#0B0908}
[data-theme="street"] .guarantee{background:#fff;border:2px solid var(--red);border-radius:5px}
[data-theme="street"] .guarantee b{color:var(--red)}
[data-theme="street"] .freetag{color:var(--accent-d)}

/* success */
[data-theme="street"] .done .ic{border-radius:8px;background:var(--green);border:3px solid #000;color:#0B0908;box-shadow:5px 5px 0 #000}
[data-theme="street"] .done .code{background:#0B0908;color:var(--paper);border-radius:4px;letter-spacing:.14em}
[data-theme="street"] .done .wabtn{border:3px solid #000;border-radius:8px;box-shadow:0 4px 0 #000;text-transform:uppercase;letter-spacing:.03em}

/* reviews / most loved = receipt panel */
[data-theme="street"] .reviews{background:var(--paper);border:3px solid #000;border-radius:8px;margin:18px 14px 0;box-shadow:6px 6px 0 #000;border-top:3px solid #000}
[data-theme="street"] .reviews:empty{display:none}
[data-theme="street"] .rv-h{font-size:28px}
[data-theme="street"] .lovedrow{background:transparent;border:0;border-radius:0;border-bottom:1px dashed rgba(11,9,8,.45);box-shadow:none;padding:12px 2px}
[data-theme="street"] .lovedrow .lv-th{border-radius:5px;border:2px solid #000;background:var(--red)}
[data-theme="street"] .lovedrow .lv-i b{text-transform:uppercase}
[data-theme="street"] .rvw{border-bottom:1px dashed rgba(11,9,8,.45)}
[data-theme="street"] .rvw .rav{border-radius:5px;border:2px solid #000}
[data-theme="street"] .rav.emo{background:var(--bg2)}
[data-theme="street"] .rv-write{background:#fff;border:2px solid #000;border-radius:5px;box-shadow:3px 3px 0 #000}
[data-theme="street"] .distrow .dbar{background:rgba(11,9,8,.12);border-radius:3px}
[data-theme="street"] .rvmsg{border-radius:5px;border:2px solid #000}
[data-theme="street"] .emopick button{background:#fff;border:2px solid #000;border-radius:5px}
[data-theme="street"] .emopick button.on{border-color:var(--red);background:rgba(228,0,43,.07)}
[data-theme="street"] .emopick button.on .eml{color:var(--accent-d)}

/* reaction flow */
[data-theme="street"] .rf-item{background:var(--bg2);border:2px solid #000;border-radius:6px}
[data-theme="street"] .rf-e{background:#fff;border:2px solid #000;border-radius:5px}
[data-theme="street"] .rf-e.on{border-color:var(--red);background:rgba(228,0,43,.08)}
[data-theme="street"] .rf-e[data-s="neg"].on{border-color:#000;background:rgba(11,9,8,.07)}
[data-theme="street"] .rf-neg textarea{background:#fff;border:2px solid #000;border-radius:5px;color:var(--ink)}
[data-theme="street"] .rf-send{background:#0B0908;color:var(--paper);border-radius:5px;text-transform:uppercase;letter-spacing:.04em}
[data-theme="street"] .rf-thx{color:var(--accent-d)}
[data-theme="street"] .rf-thx.quiet{color:var(--ink2)}

/* item detail */
[data-theme="street"] .ihdr{background:var(--paper)}
[data-theme="street"] .ihx,[data-theme="street"] .iha{border-radius:5px;background:#fff;border:2px solid #000}
[data-theme="street"] .ihero{border-radius:8px;border:3px solid #000;box-shadow:6px 6px 0 #000}
[data-theme="street"] .ihero-tag{background:var(--red);border:2px solid #000;border-radius:3px;backdrop-filter:none;text-transform:uppercase;letter-spacing:.04em}
[data-theme="street"] .ogrp{border-top:3px solid #000}
[data-theme="street"] .ogh{text-transform:uppercase;letter-spacing:.02em}
[data-theme="street"] .ogh .req{background:var(--red);color:#fff;border-radius:3px;border:1.5px solid #000}
[data-theme="street"] .orow{border-bottom:1px dashed rgba(11,9,8,.35)}
[data-theme="street"] .octrl{border-color:#0B0908}
[data-theme="street"] .octrl.check{border-radius:4px}
[data-theme="street"] .octrl.on{border-color:var(--red);background:var(--red)}
[data-theme="street"] .octrl.radio.on{background:#fff;border-color:var(--red)}
[data-theme="street"] .ocollapse{border-top:3px solid #000}
[data-theme="street"] .occ{text-transform:uppercase;letter-spacing:.02em;font-size:14px}
[data-theme="street"] .occ-body textarea{background:#fff;border:2px solid #000;border-radius:5px}
[data-theme="street"] .occ-body textarea:focus{border-color:var(--red);box-shadow:3px 3px 0 #000}
[data-theme="street"] .upsell{border-top:3px solid #000}
[data-theme="street"] .upsell .uh{text-transform:uppercase;letter-spacing:.02em}
[data-theme="street"] .uth{border-radius:5px;border:2px solid #000;box-shadow:3px 3px 0 #000}
[data-theme="street"] .uadd{border-radius:4px;background:var(--red);color:#fff;border:2px solid #000;box-shadow:none}
[data-theme="street"] .ibar{background:var(--paper);border-top:3px solid #000;box-shadow:none}
[data-theme="street"] .step.big{background:#fff;border:2px solid #000;border-radius:5px}
[data-theme="street"] .step.big button{color:var(--red)}
[data-theme="street"] .iadd{background:var(--red);border:3px solid #000;border-radius:8px;box-shadow:0 4px 0 #000;text-transform:uppercase;letter-spacing:.04em;transition:transform .08s,box-shadow .08s}
[data-theme="street"] .iadd:active{transform:translateY(2px);box-shadow:0 2px 0 #000}

/* group order */
[data-theme="street"] .gbanner{background:var(--red);border-bottom:3px solid #000;text-transform:uppercase;letter-spacing:.04em;font-size:12.5px}
[data-theme="street"] .gbanner .gb-view{background:#0B0908;border-radius:4px}
[data-theme="street"] .gshare{background:transparent;border:2px dashed #000;color:var(--ink);border-radius:5px;text-transform:uppercase;letter-spacing:.03em}
[data-theme="street"] .gpn .you{background:var(--red);color:#fff;border-radius:3px}
[data-theme="street"] .gline{border-bottom:1px dashed rgba(11,9,8,.45)}
[data-theme="street"] .gline .gl-t small{color:var(--accent-d)}
[data-theme="street"] .gline .gl-x{border-radius:4px;background:var(--bg2);border:1.5px solid #000;color:var(--ink)}
[data-theme="street"] .gplaced{background:var(--green);color:#0B0908;border:2px solid #000;border-radius:5px}
[data-theme="street"] .gwait{background:var(--bg2);border:2px solid #000;border-radius:5px}

/* loyalty / account / tracking */
[data-theme="street"] .loystat .loy-n{background:var(--bg2);border:2px solid #000;border-radius:5px;box-shadow:3px 3px 0 #000}
[data-theme="street"] .loy-n b{font-family:'Anton',sans-serif;font-weight:400;font-size:38px;line-height:1;color:var(--red)}
[data-theme="street"] .loy-n span{color:var(--ink);letter-spacing:.06em}
[data-theme="street"] .loybar{background:#fff;border:2px solid #000;border-radius:5px}
[data-theme="street"] .loybar .loy-tx b{color:var(--accent-d)}
[data-theme="street"] .loybar .ul-bar{background:rgba(11,9,8,.12);border-radius:3px}
[data-theme="street"] .loybar .ul-bar>span{background:var(--red);border-radius:3px}
[data-theme="street"] .loylvl{font-family:'Anton',sans-serif;font-weight:400;font-size:15px;letter-spacing:.08em;background:var(--red);color:#fff;border:2px solid #000;border-radius:4px;box-shadow:3px 3px 0 #000;padding:6px 13px;margin:0 0 12px}
/* street sets --bg/--ink/--line to the same near-black, so these need paper surfaces to stay legible */
[data-theme="street"] .rw-dot{background:var(--paper);border:2px solid #000;border-radius:5px;color:var(--ink2)}
[data-theme="street"] .rw-dot.on{background:var(--red);border-color:#000;color:#fff;box-shadow:2px 2px 0 #000}
[data-theme="street"] .rw-dot.gift{background:var(--paper);border-color:var(--red);border-style:dashed;color:var(--ink)}
[data-theme="street"] .rw-note,[data-theme="street"] .tierperk{background:var(--paper);border:2px solid #000;border-radius:5px;color:var(--ink)}
[data-theme="street"] .rw-note b,[data-theme="street"] .tierperk b{color:var(--accent-d)}
[data-theme="street"] .chat-msg.them{background:var(--paper);border:2px solid #000;color:var(--ink);border-radius:5px}
[data-theme="street"] .trko{background:#fff;border:2px solid #000;border-radius:6px}
[data-theme="street"] .trk::before{background:rgba(11,9,8,.25)}
[data-theme="street"] .trk-i{border-radius:5px;background:var(--bg2);border:2px solid #000}
[data-theme="street"] .trk-s.done .trk-i{--mic-fg:#0B0908;background:var(--green);color:#0B0908}
[data-theme="street"] .trk-s.cur .trk-i{--mic-fg:#fff;background:var(--red);color:#fff;box-shadow:0 0 0 3px rgba(228,0,43,.3);animation:none}
[data-theme="street"] .trk-s.cur .trk-l{color:var(--accent-d)}
[data-theme="street"] .trk-cancel{color:var(--red)}
[data-theme="street"] #opill .op-b{background:var(--bg2);color:var(--ink);border:2.5px solid #0B0908;border-radius:8px;box-shadow:5px 6px 0 #0B0908}
[data-theme="street"] #opill .op-e{background:var(--accent);color:#fff;border:2px solid #0B0908;border-radius:5px}
[data-theme="street"] #opill .op-t small{color:var(--accent-d)}
[data-theme="street"] #opill .op-track{background:var(--accent);color:#fff;border:2px solid #0B0908;border-radius:5px;box-shadow:2px 2px 0 #0B0908;padding:8px 11px}
[data-theme="street"] #opill .op-x{background:var(--bg2);color:#0B0908;border:2.5px solid #0B0908;border-radius:8px;box-shadow:5px 6px 0 #0B0908}
[data-theme="street"] .tk-hero{background:var(--ink);color:var(--bg2);border:2.5px solid #0B0908;border-radius:10px;box-shadow:7px 8px 0 var(--accent)}
[data-theme="street"] .tk-hero::after{content:none}
[data-theme="street"] .tk-hero .th-big{font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.01em;font-weight:400;font-size:30px}
[data-theme="street"] .tk-hero .th-eta{color:#FF6B54}

/* referral poster */
[data-theme="street"] .refcard{background:var(--red);border:3px solid #000;border-radius:8px;box-shadow:6px 6px 0 #000}
[data-theme="street"] .refcard .ref-h{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.03em;font-size:19px}
[data-theme="street"] .refcard .refcode{background:rgba(0,0,0,.3);border:2px dashed #fff;border-radius:5px;font-family:'Anton',sans-serif;font-weight:400;font-size:26px;letter-spacing:.18em}
[data-theme="street"] .refcard .ref-credit{background:#0B0908;border-radius:4px}
[data-theme="street"] .refcard .place.alt{background:var(--paper);color:var(--red);border:3px solid #000}

/* ============================================================
   Wave 2 additions: rate button, review note + counter,
   fixed tips + custom amount, per-person group totals, birthday
   (base tokens only so every theme inherits)
   ============================================================ */
/* rate-your-order button inside a tracked order card */
.ratebtn{margin-top:11px;width:100%;border:1.5px solid var(--line);background:var(--bg2);color:var(--ink);border-radius:12px;padding:11px;font-weight:800;font-size:13.5px;display:flex;align-items:center;justify-content:center;gap:7px;transition:.12s}
.ratebtn:active{transform:scale(.98)}

/* optional note under a tapped emoji */
.rf-noterow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}
.rf-cnt{font-size:11.5px;color:var(--mut);font-weight:600;font-variant-numeric:tabular-nums}

/* fixed tip presets + custom amount */
.tips-row{flex-wrap:wrap}
.tips-row .tipb{flex:1 1 auto;min-width:70px}
.tip-custom{display:none;gap:8px;margin-top:9px}
.tip-custom input{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:12px;padding:11px 13px;font-family:inherit;font-size:14.5px;background:var(--bg);color:var(--ink);outline:0}
.tip-custom input:focus{border-color:var(--accent)}
.tip-custom button{padding:0 18px;background:var(--ink);color:var(--bg);border-radius:12px;font-weight:800;font-size:13.5px;flex:none}

/* per-person total row in group sheet */
.gsub{display:flex;justify-content:space-between;gap:10px;padding:9px 2px 0;font-size:13px;font-weight:800;color:var(--ink2)}
.gsub span:last-child{color:var(--ink);font-variant-numeric:tabular-nums}

/* birthday row + inline form in account sheet */
.bdayrow{width:100%;display:flex;align-items:center;gap:10px;background:var(--bg2);border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;margin-top:14px;font-size:13.5px;font-weight:700;color:var(--ink);text-align:left}
.bdayrow .bd-ic{font-size:18px;flex:none}
.bdayrow .bd-tx{flex:1;min-width:0}
.bdayform{display:none;gap:8px;margin-top:10px}
.bdayform.open{display:flex}
.bdayform input{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:12px;padding:11px 13px;font-family:inherit;font-size:14.5px;background:var(--bg);color:var(--ink);outline:0}
.bdayform input:focus{border-color:var(--accent)}
.bdayform button{padding:0 18px;background:var(--accent);color:#fff;border-radius:12px;font-weight:800;font-size:13.5px;flex:none}

/* dark theme: match its input treatment */
[data-theme="dark"] .tip-custom input,[data-theme="dark"] .bdayform input{background:#21252F;border-color:#2A2F3A;color:var(--ink)}
[data-theme="dark"] .ratebtn,[data-theme="dark"] .bdayrow{background:#171A22;border-color:#2A2F3A}

/* street theme: receipt-card treatment */
[data-theme="street"] .ratebtn{background:#fff;border:2px solid #000;border-radius:5px;box-shadow:2px 2px 0 #000;text-transform:uppercase;letter-spacing:.04em;font-size:12px;color:var(--ink)}
[data-theme="street"] .tip-custom input,[data-theme="street"] .bdayform input{background:#fff;border:2px solid #000;border-radius:5px}
[data-theme="street"] .tip-custom input:focus,[data-theme="street"] .bdayform input:focus{border-color:var(--red);box-shadow:3px 3px 0 #000}
[data-theme="street"] .tip-custom button{background:#0B0908;color:var(--paper);border:2px solid #000;border-radius:5px;text-transform:uppercase;letter-spacing:.04em}
[data-theme="street"] .bdayform button{background:var(--red);color:#fff;border:2px solid #000;border-radius:5px;text-transform:uppercase;letter-spacing:.04em}
[data-theme="street"] .bdayrow{background:#fff;border:2px solid #000;border-radius:5px;box-shadow:3px 3px 0 #000}
[data-theme="street"] .gsub{border-top:2px solid rgba(11,9,8,.18);margin-top:2px;padding-top:8px;text-transform:uppercase;letter-spacing:.03em;font-size:11.5px}
[data-theme="street"] .rf-cnt{color:var(--ink2)}

/* ==== Wave 6: chips overlay, trust popup, order pill, driver map, signature, mobile ==== */
.p-lbp{display:block;font-size:11.5px;color:var(--mut);font-weight:600}
.gsub-v small{display:block;font-size:11px;color:var(--mut);font-weight:600;text-align:right}
.ir-ov{position:absolute;left:8px;bottom:8px;display:flex;gap:5px;z-index:2}
.ir-chip{background:#fff;border:0;border-radius:999px;padding:4px 9px;font-size:12px;font-weight:800;box-shadow:0 3px 10px -2px rgba(0,0,0,.28);color:#1a1512;line-height:1;display:inline-flex;align-items:center;gap:3px}
[data-theme="dark"] .ir-chip,[data-theme="playful"] .ir-chip{background:rgba(255,255,255,.96)}
.thumbwrap{position:relative}
.rvi-list{display:flex;flex-direction:column;gap:8px;margin:4px 0 14px}
.rvi-row{display:flex;align-items:center;gap:12px;background:#F1FBF5;border:1px solid #CDEBD8;border-radius:12px;padding:11px 13px}
.rvi-e{font-size:24px;line-height:1}
.rvi-t{font-size:14.5px;color:#1a7a48}
.rvi-t b{color:#0f6b3e;font-weight:800}
.rvguard{display:flex;align-items:center;gap:11px;background:#2E9E5B;color:#fff;border:0;border-radius:14px;padding:13px 15px;font-size:12.5px;line-height:1.45;margin-bottom:14px;box-shadow:0 6px 18px -6px rgba(46,158,91,.5)}
.rvguard .seal{flex:none;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:17px;font-weight:900}
.rvguard b{color:#fff}
.ro-ic svg,.sg-ic svg{width:21px;height:21px;color:var(--icon-c,var(--ink))}
/* Brand icon masks: one charcoal PNG per icon, painted with --mic-fg.
   Duotone is carried in the alpha channel, so 20% fills tint at 20% too.
   CONTRAST: every container below sets --mic-fg explicitly as var(--icon-c, <safe ink>). The default
   used to inherit var(--accent), which on a light chip with a light accent (Blaze gold on cream)
   fell to 1.4:1. The safe ink is --ink on light/tinted chips (every theme already guarantees --ink
   reads on --bg/--bg2) and --on-accent/--on-brand on solid brand fills. --icon-c is the owner
   override and is unset unless settings.icon_color is filled in. */
.mic{display:inline-block;width:1.15em;height:1.15em;background:var(--mic-fg,var(--icon-c,var(--ink)));vertical-align:-.15em;
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.ro-ic .mic,.sg-ic .mic{width:21px;height:21px;vertical-align:0}
.trust .te .mic{width:21px;height:21px;vertical-align:0}
.irow .ic .mic{width:19px;height:19px;vertical-align:0}
.trk-i .mic,#tkSteps .mic{width:22px;height:22px;vertical-align:0}
.gfaces{font-size:34px;text-align:center;margin:4px 0 12px;letter-spacing:5px}
.sig{margin:10px 0 2px;background:var(--bg2);border:1.5px dashed var(--line);border-radius:10px;padding:8px 12px;font-size:13px;color:var(--ink2);display:inline-block}
.sig b{color:var(--ink)}
/* floating order pill */
/* sits 10px above the cart bar's real measured height (--cbv, which already folds in the safe-area
   padding); when the bar is tucked away --cbv is 0 and the pill drops to clear the safe area instead. */
#opill{position:fixed;left:10px;right:10px;bottom:calc(max(var(--cbv), env(safe-area-inset-bottom)) + 10px);z-index:35;display:flex;gap:6px;max-width:520px;margin:0 auto;pointer-events:none}
#opill .op-b{pointer-events:auto;flex:1;display:flex;align-items:center;gap:11px;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:11px 13px;box-shadow:var(--sh-lg);cursor:pointer;text-align:left;font-family:inherit;position:relative;overflow:hidden}
#opill .op-b::after{content:none}
#opill .op-e{font-size:20px;width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--brand);color:#fff;border-radius:11px;position:relative;z-index:1}
#opill .op-t{flex:1;min-width:0;position:relative;z-index:1}
#opill .op-t b{display:block;font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--mut);font-family:var(--mono)}
#opill .op-t small{display:block;font-size:14px;color:var(--accent-d);font-weight:800;margin-top:1px}
#opill .op-go{font-size:18px;opacity:.55;position:relative;z-index:1}
#opill .op-x{pointer-events:auto;background:var(--bg);color:var(--mut);border:1px solid var(--line);border-radius:14px;width:44px;font-size:16px;box-shadow:var(--sh-lg);cursor:pointer}
/* ---- tracking sheet (premium card look) ---- */
.tk-title{margin:2px 0 14px}
.tk-code{font-family:var(--mono);color:var(--brand);font-weight:800;font-size:15px}
.tk-hero{position:relative;overflow:hidden;border-radius:18px;padding:22px;margin:0 0 18px;background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 52%,#141414));color:#fff;box-shadow:var(--sh-lg)}
.tk-hero::after{content:"";position:absolute;right:-34px;top:-46px;width:172px;height:172px;border-radius:50%;background:rgba(255,255,255,.13)}
.tk-hero .th-e{font-size:28px;line-height:1;position:relative;z-index:1}
.tk-hero .th-big{font-size:25px;font-weight:800;letter-spacing:-.02em;margin-top:8px;position:relative;z-index:1}
.tk-hero .th-sub{color:rgba(255,255,255,.74);font-size:14px;font-weight:600;margin-top:5px;position:relative;z-index:1}
.tk-hero .th-eta{color:#fff;font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.tkmap{height:250px;border-radius:18px;overflow:hidden;border:0;box-shadow:0 10px 26px rgba(15,20,30,.18);margin-top:2px}
.tk-age{font-size:11.5px;color:var(--mut);font-weight:700;margin-top:8px;text-align:center}
.drv-ic{font-size:28px;line-height:36px;text-align:center;filter:drop-shadow(0 2px 4px rgba(0,0,0,.45))}
.drv-ic.dest{font-size:30px}
.tk-calls{display:flex;gap:10px;margin:16px 0 6px}
.tk-calls:empty{display:none}
.tk-call{flex:1;text-align:center;border-radius:15px;padding:15px 8px;font-weight:800;font-size:14.5px;text-decoration:none;box-shadow:0 8px 20px rgba(15,20,30,.16)}
.tk-call.drv{background:linear-gradient(135deg,#2BD576,#12894A);color:#04371f}
.tk-call.rest{background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff}
button.tk-call{border:0;cursor:pointer;font-family:inherit}
.tk-close{width:100%;margin-top:14px;background:var(--bg2);border:1.5px solid var(--line);border-radius:14px;padding:14px;font-weight:700;font-size:14px;color:var(--ink)}
/* inline live driver map inside "Your orders" (Mandate A) */
.trko-map{margin-top:12px}
.trko-live{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink);margin-bottom:8px}
.trko-live b{font-weight:800}
.trko-map .tkmap{height:210px;margin-top:0;border-color:var(--brand)}
.trko-map .tk-age{text-align:left}
/* mobile polish */
@media (max-width:430px){
  .item .nm{font-size:15px}
  .add{width:34px;height:34px}
  .stepper button{width:32px;height:32px}
  .catbar .inner button{padding:10px 13px;font-size:13.5px}
  .sheet{max-height:94vh}
  .fld input,.fld textarea{font-size:16px} /* prevents iOS zoom on focus */
  #q{font-size:16px}
  .tipb{min-height:42px}
  .place{padding:16px;font-size:15.5px}
}

/* ==== Wave 10: reward punch-card + info note + pill polish ==== */
.rewardcard{background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:18px 18px 16px;margin:14px 0;position:relative;overflow:hidden}
.rewardcard::before{content:"";position:absolute;top:0;left:0;right:0;height:70px;background:var(--accent);opacity:.09;pointer-events:none}
.creditcard{display:flex;align-items:center;gap:13px;margin:12px 0;padding:15px 16px;border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,#2FA36B 20%,var(--bg2)),var(--bg2));border:1px solid color-mix(in srgb,#2FA36B 40%,var(--line))}
.creditcard .cc-ic{font-size:26px;line-height:1}
.creditcard .cc-tx b{display:block;font-size:16px;font-weight:850;color:var(--ink)}
.creditcard .cc-tx small{display:block;font-size:12.5px;color:var(--mut);margin-top:2px}
.rw-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;position:relative}
.rw-orders{font-size:12.5px;color:var(--mut);font-weight:700}
.loylvl{display:inline-flex;align-items:center;gap:5px;background:var(--accent);color:#fff;font-weight:800;font-size:12.5px;letter-spacing:.03em;padding:7px 14px;border-radius:999px;box-shadow:0 6px 16px -6px var(--accent)}
.rw-goal{font-size:15.5px;color:var(--ink);font-weight:600;line-height:1.45;position:relative}
.rw-goal b{font-weight:800}
.rw-dots{display:flex;gap:8px;margin:14px 0 12px;flex-wrap:wrap;position:relative}
.rw-dot{width:30px;height:30px;border-radius:50%;background:var(--bg);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:14px;flex:none;transition:.2s;font-weight:800;color:var(--mut)}
.rw-dot.on{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 4px 10px -4px var(--accent)}
.rw-dot.gift{border-color:var(--accent);border-style:dashed;background:var(--bg)}
.rw-note{font-size:13px;color:var(--ink);font-weight:600;background:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--bg));border:1px solid var(--line);border-radius:12px;padding:11px 13px;line-height:1.4;position:relative}
.rw-note b{color:var(--accent);font-weight:800}
/* in-app chat */
.chatbox{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:12px;height:min(46vh,340px);overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.chat-msg{max-width:82%;padding:9px 13px;border-radius:16px;font-size:14.5px;line-height:1.4;word-break:break-word}
.chat-msg.me{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:5px}
.chat-msg.them{align-self:flex-start;background:var(--bg);border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:5px}
.chatin{display:flex;gap:8px}
.chatin input{flex:1;min-width:0;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:13px 14px;font-size:16px;color:var(--ink);outline:0}
.chatin input:focus{border-color:var(--accent)}
.chsend{flex:none;background:var(--accent);color:#fff;border:0;border-radius:12px;padding:0 20px;font-weight:800;font-size:15px;cursor:pointer}
/* scanned-card promo popup */
.promopop{text-align:center;padding:14px 6px 4px}
.promopop .pp-emo{font-size:54px;line-height:1;margin-bottom:10px;animation:pppop .4s ease both}
@keyframes pppop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.promopop h2{font-size:27px;margin-bottom:10px}
/* happy-hour banner + tier perk */
.hhbanner{margin:14px 14px 0;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#000));color:#fff;border-radius:14px;padding:13px 16px;font-size:14.5px;font-weight:600;line-height:1.4}
.hhbanner b{font-weight:800}
.tierperk{background:color-mix(in srgb,var(--accent) 12%,var(--bg));border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13px;color:var(--ink);font-weight:600;margin-top:2px;position:relative}
.tierperk b{color:var(--accent);font-weight:800}
.infonote{display:flex;gap:10px;align-items:flex-start;background:#FFF7E6;border:1px solid #F0DFB6;color:#6B5626;border-radius:14px;padding:12px 14px;margin:12px 0;font-size:13.5px;line-height:1.5;font-weight:600}
.infonote .in-ic{font-size:16px;flex:none;line-height:1.4}
#opill .op-track{position:relative;z-index:1;background:var(--brand);color:#fff;font-weight:800;font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:9px 12px;border-radius:10px;white-space:nowrap}
#opill.op-live .op-e{animation:oplive 1.9s infinite}
@keyframes oplive{0%{box-shadow:0 0 0 0 rgba(95,228,155,.5)}70%{box-shadow:0 0 0 9px rgba(95,228,155,0)}100%{box-shadow:0 0 0 0 rgba(95,228,155,0)}}

/* driver identity chip in tracking sheet (Wave 11) */
.tk-driver{display:flex;align-items:center;gap:11px;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:10px 13px;margin:0 0 14px}
.tk-driver .tkd-av{width:42px;height:42px;flex:none;border-radius:50%;overflow:hidden;background:var(--accent);display:grid;place-items:center;color:#fff;font-weight:800;font-size:17px}
.tk-driver .tkd-av img{width:100%;height:100%;object-fit:cover}
.tk-driver .tkd-t{flex:1;min-width:0}
.tk-driver .tkd-t b{display:block;font-size:15px;font-weight:800;color:var(--ink)}
.tk-driver .tkd-t small{color:var(--mut);font-size:12px;font-weight:600}
.tk-driver .tkd-call{width:42px;height:42px;flex:none;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;text-decoration:none;font-size:17px}

/* ---- hand-authored reaction glyphs (REACT_SVG in app.js) ---- */
/* one shared optical size per surface, so the five always read as a single set */
.rsvg{display:block;flex:none;width:20px;height:20px}
/* was 17px — the only surface that shrank below the shared 20px base, so the five read as a
   different, weaker set in the menu list than everywhere else. */
.ireacts .ir .rsvg{width:20px;height:20px}
.rvi-e{display:inline-flex;align-items:center}
.rvi-e .rsvg{width:26px;height:26px}
.rf-e{display:inline-flex;align-items:center;justify-content:center}
.rf-e .rsvg{width:30px;height:30px}
/* beats the generic `.irow .ic svg` icon rule (brand-tinted, 19px) — these carry their own colours */
.irow .ic .rsvg{width:22px;height:22px}