/* =====================================================
   L&L Hawaiian Barbecue web menu — translated from Figma design
   File: FE9SMcOstyfUCJRyaYTxG6 node 28001:987
   ===================================================== */

/* ---------- Brand fonts ----------
   Files in assets/fonts, names map 1:1 to the Figma font-family tokens.
   Each file is a STATIC TrueType at a single weight — declare that exact weight
   so the browser never synthesises a heavier cut:
     CustomAppFontReg    Poppins Regular      400
     CustomAppFontBold   Poppins SemiBold     600
     CustomButtonFont    Poppins SemiBold     600  (same cut as CustomAppFontBold)
     CustomTitleAppFont  GT Pressura LC Black 900
   ---------- */
@font-face {
  font-family: 'Custom App Font Reg';         /* Figma: CustomAppFontReg — Poppins Regular */
  src: url('/fonts/hb_custom/CustomAppFontReg.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Custom App Font Bold';        /* Figma: CustomAppFontBold — Poppins SemiBold */
  src: url('/fonts/hb_custom/CustomAppFontBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Custom Button Font';          /* Figma: CustomButtonFont — Poppins SemiBold */
  src: url('/fonts/hb_custom/CustomButtonFont.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Custom Title App Font';       /* Figma: CustomTitleAppFont — GT Pressura LC Black */
  src: url('/fonts/hb_custom/CustomTitleAppFont.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ----------
   Names map 1:1 to Figma variables (file FE9SMcOstyfUCJRyaYTxG6).
   Where Figma uses PascalCase (AccentColor) → CSS kebab-case (--accent-color).
   Mode-aware tokens (BackgroundColor / BackgroundTextColor) default to LIGHT mode
   here; dark surfaces re-declare them locally further down. */
:root {
  /* ===== Color tokens (values from assets/colors.json — LIGHT mode) ===== */

  /* ===== Accent ===== */
  --accent-color: #d7223e;
  --secondary-accent-color: #d8233f66;
  --accent-text-color: #ffffff;
  --secondary-accent-text-color: #ffffff66;
  --accent-card-color: #ffd712;
  --accent-background-price-color: #ffffff;

  /* ===== Surfaces ===== */
  --background-color: #ffffff;
  --navigation-bar-mainscreen-color: #222222;
  --card-color: #ffffff;
  --chip-selected-color: #f6f6f6;

  /* ===== Text on background ===== */
  /* Field outlines: the ink at 53% — 3.5:1 on white, so component
     boundaries clear WCAG 1.4.11 */
  --field-border-color: #22222287;
  --background-text-color: #222222;
  /* Secondary labels: the ink at 65% — 4.95:1 on white, clears WCAG 1.4.3 */
  --secondary-background-text-color: #222222a5;
  --tertiary-background-text-color: #2222223d;
  --quarternary-background-text-color: #2222220a;

  /* ===== Card text ===== */
  --card-text-color: #222222;
  --secondary-card-text-color: #222222a5;
  --tertiary-card-text-color: #2222223d;
  --quarternary-card-text-color: #2222220a;
  --card-price-color: #222222;
  --secondary-card-price-color: #22222266;

  /* ===== Price chip ===== */
  --background-price-color: #f3f3f3;

  /* ===== Valid badge ===== */
  --valid-background-color: #cd222a;
  --valid-text-color: #ffffff;

  /* ===== Status ===== */
  --error-color: #d7223e;
  --error-text-color: #ffffff;
  --alert-color: #151d55;
  --alert-text-color: #ffffff;
  --success-color: #008300;
  --success-text-color: #ffffff;
  --banner-text-color: #ffffff;
  --info-color: #aee9f3;
  --info-text-color: #1f2021;

  /* ===== Discount / points / progress ===== */
  --discount-background-color: #2e3233;
  --discount-text-color: #ffffff;
  --points-background-color: #ffd712;
  --points-text-color: #222222;
  --animation-success-color: #46c372;
  --order-progressbar-start-point: #dc2642;
  --order-progressbar-end-point: #dc2642;

  /* ===== Header / footer — per-client, not derived from the theme palette
     (Figma 28078:14581 header, 30124:14480 footer) ===== */
  --header-background-color: #dc2642;
  --header-text-color: #ffffff;
  --header-address-background-color: #ffd712;
  --header-address-text-color: #222222;
  --footer-background-color: #470b14;
  --footer-text-color: #ffffff;

  /* ===== Title accent (not in colors.json) ===== */
  --grade2-title-color: #222222;

  /* ===== Spacers (Figma spacers/*) ===== */
  --space-3xs: 2px;   /* space 3XS */
  --space-2xs: 4px;   /* space 2XS */
  --space-xs: 8px;    /* space XS */
  --space-s: 12px;    /* space S */
  --space-m: 16px;    /* space M */
  --space-l: 24px;    /* space L */
  --space-2xl: 36px;  /* space 2XL */
  --space-3xl: 40px;  /* space 3XL */
  --space-5xl: 64px;  /* space 5XL */

  /* ===== Fonts (Figma font family/*) ===== */
  --custom-app-font-bold: 'Custom App Font Bold', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --custom-app-font-reg: 'Custom App Font Reg', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --custom-button-font: 'Custom Button Font', 'Custom App Font Bold', system-ui, sans-serif;
  --custom-title-app-font: 'Custom Title App Font', 'Custom Button Font', system-ui, sans-serif;

  /* ===== Non-Figma structural tokens ===== */
  --accent-color-hover: #b81f37;            /* darker accent for :hover/:active — not a Figma var */
  --header-address-background-hover: #f0ca11;         /* darker step of the address pill — not a Figma var */
  --header-surface-hover: rgba(255, 255, 255, 0.16);  /* icon / back-button surface on the header — not a Figma var */
  --header-divider-color: rgba(255, 255, 255, 0.24);  /* hairline on the header — not a Figma var */
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.06);
  --shadow-bar: 0 12px 32px rgba(0, 0, 0, 0.15);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --header-h: 80px;
  --sidebar-w: 280px;
  --page-pad: 80px;
  --content-gap: 24px;
}

/* Header and footer run on their own client-specific tokens (Header* / Footer* in
   colors.json), not on the shared theme surface tokens. */

/* Visible to screen readers, out of the way of everything else */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: var(--custom-app-font-reg);
  color: var(--background-text-color);
  background: var(--background-color);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.4px;
  /* No bottom padding here: the footer is the last block on every page and the
     floating cart pill overlaps it (Figma 28078:14520), so any body padding would
     just show as a white strip under the footer at the end of the scroll. */
}
img {
  display: block;
  max-width: 100%;
}
button {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;   /* the brand families ship one cut each — never let the UA pick */
  cursor: pointer;
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
h1,
h2,
h3,
h4 {
  /* The brand families ship one cut each, so a heading left on the UA's bold 700
     would be faked by the browser. Every heading takes its weight from its own rule. */
  font-weight: inherit;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
/* The hidden attribute must win over component display rules */
[hidden] {
  display: none !important;
}

/* =====================================================
   HEADER
   ===================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: var(--header-background-color);
  color: var(--header-text-color);
  border-bottom: 1px solid var(--quarternary-background-text-color);
}
.site-header__inner {
  max-width: 1680px;
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--page-pad);
  display: flex;
  align-items: center;
  gap: 24px;
}
/* Minimal header (checkout / thank-you pages) — only Logo + user + hamburger */
.site-header--minimal .site-header__inner {
  justify-content: space-between;
}
.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  /* Reserve exactly the sidebar's width so the search bar starts flush
     with the beginning of the main content column below. */
  width: var(--sidebar-w);
  /* Figma 30100:5121 — the badge is 90px tall inside an 80px band: it starts
     13px from the top and overhangs the band instead of stretching it. */
  align-self: flex-start;
  margin-top: 13px;
}
.brand img {
  width: auto;               /* keep aspect ratio */
}
.brand__full {
  height: 90px;              /* Figma header logo (node 30100:5122) */
}
.brand__icon {
  display: none;             /* full wordmark on desktop; icon shows <820 (Figma 30052:1904) */
  height: 54px;
}
/* Mobile back-arrow header bits (rewards / checkout <820) — hidden on desktop */
.header-back,
.header-divider {
  display: none;
}
/* Right group after the logo — targets 1204px (matches the menu grid below at
   1680 viewport) but shrinks to fit on narrower screens so the icons stay visible. */
.header-right {
  display: flex;
  align-items: center;
  gap: 36px;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 1204px;
  margin-left: auto;
}
.header-controls {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* the pill hugs and sits by the icons */
  gap: 12px;
}
.header-controls > .mode-toggle,
.header-controls > .address-pill,
.header-controls > .header-address {
  flex: 1 1 auto;      /* fills the strip between the logo and the icons */
  min-width: 0;
}
.header-icons {
  display: flex;
  align-items: center;
  gap: 36px;
  flex-shrink: 0;
}

/* Search */
.search {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--quarternary-background-text-color);
  border-radius: var(--radius-pill);
  padding: 0 12px;
  height: 52px;
  color: var(--secondary-background-text-color);
}
.search__icon {
  color: var(--background-text-color);
  flex-shrink: 0;
}
.search input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 15px;
  color: var(--background-text-color);
  letter-spacing: -0.4px;
}
.search input::placeholder {
  color: var(--secondary-background-text-color);
}

/* Deliver to me / I'll attend the event — removed from the header on request.
   Kept styled (not deleted) so it can be switched back on with one line. */
.mode-toggle {
  display: none;
  align-items: center;
  height: 54px;
  background: var(--card-color);
  border-radius: var(--radius-pill);
  padding: 0;
}
.mode-toggle__btn {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--background-text-color);
  font-family: var(--custom-app-font-bold);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.4px;
  white-space: nowrap;
  transition: border-color 0.15s;
}
.mode-toggle__btn.is-active {
  border-color: var(--accent-color);
}
.mode-toggle__btn svg {
  color: var(--background-text-color);
}

/* Address pill (red CTA) */
.address-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 0 24px;
  background: var(--header-address-background-color);
  color: var(--header-address-text-color);
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--custom-button-font);
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  text-transform: uppercase;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  transition: background 0.15s;
}
.address-pill:hover {
  background: var(--header-address-background-hover);
}

/* Header address pill — pre-selected event point (Figma 30102:5338) */
.header-address {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;   /* content sits left inside the full-width pill */
  gap: 12px;
  height: 54px;
  padding: 8px 24px;
  background: var(--header-address-background-color);
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--header-address-text-color);
  cursor: pointer;
  overflow: hidden;
  transition: background 0.15s;
}
.header-address:hover {
  background: var(--header-address-background-hover);
}
.header-address__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--header-address-text-color);
}
.header-address__text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
.header-address__place {
  max-width: 100%;
  font-family: var(--custom-app-font-bold);   /* Main Text SemiBold 16/20 */
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--header-address-text-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Checkout in delivery mode (Figma 30086:3647): the name line already carries the
   delivery address, so the second line would only repeat it. */
.checkout-address.is-delivery .checkout-event__addr {
  display: none;
}

/* Delivery variant (Figma 32053:17492) — same pill, scooter icon, single line */
.header-address.is-delivery {
  border: 1px solid var(--quarternary-background-text-color);
}
.header-address.is-delivery .header-address__when {
  display: none;
}

/* Second line: which day the event runs, and its opening hours */
/* Comma between the street address and the opening hours — punctuation, not data,
   so the committed store name/address can be swapped in without carrying it. */
.header-address__addr::after {
  content: ',';
}
.header-address__when {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  font-family: var(--custom-app-font-reg);    /* Footnote Reg 14/18 */
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.4px;
  color: var(--header-address-text-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.icon-btn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--background-text-color);
  border-radius: 999px;
  flex-shrink: 0;
}
.icon-btn:hover {
  background: var(--quarternary-background-text-color);
}
/* ---- Header account control + points pill (needed by the profile pages) ---- */
/* Points pill — shared by the header user block and the burger menu title */
.points-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--points-background-color);
  font-family: var(--custom-app-font-reg);        /* Footnote Reg 14/18 */
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.4px;
  color: var(--points-text-color);
  white-space: nowrap;
}
.points-pill__coin {
  width: 14px;
  height: 14px;                                  /* the source is 18x20 */
  flex-shrink: 0;
}
/* Points coin, everywhere it appears (header, menu, cards, cart, orders): the
   shape comes from assets/icons/coin.svg, the colour from the surrounding text
   token — the file is a mask and currentColor paints through it. Sizes stay
   with each class below. (Needs http(s): file:// blocks mask images.) */
:is(.coin, .points-pill__coin, .cart-pill__coin, .order-item__coin) {
  display: inline-block;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url('/images/hb/newdesign/assets/icons/coin.svg') center / contain no-repeat;
  mask: url('/images/hb/newdesign/assets/icons/coin.svg') center / contain no-repeat;
}
.icon-sprite {
  display: none;
}
/* Header account control: bare icon for guests, icon + name + points once signed in */
.user-info {
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
/* Hover stays on the icon alone, the way the bare account button behaved */
.user-info:hover {
  background: transparent;
}
.user-info:hover .user-info__icon {
  background: var(--quarternary-background-text-color);
}
/* Header account control (Figma 32088:8195): the icon alone for a guest, icon +
   name + points once signed in. */
.user-info__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  /* 36px target, 24px glyph — the macet's 16.67% inset */
  padding: 6px;
  box-sizing: border-box;
  border-radius: var(--radius-pill);
  color: var(--header-text-color);
  transition: background 0.15s;
}
.user-info__text {
  display: none;                                  /* guests see the icon only */
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
}
.user-info__name {
  font-family: var(--custom-app-font-bold);       /* Body SemiBold 18/22 */
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.4px;
  color: var(--header-text-color);
}
.user-info.is-authed .user-info__text {
  display: flex;
}
/* Header icons sit on the accent band — white glyphs, translucent hover surface */
.site-header .icon-btn {
  color: var(--header-text-color);
}
.site-header .icon-btn:hover {
  background: var(--header-surface-hover);
}
/* The account control is a wide block once signed in — the hover surface belongs
   to its icon alone, not behind the name and the points. */
.site-header .user-info:hover {
  background: transparent;
}
.site-header .user-info:hover .user-info__icon {
  background: var(--header-surface-hover);
}

/* =====================================================
   APP SHELL
   ===================================================== */
.app {
  max-width: 1680px;
  margin: 0 auto;
  padding: 64px var(--page-pad);
  display: grid;
  column-gap: 36px;                       /* match header: 280 sidebar + 36 + 1204 content = 1520 */
  row-gap: 40px;
  grid-template-columns: var(--sidebar-w) 1fr;
  align-items: flex-start;
}
.app > * {
  min-width: 0;
}

/* =====================================================
   SIDEBAR
   ===================================================== */
.sidebar {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  max-height: calc(100dvh - var(--header-h) - 48px);
  overflow-y: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  scrollbar-width: thin;
}
/* Search input at top of sidebar (moved from header per Figma 28203:1211) */
.sidebar-search {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 12px;
  background: var(--quarternary-background-text-color);
  border-radius: var(--radius-pill);
  cursor: text;
  transition: background 0.15s;
}
/* Search keeps its fill and takes the accent ring only on focus (Figma 28198:1843) */
.sidebar-search:focus-within,
.states-search:focus-within,
.events-search:focus-within,
.ccodes__search:focus-within {
  box-shadow: inset 0 0 0 2px var(--accent-color);
}
.sidebar-search:focus-within {
  background: rgba(0, 0, 0, 0.06);
}
/* Clear control in the search fields. The native search cross is the browser's
   own blue glyph and matches no frame, so it is switched off and this takes its
   place — BackgroundTextColor, 14px glyph in a 24px tap target (WCAG 2.5.8). */
.search-clear {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--background-text-color);
  cursor: pointer;
}
.search-clear::after {
  content: '';
  position: absolute;
  inset: -5px;
}
.search-clear[hidden] {
  display: none;
}
.sidebar-search input::-webkit-search-cancel-button,
.ccodes__search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.sidebar-search__icon {
  color: var(--background-text-color);
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 4px;
  box-sizing: content-box;
}
.sidebar-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  outline: none;
  font-family: var(--custom-app-font-reg);
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
}
.sidebar-search input::placeholder {
  color: var(--secondary-background-text-color);
}
.categories {
  display: flex;
  flex-direction: column;
  gap: 2px;                              /* per Figma spec */
}
.cat-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  background: transparent;
  border: 0;
  border-radius: 12px;
  color: var(--background-text-color);
  font-family: var(--custom-app-font-reg);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.4px;
  line-height: 22px;
  text-align: left;
  width: 100%;
  transition: background 0.15s;
  cursor: pointer;
}
.cat-btn:hover {
  background: var(--quarternary-background-text-color);
}
.cat-btn.is-active {
  background: var(--quarternary-background-text-color);   /* same as hover (was ChipSelectedColor) */
  color: var(--accent-color);
}
.cat-btn.is-active .cat-btn__icon {
  background: var(--background-color);       /* white behind the selected icon */
}
/* Forced line break inside a category label — off by default (desktop sidebar
   keeps one line), enabled only in the mobile chip row. */
.cat-btn__br {
  display: none;
}
.cat-btn__icon {
  width: 72px;
  aspect-ratio: 3 / 2;             /* always 3:2 regardless of breakpoint */
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--quarternary-background-text-color);
}
/* Rewards icon is a transparent PNG — keep it clean without the surface tint. */
.cat-btn[href*="rewards"] .cat-btn__icon {
  background: transparent;
}
.cat-btn__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =====================================================
   CONTENT
   ===================================================== */
.content {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* Section */
.section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Sign-in / registration banner — replaces the Rewards block (Figma 30086:3908) */
.signin-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px 24px;
  background: var(--accent-card-color);
  border: 1px solid var(--quarternary-background-text-color);
  border-radius: 20px;
  color: var(--card-text-color);
  text-decoration: none;
  transition: box-shadow 0.15s;
}
.signin-banner:hover {
  box-shadow: var(--shadow-md);
}
.signin-banner__chev {
  transition: transform 0.15s;
}
.signin-banner:hover .signin-banner__chev {
  transform: translateX(3px);
}
.signin-banner__icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
}
.signin-banner__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.signin-banner__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.signin-banner__title {
  font-family: var(--custom-title-app-font);   /* H4 22/28 */
  font-weight: 900;
  font-size: 22px;
  line-height: 28px;
  text-transform: uppercase;
  color: var(--card-text-color);
}
.signin-banner__sub {
  font-family: var(--custom-app-font-reg);      /* Headline Reg 18/22 */
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.072px;
  color: var(--card-text-color);
}
.signin-banner__chev {
  flex-shrink: 0;
  color: var(--tertiary-card-text-color);
}

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.section-head__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Section title — big bold italic uppercase (brand signature) */
.section-title {
  font-family: var(--custom-title-app-font);
  font-weight: 900;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: 0.1px;
  text-transform: uppercase;
  color: var(--background-text-color);
}
.section-sub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--custom-app-font-reg);   /* Body Reg */
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
}
.section-sub strong {
  font-family: var(--custom-app-font-reg);
  font-weight: 400;
}
.section-sub .coin {
  width: 18px;
  height: 18px;
}

/* "ALL →" pill button on right of Rewards */
.all-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--quarternary-background-text-color);
  color: var(--background-text-color);
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--custom-button-font);   /* ButtonFont 18/22 SemiBold */
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: background 0.15s;
  align-self: center;
}
.all-btn:hover {
  background: var(--quarternary-background-text-color);
}

/* =====================================================
   CARD GRID
   ===================================================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* =====================================================
   ITEM CARD
   ===================================================== */
.card {
  background: var(--card-color);
  background-clip: padding-box;   /* keep border alpha neutral over any fill */
  border: 1px solid var(--quarternary-background-text-color);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
/* Featured variant (lime green background) */
.card--featured {
  background: var(--accent-card-color);
  /* Same subtle outline as regular cards */
  border-color: var(--quarternary-background-text-color);
}

/* Image block — rounded 20 on all corners per Figma spec */
.card__img {
  position: relative;
  aspect-ratio: 411 / 274;
  background: transparent;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card__emoji {
  font-size: 110px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.12));
}
.card__badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 2;                    /* keep the valid label above the darkening overlay when added */
  background: var(--accent-color);
  color: var(--accent-text-color);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  font-size: 16px;
  font-family: var(--custom-app-font-bold);
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.4px;
}

/* Count overlay on image when item is added to cart */
.card__count-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  color: var(--accent-text-color);
  font-family: var(--custom-title-app-font);
  font-weight: 900;
  font-size: 48px;
  line-height: 56px;
  text-transform: uppercase;
  border-radius: 20px;
  pointer-events: none;
}
.card.is-added .card__count-overlay {
  display: flex;
}
/* When item is added, the price row swaps to a full-width qty stepper */
.card.is-added .price-btn {
  display: none;
}
/* Quantity stepper shown when card is in "added" state — same shrink-to-content
   sizing as .price-btn plus a leading delete button. */
.card__qty {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 24px;
  background: var(--background-price-color);
  border-radius: var(--radius-pill);
  color: var(--background-text-color);
  font-family: var(--custom-app-font-bold);
  font-weight: 600;
  font-size: 18px;
  line-height: 20px;
  letter-spacing: -0.4px;
  align-self: flex-start;
}
.card--featured .card__qty {
  background: var(--background-price-color);
}
.card.is-added .card__qty {
  display: inline-flex;
}
.card__qty button {
  width: 21px;
  height: 21px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.card__qty button img {
  width: 21px;
  height: 21px;
  display: block;
}
.card__qty__value {
  white-space: nowrap;
}
.card {
  cursor: pointer;
}
.card__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 16px 16px;
  /* Grow to fill card height so the price button always pins to the bottom
     regardless of how many lines the title takes. */
  flex: 1 1 auto;
  justify-content: space-between;
}
.card__title {
  font-family: var(--custom-app-font-bold);
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
  min-height: 22px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Price pill button — shrink-to-content per Figma spec.
   Default state: [ Price · +add ]  Added state: uses .card__qty with [ -delete · Price · +add ] */
.price-btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  background: var(--background-price-color);
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--background-text-color);
  font-family: var(--custom-app-font-bold);
  font-weight: 600;
  font-size: 18px;
  line-height: 20px;
  letter-spacing: -0.4px;
  transition: background 0.15s;
  align-self: flex-start;                     /* don't stretch to full width in flex parent */
}
.price-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}
/* On featured card the price pill uses the accent price-block background */
.card--featured .price-btn {
  background: var(--accent-background-price-color);
}
.card--featured .price-btn:hover {
  background: rgba(255, 255, 255, 0.85);
}
.price-btn__value {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--background-text-color);
  font-family: var(--custom-app-font-bold);
  font-weight: 600;
  white-space: nowrap;
}
.price-btn__add,
.price-btn__plus {
  width: 21px;
  height: 21px;
  display: block;
  flex-shrink: 0;
}

/* Coin (points icon) */
.coin {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
.price-btn__value .coin {
  width: 16px;
  height: 16px;
}

/* =====================================================
   FLOATING BOTTOM BAR (red cart pill)
   ===================================================== */
.floating-bar {
  position: fixed;
  bottom: 40px;
  right: var(--page-pad);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cart-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 68px;
  padding: 16px 24px;
  background: var(--accent-color);
  color: var(--accent-text-color);
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--custom-button-font);
  font-weight: 600;
  font-size: 20px;
  line-height: 25px;
  text-transform: uppercase;
  box-shadow: var(--shadow-bar);
  transition: background 0.15s;
}
.cart-pill:hover {
  background: var(--accent-color-hover);
}
.cart-pill svg {
  color: var(--accent-text-color);
}
.cart-pill__icon {
  width: 26px;
  height: 26px;
  display: block;
  /* cart.svg fill is black by default — invert to white for the red pill */
  filter: brightness(0) invert(1);
}
.cart-pill strong {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  letter-spacing: 0.5px;
}
/* Points icon inside the pill label ("$5 + 80 ⬤") */
.cart-pill__coin {
  width: 18px;
  height: 18px;
  margin-left: 4px;
}

/* =====================================================
   CART OVERLAY PANEL
   ===================================================== */
