/* =============================================================
   Saint Dutch — sd-core.css
   Ontwerpsysteem "De Draad", v2: drie stemmen (Merk, Boek, Grotesk),
   de draad in de kleur van het echte garen, goud alleen op de koopknop.

   Globale element-resets staan ALLEEN onder .sd-page, zodat de
   legacy styles.css niet breekt. Kleur werkt via context-variabelen
   (--sd-bg, --sd-fg, --sd-accent ...) die elk oppervlak zet; een
   component leest ze en past dus overal.

   1 fonts · 2 tokens · 3 oppervlakken en editiewerelden · 4 basis
   5 typografie · 6 layout · 7 media · 8 knoppen en links
   9 hoofdstuk, scene, draad · 10 kaarten (kaart, tegel, editie, nummer)
   11 koopbalk · 12 formulieren · 13 informatie (accordeon, vertrouwen,
   melding, tabel, specs, stappen, cijfers, tags) · 14 hero en paginakop
   15 utilities · 16 beweging en contrast
   Documentatie en voorbeelden: _dev/styleguide.html
   Wijzigingslogboek v2 voor bouwers: zie de kop van sectie 2.
   ============================================================= */

/* ---------- 1. Fonts (zelf gehost, één bestand per snit) ----------
   Merk     "SD Merk"     Noto Serif, breedte 80, gewicht 640   namen, nummers, prijzen, romeinse cijfers, maatletters
   Boek     "SD Display"  Newsreader opsz 72, 400-500           hero, H1, H2, statements, menu
            "SD Tekst"    Newsreader opsz 18, 400               H3, citaten, accordeons, leestekst
            cursief       Newsreader Italic opsz 40, 420        de fluisterregel ("More knit.")
   Grotesk  "SD Grotesk"  Schibsted Grotesk 400-700             body, UI, labels, knoppen, formulieren, tabellen
   Bron, tekenset en opnieuw bouwen: build/fonts/README.md (subset.py).

   Preload, maximaal twee per pagina, altijd met crossorigin:
   - de shell preloadt alleen /fonts/schibsted-grotesk-wght.woff2;
   - elke pagina zet direct onder <!-- sd:head:end --> één eigen preload:
     /fonts/newsreader-display-wght.woff2 (home, edities, verhaal, journal, informatiepagina's) of
     /fonts/noto-serif-merk-640.woff2 (editiepagina's en kassa). */
