/* ============================================================================
   BISTRO — a warm, appetite-first restaurant design system.

   Translated from the "Restaurant UI/UX case study" wireframe: a slim hours
   bar above a centred-logo header, a full-bleed hero with paired CTAs, menu
   sections built from dish cards carrying a price token, a chef
   recommendation split, an event countdown, and a dark footer that repeats
   the nav, the hours and the two calls to action.

   The greyscale of the wireframe is interpreted as a warm palette: toasted
   paper, near-black olive ink, and a single olive-lime accent (the tint the
   wireframe used on the logotype). The merchant's accent_color is injected
   as --accent in the layout AFTER this file, so it always wins; everything
   tinted derives from it through color-mix and stays coherent.
   ========================================================================== */
/* Fallback faces sized to match Poppins and Inter, so the swap when the web
 * font arrives does not reflow the hero (it measured 0.13 CLS). Approximate
 * metrics of Arial scaled to each face. */
@font-face {
  font-family: "Poppins Fallback";
  src: local("Arial");
  size-adjust: 112%;
  ascent-override: 93%;
  descent-override: 31%;
  line-gap-override: 8%;
}

@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  --font-display: "Poppins", "Poppins Fallback", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Neutrals — warm, toasted, never blue-grey. */
  --ink: #17190f;
  --ink-soft: #3f4234;
  --muted: #666859;
  --paper: #faf8f3;
  --surface: #ffffff;
  --surface-2: #f1efe7;
  --surface-3: #e8e5da;
  --line: #e3dfd2;
  --line-2: #d3cebd;

  /* Dark block used by the footer and the hours bar. */
  --dark: #23261c;
  --dark-2: #2e3125;
  --on-dark: #f3f1e9;
  --on-dark-muted: #a9ab9c;

  --accent: #5c6e1f;            /* fallback; overridden inline by settings.accent_color */
  --accent-contrast: #ffffff;
  /* The merchant's accent, darkened to pass 4.5:1 for small text on the cream
     surfaces and as a fill behind white text. Use it where --accent is the
     colour of TEXT or of a button; keep --accent for borders, rings, icons. */
  --accent-ink: color-mix(in srgb, var(--accent) 80%, #000);
  --danger: #b23b2e;
  --success: #2c7a4b;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(23, 25, 15, 0.05), 0 1px 3px rgba(23, 25, 15, 0.04);
  --shadow: 0 8px 24px -10px rgba(23, 25, 15, 0.18), 0 2px 6px -2px rgba(23, 25, 15, 0.07);
  --shadow-lg: 0 30px 60px -28px rgba(23, 25, 15, 0.32), 0 10px 22px -14px rgba(23, 25, 15, 0.14);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 32%, transparent);

  /* The product page's hero photograph — "The Pass". Kept out of the shared
   * palette: --accent is merchant-set, so nothing that carries the page's
   * identity here leans on a hue. The photograph supplies the only saturated
   * colour; these two only supply the light and the lift. */
  --scrim-warm: linear-gradient(180deg, rgba(23, 25, 15, 0) 45%, rgba(23, 25, 15, 0.5) 82%, rgba(23, 25, 15, 0.82) 100%);
  --lift-1: 0 26px 50px -24px rgba(23, 25, 15, 0.3), 0 8px 20px -10px rgba(23, 25, 15, 0.14);

  --gutter: clamp(1.1rem, 4vw, 3rem);
  --maxw: 76rem;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

/* The `hidden` attribute must win.
 *
 * A UA stylesheet's `[hidden] { display: none }` is a single attribute
 * selector, so any class rule setting `display` out-specifies it — and every
 * flex or grid component in this file does exactly that. The delivery panel's
 * footer stayed on screen through the step it was hidden for, and the DOM
 * reported `hidden === true` the whole time, which is the sort of thing that
 * costs an afternoon. */
[hidden] { display: none !important; }

/* The clip has to be on `html`, not only on `body`.
 *
 * `body { overflow-x: hidden }` alone is the classic half-fix: desktop
 * browsers clip and look correct, while iOS Safari still lets the document
 * pan sideways. Overflow set on `html` propagates to the viewport, which is
 * what actually stops the pan — and because it propagates rather than making
 * a new scroll container, `position: sticky` on the header and the menu rail
 * keeps working.
 *
 * `clip` is declared second so it wins where supported: unlike `hidden` it
 * cannot become a scroll container at all. Safari below 16 drops the line it
 * does not understand and keeps `hidden`. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip;
  /* Keep focus out from under whatever is stuck to the edges.
   *
   * Tabbing scrolls the focused control just into view — and "just into view"
   * means underneath the sticky header, or behind the order bar pinned to the
   * bottom of a phone. The person tabbing then cannot see what they are about
   * to activate. `--stuck-top` is measured by the script for the header; the
   * bottom allowance is the tallest fixed bar this theme puts there. */
  scroll-padding-top: calc(var(--stuck-top, 0px) + 1rem);
  scroll-padding-bottom: 6rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  overflow-x: hidden;
  overflow-x: clip;
}

img, svg, video { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

a:hover { color: var(--accent); }

::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }

hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }

/* ---- Type ---------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 0.6rem;
}

h1 { font-size: clamp(2rem, 4.4vw, 3rem); }

h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }

h3 { font-size: 1.15rem; }

p { margin: 0 0 1rem; }

p:last-child { margin-bottom: 0; }

.muted { color: var(--muted); }

.price { font-family: var(--font-display); font-weight: 600; }

/* ---- Layout -------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

main.container { padding-top: 0; padding-bottom: 0; }

.section { padding: clamp(2.75rem, 6vw, 4.75rem) 0; }

.section--tint { background: var(--surface-2); }

.section--flush { padding-top: 0; }

.section__head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

.section__title { margin: 0; }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  --btn-bg: var(--surface-3);
  --btn-fg: var(--ink);
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  transition: transform 0.16s var(--ease), background-color 0.16s var(--ease), color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}

.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); color: var(--btn-fg); }

.btn:active { transform: translateY(0); }

.btn[disabled], .btn--disabled { opacity: 0.5; pointer-events: none; }

.btn--primary { --btn-bg: var(--accent-ink); --btn-fg: var(--accent-contrast); }

.btn--primary:hover { --btn-bg: color-mix(in srgb, var(--accent-ink) 86%, #000); }

.btn--dark { --btn-bg: var(--dark); --btn-fg: var(--on-dark); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-2); }

.btn--ghost:hover { --btn-bg: var(--surface); }

.btn--light { --btn-bg: var(--on-dark); --btn-fg: var(--dark); }

.btn--sm { padding: 0.55rem 1.05rem; font-size: 0.85rem; }

.btn--block { width: 100%; }

.btn--lg { padding: 1rem 2.1rem; font-size: 1.02rem; }

/* ---- Forms --------------------------------------------------------------- */
.field { display: block; margin-bottom: 1rem; }

.input, .select, .textarea {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}

.textarea { min-height: 7rem; resize: vertical; }

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.search-field { position: relative; max-width: 20rem; width: 100%; }

/* Logical, like the icon's inset: in RTL the icon sits on the right, and a
 * physical padding-left left the text running under it. */
.search-field .input { padding-inline-start: 2.35rem; border-radius: var(--radius-pill); }

.search-field__icon {
  position: absolute;
  inset-inline-start: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

/* Radio cards — delivery type / payment on the cart. */
.radio-list { display: flex; flex-direction: column; gap: 0.6rem; margin: 0 0 1.75rem; padding: 0; list-style: none; }

.radio-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 0.35rem 0;
}

.radio-row input { accent-color: var(--accent); width: 1.15rem; height: 1.15rem; cursor: pointer; }

.radio-row--card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 0.7rem 0.9rem;
}

.radio-row--card:hover { border-color: var(--line-2); }

/* ---- Flash modal (layout/theme.liquid, theme.js "Flash modal") -----------
 * Same shell as the other dialogs (.delivery-modal); only the mark's colour
 * says which of the three kinds it is. Narrower than a picker sheet — it is
 * one line or two of text, not a list to scroll. */
.flash-modal { max-width: 26rem; }

.flash-modal .delivery-modal__body { padding-top: 0.25rem; }

.flash-modal .delivery-modal__body p { margin: 0; font-size: 0.95rem; line-height: 1.5; }

.flash-modal--error .delivery-modal__mark { background: #8f2c21; }

.flash-modal--error .delivery-modal__title { color: #8f2c21; }

.flash-modal--success .delivery-modal__mark { background: #1f5c39; }

.flash-modal--success .delivery-modal__title { color: #1f5c39; }

.flash-modal--info .delivery-modal__mark,
.flash-modal:not(.flash-modal--error):not(.flash-modal--success) .delivery-modal__mark { background: var(--accent); }

/* ---- Top bar ------------------------------------------------------------- */
.topbar {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.topbar__inner {
  display: flex;
  align-items: center;
  /* Service tabs at the start edge, switchers and account/order at the end. */
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
  padding-block: 0.35rem;
}

/* ---- Sub-bar (opening hours, under the header) --------------------------- */
.subbar {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.subbar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding-block: 0.35rem;
}

.subbar__hours {
  /* It is a <p>, so the global `p { margin: 0 0 1rem }` applies, and flex
   * centres the MARGIN box rather than the text — that margin pushed the line
   * off-centre and inflated the bar well past its min-height. */
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-soft);
}

.subbar__hours .sep { color: var(--line-2); margin: 0 0.5rem; }

.topbar__links { display: flex; align-items: center; gap: 1.25rem; }

/* Icon beside the label, not stacked above it.
 *
 * Stacked, these two were the only things in the bar with a second line, so
 * they set the topbar's height on their own and sat oddly against the pill
 * switchers beside them. In a row the bar is one line throughout.
 *
 * 0.78rem matches `.switcher > summary` — at 0.66 the labels were sized to fit
 * under a 1.6rem icon, which is a constraint that no longer exists, and next
 * to the pills they read as a different tier of navigation. */
.topbar__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--ink-soft);
  white-space: nowrap;
}

.topbar__icon {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  transition: background-color 0.16s var(--ease);
}

.topbar__link:hover .topbar__icon { background: color-mix(in srgb, var(--accent) 22%, var(--surface-3)); }

.topbar__count {
  position: absolute;
  transform: translate(0.65rem, -0.85rem);
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 0.6rem;
  line-height: 1;
  padding: 0.15rem 0.3rem;
  border-radius: var(--radius-pill);
}

@media (max-width: 48rem) {
  /* On its own row the second line now has the width to survive, so only the
     * type size comes down — it no longer competes with the switchers. */
  .subbar { font-size: 0.68rem; }
  .subbar__inner { min-height: 2rem; }
  /* Icons only on a phone. Beside rather than beneath, each label roughly
     * doubles its link's width, and the bar still has the hours and three
     * switcher pills to fit.
     *
     * Clipped, not `display: none`: the label is the link's accessible name —
     * the icon is a bare SVG with nothing else to read — so hiding it outright
     * would leave a screen reader announcing "link" and the destination URL. */
  .topbar__link > span:not(.topbar__icon) {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  .topbar__links { gap: 0.75rem; }
}
@media (max-width: 22.5rem) {
  /* Very small screens — 320px and the 4.7" phones still in use.
   *
   * At 320px the utility row asked for more than the bar had: the service tabs
   * (148px) plus two switchers and two links with 12px gaps came to roughly
   * 300px inside a 285px content box, and `flex-wrap: nowrap` turned the
   * shortfall into ~5px of overflow. It never showed as a page scrollbar —
   * `html` and `body` carry `overflow-x: clip` — but the trailing control was
   * clipped, and in any context where that clip does not apply it is a scroll.
   *
   * Tighter gaps first; wrapping only if that is still not enough, which costs a
   * line of header height rather than a control. */
  .topbar__inner {
      flex-wrap: wrap;
      column-gap: 0.5rem;
      row-gap: 0.35rem;
    }
  .topbar__links { gap: 0.5rem; }
}
/* ---- Header -------------------------------------------------------------- */
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }

/* On by default, switchable from Preferences → Header.
 *
 * Only this element is pinned, and that is the point: the service row above it
 * and the hours strip below it are not inside it, so they scroll away and what
 * stays is one bar — the nav and the cart — rather than the three tiers the
 * header draws at the top of the page. That is what makes it affordable on a
 * short screen.
 *
 * `html` and `body` carry `overflow-x: clip` rather than `hidden` precisely so
 * this keeps working: `hidden` would make them scroll containers and a sticky
 * child of a scroll container it fills has nothing to stick to. */
.site-header--sticky { position: sticky; top: 0; z-index: 50; }

/* Sticky needs a containing block taller than itself, and the header does not
 * have one by default: the renderer wraps every section in a div of its own,
 * and that wrapper is exactly as tall as the header, the service row and the
 * hours strip together. A sticky element cannot leave its parent's box, so it
 * reached the top of the wrapper — which is where it already was — and then
 * scrolled away with it. The setting was on and nothing happened, which is
 * what it looked like.
 *
 * `display: contents` removes the wrapper's box without removing the element:
 * the three bars become children of `<body>` for layout, so the header sticks
 * against the page. The wrapper stays in the DOM, so the editor still finds
 * the section by walking up from a click.
 *
 * Matched by shape rather than by the wrapper's generated id — the theme does
 * not spell out the renderer's naming — and only when the merchant has asked
 * for a sticky header. */
body > div:has(> .site-header--sticky) { display: contents; }

/* The dialogs live in the top layer, above any z-index, so a sticky header
 * cannot cover them — nothing to guard against there. */
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  min-height: 5.25rem;
}

/* The lead grid cell: menu toggle and primary nav. */
.header__lead { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.75rem); min-width: 0; }

