/*
 * Eeland Wapens & Munitie
 *
 * Opbouw:
 *   themes/heritage.css — tokens voor de vertrouwde look van de huidige site
 *   themes/modern.css   — tokens voor het nieuwe ontwerp
 *   dit bestand         — structuur en componenten, geschreven op die tokens
 *
 * Beide thema's gebruiken exact dezelfde HTML; alleen de tokenwaarden verschillen.
 * Omschakelen kan daarom zonder één template aan te passen (APP_THEME in .env.local).
 */

@import url("fonts-shVwy74.css");
@import url("themes/heritage-Q-g0y9b.css") layer(theme);
@import url("themes/modern-yn6S2Th.css") layer(theme);

@layer theme, base, layout, components, utilities;

@layer base {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html {
        -webkit-text-size-adjust: 100%;
        scroll-behavior: smooth;
    }

    body {
        margin: 0;
        background: var(--kleur-achtergrond);
        color: var(--kleur-tekst);
        font-family: var(--font-tekst);
        font-size: var(--tekst-basis);
        line-height: 1.65;
        -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3, h4 {
        margin: 0 0 var(--ruimte-3);
        font-family: var(--font-titel);
        font-weight: var(--titel-gewicht);
        line-height: 1.1;
        letter-spacing: var(--titel-spatiering);
        text-transform: var(--titel-transform);
        text-wrap: balance;
        color: var(--kleur-titel);
    }

    h1 { font-size: var(--tekst-2xl); }
    h2 { font-size: var(--tekst-xl); }
    h3 { font-size: var(--tekst-lg); }

    p { margin: 0 0 var(--ruimte-3); text-wrap: pretty; }

    a { color: var(--kleur-accent); text-underline-offset: 0.2em; }

    /* :not([hidden]) — anders wint deze display:block van het hidden-attribuut,
       dat we gebruiken om een niet-ladende foto weg te halen. */
    img:not([hidden]) { max-width: 100%; height: auto; display: block; }
    [hidden] { display: none !important; }

    :where(a, button, input, select, summary):focus-visible {
        outline: 3px solid var(--kleur-focus);
        outline-offset: 2px;
        border-radius: 2px;
    }

    .skip-link {
        position: absolute;
        left: -9999px;
        top: 0;
        z-index: 100;
        padding: var(--ruimte-2) var(--ruimte-3);
        background: var(--kleur-accent);
        color: var(--kleur-accent-tekst);
        font-weight: 600;
    }

    .skip-link:focus { left: var(--ruimte-3); top: var(--ruimte-3); }

    @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }

        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

@layer layout {
    .omhulsel {
        width: min(100% - 2 * var(--ruimte-4), var(--breedte-max));
        margin-inline: auto;
    }

    .sectie { padding-block: var(--ruimte-8); }
    .sectie--compact { padding-block: var(--ruimte-6); }
    .sectie--gedempt { background: var(--kleur-vlak); }

    /* De kop bestaat uit een bovenregel ("Maak een keuze") met de titel eronder,
       en rechts uitgelijnd een actielink. Vandaar de twee kolommen. */
    .sectie__kop {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: end;
        gap: var(--ruimte-2) var(--ruimte-3);
        margin-bottom: var(--ruimte-5);
    }

    .sectie__kop h1,
    .sectie__kop h2 { grid-column: 1; margin: 0; }
    .sectie__kop > .knop { grid-column: 2; grid-row: 1 / -1; align-self: center; }

    .sectie__eyebrow {
        grid-column: 1;
        margin: 0;
        font-size: var(--tekst-klein);
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--kleur-zacht);
    }

    @media (max-width: 40rem) {
        .sectie__kop { grid-template-columns: 1fr; }
        .sectie__kop > .knop { grid-column: 1; grid-row: auto; justify-self: start; }
    }

    .raster {
        display: grid;
        gap: var(--ruimte-4);
        grid-template-columns: repeat(auto-fill, minmax(var(--raster-min, 15rem), 1fr));
    }
}

