/* ─────────────────────────────────────────────────────────────
   Goedkopecomputer.nl — ontwerpsysteem
   Zeefdruk: papieren canvas, zwarte vellen voor kop en voet, roze op
   licht en cyaan op donker. Randen zijn inkt, schaduwen zijn verschoven
   vlakken en geen vervaging, hoeken zijn recht.

   Twee letters. Manrope leest, Archivo Black drukt: koppen, prijzen en
   knoppen, nooit een alinea.

   Waarom twee accentkleuren: roze leest op papier (6,0:1) en niet op
   inkt (3,2:1), cyaan andersom. Een zeefdruk heeft daarom twee
   steunkleuren, en welke je pakt hangt af van het vel waarop je drukt.

   `.prose` staat bewust vóór de componenten, zodat `.blockbody` hem kan
   overrulen. Verplaats die volgorde niet. */

/* ══ 1. Font ═══════════════════════════════════════════════════
   Manrope, lokaal self-hosted (variabel gewicht 200–800), géén
   externe requests naar Google Fonts. Bestanden in /public/fonts. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/manrope-latin.woff2') format('woff2');
  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+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/manrope-latin-ext.woff2') format('woff2');
  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;
}

/* Archivo Black, lokaal self-hosted (enkel gewicht 400), géén
   externe requests naar Google Fonts. Bestanden in /public/fonts. */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/archivo-black-latin.woff2') format('woff2');
  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+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/archivo-black-latin-ext.woff2') format('woff2');
  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 {
  /* ── Accent op licht ──
     Roze uit de zeefdrukken zelf, geteld over alle zesendertig beelden: het
     komt daar op 14% van elk vlak. Twee dieptes, en het verschil is geen smaak
     maar contrast. `--accent` draagt witte tekst (5,8:1) en `--accent-700` is
     de tekstkleur op papier (6,0:1). Het felle roze uit de druk zelf haalt
     geen van beide en staat daarom apart. */
  --accent: #c41461;
  --accent-600: #a50f51; /* hover */
  --accent-700: #b01055;
  --accent-50: #fae3ee; /* zachte tint */
  --accent-200: #efb3ce; /* rand op tint */
  --on-accent: #ffffff;

  /* Het felle roze van de druk. Alleen voor grote vlakken en displayletters,
     nooit voor tekst onder de 24px: het haalt op geen enkele ondergrond 4,5:1. */
  --accent-fel: #e8106e;

  /* ── Accent op donker ──
     Roze werkt niet op zwart: het diepe roze komt op inkt niet boven 3,2:1 uit
     en het felle niet boven 4,1:1. Op de zwarte vellen doet cyaan dat werk wel,
     met 9,1:1. Dat is precies waarom een zeefdruk twee steunkleuren heeft: de
     ene leest op papier, de andere op inkt. */
  --accent-donker: #3fc8dc;

  /* Prijs en korting. Groen zegt hier "voordeel" en niet "gelukt"; het is de
     enige plek waar een derde kleur betekenis draagt. */
  --deal: #0f7a4b;
  --deal-50: #e4f1ea;

  /* inkt / tekst */
  --ink: #15151a;
  --ink-2: #3a3a44;
  --ink-3: #5a5a66;
  --muted: #5f5f69;
  --muted-2: #6e6e78;
  --faint: #9a9aa2;

  /* ── Papier ──
     Geen wit. Een zeefdruk ligt op papier, en het verschil tussen #fff en deze
     tint is precies wat de hele stijl draagt. De kaarten staan er wel wit op:
     dat is het onbedrukte vlak. */
  --bg: #f4eee2;
  --bg-soft: #efe8da;
  --bg-tint: #eae2d2;
  --bg-tile: #e2d9c6;

  /* Het vlak onder een productfoto. Bewust bijna wit en niet papierkleurig:
     productfoto's worden met `mix-blend-mode: multiply` in hun ondergrond
     vermenigvuldigd om de witte rand eromheen te verbergen. Op papierkleur
     krijgt elke laptop daardoor een beige waas. */
  --bg-foto: #faf7f0;

  /* Het onbedrukte vlak van een kaart. Stond op vijfentwintig plaatsen als
     letterlijke #fff; sinds er papierkleur bestaat, moet dat een token zijn. */
  --kaart: #ffffff;

  /* ── Lijnen ──
     Een rand is inkt, geen grijs. Dat is de kern van de stijl: de drukker legt
     een lijn of hij legt hem niet. `--line-2` blijft zacht voor scheidingen
     binnen een blok, waar een zwarte streep te veel zou zeggen. */
  --line: #15151a;
  --line-2: #c9c2b4;

  /* donkere modules (header/footer/hero B) */
  --dark: #15151a;
  --dark-2: #0f0f13;
  --dark-chip: #26262e;
  --line-dark: #35353f;

  /* tekst op donker */
  --on-dark: #f4eee2;
  --on-dark-soft: #d8d2c6;
  --on-dark-mute: #aba79c;
  --on-dark-faint: #8a867c;

  /* functioneel */
  --ok: #0f7a4b;
  --urgent: #c8452e;

  /* ── Type ──
     Manrope blijft de leesletter; die stond er al en leest goed op klein
     formaat. Archivo Black komt erbij voor koppen, prijzen en knoppen: kort
     gezette tekst die als drukwerk moet lezen. Nooit voor een alinea. */
  --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-krant: 'Archivo Black', 'Arial Black', var(--font-sans);

  /* maat */
  --maxw: 1280px;

  /* ── Vorm ──
     Nul. Een zeefdruk heeft geen afgeronde hoeken; het papier wordt gesneden.
     De drie tokens blijven bestaan omdat ze op tien plaatsen worden
     aangeroepen, maar ze zetten nu allemaal hetzelfde. */
  --radius-card: 0;
  --radius-tile: 0;
  --radius-btn: 0;

  /* ── Schaduw ──
     Verschoven en massief, nooit vervaagd. Dat is de misregistratie van een
     drukker die het tweede vel niet precies op het eerste legt, en het is het
     enige dieptesignaal dat deze stijl heeft. */
  --rand: 3px solid var(--ink);
  --schaduw: 6px 6px 0 var(--ink);
  --schaduw-groot: 9px 9px 0 var(--ink);
  --schaduw-fel: 6px 6px 0 var(--accent-fel);
  --shadow-card: 3px 3px 0 var(--ink);
  --shadow-pop: 8px 8px 0 var(--ink);

  /* ── legacy-aliassen: oude redactie-componenten blijven bouwen
        tot Fase 2 ze verwijdert. Niet gebruiken in nieuwe code. ── */
  --asphalt: var(--dark);
  --asphalt-2: var(--dark-2);
  --asphalt-3: #0a0a0d;
  --paper: var(--bg-soft);
  --paper-card: var(--kaart);
  --paper-tint: var(--bg-tint);
  --amber: var(--accent);
  --steel: var(--muted);
  --lane: var(--line);
  --ink-soft: #26262e;
  --ink-mute: var(--ink-2);
  --ink-faint: var(--ink-3);
  --in-stock: var(--ok);
  --in-stock-ink: #0f7a4b;
  --urgent-ink: #b23a22;
  --font-display: var(--font-krant);
  --font-body: var(--font-sans);
  --font-mono: var(--font-sans);
  --maxw-narrow: 1120px;
  --read: 680px;
  --radius: var(--radius-tile);
}

* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font-family: inherit;
}
::selection {
  background: var(--accent);
  color: var(--on-accent);
}
*::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}
*::-webkit-scrollbar-thumb {
  background: rgba(60, 58, 52, 0.4);
  border-radius: 8px;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* layout-helpers */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: 40px;
}
.eyebrow {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 400;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 0;
  /* Eén graad scheef, en niet meer. Dit is het enige element op de pagina dat
     uit het lood hangt; twee scheve dingen naast elkaar leest als een fout. */
  transform: rotate(-1.2deg);
}
.pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

@media (max-width: 640px) {
  .wrap {
    padding-inline: 18px;
  }
}

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

/* ── Leeskolom-prose (oude artikel-render; vars draaien op aliassen) ── */
.prose {
  color: var(--ink-soft);
}
.prose > :first-child {
  margin-top: 0;
}
.prose h2,
.prose h3 {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.12;
}
.prose h2 {
  font-size: clamp(24px, 3.4vw, 31px);
  margin: 46px 0 0;
}
.prose h3 {
  font-size: clamp(22px, 2.8vw, 27px);
  margin: 42px 0 0;
}
.prose p {
  font-size: 17px;
  line-height: 1.72;
  margin: 14px 0 0;
}
.prose ul,
.prose ol {
  margin: 16px 0 0;
  padding-left: 1.1em;
  display: grid;
  gap: 10px;
}
.prose strong {
  color: var(--ink);
  font-weight: 700;
}
/* Alleen kále links: een <a> mét klasse is een component — een knop, een
   productnaam — die zijn eigen kleur meebrengt. Stond hier `.prose a`, dan won
   die (specificiteit 0,1,1) van `.pick__cta` en `.cmp__cta` (0,1,0), en kreeg
   de oranje knop oranje tekst: 1,6:1, in de praktijk onleesbaar. `.cmp__name`
   ging op dezelfde manier van inkt naar oranje. Onderstrepen deed het ook bij
   alle drie. Voeg je hier een selector toe, houd `:not([class])` dan intact. */
.prose a:not([class]) {
  color: var(--accent-700);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}

/* ══ 2b. Drukletter ═══════════════════════════════════════════
   Archivo Black doet het werk waarvoor een zeefdrukker een houten letter uit
   de kast haalde: koppen, prijzen, knoppen, korte labels. Nooit een alinea, en
   nooit onder de 11px, want zwaar gezette kleine letters lopen dicht.

   Dit staat bewust op één plek en niet verspreid door de componenten. De
   letterkeuze is een systeemafspraak; verandert hij, dan verandert hij overal
   tegelijk. */
