@charset "utf-8";
/* ============================================================================
   CONTAINERDIENST KENIS — site stylesheet
   Tokens are transcribed verbatim from the design system
   (handoff/tailwind-theme.css + tokens/*.css). Do not invent values here.

   The five rules this file must never break:
   1. Green #1D7428 is the brand AND the action colour. Never a waste stream.
   2. Amber #ED9100 means something. Never decorative.
   3. The 10px 45 degree chamfer is on the primary button and nowhere else.
   4. Edges over shadows.
   5. Tabular figures, always.
   ========================================================================== */

/* --- 1. FONT. Self-hosted, no external request. --------------------------- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-wdth-wght-latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-wdth-wght-latin-ext.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- 2. TOKENS ------------------------------------------------------------ */
:root {
  color-scheme: light;

  /* type */
  --font-display: "Archivo", system-ui, -apple-system, sans-serif;
  --font-text: "Archivo", system-ui, -apple-system, sans-serif;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;
  --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900;

  --fs-display-1: 56px; --fs-display-2: 40px;
  --fs-h1: 32px; --fs-h2: 24px; --fs-h3: 19px;
  --fs-body-lg: 18px; --fs-body: 16px; --fs-body-sm: 14px;
  --fs-label: 13px; --fs-micro: 12px;

  --fs-price-hero: 68px; --fs-price-card: 40px;
  --fs-price-row: 20px;  --fs-price-inline: 16px;

  /* green — the brand and the action */
  --green-50: #EEFAEE;  --green-100: #D9F4D9; --green-200: #B7E5B8;
  --green-300: #8BCD8D; --green-350: #20C554; --green-400: #4EA253;
  --green-500: #1D7428; --green-600: #165F20; --green-700: #104A17;
  --green-800: #0C3410; --green-900: #08210A;

  /* neutral — cool, oklch hue 250 */
  --neutral-50: #F7F9FC;  --neutral-100: #EDF1F4; --neutral-200: #DCE1E6;
  --neutral-300: #C2C9D0; --neutral-400: #959CA4; --neutral-500: #6D747C;
  --neutral-600: #555C64; --neutral-700: #3D444A; --neutral-800: #272C32;
  --neutral-900: #151A1F; --neutral-950: #0A0E11;
  --brand-white: #FFFFFF;

  /* amber — the one signal colour. Reserved. */
  --amber-50: #FFF3E1;  --amber-100: #FFE6C2; --amber-200: #FFD094;
  --amber-300: #FFBB64; --amber-400: #FDA42E; --amber-500: #ED9100;
  --amber-600: #C87600; --amber-700: #985700; --amber-800: #6A3B00;
  --amber-900: #462500;

  /* waste streams — muted, material-bound, never brand green */
  --stream-gemengd: #31373E;   --stream-gemengd-ink: #31373E;
  --stream-steen: #9F998C;     --stream-steen-ink: #605A4E;
  --stream-hout: #7C472A;      --stream-hout-ink: #7C472A;
  --stream-groen: #75762A;     --stream-groen-ink: #5F5F0B;
  --stream-glas: #65859A;      --stream-glas-ink: #415F73;
  --stream-bijzonder: #B97000; --stream-bijzonder-ink: #8C4600;

  /* feedback */
  --error: #A81C10; --error-bg: #FDECEA; --error-line: #F0A79F;

  /* gradients — max two stops, one family, never behind running text */
  --grad-brand: linear-gradient(135deg, #1D7428 0%, #0C3410 100%);
  --grad-steel: linear-gradient(180deg, #272C32 0%, #151A1F 100%);
  --grad-plate: linear-gradient(100deg, #104A17 0%, #08210A 100%);
  --scrim-strong: rgba(21, 26, 31, .78);
  --scrim-soft: rgba(21, 26, 31, .45);

  /* semantic aliases */
  --text-strong: var(--neutral-900); --text-body: var(--neutral-800);
  --text-secondary: var(--neutral-700); --text-muted: var(--neutral-600);
  --text-faint: var(--neutral-500); --text-disabled: var(--neutral-400);
  --text-on-dark: #FFFFFF; --text-on-dark-muted: var(--neutral-300);
  --text-brand: var(--green-500); --text-brand-on-dark: var(--green-350);
  --text-signal: var(--amber-700); --text-currency: var(--neutral-600);
  --line-hair: var(--neutral-200); --line-strong: var(--neutral-300);
  --line-on-dark: var(--neutral-800);

  /* shape — ZERO is the default, radius is the exception */
  --radius-0: 0; --radius-2: 2px; --radius-4: 4px; --radius-6: 6px;
  --radius-dot: 50%;
  --chamfer: 10px;
  --clip-chamfer: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  --clip-chamfer-sm: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);

  /* edges over shadows */
  --shadow-hard: 3px 3px 0 #151A1F;
  --shadow-hard-brand: 3px 3px 0 #0C3410;
  --shadow-overlay: 0 2px 0 #C2C9D0, 0 6px 16px -8px rgba(21, 26, 31, .28);
  --shadow-inset-press: inset 0 2px 0 rgba(8, 33, 10, .22);
  --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #151A1F;
  --focus-ring-dark: 0 0 0 2px #151A1F, 0 0 0 4px #FDA42E;

  /* layout */
  --content-max: 1280px;
  --measure: 68ch;
  --gutter: 16px;
  --touch-min: 44px; --touch-admin: 56px; --bar-call: 64px;

  /* motion */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-morph: 200ms;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --ease-exit: cubic-bezier(.4, 0, 1, 1);
}

@media (min-width: 600px) { :root { --gutter: 24px; } }
@media (min-width: 900px) {
  :root {
    --gutter: 32px;
    --fs-display-1: 104px; --fs-display-2: 64px;
    --fs-h1: 46px; --fs-h2: 32px; --fs-h3: 22px;
  }
}
@media (min-width: 1200px) { :root { --gutter: 48px; } }
@media (min-width: 1280px) {
  .nav a:not(.btn) { font-size: var(--fs-body); padding-inline: 14px; }
}

/* --- 3. RESET AND ELEMENT DEFAULTS ---------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
* { margin: 0; }

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

body {
  font-family: var(--font-text);
  font-variation-settings: "wdth" 100;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-body);
  background: var(--brand-white);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 87.5;
  font-weight: var(--fw-black);
  color: var(--text-strong);
  text-wrap: balance;
  letter-spacing: -.02em;
  line-height: 1.1;
}
h1 { font-size: var(--fs-h1); font-variation-settings: "wdth" 80; letter-spacing: -.025em; line-height: 1.02; }
h2 { font-size: var(--fs-h2); font-variation-settings: "wdth" 82; }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); letter-spacing: -.005em; line-height: 1.28; }

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

/* Every number in this product is tabular. EUR 1.330 lines up under EUR 605. */
.tnum, [data-numeric], table td, table th, input, .price, time {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

a { color: var(--green-500); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--green-700); }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

ul, ol { padding: 0; list-style: none; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); }
[tabindex="-1"]:focus { box-shadow: none; }
.on-dark :focus-visible, .band--dark :focus-visible { box-shadow: var(--focus-ring-dark); }

::selection { background: var(--green-200); color: var(--neutral-900); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--brand-white); color: var(--neutral-900);
  padding: 12px 16px; font-weight: var(--fw-bold);
  box-shadow: inset 0 0 0 2px var(--neutral-900);
  transition: top var(--dur-1) var(--ease);
}
.skip-link:focus { top: 8px; }

/* --- 4. LAYOUT ------------------------------------------------------------ */
.wrap { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 780px; }

/* The page alternates full-bleed between ground and paper. That rhythm is
   what gives the whole thing weight. */
.band { padding-block: 32px; }
.band--dark { background: var(--neutral-950); color: var(--text-on-dark); }
.band--steel { background: var(--neutral-900); background-image: var(--grad-steel); color: var(--text-on-dark); }
.band--brand { background: var(--green-800); background-image: var(--grad-brand); color: var(--text-on-dark); }
.band--paper { background: var(--brand-white); }
.band--sunken { background: var(--neutral-50); }
.band--signal { background: var(--amber-500); color: var(--neutral-900); }
.band--dark h1, .band--dark h2, .band--dark h3,
.band--steel h1, .band--steel h2, .band--steel h3,
.band--brand h1, .band--brand h2, .band--brand h3 { color: var(--brand-white); }
.band--dark a:not(.btn), .band--steel a:not(.btn), .band--brand a:not(.btn) { color: var(--green-350); }
.band--signal h1, .band--signal h2, .band--signal h3 { color: var(--neutral-900); }
.band--signal a:not(.btn) { color: var(--neutral-900); }

@media (min-width: 900px) { .band { padding-block: 56px; } }

