/*
 * single-product.css — de productpagina.
 *
 * De maten hieronder komen uit sam-it-services.nl. Waar een opvallend getal
 * staat (668, 471, 36.7px, 22.8px, 13.5px, 33.71px, 14.502px) is dat een waarde
 * uit het origineel en geen keuze van dit thema. De kleuren komen uit de tokens
 * in main.css; ze zijn daar één op één van die site overgenomen.
 *
 * De opbouw volgt de pagina van boven naar onder:
 *
 *   1. de sectie en de twee kolommen
 *   2. het kruimelpad en de meldingen
 *   3. de galerij en de lichtbak (linkerkolom)
 *   4. de ankers, de plus- en minpunten en de specificaties (linkerkolom)
 *   5. de titel, de kenmerken, de voorraad en het leveringsblok (rechterkolom)
 *   6. de uitvoeringen
 *   7. de prijs, de betaallogo's en de USP-regels
 *   8. de beoordelingen
 *   9. de andere producten
 *  10. de balk met de koopknop
 *  11. de smallere schermen
 *
 * Wat er níet in staat: de opmaak van WooCommerce. Die vier stylesheets zijn op
 * deze template weggehaald (zie samitAssets::wooEigenOpmaak()), dus staat hier
 * alles wat de pagina nodig heeft — inclusief de meldingen die WooCommerce zelf
 * in de pagina zet.
 */

/*
 * Het inhoudsgebied heeft standaard 40 pixels lucht boven zich. Op de bestaande
 * site begint het kruimelpad 25 pixels onder de categoriebalk, en die 25 zitten
 * hieronder in .productHoofd — dus moet de standaardmarge eraf.
 */
.siteInhoud {
    padding-top: 0;
}

/* ==================================================================
 * 1. De sectie en de twee kolommen
 *
 * Geen grid maar een flexrij met `space-between`, precies als daar: het
 * kruimelpad is 100% breed en valt daardoor op zijn eigen regel, en de twee
 * kolommen eronder houden samen 96,5% van de breedte over. De ruimte die
 * overblijft (41px) komt uit `space-between` en niet uit een `gap`, zodat de
 * linkerrand van de rechterkolom op dezelfde plek ligt als op die site.
 * ================================================================== */

.productHoofd {
    margin-block: 25px 100px;
}

.productHoofdRaster {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 20px;
}

.productHoofdRaster > * {
    width: 100%;
}

/* 668 / 1180 en 471 / 1180 — de kolombreedtes van de bestaande site. */
.productLinks {
    max-width: 56.6102%;
}

.productRechts {
    max-width: 39.9153%;
}

/*
 * De rechterkolom is zelf ook een flexrij: de kenmerken staan naast elkaar en
 * de rest onder elkaar. Op de bestaande site is dat hoe Elementor een kolom
 * opbouwt, met een tussenruimte van 10 pixels tussen de regels. Die 10 pixels
 * komen bij de eigen ondermarge van elk blok, dus staan de marges hieronder
 * telkens 10 lager dan de afstand die je uiteindelijk in beeld ziet.
 */
.productRechts {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 10px;
}

.productRechts > * {
    width: 100%;
    margin-block: 0;
}

/* ==================================================================
 * 2. Het kruimelpad en de meldingen
 * ================================================================== */

/*
 * De 22 pixels hoogte zijn uitgemeten aan de bestaande site: daar is deze regel
 * een tekstwidget met een negatieve ondermarge van -20px eromheen, en het zichtbare
 * resultaat is dat de galerij eronder op 233 pixels begint. Zonder deze hoogte
 * zou de regel 14 pixels zijn — de hoogte van het huisje — en zou alles acht
 * pixels te hoog staan.
 */
.productKruimels {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 22px;
    column-gap: 5px;
    font-size: var(--tekstBasis);
    line-height: 13.8px;
    color: var(--kleurTekst);
}

.productKruimelHuis {
    display: inline-flex;
    align-items: center;
    color: var(--kleurTekstZacht);
    text-decoration: none;
}

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

.productKruimelIcoon {
    width: 14.3px;
    height: 14.3px;
}

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

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

a.productKruimel:hover,
a.productKruimel:focus-visible {
    color: var(--kleurBlauw);
    text-decoration: underline;
}

/*
 * De meldingen van WooCommerce. De klassenamen hieronder zijn niet in camelCase
 * (baserules regel 2) omdat WooCommerce ze zelf genereert: ze omschrijven kan
 * alleen door de uitvoering van die plugin achteraf te bewerken, en dat is een
 * duurdere ingreep dan deze uitzondering waard is. Dezelfde afspraak als bij
 * `page-numbers` in onderdelen/paginering.css.
 */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 14px 20px;
    border-left: 4px solid var(--kleurGroen);
    border-radius: var(--randMd);
    background-color: var(--kleurVlak);
    font-size: var(--tekstBasis);
    line-height: 22px;
    color: var(--kleurTekst);
}

.woocommerce-error {
    border-left-color: var(--kleurOranje);
}

.woocommerce-info {
    border-left-color: var(--kleurBlauw);
}

.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
    order: 2;
    margin-left: auto;
    padding: 9px 18px;
    border-radius: var(--randMd);
    background-color: var(--kleurBlauw);
    font-size: var(--tekstSm);
    font-weight: 500;
    line-height: 1;
    color: var(--kleurWit);
    text-decoration: none;
}

.woocommerce-message .button:hover,
.woocommerce-message .button:focus-visible,
.woocommerce-error .button:hover,
.woocommerce-error .button:focus-visible,
.woocommerce-info .button:hover,
.woocommerce-info .button:focus-visible {
    background-color: var(--kleurBlauwDonker);
    color: var(--kleurWit);
}

