/* C-Traccs. Colours from _design/c-traccs.tokens.json; button, card and chip metrics from
   _design/patterns.md. Mobile first.
   Type: Archivo SemiCondensed (headings), Hanken Grotesk (text), IBM Plex Mono (SKU chips only),
   self-hosted from assets/fonts (SIL Open Font License).
   Radius rule: cards and panels 20, images inside a card 14, buttons 12, inputs 10, chips pill.
   Surfaces by tone, not outline: white cards on the grey page, tonal fills for chips and secondary
   buttons, one shadow token (--shadow, with --shadow-hover as its hover step). */

@font-face { font-family: "Archivo SC"; src: url("../assets/fonts/archivo-semicondensed-latin.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../assets/fonts/hanken-grotesk-latin.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --bg: #E8EDF0;
  --surface: #FFFFFF;
  --surface-2: #F2F5F7;
  --tonal: #EFE6D8;          /* plywood tint: secondary buttons, chips on white */
  --tonal-hover: #E6D9C5;
  --chip: #DCE3E8;           /* chips on the grey page */
  --chip-hover: #D0D9DF;
  --ink: #16202A;
  --muted: #56636F;
  --line: #C9D2D9;
  --hair: rgba(22, 32, 42, .08);
  --accent: #1E8A5A;
  --accent-hover: #187A4F;
  --accent-ink: #FFFFFF;
  --accent-soft: rgba(30, 138, 90, .14);
  --ply: #D6B588;
  --ply-dark: #C9A577;
  --burnt: #5B3A22;
  --hole: #CDD5DB;
  --band: #18232D;
  --band-ink: #E7EDF1;
  --band-muted: #A9B5BF;

  --shadow: 0 1px 2px rgba(22, 32, 42, .06), 0 8px 24px -12px rgba(22, 32, 42, .18);
  --shadow-hover: 0 2px 4px rgba(22, 32, 42, .07), 0 16px 32px -14px rgba(22, 32, 42, .26);
  --r-card: 20px;
  --r-img: 14px;
  --r-btn: 12px;
  --r-in: 10px;
  --t: 150ms ease-out;

  --kop-h: 64px;
  --gutter: 16px;
  --sec: 64px;
  --gap: 16px;

  --display: "Archivo SC", "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
  --sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Type scale */
  --fs-xs: .8125rem;   /* 13 */
  --fs-sm: .875rem;    /* 14 */
  --fs-btn: .9375rem;  /* 15 */
  --fs-base: 1rem;     /* 16 */
  --fs-md: 1.125rem;   /* 18 */
  --fs-lg: 1.25rem;    /* 20 */
  --fs-h3: 1.1875rem;  /* 19 */
  --fs-h2: clamp(1.875rem, 1.3rem + 1.8vw, 2.75rem);  /* 30 to 44 */
  --fs-h1: clamp(2.375rem, 1.5rem + 3vw, 4rem);       /* 38 to 64 */
  color-scheme: light;
}
@media (min-width: 768px) { :root { --gutter: 32px; --sec: 96px; --gap: 24px; } }
@media (min-width: 1200px) { :root { --sec: 128px; } }
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #11171C;
    --surface: #1A232B;
    --surface-2: #151D24;
    --tonal: #2B2A25;
    --tonal-hover: #35332C;
    --chip: #222C35;
    --chip-hover: #2A3540;
    --ink: #E7EDF1;
    --muted: #9AA7B2;
    --line: #2C3843;
    --hair: rgba(255, 255, 255, .07);
    --accent: #35B07A;
    --accent-hover: #47C08A;
    --accent-ink: #0B1410;
    --accent-soft: rgba(53, 176, 122, .16);
    --hole: #0C1115;
    --band: #0B1014;
    --shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    --shadow-hover: inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 28px -14px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kop-h) + 16px); }
html:not(.lenis) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:not(.lenis) { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--fs-base)/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
::selection { background: var(--accent); color: var(--accent-ink); }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--t), text-decoration-color var(--t); }
a:hover { color: var(--accent); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -0.022em; }
h2 { font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -0.018em; }
h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.005em; }
p { margin: 0 0 1em; text-wrap: pretty; }
.klein { font-size: var(--fs-xs); }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon { width: 1.2em; height: 1.2em; flex: none; }
.wrap { width: min(1200px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--ink); color: var(--bg); padding: .6rem 1rem; border-radius: var(--r-btn); }
.skip:focus { top: 1rem; }

/* The one eyebrow style (hero only). */
.eyebrow { font-size: var(--fs-sm); font-weight: 600; color: var(--accent); margin: 0 0 16px; }
/* SKU chip: the only monospace on the site. Tonal, no outline. */
.sku { display: inline-block; font: 500 .75rem/1.6 var(--mono); letter-spacing: 0; color: var(--ink); background: var(--chip); border-radius: 6px; padding: 0 7px; white-space: nowrap; }