/* ---- Delivery location panel --------------------------------------------- */
.delivery-modal {
  width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 3rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.delivery-modal::backdrop { background: rgba(23, 25, 15, 0.55); }

/* The form is the scroll container, not the dialog, so the head and foot stay
 * put while a long map + fields area scrolls between them. */
.delivery-modal__form { display: flex; flex-direction: column; max-height: inherit; }

.delivery-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--line);
}

.delivery-modal__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-contrast);
}

.delivery-modal__heads { display: flex; flex-direction: column; gap: 0.1rem; margin-inline-end: auto; }

.delivery-modal__title { font-family: var(--font-display); font-size: 1.05rem; color: var(--accent); }

.delivery-modal__sub { font-size: 0.85rem; color: var(--ink-soft); }

/* Search sits between the head and the list, on the tinted band, so it reads
 * as a filter over what is below rather than another field in the form. */
.delivery-modal__search {
  max-width: none;
  padding: 0.9rem 1.25rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}

.delivery-modal__search .search-field__icon { inset-inline-start: 1.9rem; }

.delivery-modal__empty { margin: 1rem 0 0; text-align: center; color: var(--muted); font-size: 0.9rem; }

/* ---- Delivery areas ------------------------------------------------------ */
.delivery-modal__legend {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.area-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }

.area {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 0.9rem;
  text-align: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}

.area:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }

.area__pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ink-soft);
}

.area__body { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; margin-inline-end: auto; }

.area__name { font-family: var(--font-display); font-weight: 600; color: var(--accent); }

.area__meta { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.area__chip {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ink-soft);
}

/* The fee is the number that decides whether they order, so it is the one
 * thing in the row that is not the same grey as everything else. */
.area__addr { font-size: 0.8rem; color: var(--muted); }

.area__state { flex: 0 0 auto; }

.area.is-current { border-color: var(--accent); }

.badge {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Open/closed is the one thing in the row that must survive a colour-blind
 * reader, so the words carry it and the tint only reinforces. */
.badge--open   { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent-ink); }

.badge--closed { background: color-mix(in srgb, var(--danger) 12%, var(--surface));  color: var(--danger); }

.badge--busy   { background: color-mix(in srgb, #ca8a04 14%, var(--surface));  color: #8a5300; }

.area__chip--fee {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
}

.delivery-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}

.delivery-modal__close:hover { border-color: var(--line-2); color: var(--ink); }

.delivery-modal__body { padding: 1.25rem; overflow-y: auto; }

.delivery-modal__body .location-picker { margin-bottom: 0; }

.delivery-modal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}

.delivery-modal__back { padding: 0.6rem 1rem; font-size: 0.85rem; }

.delivery-modal__branch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

@media (max-width: 34rem) {
  /* Full-height sheet on a phone: the map needs the room, and a small centred
     * card leaves it too short to aim a pin in. */
  .delivery-modal { width: 100vw; max-width: 100vw; max-height: 100dvh; border-radius: 0; }
  .delivery-modal__confirm { width: 100%; }
}
/* ---- Service tabs -------------------------------------------------------- */
.service-tabs { display: flex; align-items: center; gap: 0.4rem; }

.service-tabs__form { margin: 0; }

.service-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color 0.16s var(--ease), color 0.16s var(--ease), background-color 0.16s var(--ease);
}

.service-tab:hover { border-color: var(--line-2); color: var(--ink); }

/* Sized to sit level with the switcher pills sharing this row. */
.topbar .service-tab { padding: 0.3rem 0.75rem; font-size: 0.8rem; }
.topbar .service-tab.is-active { padding: calc(0.3rem - 1px) calc(0.75rem - 1px); }

/* The active tab is carried by colour AND weight of border, not colour alone —
 * on a warm neutral palette a tint shift on its own is easy to miss. */
/* The chosen service is outlined in the accent (2px, the extra width taken from the
 * padding so nothing shifts), tinted, and carries a tick after its name. */
.service-tab.is-active {
  padding: calc(0.45rem - 1px) calc(0.85rem - 1px);
  color: var(--accent-ink);
  border: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.service-tab__check { flex: none; color: var(--accent); }

/* The branch pill: a pin tile, "Pick up from" over the branch and its address, and a
 * quiet Change. Rounded and light, so it reads as a place rather than a form control. */
.service-tabs__branch {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  max-width: 22rem;
  margin-inline-start: 0.6rem;
  padding: 0.3rem 0.5rem 0.3rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font: inherit;
  text-align: start;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}

[dir="rtl"] .service-tabs__branch { padding: 0.3rem 0.35rem 0.3rem 0.5rem; }

.service-tabs__branch:hover { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }

.service-tabs__branch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.branch-card__pin {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--accent);
}

.branch-card__text { display: grid; gap: 0.05rem; min-width: 0; flex: 1; }

.branch-card__label { font-size: 0.66rem; line-height: 1.1; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

.branch-card__line { display: flex; align-items: baseline; gap: 0.4rem; min-width: 0; font-size: 0.82rem; line-height: 1.25; }

.branch-card__line strong { flex: none; max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-weight: 700; }

.branch-card__addr { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 0.76rem; }

.branch-card__change {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.service-tabs__dinein {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.6vw, 2.1rem); }

.nav--end { justify-content: flex-end; }

.nav__link {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  position: relative;
  padding: 0.3rem 0;
  white-space: nowrap;
}

.nav__link::after {
  content: "";
  position: absolute;
  /* Logical sides, so in RTL the rule grows from the right as the text reads. */
  inset-inline-start: 0;
  inset-inline-end: 100%;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transition: inset-inline-end 0.22s var(--ease);
}

.nav__link:hover::after, .nav__link[aria-current]::after { inset-inline-end: 0; }

.brand { display: inline-flex; align-items: center; justify-content: center; }

.brand__img { max-height: 4rem; width: auto; }

.brand__text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  text-align: center;
  line-height: 1.15;
}

.brand__text em { font-style: normal; color: var(--accent); }

.nav-toggle {
  display: none;
  border: 1px solid var(--line-2);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.6rem;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 1.15rem;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}

.nav-toggle span + span { margin-top: 4px; }

/* ---- Mobile nav drawer --------------------------------------------------- */
/* Slides in from the inline start over a backdrop. `translateX` rather than
 * `inset-inline-start`, so the animation runs on the compositor and does not
 * relayout the page on every frame. */
.mobile-nav {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 70;
  width: min(80vw, 20rem);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  transform: translateX(-100%);
  transition: transform 0.24s var(--ease);
  overflow-y: auto;
  /* Notches and the home indicator. */
  padding-bottom: env(safe-area-inset-bottom);
}

[dir="rtl"] .mobile-nav { transform: translateX(100%); }

.mobile-nav[data-open] { transform: none; }

.mobile-nav__backdrop {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: rgba(23, 25, 15, 0.5);
  opacity: 0;
  transition: opacity 0.24s var(--ease);
}

.mobile-nav__backdrop[data-open] { opacity: 1; }

.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--gutter);
  border-bottom: 1px solid var(--line);
}

.mobile-nav__title {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.mobile-nav__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}

.mobile-nav ul { list-style: none; margin: 0; padding: 0.5rem 0 1rem; }

.mobile-nav a {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}

/* One item per line.
 *
 * `nav-links` is the header's markup reused, and there `.nav__item` is
 * `inline-flex` so the links sit in a row — that rule is both later in this
 * file and no less specific than `.mobile-nav a`, so it won and the drawer
 * read "Menu Search" / "Reservation Order Track" on two crowded lines. These
 * are scoped to the drawer so the header keeps its row. */
.mobile-nav ul > li { display: block; }

.mobile-nav .nav__item,
.mobile-nav .nav__item > .nav__link { display: block; }

.mobile-nav .nav__link {
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
}

/* The sliding underline is a pointer affordance for a horizontal bar; in a
 * stacked list it just draws a second line under every row. */
.mobile-nav .nav__link::after { display: none; }

/* Submenus expand in place — there is no room to fly one out, and hover is
 * not a gesture a phone has. */
.mobile-nav .nav__submenu {
  position: static;
  display: block;
  min-width: 0;
  padding: 0 0 0 0.9rem;
  border: 0;
  box-shadow: none;
  background: none;
}

.mobile-nav .nav__submenu a { font-weight: 500; }

.mobile-nav__extra { padding-bottom: 1.5rem; }

.mobile-nav__link { display: flex; align-items: center; gap: 0.6rem; }

.mobile-nav__branch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

@media (min-width: 60.01rem) {
  /* The drawer is a phone pattern; above the breakpoint the nav is in the
   * header and the button that opens this is hidden. */
  .mobile-nav, .mobile-nav__backdrop { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-nav, .mobile-nav__backdrop { transition: none; }
}
@media (max-width: 60rem) {
  /* Kept as `1fr auto 1fr`, not `auto 1fr auto`.
     *
     * The trailing nav is hidden at this width, so the third column has no
     * child. With `auto 1fr auto` the wordmark landed in the middle column —
     * which is then everything to the right of the menu button — and centred
     * itself inside that, sitting half a button's width off true centre. Two
     * equal `1fr` flanks put it in the middle of the PAGE whether or not the
     * third column has anything in it. */
  .site-header__inner { grid-template-columns: 1fr auto 1fr; min-height: 4.25rem; }
  .site-header .nav { display: none; }
  /* The branch name goes first — it is context rather than control, and this
     * row has the tabs, two switchers and two links to fit. */
  .service-tabs__branch { display: none; }
  .topbar .service-tab { padding: 0.3rem 0.6rem; font-size: 0.75rem; }
  .topbar .service-tab.is-active { padding: calc(0.3rem - 1px) calc(0.6rem - 1px); }
  /* The bar scrolls sideways rather than pushing the page wide.
     *
     * Its contents are not fixed: two service tabs, a language switcher, a
     * currency switcher, account and order — and each of those appears only
     * when the tenant has something to put in it. A storefront with two
     * languages AND two currencies has noticeably more here than one with
     * neither, and at some combination it will not fit any phone. Letting the
     * row scroll inside itself means the widest case degrades to a swipe
     * instead of dragging the whole page sideways.
     *
     * `min-width: 0` on the children is what actually allows it: a flex item
     * defaults to `min-width: auto` and refuses to shrink below its content,
     * which is how a row like this pushes its parent wide in the first place. */
  .topbar__inner { gap: 0.5rem; }
  /* `min-width: 0` so a flex item may shrink below its content. The default is
     * `auto`, which refuses to — and that is how a row like this drags the page
     * wider than the screen. */
  .topbar__inner > * { min-width: 0; }
  /* Switchers collapse to their icon.
     *
     * `div.topbar__links` measured 185px on a 375px screen — two service tabs,
     * a language pill, a currency pill and two links do not fit beside each
     * other, and the row pushed the page sideways. The words are the cheapest
     * thing to drop: the globe and the coin are understood, the summary already
     * carries `aria-label="Change language"` / `"Change currency"`, and the
     * chosen value is still in the menu the pill opens.
     *
     * Clipped rather than `display: none` so the label stays the control's
     * accessible name. */
  .topbar .switcher > summary > span {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  /* Nothing left for the caret to sit beside. */
  .topbar .switcher > summary .icon--caret { display: none; }
  .topbar .switcher > summary { padding: 0.35rem 0.5rem; gap: 0; }
  /* Anchored to the right edge of a pill that may itself be near the window
     * edge, so cap it to the screen rather than a fixed 11rem. */
  .popover { min-width: 0; width: max-content; max-width: min(80vw, 14rem); }
  .header__lead { gap: 0.5rem; }
  .nav-toggle { display: block; }
  .brand { justify-content: flex-start; }
  /* Placed explicitly: with the third column empty the wordmark would
     * otherwise flow into the gap the missing nav left behind. */
  .site-header__inner .brand { grid-column: 2; justify-self: center; }
}
/* ---- Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--surface-2);
  background-size: cover;
  background-position: center;
  min-height: clamp(26rem, 52vw, 40rem);
  display: grid;
  place-items: center;
  text-align: center;
  isolation: isolate;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(23, 25, 15, 0.06), rgba(23, 25, 15, 0.42));
}

.cat-grid--flat ~ .cat-more .cat-more__btn { margin-top: 0; }

.cat-card__ph { width: 100%; height: 100%; background: linear-gradient(160deg, var(--surface-3), var(--line-2)); }

/* ---- Menu section rail --------------------------------------------------- */
/* A horizontal strip of the menu's sections that sticks under the header while
 * the bands scroll past it, with the one you are reading marked. */
.menu-rail {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

/* The search rides in the rail, above the section links, so it sticks with
 * them. In the page head (single-section menus) it keeps its old spacing. */
.section__head .search-field { margin: 1.5rem auto 0; }

@keyframes rail-search-in { from { opacity: 0; transform: translateY(-0.35rem); } }

@media (min-width: 64rem) {
  .order-card {
      position: sticky;
      /* Clears whatever is stuck above: the header (measured into --stuck-top by
       * theme.js) plus the section rail, plus a little air. */
      top: calc(var(--stuck-top, 0px) + 5.5rem);
      padding: 1.25rem;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: var(--surface);
      box-shadow: var(--shadow-sm);
    }
}
/* The card while a quick add is round-tripping (theme.js, "The order card
 * while its line list is stale"): the existing lines and total stay exactly
 * as they were — reflowing them to grey bars, or dimming them hard, read as
 * the cart having emptied rather than as it being about to change. Only a
 * light sweep crosses them, so the wait reads as "updating" without ever
 * looking like the order was lost.
 *
 * `pointer-events` only — no `position` here. `.order-card` is already
 * `position: sticky` on desktop (below), which is a containing block for
 * the `::after` overlay same as `relative` would be; overriding it TO
 * `relative` won for specificity (two classes beat one) and silently
 * dropped the sticky behaviour for as long as this class was on, so the
 * card snapped back to its normal-flow position — off the top of a
 * scrolled page — and back again once the class came off. That looked
 * exactly like the card vanishing and reappearing, because it did. */
.order-card.is-loading { pointer-events: none; }

.order-card.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg,
    transparent 30%,
    color-mix(in srgb, var(--ink) 8%, transparent) 50%,
    transparent 70%);
  background-size: 200% 100%;
  animation: order-card-sweep 1.1s ease-in-out infinite;
}

@keyframes order-card-sweep {
  from { background-position: 150% 0; }
  to { background-position: -50% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .order-card.is-loading::after { animation: none; }
}
.order-card__title { margin: 0; font-size: 1.05rem; color: var(--accent); }

.dish-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2.4vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* One card, every width.
 *
 * The circular medallion was the theme's signature, but it only ever worked
 * at one size: it cropped a wide plate to a coin, hung the price off an edge
 * where a long money string had to escape the shape, and centred names that
 * then sat wider than their column. The phone already had a rectangular card
 * for those reasons — this is that card, used everywhere, so a dish looks the
 * same on a laptop as it does in a hand. Image, name, price, action, read in
 * that order.
 *
 * `--dish-pad` is the text inset, declared once because five children share
 * it and the phone wants a smaller one. The image is deliberately NOT inset:
 * it runs to the card's edges, and the card's `overflow: hidden` is what
 * rounds its top corners. */
.dish {
  --dish-pad: 0.9rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  padding-bottom: 0.9rem;
  transition: transform 0.24s var(--ease), box-shadow 0.24s var(--ease);
}

/* The whole card lifts now, not the image inside it — a picture that moved
 * within a still frame read as a glitch rather than as a response. */
.dish:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.dish__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 48rem) {
  /* Phone: two per row. Same card, tighter, and the description gives way —
   * there is no room for it beside a sibling card, and "Read more" already
   * leads to it. */
  .dish-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.75rem;
    }
  .dish {
      --dish-pad: 0.6rem;
      padding-bottom: 0.7rem;
    }
  .dish:hover { transform: none; box-shadow: none; }
}
/* The card's square picture frame. */
.pcard__frame {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.pcard__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Which content item these questions belong to — with the tiles above rather
 * than beside them, the block has to name its subject. */
.combo-sub__for {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}

/* The figure moves when it changes, and only when it changes.
 *
 * A running total that updates silently is a number people re-read to check
 * they saw it right. One short lift is enough to say "this just changed" —
 * short enough not to delay the next tap, and on the figure alone rather than
 * the button, so the target never moves under a thumb. */
@keyframes total-tick {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-0.18em); }
  100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  /* The change still needs marking, so the movement becomes a brief lightening
     * instead of being dropped altogether. */
  @keyframes total-tick {
      0%, 100% { opacity: 1; }
      40%      { opacity: 0.55; }
    }
}
/* ---- Quick add feedback --------------------------------------------------
 *
 * A quick add used to be a form post: the page reloaded, the shopper lost
 * their place in a long menu, and the only sign anything had happened was a
 * number that had already changed by the time they could look at it. The
 * script now posts in the background, so the number is the ONLY thing that
 * moves — and a number that changes silently is a number nobody notices. The
 * bounce is what points at it.
 *
 * Animation, not transition: the badge ends where it started, so there is no
 * end state to transition to. The class is removed on `animationend`, which
 * is what lets a second add replay it. */