.cart-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 60;
  opacity: 0;
  animation: cart-backdrop-fade 0.22s ease forwards;
}
.cart-backdrop[hidden] {
  display: none;
}
@keyframes cart-backdrop-fade {
  to { opacity: 1; }
}
.cart-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  max-width: 100vw;
  background: var(--background-color);
  z-index: 70;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 25px rgba(0, 0, 0, 0.25);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0.2, 1);
  visibility: hidden;
}
/* Cart mobile-only bits (Figma cart 320-820) — hidden on desktop */
.cart-panel__topbar,
.cart-add-more {
  display: none;
}
.cart-panel.is-open {
  transform: translateX(0);
  visibility: visible;
}
.cart-panel__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 48px 24px 24px;               /* extra top padding to Your Order per Figma */
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.cart-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cart-panel__title {
  font-family: var(--custom-title-app-font);
  font-weight: 900;
  font-size: 20px;
  line-height: 25px;
  letter-spacing: 0.1px;
  text-transform: uppercase;
}
.cart-panel__close {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: transparent;
  border: 0;
  display: grid;
  place-items: center;
  color: var(--background-text-color);
}
.cart-panel__close:hover {
  background: var(--quarternary-background-text-color);
}
.cart-items {
  display: flex;
  flex-direction: column;
  gap: 16px;                                /* per Figma spec */
}
.cart-item {
  display: grid;
  grid-template-columns: 105px 1fr;
  gap: 12px;
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--quarternary-background-text-color);
}
.cart-item__img {
  width: 105px;
  height: 70px;
  border-radius: 12px;
  overflow: hidden;
  background: transparent;
}
.cart-item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-item__info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cart-item__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.cart-item__title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cart-item__name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--custom-app-font-bold);
  font-size: 18px;
  font-weight: 600;
  color: var(--background-text-color);
  line-height: 22px;
  letter-spacing: -0.4px;
  margin: 0;
}
.cart-item__chev {
  color: var(--tertiary-background-text-color);
  flex-shrink: 0;
}
.cart-item__opts {
  font-family: var(--custom-app-font-reg);
  font-size: 14px;
  color: var(--secondary-background-text-color);
  line-height: 18px;
  letter-spacing: -0.4px;
  margin: 0;
}
.cart-item__close {
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.cart-item__close img {
  width: 14px;
  height: 14px;
  display: block;
}
.cart-item__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.cart-item__ctrl {
  display: flex;
  align-items: center;
  gap: 24px;
}
.cart-item__edit {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.cart-item__edit img {
  width: 24px;
  height: 24px;
  display: block;
}
.cart-item__price {
  font-family: var(--custom-title-app-font);
  font-weight: 900;
  font-size: 20px;
  line-height: 25px;
  color: var(--background-text-color);
  white-space: nowrap;
}

/* Remove pill button (shown on gift items instead of the qty stepper) */
.remove-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 8px 16px;
  background: var(--quarternary-background-text-color);
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--background-text-color);
  font-family: var(--custom-app-font-bold);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.4px;
  cursor: pointer;
  transition: background 0.15s;
}
.remove-pill:hover {
  background: rgba(0, 0, 0, 0.08);
}

/* Unified quantity stepper */
.qty {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 4px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-pill);   /* Figma "quantity" component — capsuled */
  gap: 4px;
}
.qty__btn {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: var(--background-text-color);
  cursor: pointer;
  transition: background 0.15s;
}
.qty__btn:hover {
  background: rgba(0, 0, 0, 0.08);
}
.qty__num {
  min-width: 18px;
  text-align: center;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  font-family: var(--custom-app-font-bold);
  font-weight: 600;
  color: var(--background-text-color);
}

/* "Add to your order?" upsell row */
.upsell {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.upsell h3 {
  font-family: var(--custom-title-app-font);
  font-weight: 900;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: 0.1px;
  color: var(--background-text-color);
  text-transform: uppercase;
  margin: 0;
}
.upsell__row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 -24px;
  /* Left aligned with body content (24px); right pulled tighter so the 4th card peeks */
  padding: 4px 0 12px 24px;
  scroll-padding-inline: 24px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  -webkit-overflow-scrolling: touch;
}
.upsell__row::-webkit-scrollbar {
  height: 6px;
}
.upsell__row::-webkit-scrollbar-track {
  background: transparent;
  margin: 0 24px;
}
.upsell__row::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 999px;
}
.upsell__row::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}
.upsell-card {
  flex: 0 0 160px;
  background: var(--card-color);
  border: 1px solid var(--quarternary-background-text-color);
  border-radius: 20px;
  padding: 1px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.upsell-card__img {
  height: 106px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: transparent;
}
.upsell-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.upsell-card__body {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.upsell-card__title {
  font-family: var(--custom-app-font-bold);   /* Main Text SemiBold 16/20 (Figma 28012:3622) */
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
  /* show up to 2 lines, then ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 32px;                            /* reserve 2 lines so tiles align */
  margin: 0;
}
.price-btn--sm {
  display: flex;
  width: 100%;                 /* stretch across the card */
  justify-content: center;
  align-self: stretch;
  height: 53px;
  padding: 16px;
  gap: 16px;
  font-size: 16px;
  line-height: 20px;
  border-radius: var(--radius-pill);
}
.price-btn--sm .price-btn__add {
  width: 21px;
  height: 21px;
}
.price-btn--sm .coin {
  width: 18px;
  height: 18px;
}

/* Promo code — single container: [icon] [input] [Apply text] */
.promo {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 54px;
  padding: 12px;
  border: 1px solid var(--field-border-color);
  border-radius: 12px;
  background: var(--card-color);
  cursor: text;
  transition: border-color 0.15s, box-shadow 0.15s;
}
/* Focus reads as a 2px accent edge without moving the field, same as the rest */
.promo:focus-within {
  border-color: var(--accent-color);
  box-shadow: inset 0 0 0 1px var(--accent-color);
}
.promo__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.promo input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  outline: none;
  font-family: var(--custom-app-font-reg);
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
}
.promo input::placeholder {
  color: rgba(10, 10, 10, 0.5);
}
.promo__apply {
  flex-shrink: 0;
  background: transparent;
  color: var(--accent-color);
  border: 0;
  padding: 0;
  font-family: var(--custom-app-font-reg);
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.promo__apply:hover {
  opacity: 0.7;
}
/* Only show "Apply" when the user has started typing (input is non-empty).
   Uses :has() — modern browser support. */
.promo:has(input:placeholder-shown) .promo__apply {
  display: none;
}

/* Order total block (below promo, above sticky footer) */
.order-total {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.order-total h3 {
  font-family: var(--custom-title-app-font);
  font-weight: 900;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: 0.1px;
  color: var(--background-text-color);
  text-transform: uppercase;
  margin: 0;
}
.order-total__rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.order-total__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 16px;
  line-height: 20px;
  color: var(--background-text-color);
  font-weight: 400;
  letter-spacing: -0.4px;
}
.order-total__row span:last-child {
  color: var(--background-text-color);
  font-weight: 400;
}
.order-total__row--total span,
.order-total__row--total span:last-child {
  /* Main Text SemiBold (CustomAppFontBold 16/600) */
  font-family: var(--custom-app-font-bold);
  font-weight: 600;
  font-style: normal;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
  text-transform: none;
}

.cart-totals {
  border-top: 1px solid var(--quarternary-background-text-color);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cart-totals__row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.cart-totals__label {
  color: var(--secondary-background-text-color);
}
.cart-totals__value {
  font-family: var(--custom-app-font-bold);
  font-weight: 600;
  color: var(--background-text-color);
}
.cart-totals__row--total {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--quarternary-background-text-color);
}
.cart-totals__row--total .cart-totals__label,
.cart-totals__row--total .cart-totals__value {
  font-family: var(--custom-app-font-bold);
  font-size: 16px;
  font-weight: 600;
  color: var(--background-text-color);
}
.cart-panel__footer {
  border-top: 1px solid var(--quarternary-background-text-color);
  padding: 18px 24px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.cart-panel__total {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cart-panel__total-label {
  font-size: 14px;
  color: var(--background-text-color);
  line-height: 18px;
  font-weight: 400;
}
.cart-panel__total-value {
  font-family: var(--custom-title-app-font);
  font-weight: 900;
  font-size: 20px;
  line-height: 25px;
  color: var(--background-text-color);
  letter-spacing: 0.1px;
}
.cart-panel__cta {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-color);
  color: var(--accent-text-color);
  border: 0;
  border-radius: var(--radius-pill);
  padding: 16px 24px;
  font-family: var(--custom-button-font);
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: 0.1px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}
.cart-panel__cta:hover {
  background: var(--accent-color-hover);
}

/* =====================================================
   POSITION (ITEM DETAIL) MODAL
   ===================================================== */
.pos-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 80;
  opacity: 0;
  animation: pos-backdrop-fade 0.22s ease forwards;
}
.pos-backdrop[hidden] {
  display: none;
}
@keyframes pos-backdrop-fade {
  to { opacity: 1; }
}
.pos-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  z-index: 90;
  width: min(1088px, calc(100vw - 32px));
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.24s ease, transform 0.24s cubic-bezier(0.32, 0.72, 0.2, 1);
}
.pos-modal.is-open {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.pos-modal__card {
  position: relative;
  background: var(--background-color);
  border-radius: 32px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 568px 520px;   /* 24 + 520 + 24 | content */
  align-items: stretch;
}
.pos-modal__image {
  position: relative;
  padding: 24px;
}
.pos-modal__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;        /* 520 x 346.67 (Figma 28162:1287) */
  object-fit: cover;
  border-radius: 24px;
  display: block;
}
.pos-modal__badge {
  position: absolute;
  bottom: 36px;
  left: 36px;
  background: var(--accent-color);
  color: var(--accent-text-color);
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--custom-app-font-bold);
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
}
.pos-modal__body {
  position: relative;
  padding: 30px 24px 24px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}
.pos-modal__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pos-modal__title {
  font-family: var(--custom-title-app-font);
  font-weight: 900;
  font-size: 34px;
  line-height: 41px;
  color: var(--background-text-color);
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0;
}
.pos-modal__desc {
  font-family: var(--custom-app-font-reg);
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
  margin: 0;
}
.pos-modal__actions {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-top: 8px;
}
.pos-modal__price {
  font-family: var(--custom-app-font-bold);   /* Body SemiBold 18/22 */
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
  white-space: nowrap;
}
.pos-modal__cta {
  flex: 1 1 auto;
  background: var(--accent-color);
  color: var(--accent-text-color);
  border: 0;
  border-radius: var(--radius-pill);
  padding: 16px 24px;
  font-family: var(--custom-button-font);
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
}
.pos-modal__cta:hover {
  background: var(--accent-color-hover);
}
/* Primary disabled (Figma 30005:1783) — accent at 40%, label stays accent-text.
   Used while the chosen store has not opened yet. */
.pos-modal__cta:disabled,
.pos-modal__cta:disabled:hover,
.item-modal__cta:disabled,
.item-modal__cta:disabled:hover {
  background: var(--secondary-accent-color);
  cursor: default;
}
/* Close button sits OUTSIDE the modal, to the right of its top-right corner
   (per Figma: right:-58 top:0, white circle 46x46 with 14px icon inside) */
.pos-modal__close {
  position: absolute;
  top: 0;
  right: -58px;
  width: 46px;
  height: 46px;
  padding: 16px;
  border: 0;
  border-radius: 999px;
  background: var(--background-color);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.15s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.pos-modal__close:hover {
  background: var(--quarternary-background-text-color);
}
.pos-modal__close img {
  width: 14px;
  height: 14px;
  display: block;
}

/* Narrower than the full 1088 layout: proportional columns, flexible image */
@media (max-width: 1160px) {
  .pos-modal__card {
    grid-template-columns: 1fr 1fr;
  }
  .pos-modal__badge {
    bottom: 32px;
    left: 32px;
  }
}

/* When there's no room to the right of the modal, tuck the close button back inside */
@media (max-width: 1200px) {
  .pos-modal__close {
    right: 12px;
    top: 12px;
    background: var(--quarternary-background-text-color);
    box-shadow: none;
  }
}
/* Simple position → bottom sheet on mobile (Figma 30062:2976) */
@media (max-width: 820px) {
  .pos-modal {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: translateY(100%);
  }
  .pos-modal.is-open {
    transform: translateY(0);
  }
  .pos-modal__card {
    grid-template-columns: 1fr;
    border-radius: 38px 38px 0 0;   /* only top corners rounded */
  }
  .pos-modal__image {
    padding: 0;                     /* full-bleed image on top */
  }
  .pos-modal__image img {
    aspect-ratio: 3 / 2;
    border-radius: 0;
  }
  .pos-modal__badge {
    bottom: 4px;                    /* Figma: valid label inset 4px (space-2xs) */
    left: 4px;
    font-size: 12px;                /* Caption1 Medium */
    line-height: 16px;
  }
  .pos-modal__body {
    padding: 0;
    gap: 24px;
  }
  .pos-modal__text {
    padding: 16px;
  }
  .pos-modal__title {
    font-size: 28px;                /* H3 */
    line-height: 34px;
  }
  .pos-modal__desc {
    font-size: 14px;                /* Footnote Reg */
    line-height: 18px;
  }
  .pos-modal__actions {
    padding: 0 16px 32px;
  }
  .pos-modal__price {
    font-family: var(--custom-app-font-bold);   /* Body SemiBold */
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
  }
  .pos-modal__cta {
    height: 52px;
    padding: 12px 16px;
    font-size: 14px;              /* SmallButtonFont */
    line-height: 16px;
    font-weight: 600;
  }
  .pos-modal__close {
    top: 16px;
    right: 16px;
    background: var(--background-color);
  }
}

/* =====================================================
   CHECKOUT PAGE
   ===================================================== */
/* Checkout layout matches Figma spec exactly:
   - BACK (auto width) --64px-- Body (1220px)
   - Body: Title, 32px gap, [Left 631px] --96px-- [Right 493px] */
.checkout {
  max-width: 1081px;                         /* Figma >1080 frame width (node 30082:2015) */
  margin: 0 auto;
  padding: 32px 40px 64px;                   /* header ↔ content 32, sides 40 (space-3xl) */
  display: flex;
  flex-direction: column;
  gap: 32px;                                 /* BACK ↔ grid */
}
.checkout__body {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.checkout__title {
  margin: 0;
  font-family: var(--custom-title-app-font);
  font-weight: 900;
  font-size: 28px;
  line-height: 34px;
  letter-spacing: 0.1px;
  color: var(--background-text-color);
  text-transform: uppercase;
}
.checkout__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;   /* left grows, summary fixed 400 (Figma 30082) */
  column-gap: 24px;
  row-gap: 24px;
  align-items: flex-start;
}
.checkout__main {
  display: flex;
  flex-direction: column;
  gap: 12px;                                               /* label ↔ content within a section */
  padding: 24px;                                            /* Figma: title + sections inset 24 */
  border: 2px solid var(--quarternary-background-text-color);
  border-radius: 20px;
}
/* 32px between the title/sections (12 base gap + 20) */
.checkout__title + .checkout__panel,
.checkout__main > .section-subtitle {
  margin-top: 20px;
}
.section-subtitle {
  font-family: var(--custom-title-app-font);
  font-weight: 900;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: 0;
  color: var(--background-text-color);
  text-transform: uppercase;
  margin: 0;
}
.checkout__panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* "How would you like to get your order?" (Figma 32094:10600). Pickup only — the
   delivery side has the persons stepper in this slot instead. */
.order-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 0;
}
.order-options[hidden] {
  display: none;                 /* the flex above would beat the attribute */
}
.order-options__row {
  display: flex;
  align-items: stretch;          /* both cards as tall as the taller label */
  gap: 8px;
}
.order-option {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0 0;
  background: var(--card-color);
  border: 1px solid var(--quarternary-background-text-color);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.order-option.is-selected {
  border-color: var(--accent-color);
  /* inset ring makes the outline read 2px without shifting the card — same
     trick as the store cards and every field in the kit */
  box-shadow: inset 0 0 0 1px var(--accent-color);
}
.order-option__icon {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  object-fit: cover;
}
.order-option__name {
  width: 100%;
  margin: 0;
  padding: 12px;
  font-family: var(--custom-app-font-reg);     /* Main Text Reg 16/20 */
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--card-text-color);
}

/* Unified address block — map on top + address row below inside one card */
.checkout-address {
  background: var(--card-color);
  border: 1px solid var(--quarternary-background-text-color);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;   /* whole block opens the events list */
}
.checkout-address .map-preview {
  border-radius: 0;
}
.checkout-address__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: 60px;
  padding: 0 12px;
  background: transparent;
  border: 0;
  font-family: var(--custom-app-font-bold);   /* Main Text SemiBold */
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
.checkout-address__row:hover {
  background: rgba(0, 0, 0, 0.02);
}

/* Map preview */
.map-preview {
  position: relative;
  height: 160px;
  border-radius: 20px;
  overflow: hidden;
  background: #f3f3f3;
}
.map-preview__map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* the crop is centred on the stop, so the pin lands on it */
  display: block;
}
.map-preview__grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.map-preview__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);   /* vertically centered per spec */
  width: 42px;
  height: auto;
  filter: drop-shadow(0 6px 12px rgba(220, 38, 66, 0.35));
}
/* Required attribution for the OpenStreetMap crop under the pin */
.map-preview__credit {
  position: absolute;
  left: 8px;
  bottom: 6px;
  margin: 0;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.7);
  font-family: var(--custom-app-font-reg);
  font-size: 10px;
  line-height: 14px;
  color: var(--secondary-background-text-color);
}

/* Row buttons (address, ASAP, payment method) */
.row-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 0 12px;
  height: 60px;
  background: var(--card-color);
  border: 1px solid var(--quarternary-background-text-color);
  border-radius: 12px;
  font-family: inherit;
  font-size: 16px;
  color: var(--background-text-color);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
.row-btn:hover {
  background: var(--quarternary-background-text-color);
}
.row-btn--static {
  cursor: default;
}
.row-btn--static:hover {
  background: var(--card-color);
}
.row-btn__label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--background-text-color);
}
.row-btn__label svg {
  color: var(--background-text-color);
}
.row-btn__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.row-btn__chev {
  color: var(--tertiary-background-text-color);
  flex-shrink: 0;
}
/* Guest prompts on checkout: same rows, placeholder-coloured labels */
.row-btn__hint,
.pay-label.is-hint,
.row-btn .is-hint {
  color: var(--secondary-card-text-color);
}
.checkout-proceed {
  flex: 1 1 auto;
  min-width: 0;
  height: 54px;
  padding: 16px 24px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent-color);
  color: var(--accent-text-color);
  font-family: var(--custom-button-font);          /* ButtonFont 18/22 */
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
}
.checkout-proceed:hover {
  background: var(--accent-color-hover);
}
.row-btn--panel {
  background: var(--card-color);
  height: 60px;                 /* payment row same height as other fields (>820) */
  border-radius: 14px;
  padding: 0 17px;
}
.pay-label {
  font-weight: 400;
}
.pay-label--empty {
  color: var(--secondary-card-text-color);
}
.mode-toggle__icon {
  width: 20px;
  height: 20px;
  filter: invert(1);
  flex-shrink: 0;
}
.mode-toggle__btn.is-active .mode-toggle__icon {
  filter: invert(1);
}

/* Row inputs — comment / your info (per Figma 28198:1896) */
.row-input {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  height: 60px;
  background: var(--card-color);
  border: 1px solid var(--field-border-color);
  border-radius: 12px;
  cursor: text;
  transition: border-color 0.15s;
}
.row-input:focus-within {
  border-color: var(--accent-color);
}
.row-input svg {
  color: var(--background-text-color);
  flex-shrink: 0;
}
.row-input .row-btn__icon {
  width: 24px;
  height: 24px;
}
.row-input input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  outline: none;
  font-family: var(--custom-app-font-reg);
  font-size: 16px;
  line-height: 20px;
  color: var(--background-text-color);
  letter-spacing: -0.4px;
}
.row-input input::placeholder {
  color: var(--secondary-background-text-color);
}

/* Right sidebar summary card */
.checkout__aside {
  position: sticky;
  top: calc(var(--header-h) + 24px);
}
.checkout-summary {
  background: var(--background-color);
  border: 2px solid var(--quarternary-background-text-color);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 32px;
}
.checkout-summary__body {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
/* "Your Order" list in the checkout summary (Figma 30079:7284) */
.checkout-order {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.co-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.co-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--quarternary-background-text-color);
}
.co-item__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.co-item__name {
  margin: 0;
  font-family: var(--custom-app-font-bold);   /* Body SemiBold */
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
}
.co-item__mods {
  margin: 0;
  font-family: var(--custom-app-font-reg);     /* Footnote Reg */
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.4px;
  color: var(--secondary-background-text-color);
}
.co-item__meta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
}
.co-item__qty,
.co-item__price {
  font-family: var(--custom-app-font-bold);     /* Body SemiBold */
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.4px;
  color: var(--card-price-color);
  white-space: nowrap;
}
.co-item__qty {
  font-family: var(--custom-app-font-reg);      /* Footnote Reg 14/18 */
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
}
.order-total-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.checkout-summary__body .section-subtitle {
  margin-top: 0;
}

/* Tips segmented row */
.tips {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.tip-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 9px 13px;
  background: var(--card-color);
  border: 1px solid var(--quarternary-background-text-color);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-height: 58px;
}
.tip-btn.is-active {
  border-color: var(--accent-color);
  /* inset ring keeps the selected outline visually 2px without shifting layout */
  box-shadow: inset 0 0 0 1px var(--accent-color);
}
.tip-btn__label {
  font-family: var(--custom-app-font-bold);
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  color: var(--card-text-color);
  letter-spacing: -0.4px;
}
.tip-btn__value {
  font-family: var(--custom-app-font-reg);
  font-size: 14px;
  line-height: 18px;
  color: var(--secondary-card-text-color);
  letter-spacing: -0.4px;
}

/* Checkout footer (price block) — third group inside the summary card */
.checkout-summary__footer {
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 24px;
}
.checkout-summary__total {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.checkout-summary__total-label {
  font-family: var(--custom-app-font-reg);   /* Main Text Reg */
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
}
.checkout-summary__total-value {
  font-family: var(--custom-title-app-font);  /* H4 22/28 */
  font-weight: 900;
  font-size: 22px;
  line-height: 28px;
  color: var(--background-text-color);
  letter-spacing: 0;
  text-transform: uppercase;
}
.proceed-btn {
  flex: 1 1 auto;
  background: var(--accent-color);
  color: var(--accent-text-color);
  border: 0;
  border-radius: var(--radius-pill);
  padding: 16px 24px;
  font-family: var(--custom-button-font);
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: 0.1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
}
.proceed-btn:hover {
  background: var(--accent-color-hover);
}

/* Checkout responsive */
@media (max-width: 1080px) {
  .checkout {
    flex-direction: column;
    gap: 24px;
  }
  .checkout__body {
    width: 100%;
  }
  .checkout__grid {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .checkout__aside {
    position: static;
  }
}
/* On large screens keep BACK above the "I'll attend the event" block —
   the base column layout already does this, so no left-shift override. */

/* Checkout → flat mobile single column, ≤820 only (Figma 30068:2687).
   The 820–1080 band uses the desktop layout collapsed to one column
   (Figma 30086:3247) — handled by base styles + the generic ≤1080 block. */
@media (max-width: 820px) {
  /* Compact side padding for the whole mobile checkout (header included) */
  .page-checkout {
    --page-pad: 16px;
  }
  /* Header: [back] · [divider] · [logo icon] … [hamburger]; no account icon.
     Same treatment on checkout and rewards (Figma 30065:3098). */
  .page-rewards {
    --page-pad: 16px;
  }
  /* Back-arrow header packs left: [back] · [divider] · [logo] … [hamburger] */
  .page-checkout .site-header__inner,
  .page-rewards .site-header__inner,
  .page-profile .site-header__inner {
    justify-content: flex-start;
    gap: 16px;
  }
  .page-checkout .site-header--back .header-back,
  .page-rewards .site-header--back .header-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: var(--header-surface-hover);
    border-radius: 12px;
    color: var(--header-text-color);
    flex-shrink: 0;
  }
  .page-checkout .site-header--back .header-divider,
  .page-rewards .site-header--back .header-divider {
    display: block;
    width: 1px;
    height: 34px;
    background: var(--header-divider-color);
    flex-shrink: 0;
  }
  .page-checkout .brand,
  .page-rewards .brand,
  .page-profile .brand {
    width: auto;
    align-self: center;      /* icon-only logo sits inside the band again */
    margin-top: 0;
  }
  .page-checkout .brand__full,
  .page-rewards .brand__full,
  .page-profile .brand__full {
    display: none;
  }
  .page-checkout .brand__icon,
  .page-rewards .brand__icon,
  .page-profile .brand__icon {
    display: block;
    height: 54px;
    width: 54px;
  }
  .page-checkout .header-icons,
  .page-rewards .header-icons,
  .page-profile .header-icons {
    margin-left: auto;            /* hamburger stays pinned right */
  }
  .page-checkout .icon-btn[aria-label="Account"],
  .page-rewards .icon-btn[aria-label="Account"] {
    display: none;
  }
  /* Rewards mobile header carries NO address/mode controls (Figma 30065:3098) */
  .page-rewards .header-controls {
    display: none;
  }
  /* Back lives in the header now — hide the in-content pill */
  .page-checkout .checkout > .back-btn {
    display: none;
  }

  /* Flat single column — drop the desktop card frames */
  .page-checkout .checkout {
    padding: 24px 16px 120px;   /* top 24, sides 16, room for the fixed bottom bar */
  }
  .page-checkout .checkout__main {
    border: 0;
    border-radius: 0;
    padding: 0;
  }
  /* Sections 24 apart on mobile (12 base gap + 12) */
  .page-checkout .checkout__title + .checkout__panel,
  .page-checkout .checkout__main > .section-subtitle {
    margin-top: 12px;
  }
  .page-checkout .checkout-summary {
    border: 0;
    border-radius: 0;
    padding: 0;
  }
  .page-checkout .checkout-summary__body {
    padding: 0;
  }
  /* No "Your Order" list on the mobile checkout */
  .page-checkout .checkout-order {
    display: none;
  }
  /* Payment method before Tips (mobile order) */
  .page-checkout .checkout-pay-label,
  .page-checkout .row-btn--panel {
    order: 1;
  }
  .page-checkout .checkout-tips-label,
  .page-checkout .tips {
    order: 2;
  }

  /* Fixed bottom bar: Total + Proceed */
  .page-checkout .checkout-summary__footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: var(--background-color);
    border-top: 1px solid var(--quarternary-background-text-color);
    padding: 16px;
    gap: 16px;
  }
  .page-checkout .proceed-btn {
    height: 52px;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
  }

  /* ---- Updated type scale & field heights (Figma 30068:2687) ---- */
  /* Page title → H4 22/28; section labels → Headline SemiBold 18 */
  .page-checkout .checkout__title {
    font-size: 22px;
    line-height: 28px;
  }
  .page-checkout .section-subtitle {
    font-size: 18px;
    line-height: 22px;
  }
  /* Row fields → 52px tall, label text Footnote Reg 14 (address row keeps its own) */
  .page-checkout .row-btn,
  .page-checkout .row-input {
    height: 52px;
    font-size: 14px;
  }
  .page-checkout .row-input input,
  .page-checkout .row-input input::placeholder {
    font-size: 14px;
    line-height: 18px;
  }
  /* Address row under the map → 52px tall, 12px side padding, 14px text */
  .page-checkout .checkout-address__row {
    min-height: 0;
    height: 52px;
    padding: 0 12px;
    font-size: 14px;
    line-height: 18px;
  }
  /* Pickup / Catering cards → Footnote Reg 14/18; two of them share the row,
     so the long label wraps to fewer lines at the phone's width */
  .page-checkout .order-option__name {
    font-size: 14px;
    line-height: 18px;
  }
  /* Number of persons → 12px side padding */
  .page-checkout .row-btn--static {
    padding: 0 12px;
  }
  /* Tips: label 14/18, value 12/16 */
  .page-checkout .tip-btn__label {
    font-size: 14px;
    line-height: 18px;
  }
  .page-checkout .tip-btn__value {
    font-size: 12px;
    line-height: 16px;
  }
  /* Order total rows → Caption 12/16 */
  .page-checkout .order-total__row,
  .page-checkout .order-total__row--total span,
  .page-checkout .order-total__row--total span:last-child {
    font-size: 12px;
    line-height: 16px;
  }
  /* Footer total value → Main Text SemiBold 16 */
  .page-checkout .checkout-summary__total-value {
    font-family: var(--custom-app-font-bold);
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
  }
}

