/* ============================================================
   IMPÓSABLE — main.css
   Merkbreed designsysteem: tokens, basis, typografie, navigatie,
   drawer, knoppen, formulieren, productplaten, specs, accordion,
   toast, footer.

   Uitgangspunt (2026): donker, product-first. De pagina is bijna
   zwart; productfotografie staat op lichte "platen" — precies de
   beeldtaal van de IMPÓSABLE-verpakkingen (zwarte doos, wit
   studiolicht, warm goud als enige accent).

   Paginaspecifieke stijlen: home.css · shop.css · product.css ·
   cart.css · checkout.css · pages.css
============================================================ */

/* ============================================================
   1 · DESIGN TOKENS
============================================================ */
:root {
  /* Ondergronden — donker, neutraal, licht koel */
  --bg:          #0C0D0E;   /* de pagina */
  --surface:     #141619;   /* kaart / paneel */
  --surface-2:   #1B1E22;   /* inzet binnen een kaart */
  --surface-3:   #24282D;   /* hover / actief */
  --void:        #08090A;   /* zwarte band als leesteken */

  /* Tekst op donker */
  --fg:          #F3F4F5;
  --fg-muted:    #9CA3AA;
  --fg-faint:    #6C747C;

  /* Lichte productplaat — hier leeft de fotografie.
     Zuiver wit: de studiorenders hebben een witte achtergrond, dus het
     product staat vrij op de plaat in plaats van op een zichtbaar vlakje
     binnen een vlak. */
  --plate:       #FFFFFF;
  --plate-2:     #F3F3F1;
  --plate-fg:    #0C0D0E;
  --plate-muted: #5C6470;
  --plate-line:  rgba(12, 13, 14, 0.12);

  /* Merkaccent — het goud van de verpakking */
  --gold:        #C8A96A;
  --gold-hi:     #E2CB92;
  --gold-soft:   rgba(200, 169, 106, 0.14);

  /* Lijnen */
  --line:        rgba(243, 244, 245, 0.13);
  --line-soft:   rgba(243, 244, 245, 0.07);
  --line-strong: rgba(243, 244, 245, 0.28);

  /* Status */
  --ok:          #5FBF8F;
  --warn:        #E0A33A;
  --danger:      #E8654F;

  /* Typografie */
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Vorm & ritme */
  --r-s: 4px;
  --r-m: 10px;
  --r-l: 18px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --maxw: 1320px;
  --gutter: clamp(20px, 4.5vw, 64px);
  --navh: 68px;

  /* ── Compatibiliteitsaliassen ────────────────────────────
     De paginastylesheets en modules gebruiken nog de oude
     namen. Ze wijzen nu naar het nieuwe systeem, zodat elke
     regel die we (nog) niet hebben aangeraakt automatisch mee
     verandert in plaats van stuk te gaan.
     --ink = "de contrastkleur van tekst", --paper = "de pagina". */
  --paper:        var(--bg);
  --paper-2:      var(--surface);
  --paper-3:      var(--surface-2);
  --ink:          var(--fg);
  --ink-2:        var(--void);
  --ink-3:        var(--surface);
  --muted:        var(--fg-muted);
  --muted-2:      var(--fg-faint);
  --paper-muted:  var(--fg-muted);
  --paper-faint:  var(--fg-faint);
  --red:          var(--gold);
  --line-ink:     var(--line);
  --line-ink-soft:var(--line-soft);
  --serif:        var(--sans);
}

/* ============================================================
   1b · HOOFDSTUKKEN — licht, graphite, warm donker
   ------------------------------------------------------------
   De pagina is niet één zwart vlak maar een reeks hoofdstukken.
   Een sectie krijgt een klasse en alle bestaande componenten
   (knoppen, lijnen, eyebrows, platen) verkleuren mee — er hoeft
   geen enkele component opnieuw gestyled te worden.

     .ch-light   off-white hoofdstuk (productfamilie, merkbelofte)
     .ch-graph   heel donker graphite, iets lichter dan de pagina
     .ch-warm    warm donker — een eigen productwereld (X10 PRO)
     .ch-void    diep zwart, het leesteken tussen hoofdstukken

   Alleen de tokens wisselen; de merkidentiteit blijft dezelfde.
============================================================ */
.ch-light,
.ch-paper,
.ch-graph,
.ch-warm,
.ch-void { background: var(--bg); color: var(--fg); }

