/* ==========================================================================
   Yaposhkin Sushi - storefront
   ========================================================================== */

/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body[data-locked] { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
dialog { border: 0; padding: 0; color: inherit; }
/* display:flex on .iconbtn / .steps__nav would otherwise beat the attribute */
[hidden] { display: none !important; }

/* Selected text in the brand rather than the browser's blue. A tint, so the
   ink underneath keeps its own contrast in both themes. */
::selection { background: color-mix(in srgb, var(--accent) 38%, transparent); }

:focus-visible {
  outline: 2px solid var(--accent-quiet);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Horizontal scrollers carry tabindex so a keyboard can reach and scroll them;
   the ring sits inside so it is not clipped by the scroll container. */
.rail__scroll:focus-visible, .reel__row:focus-visible, .reviews__row:focus-visible {
  outline-offset: -3px;
}

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; top: var(--s-2); left: var(--s-2); z-index: var(--z-toast);
  padding: var(--s-2) var(--s-4); background: var(--accent); color: var(--accent-ink);
  border-radius: var(--r-pill); font-weight: 600; transform: translateY(-160%);
  transition: transform var(--t-base) var(--ease);
}
.skip:focus { transform: translateY(0); }

/* --- type ----------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.04;
  text-wrap: balance;
}
h3, h4 { letter-spacing: -0.018em; line-height: 1.18; }
p { text-wrap: pretty; }

.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 46ch;
}
.eyebrow {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-quiet);
}
.jp {
  font-size: 0.7rem;
  letter-spacing: 0.34em;
  color: var(--ink-3);
  font-weight: 500;
}

/* --- layout --------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }
/* Jumping to a section must not park its heading under the sticky nav. */
#menu, #delivery, #visit, .reel { scroll-margin-top: calc(var(--nav-h) + var(--s-4)); }
/* Section headings sit one step under the menu, which is the main event. */
.section > .wrap > h2, .section h2 { font-size: var(--step-3); }
.section--ice { background: var(--ice); }

.icon { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }
.icon--s { width: 1em; height: 1em; }

/* --- controls -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-5);
  border-radius: var(--r-pill);
  font-weight: 600; font-size: var(--step-0); letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.btn:active { transform: scale(0.975); }
/* A disabled-looking button still receives the tap, so it can explain itself
   instead of silently eating the press. Only a truly inert one is blocked. */
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.btn[aria-disabled='true'] { opacity: 0.5; }
.btn[aria-disabled='true']:active { transform: none; }

/* Cyan at full strength carries an ink label: 6.2:1. White would be 2.3:1. */
.btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--e-1); }
.btn--primary:hover { background: var(--brand-400); box-shadow: var(--e-2); }

.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--brand-900); }

.btn--ghost { border: 1.5px solid var(--line-2); color: var(--ink); }
.btn--ghost:hover { border-color: var(--accent); background: var(--accent-soft); }

.btn--quiet { color: var(--ink-2); padding-inline: var(--s-3); }
.btn--quiet:hover { color: var(--ink); background: var(--ice-2); }

.btn--block { width: 100%; }
.btn--lg { min-height: 56px; padding-inline: var(--s-6); font-size: var(--step-1); }

.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-pill); color: var(--ink-2);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.iconbtn:hover { background: var(--ice-2); color: var(--ink); }

/* Segmented control: the delivery/pickup decision, used in hero, bar and checkout */
.seg {
  display: inline-flex; padding: 4px; gap: 2px;
  background: var(--ice-2); border-radius: var(--r-pill);
}
.seg__btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 40px; padding: 0 var(--s-4);
  border-radius: var(--r-pill); font-weight: 600; font-size: var(--step--1);
  color: var(--ink-2); white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
.seg__btn[aria-pressed='true'] { color: var(--accent-ink); background: var(--accent); box-shadow: var(--e-1); }
.seg--lg .seg__btn { min-height: 46px; padding-inline: var(--s-5); font-size: var(--step-0); }

.field { display: grid; gap: var(--s-2); }
.field > label { font-size: var(--step--1); font-weight: 600; color: var(--ink-2); }
.input, .textarea, .select {
  width: 100%; min-height: 48px; padding: var(--s-3) var(--s-4);
  background: var(--sheet); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--r-input);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.textarea { min-height: 84px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:focus, .textarea:focus, .select:focus {
  outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring);
}
.field__hint { font-size: var(--step--1); color: var(--ink-3); }
/* A label for a box Clover fills: <label for> cannot point at a div. */
.field__label { font-size: var(--step--1); font-weight: 600; color: var(--ink-2); }
.field__err { font-size: var(--step--1); color: var(--danger); font-weight: 500; display: none; }
.field[data-invalid] .input, .field[data-invalid] .textarea { border-color: var(--danger); }
.field[data-invalid] .field__err { display: block; }

/* --- nav ------------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  height: var(--nav-h);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.nav[data-stuck] { border-bottom-color: var(--line); }

/* On a phone the nav plus the order bar were holding a quarter of the screen
   while someone scrolled ninety menu rows. Scrolling down gives the nav back
   and the order bar takes its place; scrolling up returns it immediately. */
@media (max-width: 760px) {
  .nav {
    transition: transform var(--t-base) var(--ease),
                border-color var(--t-base) var(--ease);
  }
  body[data-nav-away] .nav { transform: translateY(-100%); }
  body[data-nav-away] .orderbar { top: 0; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--paper); backdrop-filter: none; }
}
.nav__in {
  height: 100%; display: flex; align-items: center; gap: var(--s-5);
  width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
}
.brand { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.brand__mark { width: 38px; height: 38px; border-radius: var(--r-pill); }
.brand__name {
  font-family: var(--font-display); font-weight: 800; font-size: 1.06rem;
  letter-spacing: -0.03em; line-height: 1;
}
.brand__sub { display: block; font-family: var(--font-text); font-size: 0.64rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); margin-top: 2px; }

