/* Blikconfigurator, showcase van THE REAL MAG. (fictief merk FONKEL).
   Huisstijl volgens het design system van THE REAL MAG.:
   antraciet + lichtgrijs + wit, koper UITSLUITEND als accent, Montserrat,
   scherpe vormen (radius 2px, 1px borders), geen schaduwen, geen ronde pillen. */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

:root{
  --antraciet:#232021;
  --lichtgrijs:#E6E5E2;
  --wit:#FFFFFF;
  --accent:#A07050;          /* Burnished Copper — alleen accent/CTA */
  --accent-licht:#BE8A63;
  --border:#D4D4D0;
  --border-dark:rgba(255,255,255,.16);
  --muted:rgba(35,32,33,.60);
  --muted-dark:rgba(255,255,255,.70);
  --muted-dark-2:rgba(255,255,255,.45);
  --font:'Montserrat',Arial,Helvetica,sans-serif;
  --r:2px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--wit);color:var(--antraciet);font:400 16px/1.65 var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
p{margin:0 0 1em}
h1,h2{margin:0 0 .5em;font-weight:300;line-height:1.1;letter-spacing:-.025em}
h1{font-size:clamp(2rem,4.2vw,3.2rem)}
h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}
h3{margin:0 0 .9em;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
h4{margin:0 0 .4em;font-size:.95rem;font-weight:600;letter-spacing:-.01em}
.wrap{width:min(1320px,92vw);margin:0 auto}
.muted{color:var(--muted)}
.small{font-size:.8rem}
.center{text-align:center}
.narrow{max-width:68ch}
.lead{color:var(--muted);font-size:1.05rem;max-width:78ch}

/* ---------- topbar ---------- */
.topbar{background:var(--antraciet)}
.topbar-in{display:flex;align-items:center;gap:16px;height:64px}
.topbar-in img{height:24px;width:auto;display:block}
.topbar span{font-size:.74rem;letter-spacing:.08em;color:var(--muted-dark)}
.sep{width:1px;height:20px;background:var(--border-dark)}
.spacer{flex:1}

/* ---------- hero: donker antraciet vlak met M-watermerk ---------- */
.hero{position:relative;background:var(--antraciet);color:var(--wit);padding:72px 0 64px;overflow:hidden}
.hero::after{content:'';position:absolute;right:-8%;top:-40%;width:62%;height:190%;
  background:url('assets/brand/trm_beeldmerk_wit.svg') no-repeat center/contain;opacity:.06;pointer-events:none}
.hero .wrap{position:relative;z-index:1}
.hero h1{color:var(--wit)}
.hero .lead{color:var(--muted-dark);max-width:70ch}
/* de klok: 1 minuut tegenover 1 seconde */
.klok{display:flex;align-items:stretch;gap:0;margin:30px 0 34px;max-width:660px;
  border:1px solid var(--border-dark);border-radius:var(--r)}
.klok-kol{flex:1;padding:18px 20px;display:flex;flex-direction:column;gap:5px}
.klok-kol.nu{background:rgba(160,112,80,.12);border-left:1px solid var(--border-dark)}
.klok-label{font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-dark)}
.klok-kol.nu .klok-label{color:var(--accent-licht)}
.klok-tijd{font-size:1.9rem;font-weight:600;line-height:1.1;color:var(--muted-dark)}
.klok-kol.nu .klok-tijd{color:var(--wit)}
.klok-onder{font-size:.74rem;color:var(--muted-dark);line-height:1.5}
.klok-pijl{width:0}
@media(max-width:620px){.klok{flex-direction:column}
  .klok-kol.nu{border-left:0;border-top:1px solid var(--border-dark)}}

.eyebrow{font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-licht);margin-bottom:1.4em}