.ch-light {
  --bg:          #F2F2F0;   /* off-white */
  --surface:     #FFFFFF;
  --surface-2:   #EBEBE8;
  --surface-3:   #E1E1DD;
  --void:        #E7E7E3;

  --fg:          #0F1011;
  --fg-muted:    #565A5F;
  --fg-faint:    #83888E;

  --plate:       #FFFFFF;
  --plate-2:     #F2F2F0;
  --plate-fg:    #0F1011;
  --plate-line:  rgba(15, 16, 17, 0.10);

  /* Hetzelfde goud, maar donker genoeg om op off-white te lezen. */
  --gold:        #8A6B2E;
  --gold-hi:     #6E541F;
  --gold-soft:   rgba(138, 107, 46, 0.10);

  --line:        rgba(15, 16, 17, 0.14);
  --line-soft:   rgba(15, 16, 17, 0.08);
  --line-strong: rgba(15, 16, 17, 0.30);

  color-scheme: light;
}
.ch-light ::selection { background: var(--gold); color: #FFFFFF; }

/* Zuiver wit: hier staat productfotografie zonder enige omlijsting op
   de pagina zelf. De studiorenders hebben een witte achtergrond, dus het
   product lijkt vrij te staan — geen kaders, geen kaarten. */
.ch-paper {
  --bg:          #FFFFFF;
  --surface:     #F7F7F5;
  --surface-2:   #F0F0ED;
  --surface-3:   #E8E8E4;
  --void:        #F2F2F0;

  --fg:          #0F1011;
  --fg-muted:    #565A5F;
  --fg-faint:    #83888E;

  --plate:       #F7F7F5;
  --plate-2:     #F0F0ED;
  --plate-fg:    #0F1011;
  --plate-line:  rgba(15, 16, 17, 0.10);

  --gold:        #8A6B2E;
  --gold-hi:     #6E541F;
  --gold-soft:   rgba(138, 107, 46, 0.10);

  --line:        rgba(15, 16, 17, 0.13);
  --line-soft:   rgba(15, 16, 17, 0.07);
  --line-strong: rgba(15, 16, 17, 0.28);

  color-scheme: light;
}
.ch-paper ::selection { background: var(--gold); color: #FFFFFF; }

.ch-graph {
  --bg:        #131619;
  --surface:   #1A1E22;
  --surface-2: #21262B;
  --void:      #0E1113;
}

/* Warm donker: hetzelfde zwart met een fractie koper erin, zodat de
   X10 PRO als eigen productwereld leest zonder een tweede merkkleur. */
.ch-warm {
  --bg:        #14120F;
  --surface:   #1C1915;
  --surface-2: #24201A;
  --void:      #0E0C0A;
  --line:        rgba(245, 240, 232, 0.13);
  --line-soft:   rgba(245, 240, 232, 0.07);
  --line-strong: rgba(245, 240, 232, 0.28);
}

.ch-void { --bg: #08090A; --surface: #101214; }

/* ============================================================
   2 · RESET & BASIS
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--navh) + 16px);
  color-scheme: dark;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.6;
  letter-spacing: -0.003em;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 600; }
::selection { background: var(--gold); color: #0C0D0E; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 940px; }

a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible,
select:focus-visible, textarea:focus-visible, label:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: var(--gutter); top: -60px; z-index: 200;
  background: var(--fg); color: var(--bg);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
  padding: 10px 16px; border-radius: 0 0 var(--r-s) var(--r-s);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0; }

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

/* ============================================================
   3 · TYPOGRAFIE
============================================================ */
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }

/* Grote koppen: strak, licht negatief gespatieerd, nooit schreef. */
.display {
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
.display em { font-style: normal; color: var(--gold); }
.display--light { font-weight: 300; letter-spacing: -0.025em; }

/* Technisch label: mono, uppercase, ruim gespatieerd. */
.kicker {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
  display: inline-flex; align-items: center; gap: 9px;
}
.kicker::before {
  content: ""; width: 18px; height: 1px; background: var(--gold); flex-shrink: 0;
}
.kicker--bare::before { display: none; }
.kicker .dot { color: var(--gold); }
.kicker--ink { color: var(--fg-muted); }

.lead {
  font-size: clamp(16.5px, 1.5vw, 19px);
  line-height: 1.62;
  color: var(--fg-muted);
  max-width: 58ch;
  text-wrap: pretty;
}

/* Merkregel boven een kop: klein, ruim gespatieerd, met een gouden streep.
   Opvolger van .kicker voor de nieuwe merksecties. */
.eyebrow {
  font-family: var(--mono); font-size: 10.5px; font-weight: 400;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-faint);
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--gold); flex-shrink: 0; }
.eyebrow--bare::before { display: none; }

/* Lijniconen (includes/icons.php) nemen de omringende kleur over. */
.ico { display: block; }

.mono-note {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.02em;
  color: var(--fg-faint); line-height: 1.7;
}

/* Wordmark-behandeling, afgeleid van de verpakking. */
.wordmark {
  font-weight: 300; text-transform: uppercase; letter-spacing: 0.28em;
}

/* ── Scroll reveal ───────────────────────────────────────── */
/* Scroll reveal — bewust klein: het beeld komt binnen, het springt niet.
   Een figuur krijgt er een fractie schaal bij zodat productbeeld eerder
   'scherpstelt' dan 'inschuift'. */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; will-change: auto; }
figure.reveal { transform: translateY(14px) scale(0.986); }
figure.reveal.in { transform: none; }
.d1 { transition-delay: 0.06s; } .d2 { transition-delay: 0.12s; }
.d3 { transition-delay: 0.18s; } .d4 { transition-delay: 0.24s; }
.d5 { transition-delay: 0.30s; } .d6 { transition-delay: 0.36s; }

/* ============================================================
   4 · NAVIGATIE
============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  min-height: var(--navh);
  padding: 12px var(--gutter);
  background: rgba(12, 13, 14, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.nav { transition: background 0.4s var(--ease), border-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease); }
.nav.stuck { background: rgba(12, 13, 14, 0.94); border-bottom-color: var(--line-soft); }
/* Boven een fotohero blijft de balk transparant tot je scrollt. */
.nav.on-hero:not(.stuck) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

.nav__logo { display: flex; align-items: center; flex-shrink: 0; }
.nav__logo img { height: 22px; width: auto; }