.nav__links { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.nav__link {
  padding: var(--s-2) var(--s-3); border-radius: var(--r-pill);
  font-size: var(--step--1); font-weight: 600; color: var(--ink-2); text-decoration: none;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav__link:hover { color: var(--ink); background: var(--ice-2); }
.nav__end { display: flex; align-items: center; gap: var(--s-2); flex: none; }

/* Below the links breakpoint the page IS the menu, so the in-page nav goes away
   and the sticky order bar plus the bottom order bar carry navigation. */
@media (max-width: 760px) {
  .nav__links { display: none; }
  .nav__in { justify-content: space-between; gap: var(--s-3); }
  .nav__end { margin-left: auto; }
}
@media (max-width: 430px) {
  .brand__sub { display: none; }
  .nav__call { display: none; }
  .brand__name { font-size: 1rem; }
  .cartbtn { padding-inline: var(--s-3); }
}

.cartbtn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 44px; padding: 0 var(--s-4) 0 var(--s-4);
  border-radius: var(--r-pill); background: var(--ink); color: var(--paper);
  font-weight: 600; font-size: var(--step--1);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.cartbtn:hover { background: var(--brand-900); }
.cartbtn:active { transform: scale(0.96); }
.cartbtn__count {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; font-size: 0.75rem; font-weight: 700;
}
.cartbtn[data-empty] .cartbtn__count { display: none; }
.cartbtn.is-bump { animation: bump 380ms var(--ease); }
@keyframes bump { 30% { transform: scale(1.09); } 60% { transform: scale(0.97); } }

/* --- hero: asymmetric split ------------------------------------------------ */
.hero { position: relative; padding-top: clamp(2rem, 1rem + 4vw, 4.5rem); padding-bottom: clamp(3rem, 2rem + 4vw, 5rem); overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60rem 34rem at 78% 8%, var(--glow-1), transparent 62%),
    radial-gradient(44rem 30rem at 4% 76%, var(--glow-2), transparent 60%);
}
.hero__grid {
  display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); }
}
.hero h1 { font-size: var(--step-5); font-weight: 800; letter-spacing: -0.04em; }
.hero h1 em { font-style: normal; color: var(--accent-quiet); }
.hero__lede { margin-top: var(--s-5); }
.hero__cta { margin-top: var(--s-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }

/* The footage is vertical, so the frame is 4:5, capped so it does not tower
   over the headline beside it. */
.hero__media { position: relative; width: min(100%, 440px); justify-self: center; }
.hero__media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--r-panel); box-shadow: var(--e-3);
}
.hero__badge {
  position: absolute; left: clamp(-0.5rem, -1vw, -1.5rem); bottom: clamp(-1rem, -2vw, -1.75rem);
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-5) var(--s-3) var(--s-3);
  background: var(--sheet); border-radius: var(--r-pill); box-shadow: var(--e-2);
  border: 1px solid var(--line);
}
.hero__badge b { font-family: var(--font-display); font-size: var(--step-2); letter-spacing: -0.03em; line-height: 1; }
.hero__badge span { display: block; font-size: var(--step--1); color: var(--ink-3); line-height: 1.3; }
.hero__badge-mark {
  width: 46px; height: 46px; border-radius: var(--r-pill); background: var(--accent);
  display: grid; place-items: center; color: var(--accent-ink);
}
/* On a phone the frame is small enough that the badge was eating half the shot. */
@media (max-width: 560px) {
  .hero__badge {
    left: var(--s-3); bottom: var(--s-3);
    gap: var(--s-2); padding: var(--s-2) var(--s-4) var(--s-2) var(--s-2);
  }
  .hero__badge b { font-size: var(--step-1); }
  .hero__badge-mark { width: 32px; height: 32px; }
  .hero__badge-mark .icon { width: 1rem; height: 1rem; }
}

/* --- hero video ------------------------------------------------------------- */
/* The poster is the LCP element and stays in flow; the video lays over it, so a
   refused autoplay or a paused clip simply leaves the photograph showing. */
.hero__frame {
  position: relative; border-radius: var(--r-panel); overflow: hidden;
  box-shadow: var(--e-3); background: var(--ice);
  isolation: isolate;
}
.hero__poster, .hero__video {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
}
.hero__video {
  position: absolute; inset: 0; height: 100%;
  opacity: 0; transition: opacity 600ms var(--ease);
}
.hero__video[data-playing] { opacity: 1; }

/* WCAG 2.2.2: looping motion past five seconds needs a stop. One control for the
   whole page, parked on the hero where the motion starts. */
.motion {
  position: absolute; left: var(--s-3); top: var(--s-3); z-index: 2;
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 36px; padding: 0 var(--s-3) 0 var(--s-3);
  border-radius: var(--r-pill);
  /* This control always sits on video, so it does not follow the page theme:
     a dark scrim with white text reads over any frame. */
  background: rgb(6 22 28 / 0.62);
  color: #fff;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: var(--step--1); font-weight: 600;
  transition: background var(--t-base) var(--ease);
}
.hero__frame:hover .motion,
.motion:focus-visible,
.motion:hover { background: rgb(6 22 28 / 0.9); }
.motion:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 0;
  box-shadow: 0 0 0 4px rgb(6 22 28 / 0.9);
}
@media (pointer: coarse) { .motion { min-height: 44px; } }

/* --- reel band -------------------------------------------------------------- */
/* The source footage is vertical, so the cards are vertical. Cropping phone video
   into a landscape strip throws away most of the frame. */
.reel { padding-block: clamp(3rem, 2rem + 4vw, 5rem) 0; }
.reel__head h2 { font-size: var(--step-3); }
.reel__row {
  display: flex; gap: var(--s-4);
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  scroll-padding-inline: var(--gutter);
  padding: var(--s-6) var(--gutter) var(--s-4);
  margin-inline: auto; max-width: var(--max);
}
.reel__row::-webkit-scrollbar { display: none; }
.reel__card {
  flex: 0 0 clamp(190px, 46vw, 260px); scroll-snap-align: start;
  margin: 0; display: grid; gap: var(--s-3);
}
.reel__frame {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-card); background: var(--ice);
  border: 1px solid var(--line);
}
.reel__frame img, .reel__card video {
  display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover;
}
.reel__card video {
  position: absolute; inset: 0; height: 100%;
  opacity: 0; transition: opacity 500ms var(--ease);
}
.reel__card video[data-playing] { opacity: 1; }

/* Wide screens get an even grid that fills the container, and a shallower crop
   so four vertical clips do not turn the band into a wall. */
@media (min-width: 900px) {
  .reel__row {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible; mask-image: none;
  }
  .reel__card { flex: none; }
  .reel__frame img, .reel__card video { aspect-ratio: 4 / 5; }
}
.reel__card figcaption { font-size: var(--step--1); color: var(--ink-3); }

/* The fade says "this keeps going sideways". It belongs on every width where
   the row actually scrolls, which is everything below the grid breakpoint. */
