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

:root {
    /* --- groen ----------------------------------------------------------

       Het primaire groen was #2e9e44. Witte tekst daarop haalt 3,45 : 1 en
       WCAG AA vraagt 4,5 voor tekst onder ~19px — dus elke knop met een
       woord erin zakte: "Maat kiezen", "Alle categorieën", "Bekijk alle
       werksokken". Datzelfde groen als tekstkleur óp wit haalde ook 3,45.

       Nu #257e36: 5,10 : 1. Naast elkaar is het verschil nauwelijks te zien;
       op een knop scheelt het of de tekst leesbaar is of niet. De hover ging
       mee, want die was met 4,98 lichter geworden dan de nieuwe basiskleur.

       Grote vlakken zonder tekst en het logo mogen lichter — daar geldt de
       eis niet — maar één kleur voor alles is hier beter dan twee bijna
       gelijke die na een half jaar door elkaar gebruikt worden. */
    --st-groen:            #257e36;   /* primair: knoppen, accenten, logo */
    --st-groen-diep:       #1c5c2c;   /* footer, koppen op licht */
    --st-groen-hover:      #1f6b2e;
    --st-groen-tint:       #eaf6ec;   /* zachte vlakken, icoonvlakjes */
    --st-groen-licht:      #e4f3e7;   /* hero-achtergrond */
    --st-mint:             #a5e6b2;   /* accent op donker */
    --st-groen-rand:       #cfe6d3;
    --st-groen-vlak:       #e4f3e7;   /* zachtgroen vlak, o.a. uitgelicht artikel */
    --st-groen-rand-sec:   #9fd0ab;

    /* --- geel (Stapp Yellow) -------------------------------------------- */
    --st-geel:             #f2c230;
    /* Was #b8860b: 3,25 : 1 op wit. Nu 5,01. Alleen als tékstkleur; het gele
       vlak zelf (--st-geel) blijft ongewijzigd. */
    --st-geel-tekst:       #8f6908;
    --st-geel-donker:      #4a4324;

    /* --- neutraal ------------------------------------------------------- */
    --st-bodem:            #fafaf8;   /* paginabodem */
    --st-wit:              #ffffff;
    --st-tegel:            #f2f2ee;   /* productfotovlak, inputs */
    --st-rand:             #e8e8e3;
    --st-rand-input:       #e2e2dc;

    /* --- tekst ---------------------------------------------------------- */
    --st-tekst:            #23312a;
    --st-tekst-alt:        #1e2226;
    --st-tekst-sec:        #4a4f4a;
    --st-tekst-sec-2:      #6b7068;
    /* Was #8b9089: 3,26 : 1, en dit grijs staat op 12,5px — labels als
       "MET COOLMAX®". Nu 4,66. */
    --st-tekst-zwak:       #70766e;

    /* --- signaal -------------------------------------------------------- */
    --st-ster:             #f5a623;   /* beoordelingssterren */
    --st-wwk:              #ed2283;   /* UITSLUITEND WebwinkelKeur */

    /* --- typografie ----------------------------------------------------- */
    /* Botble levert de gekozen families als --kop-font en --primary-font en
       serveert ze van onze eigen server. Staat er niets ingesteld, dan valt
       het terug op de namen uit het ontwerp en daarna op het systeemfont. */
    --st-font-kop:  var(--kop-font, "Archivo", system-ui, "Segoe UI", sans-serif);
    --st-font-body: var(--primary-font, "Public Sans", system-ui, "Segoe UI", sans-serif);

    /* --- vorm ----------------------------------------------------------- */
    --st-radius-kaart:  16px;
    --st-radius-tegel:  13px;
    --st-radius-klein:  12px;
    --st-radius-pill:   999px;

    /* --- ritme ---------------------------------------------------------- */
    --st-sectie:        44px;   /* verticaal ritme tussen secties */
    --st-content-max:   1440px;
    --st-content-pad:   64px;

    --st-schaduw-widget: 0 4px 18px rgba(0, 0, 0, .14);
}

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

body {
    background: var(--st-bodem);
    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: 800; letter-spacing: -.6px; }
h2 { font-size: 24px; font-weight: 700; }
h3 { font-size: 18px; font-weight: 700; }

a { color: var(--st-groen-diep); }
a:hover { color: var(--st-groen-hover); }