/*
 * WooCommerce zet in de prijs van een variabel product een eigen
 * `<span class="screen-reader-text">Price range: … through …</span>`. Dit thema
 * noemt die klasse `.screenReaderText`, dus staat die tekst zonder deze regel
 * zichtbaar achter de prijs. Dezelfde uitzondering op baserules regel 2 als bij
 * de meldingen hierboven: de klasse komt uit die plugin.
 */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ==================================================================
 * 3. De galerij
 *
 * Eén kader met een pixel rand en 50 pixels lucht, en daaronder een strook van
 * vijf kolommen breed — met vier foto's blijft de vijfde kolom dus leeg, net als
 * daar.
 *
 * De `min-height` op het kader is er tegen het verspringen: wisselt de bezoeker
 * naar een foto met een andere verhouding, dan zakt de rest van de pagina niet
 * mee omhoog.
 * ================================================================== */

.productGalerij {
    margin-bottom: 40px;
}

.productFotoKader {
    position: relative;
    min-height: 300px;
    border: 1px solid var(--kleurLijn);
    border-radius: var(--randMd);
    text-align: center;
}

.productFotoLink {
    display: block;
}

.productFoto {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
    padding: 50px;
}

/*
 * Het keurmerk rechtsonder op de foto. Op de bestaande site is dit één
 * SVG-bestand van 227 kB met de foto van Sam als base64-PNG en "Getest en
 * gekeurd" als letterpaden erin; hier zijn het drie losse dingen die met
 * `position` op hun plek staan. De percentages hieronder komen uit de geometrie
 * van dat bestand, zodat de sticker er hetzelfde uitziet.
 *
 * De maat en de plaats zijn uitgemeten uit een schermafdruk van die site en niet
 * uit de CSS daar overgenomen: daar staat `width: 71px; right: 30px` op een
 * pseudo-element dat zich nergens aan houdt, omdat het element waar het aan
 * hangt geen `position` heeft. In beeld is de sticker 94 bij 86 pixels en staat
 * hij tegen de rechterrand van het kader.
 */
.productKeurmerk {
    position: absolute;
    right: 0;
    bottom: 14px;
    width: 94px;
    height: 86px;
    margin: 0;
    pointer-events: none;
}

.productKeurmerkSchild {
    position: absolute;
    left: 28%;
    top: 6%;
    width: 44%;
    height: 58%;
    filter: drop-shadow(0 2px 3px rgb(54 54 54 / 13%));
}

.productKeurmerkFoto {
    position: absolute;
    left: 11%;
    top: 33%;
    width: 38%;
    height: auto;
    filter: drop-shadow(-3px 3px 4px rgb(29 79 118 / 16%));
}

.productKeurmerkTekst {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 12%;
    padding: 3px 0;
    border-radius: var(--randRond);
    background-color: var(--kleurWit);
    box-shadow: 0 2px 3px rgb(54 54 54 / 13%);
    font-size: 8px;
    line-height: 11px;
    font-weight: 400;
    color: var(--kleurTekst);
    text-align: center;
    white-space: nowrap;
}

.productMiniaturen {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 11px;
    margin-top: 10px;
}

.productMiniatuur {
    display: block;
    overflow: hidden;
    border: 1px solid var(--kleurLijn);
    border-radius: var(--randMd);
    transition: border-color var(--duurSnel) var(--versnelling);
}

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

.productMiniatuurActief {
    border-color: var(--kleurBlauw);
}

.productMiniatuurFoto {
    width: 100%;
    height: 133px;
    object-fit: contain;
}

/* ------------------------------------------------------------------
 * De knop op de foto
 *
 * Staat in de HTML in een <template> en wordt door single-product.js in het
 * kader gezet: zonder script is er niets om te openen. Hij is er niet alleen
 * als hint maar ook als doel — een klik op de foto zelf werkt net zo goed, maar
 * een foto die aanklikbaar is zonder dat je dat kunt zien is geen knop.
 * ------------------------------------------------------------------ */

.productVergroot {
    position: absolute;
    z-index: 1;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px 7px 11px;
    border: 1px solid var(--kleurLijn);
    border-radius: var(--randRond);
    background-color: rgb(255 255 255 / 92%);
    box-shadow: var(--schaduwZacht);
    font-size: var(--tekstXs);
    font-weight: 500;
    line-height: 1;
    color: var(--kleurBlauwDonker);
    transition:
        background-color var(--duurSnel) var(--versnelling),
        border-color var(--duurSnel) var(--versnelling),
        box-shadow var(--duurSnel) var(--versnelling),
        color var(--duurSnel) var(--versnelling),
        transform var(--duurSnel) var(--versnelling);
}

.productVergroot:hover,
.productVergroot:focus-visible {
    border-color: var(--kleurBlauw);
    background-color: var(--kleurBlauw);
    box-shadow: var(--schaduwMd);
    color: var(--kleurWit);
    transform: translateY(-1px);
}

.productVergrootIcoon {
    width: 15px;
    height: 15px;
}

/*
 * De vingerwijzing hangt aan `jsAan` (gezet door samitAssets::jsVlag(), vóór de
 * stylesheets): zonder script is een klik op de foto een link naar het bestand
 * en dan is `zoom-in` een belofte die niet uitkomt.
 */
.jsAan .productFotoLink {
    cursor: zoom-in;
}

@media print {
    .productVergroot {
        display: none;
    }
}

/* ------------------------------------------------------------------
 * De lichtbak
 *
 * Een <dialog> die de hele hoogte vult, in drie rijen: de balk met de teller en
 * de knoppen, het toneel met de foto, en de strook miniaturen. De rij in het
 * midden staat op `minmax(0, 1fr)` en niet op `1fr` — anders mag hij van het
 * raster groter worden dan zijn deel en duwt een hoge foto de strook uit beeld.
 *
 * De sluier erachter is licht en niet donker. Dat is de ontwerptaal van deze
 * site (geen donkere vlakken), en het werkt hier ook praktisch: de foto's staan
 * op wit, en op een zwart vlak zou de witte rand van elke productfoto als een
 * kader om het apparaat gaan staan.
 * ------------------------------------------------------------------ */