.stack { display: grid; gap: 16px; align-content: start; min-width: 0; }
.stack--tight { gap: 10px; }
.stack--loose { gap: 28px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.grow { flex: 1; }

.cols { display: grid; gap: 24px; }
.cols > * { min-width: 0; }
@media (min-width: 900px) {
  .cols--2 { grid-template-columns: 1fr 1fr; }
  .cols--3 { grid-template-columns: repeat(3, 1fr); }
  .cols--side { grid-template-columns: 1fr 340px; gap: 48px; align-items: start; }
  .cols--lead { grid-template-columns: 1.15fr 1fr; gap: 48px; }
}

/* The product tiles. Six streams, so the grid is fixed at three across rather
   than auto-fitting: four-then-two leaves a ragged second row, and the wider
   column also buys the photo more pixels. */
.cols--tegels { grid-template-columns: 1fr; }
@media (min-width: 560px) { .cols--tegels { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .cols--tegels { grid-template-columns: repeat(3, 1fr); } }

.measure { max-width: var(--measure); }

/* Section head: a hairline rule, then the heading. No eyebrow labels. */
.section-head { display: grid; gap: 10px; }
.section-head::before { content: ""; display: block; height: 1px; background: var(--line-strong); }
.band--dark .section-head::before,
.band--steel .section-head::before { background: var(--line-on-dark); }
.section-head p { color: var(--text-muted); max-width: var(--measure); }
.band--dark .section-head p, .band--steel .section-head p { color: var(--neutral-400); }

.lead { font-size: var(--fs-body-lg); line-height: 1.6; color: var(--text-secondary); max-width: var(--measure); }
.band--dark .lead, .band--steel .lead, .band--brand .lead { color: var(--neutral-300); }
.muted { color: var(--text-muted); }
.band--dark .muted, .band--steel .muted { color: var(--neutral-400); }
.small { font-size: var(--fs-body-sm); }
.micro { font-size: var(--fs-micro); }
.faint { color: var(--text-faint); }

.hr { height: 1px; background: var(--line-hair); border: 0; }
.band--dark .hr, .band--steel .hr { background: var(--line-on-dark); }

/* Poster type: the display voice at wdth 75 so 56px still fits at 390px. */
.poster {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 75;
  font-weight: var(--fw-black);
  font-size: var(--fs-display-1);
  line-height: .94;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.poster--2 { font-size: var(--fs-display-2); }

.crumbs { font-size: var(--fs-body-sm); color: var(--text-faint); }
.band--dark .crumbs, .band--steel .crumbs, .band--brand .crumbs { color: var(--neutral-400); }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.band--dark .crumbs a { color: var(--green-350); }

/* --- 5. ICONS ------------------------------------------------------------- */
.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: butt; stroke-linejoin: miter; }
.icon--16 { width: 16px; height: 16px; stroke-width: 2.5; }
.icon--20 { width: 20px; height: 20px; stroke-width: 2.5; }
.icon--32 { width: 32px; height: 32px; }

/* --- 6. BUTTONS ----------------------------------------------------------- */
/* The chamfer lives on .btn--primary and nowhere else. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--touch-min);
  padding: 12px 20px;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 87.5;
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-body);
  line-height: 1.1;
  text-align: center; text-decoration: none;
  border: 0; border-radius: var(--radius-0);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.btn--sm { min-height: var(--touch-min); padding: 8px 14px; font-size: var(--fs-body-sm); }
.btn--lg { min-height: 56px; padding: 16px 24px; font-size: var(--fs-body-lg); }
.btn--block { display: flex; width: 100%; }

.btn--primary {
  background: var(--green-500); color: var(--brand-white);
  clip-path: var(--clip-chamfer);
}
.btn--primary.btn--sm { clip-path: var(--clip-chamfer-sm); }
.btn--primary:hover { background: var(--green-600); color: var(--brand-white); }
.btn--primary:active { background: var(--green-700); box-shadow: var(--shadow-inset-press); }

.btn--secondary {
  background: transparent; color: var(--neutral-900);
  box-shadow: inset 0 0 0 2px var(--neutral-900);
}
.btn--secondary:hover { background: var(--neutral-100); color: var(--neutral-900); }
.btn--secondary:active { background: var(--neutral-200); }

.btn--on-dark {
  background: transparent; color: var(--brand-white);
  box-shadow: inset 0 0 0 2px var(--brand-white);
}
.btn--on-dark:hover { background: rgba(255, 255, 255, .12); color: var(--brand-white); }
.btn--on-dark:active { background: rgba(255, 255, 255, .2); }

.btn--ghost { background: transparent; color: var(--green-500); padding-inline: 8px; }
.btn--ghost:hover { background: var(--green-50); color: var(--green-700); }
.band--dark .btn--ghost, .band--brand .btn--ghost,
.card--brand .btn--ghost, .card--dark .btn--ghost { color: var(--brand-white); }
/* On amber the only ink that passes is neutral-900 (7.21 AA). Green would not. */
.panel-block .btn--ghost, .band--signal .btn--ghost { color: var(--neutral-900); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.panel-block .btn--ghost:hover, .band--signal .btn--ghost:hover { background: rgba(21, 26, 31, .1); color: var(--neutral-900); }
.band--dark .btn--ghost:hover, .band--brand .btn--ghost:hover,
.card--brand .btn--ghost:hover, .card--dark .btn--ghost:hover { background: rgba(255, 255, 255, .12); color: var(--brand-white); }

.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--neutral-200) !important; color: var(--neutral-400) !important;
  box-shadow: none !important; cursor: not-allowed; clip-path: none;
}

/* Loading: the label becomes "Bezig…" plus a 2px square spinner. No shimmer. */
.btn[data-loading="true"] { pointer-events: none; }
.btn[data-loading="true"] .btn__label { visibility: hidden; }
.btn[data-loading="true"]::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: kenis-spin 640ms linear infinite;
}
.btn[data-loading="true"] { position: relative; }
@keyframes kenis-spin { to { transform: rotate(360deg); } }

.icon-btn {
  display: inline-grid; place-items: center;
  width: var(--touch-min); height: var(--touch-min);
  border-radius: var(--radius-0);
  transition: background-color var(--dur-1) var(--ease);
}

/* --- 7. PRICE ------------------------------------------------------------- */
.price {
  display: inline-flex; align-items: baseline; gap: .06em;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 87.5;
  font-weight: var(--fw-black);
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--text-strong);
}
.price__cur { font-size: max(11px, .58em); font-weight: var(--fw-extrabold); color: var(--text-currency); letter-spacing: 0; }
.price__unit { font-size: .34em; font-weight: var(--fw-extrabold); color: var(--text-currency); letter-spacing: 0; }
.price--hero { font-size: var(--fs-price-hero); font-variation-settings: "wdth" 76; }
.price--card { font-size: var(--fs-price-card); font-variation-settings: "wdth" 82; }
.price--row { font-size: var(--fs-price-row); }
.price--inline { font-size: var(--fs-price-inline); }
.band--dark .price, .band--steel .price, .band--brand .price,
.total-bar .price, .call-bar .price, .card--dark .price, .menu-panel .price { color: var(--brand-white); }
.band--dark .price__cur, .band--steel .price__cur, .band--brand .price__cur,
.band--dark .price__unit, .band--steel .price__unit,
.total-bar .price__cur, .total-bar .price__unit,
.card--dark .price__cur, .card--dark .price__unit { color: var(--neutral-400); }

/* amber-700 is the signal ink on white; on the dark ground it fails, so the
   on-dark quote label steps up to amber-400 (8.78 on neutral-900). */
.band--dark .price-quote, .band--steel .price-quote, .total-bar .price-quote,
.card--dark .price-quote, .menu-panel .price-quote { color: var(--amber-400); }

/* Under a price: at most two lines. The legal fact, then what is included. */
.price-note { font-size: var(--fs-label); line-height: 1.4; color: var(--text-muted); }
.band--dark .price-note, .band--steel .price-note, .total-bar .price-note { color: var(--neutral-400); }

.price-quote {
  font-family: var(--font-display); font-variation-settings: "wdth" 87.5;
  font-weight: var(--fw-extrabold); font-size: var(--fs-body-lg);
  color: var(--text-signal);
}

/* Big tabular numeral, for volumes and counters. */
.bignum {
  display: inline-flex; align-items: baseline; gap: .08em;
  font-family: var(--font-display); font-variation-settings: "wdth" 78;
  font-weight: var(--fw-black); letter-spacing: -.035em; line-height: .92;
  color: var(--text-strong);
}
.band--dark .bignum, .band--steel .bignum, .total-bar .bignum, .card--dark .bignum { color: var(--brand-white); }
.bignum__unit { font-size: max(12px, .34em); font-weight: var(--fw-extrabold); color: var(--text-currency); letter-spacing: 0; }
.band--dark .bignum__unit, .band--steel .bignum__unit { color: var(--neutral-400); }

/* --- 8. BADGES, STREAM TAGS, STREAM EDGES --------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: var(--radius-2);
  font-size: var(--fs-label); font-weight: var(--fw-bold); line-height: 1.3;
  background: var(--neutral-100); color: var(--neutral-700);
}
.badge--ok { background: var(--green-50); color: var(--green-700); box-shadow: inset 0 0 0 1px var(--green-300); }
.badge--warn { background: var(--amber-50); color: var(--amber-700); box-shadow: inset 0 0 0 1px var(--amber-300); }
.badge--error { background: var(--error-bg); color: var(--error); box-shadow: inset 0 0 0 1px var(--error-line); }

.band--dark .stream-tag:not(.stream-tag--solid) { color: var(--brand-white); }
.stream-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: var(--radius-2);
  font-size: var(--fs-label); font-weight: var(--fw-bold); line-height: 1.3;
  color: var(--stream-ink, var(--neutral-700));
  box-shadow: inset 0 0 0 1px var(--stream-color, var(--neutral-300));
}
.stream-tag--solid { background: var(--stream-ink); color: var(--brand-white); box-shadow: none; }
.stream-swatch { width: 16px; height: 16px; border-radius: var(--radius-2); background: var(--stream-color); display: inline-block; flex: none; }

/* The 6px colour edge. Exists so a stream colour is never injected inline. */
.stream-edge { position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--stream-color); }
.stream-edge--top { inset: 0 0 auto 0; width: auto; height: 4px; }

[data-stream="gemengd"]   { --stream-color: var(--stream-gemengd);   --stream-ink: var(--stream-gemengd-ink); }
[data-stream="steen"]     { --stream-color: var(--stream-steen);     --stream-ink: var(--stream-steen-ink); }
[data-stream="hout"]      { --stream-color: var(--stream-hout);      --stream-ink: var(--stream-hout-ink); }
[data-stream="groen"]     { --stream-color: var(--stream-groen);     --stream-ink: var(--stream-groen-ink); }
[data-stream="glas"]      { --stream-color: var(--stream-glas);      --stream-ink: var(--stream-glas-ink); }
[data-stream="bijzonder"] { --stream-color: var(--stream-bijzonder); --stream-ink: var(--stream-bijzonder-ink); }

/* --- 9. CARDS. Edges over shadows. --------------------------------------- */
.card {
  position: relative;
  background: var(--brand-white);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  border-radius: var(--radius-0);
  padding: 20px;
}
.card--flush { padding: 0; }
.card--sunken { background: var(--neutral-50); }
.card--dark { background: var(--neutral-900); box-shadow: inset 0 0 0 1px var(--neutral-800); color: var(--text-on-dark); }
.card--brand {
  background: var(--green-800); background-image: var(--grad-brand);
  box-shadow: none; color: var(--brand-white);
}
.card--brand h2, .card--brand h3, .card--brand b, .card--brand strong { color: var(--brand-white); }
.card--brand p, .card--brand li, .card--brand .small { color: rgba(255, 255, 255, .88); }
/* Nothing on this ground goes to a grey. If a line has to be quieter than the
   rest, it gets there by opacity on white, not by a paper grey. */
.card--brand .muted, .card--brand .faint { color: rgba(255, 255, 255, .78); }

/* Card hover: the 1px edge goes to 2px ink. That is all. */
a.card, .card--link { display: block; text-decoration: none; color: inherit; transition: box-shadow var(--dur-1) var(--ease); }
a.card:hover, .card--link:hover { box-shadow: inset 0 0 0 2px var(--neutral-900); color: inherit; }

/* --- 10. STREAM CARD (the product tile) ---------------------------------- */
.stream-card {
  position: relative; display: grid; grid-template-rows: auto 1fr;
  background: var(--brand-white); box-shadow: inset 0 0 0 1px var(--line-strong);
  text-decoration: none; color: inherit;
  transition: box-shadow var(--dur-1) var(--ease);
}
.stream-card:hover { box-shadow: inset 0 0 0 2px var(--neutral-900); color: inherit; }
.stream-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.stream-card__media img { width: 100%; height: 100%; object-fit: cover; }
.stream-card__body { padding: 12px 12px 16px 16px; display: grid; gap: 8px; align-content: start; }
.stream-card__title {
  font-family: var(--font-display); font-variation-settings: "wdth" 82;
  font-weight: var(--fw-black); font-size: var(--fs-h3); line-height: 1.05;
  letter-spacing: -.02em; color: var(--text-strong);
}
.stream-card__note { font-size: var(--fs-micro); color: var(--text-muted); line-height: 1.35; }

