/*
 * _product-v2.css — deel 1 van de productpagina v2 ("Veld"). Dit bestand is de gedeelde laag
 * productpagina.css plus de huid richting-2.css uit docs/mockups/redesign-2026/productpagina/,
 * één op één overgenomen: de basis, kruimelpad, kopband, galerij, uitvoeringen, koopkaart,
 * sectienavigatie, secties (ritme), lightbox met loep, mobiele koopbalk, de ladder en de
 * aanraakmaten. De blokken (winkeltabel, grafiek, specificaties, analyse, zijpaneel, widget,
 * vergelijker) staan in _product-v2-blokken.css — samen zouden ze de 800-regelgrens breken.
 *
 * Verschillen met de mockup, met reden:
 *  - de tokens (--veld, --grond, --plaat …) staan in theme-vars.css (Critical Rule 3);
 *  - de sitekop en de voettekst zijn die van het theme (get_header/get_footer), dus hun
 *    regels ontbreken; de sectienav plakt onder de theme-kop van 60 px;
 *  - de globale resets (body, img, a, button, table …) zijn gescoped op .pcbm-v2 zodat ze
 *    de theme-kop en -voet niet raken; body-regels op body.pcbm-product-v2 (de bodyclass van
 *    ProductLayoutToggle);
 *  - hardcoded hex/rgba-kleuren zijn tokens of color-mix() op tokens geworden.
 *
 * De oorspronkelijke toelichting op de ladder volgt hieronder, ongewijzigd.
 */
/*
 * productpagina.css — gedeelde laag onder de drie richtingen (04-09-2026).
 *
 * Alles hier staat op tokens uit theme-vars.css en op de designtaal (T1 · K2 · R2 · Z2).
 * Deze laag kent geen huid: geen vlakverdeling, geen kleurdosering, geen hoekradius.
 * Dat staat in richting-1.css / richting-2.css / richting-3.css. Wat hier staat is wat een
 * richting NIET mag wegnemen: de sitekop, het kruimelpad, de tabellen, de grafiek, het
 * zijpaneel, de build-widget, de mobiele koopbalk en de voettekst.
 *
 * Elke zichtbare omkadering in de markup draagt `data-omkadering="<reden>"` (P1). Elke kleur
 * komt uit een token; nieuwe tokens per richting staan bovenin het richtingbestand, benoemd.
 *
 * ══════════════════════════════════════════════════════════════════════════════════════════
 * DE LADDER (ronde 12, 04-09-2026) — één afbreekpuntsysteem, mobiel-eerst.
 *
 * Alles wat zonder media query staat is de BASIS en moet op 320 px werken: één kolom, geen
 * ondergrens onder een kolom (`minmax(0, 1fr)`), knoppen over de volle breedte, de koopbalk
 * vast onderaan. Elke trede voegt alleen toe wat de extra breedte mogelijk maakt. Er staat
 * in dit bestand geen enkele `max-width`-query meer; de treden staan bij elkaar onderaan
 * (`DE LADDER — treden`) zodat ze de lagen erboven altijd winnen en elkaar nooit tegenspreken.
 *
 *   basis   320–389   telefoon smal   iPhone SE, oudere Androids. Volgorde: titel, beeld (3:2),
 *                                     koopkaart, kernfeiten (2 kolommen), uitspraak. Winkelrij
 *                                     als twee cellen (winkel + levering | totaal + verzending)
 *                                     met de knop op een eigen rij over de volle breedte.
 *                                     Voettekst één kolom. Koopbalk onderaan, verschijnt pas
 *                                     als de koopkaart uit beeld is (JS).
 *   ≥ 390   390–599   telefoon        Zelfde volgorde, meer lucht: prijs 2,25 rem, duimen 3 rem,
 *                                     voettekst twee kolommen, de winkelknop als derde cel naast
 *                                     de prijs. Verder niets — de telefoon is één ontwerp.
 *   ≥ 600   600–767   tablet staand   De eerste sprong naar twee kolommen: tekst naast de plaat
 *                                     (vaste plaatkolom van 15 rem), goot 1,25 rem, blokranden
 *                                     ruimer, sitekop met CTA, koopbalk weg (de koopkaart staat
 *                                     op het eerste scherm). Berekende feiten twee kolommen.
 *   ≥ 768   768–1023  tablet liggend  De volledige zeskoloms winkeltabel (vraagt 672 px, krijgt
 *           / smal desktop            680), analyse en ervaringen in twee kolommen, specificaties
 *                                     twee kolommen, plaatkolom 19 rem, lightbox als venster,
 *                                     "Meer over dit product" open (op de telefoon ingeklapt).
 *   ≥ 1024  1024–1279 desktop         Hoofdnavigatie zichtbaar (hamburger weg), kopband 7/5,
 *                                     kernfeiten vier kolommen, voettekst vijf kolommen. De
 *                                     grafiek staat nog onder de tabel: ernaast zou hij 430 px
 *                                     krijgen en de tabel zou terugvallen naar drie cellen.
 *   ≥ 1280  1280+     desktop breed   De pagina groeit door tot 1360 px (--pp-breedte), goot
 *                                     2 rem, tabel naast grafiek (2 : 1, grafiek ≥ 20 rem),
 *                                     zoektekst in de sitekop. Boven 1424 px is de rest marge,
 *                                     met opzet: regels van 62ch en een tabel van zes kolommen
 *                                     worden niet beter van 1500 px.
 *
 * Aanraakmaten staan niet in de ladder maar in `@media (pointer: coarse)`: elk bedienbaar
 * element ≥ 44 × 44 px op een scherm zonder muis, zonder de desktopmaat op te blazen.
 * Meting: `node breedtes.mjs <label>` — acht fixtures × tien breedtes × twee thema's.
 * ══════════════════════════════════════════════════════════════════════════════════════════
 */