@supports (mask-image: linear-gradient(90deg, #000, transparent)) {
  @media (max-width: 899px) {
    .reel__row { mask-image: linear-gradient(90deg, #000 0 calc(100% - 3rem), transparent 100%); }
    .reel__row[data-end] { mask-image: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
  .motion { opacity: 1; transform: none; }
}

/* --- facts strip ----------------------------------------------------------- */
.facts { border-block: 1px solid var(--line); background: var(--sheet); }
.facts__in {
  display: grid; gap: 1px; background: var(--line);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 760px) { .facts__in { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fact {
  background: var(--sheet); padding: var(--s-5) var(--s-4);
  display: flex; align-items: flex-start; gap: var(--s-3);
}
.fact svg { color: var(--accent-quiet); margin-top: 2px; }
.fact b { display: block; font-weight: 600; font-size: var(--step-0); letter-spacing: -0.01em; }
.fact span { display: block; font-size: var(--step--1); color: var(--ink-3); }

/* --- menu ------------------------------------------------------------------ */
.menu { padding-top: var(--s-7); }
.menu__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4); }
.menu__head h2 { font-size: var(--step-4); }
.menu__mode { display: none; margin-top: var(--s-5); }

/* The line that tells you what the delivery/pickup choice just did. */
.mode-note {
  display: flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-3);
  font-size: var(--step--1); color: var(--ink-2);
}
.mode-note svg { color: var(--accent-quiet); flex: none; }
.mode-note[data-flash] span { animation: note-in 320ms var(--ease); }
@keyframes note-in { from { opacity: 0; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .mode-note[data-flash] span { animation: none; } }
@media (max-width: 620px) { .menu__mode { display: inline-flex; } }

/* order bar: sticky under the nav, carries the delivery decision + search */
.orderbar {
  position: sticky; top: var(--nav-h); z-index: var(--z-rail);
  transition: top var(--t-base) var(--ease);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--line);
  margin-top: var(--s-5);
}
@media (prefers-reduced-transparency: reduce) { .orderbar { background: var(--paper); backdrop-filter: none; } }
.orderbar__in {
  width: 100%; max-width: var(--max); margin-inline: auto; padding: var(--s-3) var(--gutter);
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
}
.search { position: relative; flex: 1 1 200px; min-width: 0; max-width: 340px; }
.search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.search .input { padding-left: 42px; min-height: 44px; border-radius: var(--r-pill); }
.search__clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; }

/* On a phone the sticky chrome has to stay small. The delivery/pickup choice
   already lives in the hero and in checkout, so the bar keeps only search. */
@media (max-width: 620px) {
  .orderbar__in { padding-block: var(--s-2); }
  .orderbar__in .seg { display: none; }
  .search { max-width: none; flex: 1 1 100%; }
  .rail__scroll { padding-block: var(--s-2); }
}

.active-filter {
  display: inline-flex; align-items: center; gap: var(--s-1);
  min-height: 36px; padding: 0 var(--s-1) 0 var(--s-3);
  border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent-soft-ink);
  border: 1px solid var(--accent); font-size: var(--step--1); font-weight: 600;
}
.active-filter button {
  width: 30px; height: 30px; border-radius: var(--r-pill);
  display: grid; place-items: center; color: inherit;
}
.active-filter button:hover { background: var(--accent); color: var(--accent-ink); }
@media (pointer: coarse) { .active-filter { min-height: 44px; } .active-filter button { width: 38px; height: 38px; } }

/* --- legal pages ----------------------------------------------------------- */
/* Long-form reading: one column, generous measure, no decoration. */
.legal { max-width: 46rem; }
.legal h1 { font-size: var(--step-3); letter-spacing: -0.03em; }
.legal h1 + .lede { margin-top: var(--s-3); }
.legal h2 {
  font-size: var(--step-1); margin-top: var(--s-7); margin-bottom: var(--s-3);
  letter-spacing: -0.02em;
}
.legal p, .legal li { color: var(--ink-2); line-height: 1.65; max-width: 64ch; }
.legal p { margin-top: var(--s-3); }
.legal ul { margin-top: var(--s-3); padding-left: var(--s-5); display: grid; gap: var(--s-2); }
.legal li { list-style: disc; }
.legal b { color: var(--ink); font-weight: 600; }
.legal a { color: var(--accent-quiet); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--ink); }
.legal hr {
  margin: var(--s-8) 0; border: 0; border-top: 1px solid var(--line);
}
.legal__nav {
  margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line);
  font-weight: 600;
}

/* --- address suggestions --------------------------------------------------- */
/* Drawn by us, not by Google's widget, so it carries our type and can be
   driven from the keyboard. The field is the positioning context. */
.field { position: relative; }
.suggest {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% - var(--s-5));
  margin: var(--s-1) 0 0; padding: var(--s-1); list-style: none;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-input);
  box-shadow: var(--e-2); max-height: 15rem; overflow-y: auto;
}
.suggest[hidden] { display: none; }
.suggest__item {
  display: grid; gap: 2px; padding: var(--s-2) var(--s-3);
  border-radius: calc(var(--r-input) - 4px); cursor: pointer;
}
.suggest__item[aria-selected='true'], .suggest__item:hover { background: var(--accent-soft); }
.suggest__main { font-weight: 600; font-size: var(--step--1); color: var(--ink); }
.suggest__sub { font-size: var(--step--1); color: var(--ink-3); }
@media (pointer: coarse) { .suggest__item { padding-block: var(--s-3); } }

/* --- in-page payment: Clover's iframe fields, dressed as our inputs -------- */
.pay { display: grid; gap: var(--s-4); }
.pay__wallets { display: grid; gap: var(--s-3); }
.pay__wallets[hidden] { display: none; }
/* Apple's and Google's buttons draw themselves inside these; the box sets the
   size, and the SDK's iframe is height:100% of it. 48px matches the card
   fields, 5px radius is Apple's own floor. */
.pay__wallet { height: 48px; border-radius: 5px; overflow: hidden; }
.pay__wallet:empty { display: none; }
.pay__wallet iframe { display: block; width: 100%; height: 100%; }
.pay__or {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--step--1); color: var(--ink-3);
}
.pay__or::before, .pay__or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.pay__or[hidden] { display: none; }
.pay__row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-3); }
/* Clover's SDK sets height:100% on its iframe inline, and 100% of an
   auto-height box is the browser's 150px default. The box has a real height. */
