/*
Theme Name:   KRM Prints
Theme URI:    https://krmprints.nl
Description:  Eigen thema van KRM Prints: huisstijl van de album designer (navy en cognac op wit, Cormorant Garamond en Plus Jakarta Sans), kop met productmenu, voet, en opmaak voor WooCommerce. Pagina-inhoud komt uit de plugin KRM Prints – Start.
Author:       KRM Prints
Version:      1.1.14
Requires at least: 6.3
Requires PHP: 7.4
Text Domain:  krmprints
License:      GPL-2.0-or-later
*/

/* ---------- Lettertype Cormorant Garamond (lokaal); Plus Jakarta Sans wordt apart geladen ---------- */
@font-face { font-family: 'Cormorant Garamond'; src: url('assets/fonts/cormorant.woff2') format('woff2'), url('assets/fonts/cormorant.woff') format('woff'); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('assets/fonts/cormorant-italic.woff2') format('woff2'), url('assets/fonts/cormorant-italic.woff') format('woff'); font-weight: 300 700; font-style: italic; font-display: swap; }

/* ==========================================================================
   KRM Prints · website
   Huisstijl uit de album designer: navy & cognac op warm wit,
   Cormorant Garamond voor koppen, Plus Jakarta Sans voor tekst en bediening.
   Layout: een atelierboek. Warm papier als ondergrond, navy banden voor de
   designer en het contact, producten als materiaalstudies op een werktafel,
   en echte maten, codes en levertijden als inhoud.
   ========================================================================== */

:root{
  color-scheme:light; /* altijd licht, ook als het apparaat op donker staat */
  /* merkkleuren (vast) */
  --navy:#1F2A44;
  --navy-ink:#141B2D;
  --cognac:#9A5B2E;
  --cognac-light:#D9A57A;
  --camel:#D6B48C;
  --warm-white:#F7F3EC;

  /* licht thema */
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#FAF8F5;
  --surface-3:#F4F1EB;
  --workspace:#ECE7DF;
  --border:#E8E3DA;
  --border-strong:#D4CCBF;
  --text:#141B2D;
  --text-2:#3D4659;
  --muted:#5F6676;
  --primary:#1F2A44;
  --primary-hover:#2B3A5C;
  --on-primary:#F7F3EC;
  --accent:#9A5B2E;
  --accent-hover:#844B22;
  --accent-soft:#F7EEE5;
  --accent-ink:#7A421B;
  --on-accent:#FFFFFF;
  --success:#2F6B4F;
  --success-soft:#E3EFE8;
  --warning:#8A5A12;
  --warning-soft:#FBEFD9;
  --danger-soft:#FDECEA;
  --danger:#B42318;
  --focus:#9A5B2E;

  /* navy banden */
  --band:#1F2A44;
  --band-2:#243150;
  --band-text:#F7F3EC;
  --band-muted:#B9C0CF;
  --band-line:#3A4A6E;
  --band-accent:#D6B48C;
  --on-band-accent:#141B2D;

  /* woordmerk */
  --brand-ink:#1F2A44;
  --brand-bar:#9A5B2E;
  --brand-prints:#4A5468;

  /* tekeningen: foto's, papier en karton */
  --photo-a:#C9B79F;
  --photo-b:#8E9AB0;
  --photo-c:#D6B48C;
  --photo-d:#5B6880;
  --photo-e:#A27E62;
  --paper:#FCFAF5;
  --paper-edge:#E4DCCE;
  --kraft:#C9A47A;
  --kraft-dark:#B08A5E;
  --metal:#B7BBC2;

  --shadow-sm:0 1px 2px rgba(20,27,45,.06), 0 1px 3px rgba(20,27,45,.06);
  --shadow-md:0 4px 12px rgba(20,27,45,.08), 0 1px 3px rgba(20,27,45,.06);
  --shadow-lg:0 18px 50px rgba(20,27,45,.18), 0 4px 12px rgba(20,27,45,.08);
  --shadow-obj:0 16px 28px rgba(20,27,45,.20), 0 3px 8px rgba(20,27,45,.12);

  /* letters */
  --sans:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --fs-display:clamp(42px, 5.4vw, 68px);
  --fs-h1:clamp(38px, 4.4vw, 56px);
  --fs-h2:clamp(30px, 3.2vw, 42px);
  --fs-h3:24px;
  --fs-lead:clamp(17px, 1.5vw, 19px);
  --fs-body:16px;
  --fs-small:14px;
  --fs-label:12px;

  --r-sm:4px;
  --r:4px;
  --r-lg:6px;
  --header-h:72px;
  --gutter:clamp(20px, 4vw, 40px);
}


/* ---------- basis ---------- */
*,*::before,*::after{ box-sizing:border-box; }
:root{ padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + 16px); }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
/* band boven de vaste kop, op telefoons met een notch */
body::before{
  content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px);
  z-index:40; background:var(--bg);
}
img{ max-width:100%; height:auto; }
[hidden]{ display:none !important; }
a{ color:inherit; }
p{ margin:0; }
h1,h2,h3,h4{
  font-family:var(--serif); font-weight:600; margin:0;
  line-height:1.08; letter-spacing:-.005em; text-wrap:balance; color:var(--text);
}
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); line-height:1.15; }
h4{ font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:0; line-height:1.3; }
em.serif-i{ font-style:italic; font-weight:500; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:4px; }
button,input,select,textarea{ font:inherit; color:inherit; }
.num, .tabular{ font-variant-numeric:lining-nums tabular-nums; }
.sr-only{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.wrap{
  width:100%; max-width:1240px; margin-inline:auto;
  padding-left:max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right:max(var(--gutter), env(safe-area-inset-right, 0px));
}
.wrap-narrow{ max-width:860px; }

.eyebrow{
  display:inline-block;
  font:600 var(--fs-label)/1.3 var(--sans);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent);
}
.lead{ font-size:var(--fs-lead); line-height:1.55; color:var(--text-2); max-width:58ch; }
.muted{ color:var(--muted); }
.small{ font-size:var(--fs-small); }
.prose{ display:grid; gap:14px; max-width:66ch; color:var(--text-2); }
.prose strong{ color:var(--text); font-weight:600; }
.stack{ display:grid; gap:12px; }
.cluster{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

.icon{ width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.icon-sm{ width:16px; height:16px; }

.skip{ position:absolute; left:12px; top:-60px; z-index:60; background:var(--primary); color:var(--on-primary); padding:10px 16px; border-radius:var(--r); text-decoration:none; font-weight:600; }
.skip:focus{ top:calc(12px + env(safe-area-inset-top,0px)); }
.crumb-bar{ padding-top:28px; }
.crumb-bar .crumbs{ margin-bottom:0; }

/* ---------- ingelogd of niet (demo) ---------- */
:root:not([data-auth="in"]) .auth-in{ display:none !important; }
:root[data-auth="in"] .auth-out{ display:none !important; }

/* ---------- topbalk ---------- */
.top-bar{ background:var(--band); color:var(--band-muted); font-size:13.5px; line-height:1.4; }
.top-bar .wrap{ padding-block:9px; }
.top-bar p{ display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; justify-content:center; text-align:center; }
.top-bar b{ color:var(--band-text); font-weight:600; }
.top-bar a{ display:inline-flex; align-items:center; gap:5px; color:var(--band-accent); font-weight:600; text-decoration:none; white-space:nowrap; margin-left:6px; }
.top-bar a:hover{ text-decoration:underline; text-underline-offset:3px; }
.top-bar .icon{ width:14px; height:14px; }
.tb-short{ display:none; }

/* ---------- kop ---------- */
.site-header{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:30;
  background:color-mix(in srgb, var(--bg) 94%, transparent);
  -webkit-backdrop-filter:saturate(1.2) blur(10px); backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--border);
}
.site-header > .wrap{ display:flex; align-items:center; gap:28px; height:var(--header-h); }

.brand{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--brand-ink); line-height:1; flex:none; }
.brand-krm{ font-family:var(--serif); font-weight:600; font-size:28px; letter-spacing:.01em; }
.brand-bar{ width:2px; height:25px; background:var(--brand-bar); display:block; }
.brand-prints{ font-family:var(--sans); font-weight:600; font-size:12.5px; letter-spacing:.17em; color:var(--brand-prints); }

.nav{ display:flex; align-items:center; gap:4px; margin-left:8px; }
.nav-link{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:var(--r); border:0; background:none; cursor:pointer;
  font:500 15px/1 var(--sans); color:var(--text-2); text-decoration:none; white-space:nowrap;
}
.nav-link:hover{ color:var(--text); background:var(--surface-3); }
.nav-link[aria-current="page"], .nav-link.is-active{ color:var(--text); box-shadow:inset 0 -2px 0 var(--accent); border-radius:0; }
.nav-link .icon{ width:15px; height:15px; transition:transform .2s ease; }
.nav-link[aria-expanded="true"] .icon{ transform:rotate(180deg); }
.nav-link[aria-expanded="true"]{ color:var(--text); background:var(--surface-3); }

.hdr-actions{ margin-left:auto; display:flex; align-items:center; gap:6px; }
.hdr-icon{
  position:relative; display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 12px;
  border-radius:var(--r); color:var(--text-2); text-decoration:none; font-size:14.5px; font-weight:500; white-space:nowrap;
}
.hdr-icon:hover{ background:var(--surface-3); color:var(--text); }
.cart-count{
  min-width:19px; height:19px; padding:0 5px; border-radius:999px;
  background:var(--accent); color:var(--on-accent);
  font:700 11px/19px var(--sans); text-align:center; font-variant-numeric:lining-nums tabular-nums;
}
.burger{
  display:none; width:42px; height:42px; border-radius:var(--r); border:1px solid var(--border);
  background:var(--surface); color:var(--text); align-items:center; justify-content:center; cursor:pointer;
}