:root {
  --pp-breedte: 1200px;
  --pp-goot: 1rem;
  --pp-kopband-kolom: minmax(0, 1fr);
  --pp-koopblok-kolom: minmax(0, 1fr);
  --pp-blokrand: 1rem;
  --pp-kop-hoogte: 60px; /* de plakkende theme-sitekop (theme-vars.css .site-header) */
}

html { scroll-padding-top: 6.5rem; }
body.pcbm-product-v2 { background: var(--grond); }
body.pcbm-product-v2 .site-main { flex: 1; }
.pcbm-v2 { font-family: var(--font-display); color: var(--text-secondary); }
.pcbm-v2 img { max-width: 100%; height: auto; display: block; }
.pcbm-v2 a { color: inherit; text-decoration: none; }
.pcbm-v2 button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.pcbm-v2 :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* `hidden` werkt op een SVG-groep niet vanzelf: de UA-stylesheet zet display:none alleen op
   HTML-elementen. Zonder deze regel bleef de aanwijzerstip van de grafiek linksboven staan. */
.pcbm-v2 [hidden] { display: none !important; }
.pp-container { max-width: var(--pp-breedte); margin-inline: auto; padding-inline: var(--pp-goot); }
.pp-visueel-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Voorrang boven de designtaal (die :is(p, li, td …) a onderstreept en merkkleur geeft):
   navigatie en handelingen dragen hun betekenis in plaats en vorm, niet in onderstreping. */
.single-product-page .sectienav li a, .single-product-page .kruimels li a, .single-product-page .galerij__duimen li button { text-decoration: none; color: inherit; }
.single-product-page .kruimels li a { color: var(--text-zwak); }
.single-product-page .sectienav li a { color: var(--text-secondary); }
.single-product-page .sectienav li a[aria-current="true"] { color: var(--text-primary); }
.single-product-page .site-voet li a { color: var(--text-secondary); }
.single-product-page :is(p, li, td, th, div) a.knop { text-decoration: none; }
.single-product-page :is(p, li, td, th, div) a.knop--primair { color: var(--text-on-fill); }
.single-product-page :is(p, li, td, th, div) a.knop--secundair { color: var(--text-primary); }
.single-product-page :is(p, li, td, th, div) a.knop--primair:hover { color: var(--text-on-fill); }

/* ── Kruimelpad ──────────────────────────────────────────────────────────────────────── */
.kruimels { font-size: var(--maat-terzijde); color: var(--text-zwak); padding-block: 0.9rem 0; }
.kruimels ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0; margin: 0; }
.kruimels li + li::before { content: "/"; margin-inline-end: 0.35rem; }
.kruimels a:hover { color: var(--brand); text-decoration: underline; }
.kruimels [aria-current] { color: var(--text-secondary); }

/* ── Kopband ─────────────────────────────────────────────────────────────────────────── */
.kopband { display: grid; grid-template-columns: var(--pp-kopband-kolom); gap: 0 2rem; align-items: start; padding-block: 0.75rem 1.25rem; } /* ronde 8 (compacter) hier ingevouwen; rijafstand 0: verticale ritmiek komt van de marges */
/* Basis (telefoon): de tekstkolom lost op in het raster (`display: contents`), zodat de volgorde
   titel → beeld → koopkaart → kernfeiten → uitspraak kan zijn. Op de tablet (≥ 600) wordt de
   kolom weer één blok naast de plaat en geldt de DOM-volgorde. */
