/* ---------------------------------------------------------------------------
 * keuzehulp.css — het keuzeblad (templates/keuzehulp.php), baserules 8
 *
 * WAAROM DIT BLAD ZO IS
 * ---------------------
 * Een boxspring is een aankoop van rond de duizend euro die niemand vaak doet.
 * Wie op de winkelvloer binnenkomt ziet 66 categorieën en tien maten en weet
 * dan nog niets; de filterrail daar helpt pas als je al weet waarop je filtert.
 * Deze pagina stelt de vragen die daarvóór komen.
 *
 * Dat maakt het een meetstaat, en niet een quiz met plaatjes. Een bed wordt in
 * centimeters verkocht, dus de vragen staan op een blad zoals de rest van deze
 * site een blad is: haarlijnen in plaats van kaders, een genummerde reeks zoals
 * op de kassa, de maatvraag als liniaal zoals op de productpagina, een stempel
 * rechtsonder met wat er tot nu toe gekozen is, cijfers op tabelbreedte.
 *
 * VAN LICHT NAAR DONKER, zoals de homepage, het contactblad en de bon:
 *
 *   papier   de band met het label, de kop en de liniaal met de voortgang —
 *            dezelfde --kleurPapier als de header, zodat de bovenkant van de
 *            pagina één oppervlak is
 *   wit      de vragen links, het stempel rechts
 *   wit      het advies: de producten die eruit komen
 *   inkt     de maatlijn met wat er na de keuze gebeurt, die zonder witte
 *            streep in de footer overloopt
 *
 * WAT HIER GEEN ELEMENT IS
 * ------------------------
 *   1. de haarlijn tussen de vragen en het stempel — een achtergrondlaag van
 *      één pixel op het raster zelf, zodat hij over de volle hoogte van het
 *      blad loopt en niet alleen langs de kortste kolom (zoals op de
 *      productpagina en het contactblad);
 *   2. de nummers 01, 02, 03 — voor de vragen, voor de standen op de liniaal en
 *      voor de stappen onderaan. Allemaal een CSS-teller, dus valt er een vraag
 *      weg omdat de winkel er te weinig antwoorden voor heeft, dan schuift de
 *      nummering mee;
 *   3. de streepjes van de liniaal en van de maatvraag: één pixel aan de lijn,
 *      twee pixels en langer waar je staat. Dezelfde aanwijzer als onder het
 *      actieve menu-item, op de kassa en op de productpagina;
 *   4. de groene voortgang over de liniaal — één laag, gevoed door
 *      --keuzeVoortgang uit het template, want dat is een gegeven van de pagina
 *      en niet van deze stylesheet.
 *
 * DE KLEUREN komen uit main.css; er staat er geen nieuwe in. Het accentgroen is
 * de kleur van streepjes, vinkjes en voortgang, zwart is de kleur van de tekst
 * en van de knop, en rood komt op dit blad alleen voor bij het bedrag dat eraf
 * gaat.
 *
 * GEEN BEGINTOESTAND IN DE CSS. motion.dev tekent de liniaal uit en laat de
 * kaarten opkomen; valt de bibliotheek uit, dan staat het blad er gewoon.
 * Dezelfde afspraak als bij motionInit.js, artikel.js en informatie.js.
 *
 * Klassenamen in camelCase (baserules 2).
 * --------------------------------------------------------------------------- */

.keuzeBlad {
    /* De haarlijn waar alles op staat. */
    --keuzeLijn: 1px solid var(--kleurRand);

    /* Waar het stempel onder uit moet komen: de hele plakkende header, en dat
       is meer dan de hoofdbalk — de navigatiebalk plakt mee. Rekenen met
       --hoogteHeaderVast laat het vakje half achter het menu hangen. */
    --keuzePlak: calc(var(--hoogteHeaderPlak) + var(--ruimte5));

    /* Het stempel: breed genoeg voor 'Boxsprings kopen' plus het kruisje. */
    --keuzeZijBreedte: 20rem;
    --keuzeGoot: var(--ruimte8);
}

/* De pictogrammen. main.css tekent de set alleen in de header, de footer en de
   USP-balk; hier moet het dus opnieuw, anders vult de browser het lijnwerk op
   tot een vlek. */
.keuzeBlad svg {
    width: 1rem;
    height: 1rem;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Het kruimelpad staat boven de band en hoort dus bij hetzelfde papier; anders
   zit er een witte streep tussen de header en het blad. */
.kruimels {
    background: var(--kleurPapier);
}

/* --------------------------------------------------------------------------
 * De band bovenaan
 * -------------------------------------------------------------------------- */

.keuzeBand {
    background: var(--kleurPapier);
    border-block-end: var(--keuzeLijn);
}

.keuzeBandBinnen {
    padding-block: var(--ruimte7) var(--ruimte6);
}

/* Klein kapitaal aan een accentstreepje — hetzelfde label als op de homepage,
   de winkelvloer, het contactblad en het informatieblad. */
.keuzeLabel {
    display: flex;
    align-items: center;
    gap: var(--ruimte3);
    font-size: var(--maatMini);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--kleurTekstZacht);
}

.keuzeLabel::before {
    content: '';
    width: 2.25rem;
    height: 2px;
    flex: none;
    background: var(--kleurAccent);
}