@layer components {
    /* --- Aankondigingsbalk ------------------------------------------------ */
    .aankondiging {
        background: var(--kleur-aankondiging, var(--kleur-donker));
        color: var(--kleur-op-aankondiging, var(--kleur-op-donker));
        font-size: var(--tekst-klein);
        padding: var(--ruimte-2) 0;
    }

    .aankondiging[hidden] { display: none; }

    .aankondiging__binnen {
        display: flex;
        align-items: center;
        gap: var(--ruimte-3);
    }

    .aankondiging__tekst { flex: 1; margin: 0; text-align: center; }

    .aankondiging__sluiten {
        flex-shrink: 0;
        display: grid;
        place-items: center;
        width: 1.75rem;
        height: 1.75rem;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: inherit;
        opacity: 0.7;
        cursor: pointer;
    }

    .aankondiging__sluiten:hover {
        opacity: 1;
        background: color-mix(in srgb, currentColor 18%, transparent);
    }

    /* --- Servicebalk ------------------------------------------------------ */
    .servicebalk {
        background: var(--kleur-vlak);
        border-bottom: 1px solid var(--kleur-rand);
        font-size: var(--tekst-mini, var(--tekst-klein));
        color: var(--kleur-zacht);
    }

    .servicebalk__binnen {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ruimte-2) var(--ruimte-5);
        padding-block: var(--ruimte-2);
    }

    .servicebalk__item {
        display: inline-flex;
        align-items: center;
        gap: var(--ruimte-2);
        color: inherit;
        text-decoration: none;
    }

    .servicebalk__item strong { color: var(--kleur-titel); font-weight: 600; }
    a.servicebalk__item:hover { color: var(--kleur-accent); }
    .servicebalk__item svg { flex-shrink: 0; opacity: 0.6; }

    /* Op smalle schermen alleen het telefoonnummer: de rest staat in de voet. */
    @media (max-width: 40rem) {
        .servicebalk__item:not(:nth-child(2)) { display: none; }
        .servicebalk__binnen { justify-content: center; }

        /* De melding beslaat anders vier regels voordat je iets van de site
           ziet. Kleiner gezet en links uitgelijnd leest hij ook rustiger. */
        .aankondiging {
            font-size: var(--tekst-mini);
            line-height: 1.45;
        }

        .aankondiging__tekst { text-align: left; }
    }

    /* --- Koptekst en navigatie ------------------------------------------- */
    .kop {
        position: sticky;
        top: 0;
        z-index: 50;
        background: var(--kop-achtergrond);
        border-bottom: 1px solid var(--kop-rand);
        backdrop-filter: var(--kop-blur);
    }

    .kop__binnen {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--ruimte-4);
        min-height: var(--kop-hoogte);
    }

    .kop__logo {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        text-decoration: none;
    }

    /* Hoogte bepaalt de maat; de breedte volgt uit de beeldverhouding. */
    .kop__logo img {
        height: var(--logo-hoogte, 2.75rem);
        width: auto;
        object-fit: contain;
    }

    .kop__logo-merk { color: var(--kleur-accent); }

    .kop__nav {
        display: flex;
        align-items: center;
        gap: var(--ruimte-1);
    }

    .kop__link {
        position: relative;
        padding: var(--ruimte-2) var(--ruimte-3);
        color: var(--kop-tekst);
        font-size: var(--tekst-klein);
        font-weight: 500;
        text-decoration: none;
        letter-spacing: 0.02em;
        border-radius: var(--radius-klein);
        transition: color 0.18s ease, background-color 0.18s ease;
    }

    .kop__link::after {
        content: '';
        position: absolute;
        left: var(--ruimte-3);
        right: var(--ruimte-3);
        bottom: calc(var(--ruimte-1) * 0.5);
        height: 2px;
        background: var(--kleur-accent);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.22s ease;
    }

    .kop__link:hover,
    .kop__link[aria-current='page'] { color: var(--kleur-accent); }

    .kop__link:hover::after,
    .kop__link[aria-current='page']::after { transform: scaleX(1); }

    .kop__acties { display: flex; align-items: center; gap: var(--ruimte-3); }

    .kop__telefoon {
        display: inline-flex;
        align-items: center;
        gap: var(--ruimte-2);
        font-size: var(--tekst-klein);
        font-weight: 600;
        color: var(--kop-tekst);
        text-decoration: none;
        white-space: nowrap;
    }

    .kop__telefoon:hover { color: var(--kleur-accent); }

    /* Mobiel menu op basis van <details>, zodat het zonder JavaScript werkt. */
    .menu-mobiel { display: none; }
    .menu-mobiel > summary {
        list-style: none;
        cursor: pointer;
        padding: var(--ruimte-2);
        color: var(--kop-tekst);
        line-height: 0;
    }
    .menu-mobiel > summary::-webkit-details-marker { display: none; }

    .menu-mobiel__paneel {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        display: flex;
        flex-direction: column;
        padding: var(--ruimte-3);
        background: var(--kop-achtergrond);
        border-bottom: 1px solid var(--kop-rand);
        box-shadow: var(--schaduw-diep);
    }

    .menu-mobiel__paneel a {
        padding: var(--ruimte-3);
        color: var(--kop-tekst);
        text-decoration: none;
        border-radius: var(--radius-klein);
    }

    .menu-mobiel__paneel a:hover { background: var(--kleur-vlak); color: var(--kleur-accent); }

    /* --- Knoppen ---------------------------------------------------------- */
    .knop {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--ruimte-2);
        padding: var(--knop-padding);
        border: 1px solid transparent;
        border-radius: var(--radius);
        background: var(--kleur-accent);
        color: var(--kleur-accent-tekst);
        font-family: inherit;
        font-size: var(--tekst-klein);
        font-weight: 600;
        letter-spacing: 0.02em;
        text-transform: var(--knop-transform);
        text-decoration: none;
        cursor: pointer;
        transition: transform 0.15s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    }

    .knop:hover {
        background: var(--kleur-accent-diep);
        transform: translateY(-1px);
        box-shadow: var(--schaduw);
    }

    .knop:active { transform: translateY(0); }

    .knop--rand {
        background: transparent;
        border-color: var(--kleur-rand);
        color: var(--kleur-titel);
    }

    .knop--rand:hover {
        background: var(--kleur-accent);
        border-color: var(--kleur-accent);
        color: var(--kleur-accent-tekst);
    }

    .knop--vol { width: 100%; }

    /* --- Hero ------------------------------------------------------------- */
    .hero {
        position: relative;
        display: grid;
        align-items: center;
        /* Vult het scherm minus de balken erboven (aankondiging, servicebalk,
           koptekst); de vulhoogte-controller meet die en zet --boven-hero.
           min-height, zodat de hero meegroeit als de inhoud niet past en de
           padding gerespecteerd blijft. */
        min-height: var(--hero-hoogte, calc(100dvh - var(--boven-hero, 0px)));
        background: var(--hero-achtergrond);
        color: var(--kleur-op-donker);
        overflow: hidden;
    }

    /* Alle dia's op dezelfde plek in het raster; alleen de actieve is zichtbaar.
       Zo houdt de hero de hoogte van de grootste dia en springt hij niet. */
    /* --- Loop-animatie in de hero ------------------------------------------ */
    .loop {
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
        pointer-events: none;
        /* Rechts uitgelijnd en deels buiten beeld: het is achtergrond, geen
           middelpunt. De tekst links blijft daardoor rustig. */
        display: grid;
        justify-items: end;
        align-items: center;
    }

    .loop__tekening {
        width: min(34rem, 52vw);
        height: min(34rem, 52vw);
        /* Deels buiten de rechterrand, maar het richtpunt blijft in beeld: het
           kijkerbeeld loopt door achter de pagina zonder over de tekst te vallen. */
        margin-right: -8vw;
        opacity: var(--loop-sterkte, 0.5);
    }

    /* Onder ~62rem staat de tekst over de volle breedte; dan loopt de tekening
       er dwars doorheen. Verder wegzetten en sterk vervagen. */
    @media (max-width: 62rem) {
        .loop__tekening {
            width: min(26rem, 70vw);
            height: min(26rem, 70vw);
            margin-right: -34vw;
            opacity: calc(var(--loop-sterkte, 0.5) * 0.35);
        }
    }

    /* Op een telefoon is er geen kolom over waar de tekening kan staan zonder
       de tekst te raken. Dan liever helemaal weg. */
    @media (max-width: 52rem) {
        .loop { display: none; }
    }

    /* De trekken draaien traag rond, zoals ze een kogel laten tollen. */
    .loop__trekken {
        transform-origin: 200px 200px;
        animation: loop-draaien 90s linear infinite;
    }

    /* De groeven ademen: het profiel loopt langzaam vol en weer leeg, waardoor
       de spiraal diepte krijgt zonder dat er iets beweegt. */
    .loop__groef {
        fill: none;
        stroke: var(--loop-lijn);
        stroke-width: 26;
        stroke-linecap: round;
        opacity: 0.55;
        animation: loop-ademen 7s ease-in-out infinite;
    }

    .loop__groeven path:nth-child(2) { animation-delay: -1.2s; }
    .loop__groeven path:nth-child(3) { animation-delay: -2.4s; }
    .loop__groeven path:nth-child(4) { animation-delay: -3.6s; }
    .loop__groeven path:nth-child(5) { animation-delay: -4.8s; }
    .loop__groeven path:nth-child(6) { animation-delay: -6s; }

    .loop__ring {
        fill: none;
        stroke: var(--loop-lijn);
        stroke-width: 1.5;
        opacity: 0.7;
    }

    /* De buitenste ring is de rand van het kijkerbeeld: iets zwaarder, zodat het
       oogt als de begrenzing van het beeldveld. */
    .loop__ring:first-of-type { stroke-width: 3; opacity: 0.85; }

    .loop__ring--dun { stroke-width: 0.75; opacity: 0.5; }

    /* Het dradenkruis dobbert licht, zoals een kijker die niet op een steun
       ligt. Draait bewust niet mee met de trekken: een vizier staat stil. */
    .loop__vizier {
        transform-origin: 200px 200px;
        stroke: var(--loop-accent);
        fill: none;
        opacity: 0.85;
        animation: loop-drijven 24s ease-in-out infinite;
    }

    /* Duplex: dikke posten buiten, fijne draden binnen. */
    .loop__post { stroke-width: 5; stroke-linecap: butt; }
    .loop__draad { stroke-width: 1.25; }

    .loop__mildots { fill: var(--loop-accent); stroke: none; }
    .loop__punt { fill: var(--loop-accent); stroke: none; }

    @keyframes loop-draaien {
        to { transform: rotate(360deg); }
    }

    @keyframes loop-ademen {
        0%, 100% { opacity: 0.25; stroke-width: 20; }
        50% { opacity: 0.7; stroke-width: 30; }
    }

    @keyframes loop-drijven {
        0%, 100% { transform: translate(0, 0) rotate(0deg); }
        50% { transform: translate(-10px, 6px) rotate(-3deg); }
    }

    /* Beweging uit: de tekening blijft staan als stille achtergrond. */
    @media (prefers-reduced-motion: reduce) {
        .loop__trekken,
        .loop__groef,
        .loop__vizier { animation: none; }
    }

    /* De hoogteketen loopt van .hero via het omhulsel naar de dia's, zodat het
       beeldvak zich naar de hero voegt in plaats van andersom. */
    .hero > .omhulsel {
        position: relative;
        z-index: 1;
        display: grid;
        /* Dia's krijgen de resterende ruimte, de balkjes hun eigen rij eronder. */
        grid-template-rows: minmax(0, 1fr) auto;
        gap: var(--ruimte-4);
        height: 100%;
        padding-block: var(--ruimte-5);
    }

    .hero__dias { display: grid; min-height: 0; }

    .hero__dia {
        grid-area: 1 / 1;
        display: none;
        gap: var(--ruimte-6);
        align-items: center;
        height: 100%;
        min-height: 0;
    }

    .hero__dia--actief {
        display: grid;
        animation: dia-in 0.55s ease;
    }

    /* Loopt de tekst over, dan scrolt die binnen de dia in plaats van de hero
       hoger te maken. */
    .hero__inhoud { min-width: 0; }

    /* Beeld links, tekst rechts, zodra er ruimte voor is. */
    /* Beeld links, tekst midden. De derde kolom blijft leeg: daar ligt het
       kijkerbeeld, zodat tekst en vizier elkaar niet raken. */
    @media (min-width: 62rem) {
        .hero__dia {
            grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 0.28fr);
            gap: var(--ruimte-6);
        }
    }

    @keyframes dia-in {
        from { opacity: 0; transform: translateY(0.75rem); }
        to { opacity: 1; transform: none; }
    }

    /* Het beeldvak vult de beschikbare hoogte van de dia in plaats van die te
       bepalen; zo blijft de hero even hoog, ongeacht de verhouding van de foto.
       De foto zelf wordt bijgesneden met object-fit: cover. */
    .hero__beeld {
        position: relative;
        align-self: stretch;
        height: 100%;
        min-height: 14rem;
        border-radius: var(--radius);
        overflow: hidden;
        background: var(--kleur-vlak);
    }

    .hero__beeld img {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        object-fit: cover;
        background: var(--kleur-vlak);
    }

    .hero__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: var(--ruimte-2);
        margin-bottom: var(--ruimte-3);
        font-size: var(--tekst-mini);
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--kleur-accent);
    }

    .hero__eyebrow::before {
        content: '';
        width: 2.5rem;
        height: 1px;
        background: var(--kleur-accent);
    }

    .hero h1,
    .hero__titel {
        margin-bottom: var(--ruimte-3);
        font-size: var(--tekst-2xl);
        color: var(--kleur-op-donker);
    }

    .hero__meta {
        margin: 0 0 var(--ruimte-3);
        font-size: var(--tekst-klein);
        color: var(--kleur-op-donker-zacht);
    }

    /* De introtekst is lang; zeven regels houdt de hero in verhouding zonder de
       boodschap te verminken. De volledige tekst blijft in de HTML staan voor
       zoekmachines en schermlezers. */
    .hero__tekst {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: var(--hero-regels, 7);
        line-clamp: var(--hero-regels, 7);
        overflow: hidden;
        font-size: var(--tekst-normaal);
        color: var(--kleur-op-donker-zacht);
        max-width: 42rem;
    }

    .hero__prijs {
        margin: 0 0 var(--ruimte-3);
        font-family: var(--font-titel);
        font-size: var(--tekst-xl);
        font-weight: 700;
        color: var(--kleur-op-donker);
    }

    .hero__acties {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ruimte-3);
        margin-top: var(--ruimte-4);
    }

    .hero__acties .knop--rand {
        border-color: var(--kleur-op-donker-rand);
        color: var(--kleur-op-donker);
    }

    /* Voortgangsbalkjes: elk balkje hoort bij een dia en loopt vol zolang die
       actief is, zodat zichtbaar is hoelang hij nog blijft staan. */
    .hero__stippen {
        display: flex;
        justify-content: center;
        gap: var(--ruimte-2);
    }

    /* Eén dia: niets te navigeren, dus geen balkjes. */
    .hero--enkel .hero__stippen { display: none; }

    /* Het balkje is dun, maar de knop eromheen is 44px hoog: dat is het
       minimum voor een betrouwbaar aanraakdoel. De achtergrond zit daarom op
       ::before in plaats van op de knop zelf. */
    .hero__stip {
        position: relative;
        width: 3.5rem;
        height: 44px;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
    }

    .hero__stip::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 4px;
        transform: translateY(-50%);
        border-radius: 2px;
        background: var(--kleur-op-donker-rand);
    }

    /* De vulling zelf. transform:scaleX is goedkoop om te animeren. */
    .hero__stip::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 4px;
        margin-top: -2px;
        border-radius: 2px;
        background: var(--kleur-accent);
        transform: scaleX(0);
        transform-origin: left;
    }

    /* Actieve dia: laat de balk in de duur van het interval vollopen. */
    .hero__stip--actief::after {
        animation: stip-vullen var(--stip-duur, 6500ms) linear forwards;
    }

    /* Al geweest: blijft vol staan, zodat de voortgang door de reeks zichtbaar is. */
    .hero__stip--gehad::after { transform: scaleX(1); }

    @keyframes stip-vullen {
        from { transform: scaleX(0); }
        to { transform: scaleX(1); }
    }

    .hero__stip:hover::before { background: var(--kleur-op-donker-zacht); }

    /* Pauze (achtergrondtab of hover) bevriest ook de balk. */
    .hero--gepauzeerd .hero__stip--actief::after { animation-play-state: paused; }

    @media (prefers-reduced-motion: reduce) {
        .hero__stip--actief::after { animation: none; transform: scaleX(1); }
    }

    /* --- Productkaart ----------------------------------------------------- */
    .kaart {
        position: relative;
        display: flex;
        flex-direction: column;
        background: var(--kaart-achtergrond);
        border: 1px solid var(--kaart-rand);
        border-radius: var(--radius);
        overflow: hidden;
        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .kaart:hover {
        transform: translateY(-3px);
        border-color: var(--kleur-accent);
        box-shadow: var(--schaduw-diep);
    }

    /* De kaart krijgt role="button" van de Stimulus-controller; zonder
       JavaScript blijft alleen de titel klikbaar en is dit niet van toepassing. */
    .kaart[role='button'] { cursor: pointer; }

    .kaart[role='button']:focus-visible {
        outline: 2px solid var(--kleur-focus, var(--kleur-accent));
        outline-offset: 2px;
    }

    .kaart__media {
        position: relative;
        aspect-ratio: 4 / 3;
        background: var(--kleur-vlak);
        overflow: hidden;
    }

    /* De foto ligt over de plaatsvervanger heen. Laadt hij niet, dan zet de
       afbeelding-controller hem op hidden en komt de arcering tevoorschijn. */
    .kaart__media img {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        object-fit: cover;
        padding: var(--ruimte-3);
        background: var(--kaart-achtergrond);
        transition: transform 0.35s ease;
    }

    .kaart:hover .kaart__media img { transform: scale(1.04); }

    /* Plaatsvervanger als er geen (werkende) afbeelding is. Diagonale arcering in
       de accentkleur met de beginletter groot op de achtergrond — zo krijgt elk
       vlak een eigen beeld in plaats van hetzelfde grijze blok. Gedeeld door
       productkaarten, categoriekaarten en de modal. */
    .arcering,
    .kaart__leeg {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        overflow: hidden;
        background-color: var(--arcering-vlak, var(--kleur-vlak));
        background-image: repeating-linear-gradient(
            135deg,
            transparent 0 7px,
            var(--arcering-lijn, color-mix(in srgb, var(--kleur-accent) 14%, transparent)) 7px 8px
        );
    }

    .arcering__letter,
    .kaart__leeg-letter {
        font-family: var(--font-titel);
        font-size: var(--arcering-letter, 4.5rem);
        font-weight: 700;
        line-height: 1;
        color: var(--arcering-tekst, color-mix(in srgb, var(--kleur-accent) 24%, transparent));
        user-select: none;
    }

    /* Op een categoriekaart ligt donkere tekst overheen; daar past een donkere
       variant die het contrast met de titel bewaart. */
    .arcering--donker {
        --arcering-vlak: var(--kleur-donker);
        --arcering-lijn: color-mix(in srgb, var(--kleur-accent) 38%, transparent);
        --arcering-tekst: color-mix(in srgb, #fff 16%, transparent);
        --arcering-letter: 6rem;
    }

    /* Klein label onderin, zodat duidelijk is dát er geen foto is. */
    .kaart__leeg-tekst {
        position: absolute;
        bottom: var(--ruimte-3);
        font-size: var(--tekst-mini);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--kleur-tekst-zacht);
    }

    .kaart__lijf {
        display: flex;
        flex-direction: column;
        gap: var(--ruimte-2);
        padding: var(--ruimte-4);
        flex: 1;
    }

    /* Conditie als compact label. De productiewaarden zijn lang ("Nieuw - Nieuw
       wapen / munitie Vuurwapenverlof / Jachtakte"); op de kaart tonen we alleen
       het deel vóór het streepje, de rest staat in de modal. */
    /* Conditie en vergunning staan naast elkaar op de kaart en horen daarom
       exact even hoog te zijn. Alle maatvoering staat hier; de varianten
       verschillen alleen in kleur. Een doorzichtige rand op het conditielabel
       houdt de hoogte gelijk aan die met een echte rand. */
    .kaart__conditie,
    .vergunning {
        display: inline-flex;
        align-items: center;
        gap: 0.3em;
        min-height: 1.6rem;
        max-width: 100%;
        padding: 0 0.55em;
        border: 1px solid transparent;
        border-radius: var(--radius);
        font-size: var(--tekst-mini);
        font-weight: 600;
        letter-spacing: 0.04em;
        line-height: 1;
        white-space: nowrap;
    }

    .kaart__conditie {
        background: var(--kleur-conditie-vlak, var(--kleur-donker));
        color: var(--kleur-op-conditie, var(--kleur-op-donker));
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .kaart__titel {
        margin: 0;
        font-size: var(--tekst-normaal);
        line-height: 1.3;
    }

    .kaart__titel a {
        color: var(--kleur-titel);
        text-decoration: none;
    }

    /* Vergroot het klikgebied tot de hele kaart, zonder de link te verbergen. */
    .kaart__titel a::after {
        content: '';
        position: absolute;
        inset: 0;
    }

    .kaart__titel a:hover { color: var(--kleur-accent); }

    .kaart__voet {
        display: grid;
        gap: var(--ruimte-2);
        margin-top: auto;
        padding-top: var(--ruimte-3);
        border-top: 1px solid var(--kaart-rand);
    }

    .kaart__prijs {
        display: flex;
        align-items: baseline;
        gap: 0.4em;
        margin: 0;
    }

    .kaart__prijs-label { font-size: var(--tekst-klein); color: var(--kleur-tekst-zacht); }

    .kaart__prijs-waarde {
        font-family: var(--font-titel);
        font-size: var(--tekst-groot);
        font-weight: 700;
        color: var(--kleur-titel);
    }

    .kaart__prijs-waarde--aanvraag {
        font-size: var(--tekst-normaal);
        font-weight: 600;
        color: var(--kleur-accent);
    }

    /* --- Voorraadstatus --------------------------------------------------- */
    .voorraad {
        display: inline-flex;
        align-items: center;
        gap: 0.4em;
        margin: 0;
        font-size: var(--tekst-klein);
        font-weight: 600;
    }

    .voorraad svg { flex-shrink: 0; }
    /* Drie statussen: leverbaar, vergeven (in optie) en bestelbaar. */
    .voorraad--voorraad { color: var(--kleur-goed); }
    .voorraad--optie { color: var(--kleur-uit); }
    .voorraad--bestelling { color: var(--kleur-tekst-zacht); }

    /* Kaliberbadge rechtsboven op de foto, zoals op de huidige site. */
    .kaart__kaliber {
        position: absolute;
        top: var(--ruimte-3);
        right: var(--ruimte-3);
        z-index: 2;
        padding: 0.3em 0.7em;
        border-radius: var(--radius);
        background: var(--kleur-accent);
        color: var(--kleur-accent-tekst);
        font-size: var(--tekst-mini);
        font-weight: 700;
        white-space: nowrap;
    }

    /* --- Categoriekaart --------------------------------------------------- */
    .categorie-kaart {
        position: relative;
        display: grid;
        align-content: end;
        aspect-ratio: 3 / 2;
        padding: var(--ruimte-4);
        border-radius: var(--radius);
        overflow: hidden;
        background: var(--kleur-donker);
        color: var(--kleur-op-donker);
        text-decoration: none;
        isolation: isolate;
    }

    .categorie-kaart img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -2;
        background: var(--kleur-donker);
        transition: transform 0.4s ease;
    }

    /* Arcering ligt achter de foto (-3) en dus ook achter de scrim; verdwijnt de
       foto, dan is dit wat je ziet. */
    .categorie-kaart .arcering { z-index: -3; }

    .categorie-kaart::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(to top, rgb(0 0 0 / 0.82) 12%, rgb(0 0 0 / 0.25) 60%, rgb(0 0 0 / 0.1) 100%);
    }

    .categorie-kaart:hover img { transform: scale(1.06); }

    .categorie-kaart__titel {
        margin: 0;
        font-size: var(--tekst-lg);
        color: var(--kleur-op-donker);
    }

    .categorie-kaart__actie {
        display: inline-flex;
        align-items: center;
        gap: 0.4em;
        font-size: var(--tekst-klein);
        color: var(--kleur-op-donker-zacht);
    }

    .categorie-kaart__actie::after {
        content: '→';
        transition: transform var(--overgang, 150ms) ease;
    }

    .categorie-kaart:hover .categorie-kaart__actie { color: var(--kleur-op-donker); }
    .categorie-kaart:hover .categorie-kaart__actie::after { transform: translateX(0.25em); }

    /* --- Filters ---------------------------------------------------------- */
    .overzicht {
        display: grid;
        gap: var(--ruimte-5);
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    @media (min-width: 60rem) {
        /* Zijbalk links (verzendinfo boven de filters), resultaten rechts. */
        .overzicht {
            grid-template-columns: 16rem minmax(0, 1fr);
            grid-template-areas:
                'verzenden resultaten'
                'filters resultaten';
            grid-template-rows: auto 1fr;
            align-items: start;
            column-gap: var(--ruimte-5);
            row-gap: var(--ruimte-3);
        }

        .overzicht > .verzenden { grid-area: verzenden; }
        .overzicht > .filters { grid-area: filters; position: static; }
        .overzicht > turbo-frame { grid-area: resultaten; }
    }

    .filters {
        position: sticky;
        top: calc(var(--kop-hoogte) + var(--ruimte-3));
        display: flex;
        flex-direction: column;
        gap: var(--ruimte-4);
        padding: var(--ruimte-4);
        background: var(--kaart-achtergrond);
        border: 1px solid var(--kaart-rand);
        border-radius: var(--radius);
    }

    /* Kop van het filterpaneel, met hetzelfde trechtericoon als de huidige site.
       Het is een <summary>, zodat het paneel op mobiel dicht kan. */
    .filters__titel {
        display: flex;
        align-items: center;
        gap: var(--ruimte-2);
        margin: calc(var(--ruimte-4) * -1) calc(var(--ruimte-4) * -1) 0;
        padding: var(--ruimte-3) var(--ruimte-4);
        border-bottom: 1px solid var(--kaart-rand);
        font-family: var(--font-titel);
        font-size: var(--tekst-normaal);
        font-weight: 700;
        color: var(--kleur-titel);
        cursor: pointer;
        list-style: none;
    }

    .filters__titel::-webkit-details-marker { display: none; }
    .filters__titel > span:first-of-type { flex: 1; }
    .filters__titel svg { flex-shrink: 0; }

    /* Aantal actieve filters, zodat je dichtgeklapt ziet dat de lijst gefilterd
       is. */
    .filters__teller {
        display: grid;
        place-items: center;
        min-width: 1.35rem;
        height: 1.35rem;
        padding: 0 0.35rem;
        border-radius: var(--radius-pil);
        background: var(--kleur-accent);
        color: var(--kleur-accent-tekst);
        font-size: var(--tekst-mini);
        font-weight: 700;
    }

    /* Chevron: alleen daar waar het paneel echt open en dicht kan. */
    .filters__titel::after {
        content: '';
        width: 0.55rem;
        height: 0.55rem;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg) translate(-0.1em, -0.1em);
        transition: transform 0.2s ease;
    }

    .filters__paneel[open] > .filters__titel::after {
        transform: rotate(-135deg) translate(-0.15em, -0.15em);
    }

    .filters__inhoud {
        display: flex;
        flex-direction: column;
        gap: var(--ruimte-4);
        padding-top: var(--ruimte-4);
    }

    /* Vanaf de zijbalkbreedte is inklappen niet nodig: het paneel staat naast de
       resultaten en neemt geen ruimte van de producten af. De inklapbaar-
       controller houdt het <details> daar open; hier halen we alleen de
       aanwijzingen weg dat er iets te klappen valt.

       Zonder JavaScript blijft het paneel op desktop dicht tot je erop klikt —
       hinderlijker zou zijn om het op mobiel niet dicht te kúnnen krijgen. */
    @media (min-width: 60rem) {
        .filters__titel { cursor: default; }
        .filters__titel::after { display: none; }
        .filters__teller { display: none; }
    }

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

    .filters__groep { display: flex; flex-direction: column; gap: var(--ruimte-2); }

    .filters__label {
        font-size: var(--tekst-mini);
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--kleur-tekst-zacht);
    }

    .veld {
        width: 100%;
        padding: 0.6rem 0.75rem;
        border: 1px solid var(--kleur-rand);
        border-radius: var(--radius-klein);
        background: var(--kleur-achtergrond);
        color: var(--kleur-tekst);
        font-family: inherit;
        font-size: var(--tekst-klein);
    }

    .veld:focus { border-color: var(--kleur-accent); }

    /* Eigen chevron in plaats van de systeempijl, die strak tegen de rand plakt
       en per browser anders oogt. De extra rechterruimte houdt lange opties vrij. */
    select.veld {
        appearance: none;
        padding-right: 2.5rem;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.85rem center;
        background-size: 1rem;
        cursor: pointer;
    }

    select.veld::-ms-expand { display: none; }

    .schakelaar {
        display: flex;
        align-items: center;
        gap: var(--ruimte-2);
        font-size: var(--tekst-klein);
        cursor: pointer;
    }

    .zoekbalk { display: flex; gap: var(--ruimte-2); }
    .zoekbalk .veld { flex: 1; }

    /* --- Resultaatbalk ---------------------------------------------------- */
    .resultaatbalk {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--ruimte-3);
        margin-bottom: var(--ruimte-4);
        padding-bottom: var(--ruimte-3);
        border-bottom: 1px solid var(--kleur-rand);
    }

    .resultaatbalk__telling {
        font-size: var(--tekst-klein);
        color: var(--kleur-tekst-zacht);
        margin: 0;
    }

    .resultaatbalk__telling strong { color: var(--kleur-titel); }

    .chips { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); }

    .chip {
        display: inline-flex;
        align-items: center;
        gap: 0.4em;
        padding: 0.3em 0.75em;
        border-radius: var(--radius-pil);
        background: var(--kleur-vlak);
        border: 1px solid var(--kleur-rand);
        font-size: var(--tekst-mini);
        color: var(--kleur-tekst);
        text-decoration: none;
    }

    .chip:hover { border-color: var(--kleur-accent); color: var(--kleur-accent); }

    /* Het kruisje: standaard gedempt, en pas duidelijk als je de pil aanwijst.
       Zo leest de pil eerst als label en pas daarna als knop. */
    .chip svg {
        flex-shrink: 0;
        opacity: 0.45;
        transition: opacity 0.15s ease;
    }

    .chip:hover svg,
    .chip:focus-visible svg { opacity: 1; }

    /* Genoeg hoogte om betrouwbaar aan te tikken zonder de balk op te rekken. */
    a.chip { min-height: 2rem; padding-right: 0.55em; }

    .chip--wis {
        background: none;
        border-style: dashed;
        color: var(--kleur-tekst-zacht);
    }

    /* --- Lege staat ------------------------------------------------------- */
    .leeg {
        display: grid;
        gap: var(--ruimte-3);
        justify-items: center;
        text-align: center;
        padding: var(--ruimte-8) var(--ruimte-4);
        border: 1px dashed var(--kleur-rand);
        border-radius: var(--radius);
        color: var(--kleur-tekst-zacht);
    }

    .leeg h3 { margin: 0; color: var(--kleur-titel); }

    /* --- Nieuws ----------------------------------------------------------- */
    .nieuws-kaart {
        position: relative;
        display: flex;
        flex-direction: column;
        background: var(--kaart-achtergrond);
        border: 1px solid var(--kaart-rand);
        border-radius: var(--radius);
        overflow: hidden;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .nieuws-kaart:hover { transform: translateY(-3px); box-shadow: var(--schaduw-diep); }

    .nieuws-kaart__media { position: relative; aspect-ratio: 16 / 9; background: var(--kleur-vlak); }

    .nieuws-kaart__media img {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        object-fit: cover;
        background: var(--kleur-vlak);
    }

    .nieuws-kaart__lijf {
        display: flex;
        flex-direction: column;
        gap: var(--ruimte-2);
        padding: var(--ruimte-4);
        flex: 1;
    }

    .nieuws-kaart__datum {
        font-size: var(--tekst-mini);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--kleur-tekst-zacht);
    }

    .nieuws-kaart__titel { margin: 0; font-size: var(--tekst-normaal); line-height: 1.3; }
    .nieuws-kaart__titel a { color: var(--kleur-titel); text-decoration: none; }
    .nieuws-kaart__titel a::after { content: ''; position: absolute; inset: 0; }
    .nieuws-kaart__titel a:hover { color: var(--kleur-accent); }

    .nieuws-kaart__tekst {
        margin: 0;
        font-size: var(--tekst-klein);
        color: var(--kleur-tekst-zacht);
    }

    /* --- Merkenrij -------------------------------------------------------- */
    /* --- Merkencarrousel --------------------------------------------------- */
    .merken {
        position: relative;
        overflow: hidden;
        /* Vervaagde randen, zodat logo's niet hard afgekapt in beeld schuiven. */
        mask-image: linear-gradient(to right, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
    }

    .merken__spoor {
        display: flex;
        width: max-content;
        animation: merken-rollen var(--merken-duur, 45s) linear infinite;
    }

    /* Vier identieke rijen: na 50% (dus twee rijen) staat het spoor er precies
       hetzelfde bij en begint de animatie onzichtbaar opnieuw. */
    @keyframes merken-rollen {
        from { transform: translateX(0); }
        to { transform: translateX(-50%); }
    }

    /* Pauzeren bij hover en focus, zodat je een logo kunt aanklikken. */
    .merken:hover .merken__spoor,
    .merken:focus-within .merken__spoor {
        animation-play-state: paused;
    }

    .merken__rij {
        display: flex;
        align-items: stretch;
        gap: var(--ruimte-3);
        list-style: none;
        /* Verticale ruimte voorkomt dat de rand van een vlak wordt afgesneden
           door de overflow:hidden op .merken. */
        margin: 0;
        padding: var(--ruimte-1, 0.25rem) calc(var(--ruimte-3) / 2);
    }

    .merken__item { flex: 0 0 auto; }

    .merken__vlak {
        display: grid;
        place-items: center;
        width: 10.5rem;
        height: 5.5rem;
        padding: var(--ruimte-4);
        border: 1px solid var(--kaart-rand);
        border-radius: var(--radius);
        background: var(--merk-vlak, #fff);
        text-decoration: none;
        transition: border-color 0.2s ease;
    }

    /* Logo en naam liggen op elkaar; verdwijnt het logo, dan blijft de naam. */
    .merken__vlak > * { grid-area: 1 / 1; }

    /* Vaste optische maat: elk logo krijgt exact hetzelfde kader en wordt daarin
       passend geschaald. Zonder dit oogt een breed logo (Sig Sauer) veel groter
       dan een vierkant (Beretta), ook al passen ze allebei in het vlak. */
    .merken__vlak img {
        width: 100%;
        height: 2.25rem;
        object-fit: contain;
        object-position: center;
        filter: var(--merk-filter);
        transition: filter 0.2s ease;
    }

    a.merken__vlak:hover { border-color: var(--kleur-accent); }
    a.merken__vlak:hover img { filter: none; }

    /* De naam ligt onder het logo en komt alleen in beeld als dat wegvalt. */
    .merken__naam {
        font-family: var(--font-titel);
        font-size: var(--tekst-klein);
        font-weight: 600;
        text-align: center;
        line-height: 1.25;
        color: var(--kleur-tekst-zacht);
    }

    .merken__vlak img:not([hidden]) + .merken__naam { visibility: hidden; }

    /* Wie beweging liever niet heeft, krijgt een gewone scrollbare rij. */
    @media (prefers-reduced-motion: reduce) {
        .merken { mask-image: none; }
        .merken__spoor { animation: none; width: auto; overflow-x: auto; }
        .merken__rij[aria-hidden='true'] { display: none; }
    }

    /* --- Artikel (nieuwsdetail) ------------------------------------------- */
    .artikel { max-width: 44rem; margin-inline: auto; }
    .artikel__media { margin-bottom: var(--ruimte-5); border-radius: var(--radius); overflow: hidden; }
    .artikel__lijf { font-size: var(--tekst-normaal); }
    .artikel__lijf p { margin-bottom: var(--ruimte-4); }

    /* --- Paginering ------------------------------------------------------- */
    .paginering {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--ruimte-3);
        margin-top: var(--ruimte-6);
        padding-top: var(--ruimte-4);
        border-top: 1px solid var(--kleur-rand);
    }

    .paginering__lijst {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--ruimte-2);
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .paginering__nummer {
        display: grid;
        place-items: center;
        min-width: 2.5rem;
        height: 2.5rem;
        padding-inline: 0.7rem;
        border: 1px solid var(--kleur-rand);
        border-radius: var(--radius-klein);
        font-size: var(--tekst-klein);
        color: var(--kleur-tekst);
        text-decoration: none;
    }

    /* Inline-flex, niet grid: label en pijl horen op één regel naast elkaar. */
    .paginering__stap {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        height: 2.5rem;
        padding-inline: 0.9rem;
        border: 1px solid var(--kleur-rand);
        border-radius: var(--radius-klein);
        font-size: var(--tekst-klein);
        font-weight: 600;
        color: var(--kleur-tekst);
        text-decoration: none;
        white-space: nowrap;
    }

    .paginering__stap svg { width: 1rem; height: 1rem; flex-shrink: 0; }

    a.paginering__nummer:hover,
    a.paginering__stap:hover {
        border-color: var(--kleur-accent);
        color: var(--kleur-accent);
    }

    .paginering__nummer--actief {
        background: var(--kleur-accent);
        border-color: var(--kleur-accent);
        color: var(--kleur-accent-tekst);
        font-weight: 700;
    }

    /* Uitgeschakelde stap blijft staan zodat de balk niet verspringt, maar krijgt
       een gedempte rand in plaats van helemaal geen — anders oogt hij kapot. */
    .paginering__stap--uit {
        border-color: var(--kaart-rand);
        color: var(--kleur-tekst-zacht);
        opacity: 0.45;
    }

    .paginering__gat {
        padding-inline: 0.2rem;
        color: var(--kleur-tekst-zacht);
    }

    @media (max-width: 40rem) {
        /* Smal scherm: nummers zijn secundair, vorige/volgende telt. */
        .paginering { justify-content: center; }
        .paginering__lijst { order: -1; width: 100%; justify-content: center; }
    }

    /* --- Contact ---------------------------------------------------------- */
    .contact {
        display: grid;
        gap: var(--ruimte-5);
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    }

    .contact__blok h3 {
        font-size: var(--tekst-normaal);
        margin-bottom: var(--ruimte-2);
    }

    .contact__blok p { margin: 0; color: var(--kleur-tekst-zacht); }
    .contact__blok a { color: inherit; }
    .contact__blok a:hover { color: var(--kleur-accent); }

    /* --- Productmodal ------------------------------------------------------ */
    .modal {
        width: min(56rem, calc(100vw - 2rem));
        max-height: min(44rem, calc(100vh - 2rem));
        padding: 0;
        border: 0;
        border-radius: var(--radius);
        background: var(--kaart-achtergrond);
        color: var(--kleur-tekst);
        overflow: visible;
    }

    .modal::backdrop {
        background: color-mix(in srgb, var(--kleur-donker) 72%, transparent);
        backdrop-filter: blur(3px);
    }

    /* Achtergrond niet mee laten scrollen zolang de modal open is. */
    .modal-open { overflow: hidden; }

    .modal__sluiten {
        position: absolute;
        top: var(--ruimte-3);
        right: var(--ruimte-3);
        z-index: 3;
        display: grid;
        place-items: center;
        width: 2.25rem;
        height: 2.25rem;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: var(--kleur-donker);
        color: var(--kleur-op-donker);
        cursor: pointer;
    }

    .modal__sluiten:hover { background: var(--kleur-accent); color: var(--kleur-accent-tekst); }

    .detail {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        max-height: inherit;
        overflow-y: auto;
        border-radius: inherit;
    }

    @media (min-width: 48rem) {
        .detail { grid-template-columns: 22rem minmax(0, 1fr); }

        /* Langwerpige producten (geweren) passen niet in een smalle, hoge kolom:
           daar wordt de foto tot een reepje bijgesneden. Bij een liggende foto
           gaat het beeld daarom over de volle breedte boven de tekst staan. De
           product-controller meet de verhouding en zet deze klasse. */
        .detail--liggend { grid-template-columns: minmax(0, 1fr); }
    }

    /* Het mediavak bepaalt de hoogte, niet de foto: zo blijft de modal even hoog
       ongeacht wat er ingeladen wordt. */
    .detail__media {
        position: relative;
        background: var(--kleur-vlak);
        min-height: 14rem;
    }

    /* In de kolomindeling loopt het beeldvak over de volle hoogte van de modal;
       een vaste verhouding zou het korter maken dan de tekst ernaast.
       Sticky erbij: bij een lange beschrijving is die kolom hoger dan het
       scherm, en dan zou de foto — met de vergrootknop in de hoek — mee naar
       boven scrollen en onbereikbaar worden. Nu blijft hij staan. */
    @media (min-width: 48rem) {
        .detail:not(.detail--liggend) .detail__media {
            position: sticky;
            top: 0;
            align-self: start;
            height: 100%;
            max-height: min(44rem, calc(100vh - 2rem));
        }
    }

    /* contain, niet cover: bij een wapen telt de volledige vorm. Cover snijdt de
       loop of de kolf eraf, en juist daar kijkt een koper naar. Omdat de
       voorraad niet uniform gefotografeerd is — de ene staand, de andere
       liggend — is bijsnijden nooit veilig. De foto krijgt daarom een eigen,
       rustige ondergrond en houdt de ruimte die overblijft leeg. */
    .detail__media img {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: var(--ruimte-4);
    }

    /* Met contain blijft er ruimte over naast de foto. De plaatsvervanger ligt
       daaronder en zou daar doorheen schijnen ('Geen foto' naast een foto die er
       wél is), dus die verdwijnt zodra er een zichtbare afbeelding staat. Het
       mediavak zelf levert de rustige ondergrond. */
    .detail__media:has(img:not([hidden])) .kaart__leeg { display: none; }

    /* Ligt het beeld boven de tekst, dan volgt het vak de vorm van de foto: de
       controller zet --foto-verhouding op de gemeten verhouding, zodat er geen
       brede lege banden ontstaan. 16/7 is de terugval als meten niet lukt. */
    .detail--liggend .detail__media {
        min-height: 0;
        aspect-ratio: var(--foto-verhouding, 16 / 7);
    }

    /* Staande foto's naast de tekst: de kolom is smal, dus begrenzen we de
       hoogte. Anders duwt één hoge foto de hele modal uit het scherm. */
    @media (min-width: 48rem) {
        .detail--staand .detail__media img { max-height: min(38rem, 78vh); }
    }

    /* De foto in de details nodigt uit tot vergroten: hij licht subtiel op en
       krijgt een loep in de hoek. Alleen als er echt een foto is. */
    .vergrootbaar { cursor: zoom-in; }

    /* Het loepje is een echte knop: klikken erop vergroot net zo goed als
       klikken op de foto zelf. De controller plaatst hem. */
    /* Rechtsonder, waar je een vergrootglas verwacht. Niet ten opzichte van het
       mediavak — dat is in de kolomindeling zo hoog als de tekst ernaast, en
       dan zakt de knop onder de schermrand. De sticky-truc houdt hem binnen het
       zichtbare deel van dat vak. */
    .vergroot-loep {
        position: absolute;
        right: var(--ruimte-3);
        bottom: var(--ruimte-3);
        z-index: 2;
        display: grid;
        place-items: center;
        width: 2rem;
        height: 2rem;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: var(--kleur-donker);
        color: var(--kleur-op-donker);
        opacity: 0.85;
        cursor: zoom-in;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .vergroot-loep:hover,
    .vergroot-loep:focus-visible,
    .detail__media:hover .vergroot-loep {
        opacity: 1;
        transform: scale(1.1);
    }


    /* --- Vergrote foto ------------------------------------------------------ */
    /* Eigen dialoog bovenop de detailmodal: het scherm vullen, de omgeving
       wegnemen en alle aandacht naar het wapen. */
    .vergroot {
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        overflow: hidden;
    }

    /* Bewust géén backdrop-filter: deze dialoog opent bóvenop de detailmodal, en
       een blur op de backdrop van een tweede top-layer dialoog laat Chrome het
       hele scherm wit renderen. Een dekkend scherm doet hier hetzelfde werk. */
    .vergroot::backdrop {
        background: color-mix(in srgb, var(--kleur-donker) 94%, black);
    }

    /* Het raam toont de foto passend; in de zoomstand wordt het de verschuifbare
       uitsnede. */
    /* Flex, geen grid: bij grid rekent max-height van de foto tegen het vak dat
       de foto zélf heeft opgerekt, waardoor een hoge staande foto (kluis) niet
       gedwongen wordt te passen en het scherm uit loopt. */
    .vergroot__raam {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: clamp(var(--ruimte-4), 5vmin, var(--ruimte-6));
        overflow: hidden;
        cursor: zoom-in;
    }

    .vergroot__foto {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        min-height: 0;
        object-fit: contain;
        border-radius: var(--radius-klein);
        /* Lost de foto van de donkere achtergrond, zoals een lijst om een print. */
        box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 55%);
        transition: transform 0.28s cubic-bezier(0.2, 0, 0.2, 1);
        user-select: none;
        -webkit-user-drag: none;
    }

    /* Ingezoomd: de foto groeit voorbij het raam, dat daarmee scrollbaar wordt.
       Zo kun je langs een lange loop schuiven zonder de rest te verliezen.
       De breedte komt van de controller — die rekent hem uit op basis van de
       eigen resolutie, want een staande kluisfoto verdraagt een heel andere
       vergroting dan een brede geweerfoto. Blijft de foto smaller dan het raam,
       dan houdt place-items hem netjes gecentreerd. */
    .vergroot__raam--zoom {
        overflow: auto;
        /* safe: blijft de foto kleiner dan het raam, dan centreren; is hij
           groter, dan begint hij bovenaan links in plaats van onbereikbaar
           buiten beeld te centreren. */
        align-items: safe center;
        justify-content: safe center;
        cursor: grab;
        scrollbar-width: thin;
        padding: 0;
    }

    .vergroot__raam--zoom .vergroot__foto {
        max-width: none;
        max-height: none;
        height: auto;
        border-radius: 0;
        box-shadow: none;
        /* De sprong naar de zoomstand is een breedtewissel, geen transform. */
        transition: none;
    }

    .vergroot__raam--sleept { cursor: grabbing; }

    .vergroot__sluiten {
        top: var(--ruimte-4);
        right: var(--ruimte-4);
        background: color-mix(in srgb, var(--kleur-donker) 80%, black);
        border: 1px solid var(--kleur-op-donker-rand, rgb(255 255 255 / 25%));
    }

    .vergroot__hint {
        position: absolute;
        left: 50%;
        bottom: var(--ruimte-4);
        transform: translateX(-50%);
        margin: 0;
        padding: var(--ruimte-1) var(--ruimte-3);
        border-radius: var(--radius-pil);
        background: color-mix(in srgb, var(--kleur-donker) 75%, transparent);
        color: var(--kleur-op-donker);
        font-size: var(--tekst-klein, 0.85rem);
        white-space: nowrap;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    /* De zichtbaarheid van de hint zet de controller rechtstreeks op het
       element; de klasse vergroot--zoom blijft beschikbaar voor eventuele
       andere stijlen in de ingezoomde stand. */

    @media (prefers-reduced-motion: reduce) {
        .vergroot__foto,
        .detail__media::after { transition: none; }
    }

    .detail__lijf {
        display: flex;
        flex-direction: column;
        gap: var(--ruimte-3);
        padding: var(--ruimte-5);
    }

    .detail__titel {
        margin: 0;
        padding-right: 2.5rem;
        font-size: var(--tekst-2xl);
        line-height: 1.15;
    }

    /* --- Prijsblok in de modal --------------------------------------------- */
    .prijsblok {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--ruimte-2) var(--ruimte-4);
        padding: var(--ruimte-3) var(--ruimte-4);
        /* Streep in de accentkleur links: hetzelfde motief als het
           voorwaardenblok, zodat de modal één taal spreekt. */
        border-left: 3px solid var(--kleur-accent);
        border-radius: 0 var(--radius) var(--radius) 0;
        background: color-mix(in srgb, var(--kleur-accent) 8%, transparent);
    }

    .prijsblok__prijs {
        display: flex;
        flex-direction: column;
        margin: 0;
        line-height: 1.1;
    }

    .prijsblok__label {
        font-size: var(--tekst-mini);
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--kleur-tekst-zacht);
    }

    .prijsblok__bedrag {
        display: flex;
        align-items: baseline;
        gap: 0.15em;
        font-family: var(--font-titel);
        font-size: clamp(1.9rem, 1.3rem + 2vw, 2.75rem);
        font-weight: 700;
        letter-spacing: -0.01em;
        color: var(--kleur-titel);
        /* Cijfers even breed: bedragen blijven zo rustig uitlijnen. */
        font-variant-numeric: tabular-nums;
    }

    /* Het euroteken hoeft niet even groot als het bedrag. */
    .prijsblok__euro {
        font-size: 0.55em;
        font-weight: 600;
        color: var(--kleur-tekst-zacht);
    }

    /* Op aanvraag: geen bedrag om te tonen, dus de nadruk ligt op de uitnodiging
       om contact op te nemen. */
    .prijsblok--aanvraag { background: color-mix(in srgb, var(--kleur-accent) 6%, transparent); }

    .prijsblok__aanvraag {
        font-family: var(--font-titel);
        font-size: var(--tekst-lg);
        font-weight: 700;
        color: var(--kleur-accent);
    }

    .prijsblok__toelichting {
        margin-top: 0.35em;
        font-size: var(--tekst-mini);
        line-height: 1.4;
        color: var(--kleur-tekst-zacht);
    }

    /* Specificaties als label-waardeparen op één regel per kenmerk. */
    .detail__specs {
        display: grid;
        gap: 0;
        margin: 0;
        border-top: 1px solid var(--kaart-rand);
    }

    .detail__specs > div {
        display: grid;
        grid-template-columns: 8rem minmax(0, 1fr);
        gap: var(--ruimte-3);
        padding: var(--ruimte-2) 0;
        border-bottom: 1px solid var(--kaart-rand);
    }

    .detail__specs dt {
        font-size: var(--tekst-klein);
        color: var(--kleur-tekst-zacht);
    }

    .detail__specs dd {
        margin: 0;
        font-size: var(--tekst-klein);
        font-weight: 600;
        color: var(--kleur-titel);
    }

    .detail__tekst {
        font-size: var(--tekst-klein);
        line-height: 1.65;
        color: var(--kleur-tekst);
    }

    .detail__acties {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ruimte-3);
        margin-top: var(--ruimte-2);
    }

    .detail__voet {
        margin: 0;
        font-size: var(--tekst-mini);
        color: var(--kleur-tekst-zacht);
    }

    /* --- Wettelijke voorwaarden -------------------------------------------- */
    .kaart__labels {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--ruimte-2);
        margin: 0;
    }

    /* Vergunningmarkering op de kaart: een schild in de accentkleur, klein
       genoeg om de prijs niet te overstemmen. */
    .vergunning {
        border-color: color-mix(in srgb, var(--kleur-accent) 45%, transparent);
        color: var(--kleur-accent);
    }

    .vergunning svg { flex-shrink: 0; }

    /* In de modal: de eis die op dit artikel slaat, met een streep in de
       accentkleur ernaast — een voorwaarde, geen waarschuwing. */
    .voorwaarden {
        margin-top: var(--ruimte-2);
        padding: var(--ruimte-3) var(--ruimte-4);
        border-left: 3px solid var(--kleur-accent);
        border-radius: 0 var(--radius) var(--radius) 0;
        background: color-mix(in srgb, var(--kleur-accent) 7%, transparent);
    }

    .voorwaarden__eis {
        display: flex;
        align-items: start;
        gap: var(--ruimte-2);
        margin: 0;
        font-size: var(--tekst-klein);
        line-height: 1.55;
        color: var(--kleur-tekst);
    }

    .voorwaarden__eis svg { flex-shrink: 0; margin-top: 0.15em; color: var(--kleur-accent); }
    .voorwaarden__eis strong { color: var(--kleur-titel); }

    .voorwaarden__lijst {
        display: grid;
        gap: 0.35rem;
        margin: var(--ruimte-3) 0 0;
        padding: 0;
        list-style: none;
        font-size: var(--tekst-mini);
        line-height: 1.5;
        color: var(--kleur-tekst-zacht);
    }

    /* Alleen een streepje als opsomming; bullets zouden hier te luid zijn. */
    .voorwaarden__lijst li { padding-left: 0.9em; text-indent: -0.9em; }
    .voorwaarden__lijst li::before { content: '— '; color: var(--kleur-accent); }

    /* Staat de eis er niet, dan hoeft de lijst geen extra ruimte bovenaan. */
    .voorwaarden__eis + .voorwaarden__lijst {
        padding-top: var(--ruimte-3);
        border-top: 1px solid color-mix(in srgb, var(--kleur-accent) 20%, transparent);
    }

    /* --- Verzendinformatie ------------------------------------------------ */
    .verzenden {
        border: 1px solid var(--kaart-rand);
        border-radius: var(--radius);
        background: var(--kaart-achtergrond);
    }

    .verzenden__kop {
        display: flex;
        align-items: center;
        gap: var(--ruimte-2);
        padding: var(--ruimte-3) var(--ruimte-4);
        font-family: var(--font-titel);
        font-size: var(--tekst-normaal);
        font-weight: 700;
        color: var(--kleur-titel);
        cursor: pointer;
        list-style: none;
    }

    .verzenden__kop svg { flex-shrink: 0; color: var(--kleur-accent); }
    .verzenden__kop span { flex: 1; }
    .verzenden__kop:hover { color: var(--kleur-accent); }

    /* Het standaard driehoekje weg, en een eigen chevron die meedraait. */
    .verzenden__kop::-webkit-details-marker { display: none; }

    .verzenden__kop::after {
        content: '';
        width: 0.5rem;
        height: 0.5rem;
        border-right: 2px solid var(--kleur-tekst-zacht);
        border-bottom: 2px solid var(--kleur-tekst-zacht);
        transform: rotate(45deg) translate(-2px, -2px);
        transition: transform 0.2s ease;
    }

    .verzenden[open] .verzenden__kop::after {
        transform: rotate(-135deg) translate(-2px, -2px);
    }

    .verzenden__lijf {
        padding: var(--ruimte-3) var(--ruimte-4) var(--ruimte-4);
        border-top: 1px solid var(--kaart-rand);
    }

    .verzenden__lijf p {
        margin: 0 0 var(--ruimte-3);
        font-size: var(--tekst-klein);
        line-height: 1.6;
        color: var(--kleur-tekst-zacht);
    }

    .verzenden__tarieven { list-style: none; margin: 0; padding: 0; display: grid; }

    .verzenden__tarieven li {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px var(--ruimte-2);
        padding: var(--ruimte-2) 0;
        border-bottom: 1px solid var(--kaart-rand);
        font-size: var(--tekst-mini);
        line-height: 1.4;
        color: var(--kleur-tekst-zacht);
    }

    .verzenden__tarieven li:last-child { border-bottom: 0; padding-bottom: 0; }
    .verzenden__prijs { font-weight: 700; color: var(--kleur-titel); white-space: nowrap; margin-left: auto; }

    /* --- Voettekst -------------------------------------------------------- */
    .voet {
        margin-top: var(--ruimte-8);
        padding-block: var(--ruimte-7) var(--ruimte-4);
        background: var(--kleur-donker);
        color: var(--kleur-op-donker-zacht);
    }

    /* De payoff waar de klant aan hecht; groot en als eerste in de voet. */
    .voet__payoff {
        margin: 0 0 var(--ruimte-6);
        padding-bottom: var(--ruimte-6);
        border-bottom: 1px solid var(--kleur-op-donker-rand);
        font-family: var(--font-titel);
        font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3rem);
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: -0.01em;
        color: var(--kleur-op-donker);
        text-transform: var(--titel-transform, none);
    }

    .voet__raster {
        display: grid;
        gap: var(--ruimte-5);
        grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
        padding-bottom: var(--ruimte-5);
        border-bottom: 1px solid var(--kleur-op-donker-rand);
    }

    .voet h4 {
        margin-bottom: var(--ruimte-3);
        font-size: var(--tekst-mini);
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--kleur-op-donker);
    }

    /* :not() houdt de payoff buiten schot; die staat verderop en zou anders
       door deze latere regel overschreven worden. */
    .voet p:not(.voet__payoff) { margin: 0 0 var(--ruimte-2); font-size: var(--tekst-klein); }
    .voet a { color: var(--kleur-op-donker-zacht); text-decoration: none; }
    .voet a:hover { color: var(--kleur-accent); }

    .voet__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ruimte-2); }
    .voet__lijst a { font-size: var(--tekst-klein); }

    .voet__onder {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--ruimte-3);
        padding-top: var(--ruimte-4);
        font-size: var(--tekst-mini);
        color: var(--kleur-op-donker-zacht);
    }

    /* --- Inloggen --------------------------------------------------------- */
    .inlog {
        display: grid;
        place-items: center;
        min-height: 70vh;
        padding-block: var(--ruimte-7);
    }

    .inlog__kaart {
        width: min(100% - 2rem, 24rem);
        padding: var(--ruimte-6);
        background: var(--kaart-achtergrond);
        border: 1px solid var(--kaart-rand);
        border-radius: var(--radius);
        box-shadow: var(--schaduw);
    }

    .inlog__kaart h1 { font-size: var(--tekst-xl); margin-bottom: var(--ruimte-5); }
    .inlog__veld { display: grid; gap: var(--ruimte-2); margin-bottom: var(--ruimte-4); }
    .inlog__veld label { font-size: var(--tekst-klein); font-weight: 600; }

    .melding {
        padding: var(--ruimte-3);
        margin-bottom: var(--ruimte-4);
        border-radius: var(--radius-klein);
        background: var(--kleur-uit-vlak);
        color: var(--kleur-uit);
        font-size: var(--tekst-klein);
    }
}