.kopband > div:first-child { display: contents; }
.kopband > div:first-child > h1 { order: -3; }
.kopband > div:first-child > .identiteit { order: -2; }
.kopband__beeld { order: -1; margin-bottom: 1.25rem; }
.kopband > div:first-child > .kernfeiten { order: 1; margin-top: 1.5rem; }
.kopband > div:first-child > .uitspraak-rij { order: 2; }
.kopband > div:first-child > .pastcheck { order: 3; }
.kopband h1 { font-size: var(--maat-titel); font-weight: 600; line-height: 1.25; color: var(--text-primary); margin: 0 0 0.35rem; text-wrap: balance; }
.identiteit { font-size: var(--maat-terzijde); color: var(--text-zwak); margin: 0 0 0.6rem; }
.kernspecs { font-size: var(--maat-tekst); color: var(--text-secondary); margin: 0 0 1rem; max-width: 62ch; }
.prijsregel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.75rem; margin-bottom: 0.35rem; }
.prijsregel__prijs { font-size: 2rem; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1.1; }
.prijsregel__bij { font-size: var(--maat-tekst); }
.prijsregel__bij a { color: var(--brand); text-decoration: underline; text-underline-offset: 0.15em; }
.prijscontext { font-size: var(--maat-terzijde); color: var(--text-zwak); margin: 0 0 1rem; max-width: 62ch; }
.acties { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.75rem; }
.knop { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0.55rem 1.1rem; font-weight: 600; font-size: var(--maat-tekst); color: var(--text-primary); }
.knop--primair { background: var(--brand-primary); color: var(--text-on-fill); }
.knop--primair:hover { background: var(--brand-primary-dark); }
.knop--secundair { box-shadow: inset 0 0 0 1px var(--text-zwak); }
.knop--klein { min-height: 2.25rem; padding: 0.3rem 0.8rem; font-size: var(--maat-terzijde); }
.pastcheck { font-size: var(--maat-terzijde); color: var(--text-secondary); }
.pastcheck a { color: var(--brand); text-decoration: underline; text-underline-offset: 0.15em; }

/* Galerij. Basis: beeld 3:2 (op de telefoon draagt de prijs het eerste scherm, niet de foto),
   duimen 2,75 rem (= 44 px) die mogen omlopen zodat vijf duimen nooit de rand voorbij duwen. */
.pcbm-v2 .kopband__beeld .galerij__hoofd { aspect-ratio: 3 / 2; display: grid; place-items: center; min-width: 0; min-height: 0; overflow: hidden; }
.pcbm-v2 .kopband__beeld .galerij__zoom { display: block; inline-size: 100%; block-size: 100%; min-width: 0; min-height: 0; overflow: hidden; }
.pcbm-v2 .kopband__beeld .galerij__hoofd img { display: block; inline-size: 100%; block-size: 100%; max-inline-size: 100%; max-block-size: 100%; object-fit: contain; }
.galerij__duimen { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; list-style: none; padding: 0; }
.pcbm-v2 .galerij__duimen button { box-sizing: border-box; width: 2.75rem; height: 2.75rem; padding: 0.15rem; overflow: hidden; }
.pcbm-v2 .galerij__duimen img { display: block; inline-size: 100%; block-size: 100%; max-inline-size: 100%; max-block-size: 100%; object-fit: contain; }
.galerij__leeg { aspect-ratio: 4 / 3; display: grid; place-items: center; text-align: center; font-size: var(--maat-terzijde); color: var(--text-zwak); padding: 1rem; }