.keuzeTitel {
    margin-block-start: var(--ruimte4);
    max-width: 24ch;
}

.keuzeInleiding {
    margin-block-start: var(--ruimte4);
    max-width: var(--breedteTekst);
    font-size: 1.0625rem;
    color: var(--kleurTekstZacht);
}

.keuzeInleiding p + p {
    margin-block-start: var(--ruimte3);
}

/* --------------------------------------------------------------------------
 * De liniaal met de voortgang
 *
 * Dezelfde vorm als het bestelproces op de kassa en de bezorging op de
 * bedankpagina: één doorlopende haarlijn met een streepje per stand, en het
 * groene deel loopt tot waar je bent. Je ziet dus hoeveel er nog komt zonder
 * dat er ergens 'stap 2 van 4' hoeft te staan.
 * -------------------------------------------------------------------------- */

.keuzeLiniaal {
    margin-block-start: var(--ruimte7);
}

.keuzeStanden {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
    border-block-start: var(--keuzeLijn);
    counter-reset: keuzeStand;
}

/* Het afgelegde deel van de lijn, over de haarlijn heen. */
.keuzeStanden::before {
    content: '';
    position: absolute;
    top: -1px;
    inset-inline-start: 0;
    width: var(--keuzeVoortgang, 0%);
    height: 2px;
    background: var(--kleurAccent);
    transition: width var(--overgangTraag);
}

.keuzeStand {
    position: relative;
    counter-increment: keuzeStand;
}

.keuzeStandLink {
    display: block;
    padding: var(--ruimte6) var(--ruimte4) 0 0;
    text-decoration: none;
    color: inherit;
}

.keuzeStandStreep {
    position: absolute;
    top: -1px;
    inset-inline-start: 0;
    width: 1px;
    height: var(--ruimte4);
    background: var(--kleurRand);
    transition: height var(--overgangTraag), background-color var(--overgang), width var(--overgang);
}

.keuzeStand.isKlaar .keuzeStandStreep {
    background: var(--kleurAccent);
}

/* De stand waar je bent: een langer streepje van twee pixels. */
.keuzeStand.isNu .keuzeStandStreep {
    width: 2px;
    height: var(--ruimte6);
    background: var(--kleurAccent);
}

.keuzeStandNr::before {
    content: counter(keuzeStand, decimal-leading-zero);
    font-family: var(--fontKop);
    font-size: var(--maatMini);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .08em;
    color: var(--kleurTekstZacht);
}

.keuzeStand.isKlaar .keuzeStandNr::before,
.keuzeStand.isNu .keuzeStandNr::before {
    color: var(--kleurAccentDonker);
}

.keuzeStandKop {
    display: block;
    margin-block-start: var(--ruimte1);
    font-family: var(--fontKop);
    font-size: var(--maatMini);
    font-weight: 600;
    line-height: 1.3;
    color: var(--kleurTekstZacht);
}

.keuzeStand.isKlaar .keuzeStandKop,
.keuzeStand.isNu .keuzeStandKop {
    color: var(--kleurTekstSterk);
}

.keuzeStand.isNu .keuzeStandKop {
    font-weight: 700;
}

.keuzeStandLink:hover .keuzeStandKop {
    color: var(--kleurAccentDonker);
}

@media (min-width: 40rem) {
    .keuzeStandKop { font-size: var(--maatKlein); }
}

/* --------------------------------------------------------------------------
 * Het raster: de vragen links, het stempel rechts
 *
 * De haarlijn ertussen is geen element maar een achtergrondlaag van één pixel
 * op het raster zelf, net als op de productpagina en het contactblad — zo loopt
 * hij over de volle hoogte van het blad en niet alleen langs de kortste kolom.
 * Hij kan een achtergrond zijn omdat de rechterkolom een vaste breedte heeft:
 * dan staat de lijn op een af te rekenen afstand van de rand (de kolom plus de
 * halve goot) in plaats van op een percentage dat met de inhoud meeschuift.
 * -------------------------------------------------------------------------- */

.keuzeRaster {
    display: grid;
    gap: var(--ruimte7);
    padding-block: var(--ruimte7) var(--ruimte8);
}

.keuzeKolom,
.keuzeZij {
    min-width: 0;
}

@media (min-width: 64rem) {
    .keuzeRaster {
        grid-template-columns: minmax(0, 1fr) var(--keuzeZijBreedte);
        column-gap: var(--keuzeGoot);
        background-image: linear-gradient(var(--kleurRand), var(--kleurRand));
        background-origin: content-box;
        background-position: right calc(var(--keuzeZijBreedte) + var(--keuzeGoot) / 2) top;
        background-size: 1px 100%;
        background-repeat: no-repeat;
    }

    /* Het stempel plakt mee en niet de vragen: de kolom met de vragen is de
       langste van de twee, en wat je gekozen hebt hoort in beeld te blijven
       terwijl je de volgende vraag beantwoordt — daar verandert het aantal
       immers van. Dezelfde afweging als op het contactblad. */
    .keuzeZij {
        position: sticky;
        top: var(--keuzePlak);
        align-self: start;
    }
}

/* --------------------------------------------------------------------------
 * De kop boven de vragen
 * -------------------------------------------------------------------------- */

.keuzeKolomTitel {
    font-size: var(--maatH2);
}

