/* Cascade-laag `site` — het waarom staat in base.css. */
@layer site {
/* Home: geen witruimte boven full-bleed hero. contact.css geeft #main-content 80px padding-top
   zodra er ergens een text_form-laag in staat (home: nieuwsbrief diep op de pagina) -> duwt de hero
   omlaag. Alleen als de eerste laag een bleed-hero is neutraliseren; /contact e.d. houden hun 80px.
   In @layer site geplaatst (zelfde laag als de contact.css-regel) en specifieker, dus wint. Interim. */
    #main-content:has(> .layer--hero.layer--bleed:first-child),
#main-content:has(> .layer--usps:first-child) { padding-top: 0; }

/* site.css — noorderlichtjes.nl-specifieke overrides op framework-CSS.
 *
 * Geen hard-coded kleuren: alles via tokens uit /css/variables/website.css
 * (brand + on-image) of de framework-base /modules/variables.css (fg/bg/border).
 * Zie [[feedback_no_important_css]]: bij conflict via specificity oplossen,
 * niet via !important. */

/* Alle titels in het sierfont (theme-font-3, Cormorant Garamond) */
:is(
    .layer__hero-title, .layer--text .heading, .layer__cards-title,
    .layer__usps-title, .usp__title, .layer__faq-title,
    .layer__inspiration-title, .inspiration-tile__title,
    .postcards__title, .postcard__title,
    .reviews__banner-title, .card__title,
    .general__title
) {
    font-family: var(--theme-font-3);
}

/* [woord]-markup → <mark>-element. Accent-kleur komt uit het token,
   themable per light/dark. */
mark {
    color: var(--color-accent);
    background: none;
    font-style: italic;
}

/* Header titel/subtitel renderen bovenop een dark cover-overlay → altijd
   licht ongeacht het site-thema. Vandaar --on-image-fg (geen --color-fg). */
.layer__hero-title {
    color: var(--on-image-fg);
    font-size: clamp(3rem, calc(1rem + 4vw), 5.125rem);
}

/* Home: payoff-h1 in de header-laag kleiner dan op andere pagina's.
   TEST-waarde — fors kleiner om het verschil zichtbaar te maken; daarna fijn-afstellen.
   Alleen de h1 (niet h2-overlaytitels), alleen op de site-roots. */
h1.layer__hero-title {
    font-size: clamp(2.25rem, calc(0.75rem + 3vw), 3.5rem);
}

/* Mobiel: gemeten zó dat "Handgemaakte (led) kaarsen." op één regel breekt
   (Cormorant-mark meet breder dan body-font; 7.6vw schaalt lineair mee met
   de regelbreedte). Zelfde specificity als de home-regel hierboven. */
@media (max-width: 600px) {
    .layer__hero-title {
        font-size: 7.6vw;
    }
}

.layer__hero-subtitle {
    color: var(--on-image-fg);
    font-size: 1rem;
}

/* Assortiment: op mobiel twee USP-slides naast elkaar; de algemene carousel-peek van 80% is hier te breed. */
@media (max-width: 400px) {
    .layer--usps[data-type="4"] .carousel__container[data-layout-cols="4"] .carousel__slide {
        flex-basis: 50%;
    }
}

/* USP typografie */
.usp__eyebrow { font-size: .7rem; }
.usp__title   { font-size: 1.4rem; font-weight: 600; }
.usp__text    { font-size: .75rem; }

/* USP-lijst: zoveel mogelijk op één rij, wrappen als het niet past.
   Carousel-view uitgezonderd — die heeft eigen layout via JS/carousel.css. */
.layer--usps:not([data-view="carousel"]) .layer__usps-list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    row-gap: var(--space-4);
}

/* Mobiel: 2 naast elkaar (2×2 voor de vier home-USP's), gecentreerd per cel,
   met bescheiden iconen (feedback Ronny 2026-06-06). */
@media (max-width: 600px) {
    .layer--usps:not([data-view="carousel"]) .layer__usps-list {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Geen justify-self: center — ongelijke tekstbreedtes lieten de onderste
       rij dan inspringen; links uitgelijnd staan de kolommen strak. */
    .layer--usps .usp__icon { width: 1.75rem; height: 1.75rem; }
}

/* Secondary button in header: subtiele lichte vulling op de dark image-overlay
   (heel licht, glas-achtig) + iets sterkere hover. */
.layer__hero .button--secondary {
    color: var(--on-image-fg);
    border: 1px solid var(--on-image-border);
    background: rgba(255, 255, 255, .12);
}
.layer__hero .button--secondary:hover {
    background: rgba(255, 255, 255, .22);
    border-color: var(--on-image-fg);
}

/* Donkere overlay over headerfoto voor betere leesbaarheid van tekst. */
.layer__hero-body:has(.layer__hero-media-wrap)::before {
    background: var(--on-image-overlay);
}

/* Mobiel: de payoff staat óp het drukste deel van de foto — egaal donkerder
   over het hele beeld leest fijner dan een gradient of los highlight-vlakje. */
@media (max-width: 600px) {
    .layer__hero-body:has(.layer__hero-media-wrap)::before {
        background: color-mix(in srgb, black 60%, transparent);
    }
}

.layer--text-image {
    box-shadow: none;
}

.general__title {
    font-weight: 300;
}
.enumeration__title {
    font-weight: 300;
}

/* FAQ-vragen: lichter en in het heading-font voor een chiquere uitstraling.
   Classnaam volgt sinds F426 de framework-markup (was `.faq__question`). */
.faq__q {
    font-family: var(--theme-font-2);
    font-weight: 400;
    font-size: 1.2rem;
}

/* Thema-header: op mobiel vierkant (1:1 i.p.v. de brede desktop-ratio).
   De renderer zet `aspect-ratio` via inline-style; op smalle viewports
   overschrijven we dat via CSS (hogere specificity via media-query). */
@media (max-width: 48rem) {
    html[data-theme] .layer__hero-body {
        aspect-ratio: 1 / 1;
    }
}

/* Themed pages krijgen body-achtergrond op de lichte thema-variant.
   ThemeCss mapt theme_color2 → --color-bg-soft (zachte tint); door body's
   bg-color daarop te zetten, kleurt de hele pagina mee per thema (Terracotta
   → room, Olijfgroen → zachtgroen, etc.). Selector op <html data-theme>: alleen
   actief op pages met een thema-koppeling. */
html[data-theme] body {
    background-color: var(--color-bg-soft);
}

/* ── Roze header-balk (hoofdkleur) + attentie-CTA's ──────────────────────
   Kleurschema: hoofdkleur #e8a0c0 (header/nav), attentie #c97aab (CTA's),
   vlakken #fdf6f9. Witte menu-tekst geldt ALLEEN voor de top-level links op
   de desktop-balk; dropdown-submenu's en de mobiele drawer staan op een witte
   achtergrond en houden donkere tekst. */
/* Menu-achtergrond #e8a0c0. Hogere specificiteit (`body .site-header`) zodat
   dit wint van de CMS-navigatie-design-stijl die ná dit bestand op `.site-header`
   wordt ingespoten (anders zou die de achtergrond overschrijven). */
body .site-header {
    background: #e8a0c0;
    border-bottom-color: rgba(255, 255, 255, .25);
}

/* Mobiel menu: submenu-chevron (bv. 'Inspiratie thema's') roze i.p.v. het grijze
   framework-default (--color-fg-muted); viel te weinig op op de donkere drawer-
   achtergrond. Hogere specificiteit (`body ...`) zodat het van de framework-nav-
   regel wint, geen !important nodig. Age 2026-08-28. */
@media (max-width: 48rem) {
    body .site-nav__toggle {
        color: #e8a0c0;
    }
}
.site-logo > .media {
    display: inline-block;
    height: 2.5rem;
    flex-shrink: 0;
}
.site-logo > .media > .media__viewport {
    position: relative;
    inset: auto;
    display: block;
    height: 100%;
    width: auto;
}
.site-logo > .media > .media__viewport > img,
.site-logo > .media > .media__viewport > svg {
    position: relative;
    inset: auto;
    width: auto;
    height: 100%;
}
.site-header__menu-toggle { color: #fff; }
.site-header__menu-toggle:hover { background: rgba(255, 255, 255, .15); }

@media (min-width: 48.0625rem) {
    .site-header .site-nav__list--depth-0 > .site-nav__item > .site-nav__link {
        color: #fff;
    }
    .site-header .site-nav__list--depth-0 > .site-nav__item > .site-nav__link:hover {
        color: #fff;
        opacity: .75;
    }
    .site-header .site-nav__list--depth-0 > .site-nav__item--active > .site-nav__link {
        text-decoration: underline;
        text-underline-offset: .3em;
    }
}

/* CTA-/primary-knoppen (o.a. 'Word klant') in de hoofdkleur #e8a0c0. */
.button--primary {
    background: var(--color-primary);
    color: #fff;
}
.button--primary:hover {
    background: color-mix(in srgb, var(--color-primary) 85%, #000);
}
/* Mobiele drawer-CTA's; de desktop --main iconen blijven transparant/wit. */
.site-nav__ctas--mobile .site-nav__cta {
    background: var(--color-primary);
}

/* Verticale witruimte rond de store-locator-sectie op de home (geen eigen
   design_layer-spacing), in lijn met de collecties-sectie erboven. */
.layer__store-locator {
    margin-block: var(--space-6);
}


/* ──────────────────────────────────────────────────────────────────────────
   Contactkaart: laag `layer_map`, rendert via de gedeelde framework-module
   location-map.js/.css — marker komt live uit settings.marker (issue #8:
   renderer emit rauw /media-pad → 403, marker laadt daardoor nog niet).
   Op verzoek: kaart full-bleed (rand tot rand, zoals ecohus.nl/contact) en
   de "Routebeschrijving"-link verborgen. Scoped op laag 1030.
   ────────────────────────────────────────────────────────────────────────── */
.layer__map-canvas {
    min-height: 320px;
    margin-block-end: var(--space-3);
}
.store-locator-map .layer__map-canvas {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    margin-block-end: 0;
}
.store-locator-map .layer__map-route { display: none; }
.layer__map-route {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}
.layer__map-route svg { width: 1.2em; height: 1.2em; }


/* ──────────────────────────────────────────────────────────────────────────
   Contactformulier: inputs hoger, rondere hoeken, zachte roze vulkleur
   (#fdf5f9 — ≈ token --color-bg-soft #fdf6f9). Op verzoek. Properties direct op
   de control (specificity > de base var-regel), niet via de --form-*-vars omdat
   die op <form> zelf staan en via de wrapper-cascade zouden verliezen. Geldt
   voor zowel inputs als de textarea (beide hebben .form-field__control).
   ────────────────────────────────────────────────────────────────────────── */
.layer__text-form .form-field .form-field__control {
    background: #fdf5f9;
    border-radius: 14px;
    padding: 1rem 1.1rem;
    font-size: 1rem;
    font-family: inherit;
}


/* Contactformulier: zachte roze border (ref. screenshot01) + placeholder-tekst
   in body-tekststijl (--color-fg-muted, ref. screenshot02). Focus houdt de
   accent-kleur als affordance (hogere specificity dan base-focus). */
.layer__text-form .form-field .form-field__control {
    border: 1px solid color-mix(in srgb, var(--color-accent) 28%, #fff);
}
.layer__text-form .form-field .form-field__control:focus {
    border-color: var(--color-accent);
}
.layer__text-form .form-field .form-field__control::placeholder {
    color: var(--color-fg-muted);
    opacity: 1;
}

/* Contactformulier: telefoonveld (.tel) als gewoon inputveld stylen — zelfde
   look als Naam/E-mailadres/Onderwerp. De .tel-wrapper krijgt de roze vulkleur +
   border + radius; interne elementen (landcode-trigger + tel-input) worden
   transparant en vloeien samen in het veld. */
.layer__text-form .form-field .tel {
    display: flex;
    align-items: center;
    background: #fdf5f9;
    border: 1px solid color-mix(in srgb, var(--color-accent) 28%, #fff);
    border-radius: 14px;
    padding: 0 1.1rem;
    font-size: 1rem;
}
.layer__text-form .form-field .tel:focus-within {
    border-color: var(--color-accent);
}
.layer__text-form .form-field .tel .select-display {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    padding-right: .5rem;
    min-width: auto;
    font-size: 1rem;
    color: var(--color-fg);
}
.layer__text-form .form-field .tel input[type="tel"] {
    background: transparent;
    border: none;
    outline: none;
    flex: 1;
    padding: 1rem 0;
    font-size: 1rem;
    font-family: inherit;
    color: var(--color-fg);
}
.layer__text-form .form-field .tel input[type="tel"]::placeholder {
    color: var(--color-fg-muted);
    opacity: 1;
}


/* ──────────────────────────────────────────────────────────────────────────
   Landingspagina — CTA-laag 1094 staat op menuroze (--color-primary).
   `.button--primary` heeft background:var(--color-primary) = exact diezelfde
   kleur → de knop valt volledig weg. Daarom hier omgekeerd: witte knop met
   roze tekst. De secondary krijgt witte tekst; z'n rand volgt currentColor en
   wordt daarmee vanzelf wit.
   Het CMS-slot `design_button_text` bewaart de waarde wél maar genereert GEEN
   CSS (geverifieerd) → vandaar deze override.
   ────────────────────────────────────────────────────────────────────────── */
.cta-contrast .button--primary,
.cta-contrast .button--primary,
.cta-contrast .button--primary,
.cta-contrast .button--primary {
    background: var(--color-primary-fg);
    color: var(--color-primary);
}
.cta-contrast .button--secondary,
.cta-contrast .button--secondary,
.cta-contrast .button--secondary,
.cta-contrast .button--secondary {
    background: var(--color-accent);
    color: var(--color-primary-fg);
    box-shadow: none;
}


/* Gecentreerde tekstlaag (`type=text_centered` → [data-align="center"]): ook de
   knoppen centreren. `.layer__text-buttons` is een flex-container zonder
   justify-content → knoppen blijven links staan, terwijl de centreer-regel
   alleen `text-align:center` zet (dat centreert geen flex-items).
   Geen CMS-slot beschikbaar: `design_link` weigert `justify-content`. */
.layer--text[data-type="text_centered"] .layer__text-buttons {
    justify-content: center;
}


/* Knoppen in een tekstlaag mogen geen link-underline krijgen.
   motion.css heeft `.layer--text-text .prose a`
   { text-decoration: underline }` ("link underline grow on hover") — bedoeld
   voor tekstlinks, maar de knoppen staan óók in `.prose` en worden
   dus mee-onderstreept. `.button{text-decoration:none}` (0,1,0) verliest van
   die regel (0,1,1). Hier expliciet terugzetten; echte tekstlinks (tel/mail)
   houden hun underline. */
.layer--text .prose a.button,
.layer--text-text .prose a.button {
    text-decoration: none;
}


/* Hover-kleur van tekstlinks = accentroze. Hoort in Website opmaak → Tekst →
   "Hyperlink binnen tekst (hover)" (slot design_text__anchor_hover) en die
   waarde STAAT daar ook ingevuld — maar dat slot genereert geen CSS
   (geverifieerd: PUT 200, rejected:[], geen regel). Zodra dat in het framework
   werkt, kan deze regel weg. De rustkleur (#954e7a) komt wél uit het CMS. */
.layer--text-text .prose a:hover {
    color: var(--color-accent);
}


/* CTA-laag 1094: achtergrondfoto (bg-kaars-effect-03.webp, media 264).
   De keuze STAAT in het CMS (Opmaak → Laag → achtergrond afbeelding; opgeslagen
   als {file_id:264}) en `background-size/-repeat/-position` compileren daar wél
   uit — maar de StyleCompiler emit GEEN `background-image` (geverifieerd: op
   geen enkele pagina van deze site komt er een background-image uit het
   layer-design blok). `background-image-css` weigert url()/pad.
   Raw /media is 403 op de site-host → beeld via de assets-host, zoals bij
   binaire assets gebruikelijk. Deze regel kan weg zodra het veld compileert. */
.cta-candle-background > .layer__bg {
    background-image: url("https://assets.easyhandling.nl/media/460/website-settings/bg-kaars-effect-03.webp");
}


/* ============================================================
   KERSTPAGINA (/landingspagina-kerst) — alleen deze route
   ============================================================ */

/* Sneeuw komt nu uit de laag-instelling "Sfeer-effect" (Effect: Sneeuw) op de
   hero-laag — een canvas-effect via /js/hero-fx.js, instelbaar in het CMS
   (intensiteit/snelheid/wind). Geen route-CSS meer nodig. */

/* Hero-foto donkerder + zachte donkere overlay */
.hero-wave-christmas .media__viewport img{ filter: brightness(1.05); }
.hero-wave-christmas .media__viewport::after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
    background:linear-gradient(180deg, rgba(28,9,20,.06), rgba(28,9,20,.20));
}

/* CTA-knoppen + tekstlinks leesbaar op de donkere #411631 achtergrond */
.christmas-cta .button--primary{
    background:#e8a0c0; color:#411631;
}
.christmas-cta .button--secondary{
    background:transparent; color:#ffffff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);
}
body:has(.hero-wave-christmas) .layer--text-text .prose a{ color:#ffd0e6; }

/* USP-teksten wit op de donkere kerst-achtergrond */
body:has(.hero-wave-christmas) .usp__title,
body:has(.hero-wave-christmas) .usp__text{ color:#ffffff; }
body:has(.hero-wave-christmas) .usp__eyebrow{ color:rgba(255,255,255,.72); }

/* Geen witte flits tijdens de scroll-reveal: donkere onderlaag op de hele kerstpagina
   (de laag-achtergronden faden mee met de reveal; zonder dit zie je even het witte body) */
body:has(.hero-wave-christmas),
body:has(.hero-wave-christmas) #main-content{ background-color:#411631; }

/* CTA-subtitel warm goudgeel (kerst) */
.christmas-cta .layer--text .subtitle{ color:#f5c97a; }

/* Kerst: lopende tekst iets donkerder dan de titel (test op 1137, evt. later uitrollen) */
body:has(.hero-wave-christmas) .layer--text-text .prose{ color:#b3859a; }

/* Productfoto in z'n geheel tonen (niet bijsnijden) — dead code: product-detail.css
   is on-layered, deze regel verliest altijd. Werkende versie staat buiten de layer. */
.product-detail__gallery-main .product-detail__gallery-image{ object-fit: contain; }

/* Productfoto-achtergrond wit (i.p.v. thema-lichtgrijs) */
.product-detail__gallery .product-detail__gallery-main{ background-color:#ffffff; }

/* Overzichts-kaartjes: productfoto volledig tonen (niet bijsnijden) op wit */
img.product-card__image{ object-fit: contain; background-color:#ffffff; }

/* Kerst hero: meer lucht op mobiel (~150% hoger), matcht thema-breakpoint 600px */
@media (max-width: 600px){
    .hero-wave-christmas .layer__hero-body{
        padding-top: 5.5em; padding-bottom: 5.5em;
    }
}

/* Originele landingspagina hero: zelfde mobiele lucht (~150%) als kerst */
@media (max-width: 600px){
    .landing-hero .layer__hero-body{
        padding-top: 5.5em; padding-bottom: 5.5em;
    }
}

/* Kerst USP-balk: icoon + tekst bovenaan uitlijnen (strakker dan center) */
body:has(.hero-wave-christmas) .usp{ align-items: start; }
/* Landingspagina USP's: tekst verticaal gecentreerd op de iconen (op verzoek). */
.landing-usps .usp{ align-items: center; }

/* Header-scrim op mobiel gelijk aan desktop (thema zet 'm mobiel op 60% zwart, desktop 35%) */
@media (max-width: 600px){
    body:has(.hero-wave-christmas) .layer__hero .layer__hero-body::before,
    .landing-hero .layer__hero-body::before{
        background: rgba(0, 0, 0, .35);
    }
}


/* ──────────────────────────────────────────────────────────────────────────
   Nieuwsbrief-laag 869 (home, text_form): e-mailveld en "Inschrijven"-knop op
   een rij (knop achter het inputveld) i.p.v. de knop eronder. Op verzoek.
   `form` = flex-row; label+veld groeien, knop schuift ernaast en lijnt met de
   onderkant van het inputveld. De base-marges (.form-field margin-bottom /
   .form-actions margin-top) moeten weg, anders zakt de knop t.o.v. het veld —
   hogere specificity (`form .form-field`) dan de base-regel. Knop op inputhoogte
   (49px) + radius 14px zodat veld en knop als een control ogen; wrapt op smal.
   NB: de renderer zet `display:grid` op de form (regel in cross-origin CSS) →
   daarom scopen op de form-id (#form-867) i.p.v. `form`, anders wint de grid.
   ------------------------------------------------------------------------- */
.newsletter-signup #form-867 {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    flex-wrap: wrap;
}
.newsletter-signup #form-867 .form-field {
    flex: 1 1 240px;
    margin: 0;
}
.newsletter-signup #form-867 .form-actions {
    margin: 0;
    flex: 0 0 auto;
}
.newsletter-signup #form-867 .form-actions .btn {
    height: 49px;
    border-radius: 14px;
    white-space: nowrap;
    padding-inline: 1.4rem;
}

/* Nieuwsbrief 869: e-mailveld matchen met de Inschrijven-knop — zelfde hoogte,
   border-radius en font-size. Zachte roze border (als het contactformulier),
   witte achtergrond, nette placeholder. */
.newsletter-signup #form-867 .form-field__control {
    height: 49px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--color-accent) 28%, #fff);
    background: #fff;
    padding: 0 1.1rem;
    font-size: 1rem;
    box-sizing: border-box;
}
.newsletter-signup #form-867 .form-field__control:focus {
    border-color: var(--color-accent);
    outline: none;
}
.newsletter-signup #form-867 .form-field__control::placeholder {
    color: var(--color-fg-muted);
    opacity: 1;
}

/* Nieuwsbrief 869: het e-mailveld-label is hergebruikt als kop "Schrijf je
   direct in" (CMS: veld 868 label) — zelfde stijl als de sectietitel "Blijf op
   de hoogte" (heading-font var(--theme-font-3), weight 300). De verplicht-
   asterisk verbergen (het is nu een kop, geen veldlabel). Inhoud verticaal
   centreren in de witte kaart: `.layer--text-form` (bg wit, radius 20px) rekt in
   de grid mee met de hogere tekstkolom links → zonder centreren staat de form
   top-zwaar. */
.newsletter-signup .layer--text-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Iets meer lucht onder veld+knop (op verzoek): top blijft 2rem, onder 3rem. */
    padding-bottom: 3rem;
}
.newsletter-signup #form-867 {
    margin: 0;
}
.newsletter-signup #form-867 .form-field__label {
    font-family: var(--theme-font-3);
    font-weight: 300;
    font-size: 1.9rem;
    line-height: 1.15;
    color: var(--color-fg);
    margin: 0 0 .55rem;
}
.newsletter-signup #form-867 .form-field__required {
    display: none;
}


