/* =====================================================================
   Aanvullingen op het gekochte thema

   Het thema levert de vorm: de letter, de knoppen, de productkaart,
   de roosters. Hier staat alleen wat het thema niet kent omdat het bij
   onze winkel hoort - de heroraster met artikelen op wit, de
   waarborgenbalk en een paar kleine plekken.

   Het thema is bont opgezet. Wij houden het bij zwart, wit en grijs;
   de kleding levert de kleur.
   ===================================================================== */

:root {
    --w-inkt: #111110;
    --w-grond: #ffffff;
    --w-vlak: #f5f4f2;
    --w-lijn: #e4e2de;
    --w-zacht: #6b6b67;
}

/* De accentkleuren van het thema staan op rood en oranje; hier wordt
   alles inkt. Zo blijft de aandacht bij de artikelen. */
:root {
    --primary: #111110;
    --third: #111110;
    --main: #111110;
}

body { background: var(--w-grond); }

/* ---------------------------------------------------------------------
   Woordmerk

   Het thema zet hier een afbeelding neer. Wij hebben geen beeldmerk dat
   bij kleding past, dus staat er alleen de naam.
   --------------------------------------------------------------------- */
.logo-woord {
    font-weight: 500;
    font-size: 22px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--w-inkt);
    white-space: nowrap;
}
.logo-site { text-decoration: none; }

/* ---------------------------------------------------------------------
   Zoekveld in de kop
   --------------------------------------------------------------------- */
/* Het veld zelf houdt de vorm van het thema (kader, ronding, hoogte);
   wij zetten alleen de vergrootglasknop binnen dat kader in plaats van
   ernaast, want los ernaast leest hij als een tweede element. */
.tf-zoek { position: relative; max-width: 260px; }
.tf-zoek input {
    width: 100%;
    padding-right: 42px;
    font-size: 13px;
}
.tf-zoek input:focus { outline: none; border-color: var(--w-inkt); }
.tf-zoek button {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--w-zacht);
    cursor: pointer;
}
.tf-zoek button:hover { color: var(--w-inkt); }
.tf-zoek--mobiel { max-width: none; margin-bottom: 20px; }

/* ---------------------------------------------------------------------
   Wagenteller
   --------------------------------------------------------------------- */
/* Vorm en plek komen van het thema (.number-order); wij zetten alleen de
   kleur naar onze inkt, want het rood van het thema vloekt met de rest. */
.nav-icon-list .nav-icon-item.has-number .number-order { background: var(--w-inkt); }
.nav-icon-list .nav-icon-item .number-order[hidden] { display: none; }
.nav-icon-list .nav-icon-item { color: var(--w-inkt); }
.nav-icon-list .nav-icon-item:hover { color: var(--w-zacht); }

/* ---------------------------------------------------------------------
   Hero met eigen sfeerbeeld

   De plaat heeft zelf een verloop van lavendel naar room. Het vlak
   eronder krijgt exact datzelfde verloop, gemeten aan de randen van de
   plaat (#E3E0FB links, #FCF0D6 rechts). Daardoor is er geen naad te
   zien en hoeft de achtergrond er niet af.
   --------------------------------------------------------------------- */
.slideshow-winkel {
    background: linear-gradient(90deg, #E3E0FB 0%, #EEE8E8 50%, #FCF0D6 100%);
    overflow: hidden;
}
.slideshow-winkel .container { position: relative; }

.hero-binnen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 24px;
    min-height: 520px;
}

.hero-woord { padding-block: 56px; position: relative; z-index: 2; }
.slideshow-winkel .sld__tag {
    font-size: 11px;
    letter-spacing: .18em;
    color: #6b6b67;
    margin-bottom: 14px;
}
.slideshow-winkel .sld__title {
    color: var(--w-inkt);
    margin-bottom: 16px;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.1;
}
.slideshow-winkel .sld__desc {
    color: #4a4a47;
    max-width: 40ch;
    margin-bottom: 28px;
}
.hero-knoppen { display: flex; gap: 12px; flex-wrap: wrap; }

/* De plaat staat rechts en raakt de onderkant van het vlak, zodat de
   modellen op de vloer van de sectie lijken te staan. */
.hero-beeld { position: relative; align-self: end; }
.hero-beeld img {
    display: block;
    width: 100%;
    max-width: 620px;
    height: auto;
    margin-left: auto;
    margin-bottom: -1px;

    /* De plaat is vierkant en heeft haar eigen verloop. Links raakt zij
       het vlak op een plek waar dat verloop al verder is opgeschoven;
       dat gaf een zichtbare naad. Door de linkerrand van de plaat weg
       te laten lopen valt die naad weg, zonder dat er iets van de
       modellen af gaat: die staan in het midden. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%);
            mask-image: linear-gradient(90deg, transparent 0, #000 16%);
}

@media (max-width: 991px) {
    .hero-binnen { grid-template-columns: 1fr; min-height: 0; gap: 0; }
    .hero-woord { padding-block: 40px 24px; text-align: center; }
    .hero-knoppen { justify-content: center; }
    .slideshow-winkel .sld__desc { margin-inline: auto; }
    .hero-beeld img { max-width: 520px; margin-inline: auto; }
}

/* ---------------------------------------------------------------------
   Waarborgenbalk
   --------------------------------------------------------------------- */
.tf-waarborg { border-bottom: 1px solid var(--w-lijn); }
.waarborg-lijst {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 26px 0;
}
.waarborg-lijst li { display: flex; align-items: center; gap: 12px; }
.waarborg-lijst strong {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--w-inkt);
}
.waarborg-lijst small { font-size: 12px; color: var(--w-zacht); }
.waarborg-lijst .icon { font-size: 22px; color: var(--w-inkt); }

