/* =========================================================================
   Agrowinkel — huisstijl
   Waarden komen uit HUISSTIJL.md en de referentiepagina's.
   Laadt ná Shofy's theme.css, dus dit heeft het laatste woord.
   ========================================================================= */

/* ==========================================================================
   Tokens — ronde 3 (4 oktober 2026): mos en oranje, beeldmerk Aar.
   17 oktober 2026: kleuren vervangen door het groen van Stappsokken (één
   kleur voor merk, links en kopen). De rollen bleven gelijk; ontwerp en
   contrast in voorstellen/groen-2026-10/.
   Letterlijk uit referentie/stijl.css (§1), met het voorvoegsel --st-.
   Daaronder de oude namen uit het v2-thema als ALIAS van hun nieuwe rol, zodat
   geen regel stil op een onbestaande kleur terugvalt. Drie oude tokens wisselden
   van rol en zijn daarom in de regels zelf hernoemd (5 oktober):
     - tekst in --st-actie       -> --st-actie-tekst (vol oranje haalt als tekst 2,4:1)
     - wit op vlak --st-actie    -> --st-op-actie (op oranje staat donkere tekst)
     - tekst in --st-groen       -> --st-groen-tekst (--st-groen is nu limoen, nooit tekst)
   ========================================================================== */
:root {
    /* merk: het groen van Stappsokken (17 oktober 2026; was mos en limoen) */
    --st-groen-diep:       #257e36;   /* MERK: logo, merkvlakken, knoppen — wit erop 5,1:1 */
    --st-groen-nacht:      #1c5c2c;   /* hover op merk, donkere banden */
    --st-groen:            #257e36;   /* accent (was limoen) */
    --st-groen-tekst:      #1f6b2e;   /* groen als TEKST: links, op voorraad — 6,6:1 op wit */
    --st-groen-tint:       #eaf6ec;   /* lichte vlakken: topbalk, voettekst, leverregel, meldingen */
    --st-groen-rand:       #cfe6d3;
    --st-blad:             #ffffff;   /* accent op groen: alleen wit haalt 4,5:1 (5,1) */
    --st-zacht:            #f3f9f4;   /* zachte ondergrond: keuzehulp, AI-hulp */
    --st-zacht-rand:       #dcebdf;
    /* kopen en zoeken: hetzelfde groen, witte tekst (was oranje) */
    --st-actie:            #257e36;
    --st-op-actie:         #ffffff;   /* tekst en iconen óp groen: 5,1:1 */
    --st-actie-hover:      #1f6b2e;
    --st-actie-tekst:      #1f6b2e;   /* groen als TEKST: links, actieprijs — 6,6:1 op wit */
    --st-actie-tekst-hover:#1c5c2c;
    --st-actie-tint:       #eaf6ec;
    --st-actie-rand:       #cfe6d3;
    --st-actie-licht:      #ffffff;   /* link op groen */
    /* neutraal, iets koeler: geen gelige ondertoon meer */
    --st-bg:               #ffffff;
    --st-wit:              #ffffff;
    --st-tegel:            #f2f2ee;   /* fotovlak, zoekbalk in rust */
    --st-rand:             #e8e8e3;
    --st-rand-sterk:       #c9cdc6;
    --st-tekst:            #23312a;   /* één tekstkleur: koppen, prijzen, lopende tekst */
    --st-tekst-2:          #4a4f4a;
    --st-tekst-zwak:       #5f645d;   /* 6,1:1 op wit, 5,4:1 op de tegel */
    --st-op-donker:        #ffffff;   /* tekst op groen: 5,1:1 */
    --st-op-donker-zwak:   #ffffff;   /* lichtgroen haalde maar 3,5:1 */
    --st-op-donker-vlak:   rgba(255, 255, 255, .08);
    --st-op-donker-rand:   rgba(255, 255, 255, .18);
    --st-sluier:           rgba(31, 38, 22, .46);
    /* signaal */
    --st-ster:             #257e36;   /* altijd met het cijfer ernaast */
    --st-ster-leeg:        #dcdfd2;
    --st-wwk:              #ed2283;   /* uitsluitend WebwinkelKeur */
    --st-let-op:           #8a5a00;
    --st-let-op-tint:      #fff5dc;
    --st-let-op-rand:      #f0dca6;
    --st-fout:             #8f1d2c;
    --st-fout-tint:        #fbeaec;
    /* vorm */
    --st-r-kaart:          16px;
    --st-r-klein:          12px;
    --st-r-pil:            999px;
    --st-schaduw-1:        0 1px 2px rgba(31, 38, 22, .06);
    --st-schaduw-2:        0 8px 28px rgba(31, 38, 22, .10);
    --st-schaduw-zweef:    0 4px 18px rgba(0, 0, 0, .14);
    --st-schaduw-boven:    0 -6px 18px rgba(31, 38, 22, .08);
    /* typografie: zelf gehost (zie §0 onderaan het tokenblok) */
    --st-kop:              "Archivo", system-ui, "Segoe UI", sans-serif;
    --st-body:             "Public Sans", system-ui, "Segoe UI", sans-serif;
    /* maat */
    --st-pad:              64px;
    --st-max:              1440px;

    /* --- oude namen (v2-thema) als alias van hun rol in ronde 3 --------- */
    --st-font-kop:         var(--st-kop);
    --st-font-body:        var(--st-body);
    --st-pagina:           var(--st-bg);
    --st-bodem:            var(--st-zacht);
    --st-groen-licht:      #e4f3e7;   /* hero-vlak, zoals Stappsokken */
    --st-groen-vlak:       var(--st-zacht);
    --st-groen-hover:      var(--st-groen-tekst);
    --st-groen-rand-sec:   var(--st-rand-sterk);
    --st-mint:             var(--st-blad);
    --st-geel:             var(--st-zacht);
    --st-geel-tekst:       var(--st-let-op);
    --st-geel-donker:      var(--st-tekst-2);
    --st-hooi-rand:        var(--st-zacht-rand);
    --st-rand-input:       var(--st-rand-sterk);
    --st-tekst-alt:        var(--st-tekst);
    --st-tekst-sec:        var(--st-tekst-2);
    --st-tekst-sec-2:      var(--st-tekst-zwak);
    --st-radius-kaart:     var(--st-r-kaart);
    --st-radius-tegel:     13px;
    --st-radius-klein:     var(--st-r-klein);
    --st-radius-pill:      var(--st-r-pil);
    --st-schaduw-widget:   var(--st-schaduw-zweef);
    --st-sectie:           44px;
    --st-content-max:      var(--st-max);
    --st-content-pad:      var(--st-pad);
}

/* §0 Lettertypen — zelf gehost, uit referentie/fonts (OFL). Archivo 800 niet:
   dat zit alleen in het logo, als paden. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/archivo-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/archivo-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/public-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/public-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/public-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/public-sans-latin-700-normal.woff2") format("woff2")}


/* =========================================================================
   Basis
   ========================================================================= */

body {
    background: var(--st-pagina);
    color: var(--st-tekst);
    font-family: var(--st-font-body);
    font-size: 16px;
    line-height: 1.65;
}

h1, h2, h3, h4, h5, h6,
.st-kop {
    font-family: var(--st-font-kop);
    color: var(--st-tekst);
    letter-spacing: -.4px;
    text-wrap: balance;
}

h1 { font-size: 34px; font-weight: 700; letter-spacing: -.6px; }
h2 { font-size: 24px; font-weight: 600; }
h3 { font-size: 18px; font-weight: 600; }

a { color: var(--st-tekst); }
a:hover { color: var(--st-actie-hover); }

/* Labels: klein, uppercase, iets uit elkaar */
.st-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--st-tekst-zwak);
}

/* =========================================================================
   Knoppen
   ========================================================================= */

.st-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--st-font-body);
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    padding: 15px 28px;
    border-radius: var(--st-radius-pill);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Twee klassen in plaats van één, met opzet: de blogpagina wordt door Botble
   in een .ck-content gezet, en de regel `.ck-content a` telt één klasse méér
   dan een losse .st-knop--primair. De knop werd daardoor groen op groen. */
.st-knop.st-knop--primair {
    background: var(--st-actie);
    color: var(--st-op-actie);
}
.st-knop.st-knop--primair:hover {
    background: var(--st-actie-tekst);
    color: var(--st-wit);
}

.st-knop--secundair {
    background: var(--st-wit);
    color: var(--st-tekst);
    border-color: var(--st-groen-rand-sec);
}
.st-knop--secundair:hover {
    background: var(--st-groen-tint);
    border-color: var(--st-actie);
}

.st-knop--stil {
    background: var(--st-wit);
    color: var(--st-tekst-sec);
    border-color: var(--st-rand-input);
}

.st-knop:focus-visible {
    outline: 2px solid var(--st-actie);
    outline-offset: 2px;
}

/* =========================================================================
   Kaarten
   ========================================================================= */

.st-kaart {
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-radius: var(--st-radius-kaart);
}

/* Het grijze fotovlak van een productkaart */
.st-kaart__foto {
    background: var(--st-tegel);
    border-radius: var(--st-radius-kaart) var(--st-radius-kaart) 0 0;
    min-height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* =========================================================================
   Badges
   ========================================================================= */

.st-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    line-height: 1;
    padding: 6px 11px;
    border-radius: var(--st-radius-pill);
}

.st-badge--bestseller { background: var(--st-actie);      color: var(--st-op-actie); }
.st-badge--yellow     { background: var(--st-geel);       color: var(--st-geel-donker); }
.st-badge--pack       { background: var(--st-geel);       color: var(--st-geel-donker); }
.st-badge--merino     { background: var(--st-groen-diep); color: var(--st-wit); }
.st-badge--zacht      { background: var(--st-groen-tint); color: var(--st-tekst); }

/* =========================================================================
   Invoervelden
   ========================================================================= */

.st-input {
    background: var(--st-tegel);
    border: 1px solid var(--st-rand-input);
    border-radius: var(--st-radius-pill);
    padding: 13px 20px;
    font-family: var(--st-font-body);
    font-size: 15px;
    color: var(--st-tekst);
    width: 100%;
}
.st-input::placeholder { color: var(--st-tekst-zwak); }
.st-input:focus {
    outline: none;
    border-color: var(--st-actie);
    background: var(--st-wit);
}

/* =========================================================================
   Layout
   ========================================================================= */

.st-container {
    max-width: var(--st-content-max);
    margin-inline: auto;
    padding-inline: var(--st-content-pad);
}

.st-sectie { padding-block: var(--st-sectie); }

@media (max-width: 991px) {
    :root { --st-content-pad: 24px; }
    h1 { font-size: 26px; }
    h2 { font-size: 20px; }
}

@media (max-width: 575px) {
    :root { --st-content-pad: 16px; }
}

/* =========================================================================
   WebwinkelKeur — uitsluitend magenta, nooit voor iets anders gebruiken
   ========================================================================= */

.st-wwk        { color: var(--st-wwk); }
.st-wwk-ster   { color: var(--st-ster); }

/* =========================================================================
   Toegankelijkheid
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* =========================================================================
   Blengi — inline instapblokken en zwevende launcher
   Eén agent, twee interfaces. Zie BLENGI-INTEGRATIE.md.
   ========================================================================= */

.st-blengi {
    background: var(--st-groen-tint);
    border: 1px solid var(--st-groen-rand);
    border-radius: var(--st-radius-kaart);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.st-blengi__kop {
    display: flex;
    align-items: center;
    gap: 11px;
}

.st-blengi__avatar { flex-shrink: 0; display: block; }

.st-blengi__titels {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.st-blengi__titel {
    font-family: var(--st-font-kop);
    font-size: 15.5px;
    font-weight: 600;
    color: var(--st-tekst);
    line-height: 1.3;
}

.st-blengi__sub {
    font-size: 12.5px;
    color: #3c5a44;
    line-height: 1.45;
}

/* Het label naast de titel op de brede variant. */
.st-blengi__label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--st-actie-tekst);
    background: var(--st-wit);
    border: 1px solid var(--st-groen-rand);
    border-radius: var(--st-radius-pill);
    padding: 3px 9px;
    letter-spacing: .4px;
    white-space: nowrap;
}

/* --- vrije invoer: altijd het primaire element, staat vóór de chips ----- */

.st-blengi__invoer {
    display: flex;
    align-items: center;
    background: var(--st-wit);
    border: 1.5px solid var(--st-groen-rand);
    border-radius: var(--st-radius-pill);
    padding: 0 6px 0 16px;
    height: 44px;
    gap: 10px;
    margin: 0;
}

.st-blengi__invoer:focus-within {
    border-color: var(--st-actie);
    box-shadow: 0 0 0 3px rgba(46, 158, 68, .14);
}

.st-blengi__veld {
    flex-grow: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--st-tekst);
    padding: 0;
}

.st-blengi__veld::placeholder { color: var(--st-tekst-zwak); }
.st-blengi__veld:focus { outline: 0; }

.st-blengi__verstuur {
    flex-shrink: 0;
    background: var(--st-actie);
    border: 0;
    border-radius: var(--st-radius-pill);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease;
}

.st-blengi__verstuur:hover { background: var(--st-actie-hover); }

/* --- startervragen: suggesties, hooguit drie -------------------------- */

.st-blengi__chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    /* Iets meer lucht onder het invoerveld: de suggesties zijn secundair,
       vrije invoer is het primaire element. */
    margin-top: 5px;
}

.st-blengi__chip {
    font-family: inherit;
    cursor: pointer;
    background: var(--st-wit);
    border: 1px solid var(--st-groen-rand);
    border-radius: var(--st-radius-pill);
    padding: 7px 13px;
    font-size: 12.5px;
    color: var(--st-tekst);
    font-weight: 600;
    line-height: 1.2;
    transition: border-color .15s ease, background .15s ease;
}

.st-blengi__chip:hover {
    border-color: var(--st-groen-rand-sec);
    background: var(--st-groen-tint);
}

/* --- brede variant: categoriepagina, over de volle rasterbreedte ------- */

.st-blengi--breed {
    grid-column: 1 / -1;
    border-radius: 18px;
    padding: 22px 24px;
    flex-direction: row;
    align-items: center;
    gap: 22px;
}

.st-blengi--breed .st-blengi__kop {
    flex-grow: 1;
    align-items: center;
    min-width: 0;
}

.st-blengi--breed .st-blengi__titels { gap: 4px; }

.st-blengi--breed .st-blengi__titelrij {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.st-blengi--breed .st-blengi__titel { font-size: 18px; }
.st-blengi--breed .st-blengi__sub { font-size: 14px; }

.st-blengi--breed .st-blengi__rechts {
    width: 430px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.st-blengi--breed .st-blengi__invoer {
    height: 46px;
    padding-left: 18px;
}

.st-blengi--breed .st-blengi__veld { font-size: 14px; }
.st-blengi--breed .st-blengi__verstuur { width: 34px; height: 34px; }
.st-blengi--breed .st-blengi__chip { padding: 8px 14px; font-size: 13px; }

@media (max-width: 991px) {
    .st-blengi--breed {
        flex-direction: column;
        align-items: stretch;
        gap: 13px;
        padding: 18px 20px;
    }

    .st-blengi--breed .st-blengi__rechts { width: auto; }
}

/* --- productpagina: één blok, twee plekken ----------------------------
   Op desktop staat het blok onder de foto: daar is ruimte over en het staat
   op ooghoogte naast de prijs. Op mobiel stapelen de kolommen, en dan zou
   diezelfde plek het blok tussen de foto en de titel duwen — vóór de
   bestelknop. Daar staat het dus onderaan de productinformatie.
   Het blok wordt twee keer gerenderd; hier bepaalt de CSS welke je ziet.
   Pas de grens aan samen met Bootstrap's lg-breekpunt (992px) van Shofy. */

.st-blengi--onderfoto { display: none; }

@media (min-width: 992px) {
    .st-blengi--onderfoto { display: flex; margin-top: 24px; }
    .st-blengi--onderinfo { display: none; }
}

/* --- zwevende launcher: site-breed, altijd bereikbaar ------------------ */

.st-blengi-launcher {
    position: fixed;
    bottom: 30px;
    right: 34px;
    z-index: 1040;
    display: flex;
    align-items: center;
    gap: 11px;
    background: var(--st-wit);
    border: 1px solid var(--st-rand-input);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    border-radius: var(--st-radius-pill);
    padding: 9px 18px 9px 11px;
    font-family: var(--st-font-body);
    font-size: 14px;
    color: var(--st-tekst);
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
}

.st-blengi-launcher:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
    transform: translateY(-1px);
}

.st-blengi-launcher__sterk {
    font-weight: 600;
    color: var(--st-tekst);
}

@media (max-width: 767px) {
    .st-blengi-launcher {
        bottom: 16px;
        right: 16px;
        padding: 9px;
    }

    /* Op mobiel alleen de avatar; de tekstbalk vreet de duimzone op. */
    .st-blengi-launcher__tekst { display: none; }
}

/* Blengi laadt zijn eigen widget; onze launcher verdwijnt zodra die staat. */
.st-blengi-launcher[hidden] { display: none !important; }

/* =========================================================================
   Header
   ========================================================================= */

.st-header { background: var(--st-wit); }

/* --- bovenbalk --------------------------------------------------------- */

.st-topbar {
    background: var(--st-groen-diep);
    color: var(--st-op-donker);
    font-size: 13px;
}

.st-topbar__binnen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    /* Vaste hoogte, geen padding: het ontwerp legt de drie balken op 40, 84 en
       48 px vast. Met padding rond een regel tekst schuift die hoogte mee met
       de lettergrootte, en dan staat de kop op elke pagina net iets anders. */
    height: 40px;
}

.st-topbar__keur {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--st-wit);
    font-weight: 600;
    white-space: nowrap;
}

.st-topbar__usps {
    display: flex;
    align-items: center;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}

.st-topbar__usps li {
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

/* Elke belofte heeft zijn eigen icoon; de kleur is het blad uit het beeldmerk,
   het enige accent dat op erf-groen licht genoeg is. */
.st-topbar__usps svg,
.st-topbar .st-vink { color: var(--st-mint); flex: none; }

.st-topbar__rechts {
    display: flex;
    align-items: center;
    gap: 18px;
    white-space: nowrap;
}

.st-topbar__service {
    /* De topbalk is donker erf-groen; deze link stond nog op diezelfde kleur
       uit de tijd dat hij licht was, en was dus onzichtbaar. Gemeten 1,00:1. */
    color: var(--st-op-donker);
    text-decoration: none;
}

.st-topbar__service:hover { color: var(--st-wit); }

@media (max-width: 1199px) {
    /* Drie beloften passen niet naast de schakelaar; de derde valt als eerste
       af, daarna de tweede. De verzendbelofte blijft het langst staan: die
       trekt de bestelling over de streep. */
    .st-topbar__usp--derde { display: none; }
}

@media (max-width: 991px) {
    .st-topbar__usp--tweede,
    .st-topbar__keur,
    .st-topbar__service { display: none; }
    .st-topbar__binnen { justify-content: center; gap: 16px; }
}

/* --- hoofdbalk --------------------------------------------------------- */

.st-header__hoofd {
    background: var(--st-wit);
    border-bottom: 1px solid var(--st-rand);
}

.st-header__rij {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 84px;
    /* Anker voor het megamenu: dat hangt onder deze rij en loopt over de volle
       breedte van de container. */
    position: relative;
}

/* De ingang tot het hele assortiment: negen afdelingen, 157 subcategorieën.
   Hij staat in de hoofdbalk en niet in de navigatiebalk eronder, want dit is
   de balk die blijft staan als je scrollt. Erf-groen, zodat hij niet
   concurreert met de terracotta bestelknop verderop de pagina. */
.st-assortimentknop {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: none;
    border: 0;
    border-radius: var(--st-radius-pill);
    background: var(--st-groen-diep);
    color: var(--st-wit);
    padding: 13px 22px 13px 18px;
    font-family: var(--st-font-body);
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}

.st-assortimentknop:hover,
.st-assortimentknop[aria-expanded="true"] { background: var(--st-groen-nacht); }

.st-header__rij .logo { flex-shrink: 0; margin: 0; }
.st-header__rij .logo a { display: block; }

.st-header__zoek { flex-grow: 1; min-width: 0; }

@media (max-width: 991px) {
    .st-header__rij { gap: 10px; height: 60px; }
    .st-topbar__binnen { height: 34px; }
    .st-header__zoek-mobiel { padding-bottom: 14px; background: var(--st-wit); border-bottom: 1px solid var(--st-rand); }
}

/* --- zoekbalk ---------------------------------------------------------- */

.st-zoek {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--st-tegel);
    border: 1.5px solid var(--st-rand-input);
    border-radius: var(--st-radius-pill);
    padding: 0 6px 0 20px;
    height: 48px;
    gap: 12px;
}

.st-zoek:focus-within {
    border-color: var(--st-actie);
    background: var(--st-wit);
}

.st-zoek__veld {
    flex-grow: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    color: var(--st-tekst);
}

.st-zoek__veld::placeholder { color: var(--st-tekst-zwak); }
.st-zoek__veld:focus { outline: 0; }
.st-zoek__veld::-webkit-search-cancel-button { -webkit-appearance: none; }

.st-zoek__knop {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: var(--st-radius-pill);
    background: var(--st-actie);
    color: var(--st-op-actie);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease;
}

.st-zoek__knop:hover { background: var(--st-actie-hover); }

/* De suggestielijst van Botble hangt onder het formulier. */
.st-zoek .bb-quick-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 60;
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-radius: var(--st-radius-klein);
    box-shadow: var(--st-schaduw-widget);
    overflow: hidden;
}

.st-zoek .bb-quick-search-results:not(.show) { display: none; }

/* --- acties ------------------------------------------------------------ */

.st-acties {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* Icoon en tekst naast elkaar, niet onder elkaar: de hoofdbalk is 84 px hoog
   en een gestapelde knop maakt hem hoger dan het ontwerp toestaat. */
.st-actie {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-radius: var(--st-radius-pill);
    color: var(--st-tekst);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease;
}

.st-actie:hover { background: var(--st-tegel); color: var(--st-tekst); }

.st-actie__label { line-height: 1.2; }

.st-actie__icoon { position: relative; display: grid; margin-right: 5px; }

/* Erf-groen en niet terracotta: de actiekleur is voorbehouden aan wat je
   aanklikt om te bestellen. Een teller is een mededeling. Het witte randje
   houdt hem leesbaar waar hij het icoon overlapt. */
.st-actie__teller {
    position: absolute;
    top: -8px;
    right: -10px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--st-groen-diep);
    color: var(--st-wit);
    font-size: 10.5px;
    font-weight: 600;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 2px var(--st-wit);
}

.st-wagen {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 6px;
    background: var(--st-actie-tint);
    border: 1px solid var(--st-actie-rand);
    border-radius: var(--st-radius-pill);
    padding: 9px 12px 9px 16px;
    color: var(--st-tekst);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s ease;
}

.st-wagen:hover { border-color: var(--st-actie); }

.st-wagen__aantal {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--st-actie);
    color: var(--st-op-actie);
    font-size: 12px;
    font-weight: 600;
    display: grid;
    place-items: center;
}

@media (max-width: 1199px) {
    /* Knap de knoppen terug tot hun icoon zodra de balk krap wordt; de wagen
       houdt zijn teller, want dat is de enige die iets mededeelt. */
    .st-actie__label,
    .st-wagen__tekst { display: none; }
    .st-actie__icoon { margin-right: 0; }
    .st-wagen { padding: 9px 12px; }
}

@media (max-width: 991px) {
    .st-acties { gap: 4px; }
}

/* --- navigatiebalk ----------------------------------------------------- */

.st-nav {
    background: var(--st-wit);
    border-bottom: 1px solid var(--st-rand);
}

.st-nav__rij {
    display: flex;
    align-items: stretch;
    gap: 4px;
}

.st-nav__menu { flex-grow: 1; }

.st-nav__menu .tp-main-menu-content > ul,
.st-nav__menu ul.tp-main-menu-content {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.st-nav__menu li { position: relative; }

.st-nav__menu > nav > ul > li > a,
.st-nav__menu ul > li > a {
    display: block;
    color: var(--st-tekst-sec);
    font-size: 14.5px;
    font-weight: 500;
    padding: 15px 18px;
    text-decoration: none;
    border-bottom: 3px solid transparent;
}

.st-nav__menu > nav > ul > li:hover > a,
.st-nav__menu > nav > ul > li.active > a,
.st-nav__menu > nav > ul > li.current-menu-item > a {
    color: var(--st-tekst);
    font-weight: 600;
    border-bottom-color: var(--st-actie);
}

/* Menu-item met de CSS-klasse st-menu-geel — bedoeld voor Stapp Yellow.
   Zie theme/INSTALL.md: die klasse zet je op het menu-item zelf. */
.st-nav__menu .st-menu-geel > a {
    color: var(--st-geel-tekst);
    font-weight: 600;
}

.st-nav__menu .st-menu-geel:hover > a,
.st-nav__menu .st-menu-geel.active > a {
    color: var(--st-geel-tekst);
    border-bottom-color: var(--st-geel);
}

/* Submenu's van Botble blijven Shofy's opmaak volgen, maar wel in onze kleur.

   Let op de manier van tonen: Shofy laat het submenu verschijnen met een
   overgang op opacity en visibility (0,3 s). Wij deden dat eerst met
   display: none / block. Die twee bijten elkaar — display is niet te animeren,
   dus het menu sprong aan terwijl de doorzichtigheid nog liep, en dat zag je
   als trillen zodra je met de muis over de balk ging.

   Nu doen we het op dezelfde manier als Shofy: alleen opacity en visibility.
   Het submenu staat er altijd, maar is onzichtbaar en niet aanklikbaar. */
.st-nav__menu ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 70;
    min-width: 230px;
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    box-shadow: var(--st-schaduw-widget);
    padding: 6px 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .18s ease-out, transform .18s ease-out, visibility .18s;
}

.st-nav__menu li:hover > ul,
.st-nav__menu li:focus-within > ul {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .st-nav__menu ul ul { transition: none; transform: none; }
    .st-nav__menu li:hover > ul { transform: none; }
}

.st-nav__menu ul ul > li > a {
    padding: 8px 16px;
    border-bottom: 0;
}

/* =========================================================================
   Footer
   ========================================================================= */

.st-footer {
    background: var(--st-groen-diep);
    color: #cfe3d4;
    margin-top: var(--st-sectie);
}

.st-footer__binnen {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: 40px;
    padding-block: 52px 40px;
}

.st-footer__merk { display: flex; flex-direction: column; gap: 16px; }

.st-footer__logo { display: inline-block; text-decoration: none; }

.st-footer__logo-tekst {
    font-family: var(--st-font-kop);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.5px;
    color: var(--st-wit);
}

.st-footer__intro {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    max-width: 34ch;
    color: #cfe3d4;
}

/* Zolang WebwinkelKeur niets terugstuurt staat er niets — geen leeg kader. */
.st-footer__keurmerk:empty { display: none; }

.st-footer__kop {
    font-family: var(--st-font-kop);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--st-wit);
    margin: 0 0 14px;
}

.st-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.st-footer__links a {
    color: #cfe3d4;
    font-size: 14px;
    text-decoration: none;
}

.st-footer__links a:hover {
    color: var(--st-wit);
    text-decoration: underline;
}

.st-footer__onderrand {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-block: 18px;
    font-size: 13px;
    color: #a9c6b1;
}

@media (max-width: 991px) {
    .st-footer__binnen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px;
        padding-block: 40px 32px;
    }

    .st-footer__merk { grid-column: 1 / -1; }
}

@media (max-width: 575px) {
    .st-footer__binnen { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   Productkaart
   ========================================================================= */

.st-product {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.st-product:hover {
    border-color: var(--st-groen-rand-sec);
    box-shadow: 0 6px 20px rgba(28, 92, 44, .09);
}

.st-product__tegel {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--st-tegel);
    height: 220px;
    padding: 18px;
}

.st-product__tegel img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.st-product__inhoud {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 18px 20px;
    flex-grow: 1;
}

.st-product__meta {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--st-tekst-zwak);
    line-height: 1.3;
}

.st-product__meta a { color: inherit; text-decoration: none; }
.st-product__meta a:hover { color: var(--st-actie-tekst); }

.st-product__naam {
    font-family: var(--st-font-kop);
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    letter-spacing: -.2px;
}

.st-product__naam a {
    color: var(--st-tekst);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.st-product__naam a:hover { color: var(--st-actie-tekst); }

.st-product__onder {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 4px;
}

.st-product__prijs {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.st-product__prijs-nu {
    font-family: var(--st-font-kop);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.4px;
    color: var(--st-tekst);
    white-space: nowrap;
}

/* De centen klein en hoog. Geen tabular-nums meer: die maakt de cijfers even
   breed en dat vecht met het formaatverschil. */
[data-bb-value="product-price"] sup {
    font-size: .62em;
    font-weight: 700;
    vertical-align: baseline;
    position: relative;
    top: -.42em;
    margin-left: 1px;
}

.st-prijs__btw {
    font-size: 12px;
    font-weight: 500;
    color: var(--st-tekst-zwak);
    letter-spacing: 0;
    white-space: nowrap;
}

.st-product__prijs-oud {
    font-size: 13px;
    color: var(--st-tekst-zwak);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}

/* st_prijs_op_aanvraag (functions/producten.php): kleiner en grijs in plaats
   van het grote groene bedrag — er valt hier niets af te lezen. */
.st-prijs--aanvraag .st-product__prijs-nu {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.2px;
    color: var(--st-tekst-sec);
    white-space: normal;
}

/* st_eenheid: "per paar", "per rol" — klein en grijs onder de prijs. */
.st-product__eenheid {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--st-tekst-zwak);
}

.st-product__toevoegen {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--st-radius-pill);
    background: var(--st-actie);
    color: var(--st-op-actie);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}

.st-product__toevoegen:hover {
    background: var(--st-actie-tekst);
    transform: scale(1.06);
}

/* st_prijs_op_aanvraag op de kaart: een kleine link in plaats van het ronde
   winkelwagenknopje — er is niets om aan een winkelwagen toe te voegen. */
.st-productkaart__aanvraag {
    flex-shrink: 0;
    padding: 7px 12px;
    border-radius: var(--st-radius-pill);
    border: 1px solid var(--st-groen-rand-sec);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--st-tekst);
    text-decoration: none;
    white-space: nowrap;
}
.st-productkaart__aanvraag:hover {
    background: var(--st-groen-tint);
    border-color: var(--st-actie);
}

.st-product__verlanglijst {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: var(--st-radius-pill);
    background: var(--st-wit);
    box-shadow: var(--st-schaduw-1);
    color: var(--st-tekst-sec);
    display: grid;
    place-items: center;
    cursor: pointer;
    /* Stond op 0 en kwam pas bij hover tevoorschijn. Op een aanraakscherm is
       er geen hover, dus daar bestond de knop niet. Het ontwerp laat hem
       gewoon staan. */
    opacity: 1;
    transition: color .15s ease;
}

.st-product__verlanglijst:hover { color: var(--st-actie-tekst); }

.st-product__verlanglijst.is-actief,
.st-product__verlanglijst:hover { color: var(--st-actie-tekst); }

/* Op aanraakschermen bestaat hover niet — dan altijd tonen. */
@media (hover: none) {
    .st-product__verlanglijst { opacity: 1; }
}

/* --- badges van Botble binnen onze kaart ------------------------------- */

.st-product .tp-product-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    z-index: 2;
}

.st-product .tp-product-badge span {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    line-height: 1;
    padding: 6px 11px;
    border-radius: var(--st-radius-pill);
    background: var(--st-actie);
    color: var(--st-op-actie);
}

.st-product .tp-product-badge .product-sale { background: var(--st-geel); color: var(--st-geel-donker); }
.st-product .tp-product-badge .product-out-stock { background: var(--st-tekst-sec-2); color: var(--st-wit); }

/* =========================================================================
   Hero
   ========================================================================= */

.st-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 336px;
    gap: 32px;
    padding-block: 28px 0;
    align-items: stretch;
}

.st-hero__hoofd {
    display: flex;
    align-items: center;
    background: var(--st-groen-licht);
    border-radius: 20px;
    overflow: hidden;
    min-height: 360px;
}

.st-hero__tekst {
    display: flex;
    flex-direction: column;
    gap: 22px;
    align-items: flex-start;
    padding: 56px 24px 56px 56px;
    max-width: 480px;
}

.st-hero__badge {
    display: inline-block;
    background: var(--st-wit);
    border: 1px solid #bcd9c3;
    border-radius: var(--st-radius-pill);
    padding: 6px 14px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--st-tekst);
}

.st-hero__titel {
    margin: 0;
    font-size: 44px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--st-tekst);
}

.st-hero__intro {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--st-tekst-sec);
    max-width: 46ch;
}

.st-hero__knoppen { display: flex; gap: 14px; flex-wrap: wrap; }

.st-hero__foto {
    position: relative;
    flex-grow: 1;
    align-self: stretch;
    min-width: 0;
}

.st-hero__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Eigen sfeerfoto's (11 oktober 2026). De foto vult het vak in plaats van het
   op te rekken: de tekst bepaalt de hoogte, net als bij de illustratie (448 px
   op 1440, 150 px hoog op mobiel). Uitsnede iets onder het midden: daar staan
   bij buitenfoto's de dieren en het hek, boven is het lucht. */
.st-hero__foto:not(.st-hero__foto--illustratie) img {
    position: absolute;
    inset: 0;
    object-position: 50% 62%;
}

/* Meer foto's: ze liggen op elkaar en vloeien in elkaar over. */
[data-st-hero-fotos] img {
    opacity: 0;
    transition: opacity .8s ease;
}

[data-st-hero-fotos] img.is-actief { opacity: 1; }

.st-hero__stippen {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    display: flex;
    background: rgba(255, 255, 255, .9);
    border-radius: var(--st-radius-pill);
    padding: 0 4px;
}

.st-hero__stippen button {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.st-hero__stippen button::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--st-groen-diep);
}

.st-hero__stippen button[aria-current="true"]::before { background: var(--st-groen-diep); }

/* Pauzeknop: twee streepjes; gepauzeerd een driehoek (verder spelen). */
.st-hero__stippen .st-hero__pauze::before {
    width: 10px;
    border-radius: 0;
    border-width: 0 3px;
    border-style: solid;
}

.st-hero__stippen .st-hero__pauze[aria-pressed="true"]::before {
    width: 0;
    height: 0;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent var(--st-groen-diep);
}

.st-hero__stippen button:focus-visible {
    outline: 3px solid var(--st-groen-diep);
    outline-offset: -3px;
    border-radius: var(--st-radius-pill);
}

@media (prefers-reduced-motion: reduce) {
    [data-st-hero-fotos] img { transition: none; }
}

.st-hero__fotolabel {
    position: absolute;
    right: 14px;
    bottom: 14px;
    background: rgba(255, 255, 255, .92);
    border-radius: var(--st-radius-pill);
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--st-tekst);
}