/* ──────────────────────────────────────────────────────────────────────────
   Magazine (/magazine): het grijze kader rond de flipbook (.flipbook-wrap =
   module-default #f2f2f2) in de warme geel-tint #f4edd7 die bij de catalogus
   past — full-bleed (rand tot rand), de pagina's blijven gecentreerd via
   padding-inline. Op verzoek ("kleur de tweede laag, niet de buitenste laag").
   Geldt voor beide flipbooks op /magazine (laag 944 "Ons magazine" + laag 946),
   gescoped op de magazine-route zodat flipbooks op andere pagina's ongemoeid blijven. Kleur zit niet in een CMS-slot (flipbook-module-component) → site.css. */
.magazine-primary .flipbook-wrap {
    /* Eerste flipbook: geen achtergrond (op verzoek) — ook het module-grijs
       (#f2f2f2) eraf, dus transparant/wit. */
    background: transparent;
}

/* Twee verschillende flipbooks op /magazine onderscheiden via de tint: 944
   "Ons magazine" houdt de warme geel (#f4edd7 hierboven), 946 krijgt een
   subtiele blush-roze. Hogere specificity (route + laag-id) dan de regel
   hierboven zodat alleen de achtergrond van 946 overschreven wordt. */
.magazine-secondary .flipbook-wrap {
    /* Tweede flipbook: subtiele blush-tint, full-bleed (rand tot rand),
       pagina's gecentreerd. Onderscheidt 'm van het eerste (kleurloze) flipbook. */
    background: #f6e7ef;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: max(1rem, calc(50vw - 38rem + var(--gutter)));
}

/* Flipbook-bediening: de module-grijstinten (nav-balk/knoppen/mode-toggle,
   #e2e2e2/#eaeaea/#bdbdbd/#d0d0d0…) vervangen door een blush-roze schaal. De
   module is themebaar via --fb-* custom properties (light-thema), dus we
   overschrijven alleen die variabelen op de magazine-flipbooks — geldt voor
   beide. Iconen/tekst blijven donker (#3a2230 / #4a2b3c) voor leesbaarheid. */
.flipbook-wrap {
    --fb-toolbar-bg: #fdf5fa;
    --fb-toolbar-border: #e7c8da;
    --fb-toolbar-color: #4a2b3c;
    --fb-btn-bg: #f0dbe8;
    --fb-btn-color: #3a2230;
    --fb-btn-hover-bg: #e4bfd5;
    --fb-mode-group-bg: #f5e6ef;
    --fb-mode-btn-hover-bg: #ecd2e2;
    --fb-mode-btn-active-bg: #dca8c6;
    --fb-mini-bg: rgba(248, 236, 242, .85);
    --fb-mini-border: rgba(201, 122, 171, .30);
    --fb-mini-color: #6a4257;
    --fb-fs-nav-bg: rgba(248, 236, 242, .6);
}

/* ──────────────────────────────────────────────────────────────────────────
   /assortiment (niet-ingelogd): het login-blok (.product-overview__login-required,
   framework-gerenderd) als kaart, in lijn met /auth/register (.auth-box): subtiel
   lijntje, witte kaart, afgeronde hoeken, gecentreerd op max-width 420px. Op
   verzoek. NB: de gevraagde titel "Login" hoort ín dit framework-blok maar het
   heeft geen titel-element/CMS-veld → coördinatie-issue voor Ronny (kan niet via
   CSS-content of DOM per teamregels). ────────────────────────────────────────── */
.product-overview__login-required {
    max-width: 420px;
    /* Extra lucht boven+onder zodat de box opvalt (op verzoek). */
    margin: 6rem auto;
    padding: 32px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 8px;
}
.product-overview__login-required p {
    margin: 0 0 20px;
}

/* ──────────────────────────────────────────────────────────────────────────
   FIX horizontale scroll (o.a. /contact): de verborgen native <select> van de
   telefoon-landcode (`.tel select.select`, opacity:0) staat absoluut en 1280px
   breed → stak 692px buiten de pagina en gaf horizontale scroll. `.tel` als
   positioneer-context + de select binnen het veld houden. Framework-component
   (tel-input); dit is een gescopete interim. ──────────────────────────────── */
.tel {
    position: relative;
}
.tel > select.select {
    left: 0;
    right: auto;
    width: 100%;
    max-width: 100%;
}

/* ──────────────────────────────────────────────────────────────────────────
   Magazine flipbooks — nav dichter tegen de pagina's. De flipbook-JS zet de
   wrap op een vaste `height:300px` (inline), maar het boek is lager → letterbox
   (roze gat tussen de pdf-pagina's en de nav). De wrap z'n hoogte om de inhoud
   laten sluiten (stage hugt het boek), zo staat de nav strak onder de pagina's,
   met een beetje roze eronder (padding-bottom). `!important` nodig om de inline
   JS-height te verslaan; fullscreen uitgezonderd (houdt 100vh). ─────────────── */
.flipbook-wrap:not(:fullscreen) {
    /* 2026-08-13 (hersteld): 'height: auto !important' VERWIJDERD - overrulede de
       inline height van de flipbook-JS (data-height op laag 944/946) -> boek klapte in. */
    padding-block: 2rem;
}
/* 2026-08-13 (hersteld): '.flipbook-stage { flex: 0 0 auto }' VERWIJDERD zodat stage meegroeit. */

/* /tips-en-inspiratie (niet-ingelogd): kaars-achtergrond achter het Login-blok
   (productcategory-laag 686). Op verzoek. De StyleCompiler emit geen
   background-image uit het CMS-slot → hier via site.css (assets-host-URL). */
/* ...alleen áchter de Login (uitgelogd). Ingelogd toont laag 686 het
   productoverzicht "Kies je feestfakkel" en moet die WIT zijn → :has() scoping
   op de aanwezigheid van het login-blok. */
.tips-login-background:has(.product-overview__login-required) > .layer__bg {
    background-image: url("https://assets.easyhandling.nl/media/460/website-settings/bg-kaars-effect-03.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* FIX (Firefox) horizontale scroll door full-bleed `width:100vw`-elementen
   (kaart, flipbooks, nieuwsbrief): `vw` rekent in Firefox de scrollbar-breedte
   mee → ~15px overloop rechts. `#main-content` (full-width, bevat alle secties;
   de sticky header staat eráchter/erbuiten) klipt die overloop horizontaal weg.
   `clip` (geen scroll-container) → sticky/verticaal scrollen blijven intact. */
#main-content {
    overflow-x: clip;
}

/* Magazine: titel "Onze magazine's" (laag 944) gecentreerd (op verzoek). */
/* Magazine: titel "Onze magazine's" (laag 944) gecentreerd (hersteld 2026-08-13). */
.magazine-primary .layer__text-col--1 {
    flex-basis: 100%;
    max-width: 100%;
}
.magazine-primary .layer__text-title {
    text-align: center;
}

/* /tips-en-inspiratie: de text_image-foto's (Feestfakkels e.d.) in 4:3
   (op verzoek). Media-box krijgt de ratio; de foto vult 'm met object-fit cover
   (netjes bijgesneden, geen vervorming). */
.text-image__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.text-image__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Algemene voorwaarden: foto bij de START van de tekst i.p.v. verticaal
   gecentreerd (op verzoek). De text_image-grid staat op align-items:center →
   op start zetten voor laag 1234. */
.text-image-wide-layout .layer__text-layout,
.text-image-wide-layout .text-image__grid {
    align-items: start;
}
/* Foto 1/3 - tekst 2/3 (op verzoek). De CMS-dropdown "Tekst kolom breedte"
   biedt alleen 1/2, 1/3-2/3, 3/4 en volledig - geen tekst-2/3. Daarom hier via
   het grid, maar ALLEEN boven de framework-breakpoint (36rem) waar de laag
   2-koloms is; daaronder blijft 'ie gestapeld (basis 1fr). Grid-col 1 = tekst,
   grid-col 2 = foto -> 2fr 1fr. */
@media (min-width: 36rem) {
    .text-image-wide-layout .layer__text-layout,
.text-image-wide-layout .text-image__grid {
        grid-template-columns: 2fr 1fr;
    }
}

/* Privacy statement (laag 1235): zelfde als algemene voorwaarden - foto boven-
   uitgelijnd bij de start van de tekst + verhouding foto 1/3 / tekst 2/3
   (2fr 1fr) boven de 36rem-breakpoint; mobiel gestapeld. */
.text-image-wide-layout .layer__text-layout,
.text-image-wide-layout .text-image__grid {
    align-items: start;
}
@media (min-width: 36rem) {
    .text-image-wide-layout .layer__text-layout,
.text-image-wide-layout .text-image__grid {
        grid-template-columns: 2fr 1fr;
    }
}

/* Disclaimer (laag 1236): idem - foto boven-uitgelijnd + foto 1/3 / tekst 2/3
   (2fr 1fr) boven 36rem; mobiel gestapeld. */
.text-image-wide-layout .layer__text-layout,
.text-image-wide-layout .text-image__grid {
    align-items: start;
}
@media (min-width: 36rem) {
    .text-image-wide-layout .layer__text-layout,
.text-image-wide-layout .text-image__grid {
        grid-template-columns: 2fr 1fr;
    }
}

/* Footer: copyright "(c) 2026 Noorderlichtjes" naar rechts, bij het M-label
   (op verzoek). De credit-onderbalk is space-between: [credit-group: juridische
   links + copyright] | [M-logo]. De groep laten uitrekken en de copyright
   met margin-left:auto naar de rechterkant duwen (tegen het M-logo aan). De
   juridische links blijven links.
   Let op: deze site houdt de © bewust bij het M-logo en volgt dus niet de
   framework-standaard (© in het midden, fw 1.58.1153). */
.site-footer__credit-group {
    flex: 1 1 auto;
}
.site-footer__credit-group .site-footer__copyright {
    margin-left: auto;
}


/* De twee-koloms opzet van het registratieformulier stond hier eerder als
   routegebonden auth-regels. Die zijn vervangen
   door semantische klassen uit auth.css: `auth-box--wide`, `auth-group` en
   `auth-group__grid`, aangestuurd vanuit de markup in src/Auth/LayerAuth.php.

   Drie redenen, alle drie stille breuken:
   - Een route als CSS-selector houdt op te werken zodra de URL verandert.
   - De eerste opzet wees de volle-breedte-rij aan met `.auth-field:first-of-type`,
     dus een veld ertussen schuiven zette de layout ongemerkt scheef.
   - De opvolger gebruikte `:has(input[name="…"])`, en `:has()` ligt onder onze
     Safari-ondergrens (zie framework-CHANGELOG 683): een onbekende pseudo-class
     maakt de héle regel ongeldig, dus daar verdwenen de volle-breedte-velden
     zonder dat je het op je eigen scherm ziet.

   Welk veld de volle breedte krijgt staat nu in de markup (`auth-field--full`),
   en de veldvolgorde is de bronvolgorde — dus die klopt ook voor tab-navigatie
   zonder dat er CSS aan te pas komt. */


/* De subtiele schaduw om text-image-foto's eraf (op verzoek). Framework zet
   `.layer__text-media{box-shadow:var(--shadow-1)}` (layers.css); site.css laadt
   ervoor, dus hogere specificiteit (`.layer .layer__text-media`) om te winnen. */
.layer .layer__text-media {
    box-shadow: none;
}

/* Assortiment (ingelogd): filter-zijbalk een subtiele roze achtergrond
   (--color-bg-soft) als net paneel, met padding + afronding. Op verzoek. De
   witte invoervelden (zoeken/prijs) contrasteren er mooi op. */
.product-overview__filter {
    background: var(--color-bg-soft);
    padding: 1.25rem 1.5rem;
    border-radius: 1rem;
    /* Niet meestrekken met de grid-hoogte: het roze paneel sluit om de eigen
       inhoud (tot de "Wissen"-link), i.p.v. tot onderaan het productgrid. */
    align-self: start;
}

/* Productkaartjes: hele productfoto in het vierkant tonen (niet bijsnijden).
   De media-component staat op object-fit:cover + inset:0 (framework media.css).
   `contain` + inset:6px zodat het beeld zichtbaar terugschaalt binnen het witte
   vlak — er is ruimte rondom het product zichtbaar. */
.product-card__image.media[data-display] .media__viewport > img {
    object-fit: contain;
    inset: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
}
.product-card__image .media__viewport {
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
}

/* Assortiment: titel + webshop uitlijnen met het menu (op verzoek). De
   `.product-overview__head` (titel) en `.product-overview__body` (filters+grid)
   hadden een EXTRA padding-inline van 24px bovenop de laag-container, waardoor
   de inhoud 24px naar binnen stond t.o.v. de header-inhoud. Die extra padding
   eraf -> titel/grid lijnen nu uit met logo/winkelmand (de laag-container geeft
   nog steeds de buitenrand, ook mobiel). */
.layer__product-overview .product-overview__head,
.layer__product-overview .product-overview__body {
    padding-inline: 0;
}

/* Menu-hartje (favorieten, rechtsboven): de framework Feather-heart is vrij
   spits/onrustig op klein formaat. Vervangen door een rondere, nettere outline-
   heart via `mask` + currentColor (past zich aan de icoonkleur aan). Alleen het
   header-favorieten-icoon; de product-kaart-hartjes blijven ongemoeid. Icoon-
   vorm zit in de PHP-renderer (src/), dus dit is een CSS-verfijning. */
a[href="/webshop/favorieten"] .site-nav__cta-icon {
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='green'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center / contain no-repeat;
}
a[href="/webshop/favorieten"] .site-nav__cta-icon > path {
    opacity: 0;
}

/* Paginatie-knopjes (Vorige/Volgende) roze zonder onderstreping (op verzoek);
   waren standaard-blauw met underline. Accent-roze + geen streepje, hover iets
   lichter (hoofdkleur). */
.pagination__prev, .pagination__next, .pagination a {
    color: var(--color-accent);
    text-decoration: none;
}
.pagination__prev:hover, .pagination__next:hover, .pagination a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

/* HERSTELD 13-08-2026: onderstaande regels waren om 14:48 verdwenen doordat
   site.css werd teruggeschreven op een versie van vóór 14:07. Ze komen letterlijk
   terug uit de commits waarin ze gemaakt zijn (99e582c, be3d5cf, 14:21, 14:26, 14:34). */

/* Kaart-link als flex-column + flex-grow: link rekt mee met de kaarthoogte,
   body vult de resterende ruimte -> prijzen en Bekijk-knoppen op gelijke hoogte.
   De link is van nature display:block; flex-grow op de body had geen effect. */
.product-card .product-card__link {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.product-card .product-card__body {
    flex-grow: 1;
    position: relative;
    padding-bottom: 1.75em;
}

/* Titel altijd 2 regels hoog: prijzen op gelijke hoogte ongeacht 1- of
   2-regelige titelnaam. Elke regel ~19px; 2.4em dekt 2 regels + wat marge. */
.product-card .product-card__title {
    min-height: 2.4em;
}

/* Productkaartjes: prijs + eenheid dichter bij elkaar (row-gap 2px). */
.product-card .product-card__price-box {
    row-gap: 2px;
    margin-top: auto;
}
.product-card .product-card__unit {
    margin-top: -5px;
}
/* Branduren uit de flex-flow: absolute op de body-bodem zodat het
   geen ruimte inneemt die de prijs-positie verschuift. padding-bottom
   op de body reserveert consistente ruimte in alle kaarten. */
.product-card .product-card__burn {
    position: absolute;
    bottom: 0;
    left: var(--space-3);
    margin-top: 0;
}

/* Footer-links: klein pijltje (chevron) voor elke link in de footer-kolommen.
   Subtiel accent-roze, schuift iets op bij hover (affordance). */
.site-footer__links-col ul li a::before {
    content: '\203A';
    display: inline-block;
    margin-right: .4em;
    color: var(--color-accent);
    transition: transform .15s ease;
}
.site-footer__links-col ul li a:hover::before {
    transform: translateX(2px);
}


/* "Nieuw"-label op productkaarten: donkerroze + subtiele pulse-animatie. */
@keyframes nieuw-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.product-card.product-card--new::before {
    background-color: #d63384;
    animation: nieuw-pop .5s ease-out .5s both;
}

/* Sitemap: subitems (genest onder een categorie) een dunner fontgewicht dan de
   hoofd-items, voor duidelijke hierarchie (op verzoek). */
.sitemap__list--root ul.sitemap__list--sub .sitemap__link {
    font-weight: 400;
}


/* --- /mijn-account (uitgelogd): kaart-look zoals /auth/register (.auth-box) --- */
.layer__account .account-loggedout {
    max-width: 480px;
    margin: 2rem auto;
    padding: 2rem;
    background: var(--color-bg-elev);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.layer__account .account-loggedout .account-actions {
    margin-top: 1.25rem;
}


/* --- Register: bevestiging (KvK/BTW gevonden) groen i.p.v. rood --- */
.auth-field[data-validate-state="valid"] .auth-field__error {
    color: var(--color-success);
}


/* --- Register: titel 'Account aanmaken' in site-titelstijl (Cormorant Garamond) + spacing --- */
.auth-box__title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 36px;
    font-weight: 300;
    font-style: normal;
    text-transform: none;
    text-decoration: none;
    text-align: start;
    line-height: 1.15;
    margin-top: .25rem;
    margin-bottom: 1.75rem;
}


/* --- Register: ruimte tussen 'Volgende'-knop en 'Al een account? Inloggen' --- */
.auth-box__footer {
    margin-top: 2rem;
}


/* --- Register stap 2: 'Telefoon' over volle breedte --- */
.auth-field:has(input[name="contact_phone"]) {
    grid-column: 1 / -1;
}


/* --- Assortiment productkaartjes: login-knop --- */
/* display:block + text-align:center: de knoptekst (inline) + ::after-pijltje
   (inline-block) stromen samen als één inline-eenheid, text-align centreert die
   eenheid als geheel — zowel Chrome als Firefox. display:flex+justify-content
   gaf cross-browser inconsistentie (space-between vs center). */
.product-card .product-card__price-login {
    margin: auto var(--space-3) 0;
}
.product-card .product-card__price-login-link.button {
    display: block;
    width: 100%;
    text-align: center;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
    color: #411631;
    background: var(--color-bg-soft);
    box-shadow: none;
}
.product-card .product-card__price-login-link.button:hover {
    background: color-mix(in srgb, var(--color-bg-soft) 82%, #e8a0c0);
}
/* Verwijder de spacer-truc (hoort bij de flex-aanpak). */
.product-card .product-card__price-login-link.button::before {
    display: none;
}
/* SVG-pijltje als inline-block na de tekst; stroomt mee in de tekstregel
   zodat text-align:center de tekst+pijl als eenheid centreert.
   vertical-align:-0.1em i.p.v. middle: Firefox berekent middle anders dan
   Chrome (x-height vs halve em-box) → -0.1em is font-relatief en optisch
   gecentreerd in beide engines. */
.product-card .product-card__price-login-link.button::after {
    content: "";
    display: inline-block;
    width: 11px;
    height: 11px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' stroke='%23411631' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 5px;
    vertical-align: -0.1em;
}

/* Bekijk-knop: label + pijltje centreren (pijltje originele grootte). */
.product-card .product-card__detail {
    justify-content: center;
}
}


/* ──────────────────────────────────────────────────────────────────────────
   Regels BUITEN @layer site — nodig om on-layered framework-modules te
   overrulen (layer-sitemap.css is on-layered; @layer site verliest altijd
   van on-layered CSS, ongeacht specificiteit).
   ────────────────────────────────────────────────────────────────────────── */

/* Sitemap in 2 kolommen op desktop (op verzoek). Framework zet `display:flex;
   flex-direction:column` (layer-sitemap.css, on-layered) → moet hier buiten de
   layer staan om te winnen. `break-inside:avoid` houdt een categorie met
   sub-items bij elkaar in dezelfde kolom. Onder 48rem blijft 'ie 1-koloms. */
@media (min-width: 48rem) {
    ul.sitemap__list--root {
        display: block;
        column-count: 2;
        column-gap: 3rem;
        max-width: none;
    }
    ul.sitemap__list--root > .sitemap__item {
        break-inside: avoid;
        margin-bottom: 16px;
    }
}


/* "Nieuw"-label op productkaarten: donkerroze + subtiele pulse-animatie. */
@keyframes nieuw-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.product-card.product-card--new::before {
    background-color: #d63384;
    animation: nieuw-pop .5s ease-out .5s both;
}

/* Sitemap: subitems dunner fontgewicht dan de hoofd-items (op verzoek).
   Framework zet `.sitemap__item > .sitemap__link{font-weight:600}` (on-layered)
   → hogere specificiteit via de sub-lijst-selector. */
.sitemap__list--root .sitemap__list--sub .sitemap__link {
    font-weight: 400;
}

/* Productdetail-galerij: subtiel randje om de hoofdfoto en de thumbnails
   (op verzoek). Framework product-detail.css is on-layered → moet hier staan.
   Zachte lijn (#e8e8e8) past bij de productkaart-border op /assortiment. */
.product-detail__gallery .product-detail__gallery-main {
    border: 1px solid #e8e8e8;
    background-color: #fff;
}
.product-detail__gallery .product-detail__gallery-thumbs {
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
}
.product-detail__gallery .product-detail__gallery-thumbs::-webkit-scrollbar {
    display: none;
}
.product-detail__gallery .product-detail__gallery-thumb {
    border: 1px solid #e8e8e8;
    flex: 0 0 calc(25% - 9px);
    aspect-ratio: 1;
}

/* Thumbnail-navigatie pijltjes (rondje + chevron) */
.gallery-thumbs-wrap {
    position: relative;
}
.gallery-thumb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(0, 0, 0, .12);
    cursor: pointer;
    z-index: 2;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, border-color .2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.gallery-thumb-nav:hover {
    background: #fff;
    border-color: rgba(0, 0, 0, .22);
}
.gallery-thumb-nav--prev { left: -14px; }
.gallery-thumb-nav--next { right: -14px; }
.gallery-thumb-nav svg {
    width: 14px;
    height: 14px;
    stroke: #411631;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Productdetail-galerij: hoofdfoto passend tonen (contain) i.p.v. bijsnijden
   (cover). Framework product-detail.css is on-layered → moet hier staan. */
.product-detail__gallery-main .product-detail__gallery-image {
    object-fit: contain;
}


/* Productdetail: "In winkelmand"-knop — cirkel-plus-icoon voor de tekst.
   product-detail.css is on-layered → moet hier buiten de layer staan. */
.product-detail__add-row .product-detail__add {
    display: inline-flex;
    align-items: center;
    gap: .5em;
}
.product-detail__add-row .product-detail__add::before {
    content: "";
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='16'/%3E%3Cline x1='8' y1='12' x2='16' y2='12'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='16'/%3E%3Cline x1='8' y1='12' x2='16' y2='12'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Productdetail: "In winkelmand"-knop shimmer — subtiele donkerder-roze sweep
   die elke 5s door de achtergrond glijdt. Tekst+icoon blijven staan (::after
   ligt erachter via z-index). Sweep duurt ~1s, daarna 4s pauze. */
.product-detail__add-row .product-detail__add {
    position: relative;
    overflow: hidden;
    z-index: 0;
}
.product-detail__add-row .product-detail__add::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(0,0,0,.09) 45%, rgba(0,0,0,.09) 55%, transparent 70%);
    transform: translateX(-150%);
    animation: btn-shimmer 5s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}
@keyframes btn-shimmer {
    0% { transform: translateX(-150%); }
    30% { transform: translateX(150%); }
    100% { transform: translateX(150%); }
}

/* Productdetailpagina's: uitlijnen met het menu. layer__inner levert al
   max-width + gutter-padding; de child-blokken hoeven geen extra padding.
   product-detail.css is on-layered → moet hier buiten de layer staan.
   `.layer__inner >` = specificiteit 0,2,0 (wint van 0,1,0 in framework). */
.layer__inner > .product-detail__breadcrumbs,
.layer__inner > .product-detail,
.layer__inner > .product-detail__description,
.layer__inner > .product-detail__volume,
.layer__inner > .product-detail__tags {
    padding-inline: 0;
    max-width: none;
}

/* Onlangs bekeken: max 4 items (1 rij) + subtiele roze achtergrond (op verzoek).
   product-detail.css is on-layered → moet hier buiten de layer staan. Full-bleed
   (rand tot rand) via 100vw-truc; kaarten op wit. */
.product-detail__related {
    background-color: var(--color-bg-soft);
    padding-block: 2rem;
    margin-block: 2rem;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: max(2rem, calc(50vw - 38rem + var(--gutter)));
}
.product-detail__related .product-card {
    background: #fff;
    border-radius: .75rem;
    overflow: hidden;
}
.product-detail__related-grid > .product-card:nth-child(n+5) {
    display: none;
}
.product-detail__related.product-detail__related {
    max-width: none;
    margin-inline: calc(50% - 50vw);
    padding-inline: max(2rem, calc(50vw - 38rem + var(--gutter)));
}

/* Overlay-golf onderaan de header (desktop, home + landingspagina + over-ons).
   SVG rekt mee over de volle browserbreedte (preserveAspectRatio="none"). */
@media (min-width: 601px) {
  .layer__hero.hero-wave-standard::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2.5vw;
    background: url('/assets/vector/overlay-wave-1920x48-01.svg') no-repeat bottom / 100% 100%;
    z-index: 3;
    pointer-events: none;
  }
}

/* Overlay-golf onderaan de header (mobiel, home + landingspagina + over-ons, 960x48 SVG). */
@media (max-width: 600px) {
  .layer__hero.hero-wave-standard::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5vw;
    background: url('/assets/vector/overlay-wave-960x48-01.svg') no-repeat bottom / 100% 100%;
    z-index: 3;
    pointer-events: none;
  }
}