/* =====================================================
   BACK BUTTON (Rewards page pill)
   ===================================================== */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--quarternary-background-text-color);
  color: var(--background-text-color);
  border-radius: 12px;
  font-family: var(--custom-button-font);
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: 0.1px;
  text-transform: uppercase;
  align-self: flex-start;
  transition: background 0.15s;
}
.back-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}
.back-btn svg {
  flex-shrink: 0;
}
/* Rewards page — capsuled back button per Figma 30131:14605 */
.page-rewards .back-btn,
.page-checkout .back-btn {
  border-radius: var(--radius-pill);
  font-weight: 600;
  letter-spacing: 0;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 1280px) {
  :root {
    --page-pad: 40px;
  }
  .section-title {
    font-family: var(--custom-title-app-font);
    font-size: 40px;
    line-height: 48px;
  }
  .card__title {
    font-family: var(--custom-app-font-bold);
    font-size: 18px;
    line-height: 22px;
  }
}

@media (max-width: 1080px) {
  /* Deliver/Store toggle becomes too cramped at this width — hide it.
     The lone address pill should hug its content and pin to the right edge
     (instead of stretching across .header-controls). */
  .mode-toggle {
    display: none;
  }
  .header-controls {
    justify-content: flex-end;
  }
  .header-controls > .address-pill {
    flex: 0 0 auto;
  }
  .app {
    grid-template-columns: 220px 1fr;
    padding: 40px var(--page-pad);
  }
  :root {
    --sidebar-w: 220px;
  }
  .cat-btn__icon {
    width: 48px;
    /* aspect-ratio inherited from base — height becomes 32px automatically */
  }
  .cat-btn {
    font-size: 15px;
  }
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .mode-toggle__btn {
    font-family: var(--custom-app-font-bold);
    padding: 8px 10px;
    font-size: 14px;
  }
  .address-pill {
    padding: 0 16px;
    font-size: 15px;
  }
}

/* =====================================================
   MOBILE ≤820px — separate mobile layout per Figma 28198:1950
   ===================================================== */
@media (max-width: 820px) {
  :root {
    --page-pad: 16px;
  }
  /* Sign-in banner → compact mobile variant (Figma 30086:3923) */
  .signin-banner {
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
  }
  .signin-banner__icon {
    width: 42px;
    height: 42px;
  }
  .signin-banner__text {
    gap: 4px;
  }
  .signin-banner__title {
    font-family: var(--custom-app-font-bold);   /* Main Text SemiBold 16/20 */
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.4px;
    text-transform: none;
  }
  .signin-banner__sub {
    font-size: 12px;                             /* Caption1 Reg 12/16 */
    line-height: 16px;
    letter-spacing: -0.4px;
  }
  /* ---- Header: Logo (icon only) + ENTER DELIVERY ADDRESS + hamburger ---- */
  .brand {
    width: auto;
    align-self: center;      /* icon-only logo sits inside the band again */
    margin-top: 0;
  }
  .brand__full {
    display: none;
  }
  .brand__icon {
    display: block;
    height: 54px;
    width: 54px;
  }
  .site-header__inner {
    padding: 0 var(--page-pad);
    gap: 12px;
  }
  /* Logo pinned left, hamburger pinned right, and the address pill fills whatever
     is left between them (Figma 30103:5381). */
  .header-right {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    gap: 16px;
    margin-left: auto;
  }
  .header-controls {
    flex: 1 1 auto;
    min-width: 0;
    gap: 0;
  }
  .header-controls > .header-address {
    flex: 1 1 auto;
    width: 100%;
  }
  .header-icons {
    gap: 0;
  }
  /* Hide mode toggle and user icon on mobile — only address pill + hamburger remain */
  .mode-toggle,
  .icon-btn[aria-label="Account"] {
    display: none;
  }
  /* Address pill hugs its content (SmallButtonFont 14, padding 12/16) */
  .header-controls > .address-pill,
  .address-pill {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 16px;
    height: auto;
  }
  /* Event point pill → full width, content left-aligned inside it */
  .header-address {
    height: auto;
    padding: 10px 12px;
    gap: 6px;
    justify-content: flex-start;
  }
  .header-address__place {
    font-size: 14px;
    line-height: 18px;
  }
  .header-address__when {
    font-size: 12px;
    line-height: 16px;
  }
  /* The full street address only fits the desktop pill (Figma 30102:5338 is the
     >1080 variant) — below that the line keeps just the opening hours. */
  .header-address__addr {
    display: none;
  }
  .header-address__place {
    max-width: 100%;          /* the pill is as wide as the header now */
  }
  /* ---- Cart button: size=mobile — SmallButtonFont (14/16 SemiBold) ---- */
  .cart-pill {
    height: 56px;
    padding: 12px 20px;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
  }
  .cart-pill strong {
    font-weight: 600;
  }
  .cart-pill__icon {
    width: 22px;
    height: 22px;
  }

  /* Section: 12px between the title block and the cards */
  .section {
    gap: 12px;
  }
  /* 4px between the section title and "You have 0 points" */
  .section-head__text {
    gap: 4px;
  }
  /* Search field → Footnote Reg */
  .sidebar-search input {
    font-size: 14px;
    line-height: 18px;
  }

  /* ---- App shell: single column, no sidebar column ---- */
  .app {
    grid-template-columns: 1fr;
    padding: 16px var(--page-pad) 24px;
    gap: 24px;
  }

  /* ---- Sidebar wrapper dissolves — its children become direct grid children
       of .app so .categories can be sticky throughout the whole page scroll,
       while .sidebar-search stays in normal flow (scrolls out of view). ---- */
  .sidebar {
    display: contents;
  }
  /* Explicit grid order: categories → search → content */
  .categories {
    order: 0;
    position: sticky;
    top: var(--header-h);
    z-index: 40;
    background: var(--background-color);
    flex-direction: row;
    align-items: flex-start;
    overflow-x: auto;
    gap: 4px;                                  /* Figma space-2xs */
    padding: 16px var(--page-pad) 8px;         /* Figma: pt 16 / pb 8 / pl 16 */
    margin: 0 calc(-1 * var(--page-pad));
    scrollbar-width: none;
  }
  .sidebar-search {
    order: 1;
    height: 48px;
  }
  .content {
    order: 2;
  }
  .categories::-webkit-scrollbar { display: none; }
  /* Each category becomes a column: icon on top, small text below */
  .cat-btn {
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    gap: 8px;                                  /* Figma space-xs (icon ↔ text) */
    padding: 0;
    width: fit-content;                        /* hug: 60px base, grows with text */
    min-width: 60px;                           /* Figma image width */
    max-width: 96px;                           /* beyond this the label wraps to 2 lines */
    background: transparent;
    font-family: var(--custom-app-font-reg);   /* Caption1 Reg */
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: -0.4px;
    text-align: center;
    white-space: normal;                       /* allow wrapping past 96px */
  }
  .cat-btn:hover,
  .cat-btn.is-active {
    background: transparent;
  }
  .cat-btn__icon {
    width: 60px;
    /* aspect-ratio 3/2 → height auto = 40px */
    border-radius: 6.667px;
  }
  /* Enable the forced break (e.g. Combo Plate/Beef Broccoli) only in the mobile chip row */
  .cat-btn__br {
    display: inline;
  }

  /* ---- Section headings on mobile → H4 (Figma) ---- */
  .section-title {
    font-family: var(--custom-title-app-font);
    font-size: 22px;
    line-height: 28px;
  }
  /* "You have 0 points" → Footnote Reg */
  .section-sub {
    font-size: 14px;
    line-height: 18px;
  }
  /* "ALL" button → SmallButtonFont (CustomButtonFont SemiBold 14/16) */
  .all-btn {
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
  }
  .content {
    gap: 40px;
  }

  /* ---- Rewards cards: horizontal scroll ----
     Row extends to viewport edges (negative margin) but padding-inline pushes
     the first card 16px from the left before any scroll. */
  #rewards .card-grid {
    display: flex;
    grid-template-columns: none;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--page-pad));
    padding: 4px 16px 8px;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
  }
  #rewards .card-grid::-webkit-scrollbar { display: none; }
  /* Rewards slider tile — fluid width (~146px at a ~390 phone), scales with the
     viewport while keeping the horizontal slider + peek of the next card. */
  #rewards .card {
    flex: 0 0 41%;
    scroll-snap-align: start;
  }

  /* ---- Other sections: 2-column grid ---- */
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  /* ---- Universal mobile card sizing (Figma 28205:5648 default state) ----
     Applies to every section — Rewards slider tiles and 2-col grid cards
     alike. Title 12/16, body padding 8 gap 12, price-btn padding 8 gap 8
     font 12 radius 8, add/qty icons 18px, count overlay 22/28, radius 12. */
  .card,
  .card--featured {
    border-radius: 12px;
  }
  .card__img {
    border-radius: 12px;
  }
  .card__body {
    padding: 8px;
    gap: 12px;
  }
  .card__title {
    font-family: var(--custom-app-font-bold);
    font-size: 12px;
    line-height: 16px;
    min-height: 16px;
  }
  .price-btn,
  .card__qty {
    padding: 8px;
    gap: 8px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    height: auto;
  }
  .price-btn__add,
  .card__qty button,
  .card__qty button img {
    width: 18px;
    height: 18px;
  }
  .card__count-overlay {
    font-size: 22px;
    line-height: 28px;
    border-radius: 12px;
  }
  .card__badge {
    font-family: var(--custom-app-font-bold);
    font-size: 12px;
    line-height: 16px;
    padding: 2px 8px;
  }
  .card .coin {
    width: 14px;
    height: 14px;
  }
}

/* Categories 440–820: scale proportionally — items fill the row (flex-grow) and
   the icon scales keeping its 3:2 ratio. Below 440 the fixed 60px / hug-to-96
   rule from the <820 block above still applies (row scrolls). */
@media (min-width: 440px) and (max-width: 820px) {
  .cat-btn {
    flex: 1 1 0;
    min-width: 60px;
    max-width: none;
  }
  .cat-btn__icon {
    width: 100%;
  }
}

/* Rewards mobile page (Figma 30065:3098 / header 30065:3015) */
@media (max-width: 820px) {
  /* Back-arrow header: [back] · [divider] · [logo icon] … [hamburger] */
  .site-header--back .header-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: var(--header-surface-hover);
    border-radius: 12px;
    color: var(--header-text-color);
    flex-shrink: 0;
  }
  .site-header--back .header-divider {
    display: block;
    width: 1px;
    height: 34px;
    background: var(--header-divider-color);
    flex-shrink: 0;
  }
  /* No address pill / mode toggle in the rewards mobile header */
  .site-header--back .address-pill {
    display: none;
  }

  /* Top padding above the Rewards title (Figma 30065:3102 — pt 32) */
  .page-rewards .app {
    padding-top: 32px;
  }
  /* No sidebar (categories + search) and no in-content Back on the rewards list */
  .page-rewards .sidebar {
    display: none;
  }
  .page-rewards .content > .back-btn {
    display: none;
  }
  /* Title H4 / "You have" Footnote Reg */
  .page-rewards .section-title {
    font-size: 22px;
    line-height: 28px;
  }
  .page-rewards .section-sub {
    font-size: 14px;
    line-height: 18px;
  }
}

/* Cart → full-screen on mobile (Figma cart 320-820/full) */
@media (max-width: 820px) {
  .cart-panel {
    width: 100vw;
  }
  /* Vertical rhythm per Figma: body pt 32 / sides 16, 24 between blocks;
     title → items = 12 */
  .cart-panel__body {
    padding: 32px 16px 24px;
    gap: 24px;
  }
  .cart-panel__head {
    margin-bottom: -12px;
  }
  /* Promo field text + Apply button → Footnote Reg */
  .promo input,
  .promo input::placeholder,
  .promo__apply {
    font-size: 14px;
    line-height: 18px;
  }
  /* Upsell: 8px between cards, images locked to 3:2 */
  .upsell__row {
    gap: 8px;
    margin: 0 -16px;
    padding: 4px 0 12px 16px;
    scroll-padding-inline: 16px;
  }
  .upsell-card__img {
    height: auto;
    aspect-ratio: 3 / 2;
  }
  /* Top bar: back + divider + logo + hamburger */
  .cart-panel__topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    height: var(--header-h);
    padding: 0 16px;
    background: var(--background-color);
    border-bottom: 1px solid var(--quarternary-background-text-color);
  }
  .cart-panel__topbar .header-back {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: var(--quarternary-background-text-color);
    border: 0;
    border-radius: 12px;
    color: var(--background-text-color);
    box-shadow: none;
    cursor: pointer;
  }
  .cart-panel__topbar .header-divider {
    display: block;
    width: 1px;
    height: 34px;
    background: rgba(34, 34, 34, 0.12);
  }
  .cart-panel__logo {
    height: 54px;
    width: 54px;
    display: block;
  }
  .cart-panel__menu {
    margin-left: auto;
  }

  /* "Your Order" / section headings → Headline SemiBold 18 */
  .cart-panel__title,
  .cart-panel .upsell h3,
  .cart-panel .order-total h3 {
    font-size: 18px;
    line-height: 22px;
  }

  /* Cart item image: 105×70, radius 12 */
  .cart-item__img {
    width: 105px;
    height: 70px;
    border-radius: 12px;
  }
  /* Name → Main Text SemiBold 16, mods → Caption1 Reg 12, price → 16 */
  .cart-item__name {
    font-size: 16px;
    line-height: 20px;
  }
  .cart-item__opts {
    font-size: 12px;
    line-height: 16px;
  }
  .cart-item__price {
    font-family: var(--custom-app-font-bold);
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
  }

  /* "Add more items" — quarternary pill, accent text, SmallButtonFont */
  .cart-add-more {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 12px 16px;
    background: var(--quarternary-background-text-color);
    color: var(--accent-color);
    border-radius: var(--radius-pill);
    font-family: var(--custom-button-font);
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    text-transform: uppercase;
  }

  /* Upsell tile 132 wide */
  .cart-panel .upsell-card {
    flex: 0 0 132px;
  }
  /* Narrower tile keeps the smaller title it has always had — the desktop
     variant (Figma 28012:3622) is the only one confirmed at 16/20 */
  .cart-panel .upsell-card__title {
    font-size: 12px;
    line-height: 16px;
  }

  /* Order total rows → Caption 12 */
  .cart-panel .order-total__row {
    font-size: 12px;
    line-height: 16px;
  }
  .cart-panel .order-total__row--total span,
  .cart-panel .order-total__row--total span:last-child {
    font-size: 12px;
    line-height: 16px;
  }

  /* Footer: Total (label 14 / value 16) + Go to Checkout SmallButtonFont */
  .cart-panel__total-label {
    font-size: 14px;
    line-height: 18px;
  }
  .cart-panel__total-value {
    font-family: var(--custom-app-font-bold);
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
  }
  .cart-panel__cta {
    height: 52px;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
  }
}

@media (max-width: 560px) {
  :root {
    --header-h: 64px;
  }
  .site-header__inner {
    padding: 0 16px;   /* Figma: header keeps 16px side padding (hamburger 16 from edge) */
    gap: 8px;
  }
  .icon-btn {
    width: 34px;
    height: 34px;
  }
  .header-icons {
    gap: 8px;
  }
  .section-title {
    font-family: var(--custom-title-app-font);
    font-size: 22px;
    line-height: 28px;
  }
  .card__emoji {
    font-size: 80px;
  }
  .floating-bar {
    right: 16px;
    bottom: 16px;
  }
  .cart-pill {
    height: 56px;
    padding: 12px 20px;
    font-size: 14px;
    line-height: 16px;
  }
}

/* ---- Cart panel responsive ---- */
@media (max-width: 540px) {
  .cart-panel {
    width: 100vw;
  }
  .cart-panel__footer {
    padding: 14px 16px 20px;
    gap: 16px;
  }
}

/* =====================================================
   SIGN-IN MODAL (Figma 30103:6222 desktop / 30103:6224 mobile)
   ===================================================== */
.signin-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(34, 34, 34, 0.5);
}
.signin-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}
.signin-modal.is-open {
  opacity: 1;
  visibility: visible;
}
.signin-modal__dialog {
  position: relative;
  width: 560px;
  max-width: 100%;
  pointer-events: auto;
}
.signin-modal__card {
  width: 100%;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  background: var(--background-color);
  border-radius: 32px;
  display: flex;
  flex-direction: column;
}
.signin-modal__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 32px 24px 24px;
}
.signin-modal__title {
  font-family: var(--custom-title-app-font);   /* H4 22/28 */
  font-weight: 900;
  font-size: 22px;
  line-height: 28px;
  text-transform: uppercase;
  color: var(--background-text-color);
}
.signin-modal__sub {
  font-family: var(--custom-app-font-reg);      /* Main Text Reg 16/20 */
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
}
.signin-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 24px;
}
.signin-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--custom-app-font-reg);
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  cursor: pointer;
  transition: background 0.15s;
}
.signin-btn__icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.signin-btn--google {
  background: #f2f2f2;
  color: #1f1f1f;
}
.signin-btn--google:hover {
  background: #e6e6e6;
}
.signin-btn--manual {
  background: var(--quarternary-background-text-color);
  color: var(--background-text-color);
}
.signin-btn--manual:hover {
  background: rgba(34, 34, 34, 0.08);
}
.signin-btn--manual .signin-btn__icon {
  color: var(--background-text-color);
}
.signin-modal__legal {
  padding: 24px 24px 32px;
  text-align: center;
  font-family: var(--custom-app-font-reg);      /* Footnote Reg 14/18 */
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.4px;
  color: var(--secondary-background-text-color);
}
.signin-modal__legal a {
  color: inherit;
  text-decoration: underline;
}
.signin-modal__close {
  position: absolute;
  top: 0;
  left: calc(100% + 18px);
  width: 46px;
  height: 46px;
  border-radius: var(--radius-pill);
  background: var(--background-color);
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--background-text-color);
  transition: background 0.15s;
}
.signin-modal__close:hover {
  background: var(--card-color);
}

/* Mobile → bottom sheet (Figma 30103:6224) */
@media (max-width: 820px) {
  .signin-modal {
    align-items: flex-end;
    padding: 0;
  }
  .signin-modal__dialog {
    width: 100%;
    max-width: none;
  }
  .signin-modal__card {
    width: 100%;
    max-width: none;
    max-height: 92vh;
    border-radius: 38px 38px 0 0;
    transform: translateY(100%);
    transition: transform 0.25s ease;
  }
  .signin-modal.is-open .signin-modal__card {
    transform: translateY(0);
  }
  .signin-modal__sub {
    font-size: 14px;
    line-height: 18px;
  }
  .signin-btn {
    font-size: 14px;
    line-height: 18px;
  }
  .signin-modal__legal {
    padding: 24px;
    font-size: 12px;
    line-height: 16px;
  }
  /* Close → top-right circle inside the sheet (mobile sign-in variants) */
  .signin-modal__close {
    display: inline-flex;
    top: 16px;
    right: 16px;
    left: auto;
    width: 46px;
    height: 46px;
    border-radius: var(--radius-pill);
    background: var(--quarternary-background-text-color);
  }
  .signin-modal__text {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 72px;   /* clear the top-right close button */
  }
}

/* =====================================================
   SIGN-IN FLOW — email step, code step, success toast
   (Figma 30103:12906 / 12907 / 12908 / 13015)
   ===================================================== */
.signin-step {
  width: 100%;
  display: flex;
  flex-direction: column;
}
/* Email field (Figma text input, filled state) */
.signin-field-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;                      /* field → step pagination */
  padding: 12px 24px;
}
/* Step pagination under the field (Figma 30350:38621) */
.signin-pager {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.signin-pager__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--tertiary-background-text-color);
}
.signin-pager__dot.is-current {
  width: 20px;
  background: var(--accent-color);
}
.signin-field {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 60px;
  padding: 0 12px;
  background: var(--card-color);
  border: 1px solid var(--field-border-color);
  border-radius: 12px;
}
.signin-field__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
/* The caption never folds away: an empty field is "caption + empty line", a
   filled one "caption + value". The state reads off position, not off a
   disappearing label, and the field is never a blank box with no name on it. */
.signin-field__label {
  display: block;
  font-family: var(--custom-app-font-reg);   /* Caption1 Reg 12/16 */
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.4px;
  color: var(--secondary-card-text-color);
}
/* Focus reads as a 2px accent edge: the field's own 1px border turns accent and
   the inset ring adds the second pixel — same trick as every other field, and
   the geometry never moves. A 2px ring on top of the border would read as 3. */
.signin-field:focus-within {
  border-color: var(--accent-color);
  box-shadow: inset 0 0 0 1px var(--accent-color);
}
.signin-field__input {
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  outline: none;
  font-family: var(--custom-app-font-reg);   /* Main Text Reg 16/20 */
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--card-text-color);
}
.signin-field__input::placeholder {
  color: var(--secondary-card-text-color);
}
.signin-field__clear {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--card-text-color);
  cursor: pointer;
}
.signin-field.has-value .signin-field__clear {
  display: inline-flex;
}
/* Continue button (email step) */
.signin-modal__btnblock {
  /* The code step stacks two controls here — Verify over Get new code — so the
     block has to space them; the other steps hold a single button. */
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 24px 32px;
}
.signin-continue {
  width: 100%;
  height: 54px;
  padding: 16px 24px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent-color);
  color: var(--accent-text-color);
  font-family: var(--custom-button-font);
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
}
.signin-continue:hover {
  background: var(--accent-color-hover);
}
.signin-continue:disabled {
  background: var(--secondary-accent-color);
  cursor: default;
}
/* Code step — 4 digit boxes */
.signin-code {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
}
.signin-code__box {
  width: 60px;
  height: 60px;
  text-align: center;
  background: var(--card-color);
  border: 1px solid var(--field-border-color);
  border-radius: 12px;
  outline: none;
  font-family: var(--custom-title-app-font);
  font-weight: 900;
  font-size: 22px;
  line-height: 28px;
  color: var(--card-text-color);
  transition: border-color 0.15s, box-shadow 0.15s;
}
/* Focus reads as a 2px accent ring without the 1px reflow a wider border causes */
.signin-code__box:focus {
  border-color: var(--accent-color);
  box-shadow: inset 0 0 0 1px var(--accent-color);
}
/* Resend timer (disabled) */
.signin-resend {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 54px;
  padding: 16px 24px;
  /* It became a <button> when the code step gained Verify, so the browser's own
     border has to go — the countdown is a flat pill. */
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--quarternary-background-text-color);
  color: var(--secondary-accent-color);
  font-family: var(--custom-button-font);
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  text-transform: uppercase;
  cursor: default;                     /* nothing to press while it counts down */
  transition: background 0.15s, color 0.15s;
}
/* Once the timer runs out it is a real control again */
.signin-resend:not(:disabled) {
  color: var(--accent-color);
  cursor: pointer;
}
.signin-resend:not(:disabled):hover,
.signin-resend:not(:disabled):focus-visible {
  background: var(--tertiary-background-text-color);
}

/* Success toast (Figma 30103:13015) */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(12px);
  z-index: 120;
  padding: 16px 24px;
  border-radius: 16px;
  color: #fff;
  font-family: var(--custom-app-font-bold);   /* Body SemiBold 18/22 */
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.4px;
  max-width: calc(100vw - 32px);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.toast--success {
  background: var(--success-color);
}
/* Info (Figma Tooltip / type=info): InfoColor with its own text colour; the
   message is a sentence, so it wraps instead of running across the screen */
.toast--info {
  width: max-content;
  max-width: min(480px, calc(100vw - 32px));
  background: var(--info-color);
  color: var(--info-text-color);
}
/* Error (Figma Tooltip / type=error): ErrorColor with ErrorTextColor */
.toast--error {
  width: max-content;
  max-width: min(480px, calc(100vw - 32px));
  background: var(--error-color);
  color: var(--error-text-color);
}

/* =====================================================
   ACCOUNT MODAL — registered users (Figma 30114:13501)
   ===================================================== */