.st-hero__kaarten {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.st-hero__kaart {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: 18px;
    padding: 26px 24px;
}

.st-hero__kaart--groen { background: var(--st-groen-tint); }
.st-hero__kaart--geel  { background: var(--st-geel); }

.st-hero__kaart-titel {
    margin: 0;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.3px;
}

.st-hero__kaart--groen .st-hero__kaart-titel { color: var(--st-tekst); }
.st-hero__kaart--geel  .st-hero__kaart-titel { color: var(--st-geel-donker); }

.st-hero__kaart-tekst {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

.st-hero__kaart--groen .st-hero__kaart-tekst { color: var(--st-tekst-sec); }
.st-hero__kaart--geel  .st-hero__kaart-tekst { color: #5a4d1c; }

.st-hero__kaart-link {
    margin-top: auto;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.st-hero__kaart--groen .st-hero__kaart-link { color: var(--st-tekst); }
.st-hero__kaart--geel  .st-hero__kaart-link { color: var(--st-geel-donker); }
.st-hero__kaart-link:hover { text-decoration: underline; }

@media (max-width: 1199px) {
    .st-hero { grid-template-columns: minmax(0, 1fr); }
    .st-hero__kaarten { flex-direction: row; }
    .st-hero__kaart { flex: 1 1 0; }
}

@media (max-width: 767px) {
    .st-hero { padding-block: 24px 32px; gap: 20px; }

    .st-hero__hoofd { flex-direction: column-reverse; min-height: 0; }

    .st-hero__tekst { padding: 28px 24px 32px; max-width: none; gap: 16px; }

    .st-hero__titel { font-size: 30px; letter-spacing: -.6px; }

    .st-hero__foto { width: 100%; aspect-ratio: 16 / 10; align-self: auto; }

    .st-hero__kaarten { flex-direction: column; }
}

/* Nu in het seizoen (11 oktober 2026): rechts in de hero vier producten die
   bij de tijd van het jaar passen (functions/seizoen.php). Witte tegels op het
   lichtgroene vlak; de hero blijft even hoog als met de foto (448 px op 1440).
   Op mobiel een rij die je opzij veegt, onder de tekst. */
.st-hero__seizoen {
    /* Basis 0: alleen de ruimte naast de tekst, anders duwen lange
       productnamen de tekst smal en loopt de kop over drie regels. */
    flex: 1 1 0;
    align-self: stretch;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px 24px 24px 0;
}

.st-hero__seizoen-kop {
    margin: 0;
    font-family: var(--st-font-kop);
    font-size: 15px;
    font-weight: 700;
    color: var(--st-tekst);
}

.st-hero__tegels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    flex-grow: 1;
}

.st-hero__tegel {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 14px;
    padding: 12px;
    background: var(--st-wit);
    border: 1px solid transparent;
    border-radius: 14px;
    color: var(--st-tekst);
    text-decoration: none;
    transition: border-color .15s;
}

.st-hero__tegel:focus-visible { outline: 2px solid var(--st-groen); outline-offset: 2px; }

@media (hover: hover) {
    .st-hero__tegel:hover { border-color: var(--st-groen-rand); color: var(--st-tekst); }
}

.st-hero__tegel img {
    grid-row: 1 / 4;
    align-self: center;
    width: 96px;
    height: 96px;
    object-fit: contain;
}

.st-hero__tegel-cat {
    font-size: 12px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--st-tekst-sec);
}

.st-hero__tegel-naam {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 2px 0 6px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.st-hero__tegel-prijs {
    align-self: end;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.st-hero__tegel-bedrag {
    font-family: var(--st-font-kop);
    font-size: 17px;
    font-weight: 700;
}

.st-hero__tegel-prijs .st-prijs__btw { font-size: 12px; color: var(--st-tekst-sec); }

/* Vanaf 992 px smaller staat de hero onder elkaar (ronde 3, onderaan dit
   bestand): de tekst op order 1, dan de tegels, vier naast elkaar. */
@media (max-width: 991.98px) {
    .st-hero__seizoen { order: 2; width: 100%; padding: 20px 0 22px; }

    .st-hero__seizoen-kop { padding-inline: 20px; }

    .st-hero__tegels { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-inline: 20px; }

    .st-hero__tegel { display: flex; flex-direction: column; }

    .st-hero__tegel img { width: 100%; height: 96px; margin-bottom: 6px; }

    .st-hero__tegel-naam { -webkit-line-clamp: 3; font-size: 13px; }

    .st-hero__tegel-prijs { margin-top: auto; align-self: flex-start; }
}

/* Telefoon: een rij die je opzij veegt; de derde tegel steekt erin. */
@media (max-width: 767px) {
    .st-hero__tegels {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        scroll-padding-inline: 20px;
    }

    .st-hero__tegel { flex: 0 0 47%; scroll-snap-align: start; }
}

/* =========================================================================
   Sectiekop
   ========================================================================= */

.st-sectiekop {
    display: flex;
    /* Onderlangs uitlijnen: de kop heeft nu twee regels en de link ernaast
       hoort bij de onderste. */
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

/* De toelichting onder de kop. Geen kapitalen en geen actiekleur: dit is een
   zin die je leest, geen labeltje dat om aandacht vraagt. */
.st-sectiekop__onder {
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--st-tekst-sec);
    max-width: 64ch;
}

/* Blijft staan voor blokken die de oude klasse nog gebruiken. */
.st-sectiekop__boven {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--st-actie-tekst);
    margin-bottom: 6px;
}

.st-sectiekop__titel {
    margin: 0;
    font-family: var(--st-font-kop);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -.5px;
    color: var(--st-tekst);
}

.st-sectiekop__meer {
    flex-shrink: 0;
    color: var(--st-actie-tekst);
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.st-sectiekop__meer:hover { text-decoration: underline; }

@media (max-width: 575px) {
    .st-sectiekop__titel { font-size: 22px; }
    .st-sectiekop__meer { font-size: 13px; }
}

/* =========================================================================
   Categorietegels
   ========================================================================= */

/* padding-BLOCK, niet padding: de korte vorm zet ook links en rechts op nul
   en dan valt dit blok als enige buiten de rest van de pagina. */
.st-categorieblok { padding-block: 8px 48px; }

.st-tegels {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
}

.st-tegel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-radius: var(--st-radius-kaart);
    padding: 22px 16px;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.st-tegel:hover {
    border-color: var(--st-groen-rand-sec);
    box-shadow: 0 6px 20px rgba(28, 92, 44, .09);
}

.st-tegel__icoon {
    width: 56px;
    height: 56px;
    border-radius: var(--st-radius-pill);
    background: var(--st-groen-tint);
    color: var(--st-actie-tekst);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.st-tegel__icoon img { width: 34px; height: 34px; object-fit: contain; }

.st-tegel__naam {
    font-family: var(--st-font-kop);
    font-size: 14px;
    font-weight: 600;
    color: var(--st-tekst);
}

.st-tegel__aantal { font-size: 12px; color: var(--st-tekst-sec-2); }

/* De Stapp Yellow-tegel springt eruit; de klasse volgt de slug van de
   categorie, zie theme/INSTALL.md. */
.st-tegel--stapp-yellow-sokken {
    background: var(--st-geel);
    border-color: var(--st-geel);
}

.st-tegel--stapp-yellow-sokken .st-tegel__icoon { background: var(--st-wit); color: var(--st-geel-tekst); }
.st-tegel--stapp-yellow-sokken .st-tegel__naam,
.st-tegel--stapp-yellow-sokken .st-tegel__aantal { color: var(--st-geel-donker); }

/* =========================================================================
   Beloftebalk
   ========================================================================= */

/* Hero, beloftebalk en de drie seizoensvlakken zijn in het ontwerp één blok:
   ze staan in dezelfde sectie met 24 px ertussen. Bij ons zijn het drie
   shortcodes en dus drie secties, elk met hun eigen sectiepadding — en dan
   valt er 88 px tussen de hero en de beloften waar er 24 hoort. De
   buursectie-selectors halen die padding alleen weg waar die drie
   daadwerkelijk op elkaar volgen. */
.st-beloften { padding-block: 40px; }
.st-hero + .st-beloften { padding-block: 24px 0; }
.st-beloften + .st-sectie { padding-top: 24px; }

.st-beloften__rij {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 991px) {
    .st-beloften__rij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
    .st-beloften__rij { grid-template-columns: minmax(0, 1fr); }
}

.st-belofte {
    display: flex;
    align-items: center;
    gap: 14px;
}

.st-belofte__icoon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--st-groen-tint);
    color: var(--st-groen-tekst);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.st-belofte__tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.st-belofte__tekst strong {
    font-family: var(--st-font-kop);
    font-size: 15px;
    font-weight: 600;
    color: var(--st-tekst);
}

.st-belofte__tekst span { font-size: 13.5px; color: var(--st-tekst-sec-2); }

/* =========================================================================
   Nieuwsbrief
   ========================================================================= */

/* Geen gekleurd reclamevlak meer, maar een formulierregel binnen de kaart —
   zo staat het in het ontwerp, en zo valt het niet uit de toon tussen de rest
   van de pagina. */

.st-nieuwsbrief__formulier { margin-top: 14px; }

.st-nieuwsbrief__formulier form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.st-nieuwsbrief__formulier input[type="email"],
.st-nieuwsbrief__formulier input[type="text"] {
    flex: 1 1 200px;
    min-width: 0;
    height: 46px;
    border: 1px solid var(--st-rand-input);
    border-radius: var(--st-radius-pill);
    padding: 0 20px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--st-tekst);
    background: var(--st-wit);
}

.st-nieuwsbrief__formulier input:focus {
    outline: none;
    border-color: var(--st-tekst);
    box-shadow: 0 0 0 3px var(--st-groen-tint);
}

/* .tp-subscribe-input button van Shofy heeft dezelfde specificiteit en staat
   verderop in dit bestand, dus die won: de knop kwam terracotta uit terwijl het
   ontwerp hem donkergroen wil. Terracotta is voor bestellen. */
.st-nieuwsbrief__formulier .tp-subscribe-input button,
.st-nieuwsbrief__formulier button {
    flex-shrink: 0;
    height: 46px;
    border: 0;
    border-radius: var(--st-radius-pill);
    padding: 0 26px;
    background: var(--st-groen-diep);
    color: var(--st-wit);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.st-nieuwsbrief__formulier .tp-subscribe-input button:hover,
.st-nieuwsbrief__formulier button:hover { background: var(--st-groen-nacht); }

.st-klein { font-size: 12.5px; color: var(--st-tekst-zwak); margin: 10px 0 0; }


/* =========================================================================
   Productpagina
   ========================================================================= */

/* --- bovenhelft: foto links, koopblok rechts ----------------------------- */

.st-pd {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    column-gap: 48px;
    align-items: start;
    padding-block: 18px 8px;
}

.st-pd__links { position: sticky; top: 20px; }

@media (max-width: 991px) {
    .st-pd { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
    .st-pd__links { position: static; }
}

/* --- ankerbalk ----------------------------------------------------------- */

.st-ankers {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--st-bodem);
    border-bottom: 1px solid var(--st-rand);
    margin-top: 36px;
}

.st-ankers__rij { display: flex; align-items: center; gap: 4px; min-height: 50px; }
.st-ankers__links { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.st-ankers__links::-webkit-scrollbar { display: none; }

.st-ankers a {
    padding: 16px 18px;
    font-weight: 600;
    font-size: 14.5px;
    color: var(--st-tekst-sec);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
}

.st-ankers a:hover { color: var(--st-tekst); }
.st-ankers a[aria-current] { color: var(--st-tekst); border-bottom-color: var(--st-actie); }

/* De koopregel verschijnt pas als de balk vastplakt: daarboven staat de echte
   bestelknop nog gewoon in beeld. */
.st-ankers__koop {
    display: none;
    align-items: center;
    gap: 14px;
    margin-left: auto;
    padding-block: 6px;
}

.st-ankers.is-vast .st-ankers__koop { display: flex; }
.st-ankers__beeld { width: 42px; height: 42px; border-radius: 10px; background: var(--st-tegel); padding: 4px; flex: none; }
.st-ankers__beeld img { width: 100%; height: 100%; object-fit: contain; }
.st-ankers__koop b { display: block; font: 600 14px/1.25 var(--st-font-kop); color: var(--st-tekst); max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-ankers__koop small { display: block; font-size: 12.5px; color: var(--st-tekst-zwak); line-height: 1.2; }
.st-ankers__koop .st-pd__prijs-nu { font-size: 19px; }
.st-ankers__knop { padding: 10px 18px; font-size: 14px; }

@media (max-width: 991px) {
    .st-ankers__koop { display: none !important; }
}

/* --- onderhelft: blokken links, "Handig erbij" rechts --------------------- */

.st-pd__onder {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    column-gap: 48px;
    align-items: start;
    padding-block: 32px 0;
}

.st-pd__onder > .st-blok { grid-column: 1; }
.st-pd__onder > .st-zijkaart { grid-column: 2; grid-row: 1 / span 9; }

.st-blok { padding-block: 34px; border-bottom: 1px solid var(--st-rand); }
.st-blok:last-child { border-bottom: 0; }
.st-blok--eerste { padding-top: 8px; }
.st-blok > h2 { font-size: 24px; margin-bottom: 16px; }

@media (max-width: 1199px) {
    .st-pd__onder { grid-template-columns: minmax(0, 1fr); }
    .st-pd__onder > .st-zijkaart { grid-column: 1; grid-row: auto; position: static; margin-bottom: 24px; }
}

/* --- in het kort --------------------------------------------------------- */

.st-plusmin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.st-plusmin__kolom { background: var(--st-wit); border: 1px solid var(--st-rand); border-radius: var(--st-radius-kaart); padding: 20px 22px; }
.st-plusmin h3 { font-size: 15px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.st-plusmin ul { list-style: none; margin: 0; padding: 0; }
.st-plusmin li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; margin-bottom: 9px; color: var(--st-tekst-sec); }
.st-plusmin li:last-child { margin-bottom: 0; }
.st-plusmin svg { flex: none; margin-top: 2px; }
.st-plusmin h3 svg { margin-top: 0; }
.st-plusmin .is-plus svg { color: var(--st-groen-tekst); }
.st-plusmin .is-min svg { color: var(--st-tekst-zwak); }
.st-proza { margin-top: 24px; font-size: 15.5px; line-height: 1.7; color: var(--st-tekst-sec); }
.st-proza p { margin: 0 0 14px; }

@media (max-width: 575px) {
    .st-plusmin { grid-template-columns: minmax(0, 1fr); }
}

/* --- handig erbij -------------------------------------------------------- */

.st-zijkaart {
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-radius: var(--st-radius-kaart);
    padding: 24px;
    position: sticky;
    top: 70px;
}

.st-zijkaart h3 { font-size: 18px; margin: 0 0 12px; }
.st-zijkaart__lijst { display: grid; gap: 10px; }
.st-klus--mini { padding: 10px 14px 10px 10px; gap: 14px; }
.st-klus--mini .st-klus__beeld { width: 64px; height: 64px; }
.st-klus--mini b { font-size: 14.5px; }
.st-klus--mini b a { color: inherit; text-decoration: none; }
.st-klus--mini b a:hover { text-decoration: underline; text-underline-offset: 3px; }
.st-klus--mini .st-klus__tekst > span { font-weight: 600; color: var(--st-tekst); }
.st-klus--mini .st-rondknop { margin-left: auto; }

.st-rondknop {
    width: 42px;
    height: 42px;
    flex: none;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--st-actie);
    color: var(--st-op-actie);
    cursor: pointer;
    transition: background .15s, transform .15s;
}

.st-rondknop:hover { background: var(--st-actie-hover); transform: scale(1.06); }
.st-rondknop--klein { width: 36px; height: 36px; }

.st-vergelijkbaar-plaats { min-height: 420px; }

/* --- beoordelingen -------------------------------------------------------- */

.st-scorekaart {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-radius: var(--st-radius-kaart);
    padding: 24px 28px;
    margin-bottom: 18px;
}

.st-scorekaart__cijfer { text-align: center; }
.st-scorekaart__cijfer b { display: block; font: 700 46px/1 var(--st-font-kop); letter-spacing: -1.5px; color: var(--st-tekst); }
.st-scorekaart__cijfer small { display: block; font-size: 13px; color: var(--st-tekst-zwak); margin-top: 4px; }

.st-balken { list-style: none; margin: 0; padding: 0; }
.st-balken li {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) 4ch;
    gap: 12px;
    align-items: center;
    font-size: 13px;
    color: var(--st-tekst-sec);
    margin-bottom: 5px;
    white-space: nowrap;
}
.st-balken li > span:first-child { min-width: 62px; }
.st-balken i { display: block; height: 8px; border-radius: 4px; background: var(--st-tegel); overflow: hidden; }
.st-balken i b { display: block; height: 100%; background: var(--st-ster); border-radius: 4px; }

.st-review {
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-radius: var(--st-radius-kaart);
    padding: 20px 24px;
    margin-bottom: 14px;
}

.st-review__kop { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 8px; }
.st-review__kop b { font: 600 15px var(--st-font-kop); color: var(--st-tekst); }
.st-review__kop small { font-size: 13px; color: var(--st-tekst-zwak); }
.st-review p { font-size: 14.5px; color: var(--st-tekst-sec); margin: 0; line-height: 1.6; }

.st-review__antwoord {
    margin-top: 12px;
    padding-left: 16px;
    border-left: 3px solid var(--st-groen-rand);
}

.st-review__antwoord b { display: block; font-size: 13.5px; color: var(--st-tekst); margin-bottom: 4px; }

.st-reviews__leeg { font-size: 15px; color: var(--st-tekst-sec); margin: 0; }

/* Het schrijfformulier van Botble staat in Bootstrap-opmaak. We laten het
   staan — het werkt en het wordt zelden gezien — maar halen de scherpste
   randjes eraf zodat het niet uit de pagina springt. */
.st-reviewformulier { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--st-rand); }
.st-reviewformulier h3 { font-size: 19px; margin: 0 0 14px; }
.st-reviewformulier .form-control,
.st-reviewformulier .form-select {
    border: 1px solid var(--st-rand-input);
    border-radius: 12px;
    background: var(--st-wit);
    font-family: inherit;
    font-size: 14.5px;
    padding: 11px 14px;
}
.st-reviewformulier .form-control:focus {
    border-color: var(--st-tekst);
    box-shadow: 0 0 0 3px var(--st-groen-tint);
}
.st-reviewformulier .form-label { font-size: 13.5px; font-weight: 600; color: var(--st-tekst-sec); }
.st-reviewformulier .btn-primary {
    background: var(--st-actie);
    border-color: var(--st-actie);
    border-radius: var(--st-radius-pill);
    padding: 11px 24px;
    font-weight: 600;
}
.st-reviewformulier .alert-info {
    background: var(--st-groen-tint);
    border-color: var(--st-groen-rand);
    color: var(--st-tekst-sec);
    border-radius: 12px;
    font-size: 13.5px;
}

@media (max-width: 575px) {
    .st-scorekaart { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* --- vergelijktabel ------------------------------------------------------ */

.st-vergelijkwrap { overflow-x: auto; }

.st-vergelijktabel {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-radius: var(--st-radius-kaart);
    overflow: hidden;
    font-size: 14px;
    table-layout: fixed;
    min-width: 640px;
}

.st-vergelijktabel th,
.st-vergelijktabel td { padding: 12px 18px; text-align: left; border-bottom: 1px solid var(--st-rand); vertical-align: top; font-weight: 400; }
.st-vergelijktabel tr:last-child th,
.st-vergelijktabel tr:last-child td { border-bottom: 0; }
.st-vergelijktabel tbody th { font-weight: 500; color: var(--st-tekst-sec); background: var(--st-bodem); }
.st-vergelijktabel thead th { vertical-align: bottom; }
.st-vergelijktabel thead th:first-child,
.st-vergelijktabel thead td:first-child { width: 190px; }
.st-vergelijktabel .is-dit { background: var(--st-geel); }
.st-vergelijktabel__beeld { display: block; width: 96px; height: 96px; background: var(--st-tegel); border-radius: 12px; padding: 8px; margin: 8px 0 10px; }
.st-vergelijktabel__beeld img { width: 100%; height: 100%; object-fit: contain; }
.st-vergelijktabel__merk { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--st-tekst-zwak); }
.st-vergelijktabel thead b { display: block; font: 600 15px/1.3 var(--st-font-kop); color: var(--st-tekst); }
.st-vergelijktabel .st-knop { padding: 9px 16px; font-size: 14px; }

/* --- koopblok: de kaart met alles wat bij de beslissing hoort ------------ */

.st-koopblok {
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-radius: 20px;
    padding: 22px 26px 24px;
    margin-top: 16px;
    box-shadow: var(--st-schaduw-1);
}

.st-koopblok .st-pd__prijs-nu { font-size: 34px; letter-spacing: -1px; }
.st-koopblok .st-pd__prijs-oud { font-size: 15px; }

/* st_prijs_op_aanvraag: dezelfde kaart, maar zonder prijsrij en formulier —
   alleen de aanvraagtekst, de offerteknop en de leverregel. */
.st-koopblok__aanvraag {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}
.st-koopblok .st-prijs--aanvraag .st-pd__prijs-nu {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.2px;
    color: var(--st-tekst-sec);
}

/* Eén regel onder de titel: beoordeling en artikelnummer. Dat nummer stond
   onderaan de kolom, voorbij de bestelknop — de laatste plek waar je kijkt
   als je aan de telefoon om een artikelnummer wordt gevraagd. */
.st-pd__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    font-size: 13.5px;
    color: var(--st-tekst-zwak);
}

.st-pd__meta .st-pd__beoordeling { display: flex; align-items: center; gap: 8px; margin: 0; }
.st-pd__meta a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.st-pd__meta a:hover { color: var(--st-tekst); }

.st-pd__tags {
    margin-top: 14px;
    font-size: 13.5px;
    color: var(--st-tekst-zwak);
}

/* De foto blijft staan terwijl je de koopkolom doorleest, zoals in het
   ontwerp. Alleen op een breed scherm; daaronder staan de kolommen toch
   onder elkaar. */
@media (min-width: 992px) {
    .tp-product-details-top .row > .col-lg-6:first-child {
        position: sticky;
        top: 20px;
        align-self: flex-start;
    }
}

.st-pd__categorie {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.st-pd__categorie a { color: var(--st-actie-tekst); text-decoration: none; }
.st-pd__categorie a:hover { text-decoration: underline; }

/* 30 px en niet 34: bij 34 breekt "Purofort Professional veiligheidslaars S5"
   over twee regels en schuift het hele koopblok 50 px omlaag. In het ontwerp
   past hij op één regel. */
/* h1.st-pd__titel en niet .st-pd__titel: Shofy heeft "main
   .tp-product-details-title" met font-size 32px, en dat weegt zwaarder dan
   één klasse. Met het element erbij weegt het even zwaar en wint onze regel,
   omdat dit bestand later laadt. */
h1.st-pd__titel {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.8px;
    line-height: 1.2;
    margin: 2px 0 8px;
}

.st-pd__beoordeling {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 13.5px;
}

.st-pd__beoordeling a { color: var(--st-tekst-sec); text-decoration: none; }
.st-pd__beoordeling-aantal:hover { text-decoration: underline; }

.st-pd__kort {
    font-size: 15px;
    line-height: 1.65;
    color: var(--st-tekst-sec);
    margin-bottom: 22px;
    max-width: 60ch;
}

.st-pd__prijsregel {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.st-pd__prijs { display: flex; align-items: baseline; gap: 12px; }

.st-pd__prijs-nu {
    font-family: var(--st-font-kop);
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -.8px;
    color: var(--st-tekst);
    font-variant-numeric: tabular-nums;
}

.st-pd__prijs-oud {
    font-size: 17px;
    color: var(--st-tekst-zwak);
    text-decoration: line-through;
}

.st-pd__btw { font-size: 13.5px; color: var(--st-tekst-sec-2); }

/* st_eenheid: "per paar", "per rol" — naast de prijs, zelfde toon als de btw-tekst. */
.st-pd__eenheid { font-size: 13.5px; color: var(--st-tekst-sec-2); }

/* --- maat en kleur: de swatches van Botble in onze vorm ---------------- */

.st-pd__formulier .tp-product-details-variations,
.st-pd__formulier .bb-product-attribute-swatches { margin-bottom: 20px; }

.st-pd__formulier .bb-product-form-label,
.st-pd__formulier .tp-product-details-variations label {
    display: block;
    font-family: var(--st-font-kop);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--st-tekst);
    margin-bottom: 9px;
}

.st-pd__formulier .bb-product-attribute-swatch-item label,
.st-pd__formulier .tp-color-variation-list li a,
.st-pd__formulier .tp-size-variation-list li a {
    min-width: 68px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1.5px solid var(--st-rand-input);
    border-radius: var(--st-radius-klein);
    background: var(--st-wit);
    font-size: 14px;
    font-weight: 600;
    color: var(--st-tekst);
    cursor: pointer;
}

.st-pd__formulier input:checked + label,
.st-pd__formulier .bb-product-attribute-swatch-item input:checked + label {
    border-color: var(--st-actie);
    color: var(--st-tekst);
    box-shadow: 0 0 0 1px var(--st-actie);
}

.st-pd__formulier input:disabled + label {
    color: var(--st-tekst-zwak);
    background: var(--st-tegel);
    text-decoration: line-through;
    cursor: not-allowed;
}

/* De voorraadmelding van Botble ("Beschikbaar") staat vlak boven de
   bestelknop, terwijl het vertrouwensblok eronder hetzelfde in een hele zin
   zegt. Twee keer hetzelfde boven elkaar helpt niemand.
   (Deze regel raakte kwijt bij het herschrijven van de maatkeuze.) */
.st-pd__formulier .number-items-available,
.st-pd__formulier .tp-product-details-inventory,
.st-pd__formulier .bb-product-availability { display: none; }

/* --- aantal en bestelknop --------------------------------------------- */

.st-pd__acties {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.st-aantal {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--st-rand-input);
    border-radius: var(--st-radius-pill);
    height: 52px;
    padding: 0 6px;
    flex-shrink: 0;
}

.st-aantal__knop {
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--st-tekst-sec);
    border-radius: var(--st-radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.st-aantal__knop:hover { background: var(--st-tegel); color: var(--st-tekst); }

.st-aantal__veld {
    width: 44px;
    border: 0;
    background: transparent;
    text-align: center;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--st-tekst);
    -moz-appearance: textfield;
}

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

.st-pd__bestellen {
    flex: 1 1 260px;
    height: 52px;
    padding-inline: 28px;
}

.st-pd__bestellen.btn-disabled,
.st-pd__bestellen:disabled {
    background: var(--st-tekst-zwak);
    cursor: not-allowed;
}

.st-pd__direct { width: 100%; margin-bottom: 14px; }

.st-pd__verlanglijst {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border: 1.5px solid var(--st-rand-input);
    border-radius: var(--st-radius-pill);
    background: var(--st-wit);
    color: var(--st-tekst-sec);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.st-pd__verlanglijst:hover,
.st-pd__verlanglijst.is-actief { color: var(--st-actie-tekst); border-color: var(--st-actie); }

/* --- offerte ----------------------------------------------------------- */

.st-pd__offerte {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--st-rand);
    border-radius: var(--st-radius-klein);
    padding: 13px 16px;
    margin-bottom: 18px;
    font-size: 13.5px;
    color: var(--st-tekst-sec);
    text-decoration: none;
    background: var(--st-wit);
}

.st-pd__offerte:hover { border-color: var(--st-groen-rand-sec); color: var(--st-tekst); }
.st-pd__offerte span span { font-weight: 600; color: var(--st-tekst); }

/* --- vertrouwensblok --------------------------------------------------- */

/* Vier korte punten in twee kolommen, onder een scheidingslijn. Was een
   verticaal rijtje van drie regels waarin de voorraadmelding meeliep; die is
   nu een eigen groen vlak bij de bestelknop (.st-leverregel). */
.st-vertrouwen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 22px;
    margin: 16px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--st-rand);
    list-style: none;
    font-size: 13.5px;
    color: var(--st-tekst-sec);
}

.st-vertrouwen li { display: flex; gap: 9px; align-items: flex-start; line-height: 1.45; }
.st-vertrouwen svg { flex: none; margin-top: 2px; color: var(--st-groen-tekst); }
.st-vertrouwen__keurmerk:empty { display: none; }
.st-vertrouwen__keurmerk { grid-column: 1 / -1; }

@media (max-width: 575px) {
    .st-vertrouwen { grid-template-columns: minmax(0, 1fr); }
}

/* --- meta -------------------------------------------------------------- */

.st-pd__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    font-size: 12.5px;
    color: var(--st-tekst-sec-2);
    margin-bottom: 18px;
}

.st-pd__meta a { color: var(--st-tekst-sec); }

@media (max-width: 767px) {
    .st-pd__titel { font-size: 23px; }
    .st-pd__prijs-nu { font-size: 26px; }
    .st-pd__bestellen { flex-basis: 100%; order: 3; }
}

/* =========================================================================
   Kruimelpad
   ========================================================================= */

.st-kruimels { padding-block: 18px 6px; }

.st-kruimels__pad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--st-tekst);
}

.st-kruimels__pad a { color: var(--st-tekst-sec-2); text-decoration: none; }
.st-kruimels__pad a:hover { color: var(--st-actie-tekst); text-decoration: underline; }
.st-kruimels__scheiding { color: var(--st-tekst-zwak); }
.st-kruimels__pad [aria-current="page"] { font-weight: 600; }

.st-kruimels__titel {
    margin: 14px 0 0;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.7px;
}

@media (max-width: 767px) {
    .st-kruimels__titel { font-size: 24px; }
}

/* =========================================================================
   Overgenomen uit style.integration.css van de oude opzet
   Botble koppelt dat bestand aan het ACTIEVE thema; bij een themawissel
   verdwijnt het dus. De opmaak die daar stond hoort inmiddels in dit thema,
   maar deze twee dingen zijn geen opmaak — het zijn afspraken over de kassa
   die de winkel draaiende houden. Die gaan mee.
   ========================================================================= */

/* --- Nederlandse veldvolgorde in de kassa -----------------------------
   Alleen de weergavevolgorde; de HTML van Botble blijft ongemoeid, dus dit
   overleeft plugin-updates. Terugdraaien = dit blok weghalen.
   Gewenst: Naam / E-mail + telefoon / Land / Adres / Postcode / Plaats     */

.address-form-wrapper,
.billing-address-form-wrapper {
    display: flex;
    flex-direction: column;
}

.address-form-wrapper > *,
.billing-address-form-wrapper > *              { order: 9; }
.address-form-wrapper > *:nth-child(1),
.billing-address-form-wrapper > *:nth-child(1) { order: 1; }
.address-form-wrapper > *:nth-child(2),
.billing-address-form-wrapper > *:nth-child(2) { order: 2; }
.address-form-wrapper > *:nth-child(3),
.billing-address-form-wrapper > *:nth-child(3) { order: 3; }
.address-form-wrapper > *:nth-child(5),
.billing-address-form-wrapper > *:nth-child(5) { order: 4; }
.address-form-wrapper > *:nth-child(6),
.billing-address-form-wrapper > *:nth-child(6) { order: 5; }
.address-form-wrapper > *:nth-child(4),
.billing-address-form-wrapper > *:nth-child(4) { order: 6; }

/* --- postcodecheck: de bevestigingsregel onder het adres --------------- */

.pc-check-melding {
    font-size: .875rem;
    line-height: 1.4;
    margin: -.25rem 0 1rem;
}

.pc-check-melding:empty { display: none; }
.pc-check-melding[data-soort="goed"] { color: #1a7f37; font-weight: 600; }
.pc-check-melding[data-soort="goed"]::before { content: "\2713\00a0"; }
.pc-check-melding[data-soort="fout"] { color: #b42318; }
.pc-check-melding[data-soort="bezig"] { color: var(--st-tekst-sec-2); }

/* Het telefoonveld draagt een eigen masker; de plaatshouder daarvan botst
   met het label. */
.js-phone-number-mask::placeholder { color: transparent; opacity: 0; }

/* =========================================================================
   Tekstpagina's (voorwaarden, privacy, retourbeleid)
   Lange lopende tekst hoort leesbaar te zijn, niet opgemaakt als etalage.
   ========================================================================= */

/* Leesbreedte op de tekst zelf, niet op de houder: anders knijpt hij ook
   blokken dicht die juist de volle breedte nodig hebben, zoals het
   offerteformulier. */
.ck-content > p,
.ck-content > ul,
.ck-content > ol,
.ck-content > h2,
.ck-content > h3,
.ck-content > h4,
.ck-content > blockquote { max-width: 78ch; }

.ck-content h2 {
    font-size: 22px;
    margin-top: 34px;
    margin-bottom: 12px;
}

.ck-content h3 {
    font-size: 18px;
    margin-top: 26px;
    margin-bottom: 10px;
}

.ck-content p,
.ck-content li { font-size: 15px; line-height: 1.75; }

.ck-content ul,
.ck-content ol { padding-left: 20px; margin-bottom: 16px; }

.ck-content a { color: var(--st-actie-tekst); }

/* =========================================================================
   Nieuwsbriefformulier van Botble binnen ons groene blok
   ========================================================================= */

.st-nieuwsbrief__formulier .tp-subscribe-input {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
}

.st-nieuwsbrief__formulier .form-group,
.st-nieuwsbrief__formulier .tp-subscribe-input > div:first-child { flex: 1 1 200px; min-width: 0; }

.st-nieuwsbrief__formulier .help-block { display: none; }

/* NIET verbergen. De rekensom van de captcha staat in dit label; met
   display:none zie je alleen een leeg vakje en is het formulier niet in te
   vullen. Gemeten op de homepage: het invoerveld vroeg om "9 - 4" en die som
   stond nergens op het scherm. */
.st-nieuwsbrief__formulier label {
    display: block;
    width: 100%;
    margin: 4px 0 -2px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--st-tekst-sec);
}

.st-nieuwsbrief__formulier .tp-subscribe-input label { display: none; }

/* Shofy's footer-CSS is specifieker dan de onze en kleurt de tekst donker;
   op een groene bodem is dat onleesbaar. Daarom hier expliciet. */
.st-footer .st-footer__intro,
.st-footer .st-footer__links a,
.st-footer .st-footer__onderrand { color: #cfe3d4; }

.st-footer .st-footer__kop,
.st-footer .st-footer__logo-tekst { color: var(--st-wit); }

.st-footer .st-footer__links a:hover { color: var(--st-wit); }

/* =========================================================================
   Logo
   ========================================================================= */

.st-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--st-actie-tekst);   /* het vierkant volgt currentColor */
}

.st-logo__merk { flex-shrink: 0; display: block; }

.st-logo__woord {
    font-family: var(--st-font-kop);
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -.5px;
    line-height: 1;
    white-space: nowrap;
}

.st-logo__deel1 { color: var(--st-tekst); }
.st-logo__deel2 { color: var(--st-actie-tekst); }

/* Op de groene footerbodem draait het contrast om. */
.st-logo--licht { color: var(--st-wit); }
.st-logo--licht .st-logo__merk rect { fill: #ffffff; }
.st-logo--licht .st-logo__merk path { stroke: var(--st-groen-diep); }
.st-logo--licht .st-logo__deel1 { color: var(--st-mint); }
.st-logo--licht .st-logo__deel2 { color: var(--st-wit); }

@media (max-width: 575px) {
    .st-logo__woord { font-size: 20px; }
    .st-logo__merk { width: 34px; height: 34px; }
}

/* =========================================================================
   Invoervelden binnen onze eigen componenten

   Shofy zet één brede regel op input[type=search|text|number|…]: wit vlak,
   eigen rand, hoogte 56px, breedte 100%. Die is specifieker dan een losse
   klasse, dus tekent hij een tweede kader binnen onze pillen. Hier zetten we
   dat per component recht — met een selector die wél wint, niet met
   !important.
   ========================================================================= */

.st-zoek input.st-zoek__veld,
.st-blengi input.st-blengi__veld,
.st-aantal input.st-aantal__veld {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    outline: 0;
    margin: 0;
    padding: 0;
    height: auto;
    line-height: 1.3;
    font-family: inherit;
    color: var(--st-tekst);
}

.st-zoek input.st-zoek__veld:focus,
.st-blengi input.st-blengi__veld:focus,
.st-aantal input.st-aantal__veld:focus {
    border: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
}

.st-zoek input.st-zoek__veld { width: 100%; font-size: 15px; }

.st-blengi input.st-blengi__veld { width: 100%; font-size: 13.5px; }
.st-blengi--breed input.st-blengi__veld { font-size: 14px; }

.st-aantal input.st-aantal__veld {
    width: 44px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
}


/* =========================================================================
   Productblok op de homepage
   Het ontwerp zet deze rij op een wit vlak met een lijn erboven en eronder;
   daardoor leest hij als een eigen hoofdstuk in plaats van als losse kaarten.
   ========================================================================= */

.st-productblok {
    background: var(--st-wit);
    border-block: 1px solid var(--st-rand);
    padding-block: 48px;
    margin-bottom: 8px;
}

.st-productrij {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 991px) {
    .st-productrij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-tegels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
    .st-productrij,
    .st-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .st-productblok { padding-block: 32px; }
}

/* =========================================================================
   Zwevende header
   ========================================================================= */

.st-sticky {
    background: var(--st-wit);
    border-bottom: 1px solid var(--st-rand);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

/* De zwevende balk toont nu dezelfde onderdelen als de hoofdbalk (logo,
   assortimentsknop, zoekveld, acties) in plaats van het zesdelige
   afdelingenmenu — vandaar dezelfde flex-opzet en dezelfde gap als
   .st-header__rij. Alleen de padding is krapper: de balk mag klein blijven
   terwijl je scrolt. */
.st-sticky__rij {
    display: flex;
    align-items: center;
    gap: 28px;
    padding-block: 8px;
}

.st-sticky .st-logo__woord { font-size: 21px; }
.st-sticky .st-logo__merk { width: 34px; height: 34px; }
.st-sticky .st-wagen { padding: 8px 14px; }

/* =========================================================================
   Productgalerij
   Het ontwerp zet de foto op een rustig grijs vlak met ronde hoeken en de
   miniaturen eronder. De galerij zelf blijft die van Botble — inclusief het
   uitvergroten en de koppeling met de kleurkeuze.
   ========================================================================= */

.bb-product-gallery-images {
    background: var(--st-tegel);
    border-radius: 20px;
    overflow: hidden;
}

.bb-product-gallery-images a,
.bb-product-gallery-images .slick-slide > div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bb-product-gallery-images img {
    width: 100%;
    height: 520px;
    object-fit: contain;
    padding: 24px;
    mix-blend-mode: multiply;
}

.bb-product-gallery-thumbnails {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

/* De strook is 80 px breed (max-width van Shofy) en de slick-slider rekent de
   breedte van elk plaatje daaruit bij het opstarten uit — met een vaste 84 px
   op de afbeelding kwam er 64 x 84 uit: een uitgerekte laars. Daarom vult de
   afbeelding gewoon zijn vakje en is het vierkant 80 px. Vier pixel smaller
   dan het ontwerp, maar niet scheef. */
.tp-product-details-thumb-wrapper .bb-product-gallery-thumbnails .slick-slide > div,
.tp-product-details-thumb-wrapper .bb-product-gallery-thumbnails .slick-slide { width: 100%; }

/* Botble hangt hier een slick-slider onder. Alleen de losse miniatuur krijgt
   het kader — niet de .slick-list eromheen, want dan wordt de hele strook
   één vierkantje van 96px. */
.bb-product-gallery-thumbnails > div:not(.slick-list),
.bb-product-gallery-thumbnails .slick-slide > div {
    width: 96px;
    height: 96px;
    background: var(--st-tegel);
    border: 1px solid var(--st-rand-input);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
}

/* Het kader staat op de AFBEELDING zelf, niet op het omhulsel eromheen: welk
   element de slick-slider oplevert verschilt per aantal foto's. Gemeten met
   vier foto's kwam de miniatuur uit op 64 x 70 met object-fit: cover — een
   uitgerekte, bijgesneden laars in een blauwgrijs vlak. Het ontwerp wil
   84 x 84, ingepast, op de tegelkleur. */
.tp-product-details-thumb-wrapper .bb-product-gallery-thumbnails img {
    width: 100%;
    height: 80px;
    object-fit: contain;
    padding: 8px;
    border: 1px solid var(--st-rand);
    border-radius: 14px;
    background: var(--st-tegel);
    mix-blend-mode: multiply;
}

.tp-product-details-thumb-wrapper .bb-product-gallery-thumbnails .slick-current img,
.tp-product-details-thumb-wrapper .bb-product-gallery-thumbnails > div.is-active img {
    border: 2px solid var(--st-groen-diep);
    padding: 7px;
}

/* Het omhulsel krijgt geen eigen kader: anders staat er een lijn om een lijn. */
.bb-product-gallery-thumbnails > div:not(.slick-list),
.bb-product-gallery-thumbnails .slick-slide > div {
    width: auto;
    height: auto;
    background: none;
    border: 0;
}

/* De badge hoort op de foto, niet erboven.

   Shofy zet deze wrapper op position: sticky met top: 120px, zodat de foto op
   een lange pagina meeloopt. Wij zetten hem op relative — maar die top: 120px
   bleef staan, en bij relative betekent dat: schuif 120px naar beneden. Dat
   was het gat tussen het kruimelpad en de foto. Vandaar top: auto erbij. */
.tp-product-details-thumb-wrapper { position: relative; top: auto; }

.tp-product-details-thumb-wrapper > .tp-product-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tp-product-details-thumb-wrapper > .tp-product-badge span {
    display: inline-block;
    background: var(--st-actie);
    color: var(--st-op-actie);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .5px;
    padding: 6px 12px;
    border-radius: var(--st-radius-pill);
}

.bb-product-gallery-thumbnails .slick-list { width: 100%; }
.bb-product-gallery-thumbnails .slick-slide { margin-right: 14px; }

/* Eén foto betekent: niets te kiezen. Dan is de miniatuur eronder alleen maar
   een vierkantje dat om aandacht vraagt en niets doet.

   Twee gevallen, want Botble hangt er soms een slider onder en soms niet:
   losse divs onder de strook, of slick-slides binnen een .slick-list. Beide
   moeten er minstens twee zijn voordat de strook zin heeft. Gekloonde slides
   van slick tellen niet mee — dat zijn kopieën van dezelfde foto. */
.bb-product-gallery-thumbnails:not(:has(> div ~ div)):not(:has(.slick-slide:not(.slick-cloned) ~ .slick-slide:not(.slick-cloned))) {
    display: none;
}

@media (max-width: 767px) {
    .bb-product-gallery-images img { height: 340px; }
    .bb-product-gallery-thumbnails > div:not(.slick-list),
    .bb-product-gallery-thumbnails .slick-slide > div { width: 72px; height: 72px; }
}

/* =========================================================================
   Productpagina — correcties op de opmaak van Shofy
   ========================================================================= */

/* Shofy geeft .tp-product-quantity een vaste breedte van 100px; onze knoppen
   en het veld passen daar niet in en schoven over elkaar heen. */
.st-pd__acties .st-aantal.tp-product-quantity {
    display: flex;
    align-items: center;
    width: auto;
    height: 52px;
    flex-shrink: 0;
    margin: 0;
    padding: 0 6px;
    border: 1.5px solid var(--st-rand-input);
    border-radius: var(--st-radius-pill);
}

.st-pd__acties .st-aantal > * { flex-shrink: 0; }
.st-pd__acties .st-aantal .st-aantal__knop { width: 36px; height: 36px; }

/* De voorraadmelding van Botble staat al in het vertrouwensblok eronder,
   in een hele zin. Twee keer hetzelfde boven elkaar helpt niemand. */
.st-pd__formulier .tp-product-details-inventory,
.st-pd__formulier .number-items-available,
.st-pd__formulier .bb-product-availability { display: none; }

/* --- maatkeuze --------------------------------------------------------

   Botble bouwt dit als: li > label > (radio + span met de tekst). De radio
   blijft onzichtbaar maar bedienbaar; de span is de pil die je ziet.

   De selectors hieronder volgen de vorm van die van Botble, met onze eigen
   klasse ervoor. Dat is bewust: hun regels tellen zes klassen, en een korter
   geschreven variant verliest het dan — per eigenschap repareren werkt hier
   niet.

   De randkleur van de gekozen maat komt overigens uit --primary-color, een
   thema-instelling. Die staat op ons groen; verandert die ooit, dan verandert
   dit vanzelf mee.
   --------------------------------------------------------------------- */

/* Botble zet er zelf "Maat:" boven; onze eigen kop staat er al. */
/* Botble zet boven elke rij al "Kleur:" en "Maat:". Die stonden op
   display:none omdat het thema er zelf één kop "Kies je maat" boven zette —
   maar met twee attributen klopt die kop niet meer: hij stond boven de
   kleuren. Nu tonen we die van Botble, in de vorm van het ontwerp. */
.st-pd__formulier .bb-product-attribute-swatch-title {
    display: block;
    margin: 16px 0 8px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--st-tekst);
}

.st-pd__formulier .bb-product-attribute-swatch-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
}

/* Botble geeft item en label samen 30px eigen ruimte; daardoor dreven de
   pillen uit elkaar en was het klikvlak breder dan wat je ziet. */
.st-pd__formulier .bb-product-attribute-swatch-list .bb-product-attribute-swatch-item {
    margin: 0;
    padding: 0;
}

.st-pd__formulier .bb-product-attribute-swatch-list .bb-product-attribute-swatch-item label {
    margin: 0;
    padding: 0;
    display: block;
    cursor: pointer;
}

.st-pd__formulier .bb-product-attribute-swatch-list .bb-product-attribute-swatch-item input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

/* De pil zelf. */
/* Twaalf maten horen op één rij te passen, zoals in het ontwerp. Met 72 px
   breed en 44 px hoog pasten er zes en werd het twee rijen van kolossen. */
.st-pd__formulier .bb-product-attribute-swatch-list.text-swatch {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(38px, 1fr));
    gap: 6px;
}