.keuzeKolomTekst {
    margin-block-start: var(--ruimte3);
    max-width: 54ch;
    color: var(--kleurTekstZacht);
}

.keuzeKolomTekst p + p {
    margin-block-start: var(--ruimte3);
}

/* --------------------------------------------------------------------------
 * Eén vraag
 *
 * De genummerde reeks van de kassa en het contactblad: elk blok op een
 * haarlijn met een groen streepje aan het begin van die lijn, en het nummer uit
 * een CSS-teller. Valt er een vraag weg, dan schuift de nummering mee.
 * -------------------------------------------------------------------------- */

.keuzeKolom {
    counter-reset: keuzeVraag;
}

.keuzeVraag {
    position: relative;
    /* Een fieldset staat standaard op min-inline-size: min-content en krimpt
       dus niet onder de breedte van zijn inhoud — op een smal scherm zou de
       liniaal met tien maten de hele kolom uit het raster duwen. Zelfde regel
       als bij .varGroep op de productpagina. */
    min-width: 0;
    margin-block-start: var(--ruimte7);
    padding-block-start: var(--ruimte5);
    border: 0;
    border-block-start: var(--keuzeLijn);
    counter-increment: keuzeVraag;

    /* Een aangeklikte vraag moet onder de plakkende header uit komen: het
       formulier verstuurt naar #keuzeVraagN. */
    scroll-margin-top: var(--keuzePlak);
}

/* Het groene streepje aan het begin van de lijn. */
.keuzeVraag::before {
    content: '';
    position: absolute;
    top: -1px;
    inset-inline-start: 0;
    width: 2.25rem;
    height: 2px;
    background: var(--kleurAccent);
}

/* De legend is de kop van de vraag: de vraag links, wat er gekozen staat
   rechts. Zo staat het antwoord op dezelfde regel als de vraag, en is het ook
   de regel die een schermlezer bij de groep voorleest.

   Een <legend> met display:flex doet in elke huidige browser wat er staat; valt
   het terug op de standaardweergave, dan staan de twee delen achter elkaar in
   plaats van aan weerskanten — leesbaar, alleen minder mooi. Zelfde afweging
   als bij .varKop op de productpagina. */
.keuzeVraagKop {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ruimte2) var(--ruimte4);
    width: 100%;
    padding: 0;
}

.keuzeVraagTitel {
    display: flex;
    align-items: baseline;
    gap: var(--ruimte3);
    font-family: var(--fontKop);
    font-size: var(--maatH3);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--kleurTekstSterk);
}

.keuzeVraagTitel::before {
    content: counter(keuzeVraag, decimal-leading-zero);
    font-size: var(--maatMini);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .08em;
    color: var(--kleurTekstZacht);
}

.keuzeVraag.isKlaar .keuzeVraagTitel::before {
    color: var(--kleurAccentDonker);
}

/* Wat er gekozen staat. Zolang er niets staat is het een zachte aanwijzing en
   geen melding: er is niets mis, er is alleen nog niets gekozen. */
.keuzeVraagKeuze {
    font-size: var(--maatKlein);
    color: var(--kleurTekstZacht);
}

.keuzeVraagKeuze.isGekozen {
    font-family: var(--fontKop);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--kleurTekstSterk);
}

.keuzeVraagUitleg {
    margin-block-start: var(--ruimte2);
    max-width: 60ch;
    font-size: var(--maatKlein);
    color: var(--kleurTekstZacht);
}

/* --------------------------------------------------------------------------
 * De antwoorden
 *
 * Radio's, geen knoppen met een data-attribuut: een radiogroep is wat dit is —
 * één keuze uit een reeks. De browser levert dan de pijltjestoetsen, de
 * groepering voor een schermlezer, en het verstuurt de keuze ook zonder
 * JavaScript. Dezelfde afweging als bij de variantenkeuze op de productpagina.
 * -------------------------------------------------------------------------- */

.keuzeInvoer {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
}

/* De focusring hangt aan het vakje, want het invoerveld zelf is niet te zien. */
.keuzeOptie:has(.keuzeInvoer:focus-visible) {
    outline: 2px solid var(--kleurAccent);
    outline-offset: 2px;
}

/* Het aantal producten achter het antwoord: cijfers op tabelbreedte, zodat een
   kolom getallen recht staat. Dit getal is wat de pagina eerlijk maakt — je
   ziet vóór de klik hoeveel het oplevert. */
.keuzeOptieAantal {
    font-family: var(--fontKop);
    font-size: var(--maatMini);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--kleurTekstZacht);
    transition: color var(--overgang);
}

/* Nul kan alleen bij het antwoord dat aanstaat: de bezoeker heeft zich
   vastgeklikt en hoort dát te zien in plaats van een leeg overzicht een klik
   later. Doorgestreept en wél aan te klikken — dezelfde afweging als de stand
   'op' bij de varianten. */
.keuzeOptie.isLeeg .keuzeOptieNaam {
    color: var(--kleurTekstZacht);
    text-decoration-line: line-through;
    text-decoration-thickness: 1px;
}

.keuzeOptie.isLeeg .keuzeOptieAantal {
    color: var(--kleurKorting);
}

