/* ---------------------------------------------------------------------------
 * shop.css — productoverzichten: de winkelpagina en de productcategorieën
 * (baserules 8)
 *
 * Woo's eigen stylesheets zijn eruit (inc/woo.php), dus alles wat een
 * productrooster nodig heeft staat hier. Woo's klassennamen komen uit de plugin
 * en zijn niet camelCase; die van ons wel (baserules 2). Waar een Woo-klasse
 * nodig is staat erbij waarom.
 *
 * DE ONTWERPTAAL VAN DE HOMEPAGE, DOORGETROKKEN
 * ---------------------------------------------
 * Een categorie is een lijst maten, dus hier geldt hetzelfde als op de
 * homepage: het is een technische tekening en geen etalage.
 *
 *   1. Haarlijnen in plaats van kaders. Een kaart hangt aan een lijn, hij zit
 *      niet in een doosje. Geen schaduw, geen afgeronde hoek, geen omlijning
 *      om een foto.
 *   2. Cijfers op tabelbreedte. Prijzen, maten en aantallen staan onder elkaar
 *      recht — dat is de helft van waarom een prijskolom leesbaar is.
 *   3. Maten met een echt maalteken (bg_maat() in PHP). 140 × 200, niet
 *      140x200.
 *   4. De band bovenaan heeft dezelfde papierkleur als de header, zodat de kop
 *      van de pagina en de header één oppervlak zijn — precies zoals de hero
 *      op de homepage.
 *   5. De rij categorieën eronder is een liniaal: één doorlopende lijn met een
 *      streepje per categorie. Dezelfde vorm als de maatbalk op de homepage,
 *      en motionInit.js tekent hem op dezelfde manier uit.
 *
 * WAT ER NIET IN STAAT
 * --------------------
 * Niets van de productpagina. Die stond ooit in het paars en knopgroen van
 * Woodmart, met eigen --prod*-tokens; dat is eruit — de productpagina werkt nu
 * met dezelfde tokens als dit overzicht (zie de kop van product.css). Wat er
 * hier niet staat is de opmaak van de kaart zoals de productpagina hem
 * onderaan gebruikt: die pagina laadt shop.css niet en tekent zijn eigen,
 * kleinere versie (baserules 8).
 * --------------------------------------------------------------------------- */

/* De haarlijn als één token, zodat 'een lijn' overal hetzelfde is. Op de vier
   blokken van de pagina en niet op :root — main.css is de baas over :root, en
   custom properties erven vanzelf naar alles wat eronder hangt. */
.shopBand,
.shopRij,
.shopIndeling,
.shopTekst {
    --haarlijn: 1px solid var(--kleurRand);
    --lijnSterk: 1px solid var(--kleurTekstSterk);
}

/* De pictogrammen. main.css tekent de set alleen in de header, de footer en de
   USP-balk; op deze pagina moet het hier. Zonder deze regel vult de browser de
   paden op en wordt een lijnicoon een vlek. */
.shopIndeling svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
 * De band bovenaan
 *
 * Papierkleur, dezelfde als de header, met de kop, de inleiding en onderaan de
 * kerngetallen als het titelblok van een tekening.
 * -------------------------------------------------------------------------- */

.shopBand {
    background: var(--kleurPapier);
    border-bottom: var(--haarlijn);
}

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

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

/* Een streepje ervoor, zodat ook het label aan een lijn begint in plaats van
   in de lucht te staan. Zelfde gebaar als .homeLabelLijn op de homepage. */
.shopLabel::before {
    content: '';
    width: 2.25rem;
    height: 2px;
    flex: none;
    background: var(--kleurAccent);
}

.shopLabel a {
    color: inherit;
    text-decoration: none;
}

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

.shopTitel {
    margin-top: var(--ruimte4);
    max-width: 24ch;
    font-variant-numeric: tabular-nums;
}

.shopInleiding {
    margin-top: var(--ruimte4);
    max-width: var(--breedteTekst);
    color: var(--kleurTekstZacht);
}

