/* ──────────────────────────────────────────────────────────────────────────
   Stijns Keukentje — "Grote Markt"

   Anthracite and oyster taken from the shopfront stone on the Grote Markt, a
   brine green for anything that reports state, and the rust the old site
   already used kept as the single accent. One visual world, deliberately: a
   shop front does not have a dark mode.
   ────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'SourceSans';
  src: url('/assets/fonts/sourcesanspro-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  /* Preloaded in the layout and 27 kB from our own server, so the font wins the
     ~100 ms race that `optional` allows essentially every time — and on the rare
     visit where it does not, `optional` keeps the fallback for that page load
     instead of swapping text out from under someone mid-read. Combined with the
     metric-matched fallback below, that means no reflow on any path. Change
     back to `swap` if you would rather the real font always arrive, late. */
  font-display: optional;
}

/* The fallback, bent to Source Sans Pro's measurements.
   Arial sets the same sentence 8.8 % wider, and its shallower descender makes a
   line box 58.5 px where Source Sans wants 66 — that mismatch, not the change of
   shape, is what made the old swap shove the page around. The numbers below were
   calibrated by rendering both faces in Chrome over sample copy from this site
   (dish names, prices, the nav, Dutch accents) and solving for a width ratio of
   1; they land at 99.99 %, and a line box of 66 px against the webfont's 66.
   Re-measure if the webfont is ever replaced — they are specific to this pair.
   Arial is on every Mac and Windows machine; Helvetica Neue and Liberation Sans
   are within a percent of it and cover the rest. */
@font-face {
  font-family: 'SourceSans Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  size-adjust: 91.96%;
  ascent-override: 105.24%;
  descent-override: 33.98%;
  line-gap-override: 0%;
}

:root {
  --anthracite: #22201d;
  --oyster: #ede9e3;
  --oyster-deep: #e0dad0;
  --brine: #2e4a3f;
  --brine-soft: #dce7e1;
  --rust: #b12a00;
  --rust-dark: #8e2200;
  --paper: #fdfcfa;
  --ink: #211f1b;
  --ink-soft: #59524a;
  --ink-faint: #8b8375;
  --rule: #e0dad0;
  --rule-soft: #ebe6dd;
  --amber-bg: #fcefe2;
  --amber-ink: #7a3d0c;

  --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --sans: 'SourceSans', 'SourceSans Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --shell: 1120px;
  --gutter: clamp(1rem, 4vw, 3rem);
  --radius: 2px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--rust); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--rust-dark); }

:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 2px;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; margin: 0; text-wrap: balance; }

.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell--narrow { max-width: 44rem; }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--anthracite); color: #fff; padding: .75rem 1.25rem; z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ── header ───────────────────────────────────────────────────────────────── */

.topbar {
  background: var(--anthracite);
  color: #b7b1a6;
  font-size: .8125rem;
  letter-spacing: .03em;
}
.topbar__inner { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; justify-content: space-between; padding-block: .55rem; }
.topbar a { color: #ede9e3; text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.topbar strong { color: #ede9e3; font-weight: 400; }

.masthead { border-bottom: 1px solid var(--rule); background: var(--paper); }
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem; padding-block: 1.25rem; flex-wrap: wrap;
}

.wordmark { text-decoration: none; color: var(--anthracite); display: block; }
.wordmark__name {
  display: block;
  font-family: var(--serif); font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  letter-spacing: .22em; text-transform: uppercase; line-height: 1.1;
  white-space: nowrap;
}
.wordmark__kicker {
  display: block;
  font-size: .625rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-faint); margin-top: .3rem;
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 1.9rem); }
.nav a { color: var(--ink-soft); text-decoration: none; font-size: .95rem; padding-block: .25rem; white-space: nowrap; }
.nav a:hover { color: var(--anthracite); }
/* .nav a outranks .btn--primary on specificity, so the button's own colours
   have to be restated here or the label disappears into the rust. */