/* ---------- configurator ---------- */
.configurator{display:grid;grid-template-columns:1fr 360px;padding:0 0 72px;align-items:start}
@media(max-width:1080px){.configurator{grid-template-columns:1fr}}
.stage{border:1px solid var(--border);background:var(--wit)}
#viewport{width:100%;height:min(50vh,540px);min-height:360px;display:block}
#viewport canvas{display:block;width:100%;height:100%}
.stage-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--border);background:var(--lichtgrijs)}
.stage-left{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
.stage-right{display:flex;gap:8px}
.hint{color:var(--muted);font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

button{font:inherit;cursor:pointer;border-radius:var(--r)}
.ghost{background:var(--wit);border:1px solid var(--border);color:var(--antraciet);
  padding:7px 13px;font-size:.78rem;font-weight:500;display:inline-flex;align-items:center;gap:8px;
  transition:border-color .15s,color .15s}
.ghost:hover{border-color:var(--antraciet)}
.ghost .dot{width:6px;height:6px;background:var(--border)}
.ghost.on{border-color:var(--accent);color:var(--accent)}
.ghost.on .dot{background:var(--accent)}

/* ---------- paneel ---------- */
.panel{border:1px solid var(--border);border-left:0;padding:22px;background:var(--wit)}
@media(max-width:1080px){.panel{border-left:1px solid var(--border);border-top:0}}
.group{padding:0 0 20px;margin:0 0 20px;border-bottom:1px solid var(--border)}
.group:last-of-type{border-bottom:0;margin-bottom:10px}
.note{color:var(--muted);font-size:.74rem;margin:10px 0 0;line-height:1.55}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:var(--wit);border:1px solid var(--border);color:var(--muted);
  padding:8px 11px;font-size:.8rem;line-height:1.25;text-align:left;border-radius:var(--r);transition:all .15s}
.chip em{display:block;font-style:normal;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.chip:hover{border-color:var(--antraciet);color:var(--antraciet)}
.chip.on{border-color:var(--accent);color:var(--antraciet);background:rgba(160,112,80,.07)}
.chip.on em{color:var(--accent)}

.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.preset{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--wit);padding:0;display:block}
.preset img{width:100%;height:46px;object-fit:cover;display:block}
.preset span{display:block;font-size:.64rem;color:var(--muted);padding:5px 4px;letter-spacing:.02em}
.preset.on{border-color:var(--accent)}

.fld{display:block;margin-bottom:12px}
.fld>span{display:block;font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.fld input[type=text],.fld select{width:100%;background:var(--wit);border:1px solid var(--border);color:var(--antraciet);
  padding:9px 10px;border-radius:var(--r);font:inherit;font-size:.85rem}
.fld input[type=text]:focus,.fld select:focus{outline:none;border-color:var(--accent)}
.fld input[type=color]{width:100%;height:34px;background:var(--wit);border:1px solid var(--border);border-radius:var(--r);padding:2px}
.fld input[type=range]{width:100%;accent-color:var(--accent);background:transparent}
.row{display:flex;gap:8px}
.col{flex:1}

.switch{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:.8rem;color:var(--muted);cursor:pointer}
.switch input{width:15px;height:15px;accent-color:var(--accent)}

.cta{width:100%;background:var(--accent);border:1px solid var(--accent);color:var(--wit);font-weight:600;
  padding:13px;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;transition:background .15s}
.cta:hover{background:var(--antraciet);border-color:var(--antraciet)}

/* ---------- uitslag-editor ---------- */
.editor{border-top:1px solid var(--border);background:var(--lichtgrijs);padding:14px}
.editor-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.ed-title{font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ed-title em{font-style:normal;font-weight:400;letter-spacing:.02em;text-transform:none;margin-left:8px}
.ed-tools{display:flex;gap:5px;align-items:center;margin-left:auto;flex-wrap:wrap}
.ed-gap{width:8px}
.ghost.sm{padding:5px 9px;font-size:.72rem}
.editor-canvas{position:relative;overflow:hidden;border:1px solid var(--border);background:var(--wit)}
.editor-canvas canvas{position:absolute;inset:0;display:block}
#edOv{cursor:default;touch-action:none}
.ed-hint{color:var(--muted);font-size:.7rem;margin:9px 0 0}

/* ---------- lagenlijst ---------- */
.lagen{list-style:none;margin:0 0 4px;padding:0;max-height:210px;overflow-y:auto;
  border:1px solid var(--border);border-radius:var(--r)}
.laag{display:flex;align-items:center;gap:8px;padding:6px 8px;cursor:pointer;
  border-bottom:1px solid var(--border);font-size:.78rem;color:var(--antraciet)}
.laag:last-child{border-bottom:0}
.laag:hover{background:var(--lichtgrijs)}
.laag.on{background:rgba(160,112,80,.09);box-shadow:inset 2px 0 0 var(--accent)}
.laag.uit .laag-nm,.laag.uit .laag-ic{opacity:.4}
.laag.leeg{color:var(--muted);cursor:default;font-size:.74rem;line-height:1.5}
.laag.leeg:hover{background:none}
.laag-oog{background:none;border:0;padding:0 2px;cursor:pointer;color:var(--accent);font-size:.7rem;line-height:1}
.laag-ic{width:15px;text-align:center;color:var(--muted);font-size:.8rem}
.laag-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- kleine knoppenrij in het eigenschappenpaneel ---------- */
.mini{display:flex;flex-wrap:wrap;gap:4px}
.mini button{flex:1 1 auto;background:var(--wit);border:1px solid var(--border);border-radius:var(--r);
  color:var(--muted);font-size:.68rem;padding:5px 6px;cursor:pointer;font-family:inherit}
.mini button:hover{border-color:var(--antraciet);color:var(--antraciet)}
.mini button.aan{border-color:var(--accent);color:var(--accent)}

.fld textarea{width:100%;background:var(--wit);border:1px solid var(--border);color:var(--antraciet);
  border-radius:var(--r);padding:8px 10px;font:inherit;font-size:.82rem;resize:vertical;min-height:44px}
.fld textarea:focus{outline:none;border-color:var(--accent)}
.ghost:disabled{opacity:.35;cursor:default}
.ghost:disabled:hover{border-color:var(--border)}

/* ---------- bestand hierin slepen ---------- */
.ed-drop{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(35,32,33,.72);pointer-events:none;z-index:3}
.ed-drop.aan{display:flex}
.ed-drop span{color:var(--wit);font-size:.8rem;letter-spacing:.06em;border:1px dashed rgba(255,255,255,.6);
  padding:12px 20px;border-radius:var(--r)}

/* ---------- renders ---------- */
.renders{padding:64px 0;background:var(--lichtgrijs)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:28px}
@media(max-width:900px){.grid4{grid-template-columns:repeat(2,1fr)}}
.grid4 figure{margin:0;background:var(--wit);border:1px solid var(--border)}
.grid4 img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.grid4 figcaption{padding:9px 11px;font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---------- vergelijking ---------- */
.compare{padding:64px 0}
.table{margin:28px 0 14px;border:1px solid var(--border)}
.tr{display:grid;grid-template-columns:1.1fr 1fr 1fr;border-bottom:1px solid var(--border);font-size:.85rem}
.tr:last-child{border-bottom:0}
.tr>div{padding:12px 14px}
.tr>div:first-child{color:var(--muted);font-weight:500}
.tr>div:nth-child(2){color:var(--muted);background:var(--lichtgrijs)}
.tr>div:nth-child(3){color:var(--antraciet)}
.tr.th{background:var(--antraciet);font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.tr.th>div{color:var(--muted-dark);background:transparent}
.tr.th>div:nth-child(3){color:var(--accent-licht)}
@media(max-width:760px){.tr{grid-template-columns:1fr}.tr>div{border-bottom:1px solid var(--border)}}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:22px}
@media(max-width:760px){.grid2{grid-template-columns:1fr}}
.grid2 figure{margin:0;border:1px solid var(--border);background:var(--wit)}
.grid2 img{width:100%;display:block}
.grid2 figcaption{padding:10px 14px;font-size:.76rem;color:var(--muted)}

/* ---------- stappen ---------- */
.fit{padding:64px 0;background:var(--lichtgrijs)}
.steps{list-style:none;padding:0;margin:28px 0 44px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:900px){.steps{grid-template-columns:1fr}}
.steps li{background:var(--wit);border:1px solid var(--border);padding:18px}
.steps li.on{border-color:var(--accent)}
.steps span{display:inline-flex;width:24px;height:24px;border:1px solid var(--border);
  align-items:center;justify-content:center;font-size:.72rem;color:var(--muted);margin-bottom:12px}
.steps li.on span{background:var(--accent);border-color:var(--accent);color:var(--wit)}
.steps p{font-size:.8rem;color:var(--muted);margin:0}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media(max-width:760px){.cols{grid-template-columns:1fr}}
.cols p{color:var(--muted);font-size:.92rem}

/* ---------- footer ---------- */
.foot{background:var(--antraciet);color:var(--muted-dark);padding:44px 0 56px;font-size:.84rem}
.foot strong{color:var(--wit);font-weight:600}
.foot .muted{color:var(--muted-dark-2)}
.foot img{height:22px;margin-bottom:18px;display:block}
.foot a{color:var(--accent-licht)}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;background:rgba(35,32,33,.82);display:flex;align-items:center;justify-content:center;z-index:80;padding:20px}
.modal[hidden]{display:none}
.modal-in{background:var(--wit);border:1px solid var(--border);padding:28px;
  width:min(560px,94vw);max-height:88vh;overflow:auto;position:relative}
.modal .x{position:absolute;top:10px;right:12px;background:transparent;border:0;color:var(--muted);font-size:1.5rem;line-height:1}
.sum{list-style:none;padding:0;margin:18px 0}
.sum li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--border);font-size:.86rem}
.sum li span:first-child{color:var(--muted)}
.sum-img{width:100%;border:1px solid var(--border);margin-top:8px}

/* ---------- 360 in fotokwaliteit ---------- */
.spin{position:relative;background:var(--wit);border-bottom:1px solid var(--border)}
.spin[hidden]{display:none}
.spin img{display:block;width:100%;height:min(50vh,540px);object-fit:contain;background:var(--lichtgrijs);cursor:ew-resize}
.spin-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--lichtgrijs);
  border-top:1px solid var(--border);font-size:.76rem;color:var(--muted)}