/* megamenu producten */
.mega{
  position:absolute; left:0; right:0; top:100%;
  background:var(--surface); border-bottom:1px solid var(--border); box-shadow:var(--shadow-lg);
}
.mega .wrap{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)) 1.2fr; gap:28px; padding-block:28px 32px; }
.mega h3{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.mega h3 a{ text-decoration:none; color:inherit; }
.mega h3 a:hover{ color:var(--accent); }
.mega ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.mega li a{ text-decoration:none; color:var(--text); font-size:15px; }
.mega li a:hover{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.mega-feature{
  display:grid; gap:10px; align-content:start; padding:20px; border-radius:var(--r-lg);
  background:var(--band); color:var(--band-text); text-decoration:none;
}
.mega-feature .eyebrow{ color:var(--band-accent); }
.mega-feature strong{ font-family:var(--serif); font-size:24px; font-weight:600; line-height:1.1; }
.mega-feature span.small{ color:var(--band-muted); }
.mega-feature:hover strong{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }

/* mobiel menu */
.mnav{ border-top:1px solid var(--border); background:var(--surface); max-height:calc(100vh - var(--header-h)); overflow-y:auto; }
.mnav .wrap{ display:grid; gap:20px; padding-block:18px 28px; }
.mnav-group h3{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.mnav-group ul{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.mnav-group a{ display:block; padding:9px 0; text-decoration:none; font-size:16px; color:var(--text); border-bottom:1px solid var(--border); }
.mnav-cols{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }

/* ---------- knoppen ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:0 20px; border-radius:var(--r); border:1px solid transparent;
  font:600 15px/1.1 var(--sans); text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn .icon{ width:18px; height:18px; }
.btn-sm{ min-height:38px; padding:0 15px; font-size:14px; }
.btn-accent{ background:var(--accent); color:var(--on-accent); }
.btn-accent:hover{ background:var(--accent-hover); }
.btn-primary{ background:var(--primary); color:var(--on-primary); }
.btn-primary:hover{ background:var(--primary-hover); }
.btn-ghost{ border-color:var(--border-strong); color:var(--text); background:transparent; }
.btn-ghost:hover{ background:var(--surface-3); }
.btn-band{ background:var(--band-accent); color:var(--on-band-accent); }
.btn-band:hover{ filter:brightness(1.06); }
.btn-band-ghost{ border-color:var(--band-line); color:var(--band-text); background:transparent; }
.btn-band-ghost:hover{ background:var(--band-2); }
.btn[disabled], .btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; }
.link-arrow{ display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--accent); text-decoration:none; }
.link-arrow:hover{ text-decoration:underline; text-underline-offset:4px; }
.link-arrow .icon{ width:16px; height:16px; transition:transform .15s ease; }
.link-arrow:hover .icon{ transform:translateX(2px); }

/* ---------- secties ---------- */
.section{ padding-block:88px; }
.section-tight{ padding-block:56px; }
.section + .section.no-gap-top{ padding-top:0; }
.section-alt{ background:var(--surface-2); border-block:1px solid var(--border); }
.section-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:16px 40px; margin-bottom:40px; }
.section-head > div{ display:grid; gap:10px; max-width:64ch; min-width:0; }
.section-head p{ color:var(--text-2); max-width:52ch; }

/* broodkruimel, met de streep uit het logo als scheiding */
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:13.5px; color:var(--muted); margin-bottom:18px; }
.crumbs a{ color:var(--text-2); text-decoration:none; }
.crumbs a:hover{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.crumbs .sep{ width:1.5px; height:13px; background:var(--brand-bar); opacity:.7; display:inline-block; }
.crumbs [aria-current]{ color:var(--text); }

/* ---------- home hero ---------- */
.hero{ padding-block:64px 72px; }
.hero .wrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:56px; align-items:center; }
.hero h1{ font-size:var(--fs-display); line-height:1.02; margin:14px 0 20px; }
.hero h1 em{ font-style:italic; font-weight:500; }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero-visual{ position:relative; }
.hero-visual .tag{
  position:absolute; right:14px; bottom:-14px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:7px 14px; font-size:13px; color:var(--text-2); box-shadow:var(--shadow-md); white-space:nowrap;
}

/* paginakop */
.page-hero{ padding-block:44px 48px; border-bottom:1px solid var(--border); }
.page-hero .wrap{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:48px; align-items:center; }
.page-hero.no-visual .wrap{ grid-template-columns:minmax(0,1fr); }
.page-hero h1{ margin:12px 0 16px; }
.page-hero .facts-inline{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }

/* feitenbalk */
.facts{ border-block:1px solid var(--border); background:var(--surface-2); }
.facts .wrap{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); }
.fact{ padding:22px 22px; border-left:1px solid var(--border); display:grid; gap:2px; align-content:start; }
.fact:first-child{ border-left:0; padding-left:0; }
.fact b{ font:600 26px/1.15 var(--sans); font-variant-numeric:lining-nums tabular-nums; color:var(--text); }
.fact span{ font-size:14px; color:var(--muted); }

/* chips: korte specificaties */
.chip{
  display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-radius:var(--r);
  background:var(--surface); border:1px solid var(--border); color:var(--text-2);
  font-size:13px; font-weight:500; white-space:nowrap; font-variant-numeric:lining-nums tabular-nums;
}
.chip-accent{ background:var(--accent-soft); border-color:transparent; color:var(--accent-ink); font-weight:600; }
.badge{
  display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:var(--r);
  background:var(--accent-soft); color:var(--accent-ink); font-size:12px; font-weight:600; letter-spacing:.02em;
}

/* ---------- productgroepen (tegels) ---------- */
.gtiles{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px 24px; }
.gtile{ display:grid; gap:14px; text-decoration:none; color:inherit; align-content:start; }
.gtile .illo{ transition:transform .25s ease; }
.gtile:hover .illo{ transform:translateY(-3px); }
.gtile-body{ display:grid; gap:6px; }
.gtile-body h3{ font-size:28px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.gtile-body h3 small{ font:500 13px var(--sans); color:var(--muted); letter-spacing:0; }
.gtile-body p{ color:var(--text-2); font-size:15px; }
.gtile:hover h3{ color:var(--accent); }
.gtile-subs{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:14px; color:var(--muted); }

/* ---------- productkaarten ---------- */
.pgrid{ display:grid; grid-template-columns:repeat(var(--cols, 3), minmax(0,1fr)); gap:32px 24px; }
.pcard{ position:relative; display:grid; gap:14px; align-content:start; color:inherit; text-decoration:none; }
.pcard .illo{ transition:transform .25s ease; }
.pcard:hover .illo{ transform:translateY(-3px); }
.pcard-body{ display:grid; gap:8px; min-width:0; }
.pcard h3{ font-size:25px; }
.pcard:hover h3{ color:var(--accent); }
.pcard p{ font-size:15px; color:var(--text-2); }
.pcard .cluster{ gap:6px; }
.pcard .badge{ position:absolute; top:12px; left:12px; z-index:2; }

.subcat{ display:grid; gap:28px; padding-block:56px; border-top:1px solid var(--border); scroll-margin-top:calc(var(--header-h) + 12px); }
.subcat:first-of-type{ border-top:0; padding-top:8px; }
.subcat-head{ display:grid; gap:10px; max-width:72ch; }
.subcat-head p{ color:var(--text-2); max-width:62ch; }
.subcat-head .cluster{ gap:6px; margin-top:4px; }

.callout{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px 32px; align-items:center;
  padding:24px 28px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--border);
}
.callout h3{ font-size:26px; margin-bottom:6px; }
.callout p{ color:var(--text-2); max-width:60ch; }

/* ---------- tekeningen (in plaats van productfoto's) ---------- */
.illo{
  position:relative; max-width:100%; aspect-ratio:4/3; border-radius:var(--r-lg); overflow:hidden;
  display:grid; place-items:center; isolation:isolate; container-type:inline-size;
  background:
    radial-gradient(110% 80% at 50% 0%, color-mix(in srgb, var(--surface) 60%, transparent), transparent 70%),
    var(--ground, var(--surface-3));
}
.illo.tall{ aspect-ratio:1/1; }
.illo.wide{ aspect-ratio:16/10; }
.illo .scene{ position:relative; width:100%; height:100%; display:grid; place-items:center; }
.illo-tag{
  position:absolute; left:12px; bottom:12px; z-index:3;
  font-size:11.5px; font-weight:600; letter-spacing:.04em; color:var(--text-2);
  background:color-mix(in srgb, var(--surface) 88%, transparent); border:1px solid var(--border);
  padding:4px 9px; border-radius:var(--r);
}

/* foto-vlak met licht en heuvels */
.ph{ position:relative; overflow:hidden; background:var(--photo-a); }
.ph.b{ background:var(--photo-b); } .ph.c{ background:var(--photo-c); } .ph.d{ background:var(--photo-d); } .ph.e{ background:var(--photo-e); }
.ph::before{ content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,.30), transparent 60%), linear-gradient(180deg, transparent 55%, rgba(20,27,45,.22)); }
.ph.hills::after{ content:""; position:absolute; left:-12%; right:-12%; bottom:-24%; height:62%; background:var(--photo-d); border-radius:50% 50% 0 0; opacity:.55; }
.ph.sun::after{ content:""; position:absolute; width:22%; aspect-ratio:1; right:16%; top:18%; border-radius:50%; background:rgba(255,255,255,.55); }

/* stoffen */
.tex-linnen{ background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 1px, transparent 1px 3px); }
.tex-natuur{ background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.10) 0 2px, transparent 2px 5px), repeating-linear-gradient(90deg, rgba(0,0,0,.09) 0 2px, transparent 2px 5px); }
.tex-buckram{ background-image:linear-gradient(160deg, rgba(255,255,255,.14), transparent 42%), repeating-linear-gradient(45deg, rgba(0,0,0,.06) 0 1px, transparent 1px 2px); }
.tex-suede{ background-image:radial-gradient(120% 90% at 28% 18%, rgba(255,255,255,.16), transparent 60%), radial-gradient(90% 70% at 75% 85%, rgba(0,0,0,.20), transparent 60%); }
.tex-kraft{ background-image:repeating-linear-gradient(100deg, rgba(0,0,0,.04) 0 2px, transparent 2px 7px); }

