/* ==========================================================================
   Grillroom Alexandria — design system
   Single stylesheet, no external requests, no build step.

   Warm daylight palette. The first build was charcoal-dark; it looked good
   but it did not look like food. Restaurants read as appetising in warm,
   bright, high-contrast light — so the page is baked cream, the type is
   near-black, and the fire only shows up where it earns attention: the
   headline accent, the buttons, the CTA panel and the footer.

   Every text-on-colour pair in here has been measured. Minimum 4.5:1 for
   body copy, 3:1 for display type. See docs/LESSONS-LEARNED.md.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Surfaces — warm, never pure white */
  --paper:   #FDFAF4;
  --paper-2: #F6F0E4;
  --paper-3: #EFE6D6;
  --char:    #1C1714;   /* warm near-black, used for footer + CTA anchors */

  /* Ink */
  --ink:      #1C1714;  /* 17.05:1 on paper */
  --ink-soft: #4A423B;  /*  9.45:1 */
  --muted:    #5F564C;  /*  6.6:1  */
  --muted-2:  #6E6459;  /*  4.67:1 even on --paper-3 */

  --line:      rgba(28, 23, 20, .14);
  --line-soft: rgba(28, 23, 20, .08);

  /* Fire */
  --ember:      #C2410C;  /* fills, borders, large display */
  --ember-2:    #EA580C;  /* gradient light end, large text only */
  --ember-deep: #9A3412;  /* any ember-coloured TEXT — 5.9:1 even on cards */
  --price:      #9A3412;
  --veg:        #166534;
  --ok:         #15803D;
  --warn:       #B45309;

  --grad-heat: linear-gradient(120deg, #9A3412 0%, #C2410C 50%, #EA580C 100%);
  --grad-btn:  linear-gradient(120deg, #9A3412 0%, #C2410C 100%); /* white ≥5.18:1 */
  --grad-cta:  linear-gradient(140deg, #7C2D12 0%, #9A3412 55%, #C2410C 100%);

  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-disp: "Helvetica Neue", "Arial Black", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --gutter:    clamp(1.15rem, 5vw, 3.5rem);
  --max:       1180px;
  --max-prose: 66ch;

  --shadow-1: 0 1px 2px rgba(28,23,20,.06), 0 6px 18px rgba(28,23,20,.07);
  --shadow-2: 0 2px 6px rgba(28,23,20,.08), 0 20px 48px rgba(28,23,20,.12);
  --shadow-btn: 0 4px 14px rgba(154,52,18,.28);

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.08; text-wrap: balance; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
:focus-visible { outline: 3px solid var(--ember); outline-offset: 3px; border-radius: 4px; }

/* ---------- Type ---------- */
.display {
  font-family: var(--font-disp);
  font-weight: 900;
  letter-spacing: -.035em;
  text-transform: uppercase;
  line-height: .92;
}
/* Capped at 5.25rem: the hero headline sits in a two-column grid, and anything
   larger broke "onze eigen spies" across three lines on a 1280px screen. */
.h-xxl { font-size: clamp(2.6rem, 6.4vw, 5.25rem); }
.h-xl  { font-size: clamp(2.1rem, 5.8vw, 3.8rem); }
.h-lg  { font-size: clamp(1.6rem, 3.8vw, 2.5rem); }
.h-md  { font-size: clamp(1.15rem, 2.2vw, 1.45rem); letter-spacing: -.02em; }

.eyebrow {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ember-deep);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--ember); flex: none; }
.lede { font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: var(--ink-soft); max-width: var(--max-prose); }
.fine { font-size: .85rem; color: var(--muted-2); line-height: 1.5; }
.heat-text {
  background: var(--grad-heat);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(3rem, 7.5vw, 6rem); position: relative; }
.section--tight { padding-block: clamp(2rem, 4.5vw, 3.25rem); }
.section--alt { background: var(--paper-2); }
.section--dark { background: var(--char); color: var(--paper); }
.section--dark .lede { color: #C9C0B5; }
.section--dark .eyebrow { color: #FDBA74; }
.section--dark .eyebrow::before { background: #FDBA74; }
.section--dark .fine { color: #A79C8E; }
.rule { height: 1px; background: var(--line-soft); border: 0; margin: 0; }
.grid { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr)); }
.g-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 185px), 1fr)); }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.center .lede { margin-inline: auto; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--ember); color: #fff; padding: .8rem 1.2rem; font-weight: 700; }
.skip:focus { left: 8px; top: 8px; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--grad-btn);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .9rem 1.55rem;
  border-radius: 100px;
  border: 0;
  background: var(--btn-bg);
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  box-shadow: var(--shadow-btn);
  text-align: center;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(154,52,18,.36); }
.btn:active { transform: translateY(0); }
.btn--ghost {
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--line); box-shadow: none;
}
.btn--ghost:hover { background: rgba(28,23,20,.05); border-color: rgba(28,23,20,.3); box-shadow: none; }
.btn--sm { padding: .55rem 1.05rem; font-size: .85rem; }
.btn--lg { padding: 1.1rem 2rem; font-size: 1.02rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; }
.center .btn-row { justify-content: center; }