.hero__h1,
.hub__h1,
.clead__h1,
.lead__h1,
.art__h1,
.page__title,
.nf__h1,
.block__title,
.cbody__title,
.rel__title,
.lijstkop__titel,
.hd__name,
.ft__name,
.acard__title,
.cat__title,
.pick__naam,
.cijfers__num,
.prose h2,
.prose h3,
.blockbody h2,
.bb__h2,
.blockbody h3,
.bb__h3 {
  font-family: var(--font-krant);
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* Prijzen en knoppen: kort, en ze moeten van een afstand te lezen zijn. */
.btn,
.pc__cta,
.pt__knop,
.pick__cta,
.cmp__cta,
.bb__cta-btn,
.form__knop,
.zoek__knop,
.pc__bedrag,
.pt__bedrag,
.pick__prijs,
.eyebrow,
.pill {
  font-family: var(--font-krant);
  font-weight: 400;
}

/* Een zwaardere letter heeft minder ruimte tussen de regels nodig; op de
   grote koppen liep hij anders uit elkaar. */
.hero__h1,
.hub__h1,
.clead__h1,
.lead__h1,
.art__h1 {
  line-height: 1.02;
}

/* ══ 2c. Raster ═══════════════════════════════════════════════
   De rasterpunten van een zeefdruk, over de hele pagina. Twee dingen houden
   het draaglijk: de dekking van zes procent, en `multiply`, waardoor het
   patroon in de papierkleur zakt in plaats van er als een grijs waas overheen
   te liggen. Op donkere vlakken doet het niets zichtbaars, en dat klopt: daar
   is de inkt vol.

   Het element staat in de layout, buiten de leesvolgorde. Zonder
   `pointer-events: none` vangt het elke klik op de pagina op. */
.raster {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: radial-gradient(var(--ink) 1px, transparent 1.4px);
  background-size: 5px 5px;
  opacity: 0.06;
  mix-blend-mode: multiply;
}
@media (prefers-reduced-motion: reduce) {
  .raster {
    opacity: 0.04;
  }
}

/* ══ 3. Layout-chrome (Base.astro) ════════════════════════════ */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--on-accent);
  padding: 10px 16px;
  font-weight: 700;
  border-radius: 0;
}
.skip:focus {
  left: 0;
}
main {
  display: block;
}

/* ══ 4. Header ════════════════════════════════════════════════ */
.hd {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--dark);
}
.hd__inner {
  max-width: 1520px;
  margin: 0 auto;
  height: 74px;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.hd__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: none;
}
/* Het merkteken staat rechtstreeks op de donkere balk. Er zat een roze
   vierkant omheen; dat sloot de kubus op zonder iets toe te voegen, en de
   omgekeerde kubus (papierwit op inkt) heeft geen drager nodig. */
.hd__mark {
  display: grid;
  place-items: center;
  flex: none;
}
/* Eigen logo. De hoogte komt als eigenschap mee vanuit de instellingen; de
   breedte volgt zodat het nooit vervormt. `max-width` is de rem: een heel breed
   logo mag de navigatie niet van het scherm duwen. */
.hd__logo {
  height: var(--logo-mobiel, 28px);
  width: auto;
  max-width: 62vw;
  display: block;
}
@media (min-width: 740px) {
  .hd__logo {
    height: var(--logo-desktop, 34px);
    max-width: 320px;
  }
}
.hd__name {
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--on-dark);
  white-space: nowrap;
}
.hd__tld {
  color: var(--accent-donker);
}
.hd__nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.hd__link {
  font-weight: 600;
  font-size: 15px;
  color: var(--on-dark-soft);
  white-space: nowrap;
  transition: color 0.15s ease;
}
.hd__link--strong {
  color: var(--on-dark);
  font-weight: 700;
}
.hd__link:hover,
.hd__link.is-active {
  color: var(--accent-donker);
}
.hd__toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 0;
  background: var(--dark-chip);
  color: var(--on-dark);
  cursor: pointer;
  place-items: center;
}

/* Hamburger of kruis, afhankelijk van of het menu openstaat.

   Gestuurd door `aria-expanded` op de knop en niet door een eigen klasse: dat
   attribuut wordt toch al bijgewerkt en is wat hulpsoftware voorleest. Zo kan
   het icoon niet iets anders zeggen dan de knop. Beide iconen staan in de
   opmaak; alleen de zichtbaarheid wisselt, dus er is geen tweede laadmoment. */
.hd__ic {
  display: inline-flex;
  /* Ze staan op dezelfde plek, zodat de knop niet verspringt bij het wisselen. */
  grid-area: 1 / 1;
}
.hd__ic--sluit,
.hd__toggle[aria-expanded='true'] .hd__ic--menu {
  display: none;
}
.hd__toggle[aria-expanded='true'] .hd__ic--sluit {
  display: inline-flex;
}

/* Onder de 360px past de merknaam niet meer naast de hamburgerknop. Het
   woordmerk staat op `nowrap` — terecht, "Goedkope computer.nl" over twee
   regels is geen merknaam — dus er moet iets anders wijken: het teken en de
   letter worden een maat kleiner. Zonder dit duwde de knop de balk veertien
   pixels buiten beeld, en dan schuift élke pagina opzij, want de kop staat
   overal. */
@media (max-width: 359px) {
  .hd__inner {
    padding: 0 12px;
    gap: 12px;
  }
  .hd__name {
    font-size: 16px;
  }
  .hd__mark svg {
    width: 30px;
    height: 30px;
  }
  .hd__toggle {
    width: 38px;
    height: 38px;
  }
}

/* Het breekpunt lag op 900px en dat was krap geworden: de merknaam staat nu in
   Archivo Black en is daarmee breder, waardoor de balk tussen 900 en 1100
   pixels buiten het scherm liep. */
@media (max-width: 1100px) {
  .hd__inner {
    padding: 0 18px;
    height: 60px;
  }
  .hd__toggle {
    display: grid;
  }

  /* Het menu hangt ónder de balk in plaats van erin.
     Eerder stond hier `flex-wrap: wrap` met een nav van `width: 100%`, zodat
     het menu een tweede regel werd binnen een container die op 60px vastzat.
     Gevolg: het menu viel buiten de header, en omdat de achtergrond op .hd zit
     en niet op het menu zelf, zweefde het zonder achtergrond over de pagina.
     Datzelfde omvouwen herverdeelde ook logo en knop over de balk — het
     verspringen dat je zag bij het openen.

     Absoluut ten opzichte van .hd (die is sticky en dus een positioneringspunt),
     zodat de balk zelf onaangeroerd 60px blijft. */
  .hd__nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 8px 18px 14px;
    background: var(--dark);
    border-top: 1px solid var(--line-dark);
    box-shadow: 0 8px 0 rgb(21 21 26 / 35%);
    /* Past het niet op een klein scherm, dan scrollt het menu zelf in plaats
       van door te lopen tot buiten beeld. */
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
  }
  .hd__nav.is-open {
    display: flex;
  }
  .hd__link {
    width: 100%;
    padding: 12px 4px;
    border-bottom: 1px solid var(--line-dark);
    font-size: 16px;
  }
  .hd__link:last-child {
    border-bottom: 0;
  }
}

/* ══ 5. Footer ════════════════════════════════════════════════ */
.ft {
  background: var(--dark);
  color: var(--on-dark-mute);
}
.ft__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 48px 40px 32px;
}
.ft__cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line-dark);
}
.ft__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
/* Zelfde verhaal als .hd__mark: geen vlak eromheen. */
.ft__mark {
  display: grid;
  place-items: center;
}
.ft__name {
  font-weight: 800;
  font-size: 17px;
  color: var(--on-dark);
}
.ft__tld {
  color: var(--accent-donker);
}
.ft__tag {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  max-width: 320px;
}
.ft__head {
  font-weight: 700;
  font-size: 14px;
  color: var(--on-dark);
  margin-bottom: 13px;
}
.ft__links {
  display: grid;
  gap: 9px;
}
.ft__links a {
  color: var(--on-dark-mute);
  font-size: 14px;
  transition: color 0.15s ease;
}
.ft__links a:hover {
  color: var(--accent-donker);
}
.ft__disclosure {
  margin: 24px 0 0;
  padding: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--on-dark-faint);
}
.ft__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  flex-wrap: wrap;
  gap: 14px;
}
.ft__legal {
  font-size: 13px;
}
.ft__company {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--on-dark-faint);
}
.ft__badges {
  display: flex;
  gap: 20px;
}
.ft__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--on-dark-mute);
}
.ft__badge svg {
  color: var(--accent-donker);
}
@media (max-width: 760px) {
  .ft__cols {
    grid-template-columns: 1fr 1fr;
  }
  .ft__about {
    grid-column: 1 / -1;
  }
}
@media (max-width: 600px) {
  .ft__inner {
    padding: 40px 22px 28px;
  }
}

/* ══ 6. Broodkruimel ══════════════════════════════════════════ */
.crumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-3);
}
.crumb li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.crumb a {
  color: var(--ink-3);
  transition: color 0.15s ease;
}
.crumb a:hover {
  color: var(--accent-700);
}
.crumb [aria-current] {
  color: var(--ink);
  font-weight: 600;
}
.crumb__sep {
  color: var(--faint);
  display: inline-flex;
}

/* ══ 7. CoverImage ════════════════════════════════════════════ */
.cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cover--tint {
  background: var(--bg-tile);
}

/* ══ 8. StarRating ════════════════════════════════════════════ */
.stars {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.stars__row {
  display: inline-flex;
  gap: 2px;
}
.stars__ic {
  color: var(--line-2);
  display: inline-flex;
}
.stars__ic.is-on {
  color: var(--accent);
}
.stars__val {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}

/* ══ 9. ArticleCard ═══════════════════════════════════════════ */
.acard {
  display: flex;
  flex-direction: column;
  background: var(--kaart);
  border: var(--rand);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition:
    box-shadow 0.18s ease,
    transform 0.18s ease,
    border-color 0.18s ease;
}
.acard:hover {
  box-shadow: var(--schaduw-groot);
  transform: translate(-2px, -2px);
}
.acard__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-tile);
  display: grid;
  place-items: center;
  flex: none;
}
.acard__chip {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--dark);
  color: var(--on-dark);
  font-weight: 700;
  font-size: 11px;
  text-transform: capitalize;
  padding: 5px 10px;
  border-radius: 0;
  z-index: 1;
}
.acard__body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.acard__title {
  margin: 0 0 8px;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.acard__dek {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.acard__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
}
.acard__read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.acard__go {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent-700);
}