.nav a.btn--primary { color: #fff; }
.nav a.btn--primary:hover { color: #fff; }
.nav a[aria-current] { color: var(--anthracite); border-bottom: 1.5px solid var(--rust); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--rule);
  border-radius: var(--radius); padding: .5rem .7rem; cursor: pointer;
  font: inherit; font-size: .875rem; color: var(--ink);
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    padding: .5rem var(--gutter) 1rem; z-index: 40;
    /* The panel opens over the status band and the hero, both of which carry
       their own colour — without a shadow it reads as part of the page rather
       than as something sitting on top of it. */
    box-shadow: 0 12px 24px -8px rgba(34, 32, 29, .28), 0 2px 6px rgba(34, 32, 29, .12);
  }
  .nav[data-open='true'] { display: flex; }
  .nav a { padding-block: .75rem; border-bottom: 1px solid var(--rule-soft); }
  .nav a[aria-current] { border-bottom-color: var(--rust); }
  .masthead__inner { position: relative; }
  .btn--nav { margin-top: .75rem; text-align: center; }
}

/* ── buttons ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-block; font: inherit; font-size: .9375rem; line-height: 1.2;
  padding: .8rem 1.4rem; border-radius: var(--radius); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; letter-spacing: .02em; text-align: center;
}
.btn--primary { background: var(--rust); color: #fff; }
.btn--primary:hover { background: var(--rust-dark); color: #fff; }
.btn--ghost { border-color: #b9b1a3; color: var(--anthracite); background: transparent; }
.btn--ghost:hover { border-color: var(--anthracite); color: var(--anthracite); }
.btn--dark { background: var(--anthracite); color: #fff; }
.btn--dark:hover { background: #000; color: #fff; }
.btn--block { display: block; width: 100%; }
.btn[disabled], .btn[aria-disabled='true'] { opacity: .5; pointer-events: none; }

/* ── status band ──────────────────────────────────────────────────────────── */

/* Three states, three readings. Open is the only green one — a green dot above
   "Nu gesloten" said the opposite of the sentence next to it. Closed is neutral
   rather than alarming (a shop being shut at night is not a problem), and
   holiday is the loudest because it is the one that changes what you can do. */
