/* ==========================================================================
   The Gardens 259
   Light-only by decision: food photography dies on near-black grounds, and the
   business trades 6am-4pm in daylight. The deep band colour is spent as
   structural chrome instead.
   Every colour pair below was measured, not eyeballed. Ratios in comments.
   ========================================================================== */

:root{
  color-scheme: light;

  /* GROUND */
  --bg:            #EEF1EA;
  --surface:       #FFFFFF;
  --surface-sunk:  #F6F8F3;
  --band:          #141A10;

  /* INK */
  --ink:           #101A0C;   /* 15.66:1 on --bg   AAA */
  --ink-muted:     #52604F;   /*  5.85:1 on --bg   AA  */
  --ink-faint:     #5C6A58;   /*  5.03:1 on --bg   AA  */
  --ink-inverse:   #F4F7F1;   /* 16.39:1 on --band AAA */
  --ink-inv-muted: #A8B5A4;   /*  8.28:1 on --band AAA */

  /* BRAND
     --brand is the exact green sampled from the client's logo. At 3.00:1 on
     white it can never carry white text, so it is used for graphics and for
     text on the dark band only. --primary is the same hue pushed darker until
     white text passes. */
  --brand:         #78A22F;   /*  5.91:1 on --band */
  --brand-bright:  #8FBF3A;   /*  8.17:1 on --band */
  --primary:       #4E6B1E;   /*  6.09:1 with white */
  --primary-hover: #47611B;   /*  7.01:1 with white */
  --primary-press: #3E5518;   /*  8.34:1 with white */
  --primary-tint:  #E7EFDA;

  /* ACCENT - attention, never action. Nothing you tap is amber. */
  --accent:        #E8A020;   /*  8.07:1 with --ink */
  --accent-tint:   #FBEDD2;

  /* STRUCTURE */
  --border:        #D8DED1;
  --border-strong: #78876F;

  /* STATUS */
  --success:       #4E6B1E;
  --success-tint:  #E7EFDA;
  --danger:        #A32A1F;   /*  7.22:1 with white */
  --danger-tint:   #F7E4E1;

  /* TYPE */
  --font-display:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
  --font-body:   "Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:   "Martian Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* SPACE */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;

  /* RADIUS */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:28px; --r-pill:999px;

  /* SHADOW - scarce by rule */
  --sh-1:0 1px 2px rgba(16,26,12,.06);
  --sh-2:0 4px 14px -4px rgba(16,26,12,.10);
  --sh-3:0 12px 32px -8px rgba(16,26,12,.18);
  --sh-cart:0 -6px 24px -8px rgba(16,26,12,.20);

  /* LAYOUT */
  --w-page:1240px;
  --w-menu:780px;
  --w-read:66ch;
  --gutter:20px;
  --header-h:60px;

  /* MOTION */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-pop:cubic-bezier(.34,1.26,.64,1);
  --d-1:120ms; --d-2:200ms; --d-3:300ms;

  --focus:0 0 0 2px var(--surface), 0 0 0 4px var(--primary);
  --focus-band:0 0 0 2px var(--band), 0 0 0 4px var(--brand-bright);
}
@media(min-width:768px){ :root{ --gutter:32px; --header-h:72px; } }
@media(min-width:1280px){ :root{ --gutter:48px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:1rem; line-height:1.55;
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:none; box-shadow:var(--focus); border-radius:var(--r-sm); }
.band :focus-visible{ box-shadow:var(--focus-band); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:1ms!important; animation-iteration-count:1!important;
    transition-duration:1ms!important; scroll-behavior:auto!important;
  }
  .ticker__track{ animation:none!important; }
  .ticker{ overflow-x:auto; }
}