/* --- 11. PHOTOGRAPHY ------------------------------------------------------ */
/* Colour grading is baked into the files at build time; nothing to do here. */
.photo { position: relative; overflow: hidden; background: var(--neutral-900); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--16x9 { aspect-ratio: 16 / 9; }
.photo--4x3 { aspect-ratio: 4 / 3; }
.photo--3x2 { aspect-ratio: 3 / 2; }
.photo--1x1 { aspect-ratio: 1 / 1; }
.photo--3x4 { aspect-ratio: 3 / 4; }

/* A 3:4 portrait in a half-width desktop column renders 800px tall and leaves
   the prose column stranded beside it. Cap it and let it crop. */
.portrait img { width: 100%; object-fit: cover; }
@media (min-width: 900px) { .portrait img { max-height: 520px; } }

/* Text on a photo always sits on a flat scrim, never a guessy gradient. */
.photo__scrim { position: absolute; inset: 0; background: var(--scrim-strong); display: grid; align-content: end; gap: 12px; padding: 20px; }
.photo__scrim--soft { background: var(--scrim-soft); }

/* Missing photo: the plate gradient, never a grey box with a camera icon. */
.photo--empty { background: var(--grad-plate); }

/* --- 12. HEADER ----------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--neutral-950);
  border-bottom: 1px solid var(--line-on-dark);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; padding-block: 10px; }
@media (min-width: 1000px) { .site-header__inner { min-height: 88px; gap: 32px; padding-block: 14px; } }

.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo img { width: 42px; height: 42px; }
.logo__text { display: grid; gap: 2px; }
.logo__over {
  font-family: var(--font-text); font-variation-settings: "wdth" 100;
  font-weight: var(--fw-bold); font-size: 10px; letter-spacing: .115em;
  line-height: 1; color: var(--brand-white);
}
.logo__name {
  font-family: var(--font-display); font-variation-settings: "wdth" 87.5;
  font-weight: var(--fw-black); font-size: 25px; letter-spacing: -.015em;
  line-height: .82; color: var(--brand-white);
}
.logo--ink .logo__over, .logo--ink .logo__name { color: var(--neutral-900); }
@media (min-width: 900px) {
  .logo img { width: 48px; height: 48px; }
  .logo__over { font-size: 11px; }
  .logo__name { font-size: 30px; }
}

.nav { display: none; }
.header-actions { display: flex; gap: 8px; align-items: center; }
@media (min-width: 1000px) {
  .nav { display: flex; align-items: center; gap: 4px; }
  .nav a:not(.btn) {
    padding: 14px 11px; text-decoration: none; white-space: nowrap;
    font-size: var(--fs-body-sm); font-weight: var(--fw-bold);
    color: var(--neutral-300); border-bottom: 2px solid transparent;
    transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
  }
  .nav a:not(.btn):hover { color: var(--brand-white); }
  .nav a:not(.btn)[aria-current="page"] { color: var(--brand-white); border-bottom-color: var(--green-350); }
  .nav .btn { margin-left: 8px; white-space: nowrap; }
  .nav .btn .btn__label { white-space: nowrap; }
  .header-actions .icon-btn--call,
  .header-actions .icon-btn--menu { display: none; }
}
.header-actions .icon-btn--call { background: var(--green-500); color: var(--brand-white); }
.header-actions .icon-btn--call:hover { background: var(--green-600); }
.header-actions .icon-btn--menu { color: var(--brand-white); box-shadow: inset 0 0 0 1px var(--neutral-700); }
.header-actions .icon-btn--menu:hover { background: var(--neutral-900); }

/* Mobile menu: an opaque panel, no frosted glass. */
.menu-panel {
  position: fixed; inset: 0; z-index: 60;
  background: var(--neutral-950); color: var(--text-on-dark);
  display: grid; grid-template-rows: auto 1fr auto;
  overflow-y: auto;
}
.menu-panel[hidden] { display: none; }
.menu-panel__head { display: flex; align-items: center; justify-content: space-between; min-height: 72px; border-bottom: 1px solid var(--line-on-dark); }
.menu-panel nav { display: grid; }
.menu-panel nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px var(--gutter); text-decoration: none;
  font-family: var(--font-display); font-variation-settings: "wdth" 82;
  font-weight: var(--fw-black); font-size: var(--fs-h2); letter-spacing: -.02em;
  color: var(--brand-white); border-bottom: 1px solid var(--line-on-dark);
}
.menu-panel nav a:hover { background: var(--neutral-900); color: var(--brand-white); }
.menu-panel nav a[aria-current="page"] { color: var(--green-350); }
.menu-panel__foot { padding: 20px var(--gutter) 32px; display: grid; gap: 12px; }
body.is-locked { overflow: hidden; }

/* --- 12b. THE BASKET ------------------------------------------------------
   The basket has to be visible on every page and in both layouts: a shop that
   hides its basket does not read as a shop. --------------------------------- */
.cart-btn {
  position: relative; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  min-height: var(--touch-min); padding: 0 12px;
  color: var(--brand-white); text-decoration: none;
  font-size: var(--fs-body-sm); font-weight: var(--fw-bold);
  box-shadow: inset 0 0 0 1px var(--neutral-700);
  transition: background-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.cart-btn:hover { background: var(--neutral-900); color: var(--brand-white); box-shadow: inset 0 0 0 1px var(--green-350); }
.cart-btn__label { display: none; }
@media (min-width: 600px) { .cart-btn__label { display: inline; } }
.cart-btn__count {
  min-width: 22px; height: 22px; padding: 0 6px;
  display: grid; place-items: center; border-radius: var(--radius-2);
  background: var(--green-350); color: var(--neutral-950);
  font-size: var(--fs-micro); font-weight: var(--fw-black); line-height: 1;
}

/* The home-page strip, shown only once the basket has something in it. */
.cart-strip {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-block: 16px; border-top: 1px solid var(--line-on-dark);
  color: var(--brand-white);
}
.cart-strip > .icon { color: var(--green-350); flex: none; }
.cart-strip__text { display: grid; gap: 2px; flex: 1; min-width: 160px; }
.cart-strip__text b { font-size: var(--fs-body); }
.cart-strip .price { color: var(--brand-white); }
.cart-strip .price__cur { color: var(--neutral-400); }

/* --- 12c. THE BASKET PAGE ------------------------------------------------- */
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table thead th {
  text-align: left; padding: 0 12px 10px 0; font-size: var(--fs-label);
  font-weight: var(--fw-bold); color: var(--text-muted);
  border-bottom: 1px solid var(--line-strong);
}
.cart-table thead th:nth-child(2), .cart-table thead th:nth-child(3) { text-align: right; }
.cart-table td, .cart-table th[scope="row"] { padding: 16px 12px 16px 0; border-bottom: 1px solid var(--line-hair); vertical-align: middle; }
.cart-table td { text-align: right; }
.cart-table th[scope="row"] { text-align: left; position: relative; padding-left: 16px; }
.cart-table th[scope="row"]::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 6px; background: var(--stream-color); }
.cart-line { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.cart-line__media { flex: none; width: 96px; height: 64px; overflow: hidden; background: var(--neutral-100); }
.cart-line__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__text { display: grid; gap: 2px; min-width: 0; }
.cart-line__text b { font-size: var(--fs-body); font-weight: var(--fw-extrabold); color: var(--text-strong); }
.cart-line__text > span { font-size: var(--fs-body-sm); color: var(--text-muted); }
.cart-line:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (max-width: 599px) { .cart-line__media { display: none; } }

.qty { display: inline-flex; align-items: center; box-shadow: inset 0 0 0 1px var(--line-strong); border-radius: var(--radius-2); }
.qty button {
  width: var(--touch-min); height: var(--touch-min); display: grid; place-items: center;
  color: var(--neutral-700); transition: background-color var(--dur-1) var(--ease);
}
.qty button:hover { background: var(--neutral-100); color: var(--neutral-900); }
.qty__n { min-width: 30px; text-align: center; font-weight: var(--fw-extrabold); font-size: var(--fs-body); }
.cart-remove { color: var(--neutral-500); }
.cart-remove:hover { color: var(--error); background: var(--error-bg); }

/* --- 13. FOOTER ----------------------------------------------------------- */
.site-footer { background: var(--neutral-950); color: var(--text-on-dark); border-top: 1px solid var(--line-on-dark); padding-block: 40px 32px; }
.site-footer__grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .site-footer { padding-block: 56px 40px; } }
.site-footer h2 { font-size: var(--fs-label); font-weight: var(--fw-bold); color: var(--green-350); font-family: var(--font-text); font-variation-settings: "wdth" 100; letter-spacing: 0; }
.site-footer nav { display: grid; gap: 10px; margin-top: 12px; }
.site-footer nav a { font-size: var(--fs-body-sm); color: var(--neutral-300); text-decoration: none; }
.site-footer nav a:hover { color: var(--brand-white); text-decoration: underline; }
.site-footer address { font-style: normal; font-size: var(--fs-body-sm); color: var(--neutral-400); line-height: 1.8; }
.site-footer address a { color: var(--neutral-400); text-decoration: none; }
.site-footer address a:hover { color: var(--brand-white); }
.site-footer__legal {
  margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line-on-dark);
  display: flex; gap: 18px 36px; flex-wrap: wrap; justify-content: space-between; align-items: center;
  font-size: var(--fs-micro); color: var(--neutral-400);
}
.site-footer__legal a { color: var(--neutral-400); text-decoration: none; }
.site-footer__legal a:hover { color: var(--neutral-300); }
/* Three links to three separate destinations, so they are spaced as three
   things and not as one run-on line. */
/* .site-footer nav is a grid of stacked links; this one is a row, so it has
   to out-specify that rule rather than sit under it. */
.site-footer .site-footer__legal-nav { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 10px 30px; margin-top: 0; }
.site-footer__legal-nav a { white-space: nowrap; }
.site-footer__maker { flex: 0 0 auto; }
.site-footer__maker {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--neutral-500);
}
.site-footer__maker img { display: block; width: 16px; height: 15px; }
.site-footer__maker b { color: var(--neutral-300); font-weight: var(--fw-bold); }
.site-footer__maker:hover { color: var(--neutral-400); }
.site-footer__maker:hover b { color: var(--brand-white); }

/* --- 14. CALL BAR. Sticky, 64px, hard shadow, one tap to the phone. ------- */
.call-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--neutral-950); border-top: 2px solid var(--green-350);
  padding: 8px var(--gutter);
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  min-height: var(--bar-call);
}
.call-bar__text { display: grid; gap: 1px; min-width: 0; }
.call-bar__text b { font-size: var(--fs-body-sm); color: var(--brand-white); font-weight: var(--fw-bold); }
.call-bar__text span { font-size: var(--fs-micro); color: var(--neutral-300); }
body.has-callbar { padding-bottom: calc(var(--bar-call) + 16px); }
@media (min-width: 1000px) { .call-bar { display: none; } body.has-callbar { padding-bottom: 0; } }