/* Hero payoff-half: kolom beperken tot ~50% + verticaal centreren.
   Class via CMS design_layer. Gebruikt op Summertime (2006) en Private label (3341). */
.hero--payoff-half .layer__hero-overlay {
    max-width: min(94%, 640px);
}
.hero--payoff-half .layer__hero-overlay[data-position-vertical="end"] {
    align-self: center;
}

/* Header content omhoog: compensatie voor de wave-overlay */
.layer__hero.hero-wave-standard .layer__hero-overlay {
  padding-bottom: 9em;
}

/* Overlay-golf onderaan de header (desktop, kerstpagina, 1920x48 SVG, fill #411631). */
@media (min-width: 601px) {
  .layer__hero.hero-wave-christmas::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2.5vw;
    background: url('/assets/vector/overlay-wave-1920x48-02.svg') no-repeat bottom / 100% 100%;
    z-index: 3;
    pointer-events: none;
  }
}

/* Overlay-golf onderaan de header (mobiel, kerstpagina, 960x48 SVG, fill #411631). */
@media (max-width: 600px) {
  .layer__hero.hero-wave-christmas::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5vw;
    background: url('/assets/vector/overlay-wave-960x48-02.svg') no-repeat bottom / 100% 100%;
    z-index: 3;
    pointer-events: none;
  }
}

/* Header content omhoog: compensatie wave-overlay (kerstpagina) */
.layer__hero.hero-wave-christmas .layer__hero-overlay {
  padding-bottom: 9em;
}


/* ──────────────────────────────────────────────────────────────────────────
   Checkout (/webshop/checkout) in lijn met de contactpagina
   Age 2026-08-13: zachte roze sectie + witte afgeronde kaarten (formulier-kolom +
   bestel-overzicht) + licht-roze afgeronde invoervelden, zoals /contact.
   Tekstvelden zijn kale <input> (geen class); dropdowns gebruiken .form-field__control.
   ────────────────────────────────────────────────────────────────────────── */
.layer__checkout {
    background: var(--color-bg-soft);
}
.checkout__form-col,
.checkout__summary {
    background: #fff;
    border: 1px solid var(--color-border, rgba(0, 0, 0, .1));
    border-radius: 1.25rem;
    box-shadow: 0 18px 40px -24px rgba(74, 43, 60, .35);
    padding: 1.5rem 1.5rem 1.75rem;
}
.checkout-form input:not([type="checkbox"]):not([type="radio"]),
.checkout-form select,
.checkout-form textarea,
.checkout-form .form-field__control {
    background: #fdf5f9;
    border: 1px solid color-mix(in srgb, var(--color-accent) 28%, #fff);
    border-radius: 14px;
    padding: .85rem 1.1rem;
}
.checkout-form input:not([type="checkbox"]):not([type="radio"]):focus,
.checkout-form select:focus,
.checkout-form textarea:focus {
    border-color: var(--color-accent);
    outline: none;
}


/* Checkout: input- en dropdown-velden op gelijke hoogte (Age 2026-08-14).
   Native <select> (Land) rendert korter dan de inputs en de postcode-input hoger
   (groter font/line-height). min-height + border-box + geen verticale padding zet
   ze allemaal op 48px; tekst blijft verticaal gecentreerd. Textarea uitgezonderd. */
.checkout-form input:not([type="checkbox"]):not([type="radio"]),
.checkout-form select,
.checkout-form .form-field__control:not(textarea) {
    /* Vaste, gelijke hoogte voor ALLE velden (Aanhef/Land renderden korter dan de inputs).
       !important + vaste height overschrijft de nieuwere framework-veldhoogte. Age 2026-08-31. */
    height: 3.5rem !important;
    min-height: 3.5rem !important;
    padding-block: 0 !important;
    box-sizing: border-box !important;
    line-height: 1.2;
}

/* ── Magazine flipbooks roze thema forceren (HERSTELD 2026-08-13; nieuwe library
   @layer+data-theme is un-layered -> !important nodig op de --fb-* variabelen). ── */
.flipbook-wrap {
    --fb-bg: #f6e7ef !important;
    --fb-toolbar-bg: #fdf5fa !important;
    --fb-toolbar-border: #e7c8da !important;
    --fb-toolbar-color: #4a2b3c !important;
    --fb-btn-bg: #f0dbe8 !important;
    --fb-btn-color: #3a2230 !important;
    --fb-btn-hover-bg: #e4bfd5 !important;
    --fb-mode-group-bg: #f3e2ec !important;
    --fb-mode-btn-hover-bg: #e4bfd5 !important;
    --fb-mode-btn-active-bg: #dcb0cd !important;
    --fb-mini-bg: rgba(253, 245, 250, .85) !important;
    --fb-mini-border: rgba(74, 43, 60, .15) !important;
    --fb-mini-color: #4a2b3c !important;
    --fb-fs-nav-bg: rgba(253, 245, 250, .6) !important;
}

/* Prijsberekening-blok (Per verpakking / Totaal): zachte roze achtergrond
   in lijn met onlangs bekeken. product-detail.css is on-layered; dubbele
   klasse voor specificiteit (0,2,0) want site.css laadt voor het framework. */
.product-detail__price-calc.product-detail__price-calc {
    background: var(--color-bg-soft);
    border-color: color-mix(in srgb, var(--color-accent) 18%, transparent);
}

/* Kenmerken-waarden lichter (niet vet) */
.product-detail__specs .product-detail__spec-value {
    font-weight: 400;
}

/* Kruimelpad: pijltjes roze, tekst subtieler, hover roze */
.breadcrumb__item + .breadcrumb__item::before {
    color: var(--color-accent);
}
.breadcrumb__item a {
    color: #999;
}
.breadcrumb__item--current span {
    color: #999;
}
.breadcrumb__item a:hover {
    color: var(--color-accent);
}

/* Winkelwagen: totaalregel-lijn roze */
.basket__totals .basket__totals-row--grand {
    border-top: 2px solid var(--color-accent);
}

/* Bedankt/return-pagina: lijn boven "Totaal" accent-roze i.p.v. donker (op
   verzoek), net als winkelwagen/checkout. Ouder-scope (0,2,0) wint van de
   framework-regel `.order-return__total-row--grand` (0,1,0, laadt na site.css). */
.order-return__totals .order-return__total-row--grand {
    border-top-color: var(--color-accent);
}

/* Winkelwagen: tabelkop-labels roze, sierfont, iets groter */
.layer__basket .basket__th {
    color: var(--color-accent);
    font-family: var(--theme-font-3);
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    text-transform: capitalize;
}

/* Winkelwagen: sidebar-labels (Verzendmethode, Kortingscode) in tabelkop-stijl */
.layer__basket .basket__delivery h2,
.layer__basket .basket__voucher > label {
    color: var(--color-accent);
    font-family: var(--theme-font-3);
    font-size: 30px;
    letter-spacing: 0.02em;
    text-transform: capitalize;
    font-weight: 400;
}

/* Winkelwagen: kolommen Prijs / Aantal / Totaal (kop + celinhoud) op hun
   kolom-midden centreren (op verzoek). Koppen én de qty-stepper zijn breder dan
   de cel-inhoud (overflow) -> padding-inline:0 zodat text-align:center echt
   centreert i.p.v. links pint. Koppen + qty-cel hebben .num nodig (0,3,0) om
   `.basket__items .num{text-align:left}` (0,2,0, laadt na site.css) te verslaan;
   de prijs-/totaal-cellen idem via .num.basket__unit-price / .num.basket__line-total. */
.layer__basket .num.basket__th--unit-price,
.layer__basket .num.basket__th--total,
.layer__basket .num.basket__qty-cell {
    text-align: center;
    padding-inline: 0;
}
.layer__basket .num.basket__unit-price,
.layer__basket .num.basket__line-total {
    text-align: center;
}

/* Winkelwagen: dropdown + kortingscode-input in contactformulier-stijl */
.layer__basket select.basket__delivery-country,
.layer__basket .select-display.basket__delivery-country,
.layer__basket .basket__voucher input[type="text"] {
    background-color: rgb(253, 245, 249);
    border: 1px solid rgb(240, 218, 231);
    border-radius: 14px;
    padding: 12px 16px;
    font-size: 1rem;
}
.layer__basket .basket__voucher-row .button--secondary {
    border-radius: 14px;
    padding: 12px 20px;
}

/* Winkelwagen: "Verder winkelen"-link (incl. pijl-teken) accent-roze i.p.v.
   grijs (op verzoek). De pijl is een tekst-teken, dus color kleurt beide. */
.layer__basket .basket__continue {
    color: var(--color-accent);
}
.layer__basket .basket__continue:hover {
    color: var(--color-primary);
}

/* Winkelwagen: productfoto volledig zichtbaar + subtiel randje.
   .layer__basket prefix = specificiteit (0,2,0) wint van layer-basket.css (0,1,0). */
.layer__basket .basket__item-image {
    object-fit: contain;
    box-sizing: content-box;
    width: 5.5rem;
    min-width: 5.5rem;
    height: 5.5rem;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: var(--ws-input-radius);
    background: #fff;
}
.layer__basket .basket__item-image-cell {
    width: 7.5rem;
    min-width: 7.5rem;
    max-width: none;
    padding: 8px;
}
.layer__basket .basket__item-image-cell > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.5rem;
    height: 5.5rem;
}

/* Winkelwagen: ruimte tussen productfoto en titel (tekst plakte tegen de foto).
   Age 2026-08-14. .layer__basket prefix (0,2,0). */
.layer__basket .basket__item-title-cell {
    padding-inline-start: 1rem;
}

/* Winkelwagen: rechter zijbalk omhoog zodat "Verzendmethode" op de tabelkop-lijn
   valt (baseline gelijk aan Product/Totaal). .layer__basket prefix = 0,2,0. */
.layer__basket .basket__totals {
    margin-top: -18px;
}

/* Winkelwagen: "Doorgaan naar afrekenen"-knop — tekst gecentreerd + pijl rechts
   + subtiele shimmer-sweep (zelfde animatie als "In winkelmand"). */
.layer__basket .basket__checkout {
    justify-content: center;
    gap: .5em;
    position: relative;
    overflow: hidden;
    z-index: 0;
}
.layer__basket .basket__checkout::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(0,0,0,.09) 45%, rgba(0,0,0,.09) 55%, transparent 70%);
    transform: translateX(-150%);
    animation: btn-shimmer 5s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}
.layer__basket .basket__checkout::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Cards-grid: data-cols respecteren (framework emit attribuut, CSS ontbreekt).
   Buiten @layer zodat het de site-layer wint. */
.layer__cards-grid[data-cols="8"] {
    grid-template-columns: repeat(8, 1fr);
}
@media (max-width: 900px) {
    .layer__cards-grid[data-cols="8"] {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width: 560px) {
    .layer__cards-grid[data-cols="8"] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Banner-kaarten: circulaire productfoto's + titel eronder.
   Buiten @layer zodat het de framework-defaults wint. */
:where(.layer--cards .card--banner .card__media) {
    border-radius: 50%;
    background: #f3dfe2;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .10);
    transition: box-shadow .25s ease;
}
:where(.layer--cards .card--banner:hover .card__media) {
    box-shadow: 0 4px 20px rgba(0, 0, 0, .18);
}
:where(.layer--cards .card--banner:hover) {
    box-shadow: none;
    background: transparent;
}
:where(.layer--cards .layer__inner) {
    padding-top: 2.5em;
    padding-bottom: 2em;
}
:where(.layer--cards .card--banner .card__media img) {
    object-fit: cover;
    border-radius: 0;
}
:where(.layer--cards .card--banner .card__title) {
    display: block;
    margin-top: .6em;
    padding: 0;
    font-size: .85rem;
    font-weight: 600;
    color: #264031;
    font-family: 'Inter', sans-serif;
    line-height: 1.3;
}
/* Herfst-winter 'Favorieten'-cards (laag .sda2b31bc99fb): staande beeldverhouding (4:5)
   i.p.v. 4:3, zodat de staande productfoto's volledig en hoger/mooier tonen. Het framework
   zet de card-media-ratio als INLINE style (aspect-ratio:4/3), dus !important is hier de enige
   manier om dat te overrulen (er is geen CMS-veld voor de card-verhouding). Age 2026-08-31. */
.cards-portrait .card--banner .card__media {
    aspect-ratio: 4 / 5 !important;
}
/* kerst-cards-loskoppelen-liggend: de kerst-'Favoriete kaarsen'-laag deelt per ongeluk de style-hash sda2b31bc99fb
   met de herfst-'Favorieten'-laag hierboven, en erfde zo de staande 4:5-verhouding. Op de
   kerst-pagina (marker nl-kerst) koppelen we los: terug naar liggend 4:3 + foto vult de kaart,
   passend bij de liggende 600x450-foto's. Herfst blijft 4:5. Age 2026-08-31. */
/* (regel verwijderd: hield een toevallige hash-botsing tegen die met de klasse
   `cards-portrait` niet meer kan ontstaan — punt 644) */

/* (regel verwijderd: hield een toevallige hash-botsing tegen die met de klasse
   `cards-portrait` niet meer kan ontstaan — punt 644) */


/* USP-titels: groen i.p.v. roze (--color-primary) */
.layer--usps .usp__title {
    color: #264031;
}

/* Kerst-USPs (laag .s725112e2a52f): donkere achtergrond op de kerst-landingspagina, titel moet wit zijn i.p.v. het algemene donkergroen hierboven (anders vrijwel onleesbaar, ~1.3:1 contrast) */
/* (regel verwijderd: die opmaak-hash bestaat nergens meer in de site — punt 635-vervolg) */


/* Kerst-assortiment: 4-koloms landschapskaarten — reset circulaire stijl */
:where(.layer--cards [data-cols="4"] .card--banner .card__media, .layer--cards .carousel__container[data-layout-cols="4"] .card--banner .card__media, .cards-landscape .card--banner .card__media) {
    border-radius: 12px 12px 0 0;
    background: none;
    box-shadow: none;
    width: auto;
    height: auto;
}
:where(.layer--cards [data-cols="4"] .card--banner:hover .card__content, .layer--cards .carousel__container[data-layout-cols="4"] .card--banner:hover .card__content, .cards-landscape .card--banner:hover .card__content) {
    transform: none;
}
:where(.layer--cards [data-cols="4"] .card--banner:hover, .layer--cards .carousel__container[data-layout-cols="4"] .card--banner:hover, .cards-landscape .card--banner:hover) {
    box-shadow: none;
    background: transparent;
}
:where(.layer--cards [data-cols="4"] .card--banner .card__media img, .layer--cards .carousel__container[data-layout-cols="4"] .card--banner .card__media img, .cards-landscape .card--banner .card__media img) {
    border-radius: 0;
    object-fit: cover;
}
:where(.layer--cards [data-cols="4"] .card--banner .card__title, .layer--cards .carousel__container[data-layout-cols="4"] .card--banner .card__title, .cards-landscape .card--banner .card__title) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0;
    padding: .75em 1em;
    background: var(--color-bg, #fff);
    font-size: 1rem;
    font-weight: 600;
    color: #264031;
    font-family: 'Inter', sans-serif;
    line-height: 1.3;
}
:where(.layer--cards [data-cols="4"] .card--banner .card__title, .layer--cards .carousel__container[data-layout-cols="4"] .card--banner .card__title, .cards-landscape .card--banner .card__title)::after {
    content: '\2192';
    display: inline-block;
    margin-left: auto;
    font-size: 1.2em;
    flex-shrink: 0;
    color: #264031;
    transition: transform .25s ease;
}
:where(.layer--cards [data-cols="4"] .card--banner:hover .card__title, .layer--cards .carousel__container[data-layout-cols="4"] .card--banner:hover .card__title, .cards-landscape .card--banner:hover .card__title)::after {
    transform: translateX(4px);
}
/* Home: categorie-cards — kaartopmaak komt uit CMS-designslots. */
.home-category-cards [data-cols="4"] .card--banner .card__content {
    height: 100%;
}
.home-category-cards [data-cols="4"] .card--banner .card__link {
    gap: 0;
    height: 100%;
}
.home-category-cards [data-cols="4"] .card--banner .card__media {
    flex: 0 0 auto;
}
.home-category-cards [data-cols="4"] .card--banner .card__title {
    background: var(--color-bg-soft);
    flex: 1 1 auto;
}

/* Badges: de server levert het label op de kaart als data-attribuut. */
:is(.layer--cards [data-cols="4"], .cards-landscape) .card--banner {
    position: relative;
}
:is(.layer--cards [data-cols="4"], .cards-landscape) .card--banner[data-badge] .card__link {
    position: relative;
}
:is(.layer--cards [data-cols="4"], .cards-landscape) .card--banner[data-badge]::before {
    position: absolute;
    top: .75em;
    left: .75em;
    z-index: 2;
    padding: .3em .9em;
    border-radius: 6px;
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
    background: #d4618c;
    letter-spacing: .02em;
    content: attr(data-badge);
}

/* Verkooppunt-zoeker: titel in de sier-serif (Cormorant Garamond) i.p.v.
   Space Grotesk, in lijn met de overige titels. Age 2026-08-14. */
.store-locator__title {
    font-family: var(--theme-font-3);
}

/* v2 hero (laag 1323) "Kaarsen die ieder kerstpakket bijzonder maken": titel in
   3 nette regels (Kaarsen die ieder / kerstpakket / bijzonder maken) via een
   font-relatieve max-width. Range 6.72em–8.51em (gemeten); 7.5em zit veilig in het
   midden. Schaalt mee met de font-size (responsive), zonder <br> of harde spaties.
   Age 2026-08-14. */.hero-pakket-v2 .layer__hero-title{
    max-width: 7.5em;
    font-size: clamp(2.25rem, 5vw, 4rem);
    line-height: 0.95;
}

/* v2 hero 1323: subtiele donkere overlay op de hero-foto (op verzoek terug). Age 2026-08-14. */.hero-pakket-v2 .layer__hero-body::before{
    background: rgba(0, 0, 0, 0.25);
}


/* Checkout-summary-box in lijn met de winkelmand-box: serif-rose titel + rose totaal-lijn.
   Age 2026-08-14; semantische classes (geen route-selector). */
.checkout__summary .checkout__summary-title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 400;
    font-size: 1.9rem;
    color: var(--color-accent);
}
.checkout__summary .checkout__summary-total-row--grand {
    border-top-color: var(--color-accent);
}


/* Checkout 'Plaats bestelling'-knop: zelfde shimmer-animatie + pijl als de winkelmand-knop
   (.basket__checkout). Hergebruikt @keyframes btn-shimmer. Age 2026-08-14; semantische classes. */
.layer__checkout .checkout-form__submit {
    justify-content: center;
    gap: .5em;
    position: relative;
    overflow: hidden;
    z-index: 0;
}
.layer__checkout .checkout-form__submit::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(0,0,0,.09) 45%, rgba(0,0,0,.09) 55%, transparent 70%);
    transform: translateX(-150%);
    animation: btn-shimmer 5s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}
.layer__checkout .checkout-form__submit::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Kerst-hero: gradient i.p.v. donkere gloed */
.hero-landing-gradient .layer__hero-body::before {
    background: linear-gradient(to right,
        rgba(58, 21, 32, 0.92) 0%,
        rgba(58, 21, 32, 0.82) 35%,
        rgba(58, 21, 32, 0.45) 52%,
        rgba(58, 21, 32, 0) 68%);
}
/* route-onafhankelijk: witte hero-tekst op de donkere gradient (beide landing-hero's) */
.hero-landing-gradient .layer__hero-title,
.hero-landing-gradient .layer__hero-title mark,
.hero-landing-gradient .layer__hero-subtitle {
    color: #fff;
}
.hero-landing-gradient .layer__hero-overlay {
    /* Kerst-hero: bredere, niet-inklappende tekstkolom zodat de titel op 2 regels valt (was 45%) */
    max-width: min(94%, 40rem);
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}
/* Kerst-hero: regels gelijkmatig verdelen -> 'Unieke kerstkaarsen' op regel 1, 'met een sterk verhaal' op regel 2 */
.hero-landing-gradient .layer__hero-title {
    text-wrap: balance;
}
.hero-landing-gradient .layer__hero-subtitle {
    font-size: 16px;
    line-height: 1.5;
}

/* Kerst-hero: geen tekst-schaduw op de hero-tekst (op verzoek). Age 2026-08-14. */
.hero-landing-gradient .layer__hero-overlay,
.hero-landing-gradient .layer__hero-title,
.hero-landing-gradient .layer__hero-subtitle {
    text-shadow: none;
}


/* Kerst-hero: titel + tekst groen */