/* ── Sectienavigatie ─────────────────────────────────────────────────────────────────── */
/* ── Sectienavigatie ─────────────────────────────────────────────────────────────────── */
/* Plakt onder de theme-sitekop (60 px, sticky, z-index 1000) en onder de adminbalk als die er is. */
.sectienav { position: sticky; top: var(--pp-kop-hoogte); z-index: 30; background: var(--bg-primary); }
.admin-bar .sectienav { top: calc(var(--pp-kop-hoogte) + 32px); }
@media (max-width: 782px) { .admin-bar .sectienav { top: calc(var(--pp-kop-hoogte) + 46px); } }
.sectienav ul { list-style: none; display: flex; gap: 0.25rem; padding: 0; margin: 0; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.sectienav ul::-webkit-scrollbar { display: none; }
.sectienav li { scroll-snap-align: start; }
.sectienav a { display: block; padding: 0.75rem 0.85rem; white-space: nowrap; font-weight: 500; font-size: var(--maat-tekst); color: var(--text-secondary); }
.sectienav a[aria-current="true"] { color: var(--text-primary); }

/* Schuifrand: een houder die productpagina.js om een horizontale schuiver zet (sectienavigatie,
   tabbladen) en `data-meer="links|rechts|links rechts|geen"` bijhoudt. Aan de kant waar meer
   is, ligt een verloop met een pijlpunt over de rand — de schuiver zelf blijft onaangeraakt. */
.schuifrand { position: relative; min-width: 0; }
.schuifrand::before, .schuifrand::after { content: "›"; position: absolute; top: 0; bottom: 0; width: 2.75rem; display: grid; place-items: center; padding-inline-start: 1rem; font-size: 1.25rem; line-height: 1; color: var(--text-zwak); background: linear-gradient(to right, transparent, var(--bg-primary) 55%); pointer-events: none; opacity: 0; transition: opacity 0.15s; }
.schuifrand::after { right: 0; }
.schuifrand::before { left: 0; transform: scaleX(-1); }
.schuifrand[data-meer~="rechts"]::after, .schuifrand[data-meer~="links"]::before { opacity: 1; }

/* ── Secties ─────────────────────────────────────────────────────────────────────────── */
.sectie { padding-block: 2rem 0.5rem; }
.sectie > h2 { font-size: 1.375rem; font-weight: 600; color: var(--text-primary); margin: 0 0 1rem; }
.sectie h3 { font-size: var(--maat-kop); font-weight: 600; color: var(--text-primary); margin: 0 0 0.5rem; }
.sectie p, .sectie li { max-width: 62ch; line-height: 1.6; }
.sectie p { margin: 0 0 0.75rem; }
.sectie a:not(.knop) { color: var(--brand); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: from-font; }
.tweekolom { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; }
.terzijde { font-size: var(--maat-terzijde); color: var(--text-zwak); }

/* ── Mobiele koopbalk ────────────────────────────────────────────────────────────────── */
/* Basis (telefoon): vast onderaan, maar pas zichtbaar als de koopkaart uit beeld is — dat
   houdt productpagina.js bij in `data-verborgen`. Vanaf de tablet (≥ 600) bestaat hij niet. */
.koopbalk { display: flex; position: fixed; inset: auto 0 0 0; z-index: 45; align-items: center; gap: 0.75rem; padding: 0.6rem 1rem; padding-bottom: max(0.6rem, env(safe-area-inset-bottom)); background: var(--bg-primary); transition: transform 0.2s ease; }
.koopbalk[data-verborgen="true"] { transform: translateY(110%); }
.koopbalk__prijs { font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; min-width: 0; }
.koopbalk__prijs small { display: block; font-weight: 400; font-size: 0.75rem; color: var(--text-zwak); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.koopbalk .knop { margin-inline-start: auto; flex: none; }
.widget { bottom: 4.25rem; }
body.pcbm-product-v2 { padding-bottom: 4.5rem; }
@media (prefers-reduced-motion: reduce) { .zijpaneel, .koopbalk { transition: none; } }
/* ══════════════════════════════════════════════════════════════════════════════════════
 * Ronde 3 (04-09, na de eerste reactie van de eigenaar): het koopblok als showstuk, het
 * zijpaneel met tabbladen en zoeken, uitvoeringen, en de diepte-1-lagen.
 * ══════════════════════════════════════════════════════════════════════════════════════ */

/* ── Uitvoeringen ─────────────────────────────────────────────────────────────────────── */
.uitvoeringen { margin: 0 0 1rem; }
.uitvoeringen__label { display: block; font-size: var(--maat-terzijde); color: var(--text-zwak); margin-bottom: 0.35rem; }
.uitvoeringen ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; }
.uitvoeringen li { flex: 1 1 10rem; } /* telefoon: kaarten even breed over de volle regel; breder: naast elkaar */
.uitvoeringen li > * { display: flex; flex-direction: column; min-width: 0; padding: 0.5rem 0.75rem; border-radius: 0.5rem; box-shadow: inset 0 0 0 1px var(--text-zwak); color: var(--text-primary); font-weight: 600; font-size: var(--maat-terzijde); }
.uitvoeringen li > * small { font-weight: 400; color: var(--text-zwak); }
.uitvoeringen [aria-current="true"] { box-shadow: inset 0 0 0 2px var(--brand); }
.single-product-page .uitvoeringen li a { text-decoration: none; color: var(--text-primary); }

/* ══════════════════════════════════════════════════════════════════════════════════════
 * Ronde 4: rust en ritme, het veld, het vergrootglas, het aanwijsbare prijsverloop.
 * ══════════════════════════════════════════════════════════════════════════════════════ */

/* Ritme: elke sectie begint met een kop en één zin die zegt wat je gaat lezen */
.sectie { padding-block: 3rem 1rem; }
.sectie + .sectie { border-top: 1px solid var(--bg-tertiary); }
.sectie__dek { font-size: var(--maat-tekst); color: var(--text-zwak); margin: -0.5rem 0 1.5rem; max-width: 62ch; }
.sectie > h2 { margin-bottom: 1rem; }
/* Het veld: kernfeiten als rij, uitspraak met scorering, koopkaart */
.kernfeiten { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1.25rem; padding: 0; margin: 0 0 1.25rem; }
.kernfeiten li { display: flex; flex-direction: column; gap: 0.1rem; }
.kernfeiten span { font-size: 0.8125rem; color: var(--text-zwak); }
.kernfeiten b { font-size: var(--maat-tekst); font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.uitspraak-rij { display: flex; align-items: center; gap: 0.9rem; margin: 0 0 1.25rem; }
.uitspraak-rij .uitspraak { margin: 0; }
.uitspraak small { display: block; font-size: var(--maat-terzijde); font-weight: 400; color: var(--text-zwak); margin-top: 0.15rem; }
.scorering { position: relative; flex: none; width: 3.25rem; height: 3.25rem; display: grid; place-items: center; }
.scorering svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.scorering circle { fill: none; stroke-width: 4; }
.scorering .spoor { stroke: var(--bg-tertiary); }
.scorering .waarde { stroke: var(--brand-primary); stroke-linecap: round; }
.scorering b { font-size: 1rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.koopkaart { padding: 1rem 1.25rem; border-radius: 0.75rem; box-shadow: inset 0 0 0 1px var(--bg-tertiary); }
.koopkaart .prijsregel { margin-bottom: 0.25rem; }
.koopkaart .acties { margin-bottom: 0.5rem; }
.koopkaart .pastcheck { margin: 0; }

/* Galerij: klikbaar, met vergrootglas in een dialoog */
.galerij__zoom { padding: 0; cursor: zoom-in; position: relative; }
.galerij__hint { position: absolute; right: 0.5rem; bottom: 0.5rem; font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--bg-primary); color: var(--text-secondary); box-shadow: 0 1px 3px rgba(var(--shadow-rgb), 0.2); }
.lightbox { border: 0; padding: 0; width: min(64rem, 96vw); max-height: 94vh; background: var(--bg-primary); color: var(--text-secondary); border-radius: 0.75rem; box-shadow: var(--shadow-lg); }
.lightbox::backdrop { background: rgba(var(--shadow-rgb), 0.7); }
.lightbox__kop { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.9rem 1.25rem; }
.lightbox__kop p { margin: 0; color: var(--text-primary); }
.lightbox__kop span { display: block; font-size: var(--maat-terzijde); color: var(--text-zwak); }
.lightbox__beeld { position: relative; background: var(--plaat); height: min(70vh, 640px); display: grid; place-items: center; overflow: hidden; cursor: crosshair; }
.lightbox__beeld img { max-width: 100%; max-height: 100%; object-fit: contain; }
.loep { position: absolute; width: 11rem; height: 11rem; border-radius: 50%; pointer-events: none; background-repeat: no-repeat; background-color: var(--plaat); box-shadow: 0 0 0 3px var(--bg-primary), 0 6px 20px rgba(var(--shadow-rgb), 0.35); }
.lightbox__duimen { padding: 0.9rem 1.25rem 1.25rem; margin: 0; justify-content: center; }
.lightbox__duimen button { box-shadow: inset 0 0 0 1px var(--bg-tertiary); background: var(--plaat); border-radius: 0.375rem; }
.lightbox__duimen button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--brand); }