.status {
  background: var(--brine); color: #dce7e1; font-size: .9375rem;
}
.status--closed { background: var(--anthracite); color: #b7b1a6; }
.status--holiday { background: var(--rust); color: #fbe9e3; }
.status__inner { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding-block: .8rem; }
.status__dot { width: .45rem; height: .45rem; border-radius: 50%; background: #8fd6ae; flex: none; }
.status--closed .status__dot { background: #d9563a; }
.status--holiday .status__dot { background: #ffd2c4; }
.status strong { color: #fff; font-weight: 400; }
.status__detail { margin-left: auto; opacity: .8; font-size: .875rem; }

/* ── hero ─────────────────────────────────────────────────────────────────── */

.hero { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 24rem; }
.hero__text {
  background: var(--oyster); padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 3.5rem);
  display: flex; flex-direction: column; justify-content: center;
}
.hero__text h1 {
  font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.07;
  color: var(--anthracite); letter-spacing: -.015em;
}
.hero__text h1 em { font-style: italic; color: var(--brine); }
.hero__text p { margin: 1.1rem 0 0; color: var(--ink-soft); max-width: 34ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }
.hero__media { background: var(--oyster-deep); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; min-height: 16rem; }

@media (max-width: 780px) {
  .hero { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
  .hero__media img { min-height: 12rem; max-height: 18rem; }
}

/* ── sections ─────────────────────────────────────────────────────────────── */

.section { padding-block: clamp(2.5rem, 6vw, 4rem); }
.section--tint { background: var(--oyster); }

.section__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .5rem 1.5rem; border-bottom: 1px solid var(--rule); padding-bottom: .75rem; margin-bottom: 1.75rem;
}
.section__head h2 { font-size: clamp(1.4rem, 3.4vw, 1.85rem); color: var(--anthracite); }
.section__head .meta { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }

.lede { color: var(--ink-soft); max-width: 62ch; }

/* ── the carte ────────────────────────────────────────────────────────────── */

.carte { columns: 2 21rem; column-gap: clamp(2rem, 5vw, 3.5rem); }

.carte__row {
  display: flex; align-items: baseline; gap: .5rem;
  padding-block: .8rem; border-bottom: 1px dotted var(--rule);
  break-inside: avoid;
}
.carte__name { font-size: 1rem; color: var(--ink); }
.carte__name i { display: block; font-style: italic; font-size: .85rem; color: var(--ink-faint); margin-top: .15rem; }
.carte__leader { flex: 1 1 auto; border-bottom: 1px dotted #c9c1b3; transform: translateY(-.25rem); min-width: 1.25rem; }
.carte__price {
  font-family: var(--serif); font-size: 1rem; color: var(--rust);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.carte__price small { font-family: var(--sans); font-size: .7rem; color: var(--ink-faint); }

.carte__row--unavailable .carte__name { color: var(--ink-faint); }

/* A whole row is the target, not just the name: on a phone the dish name is a
   small tap area, and people aim at the line. */
a.carte__row { text-decoration: none; color: inherit; }
a.carte__row--link:hover .carte__name { color: var(--rust); }
a.carte__row--link:hover .carte__leader { border-bottom-color: var(--rust); }
a.carte__row--link:focus-visible {
  outline: 2px solid var(--rust); outline-offset: 3px; border-radius: 1px;
}
/* The arrow appears on hover only — seven of them sitting there permanently
   would fight the leader dots, which are the thing doing the work. */
a.carte__row--link .carte__price::after {
  content: ' →'; color: var(--rust); opacity: 0; transition: opacity .12s ease;
}
a.carte__row--link:hover .carte__price::after,
a.carte__row--link:focus-visible .carte__price::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  a.carte__row--link .carte__price::after { transition: none; }
}

.badge {
  display: inline-block; font-size: .6875rem; letter-spacing: .06em;
  padding: .15rem .5rem; border-radius: 999px; vertical-align: .1em;
  background: var(--oyster); color: var(--ink-soft); margin-left: .35rem;
}
.badge--season { background: var(--amber-bg); color: var(--amber-ink); }
.badge--shop { background: var(--brine-soft); color: var(--brine); }

/* ── gallery ──────────────────────────────────────────────────────────────── */

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .75rem; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }

/* ── ordering ─────────────────────────────────────────────────────────────── */

.order-layout {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr) 20rem;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
}

@media (max-width: 1040px) {
  .order-layout { grid-template-columns: minmax(0, 1fr) 18rem; }
  .rail { grid-column: 1 / -1; }
  .rail__list { display: flex; flex-wrap: wrap; gap: .4rem; }
  .rail__list a { border-left: 0 !important; padding: .35rem .75rem !important; margin-left: 0 !important; border: 1px solid var(--rule); border-radius: 999px; }
  .rail__list a[aria-current] { border-color: var(--rust); }
}
@media (max-width: 760px) {
  .order-layout { grid-template-columns: minmax(0, 1fr); }
  .basket { position: static !important; }
}

.rail h2 { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .8rem; font-family: var(--sans); }
.rail__list { list-style: none; margin: 0; padding: 0; }
.rail__list a {
  display: flex; justify-content: space-between; gap: .5rem;
  padding: .45rem 0; color: var(--ink-soft); text-decoration: none; font-size: .9375rem;
}
.rail__list a:hover { color: var(--anthracite); }
.rail__list a[aria-current] { color: var(--rust); border-left: 2px solid var(--rust); padding-left: .6rem; margin-left: -.7rem; }
.rail__count { color: var(--ink-faint); font-size: .8125rem; font-variant-numeric: tabular-nums; }

.dish {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem;
  padding: 1rem .75rem; margin-inline: -.75rem;
  border-bottom: 1px solid var(--rule-soft);
  /* Landing flush against the top edge reads as a mis-scroll. */
  scroll-margin-top: 1.5rem;
}

/* Arriving from a link on the homepage or the carte, the dish you clicked
   announces itself and then settles. Without it the page just appears to be
   scrolled somewhere arbitrary and you have to re-find the row you asked for. */
.dish:target { animation: dish-arrive 2.6s ease-out both; }

@keyframes dish-arrive {
  0%, 30%  { background: var(--oyster); box-shadow: inset 3px 0 0 var(--rust); }
  100%     { background: transparent;   box-shadow: inset 3px 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
  /* No fade, but the row still has to be findable — so it simply stays marked. */
  .dish:target {
    animation: none;
    background: var(--oyster);
    box-shadow: inset 3px 0 0 var(--rust);
  }
}
.dish__body { flex: 1 1 16rem; min-width: 0; }
.dish__name { font-size: 1.0625rem; color: var(--ink); }
.dish__note { font-style: italic; font-size: .875rem; color: var(--ink-faint); }
.dish__tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.dish__price { font-family: var(--serif); font-size: 1.0625rem; color: var(--rust); font-variant-numeric: tabular-nums; text-align: right; }
.dish__price small { display: block; font-family: var(--sans); font-size: .6875rem; color: var(--ink-faint); }

.stepper { display: flex; align-items: stretch; border: 1px solid #cfc7b9; border-radius: var(--radius); overflow: hidden; background: #fff; }
.stepper button {
  width: 2.25rem; border: 0; background: #f7f4ef; color: var(--ink-soft);
  font: inherit; font-size: 1.05rem; line-height: 1; cursor: pointer;
}
.stepper button:hover { background: var(--oyster); color: var(--anthracite); }
.stepper output {
  width: 2.75rem; display: grid; place-items: center; font-size: .9375rem;
  font-variant-numeric: tabular-nums; background: #fff;
}
.stepper--empty output { color: var(--ink-faint); }
/* Brief, and only while a request is in flight — enough to show the tap
   registered without making the control feel slow. */
.stepper[data-busy] { opacity: .55; }
.stepper button:disabled { opacity: .35; cursor: default; }

.basket {
  position: sticky; top: 1.5rem;
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 1.4rem 1.25rem;
}
.basket h2 { font-size: 1.2rem; color: var(--anthracite); }
.basket__who { font-size: .8125rem; color: var(--ink-faint); margin: .15rem 0 1rem; }
.basket__line { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding-block: .55rem; border-bottom: 1px solid var(--rule-soft); font-size: .875rem; }
.basket__line > span:first-child { flex: 1 1 auto; min-width: 0; }
.basket__line b { font-weight: 400; font-variant-numeric: tabular-nums; }
/* Quiet until wanted: a column of red crosses would dominate a panel whose job
   is to show what you are buying. */
.basket__remove { display: flex; flex: none; }
.basket__remove button {
  border: 0; background: none; cursor: pointer; padding: 0 0 0 .5rem;
  font: inherit; font-size: 1.1rem; line-height: 1; color: var(--rule);
}
.basket__remove button:hover { color: var(--rust); }
.basket__remove button:focus-visible { color: var(--rust); outline: 2px solid var(--rust); outline-offset: 2px; }
.basket__line em { display: block; font-style: normal; color: var(--ink-faint); font-size: .8125rem; }
.basket__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--rule); }
.basket__total span { font-size: .8125rem; color: var(--ink-faint); }
.basket__total b { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; color: var(--anthracite); font-variant-numeric: tabular-nums; }
.basket__note { font-size: .75rem; color: var(--ink-faint); text-align: center; margin-top: .6rem; }
.basket__empty { color: var(--ink-faint); font-size: .9375rem; }

.slot-panel { background: var(--oyster); border-radius: var(--radius); padding: .9rem 1rem; margin-top: 1.1rem; }
.slot-panel__label { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .3rem; }
.slot-panel__value { font-size: .9375rem; color: var(--anthracite); }

/* ── pick-up picker ───────────────────────────────────────────────────────── */

.picker { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; padding-block: clamp(1.5rem, 4vw, 2.5rem); }
@media (max-width: 860px) { .picker { grid-template-columns: minmax(0, 1fr); } }

.field-label { display: block; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin: 1.4rem 0 .6rem; }
.field-label:first-child { margin-top: 0; }

/* Seven columns, Monday first — the week as everyone already reads it, so a
   closed Tuesday is a gap rather than something missing from a list. */
.cal { display: grid; gap: 1.1rem; }
/* The month is the thing that gets centred, caption and grid together, so the
   month name stays flush with the Monday column instead of drifting off it. */
.cal__month { width: 100%; max-width: 26rem; margin-inline: auto; }
.cal__caption {
  font-family: var(--serif); font-size: 1rem; color: var(--anthracite);
  margin: 0 0 .4rem; text-transform: lowercase;
}
.cal__grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem;
}
.cal__head {
  text-align: center; font-size: .625rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint); padding-bottom: .15rem;
}
.cal__day {
  display: grid; place-items: center; aspect-ratio: 1;
  border: 1px solid var(--rule); border-radius: var(--radius); background: #fff;
  cursor: pointer; font-variant-numeric: tabular-nums;
}
.cal__day b { font-size: .9375rem; font-weight: 400; color: var(--anthracite); }
.cal__day input { position: absolute; opacity: 0; pointer-events: none; }
.cal__day:has(input:checked) { background: var(--anthracite); border-color: var(--anthracite); }
.cal__day:has(input:checked) b { color: #fff; }
.cal__day:has(input:focus-visible) { outline: 2px solid var(--rust); outline-offset: 2px; }

/* Closed, or a neighbouring month bleeding into the first and last rows.
   Kept in the flow so the columns stay honest — a gap that collapsed would put
   the wrong dates under the wrong weekday. */
.cal__day--off {
  border-color: transparent; background: transparent; cursor: default;
  color: var(--ink-faint); opacity: .45; font-size: .875rem;
}

.times { display: flex; flex-wrap: wrap; gap: .5rem; }
.time {
  cursor: pointer; border: 1px solid var(--rule); border-radius: var(--radius);
  background: #fff; padding: .5rem .85rem; font-size: .875rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.time input { position: absolute; opacity: 0; pointer-events: none; }
.time:has(input:checked) { border-color: var(--rust); color: var(--rust); box-shadow: inset 0 0 0 1px var(--rust); }
.time:has(input:focus-visible) { outline: 2px solid var(--rust); outline-offset: 2px; }
.time--full { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

.day-group[hidden] { display: none; }

/* "Verder vooruit bestellen" — folded away, because the fortnight of buttons
   above it is what nearly everyone wants. */
.later { margin-top: .9rem; border-top: 1px solid var(--rule-soft); padding-top: .8rem; }
.later > summary {
  cursor: pointer; font-size: .875rem; color: var(--rust);
  list-style: none; display: inline-flex; align-items: center; gap: .35rem;
}
.later > summary::-webkit-details-marker { display: none; }
.later > summary::before { content: '＋'; font-size: .8em; }
.later[open] > summary::before { content: '−'; }
.later > summary:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
.later__row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.later__row .stack { margin: 0; }
.later__row input[type="date"] {
  font: inherit; font-size: .9375rem; color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: #fff; padding: .45rem .6rem;
}
.later__row input[type="date"][aria-invalid="true"] { border-color: var(--rust); }
.pickup-open {
  color: var(--ink-soft); background: var(--oyster); border-radius: var(--radius);
  padding: .7rem .9rem; margin: 0;
}
.pickup-open strong { color: var(--anthracite); font-weight: 400; font-variant-numeric: tabular-nums; }

.pay-options { display: grid; gap: .5rem; }
.pay-option {
  display: flex; align-items: flex-start; gap: .7rem;
  border: 1px solid var(--rule); border-radius: var(--radius); background: #fff;
  padding: .8rem .9rem; cursor: pointer;
}
.pay-option input { margin-top: .25rem; flex: none; }
.pay-option b { font-weight: 400; display: block; color: var(--ink); }
.pay-option em { font-style: normal; display: block; font-size: .8125rem; color: var(--ink-faint); margin-top: .1rem; }
.pay-option:has(input:checked) { border-color: var(--rust); box-shadow: inset 0 0 0 1px var(--rust); }
.pay-option:has(input:focus-visible) { outline: 2px solid var(--rust); outline-offset: 2px; }
/* Shown but not choosable: the shop offers online payment, it is just not
   switched on yet, and hiding it would misrepresent what this checkout does. */
.pay-option--off { cursor: not-allowed; background: var(--oyster); opacity: .7; }
.pay-option--off b { color: var(--ink-faint); }

/* ── forms ────────────────────────────────────────────────────────────────── */

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem 1.25rem; }

label.stack { display: block; }
label.stack > span { display: block; font-size: .8125rem; color: var(--ink-soft); margin-bottom: .3rem; }

input[type='text'], input[type='email'], input[type='tel'], input[type='password'],
input[type='date'], input[type='time'], input[type='number'], select, textarea {
  width: 100%; font: inherit; font-size: .9375rem; color: var(--ink);
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius);
  padding: .6rem .7rem;
}
textarea { min-height: 6rem; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--anthracite); outline: 2px solid transparent; outline-offset: 0; box-shadow: 0 0 0 2px rgba(34,32,29,.12); }

.field-error { color: var(--rust); font-size: .8125rem; margin-top: .3rem; }
input[aria-invalid='true'], textarea[aria-invalid='true'] { border-color: var(--rust); }

.checkbox { display: flex; align-items: flex-start; gap: .55rem; font-size: .9375rem; }
.checkbox input { margin-top: .3rem; }

/* ── notices ──────────────────────────────────────────────────────────────── */

.notice { border-radius: var(--radius); padding: .85rem 1rem; font-size: .9375rem; margin-bottom: 1rem; }
.notice--success { background: var(--brine-soft); color: var(--brine); }
.notice--error { background: #fbe4dc; color: #8e2200; }
.notice--info { background: var(--oyster); color: var(--ink-soft); }
.notice--warning { background: var(--amber-bg); color: var(--amber-ink); }

/* ── tables ───────────────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .9375rem; }
table.data th, table.data td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--rule-soft); }
table.data th { font-family: var(--sans); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); font-weight: 400; }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tbody tr:hover { background: #faf8f5; }

.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td { padding: .65rem .5rem; border-bottom: 1px solid var(--rule-soft); font-size: .9375rem; }
.hours th { text-align: left; font-family: var(--sans); font-weight: 400; color: var(--ink-soft); }
/* Times centred under their column, day names left. Seven rows of the same
   shape read as a schedule when the figures line up on a common axis. */
.hours td { font-variant-numeric: tabular-nums; text-align: center; }
.hours thead th { text-align: center; }
.hours thead th:first-child { text-align: left; }
.hours .closed { color: var(--rust); }
.hours tr[data-today] { background: var(--oyster); }

/* ── confirmation ─────────────────────────────────────────────────────────── */

.receipt { max-width: 34rem; margin-inline: auto; text-align: center; padding-block: clamp(2rem, 6vw, 3.5rem); }
.receipt__tick { width: 3rem; height: 3rem; border-radius: 50%; background: var(--brine-soft); color: var(--brine); display: grid; place-items: center; font-size: 1.4rem; margin: 0 auto 1rem; }
.receipt h1 { font-size: clamp(1.5rem, 4vw, 2rem); color: var(--anthracite); }
.receipt__when { margin: .6rem 0 1.5rem; color: var(--ink-soft); }
.receipt__when b { color: var(--anthracite); font-weight: 400; }
.receipt__code { border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem; }
.receipt__code span { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.receipt__code b { display: block; font-family: var(--serif); font-size: 1.75rem; font-weight: 400; letter-spacing: .06em; margin-top: .2rem; }
.receipt__lines { text-align: left; margin-top: 1.75rem; }

.errorpage { padding-block: clamp(3rem, 10vw, 6rem); }
.errorpage__inner { max-width: 38rem; text-align: center; }
/* Large but recessive: the number is orientation, not the message. */
.errorpage__code {
  font-family: var(--serif); font-size: clamp(3.5rem, 12vw, 6rem); line-height: 1;
  color: var(--oyster-deep); margin: 0 0 .5rem; font-variant-numeric: lining-nums;
}
.errorpage h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); color: var(--anthracite); }
.errorpage__message { color: var(--ink-soft); margin: .75rem auto 0; max-width: 46ch; }
.errorpage__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.75rem; }
.errorpage__help {
  margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--rule);
  font-size: .875rem; color: var(--ink-faint);
}