@layer utilities {
    .verborgen-visueel {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    .tekst-zacht { color: var(--kleur-tekst-zacht); }
    .tekst-midden { text-align: center; }
    .stapel { display: grid; gap: var(--ruimte-3); }

    @media (max-width: 52rem) {
        .kop__nav--desktop { display: none; }
        .menu-mobiel { display: block; }
        .kop { position: relative; }
        .verberg-mobiel { display: none; }

        /* De filterzijbalk is op smal scherm geen zijbalk meer: niet vastzetten,
           want dan blijft hij het halve scherm vullen tijdens het scrollen.
           Het kader eromheen mag ook weg — de kop van het <details> is al een
           duidelijk afgebakende regel. Zo staan de producten hoger in beeld. */
        .filters {
            position: static;
            top: auto;
            padding: 0;
            border: 0;
            background: none;
        }

        /* De kop wordt de hele knop: rand eromheen, en de inhoud eronder.
           Dezelfde padding en tekstgrootte als de verzendknop ernaast, zodat ze
           even hoog zijn. De teller is kleiner dan de regelhoogte en rekt de
           knop dus niet op. */
        .filters .filters__titel {
            margin: 0;
            padding: var(--ruimte-3);
            border: 1px solid var(--kaart-rand);
            border-radius: var(--radius);
            background: var(--kaart-achtergrond);
        }

        /* Beide knoppen strak op één lijn en even hoog. De rand zit bij filters
           op de kop en bij verzending op het omhulsel; stretch trekt dat verschil
           glad zolang beide dicht zijn. */
        .overzicht > .filters,
        .overzicht > .verzenden { align-self: stretch; }

        .overzicht > .verzenden:not([open]) { display: flex; }
        .overzicht > .verzenden:not([open]) .verzenden__kop { flex: 1; }

        /* Opengeklapt sluiten kop en inhoud op elkaar aan. */
        .filters__paneel[open] .filters__titel {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        .filters__paneel[open] .filters__inhoud {
            padding: var(--ruimte-4);
            border: 1px solid var(--kaart-rand);
            border-top: 0;
            border-radius: 0 0 var(--radius) var(--radius);
            background: var(--kaart-achtergrond);
        }

        /* Filters en verzending delen één regel bovenaan: filters nemen de volle
           resterende breedte, verzending staat er als compacte knop naast. Zo
           blijven ze bij elkaar zonder dat verzending een hele regel opeist, en
           staan de producten er direct onder. */
        .overzicht {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            grid-template-areas:
                'filters verzenden'
                'resultaten resultaten';
            align-items: start;
            gap: var(--ruimte-3);
        }

        .overzicht > .filters { grid-area: filters; }
        .overzicht > .verzenden { grid-area: verzenden; }
        .overzicht > turbo-frame { grid-area: resultaten; }

        /* Zodra één van de twee openklapt, gaan ze onder elkaar: een opengeklapt
           paneel in een halve kolom is onleesbaar. */
        .overzicht:has(.filters__paneel[open]),
        .overzicht:has(.verzenden[open]) {
            grid-template-columns: minmax(0, 1fr);
            grid-template-areas:
                'filters'
                'verzenden'
                'resultaten';
        }

        /* Verzending staat naast de filterknop en hoort er hetzelfde uit te zien:
           dezelfde tekstgrootte en padding, dus ook dezelfde hoogte. Alleen de
           breedte verschilt — verzending is zo breed als zijn inhoud, filters
           krijgt de rest. */
        .overzicht > .verzenden { white-space: nowrap; }

        .overzicht > .verzenden .verzenden__kop {
            padding: var(--ruimte-3);
            font-size: var(--tekst-normaal);
        }

        /* Niet uitrekken: de knop is zo breed als zijn inhoud. De chevron blijft
           staan — zonder dat pijltje zie je niet dat er iets uitklapt. */
        .overzicht > .verzenden .verzenden__kop span { flex: 0 0 auto; }

        /* Opengeklapt neemt verzending de volle breedte, zodat de tarieven
           leesbaar onder elkaar staan in plaats van in een smalle kolom. */
        .overzicht > .verzenden[open] .verzenden__kop span { flex: 1; }

        /* Hero: geen schermvullende hoogte, wel genoeg lucht om te ademen. */
        /* Mobiel: beeld boven tekst. De hero vult ook hier het scherm minus de
           balken, met het beeld als flexibele bovenhelft en de tekst eronder.
           Zo staan titel, prijs, knop én balkjes binnen één scherm. */
        .hero { min-height: calc(100dvh - var(--boven-hero, 0px)); }

        .hero__dia {
            /* Beeld krimpt mee, tekst krijgt de ruimte die hij nodig heeft. */
            grid-template-rows: minmax(6rem, 1fr) auto;
            gap: var(--ruimte-4);
        }

        .hero__beeld { height: auto; min-height: 6rem; }

        /* Minder regels tekst; op een telefoon telt de titel en de prijs. */
        .hero__tekst { --hero-regels: 3; font-size: var(--tekst-klein); }
        .hero h1, .hero__titel { font-size: var(--tekst-xl); }
    }

    /* Korte schermen (iPhone SE en kleiner): nog strakker, anders vallen de
       knop en de balkjes onder de vouw. */
    @media (max-width: 52rem) and (max-height: 44rem) {
        .hero > .omhulsel { gap: var(--ruimte-3); padding-block: var(--ruimte-4); }
        .hero__dia { gap: var(--ruimte-3); }
        .hero__tekst { --hero-regels: 2; }
        .hero h1, .hero__titel { font-size: var(--tekst-lg); }
        .hero__acties { margin-top: var(--ruimte-3); }
        .hero__eyebrow { margin-bottom: var(--ruimte-2); }

        .hero__tekst { font-size: var(--tekst-normaal); }

        /* Knoppen naast elkaar passen niet; laat ze de breedte delen. */
        .hero__acties .knop { flex: 1 1 auto; justify-content: center; }

        /* Modal vult vrijwel het scherm; een smal kaartje leest hier slecht. */
        .modal {
            width: 100vw;
            max-width: 100vw;
            max-height: 100dvh;
            height: 100dvh;
            border-radius: 0;
        }

        .detail { max-height: 100dvh; }
        .detail__media { min-height: 0; }
        .detail__media img { max-height: 40vh; }
        .detail__lijf { padding: var(--ruimte-4); }
        .detail__specs > div { grid-template-columns: 6.5rem minmax(0, 1fr); }
        .detail__acties .knop { flex: 1 1 auto; justify-content: center; }

        /* Op mobiel is er breedte zat: bedrag weer naast de omschrijving. */
        .verzenden__tarieven li { font-size: var(--tekst-klein); }

        /* Merken: iets kleinere vlakken en een snellere rol op smal scherm. */
        .merken { --merken-duur: 30s; mask-image: linear-gradient(to right, transparent, #000 2rem, #000 calc(100% - 2rem), transparent); }
        .merken__vlak { width: 7.5rem; height: 4.25rem; }
    }

    /* Onder ~26rem (kleine telefoons) wordt één kolom pas echt leesbaar. */
    @media (max-width: 30rem) {
        .raster { grid-template-columns: minmax(0, 1fr); }
        .sectie__kop > .knop { width: 100%; justify-content: center; }
    }
}