@font-face {
  font-family: "SD Grotesk";
  src: url("fonts/schibsted-grotesk-wght.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SD Display";
  src: url("fonts/newsreader-display-wght.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SD Display";
  src: url("fonts/newsreader-italic-420.woff2") format("woff2");
  font-weight: 400 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "SD Tekst";
  src: url("fonts/newsreader-text-400.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SD Tekst";
  src: url("fonts/newsreader-italic-420.woff2") format("woff2");
  font-weight: 400 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "SD Merk";
  src: url("fonts/noto-serif-merk-640.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

/* Metric-compatibele terugvallers: zelfde gemiddelde breedte en regelhoogte als het
   webfont, zodat de swap geen layoutverschuiving geeft. Berekend over 37.358 tekens
   echte sitetekst (ad-opus §1.5). Elke snit heeft een vaste optische maat, dus er zijn
   geen breakpoint-varianten meer nodig. Android-regels zijn berekend, niet op een
   toestel gemeten. */
@font-face {
  font-family: "SD Grotesk Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 103.8%;
  ascent-override: 94.1%;
  descent-override: 24.8%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "SD Grotesk Fallback Android";
  src: local("Roboto"), local("Roboto-Regular");
  size-adjust: 105%;
  ascent-override: 93%;
  descent-override: 24.6%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "SD Display Fallback";
  src: local("Georgia");
  font-style: normal;
  size-adjust: 101.9%;
  ascent-override: 72.1%;
  descent-override: 26%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "SD Display Fallback";
  src: local("Georgia Italic"), local("Georgia-Italic");
  font-style: italic;
  size-adjust: 87.9%;
  ascent-override: 83.6%;
  descent-override: 30.1%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "SD Display Fallback Android";
  src: local("Noto Serif"), local("NotoSerif-Regular");
  font-style: normal;
  size-adjust: 94.8%;
  ascent-override: 77.5%;
  descent-override: 27.9%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "SD Display Fallback Android";
  src: local("Noto Serif Italic"), local("NotoSerif-Italic");
  font-style: italic;
  size-adjust: 85.5%;
  ascent-override: 86%;
  descent-override: 31%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "SD Tekst Fallback";
  src: local("Georgia");
  font-style: normal;
  size-adjust: 91.8%;
  ascent-override: 80.1%;
  descent-override: 28.9%;
  line-gap-override: 0%;
}

/* Het cursieve bestand is voor Display en Tekst hetzelfde, dus ook de terugval */
@font-face {
  font-family: "SD Tekst Fallback";
  src: local("Georgia Italic"), local("Georgia-Italic");
  font-style: italic;
  size-adjust: 87.9%;
  ascent-override: 83.6%;
  descent-override: 30.1%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "SD Tekst Fallback Android";
  src: local("Noto Serif"), local("NotoSerif-Regular");
  font-style: normal;
  size-adjust: 85.4%;
  ascent-override: 86.1%;
  descent-override: 31%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "SD Tekst Fallback Android";
  src: local("Noto Serif Italic"), local("NotoSerif-Italic");
  font-style: italic;
  size-adjust: 85.5%;
  ascent-override: 86%;
  descent-override: 31%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "SD Merk Fallback";
  src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT");
  font-weight: 500 700;
  size-adjust: 93.6%;
  ascent-override: 114.2%;
  descent-override: 31.3%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "SD Merk Fallback Android";
  src: local("Noto Serif Bold"), local("NotoSerif-Bold");
  font-weight: 500 700;
  size-adjust: 88.6%;
  ascent-override: 120.6%;
  descent-override: 33.1%;
  line-gap-override: 0%;
}

/* ---------- 2. Tokens ----------
   v2 (FUNDAMENT, 5 oktober 2026). Volledig logboek: SCRATCH/brief/fundament-tokens.md.
   Nieuw: --sd-font-merk, --sd-fs-read/-price/-name, --sd-lh-*, --sd-ls-*, --sd-w-merk,
   --sd-num-ui/-display, --sd-thread/-deep/-dim, --sd-gold-hover/-active, --sd-stitch(-gap),
   --sd-ease-inout/-ui/-exit, --sd-dur-xs/-step/-m/-reveal/-l/-thread/-exit, --sd-rise,
   --sd-gap-label/-text/-media, --sd-rail-*, --sd-needle(-sm).
   Alias (oude naam, blijft tot de v2-ronde klaar is): --sd-gold-dim = --sd-thread-dim,
   --sd-gold-deep = --sd-thread-deep. --sd-gold blijft #ffbd59: alleen de primaire knop. */
:root {
  /* Inkt en papier */
  --sd-ink: #0e0d0b;
  --sd-ink-2: #171513;
  --sd-ink-3: #232019;
  --sd-paper: #f5f3f1;
  --sd-paper-2: #ebe7e2;
  --sd-paper-3: #dfdad3;

  /* De draad: Pantone 728 C, het echte borduurgaren (8,2:1 op inkt). Lijnen, steken, rail,
     cursieve accenten op donker, links. Op papier is hij alleen decoratief (2,1:1): lijnen
     op licht in --sd-thread-deep (4,1:1). Nooit --sd-thread als tekst op een licht vlak. */
  --sd-thread: #cda077;
  --sd-thread-deep: #907053;
  --sd-thread-dim: rgba(205, 160, 119, 0.55);

  /* Goud vult alleen de primaire knop (conversiebesluit, inkt op goud 11,7:1) */
  --sd-gold: #ffbd59;
  --sd-gold-hover: #ffc76f;
  --sd-gold-active: #f5ad40;

  /* Oude namen, alleen nog als alias: de draad was goud */
  --sd-gold-dim: var(--sd-thread-dim);
  --sd-gold-deep: var(--sd-thread-deep);

  /* Eén steekmaat voor de hele site: rijgsteek 6 px, tussenruimte 4 px */
  --sd-stitch: 6px;
  --sd-stitch-gap: 4px;

  /* Gedempt: --sd-muted voor donker (en grote tekst), --sd-muted-ink voor licht */
  --sd-muted: #a09b95;
  --sd-muted-ink: #5f5a55;

  /* Lijnen: haarlijn (decoratie) en veldrand (>= 3:1) */
  --sd-line-dark: rgba(245, 243, 241, 0.14);
  --sd-line-light: rgba(14, 13, 11, 0.12);
  --sd-line-dark-strong: rgba(245, 243, 241, 0.5);
  --sd-line-light-strong: rgba(14, 13, 11, 0.55);

  /* Zachte tekst en foutkleur, per helderheid (alle AA) */
  --sd-soft-ink: #4a4640;
  --sd-soft-paper: #bdb8b2;
  --sd-danger-ink: #9e3322;
  --sd-danger-paper: #ff9a85;

  /* Sluiers over beeld (tekst op foto) */
  --sd-veil: rgba(14, 13, 11, 0.72);
  --sd-veil-mid: rgba(14, 13, 11, 0.35);
  --sd-veil-soft: rgba(14, 13, 11, 0.12);

  /* Drie stemmen */
  --sd-font-sans: "SD Grotesk", "SD Grotesk Fallback", "SD Grotesk Fallback Android", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --sd-font-display: "SD Display", "SD Display Fallback", "SD Display Fallback Android", Georgia, serif;
  --sd-font-serif: "SD Tekst", "SD Tekst Fallback", "SD Tekst Fallback Android", Georgia, serif;
  --sd-font-merk: "SD Merk", "SD Merk Fallback", "SD Merk Fallback Android", "Times New Roman", serif;

  /* Schaal 390 -> 1440 px */
  --sd-fs-display: clamp(3.5rem, 2.014rem + 6.095vw, 7.5rem);      /* 56 -> 120 */
  --sd-fs-h1: clamp(2.75rem, 1.729rem + 4.19vw, 5.5rem);             /* 44 -> 88 */
  --sd-fs-statement: clamp(2rem, 1.257rem + 3.048vw, 4rem);          /* 32 -> 64 */
  --sd-fs-h2: clamp(1.875rem, 1.364rem + 2.095vw, 3.25rem);          /* 30 -> 52 */
  --sd-fs-h3: clamp(1.375rem, 1.236rem + 0.571vw, 1.75rem);          /* 22 -> 28 */
  --sd-fs-quote: clamp(1.375rem, 1.189rem + 0.762vw, 1.875rem);      /* 22 -> 30 */
  --sd-fs-lead: clamp(1.1875rem, 1.118rem + 0.286vw, 1.375rem);      /* 19 -> 22 */
  --sd-fs-body: clamp(1.0625rem, 1.039rem + 0.095vw, 1.125rem);      /* 17 -> 18 */
  --sd-fs-read: clamp(1.1875rem, 1.118rem + 0.286vw, 1.3125rem);     /* 19 -> 21, leestekst /verhaal */
  --sd-fs-small: 0.9375rem;                                          /* 15 */
  --sd-fs-label: 0.8125rem;                                          /* 13: één labelmaat */
  --sd-fs-eyebrow: var(--sd-fs-label);                               /* oude naam, nu gelijk aan het label */
  --sd-fs-num: clamp(4rem, 2.514rem + 6.095vw, 8rem);                /* 64 -> 128 */
  --sd-fs-stat: clamp(3.5rem, 2.386rem + 4.571vw, 6.5rem);           /* 56 -> 104 */
  --sd-fs-price: clamp(2rem, 1.814rem + 0.762vw, 2.5rem);            /* 32 -> 40 */
  --sd-fs-name: clamp(1.5rem, 1.407rem + 0.381vw, 1.75rem);          /* 24 -> 28, namen op kaarten */

  --sd-lh-display: 0.98;
  --sd-lh-h1: 1.02;
  --sd-lh-statement: 1.06;
  --sd-lh-h2: 1.1;
  --sd-lh-h3: 1.2;
  --sd-lh-quote: 1.35;
  --sd-lh-lead: 1.5;
  --sd-lh-body: 1.6;
  --sd-lh-small: 1.5;
  --sd-lh-label: 1.3;
  --sd-lh-num: 0.9;

  --sd-ls-display: -0.022em;
  --sd-ls-h1: -0.02em;
  --sd-ls-statement: -0.015em;
  --sd-ls-h2: -0.012em;
  --sd-ls-h3: -0.004em;
  --sd-ls-label: 0.1em;
  --sd-ls-btn: 0.01em;
  --sd-ls-caps: 0.04em;      /* Merk-kapitalen vanaf 20 px */
  --sd-ls-caps-s: 0.06em;    /* Merk-kapitalen onder 20 px */
  --sd-ls-num: -0.01em;

  /* Display-gewicht per ondergrond: licht op donker leest zwaarder (sectie 3 zet 440/430) */
  --sd-w-display: 460;
  --sd-w-statement: 450;
  --sd-w-serif: 400;
  --sd-w-merk: 640;
  --sd-w-regular: 400;
  --sd-w-medium: 500;
  --sd-w-strong: 600;

  /* Let op: tabular-nums maakt in Schibsted ook punt, komma en middenpunt cijferbreed ("€6 , 95").
     --sd-num-ui alleen op losse getallen en bedragen (teller, koopbalk, tabelcellen), nooit op een zin. */
  --sd-num-ui: lining-nums tabular-nums;
  --sd-num-display: lining-nums proportional-nums;

  /* Ruimte */
  --sd-gutter: clamp(20px, 5vw, 64px);
  --sd-section: clamp(4rem, 2.514rem + 6.095vw, 8rem);              /* 64 -> 128 (was 88 -> 200) */
  --sd-measure: 36rem;
  --sd-wide: 1280px;
  --sd-gap: clamp(16px, 2.5vw, 32px);
  --sd-gap-lg: clamp(24px, 4vw, 64px);
  /* Ritme binnen een hoofdstuk: label -> statement, statement -> tekst, tekst -> beeld */
  --sd-gap-label: 1.25rem;
  --sd-gap-text: 1.75rem;
  --sd-gap-media: 3rem;
  --sd-s-1: 0.25rem;
  --sd-s-2: 0.5rem;
  --sd-s-3: 0.75rem;
  --sd-s-4: 1rem;
  --sd-s-5: 1.5rem;
  --sd-s-6: 2rem;
  --sd-s-7: 3rem;
  --sd-s-8: 4rem;
  --sd-s-9: 6rem;
  --sd-s-10: 8rem;
  --sd-header-h: 3.5rem;

  /* Beweging: steek voor steek, nooit verend.
     binnenkomen --sd-dur + --sd-ease · draad --sd-dur-thread + --sd-ease-inout
     UI (hover, focus) --sd-dur-s + --sd-ease-ui · weg --sd-dur-exit + --sd-ease-exit
     scroll-gekoppeld: lineair. Herhalingen (steken, blokken) in stappen van --sd-dur-xs. */
  --sd-ease: cubic-bezier(0.2, 0.65, 0.2, 1);
  --sd-ease-inout: cubic-bezier(0.5, 0, 0.2, 1);
  --sd-ease-ui: cubic-bezier(0.3, 0, 0.2, 1);
  --sd-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --sd-dur-xs: 120ms;
  --sd-dur-exit: 160ms;
  --sd-dur-s: 240ms;
  --sd-dur-step: 320ms;
  --sd-dur-m: 480ms;
  --sd-dur-reveal: 700ms;
  --sd-dur: 900ms;
  --sd-dur-l: 1400ms;
  --sd-dur-thread: 2400ms;
  --sd-rise: 12px;

  /* Hoofdstukrail en naald (de engine is van sd-scroll.*; dit zijn de maten en de cijferstijl) */
  --sd-rail-w: 2px;
  --sd-rail-w-lg: 3px;
  --sd-rail-color: var(--sd-thread);
  --sd-rail-track: rgba(205, 160, 119, 0.22);
  --sd-rail-num-font: var(--sd-font-merk);
  --sd-rail-num-size: 0.8125rem;
  --sd-rail-num-weight: var(--sd-w-merk);
  --sd-rail-num-ls: var(--sd-ls-caps-s);
  --sd-rail-num-color: rgba(245, 243, 241, 0.55);
  --sd-rail-num-active: var(--sd-thread);
  --sd-rail-tick: 10px;
  --sd-needle: 14px;
  --sd-needle-sm: 10px;

  /* Vorm: strak, geen schaduw, geen ronde hoeken boven 2px */
  --sd-radius: 2px;

  /* Lagen */
  --sd-z-buybar: 60;
  --sd-z-header: 100;
  --sd-z-cookie: 140;
  --sd-z-menu: 200;
  --sd-z-modal: 300;
  --sd-z-skip: 400;
  --sd-z-rail: 50; /* onder koopbalk, chat, cookiebalk, menu en tas */

  /* Iconen als masker (pijl, chevron, vinkje). Het kruis is een CSS-vorm: .sd-x */
  --sd-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cpath d='M0 5h22M18 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");
  --sd-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");
  --sd-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.5l3.5 3.5L11 1.2' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");

  /* Een rij rijgsteken als achtergrond (horizontaal); gebruik met background-size: 100% <dikte> */
  --sd-stitch-x: repeating-linear-gradient(90deg, currentColor 0 var(--sd-stitch), transparent 0 calc(var(--sd-stitch) + var(--sd-stitch-gap)));
  --sd-stitch-y: repeating-linear-gradient(180deg, currentColor 0 var(--sd-stitch), transparent 0 calc(var(--sd-stitch) + var(--sd-stitch-gap)));
}

/* ---------- 3. Oppervlakken en editiewerelden ----------
   Elk oppervlak zet dezelfde set contextvariabelen. Componenten lezen
   alleen deze set, nooit een vaste kleur.
   --sd-accent       lijnen, steken, draad (op papier de diepe draad)
   --sd-accent-text  accent als tekstkleur (op papier inkt)
   --sd-em           cursieve fluisterregel
   --sd-fill         de primaire knop: altijd goud met inkt, op elke ondergrond en editie */

/* Papier (standaard) */
:root,
.sd-paper,
.sd-paper-2,
.sd-section--paper,
.sd-section--paper-2,
[data-surface="paper"],
[data-surface="paper-2"] {
  --sd-bg: var(--sd-paper);
  --sd-fg: var(--sd-ink);
  --sd-fg-soft: var(--sd-soft-ink);
  --sd-fg-muted: var(--sd-muted-ink);
  --sd-line: var(--sd-line-light);
  --sd-line-strong: var(--sd-line-light-strong);
  --sd-accent: var(--sd-thread-deep);
  --sd-accent-text: var(--sd-ink);
  --sd-fill: var(--sd-gold);
  --sd-fill-hover: var(--sd-gold-hover);
  --sd-fill-active: var(--sd-gold-active);
  --sd-on-fill: var(--sd-ink);
  --sd-focus: var(--sd-ink);
  --sd-em: currentColor;
  --sd-danger: var(--sd-danger-ink);
  --sd-media-bg: var(--sd-paper-2);
  --sd-w-display: 460;
  --sd-w-statement: 450;
  color-scheme: light;
}

.sd-paper-2,
.sd-section--paper-2,
[data-surface="paper-2"] {
  --sd-bg: var(--sd-paper-2);
  --sd-media-bg: var(--sd-paper-3);
}

/* Inkt (donker): de draad mag hier tekst zijn (8,2:1), het gewicht zakt 20 */
.sd-ink,
.sd-ink-2,
.sd-section--ink,
.sd-section--ink-2,
.sd-buybar,
[data-surface="ink"],
[data-surface="ink-2"] {
  --sd-bg: var(--sd-ink);
  --sd-fg: var(--sd-paper);
  --sd-fg-soft: var(--sd-soft-paper);
  --sd-fg-muted: var(--sd-muted);
  --sd-line: var(--sd-line-dark);
  --sd-line-strong: var(--sd-line-dark-strong);
  --sd-accent: var(--sd-thread);
  --sd-accent-text: var(--sd-thread);
  --sd-fill: var(--sd-gold);
  --sd-fill-hover: var(--sd-gold-hover);
  --sd-fill-active: var(--sd-gold-active);
  --sd-on-fill: var(--sd-ink);
  --sd-focus: var(--sd-thread);
  --sd-em: var(--sd-thread);
  --sd-danger: var(--sd-danger-paper);
  --sd-media-bg: var(--sd-ink-3);
  --sd-w-display: 440;
  --sd-w-statement: 430;
  color-scheme: dark;
}

.sd-ink-2,
.sd-section--ink-2,
[data-surface="ink-2"] {
  --sd-bg: var(--sd-ink-2);
}

/* Editiewerelden: [data-edition] zet het palet, .sd-section--edition (en de
   kaarten) nemen het over. Hoofdletters in het attribuut mogen (ORIGIN).
   --ed-fill bestaat niet meer per editie: de handeling is overal goud met inkt. */

/* ORIGIN: inkt met witte draad (zwart, wit borduurwerk) */
[data-edition="origin" i] {
  --ed-bg: #0e0d0b;
  --ed-ink: #f5f3f1;
  --ed-accent: #f5f3f1;
  --ed-muted: #a09b95;
  --ed-soft: #bdb8b2;
  --ed-on-accent: #0e0d0b;
  --ed-line: rgba(245, 243, 241, 0.14);
  --ed-line-strong: rgba(245, 243, 241, 0.5);
  --ed-focus: #f5f3f1;
  --ed-em: #f5f3f1;
  --ed-accent-text: #f5f3f1;
  --ed-danger: #ff9a85;
  --ed-media-bg: #232019;
  --ed-scheme: dark;
  --ed-wd: 440;
  --ed-ws: 430;
}

/* AION: lichtgrijs met de diepe draad (lijnen 3,1:1; tekstaccent in inkt) */
[data-edition="aion" i] {
  --ed-bg: #d6d4d0;
  --ed-ink: #171513;
  --ed-accent: #907053;
  --ed-muted: #57534e;
  --ed-soft: #3d3a36;
  --ed-on-accent: #f5f3f1;
  --ed-line: rgba(23, 21, 19, 0.16);
  --ed-line-strong: rgba(23, 21, 19, 0.6);
  --ed-focus: #171513;
  --ed-em: currentColor;
  --ed-accent-text: #171513;
  --ed-danger: #9e3322;
  --ed-media-bg: #c6c3bd;
  --ed-scheme: light;
  --ed-wd: 460;
  --ed-ws: 450;
}

/* EREBOS: naar de echte stofkleur (Pantone 447 C, neutraal houtskool-olijf), borduurwerk 728 C.
   Papiertekst 14,1:1, draad 6,6:1, gedempt 5,7:1. Het woord ("donkerbruin") kiest de oprichter. */
[data-edition="erebos" i] {
  --ed-bg: #222421;
  --ed-ink: #f5f3f1;
  --ed-accent: #cda077;
  --ed-muted: #a09b95;
  --ed-soft: #bdb8b2;
  --ed-on-accent: #0e0d0b;
  --ed-line: rgba(245, 243, 241, 0.14);
  --ed-line-strong: rgba(245, 243, 241, 0.5);
  --ed-focus: #cda077;
  --ed-em: #cda077;
  --ed-accent-text: #cda077;
  --ed-danger: #ff9a85;
  --ed-media-bg: #2d302c;
  --ed-scheme: dark;
  --ed-wd: 440;
  --ed-ws: 430;
}

/* PHAROS: navy met stormgrijs */
[data-edition="pharos" i] {
  --ed-bg: #232c3a;
  --ed-ink: #ece7de;
  --ed-accent: #b8c4d4;
  --ed-muted: #94a0b2;
  --ed-soft: #c8ced8;
  --ed-on-accent: #161c26;
  --ed-line: rgba(236, 231, 222, 0.16);
  --ed-line-strong: rgba(236, 231, 222, 0.5);
  --ed-focus: #b8c4d4;
  --ed-em: #b8c4d4;
  --ed-accent-text: #b8c4d4;
  --ed-danger: #ff9a85;
  --ed-media-bg: #2d3848;
  --ed-scheme: dark;
  --ed-wd: 440;
  --ed-ws: 430;
}

.sd-section--edition,
.sd-surface-edition,
.sd-page[data-edition],
.sd-edition-card,
.sd-buybar[data-edition] {
  --sd-bg: var(--ed-bg, var(--sd-ink));
  --sd-fg: var(--ed-ink, var(--sd-paper));
  --sd-fg-soft: var(--ed-soft, var(--sd-soft-paper));
  --sd-fg-muted: var(--ed-muted, var(--sd-muted));
  --sd-line: var(--ed-line, var(--sd-line-dark));
  --sd-line-strong: var(--ed-line-strong, var(--sd-line-dark-strong));
  --sd-accent: var(--ed-accent, var(--sd-thread));
  --sd-accent-text: var(--ed-accent-text, var(--sd-thread));
  --sd-fill: var(--sd-gold);
  --sd-fill-hover: var(--sd-gold-hover);
  --sd-fill-active: var(--sd-gold-active);
  --sd-on-fill: var(--sd-ink);
  --sd-focus: var(--ed-focus, var(--sd-thread));
  --sd-em: var(--ed-em, var(--sd-thread));
  --sd-danger: var(--ed-danger, var(--sd-danger-paper));
  --sd-media-bg: var(--ed-media-bg, var(--sd-ink-3));
  --sd-w-display: var(--ed-wd, 440);
  --sd-w-statement: var(--ed-ws, 430);
  color-scheme: var(--ed-scheme, dark);
}

/* ---------- 4. Basis (alleen onder .sd-page) ---------- */
html:has(.sd-page) {
  scroll-padding-top: var(--sd-header-h);
}

@media (prefers-reduced-motion: no-preference) {
  html:has(.sd-page) {
    scroll-behavior: smooth;
  }
}

.sd-page {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--sd-bg);
  color: var(--sd-fg);
  font-family: var(--sd-font-sans);
  font-size: var(--sd-fs-body);
  font-weight: var(--sd-w-regular);
  line-height: var(--sd-lh-body);
  letter-spacing: 0;
  font-kerning: normal;
  font-synthesis: none;
  overflow-wrap: break-word;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

.sd-page *,
.sd-page *::before,
.sd-page *::after {
  box-sizing: border-box;
}

.sd-page :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol, fieldset, hr) {
  margin: 0;
}

.sd-page :where(fieldset) {
  padding: 0;
  border: 0;
  min-width: 0;
}

.sd-page :where(ul, ol)[class] {
  padding: 0;
  list-style: none;
}

.sd-page :where(img, video) {
  display: block;
  max-width: 100%;
  height: auto;
}

.sd-page :where(svg) {
  display: block;
  max-width: 100%;
}

.sd-page :where(a) {
  color: inherit;
  text-decoration: none;
}

.sd-page :where(button, input, select, textarea) {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.sd-page :where(button) {
  cursor: pointer;
}

.sd-page :where(table) {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Koppen: H1 en H2 in Boek Display, H3 in de tekstsnit (alles onder 28 px) */
.sd-page :where(h1, h2) {
  font-family: var(--sd-font-display);
  font-weight: var(--sd-w-statement);
  line-height: var(--sd-lh-h2);
  letter-spacing: var(--sd-ls-h2);
  font-variant-numeric: var(--sd-num-display);
  text-wrap: balance;
}

.sd-page :where(h3) {
  font-family: var(--sd-font-serif);
  font-weight: var(--sd-w-serif);
  line-height: var(--sd-lh-h3);
  letter-spacing: var(--sd-ls-h3);
  text-wrap: balance;
}

.sd-page :where(h4, h5, h6) {
  font-family: var(--sd-font-sans);
  font-size: var(--sd-fs-body);
  font-weight: var(--sd-w-medium);
  line-height: 1.4;
}

.sd-page :where(h1) {
  font-size: var(--sd-fs-h1);
  line-height: var(--sd-lh-h1);
  letter-spacing: var(--sd-ls-h1);
}

.sd-page :where(h2) { font-size: var(--sd-fs-h2); }
.sd-page :where(h3) { font-size: var(--sd-fs-h3); }

.sd-page :where(strong, b) {
  font-weight: var(--sd-w-strong);
}

/* Geen synthetische cursief of vet (font-synthesis: none): nadruk in lopende tekst is gewicht */
.sd-page :where(em, i) {
  font-style: normal;
  font-weight: var(--sd-w-medium);
}

.sd-page :where(hr) {
  height: 0;
  border: 0;
  border-top: 1px solid var(--sd-line);
}

.sd-page :where([id]) {
  scroll-margin-top: var(--sd-header-h);
}

.sd-page [hidden] {
  display: none !important;
}

.sd-page ::selection {
  background: var(--sd-thread);
  color: var(--sd-ink);
}

.sd-page :focus-visible {
  outline: 2px solid var(--sd-focus);
  outline-offset: 3px;
}

.sd-page [data-count-to],
.sd-page .sd-tnum {
  font-variant-numeric: var(--sd-num-ui);
}

/* ---------- 5. Typografie ----------
   Regels per gebruik (ad-opus §1.7):
   hero          Display, --sd-fs-display, max. 2 regels op 390 px, geen text-shadow
   statement/H1/H2  Display, max-width 16em, max. 3 regels op mobiel, balance
   H3/citaat/accordeon  Tekst; citaten met hangende punctuatie
   fluisterregel Cursief 420 in --sd-em, max. één per scherm (.sd-whisper of <em> in een statement)
   editienaam    Merk-kapitalen +0,04 em (onder 20 px +0,06 em), geen ligaturen
   grote cijfers Merk, lining en proportioneel, -0,01 em; eenheid in Grotesk 15/500 na een NBSP
   prijs         groot in Merk ("€149", geen spatie), "incl. btw" in Grotesk 15; in de UI Grotesk 600 tabular
   labels        één stijl: Grotesk 500, 13 px, kapitalen, 0,1 em, case
   knoppen       Grotesk 600, 15 px, zinsletters; 52 px hoog, koopknop 60 px */
.sd-display,
.sd-h1,
.sd-h2 {
  font-family: var(--sd-font-display);
  font-variant-numeric: var(--sd-num-display);
  text-wrap: balance;
}

.sd-display {
  font-size: var(--sd-fs-display);
  font-weight: var(--sd-w-display);
  line-height: var(--sd-lh-display);
  letter-spacing: var(--sd-ls-display);
}

.sd-h1 {
  font-size: var(--sd-fs-h1);
  font-weight: var(--sd-w-display);
  line-height: var(--sd-lh-h1);
  letter-spacing: var(--sd-ls-h1);
}

.sd-h2 {
  font-size: var(--sd-fs-h2);
  font-weight: var(--sd-w-statement);
  line-height: var(--sd-lh-h2);
  letter-spacing: var(--sd-ls-h2);
}

.sd-h3 {
  font-family: var(--sd-font-serif);
  font-size: var(--sd-fs-h3);
  font-weight: var(--sd-w-serif);
  line-height: var(--sd-lh-h3);
  letter-spacing: var(--sd-ls-h3);
  text-wrap: balance;
}

.sd-serif {
  font-family: var(--sd-font-serif);
}

/* De merkstem als hulpklasse: namen, nummers, prijzen buiten de vaste componenten */
.sd-merk {
  font-family: var(--sd-font-merk);
  font-weight: var(--sd-w-merk);
  letter-spacing: var(--sd-ls-num);
  font-variant-numeric: var(--sd-num-display);
  font-variant-ligatures: none;
}

/* Editienaam als losse naam (AION, EREBOS) in de lopende tekst of een rij */
.sd-name {
  font-family: var(--sd-font-merk);
  font-weight: var(--sd-w-merk);
  letter-spacing: var(--sd-ls-caps);
  text-transform: uppercase;
  font-variant-ligatures: none;
}

/* De fluisterregel: cursief 420, in de draadkleur op donker */
.sd-whisper {
  font-family: var(--sd-font-display);
  font-style: italic;
  font-weight: 420;
  color: var(--sd-em);
}

/* Eén labelstijl voor de hele site */
.sd-label {
  font-family: var(--sd-font-sans);
  font-size: var(--sd-fs-label);
  font-weight: var(--sd-w-medium);
  line-height: var(--sd-lh-label);
  letter-spacing: var(--sd-ls-label);
  text-transform: uppercase;
  font-feature-settings: "case";
  color: var(--sd-fg-muted);
}

.sd-label--fg {
  color: var(--sd-fg);
}

.sd-label--accent {
  color: var(--sd-accent-text);
}

/* Vroeger een label met een draadje ervoor; het streepje is geschrapt (geen ornament
   voor elk label). De klasse blijft geldig en lijnt alleen uit. */
.sd-label--rule {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.sd-statement {
  max-width: 16em;
  font-family: var(--sd-font-display);
  font-size: var(--sd-fs-statement);
  font-weight: var(--sd-w-statement);
  line-height: var(--sd-lh-statement);
  letter-spacing: var(--sd-ls-statement);
  font-variant-numeric: var(--sd-num-display);
  text-wrap: balance;
  color: var(--sd-fg);
}

.sd-statement--xl {
  font-size: var(--sd-fs-display);
  font-weight: var(--sd-w-display);
  line-height: var(--sd-lh-display);
  letter-spacing: var(--sd-ls-display);
}

.sd-statement--l {
  font-size: var(--sd-fs-h1);
  font-weight: var(--sd-w-display);
  line-height: var(--sd-lh-h1);
  letter-spacing: var(--sd-ls-h1);
}

.sd-statement--m {
  font-size: var(--sd-fs-h2);
  line-height: var(--sd-lh-h2);
  letter-spacing: var(--sd-ls-h2);
}

.sd-statement--center {
  margin-inline: auto;
  text-align: center;
}

/* Editienaam in kapitalen: ORIGIN, AION, EREBOS, PHAROS. De letter van het logo,
   het borstborduursel en de hangtag. */
.sd-statement--name {
  max-width: none;
  font-family: var(--sd-font-merk);
  font-weight: var(--sd-w-merk);
  line-height: 0.95;
  letter-spacing: var(--sd-ls-caps);
  text-transform: uppercase;
  font-variant-ligatures: none;
}

.sd-statement em,
.sd-quote em,
.sd-h1 em,
.sd-h2 em,
.sd-display em {
  font-style: italic;
  font-weight: inherit;
  color: var(--sd-em);
}

.sd-lead {
  max-width: calc(var(--sd-measure) + 4rem);
  font-size: var(--sd-fs-lead);
  line-height: var(--sd-lh-lead);
  color: var(--sd-fg-soft);
  text-wrap: pretty;
}

.sd-small {
  font-size: var(--sd-fs-small);
  line-height: var(--sd-lh-small);
  color: var(--sd-fg-soft);
  text-wrap: pretty;
}

/* Eenheid achter een groot cijfer: Grotesk 15/500, gedempt, na een NBSP (350&nbsp;g/m²) */
.sd-unit {
  font-family: var(--sd-font-sans);
  font-size: var(--sd-fs-small);
  font-weight: var(--sd-w-medium);
  letter-spacing: 0;
  color: var(--sd-fg-muted);
}

.sd-quote {
  margin: 0;
}

.sd-quote__text {
  max-width: 28em;
  font-family: var(--sd-font-serif);
  font-size: var(--sd-fs-quote);
  font-weight: var(--sd-w-serif);
  line-height: var(--sd-lh-quote);
  letter-spacing: -0.004em;
  text-wrap: balance;
  hanging-punctuation: first last;
  color: var(--sd-fg);
}

/* Hangend aanhalingsteken: Safari doet het zelf (hanging-punctuation); elders schuift .sd-hang de eerste
   regel 0,42 em naar links. Alleen zetten als de tekst echt met een aanhalingsteken (“ of ‘) begint. */
@supports not (hanging-punctuation: first) {
  .sd-hang {
    text-indent: -0.42em;
  }
}

.sd-quote__cite {
  display: block;
  margin-top: var(--sd-s-5);
  font-family: var(--sd-font-sans);
  font-style: normal;
  font-size: var(--sd-fs-label);
  font-weight: var(--sd-w-medium);
  line-height: var(--sd-lh-label);
  letter-spacing: var(--sd-ls-label);
  text-transform: uppercase;
  font-feature-settings: "case";
  color: var(--sd-fg-muted);
}

.sd-quote--rule {
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  border-left: 1px solid var(--sd-accent);
}

/* Lopende tekst: leesbreedte, ritme, draad-opsommingen */
.sd-prose {
  max-width: var(--sd-measure);
  color: var(--sd-fg-soft);
}

.sd-prose p {
  text-wrap: pretty;
}

/* Smalle kolommen en lange samengestelde woorden: op mobiel mag de tekst afbreken */
@media (max-width: 599.98px) {
  .sd-prose,
  .sd-lead {
    hyphens: auto;
    hyphenate-limit-chars: 7 3 3;
  }
}

.sd-prose > * + * {
  margin-top: 1.25em;
}

.sd-prose :where(strong, b),
.sd-prose :where(em, i) {
  color: var(--sd-fg);
}

.sd-prose :where(h2) {
  margin-top: 2.5em;
  font-family: var(--sd-font-serif);
  font-size: var(--sd-fs-h3);
  font-weight: var(--sd-w-serif);
  line-height: var(--sd-lh-h3);
  letter-spacing: var(--sd-ls-h3);
  color: var(--sd-fg);
}

.sd-prose :where(h3) {
  margin-top: 2em;
  font-family: var(--sd-font-sans);
  font-size: var(--sd-fs-body);
  font-weight: var(--sd-w-strong);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--sd-fg);
}

.sd-prose :where(h2, h3) + * {
  margin-top: 0.75em;
}

.sd-prose :where(ul, ol) {
  padding: 0;
  list-style: none;
}

.sd-prose :where(li) {
  position: relative;
  padding-left: 1.75em;
}

.sd-prose :where(li + li) {
  margin-top: 0.6em;
}

/* Opsomming: één steek van 6 px in plaats van een bolletje */
.sd-prose :where(ul > li)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: var(--sd-stitch);
  height: 1.5px;
  background: var(--sd-accent);
}

.sd-prose :where(ol) {
  counter-reset: sd-li;
}

.sd-prose :where(ol > li) {
  counter-increment: sd-li;
}

.sd-prose :where(ol > li)::before {
  content: counter(sd-li, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.2em;
  font-family: var(--sd-font-sans);
  font-size: var(--sd-fs-label);
  font-weight: var(--sd-w-medium);
  letter-spacing: 0.04em;
  font-variant-numeric: var(--sd-num-ui);
  color: var(--sd-fg-muted);
}

.sd-prose :where(blockquote) {
  padding-left: 1.5em;
  border-left: 1px solid var(--sd-accent);
  font-family: var(--sd-font-serif);
  font-size: 1.25em;
  line-height: var(--sd-lh-quote);
  hanging-punctuation: first last;
  color: var(--sd-fg);
}

.sd-prose :where(hr) {
  margin-block: 2.5em;
}

/* Link in lopende tekst: een onderstreping van steken in de draadkleur; bij hover vol */
.sd-prose :where(a):not([class]) {
  color: var(--sd-fg);
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-color: var(--sd-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  transition: text-decoration-color var(--sd-dur-s) var(--sd-ease-ui);
}

.sd-prose :where(a):not([class]):hover,
.sd-prose :where(a):not([class]):focus-visible {
  text-decoration-style: solid;
}

.sd-prose :where(table) {
  width: 100%;
  font-size: var(--sd-fs-small);
  font-variant-numeric: lining-nums;
}

.sd-prose :where(th, td) {
  padding: 0.85em 0.75em 0.85em 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--sd-line);
}

.sd-prose :where(th) {
  font-weight: var(--sd-w-medium);
  color: var(--sd-fg);
}

/* ---------- 6. Layout ---------- */
.sd-container {
  width: min(100% - 2 * var(--sd-gutter), var(--sd-wide));
  margin-inline: auto;
}

.sd-container--narrow {
  width: min(100% - 2 * var(--sd-gutter), 52rem);
}

.sd-container--text {
  width: min(100% - 2 * var(--sd-gutter), var(--sd-measure));
}

.sd-container--bleed {
  width: 100%;
}

.sd-section {
  position: relative;
  padding-block: var(--sd-section);
  background: var(--sd-bg);
  color: var(--sd-fg);
}

.sd-section--tight {
  padding-block: calc(var(--sd-section) * 0.5);
}

.sd-section--flush {
  padding-block: 0;
}

.sd-stack {
  --_stack: 1.5rem;
}

.sd-stack > * + * {
  margin-top: var(--_stack);
}

.sd-stack--s { --_stack: 0.75rem; }
.sd-stack--l { --_stack: 2.5rem; }
.sd-stack--xl { --_stack: clamp(3rem, 7vw, 5.5rem); }

.sd-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

.sd-cluster--center { justify-content: center; }
.sd-cluster--between { justify-content: space-between; }
.sd-cluster--end { justify-content: flex-end; }

.sd-grid {
  display: grid;
  gap: var(--sd-gap);
  grid-template-columns: minmax(0, 1fr);
}

.sd-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.sd-grid--gap-lg {
  gap: var(--sd-gap-lg);
}

@media (min-width: 600px) {
  .sd-grid--2,
  .sd-grid--3,
  .sd-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .sd-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .sd-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.sd-split {
  display: grid;
  gap: var(--sd-gap-lg);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 900px) {
  .sd-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sd-split--center { align-items: center; }
  .sd-split--reverse > :first-child { order: 2; }
  .sd-split--sticky > :first-child {
    position: sticky;
    top: calc(var(--sd-header-h) + var(--sd-s-5));
  }
}

.sd-rule {
  display: block;
  width: 100%;
  height: 1px;
  border: 0;
  background: var(--sd-line);
}

/* ---------- 7. Media ---------- */
.sd-media {
  position: relative;
  overflow: hidden;
  background: var(--sd-media-bg);
}

.sd-media > img,
.sd-media > video,
.sd-media > picture,
.sd-media > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sd-media--4x5 { aspect-ratio: 4 / 5; }
.sd-media--3x4 { aspect-ratio: 3 / 4; }
.sd-media--2x3 { aspect-ratio: 2 / 3; }
.sd-media--1x1 { aspect-ratio: 1 / 1; }
.sd-media--16x9 { aspect-ratio: 16 / 9; }
.sd-media--21x9 { aspect-ratio: 21 / 9; }

.sd-media--contain > img,
.sd-media--contain > video {
  object-fit: contain;
}

/* Eerlijk gelabeld beeld: "Borduurproef", "Ontwerp", "Studiofoto" */
.sd-media__tag {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.55rem 0.9rem;
  background: var(--sd-veil);
  color: var(--sd-paper);
  font-family: var(--sd-font-sans);
  font-size: var(--sd-fs-label);
  font-weight: var(--sd-w-medium);
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.sd-media__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--sd-s-5);
  text-align: center;
  font-family: var(--sd-font-sans);
  font-size: var(--sd-fs-label);
  font-weight: var(--sd-w-medium);
  line-height: var(--sd-lh-label);
  letter-spacing: var(--sd-ls-label);
  text-transform: uppercase;
  font-feature-settings: "case";
  color: var(--sd-fg-muted);
}

.sd-media__placeholder::before {
  content: "";
  position: absolute;
  inset: clamp(0.75rem, 2vw, 1.25rem);
  border: 1px dashed var(--sd-line-strong);
  pointer-events: none;
}

.sd-figure {
  margin: 0;
}

/* Bijschrift: 13 px in zinsletters, gedempt ("Borduurproef", "Ontwerp" als eerste regel onder het beeld) */
.sd-figure > figcaption,
.sd-media__caption {
  margin-top: var(--sd-s-3);
  font-family: var(--sd-font-sans);
  font-size: var(--sd-fs-label);
  font-weight: var(--sd-w-regular);
  letter-spacing: 0.01em;
  line-height: 1.45;
  color: var(--sd-fg-muted);
}

/* ---------- 8. Knoppen en links ----------
   Knoppen: Grotesk 600, 15 px, zinsletters; 52 px hoog (--lg 60, --sm 44), hoeken 0.
   Primair = goud met inkt, de koopknop: met een muis lichter goud plus een binnensteek
   (6/4, 4 px binnen de rand) in 240 ms; ingedrukt 1 px omlaag en donkerder goud in 120 ms;
   de focusring in --sd-fg (goud op goud is onzichtbaar). Ghost: 1 px --sd-line-strong. */
.sd-btn {
  --_bg: transparent;
  --_fg: var(--sd-fg);
  --_bd: var(--sd-line-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  min-height: 3.25rem;
  padding: 0.5rem 1.75rem;
  border: 1px solid var(--_bd);
  border-radius: 0;
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--sd-font-sans);
  font-size: 0.9375rem;
  font-weight: var(--sd-w-strong);
  line-height: 1.2;
  letter-spacing: var(--sd-ls-btn);
  font-variant-numeric: lining-nums;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
  transition:
    background-color var(--sd-dur-s) var(--sd-ease-ui),
    border-color var(--sd-dur-s) var(--sd-ease-ui),
    color var(--sd-dur-s) var(--sd-ease-ui),
    opacity var(--sd-dur-s) var(--sd-ease-ui),
    translate var(--sd-dur-xs) var(--sd-ease-ui);
}

/* De binnensteek: vier rijen rijgsteken, 4 px binnen de rand, in de tekstkleur van de knop */
.sd-btn::before {
  content: "";
  position: absolute;
  inset: 4px;
  opacity: 0;
  pointer-events: none;
  background:
    var(--sd-stitch-x) left top / 100% 1px no-repeat,
    var(--sd-stitch-x) left bottom / 100% 1px no-repeat,
    var(--sd-stitch-y) left top / 1px 100% no-repeat,
    var(--sd-stitch-y) right top / 1px 100% no-repeat;
  transition: opacity var(--sd-dur-s) var(--sd-ease-ui);
}

.sd-btn:focus-visible::before {
  opacity: 0.5;
}

.sd-btn:active {
  translate: 0 1px;
}

.sd-btn--primary {
  --_bg: var(--sd-fill);
  --_fg: var(--sd-on-fill);
  --_bd: var(--sd-fill);
}

.sd-btn--primary:active {
  --_bg: var(--sd-fill-active, var(--sd-fill));
  --_bd: var(--sd-fill-active, var(--sd-fill));
  transition-duration: var(--sd-dur-xs);
}

.sd-btn--primary:focus-visible {
  outline-color: var(--sd-fg);
}

.sd-btn--ghost {
  --_bd: var(--sd-line-strong);
}

.sd-btn--ghost:focus-visible {
  --_bd: var(--sd-fg);
}

@media (hover: hover) {
  .sd-btn:hover::before {
    opacity: 0.5;
  }

  .sd-btn--primary:hover {
    --_bg: var(--sd-fill-hover, var(--sd-fill));
    --_bd: var(--sd-fill-hover, var(--sd-fill));
  }

  .sd-btn--ghost:hover {
    --_bd: var(--sd-fg);
  }
}

.sd-btn--sm {
  min-height: 2.75rem;
  padding: 0.35rem 1.5rem;
  font-size: 0.875rem;
}

.sd-btn--lg {
  min-height: 3.75rem;
  padding: 0.5rem 2.25rem;
}

.sd-btn--block {
  display: flex;
  width: 100%;
}

.sd-btn[disabled],
.sd-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Wachten (aria-busy="true"): de lopende steeklijn staat in sd-scroll.css (MOTION) en gebruikt ::before */

.sd-btn--arrow::after,
.sd-link--arrow::after {
  content: "";
  flex: none;
  width: 1.5em;
  height: 0.65em;
  background: currentColor;
  -webkit-mask: var(--sd-icon-arrow) center / contain no-repeat;
  mask: var(--sd-icon-arrow) center / contain no-repeat;
  transition: transform var(--sd-dur-s) var(--sd-ease-ui);
}

.sd-btn--arrow:focus-visible::after,
.sd-link--arrow:focus-visible::after {
  transform: translateX(4px);
}

@media (hover: hover) {
  .sd-btn--arrow:hover::after,
  .sd-link--arrow:hover::after {
    transform: translateX(4px);
  }
}

/* Steek-onderstreping (tekstknop en link): in rust rijgsteken van 6/4 in --sd-accent; met een
   muis groeit er in 450 ms een volle draad overheen (terug in 250 ms); op touch direct vol bij :active. */
.sd-btn--text,
.sd-link {
  background-image:
    linear-gradient(var(--sd-accent), var(--sd-accent)),
    repeating-linear-gradient(90deg, var(--sd-accent) 0 var(--sd-stitch), transparent 0 calc(var(--sd-stitch) + var(--sd-stitch-gap)));
  background-repeat: no-repeat, no-repeat;
  background-position: 0 100%, 0 100%;
  background-size: 0 1px, 100% 1px;
  transition: background-size 250ms var(--sd-ease-exit), opacity var(--sd-dur-s) var(--sd-ease-ui);
}

.sd-btn--text:focus-visible,
.sd-btn--text:active,
.sd-link:focus-visible,
.sd-link:active {
  background-size: 100% 1px, 100% 1px;
}

@media (hover: hover) {
  .sd-btn--text:hover,
  .sd-link:hover {
    background-size: 100% 1px, 100% 1px;
    transition: background-size 450ms var(--sd-ease), opacity var(--sd-dur-s) var(--sd-ease-ui);
  }
}

/* Tekstknop: geen vlak, wel de draad eronder. Het tikvlak loopt onzichtbaar 6 px boven en
   onder door (samen minstens 44 px), zodat de draad dicht onder de tekst blijft. */
.sd-btn--text {
  --_bd: transparent;
  min-height: 0;
  padding: 0.4rem 0 0.55rem;
  border-width: 0;
  background-color: transparent;
}

.sd-btn--text::before {
  inset: -0.375rem 0;
  opacity: 0;
  background: none;
}

/* Link met draad-onderstreping */
.sd-link {
  display: inline;
  padding-bottom: 0.3em;
  color: inherit;
  text-decoration: none;
}

.sd-link--arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
}

/* ---------- 9. Hoofdstuk, scene, draad ---------- */
.sd-chapter {
  position: relative;
  padding-block: var(--sd-section);
  background: var(--sd-bg);
  color: var(--sd-fg);
}

.sd-chapter__inner {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  grid-template-columns: minmax(0, 1fr);
  width: min(100% - 2 * var(--sd-gutter), var(--sd-wide));
  margin-inline: auto;
}

/* Hoofdstuklabel: romeins cijfer in Merk, dan het label. Geen lange lijn erachter:
   de naad tussen hoofdstukken (sd-scroll.css) doet de scheiding. */
.sd-chapter__label {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.sd-chapter__no {
  font-family: var(--sd-font-merk);
  font-size: 1.125rem;
  font-weight: var(--sd-w-merk);
  letter-spacing: var(--sd-ls-caps-s);
  font-variant-numeric: var(--sd-num-display);
  font-variant-ligatures: none;
  text-transform: none;
  line-height: 1;
  color: var(--sd-fg);
}

.sd-chapter__statement {
  margin: 0;
}

.sd-chapter__body {
  margin: 0;
}

.sd-chapter__media {
  margin: 0;
}

/* Het verticale stippellijntje onder elk hoofdstuk (.sd-chapter::after) is vervallen:
   de naad tussen hoofdstukken staat in sd-scroll.css (.sd-chapter + .sd-chapter::before).
   .sd-chapter--no-thread blijft geldig als markering voor "geen naad". */

/* Hoofdstuk om een scene of een beeld over de volle breedte: geen eigen ruimte */
.sd-chapter--flush {
  padding-block: 0;
}

@media (min-width: 900px) {
  .sd-chapter__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--sd-gap-lg);
    row-gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }

  .sd-chapter__label { grid-column: 1 / -1; }
  .sd-chapter__statement { grid-column: 1 / span 9; }
  .sd-chapter__body { grid-column: 6 / span 6; }

  .sd-chapter--media-left .sd-chapter__media {
    grid-column: 1 / span 5;
    grid-row: 2 / span 2;
  }

  .sd-chapter--media-left .sd-chapter__statement,
  .sd-chapter--media-left .sd-chapter__body {
    grid-column: 7 / -1;
  }

  .sd-chapter--media-right .sd-chapter__media {
    grid-column: 8 / -1;
    grid-row: 2 / span 2;
  }

  .sd-chapter--media-right .sd-chapter__statement {
    grid-column: 1 / span 7;
  }

  .sd-chapter--media-right .sd-chapter__body {
    grid-column: 1 / span 6;
  }
}

/* Scene: een hoge sectie met een vastgepinde stage. De scroll-engine (sd-scroll.css,
   .sd-scene.is-ready) pint de stage en wisselt de stappen. Hier staat de rustpositie:
   zonder script, met verminderde beweging en in print staan de stappen gewoon onder
   elkaar, volledig leesbaar. */
.sd-scene {
  position: relative;
  background: var(--sd-bg);
  color: var(--sd-fg);
}

.sd-stage {
  position: relative;
  display: grid;
  gap: var(--sd-s-8);
  padding-block: var(--sd-section);
}

.sd-stage__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--sd-media-bg);
}

.sd-stage__bg > img,
.sd-stage__bg > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sd-stage__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--sd-veil), var(--sd-veil-soft) 55%, var(--sd-veil-mid)),
    linear-gradient(90deg, var(--sd-veil-mid), transparent 70%);
}