/* --- 15. FACT STRIP ------------------------------------------------------- */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-on-dark); }
.facts li { padding: 16px 10px; display: grid; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.facts li + li { border-left: 1px solid var(--line-on-dark); }
.facts .icon { color: var(--green-350); }
.facts b {
  font-family: var(--font-display); font-variation-settings: "wdth" 82;
  font-weight: var(--fw-black); font-size: 15px; line-height: 1.06; color: var(--brand-white);
}
@media (min-width: 900px) { .facts b { font-size: var(--fs-h3); } }

/* --- 16. SIZE PICKER (poster numerals in a row) -------------------------- */
.size-picker { display: flex; border-top: 1px solid var(--line-on-dark); border-bottom: 1px solid var(--line-on-dark); }
.size-picker button {
  flex: 1; padding: 14px 2px 12px; display: grid; gap: 3px; place-items: center;
  min-height: var(--touch-min);
  transition: background-color var(--dur-1) var(--ease);
}
.size-picker button + button { border-left: 1px solid var(--line-on-dark); }
.size-picker button[aria-pressed="true"] { background: var(--green-500); }
.size-picker .bignum { color: var(--brand-white); font-size: 32px; }
.size-picker small { font-size: var(--fs-micro); font-weight: var(--fw-extrabold); color: var(--neutral-400); }
.size-picker button[aria-pressed="true"] small { color: rgba(255, 255, 255, .85); }
.size-picker button[disabled] { cursor: not-allowed; }
.size-picker button[disabled] .bignum { color: var(--neutral-700); }
.size-picker button[disabled] small { color: var(--neutral-700); }

/* Light variant, on paper */
.size-picker--light { border-color: var(--line-strong); }
.size-picker--light button + button { border-color: var(--line-strong); }
.size-picker--light small { color: var(--text-muted); }
.size-picker--light .bignum { color: var(--text-strong); }
.size-picker--light button[aria-pressed="true"] .bignum { color: var(--brand-white); }
.size-picker--light button[aria-pressed="true"] small { color: rgba(255, 255, 255, .85); }

/* --- 16b. SIZE CARDS -----------------------------------------------------
   The size chooser: a photograph of the actual container, the price, and the
   one sentence that says what fits. Selection is a 2px ink edge going green,
   never a shadow. ------------------------------------------------------- */
.size-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.size-card {
  position: relative; display: grid; grid-template-rows: auto 1fr; text-align: left;
  background: var(--brand-white); box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: box-shadow var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.size-card:hover { box-shadow: inset 0 0 0 2px var(--neutral-900); }
.size-card[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--green-500); background: var(--green-50); }
.size-card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--neutral-100); }
.size-card__media img { width: 100%; height: 100%; object-fit: cover; }
.size-card__body { padding: 14px 16px 16px; display: grid; gap: 6px; align-content: start; }
.size-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.size-card__head .bignum { font-size: 34px; }
.size-card__dims { font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--text-muted); }
.size-card__cap { font-size: var(--fs-body-sm); line-height: 1.45; color: var(--text-secondary); }
.size-card__check {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px;
  display: grid; place-items: center; border-radius: var(--radius-2);
  background: var(--green-500); color: var(--brand-white); opacity: 0;
  transition: opacity var(--dur-1) var(--ease);
}
.size-card[aria-pressed="true"] .size-card__check { opacity: 1; }

/* Compact: no photo, for the narrow column beside the configurator summary. */
.size-cards--compact { grid-template-columns: 1fr; gap: 0; }
.size-cards--compact .size-card { grid-template-rows: auto; box-shadow: none; border-top: 1px solid var(--line-strong); }
.size-cards--compact .size-card:last-child { border-bottom: 1px solid var(--line-strong); }
.size-cards--compact .size-card__media { display: none; }
.size-cards--compact .size-card[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--green-500); }

/* On the dark ground the cards keep their paper surface — they are the product,
   and the photographs need a light mount. */
.band--dark .size-card, .band--steel .size-card { box-shadow: inset 0 0 0 1px var(--neutral-700); }
.band--dark .size-card:hover, .band--steel .size-card:hover { box-shadow: inset 0 0 0 2px var(--green-350); }

/* --- 17. SIZE COMPARISON. The one conspicuous moment in the whole system. -- */
/* --ppm is pixels per metre: the comparison is drawn at true scale, and the
   scale itself grows with the viewport so the reference car always fits.
   Container and car share that grid, and the car is drawn on top of the
   container — the only way a length difference reads as a length difference. */
.size-compare { display: grid; gap: 14px; --ppm: 30; }
@media (min-width: 600px) { .size-compare { --ppm: 44; } }
@media (min-width: 900px) { .size-compare { --ppm: 54; } }
.size-compare__track { height: calc(2.4 * var(--ppm) * 1px + 22px); }
.size-compare__stage {
  position: relative; overflow-x: auto; overflow-y: hidden;
  padding: 22px 0 8px;
  border-bottom: 2px solid var(--neutral-700);
}
.band--paper .size-compare__stage, .band--sunken .size-compare__stage { border-bottom-color: var(--neutral-300); }
.size-compare__track { position: relative; display: flex; align-items: flex-end; min-width: min-content; isolation: isolate; }

/* The container silhouette. It carries the chamfer because it literally is
   a container — the only place besides the primary button. */
.size-compare__box {
  position: relative; flex: none;
  width: calc(var(--len) * var(--ppm) * 1px);
  height: calc(var(--hgt) * var(--ppm) * 1px);
  background: var(--green-500);
  clip-path: var(--clip-chamfer);
  transition: width var(--dur-morph) var(--ease), height var(--dur-morph) var(--ease);
}
.size-compare__maat {
  position: absolute; right: 14px; bottom: 8px;
  font-family: var(--font-display); font-variation-settings: "wdth" 82;
  font-weight: var(--fw-black); font-size: var(--fs-body-sm); color: var(--brand-white);
  letter-spacing: -.02em;
}

/* The car, laid over the container at the same scale and off the same left
   edge, so the two lengths are read against one another directly. It is an
   outline and not a fill: the container has to stay the object being measured. */
.size-compare__car {
  position: absolute; left: 0; bottom: 0; z-index: 1;
  width: calc(var(--len) * var(--ppm) * 1px);
  height: calc(var(--hgt) * var(--ppm) * 1px);
  pointer-events: none;
}
.size-compare__car-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  color: var(--brand-white); opacity: .95;
  filter: drop-shadow(0 1px 2px rgba(10, 14, 17, .5));
}
.size-compare__car-label {
  position: absolute; left: 2px; bottom: calc(100% + 5px);
  white-space: nowrap;
  font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--brand-white);
}
.band--paper .size-compare__car-label,
.band--sunken .size-compare__car-label { color: var(--neutral-800); }

.size-compare__legend { display: flex; gap: 20px; flex-wrap: wrap; font-size: var(--fs-body-sm); }
.size-compare__legend b { font-weight: var(--fw-extrabold); }
.size-compare__legend-ref { color: var(--text-on-dark-muted); }
.band--paper .size-compare__legend-ref, .band--sunken .size-compare__legend-ref { color: var(--text-muted); }

/* --- 18. SPEC ROWS -------------------------------------------------------- */
.specs { display: grid; }
.specs li { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; padding: 13px 0; }
.specs li + li { border-top: 1px solid var(--line-hair); }
.specs .icon { color: var(--neutral-400); }
.specs dt, .specs__key { font-size: var(--fs-body-sm); color: var(--text-muted); }
.specs dd, .specs__val { font-size: 15px; font-weight: var(--fw-extrabold); color: var(--text-strong); margin: 0; }
.band--dark .specs, .band--steel .specs, .card--dark .specs, .menu-panel .specs { --line-hair: var(--neutral-800); }
.band--dark .specs dt, .band--dark .specs .specs__key,
.band--steel .specs dt, .band--steel .specs .specs__key,
.card--dark .specs dt, .card--dark .specs .specs__key { color: var(--neutral-400); }
.band--dark .specs dd, .band--dark .specs .specs__val,
.band--steel .specs dd, .band--steel .specs .specs__val,
.card--dark .specs dd, .card--dark .specs .specs__val { color: var(--brand-white); }
.card--dark p, .card--dark .small { color: var(--text-on-dark); }
.band--dark .specs .icon, .band--steel .specs .icon, .card--dark .specs .icon { color: var(--neutral-400); }

/* --- 19. ALLOW LIST ------------------------------------------------------- */
.allow { display: grid; gap: 24px; }
@media (min-width: 600px) { .allow { grid-template-columns: 1fr 1fr; } }
.allow h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.allow ul { display: grid; gap: 9px; }
.allow li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: var(--fs-body-sm); line-height: 1.5; }
.allow--yes h3 .icon, .allow--yes li .icon { color: var(--green-600); }
.allow--no h3 .icon, .allow--no li .icon { color: var(--error); }
.allow li .icon { margin-top: 2px; }
.allow__note {
  grid-column: 1 / -1; padding: 14px 16px;
  background: var(--amber-50); box-shadow: inset 0 0 0 1px var(--amber-300);
  font-size: var(--fs-body-sm); line-height: 1.55; color: var(--neutral-900);
  display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start;
}
.allow__note .icon { color: var(--amber-700); margin-top: 2px; }

/* --- 20. PRICE TABLE -----------------------------------------------------
   At 320px this scrolls sideways under a fixed stream column.
   No accordion, no card-per-row. ------------------------------------------ */
.price-table__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.price-table { border-collapse: collapse; width: 100%; min-width: 520px; }
.price-table th, .price-table td, .cart-table th, .cart-table td { position: relative; }
.price-table th, .price-table td { padding: 14px 12px; text-align: right; border-bottom: 1px solid var(--line-hair); border-radius: var(--radius-0); }
.price-table thead th { font-size: var(--fs-label); font-weight: var(--fw-bold); color: var(--text-muted); border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.price-table th[scope="row"] {
  position: sticky; left: 0; z-index: 1; text-align: left;
  background: var(--brand-white); min-width: 168px;
  box-shadow: 1px 0 0 var(--line-hair);
}
.price-table thead th:first-child { position: sticky; left: 0; z-index: 2; background: var(--brand-white); text-align: left; box-shadow: 1px 0 0 var(--line-strong); }
.price-table__stream { display: flex; align-items: center; gap: 10px; min-height: var(--touch-min); }
.price-table__stream .icon { color: var(--stream-ink); }
.price-table__stream b { font-size: var(--fs-body-sm); font-weight: var(--fw-extrabold); color: var(--text-strong); }
.price-table td .price { font-size: var(--fs-price-row); }
.price-table td[data-empty] { color: var(--text-muted); font-size: var(--fs-body-sm); }
.price-table td[data-quote] { color: var(--text-signal); font-weight: var(--fw-extrabold); font-size: var(--fs-body-sm); }
.price-table tr[data-highlight] td, .price-table tr[data-highlight] th { background: var(--green-50); }
.price-table tr[data-highlight] th[scope="row"] { background: var(--green-50); }
.price-table a { text-decoration: none; }
.price-table tbody tr:hover td, .price-table tbody tr:hover th[scope="row"] { background: var(--neutral-50); }

/* --- 21. FORMS ------------------------------------------------------------ */
.field { display: grid; gap: 6px; }
.field > label, .field__label { font-size: var(--fs-label); font-weight: var(--fw-bold); color: var(--text-strong); }
.field__hint, .field__msg {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: var(--fs-micro); line-height: 1.4; color: var(--text-muted);
  /* Reserve one line so an error message replaces the hint instead of pushing
     every field below it down the page. The error line carries a 16px icon,
     so the slot has to be a shade taller than the text alone. */
  min-height: 18px;
}
.field__msg .icon { flex: none; margin-top: 1px; }
.field__msg--error { color: var(--error); font-weight: var(--fw-bold); }

.input, .select, .textarea {
  width: 100%; min-height: var(--touch-min);
  padding: 11px 12px;
  background: var(--brand-white); color: var(--text-strong);
  border: 0; border-radius: var(--radius-4);
  box-shadow: inset 0 0 0 1px var(--neutral-300);
  font-size: var(--fs-body);
  transition: box-shadow var(--dur-1) var(--ease);
}
.textarea { min-height: 112px; resize: vertical; line-height: 1.55; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%233D444A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  padding-right: 40px;
}
.input:hover, .select:hover, .textarea:hover { box-shadow: inset 0 0 0 1px var(--neutral-500); }
.input::placeholder, .textarea::placeholder { color: var(--text-disabled); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--error); background: var(--error-bg); }
.input[disabled], .select[disabled], .textarea[disabled] { background: var(--neutral-100); color: var(--neutral-400); cursor: not-allowed; }