.st-pd__formulier .bb-product-attribute-swatch-list.text-swatch li .bb-product-attribute-text-display {
    display: grid;
    place-items: center;
    min-width: 0;
    height: 38px;
    padding: 0 6px;
    border: 1px solid var(--st-rand-input);
    border-radius: 10px;
    background: var(--st-wit);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--st-tekst);
    transition: border-color .15s ease, background .15s ease;
}

.st-pd__formulier .bb-product-attribute-swatch-list.text-swatch li:hover .bb-product-attribute-text-display {
    border-color: var(--st-groen-rand-sec);
}

/* De gekozen maat: gevuld, zoals in het ontwerp. Stond als mintvlak met een
   terracotta kader — terracotta is de kleur van de bestelknop, en die moet op
   deze pagina de enige zijn die zo hard roept. */
.st-pd__formulier .bb-product-attribute-swatch-list.text-swatch li:not(.disabled) input[type="radio"]:checked ~ .bb-product-attribute-text-display,
.st-pd__formulier .bb-product-attribute-swatch-list.text-swatch li:not(.disabled) input[type="checkbox"]:checked ~ .bb-product-attribute-text-display {
    border: 1.5px solid var(--st-groen-diep);
    background: var(--st-groen-diep);
    color: var(--st-wit);
    font-weight: 600;
}

/* Het witte vinkje op een donker driehoekje dat Botble in de hoek plakt: op
   onze pil leest dat als een vlekje, terwijl rand en vulling het al zeggen. */
.st-pd__formulier .bb-product-attribute-swatch-list.text-swatch li:not(.disabled) input[type="radio"]:checked ~ .bb-product-attribute-text-display::after,
.st-pd__formulier .bb-product-attribute-swatch-list.text-swatch li:not(.disabled) input[type="radio"]:checked ~ .bb-product-attribute-text-display::before,
.st-pd__formulier .bb-product-attribute-swatch-list.text-swatch li:not(.disabled) input[type="checkbox"]:checked ~ .bb-product-attribute-text-display::after,
.st-pd__formulier .bb-product-attribute-swatch-list.text-swatch li:not(.disabled) input[type="checkbox"]:checked ~ .bb-product-attribute-text-display::before {
    content: none;
}

/* Toetsenbordgebruikers moeten zien waar ze zijn. */
.st-pd__formulier label:has(input:focus-visible) .bb-product-attribute-text-display {
    box-shadow: 0 0 0 3px rgba(46, 158, 68, .22);
}

/* Uitverkochte maat: doorgehaald, verder rustig. */
.st-pd__formulier .bb-product-attribute-swatch-item.disabled .bb-product-attribute-text-display {
    color: var(--st-tekst-zwak);
    background: var(--st-tegel);
    border-color: var(--st-rand);
    text-decoration: line-through;
    opacity: 1;
    cursor: not-allowed;
}

.st-pd__formulier .bb-product-attribute-swatch-item.disabled .bb-product-attribute-text-display::after,
.st-pd__formulier .bb-product-attribute-swatch-item.disabled .bb-product-attribute-text-display::before {
    content: none;
}
/* Hier stond een letterlijke kopie van 354 regels (de blokken hierboven, van
   de knoppen tot en met de zwevende balk). Verwijderd op 23-09: een wijziging
   in de eerste kopie deed niets, want de tweede stond erachter en won bij
   gelijke specificiteit. Nagerekend dat geen enkele selector uit het blok ook
   tussen de twee kopieën voorkwam, dus er verandert niets aan de volgorde. */

.st-logo__deel1 { color: var(--st-actie-tekst); }
.st-logo__deel2 { color: var(--st-tekst); }
/* Hier stond een tweede letterlijke kopie van 266 regels (galerij, zwevende
   balk, productdetail). Verwijderd op 24-09 — op regelgrenzen geknipt en met
   de accolades vooraf nagerekend, want de vorige keer nam ik een losse
   sluitaccolade mee en viel de halve stylesheet uit. */


.st-pd__acties .st-aantal > * { flex-shrink: 0; }
.st-pd__acties .st-aantal .st-aantal__knop { width: 36px; height: 36px; }

/* De voorraadmelding van Botble staat al in het vertrouwensblok eronder,
   in een hele zin. Twee keer hetzelfde boven elkaar helpt niemand. */
.st-pd__formulier .tp-product-details-inventory,
.st-pd__formulier .number-items-available,
.st-pd__formulier .bb-product-availability { display: none; }

/* --- maatkeuze --------------------------------------------------------
   Botble bouwt dit als: li > label > (radio + span met de tekst). De radio
   zelf blijft onzichtbaar maar wel bedienbaar; de span is de pil die je ziet. */

/* Botble zet er zelf "Maat:" boven; onze eigen kop staat er al. */
/* Botble zet boven elke rij al "Kleur:" en "Maat:". Die stonden op
   display:none omdat het thema er zelf één kop "Kies je maat" boven zette —
   maar met twee attributen klopt die kop niet meer: hij stond boven de
   kleuren. Nu tonen we die van Botble, in de vorm van het ontwerp. */
.st-pd__formulier .bb-product-attribute-swatch-title {
    display: block;
    margin: 16px 0 8px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--st-tekst);
}

.st-pd__formulier .bb-product-attribute-swatch-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
}

/* Botble geeft elk item nog eens 30px eigen ruimte; daardoor dreven de pillen
   uit elkaar en leek de rij rommelig. */
.st-pd__formulier .bb-product-attribute-swatch-list .bb-product-attribute-swatch-item {
    margin: 0;
    padding: 0;
}
/* Het label van Botble heeft 14px ruimte links en rechts. Daardoor was het
   klikvlak breder dan de pil en leken de maten ver uit elkaar te staan. */
.st-pd__formulier .bb-product-attribute-swatch-list .bb-product-attribute-swatch-item label {
    margin: 0;
    padding: 0;
    cursor: pointer;
    display: block;
}

.st-pd__formulier .bb-product-attribute-swatch-item input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.st-pd__formulier .bb-product-attribute-text-display {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    height: 44px;
    padding: 0 16px;
    border: 1.5px solid var(--st-rand-input);
    border-radius: 12px;
    background: var(--st-wit);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--st-tekst-sec);
    transition: border-color .15s ease, background .15s ease;
}

.st-pd__formulier label:hover .bb-product-attribute-text-display { border-color: var(--st-groen-rand-sec); }

.st-pd__formulier label:has(input:checked) .bb-product-attribute-text-display {
    border: 1.5px solid var(--st-groen-diep);
    background: var(--st-groen-diep);
    color: var(--st-wit);
    font-weight: 600;
}

/* Toetsenbordgebruikers moeten zien waar ze zijn. */
.st-pd__formulier label:has(input:focus-visible) .bb-product-attribute-text-display {
    box-shadow: 0 0 0 3px rgba(46, 158, 68, .22);
}

.st-pd__formulier label:has(input:disabled) .bb-product-attribute-text-display,
.st-pd__formulier .bb-product-attribute-swatch-item.disabled .bb-product-attribute-text-display {
    color: var(--st-tekst-zwak);
    background: var(--st-tegel);
    border-color: var(--st-rand);
    text-decoration: line-through;
    cursor: not-allowed;
}

/* Shofy zet de plus- en minknop absoluut ten opzichte van hun houder. In een
   flexrij vallen ze daardoor uit de stroom en klapt het aantalveld dicht tot
   58px, met de knoppen over het cijfer heen. */
.st-pd__acties .st-aantal .st-aantal__knop.tp-cart-minus,
.st-pd__acties .st-aantal .st-aantal__knop.tp-cart-plus {
    position: static;
    width: 36px;
    height: 36px;
    line-height: 1;
    transform: none;
}

.st-pd__acties .st-aantal .st-aantal__knop::after { content: none; }

/* De productfoto's hebben een witte achtergrond. mix-blend-mode laat die
   wegvallen tegen de grijze tegel, maar de slider zet een transform op de
   track en dat maakt een eigen stapelcontext — dan is er niets grijs meer om
   tegenaan te mengen. Daarom krijgt de dia zelf ook de tegelkleur. */
.bb-product-gallery-images .slick-list,
.bb-product-gallery-images .slick-track,
.bb-product-gallery-images .slick-slide,
.bb-product-gallery-images .slick-slide > div {
    background: var(--st-tegel);
}

.bb-product-gallery-thumbnails .slick-slide { background: transparent; }

/* =========================================================================
   Tabbladen onder het product
   Het ontwerp zet ze in één witte kaart met ronde hoeken, in plaats van los
   op de pagina.
   ========================================================================= */

.tp-product-details-bottom .tp-product-details-tab-nav {
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-radius: 20px;
    overflow: hidden;
}

.tp-product-details-bottom .nav-tabs {
    border-bottom: 1px solid var(--st-rand);
    padding-inline: 28px;
    gap: 4px;
    margin: 0;
}

.tp-product-details-bottom .nav-tabs .nav-link {
    border: 0;
    background: none;
    font-family: var(--st-font-kop);
    font-size: 15px;
    font-weight: 600;
    color: var(--st-tekst-zwak);
    padding: 18px 20px;
    border-bottom: 3px solid transparent;
    border-radius: 0;
}

.tp-product-details-bottom .nav-tabs .nav-link.active {
    color: var(--st-tekst);
    font-weight: 600;
    border-bottom-color: var(--st-actie);
}

.tp-product-details-bottom .tab-content { padding: 28px; }

.tp-product-details-bottom .tab-content p,
.tp-product-details-bottom .tab-content li {
    font-size: 15px;
    line-height: 1.7;
    color: var(--st-tekst-sec);
}

/* Specificatietabel: label links grijs, waarde rechts vet, dunne scheiding. */
.tp-product-details-bottom table td:first-child { color: var(--st-tekst-zwak); font-size: 14px; }
.tp-product-details-bottom table td:last-child { font-weight: 600; font-size: 14px; }
.tp-product-details-bottom table td { border-color: #efefe9; padding: 10px 0; }

/* Shofy laat het tabblad met een flinke bovenmarge beginnen; binnen een kaart
   is dat een gat. */
.tp-product-details-bottom .tab-content > .tab-pane > *:first-child { margin-top: 0; }
.tp-product-details-bottom .tab-content .tp-product-details-desc-wrapper,
.tp-product-details-bottom .tab-content [class*="pt-"],
.tp-product-details-bottom .tab-content [class*="mt-"] { padding-top: 0; margin-top: 0; }

/* =========================================================================
   Categoriepagina
   ========================================================================= */

.st-categoriepagina { padding-bottom: 8px; }

/* Introkop: tekst links, beeld met beloften rechts, verticaal gecentreerd. */
.st-cat-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    padding-block: 24px 0;
    margin-bottom: 26px;
}

.st-cat-kop__tekst {
    flex: 1 1 auto;
    min-width: 0;
    /* Geen vaste leesbreedte: de kaart rechts bepaalt al waar de tekst stopt.
       Met een cap van 620px bleef daar een gat van een paar honderd pixels
       tussen staan. */
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.st-cat-kop__tekst .st-kruimels__pad { margin-bottom: 2px; }

/* --- kaart met beeld en beloften --------------------------------------- */

.st-cat-kaart {
    width: 420px;
    flex-shrink: 0;
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-radius: var(--st-radius-kaart);
    overflow: hidden;
}

.st-cat-kaart__beeld {
    height: 172px;
    background: var(--st-tegel);
}

.st-cat-kaart__beeld img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.st-usp-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.st-usp-strip li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-align: center;
    padding: 16px 10px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--st-tekst);
}

.st-usp-strip li + li { border-left: 1px solid var(--st-rand); }
.st-usp-strip svg { color: var(--st-actie-tekst); flex-shrink: 0; }

/* Twee dingen die het rommelig maakten.

   1. Zonder balance breekt "Specialist in Stapp-sokken" af achter het
      koppelteken: "Stapp-" op de ene regel en "sokken" op de volgende.
      balance kiest het gelijkmatigste afbreekpunt, dus "Specialist in" /
      "Stapp-sokken".
   2. Heeft één cel maar één regel tekst, dan zakt zijn icoontje omlaag en
      staan de drie iconen niet meer op één lijn. Ruimte voor twee regels
      houdt ze gelijk. */
.st-usp-strip li span {
    text-wrap: balance;
    hyphens: none;
    min-height: 2.6em;
    display: flex;
    align-items: center;
}

/* Boven de strook een lijn zodra er een beeld boven staat. */
.st-cat-kaart__beeld + .st-usp-strip { border-top: 1px solid var(--st-rand); }

.st-cat-titel {
    font-family: var(--st-font-kop);
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -.7px;
    margin: 0 0 12px;
}

.st-cat-intro {
    max-width: 78ch;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--st-tekst-sec);
}

.st-cat-intro p:last-child { margin-bottom: 0; }

/* De uitgebreide tekst onder de producten, op een eigen vlak. */
.st-cat-bodem {
    background: var(--st-wit);
    border-top: 1px solid var(--st-rand);
    padding-block: 48px;
    margin-top: 40px;
}

.st-cat-bodem h2 {
    font-family: var(--st-font-kop);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.4px;
    margin: 0 0 14px;
}

.st-cat-bodem h3 { font-size: 18px; margin-top: 26px; }

/* --- filterkolom en productkolom --------------------------------------- */
/* Let op: .st-overzicht is de tweekolomsindeling van categorie- en zoekpagina's.
   De samenvattingskaart in de winkelwagen heet .st-wagensom. Die twee hebben
   ooit dezelfde naam gedeeld; de kaartregels (flex-direction: column) zetten
   toen de filterkolom bóven de producten. Hergebruik deze naam dus niet. */

.st-overzicht {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    padding-block: 24px 40px;
}

.st-overzicht__filters {
    width: 280px;
    flex-shrink: 0;
}

.st-overzicht__producten {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --- categorielijst: boven de filters, in dezelfde linkerkolom --------- */
/* Zelfde kaartstijl als de filterkolom hieronder (wit vlak, dunne rand),
   los ervan met een marge — het zijn twee aparte kaarten, geen doorlopend
   blok. Op mobiel doet .st-overzicht__filters al het werk (width: 100%,
   kolom wordt rij); deze kaart volgt daarin vanzelf mee, dus geen aparte
   mediaquery nodig. */
.st-catlijst {
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-radius: var(--st-radius-kaart);
    padding: 22px 20px;
    margin-bottom: 20px;
}

/* Zelfde typografie als de "Filteren"-kop van de filterkaart hiernaast
   (.st-filters__titel), zodat de twee kaarten in de kolom bij elkaar
   horen. */
.st-catlijst__titel {
    font-family: var(--st-font-kop);
    font-size: 17px;
    font-weight: 600;
    color: var(--st-tekst);
    margin: 0 0 10px;
    line-height: 1.3;
}

.st-catlijst__titel a { color: inherit; text-decoration: none; }
.st-catlijst__titel a:hover { color: var(--st-actie-tekst); }

.st-catlijst__lijst,
.st-catlijst__sub {
    list-style: none;
    margin: 0;
    padding: 0;
}

.st-catlijst__lijst > li + li { margin-top: 1px; }

.st-catlijst__lijst a,
.st-catlijst__sub a {
    display: block;
    padding: 7px 8px;
    border-radius: var(--st-radius-klein);
    font-size: 14px;
    line-height: 1.3;
    color: var(--st-tekst-sec);
    text-decoration: none;
}

.st-catlijst__lijst a:hover,
.st-catlijst__sub a:hover {
    color: var(--st-tekst);
    background: var(--st-bodem);
}

/* Actief item in de actiekleur — dezelfde tekstvariant als elders (bv.
   .st-filters__wissen, .st-kruimels__pad a:hover), niet de knopkleur zelf. */
.st-catlijst__lijst a.is-actief,
.st-catlijst__sub a.is-actief {
    background: var(--st-actie-tint);
    color: var(--st-actie-tekst);
    font-weight: 600;
}

/* Derde niveau: 12px inspringen, zoals gevraagd. */
.st-catlijst__sub {
    margin: 1px 0 4px 12px;
}

/* Ingeklapte vorm (25 september, avond): "Alle categorieën", het pad naar
   de huidige categorie (elke stap 14px verder ingesprongen via --st-diepte)
   en daaronder alleen de kinderen. De kinderlijst springt één stap verder
   in dan de laatste padstap. */
.st-catlijst__alle {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 8px 7px 4px;
    border-radius: var(--st-radius-klein);
    font-size: 14px;
    line-height: 1.3;
    color: var(--st-tekst-sec);
    text-decoration: none;
}

.st-catlijst__alle:hover { color: var(--st-tekst); background: var(--st-bodem); }

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

.st-catlijst__stap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-left: calc(var(--st-diepte, 0) * 14px);
}

.st-catlijst__stap > a,
.st-catlijst__hier {
    flex: 1 1 auto;
    display: block;
    padding: 7px 8px;
    border-radius: var(--st-radius-klein);
    font-size: 14px;
    line-height: 1.3;
    color: var(--st-tekst);
    font-weight: 600;
    text-decoration: none;
}

.st-catlijst__stap > a:hover { color: var(--st-tekst); background: var(--st-bodem); }

.st-catlijst__hier {
    background: var(--st-actie-tint);
    color: var(--st-actie-tekst);
    font-weight: 600;
}

.st-catlijst__klap {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: var(--st-radius-klein);
    background: transparent;
    color: var(--st-tekst-sec);
    cursor: pointer;
}

.st-catlijst__klap:hover { color: var(--st-tekst); background: var(--st-bodem); }
.st-catlijst__klap svg + svg { display: none; }
.st-catlijst__klap[aria-expanded="false"] svg { display: none; }
.st-catlijst__klap[aria-expanded="false"] svg + svg { display: block; }

.st-catlijst__lijst {
    padding-left: calc(var(--st-diepte, 0) * 14px);
}

.st-catlijst__lijst[hidden] { display: none; }

/* Op "alle producten" is "Alle categorieën" zelf de huidige stap. */
.st-catlijst__alle-hier { display: block; margin-bottom: 1px; }

/* De filterkolom is één kaart, niet een stapel losse blokken. */
.st-filters .bb-product-form-filter {
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-radius: var(--st-radius-kaart);
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.st-filters .st-filters__kop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.st-filters__titel {
    font-family: var(--st-font-kop);
    font-size: 17px;
    font-weight: 600;
    color: var(--st-tekst);
    /* Dit was een span en is nu een h2, zodat de koppenstructuur klopt. Een
       h2 komt met eigen marges; die horen hier niet, het blok regelt zijn
       eigen ruimte. */
    margin: 0;
    line-height: 1.3;
}

.st-filters__wissen {
    font-size: 13px;
    font-weight: 600;
    color: var(--st-actie-tekst);
    text-decoration: none;
}

.st-filters__wissen:hover { text-decoration: underline; }

/* Binnen de kaart scheiden dunne lijnen de onderdelen, geen losse kaders. */
.st-filters .bb-product-filter {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--st-rand);
    border-radius: 0;
    padding: 22px 0 0;
    margin: 0;
}

.st-filters .bb-product-filter .tp-shop-widget-title,
.st-filters .bb-product-filter h3,
.st-filters .bb-product-filter h4 {
    font-family: var(--st-font-kop);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--st-tekst);
    margin: 0 0 12px;
    padding: 0;
    border: 0;
}

.st-filters label { font-size: 14px; color: var(--st-tekst-sec); }

/* --- balk boven de producten ------------------------------------------ */

.st-sorteerbalk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-radius: var(--st-radius-klein);
    padding: 12px 18px;
    margin: 0;
}

.st-sorteerbalk__aantal {
    margin: 0;
    font-size: 14px;
    color: var(--st-tekst-sec);
}

.st-sorteerbalk__rechts {
    display: flex;
    align-items: center;
    gap: 10px;
}

.st-sorteerbalk__label {
    margin: 0;
    font-size: 14px;
    color: var(--st-tekst-sec);
    white-space: nowrap;
}

.st-sorteerbalk__filterknop {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--st-wit);
    border: 1px solid var(--st-rand-input);
    border-radius: var(--st-radius-pill);
    padding: 8px 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--st-tekst);
    cursor: pointer;
}

/* --- productraster ----------------------------------------------------- */

.st-productraster {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

/* Het adviesblok loopt over de volle breedte van het raster. */
.st-productraster > .st-blengi { grid-column: 1 / -1; }

.st-geen-producten {
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-radius: var(--st-radius-klein);
    padding: 28px;
    font-size: 15px;
    color: var(--st-tekst-sec);
}

.st-paginering {
    display: flex;
    justify-content: center;
    padding-top: 12px;
}

.st-paginering .pagination {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.st-paginering .page-item .pages-number {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--st-rand);
    border-radius: var(--st-radius-klein);
    background: var(--st-wit);
    color: var(--st-tekst);
    font-weight: 600;
    text-decoration: none;
}

.st-paginering .page-item.active .pages-number,
.st-paginering .page-item .pages-number:hover {
    background: var(--st-actie);
    border-color: var(--st-actie);
    color: var(--st-op-actie);
}

.st-paginering .page-item.disabled .pages-number { opacity: .4; }

/* --- tekst onder de producten ------------------------------------------ */

.st-cat-bodem__rij {
    display: flex;
    align-items: flex-start;
    gap: 48px;
}

/* De tekst vult de ruimte tot aan de hulpkaart; die kaart staat tegen de
   rechter paginamarge en lijnt zo uit met het productraster erboven. Een
   extra leesbreedte-limiet gaf alleen een gat in het midden. */
.st-cat-bodem__tekst {
    flex: 1 1 auto;
    min-width: 0;
}

/* De eerste kop moet gelijk liggen met de bovenkant van de kaart ernaast;
   de standaard bovenmarge van een H2 in lopende tekst duwt hem anders omlaag. */
.st-cat-bodem__tekst > *:first-child { margin-top: 0; }

.st-cat-bodem__hulp {
    width: 330px;
    flex-shrink: 0;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.st-cat-bodem__hulp > * { width: 100%; }

@media (max-width: 1199px) {
    .st-productraster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
    /* --- witruimte op mobiel -------------------------------------------
       De maatvoering hierboven is voor een scherm van 1400px: 48px
       sectiepadding, 40px marges, 32px kolomruimte. Op een telefoon van
       390px is diezelfde 48px ruim een achtste van de schermbreedte, en
       tussen de bullets en de filterbalk stond daardoor bijna honderd
       pixels niets. Hieronder een krappere schaal, alleen voor mobiel.

       gap: 0 en niet 20: .st-overzicht heeft twee kinderen, en het eerste —
       het omhulsel van de filterlade — is nul pixels hoog omdat het paneel
       erbinnen vast gepositioneerd is. Die 20px kwam dus volledig ten goede
       aan iets wat je niet ziet. Het omhulsel zelf mag níet weg met
       display: none; dan verdwijnt de lade achter de knop Filteren mee. */
    .st-overzicht { flex-direction: column; gap: 0; padding-block: 14px 22px; }
    .st-overzicht__filters { width: 100%; }
    .st-cat-bodem { margin-top: 20px; padding-block: 28px; }
    .st-cat-bodem__rij { flex-direction: column; gap: 28px; }
    .st-cat-bodem__hulp { width: 100%; margin-left: 0; }
    .st-cat-bodem__tekst { max-width: none; }

    /* Op smal scherm de kop onder elkaar, en het categoriebeeld eruit: dat
       kost een half scherm hoogte terwijl de bezoeker naar producten zoekt.
       De beloftestrook blijft, over de volle breedte. */
    .st-cat-kop {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        padding-block: 16px 0;
        /* De beloftekaart valt hieronder weg, dus dit is de afstand tussen de
           laatste bullet en de filterbalk. Daar komt de padding van
           .st-overzicht nog bovenop; samen was dat bijna honderd pixels. */
        margin-bottom: 8px;
    }

    .st-cat-kop__tekst { max-width: none; }
    .st-cat-kaart { width: 100%; }
    .st-cat-kaart__beeld { display: none; }
    .st-cat-titel { font-size: 26px; }

    /* Op mobiel valt de hele beloftekaart weg. Wie op zijn telefoon een
       categorie opent is aan het kiezen, en dan is elke regel boven de
       producten er één te veel. De beloften staan al in de bovenbalk, op de
       productpagina en in de voettekst. */
    .st-cat-kaart { display: none; }
}

@media (max-width: 575px) {
    .st-productraster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .st-sorteerbalk { padding: 10px 14px; }
}

/* Actieve filters als groene pillen, in de filterkaart. */
.st-kf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }

.st-kf-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--st-groen-tint);
    border: 1px solid var(--st-groen-rand);
    border-radius: var(--st-radius-pill);
    padding: 5px 11px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--st-tekst);
    cursor: pointer;
}

.st-kf-chip:hover { background: var(--st-groen-licht); border-color: var(--st-groen-rand-sec); }
.st-kf__aantal { color: var(--st-tekst-zwak); font-size: 12.5px; margin-left: 2px; }

.st-filters__chips:empty { display: none; }

.st-filters__chips .bb-product-filter-result {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.st-filters__chips a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--st-groen-tint);
    border: 1px solid var(--st-groen-rand);
    border-radius: var(--st-radius-pill);
    padding: 5px 11px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--st-tekst);
    text-decoration: none;
}

.st-filters__chips a:hover {
    background: var(--st-groen-licht);
    border-color: var(--st-groen-rand-sec);
}

.st-filters__chips .bb-product-filter-clear-all {
    background: transparent;
    border-color: transparent;
    color: var(--st-tekst-sec-2);
}

.st-sorteerbalk__aantal strong { color: var(--st-tekst); font-weight: 600; }

/* --- hulpkaart naast de bodemtekst ------------------------------------- */

.st-hulpkaart {
    background: var(--st-groen-tint);
    border: 1px solid var(--st-groen-rand);
    border-radius: var(--st-radius-kaart);
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.st-hulpkaart h2 {
    font-family: var(--st-font-kop);
    font-size: 17px;
    font-weight: 600;
    color: var(--st-tekst);
    margin: 0;
}

.st-hulpkaart ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.st-hulpkaart li {
    background: var(--st-wit);
    border: 1px solid var(--st-groen-rand);
    border-radius: var(--st-radius-klein);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.st-hulpkaart li strong {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--st-tekst);
}

.st-hulpkaart li span { font-size: 13px; color: var(--st-tekst-sec); }
.st-hulpkaart li a { color: var(--st-actie-tekst); font-weight: 600; }

.st-hulpkaart .st-knop { justify-content: center; font-size: 14px; padding: 13px 20px; }

/* De kleine lettertjes onderaan een categorietekst (medisch voorbehoud). */
.st-cat-bodem__tekst small {
    display: block;
    margin-top: 18px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--st-tekst-zwak);
}

/* =========================================================================
   Offerteaanvraag
   ========================================================================= */

.st-offerte {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    padding-block: 24px 56px;
}

.st-offerte__formulier {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.st-offerte__zijkant {
    width: 360px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.st-offerte__kaart {
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-radius: var(--st-radius-kaart);
    padding: 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.st-offerte__kaart h2 {
    font-family: var(--st-font-kop);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.3px;
    margin: 0;
}

.st-offerte__sub {
    margin: -6px 0 0;
    font-size: 14px;
    color: var(--st-tekst-sec);
}

/* --- de regels --------------------------------------------------------- */

.st-offerte__kolomkoppen,
.st-offerte__regel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px 150px 42px;
    gap: 12px;
    align-items: center;
}

.st-offerte__kolomkoppen {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--st-tekst-sec-2);
    padding-inline: 2px;
}

.st-offerte__regels {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.st-offerte__weg {
    width: 42px;
    height: 42px;
    border: 1px solid var(--st-rand-input);
    border-radius: var(--st-radius-klein);
    background: var(--st-wit);
    color: var(--st-tekst-sec-2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.st-offerte__weg:hover:not(:disabled) { color: #b42318; border-color: #f0c4c0; }
.st-offerte__weg:disabled { opacity: .35; cursor: not-allowed; }

.st-offerte__toevoegen {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--st-wit);
    border: 1px dashed var(--st-groen-rand-sec);
    border-radius: var(--st-radius-pill);
    padding: 10px 18px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--st-tekst);
    cursor: pointer;
}

.st-offerte__toevoegen:hover { background: var(--st-groen-tint); }

/* --- datum en gegevens ------------------------------------------------- */

.st-offerte__label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--st-tekst);
}

.st-offerte__datumrij {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.st-offerte__datumrij .st-input { width: 240px; }

.st-offerte__vinkje {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: var(--st-tekst-sec);
    cursor: pointer;
}

.st-offerte__velden {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.st-offerte__toelichting { min-height: 110px; border-radius: var(--st-radius-klein); resize: vertical; }

.st-offerte__versturen { width: 100%; padding-block: 16px; font-size: 16px; }

.st-offerte__klein {
    margin: 0;
    text-align: center;
    font-size: 13px;
    color: var(--st-tekst-zwak);
}

/* Het lokvinkveld hoort onzichtbaar te zijn, maar niet display:none — dan
   vullen sommige bots hem juist wél in. */
.st-offerte__lokvink {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- zijkant ----------------------------------------------------------- */

.st-offerte__stappen {
    list-style: none;
    counter-reset: stap;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.st-offerte__stappen li {
    counter-increment: stap;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: start;
}

.st-offerte__stappen li::before {
    content: counter(stap);
    grid-row: 1 / 3;
    width: 28px;
    height: 28px;
    border-radius: var(--st-radius-pill);
    background: var(--st-groen-tint);
    color: var(--st-tekst);
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.st-offerte__stappen strong { font-size: 14.5px; color: var(--st-tekst); }
.st-offerte__stappen span { font-size: 13.5px; color: var(--st-tekst-sec); line-height: 1.5; }

.st-offerte__overleg {
    background: var(--st-groen-tint);
    border: 1px solid var(--st-groen-rand);
    border-radius: var(--st-radius-kaart);
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.st-offerte__overleg h2 {
    font-family: var(--st-font-kop);
    font-size: 17px;
    font-weight: 600;
    color: var(--st-tekst);
    margin: 0;
}

.st-offerte__overleg p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--st-tekst-sec); }

.st-offerte__overleg a {
    font-family: var(--st-font-kop);
    font-size: 16px;
    font-weight: 600;
    color: var(--st-tekst);
    text-decoration: none;
}

.st-offerte__belofte {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding-inline: 4px;
    font-size: 13.5px;
    color: var(--st-tekst-sec);
}

.st-offerte__belofte .st-vink { color: var(--st-groen-tekst); flex-shrink: 0; }

@media (max-width: 991px) {
    .st-offerte { flex-direction: column; gap: 20px; padding-block: 16px 40px; }
    .st-offerte__zijkant { width: 100%; }
    .st-offerte__velden { grid-template-columns: minmax(0, 1fr); }

    .st-offerte__kolomkoppen { display: none; }

    .st-offerte__regel {
        grid-template-columns: minmax(0, 1fr) 42px;
        grid-template-areas: "soort weg" "maat maat" "aantal aantal";
        gap: 10px;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--st-rand);
    }

    .st-offerte__regel > select:first-of-type { grid-area: soort; }
    .st-offerte__regel > select:nth-of-type(2) { grid-area: maat; }
    .st-offerte__regel > input { grid-area: aantal; }
    .st-offerte__weg { grid-area: weg; }
}

/* =========================================================================
   Maatkeuze en vaste bestelbalk
   ========================================================================= */

/* Het formulier wordt een flexkolom, zodat de hulplink met order ná de
   maatkeuze kan staan zonder hem in de HTML te verplaatsen — daar hoort hij
   bij de maten. */
.st-pd__formulier {
    display: flex;
    flex-direction: column;
}

/* Alles houdt zijn plek (3); alleen de maatkeuze en de hulplink worden naar
   voren gehaald, in die volgorde. */
.st-pd__formulier > * { order: 3; }
.st-pd__formulier > .product-attributes { order: 1; }

.st-pd__maatkop {
    display: flex;
    justify-content: flex-end;
    order: 2;
    margin: 6px 0 0;
}

.st-pd__maatlabel {
    font-family: var(--st-font-kop);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--st-tekst);
}

.st-pd__maattabel {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--st-actie-tekst);
    text-decoration: none;
}

.st-pd__maattabel:hover { text-decoration: underline; }



/* --- de balk zelf ------------------------------------------------------- */

.st-bestelbalk { display: none; }

@media (max-width: 991px) {
    .st-bestelbalk {
        position: fixed;
        left: 0;
        right: 0;
        /* Shofy heeft op mobiel al een vaste balk onderaan (tp-mobile-menu).
           Onze bestelbalk hoort daarboven, niet eroverheen. agrowinkel.js
           meet die balk en zet de hoogte in --st-menubalk; 79px is alleen de
           waarde voor de eerste frame, vóór de meting. */
        bottom: var(--st-menubalk, 79px);
        z-index: 1030;
        display: flex;
        align-items: center;
        gap: 14px;
        background: var(--st-wit);
        border-top: 1px solid var(--st-rand);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .07);
        padding: 12px 16px;
    }

    .st-bestelbalk[hidden] { display: none; }

    /* Staat de balk van Shofy uit, dan zakt de onze gewoon naar beneden. */
    body:not(:has(.tp-mobile-menu)) .st-bestelbalk {
        bottom: 0;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }

    .st-bestelbalk__info {
        display: flex;
        flex-direction: column;
        gap: 1px;
        flex-shrink: 0;
        min-width: 0;
    }

    .st-bestelbalk__maat {
        font-size: 12px;
        color: var(--st-tekst-sec-2);
        white-space: nowrap;
    }

    .st-bestelbalk__maat:empty { display: none; }

    .st-bestelbalk__prijs {
        font-family: var(--st-font-kop);
        font-size: 19px;
        font-weight: 700;
        color: var(--st-tekst);
        white-space: nowrap;
    }

    .st-bestelbalk__knop {
        flex-grow: 1;
        height: 50px;
        font-size: 15.5px;
    }

    /* De pagina krijgt onderaan ruimte voor beide balken samen, zodat er niets
       achter valt. */
    body.single-product {
        padding-bottom: calc(160px + max(env(safe-area-inset-bottom, 0px), var(--st-browserbalk, 0px)));
    }
}

/* -------------------------------------------------------------------------
   Ruimte voor de zwevende adresbalk van de telefoonbrowser
   -------------------------------------------------------------------------
   Safari en Chrome op de telefoon klappen hun adresbalk tijdens het scrollen
   in tot een zwevend pilletje dat over de pagina heen ligt. Een balk die met
   position: fixed op bottom: 0 staat, verdwijnt daar deels achter — bij ons
   vielen de labels van het ondermenu (Winkel, Zoeken, ... Menu) precies weg.

   env(safe-area-inset-bottom) is de ruimte die de browser daar zelf voor
   opgeeft. Op een toestel zonder zo'n zwevende balk is die waarde nul, dus
   verandert er niets aan de bestaande weergave. */

@media (max-width: 991px) {
    /* --st-browserbalk wordt door agrowinkel.js gemeten: het verschil tussen
       de uitgerekende en de zichtbare viewport, oftewel precies de hoogte die
       de zwevende browserbalk inneemt. Op een toestel zonder zo'n balk is die
       nul en blijft alleen de safe area over. */
    /* De balk blijft op de onderrand plakken en krijgt de ruimte voor de
       browserbalk als padding erbínnen.

       Twee andere aanpakken zijn geprobeerd en werkten niet:

       - de balk optillen met bottom: dan zweeft hij, en scrollt de pagina
         zichtbaar onder hem door;
       - een vaste ondergrens van 58px voor iOS: die telde op bij de safe area
         van 34px, waardoor de balk ruim honderd pixels te hoog werd.

       Zo blijft de achtergrond doorlopen tot de onderrand — er valt niets
       achter weg en er is niets doorheen te zien — terwijl de labels precies
       boven de browserbalk uitkomen. De hoogte daarvan wordt gemeten in
       agrowinkel.js, nu ook tijdens het scrollen, want dát is het moment
       waarop Safari zijn balk in- en uitklapt. */
    .tp-mobile-menu {
        bottom: 0;
        padding-bottom: calc(8px + max(env(safe-area-inset-bottom, 0px), var(--st-browserbalk, 0px)));
    }

    /* Onze bestelbalk staat bovenop die van Shofy en schuift dus mee omhoog.

       Hier stond eerder --st-mobiele-balk + de ruimte voor de browserbalk
       erbij opgeteld. Die variabele werd door niets gezet, dus viel hij altijd
       terug op 79px, en de optelsom kwam er per ongeluk ongeveer op uit. Nu
       leest hij de werkelijke hoogte van de menubalk — daar zit de ruimte voor
       de browserbalk al in, want die staat als padding ín die balk. */
    .st-bestelbalk {
        bottom: var(--st-menubalk, 79px);
    }

    /* Zonder deze ruimte blijft de laatste rij van de pagina permanent achter
       de vaste balk hangen, ook als je helemaal naar beneden scrollt. */
    body:has(.tp-mobile-menu):not(.single-product) {
        padding-bottom: calc(79px + max(env(safe-area-inset-bottom, 0px), var(--st-browserbalk, 0px)));
    }
}

/* Botble plakt in de hoek van de gekozen maat een wit vinkje op een donker
   driehoekje. Op onze pil leest dat als een vlekje, terwijl de groene rand en
   de vulling het al zeggen.

   De selector volgt die van Botble op de voet — hun regel telt zes klassen, en
   een kortere variant verloor het daarvan. Vandaar deze lengte. */
.st-pd__formulier .bb-product-attribute-swatch-list.text-swatch li:not(.disabled) input[type="radio"]:checked ~ .bb-product-attribute-text-display::after,
.st-pd__formulier .bb-product-attribute-swatch-list.text-swatch li:not(.disabled) input[type="radio"]:checked ~ .bb-product-attribute-text-display::before,
.st-pd__formulier .bb-product-attribute-swatch-list.text-swatch li:not(.disabled) input[type="checkbox"]:checked ~ .bb-product-attribute-text-display::after,
.st-pd__formulier .bb-product-attribute-swatch-list.text-swatch li:not(.disabled) input[type="checkbox"]:checked ~ .bb-product-attribute-text-display::before {
    content: none;
}

/* Bij een uitverkochte maat houden we de doorhaling van de tekst; de gestippelde
   streep van Botble erbovenop is er één te veel. */
.st-pd__formulier .bb-product-attribute-swatch-item.disabled .bb-product-attribute-text-display::after,
.st-pd__formulier .bb-product-attribute-swatch-item.disabled .bb-product-attribute-text-display::before {
    content: none;
}

/* Shofy schuift bij hover een zwart streepje onder een tabblad. Dat botst met
   onze eigen groene streep onder het actieve tabblad: je zag er dan twee, en
   de zwarte leek de actieve. */
.tp-product-details-bottom .nav-tabs .nav-link::after,
.tp-product-details-bottom .nav-tabs .nav-link::before { content: none; }

.tp-product-details-bottom .nav-tabs .nav-link:hover { color: var(--st-tekst); }

/* =========================================================================
   Specificaties naast de beschrijving
   ========================================================================= */

.tp-product-details-bottom .tp-product-details-desc-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 48px;
}