/* Labels: klein, uppercase, iets uit elkaar */
.st-label {
    font-size: 12px;
    font-weight: 700;
    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: 700;
    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-groen);
    color: var(--st-wit);
}
.st-knop.st-knop--primair:hover {
    background: var(--st-groen-hover);
    color: var(--st-wit);
}

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

.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-groen);
    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: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    line-height: 1;
    padding: 6px 11px;
    border-radius: var(--st-radius-pill);
}

.st-badge--bestseller { background: var(--st-groen);      color: var(--st-wit); }
.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-groen-diep); }

/* =========================================================================
   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-groen);
    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: 700;
    color: var(--st-groen-diep);
    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: 700;
    color: var(--st-groen);
    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-groen);
    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-groen);
    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-groen-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-groen-diep);
    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: 700;
    color: var(--st-groen-diep);
}

@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-tint);
    color: var(--st-groen-diep);
    font-size: 13px;
}

.st-topbar__binnen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-block: 8px;
    flex-wrap: wrap;
}

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

.st-topbar__usps li {
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.st-topbar__service {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--st-groen-diep);
    text-decoration: none;
    white-space: nowrap;
}

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

@media (max-width: 991px) {
    /* Op mobiel telt alleen de belofte die de bestelling over de streep
       trekt; de rest kost hoogte die de zoekbalk beter kan gebruiken. */
    .st-topbar__usps li:not(:first-child),
    .st-topbar__service { display: none; }
}

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

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

.st-header__rij {
    display: flex;
    align-items: center;
    gap: 48px;
    padding-block: 22px;
}

.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: 16px; padding-block: 14px; }
    .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-groen);
    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-groen);
    color: var(--st-wit);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease;
}

.st-zoek__knop:hover { background: var(--st-groen-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: 28px;
    margin-left: auto;
}

.st-actie {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--st-groen-diep);
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

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

.st-actie__label {
    font-size: 12px;
    color: var(--st-tekst-sec);
    line-height: 1;
}

.st-actie__icoon { position: relative; display: block; }

.st-actie__teller {
    position: absolute;
    top: -6px;
    right: -9px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: var(--st-radius-pill);
    background: var(--st-groen);
    color: var(--st-wit);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

.st-wagen {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--st-groen-tint);
    border: 0;
    border-radius: var(--st-radius-pill);
    padding: 10px 18px;
    color: var(--st-groen-hover);
    cursor: pointer;
    transition: background .15s ease;
}

.st-wagen:hover { background: var(--st-groen-licht); }

.st-wagen__bedrag {
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.st-wagen { white-space: nowrap; }

@media (max-width: 991px) {
    .st-acties { gap: 14px; }
    .st-wagen { padding: 9px 14px; }
}

/* --- 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__categorieen { position: relative; }

.st-nav__categorieknop {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    background: var(--st-groen);
    color: var(--st-wit);
    border: 0;
    font-family: var(--st-font-body);
    font-size: 15px;
    font-weight: 700;
    padding: 15px 22px;
    cursor: pointer;
}

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

/* De dropdown zelf komt van Botble; alleen de plaatsing is van ons. */
/* De lijst staat nu server-side in de pagina in plaats van via ajax, dus het
   openklappen doen we hier — op dezelfde manier als de submenu's in de balk
   ernaast: alleen opacity en visibility, nooit display, want dat geeft die
   trillende overgang. */
.st-nav__categorieen .tp-category-menu-content {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 70;
    min-width: 280px;
    max-height: 78vh;
    overflow-y: auto;
    background: var(--st-wit);
    border: 1px solid var(--st-rand);
    border-top: 0;
    box-shadow: var(--st-schaduw-widget);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .18s ease-out, transform .18s ease-out, visibility .18s;
}

.st-nav__categorieen:hover .tp-category-menu-content,
.st-nav__categorieen:focus-within .tp-category-menu-content {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Shofy zet deze lijst absoluut neer, omdat hij hem als zwevend submenu
   gebruikt. Bij ons is het paneel zelf al absoluut, dus zou de lijst uit de
   omhulling vallen: het paneel bleef 1 pixel hoog terwijl de lijst er 634
   naast hing. Vandaar terug in de normale stroom. */
.st-nav__categorieen .tp-category-menu-content ul {
    position: static;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 6px 0;
    border: 0;
    box-shadow: none;
    background: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    list-style: none;
}

.st-nav__categorieen .tp-category-menu-content li > a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 18px;
    font-size: 14.5px;
    color: var(--st-tekst-sec);
    text-decoration: none;
}

.st-nav__categorieen .tp-category-menu-content li > a:hover {
    background: var(--st-tegel);
    color: var(--st-groen-diep);
}

@media (prefers-reduced-motion: reduce) {
    .st-nav__categorieen .tp-category-menu-content { transition: none; transform: none; }
    .st-nav__categorieen:hover .tp-category-menu-content { transform: none; }
}

.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-groen-diep);
    font-weight: 700;
    border-bottom-color: var(--st-groen);
}

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