/* gesloten album (bovenaanzicht) */
.o-album{
  position:relative; width:var(--w, 42%); max-width:100%; aspect-ratio:var(--ar, 1);
  background-color:var(--mat, #5E4330); border-radius:2px 5px 5px 2px;
  box-shadow:3px 1px 0 -1px var(--paper), 5px 2px 0 -1px var(--paper-edge), 7px 3px 0 -2px var(--paper), var(--shadow-obj);
}
.o-album.soft{ box-shadow:2px 1px 0 -1px var(--paper), 3px 2px 0 -1px var(--paper-edge), var(--shadow-obj); border-radius:2px 3px 3px 2px; }
.o-album::before{ content:""; position:absolute; inset:0 auto 0 0; width:9%; border-radius:2px 0 0 2px; background:linear-gradient(90deg, rgba(0,0,0,.30), rgba(0,0,0,.06) 60%, rgba(255,255,255,.10)); z-index:1; }
.o-album::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(135deg, rgba(255,255,255,.14), transparent 45%, rgba(0,0,0,.12)); z-index:1; pointer-events:none; }
.o-album .cover-photo{ position:absolute; inset:0; border-radius:inherit; }
.o-album .plate{ position:absolute; left:20%; right:11%; top:15%; bottom:15%; border-radius:2px; overflow:hidden; z-index:2; box-shadow:0 2px 6px rgba(0,0,0,.25); }
.o-album .plate.acryl::after{ content:""; position:absolute; inset:0; background:linear-gradient(125deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.08) 34%, transparent 35%, transparent 70%, rgba(255,255,255,.18)); }
.o-album .plate.metal{ padding:5px; background:repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 1px, transparent 1px 3px), linear-gradient(135deg, #D8DBE0, var(--metal) 55%, #7E838C); }
.o-album .plate.metal .ph{ position:absolute; inset:6%; }
.o-album .plate > .ph{ position:absolute; inset:0; }
.o-album .title-line{ position:absolute; left:24%; right:20%; bottom:16%; height:2px; background:rgba(255,255,255,.55); z-index:2; border-radius:2px; }
.o-album .title-line.short{ right:40%; bottom:21%; }

/* open album: een layflat spread */
.o-spread{ position:relative; width:var(--w, 84%); max-width:100%; aspect-ratio:var(--ar, 2/1); }
.o-spread .sheet{
  position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; background:var(--paper);
  border-radius:3px; overflow:hidden; box-shadow:0 0 0 1px rgba(0,0,0,.04), var(--shadow-obj);
}
.o-spread .sheet::after{ content:""; position:absolute; left:50%; top:0; bottom:0; width:12%; transform:translateX(-50%); background:linear-gradient(90deg, transparent, rgba(20,27,45,.10) 46%, rgba(20,27,45,.20) 50%, rgba(20,27,45,.10) 54%, transparent); pointer-events:none; }
.o-spread .pg{ display:grid; gap:4%; padding:5%; min-height:0; }
.o-spread .pg.full{ padding:0; }
.o-spread .pg.three{ grid-template-columns:1.4fr 1fr; grid-template-rows:1fr 1fr; }
.o-spread .pg.three .ph:first-child{ grid-row:1/3; }
.o-spread .pg.two{ grid-template-columns:1fr 1fr; padding:9% 6%; }
.o-spread .pg.one{ padding:12% 14%; }
.o-spread .ph{ border-radius:1px; min-height:0; }
.o-spread.over-fold .sheet{ grid-template-columns:1fr; }
.o-spread.cover-under::before{
  content:""; position:absolute; inset:-3.5% -2.2%; border-radius:5px; background-color:var(--mat, #5E4330); z-index:-1;
  box-shadow:var(--shadow-obj);
}

/* doos (bovenaanzicht van het deksel) */
.o-box{
  position:relative; width:var(--w, 46%); max-width:100%; aspect-ratio:var(--ar, 1.12);
  background-color:var(--mat, #5E4330); border-radius:4px;
  box-shadow:inset 0 0 0 7px rgba(255,255,255,.05), inset 0 0 0 8px rgba(0,0,0,.18), 0 2px 0 rgba(0,0,0,.18), var(--shadow-obj);
}
.o-box::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(135deg, rgba(255,255,255,.12), transparent 50%, rgba(0,0,0,.10)); pointer-events:none; }
.o-box .lid-photo{ position:absolute; inset:14%; border-radius:2px; }
.o-box .glass{ position:absolute; inset:9%; border-radius:2px; background:color-mix(in srgb, var(--paper) 30%, transparent); overflow:hidden; }
.o-box .glass .inner{ position:absolute; inset:10% 12%; border-radius:2px 4px 4px 2px; background-color:var(--mat2, #2B3550); }
.o-box .glass::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,.12) 30%, transparent 31%, transparent 68%, rgba(255,255,255,.25) 69%, transparent 80%); }
.o-box .window{ position:absolute; left:22%; right:22%; top:20%; bottom:20%; border-radius:2px; box-shadow:inset 0 0 0 3px rgba(255,255,255,.55), 0 1px 3px rgba(0,0,0,.3); overflow:hidden; }
.o-box .window .ph{ position:absolute; inset:0; }
.o-box .ribbon{ position:absolute; top:0; bottom:0; left:50%; width:7%; transform:translateX(-50%); background:rgba(255,255,255,.18); }
.o-box .logo-mark{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font:600 clamp(7px, 2.8cqi, 15px)/1 var(--serif); color:rgba(255,255,255,.75); letter-spacing:.14em; white-space:nowrap; }

/* opstelling: doos met album ervoor */
.duo{ position:relative; width:84%; height:78%; }
.duo > .o-box{ position:absolute; left:4%; top:6%; --w:58%; }
.duo > .o-album{ position:absolute; right:4%; bottom:4%; --w:44%; z-index:2; }

/* USB- en fotobox: open bak met inhoud */
.o-tray{
  position:relative; width:var(--w, 46%); aspect-ratio:var(--ar, 1); background-color:var(--mat, #6B4E3D); border-radius:4px;
  box-shadow:0 2px 0 rgba(0,0,0,.18), var(--shadow-obj);
}
.o-tray::before{ content:""; position:absolute; inset:9%; border-radius:2px; background:color-mix(in srgb, var(--mat, #6B4E3D) 80%, black); box-shadow:inset 0 3px 8px rgba(0,0,0,.35); }
.o-tray .stick{ position:absolute; left:50%; top:50%; width:22%; height:48%; transform:translate(-50%,-50%) rotate(-12deg); border-radius:6px 6px 4px 4px; background:linear-gradient(180deg, #2A2F3A, #171A21); z-index:2; box-shadow:0 3px 6px rgba(0,0,0,.35); }
.o-tray .stick::before{ content:""; position:absolute; left:18%; right:18%; top:-26%; height:30%; border-radius:2px 2px 0 0; background:linear-gradient(90deg, #C9CCD2, #EEF0F3 50%, #AEB2B9); }
.o-tray .stick::after{ content:""; position:absolute; left:50%; bottom:14%; width:30%; aspect-ratio:1; transform:translateX(-50%); border-radius:50%; background:var(--band-accent); opacity:.85; }
.o-tray .stack{ position:absolute; inset:16%; z-index:2; }
.o-tray .stack .pr{ position:absolute; inset:0; background:var(--paper); padding:6%; border-radius:1px; box-shadow:0 2px 5px rgba(0,0,0,.25); }
.o-tray .stack .pr:nth-child(1){ transform:rotate(-6deg); }
.o-tray .stack .pr:nth-child(2){ transform:rotate(4deg); }
.o-tray .stack .pr .ph{ width:100%; height:100%; }
.o-lid{
  position:absolute; width:var(--w, 46%); aspect-ratio:var(--ar, 1); background-color:var(--mat, #6B4E3D); border-radius:4px;
  box-shadow:inset 0 0 0 7px rgba(255,255,255,.05), inset 0 0 0 8px rgba(0,0,0,.18), var(--shadow-obj);
}
.o-lid .logo-mark{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font:600 clamp(6px, 2.6cqi, 13px)/1 var(--serif); color:rgba(255,255,255,.72); letter-spacing:.14em; white-space:nowrap; }
.pair{ position:relative; width:86%; height:80%; }
.pair > .o-lid{ left:2%; top:4%; transform:rotate(-7deg); --w:44%; }
.pair > .o-tray{ position:absolute; right:4%; bottom:6%; --w:50%; }

/* prints */
.o-prints{ position:relative; width:var(--w, 60%); aspect-ratio:1.5; }
.o-prints .pr{ position:absolute; width:52%; aspect-ratio:3/2; background:var(--paper); padding:3.5%; box-shadow:0 8px 16px rgba(20,27,45,.18), 0 1px 3px rgba(20,27,45,.12); border-radius:1px; }
.o-prints .pr .ph{ width:100%; height:100%; }
.o-prints .pr:nth-child(1){ left:4%; top:22%; transform:rotate(-9deg); }
.o-prints .pr:nth-child(2){ left:24%; top:10%; transform:rotate(2deg); z-index:2; }
.o-prints .pr:nth-child(3){ left:44%; top:26%; transform:rotate(10deg); z-index:3; aspect-ratio:2/3; width:34%; }

.o-poster{ position:relative; width:var(--w, 34%); aspect-ratio:2/3; background:var(--paper); padding:6%; box-shadow:var(--shadow-obj); border-radius:1px; }
.o-poster .ph{ width:100%; height:100%; }
.o-poster.small{ position:absolute; --w:22%; right:12%; bottom:14%; }

/* harmonicaboekje */
.o-harmonica{ position:relative; width:var(--w, 76%); display:flex; align-items:center; filter:drop-shadow(0 14px 18px rgba(20,27,45,.20)); }
.o-harmonica .pn{ position:relative; flex:1; aspect-ratio:2/3; background:var(--paper); padding:4%; }
.o-harmonica .pn .ph{ width:100%; height:100%; }
.o-harmonica .pn:nth-child(odd){ transform:skewY(-5deg); }
.o-harmonica .pn:nth-child(even){ transform:skewY(5deg); filter:brightness(.9); }
.o-harmonica .pn.cover{ background-color:var(--mat, #5E4330); padding:0; }
.o-harmonica .pn.cover::after{ content:""; position:absolute; left:20%; right:20%; bottom:16%; height:2px; background:rgba(255,255,255,.55); }

/* accessoires */
.o-kraft{ position:relative; width:var(--w, 56%); aspect-ratio:var(--ar, 1.3); background-color:var(--kraft); border-radius:3px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.10), var(--shadow-obj); }
.o-kraft .tape{ position:absolute; left:0; right:0; top:44%; height:12%; background:var(--kraft-dark); opacity:.55; }
.o-kraft .flap{ position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(0,0,0,.22); }
.o-label{ position:absolute; left:50%; top:50%; width:var(--lw, 36%); aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:var(--paper); box-shadow:0 2px 6px rgba(0,0,0,.18); display:grid; place-items:center; text-align:center; }
.o-label > div{ display:grid; justify-items:center; gap:3px; padding:0 8%; }
.o-label .ln1{ font:600 clamp(6px, 3.1cqi, 17px)/1 var(--serif); color:var(--navy); letter-spacing:.08em; white-space:nowrap; }
.o-label .ln2{ display:block; font:500 clamp(4px, 1.25cqi, 8px)/1.2 var(--sans); color:#5F6676; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
.o-label.rect{ border-radius:3px; aspect-ratio:1.6; --lw:34%; left:70%; top:30%; }

.o-drive{ position:relative; width:var(--w, 30%); aspect-ratio:.68; border-radius:10px; background:linear-gradient(160deg, #3A4152, #1E222C); box-shadow:var(--shadow-obj); }
.o-drive::after{ content:""; position:absolute; left:50%; bottom:9%; width:7%; aspect-ratio:1; border-radius:50%; transform:translateX(-50%); background:var(--band-accent); }
.o-stick{ position:relative; width:var(--w, 12%); aspect-ratio:.42; border-radius:7px 7px 5px 5px; background:linear-gradient(180deg, #8B6B55, #6B4E3D); box-shadow:var(--shadow-obj); transform:rotate(14deg); }
.o-stick::before{ content:""; position:absolute; left:20%; right:20%; top:-20%; height:22%; border-radius:2px 2px 0 0; background:linear-gradient(90deg, #C9CCD2, #EEF0F3 50%, #AEB2B9); }
.row-objs{ display:flex; align-items:center; justify-content:center; gap:9%; width:100%; }

/* combipakket */
.combo{ position:relative; width:86%; height:80%; }
.combo > .o-box{ position:absolute; left:2%; top:4%; --w:50%; }
.combo > .o-album{ position:absolute; left:34%; top:22%; --w:38%; z-index:2; }
.combo > .o-album.mini{ left:auto; right:3%; top:auto; bottom:6%; --w:20%; z-index:3; }
.combo > .o-album.mini.two{ right:15%; bottom:12%; z-index:2; }

.lid-photo{ position:absolute; inset:14%; border-radius:2px; }
.o-album.alt .cover-photo{ background:var(--photo-b); }

/* stapel postdozen */
.boxstack{ position:relative; width:70%; height:78%; }
.boxstack .o-kraft{ position:absolute; --w:62%; --ar:1.5; }
.boxstack .o-kraft:nth-child(1){ left:6%; top:4%; transform:rotate(-4deg); }
.boxstack .o-kraft:nth-child(2){ left:30%; top:18%; transform:rotate(3deg); }
.boxstack .o-kraft:nth-child(3){ left:16%; top:40%; z-index:2; }
.boxstack .o-label{ --lw:30%; }

/* drie stalen in een waaier */
.fan3{ position:relative; width:76%; height:70%; }
.fan3 .o-swatch{ position:absolute; --w:52%; top:16%; }
.fan3 .o-swatch:nth-child(1){ left:0; transform:rotate(-8deg); }
.fan3 .o-swatch:nth-child(2){ left:24%; top:8%; transform:rotate(1deg); z-index:2; }
.fan3 .o-swatch:nth-child(3){ left:48%; top:20%; transform:rotate(9deg); z-index:3; }

/* gerelateerde producten */
.rel-list{ display:grid; gap:0; border-top:1px solid var(--border); }
.rel{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:16px; align-items:center; padding:12px 0; border-bottom:1px solid var(--border); text-decoration:none; color:inherit; }
.rel .illo{ aspect-ratio:1; border-radius:var(--r); }
.rel b{ display:block; font-family:var(--serif); font-size:21px; font-weight:600; line-height:1.15; }
.rel span span{ display:block; font-size:14px; color:var(--text-2); margin-top:2px; }
.rel:hover b{ color:var(--accent); }

/* detail: stuk stof met naad */
.o-swatch{ position:relative; width:var(--w, 64%); aspect-ratio:1.3; background-color:var(--mat, #5E4330); border-radius:3px; box-shadow:var(--shadow-obj); }
.o-swatch::after{ content:""; position:absolute; inset:9%; border:1.5px dashed rgba(255,255,255,.35); border-radius:2px; }
.o-swatch .code{ position:absolute; right:10px; bottom:9px; font:600 12px/1 var(--sans); letter-spacing:.06em; color:rgba(255,255,255,.85); text-shadow:0 1px 2px rgba(0,0,0,.35); }

/* ---------- navy band: album designer ---------- */
.band{ background:var(--band); color:var(--band-text); }
.band .wrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:56px; align-items:center; padding-block:88px; }
.band h2{ color:var(--band-text); margin:12px 0 16px; }
.band .eyebrow{ color:var(--band-accent); }
.band p{ color:var(--band-muted); max-width:50ch; }
.band ul.ticks{ margin:22px 0 30px; }
.band ul.ticks li{ color:var(--band-text); }
.band ul.ticks li::before{ background:var(--band-accent); }
.band .cta-row{ margin-top:0; }

ul.ticks{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
ul.ticks li{ display:flex; gap:12px; align-items:baseline; color:var(--text-2); }
ul.ticks li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; transform:translateY(-2px); }

/* mini album designer (tekening) */
.app{ background:var(--surface); color:var(--text); border-radius:var(--r-lg); overflow:hidden; box-shadow:0 30px 60px rgba(0,0,0,.35); border:1px solid var(--border); }
.app-top{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--border); font-size:12px; color:var(--muted); }
.app-top .mini-brand{ display:inline-flex; align-items:center; gap:6px; color:var(--brand-ink); }
.app-top .mini-brand b{ font:600 16px/1 var(--serif); }
.app-top .mini-brand i{ width:1.5px; height:13px; background:var(--brand-bar); display:block; }
.app-top .mini-brand span{ font:600 8.5px/1 var(--sans); letter-spacing:.16em; color:var(--brand-prints); }
.app-top .pill{ margin-left:auto; background:var(--accent); color:var(--on-accent); border-radius:var(--r); padding:4px 10px; font-weight:600; white-space:nowrap; }
.app-body{ display:grid; grid-template-columns:92px minmax(0,1fr); min-height:260px; }
.app-side{ border-right:1px solid var(--border); background:var(--surface-2); padding:8px; display:grid; grid-template-columns:1fr 1fr; gap:5px; align-content:start; }
.app-side i{ aspect-ratio:1; border-radius:3px; background:var(--photo-a); display:block; }
.app-side i:nth-child(3n){ background:var(--photo-b); } .app-side i:nth-child(4n){ background:var(--photo-c); } .app-side i:nth-child(5n){ background:var(--photo-e); }
.app-main{ background:var(--workspace); padding:14px; display:grid; gap:12px; align-content:start; }
.app-layouts{ display:flex; gap:6px; }
.app-layouts i{ flex:1; height:26px; border-radius:4px; background:var(--surface); border:1px solid var(--border); display:grid; grid-template-columns:1fr 1fr; gap:2px; padding:3px; }
.app-layouts i::before, .app-layouts i::after{ content:""; background:var(--border-strong); border-radius:1px; }
.app-layouts i.on{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.app-bar{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); padding:6px 10px; font-size:11px; color:var(--muted); display:flex; flex-wrap:wrap; gap:4px 12px; }
.app-bar b{ color:var(--text); font-weight:600; }
.app .o-spread{ --w:100%; }

/* ---------- drie manieren ---------- */
.ways{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
.way{ display:grid; gap:12px; align-content:start; padding:26px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--border); scroll-margin-top:calc(var(--header-h) + 16px); }
.way .way-icon{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-ink); }
.way .way-icon .icon{ width:22px; height:22px; }
.way h3{ font-size:27px; }
.way p{ color:var(--text-2); font-size:15px; }
.way .meta{ font-size:13.5px; color:var(--muted); border-top:1px solid var(--border); padding-top:12px; margin-top:4px; }
.way .link-arrow{ margin-top:2px; }

/* genummerde stappen: alleen waar de volgorde echt telt */
.steps{ display:grid; grid-template-columns:repeat(var(--cols, 4), minmax(0,1fr)); gap:20px; counter-reset:step; list-style:none; margin:0; padding:0; }
.steps li{ display:grid; gap:10px; align-content:start; padding-top:18px; border-top:2px solid var(--border-strong); }
.steps li::before{ counter-increment:step; content:counter(step); font:600 13px/1 var(--sans); width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--primary); color:var(--on-primary); }
.steps h3{ font-size:24px; }
.steps p{ color:var(--text-2); font-size:15px; }

/* ---------- stalen ---------- */
.swatch-strip{ display:grid; grid-template-columns:repeat(11, minmax(0,1fr)); gap:8px; }
.swatch-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:16px 14px; }
.swatch{ display:grid; gap:7px; align-content:start; }
.swatch i{ display:block; aspect-ratio:1.25; border-radius:var(--r-sm); background-color:var(--c); box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), var(--shadow-sm); }
.swatch b{ font:600 12px/1.2 var(--sans); letter-spacing:.06em; color:var(--muted); font-variant-numeric:lining-nums tabular-nums; }
.swatch span{ font-size:14px; color:var(--text); line-height:1.25; }
.swatch-strip .swatch i{ aspect-ratio:.8; }
.mat-block{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,2fr); gap:24px 48px; padding-block:40px; border-top:1px solid var(--border); scroll-margin-top:calc(var(--header-h) + 12px); }
.mat-block:first-of-type{ border-top:0; padding-top:0; }
.mat-block > div:first-child{ display:grid; gap:10px; align-content:start; }
.mat-block h3{ font-size:30px; }
.mat-block p{ color:var(--text-2); }

.options{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; }
.option{ display:grid; gap:10px; align-content:start; }
.option i{ display:block; aspect-ratio:4/3; border-radius:var(--r); border:1px solid var(--border); background-color:var(--c, var(--surface-3)); }
.option h3{ font-size:23px; }
.option p{ font-size:14.5px; color:var(--text-2); }
.sw-suede{ background-image:radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 55%); }
.sw-buckram{ background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 2px, transparent 2px 4px); }

/* ---------- formaten op schaal ---------- */
.fmts{ --u:3.4px; display:flex; flex-wrap:wrap; align-items:flex-end; gap:22px 18px; }
.fmt{ display:grid; justify-items:center; gap:8px; }
.fmt i{ display:block; width:calc(var(--b) * var(--u)); height:calc(var(--h) * var(--u)); max-width:100%; border:1.5px solid var(--border-strong); background:var(--surface); border-radius:2px; box-shadow:inset -3px 0 0 var(--surface-3); }
.fmt span{ font-size:12.5px; color:var(--text-2); font-variant-numeric:lining-nums tabular-nums; white-space:nowrap; }
.fmt.on i{ border-color:var(--accent); background:var(--accent-soft); box-shadow:inset -3px 0 0 color-mix(in srgb, var(--accent) 25%, transparent); }
.fmt.on span{ color:var(--text); font-weight:600; }
.fmt-groups{ display:grid; gap:28px; }
.fmt-group{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:16px 28px; align-items:end; padding-bottom:24px; border-bottom:1px solid var(--border); }
.fmt-group:last-child{ border-bottom:0; padding-bottom:0; }
.fmt-group h3{ font-size:22px; }
.fmt-group p{ font-size:13.5px; color:var(--muted); margin-top:4px; }

/* ---------- tabellen ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); }
table.data{ width:100%; border-collapse:collapse; font-size:15px; font-variant-numeric:lining-nums tabular-nums; }
table.data th, table.data td{ text-align:left; padding:12px 16px; border-bottom:1px solid var(--border); vertical-align:top; }
table.data thead th{ font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); background:var(--surface-2); white-space:nowrap; }
table.data tbody tr:last-child td{ border-bottom:0; }
table.data td.r, table.data th.r{ text-align:right; }
table.data code{ font-size:13px; background:var(--surface-3); padding:2px 6px; border-radius:6px; word-break:break-all; }

dl.specs{ margin:0; display:grid; grid-template-columns:minmax(120px, .7fr) minmax(0,1.3fr); border-top:1px solid var(--border); }
dl.specs dt, dl.specs dd{ margin:0; padding:12px 0; border-bottom:1px solid var(--border); font-size:15px; }
dl.specs dt{ color:var(--muted); padding-right:16px; }
dl.specs dd{ color:var(--text); font-variant-numeric:lining-nums tabular-nums; min-width:0; }

/* ---------- productpagina ---------- */
.product{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:48px; align-items:start; padding-block:40px 72px; }
.gallery{ display:grid; gap:12px; position:sticky; top:calc(var(--header-h) + 20px + env(safe-area-inset-top,0px)); }
.gallery .illo{ aspect-ratio:5/4; }
.thumbs{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.thumb{ padding:0; border:2px solid transparent; border-radius:calc(var(--r-lg) + 2px); background:none; cursor:pointer; }
.thumb .illo{ aspect-ratio:4/3; pointer-events:none; }
.thumb[aria-pressed="true"]{ border-color:var(--accent); }
.thumb span.sr-only{ position:absolute; }
.pinfo{ display:grid; gap:22px; min-width:0; }
.pinfo h1{ margin:6px 0 0; }
.pinfo .lead{ max-width:none; }
.buybox{ display:grid; gap:16px; padding:22px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--border); }
.buybox .price{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 16px; padding-bottom:16px; border-bottom:1px solid var(--border); }
.buybox .price p{ font-size:15px; color:var(--text-2); }
.buybox .price strong{ display:block; font-family:var(--serif); font-size:24px; font-weight:600; color:var(--text); line-height:1.1; margin-bottom:2px; }
.buybox .cta-stack{ display:grid; gap:10px; }
.buybox .cta-stack .btn{ width:100%; }
.buybox .alt{ display:flex; flex-wrap:wrap; gap:6px 18px; font-size:14px; }
.buybox .alt a{ color:var(--text-2); text-underline-offset:3px; }
.buybox .alt a:hover{ color:var(--accent); }
.pdetails{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px 56px; padding-block:56px; border-top:1px solid var(--border); }
.pdetails > section{ display:grid; gap:18px; align-content:start; min-width:0; }
.pdetails h2{ font-size:32px; }
.ship-list{ display:grid; gap:10px; }
.ship-list div{ display:flex; justify-content:space-between; gap:16px; font-size:15px; padding-bottom:10px; border-bottom:1px solid var(--border); }
.ship-list div span:last-child{ color:var(--text-2); text-align:right; font-variant-numeric:lining-nums tabular-nums; }

/* ---------- vragen ---------- */
.faq{ display:grid; gap:0; border-top:1px solid var(--border); }
.faq details{ border-bottom:1px solid var(--border); }
.faq summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:20px 2px; font:600 17px/1.35 var(--sans); color:var(--text);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; width:10px; height:10px; flex:none; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg) translate(-3px,-3px); transition:transform .2s ease; }
.faq details[open] summary::after{ transform:rotate(225deg) translate(-3px,-3px); }
.faq .answer{ padding:0 2px 22px; color:var(--text-2); max-width:70ch; display:grid; gap:10px; }

/* ---------- formulieren ---------- */
.panel{ padding:28px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--border); display:grid; gap:20px; align-content:start; }
.panel h2{ font-size:32px; }
.form{ display:grid; gap:16px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:grid; gap:6px; min-width:0; }
.field label{ font-size:14px; font-weight:600; color:var(--text); }
.field .hint{ font-size:13px; color:var(--muted); }
.field input, .field select, .field textarea{
  width:100%; min-height:46px; padding:10px 14px; border-radius:var(--r); border:1px solid var(--border-strong);
  background:var(--surface-2); color:var(--text); font-size:16px;
}
.field textarea{ min-height:120px; resize:vertical; line-height:1.5; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--focus); outline-offset:1px; border-color:transparent; }
.check{ display:flex; gap:10px; align-items:flex-start; font-size:15px; color:var(--text-2); }
.check input{ width:18px; height:18px; margin-top:3px; accent-color:var(--accent); flex:none; }
.form-status{ padding:12px 16px; border-radius:var(--r); background:var(--success-soft); color:var(--text); font-size:15px; }
.form-note{ font-size:13.5px; color:var(--muted); }

/* contactgegevens met kopieerknop */
.contact-list{ display:grid; gap:0; border-top:1px solid var(--border); }
.contact-row{ display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:4px 14px; align-items:center; padding:14px 0; border-bottom:1px solid var(--border); }
.contact-row .icon{ color:var(--accent); }
.contact-row .lbl{ font-size:13px; color:var(--muted); display:block; }
.contact-row .val{ font-size:17px; font-weight:500; color:var(--text); user-select:all; font-variant-numeric:lining-nums tabular-nums; overflow-wrap:anywhere; }
.contact-row .acts{ display:flex; gap:6px; }
.copy-btn{ display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 12px; border-radius:var(--r); border:1px solid var(--border-strong); background:transparent; color:var(--text-2); font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; text-decoration:none; }
.copy-btn:hover{ background:var(--surface-3); color:var(--text); }
.copy-btn .icon{ width:15px; height:15px; }

.map-card{
  position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:16/10; border:1px solid var(--border);
  background:
    linear-gradient(90deg, transparent 47%, var(--surface) 47% 49%, transparent 49%),
    linear-gradient(10deg, transparent 58%, var(--surface) 58% 60.5%, transparent 60.5%),
    linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--surface) 70%, transparent) 30% 31.5%, transparent 31.5%),
    linear-gradient(0deg, color-mix(in srgb, var(--photo-b) 35%, transparent) 0 18%, transparent 18%),
    var(--surface-3);
}
.map-card .pin{ position:absolute; left:48%; top:56%; width:34px; height:34px; transform:translate(-50%,-100%) rotate(-45deg); border-radius:50% 50% 50% 0; background:var(--accent); box-shadow:var(--shadow-md); }
.map-card .pin::after{ content:""; position:absolute; inset:10px; border-radius:50%; background:var(--on-accent); }
.map-card .addr{ position:absolute; left:14px; bottom:14px; right:14px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:12px 14px; box-shadow:var(--shadow-md); }
.map-card .addr strong{ font-size:15px; }
.map-card .addr span{ font-size:13.5px; color:var(--muted); display:block; }

/* ---------- winkelwagen ---------- */
.cart{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:32px; align-items:start; padding-block:32px 80px; }
.cart-items{ display:grid; gap:0; border-top:1px solid var(--border); }
.cart-item{ display:grid; grid-template-columns:150px minmax(0,1fr) auto; gap:20px; padding:20px 0; border-bottom:1px solid var(--border); align-items:start; }
.cart-item .illo{ aspect-ratio:4/3; }
.cart-item h3{ font-size:24px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.cart-item dl{ margin:8px 0 0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 14px; font-size:14.5px; }
.cart-item dt{ color:var(--muted); }
.cart-item dd{ margin:0; color:var(--text); font-variant-numeric:lining-nums tabular-nums; }
.cart-item .remove{ border:0; background:none; color:var(--muted); font-size:14px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:4px; }
.cart-item .remove:hover{ color:var(--danger); }
.notice{ display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:var(--r); background:var(--success-soft); color:var(--text); font-size:15px; margin-bottom:20px; }
.notice .icon{ color:var(--success); margin-top:2px; }
.notice.warn{ background:var(--accent-soft); }
.notice.warn .icon{ color:var(--accent-ink); }
.summary{ position:sticky; top:calc(var(--header-h) + 20px + env(safe-area-inset-top,0px)); }
.radio-card{ display:grid; grid-template-columns:20px minmax(0,1fr) auto; gap:4px 12px; align-items:start; padding:12px 14px; border:1px solid var(--border); border-radius:var(--r); cursor:pointer; background:var(--surface-2); }
.radio-card input{ margin-top:3px; accent-color:var(--accent); width:17px; height:17px; }
.radio-card b{ font-size:15px; font-weight:600; display:block; }
.radio-card small{ font-size:13px; color:var(--muted); display:block; }
.radio-card .amount{ font-size:15px; font-weight:600; font-variant-numeric:lining-nums tabular-nums; white-space:nowrap; }
.radio-card:has(input:checked){ border-color:var(--accent); background:var(--surface); box-shadow:0 0 0 1px var(--accent); }
.totals{ display:grid; gap:8px; border-top:1px solid var(--border); padding-top:16px; font-size:15px; }
.totals div{ display:flex; justify-content:space-between; gap:12px; }
.totals div span:last-child{ font-variant-numeric:lining-nums tabular-nums; text-align:right; }
.totals .grand{ font-weight:700; font-size:17px; padding-top:8px; border-top:1px solid var(--border); }

/* ---------- prijzen (alleen ingelogd) ---------- */
.pcard-price{ font-size:14.5px; font-weight:600; color:var(--text); font-variant-numeric:lining-nums tabular-nums; }
.price-label{ display:block; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }

/* ---------- inloggen en registreren ---------- */
.demo-panel{ border-style:dashed; border-color:var(--border-strong); background:var(--surface-2); }
.demo-creds{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 16px; margin:0; font-size:15px; }
.demo-creds dt{ color:var(--muted); }
.demo-creds dd{ margin:0; font-weight:600; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:14px; }
.demo-panel .btn{ justify-self:start; }
.reg{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:32px; align-items:start; }
.reg-info{ gap:20px; position:sticky; top:calc(var(--header-h) + 20px + env(safe-area-inset-top,0px)); }
.reg-info .invite h3{ color:var(--band-text); font-size:24px; }
.fieldset{ border:0; padding:0; margin:0; display:grid; gap:14px; min-width:0; }
.fieldset legend{ font:600 12px/1.3 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:0; margin-bottom:10px; }
.req{ color:var(--accent); margin-left:2px; }
.gate{ max-width:640px; }

/* ---------- account ---------- */
.acct{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:44px; align-items:start; padding-block:24px 88px; }
:root:not([data-auth="in"]) .acct{ grid-template-columns:minmax(0,1fr); }
.acct-nav{ display:grid; gap:2px; position:sticky; top:calc(var(--header-h) + 20px + env(safe-area-inset-top,0px)); }
.acct-nav a, .acct-nav button{ display:flex; align-items:center; min-height:42px; padding:0 12px; border-radius:var(--r); border:0; background:none; color:var(--text-2); text-decoration:none; font-size:15px; font-weight:500; cursor:pointer; text-align:left; }
.acct-nav a:hover, .acct-nav button:hover{ background:var(--surface-3); color:var(--text); }
.acct-nav [aria-current]{ background:var(--surface-3); color:var(--text); font-weight:600; box-shadow:inset 2px 0 0 var(--accent); }
.acct-nav button{ color:var(--muted); margin-top:8px; border-top:1px solid var(--border); border-radius:0; }
.acct-main{ display:grid; gap:44px; min-width:0; align-content:start; }
.acct-head{ display:grid; gap:10px; }
.acct-head h1{ margin:0; }
.acct-head .lead{ max-width:62ch; }
.acct-sec{ display:grid; gap:18px; scroll-margin-top:calc(var(--header-h) + 16px); }
.acct-sec h2{ font-size:32px; }
.sec-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }

.stat-cards{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.stat{ display:grid; gap:4px; align-content:start; padding:20px 22px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); color:inherit; text-decoration:none; }
a.stat:hover{ border-color:var(--border-strong); box-shadow:var(--shadow-sm); }
.stat .lbl{ font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.stat b{ font:600 32px/1.15 var(--sans); color:var(--text); font-variant-numeric:lining-nums tabular-nums; }
.stat p{ font-size:14px; color:var(--text-2); }

.invite{ display:grid; gap:14px; padding:26px; border-radius:var(--r-lg); background:var(--band); color:var(--band-text); }
.invite .eyebrow{ color:var(--band-accent); }
.invite h2{ color:var(--band-text); font-size:clamp(28px, 3vw, 36px); }
.invite p{ color:var(--band-muted); font-size:15px; max-width:62ch; }
.invite p b{ color:var(--band-text); letter-spacing:.04em; margin-right:6px; }
.invite-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.invite-link{ flex:1 1 260px; min-width:0; display:flex; align-items:center; min-height:46px; padding:8px 14px; border-radius:var(--r); background:var(--band-2); border:1px solid var(--band-line); color:var(--band-text); font-size:16px; overflow-wrap:anywhere; user-select:all; }
.invite .copy-btn{ border-color:var(--band-line); color:var(--band-text); }
.invite .copy-btn:hover{ background:var(--band-2); color:var(--band-text); }
.invite-row .copy-btn{ height:46px; padding:0 16px; }
.invite-row .btn{ min-height:46px; }

.progress{ height:8px; border-radius:var(--r-sm); background:var(--surface-3); overflow:hidden; box-shadow:inset 0 0 0 1px var(--border); }
.progress i{ display:block; height:100%; background:var(--accent); border-radius:inherit; }
.progress.done i{ background:var(--success); }

.ref-list{ list-style:none; margin:0; padding:0; display:grid; border-top:1px solid var(--border); }
.ref{ display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:8px 16px; align-items:center; padding:20px 0; border-bottom:1px solid var(--border); }
.ref .avatar{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-ink); font:600 14px/1 var(--sans); letter-spacing:.04em; }
.ref .who{ min-width:0; }
.ref .who b{ display:block; font-size:16.5px; font-weight:600; }
.ref .who span{ display:block; font-size:13.5px; color:var(--muted); }
.ref .track{ grid-column:2 / -1; display:grid; gap:10px; }
.stepper{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; }
.stepper li{ position:relative; padding-top:12px; font-size:12.5px; color:var(--muted); line-height:1.3; }
.stepper li::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; border-radius:2px; background:var(--surface-3); box-shadow:inset 0 0 0 1px var(--border); }
.stepper li.done{ color:var(--text); font-weight:500; }
.stepper li.done::before{ background:var(--success); box-shadow:none; }
.stepper li.now{ color:var(--accent-ink); font-weight:600; }
.stepper li.now::before{ background:var(--accent); box-shadow:none; }
.spend{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; font-size:13.5px; color:var(--text-2); }
.spend span:last-child{ color:var(--text); font-weight:600; }
.tag-neutral{ background:var(--surface-3); color:var(--text-2); }

.welcome-card{ display:grid; gap:12px; align-content:start; padding:22px; border-radius:var(--r-lg); border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow-sm); }
.welcome-card strong{ font:600 26px/1.15 var(--sans); color:var(--text); font-variant-numeric:lining-nums tabular-nums; }
.welcome-card p{ font-size:14.5px; color:var(--text-2); }

.voucher{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:6px 22px; align-items:center; padding:18px 22px; border:1.5px dashed var(--border-strong); border-radius:var(--r-lg); background:var(--surface); }
.voucher .v-amount{ font:600 32px/1 var(--sans); color:var(--accent); font-variant-numeric:lining-nums tabular-nums; padding-right:22px; border-right:1.5px dashed var(--border-strong); }
.voucher code{ font:600 15px/1.3 var(--sans); letter-spacing:.08em; color:var(--text); }
.voucher p{ font-size:13.5px; color:var(--muted); }
.voucher-check b{ letter-spacing:.04em; }
.cart-tile{ display:grid; place-items:center; aspect-ratio:4/3; border-radius:var(--r-lg); background:var(--surface-3); }
.cart-tile span{ width:44%; aspect-ratio:1; border-radius:3px; box-shadow:var(--shadow-obj); }

/* ---------- notities (prototype) ---------- */
.tag-check{ display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:var(--r); font-size:11.5px; font-weight:600; background:var(--accent-soft); color:var(--accent-ink); white-space:nowrap; }
.tag-ok{ background:var(--success-soft); color:var(--success); }
.note-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; }
.issue-list{ list-style:none; margin:0; padding:0; display:grid; gap:0; border-top:1px solid var(--border); }
.issue-list li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 20px; padding:14px 0; border-bottom:1px solid var(--border); }
.issue-list li p{ color:var(--text-2); font-size:15px; }
.issue-list li strong{ display:block; color:var(--text); font-size:15.5px; margin-bottom:2px; }