.tp-product-details-bottom .tp-product-details-desc-wrapper > .ck-content {
    flex: 1 1 auto;
    min-width: 0;
}

/* De specificaties stonden als smalle kolom naast de beschrijving; in het
   ontwerp zijn ze een blok over de volle breedte, met om en om een wit vlak. */
.st-specs { width: 100%; margin: 0; }

/* Een kopje per groep (ALGEMEEN, VEILIGHEID), zoals in het ontwerp. Zonder die
   kopjes staat "Klasse S5" tussen "Merk" en "Materiaal", en dan zegt het
   minder. */
.st-specs__groep {
    margin: 18px 0 2px;
    font: 600 12px var(--st-font-body);
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--st-tekst-zwak);
}

.st-specs__groep:first-child { margin-top: 0; }

.st-specs__lijst { margin: 0; display: flex; flex-direction: column; }

.st-specs__regel {
    display: grid;
    grid-template-columns: 42% minmax(0, 1fr);
    align-items: baseline;
    gap: 0 14px;
    padding: 10px 14px;
    border-radius: 10px;
}

/* Om en om een wit vlak: rustiger dan een lijn onder elke regel, en je volgt
   met je oog makkelijker welke waarde bij welk kenmerk hoort. */
.st-specs__regel:nth-child(odd) { background: var(--st-wit); }

.st-specs dt {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--st-tekst-sec);
}

.st-specs dd {
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--st-tekst);
    /* Links uitlijnen op één kolom: rechts uitgelijnd zweeft elke waarde op
       een andere plek en moet je oog heen en weer. */
    text-align: left;
}

@media (max-width: 991px) {
    .tp-product-details-bottom .tp-product-details-desc-wrapper {
        flex-direction: column;
        gap: 24px;
    }

    .st-specs { width: 100%; }
}


/* Botble zet met een ::after nóg een pijltje in de categorieënknop; die van
   ons staat al in de opmaak en heeft de juiste kleur. Er stonden er dus twee. */
.st-nav__categorieknop::after,
.st-nav__categorieknop::before { content: none; }

/* =========================================================================
   Veelgestelde vragen onder het product
   ========================================================================= */

/* Het vierde tabblad is overbodig: de vragen staan er als sectie onder. */
#nav-faq-tab { display: none; }

.st-faq { padding-block: 8px 48px; }

.st-faq__titel {
    font-family: var(--st-font-kop);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.4px;
    margin: 0 0 18px;
}

.st-faq__lijst {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.st-faq__item {
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-radius: 14px;
    padding: 20px 22px;
}

.st-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--st-font-kop);
    font-size: 15.5px;
    font-weight: 600;
    color: var(--st-tekst);
    cursor: pointer;
    list-style: none;
}

.st-faq__item summary::-webkit-details-marker { display: none; }

/* Een streepje bij open, een plusje bij dicht — zonder extra opmaak in de HTML. */
.st-faq__item summary::after {
    content: "+";
    flex-shrink: 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    color: var(--st-actie-tekst);
}

.st-faq__item[open] summary::after { content: "\2013"; }

.st-faq__antwoord {
    margin-top: 8px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--st-tekst-sec);
    max-width: 90ch;
}

@media (max-width: 575px) {
    .st-faq__titel { font-size: 20px; }
    .st-faq__item { padding: 16px 18px; }
}


/* =========================================================================
   Zeer smalle schermen (vanaf 320px)
   ========================================================================= */

@media (max-width: 359px) {
    /* Logo en winkelwagen passen samen niet meer op één regel. */
    .st-logo__woord { font-size: 17px; }
    .st-logo__merk { width: 30px; height: 30px; }
    .st-logo { gap: 7px; }
    .st-header__rij { gap: 10px; }
    .st-wagen { padding: 8px 11px; }
    .st-wagen__bedrag { font-size: 13px; }
}

@media (max-width: 575px) {
    /* De sorteerbalk hield zijn breedte vast en duwde daarmee de hele
       productkolom breder dan het scherm. */
    .st-sorteerbalk {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .st-sorteerbalk__aantal { flex: 1 1 100%; }

    .st-sorteerbalk__rechts {
        flex: 1 1 100%;
        justify-content: space-between;
        min-width: 0;
    }

    /* "Sorteer op:" is op een telefoon overbodig: het keuzevak noemt zelf al
       waarop gesorteerd wordt, en het label kostte de ruimte die het vak nodig
       had. */
    .st-sorteerbalk__label { display: none; }

    .st-sorteerbalk__keuze { min-width: 0; flex: 1 1 auto; }
    .st-sorteerbalk__keuze select { max-width: 100%; width: 100%; }

    .st-overzicht,
    .st-overzicht__producten,
    .st-overzicht__filters { min-width: 0; max-width: 100%; }
}

/* =========================================================================
   Prijs zonder btw
   ========================================================================= */

/* Klein en grijs onder de prijs: wie erom vraagt vindt hem, wie hem niet
   nodig heeft leest eroverheen. */
/* Prijs links, de btw-schakelaar rechts op dezelfde regel. */
.st-koopblok__prijsrij {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.st-koopblok__excl {
    margin: 4px 0 0;
    font-size: 13.5px;
    color: var(--st-tekst-zwak);
}

.st-koopblok__excl span { font-weight: 400; }

.st-pd__exbtw {
    margin: -10px 0 20px;
    font-size: 13.5px;
    color: var(--st-tekst-sec-2);
    font-variant-numeric: tabular-nums;
}

.st-pd__exbtw span { font-weight: 400; }

/* =========================================================================
   Blog — overzicht
   ========================================================================= */

.st-blogoverzicht { padding-block: 8px 64px; }

.st-blogkop {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-block: 16px 0;
    margin-bottom: 20px;
}

.st-blogkop__titel {
    font-family: var(--st-font-kop);
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -.7px;
    margin: 0;
    text-wrap: balance;
}

.st-blogkop__intro {
    font-size: 16px;
    line-height: 1.6;
    color: var(--st-tekst-sec);
    max-width: 88ch;
    margin: 0;
}

/* --- het uitgelichte artikel -------------------------------------------- */

/* Het uitgelichte artikel stond eerst in antraciet. Dat was donker en zwaar
   naast de rest van de pagina; het ontwerp wil hier de eigen groene familie,
   met een sfeerfoto die het rechtervlak vult. */
.st-uitgelicht {
    display: flex;
    align-items: stretch;
    background: var(--st-groen-vlak);
    border: 1px solid var(--st-groen-rand);
    border-radius: var(--st-radius-kaart);
    overflow: hidden;
    margin-bottom: 24px;
}

.st-uitgelicht__tekst {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
    padding: 44px 48px;
}

.st-uitgelicht__label {
    background: var(--st-wit);
    border: 1px solid #bcd9c3;
    color: var(--st-tekst);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: var(--st-radius-pill);
}

.st-uitgelicht__titel {
    font-family: var(--st-font-kop);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.5px;
    margin: 0;
    text-wrap: balance;
}

.st-uitgelicht__titel a { color: var(--st-tekst); text-decoration: none; }
.st-uitgelicht__titel a:hover { text-decoration: underline; }

.st-uitgelicht__intro {
    font-size: 15.5px;
    line-height: 1.6;
    color: #3c5a44;
    max-width: 52ch;
    margin: 0;
}

.st-uitgelicht__beeld {
    width: 440px;
    flex-shrink: 0;
    background: var(--st-groen-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--st-actie-tekst);
    overflow: hidden;
}

/* De foto vult het hele vlak; anders staat er een strook tint naast en valt
   de rechthoek uit elkaar. */
.st-uitgelicht__beeld img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* --- het raster --------------------------------------------------------- */

.st-blograster {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.st-blogkaart {
    display: flex;
    flex-direction: column;
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-radius: var(--st-radius-kaart);
    overflow: hidden;
}

.st-blogkaart__beeld {
    height: 170px;
    background: var(--st-groen-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--st-actie-tekst);
}

.st-blogkaart__tekst {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 20px 20px;
}

.st-blogkaart__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--st-actie-tekst);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.st-blogkaart__titel {
    font-family: var(--st-font-kop);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
    margin: 0;
    text-wrap: balance;
}

.st-blogkaart__titel a { color: var(--st-tekst); text-decoration: none; }
.st-blogkaart__titel a:hover { color: var(--st-tekst); }

.st-blogkaart__intro {
    font-size: 14px;
    color: var(--st-tekst-sec-2);
    line-height: 1.55;
    margin: 0;
}

.st-blogkaart__meer {
    font-size: 14px;
    font-weight: 600;
    color: var(--st-tekst);
    margin-top: 2px;
}

.st-blogpaginering { margin-top: 32px; }
.st-blogleeg { color: var(--st-tekst-sec); }

/* =========================================================================
   Blog — artikel
   ========================================================================= */

.st-artikel { padding-block: 8px 64px; }

.st-artikel__kolom {
    max-width: 760px;
    margin: 0 auto;
    padding-block: 16px 0;
}

.st-artikel__label {
    display: inline-block;
    background: var(--st-groen-tint);
    color: var(--st-tekst);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: var(--st-radius-pill);
    text-decoration: none;
    margin: 14px 0 12px;
}

.st-artikel__titel {
    font-family: var(--st-font-kop);
    font-size: 38px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.8px;
    margin: 0 0 14px;
    text-wrap: balance;
}

.st-artikel__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--st-tekst-zwak);
    margin-bottom: 22px;
}

.st-artikel__breed {
    max-width: 900px;
    margin: 0 auto;
}

/* --- de tekst zelf ------------------------------------------------------ */

.st-artikel__tekst { font-size: 16px; line-height: 1.75; color: #33413a; }
.st-artikel__tekst > p { margin: 0 0 18px; }
.st-artikel__tekst > ul, .st-artikel__tekst > ol { margin: 0 0 18px; padding-left: 22px; }
.st-artikel__tekst li { margin-bottom: 8px; }

.st-artikel__tekst h2 {
    font-family: var(--st-font-kop);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.4px;
    margin: 32px 0 12px;
    text-wrap: balance;
}

.st-artikel__tekst h3 {
    font-family: var(--st-font-kop);
    font-size: 19px;
    font-weight: 600;
    margin: 26px 0 10px;
}

.st-artikel__tekst a { color: var(--st-actie-tekst); }

/* Het kader met het korte antwoord bovenaan. */
.st-artikel__tekst .st-kort {
    background: var(--st-groen-tint);
    border: 1px solid var(--st-groen-rand);
    border-radius: var(--st-radius-kaart);
    padding: 20px 22px;
    margin: 0 0 24px;
}

.st-kort__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--st-actie-tekst);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 8px;
}

.st-artikel__tekst .st-kort p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--st-tekst); }

/* De tip halverwege, met een groene rand aan de linkerkant. */
.st-artikel__tekst .st-tip {
    border-left: 4px solid var(--st-actie);
    background: var(--st-wit);
    border-radius: 0 12px 12px 0;
    padding: 16px 20px;
    margin: 0 0 22px;
}

.st-artikel__tekst .st-tip p { margin: 0; font-size: 15px; line-height: 1.6; }

/* De kleine letter onderaan: een voorbehoud, geen hoofdtekst. */
.st-artikel__tekst .st-klein {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--st-tekst-zwak);
}

/* Tabellen in een artikel: een kaart met een getinte kop en zachte
   scheidingslijnen. Op een smal scherm schuift de tabel zelf opzij, in
   plaats van de hele pagina. */
.st-artikel__tekst table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--st-rand);
    border-radius: var(--st-radius-kaart);
    overflow: hidden;
    margin: 4px 0 14px;
    font-size: 14.5px;
    line-height: 1.45;
    background: var(--st-wit);
}

.st-artikel__tekst th {
    background: var(--st-groen-tint);
    color: var(--st-tekst);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .4px;
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--st-groen-rand);
}

.st-artikel__tekst td {
    padding: 11px 14px;
    vertical-align: top;
    border-top: 1px solid var(--st-rand);
}

.st-artikel__tekst tbody tr:first-child td { border-top: 0; }
.st-artikel__tekst tbody tr:nth-child(even) td { background: var(--st-tegel); }
.st-artikel__tekst td:first-child { font-weight: 600; color: var(--st-tekst); }
.st-artikel__tekst td:nth-child(2) { white-space: nowrap; }
.st-artikel__tekst table + p small, .st-artikel__tekst table + p > small { color: var(--st-tekst-zwak); font-size: 13px; }

@media (max-width: 640px) {
    .st-artikel__tekst table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .st-artikel__tekst td, .st-artikel__tekst th { min-width: 110px; }
    .st-artikel__tekst td:nth-child(2), .st-artikel__tekst th:nth-child(2) { min-width: 0; }
}

/* --- genoemde producten ------------------------------------------------- */

.st-genoemd { margin-top: 40px; }

.st-genoemd__kop {
    font-family: var(--st-font-kop);
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 16px;
}

.st-genoemd__raster {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.st-genoemd__kaart {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--st-rand);
    border-radius: var(--st-radius-kaart);
    overflow: hidden;
    background: var(--st-wit);
    text-decoration: none;
    color: inherit;
}

.st-genoemd__kaart:hover { border-color: var(--st-groen-rand-sec, var(--st-actie)); }

.st-genoemd__beeld {
    height: 150px;
    background: var(--st-tegel);
    display: flex;
    align-items: center;
    justify-content: center;
}

.st-genoemd__beeld img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
    padding: 12px;
    mix-blend-mode: multiply;
}

.st-genoemd__tekst { display: flex; flex-direction: column; gap: 6px; padding: 14px; }
.st-genoemd__naam { font-size: 14.5px; font-weight: 600; line-height: 1.3; }

.st-genoemd__regel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.st-genoemd__prijs { font-size: 16px; font-weight: 700; color: var(--st-actie-tekst); }
.st-genoemd__meer { font-size: 13px; font-weight: 600; color: var(--st-tekst); }

.st-genoemd__balk {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    background: var(--st-actie);
    border-radius: 14px;
    padding: 18px 24px;
    margin-top: 20px;
    color: var(--st-op-actie);
    font-size: 16px;
    font-weight: 600;
}

.st-knop.st-knop--wit {
    background: var(--st-wit);
    color: var(--st-tekst);
    font-size: 14.5px;
    font-weight: 600;
    padding: 11px 22px;
    border-radius: var(--st-radius-pill);
    text-decoration: none;
    white-space: nowrap;
}

.st-knop.st-knop--wit:hover { color: var(--st-actie-tekst); }

/* --- wie het schreef ---------------------------------------------------- */

.st-auteur {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-radius: var(--st-radius-kaart);
    padding: 20px 22px;
    margin-top: 32px;
}

.st-auteur__foto {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.st-auteur__tekst { display: flex; flex-direction: column; gap: 2px; }

.st-auteur__naam {
    font-family: var(--st-font-kop);
    font-size: 16px;
    font-weight: 600;
    color: var(--st-tekst);
}

.st-auteur__rol { font-size: 13.5px; color: var(--st-tekst-sec-2); }

.st-auteur__bio {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--st-tekst-sec);
    margin: 8px 0 0;
}

/* --- smallere schermen -------------------------------------------------- */

@media (max-width: 991px) {
    .st-blograster,
    .st-genoemd__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .st-uitgelicht__beeld { display: none; }
    .st-uitgelicht__tekst { padding: 30px 26px; }
    .st-uitgelicht__titel { font-size: 25px; }

    .st-blogkop__titel { font-size: 27px; }
    .st-artikel__titel { font-size: 29px; }
}

@media (max-width: 575px) {
    .st-blograster,
    .st-genoemd__raster { grid-template-columns: 1fr; }

    .st-blogkaart__beeld { height: 130px; }

    .st-genoemd__balk { flex-direction: column; align-items: flex-start; }
    .st-auteur { flex-direction: column; }
}

/* -------------------------------------------------------------------------
   Blogoverzicht binnen .ck-content
   -------------------------------------------------------------------------
   Botble rendert de blogpagina als pagina-inhoud, en dus binnen een
   .ck-content. Regels als `.ck-content h2` en `.ck-content p` tellen daar één
   klasse méér dan onze eigen enkele klasse, en wonnen dus: de kop van het
   uitgelichte artikel en die van de kaarten werden allebei 22px met 34px
   marge erboven. In het ontwerp is de ene 30px en de andere 18px — juist dat
   verschil laat zien wat het hoofdartikel is.

   Vandaar twee klassen per selector: dat telt zwaarder dan .ck-content plus
   een element, zonder dat we !important nodig hebben. */

.st-uitgelicht .st-uitgelicht__titel {
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: -.5px;
    margin: 0;
}

.st-uitgelicht .st-uitgelicht__intro {
    font-size: 15.5px;
    line-height: 1.6;
    margin: 0;
}

.st-blogkaart .st-blogkaart__titel {
    font-size: 18px;
    line-height: 1.25;
    margin: 0;
}

.st-blogkaart .st-blogkaart__intro {
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}

.st-blogoverzicht .st-blogkop__intro { margin: 0; }

/* Het ontwerp geeft het donkere vlak een iets rondere hoek dan de kaarten
   eronder — 20 tegen 16. */
.st-blogoverzicht .st-uitgelicht { border-radius: 20px; }

@media (max-width: 991px) {
    .st-uitgelicht .st-uitgelicht__titel { font-size: 25px; }
}

/* =========================================================================
   Tekstpagina's en de slottekst op de homepage
   ========================================================================= */

/* De paginanaam boven een tekstpagina. Ons kruimelpad is één regel zonder
   titelband, dus zonder dit stond de titel van bijvoorbeeld het retourbeleid
   nergens op de pagina — niet voor de bezoeker en niet voor een zoekmachine. */
.ck-content .st-paginatitel {
    font-family: var(--st-font-kop);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -.6px;
    line-height: 1.15;
    margin: 8px 0 18px;
    text-wrap: balance;
}

/* De tekst onderaan de homepage.

   Die stond in een gewone .st-sectie, en die zet er boven én onder 44px bij —
   met de marge van de nieuwsbriefsectie erboven werd dat een gat van ruim
   honderd pixels. Deze tekst sluit aan op wat erboven staat en heeft alleen
   onder ruimte nodig. */
.st-slottekst {
    padding-block: 0 44px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 40px;
    align-items: start;
}

/* De tekst vulde eerder de volle breedte van de container, maar liep na zo'n
   60% dood — een leeslengte van 84 tekens is het maximum dat prettig leest.
   De rest van de breedte stond dus leeg. Nu staat daar de kaart met de
   adviesgidsen: dezelfde opzet als onderaan een categoriepagina. */
.st-slottekst__kaart {
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-radius: var(--st-radius-kaart);
    padding: 22px 24px 24px;
    position: sticky;
    top: 100px;
}

.st-slottekst__kaart h3 {
    font-family: var(--st-font-kop);
    font-size: 16.5px;
    font-weight: 600;
    margin: 0 0 14px;
    color: var(--st-tekst);
}

.st-slottekst__kaart ul {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.st-slottekst__kaart li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--st-rand-input);
}

.st-slottekst__kaart li:last-child { border-bottom: none; padding-bottom: 0; }

.st-slottekst__kaart li a {
    font-weight: 600;
    font-size: 14.5px;
    color: var(--st-tekst);
    text-decoration: none;
    line-height: 1.35;
}

.st-slottekst__kaart li a:hover { text-decoration: underline; }

.st-slottekst__kaart li span {
    font-size: 13.5px;
    color: var(--st-tekst-sec-2);
    line-height: 1.4;
}

.st-slottekst h2 {
    font-family: var(--st-font-kop);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.4px;
    margin: 0 0 12px;
}

.st-slottekst h3 {
    font-family: var(--st-font-kop);
    font-size: 17px;
    font-weight: 600;
    margin: 22px 0 8px;
}

.st-slottekst p {
    max-width: 84ch;
    line-height: 1.7;
    margin: 0 0 12px;
    color: var(--st-tekst-sec);
}

.st-slottekst a { color: var(--st-actie-tekst); }

@media (max-width: 991px) {
    .ck-content .st-paginatitel { font-size: 25px; }

    .st-slottekst {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding-block: 0 32px;
    }

    .st-slottekst__kaart { position: static; }
}

/* =========================================================================
   Staffelregel op de productpagina
   ========================================================================= */

/* Staat op de plek waar eerst alleen de offertelink stond. De korting hoort
   hier: dit is het moment waarop iemand besluit hoeveel hij neemt. */
/* De voorraad- en verzendbelofte als groen vlak, direct onder de knop. */
.st-leverregel {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--st-groen-tint);
    border: 1px solid var(--st-groen-rand);
}

.st-leverregel svg { color: var(--st-groen-tekst); flex: none; margin-top: 2px; }
.st-leverregel b { display: block; color: var(--st-tekst); line-height: 1.35; }
.st-leverregel span { display: block; font-size: 13.5px; color: var(--st-tekst-sec); line-height: 1.45; }
.st-leverregel span:empty { display: none; }

/* st_prijs_op_aanvraag: geel/wacht in plaats van groen, dezelfde toon als
   .st-levering--wacht op de kaart. */
.st-leverregel--wacht { background: var(--st-geel); border-color: transparent; }
.st-leverregel--wacht svg,
.st-leverregel--wacht b { color: var(--st-geel-tekst); }

/* Staffelkorting als eigen vlak en niet als losse regel: het is een mededeling
   over dit product, geen voetnoot. */
.st-staffelregel {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 14px;
    padding: 9px 14px;
    border-radius: var(--st-radius-klein);
    background: var(--st-bodem);
    border: 1px solid var(--st-rand);
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--st-tekst-sec);
}

.st-staffelregel svg { flex: none; margin-top: 2px; color: var(--st-groen-tekst); }
.st-staffelregel b { color: var(--st-tekst); }

/* Staffelprijs per product (plug-in st-staffel): hetzelfde vlak als de
   staffelregel, met een kleine tabel erin — aantal links, stukprijs rechts. */
.st-staffel__tabel { margin-top: 3px; border-collapse: collapse; }
.st-staffel__tabel td { padding: 1px 16px 1px 0; }
.st-staffel__tabel td:last-child { padding-right: 0; font-weight: 600; color: var(--st-tekst); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-product__vanaf { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--st-tekst); }

/* Wenslijst, vergelijken en offerte op één regel. */
.st-koopblok__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin-top: 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--st-tekst-sec);
}

.st-koopblok__links a,
.st-koopblok__links button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}

.st-koopblok__links a:hover,
.st-koopblok__links button:hover {
    color: var(--st-tekst);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Het hartje was een rond knopje van 52 px naast de bestelknop; in deze rij is
   het een tekstlink. De oude maten moeten er dus af. */
.st-koopblok__links .st-pd__verlanglijst {
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: none;
}

.st-koopblok__links .st-pd__verlanglijst.is-actief { color: var(--st-actie-tekst); border-color: transparent; }

.st-pd__staffel {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid var(--st-rand);
    border-radius: var(--st-radius-klein);
    padding: 13px 16px;
    margin: 0 0 18px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--st-tekst-sec);
    background: var(--st-wit);
}

.st-pd__staffel svg {
    color: var(--st-actie-tekst);
    flex-shrink: 0;
    margin-top: 2px;
}

.st-pd__staffel strong { color: var(--st-tekst); font-weight: 600; }