/* --- type ---------------------------------------------------------------- */
.display,h1,h2,h3{ font-family:var(--font-display); font-weight:700; margin:0; }
.display{
  font-size:clamp(2.6rem,8vw,5rem); line-height:.94; letter-spacing:-.03em;
  font-variation-settings:"opsz" 72,"wdth" 94;
}
h1{ font-size:clamp(2rem,5vw,3rem); line-height:1.04; letter-spacing:-.025em; }
h2{ font-size:clamp(1.5rem,3.2vw,2.125rem); line-height:1.1; letter-spacing:-.02em; font-weight:600; }
h3{ font-size:1.1875rem; line-height:1.22; letter-spacing:-.01em; font-weight:600; }
p{ margin:0 0 var(--sp-4); }
.lede{ font-size:1.0625rem; color:var(--ink-muted); max-width:var(--w-read); }
.small{ font-size:.875rem; line-height:1.45; }
.micro{ font-size:.75rem; font-weight:500; letter-spacing:.02em; }
.eyebrow{
  font-family:var(--font-mono); font-size:.6875rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-muted);
  margin:0 0 var(--sp-3);
}
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.price{ font-family:var(--font-mono); font-size:.9375rem; font-weight:500; letter-spacing:.01em; }
.muted{ color:var(--ink-muted); }

/* --- layout -------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--w-page); margin-inline:auto; padding-inline:var(--gutter); }
.narrow{ max-width:var(--w-menu); }
.section{ padding-block:clamp(var(--sp-7),8vw,var(--sp-9)); }
.section--tight{ padding-block:var(--sp-7); }
.band{ background:var(--band); color:var(--ink-inverse); }
.band .muted,.band .eyebrow{ color:var(--ink-inv-muted); }
.stack>*+*{ margin-top:var(--sp-4); }
.skip{
  position:absolute; left:-9999px; top:0; background:var(--primary); color:#fff;
  padding:var(--sp-3) var(--sp-4); z-index:200; border-radius:0 0 var(--r-md) 0;
}
.skip:focus{ left:0; }

/* --- buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:48px; padding:0 var(--sp-5); border:1px solid transparent;
  border-radius:var(--r-pill); background:var(--primary); color:#fff;
  font-weight:600; font-size:.9375rem; text-decoration:none; cursor:pointer;
  transition:background var(--d-1) var(--ease-out), transform var(--d-1) var(--ease-out);
}
.btn:hover{ background:var(--primary-hover); }
.btn:active{ background:var(--primary-press); transform:translateY(1px); }
.btn--lg{ min-height:56px; font-size:1rem; padding:0 var(--sp-6); }
.btn--block{ display:flex; width:100%; }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--border-strong); }
.btn--ghost:hover{ background:var(--surface); }
.btn--on-band{ background:var(--brand-bright); color:var(--band); }
.btn--on-band:hover{ background:var(--brand); }
.btn--quiet{ background:var(--surface); color:var(--ink); border-color:var(--border); }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; }
.btn--pending{ background:var(--ink-faint); }

/* --- header -------------------------------------------------------------- */
.hdr{
  position:sticky; top:0; z-index:60; background:var(--band); color:var(--ink-inverse);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.hdr__in{
  display:flex; align-items:center; gap:var(--sp-4);
  height:var(--header-h); max-width:var(--w-page); margin-inline:auto;
  padding-inline:var(--gutter);
}
.hdr__logo{ display:flex; align-items:center; gap:var(--sp-3); text-decoration:none; margin-right:auto; }
.hdr__logo img{ height:30px; width:auto; }
.hdr__name{
  font-family:var(--font-display); font-weight:700; font-size:1.0625rem;
  letter-spacing:-.02em; white-space:nowrap;
}
.hdr__name span{ color:var(--brand-bright); }
.hdr__nav{ display:none; gap:var(--sp-5); }
@media(min-width:900px){ .hdr__nav{ display:flex; } }
.hdr__nav a{
  text-decoration:none; font-size:.9375rem; font-weight:500; color:var(--ink-inv-muted);
  padding:var(--sp-2) 0; transition:color var(--d-1);
}
.hdr__nav a:hover,.hdr__nav a[aria-current="page"]{ color:var(--ink-inverse); }
.hdr .btn{ min-height:40px; padding:0 var(--sp-4); font-size:.875rem; }

/* --- hero
   The whole photo library is 1080x1920 portrait, so a full-bleed landscape
   hero would mean upscaling or a brutal crop. A split editorial panel suits
   the source material and reads as deliberate rather than templated. --------- */
.hero{ background:var(--band); color:var(--ink-inverse); overflow:hidden; }
.hero__in{
  max-width:var(--w-page); margin-inline:auto;
  display:grid; grid-template-columns:1fr; align-items:stretch;
}
@media(min-width:900px){
  .hero__in{ grid-template-columns:1.05fr .95fr; min-height:min(78vh,680px); }
}
.hero__copy{
  padding:var(--sp-7) var(--gutter) var(--sp-6);
  display:flex; flex-direction:column; justify-content:center;
}
@media(min-width:900px){ .hero__copy{ padding-block:var(--sp-9); } }
.hero__title{ margin:0 0 var(--sp-4); }
.hero__title em{ font-style:normal; color:var(--brand-bright); }
.hero__values{
  display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3);
  font-family:var(--font-mono); font-size:.75rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-inv-muted);
  margin:0 0 var(--sp-6); padding:0; list-style:none;
}
.hero__values li{ display:flex; align-items:center; gap:var(--sp-3); }
.hero__values li+li::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--brand);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-bottom:var(--sp-5); }
.hero__media{ position:relative; min-height:56vw; }
@media(min-width:900px){ .hero__media{ min-height:0; } }
.hero__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(20,26,16,.55),transparent 45%);
}
@media(min-width:900px){
  .hero__media::after{ background:linear-gradient(to right,rgba(20,26,16,.75),transparent 32%); }
}