/* ══ 10. CategoryTile ═════════════════════════════════════════ */
.cat {
  display: flex;
  flex-direction: column;
  background: var(--kaart);
  border: var(--rand);
  border-radius: var(--radius-tile);
  padding: 22px;
  height: 100%;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.cat:hover {
  box-shadow: var(--schaduw-groot);
  transform: translate(-2px, -2px);
}
.cat__icon {
  width: 46px;
  height: 46px;
  border-radius: 0;
  background: var(--dark);
  color: var(--accent-donker);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.cat__title {
  display: block;
  font-weight: 800;
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 5px;
}
.cat__sub {
  display: block;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}
.cat__go {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-700);
}

/* ══ 11. AffiliateDisclaimer ══════════════════════════════════ */
/* Eén regel, geen blok.

   De melding moet vóór de affiliate-links staan — dat is de strekking van de
   Associates-overeenkomst en van de reclameregels, en onderaan zou betekenen
   dat de meeste lezers al geklikt hebben voor ze hem zien. Maar ze hoeft de
   pagina ook niet te openen met een omkaderd waarschuwingsvak: als dunne regel
   is ze even goed te lezen en neemt ze een derde van de ruimte.

   Ze verschijnt alleen op artikelen die daadwerkelijk affiliate-links bevatten;
   zie article.blade.php. */
.disc {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 12px;
}
.disc__ic {
  color: var(--accent-700);
  flex: none;
  /* Uitlijnen op de basislijn van de tekst in plaats van op de bovenkant. */
  align-self: center;
}
.disc a {
  color: var(--accent-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ══ 12. AuthorBlock ══════════════════════════════════════════ */
.author {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--bg-tint);
  border: var(--rand);
  border-radius: var(--radius-card);
  padding: 22px;
  box-shadow: var(--schaduw);
}
.author__avatar {
  width: 46px;
  height: 46px;
  border-radius: 0;
  background: var(--dark);
  color: var(--accent-donker);
  display: grid;
  place-items: center;
  flex: none;
}
.author__name {
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 6px;
}
.author__blurb {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* ══ 13. RelatedArticles ══════════════════════════════════════ */
.rel__title {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 18px;
}
.rel__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 860px) {
  .rel__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .rel__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ══ 14. FaqAccordion ═════════════════════════════════════════ */
.faq__title {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 18px;
}
.faq__list {
  display: grid;
  gap: 12px;
}
.faq__item {
  border: var(--rand);
  border-radius: var(--radius-btn);
  background: var(--kaart);
  overflow: hidden;
  box-shadow: var(--schaduw);
}
.faq__item[open] {
  /* Het kader blijft; "open" laat je zien aan de chevron, niet door de
     rand weg te halen. Een accentkleurige rand van 3px haalde op de kaart
     maar 1,75:1 en verdween daarmee. */
  box-shadow: var(--schaduw-groot);
}
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  padding: 16px 18px;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  list-style: none;
}
.faq__q::-webkit-details-marker {
  display: none;
}
.faq__chev {
  flex: none;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
  margin-top: -4px;
}
.faq__item[open] .faq__chev {
  transform: rotate(-135deg);
  margin-top: 4px;
}
.faq__a {
  padding: 0 18px 18px;
}
.faq__a :first-child {
  margin-top: 0;
}
.faq__a p {
  font-size: 15.5px;
  line-height: 1.65;
  margin: 0 0 10px;
}

/* ══ 15. OnzeCijfers ══════════════════════════════════════════ */
.cijfers {
  background: var(--bg-tint);
  border: var(--rand);
  border-radius: var(--radius-card);
  padding: 26px 28px;
  box-shadow: var(--schaduw);
}
.cijfers__title {
  margin: 0 0 18px;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cijfers__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 22px;
}
.cijfers__num {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.02em;
  color: var(--accent-700);
}
.cijfers__aff {
  font-size: 18px;
}
.cijfers__label {
  margin-top: 4px;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}
.cijfers__sub {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-3);
}
.cijfers__src {
  margin: 18px 0 0;
  font-size: 12.5px;
  color: var(--ink-3);
}
.cijfers__src a {
  color: var(--accent-700);
  text-decoration: underline;
}

/* ══ 16. PickBlock (productkaart) ═════════════════════════════ */
.pick {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 26px;
  border: var(--rand);
  border-radius: var(--radius-card);
  padding: 22px;
  background: var(--kaart);
  scroll-margin-top: 90px;
  box-shadow: var(--schaduw);
}
.pick__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-tile);
  border-radius: var(--radius-tile);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.pick__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  z-index: 1;
}
.pick__head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.pick__no {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 0;
  background: var(--dark);
  color: var(--on-dark);
  font-weight: 800;
  font-size: 15px;
  display: grid;
  place-items: center;
  margin-top: 2px;
}
.pick__brand {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-700);
  margin-bottom: 2px;
}
.pick__name {
  margin: 0;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
}
.pick__meta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.pick__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* contain, niet cover: productfoto's staan op wit en mogen niet bijgesneden. */
  object-fit: contain;
  padding: 12px;
  display: block;
}
.pick__price {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-weight: 800;
  font-size: 18px;
  color: var(--ink);
}
.pick__pricelabel {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-3);
}
.pick__forwho {
  margin: 14px 0 0;
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.55;
}
.pick__forwho strong {
  color: var(--ink);
}
.pick__specs {
  margin: 16px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  /* De rasterlijnen zijn hier de achtergrond die door een gat van 1px
     schijnt, geen echte rand. Met inkt zou een oneven aantal specs een
     halve kolom massief zwart maken, want de lege cel toont dit vlak. */
  background: var(--line-2);
  border: var(--rand);
  border-radius: var(--radius-btn);
  overflow: hidden;
}
.pick__spec {
  background: var(--bg-soft);
  padding: 9px 12px;
}
.pick__spec dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-3);
  font-weight: 700;
}
.pick__spec dd {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.pick__pc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 22px;
  margin-top: 16px;
}
.pick__pros,
.pick__cons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 14px;
  line-height: 1.45;
}
.pick__pros li,
.pick__cons li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--ink-2);
}
.pick__ic {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 0;
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.pick__ic--ok {
  background: var(--deal-50);
  color: var(--ok);
}
.pick__ic--no {
  background: var(--bg-tile);
  color: var(--muted);
}
.pick__text {
  margin-top: 16px;
}
.pick__text p {
  font-size: 15.5px;
  line-height: 1.65;
  margin: 12px 0 0;
}
.pick__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 20px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 15px;
  padding: 13px 22px;
  border-radius: var(--radius-btn);
  transition: background 0.15s ease;
}
.pick__cta:hover {
  background: var(--accent-600);
}
.pick__ctax {
  display: inline-flex;
}
@media (max-width: 700px) {
  .pick {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .pick__media {
    aspect-ratio: 16 / 9;
  }
  .pick__pc,
  .pick__specs {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ══ 17. ComparisonTable ══════════════════════════════════════ */
.cmp {
  border: var(--rand);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--schaduw);
}
.cmp__scroll {
  overflow-x: auto;
}
.cmp__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 560px;
}
.cmp__table thead th {
  text-align: left;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--bg-tint);
  padding: 12px 14px;
  white-space: nowrap;
}
.cmp__table tbody td {
  padding: 14px;
  border-top: 1px solid var(--line-2);
  vertical-align: middle;
}
.cmp__name {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  font-weight: 700;
  color: var(--ink);
}
.cmp__name:hover {
  color: var(--accent-700);
}
.cmp__badge {
  align-self: flex-start;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.cmp__spec {
  color: var(--ink-2);
}
.cmp__price {
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cmp__pricedate {
  display: block;
  font-weight: 600;
  font-size: 11px;
  color: var(--ink-3);
}
.cmp__ctacell {
  text-align: right;
}
.cmp__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 13px;
  padding: 9px 14px;
  border-radius: var(--radius-btn);
  white-space: nowrap;
  transition: background 0.15s ease;
}
.cmp__cta:hover {
  background: var(--accent-600);
}
.cmp__ctax {
  display: inline-flex;
}

/* Op een smal scherm stapelt de vergelijkingstabel tot een kaartje per product.

   De tabel is minstens 560px breed en zat in een vak dat op een telefoon zo'n
   345px meet: er stond dus bijna de helft buiten beeld. Hij scrolde wel
   zijwaarts, maar zonder zichtbare aanwijzing — je zag een afgekapte tabel en
   moest maar raden dat er meer was. Vijf kolommen naast elkaar zijn op die
   breedte sowieso niet te lezen, dus zijwaarts scrollen is hier niet de
   oplossing maar het probleem.

   De kolomkoppen verdwijnen bij het stapelen; `data-kolom` op de cel zet het
   label vóór de waarde terug (zie comparison-table.blade.php). Dat attribuut
   moet expliciet langs de HtmlSanitizer — zie AppServiceProvider, en de test
   in FrontendTest die daarop let.

   739px is gemeten en geen rond getal: vanaf 740px past de tabel volledig in
   de tekstkolom. Leg je de grens lager, dan houd je een strook over die
   buiten beeld valt zonder dat iemand dat ziet. */
@media (max-width: 739px) {
  .cmp__scroll {
    overflow-x: visible;
  }
  .cmp__table {
    min-width: 0;
  }
  .cmp__table,
  .cmp__table tbody,
  .cmp__table tr,
  .cmp__table td {
    display: block;
    width: auto;
  }
  .cmp__table thead {
    display: none;
  }
  .cmp__table tbody tr {
    padding: 14px;
    border-top: 1px solid var(--line);
  }
  .cmp__table tbody tr:first-child {
    border-top: 0;
  }
  .cmp__table tbody td {
    padding: 0;
    border-top: 0;
  }
  .cmp__prod {
    margin-bottom: 4px;
  }
  /* Label links, waarde rechts — leest als een specificatielijstje. */
  .cmp__table tbody td[data-kolom] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 0;
    border-top: 1px dashed var(--line);
  }
  .cmp__table tbody td[data-kolom]::before {
    content: attr(data-kolom);
    flex: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .cmp__ctacell {
    margin-top: 12px;
    text-align: left;
  }
  .cmp__cta {
    display: flex;
    justify-content: center;
    padding: 12px 14px;
    font-size: 14px;
  }
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ══ 18. Artikelinhoud (BlockRenderer → RichContentRenderer) ══ */
.blockbody {
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink-2);
}
.blockbody h2,
.bb__h2 {
  font-weight: 800;
  font-size: clamp(23px, 3.4vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.14;
  color: var(--ink);
  margin: 40px 0 14px;
  scroll-margin-top: 90px;
}
.blockbody > h2:first-child,
.bb__h2:first-child {
  margin-top: 8px;
}
.blockbody h3,
.bb__h3 {
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
  margin: 30px 0 10px;
  scroll-margin-top: 90px;
}
.blockbody p {
  font-size: 17px;
  margin: 0 0 18px;
}
/* Zie `.prose a:not([class])`: knoppen binnen de tekst houden hun eigen kleur. */
.blockbody a:not([class]) {
  color: var(--accent-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.blockbody ul,
.blockbody ol {
  display: block;
  margin: 0 0 18px;
  padding-left: 22px;
}
.blockbody li {
  margin-bottom: 8px;
}
/* TipTap zet elk lijstitem als <li><p>…</p></li>; die alinea mag geen eigen
   ondermarge krijgen, anders valt het lijstje uit elkaar. */
.blockbody li > p,
.blockbody blockquote > p:last-child {
  margin-bottom: 0;
}
.blockbody blockquote,
.bb__quote {
  margin: 24px 0;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--accent);
  font-style: italic;
  color: var(--ink);
}
.blockbody blockquote cite,
.bb__quote cite {
  display: block;
  font-style: normal;
  font-size: 14px;
  color: var(--ink-3);
  margin-top: 8px;
}
.bb__figure {
  margin: 28px 0;
}
.bb__img {
  position: relative;
  height: 320px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--bg-tile);
}
.bb__figure figcaption {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 8px;
}
.bb__stat,
.bb__product,
.bb__comparison {
  margin: 32px 0;
}
.bb__cta {
  margin: 28px 0;
  background: var(--accent-50);
  border: 1px solid var(--accent-200);
  border-radius: var(--radius-card);
  padding: 24px 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  justify-content: space-between;
  box-shadow: var(--schaduw);
}
.bb__cta-heading {
  font-weight: 800;
  font-size: 20px;
  color: var(--ink);
  margin-bottom: 6px;
}
.bb__cta-text p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
  max-width: 400px;
}
.bb__cta-btn {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 15px;
  padding: 13px 22px;
  border-radius: var(--radius-btn);
  text-decoration: none;
  white-space: nowrap;
}
.bb__cta-btn:hover {
  background: var(--accent-600);
}

/* ══ 19. Artikelpagina ════════════════════════════════════════ */
.art__inner {
  max-width: 840px;
  padding-block: 28px 80px;
}
.art__head {
  margin-top: 20px;
}
.art__h1 {
  margin: 0;
  font-weight: 800;
  font-size: clamp(30px, 5.2vw, 46px);
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--ink);
}
.art__dek {
  margin: 16px 0 0;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-2);
}
.art__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--ink-3);
}
.art__read {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.art__sep {
  color: var(--faint);
}
.art__disc {
  margin-top: 22px;
}
.art__body {
  margin-top: 24px;
}
.art__faq,
.art__rel,
.art__author {
  margin-top: 48px;
}

/* ══ 20. CMS-pagina ═══════════════════════════════════════════ */
.page__inner {
  max-width: var(--read, 760px);
  padding-block: 28px 80px;
}
.page__h1 {
  margin: 20px 0 0;
  font-weight: 800;
  font-size: clamp(30px, 5vw, 44px);
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--ink);
}
.page__lede {
  margin: 16px 0 0;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-2);
}
.page__body {
  margin-top: 24px;
}