/* Het titelblok: de kerngetallen in cellen naast elkaar, gescheiden door een
   haarlijn die meebeweegt met de indeling. */
.shopFeiten {
    display: flex;
    flex-wrap: wrap;
    margin-top: var(--ruimte6);
    border-top: var(--haarlijn);
}

.shopFeit {
    /* Omgekeerd, want in een <dl> komt de naam vóór de waarde en op de tekening
       staat de waarde boven het bijschrift. */
    display: flex;
    flex-direction: column-reverse;
    padding: var(--ruimte4) var(--ruimte6) 0 0;
}

.shopFeit + .shopFeit {
    padding-left: var(--ruimte6);
    border-left: var(--haarlijn);
}

.shopFeitWaarde {
    font-family: var(--fontKop);
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--kleurTekstSterk);
    font-variant-numeric: tabular-nums;
}

.shopFeitNaam {
    margin-top: var(--ruimte1);
    font-size: var(--maatMini);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--kleurTekstZacht);
}

/* --------------------------------------------------------------------------
 * De rij onderliggende categorieën
 *
 * De liniaal van de homepage, hier met categorieën in plaats van maten. Het
 * streepje hangt onder de lijn en wordt langer en groen bij hover;
 * motionInit.js laat ze bij het inscrollen uit de lijn zakken.
 * -------------------------------------------------------------------------- */

.shopRij {
    padding-top: var(--ruimte6);
}

.shopRijLijst {
    /* Streepje en naam staan allebei op x=0 — dat is de liniaal. De naam
       begint dus onder het langste streepje; met een vaste --ruimte5 (1,5rem)
       liep het groene streepje bij hover (3rem) dwars door de categorienaam.
       Dezelfde afspraak als in product.css en keuzehulp.css. */
    --shopStreepRust: var(--ruimte4);
    --shopStreepHover: var(--ruimte7);

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
}

.shopRijItem {
    display: flex;
}

.shopRijLink {
    position: relative;
    flex: 1;
    padding: calc(var(--shopStreepHover) + var(--ruimte2)) var(--ruimte3) var(--ruimte2) 0;
    border-top: var(--haarlijn);
    color: var(--kleurTekstSterk);
    text-decoration: none;
    transition: color var(--overgang);
}

.shopRijStreep {
    position: absolute;
    top: -1px;
    left: 0;
    width: 1px;
    height: var(--shopStreepRust);
    background: var(--kleurRand);
    /* motionInit.js tekent de streepjes uit met scaleY; ze horen dus uit de
       lijn te zakken en niet uit hun eigen midden te groeien. */
    transform-origin: top center;
    transition: height var(--overgangTraag), background-color var(--overgang);
}

.shopRijNaam {
    display: block;
    font-family: var(--fontKop);
    font-size: var(--maatKlein);
    font-weight: 600;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    text-wrap: balance;
}

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

.shopRijLink:hover .shopRijStreep {
    height: var(--shopStreepHover);
    background: var(--kleurAccent);
}

/* --------------------------------------------------------------------------
 * De indeling: filterrail naast het resultaat
 * -------------------------------------------------------------------------- */

.shopIndeling {
    display: grid;
    gap: var(--ruimte6);
    padding-block: var(--ruimte6) var(--ruimte8);
}

/* Zonder min-width:0 rekt een breed rooster de kolom op en loopt de pagina
   horizontaal uit — het klassieke grid-lek. */
.shopResultaat {
    min-width: 0;
}

/**
 * DE RAIL KOMT AL OP EEN TABLET NAAST HET ROOSTER
 *
 * Welke van de twee filterblokken in de bron komt, bepaalt bgToonOp() en dus
 * het apparaat: op een telefoon het uitklappaneel, daarbuiten de rail. Een
 * tablet telt daar als desktop (zie de kop van mu-plugins/domZichtbaarheid.php),
 * dus daar staat de rail in de HTML.
 *
 * Die stond tot 64rem onder elkaar, en dan is de rail een kolom van volle
 * breedte met tien maten, acht kleuren en een prijsschuif erin — een halve
 * schermhoogte filters voordat er één product in beeld komt. Vanaf 48rem staat
 * hij daarom naast het rooster, wat smaller; vanaf 64rem op zijn volle 15rem.
 */