@media (max-width: 767px) {
    .waarborg-lijst { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------
   Roosters
   --------------------------------------------------------------------- */
.raster-categorie {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.raster-product {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 20px;
}

@media (max-width: 1199px) {
    .raster-categorie, .raster-product { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .raster-categorie, .raster-product { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
}

/* De artikelfoto's hebben zelf een witte achtergrond (gemeten: #FFFFFF
   in de hoeken). Zetten wij daar een crème vlak onder, dan tekent de
   rand van de jpeg zich af en lijkt de foto erop geplakt. Het vlak is
   daarom wit: de foto loopt naadloos door in de kaart. */
.card-product_wrapper {
    background: #fff;
    overflow: hidden;
}
.card-product .img-product,
.card-product .img-hover {
    object-fit: contain;
    padding: 4%;
}
.product-img_leeg,
.cls-leeg {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    background: var(--w-vlak);
}

.card-product_info { padding-top: 14px; }
.name-product { color: var(--w-inkt); font-size: 14px; }
.price-wrap { margin-top: 6px; display: flex; gap: 8px; align-items: baseline; }
.price-new { color: var(--w-inkt); font-size: 14px; }
.price-old { color: var(--w-zacht); font-size: 13px; text-decoration: line-through; }
.kaart-ondertitel { font-size: 12px; color: var(--w-zacht); margin-top: 4px; }

/* Etiketten linksboven op de kaart */
.product-badge_list {
    position: absolute;
    top: 10px;
    left: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2;
}
.product-badge_list li {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    padding: 4px 10px;
    border-radius: 7px;
    color: #fff;
    line-height: 1.5;
}
/* De kleuren zijn die van het thema: groen voor nieuw, rood voor de
   korting, limoen voor wat goed loopt. Alleen hier laten wij kleur
   toe; verder blijft de pagina zwart-wit. */
.product-badge_list .badge-nieuw   { background: #3E7A4E; }
.product-badge_list .badge-korting { background: #BA3326; }
.product-badge_list .badge-best    { background: #D8E84A; color: var(--w-inkt); font-weight: 600; }
.product-badge_list .badge-uit     { background: #6b6b67; }

/* Kleurstippen onder de kaart */
/* Het thema laat de kleur het hele bolletje vullen (`inset: 0`). Wij gaven
   `.swatch-value` eerder een eigen maat mee; daardoor stond er een klein
   stipje in een veel te ruime ring. De maat hoort op het bolletje zelf. */
.product-color_list { margin-top: 10px; gap: 8px; }
.product-color_list .product-color-item { width: 20px; height: 20px; }
.product-color_list .product-color-item .swatch-value {
    border: 1px solid rgba(0, 0, 0, .16);
}

/* De ring die de gekozen kleur volgt: net iets ruimer dan het bolletje,
   zodat het een rand is en geen tweede cirkel. */
.product-color_list .color-track { width: 26px; height: 26px; }
@media (min-width: 1200px) {
    .product-color_list .color-track { width: 26px; height: 26px; }
}

/* ---------------------------------------------------------------------
   Categorieën als ronde schijven

   Het thema heeft hier collection-v06 voor: een ronde foto met de naam
   eronder. De artikelen staan op wit, dus de schijf krijgt een licht
   vlak; anders zou er niets rond te zien zijn.
   --------------------------------------------------------------------- */
.raster-categorie {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px 40px;
}

.collection-v06 { display: grid; place-items: center; gap: 14px; width: 150px; }
.collection-v06 .cls-image {
    display: block;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    /* Wit, net als de productkaarten: de foto's hebben zelf een witte
       achtergrond, dus op een grijze schijf tekent zich een vierkant
       af. Een haarlijn geeft de schijf haar vorm. */
    background: #fff;
    border: 1px solid var(--w-lijn);
    overflow: hidden;
    transition: border-color .3s ease;
}
.collection-v06 .cls-image img {
    width: 100%;
    height: 100%;
    /* Het thema snijdt de foto bij; onze artikelen staan los op wit en
       moeten juist helemaal in de schijf passen. */
    object-fit: contain;
    padding: 16%;
    aspect-ratio: 1;
}
.collection-v06:hover .cls-image { border-color: var(--w-inkt); }
.collection-v06 .cls-leeg { display: block; width: 100%; height: 100%; }

.collection-v06 .cls-link {
    color: var(--w-inkt);
    font-size: 14px;
    text-decoration: none;
    text-align: center;
}
.collection-v06 .cls-link sup {
    font-size: 10px;
    color: var(--w-zacht);
    margin-left: 2px;
    top: -.6em;
}

@media (max-width: 767px) {
    .raster-categorie { gap: 22px 26px; }
    .collection-v06, .collection-v06 .cls-image { width: 104px; }
    .collection-v06 .cls-image { height: 104px; }
    .collection-v06 .cls-link { font-size: 12px; }
}

/* ---------------------------------------------------------------------
   Compacte lijsten op de startpagina
   --------------------------------------------------------------------- */
.lijst-compact { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lijst-compact a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px;
    background: var(--w-vlak);
    text-decoration: none;
    color: var(--w-inkt);
}
.lijst-nummer { width: 18px; text-align: center; color: var(--w-lijn); font-weight: 600; }
.lijst-foto { flex: none; width: 54px; height: 54px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lijst-foto img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.lijst-tekst { flex: 1; min-width: 0; }
.lijst-tekst strong { display: block; font-size: 14px; font-weight: 500; }
.lijst-tekst small { font-size: 12px; color: var(--w-zacht); }
.lijst-prijs { flex: none; font-weight: 500; }

/* ---------------------------------------------------------------------
   Kruimelpad, meldingen en voet
   --------------------------------------------------------------------- */
.tf-breadcrumb { border-bottom: 1px solid var(--w-lijn); }
.breadcrumb-list {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 14px 0;
    font-size: 12px;
    color: var(--w-zacht);
}
.breadcrumb-list li + li::before { content: '/'; margin-right: 8px; color: var(--w-lijn); }
.breadcrumb-list a { color: var(--w-zacht); text-decoration: none; }
.breadcrumb-list a:hover { color: var(--w-inkt); }

.tf-meldingen { padding-top: 20px; }

.tf-footer { border-top: 1px solid var(--w-lijn); padding-top: 56px; margin-top: 40px; }
.footer-body {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 32px;
    padding-bottom: 40px;
}
.footer-kop {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--w-inkt);
    margin-bottom: 14px;
}
.footer-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-lijst a { color: var(--w-zacht); font-size: 13px; text-decoration: none; }
.footer-lijst a:hover { color: var(--w-inkt); }
.footer-tekst { color: var(--w-zacht); font-size: 13px; margin: 14px 0; max-width: 40ch; }
.footer-koerier { font-size: 12px; color: var(--w-inkt); }
.footer-adres { font-size: 12px; color: var(--w-zacht); font-style: normal; margin-top: 14px; }
.footer-onder {
    border-top: 1px solid var(--w-lijn);
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--w-zacht);
}
.footer-onder p { margin: 0; }

@media (max-width: 991px) {
    .footer-body { grid-template-columns: repeat(2, 1fr); }
    /* Het aanmeldveld heeft een hele regel nodig; in een halve kolom
       werd de tekst een woord per regel en viel de knop eruit. */
    .footer-col--merk, .footer-col--brief { grid-column: 1 / -1; }
}

@media (max-width: 575px) {
    .footer-body { grid-template-columns: 1fr; gap: 28px; }
    .footer-brief { max-width: 340px; }
}

/* ---------------------------------------------------------------------
   Menu voor kleine schermen
   --------------------------------------------------------------------- */
.tf-mobielmenu { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tf-mobielmenu a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--w-lijn);
    color: var(--w-inkt);
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
}

/* ---------------------------------------------------------------------
   Navigatiebalk
   --------------------------------------------------------------------- */
.box-navigation { border-top: 1px solid var(--w-lijn); border-bottom: 1px solid var(--w-lijn); }
.box-nav-menu { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.box-nav-menu .item-link {
    display: inline-block;
    padding: 15px 16px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--w-inkt);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}
.box-nav-menu .item-link:hover,
.box-nav-menu .item-link.is-actief { border-bottom-color: var(--w-inkt); }

.menu-item { position: relative; }
.item-heeft-sub .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--w-lijn);
    list-style: none;
    margin: 0;
    padding: 8px 0;
    display: none;
    z-index: 20;
}
.item-heeft-sub:hover .sub-menu { display: block; }
.item-heeft-sub .sub-menu a {
    display: block;
    padding: 8px 16px;
    font-size: 13px;
    color: var(--w-inkt);
    text-decoration: none;
}
.item-heeft-sub .sub-menu a:hover { background: var(--w-vlak); }

.header-inner_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-block: 18px;
}
.header-left, .header-right { flex: 1; }
.header-right { display: flex; justify-content: flex-end; }
.nav-icon-list { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.nav-icon-list a {
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--w-inkt);
    text-decoration: none;
}

/* Het thema legt het bijschrift van een categorietegel over de foto.
   Bij onze uitgeknipte artikelen dekt dat het artikel af, dus zetten
   wij het eronder. */

/* De hero mag wat meer ruimte voor het woord */
.slideshow-winkel .sld__title { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.1; }
.slideshow-winkel .col-lg-5 { padding-right: 32px; }

/* ---------------------------------------------------------------------
   Catalogus
   --------------------------------------------------------------------- */
.tf-winkelkop { padding: 34px 0 0; }
.tf-winkelkop h1 { margin: 0; }
.winkelkop-desc { color: var(--w-zacht); max-width: 60ch; margin-top: 8px; font-size: 14px; }

.subgroep-lijst {
    display: flex; flex-wrap: wrap; gap: 8px;
    list-style: none; margin: 18px 0 0; padding: 0;
}
.subgroep-lijst a {
    display: inline-block; padding: 7px 14px;
    border: 1px solid var(--w-lijn); color: var(--w-inkt);
    font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
}
.subgroep-lijst a:hover { border-color: var(--w-inkt); }

.winkel-layout { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: start; }
@media (max-width: 991px) { .winkel-layout { grid-template-columns: 1fr; gap: 24px; } }

.sidebar-filter { position: sticky; top: 20px; }
.widget-facet { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--w-lijn); }
.facet-title {
    font-size: 11px; font-weight: 500; letter-spacing: .16em;
    text-transform: uppercase; color: var(--w-inkt); margin-bottom: 12px;
}

.facet-maten { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.facet-maat {
    display: inline-block; min-width: 44px; padding: 8px 10px;
    border: 1px solid var(--w-lijn); text-align: center;
    font-size: 12px; color: var(--w-inkt); text-decoration: none;
}
.facet-maat:hover { border-color: var(--w-inkt); }
.facet-maat.is-actief { background: var(--w-inkt); border-color: var(--w-inkt); color: #fff; }

.facet-kleuren { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.facet-kleur {
    display: block; width: 26px; height: 26px; border-radius: 50%;
    border: 2px solid #fff; box-shadow: 0 0 0 1px var(--w-lijn);
}
.facet-kleur.is-actief { box-shadow: 0 0 0 1.5px var(--w-inkt); }

.facet-keuze, .facet-invoer {
    width: 100%; padding: 10px 12px; border: 1px solid var(--w-lijn);
    background: #fff; font-size: 13px; color: var(--w-inkt);
}
.facet-keuze:focus, .facet-invoer:focus { outline: none; border-color: var(--w-inkt); }
.facet-prijs { display: flex; align-items: center; gap: 8px; }
.facet-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--w-zacht); }
.facet-wissen { display: block; text-align: center; margin-top: 12px; font-size: 12px; color: var(--w-zacht); }

.winkel-balk {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 24px;
}
.winkel-telling { margin: 0; color: var(--w-zacht); font-size: 14px; }
.winkel-telling strong { color: var(--w-inkt); }
.winkel-sorteer .facet-keuze { width: auto; min-width: 200px; }

.winkel-leeg { text-align: center; padding: 60px 0; color: var(--w-zacht); }
.winkel-leeg .h5 { color: var(--w-inkt); }

.winkel-paginering { display: flex; gap: 6px; justify-content: center; margin-top: 40px; }
.winkel-paginering a {
    min-width: 38px; padding: 9px 12px; text-align: center;
    border: 1px solid var(--w-lijn); color: var(--w-inkt);
    font-size: 13px; text-decoration: none;
}
.winkel-paginering a:hover { border-color: var(--w-inkt); }
.winkel-paginering a.is-actief { background: var(--w-inkt); border-color: var(--w-inkt); color: #fff; }

/* ---------------------------------------------------------------------
   Productpagina
   --------------------------------------------------------------------- */
.galerij-hoofd { background: #fff; aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.galerij-hoofd img { width: 100%; height: 100%; object-fit: contain; padding: 4%; }
.galerij-strip { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.galerij-duim {
    width: 84px; height: 104px; padding: 0; cursor: pointer;
    background: #fff; border: 1px solid var(--w-lijn);
}
.galerij-duim img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.galerij-duim.is-actief { border-color: var(--w-inkt); }

.product-merk { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--w-zacht); text-decoration: none; }
.product-titel { margin: 10px 0 14px; }
.product-prijs { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
.prijs-nieuw { font-size: 26px; font-weight: 500; color: var(--w-inkt); }
.prijs-oud { font-size: 16px; color: var(--w-zacht); text-decoration: line-through; }
.prijs-btw { font-size: 12px; color: var(--w-zacht); }

.product-blok { margin-bottom: 22px; border: 0; padding: 0; }
.blok-kop {
    font-size: 11px; font-weight: 500; letter-spacing: .16em;
    text-transform: uppercase; color: var(--w-zacht); margin-bottom: 10px;
}
.blok-kop span { color: var(--w-inkt); margin-left: 6px; }

.kleur-lijst { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.kleur-stip {
    display: block; width: 30px; height: 30px; border-radius: 50%;
    border: 2px solid #fff; box-shadow: 0 0 0 1px var(--w-lijn);
}
.kleur-stip.is-actief { box-shadow: 0 0 0 1.5px var(--w-inkt); }

.maat-lijst { display: flex; flex-wrap: wrap; gap: 8px; }
.maat-knop { position: relative; cursor: pointer; }
.maat-knop input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.maat-knop span {
    display: block; min-width: 52px; padding: 11px 14px; text-align: center;
    border: 1px solid var(--w-lijn); font-size: 13px; color: var(--w-inkt);
}
.maat-knop:hover span { border-color: var(--w-inkt); }
.maat-knop input:checked + span { background: var(--w-inkt); border-color: var(--w-inkt); color: #fff; }
.maat-knop.is-leeg span {
    color: var(--w-zacht); cursor: not-allowed;
    background: linear-gradient(to top left, transparent calc(50% - 1px), var(--w-lijn) 50%, transparent calc(50% + 1px));
}

.koop-rij { display: flex; gap: 12px; align-items: stretch; margin-top: 22px; flex-wrap: wrap; }

/* Op een telefoon is er geen ruimte voor een aantalvak naast een knop
   die "In de winkelwagen" moet zeggen; dan onder elkaar. */
@media (max-width: 479px) {
    .koop-rij > .tf-btn { flex: 1 0 100%; }
}

.product-uitverkocht { padding: 14px; background: var(--w-vlak); color: var(--w-zacht); font-size: 14px; }

.product-punten { list-style: none; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--w-lijn); display: grid; gap: 8px; }
.product-punten li { font-size: 13px; color: var(--w-zacht); }

.product-omschrijving { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--w-lijn); }
.product-omschrijving p:last-child { font-size: 14px; color: var(--w-zacht); line-height: 1.7; }

/* ---------------------------------------------------------------------
   Kleine schermen

   De kop staat op grote schermen in drieën: zoeken links, merk in het
   midden, knoppen rechts. Op een telefoon past dat niet naast elkaar;
   dan wordt het menuknop - merk - wagen.
   --------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .header-inner_wrap { gap: 12px; padding-block: 14px; }
    .header-left, .header-right { flex: 0 0 auto; }
    .header-center { flex: 1; text-align: center; min-width: 0; }
    .logo-woord { font-size: 15px; letter-spacing: .14em; }
    .nav-icon-list { gap: 14px; }
    .nav-icon-list a { font-size: 11px; }
    .btn-open-menu { font-size: 22px; color: var(--w-inkt); }
}

@media (max-width: 575px) {
    .logo-woord { font-size: 13px; letter-spacing: .1em; }
    /* Toen hier nog woorden stonden paste alleen de wagen; nu het
       pictogrammen zijn kunnen account en wagen er samen bij. Zoeken
       laten wij weg: dat staat al bovenaan in het uitschuifmenu, en
       met drie pictogrammen loopt het merk in de verdrukking. */
    .nav-icon-list { gap: 0; }
    .header-right li.d-sm-none { display: none; }
}

/* Het uitschuifmenu staat buiten beeld geparkeerd; zonder deze regel
   telt die breedte mee en krijgt de pagina een horizontale schuifbalk. */
body { overflow-x: hidden; }
.offcanvas { max-width: 100%; }
.offcanvas-header { display: flex; align-items: center; justify-content: space-between; padding: 16px; }
.offcanvas-body { padding: 0 16px 24px; }

/* De kaarten staan nu op wit en zouden zonder scheiding in elkaar
   overlopen; een haarlijn houdt ze uit elkaar zonder op te vallen. */
.card-product_wrapper { border: 1px solid var(--w-lijn); }
.lijst-foto { border: 1px solid var(--w-lijn); }

/* Het pictogram voor het uitschuifmenu zit niet in de icoonfont van dit
   thema; daarom tekenen wij de drie streepjes zelf. */
.box-btn-open-menu .btn-open-menu {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 26px;
    height: 26px;
    cursor: pointer;
}
.box-btn-open-menu .btn-open-menu .icon { display: none; }
.box-btn-open-menu .btn-open-menu::before,
.box-btn-open-menu .btn-open-menu::after,
.box-btn-open-menu .btn-open-menu > span.streep {
    content: '';
    display: block;
    width: 20px;
    height: 1.5px;
    background: var(--w-inkt);
}


/* ---------------------------------------------------------------------
   Sectiekoppen en tabbladen, zoals het thema ze opmaakt
   --------------------------------------------------------------------- */
.sect-heading-v02 { max-width: 620px; margin-inline: auto; }
.sect-heading-v02 .mini-title {
    font-size: 13px;
    font-weight: 600;
    /* Het enige goudaccent op de pagina, zoals in het thema */
    color: #C08A2E;
}
.sect-heading-v02 .s-title { font-size: clamp(1.6rem, 2.6vw, 2.2rem); color: var(--w-inkt); }
.sect-heading-v02 .s-desc { color: var(--w-zacht); font-size: 14px; }
.spacing-bottom-9 { margin-bottom: 40px; }
.mb-12 { margin-bottom: 12px; }


/* ---------------------------------------------------------------------
   Etalage: licht vlak, fijn raster, een vleugje kleur

   Het thema zet hier een donker vlak neer. Op wit met een raster erover
   komen de artikelen beter uit, en de kleur uit de hero keert terug als
   een zachte gloed. De buitenste twee kaarten schuiven mee met het
   scrollen; dat gebeurt in winkel-thema.js.
   --------------------------------------------------------------------- */
.section-etalage {
    position: relative;
    overflow: hidden;
    padding-block: 96px;
    background: #fff;
}

/* Het raster: twee sets lijnen, heel licht */
.etalage-raster-lijnen {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(to right, var(--w-lijn) 0 1px, transparent 1px 96px),
        repeating-linear-gradient(to bottom, var(--w-lijn) 0 1px, transparent 1px 96px);
    opacity: .55;
    /* Naar de randen toe uitdoven, anders oogt het als ruitjespapier */
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
            mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
    pointer-events: none;
}

/* De kleur uit de hero, hier als zachte gloed achter de kaarten */
.etalage-gloed {
    position: absolute;
    left: 50%;
    top: 46%;
    width: min(1100px, 92vw);
    height: 620px;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(closest-side, rgba(227, 224, 251, .85), transparent 70%) left center / 60% 100% no-repeat,
        radial-gradient(closest-side, rgba(252, 240, 214, .85), transparent 70%) right center / 60% 100% no-repeat;
    filter: blur(6px);
    pointer-events: none;
}

.section-etalage .container { position: relative; z-index: 1; }
.section-etalage .mini-title { color: #C08A2E; }

/* Een knop in een kopblok plakte tegen de zin erboven; die heeft lucht
   nodig om als losse handeling te lezen in plaats van als laatste regel
   tekst. Geldt voor elk kopblok, niet alleen dit ene. */
.sect-heading-v02 .tf-btn { margin-top: 28px; }

.etalage-raster {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 56px;
    align-items: start;
}
.etalage-tegel {
    display: block;
    background: #fff;
    border: 1px solid var(--w-lijn);
    text-decoration: none;
    /* De schuif komt uit het script; de overgang houdt hem zacht */
    transition: transform .25s ease-out, box-shadow .3s ease;
    will-change: transform;
}
.etalage-tegel:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, .10); }
.etalage-beeld { display: block; background: #fff; overflow: hidden; }
.etalage-beeld img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: contain;
    padding: 7%;
}
.etalage-tekst {
    display: grid;
    gap: 3px;
    padding: 14px 16px 18px;
    border-top: 1px solid var(--w-lijn);
}
.etalage-tekst strong { font-size: 14px; font-weight: 500; color: var(--w-inkt); }
.etalage-tekst small { font-size: 13px; color: var(--w-zacht); }

@media (max-width: 767px) {
    .section-etalage { padding-block: 60px; }
    .etalage-raster { grid-template-columns: 1fr 1fr; gap: 12px; }
    .etalage-raster > :last-child { display: none; }
    /* Op een klein scherm staat alles onder elkaar; schuiven leidt af */
    .etalage-tegel { transform: none !important; }
}

/* ---------------------------------------------------------------------
   Lopende balk bij een aanbieding

   Het thema levert de opmaak en de animatie mee; hier alleen de plek
   en de kleur, zodat hij bij onze kaarten past.
   --------------------------------------------------------------------- */
.card-product_wrapper { position: relative; }
.product-marquee_sale {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--w-inkt);
    color: #fff;
    padding: 7px 0;
    overflow: hidden;
    z-index: 2;
}
.product-marquee_sale .marquee-wrapper { display: flex; }
.product-marquee_sale .initial-child-container {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    animation: infiniteScroll 12s linear infinite;
}
.product-marquee_sale .marquee-child-item {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
}
.product-marquee_sale .ic-wrap { display: inline-flex; }
.product-marquee_sale .ic-wrap img { filter: invert(1); }

/* ---------------------------------------------------------------------
   Shop de look: lijst links, sfeerfoto met speldjes rechts
   --------------------------------------------------------------------- */
.look-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.look-lijst { list-style: none; margin: 0; padding: 0; }
.look-lijst li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--w-lijn);
}
.look-lijst li:first-child { border-top: 1px solid var(--w-lijn); }
.look-nummer {
    flex: none;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border: 1px solid var(--w-lijn);
    border-radius: 50%;
    font-size: 12px;
    color: var(--w-zacht);
}
.look-foto {
    flex: none;
    width: 64px; height: 78px;
    background: #fff;
    border: 1px solid var(--w-lijn);
    display: block;
    overflow: hidden;
}
.look-foto img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.look-tekst { flex: 1; min-width: 0; display: grid; gap: 3px; }
.look-tekst a { color: var(--w-inkt); font-size: 14px; text-decoration: none; }
.look-tekst small { color: var(--w-zacht); font-size: 12px; }
.look-tekst strong { font-size: 14px; font-weight: 500; }
.look-knop {
    flex: none;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    background: var(--w-inkt);
    color: #fff;
    border-radius: 50%;
    text-decoration: none;
}
.look-knop:hover { background: #2e2e2b; color: #fff; }

.look-beeld { position: relative; }
.look-beeld img { display: block; width: 100%; height: auto; }

/* De speldjes staan op de plek waar het kledingstuk zit; percentages
   omdat de plaat meeschaalt met het scherm. */
.look-pin {
    position: absolute;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(0, 0, 0, .12);
    color: var(--w-inkt);
    font-size: 12px;
    text-decoration: none;
    backdrop-filter: blur(2px);
}
.look-pin:hover { background: #fff; color: var(--w-inkt); }
.look-pin--1 { left: 40%; top: 55%; }   /* het witte shirt */
.look-pin--2 { left: 68%; top: 58%; }   /* de zwarte hoodie */

@media (max-width: 991px) {
    .look-layout { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------------------------------------------------------------------
   Klantervaringen
   --------------------------------------------------------------------- */
.ervaring-raster {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.ervaring {
    background: var(--w-vlak);
    padding: 24px;
    display: grid;
    gap: 12px;
    align-content: start;
}
.ervaring-naam { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ervaring-echt { font-size: 11px; color: #3E7A4E; }
.ervaring-tekst { margin: 0; color: var(--w-zacht); font-size: 14px; line-height: 1.6; }
.ervaring-product {
    display: flex; align-items: center; gap: 12px;
    margin-top: 6px; padding-top: 14px;
    border-top: 1px solid var(--w-lijn);
    text-decoration: none; color: var(--w-inkt);
}
.ervaring-foto {
    flex: none; width: 48px; height: 48px;
    background: #fff; border: 1px solid var(--w-lijn);
    display: block; overflow: hidden;
}
.ervaring-foto img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.ervaring-product strong { display: block; font-size: 13px; font-weight: 500; }
.ervaring-product small { color: var(--w-zacht); font-size: 12px; }

@media (max-width: 991px) {
    .ervaring-raster { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Waarborgen vlak boven de voet
   --------------------------------------------------------------------- */
.tf-voetwaarborg { border-top: 1px solid var(--w-lijn); padding-block: 46px; }
.tf-voetwaarborg ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
.tf-voetwaarborg li { display: grid; gap: 6px; justify-items: center; }
.tf-voetwaarborg .icon { font-size: 28px; color: var(--w-inkt); }
.tf-voetwaarborg strong { font-size: 15px; font-weight: 500; color: var(--w-inkt); }
.tf-voetwaarborg small { font-size: 13px; color: var(--w-zacht); }

@media (max-width: 767px) {
    .tf-voetwaarborg ul { grid-template-columns: 1fr 1fr; gap: 22px; }
}

/* ---------------------------------------------------------------------
   Voet: contact, nieuwsbrief en betaalmethoden
   --------------------------------------------------------------------- */
.footer-contact { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 10px; }
.footer-contact li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 13px; color: var(--w-zacht);
}
.footer-contact a { color: var(--w-zacht); text-decoration: none; }
.footer-contact a:hover { color: var(--w-inkt); }
.footer-contact .icon { color: var(--w-inkt); font-size: 15px; margin-top: 2px; }

.footer-brief { display: flex; margin: 16px 0 10px; }
.footer-brief input {
    flex: 1; min-width: 0;
    padding: 13px 16px;
    border: 1px solid var(--w-lijn);
    border-right: 0;
    font-size: 13px;
    background: #fff;
}
.footer-brief input:focus { outline: none; border-color: var(--w-inkt); }
.footer-brief button {
    /* Zonder flex hangt de pijl op de tekstregel en staat hij dus links
       bovenin in plaats van in het midden van het vlak. */
    flex: none;
    width: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 1px solid var(--w-inkt);
    background: var(--w-inkt);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}
.footer-brief button:hover { background: #2e2e2b; }
.footer-klein { font-size: 11px; color: var(--w-zacht); margin: 0; line-height: 1.6; }
.footer-klein a { color: var(--w-inkt); text-decoration: underline; }

.footer-betaal {
    display: flex; flex-wrap: wrap; gap: 8px;
    list-style: none; margin: 0; padding: 0;
}
.footer-betaal li {
    padding: 5px 10px;
    border: 1px solid var(--w-lijn);
    border-radius: 4px;
    font-size: 11px;
    color: var(--w-zacht);
}

/* ---------------------------------------------------------------------
   Winkelwagen
   --------------------------------------------------------------------- */
.tf-page-title-2 { padding: 34px 0 0; }
.tf-page-title-2 h1 { margin: 0; }

.wagen-leeg { text-align: center; padding: 70px 0; color: var(--w-zacht); }
.wagen-leeg .h5 { color: var(--w-inkt); margin-bottom: 8px; }
.wagen-leeg .tf-btn { margin-top: 20px; }

/* De balk naar gratis verzending */
.progress-cart { margin-bottom: 28px; }
.progress-cart p { margin: 0 0 8px; font-size: 14px; color: var(--w-zacht); }
.progress-cart strong { color: var(--w-inkt); }
.progress-baan { display: block; height: 4px; background: var(--w-vlak); overflow: hidden; }
.progress-vulling { display: block; height: 100%; background: var(--w-inkt); transition: width .4s ease; }

.wagen-layout { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; }
@media (max-width: 991px) { .wagen-layout { grid-template-columns: 1fr; } }

.tf-table-page-cart { width: 100%; border-collapse: collapse; }
.tf-table-page-cart thead th {
    text-align: left;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--w-lijn);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--w-zacht);
}
.tf-table-page-cart thead th:last-child,
.tf-cart_item td:last-child { text-align: right; }
.tf-cart_item td { padding: 22px 0; border-bottom: 1px solid var(--w-lijn); vertical-align: middle; }

.cart_product { display: flex; gap: 16px; align-items: flex-start; }
.cart_product .img-prd {
    flex: none; width: 84px; height: 108px;
    background: #fff; border: 1px solid var(--w-lijn);
    display: block; overflow: hidden;
}
.cart_product .img-prd img { width: 100%; height: 100%; object-fit: contain; padding: 5%; }
.cart-info { display: grid; gap: 4px; }
.cart-info .name { color: var(--w-inkt); font-size: 14px; text-decoration: none; }
.cart-info .variants { font-size: 12px; color: var(--w-zacht); }
.cart-schaars { font-size: 12px; color: #8a2118; }
.remove-cart {
    background: none; border: 0; padding: 0;
    font-size: 12px; color: var(--w-zacht);
    text-decoration: underline; cursor: pointer;
    text-align: left; width: max-content;
}
.remove-cart:hover { color: var(--w-inkt); }

/* Het thema geeft met `.wg-quantity > *` elk direct kind een flexvak.
   Bij ons is het een formulier, dus staan daar ook het csrf-veld, het
   regelnummer en de noscript-knop tussen: die kregen net zoveel ruimte
   als de knoppen en trokken het vak scheef. Die halen wij eruit. */
.wg-quantity > input[type="hidden"],
.wg-quantity > noscript {
    display: none;
    flex: 0 0 0;
    max-width: 0;
}

/* Ruimte voor drie cijfers; met 44px viel 100 half weg. Het veld moet
   ook typbaar blijven - het thema zet er pointer-events op none. */
.wg-quantity > .quantity-product {
    flex: 0 0 52px;
    max-width: 52px;
    aspect-ratio: auto;
    pointer-events: auto;
    font-size: 14px;
    -moz-appearance: textfield;
    appearance: textfield;
}
.wg-quantity > .quantity-product::-webkit-outer-spin-button,
.wg-quantity > .quantity-product::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.wg-quantity > .quantity-product:focus { outline: none; }
.wg-quantity > .btn-quantity { flex: 0 0 40px; max-width: 40px; cursor: pointer; }
.wg-quantity > .btn-quantity:hover { color: var(--w-zacht); }

/* Aantal en weggooien horen bij elkaar: allebei bewerken zij deze regel. */
.cart-aantalregel { display: flex; align-items: center; gap: 10px; }
.cart-weg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    border-radius: 6px;
    color: var(--w-zacht);
    cursor: pointer;
}
.cart-weg:hover { color: #8a2118; background: var(--w-vlak); }

.wagen-verder { margin-top: 24px; }
.tf-btn-line {
    display: inline-block; font-size: 12px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--w-inkt);
    border-bottom: 1px solid var(--w-inkt); text-decoration: none; padding-bottom: 3px;
}

.tf-page-cart-sidebar { display: grid; gap: 20px; position: sticky; top: 20px; }
.cart-box { border: 1px solid var(--w-lijn); padding: 24px; }
.cart-head { margin: 0 0 16px; }
.cart-regel { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 14px; }
.cart-regel--korting strong { color: #8a2118; }
.cart-regel--totaal {
    border-top: 1px solid var(--w-lijn);
    margin-top: 8px; padding-top: 14px; font-size: 17px;
}
.cart-btw { font-size: 12px; color: var(--w-zacht); text-align: right; margin: 0 0 18px; }
.cart-waarborg { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 6px; }
.cart-waarborg li { font-size: 12px; color: var(--w-zacht); }

.cart-coupon { display: flex; gap: 0; }
.cart-coupon input {
    flex: 1; min-width: 0; padding: 12px 14px;
    border: 1px solid var(--w-lijn); border-right: 0; font-size: 13px;
}
.cart-coupon input:focus { outline: none; border-color: var(--w-inkt); }

/* Het getal in de aantalkiezer stond onzichtbaar: het thema geeft dit
   veld een eigen uitlijning waardoor het buiten het vakje viel. */
.wg-quantity input[type="number"] {
    color: var(--w-inkt);
    background: #fff;
    text-align: center;
    line-height: 1;
    padding: 0;
    height: 100%;
    -moz-appearance: textfield;
    appearance: textfield;
}
.wg-quantity input[type="number"]::-webkit-outer-spin-button,
.wg-quantity input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.wg-quantity { height: 44px; }
.wg-quantity button { height: 100%; }

/* De kop van de wagenpagina liet een groot gat vallen */
.tf-page-title-2 { padding: 30px 0 6px; }
.tf-page-title-2 + .flat-spacing { padding-top: 24px; }

/* ---------------------------------------------------------------------
   Afrekenen
   --------------------------------------------------------------------- */
.afreken-layout { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; }
@media (max-width: 991px) { .afreken-layout { grid-template-columns: 1fr; } }

.checkout-melding {
    background: var(--w-vlak);
    border-left: 3px solid var(--w-inkt);
    padding: 16px 20px;
    margin-bottom: 28px;
    font-size: 14px;
    color: var(--w-zacht);
}
.checkout-melding strong { color: var(--w-inkt); }
.checkout-melding a { color: var(--w-inkt); text-decoration: underline; }

.box-ip-checkout, .box-ip-shipping, .box-ip-payment {
    border: 1px solid var(--w-lijn);
    padding: 26px;
    margin-bottom: 20px;
}
.afreken-kop {
    display: flex; align-items: center; gap: 12px;
    margin: 0 0 22px; font-size: 17px; color: var(--w-inkt);
}
.afreken-kop span {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    background: var(--w-inkt); color: #fff;
    border-radius: 50%; font-size: 13px;
}

.form-content { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.veld--breed { grid-column: 1 / -1; }
@media (max-width: 575px) { .form-content { grid-template-columns: 1fr; } }

.veld { display: grid; gap: 6px; }
.veld label { font-size: 13px; color: var(--w-inkt); }
.veld .verplicht { color: #8a2118; }
.veld input, .veld textarea, .afreken-keuze {
    padding: 12px 14px;
    border: 1px solid var(--w-lijn);
    background: #fff;
    font-size: 14px;
    color: var(--w-inkt);
    width: 100%;
}
.veld input:focus, .veld textarea:focus, .afreken-keuze:focus {
    outline: none; border-color: var(--w-inkt);
}
.veld small { font-size: 12px; color: var(--w-zacht); }
.veld.is-fout input, .veld.is-fout textarea { border-color: #8a2118; }
.veldfout { font-size: 12px; color: #8a2118; margin: 0; }

.check-ship, .check-payment {
    display: flex; align-items: flex-start; gap: 10px;
    margin-top: 16px; font-size: 14px; color: var(--w-zacht); cursor: pointer;
}
.check-ship a { color: var(--w-inkt); }
.check-ship.is-fout { color: #8a2118; }

.keuzeblok {
    align-items: center;
    border: 1px solid var(--w-lijn);
    padding: 14px 16px;
    margin-top: 12px;
}
.keuzeblok:has(input:checked) { border-color: var(--w-inkt); }
.keuzeblok__tekst { flex: 1; display: grid; gap: 2px; }
.keuzeblok__tekst strong { color: var(--w-inkt); font-size: 14px; font-weight: 500; }
.keuzeblok__tekst small { font-size: 12px; }
.keuzeblok__prijs { font-weight: 500; color: var(--w-inkt); }

.payment-method-box { display: grid; }
.payment-item .keuzeblok { margin-top: 12px; }

/* Het overzicht rechts */
.list-order-product { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 14px; }
.order-item { display: flex; align-items: center; gap: 12px; }
.order-foto {
    position: relative; flex: none;
    width: 54px; height: 68px;
    background: #fff; border: 1px solid var(--w-lijn);
    display: block; overflow: hidden;
}
.order-foto img { width: 100%; height: 100%; object-fit: contain; padding: 5%; }
.order-aantal {
    position: absolute; top: -8px; right: -8px;
    min-width: 20px; height: 20px; padding: 0 5px;
    background: var(--w-inkt); color: #fff;
    border-radius: 999px; font-size: 11px; line-height: 20px; text-align: center;
}
.order-tekst { flex: 1; min-width: 0; display: grid; gap: 2px; }
.order-tekst strong { font-size: 13px; font-weight: 500; }
.order-tekst small { font-size: 12px; color: var(--w-zacht); }
.order-prijs { font-size: 13px; font-weight: 500; }
.btn-order { margin-top: 18px; }

/* ---------------------------------------------------------------------
   Account: inloggen en aanmaken
   --------------------------------------------------------------------- */
.account-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; max-width: 940px; margin-inline: auto; }
.account-layout--smal { grid-template-columns: 1fr; max-width: 560px; }
@media (max-width: 767px) { .account-layout { grid-template-columns: 1fr; } }

.account-blok { border: 1px solid var(--w-lijn); padding: 30px; }
.account-blok--zacht { background: var(--w-vlak); }
.account-kop { margin: 0 0 20px; }
.account-tekst { font-size: 14px; color: var(--w-zacht); margin-bottom: 16px; }
.account-formulier { display: grid; gap: 18px; }
.account-hulp { text-align: right; }
.account-hulp a { font-size: 13px; color: var(--w-zacht); }
.account-hulp a:hover { color: var(--w-inkt); }
.account-punten { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; }
.account-punten li { font-size: 13px; color: var(--w-zacht); padding-left: 18px; position: relative; }
.account-punten li::before { content: '—'; position: absolute; left: 0; color: var(--w-lijn); }
.account-klein { font-size: 13px; color: var(--w-zacht); margin: 16px 0 0; text-align: center; }
.account-klein a { color: var(--w-inkt); text-decoration: underline; }
.mt-3 { margin-top: 16px; }

/* ---------------------------------------------------------------------
   Merken
   --------------------------------------------------------------------- */
.merk-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; }
@media (max-width: 991px) { .merk-raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { .merk-raster { grid-template-columns: 1fr; } }

.merk-kaart { border: 1px solid var(--w-lijn); background: #fff; }
.merk-banner {
    display: block; position: relative;
    height: 130px; background: var(--w-vlak) center/cover no-repeat;
}
.merk-logo {
    position: absolute; left: 20px; bottom: -26px;
    width: 56px; height: 56px;
    display: grid; place-items: center;
    background: #fff; border: 1px solid var(--w-lijn); border-radius: 50%;
    font-size: 14px; font-weight: 500; color: var(--w-inkt); overflow: hidden;
}
.merk-logo img { width: 100%; height: 100%; object-fit: cover; }
.merk-lijf { padding: 38px 20px 22px; display: grid; gap: 8px; }
.merk-naam { margin: 0; font-size: 16px; font-weight: 500; }
.merk-naam a { color: var(--w-inkt); text-decoration: none; }
.merk-regio { margin: 0; font-size: 12px; color: var(--w-zacht); }
.merk-tekst { margin: 0 0 8px; font-size: 13px; color: var(--w-zacht); line-height: 1.6; }

.subgroep-lijst a.is-actief { background: var(--w-inkt); border-color: var(--w-inkt); color: #fff; }

/* ---------------------------------------------------------------------
   Redactionele pagina
   --------------------------------------------------------------------- */
.pagina-datum { font-size: 13px; color: var(--w-zacht); margin: 8px 0 0; }
.pagina-layout { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: start; }
@media (max-width: 991px) { .pagina-layout { grid-template-columns: 1fr; } }

.pagina-inhoud { font-size: 15px; line-height: 1.75; color: var(--w-zacht); max-width: 74ch; }
.pagina-inhoud h2, .pagina-inhoud h3 { color: var(--w-inkt); margin: 32px 0 12px; }
.pagina-inhoud h2 { font-size: 20px; }
.pagina-inhoud h3 { font-size: 17px; }
.pagina-inhoud p { margin: 0 0 16px; }
.pagina-inhoud ul, .pagina-inhoud ol { margin: 0 0 16px; padding-left: 20px; }
.pagina-inhoud li { margin-bottom: 6px; }
.pagina-inhoud a { color: var(--w-inkt); text-decoration: underline; }

.pagina-zijkant { display: grid; gap: 20px; position: sticky; top: 20px; }
.pagina-blok { border: 1px solid var(--w-lijn); padding: 22px; }
.pagina-blok--zacht { background: var(--w-vlak); }
.pagina-blok__kop {
    font-size: 11px; font-weight: 500; letter-spacing: .14em;
    text-transform: uppercase; color: var(--w-inkt); margin: 0 0 14px;
}
.pagina-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pagina-lijst a { font-size: 13px; color: var(--w-zacht); text-decoration: none; }
.pagina-lijst a:hover { color: var(--w-inkt); }
.pagina-blok__tekst { font-size: 13px; color: var(--w-zacht); margin: 0 0 14px; line-height: 1.6; }
.pagina-blok__tekst--klein { margin: 12px 0 0; text-align: center; }
.pagina-blok__tekst a { color: var(--w-inkt); }

/* ---------------------------------------------------------------------
   Bevestiging na de bestelling
   --------------------------------------------------------------------- */
.bedankt-layout { max-width: 680px; margin-inline: auto; display: grid; gap: 20px; }
.bedankt-kop { text-align: center; padding-bottom: 8px; }
.bedankt-vink {
    display: grid; place-items: center;
    width: 56px; height: 56px; margin: 0 auto 18px;
    border-radius: 50%; background: var(--w-inkt); color: #fff; font-size: 24px;
}
.bedankt-kop p { color: var(--w-zacht); font-size: 15px; margin: 0 auto 10px; max-width: 48ch; }
.bedankt-kop strong { color: var(--w-inkt); }
.bedankt-nummer {
    font-size: 20px; font-weight: 500; letter-spacing: .06em;
    color: var(--w-inkt) !important; margin: 18px 0 6px !important;
}
.bedankt-klein { font-size: 13px; }

.bedankt-blok { border: 1px solid var(--w-lijn); padding: 22px; }
.bedankt-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 575px) { .bedankt-raster { grid-template-columns: 1fr; } }
.bedankt-adres { font-style: normal; font-size: 14px; color: var(--w-zacht); line-height: 1.7; margin: 0; }
.bedankt-knoppen { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }

.checkout-melding--fout { border-left-color: #8a2118; }
.checkout-melding--fout strong { color: #8a2118; }

/* ---------------------------------------------------------------------
   Merkpagina
   --------------------------------------------------------------------- */
.merk-hero {
    background: var(--w-vlak) center/cover no-repeat;
    position: relative;
    padding: 64px 0 36px;
}
.merk-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(255,255,255,.94), rgba(255,255,255,.72));
}
.merk-hero .container { position: relative; }
.merk-hero__binnen { display: flex; align-items: center; gap: 20px; }
.merk-hero__logo {
    flex: none; width: 76px; height: 76px;
    display: grid; place-items: center;
    background: #fff; border: 1px solid var(--w-lijn); border-radius: 50%;
    font-size: 20px; font-weight: 500; color: var(--w-inkt); overflow: hidden;
}
.merk-hero__logo img { width: 100%; height: 100%; object-fit: cover; }
.merk-hero h1 { margin: 0; }
.merk-hero__plaats { margin: 4px 0 0; font-size: 13px; color: var(--w-zacht); }

.merk-verhaal { max-width: 70ch; }
.merk-verhaal p { font-size: 15px; line-height: 1.75; color: var(--w-zacht); }
.merk-verzending { font-size: 13px !important; color: var(--w-inkt) !important; }
.pb-0 { padding-bottom: 0 !important; }

/* ---------------------------------------------------------------------
   Accountpagina's
   --------------------------------------------------------------------- */
.account-paginalayout { display: grid; grid-template-columns: 250px 1fr; gap: 40px; align-items: start; }
@media (max-width: 991px) { .account-paginalayout { grid-template-columns: 1fr; } }

.account-zijbalk { border: 1px solid var(--w-lijn); padding: 24px; position: sticky; top: 20px; }
.account-welkom { display: grid; gap: 2px; margin: 0 0 20px; padding-bottom: 18px; border-bottom: 1px solid var(--w-lijn); }
.account-welkom span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--w-zacht); }
.account-welkom strong { font-size: 15px; font-weight: 500; color: var(--w-inkt); }
.account-welkom small { font-size: 12px; color: var(--w-zacht); }

.account-menu { display: grid; gap: 2px; }
.account-menu a {
    display: block; padding: 10px 0;
    font-size: 14px; color: var(--w-zacht); text-decoration: none;
    border-bottom: 1px solid transparent;
}
.account-menu a:hover { color: var(--w-inkt); }
.account-menu a.is-actief { color: var(--w-inkt); font-weight: 500; }

.account-uit { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--w-lijn); }
.account-uit button {
    background: none; border: 0; padding: 0; cursor: pointer;
    font-size: 13px; color: var(--w-zacht); text-decoration: underline;
}
.account-uit button:hover { color: var(--w-inkt); }

.account-inhoud { display: grid; gap: 20px; }
.account-cijfers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 575px) { .account-cijfers { grid-template-columns: 1fr; } }
.account-cijfer { border: 1px solid var(--w-lijn); padding: 20px; display: grid; gap: 4px; }
.account-cijfer strong { font-size: 22px; font-weight: 500; color: var(--w-inkt); }
.account-cijfer small { font-size: 12px; color: var(--w-zacht); }

.account-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 767px) { .account-raster { grid-template-columns: 1fr; } }

.account-bestellijst, .account-zendingen { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 2px; }
.account-bestellijst a, .account-zendingen li {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid var(--w-lijn);
    color: var(--w-inkt); text-decoration: none;
}
.account-bestellijst strong, .account-zendingen strong { display: block; font-size: 14px; font-weight: 500; }
.account-bestellijst small, .account-zendingen small { font-size: 12px; color: var(--w-zacht); }
.account-bedrag { font-weight: 500; }

.account-tabel td { vertical-align: middle; font-size: 14px; }
.account-etiket {
    display: inline-block; padding: 4px 9px; border-radius: 7px;
    font-size: 11px; font-weight: 500; color: #fff; margin-right: 4px;
}

.account-kopbalk { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.account-blok--let-op { border-color: #e0c9c5; }
.adres-kaart { display: grid; gap: 10px; align-content: start; }
.adres-kaart .account-etiket { justify-self: start; margin-right: 0; }
.adres-label { font-size: 13px; font-weight: 500; color: var(--w-inkt); margin: 0; }
.adres-instructie { font-size: 12px; color: var(--w-zacht); margin: 0; }
.adres-knoppen { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.adres-link {
    background: none; border: 0; padding: 0; cursor: pointer;
    font-size: 12px; letter-spacing: .06em; color: var(--w-zacht); text-decoration: underline;
}
.adres-link:hover { color: var(--w-inkt); }
.adres-link--weg:hover { color: #8a2118; }

/* --- Eén bestelling ------------------------------------------------- */

.bestelling-layout { display: grid; grid-template-columns: 1fr 340px; gap: 30px; align-items: start; }
@media (max-width: 991px) { .bestelling-layout { grid-template-columns: 1fr; } }
.account-inhoud .bestelling-layout { grid-template-columns: 1fr; }

.bestelling-hoofd, .bestelling-zijkant { display: grid; gap: 20px; }
.bestelling-kop { margin: 0; }
.bestelling-etiketten { display: flex; flex-wrap: wrap; gap: 4px; }

.bestelling-verloop { list-style: none; margin: 22px 0 0; padding: 0 0 0 6px; display: grid; gap: 0; }
.bestelling-verloop li { position: relative; display: flex; gap: 16px; padding: 0 0 20px 0; }
.bestelling-verloop li:last-child { padding-bottom: 0; }
.bestelling-verloop li::before {
    content: ""; position: absolute; left: 4px; top: 14px; bottom: -4px;
    width: 1px; background: var(--w-lijn);
}
.bestelling-verloop li:last-child::before { display: none; }
.verloop-stip {
    flex: 0 0 9px; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%;
    background: var(--w-lijn); position: relative; z-index: 1;
}
.bestelling-verloop li:first-child .verloop-stip { background: var(--w-inkt); }
.verloop-tekst { display: grid; gap: 2px; min-width: 0; }
.verloop-tekst strong { font-size: 14px; font-weight: 500; }
.verloop-tekst small { font-size: 12px; color: var(--w-zacht); }

.account-zendingen li:last-child { border-bottom: 0; padding-bottom: 0; }
.bestelling-hoofd .list-order-product { margin-bottom: 0; }
.bestelling-hoofd .order-item { border-bottom: 1px solid var(--w-lijn); padding-bottom: 14px; }
.bestelling-hoofd .order-item:last-child { border-bottom: 0; padding-bottom: 0; }

.account-smal { max-width: 460px; margin-inline: auto; }

/* De statuskleuren gelden ook buiten een productkaart, bij bestellingen. */
.account-etiket.badge-nieuw   { background: #3E7A4E; }
.account-etiket.badge-korting { background: #BA3326; }
.account-etiket.badge-best    { background: #D8E84A; color: var(--w-inkt); font-weight: 600; }
.account-etiket.badge-uit     { background: #6b6b67; }
.account-etiket.badge-open    { background: var(--w-inkt); }

/* Het thema kent alleen een gevulde knop; hiernaast willen wij een
   rustige tweede knop voor alles wat niet de hoofdactie is. */
.tf-btn.btn-line {
    background: transparent; color: var(--w-inkt);
    box-shadow: inset 0 0 0 1px var(--w-inkt);
}
.tf-btn.btn-line:hover { background: var(--w-inkt); color: #fff; }

/* In een formulierraster mag een knop niet over de volle breedte rekken. */
.account-formulier > .tf-btn:not(.w-100) { justify-self: start; }

/* Het iDEAL-beeldmerk is bijna vierkant; iets kleiner oogt het even groot
   als de brede kaartlogo's ernaast. */
.betaal-ideal { margin: 3px 0; }

/* Beeldmerk naast een betaalwijze, en de regel over de betaaldienst. */
.betaal-merk { flex: 0 0 auto; margin-left: auto; }
.betaal-via {
    display: flex; align-items: center; gap: 8px;
    margin: 14px 0 22px; font-size: 12px; color: var(--w-zacht);
}
.betaal-via img { display: block; }

/* De keuzerondjes volgen de inkt van de winkel, niet het blauw van de browser. */
.keuzeblok input[type="radio"], .keuzeblok input[type="checkbox"],
.check-ship input, .afreken-formulier input[type="checkbox"] { accent-color: var(--w-inkt); }

/* --- Ervaringen ------------------------------------------------------ */

/* Onze foto's zijn productfoto's op wit, geen sfeerbeeld. Wit vlak voor
   het product en een grijs vlak voor de tekst maakt daar één kaart van,
   in plaats van een foto die los op de pagina zweeft. */
.ervaringen .testimonial-v02 { overflow: hidden; }
.ervaringen .testimonial-v02 .tes-image { background: #fff; }
.ervaringen .testimonial-v02 .tes-image img { object-fit: contain; padding: 18px 10px; }
.ervaringen .testimonial-v02 .tes-content { background: var(--w-vlak); }
.ervaringen .star-wrap.style-yellow .icon { color: #E8A33D; }
.ervaringen .star-wrap .icon.cl-text-6 { color: var(--w-lijn); }
.ervaringen .tes-text { color: var(--w-zacht); }
.ervaringen .tes-avatar img { background: #fff; }

/* --- Filterlade op de telefoon ---------------------------------------- */

/* Op een breed scherm is er geen lade: de filters staan gewoon in de
   zijbalk en de knop is overbodig. */
.filterlade__knop { display: none; }

@media (max-width: 991px) {
    .filterlade__knop {
        display: flex;
        align-items: center;
        gap: 8px;
        list-style: none;
        cursor: pointer;
        padding: 13px 18px;
        border: 1px solid var(--w-lijn);
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--w-inkt);
        user-select: none;
    }
    .filterlade__knop::-webkit-details-marker { display: none; }
    .filterlade__knop .icon { font-size: 16px; }

    /* Hoeveel filters staan er aan? Anders zoekt iemand zich rot naar
       waarom er maar drie producten zijn. */
    .filterlade__aantal {
        margin-left: auto;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 999px;
        background: var(--w-inkt);
        color: #fff;
        font-size: 11px;
        line-height: 20px;
        text-align: center;
    }

    .filterlade[open] .filterlade__knop {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom-color: transparent;
    }
    .filterlade[open] > form {
        border: 1px solid var(--w-lijn);
        border-top: 0;
        border-radius: 0 0 6px 6px;
        padding: 4px 18px 18px;
    }

    .sidebar-filter { position: static; }
}

/* Het thema laat de knop "Bekijken" onder 1200px altijd zien; op een
   telefoon dekt die dan het halve product af. De foto is zelf al een
   link naar het product, dus daar wint niemand iets mee. */
@media (max-width: 1199px) {
    .card-product .product-action_bot { display: none; }
}

/* --- Aanraakvlakken op de telefoon ------------------------------------ */

/* Een pictogram is 20 px; met een vinger raak je dat niet betrouwbaar.
   Het vlak eromheen groeit naar 44 px, het pictogram blijft even groot.
   Negatieve marge houdt de kop even hoog als hij was. */
@media (max-width: 1199px) {
    .nav-icon-list { gap: 6px; }
    .nav-icon-list .nav-icon-item {
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
        margin-block: -12px;
    }
    .nav-icon-list .nav-icon-item.has-number .number-order { top: 4px; right: 4px; }

    .box-btn-open-menu .btn-open-menu {
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
        margin-block: -12px;
    }

    /* Het kruisje van het uitschuifmenu en de knoppen in de wagen ook. */
    .offcanvas .btn-close { min-width: 44px; min-height: 44px; }
    .cart-weg { min-width: 44px; min-height: 44px; }
}

/* De naam van een categorie met zijn aantal blijft één geheel. */
.cls-naam { display: inline; }
.cls-naam sup { margin-left: 1px; font-size: .7em; }

/* Voettekstlinks zijn op een telefoon net te ondiep om prettig te raken. */
@media (max-width: 991px) {
    .footer-lijst { gap: 2px; }
    .footer-lijst a { display: block; padding-block: 7px; }
}

/* Op de smalste telefoons liep het merk over de pictogrammen heen. De
   drie delen van de kop mogen krimpen, en het merk wordt een maat
   kleiner zodat het binnen zijn eigen vak blijft. */
@media (max-width: 400px) {
    .header-inner_wrap { gap: 6px; }
    .header-left, .header-right { flex: 0 0 auto; min-width: 0; }
    .header-center { min-width: 0; }
    .logo-woord {
        display: inline-block;
        max-width: 100%;
        font-size: 12px;
        letter-spacing: .05em;
        white-space: nowrap;
    }
}

/* --- Talenkiezer in de voet ------------------------------------------- */
.footer-taal {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 0 0;
    font-size: 12px;
    color: var(--w-zacht);
}
.footer-taal form { display: flex; align-items: center; gap: 10px; }
.footer-taal label { letter-spacing: .04em; text-transform: uppercase; }
.footer-taal select {
    border: 1px solid var(--w-lijn);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--w-inkt);
    background: #fff;
    min-height: 40px;
}
.footer-taal select:focus { outline: none; border-color: var(--w-inkt); }

/* Talen die van rechts naar links lopen: de bladwijzers en lijsten
   moeten dan aan de andere kant beginnen. */
[dir="rtl"] .footer-taal,
[dir="rtl"] .footer-onder { flex-direction: row-reverse; }
[dir="rtl"] .breadcrumbs,
[dir="rtl"] .footer-lijst,
[dir="rtl"] .footer-contact { text-align: right; }

/* ------------------------------------------------------------------ */
/*  Taalkiezer in de kopbalk                                           */
/*                                                                     */
/*  Een <details> in plaats van een eigen uitklapper: opent en sluit    */
/*  zonder javascript en is met het toetsenbord te bedienen. Het        */
/*  driehoekje dat de browser er standaard bij zet halen wij weg; wij   */
/*  tekenen zelf een pijltje dat meedraait.                             */
/* ------------------------------------------------------------------ */
.taalkiezer { position: relative; }

.taalkiezer__knop {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
    list-style: none;
    line-height: 1;
    color: inherit;
    transition: background-color .18s ease;
}

.taalkiezer__knop::-webkit-details-marker { display: none; }
.taalkiezer__knop::marker { content: ""; }
.taalkiezer__knop:hover { background: rgba(0, 0, 0, .05); }

.taalkiezer[open] .taalkiezer__knop { background: rgba(0, 0, 0, .06); }

.taalkiezer__code {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
}

.taalkiezer__knop .icon {
    font-size: 9px;
    opacity: .55;
    transition: transform .18s ease;
}

.taalkiezer[open] .taalkiezer__knop .icon { transform: rotate(180deg); }

.taalkiezer__paneel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 60;
    min-width: 208px;
    padding: 10px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .09);
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .13);
}

.taalkiezer__kop {
    margin: 2px 8px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8b8b8b;
}

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

.taalkiezer__optie {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 9px;
    border-radius: 7px;
    font-size: 14px;
    color: #1c1c1c;
    text-decoration: none;
    transition: background-color .15s ease;
}

.taalkiezer__optie:hover { background: #f4f4f4; color: #1c1c1c; }
.taalkiezer__optie.is-actief { font-weight: 600; }
.taalkiezer__vink { margin-left: auto; color: var(--primary, #1c1c1c); }

/* De vlag krijgt een dun randje: wit in een witte vlag valt anders weg. */
.vlag {
    display: block;
    flex: 0 0 auto;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .13);
}

/*  Op een smal scherm hoeft de landcode er niet bij; de vlag alleen
    houdt de rij iconen op één regel.                                   */
@media (max-width: 575px) {
    .taalkiezer__code { display: none; }
    .taalkiezer__paneel { right: -8px; }
}

/*  Van rechts naar links klapt het paneel de andere kant op uit.        */
[dir="rtl"] .taalkiezer__paneel { right: auto; left: 0; }
[dir="rtl"] .taalkiezer__vink { margin-left: 0; margin-right: auto; }