.section--dark .btn--ghost { color: var(--paper); border-color: rgba(253,250,244,.32); }
.section--dark .btn--ghost:hover { background: rgba(253,250,244,.1); border-color: rgba(253,250,244,.55); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(253,250,244,.88);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header__inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: 68px;
  padding-inline: var(--gutter);
  max-width: var(--max); margin-inline: auto;
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
.brand__mark { width: 36px; height: 36px; flex: none; }
.brand__name {
  font-family: var(--font-disp); font-weight: 900; text-transform: uppercase;
  letter-spacing: -.02em; font-size: 1.02rem; line-height: 1; color: var(--ink);
}
.brand__sub {
  display: block; font-family: var(--font-body); font-weight: 700;
  font-size: .58rem; letter-spacing: .19em; color: var(--ember-deep); margin-top: 3px;
}
.nav { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.nav a {
  text-decoration: none; padding: .5rem .75rem; border-radius: 100px;
  font-size: .9rem; font-weight: 600; color: var(--muted);
  transition: color .2s, background .2s;
}
.nav a:hover { color: var(--ink); background: rgba(28,23,20,.06); }
.nav a[aria-current="page"] { color: var(--ink); background: rgba(28,23,20,.08); }

/* `.nav a` (0,1,1) outranks `.btn` (0,1,0) — re-assert the button's own colours. */
.nav a.btn, .nav a.btn:hover { color: #fff; background: var(--btn-bg); }
.nav a.btn--ghost, .nav a.btn--ghost:hover { color: var(--ink); background: transparent; }

.header-cta { margin-left: .45rem; }
.nav-toggle {
  margin-left: auto; display: none;
  background: transparent; border: 1.5px solid var(--line);
  border-radius: 10px; width: 42px; height: 42px; cursor: pointer;
  align-items: center; justify-content: center; color: var(--ink);
}
.nav-toggle svg { width: 20px; height: 20px; }

@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: .5rem var(--gutter) 1.25rem;
    margin-left: 0; display: none;
    box-shadow: var(--shadow-1);
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding: .85rem .4rem; border-bottom: 1px solid var(--line-soft); border-radius: 0; font-size: 1rem; }
  .header-cta { margin: .9rem 0 0; }
}

/* ---------- Open / closed pill ---------- */
.status {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 700;
  padding: .38rem .85rem .38rem .65rem;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: rgba(28,23,20,.03);
  color: var(--muted);
  white-space: nowrap;
}
.status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); flex: none; }
.status[data-state="open"] { color: var(--ok); border-color: rgba(21,128,61,.35); background: rgba(21,128,61,.08); }
.status[data-state="open"] .status__dot { background: var(--ok); animation: pulse 2.4s infinite; }
.status[data-state="soon"] { color: var(--warn); border-color: rgba(180,83,9,.35); background: rgba(180,83,9,.08); }
.status[data-state="soon"] .status__dot { background: var(--warn); }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(21,128,61,.5); }
  70%  { box-shadow: 0 0 0 8px rgba(21,128,61,0); }
  100% { box-shadow: 0 0 0 0 rgba(21,128,61,0); }
}
.section--dark .status, .site-footer .status {
  border-color: rgba(253,250,244,.22); background: rgba(253,250,244,.06); color: #C9C0B5;
}
.section--dark .status[data-state="open"], .site-footer .status[data-state="open"] {
  color: #86EFAC; border-color: rgba(134,239,172,.4); background: rgba(134,239,172,.1);
}
.section--dark .status[data-state="open"] .status__dot,
.site-footer .status[data-state="open"] .status__dot { background: #86EFAC; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: grid; align-items: center;
  padding-block: clamp(2.75rem, 7vw, 5rem);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(900px 520px at 88% 6%,  rgba(234,88,12,.16), transparent 62%),
    radial-gradient(680px 460px at 4% 92%,  rgba(154,52,18,.10), transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  border-bottom: 1px solid var(--line-soft);
}
.hero__inner { position: relative; z-index: 1; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); width: 100%; }
.hero__grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1.15fr .85fr; align-items: center; }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }
.hero h1 { margin-bottom: 1rem; color: var(--ink); }
.hero__claim { font-size: clamp(1.05rem, 1.9vw, 1.25rem); color: var(--ink-soft); max-width: 40ch; margin-bottom: 1.6rem; }
.hero__art {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  background: linear-gradient(150deg, #FFF3E2 0%, #FFE2C4 100%);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-2);
  display: grid; place-items: center; padding: clamp(.5rem, 1.5vw, 1rem);
}
.hero__art img, .spotlight__art img { width: 100%; height: auto; }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.1rem;
  margin-top: 1.6rem; font-size: .85rem; color: var(--muted);
}
.hero__meta span { display: inline-flex; align-items: center; gap: .4rem; }
.hero__meta svg { width: 15px; height: 15px; color: var(--ember); flex: none; }

/* ---------- Cards ---------- */
.card {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: clamp(1.3rem, 2.8vw, 1.9rem);
  box-shadow: var(--shadow-1);
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
  position: relative;
}
.section--alt .card { background: #fff; }
.card--link:hover { border-color: rgba(194,65,12,.4); transform: translateY(-3px); box-shadow: var(--shadow-2); }
.card__icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: #FFEDD5; display: grid; place-items: center;
  margin-bottom: 1rem; color: var(--ember-deep);
}
.card__icon svg { width: 22px; height: 22px; }
.card h3 { font-size: 1.08rem; letter-spacing: -.01em; color: var(--ink); }
.card p { color: var(--muted); font-size: .95rem; margin: 0; }
.card a.stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.section--dark .card {
  background: rgba(253,250,244,.06); border-color: rgba(253,250,244,.14); box-shadow: none;
}
.section--dark .card h3 { color: var(--paper); }
.section--dark .card p, .section--dark .card li { color: #C9C0B5; }
.section--dark .card__icon { background: rgba(253,186,116,.16); color: #FDBA74; }

/* Fact tiles — the compact replacement for a wall of text */
.facts { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.fact {
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-md);
  padding: 1.05rem 1.15rem; box-shadow: var(--shadow-1);
}
.fact dt {
  font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: .35rem;
}
.fact dd { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--ink); line-height: 1.35; }
.fact dd small { display: block; font-size: .82rem; font-weight: 500; color: var(--muted); margin-top: .2rem; }

.stat { text-align: center; padding: 1.1rem .5rem; }
.stat__n {
  font-family: var(--font-disp); font-weight: 900; letter-spacing: -.04em;
  font-size: clamp(2rem, 5vw, 3rem); line-height: 1; color: var(--ember-deep);
}
.stat__l { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); margin-top: .55rem; }