.spin-voortgang{flex:1;height:2px;background:var(--border);position:relative;overflow:hidden}
.spin-voortgang i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent);transition:width .2s}

/* ---------- renderstage: alles wat je ziet komt uit Vantage ---------- */
.rnd{position:relative;background:var(--lichtgrijs)}
.rnd img{display:block;width:100%;height:min(56vh,620px);object-fit:contain;cursor:grab;-webkit-user-drag:none;user-select:none;
  background:var(--lichtgrijs);transition:opacity .18s}
.rnd img.leeg{opacity:0}
.rnd-status{position:absolute;left:0;right:0;bottom:0;padding:9px 14px;font-size:.74rem;color:var(--muted);
  background:linear-gradient(to top,rgba(230,229,226,.96),rgba(230,229,226,0))}
.rnd.rekent .rnd-status::before{content:'';display:inline-block;width:8px;height:8px;margin-right:8px;
  background:var(--accent);animation:puls 1s ease-in-out infinite}
@keyframes puls{0%,100%{opacity:.25}50%{opacity:1}}
.rnd-voortgang{display:block;width:120px;height:2px;background:var(--border);position:relative;overflow:hidden;flex:none}
.rnd-voortgang i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent);transition:width .25s}

/* ---------- realtime blik onder de render ---------- */
.rnd{position:relative}
.rt{position:absolute;inset:0}
.rt canvas{display:block;width:100%;height:100%}
#rndImg{position:relative;z-index:2}
#rndImg{transition:opacity .35s ease}
#rndImg.leeg{opacity:0;pointer-events:none;transition-duration:.1s}  /* infaden 0,35 s, uitfaden 0,1 s (16-09-2026) */
#rndImg.direct{transition:none}  /* render over render: de onderlaag toont al hetzelfde beeld, dus meteen naar 0 */
#rndImgOnder{position:relative;z-index:1;pointer-events:none;transition:none}
#rndImgOnder.leeg{opacity:0}
/* Geen leeg vlak als de render wegvalt (21-09-2026). toonRealtime() haalt de src weg; met de grijze achtergrond van
   .rnd img bleef het lege <img> nog 0,1 s over het 3D-beeld staan, met linksboven de alt-tekst. */
.configurator-page #rndImg,.configurator-page #rndImgOnder{background:transparent}
#rndImg:not([src]),#rndImgOnder:not([src]){visibility:hidden}
/* draaien over render en 3D-vlak samen, net als bij de bank (11-09-2026) */
.rnd{cursor:grab;user-select:none}
.rnd:active,.rnd:active img{cursor:grabbing}

/* Dedicated configurator: the viewport stays still while the controls scroll. */
html.configurator-page{height:100%;overflow:hidden;overscroll-behavior:none}
body.configurator-page{height:100vh;height:100dvh;min-height:0;overflow:hidden;
  display:grid;grid-template-rows:auto minmax(0,1fr);overscroll-behavior:none}
.configurator-page .topbar{padding-top:env(safe-area-inset-top,0px)}
.configurator-page .topbar-in{height:64px;padding:0 max(24px,env(safe-area-inset-right,0px)) 0 max(24px,env(safe-area-inset-left,0px))}
.configurator-page .brand-link{display:flex;align-items:center;min-height:44px;flex:none}
.configurator-page .brand-link img{height:36px}
.configurator-page .back-link{margin-left:auto;display:inline-flex;align-items:center;gap:12px;min-height:44px;
  color:var(--wit);font-size:.74rem}
.configurator-page .configurator{width:100%;margin:0;padding:0;min-height:0;overflow:hidden;
  grid-template-columns:minmax(0,3fr) minmax(360px,2fr);align-items:stretch}
.configurator-page .stage{min-width:0;min-height:0;border:0;background:var(--lichtgrijs);
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding-left:env(safe-area-inset-left,0px)}
.stage-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 24px;
  font-size:.65rem;letter-spacing:.10em;text-transform:uppercase;color:var(--muted)}