.pay-field {
  height: 48px; padding: 0 var(--s-3); box-sizing: border-box;
  border: 1.5px solid var(--line); border-radius: var(--r-input);
  background: var(--paper); overflow: hidden;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.pay-field iframe { display: block; width: 100%; height: 100%; }
.pay-field[data-focus] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pay-field[data-invalid] { border-color: var(--danger); }
.pay__err { font-size: var(--step--1); color: var(--danger); font-weight: 500; min-height: 1.2em; }
.pay__err:empty { display: none; }
.pay__secure { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--step--1); color: var(--ink-3); }
.pay__secure .icon { flex: none; margin-top: 2px; }

/* tips: chips, plus a custom amount that opens in place */
.tips { display: grid; gap: var(--s-3); }
.tips__head { display: flex; justify-content: space-between; align-items: baseline; }
.tips__head h4 { font-size: var(--step-0); font-weight: 700; }
.tips__head span { font-size: var(--step--1); color: var(--ink-3); }
.tips__row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tips .chip { min-height: 40px; padding-inline: var(--s-3); }
.tips .chip small { font-weight: 500; color: var(--ink-3); margin-left: var(--s-1); }
.tips .chip[aria-pressed='true'] small { color: inherit; }
.tips__custom { display: flex; gap: var(--s-2); align-items: center; }
.tips__custom .input { max-width: 140px; }
@media (pointer: coarse) { .tips .chip { min-height: 44px; } }

/* category rail */
.rail { border-bottom: 1px solid var(--line); background: var(--paper); }
.rail__scroll {
  display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none;
  width: 100%; max-width: var(--max); margin-inline: auto; padding: var(--s-3) var(--gutter);
  scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter);
}
.rail__scroll::-webkit-scrollbar { display: none; }
@supports (mask-image: linear-gradient(90deg, #000, transparent)) {
  .rail__scroll {
    mask-image: linear-gradient(90deg, #000 0 calc(100% - 3rem), transparent 100%);
  }
  .rail__scroll[data-end] { mask-image: none; }
}
.rail__btn {
  flex: none; scroll-snap-align: start;
  min-height: 40px; padding: 0 var(--s-4); border-radius: var(--r-pill);
  font-size: var(--step--1); font-weight: 600; color: var(--ink-2);
  border: 1.5px solid var(--line); background: var(--sheet); white-space: nowrap;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.rail__btn:hover { border-color: var(--line-2); color: var(--ink); }
.rail__btn[aria-current='true'] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ingredient filters */
.filters { display: flex; flex-wrap: wrap; gap: var(--s-2); padding-block: var(--s-5) var(--s-4); }
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 36px; padding: 0 var(--s-3); border-radius: var(--r-pill);
  font-size: var(--step--1); font-weight: 600; color: var(--ink-2);
  border: 1.5px solid var(--line); background: transparent;
  transition: all var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--line-2); color: var(--ink); }
.chip[aria-pressed='true'] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-soft-ink); }

.menu__meta { font-size: var(--step--1); color: var(--ink-3); padding-bottom: var(--s-4); }

/* category group + grid */
.group { scroll-margin-top: calc(var(--nav-h) + 118px); padding-top: var(--s-6); }
.group__head { display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; padding-bottom: var(--s-5); }
.group__head h3 { font-size: var(--step-3); }
.group__head p { font-size: var(--step-0); color: var(--ink-3); max-width: 44ch; }

.grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr));
}

/* item card */
.card {
  display: flex; flex-direction: column; text-align: left; cursor: pointer;
  background: var(--sheet); border: 1px solid var(--line);
  border-radius: var(--r-card); overflow: hidden;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--e-2); border-color: var(--line-2); }
.card:active { transform: translateY(-1px) scale(0.993); }
.card__media { position: relative; background: var(--ice); aspect-ratio: 1 / 1; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.card:hover .card__media img { transform: scale(1.045); }
.card__body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.card__name { font-family: var(--font-display); font-weight: 700; font-size: var(--step-0); letter-spacing: -0.018em; line-height: 1.25; }
.card__desc {
  font-size: var(--step--1); color: var(--ink-3); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card__foot { margin-top: auto; padding-top: var(--s-2); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.card__price { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); letter-spacing: -0.03em; }
.card__spec { font-size: var(--step--1); color: var(--ink-3); }
.card__add {
  min-height: 38px; padding: 0 var(--s-3) 0 var(--s-2);
  border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink);
  display: inline-flex; align-items: center; gap: 3px; flex: none;
  font-size: var(--step--1); font-weight: 700; letter-spacing: -0.01em;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.card__add:hover { background: var(--brand-400); }
.card__add:active { transform: scale(0.94); }
.card__qty {
  position: absolute; top: var(--s-3); left: var(--s-3);
  min-width: 28px; height: 28px; padding: 0 8px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center; font-size: 0.78rem; font-weight: 700;
  box-shadow: var(--e-1);
}

/* Phones get the list-row layout every ordering app uses: a 90 item grid of
   full-bleed cards is a 50,000px scroll, the same menu as rows is a fifth of that. */
@media (max-width: 620px) {
  .grid { grid-template-columns: 1fr; gap: var(--s-3); }
  .card { flex-direction: row; align-items: stretch; }
  .card__media { width: 104px; flex: none; aspect-ratio: 1; }
  .card:hover .card__media img { transform: none; }
  .card__body { padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3); gap: var(--s-1); }
  .card__desc { -webkit-line-clamp: 2; }
  .card__foot { padding-top: var(--s-2); }
  .card__price { font-size: var(--step-0); }
  .card .card__spec { display: none; }
  .card__add { min-height: 36px; padding-inline: var(--s-2) var(--s-3); }
  .card__qty { top: var(--s-2); left: var(--s-2); min-width: 24px; height: 24px; font-size: 0.72rem; }
}

/* An item Clover is not currently selling stays visible and readable, but
   cannot be added and does not pretend otherwise. */
.card[data-sold-out] { opacity: 0.62; }
.card[data-sold-out] .card__media img { filter: grayscale(0.7); }
.card[data-sold-out] .card__spec { color: var(--danger); font-weight: 600; }

/* skeleton */
.sk { border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line); background: var(--sheet); }
.sk__media { aspect-ratio: 1 / 1; }
.sk__line { height: 12px; border-radius: 6px; margin: var(--s-3) var(--s-4); }
.sk__line:last-child { width: 45%; }
.sk__media, .sk__line {
  background: linear-gradient(90deg, var(--ice) 25%, var(--ice-2) 37%, var(--ice) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -135% 0; } }

