/* Exvanda configurator — interactieve 3D-pagina.
   Neemt kleuren en typografie over uit site.css. */
.config-intro{padding:64px 0 34px}
.config-intro h1{font-size:clamp(38px,4.5vw,60px);max-width:850px}
.config-intro> .container>p:not(.eyebrow){max-width:760px}
.config-intro .kruimelpad{margin-bottom:25px}
.config-disclaimer{padding:12px 16px;border-left:3px solid var(--copper);background:var(--surface2);font-size:14px;line-height:1.6}
.config-disclaimer strong{color:var(--text)}
.config-section{padding:0 0 110px}
.config-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-bottom:18px}
.config-step{display:flex;gap:7px;align-items:center;justify-content:center;padding:13px 5px;background:var(--surface);border:1px solid var(--line);font-size:13px;color:var(--muted);white-space:nowrap}
.config-step--active{background:var(--copper);border-color:var(--copper);color:var(--bg)}
.config-step small{font-size:10px;opacity:.8}
.config-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(325px,1fr);align-items:stretch;border:1px solid #55453a;background:var(--paper);color:var(--dark)}
.config-view{min-width:0;display:flex;flex-direction:column;border-right:1px solid #d5cbc0}
.config-view-header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:22px 25px 14px}
.config-kicker{margin:0 0 6px;color:var(--copper-ink);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800}
.config-view-header h2,.config-options h2{font-size:clamp(24px,2.6vw,34px);color:var(--dark);margin-bottom:0}
.config-phase{padding:5px 10px;border:1px solid #a59b8f;font-size:11px;white-space:nowrap}
.config-canvas-wrap{position:relative;flex:1;min-height:390px;overflow:hidden;background:radial-gradient(circle at 45% 30%,#f8f5ee,#e5ded3 80%);touch-action:none}
#config-canvas{display:block;width:100%;height:100%;min-height:390px;cursor:grab;touch-action:none}
/* Echte Exvanda-foto als snelle, geloofwaardige startweergave.
   De interactieve WebGL-scène start pas na expliciete activering. */
.config-preview{position:absolute;inset:0;z-index:2;overflow:hidden;background:#292823}
.config-preview[hidden]{display:none}
.config-preview>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 50%}
.config-preview::after{content:"";position:absolute;inset:25% 0 0;background:linear-gradient(0deg,rgba(8,10,9,.92),rgba(8,10,9,.66) 39%,rgba(8,10,9,0) 100%);pointer-events:none}
.config-preview-content{position:absolute;z-index:1;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:flex-start;gap:11px;padding:clamp(20px,3.3vw,36px);color:#fff}
.config-preview-eyebrow{color:#f4be86;font-size:11px;letter-spacing:.13em;font-weight:800;text-transform:uppercase}
.config-preview-content strong{font-size:clamp(20px,2.4vw,32px);font-weight:750;line-height:1.16;text-wrap:balance}
.config-preview-content p{max-width:570px;font-size:13px;line-height:1.55;color:#f5ede2;margin:0}
.config-preview-variants{display:flex;gap:7px;flex-wrap:wrap;margin-top:4px}
.config-preview-variants button{cursor:pointer;border:1px solid rgba(255,255,255,.55);border-radius:3px;padding:8px 13px;color:#fff;background:rgba(22,24,23,.5);font:inherit;font-size:12px;font-weight:650}
.config-preview-variants button.is-active{background:#f4efe9;color:#231d19;border-color:#f4efe9}
.config-preview-variants button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.config-start-3d{margin-top:5px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:12px}
.config-start-3d:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(max-width:580px){
  .config-preview-content{padding:20px;gap:9px}
  .config-preview-content strong{font-size:22px}
  .config-preview-content p{font-size:12px}
  .config-start-3d{font-size:13px;padding:12px 16px}
}
.config-loading{position:absolute;inset:0;z-index:1;display:flex;justify-content:center;align-items:center;padding:26px;text-align:center;font-size:14px;font-weight:600;color:#5b4b40;pointer-events:none;background:radial-gradient(circle at 48% 38%,#faf8f1,#eae2d6 78%)}
.config-loading[hidden]{display:none}
#config-canvas:active{cursor:grabbing}

.config-view-actions{display:flex;flex-wrap:wrap;gap:7px;padding:15px 20px;background:#eae2d9}
.config-view-btn{border:1px solid #aa9e91;color:#33271e;background:transparent;border-radius:2px;cursor:pointer;padding:10px 13px;font-size:12px;font-weight:700;min-height:42px;transition:background .2s}
.config-view-btn:hover,.config-view-btn:focus-visible{background:#ded0bf}
.config-view-btn.is-active{background:var(--dark);border-color:var(--dark);color:#fff}
.config-options{padding:28px 29px 30px;min-width:0}
.config-help{font-size:14px;line-height:1.55;color:#66574e;margin:12px 0 25px}
.config-measure{margin-bottom:21px}
.config-measure-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.config-measure-top label{font-size:15px;font-weight:800}
/* Volledige waarden als 6,75 en 3,25 moeten zichtbaar blijven.
   De eerdere max-width:52px knipte de laatste decimaal af. */
.config-number{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 132px;min-width:0;width:132px;min-height:55px;border:1px solid #a1978e;background:#fff;padding:7px 10px;box-sizing:border-box}
.config-number input{display:block;flex:1 1 auto;min-width:0;width:100%;max-width:none;height:34px;padding:0;margin:0;border:0;background:transparent;color:var(--dark);font:700 19px/1.3 var(--font-sans);font-variant-numeric:tabular-nums;text-align:right;appearance:textfield;-moz-appearance:textfield}
.config-number input::-webkit-inner-spin-button,.config-number input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.config-number span{flex:0 0 auto;color:#675e58;font-size:12px}
.config-measure input[type=range]{display:block;width:100%;height:27px;margin:11px 0 0;cursor:pointer;accent-color:var(--copper-ink)}
.config-scale{display:flex;justify-content:space-between;color:#685f58;font-size:12px}
.config-footnote{font-size:12px;color:#6d6259;line-height:1.5;margin:0 0 22px}
.config-summary{border-top:1px solid #cec2b7;border-bottom:1px solid #cec2b7;padding:19px 0;display:grid;gap:2px}
.config-summary span{font-size:13px;color:#64564a}
.config-summary strong{font:500 clamp(23px,2.9vw,32px)/1.3 var(--font-serif)}
.config-copy{border:0;background:var(--copper);color:var(--bg);font-weight:800;font-size:14px;padding:13px 18px;min-height:46px;margin-top:16px;cursor:pointer;width:100%}
.config-copy:hover{background:#ca8554}
.config-copy-status{font-size:12px;line-height:1.4;min-height:0;margin-top:7px;color:#5e4c3e}
.config-copy-status:empty{display:none}
.config-next{font-size:13px;line-height:1.55;color:#665a50;margin-top:14px}
.config-reference{display:flex;align-items:center;gap:20px;max-width:890px;margin-top:25px;padding:16px;border:1px solid var(--line);background:var(--surface)}
.config-reference img{width:160px;max-width:35%;aspect-ratio:3/2;object-fit:cover;flex:none}
.config-reference p{font-size:13px;line-height:1.6;margin:0}
.config-reference strong{color:var(--text)}
@media(max-width:980px){.config-layout{grid-template-columns:minmax(0,1fr)}.config-view{border-right:0;border-bottom:1px solid #d5cbc0}.config-options{padding:27px 28px}.config-canvas-wrap,#config-canvas{min-height:360px}}
@media(max-width:580px){.config-intro{padding-top:40px}.config-steps{grid-template-columns:repeat(5,minmax(0,1fr));gap:2px}.config-step{font-size:11px;padding:10px 3px;gap:3px;flex-direction:column}.config-step small{font-size:9px}.config-view-header{padding:17px 16px 12px}.config-phase{font-size:10px}.config-canvas-wrap,#config-canvas{min-height:285px}.config-view-actions{padding:12px;gap:5px}.config-view-btn{flex:1 1 45%;font-size:11px;padding:8px 5px}.config-options{padding:25px 18px}.config-reference{gap:12px}.config-reference img{width:110px}.config-reference p{font-size:12px}}
@media(prefers-reduced-motion:reduce){.config-view-btn{transition:none}}

@media(max-width:390px){.config-number{flex-basis:120px;width:120px}.config-number input{font-size:17px}}

/* Three.js gebruikt de bestaande canvasruimte. Geen uitgerekte render. */
.config-canvas-wrap{background:#e8e4da;isolation:isolate}
#config-canvas{outline-offset:-4px}
.config-three-error{display:flex;align-items:center;justify-content:center;min-height:340px;padding:24px;margin:0;text-align:center;color:#5c4436;background:#eee8df}
@media (max-width:580px){.config-three-error{min-height:280px}}

/* Fase 2 — drie voorbeeldtuinen; onafhankelijk van de maatbediening. */
.config-garden-picker{border-top:1px solid #d5cbc0;padding:17px 23px 20px;background:#f2ebe2}
.config-garden-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px;color:#261c17}
.config-garden-heading strong{font-size:15px}
.config-garden-heading span{font-size:11px;letter-spacing:.03em;color:#75695e}
.config-garden-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.config-garden-btn{background:#fffdf9;border:1px solid #b6a89a;color:#33271e;border-radius:2px;min-height:48px;padding:10px 9px;line-height:1.25;font:700 13px/1.2 var(--font-sans);cursor:pointer;transition:background-color .18s,border-color .18s}
.config-garden-btn:hover{background:#e8dcd0;border-color:#7b5d47}
.config-garden-btn.is-active{background:#38251a;border-color:#38251a;color:#fff}
.config-garden-btn:focus-visible{outline:3px solid #936039;outline-offset:2px}
.config-garden-note{font-size:13px;line-height:1.5;color:#55483d;margin:11px 0 4px}
.config-garden-caveat{font-size:11.5px;line-height:1.5;color:#75685b;margin:0}
@media(max-width:580px){
  .config-garden-picker{padding:16px 13px}
  .config-garden-buttons{gap:5px}
  .config-garden-btn{font-size:12px;padding:8px 3px;min-height:49px}
}
@media(prefers-reduced-motion:reduce){.config-garden-btn{transition:none}}

/* Vier onafhankelijke licht-/weersferen onder de tuinselectie. */
.config-mood-picker{border-top:1px solid #d5cbc0;padding:17px 23px 20px;background:#ece3d8}
.config-mood-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.config-mood-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:69px;padding:9px 3px;background:#fffdf9;border:1px solid #b6a89a;color:#33271e;border-radius:2px;font:700 12px/1.2 var(--font-sans);text-align:center;cursor:pointer;transition:background-color .18s,border-color .18s}
.config-mood-btn span[aria-hidden]{font-size:23px;line-height:1.1}
.config-mood-btn:hover{background:#e5d6c8;border-color:#7b5d47}
.config-mood-btn.is-active{background:#38251a;border-color:#38251a;color:#fff}
.config-mood-btn:focus-visible{outline:3px solid #936039;outline-offset:2px}
@media(max-width:580px){
  .config-mood-picker{padding:16px 13px}
  .config-mood-buttons{gap:5px}
  .config-mood-btn{font-size:11px;min-height:65px}
  .config-mood-btn span[aria-hidden]{font-size:20px}
}
@media(prefers-reduced-motion:reduce){.config-mood-btn{transition:none}}

/* Bouwtekening-varianten: naturel Douglas of zwart geïmpregneerd hout. */
.config-variant-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:0 0 10px}
.config-variant-btn{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:11px;border:1px solid #baac9c;border-radius:2px;background:#fffdfa;color:#33261d;text-align:left;cursor:pointer;min-height:119px;transition:border-color .15s,box-shadow .15s}
.config-variant-btn:hover{border-color:#a8774f}
.config-variant-btn.is-active{border:2px solid #784f32;padding:10px;background:#f8eee2;box-shadow:inset 0 0 0 1px #784f3233}
.config-variant-btn:focus-visible{outline:3px solid #8b5e3c;outline-offset:2px}
.config-variant-btn strong{font-size:13px;line-height:1.3}
.config-variant-btn small{font-size:11px;color:#76685c;line-height:1.25}
.config-variant-thumb{display:block;height:24px;width:100%;border-radius:1px;position:relative;overflow:hidden;border:1px solid #382c23}
.config-variant-thumb--natural{background:repeating-linear-gradient(90deg,#d09b60 0 13px,#bb8350 14px 15px,#d8b28b 16px 30px)}
.config-variant-thumb--black{background:repeating-linear-gradient(90deg,#232629 0 10px,#111519 11px 13px,#303338 14px 24px)}
.config-variant-note{color:#56493d;font-size:12px;line-height:1.5;margin:0 0 6px;min-height:35px}
.config-dimensions-intro{margin-top:12px;margin-bottom:22px}
@media(max-width:580px){.config-variant-btn{min-height:110px;padding:9px}.config-variant-btn.is-active{padding:8px}.config-variant-btn strong{font-size:12px}.config-variant-btn small{font-size:10.5px}}
@media(prefers-reduced-motion:reduce){.config-variant-btn{transition:none}}

/* Hout en wandbekleding apart kiezen, los van het getekende voorbeeld. */
.config-finish-fieldset{padding:0;margin:17px 0 8px;border:0;min-width:0}
.config-finish-fieldset legend{display:block;font-weight:800;font-size:14px;color:#33271e;margin-bottom:8px;padding:0}
.config-finish-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.config-finish-option{display:flex;align-items:center;justify-content:flex-start;gap:8px;min-height:45px;padding:8px;border:1px solid #b5a79a;background:#fffdf9;color:#2c2119;border-radius:2px;text-align:left;font:700 12px/1.25 var(--font-sans);cursor:pointer}
.config-finish-option.is-active{border-color:#65462f;background:#f3e4d4;box-shadow:inset 0 0 0 1px #65462f}
.config-finish-option:hover{background:#ebe0d5}
.config-finish-option:focus-visible{outline:3px solid #8b5e3c;outline-offset:2px}
.config-finish-swatch{display:block;width:21px;height:24px;flex:0 0 21px;border:1px solid #a89a8e;border-radius:1px}
.config-finish-swatch--wood{background:repeating-linear-gradient(90deg,#c9945b,#d9aa70 5px,#ba895d 9px)}
.config-finish-swatch--black{background:repeating-linear-gradient(90deg,#212427,#32373a 6px,#171a1c 9px)}
.config-finish-swatch--light{background:repeating-linear-gradient(90deg,#c7c4bc,#e0dace 6px,#bcbab2 9px)}
@media(max-width:370px){.config-finish-option{font-size:11px;padding:6px}.config-finish-swatch{width:16px;flex-basis:16px}}

/* Keuzes uit de twee referentietekeningen: losse gevels, afwerking en extra's. */
.config-feature-section{border-top:1px solid #d8cabc;margin:21px 0 0;padding:18px 0 0}
.config-feature-section h3{margin:0 0 8px;color:#2c2119;font-size:20px;line-height:1.3}
.config-feature-intro{font-size:12px;line-height:1.55;color:#6c5b4e;margin:0 0 12px}
.config-prototype-hint{margin:12px 0 4px;font-size:12px}
.config-wall-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}
.config-wall-field{min-width:0;display:flex;flex-direction:column;gap:6px}
.config-wall-field label{font-size:12px;font-weight:700;line-height:1.4;color:#3b3026}
.config-wall-field select{width:100%;min-width:0;min-height:44px;padding:9px 23px 9px 9px;border:1px solid #afa196;border-radius:2px;color:#2e241b;background:#fffdfa;font:600 12px/1.2 var(--font-sans);cursor:pointer}
.config-wall-field select:focus-visible,.config-extra-switch input:focus-visible,.config-spot-setting input:focus-visible{outline:3px solid #98683f;outline-offset:2px}
.config-extra-switch{display:flex;align-items:flex-start;gap:11px;padding:12px 0;border-bottom:1px solid #e3d9cd;cursor:pointer}
.config-extra-switch input{flex:none;width:19px;height:19px;margin:2px 0 0;accent-color:#6b472e;cursor:pointer}
.config-extra-switch span{display:flex;flex-direction:column;gap:3px;min-width:0}
.config-extra-switch strong{color:#39291e;font-size:13px;line-height:1.35}
.config-extra-switch small{color:#76685c;font-size:11px;line-height:1.45}
.config-spot-setting{padding:12px 0;border-bottom:1px solid #e3d9cd}
.config-spot-setting label{display:flex;align-items:center;justify-content:space-between;gap:9px;color:#39291e;font-size:13px}
.config-spot-setting label span{font-size:12px;font-weight:700;color:#6b472e;white-space:nowrap}
.config-spot-setting input{display:block;width:100%;margin:12px 0 5px;accent-color:#6b472e;cursor:pointer}
.config-spot-setting p{margin:0;font-size:11px;line-height:1.4;color:#76685c}
.config-summary-choices{font-size:11px!important;line-height:1.65;color:#5c4d40!important;margin-top:11px}
@media(max-width:420px){.config-wall-grid{grid-template-columns:1fr;gap:11px}}

/* Wizard layout: de viewer heeft NOOIT de hoogte van het rechterpaneel.
   Hou de verhoudingen van de oorspronkelijke compacte preview aan. */
.config-layout{align-items:start;grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr)}
.config-view{height:auto;align-self:start;position:sticky;top:14px}
.config-canvas-wrap{flex:0 0 auto!important;height:420px!important;min-height:0!important;max-height:420px!important;overflow:hidden}
#config-canvas{height:100%!important;min-height:0!important;max-height:100%!important}
.config-options{padding:24px 26px 20px}
.config-steps{gap:5px}
.config-step{appearance:none;text-align:center;cursor:pointer;font-family:inherit;line-height:1.3;transition:background .15s}
.config-step:not(.config-step--active){background:var(--surface)}
.config-step:focus-visible{outline:3px solid #b57951;outline-offset:2px}
.config-step[aria-current="step"]{background:var(--copper);border-color:var(--copper);color:var(--bg)}
.config-step.is-completed:not([aria-current]){border-color:#b6967b;color:var(--text)}
.config-wizard-panel[hidden]{display:none!important}
.config-wizard-panel{min-height:275px}
.config-wizard-panel h2{margin:0 0 12px;color:var(--dark);font-size:clamp(24px,2.7vw,32px)}
.config-wizard-panel .config-help{margin:9px 0 17px}
.config-wizard-panel .config-feature-section{border-top:0;margin:6px 0 0;padding:0}
.config-wizard-panel .config-feature-section h3{display:none}
.config-wizard-panel .config-feature-intro{margin-bottom:14px}
.config-wizard-panel .config-variant-picker{margin-top:15px}
.config-wizard-panel .config-dimensions-intro{margin:16px 0}
.config-step-hint{color:#6f6053;font-size:12px;line-height:1.5;margin-top:20px}
.config-wizard-nav{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:18px 0 0;margin-top:24px;border-top:1px solid #d5cabc}
.config-wizard-nav button{min-height:44px;padding:10px 12px;border:1px solid #8f795f;font-size:12px;font-family:inherit;font-weight:800;cursor:pointer}
.config-wizard-next{background:#835d42;color:#fff;border-color:#835d42!important;flex:1}
.config-wizard-previous{background:transparent;color:#4d3626}
.config-wizard-nav button:disabled{opacity:.35;cursor:default}
.config-wizard-progress{font-size:11px;font-weight:800;color:#6b5d51;white-space:nowrap}
.config-interior-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px;margin:16px 0}
.config-inline-view{width:100%;border:1px solid #88654c;background:#f0e2d3;color:#3d2a1f;padding:11px;font-size:13px;font-weight:800;cursor:pointer;min-height:44px}
.config-inline-view:focus-visible,.config-wizard-nav button:focus-visible{outline:3px solid #9d6744;outline-offset:2px}
.config-view-actions{padding:11px 14px}
.config-view-btn{min-height:39px;padding:9px 11px}
.config-garden-picker,.config-mood-picker{padding:12px 18px}
.config-garden-heading{margin-bottom:7px}
.config-garden-note{font-size:12px;margin:8px 0 2px}
.config-garden-caveat{font-size:11px}
.config-mood-btn{min-height:52px;flex-direction:row;gap:6px}
.config-mood-btn span[aria-hidden]{font-size:18px}
.config-wizard-panel .config-summary{border-top:0;padding-top:0}
@media(max-width:980px){
  .config-layout{grid-template-columns:1fr}
  .config-view{position:static;border-right:0;border-bottom:1px solid #d5cbc0}
  .config-canvas-wrap{height:390px!important;max-height:390px!important}
  .config-wizard-panel{min-height:0}
}
@media(max-width:580px){
  .config-steps{gap:3px}
  .config-step{font-size:10px;padding:10px 3px;white-space:normal;gap:3px}
  .config-step strong{font-size:10px}
  .config-canvas-wrap{height:300px!important;max-height:300px!important}
  .config-options{padding:20px 17px 18px}
  .config-mood-btn{flex-direction:column;gap:3px;min-height:51px}
  .config-mood-btn span[aria-hidden]{font-size:17px}
  .config-garden-picker,.config-mood-picker{padding:12px}
  .config-wizard-nav{gap:6px}
  .config-wizard-nav button{font-size:11px;padding:10px 8px}
  .config-interior-options{grid-template-columns:1fr;gap:11px}
}
@media(max-width:360px){
  .config-canvas-wrap{height:260px!important;max-height:260px!important}
  .config-step{font-size:9px}
}

/* Opengewerkt binnenaanzicht en zelf stopcontacten plaatsen. */
.config-outlet-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:13px 0 8px}
.config-outlet-tools #config-place-outlet{grid-column:1/-1;margin:0}
.config-tool-secondary{padding:10px 9px;min-height:44px;background:#fffdfa;color:#442f20;border:1px solid #a48b76;font:700 12px/1.25 var(--font-sans);cursor:pointer}
.config-tool-secondary:hover,.config-tool-secondary:focus-visible{background:#eee1d4}
.config-tool-secondary:disabled,.config-inline-view:disabled{cursor:not-allowed;opacity:.47}
.config-inline-view.is-active{background:#734c32;color:#fff;border-color:#734c32}
.config-canvas--placing{cursor:crosshair!important}
.config-canvas--placing:active{cursor:crosshair!important}
#config-placement-status{border-left:3px solid #9d704e;background:#f6ede4;padding:8px 10px;line-height:1.5;margin:11px 0}
#config-placement-list{font-size:11px;line-height:1.6;color:#6d5d4e}
.config-interior-options input[type=range]{display:block;width:100%;height:35px;accent-color:#8f684b;cursor:pointer}

/* Persoonlijke binnenwandafwerking en handmatig gekozen spotposities. */
.config-interior-finishes{grid-template-columns:repeat(3,minmax(0,1fr))}
.config-interior-finishes .config-finish-option{font-size:11px;gap:6px;line-height:1.3}
.config-manual-spots{margin-top:20px;padding:17px 14px;border:1px solid #d1c1ae;background:#f5eee6}
.config-manual-spots h3{display:block!important;font-size:16px!important;color:#3d2b1e!important;margin:0 0 7px!important}
.config-manual-spots .config-outlet-tools{margin:10px 0 8px}
.config-manual-spots .config-interior-options{margin:10px 0}
.config-manual-spots .config-wall-field{gap:7px}
.config-manual-spots input[type=range]{display:block;width:100%;accent-color:#875d3e;min-height:35px;cursor:pointer}
#config-spot-status{margin:9px 0 0;padding-left:10px;border-left:3px solid #a3764f;font-size:12px}
#config-place-spot.is-active{background:#714b34;color:#fff}
.config-spot-setting input[type=range]:disabled{opacity:.36;cursor:not-allowed}
@media(max-width:630px){
 .config-interior-finishes{grid-template-columns:1fr}
 .config-manual-spots{padding:13px}
}

/* Vereenvoudigde stap 4: inspirerende ruimtestijlen en vaste elektroposities. */
.config-furnishing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:12px 0}
.config-furnishing-choice{display:flex;align-items:flex-start;flex-direction:column;gap:4px;min-height:96px;padding:12px;border:1px solid #b7a494;background:#fffdf9;color:#2e231c;cursor:pointer;text-align:left;border-radius:2px;font-family:inherit}
.config-furnishing-choice span[aria-hidden]{font-size:25px;line-height:1.05}
.config-furnishing-choice strong{font-size:14px;line-height:1.25}
.config-furnishing-choice small{font-size:11px;line-height:1.4;color:#776655}
.config-furnishing-choice.is-active{background:#f4e5d6;border:2px solid #765039;padding:11px}
.config-furnishing-choice:focus-visible,.config-walk-launch:focus-visible{outline:3px solid #986d4c;outline-offset:2px}
.config-electrical-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px;margin:14px 0}
.config-walk-launch{width:100%;margin-top:9px;display:block;text-align:center;background:#fffdf9}
#config-canvas{touch-action:none;cursor:grab}
#config-canvas:active{cursor:grabbing}
@media(max-width:520px){
  .config-furnishing-grid{gap:6px}
  .config-furnishing-choice{min-height:87px;padding:9px}
  .config-furnishing-choice.is-active{padding:8px}
  .config-electrical-grid{grid-template-columns:1fr}
}

/* Inrichting staat voortaan direct bij de viewer, tuin en weersfeer.
   Vier opties in één scanbare rij op brede schermen. */
.config-furnishing-picker{padding:14px 18px;border-bottom:1px solid #d8cfc5;background:#f3eee8}
.config-furnishing-picker .config-garden-heading{margin-bottom:10px}
.config-furnishing-picker .config-furnishing-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 10px}
.config-furnishing-picker .config-furnishing-choice{min-height:88px;padding:10px 9px;justify-content:flex-start}
.config-furnishing-picker .config-furnishing-choice.is-active{padding:9px}
.config-furnishing-picker .config-furnishing-choice span[aria-hidden]{font-size:21px}
.config-furnishing-picker .config-furnishing-choice strong{font-size:12px}
.config-furnishing-picker .config-furnishing-choice small{font-size:10px}
.config-furnishing-picker .config-garden-caveat{margin:7px 0 0}
@media(max-width:680px){
 .config-furnishing-picker{padding:12px}
 .config-furnishing-picker .config-furnishing-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 .config-furnishing-picker .config-furnishing-choice{min-height:76px}
}

/* Mobiel: de sfeerkeuzes alleen bij stap 1 tonen. Bij stappen 2-5
   blijft het 3D-model compact en zijn de instellingen meteen bereikbaar.
   Ingestelde tuin, inrichting en weersfeer blijven actief en op desktop
   blijven alle knoppen gewoon zichtbaar. */
@media (max-width: 767px) {
  #veranda-configurator[data-active-step="2"] .config-furnishing-picker,
  #veranda-configurator[data-active-step="2"] .config-garden-picker,
  #veranda-configurator[data-active-step="2"] .config-mood-picker,
  #veranda-configurator[data-active-step="3"] .config-furnishing-picker,
  #veranda-configurator[data-active-step="3"] .config-garden-picker,
  #veranda-configurator[data-active-step="3"] .config-mood-picker,
  #veranda-configurator[data-active-step="4"] .config-furnishing-picker,
  #veranda-configurator[data-active-step="4"] .config-garden-picker,
  #veranda-configurator[data-active-step="4"] .config-mood-picker,
  #veranda-configurator[data-active-step="5"] .config-furnishing-picker,
  #veranda-configurator[data-active-step="5"] .config-garden-picker,
  #veranda-configurator[data-active-step="5"] .config-mood-picker {
    display: none !important;
  }
}

/* Stap 5: contactaanvraag op de lichte configuratorachtergrond. */
.config-request-form{border-top:1px solid #cabbae;padding-top:19px;margin-top:20px;gap:12px}
.config-request-form label{color:#3e3028;font-size:13px}
.config-request-form .opt{color:#67584c}
.config-request-form input:not([type="hidden"]){background:#fffdf9;border:1px solid #aa9b8d;color:#251b15;border-radius:3px;min-height:46px}
.config-request-form input:focus{background:#fff;border-color:#98683f;box-shadow:0 0 0 3px rgba(152,104,63,.16)}
.config-request-form .form-note{color:#5d5046;line-height:1.55}
.config-request-form .form-note a{color:#674025;text-decoration:underline}
.config-request-form textarea{background:#fffdf9;border:1px solid #aa9b8d;color:#251b15;border-radius:3px;min-height:92px;resize:vertical;line-height:1.55}

/* Readable secondary labels on the existing cream configurator surfaces. */
.config-wizard-panel>.form-note,
.config-furnishing-choice small,
.config-mood-picker .config-garden-heading span,
.config-mood-picker .config-garden-caveat{color:#625346}
.config-request-form textarea::placeholder{color:#766b61}
.config-request-form textarea:focus{background:#fff;border-color:#98683f;box-shadow:0 0 0 3px rgba(152,104,63,.16)}
.config-request-form .config-submit{width:100%;min-width:0;justify-self:stretch;text-align:center;justify-content:center}
.config-wizard-next[hidden]{display:none!important}