/* Kerstboom Totaal Service — configurator.
   Alles onder .kbts-scene en met een kbts-prefix, zodat het thema er niet
   doorheen komt en wij niets van het thema omgooien. Kleuren zijn tokens. */

.kbts-scene{
  --kbts-grond:#FAF8F4; --kbts-vlak:#FFFFFF; --kbts-vlak-2:#F7F4EE;
  /* Tekst volgt de huisstijl van het thema als die er is; anders onze eigen
     navy. Zo sluit de configurator aan op de rest van de site zonder dat er
     iets dubbel ingesteld hoeft te worden. Het accent volgt bewust NIET:
     een licht goud achter witte knoptekst wordt onleesbaar. */
  --kbts-tekst:#3A3F52;
  --kbts-sterk:var(--ast-global-color-2, #181830);
  --kbts-dof:#5E6376;
  /* Accent achter witte tekst moet 4,5:1 halen. #A8834F komt op 3,49 en is
     daarom alleen decoratief; #8A6835 haalt 5,11. */
  --kbts-accent:#8A6835; --kbts-accent-diep:#6E5329; --kbts-accent-tekst:#7A5A2B;
  --kbts-accent-licht:#A8834F;
  --kbts-mist:rgba(168,131,79,.22);
  --kbts-lijn:rgba(24,24,48,.18); --kbts-lijn-sterk:rgba(24,24,48,.38);
  --kbts-podium-a:#FFFFFF; --kbts-podium-b:#EFEBE2;
  --kbts-glas:rgba(255,255,255,.84);
  --kbts-schaduw:0 2px 6px rgba(24,24,48,.06),0 24px 60px -30px rgba(24,24,48,.5);
  --kbts-display:"Cormorant Garamond",Garamond,Georgia,serif;
  --kbts-ui:inherit;

  position:relative; min-height:660px; height:82vh; overflow:hidden;
  background:radial-gradient(ellipse at 50% 46%,var(--kbts-podium-a) 0%,var(--kbts-podium-b) 76%);
  color:var(--kbts-tekst); font-family:var(--kbts-ui); line-height:1.6;

  /* Uitbreken uit de contentkolom van het thema. Werkt alleen als geen enkele
     ouder overflow:hidden heeft — vandaar dat de nette route een full-width
     paginatemplate is. Dit is het vangnet. */
  width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
}
/* Geen contain: paint hier — dat gedraagt zich als overflow:hidden en zou de
   breakout juist tegenwerken. Houdt het thema de breakout tegen, dan vult de
   configurator gewoon de kolom waar hij in staat; dat blijft bruikbaar. */
.kbts-scene *,.kbts-scene *::before,.kbts-scene *::after{box-sizing:border-box}

/* Astra en de meeste thema's zetten de shortcode in .entry-content met een
   max-width. Deze twee regels laten de configurator daar doorheen zonder dat
   de rest van de pagina van breedte verandert. */
.entry-content > .kbts-scene,
.wp-block-post-content > .kbts-scene{max-width:100vw}

.kbts-merknaam{
  position:absolute; top:22px; left:0; right:0; text-align:center; z-index:3;
  font-size:10px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--kbts-accent-tekst);
}
.kbts-vloer{
  position:absolute; left:31%; top:76%; transform:translateX(-50%);
  width:min(34%,340px); height:58px; border-radius:50%;
  background:radial-gradient(ellipse,var(--kbts-mist),transparent 72%); filter:blur(8px);
}
.kbts-doek{
  position:absolute; left:31%; top:4%; transform:translateX(-50%);
  width:min(56%,540px); height:84%; z-index:2;
}
.kbts-doek svg{width:100%;height:100%;display:block}

.kbts-maatstok{
  position:absolute; left:5%; top:12%; bottom:22%; z-index:3;
  display:flex; align-items:center; justify-content:center; width:52px;
}
.kbts-maatstok .kbts-lijn{
  position:absolute; top:0; bottom:0; left:50%; width:1px; background:var(--kbts-lijn-sterk);
}
.kbts-maatstok .kbts-lijn::before,.kbts-maatstok .kbts-lijn::after{
  content:""; position:absolute; left:-7px; width:15px; height:1px; background:var(--kbts-lijn-sterk);
}
.kbts-maatstok .kbts-lijn::before{top:0} .kbts-maatstok .kbts-lijn::after{bottom:0}
.kbts-maatstok .kbts-cm{
  position:relative; z-index:1; background:var(--kbts-grond); padding:10px 0;
  font-family:var(--kbts-display); font-size:1.35rem; color:var(--kbts-accent-tekst);
  writing-mode:vertical-rl; letter-spacing:.12em;
}
.kbts-cm.kbts-puls{animation:kbtsPuls .45s ease}
@keyframes kbtsPuls{0%{transform:scale(1);opacity:.45}55%{transform:scale(1.14)}100%{transform:scale(1);opacity:1}}