/* ══════════════════════════════════════════════════════════════════════════════════════
 * Ronde 5: winkellogo's, een duidelijker koopkaart, het beeldvenster zoals de grote winkels.
 * ══════════════════════════════════════════════════════════════════════════════════════ */
.prijsregel { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 0.75rem; }
.prijsregel__label { grid-column: 1 / -1; font-size: var(--maat-terzijde); color: var(--text-zwak); }
.acties-tekst { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0.25rem 0 0; font-size: var(--maat-terzijde); }
.tekstknop { padding: 0.25rem 0; color: var(--brand); text-decoration: underline; text-underline-offset: 0.15em; min-height: 1.75rem; }
.koopkaart .prijscontext { margin-bottom: 0.75rem; }
.koopkaart + .pastcheck { margin-top: 0.75rem; }
/* Basis: het beeldvenster vult het scherm; vanaf ≥ 768 wordt het een venster (ladder). */
.lightbox { margin: auto; width: 100vw; height: 100vh; max-height: none; border-radius: 0; overflow: hidden; display: flex; flex-direction: column; }
.lightbox:not([open]) { display: none; }
.lightbox::backdrop { background: rgba(var(--shadow-rgb), 0.82); }
.lightbox__kop { padding: 0.75rem 1rem 0.75rem 1.25rem; }
.lightbox__kop p b { display: block; }
.lightbox__teller { display: block; font-size: var(--maat-terzijde); color: var(--text-zwak); }
.lightbox__sluit { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%; color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--bg-tertiary); }
.lightbox__sluit svg { width: 1.25rem; height: 1.25rem; }
.lightbox__beeld { flex: 1; height: auto; min-height: 0; padding: 1rem 3.25rem; }
.lightbox__beeld img { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
.lightbox__pijl { position: absolute; top: 50%; transform: translateY(-50%); width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--bg-primary); color: var(--text-primary); box-shadow: 0 2px 10px rgba(var(--shadow-rgb), 0.18); }
.lightbox__pijl svg { width: 1.4rem; height: 1.4rem; }
.lightbox__pijl--vorige { left: 0.5rem; } .lightbox__pijl--volgende { right: 0.5rem; }
.lightbox__hint { margin: 0; padding: 0.5rem 1.25rem 0; font-size: 0.8125rem; color: var(--text-zwak); text-align: center; }
.lightbox__duimen { padding: 0.6rem 1.25rem 1rem; }

/* Ronde 7: het icoon en de tekstknop als regel (de rest van ronde 7 staat in _product-v2-blokken.css) */
.ico { width: 1.05em; height: 1.05em; flex: none; }
.tekstknop { display: inline-flex; align-items: center; gap: 0.35rem; }

/* ══════════════════════════════════════════════════════════════════════════════════════
 * Ronde 8: compacte koopkaart en kopband.
 * ══════════════════════════════════════════════════════════════════════════════════════ */
