/*
 * vergelijken.css — twee of drie producten naast elkaar.
 *
 * De opbouw volgt de pagina van boven naar onder:
 *
 *   1. de pagina en de kolomvariabele
 *   2. de kop
 *   3. de sleuvenrij die in beeld blijft
 *   4. de kaartjes in een sleuf
 *   5. de kiezerbalk en het suggestiepaneel
 *   6. de meldingen
 *   7. de blokken en hun kolommen
 *   8. blok 1 — waar is het voor bedoeld
 *   9. blok 2 — plus- en minpunten
 *  10. blok 3 — wat dit model onderscheidt
 *  11. blok 4 — welke moet je kiezen
 *  12. de specificaties
 *  13. de voorstellen en de zoekresultaten
 *  14. smallere schermen
 *
 * Twee dingen die de hele opmaak dragen:
 *
 * **`--vergelijkKolommen`** staat als inline stijl op `.vergelijk` en is het
 * aantal gekozen producten. De sleuvenrij en elk van de vier blokken gebruiken
 * dezelfde variabele, dus staat kolom B overal op precies dezelfde plek. Dat is
 * het verschil tussen een vergelijking en drie lijstjes onder elkaar.
 *
 * **Licht en vrolijk**, de vaste ontwerpkeuze van deze site: wit met lichtblauwe
 * vlakken, oranje als signaalkleur, geen donkere banden. Geen `filter: blur()`
 * en geen `backdrop-filter`, ook niet op de sleuvenrij die meebeweegt — een
 * doorschijnende balk die bij elke scrollstap opnieuw berekend wordt is precies
 * waar een browser op vastloopt.
 */

/* ==================================================================
 * 1. De pagina
 * ================================================================== */

/*
 * De kop is een gekleurde band die tegen de categoriebalk aan moet sluiten, dus
 * de standaardlucht boven het inhoudsgebied gaat eraf. Zelfde ingreep als op de
 * productpagina.
 */
.siteInhoud {
    padding-top: 0;
}

.vergelijk {
    /*
     * Alles wat met de kolommen te maken heeft rekent hiermee. De waarde komt
     * uit de template; deze regel is het vangnet voor het geval hij ontbreekt.
     */
    --vergelijkKolommen: 2;

    /* De ruimte tussen twee kolommen, en dus ook tussen twee sleuven. */
    --vergelijkTussen: 24px;

    /* Het lichtblauwe vlak dat de blokken van elkaar scheidt. */
    --vergelijkVlak: #f4f9fc;
    --vergelijkLijn: #e2ecf3;

    padding-bottom: 90px;
}

/* ==================================================================
 * 2. De kop
 * ================================================================== */

