/* ==========================================================================
   MACROS.™ — liquid glass navigation + light/dark theming
   One floating pill holds every destination. It refracts what is behind it,
   the active tab is a lens that slides, and the moon on the right end turns
   the whole site over to daylight.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LIGHT THEME
   Every component in this site reads from the tokens below, so daylight is a
   token swap rather than a second stylesheet. Two rules were followed strictly:
   Volt (#C8FF3C) is 1.07:1 on paper and can never be text on a light surface —
   it becomes #307E00 (4.64:1). But Volt is still the brand, so it stays as a
   FILL behind dark text, where it measures 16.7:1. Nothing collides because
   nothing relies on a colour that changed meaning.
   -------------------------------------------------------------------------- */
:root{
  /* Berry at full strength is 3.6:1 on a card — fine for a large heading, not
     for the 14px bold number it is actually used for. Text gets a lighter tint;
     the original stays for fills and rings. */
  --berry-text:#A88BFF;
  --volt-fill:#C8FF3C;          /* always the bright chip colour, both themes */
  --on-volt:#0A0B0D;            /* text that sits on top of a Volt fill */
  --paper:#0A0B0D;              /* the actual page colour, whatever theme */
  --glow-1:rgba(200,255,60,.30);
  --glow-2:rgba(124,77,255,.24);
  --lens:rgba(255,255,255,.10);
  --rim-hi:rgba(255,255,255,.42);
  --rim-lo:rgba(255,255,255,.05);
  --img-pad:transparent;
}

html[data-theme="light"]{
  --berry-text:#4A25B0;
  --ink:#F4F4F0; --ink-2:#FFFFFF; --ink-3:#EBEBE5;
  --chalk:#13161A;              /* body text, 15.9:1 on --ink */
  --ash:#565C66;                /* 6.4:1 — still a real reading colour */
  --ash-2:#5F656F;              /* 4.90:1 worst case — the faintest we allow */
  /* Solved against the darkest light surface in the system (#EBEBE5), not just
     against white — an accent that only passes on paper fails inside a card. */
  --volt:#2C7300;               /* accent TEXT and strokes only — 4.93:1 worst case */
  --volt-dim:#205700;
  --pulse:#DCF4E4;
  --ember:#B8330C;              /* 4.99:1 worst case; the dark original is 2.9:1 */
  --berry:#5B2FD6;              /* 5.9:1 */
  --glass:rgba(12,14,18,.045);
  --glass-2:rgba(12,14,18,.07);
  --stroke:rgba(12,14,18,.12);
  --stroke-2:rgba(12,14,18,.20);
  --shadow:0 22px 60px -20px rgba(18,22,28,.28);
  --shadow-volt:0 16px 44px -14px rgba(120,170,0,.40);
  --paper:#F4F4F0;
  --glow-1:rgba(150,200,20,.22);
  --glow-2:rgba(124,77,255,.16);
  --lens:rgba(255,255,255,.62);
  --rim-hi:rgba(255,255,255,.95);
  --rim-lo:rgba(12,14,18,.05);
  --img-pad:#0E1013;            /* the food art is drawn on a dark floor, so on
                                   paper it gets its own dark tile to sit in */
}

html[data-theme="light"] body{background:var(--ink);color:var(--chalk)}
html[data-theme="light"] ::selection{background:var(--volt-fill);color:var(--on-volt)}

/* The ambient blooms are calibrated for a black room. On paper they turn into
   a wash that eats text contrast, so they are dimmed hard rather than removed —
   the page should still feel alive. */
html[data-theme="light"] .bloom{opacity:.13;filter:blur(150px)}
html[data-theme="light"] .bloom.b3{opacity:.07}
html[data-theme="light"] .grain{opacity:.25;mix-blend-mode:multiply}

/* Anything that was a bright rule or a white hairline on black has to invert,
   or it disappears into the paper. */
html[data-theme="light"] .nav.stuck{background:rgba(255,255,255,.80)}
html[data-theme="light"] .btn-ghost{border-color:var(--stroke-2)}
html[data-theme="light"] .btn-ghost:hover{background:var(--glass-2)}
html[data-theme="light"] .card,
html[data-theme="light"] .note,
html[data-theme="light"] .drawer,
html[data-theme="light"] .authx-card{background:var(--ink-2)}
html[data-theme="light"] .card img,
html[data-theme="light"] .prod-art,
html[data-theme="light"] .thumb img{background:var(--img-pad)}
html[data-theme="light"] .marquee{border-color:var(--stroke)}
html[data-theme="light"] footer{background:var(--ink-3)}
html[data-theme="light"] .burger span{background:var(--chalk)}
html[data-theme="light"] .snd .eq i{background:var(--volt)}
/* the mascot is drawn in chalk on ink; on paper he needs the ink line back */
html[data-theme="light"] .lifter .ln{stroke:var(--chalk)}
html[data-theme="light"] img[src*="logo-wordmark-light"],
html[data-theme="light"] img[src*="logo-horizontal-light"]{
  /* the chalk wordmark would vanish on paper: flip it to ink, keep the O green */
  filter:invert(1) hue-rotate(180deg) saturate(1.35) brightness(.92);
}

