/* Vergola configurator, stijl A "Helder". Tokens en regels: Code/vergola-configurator/ui-richting/DESIGN.md.
   Wit en koel grijs, kaarten met een rand, groen = gekozen, terracotta = de ene hoofdknop en de maatlijnen. */
:root {
  --bg: #FFFFFF;
  --bg-subtle: #F2F4F1;
  --stage-bg: #E8ECE6;
  --surface: #FFFFFF;
  --ink: #151916;
  --ink-body: #3B423D;
  --ink-muted: #5F6862;
  --ink-inverse: #FFFFFF;
  --line: #E0E5E0;
  --line-strong: #BFC7C0;

  --accent: #5A7429;
  --accent-strong: #46601C;
  --accent-tint: #EEF2E5;
  --cta: #B5532B;
  --cta-hover: #9C4623;
  --cta-pressed: #863C1E;
  --on-cta: #FFFFFF;
  --dim: #B5532B;
  --error: #A93B2A;
  --glass: #5f8ea0;
  --deur: #8F4C26;

  /* oude namen, voor inline stijlen in de JS */
  --ink-2: var(--ink-muted);
  --ink-3: var(--ink-muted);
  --primary: var(--accent);
  --primary-hover: var(--accent-strong);
  --primary-tint: var(--accent-tint);

  --font-ui: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --wght-head: 800;
  --ls-head: -0.022em;

  --radius-s: 8px;
  --radius-m: 10px;
  --radius-l: 14px;
  --radius-xl: 20px;
  --panel-w: 480px;
  --top-h: 64px;
  --shadow-s: 0 1px 2px rgba(21, 25, 22, 0.06);
  --shadow-m: 0 2px 6px rgba(21, 25, 22, 0.05), 0 10px 28px rgba(21, 25, 22, 0.10);
  --shadow-bar: 0 -10px 30px rgba(21, 25, 22, 0.10);
  --dur-1: 150ms;
  --dur-2: 220ms;
  --dur-3: 320ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: var(--ease);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12M11 5l5 5-5 5'/%3E%3C/svg%3E");
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  --arrow-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 10H4M9 5l-5 5 5 5'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
/* Vaste cijferbreedte alleen in invoervelden en waarden, nooit op de hele body. */
input[type="number"], .num input, .area-line .big, .price-block .range { font-variant-numeric: lining-nums tabular-nums; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-body);
  font: 400 15px/1.55 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
a { color: var(--accent-strong); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- topbalk ---------- */
.topbar {
  height: var(--top-h);
  display: flex; align-items: center; gap: 20px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: relative; z-index: 5;
}
.brand img { height: 34px; width: auto; }
.topbar-title { font: 700 15px/1 var(--font-ui); color: var(--ink); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.tel { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; font: 700 14px/1 var(--font-ui); color: var(--ink); text-decoration: none; white-space: nowrap; }
.tel svg { width: 18px; height: 18px; flex: none; }
.tel:hover { color: var(--accent-strong); }
.proto-chip {
  border: 1px dashed var(--line-strong); color: var(--ink-muted); background: transparent;
  font: 600 12px/1 var(--font-ui); padding: 7px 10px; border-radius: 999px;
}

/* ---------- knoppen ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 18px; border-radius: var(--radius-m);
  font: 600 15px/1 var(--font-ui); border: 1px solid transparent; background: none; color: var(--ink);
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
  text-decoration: none; white-space: nowrap;
}
.btn-sm { height: 40px; padding: 0 14px; font-size: 14px; }
/* De hoofdknop: terracotta, één per scherm. */
.btn-primary { background: var(--cta); color: var(--on-cta); font-weight: 700; }
.btn-primary:hover { background: var(--cta-hover); }
.btn-primary:active { background: var(--cta-pressed); }
/* Stille knop: wit met rand. */
.btn-secondary { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn-secondary:hover { border-color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); padding-left: 10px; padding-right: 10px; }
.btn-ghost:hover { color: var(--accent-strong); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent-strong); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.link-btn:hover { color: var(--ink); }
.icon-btn { width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: var(--surface); font-size: 22px; line-height: 1; color: var(--ink); }
.icon-btn:hover { border-color: var(--ink); }

/* ---------- layout ---------- */
.app {
  height: calc(100dvh - var(--top-h));
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--panel-w);
}
.app:has(#leadForm) { --panel-w: 520px; }
/* Het beeld staat in een afgerond kader met 16 px wit eromheen. */
.stage { position: relative; overflow: hidden; background: var(--bg); }
.viewport { position: absolute; inset: 16px; border-radius: var(--radius-xl); overflow: hidden; background: var(--stage-bg); }
.viewport canvas { display: block; touch-action: none; }
.stage-loading { position: absolute; inset: 16px; border-radius: var(--radius-xl); display: grid; place-items: center; color: var(--ink-muted); font: 500 14px/1.4 var(--font-ui); pointer-events: none; transition: opacity var(--dur-2); }
.stage-loading.is-done { opacity: 0; }

.stage-top { position: absolute; top: 32px; left: 32px; right: 32px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; pointer-events: none; z-index: 2; }
.stage-top > * { pointer-events: auto; }
.seg-ctrl {
  display: inline-flex; gap: 2px; padding: 4px; background: var(--surface);
  border-radius: calc(var(--radius-m) + 2px); box-shadow: var(--shadow-m);
}
.seg-ctrl button { border: 0; background: transparent; height: 34px; padding: 0 14px; border-radius: var(--radius-s); font: 600 13px/1 var(--font-ui); color: var(--ink-muted); transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.seg-ctrl button:hover { color: var(--ink); }
.seg-ctrl button.is-active { background: var(--ink); color: var(--ink-inverse); }
.night-toggle {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px;
  background: var(--surface); border: 0; border-radius: calc(var(--radius-m) + 2px); box-shadow: var(--shadow-m);
  font: 600 13px/1 var(--font-ui); color: var(--ink);
}
.night-dot { width: 12px; height: 12px; border-radius: 50%; background: #e9b24f; box-shadow: 0 0 0 3px rgba(233,178,79,.25); transition: background-color var(--dur-2), box-shadow var(--dur-2); }
.night-toggle[aria-pressed="true"] { background: #232a33; color: #f1ede4; }
.night-toggle[aria-pressed="true"] .night-dot { background: #c9d4e6; box-shadow: inset -4px -2px 0 0 #8796ad; }

.stage-bottom { position: absolute; left: 32px; right: 32px; bottom: 32px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; pointer-events: none; z-index: 2; }
.spec-chip { margin: 0; background: color-mix(in srgb, var(--surface) 90%, transparent); border-radius: var(--radius-s); padding: 8px 12px; font: 500 13px/1.4 var(--font-ui); color: var(--ink-body); }
.spec-chip b { font-weight: 700; color: var(--ink); }
.drag-hint { margin: 0; font: 500 12.5px/1.4 var(--font-ui); color: var(--ink-muted); transition: opacity var(--dur-2); }
.drag-hint.is-hidden { opacity: 0; }

/* labels in de 3D-scène */
.label-layer { z-index: 1; }
.lbl { font: 600 12px/1.2 var(--font-ui); color: var(--ink); white-space: nowrap; user-select: none; }
.lbl-dim { background: var(--dim); color: #fff; padding: 4px 9px; border-radius: 999px; font: 700 12.5px/1.2 var(--font-ui); }
.lbl-seg {
  pointer-events: auto; border: 1px solid var(--line-strong); background: var(--surface); border-radius: 999px; padding: 6px 12px 6px 10px;
  display: inline-flex; align-items: center; gap: 7px; font-weight: 600;
  transition: background-color var(--dur-1), color var(--dur-1), border-color var(--dur-1);
}
.lbl-seg::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--ink); }
.lbl-seg.is-glas::before { background: var(--glass); }
.lbl-seg.is-deur::before { background: var(--deur); }
.lbl-seg:hover, .lbl-seg.is-hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.lbl-seg:hover::before, .lbl-seg.is-hover::before { background: #fff; }
.lbl-room { text-align: center; font-size: 13px; font-weight: 700; background: color-mix(in srgb, var(--surface) 90%, transparent); padding: 6px 10px; border-radius: var(--radius-s); }
.lbl-room small { display: block; font-weight: 500; color: var(--ink-muted); font-size: 12px; }

/* ---------- paneel ---------- */
.panel {
  container: panel / inline-size;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--surface); min-height: 0;
}
.stepper { padding: 18px 32px 4px; }
.stepper-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stepper-count { font: 600 13px/1.3 var(--font-ui); color: var(--ink-muted); }
.stepper-count b { color: var(--ink); font-weight: 700; }
.stepper-menu-btn { background: none; border: 0; font: 600 13px/1 var(--font-ui); color: var(--accent-strong); padding: 6px 0; display: inline-flex; align-items: center; gap: 7px; }
.stepper-menu-btn::after { content: ""; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--dur-2) var(--ease); }
.stepper-menu-btn[aria-expanded="true"]::after { transform: rotate(225deg) translateY(-1px); }
.progress { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin-top: 12px; }
.progress button { height: 4px; border: 0; padding: 0; border-radius: 2px; background: var(--line); position: relative; }
.progress button::after { content: ""; position: absolute; inset: -9px 0; }
.progress button.is-done { background: var(--accent); }
.progress button.is-current { background: var(--ink); }
.step-menu { list-style: none; margin: 14px 0 6px; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-l); }
.step-menu li + li { border-top: 1px solid var(--line); }
.step-menu button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; background: none; border: 0; padding: 10px 10px; text-align: left; font: 500 14.5px/1.3 var(--font-ui); color: var(--ink); border-radius: var(--radius-s); }
.step-menu button:hover { background: var(--bg-subtle); }
.step-menu .is-current { font-weight: 700; }
.step-menu .val { color: var(--ink-muted); font-size: 13px; text-align: right; }

.panel-body { overflow-y: auto; padding: 22px 32px 32px; overscroll-behavior: contain; scroll-behavior: smooth; }
.panel-body:focus { outline: none; }
.step-title { font: var(--wght-head) 28px/1.14 var(--font-ui); letter-spacing: var(--ls-head); color: var(--ink); margin: 0 0 10px; text-wrap: balance; }
.step-intro { margin: 0 0 22px; color: var(--ink-body); font-size: 15px; max-width: 46ch; }
.group { margin: 0; padding: 20px 0; border-top: 1px solid var(--line); }
.step-intro + .group, .group:first-child { border-top: 0; padding-top: 4px; }
.group-label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 700 15px/1.3 var(--font-ui); color: var(--ink); margin: 0 0 12px; }
.group-label .hint { font: 500 13px/1.4 var(--font-ui); color: var(--ink-muted); text-align: right; }
.group-label > span:first-child { margin-right: auto; }
.note { font-size: 13px; line-height: 1.5; color: var(--ink-muted); margin: 10px 0 0; }
.note a { font-weight: 600; }

/* keuzekaarten */
.opts { display: grid; gap: 10px; }
.opt {
  width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 14px 16px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-l); text-align: left;
  position: relative; transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
/* zonder beeld staat het vinkje rechts, zoals op de keuzekaart */
.opt:has(> .opt-radio) { grid-template-columns: minmax(0, 1fr) auto auto; }
.opt > .opt-radio { order: 9; }
.opt:hover { border-color: var(--ink); }
.opt[aria-checked="true"] { border: 2px solid var(--accent); background: var(--accent-tint); padding: 13px 15px; }
.opt[disabled] { opacity: .45; cursor: not-allowed; }
.opt[disabled]:hover { border-color: var(--line-strong); }
.opt-thumb { width: 60px; height: 60px; border-radius: var(--radius-s); background: var(--bg-subtle); overflow: hidden; flex: none; display: grid; place-items: center; position: relative; }
.opt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.opt-thumb svg { width: 44px; height: 44px; }
.opt[aria-checked="true"] .opt-thumb::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent) var(--check) center / 12px no-repeat; }
.opt-name { font: 700 15px/1.3 var(--font-ui); color: var(--ink); display: block; }
.opt-desc { display: block; font-size: 13.5px; color: var(--ink-muted); margin-top: 3px; line-height: 1.45; }
.opt-meta { font: 500 13px/1.3 var(--font-ui); color: var(--ink-muted); text-align: right; white-space: nowrap; }
.opt-meta:empty { display: none; }
.opt-meta .arrow { color: var(--accent-strong); }
.opt-radio { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: inline-block; flex: none; background: var(--surface); }
.opt[aria-checked="true"] .opt-radio { border-color: var(--accent); background: var(--accent) var(--check) center / 13px no-repeat; }
.tag { display: inline-block; font: 700 12px/1.3 var(--font-ui); padding: 2px 8px; border-radius: 999px; background: var(--ink); color: #fff; margin-left: 8px; vertical-align: 1px; }
.tag-soft { background: var(--accent-tint); color: var(--accent-strong); }
.opt[aria-checked="true"] .tag-soft { background: var(--surface); }
.delta { color: var(--ink-muted); }

/* tegels: stalen en kleuren */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.swatches > * { min-width: 0; }
.swatch { display: flex; flex-direction: column; gap: 8px; position: relative; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-l); padding: 8px; text-align: left; transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease); }
.swatch-img { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-s); overflow: hidden; background: var(--bg-subtle); }
.swatch-img img { width: 100%; height: 100%; object-fit: cover; }
.swatch-name { display: block; font: 700 13px/1.3 var(--font-ui); color: var(--ink); padding: 0 2px 2px; overflow-wrap: break-word; }
.swatch:hover { border-color: var(--ink); }
.swatch[aria-checked="true"] { border: 2px solid var(--accent); background: var(--accent-tint); padding: 7px; }
.swatch[aria-checked="true"]::after { content: ""; position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent) var(--check) center / 13px no-repeat; box-shadow: 0 0 0 2px var(--surface); }