@keyframes cart-bump {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.45); }
  55%  { transform: scale(0.92); }
  75%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

[data-cart-count].is-bumped { animation: cart-bump 0.5s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  /* Someone who has asked for less motion still needs to know it worked, so the
   * badge flashes its colours instead of moving. */
  @keyframes cart-bump {
      0%, 100% { filter: none; }
      40%      { filter: brightness(1.6); }
    }
}
/* A button cannot be pressed twice while its request is in flight — two taps
 * on a slow connection is two of the dish. The label stays in place (color
 * only, not `visibility` or `display`) so the button keeps its width and its
 * accessible name while a small ring spins over it — dimming alone (the
 * previous state here) reads the same as a plain disabled button, which
 * says "you can't do this" rather than "this is happening". `--btn-fg` is
 * used rather than `currentColor` precisely because the label's own color
 * is turned transparent right below it. */
.btn[aria-busy="true"] {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.1em;
  height: 1.1em;
  border: 2px solid var(--btn-fg);
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}

@keyframes btn-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .btn[aria-busy="true"] { opacity: 0.65; }
  .btn[aria-busy="true"]::after { animation: none; }
}
/* Three columns, and the third is what makes it a list rather than a wide
 * card: picture, what it is, what it costs and how to get it. Stacking the
 * button under the name left a hole the height of the photograph in every
 * row — the picture sets the row's height, and a two-line name cannot fill
 * it. Beside the name, that space is the layout instead of a gap in it. */
[data-view="list"] .dish {
  display: grid;
  /* ONE row: picture, text, action, all centred on it. Two rows was the bug —
   * the picture spans them, and a spanning item hands its height to the
   * tracks it spans, so an absent description became a tall empty track
   * holding the name up at the top of the card. */
  grid-template-columns: clamp(4.5rem, 15%, 7rem) minmax(0, 1fr) auto;
  grid-template-rows: auto;
  align-items: center;
  column-gap: 0.9rem;
  /* Only the end side: the picture runs to the card's start edge, the action
   * keeps its distance from the end. Logical, so in RTL — picture on the
   * right — the gap is on the left, where the button or badge now sits. */
  padding: 0;
  padding-inline-end: 0.9rem;
}

/* A row with neither description nor a second line still needs its own
 * height, or the picture alone decides it. */
[data-view="list"] .dish { min-height: 5.5rem; }

[data-view="list"] .dish:hover { transform: none; }

@media (max-width: 48rem) {
  /* No room for a third column beside a 5rem picture: the action drops under
     * the name, and the picture goes on spanning the rows beside both. */
  /* No room for a third column beside the picture, so the action drops under
     * the text and the picture spans both rows. Safe here: those two rows are
     * taller than the 5.5rem picture, so its span has nothing to inflate. */
  [data-view="list"] .dish {
      grid-template-columns: 5.5rem minmax(0, 1fr);
      grid-template-rows: auto auto;
      align-items: start;
      column-gap: 0.75rem;
      /* Logical, as on a wide screen: nothing on the picture's side, room on the
       * end — which is the left in RTL. */
      padding-block: 0.7rem;
      padding-inline: 0 0.7rem;
      min-height: 0;
    }
}
/* ---- Chef recommendation ------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: center;
}

.split--flip .split__media { order: 2; }

.split__media {
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(160deg, var(--surface-3), var(--line-2));
  box-shadow: var(--shadow);
}

.split__media--round { border-radius: var(--radius-pill); }

.split__media img { width: 100%; height: 100%; object-fit: cover; }

.split__body p { color: var(--ink-soft); max-width: 26rem; }

.split__cta { margin-top: 1.75rem; }

@media (max-width: 52rem) {
  .split { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
}
/* ---- Event countdown ----------------------------------------------------- */
.event {
  position: relative;
  text-align: center;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-2);
  background-size: cover;
  background-position: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter);
  isolation: isolate;
}

/* ---- Quantity stepper ---------------------------------------------------- */
/* One look for "how many" everywhere — the cart line's: a bordered box with
 * square buttons either side and the count between thin rules. The product
 * page, the option quantities and the cart all take it from here; the phone
 * action bar only recolours it (see "The bar"). */
.stepper {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}

.stepper__btn {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 0.16s var(--ease);
}

.stepper__btn:hover { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }

.stepper__input {
  width: 2.25rem;
  height: 40px;
  text-align: center;
  border: 0;
  border-inline: 1px solid var(--line);
  border-radius: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  -moz-appearance: textfield;
}

.stepper__input::-webkit-outer-spin-button,
.stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- Cart ---------------------------------------------------------------- */
.cart { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: clamp(2rem, 5vw, 4rem); align-items: start; }

.cart__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--line-2);
  padding-top: 1.25rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
}

.cart__total-value { background: var(--surface-3); border-radius: var(--radius-sm); padding: 0.5rem 1.75rem; }

.cart__side-title { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; margin: 0 0 0.9rem; }

.cart__place { margin-top: 2rem; text-align: center; }

.cart__place .btn { min-width: min(22rem, 100%); }

@media (max-width: 60rem) {
  .cart { grid-template-columns: 1fr; }
}
/* ---- Reservation --------------------------------------------------------- */
.reserve { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }

@media (max-width: 52rem) {
  .reserve { grid-template-columns: 1fr; }
}
/* ---- Generic product card (shop / search / collections) ------------------ */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

/* ---- Footer -------------------------------------------------------------- */
/* No margin above the footer: the last section's own bottom padding already
 * ends the page, and a margin on top of it was a band of bare page colour with
 * nothing in it. The brand badge (-2.75rem) still rises over the edge, into
 * that padding — above it, so nothing covers it. */
.site-footer {
  margin-top: 0;
  background: var(--dark);
  color: var(--on-dark);
  text-align: center;
  position: relative;
  padding: 0 0 2.25rem;
}

.site-footer a { color: var(--on-dark); }

.site-footer a:hover { color: color-mix(in srgb, var(--accent) 65%, #fff); }

/* Buttons keep their own foreground.
 *
 * The two rules above are `.site-footer a` — one class and one element, which
 * out-specifies the bare `.btn` that sets `color: var(--btn-fg)`. So every
 * button in the footer had its text repainted in the footer's link cream, and
 * `.btn--light` puts that cream on a cream background: "Reserve Now" was
 * invisible at rest and a washed-out olive on hover.
 *
 * Written against `.btn` rather than against `--btn-fg` so it holds for every
 * variant — a dark or ghost button dropped into the footer later inherits the
 * fix instead of rediscovering the bug. */
.site-footer .btn,
.site-footer .btn:hover { color: var(--btn-fg); }

.footer__brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border-radius: var(--radius);
  padding: 0.9rem 1.5rem;
  margin-top: -2.75rem;
  margin-bottom: 1.75rem;
  box-shadow: var(--shadow);
  color: var(--ink);
}

.footer__brand:hover { color: var(--ink); }

.footer__brand img { max-height: 3rem; width: auto; }

.footer__nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem clamp(1rem, 3vw, 2.25rem);
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
}

.footer__text {
  max-width: 42rem;
  margin: 0 auto 1.25rem;
  color: var(--on-dark-muted);
  font-size: 0.88rem;
  line-height: 1.7;
}

.footer__hours {
  color: var(--on-dark);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 2rem;
}

.footer__cta { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }

.footer__social { display: flex; justify-content: center; gap: 1.1rem; margin-bottom: 1.75rem; }

.footer__social a {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  border: 1px solid rgba(243, 241, 233, 0.28);
  transition: background-color 0.16s var(--ease), border-color 0.16s var(--ease);
}

.footer__social a:hover { background: rgba(243, 241, 233, 0.12); border-color: rgba(243, 241, 233, 0.5); }

.footer__legal { color: var(--on-dark-muted); font-size: 0.8rem; margin: 0; }

.footer__meta {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  font-size: 0.8rem;
  color: var(--on-dark-muted);
}

/* ---- RTL ----------------------------------------------------------------- */
[dir="rtl"] body { text-align: right; }

/* `.dish` is deliberately absent: its card is start-aligned, which already
 * flips to the right in RTL. Centring it here would have undone that. */
[dir="rtl"] .hero, [dir="rtl"] .event, [dir="rtl"] .site-footer,
[dir="rtl"] .menu-section__title, [dir="rtl"] .section__head--center { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  /* ---- Motion preference --------------------------------------------------- */
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
}
/* ---- Order list ---------------------------------------------------------- */
.orders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }

.order-row {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.order-row__no { font-family: var(--font-display); font-weight: 700; }

.order-row__meta { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.86rem; }

.order-row__side { text-align: end; }

.order-row__total { font-family: var(--font-display); font-weight: 700; margin: 0 0 0.3rem; }

.order-row__links { display: flex; gap: 0.85rem; justify-content: flex-end; font-size: 0.86rem; font-weight: 600; }

.order-row__links a { color: var(--accent); }

.status-pill {
  display: inline-block;
  margin-inline-start: 0.5rem;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

.empty-state {
  text-align: center;
  color: var(--muted);
  padding: clamp(2rem, 6vw, 3.5rem);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
}

.page-head { margin-bottom: 1.75rem; }

.back-link { color: var(--accent); font-weight: 600; font-size: 0.9rem; }

/* ---- Inherited sections --------------------------------------------------
   The retail-side sections (shop, collections, search, wishlist, blog,
   checkout) come from the platform's default theme and carry their own
   inline styling, which already picks up settings.accent_color. These few
   overrides pull their surfaces onto Bistro's radii, borders and shadows so
   they sit inside the design rather than beside it. Inline styles win over
   the cascade, hence the (sparing) !important. */
.product-card {
  border-color: var(--line) !important;
  border-radius: var(--radius) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.product-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.product-card img { border-radius: var(--radius-sm) !important; }

.product-grid { gap: clamp(1.25rem, 2.5vw, 2rem) !important; }

/* ---- Icons ---------------------------------------------------------------
   Every glyph is inline SVG from snippets/icon.liquid — no emoji, no icon
   font. They inherit currentColor and sit on the text baseline. */
.icon { display: inline-block; vertical-align: middle; flex: 0 0 auto; }

.icon--inline { margin-inline-end: 0.4rem; }

/* ---- Switcher pills + popovers (language, currency, service) ------------- */
.switcher { position: relative; }

.switcher > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.switcher > summary::-webkit-details-marker { display: none; }

.switcher > summary:hover { border-color: var(--line-2); color: var(--ink); }

.switcher[open] > summary { border-color: var(--accent); color: var(--ink); }

.switcher[open] > summary .icon--caret { transform: rotate(180deg); }

.icon--caret { transition: transform 0.18s var(--ease); opacity: 0.55; }

.popover {
  position: absolute;
  top: calc(100% + 0.45rem);
  inset-inline-end: 0;
  min-width: 11rem;
  padding: 0.35rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 60;
  text-align: start;
}

.popover__label {
  margin: 0.3rem 0.6rem 0.45rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.popover__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  text-align: start;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font: inherit;
  font-size: 0.88rem;
  color: var(--ink);
  cursor: pointer;
}

.popover__item:hover { background: var(--surface-2); }

.popover__item[aria-current="true"] { background: var(--surface-2); font-weight: 600; }

.popover__item .icon { margin-inline-start: auto; color: var(--accent); }

.popover__note { color: var(--muted); font-size: 0.78rem; }

/* ---- Nav dropdowns ------------------------------------------------------- */
.nav__item { position: relative; display: inline-flex; align-items: center; }

.nav__item > .nav__link { display: inline-flex; align-items: center; gap: 0.3rem; }

.nav__submenu {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  display: none;
  min-width: 12rem;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 50;
}

.nav__item:hover > .nav__submenu,
.nav__item:focus-within > .nav__submenu { display: block; }

.nav__submenu a {
  display: block;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
}

.nav__submenu a:hover { background: var(--surface-2); color: var(--ink); }

/* ---- Departments mega-menu (two-pane) ------------------------------------ */
.nav__item--mega { position: relative; }

.nav__mega {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  display: none;
  width: min(52rem, 92vw);
  min-height: 16rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 50;
}

.nav__item--mega:hover > .nav__mega,
.nav__item--mega:focus-within > .nav__mega { display: block; }

.nav__mega-depts {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  width: 15rem;
  border-inline-end: 1px solid var(--line);
}

.nav__mega-depts > li { margin: 0; }

.nav__mega-depts > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 1rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.nav__mega-depts > li > a::after { content: "\203A"; color: var(--muted); }

.nav__mega-depts > li:hover > a { background: var(--surface-2); }

.nav__mega-cats {
  display: none;
  position: absolute;
  top: 0;
  inset-inline-start: 15rem;
  inset-inline-end: 0;
  bottom: 0;
  padding: 1rem 1.25rem;
  overflow: auto;
}

.nav__mega-depts > li:hover > .nav__mega-cats { display: block; }

.nav__mega-depts > li:first-child > .nav__mega-cats { display: block; }

.nav__mega-depts:hover > li:first-child > .nav__mega-cats { display: none; }

.nav__mega-depts > li:first-child:hover > .nav__mega-cats { display: block; }

.nav__mega-cats-title {
  display: inline-block;
  margin: 0 0 0.6rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

.nav__mega-cats-title:hover { text-decoration: underline; }

.nav__mega-cats ul {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 1.5rem;
}

.nav__mega-cats li { margin: 0; break-inside: avoid; }

.nav__mega-cats a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0;
  color: var(--ink);
  text-decoration: none;
}

.nav__mega-cats a:hover span:last-child { text-decoration: underline; }

.nav__mega-thumb {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.nav__mega-thumb--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.9rem;
}

.nav__mega-empty { color: var(--muted); font-size: 0.9rem; }

/* The wordmark plaque sits on the light paper, not on the dark block, so it
   must opt out of the footer's link colour — `.site-footer a` would otherwise
   out-specify `.footer__brand` and wash the first word out to near-invisible
   cream on cream. */
.site-footer .footer__brand,
.site-footer .footer__brand:hover { color: var(--ink); }

.site-footer .footer__brand .brand__text em { color: var(--accent); }

/* The footer nav falls back to the header's own nav markup, so give those
   items the footer's spacing and drop the hover underline animation. */
.footer__nav .nav__item { display: inline-flex; }

.footer__nav .nav__link { font-size: 0.92rem; }

.footer__nav .nav__link::after { display: none; }

.footer__nav .nav__submenu { background: var(--surface); border-color: var(--line); }

.footer__nav .nav__submenu a { color: var(--ink); }


/* ===========================================================================
 * Product page — "Food details" (phone layout after the reference mock-up).
 *
 * Appended last on purpose: it re-styles rules defined earlier in this file,
 * and at equal specificity the later rule wins. Selectors are prefixed with
 * `.pdp` where they override a bare class, so they also win on specificity
 * against the earlier mobile block and cannot be undone by source order.
 *
 * Nothing here changes what the page DOES — the same form, the same field
 * names, the same price-model maths. It is layout, surface and type.
 * ======================================================================== */
@media (max-width: 63.99rem) {
  /* Stepper as the reference draws it: one bordered box, the count between. */
  .pdp__qty {
      display: inline-flex;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--surface);
      padding: 0;
    }
  .pdp__qty .stepper__btn {
      width: 40px;
      height: 40px;
      border: 0;
      border-radius: 0;
      background: none;
      color: var(--ink);
    }
  .section:has(> * > .pdp, > .pdp) { padding-bottom: 0; }
  body:has(.pdp) { padding-bottom: 6.75rem; }
  body:has(.pdp) { padding-bottom: 8.5rem; }
}
@media (max-width: 63.99rem) and (prefers-reduced-motion: no-preference) {
  /* ---- Phone: page transitions, the PLUS (Ionic) way --------------------------
   * Cross-document view transitions: the browser snapshots the old page and
   * animates to the new one on an ordinary link. No framework, no router — and
   * where it isn't supported, or the device asks for less motion, navigation is
   * simply instant, as before.
   *
   * Forward pushes the new page in from the trailing edge while the old one
   * drifts a little the other way and dims; back is the mirror. Which one is
   * decided in the head of layout/theme.liquid (the `pagereveal` script), which
   * tags the transition "back" or "forward". RTL flips the direction through
   * --vt-dir so Arabic pushes from the left. */
  @view-transition { navigation: auto; }
}
:root { --vt-dir: 1; --vt-ease: cubic-bezier(0.32, 0.72, 0, 1); --vt-time: 0.34s; }

:root[dir="rtl"] { --vt-dir: -1; }

@keyframes vt-push-in   { from { transform: translateX(calc(100% * var(--vt-dir))); } }

@keyframes vt-push-out  { to   { transform: translateX(calc(-30% * var(--vt-dir))); filter: brightness(0.85); } }

@keyframes vt-pop-in    { from { transform: translateX(calc(-30% * var(--vt-dir))); filter: brightness(0.85); } }

@keyframes vt-pop-out   { to   { transform: translateX(calc(100% * var(--vt-dir))); } }

::view-transition-group(root) { animation-duration: var(--vt-time); }

::view-transition-old(root) { animation: var(--vt-time) var(--vt-ease) both vt-push-out; }

::view-transition-new(root) { animation: var(--vt-time) var(--vt-ease) both vt-push-in; z-index: 1; }

/* Back: the page on top is the one leaving. */
html:active-view-transition-type(back)::view-transition-old(root) { animation-name: vt-pop-out; z-index: 1; }

html:active-view-transition-type(back)::view-transition-new(root) { animation-name: vt-pop-in; z-index: 0; }

/* The mobile icon bar stays put while the page slides: its own transition name
 * lifts it out of the page snapshot, and the new bar replaces the old one in
 * place. Here, in the stylesheet that is always loaded, rather than the bar's
 * own file, so the name is certain to be set when the browser snapshots. */
.mbar { view-transition-name: mbar; }
::view-transition-group(mbar) { animation: none; }
::view-transition-old(mbar) { display: none; }
::view-transition-new(mbar) { animation: none; }

/* ---- Phone: the order screen -----------------------------------------------
 * The cart as a screen of its own, like the dish and like PLUS's ticket: no
 * store header or footer, the title pinned at the top with a way back, and
 * the totals with "Add item" / "Place order" fixed at the bottom. The page's
 * own total and button stand down on a phone, since the footer carries both. */
.cart-bar,
.cart-foot { display: none; }

@media (max-width: 63.99rem) {
  body:has(.cart-page) .topbar,
    body:has(.cart-page) .site-header,
    body:has(.cart-page) .subbar,
    body:has(.cart-page) .site-footer { display: none; }
  .cart-bar {
      position: sticky;
      top: 0;
      z-index: 30;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 3.5rem;
      margin-bottom: 1rem;
      padding: 0.75rem var(--gutter);
      background: var(--surface);
      border-bottom: 1px solid var(--line);
    }
  .cart-bar__title {
      margin: 0;
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--accent);
    }
  .cart-bar__close {
      position: absolute;
      inset-inline-end: var(--gutter);
      top: 50%;
      transform: translateY(-50%);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.5rem;
      height: 2.5rem;
      color: var(--accent);
    }
  /* Room for the footer, so the last line is not underneath it. */
  body:has(.cart-foot) { padding-bottom: 12rem; }
}
/* ---- Checkout: the date picker ---------------------------------------------
 * A field that reads "Order now" or the chosen day and time, and a sheet from
 * the bottom with a month calendar and that day's times (theme.js builds
 * both). Theme tokens throughout, so it sits with the rest of the checkout;
 * the sheet lives on <body>, outside the section's own variables. */
/* The native box, kept in the form but out of sight. `!important` on the size:
 * the platform checkout styles its field inputs `width: 100%` with a heavier
 * selector, and an absolutely placed 100%-wide input with no offsets anchors
 * at the start side — in RTL it ran 1400px off the left edge and widened the
 * whole page, shoving the header and every card sideways. */
/* The label the picker lives in: the hidden native box is positioned against it,
   so a "required" bubble points at the field rather than the page corner. */
.sched-field { position: relative; display: block; }

.sched-native {
  position: absolute !important;
  inset-inline-start: 0;
  width: 1px !important;
  min-width: 0 !important;
  max-width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

.sched-trigger {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 3.15rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.94rem;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
}

.sched-trigger svg { flex: none; color: var(--accent); }

.sched-trigger__text { flex: 1; min-width: 0; }

.sched-trigger::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.25rem;
  border-inline-end: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
}

.sched-trigger.is-set { border-color: var(--accent); }

.sched-sheet {
  width: min(100%, 26rem);
  max-width: 100%;
  max-height: 92vh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: 20px 20px 0 0;
  background: var(--surface);
  color: var(--ink);
  overflow: auto;
}

@media (min-width: 40rem) {
  .sched-sheet { margin: auto; border-radius: 20px; }
}
.sched-sheet::backdrop { background: rgb(0 0 0 / 40%); }

.sched-sheet[open] { animation: sched-up 0.25s var(--ease, ease-out); }

@keyframes sched-up { from { transform: translateY(1.5rem); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .sched-sheet[open] { animation: none; }
}
.sched-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem 0.6rem; }

.sched-sheet__title { margin: 0; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; }

.sched-sheet__x {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 6%, var(--surface));
  color: var(--ink);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.sched-cal { padding: 0 1.1rem; }

.sched-cal__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }

.sched-cal__month { margin: 0; font-weight: 700; }

.sched-cal__step {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.sched-cal__step:disabled { opacity: 0.35; cursor: default; }

/* Only the icon turns in RTL (previous on the right pointing right, next on
 * the left pointing left). Flipping the whole button mirrored text glyphs
 * the browser had already mirrored, so both arrows pointed inwards. */
.sched-cal__step svg { display: block; margin: auto; }

[dir="rtl"] .sched-cal__step svg { transform: scaleX(-1); }

.sched-cal__week,
.sched-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.2rem; text-align: center; }

.sched-cal__week span { padding: 0.25rem 0; font-size: 0.75rem; font-weight: 600; color: var(--muted); }