.vergelijkKop {
    margin-bottom: 28px;
    background-image: linear-gradient(180deg, var(--kleurHeaderRail) 0%, #fff 100%);
}

.vergelijkKopInner {
    padding-block: 46px 34px;
}

.vergelijkLabel {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    color: var(--kleurBlauw);
    column-gap: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/*
 * Het oranje streepje voor het labeltje. In CSS en niet in de markup: het is een
 * merkteken en geen inhoud, en een schermlezer hoort het niet voor te lezen.
 * Op /blog/ staat het als eigen span in de HTML — dat is daar historie; hier is
 * een ::before genoeg.
 */
.vergelijkLabel::before {
    width: 30px;
    height: 2px;
    flex: none;
    border-radius: 2px;
    background-color: var(--kleurOranje);
    content: "";
}

.vergelijkTitel {
    font-size: clamp(2rem, 3.8vw, 2.75rem);
    font-weight: 500;
    letter-spacing: -0.022em;
    line-height: 1.06;
}

.vergelijkTitel::after {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 8px;
    border-radius: 50%;
    background-color: var(--kleurOranje);
    content: "";
}

.vergelijkIntro {
    max-width: 60ch;
    margin-top: 16px;
    color: var(--kleurTekstZacht);
    font-size: var(--tekstMd);
    line-height: 1.7;
}

/* ==================================================================
 * 3. De sleuvenrij
 *
 * Blijft onder de hoofdbalk hangen zodra je voorbij de rij scrollt. Zonder dat
 * is onder blok 3 niet meer te zien welke kolom welk product was, en dan is elke
 * rij eronder een reeks waarden zonder onderwerp.
 *
 * `top` staat op de hoogte van de hoofdbalk. Die balk laat bij het omlaag
 * scrollen los en komt bij omhoog scrollen terug als vaste balk (zie main.js);
 * met deze waarde schuift de rij er nooit onder.
 * ================================================================== */

.vergelijkKiezer {
    margin-bottom: 36px;
}

/*
 * De rij zelf plakt, en de kiezerbalk eronder niet. Dat scheelt ruim tweehonderd
 * pixels vaste hoogte tijdens het scrollen: de kiezer is er om iets toe te
 * voegen en dat doe je één keer, terwijl de vraag "welke kolom was ook alweer
 * welk product" bij elke rij terugkomt.
 */
.vergelijkSleufRij {
    position: sticky;
    z-index: 20;
    top: var(--headerHoogte);
    display: grid;
    /*
     * Het witte vlak loopt door tot de rand van de container en niet tot de rand
     * van de rij: anders schuift de inhoud eronder in de twintig pixels padding
     * van `.omhulsel` naast de kaartjes door. Die padding wordt hier dus
     * teruggenomen en meteen weer als eigen padding gezet.
     *
     * Bewust niet met `width: 100vw`: die maat telt de schrijfbalk mee, en dan
     * scrollt de pagina op een venster mét schuifbalk zijwaarts.
     */
    margin-inline: -20px;
    padding: 12px 20px;
    gap: var(--vergelijkTussen);
    grid-template-columns: repeat(var(--vergelijkKolommen), minmax(0, 1fr));
    list-style: none;
    background-color: var(--kleurWit);
    box-shadow: 0 1px 0 var(--vergelijkLijn);
}

/*
 * Het witte schild boven de rij, precies zo hoog als de hoofdbalk.
 *
 * De hoofdbalk van deze site schuift bij omlaag scrollen weg en komt bij omhoog
 * scrollen terug (zie main.js). De rij plakt op de hoogte van die balk, want
 * lager kan niet — anders dekt de balk bij zijn terugkeer de bovenste helft van
 * de kaartjes af. Maar zolang de balk weg is, staat er een strook van
 * achtenvijftig pixels open waar de inhoud eronder doorheen schuift, en dat
 * leest als een fout.
 *
 * Dit vlak vult die strook. Het reist met de rij mee, het is dezelfde kleur, en
 * komt de balk terug, dan tekent die er met zijn hogere z-index overheen — ook
 * wit, dus er is niets van te zien. Geen `:has()` op de klasse van die balk:
 * dan zou de rij op het moment van terugkeren achtenvijftig pixels verspringen.
 */
.vergelijkSleufRij::before {
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: var(--headerHoogte);
    background-color: var(--kleurWit);
    content: "";
}

.vergelijkSleuf {
    position: relative;
    display: flex;
    min-width: 0;
    padding: 10px 34px 10px 10px;
    border: 1px solid var(--kleurLijn);
    border-radius: var(--randLg);
    background-color: var(--kleurWit);
    box-shadow: var(--schaduwZacht);
}

/*
 * Het kruis om een product uit de vergelijking te halen. Rechtsboven in de
 * kaart, met een raakvlak van 32 pixels: kleiner dan dat is op een telefoon niet
 * te raken.
 */
.vergelijkSleufWeg {
    position: absolute;
    text-decoration: none;
    top: 6px;
    right: 6px;
    display: flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--kleurTekstZacht);
    transition: background-color var(--duurSnel) var(--versnelling),
        color var(--duurSnel) var(--versnelling);
}

.vergelijkSleufWeg svg {
    width: 14px;
    height: 14px;
}

.vergelijkSleufWeg:hover,
.vergelijkSleufWeg:focus-visible {
    background-color: var(--kleurVlak);
    color: var(--kleurTekst);
}

/* ==================================================================
 * 4. Het kaartje in een sleuf
 * ================================================================== */

.vergelijkKaart {
    position: relative;
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    column-gap: 12px;
}

.vergelijkKaartBeeld {
    position: relative;
    display: flex;
    width: 72px;
    height: 72px;
    flex: none;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: var(--randMd);
    background-color: var(--kleurVlak);
}

.vergelijkKaartFoto {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.vergelijkKaartGeenFoto {
    color: var(--kleurBlauw);
    opacity: 0.4;
}

.vergelijkKaartGeenFotoIcoon {
    width: 28px;
    height: 28px;
}

.vergelijkKaartTekst {
    min-width: 0;
    flex: 1 1 auto;
}

.vergelijkKaartLetter {
    position: absolute;
    z-index: 1;
    top: -4px;
    left: -4px;
    display: flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--kleurHeaderNav);
    color: var(--kleurWit);
    font-size: var(--tekstXs);
    font-weight: 500;
    line-height: 1;
}

.vergelijkKaartMerk {
    color: var(--kleurTekstZacht);
    font-size: var(--tekstXs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.vergelijkKaartTitel {
    margin-top: 2px;
    font-size: var(--tekstBasis);
    font-weight: 500;
    line-height: 1.3;
}

.vergelijkKaartLink {
    color: var(--kleurTekst);
    text-decoration: none;
}

/*
 * Eén link per kaart: de titel, met een vlak eroverheen dat de hele kaart
 * aanklikbaar maakt. Dezelfde opzet als op de productkaart in de winkel — drie
 * losse links naar dezelfde pagina zetten hem drie keer in de tabvolgorde.
 * Het kruis staat er met een hogere z-index bovenop, want dat gaat ergens
 * anders naartoe.
 */
.vergelijkKaartLink::after {
    position: absolute;
    inset: 0;
    content: "";
}

.vergelijkSleufWeg {
    z-index: 2;
}

.vergelijkKaartLink:hover,
.vergelijkKaartLink:focus-visible {
    color: var(--kleurBlauw);
}

.vergelijkKaartKenmerken {
    display: flex;
    flex-wrap: wrap;
    margin-top: 6px;
    padding: 0;
    gap: 4px 6px;
    list-style: none;
}

.vergelijkKaartKenmerk {
    padding: 2px 7px;
    border-radius: var(--randSm);
    background-color: var(--kleurVlak);
    color: var(--kleurTekstZacht);
    font-size: var(--tekstXs);
    line-height: 1.4;
}

.vergelijkKaartVoet {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    margin-top: 8px;
    gap: 4px 12px;
}

.vergelijkKaartPrijs {
    color: var(--kleurTekst);
    font-size: var(--tekstMd);
    font-weight: 500;
}

.vergelijkKaartVoorraad {
    display: flex;
    align-items: center;
    color: var(--kleurTekstZacht);
    column-gap: 6px;
    font-size: var(--tekstXs);
}

.vergelijkKaartBolletje {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background-color: currentcolor;
}

.vergelijkKaartVoorraad.voorraadIn {
    color: var(--kleurGroen);
}

.vergelijkKaartVoorraad.voorraadUit {
    color: var(--kleurTekstZacht);
}

.vergelijkKaartStaat {
    margin-top: 6px;
    color: var(--kleurTekstZacht);
    font-size: var(--tekstXs);
    line-height: 1.4;
}

/* ==================================================================
 * 5. De kiezerbalk
 *
 * Een gewoon formulier: zonder JavaScript stuurt hij GET naar deze pagina en
 * komen de treffers eronder te staan. Het suggestiepaneel eronder komt uit een
 * <template> en bestaat alleen als het script draait.
 * ================================================================== */

.vergelijkZoek {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 14px;
    padding: 12px 16px;
    border: 1px dashed #bcd7e8;
    border-radius: var(--randLg);
    background-color: var(--vergelijkVlak);
    column-gap: 14px;
    row-gap: 10px;
}

.vergelijkZoekPlus {
    display: flex;
    width: 34px;
    height: 34px;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--kleurWit);
    color: var(--kleurBlauw);
}

.vergelijkZoekPlusIcoon {
    width: 16px;
    height: 16px;
}

.vergelijkZoekLabel {
    display: flex;
    min-width: 0;
    flex: 1 1 210px;
    flex-direction: column;
    row-gap: 2px;
}

.vergelijkZoekTitel {
    color: var(--kleurTekst);
    font-size: var(--tekstBasis);
    font-weight: 500;
}

.vergelijkZoekUitleg {
    color: var(--kleurTekstZacht);
    font-size: var(--tekstXs);
    line-height: 1.4;
}

.vergelijkZoekRegel {
    display: flex;
    flex: 1 1 340px;
    column-gap: 8px;
}

.vergelijkZoekVeld {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding-inline: 14px;
    border: 1px solid var(--kleurLijn);
    border-radius: var(--randMd);
    background-color: var(--kleurWit);
    color: var(--kleurTekst);
    font-family: var(--fontBasis);
    font-size: var(--tekstBasis);
}

.vergelijkZoekVeld::placeholder {
    color: var(--kleurTekstZacht);
}

.vergelijkZoekVeld:focus-visible {
    border-color: var(--kleurBlauw);
    outline: 2px solid rgb(35 126 179 / 25%);
    outline-offset: 1px;
}

.vergelijkZoekKnop {
    display: inline-flex;
    height: 42px;
    align-items: center;
    padding-inline: 16px;
    border: 0;
    border-radius: var(--randMd);
    background-color: var(--kleurHeaderNav);
    color: var(--kleurWit);
    column-gap: 8px;
    cursor: pointer;
    font-family: var(--fontBasis);
    font-size: var(--tekstSm);
    font-weight: 500;
    transition: background-color var(--duurSnel) var(--versnelling);
}

.vergelijkZoekKnop:hover,
.vergelijkZoekKnop:focus-visible {
    background-color: var(--kleurBlauwDonker);
}

.vergelijkZoekKnopIcoon {
    width: 15px;
    height: 15px;
    flex: none;
}

/* --- Het suggestiepaneel (alleen met JavaScript) -------------------- */

.vergelijkSuggesties {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    max-height: 340px;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--kleurLijn);
    border-radius: var(--randLg);
    background-color: var(--kleurWit);
    box-shadow: var(--schaduwLg);
    list-style: none;
    overflow-y: auto;
}

.vergelijkSuggestie {
    border-radius: var(--randMd);
}

.vergelijkSuggestieLink {
    display: flex;
    text-decoration: none;
    align-items: center;
    padding: 7px 9px;
    color: var(--kleurTekst);
    column-gap: 10px;
}

.vergelijkSuggestie[aria-selected="true"] {
    background-color: var(--kleurVlak);
}

.vergelijkSuggestieFoto {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: var(--randSm);
    background-color: var(--kleurVlak);
    object-fit: contain;
}

.vergelijkSuggestieTekst {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.vergelijkSuggestieTitel {
    overflow: hidden;
    font-size: var(--tekstSm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vergelijkSuggestieBij {
    color: var(--kleurTekstZacht);
    font-size: var(--tekstXs);
}

.vergelijkSuggestieLeeg {
    padding: 12px 10px;
    color: var(--kleurTekstZacht);
    font-size: var(--tekstSm);
}

/* ==================================================================
 * 6. De meldingen
 * ================================================================== */

.vergelijkVol,
.vergelijkWaarschuwing,
.vergelijkGelijkspel {
    display: flex;
    align-items: flex-start;
    padding: 12px 16px;
    border-radius: var(--randMd);
    background-color: #fff6e8;
    color: var(--kleurTekst);
    column-gap: 10px;
    font-size: var(--tekstSm);
    line-height: 1.6;
}

.vergelijkVol {
    margin-top: 14px;
}

.vergelijkWaarschuwing {
    margin-bottom: 22px;
}

.vergelijkGelijkspel {
    margin-bottom: 26px;
}

/*
 * De zachte variant: dat de omschrijvingen gelijk zijn is geen waarschuwing maar
 * een mededeling, en die hoort niet dezelfde kleur te hebben als "dit zijn geen
 * apparaten van dezelfde soort".
 */
.vergelijkWaarschuwingZacht {
    background-color: var(--vergelijkVlak);
    color: var(--kleurTekstZacht);
}

.vergelijkVolIcoon,
.vergelijkWaarschuwingIcoon,
.vergelijkGelijkspelIcoon {
    width: 17px;
    height: 17px;
    flex: none;
    margin-top: 2px;
    color: var(--kleurOranje);
}

.vergelijkWaarschuwingZacht .vergelijkWaarschuwingIcoon {
    color: var(--kleurBlauw);
}

.vergelijkWaarschuwingSoorten {
    display: block;
    margin-top: 2px;
    color: var(--kleurTekstZacht);
}

/* ==================================================================
 * 7. De blokken en hun kolommen
 * ================================================================== */

.vergelijkBlok {
    margin-bottom: 44px;
}

.vergelijkBlokKop {
    margin-bottom: 20px;
}

.vergelijkBlokTitel {
    display: flex;
    align-items: center;
    column-gap: 12px;
    font-size: var(--tekstH3);
    font-weight: 500;
    letter-spacing: -0.014em;
}

.vergelijkBlokTitel::before {
    width: 4px;
    height: 22px;
    flex: none;
    border-radius: 2px;
    background-color: var(--kleurOranje);
    content: "";
}

.vergelijkBlokUitleg {
    max-width: 74ch;
    margin-top: 10px;
    padding-left: 16px;
    color: var(--kleurTekstZacht);
    font-size: var(--tekstSm);
    line-height: 1.7;
}

.vergelijkKolommen {
    display: grid;
    margin: 0;
    padding: 0;
    gap: var(--vergelijkTussen);
    grid-template-columns: repeat(var(--vergelijkKolommen), minmax(0, 1fr));
    list-style: none;
}

.vergelijkKolom {
    min-width: 0;
    padding: 18px 20px;
    border: 1px solid var(--kleurLijn);
    border-radius: var(--randLg);
    background-color: var(--kleurWit);
}

/*
 * De kop boven een kolom staat in elk blok opnieuw. Op een breed scherm is dat
 * een herhaling van de sleuvenrij erboven en dus klein gezet; op een smal scherm
 * staan de kolommen onder elkaar en is het de enige aanduiding van wat je leest.
 */
.vergelijkKolomKop {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--kleurLijnZacht);
    column-gap: 8px;
}

.vergelijkKolomLetter {
    display: flex;
    width: 20px;
    height: 20px;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--kleurVlak);
    color: var(--kleurHeaderNav);
    font-size: var(--tekstXs);
    font-weight: 500;
    line-height: 1;
}

.vergelijkKolomNaam {
    overflow: hidden;
    color: var(--kleurTekst);
    font-size: var(--tekstSm);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==================================================================
 * 8. Blok 1 — waar is het voor bedoeld
 * ================================================================== */

.vergelijkDoel {
    color: var(--kleurTekst);
    font-size: var(--tekstBasis);
    line-height: 1.7;
}

.vergelijkDoelLeeg {
    color: var(--kleurTekstZacht);
    font-style: italic;
}

/* ==================================================================
 * 9. Blok 2 — plus- en minpunten
 * ================================================================== */

.vergelijkPuntenTitel {
    margin-bottom: 8px;
    font-size: var(--tekstXs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vergelijkPuntenTitel + .vergelijkPuntenLijst {
    margin-bottom: 16px;
}

.vergelijkPuntenTitelPlus {
    color: var(--kleurGroen);
}

.vergelijkPuntenTitelMin {
    color: var(--kleurOranjeDonker);
}

.vergelijkPuntenLijst {
    margin: 0;
    padding: 0;
    list-style: none;
}

.vergelijkPunt {
    display: flex;
    align-items: flex-start;
    padding-block: 4px;
    color: var(--kleurTekst);
    column-gap: 9px;
    font-size: var(--tekstSm);
    line-height: 1.55;
}

.vergelijkPuntIcoon {
    width: 15px;
    height: 15px;
    flex: none;
    margin-top: 3px;
}

/*
 * Het plus- en het minicoon dragen hun kleur in de SVG zelf (groen en grijs, uit
 * SAM-IT-PlusPunt.svg en -MinPunt.svg), net als op de productpagina. Hier dus
 * geen `color` erop: dat zou niets doen en de indruk wekken dat het wel kan.
 */

/*
 * De regel onder een lijst die niet van dit product zelf komt. Klein en grijs:
 * het is een voorbehoud bij wat erboven staat en geen mededeling op zichzelf.
 */
.vergelijkPuntenGedeeld,
.vergelijkPuntenLeeg {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--kleurLijn);
    color: var(--kleurTekstZacht);
    font-size: var(--tekstXs);
    line-height: 1.6;
}

/* ==================================================================
 * 10. Blok 3 — wat dit model onderscheidt
 * ================================================================== */

.vergelijkBlokUniek .vergelijkKolom {
    background-color: var(--vergelijkVlak);
    border-color: var(--vergelijkLijn);
}

.vergelijkUniekEigen {
    margin-bottom: 12px;
    color: var(--kleurTekst);
    font-size: var(--tekstBasis);
    line-height: 1.7;
}

.vergelijkUniekLijst {
    margin: 0;
    padding: 0;
    list-style: none;
}

.vergelijkUniekPunt {
    display: flex;
    align-items: flex-start;
    padding-block: 5px;
    color: var(--kleurTekst);
    column-gap: 9px;
    font-size: var(--tekstSm);
    font-weight: 500;
    line-height: 1.5;
}

.vergelijkUniekIcoon {
    width: 15px;
    height: 15px;
    flex: none;
    margin-top: 2px;
    color: var(--kleurOranje);
}

.vergelijkUniekGeen {
    color: var(--kleurTekstZacht);
    font-size: var(--tekstSm);
    line-height: 1.6;
}

/* ==================================================================
 * 11. Blok 4 — welke moet je kiezen
 *
 * Het blok waar de pagina naartoe werkt, en dus het enige met een kleurvlak en
 * een knop erin.
 * ================================================================== */

.vergelijkBlokConclusie {
    margin-top: 54px;
    padding: 30px 30px 34px;
    border-radius: var(--randLg);
    background-image: linear-gradient(165deg, var(--kleurHeaderRail) 0%, #fbfdff 62%);
}

.vergelijkKeuze {
    display: flex;
    position: relative;
    flex-direction: column;
    padding-top: 26px;
    box-shadow: var(--schaduwZacht);
}

.vergelijkKeuzeLetter {
    position: absolute;
    top: 14px;
    right: 16px;
    display: flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--kleurVlak);
    color: var(--kleurHeaderNav);
    font-size: var(--tekstSm);
    font-weight: 500;
    line-height: 1;
}

.vergelijkKeuzeTitel {
    margin-bottom: 14px;
    padding-right: 34px;
    color: var(--kleurTekstZacht);
    font-size: var(--tekstMd);
    font-weight: 400;
    line-height: 1.4;
}

.vergelijkKeuzeNaam {
    color: var(--kleurTekst);
    font-weight: 500;
}

.vergelijkKeuzeRedenen {
    margin: 0;
    padding: 0;
    list-style: none;
}

.vergelijkKeuzeReden {
    display: flex;
    align-items: flex-start;
    padding-block: 6px;
    color: var(--kleurTekst);
    column-gap: 10px;
    font-size: var(--tekstBasis);
    line-height: 1.55;
}

.vergelijkKeuzeIcoon {
    width: 16px;
    height: 16px;
    flex: none;
    margin-top: 3px;
    color: var(--kleurOranje);
}

.vergelijkKeuzeGeen {
    color: var(--kleurTekstZacht);
    font-size: var(--tekstSm);
    line-height: 1.65;
}

/*
 * Een kaart zonder eigen reden krijgt geen rode rand of grijs vlak. Het is geen
 * afgekeurd product; het wint alleen niets op de punten die te vergelijken zijn,
 * en dat staat er met zoveel woorden. Alleen de knop is er wat rustiger.
 */
.vergelijkKeuzeVoet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 18px;
    gap: 12px;
}

.vergelijkKeuzePrijs {
    color: var(--kleurTekst);
    font-size: var(--tekstLg);
    font-weight: 500;
    line-height: 1.2;
}

.vergelijkKeuzeBtw {
    display: block;
    color: var(--kleurTekstZacht);
    font-size: var(--tekstXs);
    font-weight: 400;
}

.vergelijkKeuzeKnop {
    display: inline-flex;
    text-decoration: none;
    align-items: center;
    padding: 11px 18px;
    border-radius: var(--randMd);
    background-color: var(--kleurOranje);
    color: var(--kleurWit);
    column-gap: 9px;
    font-size: var(--tekstSm);
    font-weight: 500;
    transition: background-color var(--duurSnel) var(--versnelling);
}

.vergelijkKeuzeKnop:hover,
.vergelijkKeuzeKnop:focus-visible {
    background-color: var(--kleurOranjeDonker);
    color: var(--kleurWit);
}

.vergelijkKeuzeKnopPijl {
    width: 16px;
    height: 9px;
    flex: none;
    transition: transform var(--duurSnel) var(--versnelling);
}

.vergelijkKeuzeKnop:hover .vergelijkKeuzeKnopPijl {
    transform: translateX(3px);
}

.vergelijkKeuzeLeeg .vergelijkKeuzeKnop {
    background-color: var(--kleurWit);
    border: 1px solid var(--kleurLijn);
    color: var(--kleurTekst);
}

.vergelijkKeuzeLeeg .vergelijkKeuzeKnop:hover,
.vergelijkKeuzeLeeg .vergelijkKeuzeKnop:focus-visible {
    background-color: var(--kleurVlak);
    color: var(--kleurTekst);
}

/* ==================================================================
 * 12. De specificaties
 * ================================================================== */

.vergelijkTabelHouder {
    overflow-x: auto;
    border: 1px solid var(--kleurLijn);
    border-radius: var(--randLg);
}

.vergelijkTabel {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--tekstSm);
}

.vergelijkTabel th,
.vergelijkTabel td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--kleurLijnZacht);
    text-align: left;
    vertical-align: top;
}