/* maatinvoer */
.dim { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: center; padding: 16px 0; }
.dim + .dim { border-top: 1px solid var(--line); }
.dim label { font: 700 15px/1.3 var(--font-ui); color: var(--ink); }
.dim .range-meta { grid-column: 1 / -1; display: flex; justify-content: space-between; font: 500 12px/1 var(--font-ui); color: var(--ink-muted); margin-top: -4px; }
.num { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: var(--surface); height: 44px; overflow: hidden; }
.num button { width: 42px; height: 100%; border: 0; background: transparent; font: 600 18px/1 var(--font-ui); color: var(--ink); }
.num button:hover { background: var(--bg-subtle); }
.num button[disabled] { opacity: .35; cursor: not-allowed; background: transparent; }
.num input { width: 72px; height: 100%; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; font: 700 15px/1 var(--font-ui); color: var(--ink); background: transparent; -moz-appearance: textfield; }
.num input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.num input::-webkit-outer-spin-button, .num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.num .unit { padding: 0 10px 0 0; font-size: 13px; color: var(--ink-muted); }
.num-unit { display: inline-flex; align-items: center; gap: 0; }

/* schuifbalk: spoor van 4 px, ronde greep van 22 px met groene rand, groen tot aan de greep */
input[type="range"] { grid-column: 1 / -1; width: 100%; height: 28px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; --p: 50%; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--accent) 0 var(--p), var(--line) var(--p) 100%); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); box-shadow: var(--shadow-s); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); box-shadow: var(--shadow-s); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Telefoon (10-11): de balk vangt geen aanraking, vegen scrolt het paneel. Slepen aan de greep doet app.js. */
@media (pointer: coarse) {
  input[type="range"] { pointer-events: none; }
  .dim { touch-action: pan-y; }
  .dim.is-sleep input[type="range"]::-webkit-slider-thumb { transform: scale(1.15); }
}

.presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip {
  height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: 999px;
  font: 600 13px/1 var(--font-ui); color: var(--ink);
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"], .chip[aria-checked="true"] { background: var(--accent-tint); color: var(--accent-strong); border-color: var(--accent); }
.area-line { display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); font: 600 14px/1.3 var(--font-ui); color: var(--ink); }
.area-line .big { font: 800 26px/1 var(--font-ui); letter-spacing: var(--ls-head); color: var(--ink); }

/* schakelaar en teller */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; }
.switch-row + .switch-row { border-top: 1px solid var(--line); }
.switch-row .txt b { display: block; font: 700 15px/1.3 var(--font-ui); color: var(--ink); }
.switch-row .txt span { display: block; font-size: 13.5px; line-height: 1.45; color: var(--ink-muted); margin-top: 2px; }
.switch { position: relative; width: 44px; height: 26px; flex: none; border: 0; padding: 0; border-radius: 13px; background: var(--line-strong); transition: background-color var(--dur-2) var(--ease); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-s); transition: transform var(--dur-2) var(--ease); }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(18px); }
.sub { padding: 4px 0 4px 14px; border-left: 2px solid var(--accent-tint); margin: 4px 0 6px; }

/* plattegrond en wanden */
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 14px; margin-bottom: 14px; }
.plan svg { width: 100%; height: auto; display: block; }
.plan-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 500 12.5px/1.4 var(--font-ui); color: var(--ink-muted); margin-top: 10px; }
.plan-legend i { display: inline-block; width: 16px; height: 4px; margin-right: 6px; vertical-align: middle; border-radius: 1px; }
.walls { display: grid; gap: 0; }
.wall-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; align-items: center; padding: 12px 0; }
.wall-row + .wall-row { border-top: 1px solid var(--line); }
.wall-row .w-name { font: 700 14px/1.3 var(--font-ui); color: var(--ink); }
.wall-row .w-len { display: block; font: 500 12.5px/1.4 var(--font-ui); color: var(--ink-muted); }
.wall-row.is-flash { animation: flash 700ms var(--ease); }
@keyframes flash { from { background: var(--accent-tint); } to { background: transparent; } }
.mini-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-m); overflow: hidden; background: var(--surface); }
.mini-seg button { border: 0; background: transparent; height: 36px; padding: 0 11px; font: 600 13px/1 var(--font-ui); color: var(--ink); border-left: 1px solid var(--line); }
.mini-seg button:first-child { border-left: 0; }
.mini-seg button:hover { background: var(--bg-subtle); }
.mini-seg button[aria-checked="true"] { background: var(--ink); color: var(--ink-inverse); }
.mini-seg button[disabled] { opacity: .35; cursor: not-allowed; background: transparent; }