.st-pd__staffel a {
    color: var(--st-actie-tekst);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.st-pd__staffel a:hover { text-decoration: underline; }

.st-pd__staffel-punt { color: var(--st-rand-input); margin: 0 4px; }

/* Op de homepage sluit de slottekst aan op de nieuwsbriefsectie. Die zet er
   zelf al 44px onder, en het groene vlak erbinnen nog eens 48 — samen ruim
   negentig pixels wit. Eén van de twee is genoeg. */
.st-sectie:has(+ .st-slottekst) { padding-bottom: 0; }

/* =========================================================================
   Geen zwarte knoppen
   =========================================================================
   Shofy zet zijn knoppen op --tp-common-black (#010f1c). Dat botst met de
   huisstijl: op de ene pagina bestel je met een groene knop, op de andere met
   een zwarte. Hieronder staan alle plekken waar Shofy zwart gebruikt als
   knop- of accentvlak, omgezet naar het groen van de winkel.

   Bewust níet meegenomen: .body-overlay (dat hóórt donker te zijn) en
   .tp-product-tooltip. Zwarte tekst blijft zwarte tekst; alleen vlakken. */

.tp-btn,
.tp-cart-checkout-btn,
.tp-contact-btn,
.tp-filter-btn,
.tp-product-add-cart-btn-large,
.tp-product-list-add-to-cart-btn,
.tp-cart-coupon-input button,
.tp-subscribe-input button,
.tp-footer-subscribe-input button,
.tp-header-search-input-box-5 button,
.contact-form .contact-button,
.auth-card .auth-card__body .btn,
.back-to-top-btn,
.tp-product-badge-3 span,
.tp-blog-meta-date span {
    background-color: var(--st-actie);
    color: var(--st-op-actie);
    border-color: var(--st-actie);
}

.tp-btn:hover,
.tp-cart-checkout-btn:hover,
.tp-contact-btn:hover,
.tp-filter-btn:hover,
.tp-product-add-cart-btn-large:hover,
.tp-product-list-add-to-cart-btn:hover,
.tp-cart-coupon-input button:hover,
.tp-subscribe-input button:hover,
.tp-footer-subscribe-input button:hover,
.contact-form .contact-button:hover,
.auth-card .auth-card__body .btn:hover,
.back-to-top-btn:hover {
    background-color: var(--st-actie-tekst);
    color: var(--st-wit);
    border-color: var(--st-actie-tekst);
}

/* De streep onder een actief tabblad en de scrollbalk van de slider: ook
   accenten, ook groen. */
.tp-tab-line,
.tp-product-details-tab-line,
.tp-swiper-scrollbar .tp-swiper-scrollbar-drag {
    background-color: var(--st-actie);
}

/* De knop terug naar boven is een rondje in de hoek; die stond het felst
   zwart van allemaal. */
.back-to-top-btn {
    box-shadow: 0 6px 18px rgba(28, 92, 44, .22);
}

/* =========================================================================
   Retour aanmelden
   ========================================================================= */

.st-retour {
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-radius: var(--st-radius-kaart);
    padding: 26px 28px 28px;
    margin: 0 0 32px;
}

.st-retour__titel {
    font-family: var(--st-font-kop);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.4px;
    margin: 0 0 8px;
}

.st-retour__intro {
    font-size: 15px;
    line-height: 1.6;
    color: var(--st-tekst-sec);
    margin: 0 0 6px;
    max-width: 72ch;
}

.st-retour__account {
    font-size: 14px;
    color: var(--st-tekst-sec-2);
    margin: 0 0 6px;
}

.st-retour__formulier {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 18px;
}

.st-retour__rij {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.st-retour__veld {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* Een tekstvak met een pilvorm ziet er raar uit; alleen de eenregelige velden
   krijgen de ronde vorm van de rest van de winkel. */
.st-retour__tekstvak {
    border-radius: var(--st-radius-klein);
    resize: vertical;
    min-height: 88px;
}

.st-retour__knop { align-self: flex-start; }

.st-retour__klein {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--st-tekst-zwak);
    margin: 0;
    max-width: 72ch;
}

@media (max-width: 767px) {
    .st-retour { padding: 20px 18px 22px; }
    .st-retour__rij { grid-template-columns: minmax(0, 1fr); }
}

/* Het modelformulier voor herroeping stond als groen vlak met witte cursieve
   tekst op de pagina — juridisch verplicht om aan te bieden, maar zo leest
   niemand het. Een citaatblok in de ck-content wordt nu een rustig kader met
   leesbare tekst. */
.ck-content blockquote {
    background: var(--st-tegel);
    border: 1px solid var(--st-rand);
    border-left: 4px solid var(--st-actie);
    border-radius: 0 12px 12px 0;
    padding: 18px 22px;
    margin: 0 0 22px;
    color: var(--st-tekst);
    font-style: normal;
}

/* Shofy schrijft `blockquote p { color: #fff }` — die gaat uit van een donker
   citaatvlak. Op ons lichte kader werd de tekst daardoor onzichtbaar. */
.ck-content blockquote p,
.ck-content blockquote li,
.ck-content blockquote span {
    color: var(--st-tekst);
    margin: 0 0 10px;
}

.ck-content blockquote p:last-child { margin-bottom: 0; }

/* Het modelformulier staat in cursief. Een heel blok cursieve tekst leest
   slecht; alleen de sterretjes-uitleg houden we schuin. */
.ck-content blockquote em,
.ck-content blockquote i { font-style: normal; }

/* =========================================================================
   Winkelwagen
   ========================================================================= */

.st-winkelwagen { padding-block: 8px 64px; }

.st-winkelwagen__kop {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-block: 16px 0;
    margin-bottom: 22px;
}

.st-winkelwagen__titel {
    font-family: var(--st-font-kop);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -.6px;
    margin: 0;
}

.st-winkelwagen__blad {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.st-winkelwagen__regels {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.st-winkelwagen__zijkant {
    width: 380px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- balkje tot gratis verzending -------------------------------------- */

.st-verzendbalk {
    background: var(--st-groen-tint);
    border: 1px solid var(--st-groen-rand);
    border-radius: 14px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.st-verzendbalk__tekst { font-size: 14px; color: var(--st-tekst); }
.st-verzendbalk__tekst strong { color: var(--st-tekst); }

.st-verzendbalk__spoor {
    display: block;
    height: 7px;
    background: #d3ebd8;
    border-radius: var(--st-radius-pill);
    overflow: hidden;
}

.st-verzendbalk__vulling {
    display: block;
    height: 100%;
    background: var(--st-actie);
    border-radius: var(--st-radius-pill);
    transition: width .3s ease;
}

/* --- de kaart met de regels -------------------------------------------- */

.st-wagenkaart {
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-radius: var(--st-radius-kaart);
    overflow: hidden;
}

.st-wagenkaart__koppen,
.st-wagenregel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px 100px;
    align-items: center;
    gap: 16px;
}

.st-wagenkaart__koppen {
    padding: 14px 22px;
    border-bottom: 1px solid var(--st-rand-fijn, #efefe9);
    font-size: 12px;
    font-weight: 600;
    color: var(--st-tekst-zwak);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.st-wagenkaart__koppen span:nth-child(2) { text-align: center; }
.st-wagenkaart__koppen span:nth-child(3) { text-align: right; }

.st-wagenregel {
    grid-template-columns: 72px minmax(0, 1fr) 130px 100px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--st-rand-fijn, #efefe9);
}

.st-wagenregel:last-child { border-bottom: none; }

.st-wagenkaart__koppen { grid-template-columns: 72px minmax(0, 1fr) 130px 100px; }
.st-wagenkaart__koppen span:first-child { grid-column: 1 / 3; }

.st-wagenregel__beeld {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    background: var(--st-tegel);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.st-wagenregel__beeld img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
    mix-blend-mode: multiply;
}

.st-wagenregel__tekst {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.st-wagenregel__naam {
    font-size: 15px;
    font-weight: 600;
    color: var(--st-tekst);
    text-decoration: none;
    line-height: 1.3;
}

.st-wagenregel__naam:hover { color: var(--st-tekst); }

.st-wagenregel__detail,
.st-wagenregel__opties { font-size: 13px; color: var(--st-tekst-zwak); }

.st-wagenregel__weg {
    align-self: flex-start;
    background: none;
    border: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: #c0554f;
    cursor: pointer;
}

.st-wagenregel__weg:hover { text-decoration: underline; }

.st-wagenregel__aantal { display: flex; justify-content: center; }

.st-wagenregel__totaal {
    text-align: right;
    font-size: 16px;
    font-weight: 700;
    color: var(--st-actie-tekst);
    font-variant-numeric: tabular-nums;
}

/* De aantalkiezer van Botble in onze pilvorm.

   Shofy zet de min- en plusknop op position: absolute binnen een blokje van
   100px. In onze pil moeten ze gewoon naast het cijfer staan, dus zetten we ze
   terug op static en laten flex het werk doen. De selectors tellen twee
   klassen, want die van Shofy tellen er één. */
.st-wagenregel__aantal .tp-product-quantity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    border: 1.5px solid var(--st-rand-input);
    border-radius: var(--st-radius-pill);
    padding: 6px 12px;
    width: auto;
    height: auto;
    margin: 0;
}

.st-wagenregel__aantal .tp-cart-minus,
.st-wagenregel__aantal .tp-cart-plus {
    position: static;
    transform: none;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    color: var(--st-tekst-sec);
    cursor: pointer;
    flex-shrink: 0;
}

.st-wagenregel__aantal .tp-cart-minus:hover,
.st-wagenregel__aantal .tp-cart-plus:hover { color: var(--st-actie-tekst); }

.st-wagenregel__aantal .tp-cart-input {
    width: 38px;
    min-width: 0;
    border: 0;
    background: none;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--st-tekst);
    padding: 0;
    height: auto;
}

/* Botble zet spinnertjes in het nummerveld; die passen niet in een pil. */
.st-wagenregel__aantal input::-webkit-outer-spin-button,
.st-wagenregel__aantal input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.st-wagenregel__aantal input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* --- onder de regels ---------------------------------------------------- */

.st-winkelwagen__voet {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.st-winkelwagen__verder {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--st-tekst);
    text-decoration: none;
}

.st-winkelwagen__verder svg { color: var(--st-actie-tekst); }
.st-winkelwagen__verder:hover { text-decoration: underline; }
.st-winkelwagen__btw { font-size: 13.5px; color: var(--st-tekst-zwak); }

/* --- overzichtskaart ---------------------------------------------------- */

.st-wagensom {
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-radius: var(--st-radius-kaart);
    padding: 24px 26px;
    display: flex;
    flex-direction: column;
    /* De bedragenlijst moet de volle kaartbreedte krijgen, anders krimpt hij
       tot de breedte van zijn eigen tekst en staan de bedragen ergens in het
       midden in plaats van tegen de rechterrand. */
    align-items: stretch;
    gap: 14px;
}

.st-wagensom__titel {
    font-family: var(--st-font-kop);
    font-size: 17px;
    font-weight: 600;
    margin: 0;
}

.st-wagensom__coupon { display: flex; gap: 8px; }
.st-wagensom__coupon .st-input { padding: 10px 16px; font-size: 13.5px; }

.st-wagensom__toepassen {
    border: 1.5px solid var(--st-rand-input);
    background: var(--st-wit);
    border-radius: var(--st-radius-pill);
    padding: 10px 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--st-tekst);
    white-space: nowrap;
    cursor: pointer;
}

.st-wagensom__toepassen:hover:not(:disabled) { border-color: var(--st-actie); }
.st-wagensom__toepassen:disabled { opacity: .45; cursor: not-allowed; }

.st-wagensom__lijst {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid var(--st-rand-fijn, #efefe9);
}

.st-wagensom__lijst > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 14px;
    color: var(--st-tekst-sec);
}

.st-wagensom__lijst { width: 100%; }
.st-wagensom__lijst dt, .st-wagensom__lijst dd { margin: 0; }

.st-wagensom__lijst dd {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.st-wagensom__code { font-size: 12.5px; color: var(--st-tekst-zwak); }

.st-wagensom__weg {
    font-size: 12.5px;
    color: #c0554f;
    margin-left: 4px;
}

.st-wagensom__gratis { color: var(--st-tekst); font-weight: 600; }
.st-wagensom__later { font-size: 13px; color: var(--st-tekst-zwak); }

.st-wagensom__totaal {
    border-top: 1px solid var(--st-rand-fijn, #efefe9);
    padding-top: 10px;
    margin-top: 4px;
}

.st-wagensom__totaal dt { font-size: 16px; font-weight: 600; color: var(--st-tekst); }

.st-wagensom__totaal dd {
    font-family: var(--st-font-kop);
    font-size: 24px;
    font-weight: 700;
    color: var(--st-actie-tekst);
}

.st-wagensom__afrekenen {
    width: 100%;
    justify-content: center;
    padding: 15px 0;
    font-size: 16px;
}

.st-wagensom__betalen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    list-style: none;
    margin: 2px 0 0;
    padding: 0;
}

.st-wagensom__betalen li {
    background: var(--st-tegel);
    border-radius: 6px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 600;
    color: var(--st-tekst-sec);
    letter-spacing: .2px;
}

/* --- sorteerkeuze binnen de balk ---------------------------------------- */
/* nice-select vervangt het keuzevak door een <div> die zichzelf zo breed maakt
   als de langste optie ("Beoordeling: laag naar hoog"). Op een telefoon liep
   dat vak daardoor buiten beeld. */

.st-sorteerbalk__keuze .nice-select {
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 575px) {
    .st-sorteerbalk__keuze .nice-select {
        width: 100%;
        float: none;
    }

    .st-sorteerbalk__keuze .nice-select .current {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .st-sorteerbalk__keuze .nice-select .list {
        width: 100%;
        max-width: 100%;
    }
}

/* --- zakelijk blok ------------------------------------------------------ */

.st-zakelijk {
    background: var(--st-groen-tint);
    border: 1px solid var(--st-groen-rand);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.st-zakelijk__kop { font-size: 14px; font-weight: 600; color: var(--st-tekst); }
.st-zakelijk__tekst { font-size: 13px; color: #3c5a44; line-height: 1.5; }
.st-zakelijk__tekst a { font-weight: 600; color: var(--st-actie-tekst); }

/* --- lege winkelwagen --------------------------------------------------- */

.st-winkelwagen__leeg {
    text-align: center;
    padding: 48px 0 64px;
    color: var(--st-tekst-sec);
}

.st-winkelwagen__leeg svg { color: var(--st-rand-input); margin-bottom: 18px; }

.st-winkelwagen__leeg h2 {
    font-family: var(--st-font-kop);
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--st-tekst);
}

.st-winkelwagen__leeg p { margin: 0 0 22px; }

@media (max-width: 991px) {
    .st-winkelwagen__blad { flex-direction: column; gap: 24px; }
    .st-winkelwagen__zijkant { width: 100%; }
    .st-winkelwagen__titel { font-size: 26px; }
}

@media (max-width: 767px) {
    .st-wagenkaart__koppen { display: none; }

    /* Op mobiel past de regel niet in vier kolommen: beeld links, de rest
       eronder, en het regeltotaal naast de aantalkiezer. */
    .st-wagenregel {
        grid-template-columns: 64px minmax(0, 1fr);
        grid-template-areas:
            "beeld tekst"
            "aantal totaal";
        row-gap: 14px;
        padding: 16px 16px;
    }

    .st-wagenregel__beeld { grid-area: beeld; width: 64px; height: 64px; }
    .st-wagenregel__tekst { grid-area: tekst; }
    .st-wagenregel__aantal { grid-area: aantal; justify-content: flex-start; }
    .st-wagenregel__totaal { grid-area: totaal; }
}

/* =========================================================================
   Uitklap-winkelwagen
   ========================================================================= */

.st-minicart {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    background: var(--st-wit);
}

.st-minicart__boven { display: flex; flex-direction: column; min-height: 0; }

.st-minicart__kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--st-rand);
}

.st-minicart__titel {
    font-family: var(--st-font-kop);
    font-size: 17px;
    font-weight: 600;
    color: var(--st-tekst);
}

.st-minicart__aantal { color: var(--st-tekst-zwak); font-weight: 600; }
.st-minicart__aantal::before { content: "("; }
.st-minicart__aantal::after { content: ")"; }

.st-minicart__sluit {
    background: none;
    border: 0;
    color: var(--st-tekst-zwak);
    padding: 0;
    cursor: pointer;
    display: flex;
}

.st-minicart__sluit:hover { color: var(--st-tekst); }

/* De balk tot gratis verzending krijgt hier geen eigen kader: hij zit al in
   een paneel, en een kader in een kader wordt rommelig. */
.st-minicart__voortgang { padding: 14px 20px; border-bottom: 1px solid var(--st-rand-fijn, #efefe9); }

.st-minicart__voortgang .st-verzendbalk {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    gap: 8px;
}

.st-minicart__voortgang .st-verzendbalk__tekst { font-size: 13px; }
.st-minicart__voortgang .st-verzendbalk__spoor { height: 6px; background: #eaf0ea; }

.st-minicart__regels { overflow-y: auto; }

.st-minicart__regel {
    display: flex;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--st-rand-fijn, #efefe9);
}

.st-minicart__beeld {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: var(--st-tegel);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.st-minicart__beeld img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
    mix-blend-mode: multiply;
}

.st-minicart__tekst {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.st-minicart__regelkop { display: flex; justify-content: space-between; gap: 8px; }

.st-minicart__naam {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--st-tekst);
    text-decoration: none;
}

.st-minicart__naam:hover { color: var(--st-tekst); }

.st-minicart__weg { color: #b3b8b3; flex-shrink: 0; display: flex; }
.st-minicart__weg:hover { color: #c0554f; }

.st-minicart__maat,
.st-minicart__opties { font-size: 12.5px; color: var(--st-tekst-zwak); }

.st-minicart__regelvoet {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.st-minicart__prijs {
    font-size: 15px;
    font-weight: 700;
    color: var(--st-actie-tekst);
    font-variant-numeric: tabular-nums;
}

/* Dezelfde pil als op de winkelwagenpagina, een maat kleiner. */
.st-minicart__aantalkiezer .tp-product-quantity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    border: 1.5px solid var(--st-rand-input);
    border-radius: var(--st-radius-pill);
    padding: 4px 10px;
    width: auto;
    height: auto;
    margin: 0;
}

.st-minicart__aantalkiezer .tp-cart-minus,
.st-minicart__aantalkiezer .tp-cart-plus {
    position: static;
    transform: none;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    color: var(--st-tekst-sec);
    cursor: pointer;
    flex-shrink: 0;
}

.st-minicart__aantalkiezer .tp-cart-minus:hover,
.st-minicart__aantalkiezer .tp-cart-plus:hover { color: var(--st-actie-tekst); }

.st-minicart__aantalkiezer .tp-cart-input {
    width: 32px;
    min-width: 0;
    border: 0;
    background: none;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--st-tekst);
    padding: 0;
    height: auto;
}

.st-minicart__aantalkiezer input::-webkit-outer-spin-button,
.st-minicart__aantalkiezer input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.st-minicart__aantalkiezer input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* --- onderkant ---------------------------------------------------------- */

.st-minicart__voet {
    border-top: 1px solid var(--st-rand);
    padding: 16px 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.st-minicart__totalen { margin: 0; display: flex; flex-direction: column; gap: 7px; }

.st-minicart__totalen > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 14px;
    color: var(--st-tekst-sec);
}

.st-minicart__totalen dt, .st-minicart__totalen dd { margin: 0; }
.st-minicart__eindtotaal dt { font-size: 15px; font-weight: 600; color: var(--st-tekst); }

.st-minicart__eindtotaal dd {
    font-family: var(--st-font-kop);
    font-size: 20px;
    font-weight: 700;
    color: var(--st-actie-tekst);
}

.st-minicart__btw { font-size: 11.5px; color: var(--st-tekst-zwak); text-align: right; }

.st-minicart__knoppen {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.st-minicart__knoppen .st-knop { width: 100%; justify-content: center; }

.st-knop.st-knop--rand {
    background: var(--st-wit);
    border: 1.5px solid #cfd6cf;
    color: var(--st-tekst);
    font-weight: 600;
}

.st-knop.st-knop--rand:hover { border-color: var(--st-actie); color: var(--st-actie-tekst); }

.st-minicart__vertrouwen {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--st-tekst-zwak);
    text-align: center;
}

.st-minicart__vertrouwen svg { flex-shrink: 0; }

.st-minicart__leeg {
    text-align: center;
    padding: 40px 20px;
    color: var(--st-tekst-sec);
}

.st-minicart__leeg svg { color: var(--st-rand-input); margin-bottom: 14px; }
.st-minicart__leeg p { margin: 0 0 18px; }

/* =========================================================================
   Contactpagina
   ========================================================================= */

.st-contact {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    margin: 8px 0 24px;
}

.st-contact__formulier {
    flex: 1 1 0;
    min-width: 0;
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-radius: var(--st-radius-kaart);
    padding: 28px 30px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.st-contact__kop {
    font-family: var(--st-font-kop);
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.st-contact__rij {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.st-contact__veld { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

.st-verplicht { color: #c0554f; }

/* Op een formulier met vier velden onder elkaar leest een rechte hoek
   rustiger dan een pil; de pilvorm houden we voor knoppen en losse velden. */
.st-input--hoek { border-radius: 10px; padding: 13px 15px; font-size: 14.5px; }

.st-contact__tekstvak { min-height: 120px; resize: vertical; }

.st-contact__akkoord {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--st-tekst-sec);
}

.st-contact__akkoord input {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1.5px solid #cfd6cf;
    accent-color: var(--st-actie);
    flex-shrink: 0;
}

.st-contact__versturen { align-self: flex-start; padding: 14px 34px; font-size: 15.5px; }

/* --- de gegevens rechts ------------------------------------------------- */

.st-contact__zijkant {
    width: 380px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.st-contactkaart {
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-radius: var(--st-radius-kaart);
    padding: 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.st-contactkaart__regel { display: flex; align-items: center; gap: 14px; }

.st-contactkaart__regel--lijn {
    align-items: flex-start;
    border-top: 1px solid var(--st-rand-fijn, #efefe9);
    padding-top: 16px;
}

/* Lijn-iconen in een zacht groen vlakje — geen kleurige 3D-plaatjes, want
   die horen bij een ander merk dan dit. */
.st-contactkaart__icoon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--st-groen-tint);
    color: var(--st-actie-tekst);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.st-contactkaart__tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-contactkaart__label { font-size: 12.5px; color: var(--st-tekst-zwak); }

.st-contactkaart__waarde {
    font-size: 15px;
    font-weight: 600;
    color: var(--st-tekst);
    line-height: 1.4;
    text-decoration: none;
    word-break: break-word;
}

a.st-contactkaart__waarde:hover { color: var(--st-tekst); }
.st-contactkaart__waarde--licht { font-size: 14.5px; font-weight: 600; }

.st-volgons {
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-radius: var(--st-radius-kaart);
    padding: 20px 26px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.st-volgons__kop { font-size: 14.5px; font-weight: 600; color: var(--st-tekst); }
.st-volgons__links { display: flex; flex-wrap: wrap; gap: 10px; }

.st-volgons__links a {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1.5px solid var(--st-groen-rand);
    color: var(--st-actie-tekst);
    display: flex;
    align-items: center;
    justify-content: center;
}

.st-volgons__links a:hover { border-color: var(--st-actie); background: var(--st-groen-tint); }

@media (max-width: 991px) {
    .st-contact { flex-direction: column; gap: 20px; }
    .st-contact__zijkant { width: 100%; }
}

@media (max-width: 575px) {
    .st-contact__formulier { padding: 22px 18px; }
    .st-contact__rij { grid-template-columns: minmax(0, 1fr); }
}

/* ======================================================================== */
/* Tekstpagina's (voorwaarden, retour, privacy, cookies, verzending)        */
/* ======================================================================== */
/* Uit referentie/tekstpagina.html: kop over de volle breedte, daaronder een
   navigatiekaart links en de tekst rechts. Zonder die kaart stond de tekst in
   een smalle kolom met de halve pagina leeg ernaast. */

.st-tekstpagina {
    padding-block: 26px 56px;
}

.st-tekstpagina__kop {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.st-tekstpagina__titel {
    font-family: var(--st-font-kop);
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -.6px;
    line-height: 1.15;
    margin: 0;
}

.st-tekstpagina__rij {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.st-tekstpagina__zij {
    width: 260px;
    flex-shrink: 0;
    position: sticky;
    top: 24px;
}

.st-tekstpagina__tekst {
    flex: 1 1 0;
    min-width: 0;
    /* Geen leesbreedte-limiet: de kolom vult de ruimte naast de navigatie.
       Een vaste 760 of 900px liet op een breed scherm een derde van de pagina
       leeg, en dat leest als een fout in plaats van als marge. */
}

/* De algemene leesbreedte van 78ch (ongeveer 716px) geldt hier niet: naast de
   navigatiekaart bleef daardoor een derde van de pagina leeg, en dat leest als
   een fout in plaats van als marge. */
.st-tekstpagina__tekst > p,
.st-tekstpagina__tekst > ul,
.st-tekstpagina__tekst > ol,
.st-tekstpagina__tekst > h2,
.st-tekstpagina__tekst > h3,
.st-tekstpagina__tekst > h4,
.st-tekstpagina__tekst > blockquote {
    max-width: none;
}

/* Tabellen mogen de volle kolombreedte gebruiken en schuiven horizontaal als
   ze niet passen, in plaats van de kolommen samen te knijpen. */
.st-tekstpagina__tekst table {
    width: 100%;
    border-collapse: collapse;
}

.st-tekstpagina__tekst td,
.st-tekstpagina__tekst th {
    padding: 8px 14px 8px 0;
    vertical-align: top;
}

/* --- navigatiekaart ----------------------------------------------------- */

.st-tekstnav {
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.st-tekstnav__kop {
    font-size: 12px;
    font-weight: 600;
    color: var(--st-tekst-zwak);
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 8px 12px;
}

.st-tekstnav__kop:not(:first-child) {
    margin-top: 10px;
    border-top: 1px solid var(--st-rand-zacht, var(--st-rand));
    padding-top: 14px;
}

.st-tekstnav__lijst {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.st-tekstnav__link {
    display: block;
    font-size: 14.5px;
    color: var(--st-tekst-sec);
    padding: 11px 12px;
    border-radius: 9px;
    text-decoration: none;
}

.st-tekstnav__link:hover {
    background: var(--st-tegel);
    color: var(--st-tekst);
}

.st-tekstnav__link.is-actief {
    font-weight: 600;
    color: var(--st-tekst);
    background: var(--st-groen-tint);
}

@media (max-width: 991px) {
    .st-tekstpagina__rij {
        flex-direction: column-reverse;
        gap: 28px;
    }

    /* Op een telefoon wil je eerst lezen waarvoor je kwam; de navigatie hoort
       daaronder, als wegwijzer naar de volgende pagina. */
    .st-tekstpagina__zij {
        width: 100%;
        position: static;
    }

    .st-tekstpagina__tekst { max-width: none; }
    .st-tekstpagina__titel { font-size: 27px; }
}

/* Pagina's met een eigen indeling (contact) staan in de full-width layout en
   krijgen hun uitlijning daarom van deze container, niet van het sjabloon. */
.st-eigenpagina {
    padding-block: 8px 48px;
}

/* ======================================================================== */
/* Inloggen en registreren                                                  */
/* ======================================================================== */
/* Uit referentie/inloggen-registreren.html: twee kaarten onder elkaar, elk
   met een gekleurd vlak links dat vertelt wat een account oplevert, en het
   formulier rechts. */

.st-auth { padding-block: 18px 56px; }

.st-auth__kaart {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-radius: 18px;
    overflow: hidden;
    margin-top: 22px;
    scroll-margin-top: 24px;
}

.st-auth__zij {
    padding: 44px 46px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    justify-content: center;
}

.st-auth__zij--licht { background: var(--st-groen-tint); }

.st-auth__zij--donker {
    background: linear-gradient(150deg, var(--st-groen-diep), #17512a);
    color: #fff;
}

.st-auth__merk { display: flex; align-items: center; gap: 12px; }
.st-auth__merk img { max-height: 40px; width: auto; }

.st-auth__titel {
    font-family: var(--st-font-kop);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.5px;
    margin: 0;
    line-height: 1.15;
}

.st-auth__zij--licht .st-auth__titel { color: var(--st-tekst); }

/* De algemene kopregel (h1…h6) zet een donkere tekstkleur, en die wint van de
   witte kleur die het donkere vlak overerft. Zonder deze regel stond "Word
   klant bij Agrowinkel.nl" donkergroen op donkergroen. */
.st-auth__zij--donker .st-auth__titel { color: #fff; }
.st-auth__zij--donker .st-auth__punten { color: rgba(255, 255, 255, .95); }
.st-auth__zij--donker .st-auth__punten svg,
.st-auth__zij--donker .st-auth__punten path { color: var(--st-mint); stroke: var(--st-mint); }

.st-auth__tekst { margin: 0; font-size: 15.5px; line-height: 1.6; max-width: 46ch; }
.st-auth__zij--licht .st-auth__tekst { color: var(--st-tekst-sec); }
.st-auth__zij--donker .st-auth__tekst { color: rgba(255, 255, 255, .88); }

.st-auth__punten {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 15px;
}

.st-auth__punten li { display: flex; align-items: center; gap: 11px; }
.st-auth__punten svg { flex-shrink: 0; color: var(--st-actie-tekst); }
.st-auth__zij--donker .st-auth__punten svg { color: var(--st-mint); }

.st-auth__veilig {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 10px 0 0;
    background: rgba(255, 255, 255, .12);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .92);
}

.st-auth__veilig svg { flex-shrink: 0; margin-top: 1px; }

/* --- formulierkant ------------------------------------------------------ */

.st-auth__formulier { padding: 44px 46px; }

.st-auth__kop {
    font-family: var(--st-font-kop);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.4px;
    margin: 0 0 24px;
}

.st-auth__form { display: flex; flex-direction: column; gap: 18px; }

.st-auth__veld { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

.st-auth__veld label {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--st-tekst);
}

.st-auth__invoer {
    position: relative;
    display: flex;
    align-items: center;
}

.st-auth__invoer > svg:first-child {
    position: absolute;
    left: 15px;
    color: var(--st-tekst-zwak);
    pointer-events: none;
}

.st-auth__invoer input {
    width: 100%;
    height: 52px;
    border: 1px solid var(--st-rand-input);
    border-radius: 12px;
    background: var(--st-tegel);
    padding: 0 16px;
    font: inherit;
    font-size: 15.5px;
    color: var(--st-tekst);
}

.st-auth__invoer:has(> svg:first-child) input { padding-left: 46px; }
.st-auth__invoer:has(.st-auth__oog) input { padding-right: 46px; }

.st-auth__invoer input:focus {
    outline: none;
    border-color: var(--st-actie);
    background: var(--st-wit);
}

.st-auth__oog {
    position: absolute;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--st-tekst-zwak);
    cursor: pointer;
}

.st-auth__oog:hover { color: var(--st-tekst); background: var(--st-tegel); }
.st-auth__oog.is-zichtbaar { color: var(--st-tekst); }

.st-auth__rij {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.st-auth__rij--velden {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
}

.st-auth__onthoud,
.st-auth__akkoord {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    color: var(--st-tekst-sec);
    cursor: pointer;
    margin: 0;
}

.st-auth__onthoud input[type="checkbox"],
.st-auth__akkoord input[type="checkbox"] {
    width: 19px;
    height: 19px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--st-actie);
    cursor: pointer;
}

.st-auth__vergeten { font-weight: 600; font-size: 14.5px; color: var(--st-tekst); }
.st-auth__vergeten:hover { text-decoration: underline; }

.st-auth__knop {
    width: 100%;
    height: 54px;
    justify-content: center;
    gap: 10px;
    font-size: 16px;
    margin-top: 4px;
}

.st-auth__wissel {
    margin: 0;
    text-align: center;
    font-size: 14.5px;
    color: var(--st-tekst-sec);
}

.st-auth__wissel a { font-weight: 600; color: var(--st-tekst); }
.st-auth__wissel a:hover { text-decoration: underline; }

.st-auth__fout {
    font-size: 13.5px;
    color: #b3261e;
}

@media (max-width: 991px) {
    .st-auth__kaart { grid-template-columns: minmax(0, 1fr); }

    /* Op een telefoon wil je meteen kunnen inloggen; het verhaal erover mag
       eronder. */
    .st-auth__zij { order: 2; padding: 30px 24px; }
    .st-auth__formulier { order: 1; padding: 30px 24px; }
    .st-auth__titel { font-size: 24px; }
    .st-auth__kop { font-size: 22px; }
}

@media (max-width: 575px) {
    .st-auth__rij--velden { grid-template-columns: minmax(0, 1fr); }
}

/* De algemene leesbreedte van 78ch geldt niet in blokken waar rechts al een
   kaart staat: die kaart begrenst de tekst, en de limiet gaf daar alleen een
   gat in het midden. */
.st-cat-kop__tekst > p,
.st-cat-kop__tekst > ul,
.st-cat-kop__tekst > ol,
.st-cat-bodem__tekst > p,
.st-cat-bodem__tekst > ul,
.st-cat-bodem__tekst > ol,
.st-cat-bodem__tekst > h2,
.st-cat-bodem__tekst > h3,
.st-cat-bodem__tekst > h4,
.st-slottekst__tekst > p,
.st-slottekst__tekst > ul,
.st-slottekst__tekst > ol,
.st-slottekst__tekst > h2,
.st-slottekst__tekst > h3,
.st-slottekst__tekst > h4 {
    max-width: none;
}

/* ======================================================================== */
/* Accountpagina's                                                          */
/* ======================================================================== */
/* Uit referentie/account-dashboard.png: twee kaarten links (wie je bent, het
   menu), de inhoud rechts. */

.st-account { padding-block: 26px 60px; }

.st-account__rij {
    display: flex;
    align-items: flex-start;
    gap: 34px;
}

.st-account__zij {
    width: 288px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 24px;
}

.st-account__inhoud { flex: 1 1 0; min-width: 0; }

.st-account__kaart {
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-radius: 16px;
}

.st-account__wie {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
}

.st-account__bol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--st-actie);
    color: #fff;
    font-family: var(--st-font-kop);
    font-size: 20px;
    font-weight: 700;
}

.st-account__bol--groot {
    width: 66px;
    height: 66px;
    font-size: 28px;
    background: linear-gradient(150deg, var(--st-actie), var(--st-groen-diep));
}

.st-account__wie-tekst { display: flex; flex-direction: column; min-width: 0; }
.st-account__wie-tekst strong { font-size: 15.5px; font-weight: 600; }

.st-account__wie-tekst span {
    font-size: 13.5px;
    color: var(--st-tekst-zwak);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-account__menu { padding: 10px; display: flex; flex-direction: column; gap: 2px; }

.st-account__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 15px;
    color: var(--st-tekst-sec);
    text-decoration: none;
}

.st-account__link svg { flex-shrink: 0; color: var(--st-tekst-zwak); }
.st-account__link:hover { background: var(--st-tegel); color: var(--st-tekst); }
.st-account__link:hover svg { color: var(--st-tekst-sec); }

.st-account__link.is-actief {
    background: var(--st-actie);
    color: #fff;
    font-weight: 600;
}

.st-account__link.is-actief svg { color: #fff; }

.st-account__link--uit {
    margin-top: 8px;
    border-top: 1px solid var(--st-rand);
    border-radius: 0 0 10px 10px;
    padding-top: 16px;
    color: #b3261e;
}

.st-account__link--uit svg { color: #b3261e; }
.st-account__link--uit:hover { background: #fbeceb; color: #8f1e18; }

/* --- inhoud ------------------------------------------------------------- */

.st-account__titel {
    font-family: var(--st-font-kop);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.5px;
    margin: 0 0 20px;
}

.st-account__welkom {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-radius: 16px;
    padding: 24px 26px;
    margin-bottom: 20px;
}

.st-account__welkom-kop {
    font-family: var(--st-font-kop);
    font-size: 21px;
    font-weight: 700;
    margin: 0 0 5px;
}

.st-account__welkom-tekst { margin: 0; font-size: 15px; color: var(--st-tekst-sec); }

.st-account__tegels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 18px;
    margin-bottom: 20px;
}

.st-account__tegel {
    background: var(--st-groen-tint);
    border: 1px solid var(--st-groen-rand);
    border-radius: 16px;
    padding: 22px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.st-account__tegel-icoon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--st-actie);
    color: #fff;
    margin-bottom: 6px;
}

.st-account__tegel-kop {
    font-family: var(--st-font-kop);
    font-size: 17px;
    font-weight: 700;
    color: var(--st-tekst);
    margin: 0;
}

.st-account__tegel-tekst {
    margin: 0 0 6px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--st-tekst-sec);
    flex-grow: 1;
}

.st-account__tegel-knop { width: 100%; justify-content: center; gap: 8px; }

.st-account__oproep {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--st-groen-tint);
    border: 1px solid var(--st-groen-rand);
    border-radius: 16px;
    padding: 20px 24px;
}

.st-account__oproep-icoon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--st-wit);
    color: var(--st-tekst);
}

.st-account__oproep-tekst { flex-grow: 1; display: flex; flex-direction: column; gap: 3px; }

.st-account__oproep-tekst strong {
    font-family: var(--st-font-kop);
    font-size: 16.5px;
    font-weight: 700;
    color: var(--st-tekst);
}

.st-account__oproep-tekst span { font-size: 14.5px; color: var(--st-tekst-sec); }
.st-account__oproep-knop { flex-shrink: 0; gap: 8px; }

@media (max-width: 991px) {
    .st-account__rij { flex-direction: column; gap: 22px; }
    .st-account__zij { width: 100%; position: static; }
    .st-account__menu { flex-direction: row; flex-wrap: wrap; }
    .st-account__link { flex: 1 1 auto; }
    .st-account__link--uit { border-top: 0; margin-top: 0; padding-top: 12px; border-radius: 10px; }
    .st-account__titel { font-size: 25px; }
}

@media (max-width: 767px) {
    .st-account__oproep { flex-wrap: wrap; }
    .st-account__oproep-knop { width: 100%; justify-content: center; }
}

/* =========================================================================
   Uitverkocht: één signaal in plaats van vier

   Een product dat niet op voorraad is, riep het op vier plekken tegelijk:
   een groene balk over de hele foto, een rode regel boven de knop, de
   doorgehaalde maten, en de knop zelf ("Uitverkocht"). Groen leest bovendien
   als goed nieuws, en dat is het niet.

   Wat blijft: een rustige grijze pil op de foto, de doorgehaalde maten (die
   zeggen wélke maat weg is) en de knop. De rest gaat weg.

   NB: deze regels staan bewust achteraan. Het middenstuk van dit bestand
   bevat een gedupliceerd blok (~600 regels), waardoor een wijziging in de
   eerste kopie verderop weer overschreven wordt.
   ========================================================================= */

/* De pil stond over de volle breedte van de foto: .tp-product-badge is een
   flexkolom, en die rekt zijn kinderen standaard op. */
.tp-product-details-thumb-wrapper > .tp-product-badge { align-items: flex-start; }

/* De badge hoort op de foto. Met miniaturen ernaast begint de foto pas na die
   strook van 80 px, en stond de badge dus over het eerste miniatuurtje. */
.tp-product-details-thumb-wrapper:has(.bb-product-gallery-thumbnails img) > .tp-product-badge { left: 98px; }

.tp-product-details-thumb-wrapper > .tp-product-badge .product-out-stock {
    background: var(--st-tekst-sec-2);
    color: var(--st-wit);
    font-size: 11px;
    letter-spacing: .3px;
    padding: 5px 11px;
}

/* Botble zet hier met JavaScript style="display: block" op zodra de status
   "niet op voorraad" wordt. Inline stijl wint van een gewone regel, dus hier
   is !important nodig — zonder dat bleef de rode dubbelmelding staan. */
.st-pd__formulier .number-items-available,
.st-pd__formulier .tp-product-details-inventory,
.st-pd__formulier .bb-product-availability { display: none !important; }

/* In het overzicht staat dezelfde melding op elke kaart die uitverkocht is.
   Massief donkergrijs met hoofdletters werd dan een rij alarmbelletjes. Wit
   met een dunne rand leest als een label bij de foto, niet als waarschuwing.
   De aanbiedingsbadge blijft wél opvallen — die mág schreeuwen. */
.st-product .tp-product-badge .product-out-stock {
    background: rgba(255, 255, 255, .92);
    color: var(--st-tekst-sec);
    border: 1px solid var(--st-rand);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    padding: 5px 10px;
    backdrop-filter: blur(2px);
}

/* --- terug-naar-boven: naar de linkerkant ------------------------------
   Shofy zet .back-to-top-wrapper rechtsonder, en daar staat de chat al: het
   pijltje verdween half achter de knop en achter het balonnetje van Blengi
   (z-index 99 tegen die van de widget). Boven de chat schuiven hielp maar
   half, want het balonnetje klapt open naar boven.

   Links is er geen enkel conflict. Op mobiel telt alleen de hoogte van de
   vaste balken onderaan mee; die meet agrowinkel.js in --st-onderbalken. */
.back-to-top-wrapper {
    bottom: 30px;
    left: 34px;
    right: auto;
}



/* --- niets meer zwevends op mobiel -----------------------------------
   Hier stond eerst een som: til de chatknop en het pijltje precies
   --st-onderbalken + 12px op, zodat ze boven de vaste balken uitkomen. Die
   som klopte in de browser op de computer, maar op een telefoon niet.

   De reden is dat er twee metingen naast elkaar liepen. Het pijltje volgde
   --st-onderbalken uit agrowinkel.css; de chatbubbel zit in de shadow root
   van Blengi en werd door blengi.js met een eigen meting opgetild. Twee
   metingen, twee momenten, twee uitkomsten — op een iPhone stond het pijltje
   er ruim dertig pixels naast en raakte de bubbel de menubalk bijna. En zelfs
   als beide sommen kloppen, zit de zichtbare cirkel van de widget anders in
   zijn doos dan die van het pijltje, dus lijnen ze nooit uit.

   Daaronder zat een groter probleem: op een productpagina stapelden zich vier
   lagen onderaan het scherm — de menubalk, de bestelbalk, de chatbubbel en het
   pijltje. Ook perfect uitgelijnd is dat te veel.

   Dus geen som meer, maar minder onderdelen:

     - het pijltje verdwijnt op mobiel; de telefoon heeft er al een gebaar
       voor (tik op de statusbalk);
     - de chat verhuist naar de menubalk zelf, als knop "Hulp"
       (partials/navigation-bar.blade.php). blengi.js verbergt de zwevende
       knop van de widget op mobiel.

   Op de computer blijft alles zoals het was: pijltje linksonder, chat
   rechtsonder, ruimte zat. */
@media (max-width: 991px) {
    .back-to-top-wrapper,
    .st-blengi-launcher {
        display: none !important;
    }
}

/* --- de chatknop in de onderbalk -------------------------------------- */

/* Shofy schaalt elke svg in de balk naar 2rem. De avatar is een gevulde
   groene cirkel en weegt daardoor zwaarder dan de lijnicoontjes ernaast;
   iets kleiner staat hij op gelijke voet. */
.st-onderbalk__chat .st-blengi__sok {
    width: 30px;
    height: 30px;
    display: inline-block;
    /* De lijnicoontjes ernaast zijn 32px hoog. Deze pixel boven en onder houdt
       de regel even hoog, zodat het label niet omhoog springt en de cirkel op
       dezelfde hoogte staat als de rest. */
    margin: 1px 0;
    vertical-align: middle;
}

/* Met zes kolommen blijft er ~60px per knop over. De labels moeten dan een
   maatje kleiner, anders kapt text-truncate ze af. */
.st-onderbalk--zes .tp-mobile-item-btn span {
    font-size: min(var(--bottom-bar-menu-text-font-size, 13px), 11px);
}

/* =========================================================================
   Het inline-kaartje van Blengi in onze pagina

   De kaart zelf zit in een shadow root; wij bepalen alleen waar hij staat en
   welke kleuren hij aanhoudt. Die kleuren geven we door met --pb-inline-*
   custom properties: die erven over de shadow-grens heen. Alles wat ín de
   kaart staat — naam, begroeting, vragen — komt uit het Blengi-dashboard.
   ========================================================================= */

.st-blengi-kaart {
    --pb-inline-max-width: 100%;
    --pb-inline-bg: var(--st-wit);
    --pb-inline-border: 1px solid var(--st-rand);
    --pb-inline-radius: var(--st-radius-kaart);
    --pb-inline-accent: var(--st-actie);
    --pb-inline-text: var(--st-tekst);
    --pb-inline-font: var(--st-font-body);
    --pb-inline-shadow: none;
    --pb-inline-padding: 18px 20px;
}

/* In het productraster: over de volle breedte, met dezelfde tussenruimte als
   de kaarten eromheen. Zonder grid-column zou hij één cel innemen en naast
   een product komen te staan. */
.st-productraster > .st-blengi-kaart--breed {
    grid-column: 1 / -1;
    margin: 4px 0;
}

/* Op de productpagina staat hij onder de foto (desktop) of onder de
   productinformatie (mobiel); die keuze staat bij .st-blengi--onderfoto. */
.st-blengi-kaart.st-blengi--onderfoto { margin-top: 24px; }
.st-blengi-kaart.st-blengi--onderinfo { margin-top: 18px; }

/* Het kaartje verschijnt pas als de widget mount, dus ná de cookiekeuze.
   Tot dan is het element leeg; zonder deze regel staat er een lege witte
   doos met een rand omheen te wachten. */
.st-blengi-kaart:not([data-pitchbar-mounted]) { display: none; }

/* Het pijltje staat links, de chat rechts — ze zitten elkaar dus niet meer in
   de weg. blengi.js zet nog wel de klasse .st-chat-in-de-weg zodra het
   balonnetje of het paneel openstaat; die staat klaar mocht er ooit iets
   anders in die hoek komen. */

/* =========================================================================
   Toegankelijkheid
   ========================================================================= */

/* --- springlink naar de inhoud -------------------------------------------
   Onzichtbaar tot iemand hem met Tab bereikt. Niet met display:none of
   visibility:hidden verstoppen: dan haalt de tabvolgorde hem ook niet meer op
   en heb je niets opgelost. */
.st-springlink {
    /* fixed en niet absolute: bij een ingelogde beheerder staat de adminbalk
       bóven de body, en dan schuift een absolute element met een negatieve
       transform niet buiten beeld maar precies over die balk heen. */
    position: fixed;
    top: 0;
    left: 8px;
    z-index: 10000;
    transform: translateY(-200%);
    background: var(--st-actie);
    color: var(--st-op-actie);
    padding: 10px 18px;
    border-radius: 0 0 8px 8px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .15s ease;
}

.st-springlink:focus,
.st-springlink:focus-visible {
    transform: translateY(0);
    color: var(--st-wit);
    outline: 2px solid var(--st-groen-diep);
    outline-offset: 2px;
}

/* De <main> krijgt tabindex="-1" zodat de sprong ook echt de focus verplaatst
   en niet alleen scrollt. Dat mag geen zichtbare rand opleveren bij een
   muisklik. */
main:focus {
    outline: none;
}

/* --- alleen voor voorlezers ----------------------------------------------
   Voor koppen die de opbouw van een pagina dragen maar op het scherm niets
   toevoegen — de kop boven het filterblok bijvoorbeeld: met een blik zie je
   wat die kolom is, met een schermlezer niet. */
.st-alleen-voorlezer {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------------
   Prijsschuif in de filterkolom (jQuery UI)
   ---------------------------------------------------------------------------
   Shofy laat de gevulde balk en de rand om de grepen op #0989ff staan, een
   blauw dat nergens in de huisstijl voorkomt en dat op een categoriepagina het
   enige felle element naast de bestelknop was. Hier volgt hij de actiekleur.
   De maten blijven van Shofy: balk 3 px, greep 16 px rond. */
.price-slider .ui-slider-range { background: var(--st-actie); }
.price-slider .ui-slider-handle { border-color: var(--st-actie); }

/* ---------------------------------------------------------------------------
   Productkaart — merk, sterren, kenmerken en leverregel
   ---------------------------------------------------------------------------
   Uit het ontwerp (referentie/categoriepagina.html). Drie dingen staan op de
   kaart die Botble niet kent, en alle drie hebben een lege stand: zonder merk
   blijft de regel leeg staan zodat de prijzen op de kaarten ernaast uitlijnen,
   zonder beoordelingen staat er tekst in plaats van een lege sterrenrij, en
   zonder kenmerken wordt de kaart niet hoger gehouden dan nodig. */

.st-product__merk {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--st-tekst-zwak);
    line-height: 1.4;
}
.st-product__merk a { color: inherit; text-decoration: none; }
.st-product__merk a:hover { color: var(--st-actie-tekst); }

/* st_onderdeel: klein label bovenaan de kaart, geen filter — de facetschakelaar
   is fase 2. Muted zodat het niet met de badges (actie, nieuw) concurreert. */
.st-product__label {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--st-tekst-zwak);
    background: var(--st-tegel);
    padding: 3px 9px;
    border-radius: var(--st-radius-pill);
}

.st-sterren {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 13px;
    color: var(--st-tekst-sec);
    white-space: nowrap;
}
.st-sterren__rij { display: inline-flex; gap: 1px; color: var(--st-ster); }
.st-sterren b { color: var(--st-tekst); font-weight: 600; }

.st-product__kenmerken {
    margin: 7px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--st-tekst-sec);
}
.st-product__kenmerken li { display: flex; gap: 7px; align-items: flex-start; line-height: 1.4; margin-bottom: 3px; }
.st-product__kenmerken svg { flex: none; margin-top: 3px; color: var(--st-groen-tekst); }

/* De leverregel kent drie standen; de kleur draagt de betekenis. Op de kaart
   staat de korte vorm, altijd op één regel — anders verspringt de prijs. */
.st-levering {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--st-groen-tekst);
}
.st-levering--wacht { color: var(--st-geel-tekst); }
.st-levering--uit { color: var(--st-tekst-zwak); }
.st-stip { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; margin-top: 5px; }
.st-levering__kort { display: none; }

.st-product .st-levering {
    margin: 8px 16px 14px;
    padding-top: 9px;
    border-top: 1px solid var(--st-rand);
    white-space: nowrap;
}
.st-product .st-levering__lang { display: none; }
.st-product .st-levering__kort { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------------------
   Megamenu
   ---------------------------------------------------------------------------
   Tien afdelingen links, per afdeling drie kolommen subcategorieën rechts.
   Uit het ontwerp (referentie/homepage.html?mega=1).

   Het paneel staat naast de knop in de HTML, niet erin, zodat het over de
   volle breedte van de balk uitklapt. Openen en sluiten met opacity en
   visibility — nooit met display, want dat geeft bij Shofy een trillende
   overgang. En géén overflow op het paneel: de vorige categorielijst had dat
   wel, en dan knipt hij alles weg wat erbuiten valt. */

.st-mega {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 39;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .18s, transform .18s, visibility .18s;
    pointer-events: none;
}
/* Alleen op klik, zoals in het ontwerp. Openen op hover kan hier niet: tussen
   de knop en het paneel zit de 22 px padding van de hoofdbalk, en daar is
   niets gehoverd — het menu klapte dicht terwijl je ernaartoe bewoog. */
.st-mega.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}

.st-mega__paneel {
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-top: 0;
    border-radius: 0 0 20px 20px;
    box-shadow: var(--st-schaduw-2);
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 300px;
    overflow: hidden;
}

.st-mega__kolom { background: var(--st-bodem); border-right: 1px solid var(--st-rand); display: flex; flex-direction: column; }
.st-mega__afdelingen { padding: 14px; flex: 1; }
.st-mega__afdelingen a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14.5px;
    color: var(--st-tekst-sec);
    text-decoration: none;
}
.st-mega__afdelingen a svg { flex: none; }
.st-mega__afdelingen a svg:last-child { margin-left: auto; opacity: .45; }
.st-mega__afdelingen a.is-actief,
.st-mega__afdelingen a:hover { background: var(--st-wit); color: var(--st-tekst); box-shadow: var(--st-schaduw-1); }
.st-mega__afdelingen a.is-actief svg:first-child { color: var(--st-actie-tekst); }

/* Onderdelen staan niet tussen de tien afdelingen: die kies je op machine en
   merk, niet bladerend. Vandaar een eigen ingang onderaan de kolom. */
.st-mega__onderdelen {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 14px 14px;
    padding: 11px 12px;
    border-radius: 12px;
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    color: var(--st-tekst-sec);
    text-decoration: none;
}
.st-mega__onderdelen:hover { border-color: var(--st-tekst); color: var(--st-tekst); }
.st-mega__onderdelen svg { flex: none; }
.st-mega__onderdelen svg:last-child { margin-left: auto; opacity: .45; }
.st-mega__onderdelen b { display: block; font-size: 14.5px; color: var(--st-tekst); }
.st-mega__onderdelen small { font-size: 12.5px; color: var(--st-tekst-zwak); }

.st-mega__sub { padding: 26px 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 32px; align-content: start; }
.st-mega__sub h3 { grid-column: 1 / -1; font-size: 20px; display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; }
.st-mega__sub h3 a { font: 600 13.5px var(--st-font-body); letter-spacing: 0; color: var(--st-actie-tekst); text-decoration: none; }
.st-mega__sub h4 { font: 600 12px var(--st-font-body); text-transform: uppercase; letter-spacing: .6px; color: var(--st-tekst-zwak); margin: 8px 0; white-space: nowrap; }
.st-mega__sub ul { list-style: none; margin: 0; padding: 0; }
.st-mega__sub li a { display: block; padding: 4px 0; font-size: 14.5px; color: var(--st-tekst-sec); text-decoration: none; }
.st-mega__sub li a:hover { color: var(--st-actie-tekst); }

.st-mega__promo { background: var(--st-geel); padding: 24px; display: flex; flex-direction: column; gap: 10px; border-left: 1px solid var(--st-hooi-rand); }
.st-mega__beeld {
    height: 150px;
    margin: -4px 0 4px;
}

.st-mega__beeld img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.st-mega__promo h4 { font-size: 18px; }
.st-mega__promo p { font-size: 14px; color: var(--st-tekst-sec); }

/* Zonder uitgelicht vlak zakt het middenpaneel dicht: dan twee kolommen. */
.st-mega__paneel:not(:has(.st-mega__promo)) { grid-template-columns: 300px minmax(0, 1fr); }

/* ---------------------------------------------------------------------------
   Veegrij met subcategorieën (categoriepagina)
   ---------------------------------------------------------------------------
   Altijd één rij; wat niet past veeg je opzij. Geen tweede regel met één wees
   erop, en geen rooster dat de producten naar beneden duwt.

   De rij is zelf het ankerpunt van wat erin staat (position: relative). Zonder
   dat ontsnapt een absoluut gepositioneerd kind aan de overflow en wordt de
   hele pagina breder dan het scherm. */

.st-veegrij { position: relative; }
.st-subcats {
    position: relative;
    display: flex;
    gap: 10px;
    margin: 14px 0 2px;
    overflow-x: auto;
    scrollbar-width: none;
}
.st-subcats::-webkit-scrollbar { display: none; }

.st-subcat {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: none;
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-radius: var(--st-radius-pill);
    padding: 5px 18px 5px 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--st-tekst);
    text-decoration: none;
    white-space: nowrap;
}
.st-subcat:not(:has(.st-subcat__beeld)) { padding-left: 18px; }
.st-subcat:hover { border-color: var(--st-tekst); color: var(--st-tekst); }
.st-subcat__beeld { width: 36px; height: 36px; border-radius: 50%; background: var(--st-tegel); padding: 5px; flex: none; }
.st-subcat__beeld img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.st-subcat small { font-weight: 500; color: var(--st-tekst-zwak); font-size: 12.5px; }

/* Met een muis veeg je niet. Op desktop krijgt de rij pijlknoppen en een
   uitloop die laat zien dát er meer staat; het script zet kan-terug en
   kan-verder zodra er iets te schuiven valt. */
.st-veegrij::before,
.st-veegrij::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 56px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
    z-index: 1;
}
.st-veegrij::before { left: 0; background: linear-gradient(to left, transparent, var(--st-pagina) 62%); }
.st-veegrij::after { right: 0; background: linear-gradient(to right, transparent, var(--st-pagina) 62%); }
.st-veegrij.kan-terug::before, .st-veegrij.kan-verder::after { opacity: 1; }

.st-veegrij__knop {
    position: absolute;
    top: 50%;
    margin-top: -17px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--st-rand);
    background: var(--st-wit);
    color: var(--st-tekst-sec);
    display: grid;
    place-items: center;
    box-shadow: var(--st-schaduw-2);
}
.st-veegrij__knop:hover { color: var(--st-tekst); border-color: var(--st-tekst); }
.st-veegrij__knop--terug { left: -6px; }
.st-veegrij__knop--verder { right: -6px; }

/* Onder 992 px veeg je gewoon met je vinger; dan geen knoppen en geen uitloop. */
@media (max-width: 991.98px) {
    .st-veegrij__knop, .st-veegrij::before, .st-veegrij::after { display: none; }
}

/* ---------------------------------------------------------------------------
   Vinkrijen in de filterkolom
   ---------------------------------------------------------------------------
   Botble rendert per filterblok een <ul class="filter-checkbox"> met per regel
   een input en een label. Die markup laten we staan — zijn JavaScript hangt
   eraan — en we geven hem de vorm uit het ontwerp: het vinkje links, de naam
   ernaast, en straks het aantal rechts uitgelijnd.

   Het aanraakdoel is 44 px hoog, ook op desktop: dat is de maat waarop het
   ontwerp is nagemeten en het leest rustiger dan dicht opeen. */

.st-filters .bb-product-filter-items { list-style: none; margin: 0; padding: 0; }

.st-filters .bb-product-filter-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 3px 0;
}
.st-filters .bb-product-filter-item input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin: 0;
    flex: none;
    accent-color: var(--st-tekst);
}
.st-filters .bb-product-filter-item label {
    margin: 0;
    cursor: pointer;
    font-size: 14px;
    color: var(--st-tekst-sec);
}
.st-filters .bb-product-filter-item:hover label { color: var(--st-tekst); }

/* Het aantal achter elke optie hoort bij fase 2 (eigen facettabel): een query
   per optie is te duur op een categorie die al tientallen queries doet. Staat
   het er, dan lijnt het rechts uit. */
.st-filters .bb-product-filter-item .st-aantal { margin-left: auto; font-size: 12.5px; color: var(--st-tekst-zwak); }

/* ---------------------------------------------------------------------------
   Homepage: afdelingen en onderdelen
   ---------------------------------------------------------------------------
   Twee rijen tegels uit het ontwerp. De afdelingen staan op vijf kolommen
   (tien afdelingen = twee nette rijen), de onderdelen op vier.

   Beide halen hun inhoud uit de categorieboom en uit functions/afdelingen.php,
   niet uit de page-builder: anders loopt de homepage uit de pas met het
   megamenu zodra de indeling verandert. */

.st-link--pijl { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14px; color: var(--st-actie-tekst); text-decoration: none; white-space: nowrap; }
.st-link--pijl:hover { text-decoration: underline; text-underline-offset: 3px; }

.st-afdelingen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.st-afdeling {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-radius: var(--st-radius-kaart);
    padding: 20px;
    text-decoration: none;
    transition: box-shadow .18s, transform .18s, border-color .18s;
}
.st-afdeling:hover { box-shadow: var(--st-schaduw-2); transform: translateY(-2px); border-color: var(--st-rand-input); }
.st-afdeling__icoon {
    width: 52px; height: 52px;
    border-radius: 16px;
    display: grid; place-items: center;
    background: var(--st-geel);
    color: var(--st-tekst);
    transition: background .18s, color .18s;
}
.st-afdeling:hover .st-afdeling__icoon { background: var(--st-groen-diep); color: var(--st-mint); }
.st-afdeling b { font: 600 16px/1.25 var(--st-font-kop); letter-spacing: -.2px; color: var(--st-tekst); }
.st-afdeling__oms { font-size: 13px; line-height: 1.45; color: var(--st-tekst-zwak); }

.st-onderdelen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.st-onderdeel {
    display: flex;
    align-items: center;
    gap: 13px;
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-radius: var(--st-radius-kaart);
    padding: 14px 16px;
    text-decoration: none;
    transition: box-shadow .18s, border-color .18s;
}
.st-onderdeel:hover { box-shadow: var(--st-schaduw-2); border-color: var(--st-rand-input); }
.st-onderdeel__icoon { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--st-groen-tint); color: var(--st-groen-tekst); }
.st-onderdeel__tekst { min-width: 0; }
.st-onderdeel b { display: block; font: 600 14.5px/1.3 var(--st-font-kop); color: var(--st-tekst); }
.st-onderdeel small { display: block; font-size: 12.5px; line-height: 1.4; color: var(--st-tekst-zwak); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-onderdeel__aantal { margin-left: auto; flex: none; font-size: 12.5px; font-weight: 600; color: var(--st-tekst-zwak); }

@media (max-width: 1199.98px) {
    .st-afdelingen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .st-onderdelen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .st-afdelingen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .st-afdeling { padding: 14px; }
    .st-afdeling__oms { display: none; }
    .st-onderdelen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 575.98px) {
    /* Op een telefoon staan de afdelingen als brede rijen: het icoon links,
       de naam ernaast. Twee kolommen met een kop van drie woorden leest niet. */
    .st-afdelingen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .st-afdeling { flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; min-height: 60px; }
    .st-afdeling__icoon { width: 38px; height: 38px; border-radius: 12px; }
    .st-afdeling__icoon svg { width: 21px; height: 21px; }
    .st-afdeling b { font-size: 14px; line-height: 1.2; }
    .st-onderdelen { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   Navigatiebalk: afdelingen links, service rechts
   ---------------------------------------------------------------------------
   De menu-items krijgen hun klasse op de <li>. "Aanbiedingen" draagt
   st-nav__actie en duwt zichzelf en alles erachter naar rechts. */
.st-nav__menu nav > ul > li.st-nav__actie { margin-left: auto; }
.st-nav__menu nav > ul > li.st-nav__actie > a { color: var(--st-actie-tekst); }

/* ---------------------------------------------------------------------------
   Homepage: seizoensvlakken, keuzehulpen, seizoensblok, merken, zakelijk
   --------------------------------------------------------------------------- */

.st-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--st-tekst-zwak); }

.st-promos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.st-promo {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-height: 176px;
    text-decoration: none;
}
.st-promo--groen { background: var(--st-groen-diep); color: var(--st-op-donker); }
.st-promo--groen h3 { color: var(--st-wit); }
.st-promo--groen .st-label { color: var(--st-mint); }
.st-promo--groen .st-link--pijl { color: var(--st-actie-licht); }
.st-promo--wit { background: var(--st-wit); border: 1px solid var(--st-rand); }
.st-promo--hooi { background: var(--st-geel); border: 1px solid var(--st-hooi-rand); }
.st-promo h3 { font-size: 21px; font-weight: 600; margin: 0; }
.st-promo p { font-size: 14.5px; margin: 0 0 8px; }
.st-promo .st-link--pijl { font-weight: 600; white-space: nowrap; margin-top: auto; }
.st-promo__beeld { position: absolute; right: 2px; bottom: -2px; width: 130px; height: 130px; pointer-events: none; }
.st-promo__beeld img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

/* De tekeningen uit functions/illustraties.php vullen hun vak. Ze zijn
   plaatshouders voor productfoto's, niet het eindbeeld. */
.st-illu { width: 100%; height: 100%; display: block; }
.st-promo:has(.st-promo__beeld) { padding-right: 150px; }

.st-keuzehulpen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.st-hulpkaart { display: flex; flex-direction: column; gap: 10px; background: var(--st-wit); border: 1px solid var(--st-hooi-rand); border-radius: var(--st-radius-kaart); padding: 26px; }
.st-hulpkaart__icoon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--st-groen-diep); color: var(--st-mint); }
.st-hulpkaart h3 { font-size: 19px; margin: 0; }
.st-hulpkaart p { font-size: 14.5px; color: var(--st-tekst-sec); flex: 1; margin: 0; }

.st-seizoen { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr); gap: 24px; }
.st-seizoen__groot {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background: var(--st-groen-diep);
    color: var(--st-op-donker);
    padding: 36px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 320px;
}
.st-seizoen__groot .st-label { color: var(--st-mint); }
.st-seizoen__groot h2 { color: var(--st-wit); font-size: 30px; margin: 8px 0 10px; max-width: 14ch; }
.st-seizoen__groot p { max-width: 36ch; margin-bottom: 22px; }
.st-seizoen__lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-content: start; }
.st-klus { display: flex; align-items: center; gap: 16px; background: var(--st-wit); border: 1px solid var(--st-rand); border-radius: var(--st-radius-kaart); padding: 14px 18px; text-decoration: none; transition: box-shadow .18s, border-color .18s; }
a.st-klus:hover { box-shadow: var(--st-schaduw-2); border-color: var(--st-rand-input); }
.st-klus { padding-left: 14px; }
.st-klus__beeld { width: 84px; height: 84px; flex: none; border-radius: 12px; background: var(--st-tegel); padding: 8px; }
.st-klus__beeld img { width: 100%; height: 100%; object-fit: contain; }
.st-seizoen__beeld { position: absolute; right: -20px; bottom: -16px; width: 250px; height: 250px; pointer-events: none; }
.st-seizoen__beeld img { width: 100%; height: 100%; object-fit: contain; }
.st-klus__tekst { min-width: 0; }
.st-klus b { display: block; font: 600 16px/1.3 var(--st-font-kop); color: var(--st-tekst); overflow-wrap: break-word; }
.st-klus__tekst > span { font-size: 13.5px; color: var(--st-tekst-sec); line-height: 1.4; display: block; }
.st-klus > svg { margin-left: auto; flex: none; color: var(--st-tekst-zwak); }

.st-merken { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
.st-merk { display: grid; place-items: center; height: 64px; background: var(--st-wit); border: 1px solid var(--st-rand); border-radius: var(--st-radius-klein); font: 600 15px var(--st-font-kop); letter-spacing: -.2px; color: var(--st-tekst-sec); text-decoration: none; }
.st-merk:hover { color: var(--st-tekst); border-color: var(--st-rand-input); }
.st-merk img { max-height: 40px; max-width: 80%; object-fit: contain; }

.st-band { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; border-radius: 24px; padding: 44px 52px; }
.st-band--donker { background: var(--st-groen-diep); color: var(--st-op-donker); }
.st-band--donker h2 { color: var(--st-wit); }
.st-band h2 { font-size: 30px; margin: 8px 0 12px; }
.st-band p { max-width: 52ch; }
.st-band .st-label { color: var(--st-actie-licht); }
.st-band__knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.st-band__punten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.st-band__punt { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--st-radius-klein); padding: 16px; }
.st-band__punt svg { color: var(--st-mint); margin-bottom: 8px; }
.st-band__punt b { display: block; font-size: 14.5px; color: var(--st-wit); line-height: 1.3; }
.st-band__punt span { display: block; font-size: 13px; margin-top: 2px; }

@media (max-width: 1199.98px) {
    .st-merken { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .st-promos { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .st-promo { min-height: 0; padding: 20px 22px; }
    .st-promo:has(.st-promo__beeld) { padding-right: 112px; }
    .st-keuzehulpen { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .st-seizoen { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .st-seizoen__groot { min-height: 0; }
    .st-seizoen__lijst { grid-template-columns: minmax(0, 1fr); }
    .st-merken { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .st-merk { height: 52px; font-size: 14px; }
    .st-band { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px 22px; border-radius: 20px; }
    .st-band h2 { font-size: 25px; }
}

/* Menu-items breken niet af: "Werkkleding & schoeisel" op twee regels maakt
   de balk twee keer zo hoog en leest als twee items. Past het niet, dan valt
   het laatste item weg (zie het breekpunt hieronder), zoals in het ontwerp. */
.st-nav__menu nav > ul > li > a { white-space: nowrap; }

@media (max-width: 1320px) {
    /* Onder deze breedte past "Zakelijk" er niet meer bij zonder te wringen.
       Liever één item minder dan een balk die afbreekt. */
    .st-nav__menu nav > ul > li:last-child { display: none; }
}

/* De zwevende balk heeft geen eigen menu meer (zie .st-sticky__rij
   hierboven), dus de acties blijven het enige dat rechts moet uitlijnen. */
.st-sticky .st-acties { margin-left: auto; flex: none; }

/* De productrijen op de homepage en onder een product staan in het ontwerp op
   VIJF kolommen, niet vier. Met vier bleef er bij vijf producten één wees op
   een tweede regel staan. */
.st-productrij { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 1400px) { .st-productrij { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .st-productrij { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .st-productrij { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Tekst op de donkere vlakken.
   ---------------------------------------------------------------------------
   Het thema zet een globale kleur op <p> (grijs, voor op wit). In een donker
   vlak won die van de kleur van het vlak zelf: gemeten 1,88:1, ver onder de
   4,5 die de huisstijl eist. Hier expliciet, zodat de alinea de kleur van zijn
   vlak volgt. */
.st-seizoen__groot p,
.st-band--donker p,
.st-promo--groen p { color: var(--st-op-donker); }

/* Twee knopstijlen uit het ontwerp die het thema niet had.
   ---------------------------------------------------------------------------
   st-knop--licht wordt op de donkere vlakken gebruikt (seizoensblok,
   zakelijk-band). Zonder deze regel had hij géén achtergrond en erf-groene
   tekst: onzichtbaar op donkergroen, gemeten 1,00:1. */
.st-knop--licht { background: var(--st-wit); color: var(--st-tekst); }
.st-knop--licht:hover { background: var(--st-geel); }

.st-knop--omlijnd { background: none; color: var(--st-wit); box-shadow: inset 0 0 0 1px var(--st-op-donker-zwak); }
.st-knop--omlijnd:hover { box-shadow: inset 0 0 0 1.5px var(--st-wit); }

/* De hero zonder zijkaarten loopt door tot de rand.
   ---------------------------------------------------------------------------
   .st-hero is een raster van twee kolommen: het grote vlak links en twee
   seizoenskaarten rechts. Agrowinkel zet die kaarten niet in de hero maar als
   drie vlakken eronder (zie [st-promos]), dus bleef de rechterkolom van 336 px
   leeg staan en hield het vlak op waar de pagina nog doorliep. */
.st-hero:not(:has(.st-hero__kaarten)) { grid-template-columns: minmax(0, 1fr); }

/* Bij een hero over de volle breedte mag de tekstkolom mee ademen; 480 px in
   een vlak van 1440 laat de kop te vroeg afbreken. */
.st-hero:not(:has(.st-hero__kaarten)) .st-hero__tekst { max-width: 560px; }

/* De knop "Alle categorieën" brak over twee regels en werd daarmee 80 px hoog,
   waardoor de hele balk twee keer zo hoog werd als in het ontwerp. */
.st-nav__categorieknop { white-space: nowrap; }

/* De vier beloften staan in het ontwerp in één witte kaart met dunne lijnen
   ertussen, niet als vier losse blokjes op de paginabodem. Dat bindt ze tot
   één belofte in plaats van vier losse mededelingen. */
.st-beloften__rij {
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-radius: var(--st-radius-kaart);
}
.st-beloften__rij > .st-belofte { padding: 18px 22px; }
.st-beloften__rij > .st-belofte + .st-belofte { border-left: 1px solid var(--st-rand); }

@media (max-width: 991.98px) {
    /* Onder elkaar verandert de scheiding van links naar boven. */
    .st-beloften__rij > .st-belofte + .st-belofte { border-left: 0; border-top: 1px solid var(--st-rand); }
}

/* Btw-schakelaar in de topbalk: twee standen, de gekozen stand is een gevuld
   vakje. Klein maar met een aanraakdoel dat op een telefoon werkt. */
.st-btw { display: inline-flex; background: rgba(255, 255, 255, .10); border-radius: var(--st-radius-pill); padding: 2px; flex: none; }
.st-btw button {
    border: 0;
    background: none;
    color: var(--st-op-donker);
    font: 600 12px var(--st-font-body);
    padding: 5px 12px;
    border-radius: var(--st-radius-pill);
    cursor: pointer;
    white-space: nowrap;
}
.st-btw button[aria-pressed="true"] { background: var(--st-wit); color: var(--st-tekst); }

/* Dezelfde schakelaar, maar op een lichte ondergrond (in het koopblok). Deze
   regels moeten ná .st-btw staan: ze hebben dezelfde specificiteit, dus wie
   het laatst komt wint. Stonden ze eerder in het bestand, dan bleef de
   schakelaar onzichtbaar wit-op-wit. */
.st-btw--licht { background: var(--st-tegel); }
.st-btw--licht button { color: var(--st-tekst-sec); font-size: 12.5px; padding: 5px 13px; }
.st-btw--licht button[aria-pressed="true"] { background: var(--st-groen-diep); color: var(--st-wit); }

@media (max-width: 991.98px) {
    /* Op een telefoon is de topbalk al krap; daar telt alleen de belofte. */
    .st-btw { display: none; }
}

/* ---------------------------------------------------------------------------
   Voettekst: contactregels en betaalwijzen
   ---------------------------------------------------------------------------
   Het ontwerp zet contact onderaan de pagina omdat iemand die daar komt
   meestal een vraag heeft. De betaalwijzen staan er met een eigen lijn-icoon
   en de naam ernaast, niet met merklogo-s: die zijn aan regels gebonden en
   verouderen. */

.st-footer__contact { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; }
.st-footer__contact li { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.st-footer__contact a { color: inherit; text-decoration: none; }
.st-footer__contact a:hover { text-decoration: underline; text-underline-offset: 3px; }
.st-footer__contact svg { flex: none; opacity: .7; }
.st-footer__contact span { opacity: .75; }

.st-footer__betalen { padding-block: 18px; border-top: 1px solid rgba(255, 255, 255, .16); }
.st-betaalwijzen { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.st-betaalwijze {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: var(--st-radius-klein);
    border: 1px solid rgba(255, 255, 255, .16);
    font-size: 13px;
    font-weight: 600;
}

/* Vier kolommen naast het merkblok, zoals in het ontwerp. */
@media (min-width: 992px) {
    .st-footer__binnen { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
}

/* Klantenservice en nieuwsbrief: twee kaarten van hetzelfde soort, naast
   elkaar. Staat de servicekaart uit, dan neemt de nieuwsbrief de hele rij. */
.st-service { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: stretch; }
.st-service--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-service__kaart {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-radius: var(--st-radius-kaart);
    padding: 28px;
}
.st-service__inhoud { min-width: 0; flex: 1; }
.st-service__icoon { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--st-groen-tint); color: var(--st-groen-tekst); }
.st-service__titel { font-size: 19px; margin: 0 0 6px; }
.st-service__tekst { font-size: 14.5px; color: var(--st-tekst-sec); margin: 0 0 12px; }
.st-service__rij { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.st-service__rij a { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--st-tekst); text-decoration: none; }
.st-service__rij a:hover { color: var(--st-actie-tekst); }
.st-service__rij svg { flex: none; opacity: .7; }

@media (max-width: 991.98px) { .st-service--twee { grid-template-columns: minmax(0, 1fr); gap: 12px; } }


/* =========================================================================
   Productpagina — laatste correcties
   -------------------------------------------------------------------------
   Deze regels staan bewust onderaan. In dit bestand komen sommige blokken nog
   dubbel voor (restanten van een kopie); een wijziging halverwege wordt dan
   door de tweede kopie overschreven. Onderaan wint hij altijd.
   OPRUIMEN: zoek op dubbele selectoren en haal de tweede kopie weg — op
   regelgrenzen, met de accolades vooraf nagerekend.
   ========================================================================= */

/* Wenslijst en delen als ronde knoppen op de foto. */
.st-galerij__acties {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.st-rondknop--stil {
    background: var(--st-wit);
    color: var(--st-tekst-sec);
    box-shadow: inset 0 0 0 1px var(--st-rand);
}

.st-rondknop--stil:hover {
    background: var(--st-wit);
    color: var(--st-tekst);
    box-shadow: inset 0 0 0 1.5px var(--st-groen-diep);
    transform: none;
}

.st-rondknop--stil.is-actief { color: var(--st-actie-tekst); }

/* De pasvormregel onder de maten. */
.st-pd__pasvorm {
    margin: 7px 0 0;
    font-size: 12.5px;
    color: var(--st-tekst-zwak);
}

/* Kleurrondjes van 46 px met een groene ring als ze gekozen zijn. Terracotta
   is hier verkeerd: dat is de kleur van de bestelknop, en die moet op deze
   pagina de enige zijn die zo hard roept. */
.st-pd__formulier .visual-swatch .bb-product-attribute-swatch-display {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--st-rand-input);
}

.st-pd__formulier .visual-swatch li label {
    display: block;
    border: 1px solid var(--st-rand-input);
    border-radius: 50%;
    padding: 4px;
}

.st-pd__formulier .visual-swatch li:has(input:checked) label {
    border: 2px solid var(--st-groen-diep);
    padding: 3px;
}

/* De kop boven elke keuzerij krijgt de gekozen waarde erachter (agrowinkel.js);
   dat mag niet als een tweede label ogen. */
.st-pd__formulier .bb-product-attribute-swatch-title {
    margin: 16px 0 8px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--st-tekst);
}


/* De ring om het gekozen kleurrondje stond eerder in dit bestand op de
   actiekleur; die zat op de SPAN, niet op het label. Hier alsnog groen. */
.st-pd__formulier .visual-swatch li input:checked + .bb-product-attribute-swatch-display,
.st-pd__formulier .visual-swatch li input:checked ~ .bb-product-attribute-swatch-display {
    box-shadow: inset 0 0 0 1px var(--st-rand-input);
    outline: 0;
    border: 0;
}

/* =========================================================================
   PRODUCTPAGINA NAAR HET ONTWERP — gemeten (24 september 2026)

   referentie/productpagina.html en de winkel draaiden naast elkaar in
   dezelfde browser, 1366 px breed; elk getal hieronder is een gemeten
   verschil, geen schatting. Het blok staat ONDERAAN met opzet: de regels
   voor .st-klus (±7370), .st-btw (±7506) en de swatches (±2760) staan
   eerder in dit bestand en zouden bij gelijke specificiteit winnen.
   Wie iets aan de productpagina verandert: doe het hier, niet daarboven.
   ========================================================================= */

/* --- basis: de tekstmaat van het ontwerp en groene koppen ---------------- */
.st-pd, .st-ankers, .st-pd__onder, .st-blok--los { font-size: 15.5px; }

.st-pd h1.st-pd__titel,
.st-pd__onder h2, .st-pd__onder h3,
.st-blok--los h2,
.st-zijkaart h3, .st-plusmin h3 { color: var(--st-tekst); }

/* --- kop: merk, titel, metaregel ----------------------------------------- */
.st-pd__categorie { font-size: 13px; letter-spacing: .4px; margin-bottom: 4px; }
.st-pd__categorie a { color: var(--st-tekst-zwak); }
.st-pd__categorie a:hover { color: var(--st-tekst); }

.st-pd__meta, .st-pd__meta span, .st-pd__meta a { font-size: 13.5px; }
.st-pd__meta { margin-bottom: 0; }

/* --- koopblok: prijsrij ---------------------------------------------------- */
.st-koopblok .st-pd__prijsregel { margin-bottom: 0; }
.st-koopblok__excl { margin-top: 0; }
.st-koopblok .st-btw--licht { padding: 3px; }
.st-koopblok .st-btw--licht button { line-height: 1.7; }

/* --- kleur en maat -------------------------------------------------------- */
/* Ritme uit het ontwerp: 16 px boven elke keuzerij, 8 px tussen kop en
   knoppen, niets eronder (de volgende rij brengt zijn eigen 16 mee). */
.st-pd__formulier .bb-product-attribute-swatches,
.st-pd__formulier .bb-product-attribute-swatch { margin-bottom: 0; }
.st-pd__formulier .bb-product-attribute-swatch-list { margin-bottom: 0; }
.st-pd__formulier .bb-product-attribute-swatch-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin: 16px 0 8px;
    font-size: 14.5px;
    font-weight: 600;
}

.st-pd__formulier .bb-product-attribute-swatch-title .st-pd__maattabel {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--st-actie-tekst);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* Kleur: rondjes van 46 px, 4 px wit ertussen de rand en de kleur, de gekozen
   met een rand van 2 px in erf-groen (ontwerp: .st-kleur). Botble zet zijn
   kleurvlak (46 px) in een pil van 68 x 42 — het vlak stak eruit. */
.st-pd__formulier .bb-product-attribute-swatch-list.visual-swatch { display: flex; flex-wrap: wrap; gap: 10px; }
.st-pd__formulier .bb-product-attribute-swatch-list.visual-swatch .bb-product-attribute-swatch-item { width: 46px; height: 46px; border-radius: 50%; overflow: visible; }
.st-pd__formulier .bb-product-attribute-swatch-list.visual-swatch .bb-product-attribute-swatch-item label {
    width: 46px;
    height: 46px;
    min-width: 0;
    padding: 4px;
    border: 1px solid var(--st-rand-input);
    border-radius: 50%;
    background: var(--st-wit);
    box-shadow: none;
    display: block;
}
.st-pd__formulier .bb-product-attribute-swatch-list.visual-swatch .bb-product-attribute-swatch-item input:checked + label,
.st-pd__formulier .bb-product-attribute-swatch-list.visual-swatch .bb-product-attribute-swatch-item label:has(input:checked) {
    border: 2px solid var(--st-groen-diep);
    padding: 3px;
    box-shadow: none;
}
.st-pd__formulier .bb-product-attribute-swatch-list.visual-swatch .bb-product-attribute-swatch-display {
    position: static;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--st-rand-input);
}

/* Maat: twaalf op één rij, 42 px hoog, hoek 11 px, letter 14/600. Botble's
   binnenste span had zelf ook een rand en een hoek: een lijn om een lijn. */
.st-pd__formulier .bb-product-attribute-swatch-list.text-swatch { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.st-pd__formulier .bb-product-attribute-swatch-list.text-swatch .bb-product-attribute-swatch-item { width: auto; min-width: 0; }
.st-pd__formulier .bb-product-attribute-swatch-list.text-swatch .bb-product-attribute-swatch-item label {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--st-rand-input);
    border-radius: 11px;
    background: var(--st-wit);
    box-shadow: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--st-tekst);
}
.st-pd__formulier .bb-product-attribute-swatch-list.text-swatch .bb-product-attribute-swatch-item label:hover { border-color: var(--st-tekst); }
.st-pd__formulier .bb-product-attribute-swatch-list.text-swatch li .bb-product-attribute-text-display,
.st-pd__formulier .bb-product-attribute-swatch-list.text-swatch li:not(.disabled) input:checked ~ .bb-product-attribute-text-display,
.st-pd__formulier .bb-product-attribute-swatch-item.disabled .bb-product-attribute-text-display {
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font: inherit;
    color: inherit;
}
.st-pd__formulier .bb-product-attribute-swatch-list.text-swatch .bb-product-attribute-swatch-item:not(.disabled) label:has(input:checked) {
    background: var(--st-groen-diep);
    border-color: var(--st-tekst);
    color: var(--st-wit);
    font-weight: 600;
}
.st-pd__formulier .bb-product-attribute-swatch-list.text-swatch .bb-product-attribute-swatch-item.disabled label {
    color: var(--st-tekst-zwak);
    border-style: dashed;
    background: var(--st-bodem);
    text-decoration: line-through;
    cursor: not-allowed;
}
@media (max-width: 575px) {
    .st-pd__formulier .bb-product-attribute-swatch-list.text-swatch { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.st-pd__pasvorm { margin: 7px 0 0; }

/* --- aantal en bestelknop: 56 px hoog, zoals in het ontwerp ------------- */
.st-pd__acties { margin: 14px 0 0; gap: 12px; }
.st-pd__acties .st-aantal.tp-product-quantity {
    height: 56px;
    padding: 0;
    border: 1px solid var(--st-rand-input);
    background: var(--st-wit);
    overflow: hidden;
}
.st-pd__acties .st-aantal .st-aantal__knop { width: 40px; height: 54px; border-radius: 0; }
.st-aantal input.st-aantal__veld { width: 44px; height: 54px; font-size: 15.5px; }
.st-pd__bestellen { height: 56px; font-size: 16px; padding-inline: 32px; gap: 9px; }

.st-leverregel b { font-size: 15.5px; }
.st-staffelregel { margin: 14px 0 0; }

/* --- galerij: 84 px miniaturen, 16 px ertussen, foto met rand ------------ */
.tp-product-details-thumb-wrapper .bb-product-gallery.bb-product-gallery-vertical {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.tp-product-details-thumb-wrapper .bb-product-gallery-vertical .bb-product-gallery-thumbnails {
    order: -1;
    width: 84px;
    min-width: 84px;
    max-width: 84px;
    height: auto;
    margin: 0;
    padding: 0;
}
.tp-product-details-thumb-wrapper .bb-product-gallery-vertical .bb-product-gallery-images {
    max-width: none;
    width: auto;
    padding: 30px 70px;
    border: 1px solid var(--st-rand);
    border-radius: 20px;
}
.bb-product-gallery-images img,
.bb-product-gallery-images .slick-slide img {
    width: 100%;
    height: auto;
    aspect-ratio: 416 / 405;
    padding: 0;
    object-fit: contain;
}
.bb-product-gallery-thumbnails .slick-slide { margin: 0 0 12px; }
.bb-product-gallery-thumbnails .slick-slide > div { width: 84px; }
.tp-product-details-thumb-wrapper .bb-product-gallery-thumbnails img { width: 84px; height: 84px; }

/* Eén foto: geen strook, en de foto neemt de hele breedte (ontwerp: .st-galerij--een). */
/* 9 okt 2026: deze regel had een :has() binnen een :has(). Dat mag niet in
   CSS, dus de browser liet hem helemaal vallen. Een product met één foto
   kreeg daardoor tot het opstarten van de slider een fotokolom van 64 px
   breed, waarna alles eronder 300 px omlaag sprong (CLS 0,21 op mobiel).
   Nu zonder nesten: geen tweede miniatuur in de strook → één kolom. */
.tp-product-details-thumb-wrapper .bb-product-gallery-vertical:not(:has(.bb-product-gallery-thumbnails > div ~ div)):not(:has(.bb-product-gallery-thumbnails .slick-slide:not(.slick-cloned) ~ .slick-slide:not(.slick-cloned))) {
    grid-template-columns: minmax(0, 1fr);
}

/* De badge: op de foto, 18 px uit de hoek, in de maat van de productkaart. */
.tp-product-details-thumb-wrapper > .tp-product-badge { top: 18px; left: 18px; }
.tp-product-details-thumb-wrapper:has(.bb-product-gallery-thumbnails img) > .tp-product-badge { left: 118px; }
.tp-product-details-thumb-wrapper > .tp-product-badge span {
    font-size: 11px;
    letter-spacing: .4px;
    line-height: 1.2;
    padding: 5px 11px;
    text-transform: uppercase;
    background: var(--st-groen-diep);
}
@media (max-width: 767px) {
    .tp-product-details-thumb-wrapper .bb-product-gallery.bb-product-gallery-vertical { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; }
    .tp-product-details-thumb-wrapper .bb-product-gallery-vertical .bb-product-gallery-thumbnails { width: 64px; min-width: 64px; max-width: 64px; }
    .tp-product-details-thumb-wrapper .bb-product-gallery-thumbnails img { width: 64px; height: 64px; }
    .bb-product-gallery-thumbnails .slick-slide > div { width: 64px; }
    .tp-product-details-thumb-wrapper .bb-product-gallery-vertical .bb-product-gallery-images { padding: 20px 30px; }
    .tp-product-details-thumb-wrapper:has(.bb-product-gallery-thumbnails img) > .tp-product-badge { left: 88px; }
}

/* --- ankerbalk: de lijn loopt zo breed als de inhoud, niet het venster ---- */
.st-ankers { border-bottom: 0; }
.st-ankers__rij { position: relative; }
.st-ankers__rij::after {
    content: "";
    position: absolute;
    left: var(--st-content-pad);
    right: var(--st-content-pad);
    bottom: 0;
    height: 1px;
    background: var(--st-rand);
}
.st-ankers__prijs .st-prijs__btw { display: none; }

/* --- handig erbij: de mini-kaart (wint hier van .st-klus verderop) ------- */
.st-zijkaart .st-klus--mini { padding: 10px 14px 10px 10px; gap: 14px; }
.st-zijkaart .st-klus--mini b { font-size: 14.5px; }
.st-zijkaart .st-klus--mini .st-klus__beeld { width: 64px; height: 64px; }

/* --- in het kort: het verhaal ------------------------------------------- */
.st-proza.ck-content p { font-size: 15.5px; line-height: 1.65; color: var(--st-tekst-sec); margin: 0 0 12px; max-width: 74ch; }

/* --- specificaties: 18 px boven elk groepskopje, 8 px eronder ---------- */
.st-specs__groep, .st-specs .st-specs__groep:first-child { margin: 18px 0 8px; }

/* --- veelgestelde vragen (ontwerp: .st-faq) ----------------------------- */
.st-vraag { background: var(--st-wit); border: 1px solid var(--st-rand); border-radius: 14px; margin-bottom: 10px; overflow: hidden; }
.st-vraag summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    font-size: 15.5px;
    font-weight: 600;
    cursor: pointer;
}
.st-vraag summary::-webkit-details-marker { display: none; }
.st-vraag summary svg { flex: none; color: var(--st-tekst-zwak); transition: transform .15s; }
.st-vraag[open] summary svg { transform: rotate(180deg); }
.st-vraag__antwoord { padding: 0 20px 18px; color: var(--st-tekst-sec); font-size: 14.5px; max-width: 78ch; }

/* --- vergelijk: over de volle breedte, met de knoppen van het ontwerp --- */
.st-blok--los { border-top: 1px solid var(--st-rand); }
.st-knop--donker { background: var(--st-groen-diep); color: var(--st-wit); border-color: var(--st-tekst); }
.st-knop--donker:hover { background: var(--st-groen-nacht); color: var(--st-wit); }
.st-knop--klein { padding: 10px 18px; font-size: 14px; }
.st-vergelijktabel .st-knop { padding: 9px 16px; font-size: 14px; }
.st-badge--stil {
    background: var(--st-wit);
    color: var(--st-tekst-sec);
    box-shadow: inset 0 0 0 1px var(--st-rand);
    text-transform: none;
    letter-spacing: 0;
    font-size: 12.5px;
    line-height: 1.2;
    padding: 5px 11px;
}
.st-vergelijktabel thead .st-badge { margin-bottom: 8px; }
.st-vergelijktabel thead .st-sterren { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--st-tekst-sec); margin-top: 4px; }
.st-vergelijktabel thead .st-sterren b { display: inline; font: 600 13px var(--st-font-body); color: var(--st-tekst); }
.st-vergelijktabel thead .st-sterren__rij { color: var(--st-ster); display: inline-flex; }

/* --- vergelijkbare producten: de rij onderaan (ontwerp: .st-sectie--krap) - */
.st-vergelijkbaar { padding-block: 36px; }
.st-vergelijkbaar .st-sectiekop { margin-bottom: 28px; }
.st-vergelijkbaar .st-sectiekop__titel { font-size: 26px; color: var(--st-tekst); }
.st-vergelijkbaar .st-productrij { gap: 20px; }

/* --- na de eerste hermeting (24 september, ochtend) ---------------------- */
/* Botble schuift zijn kleurvlak met left:50% en translate(-18px) — buiten
   ons rondje. Met alleen position:static bleef de verschuiving staan. */
.st-pd__formulier .bb-product-attribute-swatch-list.visual-swatch .bb-product-attribute-swatch-display {
    inset: auto;
    transform: none;
    margin: 0;
}

/* Shofy's vaste kop (.st-sticky, 87 px) ligt óver de ankerbalk zodra die
   vastplakt; met top:0 verdween de balk erachter. Het ontwerp rekent met
   --kop-h; hier dezelfde afstand, en de zijkaart en de ankerpunten erop
   afgestemd (ontwerp: kop + ankerbalk + 16). */
:root { --st-kop-h: 87px; --st-ankers-h: 57px; }
.st-ankers { top: var(--st-kop-h); }
.st-zijkaart { top: calc(var(--st-kop-h) + var(--st-ankers-h) + 16px); }
html { scroll-padding-top: calc(var(--st-kop-h) + var(--st-ankers-h) + 16px); }
@media (max-width: 991px) {
    .st-ankers { top: 0; }
}

/* "Maat 43 op voorraad · vandaag verzonden" brak over twee regels: de regel
   `.st-leverregel span { display:block }` (voor de zin eronder) raakte ook
   de span ín de vette regel. */
.st-leverregel b span { display: inline; font-size: inherit; color: inherit; line-height: inherit; }

/* De groepskopjes bij de specificaties ("ALGEMEEN") zijn in het ontwerp grijs,
   niet groen: het zijn labels, geen koppen. De regel voor groene h3's hierboven
   nam ze mee. */
.st-pd__onder .st-specs__groep { color: var(--st-tekst-zwak); }

/* De excl.-regel onder de prijs: 22 px hoog zoals in het ontwerp, niet 26. */
.st-koopblok__excl { line-height: 1.6; }

/* De plus- en minknop: 40 x 54 zoals in het ontwerp. De regel op ±2977 telt
   vier klassen en won van de kortere hierboven. */
.st-pd__acties .st-aantal .st-aantal__knop.tp-cart-minus,
.st-pd__acties .st-aantal .st-aantal__knop.tp-cart-plus { width: 40px; height: 54px; border-radius: 0; }

/* Shofy zet <main> op overflow:hidden (tegen horizontaal uitsteken). Dat maakt
   <main> het scrollvak voor alles wat erin plakt: de ankerbalk, de zijkaart
   en de foto schoven daardoor gewoon mee omhoog — position:sticky deed
   niets. overflow:clip knipt net zo goed af, maar maakt geen scrollvak. */
main { overflow: visible; overflow: clip; }

/* De foto plakt onder de vaste kop, niet eronder verstopt (ontwerp: kop + 20). */
.st-pd__links { top: calc(var(--st-kop-h) + 20px); }

/* Eén foto (84,6% van de catalogus): Botble zet dan helemaal geen
   miniaturenstrook neer. De regel hierboven zocht een lege strook en vond
   niets, waardoor de foto in de kolom van 84 px terechtkwam (142 px breed,
   slick op 0). Zonder strook: één kolom, foto over de volle breedte
   (ontwerp: .st-galerij--een). */
.tp-product-details-thumb-wrapper .bb-product-gallery.bb-product-gallery-vertical:not(:has(.bb-product-gallery-thumbnails)) {
    grid-template-columns: minmax(0, 1fr);
}
.tp-product-details-thumb-wrapper:not(:has(.bb-product-gallery-thumbnails)) > .tp-product-badge { left: 18px; }
/* agrowinkel.js zet st-galerij--een als er maar één foto is (zie daar). */
.tp-product-details-thumb-wrapper .bb-product-gallery.bb-product-gallery-vertical.st-galerij--een { grid-template-columns: minmax(0, 1fr); }
.tp-product-details-thumb-wrapper:has(.st-galerij--een) > .tp-product-badge { left: 18px; }

/* Ingelogd als beheerder staat Botble's beheerbalk (40 px) boven de pagina,
   en Shofy schuift de vaste kop dan 40 px omlaag (`.show-admin-bar
   .header-sticky-2 { top: 40px }`). De ankerbalk plakte nog op 87 en zat
   daardoor voor de helft achter de kop — alleen zichtbaar voor wie ingelogd
   is, en dat is precies wie de pagina beoordeelt. */
:root:has(.show-admin-bar), .show-admin-bar { --st-kop-h: 127px; }

/* =========================================================================
   MARKTPLAATS — verkoper op kaart en productpagina, verkoperspagina
   (24 september 2026, naar referentie/verkoperspagina.html en de
   .mp-delen van productpagina.html; maten uit stijl.css §15)
   ========================================================================= */

/* --- op de productkaart: "Verkocht door …" ------------------------------ */
.st-product__verkoper { font-size: 12.5px; color: var(--st-tekst-zwak); margin: 7px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-product__verkoper a { color: var(--st-tekst-sec); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; position: relative; z-index: 2; }
.st-vk .st-product__verkoper { display: none; }

/* --- in het koopblok: "Verkocht (en verzonden) door …" ------------------ */
.st-verkochtdoor { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--st-rand); font-size: 14px; }
.st-verkochtdoor__logo { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; overflow: hidden; background: var(--st-geel); color: var(--st-tekst); font: 700 15px var(--st-font-kop); }
.st-verkochtdoor__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-verkochtdoor__logo--eigen { background: transparent; }
.st-verkochtdoor > div { min-width: 0; }
.st-verkochtdoor b { display: block; color: var(--st-tekst); }
.st-verkochtdoor b a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.st-verkochtdoor small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--st-tekst-zwak); font-size: 13px; }
.st-verkochtdoor small .st-sterren { display: inline-flex; align-items: center; gap: 5px; color: var(--st-tekst-sec); }
.st-verkochtdoor small .st-sterren b { display: inline; font: 600 13px var(--st-font-body); color: var(--st-tekst); }
.st-verkochtdoor small .st-sterren__rij { display: inline-flex; color: var(--st-ster); }
.st-verkochtdoor__vink { display: inline-flex; align-items: center; gap: 4px; color: var(--st-groen-tekst); font-weight: 600; }
.st-verkochtdoor .st-knop { margin-left: auto; flex: none; }
@media (max-width: 575px) {
    .st-verkochtdoor { flex-wrap: wrap; }
    .st-verkochtdoor .st-knop { margin-left: 58px; }
}

/* --- verkoperspagina ------------------------------------------------------ */
.st-vk { padding-bottom: 56px; font-size: 15.5px; }
.st-vk .st-kruimels--los { padding: 18px 0 0; }
.st-vk__cover { height: 220px; border-radius: 24px; overflow: hidden; background: var(--st-groen-diep); margin-top: 18px; position: relative; }
.st-vk__cover svg, .st-vk__cover img { width: 100%; height: 100%; display: block; object-fit: cover; }
.st-vk__kop { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: start; margin: 16px 32px 0; position: relative; z-index: 2; }
.st-vk__logo { width: 124px; height: 124px; margin-top: -62px; border-radius: 28px; background: var(--st-wit); border: 4px solid var(--st-wit); box-shadow: var(--st-schaduw-2); display: grid; place-items: center; overflow: hidden; }
.st-vk__logo div, .st-vk__logo img { width: 100%; height: 100%; display: grid; place-items: center; background: var(--st-geel); color: var(--st-tekst); font: 700 40px var(--st-font-kop); letter-spacing: -1px; border-radius: 24px; object-fit: cover; }
.st-vk__titel { min-width: 0; }
.st-vk__titel h1 { font-size: 30px; font-weight: 700; letter-spacing: -.7px; color: var(--st-tekst); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.st-vk__titel p { display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--st-tekst-sec); font-size: 14px; margin: 4px 0 0; }
.st-vk__titel p > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.st-vk__titel .st-sterren { display: inline-flex; align-items: center; gap: 5px; }
.st-vk__titel .st-sterren__rij { display: inline-flex; color: var(--st-ster); }
.st-vk__titel .st-sterren b { font: 600 13px var(--st-font-body); color: var(--st-tekst); }
.st-vk__knoppen { display: flex; gap: 10px; padding-top: 2px; }
.st-badge--gecontroleerd { display: inline-flex; align-items: center; gap: 5px; background: var(--st-groen-tint); color: var(--st-groen-tekst); box-shadow: inset 0 0 0 1px var(--st-groen-rand); text-transform: none; letter-spacing: 0; font-size: 12.5px; line-height: 1.2; padding: 5px 11px; border-radius: var(--st-radius-pill); }
.st-vk__cijfers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--st-wit); border: 1px solid var(--st-rand); border-radius: var(--st-radius-kaart); margin: 26px 0 0; padding: 0; list-style: none; }
.st-vk__cijfer { padding: 18px 24px; }
.st-vk__cijfer + .st-vk__cijfer { border-left: 1px solid var(--st-rand); }
.st-vk__cijfer b { display: flex; align-items: center; gap: 8px; font: 700 22px var(--st-font-kop); letter-spacing: -.5px; color: var(--st-tekst); }
.st-vk__cijfer b svg { flex: none; }
.st-vk__cijfer span { font-size: 13.5px; color: var(--st-tekst-sec); }
.st-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--st-rand); margin-top: 30px; overflow-x: auto; scrollbar-width: none; }
.st-tabs a { padding: 13px 20px; font-weight: 600; font-size: 15px; color: var(--st-tekst-sec); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; text-decoration: none; }
.st-tabs a:hover { color: var(--st-tekst); }
.st-tabs a[aria-current] { color: var(--st-tekst); border-bottom-color: var(--st-actie); }
.st-tabs a small { font-weight: 500; color: var(--st-tekst-zwak); }
.st-vk__producten { padding-top: 18px; }
.st-vk__onder { display: grid; grid-template-columns: minmax(0, 1fr) 400px; column-gap: 48px; align-items: start; margin-top: 36px; }
.st-vk__over h2, .st-vk__reviews h2 { font-size: 24px; color: var(--st-tekst); margin: 0 0 16px; }
.st-vk__over p { font-size: 15.5px; line-height: 1.65; color: var(--st-tekst-sec); margin: 0 0 12px; max-width: 74ch; }
.st-vk__reviews { margin-top: 36px; }
.st-vk__over + .st-vk__reviews { margin-top: 36px; }
.st-paneel { background: var(--st-wit); border: 1px solid var(--st-rand); border-radius: var(--st-radius-kaart); padding: 26px; }
.st-paneel h3 { font-size: 18px; color: var(--st-tekst); margin: 0 0 8px; }
.st-infolijst { list-style: none; margin: 0; padding: 0; }
.st-infolijst li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--st-rand); font-size: 14.5px; line-height: 1.45; }
.st-infolijst li:last-child { border-bottom: 0; }
.st-infolijst svg { flex: none; margin-top: 3px; color: var(--st-tekst-zwak); }
.st-infolijst small { color: var(--st-tekst-zwak); }
.st-infolijst a { color: inherit; }
.st-garantie { display: flex; gap: 14px; align-items: flex-start; background: var(--st-groen-tint); border: 1px solid var(--st-groen-rand); border-radius: var(--st-radius-kaart); padding: 18px 20px; font-size: 14px; line-height: 1.45; margin-top: 18px; color: var(--st-tekst-sec); }
.st-garantie svg { flex: none; color: var(--st-groen-tekst); }
.st-garantie b { display: block; color: var(--st-tekst); }
.st-vk__contact { margin-top: 36px; max-width: 720px; }
.st-vk__contact h2 { font-size: 24px; color: var(--st-tekst); margin: 0 0 6px; }
.st-vk__contact .st-klein { margin: 0 0 18px; }
.st-vk__formulier.st-reviewformulier { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 991px) {
    .st-vk__onder { grid-template-columns: minmax(0, 1fr); }
    .st-vk__cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
    .st-vk__cijfer { padding: 14px 16px; }
    .st-vk__cijfer + .st-vk__cijfer { border-left: 0; }
    .st-vk__cijfer:nth-child(even) { border-left: 1px solid var(--st-rand); }
    .st-vk__cijfer:nth-child(n+3) { border-top: 1px solid var(--st-rand); }
    .st-vk__cijfer b { font-size: 17px; }
}
@media (max-width: 767px) {
    .st-vk__cover { height: 112px; border-radius: 16px; margin-top: 12px; }
    .st-vk__kop { grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; }
    .st-vk__logo { width: 84px; height: 84px; margin-top: -42px; border-radius: 20px; margin-left: 12px; }
    .st-vk__logo div { font-size: 27px; border-radius: 16px; }
    .st-vk__titel h1 { font-size: 23px; gap: 8px; }
    .st-vk__knoppen { padding: 0; }
    .st-vk__knoppen .st-knop { flex: 1; padding-inline: 14px; }
}

/* Specificaties: het eerste groepskopje stond 18 px te dicht op de kop. De
   bovenmarge van het kopje viel samen met de ondermarge van de h2 (marges
   vouwen in elkaar); in het ontwerp is het een padding, en die vouwt niet. */
.st-specs__groep, .st-specs .st-specs__groep:first-child { margin: 0 0 8px; padding-top: 18px; }

/* --- marktplaats op de home: lichte band (ontwerp: .st-band--licht) ------ */
.st-sectie--aansluitend { padding-top: 0; }
.st-band--licht { background: var(--st-wit); border: 1px solid var(--st-rand); color: var(--st-tekst); }
.st-band--licht h2 { color: var(--st-tekst); }
.st-band--licht .st-label { color: var(--st-actie-tekst); }
.st-band--licht p { color: var(--st-tekst-sec); }
.st-band--licht .st-band__punt { background: var(--st-bodem); border-color: var(--st-rand); }
.st-band--licht .st-band__punt svg { color: var(--st-groen-tekst); }
.st-band--licht .st-band__punt b { color: var(--st-tekst); }
.st-band--licht .st-band__punt span { color: var(--st-tekst-sec); }

/* --- winkelwagen: groep per verkoper (ontwerp: .st-ww__groepkop) --------- */
.st-winkelwagen__titel small { display: block; font: 500 15px var(--st-font-body); color: var(--st-tekst-zwak); letter-spacing: 0; margin-top: 4px; }
.st-wagengroep__kop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 14px 22px; background: var(--st-bodem); border-bottom: 1px solid var(--st-rand); font-size: 14px; color: var(--st-tekst-sec); }
.st-wagengroep__kop svg { color: var(--st-groen-tekst); flex: none; }
.st-wagengroep__kop b { font: 600 15px var(--st-font-kop); color: var(--st-tekst); }
.st-wagengroep__kop b a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.st-wagengroep__vink { display: inline-flex; align-items: center; gap: 4px; color: var(--st-groen-tekst); font-weight: 600; font-size: 13px; }
.st-wagengroep__verzend { margin-left: auto; font-weight: 600; }
.st-wagengroep + .st-wagengroep .st-wagengroep__kop { border-top: 1px solid var(--st-rand); }
.st-wagengroep .st-wagenregel:last-child { border-bottom: none; }
.st-wagengroep + .st-wagengroep .st-wagenregel:first-of-type { border-top: 0; }
@media (max-width: 767px) {
    .st-wagengroep__kop { padding: 12px 14px; }
    .st-wagengroep__verzend { margin-left: 0; flex-basis: 100%; }
}

/* Blogkaart met artikelfoto: het beeld vult het vlak (ontwerp: kaart met beeld). */
.st-blogkaart__beeld--foto { padding: 0; overflow: hidden; }
.st-blogkaart__beeld--foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- artikel: aanloop, omslagbeeld en "In dit artikel" (24 september) ---- */
/* "Vind het een beetje kaal": drie dingen die er al waren maar niet werden
   getoond — de korte omschrijving, het omslagbeeld en de tussenkoppen. */
.st-artikel__intro { font-size: 19px; line-height: 1.55; color: var(--st-tekst-sec); margin: 18px 0 0; max-width: 34em; }
.st-artikel__beeld { margin: 24px 0 0; border-radius: 20px; overflow: hidden; background: var(--st-tegel); aspect-ratio: 16 / 9; }
.st-artikel__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-artikel__inhoud {
    margin: 28px 0 8px;
    padding: 18px 22px;
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-radius: var(--st-radius-kaart);
}
.st-artikel__inhoud b { display: block; font: 600 12px var(--st-font-body); text-transform: uppercase; letter-spacing: .6px; color: var(--st-tekst-zwak); margin-bottom: 10px; }
.st-artikel__inhoud ol { margin: 0; padding-left: 22px; }
.st-artikel__inhoud li { margin: 0 0 6px; font-size: 15px; line-height: 1.45; }
.st-artikel__inhoud a { color: var(--st-tekst); font-weight: 600; text-decoration: none; }
.st-artikel__inhoud a:hover { text-decoration: underline; text-underline-offset: 3px; }
.st-artikel__tekst h2 { scroll-margin-top: calc(var(--st-kop-h, 87px) + 20px); }
.st-artikel__intro + .st-artikel__beeld { margin-top: 22px; }
.st-artikel__beeld + .st-artikel__tekst, .st-artikel__intro + .st-artikel__tekst { margin-top: 26px; }

/* --- verkoper worden: aanmeldformulier op een gewone pagina -------------- */
.st-auth--verkoper { padding-block: 8px 24px; }
.st-auth__invoer--prefix { display: flex; align-items: center; gap: 0; }
.st-auth__prefix { font-size: 13px; color: var(--st-tekst-zwak); white-space: nowrap; padding-left: 14px; }
.st-auth__invoer--prefix input { padding-left: 4px !important; }
.st-auth__fout--boven { margin: 0 0 12px; }
.st-auth__zij--donker .st-auth__veilig a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* In de tekstkolom van een pagina: geen eigen container, kaart in één kolom
   als de kolom smal is, en de zijkant erboven in plaats van ernaast. */
.st-auth--verkoper .st-auth__binnen { max-width: none; padding: 0; }
.st-auth--verkoper .st-auth__kaart { grid-template-columns: minmax(0, 1fr); }
.st-auth--verkoper .st-auth__zij { padding: 28px 30px; }
.st-auth--verkoper .st-auth__formulier { padding: 28px 30px; }
.st-auth--verkoper .st-auth__punten { columns: 1; }
/* Het vaste voorvoegsel hoort ín het veld, niet ernaast. */
.st-auth__invoer--prefix { background: var(--st-tegel); border: 1px solid var(--st-rand-input); border-radius: 12px; }
.st-auth__invoer--prefix:focus-within { border-color: var(--st-tekst); box-shadow: 0 0 0 3px var(--st-groen-tint); }
.st-auth__invoer--prefix input, .st-auth__invoer--prefix input:focus { border: 0 !important; background: transparent !important; box-shadow: none !important; }

/* --- 404 in de huisstijl -------------------------------------------------- */
.st-404 { padding-block: 56px 80px; text-align: center; }
.st-404__code { font: 700 14px var(--st-font-body); letter-spacing: 2px; color: var(--st-actie-tekst); margin: 0 0 10px; }
.st-404__titel { font-size: 34px; color: var(--st-tekst); margin: 0 0 10px; }
.st-404__tekst { font-size: 16px; color: var(--st-tekst-sec); max-width: 44em; margin: 0 auto 26px; }
.st-404__zoek { display: flex; gap: 10px; max-width: 560px; margin: 0 auto 18px; }
.st-404__zoek input { flex: 1; min-width: 0; height: 52px; padding: 0 20px; border: 1px solid var(--st-rand-input); border-radius: var(--st-radius-pill); background: var(--st-tegel); font: inherit; font-size: 15.5px; }
.st-404__zoek input:focus { outline: 0; border-color: var(--st-tekst); box-shadow: 0 0 0 3px var(--st-groen-tint); background: var(--st-wit); }
.st-404__knoppen { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.st-404__kop { font-size: 20px; color: var(--st-tekst); margin: 44px 0 16px; }
.st-404__afdelingen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.st-404__afdelingen a { display: inline-block; padding: 10px 18px; border: 1px solid var(--st-rand); border-radius: var(--st-radius-pill); background: var(--st-wit); color: var(--st-tekst); font-weight: 600; font-size: 14px; text-decoration: none; }
.st-404__afdelingen a:hover { border-color: var(--st-tekst); }
@media (max-width: 575px) { .st-404__titel { font-size: 26px; } .st-404__zoek { flex-direction: column; } }

/* --- koopblok rustiger (26 september 2026) ------------------------------ */
/* "We moeten dit blok iets rustiger maken": de voorraad-/verzendregel en de
   staffelregel waren twee gekleurde vlakken onder de bestelknop, daaronder
   nog een verkoperblok met logo en vier zekerheden in twee kolommen. Nu:
   de twee regels als gewone tekst met een icoon, het verkoperblok alleen
   bij een marktplaatsverkoper (product-verkochtdoor), de zekerheden in één
   kolom en kleiner. De leverregel houdt zijn groene accentkleur in de tekst,
   niet als vlak. */
.st-koopblok .st-leverregel {
    margin-top: 16px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.st-koopblok .st-leverregel span { font-size: 13px; }

.st-koopblok .st-staffelregel {
    margin-top: 10px;
    padding: 0;
    background: transparent;
    border: 0;
    font-size: 13px;
}

.st-koopblok .st-staffelregel b { font-weight: 600; }

.st-koopblok .st-koopblok__links { margin-top: 14px; }

.st-koopblok .st-vertrouwen {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    margin-top: 14px;
    padding-top: 14px;
    font-size: 13px;
}

.st-koopblok .st-vertrouwen svg { width: 14px; height: 14px; margin-top: 3px; }

/* Korte regel onder de producttitel (26 september 2026). */
.st-pd__korteregel {
    margin: -6px 0 10px;
    font-size: 15.5px;
    line-height: 1.45;
    color: var(--st-tekst-sec);
}

/* 27 september: rustiger typografie. Eén tekstkleur (--st-tekst) voor koppen,
   prijzen en tekst in plaats van donkergroen voor koppen en groengrijs voor
   tekst; één grijs voor secundaire tekst; alle gewichten één stap lichter
   (800 -> 700, 700 -> 600). Groen blijft voor betekenis (voorraad, vinkjes,
   knoppen), oranje voor wat je kunt aanklikken. Terug:
   agrowinkel.css.voor-letters-20260927. */

/* "Toon alle" onder een lange categorielijst (3 oktober 2026). */
.st-catlijst__extra[hidden] { display: none; }
.st-catlijst__meer {
    margin: 4px 0 0 calc(var(--st-diepte, 0) * 14px);
    padding: 7px 8px;
    border: 0;
    background: none;
    font: 600 14px var(--st-font-body);
    color: var(--st-actie-tekst);
    cursor: pointer;
}
.st-catlijst__meer:hover { text-decoration: underline; }

/* 3 oktober: lange categorienamen. Kolom 22px breder (258 -> 280) zodat de
   meeste namen tot ±27 tekens op één regel passen; wat dan nog afbreekt,
   leest als één item: krappere regelafstand en de tweede regel springt in
   onder de eerste letter (geen terugval naar de rand). */
.st-catlijst { padding-left: 16px; padding-right: 16px; }
.st-catlijst__lijst a,
.st-catlijst__stap > a,
.st-catlijst__hier { line-height: 1.25; padding-top: 6px; padding-bottom: 6px; }
.st-catlijst__lijst a { padding-left: 8px; text-indent: 0; }

/* Kop van de categorielijst (3 oktober): vet, zonder vlak, mag over twee
   regels; de knop rechts klapt de lijst in. */
.st-catlijst__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-top: 2px; }
.st-catlijst__kopnaam { display: block; flex: 1 1 auto; padding: 6px 8px; font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--st-tekst); text-decoration: none; }
a.st-catlijst__kopnaam:hover { color: var(--st-groen-tekst); }

/* --- overzichtsblok op categorieën met subcategorieën (3 oktober 2026) --- */
.st-landing { margin: 8px 0 28px; display: flex; flex-direction: column; gap: 32px; }
.st-landing__tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.st-landing__tegel { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--st-rand); border-radius: var(--st-radius-kaart); background: var(--st-wit); color: var(--st-tekst); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.st-landing__tegel:hover { border-color: var(--st-groen-rand-sec); box-shadow: 0 6px 20px rgba(28, 92, 44, .08); color: var(--st-tekst); }
.st-landing__foto { display: grid; place-items: center; height: 110px; margin-bottom: 8px; border-radius: 10px; background: var(--st-tegel); overflow: hidden; }
.st-landing__foto img { max-width: 86%; max-height: 92px; object-fit: contain; mix-blend-mode: multiply; }
.st-landing__naam { font-weight: 600; font-size: 15px; line-height: 1.3; }
.st-landing__aantal { font-size: 13px; color: var(--st-tekst-sec); }
.st-landing__blok { display: flex; flex-direction: column; gap: 14px; }
.st-landing__kop { margin: 0; font-family: var(--st-font-kop); font-size: 21px; font-weight: 700; color: var(--st-tekst); }
.st-landing__kop--alles { margin-top: 4px; }
.st-landing__advies { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.st-landing__artikel { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: var(--st-radius-kaart); background: var(--st-bodem); color: var(--st-tekst); text-decoration: none; }
.st-landing__artikel:hover { color: var(--st-tekst); background: var(--st-groen-tint); }
.st-landing__artikel-titel { font-weight: 600; font-size: 16px; line-height: 1.3; }
.st-landing__artikel-tekst { font-size: 14px; line-height: 1.5; color: var(--st-tekst-sec); }
.st-landing__lees { margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--st-actie-tekst); }
.st-landing__producten { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.st-landing__merken { display: flex; flex-wrap: wrap; gap: 8px; }
.st-landing__merk { padding: 8px 14px; border: 1px solid var(--st-rand); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--st-tekst); text-decoration: none; }
.st-landing__merk:hover { border-color: var(--st-groen-rand-sec); color: var(--st-groen-tekst); }

.st-landing__allemaal { display: flex; justify-content: center; margin: 4px 0 40px; }

/* Kop van de categoriepagina zonder kaartje rechts: intro op leesbare breedte. */
.st-cat-kop__tekst { max-width: 780px; }

/* --- afdeling Onderdelen, verwijzingen en gegroepeerde tegels (3 oktober 2026, avond) --- */
.st-cat-kop { align-items: flex-end; }
.st-cat-kop__keuze { flex: 0 0 auto; display: flex; gap: 12px; align-items: center; padding: 14px 18px; border: 1px solid var(--st-groen-rand); border-radius: 12px; background: var(--st-groen-tint); color: var(--st-tekst); text-decoration: none; }
.st-cat-kop__keuze svg { color: var(--st-groen-tekst); flex: none; }
.st-cat-kop__keuze span { display: flex; flex-direction: column; gap: 2px; }
.st-cat-kop__keuze b { font-weight: 600; font-size: 15px; }
.st-cat-kop__keuze small { font-size: 13.5px; color: var(--st-tekst-sec); }
.st-cat-kop__keuze:hover { border-color: var(--st-groen-rand-sec); color: var(--st-tekst); }

.st-landing__groep { display: flex; flex-direction: column; gap: 14px; }
.st-landing__groep--kop + .st-landing__groep--kop { padding-top: 4px; }
.st-landing__kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.st-landing__kaarten .st-landing__artikel { padding: 22px; }
.st-landing__ondkaart { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: var(--st-radius-kaart); background: var(--st-groen-diep); color: #fff; text-decoration: none; }
.st-landing__ondkaart:hover { background: var(--st-groen-nacht); color: #fff; }
.st-landing__ondlabel { font-size: 12.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--st-groen-tekst); }
.st-landing__ondkaart .st-landing__ondlabel { color: #b9dcc5; }
.st-landing__ondtitel { font-family: var(--st-font-kop); font-weight: 700; font-size: 19px; line-height: 1.25; }
.st-landing__ondtekst { font-size: 14px; line-height: 1.5; color: #dbe9df; }

.st-ondbalk { margin: 28px 0 8px; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; padding: 18px 22px; border-radius: var(--st-radius-kaart); background: var(--st-bodem); color: var(--st-tekst); text-decoration: none; }
.st-ondbalk:hover { background: var(--st-groen-tint); color: var(--st-tekst); }
.st-ondbalk__tekst { display: flex; flex-direction: column; gap: 2px; }
.st-ondbalk__tekst b { font-weight: 600; font-size: 16px; }
.st-ondbalk__tekst span { font-size: 14px; color: var(--st-tekst-sec); }
.st-ondbalk__naar { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; font-size: 15px; color: var(--st-groen-tekst); }

.st-catlijst__onderdelen { display: flex; gap: 8px; align-items: center; margin-top: 12px; padding: 9px 12px; border: 1px dashed var(--st-groen-rand-sec); border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--st-groen-tekst); text-decoration: none; }
.st-catlijst__onderdelen:hover { background: var(--st-groen-tint); color: var(--st-groen-hover); }

.st-ond { margin: 0 0 40px; display: flex; flex-direction: column; gap: 16px; }
.st-ond__zoek { display: flex; max-width: 640px; margin-bottom: 18px; }
.st-ond__zoek input { flex: 1; min-width: 0; height: 50px; padding: 0 18px; border: 1.5px solid var(--st-groen-rand-sec); border-right: 0; border-radius: 10px 0 0 10px; font-size: 15.5px; }
.st-ond__zoek input:focus { outline: none; border-color: var(--st-groen-tekst); box-shadow: 0 0 0 3px var(--st-groen-tint); }
.st-ond__zoek button { height: 50px; border-radius: 0 10px 10px 0; padding: 0 22px; }
.st-ond__kop { margin: 0; font-family: var(--st-font-kop); font-size: 22px; font-weight: 700; color: var(--st-tekst); }
.st-ond__kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.st-ond__kaart { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--st-rand); border-radius: var(--st-radius-kaart); background: var(--st-wit); }
.st-ond__machine { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; color: var(--st-tekst); text-decoration: none; }
.st-ond__machine:hover { color: var(--st-groen-tekst); }
.st-ond__naam { font-weight: 600; font-size: 17px; }
.st-ond__aantal { font-size: 13px; color: var(--st-tekst-sec); white-space: nowrap; }
.st-ond__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.st-ond__chip { padding: 6px 11px; border-radius: 999px; background: var(--st-bodem); font-size: 13.5px; font-weight: 600; color: var(--st-tekst); text-decoration: none; }
.st-ond__chip:hover { background: var(--st-groen-tint); color: var(--st-groen-tekst); }
.st-ond__hulp { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.st-ond__hulpkaart { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--st-radius-kaart); background: var(--st-bodem); color: var(--st-tekst); text-decoration: none; }
.st-ond__hulpkaart b { font-weight: 600; font-size: 16px; }
.st-ond__hulpkaart span { font-size: 14px; line-height: 1.5; color: var(--st-tekst-sec); }
a.st-ond__hulpkaart:hover { background: var(--st-groen-tint); color: var(--st-tekst); }
@media (max-width: 767px) {
    .st-cat-kop__keuze { align-self: stretch; }
}


/* =========================================================================
   Ronde 3 (5 oktober): op vol oranje staat donkere tekst. Deze vier hadden
   wit of geen eigen kleur (Bootstrap zet wit); 2,3:1 op #f08a24.
   ========================================================================= */
.st-blengi__verstuur, .st-blengi__verstuur:hover,
.st-zoek__knop:hover, .st-rondknop:hover,
.st-reviewformulier .btn-primary,
.st-account__bol, .st-account__link.is-actief, .st-account__tegel-icoon { color: var(--st-op-actie); }

/* =========================================================================
   RONDE 3 — kop (5 oktober 2026). Naar referentie/stijl.css §7–8.
   ========================================================================= */
/* Topbalk: licht, met limoen vinkjes (was donker erf-groen in v2) */
.st-topbar { background: var(--st-groen-tint); color: var(--st-tekst); border-bottom: 1px solid var(--st-groen-rand); font-size: 13px; font-weight: 500; }
.st-topbar__keur { color: var(--st-tekst); }
.st-topbar__usps svg, .st-topbar .st-vink { color: var(--st-groen); }
.st-topbar__service, .st-topbar__service:hover { color: var(--st-tekst); }
.st-topbar__service:hover { text-decoration: underline; text-underline-offset: 3px; }
.st-topbar .st-btw { background: var(--st-wit); box-shadow: inset 0 0 0 1px var(--st-groen-rand); }
.st-topbar .st-btw button { color: var(--st-tekst-2); }
.st-topbar .st-btw button[aria-pressed="true"] { background: var(--st-groen-diep); color: var(--st-wit); }
/* Logo: de lockup met de aar, inline SVG; de hoogte bepaalt de maat */
.st-logo { display: flex; align-items: center; flex: none; min-height: 44px; }
.st-logo .st-logo__svg { display: block; height: 48px; width: auto; }
.st-voettekst .st-logo .st-logo__svg, .st-logo--voet .st-logo__svg { height: 64px; }
@media (max-width: 991.98px) {
    .st-logo .st-logo__svg { height: 34px; }
    .st-voettekst .st-logo .st-logo__svg, .st-logo--voet .st-logo__svg { height: 52px; }
}

/* Kop: zoekbalk wit met rand, oranje ronde zoekknop (referentie §8) */
.st-header__rij { min-height: 84px; }
.st-zoek { background: var(--st-wit); border: 1px solid var(--st-rand-sterk); border-radius: var(--st-r-pil); }
.st-zoek:focus-within { border-color: var(--st-groen-diep); box-shadow: 0 0 0 3px var(--st-groen-tint); background: var(--st-wit); }
.st-zoek input.st-zoek__veld, .st-zoek__veld { background: none; font: 500 15px var(--st-body); }
.st-zoek__veld::placeholder { color: var(--st-tekst-zwak); opacity: 1; }
.st-zoek__knop { background: var(--st-actie); color: var(--st-op-actie); }
.st-zoek__knop:hover { background: var(--st-actie-hover); color: var(--st-op-actie); }
/* Acties: tellers in mos, de winkelwagenpil wit met rand en een oranje teller */
.st-actie { color: var(--st-tekst); font-weight: 600; font-size: 14px; }
.st-actie__teller { background: var(--st-groen-diep); color: var(--st-wit); box-shadow: 0 0 0 2px var(--st-wit); }
.st-wagen { background: var(--st-wit); border: 1px solid var(--st-rand-sterk); color: var(--st-tekst); }
.st-wagen:hover { border-color: var(--st-groen-diep); color: var(--st-tekst); }
.st-wagen__aantal { background: var(--st-actie); color: var(--st-op-actie); }

/* Menubalk (referentie §9): de afdelingen links, Advies en Zakelijk rechts
   (menu-item met css-klasse st-nav__actie schuift de rest naar rechts) */
.st-nav { background: var(--st-wit); border-bottom: 1px solid var(--st-rand); }
.st-nav__menu > nav > ul > li > a,
.st-nav__menu ul > li > a { font-weight: 600; font-size: 14px; color: var(--st-tekst-2); border-bottom: 2px solid transparent; }
.st-nav__menu > nav > ul > li:hover > a { color: var(--st-groen-diep); }
.st-nav__menu > nav > ul > li.active > a,
.st-nav__menu > nav > ul > li.current-menu-item > a,
.st-nav__menu a[aria-current] { color: var(--st-groen-diep); border-bottom-color: var(--st-groen); }
.st-nav__menu nav > ul > li.st-nav__actie > a,
.st-nav__menu nav > ul > li.st-nav__actie ~ li > a { color: var(--st-tekst); }

/* Megamenu (referentie §9): kolom op het zachte vlak, actieve afdeling wit met schaduw */
.st-mega__paneel { background: var(--st-wit); border: 1px solid var(--st-rand); border-top: 0; border-radius: 0 0 20px 20px; box-shadow: var(--st-schaduw-2); overflow: hidden; }
.st-mega__kolom { background: var(--st-zacht); border-right: 1px solid var(--st-rand); }
.st-mega__afdelingen a { border-radius: 12px; font-weight: 600; font-size: 14.5px; color: var(--st-tekst-2); }
.st-mega__afdelingen a svg:last-child { opacity: .45; }
.st-mega__afdelingen a.is-actief, .st-mega__afdelingen a:hover { background: var(--st-wit); color: var(--st-groen-diep); box-shadow: var(--st-schaduw-1); }
.st-mega__afdelingen a.is-actief svg:first-child { color: var(--st-groen-tekst); }
.st-mega__sub h3 { font: 600 20px/1.18 var(--st-kop); letter-spacing: -.5px; color: var(--st-tekst); }
.st-mega__sub h3 a { font: 600 13.5px var(--st-body); letter-spacing: 0; color: var(--st-actie-tekst); text-decoration: underline; text-underline-offset: 3px; }
.st-mega__sub h4 { font: 600 12px var(--st-body); text-transform: uppercase; letter-spacing: .6px; color: var(--st-tekst-zwak); }
.st-mega__sub li a { font-size: 14.5px; color: var(--st-tekst-2); }
.st-mega__sub li a:hover { color: var(--st-groen-diep); text-decoration: underline; text-underline-offset: 3px; }
.st-mega__promo { background: var(--st-zacht); border-left: 1px solid var(--st-zacht-rand); }
.st-mega__promo h4 { font: 600 18px/1.2 var(--st-kop); letter-spacing: -.3px; color: var(--st-tekst); text-transform: none; }
.st-mega__promo p { font-size: 14px; color: var(--st-tekst-2); }
/* Het megamenu blijft binnen de paginamarges, zoals de rest van de kop */
.st-mega__paneel { max-width: calc(var(--st-max) - 2 * var(--st-pad)); margin: 0 auto; }
@media (max-width: 1320px) { .st-mega__paneel { max-width: calc(100% - 80px); } }

/* =========================================================================
   RONDE 3 — mobiel (≤ 991,98 px), naar referentie §19
   ========================================================================= */
@media (max-width: 991.98px) {
    /* Topbalk: één regel, alleen de verzendbelofte, gecentreerd. Eerder stonden
       de drie beloften hier onder elkaar in een balk van 34 px en staken ze over
       het logo heen (gemeten: y = −43, 6 en 55). */
    .st-topbar__binnen { height: 34px; justify-content: center; }
    .st-topbar__keur, .st-topbar__rechts { display: none; }
    .st-topbar__usps { flex-direction: row; }
    .st-topbar__usps li { display: none; }
    .st-topbar__usps li:first-child { display: flex; font-size: 12.5px; white-space: nowrap; }
    /* Kop: 60 px, logo 34 px */
    .st-header__rij { min-height: 60px; }
    /* Onderbalk: kleine labels in tekst-zwak, het icoon 22 px */
    .tp-mobile-menu { background: var(--st-wit); border-top: 1px solid var(--st-rand); box-shadow: none; }
    .tp-mobile-menu .tp-mobile-item-btn { color: var(--st-tekst-zwak); gap: 3px; min-height: 44px; }
    .tp-mobile-menu .tp-mobile-item-btn i, .tp-mobile-menu .tp-mobile-item-btn svg { font-size: 22px; width: 22px; height: 22px; }
    .tp-mobile-menu .tp-mobile-item-btn span { font: 600 11px/1.2 var(--st-body); color: inherit; }
    .tp-mobile-menu .tp-mobile-item-btn:hover, .tp-mobile-menu .tp-mobile-item-btn[aria-current] { color: var(--st-groen-diep); }
    .tp-mobile-menu .st-onderbalk__chat svg { color: var(--st-groen-tekst); }
}

/* =========================================================================
   RONDE 3 — knoppen en hero (referentie §4 en §12)
   ========================================================================= */
.st-knop--secundair { background: var(--st-wit); color: var(--st-groen-diep); box-shadow: inset 0 0 0 1px var(--st-rand-sterk); border: 0; }
.st-knop--secundair:hover { color: var(--st-groen-diep); box-shadow: inset 0 0 0 1.5px var(--st-groen-diep); }
.st-knop--donker { border: 0; }
.st-knop--groot { padding: 17px 32px; font-size: 16px; }
.st-knop svg { flex: none; }

.st-hero__hoofd { position: relative; overflow: hidden; border-radius: 24px; background: var(--st-zacht); border: 1px solid var(--st-zacht-rand); min-height: 420px; display: flex; align-items: center; }
.st-hero__tekst { position: relative; z-index: 2; padding: 48px 0 48px 64px; width: 600px; max-width: 52%; }
.st-hero__badge.st-label { display: block; background: none; border: 0; padding: 0; border-radius: 0; font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--st-tekst-zwak); }
.st-hero__titel { font-size: 50px; font-weight: 700; letter-spacing: -1.4px; line-height: 1.04; margin: 10px 0 16px; color: var(--st-tekst); }
.st-hero__intro { font-size: 17px; color: var(--st-tekst-2); max-width: 44ch; }
.st-hero__knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.st-hero__foto--illustratie { position: absolute; inset: 0 0 0 42%; z-index: 1; background: none; border-radius: 0; }
.st-hero__foto--illustratie svg { width: 100%; height: 100%; display: block; }
@media (max-width: 1320px) { .st-hero__tekst { padding-left: 48px; } .st-hero__titel { font-size: 44px; } }
@media (max-width: 1180px) {
    .st-hero__tekst { max-width: 50%; padding-block: 40px; }
    .st-hero__titel { font-size: 38px; }
    .st-hero__intro { font-size: 15.5px; }
    .st-hero__foto--illustratie { inset: 0 0 0 50%; }
}
@media (max-width: 991.98px) {
    .st-hero__hoofd { min-height: 0; flex-direction: column; align-items: stretch; border-radius: 20px; }
    .st-hero__tekst { order: 1; padding: 24px 20px 4px; width: auto; max-width: none; }
    .st-hero__titel { font-size: 30px; letter-spacing: -.8px; margin: 8px 0 10px; }
    .st-hero__intro { font-size: 15px; }
    .st-hero__knoppen { margin-top: 16px; gap: 8px; flex-wrap: nowrap; }
    .st-hero__knoppen .st-knop { flex: 1; padding: 14px 10px; font-size: 14.5px; }
    .st-hero__foto, .st-hero__foto--illustratie { order: 2; position: relative; inset: auto; height: 150px; }
}
.st-knop { white-space: nowrap; }

/* =========================================================================
   RONDE 3 — voettekst (referentie §17): licht, logo in eigen kleuren,
   koppen in de tekstkleur, betaalwijzen op wit, onderregel in mos.
   ========================================================================= */
.st-footer { background: var(--st-groen-tint); border-top: 1px solid var(--st-groen-rand); color: var(--st-tekst-2); }
.st-footer .st-footer__intro { color: var(--st-tekst-2); font-size: 14.5px; line-height: 1.6; }
.st-footer .st-footer__kop { color: var(--st-tekst); font-size: 15px; }
.st-footer .st-footer__links a { color: var(--st-tekst-2); font-size: 14.5px; }
.st-footer .st-footer__links a:hover { color: var(--st-groen-diep); text-decoration: underline; text-underline-offset: 3px; }
.st-footer__contact li { color: var(--st-tekst); }
.st-footer__contact svg { color: var(--st-groen-tekst); opacity: 1; }
.st-footer__contact span { opacity: 1; color: var(--st-tekst-2); }
.st-footer__betalen { border-top: 1px solid var(--st-groen-rand); }
.st-footer .st-betaalwijze { background: var(--st-wit); border: 1px solid var(--st-groen-rand); color: var(--st-tekst-2); }
.st-footer .st-footer__onderrand { background: var(--st-groen-diep); color: var(--st-op-donker); border-top: 0; font-size: 13px; padding-block: 16px; }
.st-footer .st-footer__onderrand a { color: var(--st-op-donker); text-decoration: underline; text-underline-offset: 3px; }
.st-footer .st-logo .st-logo__svg { height: 64px; }
@media (max-width: 991.98px) { .st-footer .st-logo .st-logo__svg { height: 52px; } }
.st-footer .st-footer__kop { text-transform: none; letter-spacing: -.1px; font-family: var(--st-kop); font-weight: 600; }

/* =========================================================================
   RONDE 3 — afdelingspagina (referentie/afdelingspagina.html, §13)
   ========================================================================= */
.st-cat-kop { align-items: center; }
.st-paginakop__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: 14px; color: var(--st-tekst-zwak); }
.st-wijzer { flex: 0 1 380px; display: flex; align-items: center; gap: 14px; background: var(--st-wit); border: 1px solid var(--st-rand); border-radius: var(--st-r-kaart); padding: 14px 16px; color: var(--st-tekst); text-decoration: none; transition: border-color .15s; }
.st-wijzer:hover { border-color: var(--st-groen-diep); color: var(--st-tekst); }
.st-wijzer__icoon { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--st-groen-diep); color: var(--st-blad); }
.st-wijzer > span:nth-child(2) { flex: 1; min-width: 0; }
.st-wijzer b { display: block; font: 600 15.5px/1.3 var(--st-kop); }
.st-wijzer small { display: block; font-size: 13.5px; color: var(--st-tekst-2); line-height: 1.4; }
.st-wijzer > svg { flex: none; color: var(--st-tekst-zwak); }