/* empty state */
.empty { padding: var(--s-9) var(--s-4); text-align: center; display: grid; gap: var(--s-4); justify-items: center; }
.empty svg { width: 44px; height: 44px; color: var(--ink-3); }
.empty h3 { font-size: var(--step-2); }
.empty p { color: var(--ink-3); max-width: 38ch; }

/* --- how it gets to you ---------------------------------------------------- */
.steps { display: grid; gap: var(--s-5); margin-top: var(--s-7); }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }
.step { display: grid; gap: var(--s-3); }
.step__mark {
  width: 56px; height: 56px; border-radius: var(--r-pill);
  background: var(--sheet); color: var(--accent-quiet);
  border: 1px solid var(--line);
  box-shadow: var(--e-1);
  display: grid; place-items: center;
}
.step__mark svg { width: 26px; height: 26px; }
.step h3 { font-size: var(--step-2); }
.step p { color: var(--ink-2); max-width: 36ch; }

/* --- reviews: scroll-snap row ---------------------------------------------- */
.reviews__row {
  display: flex; gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-block: var(--s-6) var(--s-4); margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter); scrollbar-width: none;
}
.reviews__row::-webkit-scrollbar { display: none; }
.review {
  flex: 0 0 min(88vw, 380px); scroll-snap-align: start;
  background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-panel);
  padding: var(--s-5); display: grid; gap: var(--s-4); align-content: start;
}
.review__stars { display: flex; gap: 3px; color: var(--brand-600); }
.review__stars svg { width: 17px; height: 17px; }
.review p { font-size: var(--step-1); line-height: 1.45; letter-spacing: -0.012em; }
.review cite { font-style: normal; font-size: var(--step--1); color: var(--ink-3); }

/* --- visit ------------------------------------------------------------------ */
.visit__grid { display: grid; gap: var(--s-6); margin-top: var(--s-6); }
@media (min-width: 900px) { .visit__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--s-8); align-items: start; } }
.visit__note {
  display: flex; gap: var(--s-3); padding: var(--s-4);
  background: var(--accent-soft); border: 1px solid var(--accent-soft-line);
  border-radius: var(--r-card); color: var(--accent-soft-ink);
}
.visit__note svg { flex: none; margin-top: 2px; }
.hours { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.hours div { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) var(--s-4); background: var(--sheet); }
.hours div + div { border-top: 1px solid var(--line); }
.hours dt { color: var(--ink-2); }
.hours dd { font-weight: 600; }
.hours div[data-today] { background: var(--accent-soft); }
.map {
  display: block; border-radius: var(--r-panel); overflow: hidden; border: 1px solid var(--line);
  aspect-ratio: 4 / 3; background: var(--ice);
}
.map img { width: 100%; height: 100%; object-fit: cover; }

/* --- footer ----------------------------------------------------------------- */
.foot { background: var(--foot-bg); color: var(--brand-100); padding-block: var(--s-8) var(--s-6); margin-top: var(--s-8); }
.foot__grid { display: grid; gap: var(--s-6); }
@media (min-width: 760px) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-7); } }
.foot a { color: var(--brand-100); text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.foot h4 { font-size: var(--step-0); color: #fff; margin-bottom: var(--s-3); }
.foot li + li { margin-top: var(--s-2); }
.foot__legal {
  margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid rgb(255 255 255 / 0.12);
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between;
  font-size: var(--step--1); color: var(--brand-200);
}
.foot__social { display: flex; gap: var(--s-2); margin-top: var(--s-4); }
.foot__social a {
  width: 44px; height: 44px; border-radius: var(--r-pill); display: grid; place-items: center;
  background: rgb(255 255 255 / 0.08); transition: background var(--t-fast) var(--ease);
}
.foot__social a:hover { background: var(--accent); color: var(--accent-ink); }

/* --- cart drawer ------------------------------------------------------------- */
.scrim {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: hsl(var(--shadow-hue) / 0.45); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity var(--t-base) var(--ease);
}
.scrim[data-open] { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; z-index: calc(var(--z-drawer) + 1);
  background: var(--paper); display: flex; flex-direction: column;
  box-shadow: var(--e-3);
  inset: 0 0 0 auto; width: min(440px, 100%);
  transform: translateX(101%);
  transition: transform var(--t-slow) var(--ease);
}
.drawer[data-open] { transform: translateX(0); }
@media (max-width: 620px) {
  .drawer {
    inset: auto 0 0 0; width: 100%; height: min(92dvh, 100%);
    border-radius: var(--r-panel) var(--r-panel) 0 0;
    transform: translateY(101%);
  }
  .drawer[data-open] { transform: translateY(0); }
}
.drawer__head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); flex: none;
}
.drawer__head h2 { font-size: var(--step-2); flex: 1; }
.drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-4) var(--s-5); }
.drawer__foot { flex: none; padding: var(--s-4) var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--sheet); }

.line { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--s-3); padding-block: var(--s-4); }
.line + .line { border-top: 1px solid var(--line); }
.line__img { width: 64px; height: 64px; border-radius: var(--r-input); object-fit: cover; background: var(--ice); }
.line__name { font-weight: 600; font-size: var(--step-0); letter-spacing: -0.012em; line-height: 1.25; }
.line__spec { font-size: var(--step--1); color: var(--ink-3); margin-top: 2px; }
.line__right { display: grid; gap: var(--s-3); justify-items: end; }
.line__price { font-weight: 700; font-variant-numeric: tabular-nums; }

.stepper { display: inline-flex; align-items: center; gap: 2px; background: var(--ice-2); border-radius: var(--r-pill); padding: 3px; }
.stepper button { width: 32px; height: 32px; border-radius: var(--r-pill); display: grid; place-items: center; color: var(--ink-2); transition: background var(--t-fast) var(--ease); }
.stepper button:hover { background: var(--sheet); color: var(--ink); }
.stepper span { min-width: 26px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--step--1); }