/*
 * display staat op [open]: een <dialog> zonder dat attribuut is `display: none`
 * in de browserstijl, en een eigen display-waarde zet die regel buitenspel.
 */
.productLichtbak[open] {
    display: grid;
}

.productLichtbak {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    grid-template-rows: auto minmax(0, 1fr) auto;
    row-gap: 14px;
    margin: 0;
    padding: 18px 20px 20px;
    overflow: hidden;

    /*
     * Zonder deze regel scrolt de pagina achter de lichtbak mee zodra het wieltje
     * boven de sluier draait. Een `overflow: hidden` maakt dit element een
     * scrollgebied zonder overloop, en `contain` houdt de scroll daar.
     */
    overscroll-behavior: contain;
    background-color: transparent;
    color: var(--kleurTekst);
}

/*
 * Letterlijke waarden in ::backdrop, geen tokens: dat pseudo-element erft in
 * oudere Chrome niets van het element waar het bij hoort, en dan zou
 * var(--kleurVlak) leeg zijn en de sluier doorzichtig. #dceaf4 is --kleurVlak
 * een tint dieper.
 */
.productLichtbak::backdrop {
    background-color: rgb(216 231 242 / 98%);
    animation: lichtbakSluierIn 300ms cubic-bezier(0.33, 1, 0.68, 1) both;
}

.productLichtbak.lichtbakSluiten::backdrop {
    animation: lichtbakSluierUit 280ms cubic-bezier(0.32, 0, 0.67, 0) both;
}

@keyframes lichtbakSluierIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes lichtbakSluierUit {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* De sluier animeert met CSS en gaat dus niet langs window.samit.animeer. */
@media (prefers-reduced-motion: reduce) {
    .productLichtbak::backdrop,
    .productLichtbak.lichtbakSluiten::backdrop {
        animation-duration: 1ms;
    }
}

/* --- De balk ------------------------------------------------------ */

.lichtbakBalk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.lichtbakTeller {
    margin: 0;
    padding: 6px 13px;
    border-radius: var(--randRond);
    background-color: rgb(255 255 255 / 86%);
    box-shadow: var(--schaduwZacht);
    font-size: var(--tekstSm);
    font-weight: 500;
    line-height: 1.2;

    /* Cijfers van gelijke breedte: dan verspringt de teller niet bij 9 -> 10. */
    font-variant-numeric: tabular-nums;
    color: var(--kleurTekst);
}

.lichtbakTellerVan {
    color: var(--kleurBlauwDonker);
}

/*
 * Bij één foto is er geen teller en zou de knoppenrij links komen te staan; die
 * marge houdt hem rechts zonder een leeg element ervoor.
 */
.lichtbakKnoppen {
    display: flex;
    margin-left: auto;
    gap: 8px;
}

.lichtbakKnop {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--kleurLijn);
    border-radius: var(--randRond);
    background-color: var(--kleurWit);
    box-shadow: var(--schaduwZacht);
    color: var(--kleurBlauwDonker);
    transition:
        background-color var(--duurSnel) var(--versnelling),
        border-color var(--duurSnel) var(--versnelling),
        box-shadow var(--duurSnel) var(--versnelling),
        color var(--duurSnel) var(--versnelling),
        transform var(--duurSnel) var(--versnelling);
}

/*
 * Alleen bij hover een gevulde knop. Een <dialog> zet bij het openen de focus
 * op de eerste knop die hij vindt, en met :focus-visible erbij zou de
 * zoomknop dus meteen blauw oplichten zonder dat iemand hem aanwees. De
 * focus is te zien aan de outline uit reset.css.
 */
.lichtbakKnop:hover:not([aria-disabled="true"]) {
    border-color: var(--kleurBlauw);
    background-color: var(--kleurBlauw);
    box-shadow: var(--schaduwMd);
    color: var(--kleurWit);
    transform: translateY(-1px);
}

.lichtbakKnop[aria-disabled="true"] {
    box-shadow: none;
    color: var(--kleurTekstZacht);
    cursor: default;
}

.lichtbakKnop svg {
    width: 18px;
    height: 18px;
}

/*
 * Het plusteken in de loep wordt een minteken zodra er ingezoomd is: alleen het
 * verticale streepje schaalt weg. `transform-box: fill-box` zet de oorsprong in
 * het midden van het streepje zelf, niet in de hoek van het hele vlak.
 */
.vergrootStreepOp {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform var(--duurMd) var(--versnelling);
}

.lichtbakZoomAan .lichtbakKnopIcoon .vergrootStreepOp {
    transform: scaleY(0);
}

/* --- Het toneel --------------------------------------------------- */

/*
 * De verhouding van de foto die er nu in staat. Het script zet hem per foto op
 * de doos; de regel hieronder is de waarde waarmee de doos begint en tegelijk
 * de terugval voor een browser die @property niet kent.
 *
 * Als @property er wél is, is dit een echt getal en niet een stukje tekst, en
 * dan mag er een overgang op: de doos morft van een vierkante foto naar een van
 * 4:3 in plaats van te verspringen.
 */
@property --lichtbakVerhouding {
    syntax: "<number>";
    inherits: false;
    initial-value: 1.3333;
}

.lichtbakToneel {
    position: relative;
    display: grid;

    /* Zonder deze nul mag het raster de rij groter maken dan zijn eigen deel. */
    min-height: 0;

    /*
     * Een maatcontainer, zodat de doos eronder in cqw en cqh kan rekenen. Dat is
     * de enige manier om in CSS "zo groot als past, met deze verhouding" te
     * zeggen: `aspect-ratio` naast een max-width én een max-height raakt
     * overbepaald en laat de verhouding vallen. Kent de browser deze eenheden
     * niet, dan vallen de twee regels hieronder weg en vult de doos het hele
     * toneel — dat werkt ook, het is alleen minder mooi.
     */
    container-type: size;
}