/* ── footer ───────────────────────────────────────────────────────────────── */

.footer { background: var(--anthracite); color: #9d968b; margin-top: clamp(3rem, 8vw, 5rem); font-size: .9375rem; }
.footer__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2rem; padding-block: clamp(2rem, 5vw, 3rem); }

/* On a phone the three blocks stack. auto-fit alone would still squeeze two
   columns in at ~26rem, and the opening hours — the longest lines in the
   footer — would wrap against the menu beside them. */
@media (max-width: 40rem) {
  .footer__inner { grid-template-columns: 1fr; gap: 1.75rem; }
}
/* #948d81 is the quietest this may go on the footer's #22201d: it lands at
   4.94:1, and 4.5 is the floor for text this size. It was #6f695f, which came
   out at 2.99 — legible enough for a designer looking straight at it, and not
   for a customer reading opening hours on a phone in daylight. The body text
   above it stays a step brighter at #9d968b, so headings still read as quieter
   without dropping under the line. */
.footer h2 { font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: #948d81; font-family: var(--sans); margin-bottom: .7rem; }
.footer a { color: #ede9e3; text-decoration: none; }
.footer a:hover { text-decoration: underline; }
/* inline-flex so the mark sits on the text's centre rather than its baseline,
   at any font size, and so the hover underline does not run under the icon. */
.footer__social a { display: inline-flex; align-items: center; gap: .45rem; }
.footer__social .icon { flex: none; }
.footer p { margin: 0 0 .35rem; }
/* Day and hours as two aligned columns rather than a run of sentences: these
   are seven rows of the same shape, and a reader scans down the times. The day
   column sizes to the widest name (donderdag) and every time starts flush. */
.footer-hours {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .3rem 1.25rem;
  margin: 0;
}
.footer-hours dt { color: #9d968b; }
.footer-hours dd {
  margin: 0; color: #ede9e3;
  display: flex; flex-wrap: wrap; gap: .15rem .5rem;
  font-variant-numeric: tabular-nums;
}
/* Two blocks on a day read as one range with a separator, not as two values. */
.footer-hours__slot + .footer-hours__slot::before { content: '& '; color: #948d81; }
.footer-hours__closed { color: #9d968b; }

.footer__bottom { border-top: 1px solid #35322d; padding-block: 1rem; font-size: .8125rem; color: #948d81; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; }

/* ── utilities ────────────────────────────────────────────────────────────── */

.stack-sm > * + * { margin-top: .5rem; }
.stack-md > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 2rem; }
.muted { color: var(--ink-faint); }
.small { font-size: .875rem; }
.nowrap { white-space: nowrap; }
.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;
}
.inline-form { display: inline; }

@media print {
  .topbar, .masthead, .status, .footer, .btn { display: none !important; }
  body { font-size: 11pt; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}