/* paneel */
.kbts-paneel{
  position:absolute; right:3%; top:50%; transform:translateY(-50%); z-index:10;
  width:min(38%,380px); max-height:92%; display:flex; flex-direction:column;
  background:var(--kbts-glas); backdrop-filter:blur(18px);
  border:1px solid var(--kbts-lijn); border-radius:4px; box-shadow:var(--kbts-schaduw);
}
.kbts-rijen{overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:0}
.kbts-laden,.kbts-fout{padding:22px 18px;font-size:.9rem;color:var(--kbts-dof);margin:0}
.kbts-fout{color:#9B382A}

.kbts-rij{border-top:1px solid var(--kbts-lijn)}
.kbts-rij:first-child{border-top:0}
.kbts-rijkop{
  width:100%; background:none; border:0; font:inherit; color:var(--kbts-tekst);
  display:flex; align-items:center; gap:12px; padding:12px 16px; cursor:pointer;
  text-align:left; transition:background .22s;
}
.kbts-rijkop:hover{background:var(--kbts-mist)}
.kbts-rijkop:focus-visible{outline:2px solid var(--kbts-accent);outline-offset:-2px}
.kbts-lab{
  font-size:9.5px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--kbts-dof); flex:none; width:88px;
}
.kbts-waarde{
  font-family:var(--kbts-display); font-size:1.02rem; color:var(--kbts-sterk);
  flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.3;
}
.kbts-pijl{
  flex:none; width:9px; height:9px; border-right:1.5px solid var(--kbts-dof);
  border-bottom:1.5px solid var(--kbts-dof);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .28s;
}
.kbts-open .kbts-pijl{transform:rotate(225deg) translate(-2px,-2px)}
.kbts-open .kbts-lab{color:var(--kbts-accent-tekst)}

.kbts-lade{display:none;padding:0 14px 14px}
.kbts-open .kbts-lade{display:block}
.kbts-keuzerij{display:flex;flex-wrap:wrap;gap:7px}
.kbts-opt{
  font:inherit; font-size:.83rem; cursor:pointer; color:var(--kbts-tekst);
  background:var(--kbts-vlak); border:1px solid var(--kbts-lijn); border-radius:3px;
  padding:7px 11px; display:flex; align-items:center; gap:7px;
  transition:border-color .25s,background .25s,color .25s;
}
.kbts-opt:hover{border-color:var(--kbts-lijn-sterk)}
.kbts-opt:focus-visible{outline:2px solid var(--kbts-accent);outline-offset:2px}
.kbts-opt[aria-pressed="true"]{
  border-color:var(--kbts-accent); background:var(--kbts-mist); color:var(--kbts-sterk);
}
.kbts-maten .kbts-opt{padding:8px 10px;gap:6px}
.kbts-bij{font-size:.74rem;color:var(--kbts-dof);font-variant-numeric:tabular-nums}
.kbts-opt[aria-pressed="true"] .kbts-bij{color:var(--kbts-accent-tekst)}
.kbts-opaanvraag .kbts-bij{font-style:italic}
.kbts-swatch{
  width:13px;height:13px;border-radius:50%;flex:none;
  border:1px solid var(--kbts-lijn-sterk);
}

/* voet */
.kbts-voet{
  flex:none; border-top:1px solid var(--kbts-lijn-sterk);
  padding:13px 16px 15px; background:var(--kbts-vlak-2);
}
.kbts-pv{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.kbts-bl{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--kbts-dof)}
.kbts-bv{
  font-family:var(--kbts-display); font-size:1.7rem; line-height:1.15;
  color:var(--kbts-sterk); font-variant-numeric:tabular-nums;
}
.kbts-bv.kbts-klein{font-size:1.15rem}
.kbts-btw{
  font-size:.74rem;color:var(--kbts-dof);text-align:right;margin-top:2px;
  font-variant-numeric:tabular-nums;
}
.kbts-toelicht{font-size:.72rem;color:var(--kbts-dof);line-height:1.4;margin:5px 0 11px}
.kbts-uitgangen{display:flex;gap:8px}
.kbts-knop{
  flex:1; font:inherit; font-size:.74rem; letter-spacing:.11em; text-transform:uppercase;
  padding:11px 10px; border-radius:2px; cursor:pointer;
  border:1px solid var(--kbts-accent); transition:background .28s,color .28s,border-color .28s;
}
.kbts-primair{background:var(--kbts-accent);color:#fff;font-weight:500}
.kbts-primair:hover:not([disabled]){background:var(--kbts-accent-diep);border-color:var(--kbts-accent-diep)}
.kbts-tweede{background:none;color:var(--kbts-accent-tekst);border-color:var(--kbts-accent-tekst)}
.kbts-tweede:hover{background:var(--kbts-mist)}
.kbts-knop:focus-visible{outline:2px solid var(--kbts-sterk);outline-offset:2px}
.kbts-knop[disabled]{opacity:.35;cursor:not-allowed}
.kbts-vrijblijvend{
  margin:9px 0 0;font-size:.7rem;line-height:1.45;color:var(--kbts-dof);text-align:center;
}

/* onder de 900 px zakt het paneel onder het beeld */
@media(max-width:900px){
  .kbts-scene{height:auto;min-height:0;padding-bottom:0}
  .kbts-doek{position:relative;left:auto;top:auto;transform:none;margin:0 auto;
             height:44vh;min-height:250px;width:92%}
  .kbts-paneel{position:relative;right:auto;top:auto;transform:none;width:auto;
               max-height:none;margin:0 12px 16px;backdrop-filter:none;background:var(--kbts-vlak)}
  .kbts-rijen{overflow-y:visible}
  .kbts-maatstok{position:static;writing-mode:horizontal-tb;text-align:center;margin-top:4px}
  .kbts-maatstok .kbts-cm{writing-mode:horizontal-tb}
  .kbts-maatstok .kbts-lijn{display:none}
  .kbts-merknaam{position:static;padding-top:18px}
}
@media (prefers-reduced-motion:reduce){.kbts-scene *{animation:none!important;transition:none!important}}

/* Sfeerfoto in plaats van de tekening. Crossfade zodat het wisselen rustig
   oogt; zonder dat springt het beeld hard om. */
.kbts-doek img.kbts-foto{
  width:100%; height:100%; object-fit:contain; display:block;
  transition:opacity .3s ease;
}
.kbts-doek img.kbts-foto.kbts-wisselt{opacity:0}
@media (prefers-reduced-motion:reduce){
  .kbts-doek img.kbts-foto{transition:none}
}