.sd-step {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: var(--sd-s-5);
  width: min(100% - 2 * var(--sd-gutter), var(--sd-wide));
  margin-inline: auto;
}

.sd-stage .sd-label,
.sd-hero .sd-label {
  color: var(--sd-fg-soft);
}

/* Gepind door de engine: de stage vult zelf de hele hoogte */
@media (prefers-reduced-motion: no-preference) {
  .sd-js .sd-scene.is-ready .sd-stage {
    gap: 0;
    padding-block: 0;
  }
}

/* De draad: een gouden lijn. In rust een rij rijgsteken. Tekent de engine hem
   ([data-thread], --thread-progress) dan is hij massief, anders knijpen de steken
   samen. Als svg: <svg class="sd-thread-path"><path data-thread d="..."/></svg> */
.sd-thread {
  display: block;
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  color: var(--sd-accent);
  background: var(--sd-stitch-x);
}

.sd-thread[data-thread] {
  background: currentColor;
}

.sd-thread--short {
  width: 3rem;
}

.sd-thread--v {
  width: 1px;
  height: var(--sd-thread-len, 5rem);
  background: var(--sd-stitch-y);
}

.sd-thread--solid {
  background: currentColor;
}

.sd-thread-path {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  color: var(--sd-accent);
}

.sd-thread-path path,
.sd-thread-path line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* ---------- 10. Kaarten ---------- */
.sd-card {
  padding-top: var(--sd-s-5);
  border-top: 1px solid var(--sd-line-strong);
}