/* ---------- voet ---------- */
.site-footer{ background:var(--surface-2); border-top:1px solid var(--border); padding-block:64px 28px; margin-top:0; }
.foot-grid{ display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3, minmax(0,1fr)); gap:40px; }
.foot-grid h4{ font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.foot-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:15px; }
.foot-grid ul a{ color:var(--text-2); text-decoration:none; }
.foot-grid ul a:hover{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.foot-about{ display:grid; gap:16px; align-content:start; }
.foot-about p{ color:var(--text-2); font-size:15px; max-width:36ch; }
.foot-contact{ display:grid; gap:4px; font-size:15px; color:var(--text-2); font-variant-numeric:lining-nums tabular-nums; }
.foot-contact span{ user-select:all; }
.foot-legal{ display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin-top:48px; padding-top:22px; border-top:1px solid var(--border); font-size:13.5px; color:var(--muted); }
.foot-legal a{ color:var(--muted); text-underline-offset:3px; }
.foot-legal a:hover{ color:var(--accent); }
.foot-legal .sep{ width:1.5px; height:12px; background:var(--brand-bar); opacity:.6; }

/* ---------- accountoproep ---------- */
.cta-band{ border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--border); padding:36px 40px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px 40px; align-items:center; }
.cta-band h2{ font-size:clamp(28px, 3vw, 38px); margin-bottom:8px; }
.cta-band p{ color:var(--text-2); max-width:58ch; }

