/* ============================================================
   NATIONALE WAARDERINGSBON — "DE BON", winterlichte editie
   Licht winterpapier met een merkgetinte tint, gestrooide
   sterren en sneeuwkristallen als watermerk, warme lichtvlekken,
   witte cadeaulabels, goudfolie op één plek per scherm.
   Tenant levert: --brand-h, --brand-c, --radius-scale, --font-brand.
   ============================================================ */
:root, [data-tenant="nwb"]  { --brand-h: 172; --brand-c: 0.088; --radius-scale: 1;   --font-brand: "Unbounded", "Arial Black", sans-serif; }
[data-tenant="ams"]         { --brand-h: 29;  --brand-c: 0.215; --radius-scale: 0;   --font-brand: "Unbounded", "Arial Black", sans-serif; }
[data-tenant="emc"]         { --brand-h: 268; --brand-c: 0.155; --radius-scale: 1;   --font-brand: "Unbounded", "Arial Black", sans-serif; }
[data-tenant="silv"]        { --brand-h: 303; --brand-c: 0.128; --radius-scale: 1.6; --font-brand: "Unbounded", "Arial Black", sans-serif; }

:root {
  --b50:  oklch(0.985 calc(var(--brand-c) * 0.10) var(--brand-h));
  --b100: oklch(0.963 calc(var(--brand-c) * 0.17) var(--brand-h));
  --b200: oklch(0.925 calc(var(--brand-c) * 0.29) var(--brand-h));
  --b300: oklch(0.870 calc(var(--brand-c) * 0.45) var(--brand-h));
  --b500: oklch(0.680 calc(var(--brand-c) * 0.95) var(--brand-h));
  --b600: oklch(0.585 calc(var(--brand-c) * 1.00) var(--brand-h));
  --b700: oklch(0.500 calc(var(--brand-c) * 0.90) var(--brand-h));
  --b800: oklch(0.420 calc(var(--brand-c) * 0.80) var(--brand-h));
  --b900: oklch(0.335 calc(var(--brand-c) * 0.60) var(--brand-h));
  --b950: oklch(0.225 calc(var(--brand-c) * 0.45) var(--brand-h));
}

/* ---- semantisch: winterpapier ---- */
:root {
  --bg-tint: 1;            /* 0 = zuiver wit, 1 = standaard, 2 = duidelijk merkgetint */
  --pattern-o: 1;          /* sterkte van het sneeuwwatermerk */
  --ground:     oklch(calc(0.995 - 0.022 * var(--bg-tint)) calc(var(--brand-c) * 0.09 * var(--bg-tint)) var(--brand-h));  /* het winterpapier */
  --ground-2:   oklch(0.950 calc(var(--brand-c) * 0.16) var(--brand-h));
  --paper:      #FFFFFF;                                                    /* het label */
  --paper-2:    #F6F2EA;
  --paper-3:    #E9E2D4;
  --ink:        #17181C;
  --ink-2:      #4B4842;
  --ink-3:      #68615A;
  --line:       #E1DACB;
  --ground-line: oklch(0.88 calc(var(--brand-c) * 0.30) var(--brand-h));

  --brand-surf: var(--b100); --brand-line: var(--b300); --brand-text: var(--b900);
  --action: var(--b700); --action-hi: var(--b800); --action-on: #FFFFFF;
  --deep: var(--b950);
  --focus: #17181C;

  --gold-1: #9C7A1B; --gold-2: #C9A227; --gold-3: #F1D27A; --gold-4: #FFF3C4; --gold-ink: #2A2008;
  --ok: #186B41; --ok-s: #E3F1E7;
  --warn: #84550B; --warn-s: #FBF1DE; --warn-l: #E7CE9E;
  --stop: #A32020; --stop-s: #FBEBEA;

  --grain: 0.06;
  --sh-tag: 0 1px 0 #00000010, 0 10px 26px -14px oklch(0.35 calc(var(--brand-c) * 0.6) var(--brand-h) / 0.45);
  --sh-lift: 0 2px 0 #00000010, 0 24px 44px -18px oklch(0.30 calc(var(--brand-c) * 0.6) var(--brand-h) / 0.55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: oklch(0.20 calc(var(--brand-c) * 0.40) var(--brand-h)); --ground-2: oklch(0.24 calc(var(--brand-c) * 0.45) var(--brand-h));
    --paper: #F4EFE6; --paper-2: #E9E2D5; --paper-3: #DCD3C2; --line: #D4CBB8;
    --ground-line: oklch(0.34 calc(var(--brand-c) * 0.5) var(--brand-h));
    --grain: 0.05;
  }
}
:root[data-theme="dark"] {
  --ground: oklch(0.20 calc(var(--brand-c) * 0.40) var(--brand-h)); --ground-2: oklch(0.24 calc(var(--brand-c) * 0.45) var(--brand-h));
  --paper: #F4EFE6; --paper-2: #E9E2D5; --paper-3: #DCD3C2; --line: #D4CBB8;
  --ground-line: oklch(0.34 calc(var(--brand-c) * 0.5) var(--brand-h));
  --grain: 0.05;
}
/* tekst op het winterpapier: licht thema = inkt, donker thema = licht */
:root { --g-ink: var(--ink); --g-ink-2: var(--ink-2); --g-ink-3: var(--ink-3); --g-eyebrow: var(--b950); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --g-ink: #F4EFE6; --g-ink-2: #D9D2C5; --g-ink-3: #B3AB9C; --g-eyebrow: var(--gold-3); } }
:root[data-theme="dark"] { --g-ink: #F4EFE6; --g-ink-2: #D9D2C5; --g-ink-3: #B3AB9C; --g-eyebrow: var(--gold-3); }

:root {
  --font-ui: "Instrument Sans", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --s-2: clamp(0.694rem, 0.687rem + 0.04vw, 0.720rem); --s-1: clamp(0.833rem, 0.814rem + 0.10vw, 0.900rem);
  --s0: clamp(1rem, 0.964rem + 0.18vw, 1.125rem); --s1: clamp(1.2rem, 1.141rem + 0.29vw, 1.406rem);
  --s2: clamp(1.44rem, 1.349rem + 0.45vw, 1.758rem); --s3: clamp(1.728rem, 1.594rem + 0.67vw, 2.197rem);
  --s4: clamp(2.074rem, 1.881rem + 0.96vw, 2.747rem); --s5: clamp(2.5rem, 1.7rem + 3.4vw, 5rem);
  --r-xs: calc(2px * var(--radius-scale)); --r-sm: calc(5px * var(--radius-scale)); --r-md: calc(10px * var(--radius-scale)); --r-lg: calc(18px * var(--radius-scale)); --r-pill: calc(999px * var(--radius-scale));
  --dur-instant: 90ms; --dur-hover: 160ms; --dur-enter: 220ms; --dur-emph: 300ms; --dur-overlay: 340ms;
  --ease-out: cubic-bezier(0.4, 1, 0.6, 1); --ease-out-bold: cubic-bezier(0, 0.4, 0, 1); --ease-inout: cubic-bezier(0.4, 0, 0, 1); --ease-pop: cubic-bezier(0.2, 1.4, 0.4, 1);
  --motion-scale: 1; --wrapw: 1320px; --gut: clamp(1rem, 0.6rem + 2.2vw, 2.75rem);
}
@media (prefers-reduced-motion: reduce) {
  :root { --motion-scale: 0; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ---- basis + winterpapier ---- */
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--ground); color: var(--g-ink);
  font-family: var(--font-ui); font-size: var(--s0); line-height: 1.55; -webkit-font-smoothing: antialiased;
}
/* gestrooide sterren en kristallen als watermerk (één SVG-tile, statisch) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: calc(0.78 * var(--pattern-o));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420' fill='none' stroke='%23000' stroke-opacity='.17' stroke-width='1.6' stroke-linecap='round'%3E%3Cg transform='translate(60 70)'%3E%3Cpath d='M0-22V22M-22 0H22M-15-15 15 15M15-15-15 15'/%3E%3Cpath d='M0-22l-5 6M0-22l5 6M0 22l-5-6M0 22l5-6M-22 0l6-5M-22 0l6 5M22 0l-6-5M22 0l-6 5'/%3E%3C/g%3E%3Cg transform='translate(300 160) scale(.7)'%3E%3Cpath d='M0-22V22M-22 0H22M-15-15 15 15M15-15-15 15'/%3E%3Cpath d='M0-22l-5 6M0-22l5 6M0 22l-5-6M0 22l5-6M-22 0l6-5M-22 0l6 5M22 0l-6-5M22 0l-6 5'/%3E%3C/g%3E%3Cg transform='translate(150 330) scale(.9)'%3E%3Cpath d='M0-22V22M-22 0H22M-15-15 15 15M15-15-15 15'/%3E%3Cpath d='M0-22l-5 6M0-22l5 6M0 22l-5-6M0 22l5-6M-22 0l6-5M-22 0l6 5M22 0l-6-5M22 0l-6 5'/%3E%3C/g%3E%3Cpath d='M230 60l2 6 6 2-6 2-2 6-2-6-6-2 6-2zM380 330l2 6 6 2-6 2-2 6-2-6-6-2 6-2zM40 250l1.5 4 4 1.5-4 1.5-1.5 4-1.5-4-4-1.5 4-1.5zM330 260l1.5 4 4 1.5-4 1.5-1.5 4-1.5-4-4-1.5 4-1.5zM250 400l1.5 4 4 1.5-4 1.5-1.5 4-1.5-4-4-1.5 4-1.5z' fill='%23000' fill-opacity='.16' stroke='none'/%3E%3Ccircle cx='120' cy='180' r='2' fill='%23000' fill-opacity='.18' stroke='none'/%3E%3Ccircle cx='390' cy='90' r='1.6' fill='%23000' fill-opacity='.18' stroke='none'/%3E%3Ccircle cx='200' cy='250' r='1.6' fill='%23000' fill-opacity='.18' stroke='none'/%3E%3C/svg%3E");
  background-size: 420px 420px;
}
/* tweede, grotere laag geeft diepte zonder druk te worden */
#app::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: calc(0.52 * var(--pattern-o));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760' viewBox='0 0 760 760' fill='none' stroke='%23000' stroke-opacity='.10' stroke-width='2.2' stroke-linecap='round'%3E%3Cg transform='translate(140 180) scale(2.2)'%3E%3Cpath d='M0-22V22M-22 0H22M-15-15 15 15M15-15-15 15'/%3E%3Cpath d='M0-22l-5 6M0-22l5 6M0 22l-5-6M0 22l5-6M-22 0l6-5M-22 0l6 5M22 0l-6-5M22 0l-6 5'/%3E%3C/g%3E%3Cg transform='translate(600 560) scale(1.7)'%3E%3Cpath d='M0-22V22M-22 0H22M-15-15 15 15M15-15-15 15'/%3E%3Cpath d='M0-22l-5 6M0-22l5 6M0 22l-5-6M0 22l5-6M-22 0l6-5M-22 0l6 5M22 0l-6-5M22 0l-6 5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 760px 760px;
}
:root[data-theme="dark"] body::before { filter: invert(1); opacity: 0.35; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::before { filter: invert(1); opacity: 0.35; } }
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: var(--grain); mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7313' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
#app { position: relative; z-index: 1; }
h1, h2, h3, h4 { font-family: var(--font-brand); font-weight: 700; margin: 0; line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 5px var(--paper), 0 0 0 7px var(--gold-2) !important; border-radius: var(--r-xs); }
[hidden] { display: none !important; }
.num, .points, td.num, [data-numeric] { font-variant-numeric: tabular-nums slashed-zero; font-feature-settings: "tnum" 1, "zero" 1; }
.wrap { max-width: var(--wrapw); margin-inline: auto; padding-inline: var(--gut); }
.eyebrow { font-family: var(--font-mono); font-size: var(--s-2); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--g-eyebrow); }
.lead { font-size: var(--s1); line-height: 1.4; color: var(--g-ink-2); max-width: 58ch; }
.muted { color: var(--g-ink-3); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.paper, .panel, .sheet, .summary, .buy, .drawer, .modal__box, .fgroup, .tblwrap, .step, .card, .tile, .login__form, .svcbox, .bigbox, .revown { color: var(--ink); }
:is(.paper, .panel, .sheet, .summary, .buy, .drawer, .modal__box, .fgroup, .tblwrap, .step, .card, .tile, .login__form, .svcbox, .bigbox, .revown) .eyebrow { color: var(--ink-3); }
:is(.paper, .panel, .sheet, .summary, .buy, .drawer, .modal__box, .fgroup, .tblwrap, .step, .card, .tile, .login__form, .svcbox, .bigbox, .revown) .lead { color: var(--ink-2); }
:is(.paper, .panel, .sheet, .summary, .buy, .drawer, .modal__box, .fgroup, .tblwrap, .step, .card, .tile, .login__form, .svcbox, .bigbox, .revown) .muted { color: var(--ink-3); }
:is(.paper, .panel, .sheet, .summary, .buy, .drawer, .modal__box) a:not(.btn):not(.tile):not(.card):not(.cat):not(.feat) { color: var(--brand-text); }

/* goudfolie op tekst — één per scherm */
.foil { background-image: linear-gradient(112deg, var(--gold-1) 0%, var(--gold-2) 22%, var(--gold-4) 48%, var(--gold-2) 66%, var(--gold-1) 100%); background-size: 220% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; transition: background-position calc(700ms * var(--motion-scale)) var(--ease-out); }
.foil:hover, .bon:hover .foil, .hero:hover .foil { background-position: 0% 0; }

/* rubberstempel */
.stamp { display: inline-block; font-family: var(--font-brand); font-weight: 900; font-size: var(--s-2); letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; padding: 0.42em 0.6em 0.36em; border: 2.5px solid currentColor; border-radius: var(--r-xs); color: var(--stamp-c, var(--brand-text)); transform: rotate(-5deg);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 5 -1.4'/%3E%3C/filter%3E%3Crect width='120' height='120' fill='white' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(#000 0 0); mask-composite: add; -webkit-mask-composite: source-over; }
.stamp[data-kind="new"] { --stamp-c: var(--ok); } .stamp[data-kind="limited"] { --stamp-c: var(--warn); } .stamp[data-kind="out"] { --stamp-c: var(--stop); }

/* lint */
.ribbon { display: inline-flex; align-items: center; gap: 0.5rem; position: relative; font-family: var(--font-mono); font-size: var(--s-2); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); background: linear-gradient(180deg, var(--gold-3), var(--gold-2)); padding: 0.5em 1.1em 0.45em 0.9em; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%); box-shadow: 0 2px 0 var(--gold-1); }

/* ---- knoppen ---- */
.btn { --bg: var(--action); --fg: var(--action-on); --bd: transparent; display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 46px; padding: 0.65em 1.25em; border: 2px solid var(--bd); border-radius: var(--r-sm); background: var(--bg); color: var(--fg); font-weight: 700; font-size: var(--s-1); cursor: pointer; text-decoration: none; position: relative; box-shadow: 0 2px 0 oklch(from var(--bg) calc(l - 0.18) c h); transition: transform calc(var(--dur-instant) * var(--motion-scale)) var(--ease-out), background-color calc(var(--dur-instant) * var(--motion-scale)) var(--ease-out); }
.btn:hover { --bg: var(--action-hi); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn--gold { --bg: var(--gold-2); --fg: var(--gold-ink); box-shadow: 0 2px 0 var(--gold-1); background-image: linear-gradient(180deg, var(--gold-3), var(--gold-2)); }
.btn--gold:hover { --bg: var(--gold-3); }
.btn--ghost { --bg: transparent; --fg: var(--g-ink); --bd: var(--g-ink); box-shadow: none; }
.btn--ghost:hover { --bg: var(--g-ink); --fg: var(--ground); }
:is(.paper, .panel, .summary, .buy, .modal, .drawer, .sheet, .login__form, .svcbox, .bigbox, .revown, .step, .tile, .fgroup, .tblwrap, .card) .btn--ghost { --fg: var(--ink); --bd: var(--ink); }
:is(.paper, .panel, .summary, .buy, .modal, .drawer, .sheet, .login__form, .svcbox, .bigbox, .revown, .step, .tile, .fgroup, .tblwrap, .card) .btn--ghost:hover { --bg: var(--ink); --fg: var(--paper); }
.btn--quiet { --bg: transparent; --fg: var(--g-ink-2); --bd: transparent; box-shadow: none; min-height: 36px; padding: 0.35em 0.6em; }
.btn--quiet:hover { --fg: var(--g-ink); text-decoration: underline; }
.btn--lg { min-height: 54px; font-size: var(--s0); padding: 0.75em 1.6em; }
.btn--block { width: 100%; }

/* ---- utility + header ---- */
.util { font-size: var(--s-1); color: var(--g-ink-2); border-bottom: 1px solid var(--ground-line); }
.util__in { max-width: var(--wrapw); margin-inline: auto; padding: 0.5rem var(--gut); display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.util__promise { display: flex; align-items: center; gap: 0.5rem; }
.util__spacer { flex: 1 1 auto; }
.langsw { display: flex; gap: 2px; border: 1px solid var(--ground-line); border-radius: var(--r-sm); padding: 2px; }
.langsw button { border: 0; background: transparent; color: var(--g-ink-3); cursor: pointer; font-family: var(--font-mono); font-size: var(--s-2); padding: 0.2em 0.55em; border-radius: var(--r-xs); min-height: 26px; }
.langsw button[aria-pressed="true"] { background: var(--g-ink); color: var(--ground); }
.hdr { position: sticky; top: 0; z-index: 40; background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 #00000014, 0 12px 30px -20px oklch(0.3 calc(var(--brand-c) * 0.6) var(--brand-h) / 0.5); }
.hdr__in { max-width: var(--wrapw); margin-inline: auto; padding: 0.55rem var(--gut); display: flex; align-items: center; gap: clamp(0.6rem, 1.6vw, 1.5rem); }
.logo { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--ink); flex: none; }
.logo__mark { width: 42px; height: 42px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--action); color: var(--action-on); font-family: var(--font-brand); font-weight: 900; font-size: 0.8rem; letter-spacing: -0.04em; box-shadow: inset 0 0 0 2px #ffffff40, 0 2px 0 oklch(from var(--action) calc(l - 0.18) c h); }
.logo__txt { font-family: var(--font-brand); font-weight: 700; font-size: var(--s-1); line-height: 1.05; letter-spacing: -0.02em; }
.logo__txt span { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 500; color: var(--ink-3); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 3px; }
.nav { display: flex; gap: 0.05rem; margin-left: auto; }
.nav a { position: relative; text-decoration: none; color: var(--ink-2); font-size: var(--s-1); font-weight: 600; padding: 0.7em 0.7em; white-space: nowrap; }
.nav a::after { content: ""; position: absolute; left: 0.7em; right: 0.7em; bottom: 0.35em; height: 3px; background: var(--action); transform: scaleX(0); transform-origin: left; transition: transform calc(var(--dur-hover) * var(--motion-scale)) var(--ease-out); }
.nav a:hover { color: var(--ink); } .nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink); } .nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--gold-2); }
/* zoekbalk in de header: typ en zie resultaten */
.search { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 0.5rem 0 0.8rem; border: 2px solid var(--line); border-radius: var(--r-pill); background: var(--paper-2); color: var(--ink); flex: 0 1 360px; min-width: 170px; }
.search:focus-within { border-color: var(--ink); background: #fff; }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; color: inherit; font: inherit; font-size: var(--s-1); outline: none !important; box-shadow: none !important; }
.search input::placeholder { color: var(--ink-3); }
.search button { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-pill); }
.search button:hover { color: var(--ink); background: var(--paper-3); }
.hdr__tools { display: flex; align-items: center; gap: 0.2rem; flex: none; margin-left: auto; }
.nav { margin-left: 0; }
@media (min-width: 1321px) { .nav { margin-left: auto; } .hdr__tools { margin-left: 0; } }
.icobtn { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid transparent; border-radius: var(--r-sm); background: transparent; cursor: pointer; color: var(--ink); }
.icobtn:hover { border-color: var(--ink); }
.icobtn__n { position: absolute; top: 1px; right: 1px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px; border-radius: var(--r-pill); background: var(--gold-2); color: var(--gold-ink); font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums; }
.burger { display: none; }