.sd-card__title {
  margin-bottom: var(--sd-s-3);
  font-family: var(--sd-font-serif);
  font-size: var(--sd-fs-h3);
  font-weight: var(--sd-w-serif);
  line-height: var(--sd-lh-h3);
  letter-spacing: var(--sd-ls-h3);
}

.sd-card__text {
  color: var(--sd-fg-soft);
}

.sd-card--box {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--sd-line);
}

/* Tegel: beeld, label, titel, korte tekst. Voor journal en verwante pagina's */
.sd-tile {
  display: grid;
  gap: var(--sd-s-4);
  align-content: start;
  color: inherit;
  text-decoration: none;
}

.sd-tile__media > img {
  transition: transform 1.4s var(--sd-ease);
}

.sd-tile:hover .sd-tile__media > img {
  transform: scale(1.03);
}

.sd-tile__title {
  width: fit-content;
  margin: 0;
  padding-bottom: 0.15em;
  font-family: var(--sd-font-serif);
  font-size: var(--sd-fs-h3);
  font-weight: var(--sd-w-serif);
  line-height: var(--sd-lh-h3);
  letter-spacing: var(--sd-ls-h3);
  background-image: linear-gradient(var(--sd-accent), var(--sd-accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size var(--sd-dur) var(--sd-ease);
}

.sd-tile:hover .sd-tile__title,
.sd-tile:focus-visible .sd-tile__title {
  background-size: 100% 1px;
}

.sd-tile__text {
  margin: 0;
  font-size: var(--sd-fs-small);
  line-height: 1.6;
  color: var(--sd-fg-soft);
}

/* Editiekaart: een eigen kleurwereld per editie, rustig als een kleurstaal.
   Naam in Merk 24-28 px, prijs in Merk 18 px ("incl. btw" in Grotesk 13 px),
   status als tekst met een vierkantje, nooit in een kader. */
.sd-edition-card {
  position: relative;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  overflow: hidden;
  background: var(--sd-bg);
  color: var(--sd-fg);
  text-decoration: none;
}

.sd-edition-card:focus-visible {
  outline-offset: 4px;
}

.sd-edition-card__media {
  width: 100%;
}

.sd-edition-card__media > img {
  transition: transform 1600ms var(--sd-ease);
}

.sd-edition-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sd-s-3);
  padding: 1.25rem 1.5rem 1.5rem;
}