.sched-cal__day {
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.sched-cal__day:disabled { color: color-mix(in srgb, var(--ink) 25%, var(--surface)); cursor: default; }

.sched-cal__day.is-today { box-shadow: inset 0 0 0 1px var(--accent); }

.sched-cal__day[aria-pressed="true"] { background: var(--accent); color: var(--accent-contrast, #fff); box-shadow: none; }

.sched-sheet__label { margin: 1rem 1.1rem 0.5rem; font-size: 0.85rem; font-weight: 700; }

.sched-times {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
  max-height: 11rem;
  padding: 0 1.1rem;
  overflow-y: auto;
}

.sched-time {
  min-height: 2.5rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.sched-time[aria-pressed="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.sched-sheet__foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  padding: 1rem 1.1rem calc(1rem + env(safe-area-inset-bottom));
}

.sched-sheet__foot .btn { min-height: 48px; border-radius: 10px; justify-content: center; }

.sched-sheet__foot .btn:disabled { opacity: 0.5; }

@media (max-width: 63.99rem) {
  /* ---- Phone: the checkout screen --------------------------------------------
   * The order screen's shape, one step on: no store header or footer, the title
   * pinned at the top with the arrow back to the order (the cart's bar, arrow at
   * the start), and "Place order" fixed at the bottom on white — the cart's
   * footer, not the section's own fade-out sticky strip.
   *
   * `.checkout-page`-prefixed where the section's own inline styles would
   * otherwise win: they come after this file in the page. */
  body:has(.checkout-page) .topbar,
    body:has(.checkout-page) .site-header,
    body:has(.checkout-page) .subbar,
    body:has(.checkout-page) .site-footer { display: none; }
  body:has(.checkout-page) { padding-bottom: 7.5rem; }
  body:has(.pdp) .topbar,
    body:has(.pdp) .site-header,
    body:has(.pdp) .subbar,
    body:has(.pdp) .site-footer { display: none; }
  /* On a phone the dish's own bar is the one that stays: the site header
     * scrolls away here, so the title bar pins to the very top instead of
     * stacking under it. theme.js reads the header as not stuck and --stuck-top
     * drops to 0, which everything below already follows. */
  body:has(.pdp) .site-header--sticky { position: relative; }
  html { scroll-padding-top: calc(var(--stuck-top, 0px) + var(--pdp-title-h, 0px) + 1rem); }
}
@keyframes combo-slot-in {
  from { opacity: 0; transform: translateY(10px); }
}

.combo-chosen__row {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scrollbar-width: none;
}

.combo-chosen__row::-webkit-scrollbar { display: none; }

.combo-chip {
  position: relative;
  flex: none;
  width: 3.6rem;
  height: 3.6rem;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  overflow: hidden;
  cursor: pointer;
}

.combo-chip.is-current { border-color: var(--accent); }

.combo-chip:focus-visible,
.combo-done__row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.combo-chip__thumb { position: absolute; inset: 0; }

.combo-chip__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.combo-chip__n {
  position: absolute;
  inset-block-start: 0.2rem;
  inset-inline-start: 0.2rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--dark);
  color: var(--on-dark);
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.combo-chosen__hint { margin: 0.35rem 0 0; font-size: 0.75rem; color: var(--muted); }

.combo-chosen__title {
  margin: 0 0 0.55rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
}

/* "Your choices" — every slot answered. Each row reopens its slot. */
.combo-done { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }

.combo-done__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: var(--tap-min, 3rem);
  padding: 0.4rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.combo-done__row .combo-chip__thumb {
  position: relative;
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2);
}

.combo-done__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }

.combo-done__name { font-weight: 600; font-size: 0.92rem; }

.combo-done__sub {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.combo-done__row::after {
  content: "›";
  flex: none;
  margin-inline-end: 0.35rem;
  color: var(--muted);
  font-size: 1.3rem;
  line-height: 1;
}

[dir="rtl"] .combo-done__row::after { transform: scaleX(-1); }

/* Edit mode on the product page says so, above the questions it prefilled. */
.pdp__editing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.25rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  font-size: 0.88rem;
}

.pdp__editing a { font-weight: 600; color: var(--accent); white-space: nowrap; }

/* ---- Home: offer stories ------------------------------------------------------
 * The PLUS offers row as story circles (sections/offer-stories): a ringed
 * photo, the saving on a badge, the dish name under it. A tap opens the
 * viewer — dark, full screen on a phone, a tall card on a wide screen — with
 * progress bars, the saving in a white circle, the dish, and "Order now". */
.stories { padding-block: 0.25rem clamp(1.25rem, 3vw, 2rem); }

.stories__title { margin: 0 0 0.75rem; font-family: var(--font-display); font-size: 1rem; font-weight: 700; }

.stories__row {
  display: flex;
  gap: 0.9rem;
  margin: 0 calc(-1 * var(--gutter));
  padding: 0.25rem var(--gutter) 0.6rem;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.stories__row::-webkit-scrollbar { display: none; }

.story {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  width: 5rem;
  color: var(--ink);
  text-decoration: none;
  scroll-snap-align: start;
}

.story:hover { color: var(--ink); }

.story__ring {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
  padding: 3px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #f2a900), var(--accent));
}

.story__pic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 3px solid var(--surface);
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-3, #eee);
  color: var(--muted);
}

.story__pic img { width: 100%; height: 100%; object-fit: cover; }

.story__badge {
  position: absolute;
  bottom: -0.4rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.08rem 0.45rem;
  border: 2px solid var(--surface);
  border-radius: var(--radius-pill);
  background: var(--danger);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

.story__name {
  width: 100%;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.story-view {
  width: 100%;
  max-width: 26rem;
  height: 100dvh;
  max-height: 100dvh;
  margin: auto;
  padding: 0;
  border: 0;
  background: #0d0d0d;
  color: #fff;
  overflow: hidden;
}

@media (min-width: 40rem) {
  .story-view { height: min(46rem, 92dvh); border-radius: 18px; }
}
.story-view::backdrop { background: rgb(0 0 0 / 78%); }

.story-view[open] { display: flex; flex-direction: column; }

.story-view__bars { display: flex; gap: 0.3rem; padding: calc(0.75rem + env(safe-area-inset-top)) 0.9rem 0; }

.story-view__bars span { flex: 1; height: 3px; border-radius: 2px; background: rgb(255 255 255 / 30%); overflow: hidden; }

.story-view__bars i { display: block; width: 0; height: 100%; background: #fff; }

.story-view__bars .is-now i { animation: story-fill 5s linear forwards; }

@keyframes story-fill { to { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .story-view__bars .is-now i { animation: none; width: 100%; }
}
.story-view__head { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.9rem; }

.story-view__who { font-size: 0.9rem; font-weight: 700; }

.story-view__x {
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 14%);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.story-view__stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0 1.25rem;
  text-align: center;
}

.story-view__deal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 8.5rem;
  height: 8.5rem;
  border-radius: 50%;
  background: #fff;
  color: #111;
  box-shadow: 0 10px 30px rgb(0 0 0 / 40%);
}

.story-view__deal strong { font-family: var(--font-display); font-size: 2.2rem; line-height: 1; }

.story-view__deal span { font-size: 1rem; font-weight: 700; }

.story-view__pic { width: 100%; border-radius: 16px; overflow: hidden; }

.story-view__pic img { display: block; width: 100%; max-height: 36vh; object-fit: cover; }

.story-view__title { margin: 0; font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; }

.story-view__price { margin: 0; font-size: 0.95rem; color: rgb(255 255 255 / 85%); }

.story-view__price s { opacity: 0.6; }

.story-view__cta {
  position: relative;
  z-index: 2;
  margin: 0 1.25rem calc(1.1rem + env(safe-area-inset-bottom));
  min-height: 48px;
  border-radius: 12px;
  justify-content: center;
}

.story-view__nav { position: absolute; z-index: 1; top: 4.5rem; bottom: 5.5rem; width: 35%; padding: 0; border: 0; background: none; cursor: pointer; }

.story-view__nav--prev { inset-inline-start: 0; }

.story-view__nav--next { inset-inline-end: 0; }

@media (max-width: 40rem) {
  /* ---- Dialogs: full screen on a phone, and they move ---------------------------
   * The delivery and pickup panels (and the dine-in note, which shares their
   * look) take the whole screen on a phone — the head pinned at the top, the
   * list scrolling under it, the foot at the bottom — rather than a card
   * floating over a dimmed page with the page still showing around it.
   *
   * Every dialog now arrives and leaves: a phone sheet rises from the bottom
   * and drops away; on a wider screen it fades in with a slight scale; the
   * story viewer fades. Done with the browser's own dialog transitions
   * (`@starting-style` + `allow-discrete` on display/overlay), so closing
   * animates too with no script, and a browser without them simply opens and
   * closes instantly, as before. None of it where less motion is asked for. */
  .delivery-modal {
      width: 100vw;
      max-width: 100vw;
      height: 100dvh;
      max-height: 100dvh;
      margin: 0;
      border-radius: 0;
      box-shadow: none;
    }
  .delivery-modal__form { height: 100%; max-height: 100dvh; }
  .delivery-modal__head { padding-top: calc(1.1rem + env(safe-area-inset-top)); }
  .delivery-modal__body { flex: 1; min-height: 0; }
  .delivery-modal__foot { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
}
.sched-sheet[open] { animation: none; }

@media (prefers-reduced-motion: no-preference) {
  /* the shared transition below replaces it */
  .delivery-modal,
    .sched-sheet,
    .story-view {
      transition:
        opacity 0.28s var(--ease, ease),
        transform 0.32s cubic-bezier(0.32, 0.72, 0, 1),
        overlay 0.32s allow-discrete,
        display 0.32s allow-discrete;
      opacity: 0;
    }
  .delivery-modal[open],
    .sched-sheet[open],
    .story-view[open] { opacity: 1; transform: none; }
  /* Where each one comes from, and goes back to. */
  .delivery-modal,
    .sched-sheet { transform: translateY(0.75rem) scale(0.98); }
  .story-view { transform: scale(0.96); }
  @media (max-width: 40rem) {
      .delivery-modal,
      .sched-sheet { transform: translateY(100%); }
    }
  @starting-style {
      .delivery-modal[open],
      .sched-sheet[open] { opacity: 0; transform: translateY(0.75rem) scale(0.98); }
      .story-view[open] { opacity: 0; transform: scale(0.96); }
    }
  @media (max-width: 40rem) {
      @starting-style {
        .delivery-modal[open],
        .sched-sheet[open] { opacity: 1; transform: translateY(100%); }
      }
    }
  /* The dimmed page fades with it. */
  .delivery-modal::backdrop,
    .sched-sheet::backdrop,
    .story-view::backdrop {
      transition: opacity 0.28s var(--ease, ease), overlay 0.32s allow-discrete, display 0.32s allow-discrete;
      opacity: 0;
    }
  .delivery-modal[open]::backdrop,
    .sched-sheet[open]::backdrop,
    .story-view[open]::backdrop { opacity: 1; }
  @starting-style {
      .delivery-modal[open]::backdrop,
      .sched-sheet[open]::backdrop,
      .story-view[open]::backdrop { opacity: 0; }
    }
}
@media (max-width: 40rem) {
  /* ---- …and every other dialog too ----------------------------------------------
   * The date picker sheet and the service-selector section's panels take the
   * whole screen on a phone as well, and move like the rest. The language and
   * currency switchers are menus under their button, not dialogs — full screen
   * they would cover the very control that closes them — so they stay drop-
   * downs and only get the entrance. */
  .sched-sheet {
      width: 100vw;
      max-width: 100vw;
      height: 100dvh;
      max-height: 100dvh;
      margin: 0;
      border-radius: 0;
    }
  .sched-sheet[open] { display: flex; flex-direction: column; }
  .sched-sheet__head { padding-top: calc(1rem + env(safe-area-inset-top)); }
  .sched-times { flex: 1; min-height: 0; max-height: none; align-content: start; }
  /* The service-selector section (sections/service-widget) — its own inline
     * styles come after this file, hence the doubled class. */
  .service-widget.service-widget .svc-modal { padding: 0; align-items: stretch; }
  .service-widget.service-widget .svc-modal__card {
      max-width: 100%;
      height: 100dvh;
      max-height: 100dvh;
      border-radius: 0;
      box-shadow: none;
      padding-top: calc(1.25rem + env(safe-area-inset-top));
    }
}
@media (prefers-reduced-motion: no-preference) {
  /* The service-selector panels open on :target; `display` transitions
     * discretely, so leaving animates too. */
  .service-widget.service-widget .svc-modal {
      transition: opacity 0.28s var(--ease, ease), display 0.32s allow-discrete;
      opacity: 0;
    }
  .service-widget.service-widget .svc-modal:target { opacity: 1; }
  .service-widget.service-widget .svc-modal__card {
      transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
      transform: translateY(0.75rem) scale(0.98);
    }
  .service-widget.service-widget .svc-modal:target .svc-modal__card { transform: none; }
  @starting-style {
      .service-widget.service-widget .svc-modal:target { opacity: 0; }
      .service-widget.service-widget .svc-modal:target .svc-modal__card { transform: translateY(0.75rem) scale(0.98); }
    }
  @media (max-width: 40rem) {
      .service-widget.service-widget .svc-modal__card { transform: translateY(100%); }
      @starting-style {
        .service-widget.service-widget .svc-modal:target .svc-modal__card { transform: translateY(100%); }
      }
    }
  /* Header menus: a short drop and fade as they open. */
  details[open] > .popover {
      transition: opacity 0.18s var(--ease, ease), transform 0.2s var(--ease, ease);
      opacity: 1;
      transform: none;
    }
  @starting-style {
      details[open] > .popover { opacity: 0; transform: translateY(-0.35rem); }
    }
}
/* ---- Cover hero (sections/hero-cover) -----------------------------------------
 * The page-builder cover: colour / gradient / image / video ground, an
 * optional tinted overlay and dot pattern, parallax for an image, the text in
 * the chosen colour. Everything the section sets arrives as custom properties
 * (--cover-ink, --cover-ground, --cover-overlay, --cover-overlay-o). */
.cover {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(22rem, 62vh, 40rem);
  padding-block: clamp(3rem, 8vw, 6rem);
  background: var(--cover-ground, #17190f);
  color: var(--cover-ink, #fff);
  overflow: hidden;
}

.cover--full { min-height: 100svh; }

.cover__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; container-type: size; }

.cover__img { position: absolute; inset: 0; background-size: cover; background-position: center; }

.cover--parallax .cover__img { background-attachment: fixed; }

/* A 16:9 frame that always covers the box, whatever its shape — sized from
 * the media layer's own dimensions (container units). */
.cover__yt,
.cover__video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100cqw, 177.78cqh);
  height: max(56.25cqw, 100cqh);
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}

.cover__video { object-fit: cover; }

.cover__overlay { position: absolute; inset: 0; background: var(--cover-overlay, #000); opacity: var(--cover-overlay-o, 0.6); }

.cover__pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(0 0 0 / 38%) 1px, transparent 1.3px);
  background-size: 4px 4px;
}

.cover__inner { position: relative; width: 100%; }

.cover--center .cover__inner { text-align: center; }

.cover__title {
  margin: 0;
  max-width: 20ch;
  color: inherit;
  font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4rem);
  line-height: 1.05;
}

.cover--center .cover__title { margin-inline: auto; }

.cover__title em { font-style: normal; color: var(--accent); }

.cover__sub { max-width: 42ch; margin: 1rem 0 0; color: inherit; opacity: 0.9; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); line-height: 1.6; }

.cover--center .cover__sub { margin-inline: auto; }

.cover__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

.cover--center .cover__cta { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .cover__yt { display: none; }
  .cover--parallax .cover__img { background-attachment: scroll; }
}
/* ---- Content cards (snippets/content-cards, sections/cards-*) -------------------
 * A titled grid of cards over an optional background — the Cover hero's
 * layers (.cover__media and friends) reused. Four card shapes:
 *   branches      photo on top, name, address, open/closed, contact footer
 *   team          round portrait, name, role, a line about them
 *   specials      photo beside the text, the price in the accent
 *   testimonials  round photo beside a quote, on the section's own ground */
.cards {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  background: var(--cover-ground, transparent);
  color: var(--cards-ink, var(--ink));
  overflow: hidden;
}

.cards .cover__media { z-index: -1; }

@keyframes trk-dot { 0%, 80%, 100% { transform: scale(0.5); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }

@keyframes trk-steam { 0% { transform: translateY(4px); opacity: 0; } 40% { opacity: 0.8; } 100% { transform: translateY(-6px); opacity: 0; } }

@keyframes trk-bump { to { transform: translateY(-1.5px); } }

@keyframes trk-wind { from { transform: translateX(6px); opacity: 0; } 50% { opacity: 0.7; } to { transform: translateX(-6px); opacity: 0; } }

@keyframes trk-pop { from { transform: scale(0.3); opacity: 0; } }

@keyframes trk-ring {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  70% { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Drag to scroll (theme.js / home-sections.js "Drag to scroll"): while a mouse
 * pulls a carousel or the stories row, snapping waits and text is not picked. */
:is([data-cards-track], .stories__row) { cursor: grab; }

:is([data-cards-track], .stories__row).is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }

:is([data-cards-track], .stories__row).is-dragging * { pointer-events: none; }

/* ---- Account: the profile page, organised like Fresha's -------------------------
 * templates/customers/account — a side menu (the customer's name over the
 * account's places) and the page as two cards: the profile (avatar with the
 * initial, the name, each detail as a label over its value) and the saved
 * addresses (icon rows, then "Add"). On a phone the menu becomes a row of tabs
 * and the cards stack. */
.account-page { padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(2.5rem, 5vw, 4rem); background: var(--surface-2, transparent); }

.account-shell { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }

.account-nav { position: sticky; top: calc(var(--stuck-top, 0px) + 1rem); }

.account-nav__name { margin: 0 0 0.75rem; padding-inline: 0.75rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; }

.account-nav__list { display: grid; gap: 0.2rem; margin: 0; padding: 0; list-style: none; }

.account-nav__form { margin: 0; }

.account-nav__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.75rem;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.account-nav__link span { flex: 1; }

.account-nav__link em { font-style: normal; font-size: 0.75rem; font-weight: 700; padding: 0.05rem 0.5rem; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--ink) 8%, var(--surface)); color: var(--muted); }

.account-nav__link:hover { background: color-mix(in srgb, var(--ink) 5%, var(--surface)); color: var(--ink); }

.account-nav__link[aria-current="page"] { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); font-weight: 600; }

.account-nav__link--out { color: var(--muted); }

.account-nav__link--out:hover { color: var(--danger); }

.account-page__title { margin: 0 0 1.5rem; font-family: var(--font-display); font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); font-weight: 700; }