.vergelijkTabel tbody tr:last-child th,
.vergelijkTabel tbody tr:last-child td {
    border-bottom: 0;
}

.vergelijkTabelHoek,
.vergelijkTabelKop {
    background-color: var(--vergelijkVlak);
    color: var(--kleurTekst);
    font-size: var(--tekstXs);
    font-weight: 500;
    letter-spacing: 0.04em;
}

.vergelijkTabelNaam {
    width: 22%;
    color: var(--kleurTekstZacht);
    font-weight: 400;
}

.vergelijkTabelCel {
    color: var(--kleurTekst);
}

/*
 * Een rij waarin de producten van elkaar verschillen krijgt een lichtblauwe
 * ondergrond. Dat is waar iemand naar zoekt; de rest is bevestiging.
 */
.vergelijkTabelVerschilt .vergelijkTabelCel,
.vergelijkTabelVerschilt .vergelijkTabelNaam {
    background-color: #fbfdfe;
}

.vergelijkTabelVerschilt .vergelijkTabelNaam {
    color: var(--kleurTekst);
    font-weight: 500;
}

.vergelijkTabelBeste {
    font-weight: 500;
}

.vergelijkBesteVlag {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: var(--randRond);
    background-color: var(--kleurOranje);
    color: var(--kleurWit);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    vertical-align: 1px;
}