/* ══ 21. Homepage ═════════════════════════════════════════════ */
.hero {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.hero__inner {
  padding-block: 68px 56px;
  /* Tekst links, beeld rechts. De kolommen staan niet gelijk: de kop moet de
     ruimte hebben om op drie regels te breken zonder dat het beeld hem
     verdringt. Onder de 940px valt het beeld eronder. */
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 48px;
  align-items: center;
}
.hero__inner:has(.hero__copy:only-child) {
  grid-template-columns: minmax(0, 1fr);
}
.hero__copy {
  max-width: 720px;
}
.hero__h1 {
  margin: 18px 0 0;
  font-weight: 800;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  /* De misregistratie van de drukker: het roze vel ligt drie pixels naast het
     zwarte. Alleen op de grootste kop van een pagina, anders wordt het een
     effect in plaats van een eigenschap. */
  text-shadow: 3px 3px 0 var(--accent-fel);
}
.hero__sub {
  margin: 18px 0 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 620px;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.hero__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 48px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  padding: 13px 22px;
  border-radius: var(--radius-btn);
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}
.btn--primary {
  background: var(--accent);
  /* Wit op dit roze haalt 5,8:1 en voldoet daarmee aan de WCAG-eis van
     4,5:1; zie --on-accent bij de tokens. */
  color: var(--on-accent);
}
.btn--primary:hover {
  background: var(--accent-600);
}
.btn--ghost {
  background: var(--kaart);
  color: var(--ink);
  border: var(--rand);
}
.btn--ghost:hover {
  border-color: var(--accent);
}

.block {
  padding-block: 56px 0;
}
/* Het laatste blok voor de voettekst.
   Dit stond op 8px, en dan raakt de onderrand van de laatste kaart bijna de
   donkere balk eronder — er zit dan minder lucht tussen het blok en de voet dan
   tussen twee regels in datzelfde blok. De ruimte hoort minstens zo groot te
   zijn als die bóven een blok, anders leest de voet als onderdeel van de
   inhoud. */
.block:last-of-type {
  padding-bottom: 56px;
}
.block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.block__title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(24px, 3.5vw, 30px);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.block__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14px;
  color: var(--accent-700);
  white-space: nowrap;
}

.trust {
  margin-top: 64px;
  background: var(--dark);
  color: var(--on-dark-soft);
}
.trust__inner {
  padding-block: 60px;
}
.trust__head {
  margin-bottom: 32px;
}
.trust__title {
  margin: 8px 0 0;
  font-weight: 800;
  font-size: clamp(24px, 3.5vw, 32px);
  letter-spacing: -0.02em;
  color: var(--on-dark);
}
.trust__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.trust__item h3 {
  margin: 14px 0 8px;
  font-weight: 700;
  font-size: 18px;
  color: var(--on-dark);
}
.trust__item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-dark-mute);
}
.trust__item a {
  color: var(--accent-donker);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.trust__ic {
  width: 46px;
  height: 46px;
  border-radius: 0;
  background: var(--dark-chip);
  color: var(--accent-donker);
  display: grid;
  place-items: center;
}

@media (max-width: 940px) {
  .hero__inner {
    padding-block: 48px;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .hero__cards {
    grid-template-columns: 1fr 1fr;
    margin-top: 36px;
  }
  .trust__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 620px) {
  .hero__cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .block__more {
    display: none;
  }
}

/* ══ 21b. De gidsen op de homepage ═════════════════════════════
   De landingspagina's zijn de reden dat deze site bestaat, dus staan ze boven
   de producten en niet als voetnoot eronder. Eén groot, vier als kaart, de rest
   als snelkoppeling: wie de eerste leest weet waar de site over gaat, wie de
   vierde ziet weet dat er meer is.

   Alleen gidsen mét beeld komen in de kaarten. Een kaart zonder beeld naast
   vier kaarten mét beeld leest als een fout en niet als variatie; het sjabloon
   filtert daarop. */
.gidskop {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 4px solid var(--ink);
  padding-bottom: 14px;
  margin-bottom: 28px;
}
.gidskop__uitleg {
  margin: 0;
  max-width: 34em;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  text-align: right;
}
.gidskop--donker {
  border-bottom-color: var(--on-dark);
}
.gidskop--donker .block__title {
  color: var(--on-dark);
}
.eyebrow--donker {
  color: var(--accent-donker);
}

/* De uitgelichte gids. Het beeld links, de tekst rechts, en de hele kaart in
   een kader met de verschoven tweede drukgang eronder. */
.gids-uit {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 28px;
  align-items: center;
  background: var(--kaart);
  border: 4px solid var(--ink);
  box-shadow: var(--schaduw-groot);
  padding: 22px;
}
.gids-uit__beeld {
  position: relative;
  aspect-ratio: 4 / 3;
  border: var(--rand);
  overflow: hidden;
  background: var(--bg-tile);
}
.gids-uit__titel {
  margin: 0;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.05;
}
.gids-uit__lede {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}
.gids-uit__stand {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 20px 0 0;
  font-size: 15px;
}
.gids-uit__go {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 3px solid var(--accent);
  padding-bottom: 2px;
}
.gids-uit__go:hover {
  color: var(--accent-700);
}
.gids__n {
  font-family: var(--font-krant);
  font-weight: 400;
  background: var(--ink);
  color: var(--on-dark);
  padding: 5px 10px;
  font-size: 13px;
}

/* De vier kaarten eronder. */
/* Overal `minmax(0, 1fr)` en nergens een kale `1fr`. Een 1fr-baan neemt de
   min-content-breedte van zijn inhoud als automatisch minimum; bij een
   producttabel of een beeld van twaalfhonderd pixels wordt de baan daardoor
   breder dan de telefoon en schuift de hele pagina opzij — kop, voet en al.
   Met een minimum van nul krimpt de baan wél mee. */
.gidsgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin-top: 26px;
}
.gids {
  display: flex;
  flex-direction: column;
  background: var(--kaart);
  border: var(--rand);
  box-shadow: var(--schaduw);
  transition:
    box-shadow 0.15s ease,
    transform 0.15s ease;
}
.gids:hover {
  box-shadow: var(--schaduw-groot);
  transform: translate(-2px, -2px);
}
.gids__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-bottom: var(--rand);
  overflow: hidden;
  background: var(--bg-tile);
}
.gids__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px 16px;
}
.gids__titel {
  font-family: var(--font-krant);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.15;
  color: var(--ink);
}
.gids__stand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 2px dashed var(--line-2);
}
.gids__vanaf {
  font-family: var(--font-krant);
  font-weight: 400;
  font-size: 16px;
  color: var(--accent-700);
}
.gidsalle {
  margin: 26px 0 0;
  text-align: center;
}
.chips--gidsen {
  margin-top: 26px;
}