.totals { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
.totals div { display: flex; justify-content: space-between; gap: var(--s-4); font-size: var(--step--1); color: var(--ink-2); }
.totals div span:last-child { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; }
.totals div[data-grand] { padding-top: var(--s-3); border-top: 1px solid var(--line); font-size: var(--step-1); color: var(--ink); font-weight: 700; }
.totals div[data-grand] span:last-child { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; }
.totals div[data-pending] span:last-child { color: var(--ink-3); font-weight: 400; }

.minbar[data-warn] {
  display: flex; align-items: flex-start; gap: var(--s-3);
  background: var(--danger-bg); color: var(--danger);
}
.minbar[data-warn] svg { flex: none; margin-top: 2px; }
.minbar {
  display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4);
  background: var(--accent-soft); border-radius: var(--r-input); font-size: var(--step--1); color: var(--accent-soft-ink);
}
.minbar__track { height: 6px; border-radius: var(--r-pill); background: var(--track); overflow: hidden; }
.minbar__out {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  margin-top: var(--s-2);
}
.minbar__out span { color: inherit; opacity: 0.75; }
.minbar__fill {
  height: 100%; width: 100%; background: var(--accent); border-radius: var(--r-pill);
  transform-origin: left center;
  transform: scaleX(var(--fill, 0));
  transition: transform var(--t-slow) var(--ease);
}

/* --- checkout steps ---------------------------------------------------------- */
.steps__nav { display: flex; gap: var(--s-2); padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--line); flex: none; }
.steps__dot { flex: 1; height: 4px; border-radius: var(--r-pill); background: var(--line); transition: background var(--t-base) var(--ease); }
.steps__dot[data-done] { background: var(--accent); }
.pane { display: none; }
.pane[data-active] { display: grid; gap: var(--s-5); }
.pane h3 { font-size: var(--step-2); }

.radios { display: grid; gap: var(--s-3); }
.radio {
  display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4);
  border: 1.5px solid var(--line); border-radius: var(--r-card); cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.radio:hover { border-color: var(--line-2); }
.radio:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.radio input { margin-top: 4px; accent-color: var(--accent); width: 18px; height: 18px; }
.radio b { display: block; font-weight: 600; }
.radio span { font-size: var(--step--1); color: var(--ink-3); }

.seg__btn:disabled { opacity: .45; cursor: not-allowed; }

.quote {
  display: grid; gap: var(--s-2); padding: var(--s-4);
  border-radius: var(--r-card); background: var(--ice); border: 1px solid var(--line);
  font-size: var(--step--1);
}
.quote[data-state='error'] { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.quote__row { display: flex; justify-content: space-between; gap: var(--s-3); }
.quote__row b { font-variant-numeric: tabular-nums; }
/* Out of area: two ways forward side by side, stacking when they will not fit. */
.quote__out { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.quote__out > * { flex: 1 1 10rem; justify-content: center; }
.quote[data-state='error'] .quote__out .btn { border-color: currentColor; color: inherit; }
/* --- the delivery area, drawn --------------------------------------------- */
.dmap { margin: 0; display: grid; gap: var(--s-2); }
.dmap__svg {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-card); background: var(--ice); border: 1px solid var(--line);
  /* The labels are the smallest type on the site and the only type that sits
     on a shape rather than on the page, so they are sized here rather than
     inherited: a drawer that changes width must not resize the map's words. */
  font-family: inherit;
}
.dmap__zone { fill: color-mix(in srgb, var(--accent) 14%, transparent); stroke: var(--accent); stroke-width: 1.5; }
.dmap__rule { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 4; opacity: .7; }
.dmap__scale { fill: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: .02em; }

.dmap__dot { fill: var(--ink-2); }
.dmap__dot--out { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 2 2; }
.dmap__name { fill: var(--ink-2); font-size: 11.5px; }
.dmap__name--out { fill: var(--ink-3); font-style: italic; }
.dmap__name--you { fill: var(--accent); font-weight: 700; }

.dmap__here-halo { fill: color-mix(in srgb, var(--accent) 35%, transparent); }
.dmap__here { fill: var(--accent); }
.dmap__here-name { fill: var(--ink-1); font-size: 12px; font-weight: 700; }

.dmap__legend {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  font-size: var(--step--1); color: var(--ink-3);
}
.dmap__legend li { display: inline-flex; align-items: center; gap: var(--s-2); }
.dmap__key { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dmap__key--in { background: var(--ink-2); }
.dmap__key--out { border: 1.5px dashed var(--ink-3); }

.dmap__caption { font-size: var(--step--1); color: var(--ink-3); }

/* The disclosure that holds it: a quiet line, not a second call to action. */
.area-toggle {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: none; border: 0; padding: var(--s-2) 0; min-height: 44px;
  color: var(--accent); font: inherit; font-size: var(--step--1); font-weight: 600;
  cursor: pointer; text-align: left;
}
.area-toggle:hover { text-decoration: underline; }
.area-toggle svg { transition: transform 160ms ease; }
.area-toggle[aria-expanded='true'] svg { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .area-toggle svg { transition: none; } }

.spin { animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }


/* --- item modal --------------------------------------------------------------- */
.modal {
  position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center;
  padding: var(--gutter); opacity: 0; pointer-events: none;
  transition: opacity var(--t-base) var(--ease);
}
.modal[data-open] { opacity: 1; pointer-events: auto; }
.modal__card {
  position: relative; width: min(560px, 100%); max-height: min(88dvh, 760px);
  background: var(--paper); border-radius: var(--r-panel); overflow: hidden;
  box-shadow: var(--e-3); display: flex; flex-direction: column;
  transform: translateY(14px) scale(0.985);
  transition: transform var(--t-slow) var(--ease);
}
.modal[data-open] .modal__card { transform: none; }
.modal__close { position: absolute; top: var(--s-3); right: var(--s-3); z-index: 2; background: var(--sheet); box-shadow: var(--e-1); }
.modal__media { aspect-ratio: 5 / 4; background: var(--ice); flex: none; }
.modal__media img { width: 100%; height: 100%; object-fit: cover; }
.modal__body { padding: var(--s-5); overflow-y: auto; display: grid; gap: var(--s-3); }
.modal__body h3 { font-size: var(--step-3); }
.modal__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tag {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-pill); background: var(--ice-2); color: var(--ink-2);
}
.modal__foot { padding: var(--s-4) var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--sheet); display: flex; align-items: center; gap: var(--s-4); flex: none; }
.modal__foot .btn { flex: 1; }

