/*
 * _product-v2-blokken.css — de blokken van de productpagina v2: winkeltabel, prijsgrafiek,
 * specificaties, analyse, prestaties, reviews, zijpaneel, build-widget, vergelijklade,
 * formulieren en de diepte-1-lagen. Overgenomen uit productpagina.css + richting-2.css
 * (docs/mockups/redesign-2026/productpagina/); deel 2 en 3 vullen de bijbehorende markup.
 * Laadt ná _product-v2.css (dezelfde treden van de ladder, alleen de blokselectors).
 */

/* ── Winkeltabel ─────────────────────────────────────────────────────────────────────── */
.pcbm-v2 table { border-collapse: collapse; width: 100%; font-size: var(--maat-tabel); line-height: 1.45; font-variant-numeric: tabular-nums; }
.pcbm-v2 caption { text-align: left; font-size: var(--maat-terzijde); color: var(--text-zwak); margin-bottom: 0.5rem; }
.pcbm-v2 th, .pcbm-v2 td { text-align: left; padding: 0.5rem 1rem 0.5rem 0; vertical-align: baseline; }
.pcbm-v2 th:last-child, .pcbm-v2 td:last-child { padding-inline-end: 0; }
.pcbm-v2 thead th { font-weight: 600; color: var(--text-primary); font-size: var(--maat-terzijde); }
.tabelrol { overflow-x: auto; }

/* ── Prijsgrafiek ────────────────────────────────────────────────────────────────────── */
.grafiek svg { width: 100%; height: auto; display: block; }
.grafiek .as { stroke: var(--text-zwak); stroke-width: 1; }
.grafiek .raster { stroke: var(--text-zwak); stroke-width: 0.5; stroke-dasharray: 2 4; opacity: 0.6; }
/* Grafiektekst: 12 px, en de viewBox is 1:1 met de schermbreedte (productpagina.js), zodat 12 ook
   12 blijft. Ronde 12: was 11 px, en op 320 door de schaling 8 px. */