/* --- de maatvraag als liniaal ------------------------------------------
 * De maatbalk van de homepage, nu om in te kiezen — en precies dezelfde vorm
 * als de maatkeuze op de productpagina, zodat een maat er overal op de site
 * hetzelfde uitziet.
 * ---------------------------------------------------------------------- */

.keuzeLiniaalOpties {
    /**
     * DEZELFDE AFSPRAAK ALS OP DE PRODUCTPAGINA
     *
     * Streepje en maat staan allebei op x=0 — dat is de liniaal. De tekst
     * begint dus onder het langste streepje, en de padding rekent daarmee.
     * Hier stond een vaste --ruimte5 (1,5rem) boven een gekozen streepje van
     * --ruimte8 (4rem): die zwarte streep liep dwars door de maat heen, en bij
     * hover (2rem) door de bovenkant. Het gekozen streepje is nu --ruimte7,
     * net als in product.css — het is dezelfde liniaal, dus dezelfde maten.
     */
    --keuzeStreepRust: var(--ruimte4);
    --keuzeStreepHover: var(--ruimte6);
    --keuzeStreepAan: var(--ruimte7);

    display: grid;
    /* 5.5rem is wat '180 × 210' op tabelbreedte nodig heeft; smaller en het
       getal loopt over het volgende streepje heen. */
    grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
    margin-block-start: var(--ruimte5);
    border-block-start: var(--keuzeLijn);
}

.keuzeOptie--maat {
    position: relative;
    display: block;
    padding: calc(var(--keuzeStreepAan) + var(--ruimte2)) var(--ruimte2) var(--ruimte2) 0;
    cursor: pointer;
}

.keuzeOptieStreep {
    position: absolute;
    top: -1px;
    inset-inline-start: 0;
    width: 1px;
    height: var(--keuzeStreepRust);
    background: var(--kleurRand);
    /* motion.dev tekent hem uit met scaleY; de oorsprong hoort dan bovenaan te
       liggen, zodat het streepje uit de lijn zakt in plaats van naar de lijn
       toe te groeien. */
    transform-origin: top;
    transition: height var(--overgangTraag), background-color var(--overgang), width var(--overgang);
}

.keuzeOptie--maat .keuzeOptieNaam {
    display: block;
    font-family: var(--fontKop);
    font-size: 1.0625rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--kleurTekstZacht);
    white-space: nowrap;
    transition: color var(--overgang);
}

.keuzeOptie--maat .keuzeOptieAantal {
    display: block;
    margin-block-start: var(--ruimte1);
}

.keuzeOptie--maat:hover .keuzeOptieStreep {
    height: var(--keuzeStreepHover);
    background: var(--kleurAccent);
}

.keuzeOptie--maat:hover .keuzeOptieNaam {
    color: var(--kleurTekstSterk);
}

/* De gekozen maat: een streepje dat tot onder de tekst doorloopt. */
.keuzeOptie--maat:has(.keuzeInvoer:checked) .keuzeOptieStreep {
    width: 2px;
    height: var(--keuzeStreepAan);
    background: var(--kleurTekstSterk);
}

.keuzeOptie--maat:has(.keuzeInvoer:checked) .keuzeOptieNaam {
    font-weight: 800;
    color: var(--kleurTekstSterk);
}

/* --- stalen en vakjes -------------------------------------------------- */

.keuzeOpties {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ruimte3);
    margin-block-start: var(--ruimte5);
}

.keuzeOptie--kleur,
.keuzeOptie--tekst {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--ruimte3);
    cursor: pointer;
    border: var(--keuzeLijn);
    transition: border-color var(--overgang), background var(--overgang);
}

.keuzeOptie--kleur {
    padding: var(--ruimte1) var(--ruimte4) var(--ruimte1) var(--ruimte1);
}

.keuzeOptie--tekst {
    padding: var(--ruimte3) var(--ruimte4);
}

.keuzeOptieStaal {
    width: 1.875rem;
    height: 1.875rem;
    flex: none;
    background: var(--keuzeStaalKleur, var(--kleurVlak));
    /* Een lichte stof op een wit vlak heeft een rand nodig om een vlak te zijn;
       inset, zodat de kleur zelf niet kleiner wordt. */
    box-shadow: inset 0 0 0 1px rgb(16 16 16 / .12);
}

.keuzeOptie--kleur .keuzeOptieNaam,
.keuzeOptie--tekst .keuzeOptieNaam {
    font-family: var(--fontKop);
    font-size: var(--maatKlein);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--kleurTekst);
}

.keuzeOptie--kleur:hover,
.keuzeOptie--tekst:hover {
    border-color: var(--kleurTekstSterk);
}

.keuzeOptie--kleur:has(.keuzeInvoer:checked),
.keuzeOptie--tekst:has(.keuzeInvoer:checked) {
    border-color: var(--kleurTekstSterk);
    background: var(--kleurPapier);
}

.keuzeOptie--kleur:has(.keuzeInvoer:checked) .keuzeOptieNaam,
.keuzeOptie--tekst:has(.keuzeInvoer:checked) .keuzeOptieNaam {
    color: var(--kleurTekstSterk);
}

/* Het pasteken in de hoek: hetzelfde antwoord op 'dit staat aan' als het lange
   streepje op de liniaal. */
.keuzeOptie--kleur:has(.keuzeInvoer:checked)::after,
.keuzeOptie--tekst:has(.keuzeInvoer:checked)::after {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: .375rem;
    height: .375rem;
    background: var(--kleurAccent);
}