/* ---------- Menu ---------- */
.menu-nav {
  position: sticky; top: 68px; z-index: 40;
  background: rgba(253,250,244,.93);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
  padding-block: .7rem;
}
.menu-nav__scroll {
  display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none;
  max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
}
.menu-nav__scroll::-webkit-scrollbar { display: none; }
.chip {
  flex: none; text-decoration: none; white-space: nowrap;
  padding: .45rem .9rem; border-radius: 100px;
  border: 1px solid var(--line); background: #fff;
  font-size: .84rem; font-weight: 700; color: var(--muted);
  transition: all .2s; cursor: pointer;
}
.chip:hover, .chip[aria-pressed="true"] { color: #fff; background: var(--ember-deep); border-color: var(--ember-deep); }

.menu-section { scroll-margin-top: 130px; }
.menu-section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-bottom: .8rem; margin-bottom: 1.3rem;
  border-bottom: 2px solid var(--ink);
}
.menu-section__head h2 { margin: 0; }
.menu-section__note { font-size: .85rem; color: var(--muted); }

.dish {
  display: grid; grid-template-columns: 1fr auto;
  gap: .3rem 1.25rem; align-items: baseline;
  padding: .85rem 0;
  border-bottom: 1px dashed var(--line);
}
.dish:last-child { border-bottom: 0; }
.dish__name { font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; margin: 0; color: var(--ink); }
.dish__desc { grid-column: 1 / -1; font-size: .89rem; color: var(--muted); margin: 0; max-width: 60ch; }
.dish__price {
  font-family: var(--font-mono); font-weight: 700; font-size: 1rem;
  color: var(--price); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.dish__price small { font-size: .74rem; color: var(--muted-2); display: block; text-align: right; font-family: var(--font-body); font-weight: 600; }
.dish[data-veg="1"] .dish__name::after {
  content: attr(data-veg-label); margin-left: .5rem; vertical-align: middle;
  font-size: .58rem; font-weight: 800; letter-spacing: .1em;
  color: var(--veg); border: 1px solid rgba(22,101,52,.4); background: rgba(22,101,52,.07);
  border-radius: 100px; padding: .15rem .45rem; white-space: nowrap;
}
.dish[data-star="1"] .dish__name::before { content: "★"; color: var(--ember); margin-right: .4rem; }

/* ---------- Spotlight ---------- */
.spotlight {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: center;
}
.spotlight__art {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-xl);
  background: linear-gradient(150deg, #FFF3E2 0%, #FFDFBC 100%);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-2);
  overflow: hidden; display: grid; place-items: center; padding: 1.5rem;
}

/* ---------- Kapsalon builder ---------- */
.builder {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.builder__grid { display: grid; grid-template-columns: 1.35fr .85fr; }
@media (max-width: 900px) { .builder__grid { grid-template-columns: 1fr; } }
.builder__body { padding: clamp(1.3rem, 3.2vw, 2.2rem); }
.builder__side {
  padding: clamp(1.3rem, 3.2vw, 2.2rem);
  background: linear-gradient(165deg, #FFF3E2, #FFE7CE);
  border-left: 1px solid var(--line-soft);
  display: flex; flex-direction: column;
}
@media (max-width: 900px) { .builder__side { border-left: 0; border-top: 1px solid var(--line-soft); } }

.step { margin-bottom: 1.7rem; }
.step:last-of-type { margin-bottom: 0; }
.step__label {
  display: flex; align-items: center; gap: .6rem;
  font-size: .74rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .8rem;
}
.step__n {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--grad-btn); color: #fff;
  display: grid; place-items: center; font-size: .7rem; letter-spacing: 0;
}
.opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt span {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem .95rem; border-radius: 100px;
  border: 1.5px solid var(--line); background: #fff;
  font-size: .88rem; font-weight: 600; cursor: pointer;
  transition: all .2s var(--ease);
}
.opt span:hover { border-color: rgba(28,23,20,.35); }
.opt input:checked + span {
  background: var(--grad-btn); border-color: transparent; color: #fff; font-weight: 700;
  box-shadow: var(--shadow-btn);
}
.opt input:focus-visible + span { outline: 3px solid var(--ember); outline-offset: 3px; }
.opt em { font-style: normal; opacity: .75; font-size: .78rem; font-family: var(--font-mono); }

.receipt { flex: 1; display: flex; flex-direction: column; }
.receipt h3 { font-size: .74rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); font-weight: 800; }
.receipt__lines { list-style: none; margin: 0 0 1rem; padding: 0; flex: 1; min-height: 120px; }
.receipt__lines li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .42rem 0; font-size: .9rem; border-bottom: 1px dashed rgba(28,23,20,.16);
}
.receipt__lines b { font-weight: 600; }
.receipt__lines span { font-family: var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.receipt__total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 1rem; border-top: 2px solid var(--ink); margin-bottom: 1rem;
}
.receipt__total b { font-size: .8rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.receipt__total output {
  font-family: var(--font-disp); font-weight: 900; font-size: 2.3rem;
  letter-spacing: -.04em; color: var(--ember-deep); font-variant-numeric: tabular-nums;
}
.receipt__hint { font-size: .8rem; color: var(--ink-soft); margin-top: .75rem; }

/* ---------- Postcode checker ---------- */
.pc-form { display: flex; flex-wrap: wrap; gap: .6rem; max-width: 460px; }
.pc-form input {
  flex: 1 1 180px; min-width: 0;
  padding: .9rem 1.1rem; border-radius: 100px;
  background: #fff; border: 1.5px solid var(--line);
  color: var(--ink); font-size: 1rem; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: .06em;
}
.pc-form input::placeholder { color: var(--muted-2); letter-spacing: normal; font-family: var(--font-body); text-transform: none; }
.pc-result {
  margin-top: 1rem; padding: 1rem 1.15rem; border-radius: var(--r-md);
  font-size: .93rem; display: none; border: 1px solid var(--line); background: #fff;
}
.pc-result[data-state] { display: block; }
.pc-result[data-state="yes"] { background: rgba(21,128,61,.08); border-color: rgba(21,128,61,.35); }
.pc-result[data-state="no"]  { background: rgba(180,83,9,.08);  border-color: rgba(180,83,9,.35); }
.pc-result strong { display: block; margin-bottom: .2rem; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.25rem 3rem 1.25rem 0;
  font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; color: var(--ink);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  font-size: 1.6rem; font-weight: 400; color: var(--ember); line-height: 1;
  transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq summary:hover { color: var(--ember-deep); }
.faq__a { padding: 0 2.5rem 1.4rem 0; color: var(--muted); max-width: var(--max-prose); }
.faq__a p { font-size: .97rem; }
.faq__a a { color: var(--ember-deep); }

/* ---------- Quotes ---------- */
.quote { border-left: 3px solid var(--ember); padding: .25rem 0 .25rem 1.3rem; margin: 0; }
.quote p { font-size: 1.04rem; letter-spacing: -.01em; color: var(--ink); }
.quote footer { font-size: .82rem; color: var(--muted-2); }
.stars { color: var(--ember); letter-spacing: .1em; font-size: .9rem; }

/* ---------- Tables ---------- */
.info-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.info-table th, .info-table td { padding: .75rem 0; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.info-table th { font-weight: 700; color: var(--ink); width: 42%; }
.info-table td { color: var(--muted); font-variant-numeric: tabular-nums; }
.info-table tr[data-today="1"] th, .info-table tr[data-today="1"] td { color: var(--ember-deep); }
/* Label text comes from JS so it follows the page language — it used to be a
   hardcoded Dutch string in CSS, which leaked "vandaag" onto the English pages. */
.info-table tr[data-today="1"] th::after {
  content: attr(data-today-label); font-weight: 600; font-size: .78rem; color: var(--ember);
}

/* ---------- CTA ---------- */
.cta-strip {
  background: var(--grad-cta);
  color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(2rem, 4.5vw, 3rem);
  text-align: center;
  position: relative; overflow: hidden;
}
.cta-strip::before {
  content: ""; position: absolute; inset: -50% -10% auto auto; width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 60%);
}
.cta-strip > * { position: relative; }
.cta-strip h2 { color: #fff; }
.cta-strip p, .cta-strip .lede { color: rgba(255,255,255,.92); max-width: 50ch; margin-inline: auto; }
.cta-strip .btn { background: #fff; color: var(--ember-deep); box-shadow: 0 6px 20px rgba(0,0,0,.22); }
.cta-strip .btn:hover { box-shadow: 0 12px 28px rgba(0,0,0,.3); }
.cta-strip .btn--ghost { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); color: #fff; }
.cta-strip .btn--ghost:hover { background: rgba(255,255,255,.24); border-color: #fff; }

.notice {
  display: flex; gap: .8rem; align-items: flex-start;
  background: #FFF4E6;
  border: 1px solid rgba(194,65,12,.28);
  border-radius: var(--r-md);
  padding: 1rem 1.15rem; font-size: .92rem; color: var(--ink-soft);
}
.notice svg { width: 20px; height: 20px; flex: none; color: var(--ember-deep); margin-top: 2px; }
.notice a { color: var(--ember-deep); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--char);
  color: #C9C0B5;
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 2rem;
  font-size: .92rem;
}
.site-footer .brand__name { color: var(--paper); }
.site-footer .brand__sub { color: #FDBA74; }
.site-footer .fine { color: #A79C8E; }
.site-footer h4 {
  font-size: .72rem; letter-spacing: .15em; text-transform: uppercase;
  color: #A79C8E; font-weight: 800; margin-bottom: .9rem;
}
.site-footer a { color: #C9C0B5; text-decoration: none; }
.site-footer a:hover { color: #FDBA74; text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { padding: .26rem 0; }
.footer-bottom {
  margin-top: 2.25rem; padding-top: 1.4rem; border-top: 1px solid rgba(253,250,244,.14);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  color: #8E8377; font-size: .82rem;
}
.footer-bottom a { color: #A79C8E; }

/* ---------- Mobile order bar ---------- */
.order-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: none; gap: .6rem;
  padding: .7rem clamp(1rem,4vw,1.5rem) calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(253,250,244,.96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(28,23,20,.10);
}
.order-bar .btn { flex: 1; padding-block: .85rem; }
.order-bar .btn--ghost { flex: 0 0 54px; padding-inline: 0; }
@media (max-width: 760px) {
  .order-bar { display: flex; }
  body { padding-bottom: 78px; }
}

/* ---------- Breadcrumbs ---------- */
.crumbs { font-size: .8rem; color: var(--muted-2); padding-block: 1rem 0; }
.hero .crumbs { padding-top: 0; margin-bottom: 1.5rem; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ember-deep); }
.crumbs span { margin-inline: .45rem; opacity: .5; }

/* ---------- Prose ---------- */
.prose { max-width: var(--max-prose); }
.prose h2 { margin-top: 2.2rem; }
.prose h3 { margin-top: 1.6rem; font-size: 1.12rem; }
.prose p, .prose li { color: var(--ink-soft); }
.prose strong { color: var(--ink); }
.prose a { color: var(--ember-deep); }

/* ---------- Utility ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 2rem; }
.tag {
  display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; padding: .26rem .58rem; border-radius: 100px;
  border: 1px solid var(--line); color: var(--muted);
}
.tag--hot { color: var(--ember-deep); border-color: rgba(194,65,12,.4); background: rgba(194,65,12,.08); }
.tag--veg { color: var(--veg); border-color: rgba(22,101,52,.4); background: rgba(22,101,52,.07); }

/* Reveal on scroll — scoped to `.js`, set by an inline script in <head>, so a
   missing site.js can never leave the page blank. */
.js [data-reveal] {
  opacity: 0; transform: translateY(16px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; } }

/* ==========================================================================
   ORDER PAGE
   Layout notes, because they are conversion decisions and not taste:
   • One column of decisions on the left, a permanently visible running total
     on the right. Hidden totals are the single biggest abandonment cause.
   • Steppers, not number inputs — nobody types "2" on a phone willingly.
   • Tap targets are 44px minimum throughout.
   ========================================================================== */
.olayout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, .9fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}
@media (max-width: 960px) { .olayout { grid-template-columns: 1fr; } }

/* ==========================================================================
   STEPPED ORDER FLOW
   The order is four steps, not one long page. Research reasoning lives in
   docs/ORDER-CONVERSION.md; the constraints this stylesheet has to honour:
   • The indicator is a 1:1 map of the real steps. Never group or hide one —
     users read it as "how much is left" and grouping disorients them.
   • Past steps are reachable, future steps are not. That is expressed with
     a real disabled button, not just a colour.
   • Nothing here may hide content when JavaScript is absent: steps are hidden
     with the `hidden` attribute, which only order.js ever sets.
   ========================================================================== */
.osteps {
  list-style: none; margin: 0 0 1.75rem; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem;
  counter-reset: ostep;
}
.osteps li { min-width: 0; }
.osteps button {
  width: 100%; display: flex; align-items: center; gap: .5rem;
  padding: .5rem .3rem .7rem; background: none; border: 0; cursor: pointer;
  border-top: 3px solid var(--line); text-align: left;
  font-family: inherit; font-size: .82rem; font-weight: 700; color: var(--muted-2);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.osteps button[disabled] { cursor: default; }
.osteps__n {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-size: .74rem; font-weight: 800; font-variant-numeric: tabular-nums;
  border: 1.5px solid var(--line); background: #fff; color: var(--muted-2);
  transition: all .2s var(--ease);
}
.osteps__n svg { width: 13px; height: 13px; }
.osteps__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Done — reachable, and it says so. */
.osteps li[data-state="done"] button { border-top-color: var(--ember); color: var(--ember-deep); }
.osteps li[data-state="done"] .osteps__n { background: var(--grad-btn); border-color: transparent; color: #fff; }
.osteps li[data-state="done"] button:hover .osteps__n { transform: scale(1.08); }

/* Current */
.osteps li[data-state="current"] button { border-top-color: var(--ember); color: var(--ink); }
.osteps li[data-state="current"] .osteps__n {
  background: var(--grad-btn); border-color: transparent; color: #fff;
  box-shadow: 0 0 0 4px rgba(194, 65, 12, .18);
}

.osteps button:focus-visible { outline: 3px solid var(--ember); outline-offset: 3px; border-radius: var(--r-sm); }

/* Below 640px four labels do not fit. They are replaced by one line of text
   written by order.js ("Stap 2 van 4 · Gerechten") — never by CSS content:,
   which cannot be translated. */
.ostepnow { display: none; }
@media (max-width: 640px) {
  .osteps__label { display: none; }
  .osteps button { justify-content: center; padding-inline: 0; }
  .ostepnow {
    display: block; margin: -.9rem 0 1.4rem;
    font-size: .8rem; font-weight: 800; letter-spacing: .04em;
    text-transform: uppercase; color: var(--muted);
  }
  .ostepnow b { color: var(--ember-deep); }
}

/* ---- the step panels ---- */
.ostep { border: 0; padding: 0; margin: 0 0 1.5rem; min-width: 0; }
.ostep:focus { outline: 0; }
.ostep__legend {
  padding: 0; margin: 0 0 .35rem;
  font-family: var(--font-disp); font-weight: 900; letter-spacing: -.035em;
  font-size: clamp(1.45rem, 3.4vw, 2rem); line-height: 1.1; color: var(--ink);
}
.ostep__intro { margin: 0 0 1.4rem; color: var(--muted); font-size: .95rem; max-width: 54ch; }
.js .ostep[hidden] { display: none; }
/* A step that has just been shown gets a short settle animation, never a
   slide that shifts the page under a thumb already on its way to Next. */
.js .ostep[data-entered] { animation: ostep-in .32s var(--ease) both; }
@keyframes ostep-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .ostep[data-entered] { animation: none; } }

/* ---- back / next ---- */
.onav {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
  margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft);
}
.onav__next { margin-left: auto; }
@media (max-width: 560px) {
  .onav { flex-direction: column-reverse; align-items: stretch; }
  .onav__next { margin-left: 0; }
  .onav .btn { justify-content: center; }
}
/* On mobile the sticky bar carries Next, so the in-flow one would be a
   duplicate sitting right behind it. */
@media (max-width: 960px) { .onav__next { display: none; } }

.oblock { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.oblock__head { display: flex; align-items: baseline; gap: .75rem; margin-bottom: 1rem; }
.oblock__n {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--grad-btn); color: #fff; font-weight: 800; font-size: .8rem;
  display: grid; place-items: center;
}
.oblock__head h2 { margin: 0; font-size: clamp(1.15rem, 2.2vw, 1.4rem); letter-spacing: -.02em; }

/* ---- pickup / delivery toggle ---- */
.omode { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.omode button {
  display: flex; flex-direction: column; align-items: flex-start; gap: .2rem;
  padding: .9rem 1.1rem; border-radius: var(--r-md); cursor: pointer;
  border: 1.5px solid var(--line); background: #fff; text-align: left;
  transition: all .2s var(--ease); min-height: 44px;
}
.omode button:hover { border-color: rgba(28,23,20,.35); }
.omode button[aria-pressed="true"] {
  border-color: var(--ember); background: #FFF4E6;
  box-shadow: inset 0 0 0 1px var(--ember);
}
.omode b { font-size: 1rem; }
.omode small { font-size: .82rem; color: var(--muted); }

/* ---- menu accordion ---- */
.ocat { border-bottom: 1px solid var(--line-soft); }
.ocat__head, .ocat__toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .95rem 0; margin: 0;
  font-family: var(--font-body); font-size: 1rem; font-weight: 800; color: var(--ink);
  background: none; border: 0; cursor: pointer; text-align: left; letter-spacing: -.01em;
}
.ocat__head { cursor: default; color: var(--ember-deep); }
.ocat__toggle svg { width: 18px; height: 18px; flex: none; transition: transform .25s var(--ease); color: var(--muted); }
.ocat[data-cat-open="1"] .ocat__toggle svg { transform: rotate(180deg); }
.ocat__body { display: none; padding-bottom: .5rem; }
.ocat[data-cat-open="1"] .ocat__body { display: block; }

.oitem {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: .2rem .9rem; align-items: center;
  padding: .6rem 0; border-top: 1px dashed var(--line-soft);
}
.oitem:first-child { border-top: 0; }
.oitem__text { min-width: 0; }
.oitem__name { margin: 0; font-weight: 600; font-size: .97rem; line-height: 1.3; }
.oitem__desc { margin: .15rem 0 0; font-size: .82rem; color: var(--muted); }
.oitem__price {
  margin: 0; font-family: var(--font-mono); font-size: .92rem; font-weight: 700;
  color: var(--price); font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ---- stepper ---- */
.stepper { display: flex; align-items: center; gap: .3rem; }
.stepper__add, .stepper__btn {
  width: 40px; height: 40px; border-radius: 50%; flex: none; cursor: pointer;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  font-size: 1.15rem; font-weight: 700; line-height: 1;
  display: grid; place-items: center; transition: all .18s var(--ease);
}
.stepper__add:hover, .stepper__btn:hover { border-color: var(--ember); color: var(--ember-deep); }
.stepper__add { border-color: var(--ember); color: var(--ember-deep); background: #FFF4E6; }
.stepper__n {
  min-width: 26px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums;
  font-size: 1rem;
}
[data-stepper][data-active="1"] { }

/* ---- upsell row ---- */
.oupsell {
  background: #FFF4E6; border: 1px solid rgba(194,65,12,.22);
  border-radius: var(--r-md); padding: 1rem 1.15rem; margin-bottom: 1.5rem;
}
.oupsell h3 { font-size: .95rem; margin-bottom: .7rem; }
.oupsell__list { display: flex; flex-wrap: wrap; gap: .5rem; }
.upsell {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .85rem; border-radius: 100px; cursor: pointer;
  border: 1.5px solid rgba(194,65,12,.3); background: #fff;
  font-size: .86rem; font-weight: 600; min-height: 40px;
  transition: all .18s var(--ease);
}
.upsell:hover { border-color: var(--ember); background: #fff; transform: translateY(-1px); }
.upsell em { font-style: normal; font-family: var(--font-mono); font-size: .8rem; color: var(--price); }

/* ---- form fields ---- */
.ogrid { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.ofield { display: block; }
.ofield > label, .ofield__label {
  display: block; font-size: .82rem; font-weight: 700; color: var(--ink);
  margin-bottom: .35rem;
}
.ofield__req { color: var(--ember-deep); }
.ofield input, .ofield textarea, .ofield select {
  width: 100%; padding: .8rem 1rem; border-radius: var(--r-sm);
  border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  font-family: inherit; font-size: 1rem; min-height: 46px;
}
.ofield textarea { min-height: 84px; resize: vertical; }
.ofield input:focus, .ofield textarea:focus, .ofield select:focus { border-color: var(--ember); }
.ofield input[aria-invalid="true"] { border-color: #B91C1C; background: #FEF2F2; }
.ofield__err { margin: .3rem 0 0; font-size: .82rem; color: #B91C1C; font-weight: 600; }
.ofield__hint { margin: .3rem 0 0; font-size: .8rem; color: var(--muted-2); }
.ofield--wide { grid-column: 1 / -1; }

.ozone {
  margin-top: .5rem; padding: .6rem .85rem; border-radius: var(--r-sm);
  font-size: .86rem; font-weight: 600; border: 1px solid var(--line);
}
.ozone[data-state="yes"] { background: rgba(21,128,61,.09); border-color: rgba(21,128,61,.35); color: #14532D; }
.ozone[data-state="no"]  { background: rgba(180,83,9,.09);  border-color: rgba(180,83,9,.35);  color: #7C2D12; }

/* ---- consent ---- */
.oconsent {
  background: var(--paper-2); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); padding: 1.1rem 1.25rem;
}
.oconsent__row { display: flex; gap: .75rem; align-items: flex-start; padding: .5rem 0; }
.oconsent input[type="checkbox"] {
  width: 22px; height: 22px; flex: none; margin-top: 1px;
  accent-color: var(--ember); cursor: pointer;
}
.oconsent label { font-size: .9rem; color: var(--ink-soft); cursor: pointer; line-height: 1.45; }
.oconsent label b { color: var(--ink); }
.oconsent__legal { margin: .85rem 0 0; font-size: .78rem; color: var(--muted-2); line-height: 1.5; }

/* A fieldset used purely for grouping semantics, with the browser chrome off. */
.ofieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

/* ---- payment method choice ----
   Radio cards, not a <select>: the choice between paying now and paying the
   driver is the last thing standing between the customer and the grill, and
   it deserves to be two things you can hit with a thumb. */
.opay { display: grid; gap: .7rem; }
.opay__opt { position: relative; }
.opay__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opay__opt > span {
  display: grid; grid-template-columns: auto 1fr auto; gap: .35rem .9rem;
  align-items: center; cursor: pointer;
  padding: 1rem 1.15rem; border-radius: var(--r-md);
  border: 1.5px solid var(--line); background: #fff;
  transition: all .2s var(--ease);
}
.opay__opt > span:hover { border-color: rgba(28,23,20,.35); }
.opay__opt input:checked + span {
  border-color: var(--ember); background: #FFF4E6;
  box-shadow: inset 0 0 0 1px var(--ember);
}
.opay__opt input:focus-visible + span { outline: 3px solid var(--ember); outline-offset: 3px; }
/* Disabled means "not available yet", and it has to look it as well as be it.
   order.js explains why in [data-pay-note] — never a dead option with no reason. */
.opay__opt input:disabled + span { opacity: .5; cursor: not-allowed; background: var(--paper-2); }
.opay__opt input:disabled + span:hover { border-color: var(--line); }
.opay__dot {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  border: 2px solid var(--line); background: #fff; display: grid; place-items: center;
}
.opay__opt input:checked + span .opay__dot { border-color: var(--ember); }
.opay__opt input:checked + span .opay__dot::after {
  content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--ember);
}
.opay__name { font-weight: 800; font-size: 1rem; }
.opay__why { grid-column: 2 / -1; margin: 0; font-size: .86rem; color: var(--muted); line-height: 1.45; }
.opay__mark {
  font-family: var(--font-disp); font-weight: 900; font-size: .82rem; letter-spacing: -.02em;
  padding: .3rem .55rem; border-radius: 6px; white-space: nowrap;
  background: var(--paper-3); color: var(--ink-soft);
}
.opay__opt input:checked + span .opay__mark { background: #fff; color: var(--ember-deep); }
.opay__note {
  margin: .9rem 0 0; font-size: .84rem; color: var(--muted-2); line-height: 1.55;
}

/* ---- final review ---- */
.oreview {
  border: 1px solid var(--line-soft); border-radius: var(--r-md);
  background: var(--paper-2); padding: 1.15rem 1.3rem; margin-bottom: 1.5rem;
}
.oreview h3 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .8rem; }
.oreview dl { display: grid; grid-template-columns: auto 1fr auto; gap: .55rem .9rem; margin: 0; align-items: baseline; }
.oreview dt { font-size: .8rem; font-weight: 700; color: var(--muted); }
.oreview dd { margin: 0; font-size: .92rem; min-width: 0; }
.oreview__edit {
  background: none; border: 0; padding: 0; cursor: pointer; justify-self: end;
  font-family: inherit; font-size: .8rem; font-weight: 700; color: var(--ember-deep);
  text-decoration: underline; text-underline-offset: 3px;
}
.oreview__items { list-style: none; margin: .2rem 0 0; padding: 0; font-size: .92rem; }
.oreview__items li { display: flex; gap: .5rem; padding: .1rem 0; }
.oreview__items b { color: var(--ember-deep); font-variant-numeric: tabular-nums; }

/* ---- payment status page ---- */
.ostatus { max-width: 60ch; margin-inline: auto; text-align: center; }
.ostatus__icon {
  width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 1.3rem;
  display: grid; place-items: center;
  background: var(--paper-3); color: var(--muted);
}
.ostatus__icon svg { width: 34px; height: 34px; }
.ostatus[data-state="paid"] .ostatus__icon { background: rgba(21,128,61,.12); color: var(--ok); }
.ostatus[data-state="pending"] .ostatus__icon { background: rgba(180,83,9,.12); color: var(--warn); }
.ostatus[data-state="failed"] .ostatus__icon { background: rgba(185,28,28,.1); color: #B91C1C; }
.ostatus__ref { font-family: var(--font-mono); font-size: .95rem; color: var(--muted); }
.ostatus .btn-row { justify-content: center; }
.ostatus[data-state="pending"] .ostatus__icon svg { animation: ostatus-spin 1.6s linear infinite; }
@keyframes ostatus-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ostatus__icon svg { animation: none !important; } }

/* ---- running total panel ---- */
.osum {
  position: sticky; top: 84px;
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2); overflow: hidden;
}
@media (max-width: 960px) { .osum { position: static; } }
.osum__head {
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  background: var(--paper-2);
}
.osum__head h2 { margin: 0; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 800; }
.osum__count { font-size: .8rem; color: var(--muted); font-weight: 700; }
.osum__body { padding: 1rem 1.25rem; }
.osum__lines { list-style: none; margin: 0; padding: 0; }
.osum__lines li {
  display: grid; grid-template-columns: 22px auto 1fr auto;
  gap: .5rem; align-items: baseline;
  padding: .4rem 0; font-size: .89rem; border-bottom: 1px dashed var(--line-soft);
}
.osum__empty { color: var(--muted-2); font-size: .88rem; padding: .5rem 0; border: 0 !important; display: block !important; }
.osum__rm {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  font-size: .95rem; line-height: 1; display: grid; place-items: center;
}
.osum__rm:hover { border-color: #B91C1C; color: #B91C1C; }
.osum__q { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ember-deep); }
.osum__name { min-width: 0; }
.osum__amt { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

.osum__calc { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.osum__calc div {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: .89rem; padding: .22rem 0; color: var(--muted);
}
.osum__calc div span:last-child { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.osum__calc .osum__disc span { color: var(--veg); font-weight: 700; }
.osum__grand {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin-top: .8rem; padding-top: .8rem; border-top: 2px solid var(--ink);
}
.osum__grand b { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.osum__grand output {
  font-family: var(--font-disp); font-weight: 900; font-size: 1.95rem; letter-spacing: -.035em;
  color: var(--ember-deep); font-variant-numeric: tabular-nums;
}

.minbar { margin-top: .9rem; }
.minbar__track { height: 7px; border-radius: 100px; background: var(--paper-3); overflow: hidden; }
.minbar__fill { height: 100%; width: 0; background: var(--grad-btn); transition: width .35s var(--ease); }
.minbar__text { margin: .45rem 0 0; font-size: .8rem; color: var(--muted); font-weight: 600; }
.minbar[data-min-ok="1"] .minbar__fill { background: var(--veg); }
.minbar[data-min-ok="1"] .minbar__text { color: var(--veg); }

.otrust { list-style: none; margin: 1rem 0 0; padding: 0; }
.otrust li {
  display: flex; gap: .5rem; align-items: flex-start;
  font-size: .84rem; color: var(--muted); padding: .22rem 0;
}
.otrust svg { width: 15px; height: 15px; flex: none; color: var(--veg); margin-top: 2px; }

/* ---- draft resume banner ---- */
.odraft {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  background: #FFF4E6; border: 1px solid rgba(194,65,12,.28);
  border-radius: var(--r-md); padding: .9rem 1.1rem; margin-bottom: 1.5rem;
  font-size: .92rem;
}
.odraft p { margin: 0; flex: 1 1 220px; font-weight: 600; }

/* ---- errors ---- */
.oerrors {
  background: #FEF2F2; border: 1px solid rgba(185,28,28,.3);
  border-radius: var(--r-md); padding: 1rem 1.15rem; margin-bottom: 1.25rem;
  font-size: .9rem; color: #7F1D1D;
}
.oerrors ul { margin: .4rem 0 0; padding-left: 1.15rem; }

/* ---- result panel ---- */
.oresult { max-width: 62ch; }
.oresult__icon {
  width: 56px; height: 56px; border-radius: 50%; margin-bottom: 1.1rem;
  background: rgba(21,128,61,.12); color: var(--veg);
  display: grid; place-items: center;
}
.oresult__icon svg { width: 28px; height: 28px; }
.oresult__ref { font-family: var(--font-mono); font-size: .95rem; color: var(--muted); }
.oresult__pre {
  background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: var(--r-md);
  padding: 1rem 1.15rem; font-family: var(--font-mono); font-size: .84rem;
  white-space: pre-wrap; overflow-x: auto; margin: 1rem 0 0; color: var(--ink-soft);
}

/* ---- mobile running-total bar ---- */
.obar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 71;
  display: none; align-items: center; gap: .75rem;
  padding: .7rem clamp(1rem,4vw,1.5rem) calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(253,250,244,.97);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(28,23,20,.12);
}
.obar__total { font-family: var(--font-disp); font-weight: 900; font-size: 1.3rem; letter-spacing: -.03em; color: var(--ember-deep); }
.obar__label { display: block; font-family: var(--font-body); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.obar .btn { flex: 1; }
@media (max-width: 960px) {
  .obar { display: flex; }
  body.has-order-bar { padding-bottom: 84px; }
  /* The order page has its own bar; hide the site-wide one to avoid two. */
  body.has-order-bar .order-bar { display: none; }
}

/* Print — people actually print takeaway menus */
@media print {
  body { background: #fff; color: #000; font-size: 11pt; padding-bottom: 0; }
  .site-header, .order-bar, .menu-nav, .cta-strip, .site-footer, .btn, .builder, .hero__art { display: none !important; }
  .dish__price { color: #000; }
  .menu-section { break-inside: avoid; }
  a[href]::after { content: ""; }
}