/* --- status strip -------------------------------------------------------- */
.status{
  display:inline-flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-2) var(--sp-4); border-radius:var(--r-pill);
  background:rgba(255,255,255,.07); font-family:var(--font-mono);
  font-size:.8125rem; letter-spacing:.04em; width:fit-content;
}
.status__dot{ width:8px; height:8px; border-radius:50%; background:var(--ink-inv-muted); flex:none; }
.status--open .status__dot{ background:var(--brand-bright); box-shadow:0 0 0 4px rgba(143,191,58,.22); }
.status--soon .status__dot{ background:var(--accent); }
.status--light{ background:var(--surface); border:1px solid var(--border); color:var(--ink); }

/* --- ticker -------------------------------------------------------------- */
.ticker{ background:var(--band); border-block:1px solid rgba(255,255,255,.08); overflow:hidden; }
.ticker__track{
  display:flex; gap:var(--sp-5); width:max-content; padding-block:var(--sp-4);
  animation:ticker 34s linear infinite; will-change:transform;
}
.ticker:hover .ticker__track,.ticker:focus-within .ticker__track{ animation-play-state:paused; }
.ticker a{
  display:flex; align-items:center; gap:var(--sp-5); text-decoration:none;
  font-family:var(--font-display); font-weight:600; letter-spacing:-.01em;
  font-size:clamp(1.25rem,3.4vw,1.75rem); color:var(--ink-inverse);
  white-space:nowrap; transition:color var(--d-1);
}
.ticker a:hover{ color:var(--brand-bright); }
.ticker a::after{ content:""; width:6px; height:6px; border-radius:50%; background:var(--brand); flex:none; }
@keyframes ticker{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* --- cards / grid -------------------------------------------------------- */
.grid{ display:grid; gap:var(--sp-4); }
@media(min-width:640px){ .grid--2{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:900px){ .grid--3{ grid-template-columns:repeat(3,1fr); } }
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  overflow:hidden;
}
.card__media{ aspect-ratio:4/5; overflow:hidden; background:var(--surface-sunk); }
.card__media img{ width:100%; height:100%; object-fit:cover; }
.card:is(a){ text-decoration:none; display:block; }
.card:is(a):hover{ border-color:var(--border-strong); }

/* Any framed photo. Without object-fit the 1080x1920 portrait sources render
   at full natural height inside the frame and you see only the top sliver. */
.media{ overflow:hidden; border-radius:var(--r-lg); background:var(--surface-sunk); }
.media img{ width:100%; height:100%; object-fit:cover; }
.media--4x5{ aspect-ratio:4/5; }
.media--16x10{ aspect-ratio:16/10; }
.media--16x11{ aspect-ratio:16/11; }
.media--4x3{ aspect-ratio:4/3; }
.card__body{ padding:var(--sp-4); }

/* featured rail - snap-scroll on mobile, grid on desktop */
.rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:70%;
  gap:var(--sp-4); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-inline:var(--gutter); margin-inline:calc(var(--gutter)*-1);
  padding-bottom:var(--sp-3); scrollbar-width:none;
}
.rail::-webkit-scrollbar{ display:none; }
.rail>*{ scroll-snap-align:start; }
@media(min-width:640px){ .rail{ grid-auto-columns:38%; } }
@media(min-width:1024px){
  .rail{
    grid-auto-flow:row; grid-template-columns:repeat(4,1fr); overflow:visible;
    padding-inline:0; margin-inline:0;
  }
}

