/*
 * Draken — het gezicht van de speelgoedwinkel.
 *
 * Wat deze winkel anders maakt dan de basis waar ze op draait: warmte. De
 * basis is bijna zwart met een accent, en dat is de juiste keuze voor een
 * winkel die zich ernstig wil voordoen. Een speelgoedwinkel wil dat niet.
 *
 * Vandaar vier ingrepen, en verder blijft alles zoals het is:
 *
 *   1. De hero is oranje in plaats van bijna zwart, met de mascotte erin.
 *   2. Ronde hoeken staan ruimer dan elders. Een kinderwinkel heeft geen
 *      scherpe hoeken, letterlijk noch figuurlijk.
 *   3. De donkere stand is hier geen kantoor. Zie verderop.
 *
 * (Er was een vierde: dikke leeftijdsknoppen in de hero. Die zijn sinds
 * 16 oktober 2026 weg van de startpagina, zie onderdelen/hero.twig.)
 */

/* ──────────────────────────────────────────────────────── donkere stand ── */

/*
 * De basis (aambeeld) zet de donkere stand bijna zwart, met de kaart als
 * lichte uitzondering. Dat is de juiste keuze voor een winkel die zich
 * ernstig wil voordoen — hier niet. Sven: "das niet de lieve zachte elfjes
 * dark, das veel te donker en te hard. dit is een kinder site."
 *
 * De basis blijft bijna zwart voor elke andere winkel; hier verschuift de
 * hele donkere stand naar een diepe, warme pruimbruine grond, met kaarten
 * een tint lichter dan de bladzijde eromheen, tekst in gebroken room in
 * plaats van hard wit, het oranje gedempt naar terracotta, en het roze uit
 * de knuffel op de hero als tweede accent naast het groen.
 *
 * Elke kleur is gemeten: alle tekstkleuren halen minstens 4,5:1 op de grond
 * waar ze op staan (3:1 voor de grote koppen op het terracotta en het roze),
 * op 1280 en 390 pixels, met een schermafdruk erbij als bewijs.
 */