.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: 800;
    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: 700;
    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-groen); }

.st-product__naam {
    font-family: var(--st-font-kop);
    font-size: 15.5px;
    font-weight: 700;
    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-groen); }

.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: 18px;
    font-weight: 800;
    color: var(--st-groen-hover);
    font-variant-numeric: tabular-nums;
}

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

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

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

.st-product__verlanglijst {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: 1px solid var(--st-rand);
    border-radius: var(--st-radius-pill);
    background: rgba(255, 255, 255, .92);
    color: var(--st-tekst-sec);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease, color .15s ease;
}

.st-product:hover .st-product__verlanglijst,
.st-product__verlanglijst:focus-visible,
.st-product__verlanglijst.is-actief { opacity: 1; }

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

/* 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: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    line-height: 1;
    padding: 6px 11px;
    border-radius: var(--st-radius-pill);
    background: var(--st-groen);
    color: var(--st-wit);
}

.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: 40px 48px;
    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: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--st-groen-diep);
}

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

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

.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: 700;
    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: 700;
    letter-spacing: -.3px;
}

.st-hero__kaart--groen .st-hero__kaart-titel { color: var(--st-groen-diep); }
.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: 700;
    text-decoration: none;
}

.st-hero__kaart--groen .st-hero__kaart-link { color: var(--st-groen-diep); }
.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; }
}

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

.st-sectiekop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.st-sectiekop__boven {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--st-groen);
    margin-bottom: 6px;
}

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

.st-sectiekop__meer {
    flex-shrink: 0;
    color: var(--st-groen-hover);
    font-size: 14.5px;
    font-weight: 700;
    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-groen);
    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: 700;
    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
   ========================================================================= */

.st-beloften { padding-block: 40px; }

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

@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-hover);
    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: 700;
    color: var(--st-tekst);
}

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

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

.st-nieuwsbrief {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    background: var(--st-groen);
    border-radius: 20px;
    padding: 40px 48px;
    margin-bottom: 48px;
    color: var(--st-wit);
}

.st-nieuwsbrief__tekst { max-width: 46ch; }

.st-nieuwsbrief__titel {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.5px;
    color: var(--st-wit);
}

.st-nieuwsbrief__sub {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .88);
}

.st-nieuwsbrief__formulier { flex-grow: 1; max-width: 420px; }

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

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

.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: 700;
    cursor: pointer;
}

.st-nieuwsbrief__formulier button:hover { background: #14481f; }

@media (max-width: 767px) {
    .st-nieuwsbrief { padding: 28px 24px; gap: 22px; }
    .st-nieuwsbrief__titel { font-size: 21px; }
    .st-nieuwsbrief__formulier { max-width: none; }
}

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

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

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

.st-pd__titel {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.7px;
    line-height: 1.2;
    margin: 0 0 10px;
}

.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: 800;
    letter-spacing: -.8px;
    color: var(--st-groen-hover);
    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); }

/* --- 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: 700;
    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-groen);
    color: var(--st-groen-diep);
    box-shadow: 0 0 0 1px var(--st-groen);
}

.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: 700;
    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-groen); border-color: var(--st-groen); }

/* --- 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-groen-diep); }
.st-pd__offerte span span { font-weight: 700; color: var(--st-groen-diep); }

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

.st-vertrouwen {
    border: 1px solid var(--st-rand);
    border-radius: var(--st-radius-klein);
    padding: 16px 18px;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    background: var(--st-wit);
}

.st-vertrouwen__regel {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0;
    font-size: 13.5px;
    color: var(--st-tekst-sec);
    line-height: 1.5;
}

.st-vertrouwen__regel svg { flex-shrink: 0; color: var(--st-groen); }
.st-vertrouwen__regel strong { color: var(--st-tekst); font-weight: 700; }

.st-vertrouwen__stip {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: var(--st-radius-pill);
    background: var(--st-groen);
    margin-inline: 4px;
}

.st-vertrouwen__stip.is-uit { background: var(--st-tekst-zwak); }

.st-vertrouwen__regel--keurmerk:empty { display: none; }

.st-vertrouwen__regel--keurmerk { border-top: 1px solid var(--st-rand); padding-top: 11px; }

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

/* =========================================================================
   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,
.st-nieuwsbrief__formulier 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-groen);   /* 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: 800;
    letter-spacing: -.5px;
    line-height: 1;
    white-space: nowrap;
}

.st-logo__deel1 { color: var(--st-groen); }
.st-logo__deel2 { color: var(--st-groen-diep); }

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


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

.st-sticky__rij {
    display: flex;
    align-items: center;
    gap: 32px;
    padding-block: 10px;
}

.st-sticky__menu {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
}

/* In de zwevende balk telt hoogte: één regel, wat compacter, geen
   onderstreping die de balk hoger maakt. */