/* ---- DE BON ---- */
.balance { padding: clamp(1rem, 2.4vw, 1.75rem) 0 0; }
.balance__in { max-width: var(--wrapw); margin-inline: auto; padding-inline: var(--gut); }
.bon { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; background: var(--paper); color: var(--ink); border-radius: var(--r-md); box-shadow: var(--sh-tag); transform: rotate(-0.4deg); transition: transform calc(var(--dur-emph) * var(--motion-scale)) var(--ease-out); }
.bon:hover { transform: rotate(0deg); }
.bon::before, .bon::after { content: ""; position: absolute; top: 50%; width: 22px; height: 22px; border-radius: 50%; background: var(--ground); transform: translateY(-50%); box-shadow: inset 0 1px 3px #00000033; }
.bon::before { left: -11px; } .bon::after { right: -11px; }
.bon__main { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); padding: 1rem clamp(1.25rem, 3vw, 2.25rem); flex-wrap: wrap; }
.bal { display: flex; align-items: baseline; gap: 0.6rem; }
.bal__n { font-family: var(--font-brand); font-weight: 900; font-size: var(--s4); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.bal__u { font-family: var(--font-brand); font-weight: 700; font-size: var(--s-1); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
.bal__sub { font-size: var(--s-1); color: var(--ink-2); }
.bal__ster { display: flex; align-items: center; gap: .4rem; margin-top: .35rem; font-size: var(--s-2); color: var(--brand-text); font-weight: 600; }
.bal__ster svg { width: 14px; height: 14px; } .bal__sub b { color: var(--ink); font-variant-numeric: tabular-nums; }
.bal__bar { flex: 1 1 200px; min-width: 140px; max-width: 320px; height: 10px; border-radius: var(--r-pill); background: var(--paper-3); overflow: hidden; box-shadow: inset 0 1px 2px #00000022; }
.bal__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--action), var(--b500)); }
.bon__stub { position: relative; display: grid; align-content: center; gap: 0.3rem; padding: 1rem 1.25rem 1rem 1.6rem; border-left: 2px dashed var(--line); min-width: 230px; }
.deadline { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; font-size: var(--s-1); color: var(--warn); white-space: nowrap; }
.bon__serial { font-family: var(--font-mono); font-size: var(--s-2); color: var(--ink-3); letter-spacing: 0.08em; }
.topup { margin-top: 0.4rem; min-height: 36px; padding: 0.3em 0.75em; font-size: var(--s-2); }
@media (max-width: 760px) { .bon { grid-template-columns: minmax(0,1fr); } .bon__stub { border-left: 0; border-top: 2px dashed var(--line); } .bon::before, .bon::after { display: none; } }