/* Checkout '<- Terug naar winkelmand'-link + pijl (de pijl is tekst) rose i.p.v. gedempt grijs.
   Age 2026-08-14; semantische classes, geen route/id. */
.layer__checkout .checkout__back {
    color: var(--color-accent);
}

/* Kerst-hero: titel regelafstand strakker */
.hero-landing-gradient .layer__hero-title {
    line-height: 1.05;
}


/* Kerst-hero: regelafstand strakker + Word-klant-knop groen */
.hero-landing-gradient .layer__hero-title {
    line-height: 0.95;
}
.hero-landing-gradient .layer__hero-buttons .button--secondary {
    background: #264031;
    color: #fff;
    border-color: #264031;
}


/* Kerst-hero: content verticaal centreren */
.hero-landing-gradient .layer__hero-overlay {
    align-self: center;
}
/* Golf ook onderaan de warme-kerst-hero (1360), zodat de donkerroze cards-band een
   golvende bovenrand krijgt. Deelt dezelfde golf-SVG's als de cards-golf hieronder. */
.hero-landing-gradient .layer__hero-body {
    position: relative;
}

.hero-landing-gradient + .layer--cards::after,
.hero-landing-gradient .layer__hero-body::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 48px;
    background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIGlkPSJ1dWlkLTI5NjI3NjA5LWJjNWQtNGE1Ny1iMDNlLTZmZmU0ZDIxYmQ0OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTkyMCA0OCI+PGRlZnM+PHN0eWxlPi51dWlkLTU4OGFlYWJjLTE5YWQtNDcyMy1iZDlmLTYyNjhlNTM3ZjE4YntmaWxsOiNlOGEwYzA7fTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJ1dWlkLTU4OGFlYWJjLTE5YWQtNDcyMy1iZDlmLTYyNjhlNTM3ZjE4YiIgZD0iTS0zLDUxaDE5MjUuODZWOC43NWMtLjA0LTEuNjctLjY5LTIuOTYtMi41LTMuMzdsLS4yNC0uMDZjLTEuOTctLjI1LTMuODktLjMtNS43Ny0uMi0xLjQ4LjQ5LTMuMTQuODctNC45OSwxLjEyLTguODYsMS44Ny0xNy4wOCw2LjI0LTI0LjUyLDExLjE0LTUuMDgsMy43Mi0xMC42NSw2LjcyLTE2LjUsOC45OC0xLjI2LjUyLTIuNTMsMS0zLjgxLDEuNC01LjQ4LDEuODEtMTEuMDcsMi44OC0xNi42NiwzLjI5LS4xMSwwLS4yMi4wMS0uMzMuMDItLjQuMDMtLjguMDYtMS4yLjA4LTEyLjc1Ljc4LTI1LjY0LTEuOC0zNi44OS04LjExLS4yOS0uMTgtLjU4LS4zNi0uODYtLjU0LTMuNTYtMS45MS02Ljk4LTQuMTMtMTAuMjMtNi42My03Ljg3LTUuMDItMTYuMDgtOS40Mi0yNS44OS05LjU4LTEzLjQ3LTEuMjUtMjUuMDEsNi4wNy0zNS41MSwxMy4zMS01LjA3LDMuNjMtMTAuNzQsNi41NS0xNi42OSw4LjUxLTcuNzYsMi45Ny0xNC45MSwzLjU3LTIxLjY5LDIuNi02LjAzLS41OS0xMS45Ni0yLjM2LTE3LjQ4LTUuNTMtMS40NS0uODEtMi44OC0xLjY1LTQuMzEtMi41LTMuNDYtMS45MS02Ljg5LTQtMTAuMzItNi4xNi05LjUxLTUuNTItMTkuMjktMTAuMjQtMzAuNjYtMTAuNDgtMjQuMjEtMS44Ni0zNC42OSw5LjY3LTUwLjMzLDE3LjgxLTQuMjcsMi4zMi04Ljc4LDQuMjQtMTQuMTMsNS41MS0uODcuMjItMS43Ni40NC0yLjY4LjYzLTQuMjYuOTItOC41OCwxLjExLTEyLjg2LjczLS4xMSwwLS4yMi0uMDItLjMyLS4wMy0uNTEtLjA1LTEuMDItLjEtMS41My0uMTYtMy45My0uNDktNy44LTEuNDctMTEuNTItMi44OS0zLjgyLTEuNDItNy41LTMuMjYtMTAuOTUtNS40MS05LjM5LTUuOTktMTYuNDItMTIuMTEtMjYuOTktMTQuNi0yNS43Ni03LjM4LTQwLjI0LDkuMDEtNTkuMDMsMTcuODQtLjYzLjMzLTEuMjYuNjYtMS45MS45OC0yLjM4LDEuMDMtNC44MiwxLjg2LTcuMzIsMi41LTMuNDEuOTUtNy4wMSwxLjU1LTEwLjg3LDEuNjYtNS4yNC4yNS05Ljk2LS4yMy0xNC4zMS0xLjIyLS4wMSwwLS4wMywwLS4wNCwwLS4yNC0uMDYtLjQ4LS4xMS0uNzItLjE3LTIuMjQtLjUtNC40NS0xLjEyLTYuNi0xLjg4LTIuNDYtLjk3LTQuODYtMi4xNy03LjI0LTMuNS0yMS45NS0xMS41NC0zNS45Ni0zMS40Ny03Mi42NS04LjUxLTQuODMsMy41OS0xMCw2LjY4LTE1LjM5LDkuMTUtNy4yNCwzLjY4LTE1LjQ2LDUuODYtMjMuNzYsNi40Ni0xMC45NC45NC0yMi4wNi0uOTQtMzIuNTMtNi40OC0xMi4wNy01LjkzLTIzLjQyLTE1LjY1LTM2LjcxLTE3Ljc2LTEzLjEzLTEuOTctMjYuNzksMi43My0zNy43NCwxMC4wMS0zLjQ1LDIuNTEtNy4wMSw0Ljg3LTEwLjcxLDYuOTQtMS4wMS42MS0yLjAyLDEuMi0zLjA3LDEuNzUtMy4yNywxLjU3LTYuNDUsMi43OS05LjUzLDMuNy0uMDIsMC0uMDQuMDEtLjA3LjAyLTkuODMsMi45LTE4Ljc4LDIuNzEtMjcuMjIuODEtMzAuNzEtNi40Mi01NC40OC0zNC45My04OS4zOC0yMC45Mi0xMS4wOSwzLjQ4LTIwLjkzLDEwLjE1LTMxLjAzLDE1LjI1LTEyLjYxLDYuMTMtMjcuNzcsOC44LTQxLjUsNi4wMS04LjQ1LTEuNzItMTYuNC00LjY0LTI0LjA3LTguNzktOS40NC01LjI4LTE3Ljk4LTEyLjI2LTI4LjIyLTE0LjI1LTIxLjU2LTUuMDctMzUuMjQsNi40LTUxLjExLDE1LjE4LTIuODIsMS42Ny01LjY5LDMuMjEtOC42OSw0LjQ0LTcuNjMsMy41Ny0xNS4wNSw0LjQyLTIyLjI2LDMuNTYtMzEuNzYtMy4xNS01Mi4zNC0zOS4zNC05MS43NC0yMC4zNS03LjM0LDMuMjktMTMuODMsOC44OS0yMC40MiwxMy4zMy0uMDYuMDQtLjExLjA5LS4xNy4xMy0uMDQuMDItLjA4LjA0LS4xMi4wNy0uMi4xNC0uNC4yNy0uNjEuNDEtMy4yOCwyLjE1LTcuMzksMy42LTExLjgxLDQuNjMtMy4zMi44OC02Ljc5LDEuNS0xMC4zLDEuODItMTEuMjEsMS40Ny0yMi4zNS0xLjI3LTMyLjEtNi40My05LjEzLTQuOTEtMTcuMTUtMTEuMjgtMjcuMjMtMTUuMDUtMTQuMjUtNi4wOS0zMC4zNy0yLjI1LTQzLjEyLDUuNC01LjA0LDMuMzktMTAuNDIsNi41NS0xNS45NSw5LjItMy4xOSwxLjY4LTYuNDksMy4xNi05Ljk5LDQuMjYtMi4zMS43NC00LjcsMS4zNi03LjE1LDEuODUtOC4wNywxLjgyLTE2LjQ1LDIuMTMtMjUuMDMuMTktMTkuNDgtNC4zNy00Mi4xMy0yNS4yNi02Mi4xMy0yNS4yNi0xNC45My0uNDgtMjcuNTgsNy4xNy00MC41OCwxMy42OC0xNy40OCw4LjIzLTM2LjUxLDE1LjYzLTU2LjI4LDExLjktMTAuNjQtMS44MS0yMC42LTYuMS0zMC4yNi0xMS4wNi0xMS42LTUuOTctMjIuNTMtMTMuMTEtMzYuMTItMTMtMTMuMjQtLjIxLTI1LjMsNS4wOS0zNi4yOCwxMS43OS0xMS4zOCw2LjkzLTI0LjM0LDEyLjIyLTM3LjgsMTIuODYtNi4wMi40Mi0xMS44NS0uMjYtMTcuNTItMS42My0uMzEtLjA3LS42Mi0uMTUtLjkzLS4yMy0uNS0uMTMtMS4wMS0uMjYtMS41MS0uNC0uNTMtLjE1LTEuMDYtLjMxLTEuNTktLjQ3LTkuNjctMi45Mi0xOC44OS03LjY3LTI3LjgzLTEyLjMyLS40OS0uMjUtLjk3LS40OC0xLjQ2LS43MS00LjY0LTIuMTQtOS4zLTQuMTItMTQuMDEtNS42OS0xNS43MS00Ljk0LTI5LjMzLTMuODMtNDQuNTMsMy41LTQuMDYsMi4yNS04LjA0LDQuNi0xMi4wNSw2Ljg1LS44Ni41Ni0xLjc0LDEuMTQtMi42MiwxLjczLTE3LjU3LDkuODEtMzEuNjEsMTEuMzYtNDMuNyw5LjAzLTYuMjktLjk5LTEyLjItMy40LTE3Ljk2LTYuMzhDMzIuMywxNS4zLDE3Ljc5LDIuMTgtMS4yMiw1LjY0Yy0xLjIzLjctMS42NiwxLjk5LTEuNzcsMy4zOCwwLC42OCwwLDEuNDYsMCwyLjMxdjM5LjY4WiIvPjwvc3ZnPg==") no-repeat bottom center;
    background-size: 100% 100%;
    z-index: 2;
    pointer-events: none;
}
@media (max-width: 960px) {
    
    .hero-landing-gradient + .layer--cards::after,
    .hero-landing-gradient .layer__hero-body::after {
        background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIGlkPSJ1dWlkLTE1MjgyNjE3LWY1NGItNDRlMS05MDczLTUwMzYwYmNiNzQ3ZCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgOTYwIDQ4Ij48ZGVmcz48c3R5bGU+LnV1aWQtOTZjNGQ2NDYtYzY5YS00YTA1LWI5MTItMzVkYjA3ODIwYTFhe2ZpbGw6I2U4YTBjMDt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9InV1aWQtOTZjNGQ2NDYtYzY5YS00YTA1LWI5MTItMzVkYjA3ODIwYTFhIiBkPSJNLTQ4Myw1MWgxOTI1Ljg2VjguNzVjLS4wNC0xLjY3LS42OS0yLjk2LTIuNS0zLjM3bC0uMjQtLjA2Yy0xLjk3LS4yNS0zLjg5LS4zLTUuNzctLjItMS40OC40OS0zLjE0Ljg3LTQuOTksMS4xMi04Ljg2LDEuODctMTcuMDgsNi4yNC0yNC41MiwxMS4xNC01LjA0LDMuNzItMTAuNjUsNi43Mi0xNi41LDguOTgtMS4yNi41Mi0yLjUzLDEtMy44MSwxLjQtNS40OCwxLjgxLTExLjA3LDIuODgtMTYuNjYsMy4yOS0uMTEsMC0uMjIuMDEtLjMzLjAyLS40LjAzLS44LjA2LTEuMi4wOC0xMi43NS43OC0yNS42NC0xLjgtMzYuODktOC4xMS0uMjktLjE4LS41OC0uMzYtLjg2LS41NC0zLjU2LTEuOTEtNi45OC00LjEzLTEwLjIzLTYuNjMtNy44Ny01LjAyLTE2LjA4LTkuNDItMjUuODktOS41OC0xMy40Ny0xLjI1LTI1LjAxLDYuMDctMzUuNTEsMTMuMzEtNS4wNywzLjYzLTEwLjc0LDYuNTUtMTYuNjksOC41MS03Ljc2LDIuOTctMTQuOTEsMy41Ny0yMS42OSwyLjYtNi4wMy0uNTktMTEuOTYtMi4zNi0xNy40OC01LjUzLTEuNDUtLjgxLTIuODgtMS42NS00LjMxLTIuNS0zLjQ2LTEuOTEtNi44OS00LTEwLjMyLTYuMTYtOS41MS01LjUyLTE5LjI5LTEwLjI0LTMwLjY2LTEwLjQ4LTI0LjIxLTEuODYtMzQuNjksOS42Ny01MC4zMywxNy44MS00LjI3LDIuMzItOC43OCw0LjI0LTE0LjEzLDUuNTEtLjg3LjIyLTEuNzYuNDQtMi42OC42My00LjI2LjkyLTguNTgsMS4xMS0xMi44Ni43My0uMTEsMC0uMjItLjAyLS4zMi0uMDMtLjUxLS4wNS0xLjAyLS4xLTEuNTMtLjE2LTMuOTMtLjQ5LTcuOC0xLjQ3LTExLjUyLTIuODktMy44Mi0xLjQyLTcuNS0zLjI2LTEwLjk1LTUuNDEtOS4zOS01Ljk5LTE2LjQyLTEyLjExLTI2Ljk5LTE0LjYtMjUuNzYtNy4zOC00MC4yNCw5LjAxLTU5LjAzLDE3Ljg0LS42My4zMy0xLjI2LjY2LTEuOTEuOTgtMi4zOCwxLjAzLTQuODIsMS44Ni03LjMyLDIuNS0zLjQxLjk1LTcuMDEsMS41NS0xMC44NywxLjY2LTUuMjQuMjUtOS45Ni0uMjMtMTQuMzEtMS4yMi0uMDEsMC0uMDMsMC0uMDQsMC0uMjQtLjA2LS40OC0uMTEtLjcyLS4xNy0yLjI0LS41LTQuNDUtMS4xMi02LjYtMS44OC0yLjQ2LS45Ny00Ljg2LTIuMTctNy4yNC0zLjUtMjEuOTUtMTEuNTQtMzUuOTYtMzEuNDctNzIuNjUtOC41MS00LjgzLDMuNTktMTAsNi42OC0xNS4zOSw5LjE1LTcuMjQsMy42OC0xNS40Niw1Ljg2LTIzLjc2LDYuNDYtMTAuOTQuOTQtMjIuMDYtLjk0LTMyLjUzLTYuNDgtMTIuMDctNS45My0yMy40Mi0xNS42NS0zNi43MS0xNy43Ni0xMy4xMy0xLjk3LTI2Ljc5LDIuNzMtMzcuNzQsMTAuMDEtMy40NSwyLjUxLTcuMDEsNC44Ny0xMC43MSw2Ljk0LTEuMDEuNjEtMi4wMiwxLjItMy4wNywxLjc1LTMuMjcsMS41Ny02LjQ1LDIuNzktOS41MywzLjctLjAyLDAtLjA0LjAxLS4wNy4wMi05LjgzLDIuOS0xOC43OCwyLjcxLTI3LjIyLjgxLTMwLjcxLTYuNDItNTQuNDgtMzQuOTMtODkuMzgtMjAuOTItMTEuMDksMy40OC0yMC45MywxMC4xNS0zMS4wMywxNS4yNS0xMi42MSw2LjEzLTI3Ljc3LDguOC00MS41LDYuMDEtOC40NS0xLjcyLTE2LjQtNC42NC0yNC4wNy04Ljc5LTkuNDQtNS4yOC0xNy45OC0xMi4yNi0yOC4yMi0xNC4yNS0yMS41Ni01LjA3LTM1LjI0LDYuNC01MS4xMSwxNS4xOC0yLjgyLDEuNjctNS42OSwzLjIxLTguNjksNC40NC03LjYzLDMuNTctMTUuMDUsNC40Mi0yMi4yNiwzLjU2LTMxLjc2LTMuMTUtNTIuMzQtMzkuMzQtOTEuNzQtMjAuMzUtNy4zNCwzLjI5LTEzLjgzLDguODktMjAuNDIsMTMuMzMtLjA2LjA0LS4xMS4wOS0uMTcuMTMtLjA0LjAyLS4wOC4wNC0uMTIuMDctLjIuMTQtLjQuMjctLjYxLjQxLTMuMjgsMi4xNS03LjM5LDMuNi0xMS44MSw0LjYzLTMuMzIuODgtNi43OSwxLjUtMTAuMywxLjgyLTExLjIxLDEuNDctMjIuMzUtMS4yNy0zMi4xLTYuNDMtOS4xMy00LjkxLTE3LjE1LTExLjI4LTI3LjIzLTE1LjA1LTE0LjI1LTYuMDktMzAuMzctMi4yNS00My4xMiw1LjQtNS4wOCwzLjM5LTEwLjQyLDYuNTUtMTUuOTUsOS4yLTMuMTksMS42OC02LjQ5LDMuMTYtOS45OSw0LjI2LTIuMzEuNzQtNC43LDEuMzYtNy4xNSwxLjg1LTguMDcsMS44Mi0xNi40NSwyLjEzLTI1LjAzLjE5LTE5LjQ4LTQuMzctNDIuMTMtMjUuMjYtNjIuMTMtMjUuMjZjLTE0LjkzLS40OC0yNy41OCw3LjE3LTQwLjU4LDEzLjY4LTE3LjQ4LDguMjMtMzYuNTEsMTUuNjMtNTYuMjgsMTEuOS0xMC42NC0xLjgxLTIwLjYtNi4xLTMwLjI2LTExLjA2LTExLjYtNS45Ny0yMi41My0xMy4xMS0zNi4xMi0xMy0xMy4yNC0uMjEtMjUuMyw1LjA5LTM2LjI4LDExLjc5LTExLjM4LDYuOTMtMjQuMzQsMTIuMjItMzcuOCwxMi44Ni02LjAyLjQyLTExLjg1LS4yNi0xNy41Mi0xLjYzLS4zMS0uMDctLjYyLS4xNS0uOTMtLjIzLS41LS4xMy0xLjAxLS4yNi0xLjUxLS40LS41My0uMTUtMS4wNi0uMzEtMS41OS0uNDctOS42Ny0yLjkyLTE4Ljg5LTcuNjctMjcuODMtMTIuMzItLjQ5LS4yNS0uOTctLjQ4LTEuNDYtLjcxLTQuNjQtMi4xNC05LjMtNC4xMi0xNC4wMS01LjY5LTE1LjcxLTQuOTQtMjkuMzMtMy44My00NC41MywzLjUtNC4wNiwyLjI1LTguMDQsNC42LTEyLjA1LDYuODUtLjg2LjU2LTEuNzQsMS4xNC0yLjYyLDEuNzMtMTcuNTcsOS44MS0zMS42MSwxMS4zNi00My43LDkuMDMtNi4yOS0uOTktMTIuMi0zLjQtMTcuOTYtNi4zOC0xNy42MS04Ljc0LTMyLjEyLTIxLjktNTEuMTMtMTguNDQtMS4yMy43LTEuNjYsMS45OS0xLjc3LDMuMzgsMCwuNjgsMCwxLjQ2LDAsMi4zMXYzOS42OFoiLz48L3N2Zz4=");
    }
}

/* ss02: minder roze ruimte onder de cards-band — golf-hoogte op de cards kleiner
   (de hero-wave blijft 48px). ss03: witruimte tussen kerstpakket-hero en de
   Favoriete-kaarsen-sectie weg + ruimte boven die sectietitel weg. Age 2026-08-14. */

.hero-landing-gradient + .layer--cards::after {
    height: 24px;
}
/* ══ EINDE V2 HERO RESPONSIVE FIX ══ */

/* Home: "Zoek een categorie"-sectie (laag 1279) — boven/onder-ruimte in balans
   (was 72px boven / 32px onder -> 56/56). Age 2026-08-14. */
.home-category-cards {
    padding-top: 24px;
    padding-bottom: 24px;
}
.home-category-cards .layer__inner {
    padding-top: 32px;
    padding-bottom: 32px;
}

/* Home 'Zoek een categorie': "Zoeken"-knop even hoog als het inputveld (54px). */
.home-category-cards .layer__cards-search .button--primary {
    min-height: 54px;
}

/* Buiten @layer site: voetmenu-assortiment-links niet op 2 regels.
   De framework-regel (.site-footer__links auto-fit, @layer site) maakt 3 gelijke kolommen
   van ~219px; de langste links (~245px incl. chevron) breken dan af. Kolommen op inhoud
   laten meten lost dat op. Bewust ongelaagd zodat het de @layer-site-regel wint (geen !important). */
@media (min-width: 48rem) {
    .site-footer .site-footer__links {
        grid-template-columns: repeat(3, minmax(max-content, 1fr));
    }
    /* Kop-loze vervolgkolom (2e helft van een lange lijst, bv. Assortiment) uitlijnen
       met de kolommen die wel een .site-footer__col-title hebben: reserveer een kop-regel. */
    .site-footer__links-col:where(:not(:has(.site-footer__col-title)))::before {
        content: "";
        display: block;
        height: 1.6em;          /* regelhoogte van .site-footer__col-title */
        margin-bottom: .75rem;  /* marge van .site-footer__col-title */
    }
}

/* Kerst-hero (v2): titelgrootte pinnen (buiten @layer) zodat hij wint van de per-browser
   wisselende font-size-regels (.layer__hero-title clamp vs 7.6vw). Anders rendert Firefox de
   titel groter dan Chrome en past 'Unieke kerstkaarsen' niet meer op regel 1. */
.hero-landing-gradient .layer__hero-title {
    font-size: clamp(2.25rem, 5vw, 4rem);
    text-wrap: balance;
}

/* De badge-pulse wordt door custom.js gestart zodra de kaart in beeld komt. */
.product-card.product-card--new::before {
    animation: none;
}
.product-card.product-card--new.is-in-view::before {
    animation: nieuw-pop .5s ease-out .5s both;
}

/* Landing-teaser product-cards (in een .layer--cards): geen status-badge (Nieuw/Sale) in de hoek.
   Die badge hoort in de webshop-grid (.layer__product-overview), niet op deze losse teasers.
   Alleen cards binnen een cards-laag; de shop-grid blijft dus ongemoeid. */
.layer--cards .card--product .product-card--new::before,
.layer--cards .card--product .product-card--sale::before {
    content: none;
}
.layer--cards .card--product [class*="product-card__badge"] {
    display: none;
}
/* Zoekveld voor het categorie-overzicht. */
.layer__cards-search {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: .75rem;
    max-width: 42rem;
    margin: 0 auto 2rem;
}

.layer__cards-search-label {
    flex: 1 1 18rem;
}