/* advies: grijs infoblok */
.advice { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--line); }
.advice-title { font: 700 15px/1.3 var(--font-ui); color: var(--ink); margin: 0 0 12px; }
.advice-item { padding: 14px 16px; background: var(--bg-subtle); border-radius: var(--radius-l); margin-bottom: 8px; font-size: 13.5px; line-height: 1.5; color: var(--ink-body); }
.advice-item .lvl { font-weight: 700; color: var(--ink); margin-right: 5px; }
.advice-item .act { margin-top: 8px; display: flex; gap: 14px; flex-wrap: wrap; }
.advice-item a { color: var(--accent-strong); font-weight: 600; }

.empty { padding: 18px; border: 1px dashed var(--line-strong); border-radius: var(--radius-l); color: var(--ink-muted); font-size: 14px; }
.empty p { margin: 0 0 12px; }

/* overzicht */
.summary { margin: 0 0 24px; }
.summary-row { display: grid; grid-template-columns: 130px minmax(0,1fr) auto; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.45; align-items: baseline; }
.summary-row:first-child { border-top: 0; }
.summary-row dt { color: var(--ink); font-weight: 700; }
.summary-row dd { margin: 0; color: var(--ink-body); }
.summary-row .link-btn { font-size: 13px; }
.price-block { background: var(--bg-subtle); border-radius: var(--radius-l); padding: 16px 18px; margin-bottom: 24px; }
.price-block .lbl-s { font: 700 14px/1.3 var(--font-ui); color: var(--ink); }
.price-block .range { font: 800 22px/1.2 var(--font-ui); letter-spacing: var(--ls-head); color: var(--ink); margin: 6px 0 4px; }
.price-block p { margin: 0; font-size: 13.5px; color: var(--ink-body); }
.price-block ul { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--ink-body); }

.form { display: grid; gap: 14px; }
.field label { display: block; font: 600 13.5px/1.3 var(--font-ui); color: var(--ink); margin-bottom: 6px; }
.field label .opt-l { font-weight: 500; color: var(--ink-muted); }
.field input, .field select, .field textarea {
  width: 100%; height: 46px; border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: var(--surface); padding: 0 14px; font-size: 15px; color: var(--ink);
}
.field select { appearance: none; -webkit-appearance: none; padding-right: 36px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23151916' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") right 14px center / 12px no-repeat; }
.field input[type="file"] { padding: 10px 12px; font-size: 13.5px; color: var(--ink-body); border-style: dashed; }
.field textarea { height: 88px; padding: 11px 14px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.field .err { color: var(--error); font-size: 13px; margin: 5px 0 0; display: none; }
.field.is-invalid input { border-color: var(--error); }
.field.is-invalid .err { display: block; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--ink-body); }
.check input { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; flex: none; }
.form-actions { display: grid; gap: 10px; margin-top: 6px; }
.form-actions .btn { width: 100%; }
/* De verstuurknop staat vast in de voet: één hoofdknop per scherm. */
.form-actions [type="submit"] { display: none; }
.small { font-size: 13px; line-height: 1.5; color: var(--ink-muted); }
.next-steps { list-style: none; margin: 18px 0 0; padding: 0; }
.next-steps li { padding: 13px 0; font-size: 15px; }
.next-steps li + li { border-top: 1px solid var(--line); }
.next-steps b { display: block; font-weight: 700; color: var(--ink); }
.next-steps span { color: var(--ink-muted); font-size: 13.5px; }
details.payload { margin-top: 18px; font-size: 13px; }
details.payload summary { cursor: pointer; font-weight: 600; color: var(--ink); }
details.payload pre { background: #1c211d; color: #e6ebe5; padding: 12px; border-radius: var(--radius-m); overflow: auto; max-height: 280px; font-size: 12px; }

/* start */
.start-choices { display: grid; gap: 10px; margin-top: 4px; }
.start-choice { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-l); padding: 16px 18px; text-align: left; transition: border-color var(--dur-1) var(--ease); }
.start-choice:hover { border-color: var(--ink); }
.start-choice[aria-expanded="true"] { border-color: var(--ink); }
.sc-name { font: 700 16px/1.3 var(--font-ui); color: var(--ink); display: block; }
.sc-desc { display: block; font-size: 13.5px; line-height: 1.45; color: var(--ink-muted); margin-top: 3px; }
.arrow { width: 20px; height: 20px; flex: none; color: var(--accent-strong); }
.start-choices .opts.sub { margin: 0; }
.start-trust { margin-top: 22px; font-size: 13.5px; line-height: 1.5; color: var(--ink-muted); }
.start-trust a { font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; }
.start-trust li { margin-bottom: 4px; }
.resume { margin: 0 0 16px; padding: 14px 16px; background: var(--bg-subtle); border-radius: var(--radius-l); font-size: 13.5px; color: var(--ink-body); display: flex; justify-content: space-between; gap: 12px; align-items: center; }

/* voet: grijze samenvatting, daaronder terug en de hoofdknop */
.panel-foot { padding: 16px 32px 20px; background: var(--surface); box-shadow: 0 -1px 0 var(--line); display: grid; gap: 12px; }
.foot-sum { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 14px; background: var(--bg-subtle); border-radius: var(--radius-l); font: 500 13px/1.4 var(--font-ui); color: var(--ink-muted); min-width: 0; }
.foot-sum b { color: var(--ink); font-weight: 700; min-width: 0; }
.foot-sum b, .foot-sum span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foot-sum > span { flex: none; }
.foot-btns { display: flex; gap: 10px; }
.foot-btns .btn { height: 52px; }
.foot-btns .btn-primary { flex: 1; font-size: 16px; padding: 0 22px; gap: 0; }
.foot-btns .btn-primary::after { content: ""; width: 18px; height: 18px; margin-left: 10px; flex: none; background: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; }
.foot-btns .btn-back { width: 52px; padding: 0; font-size: 0; }
.foot-btns .btn-back::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--arrow-back) center / contain no-repeat; mask: var(--arrow-back) center / contain no-repeat; }
/* Dezelfde vierkante knop, maar naar de volgende stap: pijl naar rechts. */
.foot-btns .btn-back.is-volgende::before { -webkit-mask-image: var(--arrow); mask-image: var(--arrow); }
@container panel (max-width: 340px) {
  .btn-more { display: none; }
}