.stage-heading span:first-child{font-weight:700;color:var(--antraciet)}
.stage-heading span:last-child{font-size:.60rem;letter-spacing:.04em;text-transform:none}
.stage-view{min-width:0;min-height:0;display:grid;place-items:center;container-type:size}
/* Match the square render framing without changing either camera or API. */
.configurator-page .rnd{width:min(100cqw,100cqh);height:min(100cqw,100cqh);touch-action:none}
.configurator-page #rndImg,.configurator-page #rndImgOnder{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.configurator-page .rnd-status{z-index:3;pointer-events:none;text-align:center;font-size:.7rem;padding:12px 8px}
.configurator-page .stage-bar{min-height:62px;padding:8px 20px calc(8px + env(safe-area-inset-bottom,0px));background:transparent}
.configurator-page .stage-left{gap:10px}
.configurator-page .rnd-voortgang{width:24px}
.configurator-page .hint{white-space:normal;line-height:1.5;font-size:.65rem}
.configurator-page #btnOpnieuw{flex:none;background:transparent;font-size:.68rem}
.configurator-page .panel{display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  min-width:0;min-height:0;padding:0;border:0;border-left:1px solid var(--border);overflow:hidden}
.panel-heading{padding:22px 24px 16px;border-bottom:1px solid var(--border)}
.panel-heading .eyebrow{font-size:.56rem;color:var(--accent);margin:0 0 8px}
.panel-heading h1{font-size:clamp(1.25rem,1.8vw,1.65rem);margin:0 0 6px;line-height:1.2}
.panel-heading>p:last-child{font-size:.69rem;color:var(--muted);margin:0}
.panel-scroll{min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  scrollbar-gutter:stable;scrollbar-width:thin;padding:20px 20px 24px 24px;
  padding-right:max(20px,env(safe-area-inset-right,0px));-webkit-overflow-scrolling:touch}
.configurator-page .group{padding-bottom:22px;margin-bottom:22px;min-width:0}
.configurator-page .group h3{font-size:.65rem;letter-spacing:.12em;color:var(--antraciet);margin-bottom:12px}
.configurator-page .note{font-size:.68rem}
.configurator-page .editor{padding:0 0 22px;background:transparent;border-top:0}
.configurator-page .editor-head{gap:12px;margin-bottom:12px}
.configurator-page .ed-title{display:flex;justify-content:space-between;align-items:center;width:100%;color:var(--antraciet)}
.configurator-page .ed-title em{font-size:.60rem}
.configurator-page .ed-tools{margin:0;gap:6px;width:100%}
.configurator-page .ed-gap{display:none}
.configurator-page .ghost.sm{padding:7px 9px;font-size:.66rem;justify-content:center;min-width:36px;min-height:36px}
.configurator-page .ed-hint{font-size:.63rem;line-height:1.65}
.configurator-page .lagen{max-height:none;overflow:visible}
.configurator-page .laag{min-height:40px;padding:4px 8px}
.configurator-page .laag-oog{min-width:32px;min-height:32px;font-size:.8rem}
.configurator-page .row{min-width:0}
.configurator-page .col{min-width:0}
.configurator-page .chip{min-height:44px;font-size:.72rem}
.configurator-page #formaat .chip{flex:1}
.configurator-page #formaat .chip em{font-size:.53rem;letter-spacing:.05em}
.configurator-page .ghost,.configurator-page .mini button{min-height:40px}
.configurator-page .quote-button{width:100%;justify-content:center}
.panel-download{padding:12px 24px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);background:var(--wit);
  padding-right:max(24px,env(safe-area-inset-right,0px))}
.panel-download .cta{display:flex;align-items:center;justify-content:center;gap:20px;min-height:48px;font-size:.68rem;letter-spacing:.06em}
.panel-download .cta span{font-size:1.1rem;line-height:1}
.panel-download p{font-size:.60rem;line-height:1.5;color:var(--muted);text-align:center;margin:7px 0 0}
.configurator-page :focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.configurator-page .panel-scroll:focus-visible{outline-offset:-3px}
.configurator-page .modal .x{min-width:44px;min-height:44px;top:4px;right:4px}

@media(max-width:899px){
  .configurator-page .topbar-in{height:56px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));gap:12px}
  .configurator-page .brand-link img{height:28px}
  .configurator-page .topbar .demo-label{font-size:.60rem;letter-spacing:.03em}
  .configurator-page .back-link{font-size:.67rem;gap:6px}
  .configurator-page .configurator{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,45vh) minmax(0,1fr);grid-template-rows:minmax(0,45dvh) minmax(0,1fr)}
  .stage-heading{display:none}
  .configurator-page .stage{grid-template-rows:minmax(0,1fr) auto;padding-right:env(safe-area-inset-right,0px)}
  .configurator-page .stage-bar{min-height:48px;padding:3px 16px;gap:12px}
  .configurator-page .stage-left{gap:8px}
  .configurator-page .rnd-voortgang{width:16px}
  .configurator-page .hint{font-size:.60rem;max-width:260px}
  .configurator-page #btnOpnieuw{font-size:.61rem;min-height:44px;padding:6px 9px}
  .configurator-page .panel{border-left:0;border-top:1px solid var(--border)}
  .panel-heading{padding:12px max(20px,env(safe-area-inset-left,0px))}
  .panel-heading h1{font-size:1.08rem;margin:0}
  .panel-heading .eyebrow,.panel-heading>p:last-child{display:none}
  .panel-scroll{padding:18px max(20px,env(safe-area-inset-right,0px)) 24px max(20px,env(safe-area-inset-left,0px))}
  .panel-download{padding:10px max(20px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px))}
  .panel-download .cta{min-height:46px}
  .configurator-page .ghost.sm,.configurator-page .ghost,.configurator-page .mini button,.configurator-page .laag-oog{min-height:44px;min-width:44px}
  .configurator-page .fld input[type=color],.configurator-page .fld input[type=range],.configurator-page .fld select,.configurator-page .fld input[type=text]{min-height:44px}
  /* Prevent Safari from zooming and moving the fixed product view on input focus. */
  .configurator-page .fld input,.configurator-page .fld select,.configurator-page .fld textarea{font-size:16px}
  .configurator-page .preset{min-height:72px}
  .configurator-page .ed-tools{gap:6px}
  .configurator-page .rnd-status{font-size:.63rem;padding:6px 8px}
}
@media(max-width:480px){
  .configurator-page .topbar .demo-label,.configurator-page .topbar .sep{display:none}
  .configurator-page .brand-link img{height:28px}
}
/* Schakelaar echte render aan of uit (16-09-2026): uit = alleen het meebewegende 3D-beeld, geen renderdienst. */
.render-keuze{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:40px;padding:6px 10px 6px 12px;
  border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--muted);font:inherit;
  font-size:.68rem;cursor:pointer;white-space:nowrap}