.grafiek .aslabel { font-size: 12px; fill: var(--text-zwak); font-variant-numeric: tabular-nums; }
.grafiek .lijn { fill: none; stroke: var(--text-primary); stroke-width: 2; stroke-linejoin: round; }
.grafiek .referentie { stroke: var(--signal-go); stroke-width: 1.25; stroke-dasharray: 5 4; }
.grafiek .label-grond { fill: var(--bg-primary); }
.grafiek .referentielabel { font-size: 12px; fill: var(--signal-go); font-weight: 600; }
.grafiek .eind { fill: var(--brand); }
.grafiek .eindlabel { font-size: 12px; fill: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--bg-primary); stroke-width: 4px; stroke-linejoin: round; }
.periodes { display: flex; gap: 0.25rem; margin-top: 0.5rem; }
.periodes button { padding: 0.3rem 0.65rem; font-size: var(--maat-terzijde); color: var(--text-secondary); min-height: 1.75rem; }
.periodes button[aria-pressed="true"] { color: var(--text-primary); font-weight: 600; box-shadow: inset 0 -2px 0 0 var(--brand); }
.prijsuitspraak { margin-top: 0.75rem; }
.prijsuitspraak strong { color: var(--text-primary); }
.prijsfeiten { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.5rem 1rem; list-style: none; padding: 0; margin: 0.75rem 0 0; font-size: var(--maat-terzijde); }
.prijsfeiten li { max-width: none; }
.prijsfeiten b { display: block; font-size: var(--maat-tabel); font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* ── Specificaties ───────────────────────────────────────────────────────────────────── */
.specs-kern { margin-bottom: 1rem; }
.specs-kern th[scope="row"] { font-weight: 400; color: var(--text-zwak); width: 40%; }
.specs-kern td { color: var(--text-primary); }
.specs-vol { columns: 1; column-gap: 2.5rem; }
.specs-vol .groep { break-inside: avoid; margin-bottom: 1.25rem; }
.specs-vol h3 { margin: 0 0 0.25rem; }
.specs-vol table th[scope="row"] { font-weight: 400; color: var(--text-zwak); width: 50%; padding-block: 0.3rem; }
.specs-vol table td { color: var(--text-primary); padding-block: 0.3rem; }
.specs-index { font-size: var(--maat-terzijde); color: var(--text-zwak); max-width: none; margin: 0 0 1rem; }
.specs-acties { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.75rem 0 1.5rem; }

/* ── Analyse ─────────────────────────────────────────────────────────────────────────── */
.analyse__oordeel { font-size: var(--maat-kop); font-weight: 600; color: var(--text-primary); max-width: 46ch; line-height: 1.35; margin: 0 0 0.5rem; }
.analyse__herkomst { font-size: var(--maat-terzijde); color: var(--text-zwak); margin-bottom: 1rem; }
.plusmin { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem 2rem; margin: 1rem 0; }
.plusmin ul { list-style: none; padding: 0; margin: 0; }
.plusmin li { position: relative; padding-inline-start: 1.5rem; margin-bottom: 0.5rem; }
.plusmin li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.plusmin .plus li::before { content: "+"; color: var(--signal-go); }
.plusmin .min li::before { content: "–"; color: var(--signal-block); }
.score { display: flex; align-items: center; gap: 1rem; margin: 1rem 0; }
.score__getal { font-size: 2.5rem; font-weight: 600; line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.score__getal small { font-size: 1rem; font-weight: 400; color: var(--text-zwak); }
.score__balk { flex: 1; height: 0.5rem; max-width: 22rem; }
.score__balk i { display: block; height: 100%; background: var(--brand-primary); }
.voorwie { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem 2rem; }
.voorwie ul { padding-inline-start: 1.1rem; margin: 0; }
.gerelateerd ul { list-style: none; padding: 0; margin: 0; }
.gerelateerd li { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.35rem; max-width: none; }
.gerelateerd .prijs { font-variant-numeric: tabular-nums; color: var(--text-primary); white-space: nowrap; }

/* ── Prestaties ──────────────────────────────────────────────────────────────────────── */
.benchmarks { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.6rem; max-width: 40rem; }
.benchmarks li { display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr) 4rem; gap: 0.75rem; align-items: center; max-width: none; }
.benchmarks .balk { height: 0.5rem; }
.benchmarks .balk i { display: block; height: 100%; background: var(--brand-primary); }
.benchmarks b { text-align: right; color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* ── Reviews ─────────────────────────────────────────────────────────────────────────── */
.reviews__samenvatting { margin-bottom: 1rem; color: var(--text-primary); }
.reviews__lijst { display: grid; gap: 1.25rem; max-width: 62ch; }
.review { padding-bottom: 1.25rem; border-bottom: 1px solid var(--bg-tertiary); }
.review:last-child { padding-bottom: 0; border-bottom: 0; }
.review__kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; }
.review__meta, .review__cijfer { margin: 0; font-size: var(--maat-terzijde); }
.review__meta { color: var(--text-zwak); }
.review__meta strong, .review__cijfer { color: var(--text-primary); }
.review__meta time::before { content: "·"; margin-inline: 0.4rem; }
.review h3 { margin-top: 0.5rem; }
.reviews-leeg { padding-block: 0.5rem; }

/* ── Zijpaneel ───────────────────────────────────────────────────────────────────────── */
.zijpaneel { position: fixed; inset: 0 0 0 auto; width: min(34rem, 100vw); z-index: 60; background: var(--bg-primary); overflow-y: auto; padding: 1.25rem; transform: translateX(100%); visibility: hidden; transition: transform 0.2s ease, visibility 0s 0.2s; }
.zijpaneel[data-open="true"] { transform: none; visibility: visible; transition: transform 0.2s ease; }
.zijpaneel__kop { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.zijpaneel__kop h2 { font-size: var(--maat-kop); margin: 0; color: var(--text-primary); }
.zijpaneel .specs-vol { columns: 1; }
.achtergrond { position: fixed; inset: 0; z-index: 55; background: var(--bg-overlay); }
.achtergrond[hidden] { display: none; }

/* ── Build-widget ────────────────────────────────────────────────────────────────────── */
.widget { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; }
.widget__pil { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; font-weight: 600; font-size: var(--maat-terzijde); background: var(--text-primary); color: var(--bg-primary); }
.widget__paneel { position: absolute; right: 0; bottom: 3.25rem; width: 20rem; padding: 1rem; background: var(--bg-primary); color: var(--text-secondary); }
.widget__paneel[hidden] { display: none; }
.widget__paneel h2 { font-size: var(--maat-kop); margin: 0 0 0.5rem; color: var(--text-primary); }
.widget__paneel p { font-size: var(--maat-terzijde); margin: 0 0 0.75rem; }
.widget__regel { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--maat-terzijde); padding-block: 0.3rem; }
.widget__regel b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.widget__paneel .knop { width: 100%; justify-content: center; margin-top: 0.5rem; }

/* ── Het koopblok ─────────────────────────────────────────────────────────────────────── */
.koopblok { display: grid; grid-template-columns: var(--pp-koopblok-kolom); gap: 2rem; align-items: start; }
.koopblok__kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 0.75rem 1rem; margin-bottom: 1rem; }
.koopblok__laagste { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 0.75rem; align-items: baseline; margin: 0; max-width: none; }
.koopblok__label { grid-column: 1 / -1; font-size: var(--maat-terzijde); color: var(--text-zwak); }
.koopblok__bedrag { font-size: 1.75rem; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1.1; }
.koopblok__bij { color: var(--text-secondary); }
.koopblok__acties { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.grafiek__kop { font-size: var(--maat-terzijde); font-weight: 500; color: var(--text-zwak); margin: 0 0 0.25rem; }
.grafiek .vlak { fill: var(--brand); opacity: 0.08; }
.koopblok__bedrag { font-size: 1.5rem; }


/* ── Zijpaneel met tabbladen ──────────────────────────────────────────────────────────── */
.zijpaneel { width: min(44rem, 100vw); padding: 0; display: flex; flex-direction: column; }
.zijpaneel__kop { padding: 1rem 1.25rem 0.5rem; margin: 0; }
.zijpaneel__product { margin: 0; max-width: none; }
.zijpaneel__product span { display: block; font-size: var(--maat-terzijde); color: var(--text-zwak); }
.zijpaneel__tabs { display: flex; gap: 0; overflow-x: auto; padding-inline: 1.25rem; box-shadow: inset 0 -1px 0 0 var(--bg-tertiary); scrollbar-width: none; }
.zijpaneel__tabs button { padding: 0.65rem 0.8rem; white-space: nowrap; font-weight: 500; color: var(--text-secondary); }
.zijpaneel__tabs button[aria-selected="true"] { color: var(--text-primary); box-shadow: inset 0 -2px 0 0 var(--brand); }
.zijpaneel__inhoud { padding: 1rem 1.25rem 2rem; overflow-y: auto; flex: 1; }
.zijpaneel .koopblok { grid-template-columns: 1fr; }
.zijpaneel .specs-vol { columns: 1; }
.zijpaneel .specs-acties, .zijpaneel .specs-index { display: none; }
.zijpaneel .specs-zoek { display: block !important; }
.zijpaneel .tweekolom { grid-template-columns: 1fr; }
.zijpaneel h3 { font-size: var(--maat-kop); }
.specs-zoek { margin: 0 0 1rem; }
.specs-zoek label { display: block; font-size: var(--maat-terzijde); color: var(--text-zwak); margin-bottom: 0.3rem; }
.specs-zoek input { width: 100%; padding: 0.6rem 0.75rem; font: inherit; color: var(--text-primary); background: var(--bg-primary); border: 0; border-radius: 0.5rem; box-shadow: inset 0 0 0 1px var(--text-zwak); }
.specs-zoek input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.specs-zoek__telling { font-size: var(--maat-terzijde); color: var(--text-zwak); margin: 0.35rem 0 0; }
.specs-vol .groep[hidden], .specs-vol tr[hidden] { display: none; }
.specs-vol mark { background: none; color: var(--brand); font-weight: 600; }

/* Formulieren in het paneel */
.formulier label { display: block; font-size: var(--maat-terzijde); color: var(--text-zwak); margin: 0.75rem 0 0.3rem; }
.formulier input:not([type="hidden"]), .formulier select, .formulier textarea { width: 100%; padding: 0.6rem 0.75rem; font: inherit; color: var(--text-primary); background: var(--bg-primary); border: 0; border-radius: 0.5rem; box-shadow: inset 0 0 0 1px var(--text-zwak); }
.formulier input:focus, .formulier select:focus, .formulier textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.formulier .knop { margin-top: 1rem; }
.invoer-euro { display: flex; align-items: center; gap: 0.5rem; }
.invoer-euro span { color: var(--text-zwak); }

/* ── Diepte-1-lagen ───────────────────────────────────────────────────────────────────── */
.uitgebreid { margin-top: 1.5rem; }
.uitgebreid h3 { margin-top: 1.25rem; }
.herkomst { font-size: var(--maat-terzijde); color: var(--text-zwak); max-width: 62ch; margin-top: 1rem; }
.waarnemingen { list-style: none; padding: 0; margin: 0 0 1rem; }
.waarnemingen li { position: relative; padding-inline-start: 1.25rem; margin-bottom: 0.6rem; max-width: 62ch; }
.waarnemingen li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--text-zwak); }
.waarnemingen li[data-as="lof"]::before { background: var(--signal-go); }
.waarnemingen li[data-as="frictie"]::before { background: var(--signal-caution); }
.telling { display: block; font-size: var(--maat-terzijde); color: var(--text-zwak); }
.claim { margin: 1.5rem 0; }
.claim h3 { margin-bottom: 0.25rem; }
.claim__telling { font-size: var(--maat-terzijde); color: var(--text-secondary); margin: 0 0 0.6rem; }
.noemer { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0 0 1.25rem; padding: 0.75rem 1rem; font-size: var(--maat-terzijde); border-inline-start: 3px solid var(--brand); max-width: 62ch; }
.noemer dt { color: var(--text-zwak); }
.noemer dd { margin: 0; color: var(--text-primary); }
.pcbm-v2 details summary { cursor: pointer; font-weight: 600; color: var(--text-primary); padding-block: 0.5rem; }
.pcbm-v2 details ol { padding-inline-start: 1.25rem; font-size: var(--maat-terzijde); }
.pcbm-v2 details li { margin-bottom: 0.3rem; max-width: none; }
.berekend { list-style: none; padding: 0; margin: 0 0 1rem; }
.berekend li { max-width: 62ch; margin-bottom: 0.75rem; }
.berekend b { color: var(--text-primary); }
.terzijde-kolom { font-size: var(--maat-terzijde); color: var(--text-zwak); }
.terzijde-kolom h3 { font-size: var(--maat-terzijde); }