.nav__right { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.nav__links { display: flex; align-items: center; gap: clamp(18px, 2vw, 30px); list-style: none; }
.nav__links > li { position: relative; }
.nav__links a, .nav__links button {
  font-family: var(--sans); font-size: 13.5px; font-weight: 500; letter-spacing: 0.005em;
  color: var(--fg-muted); background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding-block: 8px;
  transition: color 0.18s;
}
.nav__links a:hover, .nav__links button:hover,
.nav__links a[aria-current="page"] { color: var(--fg); }
/* Onderstreping groeit uit het midden — één detail, geen effect. */
.nav__links > li > a, .nav__links > li > button { position: relative; }
.nav__links > li > a::after, .nav__links > li > button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform 0.32s var(--ease);
}
.nav__links > li > a:hover::after, .nav__links > li > button:hover::after,
.nav__menu-wrap:focus-within > button::after { transform: scaleX(1); }
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__caret { font-size: 8px; color: var(--fg-faint); transition: transform 0.2s var(--ease); }

/* Uitklapmenu's — werken op hover én toetsenbord (:focus-within),
   dus zonder JavaScript en zonder inline handlers (CSP). */
.nav__menu-wrap { position: relative; }
.nav__menu-wrap::after { content: ""; position: absolute; top: 100%; left: -12px; right: -12px; height: 16px; }
.nav__sub {
  position: absolute; top: calc(100% + 14px); left: -14px;
  min-width: 232px; margin: 0; padding: 8px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
  z-index: 60;
}
.nav__sub--right { left: auto; right: -14px; }
.nav__menu-wrap:hover > .nav__sub,
.nav__menu-wrap:focus-within > .nav__sub { opacity: 1; visibility: visible; transform: none; }
.nav__menu-wrap:hover .nav__caret, .nav__menu-wrap:focus-within .nav__caret { transform: rotate(180deg); }
.nav__sub li { display: block; }
.nav__sub a, .nav__sub button {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; padding: 9px 12px; border-radius: var(--r-s);
  font-size: 14px; font-weight: 500; color: var(--fg-muted);
  background: none; border: 0; cursor: pointer;
}
.nav__sub a:hover, .nav__sub button:hover { background: var(--surface-3); color: var(--fg); }
.nav__sub .n { font-family: var(--mono); font-size: 11px; color: var(--fg-faint); }
.nav__sub .sep { margin: 6px 4px; border-top: 1px solid var(--line-soft); }
.nav__sub form { margin: 0; }

/* Winkelwagen */
.nav__cart {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg); border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 8px 14px; white-space: nowrap;
  transition: border-color 0.2s, background 0.2s;
}
.nav__cart:hover { border-color: var(--gold); background: var(--gold-soft); }
.nav__cart .n { color: var(--gold); }
.nav__reserve {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg); border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 8px 14px; white-space: nowrap;
}

/* Taalschakelaar */
.lang { display: flex; align-items: center; gap: 6px; }
.lang__btn {
  width: 26px; height: 17px; padding: 0; border: 1px solid var(--line); border-radius: 3px;
  background: none; cursor: pointer; overflow: hidden; opacity: 0.42; line-height: 0;
  transition: opacity 0.2s var(--ease);
}
.lang__btn svg { width: 100%; height: 100%; }
.lang__btn[aria-pressed="true"] { opacity: 1; border-color: var(--gold); }
.lang__btn:hover { opacity: 0.85; }

/* Hamburger */
.nav__menu {
  display: none; background: none; border: 0; cursor: pointer;
  flex-direction: column; gap: 5px; padding: 8px; color: var(--fg);
}
.nav__menu span { width: 20px; height: 1.5px; background: currentColor; }

/* ── Mobiele drawer ──────────────────────────────────────── */
.drawer {
  position: fixed; inset: 0; z-index: 99;
  background: var(--bg); color: var(--fg);
  display: flex; flex-direction: column; gap: 2px;
  padding: calc(var(--navh) + 20px) var(--gutter) 40px;
  overflow-y: auto;
  transform: translateY(-101%);
  transition: transform 0.4s var(--ease);
  visibility: hidden;
}
.drawer.open { transform: none; visibility: visible; }
.drawer a, .drawer button {
  font-family: var(--sans); font-size: 21px; font-weight: 500; letter-spacing: -0.015em;
  padding: 14px 0; border-bottom: 1px solid var(--line-soft);
  background: none; border-top: 0; border-left: 0; border-right: 0;
  color: inherit; text-align: left; cursor: pointer; width: 100%;
}
.drawer__label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-faint); margin-top: 24px; padding-bottom: 6px;
}
.drawer__label:first-of-type { margin-top: 0; }
.drawer a.is-sub { font-size: 16px; font-weight: 400; color: var(--fg-muted); padding: 11px 0; }
.drawer__close {
  position: absolute; top: 18px; right: var(--gutter);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  background: none; border: 0; color: var(--fg-muted); cursor: pointer; width: auto; padding: 8px;
}