/* Buttons (patterns.md): 48px, padding 0 22px, radius 12, 15/600, icon 16 with 8px gap. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; min-width: 96px; padding: 0 22px; border-radius: var(--r-btn); border: 0;
  font: 600 var(--fs-btn)/1 var(--sans); letter-spacing: 0; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--t), color var(--t), box-shadow var(--t), transform var(--t);
}
.btn .icon { width: 16px; height: 16px; }
.btn:active { transform: translateY(0) scale(.98); transition-duration: 80ms; }
.btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 0 rgba(0, 0, 0, .08), inset 0 1px 0 rgba(255, 255, 255, .18); }
.btn--primary:hover { background: var(--accent-hover); color: var(--accent-ink); transform: translateY(-1px); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, .18); }
.btn--secondary { background: var(--tonal); color: var(--ink); }
.btn--secondary:hover { background: var(--tonal-hover); color: var(--ink); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); padding: 0 14px; min-width: 0; }
.btn--ghost:hover { background: color-mix(in srgb, var(--tonal) 60%, transparent); color: var(--ink); }
.btn--sm { height: 40px; padding: 0 16px; min-width: 0; font-size: var(--fs-sm); }
@media (max-width: 767.98px) { .btn { font-size: var(--fs-base); } .btn--sm { font-size: var(--fs-sm); } }
@media (prefers-reduced-motion: reduce) { .btn:hover, .btn:active { transform: none; } }
.link-knop { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; cursor: pointer; }
.link-knop:hover { color: var(--accent); text-decoration-color: currentColor; }

/* Chips (patterns.md): pill, 36px, tonal, selected = accent 14% with a check. */
.chip { height: 36px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--chip); color: var(--ink); font: 500 var(--fs-sm) var(--sans); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: background-color var(--t), color var(--t); }
.chip:hover { background: var(--chip-hover); }
.chip[aria-pressed="true"], .chip[aria-checked="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.chip[aria-pressed="true"]::before, .chip[aria-checked="true"]::before {
  content: ""; width: 16px; height: 16px; margin-left: -4px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center / contain no-repeat;
}
.chip-n { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .chip-n { color: inherit; opacity: .75; }
.chip[data-leeg="true"]:not([aria-pressed="true"]) { color: var(--muted); }
@media (pointer: coarse) { .chip { height: 40px; } }

/* ---------------------------------------------------------------- header */
.kop { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--hair); }
.kop-in { height: var(--kop-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: flex; align-items: center; height: 36px; }
.logo img { height: 36px; width: auto; }
.nav { display: none; align-items: center; gap: 2px; }
.nav a:not(.btn) { padding: 8px 10px; text-decoration: none; font-size: var(--fs-sm); font-weight: 500; border-radius: 8px; color: var(--ink); }
.nav a:not(.btn):hover { color: var(--accent); }
.nav .btn { margin-left: 10px; }
.nav-mobiel { position: relative; }
.nav-mobiel summary { list-style: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-btn); cursor: pointer; background: var(--chip); }
.nav-mobiel summary::-webkit-details-marker { display: none; }
.nav-mobiel .icon-dicht, .nav-mobiel[open] .icon-open { display: none; }
.nav-mobiel[open] .icon-dicht { display: block; }
.nav-mobiel nav { position: absolute; right: 0; top: calc(100% + 8px); width: min(300px, calc(100vw - 2 * var(--gutter))); background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-hover); padding: 8px; display: grid; }
.nav-mobiel nav a { padding: 10px 12px; text-decoration: none; font-weight: 500; border-radius: 10px; min-height: 44px; display: flex; align-items: center; gap: 8px; }
.nav-mobiel nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav-tel { color: var(--accent); margin-top: 4px; }
@media (min-width: 960px) {
  .nav { display: flex; }
  .nav-mobiel { display: none; }
}

/* ---------------------------------------------------------------- hero
   Static (no JS, reduced motion): text, then the finished kit in its stage.
   Live (js/hero.js): the hero pins below the header and fills the rest of the viewport.
   The stage (.hero-stage) is a fixed box; the SVG viewBox is the stage from js/kit.js and
   every frame of the animation stays inside it (overflow hidden as a backstop). */