.uitgebreid__kop { font-size: var(--maat-terzijde); color: var(--text-zwak); margin: 2rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--bg-tertiary); max-width: none; }
.claim__telling { max-width: 62ch; }
.berekend li { display: grid; grid-template-columns: 9rem 1fr; gap: 0.25rem 1rem; max-width: 70ch; margin-bottom: 0.9rem; }
.berekend li span { color: var(--text-secondary); }
.berekend li { grid-template-columns: minmax(0, 1fr); }

/* Deel 3: het citaat bij een claim (contract 12-consensusblok §2), een score zonder percentiel,
   de volle lade en de tekst van de build-widget. */
.claim blockquote { margin: 0.5rem 0 0; padding: 0.15rem 0 0.15rem 0.9rem; border-inline-start: 3px solid var(--bg-tertiary); font-size: var(--maat-terzijde); color: var(--text-secondary); max-width: 62ch; }
.claim blockquote p { margin: 0 0 0.25rem; }
.claim cite { display: block; font-style: normal; color: var(--text-zwak); }
.claim__telling [data-as="lof"] { color: var(--signal-go); }
.claim__telling [data-as="frictie"] { color: var(--signal-caution); }
.benchmarks .balk--leeg { background: transparent; box-shadow: inset 0 0 0 1px var(--bg-tertiary); }
.vergelijker__ga[aria-disabled="true"] { opacity: 0.7; }
.vergelijker__lijst li { max-width: none; }
.widget__tekst[hidden], .widget__staat[hidden], [data-uit-eiland][hidden] { display: none; }