/* --- mobile order bar ---------------------------------------------------------- */
.mobar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar);
  padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  transform: translateY(120%); transition: transform var(--t-slow) var(--ease);
}
.mobar[data-show] { transform: translateY(0); }
@media (max-width: 620px) {
  body:has(#mobar[data-show]) { padding-bottom: 5.25rem; }
}
@media (min-width: 621px) { .mobar { display: none; } }

/* --- toast ---------------------------------------------------------------------- */
.toasts {
  position: fixed; z-index: var(--z-toast); bottom: calc(var(--s-5) + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%); display: grid; gap: var(--s-2); width: min(400px, calc(100% - 2rem));
  pointer-events: none;
}
@media (max-width: 620px) { .toasts { bottom: calc(5.5rem + env(safe-area-inset-bottom)); } }
.toast {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper); box-shadow: var(--e-2);
  font-size: var(--step--1); font-weight: 500;
  animation: toast-in var(--t-slow) var(--ease);
}
.toast svg { color: var(--accent); }
.toast[data-out] { animation: toast-out var(--t-base) var(--ease-in) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px) scale(0.97); } }

/* --- scroll reveal (gated on JS so no-JS users see everything) -------------- */
[data-reveal] { opacity: 1; }
html[data-js] [data-reveal] { opacity: 0; transform: translateY(18px); }
html[data-js] [data-reveal][data-shown] {
  opacity: 1; transform: none;
  transition: opacity 560ms var(--ease), transform 560ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Touch pointers get the full 44px target. A mouse does not need it, and the
   tighter pills read better on desktop, so this is scoped to coarse pointers. */
@media (pointer: coarse) {
  /* Under 16px iOS zooms the whole page the moment the field takes focus,
     and never zooms back out. */
  .input, .textarea, .select { font-size: 16px; }
  .seg__btn, .rail__btn { min-height: 44px; }
  .chip { min-height: 44px; padding-inline: var(--s-4); }
  .stepper button { width: 44px; height: 44px; }
  .foot li a { display: inline-block; padding-block: var(--s-2); }
  .iconbtn { min-width: 44px; min-height: 44px; }
  .stepper span { min-width: 30px; }
  .card__add { min-height: 44px; }
  .brand { padding-block: var(--s-1); }
  .nav__link { padding-block: var(--s-3); }
  .filters { gap: var(--s-3); }
}

/* --- the receipt, shared by the review step and the confirmation ----------- */
.rcpt { display: grid; gap: var(--s-3); }
.rcpt__line {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto;
  gap: var(--s-3); align-items: center;
}
.rcpt__img {
  width: 48px; height: 48px; border-radius: var(--r-input);
  object-fit: cover; background: var(--ice-2);
}
.rcpt__what { display: grid; gap: 1px; min-width: 0; }
.rcpt__name { font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.rcpt__spec { font-size: var(--step--1); color: var(--ink-3); }
.rcpt__qty { font-size: var(--step--1); color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* Money in the display face: Schibsted's tabular figures set the decimal
   point a full digit wide ("$37 . 50"); Archivo's keep it narrow. */
.rcpt__price {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; text-align: right; min-width: 4.5ch;
}
.totals div span:last-child,
.line__price,
.tips .chip small { font-family: var(--font-display); }

/* --- the review step: how and for whom, then what ------------------------- */
.order-meta {
  display: grid; background: var(--ice); border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.order-meta__row {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: var(--s-3); align-items: start; padding: var(--s-4);
}
.order-meta__row + .order-meta__row { border-top: 1px solid var(--line); }
.order-meta__row > .icon { margin-top: 3px; color: var(--accent-quiet); }
.order-meta__row b { display: block; font-weight: 600; line-height: 1.3; }
.order-meta__when { display: block; margin-top: 2px; font-size: var(--step--1); font-weight: 600; color: var(--accent-quiet); }
.order-meta__row p { font-size: var(--step--1); color: var(--ink-2); margin-top: 2px; overflow-wrap: anywhere; }
.order-meta__row .btn { min-height: 32px; margin-top: -4px; padding-inline: var(--s-2); font-size: var(--step--1); }
.review-order { display: grid; gap: var(--s-3); }
.review-order__head { display: flex; justify-content: space-between; align-items: center; }
.review-order__head h4 { font-size: var(--step-0); font-weight: 700; }
.review-order__head .btn { min-height: 32px; font-size: var(--step--1); }
.paywith { display: grid; gap: var(--s-3); }
.paywith h4 { font-size: var(--step-0); font-weight: 700; }
/* A two-way choice fills its row in equal halves: a stretched track with
   both pills parked on the left read as half-built. */
.paywith .seg { display: grid; grid-template-columns: 1fr 1fr; }
.paywith .seg__btn { justify-content: center; }

/* --- the confirmation: the order as the ticket the kitchen is holding ----- */
.done {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100dvh - var(--nav-h));
  padding-block: clamp(2rem, 1rem + 5vw, 5rem) clamp(3.5rem, 2rem + 6vw, 7rem);
}
/* The same cold wash the home page opens under, so the last page of the
   order feels like the first. */
.done::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(56rem 32rem at 12% -6%, var(--glow-1), transparent 62%),
    radial-gradient(44rem 30rem at 96% 30%, var(--glow-2), transparent 60%);
}
.done__grid {
  display: grid; gap: clamp(2.5rem, 1.5rem + 4vw, 4rem); max-width: 1120px;
  grid-template-areas: 'now' 'ticket' 'out';
}
.done__now { grid-area: now; }
.ticket { grid-area: ticket; }
.done__out { grid-area: out; }
/* Beside each other from here up. The ticket spans both rows and the spare
   height goes to the second, so the way out sits right under the status
   instead of being pushed down by a long receipt. */
@media (min-width: 920px) {
  .done__grid {
    grid-template-columns: minmax(0, 1fr) 420px;
    grid-template-rows: auto 1fr;
    grid-template-areas: 'now ticket' 'out ticket';
    row-gap: var(--s-6); align-items: start;
  }
  .done__grid--single { grid-template-columns: minmax(0, 40rem); }
}
.done__grid--single { grid-template-areas: 'now'; }
.done__now { display: grid; gap: var(--s-5); align-content: start; justify-items: start; }
.done__now > * { max-width: 100%; }
.done__mark {
  width: 52px; height: 52px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); box-shadow: var(--e-2);
}
.done__mark .icon { width: 26px; height: 26px; }
.done__mark--warn { background: var(--danger-bg); color: var(--danger); box-shadow: none; border: 1px solid currentColor; }
.done h1 {
  font-size: var(--step-5); line-height: 0.98; letter-spacing: -0.038em;
  max-width: 11ch; margin-top: var(--s-2);
}
.done--failed h1 { font-size: var(--step-4); max-width: 16ch; }
.done .lede { max-width: 38ch; margin-top: calc(var(--s-2) * -1); }

/* Cash: the one instruction that decides whether the handover goes right,
   set like a stamp in the brand cyan (ink on cyan, 6.2:1). */
.done__due {
  display: flex; gap: var(--s-3); align-items: center; width: 100%;
  padding: var(--s-4) var(--s-5); border-radius: var(--r-card);
  background: var(--accent); color: var(--accent-ink); box-shadow: var(--e-1);
  font-weight: 500;
}
.done__due .icon { flex: none; }
.done__amount { font-family: var(--font-display); font-size: var(--step-2); font-weight: 800; letter-spacing: -0.03em; }

.done__card {
  display: grid; width: 100%; padding: var(--s-5);
  background: var(--accent-soft); border: 1px solid var(--accent-soft-line);
  border-radius: var(--r-card); color: var(--accent-soft-ink);
}
.done__card-body { display: grid; gap: var(--s-2); }
.done__card h2 {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--step-1); color: var(--ink); letter-spacing: -0.02em;
}
.done__card h2 .icon { flex: none; width: 22px; height: 22px; color: var(--accent-quiet); }
.done__card p { color: var(--ink-2); max-width: 44ch; }
.done__card p b { color: var(--ink); }
.done__card-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); }