/* Kopband compacter: de maat staat in de basisregel (ronde 12); hier alleen de onderdelen */
.kernfeiten { gap: 0.5rem 1.25rem; margin-bottom: 0.9rem; padding-bottom: 0.9rem; }
.uitspraak-rij { margin-bottom: 0.9rem; gap: 0.75rem; }
.scorering { width: 2.75rem; height: 2.75rem; }
.scorering b { font-size: 0.9375rem; }
.uitspraak { font-size: 1.0625rem !important; line-height: 1.35; }
.koopkaart { padding: 0.9rem 1.1rem 1rem; }
.prijsregel { grid-template-columns: auto 1fr; align-items: baseline; column-gap: 0.6rem; margin-bottom: 0.6rem; }
.prijsregel__label { font-size: 0.8125rem; }
.prijsregel__prijs { font-size: 1.875rem; }
.prijsregel__bij { font-size: 0.9375rem; line-height: 1.35; }
.prijsregel__lever { display: block; font-size: 0.8125rem; opacity: 0.85; }
.voorraadstip { display: inline-block; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--signal-go); margin-inline-end: 0.35rem; vertical-align: middle; }
.acties { gap: 0.5rem; margin-bottom: 0.5rem; }
.acties .knop { min-height: 2.5rem; }
.acties-tekst { gap: 0.25rem 1rem; }
.pastcheck { margin-top: 0.6rem; }

/* Ronde 8b: de prijsregel als drie nette regels onder elkaar. */
.prijsregel { display: block; margin-bottom: 0.75rem; }
.prijsregel__label { display: block; margin-bottom: 0.1rem; }
.prijsregel__prijs { display: inline-block; margin-inline-end: 0.5rem; }
.prijsregel__bij { display: inline; }
.prijsregel__lever { display: block; margin-top: 0.2rem; margin-inline-start: 0; }
.uitspraak-rij { align-items: flex-start; }
.uitspraak { max-width: 46ch; }
.scorering { margin-top: 0.15rem; }
.prijsregel__geen { display: block; font-size: var(--maat-tekst); }

/* Ronde 12: op de telefoon staan de twee koopknoppen onder elkaar over de volle breedte. */
.koopkaart .acties .knop { flex: 1 1 100%; justify-content: center; }
.koopkaart .acties-tekst { justify-content: space-between; }
.koopkaart > :last-child { margin-bottom: 0; } /* de kaartrand is de afstand, niet de alinea-marge erbovenop */

/* ══════════════════════════════════════════════════════════════════════════════════════
 * DE LADDER — treden (deel 1: kopband, galerij, koopkaart, koopbalk, lightbox). Alleen
 * `min-width`; elke trede staat één keer. De blokken hebben hun eigen treden in
 * _product-v2-blokken.css. De uitleg per trede staat bovenin dit bestand.
 * ══════════════════════════════════════════════════════════════════════════════════════ */

/* ≥ 390 — telefoon */
@media (min-width: 390px) {
  .galerij__duimen button { width: 3rem; height: 3rem; }
}

/* ≥ 600 — tablet staand: twee kolommen in de kopband, koopbalk weg */
@media (min-width: 600px) {
  :root { --pp-goot: 1.25rem; --pp-kopband-kolom: minmax(0, 1fr) 15rem; --pp-blokrand: 1.25rem 1.5rem 1.5rem; }
  .kopband { gap: 0 1.5rem; }
  .kopband > div:first-child { display: block; min-width: 0; }
  .uitvoeringen li { flex: 0 1 auto; } .uitvoeringen li > * { min-width: 10rem; }
  .kopband > div:first-child > .kernfeiten { margin-top: 0; }
  .kopband__beeld { order: 0; margin-bottom: 0; }
  .galerij__hoofd { aspect-ratio: 5 / 4; }
  .galerij__duimen button { width: 3.5rem; height: 3.5rem; }
  .koopbalk { display: none; }
  body.pcbm-product-v2 { padding-bottom: 0; }
}

/* ≥ 768 — tablet liggend / smal desktop: bredere plaat, lightbox als venster */
@media (min-width: 768px) {
  :root { --pp-kopband-kolom: minmax(0, 1fr) 19rem; }
  .kopband { gap: 0 2rem; }
  .lightbox { width: min(78rem, 96vw); height: min(92vh, 60rem); border-radius: 0.75rem; }
  .lightbox__beeld { padding: 1.5rem 4.5rem; }
  .lightbox__pijl { width: 3rem; height: 3rem; }
  .lightbox__pijl--vorige { left: 1rem; } .lightbox__pijl--volgende { right: 1rem; }
}

/* ≥ 1024 — desktop: kopband 7/5, vier kernfeiten */
@media (min-width: 1024px) {
  :root { --pp-kopband-kolom: minmax(0, 7fr) minmax(280px, 5fr); }
  .kopband { gap: 0 2.5rem; }
  .kernfeiten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .koopkaart .acties .knop { flex: 0 1 auto; }
}

