/* Kastgoed-configurator, opmaak v3 (4 okt 2026).
 *
 * Bron: _onderzoek/shopify-2026-10/ontwerpbrief-v3.md, paragraaf 3 en 6.
 * Dezelfde configurator in het productpaginapatroon: tekenvlak links met een
 * gereedschapsrij, paneel rechts met ingeklapte stapregels, een koopbalk met
 * wandsamenvatting. Onder 900 een vaste splitsing (tekening boven, paneel
 * eronder) in plaats van de sleepbare sheet.
 *
 * Regels voor dit bestand
 *   - Alleen kleuren uit src/styles/tokens.css, transparant via color-mix().
 *   - Het breekpunt 900 is hard: configurator.js schakelt daar (innerWidth<900).
 *   - Headerhoogte alleen via var(--nav-hoogte).
 *   - configurator.js zet onder 900 --sheetY op #paneel. Deze CSS gebruikt die
 *     variabele bewust nergens meer, dus het paneel staat vast.
 *   - Tekst in het paneel minimaal 15 px; 13 px alleen voor badges, labels in
 *     de gereedschapsrij en de koopbalk, meerprijzen en staalnamen.
 */

/* ---------- basis ---------- */
.cfg{
  --paneel-b:440px;
  --balk:var(--linnen);
  --schaduw-zacht:0 2px 10px color-mix(in srgb, var(--walnut) 10%, transparent);
  position:relative;
  font-family:var(--font-tekst);font-size:var(--fs-15);line-height:1.5;color:var(--walnut);
  background:var(--wit);-webkit-font-smoothing:antialiased;
}
@media (min-width:1100px){.cfg{--paneel-b:clamp(440px,34vw,520px)}}
.cfg *{box-sizing:border-box}
.cfg button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.cfg button:disabled{cursor:default}
.cfg svg{display:block}
.cfg :focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--radius)}
.cfg h2,.cfg h3{letter-spacing:0;line-height:1.35}
.cfg-pagina{overflow:hidden}
.cfg-pagina main{display:block}
/* Op de configurator zelf is de hoofdactie van de nav overbodig; de winkelmand blijft. */
.cfg-pagina .nav .nav__cta{display:none}

/* ---------- indeling ---------- */
.cfg .app{display:flex;position:relative;overflow:hidden;
  height:calc(100vh - var(--nav-hoogte));height:calc(100dvh - var(--nav-hoogte));min-height:560px}
.cfg .canvas{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--wit);
  border-right:1px solid var(--linnen);container-type:inline-size;container-name:canvas}
.cfg .galerij{position:relative;flex:1;min-height:0}

/* tekening, 3D en schuif delen exact hetzelfde vak: de 3D-camera rekent op die maat */
.cfg .tekenvlak,.cfg .vlak3d,.cfg .abwrap{position:absolute;inset:32px}
.cfg .tekenvlak{display:grid;place-items:center}
.cfg .tekenvlak svg{width:100%;height:100%}
.cfg .tekenvlak [data-canvas-seg]{cursor:pointer}
.cfg .tekenvlak [data-canvas-seg]:focus-visible{outline:2px solid var(--actie);box-shadow:none}
.cfg .vlak3d{pointer-events:none;clip-path:inset(0 0 0 var(--ab,50%));background:var(--wit)}
.cfg .vlak3d.orbit{pointer-events:none;cursor:default}
.cfg .vlak3d canvas{display:block;width:100%;height:100%}
.cfg .abwrap{pointer-events:none;z-index:4}
.cfg .ab{position:absolute;top:0;bottom:0;left:var(--ab,50%);width:0}
.cfg .ab .lijn{position:absolute;top:0;bottom:0;left:-1px;width:2px;
  background:color-mix(in srgb, var(--walnut) 50%, transparent)}
.cfg .ab .greep3d{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:44px;height:44px;
  border-radius:50%;background:var(--wit);border:1px solid var(--linnen);box-shadow:var(--schaduw-zacht);
  display:grid;place-items:center;cursor:ew-resize;pointer-events:auto;touch-action:none}
.cfg .ab .greep3d svg{width:18px;height:18px;stroke:var(--walnut);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cfg .ab .greep3d:hover{border-color:var(--steen)}
.cfg .ab .greep3d:focus-visible{border-radius:50%}

/* interne legenda: niet voor de koper (brief 6) */
.cfg .legenda3d{display:none}

/* bovenaanzicht: klein zwevend venster linksboven, standaard dicht */
.cfg .boven{position:absolute;top:16px;left:16px;z-index:6;width:220px;padding:10px 12px 12px;
  background:var(--wit);border:1px solid var(--linnen);border-radius:var(--radius)}
.cfg .boven.dicht{display:none}
.cfg .boventitel{display:block;margin-bottom:6px;font-size:var(--fs-13);font-weight:450;color:var(--steen)}
.cfg #boven-svg svg{width:100%;height:auto}
.cfg .bovenlegenda{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:2px;font-size:var(--fs-13);color:var(--steen)}
.cfg .bovenlegenda i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}

/* meldingen bovenaan in het midden */
.cfg .kantelchip{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:5;
  display:flex;align-items:center;gap:8px;width:max-content;max-width:min(92%,520px);
  padding:8px 14px;background:var(--wit);border:1px solid var(--messing);border-radius:var(--radius);
  font-size:var(--fs-15);line-height:1.4;color:var(--walnut)}
.cfg .kantelchip svg{width:16px;height:16px;flex:none;stroke:var(--messing);fill:none;stroke-width:1.6;stroke-linecap:round}
.cfg .kantelchip[hidden]{display:none}
.cfg.kantel-aan .afwerkchip{top:64px}

/* ---------- gereedschapsrij ---------- */
.cfg .gereedschap{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
  height:56px;padding:0 12px;border-top:1px solid var(--linnen);background:var(--wit)}
.cfg .tools,.cfg .tools2{display:flex;align-items:center;gap:2px}
.cfg .gk{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  min-width:44px;height:48px;padding:0 8px;border-radius:var(--radius);color:var(--walnut);
  font-size:var(--fs-13);line-height:1.2;white-space:nowrap}
.cfg .gk svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.cfg .gk .gl{font-size:var(--fs-13);color:var(--steen)}
.cfg .gk:hover:not(:disabled){background:var(--tegel)}
.cfg .gk[aria-pressed="true"],.cfg .gk[aria-expanded="true"]{background:var(--tegel)}
.cfg .gk[aria-pressed="true"] .gl,.cfg .gk[aria-expanded="true"] .gl{color:var(--walnut)}
.cfg .gk:disabled{color:var(--steen-deco)}
.cfg .gk:disabled .gl{color:var(--steen-deco)}
/* De frontenknop krijgt zijn inhoud en een inline stijl uit 3d/preview3d.js
   (gevuld blauw, 12,5 px). In de rij hoort hij eruit te zien als de andere knoppen. */
.cfg #fronten3d.gk{background:none!important;border:0!important;color:var(--walnut)!important;
  font-size:var(--fs-13)!important;font-weight:300!important;padding:0 8px!important;box-shadow:none!important}
.cfg #fronten3d.gk:hover{background:var(--tegel)!important}
.cfg #fronten3d.gk svg{width:20px!important;height:20px!important;margin:0!important}
/* Nico 15 okt: na de eerste frontkleur gaan de fronten dicht en licht deze knop
   drie keer kort op (alleen transform en opacity). */
.cfg #fronten3d.gk{position:relative}
.cfg #fronten3d.gk::after{content:"";position:absolute;inset:2px;border-radius:var(--radius);
  border:2px solid var(--actie);opacity:0;pointer-events:none}
.cfg #fronten3d.gk.pulseer{animation:fronten-puls .6s cubic-bezier(.3,.7,.4,1) 3}
.cfg #fronten3d.gk.pulseer::after{animation:fronten-ring .6s cubic-bezier(.3,.7,.4,1) 3}
@keyframes fronten-puls{0%,100%{transform:scale(1)}35%{transform:scale(1.08)}}
@keyframes fronten-ring{0%{opacity:0;transform:scale(.92)}35%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){
  .cfg #fronten3d.gk.pulseer{animation:fronten-stil 1.8s steps(1) 1}
  .cfg #fronten3d.gk.pulseer::after{animation:fronten-stil-ring 1.8s steps(1) 1}
  @keyframes fronten-stil{0%,100%{transform:none}}
  @keyframes fronten-stil-ring{0%{opacity:1;transform:none}100%{opacity:0}}
}

/* gesegmenteerde schakelaar Tekening | 3D */
.cfg .schakelaar{display:inline-flex;flex:none;padding:2px;border:1px solid var(--linnen);border-radius:var(--radius);background:var(--wit)}
.cfg .schakelaar .lbl{min-width:44px;min-height:44px;padding:0 14px;border-radius:4px;
  font-size:var(--fs-15);font-weight:450;color:var(--walnut);white-space:nowrap}
.cfg .schakelaar .lbl:hover{background:var(--tegel)}
.cfg .schakelaar .lbl.aan{background:var(--actie);color:var(--wit)}

.cfg .rendernotitie{flex:none;margin:0;padding:0 16px 10px;font-size:var(--fs-13);line-height:1.4;color:var(--steen)}

/* Smal tekenvlak (900 tot circa 1150): alleen iconen, de namen blijven voor schermlezers. */
@container canvas (max-width:760px){
  .cfg .gk .gl{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cfg .gk{padding:0 10px}
  .cfg #fronten3d.gk{font-size:0!important;padding:0 10px!important}
  .cfg .schakelaar .lbl{padding:0 10px;font-size:var(--fs-13)}
}

/* ---------- inklapknop (alleen desktop) ---------- */
.cfg .klapknop{position:absolute;top:50%;right:var(--paneel-b);transform:translate(50%,-50%);z-index:30;
  width:44px;height:44px;display:grid;place-items:center;border-radius:50%;transition:right .28s ease}
.cfg .klapknop::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--wit);
  border:1px solid var(--linnen);box-shadow:var(--schaduw-zacht)}
.cfg .klapknop svg{position:relative;width:14px;height:14px;stroke:var(--walnut);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .28s ease}
.cfg .app.dicht .klapknop{right:22px}
.cfg .app.dicht .klapknop svg{transform:rotate(180deg)}

/* ---------- paneel (de infokolom) ---------- */
.cfg .paneel{position:relative;width:var(--paneel-b);flex:0 0 var(--paneel-b);display:flex;flex-direction:column;
  min-height:0;background:var(--wit);transition:margin-right .28s ease}
.cfg .app.dicht .paneel{margin-right:calc(-1 * var(--paneel-b));visibility:hidden;
  transition:margin-right .28s ease, visibility 0s .28s}
.cfg .greep{display:none}