.account-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(34, 34, 34, 0.5);
}
.account-modal {
  position: fixed;
  top: calc(var(--header-h) + 8px);
  right: var(--page-pad);
  z-index: 100;
  width: 363px;
  max-width: calc(100vw - 32px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.account-modal.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.account-modal__card {
  width: 100%;
  background: var(--background-color);
  border-radius: 32px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.account-modal__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 32px 24px 24px;
}
.account-modal__name {
  font-family: var(--custom-title-app-font);   /* H2 34/41 */
  font-weight: 900;
  font-size: 34px;
  line-height: 41px;
  text-transform: uppercase;
  color: var(--background-text-color);
}
.account-modal__id {
  display: flex;
  align-items: center;
  gap: 12px;
}
.account-modal__id span {
  font-family: var(--custom-app-font-reg);      /* Main Text Reg 16/20 */
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--accent-color);
}
.account-modal__copy {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--accent-color);
}
.account-modal__list {
  border-top: 1px solid var(--quarternary-background-text-color);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.account-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--custom-button-font);       /* ButtonFont 18/22 */
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  text-transform: uppercase;
  color: var(--card-text-color);
  transition: opacity 0.15s;
}
.account-row:hover {
  opacity: 0.7;
}
.account-row svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.account-row--accent {
  color: var(--accent-color);
}
.account-row--logout {
  color: var(--secondary-card-text-color);
  border-top: 1px solid var(--quarternary-background-text-color);
  padding-top: 24px;
}

/* =====================================================
   BURGER MENU MODAL — desktop dropdown (Figma 30116:13612)
   + mobile full-height sheet (Figma 30118:13814)
   ===================================================== */
.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(34, 34, 34, 0.5);
}
.menu-modal {
  position: fixed;
  top: calc(var(--header-h) + 8px);
  right: var(--page-pad);
  z-index: 100;
  width: 363px;
  max-width: calc(100vw - 32px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.menu-modal.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.menu-modal__card {
  width: 100%;
  background: var(--background-color);
  border-radius: 32px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  padding: 32px 24px 12px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.menu-modal__account {   /* account section — mobile + signed-in only */
  display: none;
}
.menu-modal__links {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.menu-modal__link {
  font-family: var(--custom-button-font);       /* ButtonFont 18/22 */
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  text-transform: uppercase;
  color: var(--card-text-color);
  transition: opacity 0.15s;
}
.menu-modal__link:hover {
  opacity: 0.7;
}
.menu-modal__app {
  border-top: 1px solid var(--quarternary-background-text-color);
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.menu-modal__app-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.menu-modal__app-title {
  font-family: var(--custom-title-app-font);     /* Headline SemiBold 18/22 */
  font-weight: 900;
  font-size: 18px;
  line-height: 22px;
  text-transform: uppercase;
  color: var(--accent-color);
}
.menu-modal__badges {
  display: flex;
  align-items: center;
  gap: 12px;
}
.menu-modal__badges img {
  height: 24px;
  width: auto;
  display: block;
}
.menu-modal__badges-full {   /* full store badges — mobile only */
  display: none;
}
.menu-modal__qr {
  flex-shrink: 0;
  padding: 6px;
}
.menu-modal__qr img {
  width: 87px;
  height: 87px;
  display: block;
}
.menu-modal__close {   /* mobile only */
  display: none;
}

/* Mobile → full-height bottom sheet combining account + links + app */
@media (max-width: 820px) {
  .menu-modal {
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    display: flex;
    align-items: flex-end;
    transform: none;
  }
  .menu-modal.is-open {
    transform: none;
  }
  .menu-modal__card {
    width: 100%;
    max-height: 100dvh;
    max-height: 100dvh;          /* fit the visible viewport (mobile URL bar) */
    overflow-y: auto;            /* scroll when the content is taller than the screen */
    border-radius: 38px 38px 0 0;
    padding: 0;
    gap: 0;
    box-shadow: none;
    transform: translateY(100%);
    transition: transform 0.25s ease;
  }
  .menu-modal.is-open .menu-modal__card {
    transform: translateY(0);
  }
  /* Close lives ON the sheet (top-right) and stays pinned while the sheet scrolls */
  .menu-modal__close {
    position: sticky;
    top: 16px;
    align-self: flex-end;
    margin: 16px 16px -46px;      /* top-right, takes no vertical space in flow */
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--quarternary-background-text-color);
    color: var(--background-text-color);
    cursor: pointer;
  }
  /* Account section: profile for signed-in users, a sign-in prompt for guests */
  .menu-modal__account {
    display: flex;
    flex-direction: column;
  }
  .menu-modal__acc-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 32px 24px 24px;
  }
  .menu-modal__acc-title {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .menu-modal__acc-name {
    font-family: var(--custom-title-app-font);   /* H4 22/28 */
    font-weight: 900;
    font-size: 22px;
    line-height: 28px;
    text-transform: uppercase;
    color: var(--background-text-color);
  }
  .menu-modal__acc-id {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .menu-modal__acc-id span {
    font-family: var(--custom-app-font-reg);      /* Footnote Reg 14/18 */
    font-size: 14px;
    line-height: 18px;
    letter-spacing: -0.4px;
    color: var(--accent-color);
  }
  /* Guest: Sign in (SmallButtonFont 14/16, 52 tall) instead of points and the list */
  .menu-modal .menu-modal__signin {
    width: 100%;
    height: 52px;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
  }
  .menu-modal.is-authed .menu-modal__signin,
  .menu-modal:not(.is-authed) .menu-modal__acc-title .points-pill,
  .menu-modal:not(.is-authed) .menu-modal__acc-list {
    display: none;
  }
  .menu-modal__acc-copy {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--accent-color);
  }
  .menu-modal__acc-list {
    border-top: 1px solid var(--quarternary-background-text-color);
    border-bottom: 1px solid var(--quarternary-background-text-color);
    padding: 24px 16px 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  /* Rows use SmallButtonFont 14/16 on mobile; logout is just a list row here */
  .menu-modal .account-row {
    font-size: 14px;
    line-height: 16px;
  }
  .menu-modal .account-row--logout {
    border-top: 0;
    padding-top: 0;
  }
  .menu-modal__links {
    padding: 24px 16px;
    gap: 24px;
  }
  .menu-modal__link {
    font-size: 14px;                              /* SmallButtonFont 14/16 */
    line-height: 16px;
  }
  .menu-modal__app {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 24px 16px;
    gap: 12px;
  }
  .menu-modal__badges,
  .menu-modal__qr {
    display: none;
  }
  .menu-modal__badges-full {
    display: flex;
    gap: 8px;
    padding-top: 12px;
  }
  .menu-modal__badges-full img {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
  }
}

/* =====================================================
   MOBILE sign-in flow steps — use mobile element sizes
   (Figma 30103:11983 email / 30103:12692 code / 30112:13092 toast).
   Placed last so it wins over the base flow rules above.
   ===================================================== */
@media (max-width: 820px) {
  .signin-field-wrap,
  .signin-modal__btnblock {
    padding-left: 16px;
    padding-right: 16px;
  }
  .signin-code {
    padding-left: 16px;
    padding-right: 16px;
    gap: 8px;
  }
  /* Continue / resend → SmallButtonFont 14/16, height 52 */
  .signin-continue,
  .signin-resend {
    height: 52px;
    font-size: 14px;
    line-height: 16px;
  }
  /* Success toast → Footnote Reg 14/18 */
  .toast {
    font-size: 14px;
    line-height: 18px;
  }
}

/* =====================================================
   SITE FOOTER (Figma 30124:14463 — >1080 / 1080-820 / <820)
   ===================================================== */
.site-footer {
  border-top: 1px solid var(--quarternary-background-text-color);
  background: var(--footer-background-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 32px 80px;
}
.site-footer__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
}
.site-footer__link {
  font-family: var(--custom-button-font);       /* SmallButtonFont 14/16 */
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--footer-text-color);
  transition: opacity 0.15s;
}
/* ---------- Tap targets (WCAG 2.2, 2.5.8) ----------
   These are 16-22px tall because that is the type they are set in. Rather than
   pad them and move the layout, each grows a transparent ::after to 24px — the
   same trick the search cross already uses. Vertical only: the neighbours of
   every one of them sit to the left and right. */
.site-footer__link {
  position: relative;
}
.site-footer__link::after {
  content: '';
  position: absolute;
  inset: -4px 0;
}
.site-footer__link:hover {
  opacity: 0.7;
}
.site-footer__copy {
  font-family: var(--custom-app-font-reg);       /* Footnote Reg 14/18 */
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.4px;
  color: var(--footer-text-color);
  text-align: center;
}
@media (max-width: 1080px) {
  .site-footer {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (max-width: 820px) {
  .site-footer {
    padding-left: 16px;
    padding-right: 16px;
  }
  .site-footer__links {
    flex-direction: column;
    gap: 12px;
  }
}

/* Checkout mobile: keep the footer clear of the fixed Proceed bar */
@media (max-width: 820px) {
  .page-checkout .site-footer {
    margin-bottom: 92px;
  }
}

/* =====================================================
   SEO TEXT — under the menu cards (Figma 30129:14590)
   ===================================================== */
.seo-text {
  display: flex;
  flex-direction: column;
  gap: 20px;                 /* blank-line spacing between paragraphs */
  padding: 24px 64px 24px 0; /* py-24, pr-64 */
}
.seo-text p {
  margin: 0;
  font-family: var(--custom-app-font-reg);   /* Main Text Reg 16/20 */
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
}
@media (max-width: 820px) {
  .seo-text {
    padding-right: 0;
  }
  .seo-text p {
    font-size: 12px;      /* Caption1 Reg 12/16 */
    line-height: 16px;
  }
}

/* =====================================================
   Checkout — comment Save button + Apple Pay button
   (Figma 28198:1920 / 30131:15186)
   ===================================================== */
.row-input__save {
  display: none;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--custom-app-font-reg);   /* Main Text Reg 16/20 */
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--accent-color);
}
.row-input:focus-within .row-input__save {
  display: inline-block;
}

.applepay-btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 54px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: #000;
  color: #fff;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  transition: background 0.15s;
}
.applepay-btn:hover {
  background: #1a1a1a;
}
.applepay-btn__text {
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
  letter-spacing: -0.4px;
}
/* Apple logo + "Pay" read as one mark — tight pairing, like the  Pay glyph */
.applepay-btn__mark {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.applepay-btn__logo {
  width: 16px;
  height: 20px;
  display: block;
  position: relative;
  top: -1px;              /* optically centre the apple against the cap height */
}
.applepay-btn__pay {
  font-size: 22px;
  font-weight: 600;
  line-height: 25px;
  letter-spacing: -1px;
}

/* =====================================================
   CART — empty state (Figma 28001:882)
   ===================================================== */
.cart-empty {
  display: none;             /* shown via .cart-panel.is-empty */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex: 1 1 auto;
  padding: 24px 40px 24px 24px;
  text-align: center;
}
.cart-empty__icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}
.cart-empty__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 48px;
}
.cart-empty__title {
  margin: 0;
  font-family: var(--custom-title-app-font);   /* H3 28/34 */
  font-weight: 900;
  font-size: 28px;
  line-height: 34px;
  text-transform: uppercase;
  color: var(--background-text-color);
}
.cart-empty__sub {
  margin: 0;
  font-family: var(--custom-app-font-reg);      /* Body Reg 18/22 */
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
}
/* "Go to menu" (Figma 30168:8208) — hugs its label, not full width */
.cart-empty__cta {
  flex-shrink: 0;
  padding: 16px 24px;
  border-radius: var(--radius-pill);
  background: var(--accent-color);
  color: var(--accent-text-color);
  font-family: var(--custom-button-font);        /* ButtonFont 18/22 */
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s;
}
.cart-empty__cta:hover {
  background: var(--accent-color-hover);
}
/* Empty cart: only the empty state remains — no list, upsell, promo or footer */
.cart-panel.is-empty .cart-empty {
  display: flex;
}
.cart-panel.is-empty .cart-items,
.cart-panel.is-empty .cart-panel__head,
.cart-panel.is-empty .cart-add-more,
.cart-panel.is-empty .upsell,
.cart-panel.is-empty .promo,
.cart-panel.is-empty .order-total,
.cart-panel.is-empty .cart-panel__footer {
  display: none;
}
.cart-panel.is-empty .cart-panel__body {
  justify-content: center;
  flex: 1 1 auto;
}
@media (max-width: 820px) {
  .cart-empty {
    padding: 24px 16px;
  }
  .cart-empty__text {
    padding: 0 16px;
  }
  .cart-empty__title {
    font-size: 22px;
    line-height: 28px;
  }
  .cart-empty__sub {
    font-size: 14px;
    line-height: 18px;
  }
}

/* =====================================================
   POSITION WITH MODIFIERS (Figma 28165:1070)
   ===================================================== */
.item-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(34, 34, 34, 0.5);
}
.item-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}
.item-modal.is-open {
  opacity: 1;
  visibility: visible;
}
.item-modal__dialog {
  position: relative;
  /* leave room on the sides for the outside close button down to ~1080 */
  width: min(1088px, calc(100vw - 140px));
  pointer-events: auto;
}
.item-modal__card {
  display: flex;
  width: 100%;
  height: 860px;
  max-height: calc(100dvh - 48px);
  background: var(--background-color);
  border-radius: 32px;
  overflow: hidden;
  pointer-events: auto;
}
/* Left — photo with the name and description under it (Figma 28165:1073).
   568 = 24 + 520 image + 24, so the image sits at 520 on a full-width modal. */
.item-modal__side {
  /* the modifiers column keeps its exact 520 (three 160px cards + two 8px gaps),
     so the photo column is the one that gives way when the modal narrows */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  min-width: 0;
}
.item-modal__media {
  flex: 0 0 auto;
}
.item-modal__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;   /* 520 x 346.67 at full width */
  object-fit: cover;
  border-radius: 24px;
  display: block;
}
/* Right — modifiers column */
.item-modal__content {
  flex: 0 0 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 30px 0 0 0;
}
.item-modal__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Figma 30265:21775 — the text block is inset 32 from the right of its column */
  padding-right: 32px;
}
.item-modal__title {
  margin: 0;
  font-family: var(--custom-title-app-font);      /* H2 34/41 */
  font-weight: 900;
  font-size: 34px;
  line-height: 41px;
  text-transform: uppercase;
  color: var(--background-text-color);
}
.item-modal__desc {
  margin: 0;
  font-family: var(--custom-app-font-reg);         /* Main Text Reg 16/20 */
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
}
/* Scrollable modifier groups */
.item-modal__groups {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-right: 24px;
  padding-bottom: 32px;   /* desktop: keep the last group off the add-to-cart bar */
}
.mod-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mod-group__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.mod-group__title {
  margin: 0;
  font-family: var(--custom-title-app-font);      /* Headline SemiBold 18/22 */
  font-weight: 900;
  font-size: 18px;
  line-height: 22px;
  text-transform: uppercase;
  color: var(--background-text-color);
}
.mod-group__req {
  margin: 0;
  font-family: var(--custom-app-font-reg);         /* Footnote Reg 14/18 */
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.4px;
  color: var(--secondary-background-text-color);
}
.mod-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Collapsed group — only the title + sub-line remain, tap to expand */
.mod-group.is-collapsed .mod-list {
  display: none;
}
/* Sub-line shows the chosen modifier in accent instead of the hint */
.mod-group__req.is-chosen {
  color: var(--accent-color);
}
/* Modifier card */
.mod {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 160px;
  padding: 0;
  background: var(--card-color);
  border: 1px solid var(--quarternary-background-text-color);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mod.is-selected {
  border-color: var(--accent-color);
  /* inset ring keeps the selected outline visually 2px without shifting layout */
  box-shadow: inset 0 0 0 1px var(--accent-color);
}
.mod__img {
  display: block;
  width: 100%;
  aspect-ratio: 117 / 78;
  overflow: hidden;
  border-radius: 12px;
  /* Modifiers without artwork keep the cell as a neutral plate, so every card in
     a group is the same height (same treatment as the category thumbnails). */
  background: var(--quarternary-background-text-color);
  flex-shrink: 0;
}
.mod__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mod__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  flex: 1 1 auto;   /* fill the card height so the price can pin to the bottom */
}
.mod__name {
  font-family: var(--custom-app-font-bold);        /* Footnote Semibold 14/18 */
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.4px;
  color: var(--card-text-color);
}
.mod__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-height: 16px;                                 /* keeps priceless cards aligned */
  margin-top: auto;                                 /* price stays at the card bottom */
}
.mod__price {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: var(--custom-app-font-bold);
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.4px;
  color: var(--accent-color);          /* paid modifier price (Figma 30147:4317) */
}
/* Selected modifier is marked with a tick (Figma 30147:4379) */
.mod__tick {
  width: 16px;
  height: 16px;
  margin-left: auto;
  display: none;
  flex-shrink: 0;
}
.mod.is-selected .mod__tick {
  display: block;
}
.mod__plus {
  font-size: 12px;
  line-height: 1;
}
/* Bottom bar: price + Add to cart */
.item-modal__bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 32px;
  padding: 8px 24px 24px 0;
  background: var(--background-color);
}
.item-modal__price {
  flex-shrink: 0;
  font-family: var(--custom-app-font-bold);        /* Body SemiBold 18/22 */
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
  white-space: nowrap;
}
.item-modal__cta {
  flex: 1 1 auto;
  height: 54px;
  padding: 16px 24px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent-color);
  color: var(--accent-text-color);
  font-family: var(--custom-button-font);           /* ButtonFont 18/22 */
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
}
.item-modal__cta:hover {
  background: var(--accent-color-hover);
}
.item-modal__close {
  position: absolute;
  top: 0;
  left: calc(100% + 12px);
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--background-color);
  color: var(--background-text-color);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.item-modal__close:hover {
  background: var(--card-color);
}

/* 1080–820: photo stacks on top, the WHOLE dialog scrolls vertically,
   and the close cross comes from the mobile mockup (white circle, top-right) */
@media (max-width: 1080px) {
  .item-modal__dialog {
    width: min(640px, calc(100vw - 48px));
  }
  .item-modal__card {
    flex-direction: column;
    width: 100%;
    height: auto;
    max-height: calc(100dvh - 48px);
    overflow-y: auto;        /* image + title + groups scroll as one */
    overflow-x: hidden;
  }
  /* stacked: image, title, groups flow as siblings again */
  .item-modal__side {
    display: contents;
  }
  .item-modal__media {
    flex: 0 0 auto;
    padding: 16px;
  }
  .item-modal__media img {
    aspect-ratio: 2 / 1;
    border-radius: 16px;
  }
  .item-modal__content {
    padding: 0 0 0 24px;
    display: block;          /* groups flow into the dialog scroll */
    flex: 0 0 auto;
    width: auto;
    min-height: 0;
  }
  .item-modal__head {
    padding: 8px 24px 16px;  /* own gutters now that it sits outside the column */
  }
  /* groups no longer scroll on their own */
  .item-modal__groups {
    overflow: visible;
    flex: 0 0 auto;
    min-height: 0;
  }
  /* add-to-cart bar stays pinned at the bottom while the dialog scrolls */
  .item-modal__bottom {
    position: sticky;
    bottom: 0;
    z-index: 2;
  }
  /* mobile close: white circle inside the top-right corner */
  .item-modal__close {
    top: 16px;
    left: auto;
    right: 16px;
    background: var(--background-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  }
}
/* Mobile position with modifiers — bottom sheet (Figma 30165:5734) */
@media (max-width: 820px) {
  .item-modal {
    padding: 0;
    align-items: flex-end;
  }
  .item-modal__dialog {
    width: 100%;
  }
  .item-modal__card {
    width: 100%;
    height: 92vh;
    max-height: 92vh;
    border-radius: 38px 38px 0 0;
    overflow-y: auto;              /* the whole sheet scrolls — image, title, groups */
    overflow-x: hidden;
  }
  /* Image full-bleed at the top, ~3:2 */
  .item-modal__media {
    padding: 0;
    width: 100%;
    flex-shrink: 0;
  }
  .item-modal__media img {
    height: auto;
    aspect-ratio: 560 / 373.33;
    border-radius: 0;
  }
  .item-modal__content {
    padding: 0;
    display: block;                /* let the groups flow into the sheet scroll */
    flex: 0 0 auto;
  }
  /* Groups no longer scroll on their own — they grow with the content */
  .item-modal__groups {
    overflow: visible;
    flex: 0 0 auto;
    min-height: 0;
  }
  /* Add-to-cart bar stays pinned at the bottom while the sheet scrolls */
  .item-modal__bottom {
    position: sticky;
    bottom: 0;
    z-index: 2;
  }
  .item-modal__head {
    padding: 16px;
    gap: 16px;
  }
  .item-modal__title {
    font-size: 28px;              /* H3 28/34 */
    line-height: 34px;
  }
  .item-modal__desc {
    font-size: 14px;             /* Footnote Reg 14/18 */
    line-height: 18px;
  }
  .item-modal__groups {
    padding: 0 16px 16px;   /* mobile: 16px gap before the add-to-cart bar */
    gap: 24px;
  }
  .item-modal__bottom {
    padding: 8px 16px 32px;
    gap: 16px;
  }
  .item-modal__cta {
    height: 52px;
    padding: 12px 16px;
    font-size: 14px;             /* SmallButtonFont 14/16 */
    line-height: 16px;
  }
  /* Compact modifier cards: 3 per row, growing proportionally with the screen */
  .mod {
    width: auto;
    flex: 0 0 calc((100% - 16px) / 3);   /* 3 cards + two 8px gaps */
    border-radius: 8px;
  }
  .mod__img {
    border-radius: 8px;
  }
  .mod__name,
  .mod__price {
    font-size: 12px;             /* Caption1 12/16 */
    line-height: 16px;
  }
  /* Close: white circle overlapping the image's top-right corner */
  .item-modal__close {
    top: 16px;
    right: 16px;
    background: var(--background-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  }
}

/* =====================================================
   EVENTS LIST MODAL (Figma 30180:5219) — opened from the
   header address pill ("I'll attend the event" mode)
   ===================================================== */
.events-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(34, 34, 34, 0.5);
}
.events-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}
.events-modal.is-open {
  opacity: 1;
  visibility: visible;
}
.events-modal__dialog {
  position: relative;
  width: min(1080px, calc(100vw - 140px));   /* 460 list + 620 map */
  pointer-events: auto;
}
.events-modal__card {
  display: flex;
  width: 100%;
  height: min(766px, calc(100dvh - 48px));
  background: var(--background-color);
  border-radius: 32px;
  overflow: hidden;
  pointer-events: auto;
}
/* ---- Left pane: switch + title + scrolling schedule ---- */
.events-modal__pane {
  position: relative;
  flex: 0 0 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 10px 24px 24px;   /* 10 on the right leaves room for the scrollbar */
}
/* Deliver / Pickup switch (Figma 30265:23407) */
.events-switch {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  background: var(--card-color);
  border: 1px solid var(--quarternary-background-text-color);
  border-radius: var(--radius-pill);
}
.events-switch__btn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--card-color);
  font-family: var(--custom-app-font-bold);   /* Footnote Semibold 14/18 */
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
  white-space: nowrap;
  cursor: pointer;
}
.events-switch__btn.is-active {
  border-color: var(--accent-color);
}
.events-switch__btn img {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: block;
}
.events-modal__title {
  flex-shrink: 0;
  margin: 0;
  font-family: var(--custom-title-app-font);   /* H4 22/28 */
  font-weight: 900;
  font-size: 22px;
  line-height: 28px;
  text-transform: uppercase;
  color: var(--background-text-color);
}
/* Store search (Figma 30265:22638) — same pill as the state picker's field, but
   it fills the pane instead of carrying the picker's fixed 510px. */
.events-search {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 12px;
  /* No width: the flex item stretches, and the 14 it gives back on the right is
     what the list keeps for its scrollbar — so the field is exactly a card wide. */
  margin-right: 14px;
  margin-top: -8px;               /* title → field is 16; the pane gap already gives 24 */
  border-radius: var(--radius-pill);
  /* Outlined, not filled (Figma 32092:9007) — the same field stands over the
     map tiles on the phone, where a translucent fill would disappear. */
  border: 1px solid var(--field-border-color);
  cursor: text;
}
.events-search__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
}
.events-search__icon img {
  width: 16px;
  height: 16px;
  display: block;
}
.events-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--custom-app-font-reg);
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.events-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.events-search input::placeholder {
  color: var(--secondary-background-text-color);
}
/* Filter chips under the search (Figma 32096:10883). Independent toggles, so
   they are pressed buttons rather than a radio set. */
.events-filters {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px;
  margin-right: 14px;             /* line up with the cards and the search */
  margin-top: -8px;               /* search → filters is 16; the pane gap gives 24 */
}
.events-filters[hidden] {
  display: none;
}
.events-filter {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 40px;
  padding: 8px 12px;
  /* Filled, no outline (Figma 32096:10941). The border stays in the box so the
     pressed state can colour it without the chip growing a pixel. */
  background: var(--quarternary-background-text-color);
  border: 1px solid transparent;
  border-radius: 30px;
  font-family: var(--custom-app-font-reg);     /* Footnote Reg 14/18 */
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.events-filter:hover {
  border-color: var(--tertiary-background-text-color);
}
/* On: the accent edge reads 2px without the chip growing a pixel */
.events-filter[aria-pressed="true"] {
  border-color: var(--accent-color);
  box-shadow: inset 0 0 0 1px var(--accent-color);
}
.events-filter__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
}
.events-filter__icon img {
  display: block;
  width: 16px;
  height: 16px;
}