:root[data-thema='donker'] {
    --grond: #241A1D;
    --grond-warm: #2A1F21;
    --grond-diep: #1C1416;
    --paneel: #362729;

    --lijn: #4A3638;
    --lijn-zacht: #3A2C2E;
    --lijn-sterk: #5C4548;

    --inkt: #F3E7DC;
    --inkt-zacht: #D8C4B8;
    --inkt-gedempt: #B79C8F;
    --inkt-flauw: #A48E81;

    /* Het oranje uit het logo, maar dan gedempt: minder fel, warmer, en nog
       altijd 6:1 op de grond en 6,3:1 met donkere tekst erop. */
    --accent: #E2825A;
    --accent-diep: color-mix(in oklab, var(--accent) 86%, #000);
    --accent-waas: color-mix(in oklab, var(--accent) 22%, transparent);
    --op-accent: #2A1508;

    /* Het roze uit de knuffel op de hero, als tweede accent naast het groen
       van het draakje. Voor de speelhoek en de tweede knop. */
    --steun: #E5A0B8;
    --steun-waas: color-mix(in oklab, var(--steun) 20%, transparent);
    --op-steun: #3D1626;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-thema='licht']) {
        --grond: #241A1D;
        --grond-warm: #2A1F21;
        --grond-diep: #1C1416;
        --paneel: #362729;

        --lijn: #4A3638;
        --lijn-zacht: #3A2C2E;
        --lijn-sterk: #5C4548;

        --inkt: #F3E7DC;
        --inkt-zacht: #D8C4B8;
        --inkt-gedempt: #B79C8F;
        --inkt-flauw: #A48E81;

        --accent: #E2825A;
        --accent-diep: color-mix(in oklab, var(--accent) 86%, #000);
        --accent-waas: color-mix(in oklab, var(--accent) 22%, transparent);
        --op-accent: #2A1508;

        --steun: #E5A0B8;
        --steun-waas: color-mix(in oklab, var(--steun) 20%, transparent);
        --op-steun: #3D1626;
    }
}

/* ───────────────────────────────────────────────────────────────── hero ── */

.hero--speels {
    background:
        radial-gradient(120% 120% at 12% 0%, #F2703A 0%, var(--accent) 46%, #B93A12 100%);
    color: #FFF6EE;
}

/* De inhoud en de mascotte staan naast elkaar, met de tekst als eerste in de
   HTML. Op een telefoon zakt de mascotte eronder en wordt hij kleiner: daar
   telt de knop naar de winkel, niet het plaatje. */
.hero--speels .hero__lijf {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
    align-items: center;
    gap: var(--ruimte-8);
}

.hero__mascotte {
    justify-self: center;
    line-height: 0;
}

.hero__mascottebeeld {
    width: min(100%, 32rem);
    height: auto;
    /* Een schaduw die op de grond ligt in plaats van eromheen: het draakje
       staat op het oranje, hij zweeft er niet boven. */
    filter: drop-shadow(0 18px 22px rgb(90 24 4 / 0.35));
    transform: rotate(-3deg);
}

@media (max-width: 900px) {
    .hero--speels .hero__lijf {
        grid-template-columns: 1fr;
    }

    .hero__mascottebeeld {
        width: min(60%, 15rem);
    }
}

/* Op het oranje moet de tekst wit blijven, ook waar de basis hem grijs zet. */
.hero--speels .hero__tekst,
.hero--speels .hero__oog {
    color: #FFF1E6;
}

.hero--speels .hero__oog {
    color: #FFE9C9;
}

/* De tweede knop staat op een gekleurd vlak, dus glas werkt hier niet: dat
   wordt een vage vlek. Een witte knop met de accentkleur erin leest wel. */
.hero--speels .knop--glas {
    background: #FFFFFF;
    color: var(--accent-diep, #B93A12);
    border-color: #FFFFFF;
}

.hero--speels .knop--accent {
    /* Donkerbruin op oranje. Het geel uit het logo leek de logische keuze,
       maar geel op oranje scheelt te weinig: de knop verdween in het vlak. */
    background: #2A1508;
    color: #FFE9C9;
    border-color: transparent;
}

.hero--speels .knop--accent:hover {
    background: #000000;
    color: var(--steun);
}

/* ─────────────────────────────────────────────────────────────── tegels ── */

/* De categoriebeelden zijn uitgeknipte producten op doorzichtig. Die staan
   het best op een zacht vlak met lucht eromheen, niet strak in een kader. */
.tegel__beeld {
    background: var(--grond-warm);
    padding: var(--ruimte-3);
}

.tegel {
    border-radius: var(--radius-l, 14px);
}

/* ───────────────────────────────────────────── de hero met een echte foto ── */

/*
 * Staat er een sfeerfoto in de hero, dan valt het oranje vlak weg en moet de
 * tekst het tegen de foto opnemen. Bij Elfjes is die foto links warm en licht,
 * dus witte letters verdwijnen erin. Donkere letters op een lichte sluier
 * lezen wel, en de sluier laat de foto zien in plaats van hem af te dekken.
 */

.hero--speels.hero--beeld {
    background: #FBF3EA;
    color: #2A1508;
}

.hero--speels.hero--beeld .hero__doek::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        rgb(251 243 234 / 0.97) 0%,
        rgb(251 243 234 / 0.92) 26%,
        rgb(251 243 234 / 0.55) 44%,
        rgb(251 243 234 / 0) 62%);
    pointer-events: none;
}

/*
 * Het leesverloop van de basis rekent met --grond-diep, en dat draait mee met
 * licht en donker. Deze hero is altijd een licht crèmevlak, ook wanneer de
 * bezoeker zijn toestel op donker heeft staan — en dan legde de basis er een
 * bijna zwart verloop overheen. Het resultaat was een grijsbruine waas over een
 * foto van een kind, met de tekst er half in weggezakt.
 *
 * Hier staat dezelfde crème als in de sluier eronder, vast en niet als token.
 */
.hero--speels.hero--beeld::after {
    background: linear-gradient(
        to top,
        rgb(251 243 234 / 0.92) 0%,
        rgb(251 243 234 / 0.55) 34%,
        rgb(251 243 234 / 0) 72%
    );
}

@media (min-width: 861px) {
    .hero--speels.hero--beeld::after {
        background: linear-gradient(
            to right,
            rgb(251 243 234 / 0.94) 0%,
            rgb(251 243 234 / 0.90) 24%,
            rgb(251 243 234 / 0.55) 44%,
            rgb(251 243 234 / 0) 68%
        );
    }
}

/*
 * Het merkbeeld is anders dan een willekeurige foto.
 *
 * Het is met opzet gemaakt voor deze plek: het kind staat rechtsonder en
 * linksboven is er een leeg crèmevlak waar de tekst op past. Daar hoort dus
 * géén dekkende sluier overheen — die is er voor foto's die niet voor deze
 * plek gemaakt zijn. Een lichte hand volstaat, en dan blijft het beeld beeld.
 */
/*
 * De foto mag de hoogte van de band niet bepalen.
 *
 * Met height: 100% in een raster waarvan de rijhoogte nog niet vaststaat, valt
 * een beeld terug op zijn eigen verhouding. Dit beeld is staand, negenhonderd
 * bij negentienhonderd, en dus werd de band op een telefoon achthonderdvijftig
 * pixels hoog terwijl er vierhonderd aan tekst in stond: een half scherm leeg
 * crème boven de kop, en de knop onder de vouw.
 *
 * Absoluut positioneren haalt het beeld uit de stroom. Dan bepaalt de inhoud
 * de hoogte en vult het beeld wat er is.
 */
.hero--speels.hero--merkbeeld .hero__doek { position: relative; }

.hero--speels.hero--merkbeeld .hero__foto {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    /* Niet 'bottom': onderaan het beeld ligt de deken en niet het kind. Dit
       is de hoogte waarop het gezicht in de uitsnede valt bij elke bandhoogte
       die de band hier aanneemt. */
    object-position: 78% 52%;
}

/*
 * Eén sluier en niet twee. De basis legt er van onderaf ook nog een overheen,
 * en samen met deze werd het kind een vlek. Die van de basis gaat hier dus uit.
 *
 * De richting volgt de tekening: de tekst staat linksboven, het kind zit
 * rechtsonder. Een diagonaal dekt precies het ene af en laat het andere staan.
 */
.hero--speels.hero--merkbeeld .hero__doek::after {
    background: linear-gradient(
        158deg,
        rgb(251 243 234 / 0.88) 0%,
        rgb(251 243 234 / 0.78) 30%,
        rgb(251 243 234 / 0.34) 52%,
        rgb(251 243 234 / 0.06) 70%,
        rgb(251 243 234 / 0) 82%
    );
}

.hero--speels.hero--merkbeeld::after { background: none; }

/* Het kind in beeld houden. Zonder dit valt het bij een lage band buiten de
   uitsnede en blijft er alleen crème over. */
@media (max-width: 860px) {
    /*
     * De band mag niet hoger zijn dan wat er op één scherm past mét de knop.
     * Bij 84dvh stond "Naar de winkel" onder de vouw, en dan is de hele band
     * een plaatje geworden in plaats van een ingang. Tweeënzestig laat de
     * kop, de zin en de eerste knop staan.
     */
    .hero--speels.hero--merkbeeld { min-block-size: min(62dvh, 30rem); }
    .hero--speels.hero--merkbeeld .hero__foto { object-position: 76% 34%; }

    /* De tekst zit strakker tegen de onderkant, zodat de lucht bovenaan in het
       beeld zit en niet tussen de kop en de knop. */
    .hero--speels.hero--merkbeeld .hero__lijf {
        padding-block: var(--ruimte-6) var(--ruimte-6);
    }

    /*
     * Wat er op het eerste scherm hoort te staan, en wat niet.
     *
     * De hoogte van deze band wordt niet bepaald door een minimum maar door
     * wat erin staat, en er stond te veel in: een kop van twee regels, een
     * alinea van vier en twee knoppen. Op een telefoon duwde dat "Naar de
     * winkel" onder de vouw, en dan is de hele band een plaatje geworden in
     * plaats van een ingang.
     */

    /* En de alinea korter. Drie regels zegt hetzelfde als vijf; wie meer wil
       weten, klikt door. */
    .hero--speels .hero__tekst {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

@media (min-width: 861px) {
    .hero--speels.hero--merkbeeld .hero__doek::after {
        background: linear-gradient(
            to right,
            rgb(251 243 234 / 0.92) 0%,
            rgb(251 243 234 / 0.80) 28%,
            rgb(251 243 234 / 0.30) 48%,
            rgb(251 243 234 / 0) 66%
        );
    }

    .hero--speels.hero--merkbeeld::after { background: none; }
}

/*
 * Op een telefoon staat de tekst niet in een kolom links maar over de volle
 * breedte, en dan valt de rechterhelft van elke regel buiten de sluier. Op het
 * eerste scherm van Elfjes stond daardoor een alinea in donkerbruin op een
 * foto van een kind: leesbaar in de ontwerpweergave, niet op een toestel.
 *
 * Daarom hier geen verloop van links naar rechts maar een dekkende laag die
 * onderaan uitvloeit. Het beeld blijft zichtbaar waar geen tekst staat, en
 * waar wel tekst staat, is er ondergrond.
 */
@media (max-width: 860px) {
    .hero--speels.hero--beeld .hero__doek::after {
        /* Bijna dekkend. Een halfdoorzichtige laag over een donkere foto
           levert geen sfeerbeeld op maar een grijze waas, en dat oogt goedkoop.
           Liever een schoon crèmevlak met de foto er nog net doorheen als
           textuur; het beeld zelf komt verderop op de bladzijde ruim aan bod. */
        background: linear-gradient(180deg,
            rgb(251 243 234 / 0.97) 0%,
            rgb(251 243 234 / 0.96) 86%,
            rgb(251 243 234 / 0.93) 100%);
    }
}

.hero--speels.hero--beeld .hero__titel,
.hero--speels.hero--beeld .hero__tekst,
.hero--speels.hero--beeld .hero__lijf {
    color: #2A1508;
}

.hero--speels.hero--beeld .hero__oog {
    /* Donkerder dan het oranje van het merk. Op #FBF3EA haalt #B93A12 net 4,3
       en op de plekken waar de foto doorschijnt minder; deze toon houdt het
       ook daar boven de 4,5 en blijft dezelfde kleurfamilie. */
    color: #9A2F0D;
}

/* De mascotte hoort er niet bij als er al een foto met de mascottes op staat.
   Twee keer hetzelfde draakje op één scherm is een fout, geen accent. */
.hero--speels.hero--beeld .hero__mascotte {
    display: none;
}

.hero--speels.hero--beeld .knop--glas {
    background: #FFFFFF;
    color: #B93A12;
    border-color: #E8DACA;
}

/* ──────────────────────────────────────────────────────────── de speelhoek ── */

/*
 * De twee spelkaarten krijgen hun figuur erbij: het draakje bij het doolhof,
 * het elfje bij de kleurplaat. Ze staan rechtsonder half buiten de kaart, zodat
 * ze meedoen zonder de tekst in de weg te zitten.
 */

.speelkaart {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    /* De aangeleverde achtergrond. Eén beeld per kaart, met de illustratie
       rechts en links een egaal vlak waar de tekst op staat. Daarom 'cover'
       en rechts uitgelijnd: krimpt de kaart, dan gaat er links van het vlak
       af en blijft de tekening heel. */
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;

    /* Twee schaduwen. De harde van één pixel zet de rand aan, de zachte tilt
       de kaart van de bladzijde. Eén laag ziet er altijd uit als een filter. */
    box-shadow:
        0 1px 2px rgb(120 40 8 / 0.10),
        0 10px 26px -12px rgb(120 40 8 / 0.30);
}

/* Het beeld komt uit het sjabloon en niet uit dit stijlblad. Een winkel kan
   in een submap draaien, en een pad in CSS weet daar niets van: dan wees
   /merk/kaart-kado.webp naar de wortel van het domein in plaats van naar de
   winkel. Het sjabloon zet de variabele met link() erin, en dat klopt altijd. */
.speelkaart { background-image: var(--kaart-beeld, none); }

/*
 * De draaiende gloed.
 *
 * Een rand die rondloopt, en niet een randje dat van kleur verschiet. Het is
 * één conische verloop dat om zijn as draait: bij het zweven begint hij, bij
 * het indrukken gaat hij sneller en dichter naar de kaart toe. Het effect zit
 * in de beweging, niet in de kleur, en daarom staat er maar één accentkleur in
 * plus een lichtere en een donkerdere van dezelfde familie.
 *
 * Twee lagen: de scherpe rand zelf en een zachte gloed eronder die buiten de
 * kaart valt. Zonder die tweede is het een streepje; met die tweede licht de
 * kaart op.
 *
 * Het draait op één eigenschap (--gloedhoek) die als hoek geregistreerd staat.
 * Dat is de hele reden dat dit kan bewegen zonder javascript: een gewone
 * custom property is voor de browser een stuk tekst en dat valt niet te
 * animeren.
 */
@property --gloedhoek {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.speelkaart::before,
.speelkaart::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 260ms ease;
    background: conic-gradient(
        from var(--gloedhoek),
        transparent 0deg,
        var(--accent) 42deg,
        #FFD9A8 78deg,
        var(--steun) 116deg,
        transparent 168deg,
        transparent 360deg
    );
}

/* De rand: een vlak dat één pixel groter is dan de kaart, met de kaart er
   bovenop. Dat is goedkoper dan een border-image en het volgt de ronding. */
.speelkaart::before {
    inset: -2px;
}

/* De gloed eronder: hetzelfde verloop, wijder en vervaagd. */
.speelkaart::after {
    inset: -10px;
    filter: blur(16px);
    opacity: 0;
}

.speelkaart:hover::before,
.speelkaart:focus-visible::before { opacity: 1; animation: speelkaart-draai 4.5s linear infinite; }

.speelkaart:hover::after,
.speelkaart:focus-visible::after { opacity: 0.55; animation: speelkaart-draai 4.5s linear infinite; }

.speelkaart:active::before,
.speelkaart:active::after { animation-duration: 1.4s; }

.speelkaart:active::after { opacity: 0.8; }

@keyframes speelkaart-draai {
    to { --gloedhoek: 360deg; }
}

/* De inhoud moet boven de rand liggen; anders schijnt het verloop door de
   kaart heen. Een eigen laag met de achtergrond van de kaart erin. */
.speelkaart > * { position: relative; z-index: 1; }

.speelkaart:hover,
.speelkaart:focus-visible {
    box-shadow:
        0 2px 3px rgb(120 40 8 / 0.12),
        0 18px 40px -14px rgb(120 40 8 / 0.38);
}

.speelkaart__figuur {
    position: absolute;
    right: -1.5rem;
    bottom: -1rem;
    width: clamp(6rem, 12vw, 9.5rem);
    line-height: 0;
    opacity: 0.92;
    pointer-events: none;
    transition: transform 220ms cubic-bezier(.22, 1, .36, 1);
}

.speelkaart__figuur img {
    width: 100%;
    height: auto;
}

.speelkaart:hover .speelkaart__figuur,
.speelkaart:focus-visible .speelkaart__figuur {
    transform: translateY(-6px) rotate(-3deg);
}

/* De tekst mag niet onder het figuur schuiven. */
.speelkaart__tekst {
    max-width: 22rem;
    padding-right: 4rem;
}

/* Staat er een achtergrond, dan zit de illustratie in het beeld en hoort de
   tekst er links van te blijven. Iets meer dan de helft: de tekening loopt op
   elk van de drie beelden tot ongeveer veertig procent van de breedte. */
.speelkaart[style*="--kaart-beeld"] .speelkaart__titel,
.speelkaart[style*="--kaart-beeld"] .speelkaart__tekst {
    max-width: min(60%, 22rem);
    padding-right: 0;
}

/*
 * Op een smal scherm staat het figuur binnen de kaart in plaats van er half
 * over de rand. Dat afsnijden is op een breed scherm een keuze — het figuur
 * duikt achter de kaart weg — maar op een telefoon is de kaart zo smal dat er
 * een halve mascotte overblijft, en dat leest als een fout in plaats van als
 * een vondst.
 */
@media (max-width: 700px) {
    .speelkaart__figuur {
        right: 0.75rem;
        bottom: 0.75rem;
        width: 5.5rem;
    }

    .speelkaart__tekst {
        padding-right: 6rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .speelkaart__figuur {
        transition: none;
    }
}

/* ══════════════════════════════════════════════════════════ het mepspel ══
 *
 * Met de getekende kuilen en mascottes. Zonder dat materiaal blijft het spel
 * werken zoals het was: de basisvormen staan in de winkel-CSS en die zijn hier
 * niet aangeraakt. Dit stijlblad zet er alleen een laag overheen als het
 * sjabloon de klasse mepveld--getekend meegeeft, en dat doet het pas als de
 * bestanden er echt staan.
 */

.mepveld--getekend .mepvak {
    /* De kuil is de achtergrond van het vakje. Onderaan uitgelijnd, want een
       kuil hoort op de grond te liggen en niet in de lucht te zweven. */
    background:
        var(--kuil) center bottom / 100% auto no-repeat,
        transparent;
    border: 0;
    box-shadow: none;
    aspect-ratio: 1;
    overflow: visible;
}

/* Het randje en de vlakke mascotte van de basis hebben hier niets te zoeken. */
.mepveld--getekend .mepvak__rand,
.mepveld--getekend .mepvak__mascotte {
    display: none;
}

/*
 * De mascotte staat op zijn eigen kuil, en die kuil valt precies over de
 * lege kuil van het vakje heen. Daardoor hoeft er niets uitgesneden te worden
 * en klopt het licht: het is dezelfde tekening.
 */
.mepveld--getekend .mepvak__figuur {
    position: absolute;
    inset-inline: -6%;
    inset-block-end: -4%;
    inline-size: 112%;
    block-size: auto;
    display: block;

    /* Weggedoken: onder de rand van de kuil, en onzichtbaar. Het opduiken is
       één beweging van beide tegelijk, want een mascotte die eerst verschijnt
       en dan omhoog schuift, oogt als een haperende laadanimatie. */
    transform: translateY(26%) scale(0.86);
    opacity: 0;
    transform-origin: 50% 100%;
    transition:
        transform 170ms cubic-bezier(.22, 1.4, .36, 1),
        opacity 120ms linear;
    pointer-events: none;
}

.mepveld--getekend .mepvak[data-op="ja"] .mepvak__figuur {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Geraakt: even indrukken. Kort en hard, zoals een tik hoort aan te voelen. */
.mepveld--getekend .mepvak[data-raak="ja"] .mepvak__figuur {
    transform: translateY(8%) scale(0.94) rotate(-4deg);
    transition-duration: 90ms;
}

/* Het vakje zelf reageert ook. Niet de mascotte alleen: dan lijkt het of je
   naast getikt hebt. */
.mepveld--getekend .mepvak:active { transform: scale(0.97); }

.mepveld--getekend[data-bezig="ja"] .mepvak:hover .mepvak__figuur {
    filter: brightness(1.04);
}

@media (prefers-reduced-motion: reduce) {
    .mepveld--getekend .mepvak__figuur {
        transition: opacity 100ms linear;
        transform: none;
    }

    .mepveld--getekend .mepvak[data-op="ja"] .mepvak__figuur { transform: none; }
    .mepveld--getekend .mepvak[data-raak="ja"] .mepvak__figuur { transform: none; }
}

/* ═══════════════════════════════════════════════════ het merkbeeld wint ══
 *
 * Deze regels staan met opzet achteraan.
 *
 * Hierboven staat een sluier voor smalle schermen die bijna dekkend is. Die
 * is er voor een gewone foto: een kiekje dat niet voor deze plek gemaakt is,
 * waar de tekst anders half in wegzakt. Het merkbeeld is wél voor deze plek
 * getekend — het kind zit rechtsonder en linksboven is er crème gelaten — en
 * dan is diezelfde sluier precies het verkeerde: die maakt er een grijze
 * vlek van.
 *
 * Zelfde specificiteit, dus de volgorde beslist. Vandaar hier en niet daar.
 */

@media (max-width: 860px) {
    .hero--speels.hero--merkbeeld .hero__doek::after {
        background: linear-gradient(
            158deg,
            rgb(251 243 234 / 0.90) 0%,
            rgb(251 243 234 / 0.80) 26%,
            rgb(251 243 234 / 0.34) 48%,
            rgb(251 243 234 / 0.06) 66%,
            rgb(251 243 234 / 0) 80%
        );
    }
}

/* ══════════════════════════════════════════════════════════ het mozaïek ══
 *
 * Tegels van verschillende grootte die samen één blok vullen.
 *
 * Het raster is opgezet met auto-flow dense en niet met vaste gebieden. Dat
 * is de hele truc: valt er een tegel weg — geen koopjes, weermodule uit —
 * dan schuiven de andere door en blijft het blok gevuld. Met vaste gebieden
 * zou er een gat vallen op precies de winkel die het minst te tonen heeft.
 */

.mozaiek {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(10.5rem, auto);
    grid-auto-flow: dense;
    gap: var(--ruimte-3);
}

.moz {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: var(--ruimte-5);
    text-align: left;
    text-decoration: none;
    color: inherit;
    background: var(--paneel);
    border: 1px solid var(--lijn-zacht);
    border-radius: var(--radius-l);
    box-shadow: var(--diepte-rust);
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
    font: inherit;
    transition:
        transform 220ms cubic-bezier(.22, 1, .36, 1),
        box-shadow 220ms ease,
        border-color 180ms ease;
}

.moz:hover,
.moz:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--diepte-op);
    border-color: var(--accent);
}

.moz:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Drie maten, niet meer. De grote vult twee bij twee, de brede twee bij een,
   en de strip loopt over de volle breedte om de onderste rij dicht te leggen.
   Met alleen de eerste twee bleef er rechtsonder een gat staan: vijf tegels
   passen nu eenmaal niet netjes in een raster van vier kolommen. */
.moz--groot { grid-column: span 2; grid-row: span 2; }

/* De tegels van "Waar zin je in?" stonden als vier witte vlakken naast elkaar,
 * en een half lege witte kaart leest als een gat in de bladzijde. Elke tegel
 * krijgt daarom een eigen zachte grond: een verloop dat van boven naar onder
 * wegtrekt, met een gloed in de hoek waar geen inhoud staat. De kleuren komen
 * uit de huid, dus ze volgen mee met de lichte en de donkere modus.
 */
.moz {
    --moz-tint: var(--accent);
    background:
        radial-gradient(120% 90% at 100% 0%,
            color-mix(in srgb, var(--moz-tint) 16%, transparent) 0%,
            transparent 58%),
        linear-gradient(to bottom,
            color-mix(in srgb, var(--moz-tint) 7%, var(--paneel)) 0%,
            var(--paneel) 62%);
}

.moz--koopjes { --moz-tint: var(--accent); }
.moz--kado    { --moz-tint: color-mix(in srgb, var(--accent) 45%, #7b6cff); }
.moz--winkel  { --moz-tint: color-mix(in srgb, var(--accent) 30%, #e0b341); }

/* De grote tegel heeft de meeste lege ruimte, dus daar mag de gloed dieper
   staan: onderaan, achter de knop, zodat het oog naar de handeling trekt. */
.moz--groot {
    background:
        radial-gradient(90% 70% at 12% 100%,
            color-mix(in srgb, var(--moz-tint) 20%, transparent) 0%,
            transparent 62%),
        radial-gradient(120% 90% at 100% 0%,
            color-mix(in srgb, var(--moz-tint) 14%, transparent) 0%,
            transparent 58%),
        linear-gradient(to bottom,
            color-mix(in srgb, var(--moz-tint) 8%, var(--paneel)) 0%,
            var(--paneel) 58%);
}

.moz:hover,
.moz:focus-visible {
    --moz-tint: color-mix(in srgb, var(--accent) 100%, transparent);
}
.moz--breed { grid-column: span 2; }

/* De strip is een regel, geen tegel: hij hoort niet de hoogte van een rij aan
   te nemen maar die van zijn eigen tekst. */
.moz--strip {
    grid-column: 1 / -1;
    grid-row: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--ruimte-4);
    align-self: start;
    padding-block: var(--ruimte-4);
    min-block-size: 0;
}

.moz--strip .moz__titel { flex: 0 0 auto; }
.moz--strip .moz__tekst { flex: 1; min-width: 0; }
.moz--strip .moz__knop { margin-top: 0; padding-top: 0; flex: 0 0 auto; }

@media (max-width: 700px) {
    .moz--strip { flex-direction: column; align-items: flex-start; gap: .35rem; }
    .moz--strip .moz__knop { margin-top: auto; padding-top: .5rem; }
}

.moz__oog {
    font-family: var(--kop-font);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: var(--spatie-label);
    text-transform: uppercase;
    color: var(--accent-tekst, var(--accent));
}

.moz__titel {
    font-family: var(--kop-font);
    font-weight: 700;
    font-size: 1.0625rem;
    line-height: 1.2;
    text-wrap: balance;
}

.moz--groot .moz__titel { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }

.moz__tekst { color: var(--inkt-gedempt); font-size: var(--tekst-m); }

.moz__knop {
    margin-top: auto;
    padding-top: .5rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    color: var(--accent-tekst, var(--accent));
}

.moz:hover .moz__knop svg { transform: translateX(3px); }
.moz__knop svg { transition: transform 180ms ease; }

/* ── de beeldjes op een tegel ───────────────────────────────────────────── */

.moz__beelden { display: flex; gap: .5rem; }

.moz__beeld {
    display: block;
    inline-size: 4.5rem;
    block-size: 4.5rem;
    border-radius: var(--radius-m);
    overflow: hidden;
    background: var(--grond-diep);
    box-shadow: var(--relief);
}

.moz__beeld img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

.moz--groot .moz__beelden { margin-bottom: .5rem; }
.moz--groot .moz__beeld { inline-size: 5.5rem; block-size: 5.5rem; }

/* De nieuwtjes staan naast de tekst en niet erboven: de tegel is breed, en
   drie beeldjes op een rij eronder maken hem onnodig hoog. */
.moz__beelden--rij { flex: 0 0 auto; }

/* ── de koopjeshoek ─────────────────────────────────────────────────────── */

.moz--koopjes {
    background:
        radial-gradient(120% 100% at 100% 0%, rgb(255 224 200 / .85) 0%, transparent 62%),
        var(--paneel);
}

.moz--koopjes .moz__lijf {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    flex: 1;
    /* De tekst hangt in het midden van wat er overblijft in plaats van tegen
       de bovenrand. Anders staat er een leeg vlak van een halve tegel tussen
       de beeldjes en de link. */
    justify-content: center;
}

.moz--koopjes .moz__beelden { flex-wrap: wrap; }

/* ── de buitenspeelmeter ────────────────────────────────────────────────── */

.moz--meter { cursor: default; }
.moz--meter:hover { transform: none; box-shadow: var(--diepte-rust); border-color: var(--lijn-zacht); }

.moz__weer {
    font-size: 2.25rem;
    line-height: 1;
    margin-block: .15rem .1rem;
}

/* Droog is groen, nat is blauw. Het is de enige plek op de bladzijde waar de
   kleur iets betekent in plaats van iets siert, dus ze mag afwijken van het
   accent. */
.moz--meter-droog { border-color: #A9C98A; background: linear-gradient(180deg, #F4F9EC 0%, var(--paneel) 60%); }
.moz--meter-nat   { border-color: #A8C4DA; background: linear-gradient(180deg, #EEF4F9 0%, var(--paneel) 60%); }

.moz--meter-droog .moz__oog { color: #4F752B; }
.moz--meter-nat .moz__oog   { color: #2C5D80; }

.moz--meter .moz__knop { text-decoration: none; }
.moz--meter .moz__knop:hover { text-decoration: underline; }

/* De kadowijzer vult wat de tegel "Net uitgepakt" vulde. Die tegel is sinds
   16 oktober 2026 een volle rij onder het mozaïek; zonder deze regels stond
   er een leeg kwart naast de koopjes. Is er geen weertegel (de module staat
   uit, zoals bij Elfjes), dan neemt hij de hele rechterhelft. */
@media (min-width: 901px) {
    .moz--kado { grid-column: span 2; }
    .mozaiek:not(:has(.moz--meter)) .moz--kado { grid-row: span 2; }
}

/* ── smaller ────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .mozaiek { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .moz--groot { grid-column: span 2; grid-row: span 1; }
    .moz--breed { grid-column: span 2; }
    .mozaiek:not(:has(.moz--meter)) .moz--kado { grid-column: span 2; }
}

@media (max-width: 560px) {
    .mozaiek { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .moz--groot, .moz--breed,
    .mozaiek:not(:has(.moz--meter)) .moz--kado { grid-column: span 1; }
    .moz__beeld { inline-size: 3.75rem; block-size: 3.75rem; }
    .moz--groot .moz__beeld { inline-size: 4.25rem; block-size: 4.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .moz, .moz__knop svg { transition: none; }
    .moz:hover, .moz:focus-visible { transform: none; }
}

/* ══════════════════════════════════════════════════ de achtergrond van de site ══
 *
 * Eén beeld achter de hele winkel, vast op zijn plek terwijl de pagina eroverheen
 * schuift. Daar zit meteen de moeilijkheid: alles wat erop staat moet leesbaar
 * blijven, en een foto onder tekst is de klassieke manier om dat te verliezen.
 *
 * Drie lagen, in deze volgorde:
 *
 *   1. het beeld, vast en bedekkend
 *   2. een crèmesluier erover, dik genoeg om tekst te dragen
 *   3. de pagina, waarvan de vlakken doorschijnend gemaakt zijn
 *
 * De sluier is het hele verhaal. Bij 0,80 is het een sfeerbeeld en zakt de
 * tekst weg; bij 1,00 is het beeld er niet meer. Wat hier staat is de waarde
 * waarbij de lichtste tekst op de bladzijde nog altijd boven de 4,5 zit, en
 * geen enkele stap lichter.
 */

body.heeft-achtergrond {
    background: transparent;
}

body.heeft-achtergrond::before,
body.heeft-achtergrond::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
}

body.heeft-achtergrond::before {
    z-index: -2;
    background-image: var(--siteachtergrond);
    background-size: cover;
    background-position: center 20%;
    background-repeat: no-repeat;
}

body.heeft-achtergrond::after {
    z-index: -1;
    /* Bovenaan iets doorzichtiger dan onderaan: daar staat de hero met zijn
       eigen beeld, en dan mag de lucht doorschemeren. Onder de vouw staat de
       tekst en wint de leesbaarheid. */
    background: linear-gradient(
        180deg,
        rgb(251 243 234 / 0.74) 0%,
        rgb(251 243 234 / 0.80) 30%,
        rgb(251 243 234 / 0.84) 100%
    );
}

/*
 * De vlakken van de pagina laten het beeld door.
 *
 * Zonder dit verandert er niets zichtbaars: de secties hebben hun eigen
 * dekkende grond en die ligt gewoon over de achtergrond heen. Wat hier
 * gebeurt is dus geen versiering maar de helft van het effect.
 *
 * De kaarten blijven wél dekkend. Een productfoto op een doorschijnend vlak
 * is een productfoto die je niet meer kunt beoordelen, en dat is precies
 * waarvoor iemand op een webshop komt.
 */
body.heeft-achtergrond main,
body.heeft-achtergrond .sectie--band,
body.heeft-achtergrond .siteVoet {
    background: transparent;
}

body.heeft-achtergrond .omhulsel.sectie--band {
    /* De brede band die met een schaduw getekend wordt, gaat mee doorschijnend. */
    background: rgb(255 255 255 / 0.30);
    box-shadow: -50vw 0 0 rgb(255 255 255 / 0.30), 50vw 0 0 rgb(255 255 255 / 0.30);
}

/* De kop en de aankondiging blijven staan waar ze staan: een doorschijnende
   kopbalk over een bewegend beeld is de snelste manier om een site rommelig
   te maken. */
body.heeft-achtergrond .siteKop,
body.heeft-achtergrond .aankondiging {
    background: var(--paneel);
}

body.heeft-achtergrond .aankondiging { background: var(--accent); }

/*
 * Op een telefoon staat het beeld stil in plaats van vast.
 *
 * background-attachment: fixed is op iOS al jaren onbetrouwbaar en kost daar
 * bovendien een herteken bij elke scrollstap. Een vaste positionering met
 * position: fixed doet hetzelfde zonder die kost, en dat is precies wat
 * hierboven gebeurt — deze regel houdt alleen de uitsnede vriendelijk op een
 * smal scherm.
 */
@media (max-width: 700px) {
    body.heeft-achtergrond::before {
        background-position: 62% 18%;
    }

    body.heeft-achtergrond::after {
        background: linear-gradient(
            180deg,
            rgb(251 243 234 / 0.78) 0%,
            rgb(251 243 234 / 0.84) 30%,
            rgb(251 243 234 / 0.88) 100%
        );
    }
}

/* In de donkere stand is de sluier donker: hetzelfde beeld, andere kant op. */
:root[data-thema='donker'] body.heeft-achtergrond::after,
:root[data-thema='donker'] body.heeft-achtergrond::after {
    background: linear-gradient(180deg, rgb(36 26 29 / 0.90) 0%, rgb(36 26 29 / 0.94) 100%);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-thema='licht']) body.heeft-achtergrond::after {
        background: linear-gradient(180deg, rgb(36 26 29 / 0.90) 0%, rgb(36 26 29 / 0.94) 100%);
    }

    :root:not([data-thema='licht']) body.heeft-achtergrond .omhulsel.sectie--band {
        background: rgb(54 39 41 / 0.5);
        box-shadow: -50vw 0 0 rgb(54 39 41 / 0.5), 50vw 0 0 rgb(54 39 41 / 0.5);
    }
}

/* ───────────────────────────────────────────────────── het lokvak ── */

/* Het verstopte veld tegen spam. Dit stond tot 10 september 2026 enkel in het
   thema bloesem, terwijl drie plugins het gebruiken: de cadeaulijst, de fotomuur
   en de gastenlijst. Op elk ander thema stond er dus zichtbaar een veld
   "Website" boven het formulier, en wie het invulde zag zijn bericht stil
   verdwijnen. Erger dan geen lokvak.

   Het staat daarom nu in elk thema. Verplaatsen naar één gedeeld bestand is
   beter, maar dat bestaat vandaag niet en dit moest vanavond recht. */
.brl-verstopt {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* ── het slepende opkomen van Elfjes ──
 *
 * Sven wil dat het hier "een klein beetje sleept, om het zeverig te maken".
 * Dat is geen traagheid maar een toon: een kinderwinkel mag zachter aankomen
 * dan een skateshop. De kaarten komen van verder, trager, en met een wat
 * diepere krimp, zodat ze op de bladzijde neerzakken in plaats van erin te
 * klikken.
 *
 * De knoppen zelf staan in de kern; hier worden ze enkel anders gezet.
 */
:root {
    --opkomen-afstand: 34px;
    --opkomen-bereik: 62%;
    --opkomen-schaal: .965;
}


/* ───────────────────────────────────────────── het mega menu als stapel ── */

/*
 * Sven, 25 oktober: "maak van het geheel een masonry stack van cards ... laat
 * wel de volgorde intakt." De rubrieken zijn kaarten met hun eigen beeld, en
 * het script in onderdelen/megamenu.twig schuift elke kaart in de kortste
 * kolom. Tussen de rubrieken: de koopjes, het draakje, de speelhoek, een
 * siersteen en twee banden over de hele breedte.
 *
 * Alles hieronder geldt vanaf 900 pixels. Op een telefoon blijft het het
 * uitvouwbare vel uit het basisthema, en de extra's vallen weg: daar telt de
 * duim, niet de etalage.
 *
 * Let op: het script zet de plaats van elke kaart met `transform`. Een
 * hover-effect mag dus nooit `transform` op de kaart zelf zetten, enkel op
 * wat erin zit.
 */
@media (max-width: 899.98px) {
    .megamenu--stapel .mm-extra,
    .megamenu--stapel .mm-beeld,
    .megamenu--stapel .mm-meer { display: none; }
}

@media (min-width: 900px) {
    .megamenu--stapel .megamenu__blad {
        max-block-size: min(82vh, 860px);
        background:
            radial-gradient(60% 50% at 100% 0%, var(--accent-waas, transparent), transparent 70%),
            radial-gradient(50% 40% at 0% 100%, var(--steun-waas, transparent), transparent 70%),
            var(--grond-warm, var(--grond));
    }

    .megamenu--stapel .megamenu__kolommen { gap: 18px; }
    .megamenu--stapel .megamenu__kolommen.is-gestapeld {
        display: block;
        position: relative;
        padding-inline: 0;
        margin-inline: max(var(--gutter, 16px), calc((100vw - 1240px) / 2));
    }
    .megamenu--stapel .is-gestapeld > * { top: 0; left: 0; margin: 0; }

    /* ── de rubriekkaart ── */
    .megamenu--stapel .megamenu__kolom {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 16px 18px;
        background: var(--paneel, var(--grond));
        border: 1px solid var(--lijn-zacht, var(--lijn));
        border-radius: var(--radius-xl, 20px);
        box-shadow: var(--schaduw-1);
        overflow: hidden;
        transition: box-shadow .2s ease, border-color .2s ease;
    }
    .megamenu--stapel .megamenu__kolom:hover {
        box-shadow: var(--schaduw-3);
        border-color: color-mix(in oklab, var(--accent) 40%, var(--lijn));
    }

    .megamenu--stapel .mm-beeld {
        display: block;
        margin: -16px -18px 14px;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        background: var(--grond-diep, var(--lijn));
    }
    .megamenu--stapel .mm-beeld img {
        display: block;
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
        transition: transform .5s cubic-bezier(.2, .7, .2, 1);
    }
    .megamenu--stapel .megamenu__kolom:hover .mm-beeld img { transform: scale(1.06); }

    /* Een rubriek zonder onderdelen is een smalle kaart met een duimnagel
       links: een kaart met een heel beeld voor één woord is pronken. */
    .megamenu--stapel .megamenu__kolom--los {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        align-items: center;
        gap: 14px;
        padding: 10px 16px 10px 10px;
    }
    .megamenu--stapel .megamenu__kolom--los .mm-beeld {
        margin: 0;
        aspect-ratio: 1;
        border-radius: var(--radius-l, 14px);
    }
    .megamenu--stapel .megamenu__kolom--los:not(:has(.mm-beeld)) {
        grid-template-columns: minmax(0, 1fr);
        padding-inline-start: 18px;
    }

    .megamenu--stapel .megamenu__hoofd {
        padding: 0;
        border-bottom: 0;
        font-size: 1.0625rem;
        line-height: 1.25;
    }
    .megamenu--stapel .megamenu__aantal {
        padding: 2px 8px;
        border-radius: var(--radius-rond, 999px);
        background: var(--accent);
        color: var(--op-accent, #fff);
        font-size: .75rem;
        font-weight: 600;
    }

    .megamenu--stapel .megamenu__kinderen { padding-top: 10px; }
    .megamenu--stapel .megamenu__kinderen > .megamenu__kind:nth-child(n+7) { display: list-item; }
    .megamenu--stapel .megamenu__kinderen > .megamenu__kind:nth-child(n+9) { display: none; }
    .megamenu--stapel .megamenu__kind > a {
        padding: 4px 0;
        font-size: .9rem;
        color: var(--inkt-zacht, var(--inkt));
    }
    .megamenu--stapel .megamenu__kind > a:hover { color: var(--accent-tekst, var(--accent-diep)); }

    /* het derde niveau als kleine stickers */
    .megamenu--stapel .megamenu__kleinkinderen {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin: 2px 0 8px;
        padding: 0;
    }
    .megamenu--stapel .megamenu__kleinkinderen a {
        padding: 3px 9px;
        border-radius: var(--radius-rond, 999px);
        background: var(--grond-warm, var(--grond));
        border: 1px solid var(--lijn-zacht, var(--lijn));
        font-size: .75rem;
        color: var(--inkt-gedempt, var(--inkt-flauw));
    }
    .megamenu--stapel .megamenu__kleinkinderen a:hover {
        text-decoration: none;
        border-color: var(--steun);
        color: var(--inkt);
    }

    .megamenu--stapel .mm-meer {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 8px;
        font-size: .8125rem;
        font-weight: 600;
        color: var(--accent-tekst, var(--accent-diep));
        text-decoration: none;
    }

    /* ── wat de extra's gemeen hebben ── */
    .megamenu--stapel .mm-extra {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 20px;
        border-radius: var(--radius-xl, 20px);
        overflow: hidden;
        text-decoration: none;
        color: inherit;
        isolation: isolate;
    }
    .megamenu--stapel .mm-oog {
        font: 700 .6875rem/1.2 var(--kop-font);
        letter-spacing: .12em;
        text-transform: uppercase;
        opacity: .85;
    }
    .megamenu--stapel .mm-tekst { font-size: .9rem; line-height: 1.45; }
    .megamenu--stapel .mm-extra strong { font: 700 1.25rem/1.2 var(--kop-font); }
    .megamenu--stapel .mm-knop {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 4px;
        font-weight: 700;
        font-size: .875rem;
    }
    .megamenu--stapel .mm-knop svg { transition: transform .2s ease; }
    .megamenu--stapel .mm-extra:hover .mm-knop svg { transform: translateX(4px); }
    .megamenu--stapel .mm-knop--vol {
        align-self: flex-start;
        padding: 10px 16px;
        border-radius: var(--radius-rond, 999px);
        background: var(--accent);
        color: var(--op-accent, #fff);
    }

    /* de koopjes: oranje, met een groot getal en een stempel */
    .megamenu--stapel .mm-cta--koopjes {
        background: radial-gradient(120% 120% at 0% 0%, #F2703A, var(--accent) 50%, #B93A12);
        color: #FFF6EE;
        min-block-size: 210px;
    }
    .megamenu--stapel .mm-cta--koopjes .mm-groot {
        font: 800 3.5rem/1 var(--kop-font);
        letter-spacing: -.02em;
    }
    .megamenu--stapel .mm-sticker {
        position: absolute;
        inset-block-start: -18px;
        inset-inline-end: -18px;
        z-index: -1;
        display: grid;
        place-items: center;
        inline-size: 120px;
        aspect-ratio: 1;
        padding: 14px 14px 0 0;
        border-radius: 50%;
        background: #FFF6EE;
        color: #C2431A;
        font: 800 3rem/1 var(--kop-font);
        transform: rotate(14deg);
    }

    /* de speelhoek: in het tweede accent, met het elfje dat eruit piept */
    .megamenu--stapel .mm-cta--spelen {
        background: var(--steun);
        color: var(--op-steun, #16150F);
        padding-inline-end: 96px;
        min-block-size: 200px;
    }
    .megamenu--stapel .mm-cta__mascotte {
        position: absolute;
        inset-block-end: -6px;
        inset-inline-end: -6px;
        inline-size: 110px;
        z-index: -1;
    }
    .megamenu--stapel .mm-cta__mascotte img,
    .megamenu--stapel .mm-draak__beeld img {
        display: block;
        inline-size: 100%;
        block-size: auto;
        transition: transform .4s cubic-bezier(.3, 1.6, .5, 1);
    }
    .megamenu--stapel .mm-cta--spelen:hover .mm-cta__mascotte img { transform: rotate(-8deg) translateY(-6px); }

    /* het draakje: een stippellijn en een fluistertoon */
    .megamenu--stapel .mm-draak {
        background: var(--paneel, var(--grond));
        border: 2px dashed color-mix(in oklab, var(--accent) 55%, var(--lijn));
        align-items: flex-start;
    }
    .megamenu--stapel .mm-draak__beeld { inline-size: 96px; }
    .megamenu--stapel .mm-draak:hover .mm-draak__beeld img { transform: rotate(6deg) scale(1.05); }
    .megamenu--stapel .mm-draak__vonk { inline-size: 48px; block-size: 48px; }
    .megamenu--stapel .mm-draak .mm-knop { color: var(--accent-tekst, var(--accent-diep)); }

    /* de banden over de hele breedte */
    .megamenu--stapel .mm-band {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px 32px;
        min-block-size: 170px;
        padding: 28px 36px;
        color: #FFF6EE;
        background: radial-gradient(120% 140% at 0% 0%, #F2703A, #E0501F 50%, #8E2C0E);
    }
    .megamenu--stapel .mm-band__beeld {
        position: absolute;
        inset: 0;
        z-index: -2;
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
        transition: transform .8s cubic-bezier(.2, .7, .2, 1);
    }
    .megamenu--stapel .mm-band:hover .mm-band__beeld { transform: scale(1.04); }
    .megamenu--stapel .mm-band::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(90deg, rgb(28 20 22 / .9) 0%, rgb(28 20 22 / .6) 45%, rgb(28 20 22 / .05) 100%);
    }
    .megamenu--stapel .mm-band__tekst {
        display: flex;
        flex-direction: column;
        gap: 6px;
        max-inline-size: 56ch;
    }
    .megamenu--stapel .mm-band strong { font-size: 1.75rem; }
    .megamenu--stapel .mm-band--zacht {
        flex-direction: row-reverse;
        background: radial-gradient(120% 140% at 100% 0%, #E5A0B8, #7A9E3A);
    }
    .megamenu--stapel .mm-band--zacht::after {
        background: linear-gradient(270deg, rgb(28 20 22 / .9) 0%, rgb(28 20 22 / .6) 50%, rgb(28 20 22 / .05) 100%);
    }
    .megamenu--stapel .mm-band--zacht .mm-knop--vol { background: var(--steun); color: var(--op-steun, #16150F); }

    /* confetti in de eerste band, in de kleuren van het logo */
    .megamenu--stapel .mm-confetti i {
        position: absolute;
        z-index: -1;
        inline-size: 12px;
        block-size: 12px;
        border-radius: 3px;
        opacity: .9;
    }
    .megamenu--stapel .mm-confetti i:nth-child(1) { inset: 18% auto auto 52%; background: #F4E206; transform: rotate(20deg); }
    .megamenu--stapel .mm-confetti i:nth-child(2) { inset: 70% auto auto 58%; background: #E5A0B8; border-radius: 50%; inline-size: 9px; block-size: 9px; }
    .megamenu--stapel .mm-confetti i:nth-child(3) { inset: 30% auto auto 66%; background: #BFE3F5; transform: rotate(-30deg); inline-size: 16px; block-size: 6px; }
    .megamenu--stapel .mm-confetti i:nth-child(4) { inset: 12% auto auto 80%; background: #E0507F; border-radius: 50%; }
    .megamenu--stapel .mm-confetti i:nth-child(5) { inset: 78% auto auto 74%; background: #F0C060; transform: rotate(45deg); }

    /* de siersteen: geen link, een adempauze met de bliksem uit het logo */
    .megamenu--stapel .mm-sier {
        min-block-size: 150px;
        justify-content: flex-end;
        background:
            repeating-linear-gradient(-45deg, transparent 0 14px, color-mix(in oklab, var(--accent) 9%, transparent) 14px 28px),
            var(--paneel, var(--grond));
        border: 1px solid var(--lijn-zacht, var(--lijn));
    }
    .megamenu--stapel .mm-sier__vonk {
        position: absolute;
        inset-block-start: 14px;
        inset-inline-end: 16px;
        inline-size: 64px;
        aspect-ratio: 1;
        background: #F4E206;
        clip-path: polygon(57% 4%, 23% 52%, 46% 52%, 38% 96%, 77% 40%, 54% 40%);
        filter: drop-shadow(0 2px 0 #16150F);
    }
    .megamenu--stapel .mm-sier__zin {
        font: 800 1.5rem/1.05 var(--kop-font);
        color: var(--accent-tekst, var(--accent-diep));
    }
}

@media (prefers-reduced-motion: reduce) {
    .megamenu--stapel * { transition: none !important; }
}

/*
 * Het blad loopt tot de onderrand van het scherm. Op 82% hoogte schemerde de
 * winkel eronder door als een strook die nergens bij hoort; nu scrolt het
 * blad zelf en is er geen onderkant meer om naar te kijken. De titelbalk
 * staat boven het scrollende lijf en blijft dus staan.
 */
.megamenu--stapel .mm-titel__sub,
.megamenu--stapel .mm-titel__alles { display: none; }

@media (min-width: 900px) {
    .megamenu--stapel .megamenu__blad {
        block-size: calc(100dvh - var(--megamenu-top, 68px));
        max-block-size: none;
        border-bottom: 0;
    }

    .megamenu--stapel .megamenu__kop {
        display: flex;
        align-items: flex-end;
        gap: 18px;
        min-block-size: 0;
        padding: 22px max(var(--gutter, 16px), calc((100vw - 1240px) / 2)) 16px;
        border-bottom: 1px solid var(--lijn-zacht, var(--lijn));
        background: color-mix(in oklab, var(--grond-warm, var(--grond)) 85%, transparent);
        backdrop-filter: blur(10px);
    }
    .megamenu--stapel .mm-titel { display: flex; flex-direction: column; gap: 2px; margin-inline-end: auto; }
    .megamenu--stapel .megamenu__titel {
        font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem);
        line-height: 1.1;
        color: var(--inkt);
    }
    .megamenu--stapel .mm-titel__sub {
        display: block;
        font-size: .875rem;
        color: var(--inkt-gedempt, var(--inkt-zacht));
    }
    .megamenu--stapel .mm-titel__alles {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        border-radius: var(--radius-rond, 999px);
        background: var(--accent);
        color: var(--op-accent);
        font-weight: 700;
        font-size: .9375rem;
        text-decoration: none;
        white-space: nowrap;
    }
    .megamenu--stapel .mm-titel__alles span { transition: translate .2s ease; }
    .megamenu--stapel .mm-titel__alles:hover span { translate: 3px 0; }
    .megamenu--stapel .mm-titel__alles:hover { background: var(--accent-diep, var(--accent)); }

    .megamenu--stapel .megamenu__lijf { padding-block: 20px 28px; }
}

/* De slotkaart vult het gat onder de kortste kolommen; het script geeft haar
   breedte, hoogte en plaats. Staat ze er, dan is de voet eronder dubbel. */
@media (min-width: 900px) {
    .megamenu--stapel .mm-slot {
        top: 0; left: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 10px;
        padding: 24px 28px;
        border-radius: var(--radius-xl, 24px);
        border: 2px dashed color-mix(in oklab, var(--accent) 45%, transparent);
        background:
            radial-gradient(80% 90% at 100% 100%, var(--accent-waas, transparent), transparent 70%),
            var(--paneel, var(--grond));
        overflow: hidden;
    }
    .megamenu--stapel .mm-slot[hidden] { display: none; }
    .megamenu--stapel .mm-slot__kop {
        font-family: var(--kop-font);
        font-weight: 800;
        font-size: 1.375rem;
        line-height: 1.15;
        color: var(--inkt);
    }
    .megamenu--stapel .mm-slot__tekst { max-width: 36ch; font-size: .9375rem; color: var(--inkt-zacht); }
    .megamenu--stapel .mm-slot__knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
    .megamenu--stapel .mm-slot__knop { background: var(--accent); color: var(--op-accent); border-color: var(--accent); }
    .megamenu--stapel .heeft-slot + .megamenu__voet { display: none; }
}