.sd-edition-card__no {
  margin: 0;
}

.sd-edition-card__name {
  margin: 0;
  font-family: var(--sd-font-merk);
  font-size: var(--sd-fs-name);
  font-weight: var(--sd-w-merk);
  line-height: 1;
  letter-spacing: var(--sd-ls-caps);
  text-transform: uppercase;
  font-variant-ligatures: none;
}

/* Vier steken onder de naam; met een muis groeit de draad in 600 ms tot de volle breedte */
.sd-edition-card__name::after {
  content: "";
  display: block;
  width: calc(4 * var(--sd-stitch) + 3 * var(--sd-stitch-gap));
  height: 1.5px;
  margin-top: 0.85rem;
  color: var(--sd-accent);
  background: var(--sd-stitch-x);
  transition: width 600ms var(--sd-ease);
}

.sd-edition-card:focus-visible .sd-edition-card__name::after {
  width: 100%;
}

/* Alleen met een muis: het beeld komt een fractie dichterbij, de steek groeit. Op touch niets. */
@media (hover: hover) and (pointer: fine) {
  .sd-edition-card:hover .sd-edition-card__media > img {
    transform: scale(1.035);
  }

  .sd-edition-card:hover .sd-edition-card__name::after {
    width: 100%;
  }
}

.sd-edition-card__claim {
  flex: 1;
  margin: 0;
  font-size: var(--sd-fs-small);
  line-height: var(--sd-lh-small);
  color: var(--sd-fg-soft);
}