/* Nothing matched — the list says so rather than going blank */
.events-modal__empty {
  margin: 0;
  font-family: var(--custom-app-font-reg);
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--secondary-background-text-color);
}
.events-modal__empty[hidden] {
  display: none;
}
/* The state name opens the state picker (Figma 30168:8120) */
.events-modal__state {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  text-transform: inherit;
  color: var(--accent-color);
  text-decoration: underline;
  text-decoration-skip-ink: none;
  cursor: pointer;
}
.events-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: -8px;              /* field → first card is 16, the pane gap gives 24 */
  padding: 0 14px 32px 0;        /* 14 = 8 gutter + 6 scrollbar */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: #dedede transparent;
}
/* Search, filters and the list scroll together: nothing above the cards stays
   pinned except the switch and the title, so the list keeps the pane's height */
.events-modal__scroll {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: inherit;                  /* the pane's own 24 (16 on the phone) */
  margin-top: -8px;              /* title → field is 16; the pane gap gives 24 */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #dedede transparent;
}
.events-modal__scroll::-webkit-scrollbar {
  width: 6px;
}
.events-modal__scroll::-webkit-scrollbar-thumb {
  background: #dedede;
  border-radius: 10px;
}
/* The field's own -8 moved to the wrapper: inside a scroller it would be cut off */
.events-modal__scroll > .events-search {
  margin-top: 0;
}
.events-modal__scroll > .events-modal__body {
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
}
/* Delivery keeps its own layout: the wrapper steps out of the way */
.events-modal.is-delivery .events-modal__scroll {
  display: contents;
}
.events-day {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.events-day__title {
  margin: 0;
  font-family: var(--custom-title-app-font);   /* Headline SemiBold 18/22 */
  font-weight: 900;
  font-size: 18px;
  line-height: 22px;
  text-transform: uppercase;
  color: var(--background-text-color);
}
.events-day__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* ---- Event card (Figma 30265:23428) ---- */
/* Tooltip inside a card (Figma 32094:9861): a store that is shut right now says
   so in its own line, between the details and the delivery services. */
.event-card__tooltip {
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--info-color);
  font-family: var(--custom-app-font-bold);      /* Footnote SemiBold 14/18 */
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.4px;
  color: var(--info-text-color);
}
/* `display: flex` below would beat the attribute, so filtering states it again */
.event-card[hidden] {
  display: none;
}
.event-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px;
  background: var(--card-color);
  border: 1px solid var(--quarternary-background-text-color);
  border-radius: 24px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  /* picking a stop on the map scrolls its card in — keep it clear of the
     Order now bar that overlays the bottom of the list */
  scroll-margin: 12px 0 90px;
}
.event-card.is-selected {
  border-color: var(--accent-color);
  /* inset ring keeps the selected outline visually 2px without shifting layout */
  box-shadow: inset 0 0 0 1px var(--accent-color);
}
.event-card__name {
  margin: 0;
  font-family: var(--custom-app-font-bold);    /* Body SemiBold 18/22 */
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.4px;
  color: #222222;
}
.event-card__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.event-card__row {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* All three info icons share one 24px box (calendar / clock / pin) */
.event-card__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: block;
}
.event-card__text {
  font-family: var(--custom-app-font-reg);     /* Footnote Reg 14/18 */
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.4px;
  color: #222222;
}
.event-card__link {
  /* 24px tall to tap (WCAG 2.2, 2.5.8). Not a ::after like the others — the
     `overflow: hidden` below would clip it — so the box grows by padding and
     hands the space straight back, leaving the layout where it was. */
  padding: 3px 0;
  margin: -3px 0;
  /* one line, clipped — as in the frame, so every card keeps the same height */
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--custom-app-font-reg);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.4px;
  color: var(--accent-color);
  text-decoration: underline;
  text-decoration-skip-ink: none;
}
/* Ordering status line (Figma 30265:24598) */
.event-card__status {
  margin: 0;
  font-family: var(--custom-app-font-bold);    /* Footnote Semibold 14/18 */
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.4px;
  color: var(--success-color);
}
.event-card__status--later {
  color: var(--secondary-card-text-color);
}
/* Delivery aggregators the store is on (Figma 30265:24672) */
/* ---- Order now bar — only once a card is picked (Figma 30265:24672) ---- */
.events-modal__bottom {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  padding: 12px 0 24px;
  background: var(--background-color);
}
.events-modal__pane.has-cta .events-modal__body {
  padding-bottom: 100px;          /* keep the last card clear of the button */
}
.events-modal__cta {
  width: 100%;
  height: 54px;
  padding: 16px 24px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent-color);
  color: var(--accent-text-color);
  font-family: var(--custom-button-font);      /* ButtonFont 18/22 */
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
}
.events-modal__cta:hover {
  background: var(--accent-color-hover);
}
/* Primary disabled (Figma 30005:1783) — accent at 40%, label stays accent-text */
.events-modal__cta:disabled,
.events-modal__cta:disabled:hover {
  background: var(--secondary-accent-color);
  cursor: default;
}
.event-card__available {
  display: flex;
  flex-direction: column;
  gap: 4px;                                     /* space 2XS */
}
.event-card__available-label {
  margin: 0;
  font-family: var(--custom-app-font-bold);     /* Footnote Semibold 14/18 */
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.4px;
  color: var(--card-text-color);
}
.event-card__available-logos {
  display: flex;
  align-items: center;
  gap: 16px;                                    /* Figma 32031:11328 — 48 - 32 */
}
.event-card__available-logos img {
  display: block;
  width: 32px;
  height: 32px;
}
/* ---- Right pane: map ---- */
.events-modal__map {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
/* The basemap is a 1152x1152 OSM mosaic of Oahu (zoom 11 rendered at 0.75 — the
   largest scale that still fits all six stores in the 620px pane). The pins sit
   on it in its own pixel space, so they stay put whatever size the map pane ends
   up, and there is a tile of margin on every side so centring even the outermost
   store never exposes the edge. At rest the canvas shows every store. */
.events-modal__canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1152px;
  height: 1152px;
  transform: translate(-663px, -647px);
  transition: transform 0.35s ease;
}
.events-modal__basemap {
  width: 1152px;
  height: 1152px;
  display: block;
}
.events-modal__pin {
  position: absolute;
  transform: translate(-50%, -100%);   /* the pin tip sits on the coordinate */
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;                     /* a marker picks its event too */
}
.events-modal__pin img {
  display: block;
  width: 42px;
  height: 61px;
}
/* Waipahu and Waipahu Town Center are 2 km apart, so at island scale their pins
   overlap — hover pulls one to the front. */
.events-modal__pin:hover,
.events-modal__pin:focus-visible {
  z-index: 2;
}
/* state=false — a stop whose ordering hasn't opened yet (Figma 30266:29449) */
.events-modal__pin.is-off,
.events-modal__mark.is-off {
  opacity: 0.5;
}
/* Picked: a zoom-12 close-up of that stop takes over the pane, with the marker
   in the middle (Figma 30265:25044 — 60 x 86.4) */
.events-modal__zoom {
  position: absolute;
  inset: 0;
  pointer-events: none;   /* transparent at rest, but still over the pins */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.events-modal__map.is-picked .events-modal__zoom {
  opacity: 1;
}
.events-modal__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.events-modal__map:not(.is-picked) .events-modal__mark,
.events-modal__map:not(.is-picked) .events-modal__home {
  display: none;   /* the overview has its own pins */
}
/* Where the user is, next to the store (Figma 30265:24672 — the second marker
   sits 144px right and 226px above the store one). Only shown when we actually
   have their location. */
.events-modal__mark--user {
  display: none;
  transform: translate(calc(-50% + 144px), calc(-50% - 226px));
}
.events-modal__map.is-picked.is-located .events-modal__mark--user {
  display: block;
}
.events-modal__mark img {
  display: block;
  width: 60px;
  height: 86px;
}
/* ---- Delivery form (Figma 32044:16881) ----
   Shares the left pane with the store list; the switch decides which is up.
   Figma geometry: 412 wide inside the 460 pane, 16px between fields, 60 tall. */
.delivery {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-right: 14px;   /* matches the list's allowance for the scrollbar */
}
.delivery__title {
  margin: 0 0 0;
  font-family: var(--custom-app-font-bold);   /* Body SemiBold 18/22 */
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
  text-wrap: balance;
}
.dfield {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  height: 60px;
  padding: 0 12px;
  background: var(--card-color);
  border: 1px solid var(--field-border-color);
  border-radius: 12px;
  cursor: text;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dfield:focus-within {
  border-color: var(--accent-color);
  box-shadow: inset 0 0 0 1px var(--accent-color);
}
/* Always on, like every other field in the kit — the caption is the field's
   name, not a hint that vanishes the moment you start typing. */
.dfield__label {
  font-family: var(--custom-app-font-reg);     /* Caption1 Reg 12/16 */
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.4px;
  color: var(--secondary-card-text-color);
}
.dfield__input {
  width: 100%;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  outline: none;
  font-family: var(--custom-app-font-reg);     /* Main Text Reg 16/20 */
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--card-text-color);
}
.dfield__input::placeholder {
  color: var(--secondary-card-text-color);
}
.delivery__row {
  display: flex;
  gap: 16px;
}
.delivery__extra {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- Delivery services (Figma 32044:17003 / 32048:17404) ---- */
.deliver-services {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;   /* 32 between the address group and this one, less the 16 gap */
}
.deliver-services__title {
  margin: 0;
  font-family: var(--custom-app-font-bold);    /* Body SemiBold 18/22 */
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.4px;
  color: var(--card-text-color);
}
.deliver-services__row {
  display: flex;
  gap: 12px;
}
/* Read-only by default: the screen names who delivers here, there is nothing to
   pick — so no hover, no pointer, and not a button. The one card that carries a
   link is the exception. */
.deliver-service {
  text-decoration: none;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--card-color);
  border: 1px solid var(--quarternary-background-text-color);
  border-radius: 12px;
}
.deliver-service--link {
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.deliver-service--link:hover,
.deliver-service--link:focus-visible {
  border-color: var(--accent-color);
  box-shadow: inset 0 0 0 1px var(--accent-color);
}
.deliver-service__logo {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: block;
  object-fit: contain;
}
.deliver-service__name {
  min-width: 0;
  font-family: var(--custom-app-font-bold);    /* Footnote Semibold 14/18 */
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.4px;
  color: var(--card-text-color);
}
.delivery__row .dfield {
  flex: 1 1 0;
  min-width: 0;
}

/* ---- Delivery map: the address centred, the store's zone over it ---- */
.events-modal__zone {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.events-modal__map.is-delivery.has-address .events-modal__zone {
  opacity: 1;
}
/* Delivery never uses the store close-up */
.events-modal__map.is-delivery .events-modal__zoom,
.events-modal__map.is-delivery .events-modal__mark {
  display: none;
}
/* With an address it's that neighbourhood; without one there's nothing to centre
   on, so the island overview stays up exactly as in "I'll visit the store". */
.events-modal__map.is-delivery.has-address .events-modal__canvas {
  display: none;
}
.events-modal__map.is-delivery:not(.has-address) .events-modal__zone {
  opacity: 0;
}
/* A store with no online ordering of its own has no delivery zone to draw */
.events-modal__map.no-zone .events-modal__zone-shape {
  display: none;
}
.events-modal__zone-map,
.events-modal__zone-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.events-modal__zone-map {
  object-fit: cover;
}
/* slice mirrors the basemap's object-fit: cover, so the polygon stays registered
   to the streets underneath at any pane size */
.events-modal__zone-shape path {
  fill: #008300;
  fill-opacity: 0.15;
  stroke: #008300;
  stroke-width: 2;
}
/* Address outside every delivery zone (Figma 32126:9566): the tooltip
   (Footnote SemiBold 14/18 on InfoColor) takes the place of the extra fields */
.delivery__tooltip {
  margin: 0;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--info-color);
  font-family: var(--custom-app-font-bold);
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.4px;
  color: var(--info-text-color);
}
.delivery__tooltip[hidden],
.delivery__extra[hidden] {
  display: none;
}
.events-modal__home {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: none;
}
.events-modal__home img {
  display: block;
  width: 60px;
  height: 86px;
}
.events-modal__map.is-delivery.has-address .events-modal__home {
  display: block;
}
.events-modal__credit {
  position: absolute;
  left: 8px;
  bottom: 6px;
  margin: 0;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.7);
  font-family: var(--custom-app-font-reg);
  font-size: 10px;
  line-height: 14px;
  color: var(--secondary-background-text-color);
}
/* Locate button — accent circle with a white arrow (Figma 32032:12334, 46x46) */
.events-modal__navigate {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.events-modal__navigate:hover {
  background: var(--accent-color-hover);
}
.events-modal__navigate img {
  width: 24px;
  height: 24px;
  display: block;
  /* locate.svg fill is black by default — invert to white for the accent circle */
  filter: brightness(0) invert(1);
}
.events-modal__close {
  position: absolute;
  top: 0;
  left: calc(100% + 12px);
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--background-color);
  color: var(--background-text-color);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.events-modal__close:hover {
  background: var(--card-color);
}

/* Below the two-pane width the map is the first thing to go */
@media (max-width: 1080px) {
  .events-modal__dialog {
    width: min(560px, calc(100vw - 48px));
  }
  .events-modal__pane {
    flex: 1 1 auto;
  }
  .events-modal__map {
    display: none;
  }
  /* the cross stays outside the card, as on desktop — at 560px wide there is
     still ~100px of room to the right of the dialog at the 820 end of the range */
}
@media (max-width: 820px) {
  .events-modal {
    padding: 0;
    align-items: flex-end;
  }
  .events-modal__dialog {
    width: 100%;
  }
  .events-modal__card {
    height: min(84vh, 700px);
    border-radius: 32px 32px 0 0;
  }
  .events-modal__pane {
    padding: 16px 6px 16px 16px;
    gap: 16px;
  }
  /* The pane gap is already 16 here, so the two -8 corrections would halve it */
  .events-modal__scroll,
  .events-search,
  .events-filters,
  .events-modal__body {
    margin-top: 0;
  }
  /* One row that scrolls sideways: wrapping would push the list down the screen.
     It ends at the gutter like everything else — no chip half-cut at the edge. */
  .events-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .events-filters::-webkit-scrollbar {
    display: none;
  }
  /* The phone has its own, smaller field (Figma 32100:12277): 44 tall, 8px gap,
     Footnote Reg instead of Main Text Reg. */
  .events-search {
    height: 44px;
    gap: 8px;
  }
  .events-search input {
    font-size: 14px;
    line-height: 18px;
  }
  .events-switch__btn {
    padding: 10px 8px;
    white-space: normal;
  }
  .events-modal__bottom {
    left: 16px;
    right: 16px;
    padding: 12px 0 16px;
  }
  /* the sheet is full-width, so the cross floats above it instead of over the switch */
  .events-modal__close {
    top: auto;
    right: 16px;
    bottom: calc(100% + 12px);
  }
}

/* =====================================================
   STATE SELECTION MODAL (Figma 30168:8120) — opened from
   the state name in the events modal title
   ===================================================== */
.states-backdrop {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(34, 34, 34, 0.5);
}
.states-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}
.states-modal.is-open {
  opacity: 1;
  visibility: visible;
}
.states-modal__dialog {
  position: relative;
  width: min(1080px, calc(100vw - 140px));
  pointer-events: auto;
}
.states-modal__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Height follows the content: at three columns the list is short, and a fixed
     766px left a dead band under it. The cap is what the one-column list needs —
     the body scrolls once the card reaches it. */
  max-height: calc(100dvh - 48px);
  background: var(--background-color);
  border-radius: 32px;
  overflow: hidden;
  pointer-events: auto;
}
.states-modal__head {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-l, 24px);
  padding: 32px 24px 24px;
}
.states-modal__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.states-modal__title {
  margin: 0;
  font-family: var(--custom-title-app-font);      /* H2 34/41 */
  font-weight: 900;
  font-size: 34px;
  line-height: 41px;
  text-transform: uppercase;
  color: var(--background-text-color);
}
.states-modal__sub {
  margin: 0;
  font-family: var(--custom-app-font-reg);         /* Main Text Reg 16/20 */
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
}
/* Search field — pill, quarternary fill, 24px icon box with a 16px glyph */
.states-search {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 510px;
  max-width: 100%;
  height: 52px;
  padding: 12px;
  border-radius: var(--radius-pill);
  background: var(--quarternary-background-text-color);
}
.states-search__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
}
.states-search__icon img {
  width: 16px;
  height: 16px;
  display: block;
}
.states-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--custom-app-font-reg);
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.states-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.states-search input::placeholder {
  color: var(--secondary-background-text-color);
}
/* Columns of state names. --state-cols is the single source of truth for how
   many columns JS renders; the media queries below override it. */
.states-modal__body {
  --state-cols: 3;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 32px 32px;
}
.states-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.state-btn {
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: var(--custom-app-font-bold);        /* Body SemiBold 18/22 */
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.4px;
  color: #222222;
  cursor: pointer;
  transition: color 0.15s;
}
.state-btn::after {
  content: '';
  position: absolute;
  inset: -2px 0;
}
.state-btn:hover,
.state-btn.is-active {
  color: var(--accent-color);
}
.states-modal__empty {
  margin: 0;
  font-family: var(--custom-app-font-reg);
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--secondary-background-text-color);
}
.states-modal__close {
  position: absolute;
  top: 0;
  left: calc(100% + 12px);
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--background-color);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.states-modal__close:hover {
  background: var(--card-color);
}
/* First launch: the choice is required, so there is no way out of the modal.
   Same for the schedule it hands over to — see .events-modal.is-mandatory. */
.states-modal.is-mandatory .states-modal__close,
.events-modal.is-mandatory .events-modal__close {
  display: none;
}

@media (max-width: 1080px) {
  .states-modal__dialog {
    width: min(680px, calc(100vw - 48px));
  }
  .states-modal__body {
    --state-cols: 2;
  }
  .states-modal__close {
    top: 16px;
    left: auto;
    right: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  }
}
@media (max-width: 560px) {
  .states-modal__body {
    --state-cols: 1;
  }

}
@media (max-width: 820px) {
  .states-modal {
    padding: 0;
    align-items: flex-end;
  }
  .states-modal__dialog {
    width: 100%;
  }
  .states-modal__card {
    max-height: min(80vh, 700px);
    border-radius: 32px 32px 0 0;
  }
  .states-modal__head {
    padding: 32px 16px 24px;
  }
  .states-modal__body {
    padding: 12px 16px 32px;
  }
}

/* =====================================================
   LANDING PAGE (Figma 30198:6075 desktop / 30198:6706 mobile)
   Standalone page: app pitch + store links, no header/cart.
   ===================================================== */
.page-landing {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--background-color);
}
.landing {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 80px;
}
.landing__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  width: 100%;
  max-width: 1360px;
}
/* Left column — logo, pitch, QR, website link */
.landing__col {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 593px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 64px;
}
.landing__logo {
  width: 164px;
  height: 72px;
  flex-shrink: 0;
}
.landing__title {
  margin: 0;
  font-family: var(--custom-title-app-font);      /* H1 48/56 */
  font-weight: 900;
  font-size: 48px;
  line-height: 56px;
  text-transform: uppercase;
  color: var(--background-text-color);
}
.landing__title-accent {
  color: var(--accent-color);
}
.landing__scan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
/* Hand-drawn arrow nudging the eye down to the QR */
.landing__arrow {
  display: block;
  width: 96px;
  height: 80px;
  margin-left: 16px;
  color: var(--accent-color);
  animation: landing-arrow-nudge 1.8s ease-in-out infinite;
}
.landing__arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}
@keyframes landing-arrow-nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .landing__arrow {
    animation: none;
  }
}
.landing__qr-link {
  display: block;
  line-height: 0;
}
.landing__qr {
  width: 160px;
  height: 160px;
  flex-shrink: 0;
  display: block;
}
/* Store badges replace the QR on touch screens */
.landing__badges {
  display: none;
  gap: 8px;
}
.landing__badge {
  display: block;
  flex-shrink: 0;
}
.landing__badge img {
  display: block;
  width: 160px;
  height: auto;
}
.landing__web {
  font-family: var(--custom-button-font);          /* ButtonFont 18/22 */
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  text-transform: uppercase;
  color: var(--accent-color);
  /* underlined at rest so it reads as a link; the offset keeps the rule off the
     uppercase baseline, and the hover just thickens it */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.landing__web:hover {
  text-decoration-thickness: 2px;
}
/* Right — app + food composition, square */
.landing__hero {
  flex: 0 1 669px;
  width: 100%;
  max-width: 669px;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
}
/* Footer pinned below the fold content */
.landing-footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 32px 80px;
  border-top: 1px solid var(--quarternary-background-text-color);
  background: var(--background-color);
  text-align: center;
}
.landing-footer__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
}
.landing-footer__links a {
  font-family: var(--custom-button-font);          /* SmallButtonFont 14/16 */
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--secondary-background-text-color);
  text-decoration: none;
  white-space: nowrap;
}
.landing-footer__links a:hover {
  color: var(--background-text-color);
}
.landing-footer__copy {
  margin: 0;
  font-family: var(--custom-app-font-reg);         /* Footnote Reg 14/18 */
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.4px;
  color: var(--secondary-background-text-color);
}

/* Tighter gutters before the two columns get cramped */
@media (max-width: 1240px) {
  .landing {
    padding: 40px;
  }
  .landing-footer {
    padding: 32px 40px;
  }
}

/* Below ~1080 the two columns would squeeze the headline to one word per line,
   so stack them and centre everything. QR stays until the mobile breakpoint. */
@media (max-width: 1080px) {
  .landing__inner {
    flex-direction: column;
    gap: 32px;
  }
  .landing__col {
    align-items: center;
    text-align: center;
    max-width: none;
    width: 100%;
    gap: 32px;
  }
  .landing__title {
    font-size: 40px;
    line-height: 48px;
  }
  .landing__hero {
    flex: 0 0 auto;
    width: 100%;
    max-width: 520px;
  }
}

/* Mobile (Figma 30198:6706): badges instead of the QR, H3 type scale */
@media (max-width: 820px) {
  .landing {
    padding: 32px 16px;
  }
  .landing__inner,
  .landing__col {
    gap: 24px;
  }
  .landing__title {
    font-size: 28px;                               /* H3 28/34 */
    line-height: 34px;
  }
  .landing__scan {
    display: none;
  }
  .landing__badges {
    display: flex;
  }
  .landing__web {
    font-size: 14px;                               /* SmallButtonFont 14/16 */
    line-height: 16px;
  }
  .landing__hero {
    max-width: none;
  }
  .landing-footer {
    padding: 32px 16px;
  }
  .landing-footer__links {
    flex-direction: column;
    gap: 12px;
  }
}

/* Very narrow: let the badges stack rather than overflow */
@media (max-width: 380px) {
  .landing__badges {
    flex-direction: column;
    align-items: center;
  }
}

/* =====================================================
   LOCATION ACCESS (Figma 32038:15672 — 1010 x 450)
   Shown once, coming in from the landing: the menu behind it is stripped back to
   the bare header until a store is confirmed.
   ===================================================== */
.geo-modal {
  position: fixed;
  inset: 0;
  z-index: 120;                        /* above both pickers */
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}
.geo-modal.is-open {
  opacity: 1;
  visibility: visible;
}
.geo-modal__dialog {
  position: relative;
  width: min(1010px, calc(100vw - 140px));
  pointer-events: auto;
}
.geo-modal__card {
  display: flex;
  min-height: 450px;
  background: var(--background-color);
  border-radius: 32px;
  overflow: hidden;
}
.geo-modal__art {
  flex: 0 0 450px;
  display: grid;
  place-items: center;
}
.geo-modal__art img {
  display: block;
  width: 100%;
  height: auto;
}
.geo-modal__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 32px 24px 24px;
}
.geo-modal__title {
  margin: 0;
  font-family: var(--custom-title-app-font);   /* H2 34/41 */
  font-weight: 900;
  font-size: 34px;
  line-height: 41px;
  text-transform: uppercase;
  color: var(--background-text-color);
}
.geo-modal__text {
  margin: 24px 0 0;
  font-family: var(--custom-app-font-reg);     /* Main Text Reg 16/20 */
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
}
.geo-modal__text a {
  color: inherit;
  text-decoration: underline;
  text-decoration-skip-ink: none;
}
.geo-modal__actions {
  margin-top: auto;                    /* the pair pins to the bottom of the card */
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.geo-btn {
  width: 100%;
  height: 54px;
  padding: 16px 24px;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--custom-button-font);      /* ButtonFont 18/22 */
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
}
.geo-btn--allow {
  background: var(--accent-color);
  color: var(--accent-text-color);
}
.geo-btn--allow:hover {
  background: var(--accent-color-hover);
}
/* Secondary button — same fill and hover as .btn-quiet */
.geo-btn--deny {
  background: var(--quarternary-background-text-color);
  color: var(--accent-color);
}
.geo-btn--deny:hover {
  background: var(--tertiary-background-text-color);
}
/* ---- While the flow runs, the page behind is just the header ---- */
.is-locating .header-controls,
.is-locating .app,
.is-locating .site-footer,
.is-locating .floating-bar,
.is-locating .hint {
  display: none !important;
}
/* with the address pill gone the icons would sit next to the logo */
.is-locating .header-icons {
  margin-left: auto;
}
@media (max-width: 1080px) {
  .geo-modal__dialog {
    width: calc(100vw - 48px);
  }
  .geo-modal__card {
    flex-direction: column;
    min-height: 0;
  }
  .geo-modal__art {
    flex: 0 0 auto;
    padding: 16px 16px 0;
  }
  .geo-modal__art img {
    width: min(320px, 70%);
    margin: 0 auto;
  }
  .geo-modal__body {
    padding: 16px 16px 24px;
  }
  .geo-modal__title {
    font-size: 22px;                   /* H4 22/28 */
    line-height: 28px;
  }
  .geo-modal__actions {
    padding-top: 24px;
  }
}
@media (max-width: 820px) {
  .geo-modal {
    padding: 0;
    align-items: flex-end;
  }
  .geo-modal__dialog {
    width: 100%;
  }
  .geo-modal__card {
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    border-radius: 24px 24px 0 0;
  }
}