/* --- de vraag overslaan ------------------------------------------------ */

.keuzeVraagWis {
    margin-block-start: var(--ruimte4);
    font-size: var(--maatKlein);
}

.keuzeVraagWis a {
    color: var(--kleurTekstZacht);
    text-decoration-color: var(--kleurRand);
}

.keuzeVraagWis a:hover {
    color: var(--kleurTekstSterk);
    text-decoration-color: currentColor;
}

/* --------------------------------------------------------------------------
 * De knop
 *
 * Zwart en zonder afgeronde hoek, net als op de kassa en het contactblad. Zwart
 * is de kleur van de winkelwagenknop van de doelsite; het accentgroen is hier
 * de kleur van streepjes, vinkjes en voortgang, en als dat óók de knopkleur is
 * meet het niets meer.
 * -------------------------------------------------------------------------- */

.keuzeKnop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ruimte3);
    padding: var(--ruimte4) var(--ruimte6);
    border: 0;
    background: var(--kleurZwart);
    font-family: var(--fontKop);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    color: var(--kleurWit);
    cursor: pointer;
    transition: background-color var(--overgang);
}

.keuzeKnop:hover {
    background: var(--kleurZwartHover);
    color: var(--kleurWit);
}

.keuzeKnop svg {
    transition: transform var(--overgang);
}

.keuzeKnop:hover svg {
    transform: translateX(.1875rem);
}

/* De knop verdwijnt met het hidden-attribuut zodra keuzehulp.js hem overneemt.
   Let op: er staat hier met opzet geen display — de browser zet zelf
   [hidden]{display:none}, maar dat is een UA-regel en élke regel van ons wint
   daarvan, ook een van één klasse. Wie hier een display toevoegt, moet er een
   [hidden]{display:none} bij zetten (zie product.css). */
.keuzeVerstuur {
    margin-block-start: var(--ruimte7);
}

/* --------------------------------------------------------------------------
 * Het stempel
 *
 * Het vakje dat op een bouwtekening rechtsonder staat: een kader van
 * haarlijnen met een groen streepje in de hoek. Hetzelfde vakje als de totalen
 * op de kassa, de contactgegevens op het contactblad en KVK en BTW onderin de
 * footer.
 * -------------------------------------------------------------------------- */

.keuzeStempel {
    position: relative;
    padding: var(--ruimte5);
    border: var(--keuzeLijn);
    background: var(--kleurWit);
}

.keuzeStempel::before {
    content: '';
    position: absolute;
    top: -1px;
    inset-inline-start: -1px;
    width: 2.75rem;
    height: 2px;
    background: var(--kleurAccent);
}

.keuzeStempelTitel {
    font-size: var(--maatMini);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--kleurTekstZacht);
}

.keuzeStempelLeeg {
    margin-block-start: var(--ruimte4);
    font-size: var(--maatKlein);
    color: var(--kleurTekstZacht);
}

/* De belofte, als er nog niets gekozen is: het antwoord op de vraag die de
   bezoeker al heeft voordat hij begint. Zodra er wél antwoorden staan schuift
   hij als noot naar onderen — dan is de keuze zelf het belangrijkste. */
.keuzeBelofte {
    margin-block-start: var(--ruimte4);
    font-family: var(--fontKop);
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.01em;
    color: var(--kleurTekstSterk);
}

/* --- de gegeven antwoorden -------------------------------------------- */

.keuzeAntwoorden {
    margin-block-start: var(--ruimte4);
}

/* De lijn staat tússen de regels en niet boven elke regel: anders zit er een
   dubbele haarlijn onder de kop. */
.keuzeAntwoord {
    padding-block: var(--ruimte4);
}

.keuzeAntwoord + .keuzeAntwoord {
    border-block-start: var(--keuzeLijn);
}

.keuzeAntwoordLabel {
    font-size: var(--maatMini);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--kleurTekstZacht);
}

.keuzeAntwoordWaarde {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ruimte3);
    margin-block-start: var(--ruimte1);
    font-family: var(--fontKop);
    font-size: 1.0625rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--kleurTekstSterk);
}

/* Het kruisje dat het antwoord weer openzet. Wat aanstaat is te zien én uit te
   zetten, op de plek waar het staat — dezelfde afspraak als de actieve filters
   op de winkelvloer. */
.keuzeAntwoordWis {
    display: inline-flex;
    flex: none;
    padding: var(--ruimte1);
    color: var(--kleurTekstZacht);
    transition: color var(--overgang);
}

.keuzeAntwoordWis:hover {
    color: var(--kleurKorting);
}

.keuzeAntwoordWis svg {
    width: .75rem;
    height: .75rem;
}

/* --- de uitkomst ------------------------------------------------------- */

/* Het grootste getal in het vakje, net als het te betalen bedrag op de kassa.
   Dit is het verkoopargument van de pagina: er staat wat er te krijgen is en
   vanaf welke prijs. */
.keuzeUitkomst {
    margin-block-start: var(--ruimte5);
    padding-block-start: var(--ruimte5);
    border-block-start: var(--keuzeLijn);
}

.keuzeUitkomstGetal {
    display: block;
    font-family: var(--fontKop);
    font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--kleurTekstSterk);
}