/* Checkbox and radio: 2px box, ink tick, no custom animation beyond 120ms. */
.check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; cursor: pointer; padding: 10px 0; min-height: var(--touch-min); }
.check input { appearance: none; width: 22px; height: 22px; margin: 0; flex: none; background: var(--brand-white); box-shadow: inset 0 0 0 2px var(--neutral-500); border-radius: var(--radius-2); cursor: pointer; transition: background-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.check input[type="radio"] { border-radius: var(--radius-dot); }
.check input:checked { background: var(--green-500); box-shadow: inset 0 0 0 2px var(--green-500); }
.check input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpath d='M5 11.5l4.2 4.2L17 7.5'/%3E%3C/svg%3E"); }
.check input[type="radio"]:checked { background-image: radial-gradient(circle, #fff 0 32%, transparent 34%); }
.check__text { display: grid; gap: 2px; }
.check__text b { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--text-strong); }
.check__text span { font-size: var(--fs-body-sm); color: var(--text-muted); }

/* A whole tile that acts as a radio. */
.tile-radio { position: relative; display: block; cursor: pointer; height: 100%; }
.tile-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.tile-radio__box { position: relative; height: 100%; background: var(--brand-white); box-shadow: inset 0 0 0 1px var(--line-strong); padding: 14px 16px; display: grid; gap: 6px; align-content: start; transition: box-shadow var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease); }
.tile-radio:hover .tile-radio__box { box-shadow: inset 0 0 0 2px var(--neutral-900); }
.tile-radio input:checked + .tile-radio__box { box-shadow: inset 0 0 0 2px var(--green-500); background: var(--green-50); }
.tile-radio input:focus-visible + .tile-radio__box { box-shadow: var(--focus-ring); }

.fieldset-grid { display: grid; gap: 12px; }
@media (min-width: 600px) { .fieldset-grid--2 { grid-template-columns: 1fr 1fr; } }

/* --- 22. STEPPER ---------------------------------------------------------- */
.stepper { display: flex; gap: 4px; }
.stepper li { flex: 1; min-width: 0; display: grid; gap: 6px; font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--neutral-400); }
.stepper li::before { content: ""; display: block; height: 4px; background: var(--neutral-700); }
.stepper li[data-state="done"]::before { background: var(--green-500); }
.stepper li[data-state="current"]::before { background: var(--green-350); }
.stepper li[data-state="current"] { color: var(--brand-white); }
.stepper li[data-state="done"] { color: var(--neutral-400); }
.stepper--light li { color: var(--text-muted); }
.stepper--light li::before { background: var(--neutral-200); }
.stepper--light li[data-state="current"] { color: var(--neutral-900); }
.stepper--light li[data-state="current"]::before { background: var(--green-500); }

/* --- 23. RESULT / BLOCK PANELS ------------------------------------------- */
/* The blocking screen is amber, not red: the customer did nothing wrong.
   It carries its own inset, so text never touches the amber edge. A panel that
   runs the full width of the page holds a .wrap of its own and takes the
   --breed modifier instead, otherwise the two gutters stack. */
.panel-block {
  background: var(--amber-500); color: var(--neutral-900);
  padding: 24px; display: grid; gap: 14px;
}
@media (min-width: 600px) { .panel-block { padding: 28px 32px 30px; } }
.panel-block--breed { padding-inline: 0; }
.panel-block h2 { display: flex; align-items: center; gap: 10px; color: var(--neutral-900); }
.panel-ok { background: var(--green-50); box-shadow: inset 0 0 0 1px var(--green-300); padding: 16px; display: grid; gap: 10px; }
.panel-note { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--green-50); box-shadow: inset 0 0 0 1px var(--green-300); font-size: var(--fs-body-sm); }
.panel-note .icon { color: var(--green-600); flex: none; }

/* --- 23b. CONFIGURATOR LAYOUT --------------------------------------------
   The summary is a card, not a bar. It never covers the step it belongs to. */
.cfg-stepper {
  position: sticky; top: 72px; z-index: 20;
  background: var(--neutral-950); color: var(--text-on-dark);
  padding-block: 14px; border-bottom: 1px solid var(--line-on-dark);
}
@media (min-width: 1000px) { .cfg-stepper { top: 88px; } }

.cfg-grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .cfg-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; } }
.cfg-main { min-width: 0; }
.cfg-side { display: grid; gap: 16px; align-content: start; }
@media (min-width: 900px) { .cfg-side { position: sticky; top: 168px; } }
.cfg-side__note {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start;
  padding: 14px 16px; background: var(--green-50);
  box-shadow: inset 0 0 0 1px var(--green-300);
  font-size: var(--fs-body-sm); line-height: 1.5; color: var(--neutral-900);
}
.cfg-side__note .icon { color: var(--green-600); margin-top: 2px; }

/* --- 23c. TRANSPORTZONE — DE UITSLAG -------------------------------------
   Wat de klant te zien krijgt zodra hij een adres heeft ingetikt: in welke ring
   hij valt en wat het transport daar kost. Vier toestanden, vier kleuren, en
   geen ervan is rood — er is niets misgegaan.

   Gratis is groen en mag domineren: het is het beste nieuws op de pagina.
   Een toeslag is amber, want amber betekent hier iets. Te ver is óók amber,
   maar met een telefoonnummer erbij in plaats van een bedrag. */
.zone-blok { display: grid; gap: 10px; }
.zone-uitslag {
  display: grid; grid-template-columns: 24px minmax(0, 1fr);
  gap: 14px; align-items: start;
  padding: 16px; background: var(--neutral-100);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--neutral-900);
}
.zone-uitslag > .icon { color: var(--text-muted); margin-top: 2px; flex: none; }
.zone-uitslag__tekst { display: grid; gap: 4px; justify-items: start; }
.zone-uitslag__tekst > b {
  font-family: var(--font-display); font-variation-settings: 'wdth' 87.5;
  font-weight: 800; font-size: var(--fs-body-lg); line-height: 1.2;
  letter-spacing: -.01em; text-wrap: balance;
}
.zone-uitslag__tekst > span { font-size: var(--fs-body-sm); line-height: 1.5; color: var(--text-secondary); }
.zone-uitslag__tekst > .btn { margin-top: 8px; }
/* De prijs voorop en groot: het is de enige prijs die de klant nog niet kende.
   De selector moet even zwaar wegen als de regel voor de uitlegzin hierboven,
   anders wint die en staat het bedrag in de tekstgrootte van een voetnoot. */
.zone-uitslag__tekst > .zone-uitslag__bedrag {
  font-family: var(--font-display); font-variation-settings: 'wdth' 87.5;
  font-weight: 900; font-size: var(--fs-price-card); line-height: .95;
  letter-spacing: -.02em; white-space: nowrap; margin-bottom: 2px;
}

.zone-uitslag[data-status="gratis"] {
  background: var(--green-50); box-shadow: inset 0 0 0 2px var(--green-500);
}
.zone-uitslag[data-status="gratis"] > .icon,
.zone-uitslag[data-status="gratis"] .zone-uitslag__bedrag { color: var(--green-600); }

.zone-uitslag[data-status="toeslag"],
.zone-uitslag[data-status="aanvraag"] {
  background: var(--amber-50); box-shadow: inset 0 0 0 2px var(--amber-500);
}
.zone-uitslag[data-status="toeslag"] > .icon,
.zone-uitslag[data-status="aanvraag"] > .icon,
.zone-uitslag[data-status="toeslag"] .zone-uitslag__bedrag { color: var(--amber-700); }

.zone-uitslag[data-status="onbekend"] { background: var(--neutral-50); }

/* Het zoekveld op het winkelmandje: één regel, want er hoort maar één vraag
   bij ("waar moet hij komen?"). Het echte leveradres wordt pas aan de kassa
   gevraagd. */
.zone-zoek { display: grid; gap: 6px; }
.zone-zoek .combo__input { padding-left: 42px; }

/* --- 23d. STAPNAVIGATIE ---------------------------------------------------
   Terug en verder staan onderaan de stap zelf, niet alleen in de kolom ernaast.
   Op een telefoon staat die kolom onder de stap, en dan is "verder" precies wat
   niemand vindt. */
.step-nav {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-top: 4px; padding-top: 20px; border-top: 1px solid var(--line-hair);
}
.step-nav__verder { flex: 1 1 220px; }
.step-nav__terug { flex: 0 0 auto; order: -1; }
@media (max-width: 520px) {
  .step-nav { flex-direction: column-reverse; align-items: stretch; }
  /* De hoofdas staat nu verticaal, dus flex-basis zou de hóógte worden. */
  .step-nav__verder, .step-nav__terug { flex: 0 0 auto; }
  .step-nav .btn { width: 100%; justify-content: center; }
}

/* --- 25. COOKIE BANNER ---------------------------------------------------- */
.cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--neutral-900); color: var(--text-on-dark);
  border-top: 2px solid var(--green-350);
  padding: 18px var(--gutter);
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
}
.cookie[hidden] { display: none; }
.cookie__inner { display: grid; gap: 14px; max-width: var(--content-max); margin-inline: auto; }
@media (min-width: 900px) { .cookie__inner { grid-template-columns: 1fr auto; align-items: center; gap: 24px; } }
.cookie p { font-size: var(--fs-body-sm); color: var(--neutral-300); }
.cookie a { color: var(--green-350); }