/* Groepen op de gidsenpagina: per categorie een balk met het aantal erachter,
   daaronder hetzelfde raster als op de homepage. De kop is een balk en geen
   losse regel, want er staan er zes onder elkaar en zonder gewicht lopen de
   groepen in elkaar over. */
.gidsengroep + .gidsengroep {
  margin-top: 44px;
}
.gidsengroep__titel {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--ink);
  font-family: var(--font-krant);
  font-weight: 400;
  font-size: 22px;
}
.gidsengroep__n {
  margin-left: auto;
  font-family: var(--font-krant);
  font-weight: 400;
  font-size: 13px;
  background: var(--ink);
  color: var(--on-dark);
  padding: 4px 10px;
}
.gidsengroep .gidsgrid {
  margin-top: 0;
}

/* ══ 21c. De prijzen ═══════════════════════════════════════════
   Op een zwart vel, zodat het onmiskenbaar een ander soort blok is dan de
   gidsen erboven. De kaarten staan er ópl, in papierkleur met een verschoven
   schaduw, in plaats van erin te verdwijnen. */
.prijzen {
  background: var(--dark);
  color: var(--on-dark);
  padding: 54px 0 58px;
  margin-top: 20px;
}
.rangen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rang {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 24px;
  align-items: center;
  background: var(--bg);
  color: var(--ink);
  border: 4px solid var(--ink);
  box-shadow: 8px 8px 0 var(--accent-fel);
  padding: 16px 20px;
}
/* De tweede en de vierde krijgen de andere steunkleur: dat geeft de rij ritme
   zonder dat er iets méér mee bedoeld wordt. */
.rang:nth-child(even) {
  box-shadow: 8px 8px 0 var(--accent-donker);
}
.rang__nr {
  font-family: var(--font-krant);
  font-weight: 400;
  font-size: 46px;
  line-height: 0.8;
  color: var(--accent-fel);
  text-shadow: 3px 3px 0 var(--ink);
}
/* Het rangnummer blijft roze, ook op de even rijen. Cyaan haalt op papier maar
   1,7:1 en is daarmee onleesbaar; het ritme van de rij zit al in de schaduw,
   die decoratief is en dus geen contrasteis kent. */
.rang__body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}
.rang__naam {
  font-family: var(--font-krant);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.15;
  color: var(--ink);
}
.rang__naam:hover {
  color: var(--accent-700);
}
.rang__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rang__spec {
  border: 2px solid var(--ink);
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 700;
}
.rang__spec--winkel {
  border-style: dashed;
  border-color: var(--muted);
  color: var(--ink-3);
  font-weight: 600;
}
.rang__prijs {
  text-align: right;
}
.rang__vanaf {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rang__bedrag {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--font-krant);
  font-weight: 400;
  font-size: 23px;
  background: var(--ink);
  color: var(--on-dark);
  padding: 6px 13px;
}
.prijzen__meer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--on-dark);
  border-bottom: 3px solid var(--accent-donker);
  padding-bottom: 2px;
}

/* Het beeld naast de hero. Scheef in zijn kader, met het vlak eronder dat er
   net naast ligt. Eén graad, en alleen hier. */
.hero__beeld {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 4px solid var(--ink);
  background: var(--bg-tile);
  box-shadow: 12px 12px 0 var(--accent-fel);
  overflow: hidden;
  transform: rotate(-1.2deg);
}

@media (max-width: 940px) {
  .gidskop {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .gidskop__uitleg {
    text-align: left;
  }
  .gids-uit {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .gidsgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hero__beeld {
    transform: none;
    box-shadow: var(--schaduw-groot);
  }
}
@media (max-width: 620px) {
  .gidsgrid {
    grid-template-columns: minmax(0, 1fr);
  }
  /* De prijsrij wordt op een telefoon een kaart: drie kolommen naast elkaar
     laten het bedrag in twee regels breken. */
  .rang {
    grid-template-columns: 54px 1fr;
    gap: 14px;
  }
  .rang__nr {
    font-size: 32px;
  }
  .rang__prijs {
    grid-column: 2;
    text-align: left;
  }
  .rang__bedrag {
    font-size: 20px;
  }
}

/* ══ 22. Hubs (blog + koopgidsen) ═════════════════════════════ */
.hub {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  padding: 56px 0 44px;
}
.hub__h1 {
  margin: 12px 0 0;
  font-weight: 800;
  font-size: clamp(30px, 5vw, 46px);
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--ink);
}
.hub__intro {
  margin: 16px 0 0;
  max-width: 680px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
}
.hub__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.chip {
  /* Inline-flex en niet inline. Een inline-element rekent zijn padding en rand
     niet mee in de regelhoogte, dus met een rand van drie pixels liep de ene
     rij chips over de andere heen. Met een haarlijn viel dat niet op; sinds de
     randen inkt zijn, wel. */
  display: inline-flex;
  align-items: center;
  border: var(--rand);
  background: var(--kaart);
  border-radius: 0;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
}
.chip:hover {
  border-color: var(--accent);
  color: var(--accent-700);
}
.hub__body {
  padding-block: 44px 72px;
}

/* ══ 23. Categorie-landing ════════════════════════════════════ */
.clead {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  padding: 56px 0 40px;
}
.clead__h1 {
  margin: 12px 0 0;
  font-weight: 800;
  font-size: clamp(30px, 5vw, 48px);
  letter-spacing: -0.025em;
  line-height: 1.06;
  color: var(--ink);
}
.cbody {
  padding-block: 40px 72px;
}
.cbody__title {
  margin: 0 0 22px;
  font-weight: 800;
  font-size: clamp(22px, 3.4vw, 28px);
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* ══ 24. Gedeelde raster/lege-staat ═══════════════════════════ */
.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 1fr);
}
.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid--cats {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.empty {
  font-size: 16px;
  color: var(--ink-2);
}
@media (max-width: 940px) {
  .grid--3 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 860px) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 620px) {
  .grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 560px) {
  .grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ══ 25. Niet gevonden ════════════════════════════════════════ */
.nf {
  padding-block: 72px 96px;
}
.nf__h1 {
  font-weight: 800;
  font-size: clamp(30px, 6vw, 46px);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 10px 0 0;
}
.nf__p {
  font-size: 17px;
  color: var(--ink-2);
  max-width: 560px;
  margin: 14px 0 0;
}
.nf__p a {
  color: var(--accent-700);
  text-decoration: underline;
}
.nf__grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
}


/* ══ 20. Formulieren ══════════════════════════════════════════
   Als kaart, net als de productblokken in een artikel: het formulier staat
   midden in lopende tekst en moet zich daar als een eigen blok van afzonderen,
   niet als losse velden tussen de alinea's hangen. */
.form {
  margin: 34px 0 8px;
  padding: 26px 28px 28px;
  background: var(--bg-soft);
  border: var(--rand);
  border-radius: var(--radius-card);
  box-shadow: var(--schaduw);
}
.form__body {
  display: grid;
  gap: 18px;
  /* Ruim genoeg voor een adres van normale lengte, smal genoeg om niet als een
     eindeloze balk over de volle breedte te lopen. */
  max-width: 560px;
}

/* Meldingen */
.form__ok,
.form__fout {
  display: flex;
  gap: 10px;
  margin: 0 0 20px;
  padding: 13px 16px;
  border-radius: var(--radius-btn);
  font-size: 14.5px;
  line-height: 1.55;
  border: var(--rand);
}
.form__ok {
  background: var(--deal-50);
  border: var(--rand);
  color: var(--ok);
}
.form__fout {
  background: var(--accent-50);
  border: 1px solid var(--accent-200);
  color: var(--accent-700);
}