/* --- badges -------------------------------------------------------------- */
.badges{ display:flex; flex-wrap:wrap; gap:var(--sp-2); list-style:none; margin:0; padding:0; }
.badge{
  display:inline-flex; align-items:center; gap:4px;
  font-family:var(--font-mono); font-size:.625rem; font-weight:600; letter-spacing:.08em;
  padding:3px 8px; border-radius:var(--r-pill);
  background:var(--primary-tint); color:var(--primary-press);
}
.badge--warn{ background:var(--accent-tint); color:#6B4708; }
.badge--out{ background:var(--surface-sunk); color:var(--ink-faint); }

/* --- menu ---------------------------------------------------------------- */
.menubar{
  position:sticky; top:var(--header-h); z-index:50; background:var(--bg);
  border-bottom:1px solid var(--border);
}
.menubar__row{
  display:flex; align-items:center; gap:var(--sp-3);
  max-width:var(--w-page); margin-inline:auto; padding:var(--sp-3) var(--gutter);
}
.shoppill{
  display:inline-flex; align-items:center; gap:var(--sp-2); min-height:44px;
  padding:0 var(--sp-4); border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--border-strong);
  font-size:.875rem; font-weight:600; cursor:pointer;
}
.chips{
  display:flex; gap:var(--sp-2); overflow-x:auto; scroll-snap-type:x proximity;
  padding:0 var(--gutter) var(--sp-3); scrollbar-width:none;
  max-width:var(--w-page); margin-inline:auto;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 16px,#000 calc(100% - 16px),transparent);
          mask-image:linear-gradient(to right,transparent,#000 16px,#000 calc(100% - 16px),transparent);
}
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:none; min-height:40px; padding:0 var(--sp-4); border-radius:var(--r-pill);
  border:1px solid var(--border); background:var(--surface); color:var(--ink-muted);
  font-size:.875rem; font-weight:600; white-space:nowrap; cursor:pointer;
  scroll-snap-align:center; text-decoration:none;
  display:inline-flex; align-items:center;
  transition:background var(--d-1),color var(--d-1),border-color var(--d-1);
}
.chip[aria-current="true"],.chip.is-active{
  background:var(--band); color:var(--ink-inverse); border-color:var(--band);
}

.menu{ max-width:var(--w-menu); margin-inline:auto; padding-inline:var(--gutter); }
.menu__cat{ padding-top:var(--sp-6); scroll-margin-top:calc(var(--header-h) + 118px); }
.menu__cathead{
  position:sticky; top:calc(var(--header-h) + 60px); z-index:20;
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-4);
  padding:var(--sp-3) 0; margin-bottom:var(--sp-2);
  background:linear-gradient(var(--bg) 70%,transparent);
}
.menu__count{ font-family:var(--font-mono); font-size:.75rem; color:var(--ink-faint); }