/*
 * De doos is de foto: even groot, met de rand, de ronding en de schaduw
 * eromheen. Geen padding, want de productfoto's hebben hun eigen lucht al
 * ingebakken (zie de witte marge rond het apparaat op elke foto uit de feed).
 *
 * Deze doos is ook wat er bij openen en sluiten van en naar de pagina beweegt,
 * en niet de <img> erin: dan verplaatst het kader met zijn schaduw als één
 * geheel. De <img> houdt zijn eigen transform over voor het inzoomen en het
 * slepen.
 */
.lichtbakDoos {
    --lichtbakVerhouding: 1.3333;

    position: relative;
    overflow: hidden;
    width: min(100cqw, calc(100cqh * var(--lichtbakVerhouding)));
    height: min(100cqh, calc(100cqw / var(--lichtbakVerhouding)));
    margin: auto;
    border: 1px solid var(--kleurLijn);
    border-radius: var(--randLg);
    background-color: var(--kleurWit);
    box-shadow: var(--schaduwLg);
    transition: --lichtbakVerhouding var(--duurMd) var(--versnelling);
}

/*
 * De lagen. Elke foto is een eigen <img> die over de vorige heen komt en er in
 * en uit geschoven wordt; ze staan absoluut, want twee foto's in de rij zouden
 * elkaar wegduwen.
 *
 * `touch-action: none` omdat op dit vlak met de vinger geschoven en gesleept
 * wordt; zonder die regel neemt de browser die beweging zelf.
 */
.lichtbakLagen {
    position: relative;
    width: 100%;
    height: 100%;

    /*
     * Op dit vlak wordt met de vinger geschoven en met de muis gesleept. Zonder
     * touch-action neemt de browser die beweging zelf, en zonder user-select
     * begint een sleep met de muis een tekstselectie over de halve pagina.
     */
    touch-action: none;
    user-select: none;
}

/*
 * De foto vult de doos, die immers zijn verhouding heeft. `object-fit: contain`
 * is er voor de laatste halve pixel afronding en voor het moment waarop de doos
 * nog naar de nieuwe verhouding onderweg is.
 *
 * Dat de maat hier uit de doos komt en niet uit het bestand heeft nog een
 * voordeel: scherper() mag er een bestand van 2400 pixels in zetten zonder dat
 * er iets verspringt.
 */
.lichtbakFoto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;

    /*
     * Het in- en uitzoomen is één eigenschap van A naar B, dus is dat een
     * transition en geen Motion (baserules regel 7). Er is nog een reden: als
     * Motion de transform van dit element eenmaal in handen heeft, zet hij bij
     * een volgende beweging op hetzelfde element de laatste waarde die hij kende
     * weer terug — en dan opent de lichtbak de tweede keer ingezoomd.
     */
    transition: transform var(--duurMd) var(--versnelling);
    cursor: zoom-in;
}

/* Tijdens het slepen volgt de foto de vinger en mag er niets tussen zitten. */
.lichtbakSlepen .lichtbakFoto {
    transition: none;
}

/*
 * De brug: de foto die de bezoeker al op de pagina zag, in de eindstand van de
 * openingsbeweging. Hij ligt bovenop tot de grote versie geladen is, zodat er
 * geen lege plek van de ene positie naar de andere schuift.
 */
.lichtbakBrug {
    z-index: 1;
}

.lichtbakGeenZoom .lichtbakFoto {
    cursor: default;
}

.lichtbakZoomAan .lichtbakFoto {
    cursor: grab;
}

.lichtbakSlepen .lichtbakFoto {
    cursor: grabbing;
}

/* --- De pijlen ---------------------------------------------------- */

.lichtbakPijl {
    position: absolute;
    z-index: 2;
    top: 50%;
    display: grid;
    width: 46px;
    height: 46px;
    margin-top: -23px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--kleurLijn);
    border-radius: var(--randRond);
    background-color: var(--kleurWit);
    box-shadow: var(--schaduwMd);
    color: var(--kleurBlauwDonker);
    transition:
        background-color var(--duurSnel) var(--versnelling),
        border-color var(--duurSnel) var(--versnelling),
        color var(--duurSnel) var(--versnelling),
        transform var(--duurSnel) var(--versnelling);
}

.lichtbakPijlVorige {
    left: 0;
}

.lichtbakPijlVolgende {
    right: 0;
}

.lichtbakPijl:hover {
    border-color: var(--kleurBlauw);
    background-color: var(--kleurBlauw);
    color: var(--kleurWit);
    transform: scale(1.07);
}

.lichtbakPijl:active {
    transform: scale(0.96);
}

/*
 * Eén chevron voor twee richtingen, net als bij een veelgestelde vraag: het
 * icoon wijst omlaag en wordt een kwartslag gedraaid. Dat scheelt een tweede
 * pad dat hetzelfde zegt.
 */
.lichtbakPijlIcoon {
    width: 13px;
    height: 8px;
}

.lichtbakPijlVorige .lichtbakPijlIcoon {
    transform: rotate(90deg);
}

.lichtbakPijlVolgende .lichtbakPijlIcoon {
    transform: rotate(-90deg);
}

/* --- De strook ---------------------------------------------------- */

/*
 * Gecentreerd met automarges op het eerste en het laatste item, niet met
 * `justify-content: center`: dat laatste maakt bij overloop het begin van de rij
 * onbereikbaar, omdat je niet vóór de scrollpositie nul kunt scrollen.
 *
 * De lucht boven en onder zit in de padding en wordt met een negatieve marge
 * teruggehaald: een rij met `overflow-x: auto` snijdt ook verticaal af, en dan
 * valt de schaduw van een miniatuur bij hover weg.
 */
.lichtbakStrook {
    display: flex;
    margin: -6px -4px;
    gap: 10px;
    padding: 6px 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    list-style: none;
    scrollbar-width: thin;
}