/* Het prijsverloop: aanwijsbaar, met winkels */
.grafiek__kopregel { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.grafiek__kop { margin: 0; font-size: var(--maat-tekst); font-weight: 600; color: var(--text-primary); }
.periodes { margin: 0; gap: 0.15rem; padding: 0.15rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--bg-tertiary); }
.periodes button { border-radius: 999px; padding: 0.25rem 0.65rem; min-height: 1.75rem; }
.periodes button[aria-pressed="true"] { box-shadow: none; background: var(--text-primary); color: var(--bg-primary); }
.grafiek { position: relative; }
.grafiek svg { cursor: crosshair; touch-action: pan-y; }
.grafiek .vlak { opacity: 0.1; }
.grafiek .lijn { stroke-width: 2.25; }
.grafiek .aanwijzer { stroke: var(--text-zwak); stroke-width: 1; stroke-dasharray: 3 3; }
.grafiek .aanwijzer-stip { fill: var(--brand); stroke: var(--bg-primary); stroke-width: 2; }
.grafiek__tip { position: absolute; top: 0.5rem; left: 0.5rem; pointer-events: none; font-size: var(--maat-terzijde); background: var(--bg-primary); color: var(--text-secondary); padding: 0.5rem 0.7rem; border-radius: 0.5rem; box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.18), inset 0 0 0 1px var(--bg-tertiary); min-width: 11rem; }
.grafiek__tip b { display: block; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.grafiek__tip ul { list-style: none; padding: 0; margin: 0.3rem 0 0; }
.grafiek__tip li { display: flex; justify-content: space-between; gap: 1rem; font-variant-numeric: tabular-nums; }
.grafiek__tip time { color: var(--text-zwak); }
.grafiek__uitleg { font-size: 0.8125rem; color: var(--text-zwak); margin: 0.35rem 0 0.5rem; max-width: none; }
.legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0; margin: 0 0 0.75rem; }
.legenda button { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.6rem 0.2rem 0.45rem; font-size: 0.8125rem; border-radius: 999px; color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--bg-tertiary); }
.legenda button i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--text-zwak); }
.legenda button[aria-pressed="true"] { color: var(--text-primary); box-shadow: inset 0 0 0 2px var(--text-primary); }
.legenda button[data-reeks="0"] i { background: var(--reeks-1); } .legenda button[data-reeks="1"] i { background: var(--reeks-2); }
.legenda button[data-reeks="2"] i { background: var(--reeks-3); } .legenda button[data-reeks="3"] i { background: var(--reeks-4); }
.legenda button[data-reeks="4"] i { background: var(--signal-caution); } .legenda button[data-reeks="5"] i { background: var(--signal-block); }

/* Ronde 5b: de winkeltabel past in zijn kolom en in het paneel */
.zijpaneel [data-open-paneel="prijzen"] { display: none; }

/* ══════════════════════════════════════════════════════════════════════════════════════
 * Ronde 6: statusregel boven de tabel, kleinere letter in het prijsoverzicht, de vergelijklade,
 * en blokken die alleen in het zijpaneel staan.
 * ══════════════════════════════════════════════════════════════════════════════════════ */
/* Alleen als de pagina JavaScript heeft (html.js-enabled, gezet door header.php): zonder script
   is er geen paneel en staan de volle spectabel en het zoekveld gewoon op de pagina. */