.row{
  display:grid; grid-template-columns:88px 1fr auto; gap:var(--sp-4);
  align-items:start; width:100%; text-align:left;
  padding:var(--sp-4) 0; border:0; border-top:1px solid var(--border);
  background:none; cursor:pointer;
}
.row:first-of-type{ border-top:0; }
@media(min-width:768px){ .row{ grid-template-columns:104px 1fr auto; } }

.row__media{
  width:88px; aspect-ratio:1; border-radius:var(--r-md); overflow:hidden;
  background:var(--surface-sunk); flex:none;
}
@media(min-width:768px){ .row__media{ width:104px; } }
.row__media img{ width:100%; height:100%; object-fit:cover; }
/* No photo? Keep the column reserved rather than collapsing it - otherwise half
   the menu's item names sit 120px left of the other half. Transparent, not
   grey: an empty grey square reads as a broken image. */
.row__media--empty{ background:none; }
.row__no{
  font-family:var(--font-mono); font-size:.6875rem; font-weight:700;
  letter-spacing:.04em; color:var(--ink-faint); display:block; margin-bottom:2px;
}
.row__name{ font-family:var(--font-display); font-size:1.0625rem; font-weight:600; letter-spacing:-.01em; }
.row__desc{
  font-size:.8125rem; line-height:1.45; color:var(--ink-muted); margin:var(--sp-2) 0 0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
@media(min-width:768px){ .row__desc{ -webkit-line-clamp:3; } }
.row__right{ display:flex; flex-direction:column; align-items:flex-end; gap:var(--sp-3); }
.row__add{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--border-strong);
  background:var(--surface); color:var(--primary); font-size:1.25rem; line-height:1;
  display:grid; place-items:center; cursor:pointer; flex:none;
  transition:background var(--d-1),color var(--d-1),transform var(--d-1);
}
.row__add:hover{ background:var(--primary); color:#fff; border-color:var(--primary); }
.row__add:active{ transform:scale(.92); }
.row.is-out{ opacity:.55; }
.row.is-out .row__price{ text-decoration:line-through; }

/* coffee etc: two-column tiles so 25 items is 13 rows of scroll not 25 */
.tiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-3); padding-top:var(--sp-2); }
@media(min-width:768px){ .tiles{ grid-template-columns:repeat(3,1fr); } }
.tile{
  display:flex; flex-direction:column; justify-content:space-between; gap:var(--sp-3);
  min-height:92px; padding:var(--sp-4); text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  transition:border-color var(--d-1),box-shadow var(--d-1);
}
.tile:hover{ border-color:var(--border-strong); box-shadow:var(--sh-2); }
.tile__name{ font-weight:600; font-size:.9375rem; line-height:1.25; }
.tile__foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); }

/* --- sheets -------------------------------------------------------------- */
/* An author display: value beats the `hidden` attribute's UA display:none, so
   a closed sheet stays in the hit-test layer and silently eats taps on the cart
   bar underneath it. Every component that sets display must opt back out. */
[hidden]{ display:none !important; }

.scrim{
  position:fixed; inset:0; z-index:90; background:rgba(16,26,12,.5);
  opacity:0; pointer-events:none; transition:opacity var(--d-2) var(--ease-out);
}
.scrim.is-open{ opacity:1; pointer-events:auto; }
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  max-height:92dvh; display:flex; flex-direction:column;
  background:var(--surface); border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:var(--sh-3); transform:translateY(101%);
  transition:transform var(--d-3) var(--ease-out);
}
.sheet.is-open{ transform:translateY(0); }
@media(min-width:768px){
  .sheet{
    left:50%; right:auto; bottom:auto; top:50%; width:min(560px,92vw);
    border-radius:var(--r-xl); transform:translate(-50%,-45%) scale(.97); opacity:0;
    max-height:88dvh;
  }
  .sheet.is-open{ transform:translate(-50%,-50%) scale(1); opacity:1; }
}
.sheet__grab{ width:40px; height:4px; border-radius:2px; background:var(--border); margin:var(--sp-3) auto 0; flex:none; }
@media(min-width:768px){ .sheet__grab{ display:none; } }
.sheet__head{
  display:flex; align-items:flex-start; gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5) var(--sp-3); flex:none;
}
.sheet__title{ flex:1; }
/* Sheet headings take focus on open so screen readers announce them. They are
   not interactive, so the visible ring just looks like a rendering fault. */