@media (min-width: 48rem) {
    .shopIndeling {
        grid-template-columns: 12.5rem minmax(0, 1fr);
        column-gap: var(--ruimte6);
        align-items: start;
    }
}

@media (min-width: 64rem) {
    .shopIndeling {
        grid-template-columns: 15rem minmax(0, 1fr);
        column-gap: var(--ruimte7);
        align-items: start;
    }

    /**
     * DE RAIL PLAKT NIET MEE, EN HEEFT DUS GEEN EIGEN SCHUIFBALK
     *
     * Hier stond eerst position:sticky met een max-height en overflow-y:auto.
     * Dat was één pakket: zodra een sticky element hoger is dan het venster —
     * en dat is deze rail zodra de maatlijst twintig maten telt — pint hij zich
     * boven vast en is de onderkant nooit meer in beeld te scrollen. De
     * schuifbalk was de oplossing daarvoor.
     *
     * Een tweede schuifbalk naast die van de pagina is lelijk en verwarrend, en
     * hij hoort niet bij een pagina die verder alleen uit lijnen bestaat. Dus
     * gaat het hele pakket eruit: de rail is een gewone kolom die met de pagina
     * meeloopt. Voeg 'sticky' hier niet terug zonder ook te bedenken wat er met
     * een lange lijst gebeurt.
     */
}

/* --------------------------------------------------------------------------
 * De filterrail
 * -------------------------------------------------------------------------- */

.shopFilterTitel {
    padding-bottom: var(--ruimte3);
    border-bottom: var(--lijnSterk);
    font-family: var(--fontKop);
    font-size: var(--maatMini);
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--kleurTekstSterk);
}

/* De teller loopt over de groepen die er zijn. Valt er een weg omdat er niets
   te kiezen valt, dan schuift de nummering mee — dezelfde afspraak als op de
   homepage. */
.shopFilterGroepen {
    counter-reset: shopFilter;
}

.shopFilterGroep {
    padding-block: var(--ruimte5);
    border-top: var(--haarlijn);
}

.shopFilterGroep:first-child {
    border-top: 0;
}

.shopFilterKop {
    display: flex;
    align-items: baseline;
    gap: var(--ruimte3);
    font-family: var(--fontKop);
    font-size: var(--maatMini);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--kleurTekstSterk);
}

.shopFilterNummer {
    counter-increment: shopFilter;
    color: var(--kleurAccent);
    font-variant-numeric: tabular-nums;
}

.shopFilterNummer::before {
    content: counter(shopFilter, decimal-leading-zero);
}

.shopFilterLijst {
    margin-top: var(--ruimte2);
}

.shopFilterOptie {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--ruimte3);
    padding-block: var(--ruimte2);
    font-size: var(--maatKlein);
    color: var(--kleurTekst);
    text-decoration: none;
    transition: color var(--overgang);
}

.shopFilterVak {
    display: grid;
    place-items: center;
    width: .9375rem;
    height: .9375rem;
    border: 1px solid var(--kleurRand);
    background: var(--kleurWit);
    transition: background-color var(--overgang), border-color var(--overgang);
}

.shopFilterVak svg {
    width: .625rem;
    height: .625rem;
    stroke: var(--kleurWit);
    stroke-width: 3;
    opacity: 0;
    transition: opacity var(--overgang);
}

.shopFilterNaam {
    font-variant-numeric: tabular-nums;
}

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

.shopFilterOptie:hover {
    color: var(--kleurTekstSterk);
}

.shopFilterOptie:hover .shopFilterVak {
    border-color: var(--kleurAccent);
}

.shopFilterOptie.isActief {
    color: var(--kleurTekstSterk);
    font-weight: 600;
}

.shopFilterOptie.isActief .shopFilterVak {
    background: var(--kleurAccent);
    border-color: var(--kleurAccent);
}

.shopFilterOptie.isActief .shopFilterVak svg {
    opacity: 1;
}