.account-cards { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }

.account-card { padding: 1.5rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }

.account-card__title { margin: 0 0 1rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; }

.profile-card__head { display: grid; justify-items: center; gap: 0.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); text-align: center; }

.profile-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast, #fff);
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 700;
}

.profile-card__name { margin: 0.25rem 0 0; font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; overflow-wrap: anywhere; }

.profile-card__branch { margin: 0; font-size: 0.85rem; color: var(--muted); }

.profile-card__details { display: grid; gap: 1rem; margin: 1.25rem 0 0; }

.profile-card__details dt { font-size: 0.95rem; font-weight: 600; color: var(--ink); }

.profile-card__details dd { margin: 0.15rem 0 0; font-size: 0.9rem; color: var(--muted); overflow-wrap: anywhere; }

.address-card__list { display: grid; gap: 0.75rem; margin: 0 0 1rem; padding: 0; list-style: none; }

.address-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s;
}

.address-row:hover { border-color: var(--accent); color: var(--ink); }

.address-row__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); }

.address-row__text { display: grid; gap: 0.15rem; min-width: 0; }

.address-row__text strong { font-size: 0.95rem; font-weight: 600; }

.address-row__text strong em { margin-inline-start: 0.35rem; padding: 0.05rem 0.45rem; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); font-size: 0.7rem; font-style: normal; font-weight: 700; }

.address-row__text span { font-size: 0.85rem; color: var(--muted); overflow-wrap: anywhere; }

.address-card__empty { margin: 0 0 1rem; color: var(--muted); font-size: 0.9rem; }

.address-card__add {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  padding: 0.45rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.address-card__add:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 63.99rem) {
  .account-shell { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .account-nav { position: static; }
  .account-nav__name { display: none; }
  .account-nav__list { display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 0.25rem; }
  .account-nav__list::-webkit-scrollbar { display: none; }
  .account-nav__list > li { flex: none; }
  .account-nav__link { width: auto; min-height: 2.4rem; padding: 0.4rem 0.85rem; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); white-space: nowrap; font-size: 0.88rem; }
  .account-cards { grid-template-columns: minmax(0, 1fr); }
}
/* Phone: Fresha's mobile profile — the page's own bar (back + "My profile")
 * pinned at the top instead of the side menu, the profile card, the addresses
 * as white rows straight on the page, then the account's places as rows. */
.account-bar,
.account-more { display: none; }

@media (max-width: 63.99rem) {
  .account-page { padding-top: 0; }
  .account-bar {
      position: sticky;
      top: var(--stuck-top, 0px);
      z-index: 20;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      min-height: 3.5rem;
      margin-bottom: 1rem;
      padding: 0.5rem var(--gutter);
      background: var(--surface-2, var(--surface));
      border-bottom: 1px solid var(--line);
    }
  .account-bar__back { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin-inline-start: -0.5rem; color: var(--ink); }
  [dir="rtl"] .account-bar__back svg { transform: scaleX(-1); }
  .account-bar__title { margin: 0; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; }
  .account-nav { display: none; }
  .account-page__title { display: none; }
  .address-card { padding: 0; border: 0; background: none; }
  .address-row { background: var(--surface); }
  .account-more { display: block; margin-top: 2rem; }
  .account-more__title { margin: 0 0 0.5rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; }
  .account-more__list { margin: 0; padding: 0; list-style: none; }
  .account-more__list form { margin: 0; }
  .account-more__list a,
    .account-more__list button {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      min-height: 3.25rem;
      padding: 0.5rem 0;
      border: 0;
      border-bottom: 1px solid var(--line);
      background: none;
      color: var(--ink);
      font: inherit;
      font-size: 0.95rem;
      text-align: start;
      text-decoration: none;
      cursor: pointer;
    }
  .account-more__list svg { color: var(--muted); }
  [dir="rtl"] .account-more__list svg { transform: scaleX(-1); }
  .account-more__list button { color: var(--danger); }
}
/* ---- Account: the "Add address" sheet -------------------------------------------
 * The .delivery-modal panel (full screen on a phone, moving in and out) with a
 * plain form: label over a rounded field, building / block / flat three across,
 * and Save across the foot. */
.address-form__body { display: grid; gap: 1rem; }

.address-form__field { display: grid; gap: 0.35rem; margin: 0; }

.address-form__field span { font-size: 0.85rem; font-weight: 700; color: var(--ink); }

.address-form__field input {
  width: 100%;
  min-height: 3rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
}

.address-form__field input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 1px; border-color: var(--accent); }

.address-form__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }

.address-form__foot { justify-content: stretch; }

.address-form__save { width: 100%; min-height: 48px; border-radius: var(--radius-pill); justify-content: center; }

/* ---- Loyalty wallet (sections/main-wallet) — Fresha's loyalty page ---------------
 * A gradient header card over the balance and its two rows, a plain card of
 * rows below, and every row opening a rounded sheet. */
.wallet-page { padding: clamp(1.25rem, 3vw, 2.5rem) 0 clamp(2.5rem, 5vw, 4rem); background: var(--surface-2, transparent); }

@starting-style { .wallet-sheet[open] { opacity: 0; transform: translateY(1.5rem) scale(0.98); } }

/* ---- Sign in / Create account (templates/customers/login, register) --------------
 * One rounded card on the page's tint: title and a line under it, label-over-
 * field inputs, the phone as dial-code select + number, a pill submit, then the
 * social buttons (snippets/social-login from the base theme) and the switch. */
.auth-page { padding: clamp(2rem, 5vw, 4rem) 0; background: var(--surface-2, transparent); }

.auth-card { max-width: 28rem; padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }

.auth-card__title { margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); font-weight: 700; }

.auth-card__sub { margin: 0.4rem 0 1.5rem; color: var(--muted); font-size: 0.92rem; }

.auth-card__error { margin-bottom: 1rem; padding: 0.75rem 1rem; border-radius: 12px; background: color-mix(in srgb, var(--danger) 10%, var(--surface)); color: var(--danger); font-size: 0.9rem; }

.auth-form { display: grid; gap: 1rem; }

.auth-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }

.auth-field input:focus,
.auth-phone__code:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 1px; border-color: var(--accent); }

.auth-phone { display: flex; gap: 0.5rem; }

.auth-phone__number { flex: 1 1 auto; min-width: 0; }

.auth-card__forgot { justify-self: end; margin-top: -0.35rem; font-size: 0.85rem; color: var(--accent); }

.auth-form__submit { width: 100%; min-height: 48px; margin-top: 0.25rem; border-radius: var(--radius-pill); justify-content: center; }

.auth-card .social-login { margin-top: 1.25rem; }

.auth-card .social-login__button { min-height: 48px; border-radius: var(--radius-pill); }

.auth-card__switch { margin: 1.5rem 0 0; text-align: center; font-size: 0.9rem; color: var(--muted); }

.auth-card__switch a { color: var(--accent); font-weight: 700; }

@media (max-width: 30rem) {
  .auth-page { padding-top: 1rem; }
  .auth-card { padding: 1.25rem 0; border: 0; background: none; }
  .auth-form__row { grid-template-columns: minmax(0, 1fr); }
}
/* ---- Full-width page tint -----------------------------------------------------------
 * The layout puts every template inside <main class="container">, so these
 * pages' tint stopped at the content column. A spread shadow in the same colour,
 * clipped to the page's own height, carries it edge to edge without widening the
 * page (no horizontal scroll). */
.account-page,
.wallet-page,
.auth-page {
  box-shadow: 0 0 0 100vmax var(--surface-2, transparent);
  clip-path: inset(0 -100vmax);
}

/* ---- Account: the saved-addresses page (templates/customers/addresses) ---------------
 * The profile page's shell; the addresses as cards (icon, name + default badge,
 * the lines, then Edit / Make default / Remove), and the add / edit sheet. */
.account-main__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }

.account-main__head .account-page__title { margin: 0; }

button.address-card__add { background: var(--surface); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; }

.address-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }

.address-item { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; }

.address-item.is-default { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }

.address-item__top { display: flex; gap: 0.9rem; align-items: flex-start; }

.address-item__text { display: grid; gap: 0.2rem; min-width: 0; }

.address-item__text strong { font-size: 1rem; font-weight: 600; }

.address-item__text strong em { margin-inline-start: 0.35rem; padding: 0.05rem 0.45rem; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); font-size: 0.7rem; font-style: normal; font-weight: 700; vertical-align: middle; }

.address-item__text span { font-size: 0.88rem; color: var(--muted); overflow-wrap: anywhere; }

.address-item__note { font-style: italic; }

.address-item__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--line); }

.address-item__actions form { margin: 0; }

.address-item__btn { min-height: 2.25rem; padding: 0.35rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; }

.address-item__btn:hover { border-color: var(--accent); color: var(--accent); }

.address-item__btn--danger { border-color: transparent; color: var(--danger); }

.address-item__btn--danger:hover { border-color: var(--danger); color: var(--danger); }

.address-empty { display: grid; justify-items: center; gap: 0.75rem; padding: 2.5rem 1.5rem; text-align: center; }

.address-empty p { margin: 0; color: var(--muted); }

.address-empty__add { width: auto; padding-inline: 1.75rem; }

.address-form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.address-form__check { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; cursor: pointer; }

.address-form__check input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }

.address-form__map .location-picker { margin-bottom: 0 !important; }

.address-form__map .location-picker > span { font-size: 0.85rem !important; font-weight: 700; color: var(--ink) !important; }

.address-form__map [id^="lp-map-"] { border-color: var(--line) !important; border-radius: 12px !important; }

.address-form__map [id^="lp-locate-"] { border-color: var(--line) !important; border-radius: var(--radius-pill) !important; background: var(--surface) !important; color: var(--ink); }