/* ============================================================
   5 · KNOPPEN
============================================================ */
.btn {
  font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
  padding: 14px 24px; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: none; color: inherit; text-align: center;
  transition: background 0.28s var(--ease), color 0.28s var(--ease),
              border-color 0.28s var(--ease), transform 0.28s var(--ease),
              box-shadow 0.28s var(--ease);
}
.btn:active { transform: translateY(0) scale(0.985); transition-duration: 0.08s; }
.btn--solid { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn--solid:hover { background: #FFFFFF; border-color: #FFFFFF; transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35); }
.btn--ghost { border-color: var(--line-strong); color: var(--fg); }
.btn--ghost:hover { border-color: var(--fg); background: rgba(243, 244, 245, 0.06); }
.btn--gold { background: var(--gold); color: #0C0D0E; border-color: var(--gold); }
.btn--gold:hover { background: var(--gold-hi); border-color: var(--gold-hi); transform: translateY(-1px); box-shadow: 0 10px 28px rgba(200, 169, 106, 0.22); }
.btn--quiet { border-color: transparent; color: var(--fg-muted); padding-inline: 12px; }
.btn--quiet:hover { color: var(--fg); background: var(--surface-2); }
.btn--sm { padding: 10px 17px; font-size: 13px; }
.btn--lg { padding: 17px 30px; font-size: 15px; }
.btn--full { width: 100%; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn .arrow { transition: transform 0.3s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
/* Op een lichte plaat draaien de knoppen om. */
.on-plate .btn--solid { background: var(--plate-fg); color: var(--plate); border-color: var(--plate-fg); }
.on-plate .btn--ghost { border-color: var(--plate-line); color: var(--plate-fg); }
/* Legacy: btn--on-ink betekende "op een donkere ondergrond" — dat is nu de norm. */
.btn--on-ink { border-color: var(--line-strong); color: var(--fg); }
.btn--on-ink.btn--solid { background: var(--fg); color: var(--bg); border-color: var(--fg); }

.textlink {
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  color: var(--fg-muted); border: 0; border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px; background: none; cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.textlink:hover { color: var(--fg); border-bottom-color: var(--gold); }

/* ============================================================
   6 · SECTIE-RASTER
============================================================ */
section { position: relative; }
.pad { padding-block: clamp(64px, 9vw, 130px); }
.pad--tight { padding-block: clamp(40px, 5.5vw, 76px); }

/* Zwarte band als leesteken binnen de donkere pagina. */
.ink, .band--void { background: var(--void); color: var(--fg); }
.band--surface { background: var(--surface); }
.rule-top { border-top: 1px solid var(--line-soft); }

.sec-head { max-width: min(62ch, 100%); }
.sec-head--tight { max-width: min(34ch, 100%); }
.sec-head .display { font-size: clamp(30px, 4.4vw, 56px); margin-top: 18px; }
.sec-head .lead { margin-top: 18px; }

/* Kop met actie ernaast (productrails, categorieën). */
.sec-bar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 40px);
}

/* Subpagina-intro: ruimte voor de vaste navigatiebalk. */
.page-head {
  padding-top: calc(var(--navh) + clamp(40px, 6vw, 84px));
  padding-bottom: clamp(28px, 4vw, 52px);
}
.page-head .display { font-size: clamp(32px, 5vw, 62px); margin-top: 16px; max-width: 20ch; }
.page-head .lead { margin-top: 18px; }
.page-head__meta {
  margin-top: 22px; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint);
}

/* ── Breadcrumbs ─────────────────────────────────────────── */
.crumbs {
  display: flex; flex-wrap: wrap; gap: 9px; align-items: center;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--fg-faint); list-style: none;
}
.crumbs a { color: var(--fg-muted); transition: color 0.2s; }
.crumbs a:hover { color: var(--fg); }
.crumbs li + li::before { content: "/"; margin-right: 9px; color: var(--fg-faint); opacity: 0.6; }
.crumbs [aria-current="page"] { color: var(--fg); }

/* ============================================================
   7 · PRODUCTPLAAT
   Het hart van de nieuwe beeldtaal: fotografie staat op licht,
   de interface eromheen is donker. Zo blijven witte studiofoto's
   kloppen én lichten producten letterlijk op.
============================================================ */
.plate {
  position: relative;
  background: var(--plate);
  border-radius: var(--r-m);
  overflow: hidden;
  display: grid; place-items: center;
  color: var(--plate-fg);
}
.plate img { width: 100%; height: 100%; object-fit: contain; object-position: center center; }
.plate--pad { padding: clamp(18px, 3vw, 40px); }
/* Productbeelden staan altijd in een vierkant vak en worden daarbinnen
   geschaald — zie .plate img hierboven (object-fit: contain). */
.plate--ratio { aspect-ratio: 1 / 1; }
.plate--square { aspect-ratio: 1; }
.plate__tag {
  position: absolute; left: 14px; bottom: 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(12, 13, 14, 0.45);
}
.plate__index {
  position: absolute; left: 14px; top: 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  color: rgba(12, 13, 14, 0.38);
}

/* ============================================================
   8 · KLEURCHIPS
============================================================ */
.chip {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  background: none; border: 0; cursor: pointer; padding: 4px 0;
}
.chip__dot {
  width: 100%; aspect-ratio: 1; max-width: 46px; border-radius: 50%;
  border: 1px solid var(--line); position: relative;
  box-shadow: inset 0 -3px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s var(--ease), box-shadow 0.2s;
}
.chip:hover .chip__dot { transform: scale(1.07); }
.chip[aria-pressed="true"] .chip__dot, .chip[aria-current="page"] .chip__dot {
  outline: 1.5px solid var(--gold); outline-offset: 3px;
}
.chip__name {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--fg-faint); text-align: center; line-height: 1.3;
}
.chip[aria-pressed="true"] .chip__name { color: var(--fg); }

/* ============================================================
   9 · SPECIFICATIES
============================================================ */
.spec {
  display: flex; justify-content: space-between; gap: 20px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--line-soft);
}
.spec dt {
  font-family: var(--sans); font-size: 13.5px; font-weight: 500;
  color: var(--fg-muted); letter-spacing: 0;
  text-transform: none;
}
.spec dd {
  font-family: var(--mono); font-size: 13.5px; font-weight: 400;
  text-align: right; color: var(--fg);
}
.spec dd span {
  display: block; font-family: var(--sans); font-size: 12px;
  color: var(--fg-faint); margin-top: 3px;
}