/* --------------------------------------------------------------------------
 * Het prijsfilter
 *
 * Twee getalvelden met een haarlijn eronder in plaats van een invoervak: een
 * bedrag dat je invult hoort op een lijn te staan, niet in een doosje.
 * shopFilters.js zet er een schuifbalk boven; zonder JavaScript staan de velden
 * en de knop er gewoon.
 * -------------------------------------------------------------------------- */

.shopPrijsVelden {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ruimte4);
    margin-top: var(--ruimte4);
}

.shopPrijsVeld label {
    display: block;
    font-size: var(--maatMini);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--kleurTekstZacht);
}

.shopPrijsInvoer {
    display: flex;
    align-items: baseline;
    gap: var(--ruimte1);
    margin-top: var(--ruimte1);
    padding-bottom: var(--ruimte1);
    border-bottom: var(--lijnSterk);
}

.shopPrijsTeken {
    font-family: var(--fontKop);
    font-size: var(--maatKlein);
    color: var(--kleurTekstZacht);
}

.shopPrijsInvoer input {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--fontKop);
    font-size: 1.0625rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--kleurTekstSterk);
    /* De pijltjes van een getalveld passen niet bij een lijn. De waarde blijft
       met de pijltjestoetsen te wijzigen, en de schuif eroverheen doet de rest. */
    appearance: textfield;
}

.shopPrijsInvoer input::-webkit-outer-spin-button,
.shopPrijsInvoer input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

.shopPrijsKnop {
    margin-top: var(--ruimte4);
    padding: var(--ruimte2) var(--ruimte4);
    border: var(--lijnSterk);
    background: transparent;
    font-family: var(--fontKop);
    font-size: var(--maatMini);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--kleurTekstSterk);
    transition: background-color var(--overgang), color var(--overgang);
}

.shopPrijsKnop:hover {
    background: var(--kleurTekstSterk);
    color: var(--kleurWit);
}

/* De schuifbalk. Staat niet in de HTML: shopFilters.js maakt hem aan, want
   zonder script doet hij niets (zie de kop van dat bestand). */
.shopPrijsSchuif {
    --van: 0%;
    --tot: 100%;

    position: relative;
    height: 1.25rem;
    margin-top: var(--ruimte4);
}

.shopPrijsSpoor {
    position: absolute;
    inset-inline: 0;
    top: 50%;
    height: 1px;
    background: var(--kleurRand);
    transform: translateY(-50%);
}

.shopPrijsSpan {
    position: absolute;
    left: var(--van);
    right: calc(100% - var(--tot));
    top: 0;
    height: 1px;
    background: var(--kleurAccent);
}

/**
 * Twee schuiven over elkaar heen. pointer-events staat uit op het veld en aan
 * op de greep, anders vangt de bovenste schuif alle kliks af en is de onderste
 * niet meer te pakken.
 */
.shopPrijsRange {
    position: absolute;
    inset-inline: 0;
    top: 0;
    width: 100%;
    height: 1.25rem;
    margin: 0;
    padding: 0;
    background: transparent;
    appearance: none;
    pointer-events: none;
}

.shopPrijsRange::-webkit-slider-thumb {
    appearance: none;
    width: .875rem;
    height: .875rem;
    border: 1px solid var(--kleurTekstSterk);
    border-radius: 50%;
    background: var(--kleurWit);
    cursor: pointer;
    pointer-events: auto;
}

.shopPrijsRange::-moz-range-thumb {
    width: .875rem;
    height: .875rem;
    border: 1px solid var(--kleurTekstSterk);
    border-radius: 50%;
    background: var(--kleurWit);
    cursor: pointer;
    pointer-events: auto;
}

.shopPrijsRange:focus-visible::-webkit-slider-thumb {
    border-color: var(--kleurAccent);
    box-shadow: 0 0 0 3px var(--kleurAccentRing);
}

.shopPrijsRange:focus-visible::-moz-range-thumb {
    border-color: var(--kleurAccent);
    box-shadow: 0 0 0 3px var(--kleurAccentRing);
}