/* =====================================================
   LANDING (hawaiianbarbecue.com — header + hero, above the fold)
   Geometry measured off the live site at 1440: header 88 tall, hero 729, the blue
   panel 540 wide pinned right, the plate 600 wide. Colours: the red and the dark
   maroon are our own accent / footer tokens; the hero yellow and blue are the
   marketing site's own, kept local.
   ===================================================== */
.page-landing {
  position: relative;
  --ll-yellow: #ffd714;
  --ll-blue: #0763bb;
  --ll-ink: var(--footer-background-color);   /* #470b14 */
  --ll-gutter: 27px;
  background: var(--ll-yellow);
}
/* ---------- Header ---------- */
.ll-header {
  position: relative;
  z-index: 40;
  height: 88px;
  background: var(--accent-color);
  color: var(--accent-text-color);
}
.ll-header__inner {
  max-width: 1440px;
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--ll-gutter);
  display: flex;
  align-items: center;
  gap: 24px;
}
/* the badge is 90 tall inside the 88 band, so it overhangs (as on the live site) */
.ll-header__logo {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 18px;
}
.ll-header__logo img {
  display: block;
  width: auto;
  height: 90px;
}
.ll-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: 12px;
}
.ll-nav a,
.ll-header__locations {
  font-family: var(--custom-app-font-bold);
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--accent-text-color);
  white-space: nowrap;
  transition: opacity 0.15s;
}
.ll-nav a,
.ll-header__locations {
  position: relative;
}
.ll-nav a::after,
.ll-header__locations::after {
  content: '';
  position: absolute;
  inset: -2px 0;
}
.ll-nav a:hover,
.ll-header__locations:hover {
  opacity: 0.75;
}
.ll-nav__has-sub {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
/* Yellow tab pinned under the header on the right edge */
.ll-connect {
  position: absolute;
  top: 88px;
  right: 0;
  z-index: 30;
  padding: 6px 16px 8px;
  border-radius: 0 0 5px 5px;
  background: var(--ll-yellow);
  color: var(--ll-ink);
  font-family: var(--custom-app-font-bold);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.ll-header__search {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-text-color);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.ll-header__search {
  margin-left: auto;
}
.ll-header__burger {
  display: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-text-color);
  cursor: pointer;
}
/* ---------- Buttons (5px corners, as on the live site) ---------- */
.ll-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  font-family: var(--custom-button-font);
  font-weight: 600;
  text-transform: uppercase;
  transition: background 0.15s;
}
.ll-btn--yellow {
  padding: 6px 14px;
  background: var(--ll-yellow);
  color: var(--ll-ink);
  font-size: 14.4px;
  line-height: 18px;
  letter-spacing: 0.72px;
}
.ll-btn--yellow:hover {
  background: #f0ca11;
}
.ll-btn--red {
  padding: 8px 18px;
  background: var(--accent-color);
  color: var(--accent-text-color);
  font-size: 18px;
  line-height: 22.5px;
  letter-spacing: 0.9px;
}
.ll-btn--red:hover {
  background: var(--accent-color-hover);
}
/* ---------- Hero ---------- */
.ll-hero {
  position: relative;
  height: 729px;
  background: var(--ll-yellow);
  overflow: hidden;
}
/* Blue block with the rice-sky tile over it */
.ll-hero__stage {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 540px;
  background: var(--ll-blue) url('/design_2/hb/assets/landing/rice-sky.svg') 400px 300px / 400px repeat;
}
/* 600 wide inside a 540 panel — it overhangs onto the yellow, as on the live site */
.ll-hero__plate {
  position: absolute;
  top: 54px;
  right: 48px;
  width: 600px;
  max-width: none;                     /* wider than the panel on purpose */
  height: auto;
  display: block;
}
.ll-hero__text {
  position: relative;
  z-index: 1;
  max-width: 738px;
  padding: 72px var(--ll-gutter) 0;
}
.ll-hero__title {
  margin: 0;
  font-family: var(--custom-title-app-font);   /* gtPressura Black on the live site */
  font-weight: 900;
  font-size: 86px;
  line-height: 0.9;
  letter-spacing: -0.025em;
  color: var(--accent-color);
}
.ll-hero__title sup {
  font-size: 30%;
  letter-spacing: 0.0125em;
  vertical-align: super;
}
.ll-hero__kicker {
  margin: 37px 0 0;
  font-family: var(--custom-app-font-bold);
  font-weight: 600;
  font-size: 28px;
  line-height: 35px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--ll-ink);
}
.ll-hero__sub {
  margin: 0;
  /* the live site reserves room here so the button keeps its place across carousel
     slides: two line-heights on wide screens, three when the copy wraps more */
  min-height: 54px;
  max-width: 50ch;
  font-family: var(--custom-app-font-reg);
  font-size: 18px;
  line-height: 27px;
  color: var(--ll-ink);
}
.ll-hero__text .ll-btn--red {
  margin-top: 27px;
}
.ll-hero__dots {
  display: flex;
  align-items: center;
  /* 12 wide + 12 apart = 24 between centres, so the 24px targets below meet
     without overlapping each other (WCAG 2.2, 2.5.8) */
  gap: 12px;
  margin-top: 43px;
}
.ll-dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--background-color);
  cursor: pointer;
  transition: width 0.2s;
}
.ll-dot {
  position: relative;
}
.ll-dot::after {
  content: '';
  position: absolute;
  inset: -6px;
}
.ll-dot.is-active {
  width: 34px;
}
@media (max-width: 1240px) {
  .ll-nav {
    gap: 18px;
  }
  .ll-nav a,
  .ll-header__locations {
    font-size: 14px;
    letter-spacing: 0.7px;
  }
  .ll-hero__title {
    font-size: 68px;
  }
  .ll-hero__plate {
    width: 480px;
    right: 24px;
  }
  .ll-hero__panel {
    width: 44%;
  }
}
@media (max-width: 1080px) {
  .ll-nav,
  .ll-header__search,
  .ll-header__locations {
    display: none;
  }
  .ll-header__burger {
    display: grid;
    place-items: center;
    margin-left: auto;
  }
  .ll-hero {
    height: auto;
  }
  /* stacked: copy first, then the blue block with the plate in it */
  .ll-hero__stage {
    position: static;
    width: 100%;
    padding: 24px 0 32px;
  }
  .ll-hero__plate {
    position: relative;
    top: auto;
    right: auto;
    width: min(520px, 86%);
    max-width: 86%;
    margin: 0 auto;
  }
  .ll-hero__text {
    max-width: none;
    padding: 48px var(--ll-gutter) 40px;
  }
  .ll-hero__sub {
    min-height: 81px;                 /* three lines once the copy wraps */
  }
  .ll-connect {
    display: none;                    /* no room for the tab next to the burger */
  }
}
@media (max-width: 560px) {
  .page-landing {
    --ll-gutter: 16px;
  }
  .ll-header {
    height: 64px;
  }
  .ll-header__logo {
    margin-top: 8px;
  }
  .ll-header__logo img {
    height: 64px;
  }
  .ll-hero__title {
    font-size: 44px;
  }
  .ll-hero__kicker {
    margin-top: 24px;
    font-size: 22px;
    line-height: 28px;
  }
  .ll-hero__sub {
    font-size: 16px;
    line-height: 24px;
  }
}

/* =====================================================
   PAYMENT PROCESSING (Figma 30227:14466 desktop / 30224:8196 mobile)
   Shown while the "bank" responds. No close control by design.
   ===================================================== */
.pay-wait {
  position: fixed;
  inset: 0;
  z-index: 200;                    /* above every other modal on checkout */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.85);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}
.pay-wait.is-open {
  opacity: 1;
  visibility: visible;
}
.pay-wait__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 560px;
  max-width: 100%;
  height: 316px;
  background: var(--background-color);
  border-radius: 32px;
}
/* iOS-style 8-bar spinner, accent, ticking round in eight steps */
.pay-wait__spinner {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  animation: pay-wait-spin 0.8s steps(8, end) infinite;
}
.pay-wait__spinner span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4.8px;
  height: 12px;
  margin: -6px 0 0 -2.4px;
  border-radius: 3.2px;
  background: var(--accent-color);
  transform-origin: 50% 50%;
}
.pay-wait__spinner span:nth-child(1) { transform: rotate(0deg)   translateY(-12px); opacity: 1; }
.pay-wait__spinner span:nth-child(2) { transform: rotate(45deg)  translateY(-12px); opacity: 0.87; }
.pay-wait__spinner span:nth-child(3) { transform: rotate(90deg)  translateY(-12px); opacity: 0.75; }
.pay-wait__spinner span:nth-child(4) { transform: rotate(135deg) translateY(-12px); opacity: 0.63; }
.pay-wait__spinner span:nth-child(5) { transform: rotate(180deg) translateY(-12px); opacity: 0.51; }
.pay-wait__spinner span:nth-child(6) { transform: rotate(225deg) translateY(-12px); opacity: 0.39; }
.pay-wait__spinner span:nth-child(7) { transform: rotate(270deg) translateY(-12px); opacity: 0.27; }
.pay-wait__spinner span:nth-child(8) { transform: rotate(315deg) translateY(-12px); opacity: 0.15; }
@keyframes pay-wait-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .pay-wait__spinner {
    animation-duration: 2.4s;
  }
}
.pay-wait__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 48px;
  text-align: center;
}
.pay-wait__title {
  margin: 0;
  font-family: var(--custom-title-app-font);      /* H4 22/28 */
  font-weight: 900;
  font-size: 22px;
  line-height: 28px;
  text-transform: uppercase;
  color: var(--background-text-color);
}
.pay-wait__sub {
  margin: 0;
  font-family: var(--custom-app-font-reg);         /* Main Text Reg 16/20 */
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
}

/* Mobile: the sheet rises from the bottom and covers the screen, per the frame */
@media (max-width: 820px) {
  .pay-wait {
    padding: 0;
    align-items: flex-end;
  }
  .pay-wait__card {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
}

/* =====================================================
   ORDER STATUS (Figma 30227:13698 desktop / 30227:12300 mobile)
   Sits at the top of the menu column once an order is placed.
   ===================================================== */
.order-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 16px;
  margin-bottom: 24px;
  background: var(--background-color);
  border: 2px solid var(--quarternary-background-text-color);
  border-radius: 32px;
}
.order-status__head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.order-status__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.order-status__title {
  margin: 0;
  font-family: var(--custom-title-app-font);       /* H3 28/34 */
  font-weight: 900;
  font-size: 28px;
  line-height: 34px;
  text-transform: uppercase;
  color: var(--card-text-color);
}
.order-status__sub {
  margin: 0;
  font-family: var(--custom-app-font-reg);          /* Body Reg 18/22 */
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.4px;
  color: var(--card-text-color);
}
.order-status__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
}
/* Progress track with the leading dot — first stage of the order */
.order-status__bar {
  position: relative;
  width: 100%;
  height: 12px;
  border-radius: 13px;
  background: var(--quarternary-card-text-color);
  overflow: hidden;
}
.order-status__dot {
  position: absolute;
  top: 50%;
  left: 2px;
  width: 8px;
  height: 8px;
  transform: translateY(-50%);
  border-radius: 13px;
  background: linear-gradient(
    to left,
    var(--order-progressbar-end-point, var(--accent-color)),
    var(--order-progressbar-start-point, var(--accent-color))
  );
}
.order-status__where {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.order-status__pickup {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}
.order-status__place {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--custom-app-font-bold);         /* Main Text SemiBold 16/20 */
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--card-text-color);
}
.order-status__eta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--custom-app-font-bold);
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--secondary-card-text-color);
  white-space: nowrap;
}
.order-status__eta img {
  width: 18px;
  height: 18px;
  display: block;
}
.order-status__actions {
  display: flex;
  gap: 8px;
  width: 100%;
}
/* Delivery (Figma 32056:17651): there is no venue to head to, so the store row and
   "Get directions" go and "I need help" takes the width on its own. */
.order-status.is-delivery .order-status__where,
.order-status.is-delivery .order-status__btn--directions {
  display: none;
}
/* Secondary buttons, same treatment as the schedule CTAs */
.order-status__btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 16px 24px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--quarternary-background-text-color);
  color: var(--accent-color);
  font-family: var(--custom-button-font);            /* ButtonFont 18/22 */
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.order-status__btn:hover,
.order-status__btn:focus-visible {
  background: var(--accent-color);
  color: var(--accent-text-color);
}

/* Mobile (Figma 30227:12300): thinner border, tighter gaps, smaller type */
@media (max-width: 820px) {
  .order-status {
    gap: 16px;
    border-width: 1px;
  }
  .order-status__text {
    gap: 4px;
  }
  .order-status__title {
    font-size: 18px;                                 /* Headline SemiBold 18/22 */
    line-height: 22px;
  }
  .order-status__sub {
    font-size: 14px;                                 /* Footnote Reg 14/18 */
    line-height: 18px;
  }
  .order-status__place,
  .order-status__eta {
    font-size: 12px;                                 /* Caption1 Medium 12/16 */
    line-height: 16px;
  }
  .order-status__btn {
    height: 52px;
    padding: 12px 16px;
    font-size: 14px;                                 /* SmallButtonFont 14/16 */
    line-height: 16px;
  }
}

/* Address row on checkout: venue name over its street address */
.checkout-event {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.checkout-event__addr {
  font-family: var(--custom-app-font-reg);          /* Footnote Reg 14/18 */
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.4px;
  color: var(--secondary-card-text-color);
}

/* =====================================================
   FIRST-VISIT HINT (Figma 30250:17447)
   Dims everything, keeps the header address pill lit, and points at it.
   ===================================================== */
/* A full-screen dim with a pill-shaped hole clipped out over the address block,
   so the whole page AND the header go dark while the address block stays lit.
   The hole comes from clip-path (set in JS) rather than a giant spread shadow:
   the layer stays viewport-sized, so the fade is composited instead of repainted. */
.hint__spot {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  /* The dim rides on the colour, not on opacity: an animated opacity layer is
     composited on its own, and the sticky header — a composited layer too —
     picks the change up on a different frame, so the header darkened out of
     step with the page. Fading the colour keeps it all in one paint pass. */
  transition: background-color 0.3s ease;
}
.hint.is-visible .hint__spot {
  background: rgba(0, 0, 0, 0.9);
}
.hint__tip {
  position: fixed;
  z-index: 151;
  display: flex;
  flex-direction: column;
  align-items: center;             /* everything is centred in the frame */
  gap: 16px;
  width: 414px;
  max-width: calc(100vw - 32px);
  text-align: center;
  color: var(--tooltip-text-color, #fff);
  pointer-events: none;            /* the dim layer underneath takes the taps */
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hint.is-visible .hint__tip {
  opacity: 1;
}
/* Pointer up towards the pill; centred on the tip, as in the frame */
.hint__arrow {
  align-self: center;
  display: block;
  width: 15px;
  height: 24px;
}
.hint__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}
.hint__arrow img {
  display: block;
  width: 100%;
  height: 100%;
}
.hint__title {
  margin: 0;
  font-family: var(--custom-app-font-reg);         /* Body Reg 18/22 */
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.4px;
}
.hint__title strong {
  font-family: var(--custom-app-font-bold);
  font-weight: 600;
}
.hint__more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.hint__lead {
  margin: 0;
  font-family: var(--custom-app-font-reg);         /* Main Text Reg 16/20 */
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
}
.hint__way {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  font-family: var(--custom-app-font-bold);        /* Main Text SemiBold 16/20 */
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
}
.hint__way img {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* =====================================================
   PROFILE (Figma 30288:13130 desktop / 30314:26986 mobile)
   ===================================================== */
/* Left column: who is signed in + the account sections */
.profile-nav {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.profile-nav__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 24px 24px;           /* the column's own 32px top spacing carries it */
}
.profile-nav__name {
  margin: 0;
  font-family: var(--custom-title-app-font);      /* H2 34/41 */
  font-weight: 900;
  font-size: 34px;
  line-height: 41px;
  text-transform: uppercase;
  color: var(--background-text-color);
}
.profile-nav__id {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--custom-app-font-reg);        /* Main Text Reg 16/20 */
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--accent-color);
}
.profile-nav__copy {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--accent-color);
}
.profile-nav__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.profile-nav__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-radius: 12px;
  font-family: var(--custom-app-font-reg);        /* Headline 18/22 */
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
  text-decoration: none;
  transition: background 0.15s;
}
/* Section icons are the assets/icons files, inlined into the page sprite so they
   take the row's colour — accent on the active row, text colour on the rest. */
.profile-nav__icon {
  flex-shrink: 0;
  display: block;
  width: 24px;
  height: 24px;
  fill: currentColor;
}
.profile-nav__row:hover {
  background: var(--quarternary-background-text-color);
}
.profile-nav__row.is-active {
  background: var(--quarternary-background-text-color);   /* same as hover (was ChipSelectedColor) */
  color: var(--accent-color);
}
/* Right column: title, the form and the app banner */
.profile__title {
  margin: 0;
  font-family: var(--custom-title-app-font);      /* H3 28/34 */
  font-weight: 900;
  font-size: 28px;
  line-height: 34px;
  text-transform: uppercase;
  color: var(--background-text-color);
}
/* .content stacks with a 64px gap by default — the frame wants 40 here */
.profile {
  gap: 40px;
}
.profile__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}
/* Left column: title + form; the banner is its sibling, so both start at the
   same height (Figma 30338:21889) */
.profile__col {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.profile-form {
  flex: 0 0 auto;
  width: 510px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Field = label above the value, both inside one filled box (30275:11877) */
.profile-field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  height: 60px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--field-border-color);
  transition: box-shadow 0.15s;
  cursor: text;
}
.profile-field:focus-within {
  box-shadow: inset 0 0 0 2px var(--accent-color);
}
.profile-field__label {
  font-family: var(--custom-app-font-reg);        /* Caption 12/16 */
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.4px;
  color: var(--secondary-card-text-color);
}
.profile-field__input {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--custom-app-font-reg);        /* Main Text Reg 16/20 */
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--card-text-color);
}
.profile-field__input:focus {
  outline: none;
}
.profile-form__actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 28px;                               /* 40 from the last field */
}
.btn-primary,
.btn-quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  height: 54px;
  padding: 16px 24px;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--custom-button-font);         /* ButtonFont 18/22 */
  font-weight: 900;
  font-size: 18px;
  line-height: 22px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-primary {
  background: var(--accent-color);
  color: var(--accent-text-color);
}
.btn-primary:hover {
  background: var(--accent-color-hover);
}
.btn-quiet {
  background: var(--quarternary-background-text-color);
  color: var(--accent-color);
}
.btn-quiet:hover {
  background: var(--tertiary-background-text-color);
}
.btn-quiet--danger {
  color: var(--error-color);
}
/* App banner (Figma 30323:6619) */
.app-banner {
  position: relative;
  flex: 0 0 359px;
  height: 490px;
  border-radius: 32px;
  overflow: hidden;
  color: var(--banner-text-color);
}
.app-banner__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The app tile sits on the photo rather than being baked into it, so it stays
   crisp and the background can be swapped on its own. */
.app-banner__title {
  position: relative;
  margin: 0;
  padding: 24px;
  font-family: var(--custom-title-app-font);      /* H3 28/34 */
  font-weight: 900;
  font-size: 28px;
  line-height: 34px;
  text-transform: uppercase;
}
.app-banner__foot {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px;
}
.app-banner__scan {
  flex: 1 1 auto;
  min-width: 0;
}
.app-banner__scan-text {
  margin: 0;
  font-family: var(--custom-title-app-font);      /* H4 22/28 */
  font-weight: 900;
  font-size: 22px;
  line-height: 28px;
  text-transform: uppercase;
}
/* The curved arrow is rotated in the frame (-74deg, flipped) — same here, inside
   a fixed box so the rotation doesn't disturb the layout */
.app-banner__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 36px;
  margin-top: 4px;
}
.app-banner__arrow img {
  width: 23px;
  height: 56px;
  transform: rotate(-74.06deg) scaleY(-1);
}
.app-banner__qr {
  flex-shrink: 0;
  width: 107px;
  height: 107px;
  border-radius: 7px;
  background: #fff;
}

/* Tablet: the banner is the first thing to go */
@media (max-width: 1240px) {
  .app-banner {
    display: none;
  }
}
/* Mobile (Figma 30314:26986): no side nav, buttons sit at the bottom */
@media (max-width: 820px) {
  .app--profile {
    display: block;
    padding: 0 var(--page-pad) 24px;
  }
  .profile-nav {
    display: none;
  }
  .profile {
    gap: 12px;                                    /* title → fields on mobile */
  }
  /* the header's back arrow covers this on mobile (Figma 30314:26986) */
  .page-profile .content > .back-btn {
    display: none;
  }
  .profile__title {
    margin: 32px 0 0;
    font-size: 22px;                              /* H4 22/28 */
    line-height: 28px;
  }
  .profile__col {
    gap: 12px;                                    /* title → fields on mobile */
  }
  .profile-form {
    flex: 1 1 auto;
    width: auto;
    gap: 12px;
  }
  .profile-field {
    height: 52px;
  }
  .profile-form__actions {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--quarternary-background-text-color);
  }
  .btn-primary,
  .btn-quiet {
    height: 52px;
    padding: 12px 16px;
    font-size: 14px;                              /* SmallButtonFont 14/16 */
    line-height: 16px;
  }
}

/* Account pages are short — keep the footer at the bottom of the viewport
   instead of letting it ride up under the content */
body.page-profile {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding-bottom: 0;              /* no floating cart pill on the account pages,
                                     and its 120px reserve ate the free space */
}
body.page-profile .app {
  flex: 1 0 auto;
  width: 100%;                    /* the grid's auto side margins would otherwise
                                     shrink-wrap it as a flex item */
  padding-top: 32px;              /* header → Back to menu / user name (Figma) */
}

/* =====================================================
   SETTINGS (Figma 30294:16012 desktop / 30329:21791 mobile)
   ===================================================== */