/* ---- secties ---- */
.sect { padding-block: clamp(2.5rem, 5vw, 4.25rem); }
#app .skin[id^="sec-"] > .wrap.sect { padding-block: clamp(3.5rem, 8vw, 7.5rem); }
#app .skin[id^="sec-"] + .skin[id^="sec-"] > .wrap.sect { padding-top: clamp(3.5rem, 8vw, 7.5rem); }
.sect__hd { margin-bottom: clamp(1.4rem, 2.6vw, 2.2rem); }
/* Rustige binnenkomst per sectie: alleen bij het eerste zicht, nooit bij reduced motion. */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity calc(620ms * var(--motion-scale)) var(--ease-out), transform calc(620ms * var(--motion-scale)) var(--ease-out-bold); transition-delay: calc(var(--rd, 0) * 70ms * var(--motion-scale)); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }
.skel { position: relative; overflow: hidden; background: var(--paper-2); border-radius: var(--r-md); min-height: 180px; }
.skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #ffffffaa, transparent); transform: translateX(-100%); animation: shim 1200ms var(--ease-inout) infinite; }
@keyframes shim { to { transform: translateX(100%); } }
.sect--tight { padding-block: clamp(1.25rem, 2.5vw, 2rem); }
.sect__hd { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.sect__hd h2 { font-size: var(--s3); color: var(--g-ink); }
.sheet .sect__hd h2, .paper .sect__hd h2 { color: var(--ink); }

/* ---- HERO ---- */
.hero { position: relative; }
.hero__in { max-width: var(--wrapw); margin-inline: auto; padding: clamp(1.5rem, 3.5vw, 3rem) var(--gut) 0; display: grid; gap: clamp(1rem, 3vw, 2.5rem); grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; }
.hero h1 { font-size: var(--s5); color: var(--g-ink); max-width: 14ch; }
.hero h1 em { font-style: normal; }
.hero__lead { font-size: var(--s1); color: var(--g-ink-2); max-width: 44ch; margin-top: 1rem; line-height: 1.45; }
.hero__cta { display: flex; gap: 0.7rem; margin-top: 1.5rem; flex-wrap: wrap; }
.hero__art { position: relative; aspect-ratio: 5 / 4; border-radius: var(--r-md); background: var(--paper); color: var(--ink); box-shadow: var(--sh-lift); transform: rotate(2.2deg); display: grid; grid-template-rows: 1fr auto; overflow: hidden; transition: transform calc(var(--dur-emph) * var(--motion-scale)) var(--ease-out); }
.hero__art:hover { transform: rotate(0.6deg); }
.hero__art::before { content: ""; position: absolute; top: 14px; left: 50%; width: 18px; height: 18px; border-radius: 50%; background: var(--ground); transform: translateX(-50%); box-shadow: inset 0 1px 3px #00000055, 0 0 0 4px var(--paper-3); z-index: 2; }
.hero__art::after { content: ""; position: absolute; top: -40px; left: 50%; width: 3px; height: 62px; background: var(--gold-2); transform: translateX(-50%) rotate(-12deg); transform-origin: bottom; z-index: 1; }
.hero__img { position: relative; background: linear-gradient(160deg, var(--b100), var(--b200)); display: grid; place-items: center; text-align: center; padding: 2rem 1.5rem 1rem; color: var(--brand-text); font-size: var(--s-1); overflow: hidden; }
.hero__img span { max-width: 26ch; position: relative; }
.hero__img::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 40% at 70% 30%, #ffffffaa, transparent 70%); }
.hero__tag { padding: 0.9rem 1.2rem; border-top: 2px dashed var(--line); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.hero__tag b { font-family: var(--font-brand); font-size: var(--s-1); }
.hero__tag span { font-family: var(--font-mono); font-size: var(--s-2); color: var(--ink-3); letter-spacing: 0.1em; }
@media (max-width: 900px) { .hero__in { grid-template-columns: minmax(0,1fr); } .hero__art { max-width: 420px; aspect-ratio: 4/3; transform: rotate(1.2deg); } }

/* ---- CADEAUKOMPAS (quiz) ---- */
.kompas { background: var(--paper); color: var(--ink); border-radius: var(--r-lg); box-shadow: var(--sh-lift); padding: clamp(1.25rem, 3vw, 2.25rem); display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; position: relative; overflow: hidden; }
.kompas::before { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, var(--gold-4), transparent 70%); pointer-events: none; }
@media (max-width: 900px) { .kompas { grid-template-columns: minmax(0,1fr); } }
.kompas h2 { font-size: var(--s3); }
.kompas__q { display: grid; gap: 0.9rem; }
.kq { display: grid; gap: 0.45rem; }
.kq > b { font-size: var(--s-1); }
.kq__opts { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.kopt { min-height: 40px; padding: 0.35em 0.9em; border: 2px solid var(--line); border-radius: var(--r-pill); background: #fff; font-size: var(--s-1); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; }
.kopt:hover { border-color: var(--ink); }
.kopt[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.kompas__res { display: grid; gap: 0.75rem; align-content: start; }
.kompas__res .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
@media (max-width: 600px) { .kompas__res .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- BENTO als stapel labels ---- */
.bento { display: grid; gap: clamp(0.75rem, 1.4vw, 1.1rem); grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tile { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: end; gap: 0.35rem; min-height: 200px; padding: 1.2rem 1.25rem 1.1rem; border-radius: var(--r-md); background: var(--paper); color: var(--ink); text-decoration: none; box-shadow: var(--sh-tag); transition: transform calc(var(--dur-hover) * var(--motion-scale)) var(--ease-out), box-shadow calc(var(--dur-hover) * var(--motion-scale)) var(--ease-out); }
.tile:hover { transform: translateY(-4px) rotate(-0.6deg); box-shadow: var(--sh-lift); }
.tile:nth-child(even):hover { transform: translateY(-4px) rotate(0.6deg); }
.tile h3 { font-size: var(--s1); }
.tile p { font-size: var(--s-1); color: var(--ink-2); max-width: 36ch; }
.tile .eyebrow { color: var(--ink-3); }
.tile__go { font-family: var(--font-mono); font-size: var(--s-2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-text); margin-top: 0.4rem; display: inline-flex; align-items: center; gap: 0.4rem; }
.tile__ico { position: absolute; top: 1rem; left: 1.1rem; width: 44px; height: 44px; border-radius: var(--r-pill); display: grid; place-items: center; background: var(--b100); color: var(--brand-text); }
.tile__ico svg { width: 22px; height: 22px; }
.tile--wide { grid-column: span 3; } .tile--mid { grid-column: span 2; }
.tile--tall { grid-column: span 2; grid-row: span 2; min-height: 420px; }
.tile--brand { background: var(--b100); } .tile--brand .tile__ico { background: var(--paper); }
.tile--wash { background: var(--action); color: var(--action-on); }
.tile--wash p { color: #ffffffea; } .tile--wash .tile__go { color: #ffffff; } .tile--wash .eyebrow { color: #ffffffe0; }
.tile--gold { background: linear-gradient(160deg, var(--gold-4), var(--gold-3)); }
.tile--gold .tile__ico { background: var(--paper); color: var(--gold-1); } .tile--gold .tile__go { color: var(--gold-ink); }
.tile__ph { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--paper) 38%, transparent 82%), linear-gradient(160deg, var(--b100), var(--b200)); }
.tile__ph::after { content: attr(data-label); position: absolute; top: 12px; left: 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line); padding: 0.3em 0.5em; background: var(--paper); }
@media (max-width: 900px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile--wide, .tile--mid, .tile--tall { grid-column: span 2; grid-row: auto; min-height: 170px; } }

/* ---- categorietegels met icoon (webshop) ---- */
.cats { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.cat { display: grid; gap: 0.6rem; justify-items: start; padding: 1rem 1rem 0.9rem; background: var(--paper); color: var(--ink); border-radius: var(--r-md); text-decoration: none; box-shadow: var(--sh-tag); transition: transform calc(var(--dur-hover) * var(--motion-scale)) var(--ease-out), box-shadow calc(var(--dur-hover) * var(--motion-scale)) var(--ease-out); position: relative; overflow: hidden; }
.cat:hover { transform: translateY(-4px) rotate(-0.8deg); box-shadow: var(--sh-lift); }
.cat:nth-child(even):hover { transform: translateY(-4px) rotate(0.8deg); }
.cat__ico { width: 54px; height: 54px; border-radius: var(--r-pill); display: grid; place-items: center; background: var(--b100); color: var(--brand-text); }
.cat__ico svg { width: 26px; height: 26px; }
.cat b { font-size: var(--s-1); line-height: 1.2; }
.cat span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--ink-3); text-transform: uppercase; }
.cat[aria-current="true"] { outline: 3px solid var(--gold-2); }

/* ---- populair-carrousel, recept, aftellen, impact ---- */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(212px, 1fr); gap: 0.9rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 4px 16px; scrollbar-width: thin; }
.rail > * { scroll-snap-align: start; }
.trio { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .trio { grid-template-columns: minmax(0, 1fr); } }
.fcard { background: var(--paper); color: var(--ink); border-radius: var(--r-md); box-shadow: var(--sh-tag); padding: 1.2rem 1.25rem; display: grid; gap: 0.5rem; align-content: start; position: relative; overflow: hidden; min-height: 220px; }
.fcard h3 { font-size: var(--s1); }
.fcard p { font-size: var(--s-1); color: var(--ink-2); }
.fcard--count { background: var(--action); color: var(--action-on); }
.fcard--count .eyebrow, .fcard--count p { color: #ffffffea; }
.fcard--count .big { font-family: var(--font-brand); font-weight: 900; font-size: var(--s5); line-height: 1; letter-spacing: -0.04em; }
.fcard--count .big small { font-family: var(--font-mono); font-size: var(--s-1); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; margin-left: 0.4rem; }
.fcard--recipe .rimg { aspect-ratio: 16 / 9; border-radius: var(--r-sm); background: linear-gradient(140deg, #F3D9B1, #E7B77E 60%, #C98A4B); display: grid; place-items: center; color: #5a3a17; font-family: var(--font-mono); font-size: var(--s-2); letter-spacing: 0.1em; text-transform: uppercase; }
.impact { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.impact div { background: var(--paper); color: var(--ink); border-radius: var(--r-md); padding: 1rem 1.1rem; box-shadow: var(--sh-tag); }
.impact b { display: block; font-family: var(--font-brand); font-size: var(--s3); letter-spacing: -0.04em; line-height: 1; }
.impact span { font-size: var(--s-2); color: var(--ink-2); display: block; margin-top: 0.35rem; }
.dots { display: flex; gap: 0.35rem; margin: 0.25rem 0; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--paper-3); display: block; }
.dots i[data-on="1"] { background: var(--gold-2); }

/* ---- PLP ---- */
.plp { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
@media (max-width: 1000px) { .plp { grid-template-columns: minmax(0, 1fr); } }
.side { position: sticky; top: 118px; display: grid; gap: 0.8rem; max-height: calc(100vh - 134px); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-width: thin; }
@media (max-width: 1000px) { .side { position: static; display: none; } .side.is-open { display: grid; } }
.fgroup { background: var(--paper); border-radius: var(--r-md); box-shadow: var(--sh-tag); overflow: hidden; }
.fgroup > summary { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.8rem 1rem; cursor: pointer; list-style: none; font-family: var(--font-mono); font-size: var(--s-2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.fgroup > summary::-webkit-details-marker { display: none; }
.fgroup > summary::after { content: "−"; color: var(--ink-3); font-family: var(--font-ui); }
.fgroup:not([open]) > summary::after { content: "+"; }
.fgroup__body { padding: 0 0.7rem 0.8rem; display: grid; gap: 0.1rem; }
.fopt { display: flex; align-items: center; gap: 0.6rem; min-height: 40px; padding: 0.25rem 0.4rem; border-radius: var(--r-sm); font-size: var(--s-1); cursor: pointer; }
.fopt:hover { background: var(--paper-2); }
.fopt input { width: 20px; height: 20px; accent-color: var(--action); flex: none; margin: 0; }
.fopt__ico { width: 28px; height: 28px; border-radius: var(--r-pill); background: var(--b100); color: var(--brand-text); display: grid; place-items: center; flex: none; }
.fopt__ico svg { width: 15px; height: 15px; }
.fopt__n { margin-left: auto; color: var(--ink-3); font-family: var(--font-mono); font-size: var(--s-2); }
.fopt[data-empty="1"] { opacity: 0.45; pointer-events: none; }
.fhint { display: flex; gap: 0.5rem; font-size: var(--s-2); color: var(--ink-2); border-top: 2px dashed var(--line); padding-top: 0.6rem; margin-top: 0.4rem; }
.plp__bar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; color: var(--g-ink-2); }
.plp__count { font-size: var(--s-1); } .plp__count b { color: var(--g-ink); font-family: var(--font-brand); font-variant-numeric: tabular-nums; }
.switch { display: inline-flex; align-items: center; gap: 0.6rem; font-size: var(--s-1); font-weight: 600; cursor: pointer; color: var(--g-ink); }
.switch input { appearance: none; width: 44px; height: 26px; border-radius: 999px; background: var(--paper-3); position: relative; cursor: pointer; margin: 0; transition: background-color var(--dur-hover) var(--ease-out); border: 0; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0004; transition: transform var(--dur-hover) var(--ease-out); }
.switch input:checked { background: var(--gold-2); } .switch input:checked::after { transform: translateX(18px); }
.sortsel { margin-left: auto; min-height: 42px; padding: 0.4em 0.9em; border: 2px solid var(--line); border-radius: var(--r-pill); background: var(--paper); color: var(--ink); font-size: var(--s-1); font-weight: 600; }
.applied { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.achip { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 32px; padding: 0.2em 0.3em 0.2em 0.75em; border-radius: var(--r-pill); background: var(--paper); color: var(--ink); font-size: var(--s-2); font-weight: 600; box-shadow: var(--sh-tag); }
.achip button { width: 24px; height: 24px; display: grid; place-items: center; border: 0; background: transparent; color: inherit; cursor: pointer; border-radius: var(--r-pill); }
.achip button:hover { background: #00000014; }
.pchip { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 40px; padding: 0.35em 0.9em; border: 2px solid var(--line); border-radius: var(--r-pill); background: var(--paper); color: var(--ink); font-size: var(--s-1); font-weight: 600; cursor: pointer; }
.pchip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pchip__n { font-family: var(--font-mono); font-size: var(--s-2); opacity: 0.8; }

/* ---- PRODUCTKAART = CADEAULABEL, vaste hoogte, rustig ---- */
.grid { display: grid; gap: clamp(0.75rem, 1.4vw, 1.2rem); grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); align-items: stretch; grid-auto-flow: row dense; }
.card { --pad: 12px; position: relative; display: flex; flex-direction: column; border-radius: var(--r-md); background: var(--paper); padding: var(--pad); text-align: left; cursor: pointer; isolation: isolate; box-shadow: var(--sh-tag); transition: transform calc(var(--dur-hover) * var(--motion-scale)) var(--ease-out), box-shadow calc(var(--dur-hover) * var(--motion-scale)) var(--ease-out); }
.card:hover { transform: translateY(-5px) rotate(-0.5deg); box-shadow: var(--sh-lift); }
.card:nth-child(even):hover { transform: translateY(-5px) rotate(0.5deg); }
.card::before { content: ""; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; background: var(--ground); box-shadow: 0 0 0 3px var(--paper), inset 0 1px 3px #00000055; z-index: 3; }
.card__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: max(0px, calc(var(--r-md) - 6px)); background: var(--paper-2); display: grid; place-items: center; margin-top: 6px; }
.card__media > .ph { font-family: var(--font-brand); font-weight: 900; font-size: var(--s0); color: var(--paper-3); letter-spacing: -0.03em; padding: 14%; text-align: center; line-height: 1.02; text-transform: uppercase; }
.card__badge { position: absolute; top: 10px; left: 8px; z-index: 2; }
.lbs { position: absolute; top: 8px; left: 8px; z-index: 3; display: flex; gap: 4px; }
.lb2 { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--r-xs); background: var(--deep); color: #fff; box-shadow: 0 1px 3px #00000033; }
.lb2 svg { width: 15px; height: 15px; }
.lb2[data-t="duurzaam"] { background: var(--ok); }
.lb2[data-t="sociaal"] { background: var(--b700); }
.lb2[data-t="new"] { background: var(--gold-2); color: var(--gold-ink); }
.lb2[data-t="limited"], .lb2[data-t="low"] { background: var(--warn); color: #fff; }
.lb2[data-t="out"] { background: var(--stop); color: #fff; }
.card__pts--rng { font-size: clamp(0.95rem, 1.5vw, var(--s1)); letter-spacing: -0.03em; white-space: nowrap; }
.card__pts { white-space: nowrap; }
.card__foot { min-width: 0; }
.card__pts--rng small { margin-left: .25em; }
.card__add--off { border-color: var(--line); color: var(--ink-3); background: var(--paper-2); cursor: pointer; }
.card__add--off:hover { background: var(--paper-3); color: var(--ink-2); border-color: var(--ink-3); }
.card__fav { position: absolute; top: 6px; right: 6px; z-index: 2; width: 36px; height: 36px; display: grid; place-items: center; border: 2px solid transparent; border-radius: var(--r-pill); background: var(--paper); cursor: pointer; color: var(--ink); box-shadow: 0 1px 3px #00000022; }
.card__fav:hover { border-color: var(--ink); } .card__fav[aria-pressed="true"] { color: var(--stop); }
.card__body { padding-top: 0.75rem; display: flex; flex-direction: column; gap: 0.2rem; flex: 1; }
.card__brand { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.card__title { font-family: var(--font-ui); font-weight: 700; font-size: var(--s-1); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; letter-spacing: 0; min-height: calc(2 * 1.3em); }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; padding-top: 0.75rem; border-top: 2px dashed var(--line); margin-top: 0.7rem; }
.card__pts { font-family: var(--font-brand); font-size: var(--s1); font-weight: 900; color: var(--ink); line-height: 1; letter-spacing: -0.04em; }
.card__pts small { font-family: var(--font-mono); font-size: 10px; font-weight: 500; color: var(--ink-3); margin-left: 0.3em; letter-spacing: 0.1em; text-transform: uppercase; }
.card__add { min-height: 34px; width: 34px; padding: 0; border-radius: var(--r-pill); border: 2px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; flex: none; }
.card__add:hover { background: var(--ink); color: var(--paper); }
.card__short { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--warn); white-space: nowrap; flex: none; }
.card[data-afford="0"] .card__media { opacity: 0.6; filter: saturate(0.6); }

.card__swatches { display: flex; gap: 4px; position: absolute; left: 10px; bottom: 10px; z-index: 2; }
.card__swatches i { width: 12px; height: 12px; border-radius: var(--r-pill); border: 2px solid #fff; box-shadow: 0 0 0 1px #0002; display: block; }
.loadmore { display: grid; place-items: center; margin-top: 1.6rem; }

/* ---- PDP ---- */
.pdp { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; }
@media (max-width: 900px) { .pdp { grid-template-columns: minmax(0, 1fr); } }
.crumbs { display: flex; gap: 0.5rem; flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--s-2); letter-spacing: 0.06em; color: var(--g-ink-3); margin-bottom: 1rem; }
.crumbs a { color: var(--g-ink); text-decoration: none; } .crumbs a:hover { text-decoration: underline; }
.gal { display: grid; gap: 0.6rem; }
.gal__main { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-md); background: var(--paper); box-shadow: var(--sh-tag); display: grid; place-items: center; overflow: hidden; color: var(--ink); }
.gal__main .ph { font-family: var(--font-brand); font-weight: 900; font-size: var(--s4); color: var(--paper-3); text-transform: uppercase; }
.gal__zoom { position: absolute; bottom: 12px; right: 12px; min-height: 36px; padding: 0.3em 0.8em; border-radius: var(--r-sm); border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font-size: var(--s-2); font-weight: 700; cursor: pointer; }
.gal__thumbs { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.gal__thumbs button { width: 68px; aspect-ratio: 1; border-radius: var(--r-sm); border: 2px solid transparent; background: var(--paper); color: var(--ink-3); cursor: pointer; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; box-shadow: var(--sh-tag); }
.gal__thumbs button[aria-pressed="true"] { border-color: var(--gold-2); }
.gal__cap { font-size: var(--s-2); color: var(--g-ink-3); }
.buy { position: sticky; top: 78px; display: grid; gap: 0.9rem; border-radius: var(--r-md); background: var(--paper); padding: clamp(1rem, 2vw, 1.5rem); box-shadow: var(--sh-lift); }
.buy::before { content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 16px; height: 16px; border-radius: 50%; background: var(--ground); box-shadow: 0 0 0 3px var(--paper), inset 0 1px 3px #00000055; }
@media (max-width: 900px) { .buy { position: relative; } }
.buy h1 { font-size: var(--s2); }
.buy__pts { display: flex; align-items: baseline; gap: 0.5rem; padding-top: 0.6rem; border-top: 2px dashed var(--line); }
.buy__pts b { font-family: var(--font-brand); font-size: var(--s3); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.04em; }
.buy__afford { font-size: var(--s-1); color: var(--ink-2); } .buy__afford b { font-variant-numeric: tabular-nums; color: var(--ink); }
.stock { display: flex; align-items: center; gap: 0.45rem; font-size: var(--s-1); font-weight: 700; }
.stock[data-s="in"] { color: var(--ok); } .stock[data-s="low"] { color: var(--warn); } .stock[data-s="out"] { color: var(--stop); }
.stock i { width: 9px; height: 9px; border-radius: var(--r-pill); background: currentColor; }
.qty { display: flex; align-items: center; gap: 0.25rem; }
.qty button { width: 40px; height: 40px; border: 2px solid var(--ink); border-radius: var(--r-sm); background: transparent; color: var(--ink); cursor: pointer; font-size: 18px; }
.qty button:hover { background: var(--ink); color: var(--paper); }
.qty input { width: 56px; height: 40px; text-align: center; font-variant-numeric: tabular-nums; border: 2px solid var(--line); border-radius: var(--r-sm); background: #fff; color: var(--ink); font-weight: 700; }
.buy__note { font-size: var(--s-2); color: var(--ink-3); }
.giftrow { display: flex; align-items: start; gap: 0.55rem; font-size: var(--s-1); border: 2px dashed var(--line); border-radius: var(--r-sm); padding: 0.65rem 0.75rem; }
.specs { width: 100%; border-collapse: collapse; font-size: var(--s-1); }
.specs th, .specs td { text-align: left; padding: 0.5rem 0.65rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.specs th { font-weight: 500; color: var(--ink-3); width: 42%; }
.specs tr:last-child th, .specs tr:last-child td { border-bottom: 0; }
.panel { border-radius: var(--r-md); background: var(--paper); overflow: hidden; box-shadow: var(--sh-tag); }
.panel > summary { display: flex; align-items: center; justify-content: space-between; padding: 0.95rem 1.15rem; cursor: pointer; list-style: none; font-family: var(--font-brand); font-weight: 700; font-size: var(--s0); letter-spacing: -0.02em; }
.panel > summary::-webkit-details-marker { display: none; }
.panel > summary::after { content: "−"; color: var(--ink-3); font-family: var(--font-ui); font-weight: 400; }
.panel:not([open]) > summary::after { content: "+"; }
.panel__body { padding: 0 1.15rem 1.15rem; display: grid; gap: 0.8rem; }
.panel__body p { font-size: var(--s-1); color: var(--ink-2); max-width: 66ch; }
.bullets { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; font-size: var(--s-1); color: var(--ink-2); }

/* ---- formulieren ---- */
.form { display: grid; gap: 1rem; max-width: 560px; }
.field { display: grid; gap: 0.3rem; }
.field > label { font-size: var(--s-1); font-weight: 700; }
.field > .hint { font-size: var(--s-2); color: var(--ink-3); }
.field input, .field select, .field textarea { min-height: 46px; padding: 0.55em 0.75em; border: 2px solid var(--line); border-radius: var(--r-sm); background: #FFFDF9; color: var(--ink); font: inherit; font-size: var(--s-1); width: 100%; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ink); }
.field--zip { max-width: 9ch; } .field--nr { max-width: 8ch; } .field--ext { max-width: 6.5rem; } .field--name, .field--mail { max-width: 30ch; }
.row { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: end; }
.field .err { font-size: var(--s-2); font-weight: 700; color: var(--stop); }
.field[data-invalid] input { border-color: var(--stop); }
.radiocards { display: grid; gap: 0.6rem; }
.rcard { display: flex; align-items: start; gap: 0.75rem; padding: 0.9rem 1rem; border: 2px solid var(--line); border-radius: var(--r-md); background: #FFFDF9; cursor: pointer; color: var(--ink); }
.rcard:hover { border-color: var(--ink-3); }
.rcard input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--action); flex: none; }
.rcard:has(input:checked) { border-color: var(--ink); background: var(--paper-2); }
.rcard b { font-size: var(--s-1); } .rcard span { display: block; font-size: var(--s-2); color: var(--ink-2); }
.rcard .free { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--ok); margin-left: auto; white-space: nowrap; }
.checkrow { display: flex; align-items: start; gap: 0.6rem; font-size: var(--s-1); }
.checkrow input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--action); flex: none; }
.errsum { border: 2px solid var(--stop); background: var(--stop-s); color: var(--stop); border-radius: var(--r-md); padding: 0.85rem 1rem; font-size: var(--s-1); }
.errsum ul { margin: 0.4rem 0 0; padding-left: 1.1rem; } .errsum a { color: inherit; }
.summary { border-radius: var(--r-md); background: var(--paper); padding: 1.15rem; display: grid; gap: 0.8rem; position: sticky; top: 78px; box-shadow: var(--sh-tag); }
.sline { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; font-size: var(--s-1); }
.sline--tot { font-weight: 800; font-size: var(--s0); padding-top: 0.7rem; border-top: 2px dashed var(--line); font-family: var(--font-brand); }
.sline b { font-variant-numeric: tabular-nums; }
.two { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: start; }
@media (max-width: 900px) { .two { grid-template-columns: minmax(0, 1fr); } .summary { position: static; } }
.sheet { background: var(--paper); border-radius: var(--r-md); box-shadow: var(--sh-tag); padding: clamp(1.25rem, 3vw, 2.25rem); }
.sheet form.form { max-width: none; }
.tabs { display: flex; gap: 0.4rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.tab { min-height: 42px; padding: 0.4em 1em; border-radius: var(--r-pill); border: 2px solid var(--line); background: var(--paper); color: var(--ink); font-weight: 700; font-size: var(--s-1); cursor: pointer; }
.tab[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---- drawer ---- */
.scrim { position: fixed; inset: 0; z-index: 60; background: oklch(0.2 0.02 var(--brand-h) / 0.45); opacity: 0; pointer-events: none; transition: opacity calc(var(--dur-overlay) * var(--motion-scale)) var(--ease-inout); }
.scrim.is-open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(440px, 100%); background: var(--paper); color: var(--ink); display: flex; flex-direction: column; transform: translateX(100%); transition: transform calc(var(--dur-overlay) * var(--motion-scale)) var(--ease-inout); box-shadow: -20px 0 60px -20px #0006; }
.drawer.is-open { transform: translateX(0); }
.drawer__hd { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.2rem; border-bottom: 2px dashed var(--line); }
.drawer__hd h2 { font-size: var(--s1); }
.drawer__bal { margin: 1rem 1.2rem; padding: 0.8rem 0.95rem; border-radius: var(--r-sm); background: var(--paper-2); display: grid; gap: 0.25rem; font-size: var(--s-1); }
.drawer__bal .l { display: flex; justify-content: space-between; gap: 0.5rem; } .drawer__bal b { font-variant-numeric: tabular-nums; font-family: var(--font-brand); }
.drawer__items { flex: 1; overflow: auto; padding: 0 1.2rem; display: grid; gap: 0.7rem; align-content: start; }
.litem { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 0.7rem; align-items: center; }
.litem__ph { aspect-ratio: 1; border-radius: var(--r-sm); background: var(--paper-2); }
.litem b { font-size: var(--s-1); font-weight: 700; display: block; } .litem span { font-size: var(--s-2); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.litem button { width: 32px; height: 32px; border: 2px solid var(--line); border-radius: var(--r-sm); background: transparent; cursor: pointer; color: var(--ink-3); }
.litem button:hover { color: var(--stop); border-color: var(--stop); }
.drawer__ft { padding: 1.2rem; border-top: 2px dashed var(--line); display: grid; gap: 0.5rem; }
.restnudge { margin: 0 1.2rem 1rem; padding: 0.8rem 0.95rem; border-radius: var(--r-sm); border: 2px dashed var(--gold-2); font-size: var(--s-2); display: grid; gap: 0.5rem; }
.restnudge b { font-size: var(--s-1); font-family: var(--font-brand); }
.restnudge ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.2rem; color: var(--ink-2); }
.empty { padding: 2rem 0; text-align: center; color: var(--g-ink-3); font-size: var(--s-1); }
.drawer .empty { color: var(--ink-3); }

/* ---- floating acties ---- */
.fabs { position: fixed; left: 14px; bottom: 14px; z-index: 50; display: grid; gap: 8px; justify-items: start; }
.fab { width: 48px; height: 48px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: var(--r-pill); background: var(--paper); color: var(--ink); cursor: pointer; box-shadow: 0 3px 0 var(--ink); transition: transform calc(var(--dur-hover) * var(--motion-scale)) var(--ease-out); }
.fab:hover { transform: translateY(-2px); }
.fab[aria-pressed="true"] { background: var(--gold-2); }
.fab__lbl { position: absolute; left: 58px; white-space: nowrap; font-size: var(--s-2); font-weight: 700; background: var(--ink); color: var(--paper); padding: 0.35em 0.65em; border-radius: var(--r-sm); opacity: 0; pointer-events: none; transition: opacity var(--dur-instant) var(--ease-out); }
.fab:hover .fab__lbl, .fab:focus-visible .fab__lbl { opacity: 1; }
.fabwrap { position: relative; display: grid; place-items: center; }
.fab--gold { background: linear-gradient(180deg, var(--gold-3), var(--gold-2)); border-color: var(--gold-ink); color: var(--gold-ink); box-shadow: 0 3px 0 var(--gold-1); }
.fab--gold:hover { background: var(--gold-3); }
.helpdesk { position: fixed; right: 0; top: 22%; z-index: 45; writing-mode: vertical-rl; padding: 1rem 0.55rem; border: 0; border-radius: var(--r-sm) 0 0 var(--r-sm); background: var(--gold-2); color: var(--gold-ink); font-family: var(--font-mono); font-size: var(--s-2); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; cursor: pointer; box-shadow: -3px 0 0 var(--gold-1); }
.helpdesk:hover { background: var(--gold-3); }
@media (max-width: 700px) { .helpdesk { display: none; } }

/* ---- sneeuw (alleen als de gebruiker het aanzet) ---- */
.snow { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.snow i { position: absolute; top: -12px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; opacity: 0.9; animation: fall linear infinite; }
@keyframes fall { to { transform: translate3d(var(--dx, 0), 105vh, 0); } }
:root[data-theme="light"] .snow i, .snow i { background: oklch(0.99 0.01 var(--brand-h)); box-shadow: 0 0 5px oklch(0.85 calc(var(--brand-c) * 0.4) var(--brand-h)); }

/* ---- intro: "hehe, wat fijn" ---- */
.intro { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: var(--ground); animation: introOut 400ms var(--ease-inout) 2500ms forwards; overflow: hidden; }
.intro__box { position: relative; width: 190px; height: 170px; transform: translateY(20px); animation: boxIn 500ms var(--ease-pop) both; }
.intro__base { position: absolute; left: 12px; right: 12px; bottom: 0; height: 112px; background: var(--action); border-radius: var(--r-sm); }
.intro__base::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 22px; transform: translateX(-50%); background: linear-gradient(180deg, var(--gold-3), var(--gold-2)); }
.intro__lid { position: absolute; left: 0; right: 0; top: 32px; height: 36px; background: oklch(from var(--action) calc(l + 0.08) c h); border-radius: var(--r-sm); transform-origin: 8% 100%; animation: lidOff 600ms var(--ease-out-bold) 700ms both; }
.intro__lid::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 22px; transform: translateX(-50%); background: linear-gradient(180deg, var(--gold-3), var(--gold-2)); }
.intro__bow { position: absolute; left: 50%; top: 4px; width: 60px; height: 34px; transform: translateX(-50%); animation: lidOff 600ms var(--ease-out-bold) 700ms both; transform-origin: -20% 200%; }
.intro__bow::before, .intro__bow::after { content: ""; position: absolute; top: 4px; width: 26px; height: 26px; border: 6px solid var(--gold-2); border-radius: 50% 50% 50% 0; }
.intro__bow::before { left: 0; transform: rotate(-45deg); } .intro__bow::after { right: 0; transform: rotate(45deg) scaleX(-1); }
.intro__txt { position: absolute; top: calc(50% + 115px); left: 50%; transform: translateX(-50%); text-align: center; color: var(--g-ink); opacity: 0; animation: txtIn 500ms var(--ease-out) 1000ms both; white-space: nowrap; }
.intro__txt b { display: block; font-family: var(--font-brand); font-weight: 900; font-size: var(--s3); letter-spacing: -0.03em; }
.intro__txt span { font-size: var(--s0); color: var(--g-ink-2); }
.intro__glow { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--gold-4); box-shadow: 0 0 80px 60px var(--gold-4); transform: translate(-50%, -50%) scale(0); animation: glow 900ms var(--ease-out) 750ms both; }
.intro__conf { position: absolute; left: 50%; top: 50%; width: 10px; height: 14px; border-radius: 2px; opacity: 0; animation: conf 1300ms var(--ease-out) 800ms both; }
.intro__skip { position: absolute; bottom: 20px; right: 20px; }
@keyframes boxIn { from { transform: translateY(80px) scale(0.8); opacity: 0; } to { transform: translateY(20px) scale(1); opacity: 1; } }
@keyframes lidOff { to { transform: translate(-70px, -160px) rotate(-38deg); opacity: 0; } }
@keyframes txtIn { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes glow { 0% { transform: translate(-50%, -50%) scale(0); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; } }
@keyframes conf { 0% { transform: translate(-50%, -50%) rotate(0); opacity: 1; } 100% { transform: translate(calc(-50% + var(--cx)), calc(-50% + var(--cy))) rotate(var(--cr)); opacity: 0; } }
@keyframes introOut { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .intro { display: none; } }

/* ---- modal ---- */
.modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: var(--gut); background: oklch(0.2 0.02 var(--brand-h) / 0.5); opacity: 0; pointer-events: none; transition: opacity calc(var(--dur-overlay) * var(--motion-scale)) var(--ease-inout); }
.modal.is-open { opacity: 1; pointer-events: auto; }
.modal__box { width: min(680px, 100%); max-height: 86vh; overflow: auto; background: var(--paper); border-radius: var(--r-md); box-shadow: var(--sh-lift); transform: translateY(10px) rotate(-0.5deg); transition: transform calc(var(--dur-overlay) * var(--motion-scale)) var(--ease-inout); }
.modal.is-open .modal__box { transform: none; }
.modal__hd { display: flex; align-items: start; gap: 1rem; padding: 1.2rem 1.3rem 0.6rem; } .modal__hd h2 { font-size: var(--s2); }
.modal__bd { padding: 0.4rem 1.3rem 1.3rem; display: grid; gap: 0.9rem; }
.modal .panel { box-shadow: none; border: 2px solid var(--line); }
.recipes { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.recipe { border-radius: var(--r-sm); overflow: hidden; border: 2px solid var(--line); background: #fff; }
.recipe .rimg { aspect-ratio: 4 / 3; background: linear-gradient(140deg, #F3D9B1, #E7B77E 60%, #C98A4B); }
.recipe b { display: block; font-size: var(--s-1); padding: 0.6rem 0.7rem 0.1rem; line-height: 1.25; }
.recipe span { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding: 0 0.7rem 0.7rem; }
.ideal { display: grid; gap: 0.5rem; }
.ideal .rcard { padding: 0.75rem 0.9rem; }
.ideal__bank { display: flex; align-items: center; gap: 0.6rem; }
.ideal__bank i { width: 30px; height: 30px; border-radius: 6px; background: var(--paper-3); display: grid; place-items: center; font-family: var(--font-mono); font-size: 10px; font-weight: 700; }

/* ---- FAQ, tijdlijn, tabellen, login, footer, tenant ---- */
.faq { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); grid-template-columns: 288px minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .faq { grid-template-columns: minmax(0, 1fr); } }
.faqside { display: grid; gap: 1rem; position: sticky; top: 126px; align-content: start; }
.faqside .faqnav { position: static; top: auto; }
.faqhelp { background: var(--b50); border-radius: var(--r-sm); padding: 1rem; display: grid; gap: .5rem; }
.faqhelp b { font-family: var(--font-brand); font-size: var(--s0); color: var(--g-ink); }
.faqhelp p { font-size: var(--s-2); color: var(--g-ink-2); }
.faqhelp .btn { justify-content: flex-start; min-height: 40px; }
@media (max-width: 800px) { .faq { grid-template-columns: minmax(0, 1fr); } }
.faqnav { position: sticky; top: 78px; display: grid; gap: 0.1rem; }
.faqnav a { padding: 0.55em 0.7em; border-left: 3px solid transparent; text-decoration: none; color: var(--g-ink-2); font-size: var(--s-1); font-weight: 600; }
.faqnav a:hover { color: var(--g-ink); } .faqnav a[aria-current="true"] { color: var(--g-ink); border-left-color: var(--gold-2); }
.faqnav .fhint { color: var(--g-ink-2); border-top-color: var(--ground-line); }
.faq h2 { color: var(--g-ink); }
.steps { display: grid; gap: 0.6rem; }
.step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0.9rem; align-items: start; padding: 0.95rem 1.05rem; border-radius: var(--r-md); background: var(--paper); box-shadow: var(--sh-tag); }
.step__n { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font-family: var(--font-brand); font-weight: 800; font-size: var(--s-2); }
.step b { font-size: var(--s-1); display: block; } .step p { font-size: var(--s-1); color: var(--ink-2); margin-top: 0.15rem; }
.track { display: grid; gap: 0; }
.tstep { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 0.85rem; }
.tstep__rail { display: grid; justify-items: center; grid-template-rows: auto 1fr; }
.tstep__dot { width: 14px; height: 14px; border-radius: var(--r-pill); border: 3px solid var(--line); background: var(--paper); margin-top: 5px; }
.tstep__line { width: 3px; background: var(--line); min-height: 28px; }
.tstep[data-done="1"] .tstep__dot { background: var(--gold-2); border-color: var(--gold-2); } .tstep[data-done="1"] .tstep__line { background: var(--gold-2); }
.tstep__bd { padding-bottom: 1.1rem; } .tstep__bd b { font-size: var(--s-1); } .tstep__bd span { display: block; font-size: var(--s-2); color: var(--ink-3); }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--s-1); }
.tbl th, .tbl td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl thead th { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.tblwrap { overflow-x: auto; background: var(--paper); border-radius: var(--r-md); box-shadow: var(--sh-tag); }
.pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15em 0.55em; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; background: var(--paper-2); color: var(--ink); }
.pill[data-t="keep"] { background: var(--ok-s); color: var(--ok); } .pill[data-t="better"] { background: var(--warn-s); color: var(--warn); } .pill[data-t="new"] { background: var(--gold-3); color: var(--gold-ink); }
.login { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); min-height: min(640px, calc(100vh - 8rem)); max-width: 1160px; margin-inline: auto; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-lift); background: var(--paper); }
@media (max-width: 860px) { .login { grid-template-columns: minmax(0, 1fr); min-height: 0; } .login__art--foto { min-height: 320px; order: -1; } }
.login__form { display: grid; align-content: center; gap: 1.1rem; padding: clamp(1.5rem, 5vw, 4rem); background: var(--paper); }
.login__art { position: relative; overflow: hidden; isolation: isolate; background: var(--action); color: #fff; display: grid; align-content: end; gap: 0.6rem; padding: clamp(1.5rem, 4vw, 3rem); min-height: 300px; }
.login__art::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 70% at 80% 10%, oklch(from var(--action) calc(l + 0.18) c calc(h + 30) / 0.7), transparent 70%), repeating-linear-gradient(135deg, #ffffff10 0 14px, transparent 14px 28px); }
.login__art blockquote { font-family: var(--font-brand); font-size: var(--s3); font-weight: 900; line-height: 1.02; letter-spacing: -0.035em; margin: 0; max-width: 16ch; }
.login__art cite { font-style: normal; font-size: var(--s-1); color: #ffffffea; }
.login__art .eyebrow { color: #ffffffe0; }
.login__art--foto { display: grid; place-items: center; align-content: center; gap: .9rem; background: linear-gradient(155deg, var(--b700), var(--b800) 55%, var(--b950)); min-height: 100%; padding: clamp(1.5rem, 3vw, 2.5rem); text-align: center; }
.login__art--foto::before { background: radial-gradient(60% 55% at 70% 18%, #ffffff30, transparent 70%), repeating-linear-gradient(135deg, #ffffff12 0 18px, transparent 18px 36px); }
.login__art--foto .login__phfr { width: min(100%, 360px); aspect-ratio: 4 / 5; border-radius: var(--r-sm); border: 2px dashed #ffffff9e; display: grid; place-items: center; background: #ffffff22; }
.login__phlbl { font-family: var(--font-mono); font-size: var(--s-2); letter-spacing: .12em; text-transform: uppercase; color: #fff; max-width: 22ch; line-height: 1.7; }
.login__cap { font-size: var(--s-1); color: #ffffffe6; max-width: 34ch; }

.svcbox { background: var(--paper); color: var(--ink); padding: clamp(1.2rem, 3vw, 2rem); display: grid; gap: .5rem; align-content: start; border-top: 2px dashed var(--line); }
.svcbox h2 { font-family: var(--font-brand); font-size: var(--s1); }
.svcbox p { font-size: var(--s-1); color: var(--ink-2); }
.svcbox__btns { display: grid; gap: .45rem; margin-top: .3rem; }
.svcbox__btns .btn { justify-content: flex-start; }
.svcbox__tel { font-size: var(--s-1); color: var(--ink-2); }
.svcbox__tel a { color: var(--brand-text); font-weight: 700; }
.bigbox { background: var(--paper); color: var(--ink); border-radius: var(--r-md); box-shadow: var(--sh-tag); padding: clamp(1.4rem, 3.5vw, 2.75rem); }
.bigbox > :first-child { margin-top: 0; }
.marks { display: flex; gap: .6rem; flex-wrap: wrap; }
.mark { display: inline-flex; align-items: center; gap: .6rem; padding: .5rem .8rem .5rem .55rem; border-radius: var(--r-sm); background: var(--paper); color: var(--ink); box-shadow: var(--sh-tag); }
.mark__b { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: var(--r-xs); background: var(--b100); color: var(--brand-text); font-family: var(--font-brand); font-weight: 900; font-size: 11px; letter-spacing: -.02em; text-align: center; }
.mark__t { display: grid; line-height: 1.25; }
.mark__t b { font-size: var(--s-1); }
.mark__t span { font-size: var(--s-2); color: var(--ink-3); }
.marks--sm .mark { padding: .3rem .6rem .3rem .35rem; }
.marks--sm .mark__b { width: 30px; height: 30px; font-size: 9px; }
.mark__l { height: 42px; width: auto; max-width: 92px; object-fit: contain; flex: none; border-radius: var(--r-xs); background: #fff; padding: 2px; }
.marks--sm .mark__l { height: 30px; max-width: 70px; }
.ft .marks { gap: .5rem; }
.ft .mark { background: #fff; color: var(--ink); box-shadow: none; }
.ft .mark__l { height: 40px; max-width: 110px; }
.duo { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.duo--mid > * { align-self: center; }
.dzmedia { display: grid; gap: 1rem; align-content: center; }
@media (max-width: 900px) { .duo { grid-template-columns: minmax(0, 1fr); } }
.vidph { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: linear-gradient(150deg, var(--b700), var(--b800) 55%, var(--b950)); display: grid; place-items: center; gap: .6rem; color: #fff; cursor: pointer; border: 0; box-shadow: var(--sh-lift); width: 100%; }
.vidph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, #00000059, transparent 55%); }
.bigbox .vidph, .duo .vidph { max-height: 440px; }
.vidph__p { position: relative; z-index: 1; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 999px; background: #ffffffee; color: var(--deep); box-shadow: var(--sh-lift); }
.vidph__c { position: relative; z-index: 1; font-size: var(--s-1); font-weight: 700; text-shadow: 0 1px 3px #0006; }
.aicard { display: grid; gap: .6rem; place-items: center; text-align: center; padding: 1.25rem; width: 100%; }
.aicard__img { display: grid; place-items: center; width: 100%; min-height: 46%; padding: 1.6rem 1rem; border-radius: var(--r-sm); background: linear-gradient(150deg, var(--b100), var(--b200) 60%, var(--gold-4)); color: var(--brand-text); font-family: var(--font-brand); font-size: var(--s0); letter-spacing: -.02em; max-width: 26ch; }
.aicard__tx { font-size: var(--s-1); color: var(--ink); max-width: 30ch; }
.aicard__from { font-family: var(--font-mono); font-size: var(--s-2); color: var(--ink-3); }
.mdwrap { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); grid-template-columns: minmax(0, 1fr) minmax(220px, 280px); align-items: start; }
@media (max-width: 760px) { .mdwrap { grid-template-columns: minmax(0, 1fr); } }
.md { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; max-width: 560px; background: var(--ink); padding: 3px; border-radius: var(--r-sm); }
.mdc { aspect-ratio: 1; display: grid; place-items: center; border: 0; background: #FFFDF9; color: var(--ink); font-size: clamp(9px, 1.1vw, var(--s-2)); font-weight: 700; cursor: pointer; padding: 2px; line-height: 1.1; word-break: break-word; }
.mdc:hover { background: var(--b100); }
.mdc--fix { background: var(--paper-3); color: var(--ink); cursor: default; }
.mdc--bad { background: var(--stop-s); color: var(--stop); }
.mdc[data-s="0"] { box-shadow: inset 0 -4px 0 #B45309; } .mdc[data-s="1"] { box-shadow: inset 0 -4px 0 #0E7490; }
.mdc[data-s="2"] { box-shadow: inset 0 -4px 0 #4D7C0F; } .mdc[data-s="3"] { box-shadow: inset 0 -4px 0 #7C3AED; }
.mdc[data-s="4"] { box-shadow: inset 0 -4px 0 #BE123C; } .mdc[data-s="5"] { box-shadow: inset 0 -4px 0 #1D4ED8; }
.md > .mdc:nth-child(6n+3) { margin-right: 5px; }
.md > .mdc:nth-child(n+7):nth-child(-n+12), .md > .mdc:nth-child(n+19):nth-child(-n+24) { margin-bottom: 5px; }
.mdside { display: grid; gap: .8rem; align-content: start; }
.mdside > b { font-family: var(--font-brand); font-size: var(--s0); }
.mdleg { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: var(--s-1); }
.mdleg li { display: flex; align-items: center; gap: .5rem; }
.mdleg i { width: 14px; height: 14px; border-radius: 3px; display: block; }
.mdleg li[data-s="0"] i { background: #B45309; } .mdleg li[data-s="1"] i { background: #0E7490; }
.mdleg li[data-s="2"] i { background: #4D7C0F; } .mdleg li[data-s="3"] i { background: #7C3AED; }
.mdleg li[data-s="4"] i { background: #BE123C; } .mdleg li[data-s="5"] i { background: #1D4ED8; }
.mdok { font-size: var(--s-1); font-weight: 700; color: var(--ok); display: flex; gap: .4rem; align-items: center; }
.mdbad { font-size: var(--s-1); color: var(--warn); font-weight: 600; }
.mdmini { display: grid; gap: 2px; background: var(--line); padding: 2px; border-radius: var(--r-xs); width: 84px; }
.mdmini > div { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.mdmini i { aspect-ratio: 1; background: var(--paper-2); display: grid; place-items: center; font-size: 7px; font-style: normal; color: var(--ink-3); }
.dz { display: grid; gap: 1.1rem; }
.dz__n { display: flex; gap: clamp(1rem, 3vw, 2.5rem); flex-wrap: wrap; }
.dz__n div { display: grid; }
.dz__n b { font-family: var(--font-brand); font-size: var(--s3); line-height: 1; letter-spacing: -.04em; }
.dz__n span { font-size: var(--s-2); max-width: 22ch; }
.bigbox .crumbsteps { color: var(--ink-3); }
.bigbox .crumbsteps b { color: var(--ink); }
.bigbox .faq h2, .bigbox .faqnav a:hover, .bigbox .faqnav a[aria-current="true"] { color: var(--ink); }
.bigbox .faqnav a { color: var(--ink-2); }
.bigbox .faqnav a[aria-current="true"] { border-left-color: var(--action); }
.bigbox .fhint { color: var(--ink-2); border-top-color: var(--line); }
.bigbox .faqhelp b { color: var(--ink); }
.bigbox .faqhelp p { color: var(--ink-2); }
.cogrid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); grid-template-columns: minmax(0, 1fr) 330px; align-items: start; }
@media (max-width: 960px) { .cogrid { grid-template-columns: minmax(0, 1fr); } }
.cosum { position: sticky; top: 126px; }
@media (max-width: 960px) { .cosum { position: static; } }
.radiocards--2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.rcard .ecotag, .rcard span.ecotag { color: #fff; display: inline-flex; }
.ecotag { display: inline-flex; align-items: center; gap: .35rem; margin-left: auto; padding: .3em .6em; border-radius: var(--r-pill); background: var(--ok); color: #fff; font-size: var(--s-2); font-weight: 700; white-space: nowrap; }
.ecotag svg { width: 14px; height: 14px; }
.note--dig { display: flex; gap: .6rem; align-items: start; background: var(--b50); border: 2px dashed var(--brand-line); border-radius: var(--r-sm); padding: .8rem .9rem; font-size: var(--s-1); color: var(--ink-2); }
.note--dig svg { flex: none; margin-top: 2px; color: var(--brand-text); }
.dzok { display: flex; gap: .6rem; align-items: start; background: var(--ok-s); border-radius: var(--r-md); padding: .9rem 1rem; font-size: var(--s-1); color: var(--ink); margin-top: 1rem; }
.cosum .dzok { box-shadow: var(--sh-tag); }
.dzok svg { flex: none; margin-top: 2px; color: var(--ok); }
.dzok b { color: var(--ok); }
.dzok a { color: var(--brand-text); font-weight: 600; white-space: nowrap; }
.giftbox { display: grid; gap: 1rem; padding: 1.1rem; border-radius: var(--r-sm); background: var(--b50); }
.login .stamp { --stamp-c: #fff; position: absolute; top: 1.5rem; right: 1.5rem; font-size: var(--s-1); transform: rotate(8deg); }
.ft { background: var(--deep); color: #ffffffcf; margin-top: clamp(2.5rem, 5vw, 4.5rem); border-top: 0; position: relative; isolation: isolate; }
.ft::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 80% at 85% 0%, #ffffff14, transparent 70%); pointer-events: none; }
.ft__in { max-width: var(--wrapw); margin-inline: auto; padding: clamp(2rem, 4vw, 3rem) var(--gut); display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ft h3 { font-size: var(--s-1); margin-bottom: 0.7rem; color: #ffffff; font-family: var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }
.ft a { color: inherit; text-decoration: none; font-size: var(--s-1); } .ft a:hover { text-decoration: underline; }
.ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.ft__bar { border-top: 1px solid #ffffff2e; font-size: var(--s-2); padding: 0.9rem var(--gut); max-width: var(--wrapw); margin-inline: auto; display: flex; gap: 1rem; flex-wrap: wrap; }
.trust { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.trust span { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; padding: 0.45em 0.55em; border: 1px solid var(--ground-line); border-radius: var(--r-xs); color: var(--g-ink-3); }
.tsw { position: fixed; left: 76px; bottom: 76px; z-index: 55; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; padding: 0.45rem 0.55rem; border-radius: var(--r-sm); background: var(--paper); color: var(--ink); box-shadow: var(--sh-lift); max-width: calc(100vw - 24px); }
.tsw__lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.tsw button { min-height: 32px; padding: 0.25em 0.6em; border-radius: var(--r-sm); border: 2px solid transparent; background: transparent; cursor: pointer; font-size: var(--s-2); font-weight: 700; display: inline-flex; align-items: center; gap: 0.35rem; color: var(--ink); }
.tsw button i { width: 10px; height: 10px; border-radius: 2px; display: block; }
.tsw button[aria-pressed="true"] { border-color: var(--ink); }
@media (max-width: 640px) { .tsw { display: none; } }
@media (max-width: 1320px) { .nav { display: none; } .burger { display: grid; } .nav.is-open { display: grid; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); padding: 0.6rem var(--gut) 1rem; gap: 0.1rem; box-shadow: 0 20px 40px -20px #0006; } .nav.is-open a { padding: 0.8em 0.6em; } .hdr__in { position: relative; } .search { flex: 1 1 120px; } }
@media (max-width: 640px) { .search { display: none; } }
.filterbtn { display: none; } @media (max-width: 1000px) { .filterbtn { display: inline-flex; } }
/* ============================================================
   NIEUW — FASE 0: SECTIEHUID (per klant, per sectie instelbaar)
   Elke sectie krijgt data-skin. De beheerder kiest de rol,
   het systeem kiest de exacte kleur. Leesbaarheid blijft staan,
   ook bij een felle huisstijl.
   ============================================================ */
.skin { position: relative; }
.skin[data-skin="paper"] { background: transparent; }
.skin[data-skin="tint"]  { background: var(--b50); }
.skin[data-skin="soft"]  { background: var(--b100); }
.skin[data-skin="sheet"] { background: var(--paper); color: var(--ink); }
.skin[data-skin="brand"] { background: var(--action); color: var(--action-on); }
.skin[data-skin="deep"]  { background: var(--deep); color: #fff; }
.skin[data-skin="gold"]  { background: linear-gradient(170deg, var(--gold-4), var(--gold-3)); color: var(--gold-ink); }
.skin[data-skin="brand"] :is(h1,h2,h3,.sect__hd h2):not(:is(.paper,.panel,.sheet,.summary,.buy,.buy2,.drawer,.modal__box,.fgroup,.sidebox,.tblwrap,.step,.stepc,.card,.tile,.feat,.login__form,.svcbox,.bigbox,.revown,.kompas,.fcard,.flip__f,.flip__b,.bnr__in,.bnr__tx,.bon,.balance,.sumblock,.blocker,.tdeck,.impact,.qa,.recipe,.rcard,.cb--vraag,.lcard,.ordc,.hot,.hot__c,.check__box,.slot,.pmap,.chatw,.acctnav,.bdd__p,.skcard,.ph3,.ph4,.led,.buybar,.ai__canvas,.lb,.achip,.pchip,.btn,.quote) *), .skin[data-skin="deep"] :is(h1,h2,h3,.sect__hd h2):not(:is(.paper,.panel,.sheet,.summary,.buy,.buy2,.drawer,.modal__box,.fgroup,.sidebox,.tblwrap,.step,.stepc,.card,.tile,.feat,.login__form,.svcbox,.bigbox,.revown,.kompas,.fcard,.flip__f,.flip__b,.bnr__in,.bnr__tx,.bon,.balance,.sumblock,.blocker,.tdeck,.impact,.qa,.recipe,.rcard,.cb--vraag,.lcard,.ordc,.hot,.hot__c,.check__box,.slot,.pmap,.chatw,.acctnav,.bdd__p,.skcard,.ph3,.ph4,.led,.buybar,.ai__canvas,.lb,.achip,.pchip,.btn,.quote) *) { color: inherit; }
.skin[data-skin="brand"] :is(.lead,p,.muted,.hint):not(:is(.paper,.panel,.sheet,.summary,.buy,.buy2,.drawer,.modal__box,.fgroup,.sidebox,.tblwrap,.step,.stepc,.card,.tile,.feat,.login__form,.svcbox,.bigbox,.revown,.kompas,.fcard,.flip__f,.flip__b,.bnr__in,.bnr__tx,.bon,.balance,.sumblock,.blocker,.tdeck,.impact,.qa,.recipe,.rcard,.cb--vraag,.lcard,.ordc,.hot,.hot__c,.check__box,.slot,.pmap,.chatw,.acctnav,.bdd__p,.skcard,.ph3,.ph4,.led,.buybar,.ai__canvas,.lb,.achip,.pchip,.btn,.quote) *), .skin[data-skin="deep"] :is(.lead,p,.muted,.hint):not(:is(.paper,.panel,.sheet,.summary,.buy,.buy2,.drawer,.modal__box,.fgroup,.sidebox,.tblwrap,.step,.stepc,.card,.tile,.feat,.login__form,.svcbox,.bigbox,.revown,.kompas,.fcard,.flip__f,.flip__b,.bnr__in,.bnr__tx,.bon,.balance,.sumblock,.blocker,.tdeck,.impact,.qa,.recipe,.rcard,.cb--vraag,.lcard,.ordc,.hot,.hot__c,.check__box,.slot,.pmap,.chatw,.acctnav,.bdd__p,.skcard,.ph3,.ph4,.led,.buybar,.ai__canvas,.lb,.achip,.pchip,.btn,.quote) *) { color: #ffffffea; }
.skin[data-skin="brand"] .eyebrow:not(:is(.paper,.panel,.sheet,.summary,.buy,.buy2,.drawer,.modal__box,.fgroup,.sidebox,.tblwrap,.step,.stepc,.card,.tile,.feat,.login__form,.svcbox,.bigbox,.revown,.kompas,.fcard,.flip__f,.flip__b,.bnr__in,.bnr__tx,.bon,.balance,.sumblock,.blocker,.tdeck,.impact,.qa,.recipe,.rcard,.cb--vraag,.lcard,.ordc,.hot,.hot__c,.check__box,.slot,.pmap,.chatw,.acctnav,.bdd__p,.skcard,.ph3,.ph4,.led,.buybar,.ai__canvas,.lb,.achip,.pchip,.btn,.quote) *), .skin[data-skin="deep"] .eyebrow:not(:is(.paper,.panel,.sheet,.summary,.buy,.buy2,.drawer,.modal__box,.fgroup,.sidebox,.tblwrap,.step,.stepc,.card,.tile,.feat,.login__form,.svcbox,.bigbox,.revown,.kompas,.fcard,.flip__f,.flip__b,.bnr__in,.bnr__tx,.bon,.balance,.sumblock,.blocker,.tdeck,.impact,.qa,.recipe,.rcard,.cb--vraag,.lcard,.ordc,.hot,.hot__c,.check__box,.slot,.pmap,.chatw,.acctnav,.bdd__p,.skcard,.ph3,.ph4,.led,.buybar,.ai__canvas,.lb,.achip,.pchip,.btn,.quote) *) { color: #ffffff; }
.skin[data-skin="sheet"] :is(h1,h2,h3):not(:is(.paper,.panel,.sheet,.summary,.buy,.buy2,.drawer,.modal__box,.fgroup,.sidebox,.tblwrap,.step,.stepc,.card,.tile,.feat,.login__form,.svcbox,.bigbox,.revown,.kompas,.fcard,.flip__f,.flip__b,.bnr__in,.bnr__tx,.bon,.balance,.sumblock,.blocker,.tdeck,.impact,.qa,.recipe,.rcard,.cb--vraag,.lcard,.ordc,.hot,.hot__c,.check__box,.slot,.pmap,.chatw,.acctnav,.bdd__p,.skcard,.ph3,.ph4,.led,.buybar,.ai__canvas,.lb,.achip,.pchip,.btn,.quote) *), .skin[data-skin="gold"] :is(h1,h2,h3):not(:is(.paper,.panel,.sheet,.summary,.buy,.buy2,.drawer,.modal__box,.fgroup,.sidebox,.tblwrap,.step,.stepc,.card,.tile,.feat,.login__form,.svcbox,.bigbox,.revown,.kompas,.fcard,.flip__f,.flip__b,.bnr__in,.bnr__tx,.bon,.balance,.sumblock,.blocker,.tdeck,.impact,.qa,.recipe,.rcard,.cb--vraag,.lcard,.ordc,.hot,.hot__c,.check__box,.slot,.pmap,.chatw,.acctnav,.bdd__p,.skcard,.ph3,.ph4,.led,.buybar,.ai__canvas,.lb,.achip,.pchip,.btn,.quote) *) { color: inherit; }
.skin[data-skin="sheet"] :is(.lead,.hint):not(:is(.paper,.panel,.sheet,.summary,.buy,.buy2,.drawer,.modal__box,.fgroup,.sidebox,.tblwrap,.step,.stepc,.card,.tile,.feat,.login__form,.svcbox,.bigbox,.revown,.kompas,.fcard,.flip__f,.flip__b,.bnr__in,.bnr__tx,.bon,.balance,.sumblock,.blocker,.tdeck,.impact,.qa,.recipe,.rcard,.cb--vraag,.lcard,.ordc,.hot,.hot__c,.check__box,.slot,.pmap,.chatw,.acctnav,.bdd__p,.skcard,.ph3,.ph4,.led,.buybar,.ai__canvas,.lb,.achip,.pchip,.btn,.quote) *), .skin[data-skin="gold"] :is(.lead,.hint):not(:is(.paper,.panel,.sheet,.summary,.buy,.buy2,.drawer,.modal__box,.fgroup,.sidebox,.tblwrap,.step,.stepc,.card,.tile,.feat,.login__form,.svcbox,.bigbox,.revown,.kompas,.fcard,.flip__f,.flip__b,.bnr__in,.bnr__tx,.bon,.balance,.sumblock,.blocker,.tdeck,.impact,.qa,.recipe,.rcard,.cb--vraag,.lcard,.ordc,.hot,.hot__c,.check__box,.slot,.pmap,.chatw,.acctnav,.bdd__p,.skcard,.ph3,.ph4,.led,.buybar,.ai__canvas,.lb,.achip,.pchip,.btn,.quote) *) { color: var(--ink-2); }
.skin[data-skin="gold"] .eyebrow:not(:is(.paper,.panel,.sheet,.summary,.buy,.buy2,.drawer,.modal__box,.fgroup,.sidebox,.tblwrap,.step,.stepc,.card,.tile,.feat,.login__form,.svcbox,.bigbox,.revown,.kompas,.fcard,.flip__f,.flip__b,.bnr__in,.bnr__tx,.bon,.balance,.sumblock,.blocker,.tdeck,.impact,.qa,.recipe,.rcard,.cb--vraag,.lcard,.ordc,.hot,.hot__c,.check__box,.slot,.pmap,.chatw,.acctnav,.bdd__p,.skcard,.ph3,.ph4,.led,.buybar,.ai__canvas,.lb,.achip,.pchip,.btn,.quote) *) { color: var(--gold-ink); }
.skin[data-skin="sheet"] .eyebrow:not(:is(.paper,.panel,.sheet,.summary,.buy,.buy2,.drawer,.modal__box,.fgroup,.sidebox,.tblwrap,.step,.stepc,.card,.tile,.feat,.login__form,.svcbox,.bigbox,.revown,.kompas,.fcard,.flip__f,.flip__b,.bnr__in,.bnr__tx,.bon,.balance,.sumblock,.blocker,.tdeck,.impact,.qa,.recipe,.rcard,.cb--vraag,.lcard,.ordc,.hot,.hot__c,.check__box,.slot,.pmap,.chatw,.acctnav,.bdd__p,.skcard,.ph3,.ph4,.led,.buybar,.ai__canvas,.lb,.achip,.pchip,.btn,.quote) *) { color: var(--ink-3); }

.skin[data-skin="brand"] .btn--ghost:not(:is(.paper,.panel,.sheet,.summary,.buy,.buy2,.drawer,.modal__box,.fgroup,.sidebox,.tblwrap,.step,.stepc,.card,.tile,.feat,.login__form,.svcbox,.bigbox,.revown,.kompas,.fcard,.flip__f,.flip__b,.bnr__in,.bnr__tx,.bon,.balance,.sumblock,.blocker,.tdeck,.impact,.qa,.recipe,.rcard,.cb--vraag,.lcard,.ordc,.hot,.hot__c,.check__box,.slot,.pmap,.chatw,.acctnav,.bdd__p,.skcard,.ph3,.ph4,.led,.buybar,.ai__canvas,.lb) *), .skin[data-skin="deep"] .btn--ghost:not(:is(.paper,.panel,.sheet,.summary,.buy,.buy2,.drawer,.modal__box,.fgroup,.sidebox,.tblwrap,.step,.stepc,.card,.tile,.feat,.login__form,.svcbox,.bigbox,.revown,.kompas,.fcard,.flip__f,.flip__b,.bnr__in,.bnr__tx,.bon,.balance,.sumblock,.blocker,.tdeck,.impact,.qa,.recipe,.rcard,.cb--vraag,.lcard,.ordc,.hot,.hot__c,.check__box,.slot,.pmap,.chatw,.acctnav,.bdd__p,.skcard,.ph3,.ph4,.led,.buybar,.ai__canvas,.lb) *) { --fg: #fff; --bd: #fff; }
.skin[data-skin="brand"] .btn--ghost:not(:is(.paper,.panel,.sheet,.summary,.buy,.buy2,.drawer,.modal__box,.fgroup,.sidebox,.tblwrap,.step,.stepc,.card,.tile,.feat,.login__form,.svcbox,.bigbox,.revown,.kompas,.fcard,.flip__f,.flip__b,.bnr__in,.bnr__tx,.bon,.balance,.sumblock,.blocker,.tdeck,.impact,.qa,.recipe,.rcard,.cb--vraag,.lcard,.ordc,.hot,.hot__c,.check__box,.slot,.pmap,.chatw,.acctnav,.bdd__p,.skcard,.ph3,.ph4,.led,.buybar,.ai__canvas,.lb) *):hover, .skin[data-skin="deep"] .btn--ghost:not(:is(.paper,.panel,.sheet,.summary,.buy,.buy2,.drawer,.modal__box,.fgroup,.sidebox,.tblwrap,.step,.stepc,.card,.tile,.feat,.login__form,.svcbox,.bigbox,.revown,.kompas,.fcard,.flip__f,.flip__b,.bnr__in,.bnr__tx,.bon,.balance,.sumblock,.blocker,.tdeck,.impact,.qa,.recipe,.rcard,.cb--vraag,.lcard,.ordc,.hot,.hot__c,.check__box,.slot,.pmap,.chatw,.acctnav,.bdd__p,.skcard,.ph3,.ph4,.led,.buybar,.ai__canvas,.lb) *):hover { --bg: #fff; --fg: var(--deep); }
.skin[data-skin="gold"] .btn--ghost:not(:is(.paper,.panel,.sheet,.summary,.buy,.buy2,.drawer,.modal__box,.fgroup,.sidebox,.tblwrap,.step,.stepc,.card,.tile,.feat,.login__form,.svcbox,.bigbox,.revown,.kompas,.fcard,.flip__f,.flip__b,.bnr__in,.bnr__tx,.bon,.balance,.sumblock,.blocker,.tdeck,.impact,.qa,.recipe,.rcard,.cb--vraag,.lcard,.ordc,.hot,.hot__c,.check__box,.slot,.pmap,.chatw,.acctnav,.bdd__p,.skcard,.ph3,.ph4,.led,.buybar,.ai__canvas,.lb) *) { --fg: var(--gold-ink); --bd: var(--gold-ink); }
.skin[data-skin="gold"] .btn--ghost:not(:is(.paper,.panel,.sheet,.summary,.buy,.buy2,.drawer,.modal__box,.fgroup,.sidebox,.tblwrap,.step,.stepc,.card,.tile,.feat,.login__form,.svcbox,.bigbox,.revown,.kompas,.fcard,.flip__f,.flip__b,.bnr__in,.bnr__tx,.bon,.balance,.sumblock,.blocker,.tdeck,.impact,.qa,.recipe,.rcard,.cb--vraag,.lcard,.ordc,.hot,.hot__c,.check__box,.slot,.pmap,.chatw,.acctnav,.bdd__p,.skcard,.ph3,.ph4,.led,.buybar,.ai__canvas,.lb) *):hover { --bg: var(--gold-ink); --fg: var(--gold-4); }
.skin + .skin { margin-top: 0; }
.skin[data-skin="tint"], .skin[data-skin="soft"], .skin[data-skin="sheet"], .skin[data-skin="brand"], .skin[data-skin="deep"], .skin[data-skin="gold"] { box-shadow: 0 0 0 1px #00000008; }

/* ---- instellingenpaneel (de blauwdruk-schakelaar) ---- */
.cog { position: fixed; left: 76px; bottom: 12px; z-index: 56; width: 46px; height: 46px; border-radius: var(--r-sm); border: 2px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; display: grid; place-items: center; box-shadow: var(--sh-tag); }
.cog:hover { border-color: var(--ink); }
.cfg { position: fixed; left: 0; top: 0; bottom: 0; z-index: 62; width: min(400px, 100%); background: var(--paper); color: var(--ink); display: flex; flex-direction: column; transform: translateX(-100%); transition: transform calc(var(--dur-overlay) * var(--motion-scale)) var(--ease-inout); box-shadow: 20px 0 60px -20px #0006; }
.cfg.is-open { transform: none; visibility: visible; }
.cfg { overflow: hidden; visibility: hidden; transition: transform calc(var(--dur-overlay) * var(--motion-scale)) var(--ease-inout), visibility 0s linear calc(var(--dur-overlay) * var(--motion-scale)); }
.cfg.is-open { transition: transform calc(var(--dur-overlay) * var(--motion-scale)) var(--ease-inout), visibility 0s; }
.cfg__hd { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.2rem; border-bottom: 2px dashed var(--line); }
.cfg__hd h2 { font-size: var(--s1); }
.cfg__bd { flex: 1; overflow: auto; padding: 1rem 1.2rem 2rem; display: grid; gap: 1.1rem; align-content: start; }
.cfg__g { display: grid; gap: .45rem; }
.cfg__g > b { font-family: var(--font-mono); font-size: var(--s-2); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.cfg__row { display: flex; align-items: center; gap: .5rem; font-size: var(--s-1); }
.cfg__row > span { flex: 1; }
.cfg select, .cfg input[type="text"], .cfg input[type="number"] { min-height: 38px; padding: .3em .55em; border: 2px solid var(--line); border-radius: var(--r-sm); background: #FFFDF9; color: var(--ink); font: inherit; font-size: var(--s-2); max-width: 190px; }
.cfg__note { font-size: var(--s-2); color: var(--ink-3); }
.cfg__sw { display: flex; gap: 3px; flex-wrap: wrap; }
.cfg__sw button { min-height: 30px; padding: .2em .5em; border: 2px solid var(--line); border-radius: var(--r-xs); background: transparent; color: var(--ink); font-size: var(--s-2); font-weight: 700; cursor: pointer; }
.cfg__sw button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---- banner boven de hero / webshop ---- */
.bnr { max-width: var(--wrapw); margin-inline: auto; padding: clamp(.9rem,2vw,1.4rem) var(--gut) 0; }
.bnr__in { position: relative; overflow: hidden; border-radius: var(--r-md); min-height: 108px; display: flex; align-items: center; gap: 1.25rem; padding: 1rem 1.3rem; background: linear-gradient(100deg, var(--b100), var(--b200)); color: var(--brand-text); box-shadow: var(--sh-tag); }
.bnr__in[data-full="1"] { background: var(--action); color: var(--action-on); }
.bnr__in[data-full="1"] .bnr__tx span { opacity: 1; color: #ffffffea; }
.bnr__ph { position: absolute; inset: 0; background: linear-gradient(100deg, var(--b200), var(--b100) 60%, var(--gold-4)); }
.bnr__ph::after { content: attr(data-label); position: absolute; top: 10px; left: 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); background: var(--paper); border: 1px solid var(--line); padding: .25em .45em; }
.bnr__tx { position: relative; display: grid; gap: .2rem; }
.bnr__tx b { font-family: var(--font-brand); font-size: var(--s1); letter-spacing: -.03em; }
.bnr__tx span { font-size: var(--s-1); opacity: .85; }
.bnr .btn { position: relative; margin-left: auto; flex: none; }
@media (max-width: 700px) { .bnr__in { flex-wrap: wrap; } .bnr .btn { margin-left: 0; } }

/* ---- header: saldo + aftellen altijd zichtbaar ---- */
.hmeter { display: flex; align-items: center; gap: .65rem; flex: none; padding: .3rem .7rem .3rem .55rem; border-radius: var(--r-sm); background: var(--paper-2); box-shadow: inset 0 0 0 2px var(--line); }
.hmeter__b { display: grid; line-height: 1.05; }
.hmeter__b b { font-family: var(--font-brand); font-weight: 900; font-size: var(--s1); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.hmeter__b span, .hmeter__d span { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.hmeter__d { display: grid; line-height: 1.05; padding-left: .65rem; border-left: 2px dashed var(--line); }
.hmeter__d b { font-family: var(--font-brand); font-weight: 700; font-size: var(--s-1); color: var(--warn); font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .hmeter__d { display: none; } }
@media (max-width: 520px) { .hmeter { padding: .2rem .5rem; } .hmeter__b b { font-size: var(--s0); } }

/* ---- FAB's: gewone knoppen in de stijl van de pagina ---- */
.fab { width: 46px; height: 46px; display: grid; place-items: center; border: 2px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); cursor: pointer; box-shadow: var(--sh-tag); transition: transform calc(var(--dur-hover) * var(--motion-scale)) var(--ease-out), border-color calc(var(--dur-hover) * var(--motion-scale)) var(--ease-out); }
.fab:hover { transform: translateY(-2px); border-color: var(--ink); box-shadow: var(--sh-lift); }
.fab[aria-pressed="true"] { background: var(--gold-3); border-color: var(--gold-1); color: var(--gold-ink); }

/* ---- hero: het label draait om ---- */
.flip { perspective: 1400px; background: none; box-shadow: none; transform: none; }
.flip:hover { transform: none; }
.flip__in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform calc(700ms * var(--motion-scale)) var(--ease-inout); }
.flip[aria-pressed="true"] .flip__in { transform: rotateY(180deg); }
.flip__f, .flip__b { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--r-md); overflow: hidden; background: var(--paper); color: var(--ink); box-shadow: var(--sh-lift); display: grid; grid-template-rows: 1fr auto; }
.flip__b { transform: rotateY(180deg); grid-template-rows: 1fr; align-content: center; padding: clamp(1.25rem,3vw,2rem); gap: .6rem; }
.flip__b blockquote { font-family: var(--font-brand); font-weight: 900; font-size: var(--s2); line-height: 1.06; letter-spacing: -.035em; margin: 0; }
.flip__hint { position: absolute; right: 10px; bottom: 10px; z-index: 3; font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; background: var(--paper); border: 1px solid var(--line); color: var(--ink-3); padding: .3em .5em; border-radius: var(--r-xs); }

/* ---- quote-sectie ---- */
.quote { display: grid; gap: 1rem; justify-items: center; text-align: center; max-width: 60ch; margin-inline: auto; }
.quote blockquote { font-family: var(--font-brand); font-weight: 700; font-size: var(--s3); line-height: 1.12; letter-spacing: -.035em; margin: 0; }
.quote__mark { font-family: var(--font-brand); font-size: var(--s5); line-height: .6; color: var(--gold-2); }
.quote cite { font-style: normal; font-size: var(--s-1); opacity: .8; }

/* ---- AI-kaartenmaker ---- */
.ai { display: grid; gap: clamp(1rem,2.5vw,2rem); grid-template-columns: minmax(0,1fr) minmax(0,.85fr); align-items: start; }
@media (max-width: 900px) { .ai { grid-template-columns: minmax(0,1fr); } }
.ai__canvas { position: relative; aspect-ratio: 4/3; border-radius: var(--r-md); background: var(--paper); box-shadow: var(--sh-lift); display: grid; place-items: center; overflow: hidden; color: var(--ink-3); text-align: center; padding: 1.5rem; }
.ai__canvas[data-state="done"] { background: linear-gradient(150deg, var(--b100), var(--b200) 55%, var(--gold-4)); color: var(--brand-text); }
.ai__canvas .spin { width: 46px; height: 46px; border-radius: 50%; border: 4px solid var(--paper-3); border-top-color: var(--action); animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ai__chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.ai__acts { display: flex; gap: .5rem; flex-wrap: wrap; }
.postcap { display: flex; gap: .5rem; align-items: start; font-size: var(--s-2); border: 2px dashed var(--gold-2); border-radius: var(--r-sm); padding: .6rem .75rem; }

/* ---- FASE 3: zijbalk in de stijl van de bijlage ---- */
.sidebox { background: var(--paper); border-radius: var(--r-md); box-shadow: var(--sh-tag); overflow: hidden; }
.sidebox > summary { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1.1rem; cursor: pointer; list-style: none; font-family: var(--font-mono); font-size: var(--s-2); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.sidebox > summary::-webkit-details-marker { display: none; }
.sidebox > summary::after { content: "⌃"; font-family: var(--font-ui); color: var(--ink-3); transform: translateY(3px); }
.sidebox:not([open]) > summary::after { transform: rotate(180deg) translateY(1px); }
.sidebox__bd { padding: 0 0 .5rem; display: grid; }
.ctree { display: grid; }
.crow { display: flex; align-items: center; gap: .65rem; min-height: 44px; padding: .3rem 1.1rem; text-decoration: none; color: var(--ink); font-size: var(--s-1); border-left: 3px solid transparent; cursor: pointer; background: none; border-top: 0; border-right: 0; border-bottom: 0; width: 100%; text-align: left; }
.crow:hover { background: var(--paper-2); }
.crow[aria-current="true"], .crow[aria-expanded="true"] { border-left-color: var(--action); font-weight: 700; }
.crow__n { margin-left: auto; font-family: var(--font-mono); font-size: var(--s-2); color: var(--ink-3); }
.crow--kid { padding-left: 2.1rem; font-size: var(--s-1); }
.ctree__kids { background: var(--paper-2); }
.crow__c { width: 19px; height: 19px; flex: none; color: var(--ink-3); transition: transform var(--dur-hover) var(--ease-out); }
.crow[aria-expanded="true"] .crow__c { transform: rotate(180deg); }
.slider { padding: .6rem 1.1rem 1rem; display: grid; gap: .7rem; }
.slider__io { display: flex; align-items: end; gap: .6rem; }
.slider__io label { display: grid; gap: .2rem; flex: 1; font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.slider__io input { min-height: 40px; width: 100%; padding: .3em .55em; border: 2px solid var(--line); border-radius: var(--r-sm); background: #FFFDF9; color: var(--ink); font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; }
.slider__io i { font-style: normal; padding-bottom: .6rem; color: var(--ink-3); }
.slider__t { position: relative; height: 26px; }
.slider__t input[type="range"] { position: absolute; inset: 0; width: 100%; height: 26px; margin: 0; background: transparent; appearance: none; pointer-events: none; }
.slider__t input[type="range"]::-webkit-slider-thumb { appearance: none; pointer-events: auto; width: 20px; height: 20px; border-radius: var(--r-xs); background: var(--paper); border: 2px solid var(--action); box-shadow: 0 1px 3px #0003; cursor: pointer; }
.slider__t input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: var(--r-xs); background: var(--paper); border: 2px solid var(--action); cursor: pointer; }
.slider__rail { position: absolute; left: 0; right: 0; top: 11px; height: 4px; border-radius: 2px; background: var(--paper-3); }
.slider__fill { position: absolute; top: 11px; height: 4px; border-radius: 2px; background: var(--action); }
.slider__lbl { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--s-2); color: var(--ink-3); }
.sidebox .fopt { padding: .25rem 1.1rem; border-radius: 0; }
.finfo { width: 18px; height: 18px; flex: none; color: var(--ink-3); }

/* ---- uitgelicht blok in het raster (2×2) ---- */
.feat { grid-column: span 2; grid-row: span 2; position: relative; display: flex; flex-direction: column; justify-content: end; gap: .35rem; min-height: 100%; padding: 1.2rem 1.25rem; border-radius: var(--r-md); overflow: hidden; isolation: isolate; text-decoration: none; color: var(--ink); background: var(--paper); box-shadow: var(--sh-tag); transition: transform calc(var(--dur-hover) * var(--motion-scale)) var(--ease-out), box-shadow calc(var(--dur-hover) * var(--motion-scale)) var(--ease-out); }
.feat:hover { transform: translateY(-5px); box-shadow: var(--sh-lift); }
.feat__ph { position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, var(--b100), var(--b200) 60%, var(--gold-4)); }
.feat__ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--paper) 30%, transparent 75%); }
.feat h3 { font-size: var(--s2); }
.feat p { font-size: var(--s-1); color: var(--ink-2); max-width: 32ch; }
.feat .ribbon { align-self: start; margin-bottom: .3rem; }
@media (max-width: 560px) { .feat { grid-column: 1 / -1; grid-row: auto; min-height: 260px; } }

/* ---- kaart: sfeerbeeld bij muisaanwijzer, mandje, voorraadlogo ---- */
.card__media .ph2 { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 12%; background: linear-gradient(150deg, var(--b100), var(--b200) 60%, var(--gold-4)); color: var(--brand-text); font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: 0; transition: opacity calc(var(--dur-enter) * var(--motion-scale)) var(--ease-out); }
.card:hover .card__media .ph2, .card:focus-within .card__media .ph2 { opacity: 1; }
.card__stock { position: absolute; top: 8px; right: 8px; z-index: 3; display: inline-flex; align-items: center; gap: .3rem; padding: .28em .5em; border-radius: var(--r-xs); background: var(--warn-s); color: var(--warn); border: 1.5px solid var(--warn-l); font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.card__stock[data-s="out"] { background: var(--stop-s); color: var(--stop); border-color: var(--stop); }
.card__fav { top: 6px; right: 6px; }

.card__add { width: auto; min-width: 38px; padding: 0 .55em; }
.card--off { cursor: default; opacity: .72; }
.card--off:hover { transform: none; box-shadow: var(--sh-tag); }
.card--off .card__media { filter: grayscale(.5); }
.card--off .card__pts { color: var(--ink-3); }

/* ---- FASE 4: productpagina in de stijl van de bijlage ---- */
.pdp2 { display: grid; gap: clamp(1rem,2.5vw,2.5rem); grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr); align-items: stretch; height: calc(100vh - 128px); }
.pcol-l, .pcol-r { min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-right: 6px; }
.pcol-l::-webkit-scrollbar, .pcol-r::-webkit-scrollbar { width: 8px; }
.pcol-l::-webkit-scrollbar-thumb, .pcol-r::-webkit-scrollbar-thumb { background: var(--ground-line); border-radius: 4px; }
.pcol-l::after, .pcol-r::after { content: ""; display: block; height: clamp(1.5rem, 4vw, 3rem); }
@media (max-width: 900px) { .pdp2 { height: auto; grid-template-columns: minmax(0,1fr); } .pcol-l, .pcol-r { overflow: visible; padding-right: 0; } }
@media (max-width: 1000px) { .pdp2 { grid-template-columns: minmax(0,1fr); } }
.shots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(.5rem, 1vw, .9rem); align-items: start; }
.shots > .shot:nth-child(1), .shots > .shot:nth-child(2) { grid-column: span 3; }
.shots > .shot:nth-child(3) { grid-column: span 6; }
.shots > .shot:nth-child(n+4) { grid-column: span 2; }
@media (max-width: 620px) {
  .shots > .shot:nth-child(1), .shots > .shot:nth-child(2) { grid-column: span 6; }
  .shots > .shot:nth-child(n+4) { grid-column: span 3; }
}
.shot { position: relative; background: var(--paper-2); display: grid; place-items: center; overflow: hidden; border: 0; cursor: zoom-in; padding: 0; border-radius: var(--r-sm); box-shadow: var(--sh-tag); }

.shot > span:not(.shot__b) { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding: 12%; text-align: center; }
.shot:nth-child(odd) { background: var(--paper-2); } .shot:nth-child(even) { background: var(--paper-3); }
.shot:hover > span:not(.shot__b) { color: var(--ink-2); }
.buy2 { position: static; display: grid; gap: .8rem; padding: 0 0 0 clamp(0px,1.5vw,1.5rem); background: transparent; }
@media (max-width: 1000px) { .buy2 { position: static; padding-left: 0; } }
.buy2 .eyebrow { display: block; }
.buy2 h1 { font-size: var(--s4); line-height: 1.02; }
.buy2__sub { font-size: var(--s0); color: var(--g-ink-2); }
.buy2__pts { font-family: var(--font-brand); font-weight: 900; font-size: var(--s2); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.buy2__pts small { font-family: var(--font-mono); font-size: var(--s-2); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; margin-left: .4em; color: var(--g-ink-3); }
.hr { height: 1px; background: var(--ground-line); border: 0; margin: .2rem 0; }
.buy2 .btn--lg { width: 100%; }
.buy2__note { display: flex; gap: .55rem; align-items: start; font-size: var(--s-1); color: var(--g-ink-2); }
.pblock { border-top: 1px solid var(--ground-line); padding-top: clamp(1.25rem,3vw,2rem); margin-top: clamp(1.5rem,3.5vw,2.75rem); }
.pblock h2 { font-size: var(--s2); margin-bottom: 1rem; }
.pcols { columns: 1; font-size: var(--s-1); color: var(--g-ink-2); }

@media (max-width: 700px) { .pcols { columns: 1; } }
.pcols p, .pcols ul { break-inside: avoid; margin: 0 0 .8rem; }
.pcols ul { padding-left: 1.1rem; display: grid; gap: .25rem; }
.pcols b { color: var(--g-ink); }
.specgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 clamp(1.25rem,3vw,2.5rem); }
.specgrid h3 { font-size: var(--s0); margin: .4rem 0 .3rem; }
.specrow { display: flex; gap: 1rem; justify-content: space-between; padding: .55rem .75rem; font-size: var(--s-1); }
.specrow:nth-child(even) { background: var(--paper-2); }
.specrow span:first-child { color: var(--g-ink-2); }
.specrow span:last-child { font-weight: 600; text-align: right; }
.clamp { position: relative; overflow: hidden; }
.clamp[data-open="0"] { max-height: 260px; }
.clamp[data-open="0"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(to top, var(--ground), transparent); pointer-events: none; }
.more { margin-top: .9rem; display: inline-flex; align-items: center; gap: .5rem; min-height: 46px; padding: .55em 1.1em; border: 2px solid var(--action); border-radius: var(--r-sm); background: transparent; color: var(--action); font-weight: 700; font-size: var(--s-1); cursor: pointer; }
.more:hover { background: var(--action); color: var(--action-on); }
.more svg { transition: transform var(--dur-hover) var(--ease-out); }
.more[aria-expanded="true"] svg { transform: rotate(180deg); }
.specsearch { display: flex; align-items: center; gap: .5rem; min-height: 46px; padding: 0 .9rem; border: 2px solid var(--ground-line); border-radius: var(--r-pill); color: var(--g-ink-3); margin-bottom: 1rem; max-width: 520px; }
.specsearch input { flex: 1; border: 0; background: transparent; font: inherit; font-size: var(--s-1); color: var(--g-ink); outline: none !important; box-shadow: none !important; }

/* ---- FASE 5: bestelling volgen met illustraties ---- */
.tdeck { display: flex; gap: 1rem; align-items: center; padding: 1rem 1.15rem; border-radius: var(--r-md); background: var(--paper-2); margin-bottom: 1.25rem; }
.tdeck__img { width: 92px; height: 92px; flex: none; border-radius: var(--r-sm); background: linear-gradient(150deg, var(--b100), var(--b200)); display: grid; place-items: center; font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-text); text-align: center; padding: .4rem; }
.tstep__ill { width: 42px; height: 42px; flex: none; border-radius: var(--r-pill); background: var(--b100); color: var(--brand-text); display: grid; place-items: center; }
.tstep { grid-template-columns: 26px 42px minmax(0,1fr); align-items: start; }
.tstep[data-done="1"] .tstep__ill { background: var(--gold-3); color: var(--gold-ink); }

/* ---- FASE 5: checkout ---- */
.sumblock { border-radius: var(--r-md); background: var(--paper); padding: 1.15rem; display: grid; gap: .8rem; box-shadow: var(--sh-tag); margin-top: 1.5rem; }
.sumline { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: .7rem; align-items: center; font-size: var(--s-1); }
.sumline__img { aspect-ratio: 1; border-radius: var(--r-xs); background: linear-gradient(150deg, var(--b100), var(--b200)); }
.sumline b { font-variant-numeric: tabular-nums; }
.blocker { border: 2px solid var(--warn-l); background: var(--warn-s); color: var(--warn); border-radius: var(--r-md); padding: .9rem 1.05rem; display: grid; gap: .6rem; font-size: var(--s-1); }
.blocker b { font-family: var(--font-brand); font-size: var(--s0); }
.blocker .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.blocker .btn { justify-self: start; }

/* ---- FAQ in de stijl van de bijlage ---- */
.qa { border-bottom: 1px solid var(--ground-line); }
.qa > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem .25rem; cursor: pointer; list-style: none; font-weight: 700; font-size: var(--s0); color: var(--g-ink); }
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary::after { content: ""; width: 12px; height: 12px; flex: none; border-right: 2.5px solid var(--action); border-bottom: 2.5px solid var(--action); transform: rotate(45deg) translate(-3px,-3px); transition: transform var(--dur-hover) var(--ease-out); }
.qa[open] > summary::after { transform: rotate(225deg) translate(-2px,-2px); }
.qa__bd { padding: 0 .25rem 1.15rem; max-width: 72ch; color: var(--g-ink-2); font-size: var(--s-1); }

/* ---- confetti na het inloggen ---- */
.pop { position: fixed; inset: 0; z-index: 88; pointer-events: none; overflow: hidden; }
.pop i { position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; animation: drop linear forwards; }
@keyframes drop { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(105vh) rotate(var(--r)); opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .pop { display: none; } }

/* ---- diverse ---- */
.langsw--solid { border-color: var(--line); }
.langsw--solid button { color: var(--ink-3); }
.langsw--solid button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.login__lang { position: absolute; top: 1rem; right: 1rem; z-index: 3; }
.login__form { position: relative; }
.helpline { display: flex; gap: .5rem; align-items: center; font-size: var(--s-1); color: var(--ink-2); border-top: 2px dashed var(--line); padding-top: .9rem; margin-top: .3rem; flex-wrap: wrap; }
.helpline a { color: var(--brand-text); font-weight: 600; }
.vidbtn { position: relative; width: 100%; border: 0; padding: 0; cursor: pointer; border-radius: var(--r-md); overflow: hidden; display: block; background: var(--b100); }
.vidbtn__in { aspect-ratio: 16/9; display: grid; place-items: center; gap: .5rem; color: var(--brand-text); }
.vidbtn:hover .vidbtn__play { transform: scale(1.08); }
.vidbtn__play { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 999px; background: var(--action); color: var(--action-on); transition: transform var(--dur-hover) var(--ease-out); }
.modal__box--wide { width: min(940px, 100%); }
.modal__box--full { width: 100%; max-width: none; max-height: calc(100vh - 2rem); height: calc(100vh - 2rem); border-radius: var(--r-md); }
.modal__box--full .modal__bd { max-width: 900px; margin-inline: auto; width: 100%; }

/* ============================================================
   FASE 6 — BEWEGING MET EEN ROL
   Uitleggen, belonen, sfeer. Niets beweegt bij het scrollen:
   dat vertraagt precies de mensen die iets zoeken.
   ============================================================ */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes popin { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%,100% { transform: scale(1); } 40% { transform: scale(1.35); } }
@keyframes sheen { 0% { background-position: 100% 0; } 55% { background-position: 0 0; } 100% { background-position: 0 0; } }
@keyframes fly { to { transform: translate(var(--fx), var(--fy)) scale(.15); opacity: 0; } }
#app > *:nth-child(-n+4) { animation: rise calc(var(--dur-enter) * var(--motion-scale)) var(--ease-out) backwards; } /* KOPPELING: backwards i.p.v. both: geen blijvende transform (vaste vensters zoals het filtermenu) */
#app > *:nth-child(2) { animation-delay: calc(40ms * var(--motion-scale)); }
#app > *:nth-child(3) { animation-delay: calc(80ms * var(--motion-scale)); }
#app > *:nth-child(4) { animation-delay: calc(120ms * var(--motion-scale)); }
.kompas__res .grid > * { animation: popin calc(var(--dur-emph) * var(--motion-scale)) var(--ease-pop) both; }
.kompas__res .grid > *:nth-child(2) { animation-delay: calc(70ms * var(--motion-scale)); }
.kompas__res .grid > *:nth-child(3) { animation-delay: calc(140ms * var(--motion-scale)); }
.icobtn__n.is-new { animation: pulse calc(var(--dur-emph) * var(--motion-scale)) var(--ease-pop); }
.bal__n { animation: sheen calc(2600ms * var(--motion-scale)) var(--ease-out) 600ms 1 both; }
.flyer { position: fixed; z-index: 85; pointer-events: none; border-radius: var(--r-sm); background: var(--action); color: var(--action-on); display: grid; place-items: center; animation: fly calc(620ms * var(--motion-scale)) var(--ease-inout) forwards; }
@media (prefers-reduced-motion: reduce) { .flyer { display: none; } #app > * { animation: none !important; } }

@media (max-width: 640px) {
  .logo__txt { display: none; }
  .hdr__in { gap: .4rem; padding-inline: 1rem; }
  .hmeter { padding: .2rem .45rem; gap: .35rem; box-shadow: inset 0 0 0 1.5px var(--line); }
  .hmeter__b b { font-size: var(--s-1); } .hmeter__b span { font-size: 8px; letter-spacing: .08em; }
  .icobtn { width: 38px; height: 38px; }
  .util__promise { display: none; }
}
@media (max-width: 400px) { .hmeter__b span { display: none; } }

/* ============================================================
   RONDE 3 — NIEUWE ONDERDELEN
   ============================================================ */

/* ---- publieke pagina's buiten de inlog ---- */
.land__hd { display: flex; align-items: center; gap: 1rem; padding: 0.9rem var(--gut); max-width: var(--wrapw); margin-inline: auto; flex-wrap: wrap; }
.land__hd .logo { color: var(--g-ink); }
.land__hd .logo__txt span { color: var(--g-ink-3); }
.land__in { display: grid; gap: clamp(1.25rem,3vw,2.5rem); grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr); align-items: center; }
@media (max-width: 900px) { .land__in { grid-template-columns: minmax(0,1fr); } }
.land h1 { font-size: var(--s5); max-width: 15ch; }
.land__cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); }
.lcard { background: var(--paper); color: var(--ink); border-radius: var(--r-md); box-shadow: var(--sh-tag); padding: 1.15rem 1.25rem; display: grid; gap: .45rem; align-content: start; }
.lcard h3 { font-size: var(--s1); } .lcard p { font-size: var(--s-1); color: var(--ink-2); }
.lcard .btn { justify-self: start; margin-top: .3rem; }

/* ---- mijn overzicht ---- */
.acct { display: grid; gap: clamp(1.25rem,3vw,2.5rem); grid-template-columns: 230px minmax(0,1fr); align-items: start; }
@media (max-width: 900px) { .acct { grid-template-columns: minmax(0,1fr); } }
.acctnav { display: grid; gap: .1rem; position: sticky; top: 86px; }
@media (max-width: 900px) { .acctnav { position: static; grid-auto-flow: column; overflow-x: auto; } }
.acctnav button { text-align: left; border: 0; background: transparent; cursor: pointer; padding: .6em .8em; border-left: 3px solid transparent; color: var(--g-ink-2); font-size: var(--s-1); font-weight: 600; white-space: nowrap; }
.acctnav button:hover { color: var(--g-ink); }
.acctnav button[aria-current="true"] { color: var(--g-ink); border-left-color: var(--action); background: var(--b50); }
.ordc { background: var(--paper); color: var(--ink); border-radius: var(--r-md); box-shadow: var(--sh-tag); padding: 1.1rem 1.2rem; display: grid; gap: .75rem; }
.ordc__hd { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.ordc__hd b { font-family: var(--font-mono); font-size: var(--s-1); }
.ordc__items { display: grid; gap: .55rem; }
.led { width: 100%; border-collapse: collapse; font-size: var(--s-1); }
.led td { padding: .55rem .7rem; border-bottom: 1px solid var(--line); }
.led tr:last-child td { border-bottom: 0; }
.led .n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.led .n[data-s="1"] { color: var(--ok); } .led .n[data-s="-1"] { color: var(--ink-2); }
.led tfoot td { border-top: 2px dashed var(--line); font-weight: 800; font-family: var(--font-brand); }

/* ---- reviews ---- */
.stars { display: inline-flex; gap: 1px; color: var(--gold-2); }
.stars svg { width: 15px; height: 15px; }
.stars[data-size="lg"] svg { width: 20px; height: 20px; }
.rsum { display: flex; align-items: center; gap: .6rem; font-size: var(--s-1); }
.rsum b { font-family: var(--font-brand); font-size: var(--s1); letter-spacing: -.03em; }
.rlist { display: grid; gap: .9rem; }
.rev { border-top: 1px solid var(--ground-line); padding-top: .9rem; display: grid; gap: .3rem; }
.rev__hd { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; font-size: var(--s-2); color: var(--g-ink-3); }
.rev__hd b { color: var(--g-ink); font-size: var(--s-1); }
.rev p { font-size: var(--s-1); color: var(--g-ink-2); max-width: 70ch; }
.rbars { display: grid; gap: .25rem; max-width: 280px; }
.rbar { display: grid; grid-template-columns: 14px 1fr 28px; gap: .5rem; align-items: center; font-size: var(--s-2); color: var(--g-ink-3); }
.rbar i { height: 7px; border-radius: 4px; background: var(--paper-3); display: block; position: relative; overflow: hidden; }
.rbar i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--gold-2); }
.rstarbtns { display: flex; gap: .2rem; }
.rstarbtns button { border: 0; background: transparent; cursor: pointer; color: var(--ink-3); padding: 2px; min-height: 40px; }
.rstarbtns svg { width: 26px; height: 26px; }
.rstarbtns button[aria-pressed="true"], .rstarbtns button.on { color: var(--gold-2); }
.card__rev { display: flex; align-items: center; gap: .3rem; font-size: 10px; color: var(--ink-3); font-family: var(--font-mono); min-height: 14px; white-space: nowrap; overflow: hidden; }
.card__rev .stars svg { width: 11px; height: 11px; }

/* ---- beeldtypen en lightbox ---- */
.shot__b { position: absolute; left: 10px; bottom: 10px; padding: .3em .5em; height: auto; width: auto; color: #fff; font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; background: var(--ink); color: var(--paper); padding: .3em .5em; border-radius: var(--r-xs); display: inline-flex; align-items: center; gap: .3rem; }
.shot__b svg { width: 12px; height: 12px; }
.lb { position: fixed; inset: 0; z-index: 95; background: oklch(0.16 0.02 var(--brand-h) / 0.94); display: grid; grid-template-rows: auto 1fr auto; opacity: 0; pointer-events: none; transition: opacity calc(var(--dur-overlay) * var(--motion-scale)) var(--ease-inout); }
.lb.is-open { opacity: 1; pointer-events: auto; }
.lb__hd { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; color: #fff; }
.lb__hd b { font-family: var(--font-brand); font-size: var(--s0); }
.lb__hd span { font-size: var(--s-1); color: #ffffffb8; }
.lb__stage { position: relative; display: grid; place-items: center; padding: 0 clamp(1rem,7vw,5rem); }
.lb__img { width: min(860px, 100%); aspect-ratio: 4/3; border-radius: var(--r-md); background: linear-gradient(150deg, var(--b100), var(--b200) 60%, var(--gold-4)); display: grid; place-items: center; color: var(--brand-text); font-family: var(--font-mono); font-size: var(--s-1); letter-spacing: .1em; text-transform: uppercase; text-align: center; padding: 2rem; cursor: grab; }
.lb__img[data-k="360"]:active { cursor: grabbing; }
.lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--r-pill); border: 2px solid #ffffff59; background: #ffffff1a; color: #fff; cursor: pointer; }
.lb__nav:hover { background: #ffffff33; }
.lb__nav[data-d="-1"] { left: clamp(.5rem,2vw,1.5rem); } .lb__nav[data-d="1"] { right: clamp(.5rem,2vw,1.5rem); }
.lb__ft { display: flex; gap: .5rem; justify-content: center; padding: 1rem; flex-wrap: wrap; }
.lb__ft button { min-height: 40px; padding: .3em .8em; border-radius: var(--r-sm); border: 2px solid #ffffff40; background: transparent; color: #ffffffcc; font-size: var(--s-2); font-weight: 700; cursor: pointer; }
.lb__ft button[aria-pressed="true"] { background: #fff; color: var(--ink); border-color: #fff; }

/* ---- merkenfilter (dropdown met vinkjes) ---- */
.bdd { position: relative; }
.bdd__t { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; min-height: 46px; padding: .4em .8em; border: 2px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); font: inherit; font-size: var(--s-1); font-weight: 600; cursor: pointer; }
.bdd__t:hover { border-color: var(--ink); }
.bdd__t svg { transition: transform var(--dur-hover) var(--ease-out); }
.bdd__t[aria-expanded="true"] svg { transform: rotate(180deg); }
.bdd__p { position: static; margin-top: 4px; max-height: min(300px, 46vh); overflow-y: auto; overscroll-behavior: contain; background: var(--paper); border: 2px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--sh-tag); padding: .3rem; scrollbar-width: thin; animation: bddIn calc(var(--dur-enter) * var(--motion-scale)) var(--ease-out); }
@keyframes bddIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.bdd__p::-webkit-scrollbar { width: 8px; }
.bdd__p::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.bdd__s { display: flex; align-items: center; gap: .5rem; padding: .3rem .5rem; position: sticky; top: -.3rem; background: var(--paper); border-bottom: 1px solid var(--line); margin: -.3rem -.3rem .3rem; }
.bdd__s input { flex: 1; border: 0; background: transparent; font: inherit; font-size: var(--s-1); color: var(--ink); outline: none !important; box-shadow: none !important; min-height: 36px; }
.bdd .fopt { padding: .2rem .5rem; }

/* ---- carrousel ---- */
.carou { position: relative; }
.carou__vp { overflow: hidden; }
.carou__tr { display: flex; gap: clamp(.75rem,1.4vw,1.2rem); transition: transform calc(var(--dur-emph) * var(--motion-scale)) var(--ease-inout); }
.carou__tr > * { flex: 0 0 calc((100% - 3 * clamp(.75rem,1.4vw,1.2rem)) / 4); }
@media (max-width: 1100px) { .carou__tr > * { flex-basis: calc((100% - 2 * .9rem) / 3); } }
@media (max-width: 800px)  { .carou__tr > * { flex-basis: calc((100% - .9rem) / 2); } }
@media (max-width: 520px)  { .carou__tr > * { flex-basis: 78%; } }
.carou__b { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-pill); border: 2px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; box-shadow: var(--sh-tag); z-index: 3; }
.carou__b:hover { border-color: var(--ink); }
.carou__b[disabled] { opacity: .35; cursor: default; }
.carou__b[data-d="-1"] { left: -18px; } .carou__b[data-d="1"] { right: -18px; }
@media (max-width: 1400px) { .carou__b[data-d="-1"] { left: 4px; } .carou__b[data-d="1"] { right: 4px; } }
.carou__dots { display: flex; gap: .4rem; justify-content: center; margin-top: .9rem; }
.carou__dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: var(--paper-3); cursor: pointer; }
.carou__dots button[aria-current="true"] { background: var(--action); width: 22px; border-radius: 5px; }

/* ---- interactieve kaart met hotspots ---- */
.hot { position: relative; aspect-ratio: 16/9; border-radius: var(--r-md); overflow: hidden; background: linear-gradient(150deg, var(--b100), var(--b200) 55%, var(--gold-4)); box-shadow: var(--sh-tag); }
.hot__ph { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--s-2); letter-spacing: .12em; text-transform: uppercase; color: var(--brand-text); }
.hot__p { position: absolute; transform: translate(-50%,-50%); width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--paper); background: var(--action); color: var(--action-on); font-weight: 800; font-size: var(--s-2); display: grid; place-items: center; cursor: pointer; box-shadow: 0 3px 10px #0003; }
.hot__p::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--action); opacity: .5; animation: ping calc(2200ms * var(--motion-scale)) var(--ease-out) infinite; }
@keyframes ping { 0% { transform: scale(.7); opacity: .6; } 70%,100% { transform: scale(1.35); opacity: 0; } }
.hot__p[aria-pressed="true"] { background: var(--gold-2); color: var(--gold-ink); }
.hot__c { position: absolute; z-index: 4; width: min(280px, 70%); transform: translate(-50%, 12px); background: var(--paper); color: var(--ink); border-radius: var(--r-sm); box-shadow: var(--sh-lift); padding: .85rem .95rem; display: grid; gap: .35rem; }
.hot__c b { font-size: var(--s-1); } .hot__c p { font-size: var(--s-2); color: var(--ink-2); }
.hot__c .btn { justify-self: start; min-height: 36px; padding: .3em .7em; font-size: var(--s-2); }

/* ---- vrije contentpagina ---- */
.cblocks { display: grid; gap: clamp(1.25rem,3vw,2.25rem); }
.cb { display: grid; gap: .6rem; }
.cb h2 { font-size: var(--s2); }
.cb p { font-size: var(--s0); color: var(--g-ink-2); max-width: 70ch; }
.cb--beeld .ph3 { aspect-ratio: 21/9; border-radius: var(--r-md); background: linear-gradient(150deg, var(--b100), var(--b200) 60%, var(--gold-4)); display: grid; place-items: center; color: var(--brand-text); font-family: var(--font-mono); font-size: var(--s-2); letter-spacing: .1em; text-transform: uppercase; }
.cb--kolom3 .trio3 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); }
.cb--vraag { background: var(--paper); color: var(--ink); border-radius: var(--r-md); box-shadow: var(--sh-tag); padding: 1.25rem 1.4rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.cb--vraag > div { flex: 1 1 260px; }

/* ---- bezorgmoment en PostNL-punten ---- */
.slots { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); }
.slot { display: grid; gap: .1rem; padding: .7rem .8rem; border: 2px solid var(--line); border-radius: var(--r-sm); background: #FFFDF9; cursor: pointer; color: var(--ink); text-align: left; }
.slot:hover { border-color: var(--ink-3); }
.slot[aria-pressed="true"] { border-color: var(--ink); background: var(--paper-2); }
.slot b { font-size: var(--s-1); } .slot span { font-size: var(--s-2); color: var(--ink-2); }
.slot[data-extra="1"] span { color: var(--warn); }
.pmap { position: relative; aspect-ratio: 16/10; border-radius: var(--r-sm); overflow: hidden; background: var(--b50); border: 2px solid var(--line); }
.pmap__p { position: absolute; transform: translate(-50%,-100%); min-height: 32px; padding: .2em .55em; border-radius: var(--r-pill); border: 2px solid var(--line); background: var(--paper); color: var(--ink); font-size: var(--s-2); font-weight: 700; cursor: pointer; box-shadow: var(--sh-tag); white-space: nowrap; }
.pmap__p[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---- controlestap ---- */
.crumbsteps { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: var(--s-2); font-family: var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--g-ink-3); margin-bottom: 1rem; }
.crumbsteps b { color: var(--g-ink); }
.check__grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.check__box { background: var(--paper); color: var(--ink); border-radius: var(--r-md); box-shadow: var(--sh-tag); padding: 1rem 1.15rem; display: grid; gap: .3rem; align-content: start; }
.check__box .eyebrow { color: var(--ink-3); }
.check__box b { font-size: var(--s-1); }
.check__box a { font-size: var(--s-2); justify-self: start; margin-top: .3rem; }

/* ---- laadtoestanden ---- */
.preload { position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; background: var(--ground); gap: 1rem; }
.preload__m { width: 62px; height: 62px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--action); color: var(--action-on); font-family: var(--font-brand); font-weight: 900; font-size: 1.1rem; letter-spacing: -.04em; animation: breathe calc(1400ms * var(--motion-scale)) var(--ease-inout) infinite; }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.preload__b { width: 180px; height: 4px; border-radius: 2px; background: var(--paper-3); overflow: hidden; }
.preload__b i { display: block; height: 100%; width: 40%; background: var(--action); animation: slide calc(1100ms * var(--motion-scale)) var(--ease-inout) infinite; }
@keyframes slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(310%); } }
.sk { background: linear-gradient(90deg, var(--paper-2) 25%, var(--paper-3) 37%, var(--paper-2) 63%); background-size: 400% 100%; animation: shimmer calc(1400ms * var(--motion-scale)) linear infinite; border-radius: var(--r-xs); }
@keyframes shimmer { to { background-position: -135% 0; } }
.skcard { background: var(--paper); border-radius: var(--r-md); padding: 12px; box-shadow: var(--sh-tag); display: grid; gap: .5rem; }
.skcard .sk--img { aspect-ratio: 1; border-radius: max(0px, calc(var(--r-md) - 6px)); }
.skcard .sk--l1 { height: 9px; width: 45%; } .skcard .sk--l2 { height: 13px; width: 90%; } .skcard .sk--l3 { height: 13px; width: 60%; }
.skcard .sk--f { height: 26px; margin-top: .4rem; }
@media (prefers-reduced-motion: reduce) { .sk, .preload__b i, .preload__m { animation: none !important; } }

/* ---- chat- en hulpwidget ---- */
.chatfab { position: fixed; right: 14px; bottom: 14px; z-index: 57; width: 54px; height: 54px; display: none; place-items: center; border: 2px solid var(--deep); border-radius: var(--r-pill); background: var(--deep); color: #fff; cursor: pointer; box-shadow: var(--sh-lift); }
.chatfab.is-on { display: grid; }
.chatfab:hover { background: var(--b900); }
.chatfab svg { width: 24px; height: 24px; }
.chatw { position: fixed; right: 14px; bottom: 14px; z-index: 58; width: min(360px, calc(100vw - 28px)); background: var(--paper); color: var(--ink); border-radius: var(--r-md); box-shadow: var(--sh-lift); display: none; grid-template-rows: auto 1fr auto; max-height: min(560px, 76vh); overflow: hidden; }
.chatw.is-open { display: grid; }
.chatw__hd { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; background: var(--deep); color: #fff; }
.chatw__hd b { font-family: var(--font-brand); font-size: var(--s-1); }
.chatw__hd span { font-size: var(--s-2); color: #ffffffdd; display: block; }
.chatw__hd .icobtn { color: inherit; margin-left: auto; width: 34px; height: 34px; }
.chatw__bd { overflow: auto; padding: 1rem; display: grid; gap: .6rem; align-content: start; }
.bub { max-width: 85%; padding: .6rem .8rem; border-radius: var(--r-md); font-size: var(--s-1); }
.bub--bot { background: var(--paper-2); justify-self: start; border-bottom-left-radius: var(--r-xs); }
.bub--me { background: var(--action); color: var(--action-on); justify-self: end; border-bottom-right-radius: var(--r-xs); }
.chatw__q { display: flex; gap: .35rem; flex-wrap: wrap; }
.chatw__q button { min-height: 34px; padding: .25em .6em; border: 2px solid var(--line); border-radius: var(--r-pill); background: transparent; color: var(--ink); font-size: var(--s-2); font-weight: 600; cursor: pointer; }
.chatw__q button:hover { border-color: var(--ink); }
.chatw__ft { border-top: 1px solid var(--line); padding: .7rem .8rem; display: flex; gap: .4rem; }
.chatw__ft input { flex: 1; min-height: 40px; padding: .3em .6em; border: 2px solid var(--line); border-radius: var(--r-sm); background: #FFFDF9; color: var(--ink); font: inherit; font-size: var(--s-1); }

/* ---- taal-terugval ---- */
.fb { border-bottom: 1px dotted var(--warn); }

/* ---- mobiele pass ---- */
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 44; display: none; gap: .6rem; align-items: center; padding: .6rem var(--gut); background: var(--paper); color: var(--ink); box-shadow: 0 -8px 24px -14px #0006, 0 -1px 0 var(--line); }
.buybar > span:first-child { flex: none; white-space: nowrap; }
.buybar b { font-family: var(--font-brand); font-size: var(--s0); letter-spacing: -.03em; }
.buybar .btn { flex: 1; }
@media (max-width: 1000px) {
  .buybar { display: flex; }
  body:has(.buybar) .ft__bar { padding-bottom: 5.5rem; }
  body:has(.buybar) .fabs { bottom: 82px; }
  body:has(.buybar) .cog { bottom: 82px; }
  body:has(.buybar) .tsw { bottom: 82px; }
  .pdp2 { gap: 1rem; }
  .shots { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .shots .shot:nth-child(n+5) { display: none; }
  .buy2 h1 { font-size: var(--s3); }
  .buy2 { padding-top: .4rem; }
}
@media (max-width: 1000px) {
  .side { position: fixed; inset: 0 0 0 auto; z-index: 62; width: min(380px,100%); background: var(--paper); display: none; align-content: start; gap: .6rem; padding: 1rem; overflow: auto; box-shadow: -20px 0 60px -20px #0006; animation: slidein calc(var(--dur-overlay) * var(--motion-scale)) var(--ease-inout); }
  .side.is-open { display: grid; }
  @keyframes slidein { from { transform: translateX(100%); } to { transform: none; } }
  .side__hd { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
  .side__hd h2 { font-size: var(--s1); }
  .side__done { position: sticky; bottom: 0; background: var(--paper); padding-top: .6rem; }
}
@media (min-width: 1001px) { .side__hd, .side__done { display: none; } }
@media (max-width: 700px) {
  .bento .tile p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .tile { min-height: 150px; }
  .hero h1 { font-size: var(--s4); }
}

/* ---- sectievarianten ---- */
.kompas--onder { grid-template-columns: minmax(0,1fr); }
.hero--breed .hero__in { grid-template-columns: minmax(0,1fr); }
.hero--breed .hero__art { max-width: none; aspect-ratio: 21/8; transform: none; }
.hero--breed .flip__in { transform: none !important; }
.hero--compact .hero__in { padding-block: clamp(1rem,2vw,1.75rem) 0; }
.hero--compact .hero__art { display: none; }
.hero--compact h1 { max-width: 20ch; }
.quote--naast { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(1rem,3vw,2.5rem); align-items: center; text-align: left; max-width: none; justify-items: start; }
@media (max-width: 800px) { .quote--naast { grid-template-columns: minmax(0,1fr); } }
.quote--naast .ph4 { aspect-ratio: 4/3; width: 100%; border-radius: var(--r-md); background: linear-gradient(150deg, var(--b100), var(--b200)); display: grid; place-items: center; color: var(--brand-text); font-family: var(--font-mono); font-size: var(--s-2); letter-spacing: .1em; text-transform: uppercase; }
.impact--balk { grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); background: var(--paper); border-radius: var(--r-md); box-shadow: var(--sh-tag); overflow: hidden; gap: 0; }
.impact--balk div { box-shadow: none; border-radius: 0; border-right: 1px solid var(--line); }
.impact--balk div:last-child { border-right: 0; }
.ai--compact { grid-template-columns: minmax(0,1fr); }
.ai--compact .ai__canvas { aspect-ratio: 21/7; }
.steps--iconen .step { grid-template-columns: 44px minmax(0,1fr); }
.steps--iconen .step__n { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--b100); color: var(--brand-text); }
.steps--iconen .step__n svg { width: 22px; height: 22px; }
.trio--breed { grid-template-columns: minmax(0,1fr); }
.trio--breed .fcard--count { min-height: 0; }
.trio--breed .trio__rest { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
.rail--raster { display: grid; grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(212px,1fr)); overflow: visible; }
.bnr--tekst .bnr__ph { display: none; }
.bnr--tekst .bnr__in { background: var(--b50); }
.bnr--balk .bnr__in { min-height: 0; padding: .55rem 1rem; }
.bnr--balk .bnr__ph { display: none; }
.bnr--balk .bnr__tx b { font-size: var(--s0); }
.bnr--balk .bnr__tx span { display: none; }

/* ---- instellingenpaneel: volgorde ---- */
.ord { display: grid; gap: .3rem; }
.ordrow { display: flex; align-items: center; gap: .35rem; padding: .3rem .4rem; border: 1px solid var(--line); border-radius: var(--r-xs); background: #FFFDF9; }
.ordrow > span { flex: 1; font-size: var(--s-2); font-weight: 700; }
.ordrow select { max-width: 132px; font-size: 11px; min-height: 30px; }
.ordrow button { width: 26px; height: 26px; border: 1px solid var(--line); border-radius: var(--r-xs); background: transparent; color: var(--ink); cursor: pointer; font-size: 11px; line-height: 1; }
.ordrow button:hover { border-color: var(--ink); }
.ordrow input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--action); margin: 0; }
.ordrow[data-off="1"] > span { opacity: .45; text-decoration: line-through; }

.card__lead { display: flex; align-items: center; gap: .3rem; font-size: 10px; color: var(--ink-3); font-family: var(--font-mono); letter-spacing: .02em; margin-top: .15rem; white-space: nowrap; overflow: hidden; }
.card__lead svg { width: 12px; height: 12px; flex: none; }
.card--off .card__lead, .card--off .card__rev { opacity: .6; }

/* ============================================================
   RONDE 4 — CHROME, BANNER, SECTIES
   ============================================================ */

/* ---- plakkende schil: bovenste strook blijft altijd staan ---- */
.chrome { position: sticky; top: 0; z-index: 42; }
.hdr { position: static; }
.util { background: var(--paper-2); color: var(--ink-2); border-bottom: 1px solid var(--line); }
.util__in { gap: .75rem; padding-block: .35rem; flex-wrap: nowrap; }
.util .langsw { border-color: var(--line); }
.util .langsw button { color: var(--ink-3); }
.util .langsw button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.util a, .util .btn--quiet { color: var(--ink-2); }
.util .btn--quiet { --fg: var(--ink-2); }
.umeter { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; font-size: var(--s-1); color: var(--ink-2); }
.umeter b { font-family: var(--font-brand); font-weight: 900; font-size: var(--s0); letter-spacing: -.03em; color: var(--ink); }
.umeter svg { width: 15px; height: 15px; color: var(--ink-3); }
.umeter i { font-style: normal; color: var(--line-2, var(--ink-3)); padding-inline: .3rem; }
.search--util { flex: 0 1 420px; min-height: 36px; background: var(--paper); border-width: 1.5px; }
.search--util input { font-size: var(--s-1); }
.hdr__in { padding-block: .45rem; }
.nav { gap: .1rem; }
.nav a { font-size: var(--s0); padding: .6em .85em; }
@media (min-width: 1101px) { .nav { margin-left: auto; } .hdr__tools { margin-left: 0; } }
@media (max-width: 1100px) { .nav { display: none; } .burger { display: grid; } }
@media (max-width: 1320px) { .nav { display: none; } }
@media (min-width: 1101px) and (max-width: 1320px) { .nav { display: flex; } .burger { display: none; } }
@media (max-width: 900px) {
  .util__in { flex-wrap: wrap; gap: .5rem; }
  .search--util { flex: 1 1 100%; order: 3; }
  .util .btn--quiet { display: none; }
}
@media (max-width: 560px) { .umeter i + svg, .umeter i, .umeter b + span { } .umeter { font-size: var(--s-2); } }
.side { top: 118px; }

.faqnav, .acctnav { top: 126px; }

/* ---- saldoblok ---- */
.balance { padding-top: clamp(1rem, 2.4vw, 1.5rem); }
.balance--strak .bon { transform: none; border-radius: var(--r-sm); box-shadow: none; border: 2px solid var(--line); }
.balance--strak .bon::before, .balance--strak .bon::after { display: none; }
.balance--strak .bon__stub { border-left: 1px solid var(--line); }

/* ---- banner als echte beeldbanner ---- */
.bnr { padding-top: clamp(.9rem, 2vw, 1.4rem); }
.bnr__in { position: relative; overflow: hidden; border-radius: var(--r-md); display: block; padding: 0; min-height: 0; background: none; box-shadow: var(--sh-tag); }
.bnr__img { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(120deg, var(--b200), var(--b100) 45%, var(--gold-4)); }
.bnr__img > span { font-family: var(--font-mono); font-size: var(--s-2); letter-spacing: .12em; text-transform: uppercase; color: var(--brand-text); opacity: .7; }
.bnr__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, oklch(0.22 0.03 var(--brand-h) / 0.35) 0%, transparent 62%); }
.bnr--beeld { aspect-ratio: 21 / 6; min-height: 190px; }
.bnr--beeld .bnr__tx { position: absolute; left: clamp(1rem, 3vw, 2.25rem); top: 50%; transform: translateY(-50%); max-width: 46ch; display: grid; gap: .35rem; color: #fff; background: oklch(0.20 0.025 var(--brand-h) / 0.86); padding: clamp(1rem, 2vw, 1.5rem) clamp(1.1rem, 2.2vw, 1.75rem); border-radius: var(--r-md); backdrop-filter: blur(2px); }
.bnr--beeld .bnr__tx .eyebrow { color: #ffffffcc; }
.bnr--beeld .bnr__tx b { font-family: var(--font-brand); font-size: var(--s3); letter-spacing: -.035em; line-height: 1.06; }
.bnr--beeld .bnr__tx > span:not(.eyebrow) { font-size: var(--s0); color: #ffffffe6; max-width: 44ch; }
.bnr--beeld .btn { justify-self: start; margin-top: .5rem; }
@media (max-width: 760px) { .bnr--beeld { aspect-ratio: auto; min-height: 0; } .bnr--beeld .bnr__tx { position: relative; transform: none; left: 0; margin: 0; border-radius: 0; } .bnr--beeld .bnr__img { position: relative; inset: auto; aspect-ratio: 16/7; } }
.bnr--duo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); background: var(--paper); align-items: stretch; }
.bnr--duo .bnr__img { position: relative; inset: auto; min-height: 210px; }
.bnr--duo .bnr__tx { display: grid; gap: .35rem; align-content: center; padding: clamp(1.25rem, 3vw, 2rem); color: var(--ink); }
.bnr--duo .bnr__tx b { font-family: var(--font-brand); font-size: var(--s2); letter-spacing: -.03em; }
.bnr--duo .bnr__tx > span:not(.eyebrow) { font-size: var(--s-1); color: var(--ink-2); }
.bnr--duo .btn { justify-self: start; margin-top: .5rem; }
@media (max-width: 760px) { .bnr--duo { grid-template-columns: minmax(0,1fr); } }
.bnr--tekst, .bnr--balk { display: flex; align-items: center; gap: 1.25rem; padding: 1rem 1.3rem; background: var(--b50); color: var(--ink); }
.bnr--tekst .bnr__tx, .bnr--balk .bnr__tx { display: grid; gap: .15rem; }
.bnr--tekst b, .bnr--balk b { font-family: var(--font-brand); font-size: var(--s1); letter-spacing: -.03em; }
.bnr--tekst span, .bnr--balk span { font-size: var(--s-1); color: var(--ink-2); }
.bnr--tekst .btn, .bnr--balk .btn { margin-left: auto; flex: none; }
.bnr--balk { padding: .55rem 1.1rem; }
.bnr__in[data-full="1"]:is(.bnr--tekst, .bnr--balk, .bnr--duo) { background: var(--action); color: var(--action-on); }
.bnr__in[data-full="1"]:is(.bnr--tekst, .bnr--balk, .bnr--duo) span { color: #ffffffe6; }

/* ---- variantkiezer in de sectie ---- */
.secpick select { min-height: 40px; padding: .25em .6em; border: 2px solid var(--ground-line); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); font: inherit; font-size: var(--s-2); font-weight: 600; max-width: 230px; }

/* ---- bento: variant met vier ruime blokken ---- */
.bento--groot { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Zuilen: drie staande blokken, daaronder twee liggende. */
.bento--zuilen { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bento--zuilen > .tile { grid-column: span 2; min-height: clamp(300px, 34vw, 440px); }
.bento--zuilen > .tile:nth-child(n+4) { grid-column: span 3; min-height: 180px; }
.bento--zuilen > .tile:nth-child(-n+3) h3 { font-size: var(--s2); }

@media (max-width: 860px) { .bento--zuilen > .tile, .bento--zuilen > .tile:nth-child(n+4) { grid-column: span 3; min-height: 220px; } }
@media (max-width: 560px) { .bento--zuilen > .tile, .bento--zuilen > .tile:nth-child(n+4) { grid-column: 1 / -1; } }

/* Mozaïek: één groot vlak links, vier kleintjes eromheen. */
.bento--mozaiek { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); }
.bento--mozaiek > .tile { grid-column: span 1; }
.bento--mozaiek > .tile:nth-child(1) { grid-column: span 2; grid-row: span 2; min-height: 380px; }
.bento--mozaiek > .tile:nth-child(1) h3 { font-size: var(--s3); }
.bento--mozaiek > .tile:nth-child(2) { grid-column: span 2; }
.bento--mozaiek > .tile:nth-child(5) { grid-column: span 4; min-height: 190px; }
@media (max-width: 860px) { .bento--mozaiek { grid-template-columns: repeat(2, minmax(0,1fr)); } .bento--mozaiek > .tile, .bento--mozaiek > .tile:nth-child(n) { grid-column: span 2; grid-row: auto; min-height: 190px; } }

/* Trap: verspringende hoogtes, als een rij cadeaulabels aan een lijn. */
.bento--trap { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; }
.bento--trap > .tile { grid-column: span 2; }
.bento--trap > .tile:nth-child(3n+1) { min-height: 330px; }
.bento--trap > .tile:nth-child(3n+2) { min-height: 260px; margin-top: clamp(0px, 3vw, 46px); }
.bento--trap > .tile:nth-child(3n+3) { min-height: 300px; margin-top: clamp(0px, 1.5vw, 22px); }
@media (max-width: 860px) { .bento--trap > .tile { grid-column: span 3; margin-top: 0 !important; min-height: 200px !important; } }
@media (max-width: 560px) { .bento--trap > .tile { grid-column: 1 / -1; } }
.bento--groot .tile { grid-column: auto !important; grid-row: auto !important; min-height: 280px; padding: 1.5rem 1.6rem; }
.bento--groot .tile h3 { font-size: var(--s2); }
.bento--groot .tile p { font-size: var(--s0); max-width: 42ch; }
@media (max-width: 760px) { .bento--groot { grid-template-columns: minmax(0,1fr); } .bento--groot .tile { min-height: 200px; } }

/* ---- webshop-uitleg op een rij ---- */
.steprow { display: grid; gap: clamp(.75rem, 1.6vw, 1.25rem); grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: st; }
@media (max-width: 1000px) { .steprow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steprow { grid-template-columns: minmax(0, 1fr); } }
.stepc { position: relative; display: grid; gap: .4rem; align-content: start; padding: 1.25rem 1.3rem; border-radius: var(--r-md); background: var(--paper); color: var(--ink); box-shadow: var(--sh-tag); }
.stepc b { font-size: var(--s1); font-family: var(--font-brand); letter-spacing: -.025em; }
.stepc p { font-size: var(--s-1); color: var(--ink-2); }
.stepc__n { position: relative; width: 46px; height: 46px; border-radius: var(--r-sm); background: var(--b100); color: var(--brand-text); display: grid; place-items: center; margin-bottom: .3rem; }
.stepc__n svg { width: 24px; height: 24px; }
.stepc__n i { position: absolute; right: -7px; top: -7px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--paper); font-style: normal; font-family: var(--font-brand); font-weight: 800; font-size: 11px; display: grid; place-items: center; }

/* ---- rustiger banen ---- */
.skin[data-skin="tint"], .skin[data-skin="soft"], .skin[data-skin="sheet"], .skin[data-skin="brand"], .skin[data-skin="deep"], .skin[data-skin="gold"] { box-shadow: none; }
.skin + .skin[data-skin="paper"] + .skin[data-skin="paper"] { margin-top: 0; }

/* ============================================================
   RONDE 4 — WEBSHOP EN PRODUCTPAGINA
   ============================================================ */

/* ---- zijbalk: iconen en vinkjes terug ---- */
.crow { gap: .55rem; }
.crow input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--action); flex: none; margin: 0; }
.crow--g input[type="checkbox"] { display: none; }
.crow__ico { width: 26px; height: 26px; flex: none; border-radius: var(--r-xs); background: var(--b100); color: var(--brand-text); display: grid; place-items: center; }
.crow__ico svg { width: 15px; height: 15px; }
.crow--kid { padding-left: 1.6rem; }
.crow > span:nth-of-type(2) { flex: 1; }
.side::-webkit-scrollbar { width: 8px; }
.side::-webkit-scrollbar-thumb { background: var(--ground-line); border-radius: 4px; }

/* ---- uitgelicht: zelfde voet als een gewone kaart ---- */
.feat { cursor: pointer; }
.feat .card__foot { border-top: 2px dashed var(--line); margin-top: .8rem; padding-top: .7rem; }
.feat .card__pts { font-size: var(--s2); }
.feat .card__pts small { font-size: 11px; }
.feat[aria-disabled] { cursor: default; }

/* ---- kaart: mandje blijft staan, ook buiten bereik ---- */
.card--off { opacity: 1; }
.card--off .card__media { filter: grayscale(.45); opacity: .82; }
.card--off .card__pts { color: var(--ink-3); }
.card__add[disabled] { opacity: .35; cursor: not-allowed; border-color: var(--line); color: var(--ink-3); }
.card__add[disabled]:hover { background: transparent; color: var(--ink-3); }
.card--off:hover { transform: translateY(-5px) rotate(-.5deg); box-shadow: var(--sh-lift); }

/* ---- productpagina: beeld blijft staan, rechterkolom scrolt ---- */

.pcol-l { display: grid; gap: 0; align-content: start; }
.pcol-l .shots { position: static; max-height: none; overflow: visible; background: transparent; }
.pcol-l .shots::-webkit-scrollbar { width: 8px; }
.pcol-l .shots::-webkit-scrollbar-thumb { background: var(--ground-line); border-radius: 4px; }
.pcol-r { display: grid; gap: 0; align-content: start; }

.revsect .revblock h2 { font-size: var(--s3); }
.pdpbox { padding: clamp(1rem, 2.5vw, 2rem) clamp(1rem, 2.5vw, 2.25rem); }
.pdpbox .crumbs { color: var(--ink-3); margin-bottom: .8rem; }
.pdpbox .crumbs a { color: var(--ink-2); }
.pdpbox .pdp2 { height: calc(100vh - 168px); }
.pdpbox .buy2__note, .pdpbox .buy2__sub, .pdpbox .pcols, .pdpbox .prose, .pdpbox .specrow span { color: var(--ink-2); }
.pdpbox .buy2__brand, .pdpbox .buy2__pts small { color: var(--ink-3); }
.pdpbox .more { border-color: var(--ink); color: var(--ink); }
.pdpbox .more:hover { background: var(--ink); color: var(--paper); }
.pdpbox .shot { box-shadow: none; outline: 1px solid var(--line); }
.revsect .revown { background: var(--b50); box-shadow: none; }
.revgrid { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); align-items: start; }
@media (max-width: 900px) { .revgrid { grid-template-columns: minmax(0, 1fr); } }
.revmain { min-width: 0; }
.revtop { display: flex; gap: clamp(1rem, 4vw, 3rem); flex-wrap: wrap; align-items: start; margin-bottom: 1.25rem; }
.revown { background: var(--paper); color: var(--ink); border-radius: var(--r-md); box-shadow: var(--sh-tag); padding: clamp(1.1rem, 2vw, 1.5rem); display: grid; gap: .5rem; position: sticky; top: 126px; }
.revown > b { font-family: var(--font-brand); font-size: var(--s1); }
.revown > p { font-size: var(--s-1); color: var(--ink-2); }
@media (max-width: 900px) { .revown { position: static; } }
.vsel { max-width: 34ch; margin-top: .2rem; }
.vsel select { min-height: 46px; padding: .55em .75em; border: 2px solid var(--line); border-radius: var(--r-sm); background: #FFFDF9; color: var(--ink); font: inherit; font-size: var(--s-1); width: 100%; }
@media (max-width: 1000px) { .pcol-l .shots { position: static; max-height: none; overflow: visible; } }
.buy2 { position: static; padding-left: clamp(0px, 1.5vw, 1.5rem); }
.buy2__brand { font-family: var(--font-mono); font-size: var(--s-2); letter-spacing: .14em; text-transform: uppercase; color: var(--g-ink-3); margin-bottom: .1rem; }
.buy2 h1 { font-size: var(--s3); line-height: 1.04; }
.pcol-r .pblock { padding-left: clamp(0px, 1.5vw, 1.5rem); }

/* ---- inklappen: vijf regels, dan uitklappen ---- */
.prose { font-size: var(--s-1); color: var(--g-ink-2); }
.prose p, .prose ul { margin: 0 0 .75rem; max-width: 68ch; }
.prose ul { padding-left: 1.15rem; display: grid; gap: .25rem; }
.prose b { color: var(--g-ink); }
.speclist h3 { font-size: var(--s0); margin: .8rem 0 .2rem; }
.speclist h3:first-child { margin-top: 0; }
.clamp { position: relative; overflow: hidden; transition: max-height calc(var(--dur-emph) * var(--motion-scale)) var(--ease-out); }
.clamp[data-open="0"] { max-height: 8.6em; }
.clamp--spec[data-open="0"] { max-height: 11.5em; }
.clamp[data-open="1"] { max-height: 220em; }
.clamp[data-open="0"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(to top, var(--sec-bg, var(--ground)), transparent); pointer-events: none; }
.skin[data-skin="paper"] .clamp[data-open="0"]::after { --sec-bg: var(--ground); }
.more { margin-top: .7rem; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5em 1.05em; border: 2px solid var(--g-ink); border-radius: var(--r-sm); background: transparent; color: var(--g-ink); font-weight: 700; font-size: var(--s-1); cursor: pointer; }
.more:hover { background: var(--g-ink); color: var(--ground); }
.more svg { transition: transform var(--dur-hover) var(--ease-out); }
.more[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ---- beoordelingen onder de foto's ---- */

.pcol-l .pblock h2 { font-size: var(--s1); }