.layer__cards-search-label span {
    display: none;
}

.layer__cards-search-input {
    background: #fdf5f9;
    border: 1px solid #f0dae7;
    border-radius: 14px;
    padding: 16px 17.6px;
    font-size: 16px;
    height: 54px;
    font-family: Inter, system-ui, sans-serif;
    box-sizing: border-box;
    width: 100%;
}
@media (max-width: 600px) {
}
/* Herfst-winter COLLECTIEBLOK (laag 1483): witte tekst op donkere achtergrond.
   Achtergrondkleur komt uit CMS design_layer; tekst-slots renderen niet (geen
   data-ds op dit layer-type), dus kleur via CSS op de scope-hash. */
/* (regel verwijderd: die opmaak-hash bestaat nergens meer in de site — punt 635-vervolg) */

/* (regel verwijderd: die opmaak-hash bestaat nergens meer in de site — punt 635-vervolg) */


/* Header-logo wit op de roze header (aparte regel; blijft staan als de interim --logo eruit gaat) */
.site-logo__mark {
    background-color: #fff;
}

/* Assortiment: productenteller in het sierfont + roze, iets groter */
.product-overview__count {
    font-family: var(--theme-font-3);
    color: var(--color-accent);
    font-size: 1.75rem;
    font-weight: 600;
}

/* Assortiment: "Sorteren"-label roze (alleen het label, niet de dropdown) */
.product-overview__sort-label > span {
    color: var(--color-accent);
}
@media (max-width: 600px) {
}

/* Assortiment USP-strip (laag 1580) compact onder het menu: kleine iconen, 1 regel, gecentreerd, hoogte <= menu.
   Achtergrond (subtiel roze) staat via de CMS-opmaak op deze laag (hash s4d1f7ed8fca7). */
.usp-strip-compact.layer--usps {
    padding-top: .85rem;
    padding-bottom: .85rem;
}
/* De strip vult de leescontainer (1216px) van rand tot rand met `space-between`, in plaats
   van vier gelijke kolommen met gecentreerde USP's. De breedte blijft wel gemaximeerd op
   1216px, gelijk aan de rest van de pagina-inhoud; de roze band eromheen loopt door tot de
   schermrand. (Verzoek Age, 31-08.) */
.usp-strip-compact .layer__usps-list {
    max-width: 1216px;
    /* Het aantal kolommen volgt de inhoud, niet een vast getal. Hier stond
       `repeat(4, auto)`: bij drie USP's bleef de vierde kolom leeg en klonterden ze
       naar links, bij vijf viel de laatste op een tweede regel. `grid-auto-flow:
       column` maakt precies zoveel kolommen als er items zijn, en `space-between`
       verdeelt die over de volle breedte — ongeacht of het er drie, vier of zes zijn. */
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    justify-content: space-between;
    align-items: center;
    gap: 2.75rem;
    row-gap: 0;
    margin-left: auto;
    margin-right: auto;
}
/* Drie klassen en niet twee: de sitebrede regel `.layer--usps .usp { align-items: start }`
   (usp-iconen-top-uitlijnen, op verzoek sitebreed gezet, 31-08) staat verderop in dit bestand
   en won op bronvolgorde — het icoon kwam dus bovenaan te staan in plaats van naast de tekst.
   In deze compacte strip staat alles op één regel naast elkaar en hoort het gecentreerd. */
.layer--usps.usp-strip-compact .usp {
    display: flex;
    align-items: center;
    gap: .5rem;
    grid-template-columns: none;
    grid-template-rows: none;
}
.usp-strip-compact .usp__icon,
.usp-strip-compact .usp__icon .media__viewport,
.usp-strip-compact .usp__icon img {
    width: 30px;
    height: 30px;
    min-width: 30px;
}
.usp-strip-compact .usp__title {
    font-family: Inter, system-ui, sans-serif;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
    margin: 0;
    color: #411631;
}
/* F483: bij 640px stopte deze regel, maar `repeat(4, auto)` + non-wrappende titels
   passen pas boven ~1000px echt op één rij — tablet (768px) viel in het gat ertussen:
   geen scroll (overflow-x bleef `visible`, de default), dus het 4e item viel gewoon
   van het canvas. Breakpoint naar 900px zodat tablet ook de scrollbare variant krijgt.
   Op mobiel/tablet ook een schaduw-fade rechts + scroll-snap, want horizontaal scrollen
   zonder enige aanwijzing dat er meer staat is zelf ook een bekende UX-valkuil
   (precies wat hier gemeld werd: "2 van de 4 zichtbaar" terwijl scrollen al kon). */
@media (max-width: 900px) {
    .usp-strip-compact {
        position: relative;
    }
    .usp-strip-compact .layer__usps-list {
        justify-content: flex-start;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        gap: 1.5rem;
        -webkit-overflow-scrolling: touch;
    }
    .usp-strip-compact .usp {
        scroll-snap-align: start;
    }
    /* Fade rechts als visuele hint dat de rij doorloopt; verdwijnt vanzelf als de
       rij helemaal in beeld past. Kleur = de subtiel-roze achtergrond die via de
       CMS-opmaak op déze laag staat (design_layer, hash s4d1f7ed8fca7) -- niet
       een generieke site-achtergrondvariabele, want die wijkt hier bewust af. */
    .usp-strip-compact::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 2rem;
        pointer-events: none;
        background: linear-gradient(to right, transparent, #fdf6f9);
    }
}


/* Voetmenu mobiel: footer-links onder elkaar (1 kolom), zodat de over 2 sub-kolommen gesplitste
   Assortiment-lijst als 1 doorlopende lijst aansluit. Boven 48rem geldt de 3-koloms-desktopregel. */
@media (max-width: 48rem) {
    .site-footer .site-footer__links {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   ROUTE-ONAFHANKELIJKE landing-opmaak — werkt op kerst-kerstpakketten, herfst-winter,
   v2 én toekomstige DUPLICATEN/HERNOEMDE pagina's. Geen data-route, geen data-layer-id.
   Ankers (blijven bij dupliceren/verplaatsen/hernoemen behouden):
     • hoofd-hero  = .sbbb7988b180f    -> Greep-cards = .sbbb7988b180f + .layer--cards
     • pakket-hero = .s1d5fde833c0c    -> Favoriete-cards = .s1d5fde833c0c + .layer--cards
     • knoppen-slot = .s4bca8c325081
   Centrering staat óók in het CMS (title_alignment=center); dit is de betrouwbare backup.
   Age 2026-08-20. Terug te draaien: verwijder dit blok.
   ══════════════════════════════════════════════════════════════════════════ */
.hero-landing-gradient + .layer--cards {
    position: relative;
    padding-bottom: 24px;
    background: #e8a0c0;
}
.hero-landing-gradient + .layer--cards > .layer__bg {
    background: #e8a0c0;
}
.hero-landing-gradient + .layer--cards .layer__cards-title {
    color: #fff;
}
.hero-landing-gradient + :where(.layer--cards .card--banner .card__content) {
    height: 100%;
}
.hero-landing-gradient + .layer--cards .card--banner .card__link {
    gap: 0;
    height: 100%;
}
.hero-landing-gradient + .layer--cards .card--banner .card__media {
    flex: 0 0 auto;
}
.hero-landing-gradient + .layer--cards .card--banner .card__title {
    background: #fff;
    flex: 1 1 auto;
}.hero-landing-gradient + .layer--cards .layer__cards-title, .hero-pakket-v2 + .layer--cards .layer__cards-title{
    text-align: center;
}
.hero-landing-gradient .layer__hero-overlay {
    padding-top: 40px;
    padding-bottom: 88px;
}
/* Auto-groeiende header: voorheen getriggerd op een auto-gegenereerde design-hash
   (.sbbb7988b180f/.s1d5fde833c0c), met de hand in dit bestand gezet -- instabiel, want zo'n
   hash verandert stil zodra de opmaak van het item wijzigt (werkwijze-regel: nooit een
   design-/item-id als CSS-selector). Nu op een echt CMS-veld (F426-vervolg, 22-08-2026):
   `css-class` op het `styles`-type (nieuw, `POST /api/sites/460/meta/types/styles/fields`),
   gezet op de design_layer-slot van de drie betrokken headers (items 1360, 1474, 1477) als
   "hero--auto-grow" -- content, blijft dus staan bij een re-seed/duplicate. Framework neemt
   `css-class` mee in de framework-brede styles-seed (framework-agent, 22-08-2026), dus elke
   site krijgt 'm voortaan zonder deze per-site structuurstap. Werkt identiek voor de
   bestaande renderer (die het veld al via de design-compiler op de sectie krijgt, zonder
   codewijziging) en framework's Framework\Layer\Renderer\LayerHeader-delegatie. */
.layer--hero.hero--auto-grow .layer__hero-body {
    aspect-ratio: auto;
    height: auto;
    /* De oude renderer zet --header-ar inline; framework's delegatie kent die naam niet en zet
       in plaats daarvan --hero-shape (zelfde "W / H"-notatie) -- terugval erop, anders is
       min-height hier stil 0 (calc met een onbekende var). */
    min-height: calc(100vw / (var(--header-ar, var(--hero-shape))));
}
/* Sinds de layer_header-delegatie naar Framework\Layer\Renderer\LayerHeader zit de aspect-
   ratio-dwang niet meer op .layer__hero-body maar een niveau hoger, op .hero zelf
   (--hero-shape/data-hero-shape, zie layers.css) -- zonder deze regel bleef de HERO-sectie op
   de vaste hoogte staan terwijl de body eronder al los liet, en viel content alsnog buiten de
   (overflow:hidden) hero-box. */
.hero--auto-grow.hero {
    aspect-ratio: auto;
}
/* Zonder dit blijft .hero zelf op 0px staan: .layer__sc/.layer__inner (de universele
   sectie-wrapper, layers.css) zijn voor DEZE laag altijd position:absolute -- nodig om de
   normale (vast-hoge) header niet te laten dichtklappen, maar een absolute keten draagt
   NOOIT bij aan de auto-hoogte van de voorouder. Voor een auto-groeiende header moeten
   .layer__sc/.layer__inner dus terug de flow in, zodat .layer__hero-body's eigen
   (content-)hoogte via hen weer bij .hero terechtkomt. */
.hero--auto-grow.hero > .layer__sc,
.hero--auto-grow.hero > .layer__sc > .layer__inner {
    position: static;
    inset: auto;
}
.layer--hero.hero--auto-grow .layer__hero-overlays {
    /* position:relative, NIET static: static houdt 'm in de flow (nodig voor de
       auto-hoogte) maar maakt z-index (2, layers.css) een dode letter -- de
       leesbaarheids-gradient (.hero--image::before, z-index:1) schilderde daardoor
       stilzwijgend OVER de tekst i.p.v. eronder (Ronny, 22-08-2026: "de achtergrond
       komt OVER de tekst"). relative geeft hetzelfde flow-gedrag terug met z-index
       weer intact. */
    position: relative;
    width: 100%;
}.layer--hero.hero-pakket-v2{
    margin-bottom: 0;
}.hero-pakket-v2 + .layer--cards .layer__inner{
    padding-top: 48px;
    padding-bottom: 56px;
}.hero-pakket-v2 + .layer--cards .layer__cards-heading{
    margin-bottom: 40px;
}
.layer--usps.usp-strip-landing {
    padding-top: 16px;
    padding-bottom: 64px;
}
/* (regel verwijderd: die opmaak-hash bestaat nergens meer in de site — punt 635-vervolg) */

/* (regel verwijderd: die opmaak-hash bestaat nergens meer in de site — punt 635-vervolg) */


/* Kerst-kerstpakketten collectieblok (laag 1327): creme body-tekst op de donkere achtergrond.
   Achtergrondkleur (#411631) + titelkleur (wit) komen uit de CMS-opmaak (design_layer/design_title);
   de tekst-slot rendert niet op dit laagtype (zoals het herfst-winter-blok), dus body-tekst via CSS op de laag-hash. */
/* (regel verwijderd: die opmaak-hash bestaat nergens meer in de site — punt 635-vervolg) */


/* Route-onafhankelijk: witte card-boxen ook op de Favoriete-cards (na pakket-hero)
   + productbadges uit op beide landing-card-blokken. Age 2026-08-20. */
/* (regel verwijderd: matchte nergens meer — punt 644) */
.hero-pakket-v2 + .layer--cards .card--banner .card__link{
    gap: 0;
    height: 100%;
}.hero-pakket-v2 + .layer--cards .card--banner .card__media{
    flex: 0 0 auto;
}.hero-pakket-v2 + .layer--cards .card--banner .card__title{
    background: #fff;
    flex: 1 1 auto;
}.hero-landing-gradient + .layer--cards .card--banner .card__link::before, .hero-pakket-v2 + .layer--cards .card--banner .card__link::before{
    display: none;
}


/* Bleed-hero foto vult de volle hero-hoogte (tot achter de golf), niet alleen het
   aspect-ratio-deel. Nodig door de responsive-fix (body groeit met de tekst mee,
   de media bleef op aspect-hoogte staan -> witruimte eronder). Route-onafhankelijk. Age 2026-08-20. */.hero-landing-gradient .layer__hero-media, .hero-pakket-v2 .layer__hero-media{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}


/* ══════════════════════════════════════════════════════════════════════════
   MOBIELE hoofd-hero: foto bovenaan, tekst eronder op effen donker (#3a1520).
   De body-hoogtecap (header_size) eraf zodat 'ie meegroeit; tekst naar onderen
   geduwd; gradient loopt van transparant (foto) naar effen kleur. Route-onafhankelijk.
   Age 2026-08-20. Terug te draaien: verwijder dit blok.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .hero-landing-gradient .layer__hero-body {
        max-height: none !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
    }
    .hero-landing-gradient .layer__hero-media {
        object-position: center 20%;
    }
    .hero-landing-gradient .layer__hero-body::before {
        background: linear-gradient(to bottom,
            rgba(58, 21, 32, 0) 0%,
            rgba(58, 21, 32, 0) 32%,
            rgba(58, 21, 32, 0.9) 55%,
            #3a1520 68%);
    }
    .hero-landing-gradient .layer__hero-overlay {
        padding-top: 80vw;
        padding-bottom: 64px;
    }
    /* golf-onderrand: hoogte = breedte x 48/960, zodat de golf-SVG z'n verhouding
       houdt en niet horizontaal wordt uitgerekt (hobbelig). */
    .hero-landing-gradient .layer__hero-body::after {
        height: 5vw;
    }
}


/* COLLECTIEBLOK 'Van tijdloze basiskaarsen...' (donkere sectie): tekst wit voor
   contrast op de donkere achtergrond. Anker = design-hash van de laag (route-onafhankelijk). Age 2026-08-20. */
/* (regel verwijderd: die opmaak-hash bestaat nergens meer in de site — punt 635-vervolg) */


/* Na-hero cards (o.a. Favoriete-kaarsen): witte card-boxen. Type-gebaseerd anker
   (.layer--header + .layer--cards) i.p.v. hero-hash, zodat het ook werkt als de hero
   z'n design-hash verliest (zoals op kerst-kerstpakketten). Home raakt dit niet. Age 2026-08-23. */
.layer--header + :where(.layer--cards .card--banner .card__content) { height: 100%; }
.layer--header + .layer--cards .card--banner .card__link { gap: 0; height: 100%; }
.layer--header + .layer--cards .card--banner .card__media { flex: 0 0 auto; }
.layer--header + .layer--cards .card--banner .card__title { background: #fff; flex: 1 1 auto; }

/* FAQ-toggle: roze pijl omlaag (dicht) / omhoog (open) i.p.v. de gedraaide chevron ("L").
   Semantisch (.layer--faq), geldt op alle FAQ-lagen. Mask-swap i.p.v. rotatie. */
.layer--faq .faq__q::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 5v14M5 12l7 7 7-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 5v14M5 12l7 7 7-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: var(--color-accent);
    transform: none;
}
.layer--faq .faq__item[open] .faq__q::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 19V5M5 12l7-7 7 7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 19V5M5 12l7-7 7 7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    transform: none;
}


/* Magazine-lookbook (flipbook) horizontaal centreren i.p.v. links. Component-klasse
   = route-onafhankelijk. Age 2026-08-23. */
.magazine-flipbook {
    margin-left: auto;
    margin-right: auto;
}