.settings-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 393px;
  max-width: 100%;
}
.settings-block__title {
  margin: 0;
  font-family: var(--custom-title-app-font);      /* H4 22/28 */
  font-weight: 900;
  font-size: 22px;
  line-height: 28px;
  text-transform: uppercase;
  color: var(--background-text-color);
}
/* ---- Notifications (Figma 30294:20199) ---- */
.settings-block__lead {
  margin: 0;
  font-family: var(--custom-app-font-bold);       /* Main Text SemiBold 16/20 */
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
}
.toggles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Row = channel name + switch (Figma "toggle question") */
.toggle-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 60px;
  padding: 8px 12px;
  background: var(--card-color);
  border: 1px solid var(--quarternary-background-text-color);   /* white card on a white page */
  border-radius: 12px;
  cursor: pointer;
}
.toggle-row__text {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--custom-app-font-reg);        /* Main Text Reg 16/20 */
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--card-text-color);
}
.toggle-row__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
/* Toggle - Switch: 64x28 track, 39x24 knob, 2px inset */
.toggle-row__switch {
  position: relative;
  flex-shrink: 0;
  width: 64px;
  height: 28px;
  border-radius: 100px;
  background: var(--tertiary-card-text-color);
  transition: background 0.2s;
}
.toggle-row__switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 39px;
  height: 24px;
  border-radius: 100px;
  background: var(--accent-text-color);
  transition: transform 0.2s;
}
.toggle-row__input:checked + .toggle-row__switch {
  background: var(--accent-color);
}
.toggle-row__input:checked + .toggle-row__switch::after {
  transform: translateX(21px);
}
.toggle-row__input:focus-visible + .toggle-row__switch {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .toggle-row__switch,
  .toggle-row__switch::after {
    transition: none;
  }
}
.consents {
  display: flex;
  flex-direction: column;
}
/* Row = checkbox + wrapping text. The consents are shown, not edited here. */
.consent {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-radius: 12px;
  cursor: default;
}
.consent__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.consent__box {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--field-border-color);  /* непроставленный бокс — 3.11:1 */
  border-radius: 4px;
  color: transparent;                             /* the tick shows when checked */
  transition: background 0.15s, border-color 0.15s;
}
/* the 1.5px border eats into the box, so the tick scales to the content area */
.consent__box svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* Checked: accent fill with the tick knocked out (Figma checkbox
   state=true, disabled=false — solid #cd222a, 5.44:1) */
.consent__input:checked + .consent__box {
  background: var(--accent-color);
  border-color: transparent;
  color: var(--background-color);
}
/* ...and the 40% variant is the disabled one (state=true, disabled=true).
   Inactive components sit outside the contrast requirement, which is why it
   may stay that pale. */
.consent__input:checked:disabled + .consent__box {
  background: var(--secondary-accent-color);
}
.consent__input:focus-visible + .consent__box {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}
.consent__text {
  font-family: var(--custom-app-font-reg);        /* Body 18/22 */
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
}
/* The links sit on their own line box; 1px top and bottom clears the 24px
   target without moving the text (2.5.8) */
.consent__text a {
  display: inline-block;
  padding: 1px 0;
}
.consent__text a {
  color: inherit;
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

@media (max-width: 820px) {
  /* the frame puts 24 between the page title and the first section here */
  .page-settings .profile,
  .page-saved-cards .profile {
    gap: 24px;
  }
  .settings-block {
    width: 100%;
    gap: 16px;
  }
  .settings-block__title {
    font-size: 18px;                              /* Headline 18/22 on mobile */
    line-height: 22px;
  }
}

/* Mobile keeps its own top spacing — the desktop 32px would stack with the
   title's margin. Must come after the desktop rule to win on source order. */
@media (max-width: 820px) {
  body.page-profile .app {
    padding-top: 0;
  }
}

/* =====================================================
   ORDER HISTORY (Figma 30288:13357 desktop / 30314:28376 mobile)
   ===================================================== */
/* 720 in the frame, but the column gives way before the banner does, so the row
   never overflows on narrower desktops */
.orders {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.order-card {
  display: flex;
  flex-direction: column;
  background: var(--card-color);
  border: 2px solid var(--quarternary-background-text-color);
  border-radius: 32px;
  overflow: hidden;
}
.order-card__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}
.order-card__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.order-card__title {
  margin: 0;
  font-family: var(--custom-app-font-bold);       /* Body SemiBold 18/22 */
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.4px;
  color: var(--card-text-color);
}
.order-card__status {
  margin: 0;
  font-family: var(--custom-app-font-reg);        /* Footnote Reg 14/18 */
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.4px;
}
/* Tokens per the status-line component (Figma 30345:27327) */
.order-card__status--accepted {          /* accepted · being prepared · ready · on the way */
  color: var(--success-color);
}
.order-card__status--completed {         /* completed · delivered */
  color: var(--card-text-color);
}
.order-card__status--cancelled {
  color: var(--secondary-card-text-color);
}
.order-card__status--failed {
  color: var(--error-color);
}
.order-card__place {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--custom-app-font-reg);        /* Main Text Reg 16/20 */
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--card-text-color);
}
.order-card__place img {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}
/* Positions: name column, quantity, price */
.order-card__items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--quarternary-card-text-color);
}
.order-item {
  display: flex;
  align-items: center;
  gap: 16px;
}
.order-item__name {
  flex: 0 0 211px;
  max-width: 211px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--custom-app-font-reg);        /* Main Text Reg 16/20 */
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
}
.order-item__qty,
.order-item__price {
  font-family: var(--custom-app-font-bold);       /* Main Text SemiBold 16/20 */
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--card-price-color);
  white-space: nowrap;
}
.order-item__qty {
  flex: 1 1 auto;
}
.order-item__price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.order-item__coin {
  width: 14px;
  height: 16px;
}
.order-card__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 8px;
  font-family: var(--custom-app-font-bold);       /* Footnote Semibold 14/18 */
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.4px;
  color: var(--card-text-color);
}
.order-card__actions {
  display: flex;
  gap: 8px;
  padding: 8px 16px 16px;
}
.order-card__actions .btn-primary,
.order-card__actions .btn-quiet {
  flex: 1 1 0;
  min-width: 0;
}
/* Secondary CTA sits on the card, so it is white (QuarternaryCardTextColor) */
.order-card__actions .btn-quiet:not(:hover):not(:focus-visible) {
  background: var(--quarternary-card-text-color);
}
.orders__note {
  margin: 0;
  padding: 12px 0;
  text-align: center;
  font-family: var(--custom-app-font-reg);        /* Footnote Reg 14/18 */
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.4px;
  color: var(--secondary-background-text-color);
}

@media (max-width: 820px) {
  .orders {
    max-width: none;
  }
  .order-card__title {
    font-size: 16px;                              /* Main Text SemiBold on mobile */
    line-height: 20px;
  }
  .order-card__actions .btn-primary,
  .order-card__actions .btn-quiet {
    height: 52px;
    padding: 12px 16px;
    font-size: 14px;                              /* SmallButtonFont 14/16 */
    line-height: 16px;
  }
}

/* =====================================================
   ORDER DETAILS (Figma 30294:20297 desktop / 30318:29295 mobile)
   ===================================================== */
.odetails {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}
.odetails__card,
.odetails__aside {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border: 2px solid var(--quarternary-background-text-color);
  border-radius: 32px;
}
.odetails__card {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 720px;
  gap: 40px;                      /* status block → Order details (Figma) */
}
.odetails__aside {
  flex: 0 0 400px;
}
/* The status block is the menu banner's component without its own frame */
.odetails__status {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.odetails__status .order-status__title {
  margin: 0;
}
/* No card behind the block here, so the track/buttons keep the page-level tint
   (Figma "variant=on order info screen", 30304:21277) */
.odetails__status .order-status__bar,
.odetails__status .order-status__btn:not(:hover):not(:focus-visible) {
  background: var(--quarternary-background-text-color);
}
.odetails__status .order-status__sub {
  color: var(--background-text-color);
}
.odetails__block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.odetails__heading {
  margin: 0;
  font-family: var(--custom-title-app-font);      /* H4 22/28 */
  font-weight: 900;
  font-size: 22px;
  line-height: 28px;
  text-transform: uppercase;
  color: var(--background-text-color);
}
.odetails__number {
  margin: 0;
  font-family: var(--custom-app-font-bold);       /* Main Text SemiBold 16/20 */
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
}
.odetails__list {
  display: flex;
  flex-direction: column;
}
/* Row = icon + (label over value), with an optional ETA badge on the right */
.odetail {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}
.odetail__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--background-text-color);
}
.odetail__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.odetail__label {
  font-family: var(--custom-app-font-reg);        /* Footnote Reg 14/18 */
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.4px;
  color: var(--secondary-background-text-color);
}
.odetail__value {
  font-family: var(--custom-app-font-reg);        /* Main Text Reg 16/20 */
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
}
.odetail__eta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--custom-app-font-reg);        /* Footnote Reg 14/18 */
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.4px;
  color: var(--secondary-background-text-color);
}
/* Ordered items with thumbnails */
.oitems {
  display: flex;
  flex-direction: column;
}
.oitem {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  /* page-level tint: the order screen has no card behind this list */
  border-bottom: 1px solid var(--quarternary-background-text-color);
}
.oitem:last-child {
  border-bottom: 0;
}
.oitem__img {
  flex-shrink: 0;
  width: 96px;
  height: 64px;                   /* strictly 3:2 */
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  object-fit: cover;
}
.oitem__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.oitem__name {
  margin: 0;
  font-family: var(--custom-app-font-bold);       /* Body SemiBold 18/22 */
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
}
.oitem__mod {
  font-family: var(--custom-app-font-reg);        /* Footnote Reg 14/18 */
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.4px;
  color: var(--secondary-background-text-color);
}
.oitem__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 0;
}
.oitem__qty,
.oitem__price {
  font-family: var(--custom-app-font-bold);       /* Main Text SemiBold 16/20 */
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--card-price-color);
}
.oitem__qty {
  font-family: var(--custom-app-font-reg);
  font-weight: 400;
}
.ototal {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ototal__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  font-family: var(--custom-app-font-reg);        /* Main Text Reg 16/20 */
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
}
.ototal__row--total {
  font-family: var(--custom-app-font-bold);
  font-weight: 600;
}

/* Stacked below the two-card width, mobile keeps the same blocks (Figma 30318:29295) */
@media (max-width: 1240px) {
  .odetails {
    flex-direction: column;
  }
  .odetails__card,
  .odetails__aside {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
  }
}
/* The sheet bar belongs to the mobile sheet only */
.odetails__sheetbar {
  display: none;
}

@media (max-width: 820px) {
  /* Bottom sheet over a dimmed page (Figma 30318:29295) */
  body.page-order {
    background: rgba(46, 50, 51, 0.5);
  }
  .page-order .site-header,
  .page-order .site-footer,
  .page-order .back-btn {
    display: none;
  }
  .page-order .app {
    padding: 0;
  }
  /* The sheet is pinned to the viewport and scrolls inside itself, so the dim
     strip and the rounded top stay put while the content moves */
  body.page-order {
    overflow: hidden;
  }
  .page-order .content {
    position: fixed;
    left: 0;
    right: 0;
    top: 8px;
    bottom: 0;
    gap: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--background-color);
    border-radius: 24px 24px 0 0;
  }
  .odetails__sheetbar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--background-color);
    border-radius: 24px 24px 0 0;
    border-bottom: 1px solid var(--quarternary-background-text-color);
  }
  .odetails__sheettitle {
    flex: 1 1 auto;
    margin: 0;
    text-align: center;
    font-family: var(--custom-app-font-reg);       /* Main Text Reg 16/20 */
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.4px;
    color: var(--background-text-color);
  }
  .odetails__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    background: var(--quarternary-background-text-color);
    color: var(--background-text-color);
  }
  /* Inside the sheet the blocks are separated by lines, not framed as cards.
     12 before the line + 12 after it = the 24 the frame asks for. */
  .odetails {
    gap: 0;
  }
  .odetails__card,
  .odetails__aside {
    gap: 12px;
    padding: 12px 16px;
    border: 0;
    border-radius: 0;
  }
  .odetails__aside,
  .odetails__block:not(:first-child) {
    border-top: 1px solid var(--quarternary-background-text-color);
    padding-top: 24px;            /* line → heading */
  }
  /* the sheet bar already carries this line */
  .odetails__number {
    display: none;
  }
  /* Every block heading on this screen is Headline SemiBold 18/22 in the frame */
  .odetails__status .order-status__title,
  .odetails__heading {
    font-size: 18px;
    line-height: 22px;
  }
  .oitem__img {
    width: 84px;
    height: 56px;                                 /* 3:2 */
  }
}

/* Mobile menu: 24 from the live-order card to the Rewards title. The content
   column has a 40px gap, so the card pulls 16 of it back. */
@media (max-width: 820px) {
  .order-status {
    margin-bottom: -16px;
  }
}

/* Past order (Figma 30304:22094 / 30318:29531): no thumbnails, a second address
   line, and the repeat action under the totals */
.oitem--plain {
  gap: 0;
}
.odetail__sub {
  font-family: var(--custom-app-font-reg);        /* Footnote Reg 14/18 */
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.4px;
  color: var(--secondary-background-text-color);
}
.odetails__bar {
  margin-top: 12px;
}
.odetails__repeat {
  width: 100%;
}

@media (max-width: 820px) {
  .odetails__repeat {
    height: 52px;
    padding: 12px 16px;
    font-size: 14px;                              /* SmallButtonFont 14/16 */
    line-height: 16px;
  }
  /* Pinned to the bottom of the sheet while its content scrolls */
  .odetails__bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    margin: 0;
    padding: 12px 16px 16px;
    background: var(--background-color);
    border-top: 1px solid var(--quarternary-background-text-color);
  }
  /* room so the last row is never hidden under the pinned button */
  .page-order .content {
    padding-bottom: 92px;
  }
}

/* =====================================================
   ORDER STATUS STATES — pickup (Figma 30276:5097…5434)
   accepted · cooking · cooking 90% · ready · completed · cancelled · failed
   ===================================================== */
/* Progress fill: the dot grows into a bar as the order moves along */
.order-status__dot {
  transition: width 0.3s ease;
}
.order-status.is-cooking .order-status__dot,
.odetails__status.is-cooking .order-status__dot {
  width: calc(45% - 4px);
}
.order-status.is-cooking-90 .order-status__dot,
.odetails__status.is-cooking-90 .order-status__dot {
  width: calc(97% - 4px);
}
.order-status.is-ready .order-status__dot,
.odetails__status.is-ready .order-status__dot {
  width: calc(100% - 4px);
}
/* Title colour follows the state (Figma 30276:5382 / 5434) */
.order-status.is-cancelled .order-status__title {
  color: var(--secondary-card-text-color);
}
.odetails__status.is-cancelled .order-status__title {
  color: var(--secondary-background-text-color);
}
.order-status.is-failed .order-status__title,
.odetails__status.is-failed .order-status__title {
  color: var(--error-color);
}
/* On the order screen the terminal states drop the progress bar and the venue
   row; the cross lives in the sheet bar / header there, not in the block, and
   the state icon goes with them — the title already carries the outcome. */
.odetails__status.is-done .order-status__bar,
.odetails__status.is-done .order-status__where,
.odetails__status.is-done .order-status__icon {
  display: none;
}
/* Terminal states: no progress, no venue row, a dismiss cross instead of the icon */
.order-status.is-done .order-status__bar,
.order-status.is-done .order-status__where {
  display: none;
}
.order-status.is-done .order-status__icon {
  display: none;
}
.order-status__close {
  display: none;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--quarternary-background-text-color);
  color: var(--background-text-color);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.order-status__close:hover {
  background: var(--tertiary-background-text-color);
}
.order-status.is-done .order-status__close {
  display: inline-flex;
}
/* One full-width action in the terminal states */
.order-status.is-done .order-status__btn--directions,
.odetails__status.is-done .order-status__btn--directions {
  display: none;
}

/* =====================================================
   EMPTY STATE — order history
   (Figma 30294:16255 desktop / 30318:31177 mobile)
   ===================================================== */
.empty-state {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--card-color);
  border: 2px solid var(--quarternary-background-text-color);
  border-radius: 32px;
}
.empty-state__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 48px 40px 48px 24px;   /* asymmetric in the frame */
}
.empty-state__icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
}
.empty-state__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 0 48px;
  text-align: center;
  color: var(--card-text-color);
}
.empty-state__title {
  margin: 0;
  font-family: var(--custom-title-app-font);      /* H4 22/28 */
  font-weight: 900;
  font-size: 22px;
  line-height: 28px;
  text-transform: uppercase;
}
.empty-state__sub {
  margin: 0;
  font-family: var(--custom-app-font-reg);        /* Body Reg 18/22 */
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.4px;
}
.empty-state__cta {
  flex-shrink: 0;
}
/* The pinned CTA bar is mobile-only */
.empty-state__bar {
  display: none;
}

@media (max-width: 820px) {
  /* No card on mobile — the block sits on the page and fills what is left of
     the viewport, with the CTA moved into a bar at the bottom */
  .empty-state {
    flex: 1 1 auto;
    min-height: 60vh;
    max-width: none;
    background: none;
    border: 0;
    border-radius: 0;
  }
  .empty-state__text {
    color: var(--background-text-color);
  }
  .empty-state__title {
    font-family: var(--custom-app-font-bold);     /* Body SemiBold 18/22 */
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: -0.4px;
    text-transform: none;
  }
  .empty-state__sub {
    font-size: 16px;                              /* Main Text Reg 16/20 */
    line-height: 20px;
  }
  .empty-state__cta {
    display: none;
  }
  .empty-state__bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 17px 16px 32px;
    background: var(--background-color);
    border-top: 1px solid var(--quarternary-background-text-color);
  }
  .empty-state__bar .btn-primary {
    width: 100%;
    height: 52px;
    font-size: 14px;
    line-height: 16px;
  }
  /* The pinned CTA takes the footer's place on this screen, as in the frame */
  body.has-bottom-bar .site-footer {
    display: none;
  }
}

/* =====================================================
   ORDER STATUS STATES — delivery (Figma 30276:5486…6060)
   accepted · being prepared · on the way · delivered
   ===================================================== */
/* Progress runs in three steps instead of pickup's four */
.order-status.is-delivery.is-cooking .order-status__dot,
.odetails__status.is-delivery.is-cooking .order-status__dot {
  width: calc(48% - 4px);
}
.order-status.is-delivery.is-on-the-way .order-status__dot,
.odetails__status.is-delivery.is-on-the-way .order-status__dot {
  width: calc(72% - 4px);
}
/* The location row points at the address, not at a truck stop, and drops the
   walking-time chip — there is nothing for the customer to walk to */
.order-status__home {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: none;
}
.order-status.is-delivery .order-status__home {
  display: block;
}
.order-status.is-delivery .order-status__truck,
.order-status.is-delivery .order-status__eta {
  display: none;
}
/* "Get directions" makes no sense for delivery — one full-width action */
.order-status.is-delivery .order-status__btn--directions,
.odetails__status.is-delivery .order-status__btn--directions {
  display: none;
}

/* Delivery has a minimum order value (Figma 30350:34896) — until the cart
   reaches it, the checkout CTA reads the threshold and refuses the tap. */
.cart-panel__cta[aria-disabled='true'],
.cart-panel__cta[aria-disabled='true']:hover {
  background: var(--secondary-accent-color);
  cursor: default;
}

/* =====================================================
   SIGN-UP: first name + phone (Figma 30350:38534 / 30350:38699)
   Laid out but kept out of the flow — see the note in the markup.
   ===================================================== */
/* Back + Continue share the row, equal halves */
.signin-modal__btnblock--pair {
  display: flex;
  gap: 8px;
}
.signin-modal__btnblock--pair .signin-back,
.signin-modal__btnblock--pair .signin-continue {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}
/* Secondary button next to Continue */
.signin-back {
  height: 54px;
  padding: 16px 24px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--quarternary-background-text-color);
  color: var(--accent-color);
  font-family: var(--custom-button-font);         /* ButtonFont 18/22 */
  font-weight: 900;
  font-size: 18px;
  line-height: 22px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
}
.signin-back:hover,
.signin-back:focus-visible {
  background: var(--tertiary-background-text-color);
}

/* Phone field: country code picker, then the number */
.signin-field--phone {
  gap: 12px;
}
.signin-code-pick {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.signin-code-pick__flag {
  width: 24px;
  height: 24px;
  object-fit: contain;                            /* 18x9.5 artwork in a 24 box */
}
.signin-code-pick__code {
  font-family: var(--custom-app-font-bold);       /* Main Text SemiBold 16/20 */
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--card-text-color);
}
.signin-code-pick__chev {
  width: 10px;
  height: 10px;
  display: block;
}

@media (max-width: 560px) {
  /* Buttons follow the smaller SmallButtonFont, like Continue does */
  .signin-back {
    height: 52px;
    font-size: 14px;
    line-height: 16px;
  }
}

/* =====================================================
   COUNTRY PHONE CODE (Figma 30350:39863 mobile)
   Desktop is a popover under the picker; mobile is the sheet from the frame.
   The layer is fixed so the sign-in card's scroll never clips it.
   ===================================================== */
.ccodes {
  position: fixed;
  inset: 0;
  z-index: 110;                     /* over the sign-in modal (100) */
}
.ccodes[hidden] {
  display: none;
}
.ccodes__panel {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 320px;
  max-height: 320px;
  background: var(--background-color);
  border: 1px solid var(--quarternary-background-text-color);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
/* Desktop reads as a menu, so the sheet's title bar is not needed */
.ccodes__bar {
  display: none;
  position: relative;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: 60px;
}
.ccodes__title {
  margin: 0;
  font-family: var(--custom-app-font-reg);        /* Main Text Reg 16/20 */
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
}
.ccodes__close {
  position: absolute;
  top: 8px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--quarternary-background-text-color);
  color: var(--background-text-color);
  cursor: pointer;
}
/* Search: capsule field from the frame */
.ccodes__search {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  margin: 16px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--quarternary-background-text-color);
}
.ccodes__search img {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: block;
}
.ccodes__input {
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  outline: none;
  font-family: var(--custom-app-font-reg);        /* Footnote Reg 14/18 */
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
  -webkit-appearance: none;
  appearance: none;
}
.ccodes__input::placeholder {
  color: var(--secondary-background-text-color);
}
.ccodes__input::-webkit-search-cancel-button {
  display: none;
}
/* Rows: flag, name with its code, tick on the selected one */
.ccodes__list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0 16px 8px;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: thin;
}
.ccodes__row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 48px;                     /* 32 of content + the row's own breathing */
  padding: 0;
  border: 0;
  background: none;
  border-bottom: 1px solid var(--quarternary-background-text-color);
  font-family: var(--custom-app-font-reg);        /* Main Text Reg 16/20 */
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
  text-align: left;
  cursor: pointer;
}
.ccodes__item:last-child .ccodes__row {
  border-bottom: 0;
}
.ccodes__flag {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.ccodes__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ccodes__tick {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: none;
}
.ccodes__row[aria-selected='true'] .ccodes__tick {
  display: block;
}
.ccodes__empty {
  margin: 0;
  padding: 0 16px 16px;
  font-family: var(--custom-app-font-reg);        /* Footnote Reg 14/18 */
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.4px;
  color: var(--secondary-background-text-color);
}

/* ---- Mobile: the sheet from the frame ---- */
@media (max-width: 820px) {
  .ccodes {
    background: rgba(46, 50, 51, 0.5);
  }
  .ccodes__panel {
    left: 0;
    right: 0;
    bottom: 0;
    top: 8px;                       /* same reveal as the live-order sheet */
    width: auto;
    max-height: none;
    border: 0;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.05);
  }
  .ccodes__bar {
    display: flex;
  }
  .ccodes__list {
    padding-top: 8px;               /* 24 from the search field, incl. its margin */
  }
}

/* Delivery address detail under the address (Figma 30275:18020) */
/* With the detail lines the row has to grow — its fixed 60/52 fits two lines.
   Scoped to the delivery case so the pickup row keeps its exact height. */
.checkout-address__row.has-detail,
.page-checkout .checkout-address__row.has-detail {
  height: auto;
  min-height: 60px;
  padding: 12px;
}
.checkout-address__row.has-detail .checkout-event {
  gap: 4px;
}
.checkout-event__extra {
  font-family: var(--custom-app-font-reg);          /* Footnote Reg 14/18 */
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.4px;
  color: var(--secondary-card-text-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =====================================================
   SHEET MODAL — shared shell
   A centred card on desktop, a bottom sheet with a grabber on mobile.
   Used by the payment (Figma 30350:39517 / 30350:39032), order time
   (30350:39894 / 30350:39686) and your-info (30359:40491 / 30359:40424)
   modals; each of those adds only its own body below.
   ===================================================== */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(46, 50, 51, 0.5);
}
.sheet-backdrop[hidden] {
  display: none;
}
.sheet-modal {
  position: fixed;
  inset: 0;
  z-index: 101;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}
.sheet-modal.is-open {
  opacity: 1;
  visibility: visible;
}
.sheet-modal__dialog {
  position: relative;
  width: 560px;
  max-width: 100%;
  pointer-events: auto;
}
.sheet-modal__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  background: var(--background-color);
  border-radius: 32px;
}
/* Mobile-only sheet handle */
.sheet-modal__grabber {
  display: none;
}
.sheet-modal__title {
  flex-shrink: 0;
  margin: 0;
  padding: 32px 24px 24px;
  font-family: var(--custom-title-app-font);       /* H4 22/28 */
  font-weight: 900;
  font-size: 22px;
  line-height: 28px;
  text-align: center;
  text-transform: uppercase;
  color: var(--background-text-color);
}
.sheet-modal__bar {
  flex-shrink: 0;
  padding: 24px 24px 32px;
}
.sheet-modal__cta {
  width: 100%;
  height: 54px;
  padding: 16px 24px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent-color);
  color: var(--accent-text-color);
  font-family: var(--custom-button-font);          /* ButtonFont 18/22 */
  font-weight: 900;
  font-size: 18px;
  line-height: 22px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
}
.sheet-modal__cta:hover {
  background: var(--accent-color-hover);
}
.sheet-modal__close {
  position: absolute;
  top: 0;
  left: calc(100% + 12px);
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--background-color);
  color: var(--background-text-color);
  cursor: pointer;
}

@media (max-width: 820px) {
  .sheet-modal {
    align-items: flex-end;
    padding: 0;
  }
  .sheet-modal__dialog {
    width: 100%;
  }
  .sheet-modal__card {
    max-height: calc(100dvh - 24px);
    border-radius: 24px 24px 0 0;
    padding-top: 6px;
  }
  .sheet-modal__grabber {
    display: block;
    flex-shrink: 0;
    align-self: center;
    width: 36px;
    height: 5px;
    border-radius: var(--radius-pill);
    background: var(--tertiary-background-text-color);
  }
  /* Sheets drop to Headline 18/22 and the smaller button, per the frames */
  .sheet-modal__title {
    padding: 26px 16px 16px;
    font-size: 18px;
    line-height: 22px;
  }
  /* The your-info sheet keeps the bigger title and sets it to the left edge
     (Figma 30359:40424) — the other two centre a smaller one */
  .sheet-modal__title--start {
    text-align: left;
    font-size: 22px;
    line-height: 28px;
  }
  .sheet-modal__bar {
    padding: 24px 16px 32px;
  }
  .sheet-modal__cta {
    height: 52px;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 16px;
  }
  /* The grabber and the dim close the sheet, so the cross is desktop-only */
  .sheet-modal__close {
    display: none;
  }
}