.keuzeUitkomstNaam {
    display: block;
    margin-block-start: var(--ruimte2);
    font-size: var(--maatKlein);
    color: var(--kleurTekstZacht);
}

.keuzeUitkomstVanaf {
    display: inline-block;
    margin-block-start: var(--ruimte3);
    font-family: var(--fontKop);
    font-size: var(--maatKlein);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--kleurAccentDonker);
}

.keuzeStempelNoot {
    margin-block-start: var(--ruimte4);
    padding-block-start: var(--ruimte4);
    border-block-start: var(--keuzeLijn);
    font-size: var(--maatKlein);
    color: var(--kleurTekstZacht);
}

/* --- de zekerheden ---------------------------------------------------- */

/* De USP's uit de site-instellingen, dezelfde vier als in de balk boven de
   header. Geen kader eromheen: dit is een lijstje bevestigingen en geen tweede
   stempel. */
.keuzeZekerheden {
    margin-block-start: var(--ruimte5);
}

.keuzeZeker {
    display: flex;
    align-items: flex-start;
    gap: var(--ruimte3);
    padding-block: var(--ruimte3);
    font-size: var(--maatKlein);
    color: var(--kleurTekst);
}

.keuzeZeker + .keuzeZeker {
    border-block-start: var(--keuzeLijn);
}

.keuzeZekerVink {
    margin-block-start: .2rem;
    color: var(--kleurAccent);
}

/* --- liever een mens -------------------------------------------------- */

.keuzeHulp {
    margin-block-start: var(--ruimte6);
    padding-block-start: var(--ruimte5);
    border-block-start: var(--keuzeLijn);
}

.keuzeHulpKop {
    font-family: var(--fontKop);
    font-size: var(--maatKlein);
    font-weight: 700;
    color: var(--kleurTekstSterk);
}

.keuzeHulpLijst {
    margin-block-start: var(--ruimte3);
}

.keuzeHulpItem {
    padding-block: var(--ruimte2);
}

.keuzeHulpItem a {
    display: inline-flex;
    align-items: center;
    gap: var(--ruimte2);
    font-family: var(--fontKop);
    font-size: var(--maatKlein);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    color: var(--kleurTekstSterk);
}

.keuzeHulpItem a:hover {
    color: var(--kleurAccentDonker);
}

.keuzeHulpItem svg {
    color: var(--kleurAccent);
}

/* --------------------------------------------------------------------------
 * Een blad zonder vragen
 *
 * De redacteur heeft er nog geen ingevuld, of de winkel heeft er te weinig
 * antwoorden voor. Dan geen leeg formulier maar een leeg blad met een haarlijn
 * eromheen en de weg naar de winkel — dezelfde vorm als de lege winkelwagen.
 * -------------------------------------------------------------------------- */

.keuzeLeeg {
    padding-block: var(--ruimte8) var(--ruimte9);
    text-align: center;
}

.keuzeLeegTekst {
    max-width: 46ch;
    margin-inline: auto;
    color: var(--kleurTekstZacht);
}

.keuzeLeegActie {
    margin-block-start: var(--ruimte6);
}

/* --------------------------------------------------------------------------
 * Het advies
 * -------------------------------------------------------------------------- */

.keuzeAdvies {
    padding-block: var(--ruimte8);
    border-block-start: var(--keuzeLijn);
    scroll-margin-top: var(--keuzePlak);
}

.keuzeAdviesLabel {
    display: flex;
    align-items: center;
    gap: var(--ruimte3);
    font-size: var(--maatMini);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--kleurTekstZacht);
}

.keuzeAdviesLabel::before {
    content: '';
    width: 2.25rem;
    height: 2px;
    flex: none;
    background: var(--kleurAccent);
}

.keuzeAdviesTitel {
    margin-block-start: var(--ruimte4);
    max-width: 26ch;
}

.keuzeAdviesTekst {
    margin-block-start: var(--ruimte4);
    max-width: var(--breedteTekst);
    color: var(--kleurTekstZacht);
}

.keuzeAdviesTekst p + p {
    margin-block-start: var(--ruimte3);
}

/* --- de kaarten -------------------------------------------------------
 * Dezelfde kaart als op de winkelvloer: aan een lijn in plaats van in een
 * doosje, foto op een papiervlak, geen schaduw en geen afgeronde hoek. Eigen
 * klassen en geen hergebruik van .productKaart, want shop.css staat op deze
 * pagina niet in de wachtrij (baserules 8) — dezelfde afweging als bij de buren
 * onderaan de productpagina.
 * ---------------------------------------------------------------------- */

.keuzeKaarten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--ruimte6);
    margin-block-start: var(--ruimte7);
}

.keuzeKaart {
    min-width: 0;
    padding-block-start: var(--ruimte4);
    border-block-start: var(--keuzeLijn);
    transition: border-color var(--overgang);
}

.keuzeKaart:hover {
    border-block-start-color: var(--kleurTekstSterk);
}

.keuzeKaartBeeld {
    display: block;
    background: var(--kleurPapier);
}