@media (max-width: 63.99rem) {
  .account-main__head .account-page__title { display: none; }
  .account-main__head { justify-content: flex-end; }
  .address-item { background: var(--surface); }
}
/* ---- The order (cart) page in the checkout's style (sections/main-cart) -------------
 * Mirrors themes/_checkout's look with Bistro's tokens: an italic centred
 * title with an accent word and a divider, white content cards with a round
 * icon badge, pill toggles, and a sticky summary card with an accent stripe. */
.cart-page { background: color-mix(in srgb, var(--accent) 3%, var(--surface-2, var(--surface))); box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--accent) 3%, var(--surface-2, var(--surface))); clip-path: inset(0 -100vmax); }

.order-head__sub { margin: 0.9rem 0 0; font-size: 0.9rem; color: var(--muted); }

:is(.cart-page, .thanks-page) .order-card { padding: 1.5rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }

:is(.cart-page, .thanks-page) .order-card__title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--ink); }

.order-toggle { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.6rem; margin: 0; }

.order-toggle__opt {
  display: flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 3rem; padding: 0.6rem 1rem;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.order-toggle__opt:hover { border-color: var(--accent); }

.order-toggle__opt.is-active,
.order-toggle__opt:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent); }

.order-toggle__opt:disabled { cursor: default; }

.order-toggle__opt input { position: absolute; opacity: 0; pointer-events: none; }

.order-toggle__opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.order-summary {
  position: sticky; top: calc(var(--stuck-top, 0px) + 1.5rem);
  padding: 1.75rem;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface);
}

.order-pay__label { margin: 0 0 0.6rem; font-size: 0.85rem; font-weight: 700; color: var(--ink); }

.order-toggle--pay { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.order-toggle--pay .order-toggle__opt { position: relative; min-height: 2.75rem; font-size: 0.88rem; }

.order-summary__submit {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; min-height: 52px; margin-top: 1.25rem; padding: 0.9rem;
  border: 0; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--accent-contrast, #fff);
  font: inherit; font-weight: 800; cursor: pointer;
}

@media (max-width: 63.99rem) {
  .order-summary { position: static; }
}
@media (max-width: 40rem) {
  :is(.cart-page, .thanks-page) .order-card, .order-summary { padding: 1.25rem; }
}
/* ---- Order received (sections/main-thank-you) — the cart / checkout style -----------
 * Reuses the order page's pieces (.order-head__*, .order-card*, .order-summary__*)
 * in one centred column, with a success head, a status pill and pill actions. */
.thanks-page { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2.5rem, 5vw, 4rem); background: color-mix(in srgb, var(--accent) 3%, var(--surface-2, var(--surface))); box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--accent) 3%, var(--surface-2, var(--surface))); clip-path: inset(0 -100vmax); }

@keyframes thanks-pop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }

.thanks-status { margin-inline-start: auto; padding: 0.2rem 0.75rem; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); font-size: 0.78rem; font-weight: 700; text-transform: capitalize; white-space: nowrap; }

.thanks-pay { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }

.thanks-actions__track { max-width: 22rem; margin-top: 0; text-decoration: none; }

.thanks-actions__track:hover { color: var(--accent-contrast, #fff); }

@keyframes track-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent); }
  70% { box-shadow: 0 0 0 16px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* The order-page cards are not the menu's order panel. That panel shares the
 * .order-card name and is made sticky on wide screens (Menu layout + order
 * panel, above), which pinned every card on the cart, thank-you and tracking
 * pages so each slid over the one before it. */
:is(.cart-page, .thanks-page) .order-card { position: static; top: auto; box-shadow: none; }

/* ---- Working… — a service or branch choice on its way (theme.js) -----------------
 * The chosen control shows a spinner; the rest of its form is held still and
 * faded so a second tap cannot post another choice. On a branch / area row the
 * spinner takes the place of the Open badge and the chevron. */
.busy-spin {
  display: inline-block;
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: busy-spin 0.7s linear infinite;
  vertical-align: -0.2em;
}

@keyframes busy-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .busy-spin { animation-duration: 1.6s; }
}
form.is-submitting button:not(.is-loading):not(.delivery-modal__close),
form.is-submitting .area:not(.is-loading) { opacity: 0.5; pointer-events: none; }

form.is-submitting .is-loading { pointer-events: none; }

.btn.is-loading .busy-spin,
.order-toggle__opt.is-loading .busy-spin { margin-inline-start: 0.5rem; }

.area.is-loading { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }

.area.is-loading .area__state,
.area.is-loading > svg:last-of-type { display: none; }

.area.is-loading .busy-spin { margin-inline-start: auto; color: var(--accent); }

/* ---- Listing pages (collection, category, brand, search, shop) ------------------
 * sections/main-collection & co.: the filter panel (snippets/product-filters)
 * beside the results on a wide screen and sticky under the header; on a tablet
 * or phone it sits above them. The sort pills (snippets/product-sort) wrap on a
 * wide screen and scroll sideways on a phone. The grid takes the editor's
 * column count (`--cols`) on a desktop, three on a tablet, two on a phone. */
.listing-page { padding: clamp(1.25rem, 3vw, 2.5rem) 0 clamp(2rem, 5vw, 3.5rem); }

/* Three children — the filters (aside), the page head, the results (main) —
 * placed by area: filters in their own column beside head and results on a
 * wide screen; head, filters, results top to bottom on a narrow one. */
.listing {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  grid-template-areas: "aside head" "aside main";
  grid-template-rows: auto 1fr;
  column-gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
}

.listing--no-filters { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "main"; }

.listing--no-filters .listing__aside { display: none; }

.listing__title { margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }

.listing__desc { margin: 0.6rem 0 0; max-width: 42rem; color: var(--ink-soft, var(--muted)); }

.listing__grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: clamp(0.75rem, 2vw, 1.5rem); }

@media (max-width: 63.99rem) {
  .listing,
    .listing--no-filters { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "aside" "main"; grid-template-rows: auto; row-gap: 1rem; }
  .listing--no-filters { grid-template-areas: "head" "main"; }
}
/* Shop: the category rail sits flush above the listing, which pads its own top. */
.shop-rail { margin-bottom: 0; }

/* Brand head: the logo beside the name. */
.listing__head--brand { display: flex; align-items: center; gap: 1rem; }

.listing__logo { flex: none; width: 4.5rem; height: 4.5rem; object-fit: cover; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }

.listing__eyebrow { margin: 0 0 0.2rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* Search head: the field and its button, then the result line. */
.listing__search { display: flex; gap: 0.6rem; max-width: 34rem; }

.listing__search .input { flex: 1; min-width: 0; min-height: 3rem; border-radius: var(--radius-pill); padding-inline: 1.1rem; }

.listing__search .btn { flex: none; min-height: 3rem; border-radius: var(--radius-pill); }

.listing__title--search { margin-top: 1.25rem; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); }

.listing__empty--box { padding: 2rem 1.25rem; border: 1px dashed var(--line-2, var(--line)); border-radius: 16px; background: var(--surface); text-align: center; }

.listing__empty--box a { color: var(--accent); font-weight: 600; }

/* Shop side cards: departments → categories, brands. */
.listing-card { padding: 0.75rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }

.listing-card__title { display: block; padding: 0.25rem 0.5rem 0.5rem; font-family: var(--font-display); font-size: 0.95rem; }

.listing-card__list { display: grid; gap: 0.15rem; margin: 0; padding: 0; list-style: none; }

.listing-card__list--sub { margin: 0.2rem 0 0.35rem; padding-inline-start: 0.75rem; }

.listing-card__link { display: block; padding: 0.45rem 0.65rem; border-radius: 10px; color: var(--ink); font-size: 0.9rem; text-decoration: none; }

.listing-card__link:hover { background: color-mix(in srgb, var(--ink) 5%, var(--surface)); color: var(--ink); }

.listing-card__link.is-active { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); font-weight: 700; }

.listing-card__none { padding: 0.45rem 0.65rem; font-size: 0.88rem; color: var(--muted); }

.listing-card__dept summary { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.45rem 0.65rem; border-radius: 10px; font-size: 0.9rem; font-weight: 700; cursor: pointer; list-style: none; }

.listing-card__dept summary::-webkit-details-marker { display: none; }

.listing-card__dept summary em { font-style: normal; font-size: 0.78rem; font-weight: 600; color: var(--muted); }

@media (max-width: 40rem) {
  .listing__search .btn { padding-inline: 1rem; }
}
/* ---- No photo: a plain placeholder, never a stock picture ----------------------
 * A dish, a cart line, a product or a category without its own image shows this
 * — the slot's shape in a soft ground with a small picture icon — so the grid
 * keeps its rhythm without implying the dish looks like someone else's photo. */
.media-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, var(--surface-3, #eee), var(--line-2, #ddd));
  color: var(--muted);
}

.media-ph svg { opacity: 0.55; }

.dish__img.media-ph { position: absolute; inset: 0; }

.pdp__media > .media-ph { position: absolute; inset: 0; }

/* The plate, fork and knife (snippets/dish-placeholder), sized to the slot. */
.media-ph .dish-ph { width: min(46%, 6.5rem); height: auto; opacity: 0.45; }

.cart-line__media .media-ph .dish-ph, .cfg__thumb .media-ph .dish-ph { width: 70%; }

/* ---- Arabic faces for right-to-left pages -----------------------------------------
 * Loaded by layout/theme.liquid only on an RTL page. Cairo for headings and
 * Tajawal for body text; Poppins/Inter stay as fallbacks for any Latin run
 * (prices, product names typed in English). */
:root[dir="rtl"] {
  --font-display: "Cairo", "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Tajawal", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Arabic sets taller than Latin at the same size; a touch more line height
 * keeps the dots and marks from crowding the line above. */
:root[dir="rtl"] body { line-height: 1.7; }

/* Delivery area rows: the chevron points the way the row leads, left in RTL.
 * Scoped to this row on purpose — other arrows in the theme carry their own
 * RTL flips, and a blanket rule would turn those back round. */
[dir="rtl"] .area > svg:last-child { transform: scaleX(-1); }

/* ---- Searchable dropdown (theme.js, "Searchable dropdown") ------------------------
 * The country-code and country selects drawn as the theme's own control: a
 * field-shaped button, and a panel with a search field over the options. The
 * real <select> stays in the form, visually hidden. On a phone the panel is a
 * sheet from the bottom over a dimmed page. */
.sselect__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip-path: inset(50%) !important;
}

.sselect { position: relative; flex: 1 1 auto; min-width: 0; }

.sselect--dial { flex: 0 1 auto; width: 9.5rem; max-width: 45%; }

.sselect__btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 3rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
  text-align: start;
  cursor: pointer;
}

.sselect__btn:focus-visible,
.sselect.is-open .sselect__btn { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 1px; border-color: var(--accent); }

.sselect__value { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.sselect--dial .sselect__value .sselect__name { display: none; }

.sselect--dial .sselect__value .sselect__code { font-weight: 600; }

.sselect__caret { flex: none; color: var(--muted); transition: transform 0.18s; }

.sselect.is-open .sselect__caret { transform: rotate(180deg); }

.sselect__panel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 0.35rem);
  inset-inline-start: 0;
  width: max(100%, 17rem);
  max-height: 20rem;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-lg, 0 18px 40px rgba(0, 0, 0, 0.14));
  overflow: hidden;
}

.sselect__panel[hidden] { display: none; }

.sselect__search { position: relative; flex: none; padding: 0.6rem; border-bottom: 1px solid var(--line); }

.sselect__search svg { position: absolute; top: 50%; inset-inline-start: 1.3rem; transform: translateY(-50%); color: var(--muted); pointer-events: none; }

.sselect__search input {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.4rem 0.8rem;
  padding-inline-start: 2.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-2, var(--surface));
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
}

.sselect__search input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 1px; border-color: var(--accent); }

.sselect__list { flex: 1; min-height: 0; margin: 0; padding: 0.35rem; list-style: none; overflow-y: auto; overscroll-behavior: contain; }

.sselect__opt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  font-size: 0.9rem;
  cursor: pointer;
}

.sselect__opt[hidden] { display: none; }

.sselect__opt .sselect__name { flex: 1; min-width: 0; }

.sselect__opt .sselect__code { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }

.sselect__opt.is-active { background: color-mix(in srgb, var(--ink) 6%, var(--surface)); }

.sselect__opt[aria-selected="true"] { color: var(--accent); font-weight: 700; }

.sselect__opt[aria-selected="true"] .sselect__code { color: inherit; }

.sselect__none { margin: 0; padding: 1rem; text-align: center; color: var(--muted); font-size: 0.88rem; }

.sselect__none[hidden] { display: none; }

.sselect__backdrop { position: fixed; inset: 0; z-index: 59; background: rgba(20, 20, 20, 0.35); }

.sselect__backdrop[hidden] { display: none; }

@media (max-width: 40rem) {
  .sselect__panel {
      position: fixed;
      top: auto;
      inset-inline: 0;
      bottom: 0;
      width: auto;
      max-height: 75dvh;
      border-radius: 20px 20px 0 0;
      border-bottom: 0;
    }
  .sselect__search { padding: 0.9rem; }
  .sselect__opt { padding-block: 0.75rem; }
}
/* Searchable dropdown inside checkout's fields. The dropdown sits in the
 * platform's <label class="chk-field">, whose rules restyle every span in the
 * label (uppercase, tracked, muted) and every input (its own padding) with a
 * heavier selector than the dropdown's — so the country names came out in
 * capitals and the search text ran under the icon. Reset at a weight that
 * holds whichever stylesheet loads last. */