/* sheets en modals */
dialog { border: 0; padding: 0; color: var(--ink-body); background: var(--surface); }
dialog::backdrop { background: rgba(21, 25, 22, 0.45); }
.sheet { margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(440px, 100vw); box-shadow: var(--shadow-m); }
.sheet[open] { animation: sheetIn var(--dur-2) var(--ease); }
@keyframes sheetIn { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--line); }
.sheet-head h2 { font: 800 22px/1.2 var(--font-ui); letter-spacing: var(--ls-head); color: var(--ink); margin: 0; }
.sheet-body { padding: 20px 24px 32px; overflow: auto; max-height: calc(100dvh - 78px); }
.sheet-body h3 { font: 700 15px/1.3 var(--font-ui); color: var(--ink); margin: 24px 0 10px; }
.sheet-body h3:first-child { margin-top: 0; }
.contact-list { display: grid; gap: 8px; }
.contact-list a, .contact-list button { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-l); background: var(--surface); text-decoration: none; text-align: left; font: 700 15px/1.3 var(--font-ui); color: var(--ink); }
.contact-list a span, .contact-list button span { font-weight: 500; color: var(--ink-muted); font-size: 13.5px; }
.contact-list a:hover, .contact-list button:hover { border-color: var(--ink); }
.faq details + details { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 13px 28px 13px 0; font: 700 15px/1.35 var(--font-ui); color: var(--ink); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 2px; top: 10px; font-weight: 500; font-size: 20px; color: var(--accent-strong); transition: transform var(--dur-2) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 14px; font-size: 14px; color: var(--ink-body); }

.modal { width: min(560px, calc(100vw - 32px)); border-radius: var(--radius-xl); box-shadow: var(--shadow-m); }
.modal-sm { width: min(460px, calc(100vw - 32px)); }
.modal[open] { animation: modalIn var(--dur-2) var(--ease); }
@keyframes modalIn { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-body { padding: 28px 28px 28px; }
.modal-body h2 { font: 800 22px/1.2 var(--font-ui); letter-spacing: var(--ls-head); color: var(--ink); }
.quiz-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.quiz-count { font: 600 13px/1.3 var(--font-ui); color: var(--ink-muted); }
.quiz-bar { height: 4px; background: var(--line); border-radius: 2px; margin-bottom: 22px; overflow: hidden; }
.quiz-bar span { display: block; height: 100%; background: var(--accent); transition: width var(--dur-2) var(--ease); }
.quiz-q { font: 800 24px/1.18 var(--font-ui); letter-spacing: var(--ls-head); color: var(--ink); margin: 0 0 6px; }
.quiz-why { margin: 0 0 18px; color: var(--ink-muted); font-size: 14px; }
.quiz-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; gap: 12px; }
.reasons { margin: 12px 0 0; padding-left: 18px; color: var(--ink-body); font-size: 14px; }
.reasons li { margin-bottom: 6px; }
.share-link { display: flex; gap: 8px; margin: 14px 0 8px; }
.share-link input { flex: 1; min-width: 0; height: 44px; border: 1px solid var(--line-strong); border-radius: var(--radius-m); padding: 0 12px; font-size: 13.5px; background: var(--surface); color: var(--ink); }