.sd-edition-card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  min-height: 3.5rem;
  gap: var(--sd-s-4);
  margin: var(--sd-s-2) 0 0;
  padding-top: var(--sd-s-4);
  border-top: 1px solid var(--sd-line);
}

.sd-edition-card__price {
  font-family: var(--sd-font-merk);
  font-size: 1.125rem;
  font-weight: var(--sd-w-merk);
  letter-spacing: var(--sd-ls-num);
  font-variant-numeric: var(--sd-num-display);
}

.sd-edition-card__vat,
.sd-edition-card__price small {
  margin-left: 0.4em;
  font-family: var(--sd-font-sans);
  font-size: var(--sd-fs-label);
  font-weight: var(--sd-w-regular);
  letter-spacing: 0;
  color: var(--sd-fg-muted);
}

/* Status: een woord en een vierkantje van 6 px (vol = beschikbaar, omlijnd = binnenkort).
   Zelfde vorm als .sd-status en het menu. */
.sd-edition-card__status,
.sd-status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--sd-font-sans);
  font-size: var(--sd-fs-label);
  font-weight: var(--sd-w-medium);
  letter-spacing: 0.01em;
  line-height: 1.4;
  text-transform: none;
  color: var(--sd-fg-muted);
}

.sd-edition-card__status::before,
.sd-status::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border: 1px solid currentColor;
}

.sd-edition-card__status[data-status="available"],
.sd-edition-card__status[data-toon="laatste"],
.sd-status[data-status="available"],
.sd-status--available {
  color: var(--sd-fg);
}

.sd-edition-card__status[data-status="available"]::before,
.sd-edition-card__status[data-toon="laatste"]::before,
.sd-status[data-status="available"]::before,
.sd-status--available::before {
  border-color: var(--sd-accent);
  background: var(--sd-accent);
}

/* Nummerkaart: "Saint #013", het stuk dat bij je blijft. Een kaartje op papier-2 met één
   effen rand, op elke ondergrond: "Saint" klein in de merkletter, het nummer groot in Merk
   (38% van de kaartbreedte, het vult ±65% ervan), één korte steek (zes streepjes) eronder
   en één onderschrift. Een tweede kop-item (op order-success "AION · M") staat rechts in de
   labelstijl; voorbeeldkaarten hebben er geen ("Voorbeeld" staat in het onderschrift).
   data-reveal="embroider" (sd-motion.js) borduurt het nummer; ::after van __no is de steek. */
.sd-number-card {
  --sd-bg: var(--sd-paper-2);
  --sd-fg: var(--sd-ink);
  --sd-fg-soft: var(--sd-soft-ink);
  --sd-fg-muted: var(--sd-muted-ink);
  --sd-line: var(--sd-line-light);
  --sd-line-strong: var(--sd-line-light-strong);
  --sd-accent: var(--sd-thread-deep);
  --sd-accent-text: var(--sd-ink);
  --sd-focus: var(--sd-ink);
  --sd-em: currentColor;
  --sd-media-bg: var(--sd-paper-3);
  color-scheme: light;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sd-s-5);
  width: min(100%, 22rem);
  aspect-ratio: 5 / 6;
  padding: clamp(1.25rem, 4vw, 1.75rem);
  background: var(--sd-bg);
  color: var(--sd-fg);
  border: 1px solid var(--sd-line);
  container-type: inline-size;
}

.sd-number-card__head,
.sd-number-card__foot {
  position: relative;
}

.sd-number-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sd-s-4);
}

.sd-number-card__head > :first-child {
  font-family: var(--sd-font-merk);
  font-size: 1rem;
  font-weight: var(--sd-w-merk);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: none;
  font-feature-settings: normal;
  color: var(--sd-fg);
}

.sd-number-card__head > :not(:first-child) {
  font-family: var(--sd-font-sans);
  font-size: var(--sd-fs-label);
  font-weight: var(--sd-w-medium);
  line-height: var(--sd-lh-label);
  letter-spacing: var(--sd-ls-label);
  text-align: right;
  text-transform: uppercase;
  font-feature-settings: "case";
  color: var(--sd-fg-muted);
}

.sd-number-card__no {
  position: relative;
  margin: 0;
  font-family: var(--sd-font-merk);
  font-size: clamp(3rem, 38cqi, 8rem);
  font-weight: var(--sd-w-merk);
  line-height: var(--sd-lh-num);
  letter-spacing: var(--sd-ls-num);
  font-variant-numeric: lining-nums tabular-nums;
  font-variant-ligatures: none;
  text-align: center;
  white-space: nowrap;
  color: var(--sd-fg);
}

.sd-number-card__no::after {
  content: "";
  display: block;
  width: calc(6 * var(--sd-stitch) + 5 * var(--sd-stitch-gap));
  height: 2px;
  margin: 0.3em auto 0;
  color: var(--sd-accent);
  background: var(--sd-stitch-x);
}

.sd-number-card__hash {
  margin-right: 0.04em;
  font-size: 0.42em;
  letter-spacing: 0;
  vertical-align: 0.95em;
  color: var(--sd-accent);
}

.sd-number-card__foot {
  display: grid;
  gap: var(--sd-s-2);
  justify-items: center;
  text-align: center;
}

.sd-number-card__note {
  margin: 0;
  font-size: var(--sd-fs-small);
  line-height: var(--sd-lh-small);
  text-wrap: balance;
  color: var(--sd-fg-soft);
}

/* ---------- 11. Koopbalk (alleen visueel) ----------
   Gedrag doet de scroll-engine: data-sd-buybar-after="#hoofd-cta" toont hem zodra dat
   element voorbij is, data-sd-buybar-until="#footer" haalt hem weg. Zonder script
   (of als de engine uitvalt) staat de balk er gewoon: de CTA is er dan altijd.
   64 px plus de safe area; naam in Merk 15 px, prijs in Grotesk 14 px tabular, knop 48 px. */
.sd-buybar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--sd-z-buybar);
  padding: 0.5rem var(--sd-gutter) calc(0.5rem + env(safe-area-inset-bottom, 0px));
  background: var(--sd-bg);
  color: var(--sd-fg);
  border-top: 1px solid var(--sd-line);
}

.sd-buybar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sd-s-4);
  width: 100%;
  max-width: var(--sd-wide);
  min-height: 3rem;
  margin-inline: auto;
}

.sd-buybar__info {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.sd-buybar__name {
  font-family: var(--sd-font-merk);
  font-size: 0.9375rem;
  font-weight: var(--sd-w-merk);
  letter-spacing: var(--sd-ls-caps-s);
  line-height: 1.15;
  text-transform: uppercase;
  font-variant-ligatures: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sd-buybar__meta {
  overflow: hidden;
  font-size: 0.875rem;
  line-height: 1.3;
  font-variant-numeric: lining-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sd-fg-soft);
}

.sd-buybar .sd-btn {
  flex: none;
  min-height: 3rem;
  padding-inline: 1.25rem;
}

/* ---------- 12. Formulieren ---------- */
.sd-form {
  display: grid;
  gap: var(--sd-s-6);
  max-width: 36rem;
}

.sd-form--inline {
  max-width: 40rem;
}

@media (min-width: 600px) {
  .sd-form--inline {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

.sd-form > .sd-btn:not(.sd-btn--block) {
  justify-self: start;
}

.sd-field {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.sd-field > legend {
  padding: 0;
}

.sd-field__label {
  font-family: var(--sd-font-sans);
  font-size: var(--sd-fs-label);
  font-weight: var(--sd-w-medium);
  line-height: var(--sd-lh-label);
  letter-spacing: var(--sd-ls-label);
  text-transform: uppercase;
  font-feature-settings: "case";
  color: var(--sd-fg-muted);
}

.sd-field__hint,
.sd-field__error,
.sd-form__note {
  font-size: var(--sd-fs-small);
  line-height: var(--sd-lh-small);
  color: var(--sd-fg-muted);
}

/* Fout: 15/500 met een rode streep van 2 px links; verschijnt rustig, schudt nooit */
.sd-field__error {
  padding-left: 0.65rem;
  border-left: 2px solid var(--sd-danger);
  font-weight: var(--sd-w-medium);
  color: var(--sd-danger);
  animation: sd-fade-in 200ms var(--sd-ease-ui);
}

.sd-field__error:empty {
  display: none;
}

/* Veld: 52 px hoog, 16 px tekst (geen zoom op iOS), rand 1 px op 3,5% vulling */
.sd-input {
  display: block;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--sd-line-strong);
  border-radius: 0;
  background: transparent;
  background-color: color-mix(in srgb, var(--sd-fg) 3.5%, transparent);
  color: var(--sd-fg);
  font-family: var(--sd-font-sans);
  font-size: 1rem;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 160ms var(--sd-ease-ui), outline-color 160ms var(--sd-ease-ui);
}

/* Placeholder: vaste mengverhouding met de achtergrond, op elk palet >= 4,5:1 (ook op de vulling) */
.sd-input::placeholder {
  color: var(--sd-fg-muted);
  color: color-mix(in srgb, var(--sd-fg) 68%, var(--sd-bg));
  opacity: 1;
}

.sd-input:hover {
  border-color: var(--sd-fg);
}

/* Focus: de rand kleurt mee en een ring van 2 px (de bestaande focuskleur) omsluit het hele veld */
.sd-input:focus {
  border-color: var(--sd-focus);
}

.sd-input:focus,
.sd-input:focus-visible {
  outline: 2px solid var(--sd-focus);
  outline-offset: 2px;
}

.sd-input[aria-invalid="true"],
.sd-input.is-invalid,
.sd-input[aria-invalid="true"]:hover,
.sd-input[aria-invalid="true"]:focus {
  border-color: var(--sd-danger);
}

.sd-input[aria-invalid="true"]:focus,
.sd-input.is-invalid:focus {
  outline-color: var(--sd-danger);
}

.sd-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sd-input:-webkit-autofill,
.sd-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--sd-fg);
  -webkit-box-shadow: 0 0 0 100px var(--sd-bg) inset;
  caret-color: var(--sd-fg);
}

textarea.sd-input {
  min-height: 7.5rem;
  line-height: 1.6;
  resize: vertical;
}

.sd-input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.sd-input[type="number"]::-webkit-outer-spin-button,
.sd-input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

select.sd-input {
  padding-right: 2.5rem;
  cursor: pointer;
}

.sd-select {
  position: relative;
}

.sd-select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.95rem;
  width: 0.7rem;
  height: 0.4rem;
  margin-top: -0.2rem;
  background: var(--sd-fg);
  -webkit-mask: var(--sd-icon-chevron) center / contain no-repeat;
  mask: var(--sd-icon-chevron) center / contain no-repeat;
  pointer-events: none;
}