/* --------------------------------------------------------------------------
 * Het uitklappaneel op mobiel
 *
 * Op een telefoon staat de rail niet naast het rooster maar erboven, in een
 * <details>. Welke van de twee er in de HTML komt bepaalt bgToonOp() in
 * archive-product.php (baserules 16) — er wordt hier dus niets verborgen wat
 * toch geladen is.
 * -------------------------------------------------------------------------- */

.shopFilterPaneel {
    border-block: var(--haarlijn);
}

.shopFilterOpener {
    display: flex;
    align-items: center;
    gap: var(--ruimte3);
    padding-block: var(--ruimte4);
    font-family: var(--fontKop);
    font-size: var(--maatMini);
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--kleurTekstSterk);
    cursor: pointer;
    list-style: none;
}

.shopFilterOpener::-webkit-details-marker {
    display: none;
}

.shopFilterOpener::after {
    content: '+';
    margin-left: auto;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1;
    color: var(--kleurTekstZacht);
}

.shopFilterPaneel[open] .shopFilterOpener::after {
    content: '\2212';
}

.shopFilterTeller {
    display: inline-grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding-inline: var(--ruimte1);
    background: var(--kleurAccent);
    border-radius: var(--randRadiusPil);
    font-size: var(--maatMini);
    color: var(--kleurWit);
    font-variant-numeric: tabular-nums;
}

.shopFilterPaneel .shopFilterGroepen {
    padding-bottom: var(--ruimte5);
    border-top: var(--haarlijn);
}

/* --------------------------------------------------------------------------
 * De balk boven het rooster: het aantal en de sortering
 * -------------------------------------------------------------------------- */

.shopBalk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ruimte3);
    padding-bottom: var(--ruimte3);
    border-bottom: var(--lijnSterk);
}

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

.shopSorteerForm {
    display: flex;
    align-items: center;
    gap: var(--ruimte3);
}

.shopSorteerLabel {
    font-size: var(--maatMini);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--kleurTekstZacht);
}

.shopSorteerKeuze {
    position: relative;
}

.shopSorteerKeuze select {
    appearance: none;
    padding: var(--ruimte1) var(--ruimte5) var(--ruimte1) 0;
    border: 0;
    background: transparent;
    font-family: var(--fontKop);
    font-size: var(--maatKlein);
    font-weight: 600;
    color: var(--kleurTekstSterk);
    cursor: pointer;
}

/* Het pijltje: twee randen van een vierkant, een kwartslag gedraaid. Geen
   achtergrondafbeelding, dus ook geen extra verzoek. */
.shopSorteerKeuze::after {
    content: '';
    position: absolute;
    top: 50%;
    right: .5rem;
    width: .4rem;
    height: .4rem;
    border-right: 1px solid var(--kleurTekstSterk);
    border-bottom: 1px solid var(--kleurTekstSterk);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

.shopSorteerKnop {
    padding: var(--ruimte1) var(--ruimte3);
    border: var(--haarlijn);
    font-size: var(--maatMini);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--kleurTekstSterk);
}

.shopSorteerKnop:hover {
    border-color: var(--kleurTekstSterk);
}

/* Met JavaScript schakelt de keuze meteen door en is de knop overbodig.
   shopFilters.js zet het attribuut; zonder script blijft de knop staan. */
.shopSorteerForm[data-js="aan"] .shopSorteerKnop {
    display: none;
}

/* --------------------------------------------------------------------------
 * De actieve filters
 * -------------------------------------------------------------------------- */

.shopActief {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ruimte3);
    padding-top: var(--ruimte4);
}

.shopActiefLijst {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ruimte2);
}

.shopActiefPil {
    display: inline-flex;
    align-items: center;
    gap: var(--ruimte2);
    padding: var(--ruimte1) var(--ruimte3);
    border: var(--haarlijn);
    font-size: var(--maatMini);
    color: var(--kleurTekstSterk);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    transition: border-color var(--overgang), background-color var(--overgang);
}

.shopActiefPil:hover {
    background: var(--kleurVlak);
    border-color: var(--kleurTekstSterk);
    color: var(--kleurTekstSterk);
}