.usp{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:32px; }
.usp div{ display:grid; gap:8px; align-content:start; padding-top:18px; border-top:1px solid var(--border-strong); }
.usp h3{ font-size:24px; }
.usp p{ color:var(--text-2); font-size:15px; }

.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center; }
.split.top{ align-items:start; }

/* ---------- beweging ---------- */
@media (prefers-reduced-motion:no-preference){
  .hero-visual .o-spread{ animation:openSpread .9s cubic-bezier(.2,.7,.2,1) both .1s; }
  @keyframes openSpread{ from{ transform:translateY(10px) scale(.97); opacity:.0; } to{ transform:none; opacity:1; } }
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

/* ---------- breakpoints ---------- */
@media (max-width:1120px){
  .nav-link{ padding:8px 9px; font-size:14.5px; }
  .hdr-icon .lbl{ display:none; }
  .mega .wrap{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .mega-feature{ grid-column:span 3; }
}
@media (max-width:980px){
  :root{ --header-h:62px; }
  .nav, .hdr-cta{ display:none; }
  .burger{ display:inline-flex; }
  .brand-krm{ font-size:24px; }
  .brand-bar{ height:21px; }
  .brand-prints{ font-size:11px; }
  .hero .wrap, .page-hero .wrap, .band .wrap, .split{ grid-template-columns:minmax(0,1fr); gap:40px; }
  .hero{ padding-block:36px 56px; }
  .product{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .gallery{ position:static; }
  .pdetails{ grid-template-columns:minmax(0,1fr); }
  .cart{ grid-template-columns:minmax(0,1fr); }
  .summary{ position:static; }
  .gtiles{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .ways{ grid-template-columns:minmax(0,1fr); }
  .usp{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .foot-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .foot-about{ grid-column:1/-1; }
  .mat-block{ grid-template-columns:minmax(0,1fr); }
  .options{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .note-grid{ grid-template-columns:minmax(0,1fr); }
  .steps{ --cols:2 !important; }
  .pgrid[data-n="4"], .pgrid[data-n="5"], .pgrid[data-n="6"]{ --cols:3; }
  .acct{ grid-template-columns:minmax(0,1fr); gap:20px; }
  .acct-nav{ position:static; display:flex; flex-wrap:wrap; gap:6px; }
  .acct-nav a, .acct-nav button{ min-height:38px; border:1px solid var(--border); margin-top:0; border-radius:var(--r); }
  .acct-nav [aria-current]{ box-shadow:none; border-color:var(--accent); }
  .reg{ grid-template-columns:minmax(0,1fr); }
  .reg-info{ position:static; }
}
@media (max-width:760px){
  .section{ padding-block:60px; }
  .facts .wrap{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .fact{ padding:16px 0; border-left:0; border-top:1px solid var(--border); }
  .fact:nth-child(-n+2){ border-top:0; }
  .fact b{ font-size:22px; }
  .cta-row .btn{ flex:1 1 auto; }
  .pgrid{ --cols:1 !important; gap:0; }
  .pgrid .pcard{ grid-template-columns:118px minmax(0,1fr); gap:16px; align-items:center; padding-block:14px; border-bottom:1px solid var(--border); }
  .pgrid .pcard:first-child{ border-top:1px solid var(--border); }
  .pgrid .pcard .illo{ aspect-ratio:1; border-radius:var(--r); }
  .pgrid .pcard h3{ font-size:22px; }
  .pgrid .pcard p{ font-size:14px; }
  .pgrid .pcard .cluster{ display:none; }
  .pcard .badge{ top:20px; left:6px; }
  .callout, .cta-band{ grid-template-columns:minmax(0,1fr); padding:24px; }
  .form-row{ grid-template-columns:minmax(0,1fr); }
  .cart-item{ grid-template-columns:96px minmax(0,1fr); }
  .cart-item .remove{ grid-column:2; justify-self:start; padding:0; }
  .fmts{ --u:2.3px; gap:18px 14px; }
  .fmt-group{ grid-template-columns:minmax(0,1fr); }
  .steps{ --cols:1 !important; }
  .swatch-strip{ grid-template-columns:repeat(6, minmax(0,1fr)); }
  .swatch-strip .swatch:nth-child(n+7){ display:none; }
  .mnav-cols{ grid-template-columns:minmax(0,1fr); }
  .panel{ padding:22px; }
}
@media (max-width:560px){
  .gtiles{ grid-template-columns:minmax(0,1fr); }
  .usp{ grid-template-columns:minmax(0,1fr); gap:20px; }
  .foot-grid{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .options{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
  .hdr-icon{ padding:0 9px; }
  .site-header > .wrap{ gap:12px; }
  .hero-visual .tag{ right:8px; font-size:12px; }
  .app-body{ grid-template-columns:62px minmax(0,1fr); }
  .buybox{ padding:18px; }
  .tb-long{ display:none; }
  .tb-short{ display:inline; }
  .contact-row{ grid-template-columns:28px minmax(0,1fr); }
  .contact-row .acts{ grid-column:2; }
  .stat-cards{ grid-template-columns:minmax(0,1fr); }
  .ref{ grid-template-columns:40px minmax(0,1fr); }
  .ref .avatar{ width:40px; height:40px; }
  .ref > .tag-check{ grid-column:2; justify-self:start; }
  .ref .track{ grid-column:1 / -1; }
  .stepper li{ font-size:11.5px; }
  .voucher{ grid-template-columns:auto minmax(0,1fr); }
  .voucher .tag-check{ grid-column:2; justify-self:start; }
  .invite{ padding:20px; }
}

/* ---------- samensteller album (productpagina) ---------- */
.cfg-stage{ align-content:start; }
.cfg-canvas{ position:relative; aspect-ratio:5/4; max-height:50vh; border-radius:var(--r-lg); background:var(--workspace); display:grid; place-items:center; overflow:hidden; }
.cfg-album{ position:relative; width:46%; aspect-ratio:var(--ar,1); background-color:#B89470; border-radius:2px 5px 5px 2px; touch-action:none;
  box-shadow:3px 1px 0 -1px var(--paper,#fff), 5px 2px 0 -1px #E4DCCE, var(--shadow-md); transition:background-color .25s, width .25s;
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 1px, transparent 1px 3px); }
.cfg-album::before{ content:""; position:absolute; inset:0 auto 0 0; width:8%; background:linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,.05) 60%, rgba(255,255,255,.1)); }
.cfg-album::after{ content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,.14), transparent 45%, rgba(0,0,0,.12)); pointer-events:none; }
.cfg-persona{ position:absolute; left:0; top:0; z-index:2; display:grid; color:var(--ink,#16181D); pointer-events:none; text-align:center; }
.cfg-persona.ink-wit{ --ink:#FFFFFF; } .cfg-persona.ink-zwart{ --ink:#16181D; } .cfg-persona.ink-uv{ --ink:rgba(0,0,0,.22); }
.cfg-d{ display:grid; justify-items:center; gap:.55em; line-height:1; white-space:nowrap; }
.cfg-persona img{ object-fit:contain; width:100%; height:100%; }
.cfg-ph{ font:500 .9em/1.4 var(--sans); letter-spacing:.06em; opacity:.8; text-align:center; }
.cfg-cap{ text-align:center; margin:0; }
.cfg{ display:grid; gap:22px; }
.cfg-field{ display:grid; gap:10px; padding-top:18px; border-top:1px solid var(--border); }
.cfg-lbl{ display:flex; justify-content:space-between; gap:12px; font-weight:600; }
.cfg-lbl small{ font-weight:400; color:var(--muted); font-size:13.5px; text-align:right; }
.cfg-sub{ margin:4px 0 2px; }
.cfg-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.cfg-chip{ min-height:40px; padding:0 14px; border-radius:var(--r-sm); border:1px solid var(--border-strong,var(--border)); background:var(--surface); cursor:pointer; font:inherit; font-size:14.5px; color:var(--text); font-variant-numeric:lining-nums tabular-nums; }
.cfg-chip:hover{ background:var(--surface-3); }
.cfg-chip[aria-pressed="true"]{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); background:var(--accent-soft); font-weight:600; }
.cfg-chip small{ color:var(--muted); font-weight:400; margin-left:4px; }
.cfg-swatches{ display:flex; flex-wrap:wrap; gap:10px; }
.cfg-sw{ width:42px; height:42px; border-radius:var(--r-sm); border:1px solid rgba(0,0,0,.12); cursor:pointer; padding:0;
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 1px, transparent 1px 3px); }
.cfg-sw[aria-pressed="true"]{ outline:2px solid var(--accent); outline-offset:3px; }
.cfg-input{ width:100%; min-height:44px; padding:9px 13px; border-radius:var(--r-sm); border:1px solid var(--border-strong,var(--border)); background:var(--surface-2); font:inherit; color:var(--text); }
select.cfg-input{ cursor:pointer; }
.cfg-stats{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface-2); }
.cfg-stat{ display:grid; padding:8px 12px; border-left:1px solid var(--border); }
.cfg-stat:first-child{ border-left:0; }
.cfg-stat span{ font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.cfg-stat b{ font-size:16px; font-weight:600; font-variant-numeric:lining-nums tabular-nums; }
.cfg-stat.hl b{ color:var(--accent-ink); }
.cfg-choice{ display:grid; gap:8px; }
.cfg-opt{ display:grid; grid-template-columns:20px minmax(0,1fr) auto; gap:4px 12px; align-items:start; padding:12px 14px; border:1px solid var(--border); border-radius:var(--r-sm); cursor:pointer; background:var(--surface-2); }
.cfg-opt input{ margin-top:3px; accent-color:var(--accent); width:17px; height:17px; }
.cfg-opt b{ display:block; font-weight:600; } .cfg-opt small{ display:block; color:var(--muted); font-size:13.5px; }
.cfg-opt .amt{ font-weight:600; font-variant-numeric:lining-nums tabular-nums; white-space:nowrap; }
.cfg-opt:has(input:checked){ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); background:var(--surface); }
.cfg-persbox{ display:grid; gap:8px; margin-top:4px; }
.cfg-text{ display:grid; gap:10px; margin-top:4px; } .cfg-text > div{ display:grid; gap:4px; }
.cfg-own{ display:grid; gap:8px; }
.cfg-drop{ display:grid; place-items:center; gap:4px; text-align:center; padding:20px; border:1.5px dashed var(--border-strong,var(--border)); border-radius:var(--r); background:var(--surface-2); cursor:pointer; }
.cfg-wt{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface); }
.cfg-wt > div{ display:grid; gap:2px; }
.cfg-pos{ display:grid; gap:10px; margin-top:6px; padding:12px 14px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface-2); }
.cfg-rng{ display:grid; grid-template-columns:110px 1fr; align-items:center; gap:12px; font-size:14px; }
.cfg-rng b{ font-weight:600; color:var(--accent-ink); font-variant-numeric:lining-nums tabular-nums; }
.cfg-rng input{ width:100%; accent-color:var(--accent); }
.cfg-rng .cfg-chip{ min-height:34px; }
.cfg-buy{ margin-top:6px; }
.cfg-price{ display:grid; gap:6px; padding-bottom:14px; border-bottom:1px solid var(--border); }
.cfg-lines{ display:grid; gap:4px; font-size:14.5px; color:var(--text-2); }
.cfg-lines div, .cfg-totalrow{ display:flex; justify-content:space-between; gap:12px; font-variant-numeric:lining-nums tabular-nums; }
.cfg-totalrow{ align-items:baseline; padding-top:6px; font-weight:600; }
.cfg-totalrow small{ display:block; font-weight:400; font-size:12.5px; }
.cfg-totalrow strong{ font-family:var(--serif); font-size:26px; }
@media (max-width:860px){ .cfg-rng{ grid-template-columns:90px 1fr; } }

/* samensteller in stappen (A1) */
.cfg{ gap:18px; }
.cfg-steps{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:6px; }
.cfg-step{ display:flex; align-items:center; gap:8px; min-height:42px; padding:0 10px; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--surface); color:var(--muted); font:inherit; font-size:14px; font-weight:500; cursor:pointer; text-align:left; }
.cfg-step:hover{ background:var(--surface-3); }
.cfg-step-n{ width:22px; height:22px; flex-shrink:0; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; background:var(--surface-3); color:var(--muted); }
.cfg-step.is-on{ border-color:var(--navy, #1F2A44); background:var(--surface-3); color:var(--text); font-weight:600; }
.cfg-step.is-on .cfg-step-n{ background:var(--navy, #1F2A44); color:#fff; }
.cfg-step.is-done{ color:var(--text); }
.cfg-step.is-done .cfg-step-n{ background:var(--success, #2F6B4F); color:#fff; }
.cfg-viewport{ overflow:hidden; transition:height .35s ease; }
.cfg-track{ display:flex; align-items:flex-start; transition:transform .4s ease; }
.cfg-slide{ flex:0 0 100%; min-width:0; box-sizing:border-box; display:grid; gap:14px; align-content:start; padding:2px 2px 6px; }
.cfg-slide > p{ margin:0; }
.cfg-h{ margin:0; font-family:var(--serif); font-weight:600; font-size:28px; line-height:1.15; }
.cfg-slide .cfg-field:first-of-type{ border-top:0; padding-top:0; }
.cfg-chips--grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); }
.cfg-swatches--lg .cfg-sw{ width:52px; height:52px; }
.cfg-row{ display:grid; grid-template-columns:130px minmax(0,1fr); align-items:center; gap:12px; }
.cfg-text{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.cfg-text-wide{ grid-column:1 / -1; }
.cfg-summary{ display:grid; gap:0; margin:0; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface-2); }
.cfg-summary > div{ display:grid; grid-template-columns:110px minmax(0,1fr) auto; gap:12px; align-items:baseline; padding:12px 16px; border-top:1px solid var(--border); }
.cfg-summary > div:first-child{ border-top:0; }
.cfg-summary dt{ color:var(--muted); font-size:14px; }
.cfg-summary dd{ margin:0; font-weight:600; }
.cfg-edit{ border:0; background:none; padding:0; font:inherit; font-size:14px; font-weight:600; color:var(--accent); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.cfg-out{ padding:14px 16px; border:1px solid var(--border); border-radius:var(--r-lg); }
.cfg-bar{ display:flex; align-items:center; gap:12px; padding-top:16px; border-top:1px solid var(--border); }
.cfg-barprice{ flex:1; display:flex; flex-direction:column; min-width:0; }
.cfg-barlbl{ font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.cfg-barprice strong{ font-family:var(--serif); font-weight:600; font-size:28px; line-height:1.1; }
.cfg-login{ font-weight:600; color:var(--accent); }
.cfg-sumline{ margin:-8px 0 0; }
@media (max-width:860px){
  .cfg-steps{ grid-template-columns:repeat(5, auto); overflow-x:auto; }
  .cfg-step span:last-child{ display:none; }
  .cfg-step.is-on span:last-child{ display:inline; }
  .cfg-chips--grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .cfg-text{ grid-template-columns:1fr; }
  .cfg-bar{ flex-wrap:wrap; }
  .cfg-bar .btn{ flex:1; }
}
.cfg-steps{ display:flex; gap:4px; }
.cfg-step{ flex:1 1 auto; justify-content:center; padding:0 6px; gap:6px; font-size:13.5px; white-space:nowrap; }
.cfg-login{ white-space:nowrap; }
.cfg-extras{ display:grid; gap:8px; }
.cfg-extra{ display:grid; grid-template-columns:72px minmax(0,1fr); gap:14px; align-items:center; padding:8px 12px 8px 8px; border:1px solid var(--border); border-radius:var(--r-lg); color:inherit; text-decoration:none; background:var(--surface); }
.cfg-extra:hover{ border-color:var(--border-strong); background:var(--surface-2); }
.cfg-extra .illo{ aspect-ratio:1; border-radius:var(--r-sm); }
.cfg-extra > span{ display:grid; gap:2px; }
.cfg-album.tex-buckram{ background-image:linear-gradient(160deg, rgba(255,255,255,.14), transparent 42%), repeating-linear-gradient(45deg, rgba(0,0,0,.06) 0 1px, transparent 1px 2px); }
.cfg-album.tex-suede{ background-image:radial-gradient(120% 90% at 28% 18%, rgba(255,255,255,.16), transparent 60%), radial-gradient(90% 70% at 75% 85%, rgba(0,0,0,.20), transparent 60%); }
.cfg-track{ gap:32px; }
.cfg-slide{ padding:5px 5px 8px; }
/* foto op acryl of metaal, en een omslag in eigen ontwerp */
.cfg-plate{ position:absolute; left:20%; right:20%; top:50%; aspect-ratio:1; transform:translateY(-50%); display:grid; place-items:center; overflow:hidden; border-radius:3px; z-index:1;
  font:500 13px/1 var(--sans); color:rgba(255,255,255,.85); background:linear-gradient(135deg, #8a9bb0, #c9b79c 60%, #6f7f72); box-shadow:0 6px 16px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.4); }
.cfg-plate img{ width:100%; height:100%; object-fit:cover; display:block; }
.cfg-plate--acryl::after{ content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,.45), transparent 38%, transparent 70%, rgba(255,255,255,.15)); }
.cfg-plate--metal{ border-radius:1px; }
.cfg-plate--metal::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px), linear-gradient(160deg, rgba(255,255,255,.3), transparent 50%); }
.cfg-album.tex-photo{ background-image:none; background-size:cover; background-position:center; }
.cfg-album.tex-photo:not(.has-photo){ background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 10px, transparent 10px 20px); }

/* homepage: alle kleuren per materiaal */
.mat-rows{ display:grid; gap:22px; }
.mat-row{ display:grid; gap:10px; }
.mat-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.mat-head strong{ font-family:var(--serif); font-size:24px; font-weight:600; }
.mat-head span{ font-size:14px; color:var(--text-2); font-variant-numeric:lining-nums tabular-nums; }
.mat-head small{ margin-left:auto; font-size:13px; color:var(--muted); }
.mat-sws{ display:flex; flex-wrap:wrap; gap:8px; }
.mat-sw{ width:34px; height:34px; padding:0; border:0; border-radius:var(--r-sm); cursor:pointer; background-color:var(--c); box-shadow:inset 0 0 0 1px rgba(0,0,0,.1); transition:transform .15s; }
.mat-sw:hover{ transform:translateY(-2px); }
.mat-sw[aria-pressed="true"]{ outline:2px solid var(--accent); outline-offset:3px; }

/* homepage: zo werkt het in drie stappen */
.facts.steps3 .wrap{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.steps3 .fact{ grid-template-columns:auto minmax(0,1fr); column-gap:14px; color:inherit; text-decoration:none; padding:24px 24px; }
.steps3 .fact:first-child{ padding-left:0; }
.steps3 .fact > b, .steps3 .fact > span:not(.fact-n){ grid-column:2; }
.steps3 .fact-n{ grid-row:1 / span 2; width:34px; height:34px; border-radius:999px; display:grid; place-items:center; font-weight:700; font-size:15px; background:var(--navy, #1F2A44); color:#F7F3EC; }
.steps3 .fact:hover b{ color:var(--accent); }
.hero-album{ transition:background-color .8s ease; }
@media (max-width:760px){ .facts.steps3 .wrap{ grid-template-columns:1fr; } .steps3 .fact{ border-left:0; border-top:1px solid var(--border); padding-left:0; } .steps3 .fact:first-child{ border-top:0; } }
.steps3 .fact > b{ font-size:19px; line-height:1.25; }

/* homebanner: drie productlijnen (later echte foto's) */
.hero-lines .wrap{ grid-template-columns:1fr; gap:40px; }
.hero-lines .hero-text{ max-width:760px; }
.hero-lines h1{ font-size:clamp(40px, 5vw, 64px); }
.hero-tiles{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
.hero-tile{ display:grid; gap:14px; color:inherit; text-decoration:none; }
.hero-tile .illo{ aspect-ratio:4/3; border-radius:var(--r-lg); transition:transform .25s ease; }
.hero-tile:hover .illo{ transform:translateY(-3px); }
.hero-tile > span{ display:grid; gap:2px; }
.hero-tile b{ font-family:var(--serif); font-size:26px; font-weight:600; }
.hero-tile:hover b{ color:var(--accent); }
.hero-tile > span > span{ font-size:15px; color:var(--text-2); }
@media (max-width:760px){ .hero-tiles{ grid-template-columns:1fr; } }
.steps3 .fact{ align-items:center; }
.steps3 .fact-n{ grid-row:auto; }

/* homebanner: laag, met slides van voorbeeldproducten */
.hero-low{ padding-block:36px 40px; }
.hero-low .wrap{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:48px; align-items:center; }
.hero-low h1{ font-size:clamp(36px, 4.2vw, 54px); margin:10px 0 14px; }
.hero-low .lead{ margin-bottom:4px; }
.hero-slider{ display:grid; gap:12px; min-width:0; }
.hs-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; border-radius:var(--r-lg); scrollbar-width:none; }
.hs-track::-webkit-scrollbar{ display:none; }
.hs-slide{ position:relative; flex:0 0 100%; scroll-snap-align:start; color:inherit; text-decoration:none; }
.hs-slide .illo{ aspect-ratio:16/8; border-radius:var(--r-lg); }
.hs-cap{ position:absolute; left:16px; bottom:16px; display:grid; gap:2px; max-width:70%; padding:10px 14px; border-radius:var(--r-sm); background:rgba(255,255,255,.92); box-shadow:var(--shadow-sm); }
.hs-cap b{ font-family:var(--serif); font-size:20px; font-weight:600; }
.hs-cap span{ font-size:13.5px; color:var(--text-2); }
.hs-slide:hover .hs-cap b{ color:var(--accent); }
.hs-nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hs-dots{ display:flex; gap:8px; }
.hs-dot{ width:10px; height:10px; padding:0; border:0; border-radius:999px; background:var(--border-strong); cursor:pointer; transition:width .25s, background .25s; }
.hs-dot[aria-current="true"]{ width:26px; background:var(--accent); }
.hs-arrow{ width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border-strong); border-radius:var(--r-sm); background:var(--surface); cursor:pointer; color:var(--text); }
.hs-arrow .flip{ transform:scaleX(-1); }
@media (max-width:860px){ .hero-low .wrap{ grid-template-columns:1fr; gap:24px; } .hs-slide .illo{ aspect-ratio:4/3; } }
.hs-slide{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:stretch; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.hs-slide .illo{ aspect-ratio:4/3; border-radius:0; }
.hs-cap{ position:static; max-width:none; align-content:center; gap:6px; padding:20px 24px; background:none; box-shadow:none; border-radius:0; }
.hs-cap b{ font-size:26px; line-height:1.1; }
.hs-cap .link-arrow{ margin-top:6px; font-size:14.5px; }
.gtile .slogan{ font-family:var(--serif); font-style:italic; font-size:19px; line-height:1.35; color:var(--text-2); }
@media (max-width:860px){ .hs-slide{ grid-template-columns:1fr; } .hs-slide .illo{ aspect-ratio:16/9; } }

/* productpagina met samensteller: alles in één kader, zoals mockup A1 */
.product.cfg-boxed{ margin-top:8px; padding:28px; gap:40px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-sm); align-items:stretch; }
.cfg-boxed .pinfo{ gap:16px; align-content:start; }
.cfg-boxed .pinfo h1{ font-size:clamp(34px, 3.4vw, 46px); }
.cfg-boxed .cfg-stage{ position:sticky; top:calc(var(--header-h) + 20px); align-self:start; }
.cfg-boxed .cfg-canvas{ aspect-ratio:1 / 1; max-height:none; }
.cfg-about{ max-width:760px; padding-block:36px 72px; }
@media (max-width:860px){ .product.cfg-boxed{ padding:16px; gap:20px; } .cfg-boxed .cfg-stage{ position:static; } .cfg-boxed .cfg-canvas{ aspect-ratio:5/4; } }
.cfg-boxed .cfg-steps{ min-width:0; flex-wrap:wrap; } .cfg-boxed .cfg-step{ font-size:13px; padding:0 5px; gap:5px; } .cfg-boxed .pinfo{ min-width:0; }
/* kleuren per materiaal: compacter */
.mat-rows{ gap:12px; }
.mat-row{ grid-template-columns:150px minmax(0,1fr); align-items:center; gap:4px 16px; }
.mat-head{ display:grid; gap:0; }
.mat-head strong{ font-size:19px; }
.mat-head span{ font-size:12.5px; }
.mat-head small{ display:none; }
.mat-sws{ gap:6px; }
.mat-sw{ width:26px; height:26px; }
@media (max-width:560px){ .mat-row{ grid-template-columns:1fr; } }
/* materialen: één grote stof, kleine vakjes eronder */
.mat-pick{ display:grid; gap:16px; }
.mat-big{ position:relative; aspect-ratio:16/9; border-radius:var(--r-lg); background-color:var(--c); box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), var(--shadow-md); transition:background-color .35s ease; background-size:auto; }
.mat-big.tex-linnen{ background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 1px, transparent 1px 4px); }
.mat-big-lbl{ position:absolute; left:14px; bottom:14px; padding:7px 12px; border-radius:var(--r-sm); background:rgba(255,255,255,.92); font-size:14px; font-weight:600; color:var(--text); box-shadow:var(--shadow-sm); }
.mat-rows{ gap:10px; }
.mat-row{ display:grid; grid-template-columns:120px minmax(0,1fr); align-items:center; gap:12px; }
.mat-row strong{ font-family:var(--serif); font-size:18px; font-weight:600; }
.mat-sw{ width:24px; height:24px; }
.mat-sw:hover{ transform:scale(1.25); }
@media (max-width:560px){ .mat-row{ grid-template-columns:1fr; gap:6px; } }
.way-tag{ justify-self:start; padding:4px 10px; border-radius:var(--r-sm); background:var(--accent-soft); color:var(--accent-ink); font-size:12.5px; font-weight:600; letter-spacing:.02em; }
.mat-pick{ grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); align-items:center; gap:28px; }
.mat-big{ aspect-ratio:4/3; }
@media (max-width:760px){ .mat-pick{ grid-template-columns:1fr; } }
.mat-pick{ grid-template-columns:340px minmax(0,1fr); }
.mat-big{ aspect-ratio:3/2; }
.section:has(.mat-pick){ padding-block:48px; }
@media (max-width:760px){ .mat-pick{ grid-template-columns:1fr; } }
/* waarom: compacter */
.section:has(.usp){ padding-block:48px; }
.usp{ gap:24px; }
.usp div{ gap:4px; padding-top:12px; }
.usp h3{ font-size:20px; }
.usp p{ font-size:14.5px; }
/* footer: keurmerk links onder */
.keurmerk{ display:inline-flex; align-items:center; gap:8px; margin-right:16px; padding:6px 10px; border:1px solid currentColor; border-radius:var(--r-sm); font-size:11.5px; font-weight:700; line-height:1.15; text-transform:uppercase; letter-spacing:.04em; text-decoration:none; opacity:.85; }
.keurmerk:hover{ opacity:1; }
.keurmerk .icon{ width:18px; height:18px; }
/* materialen: klein album ter illustratie */
.mat-big{ display:grid; place-items:center; background:linear-gradient(160deg,#fff 0%, #EFE9E1 100%); background-image:none; }
.mat-big.tex-linnen{ background-image:none; }
.mat-album{ position:relative; width:46%; aspect-ratio:1/1; margin-bottom:22px; }
.mat-album::before{ content:""; position:absolute; inset:3% -3% -2% 4%; border-radius:2px 5px 5px 2px; background:repeating-linear-gradient(90deg,#f6f3ee 0 1px,#e2ddd5 1px 2px); box-shadow:0 18px 30px -12px rgba(31,42,68,.35); }
.mat-album-cover{ position:absolute; inset:0; border-radius:2px 4px 4px 2px; background-color:var(--c); box-shadow:inset 10px 0 12px -8px rgba(0,0,0,.35), inset -1px 0 0 rgba(255,255,255,.15), 0 2px 4px rgba(0,0,0,.12); transition:background-color .35s ease; }
.mat-album-cover::after{ content:""; position:absolute; top:0; bottom:0; left:7%; width:1px; background:rgba(0,0,0,.18); box-shadow:1px 0 0 rgba(255,255,255,.12); }
.mat-big{ aspect-ratio:auto; padding:26px 20px 18px; gap:18px; align-content:center; }
.mat-album{ width:150px; margin:0; }
.mat-big-lbl{ position:static; box-shadow:none; background:transparent; padding:0; }
.foot-about .keurmerk{ justify-self:start; margin:14px 0 0; }
.sec-cta{ padding-top:0; }
.sec-cta{ padding-block:40px 64px; }
.sec-cta .cta-band{ padding:24px 32px; }
.sec-cta{ padding-block:16px 64px; }
.gtiles{ gap:16px; }
:where(main:has(.hero-low)) .section{ padding-block:56px; }
.section.sec-cta{ padding-block:16px 64px; }
/* productpagina: lager kader, past zonder scrollen op kleine schermen */
.product.cfg-boxed{ padding:20px; gap:28px; margin-top:0; }
.cfg-boxed .pinfo{ gap:10px; }
.cfg-boxed .pinfo h1{ font-size:clamp(28px, 2.6vw, 36px); }
.cfg-boxed .cfg-stage{ align-self:stretch; display:grid; }
.cfg-boxed .cfg-canvas{ aspect-ratio:auto; height:100%; min-height:380px; }
@media (max-width:860px){ .cfg-boxed .cfg-canvas{ aspect-ratio:5/4; height:auto; min-height:0; } }
.cfg-boxed .cfg-steps{ margin-block:2px; }
.cfg-boxed .cfg-slide h2, .cfg-boxed .cfg-slide h3{ font-size:24px; }
/* configurator compact: elke stap past op een klein scherm */
.cfg-boxed .cfg-h{ font-size:22px; }
.cfg-boxed .cfg-slide{ gap:10px; }
.cfg-boxed .cfg-choice{ grid-template-columns:1fr 1fr; }
.cfg-boxed .cfg-opt{ padding:9px 12px; align-items:center; }
.cfg-boxed .cfg-opt small{ display:none; }
.cfg-boxed .cfg-opt input{ margin-top:0; }
.cfg-boxed .cfg-persbox{ gap:8px; }
.cfg-boxed .cfg-pos{ padding:8px 12px; gap:4px; }
.cfg-boxed .cfg-input{ padding-block:8px; }
.cfg-boxed .cfg-summary > div{ padding:7px 14px; }
.cfg-boxed .cfg-out{ padding:10px 14px; }
.cfg-boxed .cfg-out p{ display:none; }
.cfg-boxed .cfg-extras{ gap:6px; }
.cfg-boxed .cfg-extra{ grid-template-columns:40px minmax(0,1fr); padding:5px 10px 5px 5px; gap:10px; }
.cfg-boxed .cfg-extra small, .cfg-boxed .cfg-extra p, .cfg-boxed .cfg-extra > span > span{ display:none; }
.cfg-boxed .cfg-slide > p.small.muted:last-child{ display:none; }
.cfg-boxed .cfg-bar{ padding-top:12px; }
.cfg-boxed .cfg-sumline{ display:none; }
.cfg-boxed .cfg-text{ grid-template-columns:1fr 1fr 1.1fr; gap:8px; margin-top:0; }
.cfg-boxed .cfg-text-wide{ grid-column:auto; }
.cfg-boxed .cfg-row{ grid-template-columns:120px minmax(0,1fr); }
.cfg-boxed .cfg-pos{ grid-template-columns:1fr 1fr; gap:6px 16px; margin-top:0; }
.cfg-boxed .cfg-rng{ grid-template-columns:auto 1fr; gap:8px; }
.cfg-boxed .cfg-pos > .cfg-rng:nth-child(3), .cfg-boxed #cfg-fitnote{ grid-column:1 / -1; }
.cfg-boxed .cfg-viewport{ max-height:calc(100vh - 320px); overflow-y:auto; overflow-x:hidden; }
@media (max-width:860px){ .cfg-boxed .cfg-viewport{ max-height:none; } .cfg-boxed .cfg-text, .cfg-boxed .cfg-pos{ grid-template-columns:1fr; } }
.cfg-boxed .cfg-viewport{ max-height:max(320px, calc(100vh - 410px)); }
.cfg-boxed .cfg-track{ align-items:flex-start; }
.cfg-boxed .cfg-slide{ max-height:4000px; overflow:hidden; transition:none; }
.cfg-boxed .cfg-slide[aria-hidden="true"]{ max-height:0; transition:max-height 0s .4s; }
.cfg-boxed .cfg-persbox{ display:flex; flex-wrap:wrap; gap:8px 24px; }
.cfg-boxed .cfg-persbox > *{ flex:1 1 100%; }
.cfg-boxed .cfg-persbox > .cfg-row{ flex:0 1 auto; grid-template-columns:auto auto; }
.cfg-boxed .cfg-extras{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.cfg-boxed .cfg-extras > :first-child{ grid-column:1 / -1; }
.cfg-boxed .cfg-extra{ grid-template-columns:32px minmax(0,1fr); font-size:14px; }
.cfg-boxed .cfg-viewport{ max-height:max(320px, calc(100vh - 420px)); }
.cfg-boxed .cfg-persbox{ display:grid; }
.cfg-boxed .cfg-persbox[hidden]{ display:none; }
.cfg-boxed .cfg-persbox > .cfg-row{ grid-template-columns:120px minmax(0,1fr); }
.cfg-boxed .cfg-pos{ padding:6px 12px; }
.cfg-boxed *{ font-variant-numeric:lining-nums; }
/* groepspagina: uitleg per productgroep, elk met eigen pagina */
.subrows{ display:grid; gap:16px; }
.subrow{ display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:28px; align-items:center; padding:16px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); color:inherit; text-decoration:none; transition:border-color .2s, box-shadow .2s; }
.subrow:hover{ border-color:var(--border-strong); box-shadow:var(--shadow-sm); }
.subrow-illo{ display:block; }
.subrow-illo .illo{ aspect-ratio:4/3; }
.subrow-body{ display:grid; gap:10px; align-content:center; }
.subrow-body p{ color:var(--text-2); max-width:62ch; }
.subrow-body .cluster{ gap:6px; }
.subrow .link-arrow{ margin-top:4px; }
@media (max-width:760px){ .subrow{ grid-template-columns:1fr; gap:14px; } }
.foot-contact a{ color:inherit; text-decoration:none; } .foot-contact a:hover{ text-decoration:underline; } 

/* cijfers overal even hoog, ook in de koppen (Cormorant) */
html{ font-variant-numeric:lining-nums; }
.product.cfg-boxed{ grid-template-columns:minmax(0,2fr) minmax(0,3fr); }
@media (max-width:1100px){ .cfg-boxed .cfg-text{ grid-template-columns:1fr 1fr; } .cfg-boxed .cfg-text-wide{ grid-column:1 / -1; } .cfg-boxed .cfg-pos{ grid-template-columns:1fr; } }
@media (max-width:860px){ .product.cfg-boxed{ grid-template-columns:1fr; } }
.cfg-boxed .cfg-viewport{ max-height:none; overflow:hidden; }
.cfg-persona.al-right .cfg-d{ justify-items:end; }
.cfg-static{ width:100%; height:100%; display:grid; }
.cfg-static .illo{ height:100%; aspect-ratio:auto; background:transparent; }
.cfg-qty{ max-width:120px; }
.cfg-album.is-item::before{ display:none; } .cfg-album.is-item{ border-radius:4px; box-shadow:0 0 0 1px rgba(0,0,0,.06), 0 6px 0 -2px rgba(0,0,0,.18), 0 22px 40px -18px rgba(31,42,68,.45); }
/* hoofdmenu: Informatie als uitklapmenu */
.nav-dd{ position:relative; }
.nav-dd-menu{ position:absolute; left:0; top:100%; z-index:40; display:none; min-width:200px; padding:8px; margin-top:4px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-md); }
.nav-dd::after{ content:""; position:absolute; left:0; right:0; top:100%; height:8px; }
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu{ display:grid; }
.nav-dd:hover .nav-link .icon, .nav-dd:focus-within .nav-link .icon{ transform:rotate(180deg); }
.nav-dd-link{ padding:9px 12px; border-radius:var(--r-sm); color:var(--text-2); text-decoration:none; font-size:15px; font-weight:500; }
.nav-dd-link:hover, .nav-dd-link[aria-current="page"]{ background:var(--surface-3); color:var(--text); }
@media (min-width:1101px){ .mega .wrap{ grid-template-columns:repeat(5, minmax(0,1fr)); } }
/* mijn pakket */
.pk-banner{ display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:16px 18px; border:1px solid var(--accent); border-radius:var(--r-lg); background:var(--accent-soft); color:var(--text); text-decoration:none; }
.pk-banner > .icon{ width:24px; height:24px; color:var(--accent-ink); }
.pk-banner span span{ display:block; color:var(--text-2); font-size:14.5px; }
.pk-banner:hover{ box-shadow:var(--shadow-sm); }
.pk-list{ display:grid; gap:12px; }
.pk-item{ display:grid; grid-template-columns:96px minmax(0,1fr) auto; gap:18px; align-items:center; padding:12px 16px 12px 12px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); }
.pk-illo .illo{ aspect-ratio:1; border-radius:var(--r); }
.pk-body h3{ font-size:20px; margin-bottom:4px; }
.pk-buy{ display:grid; justify-items:end; gap:2px; text-align:right; }
.pk-buy b{ font-size:18px; }
.pk-buy .cluster{ margin-top:8px; gap:8px; flex-wrap:nowrap; }
.pk-qty input{ width:70px; padding-block:7px; }
@media (max-width:700px){ .pk-item{ grid-template-columns:72px minmax(0,1fr); } .pk-buy{ grid-column:1 / -1; justify-items:start; text-align:left; } }
/* hoofdmenu: Mijn Pakket met de vaste producten */
.pkm{ min-width:440px; gap:2px; padding:10px; }
.pkm-head{ display:grid; padding:6px 10px 10px; border-bottom:1px solid var(--border); margin-bottom:4px; }
.pkm-head small{ color:var(--muted); font-size:13px; }
.pkm-row{ display:grid; grid-template-columns:minmax(0,1fr) auto 76px; gap:14px; align-items:center; width:100%; padding:9px 10px; border:0; border-radius:var(--r-sm); background:none; color:var(--text); text-decoration:none; text-align:left; font:inherit; cursor:pointer; }
.pkm-row:hover{ background:var(--surface-3); }
.pkm-row b{ display:block; font-size:14.5px; font-weight:600; }
.pkm-row small{ color:var(--muted); font-size:13px; }
.pkm-p{ font-weight:600; font-size:14px; }
.pkm-btn{ justify-self:end; font-size:13px; font-weight:600; color:#fff; background:var(--accent); padding:6px 10px; border-radius:4px; }
.pkm-all{ display:flex; gap:6px; align-items:center; padding:10px; margin-top:4px; border-top:1px solid var(--border); color:var(--accent-ink); font-weight:600; text-decoration:none; font-size:14px; }
.pkm-all .icon{ width:15px; height:15px; }
.pkm-foot{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:4px; border-top:1px solid var(--border); }
.pkm-foot .pkm-all{ border-top:0; margin-top:0; }
.pkm-info{ padding:10px; font-size:14px; color:var(--text-2); text-decoration:underline; text-underline-offset:3px; }
.pkm-info:hover{ color:var(--text); }
/* mobiel menu: klapbare hoofdpunten */
.mnav .wrap{ gap:16px; padding-block:8px 24px; }
.mn{ display:grid; }
.mn-item{ border-bottom:1px solid var(--border); }
.mn-item > summary, .mn-link{ display:flex; justify-content:space-between; align-items:center; min-height:54px; list-style:none; cursor:pointer; font-size:18px; font-weight:600; color:var(--text); text-decoration:none; }
.mn-item > summary::-webkit-details-marker{ display:none; }
.mn-item > summary .icon{ width:18px; height:18px; transition:transform .2s; color:var(--muted); }
.mn-item[open] > summary .icon{ transform:rotate(180deg); }
.mn-sub{ display:grid; padding:0 0 14px; }
.mn-sub > a{ display:flex; justify-content:space-between; gap:12px; padding:9px 0 9px 12px; font-size:16px; color:var(--text-2); text-decoration:none; }
.mn-sub > a small{ color:var(--muted); font-size:14px; }
.mn-sub .mn-more{ color:var(--accent-ink); font-weight:600; }
.mn-cols{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; padding-left:12px; }
.mn-col{ display:grid; align-content:start; gap:2px; }
.mn-col a{ padding:5px 0; font-size:15px; color:var(--text-2); text-decoration:none; }
.mn-col .mn-head{ font-weight:600; color:var(--text); }
.mn-acct{ display:flex; flex-wrap:wrap; gap:8px 20px; }
.mn-acct a{ display:inline-flex; align-items:center; gap:8px; font-size:16px; color:var(--text); text-decoration:none; }
.mn-acct .icon{ width:18px; height:18px; }
.mn-cta{ width:100%; justify-content:center; }
.pkm-foot{ justify-content:flex-start; }
.pkm-foot{ display:grid; padding-top:4px; } .pkm-foot .nav-dd-link{ display:block; }
.cfg-pk-tag{ margin:0; padding:6px 10px; border-radius:var(--r-sm); background:var(--accent-soft); color:var(--accent-ink); font-size:13.5px; font-weight:600; justify-self:start; }
/* winkelwagen: offerte aanvragen (los van afrekenen) */
.krm-of-box{ margin-top:28px; padding:16px 18px; border:1px dashed var(--border-strong); border-radius:var(--r-lg); display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; background:var(--surface-2); }
.krm-of-box > .icon{ width:22px; height:22px; color:var(--accent); }
.krm-of-box b{ display:block; font-size:15px; }
.krm-of-box span{ font-size:14px; color:var(--text-2); }
.krm-of-box .link-arrow{ border:0; background:none; cursor:pointer; font:inherit; font-weight:600; white-space:nowrap; padding:0; }
@media (max-width:640px){ .krm-of-box{ grid-template-columns:auto 1fr; } .krm-of-box .link-arrow{ grid-column:1 / -1; justify-self:start; } }
.krm-of-shade{ position:fixed; inset:0; background:rgba(20,27,45,.45); z-index:300; }
.krm-of{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:min(620px, calc(100vw - 32px)); max-height:88vh; overflow:auto; background:var(--surface); border-radius:var(--r-lg); z-index:301; box-shadow:0 30px 80px rgba(0,0,0,.35); }
.krm-of-h{ display:flex; justify-content:space-between; align-items:start; padding:24px 26px 6px; }
.krm-of-h h2{ font-size:28px; margin:0; }
.krm-of-x{ border:0; background:none; font-size:20px; color:var(--muted); cursor:pointer; }
.krm-of-b{ display:grid; gap:12px; padding:6px 26px; }
.krm-of-b > p{ margin:0; color:var(--text-2); }
.krm-of-row{ display:grid; grid-template-columns:1fr 110px; gap:14px; align-items:center; padding:12px 0; border-top:1px solid var(--border); }
.krm-of-row b{ display:block; }
.krm-of-row small{ color:var(--muted); font-size:13px; }
.krm-of-row label span, .krm-of-note span{ display:block; font-size:12.5px; color:var(--muted); margin-bottom:4px; }
.krm-of-note span{ font-size:14px; font-weight:600; color:var(--text); }
.krm-of input, .krm-of textarea{ width:100%; box-sizing:border-box; font:inherit; padding:9px 10px; border:1px solid var(--border-strong); border-radius:var(--r-sm); background:var(--surface-2); }
.krm-of-err{ color:var(--danger, #b32d2e); margin:0; }
.krm-of-f{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:16px 26px 24px; }
.krm-of-f small{ color:var(--muted); }
.krm-of-ok{ padding:44px 30px; text-align:center; display:grid; gap:12px; justify-items:center; }
.krm-of-ok h2{ margin:0; font-size:28px; }
.krm-of-ok p{ margin:0; color:var(--text-2); max-width:420px; }
.krm-of-check{ width:52px; height:52px; border-radius:50%; background:#E4EDE6; color:#2F6B45; display:grid; place-items:center; font-size:26px; }


/* ==========================================================================
   WordPress en WooCommerce
   ========================================================================== */
.screen-reader-text{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.krm-page{ padding-block:44px 88px; }
.krm-page > .wrap > h1{ margin:0 0 24px; }
.krm-entry{ display:grid; gap:16px; max-width:72ch; color:var(--text-2); }
.krm-entry h2, .krm-entry h3{ margin-top:16px; }
.krm-entry a{ color:var(--accent); }
.krm-notice-bar{ background:var(--accent-soft); color:var(--text); font-size:14.5px; }
.krm-notice-bar .wrap{ padding-block:10px; text-align:center; }

/* knoppen van WooCommerce in de huisstijl */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.wc-block-components-button:not(.is-link), .wp-element-button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 20px;
  border-radius:var(--r); border:1px solid transparent; background:var(--accent); color:var(--on-accent);
  font:600 15px/1.1 var(--sans); text-decoration:none; cursor:pointer;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.wc-block-components-button:not(.is-link):hover, .wp-element-button:hover{ background:var(--accent-hover); color:var(--on-accent); }
.woocommerce .button.btn-ghost, .woocommerce a.button.wc-forward{ background:transparent; color:var(--text); border-color:var(--border-strong); }

/* formulieren */
.woocommerce form .form-row{ display:grid; gap:6px; margin:0 0 14px; }
.woocommerce form .form-row label{ font-size:14px; font-weight:600; color:var(--text); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select,
.woocommerce-input-wrapper input, .select2-container .select2-selection{
  width:100%; min-height:46px; padding:10px 14px; border-radius:var(--r); border:1px solid var(--border-strong);
  background:var(--surface-2); color:var(--text); font-size:16px;
}
.woocommerce .required{ color:var(--accent); text-decoration:none; }

/* meldingen */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner{
  list-style:none; margin:0 0 20px; padding:14px 16px; border-radius:var(--r); background:var(--success-soft); color:var(--text);
  border:0; font-size:15px; display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; justify-content:space-between;
}
.woocommerce-info{ background:var(--accent-soft); }
.woocommerce-error{ background:color-mix(in srgb, var(--danger) 12%, var(--surface)); }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before{ display:none; }

/* tabellen */
.woocommerce table.shop_table{ width:100%; border-collapse:collapse; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); font-variant-numeric:tabular-nums; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td{ padding:12px 16px; border-bottom:1px solid var(--border); text-align:left; }
.woocommerce table.shop_table thead th{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); background:var(--surface-2); }

/* Mijn account */
.woocommerce-account .woocommerce{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:44px; align-items:start; }
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper{ grid-column:1/-1; }
.woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; display:grid; gap:2px; position:sticky; top:calc(var(--header-h) + 20px); }
.woocommerce-MyAccount-navigation a{ display:flex; align-items:center; min-height:42px; padding:0 12px; border-radius:var(--r); color:var(--text-2); text-decoration:none; font-size:15px; font-weight:500; }
.woocommerce-MyAccount-navigation a:hover{ background:var(--surface-3); color:var(--text); }
.woocommerce-MyAccount-navigation .is-active a{ background:var(--surface-3); color:var(--text); font-weight:600; box-shadow:inset 2px 0 0 var(--accent); }
.woocommerce-MyAccount-navigation-link--customer-logout a{ color:var(--muted); }
.woocommerce-MyAccount-content{ display:grid; gap:24px; min-width:0; align-content:start; }
.woocommerce-account:not(.logged-in) .woocommerce{ display:block; max-width:520px; }
.woocommerce-form-login{ display:grid; gap:4px; padding:28px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); }

/* winkelwagen en afrekenen (blokken) */
.wc-block-cart, .wc-block-checkout{ font-family:var(--sans); }
.wc-block-components-totals-wrapper, .wc-block-components-sidebar{ border-color:var(--border) !important; }


@media (max-width:980px){
  .woocommerce-account .woocommerce{ grid-template-columns:minmax(0,1fr); gap:20px; }
  .woocommerce-MyAccount-navigation ul{ position:static; display:flex; flex-wrap:wrap; gap:6px; }
  .woocommerce-MyAccount-navigation a{ min-height:38px; border:1px solid var(--border); }
}
.form-error{ padding:10px 14px; border-radius:var(--r); background:color-mix(in srgb, var(--danger) 12%, var(--surface)); color:var(--text); font-size:14.5px; border:1px solid color-mix(in srgb, var(--danger) 40%, transparent); }
.pkm-empty{ margin:0; padding:14px 10px; color:var(--text-2); font-size:14.5px; }
.mn-sub .pkm-empty{ padding:6px 0 6px 12px; }

/* Mijn Pakket: voorraad duidelijk zichtbaar */
.pk-stock{ display:inline-flex; align-items:center; gap:6px; width:max-content; height:20px; padding:0 7px; border-radius:var(--r); font-size:11.5px; font-weight:600; background:var(--surface-3); color:var(--text-2); white-space:nowrap; }
.pk-stock::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.pk-stock.is-ok{ background:var(--success-soft); color:var(--success); }
.pk-stock.is-low{ background:var(--warning-soft); color:var(--warning); }
.pk-stock.is-out{ background:var(--danger-soft); color:var(--danger); }
.pkm-row > span:first-child{ display:grid; gap:2px; justify-items:start; }
.pkm-row .pk-stock{ margin-top:3px; }
.pkm-row.is-out .pkm-btn{ background:var(--border-strong); }
.mn-sub .pk-stock{ margin-left:8px; vertical-align:middle; }


/* Pakket op maat: rekenvoorbeeld */
.pk-example{ gap:8px; padding:20px 22px; border-left:3px solid var(--cognac); }
.pk-example h3{ margin:0; }
.pk-example p{ margin:0; }