.sd-check {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  font-size: var(--sd-fs-small);
  line-height: 1.55;
  color: var(--sd-fg-soft);
  cursor: pointer;
}

.sd-check > input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.sd-check__box {
  position: relative;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
  border: 1px solid var(--sd-line-strong);
  background: transparent;
  transition: background-color var(--sd-dur-s) var(--sd-ease), border-color var(--sd-dur-s) var(--sd-ease);
}

.sd-check__box::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--sd-bg);
  -webkit-mask: var(--sd-icon-check) center / contain no-repeat;
  mask: var(--sd-icon-check) center / contain no-repeat;
  opacity: 0;
  transition: opacity var(--sd-dur-s) var(--sd-ease);
}

.sd-check:hover .sd-check__box {
  border-color: var(--sd-fg);
}

.sd-check > input:checked + .sd-check__box {
  border-color: var(--sd-fg);
  background: var(--sd-fg);
}

.sd-check > input:checked + .sd-check__box::after {
  opacity: 1;
}

.sd-check > input:focus-visible + .sd-check__box {
  outline: 2px solid var(--sd-focus);
  outline-offset: 3px;
}

/* Keuzerondje zonder rondje: het merk kent geen cirkels. Een gekozen optie toont een
   gevuld vierkantje in plaats van een vinkje. */
.sd-check > input[type="radio"]:checked + .sd-check__box {
  background: transparent;
}

.sd-check > input[type="radio"] + .sd-check__box::after {
  inset: 4px;
  background: var(--sd-fg);
  -webkit-mask: none;
  mask: none;
}

/* Maatkeuze: een rij vierkantjes, één gekozen */
.sd-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sd-choice {
  position: relative;
  display: block;
  cursor: pointer;
}

.sd-choice > input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* Maatletters in de merkletter; gekozen = inktvulling in 160 ms (de maat-steek eronder is van sd-scroll) */
.sd-choice__label {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 3.5rem;
  min-height: 3.25rem;
  padding: 0 0.9rem;
  border: 1px solid var(--sd-line-strong);
  font-family: var(--sd-font-merk);
  font-size: 1rem;
  font-weight: var(--sd-w-merk);
  line-height: 1;
  letter-spacing: var(--sd-ls-caps-s);
  font-variant-ligatures: none;
  text-transform: uppercase;
  color: var(--sd-fg);
  transition: background-color 160ms var(--sd-ease-ui), border-color 160ms var(--sd-ease-ui), color 160ms var(--sd-ease-ui);
}

.sd-choice:hover .sd-choice__label {
  border-color: var(--sd-fg);
}

.sd-choice > input:checked + .sd-choice__label {
  border-color: var(--sd-fg);
  background: var(--sd-fg);
  color: var(--sd-bg);
}

.sd-choice > input:focus-visible + .sd-choice__label {
  outline: 2px solid var(--sd-focus);
  outline-offset: 3px;
}

.sd-choice > input:disabled + .sd-choice__label {
  border-color: var(--sd-line);
  color: var(--sd-fg-muted);
  background-image: linear-gradient(to top right, transparent calc(50% - 0.5px), var(--sd-line-strong) 50%, transparent calc(50% + 0.5px));
  cursor: not-allowed;
}

.sd-choice > input:disabled {
  cursor: not-allowed;
}

/* Aantal: min, waarde, plus */
.sd-qty {
  display: inline-flex;
  align-items: stretch;
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--sd-line-strong);
}

.sd-qty__btn {
  position: relative;
  width: 3rem;
  min-height: 3rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sd-fg);
  cursor: pointer;
}

.sd-qty__btn::before,
.sd-qty__btn[data-qty="plus"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.75rem;
  height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.sd-qty__btn[data-qty="plus"]::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.sd-qty__value,
.sd-qty > input {
  width: 3rem;
  border: 0;
  background: transparent;
  color: var(--sd-fg);
  font-size: 1rem;
  font-variant-numeric: var(--sd-num-ui);
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ---------- 13. Informatie ---------- */
.sd-accordion {
  border-top: 1px solid var(--sd-line-strong);
}

.sd-accordion__item {
  border-bottom: 1px solid var(--sd-line-strong);
}

/* Accordeon: vraag in de tekstsnit 19/20 px, een plus van 14 px in draadkleur (1,5 px) die min wordt;
   het antwoord in Grotesk. Openen met ::details-content in 320 ms waar de browser dat kan. */
.sd-accordion__summary {
  position: relative;
  display: block;
  padding: 1.25rem 2.75rem 1.25rem 0;
  font-family: var(--sd-font-serif);
  font-size: clamp(1.1875rem, 1.163rem + 0.095vw, 1.25rem);
  font-weight: var(--sd-w-serif);
  line-height: 1.3;
  letter-spacing: var(--sd-ls-h3);
  color: var(--sd-fg);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.sd-accordion__summary::-webkit-details-marker {
  display: none;
}

.sd-accordion__summary::before,
.sd-accordion__summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.25rem;
  width: 14px;
  height: 1.5px;
  margin-top: -0.75px;
  background: var(--sd-accent);
  transition: transform var(--sd-dur-s) var(--sd-ease-ui);
}

.sd-accordion__summary::after {
  transform: rotate(90deg);
}

.sd-accordion__item[open] > .sd-accordion__summary::after {
  transform: rotate(0deg);
}

.sd-accordion__body {
  padding: 0 2.75rem 1.5rem 0;
  font-size: var(--sd-fs-body);
  line-height: var(--sd-lh-body);
  color: var(--sd-fg-soft);
  animation: sd-fade-in 320ms var(--sd-ease);
}

@supports selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    .sd-accordion {
      interpolate-size: allow-keywords;
    }

    .sd-accordion__item::details-content {
      block-size: 0;
      overflow-y: clip;
      transition: block-size 320ms var(--sd-ease), content-visibility 320ms allow-discrete;
    }

    .sd-accordion__item[open]::details-content {
      block-size: auto;
    }
  }
}

@keyframes sd-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Vertrouwensstrip: vier feiten, geen geschreeuw */
.sd-trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--sd-line);
  border-bottom: 1px solid var(--sd-line);
}

@media (min-width: 900px) {
  .sd-trust {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.sd-trust__item {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.35rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1rem, 2vw, 1.5rem);
}

.sd-trust__item::before {
  content: "";
  width: 1.25rem;
  height: 1px;
  margin-bottom: 0.65rem;
  background: var(--sd-accent);
}

.sd-trust__item:nth-child(odd) {
  padding-left: 0;
}

.sd-trust__item:nth-child(n + 3) {
  border-top: 1px solid var(--sd-line);
}

.sd-trust__item:nth-child(even) {
  border-left: 1px solid var(--sd-line);
}

@media (min-width: 900px) {
  .sd-trust__item:nth-child(n + 3) {
    border-top: 0;
  }

  .sd-trust__item + .sd-trust__item {
    border-left: 1px solid var(--sd-line);
  }

  .sd-trust__item:nth-child(odd) {
    padding-left: clamp(1rem, 2vw, 1.5rem);
  }

  .sd-trust__item:first-child {
    padding-left: 0;
  }
}

.sd-trust__title {
  font-family: var(--sd-font-sans);
  font-size: var(--sd-fs-label);
  font-weight: var(--sd-w-medium);
  line-height: var(--sd-lh-label);
  letter-spacing: var(--sd-ls-label);
  text-transform: uppercase;
  font-feature-settings: "case";
  color: var(--sd-fg);
}

/* Vertrouwensregel: de feiten als één of twee regels tekst met middenpunten, geen raster.
   <p class="sd-trustline"><span>Verzending €6,95</span><span>30 dagen retour</span>...</p> */
.sd-trustline {
  margin: 0;
  font-size: var(--sd-fs-label);
  line-height: 1.6;
  color: var(--sd-fg-muted);
  text-wrap: balance;
}

.sd-trustline > * + *::before {
  content: "\00a0\00b7\0020";
}

.sd-trust__text {
  font-size: var(--sd-fs-small);
  line-height: 1.5;
  color: var(--sd-fg-soft);
}

/* Melding: rustig, met een draad als kantlijn */
.sd-notice {
  position: relative;
  padding: 1.1rem 1.25rem 1.1rem 1.5rem;
  border: 1px solid var(--sd-line);
  background: transparent;
  color: var(--sd-fg);
}

.sd-notice::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: var(--sd-accent);
}

.sd-notice__title {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--sd-font-sans);
  font-size: var(--sd-fs-label);
  font-weight: var(--sd-w-medium);
  line-height: var(--sd-lh-label);
  letter-spacing: var(--sd-ls-label);
  text-transform: uppercase;
  font-feature-settings: "case";
}

.sd-notice__text {
  margin: 0;
  font-size: var(--sd-fs-small);
  line-height: 1.6;
  color: var(--sd-fg-soft);
}

.sd-notice--error {
  border-color: var(--sd-danger);
}

.sd-notice--error::before {
  background: var(--sd-danger);
}

.sd-notice--error .sd-notice__title {
  color: var(--sd-danger);
}

.sd-notice--quiet::before {
  background: var(--sd-line-strong);
}

/* Tabel (maattabel): haarlijnen, getallen onder elkaar */
.sd-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Tabel: Grotesk 15 px tabular, maatletters in Merk 18 px, duimen met ″ (U+2033) */
.sd-table {
  width: 100%;
  font-size: var(--sd-fs-small);
  font-variant-numeric: var(--sd-num-ui);
  color: var(--sd-fg-soft);
}