.keuzeKaartFoto {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.keuzeKaartTekst {
    padding-block-start: var(--ruimte4);
}

.keuzeKaartTitel {
    font-size: var(--maatH4);
    font-weight: 700;
}

.keuzeKaartTitel a {
    text-decoration: none;
    color: var(--kleurTekstSterk);
}

.keuzeKaartTitel a:hover {
    color: var(--kleurAccentDonker);
}

.keuzeKaartMaten {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ruimte2);
    margin-block-start: var(--ruimte3);
}

.keuzeKaartMaat,
.keuzeKaartMaatRest {
    padding: .125rem var(--ruimte2);
    border: var(--keuzeLijn);
    font-size: var(--maatMini);
    font-variant-numeric: tabular-nums;
    color: var(--kleurTekstZacht);
    white-space: nowrap;
}

.keuzeKaartVoorraad {
    display: flex;
    align-items: center;
    gap: var(--ruimte2);
    margin-block-start: var(--ruimte3);
    font-size: var(--maatMini);
    color: var(--kleurTekstZacht);
}

.keuzeKaartStip {
    width: .375rem;
    height: .375rem;
    flex: none;
    border-radius: 50%;
    background: var(--kleurAccent);
}

.keuzeKaartVoorraad.isUit .keuzeKaartStip {
    background: var(--kleurTekstZacht);
}

.keuzeKaartPrijs {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--ruimte2) var(--ruimte3);
    margin-block-start: var(--ruimte4);
}

.keuzeKaartAdvies {
    font-size: var(--maatKlein);
    font-variant-numeric: tabular-nums;
    color: var(--kleurTekstZacht);
}

.keuzeKaartBedrag {
    font-family: var(--fontKop);
    font-size: 1.25rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    color: var(--kleurTekstSterk);
}

/* Rood is op dit blad voorbehouden aan het bedrag dat eraf gaat — net als op de
   productpagina. */
.keuzeKaartVoordeel {
    flex-basis: 100%;
    font-size: var(--maatMini);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--kleurKorting);
}

.keuzeKaartActie {
    margin-block-start: var(--ruimte4);
}

.keuzeKaartLink {
    display: inline-flex;
    align-items: center;
    gap: var(--ruimte2);
    font-family: var(--fontKop);
    font-size: var(--maatKlein);
    font-weight: 700;
    text-decoration: none;
    color: var(--kleurTekstSterk);
}

.keuzeKaartLink:hover {
    color: var(--kleurAccentDonker);
}

.keuzeKaartPijl {
    transition: transform var(--overgang);
}

.keuzeKaartLink:hover .keuzeKaartPijl {
    transform: translateX(.1875rem);
}

.keuzeAdviesAlles {
    margin-block-start: var(--ruimte7);
}

/* --- niets gevonden ---------------------------------------------------
 * Geen doodlopende weg. Het blad zegt wélk antwoord de zoektocht dichtknijpt en
 * biedt aan dat los te laten, zodat de bezoeker niet hoeft te raden wat hij
 * moet wijzigen. Een lege pagina met 'geen resultaten' is precies waar deze
 * keuzehulp voor bestaat.
 * ---------------------------------------------------------------------- */

.keuzeNiets {
    margin-block-start: var(--ruimte7);
    padding: var(--ruimte6);
    border: var(--keuzeLijn);
}

.keuzeNietsKop {
    font-family: var(--fontKop);
    font-size: var(--maatH3);
    font-weight: 700;
    color: var(--kleurTekstSterk);
}

.keuzeNietsTekst {
    margin-block-start: var(--ruimte3);
    max-width: 54ch;
    color: var(--kleurTekstZacht);
}

.keuzeNietsLijst {
    margin-block-start: var(--ruimte5);
}

.keuzeNietsItem {
    border-block-start: var(--keuzeLijn);
}

.keuzeNietsItem a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ruimte4);
    padding-block: var(--ruimte4);
    font-family: var(--fontKop);
    font-size: var(--maatKlein);
    font-weight: 600;
    text-decoration: none;
    color: var(--kleurTekstSterk);
}

.keuzeNietsItem a:hover {
    color: var(--kleurAccentDonker);
}

.keuzeNietsItem svg {
    color: var(--kleurAccent);
}

/* --------------------------------------------------------------------------
 * De veelgestelde vragen
 *
 * bg_faq() schrijft zijn kop en zijn lijst apart uit, precies zodat een
 * template de kop in de kantlijn kan zetten met de lijst ernaast. Dezelfde
 * opmaak als op het contactblad: genummerd met een CSS-teller, elke vraag op
 * een haarlijn, geen kader. Dat is geen dubbel werk maar de afspraak van
 * baserules 8 — .paginaFaq staat in geen enkele gedeelde stylesheet, want elk
 * blad zet hem in zijn eigen register.
 * -------------------------------------------------------------------------- */

.keuzeBlad .paginaFaq {
    padding-block: var(--ruimte7) var(--ruimte8);
    border-block-start: var(--keuzeLijn);
}

.keuzeBlad .paginaFaqTitel {
    font-size: var(--maatH3);
}

.keuzeBlad .paginaFaqLijst {
    margin-block-start: var(--ruimte5);
    border-block-end: var(--keuzeLijn);
    counter-reset: keuzeFaq;
}

.keuzeBlad .paginaFaqItem {
    border-block-start: var(--keuzeLijn);
    counter-increment: keuzeFaq;
}