/* What happens next: a plan with its first step done, not a live tracker. */
.done__steps { display: grid; width: 100%; max-width: 34rem; }
.done__steps li {
  position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: var(--s-3); align-items: center; padding-block: var(--s-2);
}
.done__steps li:not(:last-child)::after {
  content: ''; position: absolute; left: 11px; top: calc(50% + 12px); height: calc(100% - 24px);
  width: 2px; border-radius: 2px; background: var(--line-2);
}
.done__steps li[data-state='done']::after { background: var(--accent); }
.done__dot {
  width: 24px; height: 24px; border-radius: var(--r-pill);
  display: grid; place-items: center; background: var(--paper);
  border: 2px solid var(--line-2);
}
.done__dot .icon { width: 14px; height: 14px; }
.done__steps [data-state='done'] .done__dot { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.done__steps [data-state='now'] .done__dot { border-color: var(--accent); box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 12px var(--accent); }
.done__step { font-weight: 600; }
.done__steps [data-state='next'] .done__step { color: var(--ink-2); font-weight: 500; }
/* Proportional digits on purpose: Schibsted's tabular colon is a digit wide
   and set "7 : 40 PM". A column of three times has nothing to align. */
.done__when { font-size: var(--step--1); color: var(--ink-3); text-align: right; }
.done__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
/* Two unequal pills stacked on a phone look dropped rather than placed. */
@media (max-width: 559px) {
  .done__card { padding: var(--s-4); }
  .done__card-actions > .btn,
  .done--failed .done__actions > .btn { flex: 1 1 100%; justify-content: center; }
}

/* The ticket. Two halves and a tear between them, notched at both ends: the
   kitchen prints a ticket for this very order, and the counter calls it by
   the number on the stub. The shadow is a drop-shadow on the wrapper so it
   follows the notches instead of the box. */
.ticket {
  filter:
    drop-shadow(0 1px 2px hsl(var(--shadow-hue) / 0.08))
    drop-shadow(0 18px 40px hsl(var(--shadow-hue) / 0.16));
  animation: ticket-print 1.1s var(--ease) 0.2s both;
}
.ticket__stub, .ticket__tear, .ticket__body { background: var(--sheet); }
.ticket__stub {
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  padding: var(--s-5) var(--s-5) var(--s-3);
  display: grid; gap: var(--s-2);
}
.ticket__meta {
  display: flex; justify-content: space-between; gap: var(--s-3);
  font-size: var(--step--1); color: var(--ink-3);
}
.ticket__refrow { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.ticket__ref {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--step-3); letter-spacing: 0.01em; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.ticket__copy { min-height: 36px; font-size: var(--step--1); }
.ticket__hint { font-size: var(--step--1); color: var(--ink-3); }
.ticket__tear {
  position: relative; height: 28px;
  -webkit-mask:
    radial-gradient(circle 14px at 0 50%, #0000 97%, #000) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle 14px at 100% 50%, #0000 97%, #000) 100% 0 / 51% 100% no-repeat;
          mask:
    radial-gradient(circle 14px at 0 50%, #0000 97%, #000) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle 14px at 100% 50%, #0000 97%, #000) 100% 0 / 51% 100% no-repeat;
}
.ticket__tear::after {
  content: ''; position: absolute; left: 22px; right: 22px; top: 50%;
  border-top: 2px dashed var(--line-2);
}
.ticket__body {
  border-radius: 0 0 var(--r-panel) var(--r-panel);
  padding: var(--s-3) var(--s-5) var(--s-5);
  display: grid; gap: var(--s-5);
}
.ticket .totals { margin: 0; padding-top: var(--s-4); border-top: 1px solid var(--line); }
.ticket__pay {
  display: flex; gap: var(--s-2); align-items: flex-start;
  font-size: var(--step--1); color: var(--ink-2); overflow-wrap: anywhere;
}
.ticket__pay .icon { flex: none; margin-top: 2px; color: var(--accent-quiet); }

/* The one authored moment on the page: the ticket comes out of the printer.
   A clip from the top edge down, expanded past the box so the shadow is not
   cut off once it has printed. */
@keyframes ticket-print {
  from { clip-path: inset(-60px -60px 100% -60px); transform: translateY(-10px); }
  to   { clip-path: inset(-60px -60px -80px -60px); transform: none; }
}
@media (max-width: 919px) {
  .done h1 { max-width: 12ch; }
  .ticket__stub, .ticket__body { padding-inline: var(--s-4); }
}
@media (prefers-reduced-motion: reduce) { .ticket { animation: none; } }

/* Reduced motion removes movement, not feedback: hover and focus colour
   transitions stay, transforms and reveals do not. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
  html { scroll-behavior: auto; }
  html[data-js] [data-reveal] { opacity: 1; transform: none; }
  .card:hover, .card:active, .btn:active, .cartbtn:active,
  .card__add:hover, .card__add:active,
  .card:hover .card__media img { transform: none; }
  .drawer, .modal__card, .mobar, .scrim { transition-duration: 1ms; }
  .sk__media, .sk__line { animation: none; background: var(--ice-2); }
}