.lichtbakStrookItem {
    flex: 0 0 auto;
}

.lichtbakStrookItem:first-child {
    margin-inline-start: auto;
}

.lichtbakStrookItem:last-child {
    margin-inline-end: auto;
}

.lichtbakMini {
    display: block;
    overflow: hidden;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 1px solid var(--kleurLijn);
    border-radius: var(--randMd);
    background-color: var(--kleurWit);
    transition:
        border-color var(--duurSnel) var(--versnelling),
        box-shadow var(--duurSnel) var(--versnelling),
        transform var(--duurSnel) var(--versnelling);
}

.lichtbakMini:hover,
.lichtbakMini:focus-visible {
    border-color: var(--kleurBlauw);
    box-shadow: var(--schaduwMd);
    transform: translateY(-2px);
}

.lichtbakMiniActief {
    border-color: var(--kleurBlauw);
    box-shadow: 0 0 0 1px var(--kleurBlauw);
}

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

/* ==================================================================
 * 4. De ankers, de plus- en minpunten en de specificaties
 *
 * De twee ankers zien er op de bestaande site uit als tabbladen, maar het zijn
 * gewone links naar een anker verderop. De tussenruimte van 70 pixels is daar
 * twee keer 35: een marge van 35 om elk item en een negatieve marge van -35 om
 * de lijst. Hier is het één `column-gap`, met hetzelfde resultaat.
 * ================================================================== */

.productAnkers {
    display: flex;
    flex-wrap: wrap;
    column-gap: 70px;
    row-gap: 10px;
    margin-bottom: 36.7px;
    padding-block: 20px;
    border-bottom: 1px solid var(--kleurLijnPaneel);
}

.productAnker {
    font-size: 16px;
    line-height: 19px;
    font-weight: 600;
    color: var(--kleurTekst);
    text-decoration: none;
}

.productAnker:hover,
.productAnker:focus-visible {
    color: var(--kleurBlauw);
    text-decoration: underline;
}

.productBlokTitel {
    margin-bottom: 20px;
    font-size: var(--tekstLg);
    line-height: 24px;
    font-weight: 500;
    color: var(--kleurTekst);
}

/*
 * De beschrijving van het product, boven de plus- en minpunten. De typografie
 * komt uit onderdelen/inhoud.css — dit blok zet alleen de afstanden en maakt
 * de koppen iets kleiner dan in een blogartikel: hier staan er vier of vijf op
 * een halve kolombreedte in plaats van drie op de volle breedte.
 */
.productBeschrijving {
    margin-bottom: 55px;
}

.productBeschrijving > :first-child {
    margin-top: 0;
}

.productBeschrijving > :last-child {
    margin-bottom: 0;
}

.productBeschrijving h2 {
    margin-top: 32px;
    margin-bottom: 12px;
    font-size: var(--tekstLg);
    line-height: 24px;
    font-weight: 500;
}

.productBeschrijving h3 {
    margin-top: 22px;
    margin-bottom: 8px;
    font-size: var(--tekstMd);
    line-height: 22px;
    font-weight: 500;
}

/*
 * De knop naar de vergelijker, tussen de plus- en minpunten en de specificaties.
 *
 * Blok 6 van het tekstsjabloon: een link die eruitziet als een knop, met één zin
 * erboven die zegt wat hij oplevert. Een lichtblauw vlak en geen kale link —
 * hier staat de bezoeker die de punten gelezen heeft en nog twijfelt, en dat is
 * het moment waarop een tweede model naast dit toestel de vraag beantwoordt.
 */
.productVergelijk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 55px;
    padding: 18px 22px;
    border: 1px solid #dfeaf2;
    border-radius: var(--randLg);
    background-color: #f4f9fc;
    gap: 14px 20px;
}

.productVergelijkZin {
    max-width: 46ch;
    color: var(--kleurTekst);
    font-size: var(--tekstSm);
    line-height: 1.6;
}

.productVergelijkKnop {
    display: inline-flex;
    text-decoration: none;
    align-items: center;
    padding: 11px 18px;
    border-radius: var(--randMd);
    background-color: var(--kleurWit);
    box-shadow: var(--schaduwZacht);
    color: var(--kleurBlauwDonker);
    column-gap: 10px;
    font-size: var(--tekstSm);
    font-weight: 500;
    transition: background-color var(--duurSnel) var(--versnelling),
        color var(--duurSnel) var(--versnelling);
}

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

.productVergelijkIcoon {
    width: 15px;
    height: 15px;
    flex: none;
    color: var(--kleurOranje);
}

.productVergelijkKnop:hover .productVergelijkIcoon,
.productVergelijkKnop:focus-visible .productVergelijkIcoon {
    color: var(--kleurWit);
}

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

.productVergelijkKnop:hover .productVergelijkPijl {
    transform: translateX(3px);
}

.productPunten {
    margin-bottom: 55px;
}

.productPuntenLijst {
    display: grid;
    row-gap: 15px;
}

.productPuntenLijst + .productPuntenLijst {
    margin-top: 15px;
}

.productPunt {
    display: flex;
    align-items: center;
    column-gap: 24px;
    font-size: var(--tekstBasis);
    line-height: 20px;
    color: var(--kleurTekst);
}

.productPuntIcoon {
    flex: none;
    width: 20px;
    height: 20px;
}

.productSpecTabel {
    width: 100%;
    border-collapse: collapse;
}

.productSpecTabel th,
.productSpecTabel td {
    padding: 8px 8px 8px 20px;
    font-size: var(--tekstBasis);
    line-height: 22.5px;
    font-weight: 400;
    font-style: normal;
    text-align: left;
    vertical-align: top;
    color: var(--kleurTekst);
}

/*
 * Een vaste kolombreedte en geen `auto`: dan staat de waarde op elke rij op
 * dezelfde plek, ook als het langste label net niet past. 150 pixels is de maat
 * van de bestaande site.
 */