/* Met .shopActief ervoor, anders wint .shopIndeling svg hierboven van de
   stroke-width: even specifiek, maar die staat eerder in het bestand. */
.shopActief .shopActiefKruis {
    width: .625rem;
    height: .625rem;
    stroke-width: 2.2;
}

.shopWissen {
    margin-left: auto;
    font-size: var(--maatMini);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--kleurTekstZacht);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.shopWissen:hover {
    color: var(--kleurTekstSterk);
}

/* --------------------------------------------------------------------------
 * Het productrooster
 *
 * ul.products is Woo's klasse: die zit in woocommerce_product_loop_start() en
 * in de blokken. Overschrijven zou betekenen dat elke Woo-update de klasse weer
 * terugzet, dus hier houden we hem aan.
 * -------------------------------------------------------------------------- */

.woocommerce ul.products,
.productRooster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
    column-gap: var(--ruimte5);
    row-gap: var(--ruimte7);
    padding-block: var(--ruimte6);
}

/* --------------------------------------------------------------------------
 * De productkaart
 *
 * Hangt aan een lijn in plaats van in een kader te staan. Bij hover wordt die
 * lijn zwart en komt de foto een fractie dichterbij — meer beweging heeft een
 * rooster van 24 kaarten niet nodig.
 * -------------------------------------------------------------------------- */

.productKaart {
    display: flex;
    flex-direction: column;
    padding-top: var(--ruimte3);
    border-top: var(--haarlijn);
    transition: border-color var(--overgang);
}

.productKaart:hover {
    border-top-color: var(--kleurTekstSterk);
}

.productKaartBeeld {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--kleurPapier);
}

.productKaartFoto {
    width: 100%;
    /* reset.css zet height:auto op elke afbeelding; voor object-fit moet de
       hoogte hier weer vastgezet worden. */
    height: 100%;
    object-fit: cover;
    transition: transform var(--overgangTraag);
}

.productKaart:hover .productKaartFoto {
    transform: scale(1.03);
}

/* Het kortingspercentage, linksboven op de foto. Vierkant en zonder radius:
   het is een stempel, geen badge. */
.productKaartLabel {
    position: absolute;
    top: 0;
    left: 0;
    padding: var(--ruimte1) var(--ruimte2);
    background: var(--kleurKorting);
    font-family: var(--fontKop);
    font-size: var(--maatMini);
    font-weight: 700;
    color: var(--kleurWit);
    font-variant-numeric: tabular-nums;
}

.productKaartTekst {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding-top: var(--ruimte4);
}

.productKaartTitel {
    font-family: var(--fontKop);
    font-size: var(--maatH4);
    font-weight: 600;
    line-height: 1.3;
}

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

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

.productKaartMaten {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ruimte1) var(--ruimte3);
    margin-top: var(--ruimte2);
    font-size: var(--maatMini);
    color: var(--kleurTekstZacht);
    font-variant-numeric: tabular-nums;
}

.productKaartMaatRest {
    color: var(--kleurAccentDonker);
}

.productKaartVoorraad {
    display: flex;
    align-items: center;
    gap: var(--ruimte2);
    margin-top: var(--ruimte3);
    font-size: var(--maatMini);
    color: var(--kleurAccentDonker);
}

.productKaartStip {
    width: .375rem;
    height: .375rem;
    border-radius: 50%;
    background: currentColor;
}

.productKaartVoorraad.isUit {
    color: var(--kleurTekstZacht);
}

/* De prijs staat onderaan de kaart, ook als de titel één of twee regels beslaat:
   margin-top:auto duwt hem naar beneden zodat het rooster een rechte lijn houdt. */
.productKaartPrijs {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--ruimte1) var(--ruimte3);
    margin-top: auto;
    padding-top: var(--ruimte4);
    font-variant-numeric: tabular-nums;
}

.productKaartAdvies {
    font-size: var(--maatKlein);
    color: var(--kleurTekstZacht);
    text-decoration-line: line-through;
    text-decoration-thickness: 1px;
}