/* Kenmerkkaarten: mono-waarde groot, label klein. */
.factgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r-m); overflow: hidden; }
.fact { background: var(--surface); padding: clamp(16px, 2vw, 24px); }
.fact__k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint); }
.fact__v { font-size: clamp(17px, 1.8vw, 21px); font-weight: 600; letter-spacing: -0.02em; margin-top: 8px; line-height: 1.25; }
/* Lange opsommingen (bijv. alle ondersteunde kaartformaten) blijven zo
   leesbaar zonder de tegel uit balans te trekken. */
.fact__v--long { font-size: clamp(14px, 1.2vw, 15.5px); font-weight: 500; line-height: 1.45; letter-spacing: -0.005em; }
.fact--wide { grid-column: span 2; }
@media (max-width: 620px) { .fact--wide { grid-column: auto; } }
.fact__v em { font-style: normal; color: var(--gold); }

/* ============================================================
   10 · VOORRAAD, PRIJS, BADGES
============================================================ */
.stock {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-muted);
}
.stock__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.stock--out { color: var(--fg-faint); }
.stock--out .stock__dot { background: var(--fg-faint); }
.stock--low .stock__dot { background: var(--warn); }

.price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price .amt { font-family: var(--sans); font-weight: 600; letter-spacing: -0.02em; }
.price .vat { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); }
.price__old { color: var(--fg-faint); margin-right: 6px; font-size: 0.85em; }

.badge {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px;
  color: var(--fg-muted); background: rgba(12, 13, 14, 0.55); white-space: nowrap;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.badge--gold { border-color: var(--gold); color: var(--gold); }
.badge--solid { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* ============================================================
   11 · FORMULIEREN
============================================================ */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label {
  font-family: var(--sans); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.01em; color: var(--fg-muted); text-transform: none;
}
.field label .opt { color: var(--fg-faint); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  padding: 13px 14px;
  font-family: var(--sans);
  font-size: 16px;                 /* ≥16px voorkomt inzoomen op iOS */
  color: var(--fg);
  transition: border-color 0.2s, background 0.2s;
  appearance: none;
}
.field textarea { min-height: 130px; resize: vertical; }
.field select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239CA3AA' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}
.field input::placeholder, .field textarea::placeholder { color: var(--fg-faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold); background: var(--surface-2); outline: none;
}
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--danger); }
.field__error { display: none; font-family: var(--mono); font-size: 11.5px; color: var(--danger); }
.field.is-invalid .field__error { display: block; }

.check { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; cursor: pointer; color: var(--fg-muted); }
.check input {
  appearance: auto; -webkit-appearance: checkbox;
  width: 17px; height: 17px; margin-top: 2px; accent-color: var(--gold); flex-shrink: 0; cursor: pointer;
}
.check a { color: var(--fg); border-bottom: 1px solid var(--line-strong); padding-bottom: 1px; }
.check a:hover { border-color: var(--gold); }
.check.is-invalid { color: var(--danger); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.form-grid .span2 { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } .form-grid .span2 { grid-column: auto; } }

.form-msg {
  display: none; margin-top: 18px;
  border: 1px solid var(--line); border-left: 2px solid var(--ok);
  background: var(--surface); border-radius: var(--r-s);
  padding: 15px 17px; font-size: 14.5px; color: var(--fg);
}
.form-msg.show { display: block; }
.form-msg--error { border-left-color: var(--danger); color: var(--danger); }

/* Aantalregelaar */
.qty { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--surface); }
.qty button { width: 44px; background: none; border: 0; cursor: pointer; font-family: var(--mono); font-size: 16px; color: var(--fg-muted); transition: background 0.2s, color 0.2s; }
.qty button:hover { background: var(--surface-3); color: var(--fg); }
.qty input {
  width: 50px; text-align: center; border: 0; background: transparent;
  font-family: var(--mono); font-size: 14px; color: var(--fg);
  -moz-appearance: textfield; appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Totaalregels ────────────────────────────────────────── */
.sumline { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; }
.sumline dt { color: var(--fg-muted); }
.sumline dd { font-weight: 500; text-align: right; font-family: var(--mono); font-size: 13.5px; }
.sumline--total { border-bottom: 0; padding-top: 16px; }
.sumline--total dt { color: var(--fg); font-weight: 600; font-size: 15px; }
.sumline--total dd { font-family: var(--sans); font-size: 23px; font-weight: 600; letter-spacing: -0.02em; }
.sumline--discount dd { color: var(--gold); }

/* ── Panelen ─────────────────────────────────────────────── */
.panel { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-m); padding: clamp(18px, 2.6vw, 26px); }
.panel__h { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 16px; }