.st-sticky__menu .tp-main-menu-content > ul {
    flex-wrap: nowrap;
}

.st-sticky__menu ul > li > a {
    padding: 10px 13px;
    font-size: 14px;
    border-bottom: 0;
    white-space: nowrap;
}

.st-sticky__menu > nav > ul > li.active > a { border-bottom: 0; }

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

@media (max-width: 1199px) {
    .st-sticky__menu ul > li > a { padding: 10px 9px; font-size: 13.5px; }
}

/* =========================================================================
   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: 14px;
    margin-top: 16px;
}

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

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

.bb-product-gallery-thumbnails .slick-current > div,
.bb-product-gallery-thumbnails > div.is-active {
    border: 2px solid var(--st-groen);
}

/* 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-groen);
    color: var(--st-wit);
    font-size: 12px;
    font-weight: 700;
    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. */
.st-pd__formulier .bb-product-attribute-swatch-title { display: none; }

.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. */
.st-pd__formulier .bb-product-attribute-swatch-list.text-swatch li .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 .bb-product-attribute-swatch-list.text-swatch li:hover .bb-product-attribute-text-display {
    border-color: var(--st-groen-rand-sec);
}

/* De gekozen maat. */
.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: 2px solid var(--st-groen);
    background: var(--st-groen-tint);
    color: var(--st-groen-diep);
    font-weight: 700;
}

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

/* 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: 700;
    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-groen); border-color: var(--st-groen); }

/* --- 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-groen-diep); }
.st-pd__offerte span span { font-weight: 700; color: var(--st-groen-diep); }

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

.st-vertrouwen {
    border: 1px solid var(--st-rand);
    border-radius: var(--st-radius-klein);
    padding: 16px 18px;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    background: var(--st-wit);
}

.st-vertrouwen__regel {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0;
    font-size: 13.5px;
    color: var(--st-tekst-sec);
    line-height: 1.5;
}

.st-vertrouwen__regel svg { flex-shrink: 0; color: var(--st-groen); }
.st-vertrouwen__regel strong { color: var(--st-tekst); font-weight: 700; }

.st-vertrouwen__stip {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: var(--st-radius-pill);
    background: var(--st-groen);
    margin-inline: 4px;
}

.st-vertrouwen__stip.is-uit { background: var(--st-tekst-zwak); }

.st-vertrouwen__regel--keurmerk:empty { display: none; }

.st-vertrouwen__regel--keurmerk { border-top: 1px solid var(--st-rand); padding-top: 11px; }

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

/* =========================================================================
   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,
.st-nieuwsbrief__formulier 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-groen);   /* 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: 800;
    letter-spacing: -.5px;
    line-height: 1;
    white-space: nowrap;
}

.st-logo__deel1 { color: var(--st-groen); }
.st-logo__deel2 { color: var(--st-groen-diep); }

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


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

.st-sticky__rij {
    display: flex;
    align-items: center;
    gap: 32px;
    padding-block: 10px;
}

.st-sticky__menu {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
}

/* In de zwevende balk telt hoogte: één regel, wat compacter, geen
   onderstreping die de balk hoger maakt. */
.st-sticky__menu .tp-main-menu-content > ul {
    flex-wrap: nowrap;
}

.st-sticky__menu ul > li > a {
    padding: 10px 13px;
    font-size: 14px;
    border-bottom: 0;
    white-space: nowrap;
}

.st-sticky__menu > nav > ul > li.active > a { border-bottom: 0; }

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

@media (max-width: 1199px) {
    .st-sticky__menu ul > li > a { padding: 10px 9px; font-size: 13.5px; }
}

