/*
 * 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 (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;
}

/* ==================================================================
 * 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);
}

.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: de twee blokken staan onder elkaar en vullen de breedte. */
    .productLinks,
    .productRechts {
        max-width: 100%;
    }

    .productHoofdRaster {
        row-gap: 40px;
    }

    /*
     * 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);
    }

    .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;
    }
}