/*
 * Nonsho — het gezicht van de winkel.
 *
 * De lijn: plethora/docs/merk/DE-LIJN.md. Luxe behandeling van gewone dingen.
 *
 *   Het tafelblad is wit.   De pagina is rustig en licht, zodat producten en
 *                           prijzen eerlijk leesbaar zijn. Donker is de
 *                           schakelaar, niet de standaard.
 *   Het doosje is zwart.    Echt zwart, als bühne die je opent: de hero, de
 *                           band met objets, de voet. Geen zwart behang.
 *   Goud betekent belang.   Het merk, de lintlijn, een gekozen staat.
 *   Terracotta koopt.       Enkel op de knop die in de wagen legt.
 *
 * Wat er met opzet niet in zit: kapitalen boven elke kop, een verloop als
 * versiering, doorstreepte nepprijzen, een schaduw onder elke kaart.
 */

@layer skin {

    :root {
        --doos: #050505;
        --doos-fluweel: #0d0c0a;
        --op-doos: #f4efe4;
        --op-doos-zacht: #b9b1a1;
        --goud: #c9a050;
        --goud-glans: #e9cf8e;
        --goud-diep: #8a6a2a;

        /* Het logo: groter, met lucht, en een zachte gouden gloed in plaats van
           een harde witte rand. Een vierde van de dekking, ver uitgesmeerd. */
        --merk-hoogte: 50px;
        --merk-logo-rand: drop-shadow(0 0 10px rgb(201 160 80 / 0.22)) drop-shadow(0 0 2px rgb(233 207 142 / 0.18));
    }

    /* ── letters ─────────────────────────────────────────────────────── */

    /* Marcellus heeft enkel gewicht 400. Elke andere waarde tekent een
       nagemaakte vette letter, en die ziet er goedkoop uit. */
    h1, h2, h3, .kop, .sectiekop h2 {
        font-weight: 400;
        letter-spacing: 0.005em;
    }

    /* Productnamen zijn tekst om te lezen, geen titels om te bewonderen. */
    .kaart__titel {
        font-family: var(--tekst-font);
        font-weight: 500;
        letter-spacing: 0;
    }

    /* De prijs groot en eerlijk, met cijfers van gelijke breedte. */
    .prijs {
        font-family: var(--tekst-font);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.01em;
    }

    .kaart__merk {
        color: var(--goud-diep);
        letter-spacing: 0.04em;
    }

    /* ── kaarten zonder vak ─────────────────────────────────────────── */

    /* Geen doosjes rond de producten: het product staat op het tafelblad, de
       naam en de prijs eronder. Sven, 28 oktober 2026: "afstappen van die
       vakskes view". Een vrijstaand beeld (goedgekeurd in het beheer) krijgt
       een schaduw die de vorm volgt; een sfeerfoto blijft een foto, met een
       zachte hoek. */
    .kaart,
    .kaart:hover {
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        translate: none;
        overflow: visible;
    }

    .kaart__beeld { border-radius: var(--radius-m, 6px); }

    .kaart__lijf { padding-inline: 2px; }

    .kaart__beeld--vrij {
        background: transparent;
        overflow: visible;
    }

    /* Absoluut in het vak: een hoog beeld (een ketting) duwt anders het
       vierkant open, want aspect-ratio is maar een minimum. */
    .kaart__beeld--vrij .kaart__vrij {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 9%;
        filter: drop-shadow(0 14px 14px rgb(23 20 15 / 0.18)) drop-shadow(0 2px 3px rgb(23 20 15 / 0.12));
        transition: translate var(--duur-traag) var(--soepel), filter var(--duur-traag) var(--soepel);
    }

    /* Op aanwijzen komt het product een fractie omhoog, als uit het doosje. */
    .kaart:hover .kaart__beeld--vrij .kaart__vrij {
        scale: 1;
        translate: 0 -5px;
        filter: drop-shadow(0 20px 18px rgb(23 20 15 / 0.2)) drop-shadow(0 2px 3px rgb(23 20 15 / 0.12));
    }

    /* Licht: het vrijstaande beeld. Donker: de gewone foto, want op zwart
       toont een uitgeknipt beeld elk restje achtergrond. */
    .kaart__beeld--vrij .kaart__foto { display: none; }

    :root[data-thema="donker"] .kaart__beeld--vrij { background: var(--grond-diep); overflow: hidden; }
    :root[data-thema="donker"] .kaart__beeld--vrij .kaart__vrij { display: none; }
    :root[data-thema="donker"] .kaart__beeld--vrij .kaart__foto { display: block; position: static; padding: 0; filter: none; object-fit: cover; translate: none; }

    @media (prefers-color-scheme: dark) {
        :root:not([data-thema="licht"]) .kaart__beeld--vrij { background: var(--grond-diep); overflow: hidden; }
        :root:not([data-thema="licht"]) .kaart__beeld--vrij .kaart__vrij { display: none; }
        :root:not([data-thema="licht"]) .kaart__beeld--vrij .kaart__foto { display: block; position: static; padding: 0; filter: none; object-fit: cover; translate: none; }
    }

    @media (prefers-reduced-motion: reduce) {
        .kaart:hover .kaart__beeld--vrij .kaart__vrij { translate: none; }
    }

    /* ── de kop ──────────────────────────────────────────────────────── */

    .merk--beeld { padding-block: 6px; }

    /* ── de koopknop: terracotta, en enkel daar ─────────────────────── */

    .knop--hoofd, .knop--primair, button[name="in_wagen"], .kaart__inwagen {
        background: var(--accent);
        color: #fff;
        border-color: var(--accent);
    }

    /* ── de bühne ────────────────────────────────────────────────────── */

    .buhne {
        position: relative;
        isolation: isolate;
        background: var(--doos);
        color: var(--op-doos);
        overflow: hidden;
        min-height: clamp(420px, 62vh, 620px);
        display: grid;
        align-items: center;
    }

    .buhne__beeld {
        position: absolute;
        inset: 0;
        z-index: -2;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 72% 50%;
    }

    /* Het donker links is de plaats van de zin; het beeld zelf laat daar al
       ruimte, dit zorgt dat de letters ook op een smal scherm leesbaar staan. */
    .buhne::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(90deg, rgb(5 5 5 / 0.92) 0%, rgb(5 5 5 / 0.55) 42%, rgb(5 5 5 / 0) 68%);
    }

    .buhne__inhoud {
        max-width: 34rem;
        padding-block: var(--ruimte-12, 3rem);
    }

    .buhne h1 {
        font-family: var(--kop-font);
        font-size: clamp(2.6rem, 1.6rem + 4vw, 4.75rem);
        line-height: 1.02;
        color: var(--op-doos);
        margin: 0 0 var(--ruimte-5, 1.25rem);
        text-wrap: balance;
    }

    .buhne p {
        color: var(--op-doos-zacht);
        font-size: var(--tekst-l, 1.125rem);
        max-width: 30ch;
        margin: 0 0 var(--ruimte-8, 2rem);
    }

    .buhne__knoppen { display: flex; flex-wrap: wrap; gap: var(--ruimte-3, .75rem) var(--ruimte-6, 1.5rem); align-items: center; }

    .buhne__knop {
        display: inline-flex;
        align-items: center;
        min-height: 48px;
        padding: 0 1.5rem;
        border-radius: var(--radius-m, 6px);
        background: var(--accent);
        color: #fff;
        font-weight: 600;
        text-decoration: none;
    }

    .buhne__knop:hover { background: color-mix(in oklab, var(--accent) 88%, #000); }

    .buhne__link {
        color: var(--goud-glans);
        text-decoration-color: color-mix(in oklab, var(--goud) 55%, transparent);
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    @media (max-width: 720px) {
        .buhne { min-height: 0; align-items: end; }
        .buhne__beeld { position: relative; height: 56vw; object-position: 78% 50%; }
        .buhne::before { background: linear-gradient(0deg, var(--doos) 38%, rgb(5 5 5 / 0) 60%); }
        .buhne__inhoud { padding-block: 0 var(--ruimte-8, 2rem); margin-top: -18vw; }
    }

    /* ── de lintlijn: het éne opvallende element ───────────────────── */

    .lint {
        display: block;
        width: 100%;
        height: 70px;
        color: var(--goud);
        pointer-events: none;
    }

    .lint path {
        fill: none;
        stroke: currentColor;
        stroke-width: 1.4;
        stroke-linecap: round;
        stroke-dasharray: 2400;
        stroke-dashoffset: 0;
    }

    @media (prefers-reduced-motion: no-preference) {
        .lint path { stroke-dashoffset: 2400; animation: lint-trekken 2.4s cubic-bezier(.65, 0, .35, 1) .35s forwards; }
        @keyframes lint-trekken { to { stroke-dashoffset: 0; } }
    }

    /* ── de CTA-rij: drie concepten, elk één gedachte groot ──────────── */
    /* Sven, 4 november 2026: warm, rond, eenvoudig, "denk in concepten".
       Per tegel: de kop groot, de baseline eronder, het beeld vrijstaand
       (echte alfa), één sticker, één knop. Honing, perzik, terracotta. */

    .ctarij {
        --cta-inkt: #2a1e16;
        --cta-rond: 30px;
        display: grid;
        grid-template-columns: 1fr 1fr 1.5fr;
        gap: var(--ruimte-4, 1rem);
        padding-block: var(--ruimte-6, 1.5rem) var(--ruimte-2, .5rem);
    }

    .ctategel {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        aspect-ratio: 1;
        display: flex; flex-direction: column; align-items: flex-start;
        padding: clamp(1.1rem, 2.2vw, 1.6rem);
        border-radius: var(--cta-rond);
        color: var(--cta-inkt);
        text-decoration: none;
        font-family: var(--tekst-font);
        container-type: inline-size;
        transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s cubic-bezier(.22, 1, .36, 1);
    }
    .ctategel:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -12px rgb(60 30 10 / .35); }
    .ctategel:focus-visible { outline: 3px solid var(--goud); outline-offset: 3px; }

    .ctategel--kaarsen { background: #f6c76f; }
    .ctategel--speelgoed { background: #f3b9a0; }
    .ctategel--bf { aspect-ratio: auto; background: #c4553a; color: #fff7ee; }

    .ctategel__kop {
        font-weight: 700;
        letter-spacing: -.035em;
        font-size: 13cqi;
        line-height: .96;
        max-width: 8ch;
        text-wrap: balance;
    }
    .ctategel--bf .ctategel__kop { font-size: 10.5cqi; max-width: none; }
    .ctategel__base {
        margin-top: .55rem;
        font-weight: 500;
        font-size: clamp(.85rem, 4.6cqi, 1.1rem);
        line-height: 1.25;
        max-width: 15ch;
        opacity: .85;
    }
    .ctategel--bf .ctategel__base { max-width: 16ch; font-size: clamp(.95rem, 3.6cqi, 1.25rem); }

    .ctategel__sticker {
        position: absolute; z-index: 2;
        width: clamp(3.6rem, 22cqi, 5rem); aspect-ratio: 1;
        border-radius: 50%;
        display: grid; place-content: center; text-align: center;
        background: #b5432f; color: #fff;
        font-weight: 700; font-size: clamp(.9rem, 6cqi, 1.15rem); line-height: 1.02;
        transform: rotate(-10deg);
        box-shadow: 0 6px 14px -4px rgb(60 20 10 / .35);
    }
    .ctategel__sticker small { display: block; font-size: .6em; font-weight: 600; }
    .ctategel--kaarsen .ctategel__sticker { top: 42%; left: 32%; }
    .ctategel--speelgoed .ctategel__sticker { top: 58%; left: 7%; background: #2a1e16; }
    .ctategel--bf .ctategel__sticker { top: 10%; right: 5%; width: clamp(3.6rem, 13cqi, 5rem); font-size: clamp(.9rem, 3.6cqi, 1.15rem); background: #f6c76f; color: var(--cta-inkt); }

    /* Vrijstaand: een echte uitsnede met zijn eigen schaduw. */
    .ctategel__foto {
        position: absolute; z-index: -1;
        object-fit: contain;
        filter: drop-shadow(0 14px 14px rgb(60 30 10 / .25));
        transition: transform .5s cubic-bezier(.22, 1, .36, 1);
    }
    .ctategel__foto--kilo { right: 6%; bottom: 5%; height: 80%; width: auto; }
    .ctategel__foto--sint { right: 1%; bottom: 13%; width: 60%; height: auto; }
    .ctategel__foto--doos { right: 3%; bottom: 4%; width: 52%; height: auto; }
    .ctategel:hover .ctategel__foto { transform: translateY(-4px) rotate(-1.5deg); }

    .ctategel__knop {
        margin-top: auto;
        display: inline-flex; align-items: center; gap: .4rem;
        min-height: 46px; padding: 0 1.25rem;
        border-radius: 999px;
        background: var(--cta-inkt); color: #fff;
        font-weight: 600; font-size: clamp(.9rem, .82rem + .25vw, 1rem);
        white-space: nowrap;
        transition: background .25s ease, color .25s ease;
    }
    .ctategel:hover .ctategel__knop { background: #b5432f; }
    .ctategel--bf:hover .ctategel__knop { background: #fff7ee; color: var(--cta-inkt); }

    @media (prefers-reduced-motion: no-preference) {
        .ctategel__sticker { animation: sticker-wieg 3.6s cubic-bezier(.45, 0, .55, 1) infinite; }
        @keyframes sticker-wieg { 0%, 100% { transform: rotate(-10deg) scale(1); } 50% { transform: rotate(-5deg) scale(1.04); } }
    }
    @media (prefers-reduced-motion: reduce) { .ctategel, .ctategel__foto { transition: none; } }

    /* Op een gsm zijn drie concepten in twee vierkanten te krap: de sticker
       viel over de knop. Daar staan ze onder elkaar, elk over de breedte:
       tekst links, beeld rechts. */
    @media (max-width: 720px) {
        .ctarij { grid-template-columns: 1fr; gap: .6rem; --cta-rond: 24px; }
        .ctategel, .ctategel--bf { aspect-ratio: auto; min-height: 58vw; padding: 1rem 1.1rem; }
        .ctategel__kop, .ctategel--bf .ctategel__kop { font-size: 9.5cqi; max-width: 8.5ch; }
        .ctategel--bf .ctategel__kop { max-width: 7ch; }
        .ctategel__base, .ctategel--bf .ctategel__base { font-size: 3.9cqi; max-width: 17ch; }
        .ctategel__knop { min-height: 40px; padding: 0 1rem; font-size: .9rem; margin-top: auto; }
        .ctategel__knoplang { display: inline; }
        .ctategel__sticker, .ctategel--bf .ctategel__sticker { width: 3.7rem; font-size: .85rem; }
        .ctategel--kaarsen .ctategel__sticker { top: 46%; left: 46%; }
        .ctategel--speelgoed .ctategel__sticker { top: 8%; right: 5%; left: auto; }
        .ctategel--bf .ctategel__sticker { top: 8%; right: 5%; }
        .ctategel__foto--kilo { height: 90%; right: 7%; bottom: 5%; }
        .ctategel__foto--sint { width: 50%; right: 2%; bottom: 6%; }
        .ctategel__foto--doos { width: 50%; right: 3%; bottom: 8%; }
    }

    /* ── de rail: banners naast elkaar, vervagend aan de randen ──────── */
    /* De rij loopt van rand tot rand. De eerste kaart staat op de lijn van de
       inhoud; wat ernaast schuift, vervaagt in de marge naar transparant. */

    .rail {
        --rail-marge: max(var(--gutter), calc((100vw - var(--breedte)) / 2 + var(--gutter)));
        --rail-vaag: var(--rail-marge);
        padding-block: var(--ruimte-5, 1.25rem) var(--ruimte-8, 2rem);
    }

    .rail__kop { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: var(--ruimte-3, .75rem); }
    .rail__kop h2 { margin: 0; }
    .rail__kop h2, .thuis-kop { font-family: var(--tekst-font); font-weight: 700; letter-spacing: -.025em; }

    .rail__pijlen { display: flex; gap: .5rem; }
    .rail__pijlen[hidden] { display: none; }
    .rail__pijl {
        width: 44px; height: 44px;
        border-radius: 50%;
        border: 1px solid var(--lijn);
        background: transparent;
        color: var(--inkt);
        font-size: 1.6rem; line-height: 1;
        cursor: pointer;
    }
    .rail__pijl:hover:not(:disabled) { border-color: var(--goud); color: var(--goud-diep); }
    .rail__pijl:disabled { opacity: .35; cursor: default; }
    @media (hover: none) { .rail__pijlen { display: none; } }

    .rail__rij {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: clamp(16rem, 30vw, 26rem);
        column-gap: var(--ruimte-4, 1rem);
        margin: 0;
        padding: .25rem var(--rail-marge) .75rem;
        list-style: none;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--rail-marge);
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--rail-vaag), #000 calc(100% - var(--rail-vaag)), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 var(--rail-vaag), #000 calc(100% - var(--rail-vaag)), transparent 100%);
    }
    .rail__rij::-webkit-scrollbar { display: none; }
    .rail__item { scroll-snap-align: start; }
    /* Tijdens het glijden staat het vastklikken uit, anders trekt de browser
       elke tussenstap terug naar een kaartrand en hapert de beweging. */
    .rail__rij--glijdt { scroll-snap-type: none; }

    /* De binnenkomst: elke kaart een tel later, van rechts, met dezelfde
       zachte landing als het schuiven. */
    .rail--wacht .rail__item { opacity: 0; transform: translateX(3rem); }
    .rail--binnen .rail__item {
        animation: rail-binnen .9s cubic-bezier(.22, 1, .36, 1) both;
        animation-delay: calc(var(--i, 0) * 90ms);
    }
    @keyframes rail-binnen { from { opacity: 0; transform: translateX(3rem); } to { opacity: 1; transform: none; } }
    @media (prefers-reduced-motion: reduce) { .rail--binnen .rail__item { animation: none; } }

    /* Een kaart is een etalage: links de rubriek met hoeveel er te kiezen is
       en een knop, rechts het artikel met zijn prijs. Warm en rond, zoals de
       CTA-rij erboven (Sven, 4 november 2026). Een goedgekeurd vrijstaand
       beeld staat vrij op het warme vlak; een sfeerfoto vult het. */
    .railkaart {
        --rk-vlak: #f7ece0;
        --rk-inkt: #2a1e16;
        display: grid;
        grid-template-columns: 44% 1fr;
        aspect-ratio: 3 / 2;
        border-radius: 20px;
        overflow: hidden;
        background: var(--rk-vlak);
        color: var(--rk-inkt);
        text-decoration: none;
        transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s cubic-bezier(.22, 1, .36, 1);
    }
    .railkaart:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -14px rgb(60 30 10 / .35); }
    .railkaart__vlak {
        display: flex; flex-direction: column; justify-content: center; gap: .35rem;
        padding: clamp(.9rem, 2.2vw, 1.4rem);
        min-width: 0;
    }
    .railkaart__boven { color: #b5432f; font-weight: 600; font-size: var(--tekst-xs, .75rem); letter-spacing: .06em; text-transform: uppercase; }
    .railkaart__kop { font-family: var(--tekst-font); font-weight: 700; letter-spacing: -.02em; font-size: clamp(1.1rem, .95rem + .6vw, 1.45rem); line-height: 1.12; color: var(--rk-inkt); text-wrap: balance; }
    .railkaart__aantal { color: color-mix(in oklab, var(--rk-inkt) 62%, transparent); font-size: var(--tekst-s); }
    .railkaart__knop {
        align-self: start;
        margin-top: .5rem;
        display: inline-flex; align-items: center;
        min-height: 38px; padding: 0 1rem;
        border-radius: 999px;
        background: var(--rk-inkt); color: #fff;
        font-weight: 600; font-size: var(--tekst-s);
        white-space: nowrap;
        transition: background .25s ease;
    }
    .railkaart__foto { position: relative; overflow: hidden; background: #efe0d0; }
    .railkaart__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
    /* Sven, 5 november 2026: vrijstaande beelden groter en aflopend. Het
       artikel staat op het warme vlak en loopt onder en rechts van de kaart af. */
    .railkaart__foto:has(.railkaart__vrij) { background: transparent; overflow: visible; }
    .railkaart__foto img.railkaart__vrij {
        position: absolute; right: -14%; bottom: -16%;
        width: 135%; height: 135%; max-width: none;
        object-fit: contain; object-position: right bottom;
        filter: drop-shadow(0 14px 16px rgb(60 30 10 / .25));
    }
    .railkaart__foto img.railkaart__vrij--breed { width: 150%; height: 120%; right: -50%; bottom: -4%; }
    .railkaart__vlak { position: relative; z-index: 1; }
    .railkaart__prijs { z-index: 2; }
    .railkaart__prijs {
        position: absolute; right: .7rem; bottom: .7rem;
        padding: .25rem .65rem;
        border-radius: 999px;
        background: #fff; color: var(--rk-inkt);
        font-weight: 700; font-size: var(--tekst-s);
        font-variant-numeric: tabular-nums;
        box-shadow: 0 4px 10px -4px rgb(60 30 10 / .3);
    }
    .railkaart:hover .railkaart__foto img { transform: scale(1.04); }
    .railkaart:hover .railkaart__knop { background: #b5432f; }
    .railkaart:focus-visible { outline: 2px solid var(--goud); outline-offset: 3px; }
    @media (prefers-reduced-motion: reduce) { .railkaart, .railkaart__foto img { transition: none; } }
    @media (max-width: 720px) { .rail__rij { grid-auto-columns: 82vw; } }

    /* ── de band met objets ─────────────────────────────────────────── */

    .objets {
        background: var(--doos);
        color: var(--op-doos);
        padding-block: var(--ruimte-12, 3rem);
    }

    .objets h2 { color: var(--op-doos); margin-bottom: var(--ruimte-2, .5rem); }
    .objets__onder { color: var(--op-doos-zacht); margin: 0 0 var(--ruimte-8, 2rem); }

    .objets__rij {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--ruimte-5, 1.25rem);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .objets figure { margin: 0; }

    .objets img {
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover;
        border-radius: var(--radius-m, 6px);
        display: block;
    }

    .objets figcaption {
        margin-top: var(--ruimte-3, .75rem);
        color: var(--op-doos-zacht);
        font-size: var(--tekst-s);
    }

    .objets figcaption strong { color: var(--op-doos); font-weight: 500; display: block; font-size: var(--tekst-m); }
    .objets__prijs { display: block; margin-top: var(--ruimte-1, .25rem); color: var(--goud-glans); }

    .objets__link { display: block; color: inherit; text-decoration: none; border-radius: var(--radius-m, 6px); }
    .objets__link:focus-visible { outline: 2px solid var(--goud); outline-offset: 4px; }
    .objets__link:hover strong { text-decoration: underline; text-underline-offset: .2em; }

    @media (max-width: 720px) {
        .objets__rij { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; }
        .objets__rij > li { scroll-snap-align: start; }
    }

    /* ── de belofte ─────────────────────────────────────────────────── */

    .beloftes { border-bottom: 1px solid var(--lijn); }
    .beloftes svg { color: var(--goud); }

    /* ── de voet: het deksel van het doosje ─────────────────────────── */

    .siteVoet {
        background: var(--doos);
        color: var(--op-doos-zacht);
        border-top: 1px solid color-mix(in oklab, var(--goud) 40%, transparent);
    }

    .siteVoet a { color: var(--op-doos); }
    .siteVoet h2, .siteVoet h3, .siteVoet strong { color: var(--op-doos); }
}

@layer skin {
    /* ── gift deals ────────────────────────────────────────────────────
       Een pakket moet je in één oogopslag tussen de gewone producten zien.
       Zwart kaartje (het doosje), en een terracotta sticker die een tikje
       schuin hangt, alsof iemand hem er net op plakte. Speels, maar strak. */
    .kaart--pakket {
        position: relative;
        background: var(--doos);
        color: var(--op-doos);
        border-radius: var(--radius-m, 6px);
        padding-bottom: var(--ruimte-3, .75rem);
        overflow: visible;
    }
    .kaart--pakket .kaart__lijf { padding-inline: var(--ruimte-4, 1rem); }
    .kaart--pakket .kaart__titel, .kaart--pakket .kaart__titel a { color: var(--op-doos); }
    .kaart--pakket .kaart__merk { color: var(--goud-glans); }
    .kaart--pakket .prijs { color: var(--op-doos); }
    .kaart--pakket .prijs--was { color: var(--op-doos-zacht); }
    .kaart--pakket .kaart__beeld { border-radius: var(--radius-m, 6px) var(--radius-m, 6px) 0 0; }

    .kaart__sticker {
        position: absolute;
        top: -14px;
        right: -10px;
        z-index: 3;
        width: 86px;
        height: 86px;
        border-radius: 50%;
        background: var(--accent);
        color: #fff;
        display: grid;
        place-content: center;
        text-align: center;
        line-height: 1.05;
        rotate: 9deg;
        box-shadow: 0 6px 14px rgb(0 0 0 / .25), inset 0 0 0 2px rgb(233 207 142 / .55);
        font-family: var(--tekst-font);
        pointer-events: none;
    }
    .kaart__sticker span { font-size: .68rem; letter-spacing: .02em; }
    .kaart__sticker strong { font-size: .95rem; font-weight: 700; }

    @media (prefers-reduced-motion: no-preference) {
        .kaart--pakket:hover .kaart__sticker { rotate: 3deg; transition: rotate var(--duur-normaal) var(--soepel); }
    }

    /* De band op de startpagina. */
    .deals {
        background: var(--doos);
        color: var(--op-doos);
        padding-block: var(--ruimte-12, 3rem);
    }
    .deals h2 { color: var(--op-doos); margin-bottom: var(--ruimte-2, .5rem); }
    .deals__onder { color: var(--op-doos-zacht); margin: 0 0 var(--ruimte-8, 2rem); }
    .deals .kaart--pakket { background: var(--doos-fluweel); outline: 1px solid color-mix(in oklab, var(--goud) 35%, transparent); }
}

@layer skin {
    /* Het doosje is breed: de pakketkaart ook, anders vallen de buitenste
       vakjes weg. Eén korting volstaat: de sticker, niet ook het −15%-vlagje. */
    .kaart--pakket .kaart__beeld { aspect-ratio: 4 / 3; }
    .kaart--pakket .kaart__beeld img { object-fit: cover; object-position: 50% 30%; }
    .kaart--pakket .kaart__vlaggen { display: none; }

    .deals .knop--rand {
        background: transparent;
        color: var(--goud-glans) !important;
        border-color: color-mix(in oklab, var(--goud) 60%, transparent) !important;
    }
    .deals .knop--rand:hover { background: color-mix(in oklab, var(--goud) 14%, transparent); }
}

@layer skin {
    /* ── de verzendmeter: een zwart doosje dat zich met goud vult ─────── */
    .verzendbalk__spoor {
        position: relative;
        height: 14px;
        margin-top: var(--ruimte-3, .75rem);
        margin-bottom: 2.75rem;
        background: var(--doos);
        border-radius: 999px;
        box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--goud) 45%, transparent);
        overflow: visible;
    }
    .verzendbalk__vulling {
        height: 100%;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--goud-diep), var(--goud) 60%, var(--goud-glans));
        box-shadow: 0 0 12px rgb(201 160 80 / .35);
        transition: width var(--duur-traag, .6s) var(--soepel, ease);
    }
    .verzendbalk__mijlpaal {
        position: absolute;
        top: 50%;
        width: 18px;
        height: 18px;
        translate: -50% -50%;
        border-radius: var(--radius-s, 4px);
        background: var(--doos);
        box-shadow: inset 0 0 0 2px var(--goud);
    }
    .verzendbalk__mijlpaal.is-gehaald { background: var(--goud); box-shadow: 0 0 0 2px var(--doos), 0 0 10px rgb(201 160 80 / .5); }
    .verzendbalk__label {
        position: absolute;
        top: 22px;
        left: 50%;
        translate: -50% 0;
        white-space: nowrap;
        font-size: .72rem;
        line-height: 1.3;
        text-align: center;
        color: var(--inkt-gedempt);
    }
    /* Wat je krijgt bovenaan, vanaf welk bedrag eronder. */
    .verzendbalk__label strong { display: block; font-weight: 600; color: var(--inkt); }
    /* De laatste mijlpaal staat op de rand: zijn tekst lijnt rechts uit. */
    .verzendbalk__mijlpaal.is-laatste .verzendbalk__label { left: auto; right: -1px; translate: 0 0; text-align: right; }
    .verzendbalk__mijlpaal.is-gehaald .verzendbalk__label { color: var(--goud-diep); font-weight: 600; }
    .verzendbalk__mijlpaal.is-gehaald .verzendbalk__label strong { color: inherit; }
    @media (prefers-reduced-motion: reduce) { .verzendbalk__vulling { transition: none; } }
}

@layer skin {
    /* ── de actie: één artikel, groot, op een warme gouden ondergrond ─── */
    .actie {
        background: color-mix(in oklab, var(--goud) 12%, var(--grond));
        border-block: 1px solid color-mix(in oklab, var(--goud) 40%, transparent);
        padding-block: var(--ruimte-10, 2.5rem);
    }
    .actie__binnen {
        display: grid;
        gap: var(--ruimte-8, 2rem);
        align-items: center;
    }
    @media (min-width: 48rem) {
        .actie__binnen { grid-template-columns: 1.1fr .9fr; }
    }
    .actie__kop {
        font-family: var(--kop-font);
        font-size: clamp(2.75rem, 1.6rem + 5vw, 5.5rem);
        line-height: 1;
        margin: 0 0 var(--ruimte-3, .75rem);
        text-wrap: balance;
    }
    .actie__baseline {
        font-family: var(--kop-font);
        font-style: italic;
        font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem);
        color: var(--goud-diep);
        margin: 0 0 var(--ruimte-4, 1rem);
        text-wrap: balance;
    }
    .actie__uitleg { max-width: 48ch; margin: 0 0 var(--ruimte-6, 1.5rem); color: var(--inkt-gedempt); }
    .actie__koop { display: flex; align-items: center; gap: var(--ruimte-4, 1rem); flex-wrap: wrap; }
    .actie__prijs { font-size: 1.75rem; font-weight: 600; color: var(--inkt); }
    .actie__ook { margin: var(--ruimte-4, 1rem) 0 0; font-size: var(--tekst-s); color: var(--inkt-gedempt); }
    .actie__ook a { color: inherit; text-decoration: underline; text-decoration-color: var(--goud); text-underline-offset: .2em; }
    .actie__ook a:hover { color: var(--inkt); }
    .actie__beeld { display: block; justify-self: center; max-width: 26rem; width: 100%; }
    .actie__beeld--campagne { max-width: 34rem; }
    .actie__beeld--campagne img { box-shadow: 0 24px 60px -24px rgb(0 0 0 / .55); }
    .actie__beeld img { width: 100%; height: auto; display: block; border-radius: var(--radius-l, 1rem); }
}

@layer skin {
    /* ── het lintje: het logo-lint als hoekband over een actiebeeld ──── */
    .actie__beeld--campagne { position: relative; }
    .lintje {
        position: absolute;
        top: -.4rem;
        left: -.4rem;
        width: 13.5rem;
        aspect-ratio: 1;
        overflow: hidden;
        z-index: 1;
        pointer-events: none;
    }
    /* De zwarte achterkant van het lint, waar het rond de rand vouwt. */
    .lintje::before,
    .lintje::after {
        content: "";
        position: absolute;
        z-index: -1;
        border: .4rem solid #0b0a08;
        border-top-color: transparent;
        border-left-color: transparent;
    }
    .lintje::before { top: 0; right: 0; }
    .lintje::after { bottom: 0; left: 0; }
    .lintje__band {
        position: absolute;
        top: 3.1rem;
        left: -4.2rem;
        width: 19rem;
        padding: .75rem 0 .7rem;
        rotate: -45deg;
        text-align: center;
        font-family: var(--tekst-font);
        font-weight: 800;
        font-size: .95rem;
        letter-spacing: .16em;
        color: #14120d;
        /* Satijn: het licht loopt schuin over het goud, zoals op het logo. */
        background:
            linear-gradient(100deg, transparent 30%, rgb(255 246 214 / .55) 46%, transparent 60%),
            linear-gradient(180deg, var(--goud-glans) 0%, var(--goud) 48%, var(--goud-diep) 100%);
        border-block: 1px solid rgb(20 18 13 / .55);
        box-shadow: 0 6px 14px -4px rgb(0 0 0 / .6);
        text-shadow: 0 1px 0 rgb(255 240 200 / .35);
    }
}

@layer skin {
    /* Achter elke actieband ligt haar hero op 15 %, over de hele breedte. */
    .actie { position: relative; isolation: isolate; overflow: hidden; }
    .actie::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--actie-hero, none) center / cover no-repeat;
        opacity: .15;
    }
}

@layer skin {
    @media (max-width: 30rem) {
        .lintje { width: 10.5rem; }
        .lintje__band { top: 2.3rem; left: -3.4rem; width: 15rem; font-size: .78rem; padding-block: .55rem .5rem; }
    }
}

@layer skin {
    /* Het lint op de hele band: rechtsboven, en de band snijdt het af, dus
       zonder plooien. */
    .lintje--band { top: 0; right: 0; left: auto; }
    .lintje--band::before,
    .lintje--band::after { display: none; }
    .lintje--band .lintje__band { left: auto; right: -4.2rem; rotate: 45deg; }
    @media (max-width: 30rem) {
        .lintje--band .lintje__band { right: -3.4rem; }
        .actie:has(.lintje--band) { padding-top: 5.5rem; }
    }
}


/* ───────────────────────────────────────── het mega menu: het doosje ── */

/*
 * Sven, 1 november 2026: "ik wil op nonsho een even coole mega menu dan op
 * elfjes". Dezelfde stapel als bij Elfjes, in de lijn van dit thema: het blad
 * is de bühne in zwart fluweel, elke rubriek is een sokkel waarop het product
 * op een wit tafelblad staat, en goud staat enkel op de lintlijn en op wat
 * gekozen is. Terracotta enkel op de sticker van een echte korting.
 *
 * Buiten elke @layer, net als het basismenu in winkel.css: anders wint dat.
 *
 * Let op: het stapelscript zet de plaats van elke kaart met `transform`. Een
 * hover-effect zet dus nooit `transform` op de kaart zelf, enkel op wat
 * erin zit.
 */

/* ── overal: het vel is zwart, ook op een telefoon ── */
.megamenu--doos {
    --mm-doos: var(--doos, #050505);
    --mm-fluweel: var(--doos-fluweel, #0d0c0a);
    --mm-kaart: #141210;
    --mm-op: var(--op-doos, #f4efe4);
    --mm-op-zacht: var(--op-doos-zacht, #b9b1a1);
    --mm-lijn: rgb(244 239 228 / .1);
    --mm-goud: var(--goud, #c9a050);
    --mm-glans: var(--goud-glans, #e9cf8e);
    --mm-tafel: #f6f2ea;
    color: var(--mm-op);
}
.megamenu--doos .megamenu__sluier { background: rgb(5 5 5 / .55); backdrop-filter: blur(3px); }
.megamenu--doos .megamenu__blad {
    background:
        radial-gradient(70% 55% at 85% 0%, rgb(201 160 80 / .1), transparent 70%),
        radial-gradient(60% 50% at 0% 100%, rgb(181 67 47 / .07), transparent 70%),
        var(--mm-doos);
    border-color: color-mix(in oklab, var(--mm-goud) 35%, transparent);
    color: var(--mm-op);
}
.megamenu--doos .megamenu__kop { border-color: var(--mm-lijn); }
.megamenu--doos .megamenu__titel { font-weight: 400; color: var(--mm-op); }
.megamenu--doos .megamenu__sluit { color: var(--mm-op); }
.megamenu--doos .megamenu__kolom + .megamenu__kolom { border-color: var(--mm-lijn); }
.megamenu--doos .megamenu__hoofd { font-weight: 500; }
.megamenu--doos .megamenu__hoofd:hover,
.megamenu--doos .megamenu__hoofd:focus-visible,
.megamenu--doos .megamenu__vouw:hover,
.megamenu--doos .megamenu__vouw:focus-visible { background: rgb(244 239 228 / .05); color: var(--mm-op); }
.megamenu--doos .megamenu__aantal { color: var(--mm-op-zacht); }
.megamenu--doos .megamenu__vouw { border-color: var(--mm-lijn); color: var(--mm-op-zacht); }
.megamenu--doos .megamenu__vouw[aria-expanded="true"] { color: var(--mm-glans); }
.megamenu--doos .megamenu__kinderen { background: var(--mm-fluweel); }
.megamenu--doos .megamenu__kind > a { color: var(--mm-op-zacht); }
.megamenu--doos .megamenu__kind > a:hover { color: var(--mm-op); }
.megamenu--doos .megamenu__voet { border-color: var(--mm-lijn); }
.megamenu--doos .megamenu__voet .knop--rand { color: var(--mm-glans); border-color: color-mix(in oklab, var(--mm-goud) 60%, transparent); background: transparent; }
.megamenu--doos .megamenu__voet .knop--stil { color: var(--mm-op-zacht); }
.megamenu--doos .mm-titel__sub,
.megamenu--doos .mm-titel__alles,
.megamenu--doos .mm-titel__koopjes,
.megamenu--doos .mm-lint { display: none; }

@media (max-width: 899.98px) {
    .megamenu--doos .mm-extra,
    .megamenu--doos .mm-sokkel,
    .megamenu--doos .mm-meer { display: none; }
}

@media (min-width: 900px) {
    /* Het blad loopt tot de onderrand en scrolt zelf; de titelbalk blijft. */
    .megamenu--doos .megamenu__blad {
        block-size: calc(100dvh - var(--megamenu-top, 68px));
        max-block-size: none;
        border-bottom: 0;
        border-top: 1px solid color-mix(in oklab, var(--mm-goud) 30%, transparent);
    }

    /* ── de titelbalk ── */
    .megamenu--doos .megamenu__kop {
        position: relative;
        display: flex;
        align-items: flex-end;
        gap: 14px;
        min-block-size: 0;
        padding: 26px max(var(--gutter, 16px), calc((100vw - 1240px) / 2)) 6px;
        border-bottom: 0;
    }
    .megamenu--doos .mm-titel { display: flex; flex-direction: column; gap: 4px; margin-inline-end: auto; }
    .megamenu--doos .megamenu__titel {
        font-family: var(--kop-font);
        font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem);
        line-height: 1.05;
        letter-spacing: .005em;
    }
    .megamenu--doos .mm-titel__sub { display: block; font-size: .875rem; color: var(--mm-op-zacht); }
    .megamenu--doos .mm-titel__alles,
    .megamenu--doos .mm-titel__koopjes {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-block-size: 40px;
        padding: 0 16px;
        border-radius: var(--radius-m, 6px);
        border: 1px solid color-mix(in oklab, var(--mm-goud) 55%, transparent);
        color: var(--mm-glans);
        font-weight: 600;
        font-size: .9rem;
        text-decoration: none;
        white-space: nowrap;
        transition: background var(--duur-normaal, .24s) ease, border-color var(--duur-normaal, .24s) ease;
    }
    .megamenu--doos .mm-titel__alles:hover { background: rgb(201 160 80 / .12); border-color: var(--mm-goud); }
    .megamenu--doos .mm-titel__alles span { transition: translate .2s ease; }
    .megamenu--doos .mm-titel__alles:hover span { translate: 3px 0; }
    .megamenu--doos .mm-titel__koopjes { border-color: var(--mm-lijn); color: var(--mm-op); }
    .megamenu--doos .mm-titel__koopjes span {
        padding: 1px 8px;
        border-radius: 999px;
        background: var(--accent);
        color: #fff;
        font-size: .75rem;
        font-variant-numeric: tabular-nums;
    }
    .megamenu--doos .mm-titel__koopjes:hover { border-color: color-mix(in oklab, var(--accent) 70%, transparent); }

    /* ── de lintlijn onder de titel: het enige wat vanzelf beweegt ── */
    .megamenu--doos .mm-lint {
        display: block;
        flex: none;
        inline-size: 100%;
        block-size: 34px;
        color: var(--mm-goud);
        pointer-events: none;
    }
    .megamenu--doos .mm-lint path {
        fill: none;
        stroke: currentColor;
        stroke-width: 1.2;
        stroke-linecap: round;
        vector-effect: non-scaling-stroke;
        stroke-dasharray: 2400;
        stroke-dashoffset: 0;
    }

    .megamenu--doos .megamenu__lijf { padding-block: 10px 32px; }

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

    /* ── de rubriek: een sokkel met een kaartje eronder ── */
    .megamenu--doos .megamenu__kolom {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 14px 16px 16px;
        background: linear-gradient(180deg, var(--mm-kaart), var(--mm-fluweel));
        border: 1px solid var(--mm-lijn);
        border-radius: var(--radius-m, 6px);
        overflow: hidden;
        transition: border-color var(--duur-normaal, .24s) ease, box-shadow var(--duur-traag, .5s) ease;
    }
    .megamenu--doos .megamenu__kolom:hover {
        border-color: color-mix(in oklab, var(--mm-goud) 55%, transparent);
        box-shadow: 0 0 0 1px rgb(201 160 80 / .15), 0 24px 48px -24px rgb(201 160 80 / .25);
    }

    /* Het tafelblad: het product staat licht en eerlijk, het doosje eromheen
       blijft zwart. Een spot van boven, een schaduw op de plank. */
    .megamenu--doos .mm-sokkel {
        position: relative;
        display: block;
        margin: -14px -16px 14px;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        background:
            radial-gradient(60% 70% at 50% 0%, #fff, transparent 75%),
            var(--mm-tafel);
    }
    .megamenu--doos .mm-sokkel::after {
        content: "";
        position: absolute;
        inset: auto 0 0;
        block-size: 1px;
        background: linear-gradient(90deg, transparent, var(--mm-goud), transparent);
        opacity: 0;
        transition: opacity var(--duur-traag, .5s) ease;
    }
    .megamenu--doos .megamenu__kolom:hover .mm-sokkel::after { opacity: .9; }
    .megamenu--doos .mm-sokkel img {
        display: block;
        inline-size: 100%;
        block-size: 100%;
        object-fit: contain;
        padding: 10%;
        mix-blend-mode: multiply;
        filter: drop-shadow(0 12px 10px rgb(23 20 15 / .16));
        transition: translate var(--duur-traag, .6s) var(--soepel, cubic-bezier(.2, .7, .2, 1)),
                    filter var(--duur-traag, .6s) var(--soepel, ease);
    }
    .megamenu--doos .megamenu__kolom:hover .mm-sokkel img {
        translate: 0 -6px;
        filter: drop-shadow(0 20px 16px rgb(23 20 15 / .2));
    }

    /* Een rubriek zonder onderdelen: een smalle kaart met een duimnagel. */
    .megamenu--doos .megamenu__kolom--los {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        align-items: center;
        gap: 14px;
        padding: 10px 16px 10px 10px;
    }
    .megamenu--doos .megamenu__kolom--los .mm-sokkel { margin: 0; aspect-ratio: 1; border-radius: 4px; }
    .megamenu--doos .megamenu__kolom--los .mm-sokkel img { padding: 8%; }
    .megamenu--doos .megamenu__kolom--los:not(:has(.mm-sokkel)) { grid-template-columns: minmax(0, 1fr); padding-inline-start: 16px; }

    .megamenu--doos .megamenu__hoofd {
        padding: 0;
        min-block-size: 0;
        border: 0;
        font-family: var(--kop-font);
        font-weight: 400;
        font-size: 1.25rem;
        line-height: 1.2;
        color: var(--mm-op);
    }
    .megamenu--doos .megamenu__hoofd:hover { background: none; color: var(--mm-glans); }
    .megamenu--doos .megamenu__aantal {
        font-family: var(--tekst-font);
        font-size: .75rem;
        font-variant-numeric: tabular-nums;
        color: var(--mm-op-zacht);
        padding: 2px 8px;
        border: 1px solid var(--mm-lijn);
        border-radius: 999px;
    }
    .megamenu--doos .megamenu__kolom:hover .megamenu__aantal { color: var(--mm-glans); border-color: color-mix(in oklab, var(--mm-goud) 45%, transparent); }

    .megamenu--doos .megamenu__kinderen { display: block; padding: 8px 0 0; background: none; }
    .megamenu--doos .megamenu__kinderen > .megamenu__kind:nth-child(n+7) { display: list-item; }
    .megamenu--doos .megamenu__kinderen > .megamenu__kind:nth-child(n+9) { display: none; }
    .megamenu--doos .megamenu__kind > a {
        position: relative;
        min-block-size: 0;
        padding: 5px 0;
        font-size: .9rem;
        color: var(--mm-op-zacht);
        text-decoration: none;
        transition: color .2s ease, padding .2s ease;
    }
    .megamenu--doos .megamenu__kind > a::before {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        inset-block-start: 50%;
        inline-size: 0;
        block-size: 1px;
        background: var(--mm-goud);
        transition: inline-size .2s ease;
    }
    .megamenu--doos .megamenu__kind > a:hover { color: var(--mm-op); padding-inline-start: 16px; text-decoration: none; }
    .megamenu--doos .megamenu__kind > a:hover::before { inline-size: 10px; }

    .megamenu--doos .megamenu__kleinkinderen { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 8px; padding: 0; list-style: none; }
    .megamenu--doos .megamenu__kleinkinderen a {
        display: block;
        padding: 3px 9px;
        border: 1px solid var(--mm-lijn);
        border-radius: 999px;
        font-size: .75rem;
        color: var(--mm-op-zacht);
        text-decoration: none;
    }
    .megamenu--doos .megamenu__kleinkinderen a:hover { border-color: var(--mm-goud); color: var(--mm-op); }

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

    /* ── wat de extra's gemeen hebben ── */
    .megamenu--doos .mm-extra {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 20px;
        border-radius: var(--radius-m, 6px);
        overflow: hidden;
        isolation: isolate;
        text-decoration: none;
        color: var(--mm-op);
    }
    .megamenu--doos .mm-oog {
        font-size: .6875rem;
        font-weight: 600;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--mm-glans);
    }
    .megamenu--doos .mm-tekst { font-size: .9375rem; line-height: 1.5; color: var(--mm-op-zacht); }
    .megamenu--doos .mm-naam { font-family: var(--tekst-font); font-weight: 500; font-size: .95rem; line-height: 1.35; }
    .megamenu--doos .mm-prijzen { display: flex; align-items: baseline; gap: 10px; }
    .megamenu--doos .mm-prijs { font-weight: 600; font-size: 1.5rem; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
    .megamenu--doos .mm-was { font-size: .875rem; color: var(--mm-op-zacht); text-decoration: line-through; font-variant-numeric: tabular-nums; }
    .megamenu--doos .mm-knop {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 2px;
        font-weight: 600;
        font-size: .875rem;
        color: var(--mm-glans);
    }
    .megamenu--doos .mm-knop svg { transition: translate .2s ease; }
    .megamenu--doos .mm-extra:hover .mm-knop svg { translate: 4px 0; }

    /* het object op zijn tafelblad, in de deal en in "net binnen" */
    .megamenu--doos .mm-object {
        display: block;
        margin: 4px -20px 6px;
        aspect-ratio: 1;
        background: radial-gradient(60% 70% at 50% 0%, #fff, transparent 75%), var(--mm-tafel);
        overflow: hidden;
    }
    .megamenu--doos .mm-object__beeld {
        display: block;
        inline-size: 100%;
        block-size: 100%;
        object-fit: contain;
        padding: 9%;
        mix-blend-mode: multiply;
        filter: drop-shadow(0 16px 14px rgb(23 20 15 / .18));
        transition: translate var(--duur-traag, .6s) var(--soepel, ease);
    }
    .megamenu--doos .mm-object__beeld--vrij { mix-blend-mode: normal; }
    .megamenu--doos .mm-extra:hover .mm-object__beeld { translate: 0 -8px; }

    /* de gift deal: zwart kaartje, gouden rand, terracotta sticker */
    .megamenu--doos .mm-deal {
        background: var(--mm-fluweel);
        outline: 1px solid color-mix(in oklab, var(--mm-goud) 45%, transparent);
        outline-offset: -1px;
    }
    .megamenu--doos .mm-deal .mm-object { aspect-ratio: 4 / 3; }
    .megamenu--doos .mm-deal .mm-object__beeld { object-fit: cover; padding: 0; mix-blend-mode: normal; filter: none; }
    .megamenu--doos .mm-sticker {
        position: absolute;
        inset-block-start: 34px;
        inset-inline-end: 12px;
        z-index: 2;
        display: grid;
        place-content: center;
        inline-size: 82px;
        block-size: 82px;
        border-radius: 50%;
        background: var(--accent);
        color: #fff;
        text-align: center;
        line-height: 1.05;
        rotate: 9deg;
        box-shadow: 0 6px 14px rgb(0 0 0 / .35), inset 0 0 0 2px rgb(233 207 142 / .55);
        transition: rotate var(--duur-normaal, .24s) var(--soepel, ease);
    }
    .megamenu--doos .mm-sticker span { font-size: .65rem; letter-spacing: .02em; }
    .megamenu--doos .mm-sticker strong { font-size: .9rem; font-weight: 700; }
    .megamenu--doos .mm-deal:hover .mm-sticker { rotate: 2deg; }

    /* net binnen: geen rand, het product is het hele verhaal */
    .megamenu--doos .mm-nieuw { background: linear-gradient(180deg, var(--mm-kaart), var(--mm-fluweel)); border: 1px solid var(--mm-lijn); }
    .megamenu--doos .mm-nieuw:hover { border-color: color-mix(in oklab, var(--mm-goud) 55%, transparent); }

    /* de band: de zin van de winkel, met het lint dat erdoor trekt */
    .megamenu--doos .mm-band {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px 40px;
        min-block-size: 170px;
        padding: 30px 40px;
        background:
            radial-gradient(80% 140% at 100% 0%, rgb(201 160 80 / .18), transparent 60%),
            var(--mm-fluweel);
        border: 1px solid color-mix(in oklab, var(--mm-goud) 30%, transparent);
    }
    .megamenu--doos .mm-band__lint {
        position: absolute;
        inset: 0;
        z-index: -1;
        inline-size: 100%;
        block-size: 100%;
        color: var(--mm-goud);
        opacity: .55;
    }
    .megamenu--doos .mm-band__lint path {
        fill: none;
        stroke: currentColor;
        stroke-width: 1.2;
        vector-effect: non-scaling-stroke;
        stroke-dasharray: 2400;
        stroke-dashoffset: 0;
    }
    .megamenu--doos .mm-band__tekst { display: flex; flex-direction: column; gap: 8px; max-inline-size: 52ch; }
    .megamenu--doos .mm-band strong {
        font-family: var(--kop-font);
        font-weight: 400;
        font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.6rem);
        line-height: 1.05;
    }
    .megamenu--doos .mm-knop--rand {
        min-block-size: 44px;
        padding: 0 18px;
        border: 1px solid color-mix(in oklab, var(--mm-goud) 60%, transparent);
        border-radius: var(--radius-m, 6px);
        transition: background .2s ease;
    }
    .megamenu--doos .mm-band:hover .mm-knop--rand { background: rgb(201 160 80 / .12); }

    /* de beloftes: een rustige kaart, gouden icoontjes */
    .megamenu--doos .mm-belofte { border: 1px solid var(--mm-lijn); background: transparent; }
    .megamenu--doos .mm-belofte ul { display: grid; gap: 12px; margin: 4px 0 0; padding: 0; list-style: none; }
    .megamenu--doos .mm-belofte li { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; line-height: 1.4; color: var(--mm-op-zacht); }
    .megamenu--doos .mm-belofte svg { flex: none; margin-top: 1px; color: var(--mm-goud); }

    /* de slotkaart in het gat onderaan */
    .megamenu--doos .mm-slot {
        top: 0;
        left: 0;
        justify-content: center;
        align-items: flex-start;
        gap: 10px;
        padding: 24px 28px;
        border: 1px dashed color-mix(in oklab, var(--mm-goud) 45%, transparent);
        background: radial-gradient(80% 90% at 100% 100%, rgb(201 160 80 / .1), transparent 70%);
    }
    .megamenu--doos .mm-slot[hidden] { display: none; }
    .megamenu--doos .mm-slot__kop { font-family: var(--kop-font); font-size: 1.5rem; line-height: 1.15; }
    .megamenu--doos .mm-slot__tekst { max-inline-size: 36ch; font-size: .9375rem; color: var(--mm-op-zacht); }
    .megamenu--doos .mm-slot__knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
    .megamenu--doos .mm-slot .knop { background: transparent; color: var(--mm-glans); border: 1px solid color-mix(in oklab, var(--mm-goud) 60%, transparent); }
    .megamenu--doos .mm-slot .knop--rand { color: var(--mm-op-zacht); border-color: var(--mm-lijn); }
    .megamenu--doos .heeft-slot + .megamenu__voet { display: none; }
    .megamenu--doos .megamenu__voet { justify-content: center; margin-inline: auto; max-inline-size: 1240px; }

    /* ── het openen: het deksel gaat op, de kaarten komen één voor één ── */
    @media (prefers-reduced-motion: no-preference) {
        .megamenu--doos:not([hidden]) .megamenu__blad { animation: mm-deksel .5s cubic-bezier(.2, .7, .2, 1) both; }
        .megamenu--doos:not([hidden]) .mm-lint path { stroke-dashoffset: 2400; animation: mm-trek 1.6s cubic-bezier(.65, 0, .35, 1) .15s forwards; }
        .megamenu--doos:not([hidden]) .mm-band__lint path { stroke-dashoffset: 2400; animation: mm-trek 2.2s cubic-bezier(.65, 0, .35, 1) .4s forwards; }
        .megamenu--doos:not([hidden]) .is-gestapeld > * { animation: mm-op .55s cubic-bezier(.2, .7, .2, 1) both; }
        .megamenu--doos .is-gestapeld > :nth-child(2) { animation-delay: .04s; }
        .megamenu--doos .is-gestapeld > :nth-child(3) { animation-delay: .08s; }
        .megamenu--doos .is-gestapeld > :nth-child(4) { animation-delay: .12s; }
        .megamenu--doos .is-gestapeld > :nth-child(5) { animation-delay: .16s; }
        .megamenu--doos .is-gestapeld > :nth-child(6) { animation-delay: .2s; }
        .megamenu--doos .is-gestapeld > :nth-child(7) { animation-delay: .24s; }
        .megamenu--doos .is-gestapeld > :nth-child(8) { animation-delay: .28s; }
        .megamenu--doos .is-gestapeld > :nth-child(n+9) { animation-delay: .32s; }
        @keyframes mm-deksel { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
        @keyframes mm-trek { to { stroke-dashoffset: 0; } }
        /* Enkel opacity: de plaats van de kaart staat in transform. */
        @keyframes mm-op { from { opacity: 0; } to { opacity: 1; } }
    }
}

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


@layer skin {
    /* ── de kaarsparels: de bühne boven "Geuren en kaarsen" ──────────────
       Sven, 1 november 2026: geen schooltelevisie maar een glamourwinkel die
       goesting geeft. Eerst het beeld, dan de geuren, dan pas uitleg.
       Het sjabloon: winkel/categorie/geuren-en-kaarsen.twig. */

    .kaarsheld {
        position: relative;
        isolation: isolate;
        display: grid;
        align-items: center;
        min-height: clamp(520px, 78vh, 760px);
        background: var(--doos) var(--kaarsheld) 70% 50% / cover no-repeat;
        color: var(--op-doos);
        overflow: hidden;
    }
    .kaarsheld::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
            linear-gradient(90deg, rgb(5 5 5 / .94) 0%, rgb(5 5 5 / .72) 38%, rgb(5 5 5 / 0) 70%),
            linear-gradient(0deg, rgb(5 5 5 / .7) 0%, transparent 30%);
    }
    .kaarsheld__binnen { padding-block: var(--ruimte-12, 3rem); }
    .kaarsheld__oog {
        margin: 0 0 var(--ruimte-4, 1rem);
        color: var(--goud-glans);
        font-size: .75rem;
        font-weight: 600;
        letter-spacing: .22em;
        text-transform: uppercase;
    }
    .kaarsheld__kop {
        margin: 0 0 var(--ruimte-6, 1.5rem);
        font-family: var(--kop-font);
        font-size: clamp(3rem, 1.6rem + 6vw, 6.5rem);
        line-height: .98;
        letter-spacing: -.01em;
        color: var(--op-doos);
    }
    .kaarsheld__kop em {
        font-style: normal;
        background: linear-gradient(100deg, var(--goud-diep), var(--goud-glans) 45%, var(--goud) 70%, var(--goud-glans));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    .kaarsheld__onder { max-width: 34ch; margin: 0 0 var(--ruimte-8, 2rem); font-size: var(--tekst-l, 1.125rem); line-height: 1.55; color: var(--op-doos-zacht); }
    .kaarsheld__knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-3, .75rem) var(--ruimte-6, 1.5rem); }
    .kaarsheld__knop { min-height: 52px; padding-inline: 2rem; font-size: 1rem; box-shadow: 0 10px 30px -10px rgb(181 67 47 / .7); }
    .kaarsheld__link { color: var(--goud-glans); min-height: 44px; display: inline-flex; align-items: center; text-decoration-color: color-mix(in oklab, var(--goud) 55%, transparent); text-underline-offset: .25em; }
    .kaarsheld__feiten {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ruimte-2, .5rem) var(--ruimte-6, 1.5rem);
        margin: var(--ruimte-10, 2.5rem) 0 0;
        padding: 0;
        list-style: none;
        font-size: var(--tekst-s);
        color: var(--op-doos-zacht);
    }
    .kaarsheld__feiten li { display: inline-flex; align-items: center; gap: .6em; }
    .kaarsheld__feiten li::before { content: ""; width: 5px; height: 5px; rotate: 45deg; background: var(--goud); }
    @media (max-width: 720px) {
        .kaarsheld { min-height: 0; align-items: end; background-position: 72% 0; background-size: auto 62vw; background-color: var(--doos); padding-top: 52vw; }
        .kaarsheld::before { background: linear-gradient(0deg, var(--doos) 45%, rgb(5 5 5 / 0) 75%); }
    }

    /* de geuren: meteen onder het beeld, op het tafelblad */
    .kaarsgeuren { padding-block: var(--ruimte-12, 3rem) var(--ruimte-8, 2rem); }
    .kaarsgeuren__kop { display: grid; gap: var(--ruimte-2, .5rem); margin-bottom: var(--ruimte-8, 2rem); }
    @media (min-width: 52rem) { .kaarsgeuren__kop { grid-template-columns: auto 1fr; align-items: end; gap: var(--ruimte-10, 2.5rem); } }
    .kaarsgeuren__kop h2 { margin: 0; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
    .kaarsgeuren__kop p { margin: 0; max-width: 52ch; color: var(--inkt-gedempt); }

    /* het ritueel: zwart, drie momenten, groot */
    .kaarsritueel {
        background:
            radial-gradient(60% 70% at 50% 0%, rgb(201 160 80 / .14), transparent 70%),
            var(--doos);
        color: var(--op-doos);
        padding-block: var(--ruimte-12, 3rem);
        margin-block: var(--ruimte-8, 2rem);
    }
    .kaarsritueel__kop { margin: 0 0 var(--ruimte-8, 2rem); color: var(--op-doos); text-align: center; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
    .kaarsritueel__lijst { display: grid; gap: var(--ruimte-8, 2rem); margin: 0; padding: 0; list-style: none; }
    @media (min-width: 48rem) { .kaarsritueel__lijst { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    .kaarsritueel__lijst li { display: grid; gap: var(--ruimte-2, .5rem); text-align: center; justify-items: center; }
    .kaarsritueel__lijst img {
        width: 100%;
        max-width: 22rem;
        height: auto;
        aspect-ratio: 1;
        object-fit: cover;
        border-radius: 50%;
        margin-bottom: var(--ruimte-4, 1rem);
        box-shadow: 0 0 0 1px rgb(201 160 80 / .45), 0 0 0 10px rgb(201 160 80 / .06), 0 30px 60px -30px rgb(201 160 80 / .5);
    }
    .kaarsritueel__lijst strong { font-family: var(--kop-font); font-weight: 400; font-size: 2.25rem; line-height: 1; color: var(--goud-glans); }
    .kaarsritueel__lijst span { max-width: 28ch; color: var(--op-doos-zacht); }
    .kaarsritueel__daarna { margin: var(--ruimte-10, 2.5rem) auto 0; max-width: 46ch; text-align: center; font-family: var(--kop-font); font-size: 1.25rem; color: var(--op-doos); }

    /* de maatkiezer */
    .kaarsreken { padding-block: var(--ruimte-4, 1rem) var(--ruimte-8, 2rem); }
    .kaarsreken[hidden] { display: none; }
    .kaarsreken__kaart {
        display: grid;
        gap: var(--ruimte-8, 2rem) var(--ruimte-10, 2.5rem);
        align-items: center;
        padding: clamp(1.5rem, 1rem + 2vw, 3rem);
        border-radius: var(--radius-l, 1rem);
        background:
            radial-gradient(70% 90% at 100% 0%, rgb(201 160 80 / .16), transparent 70%),
            var(--doos);
        color: var(--op-doos);
        border: 1px solid color-mix(in oklab, var(--goud) 30%, transparent);
    }
    @media (min-width: 52rem) { .kaarsreken__kaart { grid-template-columns: 1fr 1fr; } }
    .kaarsreken__kaart h2 { color: var(--op-doos); margin: 0; font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem); }
    .kaarsreken__velden { display: grid; gap: var(--ruimte-4, 1rem); margin-top: var(--ruimte-6, 1.5rem); }
    .kaarsreken__velden label { display: grid; gap: var(--ruimte-1, .25rem); font-size: var(--tekst-s); color: var(--op-doos-zacht); }
    .kaarsreken__velden span { display: flex; align-items: center; gap: var(--ruimte-3, .75rem); color: var(--op-doos); font-variant-numeric: tabular-nums; }
    .kaarsreken__velden input[type="range"] { flex: 1; accent-color: var(--goud); min-height: 44px; }
    .kaarsreken__velden output { min-width: 2ch; text-align: right; font-weight: 600; }
    .kaarsreken__uitkomst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ruimte-3, .75rem); margin: 0 0 var(--ruimte-5, 1.25rem); }
    .kaarsreken__uitkomst div { padding: var(--ruimte-4, 1rem); border: 1px solid color-mix(in oklab, var(--goud) 35%, transparent); border-radius: var(--radius-m, 6px); }
    .kaarsreken__uitkomst dt { font-size: var(--tekst-xs, .75rem); color: var(--op-doos-zacht); }
    .kaarsreken__uitkomst dd { margin: var(--ruimte-1, .25rem) 0 0; font-family: var(--kop-font); font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); color: var(--goud-glans); font-variant-numeric: tabular-nums; }
    .kaarsreken__knop { width: 100%; justify-content: center; min-height: 52px; }
    .kaarsreken__knop[hidden] { display: none; }

    /* de vragen */
    .kaarsvragen { max-width: 52rem; padding-block: var(--ruimte-4, 1rem) var(--ruimte-12, 3rem); }
    .kaarsvragen details { border-bottom: 1px solid var(--lijn); }
    .kaarsvragen summary { cursor: pointer; padding: var(--ruimte-4, 1rem) 0; font-weight: 500; min-height: 44px; }
    .kaarsvragen summary::marker { color: var(--goud); }
    .kaarsvragen details p { margin: 0 0 var(--ruimte-4, 1rem); color: var(--inkt-gedempt); max-width: 62ch; }
}

@layer skin {
    /* ── kaarsparels: meer koopknop ──────────────────────────────────
       Sven, 1 november 2026: "50 procent meer cta, meer commercieel, net
       een graadje te exclusief". Prijs in de knop, een tweede knop, een
       knop na het ritueel, een slotband en een balk die meeloopt. */
    .kaarsheld__lint {
        display: inline-block; margin-left: .6em; padding: .2em .7em; border-radius: 999px;
        background: var(--accent); color: #fff; letter-spacing: .08em; font-size: .85em; vertical-align: .1em;
    }
    .kaarsheld__knop small, .kaarsbalk__knop small { font-weight: 400; opacity: .9; margin-left: .45em; font-size: .85em; }
    .kaarsheld__knop2 {
        min-height: 52px; padding-inline: 1.6rem; font-size: 1rem;
        background: transparent; color: var(--goud-glans);
        border: 1px solid color-mix(in oklab, var(--goud) 70%, transparent);
    }
    .kaarsheld__knop2:hover { background: color-mix(in oklab, var(--goud) 18%, transparent); color: #fff; }

    .kaarsgeuren__zeker {
        display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ruimte-2, .5rem) var(--ruimte-6, 1.5rem);
        margin: var(--ruimte-8, 2rem) 0 0; padding: var(--ruimte-4, 1rem); list-style: none;
        border-block: 1px solid var(--lijn); font-size: var(--tekst-s, .9rem); font-weight: 500;
    }
    .kaarsgeuren__zeker li { display: inline-flex; align-items: center; gap: .5em; }
    .kaarsgeuren__zeker li::before { content: "✓"; color: var(--goud-diep); font-weight: 700; }

    .kaarsritueel__knoppen { margin: var(--ruimte-8, 2rem) 0 0; text-align: center; }

    .kaarsvragen details p a { color: var(--accent); font-weight: 600; }

    .kaarsslot {
        position: relative; isolation: isolate; overflow: hidden; text-align: center;
        background: var(--doos) var(--kaarsheld) 50% 60% / cover no-repeat; color: var(--op-doos);
    }
    .kaarsslot::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(5 5 5 / .72); }
    .kaarsslot__binnen { padding-block: var(--ruimte-12, 3rem); display: grid; justify-items: center; gap: var(--ruimte-4, 1rem); }
    .kaarsslot h2 { margin: 0; color: var(--op-doos); font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); }
    .kaarsslot h2 em {
        font-style: italic; background: linear-gradient(100deg, var(--goud-glans), var(--goud) 60%, var(--goud-glans));
        -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .kaarsslot p { margin: 0 0 var(--ruimte-2, .5rem); color: var(--op-doos-zacht); }

    .kaarsbalk {
        position: fixed; z-index: 60; inset-inline: 0; bottom: 0;
        display: flex; align-items: center; justify-content: space-between; gap: var(--ruimte-4, 1rem);
        padding: .6rem max(16px, calc((100vw - 72rem) / 2)) calc(.6rem + env(safe-area-inset-bottom));
        background: rgb(5 5 5 / .92); backdrop-filter: blur(8px); color: var(--op-doos);
        border-top: 1px solid color-mix(in oklab, var(--goud) 40%, transparent);
        translate: 0 110%; transition: translate .3s ease;
    }
    .kaarsbalk[hidden] { display: none; }
    .kaarsbalk.is-zichtbaar { translate: 0 0; }
    .kaarsbalk__tekst { font-size: var(--tekst-s, .9rem); color: var(--op-doos-zacht); }
    .kaarsbalk__tekst strong { color: var(--goud-glans); font-family: var(--kop-font); font-weight: 400; font-size: 1.15rem; margin-right: .3em; }
    .kaarsbalk__knop { min-height: 44px; padding-inline: 1.5rem; white-space: nowrap; }
    @media (prefers-reduced-motion: reduce) { .kaarsbalk { transition: none; } }
}

@layer skin {
    /* ── kaarsparels: maak het ritueel compleet ───────────────────────── */
    .kaarscompleet { padding-block: var(--ruimte-12, 3rem) var(--ruimte-8, 2rem); background: color-mix(in oklab, var(--goud) 7%, var(--grond, #fff)); }
    .kaarscompleet h2 em {
        font-style: italic; background: linear-gradient(100deg, var(--goud-diep), var(--goud) 55%, var(--goud-diep));
        -webkit-background-clip: text; background-clip: text; color: transparent;
    }
}

@layer skin {
    /* ── de startpagina als winkel ──────────────────────────────────────
       Sven, 4 november 2026: "kleuren wat warmer, ietskes terugschalen,
       ronde hoeken". De koppen van de winkelblokken in de schreefloze letter,
       vet; Marcellus blijft voor het merk (de hero, 1 kilo kaars, objets).
       Gift deals op een warm vlak in plaats van in het zwarte doosje. */
    :root { --thuis-warm: #f7ece0; --thuis-warm-kaart: #fffaf4; --thuis-inkt: #2a1e16; }
    :root[data-thema="donker"] { --thuis-warm: #1f1712; --thuis-warm-kaart: #2a2019; --thuis-inkt: #f7ece0; }
    @media (prefers-color-scheme: dark) {
        :root:not([data-thema="licht"]) { --thuis-warm: #1f1712; --thuis-warm-kaart: #2a2019; --thuis-inkt: #f7ece0; }
    }

    .thuis-kop, .sectiekop h2.thuis-kop { font-family: var(--tekst-font); font-weight: 700; letter-spacing: -.025em; }

    .kaart__beeld { border-radius: 16px; }

    .deals { background: var(--thuis-warm); color: var(--thuis-inkt); }
    .deals h2 { color: var(--thuis-inkt); }
    .deals__onder { color: color-mix(in oklab, var(--thuis-inkt) 68%, transparent); }
    .deals .kaart--pakket {
        background: var(--thuis-warm-kaart);
        outline: 0;
        border-radius: 20px;
        overflow: visible;
    }
    .deals .kaart--pakket .kaart__beeld { border-radius: 20px 20px 0 0; }
    .deals .kaart--pakket .kaart__titel,
    .deals .kaart--pakket .kaart__titel a,
    .deals .kaart--pakket .prijs { color: var(--thuis-inkt); }
    .deals .kaart--pakket .kaart__merk { color: #b5432f; }
    .deals .kaart--pakket .prijs--was { color: color-mix(in oklab, var(--thuis-inkt) 55%, transparent); }
    .deals .knop--rand {
        color: var(--thuis-inkt) !important;
        border-color: color-mix(in oklab, var(--thuis-inkt) 30%, transparent) !important;
        border-radius: 999px;
    }
    .deals .knop--rand:hover { background: color-mix(in oklab, var(--thuis-inkt) 8%, transparent); }
    .sectiekop .knop--rand { border-radius: 999px; }

    .objets img, .objets__link { border-radius: 20px; }
}