/* Theme changes should feel like a light switch, not a repaint. */
html.theme-anim body,
html.theme-anim .nav.stuck,
html.theme-anim .card,
html.theme-anim footer,
html.theme-anim .gnav{transition:background-color .45s var(--ease),color .45s var(--ease),
                                border-color .45s var(--ease)}
@media (prefers-reduced-motion:reduce){html.theme-anim *{transition:none !important}}

/* --------------------------------------------------------------------------
   2. THE GLASS PANEL
   -------------------------------------------------------------------------- */
.gnav{
  position:relative;display:flex;align-items:center;gap:4px;
  padding:5px;border-radius:999px;
  background:var(--glass);
  border:1px solid var(--stroke);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  box-shadow:
    inset 0 1px 0 var(--rim-hi),           /* the lit top rim */
    inset 0 -1px 0 var(--rim-lo),          /* the shadowed bottom rim */
    0 10px 34px -12px rgba(0,0,0,.55);
  isolation:isolate;
}
/* the pointer lens — light bends toward where you are about to press */
.gnav::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(180px circle at var(--gx,50%) var(--gy,50%),
             var(--lens),transparent 62%);
  opacity:var(--go,0);transition:opacity .4s var(--ease);z-index:0;
}
/* Real refraction where the browser can do it. Chrome runs the displacement
   map against the backdrop; everywhere else the blur above already stands on
   its own, so nothing is lost. */