.sheet__title h2:focus{ outline:none; box-shadow:none; }
.sheet__close{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--border);
  background:var(--surface); cursor:pointer; display:grid; place-items:center; flex:none;
}
.sheet__body{ overflow-y:auto; padding:0 var(--sp-5) var(--sp-4); -webkit-overflow-scrolling:touch; }
.sheet__foot{
  flex:none; padding:var(--sp-4) var(--sp-5);
  padding-bottom:calc(var(--sp-4) + env(safe-area-inset-bottom));
  border-top:1px solid var(--border); background:var(--surface);
  display:flex; align-items:center; gap:var(--sp-3);
}
.sheet__hero{ aspect-ratio:16/10; overflow:hidden; border-radius:var(--r-md); margin-bottom:var(--sp-4); background:var(--surface-sunk); }
.sheet__hero img{ width:100%; height:100%; object-fit:cover; }
.sheet__why{
  font-size:.8125rem; color:var(--primary-press); background:var(--primary-tint);
  border-radius:var(--r-sm); padding:var(--sp-2) var(--sp-3); margin-bottom:var(--sp-2);
}

/* --- modifier sets ------------------------------------------------------- */
.modset{ border-top:1px solid var(--border); padding:var(--sp-4) 0; margin:0; border-inline:0; border-bottom:0; }
.modset__legend{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3);
  width:100%; padding:0;
}
.modset__name{ font-weight:600; font-size:.9375rem; }
.modset__state{ font-family:var(--font-mono); font-size:.6875rem; color:var(--ink-faint); letter-spacing:.04em; }
.modset__req{ color:var(--danger); }
.opt{
  display:flex; align-items:center; gap:var(--sp-3); min-height:52px;
  padding:var(--sp-2) 0; cursor:pointer;
}
.opt input{ width:22px; height:22px; accent-color:var(--primary); flex:none; margin:0; cursor:pointer; }
.opt__name{ flex:1; font-size:.9375rem; }
.opt__price{ font-family:var(--font-mono); font-size:.8125rem; color:var(--ink-muted); }
.opt input:disabled+.opt__name{ color:var(--ink-faint); }

.stepper{ display:inline-flex; align-items:center; gap:var(--sp-2); }
.stepper button{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--border-strong);
  background:var(--surface); font-size:1.125rem; cursor:pointer; display:grid; place-items:center;
}
.stepper output{ font-family:var(--font-mono); font-weight:600; min-width:2ch; text-align:center; }

/* --- cart ---------------------------------------------------------------- */
.cartbar{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  padding:var(--sp-3) var(--gutter);
  padding-bottom:calc(var(--sp-3) + env(safe-area-inset-bottom));
  background:var(--band); box-shadow:var(--sh-cart);
  transform:translateY(110%); transition:transform var(--d-3) var(--ease-out);
}
.cartbar.is-open{ transform:translateY(0); }
.cartbar__btn{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  width:100%; max-width:var(--w-menu); margin-inline:auto; min-height:52px;
  padding:0 var(--sp-5); border:0; border-radius:var(--r-pill);
  background:var(--brand-bright); color:var(--band); font-weight:700; cursor:pointer;
}
.cartline{
  display:grid; grid-template-columns:1fr auto; gap:var(--sp-3);
  padding:var(--sp-4) 0; border-top:1px solid var(--border);
}
.cartline__mods{ display:block; font-size:.8125rem; color:var(--ink-muted); margin-top:2px; }
.cartrow{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:var(--sp-4); background:var(--surface-sunk); border-radius:var(--r-md);
  margin-bottom:var(--sp-3);
}
/* These stack. As inline spans they render as "Pick up fromGeorge Street". */
.cartrow__label{ display:block; font-size:.8125rem; color:var(--ink-muted); }
.cartrow__value{ display:block; font-weight:600; font-size:.9375rem; }
.linkish{ background:none; border:0; padding:0; color:var(--primary); font-weight:600; font-size:.875rem; cursor:pointer; text-decoration:underline; }