.proto-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.proto-table th, .proto-table td { text-align: left; padding: 7px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.proto-table th { font-weight: 700; font-size: 12px; color: var(--ink-muted); }
.proto-table td.r, .proto-table th.r { text-align: right; white-space: nowrap; }
.proto-warn { font-size: 13px; color: var(--ink-muted); margin: 0 0 14px; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius-m); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--ink); color: var(--ink-inverse); padding: 12px 16px; border-radius: var(--radius-m); font: 600 14px/1.3 var(--font-ui); opacity: 0; pointer-events: none; transition: opacity var(--dur-2), transform var(--dur-2) var(--ease); z-index: 50; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.fade-in { animation: fadeIn var(--dur-3) var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- tablet en mobiel ---------- */
@media (max-width: 1100px) { :root { --panel-w: 420px; } .app:has(#leadForm) { --panel-w: 440px; } }
@media (max-width: 900px) {
  :root { --top-h: 56px; --stage-groot: max(300px, 42svh); --stage-klein: 128px; }
  .topbar { gap: 10px; padding: 0 16px; }
  .brand img { height: 28px; }
  .topbar-title, [data-action="share"].btn, .tel span { display: none; }
  .topbar-actions { gap: 6px; }
  .tel { width: 40px; padding: 0; justify-content: center; border: 1px solid var(--line-strong); border-radius: var(--radius-m); }
  .panel-foot { gap: 8px; }
  .panel-foot.met-prijs .foot-sum { display: flex; padding: 0 2px; background: none; border-radius: 0; font-size: 12.5px; }
  .panel-foot.met-prijs .foot-sum b { font-size: 14px; }
  .app:has(.panel-foot.met-prijs) .panel-body { padding-bottom: 150px; }
  html:has(.panel-foot.met-prijs) { scroll-padding-bottom: 124px; }
  .app { display: block; height: auto; }
  /* beeld zonder kader; het onderblad met greep schuift 18 px over het beeld */
  .stage { position: sticky; top: 0; height: var(--stage-groot); z-index: 2; background: var(--stage-bg); transition: height var(--dur-2) var(--ease); }
  .viewport, .stage-loading { inset: 0 0 18px; border-radius: 0; }
  .stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; z-index: 3; pointer-events: none; border-radius: 18px 18px 0 0; background: var(--surface); box-shadow: 0 -6px 18px rgba(21, 25, 22, 0.08); }
  .stage::before { content: ""; position: absolute; left: 50%; bottom: 14px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--line-strong); z-index: 4; pointer-events: none; }
  .stage-top { top: 12px; left: 12px; right: 12px; }
  .seg-ctrl button { height: 30px; padding: 0 9px; font-size: 12.5px; }
  .night-toggle { height: 38px; padding: 0 12px; }
  .night-label { display: none; }
  .stage-bottom { left: 12px; right: 12px; bottom: 36px; }
  .drag-hint { display: none; }
  .spec-chip { font-size: 12.5px; padding: 6px 10px; }
  .panel { display: block; }
  .stepper { padding: 6px 20px 2px; }
  .panel-body { overflow: visible; padding: 18px 20px 120px; }
  .step-title { font-size: 24px; }
  .step-intro { font-size: 14.5px; margin-bottom: 16px; }
  .panel-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow: var(--shadow-bar); }
  .panel-foot .foot-sum { display: none; }
  .foot-btns .btn { height: 50px; }
  .foot-btns .btn-primary { font-size: 15.5px; }
  .foot-btns .btn-back { width: 50px; }
  .sheet { margin: auto 0 0; width: 100vw; height: auto; max-height: 86dvh; border-radius: 18px 18px 0 0; }
  .sheet[open] { animation-name: sheetUp; }
  @keyframes sheetUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  .sheet-body { max-height: calc(86dvh - 70px); }
  .modal-body { padding: 22px 20px 22px; }
  .summary-row { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; }
  .summary-row dd { grid-column: 1; }
  .summary-row .link-btn { grid-row: 1; grid-column: 2; }
}
@media (max-width: 420px) {
  .two { grid-template-columns: 1fr; }
  .opt { gap: 12px; padding: 13px 14px; }
  .opt[aria-checked="true"] { padding: 12px 13px; }
  .opt-thumb { width: 52px; height: 52px; }
  .swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .mini-seg button { padding: 0 9px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* feedback 01-11: breedte en plek van een opening in de wand, plattegrond */
.wall-detail { grid-column: 1 / -1; padding: 0 0 2px 14px; border-left: 2px solid var(--accent-tint); }
.wall-detail .dim { padding: 8px 0; border: 0; }
.wall-detail .note { margin: 4px 0 0; }
.mini-seg { flex-wrap: wrap; }
.dim.pos { grid-template-columns: 1fr; }
.plan-legend i.is-vert { background: repeating-linear-gradient(90deg, #5f8ea0 0 5px, transparent 5px 8px); }
.lbl-seg.is-verticaal::before { background: repeating-linear-gradient(90deg, var(--glass) 0 3px, transparent 3px 5px); }
.plan-legend i.is-gat { height: 8px; border: 1px dashed var(--ink); background: rgba(95, 142, 160, .12); }
/* naam en keuze naast elkaar als het past, anders de keuze eronder */
.wall-row { display: flex; flex-wrap: wrap; justify-content: space-between; }
.wall-row .w-name { flex: 1 1 auto; }
.wall-detail { flex: 1 0 100%; }

/* ronde 2 (01-11): richting van dakraam en lamellen, gevel per productgroep */
.dir-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; }
.chip.dir-chip { height: auto; min-height: 44px; padding: 8px 12px; border-radius: var(--radius-m); display: flex; align-items: center; gap: 10px; text-align: left; }
.dir-chip svg { flex: none; color: var(--ink-muted); }
.dir-chip[aria-checked="true"] svg { color: var(--accent-strong); }
.niveau { display: block; margin-top: 4px; font: 500 12.5px/1.4 var(--font-ui); color: var(--ink-muted); }
.opt-label { display: block; font: 600 12.5px/1.3 var(--font-ui); color: var(--accent-strong); }

/* Stap in stappen (kiesLijst in app.js): kiezen, de uitwerking onder de gekozen kaart openschuiven, de rest
   inklappen tot één rij. Hoogte via grid-template-rows 0fr/1fr, de enige plek waar we hoogte animeren: kort,
   ease-out, zonder stuiter. visibility schakelt pas na het inklappen, dan zijn ingeklapte knoppen niet focusbaar.
   De ruimte tussen de kaarten zit binnen .kies-in en klapt mee in; de zijmarge laat plek voor de focusrand. */
.kies-opts { margin: -5px 0; }
.kies-klap, .kies-detail, .kies-kort, .kies-volgt {
  display: grid; grid-template-rows: 1fr; opacity: 1; visibility: visible;
  transition: grid-template-rows var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease), visibility 0s;
}
.kies-in { min-height: 0; overflow: hidden; margin-inline: -4px; padding-inline: 4px; }
.kies-klap .opt { margin: 5px 0; }
.kies-detail .kies { padding-top: 22px; }
.kies-detail > .kies-in > :last-child { margin-bottom: 4px; }
.kies-detail .profiel-fig { margin-top: 10px; }
.kies-detail .group { border-top: 0; padding: 18px 0 0; }
.kies[data-open="false"] > .kies-opts > .kies-item:not(.is-gekozen) > .kies-klap,
.kies[data-open="false"] > .kies-opts > .kies-item > .kies-klap .kies-kort,
.kies[data-open="false"] > .kies-volgt,
.kies[data-open="true"] > .kies-opts > .kies-item > .kies-detail {
  grid-template-rows: 0fr; opacity: 0; visibility: hidden;
  transition: grid-template-rows var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease), visibility 0s var(--dur-2);
}
/* de uitwerking komt net na het inklappen in beeld */
.kies[data-open="false"] > .kies-opts > .kies-item > .kies-detail { transition: grid-template-rows var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease) 60ms, visibility 0s; }
.kies-wissel { font-size: 13.5px; padding: 10px 0; margin: -10px 0; }
/* Zolang de lijst open staat: een pijltje op elke kaart (de keuze schuift eronder open) en de subkeuzes die
   volgen als gedempte koppen onder de lijst. Vóór de eerste keuze staat er geen vinkje, alleen een voorbeeld. */