/* --- 26. SERVICE AREA ----------------------------------------------------- */
.service-area { display: grid; gap: 16px; }
.gemeente-list { display: flex; flex-wrap: wrap; gap: 8px; }
.gemeente-list a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; min-height: 40px;
  font-size: var(--fs-body-sm); font-weight: var(--fw-bold); text-decoration: none;
  color: var(--text-strong); background: var(--brand-white);
  box-shadow: inset 0 0 0 1px var(--line-strong); border-radius: var(--radius-2);
  transition: box-shadow var(--dur-1) var(--ease);
}
.gemeente-list a:hover { box-shadow: inset 0 0 0 2px var(--neutral-900); color: var(--text-strong); }
.band--dark .gemeente-list a, .band--steel .gemeente-list a {
  background: transparent; color: var(--brand-white); box-shadow: inset 0 0 0 1px var(--neutral-700);
}
.band--dark .gemeente-list a:hover { box-shadow: inset 0 0 0 2px var(--green-350); color: var(--brand-white); }

/* --- 27. QUOTE ------------------------------------------------------------ */
.quote { display: grid; gap: 14px; }
.quote p {
  font-family: var(--font-display); font-variation-settings: "wdth" 85;
  font-weight: var(--fw-extrabold); font-size: var(--fs-h2); line-height: 1.22;
  letter-spacing: -.02em; color: var(--text-strong); text-wrap: pretty;
}
.band--dark .quote p { color: var(--brand-white); }
.quote footer { display: flex; align-items: center; gap: 10px; font-size: var(--fs-body-sm); color: var(--text-muted); font-weight: var(--fw-bold); }
.quote footer::before { content: ""; width: 24px; height: 2px; background: var(--green-500); flex: none; }

/* --- 28. SERVICE ROWS (full-bleed list with a photo) --------------------- */
.service-rows { display: grid; }
.service-row {
  display: grid; grid-template-columns: 112px 1fr; gap: 14px;
  align-items: stretch; text-decoration: none; color: inherit;
  border-top: 1px solid var(--line-hair);
  transition: background-color var(--dur-1) var(--ease);
}
.service-rows > :last-child { border-bottom: 1px solid var(--line-hair); }
.service-row:hover { background: var(--neutral-50); color: inherit; }
.service-row img { width: 112px; height: 106px; object-fit: cover; }
.service-row__body { padding: 14px 16px 14px 0; display: grid; gap: 5px; align-content: center; min-width: 0; }
.service-row__title { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; font-family: var(--font-display); font-variation-settings: "wdth" 82; font-weight: var(--fw-black); font-size: var(--fs-h3); letter-spacing: -.02em; color: var(--text-strong); }
.service-row__title .icon { color: var(--green-600); }
@media (min-width: 900px) {
  /* Four services, so two by two — three across would leave one card alone. */
  .service-rows { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .service-row { grid-template-columns: 1fr; border-top: 0; box-shadow: inset 0 0 0 1px var(--line-strong); }
  .service-rows > :last-child { border-bottom: 0; }
  .service-row:hover { background: var(--brand-white); box-shadow: inset 0 0 0 2px var(--neutral-900); }
  .service-row img { width: 100%; height: 220px; }
  .service-row__body { padding: 16px; }
}

/* --- 29. FAQ (native disclosure, 200ms, no library) ---------------------- */
.faq { display: grid; }
.faq details { border-top: 1px solid var(--line-hair); }
.faq details:last-of-type { border-bottom: 1px solid var(--line-hair); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-variation-settings: "wdth" 87.5;
  font-weight: var(--fw-extrabold); font-size: var(--fs-body-lg); color: var(--text-strong);
  min-height: var(--touch-min);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--green-600); transition: transform var(--dur-2) var(--ease); flex: none; }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq__body { padding-bottom: 18px; max-width: var(--measure); color: var(--text-secondary); display: grid; gap: 10px; }

/* --- 30. UTILITIES -------------------------------------------------------- */
.bleed-media { position: relative; }
.bleed-media > picture, .bleed-media > picture img { display: block; width: 100%; }
@media (min-width: 900px) {
  .bleed-media > picture img { max-height: 58vh; object-fit: cover; }
}
.bleed-media img { width: 100%; display: block; }
.bleed-media__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 14, 17, .25) 0%, rgba(10, 14, 17, .55) 45%, #0A0E11 100%); }
.pull-up { position: relative; margin-top: -96px; }
@media (min-width: 900px) { .pull-up { margin-top: -140px; } }

/* Product head without a photo. The container renders on the size cards are
   the sharp pictures on this page; the stream photo was a 960px file stretched
   across a 1400px viewport, so it is gone and the head is shorter for it. The
   stream colour carries the identity instead. */
.stroomkop { position: relative; padding-block: 22px 26px; }
/* The stream colours are mixed for white paper — gemengd is nearly the colour
   of the dark band itself — so the rule is lifted towards white to stay
   readable here. The fallback is the brand green where color-mix is missing. */
.stroomkop::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: var(--green-500);
  background: color-mix(in srgb, var(--stream-color, var(--green-500)) 55%, #FFFFFF);
}
/* The price and the two buttons keep the same measure as the homepage hero;
   a full-width button across 1280px reads as a banner, not as a control. */
.stroomkop__aanbod { max-width: 560px; }
@media (min-width: 900px) { .stroomkop { padding-block: 30px 34px; } }

.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.text-center { text-align: center; }
.mt-auto { margin-top: auto; }
.nowrap { white-space: nowrap; }

/* --- 31. PRICES WITH OR WITHOUT VAT --------------------------------------
   Every catalogue price is written into the page twice. These four rules pick
   which of the two is painted; nothing is fetched and nothing is recalculated,
   so the switch is instant and there is no flash on the next page (the choice
   is put back on <html> by four lines in the head).

   .btw-vast is the opposite: the basket, the five-step order and the
   confirmation carry it, and it pins them to the amount that is actually
   charged no matter what the customer switched the catalogue to. ---------- */
.btw-excl { display: none; }
:root[data-btw="excl"] .btw-incl { display: none; }
:root[data-btw="excl"] .btw-excl { display: inline; }
.btw-vast .btw-excl { display: none !important; }
.btw-vast .btw-incl { display: inline !important; }

.btw-toggle {
  display: grid; gap: 8px;
  grid-template-columns: auto auto; align-items: center;
  justify-content: start;
  padding: 12px 14px; background: var(--neutral-50);
  box-shadow: inset 0 0 0 1px var(--line-hair);
}
.btw-toggle__label { font-size: var(--fs-label); font-weight: var(--fw-bold); color: var(--text-strong); }
.btw-toggle__set { display: inline-flex; box-shadow: inset 0 0 0 1px var(--line-strong); border-radius: var(--radius-2); overflow: hidden; }
.btw-toggle__set button {
  appearance: none; border: 0; cursor: pointer;
  min-height: 40px; padding: 0 14px;
  background: var(--brand-white); color: var(--text-secondary);
  font: inherit; font-size: var(--fs-body-sm); font-weight: var(--fw-bold);
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.btw-toggle__set button + button { box-shadow: inset 1px 0 0 var(--line-strong); }
.btw-toggle__set button:hover { background: var(--neutral-100); color: var(--text-strong); }
.btw-toggle__set button[aria-pressed="true"] { background: var(--green-500); color: var(--brand-white); box-shadow: none; }
.btw-toggle__note { grid-column: 1 / -1; font-size: var(--fs-micro); line-height: 1.4; color: var(--text-muted); }
@media (min-width: 700px) {
  .btw-toggle { grid-template-columns: auto auto 1fr; }
  .btw-toggle__note { grid-column: auto; text-align: right; }
}
.band--dark .btw-toggle, .band--steel .btw-toggle {
  background: transparent; box-shadow: inset 0 0 0 1px var(--line-on-dark);
}
.band--dark .btw-toggle__label, .band--steel .btw-toggle__label { color: var(--brand-white); }
.band--dark .btw-toggle__note, .band--steel .btw-toggle__note { color: var(--text-on-dark-muted); }
.band--dark .btw-toggle__set, .band--steel .btw-toggle__set { box-shadow: inset 0 0 0 1px var(--neutral-700); }
.band--dark .btw-toggle__set button, .band--steel .btw-toggle__set button { background: transparent; color: var(--text-on-dark-muted); }
.band--dark .btw-toggle__set button:hover, .band--steel .btw-toggle__set button:hover { background: rgba(255, 255, 255, .1); color: var(--brand-white); }
.band--dark .btw-toggle__set button[aria-pressed="true"], .band--steel .btw-toggle__set button[aria-pressed="true"] { background: var(--green-500); color: var(--brand-white); }

.size-card__prijs { display: grid; gap: 2px; justify-items: end; text-align: right; }

/* --- Shop variant of the size card ---------------------------------------
   On a product page the card is a product, not a choice: it does not press in,
   it does not carry a tick, and it puts its own size in the basket. Selection
   state would be a lie here — there is nothing to select. */
.size-cards--shop { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.size-card--shop {
  display: grid; grid-template-rows: auto 1fr; text-align: left;
  background: var(--brand-white); box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: box-shadow var(--dur-1) var(--ease);
}
.size-card--shop:hover { box-shadow: inset 0 0 0 1px var(--neutral-900); }
.size-card--shop .size-card__body { display: grid; gap: 8px; align-content: start; }
.size-card__acties {
  display: grid; gap: 8px; margin-top: auto; padding-top: 12px;
}
/* Second, quieter action: it moves the comparison further down the page to
   this size. It is a link in behaviour, so it looks like one. */
.size-card__bekijk {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 8px; min-height: 44px; background: transparent; color: var(--text-muted);
  font-size: var(--fs-body-sm); font-weight: var(--fw-bold);
}
.size-card__bekijk:hover { color: var(--text-strong); text-decoration: underline; }
.band--dark .size-card--shop, .band--steel .size-card--shop { box-shadow: inset 0 0 0 1px var(--neutral-700); }
.band--dark .size-card--shop:hover, .band--steel .size-card--shop:hover { box-shadow: inset 0 0 0 1px var(--green-350); }

/* "vanaf" in front of a hero price, so the figure is not read as the only one. */
.price-vanaf {
  align-self: flex-end; margin-right: 8px; padding-bottom: 10px;
  font-size: var(--fs-body-sm); font-weight: var(--fw-bold); color: var(--text-on-dark-muted);
}
.stream-card__btw { width: 100%; }

/* --- 32. ADDRESS LOOKUP ---------------------------------------------------
   The list is a plain listbox under the field. No portal, no library: it is a
   <ul> in the same stacking context, absolutely positioned, and it closes on
   blur, on Escape and on choosing something. ----------------------------- */
.adres { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; min-width: 0; }
.adres__legend {
  padding: 0; font-size: var(--fs-label); font-weight: var(--fw-bold);
  color: var(--text-muted); text-transform: none;
}
.combo { position: relative; display: block; }
.combo__icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-faint); pointer-events: none;
}
.combo__input { padding-left: 42px; }
.combo__input:disabled { padding-left: 12px; }
.combo__input:disabled + .combo__list { display: none; }
.combo__list {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  margin: 0; padding: 4px; list-style: none;
  max-height: 280px; overflow-y: auto;
  background: var(--brand-white);
  box-shadow: var(--shadow-overlay), inset 0 0 0 1px var(--line-strong);
  border-radius: var(--radius-4);
}
.combo__list li {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--touch-min); padding: 8px 10px;
  font-size: var(--fs-body-sm); color: var(--text-strong); cursor: pointer;
  border-radius: var(--radius-2);
}
.combo__list li .icon { color: var(--text-faint); flex: none; }
.combo__list li:hover, .combo__list li[aria-selected="true"] { background: var(--green-50); }
.combo__list li[aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--green-500); }