/* =========================================================================
   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: 14px;
    margin-top: 16px;
}

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

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

.bb-product-gallery-thumbnails .slick-current > div,
.bb-product-gallery-thumbnails > div.is-active {
    border: 2px solid var(--st-groen);
}

/* 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-groen);
    color: var(--st-wit);
    font-size: 12px;
    font-weight: 700;
    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
   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. */
.st-pd__formulier .bb-product-attribute-swatch-title { display: none; }

.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: 2px solid var(--st-groen);
    background: var(--st-groen-tint);
    color: var(--st-groen-diep);
    font-weight: 700;
}

/* 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-groen-diep);
    font-weight: 700;
    border-bottom-color: var(--st-groen);
}

.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: 700;
    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-groen); 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: 800;
    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: 700;
    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: 258px;
    flex-shrink: 0;
}

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

/* 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: 700;
    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-groen-hover);
    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: 700;
    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-groen);
    border-color: var(--st-groen);
    color: var(--st-wit);
}

.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-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-groen-diep);
    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-groen-diep); font-weight: 700; }

/* --- 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: 700;
    color: var(--st-groen-diep);
    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: 700;
    color: var(--st-tekst);
}

.st-hulpkaart li span { font-size: 13px; color: var(--st-tekst-sec); }
.st-hulpkaart li a { color: var(--st-groen-hover); 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: 700;
    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: 700;
    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: 700;
    color: var(--st-groen-diep);
    cursor: pointer;
}

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

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

.st-offerte__label {
    font-size: 13.5px;
    font-weight: 700;
    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-groen-diep);
    font-size: 13px;
    font-weight: 700;
    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: 700;
    color: var(--st-groen-diep);
    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: 700;
    color: var(--st-groen-diep);
    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); 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
   ========================================================================= */

.st-pd__maatkop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

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

.st-pd__maattabel {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--st-groen-hover);
    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. stappsokken.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: 800;
        color: var(--st-groen-hover);
        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 stappsokken.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
       stappsokken.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-groen-diep); }

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

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

.st-specs__regel {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 0;
    border-bottom: 1px solid #efefe9;
}

.st-specs__regel:last-child { border-bottom: 0; }

.st-specs dt {
    font-size: 14px;
    font-weight: 400;
    color: var(--st-tekst-zwak);
    flex-shrink: 0;
}

.st-specs dd {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--st-tekst);
    text-align: right;
}

@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: 700;
    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: 700;
    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-groen-hover);
}

.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. */
.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: 800;
    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, #e4f3e7);
    border: 1px solid var(--st-groen-rand, #cfe6d3);
    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-groen-diep);
    font-size: 12px;
    font-weight: 700;
    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: 800;
    line-height: 1.15;
    letter-spacing: -.5px;
    margin: 0;
    text-wrap: balance;
}

.st-uitgelicht__titel a { color: var(--st-groen-diep); 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-groen);
    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-groen);
}

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

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

.st-blogkaart__titel {
    font-family: var(--st-font-kop);
    font-size: 18px;
    font-weight: 700;
    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-groen-diep); }

.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: 700;
    color: var(--st-groen-diep);
    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-groen-diep);
    font-size: 12px;
    font-weight: 700;
    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: 800;
    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: 700;
    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: 700;
    margin: 26px 0 10px;
}

.st-artikel__tekst a { color: var(--st-groen-hover); }

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

.st-kort__label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--st-groen);
    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-groen);
    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);
}

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

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

.st-genoemd__kop {
    font-family: var(--st-font-kop);
    font-size: 20px;
    font-weight: 700;
    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-groen)); }

.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: 700; 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: 800; color: var(--st-groen); }
.st-genoemd__meer { font-size: 13px; font-weight: 700; color: var(--st-groen-diep); }

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

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

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

/* --- 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: 700;
    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: 800;
    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: 700;
    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: 700;
    font-size: 14.5px;
    color: var(--st-groen-diep);
    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: 800;
    letter-spacing: -.4px;
    margin: 0 0 12px;
}

.st-slottekst h3 {
    font-family: var(--st-font-kop);
    font-size: 17px;
    font-weight: 700;
    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-groen-hover); }

@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. */
.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-groen);
    flex-shrink: 0;
    margin-top: 2px;
}

.st-pd__staffel strong { color: var(--st-groen-diep); font-weight: 700; }

.st-pd__staffel a {
    color: var(--st-groen-hover);
    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-groen);
    color: var(--st-wit);
    border-color: var(--st-groen);
}