/* --- forms --------------------------------------------------------------- */
.field{ margin-bottom:var(--sp-4); }
.field label{ display:block; font-size:.8125rem; font-weight:600; margin-bottom:var(--sp-2); }
.field input,.field textarea,.field select{
  width:100%; min-height:52px; padding:var(--sp-3) var(--sp-4);
  font-family:inherit; font-size:1rem;   /* 16px floor stops iOS zooming */
  background:var(--surface); color:var(--ink);
  border:1px solid var(--border-strong); border-radius:var(--r-md);
}
.field textarea{ min-height:120px; resize:vertical; padding-top:var(--sp-3); }
.field input:focus-visible,.field textarea:focus-visible{ box-shadow:var(--focus); }
.field__hint{ font-size:.75rem; color:var(--ink-faint); margin-top:var(--sp-2); }
.err{
  background:var(--danger-tint); color:var(--danger); border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4); font-size:.875rem; margin-bottom:var(--sp-3);
}
.notice{
  background:var(--accent-tint); color:#5C3D06; border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4); font-size:.875rem;
}

/* --- slots --------------------------------------------------------------- */
.slotdays{ display:flex; gap:var(--sp-2); margin-bottom:var(--sp-3); flex-wrap:wrap; }
.slotgrid{ display:flex; gap:var(--sp-2); overflow-x:auto; padding-bottom:var(--sp-2); scrollbar-width:none; }
.slotgrid::-webkit-scrollbar{ display:none; }
.slot{
  flex:none; min-height:44px; padding:0 var(--sp-4); border-radius:var(--r-pill);
  border:1px solid var(--border); background:var(--surface);
  font-family:var(--font-mono); font-size:.8125rem; cursor:pointer;
}
.slot[aria-pressed="true"]{ background:var(--band); color:var(--ink-inverse); border-color:var(--band); }

/* --- footer -------------------------------------------------------------- */
.ftr{ background:var(--band); color:var(--ink-inverse); padding-block:var(--sp-8) var(--sp-6); }
.ftr__grid{ display:grid; gap:var(--sp-6); }
@media(min-width:768px){ .ftr__grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px){ .ftr__grid{ grid-template-columns:1.2fr 1fr 1fr 1fr; } }
.ftr a{ color:var(--ink-inverse); text-decoration:none; }
.ftr a:hover{ text-decoration:underline; }
.ftr__list{ list-style:none; margin:0; padding:0; }
.ftr__list li{ margin-bottom:var(--sp-2); }
.ftr__list a{ display:inline-flex; align-items:center; min-height:44px; }
.ftr__rule{ border:0; border-top:1px solid rgba(255,255,255,.12); margin:var(--sp-6) 0 var(--sp-4); }
.ftr__fine{ display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-5); font-size:.75rem; color:var(--ink-inv-muted); }
.ftr__fine a{ color:var(--ink-inv-muted); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.devbar{
  background:var(--accent); color:#3D2E04; text-align:center;
  padding:var(--sp-2) var(--gutter); font-family:var(--font-mono);
  font-size:.625rem; letter-spacing:.06em; text-transform:uppercase;
  white-space:nowrap; overflow-x:auto; scrollbar-width:none;
}
.devbar::-webkit-scrollbar{ display:none; }