/* ============================================================
   12 · ACCORDION
============================================================ */
.acc { border-top: 1px solid var(--line-soft); }
.acc__item { border-bottom: 1px solid var(--line-soft); }
.acc__btn {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: clamp(16px, 2.2vw, 22px) 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--sans); font-weight: 600; font-size: clamp(16px, 1.7vw, 19px);
  letter-spacing: -0.015em; line-height: 1.35; color: var(--fg);
}
.acc__btn:hover { color: var(--gold-hi); }
.acc__mark {
  font-family: var(--mono); font-size: 15px; color: var(--gold); flex-shrink: 0;
  transition: transform 0.3s var(--ease);
}
.acc__btn[aria-expanded="true"] .acc__mark { transform: rotate(45deg); }
.acc__panel { padding: 0 0 clamp(18px, 2.6vw, 26px); color: var(--fg-muted); font-size: 15px; line-height: 1.72; max-width: 74ch; }
.acc__panel p + p { margin-top: 12px; }
.acc__panel a { color: var(--fg); border-bottom: 1px solid var(--line-strong); padding-bottom: 1px; }
.acc__panel a:hover { border-color: var(--gold); }
.acc__panel dl { max-width: none; }

/* ============================================================
   13 · TOAST
============================================================ */
.toast-region {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 150;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  pointer-events: none; width: min(520px, calc(100vw - 32px));
}
.toast {
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--r-m);
  padding: 13px 20px;
  font-size: 14px; line-height: 1.5;
  display: flex; align-items: baseline; gap: 11px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  max-width: 100%;
}
.toast.show { opacity: 1; transform: none; }
.toast .dot { color: var(--gold); font-size: 9px; }

/* ============================================================
   14 · FOOTER
============================================================ */
.footer { background: #08090A; color: var(--fg); border-top: 1px solid var(--line-soft); padding: clamp(56px, 7vw, 100px) var(--gutter) 34px; }
.footer__inner { max-width: var(--maxw); margin: 0 auto; }

/* Servicebeloftes: hier, niet direct onder de hero. */
.footer__service {
  display: flex; flex-wrap: wrap; gap: 12px clamp(24px, 3.4vw, 52px);
  padding-bottom: clamp(34px, 4.6vw, 56px); margin-bottom: clamp(34px, 4.6vw, 56px);
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-faint);
}
.footer__service span { display: inline-flex; align-items: center; gap: 9px; }
.footer__service span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }

/* Vier groepen naast het merkblok: PRODUCTEN · SUPPORT · RETAIL ·
   IMPÓSABLE. Het woordmerk krijgt ruimte — het is het laatste wat een
   bezoeker van de pagina meeneemt. */
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: clamp(32px, 4vw, 64px); }
.footer__brand { max-width: 32ch; }
.footer__brand img { height: clamp(26px, 2.6vw, 34px); width: auto; }
.footer__tag { margin-top: clamp(20px, 2.4vw, 28px); font-size: 15px; line-height: 1.65; color: var(--fg-muted); max-width: 26ch; }
.footer__mail { margin-top: 16px; font-size: 14.5px; }
.footer__mail a { color: var(--fg-muted); border-bottom: 1px solid var(--line); }
.footer__mail a:hover { color: var(--fg); border-color: var(--gold); }
.footer__col h3 { font-family: var(--mono); font-size: 10.5px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 20px; }
.footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer__col a { font-size: 14.5px; color: var(--fg-muted); transition: color 0.22s var(--ease); }
.footer__col a:hover { color: var(--fg); }

/* Campagnepagina's van één productlijn: aanwezig, maar ondergeschikt. */
.footer__sub {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px;
  margin-top: clamp(40px, 5.5vw, 72px); padding-top: 24px; border-top: 1px solid var(--line-soft);
  font-size: 13px;
}
.footer__sub a { color: var(--fg-faint); transition: color 0.2s; }
.footer__sub a:hover { color: var(--fg-muted); }
.footer__sublabel { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint); margin-right: 4px; }

.footer__plate {
  margin-top: clamp(32px, 4vw, 52px); border-top: 1px solid var(--line-soft); padding-top: 22px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--fg-faint); text-transform: uppercase;
}
/* Oude footerrij (mocht een module hem nog gebruiken) */
.footer__top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.footer__links { display: flex; gap: 22px; flex-wrap: wrap; list-style: none; }
.footer__links a { font-size: 13px; color: var(--fg-muted); }
.footer__links a:hover { color: var(--fg); }
@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 5vw, 44px); }
  .footer__brand { grid-column: 1 / -1; max-width: 46ch; margin-bottom: clamp(12px, 3vw, 24px); }
}
@media (max-width: 620px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } .footer__tag { max-width: 34ch; } }

/* ============================================================
   15 · PRODUCTRAIL / UPSELL / RECENT BEKEKEN
============================================================ */
.ups { padding: clamp(44px, 7vw, 84px) 0; border-top: 1px solid var(--line-soft); }
.ups__title { font-size: clamp(19px, 2.4vw, 26px); font-weight: 600; letter-spacing: -0.025em; margin: 0 0 22px; }
.ups__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.ups__card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-m);
  padding: 14px; transition: border-color 0.25s;
}
.ups__card:hover { border-color: var(--line-strong); }
/* De upsell gebruikt sinds de opschoning dezelfde productkaart als de shop.
   Wat hier overblijft is de sectie eromheen plus de knoprij die alleen in de
   winkelwagen en bij het afrekenen wordt getoond. */