/* De flipbook-laag: content-container zelf centreren (stond links: margin-left:0). */
.layer__inner:has(.magazine-flipbook) {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Tekst-met-beeld: beeld-kolom op 1/3 (tekst 2/3) via CMS-class .beeld-derde op de laag.
   Het framework kent alleen 25-75 / 33-66 / 75-25 / 100 (geen 66-33); deze class voegt die
   verhouding toe. Binnen dezelfde @container-query als het framework, buiten @layer zodat hij wint. */
@container (min-width: 36rem) {
    .beeld-derde .layer__text-layout[data-media-only="0"][data-layout] {
        grid-template-columns: 2fr 1fr;
    }
}


/* Product-overzicht-titel (o.a. "Onze kaarsen" op /assortiment) gelijk aan de
   categoriepagina's ("LED kaarsen"): elegante serif Cormorant Garamond i.p.v.
   Space Grotesk. Semantische class, route-onafhankelijk. Age 2026-08-23. */
.product-overview__title {
    font-family: var(--theme-font-3);
}


/* Marquee-richting: media-albums lopen op deze site van links naar rechts. */
.media-album-scope .strip__track { animation-direction: reverse; }


/* USP-teksten links uitlijnen (vastgezet; standaard is 'start' maar leggen we
   expliciet vast zodat het links blijft). Semantische class, route-onafhankelijk. Age 2026-08-23. */
.layer--usps .usp__eyebrow,
.layer--usps .usp__title,
.layer--usps .usp__text {
    text-align: left;
}


/* Kerst-pakketten: pakket-hero (CTA-hero na het intro-text-image) titel 82->64 op desktop.
   Adjacency-anker raakt NIET de home-hero (die volgt niet op een text-image). Route-onafhankelijk. Age 2026-08-24. */
@media (min-width: 768px) {
    .layer--text-image + .layer--header.hero--image .hero__title--overlay {
        font-size: 64px;
    }
}
/* Favoriete-cards (sectie direct na de pakket-hero): card-titels links i.p.v. gecentreerd.
   Greep-cards (na de bovenste hero) en home blijven ongemoeid. Age 2026-08-24. */
.layer--header.hero--image + .layer--cards .card__title {
    text-align: left;
}


/* Kerst pakket-hero op MOBIEL: de vaste aspect-ratio (600/420 = ~263px) + overflow:hidden
   klipte de body-tekst (die ~530px hoog is). Op mobiel de absolute content-keten in-flow
   zetten zodat de hero meegroeit met de tekst; de foto vult als achtergrond en is iets
   donkerder gemaakt zodat de witte tekst overal leesbaar blijft. Route-onafhankelijk anker
   (pakket-hero = header-image-hero direct na het intro-text-image). Age 2026-08-24. */
@media (max-width: 600px) {
    .layer--text-image + .layer--header.hero--image {
        aspect-ratio: auto !important;
        height: auto !important;
        overflow: visible !important;
    }
    .layer--text-image + .layer--header.hero--image .layer__sc,
    .layer--text-image + .layer--header.hero--image .layer__inner,
    .layer--text-image + .layer--header.hero--image .layer__hero-body {
        position: relative !important;
        height: auto !important;
        inset: auto !important;
    }
    .layer--text-image + .layer--header.hero--image .layer__hero-media {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        filter: brightness(0.62) saturate(1.05);
    }
    .layer--text-image + .layer--header.hero--image .layer__bg {
        height: 100% !important;
    }
}

/* Media-album: beeldvullende slider. De gewone layer-container kneep de track op desktop
   in tot de contentbreedte; de foto’s mogen hier van rand tot rand lopen. */
.layer--media-albums .layer__inner {
    width: 100vw;
    max-width: none;
    margin-inline: calc(50% - 50vw);
}


/* Herfst/winter FAQ-foto: volg de media-instelling van de laag expliciet.
   De bron is vierkant, de laag is 4:3; cover vult het vak zonder vervorming. */


/* USP-carousel op mobiel: 1 item per keer tonen i.p.v. 2 half-afgekapte, zodat lange
   USP-teksten volledig passen. Embla bepaalt het aantal slides-in-view op basis van de
   CSS-breedte van de slides; met autoplay (ingesteld op de laag) rouleren ze dan netjes.
   Semantische selector — geldt voor elke USP-carousel. Age 2026-08-24. */
@media (max-width: 600px) {
    .layer--usps .carousel__slide {
        flex-basis: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        justify-content: center;
        text-align: center;
    }
}


/* Favoriete-cards sectiekop centreren ('Favoriete kaarsen voor in de kerstpakketten:').
   Sectie direct na de pakket-hero; route-onafhankelijk anker. Age 2026-08-24. */
.layer--header.hero--image + .layer--cards .layer__cards-title {
    text-align: center;
}

/* Over-ons: hero-wave lichtroze/aansluitend (#fdf6f9, = achtergrond Over ons-sectie) i.p.v. #e8a0c0. De wave-hash .sbbb7988b180f is GEDEELD
   met kerst & herfst-winter, dus scope via de over-ons-only marker-class .over-ons-page (laag 1629)
   + :has(). In browsers zonder :has valt hij netjes terug op de gedeelde roze wave. */
#main-content:has(.over-ons-page) .hero-landing-gradient .layer__hero-body::after {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIGlkPSJ1dWlkLTI5NjI3NjA5LWJjNWQtNGE1Ny1iMDNlLTZmZmU0ZDIxYmQ0OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTkyMCA0OCI+PGRlZnM+PHN0eWxlPi51dWlkLTU4OGFlYWJjLTE5YWQtNDcyMy1iZDlmLTYyNjhlNTM3ZjE4YntmaWxsOiNmZGY2Zjk7fTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJ1dWlkLTU4OGFlYWJjLTE5YWQtNDcyMy1iZDlmLTYyNjhlNTM3ZjE4YiIgZD0iTS0zLDUxaDE5MjUuODZWOC43NWMtLjA0LTEuNjctLjY5LTIuOTYtMi41LTMuMzdsLS4yNC0uMDZjLTEuOTctLjI1LTMuODktLjMtNS43Ny0uMi0xLjQ4LjQ5LTMuMTQuODctNC45OSwxLjEyLTguODYsMS44Ny0xNy4wOCw2LjI0LTI0LjUyLDExLjE0LTUuMDgsMy43Mi0xMC42NSw2LjcyLTE2LjUsOC45OC0xLjI2LjUyLTIuNTMsMS0zLjgxLDEuNC01LjQ4LDEuODEtMTEuMDcsMi44OC0xNi42NiwzLjI5LS4xMSwwLS4yMi4wMS0uMzMuMDItLjQuMDMtLjguMDYtMS4yLjA4LTEyLjc1Ljc4LTI1LjY0LTEuOC0zNi44OS04LjExLS4yOS0uMTgtLjU4LS4zNi0uODYtLjU0LTMuNTYtMS45MS02Ljk4LTQuMTMtMTAuMjMtNi42My03Ljg3LTUuMDItMTYuMDgtOS40Mi0yNS44OS05LjU4LTEzLjQ3LTEuMjUtMjUuMDEsNi4wNy0zNS41MSwxMy4zMS01LjA3LDMuNjMtMTAuNzQsNi41NS0xNi42OSw4LjUxLTcuNzYsMi45Ny0xNC45MSwzLjU3LTIxLjY5LDIuNi02LjAzLS41OS0xMS45Ni0yLjM2LTE3LjQ4LTUuNTMtMS40NS0uODEtMi44OC0xLjY1LTQuMzEtMi41LTMuNDYtMS45MS02Ljg5LTQtMTAuMzItNi4xNi05LjUxLTUuNTItMTkuMjktMTAuMjQtMzAuNjYtMTAuNDgtMjQuMjEtMS44Ni0zNC42OSw5LjY3LTUwLjMzLDE3LjgxLTQuMjcsMi4zMi04Ljc4LDQuMjQtMTQuMTMsNS41MS0uODcuMjItMS43Ni40NC0yLjY4LjYzLTQuMjYuOTItOC41OCwxLjExLTEyLjg2LjczLS4xMSwwLS4yMi0uMDItLjMyLS4wMy0uNTEtLjA1LTEuMDItLjEtMS41My0uMTYtMy45My0uNDktNy44LTEuNDctMTEuNTItMi44OS0zLjgyLTEuNDItNy41LTMuMjYtMTAuOTUtNS40MS05LjM5LTUuOTktMTYuNDItMTIuMTEtMjYuOTktMTQuNi0yNS43Ni03LjM4LTQwLjI0LDkuMDEtNTkuMDMsMTcuODQtLjYzLjMzLTEuMjYuNjYtMS45MS45OC0yLjM4LDEuMDMtNC44MiwxLjg2LTcuMzIsMi41LTMuNDEuOTUtNy4wMSwxLjU1LTEwLjg3LDEuNjYtNS4yNC4yNS05Ljk2LS4yMy0xNC4zMS0xLjIyLS4wMSwwLS4wMywwLS4wNCwwLS4yNC0uMDYtLjQ4LS4xMS0uNzItLjE3LTIuMjQtLjUtNC40NS0xLjEyLTYuNi0xLjg4LTIuNDYtLjk3LTQuODYtMi4xNy03LjI0LTMuNS0yMS45NS0xMS41NC0zNS45Ni0zMS40Ny03Mi42NS04LjUxLTQuODMsMy41OS0xMCw2LjY4LTE1LjM5LDkuMTUtNy4yNCwzLjY4LTE1LjQ2LDUuODYtMjMuNzYsNi40Ni0xMC45NC45NC0yMi4wNi0uOTQtMzIuNTMtNi40OC0xMi4wNy01LjkzLTIzLjQyLTE1LjY1LTM2LjcxLTE3Ljc2LTEzLjEzLTEuOTctMjYuNzksMi43My0zNy43NCwxMC4wMS0zLjQ1LDIuNTEtNy4wMSw0Ljg3LTEwLjcxLDYuOTQtMS4wMS42MS0yLjAyLDEuMi0zLjA3LDEuNzUtMy4yNywxLjU3LTYuNDUsMi43OS05LjUzLDMuNy0uMDIsMC0uMDQuMDEtLjA3LjAyLTkuODMsMi45LTE4Ljc4LDIuNzEtMjcuMjIuODEtMzAuNzEtNi40Mi01NC40OC0zNC45My04OS4zOC0yMC45Mi0xMS4wOSwzLjQ4LTIwLjkzLDEwLjE1LTMxLjAzLDE1LjI1LTEyLjYxLDYuMTMtMjcuNzcsOC44LTQxLjUsNi4wMS04LjQ1LTEuNzItMTYuNC00LjY0LTI0LjA3LTguNzktOS40NC01LjI4LTE3Ljk4LTEyLjI2LTI4LjIyLTE0LjI1LTIxLjU2LTUuMDctMzUuMjQsNi40LTUxLjExLDE1LjE4LTIuODIsMS42Ny01LjY5LDMuMjEtOC42OSw0LjQ0LTcuNjMsMy41Ny0xNS4wNSw0LjQyLTIyLjI2LDMuNTYtMzEuNzYtMy4xNS01Mi4zNC0zOS4zNC05MS43NC0yMC4zNS03LjM0LDMuMjktMTMuODMsOC44OS0yMC40MiwxMy4zMy0uMDYuMDQtLjExLjA5LS4xNy4xMy0uMDQuMDItLjA4LjA0LS4xMi4wNy0uMi4xNC0uNC4yNy0uNjEuNDEtMy4yOCwyLjE1LTcuMzksMy42LTExLjgxLDQuNjMtMy4zMi44OC02Ljc5LDEuNS0xMC4zLDEuODItMTEuMjEsMS40Ny0yMi4zNS0xLjI3LTMyLjEtNi40My05LjEzLTQuOTEtMTcuMTUtMTEuMjgtMjcuMjMtMTUuMDUtMTQuMjUtNi4wOS0zMC4zNy0yLjI1LTQzLjEyLDUuNC01LjA0LDMuMzktMTAuNDIsNi41NS0xNS45NSw5LjItMy4xOSwxLjY4LTYuNDksMy4xNi05Ljk5LDQuMjYtMi4zMS43NC00LjcsMS4zNi03LjE1LDEuODUtOC4wNywxLjgyLTE2LjQ1LDIuMTMtMjUuMDMuMTktMTkuNDgtNC4zNy00Mi4xMy0yNS4yNi02Mi4xMy0yNS4yNi0xNC45My0uNDgtMjcuNTgsNy4xNy00MC41OCwxMy42OC0xNy40OCw4LjIzLTM2LjUxLDE1LjYzLTU2LjI4LDExLjktMTAuNjQtMS44MS0yMC42LTYuMS0zMC4yNi0xMS4wNi0xMS42LTUuOTctMjIuNTMtMTMuMTEtMzYuMTItMTMtMTMuMjQtLjIxLTI1LjMsNS4wOS0zNi4yOCwxMS43OS0xMS4zOCw2LjkzLTI0LjM0LDEyLjIyLTM3LjgsMTIuODYtNi4wMi40Mi0xMS44NS0uMjYtMTcuNTItMS42My0uMzEtLjA3LS42Mi0uMTUtLjkzLS4yMy0uNS0uMTMtMS4wMS0uMjYtMS41MS0uNC0uNTMtLjE1LTEuMDYtLjMxLTEuNTktLjQ3LTkuNjctMi45Mi0xOC44OS03LjY3LTI3LjgzLTEyLjMyLS40OS0uMjUtLjk3LS40OC0xLjQ2LS43MS00LjY0LTIuMTQtOS4zLTQuMTItMTQuMDEtNS42OS0xNS43MS00Ljk0LTI5LjMzLTMuODMtNDQuNTMsMy41LTQuMDYsMi4yNS04LjA0LDQuNi0xMi4wNSw2Ljg1LS44Ni41Ni0xLjc0LDEuMTQtMi42MiwxLjczLTE3LjU3LDkuODEtMzEuNjEsMTEuMzYtNDMuNyw5LjAzLTYuMjktLjk5LTEyLjItMy40LTE3Ljk2LTYuMzhDMzIuMywxNS4zLDE3Ljc5LDIuMTgtMS4yMiw1LjY0Yy0xLjIzLjctMS42NiwxLjk5LTEuNzcsMy4zOCwwLC42OCwwLDEuNDYsMCwyLjMxdjM5LjY4WiIvPjwvc3ZnPg==");
}

/* Over-ons "Registreren en bestellen" (laag 1634, .btn-wit): primary-knop omgekeerd ->
   witte achtergrond + roze tekst/rand. Alleen deze knop (niet de secondary en niet andere
   pagina's). Marker-class .btn-wit, geen route/id. */
.btn-wit .button--primary {
    background: #ffffff;
    color: var(--color-accent);
    border-color: var(--color-accent);
}
.btn-wit .button--primary:hover,
.btn-wit .button--primary:focus-visible {
    background: var(--color-accent);
    color: #ffffff;
}

/* Reviews-laag titel: Cormorant Garamond (= paginatitel-stijl) i.p.v. Space Grotesk.
   Semantische selector op component-class, geen route/id. */
.layer--reviews .layer__reviews-heading h2 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 300;
    font-size: 36px;
}

/* Reviews-laag body-tekst: Inter behouden (titel is Cormorant). */
.layer--reviews .reviews__item {
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 400;
}

/* Footer contact: tel/e-mail als nette links (blenden met de adrestekst), roze bij hover. */
.site-footer__address a {
    color: inherit;
    text-decoration: none;
}
.site-footer__address a:hover,
.site-footer__address a:focus-visible {
    color: var(--color-accent);
    text-decoration: underline;
}

/* USP-strip titels leesbaar (#411631) op de compacte hash-strip — geldt nu voor
   zowel /assortiment als /contact (voorheen was alleen contact overschreven; Age 2026-08-28). */

/* Reviews-items: foto links naast tekst via grid (4 kinderen: media, title, text, footer). */
.layer--reviews .reviews__item {
    display: grid;
    grid-template-columns: 25% 1fr;
    grid-template-rows: auto auto auto;
    gap: 0 40px;
    align-items: center;
    padding: 0;
}
.layer--reviews .reviews__item-media {
    grid-column: 1;
    grid-row: 1 / 4;
    align-self: start;
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
    margin: 0;
}
.layer--reviews .reviews__item-title,
.layer--reviews .reviews__item-text,
.layer--reviews .reviews__item-foot {
    grid-column: 2;
}
.layer--reviews .reviews__item-text {
    padding-top: 40px;
}
.layer--reviews:not(.reviews-view--grid-horizontal) .reviews__item-foot {
    padding-bottom: 40px;
}
.layer--reviews .reviews__item-author {
    color: #d4618c;
}
.layer--reviews .reviews__item-media img {
    border-radius: 8px;
    width: 100%;
    height: auto;
}
@media (max-width: 768px) {
    .layer--reviews .reviews__item {
        grid-template-columns: 1fr;
    }
    .layer--reviews .reviews__item-media,
    .layer--reviews .reviews__item-title,
    .layer--reviews .reviews__item-text,
    .layer--reviews .reviews__item-foot {
        grid-column: auto;
        grid-row: auto;
    }
}
.layer--reviews .reviews__item-title {
    display: none;
}
.layer--reviews .reviews__list {
    max-width: none;
}


/* Kerst-hero (payoff onderin): op smallere schermen (<=1200px) groeit de hero mee met de tekst
   i.p.v. de vaste beeldverhouding, zodat de payoff-tekst niet onder de hero/roze band wegvalt.
   Foto vult de (hogere) hero als cover. Gescoped op .kerst-page; desktop >1200px ongewijzigd. */
@media (max-width: 1200px) {
    #main-content:has(.kerst-page) .layer--hero:has(.layer__payoff[data-position-vertical="end"]) .layer__hero-body {
        aspect-ratio: auto !important;
        height: auto !important;
        min-height: 42vw;
        display: grid;
        overflow: hidden;
    }
    #main-content:has(.kerst-page) .layer--hero:has(.layer__payoff[data-position-vertical="end"]) .layer__hero-media-wrap {
        grid-area: 1 / 1;
        position: relative !important;
        inset: auto !important;
        width: 100%;
        height: 100%;
    }
    #main-content:has(.kerst-page) .layer--hero:has(.layer__payoff[data-position-vertical="end"]) .layer__hero-media-wrap picture {
        position: absolute; inset: 0; display: block; width: 100%; height: 100%;
    }
    #main-content:has(.kerst-page) .layer--hero:has(.layer__payoff[data-position-vertical="end"]) .layer__hero-media {
        width: 100% !important; height: 100% !important; object-fit: cover !important;
    }
    #main-content:has(.kerst-page) .layer--hero:has(.layer__payoff[data-position-vertical="end"]) .layer__hero-overlays {
        grid-area: 1 / 1; position: relative !important; height: auto !important;
    }
}


/* Kerst pakket-hero (hero na de tekstlaag) op mobiel/tablet: de mobiele portret-foto liet
   onderin een lichte, lege band zien (leeg tafelblad) omdat de hero hoger is dan de inhoud.
   object-position naar boven toont het gevulde (bokeh/kaarsen) deel i.p.v. het lege onderstuk,
   waardoor het "gat" verdwijnt. Anker = enige hero die op een .layer--text volgt. Age 2026-08-25. */
@media (max-width: 768px) {
    .layer--text + .layer--hero .layer__hero-media {
        object-position: center top !important;
    }
}


/* Kerst-hero (1323) titel op 64px (was 67.2px) — gelijk aan de bovenste hero.
   clamp: max 4rem (=64px) op desktop, schaalt mee op smallere schermen. Gescoped .kerst-page. */
#main-content:has(.kerst-page) .layer--hero:has(.layer__payoff[data-position-vertical="end"]) .layer__hero-title {
    font-size: clamp(2.25rem, 5vw, 4rem);
}


/* FAQ-kolommen (foto + faq): foto afronden (12px, als de cards) en op desktop de kolomhoogte
   laten vullen zodat 'ie uitlijnt met de FAQ-dropdowns. Age 2026-08-25. */
.layer--columns:has(.faq) .media__viewport {
    border-radius: 12px;
    overflow: hidden;
}
@media (min-width: 769px) {
    .layer--columns:has(.faq) .layer__column-media,
    .layer--columns:has(.faq) .media__viewport,
    .layer--columns:has(.faq) .media__viewport img {
        height: 100%;
    }
    .layer--columns:has(.faq) .media__viewport img {
        object-fit: cover;
    }
}


.layer--text + .layer--hero + .layer--cards .card__link { gap: 0; }
.layer--text + .layer--hero + .layer--cards .card__media { border-radius: 0; }

/* Kerst-hero (1323) payoff-tekst verticaal centreren op desktop (>1200px, vaste hoogte).
   Verlaagde verticale padding zodat het tekstblok in de hero past en centreert. <=1200px groeit
   de hero al mee met de tekst, dus daar niet nodig. Gescoped .kerst-page. */
@media (min-width: 1201px) {
    #main-content:has(.kerst-page) .layer--hero:has(.layer__payoff[data-position-vertical="end"]) .layer__hero-overlay[data-position-vertical="end"] {
        align-self: center;
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
}


/* Greep-cards (kerst): foto in een wit kader zetten (lichte achtergrond tegen de foto aan),
   consistent met de Favoriete-cards die een lichter-roze kader hebben. Foto liep eerst
   rand-tot-rand. Anker = cards na de bovenste (auto-grow) hero. Age 2026-08-25. */
.layer--hero.hero--auto-grow + .layer--cards .card__content {
    padding: 0;
}
.layer--hero.hero--auto-grow + .layer--cards .card__link {
    gap: 0;
}
.layer--hero.hero--auto-grow + .layer--cards .card__media {
    border-radius: 0;
}


/* Scroll-offset voor de sticky header bij het #kerstpakketten-anker (pakket-hero),
   zodat de sectie niet onder de header valt na het scrollen. Age 2026-08-25. */
.layer--text + .layer--hero {
    scroll-margin-top: 72px;
}

/* Featured-sellers badge: in reviews-modus staat daar de naam van de recensent i.p.v. een plaats,
   dus de map-pin vervangen door een chat-ballon. Framework-SVG verbergen + chat-icoon via mask. */
.seller-card__location .seller-card__pin { display: none; }
.seller-card__location::before {
    content: ""; flex: 0 0 auto; width: 0.95em; height: 0.95em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/></svg>") no-repeat center / contain;
}

/* Home nieuwsbrief (869): "Blijf op de hoogte" (linkerkolom) op dezelfde horizontale lijn als de
   form-titel "Schrijf je direct in" (rechts, in de witte kaart met 2rem padding). Alleen als de
   kolommen naast elkaar staan (@container 36rem). Gescoped op .newsletter-signup. */
@container (min-width: 36rem) {
    .newsletter-signup .layer__text-col--1 {
        padding-top: 2rem;
    }
}


/* USP-block op mobiel: icoon bovenaan uitlijnen (bij de eerste tekstregel/eyebrow) i.p.v.
   verticaal gecentreerd. Alleen de block-USP's (niet de carousel-balk). Age 2026-08-25. */
@media (max-width: 768px) {
    .layer--usps:not(:has(.carousel)) .ds-usps_item {
        align-items: start;
    }
}