.productKaartBedrag {
    font-family: var(--fontKop);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--kleurTekstSterk);
}

/* Woo's prijs-HTML bij een variabel product ('€ 999 – € 1.299') en de
   btw-toelichting erachter. */
.productKaartBedrag ins {
    text-decoration: none;
}

.productKaartBedrag del {
    margin-right: var(--ruimte2);
    font-size: var(--maatKlein);
    font-weight: 400;
    color: var(--kleurTekstZacht);
}

.productKaartBedrag small {
    font-size: var(--maatMini);
    font-weight: 400;
    color: var(--kleurTekstZacht);
}

.productKaartActie {
    margin-top: var(--ruimte4);
}

.productKaartLink {
    display: inline-flex;
    align-items: center;
    gap: var(--ruimte2);
    padding-bottom: var(--ruimte1);
    border-bottom: var(--lijnSterk);
    font-family: var(--fontKop);
    font-size: var(--maatKlein);
    font-weight: 600;
    color: var(--kleurTekstSterk);
    text-decoration: none;
    transition: color var(--overgang), border-color var(--overgang);
}

.productKaartPijl {
    width: 1rem;
    height: 1rem;
    transition: transform var(--overgang);
}

.productKaart:hover .productKaartLink,
.productKaartLink:hover {
    color: var(--kleurAccentDonker);
    border-bottom-color: var(--kleurAccent);
}

.productKaart:hover .productKaartPijl {
    transform: translateX(3px);
}

/* --------------------------------------------------------------------------
 * De paginering
 *
 * Eigen klasse naast .paginering uit main.css: die is gemaakt voor het blog en
 * geeft de knopjes een afgeronde hoek. Hier zijn het vierkanten, net als de
 * rest van de pagina. shop.css laadt na main.css, dus deze regels winnen.
 * -------------------------------------------------------------------------- */

.shopPaginering {
    margin-top: var(--ruimte5);
    padding-top: var(--ruimte5);
    border-top: var(--haarlijn);
}

.shopPaginering .page-numbers {
    min-width: 2.25rem;
    height: 2.25rem;
    border-radius: 0;
    border-color: var(--kleurRand);
    font-variant-numeric: tabular-nums;
}

.shopPaginering .page-numbers:hover {
    border-color: var(--kleurTekstSterk);
    color: var(--kleurTekstSterk);
}

.shopPaginering .page-numbers.current {
    background: var(--kleurTekstSterk);
    border-color: var(--kleurTekstSterk);
    color: var(--kleurWit);
}

.shopPaginering .page-numbers.dots {
    border-color: transparent;
}

/* --------------------------------------------------------------------------
 * Geen producten
 * -------------------------------------------------------------------------- */

.shopLeeg {
    max-width: var(--breedteTekst);
    padding-block: var(--ruimte7) var(--ruimte8);
}

.shopLeeg h2 {
    font-size: var(--maatH3);
}

.shopLeeg p {
    margin-top: var(--ruimte3);
    color: var(--kleurTekstZacht);
}

/* --------------------------------------------------------------------------
 * De categorietekst onder het rooster — de SEO-tekst van de categoriepagina
 * -------------------------------------------------------------------------- */

.shopTekst {
    max-width: var(--breedteTekst);
    padding-block: var(--ruimte6) var(--ruimte8);
    border-top: var(--haarlijn);
}

.shopTekst > * + * {
    margin-top: var(--ruimte4);
}

.shopTekst h2 {
    margin-top: var(--ruimte6);
    font-size: var(--maatH3);
}

.shopTekst h3 {
    margin-top: var(--ruimte5);
    font-size: var(--maatH4);
}

.shopTekst ul,
.shopTekst ol {
    padding-left: var(--ruimte5);
    list-style: revert;
}

.shopTekst table {
    font-size: var(--maatKlein);
    font-variant-numeric: tabular-nums;
}

.shopTekst th,
.shopTekst td {
    padding: var(--ruimte2) var(--ruimte3) var(--ruimte2) 0;
    border-bottom: var(--haarlijn);
}