.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-groen-hover);
    color: var(--st-wit);
    border-color: var(--st-groen-hover);
}

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

/* 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: 800;
    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-groen);
    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: 800;
    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-groen-diep); }

.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-groen);
    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: 700;
    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: 700;
    color: var(--st-tekst);
    text-decoration: none;
    line-height: 1.3;
}

.st-wagenregel__naam:hover { color: var(--st-groen-diep); }

.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: 800;
    color: var(--st-groen);
    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-groen); }

.st-wagenregel__aantal .tp-cart-input {
    width: 38px;
    min-width: 0;
    border: 0;
    background: none;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    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-groen-diep);
    text-decoration: none;
}

.st-winkelwagen__verder svg { color: var(--st-groen); }
.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: 700;
    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: 700;
    color: var(--st-groen-diep);
    white-space: nowrap;
    cursor: pointer;
}

.st-wagensom__toepassen:hover:not(:disabled) { border-color: var(--st-groen); }
.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-groen-diep); font-weight: 700; }
.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: 700; color: var(--st-tekst); }

.st-wagensom__totaal dd {
    font-family: var(--st-font-kop);
    font-size: 24px;
    font-weight: 800;
    color: var(--st-groen);
}

.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: 700;
    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: 700; color: var(--st-groen-diep); }
.st-zakelijk__tekst { font-size: 13px; color: #3c5a44; line-height: 1.5; }
.st-zakelijk__tekst a { font-weight: 600; color: var(--st-groen-hover); }

/* --- 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: 700;
    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: 700;
    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: 700;
    line-height: 1.3;
    color: var(--st-tekst);
    text-decoration: none;
}

.st-minicart__naam:hover { color: var(--st-groen-diep); }

.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: 800;
    color: var(--st-groen);
    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-groen); }

.st-minicart__aantalkiezer .tp-cart-input {
    width: 32px;
    min-width: 0;
    border: 0;
    background: none;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    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: 700; color: var(--st-tekst); }

.st-minicart__eindtotaal dd {
    font-family: var(--st-font-kop);
    font-size: 20px;
    font-weight: 800;
    color: var(--st-groen);
}

.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-groen-diep);
    font-weight: 700;
}

.st-knop.st-knop--rand:hover { border-color: var(--st-groen); color: var(--st-groen); }

.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: 700;
    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-groen);
    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-groen);
    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: 700;
    color: var(--st-tekst);
    line-height: 1.4;
    text-decoration: none;
    word-break: break-word;
}

a.st-contactkaart__waarde:hover { color: var(--st-groen-diep); }
.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: 700; 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-groen);
    display: flex;
    align-items: center;
    justify-content: center;
}

.st-volgons__links a:hover { border-color: var(--st-groen); 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: 800;
    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: 700;
    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: 700;
    color: var(--st-groen-diep);
    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: 800;
    letter-spacing: -.5px;
    margin: 0;
    line-height: 1.15;
}

.st-auth__zij--licht .st-auth__titel { color: var(--st-groen-diep); }

/* 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 Stappsokken.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: #a5e6b2; stroke: #a5e6b2; }

.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-groen); }
.st-auth__zij--donker .st-auth__punten svg { color: #a5e6b2; }

.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: 800;
    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: 700;
    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-groen);
    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-groen-diep); }

.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-groen);
    cursor: pointer;
}

.st-auth__vergeten { font-weight: 700; font-size: 14.5px; color: var(--st-groen-diep); }
.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: 700; color: var(--st-groen-diep); }
.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-groen);
    color: #fff;
    font-family: var(--st-font-kop);
    font-size: 20px;
    font-weight: 800;
}

.st-account__bol--groot {
    width: 66px;
    height: 66px;
    font-size: 28px;
    background: linear-gradient(150deg, var(--st-groen), 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: 700; }

.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-groen);
    color: #fff;
    font-weight: 700;
}

.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: 800;
    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: 800;
    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-groen);
    color: #fff;
    margin-bottom: 6px;
}

.st-account__tegel-kop {
    font-family: var(--st-font-kop);
    font-size: 17px;
    font-weight: 800;
    color: var(--st-groen-diep);
    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-groen-diep);
}

.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: 800;
    color: var(--st-groen-diep);
}

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

.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 stappsokken.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 stappsokken.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-groen);
    --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-groen);
    color: var(--st-wit);
    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;
}