/* Op een licht hoofdstuk wordt een paneel een haarlijn in plaats van een
   tegel: dezelfde informatie, één kader minder in beeld. */
.ch-light .panel, .ch-paper .panel {
  background: none; border: 0; border-top: 1px solid var(--line-soft);
  border-radius: 0; padding-left: 0; padding-right: 0;
}

.pcard__buy { margin-top: 12px; }
.pcard__buy .btn { width: 100%; justify-content: center; }

.ups__thumb {
  display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--plate); border-radius: var(--r-s); margin-bottom: 14px; padding: 14px;
}
.ups__thumb img { width: 100%; height: 100%; object-fit: contain; }
.ups__body { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.ups__name { font-weight: 600; font-size: 14.5px; line-height: 1.3; letter-spacing: -0.015em; }
.ups__name:hover { color: var(--gold-hi); }
.ups__price { font-family: var(--mono); font-size: 13px; white-space: nowrap; color: var(--fg-muted); }
.ups__form { margin-top: auto; }
.ups__btn { width: 100%; justify-content: center; }

/* ============================================================
   KERNWAARDEN EN FORMATREGEL
   Gedeeld door de homepagecampagnes en het productverhaal op de
   productpagina: drie kernwaarden en één rustige opsomming van
   kaartformaten, in plaats van een rij pillen.
============================================================ */
/* Kernwaarden — maximaal drie, altijd groot genoeg om te lezen. */
.statrow { display: flex; flex-wrap: wrap; gap: 0; margin-top: clamp(30px, 3.8vw, 46px); }
.statrow__item { padding-right: clamp(14px, 2vw, 28px); margin-right: clamp(14px, 2vw, 28px); border-right: 1px solid var(--line-soft); }
.statrow__item:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.statrow__v { font-size: clamp(24px, 2.8vw, 36px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; }
.statrow__k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint); margin-top: 9px; }

/* Grote cijfers: geen dashboardblokjes maar typografie. Alleen echte
   getallen krijgen de grote maat — een woord als 'Plug & play' zou de kop
   anders overstemmen. */
.statrow--numerals {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr);
  gap: 0 clamp(22px, 3.4vw, 56px); align-items: end;
  border-top: 1px solid var(--line-soft); padding-top: clamp(24px, 3vw, 36px);
}
.statrow--numerals .statrow__item { border-right: 0; padding-right: 0; margin-right: 0; }
.statrow--numerals .statrow__v { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.03em; line-height: 1.05; }
.statrow--numerals .statrow__item--num .statrow__v { font-size: clamp(48px, 6.6vw, 96px); letter-spacing: -0.055em; line-height: 0.9; }
.statrow--numerals .statrow__k { font-size: 11px; margin-top: 12px; color: var(--fg-muted); }

/* Eén rustige regel in plaats van een rij pillen. */
.formatline {
  margin-top: clamp(24px, 3vw, 34px); padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em;
  line-height: 2.2; color: var(--fg-faint); max-width: 52ch;
}

/* ============================================================
   PAGINAKOP MET FOTO (.phero)
   Eén component voor alle informatiepagina's: foto over de volle
   breedte, donkere sluier eroverheen, navigatie transparant erboven.
   Zelfde typografie, spacing en goudaccent als de homepage-hero.

   Drie dingen staan in variabelen, omdat ze per pagina in te stellen
   zijn: het scherptepunt (--phero-x / --phero-y) en de diepte van de
   sluier (--phero-dim). De rest is voor alle pagina's gelijk.
============================================================ */
.phero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: clamp(460px, 52vw, 760px);
  padding-top: calc(var(--navh) + clamp(40px, 8vw, 110px));
  padding-bottom: clamp(36px, 5vw, 76px);
  background: #0A0B0C;
}
.phero__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Het scherptepunt: welk deel van de foto in beeld blijft wanneer het
     vlak smaller of lager wordt dan de foto zelf. */
  object-position: var(--phero-x, 50%) var(--phero-y, 50%);
}
/* De sluier. Donker van links en van onderen, zodat de kop leesbaar is
   zonder de foto plat te maken. De diepte is instelbaar; de vorm niet —
   dat houdt elke pagina in dezelfde familie. */
.phero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(8, 9, 10, calc(0.34 + var(--phero-dim, 0.4) * 0.92)) 0%,
      rgba(8, 9, 10, calc(0.16 + var(--phero-dim, 0.4) * 0.72)) 42%,
      rgba(8, 9, 10, calc(var(--phero-dim, 0.4) * 0.28)) 100%),
    linear-gradient(0deg,
      rgba(8, 9, 10, calc(0.28 + var(--phero-dim, 0.4) * 0.7)) 0%,
      rgba(8, 9, 10, 0) 58%),
    linear-gradient(180deg, rgba(8, 9, 10, 0.72) 0%, rgba(8, 9, 10, 0) 26%);
}
.phero__inner { position: relative; z-index: 1; }
.phero__t {
  margin-top: 14px;
  font-size: clamp(34px, 5vw, 76px);
  max-width: 24ch;
}
.phero__l { margin-top: clamp(14px, 1.8vw, 22px); max-width: 48ch; }
.phero__meta {
  margin-top: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-faint);
}
.phero__acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: clamp(22px, 3vw, 34px); }