/* --- 33. PAYMENT METHOD --------------------------------------------------
   Same shape as the stream tiles on step one, because it is the same kind of
   decision: three named things, one of which you pick. -------------------- */
.pay-options { display: grid; gap: 10px; }
.pay-option { position: relative; display: block; cursor: pointer; }
.pay-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.pay-option__box {
  display: grid; gap: 6px; padding: 14px 16px;
  background: var(--brand-white); box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: box-shadow var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.pay-option:hover .pay-option__box { box-shadow: inset 0 0 0 2px var(--neutral-900); }
.pay-option input:checked + .pay-option__box { box-shadow: inset 0 0 0 2px var(--green-500); background: var(--green-50); }
.pay-option input:focus-visible + .pay-option__box { box-shadow: var(--focus-ring); }
.pay-option__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pay-option__head .icon { color: var(--green-600); flex: none; }
.pay-option__head b { font-size: var(--fs-body-lg); font-weight: var(--fw-extrabold); color: var(--text-strong); }
.pay-option__uitleg { font-size: var(--fs-body-sm); line-height: 1.5; color: var(--text-muted); }
.pay-blok { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px; }
.pay-blok .icon { flex: none; }

/* The add-to-basket button that sits under the size cards, so nobody has to
   scroll back up to the hero after choosing a size down here. */
.size-cta { display: grid; gap: 10px; align-items: center; }
.size-cta .small { max-width: var(--measure); }
@media (min-width: 700px) { .size-cta { grid-template-columns: auto 1fr; gap: 18px; } }

/* --- 34. THE SERVICE AREA MAP --------------------------------------------
   A drawing of where we drive, not a map widget: no tiles, no library, no
   external request, nothing to consent to. Below 720px the twenty-two labels
   would be a smudge, so they go and the list underneath carries the names. -- */
.service-map { margin: 0; display: grid; gap: 12px; }
.service-map__canvas {
  width: 100%; height: 440px; min-height: 300px;
  background: var(--neutral-900);
  position: relative; z-index: 0;
}
@media (max-width: 719px) { .service-map__canvas { height: 340px; } }

/* Before Leaflet arrives — and if it never does — the box says what it is
   rather than sitting there as an empty grey rectangle. */
.service-map__placeholder {
  position: absolute; inset: 0; margin: 0;
  display: grid; place-items: center;
  font-size: var(--fs-body-sm); color: var(--text-on-dark-muted);
}
.service-map__canvas.is-live .service-map__placeholder { display: none; }

/* Leaflet chrome, brought into the system: square corners, our ink, our type.
   Nothing here is a rounded card. */
.service-map__canvas.leaflet-container { background: var(--neutral-900); font-family: var(--font-text); }
.service-map__canvas .leaflet-control-zoom a {
  border-radius: 0; background: var(--neutral-950); color: var(--brand-white);
  border-color: var(--neutral-700); font-weight: var(--fw-bold);
}
.service-map__canvas .leaflet-control-zoom a:hover { background: var(--neutral-800); color: var(--brand-white); }
.service-map__canvas .leaflet-bar { border: 0; box-shadow: 0 0 0 1px var(--neutral-700); }
.service-map__canvas .leaflet-popup-content-wrapper,
.service-map__canvas .leaflet-popup-tip { border-radius: 0; background: var(--brand-white); color: var(--text-strong); }
.service-map__canvas .leaflet-popup-content { font-size: var(--fs-body-sm); line-height: 1.5; margin: 12px 14px; }
.service-map__canvas .leaflet-popup-content a { color: var(--green-600); font-weight: var(--fw-bold); }
.service-map__canvas .leaflet-tooltip {
  border-radius: 0; border: 0; background: var(--neutral-950); color: var(--brand-white);
  font-size: var(--fs-micro); font-weight: var(--fw-bold); box-shadow: none;
}
.service-map__canvas .leaflet-tooltip-top::before { border-top-color: var(--neutral-950); }
.service-map__canvas .leaflet-control-attribution {
  background: rgba(10, 14, 17, .72); color: var(--neutral-400); font-size: 10px;
}
.service-map__canvas .leaflet-control-attribution a { color: var(--neutral-300); }
.service-map__caption { font-size: var(--fs-body-sm); line-height: 1.5; color: var(--text-on-dark-muted); }

/* The full list of everywhere we go, with the deelgemeenten spelled out —
   because "Beringen" does not tell somebody in Koersel that we come there. */
.gemeente-grid { display: grid; gap: 2px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .gemeente-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .gemeente-grid { grid-template-columns: repeat(3, 1fr); } }
.gemeente-cel {
  display: grid; gap: 2px; padding: 12px 14px; min-height: 56px;
  text-decoration: none; color: var(--brand-white);
  box-shadow: inset 0 0 0 1px var(--line-on-dark);
  transition: box-shadow var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.band--dark a.gemeente-cel, .band--steel a.gemeente-cel { color: var(--brand-white); }
.gemeente-cel:hover, .band--dark a.gemeente-cel:hover { background: var(--neutral-900); box-shadow: inset 0 0 0 2px var(--green-350); color: var(--brand-white); }
.gemeente-cel__naam { display: flex; align-items: center; gap: 8px; font-size: var(--fs-body); font-weight: var(--fw-bold); }
.gemeente-cel__naam .icon { color: var(--green-350); flex: none; }
.gemeente-cel__km { margin-left: auto; font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--neutral-300); }
.gemeente-cel__deel { font-size: var(--fs-micro); line-height: 1.4; color: var(--neutral-300); }

/* ============================================================================
   ACCEPTATIEVOORWAARDEN
   De harde grenzen van een stroom, wat nergens in mag, en de losse extra's.
   Alles op de bestaande tokens — geen nieuwe kleur, geen nieuwe schaal.
   ========================================================================== */

/* De cijfers die een lading kunnen afkeuren: "maximaal 10% grond", "takken tot
   10 cm". Het getal domineert, want dat is wat iemand aan de container
   onthoudt. */
.grenzen { display: flex; flex-wrap: wrap; gap: 2px; }
.grenzen li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 14px; background: var(--amber-50);
  box-shadow: inset 0 0 0 1px var(--amber-200);
  font-size: var(--fs-body-sm); line-height: 1.4; color: var(--neutral-900);
}
.grenzen b {
  font-family: var(--font-display); font-variation-settings: 'wdth' 87.5;
  font-weight: var(--fw-black); font-size: var(--fs-h3); letter-spacing: -.02em;
  color: var(--amber-800); white-space: nowrap;
}
.grenzen b span { font-size: var(--fs-label); font-weight: var(--fw-bold); margin-left: 2px; }
.band--dark .grenzen li, .band--steel .grenzen li {
  background: transparent; box-shadow: inset 0 0 0 1px var(--amber-700); color: var(--brand-white);
}
.band--dark .grenzen b, .band--steel .grenzen b { color: var(--amber-300); }

/* Wat in geen enkele container mag. Eén keer per pagina, nooit per stroom
   herhaald — anders leest niemand het nog. */
.nooit { padding: 20px; background: var(--neutral-50); box-shadow: inset 0 0 0 1px var(--line-strong); }
.nooit h3 { display: flex; align-items: center; gap: 8px; }
.nooit h3 .icon { color: var(--amber-600); }
.nooit > p { margin-top: 6px; }
.nooit ul {
  display: grid; gap: 9px; margin-top: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .nooit ul { grid-template-columns: 1fr 1fr; } }
.nooit li {
  display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start;
  font-size: var(--fs-body-sm); line-height: 1.5;
}
.nooit li .icon { color: var(--error); margin-top: 2px; }
.nooit > p:last-child { margin-top: 14px; }
.band--dark .nooit, .band--steel .nooit {
  background: transparent; box-shadow: inset 0 0 0 1px var(--line-on-dark); color: var(--brand-white);
}

/* Een intro boven een acceptatielijst: groter dan body, kleiner dan .lead. */
.lead-sm { font-size: var(--fs-body-lg); line-height: 1.55; color: var(--text-secondary); max-width: 62ch; }
.band--dark .lead-sm, .band--steel .lead-sm { color: var(--neutral-300); }

/* --- Extra opties ----------------------------------------------------------
   Een liggende kaart: de foto links op ware verhouding, de tekst rechts, de
   twee prijzen en de knop eronder.

   Twee kaarten naast elkaar ging niet samen met een foto die heel moet
   blijven. Een kaart van 600 px breed is ongeveer 260 px hoog, en 46% daarvan
   is een beeldvak van 267 × 263 — bijna vierkant. Een liggende foto van 3:2
   werd daar tot een strook in geperst: van de rijplaten zag u nog de rand.

   Daarom staan ze nu onder elkaar over de volle breedte. Dan is een kwart van
   de kaartbreedte al ruim 300 px, komt het beeldvak vanzelf op 3:2 uit en is
   er niets meer weg te snijden — en de kaart blijft laag, want naast een foto
   van 3:2 past de hele tekst op één regel. */
.extra-kaarten { display: grid; gap: 16px; grid-template-columns: 1fr; }
.extra-card {
  padding: 0; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 27%) 1fr; align-items: stretch;
}
/* width:100% is geen overbodige regel. Zonder die breedte leidt Chrome de
   breedte van dit vak af uit aspect-ratio × de hoogte van de kaart, en die
   hoogte wordt bepaald door de tekst ernaast. Staat er twee regels tekst, dan
   werd het beeld breder dan zijn kolom en schoof het over de titel en de
   prijs heen. Met een vaste breedte bepaalt de kolom het vak, snijdt
   object-fit het beeld bij, en blijft de verhouding alleen gelden zolang er
   niets te stretchen valt. */