.hero-pin { padding-block: 32px var(--sec); }
.hero-in { display: flex; flex-direction: column; gap: 24px; }
.hero-tekst { max-width: 36rem; }
.hero-tekst h1 { margin-bottom: 20px; }
.hero-lead { color: var(--muted); font-size: var(--fs-md); line-height: 1.55; margin-bottom: 32px; max-width: 34rem; }
.hero-knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.hero-kit { margin: 0; position: relative; display: flex; flex-direction: column; }
.hero-stage { position: relative; width: 100%; aspect-ratio: 1000 / 780; overflow: hidden; }
.kit-svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.hero-fase { margin-top: 12px; font-size: var(--fs-sm); color: var(--muted); min-height: 1.6em; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.fase-knoppen { display: flex; gap: 4px; }
.fase-knoppen[hidden] { display: none; }
.fase-knop { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 500 var(--fs-xs) var(--sans); cursor: pointer; transition: background-color var(--t), color var(--t); }
.fase-knop:hover { background: var(--chip); color: var(--ink); }
.fase-knop[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.hoe-pin.is-live .stap { cursor: pointer; }
.hoe-pin.is-live .stap:hover h3 { color: var(--accent); }
@media (max-width: 479.98px) { .fase-knop { padding: 0 9px; } }

html.motion .hero-pin.is-live { height: calc(100svh - var(--kop-h)); padding-block: 24px; display: flex; flex-direction: column; }
html.motion .hero-pin.is-live > .hero-in { flex: 1; min-height: 0; }

@media (max-width: 1023.98px) {
  /* The stage keeps its proportions and only shrinks (the drawing scales with it) when the
     viewport is too short; the whole hero is centred in the pinned viewport. */
  html.motion .hero-pin.is-live > .hero-in { justify-content: center; }
  html.motion .hero-pin.is-live .hero-kit { flex: 0 1 auto; min-height: 0; }
  html.motion .hero-pin.is-live .hero-stage { flex: 0 1 auto; min-height: 0; }
}
@media (max-width: 1023.98px) and (max-height: 720px) {
  html.motion .hero-pin.is-live .hero-lead { display: none; }
}
@media (max-width: 479.98px) {
  .hero-knoppen .btn { flex: 1 1 0; padding: 0 12px; min-width: 0; }
}
@media (min-width: 1024px) {
  .hero-pin { padding-block: var(--sec); }
  .hero-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: center; }
  .hero-tekst { grid-column: 1 / span 5; }
  .hero-kit { grid-column: 6 / span 7; }
  .hero-fase { position: absolute; left: 0; right: 0; top: 100%; }
  html.motion .hero-pin.is-live { padding-block: 40px 56px; justify-content: center; }
  html.motion .hero-pin.is-live > .hero-in { flex: 0 1 auto; }
  html.motion .hero-pin.is-live .hero-stage { max-height: calc(100svh - var(--kop-h) - 96px - 2rem); margin-inline: auto; }
}

/* Kit drawing (hero, size check, atelier band) */
.k-board { fill: var(--ply); stroke: var(--burnt); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.k-holes path { fill: var(--hole); fill-rule: evenodd; stroke: var(--burnt); stroke-width: 1; vector-effect: non-scaling-stroke; }
.k-codes text, .k-tag text { font: 500 2px var(--mono); fill: var(--burnt); fill-opacity: .8; }
.k-tag .k-tag-big { font-size: 4.4px; font-weight: 500; }
.k-face { fill: var(--ply); fill-rule: evenodd; }
.k-eng { fill: none; stroke: var(--burnt); stroke-opacity: .42; stroke-width: .7; vector-effect: non-scaling-stroke; }
.k-edge { fill: none; stroke: var(--burnt); stroke-width: 1.3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.k-shade { fill: #16202A; fill-rule: evenodd; }
.k-shadow { fill: #16202A; fill-opacity: .12; }
.k-engr-text { font: 500 2.1px var(--mono); fill: var(--burnt); letter-spacing: .2px; }
.k-laser-glow { fill: var(--accent); fill-opacity: .28; }
.k-laser-dot { fill: var(--accent); }
.k-chip-box { fill: var(--surface); filter: drop-shadow(0 2px 6px rgba(22, 32, 42, .14)); }
.k-chip-line { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.k-chip-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; vector-effect: non-scaling-stroke; }
.k-chip-id { font: 500 15px var(--mono); fill: var(--muted); }
.k-chip-name { font: 600 17px var(--sans); fill: var(--ink); }
.k-chip { display: none; }
@media (min-width: 640px) { .k-chip { display: inline; } }

/* Progressive enhancement: every drawing is visible from the first paint, with or without JS.
   Hero kit: with motion, an inline <style> from build.mjs (heroStart) shows frame 0 (the cut sheet)
   until js/hero.bundle.js writes that same frame, so nothing swaps; without JS, with reduced motion
   or when the bundle never starts it is the finished kit. The print and "zo maken we het" drawings
   (below the fold) switch from end state to frame 0 when the bundle runs and fade in once. */
@media (prefers-reduced-motion: no-preference) {
  html.motion .print-svg.is-live, html.motion .hoe-svg.is-live { animation: stage-in .35s ease-out; }
}
@keyframes stage-in { from { opacity: 0; } }

/* ---------------------------------------------------------------- sections */
.sectie { padding-block: var(--sec); position: relative; }
.sectie-kop { max-width: 44rem; margin-bottom: 32px; }
.sectie-kop h2 { margin-bottom: 14px; }
.sectie-kop > p { color: var(--muted); font-size: var(--fs-md); line-height: 1.55; margin: 0; max-width: 40rem; }
@media (min-width: 768px) { .sectie-kop { margin-bottom: 48px; } }
.noot { color: var(--muted); font-size: var(--fs-sm); margin: 16px 0 0; }
figcaption { color: var(--muted); font-size: var(--fs-sm); margin-top: 12px; }

/* ---------------------------------------------------------------- how it is made (pinned like the hero)
   Static: the four steps as a list next to the finished drawing. Live: the step that is playing
   is ink, the others muted; on phones the steps become a row of four and the playing step's text
   shows underneath. */
.hoe-in { display: grid; gap: 32px; }
.hoe-tekst h2 { margin-bottom: 32px; }
.stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.stap { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 16px; align-items: start; transition: color var(--t); }
.stap .icon { width: 24px; height: 24px; color: var(--accent); margin-top: 2px; transition: color var(--t), opacity var(--t); }
.stap h3 { margin-bottom: 4px; }
.stap p { color: var(--muted); margin: 0; }
.stap-uitleg { display: none; }
.hoe-kit { margin: 0; }
.hoe-stage { position: relative; width: 100%; aspect-ratio: 960 / 480; overflow: hidden; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow); }
.hoe-svg { display: block; width: 100%; height: 100%; }
.hoe-pin.is-live .stap { color: var(--muted); }
.hoe-pin.is-live .stap .icon { color: var(--muted); opacity: .6; }
.hoe-pin.is-live .stap.is-actief { color: var(--ink); }
.hoe-pin.is-live .stap.is-actief .icon { color: var(--accent); opacity: 1; }
.hoe-pin.is-live .stap:not(.is-actief) p { opacity: .55; }
html.motion .hoe:has(.hoe-pin.is-live) { padding-top: 0; }
html.motion .hoe-pin.is-live { height: calc(100svh - var(--kop-h)); display: flex; flex-direction: column; justify-content: center; padding-block: 24px; }
@media (max-width: 1023.98px) {
  html.motion .hoe-pin.is-live .hoe-tekst h2 { margin-bottom: 20px; }
  html.motion .hoe-pin.is-live .stappen { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  html.motion .hoe-pin.is-live .stap { grid-template-columns: none; gap: 6px; padding-top: 10px; border-top: 2px solid var(--line); }
  html.motion .hoe-pin.is-live .stap.is-actief { border-top-color: var(--accent); }
  html.motion .hoe-pin.is-live .stap h3 { font-size: var(--fs-sm); }
  html.motion .hoe-pin.is-live .stap .icon { width: 20px; height: 20px; }
  html.motion .hoe-pin.is-live .stap p { display: none; }
  html.motion .hoe-pin.is-live .stap-uitleg { display: block; color: var(--muted); margin: 16px 0 0; min-height: 4.8em; }
  html.motion .hoe-pin.is-live > .hoe-in { gap: 20px; }
}
@media (min-width: 1024px) {
  .hoe-in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: center; }
  .hoe-tekst { grid-column: 1 / span 5; }
  .hoe-kit { grid-column: 7 / span 6; }
  html.motion .hoe-pin.is-live .hoe-stage { max-height: calc(100svh - var(--kop-h) - 96px); margin-inline: auto; }
}
.h-plaat { fill: var(--ply); stroke: var(--burnt); stroke-width: 1.2; }
.h-gat { fill: var(--hole); fill-rule: nonzero; stroke: var(--burnt); stroke-width: .08; }
.h-cad { fill: none; stroke: var(--accent); stroke-width: .12; stroke-linejoin: round; }
.h-schaduw { fill: #16202A; fill-opacity: .18; fill-rule: evenodd; transform-box: view-box; }
.h-face { fill: var(--ply); fill-rule: evenodd; }
.h-eng { fill: none; stroke: var(--burnt); stroke-opacity: .5; stroke-width: .07; }
.h-brand { fill: none; stroke: #2A1A0E; stroke-opacity: .28; stroke-width: .5; stroke-linejoin: round; }
.h-snede { fill: none; stroke: var(--burnt); stroke-width: .12; stroke-linejoin: round; }
.h-kop-gloed { fill: var(--accent); fill-opacity: .25; }
.h-kop-punt { fill: var(--accent); }
.bouw-foto { margin: var(--sec) 0 0; }
.bouw-foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-card); background: var(--surface-2); }
@media (min-width: 1024px) { .bouw-foto img { aspect-ratio: 21 / 9; } }

/* ---------------------------------------------------------------- built kits: photo tiles */
.gebouwd { background: var(--surface-2); }
.tegels { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); }
@media (min-width: 768px) { .tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tegel--groot { grid-column: 1 / -1; } }
.tegel a { display: flex; flex-direction: column; height: 100%; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow); overflow: hidden; text-decoration: none; color: var(--ink); transition: transform var(--t), box-shadow var(--t); }
.tegel a:hover { color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.tegel-beeld { display: block; aspect-ratio: 2 / 1; background: #FFFFFF; }
.tegel-beeld img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.tegel--groot .tegel-beeld { aspect-ratio: 2 / 1; }
@media (min-width: 768px) { .tegel--groot .tegel-beeld { aspect-ratio: 5 / 2; } .tegel--groot .tegel-beeld img { object-fit: cover; padding: 0; } }
.tegel-tekst { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 16px 20px 20px; }
.tegel-naam { font-weight: 600; }
.tegel-schaal { color: var(--muted); font-size: var(--fs-sm); }
@media (prefers-color-scheme: dark) { .tegel-tekst { background: var(--surface); } }

/* ---------------------------------------------------------------- size check (true size) */
.maatkiezer { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 12px; }
@media (min-width: 768px) { .maatkiezer { padding: 24px; } }
.maat-bediening { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-bottom: 16px; }
.seg, .ref-keuze { display: flex; flex-wrap: wrap; gap: 8px; }
.seg-btn { height: 36px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--chip); color: var(--ink); font: 600 var(--fs-sm) var(--sans); white-space: nowrap; cursor: pointer; transition: background-color var(--t), color var(--t); }
.seg-btn:hover { background: var(--chip-hover); }
.seg-btn[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); }
@media (pointer: coarse) { .seg-btn { height: 40px; } }
html:not(.js) .maat-bediening, html:not(.js) .maat-liniaal { display: none; }
.maat-stage {
  position: relative; height: 380px; overflow: hidden; border-radius: var(--r-img);
  background:
    linear-gradient(color-mix(in srgb, var(--line) 35%, transparent) 1px, transparent 1px) 0 0 / 100% 10mm,
    linear-gradient(90deg, color-mix(in srgb, var(--line) 35%, transparent) 1px, transparent 1px) 0 0 / 10mm 100%,
    var(--surface-2);
}
@media (min-width: 768px) { .maat-stage { height: 460px; } }
@media (min-width: 1024px) { .maat-stage { height: 500px; } }
.maat-ref, .maat-kit { position: absolute; left: 0; bottom: 44px; transform-origin: 0 100%; transition: transform 250ms var(--t, ease-out); }
.maat-ref { transform: translateX(24px); }
.maat-ref[hidden] { display: none; }
.maat-ref[data-ref="munt"] { width: 25.75mm; height: 25.75mm; }
.maat-ref[data-ref="doosje"] { width: 53mm; height: 36mm; }
.maat-ref svg, .maat-kit svg { display: block; width: 100%; height: 100%; overflow: visible; }
.maat-kit { transform: translateX(calc(24px + 37.75mm)); }
.munt-rand { fill: #C7CCD1; stroke: #8E979F; stroke-width: .3; }
.munt-lijn { fill: none; stroke: #9AA3AB; stroke-width: .25; stroke-dasharray: .5 .6; }
.munt-kern { fill: #D2B46A; stroke: #A88A3E; stroke-width: .3; }
.munt-2 { font: 700 9px var(--sans); fill: #8C6F2A; text-anchor: middle; }
.doos { fill: #B5462F; }
.doos-etiket { fill: #F2E9D8; }
.doos-tekst { stroke: #B5462F; stroke-width: 1.6; stroke-linecap: round; }
.maat-liniaal { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; color: var(--ink); }
.maat-liniaal svg { display: block; overflow: visible; }
.maat-liniaal path { stroke: currentColor; stroke-width: 1; fill: none; shape-rendering: crispEdges; }
.maat-liniaal text { font: 500 11px var(--sans); fill: var(--muted); text-anchor: middle; }
.maat-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 44px; height: 1px; background: color-mix(in srgb, var(--ink) 45%, transparent); }
html.js .maat-stage::after { display: none; }
.maat-onder { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 24px; margin-top: 16px; }
.maat-zin { font-family: var(--display); font-size: var(--fs-lg); font-weight: 600; margin: 0; font-variant-numeric: tabular-nums; }
.maat-noot { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.kalibreer { margin-top: 16px; background: var(--surface-2); border-radius: var(--r-img); padding: 20px; }
.kalibreer p { margin: 0 0 12px; }
.kalibreer-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; min-height: 130px; }
.kalibreer-cirkel { display: block; width: 97px; height: 97px; border-radius: 50%; border: 2px solid var(--accent); background: var(--accent-soft); flex: none; }
.kalibreer-rij input { flex: 1 1 200px; accent-color: var(--accent); }
.kalibreer-knoppen { display: flex; gap: 8px; margin: 12px 0 0 !important; }
@media (prefers-reduced-motion: reduce) { .maat-ref, .maat-kit { transition: none; } }

.tabel-scroll { overflow-x: auto; margin-top: 40px; -webkit-overflow-scrolling: touch; }
.schaal-tabel { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.schaal-tabel caption { text-align: left; font-family: var(--display); font-weight: 600; font-size: var(--fs-md); margin-bottom: 8px; }
.schaal-tabel th, .schaal-tabel td { text-align: left; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.schaal-tabel thead th { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.schaal-tabel tbody th { font-weight: 600; }
.schaal-tabel tr.is-actief th, .schaal-tabel tr.is-actief td { background: var(--accent-soft); }
.schaal-tabel tr > :first-child { padding-left: 12px; }
@media (max-width: 559.98px) { .schaal-tabel .kol-figuur { display: none; } }

/* ---------------------------------------------------------------- catalogue */
.filters { display: grid; gap: 12px; margin-bottom: 32px; }
.filter-rij { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: start; gap: 8px; }
.filter-label { color: var(--muted); font-size: var(--fs-sm); font-weight: 600; line-height: 36px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
@media (pointer: coarse) { .filter-label { line-height: 40px; } }
@media (min-width: 768px) { .filter-rij { grid-template-columns: 64px minmax(0, 1fr); } }

/* Product card (patterns.md): radius 20, image inset 8 with radius 14, no outline. */
.grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.kaart { display: flex; min-width: 0; }
.kaart[hidden] { display: none; }
.kaart-link { display: flex; flex-direction: column; width: 100%; text-decoration: none; color: var(--ink); background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 8px; transition: transform 200ms ease-out, box-shadow 200ms ease-out; }
.kaart-link:hover { color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.kaart-plaat { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-img); background: #FFFFFF; }
.kaart-plaat img { width: 100%; height: 100%; object-fit: cover; }
.kaart-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 12px 12px; flex: 1; }
.kaart-meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--fs-xs); min-height: 20px; }
.kaart-nieuw { margin-left: auto; color: var(--accent); font-weight: 600; }
.kaart-titel { font-size: var(--fs-md); font-weight: 600; line-height: 1.3; }
.kaart-mat { color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prijs { display: flex; align-items: baseline; gap: 6px; margin: auto 0 0; padding-top: 10px; font-variant-numeric: tabular-nums; }
.prijs-bedrag { font-size: var(--fs-md); font-weight: 600; }
.prijs-label { font-size: var(--fs-xs); color: var(--muted); }
.leeg { background: var(--surface); border-radius: var(--r-card); padding: 24px; margin-top: var(--gap); box-shadow: var(--shadow); }
.leeg-titel { font-family: var(--display); font-size: var(--fs-lg); font-weight: 600; }
.leeg .btn { margin: 4px 8px 0 0; }
@media (max-width: 559.98px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .grid .kaart-link { padding: 6px; border-radius: 16px; }
  .grid .kaart-plaat { border-radius: 11px; }
  .grid .kaart-body { padding: 10px 6px 6px; gap: 4px; }
  .grid .kaart-titel { font-size: var(--fs-sm); }
  .grid .kaart-mat { display: none; }
  .grid .kaart-meta > span:not(.sku):not(.kaart-nieuw) { display: none; }
  .grid .prijs-bedrag { font-size: var(--fs-base); }
}

/* ---------------------------------------------------------------- spotlight */
.spotlight { background: var(--surface); }
.spot-in { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .spot-in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; } .spot-beeld { grid-column: 1 / span 6; } .spot-tekst { grid-column: 8 / span 5; } }
.spot-beeld { margin: 0; position: relative; }
.spot-beeld > img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: var(--r-card); background: #FFFFFF; }
.spot-detail { position: absolute; right: 16px; bottom: 16px; width: 30%; max-width: 180px; border-radius: var(--r-img); overflow: hidden; box-shadow: var(--shadow-hover); }
.spot-detail img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.spot-tekst h2 { margin-bottom: 16px; }
.spot-lead { color: var(--muted); font-size: var(--fs-md); line-height: 1.55; }
.spot-knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 0; }
.specs--kort { margin-top: 24px; }
.spec-prijs { font-size: var(--fs-lg); font-weight: 600; }

/* ---------------------------------------------------------------- Nieuw: compact list */
.nieuw-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px var(--gap); }
@media (min-width: 900px) { .nieuw-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nieuw-item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 8px 20px 8px 8px; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow); text-decoration: none; color: var(--ink); transition: transform 200ms ease-out, box-shadow 200ms ease-out; }
.nieuw-item:hover { color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.nieuw-beeld { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-img); overflow: hidden; background: #FFFFFF; }
.nieuw-beeld img { width: 100%; height: 100%; object-fit: cover; }
.nieuw-tekst { display: grid; gap: 4px; min-width: 0; }
.nieuw-titel { font-weight: 600; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
.nieuw-soort { color: var(--muted); font-size: var(--fs-sm); }
.nieuw-prijs { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (min-width: 640px) { .nieuw-item { grid-template-columns: 128px minmax(0, 1fr) auto; } }

/* ---------------------------------------------------------------- 3D printing (pinned like the hero) */
.printen { background: var(--surface-2); }
.print-pin { position: relative; }
.print-in { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 24px; }
.print-kit { margin: 0; display: flex; flex-direction: column; }
.print-stage { position: relative; width: 100%; aspect-ratio: 880 / 680; overflow: hidden; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow); }
.print-svg { display: block; width: 100%; height: 100%; }
.print-uitlezing { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.print-uitlezing .print-fase { color: var(--ink); font-weight: 600; }
.print-uitlezing [data-print-laag] { min-width: 8.6em; }
.print-uitlezing [data-print-z] { min-width: 6.2em; }
.print-voortgang { flex: 1 0 100%; }
.print-tekst h2 { margin-bottom: 16px; }
.print-tekst p { color: var(--muted); font-size: var(--fs-md); line-height: 1.55; }
.print-knoppen { margin: 24px 0 0 !important; }
.print-noot { font-size: var(--fs-sm) !important; margin: 16px 0 0; }
html.motion .printen:has(.print-pin.is-live) { padding-block: 0; }
html.motion .print-pin.is-live { height: calc(100svh - var(--kop-h)); display: flex; flex-direction: column; justify-content: center; padding-block: 24px; }
@media (max-width: 1023.98px) {
  html.motion .print-pin.is-live > .print-in { flex: 1; min-height: 0; justify-content: center; }
  html.motion .print-pin.is-live .print-kit { flex: 0 1 auto; min-height: 0; }
  html.motion .print-pin.is-live .print-stage { flex: 0 1 auto; min-height: 0; }
  html.motion .print-pin.is-live .print-tekst p { font-size: var(--fs-base); margin-bottom: .6em; }
  html.motion .print-pin.is-live .print-knoppen { margin-top: 12px !important; }
  html.motion .print-pin.is-live .print-noot { display: none; }
}
@media (max-width: 1023.98px) and (max-height: 760px) {
  html.motion .print-pin.is-live .print-tekst p:nth-of-type(2) { display: none; }
}
@media (min-width: 1024px) {
  .print-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: center; }
  .print-kit { grid-column: 1 / span 7; grid-row: 1; }
  .print-tekst { grid-column: 9 / span 4; grid-row: 1; }
  html.motion .print-pin.is-live .print-stage { max-height: calc(100svh - var(--kop-h) - 120px); margin-inline: auto; }
}
.pr-rail { stroke: #8D99A4; stroke-width: 3; fill: none; }
.pr-bed-side { fill: #2B3640; }
.pr-bed-top { fill: #3A4955; }
.pr-bed-dots { stroke: #55636F; stroke-width: 3; stroke-linecap: round; }
.pr-shadow { fill: #16202A; fill-opacity: .18; }
.pr-body { fill: #6E7A86; }
.pr-panes { fill: #F1E3B5; fill-opacity: .9; }
.pr-layers { stroke: #16202A; stroke-opacity: .16; stroke-width: 1; fill: none; }
.pr-edge { fill: none; stroke: #2E3942; stroke-width: 1.5; stroke-linejoin: round; }
.pr-carriage { fill: #2B3640; }
.pr-heater { fill: #C9A577; }
.pr-nozzle { fill: #8E6A2E; }
.pr-hot { fill: #E2683C; }
.pr-maat-lijn { stroke: var(--accent); stroke-width: 2; fill: none; }
.pr-maat-tekst { font: 600 22px var(--sans); fill: var(--accent); }

/* ---------------------------------------------------------------- about: full-bleed atelier band */
.over { background: var(--band); color: var(--band-ink); }
.over a { color: var(--band-ink); }
.over-in { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .over-in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; } .over-tekst { grid-column: 1 / span 5; } .over-plaat { grid-column: 6 / span 7; } }
.over-tekst h2 { margin-bottom: 20px; }
.over-tekst p { color: var(--band-muted); max-width: 36rem; }
.over-plaat { margin: 0; }
.atelier-svg { display: block; width: 100%; height: auto; }
.over-plaat figcaption { color: var(--band-muted); }
.over .k-holes path { fill: var(--band); }
.tellers { list-style: none; margin: 32px 0 0; padding: 20px 0 0; border-top: 1px solid rgba(255, 255, 255, .14); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.tellers li { display: grid; gap: 6px; align-content: start; }
.teller { font-family: var(--display); font-size: var(--fs-h2); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; color: var(--band-ink); }
.tellers li > span:last-child { font-size: var(--fs-sm); color: var(--band-muted); line-height: 1.4; }

/* ---------------------------------------------------------------- verkooppunten: a rail line
   Each stop draws the rail to the next stop (.station-rail), so the line starts and ends on a stop
   and every stop sits on its card: centred above it on desktop, beside its heading on phones.
   js/hero.js draws the rails (scale), runs the train from stop to stop and reveals each card. */
.lijn { position: relative; }
.stations { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); --rail: color-mix(in srgb, var(--ink) 60%, transparent); --biels: color-mix(in srgb, var(--burnt) 38%, transparent); }
.station { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 16px; }
.station-stop { position: relative; z-index: 1; width: 16px; height: 16px; margin-top: 28px; border-radius: 5px; background: var(--accent); box-shadow: 0 0 0 4px var(--bg); }
.station--eigen .station-stop { background: var(--ply); box-shadow: inset 0 0 0 2px var(--burnt), 0 0 0 4px var(--bg); }
.station-rail {
  position: absolute; left: 3px; top: 36px; width: 10px; height: calc(100% + var(--gap)); transform-origin: 50% 0;
  background:
    linear-gradient(var(--rail), var(--rail)) 0 0 / 2px 100% no-repeat,
    linear-gradient(var(--rail), var(--rail)) 100% 0 / 2px 100% no-repeat,
    repeating-linear-gradient(180deg, var(--biels) 0 2px, transparent 2px 9px);
}
.trein { display: none; }
.lijn.is-live .trein { display: block; position: absolute; left: 0; top: 0; z-index: 2; width: 14px; height: 26px; border-radius: 4px; background: var(--ink); box-shadow: inset 0 -5px 0 var(--accent), 0 2px 6px rgba(22, 32, 42, .3); visibility: hidden; }
.station-kaart { background: var(--surface); border-radius: var(--r-card); padding: 24px; box-shadow: var(--shadow); height: 100%; }
.station h3 { margin-bottom: 8px; }
.station-adres { color: var(--muted); margin-bottom: 12px; }
.station-links { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; }
.station-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 500; }
.station-links .icon { width: 18px; height: 18px; color: var(--muted); }
.station-noot { font-size: var(--fs-sm); color: var(--muted); margin: 8px 0 0; }
.memoriam { color: var(--muted); font-size: var(--fs-sm); margin: 32px 0 0; }
@media (min-width: 900px) {
  .stations { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .station { grid-template-columns: none; grid-template-rows: 16px 1fr; row-gap: 24px; column-gap: 0; }
  .station-stop { margin: 0; justify-self: center; }
  .station-rail {
    left: 50%; top: 3px; width: calc(100% + var(--gap)); height: 10px; transform-origin: 0 50%;
    background:
      linear-gradient(var(--rail), var(--rail)) 0 0 / 100% 2px no-repeat,
      linear-gradient(var(--rail), var(--rail)) 0 100% / 100% 2px no-repeat,
      repeating-linear-gradient(90deg, var(--biels) 0 2px, transparent 2px 9px);
  }
  .lijn.is-live .trein { width: 26px; height: 14px; box-shadow: inset -5px 0 0 var(--accent), 0 2px 6px rgba(22, 32, 42, .3); }
}

/* ---------------------------------------------------------------- contact */
.contact { background: var(--surface); }
.contact-in { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1024px) { .contact-in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; } .contact-info { grid-column: 1 / span 5; } .formulier { grid-column: 7 / span 6; } }
.contact-info h2 { margin-bottom: 16px; }
.contact-info > p { color: var(--muted); font-size: var(--fs-md); line-height: 1.55; }
.contact-lijst { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 16px; }
.contact-lijst li { display: flex; gap: 12px; align-items: flex-start; }
.contact-lijst .icon { color: var(--accent); margin-top: 3px; width: 20px; height: 20px; }
.contact-lijst a { font-weight: 600; font-size: var(--fs-md); }
.formulier { background: var(--surface-2); border-radius: var(--r-card); padding: 20px; display: grid; gap: 20px; align-content: start; }
@media (min-width: 768px) { .formulier { padding: 32px; } }
.veld { display: grid; gap: 8px; }
.veld label { font-weight: 600; font-size: var(--fs-sm); }
.optioneel { font-weight: 400; color: var(--muted); }
.veld input, .veld textarea { font: inherit; font-size: var(--fs-base); color: var(--ink); background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-in); padding: 0 14px; height: 48px; width: 100%; box-shadow: inset 0 1px 2px rgba(22, 32, 42, .04); transition: border-color var(--t), box-shadow var(--t); }
.veld textarea { height: auto; min-height: 140px; padding: 12px 14px; resize: vertical; }
.veld input::placeholder { color: var(--muted); }
.veld input:focus, .veld textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.formulier .btn { justify-self: start; }
.form-noot { color: var(--muted); font-size: var(--fs-sm); margin: -8px 0 0; }
.form-ok { display: flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 600; margin: 0; }
.form-ok[hidden] { display: none; }
.form-ok .icon { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }

/* ---------------------------------------------------------------- footer */
.voet { padding: 64px 0 32px; font-size: var(--fs-sm); }
.voet-in { display: grid; gap: 32px; }
@media (min-width: 800px) { .voet-in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; } .voet-merk { grid-column: 1 / span 5; } .voet-kol:nth-child(2) { grid-column: 7 / span 3; } .voet-kol:nth-child(3) { grid-column: 10 / span 3; } }
.voet-merk img { height: 36px; width: auto; margin-bottom: 16px; }
.voet-merk p, .voet-kol p { color: var(--muted); }
.voet-kop { color: var(--ink) !important; font-weight: 600; margin-bottom: 12px; }
.voet-onder { border-top: 1px solid var(--hair); margin-top: 32px; padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; color: var(--muted); font-size: var(--fs-xs); }
.voet-onder p { margin: 0; }

/* ---------------------------------------------------------------- product page */
.product { padding-block: 24px var(--sec); }
.kruimel { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; color: var(--muted); margin-bottom: 16px; font-size: var(--fs-sm); }
.kruimel a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; text-decoration: none; }
.kruimel a:hover { text-decoration: underline; }
.kruimel a:first-child { color: var(--ink); font-weight: 600; }
.kruimel .icon { width: 16px; height: 16px; }
.product-in { display: grid; gap: 32px; }
@media (min-width: 960px) {
  .product-in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
  .galerij { grid-column: 1 / span 7; position: sticky; top: calc(var(--kop-h) + 24px); }
  .product-info { grid-column: 8 / span 5; }
}
.galerij-vel { aspect-ratio: 4 / 3; background: #FFFFFF; border-radius: var(--r-card); box-shadow: var(--shadow); overflow: hidden; }
.galerij-hoofd { width: 100%; height: 100%; object-fit: contain; }
.galerij-hoofd.is-plaat { object-fit: cover; }
.galerij-duimen { list-style: none; margin: 12px 0 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.galerij-duimen a { display: block; width: 80px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: #FFFFFF; box-shadow: var(--shadow); opacity: .7; transition: opacity var(--t); }
.galerij-duimen a:hover { opacity: 1; }
.galerij-duimen a[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--accent); }
.galerij-duimen img { width: 100%; height: 100%; object-fit: cover; }
.galerij-credit { color: var(--muted); font-size: var(--fs-sm); margin: 12px 0 0; }
.product-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--muted); font-size: var(--fs-sm); margin: 0 0 12px; }
.product-info h1 { font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -0.018em; margin-bottom: 12px; }
.product-kort { font-size: var(--fs-md); color: var(--muted); }
.product-info .prijs { margin: 0 0 24px; padding: 0; }
.product-info .prijs-bedrag { font-size: var(--fs-lg); }
.product-knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.specs { margin: 32px 0 0; }
.spec { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 16px; align-items: baseline; min-height: 44px; padding: 10px 0; font-variant-numeric: tabular-nums; }
.spec + .spec { border-top: 1px solid var(--hair); }
.spec dt { color: var(--muted); font-size: var(--fs-sm); }
.spec dd { margin: 0; font-size: var(--fs-btn); font-weight: 500; }
.mat-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mat-lijst li { background: var(--chip); border-radius: 999px; padding: 2px 10px; font-size: var(--fs-sm); }
.maatlijn { margin-top: 24px; background: var(--surface); border-radius: var(--r-img); padding: 16px 20px; box-shadow: var(--shadow); }
.maat { display: flex; align-items: center; gap: 12px; color: var(--burnt); font-size: var(--fs-sm); font-weight: 600; }
.maat-lijn { flex: 1; height: 12px; border-left: 1.5px solid currentColor; border-right: 1.5px solid currentColor; position: relative; }
.maat-lijn::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid currentColor; }
.maat-echt { margin: 8px 0 0; color: var(--muted); font-size: var(--fs-sm); }
.maat-echt strong { color: var(--ink); font-weight: 600; }
.product-waar { display: flex; gap: 10px; align-items: flex-start; margin: 24px 0 0; color: var(--muted); font-size: var(--fs-sm); }
.product-waar .icon { color: var(--accent); margin-top: 2px; width: 18px; height: 18px; }
.verwant { padding-top: 0; }
.verwant h2 { margin-bottom: 32px; }
.verwant .grid { margin-bottom: 32px; }
@media (prefers-color-scheme: dark) { .maat { color: var(--ply); } }
@media (prefers-reduced-motion: no-preference) {
  html.motion .p-product .galerij-vel { animation: in-links 650ms cubic-bezier(.22, 1, .36, 1) both; }
  html.motion .p-product .galerij-duimen, html.motion .p-product .galerij-credit { animation: in-op 500ms 250ms ease-out both; }
  html.motion .p-product .product-meta, html.motion .p-product .product-info h1, html.motion .p-product .product-info .prijs, html.motion .p-product .product-knoppen { animation: in-op 500ms ease-out both; }
  html.motion .p-product .product-info h1 { animation-delay: 60ms; }
  html.motion .p-product .product-info .prijs { animation-delay: 120ms; }
  html.motion .p-product .product-knoppen { animation-delay: 160ms; }
  html.motion .p-product .spec { animation: in-op 450ms ease-out both; animation-delay: calc(220ms + var(--i, 0) * 55ms); }
}
@keyframes in-links { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } }
@keyframes in-op { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media print {
  .kop, .formulier, .filters, .maat-bediening { display: none !important; }
  body { background: #fff; }
}

/* Lenis (desktop smooth scroll), from lenis.css 1.3 */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* 3D print stage, richer state (patterns: ghost preview, active layer, raster) */
.pr-raster { stroke: color-mix(in srgb, var(--line) 45%, transparent); stroke-width: 1; fill: none; }
.pr-ghost path { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 6 6; }
.pr-shadow ellipse { fill: #16202A; fill-opacity: .18; }
.pr-vat { fill: #8A6B4E; }
.pr-vat-detail { fill: none; stroke: #4E3A28; stroke-width: 2; stroke-linecap: round; }
.pr-laag { fill: #E2683C; }
.print-voortgang { position: relative; height: 2px; margin-top: 10px; background: var(--hair); overflow: hidden; border-radius: 2px; }
.print-voortgang span { position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; transform: scaleX(1); }