/* ===== layer_hotspots: sfeerfoto met klikbare hotspot-bolletjes (CMS-type) — Age 2026-08-25 ===== */
.layer--hotspots{margin-block:2.75em}
.layer--hotspots .tips-shot{margin:0 auto;max-width:1280px}
.layer--hotspots .tips-shot__frame{position:relative;width:100%;margin:0 auto;border-radius:16px;overflow:hidden}
.layer--hotspots .tips-shot__img{display:block;width:100%;height:auto}
.layer--hotspots .tips-dot{position:absolute;left:var(--dx,50%);top:var(--dy,50%);transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.05);text-decoration:none;z-index:2;transition:transform .18s ease,box-shadow .18s ease}
.layer--hotspots .tips-dot__inner{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#cf5c9e;color:#fff;transition:background .18s ease}
.layer--hotspots .tips-dot svg{width:16px;height:16px}
.layer--hotspots .tips-dot::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(207,92,158,.5);animation:tips-pulse 2.4s ease-out infinite}
@keyframes tips-pulse{0%{box-shadow:0 0 0 0 rgba(207,92,158,.5)}70%{box-shadow:0 0 0 13px rgba(207,92,158,0)}100%{box-shadow:0 0 0 0 rgba(207,92,158,0)}}
.layer--hotspots .tips-dot:hover,.layer--hotspots .tips-dot:focus-visible{transform:translate(-50%,-50%) scale(1.12);box-shadow:0 6px 18px rgba(0,0,0,.45)}
.layer--hotspots .tips-dot:hover .tips-dot__inner,.layer--hotspots .tips-dot:focus-visible .tips-dot__inner{background:#b8377f}
@media(prefers-reduced-motion:reduce){.layer--hotspots .tips-dot::before{animation:none}}
@media(max-width:640px){.layer--hotspots .tips-dot{left:var(--mx,var(--dx,50%));top:var(--my,var(--dy,50%))}}


/* Home-hero: knoppen (payoff) boven de wave tillen zodat ze niet meer achter/onder het
   wave-effect vallen, en de dunne naad ('lijntje') onder de wave dichten (wave-fill = sectiekleur).
   Age 2026-08-25. */
.layer--hero .layer__payoff {
    position: relative;
    z-index: 4;
}
.layer--hero.hero-wave-standard {
    margin-bottom: -1px;
}


/* ss02-zoekknop-inline-mobiel: 'Zoeken'-knop naast/achter het inputveld houden op smalle schermen i.p.v. eronder wrappen
   (basis .layer__cards-search = flex-wrap wrap + label flex-basis 18rem -> wrapt <~640px). Age 2026-08-25. */
@media (max-width: 640px) {
    .layer__cards-search {
        flex-wrap: nowrap;
    }
    .layer__cards-search .layer__cards-search-label {
        flex: 1 1 auto;
        min-width: 0;
    }
    .layer__cards-search .button--primary {
        flex: 0 0 auto;
    }
}


/* CMS-configured floating contact link (settings.floating_element_*). */
.site-whatsapp {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 20;
}
.site-whatsapp a {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 2.75rem;
    padding: .65rem .9rem;
    border-radius: 999px;
    background: #25d366;
    color: #fff;
    box-shadow: 0 3px 12px rgb(0 0 0 / .18);
    text-decoration: none;
}
.site-whatsapp img,
.site-whatsapp svg {
    width: 1.35rem;
    height: 1.35rem;
    object-fit: contain;
}
.site-whatsapp__text { font-weight: 600; }
@media (max-width: 40rem) {
    .site-whatsapp { right: .75rem; bottom: .75rem; }
    .site-whatsapp__text { display: none; }
    .site-whatsapp a { width: 2.75rem; justify-content: center; padding: .65rem; }
}

/* FAQ-producten: volledige foto tonen (geen afsnijding door object-fit:cover) */
.faq-producten .media__viewport img {
    object-fit: contain;
}


/* Paarse swirl-kaars op /zakelijk-bestellen: zelfde brandende candle-module als home,
   maar de was is een paars/roze draai-dessin (in stijl van de Noorderlichtjes-swirlkaars)
   i.p.v. crème. Vlam + gloed blijven warm (ongewijzigd t.o.v. home). Age 2026-08-25. */
.candle--swirl .candle-wax-base {
    background:
        /* cilinder-schaduw links/rechts voor rondheid, bovenop het dessin */
        linear-gradient(90deg,
            rgba(58, 20, 44, 0.38) 0%,
            rgba(58, 20, 44, 0.00) 24%,
            rgba(255, 255, 255, 0.20) 50%,
            rgba(58, 20, 44, 0.00) 76%,
            rgba(58, 20, 44, 0.38) 100%),
        /* de draai (barber-pole): donkerpaars/magenta + lichtroze */
        repeating-linear-gradient(-62deg,
            #8f4675 0 15px,
            #edcadd 15px 30px);
}


/* /recensies: minimaal 20px ademruimte rechts in de recensie-kaarten. De kaart heeft
   uniform padding var(--space-4) (16px mobiel .. 24px desktop) -> rechts voelde krap.
   max() houdt desktop op 24px en tilt mobiel naar 20px. De foto (-media) bloedt met een
   negatieve rechter-marge naar de rand; die laten we meebewegen zodat de foto blijft doorlopen.
   Marker: recensies-rechter-padding-20. Age 2026-08-25. */
.layer--reviews .reviews__item {
    padding-right: max(var(--space-4), 20px);
}
.layer--reviews .reviews__item-media {
    margin-right: calc(-1 * max(var(--space-4), 20px));
}


/* WhatsApp-knop (.site-whatsapp, o.a. detailpagina's): het icoon was een <img> naar een
   rauw /media-pad (403 -> leeg vierkant) en bovendien niet het WhatsApp-logo. We verbergen
   die <img> en tonen het echte WhatsApp-logo als wit masker (geen media-serving nodig).
   Marker: whatsapp-icoon-fix. Age 2026-08-25. */
.site-whatsapp a img {
    display: none;
}
.site-whatsapp a::before {
    content: "";
    flex: 0 0 auto;
    width: 1.4em;
    height: 1.4em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%2523000%27%20d%3D%27M12.04%202C6.58%202%202.13%206.45%202.13%2011.91c0%201.75.46%203.45%201.32%204.95L2%2022l5.25-1.38c1.45.79%203.08%201.21%204.79%201.21h.01c5.46%200%209.91-4.45%209.91-9.91C21.96%206.45%2017.5%202%2012.04%202zm0%2018.15h-.01c-1.52%200-3.01-.41-4.3-1.18l-.31-.18-3.19.84.85-3.11-.2-.32a8.23%208.23%200%2001-1.26-4.36c0-4.54%203.7-8.24%208.25-8.24%202.2%200%204.27.86%205.82%202.42a8.18%208.18%200%20012.41%205.83c0%204.54-3.7%208.24-8.24%208.24zm4.52-6.16c-.25-.12-1.47-.72-1.7-.81-.23-.08-.39-.12-.56.12-.16.25-.64.81-.79.97-.14.16-.29.18-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.02-.38.11-.5.11-.11.25-.29.37-.43.12-.14.16-.25.25-.41.08-.16.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.4-.42-.56-.43-.14-.01-.31-.01-.48-.01-.16%200-.43.06-.66.31-.23.25-.87.85-.87%202.07%200%201.22.89%202.4%201.01%202.56.12.16%201.75%202.67%204.24%203.74.59.26%201.05.41%201.41.52.59.19%201.13.16%201.56.1.48-.07%201.47-.6%201.67-1.18.21-.58.21-1.07.14-1.18-.06-.11-.22-.17-.47-.29z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%2523000%27%20d%3D%27M12.04%202C6.58%202%202.13%206.45%202.13%2011.91c0%201.75.46%203.45%201.32%204.95L2%2022l5.25-1.38c1.45.79%203.08%201.21%204.79%201.21h.01c5.46%200%209.91-4.45%209.91-9.91C21.96%206.45%2017.5%202%2012.04%202zm0%2018.15h-.01c-1.52%200-3.01-.41-4.3-1.18l-.31-.18-3.19.84.85-3.11-.2-.32a8.23%208.23%200%2001-1.26-4.36c0-4.54%203.7-8.24%208.25-8.24%202.2%200%204.27.86%205.82%202.42a8.18%208.18%200%20012.41%205.83c0%204.54-3.7%208.24-8.24%208.24zm4.52-6.16c-.25-.12-1.47-.72-1.7-.81-.23-.08-.39-.12-.56.12-.16.25-.64.81-.79.97-.14.16-.29.18-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.02-.38.11-.5.11-.11.25-.29.37-.43.12-.14.16-.25.25-.41.08-.16.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.4-.42-.56-.43-.14-.01-.31-.01-.48-.01-.16%200-.43.06-.66.31-.23.25-.87.85-.87%202.07%200%201.22.89%202.4%201.01%202.56.12.16%201.75%202.67%204.24%203.74.59.26%201.05.41%201.41.52.59.19%201.13.16%201.56.1.48-.07%201.47-.6%201.67-1.18.21-.58.21-1.07.14-1.18-.06-.11-.22-.17-.47-.29z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}


/* Contact-intro: foto 36%, tekst 64% */
.contact-page .layer__text-layout {
    grid-template-columns: 64fr 36fr;
}


/* ===== FAQ met foto: foto niet meegroeien als een vraag openklapt (site-breed) — Age 2026-08-25 =====
   Elke layer--columns met een accordion (details) + media-kolom: kolommen staan side-by-side met
   align-items:stretch, waardoor de fotokolom meerekt met de FAQ. Fix: fotokolom niet stretchen + de media
   op z'n eigen (natuurlijke) beeldverhouding tonen i.p.v. de kolomhoogte volgen (werkt voor kerst 1:1,
   home 1200x1490, etc.). Alleen >=600px (naast elkaar); mobiel stapelt en heeft het probleem niet. */
@media (min-width: 600px){
  .layer--columns:has(details):has(.layer__column-media) .layer__inner > .layer__column:has(.layer__column-media){ align-self: flex-start; }
  .layer--columns:has(details):has(.layer__column-media) .layer__column-media,
  .layer--columns:has(details):has(.layer__column-media) .media__viewport{ height: auto; }
  .layer--columns:has(details):has(.layer__column-media) .layer__column-media img{ position: relative; width: 100%; height: auto; }
}


/* ===== Banner-cards: titel links uitlijnen (site-breed) — Age 2026-08-25 =====
   .card--banner erft text-align:center; bij 1-regelige titels valt dat niet op,
   bij 2-regelige (bv. 'Kandelaars & Kaarsenhouders') wel. Titels consequent links. */
.card--banner .card__title{ text-align: left; }


/* Landschap-cards: foto altijd het 4:3-vak laten vullen (cover) ongeacht bronverhouding,
   zodat alle kaartfoto's even hoog zijn (bv. een 16:9-foto tussen 4:3-foto's) — Age 2026-08-25 */
:is(.layer--cards [data-cols="4"], .cards-landscape) .card--banner .card__media img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}


/* Landschap-cards (home-banner): card-achtergrond = basis kleur 2 (#fdf6f9) i.p.v. wit — Age 2026-08-25 */
.cards-landscape .card--banner .card__content{ background: var(--theme-color-2, #fdf6f9); border-radius: 12px; overflow: hidden; }


/* Pakket-hero (kerst, 'Kaarsen die ieder kerstpakket...') = de .layer--hero direct na een .layer--text.
   De nieuwe achtergrondfoto heeft zelf al een donkere plum-linkerkant, dus de theme-scrim
   (.layer__hero-body::before, ~60% zwart) is niet meer nodig en maakt het beeld dof. Weghalen -
   alleen voor deze hero (de bovenste hero 1360 heeft geen voorafgaande .layer--text). Marker: pakket-hero-scrim-weg. Age 2026-08-25. */
.layer--text + .layer--hero .layer__hero-body::before {
    background: none;
}

/* Footer social-iconen: achtergrond + hover in marker-kleur (donker pruim) */
.footer-socials a { background: #e8a0c0; transition: background .2s; }
.footer-socials a:hover { background: #7a4868; }


/* Zomer-hero: titel afbreken na "sfeermakers" via een strakkere max-width (22ch i.p.v. 30ch) */
.zomer-hero .layer__hero-title { max-width: 23ch; }


/* Landschap-cards: titel + pijl netjes op één lijn (o.a. Firefox). De pijl-::after had een
   grotere font-size/line-height (24.96px) dan de titeltekst (20.8px), waardoor de flex-items
   ongelijke box-hoogtes hadden en de pijl in Firefox niet netjes uitlijnde. — Age 2026-08-25 */
.cards-landscape .card--banner .card__title{ align-items: center; }
.cards-landscape .card--banner .card__title::after{ line-height: 1 !important; align-self: center; }


/* Landschap-cards: titel verticaal centreren in het gekleurde vlak. De .card__link (flex-kolom)
   had 12px gap tussen foto en titel, waardoor de titel 6px onder het midden zat. Gap weg → het
   gekleurde vlak omsluit de titel; wat padding voor ademruimte. — Age 2026-08-25 */
.cards-landscape .card--banner .card__link{ gap: 0; }
.cards-landscape .card--banner .card__title{ padding-top: 15px; padding-bottom: 15px; }


/* FAQ-laag (kerst, column_faq): de crème/gelige theme-achtergrond weghalen zodat de subtiele
   roze van de kolommen-laag over de hele breedte doorloopt. Alle FAQ's (klant stelt achtergrond zelf in via laag). Marker: kerst-faq-creme-weg. Age 2026-08-25. */
.layer--faq {
    background: transparent;
}

/* ──────────────────────────────────────────────────────────────────────────
   Mijn account -> Bestellingen (layer_order-history): kaartindeling + accenten
   in lijn met winkelmand/checkout. Semantische BEM-klassen (geen route/id),
   buiten @layer zodat het de on-layered layer-order-history.css/base wint.
   Indeling per kaart (op verzoek): regel1 nr; regel2 datum - "1 artikel" (roze,
   met roze streepje ertussen); regel3 prijs + "Factuur" (download-icoon, roze,
   20px na de prijs). Rechts: statuslabel (Betaald/expired) rechts uitgelijnd
   BOVEN de knop; de knop ligt op prijshoogte. meta = eigen sub-grid (nr /
   datum+aantal); display:contents op actions splitst Factuur en knop. ─────────── */
.layer__order-history .order-history__list {
    gap: 1rem;
}
.layer__order-history .order-history__item {
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 16px;
    box-shadow: none;
    padding: 1.15rem 1.35rem;
    display: grid;
    grid-template-columns: max-content max-content 1fr auto;
    grid-template-areas:
        "meta  meta     meta  status"
        "price invoice  .     reorder";
    column-gap: 20px;
    row-gap: .4rem;
    align-items: center;
}
.layer__order-history .order-history__actions {
    display: contents;
}
/* meta: nr op regel 1, datum + aantal op regel 2 (eigen sub-grid, dicht bijeen) */
.layer__order-history .order-history__item-meta {
    grid-area: meta;
    display: grid;
    grid-template-columns: max-content max-content;
    grid-template-areas:
        "num  num"
        "date count";
    column-gap: .5rem;
    row-gap: 0;
    align-items: baseline;
}
.layer__order-history .order-history__number { grid-area: num; }
.layer__order-history .order-history__date  { grid-area: date; margin-left: 0; }
/* "1 artikel" roze, met roze streepje tussen datum en aantal */
.layer__order-history .order-history__count { grid-area: count; margin-left: 0; color: var(--color-accent); }
.layer__order-history .order-history__count::before {
    content: "-";
    margin-right: .5rem;
    color: var(--color-accent);
}
/* statuslabel rechts uitgelijnd, direct boven de knop */
.layer__order-history .order-history__status { grid-area: status; justify-self: end; align-self: start; }
/* prijs op regel 3 */
.layer__order-history .order-history__item-total { grid-area: price; justify-self: start; align-self: center; }

/* "Factuur": accent-roze met download-icoon, 20px na de prijs (via column-gap) */
.layer__order-history .order-history__invoice.button {
    grid-area: invoice;
    justify-self: start;
    align-self: center;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    color: var(--color-accent);
    background: transparent;
    box-shadow: none;
    padding-inline: 0;
}
.layer__order-history .order-history__invoice.button::before {
    content: "";
    width: 1em;
    height: 1em;
    margin-right: -5px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.layer__order-history .order-history__invoice.button:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Opnieuw bestellen: roze CTA, rechts, op prijshoogte */
.layer__order-history .order-history__reorder {
    grid-area: reorder;
    justify-self: end;
    align-self: center;
}
.layer__order-history .order-history__reorder .button {
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 14px;
    box-shadow: none;
}
.layer__order-history .order-history__reorder .button:hover {
    background: color-mix(in srgb, var(--color-primary) 85%, #000);
}


/* ===== layer_flipbook: kop boven de magazine-flipbook — Age 2026-08-26 ===== */
.layer--flipbook .flipbook-header{ text-align: center; max-width: 60ch; margin: 0 auto 1.5rem; }
.layer--flipbook .flipbook-eyebrow{ margin: 0 0 .35rem; }
.layer--flipbook .flipbook-title{ margin: 0 0 .5rem; }
.layer--flipbook .flipbook-subtitle{ margin: 0; }


/* ===== Kerst-carousel (Greep + Favoriete): gelijke kaartheight + navigatie rechtsonder — Age 2026-08-27 =====
   Carousel-slides stretchen naar de hoogste kaart via flex; navigatiepijltjes van overlay
   naar onder de cards, rechts uitgelijnd. Hash .sceb5ab6fc1ab = beide kerst-card-carousels. */
/* Herfst-winter 'greep'-carousel (laag 1505, hash .s88d204fe9710) mee: pijlen ook
   daar rechtsonder de cards i.p.v. overlay. Age 2026-08-31. */
/* (regel verwijderd: voorloper van `.nl-greep-cc`, die Age op 31-08 introduceerde als
   hash-onafhankelijke marker voor de greep-carousels — punt 644) */

/* (regel verwijderd: voorloper van `.nl-greep-cc`, die Age op 31-08 introduceerde als
   hash-onafhankelijke marker voor de greep-carousels — punt 644) */

/* (regel verwijderd: voorloper van `.nl-greep-cc`, die Age op 31-08 introduceerde als
   hash-onafhankelijke marker voor de greep-carousels — punt 644) */

/* Kaarten ALTIJD even hoog: een regel elders zet .card--banner op een niet-auto hoogte,
   waardoor de flex `align-items:stretch` niet pakte (bij 3-regelige titels op smalle
   schermen werden kaarten ongelijk). height:auto herstelt de stretch. Age 2026-08-31. */
/* (regel verwijderd: voorloper van `.nl-greep-cc`, die Age op 31-08 introduceerde als
   hash-onafhankelijke marker voor de greep-carousels — punt 644) */

/* (regel verwijderd: voorloper van `.nl-greep-cc`, die Age op 31-08 introduceerde als
   hash-onafhankelijke marker voor de greep-carousels — punt 644) */

/* (regel verwijderd: voorloper van `.nl-greep-cc`, die Age op 31-08 introduceerde als
   hash-onafhankelijke marker voor de greep-carousels — punt 644) */

/* (regel verwijderd: voorloper van `.nl-greep-cc`, die Age op 31-08 introduceerde als
   hash-onafhankelijke marker voor de greep-carousels — punt 644) */


/* ===== hero--clean: schone crème-header zonder donkere tekstplaat + donkere tekst (Age 2026-08-27) ===== */
.layer--hero.hero--clean .layer__hero-body::before{ background: none !important; }
.layer--hero.hero--clean :is(.layer__payoff-title, .layer__payoff-subtitle){ color: #3a2132; }

/* Geen gradient-overlay op hero (framework-default onderdrukken) */
.layer--hero.hero--no-gradient.layer__hero .layer__hero-body::before {
    background: none;
}
.layer--hero.hero--no-gradient .button.button--primary {
    background-color: #9e4750;
    color: #fff;
}

/* ===== Summertime hero: gradient links (desktop) + gestapelde layout (mobiel) — Age 2026-08-27 ===== */

/* Desktop: groene gradient van links naar rechts voor tekst-leesbaarheid */
.layer--hero.hero--gradient-left .layer__hero-body::before {
    background: linear-gradient(to right,
        rgba(38, 64, 49, 0.90) 0%,
        rgba(38, 64, 49, 0.70) 30%,
        rgba(38, 64, 49, 0.35) 55%,
        transparent 80%);
}

/* Mobiel: foto boven, tekst in groen vlak eronder */
@media (max-width: 768px) {
    .layer--hero.hero--gradient-left .layer__hero-body {
        display: flex;
        flex-direction: column;
    }
    .layer--hero.hero--gradient-left .layer__hero-media-wrap {
        position: relative;
        min-height: 55vh;
        flex-shrink: 0;
    }
    .layer--hero.hero--gradient-left .layer__hero-overlays {
        display: block;
        height: auto;
    }
    .layer--hero.hero--gradient-left .layer__hero-overlay {
        background: #264031;
        padding: 2rem 1.25rem 3rem;
        height: auto;
    }
    .layer--hero.hero--gradient-left .layer__hero-body::before {
        display: none;
    }
    .layer--hero.hero--gradient-left :is(.layer__payoff-title, .layer__payoff-subtitle) {
        color: #fff;
    }
}
/* Lichtgroene variant gradient (hero 2 summertime) — grasgroen uit mobiele headerfoto */
.layer--hero.hero--gradient-green .layer__hero-body::before {
    background: linear-gradient(to right,
        rgba(90, 115, 40, 0.90) 0%,
        rgba(90, 115, 40, 0.70) 30%,
        rgba(90, 115, 40, 0.35) 55%,
        transparent 80%);
}
@media (max-width: 768px) {
    .layer--hero.hero--gradient-green .layer__hero-overlay {
        background: #5a7328;
    }
}

/* ===== Dropdown submenu: roze vlak, radius alleen onderaan ===== */
@media (min-width: 48.0625rem) {
    .site-header .site-nav__list--depth-1 {
        background: #e8a0c0;
        border-color: #d48aab;
        border-radius: 0 0 var(--radius-md, 0.5rem) var(--radius-md, 0.5rem);
    }
    .site-header .site-nav__list--depth-1 .site-nav__link {
        color: #fff;
    }
    .site-header .site-nav__list--depth-1 .site-nav__link:hover {
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
        opacity: 1;
    }
}


/* ===== geen afspeelknop op autoplay-video's (spelen vanzelf) — Age 2026-08-28 ===== */
.media:has(video.media-video[data-autoplay="1"]) .media-play { display: none !important; }


/* ===== Productpagina-koppen 'Productinformatie' + 'Onlangs bekeken' in Cormorant Garamond — Age 2026-08-28 ===== */
.product-detail__description > h2,
.product-detail__related > h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
}


/* herfst-winter-ruimere-secties: ruimere tussenruimtes tussen de secties op /landingspagina-herfst-winter.
   Route-marker nl-roomy op #main-content (custom.js). Zomer-buitenleven als referentie.
   Heroes (full-bleed) blijven ongemoeid; alleen de content-secties krijgen meer lucht. Age 2026-08-28. */
:where(.nl-roomy) > .layer--text,
:where(.nl-roomy) > .layer--columns {
    padding-top: 4em;
    padding-bottom: 4em;
}
:where(.nl-roomy) > .layer--cards {
    padding-top: 3.5em;
    padding-bottom: 3.5em;
}
:where(.nl-roomy) > .layer--usps {
    padding-top: 2.5em;
    padding-bottom: 4em;
}


/* kerst-hero2-gradient: gradient-overlay over de foto van kerst hero 2 (marker nl-hero-grad via custom.js).
   Zomer-buitenleven hero 2 als referentie; kerst-plum #411631, links dekkend -> rechts transparant
   zodat de tekst leesbaar blijft en de kerstpakket-foto rechts vrij komt. Age 2026-08-28. */
.nl-hero-grad .layer__hero-media-wrap {
    position: relative;
}
.nl-hero-grad .layer__hero-media-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg,
        rgba(65, 22, 49, 0.72) 0%,
        rgba(65, 22, 49, 0.52) 28%,
        rgba(65, 22, 49, 0.24) 50%,
        rgba(65, 22, 49, 0.00) 72%);
}

/* Framework-reviewtest: dezelfde tussenruimte als de live reviewlaag. */
.layer--reviews.reviews-view--grid-horizontal .reviews-grid--grid-horizontal {
    margin-top: 2rem;
}
.layer--reviews.reviews-view--grid-horizontal .reviews__item-foot {
    gap: .15rem;
}
@media (max-width: 767px) {
    /* Mobiel: foto staat boven de tekst, gradient van onder-vervagend zodat de foto zichtbaar blijft */
    .nl-hero-grad .layer__hero-media-wrap::after {
        background: linear-gradient(180deg,
            rgba(65, 22, 49, 0.00) 40%,
            rgba(65, 22, 49, 0.55) 100%);
    }
}

/* SiteApp review-proef: behoudt de CMS-achtergrond over de volle viewport.
   De regel blijft onder de testflag zodat de bestaande live-renderer ongemoeid blijft. */
html[data-siteapp-probe="1"] .layer--reviews.reviews-view--grid-horizontal > .layer__bg {
    position: absolute;
    inset: 0;
    height: auto;
}

html[data-siteapp-probe="1"] .layer--reviews.reviews-view--grid-horizontal .review-card { grid-template-columns: 255px minmax(0, 1fr); }
html[data-siteapp-probe="1"] .layer--reviews.reviews-view--grid-horizontal .review-card__by::after { content: attr(data-source); }


/* ===== Landscape/carousel cards even hoog: titel reserveert 2 regels zodat 1- en 2-regelige titels gelijke kaarthoogte geven — Age 2026-08-31 ===== */
.layer--cards [data-cols="4"] .card--banner .card__title,
.layer--cards .carousel__container[data-layout-cols="4"] .card--banner .card__title,
.cards-landscape .card--banner .card__title {
    min-height: 4.2rem;
}


/* ===== Sitemap: niet-klikbaar groep-label ("Inspiratie thema's") in het grijs van de sub-divider ipv hard zwart — Age 2026-08-31 ===== */
.sitemap__item > .sitemap__link.sitemap__link--no-route {
    color: #c9c9c9;
}


/* home-laat-je-inspireren-tight-top: halveer de roze ruimte boven "Laat je inspireren" op home.
   Negatieve marge eet de lege (transparante) onder-padding van de vorige sectie op,
   raakt de foto niet; iets minder top-padding op de laag zelf. Age 2026-08-28. */
.layer--cards.nl-tight-top {
    margin-top: -32px;
    padding-top: 4px;
}


/* ===== Hero: tekst-overlay boven de wave zodat lange payoff-tekst niet achter het wave-effect valt (o.a. Edge/Windows-scaling) — Age 2026-08-31 ===== */
.layer--hero .layer__hero-body .layer__hero-overlays {
    z-index: 3;
}


/* mobiel-2-koloms-productgrid: op mobiel 2 producten per rij in het product-overzicht.
   Standaard valt het auto-fill-grid onder ~560px terug naar 1 kolom; hieronder forceren we 2. Age 2026-08-28. */
@media (max-width: 575px) {
    .product-overview__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}


/* mobiel-login-prijs-knop-passend: "Inloggen / registreren voor prijs"-knop passend maken in het 2-koloms
   product-grid op mobiel (brak eerst af/clipte). Kleiner + netjes afbreken i.p.v. nowrap. Age 2026-08-28. */
@media (max-width: 575px) {
    .product-overview__grid .product-card__price-login-link {
        font-size: 11px;
        padding: 5px 8px;
        white-space: normal;
        text-align: center;
        line-height: 1.25;
    }
}


/* home-hero-secondary-knop-leesbaar: secundaire hero-knop ("Word verkooppunt") op mobiel leesbaar houden.
   De ghost-knop (witte tekst/rand) viel weg waar z'n onderhelft over de lichte wave-rand valt.
   Donkere doorschijnende vulling -> witte tekst leest op zowel de foto als de lichte rand.
   Strak gescoped op de home-hero (button--secondary wordt elders ook gebruikt). Age 2026-08-28. */
@media (max-width: 767px) {
    .nl-home-hero .button--secondary {
        background-color: rgba(0, 0, 0, 0.38) !important; /* basis zet bg met !important in een layer */
        border-color: rgba(255, 255, 255, 0.92);
    }
}


/* ===== Kerst hero 2 (nl-hero-grad) mobiel: tekst bovenaan over de bokeh en de productfoto komt er NETJES ONDER — Age 2026-08-31 =====
   Was: tekst onderaan (align-self:end) over min-height 42vw -> lange tekst overlapte de producten in de foto.
   Nu (<=767px): meer hoogte, tekst top-uitgelijnd, foto vanaf de bovenkant (bokeh achter de tekst) en leesbaarheids-gradient
   die de BOVENkant verdonkert (i.p.v. de onderkant) zodat de producten onderin vrij en helder blijven. */
@media (max-width: 767px) {
    #main-content:has(.kerst-page) .layer--hero.nl-hero-grad:has(.layer__payoff[data-position-vertical="end"]) .layer__hero-body {
        min-height: 900px;
    }
    .layer--hero.nl-hero-grad .layer__payoff { align-self: start; }
    .layer--hero.nl-hero-grad .layer__bg { background-position: 50% 0%; object-position: 50% 0%; }
    .layer--hero.nl-hero-grad .layer__hero-media-wrap::after {
        background: linear-gradient(180deg,
            rgba(65, 22, 49, 0.55) 0%,
            rgba(65, 22, 49, 0.50) 40%,
            rgba(65, 22, 49, 0.38) 60%,
            rgba(65, 22, 49, 0.00) 74%) !important;
    }
}

/* hero--payoff-half mobiel: tekst verdwijnt achter overflow:hidden.
   Oorzaak: flex-column stapelt media-wrap (938px) + overlays (447px) > max-height (650px).
   Fix: media-wrap absoluut zodat tekst-overlay OVER de foto valt i.p.v. eronder. Age 2026-08-31. */
@media (max-width: 767px) {
    .layer--hero.hero--payoff-half .layer__hero-media-wrap {
        position: absolute;
        inset: 0;
        min-height: 0;
    }
    .layer--hero.hero--payoff-half .layer__hero-overlays {
        position: relative;
        z-index: 1;
    }
}


/* Overlay op de wrapper-div (de <img> zelf kan geen ::after hebben) — Age 2026-08-31 */
.nl-hero-grad .layer__hero-media-wrap { position: relative; }
.nl-hero-grad .layer__hero-media-wrap::after { z-index: 1; }


/* ===== Footer onderbalk mobiel: alles onder het grijze streepje centreren (legal-links, copyright, Multiminded-logo) — Age 2026-08-31 ===== */
@media (max-width: 767px) {
    .site-footer__credit {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 1rem;
    }
    .site-footer__credit-group {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: .5rem;
    }
    .site-footer__legal { justify-content: center; text-align: center; }
    .site-footer__copyright { width: 100%; text-align: center; }
}

/* Productbeschrijving: inline-styles uit geplakte content resetten naar site-typografie.
   Bron: Word/editor-paste plakt font-family/font-size/line-height als inline style. Age 2026-08-31. */
.product-detail__description-body [style] {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}


/* usp-iconen-top-uitlijnen (sitebreed): USP-iconen bovenin uitlijnen.
   De .usp is een grid met align-items:center; bij verschillende teksthoogtes stonden de
   iconen op verschillende hoogtes. Top-uitlijnen laat ze netjes bij de eyebrow-labels staan.
   Op verzoek van Age sitebreed toegepast (2026-08-31). */
.layer--usps .usp {
    align-items: start;
}


/* ===== Magazine flipbook mobiel: roze achtergrond-container om de pagina laten sluiten i.p.v. 100dvh (veel lege ruimte) — Age 2026-08-31 =====
   De wrap-hoogte wordt door JS op ~100dvh gezet; de landscape-pagina is smal/kort waardoor er enorm veel roze overbleef.
   Stage om de flip laten sluiten (flex:none/height:auto) zodat de wrap meekrimpt. Fullscreen (100vh) blijft ongemoeid via :not(:fullscreen). */
@media (max-width: 767px) {
    .flipbook-wrap:not(:fullscreen) {
        height: auto !important;
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    .flipbook-wrap:not(:fullscreen) .flipbook-stage {
        flex: none !important;
        height: auto !important;
        min-height: 0 !important;
    }
}


/* zomer-carousel-2-kaarten-mobiel: op /zomer-buitenleven (marker nl-zomer) 2 volle kaarten tonen in de
   carousel op mobiel i.p.v. ~1 (kaart-basis van 80% -> 46%, laat een glimp van de 3e zien). Age 2026-08-31. */
@media (max-width: 767px) {
    .nl-zomer .carousel__container .carousel__slide {
        flex-basis: 46% !important;
    }
}


/* kerst-fav-minder-roze-boven-titel: halveer de roze ruimte boven de titel "Favoriete kaarsen voor in de
   kerstpakketten:" (marker nl-tight-fav via custom.js). Negatieve marge eet de lege ruimte op,
   iets minder top-padding; ~72px -> ~36px. Age 2026-08-31. */
.layer--cards.nl-tight-fav {
    margin-top: -18px;
    padding-top: 14px;
}


/* greep-carousel-consistent-marker: "Greep uit ons assortiment"-carousels (marker nl-greep-cc) overal gelijk:
   navigatie ONDER de kaarten (i.p.v. overlay op de zijkanten), gelijke kaarthoogte, en 2 kaarten
   op mobiel. Hash-onafhankelijk (per-laag hashes wisselen). Age 2026-08-31. */
.nl-greep-cc .carousel__controls {
    position: static;
    display: flex;
    justify-content: flex-end;
    padding: 12px 0 0;
    pointer-events: auto;
    inset: auto;
}
.nl-greep-cc .carousel__buttons {
    display: flex;
    gap: 8px;
}
.nl-greep-cc .carousel__container {
    align-items: stretch;
}
.nl-greep-cc .card--banner {
    height: auto;
}
.nl-greep-cc .card__content {
    height: 100%;
}
.nl-greep-cc .card__link {
    height: 100%;
}
.nl-greep-cc .card__title {
    min-height: 66px;
    display: flex;
    align-items: center;
}
@media (max-width: 767px) {
    .nl-greep-cc .carousel__slide {
        flex-basis: 46% !important;
    }
}


/* Het interim-blok dat hier stond (hero--auto-grow met height/max-height/overflow op
   !important) is weg: de uitzondering staat nu bij de cap zelf, in layers.css onder
   `.layer__hero-body[data-format=...]`. Het was géén framework-regressie — de cap is
   altijd van onszelf geweest, en het framework kent `hero--auto-grow` niet eens.
   Dat de override het deed kwam doordat hij buiten `@layer site` stond en unlayered
   dus van layered wint; de drie !important-vlaggen deden niets. (punt 635) */


/* ===== USP-strip desktop: gelijk verdelen i.p.v. content-brede kolommen + space-between (oogde scheef/links-zwaar) — Age 2026-08-31 =====
   Base-regel was repeat(4, auto) + space-between -> ongelijke kolommen, oplopende tussenruimte. Nu 4 gelijke kolommen, elke USP gecentreerd.
   Alleen >900px; mobiel (<=900px) blijft de horizontale scroll. */
@media (min-width: 901px) {
    /* Uitgezonderd: `.usp-strip-compact`. Die loopt sinds 31-08 over de volle breedte met
       space-between (verzoek Age), en deze regel is specifieker dan die van de strip zelf --
       hij won dus stil en zette de vier vaste kolommen terug. */
    .layer--usps.layer-section:not(.usp-strip-compact) .layer__usps-list {
        grid-template-columns: repeat(4, 1fr);
        justify-items: center;
    }
}

/* Webshop: rode verkoopprijs/staffelprijs naar site-roze i.p.v. standaard rood. Age 2026-08-31. */
.product-detail { --ws-price-sale-color: #c97aab; }

/* Mobiel menu: "Favorieten"-tekst verbergen + hartje als laatste knop. Age 2026-08-31. */
.site-nav__ctas--mobile [data-nav-cta="favorites"] .site-nav__cta-text { display: none; }
.site-nav__ctas--mobile [data-nav-cta="favorites"] { order: 99; }

/* Mobiel menu: dubbele lijn onder Contact weg (border Contact + border CTA-balk). Age 2026-08-31. */
.site-nav__list--depth-0 > .site-nav__item:last-child { border-bottom: none; }


/* zomerfavorieten-portrait-45: "Onze zomerfavorieten"-cards staande 4:5-verhouding (zoals ss02, de herfst-
   'Favorieten'). Marker nl-portrait-cards (custom.js). Framework zet aspect inline (4/3), dus
   !important. Age 2026-08-31. */
.nl-portrait-cards .card--banner .card__media {
    aspect-ratio: 4 / 5 !important;
}


/* ===== mijn-account-header-en-orderkaarten: Mijn account header (naam/badge/uitloggen), tabs, status-pills en
   mobiele herindeling van de orderkaarten. Semantische BEM-klassen (geen route/id). Age 2026-08-31. ===== */
.layer__account .account__head {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "title title" "badge logout";
    align-items: center;
    gap: .55rem 1rem;
    margin-bottom: 1.4rem;
}
.layer__account .account__head h1 { grid-area: title; margin: 0 0 .1rem; }
.layer__account .account__badge {
    grid-area: badge; justify-self: start;
    display: inline-flex; align-items: center;
    padding: .34em .85em; border-radius: 999px;
    font-size: .82rem; font-weight: 600; line-height: 1;
}
.layer__account .account__badge--approved { background: #e4f3ea; color: #2c7a4b; }
.layer__account .account__logout { grid-area: logout; justify-self: end; margin: 0; }
.layer__account .account__logout .button {
    background: transparent;
    color: var(--color-primary);
    border: 1.5px solid color-mix(in srgb, var(--color-primary) 50%, #fff);
    border-radius: 999px;
    padding: .5em 1.15em;
    font-size: .85rem; font-weight: 600;
    box-shadow: none;
}
.layer__account .account__logout .button:hover {
    background: var(--color-primary); color: #fff; border-color: var(--color-primary);
}
/* Tabs */
.layer__account .account__nav {
    display: flex; gap: .1rem;
    border-bottom: 1px solid rgba(0,0,0,.1);
    margin-bottom: 1.5rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.layer__account .account__nav-item {
    padding: .65em .95em;
    color: #6b6b6b; text-decoration: none;
    font-weight: 500; white-space: nowrap;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.layer__account .account__nav-item.is-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 600;
}
/* Ordernummer niet als kale blauwe link */
.layer__order-history .order-history__number,
.layer__order-history .order-history__number a {
    color: var(--color-primary);
    font-weight: 700; text-decoration: none; font-size: 1.05rem;
}
/* Statuslabel als gekleurde pill */
.layer__order-history .order-history__status {
    padding: .32em .75em; border-radius: 999px;
    font-size: .76rem; font-weight: 700; line-height: 1; white-space: nowrap;
}
.layer__order-history .order-history__status--paid { background: #e4f3ea; color: #2c7a4b; }
.layer__order-history .order-history__status--failed,
.layer__order-history .order-history__status--expired,
.layer__order-history .order-history__status--canceled { background: #fceaea; color: #c0392b; }
.layer__order-history .order-history__status--pending,
.layer__order-history .order-history__status--open { background: #fdf1e3; color: #b9741f; }
.layer__order-history .order-history__item-total { font-size: 1.15rem; font-weight: 700; }
/* Mobiel: kaart netjes stapelen (desktop 4-koloms grid knelt onder ~600px) */
@media (max-width: 600px) {
    .layer__order-history .order-history__item {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "meta    status"
            "price   price"
            "actions actions";
        row-gap: .8rem;
        align-items: center;
    }
    .layer__order-history .order-history__status { align-self: start; justify-self: end; }
    /* Knoppenrij als eigen volle-breedte flexrij (override display:contents) */
    .layer__order-history .order-history__actions {
        display: flex;
        grid-area: actions;
        align-items: center;
        gap: .6rem;
        flex-wrap: wrap;
    }
    .layer__order-history .order-history__reorder { margin-left: auto; }
    .layer__order-history .order-history__reorder .button { white-space: nowrap; }
}


/* ===== winkelmand-stepper-verwijder-voucher: winkelmand aantal-stepper (was kale blauwe iOS-knoppen), verwijder-knop
   en "Toepassen"-knop in de huisstijl. Semantische BEM-klassen. Age 2026-08-31. ===== */
.layer__basket .basket__qty {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid rgb(240, 218, 231);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    height: 2.7em;
}
.layer__basket .basket__qty-dec,
.layer__basket .basket__qty-inc {
    -webkit-appearance: none; appearance: none;
    border: none;
    background: rgb(253, 245, 249);
    color: var(--color-primary);
    width: 2.7em;
    font-size: 1.05rem; font-weight: 700; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.layer__basket .basket__qty-dec:hover,
.layer__basket .basket__qty-inc:hover {
    background: var(--color-primary); color: #fff;
}
.layer__basket .basket__qty-input {
    -webkit-appearance: none; -moz-appearance: textfield; appearance: none;
    width: 2.8em; border: none; text-align: center;
    background: #fff; color: #2a2a2a; font-size: 1rem; font-weight: 600;
}
.layer__basket .basket__qty-input::-webkit-outer-spin-button,
.layer__basket .basket__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Verwijder-knop subtiel (was kaal) */
.layer__basket .basket__remove {
    -webkit-appearance: none; appearance: none;
    background: transparent; border: none;
    color: #b6b6b6; cursor: pointer;
    font-size: 1.15rem; line-height: 1;
    padding: .35em; border-radius: 8px;
    transition: color .15s ease, background .15s ease;
}
.layer__basket .basket__remove:hover { color: #c0392b; background: #fceaea; }

/* "Toepassen" (kortingscode) in merk-stijl i.p.v. donkere outline */
.layer__basket .basket__voucher-row .button--secondary {
    background: #fff;
    color: var(--color-primary);
    border: 1.5px solid color-mix(in srgb, var(--color-primary) 55%, #fff);
    font-weight: 600;
}
.layer__basket .basket__voucher-row .button--secondary:hover {
    background: var(--color-primary); color: #fff;
    border-color: var(--color-primary);
}


/* Account-tabs: scrollbar verbergen (Firefox toont een roze balkje
   door accent-color + overflow-x:auto op .account__nav). Age 2026-08-31. */
.layer__account .account__nav {
    scrollbar-width: none;
}
.layer__account .account__nav::-webkit-scrollbar {
    display: none;
}


/* ===== winkelmand-mobiel-productregel-en-verzending: mobiele herindeling winkelmand-productregel + verzendoptie-uitlijning.
   1) tekst niet over de foto  2) kruisje rechtsboven  3) beide prijzen samen, stepper eronder
   4) "Afhalen" op de radiobutton-lijn + prijs mee. Age 2026-08-31. ===== */
@media (max-width: 640px) {
    .layer__basket .basket__row {
        display: grid;
        grid-template-columns: 76px 1fr auto auto;
        grid-template-areas:
            "image title title title"
            "image .     unit  total"
            "image qty   qty   qty";
        column-gap: 14px;
        row-gap: 10px;
        align-items: start;
        position: relative;
        padding: 16px 16px 22px;      /* 5) links-spacing foto + 3) meer bodem-spacing */
        box-shadow: none;             /* 4) slagschaduw eruit */
        border: 1px solid #f0e3ea;    /* subtiele rand ipv schaduw */
    }
    .layer__basket .basket__item-image-cell {
        grid-area: image; width: 76px; min-width: 76px; max-width: 76px; padding: 0;
    }
    .layer__basket .basket__item-image,
    .layer__basket .basket__item-image-cell > a {
        width: 76px; height: 76px; min-width: 76px;
    }
    .layer__basket .basket__item-title-cell {
        grid-area: title; padding-inline-start: 0; padding-inline-end: 1.6rem; align-self: start;
    }
    /* Kruisje rechtsboven, rechterrand in lijn met stepper/prijzen */
    .layer__basket .basket__remove-cell {
        position: absolute; top: 12px; right: 14px; padding: 0;
        width: auto; min-width: 0;
        display: flex; justify-content: flex-end;
    }
    .layer__basket .basket__remove { padding: 2px; }
    /* 1) Prijzen rechts uitgelijnd, naast elkaar */
    .layer__basket .num.basket__unit-price {
        grid-area: unit; text-align: right; justify-self: end; align-self: center;
        white-space: nowrap; border-top: none;
    }
    .layer__basket .num.basket__line-total {
        grid-area: total; text-align: right; justify-self: end; align-self: center;
        font-weight: 700; white-space: nowrap; border-top: none;
    }
    /* 2) Aantal-selectie eronder, rechts uitgelijnd (in lijn met kruisje + prijzen) */
    .layer__basket .num.basket__qty-cell {
        grid-area: qty; justify-self: end; padding-inline: 0; border-top: none;
    }
    /* 1) Subtiele lijntjes boven prijzen/stepper weg */
    .layer__basket .basket__unit-price,
    .layer__basket .basket__line-total,
    .layer__basket .basket__qty-cell { border-top: none; }
    /* Verzendoptie: radio + "Afhalen" (1e regel) + prijs op één lijn */
    .layer__basket .basket__delivery-option { align-items: start; }
    .layer__basket .basket__delivery-option > input[type="radio"] { margin-top: 0.3em; }
    .layer__basket .basket__delivery-cost { align-self: start; margin-top: 0.1em; }
}


/* ===== Checkout: radio/checkbox uitlijnen met de EERSTE regel bij meerregelige labels — Age 2026-08-31 =====
   Framework forms.css zet .form-radio/.form-checkbox op align-items:center -> bij een label dat over 2 regels
   loopt (Afhalen-verzendoptie, akkoord-checkbox) staat de radio/checkbox in het midden tussen de regels.
   Nu uitgelijnd met de eerste regel (+ kleine nudge zodat de control optisch op de eerste regel valt).
   Alleen de delivery-radio's en de akkoord-checkbox; de icoon-betaalmethodes (1 regel) blijven ongemoeid. */
.checkout-form .form-radio:has(input[name="delivery_method_id"]),
.checkout-form .form-checkbox {
    align-items: flex-start;
}
.checkout-form .form-radio:has(input[name="delivery_method_id"]) .form-radio__input,
.checkout-form .form-checkbox:not(:has(input[name="billing_use_shipping"])) .form-checkbox__input {
    margin-top: 0.2rem;
}


/* Hero wave mobiel: extra hoogte zodat knoppen niet achter wave vallen + lijntje weg. Age 2026-09-01. */
@media (max-width: 600px) {
    .hero-wave-standard .layer__hero-body,
    .hero-wave-christmas .layer__hero-body {
        max-height: calc(80dvh + 40px);
    }
    .layer__hero.hero-wave-standard::after,
    .layer__hero.hero-wave-christmas::after {
        bottom: -1px;
    }
}


/* ===== kruimelpad-mobiel-netjes: kruimelpad netjes op mobiel — items inline, chevrons inline,
   lange tussenliggende SEO-titel afkappen met ellipsis. Age 2026-09-01. ===== */
@media (max-width: 640px) {
    .layer__breadcrumbs .breadcrumb {
        flex-wrap: wrap;
        align-items: center;
        gap: 0 6px;
        font-size: 0.82rem;
        line-height: 1.15;
    }
    .layer__breadcrumbs .breadcrumb__item > a,
    .layer__breadcrumbs .breadcrumb__item > span {
        line-height: 1.15;
        padding-block: 1px;      /* was 4px -> regels dichter op elkaar */
        min-height: 0;           /* was 24px tap-target */
    }
    .layer__breadcrumbs .breadcrumb__item {
        display: inline-flex;
        align-items: center;
        min-width: 0;
    }
    /* chevron (::before op item 2+) netjes inline naast de tekst */
    .layer__breadcrumbs .breadcrumb__item::before {
        align-self: center;
        margin-right: 4px;
        line-height: 1;
    }
    .layer__breadcrumbs .breadcrumb__item > a,
    .layer__breadcrumbs .breadcrumb__item > span {
        display: inline-block;
        vertical-align: middle;
    }
    /* Lange tussenliggende (niet-huidige) link afkappen zodat het pad compact blijft */
    .layer__breadcrumbs .breadcrumb__item:not(.breadcrumb__item--current) > a {
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Huidige (product)naam mag over 2 regels, maar niet buiten beeld */
    .layer__breadcrumbs .breadcrumb__item--current > span {
        max-width: 100%;
        white-space: normal;
    }
}


/* ===== kenmerken-mobiel-gestapeld: Kenmerken (product-specs) op mobiel gestapeld i.p.v. 2 kolommen:
   label boven, waarde eronder. Rij is display:contents (grid) -> op mobiel block. Age 2026-09-01. ===== */
@media (max-width: 640px) {
    .product-detail__specs { display: block !important; }
    .product-detail__spec-row {
        display: block !important;
        margin: 0 0 0.85rem;
        padding: 0;
    }
    .product-detail__spec-label {
        display: block !important;
        font-weight: 600;
        color: #2a2a2a;
        margin-bottom: 1px;
    }
    .product-detail__spec-value {
        display: block !important;
        margin: 0;
        color: #555;
    }
}


/* ===== productpagina-mobiel-titel-boven-foto-en-whatsapp: op mobiel de producttitel + SKU BOVEN de foto (1), en de zwevende
   WhatsApp-knop boven de sticky "Bestel"-balk (2, geen overlap meer). Age 2026-09-01. ===== */
@media (max-width: 640px) {
    /* 1) titel + sku boven de gallery: info afvlakken (display:contents) en volgorde sturen */
    .product-detail {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem;
    }
    .product-detail__info { display: contents !important; }
    .product-detail__title { order: -2 !important; margin-bottom: 0; }
    .product-detail__sku { order: -1 !important; margin-top: -0.5rem; }
    .product-detail__gallery { order: 0 !important; }
    /* 2) WhatsApp-knop omhoog wanneer de sticky bestel-balk aanwezig is */
    body:has(.product-detail__sticky-add) .site-whatsapp {
        bottom: 84px;
    }
}


/* Aantal-selector: simpele bordered boxes. Age 2026-09-01. */
.form-quantity {
    border: 1px solid #ccc;
    border-radius: 0;
}
.form-quantity__btn {
    background: transparent;
    color: #333;
}
.form-quantity__btn:hover {
    background: #f5f5f5;
}
.form-quantity__input {
    border-inline: 1px solid #ccc;
}
.form-quantity:focus-within {
    border-color: #999;
    box-shadow: none;
}


/* Winkelmand aantal-selector: zelfde simpele stijl als productpagina. Age 2026-09-01. */
.layer__basket .basket__qty {
    border: 1px solid #ccc;
    border-radius: 0;
    background: #fff;
}
.layer__basket .basket__qty-dec,
.layer__basket .basket__qty-inc {
    background: transparent;
    color: #333;
    font-weight: 400;
}
.layer__basket .basket__qty-dec:hover,
.layer__basket .basket__qty-inc:hover {
    background: #f5f5f5;
    color: #333;
}
.layer__basket .basket__qty-input {
    border-inline: 1px solid #ccc;
    font-weight: 400;
}


/* Aantal-input: spinner-pijltjes weg in Firefox. Age 2026-09-01.
   Hogere specificiteit (.layer__basket ...) nodig om framework 'appearance:none' te overrulen;
   Firefox verbergt de spinner alleen met 'textfield', niet met 'none'. */
.layer__basket .basket__qty-input,
.form-quantity .form-quantity__input {
    -moz-appearance: textfield;
    appearance: textfield;
}


/* ===== prijs-excl-btw-uitlijnen: "excl. btw" op de baseline van de prijs (i.p.v. flex-end waardoor het
   onder de prijslijn zakte) en ~4px dichterbij. Desktop + mobiel. Age 2026-09-01. ===== */
.product-detail__price-box .product-detail__price-vat {
    align-self: baseline;
    margin-left: 0.8px;
}


/* ===== Mobiel menu: 3 CTA-knoppen (Mijn account/Winkelmand/favorieten) iets meer ruimte onder 'Contact' — Age 2026-08-31 ===== */
.site-nav__ctas.site-nav__ctas--mobile {
    margin-top: 1.75rem;
}


/* ===== Productgalerij mobiel: beeld opende veel te groot — Age 2026-09-01 =====
   Oorzaak: .product-detail is op mobiel flex-column met align-items:start, dus de galerij rekte NIET mee met de
   container maar groeide naar de beeldbreedte (bv. 1350px op een 375px scherm -> beeld ~3,6x te groot, half afgesneden).
   Fix: galerij altijd binnen de container/kolom houden (100% breed). Desktop (2-koloms grid) blijft z'n kolom vullen. */
.product-detail__gallery {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.product-detail__gallery-image {
    max-width: 100%;
}