.keuzeBlad .paginaFaqItem summary {
    display: flex;
    align-items: baseline;
    gap: var(--ruimte4);
    padding-block: var(--ruimte4);
    font-family: var(--fontKop);
    font-size: var(--maatH4);
    font-weight: 600;
    color: var(--kleurTekstSterk);
    cursor: pointer;
    list-style: none;
}

.keuzeBlad .paginaFaqItem summary::-webkit-details-marker {
    display: none;
}

.keuzeBlad .paginaFaqItem summary::before {
    content: counter(keuzeFaq, decimal-leading-zero);
    font-size: var(--maatMini);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .08em;
    color: var(--kleurAccent);
}

/* Het driehoekje van de browser is weg; hier komt een chevron voor terug die
   omklapt als de vraag openstaat. */
.keuzeBlad .paginaFaqItem summary::after {
    content: '';
    width: .5rem;
    height: .5rem;
    flex: none;
    margin-inline-start: auto;
    align-self: center;
    border-right: 2px solid var(--kleurAccent);
    border-bottom: 2px solid var(--kleurAccent);
    transform: rotate(45deg);
    transition: transform var(--overgang);
}

.keuzeBlad .paginaFaqItem[open] summary::after {
    transform: rotate(-135deg);
}

.keuzeBlad .paginaFaqAntwoord {
    max-width: 62ch;
    padding-block-end: var(--ruimte5);
    color: var(--kleurTekst);
}

.keuzeBlad .paginaFaqAntwoord p + p {
    margin-block-start: var(--ruimte3);
}

@media (min-width: 64rem) {
    .keuzeBlad .paginaFaq {
        display: grid;
        grid-template-columns: 16rem minmax(0, 1fr);
        column-gap: var(--keuzeGoot);
    }

    .keuzeBlad .paginaFaqLijst {
        margin-block-start: 0;
    }
}

/* --------------------------------------------------------------------------
 * Het call-to-action-blok
 *
 * bg_cta() zet de knop van main.css neer: groen met een radius. Op het groene
 * vlak van dat blok hoort de knop zwart te zijn — wit op #23a892 haalt de 4,5:1
 * van WCAG AA niet, zwart haalt 6,9:1. Dezelfde afweging als bij het
 * afsluitende blok op de homepage.
 * -------------------------------------------------------------------------- */

.keuzeBlad .paginaCta {
    padding-block: 0 var(--ruimte8);
}

.keuzeBlad .paginaCtaActie .knop {
    padding: var(--ruimte4) var(--ruimte6);
    border-radius: 0;
    background: var(--kleurZwart);
    font-weight: 700;
    color: var(--kleurWit);
}

.keuzeBlad .paginaCtaActie .knop:hover {
    background: var(--kleurZwartHover);
    color: var(--kleurWit);
}

/* --------------------------------------------------------------------------
 * De donkere band onderaan
 *
 * Wat er na de keuze gebeurt, als maatlijn. Dezelfde band als onder het
 * contactblad: de liniaal als bovenrand (drie achtergrondlagen, geen enkel
 * element in de HTML) en zonder witte streep in de footer over.
 * -------------------------------------------------------------------------- */

.keuzeSluit {
    background: var(--kleurZwart);
    color: rgb(255 255 255 / .72);
}

.keuzeSluit::before {
    content: '';
    display: block;
    height: 10px;
    background-image:
        linear-gradient(rgb(255 255 255 / .16), rgb(255 255 255 / .16)),
        repeating-linear-gradient(to right, rgb(255 255 255 / .12) 0 1px, transparent 1px 40px),
        repeating-linear-gradient(to right, rgb(255 255 255 / .22) 0 1px, transparent 1px 200px);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% 1px, 100% 5px, 100% 10px;
}

.keuzeSluit > .omhulsel {
    padding-block: var(--ruimte7) var(--ruimte8);
}

.keuzeSluitKop {
    font-size: var(--maatH3);
    color: var(--kleurWit);
}

.keuzeSluitStappen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    margin-block-start: var(--ruimte6);
    border-block-start: 1px solid rgb(255 255 255 / .18);
    counter-reset: keuzeSluitStap;
}

.keuzeSluitStap {
    position: relative;
    padding: var(--ruimte6) var(--ruimte5) 0 0;
    counter-increment: keuzeSluitStap;
}

.keuzeSluitStreep {
    position: absolute;
    top: -1px;
    inset-inline-start: 0;
    width: 1px;
    height: var(--ruimte4);
    background: rgb(255 255 255 / .3);
}

.keuzeSluitNr::before {
    content: counter(keuzeSluitStap, decimal-leading-zero);
    font-family: var(--fontKop);
    font-size: var(--maatMini);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .08em;
    color: var(--kleurAccentLicht);
}

.keuzeSluitStapKop {
    display: block;
    margin-block-start: var(--ruimte1);
    font-family: var(--fontKop);
    font-size: var(--maatKlein);
    font-weight: 700;
    line-height: 1.3;
    color: var(--kleurWit);
}

.keuzeSluitStapTekst {
    display: block;
    margin-block-start: var(--ruimte2);
    font-size: var(--maatKlein);
    line-height: 1.5;
}

/* De band loopt zonder witte streep in de footer over, net als het afsluitende
   blok op de homepage en het contactblad. */
body:has(.keuzeSluit) .siteFooter {
    margin-top: 0;
}