.kies-klap .opt { grid-template-columns: auto minmax(0, 1fr) auto 16px; }
/* een kaart zonder plaatje: het rondje vooraan, waar bij de andere kaarten het plaatje staat */
.kies-klap .opt > .opt-radio { order: 0; }
.kies-klap .opt::after {
  content: ""; grid-column: -2; width: 16px; height: 16px; background: var(--ink-muted);
  -webkit-mask: var(--chev) center / contain no-repeat; mask: var(--chev) center / contain no-repeat;
  transition: opacity var(--dur-1) var(--ease);
}
.kies[data-open="false"] > .kies-opts > .kies-item > .kies-klap .opt::after { opacity: 0; }
.kies-volgt .group-label { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-muted); font-weight: 600; }
@media (max-width: 420px) {
  /* smal: het label en een eventuele meerprijs onder de tekst, dan breekt de omschrijving niet in drie regels */
  .kies-klap .opt { grid-template-columns: auto minmax(0, 1fr) 16px; row-gap: 2px; }
  .kies-klap :is(.opt-thumb, .opt-radio) { grid-row: span 2; }
  .kies-klap .opt-meta { grid-column: 2; grid-row: 2; text-align: left; }
  .kies-klap .opt::after { grid-column: 3; grid-row: 1 / span 2; }
}
@media (prefers-reduced-motion: reduce) { .kies-klap, .kies-detail, .kies-kort, .kies-volgt { transition-delay: 0s !important; } }
.more-btn { margin-top: 12px; }
.profiel-fig { margin: 14px 0 0; padding: 14px 16px 12px; background: var(--bg-subtle); border-radius: var(--radius-l); }
.profiel-fig svg { display: block; width: 100%; height: auto; }
.profiel-fig figcaption { margin-top: 8px; font: 500 12.5px/1.45 var(--font-ui); color: var(--ink-muted); }
.profiel-fig figcaption b { color: var(--ink); font-weight: 700; }
.plan-legend i.is-geen { background: none; }

/* ronde 2 (01-11): op een telefoon klapt het 3D-beeld in tot een strook en weer uit (zet3d in app.js). Een echte knop,
   plus tikken of slepen aan de greep zoals bij een bottom sheet (Material 3: de greep schakelt ook met een tik).
   Ingeklapt blijft het huis klein in beeld; weergaveknoppen, avond, maatchip en maatlabels gaan mee weg. De hoogte
   beweegt, omdat de keuzes eronder mee omhoog moeten schuiven. */
.stage-toggle, .stage-grip { display: none; }
@media (max-width: 900px) {
  [data-stage="klein"] .stage { height: var(--stage-klein); }
  /* een veld dat focus krijgt, valt niet onder het 3D-beeld of de voetbalk */
  html { scroll-padding: calc(var(--stage-groot) + 12px) 0 96px; }
  html[data-stage="klein"] { scroll-padding-top: calc(var(--stage-klein) + 12px); }
  .stage.is-sleept { transition: none; }
  .stage-bottom { z-index: 6; }
  .stage-toggle {
    display: inline-flex; align-items: center; gap: 6px; flex: none; margin-left: auto; height: 36px; padding: 0 12px 0 14px;
    border: 0; border-radius: 999px; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: var(--shadow-s);
    font: 600 13px/1 var(--font-ui); color: var(--ink); pointer-events: auto; transition: transform var(--dur-1) var(--ease);
  }
  .stage-toggle:active { transform: scale(0.97); }
  .stage-toggle::after {
    content: ""; width: 14px; height: 14px; background: currentColor; transform: rotate(180deg);
    -webkit-mask: var(--chev) center / contain no-repeat; mask: var(--chev) center / contain no-repeat;
    transition: transform var(--dur-2) var(--ease);
  }
  .stage-toggle .st-klein, [data-stage="klein"] .stage-toggle .st-groot { display: none; }
  [data-stage="klein"] .stage-toggle .st-klein { display: inline; }
  [data-stage="klein"] .stage-toggle::after { transform: none; }
  .stage-grip { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; z-index: 5; touch-action: none; cursor: grab; }
  [data-stage="klein"] .stage-grip { height: 100%; }
  .stage-top, .spec-chip, .label-layer { transition: opacity var(--dur-1) var(--ease), visibility 0s; }
  [data-stage="klein"] :is(.stage-top, .spec-chip, .label-layer) {
    opacity: 0; visibility: hidden; transition: opacity var(--dur-1) var(--ease), visibility 0s var(--dur-1);
  }
}

/* ronde 3 (01-11) */
/* start: Zelf samenstellen is de hoofdactie, de enige terracotta knop op het scherm; de voet heeft dan bellen en appen */
.start-choice.is-hoofd { background: var(--cta); border-color: var(--cta); }
.start-choice.is-hoofd:hover { background: var(--cta-hover); border-color: var(--cta-hover); }
.start-choice.is-hoofd:active { background: var(--cta-pressed); }
.start-choice.is-hoofd .sc-name, .start-choice.is-hoofd .arrow { color: var(--on-cta); }
.start-choice.is-hoofd .sc-desc { color: rgba(255, 255, 255, 0.9); }
.foot-contact .btn { flex: 1; gap: 8px; font-weight: 700; }
.foot-contact .btn svg { width: 20px; height: 20px; flex: none; }
.tel.wa span { display: none; }
@media (min-width: 1280px) { .tel.wa span { display: inline; } }