/* ≥ 1280 — desktop breed: de pagina groeit door tot 1360 px */
@media (min-width: 1280px) {
  :root { --pp-breedte: 1360px; --pp-goot: 2rem; --pp-koopblok-kolom: minmax(0, 2fr) minmax(20rem, 1fr); }
  .kopband { gap: 0 3rem; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════
 * AANRAAKMATEN — op een aanwijzer zonder muis is elk bedienbaar element minstens 44 × 44 px
 * (2,75 rem). Inline tekstlinks in lopende tekst zijn hiervan uitgezonderd (WCAG 2.5.8).
 * ══════════════════════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  /* `.single-product-page :is(…)` (0,2,0): designtaal.css zet `.single-product-page button
     { min-height: 24px }` (0,1,1) en zou anders elke knop-klasse hieronder verslaan. */
  .single-product-page :is(.knop, .knop--klein, .acties .knop, .koopbalk .knop, .tekstknop, .sectienav a, .uitvoeringen li > *, .lightbox__sluit, .galerij__duimen button) { min-height: 2.75rem; }
  .knop--klein { padding-block: 0.5rem; }
  .tekstknop { display: inline-flex; align-items: center; }
  .galerij__duimen button { min-width: 2.75rem; }
}


/* ══════════════════════════════════════════════════════════════════════════════════════
 * DE HUID — richting-2.css "Veld · kleur als plaats" (de tokens staan in theme-vars.css).
 * ══════════════════════════════════════════════════════════════════════════════════════ */
/*
 * richting-2.css — VELD · kleur als plaats
 *
 * STANDPUNT. Het merkblauw is geen linkkleur maar een plek: de kopband is een diepblauw veld
 * dat identiteit, prijs en handelingen bijeenhoudt, en het productbeeld ligt erop als een
 * witte plaat — zoals een onderdeel op een printplaat. Daaronder staat de sitenavigatie als
 * witte strook, en de pagina zelf op een koel, licht grond. Op dat grond staat de inhoud open;
 * er is precies één oppervlak (het koopblok met winkels en grafiek), omdat dat het blok is
 * waarop je klikt. De rest — oordeel, specificaties, prestaties, reviews — is lopende pagina.
 *
 * WAAROM DIT VAN PCBUILDMATE IS. Tweakers is een witte pagina met rode koppen en een rode
 * balk; bol en Coolblue zijn witte pagina's vol kaarten. Een pagina die opent met één diep
 * veld en één plaat heeft géén van beiden. Het veld is het merkblauw uit theme-vars.css,
 * verdiept zodat wit erop 8,9:1 haalt; de plaat is wit in beide thema's omdat het
 * bronbeeld een ingebakken witte achtergrond heeft (D1) — de plaat maakt van dat gegeven
 * een keuze in plaats van een witte doos.
 *
 * WAT DIT TER DISCUSSIE STELT. K2 zegt "geen gevuld vlak". Dit is er één, en hij is
 * beargumenteerd: het veld draagt de identiteit van de pagina (data-omkadering), en
 * alles op het veld is nagerekend tegen het veld. REFERENTIES.md wees de donkere kopband
 * van PCPartPicker af wegens het witte-doos-effect; de plaat is het antwoord daarop.
 *
 * DE TOKENS (--veld, --veld-kaart, --veld-tekst, --veld-zwak, --veld-lijn, --veld-signal-*, --grond,
 * --oppervlak, --plaat, --plaat-lijn, --plaat-inkt) staan met hun waarde en rol in theme-vars.css,
 * in het lichte én het donkere blok (Critical Rule 3: geen hex in de plugin).
 */

body.pcbm-product-v2 { background: var(--grond); }
/* Het veld */
.veld { background: var(--veld); color: var(--veld-tekst); }
.veld .kruimels, .veld .identiteit, .veld .prijscontext, .veld .pastcheck, .veld .uitvoeringen__label { color: var(--veld-zwak); }
.veld .kruimels [aria-current] { color: var(--veld-tekst); }
/* Voorrang boven de gedeelde laag én de designtaal: op het veld is elke link veld-tekst (nagerekend ≥ 8,9:1). */
.single-product-page .veld .kruimels li a, .single-product-page .veld :is(p, div) a:not(.knop), .single-product-page .veld :is(div) a.knop--secundair { color: var(--veld-tekst); }
.single-product-page .veld .kruimels li a { color: var(--veld-zwak); }
.veld .kopband h1, .veld .prijsregel__prijs, .veld .kernspecs { color: var(--veld-tekst); }
.veld .kopband h1 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.veld .kernspecs { color: var(--veld-zwak); }
.veld .prijsregel__bij { color: var(--veld-tekst); }
.veld .prijsregel__bij a, .veld .pastcheck a { color: var(--veld-tekst); }
.veld .kopband { padding-block: 0.75rem 2rem; }
.veld .knop { border-radius: 0.5rem; }
.veld .knop--primair, .single-product-page .veld :is(div) a.knop--primair { background: var(--veld-tekst); color: var(--veld); }
.veld .knop--primair:hover { background: var(--veld-zwak); }
.veld .knop--secundair { color: var(--veld-tekst); box-shadow: inset 0 0 0 1px var(--veld-zwak); }
.veld .uitspraak { font-size: 1.125rem; font-weight: 500; color: var(--veld-tekst); max-width: 40ch; margin: 0 0 1rem; line-height: 1.4; }

/* De plaat */
.plaat { background: var(--plaat); border-radius: 0.75rem; padding: 1rem; }
.plaat .galerij__hoofd { max-width: 100%; }
.plaat .galerij__duimen button { border-radius: 0.375rem; box-shadow: inset 0 0 0 1px var(--plaat-lijn); background: var(--plaat); }
.plaat .galerij__duimen button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--veld); }
.plaat .galerij__leeg { color: var(--plaat-inkt); }