.sselect .sselect__btn span.sselect__value,
.sselect .sselect__btn span.sselect__name,
.sselect .sselect__btn span.sselect__code,
.sselect .sselect__opt span.sselect__name,
.sselect .sselect__opt span.sselect__code {
  text-transform: none;
  letter-spacing: normal;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
}

.sselect .sselect__btn span.sselect__value,
.sselect .sselect__opt span.sselect__name { color: inherit; font-weight: inherit; }

.sselect .sselect__opt span.sselect__code { color: var(--muted); font-weight: 600; }

.sselect .sselect__opt[aria-selected="true"] span.sselect__code { color: inherit; }

.sselect .sselect__search input[type="search"] {
  width: 100%;
  min-height: 2.5rem;
  margin: 0;
  padding-block: 0.4rem;
  padding-inline: 2.3rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-2, var(--surface));
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: normal;
}

.sselect .sselect__search svg { inset-inline-start: 1.35rem; z-index: 1; }

/* The dial-code button is exactly as tall as the number field beside it: the
 * row (.auth-phone / .chk-phone) is a flex row, the dropdown stretches to it,
 * and the button fills that height instead of setting its own. */
.sselect--dial { align-self: stretch; display: flex; }

.sselect--dial .sselect__btn { height: auto; min-height: 0; align-self: stretch; padding-block: 0; }

/* Custom dropdown on every select: the button takes the height of the text
 * fields in its form (--sselect-h, measured by theme.js), a "choose…" option
 * reads as a placeholder, a disabled list looks it, and a short list has no
 * search field. */
.sselect__btn { min-height: var(--sselect-h, 3rem); }

.sselect.is-placeholder .sselect__value { color: var(--muted); }

.sselect--disabled .sselect__btn { opacity: 0.55; cursor: not-allowed; }

.sselect__search[hidden] { display: none; }

.sselect__panel:focus { outline: none; }

.sselect__opt.is-disabled { opacity: 0.45; cursor: default; }

/* ---- Full-width page grounds, without clipping ------------------------------------
 * The account, wallet, sign-in, cart, order and checkout pages ran their tint
 * edge to edge with a 100vmax box-shadow held in by `clip-path`. But clip-path
 * clips everything painted inside the element — position: fixed children
 * included — so the phone order screen's pinned foot ("Add item" / "Proceed"),
 * and the checkout's own pinned bar and pop-ups, were cut away as soon as the
 * page's bottom edge scrolled above the viewport's. A border-image outset
 * paints the same side bands and clips nothing; html's overflow-x: clip keeps
 * the page from scrolling sideways. */
.account-page,
.wallet-page,
.auth-page {
  clip-path: none;
  box-shadow: none;
  border-image: conic-gradient(var(--surface-2, transparent) 0 0) fill 0 / / 0 100vmax;
}

.cart-page,
.thanks-page {
  clip-path: none;
  box-shadow: none;
  border-image: conic-gradient(color-mix(in srgb, var(--accent) 3%, var(--surface-2, var(--surface))) 0 0) fill 0 / / 0 100vmax;
}

/* Room above the footer's brand badge. The footer sits directly under the page
 * (no margin), and its badge rises 2.75rem over the footer's edge — into the
 * last page's bottom padding. These pages ended with as little as 2rem, so the
 * badge sat on their last line ("Continue shopping"). 4rem at least leaves it
 * clear space. The cart is left alone: on a phone it hides the footer and pads
 * for its own pinned bar. */
.thanks-page,
.listing-page,
.account-page,
.wallet-page,
.auth-page {
  padding-bottom: clamp(4rem, 7vw, 5.5rem);
}


/* ==========================================================================
   Meal builder
   A dish with options opens a pop-up (snippets/dish-card → theme.js) that
   frames its own product page with ?embed=meal. Two halves of CSS:

   .meal-modal …   the pop-up on the page that opened it
   html.is-meal …  the product page when it is the thing inside the frame —
                   steps left, choices middle, the dish and the total right
   ========================================================================== */
.meal-modal {
  display: none;
  flex-direction: column;
  width: min(1180px, calc(100vw - 2rem));
  max-width: none;
  height: min(760px, calc(100dvh - 2rem));
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 28px;
  overflow: hidden;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.meal-modal[open] { display: flex; }

.meal-modal::backdrop { background: rgba(0, 0, 0, 0.55); }

html.meal-open { overflow: hidden; }

.meal-modal__head {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1rem 3.5rem;
  text-align: center;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

/* A round accent seal with the dine glyph beside the title — the same
   gesture as the footer's plaque, kept inside the rim so the rounded corners
   do not clip it. */
.meal-modal__badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast, #fff);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}

.meal-modal__title {
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.meal-modal__close {
  position: absolute;
  top: 50%;
  inset-inline-end: 1rem;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transform: translateY(-50%);
}

.meal-modal__close:hover { background: var(--surface-2); }

/* While the dish loads the pop-up is only a spinner over the dimmed page: the
   box, its header and the frame are laid out (the frame has to be, to be
   measured) but not shown, so it never appears empty or at the wrong size. */
.meal-modal.is-loading { background: transparent; box-shadow: none; overflow: visible; }

.meal-modal.is-loading > .meal-modal__head,
.meal-modal.is-loading > .meal-modal__frame { visibility: hidden; }

.meal-modal__spin {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: meal-spin 0.8s linear infinite;
}

.meal-modal.is-loading .meal-modal__spin { display: block; }

@keyframes meal-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .meal-modal__spin { animation-duration: 2.4s; }
}
.meal-modal__frame { flex: 1; width: 100%; min-height: 0; border: 0; display: block; background: #f1f3f7; }

@media (max-width: 48rem) {
  .meal-modal { width: 100vw; height: 100dvh; border-radius: 0; }
}
/* ---- Inside the frame ---------------------------------------------------- */
html.is-meal body { background: #f1f3f7; }

html.is-meal .topbar,
html.is-meal .site-header,
html.is-meal .subbar,
html.is-meal .site-footer,
html.is-meal .pdp__stage,
html.is-meal .pdp__titlerow,
html.is-meal .pdp__price,
html.is-meal .pdp__label,
html.is-meal .pdp__desc,
html.is-meal .pdp__foot,
html.is-meal .pdp__count,
html.is-meal .pdp__qty,
html.is-meal .pdp__submit-bag,
html.is-meal .cfg__caret { display: none !important; }

html.is-meal main,
html.is-meal main.container,
html.is-meal .section,
html.is-meal .container { max-width: none; margin: 0; padding: 0; }

/* Only the dish's own form belongs in the builder — not the strips of other
   dishes the page shows below it. */
html.is-meal main > *:not(:has(.pdp)) { display: none; }

/* A dish with nothing to choose has no steps and nothing for a side panel to
   summarise, so it is one centred card instead of three panes: photo, name and
   price, the description, then how many and the order bar. */
html.is-meal.meal-plain .meal-side { display: none; }

/* Not behind the wide-screen query: this card sits in a popup only ~520px
   wide, which is "narrow" to the page's own phone rules, and they would put
   their full-width bar and white card back. */
html.is-meal.meal-plain body { padding-bottom: 0; }

/* Left: the steps. */
.meal-nav {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: 230px;
  padding: 1.25rem 0;
  overflow-y: auto;
  background: var(--surface);
}

.meal-nav__link {
  padding: 0.75rem 1.1rem;
  border: 0;
  border-inline-end: 3px solid transparent;
  background: none;
  color: var(--muted);
  font: 600 0.9rem/1.25 var(--font-body, inherit);
  text-align: end;
  cursor: pointer;
}

.meal-nav__link:hover { color: var(--ink); }

.meal-nav__link.is-active { color: var(--ink); border-inline-end-color: var(--accent); }

/* Right: the dish, and the order bar over its foot. */
.meal-side {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 340px;
  padding: 1.25rem 1.25rem 0;
  text-align: center;
  border-inline-start: 1px solid var(--line);
  background: #f1f3f7;
}

/* Rounded so a photograph with a background (a burger on a table) sits as a
   soft card; a transparent cut-out has nothing at its corners to clip. */
.meal-side__img { width: 100%; max-height: 230px; object-fit: contain; border-radius: 16px; }

.meal-side__title { margin: 1rem 0 0.8rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; }

.meal-side__reset {
  padding: 0.4rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 48rem) {
  /* Narrow: the steps become a strip across the top and the dish panel steps
     aside; the page's own phone order bar does the rest. */
  .meal-side { display: none; }
  .meal-nav {
      position: sticky;
      top: 0;
      inset-inline-start: auto;
      flex-direction: row;
      width: auto;
      padding: 0 0.5rem;
      overflow-x: auto;
      overflow-y: hidden;
      border-bottom: 1px solid var(--line);
    }
  .meal-nav__link {
      flex: none;
      border-inline-end: 0;
      border-bottom: 3px solid transparent;
      white-space: nowrap;
    }
  .meal-nav__link.is-active { border-bottom-color: var(--accent); }
}
/* Phone: dial code and number as ONE field.
 *
 * They were two boxes with a gap, which reads as two questions. Now the row
 * carries the border, the radius and the focus ring, and the two controls
 * inside it are bare, parted by a hairline. Covers the register form
 * (.auth-phone) and the platform checkout (.chk-phone, which can only be
 * restyled from here). */
.auth-phone,
.checkout-page .chk-phone {
  gap: 0;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

/* The platform checkout clips its phone row (overflow: hidden) to round the
   corners; that also cuts the dial-code dropdown's panel down to one row. */
.auth-phone,
.checkout-page .chk-phone,
.checkout-page .chk-field .chk-phone { overflow: visible; }

.auth-phone:focus-within,
.checkout-page .chk-phone:focus-within {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.auth-phone .sselect--dial,
.checkout-page .chk-phone .sselect--dial { flex: none; width: auto; min-width: 5.75rem; max-width: 9rem; }

.auth-phone .auth-phone__code,
.auth-phone .sselect__btn,
.checkout-page .chk-phone .sselect__btn {
  border: 0;
  border-inline-end: 1px solid var(--line);
  border-radius: 11px 0 0 11px;
  background: transparent;
  box-shadow: none;
}

[dir="rtl"] .auth-phone .auth-phone__code,
[dir="rtl"] .auth-phone .sselect__btn,
[dir="rtl"] .checkout-page .chk-phone .sselect__btn { border-radius: 0 11px 11px 0; }

.auth-phone .auth-phone__number,
.checkout-page .chk-phone .chk-phone__number {
  border: 0;
  border-radius: 0 11px 11px 0;
  background: transparent;
  box-shadow: none;
}

/* The ring belongs to the row now, not to the control that happens to be
   focused inside it. */
.auth-phone .auth-phone__code:focus,
.auth-phone .auth-phone__number:focus,
.auth-phone .sselect__btn:focus-visible,
.auth-phone .sselect.is-open .sselect__btn,
.checkout-page .chk-phone .chk-phone__number:focus,
.checkout-page .chk-phone .sselect__btn:focus-visible,
.checkout-page .chk-phone .sselect.is-open .sselect__btn { outline: none; border-color: var(--line); box-shadow: none; }

@keyframes chk-spin { to { transform: rotate(360deg); } }


/* ==========================================================================
   Quantity offers — "buy 10 or more, pay 130 each", "order 3 or more, get 10%
   off", and the cart's progress towards them. The same data the base theme's
   offer snippets read, drawn in Bistro's own surfaces: a soft accent tint, the
   theme's radius and ink, the accent for the bar. Recolour the tint with
   --offer-bg / --offer-line on .qty-offer-card.
   ========================================================================== */
.qty-offer-card {
  --offer-bg: color-mix(in srgb, var(--accent) 8%, var(--surface));
  --offer-line: color-mix(in srgb, var(--accent) 38%, var(--line));
  padding: 0.9rem 1rem 0.95rem;
  border: 1.5px solid var(--offer-line);
  border-radius: 14px;
  background: var(--offer-bg);
  color: var(--ink);
}

.qty-offer-card__label {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill, 999px);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.qty-offer-card__title { margin: 0.55rem 0 0; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; line-height: 1.3; }

.qty-offer-card__note { margin: 0.55rem 0 0; color: var(--muted); font-size: 0.78rem; }

.qty-offer__link { display: inline-block; margin-top: 0.5rem; color: var(--accent); font-size: 0.88rem; font-weight: 700; text-decoration: none; }

.qty-offer__link::after { content: " \2192"; }

[dir="rtl"] .qty-offer__link::after { content: " \2190"; }

.qty-offer__link:hover { text-decoration: underline; }

/* The offer page's lead line. */
.qty-offer-lead {
  display: inline-block;
  margin: 0.7rem 0 0;
  padding: 0.5rem 0.9rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 600;
}

.qty-progress__more { margin-top: 0.4rem; font-size: 0.8rem; }


/* ---- Platform checkout buttons ----------------------------------------------------
 * The platform checkout (themes/_checkout, which loads its own stylesheet and not this
 * theme's checkout chunk) labels its primary buttons with --accent-ink. Here that is a
 * dark shade of the accent, made for text on tints, so "Place order", "Order summary" and the quantity badges
 * read dark on the green. Their label is the on-accent colour. */
.checkout-page.checkout-page :is(.chk-summary__submit, .chk-submit, .chk-topbar__btn, .chk-summary__item-qty) {
  color: var(--accent-contrast, #fff);
}

/* The platform checkout paints its "good" chips (Secure checkout, Open now, free
 * delivery, applied promo) in --success, a cool green that sits apart from Bistro's
 * olive. On this page they take the accent's dark shade instead. */
.checkout-page { --success: var(--accent-ink); }