/* Lenselink Zaaglijst – donkerblauw + oranje, mono-labels, golflijnen. */
:root {
  --navy: #0D1E27;   /* Lenselink-donkerblauw (topbalk, knoppen, tekst) */
  --navy-2: #13293A;
  --navy-3: #1D3A4F;
  --ink: #0D1E27;
  --orange: #E8590C;
  --orange-2: #C94A06;
  --orange-ink: #B23F00;
  --orange-soft: #FDEEE4;
  --grey: #F2F2EF;
  --bg: #FFFFFF;
  --card: #FFFFFF;
  --line: #E4E4DF;
  --line-2: #CFD2CC;
  --muted: #4E5D66;
  --muted-light: #A9B8C2;
  --err: #A22F00;
  --ok: #0F6B3D;
  --ok-soft: #E4F3EA;
  --info: #0E6A8F;
  --info-soft: #E3F1F7;
  --radius: 8px;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --container: 1320px;
  --ctl: 40px;      /* hoogte van invoervelden en knoppen (zoals lenselink.nl) */
  --ctl-sm: 32px;   /* kleine knoppen, velden in tabellen en werkbalken */
  --ctl-lg: 48px;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 81px; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-size: 15px; line-height: 1.55; font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; background: var(--bg); color: var(--ink); min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
a { color: var(--ink); text-underline-offset: 2px; }
a:hover { color: var(--orange-ink); }
img { max-width: 100%; }
h1, h2, h3 { letter-spacing: -0.025em; line-height: 1.12; }
h1 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; margin: 0 0 10px; }
.h-xl { font-size: clamp(28px, 3.6vw, 44px); font-weight: 800; margin: 6px 0 28px; }
.h2 { font-size: 22px; font-weight: 800; margin: 0 0 12px; }
.h3 { font-size: 18px; font-weight: 800; margin: 0 0 10px; }
.h4 { font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.h2-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.h2-row .h2, .h2-row .h3 { margin: 0; }
.light { color: #fff; }
.muted { color: var(--muted); }
.muted-light { color: var(--muted-light); }
.small { font-size: 13px; }
.center { text-align: center; }
.right { text-align: right; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mono, .mono-label { font-family: var(--mono); }
.mono-label { display: block; font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.grow { flex: 1; }
.strong { font-weight: 800; }
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.lead { color: var(--muted); font-size: 17px; margin: 0 0 12px; }
.lead-light { color: #D3DEE5; font-size: 17px; max-width: 560px; }
.err { color: var(--err); font-weight: 600; }
.warn { color: var(--orange-ink); }
.loading { color: var(--muted); padding: 40px 0; }
.wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.page { padding-top: 32px; padding-bottom: 64px; display: flex; flex-direction: column; gap: 18px; }
.page-wide { max-width: var(--container); padding-top: 24px; padding-bottom: 64px; display: flex; flex-direction: column; gap: 18px; }
.narrow { max-width: 780px; }
.narrow-sm { max-width: 460px; }
@media (max-width: 640px) { .wrap { padding-left: 16px; padding-right: 16px; } .hide-sm { display: none !important; } }

/* ---------- eyebrow (mono-labels met oranje streepje) */
.eyebrow { font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); margin: 0 0 14px; display: block; }
.eyebrow::before { content: ''; display: inline-block; vertical-align: middle; width: 22px; height: 2px; margin: -2px 10px 0 0; background: var(--orange); }
.eyebrow span { color: #fff; opacity: .6; }
.eyebrow-dark { color: var(--orange-ink); }
.eyebrow-dark::before { background: var(--orange); }

/* ---------- menubalk: zie 'kop' onderaan */
.pill { display: inline-flex; align-items: center; gap: 8px; height: var(--ctl); padding: 0 16px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.cart-count[hidden] { display: none; }
.cart-count { background: var(--orange); color: #fff; border-radius: 999px; font-size: 12px; min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }

/* ---------- donkere vlakken + golven */
.dark { background: var(--navy); color: #fff; position: relative; overflow: hidden; isolation: isolate; }
.dark h1, .dark h2 { color: #fff; }
.hero { padding: 104px 0 112px; }
.hero .hero-in { position: relative; }
.hero-copy { max-width: 620px; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.page-hero.has-photo { padding: 72px 0 64px; }
.page-hero .lead-light, .page-hero h1 { max-width: 720px; }
.hero.has-photo::before, .page-hero.has-photo::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(13,30,39,.96) 0%, rgba(13,30,39,.88) 38%, rgba(13,30,39,.35) 75%, rgba(13,30,39,.15) 100%); }
@media (max-width: 760px) { .hero.has-photo::before, .page-hero.has-photo::before { background: rgba(13,30,39,.82); } }
.hero h1 { font-size: clamp(34px, 4.4vw, 54px); max-width: 620px; letter-spacing: -0.035em; }
.hero h1 em { font-style: normal; color: var(--orange); }
.hero-alt { color: var(--muted-light); font-size: 14px; margin: 22px 0 0; }
.hero-alt a { color: #fff; }
.hero .checks { margin-top: 26px; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 22px; }
.checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; color: #D3DEE5; }
.checks li { display: flex; align-items: flex-start; gap: 10px; }
.checks li > svg { flex: none; margin-top: .2em; }
.checks svg { color: var(--orange); }
@media (min-width: 961px) { .hide-lg { display: none !important; } }
@media (max-width: 960px) { .hero-in { grid-template-columns: 1fr; gap: 36px; } .hero { padding: 44px 0 52px; } }

.page-hero { padding: 48px 0 40px; }
.page-hero .page-hero h1 { max-width: 760px; }
.app-top { padding: 26px 0 22px; }
.app-top h1 { font-size: clamp(26px, 3vw, 36px); margin: 0; }
.app-top .eyebrow { margin-bottom: 8px; }
/* ---------- USP's / stappen */
.usps { border-bottom: 1px solid var(--line); }
.usp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.usp-grid > div { padding: 30px 24px 30px 0; }
.usp-grid > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.usp-grid h2 { font-size: 20px; margin: 0 0 6px; }
.usp-grid p { margin: 0; color: var(--muted); font-size: 14px; }
@media (max-width: 860px) { .usp-grid { grid-template-columns: 1fr 1fr; } .usp-grid > div:nth-child(3) { border-left: 0; padding-left: 0; } }
@media (max-width: 520px) { .usp-grid { grid-template-columns: 1fr; } .usp-grid > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); } }
.band-grey { background: var(--grey); padding: 72px 0 40px; }
.band-grey.pb { padding: 32px 0 72px; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.step { background: #fff; border-radius: 8px; padding: 26px; }
.step h3 { font-size: 19px; margin: 18px 0 8px; }
.step p { margin: 0; color: var(--muted); }
.step-num { width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 14px; }
.step-num-orange { background: var(--orange); }
@media (max-width: 700px) { .steps { grid-template-columns: 1fr; } }
@media (min-width: 701px) and (max-width: 860px) { .steps { gap: 12px; } .step { padding: 20px; } .step h3 { font-size: 17px; } }

.panel-dark { position: relative; overflow: hidden; isolation: isolate; background: var(--navy); color: #fff; border-radius: 8px; padding: 44px; /* buitenradius gecompenseerd voor de tegels erin */ }
@media (max-width: 640px) { .panel-dark { padding: 26px 18px; border-radius: 8px; } }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: var(--ctl); padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; background: transparent; }
.chip:hover { color: #fff; border-color: #fff; }
.chip-on, .chip.chip-on { background: var(--orange); border-color: var(--orange); color: #fff; }
.chip svg { width: 15px; height: 15px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 22px; }
.tile { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 8px 8px 8px 16px; color: #fff; text-decoration: none; font-weight: 600; min-height: 112px; }
.tile-name { display: block; }
.tile-sub { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted-light); margin-top: 2px; }
.tile:hover { color: #fff; border-color: var(--orange); background: rgba(232,89,12,.12); }
.tile-img { width: 92px; height: 92px; background-color: #fff; border-radius: 8px; overflow: hidden; flex: none; }
.tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* lichte chips (op witte achtergrond) */
.chips-light, .thick { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-light { display: inline-flex; align-items: center; height: var(--ctl-sm); padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; font-family: inherit; cursor: pointer; }
.chip-light:hover { border-color: var(--ink); color: var(--ink); }
.chip-light.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ---------- knoppen */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--ctl); padding: 0 16px; border-radius: 8px; border: 1px solid transparent; font: inherit; font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn-lg { height: var(--ctl-lg); font-size: 16px; padding: 0 22px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-2); color: #fff; }
.btn-dark { background: var(--navy); color: #fff; }
.btn-dark:hover { background: var(--navy-3); color: #fff; }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: #E9EEF1; color: var(--ink); }
.btn-outline { background: #fff; color: var(--ink); border-color: var(--line-2); }
.btn-outline:hover { border-color: var(--ink); color: var(--ink); }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--ctl-sm); padding: 0 12px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn-ghost[disabled] { opacity: .45; cursor: default; }
.icon-btn { width: var(--ctl-sm); height: var(--ctl-sm); flex: none; border-radius: 8px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; }
.icon-btn[disabled] { opacity: .35; cursor: default; }
.icon-btn.soft { background: var(--orange-soft); border-color: transparent; color: var(--orange-ink); }
.icon-btn.rot { color: #7F8C93; }
.icon-btn.rot.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.stack { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.actions { white-space: nowrap; text-align: right; }
.actions .icon-btn { margin-left: 4px; }
.row-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.push-right { margin-left: auto; }
.inline { display: inline; }

/* ---------- tags / status */
.tag { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--grey); color: var(--muted); }
.tag-ok, .pill-ok { background: var(--ok-soft); color: var(--ok); }
.pill-wait { background: var(--orange-soft); color: var(--orange-ink); }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--grey); color: var(--muted); white-space: nowrap; }
.status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.s-nieuw, .s-open, .s-bekeken { background: var(--grey); color: var(--muted); }
.s-winkelmandje, .s-afrekenen, .s-materiaal-besteld, .s-besteld, .s-pending, .s-wacht { background: var(--orange-soft); color: var(--orange-ink); }
.s-betaald, .s-op-rekening, .s-materiaal-binnen, .s-binnen, .s-voorraad, .s-gezaagd, .s-verzonden, .s-sent, .s-delivered { background: var(--info-soft); color: var(--info); }
.s-klaar, .s-afgerond { background: var(--ok-soft); color: var(--ok); }
.s-geannuleerd, .s-failed, .s-mislukt { background: #FBE9E4; color: var(--err); }

/* ---------- formulieren */
input[type=text], input[type=number], input[type=email], input[type=search], input[type=password], input[type=date], input[type=tel], select, textarea {
  font: inherit; font-size: 14.5px; color: var(--ink); background: #fff; border: 1px solid var(--line-2); border-radius: 8px; height: var(--ctl); padding: 0 12px; width: 100%;
}
textarea { padding: 10px 12px; height: auto; min-height: 90px; }
input:focus, select:focus, textarea:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(232,89,12,.18); }
input[type=checkbox], input[type=radio] { accent-color: var(--orange); width: 18px; height: 18px; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.num-in { font-variant-numeric: tabular-nums; padding: 0 8px; }
.parts input, .parts select, .ref input, .period input, .toolbar input, .toolbar select, .full-row input { height: var(--ctl-sm); }
.inline-input { width: auto; display: inline-block; }
label.block, .form label:not(.check) { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form .actions, .form .row-actions { text-align: left; margin-top: 18px; }
@media (max-width: 520px) { .form .form-row { grid-template-columns: 1fr; } }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; min-height: 30px; cursor: pointer; }
.alert { padding: 12px 16px; border-radius: 8px; background: #FBE9E4; color: var(--err); font-weight: 600; margin: 0 0 12px; }
.notice { background: var(--orange-soft); color: var(--ink); padding: 12px 16px; border-radius: 8px; margin: 0 0 12px; }
.notice.ok { background: var(--ok-soft); }
.tip { margin: 12px 0 0; background: var(--orange-soft); border-radius: 8px; padding: 10px 14px; font-size: 13px; }

/* ---------- kaarten */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.pad { padding: 20px; }
details.card > summary { cursor: pointer; font-weight: 700; }
.empty { color: var(--muted); text-align: center; padding: 28px; }
.empty-state { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.grid { display: grid; gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 960px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* ---------- catalogus */
.catalog { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; padding-top: 28px; padding-bottom: 64px; }
.catalog > section { flex: 999 1 560px; min-width: 0; }
.filters { flex: 1 1 220px; max-width: 260px; background: var(--grey); border-radius: 20px; padding: 12px; /* veld en knop 8 + ruimte 12: hoeken lopen evenwijdig */ display: flex; flex-direction: column; gap: 4px; position: sticky; top: calc(var(--topbar-h, 64px) + 12px); max-height: calc(100vh - var(--topbar-h, 64px) - 24px); overflow-y: auto; font-size: 13.5px; }
.filters .search { margin-bottom: 6px; }
.facet { border-top: 1px solid var(--line-2); }
.facet summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 2px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.facet summary::-webkit-details-marker { display: none; }
.facet summary::after { content: '+'; font-family: var(--sans); font-size: 16px; line-height: 1; color: var(--ink); }
.facet[open] summary::after { content: '–'; }
.facet-n { margin-left: auto; background: var(--orange); color: #fff; border-radius: 999px; font-size: 10.5px; padding: 1px 7px; letter-spacing: 0; }
.facet-list { display: flex; flex-direction: column; max-height: 196px; overflow-y: auto; padding: 0 14px 8px 2px; } /* rechts ruimte: een scrollbalk die over de inhoud ligt (Windows 11) valt niet over de aantallen */
.facet .check { min-height: 28px; padding: 3px 0; font-size: 13.5px; gap: 8px; align-items: flex-start; }
.facet .check input { margin-top: 1px; }
.facet .check input { width: 16px; height: 16px; flex: none; }
.facet .check span { flex: 1; line-height: 1.25; }
.facet .check small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.filter-actions { display: flex; gap: 8px; align-items: center; padding-top: 8px; border-top: 1px solid var(--line-2); }
.filter-actions .btn { flex: 1; width: auto; padding: 0 12px; }
.filter-actions .btn-ghost { height: var(--ctl); }
@media (max-width: 860px) { .filters { position: static; max-width: none; max-height: none; } }
.pickbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 0; padding: 6px 6px 6px 18px; border-radius: 14px; /* knop 8 + ruimte 6: hoeken lopen evenwijdig */ background: var(--navy); color: #D3DEE5; font-size: 14px; }
/* witte strook boven en onder de balk: kaarten schuiven er netjes onder weg */
.pick-sticky { position: sticky; top: var(--topbar-h, 64px); z-index: 5; background: #fff; padding: 12px 0 16px; margin: -12px 0 0; }
.pickbar strong { color: #fff; }
.pick-actions { display: flex; gap: 6px; flex: none; }
.pick-actions [hidden] { display: none; }
.pickbar > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.cards > .card { position: relative; overflow: hidden; padding: 0; transition: border-color .15s, box-shadow .15s; }
.cards > .card:hover { border-color: var(--line-2); box-shadow: 0 10px 24px rgba(13,30,39,.08); }
.cards > .card.is-in { border-color: var(--navy); box-shadow: none; }
.card-pick { position: absolute; top: 12px; left: 12px; z-index: 2; background: #fff; border-radius: 8px; width: var(--ctl-sm); height: var(--ctl-sm); display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(13,30,39,.25); cursor: pointer; }
.card-link { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); height: 100%; }
.card-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; position: relative; }
.card-img img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1; }
/* laden: een lichte glans over de kleur van het decor tot de foto er is; foto's die later binnenkomen faden in */
.mat-card .card-img:has(img)::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,.32) 50%, transparent 75%); transform: translateX(-100%); animation: card-glans 1.3s ease-in-out infinite; }
.mat-card .card-img.is-in::before { content: none; }
.card-img img.is-wait { opacity: 0; }
.card-img img.is-in { opacity: 1; transition: opacity .3s ease; }
@keyframes card-glans { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .mat-card .card-img:has(img)::before { animation: none; background: rgba(255,255,255,.18); transform: none; } .card-img img.is-in { transition: none; } }
.card-body { display: flex; flex-direction: column; gap: 3px; padding: 16px; }
.card-title { font-weight: 700; font-size: 15.5px; }
.card-meta { font-size: 13px; color: var(--muted); }
.card-price { margin-top: 8px; font-weight: 800; font-size: 16px; }
.card-price small { font-weight: 500; color: var(--muted); font-size: 12.5px; }
.card-link:hover .card-title { color: var(--orange-ink); }
.heart { position: absolute; top: 12px; right: 12px; z-index: 2; width: var(--ctl-sm); height: var(--ctl-sm); border-radius: 8px; border: 0; background: #fff; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 4px rgba(13,30,39,.25); }
.heart:hover { color: var(--orange); }
.heart.is-on { color: var(--orange); }
.heart.is-on svg { fill: currentColor; }
.product-top .heart { position: static; box-shadow: none; border: 1px solid var(--line-2); }

/* ---------- materiaalpagina */
.crumbs { font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--muted); }
.product { display: flex; flex-wrap: wrap; gap: 40px; }
.product-media { flex: 1 1 380px; display: flex; flex-direction: column; gap: 12px; }
.product-img { aspect-ratio: 1; border-radius: 8px; overflow: hidden; position: relative; }
.product-img img, .product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-thumb { width: 120px; aspect-ratio: 1; border-radius: 8px; overflow: hidden; }
.product-info { flex: 1 1 400px; display: flex; flex-direction: column; gap: 14px; }
.product-info .eyebrow { margin: 0; }
.product-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.product-info h1 { font-size: clamp(28px, 3.4vw, 40px); margin: 0; }
.price-big { font-size: 30px; font-weight: 800; margin: 0; }
.price-big small { font-size: 14px; font-weight: 500; color: var(--muted); display: block; }
.product-cta { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 18px; background: var(--grey); border-radius: 8px; }
.specs { border-collapse: collapse; width: 100%; font-size: 14px; }
.specs th { text-align: left; font-weight: 600; color: var(--muted); padding: 10px 12px 10px 0; width: 42%; border-top: 1px solid var(--line); }
.specs td { padding: 10px 0; border-top: 1px solid var(--line); }

/* ---------- zaaglijst */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ref { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.ref input { width: 240px; }
.tabs { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tab-wrap { display: flex; align-items: center; }
.tab { height: var(--ctl); padding: 0 12px; border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2.5px solid transparent; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.tab:hover { color: var(--ink); }
.tab.is-on { border-bottom-color: var(--orange); color: var(--ink); font-weight: 700; }
.tab-x { width: 30px; height: 30px; border: 0; background: transparent; color: #7F8C93; font-size: 18px; border-radius: 8px; cursor: pointer; }
.tab-x:hover { background: var(--grey); color: var(--ink); }
.tabs-line { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tabs-line .tab { border-radius: 0; margin-bottom: -1px; }
.dot { width: 14px; height: 14px; border-radius: 8px; border: 1px solid rgba(13,30,39,.2); display: inline-block; flex: none; }
.cols { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.col-main { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.page-wide .col-main { flex-basis: 790px; } /* zaaglijst: tabel past zonder horizontaal scrollen; anders gaat het zaagschema eronder */
.col-side { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--topbar-h, 64px) + 4px); }
@media (max-width: 1000px) { .col-side { position: static; } }
.mat { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.mat-img { width: 64px; height: 64px; border-radius: 8px; overflow: hidden; flex: none; border: 1px solid rgba(13,30,39,.12); }
.mat-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mat-info { flex: 1 1 240px; display: flex; flex-direction: column; gap: 2px; }
.band { display: flex; flex-direction: column; gap: 2px; padding-left: 16px; border-left: 1px solid var(--line); }
.choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choice-btn { text-align: left; padding: 12px 16px; border-radius: 8px; background: #fff; border: 1.5px solid var(--line); font: inherit; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-height: 66px; }
.choice-btn:hover { border-color: var(--line-2); }
.choice-btn.is-on { border-color: var(--orange); background: var(--orange-soft); }
@media (max-width: 520px) { .choice { grid-template-columns: 1fr; } }
.table-wrap { overflow-x: auto; }
table.parts { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 14px; }
.parts th { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 12px 6px 4px; white-space: nowrap; }
.parts th.num { text-align: right; }
.parts tr.sub td { padding: 0 6px 8px; border-bottom: 1px solid var(--line); font-size: 11px; }
.parts td { padding: 6px 4px; border-bottom: 1px solid #EEEEEA; vertical-align: middle; }
.parts td:first-child { padding-left: 10px; width: 36px; }
.parts tr[data-row] td:nth-child(2) { min-width: 120px; }
.parts td:nth-child(2) input { width: 100%; }
.parts tr[data-row] td:nth-child(3), .parts tr[data-row] td:nth-child(4) { width: 84px; }
.parts td:nth-child(3) input, .parts td:nth-child(4) input { min-width: 76px; }
.parts td.edge-cell { width: 44px; padding-left: 1px; padding-right: 1px; text-align: center; }
.parts td.dir-cell { width: 44px; text-align: center; padding-left: 1px; padding-right: 1px; }
.dir-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--ctl-sm); height: var(--ctl-sm); padding: 0; border-radius: 8px; border: 1.5px dashed var(--line-2); background: #fff; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.dir-btn svg { flex: none; }
.dir-btn:hover { border-color: var(--ink); border-style: solid; }
.dir-btn.is-on { background: var(--navy); border: 1.5px solid var(--navy); color: #fff; }
.dir-btn.is-mixed { background: var(--orange-soft); border: 1.5px solid var(--orange); color: var(--orange-ink); justify-content: center; }
.mat-switch { display: flex; flex-direction: column; gap: 4px; padding-left: 16px; border-left: 1px solid var(--line); }
.mat-switch select { height: var(--ctl-sm); max-width: 220px; }
.parts td.actions { width: 86px; padding-right: 10px; }
.parts tr.has-err input.num-in { border: 2px solid #C23A00; }
.parts .err-row td { border-bottom: 1px solid #EEEEEA; padding-top: 0; font-size: 13px; }
.parts tr:has(+ .err-row:not([hidden])) td { border-bottom: 0; }
.edge-head { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.edge-btn { width: var(--ctl-sm); height: var(--ctl-sm); border-radius: 8px; border: 1.5px dashed var(--line-2); background: #fff; color: var(--ink); font: inherit; font-family: var(--mono); font-weight: 700; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.edge-btn:hover { border-color: var(--ink); border-style: solid; }
.edge-btn.is-on { background: var(--navy); border: 1.5px solid var(--navy); color: #fff; }
.edge-btn.is-mixed { background: var(--orange-soft); border: 1.5px solid var(--orange); color: var(--orange-ink); }
.edge-btn[disabled] { opacity: .3; cursor: not-allowed; }
.badge { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; background: var(--navy); }
.full-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid #EEEEEA; }
.full-row label { display: flex; align-items: center; gap: 8px; }
.full-row input { width: 80px; }

.schema-meta { display: flex; justify-content: space-between; margin: 12px 0 6px; font-size: 12px; color: var(--muted); }
.schema-meta strong { color: var(--ink); }
.schema-meta .right { text-align: right; }
.pager { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.schema-empty { padding: 40px 12px; text-align: center; color: var(--muted); background: var(--grey); border-radius: 8px; }
.big-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; }
.big-grid figure { margin: 0; display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 520px) { .big-grid { grid-template-columns: 1fr; } }

.total-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.total-big { font-size: 30px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.calc-status { margin-top: 6px; }
.lines { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.line { display: flex; justify-content: space-between; gap: 12px; }
.totals { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.totals .strong { font-weight: 800; font-size: 16px; border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; }

/* ---------- tabellen */
.table { border-collapse: collapse; width: 100%; font-size: 14px; }
.table th { text-align: left; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table th.num { text-align: right; }
.table td { padding: 11px 12px; border-bottom: 1px solid #EEEEEA; vertical-align: top; }
/* tabel als laatste in een kaart: geen lijn onder de laatste rij, anders staan er twee lijnen op elkaar (rij + kaartrand) */
.card > .table-wrap:last-child tbody tr:last-child > td, .card > .table:last-child tbody tr:last-child > td, .card > form:last-child > .table-wrap:last-child tbody tr:last-child > td { border-bottom: 0; }
.table tr.has-err td { background: #FFF6F2; }
.table tr[data-href] { cursor: pointer; }
.table tbody tr:hover td { background: #FAFAF8; }
.table.compact td { padding: 7px 0; }
.table.compact td + td { padding-left: 12px; }
.addr { display: grid; grid-template-columns: 1.2fr 1fr 0.8fr; gap: 10px; margin-top: 14px; }
.addr label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
@media (max-width: 520px) { .addr { grid-template-columns: 1fr 1fr; } }
.summary { width: 100%; border-collapse: collapse; margin: 16px 0; }
.summary td { padding: 10px 0; border-bottom: 1px solid var(--line); }
.summary .total td { font-weight: 800; }
.page-head { margin-bottom: 4px; }

/* ---------- account */
.auth { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

/* ---------- beheer */
.admin { gap: 20px; }
.period { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.period label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.period input[type=date] { width: auto; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.kpi strong { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.kpi:first-child { background: var(--navy); border-color: var(--navy); color: #fff; }
.kpi:first-child .mono-label, .kpi:first-child .muted { color: var(--muted-light); }
.charts { align-items: stretch; }
.chart { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 16px 16px 8px; }
.chart figcaption { font-weight: 700; margin-bottom: 8px; }
.chart svg { width: 100%; height: auto; display: block; }
.chart .grid { stroke: #E9E9E4; stroke-width: 1; }
.chart .axis { fill: var(--muted); font-size: 11px; font-family: var(--sans); }
.chart .bar:hover path { opacity: .8; }
.timeline { list-style: none; padding: 0; margin: 16px 0 18px; display: flex; flex-direction: column; gap: 0; }
.timeline li { position: relative; padding: 0 0 14px 22px; border-left: 2px solid var(--line); margin-left: 5px; }
.timeline li::before { content: ''; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--orange); }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.supplier-block { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.supplier-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 20px; background: var(--grey); border-bottom: 1px solid var(--line); }
.supplier-head h3 { margin: 0; }
.supplier-block > h3 { padding: 14px 20px; margin: 0; background: var(--grey); border-bottom: 1px solid var(--line); }
.supplier-block .table-wrap { padding: 0 8px; }
.supplier-block > .form-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 14px 20px 18px; }
.supplier-block > .form-row input[type=text] { flex: 1 1 260px; width: auto; }
.supplier-block + .supplier-block { margin-top: 4px; }

/* ---------- landingspagina */
.section { padding: 80px 0; }
.section.pt0 { padding-top: 0; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.section-head .h-xl { margin-bottom: 0; }
.cta-center { display: flex; justify-content: flex-start; margin-top: 32px; }
.cta-row.center { justify-content: center; }
@media (max-width: 640px) { .section { padding: 56px 0; } .band-grey { padding: 56px 0 32px; } .band-grey.pb { padding: 24px 0 56px; } }

.trust { border-bottom: 1px solid var(--line); background: #fff; }
.trust-in { display: flex; justify-content: space-between; gap: 12px 28px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 18px; font-size: 14px; font-weight: 600; }
@media (max-width: 960px) { .trust-in { display: grid; grid-template-columns: 1fr 1fr; } }
.trust-in span { display: inline-flex; align-items: flex-start; gap: 8px; line-height: 1.35; }
.trust-in span > svg { flex: none; margin-top: .1em; }
.trust-in svg { color: var(--orange); }

.pop { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 960px) { .pop { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pop-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; text-decoration: none; color: var(--ink); background: #fff; transition: border-color .15s, box-shadow .15s, transform .15s; }
.pop-card:hover { color: var(--ink); border-color: var(--line-2); box-shadow: 0 14px 30px rgba(13,30,39,.1); transform: translateY(-2px); }
.pop-img { aspect-ratio: 4 / 3; overflow: hidden; display: block; }
.pop-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pop-body { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; flex: 1; }
.pop-title { font-weight: 700; font-size: 16px; }
.pop-price { font-weight: 800; font-size: 17px; margin-top: 6px; }
.pop-price small { font-weight: 500; font-size: 12.5px; color: var(--muted); }
.pop-cta { margin-top: auto; padding-top: 12px; color: var(--orange-ink); font-weight: 700; font-size: 14px; }

.price-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.price-grid .lead { margin-bottom: 24px; }
.price-list { margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.price-list > div { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 16px 20px; align-items: center; }
.price-list > div + div { border-top: 1px solid var(--line); }
.price-list dt { font-weight: 700; }
.price-list dd { margin: 0; display: contents; color: var(--muted); font-size: 13.5px; }
.price-list dd > .pv { grid-column: 2; grid-row: 1 / span 2; font-weight: 800; font-size: 17px; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .price-grid { grid-template-columns: 1fr; gap: 28px; } }

.faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; padding-bottom: 40px; }
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq details { background: #fff; border-radius: 8px; padding: 0 20px; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 22px; font-weight: 400; color: var(--orange); flex: none; }
.faq details[open] summary::after { content: '–'; }
.faq details p { margin: 0 0 18px; color: var(--muted); }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; gap: 24px; } }

.final { padding: 80px 0; }
.final .h-xl { margin: 6px 0 12px; }
.final .lead-light { margin: 0; }
.final .cta-row { margin-bottom: 0; }

.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(13,30,39,.08); }
.sticky-cta[hidden] { display: none; }
@media (min-width: 761px) { .sticky-cta { display: none !important; } }

.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn-ghost-light:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.06); }
.hero-pick { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hero-pick .mono-label { color: var(--muted-light); }
.hero-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch-link { display: inline-flex; align-items: center; gap: 10px; height: var(--ctl); padding: 0 16px 0 5px; border-radius: 8px; background: rgba(13,30,39,.72); border: 1px solid rgba(255,255,255,.18); color: #fff; backdrop-filter: blur(4px); text-decoration: none; font-size: 14px; font-weight: 600; }
.swatch-link small { color: var(--muted-light); font-weight: 500; }
.swatch-link:hover { color: #fff; border-color: var(--orange); }
.swatch { width: 34px; height: 34px; border-radius: 6px; overflow: hidden; flex: none; }
.swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.swatch-all { padding-left: 16px; color: var(--orange); }
@media (max-width: 560px) { .hero-pick { margin-top: 32px; } .hero-swatches { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; } .swatch-link { flex: none; } }

/* ---------- footer */
.footer { background: var(--navy); color: #C9D5DC; font-size: 14px; border-top: 1px solid #2A4A60; }
.footer-in { max-width: var(--container); margin: 0 auto; padding: 44px 24px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 32px; }
@media (min-width: 961px) { .footer-in:not(:has(> :nth-child(5))) { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer a { color: #fff; }
.footer a:hover { color: var(--orange); }
.footer .mono-label { color: var(--orange); margin-bottom: 6px; }
@media (max-width: 960px) { .footer-in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 960px) { .footer-in > :first-child { grid-column: 1 / -1; } }
@media (max-width: 760px) { .footer-in { padding: 32px 16px; gap: 28px 16px; } }

@media print {
  .hdr, .hdr-steps, .footer, .no-print, .tabs-line, .row-actions { display: none !important; }
  body { font-size: 12px; }
  .card, .supplier-block { border: 0; }
}
@media (max-width: 560px) {
  .pop { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pop-body { padding: 12px; }
  .pop-title { font-size: 14.5px; }
  .pop-price { font-size: 15px; }
  .pop-price small { display: block; }
  .trust-in { display: grid; grid-template-columns: 1fr 1fr; font-size: 13px; }
  .section-head .btn { display: none; }
}
.pages { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; }
.hero-pick { border-top: 0; padding-top: 0; }
.hero-pick::before { content: ''; flex-basis: 100%; height: 1px; background: rgba(255,255,255,.12); margin-bottom: 4px; }

/* formulierregels: veld + knop naast elkaar */
.form-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.form-row > input, .form-row > select { flex: 1 1 200px; width: auto; }
form > table + .btn, form > .table-wrap + .btn { margin-top: 12px; }
.card > form + form { margin-top: 4px; }
.form-row > .btn-ghost, .period .btn-ghost { height: var(--ctl); }
.empty-state > * { margin: 0; }

/* footer-bedrijfsnaam */
.footer strong { color: #fff; font-weight: 700; }

/* beheer: instellingen */
.settings { display: flex; flex-direction: column; gap: 16px; }
.set-row { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 8px 24px; padding: 14px 0; border-top: 1px solid var(--line); }
.set-row:first-of-type { border-top: 0; }
.set-label label { font-weight: 700; display: block; margin-bottom: 4px; }
.set-label p { margin: 6px 0 0; }
.set-field { display: flex; flex-direction: column; gap: 8px; }
.hero-upload { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero-preview { width: 220px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--grey); display: flex; align-items: center; justify-content: center; padding: 0; }
.hero-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-preview .muted { padding: 8px; text-align: center; }
label.btn { cursor: pointer; }
@media (max-width: 760px) { .set-row { grid-template-columns: 1fr; } }
.facet-list > .check { flex: none; }

/* ---------- klantenservice */
.crumbs-light, .crumbs-light a { color: var(--muted-light); }
.crumbs-light { margin: 0 0 18px; }
.page-hero .lead-light { margin: 0 0 22px; }
.service-contact { padding: 48px 0 8px; }
.contact-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.contact-card { display: flex; flex-direction: column; gap: 6px; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); text-decoration: none; }
.contact-card strong { font-size: 16.5px; }
.contact-card span:last-child { color: var(--muted); font-size: 14px; }
a.contact-card:hover { color: var(--ink); border-color: var(--orange); }
@media (max-width: 960px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .contact-grid { grid-template-columns: 1fr; } }
.service { padding-top: 40px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 48px; }
.service-topic { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px; align-items: start; scroll-margin-top: 24px; }
.h-lg { font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; margin: 0; }
.service .faq details { border: 1px solid var(--line); }
.service .faq details p a { color: var(--orange-ink); font-weight: 600; }
@media (max-width: 860px) { .service-topic { grid-template-columns: 1fr; gap: 16px; } }
.biz .mono-label { color: var(--orange-ink); margin-bottom: 4px; }
.biz .h4 { font-size: 16px; }
.biz-list { list-style: none; padding: 0; margin: 4px 0 14px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.biz-list li { display: flex; gap: 8px; align-items: center; }
.biz-list li::before { content: ''; width: 14px; height: 8px; border-left: 2px solid var(--orange); border-bottom: 2px solid var(--orange); transform: rotate(-45deg) translateY(-2px); flex: none; }
/* winkelmandje in de menubalk: helemaal rond, oranje zodra er iets in zit */

/* ---------- account: klantgegevens */
.account-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.account-side { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 900px) { .account-grid { grid-template-columns: 1fr; } }
.form .h3 { margin: 0; }
.form > .h3 + label { margin-top: 12px; }
.form-grid { display: grid; gap: 0 12px; }
.form-grid > label { margin-top: 12px; }
.g-2 { grid-template-columns: 1fr 1fr; }
.g-3 { grid-template-columns: 1.2fr 1fr 1fr; }
.g-street { grid-template-columns: 2fr 1.4fr 1fr; }
@media (max-width: 560px) { .g-2, .g-street { grid-template-columns: 1fr; } .g-3 { grid-template-columns: 1fr 1fr; } }
.form-sub { margin: 20px 0 0; }
.form label.check.form-sub { flex-direction: row; font-weight: 500; }
.form-actions { margin-top: 18px; display: flex; gap: 8px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--grey); border-radius: 8px; /* 8px + 4px rand */ padding: 4px; height: var(--ctl); }
.seg label { position: relative; display: block; margin: 0; }
.seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; justify-content: center; height: 100%; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--muted); }
.seg input:checked + span { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(13,30,39,.15); }
.seg input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 1px; }
.seg-sm { width: auto; height: var(--ctl); grid-template-columns: auto auto; }
.seg-sm span { padding: 0 14px; font-size: 13.5px; }
.profile:has(input[name=type][value=particulier]:checked) .biz-fields { display: none; }
.profile:has(input[name=billSame]:checked) .bill-fields { display: none; }
.form .seg label { margin: 0; display: block; }

/* catalogus: één kaart per decor met dikte-keuze */
.mat-card { display: flex; flex-direction: column; }
.mat-card .card-link { height: auto; flex: 1; }
.mat-card .card-body { padding-bottom: 8px; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 16px 16px; flex-wrap: wrap; }
.card-foot .card-price { margin: 0; }
.thick-chips { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tchip { min-width: 32px; height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.tchip:hover { border-color: var(--ink); }
.tchip.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.tchip.is-static { cursor: default; }
.tchip-unit { font-size: 12.5px; color: var(--muted); margin-left: 2px; }

/* incl./excl. btw-schakelaar in de menubalk (compact) */
.vat-switch { display: inline-flex; align-items: center; padding: 2px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); height: 26px; }
.vat-switch button { border: 0; background: transparent; color: #A9B8C2; font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 0 8px; height: 100%; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.vat-switch button:hover { color: #fff; }
.vat-switch button.is-on { background: rgba(255,255,255,.14); color: #fff; }
.vat-switch a { color: #A9B8C2; font-size: 11px; font-weight: 600; letter-spacing: .04em; padding: 0 8px; height: 100%; border-radius: 999px; display: inline-flex; align-items: center; text-decoration: none; }
.vat-switch a:hover { color: #fff; }
.vat-switch a.is-on { background: rgba(255,255,255,.14); color: #fff; }
.hdr-panel-vat .vat-switch a { font-size: 11.5px; padding: 0 10px; }
.hdr-panel-lang { padding-top: 0; }
.lang-ask { position: fixed; left: 16px; bottom: 16px; z-index: 60; max-width: 360px; padding: 14px 16px; border-radius: 12px; background: var(--navy); color: #fff; box-shadow: 0 16px 40px rgba(13,30,39,.3); }
.lang-ask p { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.lang-ask-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lang-ask .lang-ask-keep { background: transparent; border-color: rgba(255,255,255,.3); color: #fff; }
.lang-ask .lang-ask-keep:hover { border-color: #fff; }
@media (max-width: 640px) { .lang-ask { left: 12px; right: 12px; bottom: 12px; max-width: none; } }
.card-m2 { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.vat-unit { font-size: 11px; color: #7F95A3; padding: 0 8px 0 4px; }
/* btw-controle (VIES) */
.g-vat { grid-template-columns: 1fr; }
.vat-row { display: flex; gap: 8px; }
.vat-row input { flex: 1; }
.vat-row .btn { flex: none; }
.vat-status { margin: 8px 0 0; color: var(--muted); }
.vat-status.ok { color: var(--ok); font-weight: 600; }
.vat-status.bad { color: var(--err); font-weight: 600; }

/* ---------------------------------------------------------------- landingspagina's per materiaal */
.btn-sm { height: var(--ctl-sm); padding: 0 12px; font-size: 13px; }
.nowrap { white-space: nowrap; }
.lp-facts { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.lp-facts li { display: flex; flex-direction: column; gap: 2px; min-width: 128px; background: rgba(13,30,39,.55); border: 1px solid rgba(255,255,255,.16); border-radius: 8px; padding: 10px 14px; }
.lp-facts strong { color: #fff; font-size: 18px; font-weight: 700; white-space: nowrap; }
.lp-facts span { font-size: 12.5px; color: #C9D5DD; }
.lp-facts strong .money { font: inherit; color: inherit; }
.lp-intro { max-width: 780px; margin: -12px 0 28px; }
.lp-types { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-types.lp-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-types.lp-n1 { grid-template-columns: minmax(0, 1fr); }
.lp-types.lp-n1 .lp-type { flex-direction: row; }
.lp-types.lp-n1 .lp-type-img { flex: 0 0 380px; aspect-ratio: auto; }
@media (max-width: 960px) { .lp-types, .lp-types.lp-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lp-type { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.lp-type-img { display: block; aspect-ratio: 16 / 7; overflow: hidden; }
.lp-type-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-type-body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; flex: 1; }
.lp-type-body h3 { font-size: 18px; margin: 0; }
.lp-type-body h3 a { color: var(--ink); text-decoration: none; }
.lp-type-body h3 a:hover { color: var(--orange-ink); }
.lp-type-body > p { margin: 0; color: var(--muted); }
.lp-type-specs { margin: 0; font-size: 13.5px; display: grid; gap: 4px; }
.lp-type-specs div { display: grid; grid-template-columns: 82px 1fr; gap: 8px; }
.lp-type-specs dt { color: var(--muted); }
.lp-type-specs dd { margin: 0; }
.lp-tags { list-style: none; margin: 2px 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lp-tags li { font-size: 12px; font-weight: 600; background: var(--grey); border-radius: 999px; padding: 3px 10px; }
.lp-type-body > .btn { align-self: flex-start; margin-top: auto; }
.lp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.lp-split > .card { overflow: hidden; }
.lp-band { padding-bottom: 72px; }
.lp-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; margin-top: 24px; }
.lp-mini h3 { font-size: 15px; margin: 0 0 4px; }
.lp-mini p { margin: 0; color: var(--muted); font-size: 14.5px; }
.lp-table caption { text-align: left; padding: 14px 12px 4px; }
.lp-table td:first-child { width: 42%; }
.lp-table tbody tr:last-child td { border-bottom: 0; }
.lp-tips { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 8px; }
.lp-tips p { margin: 0; color: var(--muted); font-size: 14.5px; }
.lp-why { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; }
.lp-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 8px; }
.lp-pc .mono-label, .lp-sum .mono-label { color: var(--muted-light); margin-bottom: 10px; }
.lp-plus, .lp-min { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; color: #D3DEE5; font-size: 14.5px; }
.lp-plus li, .lp-min li { position: relative; padding-left: 22px; }
.lp-plus li::before, .lp-min li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.lp-plus li::before { content: '+'; color: var(--orange); }
.lp-min li::before { content: '–'; color: var(--muted-light); }
.lp-plus strong, .lp-min strong { color: #fff; }
.lp-sum { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 20px 22px; align-self: start; }
.lp-sum dl { margin: 0; display: grid; gap: 0; }
.lp-sum dl div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: 14px; }
.lp-sum dl div:first-child { border-top: 0; }
.lp-sum dt { color: var(--muted-light); }
.lp-sum dd { margin: 0; color: #fff; }
.lp-rel-label { margin-top: 22px; }
.lp-rel { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.lp-rel a { font-weight: 600; text-decoration: none; }
@media (max-width: 960px) { .lp-split, .lp-why { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 640px) { .lp-mini, .lp-pc { grid-template-columns: 1fr; } .lp-types, .lp-types.lp-n2 { grid-template-columns: 1fr; } .lp-types.lp-n1 .lp-type { flex-direction: column; } .lp-types.lp-n1 .lp-type-img { min-height: 0; aspect-ratio: 16 / 7; } .lp-facts li { min-width: 0; flex: 1 1 40%; } }

/* ---------------------------------------------------------------- offertes */
.offer-panel { margin-bottom: 16px; border-color: var(--orange); }
.offer-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 12px; }
.offer-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; }
.offer-form .span2 { grid-column: 1 / -1; margin: 0; }
.quote-note { background: var(--grey); border-radius: 8px; padding: 10px 12px; margin: 0; }
.copy-link { width: 100%; max-width: 640px; height: var(--ctl-sm); font-family: var(--mono); font-size: 12px; margin-top: 4px; }
.offer-msg p:last-child { margin: 6px 0 0; }
.line.discount { color: var(--ok); }
.staffel-tip { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: #FFF4EC; color: #8A3A08; }
.staffel-tip + .staffel-tip { margin-top: 6px; }
.staffel-note { color: var(--ok); font-weight: 500; margin-top: 2px; }
.staffel-note::before { content: '✓ '; }
.quote-box { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; display: grid; gap: 10px; }
.quote-box label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; }
.quote-box textarea { min-height: 70px; }
.quote-hint { background: var(--orange-soft); color: var(--orange-ink); border-radius: 8px; padding: 10px 12px; font-size: 14px; margin: 0; }
@media (max-width: 640px) { .offer-form { grid-template-columns: 1fr; } }
@media print { .hdr, .hdr-steps, .footer, .stack .btn, .notice { display: none !important; } .app-top { background: #fff !important; color: var(--ink) !important; } .app-top h1, .app-top .lead-light { color: var(--ink) !important; } }

/* zaaglijst: selecteren en verplaatsen */
.parts td.sel-cell, .parts th.sel-cell { width: 58px; padding-left: 10px; white-space: nowrap; }
.row-pick { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.sel-box { width: 16px; height: 16px; accent-color: var(--orange); cursor: pointer; margin: 0; }
.parts tr.is-sel td { background: var(--orange-soft); }
.parts tr.is-sel .badge { background: var(--orange); }
.parts tr.is-hl:not(.is-sel) td { background: color-mix(in srgb, var(--orange-soft) 55%, #fff); }
.parts tr.is-hl .badge { background: var(--orange); }
.sel-bar { display: grid; gap: 6px; background: var(--navy); color: #fff; border-radius: 14px; padding: 6px 6px 12px 14px; margin-bottom: 10px; } /* knop 8 + ruimte 6 */
.sel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 40px; }
.sel-q { color: #A9B8C2; font-size: 13.5px; }
.sel-head .btn-ghost { margin-left: auto; }
.sel-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 8px; align-items: center; padding-right: 8px; }
.sel-row .sel-label { color: #C9D5DC; font-size: 13px; font-weight: 600; }
.sel-opts { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 640px) { .sel-row { grid-template-columns: minmax(0, 1fr); gap: 6px; } .sel-q { flex-basis: 100%; order: 3; } }
.sel-bar .muted { color: #A9B8C2; }
.sel-bar .grow { flex: 1; }
.sel-bar .btn-ghost { background: transparent; border-color: rgba(255,255,255,.3); color: #fff; }
.sel-bar .btn-ghost:hover { border-color: #fff; color: #fff; }
.move-chip { display: inline-flex; align-items: center; gap: 7px; height: var(--ctl-sm); padding: 0 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none; }
.move-chip:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.move-chip.ghost { border-style: dashed; background: transparent; }
.move-chip .dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); }
.sel-hint { margin: -4px 0 8px; }
.move-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }

/* winkelmandje: plaaticoontje en kantenband als (niet aanpasbare) knopjes */
.cart-mat { display: inline-flex; align-items: center; gap: 10px; }
.mat-ico { width: 34px; height: 34px; border-radius: 6px; overflow: hidden; flex: none; border: 1px solid rgba(13,30,39,.12); display: inline-block; }
.mat-ico img { width: 100%; height: 100%; object-fit: cover; display: block; }
.edge-btn.ro { width: 26px; height: 26px; font-size: 12px; cursor: default; border-width: 1px; border-color: var(--line); }
.edge-btn.ro:hover { border-style: dashed; border-color: var(--line); }
.edge-btn.ro.is-on { background: #E6ECF0; border: 1px solid #C9D5DC; color: var(--navy); }
.edge-th { width: 34px; padding-left: 2px !important; padding-right: 2px !important; }
.cart-name { max-width: 220px; overflow-wrap: anywhere; }
.table th.center, .table td.center { text-align: center; }

/* catalogus: knop onderaan de kaart. Wit = nog niet in de zaaglijst, oranje = staat erin (met de diktes) */
.card-add { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; height: var(--ctl); margin-top: 12px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line-2); background: #fff; color: var(--navy); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-add:hover { border-color: var(--navy); }
.card-add .add-on { display: none; }
.card-add[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.card-add[aria-pressed="true"]:hover { background: var(--navy-3); border-color: var(--navy-3); }
.card-add[aria-pressed="true"] .add-on { display: inline; }
.card-add[aria-pressed="true"] .add-off { display: none; }
.card-add .add-t { font-weight: 500; opacity: .92; }
.card-add:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.card-foot .card-add { flex: 1 1 100%; }
/* diktes op de kaart: aan/uit-knoppen, oranje = staat in uw zaaglijst */
.chips-label { flex: 1 1 100%; margin: 0 0 -2px; font-size: 10.5px; }
.mat-card .tchip.is-in { background: var(--navy); border-color: var(--navy); color: #fff; }
.mat-card .tchip.is-in:hover { background: var(--navy-3); border-color: var(--navy-3); }
/* gekozen dikte: vinkje ervoor, zodat zichtbaar is dat er meerdere aan kunnen staan */
.mat-card .tchip.is-in::before { content: ''; width: 9px; height: 5px; margin: -2px 5px 0 -1px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); flex: none; }
.mat-card .tchip:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.card-t { font-weight: 600; color: var(--ink); white-space: nowrap; }

/* zaaglijst: tabbladen per plaat (materiaal + dikte) */
.sheet-tabs { align-items: stretch; }
.sheet-tab { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; text-align: left; }
.tab-ico { width: 30px; height: 30px; border-radius: 6px; overflow: hidden; flex: none; border: 1px solid rgba(13,30,39,.14); }
.tab-ico img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tab-txt { display: flex; flex-direction: column; line-height: 1.2; }
.tab-name { font-weight: 700; font-size: 14px; color: var(--navy); }
.tab-sub { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.sheet-tab.is-on .tab-sub { color: var(--orange-ink); }
.tab-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--grey); color: var(--navy); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.sheet-tab.is-on .tab-n { background: var(--orange); color: #fff; }
.tab-add { align-self: center; margin-left: 6px; font-size: 13.5px; font-weight: 600; color: var(--muted); text-decoration: none; padding: 6px 10px; border-radius: 8px; border: 1px dashed var(--line-2); white-space: nowrap; }
.tab-add:hover { color: var(--navy); border-color: var(--navy); }
.thick-row { display: grid; grid-template-columns: minmax(64px, max-content) minmax(0, 1fr); column-gap: 8px; align-items: start; margin-top: 10px; }
.thick-row .mono-label { line-height: 32px; }
/* alleen de diktes (zoals op de materiaalkaarten); de prijs per plaat staat in de regel erboven en wisselt mee */
.thick-row .thick-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.thick-row .tchip { position: relative; height: 32px; padding: 0 10px; line-height: 1; white-space: nowrap; }
/* dikte die al in uw zaaglijst staat: oranje stipje rechtsboven */
.thick-row .tchip.is-has::after { content: ''; position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 999px; background: var(--orange); box-shadow: 0 0 0 2px #fff; }
.mat-price { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.mat-price strong { color: var(--ink); font-size: 15px; }
.size-tip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; padding: 12px 14px; border-radius: 8px; background: var(--info-soft); border: 1px solid #BFE0EE; }
.size-tip > div { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; }
.size-tip-ico { font-size: 18px; }
.sel-label { color: #A9B8C2; font-size: 13px; }

.page-nums { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
.page-num { min-width: var(--ctl-sm); height: var(--ctl-sm); padding: 0 8px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; color: var(--navy); text-decoration: none; border: 1px solid transparent; }
a.page-num:hover { border-color: var(--line-2); }
.page-num.is-on { background: var(--navy); color: #fff; }
.page-gap { color: var(--muted); padding: 0 2px; }


.card-brand { display: flex; align-items: center; gap: 8px; min-height: 16px; }
.brand-logo { height: 14px; width: auto; display: block; }
.card-brand .mono-label { margin: 0; }
.mat-brand { height: 16px; width: auto; display: block; margin-bottom: 4px; }
.mat .mat-brand { width: auto; height: 16px; max-width: 120px; object-fit: contain; border: 0; align-self: flex-start; }
.import-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.product-brand { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.product-brand .brand-logo { height: 22px; }
.product-brand .eyebrow { margin: 0; }

/* zaaglijst: aantal met - en +, gemengd neutraal, logo tegen de scheidingslijn, geen dubbele rand */
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 8px; height: var(--ctl-sm); overflow: hidden; background: #fff; }
.stepper .num-in.q { border: 0; width: 44px; min-width: 0 !important; text-align: center; height: 100%; padding: 0; -moz-appearance: textfield; border-radius: 0; }
.stepper .num-in.q::-webkit-outer-spin-button, .stepper .num-in.q::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper .num-in.q:focus { outline: none; box-shadow: none; }
.stepper:focus-within { border-color: var(--navy); }
.step-btn { width: 26px; height: 100%; border: 0; background: var(--grey); color: var(--navy); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; line-height: 1; }
.step-btn:hover { background: #E6ECF0; }
.step-btn[disabled] { opacity: .35; cursor: default; }
.parts tr[data-row] td:nth-child(5) { width: 104px; }
.edge-btn.is-mixed, .dir-btn.is-mixed { background: #fff; border: 1.5px dashed var(--line-2); color: var(--muted); }
.mat .mat-brand { margin: 0 0 0 auto; align-self: center; height: 18px; max-width: 110px; }
.mat .mat-brand + .band { margin-left: 0; }
.parts tbody tr:nth-last-child(-n+2) td { border-bottom: 0; }
.footer-part { font-size: 12.5px; color: #7F95A3; }
@media (max-width: 1000px) { .page-wide .col-main, .page-wide .col-side { flex-basis: 100%; max-width: 100%; } }
.col-main > section, .table-wrap { max-width: 100%; min-width: 0; }
.table-wrap { position: relative; } /* absolute elementen (sr-tekst) blijven binnen de scrollbare tabel */
.related { margin-top: 56px; }
.related .h2 { margin-bottom: 16px; }


/* projecten */
.proj { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.proj-label { font-size: 14px; font-weight: 600; color: var(--muted); }
.proj input { height: var(--ctl-sm); width: 220px; }
.proj select { height: var(--ctl-sm); max-width: 240px; font-weight: 600; }
.proj-ref { display: inline-flex; align-items: center; gap: 8px; }
.proj-more { border: 0; background: none; padding: 0 4px; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; white-space: nowrap; }
.proj-more:hover { color: var(--ink); text-decoration-color: currentColor; }

/* ---------------------------------------------------------------- mobiel (≤ 640px) */
@media (max-width: 640px) {
  .app-top { padding-top: 14px; }
  .app-top h1 { font-size: 26px; }
  .app-top .lead-light { font-size: 15px; }
  /* zaaglijst-werkbalk */
  .toolbar { gap: 10px 8px; }
  .toolbar .muted.small { display: none; } /* "Exporteren:" — de knop zegt genoeg */
  .proj { width: 100%; order: 9; flex-wrap: nowrap; }
  .proj.is-multi { flex-wrap: wrap; }
  .proj input { flex: 1 1 120px; width: auto; min-width: 0; }
  .proj-ref { flex: 1 1 auto; min-width: 0; }
  .proj .btn-ghost { flex: none; }
  /* materiaalblok compact */
  .mat { display: grid; grid-template-columns: 56px 1fr; gap: 4px 12px; align-items: start; position: relative; }
  .mat-img { width: 56px; height: 56px; grid-row: 1 / span 2; }
  .mat-info { display: contents; }
  .mat-info > strong { grid-column: 2; padding-right: 76px; }
  .mat-info > .muted, .mat-info > .mat-price { grid-column: 2; }
  .mat .mat-brand { position: absolute; top: 18px; right: 16px; height: 14px; margin: 0; }
  .mat .thick-row { grid-column: 1 / -1; margin-top: 10px; grid-template-columns: minmax(52px, max-content) minmax(0, 1fr); }
  .thick-row .tchip { padding: 0 9px; font-size: 13px; }
  .mat .band { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
  /* onderdelen als kaartjes per regel */
  table.parts { min-width: 0; }
  table.parts thead tr:first-child { display: none; }
  table.parts, table.parts tbody, table.parts thead { display: block; }
  table.parts tr[data-row], table.parts tr.sub { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) 44px; gap: 8px 6px; padding: 12px; border-bottom: 1px solid var(--line); align-items: end; }
  table.parts tr[data-row] td, table.parts tr.sub td { display: block; padding: 0; border: 0; width: auto !important; min-width: 0 !important; }
  table.parts td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; color: var(--muted); font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; text-align: center; }
  table.parts td.c-l::before, table.parts td.c-w::before, table.parts td.c-q::before { text-align: left; }
  table.parts .sel-cell { grid-column: 1; grid-row: 1; align-self: center; }
  table.parts .c-name { grid-column: 2 / 5; grid-row: 1; }
  table.parts .c-name input { width: 100%; }
  table.parts .actions { grid-column: 5 / 7; grid-row: 1; display: flex; justify-content: flex-end; gap: 6px; align-self: center; }
  table.parts .c-l { grid-column: 1 / 3; grid-row: 2; }
  table.parts .c-w { grid-column: 3 / 5; grid-row: 2; }
  table.parts .c-q { grid-column: 5 / 7; grid-row: 2; }
  table.parts .c-l input, table.parts .c-w input { width: 100%; min-width: 0 !important; }
  table.parts .stepper { width: 100%; }
  table.parts .stepper .num-in.q { flex: 1; width: auto; }
  table.parts tr[data-row] .edge-cell, table.parts tr[data-row] .dir-cell { grid-row: 3; text-align: center; }
  table.parts tr.sub .sub-sel { display: none; }
  table.parts tr.sub .sub-help { grid-column: 1 / -1; grid-row: 1; }
  table.parts tr.sub .edge-cell, table.parts tr.sub .dir-cell { grid-row: 2; text-align: center; }
  table.parts tr.sub .edge-head { display: flex; justify-content: center; font-size: 11px; color: var(--muted); font-family: var(--mono); margin-bottom: 3px; }
  table.parts tr.sub .edge-head + * { margin: 0 auto; }
  table.parts tr.sub > td:last-child:empty { display: none; }
  table.parts tr.err-row:not([hidden]) { display: block; padding: 0 12px 10px; }
  table.parts tr.err-row td { display: block; padding: 0; border: 0; }
  table.parts tr.err-row td:first-child { display: none; }
  .row-actions { flex-wrap: wrap; }
}

/* winkelmandje: betaalwijze (zakelijk op rekening) */
.pay-choice { border: 0; padding: 0; margin: 18px 0 12px; display: grid; gap: 8px; }
.pay-choice legend { font-size: 13px; font-weight: 700; margin-bottom: 6px; padding: 0; }
.pay-opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 8px; cursor: pointer; }
.pay-opt > span { display: flex; flex-direction: column; line-height: 1.3; }
.pay-opt input { accent-color: var(--orange); margin-top: 3px; }
.pay-opt.is-on { border-color: var(--orange); background: var(--orange-soft); }
/* winkelmandje: projecten kiezen */
.proj-pick-cart { margin-bottom: 16px; }
.proj-checks { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 8px; }
.proj-check { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border: 1px solid var(--line-2); border-radius: 8px; cursor: pointer; }
.proj-check > span { display: flex; flex-direction: column; line-height: 1.25; }
.proj-check input { accent-color: var(--orange); width: 16px; height: 16px; }
.proj-check.is-on { border-color: var(--orange); background: var(--orange-soft); }
.proj-row td { background: var(--grey); font-weight: 700; font-size: 13px; padding: 6px 12px; }
.parts tr.sub .edge-head { display: flex; justify-content: center; margin-bottom: 4px; } .parts tr.sub td.edge-cell { vertical-align: bottom; }
.parts tr.sub td.sub-help { text-align: right; vertical-align: bottom; padding-bottom: 14px; padding-right: 10px; } @media (max-width: 640px) { .parts tr.sub td.sub-help { text-align: left; padding: 0; } }
.footer-logo { width: 240px; height: auto; display: block; margin-bottom: 4px; }
.lp-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 18px 0 0; font-size: 14px; color: #A9B8C2; }
.lp-links a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 3px; }
.lp-links a:hover { text-decoration-color: var(--orange); }

/* cookiebanner (consent.js) */
.consent { position: fixed; z-index: 1000; left: 16px; right: 16px; bottom: 16px; display: flex; justify-content: center; pointer-events: none; }
.consent-in { pointer-events: auto; width: 100%; max-width: 560px; background: #fff; color: var(--ink); border: 1px solid var(--line, #E3E5E6); border-radius: 8px; box-shadow: 0 12px 40px rgba(13, 30, 39, .22); padding: 18px 20px; }
.consent-title { margin: 0 0 6px; font-weight: 700; font-size: 16px; }
.consent-text { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--muted, #4A5A63); }
.consent-text a { color: var(--ink); }
.consent-opts { display: grid; gap: 8px; margin: 0 0 14px; }
.consent-opts[hidden] { display: none; }
.consent-opt { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; padding: 8px 10px; border: 1px solid var(--line, #E3E5E6); border-radius: 8px; cursor: pointer; }
.consent-opt input { margin-top: 3px; accent-color: var(--orange); }
.consent-opt small { color: var(--muted, #4A5A63); }
.consent-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 520px) { .consent { left: 8px; right: 8px; bottom: 8px; } .consent-btns .btn { flex: 1 1 100%; } }

/* gratis stalen */
.sample-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 4px; }
.sample-cta .btn { display: inline-flex; align-items: center; gap: 8px; }
.sample-cta .btn.is-on { border-color: var(--orange); color: var(--orange-ink); background: #FFF4EC; }
.sample-list { list-style: none; margin: 8px 0 0; padding: 0; }
.sample-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line, #E3E5E6); }
.sample-list li:last-child { border-bottom: 0; }
.sample-list li > a { flex: 1; color: var(--ink); font-weight: 500; text-decoration: none; }
.sample-list li > a:hover { text-decoration: underline; }
.sample-del { font-size: 20px; line-height: 1; padding: 2px 8px; }
.samples-card .h2-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.addr2 { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.product-cta .sample-cta { width: 100%; margin: 8px 0 0; padding-top: 14px; border-top: 1px solid rgba(13, 30, 39, .1); }
.sample-cta .btn:not(.is-on) { background: #fff; }
.decor-text p { margin: 0 0 10px; }

/* homepage: soorten plaat */
.soorten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.soort-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; text-decoration: none; color: var(--ink); background: #fff; transition: border-color .15s, box-shadow .15s, transform .15s; }
.soort-card:hover { color: var(--ink); border-color: var(--line-2); box-shadow: 0 14px 30px rgba(13,30,39,.1); transform: translateY(-2px); }
.soort-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.soort-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.soort-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.soort-name { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.soort-name::after { content: ' ›'; color: var(--orange); }
.soort-text { color: var(--muted, #4A5A63); font-size: 14px; line-height: 1.45; flex: 1; }
.soort-meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--muted, #4A5A63); border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.soort-meta strong { color: var(--ink); font-size: 15px; }
.soort-apps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 0; }
.section-tight { padding-top: 0; }
/* twee witte secties na elkaar: niet twee keer de witruimte */
.section-tight + [class="section"] { padding-top: 0; }
.pop-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.pop-6 .pop-img { aspect-ratio: 1 / 1; }
.pop-sub { font-size: 12px; color: var(--muted, #4A5A63); }
@media (max-width: 1080px) { .pop-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 960px) { .soorten { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .soorten { grid-template-columns: 1fr; } .soort-img { aspect-ratio: 21 / 9; } .pop-6 { grid-template-columns: 1fr 1fr; } }
.pop-6 .pop-flat { aspect-ratio: 4 / 3; }
.pop-6 .pop-flat img { width: 100%; height: 100%; object-fit: cover; }
.pop-6 .pop-body { gap: 4px; padding: 12px 14px 14px; }
.pop-6 .pop-price small.block { display: block; font-weight: 400; }

/* soorten in het donkere blok */
.tiles-soort { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tile-soort { align-items: stretch; min-height: 150px; padding: 18px 12px 12px 20px; }
.tile-soort > span:first-child { display: flex; flex-direction: column; gap: 6px; }
.tile-soort .tile-name { font-size: 19px; font-weight: 800; }
.tile-arrow { color: var(--orange); }
.tile-text { display: block; font-size: 13.5px; font-weight: 400; line-height: 1.45; color: #C9D5DC; flex: 1; }
.tile-soort .tile-img { width: 120px; height: auto; min-height: 120px; }
.tile-soort:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); }
@media (max-width: 1080px) { .tiles-soort { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .tiles-soort { grid-template-columns: 1fr; } .tile-soort .tile-img { width: 96px; min-height: 96px; } }
/* kantenband-kop: knoppen gelijk uitlijnen (ook als er een cijfer in staat), koppen gecentreerd boven de knoppen */
.edge-btn, .dir-btn { vertical-align: middle; }
.parts th.center { text-align: center; }
.parts tr.sub td.sub-help { padding-bottom: 16px; }
@media (max-width: 640px) { .parts tr.sub td.sub-help { padding-bottom: 0; } }
/* beheer: order verwijderen */
.danger-zone { border-color: #F1C9C4; margin-top: 16px; }
.danger-zone summary { cursor: pointer; }
.danger-zone .form-row { align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.danger-zone input { display: block; margin-top: 4px; }
.btn-danger { background: #B42318; border-color: #B42318; color: #fff; }
.btn-danger:hover { background: #912018; border-color: #912018; color: #fff; }
/* platen in de zaaglijst als losse bubbels (in plaats van tabbladen met een streep) */
.sheet-tabs { gap: 8px; padding: 8px; }
.sheet-tabs .tab-wrap { border: 1px solid var(--line-2); border-radius: 8px; background: #fff; padding: 0 4px 0 0; transition: border-color .15s, background .15s; }
.sheet-tabs .tab-wrap:hover { border-color: var(--navy); }
.sheet-tabs .sheet-tab { height: auto; min-height: 48px; padding: 7px 8px 7px 8px; border-bottom: 0; border-radius: 8px; }
.sheet-tabs .tab-wrap:has(.sheet-tab.is-on) { border-color: var(--orange); background: #FFF4EC; }
.sheet-tabs .tab-x { width: 26px; height: 26px; font-size: 16px; }
.sheet-tabs .tab-add { align-self: stretch; display: inline-flex; align-items: center; margin-left: 0; padding: 0 16px; border-radius: 8px; min-height: 48px; }
/* staal: uitleg onder de knop */
.sample-cta { flex-direction: column; align-items: flex-start; gap: 6px; }
/* bubbels: elke binnenradius = buitenradius - ruimte ertussen, zodat alle hoeken evenwijdig lopen:
   balk 14 (1 rand + 5 ruimte) → bubbel 8 (1 rand + 4 ruimte) → foto 3 */
.sheet-tabs { border-radius: 14px; padding: 5px; }
.sheet-tabs .tab-wrap { border-radius: 8px; padding: 0 6px 0 0; }
.sheet-tabs .sheet-tab { padding: 4px 10px 4px 4px; border-radius: 7px; min-height: 46px; }
.sheet-tabs .tab-ico { width: 38px; height: 38px; border-radius: 3px; }
.sheet-tabs .tab-add { border-radius: 8px; min-height: 48px; }
.sheet-tabs .tab-x { border-radius: 999px; }
/* registreren: bedrijfsnaam alleen bij zakelijk */
.form:has(input[name=type][value=particulier]:checked) .biz-only { display: none; }
.narrow-sm.auth-wide { max-width: 640px; }
/* inloggen / account aanmaken: lucht boven de knop */
.narrow-sm .form > button.btn { margin-top: 24px; margin-bottom: 8px; align-self: flex-start; }
.narrow-sm .form > .seg { margin-bottom: 4px; }

/* ---------------------------------------------------------------- kasten op maat */
.kast-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.kast-tile { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; text-decoration: none; color: var(--ink); background: #fff; transition: border-color .15s, box-shadow .15s; }
.kast-tile:hover { border-color: var(--ink); box-shadow: 0 6px 20px rgba(13,30,39,.08); color: var(--ink); }
.kast-tile-img { display: block; aspect-ratio: 3 / 2; background: linear-gradient(#F7F7F4, #ECECE7); }
.kast-tile-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.kast-tile-body { display: flex; flex-direction: column; gap: 6px; padding: 16px; flex: 1; }
.kast-tile-body strong { font-size: 17px; }
.kast-tile-body > span { color: var(--muted); font-size: 14px; }
.kast-tile-body .kast-tile-go { color: var(--orange-ink); font-weight: 600; margin-top: auto; padding-top: 6px; }
.kast-tiles, .kast-tiles-home { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .kast-tiles, .kast-tiles-home { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kast-tiles { grid-template-columns: 1fr; } }
.kast-hero { padding-bottom: 40px; }
.kast-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.kast-hero-img { border-radius: 8px; background: radial-gradient(ellipse at 50% 60%, #F4F4F0 0%, #E3E4DF 70%); overflow: hidden; aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; }
.kast-hero-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (max-width: 900px) { .kast-hero-in { grid-template-columns: 1fr; } }
.kast-presets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .kast-presets { grid-template-columns: 1fr; } }
.kast-preset { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; text-decoration: none; color: var(--ink); background: #fff; }
.kast-preset:hover { border-color: var(--ink); color: var(--ink); box-shadow: 0 6px 20px rgba(13,30,39,.08); }
.kast-preset-img { display: block; aspect-ratio: 3 / 2; background: linear-gradient(#F7F7F4, #ECECE7); }
.kast-preset-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.kast-preset-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; font-size: 14px; }
.kast-preset-name { font-weight: 700; font-size: 17px; }
.kast-preset-price { font-size: 20px; font-weight: 700; margin-top: auto; padding-top: 6px; }
.kast-preset-price small { font-size: 12px; font-weight: 500; color: var(--muted); }
.kast-grid { display: grid; grid-template-columns: minmax(340px, 1fr) minmax(0, 1.25fr); gap: 24px; align-items: start; }
/* zoals de zaaglijst: instellingen links, voorbeeld en prijs rechts */
.kast-form { grid-column: 1; grid-row: 1; }
.kast-view { grid-column: 2; grid-row: 1; }
[data-secs] { display: flex; flex-direction: column; gap: 12px; }
.kast-view { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; }
.kast-canvas-wrap { position: relative; background: linear-gradient(#F7F7F4, #ECECE7); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.kast-canvas { display: block; width: 100%; height: min(54vh, 520px); touch-action: none; cursor: grab; }
.kast-canvas:active { cursor: grabbing; }
.kast-view-btns { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.kast-hint { position: absolute; bottom: 8px; right: 12px; margin: 0; font-size: 12px; color: var(--muted); pointer-events: none; }
.kast-sum { border: 1px solid var(--line); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: #fff; }
.kast-price { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; }
.kast-price strong { display: block; font-size: 28px; line-height: 1.1; }
.kast-price .small { text-align: right; }
.kast-lines summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.kast-lines table { width: 100%; margin-top: 8px; font-size: 13px; border-collapse: collapse; }
.kast-lines td, .kast-lines th { padding: 5px 6px 5px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.kast-lines .num { text-align: right; white-space: nowrap; }
.kast-proto { margin: 0; }
.notice-warn ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.kast-form { display: flex; flex-direction: column; gap: 12px; }
.kcard { border: 1px solid var(--line); border-radius: 8px; padding: 16px; background: #fff; }
.kcard h2 { font-size: 16px; margin: 0 0 10px; }
.kdet summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.kdet summary::-webkit-details-marker { display: none; }
.kdet summary h2 { margin: 0; }
.kdet summary::after { content: '▾'; color: var(--muted); }
.kdet[open] summary::after { content: '▴'; }
.kdet[open] summary { margin-bottom: 10px; }
.kdet summary .muted { margin-left: auto; }
.kf { margin: 0 0 12px; }
.kf:last-child { margin-bottom: 0; }
.kf-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.kf-note { margin: 6px 0 0; font-size: 12.5px; color: var(--info); background: var(--info-soft); padding: 6px 10px; border-radius: 8px; }
.kf select { width: 100%; height: var(--ctl); border: 1px solid var(--line-2); border-radius: 8px; padding: 0 10px; font: inherit; background: #fff; }
.kseg { display: flex; flex-wrap: wrap; gap: 6px; }
.kseg button { flex: 1 1 auto; min-height: var(--ctl-sm); padding: 4px 12px; border-radius: 8px; border: 1px solid var(--line-2); background: #fff; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--ink); }
.kseg button:hover { border-color: var(--ink); }
.kseg button.is-on { border-color: var(--orange); background: #FFF4EC; }
.slider { display: flex; align-items: center; gap: 12px; }
.slider input[type=range] { flex: 1; accent-color: var(--orange); }
.slider-val { display: inline-flex; align-items: center; gap: 4px; }
.slider-val input { width: 76px; height: var(--ctl-sm); border: 1px solid var(--line-2); border-radius: 8px; padding: 0 8px; font: inherit; text-align: right; }
.slider-val small { color: var(--muted); }
.mat-list { display: flex; flex-direction: column; gap: 8px; }
.mat-pick { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px 8px 8px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; font: inherit; text-align: left; cursor: pointer; color: var(--ink); }
.mat-pick:hover { border-color: var(--ink); }
.mat-sw { width: 40px; height: 40px; flex: none; border-radius: 6px; background-size: cover; background-position: center; border: 1px solid rgba(0,0,0,.08); }
.mat-txt { display: flex; flex-direction: column; line-height: 1.3; flex: 1; min-width: 0; }
.mat-txt small { color: var(--muted); font-size: 12px; }
.mat-chg { color: var(--orange-ink); font-weight: 600; font-size: 13px; }
.mat-dlg { border: 0; border-radius: 8px; padding: 0; width: min(760px, calc(100vw - 32px)); max-height: min(80vh, 760px); }
.mat-dlg::backdrop { background: rgba(13,30,39,.55); }
.mat-dlg-in { display: flex; flex-direction: column; gap: 12px; padding: 18px; max-height: min(80vh, 760px); box-sizing: border-box; }
.mat-dlg-head { display: flex; justify-content: space-between; align-items: center; font-size: 17px; }
.btn-x { border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--muted); }
.mat-dlg input[type=search] { height: var(--ctl); border: 1px solid var(--line-2); border-radius: 8px; padding: 0 12px; font: inherit; }
.mat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; overflow: auto; }
.mat-opt { display: flex; gap: 8px; align-items: center; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font: inherit; font-size: 12px; text-align: left; cursor: pointer; line-height: 1.25; color: var(--ink); }
.mat-opt:hover { border-color: var(--ink); }
.mat-opt.is-on { border-color: var(--orange); background: #FFF4EC; }
@media (max-width: 900px) {
  .kast-grid { grid-template-columns: 1fr; }
  .kast-view { position: static; }
  .kast-canvas { height: 46vh; }
}
.only-touch { display: none; }
@media (hover: none) { .only-touch { display: inline; } .hide-touch { display: none; } }
.dp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 16px 0; }
.dp-item { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; font-size: 13px; }
.dp-item.is-rot { border-color: var(--orange); background: #FFF4EC; }
.dp-img { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: var(--grey); }
.dp-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dp-item.is-rot .dp-img img { transform: rotate(90deg); }
.dp-arrow { position: absolute; left: 6px; top: 6px; background: rgba(13,30,39,.75); color: #fff; font-size: 11px; padding: 2px 6px; border-radius: 4px; }
.sticky-actions { position: sticky; bottom: 0; background: #fff; padding: 12px 0; border-top: 1px solid var(--line); }
.mat-row { display: flex; flex-direction: column; gap: 6px; }
.kseg-sm { align-items: center; }
.kseg-sm button { min-height: 32px; padding: 2px 10px; font-size: 12.5px; flex: 0 1 auto; }
.kseg-lab { font-size: 12px; color: var(--muted); margin: 0 4px 0 2px; }
.kast-bar { display: none; }
@media (max-width: 900px) {
  .kast-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(13,30,39,.08); }
  .kast-page .footer { padding-bottom: 80px; }
  .kast-bar strong { display: block; font-size: 18px; line-height: 1.2; }
  .kast-grid { display: flex; flex-direction: column; }
  .kast-form { order: 2; }
  .kast-view { order: 1; }
}
.dp-item .check { margin-top: auto; }

/* ---------------------------------------------------------------- telefoon: compacter, minder scrollen */
@media (max-width: 640px) {
  /* materiaalsoorten op de homepage: lage rijen met een kleinere foto */
  .tiles { gap: 8px; margin-top: 18px; }
  .tiles > .tile:not(.tile-soort) { min-height: 72px; padding: 6px 6px 6px 14px; }
  .tiles > .tile:not(.tile-soort) .tile-img { width: 60px; height: 60px; border-radius: 8px; }
  /* kasten op de homepage: horizontaal schuiven */
  .kast-tiles-home { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: none; }
  .kast-tiles-home::-webkit-scrollbar { display: none; }
  .kast-tiles-home > li { flex: 0 0 78%; scroll-snap-align: start; scroll-margin-left: 16px; }
}
.only-sm { display: none; }
@media (max-width: 640px) {
  .only-sm { display: block; }
  /* winkelmandje: onderdelen als lijst in plaats van een brede tabel */
  .cart-table thead, .cart-table .c-e, .cart-table tr:not(.has-name) .cart-name { display: none; }
  .cart-table, .cart-table tbody { display: block; }
  .cart-table tr { display: grid; grid-template-columns: 22px 1fr auto; grid-template-areas: "n mat mat" ". dim q"; gap: 6px 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .cart-table tr.has-name { grid-template-areas: "n name name" ". mat mat" ". dim q"; }
  .cart-table td { display: block; padding: 0; border: 0; text-align: left; max-width: none; }
  .cart-table .c-n { grid-area: n; color: var(--muted); }
  .cart-table .cart-name { grid-area: name; font-weight: 700; }
  .cart-table .c-mat { grid-area: mat; }
  .cart-table .c-dim { grid-area: dim; font-variant-numeric: tabular-nums; }
  .cart-table .c-dim .only-sm { margin-top: 2px; }
  .cart-table .c-q { grid-area: q; font-weight: 700; white-space: nowrap; }
  .cart-table .c-q::after { content: '×'; font-weight: 500; color: var(--muted); margin-left: 2px; }
  .cart-table tr.proj-row { display: block; padding: 0; }
  .cart-table tr.proj-row td { padding: 6px 16px; }
  .cart-table .c-err { grid-column: 2 / -1; }
}
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- blog */
.post-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.post-card > a { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.post-card > a:hover { border-color: var(--ink); box-shadow: 0 6px 20px rgba(13,30,39,.08); color: var(--ink); }
.post-card-img { display: block; aspect-ratio: 16 / 10; background: var(--grey); overflow: hidden; }
.post-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.post-card > a:hover .post-card-img img { transform: scale(1.03); }
.post-card-ph { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--navy) 0%, #1B3443 100%); }
.post-card-body { display: flex; flex-direction: column; gap: 8px; padding: 16px; flex: 1; }
.post-card-body .mono-label { color: var(--orange-ink); }
.post-card-title { font-size: 18px; line-height: 1.3; margin: 0; letter-spacing: -0.01em; }
.post-card-text { color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.post-card-meta { margin-top: auto; padding-top: 6px; color: var(--muted); font-size: 13px; }
.post-card.is-feature { grid-column: 1 / -1; }
.post-card.is-feature > a { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.post-card.is-feature .post-card-img { aspect-ratio: auto; min-height: 320px; }
.post-card.is-feature .post-card-body { padding: 36px 40px; justify-content: center; gap: 12px; }
.post-card.is-feature .post-card-title { font-size: clamp(22px, 2.4vw, 30px); }
.post-card.is-feature .post-card-text { font-size: 16px; }
.post-card.is-feature .post-card-meta { margin-top: 4px; }
@media (max-width: 960px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .post-card.is-feature > a { display: flex; } .post-card.is-feature .post-card-img { aspect-ratio: 16 / 10; min-height: 0; } .post-card.is-feature .post-card-body { padding: 18px 20px 20px; } }
@media (max-width: 600px) { .post-grid { grid-template-columns: 1fr; gap: 14px; } }
.blog-list { padding-top: 48px; }
.blog-pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 36px; }
.blog-pager a, .blog-pager span { min-width: 40px; height: 40px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; }
.blog-pager a:hover { border-color: var(--ink); }
.blog-pager .is-on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* artikel */
.preview-bar { background: var(--orange-soft); color: var(--orange-ink); font-size: 14px; font-weight: 600; padding: 10px 0; }
.preview-bar a { color: inherit; }
.post-hero { padding: 48px 0 56px; }
.post-hero-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
.post-hero.has-cover .post-hero-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.post-hero h1 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; letter-spacing: -0.03em; max-width: 760px; }
.post-hero .lead-light { margin-top: 14px; }
.post-lang-note { display: inline-block; margin: 14px 0 0; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; font-size: 13px; font-weight: 600; }
.post-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 22px 0 0; color: var(--muted-light); font-size: 14px; }
.post-cover { margin: 0; border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; background: rgba(255,255,255,.06); box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.post-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .post-hero.has-cover .post-hero-in { grid-template-columns: minmax(0, 1fr); gap: 28px; } .post-cover { aspect-ratio: 16 / 10; } }
@media (max-width: 640px) { .post-hero { padding: 28px 0 32px; } .post-cover { border-radius: 8px; } }
@media (max-width: 640px) {
  .post-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: none; }
  .post-strip::-webkit-scrollbar { display: none; }
  .post-strip > li { flex: 0 0 82%; scroll-snap-align: start; scroll-margin-left: 16px; }
}
.post-layout { display: grid; grid-template-columns: minmax(0, 720px) 300px; justify-content: space-between; gap: 64px; padding-top: 56px; padding-bottom: 80px; align-items: start; }
.post-side { position: sticky; top: calc(var(--topbar-h, 64px) + 24px); display: flex; flex-direction: column; gap: 16px; }
.post-toc ol { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }
.post-toc a { color: var(--muted); text-decoration: none; }
.post-toc a:hover { color: var(--ink); text-decoration: underline; }
.post-cta { display: flex; flex-direction: column; gap: 8px; }
.post-cta .mono-label { color: var(--orange-ink); }
.post-cta-title { font-size: 18px; font-weight: 700; line-height: 1.3; margin: 0; }
.post-cta p { margin: 0; }
.post-cta .btn { margin-top: 6px; }
@media (max-width: 1040px) { .post-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 36px; padding-bottom: 56px; } .post-layout .prose { max-width: 720px; } .post-side { position: static; max-width: 720px; } .post-toc { display: none; } }

/* tekst van een artikel */
.prose { font-size: 18px; line-height: 1.7; color: var(--ink); overflow-wrap: break-word; }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.1em; }
.prose h2 { font-size: clamp(23px, 2.3vw, 28px); line-height: 1.25; letter-spacing: -0.02em; margin: 1.9em 0 .55em; scroll-margin-top: calc(var(--topbar-h, 64px) + 20px); }
.prose h3 { font-size: 21px; line-height: 1.3; margin: 1.6em 0 .45em; }
.prose h4 { font-size: 18px; margin: 1.4em 0 .4em; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.prose li { margin: .35em 0; }
.prose li::marker { color: var(--orange); }
.prose a { color: var(--orange-ink); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--ink); }
.prose strong { font-weight: 700; }
.prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--orange); font-size: 20px; line-height: 1.55; color: var(--ink); }
.prose blockquote p { margin: 0 0 .5em; }
.prose blockquote > :last-child { margin-bottom: 0; }
.prose figure { margin: 2em 0; }
.prose img { display: block; width: auto; max-width: 100%; height: auto; max-height: 75vh; margin: 0 auto; border-radius: 8px; background: var(--grey); }
.prose figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); line-height: 1.5; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; }
@media (max-width: 640px) { .prose { font-size: 17px; } .prose figure { margin: 1.5em 0; } .prose img { border-radius: 8px; } }

/* beheer: blog schrijven */
.blog-edit { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.blog-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.blog-side { display: flex; flex-direction: column; gap: 16px; }
.blog-side .card label.block:first-of-type { margin-top: 12px; }
.blog-side input:not([type=checkbox]):not([type=file]), .blog-side select { width: 100%; }
.blog-edit .blog-title { font: inherit; font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; letter-spacing: -0.02em; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 8px 2px; height: auto; background: transparent; width: 100%; }
.blog-edit .blog-title:focus { outline: none; box-shadow: none; border-bottom-color: var(--orange); }
.blog-intro { font: inherit; font-size: 17px; line-height: 1.5; color: var(--muted); border: 1px solid transparent; border-radius: 8px; padding: 8px 2px; resize: vertical; background: transparent; width: 100%; }
.blog-intro:focus { outline: none; border-color: var(--line); background: #fff; padding: 8px 10px; }
.editor-card { border: 1px solid var(--line-2); border-radius: 8px; background: #fff; }
.ed-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px; border-bottom: 1px solid var(--line); position: sticky; top: var(--topbar-h, 64px); z-index: 5; background: #fff; border-radius: 8px 8px 0 0; }
.ed-btn { height: 32px; min-width: 34px; padding: 0 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer; }
.ed-btn:hover { background: var(--grey); }
.ed-btn[aria-pressed="true"] { background: var(--navy); color: #fff; }
.ed-btn[data-cmd="image"] { border-color: var(--line-2); }
.ed-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
.ed-grow { flex: 1; }
.ed-area { min-height: 420px; padding: 24px 28px; outline: none; }
.ed-area:focus-visible { outline: none; }
.ed-area.is-drop { background: var(--orange-soft); }
.ed-area figure { position: relative; cursor: pointer; }
.ed-area figure.is-sel img { outline: 3px solid var(--orange); outline-offset: 2px; }
.ed-area figure.is-loading img { opacity: .5; }
.ed-area figure.is-loading::after { content: 'Uploaden…'; position: absolute; top: 12px; left: 12px; background: var(--navy); color: #fff; font-size: 13px; padding: 4px 10px; border-radius: 999px; }
.ed-area figcaption { cursor: text; outline: none; min-height: 1.4em; }
.ed-area figcaption:empty::before { content: attr(data-placeholder); color: #9AA5AB; }
.fig-tools { position: absolute; top: 10px; right: 10px; display: none; gap: 4px; z-index: 2; }
.ed-area figure:hover .fig-tools, .ed-area figure.is-sel .fig-tools { display: flex; }
.fig-tools button { height: 32px; min-width: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: rgba(13,30,39,.85); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.fig-tools button:hover { background: var(--orange); }
.ed-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 10px 14px; border-top: 1px solid var(--line); }
.blog-actions { display: flex; gap: 8px; }
.blog-actions .btn { flex: 1; justify-content: center; }
[data-msg].ok { color: var(--ok); } [data-msg].err { color: var(--err); }
.cover-prev { aspect-ratio: 16 / 10; border-radius: 8px; background: var(--grey); overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0; margin: 8px 0; }
.cover-prev > span { padding: 12px; }
.cover-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-actions { display: flex; gap: 8px; align-items: center; }
.slug-row { display: flex; align-items: center; gap: 4px; font-weight: 400; }
.slug-row input { flex: 1; min-width: 0; }
.serp { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; font-family: Arial, sans-serif; }
.serp-url { font-size: 12.5px; color: #4D5156; overflow-wrap: anywhere; }
.serp-title { font-size: 18px; color: #1A0DAB; line-height: 1.3; }
.serp-desc { font-size: 13.5px; color: #4D5156; line-height: 1.5; }
.danger { color: var(--err) !important; }
.status.s-concept { background: var(--grey); color: var(--muted); }
.status.s-gepubliceerd { background: var(--ok-soft); color: var(--ok); }
.status.s-ingepland { background: var(--info-soft); color: var(--info); }
@media (max-width: 1000px) { .blog-edit { grid-template-columns: minmax(0, 1fr); } .blog-side { position: static; } .ed-area { padding: 18px; min-height: 320px; } }

/* beheer: nu op de site */
.live { display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; align-items: center; margin-bottom: 4px; }
.live-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.live-dot.is-on { background: var(--ok); box-shadow: 0 0 0 0 rgba(15,107,61,.5); animation: live-pulse 2s infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(15,107,61,.45); } 70% { box-shadow: 0 0 0 8px rgba(15,107,61,0); } 100% { box-shadow: 0 0 0 0 rgba(15,107,61,0); } }
@media (prefers-reduced-motion: reduce) { .live-dot.is-on { animation: none; } }
.live-main { display: flex; align-items: baseline; gap: 8px; }
.live-n { font-size: 44px; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.live-sub { margin: 0; }
.live-tag { grid-column: 1 / -1; justify-self: start; font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px; }
.live-tag.is-calm { background: var(--ok-soft); color: var(--ok); }
.live-tag.is-busy { background: var(--orange-soft); color: var(--orange-ink); }
.live-pages { grid-column: 1 / -1; margin-top: 4px; }
@media (max-width: 640px) { .live { grid-template-columns: 1fr; } }

/* ================================================================ kop (menubalk)
   Regel 1 (blijft staan): logo · menu · btw · account · winkelmandje.  Regel 2 (scrolt weg): de drie stappen.
   Eén omslagpunt: onder 1080 px gaan menu en btw-knop achter de menuknop. */
.hdr { position: sticky; top: 0; z-index: 40; background: var(--navy); color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); }
.hdr-in { max-width: var(--container); margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; }
.brand img { width: 280px; max-width: 100%; height: auto; display: block; }
.hdr-links { display: flex; align-items: stretch; align-self: stretch; gap: 4px; margin-left: auto; min-width: 0; }
.hdr-link { position: relative; display: inline-flex; align-items: center; padding: 0 12px; color: #C9D5DC; text-decoration: none; font-weight: 600; font-size: 14.5px; white-space: nowrap; }
.hdr-link::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--orange); transform: scaleX(0); transition: transform .15s; }
.hdr-link:hover, .hdr-link.is-on { color: #fff; }
.hdr-link:hover::after, .hdr-link.is-on::after { transform: scaleX(1); }
.hdr-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.hdr-links + .hdr-actions { margin-left: 8px; }
.hdr-vat { display: flex; align-items: center; gap: 8px; flex: none; }
.hdr-vat .vat-unit { color: #7F95A3; font-size: 11px; font-weight: 600; }
.hdr-icon, .hdr-cart, .hdr-burger { height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: #fff; background: transparent; text-decoration: none; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.hdr-icon { width: 40px; }
.hdr-account { width: auto; max-width: 180px; padding: 0 14px 0 11px; }
@media (max-width: 1200px) { .hdr-account { max-width: 140px; } }
.hdr-account-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdr-account-two { display: flex; flex-direction: column; line-height: 1.12; }
.hdr-account-two > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdr-acc-co { font-size: 13px; font-weight: 600; }
.hdr-acc-name { font-size: 10.5px; font-weight: 400; opacity: .75; }
.hdr-account:has(.hdr-account-two) { max-width: 210px; }
.hdr-cart { padding: 0 14px 0 12px; }
.hdr-icon:hover, .hdr-cart:hover, .hdr-burger:hover, .hdr-icon.is-on { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); }
.hdr-cart.is-filled { background: var(--orange); border-color: var(--orange); }
.hdr-cart.is-filled:hover { background: var(--orange-2); border-color: var(--orange-2); }
.hdr-cart.is-filled .cart-count { background: #fff; color: var(--orange-ink); }
.hdr-burger { display: none; width: 40px; padding: 0; }
.burger-ico { position: relative; width: 18px; height: 14px; display: block; }
.burger-ico span { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s, opacity .2s, top .2s; }
.burger-ico span:nth-child(1) { top: 0; } .burger-ico span:nth-child(2) { top: 6px; } .burger-ico span:nth-child(3) { top: 12px; }
.hdr-burger[aria-expanded="true"] .burger-ico span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.hdr-burger[aria-expanded="true"] .burger-ico span:nth-child(2) { opacity: 0; }
.hdr-burger[aria-expanded="true"] .burger-ico span:nth-child(3) { top: 6px; transform: rotate(-45deg); }
.hdr-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--navy); border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.28); /* streep: los van een donkere paginakop */ box-shadow: 0 16px 32px rgba(13,30,39,.35); max-height: calc(100vh - 64px); overflow-y: auto; }
.hdr-panel[hidden] { display: none; }
.hdr-panel-links { max-width: var(--container); margin: 0 auto; padding: 8px 24px; display: flex; flex-direction: column; }
.hdr-panel-links a { display: flex; align-items: center; min-height: 52px; color: #fff; text-decoration: none; font-weight: 600; font-size: 17px; border-bottom: 1px solid rgba(255,255,255,.08); }
.hdr-panel-links a.is-on { color: var(--orange); }
.hdr-panel-vat { max-width: var(--container); margin: 0 auto; padding: 14px 24px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #A9B8C2; font-size: 13px; font-weight: 600; }
.hdr-panel-vat .vat-switch { height: 28px; }
.hdr-panel-vat .vat-switch button { font-size: 11.5px; padding: 0 10px; }

/* regel 2: de drie stappen */
.hdr-steps { position: sticky; top: var(--hdr-h, 64px); z-index: 39; background: var(--navy); color: #C9D5DC; border-bottom: 1px solid rgba(255,255,255,.06); transition: top .22s ease; }
/* naar beneden scrollen: stappen schuiven weg achter de bovenste regel; omhoog scrollen: weer terug */
.hdr-steps.is-hidden { top: calc(var(--hdr-h, 64px) - var(--steps-h, 44px)); }
/* alles wat onder de kop blijft staan, schuift soepel mee */
.pick-sticky, .filters, .col-side, .ed-bar, .post-side { transition: top .22s ease; }
@media (prefers-reduced-motion: reduce) { .hdr-steps, .pick-sticky, .filters, .col-side, .ed-bar, .post-side { transition: none; } }
.hdr-steps-in { max-width: var(--container); margin: 0 auto; padding: 0 24px; height: 44px; display: flex; align-items: stretch; justify-content: space-between; gap: 16px; }
.steps-nav { display: flex; align-items: stretch; min-width: 0; }
.step-link { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; color: #C9D5DC; text-decoration: none; font-weight: 600; font-size: 14px; white-space: nowrap; }
.step-link:first-child { padding-left: 0; }
.step-link::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--orange); transform: scaleX(0); transition: transform .15s; }
.step-link:first-child::after { left: 0; }
.step-link:hover { color: #fff; }
.step-link:hover::after { transform: scaleX(1); }
.step-link.is-on { color: #fff; }
.step-sep { align-self: center; color: #5E7584; font-size: 14px; }
.step-n { display: inline-flex; align-items: center; justify-content: center; height: 22px; padding: 0 7px; border-radius: 999px; background: rgba(255,255,255,.1); color: #C9D5DC; font-family: var(--mono); font-size: 11.5px; font-weight: 500; }
.step-link.is-on .step-n { background: var(--orange); color: #fff; }
.step-link.is-done .step-n { background: rgba(232,89,12,.22); color: #FFD9C2; }

/* onder 1080 px: menu achter de menuknop */
@media (max-width: 1080px) {
  .hdr-links { display: none; }
  .hdr-actions, .hdr-links + .hdr-actions { margin-left: auto; }
  .hdr-burger { display: inline-flex; }
}
@media (max-width: 760px) { .hdr-vat { display: none; } } /* telefoon: btw-keuze staat in het menu */
@media (min-width: 761px) { .hdr-panel-vat { display: none; } }
@media (max-width: 640px) {
  .hdr-in { height: 58px; padding: 0 16px; gap: 12px; }
  /* logo zo groot als past; account staat op de telefoon in het menu */
  .brand { flex: 0 1 200px; }
  .brand img { width: 100%; max-width: 200px; }
  .hdr-actions { gap: 6px; }
  .hdr-cart-label { display: none; }
  .hdr-account { display: none; }
  .hdr-cart { padding: 0 12px; }
  .hdr-panel { max-height: calc(100vh - 58px); }
  .hdr-panel-links, .hdr-panel-vat { padding-left: 16px; padding-right: 16px; }
  .hdr-steps-in { padding: 0 16px; height: 42px; }
  .steps-nav { width: 100%; justify-content: space-between; }
  .step-link { padding: 0 4px; font-size: 13px; gap: 4px; }
  .step-link::after { left: 4px; right: 4px; }
  .step-n { height: 20px; padding: 0 5px; font-size: 11px; }
}
@media (max-width: 370px) { .hdr-in { gap: 8px; } .hdr-actions { gap: 4px; } .hdr-cart { padding: 0 10px; } .step-link { font-size: 12.5px; padding: 0 2px; } }
@media (max-width: 340px) { .step-sep { display: none; } .step-link { font-size: 12px; } }

/* ---------------------------------------------------------------- zaagschema: panelen in de decorkleur, met nerf bij houtdecors */
.sheet { --decor: #D9CFC0; position: relative; width: 100%; border-radius: 0; overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(13,30,39,0) 0 6px, rgba(13,30,39,.1) 6px 7px),
    linear-gradient(rgba(255,255,255,.66), rgba(255,255,255,.66)),
    var(--decor);
  box-shadow: inset 0 0 0 1px rgba(13,30,39,.22); }
.sheet.has-grain { background:
    repeating-linear-gradient(0deg, rgba(13,30,39,0) 0 5px, rgba(13,30,39,.13) 5px 6px),
    linear-gradient(rgba(255,255,255,.66), rgba(255,255,255,.66)),
    var(--decor); }
.sheet.has-grain.is-dark { background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0) 0 5px, rgba(255,255,255,.16) 5px 6px),
    linear-gradient(rgba(255,255,255,.34), rgba(255,255,255,.34)),
    var(--decor); }
.sheet.is-dark { background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0) 0 6px, rgba(255,255,255,.16) 6px 7px),
    linear-gradient(rgba(255,255,255,.34), rgba(255,255,255,.34)),
    var(--decor); }
.piece { position: absolute; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 0;
  background: var(--decor);
  box-shadow: inset 0 0 0 1px rgba(13,30,39,.22); transition: opacity .15s, filter .15s; cursor: default; }
.sheet.has-grain .piece { background:
    url(/img/nerf.svg) 0 0 / 200px 50px repeat,
    var(--decor); }
.sheet.has-grain.is-dark .piece { background:
    url(/img/nerf-licht.svg) 0 0 / 200px 50px repeat,
    var(--decor); }
.sheet.is-dark .piece { box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
/* markeren: de rest vervaagt naar de plaat, het aangewezen onderdeel houdt zijn kleur en krijgt een oranje nummer (zoals in de lijst) */
.sheet.has-hl .piece:not(.is-hl) { filter: grayscale(1) contrast(.5) brightness(1.2); } /* dicht (geen arcering erdoorheen): grijs maar herkenbaar als onderdeel, niet als restmateriaal */
.piece.is-hl .pc-tag b { background: var(--orange); }
@media (prefers-reduced-motion: reduce) { .piece { transition: none; } }
/* nummer in het midden: witte pil met het nummer in een donkerblauw rondje (grote weergave: met maat) */
.pc-tag { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 5px; max-width: calc(100% - 10px); padding: 2px 7px 2px 2px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--ink); font-size: 10px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.pc-tag b { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 9.5px; }
.pc-tag:has(b:only-child) { padding: 2px; }
.piece { container-type: size; }
.sheet:not(.is-big) .pc-tag { font-size: 8.5px; gap: 3px; padding: 1px 5px 1px 1px; max-width: calc(100% - 4px); letter-spacing: -.01em; }
.sheet:not(.is-big) .pc-tag b { min-width: 13px; height: 13px; font-size: 8.5px; padding: 0 3px; }
@container (max-width: 66px) { .pc-d { display: none; } .sheet:not(.is-big) .pc-tag, .pc-tag { padding: 1px; } }
@container (max-height: 22px) { .pc-tag { transform: scale(.85); } }
.sheet.is-big .pc-tag { font-size: 12px; padding: 3px 9px 3px 3px; }
.sheet.is-big .pc-tag b { min-width: 20px; height: 20px; font-size: 11px; }
.sheet.is-big .pc-tag:has(b:only-child) { padding: 3px; }
@container (max-width: 96px) { .sheet.is-big .pc-tag { padding: 3px; } }
/* kantenband: --eb wordt per decor berekend (shared/decor-color.js) met genoeg contrast tegen het onderdeel én het restmateriaal */
.eb { position: absolute; --i: 0px; --t: 4px; background: var(--eb, color-mix(in srgb, var(--decor) 40%, #0D1E27)); pointer-events: none; z-index: 1; }
.sheet.is-dark .eb { background: var(--eb, #fff); }
.sheet.is-dark .piece:has(.eb) { box-shadow: inset 0 0 0 1px rgba(13,30,39,.55); } /* witte band: donkere rand eromheen, los van het lichtere restmateriaal */
.eb-top { top: var(--i); left: var(--i); right: var(--i); height: var(--t); }
.eb-bottom { bottom: var(--i); left: var(--i); right: var(--i); height: var(--t); }
.eb-left { left: var(--i); top: var(--i); bottom: var(--i); width: var(--t); }
.eb-right { right: var(--i); top: var(--i); bottom: var(--i); width: var(--t); }
.sheet.is-big .eb { --t: 5px; }
.schema-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.schema-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg { display: inline-block; width: 14px; height: 10px; border-radius: 0; }
/* legenda in dezelfde kleur en arcering als het schema van deze plaat */
.schema-legend { --decor: #D9CFC0; }
.lg-piece { background: var(--decor); box-shadow: inset 0 0 0 1px rgba(13,30,39,.3); }
.schema-legend.has-grain .lg-piece { background: url(/img/nerf.svg) 0 0 / 60px 15px repeat, var(--decor); }
.schema-legend.has-grain.is-dark .lg-piece { background: url(/img/nerf-licht.svg) 0 0 / 60px 15px repeat, var(--decor); }
.schema-legend.is-dark .lg-piece { box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 0 0 .5px rgba(13,30,39,.4); }
.lg-rest { box-shadow: inset 0 0 0 1px rgba(13,30,39,.2); background: repeating-linear-gradient(135deg, rgba(13,30,39,0) 0 2px, rgba(13,30,39,.18) 2px 3px), linear-gradient(rgba(255,255,255,.66), rgba(255,255,255,.66)), var(--decor); }
.schema-legend.has-grain .lg-rest { background: repeating-linear-gradient(0deg, rgba(13,30,39,0) 0 2px, rgba(13,30,39,.18) 2px 3px), linear-gradient(rgba(255,255,255,.66), rgba(255,255,255,.66)), var(--decor); }
.schema-legend.is-dark .lg-rest { background: repeating-linear-gradient(135deg, rgba(255,255,255,0) 0 2px, rgba(255,255,255,.2) 2px 3px), linear-gradient(rgba(255,255,255,.34), rgba(255,255,255,.34)), var(--decor); }
.schema-legend.has-grain.is-dark .lg-rest { background: repeating-linear-gradient(0deg, rgba(255,255,255,0) 0 2px, rgba(255,255,255,.2) 2px 3px), linear-gradient(rgba(255,255,255,.34), rgba(255,255,255,.34)), var(--decor); }
.lg-eb { height: 4px; width: 16px; background: var(--eb, color-mix(in srgb, var(--decor) 40%, #0D1E27)); border-radius: 0; }
.schema-legend.is-dark .lg-eb { background: var(--eb, #fff); box-shadow: 0 0 0 1px rgba(13,30,39,.25); }

/* materialenpagina: bovenaan de platen in uw zaaglijst (zelfde balk als op de zaaglijstpagina) en wat u hier nieuw aanvinkt */
.list-top-wrap { margin-bottom: 12px; } /* daaronder schuift de witte rand van de selectiebalk precies aan */
.list-top-wrap[hidden] { display: none; }
.list-top { align-items: center; }
.list-top .sheet-tab { min-height: 40px; } /* foto 32 met 5 rondom → hoek 3 */
.list-top .tab-ico { width: 32px; height: 32px; }
.list-top .tab-name { font-size: 13.5px; }
.list-top-label { padding: 0 8px 0 9px; white-space: nowrap; }
.list-top .tab-wrap.is-new { border-style: dashed; border-color: var(--orange); }
.list-top .tab-wrap.is-new .tab-sub { color: var(--orange-ink); }
.list-top a.sheet-tab { text-decoration: none; }
@media (max-width: 640px) { .list-top-label { display: none; } }
/* telefoon: platen compact en gestapeld (na de algemene regels, zodat deze winnen) */
@media (max-width: 640px) {
  .sheet-tabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }
  .sheet-tabs .tab-wrap { min-width: 0; padding-right: 2px; }
  .sheet-tabs .sheet-tab { flex: 1 1 auto; min-width: 0; min-height: 36px; padding: 4px 4px 4px 4px; gap: 8px; }
  .sheet-tabs .tab-ico { width: 28px; height: 28px; } /* 4 + 1 rand rondom → hoek 3 */
  .sheet-tabs .tab-txt { min-width: 0; }
  .sheet-tabs .tab-name, .sheet-tabs .tab-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sheet-tabs .tab-name { font-size: 13px; }
  .sheet-tabs .tab-sub { font-size: 11.5px; }
  .sheet-tabs .tab-size { display: none; }
  .sheet-tabs .tab-x { width: 24px; height: 24px; flex: none; font-size: 15px; }
  .sheet-tabs .tab-add { min-height: 38px; justify-content: center; padding: 0 10px; font-size: 13px; }
  .list-top .sheet-tab { min-height: 36px; }
  .list-top .tab-ico { width: 28px; height: 28px; }
  .list-top .tab-name { font-size: 13px; }
}

/* ---------------------------------------------------------------- zaaglijst: bewerkingen per onderdeel (proef) */
.ops-btn { position: relative; }
.ops-btn.has-ops { color: var(--orange-ink); background: var(--orange-soft); }
.ops-btn.is-open { box-shadow: inset 0 0 0 1.5px var(--navy); }
.ops-n { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--orange); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.parts tr.ops-row > td { padding: 0 10px 14px; background: #FBFAF7; border-bottom: 1px solid var(--line); }
.ops-panel { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 20px; padding: 14px 4px 0; }
.ops-side .mono-label { margin: 0 0 8px; }
.ops-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.ops-list li { display: flex; align-items: center; gap: 4px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; padding-right: 4px; }
.ops-list li.is-on { border-color: var(--navy); }
.ops-item { flex: 1; min-width: 0; text-align: left; border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); padding: 8px 10px; cursor: pointer; }
.ops-add { display: flex; flex-wrap: wrap; gap: 6px; }
.ops-add .chip-light { font-size: 12.5px; }
.ops-form { margin-top: 12px; padding: 12px; border-radius: 8px; background: #fff; border: 1px solid var(--line); }
.ops-form-title { margin: 0; font-weight: 700; font-size: 14px; }
.ops-form .muted { margin: 2px 0 10px; }
.op-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.op-field { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.op-field select, .op-field input { height: var(--ctl-sm); font-size: 13px; width: 100%; min-width: 0; }
.ops-view { min-width: 0; }
.part-draw { display: block; width: 100%; max-height: 360px; }
.pd-plate { stroke: rgba(13,30,39,.35); stroke-width: 1; }
.pd-band { stroke: color-mix(in srgb, var(--navy) 55%, transparent); stroke-width: 3.5; }
.pd-gat { fill: var(--navy); }
.pd-gat.pd-door { fill: #fff; stroke: var(--navy); stroke-width: 1.6; }
.pd-potgat { fill: color-mix(in srgb, var(--orange) 22%, #fff); stroke: var(--orange); stroke-width: 1.5; }
.pd-deuvel { fill: #5B6B75; }
.pd-lab { font: 600 11px Inter, system-ui, sans-serif; fill: var(--muted); }
.pd-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; }
.pd-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg-dot { width: 10px; height: 10px; border-radius: 999px; display: inline-block; }
.lg-dot.pd-gat { background: var(--navy); }
.lg-dot.pd-potgat { background: color-mix(in srgb, var(--orange) 22%, #fff); box-shadow: inset 0 0 0 1.5px var(--orange); }
.lg-dot.pd-deuvel { background: #5B6B75; border-radius: 2px; }
.ops-warn { margin: 8px 0 0; padding: 8px 12px 8px 28px; border-radius: 8px; background: #FDECEA; color: #8A1C12; font-size: 13px; }
.ops-price { margin: 10px 0 0; font-size: 14px; }
@media (max-width: 900px) { .ops-panel { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  table.parts tr.ops-row { display: block; padding: 0; }
  table.parts tr.ops-row > td { display: block; padding: 0 12px 14px; }
  .op-fields { grid-template-columns: 1fr; }
}
.table tr.ops-line td { background: var(--orange-soft); color: var(--orange-ink); border-top: 0; }

/* kastenconfigurator: 3D-bediening (three.js) */
.kast-cams { position: absolute; top: 12px; right: 12px; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: inset 0 0 0 1px var(--line); }
.kast-cams button { height: 30px; min-width: 30px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.kast-cams button:hover { background: var(--grey); }
.kast-cams button[aria-pressed="true"]:not(.rp-photo-btn) { background: var(--orange); color: #fff; }
.st-cams button[aria-pressed="true"]:not(.rp-photo-btn) { background: var(--orange) !important; color: #fff !important; }
.kast-cams .kast-full { padding: 0 8px; }
.kast-view-btns .chip-light.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.kast-canvas-wrap:fullscreen { border: 0; border-radius: 0; background: linear-gradient(#F7F7F4, #E6E5DF); }
.kast-canvas-wrap:fullscreen .kast-canvas, .kast-canvas-wrap.is-full .kast-canvas { height: 100vh; height: 100dvh; }
.kast-canvas-wrap.is-full { position: fixed; inset: 0; z-index: 200; border: 0; border-radius: 0; background: linear-gradient(#F7F7F4, #E6E5DF); }
body.kast-full-open { overflow: hidden; }
@media (max-width: 640px) { .kast-cams { top: auto; bottom: 34px; right: 8px; } .kast-hint { right: 8px; left: 8px; text-align: right; } }

/* zaaglijst: mailen of delen */
.share-dlg { width: min(560px, calc(100vw - 32px)); border: 0; border-radius: 14px; padding: 0; box-shadow: 0 24px 64px rgba(13,30,39,.3); }
.share-dlg::backdrop { background: rgba(13,30,39,.5); }
.share-in { padding: 18px 20px 22px; display: grid; gap: 4px; }
.share-sec { display: grid; gap: 8px; padding: 14px 0 0; }
.share-sec + .share-sec { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 18px; }
.share-h { margin: 0; font-size: 15px; }
.share-sec p { margin: 0; }
.share-row { display: flex; gap: 8px; }
.share-row input { flex: 1; min-width: 0; }
.share-row input[readonly] { background: var(--grey); color: var(--muted); font-size: 13px; }
.share-via { display: flex; flex-wrap: wrap; gap: 8px; }
.share-msg { min-height: 1.2em; font-size: 13px; }
.share-msg.is-ok { color: #1D6B3A; }
.share-msg.is-err { color: #8A1C12; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
[data-act="share"] svg { flex: none; }
.share-later { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: -2px 0 0; padding: 0 2px; border: 0; background: none; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; text-align: left; }
.share-later strong { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.share-later:hover { color: var(--ink); }
@media (max-width: 520px) { .share-row { flex-wrap: wrap; } .share-row input { flex-basis: 100%; } .share-row .btn, .share-row .btn-ghost { flex: 1; } }

/* zaaglijst: importeren (proef) */
.imp-dlg { width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 48px); border: 0; border-radius: 14px; padding: 0; box-shadow: 0 24px 64px rgba(13,30,39,.3); }
.imp-dlg::backdrop { background: rgba(13,30,39,.5); }
.imp-in { padding: 18px 20px 20px; display: grid; gap: 12px; }
.imp-drop { border: 2px dashed var(--line-2); border-radius: 8px; padding: 32px 20px; text-align: center; display: grid; gap: 6px; justify-items: center; }
.imp-drop.is-over { border-color: var(--orange); background: var(--orange-soft); }
.imp-drop p { margin: 0; }
.imp-head { margin-left: 12px; display: inline-flex; gap: 6px; align-items: center; font-weight: 600; }
.imp-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.imp-map label, .imp-target label { display: grid; align-content: start; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.imp-map select, .imp-target select { height: var(--ctl-sm); font-size: 13px; }
.imp-target { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; padding: 10px 12px; border-radius: 8px; background: var(--grey); }
.imp-prev { max-height: 300px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.imp-in [data-imp-body] { display: grid; gap: 12px; min-width: 0; }
.imp-in [data-imp-body] > p { margin: 0; }
.imp-prev .table th { position: sticky; top: 0; background: #fff; z-index: 1; }
.imp-prev .table.compact td { padding: 7px 12px; vertical-align: middle; }
.imp-prev .table.compact td:first-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.imp-prev tr.is-skip td { color: var(--muted); text-decoration: line-through; }
.imp-prev tr.is-skip td:last-child { text-decoration: none; }
.imp-warn { color: #8A1C12; font-weight: 500; }
.pd-gat.pd-b { fill: none; stroke: var(--navy); stroke-width: 1.2; stroke-dasharray: 2 1.5; }
.lg-dot.pd-b-lg { background: transparent; box-shadow: inset 0 0 0 1.5px var(--navy); }
.proef-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--orange-soft); color: var(--orange-ink); font-size: 11px; font-weight: 700; letter-spacing: .02em; vertical-align: middle; margin-left: 6px; }
.kast-proef .kf { display: grid; gap: 4px; margin-bottom: 10px; }
.kast-proef .kf-lab { font-size: 13px; font-weight: 600; color: var(--muted); }
.kast-proef select { height: var(--ctl); }
.kast-lines.kast-proef .btn { margin-top: 10px; }

/* frezen (proef) */
.frees-panel { display: block; }
.frees-panel .ops-tpl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.frees-panel .ops-tpl .chip-light { font-size: 12.5px; }
.f-body { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 20px; margin-top: 12px; }
.f-body .ops-edit { display: grid; gap: 8px; align-content: start; padding: 12px; border-radius: 8px; background: #fff; border: 1px solid var(--line); }
.f-corners { border: 0; padding: 0; margin: 0; }
.f-corners > div { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-weight: 500; color: var(--ink); }
.f-corners .chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.f-note { margin: 10px 0 0; }
.f-file { justify-self: start; }
.pd-bbox { fill: none; stroke: rgba(13,30,39,.28); stroke-dasharray: 4 4; stroke-width: 1; }
.pd-shape { stroke: rgba(13,30,39,.55); stroke-width: 1.2; }
.mill-block { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.mill-block .h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 15px; }
.mill-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 8px; }
.mill-block.is-big .mill-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.mill-grid figure { margin: 0; }
.mill-grid figcaption { margin-top: 4px; color: var(--muted); }
.mill-sheet { display: block; width: 100%; height: auto; border-radius: 4px; }
.mill-rest { fill: color-mix(in srgb, var(--decor) 35%, #fff); }
.mill-pc polygon { fill: var(--decor); stroke: rgba(13,30,39,.55); stroke-width: 3; vector-effect: non-scaling-stroke; }
.mill-pc text { fill: #0D1E27; font-family: Inter, system-ui, sans-serif; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.mill-sheet.is-dark .mill-pc text { fill: #fff; }
.mill-sheet .mill-pc polygon { stroke-width: 1.2; }
@media (max-width: 900px) { .f-body { grid-template-columns: 1fr; } }

/* zelf ontwerpen (proef) */
.ed-card h2 { display: flex; align-items: center; gap: 8px; }
.ed-help { margin: -4px 0 10px; }
.ed-wrap { background: #F6F4EF; border-radius: 8px; padding: 8px; }
.ed-svg { display: block; width: 100%; height: auto; max-height: 420px; touch-action: none; user-select: none; }
.ed-corpus { fill: #fff; stroke: #0D1E27; stroke-width: 3; vector-effect: non-scaling-stroke; }
.ed-plint { fill: #E3DED4; stroke: rgba(13,30,39,.35); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ed-leaf { cursor: pointer; outline: none; }
.ed-hit { fill: #fff; stroke: rgba(13,30,39,.25); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ed-leaf:hover .ed-hit { fill: #FFF6EF; }
.ed-leaf.is-sel .ed-hit { fill: var(--orange-soft, #FDEBDD); stroke: var(--orange); stroke-width: 2.5; }
.ed-leaf:focus-visible .ed-hit { stroke: var(--navy); stroke-width: 2.5; }
.ed-lab { font-family: Inter, system-ui, sans-serif; font-weight: 700; fill: #0D1E27; text-anchor: middle; pointer-events: none; }
.ed-dim { font-family: Inter, system-ui, sans-serif; fill: #5B6B75; text-anchor: middle; pointer-events: none; }
.ed-measure { font-family: Inter, system-ui, sans-serif; font-weight: 600; fill: #5B6B75; text-anchor: middle; }
.ed-sym { fill: none; stroke: rgba(13,30,39,.35); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 6 4; pointer-events: none; }
.ed-gap { stroke: rgba(13,30,39,.45); stroke-width: 1.2; vector-effect: non-scaling-stroke; pointer-events: none; }
.ed-shelf { stroke: #B9A88E; stroke-width: 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.ed-app { fill: #2B2E31; opacity: .12; pointer-events: none; }
.ed-div { fill: #0D1E27; cursor: ew-resize; }
.ed-div[data-dir="h"] { cursor: ns-resize; }
.ed-div:hover { fill: var(--orange); }
.ed-vak { margin-top: 12px; display: grid; gap: 10px; }
.ed-vak-title { margin: 0; display: flex; gap: 8px; align-items: baseline; }
.ed-vak .kf { margin: 0; }
.ed-split { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ed-split span { font-size: 13px; color: var(--muted); margin-left: 4px; }
.ed-split span:first-child { margin-left: 0; }
.ed-size { display: flex; align-items: center; gap: 8px; }
.ed-size input { width: 110px; height: var(--ctl-sm); }
.ed-vak .stepper output { min-width: 36px; text-align: center; font-weight: 700; }
.ed-sub { font-family: Inter, system-ui, sans-serif; font-weight: 600; fill: #33444E; text-anchor: middle; pointer-events: none; }
.kast-tile-blank { background: repeating-linear-gradient(135deg, #F6F4EF 0 14px, #EFECE5 14px 28px); min-height: 160px; }
@media (max-width: 900px) {
  /* zelf ontwerpen: eerst 3D, dan de indeling, de prijs en lijsten daarna */
  .ontwerp-app .kast-view { display: contents; }
  .ontwerp-app .kast-canvas-wrap { order: 1; }
  .ontwerp-app .kast-form { order: 2; }
  .ontwerp-app .kast-sum { order: 3; }
}
/* dikte: keuzemenu (lijst omzetten of een extra lijst) */
.tchip-wrap { position: relative; display: inline-flex; }
.thick-row .tchip.is-open { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy); }
.tmenu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 250px; display: flex; flex-direction: column; padding: 6px; border-radius: 12px; background: #fff; border: 1px solid var(--line-2); box-shadow: 0 12px 32px rgba(13,30,39,.16); }
.tmenu button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; font: inherit; color: var(--ink); cursor: pointer; }
.tmenu button:hover, .tmenu button:focus-visible { background: var(--grey); outline: none; }
.tmenu strong { font-size: 14px; font-weight: 700; }
.tmenu small { font-size: 12.5px; color: var(--muted); }
.tmenu.is-right { left: auto; right: 0; }
@media (max-width: 640px) { /* telefoon: menu over de hele breedte van de dikteregel */
  .thick-row { position: relative; }
  .tchip-wrap { position: static; }
  .tmenu, .tmenu.is-right { left: 0; right: 0; min-width: 0; }
}

/* beheer: accounts en afspraken */
.acc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 12px; }
.acc-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; }
.acc-form label.check { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 500; }
.acc-form input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--orange); margin-top: 2px; flex: none; }
.acc-form .span2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .acc-form { grid-template-columns: 1fr; } }
.new-account summary { cursor: pointer; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 12px 0 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.notice-key { font-size: 15px; }
.notice-key code { font-family: var(--mono); font-size: 17px; font-weight: 700; background: #fff; padding: 2px 8px; border-radius: 6px; user-select: all; }
/* beheer: dashboard – "Nu op de site" even breed als een kolom, met de pagina's van het afgelopen uur */
.dash-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.dash-top .live { margin: 0; }
/* Nu op de site: even hoog als de kaartjes en grafieken ernaast, niet hoger; de lijst scrolt binnen het vak */
.live-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px 24px; }
.live-top .live-sub { flex: 1 1 0; min-width: 0; }
.live-top .live-main { flex: none; }
@media (min-width: 901px) {
  .dash-top { align-items: stretch; }
  .dash-top .live { contain: size; display: flex; flex-direction: column; align-items: stretch; gap: 6px; overflow: hidden; }
  .dash-top .live-head { justify-content: flex-start; }
  .dash-top .live-hour { flex: 1 1 auto; min-height: 0; max-height: none; }
}
.dash-top .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dash-main { display: grid; gap: 16px; min-width: 0; }
.dash-main > * { margin: 0; }
@media (max-width: 900px) { .dash-top { grid-template-columns: 1fr; } .dash-top .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.live-hour { grid-column: 1 / -1; margin-top: 10px; border-top: 1px solid var(--line); padding: 10px 14px 0 0; max-height: 420px; overflow: auto; }
.live-hour .mono-label { margin: 0 0 6px; }
.live-path { word-break: break-all; }
/* beheer: zaaglijsten en mandjes opruimen */
.test-bar { gap: 10px; margin: 8px 0 12px; }
th.check, td.check { width: 32px; }
td.check input, th.check input { width: 16px; height: 16px; accent-color: var(--orange); }
.pay-info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; margin: 0 0 12px; border-radius: 8px; background: var(--grey); font-size: 14px; }
.pay-info form { margin: 0; }
.acc-edit { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.acc-edit summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.acc-form .pair { display: grid; grid-template-columns: 1fr 90px; gap: 6px; }
.chip-n { margin-left: 6px; font-weight: 500; opacity: .6; }
.card-select { cursor: pointer; }
.card-title-link { color: var(--ink); text-decoration: none; align-self: flex-start; }
.card-title-link:hover { color: var(--orange-ink); text-decoration: underline; text-underline-offset: 3px; }
.card-more { align-self: flex-start; margin-top: 4px; font-size: 13px; color: var(--muted); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; white-space: nowrap; }
.card-more:hover { color: var(--orange-ink); }
.mat-card:has(input[name="add"]:checked) { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.card-select:hover .card-title { color: var(--ink); }
.card-select:hover .card-title-link:hover { color: var(--orange-ink); }

/* Beheer > Klantgedrag */
.admin .kpis + .card, .admin .card + .grid-3, .admin .grid-3 + .grid-2, .admin .grid-2 + .card, .admin .card + .card { margin-top: 16px; }
.funnel td:first-child { white-space: nowrap; }
.funnel-bar-h { width: 45%; }
.funnel-bar { width: 45%; padding-top: 10px; padding-bottom: 10px; }
.funnel-bar span { display: block; height: 14px; background: var(--orange); border-radius: 0 4px 4px 0; min-width: 0; }
.feat .funnel-bar { width: 38%; }
.feat .funnel-bar span { height: 10px; background: #128DBC; }
.stack-16 { display: grid; gap: 16px; align-content: start; }
.stack-16 > .card { margin: 0; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sessions .row-link { cursor: pointer; }
.sessions .row-link:hover td { background: #FAFAF7; }
td.err { color: #B42318; font-weight: 600; }
.jtl { list-style: none; margin: 8px 0 0; padding: 0; }
.jtl li { display: grid; grid-template-columns: 72px 1fr; gap: 12px; padding: 6px 0 6px 10px; border-left: 3px solid var(--line); font-size: 14px; }
.jtl time { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.jtl .tl-bad { border-left-color: #D92D20; background: #FEF3F2; }
.jtl .tl-warn { border-left-color: var(--orange); background: var(--orange-soft); }
.jtl .tl-good { border-left-color: #12B76A; background: #ECFDF3; }
.jtl .tl-gap { display: block; color: var(--muted); font-size: 12px; font-style: italic; border-left-style: dashed; }
.tl-page { margin-top: 16px; }
@media (max-width: 640px) { .funnel-bar, .funnel-bar-h { display: none; } .jtl li { grid-template-columns: 1fr; gap: 0; } }

/* Scrollbalk binnen afgeronde vakken (filters, afgelopen uur): smal, zonder spoor en vrij van de ronde hoeken */
.filters::-webkit-scrollbar, .facet-list::-webkit-scrollbar, .live-hour::-webkit-scrollbar { width: 12px; }
.filters::-webkit-scrollbar-track, .facet-list::-webkit-scrollbar-track, .live-hour::-webkit-scrollbar-track { background: transparent; margin: 18px 0; }
.live-hour::-webkit-scrollbar-track, .facet-list::-webkit-scrollbar-track { margin: 2px 0; }
.facet-list::-webkit-scrollbar, .live-hour::-webkit-scrollbar { width: 10px; }
.facet-list::-webkit-scrollbar-thumb, .live-hour::-webkit-scrollbar-thumb { border-width: 3px; }
.filters::-webkit-scrollbar-thumb, .facet-list::-webkit-scrollbar-thumb, .live-hour::-webkit-scrollbar-thumb { background: rgba(13, 30, 39, .22); border-radius: 12px; border: 4px solid transparent; background-clip: padding-box; }
.filters::-webkit-scrollbar-thumb:hover, .facet-list::-webkit-scrollbar-thumb:hover, .live-hour::-webkit-scrollbar-thumb:hover { background-color: rgba(13, 30, 39, .38); }
@supports (-moz-appearance: none) { .filters, .facet-list, .live-hour { scrollbar-width: thin; scrollbar-color: rgba(13, 30, 39, .25) transparent; } }

/* ---------- Zaaglijst optimalisatie (/zaaglijst-optimalisatie): dezelfde onderdelen als de zaaglijst (tabel, kantenband,
   draadrichting, tekening). Het werkvlak vult het scherm; de uitleg staat eronder. */
.zs-screen { min-height: calc(100vh - var(--topbar-h, 108px)); display: flex; flex-direction: column; }
.zs-screen .page-wide { flex: 1; }
/* invoer links, tekening rechts: de tekening krijgt meer ruimte dan in de zaaglijst (alle platen onder elkaar) */
.page-wide.zs-app .col-main { flex: 999 1 790px; }
.zs-app .col-side { flex: 1 1 340px; position: static; }
/* kop: afdrukken en CSV in plaats van het winkelmandje */
.hdr-tool { width: auto; padding: 0 14px 0 12px; }
@media (max-width: 640px) { .hdr-tool { width: 40px; padding: 0; } .hdr-tool-label { display: none; } }
/* platen */
.zs-app table.parts { min-width: 700px; }
.zs-parts tr[data-row] td:nth-child(2) { min-width: 104px; }
.zs-app .parts td.actions { width: 78px; padding-right: 8px; }
.zs-stock td:first-child { width: auto; padding-left: 10px; }
.zs-stock td.c-name { min-width: 170px; }
.zs-stock td.c-name input { width: 100%; }
.zs-stock td.c-l, .zs-stock td.c-w, .zs-stock td.c-q { width: 92px; }
.zs-stock td.c-l input, .zs-stock td.c-w input, .zs-stock td.c-q input { min-width: 84px; width: 84px; }
.zs-stock td.actions { width: 48px; }
.zs-money { display: inline-flex; align-items: center; gap: 4px; }
.zs-money small { color: var(--muted); font-size: 13px; }
.zs-money input { width: 88px; }
.zs-parts td.sel-cell { width: 44px; }
.zs-parts td.c-mat select { min-width: 140px; }
.zs-link { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.zs-link:hover { color: var(--ink); text-decoration-color: currentColor; }
.zs-file { position: relative; }
/* instellingen */
.zs-set { display: flex; flex-wrap: wrap; gap: 16px 36px; align-items: flex-start; }
.zs-set > label, .zs-set > div { display: flex; flex-direction: column; gap: 6px; }
.zs-set .mono-label { line-height: 1; }
.zs-unit { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.zs-unit input { width: 84px; height: var(--ctl-sm); text-align: right; }
.zs-unit small { color: var(--muted); font-size: 13px; white-space: nowrap; }
/* uitkomst: kerncijfers, tekening per plaat, zaagvolgorde */
.zs-side { gap: 18px; }
.zs-mat + .zs-mat { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.zs-mat > .h4 { margin-bottom: 8px; }
.zs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 12px 14px; margin: 4px 0 12px; }
.zs-stats > div { display: flex; flex-direction: column; gap: 2px; }
.zs-stats strong { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.zs-stats .small { line-height: 1.3; }
.zs-board { margin: 14px 0 0; }
.zs-board figcaption { margin-bottom: 6px; }
/* in het onderdeel: naam, nummer (zoals in de zaaglijst) en de maat eronder; wat niet past, valt weg */
.zs-page .piece { flex-direction: column; gap: 2px; }
.zs-page .sheet.is-big .pc-tag { padding: 2px; }
.zs-page .sheet.is-big .pc-tag b { min-width: 18px; height: 18px; font-size: 10.5px; }
.pc-n, .pc-dim { position: relative; z-index: 2; max-width: calc(100% - 10px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.pc-n { font-size: 11.5px; font-weight: 600; color: var(--ink); }
.pc-dim { font-size: 10.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
@container (max-height: 60px) { .pc-n { display: none; } }
@container (max-height: 38px) { .pc-dim { display: none; } }
@container (max-width: 52px) { .pc-n { display: none; } }
@container (max-width: 68px) { .pc-dim { display: none; } }
.zs-off { position: absolute; display: flex; align-items: center; justify-content: center; padding: 2px; pointer-events: none; overflow: hidden; container-type: size; }
.zs-off > span { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; background: rgba(255,255,255,.7); padding: 1px 6px; border-radius: 999px; }
@container (max-width: 72px) { .zs-off > span { display: none; } }
@container (max-height: 20px) { .zs-off > span { display: none; } }
.zs-cut { position: absolute; z-index: 3; width: 2px; margin-left: -1px; background: transparent; pointer-events: none; }
.zs-cut.is-h { height: 2px; width: auto; margin: -1px 0 0; }
.zs-cut.is-hl { background: var(--orange); box-shadow: 0 0 0 1px rgba(255,255,255,.7); }
.zs-cuts { margin-top: 8px; }
.zs-cuts summary { cursor: pointer; font-size: 13.5px; font-weight: 700; padding: 4px 0; }
.zs-cuts ol { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.zs-cuts li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 3px 6px; border-radius: 6px; font-size: 13px; }
.zs-cuts li:hover { background: var(--orange-soft); }
.zs-cuts .zs-ct { font-variant-numeric: tabular-nums; }
.zs-to { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.zs-chip { display: inline-flex; gap: 4px; align-items: center; padding: 1px 8px; border-radius: 999px; background: var(--grey); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zs-chip b { font-weight: 700; }
.zs-chip.is-piece { background: #fff; border: 1px solid var(--line); }
.zs-chip.is-rest { background: #fff; border: 1px dashed var(--line-2); color: var(--muted); }
.zs-cta { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.zs-print-head, .zs-print-parts { display: none; }
.zs-dlg { width: min(640px, calc(100vw - 32px)); border: 0; border-radius: 12px; padding: 0; box-shadow: 0 24px 64px rgba(13,30,39,.3); }
.zs-dlg::backdrop { background: rgba(13,30,39,.45); }
.zs-dlg-in { padding: 18px 20px 20px; display: grid; gap: 10px; }
.zs-dlg-in p { margin: 0; }
.zs-dlg textarea { font-family: var(--mono); font-size: 13px; }
/* uitleg onder het werkvlak, in de stijl van de homepage */
.zs-doc { border-top: 1px solid var(--line); margin-top: 8px; }
.zs-doc .band-grey { padding: 64px 0 56px; }
.zs-doc .section { padding: 64px 0; }
.zs-doc .h-xl { margin-bottom: 18px; font-size: clamp(24px, 2.8vw, 34px); }
.zs-lead { max-width: 720px; margin-bottom: 26px; }
.zs-doc p { max-width: 720px; }
.zs-dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 40px; }
.zs-dl dt { font-weight: 700; font-size: 16px; }
.zs-dl dd { margin: 4px 0 0; color: var(--muted); line-height: 1.55; }
.zs-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start; }
.zs-sizes td { font-variant-numeric: tabular-nums; }
.zs-sizes a { font-weight: 600; }
.zs-acc-head { margin-top: 28px; }
@media (max-width: 860px) { .zs-two, .zs-dl { grid-template-columns: minmax(0, 1fr); } .zs-doc .band-grey, .zs-doc .section { padding: 48px 0; } }
/* telefoon: platen als kaartjes (net als de onderdelen) */
[data-zs-proj] { display: contents; }
@media (max-width: 640px) {
  .zs-app table.parts { min-width: 0; }
  .zs-app .toolbar .btn-ghost { flex: none; }
  table.zs-stock tr[data-row] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  table.zs-stock td:first-child { width: auto !important; padding: 0; }
  table.zs-stock .c-name { grid-column: 1 / 6; grid-row: 1; min-width: 0; }
  table.zs-stock .actions { grid-column: 6; grid-row: 1; display: flex; justify-content: flex-end; align-self: center; }
  table.zs-stock .c-l { grid-column: 1 / 3; grid-row: 2; }
  table.zs-stock .c-w { grid-column: 3 / 5; grid-row: 2; }
  table.zs-stock .c-q { grid-column: 5 / 7; grid-row: 2; }
  table.zs-stock .c-l input, table.zs-stock .c-w input, table.zs-stock .c-q input { width: 100%; min-width: 0 !important; }
  table.zs-stock .dir-cell { grid-column: 1 / 2; grid-row: 3; text-align: left; }
  table.zs-stock .c-price { grid-column: 2 / 5; grid-row: 3; }
  table.zs-stock .c-price::before { text-align: left; }
  table.zs-stock .zs-money input { width: 100%; }
  table.zs-parts .c-mat { grid-column: 1 / -1; grid-row: 4; }
  table.zs-parts .c-mat select { width: 100%; }
  .zs-set { gap: 14px 24px; }
  .zs-stats { grid-template-columns: 1fr 1fr; }
  .zs-cuts li { grid-template-columns: 24px minmax(0, 1fr); }
  .zs-cuts .zs-to { grid-column: 2; justify-content: flex-start; }
}
/* afdrukken: alleen het zaagschema, de zaagvolgorde en de onderdelenlijst */
@page { margin: 12mm; }
@media print {
  body.zs-page .app-top, body.zs-page .toolbar, body.zs-page .col-main, body.zs-page .zs-doc, body.zs-page .zs-cta, body.zs-page .lang-ask { display: none !important; }
  body.zs-page .zs-screen { min-height: 0; display: block; }
  body.zs-page .page-wide { padding: 0; gap: 0; }
  body.zs-page .cols { display: block; }
  body.zs-page .col-side { display: block; }
  body.zs-page .col-side > * + * { margin-top: 12px; }
  body.zs-page .card { border-color: #999; }
  body.zs-page .zs-print-head { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; margin-bottom: 10px; font-size: 12px; color: #444; }
  body.zs-page .zs-print-head strong { font-size: 18px; color: #000; width: 100%; }
  body.zs-page .zs-print-parts { display: table; width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 12px; }
  body.zs-page .zs-print-parts th { text-align: left; font-weight: 600; padding: 4px 6px; border-bottom: 1px solid #999; }
  body.zs-page .zs-print-parts td { padding: 3px 6px; border-bottom: 1px solid #ddd; }
  body.zs-page .zs-print-parts .num { text-align: right; }
  body.zs-page .zs-board, body.zs-page .zs-cuts li { break-inside: avoid; }
  body.zs-page .zs-board figcaption { break-after: avoid; }
  body.zs-page .zs-cut { display: none; }
  body.zs-page .sheet, body.zs-page .piece, body.zs-page .eb { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.zs-banner { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; padding: 12px 12px 12px 16px; border-radius: 8px; background: var(--orange-soft); border: 1px solid #F6C9AC; }
.zs-banner > div { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--orange-ink); }
.zs-banner strong { color: var(--ink); }

/* winkelmandje: klantgegevens voor de factuur (verplicht vóór de betaalpagina) */
.klant .muted.small { margin: -4px 0 12px; }
.klant-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.klant-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; font-weight: 600; }
.klant-grid .klant-wide { grid-column: 1 / -1; }
.klant-addr { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.klant-sub { margin: 20px 0 8px; }
.klant .check { margin-bottom: 8px; }
@media (max-width: 640px) { .klant-grid, .klant-addr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .klant-addr label:first-child { grid-column: 1 / -1; } }
.co-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.co-choice .card { display: flex; flex-direction: column; }
.co-choice .stack { margin-top: auto; padding-top: 6px; }
@media (max-width: 640px) { .co-choice { grid-template-columns: minmax(0, 1fr); } }

/* ---- hoofdpagina: video uit de werkplaats en Google-reviews (één grijze band) ---- */
.workshop { padding: 64px 0 56px; }
.kicker { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin: 0 0 10px; }
.vid-h { font-size: clamp(26px, 2.8vw, 34px); font-weight: 800; line-height: 1.2; margin: 0 0 14px; color: var(--navy); }
.vid-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; margin-bottom: 72px; }
.vid-copy { max-width: 500px; }
.vid-copy p:not(.kicker) { margin: 0 0 22px; font-size: 16px; line-height: 1.55; }
.btn-pill { border-radius: 999px; padding-left: 18px; padding-right: 18px; }
.video { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--navy); isolation: isolate; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-play { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--navy); cursor: pointer; position: relative; }
.video-play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-btn { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; margin: -24px 0 0 -34px; border-radius: 12px; background: rgba(23,23,23,.8); color: #fff; display: flex; align-items: center; justify-content: center; transition: background .15s ease; }
.video-btn svg { width: 30px; height: 30px; }
.video-play:hover .video-btn, .video-play:focus-visible .video-btn { background: #FF0000; }
.video-play:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }
@media (max-width: 900px) { .vid-row { grid-template-columns: 1fr; gap: 24px; margin-bottom: 56px; } .vid-copy { max-width: none; } }
@media (prefers-reduced-motion: reduce) { .video-btn { transition: none; } }

.stars { display: inline-flex; gap: 2px; color: var(--line-2); vertical-align: middle; }
.stars .is-on { color: #FBBC04; }
.stars svg { display: block; }
.rv-sum { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 14px 0 28px; }
.rv-avg { font-size: 32px; font-weight: 800; line-height: 1; }
.rv-sum .stars svg { width: 20px; height: 20px; }
.rv-n { color: var(--muted); font-size: 14px; }
.rv-g { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; }
.rv-g:hover { border-color: var(--ink); color: var(--ink); }
/* reviews: lopende band (ticker) met vervagende randen; stopt bij muis of focus */
.rv-ticker { overflow: hidden; margin: 0 -16px; padding: 4px 0 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%); }
.rv-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; width: max-content; }
/* alleen de lopende band beweegt (de rij staat er dubbel in, zodat hij naadloos rondgaat); rustig tempo */
.rv-ticker .rv-list { animation: rv-tick calc(var(--n) * 28s) linear infinite; }
.rv-ticker.is-js .rv-list { animation: none; will-change: transform; } /* met JavaScript: de band wordt gemeten en loopt altijd rond, op elke schermbreedte */
.rv-ticker:hover .rv-list, .rv-ticker:focus-within .rv-list { animation-play-state: paused; }
@keyframes rv-tick { to { transform: translateX(calc(-50% - 7px)); } }
@media (prefers-reduced-motion: reduce) {
  .rv-ticker { overflow-x: auto; -webkit-mask-image: none; mask-image: none; padding-inline: 16px; }
  .rv-ticker .rv-list { animation: none; }
  .rv-card[aria-hidden="true"] { display: none; }
}
.rv-card { flex: 0 0 300px; display: flex; }
.rv-link { flex: 1; background: #fff; border-radius: 8px; padding: 20px; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(13,30,39,.06); color: var(--ink); text-decoration: none; border: 1px solid transparent; transition: border-color .15s; }
.rv-link:hover { border-color: var(--line-2); color: var(--ink); }
.rv-link:hover .rv-more { text-decoration: underline; }
img.rv-av { object-fit: cover; }
.rv-top { display: flex; align-items: center; gap: 10px; }
.rv-av { width: 32px; height: 32px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex: 0 0 auto; }
.rv-name { font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-src { display: inline-flex; }
.rv-src svg { width: 18px; height: 18px; }
.rv-meta { display: flex; align-items: center; gap: 10px; white-space: nowrap; margin: 8px 0 14px 42px; font-size: 12.5px; color: var(--muted); }
.rv-meta .stars svg { width: 14px; height: 14px; }
.rv-text { margin: 0 0 16px; min-height: calc(3 * 1.55em); font-size: 14.5px; line-height: 1.55; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rv-more { margin-top: auto; font-size: 13px; color: var(--info); text-decoration: none; }
.rv-links { margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 640px) { .workshop { padding: 48px 0 40px; } .rv-card { flex-basis: 270px; } }
.acc-danger { border-color: #F1C5C0; }
.acc-del summary { cursor: pointer; }
.acc-del summary h2 { display: inline; margin: 0; }
.acc-del[open] summary { margin-bottom: 12px; }

/* beheer: SmartCut en Zaagplan vergelijken in het zaagschema */
.eng-box { margin: 10px 0 14px; padding: 12px; border: 1px dashed var(--line-2); border-radius: 8px; background: #FAFAF8; }
.eng-seg { grid-template-columns: 1fr 1fr; margin-bottom: 10px; height: var(--ctl-sm); }
.eng-seg span { font-size: 13px; }
.eng-seg input:disabled + span { opacity: .45; }
.eng-table { font-size: 12.5px; margin: 0 0 6px; }
.eng-table td, .eng-table th { padding: 5px 4px; white-space: nowrap; }
.eng-table th { letter-spacing: 0; }
.eng-table tr.is-on td:first-child { font-weight: 700; }
.eng-table .eng-win { color: var(--ok); font-weight: 700; }
.eng-box > p { margin: 0; }

/* winkelmandje: reststukken meenemen of niet */
.offcut-box { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.offcut-box .h4 { margin: 0 0 6px; }
.offcut-box p { margin: 0 0 10px; }
.choice-sm .choice-btn { min-height: 56px; padding: 10px 14px; }

/* zaaglijst: uitleg kantenband (plaatje met de zijden + wat een klik doet) */
.parts tr.sub td.sub-help { text-align: right; vertical-align: bottom; padding: 0 14px 14px 0; font-size: 13px; }
.sub-all { color: var(--ink); font-weight: 500; white-space: nowrap; }
.sub-arrow::after { content: '→'; }
.sub-m { display: none; }
.eh-q { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 6px; border-radius: 50%; border: 1.5px solid var(--navy); background: #fff; color: var(--navy); font: 700 12px/1 var(--sans); letter-spacing: 0; cursor: pointer; vertical-align: middle; }
.eh-q:hover, .eh-q:focus-visible { background: var(--navy); color: #fff; }
.edge-pop { position: absolute; z-index: 60; background: #fff; border-radius: 12px; padding: 16px 18px 14px; box-shadow: 0 18px 48px rgba(13,30,39,.22), 0 0 0 1px rgba(13,30,39,.08); }
.edge-pop::before { content: ''; position: absolute; top: -7px; left: var(--arrow, 50%); width: 14px; height: 14px; background: #fff; transform: rotate(45deg); box-shadow: -1px -1px 0 rgba(13,30,39,.08); }
.eh-foot { display: flex; justify-content: flex-end; margin-top: 12px; }
.edge-help { display: flex; align-items: center; gap: 16px; }
.eh-pic { flex: none; overflow: visible; }
.eh-lab { font-family: var(--mono); font-size: 11px; font-weight: 700; fill: var(--ink); }
.eh-dim { font-family: var(--sans); font-size: 9px; fill: var(--muted); }
.eh-text { display: grid; gap: 7px; max-width: 480px; }
.eh-text p { margin: 0; }
.eh-title { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.eh-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; font-weight: 500; color: var(--ink); }
.eh-step { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.eh-box { width: 22px; height: 22px; border-radius: 6px; border: 1.5px dashed var(--line-2); background: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 700; font-size: 12px; color: var(--ink); }
.eh-box.is-on { background: var(--navy); border: 1.5px solid var(--navy); color: #fff; }
.eh-arrow { color: var(--muted); font-size: 17px; line-height: 1; }
.eh-note { font-size: 13px; color: #2F3E47; line-height: 1.45; }
.eh-none { margin: 0; font-size: 14px; color: var(--ink); }
@media (max-width: 640px) {
  .parts tr.sub td.sub-help { padding: 0; text-align: left; display: flex !important; justify-content: space-between; align-items: center; }
  .sub-m { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .sub-arrow::after { content: '↓'; }
  .edge-help { align-items: flex-start; gap: 12px; }
  .eh-pic { width: 92px; height: 59px; }
}

/* optimalisatie: onderdelen per materiaal (tabbladen) en verplaatsen naar een ander materiaal */
.zs-mat-tabs { margin-bottom: 10px; }
.zs-mat-tabs .tab { height: 36px; }
.zs-count { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--grey); color: var(--ink); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.tab.is-on .zs-count { background: var(--navy); color: #fff; }
.zs-move { position: relative; display: inline-flex; }
.zs-move-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 200px; background: #fff; border-radius: 10px; padding: 6px; box-shadow: 0 14px 36px rgba(13,30,39,.2), 0 0 0 1px rgba(13,30,39,.08); display: grid; }
.zs-move-h { font-size: 12px; color: var(--muted); padding: 4px 8px 6px; }
.zs-move-menu button { text-align: left; border: 0; background: none; font: inherit; font-size: 14px; padding: 8px; border-radius: 6px; cursor: pointer; color: var(--ink); white-space: nowrap; }
.zs-move-menu button:hover, .zs-move-menu button:focus-visible { background: var(--grey); }
.zs-parts .actions { white-space: nowrap; }
.zs-move-menu button { display: flex; align-items: center; gap: 8px; }
.zs-move-menu button svg { flex: none; color: var(--muted); }
.zs-move-h { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 8px; }
.zs-move-h { text-align: left; }
.zs-parts.is-multi td.sel-cell, .zs-parts.is-multi th.sel-cell { width: 58px; padding-left: 10px; white-space: nowrap; }
.zs-move-h { border-top: 0; margin-top: 0; padding-top: 4px; }

/* ---------------------------------------------------------------- ruimteplanner (proef) */
.rp { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 20px; align-items: start; }
.rp-main { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rp-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rp-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.rp-bar-r { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rp-bar-r .kseg button { flex: 0 1 auto; }
.rp-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--grey); }
.rp-tabs button { height: 32px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.rp-tabs button:hover { color: var(--ink); }
.rp-tabs button.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(13,30,39,.14); }
.rp-stage { position: relative; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(#F7F7F4, #ECECE7); overflow: hidden; }
.rp-pane[hidden] { display: none !important; }
.rp-pane > svg { display: block; width: 100%; height: min(66vh, 640px); touch-action: none; user-select: none; -webkit-user-select: none; }
.rp-3d { border: 0; border-radius: 0; }
.rp-3d .kast-canvas { height: min(66vh, 640px); }
.rp-hint { margin: 0; min-height: 1.2em; }
.rp-toast { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 14px; border-radius: 8px; background: var(--navy); color: #fff; font-size: 13.5px; }
.rp-toast[hidden] { display: none; }
.rp-toast button { border: 0; background: none; padding: 0; color: #FFB27F; font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.btn-ghost:disabled { opacity: .45; cursor: default; }

/* plattegrond */
.rp-floor { fill: #fff; }
.rp-grid { stroke: #EEEEEA; stroke-width: 1; vector-effect: non-scaling-stroke; }
.rp-wall { fill: var(--navy); }
.rp-wlab { font-family: Inter, system-ui, sans-serif; font-weight: 600; fill: var(--muted); text-anchor: middle; }
.rp-top { fill: #EFE6D4; stroke: #C4B190; stroke-width: 1; vector-effect: non-scaling-stroke; }
.rp-fill { fill: url(#rp-hatch); stroke: var(--orange); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.rp-blk { cursor: grab; outline: none; }
.rp-blk:active { cursor: grabbing; }
.rp-body { fill: #fff; stroke: var(--navy); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.rp-blk.is-hoog .rp-body { fill: #E1E8EC; }
.rp-blk.is-vw .rp-body { fill: #F0F2F3; }
.rp-blk.is-act:hover .rp-body { fill: #FFF6EF; }
.rp-front { stroke: var(--navy); stroke-width: 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.rp-blk.is-clash .rp-body { stroke: #C62828; fill: #FDECEC; }
.rp-blk.is-sel .rp-body { fill: var(--orange-soft); stroke: var(--orange); stroke-width: 2.5; }
.rp-blk.is-sel .rp-front { stroke: var(--orange); }
.rp-blk:focus-visible .rp-body { stroke: var(--orange); stroke-width: 3; }
.rp-blk.is-dim { pointer-events: none; opacity: .55; }
.rp-blk.is-dim.is-boven .rp-body { fill: none; stroke-dasharray: 7 5; }
.rp-blk.is-dim .rp-front { stroke-width: 1.5; }
.rp-lab { font-family: Inter, system-ui, sans-serif; font-weight: 700; fill: var(--navy); text-anchor: middle; pointer-events: none; }
.rp-dim { font-family: Inter, system-ui, sans-serif; fill: var(--muted); text-anchor: middle; pointer-events: none; }
.rp-gap { stroke: var(--orange-ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; pointer-events: none; }
.rp-gapt { font-family: Inter, system-ui, sans-serif; font-weight: 700; fill: var(--orange-ink); text-anchor: middle; pointer-events: none; }

/* wandaanzicht */
.rp-ewall { fill: #fff; stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rp-efloor { stroke: var(--navy); stroke-width: 3; vector-effect: non-scaling-stroke; }
.rp-eside { fill: #E8EAEB; stroke: rgba(13,30,39,.3); stroke-width: 1; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.rp-eblk { cursor: grab; outline: none; }
.rp-eblk:active { cursor: grabbing; }
.rp-ebody { fill: #F3F3F0; stroke: var(--navy); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.rp-eleaf { fill: #fff; stroke: rgba(13,30,39,.5); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rp-eleaf.is-open { fill: #EDE8DF; }
.rp-eleaf.is-vw { fill: #F7F7F5; }
.rp-esym { fill: none; stroke: rgba(13,30,39,.38); stroke-width: 1.1; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.rp-egap { stroke: rgba(13,30,39,.5); stroke-width: 1.1; vector-effect: non-scaling-stroke; pointer-events: none; }
.rp-eshelf { stroke: #B9A88E; stroke-width: 2.5; vector-effect: non-scaling-stroke; pointer-events: none; }
.rp-eapp { fill: #2B2E31; opacity: .14; pointer-events: none; }
.rp-etop { fill: #D9C8A8; stroke: #9F8A66; stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.rp-eplint { fill: #DDD8CD; stroke: rgba(13,30,39,.3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rp-efin { fill: #E9EEF1; stroke: #7F95A3; stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.rp-kop { fill: #7F95A3; pointer-events: none; }
.rp-efill { fill: #F6E4D5; stroke: var(--orange); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.rp-eblk:hover .rp-ebody { stroke-width: 2.5; }
.rp-eblk.is-clash .rp-ebody { stroke: #C62828; stroke-width: 2.5; }
.rp-eblk.is-sel .rp-ebody { stroke: var(--orange); stroke-width: 3; }
.rp-eblk.is-sel .rp-eleaf { fill: #FFF6EF; }
.rp-eblk:focus-visible .rp-ebody { stroke: var(--orange); stroke-width: 3; }
.rp-ebadge { fill: var(--navy); pointer-events: none; }
.rp-eblk.is-sel .rp-ebadge { fill: var(--orange); }
.rp-ebadget { font-family: Inter, system-ui, sans-serif; font-weight: 700; fill: #fff; text-anchor: middle; pointer-events: none; }
.rp-edim { stroke: var(--muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rp-edimt { font-family: Inter, system-ui, sans-serif; font-weight: 600; fill: var(--muted); text-anchor: middle; }

/* zijpaneel */
.rp-selcard { border-color: var(--line-2); }
.rp-selhead { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.rp-selhead strong { display: block; font-size: 16px; line-height: 1.25; }
.rp-selhead small { display: block; font-size: 12.5px; }
.rp-selhead .btn-x { margin-left: auto; align-self: flex-start; }
.rp-badge { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 42px; height: 42px; padding: 0 8px; border-radius: 8px; background: var(--orange); color: #fff; font-weight: 700; font-size: 15px; }
.rp-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin: 0 0 12px; }
.rp-sub { margin-left: 28px; grid-template-columns: 1fr; max-width: 180px; }
.rp-num { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.rp-in { display: flex; align-items: center; gap: 6px; }
.rp-in input { width: 100%; min-width: 0; height: var(--ctl-sm); padding: 0 8px; text-align: right; font-size: 14px; }
.rp-in small { font-weight: 400; }
.rp-check { display: grid; grid-template-columns: 18px 1fr; gap: 2px 10px; align-items: start; margin: 0 0 10px; font-size: 14px; cursor: pointer; }
.rp-check input { margin-top: 2px; }
.rp-check small { grid-column: 2; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.rp-selbtns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.rp-del { color: #B42318; }
.rp-vorm button { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 6px; font-size: 12px; line-height: 1.2; flex: 1 1 0; }
.rp-vicon { width: 34px; height: 24px; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.rp-vorm button.is-on .rp-vicon { stroke: var(--orange); }
.rp-addwall { margin-bottom: 14px; }
.rp-addgrp + .rp-addgrp { margin-top: 12px; }
.rp-addlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; }
.rp-add { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; padding: 10px 6px 8px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; font: inherit; font-size: 12px; font-weight: 600; line-height: 1.25; text-align: center; color: var(--ink); cursor: pointer; }
.rp-add:hover { border-color: var(--orange); background: #FFF8F3; }
.rp-ticon { height: 44px; width: 100%; }
.rp-ticon .rp-ebody, .rp-ticon .rp-eleaf { stroke-width: 1; }

/* kasteditor vanuit de planner */
.rp-editbar { margin-top: 16px; }
.rp-editbar-in { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--orange); border-radius: 8px; background: #FFF8F3; }
.rp-editbar-in p { margin: 0; flex: 1 1 260px; }
.rp-editbar-in p strong { display: block; }
.rp-editbar-in p span { color: var(--muted); font-size: 13.5px; }
.rp-editbar-btns { display: flex; gap: 8px; align-items: center; }

@media (max-width: 1040px) {
  .rp { grid-template-columns: 1fr; }
  .rp-main { position: static; }
  .rp-pane > svg { height: auto; max-height: 62vh; }
  .rp-3d .kast-canvas { height: 50vh; }
}

/* ruimteplanner op www.lenselink.nl: apparatuur, decoratie, vloer en wanden */
.rp-item { cursor: grab; outline: none; }
.rp-item.is-dim { pointer-events: none; opacity: .4; }
.rp-ibody { fill: rgba(13,30,39,.08); stroke: #0D1E27; stroke-width: 2; vector-effect: non-scaling-stroke; }
.rp-ibody.is-wand { fill: rgba(13,30,39,.05); stroke-dasharray: 6 4; }
.rp-item.is-plant .rp-ibody { fill: rgba(79,122,58,.18); stroke: #4F7A3A; }
.rp-isym { fill: none; stroke: #0D1E27; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.rp-isym.is-plant { fill: rgba(79,122,58,.35); stroke: none; }
.rp-ilab { text-anchor: middle; fill: #0D1E27; font-weight: 600; pointer-events: none; }
.rp-item.is-sel .rp-ibody, .rp-item:focus-visible .rp-ibody { stroke: var(--orange); stroke-width: 3; fill: rgba(232,89,12,.14); }
.rp-badge-item { background: #0D1E27; }
.rp-swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.rp-sw { display: grid; min-width: 0; gap: 4px; justify-items: start; padding: 6px; border: 1.5px solid var(--line, #D9DEDD); border-radius: 6px; background: #fff; cursor: pointer; text-align: left; }
.rp-sw span { width: 100%; height: 22px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.rp-sw small { font-size: 12px; line-height: 1.2; min-width: 0; max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
.rp-sw.is-on { border-color: #0D1E27; box-shadow: inset 0 0 0 1px #0D1E27; }
.rp-sw span.is-none { background: repeating-linear-gradient(135deg, #fff 0 5px, #ECEEEE 5px 10px); }
.rp-sw-eigen { position: relative; }
.rp-sw-eigen span { position: relative; overflow: hidden; }
.rp-sw-eigen input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.rp-sw-eigen:focus-within { outline: 2px solid var(--orange); outline-offset: 1px; }
.rp-wrap { flex-wrap: wrap; }
.rp-raam .rp-ibody { fill: #fff; stroke: #0D1E27; }
.rp-iglas { stroke: #5B8BA3; stroke-width: 2; vector-effect: non-scaling-stroke; }
.rp-raam.is-sel .rp-ibody, .rp-raam:focus-visible .rp-ibody { fill: #FBEFE6; }
.rp-espat { stroke: #A9A39A; stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.rp-eraam { cursor: grab; outline: none; }
.rp-eraam-k { fill: #2C2F33; }
.rp-eraam-g { fill: #DCEAF0; }
.rp-eraam-b { fill: #ECEAE5; stroke: #8A857D; stroke-width: 1; vector-effect: non-scaling-stroke; }
.rp-eraam.is-sel .rp-eraam-g, .rp-eraam:focus-visible .rp-eraam-g { fill: #FBE3D3; }
.rp-eraam.is-sel .rp-eraam-k, .rp-eraam:focus-visible .rp-eraam-k { fill: var(--orange); }
.rp-idoor { fill: none; stroke: #0D1E27; stroke-width: 1.5; vector-effect: non-scaling-stroke; pointer-events: none; }
.rp-idoor.is-arc { stroke: #8A857D; stroke-dasharray: 4 3; }
.rp-kolom .rp-ibody { fill: #D9D6D0; stroke: #0D1E27; }
.rp-kolom.is-sel .rp-ibody, .rp-kolom:focus-visible .rp-ibody { fill: #FBE3D3; stroke: var(--orange); }
.rp-ekolom { cursor: pointer; outline: none; }
.rp-ekolom rect { fill: #E4E1DB; stroke: #8A857D; stroke-width: 1; vector-effect: non-scaling-stroke; }
.rp-ekolom.is-sel rect, .rp-ekolom:focus-visible rect { fill: #FBE3D3; stroke: var(--orange); }
.rp-edeur { cursor: grab; outline: none; }
.rp-edeur-k { fill: #F7F6F3; stroke: #8A857D; stroke-width: 1; vector-effect: non-scaling-stroke; }
.rp-edeur-b { fill: #ECEAE5; stroke: #8A857D; stroke-width: 1; vector-effect: non-scaling-stroke; }
.rp-edeur-b.is-open { fill: #fff; stroke-dasharray: 4 3; }
.rp-edeur.is-sel .rp-edeur-k, .rp-edeur:focus-visible .rp-edeur-k { stroke: var(--orange); stroke-width: 2; }
.rp-edeur.is-sel .rp-edeur-b, .rp-edeur:focus-visible .rp-edeur-b { fill: #FBE3D3; }
.rp-sliders { display: grid; gap: 10px; margin: 10px 0 4px; }
.rp-slider { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; font-size: 13px; }
.rp-slider span { grid-column: 1 / -1; font-weight: 600; }
.rp-slider input[type="range"] { width: 100%; accent-color: var(--orange); }
.rp-slider output { font-variant-numeric: tabular-nums; font-size: 12.5px; min-width: 64px; text-align: right; }
.rp-itemadd { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-quote { max-width: 560px; }
.rp-quote label { display: grid; gap: 4px; font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.rp-quote input, .rp-quote textarea { font: inherit; font-weight: 400; padding: 9px 10px; border: 1.5px solid #C3CBC9; border-radius: 6px; }
.rp-qgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 560px) { .rp-qgrid { grid-template-columns: 1fr; } }
/* eigen kop op www */
.www-app-top { background: #0D1E27; color: #fff; }
.www-app-top-in { display: flex; align-items: center; gap: 18px; min-height: 60px; flex-wrap: wrap; }
.www-app-top img { height: 26px; width: auto; display: block; }
.www-app-top h1 { font-size: 18px; margin: 0; color: #fff; font-weight: 600; }
.www-app-top nav { margin-left: auto; display: flex; gap: 18px; align-items: center; font-size: 15px; }
.www-app-top a { color: #fff; text-decoration: none; }
.www-app-top a:hover { text-decoration: underline; }
.www-app-intro { padding: 18px 0 4px; }
.www-app-intro p { margin: 0; max-width: 70ch; }

.pd-uitsparing { fill: #fff; stroke: var(--orange); stroke-width: 1.2; stroke-dasharray: 3 2; }
.rp-eleaf.is-glass { fill: #1B1D1F; stroke: #4A4E52; }
.rp-epolka { stroke: none; opacity: .9; }
.rp-polka { margin: 4px 0 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rp-polka-order { margin: 4px 0 0; padding-left: 18px; }
.rp-polka-order li { margin-bottom: 3px; }

/* beheer: aanvraag beoordelen, offerte maken, afwijzen */
.av-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.av-side { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 960px) { .av-grid { grid-template-columns: minmax(0, 1fr); } }
.av-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.av-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }
.av-log li { padding-left: 12px; border-left: 2px solid var(--line); }
.av-lines td { vertical-align: top; padding: 8px 6px; }
.av-lines input, .av-lines select { width: 100%; }
.av-lines .av-detail { margin-top: 6px; font-size: 13px; height: var(--ctl-sm); }
.av-lines .av-num { width: 96px; text-align: right; }
.av-lines td:first-child { min-width: 260px; }
.av-del { width: var(--ctl-sm); padding: 0; font-size: 18px; }
.av-under { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin: 10px 0 8px; }
.av-totals { margin: 0; min-width: 260px; font-size: 14px; }
.av-totals div { display: flex; justify-content: space-between; gap: 24px; padding: 4px 0; }
.av-totals dt { color: var(--muted); }
.av-totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.av-totals .av-grand { border-top: 1px solid var(--ink); margin-top: 4px; padding-top: 8px; font-weight: 800; font-size: 16px; }
.av-totals .av-grand dt { color: var(--ink); }
.av-calc summary, .av-reject summary { cursor: pointer; }
.av-reasons { border: 0; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 2px; }
.s-in-behandeling { background: var(--info-soft); color: var(--info); }
.s-offerte { background: var(--orange-soft); color: var(--orange-ink); }
.s-akkoord { background: var(--ok-soft); color: var(--ok); }
.s-niet-akkoord, .s-afgewezen { background: #FBE9E4; color: var(--err); }
/* bouwblokken: groepen als tabjes */
.rp-addtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.rp-addtabs .chip-light { height: 30px; font-size: 12.5px; }
.rp-add small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); line-height: 1.3; }

/* ======================================================================= interieurplanner (www): donker, volle breedte */
/* thema: donker (standaard, het donkerblauw) of licht; de bovenbalk blijft altijd donker (wit logo, zoals de site) */
.studio-page, .st-top {
  --st-bg: #0A161D; --st-top: #0D1E27; --st-left: #0C1B23; --st-card: #0F222C; --st-raise: #142B37; --st-hover: #13293A; --st-hover2: #1F3846;
  --st-line: #1F3846; --st-line2: #2B4757; --st-ink: #E6EDF1; --st-strong: #fff; --st-soft: #C9D5DC; --st-muted: #93A9B5; --st-on: #3A2213; --st-onb: #5A3A28;
  --st-accent: #FF8A4C; --st-warn: #FFD9C2; --st-overlay: rgba(8,18,24,.94); --st-glass: rgba(13,30,39,.86); --st-shadow: rgba(0,0,0,.45);
  --st-stage1: #1B3442; --st-stage2: #0B1820; --st-del: #FFB49A;
}
.studio-page.st-light {
  --st-bg: #F3F4F2; --st-left: #FFFFFF; --st-card: #FFFFFF; --st-raise: #F1F3F2; --st-hover: #FFF6F0; --st-hover2: #EEF1F2;
  --st-line: #E3E6E5; --st-line2: #D3D9DB; --st-ink: #0D1E27; --st-strong: #0D1E27; --st-soft: #3D5361; --st-muted: #61747F; --st-on: #FFF1E8; --st-onb: #F7C9AC;
  --st-accent: #B5490B; --st-warn: #8A3A0A; --st-overlay: rgba(243,244,242,.96); --st-glass: rgba(255,255,255,.94); --st-shadow: rgba(13,30,39,.16);
  --st-stage1: #FFFFFF; --st-stage2: #E4E9EB; --st-del: #B3261E;
}
.studio-page { background: var(--st-bg); color: var(--st-ink); min-height: 100vh; }
.st-top { --ink: var(--st-ink); --muted: var(--st-muted); --line: var(--st-line); --line-2: var(--st-line2); --grey: var(--st-raise); --card: var(--st-card); --bg: var(--st-bg); color: var(--st-ink); }
.studio-page .skip:focus { z-index: 300; }
.studio-app { min-height: 100vh; }
.studio-app > .loading { color: var(--st-muted); padding: 40px; }
.st {
  --ink: var(--st-ink); --muted: var(--st-muted); --muted-light: var(--st-muted); --line: var(--st-line); --line-2: var(--st-line2); --grey: var(--st-raise); --card: var(--st-card); --bg: var(--st-bg);
  display: grid; grid-template-columns: 330px 300px minmax(0, 1fr); grid-template-rows: 58px minmax(0, 1fr);
  height: 100vh; height: 100dvh; gap: 0; color: var(--ink); background: var(--bg);
}
.st-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; padding: 0 18px; background: var(--st-top); border-bottom: 1px solid var(--line); min-width: 0; }
.st-logo img { width: 118px; height: auto; display: block; }
.st-title { font-weight: 700; font-size: 15px; color: var(--st-strong); padding-left: 18px; border-left: 1px solid var(--line-2); white-space: nowrap; }
.st-tabs { margin-left: 12px; }
.st .rp-tabs { background: var(--st-raise); border: 1px solid var(--line-2); }
.st .rp-tabs button { color: var(--st-soft); }
.st .rp-tabs button.is-on { background: #E8590C; color: #fff; }
.st-top-r { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.st-nav { display: flex; gap: 18px; font-size: 13.5px; font-weight: 600; }
.st-nav a { color: var(--st-soft); text-decoration: none; }
.st-nav a:hover { color: var(--st-strong); }
.st-left, .st-spec { overflow-y: auto; min-height: 0; padding: 18px 18px 40px; border-right: 1px solid var(--line); scrollbar-color: var(--st-line2) transparent; }
.st-left { background: var(--st-left); }
.st-spec { background: var(--st-card); }
.st-sec { padding: 0 0 18px; margin: 0 0 18px; border-bottom: 1px solid var(--line); }
.st-sec:last-child { border-bottom: 0; }
.st-h { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; margin: 0 0 14px; color: var(--st-strong); letter-spacing: 0; }
.st-h > span { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #E8590C; color: #fff; font-family: var(--mono); font-size: 11.5px; font-weight: 500; flex: none; }
.st-more > summary { cursor: pointer; list-style: none; margin: 0; }
.st-more > summary::-webkit-details-marker { display: none; }
.st-more > summary::after { content: '+'; margin-left: auto; color: #E8590C; font-size: 18px; font-weight: 400; }
.st-more[open] > summary::after { content: '–'; }
.st-more[open] > summary { margin-bottom: 14px; }
.st-h2 { font-size: 15px; margin: 0 0 10px; color: var(--st-strong); }
.st-muted, .st .muted { color: var(--muted); }
.st-main { grid-row: 2; position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; gap: 0; top: 0; }
.st-stage { flex: 1; min-height: 0; position: relative; border: 0; border-radius: 0; background: radial-gradient(120% 90% at 50% 30%, var(--st-stage1) 0%, var(--st-stage2) 70%); overflow: hidden; }
.st .rp-pane { position: absolute; inset: 0; }
.st .rp-pane > svg { width: 100%; height: 100%; }
.st .kast-canvas-wrap { border: 0; border-radius: 0; background: transparent; }
.st .kast-canvas, .st .rp-3d .kast-canvas { width: 100%; height: 100%; }
.st .kast-hint { color: var(--st-muted); left: 16px; bottom: 14px; right: auto; }
.st-cams { top: 16px; left: 16px; right: auto; background: var(--st-glass) !important; box-shadow: inset 0 0 0 1px var(--st-line2) !important; }
.st-cams button { color: var(--st-ink) !important; }
.st-cams button:hover { background: var(--st-hover2) !important; }
.st .rp-hint { position: absolute; left: 16px; bottom: 40px; margin: 0; color: var(--st-muted); max-width: 520px; pointer-events: none; }
.st .rp-toast { position: absolute; left: 50%; transform: translateX(-50%); top: 16px; bottom: auto; z-index: 6; max-width: min(640px, calc(100% - 32px)); }
/* offerte-blok rechtsonder op het beeld */
.st-quote { position: absolute; right: 18px; bottom: 18px; z-index: 5; width: 330px; max-width: calc(100% - 36px); }
.st-quote-in { background: var(--st-card); border: 1px solid var(--st-line2); border-radius: 12px; padding: 18px; box-shadow: 0 18px 40px var(--st-shadow); display: flex; flex-direction: column; gap: 12px; }
.st-quote-in > div { display: flex; flex-direction: column; gap: 2px; }
.st-quote-in small { font-size: 12px; color: var(--st-muted); font-weight: 600; }
.st-quote-in strong { font-size: 28px; font-weight: 800; color: var(--st-strong); letter-spacing: -0.02em; line-height: 1.15; }
.st-quote-in > div > span { font-size: 12.5px; color: var(--st-muted); }
.st-quote .btn-primary { width: 100%; }
.st-qmore summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--st-soft); }
.st-qmore p { font-size: 12.5px; color: var(--st-muted); margin: 8px 0; }
.st-qmore .mini td { color: var(--st-soft); border-color: var(--line); }
.st-qmore[open] { max-height: 40vh; overflow-y: auto; }
/* startscherm: designkeukens */
.st-start { position: absolute; inset: 0; z-index: 8; overflow-y: auto; background: var(--st-overlay); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 32px 24px; }
.st-start[hidden] { display: none; }
.st-start-in { width: min(980px, 100%); }
.st-start h1 { color: var(--st-strong); font-size: clamp(26px, 3.2vw, 38px); margin: 6px 0 10px; }
.st-lead { color: var(--st-soft); font-size: 16px; max-width: 620px; margin: 0 0 22px; }
.st-designs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.st-design { display: flex; flex-direction: column; gap: 8px; text-align: left; padding: 18px; border-radius: 12px; border: 1px solid var(--st-line2); background: var(--st-card); color: var(--st-ink); font: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.st-design:hover, .st-design:focus-visible { border-color: #E8590C; background: var(--st-hover); }
.st-design strong { font-size: 17px; color: var(--st-strong); }
.st-design > span { font-size: 13.5px; color: var(--st-muted); }
.st-design .st-dgo { color: var(--st-accent); font-weight: 700; margin-top: auto; padding-top: 6px; }
.st-dico { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.st-dico svg { width: 70px; height: 56px; stroke: var(--st-ink); }
.st-dtag { font-size: 11px; font-weight: 600; color: var(--st-accent); border: 1px solid var(--st-onb); border-radius: 999px; padding: 2px 8px; }
.st-empty { margin-top: 18px; background: none; border: 0; color: var(--st-muted); font: inherit; font-size: 13.5px; text-decoration: underline; cursor: pointer; padding: 0; }
.st-empty:hover { color: var(--st-strong); }
.st-steps { list-style: none; counter-reset: st; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 14px 0 20px; padding: 0; }
.st-steps li { counter-increment: st; display: grid; align-content: start; grid-template-columns: 26px 1fr; column-gap: 10px; row-gap: 2px; color: var(--st-muted); font-size: 13.5px; }
.st-steps li::before { content: counter(st); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; background: #E8590C; color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 13px; }
.st-steps strong { color: var(--st-strong); font-size: 15px; }
.st-stijlen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.st-alt { color: var(--st-muted); font-size: 13.5px; margin-top: 18px; }
.st-alt .st-empty { margin: 0; }
.st-herindeel { display: grid; gap: 8px; margin: 12px 0 6px; padding: 12px; border: 1px solid var(--st-line2); border-radius: 10px; }
.st-herindeel .btn { justify-self: start; }
/* schakelaar (eiland) */
.st-switch { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; cursor: pointer; margin: 0 0 14px; padding: 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--st-card); }
.st-switch input { position: absolute; opacity: 0; pointer-events: none; }
.st-sw { width: 40px; height: 22px; border-radius: 999px; background: var(--st-line2); position: relative; transition: background .15s; }
.st-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.st-switch input:checked + .st-sw { background: #E8590C; }
.st-switch input:checked + .st-sw::after { transform: translateX(18px); }
.st-switch input:focus-visible + .st-sw { outline: 2px solid #E8590C; outline-offset: 2px; }
.st-switch strong { display: block; font-size: 14px; color: var(--st-strong); }
.st-switch small { display: block; font-size: 12px; color: var(--muted); }
.st-switch-lg { max-width: 420px; }
.st-island { border-left: 2px solid #E8590C; padding: 2px 0 2px 14px; margin: -4px 0 16px; }
.st-birds { margin: 4px 0 6px; }
.st-restart { margin-top: 6px; }
/* specificaties van de gekozen kast */
.st-pic { margin: 6px 0 14px; padding: 14px; border-radius: 10px; background: var(--st-raise); display: flex; justify-content: center; }
.st-pic svg { width: auto; max-width: 100%; height: 150px; }
.st-over { margin-top: 18px; }
.st-wall { margin: 0 0 14px; }
.st-wl { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--st-accent); margin: 0 0 6px; }
.st-wall ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.st-wall button { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 7px 8px; border-radius: 8px; border: 1px solid transparent; background: transparent; font: inherit; font-size: 13px; color: var(--ink); text-align: left; cursor: pointer; }
.st-wall button:hover { background: var(--st-raise); border-color: var(--line-2); }
.st-wall small { color: var(--muted); font-family: var(--mono); font-size: 11.5px; }
.st-warn { margin-top: 14px; }
/* donkere varianten van de gewone bedieningselementen */
.st input[type=text], .st input[type=number], .st input[type=email], .st input[type=search], .st input[type=tel], .st select, .st textarea, .st .kf select { background: var(--st-bg); color: var(--ink); border-color: var(--line-2); }
.st .kseg button, .st .chip-light, .st .rp-add, .st .mat-pick, .st .btn-ghost, .st .btn-outline, .st .kcard { background: var(--st-card); color: var(--ink); border-color: var(--line-2); }
.st .kseg button:hover, .st .chip-light:hover, .st .rp-add:hover, .st .mat-pick:hover, .st .btn-ghost:hover { border-color: #E8590C; color: var(--st-strong); }
.st .kseg button.is-on, .st .chip-light.is-on { background: var(--st-on); border-color: #E8590C; color: var(--st-strong); }
.st .rp-add { background: var(--st-card); }
.st .rp-add small { color: var(--muted); }
.st .rp-ticon { background: #F2F2EF; border-radius: 6px; padding: 4px; }
.st .rp-num, .st .kf-label { color: var(--st-soft); }
.st .rp-check { color: var(--ink); }
.st .rp-sw small { color: var(--muted); }
.st .rp-badge { background: #E8590C; color: #fff; }
.st .btn-x { color: var(--st-soft); }
.st .notice-warn { background: var(--st-on); color: var(--st-warn); border-color: var(--st-onb); }
.st .notice-warn li { color: var(--st-warn); }
.st .mat-chg { color: var(--st-accent); }
.st .rp-vorm svg { stroke: currentColor; }
.st .rp-island { fill: rgba(232,89,12,.08); stroke: #E8590C; stroke-width: 12; stroke-dasharray: 40 30; cursor: move; }
.st .rp-island.is-sel { fill: rgba(232,89,12,.16); }
.rp-island { fill: rgba(232,89,12,.06); stroke: #E8590C; stroke-width: 10; stroke-dasharray: 40 30; cursor: move; }
/* smaller: beeld bovenaan, daaronder de panelen */
@media (max-width: 1180px) {
  .st-stijlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st { grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: 58px minmax(420px, 62vh) auto; height: auto; }
  .st-main { grid-column: 1 / -1; grid-row: 2; }
  .st-left { grid-row: 3; grid-column: 1; overflow: visible; }
  .st-spec { grid-row: 3; grid-column: 2; overflow: visible; }
  .st-nav { display: none; }
}
@media (max-width: 760px) {
  .st { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(380px, 58vh) auto auto; }
  .st-top { flex-wrap: wrap; height: auto; padding: 10px 14px; gap: 10px; }
  .st-title { display: none; }
  .st-tabs { margin-left: auto; }
  .st-top-r { width: 100%; justify-content: flex-end; }
  .st-left, .st-spec { grid-column: 1; }
  .st-spec { grid-row: 3; }
  .st-left { grid-row: 4; }
  .st-quote { right: 10px; bottom: 10px; width: 260px; }
  .st-quote-in { padding: 12px; gap: 8px; }
  .st-quote-in strong { font-size: 22px; }
  .st-qmore { display: none; }
  .st-designs { grid-template-columns: minmax(0, 1fr); }
  .st-steps { grid-template-columns: minmax(0, 1fr); }
  .st .kast-hint { display: none; }
}
.st-left { grid-column: 1; grid-row: 2; }
.st-spec { grid-column: 2; grid-row: 2; }
.st-main { grid-column: 3; }
.st-wall .rp-badge { min-width: 30px; width: auto; height: 22px; padding: 0 6px; font-size: 11.5px; border-radius: 6px; }
.st .rp-sw { background: var(--st-card); border-color: var(--line-2); }
.st .rp-sw.is-on { border-color: #E8590C; }
.st .rp-sw span.is-none { background: repeating-linear-gradient(135deg, var(--st-raise) 0 5px, var(--st-card) 5px 10px); box-shadow: inset 0 0 0 1px var(--line-2); }
@media (max-width: 1180px) { .st-main { grid-column: 1 / -1; } .st-left { grid-column: 1; grid-row: 3; } .st-spec { grid-column: 2; grid-row: 3; } }
@media (max-width: 760px) { .st-spec { grid-column: 1; grid-row: 3; } .st-left { grid-column: 1; grid-row: 4; } }
.st { align-items: stretch; }
.st .rp-toast { top: 66px; }
.st .rp-hint { max-width: calc(100% - 400px); }
@media (max-width: 760px) { .st .rp-hint { display: none; } }
@media (max-width: 640px) { .st-cams { top: 12px; bottom: auto; left: 12px; right: auto; } }
@media (max-width: 760px) {
  .st-quote { display: none; }
  .studio-page .kast-bar { background: var(--st-card); border-top: 1px solid var(--st-line2); color: var(--st-ink); }
  .studio-page .kast-bar strong { color: var(--st-strong); }
  .studio-page .kast-bar small { color: var(--st-muted) !important; }
}
@media (min-width: 761px) { .st .rp-pane[data-pane="plan"], .st .rp-pane[data-pane="wand"] { right: 360px; } }

/* fotorealistisch beeld in de ruimteplanner */
.rp-photo-btn svg { margin-right: 5px; flex: none; }
.kast-cams .rp-photo-btn.is-on, .st-cams .rp-photo-btn.is-on { background: var(--orange) !important; color: #fff !important; }
.rp-photo { position: absolute; left: 12px; bottom: 34px; z-index: 6; width: 400px; max-width: calc(100% - 24px); padding: 12px 14px; border-radius: 8px; background: var(--navy); color: #fff; box-shadow: 0 12px 30px rgba(13,30,39,.28); }
.rp-photo[hidden] { display: none; }
.rp-photo-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "txt acts" "bar bar"; gap: 10px 12px; align-items: center; }
.rp-photo-txt { grid-area: txt; display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.rp-photo-txt strong { font-size: 14px; }
.rp-photo-txt span { color: #C9D5DC; font-variant-numeric: tabular-nums; }
.rp-photo-acts { grid-area: acts; display: flex; align-items: center; gap: 6px; }
.rp-photo-acts .btn-x { color: #fff; }
.rp-photo-acts .btn[disabled] { opacity: .45; cursor: default; }
.rp-photo-bar { grid-area: bar; height: 4px; border-radius: 2px; background: rgba(255,255,255,.14); overflow: hidden; }
.rp-photo-bar span { display: block; height: 100%; width: 0; background: var(--orange); transition: width .3s ease; }
.rp-photo.is-done .rp-photo-txt span { color: #fff; }
.rp-photo-tip { margin: 8px 0 0; font-size: 12px; color: #9FB2BE; }
.st .rp-photo { left: 18px; bottom: 18px; }
@media (prefers-reduced-motion: reduce) { .rp-photo-bar span { transition: none; } }
@media (max-width: 640px) {
  .rp-photo { left: 8px; right: 8px; bottom: 8px; width: auto; max-width: none; }
  .st .rp-photo { left: 10px; right: 10px; bottom: 10px; }
  .rp-photo { padding: 10px 12px; }
  .rp-photo-tip { display: none; }
  .rp-photo-txt strong { font-size: 13.5px; }
  .rp-photo-btn span { display: none; }
  .rp-photo-btn svg { margin-right: 0; }
}

/* werkbalk voor de gekozen kast in het 3D-beeld */
.rp-tools { position: absolute; top: 12px; left: 12px; z-index: 5; display: flex; align-items: center; gap: 4px; padding: 4px 6px 4px 4px; border-radius: 999px; background: rgba(255,255,255,.95); box-shadow: inset 0 0 0 1px var(--line), 0 6px 18px rgba(13,30,39,.12); white-space: nowrap; }
.rp-tools[hidden] { display: none; }
.rp-tools .rp-badge { margin: 0 4px 0 0; min-width: 32px; height: 30px; padding: 0 10px; border-radius: 999px; font-size: 13px; }
.rp-tools button { height: 30px; display: inline-flex; align-items: center; gap: 5px; padding: 0 11px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: pointer; }
.rp-tools button:hover { background: var(--grey); }
.rp-tools button[data-del] { color: var(--err); }
.rp-tools-tip { font-size: 12px; color: var(--muted); padding: 0 6px 0 4px; }
.st .rp-tools { top: 16px; left: auto; right: 16px; background: var(--st-glass); box-shadow: inset 0 0 0 1px var(--st-line2); }
.st .rp-tools button { color: var(--st-ink); }
.st .rp-tools button:hover { background: var(--st-hover2); }
.st .rp-tools button[data-del] { color: var(--st-del); }
.st .rp-tools .rp-tools-tip { color: var(--st-muted); }
@media (max-width: 1100px) { .rp-tools-tip { display: none; } }
@media (max-width: 640px) { .rp-tools, .st .rp-tools { top: auto; bottom: 40px; left: 50%; right: auto; transform: translateX(-50%); } }
.rp-polka-ends { margin: 4px 0 10px; padding-left: 18px; }
.rp-polka-ends li { margin: 3px 0; }
.chip-xs { padding: 2px 8px; font-size: 12px; min-height: 0; margin-left: 4px; }
/* ruimteplanner: project (referentie, delen) en alleen bekijken */
.rp-proj { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; border: 1.5px solid var(--line, #D9DEDD); border-radius: 8px; background: #fff; color: #0D1E27; font: inherit; font-size: 13px; cursor: pointer; max-width: 320px; }
.rp-proj .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 600; }
.rp-proj-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; color: #5B6B73; }
.rp-proj strong { background: #E8590C; color: #fff; border-radius: 5px; padding: 2px 8px; font-size: 12px; }
.rp-proj.is-view { cursor: default; padding-right: 10px; }
.rp-proj em { font-style: normal; font-size: 12px; color: #5B6B73; }
.st .rp-proj { background: transparent; border-color: var(--line-2, #2A4150); color: #fff; }
.st .rp-proj-n, .st .rp-proj em { color: #9FB3BE; }
.rp-share .mat-dlg-in { max-width: 620px; }
.rp-share-name { display: grid; gap: 4px; margin: 12px 0; font-size: 14px; }
.rp-share-name input, .rp-share-row input { font: inherit; padding: 8px 10px; border: 1.5px solid #D9DEDD; border-radius: 6px; }
.rp-share-row { display: grid; grid-template-columns: 130px 1fr auto; gap: 8px; align-items: center; margin: 10px 0; }
.rp-share-row small { display: block; color: #5B6B73; font-size: 12px; line-height: 1.3; }
.rp-share-row input { font-size: 12px; min-width: 0; }
.rp-share-recent { margin-top: 12px; font-size: 14px; }
.rp-share-recent ul { margin: 6px 0 0; padding-left: 18px; }
@media (max-width: 640px) { .rp-share-row { grid-template-columns: 1fr auto; } .rp-share-row > div { grid-column: 1 / -1; } }
.rp-viewbar { position: absolute; z-index: 6; left: 12px; right: 12px; top: 12px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; padding: 10px 12px 10px 16px; border-radius: 10px; background: #0D1E27; color: #fff; font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.rp-stage { position: relative; }
.rp-viewing .rp-side, .rp-viewing .st-left, .rp-viewing .st-spec, .rp-viewing [data-tools], .rp-viewing .st-quote, .rp-viewing [data-bar], .rp-viewing [data-undo], .rp-viewing .st-start { display: none !important; }
.rp-viewing .kast-cams, .rp-viewing .rp-tools { top: 80px; }
.rp-viewbar[hidden] { display: none; }
.rp-viewing .st-main { grid-column: 1 / -1 !important; }
.rp-viewing .rp { grid-template-columns: minmax(0, 1fr); }
.st .rp-viewbar { background: var(--st-raise); border: 1px solid var(--st-line2); color: var(--st-ink); }

/* ---- interieurplanner als eigen omgeving: Mijn ontwerpen, meldingen, offertes; licht, zoals de accountpagina's van de zaaglijst */
.pa-page { background: var(--grey); }
.pa-main { max-width: 760px; margin: 0 auto; padding: 40px 24px 72px; }
.pa-main.pa-wide { max-width: var(--container); }
.pa-main h1 { font-size: clamp(28px, 3vw, 38px); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 6px; }
.pa-main h2 { font-size: 20px; margin: 36px 0 12px; }
.pa-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.pa-lead { color: var(--muted); margin: 0; max-width: 560px; }
.pa-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.pa-card { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.pa-open { display: grid; gap: 3px; text-decoration: none; color: var(--ink); }
.pa-open strong { font-size: 17px; }
.pa-open span { color: var(--muted); font-size: 13.5px; }
.pa-open small { color: var(--muted); font-size: 12.5px; }
.pa-open:hover strong, .pa-open:focus-visible strong { color: var(--orange-ink); }
.pa-rename { display: flex; gap: 8px; }
.pa-rename label { flex: 1; }
.pa-rename input { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; font: inherit; font-size: 13.5px; background: #fff; color: var(--ink); }
.pa-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.pa-del summary { list-style: none; cursor: pointer; }
.pa-del summary::-webkit-details-marker { display: none; }
.pa-del form { display: grid; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.pa-danger { background: #B3261E; color: #fff; border: 0; justify-self: start; }
.pa-empty { color: var(--muted); padding: 20px; border: 1px dashed var(--line); border-radius: 8px; background: #fff; }
.pa-aanvragen { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.pa-aanvragen li { display: grid; grid-template-columns: 110px 150px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 14px; }
.pa-status { font-weight: 600; }
.pa-foot { color: var(--muted); font-size: 13.5px; margin-top: 40px; }
.pa-msg { padding: 24px 0; }
.pa-msg p { color: var(--muted); }
.rp-login-hint { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* plattegrondje per ontwerp: achtergrond als de vloer, wanden als lijn, kasten naar hoe hoog ze zijn */
.pa-prev { width: 100%; aspect-ratio: 16 / 10; height: auto; display: block; margin-bottom: 8px; background: var(--grey); border: 1px solid var(--line); border-radius: 6px; }
.pa-prev .pv-w { fill: none; stroke: var(--navy); stroke-width: 40; stroke-linecap: square; }
.pa-prev .pv-o { fill: #9FB1BC; stroke: #fff; stroke-width: 12; }
.pa-prev .pv-h { fill: var(--navy); stroke: #fff; stroke-width: 12; }
.pa-prev .pv-b { fill: none; stroke: var(--orange); stroke-width: 14; stroke-dasharray: 40 28; }
.pa-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.pa-sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.pa-who { color: var(--orange-ink) !important; }
.rp-klant { border: 1px solid var(--line, #D6DEE2); border-radius: 10px; padding: 12px 14px; margin: 14px 0 0; display: grid; gap: 10px; }
.rp-klant legend { font-weight: 700; padding: 0 6px; }
.rp-klant legend small { font-weight: 400; color: #6A7F8B; }
.rp-klant .rp-selbtns { align-items: center; }
@media (max-width: 640px) {
  .pa-aanvragen li { grid-template-columns: 1fr 1fr; }
}

/* interieurplanner en toelevering als eigen omgeving: het logo met de naam van de dienst erachter,
   in dezelfde verhouding als het logo van de zaaglijst (Lenselink | Zaaglijst) */
.brand-sub { --bh: 31px; display: flex; align-items: center; min-width: 0; color: #fff; text-decoration: none; }
.brand.brand-sub img, .brand-sub img { width: auto; height: var(--bh); max-width: none; flex: none; display: block; }
.brand-sub span { font-weight: 300; font-size: calc(var(--bh) * .74); line-height: var(--bh); letter-spacing: -.01em; margin-left: calc(var(--bh) * .26); padding-left: calc(var(--bh) * .28); border-left: 1.5px solid currentColor; white-space: nowrap; }
.footer-brand { --bh: 26px; margin-bottom: 4px; width: max-content; }
@media (max-width: 640px) { .brand.brand-sub { --bh: 21px; flex: 0 1 auto; } }
@media (max-width: 370px) { .brand.brand-sub { --bh: 18px; } }

/* Op voorraad: label linksboven in de foto, stip op de dikte die op voorraad ligt */
.vr-badge { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 9px; border-radius: 999px; background: #fff; color: #0D1E27; font-size: 13px; font-weight: 600; line-height: 1; box-shadow: 0 1px 4px rgba(13,30,39,.25); pointer-events: none; }
.vr-badge i { width: 8px; height: 8px; border-radius: 50%; background: #1F9D55; flex: none; }
.tchip.is-voorraad { position: relative; }
.tchip.is-voorraad::after { content: ''; position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%; background: #1F9D55; border: 2px solid var(--card, #fff); }

/* Eerste bezoek materialen: de eerste kaart uitgelicht met uitleg */
.coach-spot { position: absolute; z-index: 58; border-radius: 12px; pointer-events: none; box-shadow: 0 0 0 9999px rgba(13,30,39,.55); transition: none; }
.mat-card.is-coach { z-index: 59; }
.coach-pop { position: absolute; z-index: 60; background: #fff; color: var(--ink); border-radius: 12px; padding: 18px 20px 14px; box-shadow: 0 18px 48px rgba(13,30,39,.28); }
.coach-pop::before { content: ''; position: absolute; left: -7px; top: 26px; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); }
.coach-pop.is-above::before { left: var(--arrow, 50%); top: auto; bottom: -7px; }
.coach-title { margin: 0 0 10px; font-size: 17px; font-weight: 700; color: #0D1E27; }
.coach-steps { margin: 0; padding: 0; list-style: none; counter-reset: coach; display: grid; gap: 10px; font-size: 14px; line-height: 1.45; color: #2B3F4B; }
.coach-steps li { counter-increment: coach; display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.coach-steps li::before { content: counter(coach); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #FFF1E7; color: #A93F06; font-size: 12px; font-weight: 700; }
.coach-foot { display: flex; justify-content: flex-end; margin-top: 14px; }

/* voorpagina's van de interieurplanner en de toelevering: dezelfde onderdelen als de zaaglijst, met een paar varianten */
.steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.steps-5 .step { padding: 22px; }
@media (max-width: 1100px) { .steps-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 960px) { .steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .steps-4, .steps-5 { grid-template-columns: 1fr; } }
.hero-photo-right { object-position: 70% 50%; }
.kast-tiles-cover .kast-tile-img img { object-fit: cover; }
.sub-photo { margin: 0; }
.sub-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }
.vid-row-flip { margin-bottom: 0; }
@media (min-width: 901px) { .vid-row-flip > .sub-photo { order: 2; } }
.checks-ink { color: var(--ink); margin: 0 0 22px; }
.sub-who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.sub-who-card { border: 1px solid var(--line); border-radius: 8px; padding: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.sub-who-card h3 { font-size: 22px; margin: 0 0 10px; }
.sub-who-card p { margin: 0 0 22px; color: var(--muted); max-width: 520px; }
.sub-who-card .btn { margin-top: auto; }
.sub-who-card.panel-dark { border-color: var(--navy); }
.sub-who-card.panel-dark p { color: #D3DEE5; }
@media (max-width: 760px) { .sub-who { grid-template-columns: 1fr; } .sub-who-card { padding: 24px 20px; } }
.auth-intro { margin: -6px 0 22px; }

/* ---- configurator in vier stappen: Ruimte, Ontwerpwijze, Inrichten, Overzicht ---- */
.st-pane { display: none; }
.st[data-step="ruimte"] [data-pane-step="ruimte"], .st[data-step="ontwerp"] [data-pane-step="ontwerp"],
.st[data-step="inrichten"] [data-pane-step="inrichten"], .st[data-step="overzicht"] [data-pane-step="overzicht"] { display: block; }
.st-left { display: flex; flex-direction: column; }
.st-left > .st-pane { flex: 1 0 auto; }
/* de kolom met de gekozen kast alleen bij het inrichten; anders meer ruimte voor het beeld */
.st:not([data-step="inrichten"]) { grid-template-columns: 360px minmax(0, 1fr); }
.st:not([data-step="inrichten"]) .st-spec { display: none; }
.st:not([data-step="inrichten"]) .st-main { grid-column: 2; }
.st-stepnav { display: flex; align-items: center; gap: 2px; margin-left: 10px; padding: 3px; border-radius: 999px; background: var(--st-raise); border: 1px solid var(--st-line2); }
.st-stepnav button { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 6px; border: 0; border-radius: 999px; background: transparent; color: var(--st-soft); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.st-stepnav button span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--st-line2); color: var(--st-strong); font-family: var(--mono); font-size: 11.5px; font-weight: 500; }
.st-stepnav button:hover { color: var(--st-strong); }
.st-stepnav button.is-on { background: #E8590C; color: #fff; }
.st-stepnav button.is-on span { background: rgba(255,255,255,.22); color: #fff; }
.st-theme { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--st-line2); background: transparent; color: var(--st-soft); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.st-theme:hover { color: var(--st-strong); border-color: var(--st-muted); }
.st-intro { color: var(--st-muted); font-size: 13.5px; line-height: 1.5; margin: -4px 0 18px; }
.st-h3 { font-size: 13px; font-weight: 700; color: var(--st-strong); margin: 24px 0 10px; padding-top: 18px; border-top: 1px solid var(--st-line); }
.st-rule { margin: 0 0 14px; }
.st-rule small, .st .rp-check small { display: block; color: var(--st-muted); font-size: 12px; line-height: 1.45; margin-top: 4px; }
.st-rule .rp-num { max-width: 180px; }
.st-next { position: sticky; bottom: -40px; display: flex; justify-content: space-between; gap: 10px; margin: 24px -18px -40px; padding: 14px 18px; background: var(--st-left); border-top: 1px solid var(--st-line); }
.st-next .btn-ghost { color: var(--st-soft); }
.st-voorstel { display: grid; gap: 6px; margin: 0 0 18px; padding: 12px; border: 1px dashed var(--st-line2); border-radius: 10px; }
.st-voorstel .btn { justify-self: start; display: inline-flex; align-items: center; gap: 6px; }
.st-voorstel small { color: var(--st-muted); font-size: 12px; }
.st-facts { display: grid; gap: 10px; margin: 0 0 18px; }
.st-facts > div { display: grid; grid-template-columns: 90px 1fr; gap: 10px; font-size: 13.5px; }
.st-facts dt { color: var(--st-muted); }
.st-facts dd { margin: 0; color: var(--st-ink); }
.st-facts small { color: var(--st-muted); }
.st-overzicht-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }
.st-start-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.st-start-head .btn-x { font-size: 26px; }
/* weergave (3D, plattegrond, wanden) linksboven op het beeld; de camerastanden ernaast */
.st-viewbar { position: absolute; z-index: 6; top: 16px; left: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; pointer-events: none; }
.st-viewbar > * { pointer-events: auto; }
.st-views { margin: 0; }
.st-stagebar:empty { display: none; }
.st-stagebar .kseg { background: var(--st-glass); border-radius: 999px; padding: 3px; }
.st-cams { left: 300px; }
.st [data-mode="3d"] ~ .st-cams { left: 300px; }
.st-stage:has(.st-stagebar:not(:empty)) .st-cams { top: 64px; left: 16px; }
.st .rp-tabs { background: var(--st-raise); border: 1px solid var(--st-line2); }
.st .rp-tabs button { color: var(--st-soft); }
@media (max-width: 1180px) {
  .st-stepnav button { padding: 0 10px 0 4px; font-size: 12.5px; }
  .st:not([data-step="inrichten"]) { grid-template-columns: minmax(0, 1fr); }
  .st:not([data-step="inrichten"]) .st-main { grid-column: 1; }
  .st:not([data-step="inrichten"]) .st-left { grid-column: 1; }
  .st-next { position: static; margin: 24px 0 0; padding: 14px 0 0; }
}
@media (max-width: 900px) { .st-title, .st-theme span { display: none; } }
@media (max-width: 760px) {
  .st-stepnav { order: 5; width: 100%; margin: 0; overflow-x: auto; }
  .st-stepnav button { flex: 1 0 auto; justify-content: center; }
  .st-cams { left: 12px; top: 62px; }
  .st-viewbar { top: 12px; left: 12px; right: 12px; }
}

/* ---- configurator stap 1: ruimte-editor op de plattegrond ---- */
.studio-page { --re-floor: #F7F4EE; --re-grid: #E7E1D6; --re-wall: #4A5D69; --re-kolom: #6C7E89; }
.studio-page.st-light { --re-floor: #FFFFFF; --re-grid: #ECEFEF; --re-wall: #22343F; --re-kolom: #50636E; }
.re-svg { touch-action: none; user-select: none; }
.re-floor { fill: var(--re-floor); }
.re-svg .rp-grid { stroke: var(--re-grid); stroke-width: 1; }
.re-wall { fill: var(--re-wall); }
.re-wall.is-drag.is-v { cursor: ew-resize; }
.re-wall.is-drag.is-h { cursor: ns-resize; }
.re-wall.is-drag:hover { fill: #E8590C; }
.re-open { stroke: var(--st-muted); stroke-width: 14; stroke-dasharray: 60 50; fill: none; }
.re-len rect { fill: var(--st-card); stroke: var(--st-line2); stroke-width: 6; }
.re-len text, .re-add text { fill: var(--st-ink); text-anchor: middle; font-weight: 700; font-family: var(--mono); }
.re-len { cursor: text; }
.re-len:hover rect, .re-len:focus-visible rect { stroke: #E8590C; }
.re-add { cursor: pointer; }
.re-add rect { fill: transparent; stroke: #E8590C; stroke-width: 7; stroke-dasharray: 26 18; }
.re-add text { fill: #E8590C; font-family: inherit; }
.re-add:hover rect, .re-add:focus-visible rect { fill: rgba(232,89,12,.12); }
.re-x { cursor: pointer; opacity: .85; }
.re-x circle { fill: var(--st-card); stroke: var(--st-line2); stroke-width: 6; }
.re-x path { stroke: var(--st-ink); stroke-width: 12; stroke-linecap: round; }
.re-x:hover circle, .re-x:focus-visible circle { fill: #B3261E; stroke: #B3261E; }
.re-x:hover path, .re-x:focus-visible path { stroke: #fff; }
.re-plus { cursor: pointer; }
.re-plus circle { fill: #E8590C; stroke: var(--re-floor); stroke-width: 10; }
.re-plus path { stroke: #fff; stroke-width: 14; stroke-linecap: round; }
.re-plus:hover circle, .re-plus:focus-visible circle { fill: #C94B08; }
.re-kolom { cursor: grab; }
.re-kolom rect { fill: var(--re-kolom); }
.re-kolom text { fill: #fff; text-anchor: middle; font-family: var(--mono); font-weight: 600; pointer-events: none; }
.re-kolom.is-sel rect, .re-kolom:hover rect { fill: var(--re-wall); stroke: #E8590C; stroke-width: 14; }
.re-handle { fill: #E8590C; stroke: #fff; stroke-width: 8; }
.re-handle.is-corner { cursor: nwse-resize; }
.re-handle.is-end { cursor: ns-resize; }
.re-handle.is-end[data-redit="c"] { cursor: ew-resize; }
.re-svg .rp-raam .rp-ibody { fill: var(--re-floor); stroke: var(--re-wall); stroke-width: 8; }
.re-svg .rp-raam { cursor: grab; }
.re-input { position: absolute; z-index: 9; width: 120px; height: 36px; padding: 0 10px; border: 2px solid #E8590C; border-radius: 8px; background: var(--st-card); color: var(--st-ink); font: 600 15px/1 var(--mono); text-align: center; box-shadow: 0 8px 24px var(--st-shadow); }
.re-walls { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.re-walls .rp-check { margin: 0; }
.st-note { display: block; color: var(--st-muted); font-size: 12px; line-height: 1.45; margin-top: 6px; }
.re-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.re-list button { display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--st-line2); background: var(--st-card); color: var(--st-ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.re-list button.is-on, .re-list button:hover { border-color: #E8590C; }
.re-list small { color: var(--st-muted); font-family: var(--mono); }
.st-roomsel:empty { display: none; }
.st-roomsel { margin: 4px 0 14px; padding: 14px; border: 1px solid #E8590C; border-radius: 10px; background: var(--st-card); }
.st-h3-first { margin-top: 0; padding-top: 0; border-top: 0; }
.st-own { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0 12px; padding: 10px 12px; border-radius: 8px; background: var(--st-on); border: 1px solid var(--st-onb); font-size: 12.5px; color: var(--st-ink); }
.st-own small { color: var(--st-muted); }
.st-follows { color: var(--st-muted); margin: 2px 0 12px; }
/* werkbalk van de gekozen kast: onder de weergaveknoppen, niet over de camerastanden heen */
.st .rp-tools { top: 64px; left: 16px; right: auto; }
.st-stage:has(.st-stagebar:not(:empty)) .rp-tools { top: 112px; }

/* ---- configurator stap 3: catalogus in vier groepen, slepen naar het beeld ---- */
.cat-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 0 0 10px; padding: 3px; border-radius: 10px; background: var(--st-raise); border: 1px solid var(--st-line2); }
.cat-tabs button { height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--st-soft); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.cat-tabs button:hover { color: var(--st-strong); }
.cat-tabs button.is-on { background: #E8590C; color: #fff; }
.cat-hint { margin: 0 0 12px; }
.cat-tile { cursor: grab; touch-action: manipulation; }
.cat-tile:active { cursor: grabbing; }
.cat-ico { width: 44px; height: 44px; padding: 8px; border-radius: 6px; background: #F2F2EF; fill: none; stroke: #0D1E27; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cat-ghost { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; padding: 8px 12px; border-radius: 8px; background: #E8590C; color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 10px 28px rgba(0,0,0,.3); transition: opacity .12s; }
.cat-ghost.is-in { opacity: .35; }
body.is-catdrag, body.is-catdrag * { cursor: grabbing !important; user-select: none; }

/* ---- configurator: gekozen kast rechtsboven op het beeld, boven het totaalblok; twee kolommen in elke stap ---- */
.st, .st:not([data-step="inrichten"]) { grid-template-columns: 360px minmax(0, 1fr); }
.st .st-main, .st:not([data-step="inrichten"]) .st-main { grid-column: 2; }
.st-right { position: absolute; z-index: 5; top: 16px; right: 16px; bottom: 16px; width: 340px; display: flex; flex-direction: column; justify-content: flex-end; gap: 24px; pointer-events: none; }
.st-right > * { pointer-events: auto; }
.st-right .st-quote { position: static; width: auto; max-width: none; flex: none; }
.st-catpanel { flex: 0 1 auto; min-height: 0; overflow-y: auto; padding: 14px; border-radius: 12px; background: var(--st-card); border: 1px solid var(--st-line2); box-shadow: 0 18px 40px var(--st-shadow); scrollbar-color: var(--st-line2) transparent; }
.st-catpanel:empty, .st-over:empty, .st-sel:empty { display: none; }
.st-catpanel .rp-addlist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-catpanel .cat-hint { margin-bottom: 10px; }
/* gekozen kast links, als kaart in het paneel */
.st-sel { margin: 0 0 16px; padding: 14px; border-radius: 10px; border: 1px solid #E8590C; background: var(--st-card); }
.st-left .st-list { box-shadow: none; margin-bottom: 8px; }
.st-left .st-list-in { max-height: none; }
.st-selpanel .st-pic { padding: 10px; }
.st-selpanel .st-pic svg { height: 110px; }
.st-over { flex: 0 1 auto; min-height: 0; margin: 0; display: flex; flex-direction: column; }
.st-list { min-height: 0; display: flex; flex-direction: column; border-radius: 12px; background: var(--st-card); border: 1px solid var(--st-line2); box-shadow: 0 12px 30px var(--st-shadow); }
.st-list > summary { display: flex; align-items: center; gap: 8px; padding: 12px 16px; cursor: pointer; list-style: none; font-size: 13.5px; font-weight: 700; color: var(--st-strong); }
.st-list > summary::-webkit-details-marker { display: none; }
.st-list > summary span { font-family: var(--mono); font-size: 11.5px; font-weight: 500; padding: 1px 7px; border-radius: 999px; background: var(--st-raise); color: var(--st-soft); }
.st-list > summary em { font-style: normal; font-size: 11.5px; color: var(--st-accent); }
.st-list > summary::after { content: '+'; margin-left: auto; color: #E8590C; font-size: 18px; font-weight: 400; }
.st-list[open] > summary::after { content: '–'; }
.st-list-in { overflow-y: auto; min-height: 0; padding: 0 12px 12px; max-height: 42vh; }
/* weergave, camerastanden en de werkbalk van de gekozen kast onder elkaar linksboven */
.st-cams, .st [data-mode="3d"] ~ .st-cams, .st-stage:has(.st-stagebar:not(:empty)) .st-cams { top: 64px; left: 16px; }
.st .rp-tools, .st-stage:has(.st-stagebar:not(:empty)) .rp-tools { top: 112px; left: 16px; }
@media (min-width: 761px) { .st .rp-pane[data-pane="plan"], .st .rp-pane[data-pane="wand"] { right: 372px; } }
/* stappen: kleiner, het meeste werk gebeurt bij het inrichten */
.st-stepnav { margin-left: 6px; padding: 2px; gap: 0; }
.st-stepnav button { height: 28px; padding: 0 10px 0 4px; gap: 6px; font-size: 12.5px; }
.st-stepnav button span { width: 18px; height: 18px; font-size: 10.5px; }
@media (max-width: 1180px) {
  .st, .st:not([data-step="inrichten"]) { grid-template-columns: minmax(0, 1fr); }
  .st .st-main, .st:not([data-step="inrichten"]) .st-main { grid-column: 1; }
  .st-right { position: static; width: auto; padding: 12px 16px 0; }
  .st-list-in { max-height: none; }
}
@media (max-width: 1180px) {
  .st { grid-template-rows: auto auto auto; }
  .st-main { height: auto; }
  .st-stage { flex: none; height: 62vh; min-height: 380px; }
}
@media (max-width: 760px) { .st-stage { height: 58vh; } .st-right .st-quote { display: none; } .st-right { padding-top: 10px; } }
/* het 3D-beeld (en de plattegrond) niet onder de kolom rechts: daar staan de gekozen kast en het totaal */
@media (min-width: 1181px) { .st .rp-pane[data-pane="3d"] { right: 372px; } }
@media (max-width: 640px) {
  .st .rp-tools, .st-stage:has(.st-stagebar:not(:empty)) .rp-tools { top: auto; bottom: 12px; left: 50%; right: auto; transform: translateX(-50%); }
  .st-cams, .st [data-mode="3d"] ~ .st-cams, .st-stage:has(.st-stagebar:not(:empty)) .st-cams { top: 58px; left: 12px; right: 12px; overflow-x: auto; flex-wrap: nowrap; }
}
/* melding onderaan het beeld, niet over de knoppen bovenin */
@media (min-width: 761px) { .st .rp-toast { top: auto; bottom: 64px; } }
/* categorieën op één regel */
.cat-tabs { grid-template-columns: repeat(4, auto); justify-content: stretch; }
.cat-tabs button { height: 30px; padding: 0 6px; font-size: 12px; white-space: nowrap; }
.st-catpanel .rp-addtabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; margin-bottom: 10px; }
.st-catpanel .rp-addtabs .chip-light { flex: none; height: 28px; padding: 0 10px; font-size: 12px; }
/* alles inklappen: alleen het beeld, over de volle breedte */
.st-fold { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--st-line2); background: var(--st-glass); color: var(--st-ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.st-fold:hover, .st-fold[aria-pressed="true"] { border-color: #E8590C; }
.st.is-folded { grid-template-columns: minmax(0, 1fr) !important; }
.st.is-folded .st-left, .st.is-folded .st-right { display: none !important; }
.st.is-folded .st-main { grid-column: 1 !important; }
.st.is-folded .rp-pane[data-pane="3d"], .st.is-folded .rp-pane[data-pane="plan"], .st.is-folded .rp-pane[data-pane="wand"] { right: 0 !important; }
@media (max-width: 1180px) { .st.is-folded .st-stage { height: calc(100dvh - 120px); } }
.st-right { width: 360px; }
@media (min-width: 1181px) { .st .rp-pane[data-pane="3d"], .st .rp-pane[data-pane="plan"], .st .rp-pane[data-pane="wand"] { right: 392px; } .st:not(.is-folded) .rp-toast { left: calc(50% - 196px); } }
.cat-tabs { display: flex; gap: 2px; }
.cat-tabs button { flex: 1 1 auto; padding: 0 5px; font-size: 11.5px; }