.sd-table caption {
  padding-bottom: var(--sd-s-4);
  text-align: left;
  font-size: var(--sd-fs-label);
  font-weight: var(--sd-w-medium);
  line-height: var(--sd-lh-label);
  letter-spacing: var(--sd-ls-label);
  text-transform: uppercase;
  font-feature-settings: "case";
  color: var(--sd-fg-muted);
}

.sd-table th,
.sd-table td {
  padding: 1rem 0.75rem 1rem 0;
  text-align: left;
  vertical-align: baseline;
  border-bottom: 1px solid var(--sd-line);
}

.sd-table--nowrap th,
.sd-table--nowrap td {
  white-space: nowrap;
}

.sd-table thead th {
  padding-top: 0.5rem;
  font-size: var(--sd-fs-label);
  font-weight: var(--sd-w-medium);
  line-height: var(--sd-lh-label);
  letter-spacing: var(--sd-ls-label);
  text-transform: uppercase;
  font-feature-settings: "case";
  color: var(--sd-fg-muted);
  border-bottom-color: var(--sd-line-strong);
}

.sd-table tbody th {
  font-family: var(--sd-font-merk);
  font-size: 1.125rem;
  font-weight: var(--sd-w-merk);
  letter-spacing: var(--sd-ls-caps-s);
  font-variant-ligatures: none;
  color: var(--sd-fg);
}

.sd-table td:last-child,
.sd-table th:last-child {
  padding-right: 0;
}

.sd-table tbody tr:hover > * {
  color: var(--sd-fg);
}

@media (min-width: 600px) {
  .sd-table th,
  .sd-table td {
    padding-right: 1.5rem;
  }
}

/* Specificaties: term links, waarde rechts, haarlijn ertussen */
.sd-specs {
  margin: 0;
  border-top: 1px solid var(--sd-line-strong);
}

.sd-specs > div {
  display: grid;
  gap: 0.25rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--sd-line);
}

@media (min-width: 600px) {
  .sd-specs > div {
    grid-template-columns: minmax(8rem, 1fr) minmax(0, 2fr);
    gap: var(--sd-gap);
    align-items: baseline;
  }
}

.sd-specs dt {
  font-size: var(--sd-fs-label);
  font-weight: var(--sd-w-medium);
  line-height: 1.6;
  letter-spacing: var(--sd-ls-label);
  text-transform: uppercase;
  font-feature-settings: "case";
  color: var(--sd-fg-muted);
}

.sd-specs dd {
  margin: 0;
  font-size: var(--sd-fs-small);
  line-height: var(--sd-lh-small);
  color: var(--sd-fg);
}

/* Stappen: genummerd, met een draad boven elke stap */
.sd-steps {
  display: grid;
  gap: var(--sd-gap-lg);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: sd-step;
}

@media (min-width: 900px) {
  .sd-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.sd-steps > li {
  position: relative;
  padding-top: var(--sd-s-5);
  border-top: 1px solid var(--sd-line-strong);
  counter-increment: sd-step;
}

.sd-steps > li::before {
  content: counter(sd-step, decimal-leading-zero);
  display: block;
  margin-bottom: var(--sd-s-4);
  font-family: var(--sd-font-merk);
  font-size: 2rem;
  font-weight: var(--sd-w-merk);
  line-height: 1;
  letter-spacing: var(--sd-ls-num);
  font-variant-numeric: var(--sd-num-display);
  color: var(--sd-fg);
}

.sd-steps > li::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: calc(4 * var(--sd-stitch) + 3 * var(--sd-stitch-gap));
  height: 1px;
  color: var(--sd-accent);
  background: var(--sd-stitch-x);
}

.sd-steps__title {
  display: block;
  margin-bottom: var(--sd-s-2);
  font-weight: var(--sd-w-medium);
  color: var(--sd-fg);
}

/* Cijfer: groot, rustig, met een label eronder */
.sd-stat {
  display: grid;
  gap: var(--sd-s-3);
  container-type: inline-size;
}

/* Groot cijfer in Merk (lining, proportioneel, -0,01 em); de eenheid in Grotesk 15/500, gedempt.
   De NBSP hoort ín de eenheid (anders is hij zo breed als het grote cijfer):
   <span class="sd-stat__num">350<span class="sd-stat__unit">&nbsp;g/m²</span></span> */
.sd-stat__num {
  display: block;
  font-family: var(--sd-font-merk);
  font-size: var(--sd-fs-stat);
  font-size: clamp(3rem, 36cqi, 6.5rem);
  font-weight: var(--sd-w-merk);
  line-height: var(--sd-lh-num);
  letter-spacing: var(--sd-ls-num);
  font-variant-numeric: var(--sd-num-display);
  white-space: nowrap;
  color: var(--sd-fg);
}

.sd-stat__unit {
  font-family: var(--sd-font-sans);
  font-size: var(--sd-fs-small);
  font-weight: var(--sd-w-medium);
  letter-spacing: 0;
  color: var(--sd-fg-muted);
}

/* Prijs: altijd "€149" met "incl. btw" erbij */
.sd-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.9rem;
  margin: 0;
}

.sd-price__amount {
  font-family: var(--sd-font-merk);
  font-size: var(--sd-fs-price);
  font-weight: var(--sd-w-merk);
  line-height: 1;
  letter-spacing: var(--sd-ls-num);
  font-variant-numeric: var(--sd-num-display);
}

/* "incl. btw": Grotesk 15 px in kleine letters, gedempt */
.sd-price__note {
  font-family: var(--sd-font-sans);
  font-size: var(--sd-fs-small);
  font-weight: var(--sd-w-regular);
  letter-spacing: 0;
  text-transform: none;
  color: var(--sd-fg-muted);
}

/* Status als tekst: een woord en een vierkantje van 6 px, geen kader.
   --available vol in de draadkleur, --soon omlijnd, --sold gedempt. */
.sd-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--sd-font-sans);
  font-size: var(--sd-fs-label);
  font-weight: var(--sd-w-medium);
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-transform: none;
  color: var(--sd-fg);
}

.sd-tag::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border: 1px solid var(--sd-accent);
}

.sd-tag--available::before {
  background: var(--sd-accent);
}

.sd-tag--soon {
  color: var(--sd-fg-soft);
}

.sd-tag--sold {
  color: var(--sd-fg-muted);
}

.sd-tag--sold::before {
  border-color: var(--sd-fg-muted);
}

/* ---------- 14. Hero ---------- */
.sd-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: calc(var(--sd-header-h) + var(--sd-s-8)) clamp(3rem, 8vw, 6rem);
  background: var(--sd-bg);
  color: var(--sd-fg);
}

.sd-hero--center {
  justify-content: center;
  text-align: center;
}

.sd-hero__inner {
  width: min(100% - 2 * var(--sd-gutter), var(--sd-wide));
  margin-inline: auto;
}

.sd-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--sd-media-bg);
}

.sd-hero__bg > img,
.sd-hero__bg > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sd-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--sd-veil), var(--sd-veil-soft) 60%, var(--sd-veil-mid)),
    linear-gradient(90deg, var(--sd-veil), transparent 80%);
}

/* Paginakop: de opening van een tekstpagina (retour, verzending, contact ...) */
.sd-pagehead {
  padding-block: calc(var(--sd-header-h) + clamp(3rem, 8vw, 6rem)) clamp(3rem, 7vw, 5rem);
  background: var(--sd-bg);
  color: var(--sd-fg);
}

/* ---------- 15. Utilities ---------- */
.sd-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Kruis als CSS-vorm: ✕ zit niet in de webfonts. <span class="sd-x" aria-hidden="true"></span>
   Twee lijnen van 1,5 px in currentColor; de maat volgt de lettergrootte (0,75 em). */
.sd-x {
  position: relative;
  display: inline-block;
  flex: none;
  width: 0.75em;
  height: 0.75em;
  vertical-align: -0.06em;
}

.sd-x::before,
.sd-x::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -0.1em;
  left: -0.1em;
  height: 1.5px;
  margin-top: -0.75px;
  background: currentColor;
  transform: rotate(45deg);
}

.sd-x::after {
  transform: rotate(-45deg);
}

.sd-skiplink {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: var(--sd-z-skip);
  padding: 0.85rem 1.25rem;
  border: 1px solid var(--sd-thread);
  background: var(--sd-ink);
  color: var(--sd-paper);
  font-family: var(--sd-font-sans);
  font-size: var(--sd-fs-label);
  font-weight: var(--sd-w-medium);
  letter-spacing: var(--sd-ls-label);
  text-transform: uppercase;
  font-feature-settings: "case";
  transform: translateY(-200%);
  transition: transform var(--sd-dur-s) var(--sd-ease);
}

.sd-skiplink:focus,
.sd-skiplink:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--sd-thread);
  outline-offset: 3px;
}

.sd-center { text-align: center; }
.sd-measure { max-width: var(--sd-measure); }
.sd-mx-auto { margin-inline: auto; }
.sd-nowrap { white-space: nowrap; }
.sd-balance { text-wrap: balance; }
.sd-pretty { text-wrap: pretty; }
.sd-soft { color: var(--sd-fg-soft); }
.sd-muted { color: var(--sd-fg-muted); }
.sd-fg { color: var(--sd-fg); }
.sd-mt-s { margin-top: var(--sd-s-4); }
.sd-mt-m { margin-top: var(--sd-s-6); }
.sd-mt-l { margin-top: var(--sd-s-8); }
.sd-mt-xl { margin-top: clamp(var(--sd-s-8), 8vw, var(--sd-s-10)); }

@media (max-width: 599.98px) {
  .sd-hide-sm { display: none !important; }
}

@media (min-width: 600px) {
  .sd-show-sm-only { display: none !important; }
}

/* ---------- 16. Beweging en contrast ---------- */
@media (prefers-reduced-motion: reduce) {
  .sd-page *,
  .sd-page *::before,
  .sd-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  .sd-edition-card:hover .sd-edition-card__media > img,
  .sd-tile:hover .sd-tile__media > img { transform: none; }
}

/* Windows-contrastmodus: vlakken verdwijnen, dus randen en markeringen nemen het over */
@media (forced-colors: active) {
  .sd-btn,
  .sd-choice__label,
  .sd-qty,
  .sd-check__box,
  .sd-input {
    border-color: ButtonText;
  }

  .sd-btn--primary,
  .sd-choice > input:checked + .sd-choice__label,
  .sd-check > input:checked + .sd-check__box {
    border-color: Highlight;
    background: Highlight;
    color: HighlightText;
  }

  .sd-check__box::after {
    background: HighlightText;
  }

  .sd-thread {
    forced-color-adjust: none;
    background: CanvasText;
  }
}

@media (prefers-contrast: more) {
  :root,
  .sd-paper,
  .sd-paper-2,
  .sd-section--paper,
  .sd-section--paper-2,
  [data-surface="paper"],
  [data-surface="paper-2"] {
    --sd-line: var(--sd-line-light-strong);
  }

  .sd-ink,
  .sd-ink-2,
  .sd-section--ink,
  .sd-section--ink-2,
  .sd-buybar,
  [data-surface="ink"],
  [data-surface="ink-2"] {
    --sd-line: var(--sd-line-dark-strong);
  }

  .sd-number-card {
    --sd-line: var(--sd-line-light-strong);
  }

  .sd-section--edition,
  .sd-surface-edition,
  .sd-page[data-edition],
  .sd-edition-card,
  .sd-buybar[data-edition] {
    --sd-line: var(--ed-line-strong, var(--sd-line-dark-strong));
  }
}