.productSpecTabel th {
    width: 150px;
}

.productSpecTabel tr:nth-child(odd) {
    background-color: rgb(15 24 74 / 7%);
}

.productSpecTabel tr:nth-child(even) {
    background-color: rgb(0 0 0 / 2.5%);
}

.productSpecTabel a {
    color: var(--kleurBlauw);
}

.productSpecTabel a:hover,
.productSpecTabel a:focus-visible {
    text-decoration: underline;
}

/* ==================================================================
 * 5. De titel, de kenmerken, de voorraad en het leveringsblok
 * ================================================================== */

/*
 * De negatieve bovenmarge komt uit de bestaande site: de titel begint daar zeven
 * pixels boven de bovenrand van de galerij ernaast, zodat de eerste regel tekst
 * optisch op één lijn staat met de bovenrand van het fotokader.
 */
.productTitel {
    margin-top: -7px;
    margin-bottom: 2px;
    font-size: 35px;
    line-height: 42px;
    font-weight: 500;
    color: var(--kleurTekst);
}

.productKenmerken {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.productKenmerk {
    padding: 7px 11px;
    border-radius: var(--randSm);
    background-color: var(--kleurVlakKoel);
    font-size: 12px;
    line-height: 12px;
    font-weight: 400;
    color: var(--kleurTekst);
}

.productVoorraad {
    margin-bottom: 6px;
    line-height: 26px;
    font-size: var(--tekstBasis);
}

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

.geenVoorraad {
    color: var(--kleurTekstZacht);
}

/*
 * Het bolletje is een teken en geen SVG, net als daar: een punt van 27 pixels op
 * `line-height: 0`, zodat hij de regel niet uitrekt maar wel groot in beeld
 * staat.
 */
.productVoorraadBolletje {
    position: relative;
    top: 4px;
    margin-right: 4px;
    font-size: 27px;
    line-height: 0;
}

.productLevering {
    position: relative;
    display: flex;
    align-items: flex-start;
    column-gap: 15px;
    margin-bottom: 15px;
    padding: 20px 24px;
    border-radius: var(--randMd);
    background-color: #eff6fa;
}

.productLeveringIcoon {
    flex: none;
    width: 14.5px;
    height: 14.5px;
    margin-top: 1px;
    color: var(--kleurTekst);
}

.productLeveringTekst {
    flex: 1;
    min-width: 0;
}

.productLeveringTitel {
    font-size: var(--tekstBasis);
    line-height: 15px;
    font-weight: 500;
    color: var(--kleurTekst);
}

/*
 * De 13,5 pixels linkermarge zetten de opsommingstekens op de plek waar ze op de
 * bestaande site staan. `list-style: disc` moet er expliciet bij: reset.css
 * haalt de tekens overal weg, en hier zijn ze onderdeel van het ontwerp.
 */
.productLeveringRegels {
    margin: 5px 0 0 13.5px;
    list-style: disc;
}

.productLeveringRegels li {
    font-size: var(--tekstBasis);
    line-height: 22.5px;
    color: var(--kleurTekst);
}

/* Ruimte houden voor de foto rechtsboven. */
.productLeveringRegels li:first-child {
    max-width: 78%;
}

.productLeveringNadruk {
    font-weight: 600;
    color: var(--kleurBlauw);
}

.productLeveringRegels a {
    color: var(--kleurTekst);
    text-decoration: underline;
}

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

.productLeveringFoto {
    position: absolute;
    right: 0;
    top: 0;
    width: 111px;
    height: auto;
}

/* ==================================================================
 * 6. De uitvoeringen
 *
 * Deze sectie bestaat op de bestaande site niet: daar staat geen enkel variabel
 * product. Het ontwerp leunt daarom op wat er al is — dezelfde labeltjes als
 * naast de titel, dezelfde 5 pixels afronding, hetzelfde blauw voor "gekozen" en
 * hetzelfde oranje voor de focusring.
 *
 * De keuzerondjes zelf staan buiten beeld maar wél in de pagina: dat houdt de
 * bediening met het toetsenbord en met een schermlezer heel. Een <div> met
 * `role="radio"` zou dat allemaal in JavaScript moeten naspelen.
 * ================================================================== */

.productVarianten {
    margin-bottom: 15px;
}

.productVariantTitel {
    margin-bottom: 12px;
    font-size: var(--tekstBasis);
    line-height: 15px;
    font-weight: 500;
    color: var(--kleurTekst);
}

.variantGroep {
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}

.variantGroep:last-of-type {
    margin-bottom: 0;
}

.variantLabel {
    padding: 0;
    margin-bottom: 8px;
    font-size: var(--tekstXs);
    line-height: 13px;
    color: var(--kleurTekstZacht);
}

.variantKeuzes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.variantKeuze {
    display: inline-flex;
    cursor: pointer;
}

.variantRadio {
    position: absolute;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

.variantChip {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: var(--randSm);
    background-color: var(--kleurVlakKoel);
    font-size: var(--tekstSm);
    line-height: 16px;
    color: var(--kleurTekst);
    transition:
        border-color var(--duurSnel) var(--versnelling),
        background-color var(--duurSnel) var(--versnelling),
        color var(--duurSnel) var(--versnelling);
}

.variantKeuze:hover .variantChip {
    border-color: var(--kleurBlauw);
}

.variantRadio:checked + .variantChip {
    border-color: var(--kleurBlauw);
    background-color: var(--kleurWit);
    font-weight: 500;
    color: var(--kleurBlauw);
}

.variantRadio:focus-visible + .variantChip {
    outline: 2px solid var(--kleurOranje);
    outline-offset: 2px;
}

/*
 * Een combinatie die niet leverbaar is blijft staan en wordt doorgestreept. Hem
 * weghalen zou betekenen dat de rij chips van plek verschiet bij elke klik, en
 * dan weet niemand meer waar hij was.
 */
.variantRadio:disabled + .variantChip {
    opacity: 0.45;
    text-decoration: line-through;
}

.variantKeuze:has(.variantRadio:disabled) {
    cursor: not-allowed;
}

.variantKeuze:has(.variantRadio:disabled):hover .variantChip {
    border-color: transparent;
}

.variantMelding {
    margin: 0;
    font-size: var(--tekstXs);
    line-height: 18px;
    color: var(--kleurOranjeDonker);
}

.variantMelding:empty {
    display: none;
}

.variantWissen {
    justify-self: start;
    width: auto;
    font-size: var(--tekstXs);
    line-height: 13px;
    color: var(--kleurTekstZacht);
    text-decoration: underline;
}

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

/* Zonder keuze is er niets te wissen; single-product.js zet dit aan en uit. */
.variantWissenUit {
    display: none;
}

/* ==================================================================
 * 7. De prijs, de betaallogo's en de USP-regels
 * ================================================================== */

.productPrijs {
    margin-block: 8px 36px;
    font-size: 30px;
    line-height: 28px;
    font-weight: 500;
    color: var(--kleurTekst);
}

.productPrijs del {
    margin-right: 8px;
    font-size: var(--tekstLg);
    color: var(--kleurTekstZacht);
}

.productPrijs ins {
    text-decoration: none;
}

.productBetalen {
    margin-bottom: 20px;
}

.productBetaalLogos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}

.productBetaalTekst {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 8.8px;
    font-size: 11px;
    line-height: 16px;
    color: var(--kleurTekst);
    opacity: 0.5;
}

.productBetaalSlot {
    width: 9px;
    height: 12px;
}

.productUsps {
    display: grid;
    row-gap: 20px;
    margin-bottom: 40px;
}

.productUsp {
    display: flex;
    align-items: center;
    column-gap: 4px;
    font-size: var(--tekstBasis);
    line-height: 15px;
    color: var(--kleurTekst);
}

.productUspIcoon {
    flex: none;
    width: 11px;
    height: 8.2px;
}

/* ==================================================================
 * 8. De beoordelingen
 * ================================================================== */

.productBeoordelingen {
    display: grid;
    row-gap: 20px;
}

/* 33 pixels onder de kop, waarvan 20 uit de `row-gap` hierboven komt. */
.productBeoordelingenTitel {
    margin-bottom: 13px;
}

.productBeoordeling {
    padding: 22.8px 23px 29px 32px;
    border-radius: var(--randMd);
    background-color: rgb(15 24 74 / 7%);
}

.productSterren {
    display: flex;
    column-gap: 2.7px;
    margin-bottom: 20.5px;
    color: var(--kleurBlauw);
}

.productSter {
    width: 12.35px;
    height: 11.8px;
}

.productSterLeeg {
    color: rgb(15 24 74 / 20%);
}

.productBeoordelingTitel {
    margin-bottom: 16px;
    font-size: var(--tekstBasis);
    line-height: 15px;
    font-weight: 500;
    color: var(--kleurTekst);
}

.productBeoordelingTekst {
    margin-bottom: 4px;
    font-size: var(--tekstXs);
    line-height: 25px;
    color: var(--kleurTekst);
}

.productBeoordelingTekst p {
    margin-bottom: 25px;
}

.productBeoordelingTekst p:last-child {
    margin-bottom: 0;
}

.productBeoordelingNaam {
    font-size: var(--tekstBasis);
    line-height: 15px;
    font-weight: 500;
    color: var(--kleurTekst);
}

/* ==================================================================
 * 9. De andere producten
 *
 * De kaarten staan boven uitgelijnd en worden niet tot dezelfde hoogte
 * uitgerekt. Dat is zo op de bestaande site, en het is de juiste keuze: een
 * titel van drie regels naast een van één zou anders een kaart met een gat erin
 * geven.
 * ================================================================== */

.productAnderen {
    margin-block: 100px;
}

.productAnderenTitel {
    margin-bottom: 26px;
}

.productKaarten {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
    gap: 15px;
}

.productKaart {
    padding: 22px 20px 15px;
    border: 1px solid rgb(86 122 159 / 15%);
    border-radius: var(--randMd);
}

.productKaartFotoLink {
    display: block;
    margin-bottom: 10px;
}

.productKaartFoto {
    width: 100%;
    height: 191px;
    object-fit: contain;
}

.productKaartTitel {
    margin-bottom: 14px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
}

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

.productKaartTitel a:hover,
.productKaartTitel a:focus-visible {
    text-decoration: underline;
}

.productKaartKenmerken {
    gap: 8px;
}

.productKaartVoorraad {
    margin-block: 3px 0;
    font-size: 12px;
    line-height: 12px;
}

.productKaartVoorraad .productVoorraadBolletje {
    top: 3px;
    font-size: 20px;
}

.productKaartPrijs {
    margin-top: 5px;
    font-size: 18px;
    line-height: 20px;
    font-weight: 500;
    color: var(--kleurBlauw);
}

/* ==================================================================
 * 10. De balk met de koopknop
 *
 * `position: sticky` en niet `position: fixed` met een scroll-listener zoals
 * daar. Twee dingen worden daarmee beter: er is geen script voor nodig, en de
 * balk schuift weg zodra de pagina op is in plaats van over de footer heen te
 * blijven liggen.
 * ================================================================== */

.productBalk {
    position: sticky;
    bottom: 0;
    z-index: 20;
    padding-block: 20px;
    background-color: var(--kleurWit);
    box-shadow: 0 0 10px rgb(0 0 0 / 22%);
}

.productBalkRij {
    display: flex;
    align-items: center;
    column-gap: 15px;
}

/*
 * De 220 pixels die de titel vrijhoudt zijn de breedte van de prijs plus de knop
 * plus de ruimte ertussen, zoals daar.
 */
.productBalkTitel {
    max-width: calc(100% - 220px);
    font-size: 16px;
    line-height: 14px;
    font-weight: 500;
    color: var(--kleurTekst);
}

.productBalkPrijs {
    margin-left: auto;
    font-size: var(--tekstLg);
    line-height: 18px;
    font-weight: 500;
    color: var(--kleurBlauw);
}

.productBalkPrijs bdi,
.productBalkPrijs .woocommerce-Price-amount {
    color: var(--kleurBlauw);
}

.productKoopForm {
    flex: none;
}

.productKoopKnop {
    display: inline-flex;
    align-items: center;
    column-gap: 14px;
    padding: 10px 25px 13px;
    border: 0;
    border-radius: var(--randSm);
    background-color: var(--kleurGroen);
    font-family: inherit;
    font-size: 16px;
    line-height: 14px;
    font-weight: 500;
    color: var(--kleurWit);
    cursor: pointer;
    transition: background-color 0.2s var(--versnelling);
}

.productKoopKnop:hover,
.productKoopKnop:focus-visible {
    background-color: var(--kleurOranje);
}

.productKoopIcoon {
    flex: none;
    width: 18.4px;
    height: 15.8px;
}

.productKoopKnop:disabled {
    background-color: var(--kleurLijn);
    color: var(--kleurTekstBalk);
    cursor: not-allowed;
}

/* ==================================================================
 * 11. De smallere schermen
 *
 * Alleen wat met plaatsing en maat te maken heeft. Wat er in de mobiele en de
 * smalle weergave niet hoort, staat niet in de HTML: dat kiest de server
 * (baserules regel 16, mu-plugin samit-apparaat). De breekpunten hieronder
 * moeten daarom gelijk blijven aan samitApparaat::BREEKPUNT (1024) en
 * ::BREEKPUNT_SMAL (767).
 * ================================================================== */

@media (width <= 1024px) {
    /*
     * Eén kolom, en die staat in het midden op 620 pixels in plaats van over de
     * volle breedte.
     *
     * Het beeldkader heeft een vaste hoogte met de foto gecentreerd erin, dus
     * wordt het bij elke pixel breedte niet groter maar leger: op 900 stond een
     * foto van 60 bij 250 in een kader van 860 bij 350. En de beschrijving liep
     * over ruim honderd tekens per regel, waar de desktop op 668 pixels op
     * vijfentachtig uitkomt.
     *
     * 620 ligt dicht bij de 668 van de linkerkolom op de desktop, dus staan de
     * galerij, de leveringskaart en de betaallogo's op de maat waarvoor ze
     * gemaakt zijn. De bronsite doet op deze breedte hetzelfde: daar staat de
     * hele productpagina in een kolom van 600 in het midden.
     */
    .productHoofdRaster > * {
        max-width: 620px;
        margin-inline: auto;
    }

    .productHoofdRaster {
        row-gap: 40px;
    }

    /* Dezelfde kolom als hierboven: 660 min de 20 padding aan weerskanten geeft
       620 inhoud, dus liggen de kop en de kaarten op één lijn met de galerij. */
    .productAnderen .omhulsel {
        max-width: 660px;
    }

    /*
     * In deze weergave staat de galerij ín de rechterkolom, en die kolom heeft
     * zelf al 10 pixels tussenruimte tussen de regels.
     */
    .productRechts .productGalerij {
        margin-bottom: 0;
    }

    .productKaarten {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media (width <= 767px) {
    .productTitel {
        font-size: 28px;
        line-height: 1.3;
    }

    .productKenmerk {
        padding: 5px 6px;
    }

    .productMiniaturen {
        grid-template-columns: repeat(3, 1fr);
    }

    /*
     * De lichtbak op een telefoon: minder lucht om de doos, en de pijlen
     * binnen het kader in plaats van eroverheen — daarbuiten is geen plek
     * meer.
     */
    .productVergroot {
        top: 10px;
        right: 10px;
        padding: 6px 11px 6px 9px;
    }

    .productLichtbak {
        row-gap: 10px;
        padding: 12px 12px 14px;
    }

    .lichtbakKnop {
        width: 38px;
        height: 38px;
    }

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

    .lichtbakPijl {
        width: 38px;
        height: 38px;
        margin-top: -19px;
    }

    .lichtbakPijlVorige {
        left: 4px;
    }

    .lichtbakPijlVolgende {
        right: 4px;
    }

    .lichtbakMini {
        width: 52px;
        height: 52px;
    }

    .productLeveringIcoon {
        width: 20px;
        height: 20px;
    }

    .productLeveringTitel {
        font-size: 17px;
    }

    .productLeveringRegels li {
        font-size: 16px;
        line-height: 30px;
    }

    /* Zonder foto ernaast mag de eerste regel de volle breedte hebben. */
    .productLeveringRegels li:first-child {
        max-width: none;
    }

    .productSpecTabel th {
        width: 40%;
    }

    .productKaarten {
        grid-template-columns: 1fr;
        max-width: 300px;
        margin-inline: auto;
    }

    .productAnderenTitel {
        text-align: center;
    }

    .productKaartFoto {
        height: 110px;
    }

    .productKaart {
        padding: 14px;
    }

    .productKaartTitel {
        margin-bottom: 10px;
        font-size: var(--tekstSm);
        line-height: 1.1;
    }

    .productKaartKenmerken .productKenmerk {
        font-size: 12px;
    }

    .productKaartVoorraad {
        font-size: 11px;
        line-height: 1.2;
    }

    .productKaartPrijs {
        font-size: var(--tekstBasis);
        line-height: 1;
    }

    .productBalkPrijs {
        font-size: var(--tekstBasis);
        line-height: 14px;
    }

    /*
     * De knop wordt korter en het wagentje gaat eraf, precies als daar: onder
     * 768 pixels staat dat icoon er niet.
     */
    .productKoopKnop {
        padding: 10px 16px 12px;
        font-size: 12px;
        line-height: 1;
    }

    .productKoopIcoon {
        display: none;
    }
}