.render-keuze:hover{color:var(--antraciet)}
.render-keuze .schakel{position:relative;flex:none;width:30px;height:18px;border-radius:999px;background:var(--border);transition:background-color .2s}
.render-keuze .schakel::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:var(--wit);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .2s}
.render-keuze.on{color:var(--antraciet)}
.render-keuze.on .schakel{background:var(--accent)}
.render-keuze.on .schakel::after{transform:translateX(12px)}
.render-keuze .kort,#btnOpnieuw .kort{display:none}
#btnOpnieuw[hidden]{display:none}
@media(max-width:899px){
  .configurator-page .render-keuze{min-height:44px;font-size:.61rem}
}
/* Is de balk smal (tweeluik, tablet), dan de tip links weg: hij werd afgekapt, en dezelfde tip staat onderin het beeld. */
.configurator-page .stage-bar{container-type:inline-size}
@container (max-width:680px){
  .configurator-page .stage-bar .hint{display:none}
}
@media(max-width:480px){
  .configurator-page .stage-bar{gap:8px;padding-left:12px;padding-right:12px}
  .configurator-page .rnd-voortgang{display:none}
  .render-keuze{gap:6px;padding:6px 8px}
  .render-keuze .schakel{width:26px;height:16px}
  .render-keuze .schakel::after{width:12px;height:12px}
  .render-keuze.on .schakel::after{transform:translateX(10px)}
  .render-keuze .lang,#btnOpnieuw .lang{display:none}
  .render-keuze .kort,#btnOpnieuw .kort{display:inline}
  .configurator-page #btnOpnieuw{padding:6px 8px}
}
/* Vaste aanzichten Voor, Zij en Achter onder het beeld (16-09-2026), net als de aanzichtbalk van de bankconfigurator. */
.configurator-page .aanzicht-switch{flex:none}
.configurator-page .aanzicht-switch button{min-height:40px;min-width:44px;padding:6px 10px;font-size:.68rem}
@media(max-width:480px){
  .configurator-page .stage-bar .hint{display:none}      /* dezelfde tip staat al onderin het beeld */
  .configurator-page .aanzicht-switch button{padding:6px 8px;font-size:.62rem}
}

/* Geen @media(prefers-reduced-motion) meer (16-09-2026). Besluit Christian 05-08-2026: wat wij bouwen hangt niet aan die
   instelling. Windows zet de animatie-effecten regelmatig vanzelf uit, en dan viel ook het infaden van de render weg waar
   hij om vroeg. Hier lopen alleen zachte kleur- en dekkingsovergangen; niets schuift of zoomt. */

/* Lookkeuze (14-09-2026): kleurstaal van de studio in de knop */
.look-staal{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:7px;vertical-align:-1px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
#stage3d{transition:background-color .25s ease}

/* Surface editing keeps touch controls outside the model on small screens. */
.configurator-page .stage{position:relative;container-type:inline-size}
.stage-modebar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;min-width:0}
.stage-modebar .view-switch button{min-height:44px;padding:8px 14px}
.stage-history{display:flex;gap:4px;margin-left:auto}
.configurator-page .stage-history button{min-width:44px;min-height:44px;padding:0;font-size:1.3rem;justify-content:center}
.gizmo-dock{position:absolute;z-index:4;bottom:76px;left:50%;transform:translateX(-50%);max-width:100%;pointer-events:none}
.gizmo{padding:6px 8px 8px;background:rgba(255,255,255,.97);border:1px solid var(--border);border-radius:8px;
  box-shadow:0 3px 16px rgba(35,32,33,.13);pointer-events:auto}