/* --- De knop die de gelijke rijen toont ----------------------------- */

.vergelijkGelijkRegel {
    margin-top: 14px;
    text-align: center;
}

.vergelijkGelijkSchakelaar {
    padding: 9px 18px;
    border: 1px solid var(--kleurLijn);
    border-radius: var(--randRond);
    background-color: var(--kleurWit);
    color: var(--kleurBlauwDonker);
    cursor: pointer;
    font-family: var(--fontBasis);
    font-size: var(--tekstSm);
    font-weight: 500;
    transition: background-color var(--duurSnel) var(--versnelling);
}

.vergelijkGelijkSchakelaar:hover,
.vergelijkGelijkSchakelaar:focus-visible {
    background-color: var(--kleurVlak);
}

/* --- De smalle uitvoering: geen tabel maar een lijst ----------------- */

.vergelijkSpecsLijst {
    margin: 0;
    padding: 0;
    border: 1px solid var(--kleurLijn);
    border-radius: var(--randLg);
    list-style: none;
    overflow: hidden;
}

.vergelijkSpecGroep {
    padding: 14px 16px;
    border-bottom: 1px solid var(--kleurLijnZacht);
}

.vergelijkSpecGroep:last-child {
    border-bottom: 0;
}

.vergelijkSpecVerschilt {
    background-color: #fbfdfe;
}