.extra-card__media {
  display: block; width: 100%; background: var(--neutral-100); border-right: 1px solid var(--line-hair);
  aspect-ratio: 3 / 2;
}
.extra-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.extra-card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; min-width: 0; }
.extra-card__kop { display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
.extra-card h3 { font-size: var(--fs-h3); }
.extra-card__tekst { font-size: var(--fs-body-sm); line-height: 1.45; color: var(--text-secondary); max-width: 62ch; }
.extra-card .icon { color: var(--text-faint); }

/* "optioneel", niet "−25%". Een kortingspercentage in een gekleurd vlak leest
   als een aanbieding die u moet grijpen; wat hier moet staan is dat u dit ook
   gewoon kunt overslaan. */
.extra-card__optie {
  flex: none; padding: 3px 8px; background: var(--neutral-100); color: var(--text-muted);
  font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: .02em;
}

/* De voet: prijs links, knop rechts. margin-top:auto houdt de knoppen van de
   twee kaarten op dezelfde plaats in de kaart, ook als de ene één regel tekst
   heeft en de andere twee. */
.extra-card__voet {
  margin-top: auto; padding-top: 8px; max-width: 640px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
/* De losse prijs en de prijs bij een container op één regel, de kleine uitleg
   eronder. Zo blijft de knop ernaast passen in plaats van eronder. */
.extra-card__prijzen { display: grid; grid-template-columns: auto auto; gap: 0 8px; align-items: baseline; justify-items: start; }
.extra-card__prijzen .price { font-size: var(--fs-price-row); }
.extra-card__prijzen > .micro { grid-column: 1 / -1; margin-top: 2px; }
/* Los besteld kost het meer, want dan rijden wij ervoor. Dat verschil is echt;
   daarom mag het doorgestreepte bedrag ernaast staan. */
.extra-card__van {
  color: var(--text-faint); font-weight: var(--fw-bold); font-size: var(--fs-body-sm);
  text-decoration-thickness: 1.5px;
}
.extra-card__knop { flex: none; }
.extra-card__knop[aria-pressed="true"] .icon { color: currentColor; }

@media (max-width: 1100px) { .extra-card { grid-template-columns: minmax(0, 32%) 1fr; } }
@media (max-width: 820px)  { .extra-card { grid-template-columns: minmax(0, 38%) 1fr; } }
@media (max-width: 640px) {
  /* Onder de 640 px is een kolom van 38% nog maar 210 px breed, en dan wordt
     de tekst ernaast zo smal dat de kaart hoger wordt dan de foto — waarna de
     foto weer uitgerekt wordt. Beeld boven de tekst dus, over de volle breedte
     en nog altijd op 3:2: één kaart per scherm, helemaal te zien. */
  .extra-card { grid-template-columns: 1fr; }
  .extra-card__media { border-right: 0; border-bottom: 1px solid var(--line-hair); }
}
@media (max-width: 370px) {
  .extra-card__voet { flex-direction: column; align-items: stretch; }
  .extra-card__knop { width: 100%; }
}

/* Dezelfde twee dingen, maar dan als aankruisvakje in de kassa. */
.extra-kies { display: grid; gap: 2px; }
.extra-kies__optie { position: relative; display: block; cursor: pointer; }
.extra-kies__optie input {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.extra-kies__box {
  display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center;
  padding: 12px 14px; background: var(--brand-white);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: box-shadow var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.extra-kies__optie:hover .extra-kies__box { background: var(--neutral-50); }
.extra-kies__optie input:focus-visible + .extra-kies__box { outline: 3px solid var(--green-500); outline-offset: 2px; }
.extra-kies__optie input:checked + .extra-kies__box {
  background: var(--green-50); box-shadow: inset 0 0 0 2px var(--green-600);
}
.extra-kies__box img { display: block; width: 96px; height: auto; background: var(--neutral-100); }
.extra-kies__tekst { display: grid; gap: 3px; min-width: 0; }
/* Naam en prijs op één regel: dat is samen één feit, en op een telefoon hoort
   het bedrag niet drie zinnen onder de naam te belanden. */
.extra-kies__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.extra-kies__kop b { font-size: var(--fs-body); }
.extra-kies__tekst > span:not(.extra-kies__kop) { font-size: var(--fs-body-sm); line-height: 1.45; color: var(--text-muted); }
@media (max-width: 400px) {
  .extra-kies__box { grid-template-columns: 68px 1fr; gap: 12px; }
  .extra-kies__box img { width: 68px; }
}

/* De inhoudsopgave van de acceptatiepagina: veertien stromen is te veel om
   doorheen te scrollen tot u de uwe vindt. */
.stroom-index { display: flex; flex-wrap: wrap; gap: 2px; }
.stroom-index a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 13px; text-decoration: none;
  font-size: var(--fs-body-sm); font-weight: var(--fw-bold); color: var(--neutral-900);
  background: var(--brand-white); box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: box-shadow var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.stroom-index a:hover { background: var(--neutral-900); color: var(--brand-white); box-shadow: inset 0 0 0 1px var(--neutral-900); }
.stroom-index .badge { flex: none; }

/* Eén stroom op de acceptatiepagina. */
.acc-stroom { scroll-margin-top: 90px; padding-top: 28px; border-top: 2px solid var(--neutral-900); }
.acc-stroom + .acc-stroom { margin-top: 36px; }
.acc-stroom__kop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.acc-stroom__kop h2 { font-size: var(--fs-h2); }
.acc-stroom__kop a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 4px;
  font-size: var(--fs-body-sm); font-weight: var(--fw-bold);
}

/* De kleine regel onder een prijs die het transport erbij telt. Het opgetelde
   bedrag staat groot, de twee delen eronder klein — een prijs die stilzwijgend
   omhoog gaat, is precies de verrassing die deze site moet uitsluiten. */
.prijs-split {
  display: block; margin-top: 3px;
  font-size: var(--fs-micro); line-height: 1.35; font-weight: var(--fw-bold);
  color: var(--text-muted);
}
.price-table .prijs-split { font-weight: var(--fw-semibold); white-space: nowrap; }
.band--dark .prijs-split, .band--steel .prijs-split { color: var(--neutral-400); }

/* Het zoekveld boven de prijstabel. Zelfde vorm als in de kassa, zodat het
   dezelfde handeling blijft. */
.zone-zoek { max-width: 420px; }

/* --- 35. UITLIJNING EN EXTRAS -------------------------------------------- */

/* De knop "In het mandje" staat op elke maatkaart op dezelfde hoogte.

   Dat deed hij niet: de body was een grid met align-content:start, en dan doet
   margin-top:auto op de knoppenrij niets — de rijen worden gewoon bovenaan
   gepakt. Bij 12 m³ past de zin over wat erin gaat op één regel en bij 30 m³
   op twee, dus stonden de twee knoppen een regel uit elkaar. Een flexkolom
   duwt de knoppenrij wél naar onder, en dan liggen ze gelijk. */
.size-card--shop .size-card__body {
  display: flex; flex-direction: column; gap: 8px; align-content: initial;
}
.size-card--shop .size-card__cap { flex: none; }

/* Dezelfde twee prijzen als op de kaart, maar dan in de kassa: het bedrag dat
   u betaalt, met de losse prijs doorgestreept ernaast. */
.extra-kies__prijs { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.extra-kies__van { color: var(--text-faint); font-weight: var(--fw-bold); font-size: var(--fs-body-sm); }
.extra-kies__korting { color: var(--green-600); font-weight: var(--fw-extrabold); }

/* Een extra in het winkelmandje. Geen plus en min: beschermplaten worden één
   keer per bestelling gerekend, ook als er twee containers staan. */
.cart-row--extra th[scope="row"] { border-left: 3px solid var(--green-500); padding-left: 9px; }
.cart-row--extra .cart-line__media img { object-fit: cover; }

/* Een knop die nergens heen kan: extra's zonder container zijn geen
   bestelling. Hij blijft staan en zegt wat er nog ontbreekt. */
.btn[aria-disabled="true"] { background: var(--neutral-300); color: var(--text-muted); box-shadow: none; cursor: default; }
.btn[aria-disabled="true"]:hover { background: var(--neutral-300); }

/* Op /prijzen/ is de tabel de pagina zelf. Tussen 900 en 1000 px hield de
   zijkolom er te weinig van over — 448 px voor een tabel die er 520 nodig
   heeft — en dan moest u zijwaarts schuiven om 30 m³ nog te zien. Daar
   wachten wij met de tweede kolom tot er plaats is voor allebei. */
@media (min-width: 900px) and (max-width: 1019px) {
  .prijzen-kolommen { grid-template-columns: 1fr; gap: 32px; }
  .prijzen-kolommen > aside { position: static !important; }
}

/* --- 36. DE GOOGLE-SCORE ---------------------------------------------------
   Sterren, het cijfer, en een link waarmee iedereen het kan nakijken. Geen
   logo-carrousel en geen keurmerken die wij zelf verzonnen hebben: één cijfer
   dat klopt, is meer waard dan vijf badges die niemand kent.

   Het aantal recensies staat er niet bij — zie reviewBadge() in tools/src/ui.mjs.

   De sterren zijn gevuld, niet omlijnd — het sprite-icoon is een lijntekening,
   dus hier wordt hij ingekleurd en de lijn eraf gehaald.

   Twee lagen over elkaar: onderaan vijf lege sterren, daarover dezelfde vijf
   gevulde, afgesneden op de breedte van de score. Zo is 4,5 ook echt vier en
   een halve ster en niet vijf hele. De bovenste laag krijgt zijn breedte in
   procent van de onderste, en beide rijen zijn even breed omdat .icon geen
   flex-shrink kent. */
.sterren { position: relative; display: inline-block; flex: none; line-height: 0; }
.sterren__rij { display: inline-flex; gap: 1px; }
.sterren__vol { position: absolute; left: 0; top: 0; bottom: 0; overflow: hidden; }
.sterren__ster { fill: var(--amber-500); stroke: none; color: var(--amber-500); }
.sterren__ster--leeg { fill: none; stroke: var(--amber-500); stroke-width: 2; }

/* Het lint: één regel, past onder een titel, in een zijkolom of naast een knop. */
.review-lint {
  display: inline-flex; align-items: center; gap: 10px; min-height: var(--touch-min);
  text-decoration: none; color: inherit;
}
.review-lint__tekst { font-size: var(--fs-body-sm); font-weight: var(--fw-bold); color: var(--text-secondary); }
.review-lint__tekst b { color: var(--text-strong); }
.review-lint:hover .review-lint__tekst { text-decoration: underline; }
.band--dark .review-lint__tekst, .band--steel .review-lint__tekst, .site-footer .review-lint__tekst { color: var(--neutral-400); }
.band--dark .review-lint__tekst b, .band--steel .review-lint__tekst b, .site-footer .review-lint__tekst b { color: var(--brand-white); }

/* De kaart: hetzelfde cijfer, maar als blok in een aside of onder een formulier. */
.review-kaart {
  display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 4px 12px;
  padding: 14px 16px; background: var(--brand-white); box-shadow: inset 0 0 0 1px var(--line-strong);
  text-decoration: none; color: inherit;
}
.review-kaart:hover { box-shadow: inset 0 0 0 2px var(--neutral-900); }
.review-kaart__cijfer { font-size: var(--fs-h3); font-weight: var(--fw-extrabold); color: var(--text-strong); line-height: 1; }
.review-kaart__tekst { display: grid; gap: 2px; min-width: 0; }
.review-kaart__tekst b { font-size: var(--fs-body-sm); color: var(--text-strong); }
@media (max-width: 380px) {
  .review-kaart { grid-template-columns: auto 1fr; }
  .review-kaart__tekst { grid-column: 1 / -1; }
}


/* --- 37. VEILIG AFREKENEN --------------------------------------------------
   Vier regels onder de afrekenknop van het winkelmandje. Geen keurmerklogo's:
   die hebben wij niet, en een badge die je zelf tekent is precies wat een
   oplichter ook doet. Wat hier staat kan iemand narekenen — de betaalprovider,
   het btw-nummer, het adres. Klein gezet, want het moet geruststellen en niet
   de knop wegdrukken. */
.vertrouwen { display: grid; gap: 8px; }
.vertrouwen li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: var(--fs-label); line-height: 1.45; color: var(--text-secondary);
}
.vertrouwen .icon { color: var(--green-600); flex: none; margin-top: 1px; }