.gizmo[hidden],.gizmo-hint[hidden]{display:none}
.gizmo-name{margin:0 0 4px;text-align:center;font-size:.68rem;font-weight:600;line-height:20px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:364px}
.gizmo-buttons{display:grid;grid-template-columns:repeat(8,44px);gap:2px}
.gizmo-buttons button{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
  border:1px solid var(--border);border-radius:4px;background:var(--wit);color:var(--antraciet);font-size:1.4rem;
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.gizmo-buttons button:hover,.gizmo-buttons button:active{background:var(--antraciet);color:var(--wit)}
.gizmo-hint{font-size:.7rem;text-align:center;max-width:360px;padding:8px 12px;margin:0;
  background:rgba(255,255,255,.94);border-radius:6px;color:var(--antraciet)}
.configurator-page #stage3d[data-modus="verplaatsen"],.configurator-page #stage3d[data-modus="verplaatsen"] img{cursor:move}
@container(max-width:385px){
  .gizmo-buttons{grid-template-columns:repeat(4,44px)}
  .gizmo-name{max-width:182px}
}
@media(max-width:899px){
  .configurator-page .stage{grid-template-rows:auto minmax(0,1fr) 84px auto}
  .stage-modebar{padding:4px 8px}
  .stage-modebar .view-switch button{padding:8px 12px;min-width:0}
  .gizmo-dock{position:static;transform:none;display:grid;place-items:center;min-width:0;height:84px;padding:0 3px}
  .gizmo{padding:4px 7px 6px;box-shadow:none}
  .gizmo-name{line-height:18px;margin-bottom:2px}
  .gizmo-hint{background:transparent;padding:8px 16px}
}
@media(max-width:385px){
  .configurator-page .stage{grid-template-rows:auto minmax(0,1fr) 130px auto}
  .gizmo-dock{height:130px}
}

/* Two or three panes share the same editor, model and render image. */
body.configurator-page{grid-template-rows:auto auto minmax(0,1fr)}
.workspace-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:60px;padding:8px 20px;border-bottom:1px solid var(--border);background:var(--wit)}
.workspace-view{display:flex;align-items:center;gap:18px;min-width:0}
.workspace-title{font-size:.67rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.view-switch{display:flex;gap:2px;padding:3px;border:1px solid var(--border);border-radius:var(--r)}
.view-switch button{border:0;background:transparent;color:var(--muted);padding:8px 16px;
  font-size:.72rem;font-weight:600;min-height:34px}
.view-switch button:hover{color:var(--antraciet);background:var(--lichtgrijs)}
.view-switch button.on{background:var(--antraciet);color:var(--wit)}
.configurator-page .configurator{grid-template-columns:minmax(0,1fr) minmax(300px,21%)}
.configurator-page #ontwerp{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;
  min-width:0;min-height:0;margin:0;padding:18px 16px 14px;border:0;
  border-right:1px solid var(--border);overflow:hidden;background:#f4f3f1}
.configurator-page #ontwerp[hidden],.configurator-page #productStage[hidden],.view-switch[hidden]{display:none}
.configurator-page .editor-head{align-content:start;min-width:0;margin:0 0 12px}
.configurator-page .ed-title{gap:8px;min-height:20px}
.configurator-page .ed-title em{text-align:right;margin-left:0;letter-spacing:0}
.configurator-page .ed-tools{align-items:center}
.configurator-page .ed-tools button{flex:none}
.editor-canvas-slot{display:grid;place-items:center;min-width:0;min-height:0;overflow:hidden}
.configurator-page .editor-canvas{flex:none}
.configurator-page .ed-hint{margin:12px 0 0;line-height:1.5}
.configurator-page .stage-heading{padding:18px 16px;gap:10px}
.configurator-page .stage-bar{padding-left:12px;padding-right:12px;gap:8px}
.configurator-page .panel-heading{padding:16px;border-bottom:1px solid var(--border)}
.configurator-page .panel-heading h1{font-size:1.15rem;margin:0}
.configurator-page .panel-heading>p:last-child{margin-top:4px}
.configurator-page .panel-scroll{padding:16px 12px 20px 16px}
.configurator-page .group{padding-bottom:16px;margin-bottom:16px}
.configurator-page .panel-download{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}
.configurator-page .panel-download .cta{gap:8px;letter-spacing:.02em;padding:10px 8px}
@media(min-width:900px){
  .configurator-page .configurator[data-indeling="drieluik"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(300px,21%)}
  .configurator-page .configurator[data-indeling="drieluik"] .stage-heading span:last-child{display:none}
}
@media(max-width:899px){
  .workspace-toolbar{min-height:60px;padding:6px max(16px,env(safe-area-inset-right,0px)) 6px max(16px,env(safe-area-inset-left,0px))}
  .workspace-view{width:100%;justify-content:space-between}
  .view-switch button{min-height:40px;min-width:56px}
  #indeling{display:none}
  .configurator-page .configurator{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,45vh) minmax(0,1fr);grid-template-rows:minmax(0,45dvh) minmax(0,1fr)}
  .configurator-page #ontwerp{padding:10px max(12px,env(safe-area-inset-right,0px)) 8px max(12px,env(safe-area-inset-left,0px));border-right:0}
  .configurator-page .editor-head{gap:6px;margin-bottom:6px}
  .configurator-page .ed-tools{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding:0 0 4px}
  .configurator-page .ed-hint{font-size:.59rem;margin-top:6px}
  .configurator-page .panel-heading{padding:10px max(16px,env(safe-area-inset-left,0px))}
  .configurator-page .panel-scroll{padding:14px max(16px,env(safe-area-inset-right,0px)) 20px max(16px,env(safe-area-inset-left,0px))}
  .configurator-page .panel-download{padding:8px max(16px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
  .configurator-page .configurator[data-weergave="3d"]{grid-template-rows:minmax(0,52dvh) minmax(0,1fr)}
}

/* The initial choices occupy the same fixed workspace as the editor. */
body.configurator-page.kiest-start{grid-template-rows:auto minmax(0,1fr)}
.kiest-start .workspace-toolbar,.kiest-start #ontwerp,.kiest-start #productStage,.kiest-start .panel{display:none!important}
.configurator-page.kiest-start .configurator{display:block;min-height:0}
.keuze-start{height:100%;min-height:0;overflow:auto;overscroll-behavior:contain;display:flex;
  padding:clamp(24px,4dvh,44px) 32px;background:#f4f3f1}
.keuze-start[hidden],.keuze-stap[hidden],#keuzeTerug[hidden],.leeg-hint[hidden]{display:none}
.keuze-shell{width:min(960px,100%);margin:auto}
.keuze-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
.keuze-kicker{font-size:.67rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.keuze-voortgang{font-size:.72rem;color:var(--muted);white-space:nowrap}
.keuze-stappen{list-style:none;margin:0 0 34px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.keuze-stappen li{display:flex;align-items:center;gap:10px;border-top:2px solid var(--border);padding-top:12px;
  color:var(--muted);font-size:.72rem;font-weight:500}
.keuze-stappen li>span{display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--border);font-size:.65rem}
.keuze-stappen li[aria-current="step"]{color:var(--antraciet);border-top-color:var(--antraciet);font-weight:700}
.keuze-stappen li[aria-current="step"]>span{background:var(--antraciet);border-color:var(--antraciet);color:var(--wit)}
.keuze-intro{margin-bottom:28px}
.keuze-intro h2{font-size:clamp(1.8rem,3.2vw,2.65rem);line-height:1.15;margin:0 0 10px}
.keuze-intro h2:focus{outline:none}
.keuze-intro p{font-size:.84rem;line-height:1.6;color:var(--muted);margin:0}
.keuze-kaarten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.keuze-kaart{position:relative;display:flex;flex-direction:column;padding:0;text-align:left;overflow:hidden;
  border:1px solid var(--border);border-radius:var(--r);background:var(--wit);color:var(--antraciet);
  transition:border-color .15s,background-color .15s}
.keuze-kaart:hover{border-color:var(--antraciet);background:#fbfaf8}
.keuze-kaart:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.keuze-kaarttekst{display:block;padding:20px 48px 22px 24px;min-width:0}
.keuze-kaarttekst>strong{display:block;font-size:1.15rem;font-weight:600;line-height:1.3;letter-spacing:-.015em}
.keuze-kaarttekst>span{display:block;font-size:.74rem;line-height:1.6;color:var(--muted);margin-top:6px}
.keuze-pijl{position:absolute;bottom:20px;right:24px;font-size:1.4rem;font-weight:400;line-height:1}
.keuze-productbeeld{display:flex;align-items:center;justify-content:center;height:clamp(152px,23dvh,224px);
  background:#eeedea;width:100%;padding:12px;overflow:hidden}
.keuze-productbeeld svg{display:block;flex:none;height:100%;width:112px;max-width:100%;max-height:100%;overflow:hidden}
.product-glas{fill:#dbe0db;stroke:#8f9c96;stroke-width:1.5;stroke-linejoin:round}
.product-dop{fill:#a4aba8;stroke:#77827d;stroke-width:1.2}
.product-doprand{stroke:#e3e7e4;stroke-width:1.5}
.product-glans{fill:none;stroke:#fff;stroke-opacity:.7;stroke-width:2.5;stroke-linecap:round}
.product-etiket{fill:#f9f8f4;stroke:#bbbdb6;stroke-width:1}
.product-etiketlijn{fill:none;stroke:#a1a79f;stroke-width:2.3;stroke-linecap:square}
.product-metaal{fill:#d1d5d3;stroke:#9ba49f;stroke-width:1.4;stroke-linejoin:round}
.product-metaalrand{fill:none;stroke:#8d9891;stroke-width:1.2}
.keuze-smaken{grid-template-columns:repeat(3,minmax(0,1fr))}
.keuze-smaakbeeld{position:relative;display:block;width:100%;height:clamp(152px,23dvh,224px);overflow:hidden;background:#e9e3df}
.keuze-smaakbeeld img{display:block;width:100%;height:100%;object-fit:cover;object-position:15% 68%;transform:scale(1.65);transform-origin:15% 68%}
.keuze-smaak .keuze-kaarttekst{padding-top:19px;padding-bottom:20px}
.keuze-smaak .keuze-kaarttekst>strong{font-size:1.08rem}
.keuze-ontwerpbeeld{display:grid;place-items:center;width:100%;height:clamp(152px,23dvh,224px);padding:20px;background:#eeedea}
.keuze-labelvoorbeeld,.keuze-labelleeg{display:flex;flex-direction:column;justify-content:center;align-items:center;
  width:min(244px,90%);aspect-ratio:1.82;position:relative;overflow:hidden}
.keuze-labelvoorbeeld{background:var(--keuze-label-bg,#263353);color:#fff}
.keuze-labelvoorbeeld>b{font-size:clamp(.65rem,1.2vw,1rem);letter-spacing:.01em;line-height:1.2}
.keuze-labelvoorbeeld>span{font-size:.50rem;letter-spacing:.10em;margin-top:8px;font-weight:600;color:var(--keuze-label-accent,#f2557e)}
.keuze-labelvoorbeeld>i{position:absolute;bottom:15%;left:0;right:0;height:8px;border-top:5px solid var(--keuze-label-accent,#f2557e);border-bottom:1px solid var(--keuze-label-accent,#f2557e)}
.keuze-labelleeg{background:#f8f7f3;border:1px solid #d3d1ca;color:#85877e}
.keuze-labelleeg>span{font-size:2rem;font-weight:300;line-height:1}
.keuze-onder{display:flex;align-items:center;gap:18px;min-height:62px;padding-top:16px}
.keuze-onder p{margin:0;font-size:.68rem;line-height:1.6;color:var(--muted)}
.keuze-onder .ghost{flex:none;background:transparent;font-size:.70rem;min-height:44px}
.configurator-page .panel-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.panel-heading>div>p{font-size:.69rem;line-height:1.5;color:var(--muted);margin:4px 0 0}
.configurator-page .opnieuw-beginnen{font-size:.62rem;min-height:36px;padding:6px 9px}
.smaak-chips{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.configurator-page .smaak-chips .chip{display:flex;align-items:center;gap:10px;width:100%;padding:5px 10px 5px 5px;min-height:46px}
.smaak-staal{display:block;flex:none;width:34px;height:34px;overflow:hidden;background:var(--lichtgrijs);border-radius:1px}
.smaak-staal img{display:block;width:100%;height:100%;object-fit:cover;object-position:15% 65%;transform:scale(2.8);transform-origin:15% 65%}
.editor-canvas-slot{position:relative}
.leeg-hint{position:absolute;left:12px;right:12px;bottom:12px;width:fit-content;max-width:calc(100% - 24px);
  margin:0 auto;padding:9px 13px;background:rgba(255,255,255,.96);border:1px solid var(--border);
  font-size:.70rem;line-height:1.5;text-align:center;color:var(--muted);pointer-events:none}
@media(max-width:899px){
  .keuze-start{padding:26px max(20px,env(safe-area-inset-right,0px)) 22px max(20px,env(safe-area-inset-left,0px))}
  .keuze-top{margin-bottom:22px;gap:12px}
  .keuze-kicker{font-size:.59rem;letter-spacing:.06em}
  .keuze-voortgang{font-size:.63rem}
  .keuze-stappen{gap:10px;margin-bottom:26px}
  .keuze-stappen li{gap:7px;font-size:.64rem;padding-top:10px}
  .keuze-stappen li>span{width:22px;height:22px;font-size:.60rem}
  .keuze-intro{margin-bottom:22px}
  .keuze-intro h2{font-size:1.8rem;margin-bottom:10px}
  .keuze-intro p{font-size:.77rem}
  .keuze-kaarten{gap:12px}
  .keuze-kaarttekst{padding:16px 34px 18px 16px}
  .keuze-kaarttekst>strong{font-size:1rem}
  .keuze-kaarttekst>span{font-size:.68rem;margin-top:5px}
  .keuze-pijl{right:13px;bottom:19px;font-size:1.15rem}
  .keuze-productbeeld{height:190px;padding:13px}
  .keuze-onder{flex-wrap:wrap;gap:10px;padding-top:18px}
  .keuze-onder p{font-size:.65rem}
  .keuze-onder .ghost{min-width:0;min-height:44px}
  .configurator-page .panel-heading{flex-wrap:nowrap;gap:8px}
  .panel-heading>div>p{display:none}
  .configurator-page .opnieuw-beginnen{min-width:0;min-height:44px;font-size:.60rem}
}
@media(max-width:620px){
  .keuze-shell{margin:auto;width:100%}
  .keuze-smaken{grid-template-columns:minmax(0,1fr)}
  .keuze-smaak{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;min-height:112px}
  .keuze-smaakbeeld{height:112px}
  .keuze-smaak .keuze-kaarttekst{padding:16px 33px 16px 18px}
  .keuze-smaak .keuze-kaarttekst>strong{font-size:1.05rem;line-height:1.4}
  .keuze-smaak .keuze-pijl{bottom:18px}
  .keuze-ontwerpen{grid-template-columns:minmax(0,1fr)}
  .keuze-ontwerp{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:stretch;min-height:142px}
  .keuze-ontwerpbeeld{height:100%;min-height:142px;padding:12px}
  .keuze-labelvoorbeeld,.keuze-labelleeg{width:100%;aspect-ratio:.78}
  .keuze-labelvoorbeeld>b{font-size:.41rem;letter-spacing:-.02em}
  .keuze-labelvoorbeeld>span{font-size:.30rem;letter-spacing:.02em;max-width:90%;text-align:center;line-height:1.5}
  .keuze-labelvoorbeeld>i{height:6px;border-top-width:3px}
  .keuze-ontwerp .keuze-kaarttekst{padding:20px 25px 22px 16px}
  .keuze-ontwerp .keuze-kaarttekst>span{font-size:.68rem;line-height:1.6;margin-top:8px}
  .keuze-ontwerp .keuze-pijl{right:12px;bottom:12px}
}
@media(max-width:380px){
  .keuze-start{padding-left:16px;padding-right:16px}
  .keuze-top{gap:8px}
  .keuze-kicker{font-size:.55rem}
  .keuze-productbeeld{height:158px}
  .keuze-kaarttekst{padding-left:12px}
  .keuze-kaarttekst>strong{font-size:.90rem}
  .keuze-product .keuze-kaarttekst>span{font-size:.61rem}
}
@media print{.leeg-hint{display:none!important}}
.download-acties{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:stretch}
.configurator-page .download-acties .cta{font-size:.65rem;letter-spacing:0;white-space:normal}
.download-acties .ghost{padding:8px 11px;min-height:44px;font-size:.75rem;white-space:nowrap}
.panel-download #deelStatus:empty{display:none}
.panel-download #deelStatus{font-size:.7rem;color:var(--antraciet)}
.panel-download #deelLink{width:100%;box-sizing:border-box;margin-top:8px;padding:8px;font-size:.72rem}
.ontwerp-melding{padding:10px 14px;background:#f3e8df;border-radius:8px;font-size:.85rem;line-height:1.5}
.configurator-page .fld[hidden]{display:none}

/* Contextpaneel (Christian 15-09-2026): bij een selectie alleen de instellingen van dat onderdeel, met Klaar
   om terug te gaan naar het overzicht. Op mobiel staan de verplaatsknoppen dan in het paneel en krijgt het
   product onder de modusbalk de volle hoogte. */
.sel-context[hidden],#panelOverzicht[hidden]{display:none}
.sel-kop{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:2px 0 12px;margin:0 0 14px;background:var(--wit);border-bottom:1px solid var(--border);
  box-shadow:-16px 0 0 var(--wit),16px 0 0 var(--wit)}
.sel-titel{display:flex;flex-direction:column;gap:2px;min-width:0}
.sel-titel span{font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sel-titel strong{font-size:.95rem;font-weight:600;line-height:1.3;color:var(--antraciet);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.configurator-page .sel-klaar{flex:none;width:auto;min-height:40px;padding:8px 18px;font-size:.68rem;letter-spacing:.06em}
.sel-acties{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.configurator-page .sel-acties .ghost.sm{width:100%;font-size:.66rem}
.configurator-page .sel-acties .sel-weg{color:#9d2f28}
.configurator-page .tik-hint{margin:0 0 16px;padding:10px 12px;background:var(--lichtgrijs);border-radius:var(--r);line-height:1.55}
.configurator-page .panel[data-context="selectie"]{grid-template-rows:minmax(0,1fr) auto}
.configurator-page .panel[data-context="selectie"] .panel-heading{display:none}
.sel-gizmo-slot .gizmo{padding:0 0 12px;margin:0 0 12px;background:transparent;border:0;border-bottom:1px solid var(--border);
  border-radius:0;box-shadow:none}
.sel-gizmo-slot .gizmo-name{display:none}
.sel-gizmo-slot .gizmo-buttons{grid-template-columns:repeat(4,minmax(44px,1fr));gap:4px}
@media(max-width:899px){
  .configurator-page .stage{grid-template-rows:auto minmax(0,1fr) auto}
  .configurator-page .gizmo-dock{display:none}
  .configurator-page .panel[data-context="selectie"]{grid-template-rows:minmax(0,1fr)}
  .configurator-page .panel[data-context="selectie"] .panel-download{display:none}
  .configurator-page .stage-modebar{flex-wrap:nowrap;gap:6px}
  .configurator-page .stage-modebar .view-switch button{padding:8px 9px;font-size:.66rem}
  .configurator-page .stage-history{gap:2px}
  .configurator-page .stage-history button{min-width:40px}
}

/* Uitschuifpaneel op mobiel (Christian 15-09-2026: "De render weergave is ook mobiel echt klein"). Dicht: het
   product krijgt de ruimte en onderaan staan alleen Aanpassen en het drukbestand. Open: instellingen, of alleen
   die van het getikte onderdeel. Desktop negeert data-sheet. */
.panel-heading-acties{display:flex;align-items:center;gap:6px}
.configurator-page .sheet-toggle{display:none}
@media(max-width:899px){
  .configurator-page .sheet-toggle{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:.66rem;font-weight:600}
  .configurator-page .configurator[data-sheet="dicht"]{grid-template-rows:minmax(0,1fr) auto}
  .configurator-page .configurator[data-sheet="dicht"] .panel{grid-template-rows:auto auto}
  .configurator-page .configurator[data-sheet="dicht"] .panel-scroll,
  .configurator-page .configurator[data-sheet="dicht"] .opnieuw-beginnen{display:none}
  .configurator-page .configurator[data-sheet="open"]{grid-template-rows:minmax(0,44dvh) minmax(0,1fr)}
  .configurator-page .configurator[data-sheet="open"] .stage{grid-template-rows:auto minmax(0,1fr)}
  .configurator-page .configurator[data-sheet="open"] .stage-bar{display:none}
  .configurator-page .panel-download>p:not([id]){display:none}
}
@media(max-width:899px){
  .configurator-page .panel-heading h1{font-size:.95rem;white-space:nowrap}
  .configurator-page .panel-heading-acties .ghost{white-space:nowrap;padding:6px 9px}
}
@media(max-width:400px){
  .configurator-page .configurator[data-sheet="open"] .panel-heading>div:first-child{display:none}
  .configurator-page .configurator[data-sheet="open"] .panel-heading-acties{width:100%;justify-content:space-between}
}