.st-landing { gap: 0; }
.st-groepen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; margin-bottom: 40px; }
.st-groepen--een { grid-template-columns: minmax(0, 1fr); }
.st-groepen--een .st-cattegels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.st-groep h2 { font: 600 19px/1.18 var(--st-kop); letter-spacing: -.5px; color: var(--st-tekst); margin: 0 0 12px; }
.st-cattegels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.st-cattegel { display: flex; align-items: center; gap: 12px; background: var(--st-wit); border: 1px solid var(--st-rand); border-radius: var(--st-r-kaart); padding: 8px 14px 8px 8px; min-height: 72px; color: var(--st-tekst); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.st-cattegel:hover { border-color: var(--st-groen-diep); box-shadow: var(--st-schaduw-1); color: var(--st-tekst); }
.st-cattegel__beeld { width: 56px; height: 56px; flex: none; border-radius: 12px; background: var(--st-tegel); padding: 6px; display: grid; place-items: center; overflow: hidden; }
.st-cattegel__beeld img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.st-cattegel > span:nth-child(2) { flex: 1; min-width: 0; }
.st-cattegel b { display: block; font: 600 15px/1.3 var(--st-kop); letter-spacing: -.1px; overflow-wrap: break-word; }
.st-cattegel small { font-size: 13px; color: var(--st-tekst-zwak); }
.st-cattegel > svg { flex: none; color: var(--st-tekst-zwak); }

.st-landing .st-sectiekop { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 20px; }
.st-landing .st-sectiekop h2 { font: 600 26px/1.18 var(--st-kop); letter-spacing: -.5px; color: var(--st-tekst); margin: 0; }
.st-landing .st-sectiekop p { color: var(--st-tekst-2); margin: 6px 0 0; }
.st-onzekeuze { margin-bottom: 40px; }
.st-onzekeuze__raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.st-uitlegtegel { background: var(--st-zacht); border: 1px solid var(--st-zacht-rand); border-radius: var(--st-r-kaart); padding: 22px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.st-uitlegtegel h3 { font: 600 16px/1.3 var(--st-kop); margin: 0; color: var(--st-tekst); }
.st-uitlegtegel p { font-size: 14px; color: var(--st-tekst-2); margin: 0; }
.st-landing__adviesblok, .st-landing__merken { margin-bottom: 40px; display: block; }
.st-artikelen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.st-artikel { display: flex; flex-direction: column; background: var(--st-wit); border: 1px solid var(--st-rand); border-radius: var(--st-r-kaart); overflow: hidden; color: var(--st-tekst); text-decoration: none; transition: box-shadow .18s, transform .18s; }
.st-artikel:hover { box-shadow: var(--st-schaduw-2); transform: translateY(-2px); color: var(--st-tekst); }
.st-artikel__beeld { height: 170px; background: var(--st-tegel); display: block; overflow: hidden; }
.st-artikel__beeld img { width: 100%; height: 100%; object-fit: cover; }
.st-artikel__tekst { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.st-artikel h3 { font: 600 18px/1.25 var(--st-kop); margin: 0; color: var(--st-tekst); }
.st-artikel p { font-size: 14.5px; color: var(--st-tekst-2); margin: 0; flex: 1; }
.st-merken { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
.st-merk { display: grid; place-items: center; height: 64px; background: var(--st-wit); border: 1px solid var(--st-rand); border-radius: var(--st-r-klein); font: 600 15px var(--st-kop); letter-spacing: -.2px; color: var(--st-tekst-2); text-decoration: none; text-align: center; padding: 0 8px; }
.st-merk:hover { color: var(--st-groen-diep); border-color: var(--st-rand-sterk); }
.st-afdalle { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--st-rand); border-radius: var(--st-r-kaart); padding: 20px 24px; margin: 0 0 40px; }
.st-afdalle b { font: 600 17px var(--st-kop); color: var(--st-tekst); }
.st-afdalle p { font-size: 14px; color: var(--st-tekst-2); margin: 2px 0 0; }
@media (max-width: 1180px) {
    .st-onzekeuze__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-merken { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .st-wijzer { flex-basis: auto; }
    .st-groepen { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 28px; }
    .st-groepen--een .st-cattegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-groep h2 { font-size: 17px; margin-bottom: 10px; }
    .st-cattegels { gap: 8px; }
    .st-cattegel { gap: 8px; padding: 6px 8px 6px 6px; min-height: 58px; }
    .st-cattegel > svg { display: none; }
    .st-cattegel__beeld { width: 44px; height: 44px; border-radius: 10px; padding: 4px; }
    .st-cattegel b { font-size: 13.5px; line-height: 1.25; }
    .st-cattegel small { font-size: 12.5px; }
    .st-onzekeuze__raster { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .st-artikelen { grid-template-columns: minmax(0, 1fr); }
    .st-landing .st-sectiekop { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 16px; }
    .st-landing .st-sectiekop h2 { font-size: 21px; }
    .st-afdalle { padding: 16px 18px; }
}

/* =========================================================================
   RONDE 3 — categorie: eerst kiezen (referentie/categoriepagina.html, §13)
   ========================================================================= */
.st-subcats { display: flex; gap: 10px; margin: 6px 0 2px; overflow-x: auto; scrollbar-width: none; }
.st-subcat { display: inline-flex; align-items: center; gap: 10px; flex: none; background: var(--st-wit); border: 1px solid var(--st-rand); border-radius: var(--st-r-pil); padding: 5px 18px 5px 5px; font-weight: 600; font-size: 14px; color: var(--st-tekst); white-space: nowrap; text-decoration: none; }
.st-subcat:hover { border-color: var(--st-groen-diep); color: var(--st-tekst); }
.st-subcat__beeld { width: 36px; height: 36px; border-radius: 50%; background: var(--st-tegel); padding: 5px; flex: none; overflow: hidden; }
.st-subcat small { font-weight: 500; color: var(--st-tekst-zwak); font-size: 12.5px; }
.st-kies { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 26px; margin: 26px 0 40px; }
.st-kies:not(:has(.st-kies__zij)) { grid-template-columns: minmax(0, 1fr); }
.st-kies__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.st-kies__kop h2, .st-alle__kop h2 { font: 600 22px/1.18 var(--st-kop); letter-spacing: -.5px; color: var(--st-tekst); margin: 0; }
.st-kiestegels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.st-kiestegel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; background: var(--st-wit); border: 1px solid var(--st-rand); border-radius: var(--st-r-kaart); padding: 16px 18px; min-height: 88px; color: var(--st-tekst); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.st-kiestegel:hover { border-color: var(--st-groen-diep); box-shadow: var(--st-schaduw-2); color: var(--st-tekst); }
.st-kiestegel__icoon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--st-groen-tint); color: var(--st-groen-diep); }
.st-kiestegel b { display: block; font: 600 16px/1.3 var(--st-kop); letter-spacing: -.2px; }
.st-kiestegel small { display: block; font-size: 13.5px; line-height: 1.4; color: var(--st-tekst-2); margin-top: 2px; }
.st-kiestegel__aantal { display: flex; align-items: center; gap: 2px; font-size: 13px; color: var(--st-tekst-zwak); white-space: nowrap; }
.st-kort { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; margin-top: 14px; padding: 16px 20px; background: var(--st-tegel); border-radius: var(--st-r-kaart); }
.st-kort > div { font-size: 13.5px; line-height: 1.5; color: var(--st-tekst-2); }
.st-kort b { display: block; font-size: 14px; color: var(--st-tekst); }
.st-kort__meer { grid-column: 1 / -1; font-size: 14px; }
.st-kies__zij { display: flex; flex-direction: column; gap: 12px; }
.st-alle__kop { display: flex; align-items: baseline; gap: 12px; margin: 8px 0 16px; padding-top: 28px; border-top: 1px solid var(--st-rand); scroll-margin-top: calc(var(--st-kop-h, 87px) + 16px); }
.st-alle__kop span { font-size: 14px; color: var(--st-tekst-zwak); }
.st-paginakop__meta .st-link { font-size: 14px; }
.st-productraster--kort > :nth-child(n+13) { display: none; }
.st-meer { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 30px 0 6px; text-align: center; }
.st-meer p { font-size: 13.5px; color: var(--st-tekst-zwak); margin: 0; }
.st-meer__balk { width: 220px; height: 4px; border-radius: 4px; background: var(--st-rand); overflow: hidden; }
.st-meer__balk i { display: block; height: 100%; background: var(--st-groen-diep); border-radius: 4px; }
@media (max-width: 991.98px) {
    .st-kies { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 28px; }
    .st-kies__kop h2, .st-alle__kop h2 { font-size: 19px; }
    .st-kiestegels { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .st-kiestegel { gap: 12px; padding: 12px 14px; min-height: 0; }
    .st-kiestegel__icoon { width: 38px; height: 38px; }
    .st-kort { grid-template-columns: minmax(0, 1fr); padding: 4px 16px; }
    .st-kort > div { display: none; }
}
/* Links zijn oranje tekst, onderstreept (referentie §2) */
.st-link { color: var(--st-actie-tekst); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.st-link:hover { color: var(--st-actie-tekst-hover); text-decoration-thickness: 2px; }
.st-link--pijl { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.st-link--pijl:hover { text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================================
   RONDE 3 — productkaart (referentie §11)
   ========================================================================= */
.st-product { border: 1px solid var(--st-rand); border-radius: var(--st-r-kaart); background: var(--st-wit); transition: box-shadow .18s, transform .18s, border-color .18s; }
.st-product:hover { box-shadow: var(--st-schaduw-2); transform: translateY(-2px); border-color: var(--st-rand-sterk); }
.st-product__tegel { background: var(--st-tegel); aspect-ratio: 1 / .76; padding: 14px 26px; overflow: hidden; }
.st-product__inhoud { padding: 12px 16px 14px; }
.st-product__merk { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--st-tekst-zwak); }
.st-product__naam { font: 600 15.5px/1.35 var(--st-kop); letter-spacing: -.2px; margin: 1px 0 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.st-product__naam a { color: var(--st-tekst); }
.st-product__kenmerken { margin: 7px 0 0; font-size: 13px; line-height: 1.5; color: var(--st-tekst-2); }
.st-product .st-sterren { font-size: 13px; color: var(--st-tekst-2); }
.st-product .st-sterren__rij { color: var(--st-ster); }
.st-product__prijs-nu, .st-product .st-prijs__nu { font: 700 21px var(--st-kop); letter-spacing: -.4px; color: var(--st-tekst); }
.st-product__eenheid { font-size: 12px; color: var(--st-tekst-zwak); }
.st-product .st-levering { font-size: 13px; font-weight: 600; color: var(--st-groen-tekst); border-top: 0; }
.st-product__toevoegen { background: var(--st-actie); color: var(--st-op-actie); }
.st-product__toevoegen:hover { background: var(--st-actie-hover); color: var(--st-op-actie); }
/* Ronde 3: Botble kleurt de gekozen swatch met --primary-color (#ad5300); in het koopblok is dat mos. */
.st-pd__formulier { --primary-color: var(--st-groen-diep); }

/* =========================================================================
   RONDE 3 — winkelwagen (referentie/winkelwagen.html, §16)
   Prijzen in de tekstkleur (oranje als tekst is voor links en de actieprijs),
   de verzendbalk in mos op wit, "Verwijder" als stille onderstreepte link.
   ========================================================================= */
.st-wagenregel__totaal, .st-wagensom__totaal dd { color: var(--st-tekst); }
.st-wagensom__totaal dd { font-family: var(--st-kop); font-weight: 700; }
.st-wagenregel__weg { color: var(--st-tekst-2); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.st-wagenregel__weg:hover { color: var(--st-tekst); }
.st-verzendbalk { background: var(--st-groen-tint); border: 1px solid var(--st-groen-rand); }
.st-verzendbalk__spoor { background: var(--st-wit); }
.st-verzendbalk__vulling { background: var(--st-groen-diep); }
.st-minicart__prijs { color: var(--st-tekst); }

/* Veegrij op een subcategorie (6 oktober 2026): terug naar de afdeling en de
   huidige categorie gemarkeerd. */
.st-subcat--terug { background: transparent; border-style: dashed; color: var(--st-groen-diep); padding-left: 12px; gap: 6px; }
.st-subcat--terug:hover { background: var(--st-tegel); border-style: solid; color: var(--st-groen-diep); }
.st-subcat--actief, .st-subcat--actief:hover { background: var(--st-groen-diep); border-color: var(--st-groen-diep); color: var(--st-wit); }
.st-subcat--actief small { color: rgba(255,255,255,.75); }

/* Handig erbij in de zijkolom van de winkelwagen (6 oktober 2026). */
.st-wagenhandig { margin-top: 16px; }

/* ---------------------------------------------------------------------
   Keuzehulp schrikdraadapparaat (6 oktober 2026)
   --------------------------------------------------------------------- */
.st-kh { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; margin: 8px 0 40px; }
.st-kh__vragen { display: grid; gap: 18px; }
.st-kh__vraag { border: 1px solid var(--st-rand); border-radius: var(--st-r-kaart); background: var(--st-wit); padding: 18px 20px; margin: 0; }
.st-kh__vraag legend { float: left; width: 100%; display: flex; align-items: center; gap: 10px; font: 600 16px/1.3 var(--st-kop); color: var(--st-tekst); margin: 0 0 12px; padding: 0; }
.st-kh__vraag legend span { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--st-groen-diep); color: var(--st-wit); display: grid; place-items: center; font-size: 13px; }
.st-kh__keuzes { clear: both; display: flex; flex-wrap: wrap; gap: 8px; }
.st-kh__keuze { position: relative; cursor: pointer; }
.st-kh__keuze input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.st-kh__keuze span { display: inline-block; border: 1px solid var(--st-rand); border-radius: var(--st-r-pil); padding: 8px 14px; font-size: 14px; font-weight: 600; color: var(--st-tekst); background: var(--st-wit); }
.st-kh__keuze input:checked + span { background: var(--st-groen-diep); border-color: var(--st-groen-diep); color: var(--st-wit); }
.st-kh__keuze input:focus-visible + span { outline: 2px solid var(--st-groen-diep); outline-offset: 2px; }
.st-kh__maten { clear: both; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.st-kh__maten label { display: grid; gap: 6px; font-size: 13.5px; color: var(--st-tekst-2); }
.st-kh__tip { margin: 10px 0 0; font-size: 13px; color: var(--st-tekst-2); }
.st-kh__uitkomst { position: sticky; top: 90px; background: var(--st-tegel); border-radius: var(--st-r-kaart); padding: 20px; }
.st-kh__som { margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; color: var(--st-tekst); }
.st-kh__lijst { display: grid; gap: 10px; }
.st-kh__kaart { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; align-items: center; background: var(--st-wit); border: 1px solid var(--st-rand); border-radius: var(--st-r-kaart); padding: 10px 14px 10px 10px; text-decoration: none; color: var(--st-tekst); transition: border-color .15s; }
.st-kh__kaart:hover { border-color: var(--st-groen-diep); color: var(--st-tekst); }
.st-kh__kaart img { width: 72px; height: 72px; object-fit: contain; mix-blend-mode: multiply; }
.st-kh__tekst { display: grid; gap: 3px; min-width: 0; }
.st-kh__tekst b { font: 600 14.5px/1.3 var(--st-kop); }
.st-kh__tekst span:not(.st-badge) { font-size: 13px; color: var(--st-tekst-2); }
.st-kh__tekst small { font-size: 12.5px; color: var(--st-tekst-2); }
.st-kh__tekst .st-badge { justify-self: start; }
.st-kh__prijs { text-align: right; font-weight: 700; white-space: nowrap; }
.st-kh__prijs small { display: block; font-weight: 600; font-size: 12.5px; color: var(--st-actie-tekst, var(--st-groen-diep)); }
.st-kh__melding { margin: 0 0 10px; font-size: 14px; }
.st-kh__voet { margin: 14px 0 0; font-size: 12.5px; color: var(--st-tekst-2); line-height: 1.5; }
@media (max-width: 900px) {
  .st-kh { grid-template-columns: 1fr; }
  .st-kh__uitkomst { position: static; }
}
@media (max-width: 480px) {
  .st-kh__maten { grid-template-columns: 1fr; }
  .st-kh__kaart { grid-template-columns: 56px minmax(0, 1fr); }
  .st-kh__kaart img { width: 56px; height: 56px; }
  .st-kh__prijs { grid-column: 2; text-align: left; }
}

/* Vergelijkingstabel: "vanaf" bij een product met varianten van verschillende prijs. */
.st-vergelijk__vanaf { font-size: 12.5px; font-weight: 500; color: var(--st-tekst-zwak); margin-right: 3px; }

/* Winkelwagenknopje op de productkaart tijdens het toevoegen (9 okt 2026,
   melding eigenaar: "knop wordt helemaal raar donker"). Shofy's .btn-loading
   maakt de knopinhoud transparant en tekent een spinner in de kleur van
   --tp-btn-color, die deze knop niet zet: het icoon verdween en wat overbleef
   hing af van de browser. Nu: oranje blijft, icoon weg, spinner in de
   icoonkleur. Het hover-effect alleen op apparaten met een muis, anders blijft
   het na een tik "hangen" op de telefoon. */
.st-product__toevoegen.btn-loading {
    background: var(--st-actie) !important;
    color: var(--st-op-actie) !important;
    transform: none;
}
.st-product__toevoegen.btn-loading svg { visibility: hidden; }
.st-product__toevoegen.btn-loading::after {
    color: var(--st-op-actie);
    border: 2px solid currentColor;
    border-right-color: transparent;
}
@media (hover: none) {
    .st-product__toevoegen:hover { background: var(--st-actie); transform: none; }
}

/* Achtergrond achter de minicart (9 okt 2026). Shofy legt er 70 % marineblauw
   (#010f1c) over; het oranje knopje waarop je net drukte werd daaronder
   modderbruin, en de eigenaar zag "de knop wordt helemaal raar donker".
   Lichter en in de tekstkleur van de winkel: de pagina blijft leesbaar, het
   paneel springt er nog steeds uit. (Eerder bewust donker gelaten, zie "Geen
   zwarte knoppen"; dit herziet dat.) */
.body-overlay { background-color: var(--st-tekst); }
.body-overlay.opened { opacity: .35; }

/* =========================================================================
   Mobiel menu (partials/mobile-offcanvas.blade.php, 9 okt 2026)
   ========================================================================= */
.st-mobmenu .offcanvas__wrapper { padding: 20px 20px 32px; }
.st-mobmenu__logo { margin: 4px 0 20px; }
.st-mobmenu__kop {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--st-tekst-zwak);
}
.st-mobmenu__afdelingen,
.st-mobmenu__sub ul,
.st-mobmenu__extra { list-style: none; margin: 0; padding: 0; }
.st-mobmenu__afdelingen > li { border-bottom: 1px solid var(--st-rand); }
.st-mobmenu__afdeling > summary,
.st-mobmenu__los {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--st-tekst);
    cursor: pointer;
    list-style: none;
}
.st-mobmenu__afdeling > summary::-webkit-details-marker { display: none; }
.st-mobmenu__afdeling > summary svg:first-child,
.st-mobmenu__los svg { color: var(--st-groen-diep); flex-shrink: 0; }
.st-mobmenu__afdeling > summary span { flex: 1; }
.st-mobmenu__pijl { transition: transform .2s ease; flex-shrink: 0; }
.st-mobmenu__afdeling[open] > summary .st-mobmenu__pijl { transform: rotate(180deg); }
.st-mobmenu__sub { padding: 0 0 14px 32px; }
.st-mobmenu__alles {
    display: inline-block;
    margin: 2px 0 8px;
    font-weight: 600;
    color: var(--st-groen-diep);
}
.st-mobmenu__groep {
    margin: 10px 0 2px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--st-tekst-zwak);
}
.st-mobmenu__sub li a {
    display: block;
    padding: 9px 0;
    font-size: 15px;
    color: var(--st-tekst);
}
.st-mobmenu__extra { margin-top: 20px; }
.st-mobmenu__extra a {
    display: block;
    padding: 11px 0;
    font-size: 15px;
    color: var(--st-tekst);
}

/* =========================================================================
   Groen (17 oktober 2026): ontwerp voorstellen/groen-2026-10/.
   Getekende figuurtjes uit de actietegels weg, hero met eigen foto naast de
   tekst en de seizoensproducten als rij eronder, en een compactere telefoon.
   ========================================================================= */
/* De getekende figuurtjes uit de actietegels weg. */
.st-promo__beeld { display: none; }
.st-promo:has(.st-promo__beeld) { padding-right: 28px; }

/* Hero: tekst links, eigen foto rechts; de seizoensproducten als rij eronder. */
.st-hero__hoofd:has(.st-hero__fotogroot) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: stretch; flex-direction: initial; }
.st-hero__hoofd:has(.st-hero__fotogroot) .st-hero__tekst { align-self: center; width: auto; max-width: none; min-width: 0; }
@media (max-width: 1279px) { .st-hero__hoofd:has(.st-hero__fotogroot) .st-hero__tekst { padding: 40px 28px 40px 40px; } }
.st-hero__fotogroot { margin: 0; position: relative; min-height: 420px; }
.st-hero__fotogroot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.st-hero__seizoen { grid-column: 1 / -1; background: var(--st-wit); border-top: 1px solid var(--st-groen-rand); }
@media (min-width: 992px) {
    .st-hero__seizoen { padding: 22px 24px 24px; }
    .st-hero__tegels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 992px) and (max-width: 1279px) {
    .st-hero__tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .st-hero__hoofd:has(.st-hero__fotogroot) { grid-template-columns: 1fr; }
    .st-hero__fotogroot { min-height: 240px; order: -1; }
}

/* ---- Telefoon (≤ 767 px): korter, minder kaders, opzij vegen ---- */
@media (max-width: 767px) {
    /* hero: foto lager, tekst compacter, knoppen naast elkaar op volle breedte */
    .st-hero { padding-block: 12px 20px; }
    .st-hero__hoofd { border-radius: 16px; }
    .st-hero__fotogroot { min-height: 190px; }
    .st-hero__hoofd:has(.st-hero__fotogroot) .st-hero__tekst { padding: 18px 18px 20px; gap: 12px; }
    .st-hero__badge { display: none; }
    .st-hero__titel { font-size: 28px; line-height: 1.12; }
    .st-hero__intro { font-size: 15px; line-height: 1.55; }
    .st-hero__knoppen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 4px; }
    .st-hero__knoppen .st-knop { justify-content: center; min-height: 48px; padding-inline: 12px; font-size: 15px; }
    .st-hero__seizoen { padding: 14px 0 16px; }
    .st-hero__seizoen-kop { padding-inline: 18px; }
    .st-hero__tegels { padding-inline: 18px; scroll-padding-inline: 18px; }
    .st-hero__tegel { flex-basis: 44%; }
    .st-hero__tegel-naam { -webkit-line-clamp: 2; }
    .st-hero__tegel-prijs { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; align-self: stretch; }
    .st-hero__tegel-bedrag { white-space: nowrap; }

    /* beloften: 2 × 2 in plaats van vier rijen */
    .st-beloften__rij { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
    .st-beloften__rij > .st-belofte,
    .st-beloften__rij > .st-belofte + .st-belofte { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; border: 0; border-top: 1px solid var(--st-rand); }
    .st-beloften__rij > .st-belofte:nth-child(-n+2) { border-top: 0; }
    .st-beloften__rij > .st-belofte:nth-child(odd) { border-right: 1px solid var(--st-rand); }
    .st-belofte__icoon { width: 36px; height: 36px; }
    .st-belofte__tekst strong { font-size: 13.5px; line-height: 1.35; }
    .st-belofte__tekst span { display: none; }

    /* actietegels: één rij om opzij te vegen */
    .st-promos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
    .st-promos::-webkit-scrollbar { display: none; }
    .st-promo,
    .st-promo:has(.st-promo__beeld) { flex: 0 0 84%; scroll-snap-align: start; min-height: 0; padding: 20px; }
    .st-promo h3 { font-size: 19px; }

    /* sectiekop: kop, regel en link onder elkaar, op volle breedte */
    .st-sectiekop { flex-direction: column; align-items: flex-start; gap: 6px; }
    .st-sectiekop > div { width: 100%; }
}

/* ---- Aanraakdoelen op de telefoon (19 oktober 2026, afmaakronde B10) ----
   Gemeten op 375 px (nulmeting en opnieuw op 19 okt): kaartknop 40, hartje 36,
   ronde knoppen 36–42, zoekknop 38, het zoekveld zelf 19 px hoog, de
   knoppen in de onderbalk 29–43 breed. Bediening gaat naar 44 × 44. Losse
   tekstlinks (kruimelpad, merk op de kaart, voetlinks) naar minstens 24 px
   hoog: de norm voor links (WCAG 2.5.8); 44 px per voetlink maakt de voettekst
   twee keer zo lang. */
@media (max-width: 767px) {
    .st-product__toevoegen,
    .st-product__verlanglijst,
    .st-rondknop,
    .st-rondknop--klein,
    .st-zoek__knop { width: 44px; height: 44px; }
    .st-pd__acties .st-aantal .st-aantal__knop.tp-cart-minus,
    .st-pd__acties .st-aantal .st-aantal__knop.tp-cart-plus { width: 44px; }
    .st-wagen,
    .st-knop,
    .st-pd__verlanglijst,
    .st-sorteerbalk__filterknop { min-height: 44px; }
    /* Het veld rekte niet mee met de pil: height:auto uit de reset hierboven. */
    .st-zoek input.st-zoek__veld { align-self: stretch; }
    /* De knop vult zijn kolom, niet alleen het icoon en het woord: de
       kolommen van Bootstrap hielden 12 px aan elke kant vrij. */
    .tp-mobile-menu .row > .col { padding-inline: 0; }
    .tp-mobile-menu .tp-mobile-item,
    .tp-mobile-menu .tp-mobile-item-btn { width: 100%; }

    .st-kruimels__pad a,
    .st-product__merk a,
    .st-footer__links a,
    .st-footer__contact a,
    .st-link--pijl,
    .st-sectiekop__meer { display: inline-flex; align-items: center; min-height: 24px; }
}

/* =========================================================================
   Stro als tweede kleur — variant C (19 okt 2026, eigenaar: "Ja optie C").
   Groen blijft merk- en koopkleur. Stro alleen als VLAK met donkere tekst of
   als icoon op donkergroen; nooit als tekst of icoon op wit (1,7:1).
   Ontwerp en metingen: voorstellen/kleur-2026-10/. Terug: reservekopie
   /home/webshops/backups/kleur-c-voor-stro-accent-20261019/.
   ========================================================================= */
:root {
    --st-stro:      #f4bf3a;   /* donkere tekst erop 8,0:1 */
    --st-stro-tint: #fff3d1;
    --st-stro-icoon:#8a5a00;   /* op de tint 5,4:1 */
    --st-zacht:     #f7f7f3;   /* zachte vlakken neutraal in plaats van bleekgroen */
}

/* Bovenbalk donkergroen, vinkjes in stro (4,7:1), tekst wit (8,0:1) */
.st-header .st-topbar { background: var(--st-groen-nacht); color: var(--st-wit); border: 0; }
.st-header .st-topbar a,
.st-header .st-topbar span { color: var(--st-wit); }
.st-header .st-topbar__usps svg,
.st-header .st-topbar .st-vink { color: var(--st-stro); }
.st-topbar .st-btw { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); }
.st-topbar .st-btw button { color: var(--st-wit); }
.st-topbar .st-btw button[aria-pressed="true"] { background: var(--st-wit); color: var(--st-groen-nacht); }

/* Labels als strogele pil */
.st-hero__badge.st-label,
.st-promo .st-label,
.st-blogkaart .st-blogkaart__label {
    display: inline-block;
    width: max-content;
    background: var(--st-stro);
    color: var(--st-tekst);
    padding: 5px 10px;
    border-radius: var(--st-r-pil);
    letter-spacing: .4px;
}

/* Hero iets frisser lichtgroen (tekst 11,7:1, zwakke tekst 5,2:1) */
.st-hero .st-hero__hoofd { background: #e6f2dc; }

/* Iconen: beloften en keuzehulpen op stro, service op de strotint */
.st-belofte .st-belofte__icoon,
.st-hulpkaart .st-hulpkaart__icoon { background: var(--st-stro); color: var(--st-tekst); }
.st-service__kaart .st-service__icoon { background: var(--st-stro-tint); color: var(--st-tekst); }
.st-blogkaart .st-blogkaart__beeld { background: var(--st-stro-tint); color: var(--st-stro-icoon); }