/* Sectienav als witte strook */
.sectienav { background: var(--bg-primary); box-shadow: 0 1px 0 0 var(--bg-tertiary); }
.sectienav a[aria-current="true"] { box-shadow: inset 0 -3px 0 0 var(--veld); }
html.dark .sectienav a[aria-current="true"] { box-shadow: inset 0 -3px 0 0 var(--brand); }
/* Secties: open op het grond */
.sectie > h2 { display: inline-block; padding-bottom: 0.35rem; box-shadow: inset 0 -3px 0 0 var(--veld); }
html.dark .sectie > h2 { box-shadow: inset 0 -3px 0 0 var(--brand); }
.knop { border-radius: 0.5rem; }
.knop--primair { background: var(--brand-primary); }
.knop--primair:hover { background: var(--brand-primary-dark); }
.uitvoeringen li > * { background: var(--veld); box-shadow: inset 0 0 0 1px var(--veld-zwak); color: var(--veld-tekst); }
.uitvoeringen li > * small { color: var(--veld-zwak); }
.uitvoeringen [aria-current="true"] { background: var(--veld-tekst); color: var(--veld); box-shadow: none; }
.uitvoeringen [aria-current="true"] small { color: var(--veld); }
.single-product-page .veld .uitvoeringen li a { color: var(--veld-tekst); }
/* Ronde 4: het veld krijgt lucht en een koopkaart; de secties krijgen een rustige lijn. */
.veld .kopband { padding-block: 1rem 2.5rem; }
.veld .kopband h1 { font-size: clamp(1.5rem, 2.6vw, 2.125rem); margin-bottom: 0.25rem; }
.veld .identiteit { margin-bottom: 1.25rem; }
.veld .kernfeiten span { color: var(--veld-zwak); }
.veld .kernfeiten b { color: var(--veld-tekst); }
.veld .kernfeiten { padding-bottom: 1.25rem; box-shadow: inset 0 -1px 0 0 var(--veld-lijn); }
.veld .uitspraak small { color: var(--veld-zwak); }
.veld .scorering .spoor { stroke: var(--veld-lijn); }
.veld .scorering .waarde { stroke: var(--veld-tekst); }
.veld .scorering b { color: var(--veld-tekst); }
.veld .koopkaart { background: var(--veld-kaart); box-shadow: inset 0 0 0 1px var(--veld-lijn); }
.veld .prijsregel__prijs { font-size: 2.25rem; }
.veld .galerij__hint { background: var(--veld); color: var(--veld-tekst); box-shadow: none; }
.plaat { box-shadow: 0 12px 32px rgba(var(--shadow-rgb), 0.25); }
.sectie + .sectie { border-top-color: var(--bg-tertiary); }
.lightbox { background: var(--oppervlak); }
/* Ronde 5 */
.veld .prijsregel__label { color: var(--veld-zwak); }
.veld .tekstknop { color: var(--veld-tekst); }
html.dark .plaat { box-shadow: 0 12px 32px rgba(var(--shadow-rgb), 0.5); }
.veld .knop--secundair { background: transparent; }
.lightbox { background: var(--oppervlak); }
/* Ronde 7: drie lagen in het veld, en een dunne merkstreep onder de kopband. */
.veld { position: relative; }
.veld::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--brand-primary); opacity: 0.9; }
html.dark .veld::after { background: var(--brand); opacity: 0.7; }
.veld .koopkaart { border-radius: 0.75rem; padding: 1.1rem 1.25rem 1.25rem; }
.veld .kernfeiten { box-shadow: inset 0 -1px 0 0 var(--veld-lijn); }
.koopbalk { background: var(--oppervlak); box-shadow: var(--shadow-lg); }
/* Ronde 8c: signaalkleuren OP het veld en de koopkaart. De pagina-signalen zijn opgelost tegen
   wit respectievelijk de donkere grond; op het veld en de koopkaart halen ze 4,5:1 niet — gemeten
   1,01:1 voor caution op de lichte koopkaart. Deze drie (--veld-signal-*) zijn opnieuw opgelost
   tegen de lichtste ondergrond waarop ze kunnen liggen, de lichte koopkaart. */
.veld [data-signaal="go"] { color: var(--veld-signal-go); }
.veld [data-signaal="caution"] { color: var(--veld-signal-caution); }
.veld [data-signaal="block"] { color: var(--veld-signal-block); }
.veld .voorraadstip { background: var(--veld-signal-go); }