/* KNOBS - Konfigurator VECTIS 3D */
.vectis-cfg{
  --vc-brass:#b08d57; --vc-ink:#1b1a18; --vc-line:#e6e2da; --vc-surface:#f7f6f3; --vc-muted:#6b6660;
  display:grid; grid-template-columns:1.5fr 1fr; gap:2rem; align-items:start;
  margin:1rem 0; font-size:15px; color:var(--vc-ink);
}
.vectis-cfg[data-loading] .vcfg-boot,
.vectis-cfg .vcfg-boot{ padding:3rem 1rem; text-align:center; color:var(--vc-muted) }

/* Scena 3D */
.vcfg-stage{
  position:sticky; top:84px; aspect-ratio:1/1; min-height:0;
  background:radial-gradient(120% 120% at 50% 22%, #fbfaf8 0%, #efece6 68%, #e2ded5 100%);
  border:1px solid var(--vc-line); border-radius:6px; overflow:hidden;
}
.vcfg-canvas{ display:block; width:100%; height:100%; cursor:grab }
.vcfg-canvas:active{ cursor:grabbing }
.vcfg-hint{
  position:absolute; left:0; right:0; bottom:12px; text-align:center; font-size:12px;
  color:var(--vc-muted); pointer-events:none; opacity:.75;
}
.vcfg-stage.is-err::after{
  content:"Nie udało się wczytać modelu 3D"; position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; color:#b00; font-size:14px; background:rgba(255,255,255,.6);
}
/* Splash brandowy (chwytek) na pierwsze ladowanie */
.vcfg-splash{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.9rem; background:radial-gradient(120% 120% at 50% 40%, #fbfaf8 0%, #efece6 70%, #e2ded5 100%);
  z-index:3; transition:opacity .4s ease; pointer-events:none;
}
.vcfg-splash.is-gone{ opacity:0 }
.vcfg-splash__logo{ width:110px; height:auto; animation:vcfg-splash-pulse 1.6s ease-in-out infinite }
.vcfg-splash__txt{ font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--vc-muted) }
@keyframes vcfg-splash-pulse{ 0%,100%{ transform:scale(1); opacity:.9 } 50%{ transform:scale(1.06); opacity:1 } }
@media(prefers-reduced-motion:reduce){ .vcfg-splash__logo{ animation:none } }

.vcfg-spinner{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none }
.vcfg-spinner[hidden]{ display:none !important }
.vcfg-spinner span{ width:38px; height:38px; border:3px solid var(--vc-line); border-top-color:var(--vc-brass); border-radius:50%; animation:vcfg-spin .8s linear infinite }
@keyframes vcfg-spin{ to{ transform:rotate(360deg) } }

/* Panel sterowania */
.vcfg-panel{ display:flex; flex-direction:column }
.vcfg-title{ margin:0 0 .25rem; font-size:1.5rem; line-height:1.15 }
.vcfg-lead{ margin:0 0 1rem; color:var(--vc-muted); font-size:.95rem; line-height:1.5 }
.vcfg-hide{ display:none !important }

/* Pasek gorny: kostka (losowy zestaw) */
.vcfg-toprow{ display:flex; align-items:center; gap:.7rem; margin:0 0 1.3rem; padding:.7rem .85rem; background:var(--vc-surface); border:1px solid var(--vc-line); border-radius:6px }
.vcfg-toprow__hint{ font-size:.85rem; color:var(--vc-muted) }
.vcfg-dice{
  appearance:none; cursor:pointer; display:inline-flex; align-items:center; gap:.45rem; margin-left:auto;
  padding:.5rem .85rem; background:var(--vc-ink); color:#fff; border:1px solid var(--vc-ink); border-radius:4px;
  font:inherit; font-size:.85rem; font-weight:600; transition:background .15s, transform .15s;
}
.vcfg-dice:hover{ background:#000 }
.vcfg-dice:active{ transform:translateY(1px) }
.vcfg-dice svg{ width:16px; height:16px; transition:transform .5s cubic-bezier(.2,.9,.2,1) }
.vcfg-dice.is-rolling svg{ transform:rotate(360deg) }
@media(max-width:520px){ .vcfg-dice span{ display:none } .vcfg-dice{ padding:.5rem .6rem } }
.vcfg-group{ margin:0 0 1.15rem }
.vcfg-lbl{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; color:var(--vc-muted); margin:0 0 .5rem; font-weight:600 }

/* Selektor serii: wyrozniony (brass gdy aktywny) */
.vcfg-group[data-role="g-series"] .vcfg-seg__btn.is-on{ background:var(--vc-brass); color:#fff }

/* Segmenty (orientacja / rozmiar) */
.vcfg-seg{ display:inline-flex; gap:0; border:1px solid var(--vc-line); border-radius:4px; overflow:hidden; background:#fff }
.vcfg-seg__btn{
  appearance:none; border:0; background:#fff; color:var(--vc-ink); padding:.5rem .95rem; cursor:pointer;
  font:inherit; font-size:.9rem; border-right:1px solid var(--vc-line); transition:background .15s, color .15s;
}
.vcfg-seg__btn:last-child{ border-right:0 }
.vcfg-seg__btn:hover{ background:var(--vc-surface) }
.vcfg-seg__btn.is-on{ background:var(--vc-ink); color:#fff }

/* Wymiary ramki (readout pod wyborem rozmiaru) */
.vcfg-dims{ margin:.55rem 0 0; font-size:.8rem; color:var(--vc-muted); letter-spacing:.01em }
.vcfg-dims::before{ content:""; display:inline-block; width:14px; height:8px; margin-right:.4rem; vertical-align:middle; border:1px solid var(--vc-muted); border-radius:2px; opacity:.7 }

/* Uklady modulow */
.vcfg-layouts{ display:flex; flex-wrap:wrap; gap:.5rem }
.vcfg-layout{
  appearance:none; display:inline-flex; gap:3px; padding:.4rem .5rem; background:#fff; cursor:pointer;
  border:1px solid var(--vc-line); border-radius:4px; transition:border-color .15s, box-shadow .15s;
}
.vcfg-layout:hover{ border-color:var(--vc-brass) }
.vcfg-layout.is-on{ border-color:var(--vc-ink); box-shadow:0 0 0 1px var(--vc-ink) }
/* Orientacja pionowa: chipy ukladu rysowane w slupku (respektuje orientacje) */
.vcfg-layouts.is-vertical{ align-items:flex-start }
.vcfg-layouts.is-vertical .vcfg-layout{ flex-direction:column }
.vcfg-chip{
  display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:26px; padding:0 5px;
  border-radius:3px; font-size:11px; font-weight:700; color:#fff; letter-spacing:.02em;
}
.vcfg-chip--m1{ background:#5b7c99 }   /* Wlacznik */
.vcfg-chip--m2{ background:#8a7145 }   /* Gniazdo */
.vcfg-chip--m3{ background:#6f8f6a }   /* USB / multimedia */
.vcfg-empty{ color:var(--vc-muted); font-size:.9rem; margin:0 }

/* Funkcje modulow */
.vcfg-funcs{ display:flex; flex-direction:column; gap:.4rem }
.vcfg-func{ display:flex; align-items:center; gap:.55rem }
.vcfg-func .vcfg-chip{ flex:0 0 auto }
.vcfg-func__pos{ flex:0 0 auto; font-size:.78rem; color:var(--vc-muted); min-width:64px }
.vcfg-func__sel{
  flex:1 1 auto; min-width:0; appearance:none; -webkit-appearance:none; font:inherit; font-size:.85rem;
  padding:.42rem 2rem .42rem .6rem; background:#fff; color:var(--vc-ink);
  border:1px solid var(--vc-line); border-radius:4px; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--vc-muted) 50%),linear-gradient(135deg,var(--vc-muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.vcfg-func__sel:hover{ border-color:var(--vc-brass) }
.vcfg-func__sel:focus{ outline:none; border-color:var(--vc-ink); box-shadow:0 0 0 1px var(--vc-ink) }
.vcfg-func__na{ flex:1 1 auto; font-size:.85rem; color:var(--vc-muted) }
.vcfg-sum__mods strong{ line-height:1.5 }

/* Wykonczenia */
.vcfg-finishes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:.55rem }
.vcfg-fin{
  appearance:none; display:flex; align-items:center; gap:.55rem; padding:.45rem .55rem; background:#fff; cursor:pointer;
  border:1px solid var(--vc-line); border-radius:4px; text-align:left; transition:border-color .15s;
}
.vcfg-fin:hover{ border-color:var(--vc-brass) }
.vcfg-fin.is-on{ border-color:var(--vc-ink); box-shadow:0 0 0 1px var(--vc-ink) }
.vcfg-fin__sw{ width:22px; height:22px; border-radius:50%; border:1px solid rgba(0,0,0,.12); flex:0 0 auto }
/* Realne foto czesci (ramka/dzwigienka/plakietka) jako probnik */
.vcfg-fin__sw--photo{ width:32px; height:32px; background-size:cover; background-position:center; background-color:#fff }
/* Podglad probnika (hover / przytrzymanie) */
.vcfg-swpv{ position:fixed; z-index:99999; pointer-events:none; background:#fff; border:1px solid var(--vc-line);
  border-radius:10px; box-shadow:0 12px 32px rgba(27,26,24,.2); padding:6px; opacity:0; transform:scale(.92);
  transition:opacity .12s ease, transform .12s ease }
.vcfg-swpv.is-on{ opacity:1; transform:scale(1) }
.vcfg-swpv img{ display:block; width:156px; height:156px; object-fit:cover; border-radius:6px }
.vcfg-swpv__lbl{ display:block; text-align:center; font-size:.78rem; color:var(--vc-ink); margin-top:5px; font-weight:600 }
.vcfg-fin__lbl{ font-size:.82rem; line-height:1.2 }

/* Podsumowanie */
.vcfg-summary{ margin:.4rem 0 1rem; padding:.9rem 1rem; background:var(--vc-surface); border:1px solid var(--vc-line); border-radius:4px }
.vcfg-sum__row{ display:flex; justify-content:space-between; gap:1rem; padding:.28rem 0; font-size:.9rem }
.vcfg-sum__row span{ color:var(--vc-muted) }
.vcfg-sum__row strong{ text-align:right }
.vcfg-sum__price strong{ color:var(--vc-brass) }

/* Przycisk */
.vcfg-add{
  appearance:none; border:0; width:100%; padding:.95rem 1.2rem; background:var(--vc-brass); color:#fff;
  border-radius:4px; font:inherit; font-weight:600; font-size:1rem; cursor:pointer; transition:background .18s;
}
.vcfg-add:hover{ background:#96784a }
.vcfg-add.is-added{ background:var(--vc-ink) }
.vcfg-note{ margin:.8rem 0 0; font-size:.72rem; color:var(--vc-muted); line-height:1.4 }

/* Link do konfiguracji (share) */
.vcfg-share{ margin-top:1.2rem; padding-top:1.1rem; border-top:1px solid var(--vc-line) }
.vcfg-share__row{ display:flex; gap:.5rem }
.vcfg-share__url{
  flex:1 1 auto; min-width:0; font:inherit; font-size:.8rem; padding:.55rem .65rem;
  border:1px solid var(--vc-line); border-radius:4px; background:var(--vc-surface); color:var(--vc-ink);
  text-overflow:ellipsis;
}
.vcfg-share__url:focus{ outline:none; border-color:var(--vc-ink); box-shadow:0 0 0 1px var(--vc-ink) }
.vcfg-share__btn{
  flex:0 0 auto; appearance:none; cursor:pointer; padding:.55rem 1rem; border:1px solid var(--vc-ink);
  background:var(--vc-ink); color:#fff; border-radius:4px; font:inherit; font-size:.85rem; font-weight:600; transition:background .15s;
}
.vcfg-share__btn:hover{ background:#000 }
.vcfg-share__btn.is-copied{ background:var(--vc-brass); border-color:var(--vc-brass) }
.vcfg-share__hint{ margin:.5rem 0 0; font-size:.72rem; color:var(--vc-muted); line-height:1.4 }

@media(max-width:900px){
  .vectis-cfg{ grid-template-columns:1fr; gap:1.2rem }
  /* Stage przykleja sie tuz pod realnym naglowkiem (mierzonym JS-em w --knobs-header-h),
     zamiast sztywnych 84px - trzyma sie gornej krawedzi zamiast zjezdzac za nisko. */
  .vcfg-stage{ min-height:340px; top:calc(var(--knobs-header-h, 64px) + .4rem) }
}

/* ---------------- Tryb SHOWCASE (embed w banerze DSG) ---------------- */
/* Tlo body = kolor gradientu sceny, zeby nie bylo widac zadnego szwu/roznicy koloru. */
html.vcfg-showcase, body.vcfg-showcase { margin:0; padding:0; height:100%; overflow:hidden; background:#efece6; }
.vcfg-showcase .vectis-cfg { grid-template-columns:1fr; gap:0; height:100vh; margin:0; padding:0; }
.vcfg-showcase .vcfg-panel { display:none !important; }
/* KRYTYCZNE: kasujemy aspect-ratio:1/1 i sticky - scena ma wypelnic caly kafel iframe. */
.vcfg-showcase .vcfg-stage {
  position:static; top:auto; aspect-ratio:auto;
  width:100%; height:100vh; min-height:100vh;
  border:0; border-radius:0;
}
.vcfg-showcase .vcfg-canvas { width:100%; height:100vh; }