.vergelijkSpecNaam {
    margin-bottom: 8px;
    color: var(--kleurTekstZacht);
    font-size: var(--tekstXs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.vergelijkSpecVerschilt .vergelijkSpecNaam {
    color: var(--kleurTekst);
    font-weight: 500;
}

.vergelijkSpecWaarden {
    display: grid;
    margin: 0;
    gap: 4px 12px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}

.vergelijkSpecKolom {
    overflow: hidden;
    color: var(--kleurTekstZacht);
    font-size: var(--tekstSm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vergelijkSpecWaarde {
    margin: 0;
    color: var(--kleurTekst);
    font-size: var(--tekstSm);
}

.vergelijkSpecBeste {
    font-weight: 500;
}

/* ==================================================================
 * 13. De voorstellen en de zoekresultaten
 * ================================================================== */

.vergelijkVoorstellen,
.vergelijkTrefferLijst {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    list-style: none;
}

.vergelijkTreffers {
    margin-top: 22px;
}

.vergelijkTreffersTitel {
    margin-bottom: 14px;
    font-size: var(--tekstMd);
    font-weight: 500;
}

.vergelijkGeenTreffers,
.vergelijkVoorstellenLeeg {
    padding: 14px 16px;
    border-radius: var(--randMd);
    background-color: var(--vergelijkVlak);
    color: var(--kleurTekstZacht);
    font-size: var(--tekstSm);
}

.vergelijkVoorstel,
.vergelijkTreffer {
    position: relative;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--kleurLijn);
    border-radius: var(--randLg);
    background-color: var(--kleurWit);
    transition: border-color var(--duurSnel) var(--versnelling),
        box-shadow var(--duurSnel) var(--versnelling);
}

.vergelijkVoorstel:hover,
.vergelijkTreffer:hover,
.vergelijkVoorstel:focus-within,
.vergelijkTreffer:focus-within {
    border-color: #bcd7e8;
    box-shadow: var(--schaduwMd);
}

.vergelijkKaartVoorstel .vergelijkKaartTitel {
    font-size: var(--tekstSm);
    line-height: 1.4;
}

.vergelijkKaartActie {
    display: flex;
    align-items: center;
    margin-top: 10px;
    color: var(--kleurBlauw);
    column-gap: 7px;
    font-size: var(--tekstXs);
    font-weight: 500;
}

.vergelijkKaartActieIcoon {
    width: 13px;
    height: 13px;
    flex: none;
}

.vergelijkInhoud {
    max-width: 74ch;
    margin-top: 50px;
}

/* ==================================================================
 * 14. Smallere schermen
 *
 * Drie kolommen naast elkaar houden het tot 1024 pixels vol; daaronder wordt
 * een kolom smaller dan de langste puntregel. Vanaf dat punt komen ze onder
 * elkaar te staan, en dan doet de kop boven elke kolom het werk dat de
 * sleuvenrij op een breed scherm doet.
 *
 * De sleuvenrij zelf blijft wél naast elkaar staan: dat is de index van de
 * pagina, en die hoort in één oogopslag te tonen wat er vergeleken wordt.
 * ================================================================== */

@media (width <= 1024px) {
    .vergelijk {
        --vergelijkTussen: 16px;
    }

    .vergelijkKolommen {
        grid-template-columns: minmax(0, 1fr);
    }

    .vergelijkBlokConclusie {
        padding: 22px 20px 26px;
    }

    .vergelijkKaartBeeld {
        width: 56px;
        height: 56px;
    }
}

@media (width <= 767px) {
    .vergelijkKopInner {
        padding-block: 30px 22px;
    }

    .vergelijk {
        --vergelijkTussen: 10px;
        padding-bottom: 60px;
    }

    /*
     * Op een telefoon staan de sleuven onder elkaar en niet naast elkaar: drie
     * kaartjes van honderd pixels breed zijn geen index meer.
     *
     * En dan blijft de rij ook niet meer plakken. Drie kaartjes boven elkaar zijn
     * op een telefoonscherm de halve pagina, en een index die de helft van het
     * beeld inneemt is geen index maar een obstakel. De kop boven elke kolom —
     * de letter met de modelnaam, in elk blok opnieuw — doet hier het werk dat de
     * plakkende rij op een breed scherm doet.
     */
    .vergelijkSleufRij {
        position: static;
        margin-inline: 0;
        padding: 0;
        grid-template-columns: minmax(0, 1fr);
        box-shadow: none;
    }

    .vergelijkSleufRij::before {
        content: none;
    }

    .vergelijkKaartVoet {
        margin-top: 4px;
    }

    .vergelijkZoek {
        padding: 10px 12px;
    }

    .vergelijkZoekKnop {
        padding-inline: 13px;
    }

    .vergelijkBlokTitel {
        font-size: var(--tekstLg);
    }

    .vergelijkKolom {
        padding: 14px 16px;
    }
}

/*
 * Op papier heeft een vergelijking geen kiezer, geen sticky rij en geen knoppen
 * nodig — daar staat het resultaat, en dat is precies waarvoor iemand hem
 * afdrukt.
 */
@media print {
    .vergelijkSleufRij {
        position: static;
    }

    .vergelijkZoek,
    .vergelijkSleufWeg,
    .vergelijkGelijkRegel,
    .vergelijkKeuzeKnop {
        display: none;
    }

    .vergelijkKolommen {
        grid-template-columns: repeat(var(--vergelijkKolommen), minmax(0, 1fr));
    }
}