/*
 * Rek en Rust — het gezicht van de athleisurewinkel.
 *
 * De stilste van de vijf. Sport verkoopt hier niet op prestatie maar op
 * rust, dus is de opdracht: alles weghalen wat glimt. Geen verloop, geen
 * schaduw die opvalt, geen kleurvlak dat schreeuwt.
 *
 * Wat ervoor in de plaats komt is ritme. De sectiekoppen staan in kleine
 * letters met veel spatiëring, en de hero is een effen kleurvlak zonder
 * enige truc. Dat leest kalm zonder saai te worden, omdat de typografie het
 * werk doet in plaats van het decor.
 */

:root {
    --grond: #FBFAF7;
    --grond-warm: #F4F2EC;
    --grond-diep: #EAE7DE;
    --paneel: #FFFFFF;

    --lijn: #DFDCD2;
    --lijn-zacht: #EBE8E0;
    --lijn-sterk: #C2BEB1;

    /* Nauwelijks schaduw. Wat hier zweeft, hoort niet in dit palet. */
    --schaduw-1: 0 1px 1px rgb(35 37 32 / 0.03);
    --schaduw-2: 0 2px 6px rgb(35 37 32 / 0.05);
    --schaduw-3: 0 6px 18px rgb(35 37 32 / 0.07);
}

/* ─────────────────────────────────────────────────────────────── koppen ── */

h1, h2, h3, .kop-font,
.hero__titel,
.productinfo__titel {
    font-weight: 500;
    letter-spacing: -0.005em;
}

/* Het ritme van dit thema: kleinkapitaal met ruime spatiëring boven elke
   sectie. Het is het enige typografische gebaar op de pagina, en daarom
   werkt het. */
.sectiekop h2,
.sectiekop > *:first-child {
    text-transform: lowercase;
    letter-spacing: 0.22em;
    font-size: var(--tekst-s);
    font-weight: 500;
    color: var(--inkt-gedempt);
}

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

/* Effen. Geen verloop, geen gloed, geen foto eroverheen. */
.hero {
    background: var(--accent);
    color: #F6F5F1;
    border-radius: 0;
    padding-block: clamp(var(--ruimte-12), 8vw, var(--ruimte-24));
}

.hero__titel {
    font-weight: 400;
}

.hero__tekst,
.hero__lijf {
    color: rgb(246 245 241 / 0.86);
}

/* ──────────────────────────────────────────────────────────────── kaart ── */

/* Geen doos: een vlak met een lijn eronder. Bij zweven wordt het vlak iets
   warmer in plaats van dat er iets omhoogkomt. */
.kaart {
    border: 0;
    border-bottom: 1px solid var(--lijn);
    border-radius: 0;
    background: transparent;
}

.kaart:hover {
    background: var(--grond-warm);
    box-shadow: none;
    translate: none;
}

.kaart__beeld {
    background: var(--grond-warm);
    border-radius: var(--radius-m);
}

.kaart__lijf {
    padding-inline: var(--ruimte-1);
}

.kaart__merk {
    text-transform: lowercase;
    letter-spacing: 0.14em;
    font-size: var(--tekst-xs);
}

/* ─────────────────────────────────────────────────────────────── knoppen ── */

.knop {
    text-transform: lowercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}

.knop--hoofd,
.knop--accent,
.knop--vol {
    box-shadow: none;
}

.badge {
    text-transform: lowercase;
    letter-spacing: 0.1em;
    font-weight: 500;
}


/* ═══════════════════════════════════════════════════════ de donkere kant ══

   De basis heeft een donkere modus, en die is neutraal grijszwart. Dat is
   voor de onderlaag de juiste keuze, maar het maakt vijf thema's 's avonds
   inwisselbaar — en dan is de hele skin weg zodra iemands telefoon op donker
   staat.

   Hieronder daarom alleen de tokens die de aardetoon dragen — zwart met groen erin, niet met blauw. De
   selector is precies dezelfde als in de basis: die staat op twee niveaus
   (een klasse plus een pseudo-klasse), en met minder wint hij niet, hoe laat het bestand ook
   geladen wordt.

   Twee blokken en niet één: het eerste geldt als de bezoeker niets gekozen
   heeft en zijn systeem donker staat, het tweede als hij zelf op donker
   klikt. Ze zijn identiek van inhoud, en dat is geen slordigheid maar de
   enige manier: CSS kan een media-query en een attribuutselector niet in
   één regel combineren.
*/

@media (prefers-color-scheme: dark) {
    :root:not([data-thema="licht"]) {
        --grond: #0A0C0A;
        --grond-warm: #101410;
        --grond-diep: #171B16;
        --paneel: #131713;
        --lijn: #232922;
        --lijn-zacht: #1B201A;
        --lijn-sterk: #333A31;
    }
}

:root[data-thema="donker"] {
    --grond: #0A0C0A;
    --grond-warm: #101410;
    --grond-diep: #171B16;
    --paneel: #131713;
    --lijn: #232922;
    --lijn-zacht: #1B201A;
    --lijn-sterk: #333A31;
}

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

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

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