/* Velden */
.form__rij {
  display: grid;
  gap: 7px;
}
.form__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.form__opt {
  margin-left: 6px;
  font-weight: 500;
  font-size: 12.5px;
  color: var(--ink-3);
}
.form__uitleg {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
}
.form__veld {
  width: 100%;
  padding: 12px 14px;
  border: var(--rand);
  border-radius: var(--radius-btn);
  background: var(--bg);
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  /* Zonder dit zetten browsers hun eigen systeemfont op select en textarea. */
  font-family: var(--font-sans);
}
.form__veld::placeholder {
  color: var(--muted-2);
}
.form__veld:hover {
  border-color: var(--muted);
}
.form__veld:focus {
  outline: none;
  border-color: var(--accent);
  /* Ring in plaats van een dikkere rand: dan verspringt het veld niet. */
  box-shadow: 0 0 0 3px var(--accent-50);
}
.form__veld--tekst {
  min-height: 150px;
  resize: vertical;
  line-height: 1.6;
}
select.form__veld {
  appearance: none;
  /* Eigen pijltje, want het systeempijltje wisselt per besturingssysteem. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%235a5a66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

/* Keuzerondjes en vinkjes */
.form__radios {
  display: grid;
  gap: 9px;
  padding-top: 2px;
}
.form__radio,
.form__vinkje {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
  cursor: pointer;
}
.form__radio input,
.form__vinkje input {
  margin: 2px 0 0;
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
  flex: none;
  cursor: pointer;
}

/* Het honeypot-veld. Niet `display:none`: een bot die let op verborgen velden
   slaat die over, en dan vangt de val niets meer. Zo staat het buiten beeld
   maar bestaat het gewoon. */
.form__pot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__altcha {
  --altcha-border-width: 1px;
  --altcha-border-radius: var(--radius-btn);
  --altcha-color-border: var(--line);
  --altcha-max-width: 100%;
  max-width: 300px;
}

.form__knop {
  justify-self: start;
  margin-top: 4px;
  border: 0;
  cursor: pointer;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 26px;
  border-radius: var(--radius-btn);
  transition:
    background 0.15s ease,
    transform 0.06s ease;
}
.form__knop:hover {
  background: var(--accent-600);
}
.form__knop:active {
  transform: translateY(1px);
}

@media (max-width: 640px) {
  .form {
    padding: 20px 18px 22px;
    margin-inline: -4px;
  }
  .form__knop {
    /* Op een telefoon is een knop over de volle breedte makkelijker te raken. */
    justify-self: stretch;
    text-align: center;
  }
}

/* ==========================================================================
   21. Voorvertoning
   Een balk die je niet over het hoofd ziet: de pagina eronder is identiek aan
   de echte, dus zonder dit denk je dat je naar de live site kijkt.
   ========================================================================== */
.voorvertoning {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14px;
  line-height: 1.5;
  padding: 10px 20px;
  text-align: center;
}

/* ==========================================================================
   22. Zoeken
   Het veld staat binnen de navigatie, zodat het op mobiel meeschuift in het
   uitklapmenu in plaats van de balk uit elkaar te duwen.
   ========================================================================== */
.zoek {
  display: flex;
  align-items: center;
  gap: 6px;
}
.zoek__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.zoek__veld {
  font: inherit;
  color: var(--on-dark);
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid var(--on-dark-mute);
  border-radius: 0;
  padding: 7px 11px;
  min-width: 0;
  width: 100%;
}
.zoek__veld::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.zoek__veld:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.zoek__knop {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 0;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
}
.zoek--kop {
  max-width: 240px;
}

/* Op het zoekscherm zelf staat het veld groot bovenaan, op een lichte
   achtergrond in plaats van de donkere header. */
.zoek--groot {
  margin-top: 18px;
  max-width: 520px;
}
.zoek--groot .zoek__veld {
  color: var(--ink);
  background: var(--kaart);
  border-color: var(--line);
  padding: 12px 14px;
  font-size: 16px;
}
.zoek--groot .zoek__veld::placeholder {
  color: var(--muted);
}
.zoek--groot .zoek__knop {
  width: auto;
  height: 46px;
  padding: 0 18px;
  font-weight: 700;
}

.zoek__telling {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 14px;
}
.zoek__lijst {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 2px;
}
.zoek__item {
  padding: 14px 0;
  border-bottom: 1px solid var(--line-2);
}
.zoek__link {
  font-weight: 700;
  font-size: 17px;
}
.zoek__soort {
  color: var(--muted);
  font-size: 13px;
  margin-left: 8px;
}
.zoek__lede {
  color: var(--muted);
  font-size: 14px;
  margin: 4px 0 0;
}

@media (max-width: 899px) {
  .zoek--kop {
    max-width: none;
    width: 100%;
    margin-top: 6px;
  }
}

/* ══ Catalogus ════════════════════════════════════════════════
   Alles wat met de productlijsten te maken heeft: de kop van een
   landingspagina, de filterbalk, de productkaarten en de paginering.
   Dit deel is nieuw ten opzichte van de redactionele basis hierboven
   en gebruikt dezelfde tokens — geen eigen kleuren, geen eigen maten.
   ───────────────────────────────────────────────────────────── */

/* ── Kop van een landingspagina ── */
.lead {
  padding-block: 28px 8px;
}
/* De leeskolom staat gecentreerd op de pagina en niet tegen de linkerrand: op
   een breed scherm bleef er anders een halve schermbreedte leeg naast de tekst
   terwijl de tabel eronder wél de volle breedte pakt. De tekst binnen die kolom
   blijft links uitgelijnd — gecentreerde lopende tekst leest slecht, omdat je
   oog bij elke regel opnieuw het begin moet zoeken. */
/* De kolombreedte staat in rem en niet in ch: `ch` schaalt mee met de
   lettergrootte, waardoor 74ch op een kop van 40px ruim veertienhonderd pixels
   is en er dus niets begrensd wordt. */
.lead .wrap > * {
  max-width: 46rem;
  margin-inline: auto;
}
/* Het sfeerbeeld bovenaan een landingspagina. Een strook en geen banner: op een
   vergelijkingssite hoort de tabel hoog te staan, en elke honderd pixels beeld
   duwt hem naar beneden. Op een telefoon iets hoger, want daar is de strook
   anders een streep. */
.lead__beeld {
  position: relative;
  aspect-ratio: 5 / 2;
  margin-top: 16px;
  overflow: hidden;
  border-radius: var(--radius-tile);
  background: var(--bg-tile);
  border: var(--rand);
  box-shadow: var(--schaduw);
}
/* Op een telefoon minder breed uitgesneden: de strook is daar anders een streep,
   en een beeldmodel levert geregeld bijna vierkant beeld aan omdat het gevraagde
   formaat genegeerd wordt. */
@media (max-width: 620px) {
  .lead__beeld {
    aspect-ratio: 3 / 2;
  }
}
/* De affiliate-melding sluit de kop af, dus zijn lijn hoort net zo breed te
   zijn als wat eronder komt: de filterkolom plus de lijst, en niet de smallere
   leeskolom van de tekst erboven. Een streep die halverwege ophoudt leest als
   het einde van de alinea in plaats van het einde van het blok. */
.lead .wrap > .disc {
  max-width: none;
  margin-top: 18px;
}

.lead__h1 {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 10px 0 0;
}
.lead__intro {
  margin-top: 14px;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.65;
}
/* De regel met het aantal en de vanafprijs. Wordt bij het renderen
   ingevuld, dus hij spreekt de tekst erboven nooit tegen. */
.lead__stand {
  margin-top: 16px;
  font-size: 15px;
  color: var(--ink-2);
}
.lead__stand strong {
  color: var(--ink);
}
.lead__bron {
  color: var(--muted);
  margin-left: 6px;
}

/* ── Filterbalk ── */
.fb {
  border: var(--rand);
  border-radius: 0;
  background: var(--bg-soft);
  padding: 14px 16px;
  margin-bottom: 22px;
}
.fb__row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px 16px;
}
.fb__row--filters {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-2);
}
.fb__count {
  font-size: 15px;
  color: var(--ink-2);
  margin-right: auto;
}
.fb__count strong {
  font-size: 18px;
  color: var(--ink);
}
.fb__veld {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 150px;
  flex: 1 1 150px;
}
.fb__veld--sort {
  flex: 0 0 auto;
  min-width: 190px;
}
.fb__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fb select,
.fb input {
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--kaart);
  border: var(--rand);
  border-radius: 0;
  padding: 9px 11px;
  width: 100%;
}
.fb select:focus-visible,
.fb input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.fb__acties {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}
.fb__go {
  white-space: nowrap;
}
.fb__wis {
  font-size: 14px;
  color: var(--ink-3);
  text-decoration: underline;
}

/* ── Productraster ──
   `auto-fill` en niet `auto-fit`: bij één overgebleven product rekt
   auto-fit die kaart over de volle breedte, en dan lijkt het laatste
   zoekresultaat een uitgelicht product. */
.pcgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}

/* ── Productkaart ── */
.pc {
  display: flex;
  flex-direction: column;
  border: var(--rand);
  border-radius: 0;
  background: var(--kaart);
  box-shadow: var(--schaduw);
  overflow: hidden;
  transition:
    box-shadow 0.15s ease,
    transform 0.15s ease;
}
.pc:hover {
  box-shadow: var(--schaduw-groot);
  transform: translate(-2px, -2px);
}
.pc__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-foto);
  display: grid;
  place-items: center;
  padding: 12px;
}
/* `contain`: een productfoto bijsnijden haalt net de aansluitingen of
   het toetsenbord eraf — precies waar de bezoeker naar kijkt. */