/* stappenbalk: alle stappen en opnieuw beginnen, rustig naast elkaar */
.stepper-acts { display: inline-flex; align-items: center; gap: 16px; }
.reset-btn { background: none; border: 0; padding: 6px 0; min-height: 32px; display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 var(--font-ui); color: var(--ink-muted); }
.reset-btn svg { width: 16px; height: 16px; flex: none; }
.reset-btn:hover { color: var(--ink); }
@media (max-width: 420px) { .reset-btn span { display: none; } .reset-btn { min-width: 32px; justify-content: center; } }

/* menu Alle stappen: naam, een vinkje of nummer, en een paar woorden */
.step-menu { padding: 4px 6px; }
.step-menu button { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; padding: 9px 8px; font: 600 14px/1.3 var(--font-ui); color: var(--ink); }
.step-menu .sm-st { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--font-ui); color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--line-strong); }
.step-menu .is-done .sm-st { background: var(--accent-tint); color: var(--accent-strong); box-shadow: none; }
.step-menu .is-current .sm-st { background: var(--ink); color: var(--ink-inverse); box-shadow: none; }
.step-menu .sm-naam { text-align: left; }
.step-menu .val { max-width: 16ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }

/* indeling: één wand tegelijk */
.wand-ruimte { margin: 14px 0 6px; font: 600 12.5px/1.3 var(--font-ui); color: var(--ink-muted); }
.wand-kies { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin: 10px 0 0; }
.wand-ruimte + .wand-kies { margin-top: 0; }
.wand-kies button { min-height: 52px; display: grid; align-content: center; gap: 3px; padding: 8px 4px; border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: var(--surface); text-align: center; transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.wand-kies button:hover { border-color: var(--ink); }
.wand-kies b { font: 700 13.5px/1.2 var(--font-ui); color: var(--ink); }
.wand-kies span { font: 500 12px/1.2 var(--font-ui); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wand-kies [aria-checked="true"] { border-color: var(--accent); background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent); }
.wand-titel { margin-top: 18px; }
.plan-seg:focus-visible { outline: none; }
.plan-seg:focus-visible rect { stroke: var(--accent); stroke-width: 2; }

/* ruimte kiezen bij binnenwand, plafond en elektra */
.seg-kies { display: inline-grid; grid-auto-flow: column; gap: 4px; padding: 4px; background: var(--bg-subtle); border-radius: var(--radius-m); max-width: 100%; }
.seg-kies button { border: 0; background: transparent; min-height: 40px; padding: 0 16px; border-radius: var(--radius-s); font: 600 14px/1.2 var(--font-ui); color: var(--ink-muted); }
.seg-kies button:hover { color: var(--ink); }
.seg-kies [aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-s); }
/* telefoon: op het startscherm direct de keuzes, de uitleg staat al in de knoppen */
@media (max-width: 420px) { .start-intro { display: none; } }

/* formulier: de niet-verplichte vragen zitten achter één uitklapper (audit 10-11) */
.form-meer { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 2px 0; }
.form-meer summary { cursor: pointer; font-weight: 600; color: var(--ink); padding: 12px 0; min-height: 44px; display: flex; align-items: center; gap: 6px; list-style: none; }
.form-meer summary::-webkit-details-marker { display: none; }
.form-meer summary::after { content: '+'; margin-left: auto; font-weight: 500; font-size: 18px; color: var(--ink-muted); }
.form-meer[open] summary::after { content: '\2212'; }
.form-meer .field { margin-bottom: 14px; }
/* overzicht: de keuzes in één rij, zelfde in- en uitklappen als "Meer vertellen" */
.keuzes { margin: 0 0 20px; }
.keuzes summary { gap: 14px; padding: 10px 0; min-height: 56px; }
.keuzes-kop { display: grid; gap: 3px; min-width: 0; }
.keuzes-kop b { font-weight: 700; }
.keuzes-kort { font-weight: 400; font-size: 14px; line-height: 1.4; color: var(--ink-body); }
.keuzes[open] .keuzes-kort { display: none; }
.keuzes .summary { margin: 0; }
.btn-primary:disabled { opacity: 0.7; cursor: progress; }
/* tikdoelen op een telefoon minstens 44 px hoog */
@media (pointer: coarse) {
  .chip { min-height: 44px; }
  .stepper-menu-btn, .stepper-acts button, .link-btn { min-height: 44px; display: inline-flex; align-items: center; }
  .progress button::after { inset: -20px 0; }
}

/* materiaalkeuzes: grotere, duidelijke stalen (10-11) */
.opt-thumb { width: 84px; height: 84px; border-radius: var(--radius-m); }
.swatches { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.swatch-img { aspect-ratio: 1 / 1; }
@media (max-width: 900px) {
  .opt-thumb { width: 72px; height: 72px; }
  .swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* toestemmingsbalk (alleen op vergola.nl, ingevoegd door build.mjs) */
.cfg-consent { position: fixed; left: 16px; bottom: 16px; z-index: 90; max-width: 420px; display: grid; gap: 12px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-m); font-size: 14px; line-height: 1.5; color: var(--ink-body); }
.cfg-consent[hidden] { display: none; }
.cfg-consent a { color: var(--accent); }
.cfg-consent div { display: flex; flex-wrap: wrap; gap: 8px; }
.cfg-consent .btn { height: 40px; padding: 0 14px; font-size: 14px; }
@media (max-width: 899px) { .cfg-consent { left: 12px; right: 12px; bottom: auto; top: 12px; max-width: none; } }