/* Drie korte punten onder de knoppen, met een icoon ervoor. */
.phero__points {
  list-style: none; display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 54px);
  margin-top: clamp(24px, 3.4vw, 44px);
}
.phero__points li {
  display: flex; align-items: center; gap: 11px;
  font-size: 13.5px; line-height: 1.45; color: var(--fg-muted); max-width: 22ch;
}
.phero__pico { color: var(--gold); flex-shrink: 0; }

/* Kruimelpad in de kop: stiller dan op een gewone pagina. */
.phero__inner .crumbs { margin-bottom: clamp(12px, 1.6vw, 20px); }

@media (max-width: 900px) {
  .phero {
    min-height: clamp(420px, 82vw, 560px);
    padding-top: calc(var(--navh) + clamp(32px, 12vw, 70px));
  }
  .phero__t { font-size: clamp(30px, 8.6vw, 44px); max-width: 100%; }
  .phero__l { max-width: 100%; }
  /* Op een smal scherm staat de tekst over de foto in plaats van ernaast:
     de sluier wordt daarom van onderen zwaarder en van links lichter. */
  .phero::after {
    background:
      linear-gradient(0deg,
        rgba(8, 9, 10, calc(0.42 + var(--phero-dim, 0.4) * 0.86)) 0%,
        rgba(8, 9, 10, calc(var(--phero-dim, 0.4) * 0.3)) 72%),
      linear-gradient(180deg, rgba(8, 9, 10, 0.8) 0%, rgba(8, 9, 10, 0) 30%);
  }
  .phero__points { gap: 14px 24px; }
  .phero__points li { font-size: 12.5px; max-width: 100%; }
}

/* ============================================================
   HULPKAARTEN — support, dealers, downloads
   Gedeeld door de homepage en de supportpagina.
============================================================ */
.helpdesk { padding-block: clamp(48px, 6vw, 84px); border-top: 1px solid var(--line-soft); }
.helpdesk__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(24px, 3.4vw, 52px); }
/* Geen tegel: een haarlijn boven elke kolom. Drie omrande vlakken naast
   elkaar lezen als een keuzemenu; drie kolommen onder één lijn lezen als
   één blok informatie met drie ingangen. */
.hcard {
  display: flex; flex-direction: column; gap: 8px;
  border: 0; border-top: 1px solid var(--line); border-radius: 0;
  background: none; padding: clamp(18px, 2.2vw, 24px) 0 0;
  transition: border-color 0.25s var(--ease);
}
.hcard:hover { border-top-color: var(--gold); }
.hcard__icon { color: var(--gold); margin-bottom: 4px; }
.hcard__title { font-size: clamp(17px, 1.7vw, 19px); font-weight: 600; letter-spacing: -0.024em; }
.hcard__line { font-size: 14px; line-height: 1.65; color: var(--fg-muted); max-width: 40ch; }
.hcard__go { margin-top: auto; padding-top: 12px; font-size: 13.5px; font-weight: 500; color: var(--gold); }
.hcard:hover .hcard__go span { display: inline-block; transform: translateX(4px); transition: transform 0.25s var(--ease); }

/* ============================================================
   16 · MEERTALIGE BLOKKEN
============================================================ */
[data-lang-block][hidden] { display: none; }

/* ============================================================
   17 · COOKIEVOORKEUREN
============================================================ */
.consent { position: fixed; inset: 0; z-index: 140; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(5, 6, 7, 0.72); }
.consent__dialog {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
  max-width: 520px; width: 100%; max-height: calc(100vh - 40px); overflow-y: auto; padding: 24px;
}
.consent__title { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 8px; }
.consent__text { font-size: 14px; line-height: 1.6; color: var(--fg-muted); }
.consent__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.consent__link { color: var(--fg); border-bottom: 1px solid var(--line-strong); }
.consent__cats { margin-top: 14px; display: grid; gap: 10px; }
.consent__cat { border: 1px solid var(--line-soft); border-radius: var(--r-s); padding: 12px; background: var(--surface-2); }
.consent__cathead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.consent__catlabel { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.consent__catlabel input { width: 16px; height: 16px; accent-color: var(--gold); }
.consent__badge { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }
.consent__catdesc { font-size: 12.5px; line-height: 1.6; color: var(--fg-muted); margin-top: 6px; }

/* ============================================================
   18 · KORTINGSCODE
============================================================ */
.coupon-form { display: flex; gap: 8px; margin-top: 14px; }
.coupon-form .field { flex: 1; }
.coupon-applied { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 14px; font-family: var(--mono); font-size: 12px; color: var(--fg-muted); }
.coupon-applied .code { color: var(--gold); border: 1px solid var(--line); border-radius: var(--r-s); padding: 2px 8px; background: var(--surface-2); }
.coupon-error { margin-top: 10px; font-family: var(--mono); font-size: 11.5px; color: var(--danger); line-height: 1.6; }

/* ============================================================
   19 · RESPONSIVE — gedeelde onderdelen
============================================================ */
@media (max-width: 1080px) {
  .nav__links { display: none; }
  .nav__menu { display: flex; }
}
@media (max-width: 680px) {
  :root { --navh: 60px; }
  .nav__logo img { height: 19px; }
  .nav__cart, .nav__reserve { padding: 7px 12px; font-size: 11px; }
}
@media (max-width: 420px) {
  .nav { padding-inline: 16px; }
  .nav__right { gap: 10px; }
  .lang { display: none; } /* taalkeuze staat in de drawer */
}

/* ============================================================
   20 · BEWEGING BEPERKEN
============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .toast { opacity: 1; transform: none; }
}