/* Kojcowo — konfigurator (samowystarczalny, prefiks kjc-) */
.kjc-wrap{
  --ink:#18170f;--ink-soft:#4c4a3f;--cream:#f5f3ec;--cream-2:#eae5d8;--paper:#fffdf8;
  --brand:#2f7d4f;--brand-dark:#245f3c;--brand-2:#1e4d33;--brand-soft:#edf4ef;--brand-tint:#d9e8de;
  --amber:#e2892f;--wood:#a9662f;--line:#e2ddce;--shadow-sm:0 2px 10px rgba(30,45,30,.06);--shadow-md:0 16px 44px rgba(30,45,30,.14);
  --r:16px;--r-lg:24px;--ff-d:'Fraunces',Georgia,serif;--ff-b:'Manrope',system-ui,sans-serif;
  font-family:var(--ff-b);color:var(--ink);max-width:1240px;margin:0 auto;padding:8px 0 90px
}
.kjc-wrap *{box-sizing:border-box}
.kjc-wrap h1,.kjc-wrap h2,.kjc-wrap h3{font-family:var(--ff-d);font-weight:600;line-height:1.1;letter-spacing:-.01em;margin:0}
.kjc-wrap img{max-width:100%;display:block}
.kjc-pill{display:inline-flex;align-items:center;gap:.45em;background:var(--brand-soft);border:1px solid var(--brand-tint);border-radius:100px;padding:5px 13px;font-size:.8rem;font-weight:700;color:var(--brand-dark)}
.kjc-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--ff-b);font-weight:700;font-size:1rem;border:none;border-radius:100px;padding:16px 28px;cursor:pointer;transition:.15s}
.kjc-btn-primary{background:var(--brand);color:#fff;box-shadow:0 10px 24px rgba(47,125,79,.32);width:100%}
.kjc-btn-primary:hover{background:var(--brand-dark)}
.kjc-btn-primary:disabled{opacity:.6;cursor:default}

.kjc-intro{padding:20px 0 6px}
.kjc-intro h1{font-size:clamp(2rem,4vw,3rem);margin:14px 0 0}
.kjc-intro p{color:var(--ink-soft);font-size:1.08rem;max-width:640px;margin-top:12px}

/* Ogólny postęp konfiguracji — przypięty pod nagłówkiem strony (75px), aktualizowany podczas
   przewijania kroków (patrz configurator.js initProgress). Nagłówek ma z-index:60, więc pasek
   dostaje niższy z-index:55, żeby zawsze chować się POD nim, nigdy na nim. */
.kjc-progress{position:sticky;top:75px;z-index:55;display:flex;align-items:center;gap:14px;
  margin-top:18px;padding:12px 16px;border-radius:var(--r);
  background:rgba(245,243,236,.92);backdrop-filter:blur(10px);border:1px solid var(--line)}
.kjc-progress-track{flex:1;display:flex;gap:5px}
.kjc-progress-seg{flex:1;height:5px;border-radius:100px;background:var(--cream-2);transition:background .3s,transform .3s}
.kjc-progress-seg.is-done{background:var(--brand)}
.kjc-progress-seg.is-current{background:var(--brand);transform:scaleY(1.7)}
.kjc-progress-label{font-family:var(--ff-b);font-weight:700;font-size:.8rem;color:var(--ink-soft);white-space:nowrap}
.kjc-progress-label #kjcProgressStep{color:var(--ink)}

.kjc-cfg{display:grid;grid-template-columns:1fr 400px;gap:34px;padding-top:24px;align-items:start}
/* Prawa kolumna musi rozciągać się na wysokość lewej (dłuższej), inaczej sticky
   nie ma "zapasu miejsca", by trzymać się góry podczas przewijania kroków. */
.kjc-cfg > aside{align-self:stretch}
@media(max-width:1000px){.kjc-cfg{grid-template-columns:1fr}.kjc-cfg > aside{align-self:auto}}

.kjc-steps{display:flex;flex-direction:column;gap:18px}
.kjc-step{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 26px;box-shadow:var(--shadow-sm)}
.kjc-sh{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.kjc-n{width:32px;height:32px;border-radius:50%;background:var(--brand-soft);color:var(--brand-dark);display:grid;place-items:center;font-weight:800;font-size:.9rem;flex:0 0 auto;border:1.5px solid var(--brand-tint)}
.kjc-sh h3{font-size:1.22rem}
.kjc-hint{margin-left:auto;font-size:.8rem;color:var(--ink-soft);font-weight:600}

.kjc-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kjc-opts.two{grid-template-columns:repeat(2,1fr)}
.kjc-opts.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:520px){.kjc-opts,.kjc-opts.two,.kjc-opts.four{grid-template-columns:1fr 1fr}}
.kjc-opt{position:relative;border:1.5px solid var(--line);background:var(--cream);border-radius:14px;padding:16px 14px;cursor:pointer;transition:.14s;text-align:left}
.kjc-opt:hover{border-color:var(--brand);transform:translateY(-2px)}
.kjc-opt.sel{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 3px rgba(47,125,79,.12)}
.kjc-opt.sel::after{content:"✓";position:absolute;top:10px;right:12px;width:20px;height:20px;background:var(--brand);color:#fff;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:800}
.kjc-opt b{font-family:var(--ff-d);font-size:1.02rem;font-weight:600;display:block}
.kjc-opt small{display:block;font-size:.78rem;color:var(--ink-soft);margin-top:3px;line-height:1.35}
.kjc-plus{display:inline-block;margin-top:8px;font-size:.76rem;font-weight:800;color:var(--brand-dark)}
.kjc-opt.dis{opacity:.5;cursor:not-allowed;pointer-events:none}

.kjc-ral{margin-top:16px;padding-top:16px;border-top:1px dashed var(--line);display:none}
.kjc-ral.show{display:block}
.kjc-ral-lbl{font-size:.8rem;font-weight:800;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}
.kjc-swatches{display:flex;gap:10px;flex-wrap:wrap}
.kjc-sw{width:42px;height:42px;border-radius:10px;cursor:pointer;border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);position:relative;transition:transform .12s}
.kjc-sw:hover{transform:scale(1.08)}
.kjc-sw.sel{border-color:var(--ink)}
.kjc-sw.sel::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:.9rem;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.kjc-ral-name{margin-top:10px;font-size:.85rem;font-weight:700;color:var(--ink-soft)}
.kjc-ral-custom{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.kjc-ral-custom label{display:block;font-size:.8rem;font-weight:700;color:var(--ink-soft);margin-bottom:8px}
.kjc-ral-custom-row{display:flex;align-items:center;gap:10px}
.kjc-ral-custom-swatch{width:38px;height:38px;border-radius:9px;flex:0 0 auto;background:transparent;border:2px dashed var(--line);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.kjc-ral-custom-row input{flex:1;min-width:0;padding:11px 14px;border:1.5px solid var(--line);border-radius:10px;font-size:.92rem;font-family:inherit;background:var(--paper)}
.kjc-ral-custom-row input:focus{outline:none;border-color:var(--brand)}
.kjc-ral-custom small{display:block;margin-top:8px;color:var(--ink-soft);font-size:.78rem;line-height:1.4}

.kjc-namewrap{margin-top:16px;display:none}
.kjc-namewrap.show{display:block}
.kjc-namewrap input{width:100%;max-width:280px;padding:13px 16px;border:1.5px solid var(--line);border-radius:12px;font-family:var(--ff-b);font-size:1rem;background:var(--cream)}
.kjc-namewrap input:focus{outline:none;border-color:var(--brand)}

.kjc-promise{background:var(--brand-2);color:#e7f0e9;border-radius:var(--r-lg);padding:22px 26px;display:flex;align-items:center;gap:16px}
.kjc-promise svg{width:38px;height:38px;flex:0 0 auto;color:#a9e0bd}
.kjc-promise b{font-family:var(--ff-d);font-size:1.1rem;color:#fff;display:block}
.kjc-promise span{font-size:.88rem;color:#bcd6c4}

.kjc-panel{position:sticky;top:24px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-md);overflow:hidden}
.kjc-tabs{display:flex;gap:6px;padding:12px 12px 0}
.kjc-tab{flex:1;border:1.5px solid var(--line);background:var(--cream);border-radius:100px;padding:9px 12px;font-family:var(--ff-b);font-weight:700;font-size:.84rem;cursor:pointer;color:var(--ink-soft)}
.kjc-tab.active{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-dark)}
.kjc-live{width:100%;height:100%;padding:6px 10px 0;display:flex;flex-direction:column}
.kjc-live-visual{flex:1;min-height:0;position:relative}
.kjc-live-visual svg{width:100%;height:auto;display:block}
.kjc-3d-canvas{position:absolute;inset:0;width:100% !important;height:100% !important;cursor:grab;touch-action:none}
.kjc-3d-canvas:active{cursor:grabbing}
.kjc-live-cap{text-align:center;font-size:.78rem;font-weight:700;color:var(--ink-soft);padding:2px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}
.kjc-preview{position:relative;aspect-ratio:4/3;background:radial-gradient(120% 120% at 50% 0,#fff,#ece5d5);display:grid;place-items:center;padding-bottom:38px}
.kjc-preview img{width:100%;height:100%;object-fit:contain;padding:10px}
.kjc-tagline{position:absolute;top:12px;left:12px;background:rgba(24,23,15,.72);color:#fff;font-size:.7rem;font-weight:700;padding:5px 11px;border-radius:100px}
.kjc-dots{position:absolute;bottom:12px;left:12px;display:flex;gap:8px}
.kjc-dot{display:flex;align-items:center;gap:6px;background:rgba(255,253,248,.92);border-radius:100px;padding:4px 10px 4px 4px;font-size:.72rem;font-weight:700;box-shadow:var(--shadow-sm)}
.kjc-dot .c{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.kjc-panel-body{padding:22px 24px 24px}
.kjc-line{font-family:var(--ff-d);font-size:1.35rem;font-weight:600}
.kjc-line small{font-family:var(--ff-b);display:block;font-size:.8rem;color:var(--ink-soft);font-weight:600;margin-top:2px}
.kjc-sumlist{list-style:none;margin:16px 0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:.88rem}
.kjc-sumlist li{display:flex;justify-content:space-between;gap:12px;color:var(--ink-soft)}
.kjc-sumlist li b{color:var(--ink);font-weight:700;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.kjc-row-price{font-weight:700;color:var(--brand-dark);font-size:.8rem}
.kjc-price-block{border-top:1px solid var(--line);padding-top:16px}
.kjc-price-row{display:flex;align-items:baseline;justify-content:space-between}
.kjc-lab{font-weight:700;color:var(--ink-soft);font-size:.9rem}
.kjc-price-now{font-family:var(--ff-d);font-size:2.3rem;font-weight:600}
.kjc-rata{font-size:.85rem;color:var(--ink-soft);margin-top:2px;text-align:right}
.kjc-term{display:flex;align-items:center;gap:10px;background:var(--brand-soft);border:1px solid var(--brand-tint);border-radius:12px;padding:12px 14px;margin:16px 0;font-size:.9rem;font-weight:600;color:var(--brand-dark)}
.kjc-term svg{width:20px;height:20px;flex:0 0 auto}
.kjc-trust{display:flex;justify-content:center;gap:16px;margin-top:16px;flex-wrap:wrap;font-size:.76rem;color:var(--ink-soft);font-weight:600}
.kjc-trust span{display:flex;align-items:center;gap:5px}
.kjc-trust svg{width:15px;height:15px;color:var(--brand)}

.kjc-mbar{position:fixed;bottom:0;left:0;right:0;z-index:70;background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(30,45,30,.12);padding:10px 18px;display:none;align-items:center;gap:14px}
.kjc-mp{font-family:var(--ff-d);font-size:1.3rem;font-weight:600}
.kjc-mp small{display:block;font-family:var(--ff-b);font-size:.68rem;color:var(--ink-soft);font-weight:600}
.kjc-mbar .kjc-btn{flex:1;padding:14px}
@media(max-width:1000px){.kjc-mbar{display:flex}.kjc-panel{position:static}.kjc-wrap{padding-bottom:78px}}

.kjc-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:14px 22px;border-radius:100px;font-weight:700;box-shadow:var(--shadow-md);opacity:0;transition:.25s;z-index:120}
.kjc-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Regionalna dostawa */
.kjc-region-box{background:#f7faf7;border:1px solid #dbe8de;border-radius:14px;padding:18px}
.kjc-region-box label{display:block;margin-bottom:8px;color:#18372a}
.kjc-region-select{width:100%;min-height:50px;border:1px solid #b9cec0;border-radius:10px;background:#fff;padding:0 14px;font:inherit;color:#18372a}
.kjc-region-select:focus{outline:3px solid rgba(64,143,91,.18);border-color:#408f5b}
.kjc-delivery-info{margin-top:14px;padding:13px 14px;border-radius:10px;background:#fff;border-left:4px solid #408f5b;line-height:1.55}
.kjc-free-install{margin-top:12px;padding:12px 14px;border-radius:10px;background:#eaf7ee;color:#174c2c}
.kjc-free-install strong{color:#147a3a}
.kojcowo-transport-info th,.kojcowo-transport-info td{vertical-align:top}



/* Wybór strony ściany i kolorów drewna w konfiguratorze */
.kjc-extra-choice{
  margin-top:14px;
  padding:16px 18px;
  border:1px solid #ded8ca;
  border-radius:14px;
  background:#fff;
}
.kjc-extra-choice[hidden]{display:none!important}
.kjc-extra-choice label{display:block;margin-bottom:9px}
.kjc-extra-choice label b{display:block;font-size:.95rem}
.kjc-extra-choice label small{display:block;margin-top:3px;color:#6f6b62}
.kjc-extra-choice select{
  width:100%;
  min-height:48px;
  padding:10px 42px 10px 13px;
  border:1px solid #d8d2c4;
  border-radius:10px;
  background:#fff;
  color:inherit;
  font:inherit;
}


/* Widoczne kafelki kolorów drewna 901–918 */
.kjc-wood-select{position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;height:1px!important}
.kjc-wood-palette{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:6px}
.kjc-wood-tile{appearance:none;border:2px solid #ded8ca;border-radius:12px;background:#fff;padding:7px;cursor:pointer;text-align:left;color:#292720;transition:border-color .15s,box-shadow .15s,transform .15s}
.kjc-wood-tile:hover{transform:translateY(-1px);border-color:#8eaa95}
.kjc-wood-tile.is-selected{border-color:#2d8a50;box-shadow:0 0 0 2px rgba(45,138,80,.18)}
.kjc-wood-sample{display:block;height:52px;border-radius:7px;background:var(--wood-color);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.kjc-wood-code{display:block;margin-top:7px;font-weight:800;font-size:14px}
.kjc-wood-name{display:block;margin-top:2px;font-size:12px;line-height:1.25;color:#69655c}
@media(max-width:600px){.kjc-wood-palette{grid-template-columns:repeat(2,minmax(0,1fr))}.kjc-wood-sample{height:44px}}

.kjc-no-paint .kjc-wood-sample{background:repeating-linear-gradient(135deg,#f5f2e9 0,#f5f2e9 9px,#ded8ca 9px,#ded8ca 18px)}


/* Dach wyciszony — informacja z ilustracją */
.kjc-roof-info{position:relative;margin-top:12px;margin-left:calc(50% + 8px);width:calc(50% - 8px)}
.kjc-roof-info summary{display:inline-flex;align-items:center;gap:6px;color:#216b45;font-weight:800;cursor:pointer;list-style:none;padding:8px 12px;border:1px solid #cfe2d7;border-radius:999px;background:#eef7f1}
.kjc-roof-info summary::-webkit-details-marker{display:none}
.kjc-roof-pop{display:none;position:absolute;z-index:30;left:0;top:calc(100% + 8px);width:min(560px,calc(100vw - 48px));padding:22px 48px 18px 18px;background:#fff;border:1px solid #ded8c9;border-radius:18px;box-shadow:0 16px 40px rgba(35,45,38,.18);grid-template-columns:190px 1fr;gap:16px;align-items:center}
.kjc-roof-info[open] .kjc-roof-pop{display:grid}
.kjc-roof-close{position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;padding:0;border:1px solid #cfe2d7;border-radius:50%;background:#fff;color:#216b45;font:700 25px/1 Arial,sans-serif;display:flex;align-items:center;justify-content:center;cursor:pointer}
.kjc-roof-close:hover,.kjc-roof-close:focus-visible{background:#216b45;color:#fff;outline:none}
/* Ukrywa stary, dodatkowy X pochodzący z wcześniejszej wtyczki-poprawki. */
.kjc-roof-info-close{display:none !important}
.kjc-roof-pop img{display:block;width:100%;height:auto;border-radius:12px;background:#f6f4ee}
.kjc-roof-pop b{display:block;font-size:18px;color:#171a16;margin-bottom:8px}
.kjc-roof-pop p{margin:7px 0;color:#56594f;line-height:1.5}
@media(max-width:640px){.kjc-roof-info{margin-left:0;width:100%}.kjc-roof-pop{position:relative;top:auto;width:100%;grid-template-columns:1fr;margin-top:8px}.kjc-roof-pop img{max-width:360px;margin:auto}}


/* Tabliczka z imieniem — wybór położenia */
.kjc-name-position{margin-top:16px}
.kjc-name-position-label{display:block;margin-bottom:10px;font-family:var(--ff-b);font-size:.92rem;color:var(--ink)}
.kjc-name-position .kjc-opts{margin-top:0}
.kjc-name-position .kjc-opt{min-height:92px}