/* ---- Payment method: the method rows (Figma 30350:39517) ---- */
.pay-modal__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 32px;
}
/* One row per method: icon, label, then the tick or a chevron */
.pay-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0 24px;
  border: 0;
  border-bottom: 1px solid var(--quarternary-background-text-color);
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
.pay-option:last-child {
  border-bottom: 0;
}
.pay-option:hover {
  background: var(--quarternary-background-text-color);
}
.pay-option__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: block;
}
.pay-option__icon--lg {
  width: 32px;
  height: 32px;
}
.pay-option__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
}
.pay-option__name {
  font-family: var(--custom-app-font-reg);         /* Main Text Reg 16/20 */
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
}
/* "Card · · · · · 0027" — the dots are their own artwork */
.pay-option__name--card {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pay-option__dots {
  width: 44px;
  height: 4px;
  display: block;
}
.pay-option__note {
  font-family: var(--custom-app-font-reg);         /* Footnote Reg 14/18 */
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.4px;
  color: var(--secondary-background-text-color);
}
.pay-option__tick {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: none;
}
.pay-option[aria-selected='true'] .pay-option__tick {
  display: block;
}
.pay-option__chev {
  flex-shrink: 0;
  color: var(--background-text-color);
}

/* ---- Order time: the two options and the slot list (Figma 30350:39894).
        The slots under "Order in advance" are our own addition. ---- */
.time-modal__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.time-option[hidden] {
  display: none;              /* the flex below would beat the attribute */
}
.time-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 24px;
  border: 0;
  border-bottom: 1px solid var(--quarternary-background-text-color);
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
.time-option:hover {
  background: var(--quarternary-background-text-color);
}
.time-option__name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--custom-app-font-reg);         /* Main Text Reg 16/20 */
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
}
.time-option__tick {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: none;
}
.time-option[aria-checked='true'] .time-option__tick {
  display: block;
}
/* Slots for the fixed date: the date is a caption, only the time is choosable */
.time-slots {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 24px 8px;
}
.time-slots__date {
  margin: 0;
  font-family: var(--custom-app-font-reg);         /* Footnote Reg 14/18 */
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.4px;
  color: var(--secondary-background-text-color);
}
.time-slots__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.time-slot {
  padding: 10px 16px;
  border: 2px solid var(--quarternary-background-text-color);
  border-radius: var(--radius-pill);
  background: var(--card-color);
  font-family: var(--custom-app-font-reg);         /* Main Text Reg 16/20 */
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s;
}
.time-slot[aria-checked='true'] {
  border-color: var(--accent-color);
}

/* ---- Your info: the three fields (Figma 30359:40491).
        Fields are the .dfield component from the delivery address modal. ---- */
.info-modal__fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 24px;
}

/* ---- Mobile: smaller type throughout the sheets (Figma 30350:39032,
        30350:39686, 30359:40424) ---- */
@media (max-width: 820px) {
  .pay-option {
    padding: 0 16px;
  }
  .pay-option__body {
    padding: 12px 0;
  }
  .pay-option__icon--lg {
    width: 24px;
    height: 24px;
  }
  .pay-option__name {
    font-size: 14px;                              /* Footnote Reg 14/18 */
    line-height: 18px;
  }
  .pay-option__note {
    font-size: 12px;                              /* Caption 12/16 */
    line-height: 16px;
  }
  .time-option {
    padding: 12px 16px;
  }
  .time-option__name,
  .time-slot {
    font-size: 14px;
    line-height: 18px;
  }
  .time-slots {
    padding: 0 16px 8px;
  }
  .info-modal__fields {
    padding: 0 16px;
  }
  /* Fields shrink only inside this sheet — .dfield is shared with the delivery
     address modal, which the frames did not change */
  .info-modal__fields .dfield {
    height: 52px;
  }
  .info-modal__fields .dfield__input {
    font-size: 14px;
    line-height: 18px;
  }
}

/* =====================================================
   PICKUP ON MOBILE — three screens
   list (cards, as before) → map with every stop (Figma 30362:46233)
   → the picked stop with its info block (Figma 30362:42733)
   ===================================================== */
/* Bars live under the map on the two map screens */
.events-modal__bar {
  display: none;
}
.events-modal__showlist {
  width: 100%;
  height: 52px;
  padding: 16px 24px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--quarternary-background-text-color);
  color: var(--accent-color);
  font-family: var(--custom-button-font);          /* SmallButtonFont 14/16 */
  font-weight: 900;
  font-size: 14px;
  line-height: 16px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
}
.events-modal__showlist:hover {
  background: var(--tertiary-background-text-color);
}
/* Sits over the top-right of the info block, back to the card list */
.events-sheet__close {
  display: none;
  position: absolute;
  z-index: 2;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--quarternary-background-text-color);
  color: var(--background-text-color);
  cursor: pointer;
}

@media (max-width: 820px) {
  /* ---- The close cross beside the switcher, not off the screen ----
     It used to be parked outside the card at left: 100% + 12, which on a
     full-width sheet put it past the right edge. */
  .events-modal__close {
    top: 24px;
    left: auto;
    right: 16px;
    width: 46px;
    height: 46px;
    z-index: 3;
    /* It sits straight on the map, and the basemap runs from pale fields to
       dark roads — a soft drop keeps the white pill readable on both */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
  }
  /* Room for it: the switcher gives up its right end. In the frame it is
     307 wide with an 8px gap to the 46px cross (Figma 30362:42748). */
  /* On the list the cross lives on the sheet, so the switcher keeps its width;
     the map screens put the cross beside it and shrink it (Figma 30362:42748). */
  /* Only when the cross is actually there — the first-run funnel hides it, and
     the room left behind read as a dent in the switcher */
  .events-modal.is-events-map:not(.is-delivery):not(.is-mandatory) .events-switch,
  .events-modal.is-events-picked:not(.is-delivery):not(.is-mandatory) .events-switch,
  .events-modal.is-delivery:not(.is-mandatory) .events-switch {
    margin-right: 54px;                            /* 46 cross + 8 gap */
  }

  /* ---- The map is the floor under all three screens ---- */
  .events-modal .events-modal__card {
    position: relative;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;          /* see the delivery card: vh overflows on mobile */
    border-radius: 0;
  }
  .events-modal .events-modal__map {
    display: block;
    order: -1;
    flex: 1 1 auto;
    min-height: 200px;
  }
  /* In delivery the form owns the height it needs; the map takes what is left */
  .events-modal.is-delivery .events-modal__map {
    flex: 1 1 auto;
    min-height: 0;
  }
  /* ---- List: the cards ride in a sheet over that map ---- */
  /* ---- List: the sheet IS the screen (Figma 32100:12615) ----
     It starts 24 from the top and runs to the bottom, so it covers the mode
     switcher rather than leaving it poking out above; the map behind it is
     dimmed. */
  .events-modal:not(.is-events-map):not(.is-events-picked):not(.is-delivery) .events-modal__card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(0, 0, 0, 0.65);
  }
  /* The sheet covers it in the frame, so it simply isn't on this screen; the
     cross steps back to the map, where the switcher lives. */
  .events-modal:not(.is-events-map):not(.is-events-picked):not(.is-delivery) .events-switch {
    display: none;
  }
  .events-modal:not(.is-events-map):not(.is-events-picked):not(.is-delivery) .events-modal__pane {
    position: absolute;
    left: 0;
    right: 0;
    top: 24px;
    bottom: 0;
    z-index: 3;
    max-height: none;
    padding: 32px 16px 16px;
    background: var(--background-color);
    border-radius: 32px 32px 0 0;
  }
  /* Cards sit 12 apart here, not the 8 of the two-pane layout */
  .events-modal:not(.is-events-map):not(.is-events-picked):not(.is-delivery) .events-modal__body {
    gap: 12px;
  }
  /* Nothing is picked yet, so there is nothing to order: the button turns up
     with the first tap on a card. */
  .events-modal:not(.is-events-map):not(.is-events-picked):not(.is-delivery):not(.has-pick) .events-modal__bottom {
    display: none;
  }
  /* The sheet carries the grey on-background cross; the white one beside the
     switcher belongs to the bare map screens */
  .events-modal:not(.is-events-map):not(.is-events-picked):not(.is-delivery) .events-modal__close {
    display: none;
  }
  .events-modal:not(.is-events-map):not(.is-events-picked):not(.is-delivery) .events-sheet__close {
    display: inline-flex;
    top: 24px;
    right: 16px;
  }
  /* The title row has to be at least as tall as the cross, or the cross hangs
     over the scrolling list below it */
  .events-modal:not(.is-events-map):not(.is-events-picked):not(.is-delivery) .events-modal__title {
    min-height: 46px;
    padding-right: 54px;
  }
  /* The switcher belongs to the map now, not to the sheet */
  .events-modal .events-switch {
    position: fixed;
    top: 24px;
    left: 16px;
    right: 16px;
    z-index: 3;
    height: 48px;
    background: var(--background-color);
    border-color: rgba(0, 0, 0, 0.04);
  }
  .events-modal .events-switch__btn {
    height: 48px;
    padding: 16px 12px;
    background: var(--background-color);
  }
  /* The pane starts where the map ends, so it is the anchor for the info
     block's cross. The switcher goes fixed instead — the card is 100vh here,
     so viewport-anchored and card-anchored are the same thing. */
  .events-modal.is-events-map:not(.is-delivery) .events-modal__pane,
  .events-modal.is-events-picked:not(.is-delivery) .events-modal__pane {
    position: relative;
    flex: 0 0 auto;
    padding: 0;
    gap: 0;
  }
  /* Map and picked screens lay search, filters and the card out on their own,
     so the list-screen scroller steps out of the way */
  .events-modal.is-events-map .events-modal__scroll,
  .events-modal.is-events-picked .events-modal__scroll {
    display: contents;
  }
  /* Title, schedule and the old CTA belong to the list screen only */
  .events-modal.is-events-map:not(.is-delivery) .events-modal__title,
  .events-modal.is-events-map:not(.is-delivery) .events-modal__body,
  .events-modal.is-events-map:not(.is-delivery) .events-modal__bottom,
  .events-modal.is-events-picked:not(.is-delivery) .events-modal__title,
  .events-modal.is-events-picked:not(.is-delivery) .events-search,
  .events-modal.is-events-picked:not(.is-delivery) .events-filters,
  .events-modal.is-events-picked:not(.is-delivery) .events-modal__bottom {
    display: none;
  }
  .events-modal.is-events-map:not(.is-delivery) .events-modal__locate,
  .events-modal.is-events-picked:not(.is-delivery) .events-modal__locate {
    display: none;                                 /* delivery-only control */
  }
  /* ---- Map screen: search and filters ride a bar at the foot of the map ----
     Same elements the list screen uses, so a chip pressed here is the chip the
     list reads. The pane holds nothing else on this screen. */
  .events-modal.is-events-map:not(.is-delivery) .events-modal__pane {
    padding: 16px 16px 30px;
    gap: 12px;
    border-top: 1px solid var(--quarternary-background-text-color);
    background: var(--background-color);
  }
  .events-modal.is-events-map:not(.is-delivery) .events-search,
  .events-modal.is-events-map:not(.is-delivery) .events-filters {
    margin: 0;
  }
  /* The search is a way into the list here, not a field to type in */
  .events-modal.is-events-map:not(.is-delivery) .events-search input {
    pointer-events: none;
  }
  .events-modal.is-events-map:not(.is-delivery) .events-search .search-clear {
    display: none;
  }
  /* The bar carries the search now, so the old text button would just repeat it */
  .events-modal.is-events-map:not(.is-delivery) [data-events-mapbar] {
    display: none;
  }
  .events-modal.is-events-picked:not(.is-delivery) [data-events-pickedbar] {
    display: block;
    padding: 15px 16px 30px;
    border-top: 1px solid var(--quarternary-background-text-color);
    background: var(--background-color);
  }
  .events-modal.is-events-picked:not(.is-delivery) [data-events-pickedbar] .events-modal__cta {
    height: 52px;
    font-size: 14px;
    line-height: 16px;
  }

  /* ---- Map screen: every stop, smaller pins ----
     The zoom-12 close-up belongs to the picked screen. Left visible here it
     covers the whole pane and eats the taps meant for the pins. */
  .events-modal.is-events-map:not(.is-delivery) .events-modal__zoom,
  .events-modal.is-events-map:not(.is-delivery) .events-modal__mark,
  .events-modal:not(.is-events-map):not(.is-events-picked):not(.is-delivery) .events-modal__zoom,
  .events-modal:not(.is-events-map):not(.is-events-picked):not(.is-delivery) .events-modal__mark {
    display: none;
  }
  .events-modal.is-events-map:not(.is-delivery) .events-modal__pin img {
    width: 42px;
    height: 60px;
  }
  /* And the picked screen shows only its own stop */
  .events-modal.is-events-picked:not(.is-delivery) .events-modal__pin {
    display: none;
  }

  /* ---- Picked screen: the selected card becomes the info block ---- */
  /* 532 in the frame, never taller; on a screen too short for map + block + bar
     the map gives way so Order here stays reachable */
  .events-modal.is-events-picked:not(.is-delivery) .events-modal__map {
    flex: 0 1 532px;
    min-height: 200px;
  }
  .events-modal.is-events-picked:not(.is-delivery) .events-modal__body {
    display: block;
    flex: 0 0 auto;
    margin: 0;
    padding: 24px 16px 16px;
    overflow: visible;
  }
  .events-modal.is-events-picked:not(.is-delivery) .events-day,
  .events-modal.is-events-picked:not(.is-delivery) .events-day__title,
  .events-modal.is-events-picked:not(.is-delivery) .event-card:not(.is-selected) {
    display: none;
  }
  .events-modal.is-events-picked:not(.is-delivery) .events-day:has(.event-card.is-selected) {
    display: block;
  }
  /* Flat block, no card chrome — and the title stops short of the cross */
  .events-modal.is-events-picked:not(.is-delivery) .event-card.is-selected {
    gap: 16px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .events-modal.is-events-picked:not(.is-delivery) .event-card.is-selected .event-card__name {
    max-width: 303px;
  }
  .events-modal.is-events-picked:not(.is-delivery) .events-sheet__close {
    display: inline-flex;
    top: 24px;
    right: 16px;
  }
}

/* =====================================================
   DELIVERY BELOW THE TWO-PANE WIDTH — map stacked on top
   (ported from CML, same .delivery / .dfield markup)
   (Figma 30362:40826 is the 320-820 frame; there is no 1080-820 frame for this
   modal, so the same stack carries up to 1080 — only the chrome differs.)
   Pickup keeps its schedule sheet; this is the delivery side only.
   ===================================================== */
@media (max-width: 1080px) {
  .events-modal.is-delivery .events-modal__card {
    position: relative;
    flex-direction: column;
  }
  /* The map is hidden from 1080 down; delivery brings it back and puts it on
     top. 550 in the frame, but a shorter card has to take it out of somewhere —
     the map gives way, the fields keep their exact heights. */
  .events-modal.is-delivery .events-modal__map {
    display: block;
    order: -1;                      /* above the fields, whatever the DOM order */
    flex: 1 1 550px;
    /* On a short window the map is what gives — every field has to stay
       reachable, Delivery instructions included */
    min-height: 120px;
  }
  /* The pane is the default containing block; the card has to be it so the
     switcher can float over the map above */
  /* The pane holds fixed-height fields and the button, so it must not shrink —
     otherwise both it and the map give way and the last field gets clipped. */
  .events-modal.is-delivery .events-modal__pane {
    position: static;
    /* Fields and button are what they are; the map above gives way to them, so
       nothing here is ever clipped or scrolled (Figma 32100:11786). */
    flex: 0 0 auto;
    min-height: 0;
    padding: 0;
    gap: 0;
  }
  /* Switcher floats over the top of the map: white pill, not the card tint */
  .events-modal.is-delivery .events-switch {
    position: absolute;
    top: 24px;
    left: 24px;
    right: 24px;
    z-index: 2;
    height: 48px;
    background: var(--background-color);
    border-color: rgba(0, 0, 0, 0.04);
  }
  .events-modal.is-delivery .events-switch__btn {
    height: 48px;
    padding: 16px 12px;
    background: var(--background-color);
  }
  /* Pane holds only the fields now — no title, no schedule */
  .events-modal.is-delivery .delivery__title {
    display: none;
  }
  .events-modal.is-delivery .delivery {
    flex: 0 0 auto;
    gap: 8px;
    padding: 24px;
  }
  .events-modal.is-delivery .delivery__extra,
  .events-modal.is-delivery .delivery__row {
    gap: 8px;
  }
  .events-modal.is-delivery .dfield {
    height: 54px;                  /* Figma 32100:11786 */
    flex-shrink: 0;
  }
  /* The phone's variant sets the value in Footnote Reg, not Main Text Reg
     (Figma 32100:12480); the caption above it stays Caption1 Reg 12/16. */
  .events-modal.is-delivery .dfield__input {
    font-size: 14px;
    line-height: 18px;
  }
  /* Price block: pinned under the fields with its own top border */
  .events-modal.is-delivery .events-modal__bottom {
    position: static;
    flex-shrink: 0;                /* the button is the one thing that never shrinks */
    padding: 15px 24px 30px;
    border-top: 1px solid var(--quarternary-background-text-color);
    background: var(--background-color);
  }
  .events-modal.is-delivery .events-modal__bottom .events-modal__cta {
    height: 52px;
    font-size: 14px;
    line-height: 16px;
  }
}
/* Phone only: the card fills the screen and the paddings tighten to 16 */
@media (max-width: 820px) {
  .events-modal.is-delivery .events-modal__card {
    height: 100vh;
    height: 100dvh;          /* the visible viewport — vh keeps the URL bar's share */
    border-radius: 0;
  }
  .events-modal.is-delivery .events-switch {
    left: 16px;
    right: 16px;
  }
  .events-modal.is-delivery .delivery {
    padding: 16px;
  }
  .events-modal.is-delivery .events-modal__bottom {
    padding: 15px 16px 30px;
  }
}

/* "Apt / Villa / Office" and "Floor" share a row down to the narrowest phone the
   frames cover (393, Figma 32100:11786). Below that the labels have nowhere to
   go, so they stack. */
@media (max-width: 359px) {
  .delivery__row {
    flex-direction: column;
  }
  /* Stacked, the "equal halves" flex divides the height instead of the width,
     and the two fields end up shorter than the ones above and below them. */
  .delivery__row .dfield {
    flex: 0 0 auto;
  }
}

/* ---- Delivery: the address is required (Figma 30350:34896 wording) ----
   The error is an inset shadow like the other field states, so switching it on
   never nudges the layout. */
.dfield.is-invalid {
  border-color: transparent;
  box-shadow: inset 0 0 0 2px var(--error-color);
}
.dfield.is-invalid .dfield__label {
  color: var(--error-color);
}
/* Filled error (Figma 32126:9720): the value is there but can't be used —
   outlined in ErrorColor, the caption keeps its colour */
.dfield.is-error {
  border-color: transparent;
  box-shadow: inset 0 0 0 2px var(--error-color);
}
/* Clear cross (Icon/close 14): only on a filled field that has focus */
.dfield {
  position: relative;
}
.dfield__clear {
  position: absolute;
  top: 50%;
  right: 12px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--card-text-color);
  transform: translateY(-50%);
  cursor: pointer;
}
.dfield__clear::after {                /* 24px tap target (WCAG 2.5.8) */
  content: '';
  position: absolute;
  inset: -5px;
}
.dfield:focus-within .dfield__clear:not([hidden]) {
  display: flex;
}
.dfield:focus-within:has(.dfield__clear:not([hidden])) .dfield__input {
  padding-right: 16px;                 /* 14 cross + 2 gap */
}
.delivery__error {
  margin: 0;
  font-family: var(--custom-app-font-reg);        /* Footnote Reg 14/18 */
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.4px;
  color: var(--error-color);
}
.delivery__error[hidden] {
  display: none;
}

/* ================= Menu loading skeleton =================
   While .app has .is-loading the real blocks stand in for their own skeleton:
   same boxes, same breakpoints, so nothing jumps when the content comes in.
   Colours come from the brand tokens; the sweep is fixed to the viewport, so
   every block shimmers in step. */
:root {
  --shimmer-base: color-mix(in srgb, var(--background-text-color) 8%, var(--background-color));
  --shimmer-highlight: var(--background-color);
}
@keyframes shimmer {
  from { background-position: -150vw 0; }
  to   { background-position: 50vw 0; }
}
.app.is-loading {
  pointer-events: none;
}
/* Inside a card the base is taken off the card's own fill, or it would vanish */
.app.is-loading .card {
  --shimmer-base: color-mix(in srgb, var(--card-text-color) 8%, var(--card-color));
}
.app.is-loading :is(
  .sidebar-search,
  .cat-btn__icon,
  .cat-btn > span:not(.cat-btn__icon),
  .signin-banner,
  .section-title,
  .section-sub,
  .all-btn,
  .card__img,
  .card__title,
  .price-btn
) {
  color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  background: linear-gradient(90deg,
      var(--shimmer-base) 40%, var(--shimmer-highlight) 50%, var(--shimmer-base) 60%)
    0 0 / 200vw 100vh fixed !important;
  animation: shimmer 1.6s linear infinite;
}
/* Text turns into a bar as long as the words it stands for */
.app.is-loading :is(.section-title, .section-sub, .card__title, .cat-btn > span:not(.cat-btn__icon)) {
  width: fit-content;
  max-width: 100%;
  border-radius: 6px;
}
/* Whatever sits inside a block (icons, images, badges, the field) waits too */
.app.is-loading :is(
  .sidebar-search,
  .cat-btn__icon,
  .signin-banner,
  .section-sub,
  .all-btn,
  .card__img,
  .price-btn
) > * {
  visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .app.is-loading * {
    animation: none !important;
  }
}

/* ================= Saved cards (Figma 30442:7006 / 30442:11592) =================
   A plain list: brand mark, masked number, Remove. The empty state reuses the
   Order history card (.empty-state). */
.saved-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.saved-cards[hidden] {
  display: none;
}
.saved-card {
  display: flex;
  align-items: center;
  gap: 32px;
}
.saved-card__info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.saved-card__brand {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  object-fit: contain;                   /* the marks sit centred in a 24px box */
}
.saved-card__number {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--custom-app-font-reg);     /* Main Text Reg 16/20 */
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--background-text-color);
  white-space: nowrap;
}
/* Four dots per hidden group (Figma Group 443: r 1.9, 10px apart) */
.saved-card__dots {
  flex-shrink: 0;
  width: 34px;
  height: 4px;
  background: radial-gradient(circle, currentColor 1.9px, transparent 2.1px) -3px 50% / 10px 4px repeat-x;
}
/* Remove (Figma Quantity / remove negative): quiet pill, ErrorColor label */
.saved-card__remove {
  flex-shrink: 0;
  min-width: 94px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--quarternary-background-text-color);
  font-family: var(--custom-app-font-bold);    /* Main Text SemiBold 16/20 */
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.4px;
  color: var(--error-color);
  cursor: pointer;
}
.saved-card__remove:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}
.empty-state__icon--card {
  color: var(--tertiary-card-text-color);
}

/* ================= Checkout loading skeleton =================
   Same treatment as the menu's: while .checkout has .is-loading the real blocks
   stand in for their own skeleton, so nothing moves when the content arrives.
   Shimmer colours and the sweep come from the menu skeleton above. */
.checkout.is-loading {
  pointer-events: none;
}
/* Inside a row or the summary the base is taken off their own fill */
.checkout.is-loading :is(.row-btn, .checkout-address__row, .checkout-summary, .order-option) {
  --shimmer-base: color-mix(in srgb, var(--card-text-color) 8%, var(--card-color));
}
.checkout.is-loading :is(
  .checkout__title,
  .section-subtitle,
  .map-preview,
  .row-input,
  .row-btn__icon,
  .row-btn__label > span:not(.checkout-event),
  .checkout-event__name,
  .checkout-event__when,
  .checkout-event__addr,
  .order-option__icon,
  .order-option__name,
  .qty,
  .tip-btn,
  .co-item__name,
  .co-item__mods,
  .co-item__qty,
  .co-item__price,
  .order-total__row > span,
  .checkout-summary__total-label,
  .checkout-summary__total-value,
  .applepay-btn,
  .checkout-proceed
) {
  color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  background: linear-gradient(90deg,
      var(--shimmer-base) 40%, var(--shimmer-highlight) 50%, var(--shimmer-base) 60%)
    0 0 / 200vw 100vh fixed !important;
  animation: shimmer 1.6s linear infinite;
}
/* Text turns into a bar as long as the words it stands for */
.checkout.is-loading :is(
  .checkout__title,
  .section-subtitle,
  .row-btn__label > span:not(.checkout-event),
  .checkout-event__name,
  .checkout-event__when,
  .checkout-event__addr,
  .order-option__name,
  .co-item__name,
  .co-item__mods,
  .co-item__qty,
  .co-item__price,
  .order-total__row > span,
  .checkout-summary__total-label,
  .checkout-summary__total-value
) {
  width: fit-content;
  max-width: 100%;
  border-radius: 6px;
}
.checkout.is-loading :is(.row-btn__icon, .order-option__icon) {
  border-radius: 6px;
  object-position: -9999px 0;            /* keep the box, drop the glyph */
}
/* Whatever sits inside a block (map, field, chip, button) waits too */
.checkout.is-loading :is(.map-preview, .row-input, .qty, .tip-btn, .applepay-btn, .checkout-proceed) > *,
.checkout.is-loading .row-btn__chev,
.checkout.is-loading .co-item__price > * {
  visibility: hidden;
}
/* Order type cards (L&L): the same one-line bar in every card. The name keeps
   its real box (a two-line name keeps its height, so nothing jumps when the page
   comes in); clip-path paints only a 20px bar, half the card wide, on the first
   line inside the 12px padding. The extra classes outweigh the shared :is()
   lists above, whose strongest member — span:not(.checkout-event) — would win. */
.checkout.is-loading .order-options .order-option .order-option__name {
  width: 100%;
  border-radius: 0;
  clip-path: inset(12px 25% calc(100% - 32px) 25% round 6px);
}
/* Summary total: label and amount sit on top of each other with no gap, so the
   bars are trimmed top and bottom — clip-path paints less without moving layout */
.checkout.is-loading :is(.checkout-summary__total-label, .checkout-summary__total-value) {
  clip-path: inset(3px 0 round 6px);
}
/* Nothing reads as chosen until the page is in (L&L order type cards) */
.checkout.is-loading .order-option {
  border-color: var(--quarternary-background-text-color) !important;
  box-shadow: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .checkout.is-loading * {
    animation: none !important;
  }
}