.js-enabled .alleen-paneel { display: none !important; }
.zijpaneel .alleen-paneel { display: block !important; }
html:not(.js-enabled) .pcbm-v2 button[data-open-paneel] { display: none; }
.zijpaneel .specs-vol.alleen-paneel { display: block !important; }
.koopblok__status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin: 0; font-size: var(--maat-terzijde); color: var(--text-secondary); max-width: none; }
.koopblok__status time { color: var(--text-primary); font-weight: 600; }
.koopblok__stip { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--signal-go); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal-go) 18%, transparent); }
.koopblok__telling { color: var(--text-zwak); }
.koopblok__telling::before { content: "·"; margin-inline-end: 0.6rem; color: var(--text-zwak); }
.prijsfeiten { font-size: 0.8125rem; }
.prijsfeiten b { font-size: 0.9375rem; }
.grafiek__uitleg, .legenda button { font-size: 0.75rem; }
.vergelijker { position: fixed; right: 1rem; bottom: 7.5rem; z-index: 50; }
.vergelijker__pil { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; font-weight: 600; font-size: var(--maat-terzijde); background: var(--bg-primary); color: var(--text-primary); border-radius: 999px; box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.18), inset 0 0 0 1px var(--bg-tertiary); }
.vergelijker__aantal { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding-inline: 0.35rem; border-radius: 999px; background: var(--brand-primary); color: var(--text-on-fill); font-size: 0.75rem; }
.vergelijker__paneel { position: absolute; right: 0; bottom: 3.25rem; width: 21rem; padding: 1rem; background: var(--bg-primary); color: var(--text-secondary); border-radius: 0.75rem; box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--bg-tertiary); }
.vergelijker__paneel[hidden] { display: none; }
.vergelijker__paneel h2 { font-size: var(--maat-kop); margin: 0 0 0.5rem; color: var(--text-primary); }
.vergelijker__lijst { list-style: none; padding: 0; margin: 0 0 0.5rem; }
.vergelijker__lijst li { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding-block: 0.4rem; font-size: var(--maat-terzijde); box-shadow: inset 0 -1px 0 0 var(--bg-tertiary); }
.vergelijker__lijst li b { color: var(--text-primary); font-weight: 500; }
.vergelijker__lijst button { color: var(--text-zwak); font-size: 0.8125rem; text-decoration: underline; }
.vergelijker__paneel .knop { width: 100%; justify-content: center; margin-top: 0.5rem; }
.vergelijker__paneel .terzijde { margin: 0.5rem 0 0; }
.tekstknop[aria-pressed="true"]::before { content: "✓ "; }

/* Ronde 6b: het prijsblok krijgt lucht en de tabel meer ruimte per rij. */
.koopblok__kop { margin-bottom: 1.25rem; padding-bottom: 0.9rem; }
.koopblok__kop[data-omkadering] { box-shadow: inset 0 -1px 0 0 var(--bg-tertiary); }
.koopblok__status { font-size: 0.875rem; }
.koopblok__verloop .prijsfeiten { margin-top: 1rem; }

/* ══════════════════════════════════════════════════════════════════════════════════════
 * Ronde 7: iconen bij prijsalarm en build, ruimte tussen de paneelblokken, een strak
 * prijsoverzicht op één raster.
 * ══════════════════════════════════════════════════════════════════════════════════════ */
.widget__pil { display: inline-flex; align-items: center; gap: 0.5rem; }
.widget__staat { font-weight: 400; opacity: 0.75; }
.widget__staat::before { content: "· "; }
.formulier__kop { display: flex; align-items: center; gap: 0.5rem; font-size: var(--maat-kop); color: var(--text-primary); margin-bottom: 0.75rem; }
.formulier__kop .ico { width: 1.25rem; height: 1.25rem; }

/* Ruimte tussen de blokken die het paneel samenbrengt */
.zijpaneel [data-paneel-doel] > [data-paneel-inhoud] + [data-paneel-inhoud] { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--bg-tertiary); }
.zijpaneel [data-paneel-doel] > [data-paneel-inhoud] { display: block; }
.zijpaneel .waarnemingen { margin-bottom: 1.25rem; }
.zijpaneel .claim { margin: 1.25rem 0; }
.zijpaneel .claim:first-child { margin-top: 0; }
.zijpaneel .herkomst { margin-top: 1.25rem; padding-top: 0.75rem; border-top: 1px solid var(--bg-tertiary); }
.zijpaneel details { margin-top: 1rem; }

/* Het prijsoverzicht op één raster: elke kolom een vaste plek, cijfers rechts — zie DE WINKELTABEL. */

/* Ronde 7b: één rij per winkel met gelijke hoogte, de tag naast de naam. */

/* ══════════════════════════════════════════════════════════════════════════════════════
 * Ronde 8: compacte koopkaart en kopband, een tabel die naar 23 winkels schaalt,
 * het zijpaneel met een index per tabblad en een rustige prijzenlijst.
 * ══════════════════════════════════════════════════════════════════════════════════════ */


/* De tabel schaalt: 8 rijen, de rest achter één knop (uitbreidbaarheidscontract §17) */
.koopblok__tabel .tabelrol { max-height: none; }