@supports (backdrop-filter:url(#lg-warp)){
  .gnav{backdrop-filter:url(#lg-warp) blur(14px) saturate(185%)}
}

.gnav-links{display:flex;align-items:center;gap:2px;position:relative;z-index:2}
.gnav-links a{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 15px;border-radius:999px;
  font-size:.86rem;font-weight:500;color:var(--ash);
  white-space:nowrap;transition:color .28s var(--ease);
}
.gnav-links a svg{width:15px;height:15px;flex:none;opacity:.85}
.gnav-links a:hover{color:var(--chalk)}
.gnav-links a[aria-current="page"]{color:var(--chalk)}

/* the sliding lens behind the active tab */
.gnav-ind{
  position:absolute;top:5px;left:0;height:calc(100% - 10px);
  border-radius:999px;pointer-events:none;z-index:1;
  background:var(--glass-2);
  border:1px solid var(--stroke-2);
  box-shadow:inset 0 1px 0 var(--rim-hi),0 4px 14px -6px rgba(0,0,0,.5);
  opacity:0;
}
.gnav-ind.on{opacity:1}

.gnav-div{width:1px;height:22px;background:var(--stroke-2);margin:0 4px;flex:none;z-index:2}

.gnav-signin{
  display:inline-flex;align-items:center;gap:7px;z-index:2;white-space:nowrap;flex:none;
  padding:9px 17px;border-radius:999px;font-size:.86rem;font-weight:600;
  background:var(--volt-fill);color:var(--on-volt);
  box-shadow:0 6px 20px -8px rgba(200,255,60,.6);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.gnav-signin:hover{transform:translateY(-1px);box-shadow:0 10px 26px -8px rgba(200,255,60,.75)}

/* ------------------------------------------------------- theme switch ----- */
.theme-btn{
  position:relative;z-index:2;flex:none;
  width:38px;height:38px;border-radius:999px;border:1px solid transparent;
  background:none;cursor:pointer;display:grid;place-items:center;
  color:var(--chalk);transition:background .3s var(--ease),border-color .3s var(--ease);
}
.theme-btn:hover{background:var(--glass-2);border-color:var(--stroke)}
.theme-btn svg{width:19px;height:19px;overflow:visible}
/* One circle, one cutout, eight rays. Sliding the cutout off the disc turns a
   crescent into a sun — the same trick the iOS control uses, and it means the
   two states are one shape rather than two icons swapping. */
.theme-btn .disc{fill:currentColor;transition:transform .55s var(--ease)}
.theme-btn .cut{fill:var(--paper);transition:transform .55s var(--ease),opacity .3s}
.theme-btn .ray{stroke:currentColor;stroke-width:2;stroke-linecap:round;
  opacity:0;transform-origin:12px 12px;transition:opacity .35s var(--ease),transform .55s var(--ease)}
html[data-theme="light"] .theme-btn .disc{transform:scale(.66);transform-origin:12px 12px}
html[data-theme="light"] .theme-btn .cut{transform:translate(11px,-11px);opacity:0}
html[data-theme="light"] .theme-btn .ray{opacity:1;transform:scale(1)}
.theme-btn .ray{transform:scale(.55)}
.theme-btn:active{transform:scale(.94)}

/* --------------------------------------------------------------------------
   3. FITTING IT INTO THE HEADER

   The header sits in .wrap, which is min(1240px, 92vw) — so on a 2000px window
   the panel still only has ~1240px to live in. Sizing it with viewport media
   queries was therefore wrong: at 2000px the rules said "plenty of room", the
   panel overflowed its 1240px container, and the account chip landed on top of
   "Newsletter". Folding is now driven by measuring the actual space left over
   (see fitPill() in js/glass.js), which sets data-fold on the panel.
   -------------------------------------------------------------------------- */
.nav .wrap{gap:14px}
.nav-mid{display:flex;justify-content:center;flex:1 1 auto;min-width:0}
.gnav{max-width:100%}
/* No min-width:0 here. If the panel ever does overflow, the links must push the
   divider and the chip along rather than letting them draw on top of the words. */
.gnav-links a{flex:none;white-space:nowrap}
.gnav-links a span{white-space:nowrap}
/* The wordmark does not shrink. It was allowed to, and on a phone it collapsed
   to a 3px sliver — the panel folds instead, which is what the fold levels and
   fitPill() are for. */
.brand{flex:0 0 auto}
.brand img{flex:none}
.brand .by{white-space:nowrap}

/* fold 1 — trim the fat: the signature line and some padding */
.gnav[data-fold="1"] .gnav-links a{padding:9px 12px;font-size:.83rem;gap:6px}
/* fold 2 — tighter still, and the log-out word becomes its icon */
.gnav[data-fold="2"] .gnav-links a{padding:8px 9px;font-size:.79rem;gap:5px}
.gnav[data-fold="2"] .gnav-links a svg{width:14px;height:14px}
.gnav[data-fold="2"] .acct-chip{padding:8px 12px;font-size:.8rem}
.gnav[data-fold="2"] .logout-btn{padding:8px 10px}
.gnav[data-fold="2"] .logout-btn span{display:none}
.gnav[data-fold="2"] .gnav-div{margin:0 2px}
.gnav[data-fold="2"] .theme-btn{width:34px;height:34px}
/* fold 3 — names go, icons carry it; every icon keeps its title */
.gnav[data-fold="3"] .gnav-links a span{display:none}
.gnav[data-fold="3"] .gnav-links a{padding:9px 10px}
.gnav[data-fold="3"] .gnav-links a svg{width:17px;height:17px}
.gnav[data-fold="3"] .logout-btn span{display:none}
/* fold 4 — last resort before the burger takes over */
.gnav[data-fold="4"] .gnav-links a{padding:8px 7px}
.gnav[data-fold="4"] .acct-chip .hi{display:none}
.gnav[data-fold="4"] .acct-chip{padding:9px 11px}
.gnav[data-fold="4"] .logout-btn span{display:none}

/* the signature line goes as soon as anything has to fold at all */
.nav[data-fold-any] .brand .by{display:none}

.brand .tm{font-size:.62rem;font-weight:700;color:var(--ash);
  transform:translateY(-8px);letter-spacing:.02em;margin-left:-6px}

/* Below the point where a pill of destinations stops making sense on a thumb,
   it keeps only daylight and the account, and the sheet carries the rest. */
@media (max-width:820px){
  .nav-mid{flex:0 0 auto}
  .gnav-links,.gnav-div{display:none}
  .gnav{padding:4px}
  .gnav-signin{padding:8px 14px}
  .brand .by{display:none}
}
@media (max-width:520px){
  .gnav-signin{padding:9px 14px;font-size:.82rem}
}
@media (pointer:coarse){
  .gnav-signin{min-height:44px}
  .theme-btn{width:44px;height:44px}
  .p-body h3 a{display:flex;align-items:center;min-height:44px}
  /* 44 tall is only half the rule — a two-letter crumb is still a 30px target. */
  .crumbs a,.i-sib a,footer .socials a,.i-more a{
    min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
  .i-more a{justify-content:flex-start}
}

/* the mobile sheet still needs to carry every destination */
@media (max-width:820px){
  .nav-links{
    position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;gap:0;
    background:rgba(10,11,13,.92);backdrop-filter:blur(24px) saturate(160%);
    padding:14px 22px 26px;border-bottom:1px solid var(--stroke);
    transform:translateY(-140%);transition:transform .5s var(--ease);
    max-height:calc(100vh - var(--nav-h));overflow:auto;
  }
  html[data-theme="light"] .nav-links{background:rgba(255,255,255,.94)}
  .nav-links.open{transform:none}
  .nav-links a{padding:15px 2px;width:100%;border-bottom:1px solid var(--stroke);
    font-size:1.02rem;display:flex;align-items:center;gap:12px}
  .nav-links a svg{width:18px;height:18px}
  .burger{display:block}
}
@media (min-width:821px){
  .nav-links{display:none}     /* the pill is the navigation on a real screen */
}

/* --------------------------------------------------------------------------
   4. THE ACCOUNT GATE
   Shown when somebody tries to put food in a bag without an account. It has to
   explain itself in one read — a bare "please log in" reads as a toll gate.
   -------------------------------------------------------------------------- */
.gatex{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:22px;
  background:rgba(6,7,9,.72);backdrop-filter:blur(10px);opacity:0;
  transition:opacity .38s var(--ease)}
html[data-theme="light"] .gatex{background:rgba(30,34,40,.42)}
.gatex.on{opacity:1}
.gatex-card{position:relative;width:min(500px,100%);padding:34px 30px 28px;
  border-radius:var(--r-l);background:var(--ink-2);border:1px solid var(--stroke-2);
  box-shadow:var(--shadow);transform:translateY(18px) scale(.97);
  transition:transform .55s cubic-bezier(.34,1.4,.5,1)}
.gatex.on .gatex-card{transform:none}
.gatex-card h3{margin:12px 0 10px}
.gatex-card p{color:var(--ash);font-size:.95rem}
.gatex-x{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--stroke);background:none;color:var(--ash);font-size:1.3rem;
  cursor:pointer;line-height:1;transition:.25s var(--ease)}
.gatex-x:hover{color:var(--chalk);background:var(--glass-2)}
.gatex-why{list-style:none;margin:16px 0 22px;padding:0;display:grid;gap:9px}
.gatex-why li{position:relative;padding-left:24px;font-size:.9rem;color:var(--ash)}
.gatex-why li b{color:var(--chalk)}
.gatex-why li::before{content:'';position:absolute;left:4px;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--volt)}
.gatex-btns{display:flex;gap:10px;flex-wrap:wrap}
.gatex-btns .btn{flex:1 1 190px;justify-content:center}
.gatex-fine{margin:16px 0 0;font-size:.83rem;color:var(--ash-2)}
.gatex-fine b{color:var(--volt)}

/* ------------------------------------------------------------- find us ---- */
.findus{display:grid;gap:14px;grid-template-columns:1.1fr .9fr;align-items:center;
  margin-top:34px;padding:20px;border-radius:var(--r-l);
  background:var(--glass);border:1px solid var(--stroke)}
.findus h4{margin:0 0 6px}
.findus address{font-style:normal;color:var(--ash);font-size:.9rem;line-height:1.55}
.findus .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.findus [data-geo-dist]{margin-top:10px;font-family:var(--mono);font-size:.78rem;
  color:var(--volt);letter-spacing:.04em}
.findus .mapcard{position:relative;border-radius:var(--r-m);overflow:hidden;
  border:1px solid var(--stroke);min-height:150px;display:grid;place-items:center;
  background:
    repeating-linear-gradient(0deg,transparent 0 22px,var(--stroke) 22px 23px),
    repeating-linear-gradient(90deg,transparent 0 22px,var(--stroke) 22px 23px),
    var(--glass-2)}
.findus .pin{width:34px;height:34px;border-radius:50% 50% 50% 2px;transform:rotate(-45deg);
  background:var(--volt-fill);box-shadow:0 0 0 8px color-mix(in srgb,var(--volt-fill) 18%,transparent),
  0 10px 26px -8px rgba(0,0,0,.6);animation:pindrop 2.6s var(--ease) infinite}
@keyframes pindrop{0%,72%,100%{transform:rotate(-45deg) translateY(0)}
  80%{transform:rotate(-45deg) translateY(-9px)}}
@media (max-width:720px){.findus{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.findus .pin{animation:none}}

/* --------------------------------------------------------------------------
   5. QUALITY BENCHMARKS
   Four cards, each with an honest status chip. The green chip and the amber
   chip have to be told apart without relying on colour alone, so the label
   says which it is.
   -------------------------------------------------------------------------- */
.qbench{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.qbench article{padding:20px;border-radius:var(--r-m);
  background:var(--glass);border:1px solid var(--stroke)}
.qbench .qh{display:flex;align-items:flex-start;justify-content:space-between;
  gap:10px;margin-bottom:10px;flex-wrap:wrap}
.qbench .qh b{font-family:var(--head);font-size:1rem;letter-spacing:-.01em}
.qbench p{font-size:.88rem;color:var(--ash);margin:0 0 8px}
.qbench p:last-child{margin-bottom:0}
.qbench p b{color:var(--chalk);font-weight:600}
.qbench .qn{font-family:var(--mono);font-size:.76rem;color:var(--ash-2);line-height:1.6}
.qs{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 9px;border-radius:999px;white-space:nowrap;border:1px solid transparent}
.qs-go{color:var(--volt);background:color-mix(in srgb,var(--volt) 10%,transparent);
  border-color:color-mix(in srgb,var(--volt) 34%,transparent)}
.qs-wait{color:var(--ember);background:color-mix(in srgb,var(--ember) 10%,transparent);
  border-color:color-mix(in srgb,var(--ember) 34%,transparent)}
/* A tinted chip is its own background, so the accent has to be darker on it than
   it needs to be on the page. Measured, not eyeballed. */
html[data-theme="light"] .qs-go{color:#205700}
html[data-theme="light"] .qs-wait{color:#8F2708}
html[data-theme="light"] .i-chip,
html[data-theme="light"] .save,
html[data-theme="light"] .p-card .was,
html[data-theme="light"] .allergen strong{color:#8F2708}

/* --------------------------------------------------------------------------
   6. THE SIGN-IN SPREAD
   The card used to float alone with a character beside it. On a laptop that
   left a third of the screen doing nothing, so it now carries the argument for
   having an account — the character still walks in front of it.
   -------------------------------------------------------------------------- */
.auth-stage{width:min(1200px,94vw);max-width:none;align-items:center}
.auth-aside{flex:1 1 380px;min-width:0;max-width:520px;padding-right:26px;align-self:center}
.auth-aside .tag{display:inline-block;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--volt);margin-bottom:18px}
.auth-aside h1{font-size:clamp(2.4rem,4.4vw,4.1rem);line-height:.98;margin:0 0 20px}
.auth-aside h1 em{font-style:italic;font-family:var(--head);color:var(--volt);
  font-weight:500;letter-spacing:-.02em}
.auth-aside > p{color:var(--ash);font-size:1rem;max-width:44ch}
.auth-pts{list-style:none;padding:0;margin:26px 0 22px;display:grid;gap:13px}
.auth-pts li{position:relative;padding-left:26px;font-size:.91rem;color:var(--ash);
  max-width:46ch;line-height:1.6}
.auth-pts li b{color:var(--chalk);font-weight:600}
.auth-pts li::before{content:'';position:absolute;left:2px;top:.56em;width:9px;height:9px;
  border-radius:3px;background:var(--volt);box-shadow:0 0 14px -2px var(--volt)}
.auth-fine{font-size:.8rem;color:var(--ash-2);max-width:48ch;line-height:1.65}

@media (max-width:1080px){
  .auth-aside{flex-basis:320px;padding-right:14px}
  .auth-pts li:nth-child(n+4){display:none}   /* keep the three that argue hardest */
}
@media (max-width:900px){
  .auth-stage{width:min(560px,94vw)}
  .auth-aside{order:-2;max-width:none;padding:0 0 6px;text-align:left}
  .auth-aside h1{font-size:clamp(2.1rem,8vw,2.9rem)}
  .auth-pts{margin:20px 0 18px}
  .auth-fine{display:none}                    /* it is on the privacy page in full */
}
@media (max-width:520px){
  .auth-pts li:nth-child(n+3){display:none}
  .auth-aside > p{font-size:.94rem}
}

/* --------------------------------------------------------------------------
   7. CARD -> ITEM PAGE
   The artwork is now a door. It opens in a new tab on purpose: somebody
   comparing four shakes wants four tabs, not four rounds of the back button.
   -------------------------------------------------------------------------- */
.p-media{display:block;position:relative}
.p-body h3 a{color:inherit;display:inline-block;transition:color .25s var(--ease)}
.p-card:hover .p-body h3 a{color:var(--volt)}
.p-open{
  position:absolute;left:12px;bottom:12px;z-index:3;
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 13px;border-radius:999px;
  font-size:.74rem;font-weight:600;letter-spacing:.01em;
  color:var(--chalk);background:var(--glass-2);
  border:1px solid var(--stroke-2);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  opacity:0;transform:translateY(8px);
  transition:opacity .32s var(--ease),transform .32s var(--ease);
}
.p-open svg{width:13px;height:13px}
.p-card:hover .p-open,.p-media:focus-visible .p-open{opacity:1;transform:none}
/* A hover reveal is invisible to a thumb, so on touch it simply stays put. */
@media (pointer:coarse){
  .p-open{opacity:1;transform:none;font-size:.7rem;padding:7px 11px;min-height:34px}
}

/* --------------------------------------------------------------------------
   8. SURFACES THAT WERE BUILT BLACK
   A handful of components paint their own near-black background rather than
   reading --ink-2, because on a dark site that was never wrong. On paper they
   would put dark text on a dark panel, so each one is re-surfaced here. Found
   by measuring contrast on the rendered page, not by reading the CSS.
   -------------------------------------------------------------------------- */
html[data-theme="light"] .cbar-in{background:rgba(255,255,255,.97)}
html[data-theme="light"] .authx-card{
  background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(246,246,242,.99));
  border-color:var(--stroke-2);
  box-shadow:0 40px 100px -40px rgba(20,24,30,.30),inset 0 1px 0 rgba(255,255,255,.9)}
html[data-theme="light"] .seg{background:rgba(12,14,18,.05);border-color:var(--stroke)}
html[data-theme="light"] .seg .glow{background:rgba(255,255,255,.94);
  box-shadow:0 4px 14px -6px rgba(20,24,30,.3)}
html[data-theme="light"] .otpx input,
html[data-theme="light"] .fx input,
html[data-theme="light"] .fx select,
html[data-theme="light"] .fx textarea,
html[data-theme="light"] .input{background:rgba(255,255,255,.92);border-color:var(--stroke-2)}
html[data-theme="light"] .otpx input:focus,
html[data-theme="light"] .fx input:focus{background:rgba(200,255,60,.16);border-color:var(--volt)}
html[data-theme="light"] .otpx input.filled{background:rgba(200,255,60,.20);
  border-color:color-mix(in srgb,var(--volt) 60%,transparent)}
html[data-theme="light"] .ring .bg{stroke:rgba(12,14,18,.10)}
html[data-theme="light"] .pbar-t,
html[data-theme="light"] .prow,
html[data-theme="light"] .kv,
html[data-theme="light"] .fres button,
html[data-theme="light"] .mini div,
html[data-theme="light"] .totals4 div{background:rgba(12,14,18,.045)}
html[data-theme="light"] input[type=range]{background:rgba(12,14,18,.14)}
html[data-theme="light"] input[type=range]::-webkit-slider-runnable-track,
html[data-theme="light"] input[type=range]::-moz-range-track{background:rgba(12,14,18,.14)}
html[data-theme="light"] input[type=range]::-webkit-slider-thumb,
html[data-theme="light"] input[type=range]::-moz-range-thumb{border-color:var(--ink-2)}
html[data-theme="light"] .btn .shine{background:linear-gradient(105deg,transparent 38%,
  rgba(255,255,255,.65) 50%,transparent 62%)}
html[data-theme="light"] .smsx{background:rgba(255,255,255,.94)}
html[data-theme="light"] .smsx button{background:var(--chalk);color:var(--ink-2)}
html[data-theme="light"] .gatex-card,
html[data-theme="light"] .confirm-card{background:var(--ink-2)}
html[data-theme="light"] .authx-bg i{opacity:.28}
html[data-theme="light"] .toast{background:rgba(255,255,255,.96);color:var(--chalk);
  border:1px solid var(--stroke-2)}
html[data-theme="light"] .spot{background:radial-gradient(circle,rgba(12,14,18,.10),transparent 62%)}
html[data-theme="light"] .cur-dot,html[data-theme="light"] .cur-ring{mix-blend-mode:normal}

/* --------------------------------------------------------------------------
   8b. TEXT PAINTED WITH A FILL COLOUR
   Three places read an accent meant for backgrounds and used it on small text.
   Each is repointed at a value solved for the surface it actually lands on.
   -------------------------------------------------------------------------- */
.macro.f b{color:var(--berry-text)}
.p-tag.deal{color:var(--on-volt)}                /* white on ember measured 2.85:1 */
.i-lede,.i-fine,.i-spec dt,.i-macro .u,.i-macro th{color:var(--ash)}
.slider-h label{color:var(--ash)}

/* --------------------------------------------------------------------------
   9. THINGS THAT FLOAT ON THE ARTWORK
   The food illustrations are drawn on a near-black floor in both themes, so
   every chip sitting on top of one has to stay light-on-dark whatever the page
   is doing. Letting these follow the theme is exactly how text disappears.
   -------------------------------------------------------------------------- */
html[data-theme="light"] .p-tag,
html[data-theme="light"] .p-kcal,
html[data-theme="light"] .hero-chip,
html[data-theme="light"] .p-open{color:#F5F4EF;border-color:rgba(255,255,255,.22)}
html[data-theme="light"] .p-tag,
html[data-theme="light"] .p-kcal,
html[data-theme="light"] .p-open{background:rgba(10,11,13,.78)}
html[data-theme="light"] .hero-chip .k{color:#C8FF3C}
html[data-theme="light"] .hero-chip .l{color:#B9BEC6}
/* the bright chips keep the brand colour rather than the accessible-text green,
   because here Volt is a fill with ink on top — which measures 16.7:1 */
html[data-theme="light"] .p-tag.hot{background:var(--volt-fill);color:var(--on-volt);
  border-color:var(--volt-fill)}
html[data-theme="light"] .p-tag.deal{background:#B8330C;color:#fff;border-color:#B8330C}

/* Section headings in the footer sat at 4.27:1 — close enough to look fine and
   far enough to fail. They are headings; they can be full strength. */
html[data-theme="light"] footer h4{color:var(--chalk)}
html[data-theme="light"] .signoff,
html[data-theme="light"] .f-bot{color:var(--ash)}
/* The last two: a caption inside a tinted stat tile, where the tile's own
   background lifts the floor and the faint grey no longer clears it. */
.out span,.mstat span{color:var(--ash)}

/* --------------------------------------------------------------------------
   10. THE SIGNED-IN PANEL
   The Sign in button becomes the member; Log out sits beside it. Both live
   inside the glass so the panel keeps one shape whether you are in or out.
   -------------------------------------------------------------------------- */
.gnav .acct-chip{
  display:inline-flex;align-items:center;gap:8px;z-index:2;flex:none;white-space:nowrap;
  padding:9px 15px;border-radius:999px;font-size:.85rem;font-weight:600;
  color:var(--chalk);background:var(--glass-2);border:1px solid var(--stroke-2);
  box-shadow:inset 0 1px 0 var(--rim-hi);
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.gnav .acct-chip:hover{background:var(--glass);transform:translateY(-1px)}
/* The label must not be allowed to shrink — a chip one letter short of the name
   reads as a bug, and it was: measured 74px of box for 79px of text. */
.gnav .acct-chip > span{flex:none}
.gnav .acct-chip .hi{font-weight:500;color:var(--ash)}
.gnav .acct-chip .dot{
  width:7px;height:7px;border-radius:50%;background:var(--volt-fill);flex:none;
  box-shadow:0 0 10px var(--volt-fill);animation:acctPulse 2.6s var(--ease) infinite;
}
@keyframes acctPulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.gnav .acct-chip .dot{animation:none}}

.gnav .logout-btn{
  display:inline-flex;align-items:center;gap:7px;z-index:2;flex:none;
  padding:9px 13px;border-radius:999px;border:1px solid transparent;
  background:none;color:var(--ash);font-size:.85rem;cursor:pointer;
  transition:color .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease);
}
.gnav .logout-btn:hover{color:var(--chalk);background:var(--glass-2);border-color:var(--stroke)}
.gnav .logout-btn svg{width:16px;height:16px;flex:none}
/* Past this width the word goes and the door icon carries it — the icon is the
   universal one for leaving, and it keeps the six destinations readable. */
@media (max-width:1560px){ .gnav .logout-btn span{display:none} }
@media (max-width:820px){ .gnav .acct-chip,.gnav .logout-btn{padding:9px 12px} }
@media (max-width:960px){ .gnav .acct-chip .hi{display:none} }
@media (max-width:460px){ .gnav .acct-chip .nm{display:none} }
@media (pointer:coarse){ .gnav .acct-chip,.gnav .logout-btn{min-height:44px} }

/* the small-screen sheet version */
.nav-links .logout-btn{
  display:flex;align-items:center;gap:12px;width:100%;padding:15px 2px;
  background:none;border:0;border-bottom:1px solid var(--stroke);
  color:var(--ash);font-size:1.02rem;text-align:left;cursor:pointer;
}

/* --------------------------------------------------------------------------
   11. DELIVERY ADDRESS
   -------------------------------------------------------------------------- */
.addrx{display:grid;gap:12px}
.addr-h{font-size:1.15rem;margin:0}
.addr-lede{color:var(--ash);font-size:.92rem;margin:0}
.alabs{display:flex;gap:8px;flex-wrap:wrap}
.alab{
  padding:8px 15px;border-radius:999px;cursor:pointer;font-size:.82rem;font-weight:500;
  background:var(--glass);border:1px solid var(--stroke);color:var(--ash);
  transition:.25s var(--ease);
}
.alab:hover{color:var(--chalk);border-color:var(--stroke-2)}
.alab.on{background:var(--volt-fill);color:var(--on-volt);border-color:var(--volt-fill);font-weight:600}
@media (pointer:coarse){.alab{min-height:44px}}
.addr-area{font-size:.78rem;color:var(--ash-2);line-height:1.6;margin:0}
.addrx .err{margin-top:-2px}

.addr-card{
  padding:16px 18px;border-radius:var(--r-m);background:var(--glass);
  border:1px solid var(--stroke);display:flex;gap:14px;align-items:flex-start;
}
.addr-card .pin{
  width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--volt) 14%,transparent);color:var(--volt);
  font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;
}
.addr-card .txt{min-width:0;flex:1}
.addr-card .txt b{display:block;font-size:.95rem;margin-bottom:3px}
.addr-card .txt span{color:var(--ash);font-size:.86rem;line-height:1.55;display:block}
.addr-card .txt i{font-style:normal;color:var(--ash-2);font-size:.78rem;display:block;margin-top:5px}

/* the choice in the cart */
.dmode{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}
.dmode button{
  padding:13px 12px;border-radius:var(--r-s);cursor:pointer;text-align:left;
  background:var(--glass);border:1px solid var(--stroke);color:var(--ash);
  transition:.25s var(--ease);min-height:44px;
}
.dmode button b{display:block;color:var(--chalk);font-size:.88rem;margin-bottom:2px}
.dmode button span{font-size:.74rem}
.dmode button.on{border-color:var(--volt);background:color-mix(in srgb,var(--volt) 10%,transparent)}
.dmode button.on b{color:var(--volt)}
.delivery{margin-top:4px}
.btn.is-blocked{opacity:.55;cursor:not-allowed;box-shadow:none}
.btn.is-blocked:hover{transform:none}

/* The 1240px wrap is a reading measure — it exists so body copy doesn't run to
   14 words a line. Chrome has no reading measure, and capping the header at it
   meant a 27-inch monitor folded the panel as hard as a 13-inch laptop. The
   header gets its own, wider bound; the content keeps the narrow one. */
.nav .wrap{width:min(1560px,94vw)}

/* --------------------------------------------------------------------------
   HEADER FOLDING — the top row, measured
   The pill has folded itself for a while, but the row it sits in never did:
   below ~430px the wordmark, the panel, the sound toggle, the cart and the
   burger wanted 439px of a 369px row, so the last two were simply pushed off
   the right edge — invisible and unreachable. overflow-x:clip meant nothing
   scrolled and nothing reported, which is why every sweep called it clean.

   So the row folds too, by measurement rather than by breakpoint. Each level
   takes one more control out of the top row, and every control it takes out is
   already carried by the sheet behind the burger — nothing is ever removed,
   only moved to where there is room for it.
   -------------------------------------------------------------------------- */
.nav .wrap{overflow:visible}

/* level 1 — the signature line goes, and Cart becomes its own icon */
.nav[data-hfold] .brand .by{display:none}
.cart-btn .cart-ico{display:none;width:19px;height:19px;flex:none}
.nav[data-hfold] .cart-btn .cart-ico{display:block}
.nav[data-hfold] .cart-btn .cart-lab{display:none}
.nav[data-hfold] .cart-btn{padding:10px 12px;gap:7px}

/* Levels 2 and 3 move controls into the sheet, so they may only apply where the
   sheet exists. Above 820px the pill is the navigation and nothing may leave.
   Sound goes before the account slot: one is a preference, the other is who you
   are signed in as. */
@media (max-width:820px){
  /* level 2 — the sound toggle moves into the sheet */
  .nav:is([data-hfold="2"],[data-hfold="3"],[data-hfold="4"],[data-hfold="5"],[data-hfold="6"]) .snd{display:none}

  /* level 3 — the account slot follows it down; the sheet already carries it
     ("My account" + "Log out" are appended there by session.js) */
  .nav:is([data-hfold="3"],[data-hfold="4"],[data-hfold="5"],[data-hfold="6"])
    :is(.gnav-signin,.gnav .acct-chip,.gnav .logout-btn){display:none}
  /* with only the moon left, the panel is a lozenge around one button */
  .nav:is([data-hfold="3"],[data-hfold="4"],[data-hfold="5"],[data-hfold="6"]) .gnav{padding:4px}
}

/* levels 4 to 6 — only now does the wordmark give up height. It is the last
   thing to shrink because it is the only thing on the row that says whose
   counter this is. */
.nav:is([data-hfold="4"],[data-hfold="5"],[data-hfold="6"]) .brand img{height:24px}
.nav:is([data-hfold="5"],[data-hfold="6"]) .brand img{height:22px}
.nav:is([data-hfold="5"],[data-hfold="6"]) .wrap{gap:8px}
/* level 6 — the 320px floor (iPhone SE, Galaxy Fold shut) */
.nav[data-hfold="6"] .brand img{height:20px}
.nav[data-hfold="6"] .wrap{gap:6px}
.nav[data-hfold="6"] .nav-cta{gap:6px}
.nav[data-hfold="6"] .cart-btn{padding:9px 10px;gap:5px}
.nav[data-hfold="6"] .burger{padding:8px 4px}

/* the sound toggle inside the sheet, styled as one more row */
.snd-sheet{width:100%;background:none;border:0;border-bottom:1px solid var(--stroke);
  padding:15px 2px;display:none;align-items:center;gap:12px;cursor:pointer;
  font-family:var(--head);font-weight:600;font-size:1.02rem;color:var(--chalk);
  text-align:left}
.snd-sheet svg{width:18px;height:18px;flex:none}
html[data-sound="on"] .snd-sheet{color:var(--volt)}
@media (max-width:820px){ .snd-sheet{display:flex} }

/* At the 320px floor the burger's box is 32px wide, which is a legal layout and
   an illegal target. Grow the hit area without growing the box — the pseudo
   element is inside the button, so it takes the taps the border-box is too
   small for, and stops short of the cart beside it. */
@media (pointer:coarse){
  .burger{position:relative}
  .burger::after{content:'';position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);width:44px;height:44px}
  .nav .cart-btn{min-height:44px}
  .snd-sheet{min-height:44px}
}