.cfg .paneelkop{flex:none;padding:20px 24px 16px;border-bottom:1px solid var(--linnen);background:var(--wit)}
.cfg .paneelkop h1{margin:0 0 6px;font-family:var(--font-display);font-weight:400;font-size:var(--kop-m);
  line-height:1.25;letter-spacing:var(--track-display);text-transform:uppercase;color:var(--walnut)}
.cfg .paneelkop h1::after{content:"."}
.cfg .uitleg{margin:0 0 14px;font-size:var(--fs-15);color:var(--steen)}
.cfg .voortgang{display:grid;gap:8px}
.cfg .vdots{display:flex;gap:4px}
.cfg .vdots span{flex:1;height:4px;border-radius:2px;background:var(--linnen)}
.cfg .vdots span.klaar{background:var(--steen)}
.cfg .vdots span.nu{background:var(--actie)}
.cfg .vlabel{font-size:var(--fs-13);color:var(--steen)}

.cfg .secties{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;position:relative;
  padding:16px 24px 32px;scroll-behavior:smooth;background:var(--wit);overscroll-behavior:contain}

/* ---------- begeleidingskaart ---------- */
.cfg .intro{position:relative;margin:0 0 8px;padding:20px 52px 20px 20px;background:var(--tegel);border-radius:var(--radius)}
.cfg .intro[hidden]{display:none}
.cfg .introkop{margin:0 0 6px;font-size:var(--fs-21);font-weight:550;line-height:1.3;color:var(--walnut)}
.cfg .intro p{margin:0 0 14px;font-size:var(--fs-15);line-height:1.55;color:var(--walnut)}
.cfg .introstappen{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cfg .introstappen li{display:flex;align-items:center;gap:10px;font-size:var(--fs-15)}
.cfg .introstappen .znr{background:var(--wit)}
.cfg .intro-kort{display:none}
.cfg .v3-intro[data-stand="kort"] .intro-vol{display:none}
.cfg .v3-intro[data-stand="kort"] .intro-kort{display:block}
.cfg .intro:has(.v3-intro[data-stand="kort"]){padding:0 44px 0 0;background:none;border-bottom:1px solid var(--linnen);border-radius:0}
.cfg .introhulp{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:var(--fs-15);
  color:var(--actie);text-decoration:underline;text-underline-offset:3px}
.cfg .introhulp svg{width:20px;height:20px;stroke:var(--actie);fill:none;stroke-width:1.6;stroke-linecap:round}
.cfg .introhulp:hover{color:var(--actie-donker)}
.cfg .introx{position:absolute;top:4px;right:4px;width:44px;height:44px;border-radius:var(--radius);
  display:grid;place-items:center;color:var(--steen)}
.cfg .introx:hover{color:var(--walnut);background:color-mix(in srgb, var(--wit) 70%, transparent)}
.cfg .introx svg{width:12px;height:12px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

/* ---------- stappen ---------- */
.cfg .zonekop{display:flex;flex-direction:column;gap:2px;margin:24px 0 10px}
.cfg #z-s1{margin-top:16px}
.cfg .zonekop h2{display:flex;align-items:center;gap:10px;margin:0;font-size:var(--fs-17);font-weight:550;color:var(--walnut)}
.cfg .znr{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:4px;
  background:var(--tegel);color:var(--walnut);font-size:var(--fs-13);font-weight:550;font-variant-numeric:tabular-nums}
.cfg .zonesub{font-size:var(--fs-15);color:var(--steen);padding-left:34px}
.cfg .zonekop.rustig h2{color:var(--steen)}
.cfg .zonekop.rustig .znr{background:none;box-shadow:inset 0 0 0 1px var(--linnen);color:var(--steen)}

/* ---------- kaarten (Floyd-patroon) ---------- */
.cfg .kaart{position:relative;margin-bottom:8px;background:var(--wit);border:1px solid var(--linnen);
  border-radius:var(--radius);transition:border-color .15s ease}
.cfg .kaart:not(.open):hover{border-color:var(--steen-deco)}
.cfg .kaart.af{box-shadow:inset 3px 0 0 var(--dusty)}
.cfg .kaart.open{border-color:var(--dusty);box-shadow:none}
.cfg .kaart.rustig .knaam,.cfg .kaart.rustig .kicoon{color:var(--steen)}
.cfg .koprij{position:relative}
.cfg .kaartkop{display:grid;grid-template-columns:32px minmax(0,1fr) 20px;gap:12px;align-items:center;
  width:100%;min-height:64px;padding:8px 16px;text-align:left;border-radius:var(--radius)}
.cfg .kicoon{width:32px;height:32px;color:var(--walnut)}
.cfg .kicoon svg{width:32px;height:32px;stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.cfg .ktekst{display:flex;align-items:center;gap:12px;min-width:0}
.cfg .knaam{position:static;display:flex;align-items:center;flex:none;font-size:var(--fs-17);font-weight:550;line-height:1.3;color:var(--walnut)}
.cfg .ksamen{display:block;font-size:var(--fs-15);color:var(--steen);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* badges rechts; ze lopen naar rechts over zodat kapBadges() het meet en afkapt tot +n */
.cfg .ksamen.badges{display:flex;gap:4px;flex:0 1 auto;min-width:0;margin-left:auto;overflow:hidden;text-overflow:clip}
.cfg .bdg{flex:none;padding:3px 8px;border-radius:var(--radius-s);background:var(--tegel);color:var(--walnut);
  font-size:var(--fs-13);font-weight:450;line-height:1.4;white-space:nowrap}
.cfg .kaart.leeg .bdg{padding:2px 7px;background:none;border:1px solid var(--linnen);color:var(--steen)}
.cfg .chev{width:20px;height:20px;justify-self:end;display:grid;place-items:center}
.cfg .chev svg{width:18px;height:18px;stroke:var(--walnut);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.cfg .kaart.open .chev svg{transform:rotate(180deg)}
.cfg .kprijs{font-size:var(--fs-15);font-weight:450;text-align:right;font-variant-numeric:tabular-nums;
  white-space:nowrap;color:var(--walnut)}
.cfg .kaart.leeg .kprijs{color:var(--steen)}
/* afgerond: vinkje op de hoek, plus de linkerbalk hierboven */
.cfg .kvink{display:none;position:absolute;top:-8px;left:-6px;z-index:8;width:20px;height:20px;
  border-radius:50%;background:var(--wit);place-items:center;box-shadow:0 0 0 1px var(--dusty)}
.cfg .kvink svg{width:11px;height:11px;stroke:var(--actie);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cfg .kaart.af .kvink{display:grid}
/* open: de kop plakt bovenin het scrollvlak */
.cfg .kaart.open .koprij{position:sticky;top:-16px;z-index:6;background:var(--wit);
  border-bottom:1px solid var(--linnen);border-radius:var(--radius) var(--radius) 0 0}
.cfg .kaart.open .koprij.vast{margin-inline:-25px;padding-inline:25px;border-radius:0}

/* segmentkaarten (stap 2 en 3): greep, kop, prijs, chevron */
.cfg .kaart.seg .koprij{display:flex;align-items:stretch}
.cfg .kaart.seg .kaartkop{flex:1;min-width:0;grid-template-columns:32px minmax(0,1fr) auto 20px;padding-left:12px}
.cfg .kaart.seg .koprij .segsleep + .kaartkop{padding-left:0}
.cfg .kaart.seg .kprijs{order:3}
.cfg .kaart.seg .chev{order:4}
.cfg .segsleep{flex:none;width:44px;display:grid;place-items:center;color:var(--steen);cursor:grab;
  touch-action:none;border-radius:var(--radius)}
.cfg .segsleep:hover{color:var(--walnut);background:var(--tegel)}
.cfg .segsleep svg,.cfg .inrsleep svg{width:10px;height:14px;fill:currentColor;stroke:none}
.cfg .segdel{position:absolute;top:-14px;right:-14px;z-index:8;width:44px;height:44px;display:grid;place-items:center;
  color:var(--steen);opacity:0;transition:opacity .15s,color .15s}
.cfg .segdel::before{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--wit);
  box-shadow:0 0 0 1px var(--linnen),var(--schaduw-zacht)}
.cfg .segdel svg{position:relative;width:10px;height:10px;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cfg .koprij:hover .segdel,.cfg .segdel:focus-visible{opacity:1}
.cfg .segdel:hover{color:var(--walnut)}
.cfg .koprij.vast .segdel{display:none}
@media (pointer:coarse){.cfg .segdel{opacity:1}}
.cfg .kaart.seg{transition:border-color .15s ease,transform .16s ease}
.cfg .sleept{transition:none!important;position:relative;z-index:20;
  box-shadow:0 8px 24px color-mix(in srgb, var(--walnut) 18%, transparent)!important;cursor:grabbing}

.cfg .kaartbody{padding:4px 16px 16px}
.cfg .kaartbody[hidden]{display:none}

/* ---------- binnen een open kaart ---------- */
.cfg .sub{padding:12px 0}
.cfg .subkop{display:flex;align-items:center;gap:2px;min-height:24px;margin:0 0 10px;font-size:var(--fs-15);font-weight:450;color:var(--walnut)}
.cfg .subkop .meerprijs{margin-left:6px;font-weight:300;font-size:var(--fs-15);color:var(--steen)}
.cfg .subkop-ex{margin-top:16px}
.cfg .sub.rustig .subkop{color:var(--steen)}
.cfg .hint{margin:10px 0 0;font-size:var(--fs-15);line-height:1.5;color:var(--steen)}
.cfg .afwerkregel{margin:8px 0 0}
/* i-knopjes: 24 px rond in beeld, 44 px klikvlak */
.cfg .tip{position:relative;flex:none;display:inline-grid;place-items:center;width:44px;height:44px;margin:-10px -8px -10px -4px;
  font-family:var(--font-tekst);font-size:var(--fs-13);font-weight:550;line-height:1;color:var(--steen);border-radius:50%}
.cfg .tip::before{content:"";position:absolute;inset:10px;border-radius:50%;border:1px solid var(--linnen);background:var(--wit)}
.cfg .tip:hover{color:var(--walnut)}
.cfg .tip:hover::before{border-color:var(--steen)}
.cfg .tip{isolation:isolate}
.cfg .tip::before{z-index:-1}
.cfg #zweef{position:fixed;z-index:99;max-width:280px;padding:10px 14px;background:var(--walnut);
  color:var(--wit);font-size:var(--fs-15);line-height:1.5;border-radius:var(--radius);pointer-events:none}
.cfg #zweef[hidden]{display:none}
.cfg #zweef .zicoon{display:block;width:52px;height:52px;margin:2px 0 6px}
.cfg #zweef .zicoon svg{width:52px;height:52px;stroke:var(--wit);fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.cfg #zweef.metfoto{max-width:280px}
.cfg #zweef .zfoto{display:block;width:160px;height:160px;object-fit:cover;margin:2px 0 8px;border-radius:var(--radius-s);background:var(--wit)}

/* velden */
.cfg #b-s1 .subrij{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;gap:0 16px}
/* muur en plafond naast elkaar: kop, veld en voorbeeldlabel op gelijke rijen */
.cfg #b-s1 .subrij > .sub{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start}
.cfg #b-s1 .subrij .subkop{align-self:end}
.cfg .veldrij{display:flex;align-items:center;gap:8px}
.cfg .veldrij input{width:120px;height:52px;padding:0 12px;border:1px solid var(--linnen);border-radius:var(--radius);
  font:inherit;font-size:var(--fs-17);color:var(--walnut);background:var(--wit);font-variant-numeric:tabular-nums}
.cfg .veldrij input:focus{outline:none;border-color:var(--actie);box-shadow:var(--focus)}
.cfg .veldrij.voorbeeld input{border-bottom:2px dotted var(--steen)}
.cfg .eenheid{font-size:var(--fs-15);color:var(--steen)}
.cfg .voorbeeldlabel{margin:6px 0 0;font-size:var(--fs-13);color:var(--steen);text-wrap:balance}
.cfg .voorbeeldlabel[hidden]{display:none}
.cfg .melding{display:flex;gap:8px;align-items:flex-start;margin:8px 0 4px;padding:10px 12px;
  border:1px solid var(--messing);border-radius:var(--radius);background:var(--wit);font-size:var(--fs-15);line-height:1.5;color:var(--walnut)}
.cfg .melding svg{width:16px;height:16px;flex:none;margin-top:3px;stroke:var(--messing);fill:none;stroke-width:1.6;stroke-linecap:round}
.cfg .melding[hidden]{display:none}

/* chips */
.cfg .chips{display:flex;flex-wrap:wrap;gap:8px}
.cfg .chip{min-height:44px;padding:0 16px;border:1px solid var(--linnen);border-radius:var(--radius);background:var(--wit);
  font-size:var(--fs-15);line-height:1.3;color:var(--walnut);font-variant-numeric:tabular-nums;transition:border-color .12s,background .12s}
.cfg .chip:hover{border-color:var(--steen)}
.cfg .chip.sel{background:var(--actie);border-color:var(--actie);color:var(--wit);font-weight:450}
.cfg .chip.uit,.cfg .chip[aria-disabled="true"]{color:var(--steen);border-style:dashed;border-color:var(--steen-deco);cursor:help}
.cfg .chip.uit:hover,.cfg .chip[aria-disabled="true"]:hover{background:var(--wit)}
.cfg .chip:disabled{color:var(--steen);cursor:not-allowed}

/* tegels */
.cfg .tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:16px 8px}
.cfg .tegels.plaatsing{grid-template-columns:repeat(4,minmax(0,1fr))}
/* type van een kast: twee tegels, het woord Wasmachinekast moet heel blijven */
.cfg .tegels:has([data-segtype]){grid-template-columns:repeat(2,minmax(0,140px))}
.cfg .tcel{position:relative;display:flex;justify-content:center}
.cfg .tegel{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;padding:2px;border-radius:var(--radius)}
.cfg .tring{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:var(--radius);
  background:var(--tegel);transition:box-shadow .12s}
.cfg .tring svg{width:40px;height:40px;stroke:var(--walnut);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.cfg .tegel:hover .tring{box-shadow:0 0 0 1px var(--steen-deco)}
.cfg .tegel.sel .tring{box-shadow:0 0 0 2px var(--actie)}
.cfg .tlabel{font-size:var(--fs-15);line-height:1.35;text-align:center;color:var(--walnut)}
.cfg .tegels.plaatsing .tlabel{font-size:var(--fs-13)}
.cfg .tsub{display:block;margin-top:2px;font-size:var(--fs-13);color:var(--steen)}
.cfg .vink{position:absolute;top:-6px;right:-6px;display:none;place-items:center;width:18px;height:18px;border-radius:50%;
  background:var(--actie);box-shadow:0 0 0 2px var(--wit)}
.cfg .vink svg{width:10px;height:10px;stroke:var(--wit);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cfg .tegel.sel .vink,.cfg .staalknop.sel .vink{display:grid}
.cfg .tel{position:absolute;top:-6px;left:-6px;display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;
  border-radius:10px;background:var(--walnut);color:var(--wit);font-size:var(--fs-13);font-weight:550;box-shadow:0 0 0 2px var(--wit)}
/* min-knop: rechtsonder op het icoonvlak, 24 in beeld en 44 klikvlak */
.cfg .tmin{position:absolute;top:36px;left:50%;margin-left:14px;z-index:3;width:44px;height:44px;display:grid;place-items:center;color:var(--walnut)}
.cfg .tmin::before{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--wit);
  box-shadow:0 0 0 1px var(--linnen),var(--schaduw-zacht)}
.cfg .tmin svg{position:relative;width:10px;height:10px;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cfg .tmin:hover::before{box-shadow:0 0 0 1px var(--steen)}
/* i-knop bij een tegel: linksonder op het icoonvlak */
.cfg .tip.tiptegel{position:absolute;top:36px;left:50%;margin:0 0 0 -58px;z-index:3}
/* op slot: zichtbaar, leesbaar, met slotje en de reden bij een klik (T5) */
.cfg .tegel.slot{cursor:help}
.cfg .tegel.slot .tring{background:var(--wit);box-shadow:inset 0 0 0 1px var(--linnen)}
.cfg .tegel.slot .tring svg{stroke:var(--steen-deco)}
.cfg .tegel.slot .tlabel{color:var(--steen)}
.cfg .slotje{position:absolute;top:-6px;right:-6px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--wit);box-shadow:0 0 0 1px var(--linnen)}
.cfg .slotje svg{width:10px;height:10px;stroke:var(--steen);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* stalen: 40 px, hoek 6, rand linnen; gekozen ring 2 px met 2 px wit ertussen */
.cfg .stalen{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:14px 8px}
.cfg .staalknop{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;min-height:44px;padding:4px 2px}
.cfg .staal{position:relative;width:40px;height:40px;padding:0;border-radius:var(--radius);border:1px solid var(--linnen);transition:box-shadow .12s}
.cfg .staalknop:hover .staal{border-color:var(--steen)}
.cfg .staalknop.sel .staal{box-shadow:0 0 0 2px var(--wit),0 0 0 4px var(--actie)}
.cfg .staal .vink{top:-9px;right:-9px;width:16px;height:16px}
.cfg .staalknop .tlabel{font-size:var(--fs-13);line-height:1.3}

/* ruimtemeter */
.cfg .meterrij{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.cfg .meter{flex:1;height:6px;border-radius:3px;background:var(--tegel);overflow:hidden}
.cfg .meter i{display:block;height:100%;background:var(--steen);transition:width .2s}
.cfg .meter.vol i{background:var(--messing)}
.cfg .metertekst{font-size:var(--fs-15);color:var(--steen);white-space:nowrap;font-variant-numeric:tabular-nums}

/* indeling per kast: rijen van 52 px met sleepgreep */
.cfg .inrlijst{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.cfg .inrrij{display:grid;grid-template-columns:44px 24px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:52px;
  padding:0 12px 0 0;background:var(--wit);border:1px solid var(--linnen);border-radius:var(--radius);font-size:var(--fs-15);
  transition:transform .16s ease}
.cfg .inrrij.vast{background:var(--tegel);border-color:transparent;color:var(--walnut)}
.cfg .inrsleep{width:44px;height:50px;display:grid;place-items:center;color:var(--steen);cursor:grab;touch-action:none;border-radius:var(--radius)}
.cfg .inrsleep:hover{color:var(--walnut);background:var(--tegel)}
.cfg .inrsleep.leeg{cursor:default}
.cfg .inrsleep.leeg:hover{background:none}
.cfg .inricoon svg{width:24px;height:24px;stroke:var(--walnut);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cfg .inrnaam{min-width:0}
.cfg .inrhoogte{font-size:var(--fs-15);color:var(--steen);font-variant-numeric:tabular-nums;text-align:right}
.cfg .inrlijst.nee .sleept{outline:2px solid var(--messing);background:var(--wit)}

/* "Geselecteerd"-regel */
.cfg .gekozen{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:12px 0;
  padding:12px 16px;background:var(--tegel);border-radius:var(--radius)}
.cfg .glabel{display:block;font-size:var(--fs-13);color:var(--steen)}
.cfg .gwaarde{display:block;margin-top:2px;font-size:var(--fs-15);line-height:1.45;color:var(--walnut)}
.cfg .gprijs{font-size:var(--fs-15);font-weight:550;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--walnut)}
.cfg .nul{color:var(--steen);font-weight:300}

/* Volgende: secundaire knop over de volle breedte */
.cfg .volgende{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:var(--knop-h);
  padding:0 16px;border:1.5px solid var(--actie);border-radius:var(--radius);background:var(--wit);
  font-size:var(--fs-17);font-weight:450;color:var(--actie)}
.cfg .volgende:hover{border-color:var(--actie-donker);color:var(--actie-donker);background:var(--tegel)}
.cfg .volgende svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* kast toevoegen */
.cfg .plusrij{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:center;width:100%;min-height:64px;
  margin-bottom:8px;padding:8px 16px;text-align:left;border:1px dashed var(--steen-deco);border-radius:var(--radius);color:var(--walnut)}
.cfg .plusrij:hover:not(:disabled):not(.uit){border-color:var(--walnut);background:var(--tegel)}
.cfg .plusrij.uit,.cfg .plusrij:disabled{border-color:var(--linnen);color:var(--steen);cursor:help}
.cfg .plusrij .kicoon svg{stroke:currentColor}
.cfg .plusrij strong{display:block;font-weight:550;font-size:var(--fs-17)}
.cfg .plusrij .ksamen{white-space:normal}

.cfg .inspiratielink{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:6px;font-size:var(--fs-15);line-height:1.4;
  color:var(--actie);text-decoration:none}
.cfg .inspiratielink svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cfg .inspiratielink span{text-decoration:underline;text-underline-offset:3px}
.cfg .inspiratielink:hover{color:var(--actie-donker)}
.cfg .volgt{margin-left:6px;font-size:var(--fs-13);font-weight:450;color:var(--walnut);border-bottom:1px dashed var(--messing)}

/* ---------- overzicht ---------- */
.cfg .ovz{margin-top:24px;padding:16px 16px 8px;background:var(--tegel);border-radius:var(--radius)}
.cfg .ovz h2{margin:0 0 2px;font-size:var(--fs-17);font-weight:550;color:var(--walnut)}
.cfg .ovz .zonesub{display:block;margin:0 0 8px;padding:0}
.cfg .ovzrij{border-top:1px solid color-mix(in srgb, var(--dusty) 30%, transparent)}
.cfg .ovzkop{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:6px 0;text-align:left}
.cfg .ovzkop .naam{flex:1;min-width:0;font-size:var(--fs-15);font-weight:450}
.cfg .ovzkop .prijs{font-size:var(--fs-15);font-weight:550;font-variant-numeric:tabular-nums;white-space:nowrap}
.cfg .ovzkop .prijs.nul{font-weight:300}
.cfg .ovzkop svg{width:14px;height:14px;flex:none;stroke:var(--steen);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.cfg .ovzrij.uit .ovzkop svg{transform:rotate(180deg)}
.cfg .ovzdetail{padding:0 0 10px}
.cfg .ovzdetail[hidden]{display:none}
.cfg .ovzdetail .r{display:flex;justify-content:space-between;gap:12px;padding:3px 0 3px 16px;font-size:var(--fs-15);color:var(--steen)}
.cfg .ovzdetail .r span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.cfg .ovznoot{margin:10px 0 6px}
.cfg .ovz .melding{margin-top:12px}
.cfg .hulplink{display:flex;align-items:flex-start;gap:10px;margin:8px 0 8px;padding-top:12px;
  border-top:1px solid color-mix(in srgb, var(--dusty) 30%, transparent);font-size:var(--fs-15);color:var(--walnut)}
.cfg .hulplink svg{width:20px;height:20px;flex:none;margin-top:1px;stroke:var(--dusty);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cfg .hulplink a{color:var(--actie);text-decoration:underline;text-underline-offset:3px}
.cfg .hulplink a:hover{color:var(--actie-donker)}

/* servicepunten onder het overzicht: component ServicePunten (lane A) */
.cfg .cfg-service{margin:16px 0 0}

/* ---------- koopbalk ---------- */
.cfg .subbar{flex:none;padding:12px 24px 16px;border-top:1px solid var(--linnen);background:var(--wit)}
.cfg .wandsam{margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid var(--linnen)}
.cfg .wandsam-lijst{display:grid;grid-template-columns:1.15fr .8fr 1fr 1.15fr;gap:12px;margin:0}
.cfg .wandsam-lijst div{min-width:0}
.cfg .wandsam-lijst dt{font-size:var(--fs-13);color:var(--steen)}
.cfg .wandsam-lijst dd{margin:0;font-size:var(--fs-15);font-weight:450;color:var(--walnut);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.cfg .wandsam-regel{display:none;margin:0}
.cfg .koop{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.cfg .subbar .subrij{display:flex;flex-direction:column;flex:0 0 auto;margin:0}
.cfg .subbar .subrij > span{font-size:var(--fs-15);color:var(--walnut)}
.cfg .subbar .subrij .klein{font-size:var(--fs-13);color:var(--steen);font-weight:300}
.cfg .subbar .subrij strong{font-size:var(--fs-27);font-weight:550;line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap}
.cfg .subknoppen{display:flex;gap:8px;flex:1 1 300px;min-width:0}
.cfg #hart{width:52px;height:52px;flex:none;display:grid;place-items:center;border:1.5px solid var(--actie);
  border-radius:var(--radius);color:var(--actie);background:var(--wit)}
.cfg #hart:hover{border-color:var(--actie-donker);color:var(--actie-donker);background:var(--tegel)}
.cfg #hart svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cfg #hart[aria-pressed="true"] svg{fill:var(--messing);stroke:var(--messing)}
.cfg .primair{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;min-height:var(--knop-h);
  padding:0 16px;background:var(--actie);color:var(--wit);border-radius:var(--radius);
  font-size:var(--fs-17);font-weight:450;line-height:1.2;text-decoration:none;text-align:center}
.cfg .primair:hover{background:var(--actie-donker);color:var(--wit)}
.cfg .primair:disabled{background:var(--steen);cursor:progress}
.cfg #mand-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- vensters ---------- */
.cfg .overlay{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;background:var(--overlay)}
.cfg .overlay[hidden]{display:none}
.cfg .dialoog{position:relative;width:min(520px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;
  padding:32px 32px 28px;background:var(--wit);border-radius:var(--radius)}
.cfg .dialoog h2{margin:0 48px 20px 0;font-size:var(--fs-21);font-weight:550;color:var(--walnut)}
.cfg .dialoog ol{margin:0;padding:0;list-style:none;display:grid;gap:16px}
.cfg .dialoog li{display:grid;grid-template-columns:28px 1fr;gap:12px;font-size:var(--fs-15);line-height:1.55}
.cfg .dialoog li b{display:block;font-weight:550;font-size:var(--fs-17)}
.cfg .stapnr{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--radius-s);background:var(--tegel);
  font-size:var(--fs-15);font-weight:550;color:var(--walnut)}
.cfg .dialoog .naschrift{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--linnen);font-size:var(--fs-15);line-height:1.55;color:var(--steen)}
.cfg .dsluit{position:absolute;top:12px;right:12px;width:44px;height:44px;display:grid;place-items:center;
  border-radius:var(--radius);color:var(--steen)}
.cfg .dsluit:hover{background:var(--tegel);color:var(--walnut)}
.cfg .dsluit svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

/* bevestiging winkelmand als lade van rechts (brief 3, Mandlade) */
.cfg .overlay.lade{place-items:stretch;justify-items:end;padding:0}
.cfg .dialoog.mandklaar{display:flex;flex-direction:column;width:min(440px,100%);height:100%;max-height:none;
  padding:0;border-radius:0;overflow:hidden;box-shadow:var(--schaduw-lade);animation:cfg-lade-in .26s var(--ease)}
.cfg .ladekop{position:relative;display:flex;align-items:center;gap:12px;min-height:72px;padding:12px 64px 12px 24px;border-bottom:1px solid var(--linnen)}
.cfg .ladekop h2{margin:0;font-size:var(--fs-21);font-weight:550;line-height:1.3}
.cfg .ladekop .dsluit{top:50%;right:14px;transform:translateY(-50%)}
.cfg .mandvink{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--tegel)}
.cfg .mandvink svg{width:16px;height:16px;stroke:var(--actie);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cfg .ladebody{flex:1;min-height:0;overflow-y:auto;padding:24px}
.cfg .ladebody p{margin:0 0 12px;font-size:var(--fs-17);line-height:1.5;color:var(--walnut)}
.cfg .ladebody p.klein{padding:10px 12px;font-size:var(--fs-15);border-left:3px solid var(--messing);background:var(--tegel)}
.cfg .ladebody p[hidden]{display:none}
.cfg .mandklaar-knoppen{display:grid;gap:8px;padding:16px 24px calc(20px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--linnen)}
.cfg .ladebtw{margin:0 0 4px;font-size:var(--fs-13);color:var(--steen)}
.cfg .mandklaar-knoppen .primair{flex:none;width:100%}
.cfg .tekstlink{justify-self:center;min-height:44px;padding:0 8px;font-size:var(--fs-15);color:var(--actie);
  text-decoration:underline;text-underline-offset:3px}
.cfg .tekstlink:hover{color:var(--actie-donker)}
@keyframes cfg-lade-in{from{transform:translateX(100%)}to{transform:none}}

.cfg #toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:95;
  width:max-content;max-width:min(88vw,440px);padding:12px 18px;background:var(--walnut);color:var(--wit);
  font-size:var(--fs-15);line-height:1.45;border-radius:var(--radius);text-align:center;
  opacity:0;pointer-events:none;transition:opacity .25s}
.cfg #toast.zichtbaar{opacity:1}
@media (min-width:900px){
  .cfg #toast{left:calc((100vw - var(--paneel-b)) / 2);bottom:104px;max-width:min(calc(100vw - var(--paneel-b) - 48px),440px)}
}

/* ---------- 900 tot 1100: paneel 440, tekenvlak smaller ---------- */
@media (min-width:900px) and (max-width:1099px){
  .cfg .tekenvlak,.cfg .vlak3d,.cfg .abwrap{inset:24px}
  .cfg .wandsam-lijst{grid-template-columns:1fr 1fr;gap:6px 12px}
}
/* lage schermen: de paneelkop zonder uitleg, zodat de keuzes ruimte houden */
@media (min-width:900px) and (max-height:760px){
  .cfg .uitleg{display:none}
  .cfg .paneelkop{padding-top:14px;padding-bottom:12px}
}

/* ---------- mobiel (onder 900): vaste splitsing ---------- */
@media (max-width:899px){
  .cfg-pagina{overflow:auto}
  .cfg{height:calc(100vh - var(--nav-hoogte));height:calc(100dvh - var(--nav-hoogte))}
  .cfg .app{display:grid;grid-template-rows:36svh minmax(0,1fr);height:100%;min-height:0}
  .cfg .canvas{min-height:0;border-right:0;border-bottom:1px solid var(--linnen)}
  .cfg .tekenvlak,.cfg .vlak3d,.cfg .abwrap{inset:8px 24px}
  .cfg .rendernotitie{display:none}
  .cfg .klapknop{display:none}
  .cfg .gereedschap{height:48px;padding:0 4px;gap:4px;overflow-x:auto;scrollbar-width:none}
  .cfg .gereedschap::-webkit-scrollbar{display:none}
  .cfg .tools,.cfg .tools2{gap:0;flex:none}
  .cfg .gk{height:44px;padding:0 10px}
  .cfg .gk .gl{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cfg #fronten3d.gk{font-size:0!important;padding:0 10px!important}
  .cfg .schakelaar{padding:0}
  .cfg .schakelaar .lbl{min-height:44px;padding:0 10px;font-size:var(--fs-13)}
  .cfg .boven{top:8px;left:8px;width:170px;padding:8px 10px 10px}
  .cfg .kantelchip{top:8px;max-width:calc(100% - 24px);font-size:var(--fs-13)}
  .cfg.kantel-aan .afwerkchip{top:56px}
  /* het paneel staat vast in het raster; --sheetY van configurator.js doet niets meer */
  .cfg .paneel{width:auto;flex:none;height:auto;min-height:0;margin:0;transform:none;touch-action:auto}
  .cfg .paneelkop{padding:10px 16px 10px}
  .cfg .paneelkop h1{margin-bottom:6px;font-size:var(--fs-17)}
  .cfg .uitleg{display:none}
  .cfg .secties{padding:8px 16px 24px}
  .cfg .kaart.open .koprij{top:-8px}
  .cfg .kaart.open .koprij.vast{margin-inline:-17px;padding-inline:17px}
  .cfg .intro{padding:16px 48px 16px 16px}
  .cfg .introkop{font-size:var(--fs-17)}
  .cfg .zonekop{margin-top:20px}
  .cfg .kaartkop{padding:8px 12px;gap:10px}
  .cfg .kaart.seg .kaartkop{padding-left:8px}
  .cfg .kaartbody{padding:4px 12px 14px}
  .cfg .knaam{font-size:var(--fs-17)}
  /* chips: raster van 4 (breedtes) of 2 (lange labels) */
  .cfg .chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .cfg .chips:has([data-segbreedte]){grid-template-columns:repeat(4,minmax(0,1fr))}
  .cfg .chip{padding:6px 8px}
  .cfg .staal{width:44px;height:44px}
  .cfg .tegels{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
  .cfg .veldrij input{width:100%;max-width:120px}
  .cfg #b-s1 .subrij{gap:0 12px}
  .cfg .gekozen{padding:10px 12px}
  /* koopbalk: twee regels, samen hoogstens 120 px */
  .cfg .subbar{padding:8px 16px calc(10px + env(safe-area-inset-bottom,0px))}
  .cfg .wandsam{margin:0 0 6px;padding:0;border:0}
  .cfg .wandsam-lijst{display:none}
  .cfg .wandsam-regel{display:block;font-size:var(--fs-13);line-height:1.4;color:var(--steen);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cfg .koop{flex-wrap:nowrap;gap:12px}
  .cfg .subbar .subrij > span{font-size:var(--fs-13)}
  .cfg .subbar .subrij strong{font-size:var(--fs-21)}
  .cfg .subknoppen{flex:1 1 auto}
  .cfg .primair{padding:0 12px}
  .cfg #toast{bottom:calc(120px + env(safe-area-inset-bottom,0px))}
}
/* onder 600: het hart verhuist naar de paneelkop, als icoon naast de titel */
@media (max-width:599px){
  .cfg .paneelkop{padding-right:56px}
  .cfg #hart{position:absolute;top:2px;right:8px;width:44px;height:44px;border:0;z-index:2}
  /* Hulp gaat mee naar de paneelkop, rechts naast "Stap n van 5": zeven knoppen van 44 px
     plus de schakelaar passen niet in de rij op 390. Het paneel begint onder de 36svh van de tekening. */
  .cfg #hulp-open{position:absolute;top:calc(36svh + 34px);right:8px;z-index:2;color:var(--actie)}
  .cfg #hulp-open:hover{background:var(--tegel)}
  .cfg .subbar .subrij .klein{display:none}
  .cfg .dialoog{padding:28px 20px 24px}
}

/* ---------- beweging ---------- */
@media (prefers-reduced-motion:reduce){
  .cfg *,.cfg *::before,.cfg *::after{transition-duration:0s!important;animation-duration:0s!important;scroll-behavior:auto!important}
  .cfg .secties{scroll-behavior:auto}
}

/* ===========================================================================
 * Nook-laag (6 okt 2026): de schil rond de configurator in de vormtaal van
 * Wonder/Nook. Alleen opmaak; geen DOM-hook en geen gedrag gewijzigd.
 *   - pillen voor chips, velden, knoppen en de schakelaar
 *   - ronde tegels en stalen met een donkere ring als keuze
 *   - kaarten als rijen met dunne lijnen, zoals de uitklapblokken van Nook
 *   - donkere pilknop (walnut) voor "Voeg toe aan winkelmand"
 *   - lichtgrijze vlakken (--tegel) in plaats van mist-blauw
 * Header: sinds 7 okt 2026 een compacte sitekop (zie blok "Paneel 7 okt"
 * onderaan); de app rekent alleen met var(--nav-hoogte).
 * ========================================================================= */

/* paneelkop: kruimelpad, kleine kapitalen, titel in Poppins */
.cfg .paneelkop{padding:8px 24px 16px;border-bottom:1px solid var(--lijn-nook)}
.cfg .cfg-kruimel{margin:0 0 2px}
.cfg .paneelkop .bovenregel{margin-bottom:2px}
.cfg .paneelkop h1{font-family:var(--font-tekst);font-weight:450;font-size:clamp(22px,1.8vw,28px);letter-spacing:-0.01em;text-transform:none;line-height:1.2}
.cfg .paneelkop h1::after{content:none}
.cfg .vdots span{height:3px;border-radius:0;background:var(--lijn-nook)}
.cfg .vdots span.klaar{background:var(--steen-deco)}
.cfg .vdots span.nu{background:var(--walnut)}

/* lijnen: grijs in plaats van linnen */
.cfg .gereedschap,.cfg .subbar,.cfg .ladekop,.cfg .mandklaar-knoppen{border-color:var(--lijn-nook)}
.cfg .canvas{border-right-color:var(--lijn-nook);background:var(--tegel)}
.cfg .tekenvlak svg{background:transparent}
.cfg .gereedschap{background:var(--wit)}

/* gereedschap en schakelaar */
.cfg .gk{border-radius:var(--pil)}
.cfg .schakelaar{border-radius:var(--pil);border-color:var(--lijn-nook)}
.cfg .schakelaar .lbl{border-radius:var(--pil)}
.cfg .schakelaar .lbl.aan{background:var(--walnut);color:var(--wit)}
.cfg .klapknop::before{border-color:var(--lijn-nook)}

/* begeleidingskaart en nummers */
.cfg .intro{border-radius:0;background:var(--tegel)}
.cfg .introkop{font-weight:450}
.cfg .introhulp,.cfg .introhulp:hover{color:var(--walnut)}
.cfg .introhulp svg{stroke:var(--walnut)}
.cfg .znr{border-radius:50%;background:var(--walnut);color:var(--wit);font-weight:450}
.cfg .introstappen .znr{background:var(--wit);color:var(--walnut)}
.cfg .zonekop h2{font-weight:450}
.cfg .zonekop.rustig .znr{background:none;box-shadow:inset 0 0 0 1px var(--lijn-nook)}

/* kaarten als rijen met lijnen (Nook-uitklapblokken) */
.cfg .kaart{margin-bottom:0;border:0;border-top:1px solid var(--lijn-nook);border-radius:0}
.cfg .zonekop + .kaart,.cfg .zonekop + div > .kaart:first-child{border-top-color:var(--walnut)}
.cfg .kaart:not(.open):hover{border-color:var(--lijn-nook)}
.cfg .kaart:not(.open):hover .knaam{text-decoration:underline;text-underline-offset:4px}
.cfg .kaart.af{box-shadow:none}
.cfg .kaart.open{border-color:var(--lijn-nook)}
.cfg #seglijst > .kaart:last-of-type,.cfg #inrlijst > .kaart:last-of-type,.cfg #k-s1,.cfg #k-s3,.cfg #k-s4{border-bottom:1px solid var(--lijn-nook)}
.cfg .kaartkop{border-radius:0;padding-inline:4px}
.cfg .kaartbody{padding:4px 4px 16px}
.cfg .knaam{font-weight:450}
.cfg .kaart.open .koprij{border-radius:0;border-bottom-color:var(--lijn-nook)}
.cfg .kvink{top:50%;left:-22px;transform:translateY(-50%);width:16px;height:16px;box-shadow:none;background:var(--walnut)}
.cfg .kvink svg{width:9px;height:9px}
.cfg .kvink svg{stroke:var(--wit)}
.cfg .bdg{border-radius:var(--pil);background:var(--tegel)}
.cfg .kaart.leeg .bdg{border-color:var(--lijn-nook)}
.cfg .segsleep,.cfg .inrsleep{border-radius:50%}
.cfg .segdel::before{box-shadow:0 0 0 1px var(--lijn-nook),var(--schaduw-zacht)}

/* velden en chips als pillen; gekozen = donkere ring */
.cfg .veldrij input{border-radius:var(--pil);border-color:var(--lijn-nook);padding:0 20px}
.cfg .veldrij input:focus{border-color:var(--walnut)}
.cfg .chip{border-radius:var(--pil);border-color:var(--lijn-nook);padding:0 18px}
.cfg .chip:hover{border-color:var(--walnut)}
.cfg .chip.sel{background:var(--wit);border-color:var(--walnut);color:var(--walnut);font-weight:550;box-shadow:inset 0 0 0 1px var(--walnut)}
.cfg .chip.uit,.cfg .chip[aria-disabled="true"]{border-color:var(--lijn-nook)}
.cfg .tip::before{border-color:var(--lijn-nook)}
.cfg .melding{border-radius:12px}
.cfg .kantelchip{border-radius:var(--pil)}

/* tegels en stalen rond, zoals de varianten en kleuren bij Nook */
.cfg .tring{border-radius:50%;background:var(--tegel)}
.cfg .tegel{border-radius:12px}
.cfg .tegel:hover .tring{box-shadow:0 0 0 1px var(--walnut)}
.cfg .tegel.sel .tring{box-shadow:0 0 0 1px var(--walnut),inset 0 0 0 3px var(--wit);background:var(--tegel)}
.cfg .tegel.sel .tlabel{font-weight:550}
.cfg .vink{background:var(--walnut)}
.cfg .tegel.slot .tring{box-shadow:inset 0 0 0 1px var(--lijn-nook)}
.cfg .slotje{box-shadow:0 0 0 1px var(--lijn-nook)}
.cfg .staal{border-radius:50%;border-color:var(--lijn-nook)}
/* K3 (Bart 12 okt): wit en andere lichte stalen vielen weg tegen het paneel; rand in steen-deco (2,96:1 op wit, lijn-nook was circa 1,3:1) */
.cfg .staal.licht{border-color:var(--steen-deco)}
.cfg .staalknop:hover .staal{border-color:var(--walnut)}
.cfg .staalknop.sel .staal{box-shadow:0 0 0 2px var(--wit),0 0 0 3px var(--walnut)}
.cfg .staalknop.sel .tlabel{font-weight:550}
.cfg .inrrij{border-radius:var(--pil);border-color:var(--lijn-nook);padding-right:18px}
.cfg .inrrij.vast{background:var(--tegel)}
.cfg .meter{border-radius:0;height:3px}
.cfg .meter i{background:var(--walnut)}

/* geselecteerd en volgende */
.cfg .gekozen{border-radius:0;background:var(--tegel)}
.cfg .gprijs{font-weight:450}
.cfg .volgende{border-radius:var(--pil);border:1px solid var(--walnut);color:var(--walnut);font-weight:450}
.cfg .volgende:hover{border-color:var(--walnut);color:var(--wit);background:var(--walnut)}
.cfg .plusrij{border-radius:var(--pil);border-color:var(--steen-deco);margin-top:12px}
.cfg .plusrij:hover:not(:disabled):not(.uit){background:var(--tegel)}
.cfg .plusrij.uit,.cfg .plusrij:disabled{border-color:var(--lijn-nook)}
.cfg .plusrij strong{font-weight:450}
.cfg .inspiratielink,.cfg .inspiratielink:hover{color:var(--walnut)}

/* overzicht */
.cfg .ovz{border-radius:0;background:var(--tegel)}
.cfg .ovz h2{font-weight:450}
.cfg .ovzrij,.cfg .hulplink{border-top-color:var(--lijn-nook)}
.cfg .ovzkop .prijs{font-weight:450}
.cfg .hulplink svg{stroke:var(--walnut)}
.cfg .hulplink a,.cfg .hulplink a:hover{color:var(--walnut)}
.cfg .cfg-service{margin:8px 0 0}

/* koopbalk: subtotaal links, donkere pilknop rechts (Nook "Add to cart") */
.cfg .wandsam{border-bottom-color:var(--lijn-nook)}
.cfg .subbar .subrij strong{font-weight:450}
.cfg #hart{border-radius:50%;border:1px solid var(--lijn-nook);color:var(--walnut)}
.cfg #hart:hover{border-color:var(--walnut);color:var(--walnut);background:var(--wit)}
.cfg .primair{border-radius:var(--pil);background:var(--walnut)}
.cfg .primair:hover{background:color-mix(in srgb, var(--walnut) 85%, var(--wit))}

/* vensters en de bevestigingslade */
.cfg .dialoog{border-radius:0}
.cfg .dialoog h2,.cfg .ladekop h2{font-weight:300}
.cfg .stapnr{border-radius:50%;background:var(--walnut);color:var(--wit);font-weight:450}
.cfg .dsluit{border-radius:50%}
.cfg .dialoog.mandklaar{width:min(500px,100%);box-shadow:none}
.cfg .mandvink{background:var(--walnut)}
.cfg .mandvink svg{stroke:var(--wit)}
.cfg .ladebody p.klein{background:var(--tegel)}
.cfg .tekstlink,.cfg .tekstlink:hover{color:var(--walnut)}
.cfg #toast{border-radius:var(--pil)}
.cfg #zweef{border-radius:12px}

@media (max-width:899px){
  .cfg .paneelkop{padding:6px 16px 10px}
  .cfg .cfg-kruimel,.cfg .paneelkop .bovenregel{display:none}
  .cfg .paneelkop h1{font-size:var(--fs-17)}
  .cfg .canvas{border-bottom-color:var(--lijn-nook)}
  .cfg .chip{padding:6px 8px}
}

/* ===========================================================================
 * Alleen 3D (6 okt 2026, Nico: "die getekende versie mag eruit, mag gewoon de
 * render worden"). De configurator opent in 3D op het hele vlak; de
 * werktekening, de vergelijkschuif en de schakelaar Tekening | 3D zijn weg.
 *
 * Hoe: preview3d.js blijft ongewijzigd. Het 3D-vlak krijgt geen clip-path meer,
 * dus de stand van de schuif (--ab) doet er niet meer toe; v3-begeleiding.js
 * klikt bij de start op de bestaande, verborgen knop #ab-3d (stand 0, met vloer).
 * De schuif en de schakelaar blijven in de DOM, want preview3d.js zoekt ze op.
 *
 * De SVG-tekening (#tekenvlak) blijft als onzichtbare laag boven het 3D-beeld
 * liggen. preview3d.js zet de camera zo dat de kastenwand in 3D exact op de
 * kastenwand in de tekening valt; daardoor blijven werken:
 *   - klikken op een kast opent zijn inrichting (data-canvas-seg, K19), met
 *     focus en Enter via het toetsenbord;
 *   - de gekozen kast licht op (blauwe rand uit de tekening);
 *   - de knop Maten: de maatlijnen en de afwerkregel onder de kasten.
 * Alles in de tekening wat geen maat, klikvlak of selectie is, is onzichtbaar.
 * ========================================================================= */
.cfg .tekenvlak,.cfg .vlak3d{inset:0}
.cfg .vlak3d{clip-path:none;background:transparent}
.cfg .abwrap,.cfg .schakelaar,.cfg .rendernotitie{display:none}
.cfg .tekenvlak{z-index:3}
.cfg .tekenvlak svg > :not(g.dim):not([data-canvas-seg]){opacity:0}
.cfg .tekenvlak [data-canvas-seg] > *{opacity:0}
.cfg .tekenvlak [data-canvas-seg] > rect[stroke="#4A6B8A"]{opacity:1}
.cfg .tekenvlak [data-canvas-seg] > rect[opacity=".12"]{opacity:.12}
.cfg .tekenvlak [data-canvas-seg]:hover > rect.l,.cfg .tekenvlak [data-canvas-seg]:hover > rect.lz{opacity:1;stroke:var(--actie)}
@media (max-width:899px){ .cfg .tekenvlak,.cfg .vlak3d{inset:0} }
@media (min-width:900px) and (max-width:1099px){ .cfg .tekenvlak,.cfg .vlak3d{inset:0} }

/* ===========================================================================
 * Paneel 7 okt 2026 (schets _onderzoek/paneel/schets.html, ronde 2, akkoord
 * Nico). Vier stappen, een tegelijk open; afgeronde stappen als een regel; de
 * kasten als een lijst met vaste kolommen; onderbalk van een regel.
 * Ontwerpregels (inventaris-en-plan.md, onderaan):
 *   - gelijkwaardige elementen in dezelfde kolom en even breed
 *     (stepper en knop Inrichting: allebei 140 px, kolom 4);
 *   - overal de maateenheid, ook in de stepper;
 *   - invoervelden zo zwaar als de rest (44 hoog, dunne rand);
 *   - klikdoelen minstens 44 px (waar het beeld kleiner is via ::before);
 *   - walnut voor de donkere knop, --actie voor selectie en "Nog leeg".
 * ========================================================================= */

/* ---------- compacte sitekop: logo, Hulp, mand ---------- */
body.cfg-pagina{--nav-hoogte:65px}
body.cfg-pagina .aankondiging,
body.cfg-pagina .categorieen,
body.cfg-pagina .nav .nav__zoek,
body.cfg-pagina .nav .nav__zoekknop,
body.cfg-pagina .nav .nav__menuknop,
body.cfg-pagina .nav .nav__acties a[href*="/account/"]{display:none}
body.cfg-pagina .nav{border-bottom-color:var(--lijn-nook);box-shadow:none}
body.cfg-pagina .nav .nav__schil{height:64px;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"logo . acties"}
/* kop_Idee (8 okt 2026): ook hier het logo met tagline, op 46 in de lagere kop */
body.cfg-pagina .nav .nav__logo-vol{--logo-h:46px!important}
body.cfg-pagina .cfg-hulplink{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;
  font-size:var(--fs-15);color:var(--steen);text-decoration:none}
body.cfg-pagina .cfg-hulplink:hover{color:var(--walnut);text-decoration:underline;text-underline-offset:4px}
@media (max-width:899.98px){
  body.cfg-pagina{--nav-hoogte:61px}
  body.cfg-pagina .nav .nav__schil{height:60px}
}

/* ---------- paneel: kop, stappen, onderbalk ---------- */
.cfg .paneel{border-left:1px solid var(--lijn-nook)}
.cfg .paneelkop{padding:12px 24px 8px;border-bottom:1px solid var(--lijn-nook)}
.cfg .pkrij{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.cfg .paneelkop h1{margin:0;font-size:20px;font-weight:550;line-height:1.3;letter-spacing:0}
.cfg .hoewerkt{position:relative;font-size:var(--fs-13);color:var(--actie);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.cfg .hoewerkt::before{content:"";position:absolute;inset:-12px -8px -6px}
.cfg .hoewerkt:hover{color:var(--actie-donker)}
.cfg .stappenbalk{display:flex;gap:6px;margin:6px 0 0;padding:0;list-style:none}
.cfg .stappenbalk li{flex:1;min-width:0}
.cfg .stappenbalk button{position:relative;display:block;width:100%;min-height:26px;padding:4px 0 0;text-align:left;
  border-top:3px solid var(--tegel-donker);font-size:var(--fs-13);line-height:1.3;color:var(--steen);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfg .stappenbalk button::before{content:"";position:absolute;inset:-9px 0 -9px}
.cfg .stappenbalk button:hover{color:var(--walnut)}
.cfg .stappenbalk button.klaar{border-top-color:var(--walnut);color:var(--walnut)}
.cfg .stappenbalk button.nu{border-top-color:var(--actie);color:var(--actie);font-weight:550}
.cfg .stappenbalk .snr{font-variant-numeric:tabular-nums}

.cfg .secties{padding:0 24px 24px}
.cfg .stap[hidden],.cfg .stapbody[hidden],.cfg .klaarregel[hidden]{display:none}

/* afgeronde stap: een klikbare regel met de keuze erachter */
.cfg .klaarregel{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0;text-align:left;
  border-bottom:1px solid var(--lijn-nook);font-size:var(--fs-15)}
.cfg .klaarregel b{font-weight:450;flex:none}
.cfg .klaarregel .kw{flex:1;min-width:0;text-align:right;color:var(--steen);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfg .klaarregel::after{content:"›";flex:none;color:var(--walnut);font-size:18px;line-height:1}
.cfg .klaarregel:hover b{text-decoration:underline;text-underline-offset:4px}
.cfg .kvinkrond{display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;background:var(--walnut)}
.cfg .kvinkrond svg{width:10px;height:10px;stroke:var(--wit);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* de actieve stap */
.cfg .stapbody{padding:20px 0 8px}
.cfg .vraag{display:flex;align-items:center;gap:4px;margin:0;font-size:22px;font-weight:550;line-height:1.25;color:var(--walnut)}
.cfg .vraagsub{margin:2px 0 0;font-size:14px;line-height:1.45;color:var(--steen)}
.cfg .vraag2{display:flex;align-items:center;flex-wrap:wrap;gap:0 6px;margin:22px 0 8px;font-size:var(--fs-15);font-weight:450;line-height:1.35;color:var(--walnut)}
.cfg .vraag2 > span:not(.latkop){font-weight:300;color:var(--steen)}
.cfg .vraag2 .gekozennaam{font-weight:300;color:var(--steen)}
.cfg .vraag2 .gekozennaam:not(:empty)::before{content:"· "}

/* veld: 44 hoog, circa 180 breed, dunne rand, eenheid erin */
.cfg .muurrij{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin-top:10px}
.cfg .veld{display:flex;align-items:center;width:180px;height:44px;padding:0 18px;border:1px solid var(--lijn-nook);
  border-radius:var(--pil);background:var(--wit)}
.cfg .veld:hover{border-color:var(--steen-deco)}
.cfg .veld:focus-within{border-color:var(--walnut);box-shadow:var(--focus)}
.cfg .veld input{flex:1;min-width:0;width:100%;height:100%;padding:0;border:0;background:none;outline:none;
  font:inherit;font-size:16px;font-weight:450;color:var(--walnut);font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.cfg .veld input::-webkit-outer-spin-button,.cfg .veld input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cfg .veld input:focus,.cfg .veld input:focus-visible{box-shadow:none;outline:none;border-radius:0}
.cfg .veld .eenheid{flex:none;margin-left:8px;font-size:14px;color:var(--steen)}
.cfg .veld.voorbeeld input{color:var(--steen)}
.cfg .muurrij .voorbeeldlabel{margin:0;font-size:var(--fs-13)}

/* hoogte als pillen */
.cfg .chip{min-height:44px;padding:0 18px;font-size:14px}
.cfg .chip.sel,.cfg .chip[aria-pressed="true"]{border:1px solid var(--walnut);box-shadow:inset 0 0 0 1px var(--walnut);font-weight:450;background:var(--wit);color:var(--walnut)}

/* plaatsing: vier compacte tegels */
.cfg .tegels.plaatsing{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.cfg .tegels.plaatsing .tegel{gap:6px;min-height:44px;padding:10px 4px 9px;border:1px solid var(--lijn-nook);border-radius:10px;background:var(--wit)}
.cfg .tegels.plaatsing .tegel:hover{border-color:var(--walnut)}
.cfg .tegels.plaatsing .tegel svg{width:40px;height:30px;stroke:var(--walnut);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.cfg .tegels.plaatsing .tegel.sel,.cfg .tegels.plaatsing .tegel[aria-pressed="true"]{border-color:var(--walnut);box-shadow:inset 0 0 0 1px var(--walnut)}
.cfg .tegels.plaatsing .tlabel{font-size:12px;line-height:1.25}
.cfg .tegels.plaatsing .tegel.sel .tlabel{font-weight:450}

/* uitklapregels: Meer over je ruimte, Meer kleuren, Meer over deze kast, Past niet */
.cfg details{margin:0}
.cfg details > summary{display:flex;align-items:center;gap:12px;min-height:44px;padding:4px 0;cursor:pointer;list-style:none;
  font-size:14px;color:var(--walnut)}
.cfg details > summary::-webkit-details-marker{display:none}
.cfg details > summary > span:first-child{flex:none;font-weight:450}
.cfg details > summary .kw{flex:1;min-width:0;text-align:right;color:var(--steen);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfg details > summary::after{content:"›";flex:none;font-size:18px;line-height:1;color:var(--walnut);transition:transform .2s ease}
.cfg details[open] > summary::after{transform:rotate(90deg)}
.cfg details > summary:hover > span:first-child{text-decoration:underline;text-underline-offset:4px}
.cfg details.meer{margin-top:18px;border-top:1px solid var(--lijn-nook)}
.cfg details.meer[open]{padding-bottom:8px}
.cfg .meerbody > .vraag2:first-child{margin-top:8px}
.cfg .meerbody .veld{margin-top:0}

/* ---------- stap Kasten: een lijst ---------- */
.cfg .kastlijst{margin-top:6px}
.cfg .kastrij{margin-top:10px;background:var(--wit);border:1px solid var(--lijn-nook);border-radius:12px;transition:transform .16s ease}
.cfg .kastrij.open{border-color:var(--actie);box-shadow:inset 0 0 0 1px var(--actie)}
.cfg .kr1,.cfg .kr2{display:grid;grid-template-columns:24px minmax(0,1fr) 84px 140px;gap:12px;align-items:center}
.cfg .kr1{padding:12px 14px 4px 8px}
.cfg .kr2{padding:4px 14px 12px 8px}
.cfg .kastrij .segsleep{position:relative;width:24px;height:36px;border-radius:6px}
.cfg .kastrij .segsleep::before{content:"";position:absolute;inset:-4px -8px}
.cfg .kastrij .segsleep.leeg{cursor:default}
.cfg .kr-naam{min-width:0;font-size:var(--fs-15);font-weight:450;line-height:1.3}
.cfg .kr-naam small{display:block;font-size:12px;font-weight:300;line-height:1.25;color:var(--steen)}
.cfg .kr-prijs{font-size:14px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.cfg .stepper{display:flex;align-items:center;justify-content:space-between;width:140px;height:36px;
  border:1px solid var(--lijn-nook);border-radius:var(--pil)}
.cfg .stap-k{position:relative;display:grid;place-items:center;width:36px;height:34px;border-radius:50%;color:var(--walnut)}
.cfg .stap-k::before{content:"";position:absolute;inset:-5px -4px}
.cfg .stap-k svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.cfg .stap-k:hover{background:var(--tegel)}
.cfg .stap-k[aria-disabled="true"]{color:var(--steen-deco);cursor:help}
.cfg .stap-k[aria-disabled="true"]:hover{background:none}
.cfg .stepwaarde{flex:1;text-align:center;font-size:14px;font-weight:450;white-space:nowrap;font-variant-numeric:tabular-nums}
.cfg .kr-inhoud,.cfg .kr-leeg{grid-column:2 / 4;min-width:0;font-size:13px;line-height:1.35}
.cfg .kr-inhoud{color:var(--steen)}
.cfg .kr-leeg{position:relative;min-height:36px;text-align:left;color:var(--actie);font-weight:450}
.cfg .kr-leeg::before{content:"";position:absolute;inset:-4px 0}
.cfg .kr-leeg:hover{text-decoration:underline;text-underline-offset:3px}
.cfg .kr-inr{position:relative;grid-column:4;display:flex;align-items:center;justify-content:center;gap:6px;width:140px;height:36px;
  border:1px solid var(--walnut);border-radius:var(--pil);font-size:13px;font-weight:450;color:var(--walnut)}
.cfg .kr-inr::before{content:"";position:absolute;inset:-4px 0}
.cfg .kr-inr:hover{background:var(--tegel)}
.cfg .kastrij.open .kr-inr{background:var(--walnut);color:var(--wit)}
.cfg .kastrij.open .kr-inr:hover{background:var(--knop-donker-hover)}

/* kast open: ruimtemeter, opties als tegels met het 3D-icoon */
.cfg .uitklap{padding:14px 14px 4px;border-top:1px solid var(--lijn-nook)}
.cfg .uitklap .meterrij{gap:10px;margin:0}
.cfg .uitklap .meter{height:6px;border-radius:3px;background:var(--tegel-donker)}
.cfg .uitklap .meter i{border-radius:3px;background:var(--walnut)}
.cfg .uitklap .meter.vol i{background:var(--messing)}
.cfg .uitklap .metertekst{font-size:13px}
.cfg .opties{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.cfg .ocel{position:relative;display:flex}
.cfg .optie{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;padding:8px 4px;
  border:1px solid var(--lijn-nook);border-radius:10px;background:var(--wit);text-align:center}
.cfg .optie:hover{border-color:var(--walnut)}
.cfg .optie img{display:block;width:64px;height:64px;margin:0 auto 4px;object-fit:contain}
.cfg .onaam{font-size:12px;font-weight:450;line-height:1.2}
.cfg .oprijs{margin-top:1px;font-size:11px;line-height:1.2;color:var(--steen);white-space:nowrap}
.cfg .optie.sel{border-color:var(--walnut);box-shadow:inset 0 0 0 1px var(--walnut)}
.cfg .optie .tel{top:6px;right:6px;left:auto;min-width:20px;height:20px;box-shadow:none}
.cfg .optie[aria-disabled="true"]{cursor:help}
.cfg .optie[aria-disabled="true"] img{opacity:.55}
.cfg .ocel .tmin{top:-6px;left:-6px;margin:0}
.cfg .ocel .tmin::before{inset:12px}

/* wat niet past: samen onder een regel, met de reden per optie */
.cfg details.nietpast{margin-top:12px;border-top:1px dashed var(--lijn-nook)}
.cfg details.nietpast > summary{font-size:13px;color:var(--steen)}
.cfg details.nietpast > summary > span:first-child{font-weight:300}
.cfg details.nietpast ul,.cfg .uitleglijst{display:grid;gap:10px;margin:0 0 10px;padding:0;list-style:none}
.cfg details.nietpast li,.cfg .uitleglijst li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;align-items:start;font-size:13px;line-height:1.45;color:var(--steen)}
.cfg .uitleglijst li{grid-template-columns:48px minmax(0,1fr)}
.cfg details.nietpast li img,.cfg .uitleglijst li img{width:40px;height:40px;object-fit:contain;border-radius:6px}
.cfg .uitleglijst li img{width:48px;height:48px;object-fit:cover;background:var(--tegel)}
.cfg details.nietpast li b,.cfg .uitleglijst li b{display:block;font-weight:450;color:var(--walnut)}
.cfg details.kastmeer{margin-top:4px}
.cfg details.kastmeer > summary{font-size:13px}
.cfg details.kastmeer .inrlijst{margin-top:4px}
.cfg .kastweg{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:4px;font-size:14px;color:var(--steen)}
.cfg .kastweg svg{width:10px;height:10px;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cfg .kastweg:hover{color:var(--walnut)}

/* kast toevoegen */
.cfg .plusrij{display:block;width:100%;min-height:48px;margin:10px 0 0;padding:12px 14px;text-align:center;
  border:1.5px dashed var(--linnen);border-radius:12px;color:var(--walnut)}
.cfg .plusrij strong{display:block;font-size:var(--fs-15);font-weight:450}
.cfg .plusrij .ksamen{display:block;margin-top:2px;font-size:13px;color:var(--steen);white-space:normal}
.cfg .plusrij.uit strong{color:var(--steen)}

/* ---------- stap Afwerking ---------- */
.cfg #b-s3 .stalen{display:flex;flex-wrap:wrap;gap:4px}
.cfg #b-s3 .stalen .tcel{display:block}
.cfg #b-s3 .stalen .staalknop{width:44px;min-height:44px;padding:4px;justify-content:center}
.cfg #b-s3 .stalen .staal{width:36px;height:36px}
.cfg #b-s3 .stalen:not(.metnaam) .tlabel{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cfg #b-s3 .stalen.metnaam{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.cfg #b-s3 .stalen.metnaam .staalknop{width:100%;padding:4px 2px}
.cfg #b-s3 .stalen.metnaam .tlabel{font-size:12px}
.cfg .tegels.grepen{display:flex;flex-wrap:wrap;gap:4px}
.cfg .tegels.grepen .tegel{width:48px;padding:0;gap:0}
.cfg .tegels.grepen .tring{width:44px;height:44px}
.cfg .tegels.grepen .tring svg{width:30px;height:30px}

/* ---------- stap Montage ---------- */
.cfg .tegels.montage{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:14px}
.cfg .tegels.montage .tegel{align-items:flex-start;gap:2px;min-height:56px;padding:10px 16px;text-align:left;
  border:1px solid var(--lijn-nook);border-radius:12px;background:var(--wit)}
.cfg .tegels.montage .tegel:hover{border-color:var(--walnut)}
.cfg .tegels.montage .tegel.sel,.cfg .tegels.montage .tegel[aria-pressed="true"]{border-color:var(--walnut);box-shadow:inset 0 0 0 1px var(--walnut)}
.cfg .tegels.montage .tegel.slot{border-style:dashed;cursor:help}
.cfg .tegels.montage .tlabel{font-size:var(--fs-15);font-weight:450;text-align:left}
.cfg .tegels.montage .tsub{margin:0;font-size:13px}
.cfg #b-s4 .hulplink{margin-top:16px}

/* ---------- onderbalk: een regel ---------- */
.cfg .subbar{padding:12px 24px;border-top:1px solid var(--lijn-nook)}
.cfg .subbar .koop{flex-wrap:nowrap;align-items:center;gap:16px}
.cfg .subbar .subrij strong{font-size:22px;font-weight:550;line-height:1.1}
.cfg .subbar .subrij .klein{font-size:12px}
.cfg .opbouwlink{position:relative;align-self:center;font-size:var(--fs-13);color:var(--actie);text-decoration:underline;text-underline-offset:3px}
.cfg .opbouwlink::before{content:"";position:absolute;inset:-14px -8px}
.cfg .opbouwlink:hover{color:var(--actie-donker)}
.cfg .subbar .primair{flex:none;margin-left:auto;min-height:48px;padding:0 26px;font-size:var(--fs-15);white-space:nowrap}
.cfg .subbar .primair[hidden],.cfg #hart[hidden]{display:none}

/* opbouw van de prijs: het overzicht in een venster */
.cfg .dialoog.ovz{margin:0;padding:32px 28px 24px;background:var(--wit)}
.cfg .dialoog.ovz h2{margin-bottom:2px}
.cfg .dialoog.ovz .zonesub{display:block;margin:0 0 12px;padding:0}

/* ---------- 900 tot 1100: paneel 440 ---------- */
@media (min-width:900px) and (max-width:1099px){
  .cfg .kr1,.cfg .kr2{grid-template-columns:24px minmax(0,1fr) 76px 128px;gap:10px}
  .cfg .stepper,.cfg .kr-inr{width:128px}
}

/* ---------- mobiel ---------- */
@media (max-width:899px){
  .cfg .paneelkop{padding:10px 16px 4px}
  .cfg .paneelkop h1{font-size:var(--fs-17)}
  .cfg .secties{padding:0 16px 16px}
  .cfg .stapbody{padding-top:14px}
  .cfg .vraag{font-size:19px}
  .cfg .vraag2{margin-top:16px}
  .cfg .chips{display:flex}
  .cfg .chip{padding:0 18px}
  .cfg .kr1,.cfg .kr2{grid-template-columns:24px minmax(0,1fr) 72px 120px;gap:8px}
  .cfg .kr1{padding:10px 10px 4px 4px}
  .cfg .kr2{padding:4px 10px 10px 4px}
  .cfg .stepper,.cfg .kr-inr{width:120px}
  .cfg .kr-prijs{font-size:13px}
  /* een open kast past in het venster: 3D-beeld iets lager, opties in vijf kolommen */
  .cfg .app:has(.kastrij.open){grid-template-rows:24svh minmax(0,1fr)}
  .cfg .opties{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin-top:10px}
  .cfg .optie{padding:6px 2px}
  .cfg .optie img{width:44px;height:44px;margin-bottom:3px}
  .cfg .onaam{font-size:11px}
  .cfg .oprijs{font-size:10px}
  .cfg .optie .tel{top:3px;right:3px}
  .cfg .uitklap{padding:10px 10px 0}
  .cfg .subbar{padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
  .cfg .subbar .koop{gap:12px}
  .cfg .subbar .subrij strong{font-size:19px}
  .cfg .subbar .subrij .klein{display:block}
  .cfg .subbar .primair{min-height:44px;padding:0 18px}
  .cfg #hulp-open{display:none}
}
@media (max-width:374px){
  .cfg .opties{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cfg .subbar .primair{padding:0 14px;font-size:14px}
}

/* ===========================================================================
 * Doorloop Nico 8 okt 2026, lane A (feedback-nico-2026-10-08). Alleen tokens,
 * geen nieuwe kleuren, geen beige.
 *   - Hierarchie met tinten: de actieve stap ligt op --mist, zodat velden,
 *     tegels en kastrijen (wit) eruit springen; afgeronde stappen, labels en
 *     hulpteksten zakken terug in --steen; een accent per scherm in --actie
 *     voor de volgende handeling (Volgende/In winkelmand, of "Begin hier" en
 *     Klaar binnen stap Kasten: dan wordt de knop onderin rustig).
 *   - Klaar onderaan een open kast, bovenin weer "Inrichting".
 *   - Tooltip met uitlegbeeld (uitleg-stollen.webp, uitleg-front.webp).
 *   - Contactblok onder de actieve stap.
 * ========================================================================= */

/* actieve stap op mist, over de volle breedte van het paneel */
.cfg .stap.nu{margin:0 -24px;padding:0 24px 12px;background:var(--mist);border-bottom:1px solid var(--lijn-nook)}
.cfg .stap.nu .stapbody{padding-top:22px}
.cfg .stap.nu .chip,.cfg .stap.nu .plusrij{background:var(--wit)}
.cfg .stap.nu details.meer{border-top-color:color-mix(in srgb,var(--actie) 18%,var(--wit))}
.cfg .stap.nu .tip::before{background:var(--wit)}

/* afgeronde stappen en de stappenbalk: terug in toon; blauw blijft voor de handeling */
.cfg .klaarregel b{font-weight:300}
.cfg .klaarregel{color:var(--walnut)}
.cfg .kvinkrond{background:var(--steen)}
.cfg .stappenbalk button.klaar{border-top-color:var(--steen-deco);color:var(--steen)}
.cfg .stappenbalk button.nu{border-top-color:var(--walnut);color:var(--walnut)}
.cfg .hoewerkt,.cfg .opbouwlink{color:var(--steen)}
.cfg .hoewerkt:hover,.cfg .opbouwlink:hover{color:var(--walnut)}
.cfg .kr-leeg{color:var(--steen);font-weight:300}
.cfg .kr-leeg:hover{color:var(--walnut)}

/* de volgende handeling: --actie (wit erop 5,58:1) */
.cfg .subbar .primair{background:var(--actie);color:var(--wit);border:1px solid var(--actie)}
.cfg .subbar .primair:hover{background:var(--actie-donker);border-color:var(--actie-donker)}
.cfg .subbar .primair.rustig{background:var(--wit);color:var(--walnut);border-color:var(--walnut)}
.cfg .subbar .primair.rustig:hover{background:var(--tegel)}

/* Begin hier: de knop Inrichting van kast 1, de eerste keer */
.cfg .kr-inr.begin{background:var(--actie);border-color:var(--actie);color:var(--wit)}
.cfg .kr-inr.begin:hover{background:var(--actie-donker);border-color:var(--actie-donker)}

/* open kast: rand in walnut (selectie), bovenin weer "Inrichting" met de pijl omlaag, Klaar onderaan */
.cfg .kastrij.open{border-color:var(--walnut);box-shadow:inset 0 0 0 1px var(--walnut)}
.cfg .kastrij.open .kr-inr{background:var(--tegel);color:var(--walnut)}
.cfg .kastrij.open .kr-inr:hover{background:var(--tegel-donker)}
.cfg .krchev{display:inline-block;transition:transform .2s ease}
.cfg .kastrij.open .krchev{transform:rotate(90deg)}
.cfg .klaarrij{display:flex;justify-content:flex-end;margin:10px 0 0;padding:12px 0 14px;border-top:1px solid var(--lijn-nook)}
.cfg .kr-klaar{display:flex;align-items:center;justify-content:center;width:140px;min-height:44px;border-radius:var(--pil);
  background:var(--actie);color:var(--wit);font-size:14px;font-weight:450}
.cfg .kr-klaar:hover{background:var(--actie-donker)}

/* tooltip met uitlegbeeld: beeld bovenaan, daaronder hooguit twee korte zinnen */
.cfg #zweef.metbeeld{max-width:260px;padding:8px 8px 12px}
.cfg #zweef .zbeeld{display:block;width:244px;height:183px;margin:0 0 10px;object-fit:cover;border-radius:8px;background:var(--wit)}
.cfg #zweef.metbeeld span{display:block;padding:0 6px}

/* contactblok onder de actieve stap */
.cfg .contactblok{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;align-items:start;margin:24px 0 0;padding:16px;
  border-radius:12px;background:var(--tegel)}
/* uitsnede op hoofd en schouders: het portret is 960 x 1200, het hoofd zit rond 470 x 270 */
.cfg .contactfoto{display:block;width:56px;height:56px;border-radius:50%;overflow:hidden;background:var(--mist)}
.cfg .contactfoto img{display:block;width:122px;max-width:none;height:auto;margin:-10px 0 0 -32px}
.cfg .contactkop{margin:2px 0 0;font-size:var(--fs-15);font-weight:450;line-height:1.35;color:var(--walnut)}
.cfg .contacttekst{margin:2px 0 0;font-size:13px;line-height:1.45;color:var(--steen)}
.cfg .contactlink{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-size:14px;font-weight:450;color:var(--walnut);
  text-decoration:underline;text-underline-offset:4px}
.cfg .contactlink:hover{color:var(--actie)}

@media (min-width:900px) and (max-width:1099px){ .cfg .kr-klaar{width:128px} }
@media (max-width:899px){
  .cfg .stap.nu{margin:0 -16px;padding:0 16px 10px}
  .cfg .stap.nu .stapbody{padding-top:14px}
  .cfg .kr-klaar{width:120px}
  .cfg .klaarrij{padding:10px 0 10px}
  .cfg .contactblok{margin-top:16px;padding:12px}
}
.cfg .subbar .primair:disabled{background:var(--steen);border-color:var(--steen)}

/* Volgorde: met een muis sleep je de hele regel, op touch alleen de greep (Nico 8 okt) */
@media (hover:hover) and (pointer:fine){
  .cfg .inrrij[data-inrrij]{cursor:grab}
  .cfg .inrrij[data-inrrij]:hover{border-color:var(--steen-deco)}
  .cfg .inrrij.sleept,.cfg .inrrij.sleept .inrsleep{cursor:grabbing}
}
/* K8 (Bart 12 okt 2026): grote maattekening van een greep in de tooltip */
.cfg #zweef .zgreep{display:block;width:244px;height:152px;margin:0 0 10px;border-radius:8px;background:var(--wit)}