/* Zijpaneel: index per tabblad, en prijzen als rustige lijst */
.zijpaneel__index[data-omkadering] { box-shadow: inset 0 -1px 0 0 var(--bg-tertiary); }
.zijpaneel__index { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; padding: 0.6rem 1.25rem; font-size: var(--maat-terzijde); }
.zijpaneel__index[hidden] { display: none; }
.zijpaneel__index a { color: var(--brand); text-decoration: underline; text-underline-offset: 0.15em; }
.zijpaneel .koopblok__kop { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.zijpaneel .grafiek { margin-top: 1rem; }

/* Analyse in het paneel: kortere regels, plus- en minpunten naast elkaar zolang het past */
.zijpaneel .plusmin { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.75rem 1.5rem; }
.zijpaneel .analyse__oordeel { font-size: 1.0625rem; line-height: 1.4; }
.zijpaneel .uitgebreid { margin-top: 1.25rem; }
.zijpaneel .uitgebreid h3 { font-size: var(--maat-tekst); }
.zijpaneel .berekend li { grid-template-columns: 1fr; gap: 0.15rem; }
.zijpaneel .sectie__dek { display: none; }

/* Ronde 8d: de prijzenlijst in het paneel als twee kolommen zonder gaten. */

/* Ronde 8e: in het paneel geen vast kolomraster — de rij is daar een lijstitem, geen tabelrij. */

/* Ronde 8f: verzending links onder de levering, rijen krapper. */

/* Ronde 9: elk blok in het paneel draagt daar zijn eigen kop; onderaan lucht; feiten in twee kolommen. */
.paneel-kop { font-size: 1.0625rem; font-weight: 600; color: var(--text-primary); margin: 0 0 0.75rem; }
.zijpaneel [data-paneel-doel] > .paneel-kop + [data-paneel-inhoud] { margin-top: 0; padding-top: 0; border-top: 0; }
.zijpaneel [data-paneel-doel] > .paneel-kop { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--bg-tertiary); }
.zijpaneel [data-paneel-doel] > .paneel-kop:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.zijpaneel__inhoud { padding-bottom: 3.5rem; }
.zijpaneel .prijsfeiten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1.5rem; }
.zijpaneel .koopblok { padding: 0; background: none; box-shadow: none; }
.zijpaneel .koopblok__verloop { padding-inline-start: 0; border-inline-start: 0; padding-top: 1.25rem; margin-top: 1.25rem; border-top: 1px solid var(--bg-tertiary); }

/* ══════════════════════════════════════════════════════════════════════════════════════
 * Ronde 10: de winkelrij als drie cellen. Prijs en verzending zijn afgeleiden van het
 * totaal — ze staan als één regel onder het bedrag in plaats van in eigen kolommen. Zo is
 * er één rechterrand om te scannen (ns-02) en past de rij ook naast 23 broertjes.
 * ══════════════════════════════════════════════════════════════════════════════════════ */
/* In het paneel dezelfde vorm, alleen krapper */

/* Ronde 10b: de merkstreep hoort alleen bij de goedkoopste rij. De designtaal zet hem op elke
   tr[data-omkadering], en sinds ronde 6 draagt élke winkelrij die aangifte — vandaar de streep
   langs de hele tabel. Hier expliciet: alleen [data-goedkoopst] krijgt hem. */

/* ══════════════════════════════════════════════════════════════════════════════════════
 * DE WINKELTABEL — één definitie (ronde 11). Alle eerdere lagen zijn hier vervangen.
 *
 * Twee vormen van dezelfde rij, allebei een raster:
 *   basis — twee cellen en een knoprij (winkel + levering | totaal + verzending / knop over de
 *           volle breedte). Alleen onder 390 px: daar is naast naam en prijs geen ruimte voor
 *           een derde cel.
 *   ≥ 390  — drie cellen (winkel + levering | totaal + verzending | knop). Dit is de rij op
 *           telefoon en tablet staand, én in het zijpaneel (`.zijpaneel .winkels`) en overal
 *           waar de markup `.winkels--smal` zegt.
 *   ≥ 768  — zes kolommen: Winkel · Levering · Prijs · Verzending · Totaal · knop. Eén regel
 *           per winkel, cijfers rechts in tabelcijfers. De zes kolommen vragen 672 px; op 768
 *           heeft de tabel er 680 (zie DE LADDER).
 * Haarlijn tussen de rijen en een merkstreep op de goedkoopste. De levertijden zijn tot een
 * korte vorm genormaliseerd (de volle tekst staat in `title`), zodat de kolom smal blijft en
 * de tabel 23 rijen draagt.
 * ══════════════════════════════════════════════════════════════════════════════════════ */
.winkels { table-layout: fixed; font-size: 0.9375rem; border-collapse: collapse; }
.winkels thead { display: none; }
.winkels thead tr, .winkels tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 0.75rem; row-gap: 0.25rem; }
.winkels thead th { font-size: 0.75rem; font-weight: 500; color: var(--text-zwak); padding: 0 0 0.5rem; text-align: left; }
.winkels thead th:nth-child(3), .winkels thead th:nth-child(4), .winkels thead th:nth-child(5) { text-align: right; }
.winkels tbody tr { padding-block: 0.7rem; }
.winkels th[scope="row"] { grid-column: 1; grid-row: 1; }
.winkel__lever { grid-column: 1; grid-row: 2; }
.winkel__prijs { display: none; }
.winkel__verzend { grid-column: 2; grid-row: 2; }
.winkel__totaal { grid-column: 2; grid-row: 1; }
/* Smal (320–389): de knop krijgt een eigen derde rij over de volle breedte — naast naam en prijs
   blijft er anders 100 px voor "forComponents" over. Vanaf ≥ 390 staat hij als derde cel. */