.pc__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.pc__noimg {
  color: var(--faint);
}
.pc__tag {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 0;
  background: var(--dark);
  color: var(--on-dark);
  letter-spacing: 0.02em;
}
.pc__tag--refurb {
  background: var(--accent);
  color: var(--on-accent);
  border: 0;
}
.pc__tag--gebruikt {
  background: var(--bg-tile);
  color: var(--ink-2);
}
.pc__tag--deal {
  left: auto;
  right: 10px;
  background: var(--deal);
  color: var(--on-dark);
}
.pc__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 15px 15px;
  flex: 1;
}
.pc__brand {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pc__name {
  font-size: 15px;
  line-height: 1.35;
  margin: 0;
  /* Drie regels: genoeg om een model te herkennen, weinig genoeg om de
     kaarten op één hoogte te houden. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pc__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pc__specs li {
  font-size: 12px;
  color: var(--ink-2);
  background: var(--bg-tint);
  border-radius: 0;
  padding: 3px 7px;
}
.pc__foot {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.pc__prijs {
  display: flex;
  flex-direction: column;
}
.pc__bedrag {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.pc__was {
  font-size: 13px;
  color: var(--muted);
  text-decoration: line-through;
}
.pc__datum {
  font-size: 11px;
  color: var(--muted-2);
}
.pc__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 700;
  padding: 9px 13px;
  border-radius: 0;
  white-space: nowrap;
}
.pc__cta:hover {
  background: var(--accent-600);
}
.pc__lever {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}
.pc__stock--ja {
  color: var(--deal);
  font-weight: 600;
}
.pc__stock--beperkt {
  color: var(--accent-700);
  font-weight: 600;
}
.pc__stock--nee {
  color: var(--ink-3);
}

/* ── Onder de lijst ── */
/* `.lijst` en niet `.cat`: die naam is al van de categorietegel op de
   homepage, inclusief een rand die bij hover van kleur verandert. Die tegel legde
   daardoor een kader om het hele productgedeelte. */
.lijst {
  padding-block: 8px 56px;
}
.lijst__pager {
  margin-top: 28px;
}
.lijst__tekst,
.lijst__faq,
.lijst__verwant {
  padding-block: 0 44px;
}
/* De tekst onder de tabel wordt afgesloten met dezelfde streep die er bovenaan
   bij de affiliate-melding staat: over de volle breedte van de kolom, niet over
   de smallere leeskolom van de tekst zelf. Zo staat het artikel tussen twee
   lijnen en is te zien waar het ophoudt.

   Als pseudo-element en niet als `border-bottom` op de sectie: die sectie is de
   `.wrap` en heeft dus veertig pixels binnenmarge, waar een rand omhéén wordt
   getekend. De lijn liep daardoor aan weerszijden buiten de lijn erboven. */
.lijst__tekst::after {
  content: '';
  display: block;
  margin-top: 40px;
  border-bottom: 1px solid var(--line-2);
}
.lijst__tekst .blockbody,
.lijst__faq {
  max-width: 46rem;
  margin-inline: auto;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.chip__n {
  color: var(--muted);
  font-weight: 600;
  margin-left: 6px;
}

/* ── Paginering ── */
.pg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pg__lijst {
  display: flex;
  /* Wikkelen, want negen paginanummers naast elkaar zijn breder dan een
     telefoon. Zonder dit stak de rij er aan beide kanten uit en schoof de hele
     pagina mee; de omhullende `.pg` wikkelde al wel, maar deze lijst is één
     flexitem en die brak dus nergens af. */
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pg__knop,
.pg__nr,
.pg__nu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 0;
  border: var(--rand);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
}
.pg__nu {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.pg__nr:hover,
.pg__knop:hover {
  border-color: var(--accent);
  color: var(--accent-700);
}
.pg__knop--uit {
  color: var(--ink-3);
  border-color: var(--line);
  /* Uitgezet, niet onzichtbaar: de rand blijft inkt en de dekking zakt.
     Met een lichte rand haalde hij 1,5:1 en verdween hij van de pagina. */
  opacity: 0.4;
}
.pg__knop--uit:hover {
  border-color: var(--line-2);
  color: var(--faint);
}
.pg__gat {
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  color: var(--muted);
}

@media (max-width: 640px) {
  .pcgrid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
  }
  .pc__bedrag {
    font-size: 17px;
  }
  .pc__cta {
    width: 100%;
    justify-content: center;
  }
  .fb__acties {
    width: 100%;
  }
  .fb__go {
    flex: 1;
  }
}

/* ── De catalogusboom op de homepage ── */
/* ══ Register ═════════════════════════════════════════════════
   De catalogus als inhoudsopgave van een gedrukt boek: naam, stippellijn,
   aantal. Geen kaarten en geen beeld, en dat is bewust — de gidsen erboven zijn
   al kaarten met beeld, en twee keer dezelfde vorm op één pagina maakt het
   verschil in bedoeling onzichtbaar. Wie hier kijkt weet al wat hij zoekt.

   De stippellijn is een echte leader: een vak dat de resterende ruimte opvult,
   met een gestippelde onderrand. Daardoor loopt hij precies tot het getal, hoe
   lang de naam ook is. */
.register {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 56px;
}
.reg {
  padding: 16px 0 14px;
  border-top: 3px solid var(--ink);
}
/* De eerste rij van elke kolom hoort onder dezelfde balk te beginnen; zonder
   deze regel start de tweede kolom met een dubbele lijn. */
.reg:nth-child(-n + 2) {
  border-top-width: 4px;
}
.reg__kop {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--ink);
}
.reg__naam {
  font-family: var(--font-krant);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.1;
}
.reg__kop:hover .reg__naam {
  color: var(--accent-700);
}
.reg__stip {
  flex: 1 1 auto;
  min-width: 24px;
  /* Een halve pixel boven de basislijn: op de basislijn zelf raakt de stippel
     de staarten van de letters. */
  transform: translateY(-4px);
  border-bottom: 3px dotted var(--line-2);
}
.reg__n {
  font-family: var(--font-krant);
  font-weight: 400;
  font-size: 14px;
  background: var(--ink);
  color: var(--on-dark);
  padding: 4px 10px;
}
.reg__kop:hover .reg__n {
  background: var(--accent);
}
.reg__sub {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  font-size: 14px;
}
/* De scheiding tussen de subcategorieën is een gedrukte punt en geen komma:
   dit is een opsomming van ingangen, geen zin. */
.reg__sub li + li::before {
  content: '·';
  margin: 0 9px;
  color: var(--muted);
}
.reg__sub a {
  color: var(--ink-2);
}
.reg__sub a:hover {
  color: var(--accent-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* De koopgidsen onder een tak, alleen op /producten.

   Ze staan ná de subcategorieën en zien er anders uit, want ze zijn iets
   anders: een subcategorie is een ingang naar een schap, een gids is een
   uitgeschreven afweging. Vandaar roze, met een liggend streepje ervoor in
   plaats van een middenpunt ertussen. */
.reg__gidsen {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 14px;
}
.reg__gidsen li {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.reg__gidsen li::before {
  content: '';
  flex: none;
  width: 11px;
  border-top: 2px solid var(--accent);
  transform: translateY(-4px);
}
.reg__gidsen a {
  color: var(--accent-700);
  font-weight: 600;
}
.reg__gidsen a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Eén kolom zodra de gidsen meedoen. In twee kolommen sleept een tak met
   zestien gidsen zijn buurman mee naar dezelfde rijhoogte, en dan staat de
   halve pagina wit. */
.register--breed {
  grid-template-columns: minmax(0, 1fr);
}
.register--breed .reg:nth-child(-n + 2) {
  border-top-width: 3px;
}
.register--breed .reg:first-child {
  border-top-width: 4px;
}

@media (max-width: 780px) {
  .register {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .reg:nth-child(-n + 2) {
    border-top-width: 3px;
  }
  .reg:first-child {
    border-top-width: 4px;
  }
}

.hero__cards--pc {
  display: grid;
  gap: 14px;
  align-content: start;
}

/* ── Zoekresultaten: producten onder de pagina's ── */
.zoek__kop {
  margin-top: 34px;
}
.zoek__meer {
  font-size: 14px;
  color: var(--muted);
}

/* ══ Vergelijken ══════════════════════════════════════════════
   De tweekoloms-indeling van een lijstpagina: filters links, lijst
   rechts, met de vergelijkingstabel als standaardweergave. Het
   raster (.pcgrid hierboven) blijft bestaan als tweede weergave.
   ───────────────────────────────────────────────────────────── */

/* De kop is vastgeplakt, dus een anker landt anders precies eronder. Deze marge
   duwt het doel omlaag zodat de eerste regel van de lijst vrij staat; zelfde
   waarde als bij de koppen in de lopende tekst. */
#lijst {
  scroll-margin-top: 90px;
}
.lijst__layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

/* ── Filters: kolom op een breed scherm, paneel achter een knop op een
      telefoon. Het open- en dichtklappen gaat met een verborgen checkbox
      (#fz-open) en CSS, zodat het ook werkt als er geen script laadt. ── */
.fzknop,
.fzwrap__waas,
.fz__sluit {
  /* Op een breed scherm bestaat het paneel niet: de filters staan gewoon
     naast de lijst en hebben geen knop, waas of sluitkruis nodig. */
  display: none;
}
/* De schakelaar zelf blijft op élk scherm bestaan, en staat bewust op
   `.sr` in plaats van `display: none`. Een vinkje dat niet gerenderd
   wordt, is in meerdere browsers ook niet meer met zijn label aan te
   klikken — en dan opent het paneel niet. */
.fz {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  border: var(--rand);
  border-radius: 0;
  background: var(--bg-soft);
  padding: 4px 14px 14px;
  box-shadow: var(--schaduw);
}
.fz__kop {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 0 10px;
  border-bottom: 1px solid var(--line-2);
}
.fz__titel {
  font-size: 15px;
  margin: 0;
  margin-right: auto;
}
.fz__wis {
  font-size: 13px;
  color: var(--ink-3);
  text-decoration: underline;
}
/* De ruimte tussen de groepen staat als marge op de fieldset en niet als
   padding: een <legend> wordt door de browser bóven het opvulvlak van zijn
   fieldset gelegd, dus padding-top duwt hem niet omlaag en de kopjes plakten
   tegen de vorige groep aan. */
.fz__groep {
  border: 0;
  margin: 22px 0 0;
  padding: 0;
}
.fz__legend {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0;
  margin-bottom: 10px;
}
.fz__prijs {
  display: flex;
  align-items: center;
  gap: 6px;
}
.fz__streep {
  color: var(--muted);
}
.fz input[type='number'] {
  font: inherit;
  font-size: 14px;
  width: 100%;
  min-width: 0;
  border: var(--rand);
  border-radius: 0;
  padding: 7px 8px;
  background: var(--kaart);
  color: var(--ink);
}
.fz__opties {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Meer dan een handvol merken zou de kolom net zo lang maken als de lijst
   ernaast. Daar zat eerst een eigen scrollbalk voor, en dat was de verkeerde
   oplossing: twee scrolgebieden over elkaar betekent dat je muiswiel het
   verkeerde raakt, en wat buiten beeld valt bestaat voor de bezoeker niet.

   Nu staat de rest achter een knop. Het uitklappen gaat met een vinkje en CSS,
   net als het paneel zelf, dus het werkt ook als er geen script laadt. */
.fz__opties--rest {
  display: none;
  margin-top: 2px;
}
.fz__meerschakelaar:checked ~ .fz__opties--rest {
  display: flex;
}
.fz__meer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 9px 12px;
  border: 2px solid var(--ink);
  background: var(--kaart);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}
.fz__meer:hover {
  background: var(--accent-50);
}
/* Het vinkje zelf is onzichtbaar, dus de toetsenbordring moet op het label
   verschijnen. Zonder deze regel is er met tab niet te zien wat er geselecteerd
   is. */
.fz__meerschakelaar:focus-visible ~ .fz__meer {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.fz__meer-aan {
  display: none;
}
.fz__meerschakelaar:checked ~ .fz__meer .fz__meer-uit {
  display: none;
}
.fz__meerschakelaar:checked ~ .fz__meer .fz__meer-aan {
  display: inline;
}
.fz__meerschakelaar:checked ~ .fz__meer svg {
  transform: rotate(180deg);
}
.fz__optie {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  padding: 4px 2px;
  border-radius: 0;
  cursor: pointer;
}
.fz__optie:hover {
  background: var(--bg-tint);
}
.fz__naam {
  flex: 1;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fz__n {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* De knop hoort los te staan van het laatste vinkje erboven: hij bevestigt
   de hele set, niet de laatste keuze. */
.fz__voet {
  padding-top: 22px;
}
.fz__go {
  width: 100%;
  justify-content: center;
}
/* Nul treffers: de knop blijft klikbaar (je komt dan op de lege lijst met
   een weg terug), maar hij hoort niet uitnodigend te staan. */
.fz.is-leeg .fz__go {
  background: var(--bg-tile);
  color: var(--ink-3);
  border: var(--rand);
  opacity: 0.55;
}

/* ── Kop boven de lijst ── */
.lijstkop {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 14px;
}
.lijstkop__telling {
  margin: 0;
  margin-right: auto;
  font-size: 15px;
  color: var(--ink-2);
}
.lijstkop__telling strong {
  font-size: 18px;
  color: var(--ink);
}
.lijstkop__wis {
  margin-left: 10px;
  font-size: 13px;
  color: var(--ink-3);
  text-decoration: underline;
}
.lijstkop__sorteer select {
  font: inherit;
  font-size: 14px;
  border: var(--rand);
  border-radius: 0;
  padding: 7px 10px;
  background: var(--kaart);
  color: var(--ink);
}
.lijstkop__weergave {
  display: flex;
  border: var(--rand);
  border-radius: 0;
  overflow: hidden;
}
.lijstkop__knop {
  font-size: 14px;
  font-weight: 600;
  padding: 7px 12px;
  color: var(--ink-3);
  background: var(--kaart);
}
.lijstkop__knop.is-aan {
  background: var(--accent);
  color: var(--on-accent);
}

/* ── De vergelijkingstabel ── */
/* Chrome maakt een vlak dat kan schuiven toetsenbord-focusbaar. Dat is nuttig —
   met de pijltjes schuif je de tabel opzij — maar het betekent ook dat de
   globale focusring een kader om de hele tabel legt zodra je erin klikt.
   Bij een muisklik hoort daar niets te gebeuren; wie met het toetsenbord
   navigeert krijgt in plaats daarvan de rand zelf in de accentkleur. */
.pt__scroll {
  /* Positioneringspunt voor wat erin absoluut staat. Zonder dit hangt een
     `.sr`-label uit de tabelkop aan een voorouder buiten deze doos: het kruipt
     dan mee met de horizontale schuif van de tabel en rekt het documént op in
     plaats van deze doos. Op een tablet leverde dat honderdtien pixels
     zijwaarts geschuif op, zonder dat er iets zichtbaars buiten beeld stond. */
  position: relative;
  overflow-x: auto;
  border: var(--rand);
  border-radius: 0;
  box-shadow: var(--schaduw);
}
.pt__scroll:focus {
  outline: none;
}
.pt__scroll:focus-visible {
  outline: none;
  border-color: var(--accent);
}
.pt__tabel {
  width: 100%;
  border-collapse: collapse;
  background: var(--kaart);
  font-size: 14px;
}
.pt__tabel th {
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  /* Omgekeerd gezet: de kolomkop is de balk waar de tabel onder hangt. Papier
     op inkt haalt 15,8:1, ruim genoeg voor twaalf punten in kapitalen. */
  color: var(--on-dark);
  background: var(--ink);
  padding: 11px 12px;
  border-bottom: var(--rand);
  white-space: nowrap;
}
.pt__tabel th a {
  color: inherit;
}
.pt__tabel th a:hover {
  color: var(--accent-700);
}
.pt__tabel td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: middle;
}
.pt__tabel tbody tr:last-child td {
  border-bottom: 0;
}
.pt__tabel tbody tr:hover {
  background: var(--bg-soft);
}
.pt__prod {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 300px;
}
.pt__mini {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: var(--bg-foto);
  border-radius: 0;
  overflow: hidden;
}
.pt__mini img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.pt__naam {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.pt__titel {
  font-weight: 600;
  line-height: 1.3;
  /* Twee regels: genoeg om een model te herkennen, weinig genoeg om de
     regelhoogte van de tabel gelijk te houden. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pt__sub {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 12px;
  color: var(--muted);
}
.pt__tag {
  color: var(--on-accent);
  background: var(--accent);
  border: 0;
  border-radius: 0;
  padding: 0 6px;
  font-weight: 700;
}
.pt__nee {
  color: var(--ink-3);
}
.pt__beperkt {
  color: var(--accent-700);
  font-weight: 600;
}
.pt__spec {
  color: var(--ink-2);
  white-space: nowrap;
}
.pt__prijs {
  white-space: nowrap;
  text-align: right;
}
.pt__bedrag {
  display: block;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.pt__was {
  display: block;
  font-size: 12px;
  color: var(--muted);
  text-decoration: line-through;
}
.pt__verzend {
  display: block;
  font-size: 11px;
  color: var(--deal);
}
.pt__cta {
  text-align: right;
}
.pt__knop {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 13px;
  border-radius: 0;
  white-space: nowrap;
}
.pt__knop:hover {
  background: var(--accent-600);
}
.pt__voet {
  margin: 10px 2px 0;
  font-size: 12px;
  color: var(--muted);
}

/* Onder 1040px verdwijnt de filterkolom naar boven de lijst; onder
   760px klapt elke tabelregel om tot een blok waarin de kolomnaam
   vóór de waarde staat. Zonder dat lees je daar losse getallen
   zonder te weten waar ze bij horen. */
@media (max-width: 1040px) {
  .lijst__layout {
    /* `minmax(0, 1fr)` en niet `1fr`: een 1fr-baan heeft als automatisch
       minimum de min-content-breedte van wat erin staat, en de producttabel is
       breder dan een telefoon. De baan werd daardoor 382px in een venster van
       375, en dan schuift de héle pagina opzij — kop, voet en al. Met een
       minimum van nul mag de baan wél krimpen en schuift de tabel binnen zijn
       eigen `.pt__scroll`, waar hij hoort. */
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  /* De knop die het paneel opent. Staat waar de filterkolom stond, dus
     boven de lijst, en toont hoeveel filters er aan staan. */
  .fzknop {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: var(--rand);
    border-radius: 0;
    background: var(--kaart);
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
  }
  .fzknop__n {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 0;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 12px;
  }

  /* Het paneel zelf: van rechts over de pagina heen, met de kop en de
     knop vastgeplakt zodat je nooit hoeft te zoeken waar je bevestigt. */
  .fz {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 60;
    width: min(380px, 90vw);
    max-width: none;
    border: 0;
    border-radius: 0;
    background: var(--kaart);
    padding: 0;
    transform: translateX(100%);
    visibility: hidden;
    transition:
      transform 0.22s ease,
      visibility 0.22s;
    box-shadow: -8px 0 0 rgb(21 21 26 / 22%);
  }
  .fz__kop {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--kaart);
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
  }
  .fz__titel {
    font-size: 17px;
  }
  .fz__sluit {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin: -6px -6px -6px 0;
    border-radius: 0;
    color: var(--ink-2);
    cursor: pointer;
    order: 3;
  }
  .fz__inhoud {
    flex: 1;
    overflow-y: auto;
    /* Ruim onderaan: anders raakt de laatste keuze de vastgeplakte knop en
       lijkt hij bij die groep te horen in plaats van bij het geheel. */
    padding: 0 16px 24px;
    overscroll-behavior: contain;
  }
  .fz__voet {
    position: sticky;
    bottom: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--kaart);
    border-top: 1px solid var(--line);
  }
  .fz__go {
    padding-block: 13px;
    font-size: 16px;
  }

  .fzwrap__waas {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 59;
    background: rgb(21 21 26 / 55%);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.22s ease,
      visibility 0.22s;
  }

  .fzwrap__schakelaar:checked ~ .fz {
    transform: translateX(0);
    visibility: visible;
  }
  .fzwrap__schakelaar:checked ~ .fzwrap__waas {
    opacity: 1;
    visibility: visible;
  }

  /* De pagina eronder mag niet meescrollen zolang het paneel open staat.
     Lukt dit niet (oudere browser zonder :has), dan is het gevolg dat de
     achtergrond meebeweegt — hinderlijk, niet stuk. */
  html:has(.fzwrap__schakelaar:checked) {
    overflow: hidden;
  }
}

@media (max-width: 1040px) and (prefers-reduced-motion: reduce) {
  .fz,
  .fzwrap__waas {
    transition: none;
  }
}

@media (max-width: 760px) {
  .pt__scroll {
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  .pt__tabel,
  .pt__tabel tbody,
  .pt__tabel tr,
  .pt__tabel td {
    display: block;
    width: 100%;
  }
  .pt__tabel thead {
    display: none;
  }
  .pt__tabel tr {
    border: var(--rand);
    border-radius: 0;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: var(--kaart);
  }
  .pt__tabel td {
    border: 0;
    padding: 4px 0;
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }
  .pt__tabel td[data-kolom]::before {
    content: attr(data-kolom);
    font-size: 12px;
    color: var(--muted);
    font-weight: 600;
  }
  .pt__prod {
    min-width: 0;
    padding-bottom: 8px;
  }
  .pt__prijs,
  .pt__cta {
    text-align: left;
  }
  .pt__knop {
    width: 100%;
    text-align: center;
  }
  .lijstkop__telling {
    width: 100%;
    margin-right: 0;
  }
}