.winkel__actie { grid-column: 1 / span 2; grid-row: 3; margin-top: 0.35rem; }
.winkel__actie .knop { width: 100%; justify-content: center; }
.winkels tbody th, .winkels tbody td { padding: 0; width: auto; min-width: 0; overflow: hidden; text-align: left; }
.winkels tbody th[scope="row"] { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; }
.winkel__kop { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.5rem; min-width: 0; max-width: 100%; } /* smal (320): de naam valt onder het logo in plaats van "f." */
.winkel__logo { display: inline-grid; place-items: center; width: 3.5rem; height: 1.35rem; padding: 0.15rem 0.3rem; background: var(--plaat); border-radius: 0.3rem; box-shadow: inset 0 0 0 1px var(--bg-tertiary); flex: none; }
.winkel__logo img { width: 100%; height: 100%; object-fit: contain; }
.winkel__naam { font-weight: 600; color: var(--text-primary); min-width: 0; overflow-wrap: anywhere; }
.winkel__tag { align-self: flex-start; padding: 0.05rem 0.35rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; border-radius: 0.25rem; background: var(--brand-primary); color: var(--text-on-fill); white-space: nowrap; }
.winkel__lever { font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.winkel__prijs, .winkel__verzend, .winkel__totaal { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.winkel__prijs { font-size: 0.875rem; color: var(--text-secondary); }
.winkel__verzend { font-size: 0.8125rem; color: var(--text-zwak); }
.verzend--gratis { color: var(--signal-go); }
.verzend--onbekend { font-style: italic; }
.winkel__totaal { font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.winkel__totaal.geschat::before { content: "~ "; }
.winkels tbody tr[data-goedkoopst] .winkel__totaal { font-size: 1.0625rem; }
.winkels .winkel--uit .winkel__naam, .winkels .winkel--uit .winkel__totaal { color: var(--text-zwak); font-weight: 500; }
.winkels .winkel--uit .winkel__logo { opacity: 0.55; }

.winkel__actie .knop { min-height: 2rem; padding-inline: 0.85rem; font-size: 0.8125rem; }
.winkels tbody tr[hidden] { display: none; }
.winkels tbody tr:hover { background: rgba(var(--ink-rgb), 0.02); }
.single-product-page .winkels thead[data-omkadering] { border-bottom: 1px solid var(--bg-tertiary); }
.single-product-page .winkels tbody tr[data-omkadering]:not([data-goedkoopst]) { box-shadow: inset 0 1px 0 0 var(--bg-tertiary); }
.single-product-page .winkels tbody tr[data-omkadering][data-goedkoopst] { box-shadow: inset 0.2rem 0 0 0 var(--brand-primary), inset 0 1px 0 0 var(--bg-tertiary); }
.single-product-page .winkels tbody tr[data-omkadering] :is(th[scope="row"], .winkel__lever, .winkel__actie) { padding-inline-start: 0.7rem; } /* levering en knoprij lijnen met de naam, ook naast de merkstreep */
.winkels__meer { margin: 0.75rem 0 0; }

/* ══════════════════════════════════════════════════════════════════════════════════════
 * RONDE 12 — wat op de telefoon ingeklapt begint, en de knoppen op de koopkaart.
 * ══════════════════════════════════════════════════════════════════════════════════════ */
/* "Meer over dit product": op de telefoon ingeklapt achter één tekstknop (productpagina.js zet
   `data-ingeklapt` en de knop). Vanaf ≥ 768 en in het zijpaneel staat alles open. */
.uitgebreid__wissel { margin-top: 0.75rem; }
.uitgebreid[data-ingeklapt="true"] > :not(.uitgebreid__kop, .uitgebreid__wissel) { display: none; }
.zijpaneel .uitgebreid > :not(.uitgebreid__wissel) { display: revert; }
.zijpaneel .uitgebreid > .uitgebreid__wissel { display: none; }
.reviews-leeg .knop, .specs-acties .knop { justify-content: center; }

/* ══════════════════════════════════════════════════════════════════════════════════════
 * DE LADDER — treden voor de blokken (zie _product-v2.css voor de uitleg).
 * ══════════════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 390px) {
  .winkels thead tr, .winkels tbody tr { grid-template-columns: minmax(0, 1fr) auto auto; }
  .winkel__actie { grid-column: 3; grid-row: 1 / span 2; align-self: center; justify-self: end; margin-top: 0; }
  .winkel__actie .knop { width: auto; }
  .koopblok__bedrag { font-size: 1.75rem; }
}
@media (min-width: 600px) {
  .widget { bottom: 1rem; }
  .vergelijker { bottom: 4.25rem; }
  .berekend li { grid-template-columns: 9rem minmax(0, 1fr); }
}
@media (min-width: 768px) {

  /* De volledige winkeltabel: zes kolommen vragen 672 px, de tabel heeft hier 680. Het
     zijpaneel en `.winkels--smal` houden de drierijige vorm — daar is de breedte er niet. */
  .winkels:not(.winkels--smal, .zijpaneel *) thead { display: block; }
  .winkels:not(.winkels--smal, .zijpaneel *) thead tr, .winkels:not(.winkels--smal, .zijpaneel *) tbody tr { grid-template-columns: minmax(12.5rem, 1.8fr) minmax(5rem, 0.9fr) 5rem 5rem 6rem 5.5rem; column-gap: 0.6rem; row-gap: 0; }
  .winkels:not(.winkels--smal, .zijpaneel *) .winkel__lever { white-space: normal; overflow: visible; } /* "Volgende werkdag" breekt af, wordt niet afgekapt */
  .winkels:not(.winkels--smal, .zijpaneel *) .winkel__kop { flex-wrap: nowrap; }
  .winkels:not(.winkels--smal, .zijpaneel *) tbody tr[data-omkadering] :is(.winkel__lever, .winkel__actie) { padding-inline-start: 0; }
  .winkels:not(.winkels--smal, .zijpaneel *) .winkel__naam { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .winkels:not(.winkels--smal, .zijpaneel *) tbody tr { padding-block: 0.6rem; }
  .winkels:not(.winkels--smal, .zijpaneel *) :is(th[scope="row"], .winkel__lever, .winkel__verzend, .winkel__totaal, .winkel__actie) { grid-column: auto; grid-row: auto; }
  .winkels:not(.winkels--smal, .zijpaneel *) .winkel__prijs { display: block; }
  .tweekolom { grid-template-columns: minmax(0, 3fr) minmax(16rem, 2fr); }
  .specs-vol { columns: 2; }
  .uitgebreid[data-ingeklapt="true"] > :not(.uitgebreid__wissel) { display: revert; }
  .uitgebreid > .uitgebreid__wissel { display: none; }
}
@media (min-width: 1280px) {
  .koopblok { gap: 1.5rem; }
}
@media (pointer: coarse) {
  .single-product-page :is(.winkel__actie .knop, .periodes button, .legenda button, .widget__pil, .vergelijker__pil, .zijpaneel__tabs button, details summary, .vergelijker__lijst button) { min-height: 2.75rem; }
  .winkel__actie .knop { padding-block: 0.5rem; }
  .vergelijker__lijst button { display: inline-flex; align-items: center; }
  .periodes { padding: 0.15rem; }
  .periodes button, .legenda button { padding-inline: 0.85rem; }
  details summary { display: flex; align-items: center; }
  .score > a, .gerelateerd li > a, .zijpaneel__index a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .gerelateerd li { padding-block: 0; }
  .score { align-items: center; }
  .formulier input:not([type="hidden"]), .formulier select, .specs-zoek input { min-height: 2.75rem; }
}


/* ── De huid van de blokken (richting-2.css) ──────────────────────────────────────────── */
/* Het enige oppervlak: het koopblok */
.koopblok { background: var(--oppervlak); border-radius: 0.75rem; padding: 1.25rem 1.5rem; }
.koopblok .winkels tbody th, .koopblok .winkels tbody td { padding-block: 0.65rem; }
.koopblok thead[data-omkadering] { border-bottom-color: var(--bg-tertiary); }

.score__balk, .benchmarks .balk { background: var(--bg-tertiary); border-radius: 999px; overflow: hidden; }
.score__balk i, .benchmarks .balk i { background: var(--veld); }
html.dark .score__balk i, html.dark .benchmarks .balk i { background: var(--brand); }
.specs-vol h3 { color: var(--text-primary); }
.widget__pil { background: var(--veld); color: var(--veld-tekst); border-radius: 999px; }
.widget__paneel { background: var(--oppervlak); border-radius: 0.75rem; box-shadow: var(--shadow-lg); }
.zijpaneel { background: var(--oppervlak); box-shadow: var(--shadow-lg); }
.koopblok .label-grond { fill: var(--oppervlak); } .koopblok .eindlabel { stroke: var(--oppervlak); }

/* Ronde 3: het koopblok krijgt de hele breedte van het oppervlak; formulieren en zoekveld op het oppervlak. */
.koopblok { padding: var(--pp-blokrand); }
/* Basis: de grafiek staat onder de tabel, achter een lijn. Vanaf de trede ≥ 1280 van de ladder
   (productpagina.css) staan ze naast elkaar en wordt de lijn een staande. Dit is de enige
   trede die de huid kent. */
.koopblok__verloop { padding-top: 1.25rem; border-top: 1px solid var(--bg-tertiary); }
@media (min-width: 1280px) { .koopblok__verloop { padding-top: 0; border-top: 0; padding-inline-start: 1.5rem; border-inline-start: 1px solid var(--bg-tertiary); } }
.zijpaneel .specs-zoek input, .zijpaneel .formulier input:not([type="hidden"]), .zijpaneel .formulier select, .zijpaneel .formulier textarea { background: var(--grond); }
.noemer { background: var(--oppervlak); border-radius: 0 0.5rem 0.5rem 0; }
.uitgebreid__kop { border-top-color: var(--bg-tertiary); }
.grafiek__tip { background: var(--oppervlak); }
.vergelijker__pil, .vergelijker__paneel { background: var(--oppervlak); }
.koopblok__stip { box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal-go) 18%, transparent); }

.winkels tbody tr:hover { background: rgba(var(--ink-rgb), 0.025); }
.zijpaneel .herkomst, .zijpaneel [data-paneel-doel] > [data-paneel-inhoud] + [data-paneel-inhoud] { border-top-color: var(--bg-tertiary); }
.zijpaneel .schuifrand::before, .zijpaneel .schuifrand::after { background: linear-gradient(to right, transparent, var(--oppervlak) 55%); }