/* ══════════════════════════════════════════════════════════════════════
   kfg/shell.css: CSS POWŁOKI konfiguratora WEWNĘTRZNYCH (17.10.2026).
   Kopia 1:1 bloku <style> z zewnetrzne/konfigurator.php (l. 1004-3328, stan 17.10.2026,
   razem z poprawką steppera „Kamil 17.10.2026" dla 981-1499 px). Zawiera też reguły
   kafli/sekcji/segmentów, z których korzystają kroki 2-5. Nie edytować w sesjach kroków:
   reguły własnego kroku idą do kroki/kN.css z prefiksem k{N}-.
   ══════════════════════════════════════════════════════════════════════ */
    .cfg-wrap {
        max-width: 1360px; margin: 0 auto; width: 100%;
        padding: 14px 22px 30px;
        display: grid; grid-template-columns: minmax(0,1fr) minmax(400px, 520px);
        gap: 26px; align-items: start;
    }
    /* min-width:0 = klasyczny fix „grid blowout": bez tego treść o dużym
       min-content (np. rząd kafli auto-fit) rozpycha kolumnę ponad viewport */
    .cfg-left, .cfg-right { min-width: 0; }
    @media (max-width: 980px) { .cfg-wrap { grid-template-columns: minmax(0,1fr); gap: 14px; padding: 8px 12px 30px; } }

    /* ── Stepper ── */
    .cfg-steps { display: flex; align-items: center; gap: 0; margin-bottom: 16px; }
    .cfg-step-dot {
        display: flex; align-items: center; gap: 8px; cursor: pointer; flex-shrink: 0;
        color: #8a6f52; font-size: .8rem; font-weight: 700; transition: color .2s;
    }
    .cfg-step-dot .n {
        width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 2px solid #e8d5c0;
        color: #8a6f52; display: flex; align-items: center; justify-content: center; font-size: .82rem; transition: all .2s;
    }
    .cfg-step-dot.done .n { background: var(--kp-cream-dark); border-color: var(--kp-gold); color: var(--kp-brown); }
    .cfg-step-dot.done { color: var(--kp-brown-mid); }
    .cfg-step-dot.active .n { background: linear-gradient(135deg, var(--kp-brown), var(--kp-brown-mid)); border-color: var(--kp-brown); color: #fff; box-shadow: 0 4px 12px rgba(85,45,28,.25); }
    .cfg-step-dot.active { color: var(--kp-brown-dark); }
    /* Krok „Szklenie" pominięty (model bez szyby i bez dostawek) — wygaszony i nieklikalny */
    .cfg-step-dot.is-skipped { opacity: .32; pointer-events: none; }
    .cfg-step-dot.is-skipped .n { border-style: dashed; }
    .cfg-step-line { flex: 1; height: 2px; background: #e8d5c0; margin: 0 8px; border-radius: 2px; min-width: 12px; }
    .cfg-step-line.done { background: var(--kp-gold); }
    /* mobile: etykieta AKTYWNEGO kroku zostaje (audyt UX 10.07.2026 — same
       kółka z numerami nie mówią klientowi, co go czeka; wzorzec z krok8) */
    @media (max-width: 600px) { .cfg-step-dot .lbl { display: none; } .cfg-step-dot.active .lbl { display: inline; } }

    /* ── Panele kroków ── */
    .cfg-step-panel { display: none; animation: cfgIn .32s cubic-bezier(.16,1,.3,1); }
    .cfg-step-panel.is-active { display: block; }
    @keyframes cfgIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }
    .cfg-step-title { font-size: clamp(1.2rem,1rem+.8vw,1.5rem); font-weight: 800; color: var(--kp-brown-dark); margin: 0 0 2px; letter-spacing: -.02em; }
    .cfg-step-lead { color: var(--kp-muted); font-size: .86rem; margin: 0 0 16px; line-height: 1.45; }
    .cfg-card { background: #fff; border: 1.5px solid #eef2f6; border-radius: 16px; padding: 16px 18px; box-shadow: 0 2px 10px rgba(15,23,42,.04); }
    /* ── Sekcje-karty (redesign kroków 2/3, 07.2026): jedna karta = jedna decyzja ── */
    .cfg-sekcja { background: #fff; border: 1.5px solid #f0e7d6; border-radius: 16px; padding: 15px 18px 17px; box-shadow: 0 3px 14px rgba(85,45,28,.05); }
    .cfg-sekcja + .cfg-sekcja { margin-top: 12px; }
    .cfg-sekcja-head { display: flex; align-items: flex-start; gap: 11px; margin: 0 0 12px; }
    .cfg-sekcja-ico { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, #fdf3e3, #f5e3c8); color: var(--kp-brown); display: flex; align-items: center; justify-content: center; font-size: .92rem; flex: 0 0 auto; margin-top: 1px; }
    .cfg-sekcja-tytul { display: block; font-size: .84rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--kp-brown-dark); }
    .cfg-sekcja-opis { display: block; font-size: .72rem; font-weight: 600; color: var(--kp-muted); margin-top: 2px; line-height: 1.45; }
    .cfg-sekcja[hidden] { display: none !important; }
    .cfg-okleina-nota { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--kp-line);
        border-radius: 12px; background: var(--kp-cream); color: var(--kp-brown-dark); font-size: .875rem; line-height: 1.5; }
    /* [hidden] przegrywa z display:grid/flex klasy — pułapka jak przy LED/G6S */
    .cfg-klamki[hidden] { display: none !important; }
    .cfg-tile[hidden], .cfg-tiles[hidden] { display: none !important; }
    .cfg-sub { font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--kp-brown); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
    .cfg-sub::before { content:''; width:4px; height:15px; background: linear-gradient(180deg,var(--kp-brown),var(--kp-gold)); border-radius:2px; }
    .cfg-sub + .cfg-sub, .cfg-block + .cfg-block { margin-top: 18px; }
    /* nagłówek 2. grupy szyb siedział tuż pod kaflami 1. grupy (Kamil 08.07.2026)
       — wyraźny oddech + delikatna linia rozdziela „w cenie" od „za dopłatą" */
    .cfg-sub-oddziel { margin-top: 28px; padding-top: 16px; border-top: 1px dashed var(--kp-line); }
    /* dopisek po ludzku przy tytule sekcji (klient ma rozumieć bez googlowania) */
    .cfg-sub .cfg-sub-opis { font-weight: 600; color: var(--kp-muted); text-transform: none; letter-spacing: 0; }

    /* Model */
    .cfg-search { width: 100%; height: 40px; border: 1.5px solid #e5e7eb; border-radius: 10px; padding: 0 12px; font-size: .88rem; font-family: inherit; margin-bottom: 12px; transition: all .18s; }
    .cfg-search:focus { outline: 0; border-color: var(--kp-brown); box-shadow: 0 0 0 3px rgba(85,45,28,.1); }
    /* align-content:start — bez tego przy 1-2 wynikach szukajki jedyny rząd
       rozciągał się na min-height gridu i kafle robiły się ogromne */
    .cfg-model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px,1fr)); gap: 10px; max-height: 460px; overflow: auto; padding: 2px; align-content: start; }
    .cfg-model-card { align-self: start; }
    .cfg-model-card { border: 2px solid #eef2f6; border-radius: 12px; overflow: hidden; cursor: pointer; background: #fff; transition: transform .18s, border-color .18s, box-shadow .18s; position: relative; }
    @media (hover: hover) { .cfg-model-card:hover { transform: translateY(-3px); border-color: var(--kp-gold); box-shadow: 0 8px 18px rgba(85,45,28,.14); } }   /* hover tylko na myszy — na dotyku „przyklejał się" (audyt UX 10.07) */
    .cfg-model-card.is-selected { border-color: var(--kp-brown); box-shadow: 0 0 0 3px rgba(196,144,96,.22), 0 8px 18px rgba(85,45,28,.2); }
    .cfg-model-card.is-selected::before { content:'\f00c'; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; top:6px; right:6px; width:20px; height:20px; border-radius:50%; background:var(--kp-brown); color:#fff; font-size:.6rem; z-index:2; display:flex; align-items:center; justify-content:center; }
    .cfg-model-thumb { aspect-ratio: 3/4; background: linear-gradient(135deg,#fafbfc,#f1f5f9); display: flex; align-items: center; justify-content: center; padding: 8px; }
    .cfg-model-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
    .cfg-model-name { font-size: .72rem; font-weight: 700; color: var(--kp-brown-dark); text-align: center; padding: 6px 4px; border-top: 1px solid #f1f5f9; }
    /* 10.10.2026: kolor na zdjęciu pod nazwą (każdy kafel ma tę linię, więc wysokości w rzędzie się nie rozjeżdżają) */
    .cfg-model-kolor { font-size: .62rem; font-weight: 500; color: #8a8f98; text-align: center; padding: 0 4px 6px; margin-top: -4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cfg-model-kolor.is-spoza { font-weight: 700; color: #8a5a2b; }

    /* Kafle (układ / nadświetle) */
    .cfg-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px,1fr)); gap: 8px; }
    .cfg-tile { border: 2px solid #eef2f6; border-radius: 12px; background: #fff; cursor: pointer; padding: 10px 8px 8px; text-align: center; transition: all .18s; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
    @media (hover: hover) { .cfg-tile:hover { border-color: var(--kp-gold); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(85,45,28,.12); } }
    .cfg-tile.is-selected { border-color: var(--kp-brown); background: linear-gradient(180deg,#fff,#fef7f0); box-shadow: 0 0 0 3px rgba(196,144,96,.18); }
    .cfg-tile.is-selected::after { content:'\f00c'; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; top:5px; right:5px; width:16px; height:16px; border-radius:50%; background:var(--kp-brown); color:#fff; font-size:.52rem; display:flex; align-items:center; justify-content:center; }
    .cfg-tile svg { width: 40px; height: 52px; display: block; }
    .cfg-tile-label { font-size: .74rem; font-weight: 700; color: var(--kp-brown-dark); line-height: 1.15; }
    /* podpowiedź dopłaty na kaflu (nadświetla 10.07.2026 — łuk jest 4× droższy,
       klient ma to widzieć PRZED kliknięciem) */
    .cfg-tile-cena { display: block; font-size: .72rem; font-weight: 700; color: var(--kp-brown-mid); margin-top: 2px; }   /* czytelniejsze dopłaty (audyt UX) */

    /* Kolory */
    .cfg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px,1fr)); gap: 8px; }
    .cfg-swatch { border: 2px solid #e6e6e6; border-radius: 10px; cursor: pointer; overflow: hidden; background: #fff; transition: transform .15s, border-color .15s; position: relative; }
    @media (hover: hover) { .cfg-swatch:hover { transform: translateY(-2px); border-color: var(--kp-gold); } }
    .cfg-swatch.is-selected { border-color: var(--kp-brown); box-shadow: 0 0 0 3px rgba(196,144,96,.22); }
    .cfg-swatch.is-selected .cfg-swatch-dot::after { content:'\f00c'; font-family:"Font Awesome 6 Free"; font-weight:900; color:#fff; font-size:.62rem; position:absolute; top:5px; right:6px; text-shadow:0 1px 2px rgba(0,0,0,.4); }
    .cfg-swatch-dot { height: 44px; width: 100%; position: relative; overflow: hidden; }
    .cfg-swatch-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
    .cfg-swatch-name { font-size: .72rem; font-weight: 700; color: var(--kp-brown-dark); text-align: center; padding: 4px 2px; line-height: 1.1; }   /* było .6rem ≈9,6px — nieczytelne (audyt UX) */
    .cfg-swatch-kod { display: block; font-size: .62rem; font-weight: 600; color: var(--kp-muted); margin-top: 1px; letter-spacing: .02em; }

    /* Rodzaj okleiny (faktura drewna) */
    .cfg-okleina-sekcja[hidden] { display: none; }
    /* Sekcja okleiny jest wizualnie ciężka (cztery zdjęcia albo karta z próbką),
       więc następny nagłówek potrzebuje więcej powietrza niż standardowe 28 px —
       przy 28 px „Kolor drewnopodobny" siadał na próbkach (Kamil 15.07.2026). */
    .cfg-okleina-sekcja + .cfg-sub-oddziel { margin-top: 40px; padding-top: 22px; }
    /* TWARDY limit szerokości karty (max 150 px), nie `1fr` (Kamil 15.07.2026:
       „nie rób mi tak dużych tych oklein"). `1fr` rozciągał karty na całą szerokość
       kadru — przy 812 px wychodziło 167 px i wyglądało dobrze, ale na szerokim
       monitorze ~380 px: wielkie płachty drewna. Do tego ukrycie sosny przy słoju
       poziomym zostawiało 3 karty, które rozpychały się jeszcze bardziej.
       `auto-fit` + max 150px trzyma rozmiar niezależnie od LICZBY kart i od szerokości
       ekranu; na telefonie schodzi do 2 kolumn.
       Wyrównanie do LEWEJ (`start`), nie do środka: nagłówek sekcji i rząd „Kierunek
       słojów" stoją przy lewej krawędzi, więc wyśrodkowane karty pływały obok nich
       i wyglądały jak rozjazd. */
    .cfg-okleiny { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 150px));
                   gap: 10px; justify-content: start; }
    .cfg-okleina-karta { position: relative; text-align: left; border: 2px solid #f0e7d6; border-radius: 13px; background: #fff; cursor: pointer; padding: 0 0 11px; font-family: inherit; transition: all .18s; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
    @media (hover: hover) { .cfg-okleina-karta:hover { border-color: var(--kp-gold); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(85,45,28,.12); } }
    .cfg-okleina-karta.is-active { border-color: var(--kp-gold); background: linear-gradient(180deg, #fff 45%, #fbf1df 100%); box-shadow: 0 0 0 3px rgba(196,144,96,.2); }
    /* Próbka materiału — PIONOWY słój, tak jak leży na drzwiach (Kamil 15.07.2026).
       Zdjęcia to te same wyroby, które pokazuje główny konfigurator
       (zdjecia_do_wyboru_modeli_v2/okleina_textures), przeskalowane do ~12 kB
       z ~1 MB — picker nie może kosztować klienta megabajta na wolnym łączu. */
    /* KWADRAT, nie 3:4 — Kamil 15.07.2026: „nie są za duże trochę te okleiny".
       Karta niższa o ~25%, a słój i tak zostaje pionowy. */
    /* height:auto JEST KONIECZNE. Atrybut height="260" na <img> to podpowiedź
       prezentacyjna = height:260px, a `aspect-ratio` rządzi wysokością TYLKO gdy
       wysokość jest auto. Bez tego obrazek renderował się 167×260 i karta rosła
       niezależnie od proporcji, którą tu wpisywałem (złapane pomiarem 15.07.2026).
       Atrybuty width/height zostają — rezerwują miejsce i chronią przed skakaniem
       układu przy wolnym łączu. */
    .cfg-okleina-foto { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; background: var(--kp-cream-dark); }
    @supports not (aspect-ratio: 1) { .cfg-okleina-foto { height: 134px; } }
    /* Lupa — delikatne powiększenie próbki (Kamil 15.07.2026: „nie na całą stronę,
       tylko tak delikatnie"). Osobny <button> OBOK karty, nie w środku: karta sama
       jest <button>, a zagnieżdżanie przycisków to nieprawidłowy HTML. */
    .cfg-okleina-cela { position: relative; display: flex; }
    /* display:flex BIJE atrybut [hidden] — bez tej reguły ukrywanie sosny przy słoju
       poziomym w ogóle by nie zadziałało. Ta sama pułapka co przy .cfg-okleina-info. */
    .cfg-okleina-cela[hidden] { display: none; }
    .cfg-okleina-cela > .cfg-okleina-karta { flex: 1 1 auto; }
    .cfg-okleina-lupa { position: absolute; top: 8px; left: 8px; width: 27px; height: 27px; border-radius: 50%; border: none; background: rgba(255,255,255,.9); color: var(--kp-brown); font-size: .66rem; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.25); opacity: 0; transition: opacity .16s; z-index: 3; padding: 0; }
    .cfg-okleina-cela:hover .cfg-okleina-lupa, .cfg-okleina-lupa:focus-visible { opacity: 1; }
    /* Na dotyku nie ma hovera — inaczej lupa byłaby niewidoczna na telefonie */
    @media (hover: none) { .cfg-okleina-lupa { opacity: .92; } }
    .cfg-okleina-tresc { padding: 9px 12px 0; display: flex; flex-direction: column; gap: 2px; }
    .cfg-okleina-nazwa { font-size: .88rem; font-weight: 800; color: var(--kp-brown-dark); }
    .cfg-okleina-opis { font-size: .72rem; color: var(--kp-muted); line-height: 1.3; }
    .cfg-okleina-cena { font-size: .74rem; font-weight: 700; color: var(--kp-brown-mid); margin-top: 3px; }
    /* Ptaszek MUSI siedzieć w środku karty — karta ma teraz overflow:hidden
       (przycina zdjęcie do zaokrąglonych rogów), więc dawne top:-8px ucinało go. */
    .cfg-okleina-check { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--kp-gold), #a06a2c); color: #fff; font-size: .58rem; display: none; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.35); z-index: 2; }
    .cfg-okleina-karta.is-active .cfg-okleina-check { display: flex; }
    /* Wzór ramiakowy = tylko dąb. Wcześniej sekcja była po prostu UKRYTA i klient
       nie wiedział, czy okleiny nie ma, czy o niej zapomnieliśmy. Pokazujemy jedną
       spokojną informację zamiast udawać wybór, którego nie ma (Kamil 15.07.2026).
       Dotyczy 251 z 531 wzorów — to nie jest przypadek brzegowy. */
    .cfg-okleina-info { display: flex; align-items: center; gap: 13px; background: var(--kp-cream); border: 1px solid var(--kp-line); border-radius: 12px; padding: 11px 14px; }
    /* display:flex/block BIJE atrybut [hidden] — bez tych dwóch reguł oba bloki
       pokazywałyby się naraz. Ta sama pułapka co przy .cfg-uslojenie-wrap wyżej. */
    .cfg-okleina-info[hidden] { display: none; }
    #cfg-okleina-picker[hidden] { display: none; }
    .cfg-okleina-info img { width: 52px; height: 52px; object-fit: cover; border-radius: 7px; flex-shrink: 0; border: 1px solid rgba(0,0,0,.1); }
    /* display:block — to <span>y, więc bez tego nazwa i opis sklejają się w jedną linię */
    .cfg-okleina-info-nazwa { display: block; font-size: .86rem; font-weight: 800; color: var(--kp-brown-dark); }
    .cfg-okleina-info-opis { display: block; font-size: .75rem; color: var(--kp-muted); line-height: 1.35; margin-top: 2px; }
    .cfg-uslojenie-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
    .cfg-uslojenie-wrap[hidden] { display: none; }
    .cfg-uslojenie-label { font-size: .78rem; font-weight: 700; color: var(--kp-brown-mid); }
    .cfg-uslojenie-dop { font-weight: 800; opacity: .85; }
    .cfg-uslojenie-dop[hidden] { display: none; }
    /* Podgląd próbki — mała karta na przygaszonym tle, NIE pełny ekran.
       ⛔ ŻADNEGO backdrop-filter: blur na tym tle. Rozmycie całego ekranu przy każdym
          repaincie położyło już raz „modal muli" na słabym GPU terminala (patrz memory
          terminal-duzy-wydajnosc). Zwykła półprzezroczysta warstwa wystarczy. */
    .cfg-okl-zoom { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; background: rgba(40,26,16,.5); padding: 20px; }
    .cfg-okl-zoom.jest { display: flex; }
    /* 660 px = dwa razy tyle co było (Kamil 15.07: „podgląd zrób dwa razy większy").
       Próbka wyświetla się wtedy w ~634 px, więc lupa ciągnie OSOBNY plik 700×700
       (`<klucz>_duze.jpg`) — karta pickera zostaje przy 380 px, bo w 634 px byłaby
       rozmyta, a gdyby picker ładował 700-ki, krok 5 ciągnąłby ~600 kB przy wejściu.
       Duże pobierają się DOPIERO po kliknięciu lupki, jeden plik naraz.
       ⚠ Szerokość ograniczona TAKŻE wysokością okna: próbka jest kwadratowa, więc karta
       ma ~szerokość + 96 px (padding + opis) — przy 660 px to 730 px wysokości i na
       laptopie 768 px wychodziła poza ekran. `calc(88vh - 130px)` trzyma ją w kadrze;
       na monitorze 1080p limit i tak nie działa (wychodzi ~820 px), więc zostaje 660. */
    .cfg-okl-zoom-karta { position: relative; background: var(--kp-cream); border-radius: 16px; padding: 13px; width: 100%; max-width: min(660px, calc(88vh - 130px)); box-shadow: 0 18px 50px rgba(0,0,0,.42); animation: cfgOklIn .18s ease-out; }
    @keyframes cfgOklIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
    @media (prefers-reduced-motion: reduce) { .cfg-okl-zoom-karta { animation: none; } }
    .cfg-okl-zoom-karta img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; background: var(--kp-cream-dark); }
    .cfg-okl-zoom-nazwa { font-size: 1rem; font-weight: 800; color: var(--kp-brown-dark); margin-top: 11px; }
    .cfg-okl-zoom-opis { font-size: .78rem; color: var(--kp-muted); margin-top: 2px; }
    .cfg-okl-zoom-cena { font-size: .82rem; font-weight: 800; color: var(--kp-brown-mid); margin-top: 6px; }
    .cfg-okl-zoom-x { position: absolute; top: -10px; right: -10px; width: 30px; height: 30px; border-radius: 50%; border: none; background: #fff; color: var(--kp-brown); cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.3); font-size: .8rem; padding: 0; }

    /* ── KOLOR B UI (25.09.2026): wzory dwukolorowe ─────────────────────────────
       Żywa miniatura drzwi składana jak w generatorze: kolor A na całe skrzydło (maska _a), kolor B przez
       maskę _b, rysunek przez MNOŻENIE (słój, frezy), inox na wierzch, szkło przez otwory, obrys wybranej
       części na samej górze. Ościeżnica (ramka) w kolorze A, jak na renderze. */
    .cfg-kb { display: flex; align-items: center; gap: 18px; padding: 14px 16px; margin: 0 0 22px; border: 1px solid var(--kp-line); border-radius: 14px; background: linear-gradient(180deg, #fff 0%, var(--kp-cream) 100%); }
    .cfg-kb[hidden] { display: none; }
    .cfg-kb-drzwi { flex: 0 0 auto; width: 112px; padding: 6px; border-radius: 3px; background: #7a4a28 center / cover no-repeat; box-shadow: 0 10px 22px rgba(62,31,18,.24), 0 2px 4px rgba(62,31,18,.18), inset 0 0 0 1px rgba(0,0,0,.2); transition: background .25s; }
    .cfg-kb-lisc { position: relative; aspect-ratio: 240 / 516; overflow: hidden; isolation: isolate; box-shadow: 0 0 0 1px rgba(0,0,0,.28); }
    @supports not (aspect-ratio: 1) { .cfg-kb-lisc { height: 241px; } }
    .cfg-kb-drzwi.is-lustro .cfg-kb-lisc { transform: scaleX(-1); }
    .cfg-kb-lisc > * { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
    .cfg-kb-lisc > [hidden] { display: none; }
    .cfg-kb-lisc .kb-szklo { background: linear-gradient(172deg, #e6edf1 0%, #cdd7dd 52%, #b9c5cc 100%); }
    .cfg-kb-lisc .kb-kolor { background: #7a4a28 center / cover no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transition: background .25s; }
    .cfg-kb-lisc .kb-rys { mix-blend-mode: multiply; }
    .cfg-kb-lisc .kb-obrys { opacity: 0; transition: opacity .18s; }
    .cfg-kb[data-cel="a"] .kb-obrys[data-cel="a"], .cfg-kb[data-cel="b"] .kb-obrys[data-cel="b"] { opacity: 1; }
    .cfg-kb-lisc .kb-statyczny { object-fit: contain; background: #fff; }
    .cfg-kb-prawa { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
    .cfg-kb-prawa > .cfg-sub { margin: 0 0 2px; }
    .cfg-kb-opcja { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 9px 12px; text-align: left; font: inherit; color: inherit; border: 2px solid #eadfcd; border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
    @media (hover: hover) { .cfg-kb-opcja:hover { border-color: var(--kp-gold); } }
    .cfg-kb-opcja:focus-visible { outline: 3px solid rgba(196,144,96,.55); outline-offset: 2px; }
    .cfg-kb-opcja.is-active { border-color: var(--kp-gold); background: linear-gradient(180deg, #fff 40%, #fbf1df 100%); box-shadow: 0 0 0 3px rgba(196,144,96,.2); }
    .cfg-kb-pole { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #cdbba0; background: #fff; color: transparent; display: flex; align-items: center; justify-content: center; font-size: .64rem; transition: all .15s; }
    .cfg-kb-opcja.is-active .cfg-kb-pole { border-color: transparent; background: linear-gradient(135deg, var(--kp-gold), #a06a2c); color: #fff; box-shadow: 0 2px 6px rgba(160,106,44,.35); }
    .cfg-kb-tekst { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
    .cfg-kb-nazwa { font-size: .9rem; font-weight: 800; color: var(--kp-brown-dark); line-height: 1.2; }
    .cfg-kb-opis { font-size: .74rem; color: var(--kp-muted); line-height: 1.3; }
    .cfg-kb-wybor { flex: 0 1 44%; min-width: 0; display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
    .cfg-kb-probka { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 8px; background: #7a4a28 center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(0,0,0,.16), 0 1px 3px rgba(0,0,0,.12); }
    .cfg-kb-kolor { font-size: .8rem; font-weight: 700; color: var(--kp-brown-dark); line-height: 1.2; overflow-wrap: anywhere; }
    .cfg-kb-podpowiedz { margin: 2px 0 0; font-size: .76rem; color: var(--kp-muted); line-height: 1.35; }
    .cfg-kb-podpowiedz b { color: var(--kp-brown-dark); }
    /* Tryb „drugi kolor": okleina i własny RAL/NCS dotyczą koloru drzwi, więc znikają z kroku */
    .cfg-card.kb-tryb-b #cfg-okleina-sekcja, .cfg-card.kb-tryb-b #cfg-kolor-wlasny, .cfg-card.kb-tryb-b #cfg-retro-note { display: none; }
    @media (max-width: 600px) {
        .cfg-kb { gap: 12px; padding: 12px; align-items: flex-start; }
        .cfg-kb-drzwi { width: 86px; padding: 5px; }
        .cfg-kb-opcja { flex-wrap: wrap; gap: 4px 10px; min-height: 0; }
        .cfg-kb-wybor { flex-basis: 100%; justify-content: flex-start; padding-left: 34px; }
        .cfg-kb-probka { flex-basis: 24px; width: 24px; height: 24px; border-radius: 6px; }
    }
    @media (prefers-reduced-motion: reduce) { .cfg-kb-lisc .kb-kolor, .cfg-kb-drzwi, .cfg-kb-lisc .kb-obrys, .cfg-kb-opcja, .cfg-kb-pole { transition: none; } }

    /* Własny kolor RAL/NCS (za dopłatą) */
    .cfg-kolor-wlasny { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--kp-line); }
    .cfg-krw { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border: 1.5px solid var(--kp-line); border-radius: 12px; background: var(--kp-cream); transition: border-color .18s, box-shadow .18s; }
    .cfg-krw.is-active { border-color: var(--kp-gold); box-shadow: 0 0 0 3px rgba(196,144,96,.18); background: #fff; }
    .cfg-krw-tabs { display: inline-flex; border: 1.5px solid var(--kp-line); border-radius: 9px; overflow: hidden; background: #fff; }
    .cfg-krw-tab { border: 0; background: transparent; padding: 7px 15px; font-size: .8rem; font-weight: 700; color: var(--kp-brown-mid); cursor: pointer; font-family: inherit; transition: all .15s; }
    .cfg-krw-tab.is-active { background: linear-gradient(135deg, var(--kp-brown), var(--kp-brown-mid)); color: #fff; }
    .cfg-krw-field { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1.5px solid var(--kp-line); border-radius: 9px; padding: 0 12px 0 10px; height: 40px; }
    .cfg-krw-field[hidden] { display: none !important; }
    .cfg-krw-prefix { font-size: .78rem; font-weight: 800; color: var(--kp-brown); letter-spacing: .04em; }
    .cfg-krw-field input { border: 0; outline: 0; background: transparent; font-family: inherit; font-size: 1rem; font-weight: 700; color: var(--kp-brown-dark); width: 110px; letter-spacing: .06em; }
    .cfg-krw-preview { width: 34px; height: 34px; border-radius: 8px; border: 1.5px solid var(--kp-line); background: repeating-conic-gradient(#e9e2d5 0% 25%, #fff 0% 50%) 50% / 12px 12px; flex-shrink: 0; }
    .cfg-krw-apply { border: 0; border-radius: 9px; padding: 0 18px; height: 40px; background: linear-gradient(135deg, var(--kp-brown), var(--kp-brown-mid)); color: #fff; font-weight: 700; font-size: .82rem; cursor: pointer; font-family: inherit; transition: all .18s; }
    .cfg-krw-apply:hover { filter: brightness(1.06); }
    .cfg-krw-clear { border: 1.5px solid var(--kp-line); background: #fff; color: var(--kp-brown-mid); width: 34px; height: 34px; border-radius: 8px; cursor: pointer; flex-shrink: 0; }
    .cfg-krw-clear[hidden] { display: none !important; }
    .cfg-krw-msg { font-size: .76rem; color: var(--kp-brown-mid); margin: 8px 2px 0; line-height: 1.4; min-height: 1em; }
    .cfg-krw-msg.err { color: #b91c1c; }
    .cfg-more-btn { margin-top: 10px; width: 100%; padding: 9px; border-radius: 9px; border: 1.5px dashed var(--kp-line); background: var(--kp-cream); color: var(--kp-brown); font-weight: 700; font-size: .8rem; cursor: pointer; transition: all .15s; }
    .cfg-more-btn:hover { border-color: var(--kp-gold); background: #fff; }
    .cfg-colors-more[hidden] { display: none; }

    /* Strona otwierania — podpis pod etykietą kafla */
    .cfg-tile-label small { display: block; font-weight: 600; color: var(--kp-muted); font-size: .62rem; margin-top: 2px; letter-spacing: .01em; }

    /* Zamki — 3 najprostsze, opisane po ludzku */
    .cfg-zamki { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 10px; }
    .cfg-zamek-card { position: relative; border: 2px solid #f0e7d6; border-radius: 14px; background: #fff; padding: 12px 14px 11px; cursor: pointer; transition: all .18s; }
    @media (hover: hover) { .cfg-zamek-card:hover { border-color: var(--kp-gold); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(85,45,28,.12); } }
    .cfg-zamek-card.is-selected { border-color: var(--kp-brown); background: linear-gradient(180deg, #fff, #fef7f0); box-shadow: 0 0 0 3px rgba(196,144,96,.18); }
    /* Kafel zamka BEZ własnego ✓ — każdy kafel ma pod-wybór (Jeden/Dwa, Maco/GU)
       z medalionem na rogu; drugi znaczek na dole kafla gryzł się z nim wizualnie
       (Kamil 09.07.2026: „za blisko, nieładnie się komponuje"). Zaznaczenie kafla
       pokazuje ramka + tło. */
    .cfg-zamek-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
    .cfg-zamek-head i { color: var(--kp-gold); font-size: .92rem; }
    .cfg-zamek-head .tytul { font-weight: 800; font-size: .85rem; color: var(--kp-brown-dark); flex: 1; line-height: 1.15; }
    .cfg-zamek-head .cena { font-size: .68rem; font-weight: 700; color: var(--kp-brown-mid); background: var(--kp-cream); border: 1px solid var(--kp-line); border-radius: 999px; padding: 3px 9px; white-space: nowrap; font-variant-numeric: tabular-nums; }
    .cfg-zamek-card .opis { margin: 0; font-size: .72rem; color: var(--kp-muted); line-height: 1.45; }
    .cfg-zamek-badge { position: absolute; top: -8px; right: 12px; background: linear-gradient(135deg, var(--kp-gold), #a06a2c); color: #fff; font-size: .56rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; box-shadow: 0 3px 8px rgba(160,106,44,.35); }

    /* Bestseller — złota plakietka na kaflu modelu (top 5 wg licznika) */
    .cfg-model-badge { position: absolute; top: 8px; left: 8px; z-index: 2; background: linear-gradient(135deg, var(--kp-gold), #a06a2c); color: #fff; font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; box-shadow: 0 3px 8px rgba(160,106,44,.4); }
    .cfg-model-badge i { font-size: .52rem; margin-right: 3px; }
    /* NOWOŚĆ — złota METALICZNA folia 1:1 jak główny konfigurator (model_v2.php
       .ag-badge-nowosc; Kamil 08.07.2026 wieczór: „powinno się tak samo mienić
       jak w głównym"). Wahadłowy gradient (alternate — pętla bez skoku, pozycje
       w 0–100%!), przelatujący błysk ::after, mrugająca gwiazdka SVG, oddychająca
       poświata; prefers-reduced-motion wyłącza animacje. */
    .cfg-model-badge-nowosc {
        display: inline-flex; align-items: center; gap: 5px;
        padding: 4px 12px 4px 10px;
        font-size: .6rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
        color: #3a2408; text-shadow: 0 1px 0 rgba(255,255,255,.4);
        background: linear-gradient(115deg,
            #a97b2a 0%, #d4af5e 20%, #f7ecc4 40%,
            #e6c877 52%, #d4af5e 68%, #a97b2a 100%);
        background-size: 250% 100%;
        border: 1px solid rgba(122,82,22,.55);
        box-shadow: 0 4px 12px rgba(169,123,42,.45), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 2px rgba(90,60,10,.30);
        pointer-events: none; overflow: hidden; white-space: nowrap;
        animation: cfgBadgeFoil 3.2s ease-in-out infinite alternate, cfgBadgeGlow 4s ease-in-out infinite;
    }
    .cfg-model-badge-nowosc svg { flex-shrink: 0; filter: drop-shadow(0 1px 1px rgba(255,255,255,.4)); animation: cfgBadgeStar 2.4s ease-in-out infinite; }
    .cfg-model-badge-nowosc::after {
        content: ''; position: absolute; top: -20%; left: -60%; width: 35%; height: 140%;
        background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.75) 50%, transparent 100%);
        transform: skewX(-20deg);
        animation: cfgBadgeShine 4s ease-in-out infinite;
    }
    @keyframes cfgBadgeFoil { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
    @keyframes cfgBadgeShine { 0%, 55% { left: -60%; } 75%, 100% { left: 150%; } }
    @keyframes cfgBadgeGlow {
        0%, 100% { box-shadow: 0 4px 12px rgba(169,123,42,.40), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 2px rgba(90,60,10,.30); }
        50%      { box-shadow: 0 5px 18px rgba(212,175,94,.70), inset 0 1px 0 rgba(255,255,255,.60), inset 0 -1px 2px rgba(90,60,10,.30); }
    }
    @keyframes cfgBadgeStar { 0%, 100% { opacity: .85; transform: scale(1) rotate(0); } 50% { opacity: 1; transform: scale(1.22) rotate(8deg); } }
    @media (prefers-reduced-motion: reduce) {
        .cfg-model-badge-nowosc, .cfg-model-badge-nowosc svg, .cfg-model-badge-nowosc::after { animation: none; }
    }

    /* Przykładowe zdjęcia domów w modalu foto */
    /* galeria przykładów — DUŻE kafle (Kamil 09.07.2026: „powinna być lepiej widoczna") */
    .cfg-foto-przyklady { margin-top: 26px; border-top: 1px dashed var(--kp-line); padding-top: 16px; }
    .cfg-foto-przyklady-tytul { font-size: .92rem; font-weight: 800; color: var(--kp-brown-dark); margin: 0 0 12px; text-align: center; }
    .cfg-foto-przyklady-tytul i { color: var(--kp-gold); margin-right: 7px; }
    /* Duże kafle (Kamil 10.07.2026: „większe obrazki") + równa siatka:
       wszystkie zdjęcia to jednolite poziome 4:3 z Gemini, więc nic się
       brzydko nie przycina; na szerokim ekranie 3 kolumny = cała galeria
       widoczna od razu (bez uciętego trzeciego rzędu — „lepiej to rozmieść") */
    .cfg-foto-przyklady-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 900px; margin: 0 auto; }
    @media (min-width: 1000px) {
        .cfg-foto-przyklady-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1090px; }
    }
    .cfg-foto-przyklad { border: 2px solid #f0e7d6; border-radius: 14px; overflow: hidden; cursor: pointer; padding: 0; background: #fff; aspect-ratio: 4 / 3; width: 100%; height: auto; transition: all .18s; position: relative; }
    .cfg-foto-przyklad::after { content: 'Wypróbuj'; position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); background: rgba(255,255,255,.92); color: var(--kp-brown-dark); font-size: .66rem; font-weight: 800; padding: 3px 12px; border-radius: 999px; opacity: 0; transition: opacity .18s; pointer-events: none; }
    @media (hover: hover) {
        .cfg-foto-przyklad:hover { border-color: var(--kp-gold); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(85,45,28,.2); }
        .cfg-foto-przyklad:hover::after { opacity: 1; }
    }
    /* na dotyku nie ma hovera — podpis „Wypróbuj" pokaż od razu (audyt UX 10.07) */
    @media (hover: none) { .cfg-foto-przyklad::after { opacity: 1; } }
    .cfg-foto-przyklad img { width: 100%; height: 100%; object-fit: cover; display: block; }
    @media (max-width: 640px) { .cfg-foto-przyklady-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } }

    /* [hidden] musi wygrywać z inline display:flex/inline-flex (LED przy G6S itd.) */
    #cfg-antaba-sekcja[hidden], #cfg-antaba-opcje[hidden],
    #cfg-antaba-opcje label[hidden], #cfg-okucie-foto[hidden] { display: none !important; }

    /* Klamki — karty ze zdjęciem (krok 3) */
    .cfg-klamki { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
    .cfg-klamka-card { border: 2px solid #f0e7d6; border-radius: 13px; background: #fff; cursor: pointer; overflow: hidden; transition: all .18s; position: relative; }
    @media (hover: hover) { .cfg-klamka-card:hover { border-color: var(--kp-gold); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(85,45,28,.12); } }
    .cfg-klamka-card.is-selected { border-color: var(--kp-brown); box-shadow: 0 0 0 3px rgba(196,144,96,.2); }
    .cfg-klamka-card.is-selected::after { content:'\f00c'; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; top:6px; right:6px; width:18px; height:18px; border-radius:50%; background:var(--kp-brown); color:#fff; font-size:.56rem; display:flex; align-items:center; justify-content:center; }
    .cfg-klamka-foto { height: 96px; display: flex; align-items: center; justify-content: center; padding: 8px; background: radial-gradient(ellipse at 50% 35%, #ffffff 0%, #f4efe5 100%); }
    .cfg-klamka-foto img { max-width: 100%; max-height: 100%; object-fit: contain; }
    .cfg-klamka-nazwa { font-size: .7rem; font-weight: 700; color: var(--kp-brown-dark); text-align: center; padding: 6px 4px 8px; border-top: 1px solid #f5efe3; line-height: 1.2; }
    .cfg-klamka-cena { display: block; font-size: .62rem; font-weight: 700; color: var(--kp-brown-mid); margin-top: 2px; font-variant-numeric: tabular-nums; }

    /* Wymiary */
    .cfg-dims { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    /* Ramki Szerokość/Wysokość RÓWNO w poziomie (zgłoszenie Kamila 20.07.2026).
       Podpowiedź „· min. 150 cm dla tego układu" (#cfg-szer-hint) siedzi WEWNĄTRZ
       etykiety, więc przy węższej kolumnie łamie ją na dwie linie i spychała samo
       pole 15 px niżej niż Wysokość (zmierzone: label 30 px vs 15 px).
       Kolumna flex + margin-top:auto dokleja OBIE ramki do dołu wiersza —
       niezależnie od tego, ile linii zajmie etykieta. */
    .cfg-dim { display: flex; flex-direction: column; }
    .cfg-dim label { display: block; font-size: .76rem; font-weight: 700; color: var(--kp-brown-dark); margin-bottom: 6px; }
    .cfg-dim-input { position: relative; margin-top: auto; }
    .cfg-dim-input input { width: 100%; height: 48px; border: 1.5px solid var(--kp-line); border-radius: 10px; padding: 0 46px 0 14px; font-size: 1.05rem; font-weight: 700; color: var(--kp-brown-dark); font-family: inherit; background: #fff; transition: all .18s; }
    .cfg-dim-input input:focus { outline: 0; border-color: var(--kp-brown); box-shadow: 0 0 0 3px rgba(85,45,28,.1); }
    .cfg-dim-input span { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); font-size: .8rem; font-weight: 700; color: #94a3b8; pointer-events: none; }
    .cfg-dim-hint { grid-column: 1/-1; font-size: .74rem; color: var(--kp-muted); margin: 2px 0 0; line-height: 1.4; }
    .cfg-dim-hint i { color: var(--kp-gold); margin-right: 4px; }
    /* Światło przejścia: jedna kolumna tej samej szerokości co pola wymiarów */
    .cfg-dims-solo { grid-template-columns: minmax(0, 223px); max-width: 223px; }
    #cfg-swiatlo-wrap[hidden] { display: none; }
    #cfg-swiatlo-nota { margin-top: 8px; }
    /* Notatka w trybie ostrzeżenia — dostawka robi się węższa, niż da się wykonać */
    .cfg-dim-hint.is-ostrzezenie { color: #b45309; font-weight: 600; }
    .cfg-dim-hint.is-ostrzezenie i { color: #d97706; }
    /* GWARANCJA NA WYSOKOSC przy grubosci skrzydla (Kamil 23.09.2026: "zeby byla
       ta informacja"). Spokojny stan = jedna linia jak .cfg-dim-hint; przekroczony
       limit = pasek w kolorze ostrzezenia z przyciskiem na 88 mm (ten sam jezyk
       wizualny co pasek "locked" w kaflu zamka). Ikona ZMIENIA SIE razem z kolorem,
       zeby stan nie zalezal od samego koloru (daltonizm, wydruk, jasne slonce). */
    .cfg-gw { margin: 10px 0 0; }
    .cfg-gw-nota { display: flex; align-items: flex-start; gap: 6px; font-size: .74rem; color: var(--kp-muted); line-height: 1.45; margin: 0; }
    .cfg-gw-nota i { color: var(--kp-gold); margin-top: 2px; flex: 0 0 auto; }
    .cfg-gw-nota b { color: var(--kp-brown-dark); font-weight: 700; }
    .cfg-gw-pasek { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin: 0; padding: 9px 11px 9px 13px; border-radius: 10px; border: 1px solid #f0d8a8; background: linear-gradient(120deg, #fff8ea, #fdf1da); }
    .cfg-gw-txt { font-size: .74rem; font-weight: 600; color: #92400e; line-height: 1.45; }
    .cfg-gw-txt i { color: #b45309; margin-right: 5px; }
    .cfg-gw-txt b { color: #7c2d12; font-weight: 800; }
    .cfg-gw-btn { border: 0; cursor: pointer; border-radius: 999px; padding: 8px 15px; min-height: 36px; font-family: inherit; font-weight: 800; font-size: .72rem; color: #fff; background: linear-gradient(120deg, var(--kp-brown), var(--kp-brown-dark)); box-shadow: 0 2px 8px rgba(85,45,28,.22); transition: transform .18s, box-shadow .18s; }
    @media (hover: hover) { .cfg-gw-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(85,45,28,.3); } }
    /* Palec potrzebuje 44 px (tablet w salonie, telefon klienta) */
    @media (pointer: coarse) { .cfg-gw-btn { min-height: 44px; padding: 12px 18px; } }
    .cfg-gw-btn:focus-visible { outline: 2px solid var(--kp-brown-dark); outline-offset: 2px; }
    @media (prefers-reduced-motion: reduce) { .cfg-gw-btn { transition: none; } .cfg-gw-btn:hover { transform: none; } }

    /* Nawigacja kroków */
    .cfg-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
    /* „Wstecz/Dalej" ZAWSZE w tym samym miejscu (Kamil 06.07.2026): lewa kolumna
       to flex rozciągnięty do wysokości okna, pasek dokleja się do jej dołu —
       krótkie kroki (np. Szklenie) nie podnoszą już nawigacji do góry */
    .cfg-left { display: flex; flex-direction: column; }
    .cfg-step-panel.is-active { padding-bottom: 18px; }
    /* 77px = header 53 + padding-top wrapa 14 + sticky-offset 10 — dół kolumny
       równa się z pozycją sticky paska przy długich krokach */
    @media (min-width: 981px) { .cfg-left { min-height: calc(100vh - 77px); } }
    .cfg-nav-count { font-size: .82rem; color: var(--kp-muted); font-weight: 700; }
    .cfg-btn { display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px; border-radius: 11px; font-size: .9rem; font-weight: 700; cursor: pointer; border: none; transition: all .2s; }
    .cfg-btn-back { color: var(--kp-muted); background: #f1f5f9; }
    .cfg-btn-back:hover { background: #e2e8f0; color: var(--kp-brown-dark); }
    .cfg-btn-back[disabled] { opacity: .4; cursor: not-allowed; }
    .cfg-btn-next { color: #fff; background: linear-gradient(135deg,var(--kp-brown),var(--kp-brown-mid)); box-shadow: 0 6px 16px rgba(85,45,28,.28); }
    .cfg-btn-next:hover { background: linear-gradient(135deg,var(--kp-brown-dark),var(--kp-brown)); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(85,45,28,.36); }

    /* ── PRAWA: render Pythona (sticky) ── */
    .cfg-right { position: sticky; top: 14px; }
    @media (max-width: 980px) { .cfg-right { position: sticky; top: 0; z-index: 30; order: -1; } }
    /* Panel podglądu ZAWSZE w całości na ekranie (Kamil 10.07.2026: „zjadę
       scrollem i ucina podgląd — ma się automatycznie dostosowywać"):
       karta = flex-kolumna ograniczona do viewportu, scena renderu elastyczna
       (flex:1), obrazek absolutny skaluje się do sceny — na niskich ekranach
       drzwi się kurczą, cena i przyciski zawsze widoczne (wzorzec ≥1500px). */
    @media (min-width: 981px) {
        /* 100vh-44 (nie -28!): przy KRÓTKIEJ lewej kolumnie (np. dział Kolor)
           wiersz grida = wysokość panelu i sticky nie ma zapasu ruchu — scroll
           chowający nagłówek (67px) ścinał panel od góry. -44 daje matematyczny
           zapas na pełen scroll strony niezależnie od długości lewej kolumny. */
        .cfg-right .cfg-stage-card { display: flex; flex-direction: column; max-height: calc(100vh - 44px); }
        .cfg-right .cfg-stage { flex: 1 1 auto; min-height: 200px; }
        /* STAŁY BOX obrazu (Kamil 14.07: „przy odświeżeniu obrazek jest mały, zaraz duży").
           `width:auto` + `max-*` dawało rozmiar WYNIKAJĄCY Z PROPORCJI PLIKU, a startowe
           zdjęcie modelu ma inne proporcje niż render → przy podmianie obraz przeskakiwał.
           Teraz box jest stały (cała scena), a `object-fit: contain` wpisuje w niego każdy
           obraz — zmiana src NIE rusza layoutu. */
        .cfg-right .cfg-stage img { position: absolute; inset: 12px 18px; transform: none;
                                    width: calc(100% - 36px); height: calc(100% - 24px);
                                    max-width: none; max-height: none; object-fit: contain; }
        .cfg-right .cfg-summary { flex-shrink: 0; }
    }
    .cfg-stage-card { background: linear-gradient(160deg,#fdf7ec,#f3e7d2 55%,#ecdcc2); border: 1.5px solid var(--kp-line); border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(85,45,28,.12); }
    .cfg-stage-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px; background: rgba(255,255,255,.55); border-bottom: 1px solid rgba(196,144,96,.25); }
    .cfg-stage-eyebrow { font-size: .62rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--kp-brown-mid); }
    .cfg-stage-model { font-size: .95rem; font-weight: 800; color: var(--kp-brown-dark); line-height: 1.1; }
    .cfg-live-badge { font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #15803d; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }   /* nowrap 13.09: w zwinietym pasku telefonu lamalo sie na NA / ZYWO */
    /* Przełącznik widoku: z zewnątrz / od środka (render obu stron drzwi) */
    .cfg-widok-seg { display: inline-flex; background: var(--kp-cream-dark); border: 1px solid var(--kp-line); border-radius: 12px; padding: 3px; gap: 2px; }
    .cfg-widok-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 5px;
        min-height: 32px; border: 1px solid transparent; background: transparent; padding: 0 10px; border-radius: 9px;
        font-size: .7rem; line-height: 1.25; font-weight: 600; letter-spacing: 0; color: var(--kp-brown-mid);
        cursor: pointer; font-family: inherit; transition: background-color .16s, border-color .16s, color .16s; white-space: nowrap; touch-action: manipulation; }
    .cfg-widok-seg button:hover:not(:disabled) { background: #e8d9c7; color: var(--kp-brown-dark); }
    .cfg-widok-seg button.is-active, .cfg-widok-seg button.is-active:hover:not(:disabled) {
        background: var(--kp-brown); border-color: var(--kp-brown); color: #fff8ee; box-shadow: 0 1px 3px rgba(62,31,18,.16); }
    .cfg-widok-seg button:focus-visible { outline: 2px solid var(--kp-brown); outline-offset: -3px; }
    .cfg-widok-seg button.is-active:focus-visible { outline-color: var(--kp-gold-light); }
    .cfg-widok-seg button:disabled { opacity: .4; cursor: not-allowed; }
    .cfg-pora-symbol { font-size: .75rem; width: 1em; line-height: 1; flex: 0 0 auto; }
    .cfg-preview-tools { display: flex; align-items: center; gap: 4px; width: 280px; max-width: 100%; min-width: 0;
        padding: 3px; border: 1px solid var(--kp-line); border-radius: 10px; background: var(--kp-cream-dark); }
    .cfg-widok-wybor { flex: 1 1 auto; min-width: 0; }
    .cfg-pora-wybor { flex: 0 0 auto; min-width: 0; padding-left: 4px; border-left: 1px solid var(--kp-line); }
    .cfg-preview-tools #cfg-widok-seg .cfg-widok-seg,
    .cfg-preview-tools #cfg-pora-seg .cfg-widok-seg { display: flex; width: 100%; gap: 2px; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; }
    .cfg-preview-tools #cfg-widok-seg button { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 6px;
        font-size: .78125rem; font-weight: 600; line-height: 1.25; white-space: nowrap; border-radius: 7px; }
    .cfg-preview-tools #cfg-pora-seg button { flex: 0 0 44px; width: 44px; min-width: 44px; min-height: 44px; padding: 0; border-radius: 7px; }
    .cfg-preview-tools .cfg-pora-symbol { display: inline-block; font-size: .8125rem; }
    .cfg-stage-card.is-noc .cfg-preview-tools { background: #282733; border-color: #6c584c; }
    @media (max-width: 980px) {
        .cfg-preview-tools { grid-column: 1 / -1; width: 100%; }
        body.cfg-zwiniete .cfg-preview-tools { display: none !important; }
    }
    @media (prefers-reduced-motion: reduce) { .cfg-widok-seg button { transition: none; } }
    /* ── PODGLĄD NOCNY (2026-07-14) — cała scena schodzi w wieczór, szkło świeci ── */
    .cfg-pora-new { background: var(--kp-gold); color: #3e1f12; font-size: .5rem; font-weight: 900;
        letter-spacing: .08em; padding: 1px 5px; border-radius: 4px; text-transform: uppercase; margin-left: 4px; }
    #cfg-pora-seg button.is-active[data-pora="noc"] { background: var(--kp-brown); border-color: var(--kp-brown); color: #fff8ee; box-shadow: 0 1px 3px rgba(62,31,18,.16); }
    .cfg-stage-card { transition: background .7s ease; }
    .cfg-stage-card.is-noc { background: linear-gradient(160deg,#1a2033,#0e1320 55%,#080b14); }
    .cfg-stage-card.is-noc .cfg-stage-top { background: rgba(255,255,255,.06); border-bottom-color: rgba(196,144,96,.22); }
    .cfg-stage-card.is-noc .cfg-stage-eyebrow { color: var(--kp-gold); }
    .cfg-stage-card.is-noc .cfg-stage-model { color: #f4ece0; }
    .cfg-stage-card.is-noc .cfg-widok-seg { background: #282733; border-color: #6c584c; }
    .cfg-stage-card.is-noc .cfg-widok-seg button { color: #e8dacd; }
    .cfg-stage-card.is-noc .cfg-widok-seg button:hover:not(.is-active):not(:disabled) { background: #39303a; color: #fff8ee; }
    .cfg-stage-card.is-noc .cfg-widok-seg button.is-active,
    .cfg-stage-card.is-noc #cfg-pora-seg button.is-active[data-pora="noc"] {
        background: #f6e8d5; border-color: var(--kp-gold-light); color: var(--kp-brown-dark); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
    .cfg-stage-card.is-noc .cfg-widok-seg button:focus-visible { outline-color: #ffd9a0; }
    .cfg-stage-card.is-noc .cfg-widok-seg button.is-active:focus-visible { outline-color: var(--kp-brown); }
    /* ── PRZEJŚCIE DZIEŃ⇄NOC „dwa akty" (Kamil 14.07: ma być premium/wow) ──
       Akt 1 (klik 🌙, natychmiast): .cfg-noc-tlo (niebo+gwiazdy+księżyc+kałuża
       światła) WJEŻDŻA opacity 1.1s = zmierzch zapada, a dzienny obraz dostaje
       .jest-zmierzch (filtr ciemnieje 1.05s) — dom po zmroku, światła zgaszone.
       W tle liczy się nocny widok (plakietka „Zapalam światła…").
       Akt 2 (nocny gotowy): noc PRZENIKA nad zmierzchem (.pora). ☀ = to samo przenikanie
       w drugą stronę — oba kierunki identyczne, bez masek i filtrów. */
    .cfg-stage img { z-index: 1; }   /* nad .cfg-noc-tlo; transition filtra przy regule bazowej niżej */
    .cfg-noc-tlo {
        position: absolute; inset: 0; z-index: 0; pointer-events: none;
        opacity: 0; transition: opacity 1.1s ease;
        background:
            /* kałuża światła „na ziemi" USUNIĘTA (Kamil 14.07: „ten cień podłogi mi się nie podoba") */
            radial-gradient(140px 110px at 88% 4%, rgba(190,214,255,.14), transparent 70%),
            radial-gradient(1.6px 1.6px at 11% 12%, rgba(255,255,255,.50), transparent 60%),
            radial-gradient(1.2px 1.2px at 23% 31%, rgba(255,255,255,.34), transparent 60%),
            radial-gradient(1.8px 1.8px at 36% 7%, rgba(255,255,255,.46), transparent 60%),
            radial-gradient(1.1px 1.1px at 48% 22%, rgba(255,255,255,.30), transparent 60%),
            radial-gradient(1.5px 1.5px at 61% 13%, rgba(255,255,255,.42), transparent 60%),
            radial-gradient(1.2px 1.2px at 72% 34%, rgba(255,255,255,.28), transparent 60%),
            radial-gradient(1.7px 1.7px at 81% 19%, rgba(255,255,255,.44), transparent 60%),
            radial-gradient(1.2px 1.2px at 92% 40%, rgba(255,255,255,.26), transparent 60%),
            radial-gradient(1.4px 1.4px at 6% 45%, rgba(255,255,255,.30), transparent 60%),
            radial-gradient(1.2px 1.2px at 55% 3%, rgba(255,255,255,.36), transparent 60%),
            linear-gradient(160deg, #1a2033, #0e1320 55%, #080b14);
    }
    .cfg-stage-card.is-noc .cfg-noc-tlo { opacity: 1; }
    /* drugi zestaw gwiazd — migocze przeciwfazowo do stałych; niebo przestaje być tapetą */
    .cfg-noc-tlo::after {
        content: ''; position: absolute; inset: 0; pointer-events: none;
        background:
            radial-gradient(1.5px 1.5px at 17% 21%, rgba(255,255,255,.55), transparent 60%),
            radial-gradient(1.2px 1.2px at 42% 15%, rgba(255,246,230,.42), transparent 60%),
            radial-gradient(1.6px 1.6px at 67% 26%, rgba(255,255,255,.50), transparent 60%),
            radial-gradient(1.1px 1.1px at 86% 11%, rgba(210,230,255,.40), transparent 60%),
            radial-gradient(1.3px 1.3px at 29% 42%, rgba(255,255,255,.34), transparent 60%);
        opacity: .62;
    }
    /* GWIAZDY STOJĄ (animacja cfgGwiazdy USUNIĘTA — Kamil 14.07: „gaśnie i znowu się zapala").
       Cała warstwa pulsowała `opacity .28↔1` co 4,5 s — to nie było migotanie gwiazd, tylko
       CAŁE NIEBO oddychające w unisono. Do tego była to JEDYNA pętla infinite, której nic nie
       zatrzymywało: leciała również na gotowej scenie nocnej, w nieskończoność. */
    /* Bez `drop-shadow` — patrz reguła bazowa `.cfg-stage img`. Tu było dodatkowo groźniejsze:
       CZARNY prostokąt na .5, wpuszczany PŁYNNIE przez 1,05 s (`transition: filter`).
       Zostaje samo przyciemnienie i wyprane kolory — to, co w zmierzchu faktycznie robi robotę. */
    .cfg-stage img.jest-zmierzch { filter: brightness(.4) saturate(.55); }
    /* WNĘKA na czas pierwszego renderu — proporcje renderu (700:1512), więc gotowy obraz
       wchodzi w DOKŁADNIE to samo miejsce (zero skoku „duże→mniejsze", it. 15).
       ── Kamil 14.07 (wybór z wariantów pokazanych na demie, już usuniętym): „ten przygotowuję podgląd
       nie wygląda mi to na premium odczucie przygotowania podglądu". Było: WYPEŁNIONA płyta
       + złoty połysk `cfgSkelShim 1.7s infinite` = standardowy „skeleton" z byle jakiej
       aplikacji — wielki beżowy prostokąt, który UDAJE drzwi i zajmuje 70% kadru.
       Jest: PUSTA, OŚWIETLONA NISZA czekająca na produkt — światło od góry (radial), lekkie
       przyciemnienie przy krawędziach (linear) i miękki cień pod spodem. Wygląda jak
       zaprojektowana witryna, nie jak ładowanie. ZERO pętli — jedyne, co się rusza w kadrze,
       to pasek wskaźnika, i tylko w jedną stronę. */
    .cfg-skeleton { position: absolute; inset: 12px 18px; z-index: 1; display: flex;
                    align-items: center; justify-content: center; pointer-events: none; }
    .cfg-skeleton[hidden] { display: none; }
    .cfg-skel-drzwi {
        position: relative; overflow: hidden;   /* overflow: smuga światła nie wychodzi poza płytę */
        height: 100%; aspect-ratio: 700 / 1512; max-width: 100%;
        border-radius: 2px;
        background: linear-gradient(180deg, rgba(122,82,22,.05), rgba(122,82,22,.09));
        box-shadow: inset 0 0 0 1px rgba(196,144,96,.14);
    }
    .cfg-skel-drzwi svg { position: absolute; inset: 0; width: 100%; height: 100%; }
    /* 5 wzorów leży na sobie, widoczny jest jeden — losuje cfgRysunekLosuj().
       Jawna reguła, bo `position:absolute` nie ustawia `display` i wolę nie polegać
       na tym, że [hidden] zadziała na <svg> w każdej przeglądarce. */
    .cfg-rys-wzor[hidden] { display: none; }
    /* ⛔ ŻADNEGO `vector-effect: non-scaling-stroke` — przy nim `stroke-dasharray` liczy się
       w PIKSELACH EKRANU, a nie w jednostkach viewBoksa. SVG jest skalowany ~2,85×, więc
       dasharray=434 pokrywała ~1/3 obwodu, a reszta prostokąta wpadała w przerwę dash-patternu
       i drzwi NIGDY się nie domykały (niezależnie od animacji). stroke-width w jednostkach
       viewBoksa: .7 ≈ 2 px na ekranie. */
    .cfg-rys {
        fill: none; stroke: #b8843f; stroke-width: .7; stroke-linecap: round; stroke-linejoin: round;
        stroke-dasharray: var(--d); stroke-dashoffset: var(--d);
        animation: cfgKresl 1.5s cubic-bezier(.45,0,.3,1) forwards;
        animation-delay: var(--op, 0s);   /* kolejność kreślenia: rama → skrzydło → płyciny → klamka */
    }
    @keyframes cfgKresl { to { stroke-dashoffset: 0; } }
    /* JEDNA PRĘDKOŚĆ — bez wariantu „szybko" (Kamil 15.07.2026: „żeby te rysunki nie
       robiły się tak szybko, dostosuj jedną prędkość i zostaw, żeby to wyglądało premium,
       bo generator nie jest taki szybki").
       Był wariant `.szybko` (.62 s + opóźnienia ×.42 ≈ 1,6 s), dobrany pod czas renderu.
       Efekt: rysunek ścigał się z generatorem i wyglądał nerwowo. Teraz zmiana koloru
       kreśli się DOKŁADNIE tak samo jak wejście na stronę — spokojnie, ~3,8 s.
       Jeśli render wróci wcześniej, rysunek zostaje przerwany i obraz wchodzi na jego
       miejsce; to lepsze niż pośpiech w każdej klatce. Klasa `.szybko` jest już nigdzie
       nie dodawana — została tylko sprzątana w cfgShowLoading(false) dla porządku. */
    @media (prefers-reduced-motion: reduce) {
        .cfg-rys { animation: none; stroke-dashoffset: 0; }
        .cfg-skel-swiatlo { animation: none; opacity: 0; }
    }
    /* Smuga światła schodzi RAZEM z rysikiem i gaśnie na dole. Jednorazowa (forwards) —
       po narysowaniu drzwi w kadrze nie rusza się już nic poza paskiem wskaźnika. */
    /* WYCISZONE (Kamil 15.07.2026: „te wow przejścia przebłysków uspokój").
       Było: .35 kremu + .55 złota na 30% wysokości = jasna smuga przelatująca przez
       kadr — czytało się jak błysk, nie jak rysik. Jest: ledwie widoczne muśnięcie
       (.12 / .18), niższe i wolniejsze. Ma sugerować, że coś tam jedzie, a nie świecić. */
    .cfg-skel-swiatlo {
        position: absolute; left: 0; right: 0; height: 22%; z-index: 2; pointer-events: none;
        background: linear-gradient(180deg, transparent, rgba(255,236,200,.12) 60%, rgba(196,144,96,.18));
        animation: cfgZjazd 3.4s cubic-bezier(.4,0,.35,1) forwards;
    }
    @keyframes cfgZjazd { from { top: -30%; } to { top: 100%; opacity: 0; } }
    .cfg-stage img[hidden] { display: none; }
    /* ŚWIT — baza (obraz nocny) JAŚNIEJE i traci kolor, a dzień „wywołuje się" nad nią.
       Dzięki temu obie warstwy schodzą się w jednej ekspozycji (zamiast stawiać obok
       siebie skrajnie ciemną noc i pełny dzień = skok, który Kamil czytał jako „mocne
       przejście"). Specyficzność 0,2,1 bije `.cfg-stage img { filter: drop-shadow(…) }`;
       cień powtórzony w każdej klatce, inaczej drzwi gubią go na czas animacji. */
    /* ŚWIT: baza NIE jest już animowana (klasa .swit-noc USUNIĘTA — Kamil 14.07: „animacja
       leci i zaraz takie jeb i jest oryginał"). Powód „jeba": animacja bazy kończyła się
       `forwards` na rozjaśnieniu (brightness 1.12 działał TAKŻE na cień, bo stał po
       drop-shadow), a `classList.remove` przy domknięciu zdejmował to SKOKIEM → nagły
       powrót do oryginalnej jasności. Teraz pod spodem nic się nie dzieje: dzień po prostu
       przenika nad nocą i po domknięciu baza wygląda 1:1 tak, jak wyglądała warstwa. */
    /* ── WARSTWA PRZEJŚCIA dzień⇄noc (Kamil 14.07: „mam oba obrazki, chcę ładniejsze
       przejście") ──  Stary sposób gasił obraz do 0 i wstawiał nowy — przez chwilę
       BYŁO PUSTO. Teraz nowy obraz leży NAD starym i odsłania się miękką krawędzią:
       zmrok spływa z góry (i po drodze zapala szyby), świt wstaje od dołu.
       Krawędź = animowany stop gradientu w masce (@property, bo bez rejestracji
       custom property nie interpoluje się płynnie — tylko skacze na końcu). */
    /* UWAGA: `display:none` MUSI mieć specyficzność ≥ `.cfg-stage img` (0,1,1) — inaczej
       reguła bazowa (`display:block`) wygrywa i warstwa wisi widoczna. Stąd selektor
       `.cfg-stage img.cfg-render-ov` niżej; sama `.cfg-render-ov` trzyma resztę stylów. */
    .cfg-render-ov {
        position: absolute; z-index: 2; pointer-events: none;
        object-fit: contain; will-change: opacity;
        /* Warstwa jest <img> W ŚRODKU .cfg-stage, więc łapie WSZYSTKIE reguły
           `.cfg-stage img` (m.in. `transform: translate(-50%,-50%)` i max-height per
           breakpoint) — bez tego wjeżdżała przesunięta o pół obrazu obok drzwi.
           Geometrię nadajemy z JS (px), więc kasujemy transform/limity/cień. */
        /* transform BEZ !important — ODWRÓCENIE DRZWI go animuje, a w @keyframes `!important`
           jest ignorowane, więc `transform: none !important` ZABLOKOWAŁOBY animację (ta sama
           pułapka co z `filter` przy świcie, it. 8). `none` zostaje jako stan spoczynkowy;
           nic innego transformu tu nie ustawia — `.cfg-stage img` ma dziś `transform: none`
           (dawny `translate(-50%,-50%)` zniknął przy przebudowie kadru w it. 12/15). */
        transform: none; max-width: none !important; max-height: none !important;
        margin: 0 !important;
    }
    /* filter BEZ !important (w @keyframes !important jest ignorowane, więc `filter: none
       !important` zablokowałoby animację świtu) — wystarczy wyższa specyficzność niż
       `.cfg-stage img { filter: drop-shadow(...) }`. */
    /* ⛔ POZYCJA I Z-INDEX MUSZĄ BYĆ TUTAJ, przy specyficzności 0,2,1 — NIE w `.cfg-render-ov` (0,1,0).
       TO BYŁ BUG „na telefonie pojawiały się dwie sztuki drzwi" (Kamil 14.07.2026, tylko mobile):
       reguła `.cfg-stage img { position: relative; z-index: 1 }` (0,1,1) BIŁA `.cfg-render-ov
       { position: absolute }` (0,1,0) → warstwa przenikania wypadała z pozycjonowania, wchodziła
       w NORMALNY UKŁAD i lądowała jako DRUGIE DRZWI obok bazy.
       Dlaczego na desktopie było OK: przy ≥981px `.cfg-right .cfg-stage img` (0,3,1) i tak
       przywracała `position: absolute`. Poniżej 981px nic tego nie robiło.
       ⚠ Dotyczyło WSZYSTKICH przejść przez warstwę (dzień⇄noc też) — czyli mobile miał to zepsute,
       odkąd warstwa istnieje; obrót drzwi tylko uczynił to widocznym. */
    .cfg-stage img.cfg-render-ov { filter: none; display: none; position: absolute; z-index: 2; }   /* 0,2,1 — bije `.cfg-stage img` (0,1,1) */
    .cfg-stage img.cfg-render-ov.pora,
    .cfg-stage img.cfg-render-ov.zmiana,
    .cfg-stage img.cfg-render-ov.obrot { display: block; }
    /* JEDNA animacja na wszystko: SAMO przenikanie (opacity), zero filtrów i masek.
       Historia (nie wracać): wipe „zmrok spływa przez drzwi" — Kamil: „przelatywanie
       zamień na zwykłe przenikanie jak przy dniu"; prześwietlenia/rozjaśnienia — kończyły
       się stanem, którego baza po podmianie NIE ma, więc dawały skok („jeb"). Stan końcowy
       warstwy = dokładnie to, co pokazuje baza po domknięciu → przejście jest niewidoczne. */
    .cfg-render-ov.pora   { animation: cfgPrzenikaj 1.2s cubic-bezier(.4,0,.2,1) forwards; }   /* dzień⇄noc */
    .cfg-render-ov.zmiana { animation: cfgPrzenikaj .55s cubic-bezier(.4,0,.2,1) forwards; }   /* zmiana konfiguracji */
    @keyframes cfgPrzenikaj { from { opacity: 0; } to { opacity: 1; } }

    /* ── ODWRÓCENIE DRZWI: „Z zewnątrz" ⇄ „Od środka" (Kamil 14.07.2026: „chcę pokazać, że
       tak wyglądają z zewnątrz jak kliknę, a jak kliknę od środka to tak wyglądają") ──
       Jedyne przejście w konfiguratorze, które COŚ ZNACZY zamiast ozdabiać: to są dwie strony
       TEGO SAMEGO skrzydła, więc drzwi po prostu obracają się do nas drugą stroną.
       Było: `img.src = url` + cfgImgN (opacity .3→1) = stary widok znikał, nowy zapalał się od 30%.
       DWIE „ŚCIANY": baza (stary widok) odwraca się od nas do −180°, warstwa (nowy widok)
       przychodzi zza niej ze 180° do 0°. `backface-visibility: hidden` jest OBOWIĄZKOWE —
       bez niego w połowie ruchu widać OBA obrazy naraz, każdy pod innym kątem (kalejdoskop).
       Z nim w każdej chwili widać dokładnie jedną stronę, jak przy odwracaniu prawdziwej płyty.
       Domknięcie jest bezpieczne: warstwa kończy na rotateY(0) z krycien 1, a baza dostaje
       wtedy ten sam obraz i traci klasę → wraca do rotateY(0) POD nią. Stan końcowy obu jest
       IDENTYCZNY, więc zdjęcie warstwy jest niewidoczne (zasada z it. 14/18). */
    .cfg-stage img.obrot-baza { backface-visibility: hidden; animation: cfgObrotA .62s cubic-bezier(.45,0,.25,1) forwards; }
    .cfg-render-ov.obrot      { backface-visibility: hidden; animation: cfgObrotB .62s cubic-bezier(.45,0,.25,1) forwards; }
    /* PAS I SZELKI: `backface-visibility` powinno samo chować stronę odwróconą tyłem, ale baza ma
       `filter: drop-shadow(...)`, a filtr tworzy własny kontekst i potrafi zaburzyć backface.
       Nie zweryfikuję tego (animacji nie widać w sterowanej przeglądarce), więc dokładam TWARDĄ
       zamianę krycia dokładnie na półmetku — w 50% obie strony są na kancie (rotateY ±90°), więc
       przeskok krycia jest NIEWIDOCZNY, a gdyby backface zawiódł, i tak nigdy nie zobaczysz
       dwóch obrazów naraz. Baza kończy na opacity 0 — bezpiecznie, bo finisz() i tak ustawia
       `opacity = '1'` i zdejmuje klasę POD gotową warstwą. */
    @keyframes cfgObrotA {
        0%   { transform: rotateY(0deg);    opacity: 1; }
        49.9%{ opacity: 1; }
        50%  { opacity: 0; }
        100% { transform: rotateY(-180deg); opacity: 0; }
    }
    @keyframes cfgObrotB {
        0%   { transform: rotateY(180deg);  opacity: 0; }
        49.9%{ opacity: 0; }
        50%  { opacity: 1; }
        100% { transform: rotateY(0deg);    opacity: 1; }
    }
    /* WSKAŹNIK NOCNY = DOKŁADNIE ten sam wzorzec co dzienny (`.cfg-gen-min`), tylko jasnym
       atramentem. Zero własnych stylów poza pozycją.
       ── HISTORIA (nie wracać) ── ITERACJA 7 postawiła tu PLAKIETKĘ: szkło (backdrop-filter
       blur 9px), złota ramka, poświata, pulsujący 🌙 (cfgMoonPulse 2,4 s infinite),
       przelatujący połysk (cfgNocPolysk 2,6 s infinite), licznik % i narracja etapów.
       ITERACJA 17 wyczyściła ten kicz — ale TYLKO po stronie dziennej; nocna plakietka
       została i to JĄ Kamil opisał 14.07: „jest światełko, coś przelatuje, zaraz gaśnie
       i znowu się zapala". Dosłownie: 🌙 = światełko (drop-shadow .5↔.95 w pętli),
       połysk = coś przelatuje. Dwie pętle o niewspółmiernych okresach (2,4 s vs 2,6 s)
       dudniły z okresem ~31 s, więc efekt za każdym razem wyglądał inaczej.
       Teraz: pozycja i nic więcej — treść niesie wspólny `.cfg-gen-min`. */
    .cfg-noc-info {
        position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3;
        pointer-events: none; max-width: 92%;
    }
    .cfg-noc-info[hidden] { display: none; }
    /* Cena i notki na ciemnej karcie muszą być jasne (były ciemne na ciemnym) */
    .cfg-stage-card.is-noc .cfg-price-label { color: #d9d2c4; }
    .cfg-stage-card.is-noc #cfg-price-value, .cfg-stage-card.is-noc #cfg-price-num { color: #ffd9a0; }
    .cfg-stage-card.is-noc #cfg-price-value .od { color: #c9b895; }
    .cfg-stage-card.is-noc .cfg-cta-note { color: #b9b2a4; }
    .cfg-stage-card.is-noc .cfg-price-details { color: #e8e1d3; }
    .cfg-stage-card.is-noc .cfg-chip { background: rgba(255,255,255,.92); }
    /* Podgląd na telefonie zwija wyłącznie jawny klik. */
    .cfg-live-rzad { display: flex; align-items: center; gap: 6px; }
    .cfg-zwin { display: none; }   /* desktop: nie pokazujemy — panel nikomu nie przeszkadza */
    .cfg-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; animation: cfgPulse 1.8s infinite; }
    @keyframes cfgPulse { 0%{box-shadow:0 0 0 0 rgba(22,163,74,.5)} 70%{box-shadow:0 0 0 7px rgba(22,163,74,0)} 100%{box-shadow:0 0 0 0 rgba(22,163,74,0)} }

    /* perspective: bez niej rotateY jest płaski i czyta się jak ŚCIŚNIĘCIE obrazu w poziomie,
       a nie obrót bryły. 1600px = daleki obserwator → obrót spokojny, bez efektu rybiego oka.
       `.cfg-stage` i tak jest już kontenerem pozycjonującym (position: relative), więc
       perspective nie zmienia tu niczego w układzie. */
    .cfg-stage { position: relative; perspective: 1600px; min-height: 440px; display: flex; align-items: center; justify-content: center; padding: 18px; }
    /* STAŁY BOX: width/height zamiast width:auto+max-height — inaczej rozmiar elementu
       zależy od PROPORCJI PLIKU i przy podmianie (startowe zdjęcie modelu → render)
       obraz skacze „mały → duży" (Kamil 14.07). object-fit: contain wpisuje obraz w box
       bez deformacji, więc layout stoi nieruchomo przy każdej zmianie src. */
    /* ⛔ BEZ `drop-shadow` — RENDER MA JUŻ WŁASNY CIEŃ (Kamil 15.07.2026 o kroku 8: „są dwa cienie…
       robi taki nie ładny Z KONFIGURATORA"). Tu była przyczyna tego „nieładnego":
       ZMIERZONE — obraz z generatora NIE MA ani jednego w pełni przezroczystego piksela, jego alfa
       to PEŁNY PROSTOKĄT 700×1512 (rogi 243-247/255). `drop-shadow` liczy cień Z ALFY, więc nie miał
       jak obrysować drzwi — robił wielki rozmyty PROSTOKĄT pod całym kadrem („szarawy, przezroczysty").
       Cień drzwi rysuje generator i wtapia go w obraz; od 15.07 jest dodatkowo wzmacniany u źródła
       (`_wzmocnij_cien` w generowanie_zewnetrznych.py) — CSS nie ma tu nic do roboty.
       `transition` ZOSTAJE — obsługuje zapadający zmierzch (`.jest-zmierzch` niżej).
       ⛔ Nie dokładać cienia „dla premium" — na tych renderach wyjdzie prostokąt, nie cień.
       (Cień na podłodze to osobny, celowy element: `.cfg-floor` — gradient, nie filtr.) */
    .cfg-stage img { width: 100%; height: 470px; max-width: 100%; object-fit: contain; display: block; transition: opacity .35s ease, filter 1.05s ease; }
    /* WSKAŹNIK NIE ZASŁANIA PRODUKTU (Kamil 14.07: „zobacz gdzie się ustawia na początku
       to całe rysowanie… to nie jest styl premium").
       Było: `justify-content: center` + kremowy scrim `rgba(253,247,236,.55)` + `backdrop-filter:
       blur(1.5px)` → podpis lądował NA ŚRODKU DRZWI, a cała scena szła za mgłę.
       (1) BLUR: to relikt efektu, który Kamil odrzucił już w it. 15 („blur to przesada") —
           przy okazji kosztował GPU przy każdym repaincie.
       (2) SCRIM: nie miał czego przyciemniać. Przy 1. renderze obrazu jeszcze NIE MA (scenę
           trzyma szkielet), a przy zmianie konfiguracji obraz i tak przygasa sam
           (`img.style.opacity = .45` w cfgShowLoading) — mgła robiła to drugi raz.
       (3) POZYCJA: `flex-end` + 18px → wskaźnik siada DOKŁADNIE tam, gdzie nocny
           (`.cfg-noc-info { bottom: 18px }`). Jeden język, dwa konteksty; drzwi czyste. */
    /* padding-bottom 5px (było 18): rysunek sięga 12 px od dołu sceny, więc na 18 px pasek
       siedziałby NA jego dolnej ramie. Teraz jest pod nią, w wolnym marginesie kadru. */
    .cfg-render-loading { position: absolute; inset: 0; display: flex; flex-direction: column;
                          align-items: center; justify-content: flex-end; padding-bottom: 5px;
                          gap: 12px; pointer-events: none; transition: opacity .25s; }
    .cfg-render-loading[hidden] { display: none; }
    /* "paint" — złota fala przechodzi po drzwiach po zmianie koloru */
    .cfg-stage::after { content:''; position:absolute; inset:0; pointer-events:none; z-index:2; opacity:0; }
    .cfg-stage.painting::after {
        opacity:1;
        background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.42) 45%, rgba(196,144,96,.30) 52%, transparent 68%);
        background-size: 240% 100%;
        animation: cfgPaint 1.05s cubic-bezier(.4,0,.2,1);
    }
    @keyframes cfgPaint { from { background-position: 130% 0; } to { background-position: -50% 0; } }
    /* TYLKO opacity — na desktopie obrazek jest wyśrodkowany przez transform:translate(-50%,-50%);
       animacja z transform:scale() kasowałaby to wyśrodkowanie i obrazek „skakał" z prawego dołu na środek. */
    @keyframes cfgImgIn { from { opacity: .3; } to { opacity: 1; } }
    /* JEDEN wskaźnik przygotowania podglądu na CAŁY konfigurator — dzienny i nocny to ten sam
       wzorzec: podpis + włos paska. Zero ikon, ramek, teł i procentów (Kamil 14.07:
       „w stylu premium, nie tak kiczowato"). Atrament przełącza kontekst karty (`.is-noc`). */
    .cfg-gen-min { display: flex; flex-direction: column; align-items: center; gap: 9px;
                   animation: cfgWskaznikIn .4s ease; }
    /* ⛔ WŁASNE keyframes, NIE pożyczone `cfgNocInfoIn` — to była mechaniczna przyczyna skargi
       „zobacz GDZIE SIĘ USTAWIA na początku to całe rysowanie". `cfgNocInfoIn` nosi
       `transform: translateX(-50%)` (potrzebny plakietce nocnej, bo tamta stoi na `left:50%`).
       Tu podpis jest centrowany FLEXEM, więc ten transform znaczył „przesuń w lewo o pół
       własnej szerokości" — wskaźnik wjeżdżał OBOK, a po 0,4 s (brak `forwards`) transform
       znikał i podpis SKAKAŁ na środek. Regresja z it. 17 (przepisanie panelu na minimalizm). */
    @keyframes cfgWskaznikIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
    .cfg-gen-pasek { width: 150px; height: 2px; border-radius: 2px; background: rgba(122,82,22,.14); overflow: hidden; }
    .cfg-gen-pasek i {
        display: block; height: 100%; width: 0; border-radius: 2px;
        background: linear-gradient(90deg, #b98f42, var(--kp-gold));
        transition: width .5s cubic-bezier(.4,0,.2,1);
    }
    .cfg-render-txt { font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
                      color: rgba(122,82,22,.62); }
    /* Ten sam wskaźnik na ciemnej karcie — zmienia się WYŁĄCZNIE atrament. */
    .cfg-stage-card.is-noc .cfg-render-txt { color: rgba(246,239,228,.62); }
    .cfg-stage-card.is-noc .cfg-gen-pasek { background: rgba(255,255,255,.13); }

    .cfg-summary { padding: 4px 16px 16px; }
    .cfg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
    .cfg-chip { font-size: .7rem; font-weight: 600; color: var(--kp-brown-dark); background: rgba(255,255,255,.72); border: 1px solid var(--kp-line); padding: 4px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; }
    .cfg-chip i { color: var(--kp-gold); font-size: .66rem; }
    .cfg-chip .cfg-chip-sw { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); }
    .cfg-cta { width: 100%; padding: 15px; border: none; border-radius: 12px; cursor: pointer; background: linear-gradient(135deg,var(--kp-brown),var(--kp-brown-mid)); color: #fff; font-size: .92rem; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 8px 20px rgba(85,45,28,.3); transition: all .2s; text-decoration: none; }
    .cfg-cta:hover { background: linear-gradient(135deg,var(--kp-brown-dark),var(--kp-brown)); transform: translateY(-1px); box-shadow: 0 12px 26px rgba(85,45,28,.38); color:#fff; }
    .cfg-cta-note { text-align: center; font-size: .7rem; color: var(--kp-muted); margin: 9px 0 0; line-height: 1.4; }
    .cfg-cta-note i { color: var(--kp-gold); margin-right: 4px; }
    .cfg-share { width: 100%; margin-top: 8px; padding: 9px; border-radius: 10px; border: 1.5px solid var(--kp-line); background: rgba(255,255,255,.8); color: var(--kp-brown); font-weight: 700; font-size: .76rem; cursor: pointer; transition: all .15s; font-family: inherit; }
    .cfg-share:hover { border-color: var(--kp-gold); background: #fff; transform: translateY(-1px); }
    .cfg-share i { margin-right: 6px; color: var(--kp-gold); }
    /* z-index 3000: toast musi być NAD modalami (foto 320, share 1300) —
       komunikaty auto-dopasowania ginęły pod modalem (Kamil 09.07.2026) */
    .cfg-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px); background: var(--kp-brown-dark); color: #fff; font-size: .82rem; font-weight: 600; padding: 11px 20px; border-radius: 11px; box-shadow: 0 10px 26px rgba(0,0,0,.28); opacity: 0; pointer-events: none; transition: all .3s cubic-bezier(.16,1,.3,1); z-index: 3000; }
    .cfg-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
    .cfg-toast i { color: #7dd67d; margin-right: 7px; }
    .cfg-toast-warn { background: #8a4b1e; }
    .cfg-toast-warn i { color: #ffcf8f; }
    /* ── Lightbox: klik na render = podgląd pełnoekranowy ── */
    .cfg-stage img { cursor: zoom-in; }
    .cfg-lightbox { position: fixed; inset: auto; top: var(--cfg-lb-top, 0px); left: var(--cfg-lb-left, 0px); width: var(--cfg-lb-width, 100%); height: 100%; height: var(--cfg-lb-height, 100dvh); box-sizing: border-box; max-width: none; max-height: none; margin: 0; padding: calc(70px + env(safe-area-inset-top, 0px)) 12px calc(40px + env(safe-area-inset-bottom, 0px)); overflow: hidden; border: 0; background-color: #f6f1e9; background-image: radial-gradient(120% 75% at 50% 32%, #fcfaf6 0%, #f5eee4 55%, #ebe1d2 100%); color: #3a2a1e; z-index: 300; display: none; align-items: center; justify-content: center; overscroll-behavior: contain; }
    .cfg-lightbox[open] { display: flex; }
    .cfg-lightbox::backdrop { background: rgba(246,241,233,.94); }
    /* gotowe: spokojne, jasne tło galerii; jednolite, żeby nie walczyło z renderem */
    .cfg-lightbox[data-state='gotowe'] { background-color: #ece7df; background-image: none; }
    html.cfg-lightbox-open, body.cfg-lightbox-open { overflow: hidden; overscroll-behavior: none; }
    /* bez `drop-shadow` — powiększenie pokazuje TEN SAM render (alfa = pełny prostokąt), więc cień
       wychodził czarnym prostokątem pod całym zdjęciem */
    .cfg-lightbox img { width: auto; height: auto; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-out; }
    .cfg-lightbox-close { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 16px; min-height: 44px; min-width: 44px; padding: 0 16px; border: 1px solid #dccfbd; border-radius: 999px; background: #fff; color: #3a2a1e; box-shadow: 0 1px 2px rgba(58,42,30,.08), 0 4px 12px rgba(58,42,30,.06); font: inherit; font-weight: 600; cursor: pointer; z-index: 2; touch-action: manipulation; }
    /* celowany selektor (0,3,0) wygrywa ze wspólną regułą .cfg-lightbox-close:focus-visible bez !important */
    .cfg-lightbox .cfg-lightbox-close:focus-visible { outline: 2px solid #8a5a2b; outline-offset: 2px; }
    .cfg-lightbox .ag-hd-launch:focus-visible { outline-color: #8a5a2b; }
    .cfg-lightbox-hint { position: absolute; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); white-space: nowrap; left: 50%; transform: translateX(-50%); color: #6b5a4b; font-size: .78rem; }
    
    /* Oczekiwanie to część podglądu: ilustracja → gotowy obraz, bez kolejnego kliknięcia. */
    .cfg-lightbox [hidden] { display: none !important; }
    .cfg-lightbox-image { opacity: 0; visibility: hidden; transform: scale(.98);
        transition: opacity 240ms cubic-bezier(.23,1,.32,1), transform 240ms cubic-bezier(.23,1,.32,1); }
    .cfg-lightbox[data-state='gotowe'] .cfg-lightbox-image { opacity: 1; visibility: visible; transform: none; }
    .cfg-lb-wait { position: absolute; inset: calc(70px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px));
        display: flex; flex-direction: column; align-items: center; justify-content: center; justify-content: safe center; gap: 10px; text-align: center; overflow: auto; overscroll-behavior: contain; }
    .cfg-lb-art { position: relative; flex: 0 1 230px; min-height: 64px; width: 160px; max-width: 60%; max-height: 44%; margin-bottom: 6px; overflow: hidden; }
    .cfg-lb-art svg { display: block; width: 100%; height: 100%; }
    .cfg-lb-sheen { transform-box: view-box; animation: cfgLbSheen 2600ms cubic-bezier(.45,0,.55,1) infinite; }
    .cfg-lb-dot { transform-box: fill-box; transform-origin: center; opacity: .3; animation: cfgLbDot 1400ms ease-in-out infinite; }
    .cfg-lb-dot:nth-of-type(2) { animation-delay: 180ms; }
    .cfg-lb-dot:nth-of-type(3) { animation-delay: 360ms; }
    .cfg-lb-model { color: #8a5a2b; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin: 0; }
    .cfg-lb-model:empty { display: none; }
    .cfg-lb-wait h2 { color: #3a2a1e; font-family: inherit; font-weight: 600; font-size: clamp(1.15rem, 4.6vw, 1.5rem); line-height: 1.25; margin: 0; max-width: 340px; text-wrap: balance; }
    .cfg-lb-copy { color: #6b5a4b; font-size: .9rem; line-height: 1.5; margin: 0; max-width: 300px; text-wrap: pretty; }
    .cfg-lb-retry { margin-top: 6px; min-height: 44px; padding: 10px 22px; background: #8a5a2b; color: #fff; border: 1px solid #8a5a2b; border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer; touch-action: manipulation; }
    .cfg-lb-retry:focus-visible { outline: 2px solid #8a5a2b; outline-offset: 3px; }
    .cfg-lightbox[data-state='blad'] .cfg-lb-art { opacity: .55; }
    .cfg-lightbox[data-state='blad'] .cfg-lb-sheen, .cfg-lightbox[data-state='blad'] .cfg-lb-dot { animation: none; opacity: 0; }
    @keyframes cfgLbSheen { 0% { opacity: 0; transform: translateY(0); } 18% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; transform: translateY(190px); } }
    @keyframes cfgLbDot { 0%, 100% { opacity: .3; transform: scale(.8); } 45% { opacity: 1; transform: scale(1); } }
    @media (hover: hover) and (pointer: fine) {
        .cfg-lightbox-close:hover { background: #f7f1e8; }
        .cfg-lb-retry:hover { background: #774b22; border-color: #774b22; }
    }
    @media (max-height: 420px) {
        .cfg-lb-wait { gap: 6px; }
        .cfg-lb-art { margin-bottom: 0; }
        .cfg-lb-wait h2 { font-size: 1.1rem; }
        .cfg-lb-copy { font-size: .85rem; }
    }
    @media (prefers-reduced-motion: reduce) {
        .cfg-lb-sheen { animation: none; opacity: 0; }
        .cfg-lb-dot { animation: none; opacity: .6; transform: none; }
        .cfg-lightbox-image { transform: none; transition: opacity 160ms linear; }
    }

    /* ── „Drzwi na zdjęciu Twojego domu" ── */
    .cfg-foto-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
        line-height: 1.25; text-align: center; transition: border-color .15s, background-color .15s, color .15s; }
    .cfg-foto-btn i { margin: 0; flex: 0 0 auto; line-height: 1; color: var(--kp-gold); }
    .cfg-foto-btn:focus-visible { outline: 2px solid var(--kp-brown); outline-offset: 3px; }
    .cfg-stage-card.is-noc .cfg-foto-btn:focus-visible { outline-color: #ffd9a0; }
    .cfg-foto { position: fixed; inset: 0; background: rgba(28,18,11,.9); z-index: 320; display: flex; align-items: center; justify-content: center; padding: 18px; }
    .cfg-foto[hidden], .cfg-foto [hidden] { display: none !important; }
    .cfg-foto-top { flex-shrink: 0; gap: 12px; }
    .cfg-foto .cfg-foto-x { width: 44px; height: 44px; flex: 0 0 44px; }
    .cfg-foto .cfg-foto-body { min-height: 0; overscroll-behavior: contain; }
    .cfg-foto button, .cfg-foto summary { touch-action: manipulation; }
    .cfg-foto button:focus-visible, .cfg-foto input:focus-visible, .cfg-foto select:focus-visible, .cfg-foto summary:focus-visible { outline: 3px solid #93552e; outline-offset: 3px; }
    .cfg-foto button:disabled { opacity: .55; cursor: wait; transform: none; }
    .cfg-foto-model-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
    .cfg-foto-akcje { display: flex; gap: 8px; }
    .cfg-foto .cfg-foto-akcje button { flex: 1; min-height: 46px; width: auto; justify-content: center; font-family: inherit; }
    .cfg-foto-kolor-btn { background: #fff; color: var(--kp-brown); border: 1px solid var(--kp-line); border-radius: 11px; padding: 10px 16px; font-weight: 800; cursor: pointer; }
    .cfg-foto-kolor-btn:hover { background: #f3e4d0; }
    .cfg-foto-kolory { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; padding: 16px 20px 20px; }
    .cfg-foto-kolory-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 4px; }
    .cfg-foto-kolory-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); grid-auto-rows: minmax(132px, auto); align-content: start; gap: 10px; }
    .cfg-foto-kolor { position: relative; min-width: 0; min-height: 132px; display: flex; flex-direction: column; text-align: left; border: 1px solid #e5d7c5; border-radius: 12px; padding: 0; overflow: hidden; background: #fff; color: var(--kp-brown-dark); cursor: pointer; font-family: inherit; }
    .cfg-foto-kolor:hover { border-color: #b58b63; }
    .cfg-foto-kolor[aria-pressed="true"] { border-color: var(--kp-brown); box-shadow: 0 0 0 2px var(--kp-brown); background: #fffaf2; }
    .cfg-foto-kolor-probka { height: 76px; flex: 0 0 76px; width: 100%; display: block; background-size: cover; background-position: center; border-bottom: 1px solid rgba(84, 45, 28, .08); }
    .cfg-foto-kolor-podpis { display: flex; flex: 1; flex-direction: column; justify-content: center; padding: 9px 11px; gap: 3px; }
    .cfg-foto-kolor-nazwa { font-size: .84rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
    .cfg-foto-kolor-kod { font-size: .73rem; font-weight: 500; line-height: 1.3; color: #765443; }
    .cfg-foto-kolor-check { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--kp-brown); color: #fff; font-size: .7rem; border: 1px solid #fff; }
    .cfg-foto-kolor[aria-pressed="false"] .cfg-foto-kolor-check { display: none; }
    .cfg-foto-kolory-grupy { display: flex; border: 1px solid #e3d4c0; border-radius: 11px; padding: 3px; gap: 3px; background: #f1e8db; margin-bottom: 10px; }
    .cfg-foto-kolory-grupy button { flex: 1; min-width: 0; min-height: 44px; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--kp-brown); font-family: inherit; font-size: .84rem; font-weight: 700; line-height: 1.2; cursor: pointer; }
    .cfg-foto-kolory-grupy button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 4px rgba(84, 45, 28, .12); color: var(--kp-brown-dark); }
    .cfg-foto-kolory-szukaj { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 12px; border: 1px solid #e3d4c0; border-radius: 10px; background: #fff; color: #a67b52; margin-bottom: 8px; }
    .cfg-foto-kolory-szukaj input { width: 100%; min-width: 0; min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: var(--kp-brown-dark); font: inherit; font-size: 16px; }
    .cfg-foto-kolory-szukaj:focus-within { outline: 2px solid #93552e; outline-offset: 2px; }
    .cfg-foto .cfg-foto-kolory-szukaj input:focus-visible { outline: none; }
    .cfg-foto-kolory-info { margin: 6px 0 12px; color: #765443; font-size: .76rem; line-height: 1.45; }
    .cfg-foto-kolory-blad { color: #8b2d22; font-size: .82rem; line-height: 1.4; margin: 6px 0 10px; }
    .cfg-foto-kolory-blad:empty { display: none; }
    .cfg-foto-kolor-wlasny { padding: 0 0 14px; margin: 0 0 14px; border-bottom: 1px solid #e3d4c0; }
    .cfg-foto-kolor-wlasny label { display: block; color: var(--kp-brown-dark); font-size: .86rem; font-weight: 700; margin-bottom: 8px; }
    .cfg-foto-kolor-wlasny-rzad { display: flex; flex-wrap: wrap; gap: 8px; }
    .cfg-foto-kolor-system { display: flex; flex: 0 0 auto; border: 1px solid #e3d4c0; border-radius: 9px; padding: 2px; }
    .cfg-foto-kolor-system button { min-height: 44px; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--kp-brown); font-family: inherit; font-weight: 700; cursor: pointer; }
    .cfg-foto-kolor-system button[aria-pressed="true"] { background: #f1e8db; }
    .cfg-foto-kolor-wlasny input { flex: 1 1 120px; min-width: 0; width: 120px; min-height: 48px; border: 1px solid #e3d4c0; border-radius: 9px; padding: 10px 12px; background: #fff; font: inherit; font-size: 16px; text-transform: uppercase; }
    .cfg-foto-kolor-zastosuj { min-height: 48px; padding: 10px 16px; border: 1px solid var(--kp-brown); border-radius: 9px; background: var(--kp-brown); color: #fff; font-family: inherit; font-weight: 700; cursor: pointer; }
    .cfg-foto-kolor-wlasny .cfg-foto-kolory-info { margin-bottom: 0; }
    .cfg-foto-czesci { display: flex; gap: 8px; margin-bottom: 12px; }
    .cfg-foto-czesci button { flex: 1; }
    .cfg-foto-czesci button[aria-pressed="true"] { background: var(--kp-brown); color: #fff; }
    .cfg-foto-porownanie { margin: 12px 0; border-bottom: 1px solid var(--kp-line); }
    .cfg-foto-porownanie summary { padding: 12px 0; min-height: 44px; font-weight: 700; color: var(--kp-brown); cursor: pointer; font-size: .86rem; }
    .cfg-foto-porownanie p { margin: 4px 0 10px; font-size: .8rem; line-height: 1.4; color: #765443; }
    .cfg-foto-porownanie-akcje { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
    .cfg-foto-porownanie-tab { display: flex; gap: 8px; }
    .cfg-foto-porownanie-tab button { flex: 1; min-width: 0; text-align: left; overflow-wrap: anywhere; }
    .cfg-foto-porownanie-tab button[aria-pressed="true"] { background: var(--kp-brown); color: #fff; }
    .cfg-foto-porownanie-tab small { display: block; font-size: .73rem; font-weight: 500; margin-top: 4px; }
    .cfg-foto-pamiec { color: #765443; font-size: .76rem; line-height: 1.45; margin: 14px 0 0; }
    .cfg-foto-pamiec button { margin-top: 8px; }
    @media (max-width: 700px) {
        .cfg-foto .cfg-foto-akcje { flex: 1 1 100%; }
        .cfg-foto-kolory { padding: 12px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
        .cfg-foto-kolory-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .cfg-foto-kolor-wlasny input { flex: 1 1 120px; }
        .cfg-foto-kolor-zastosuj { flex: 1 1 100%; }
    }
    .cfg-foto-model-bar strong { color: var(--kp-brown-dark); font-size: 1rem; overflow-wrap: anywhere; }
    .cfg-foto-model-bar small { display: block; color: #765443; margin-top: 3px; font-size: .76rem; }
    .cfg-foto .cfg-foto-inny { min-height: 46px; padding: 10px 16px; box-shadow: none; }
    .cfg-foto-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; font-size: .84rem; color: #69432c; }
    .cfg-foto-status:empty { display: none; }
    .cfg-foto-ladowanie { width: 100%; min-width: 0; display: grid; gap: 9px; padding: 2px 0 6px; }
    .cfg-foto-ladowanie-tekst { color: #69432c; font-weight: 600; overflow-wrap: anywhere; }
    .cfg-foto-ladowanie-tor { width: 100%; height: 4px; overflow: hidden; border-radius: 999px; background: #e9ddce; }
    .cfg-foto-ladowanie-fill { display: block; width: 38%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #c6a478, #6f3f28); animation: cfgFotoLadowanie 1.6s linear infinite; }
    /* Ciągły sygnał oczekiwania, nie licznik procentów ani animacja wejścia. */
    @keyframes cfgFotoLadowanie { from { transform: translateX(-110%); } to { transform: translateX(275%); } }
    @media (prefers-reduced-motion: reduce) {
        .cfg-foto-ladowanie-fill { animation: none; transform: translateX(82%); opacity: .8; }
    }
    .cfg-foto-powtorz, .cfg-foto-wroc { min-height: 44px; padding: 8px 12px; border: 1px solid var(--kp-line); border-radius: 9px; background: #fff; color: var(--kp-brown); font-family: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
    .cfg-foto-powtorz:hover, .cfg-foto-wroc:hover { background: #f3e4d0; }
    .cfg-foto-wybor { min-height: 0; display: flex; flex-direction: column; padding: 16px 20px 20px; }
    .cfg-foto-wybor-head { flex-shrink: 0; }
    .cfg-foto-wybor-head h2 { margin: 14px 0 6px; font-size: 1.35rem; color: var(--kp-brown-dark); }
    .cfg-foto-wybor-head p { margin: 0 0 12px; font-size: .84rem; color: #765443; line-height: 1.45; }
    .cfg-foto-filtry { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
    .cfg-foto-filtry input, .cfg-foto-filtry select { min-height: 44px; min-width: 0; border: 1px solid var(--kp-line); border-radius: 9px; padding: 10px; font: inherit; font-size: 16px; background: #fff; color: var(--kp-brown-dark); }
    .cfg-foto-filtry input { flex: 1 1 180px; }
    .cfg-foto-filtry select { flex: 0 1 170px; }
    .cfg-foto-modele { overflow: auto; overscroll-behavior: contain; min-height: 0; padding: 4px; display: grid; grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)); gap: 10px; }
    .cfg-foto-model { position: relative; border: 2px solid transparent; border-radius: 10px; background: #fff; color: var(--kp-brown-dark); padding: 10px 6px; font: inherit; cursor: pointer; content-visibility: auto; contain-intrinsic-size: auto 184px; }
    .cfg-foto-model:hover { border-color: var(--kp-gold); background: #fffaf2; }
    .cfg-foto-model[aria-pressed="true"] { border-color: var(--kp-brown); background: #f6e9d8; }
    .cfg-foto-model img { width: 100%; height: 132px; object-fit: contain; display: block; margin: 0 auto 8px; }
    .cfg-foto-model span { display: block; font-size: .76rem; font-weight: 800; overflow-wrap: anywhere; }
    .cfg-foto-model[aria-pressed="true"]::after { content: 'Wybrany'; display: block; font-size: .68rem; margin-top: 3px; }
    .cfg-foto-dopasuj { margin: 14px 0; border-top: 1px solid var(--kp-line); border-bottom: 1px solid var(--kp-line); }
    .cfg-foto-dopasuj summary { padding: 13px 0; min-height: 44px; cursor: pointer; color: var(--kp-brown); font-weight: 700; font-size: .86rem; }
    .cfg-foto-dopasuj .cfg-foto-controls { padding: 0 0 14px; }
    .cfg-foto .cfg-foto-controls button, .cfg-foto .cfg-foto-upload-maly { min-height: 44px; }
    .cfg-foto-eksport { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
    @media (max-width: 700px) {
        .cfg-foto .cfg-foto-panel { max-height: 100dvh; }
        .cfg-foto .cfg-foto-top { padding: max(8px, env(safe-area-inset-top)) 12px 8px; }
        .cfg-foto .cfg-foto-body, .cfg-foto-wybor { padding: 12px 12px max(16px, env(safe-area-inset-bottom)); }
        .cfg-foto-tytul { line-height: 1.3; }
        .cfg-foto-model-bar > div { flex: 1 1 100%; }
        .cfg-foto-inny { width: 100%; justify-content: center; }
        .cfg-foto-modele { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
        .cfg-foto-model img { height: 112px; }
        .cfg-foto-filtry select { flex: 1 1 130px; }
        .cfg-foto .cfg-foto-hint { font-size: .78rem; }
    }
    /* Tryb osadzony (?embed=1) — modal foto żyje w <iframe> na krok8: chowamy
       całą powłokę SPA, zostaje sam modal (.cfg-foto jest SIOSTRĄ .cfg-wrap,
       więc go to nie dotyczy). #cfg-render-img zostaje w DOM — źródło drzwi to
       URL z cfgImgs, niezależny od widoczności. (Kamil 21.07.2026) */
    body.kp-embed { background: transparent; }
    body.kp-embed .kp-header, body.kp-embed .cfg-wrap { display: none !important; }
    .cfg-foto-panel { background: #fdf8f0; border-radius: 20px; width: min(1150px, 100%); max-height: 96vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
    .cfg-foto-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: linear-gradient(135deg, var(--kp-brown), var(--kp-brown-mid)); }
    .cfg-foto-tytul { color: #fff; font-weight: 800; font-size: .95rem; letter-spacing: .02em; }
    .cfg-foto-tytul i { color: var(--kp-gold); margin-right: 8px; }
    .cfg-foto-x { border: 0; background: rgba(255,255,255,.14); color: #fff; width: 34px; height: 34px; border-radius: 9px; font-size: 1.05rem; cursor: pointer; transition: background .15s; }
    .cfg-foto-x:hover { background: rgba(255,255,255,.28); }
    .cfg-foto-body { padding: 18px 20px 20px; overflow: auto; }
    .cfg-foto-start { text-align: center; padding: 26px 20px 30px; }   /* mniej pustki nad galerią (10.07.2026) */
    .cfg-foto-ikona { font-size: 3rem; color: var(--kp-gold); margin-bottom: 16px; }
    .cfg-foto-lead { font-size: 1rem; color: var(--kp-brown-dark); line-height: 1.5; margin: 0 0 20px; }
    .cfg-foto-upload { display: inline-flex; align-items: center; gap: 9px; padding: 13px 26px; border-radius: 12px; background: linear-gradient(135deg, var(--kp-brown), var(--kp-brown-mid)); color: #fff; font-weight: 800; font-size: .9rem; cursor: pointer; box-shadow: 0 8px 20px rgba(85,45,28,.3); transition: all .2s; }
    .cfg-foto-upload:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(85,45,28,.38); }
    .cfg-foto-upload input { display: none; }
    .cfg-foto-upload-maly { padding: 9px 14px; font-size: .76rem; background: #fff; color: var(--kp-brown); border: 1.5px solid var(--kp-line); box-shadow: none; font-weight: 700; }
    .cfg-foto-upload-maly:hover { border-color: var(--kp-gold); box-shadow: none; }
    .cfg-foto-rodo { font-size: .74rem; color: var(--kp-muted); margin: 18px 0 0; }
    .cfg-foto-rodo i { color: var(--kp-gold); margin-right: 5px; }
    .cfg-foto-scena { background: #241a12; border-radius: 14px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
    #cfg-foto-canvas { max-width: 100%; max-height: 62vh; display: block; touch-action: none; cursor: grab; }
    #cfg-foto-canvas:active { cursor: grabbing; }
    .cfg-foto-hint { font-size: .76rem; color: var(--kp-muted); margin: 10px 0 10px; text-align: center; }
    .cfg-foto-hint i { color: var(--kp-gold); margin-right: 5px; }
    .cfg-foto .cfg-foto-hint.cfg-foto-dopasowanie-info { display: block; margin: 8px 0 4px; text-align: left; color: #765443; }
    .cfg-foto-szybkie { display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin: 0 0 2px; }
    .cfg-foto .cfg-foto-szybkie > .cfg-foto-narzedzie { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 44px; margin: 0; padding: 8px 12px; border: 1px solid var(--kp-line); border-radius: 9px; background: #fff; color: var(--kp-brown); font-family: inherit; font-size: .8125rem; font-weight: 600; line-height: 1.35; cursor: pointer; box-shadow: none; transform: none; transition: background-color 160ms ease, border-color 160ms ease; }
    .cfg-foto .cfg-foto-szybkie > .cfg-foto-narzedzie i { color: #a67b52; margin: 0; }
    @media (hover: hover) and (pointer: fine) {
        .cfg-foto .cfg-foto-szybkie > .cfg-foto-narzedzie:hover { background: #f4ece0; border-color: #c4a27c; box-shadow: none; transform: none; }
    }
    .cfg-foto .cfg-foto-upload { position: relative; }
    .cfg-foto .cfg-foto-upload input { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
    .cfg-foto .cfg-foto-upload:focus-within { outline: 2px solid var(--kp-brown); outline-offset: 3px; }
    .cfg-foto-ml-status { display: block; text-align: center; }
    .cfg-foto-ml-status[hidden] { display: none; }
    .cfg-foto-prop-akcje button { min-height: 44px; }
    @media (prefers-reduced-motion: reduce) {
        .cfg-foto-skan-puls, .cfg-foto-skan-puls::before, .cfg-foto-skan-puls::after,
        .cfg-foto-prop-etykieta, .cfg-foto-prop-akcje { animation: none !important; }
    }
    .cfg-foto-uchwyt:focus-visible { outline: 3px solid #57331f; outline-offset: 3px; }
    .cfg-foto-controls { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
    .cfg-foto-suwak { display: inline-flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 700; color: var(--kp-brown-dark); }
    .cfg-foto-suwak input { width: 170px; accent-color: var(--kp-brown); }
    .cfg-foto-pobierz { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border: 0; border-radius: 11px; background: linear-gradient(135deg, var(--kp-brown), var(--kp-brown-mid)); color: #fff; font-weight: 800; font-size: .84rem; cursor: pointer; box-shadow: 0 6px 16px rgba(85,45,28,.28); transition: all .2s; font-family: inherit; }
    .cfg-foto-pobierz:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(85,45,28,.36); }
    .cfg-foto-pobierz i { color: var(--kp-gold); }
    @media (max-width: 700px) {
        .cfg-foto { padding: 0; }
        .cfg-foto-panel { border-radius: 0; max-height: 100vh; height: 100%; width: 100%; }
        #cfg-foto-canvas { max-height: 56vh; }
    }

    

    #cfg-share-box { margin-top: 8px; }
    #cfg-share-box input { width: 100%; border: 1.5px solid var(--kp-gold); border-radius: 9px; padding: 8px 10px; font-size: .72rem; color: var(--kp-brown-dark); background: #fff; font-family: inherit; }
    #cfg-share-box span { display: block; font-size: .64rem; color: var(--kp-muted); margin-top: 4px; text-align: center; }


    /* ── Orientacyjna wycena na żywo ── */
    .cfg-price { margin: 0 0 12px; border-top: 1px solid rgba(196,144,96,.35); padding-top: 10px; }
    .cfg-price[hidden] { display: none; }
    .cfg-price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; cursor: pointer; user-select: none; }
    .cfg-price-label { font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--kp-brown-mid); display: inline-flex; align-items: center; gap: 6px; }
    .cfg-price-label i { font-size: .6rem; color: var(--kp-gold); transition: transform .25s; }
    .cfg-price.is-open .cfg-price-label i { transform: rotate(180deg); }
    .cfg-price-value { font-size: 1.5rem; font-weight: 800; color: var(--kp-brown-dark); letter-spacing: -.02em; white-space: nowrap; }
    .cfg-price-value .od { font-size: .8rem; font-weight: 700; color: var(--kp-brown-mid); margin-right: 4px; }
    .cfg-price-value.bump { animation: cfgPriceBump .45s cubic-bezier(.16,1,.3,1); }
    @keyframes cfgPriceBump { 0%{transform:scale(1)} 35%{transform:scale(1.07); color:var(--kp-gold-dark,#a06a2c)} 100%{transform:scale(1)} }
    .cfg-price-details { margin: 8px 0 2px; border-radius: 10px; background: rgba(255,255,255,.65); border: 1px solid rgba(196,144,96,.25); padding: 8px 12px; }
    .cfg-price-details[hidden] { display: none; }
    .cfg-price-pos { display: flex; justify-content: space-between; gap: 10px; font-size: .74rem; color: var(--kp-brown-dark); padding: 3px 0; }
    .cfg-price-pos + .cfg-price-pos { border-top: 1px dashed rgba(196,144,96,.25); }
    .cfg-price-pos .kw { font-weight: 700; white-space: nowrap; }

    /* ═══════════════ PREMIUM POLISH ═══════════════ */
    body.kp-body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
    .cfg-wrap { grid-template-columns: 1.55fr minmax(320px, 400px); gap: 26px; }
    .cfg-intro h1, .cfg-step-title { letter-spacing: -.025em; }
    .cfg-card { border-radius: 18px; box-shadow: 0 4px 18px rgba(85,45,28,.06); padding: 18px 20px; }

    /* Typografia premium: serif na tytułach, wyraźne cyfry wszędzie */
    .cfg-step-title { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; letter-spacing: 0; font-size: clamp(1.5rem, 1.1rem + 1vw, 2.05rem); }
    .cfg-stage-model { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; letter-spacing: .015em; }
    .cfg-model-name { letter-spacing: .07em; }
    .cfg-price-value, .cfg-dim-input input, .cfg-nav-count, .cfg-chip { font-variant-numeric: tabular-nums; }
    .cfg-dim-input input { font-size: 1.12rem; font-weight: 800; letter-spacing: .01em; }
    .cfg-step-lead { font-size: .9rem; }
    .cfg-sub { letter-spacing: .2em; }

    /* Ciepłe ramki spójne z kremowo-złotą paletą (zamiast szaro-niebieskich) */
    .cfg-card { border-color: #f0e7d6; }
    .cfg-model-card { border-color: #f2ecdf; }
    .cfg-model-name { border-top-color: #f5efe3; }
    .cfg-tile { border-color: #f0e7d6; }
    .cfg-model-thumb { background: radial-gradient(ellipse at 50% 28%, #ffffff 0%, #f6f1e7 100%); }

    /* Render — hero premium */
    .cfg-stage-card { border-radius: 22px; box-shadow: 0 20px 50px rgba(85,45,28,.16), 0 2px 8px rgba(85,45,28,.08); position: relative; }
    .cfg-stage-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background: linear-gradient(90deg, transparent, var(--kp-gold), transparent); z-index:3; }
    .cfg-stage { min-height: 400px; padding: 20px 18px 6px; }
    .cfg-stage::before { content:''; position:absolute; left:50%; top:45%; transform:translate(-50%,-50%); width:76%; height:76%; background: radial-gradient(ellipse at center, rgba(255,255,255,.6), rgba(255,255,255,0) 66%); pointer-events:none; z-index:0; }
    /* bez `drop-shadow` (był tu mocniejszy bliźniak .26 — to ON wygrywał na szerokim ekranie,
       czyli to jego prostokąt widział Kamil); powód: patrz reguła bazowa `.cfg-stage img` */
    .cfg-stage img { height: 400px; position: relative; z-index:1; }
    .cfg-floor { height: 22px; margin: -8px 44px 0; background: radial-gradient(ellipse 62% 100% at 50% 0%, rgba(85,45,28,.28), transparent 72%); }

    /* Showroom modeli */
    .cfg-model-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; max-height: 540px; }
    .cfg-model-card { border-radius: 15px; }
    /* TYLKO MYSZ (Kamil 17.10.2026, telefon: „okienko tego modelu się trzęsie przy przewijaniu").
       Bez warunku `hover: hover` dotyk włączał :hover przy stuknięciu i na starcie gestu przewijania,
       a `transition: transform .18s` podnosił i opuszczał kafel o 5 px = trzęsienie. */
    @media (hover: hover) and (pointer: fine) { .cfg-model-card:hover { transform: translateY(-5px); } }
    .cfg-model-thumb { padding: 12px; background: radial-gradient(ellipse at 50% 28%, #ffffff 0%, #f6f1e7 100%); }   /* ciepłe tło spójne z paletą (regresja — było #eef2f6, audyt UX 10.07) */
    .cfg-model-name { font-size: .78rem; padding: 8px 4px; }

    /* ── Pasek filtrów (jedna linia, premium) ── */
    .cfg-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
    .cfg-search-wrap { position: relative; flex: 1 1 220px; min-width: 190px; max-width: 430px; }
    .cfg-search-wrap i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--kp-gold); font-size: .8rem; pointer-events: none; }
    .cfg-search-wrap input { width: 100%; height: 43px; border: 1.5px solid #e9ddc9; border-radius: 12px; padding: 0 12px 0 38px; font-size: .88rem; font-family: inherit; background: #fff; color: var(--kp-brown-dark); transition: all .18s; }
    .cfg-search-wrap input::placeholder { color: #b9a68e; }
    .cfg-search-wrap input:focus { outline: 0; border-color: var(--kp-gold); box-shadow: 0 0 0 3px rgba(196,144,96,.14); }
    .cfg-seg { display: inline-flex; background: #fff; border: 1.5px solid #e9ddc9; border-radius: 12px; padding: 3px; gap: 2px; }
    .cfg-seg button { border: 0; background: transparent; padding: 8px 15px; border-radius: 9px; font-size: .78rem; font-weight: 600; color: var(--kp-brown-mid); cursor: pointer; font-family: inherit; transition: all .16s; letter-spacing: .01em; white-space: nowrap; }
    .cfg-seg button:hover { color: var(--kp-brown-dark); background: var(--kp-cream); }
    .cfg-seg button.is-active { background: linear-gradient(135deg, var(--kp-brown), var(--kp-brown-mid)); color: #fff; box-shadow: 0 3px 8px rgba(85,45,28,.28); }
    /* ── KARTY PRODUCENTA (premium — Kamil 09.07.2026: „zaznaczenie Łucznik/
       Wilka wygląda tanio") — wspólny komponent dla wkładek [Łucznik|Wilka]
       i marki zamka [Maco|GU]: białe karty z logo w PEŁNYM kolorze, wybrana =
       złota obwódka + kremowy gradient + złoty medalion ✓ nachodzący na róg.
       JS steruje klasą .is-active (jak dotąd). */
    .cfg-marki { display: flex; gap: 10px; flex-wrap: wrap; }
    /* Kolor wkładki — było inline na divie; jako klasa daje się dopasować na telefonie */
    .cfg-wk-kolory { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
    .cfg-wk-kolory-lbl { font-size: .74rem; font-weight: 700; color: var(--kp-brown-mid); }
    .cfg-marka-karta {
        position: relative; flex: 0 1 205px; min-width: 150px;
        display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 6px; padding: 13px 14px 10px;
        background: #fff; border: 2px solid #f0e7d6; border-radius: 14px;
        cursor: pointer; font-family: inherit; transition: all .18s;
    }
    .cfg-marka-karta:hover { border-color: var(--kp-gold); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(85,45,28,.12); }
    .cfg-marka-karta.is-active {
        border-color: var(--kp-gold);
        background: linear-gradient(180deg, #fff 45%, #fbf1df 100%);
        box-shadow: 0 0 0 3px rgba(196,144,96,.20), 0 8px 18px rgba(85,45,28,.12);
    }
    .cfg-marka-karta[hidden] { display: none !important; }   /* inline-flex vs [hidden] */
    .cfg-marka-logo { display: block; height: 27px; width: auto; max-width: 100%; }
    .cfg-marka-logo--wilka { height: 15px; margin: 6px 0; }
    .cfg-marka-logo--maco { height: 33px; margin: -2px 0; }
    .cfg-marka-logo--gu { height: 23px; margin: 2px 0; }
    .cfg-marka-pod { font-size: .64rem; color: var(--kp-muted); letter-spacing: .02em; line-height: 1.35; text-align: center; }
    .cfg-marka-karta.is-active .cfg-marka-pod { color: var(--kp-brown-mid); }
    .cfg-marka-check {
        position: absolute; top: -9px; right: -9px; width: 24px; height: 24px; border-radius: 50%;
        display: none; align-items: center; justify-content: center;
        /* brąz jak reszta zaznaczeń (Kamil 09.07.2026: „znaczek na brązowy,
           żeby się kolorystycznie zgrywało") — spójny z .cfg-zamek-card ✓ */
        background: linear-gradient(135deg, var(--kp-brown), var(--kp-brown-mid));
        color: #fff; font-size: .6rem;
        border: 1.5px solid #fff;
        box-shadow: 0 2px 6px rgba(85,45,28,.4), inset 0 1px 0 rgba(255,255,255,.28);
    }
    .cfg-marka-karta.is-active .cfg-marka-check { display: flex; }
    /* wariant mini — karty Maco/GU wewnątrz kafla zamka; ceny per marka
       wypełnia cfgZamkiOdswiez wg grubości. [hidden] musi wygrywać. */
    .cfg-zamek-marki { display: flex; gap: 9px; margin-top: 9px; }
    .cfg-zamek-marki .cfg-marka-karta { flex: 1 1 0; min-width: 0; padding: 8px 8px 6px; border-radius: 11px; gap: 3px; }
    .cfg-zamek-marki .cfg-marka-logo--maco { height: 25px; margin: 0; }
    .cfg-zamek-marki .cfg-marka-logo--gu { height: 18px; margin: 3px 0 2px; }
    .cfg-zamek-marki .cfg-marka-check { width: 20px; height: 20px; top: -7px; right: -7px; font-size: .52rem; }
    .cfg-zamek-marki .cfg-zm-cena { font-weight: 700; color: var(--kp-brown-mid); font-size: .66rem; }
    .cfg-zamek-marki button[hidden] { display: none !important; }
    /* pod-wybór w kaflu „Zamek na klucz": Jeden / Dwa (tekstowe mini-karty) */
    .cfg-zamek-marki .cfg-zw-tytul { font-weight: 800; color: var(--kp-brown-dark); font-size: .78rem; line-height: 1.1; }
    /* ── Modal „Udostępnij konfigurację" (09.07.2026) ── */
    #cfg-share-modal { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 16px; }
    #cfg-share-modal[hidden] { display: none !important; }
    .cfg-share-tlo { position: absolute; inset: 0; background: rgba(30,15,8,.55); backdrop-filter: blur(3px); }
    .cfg-share-karta { position: relative; width: min(460px, 100%); background: linear-gradient(180deg, #fffdf9, #fbf3e6); border: 2px solid var(--kp-gold); border-radius: 18px; padding: 24px 22px 18px; box-shadow: 0 18px 50px rgba(30,15,8,.4); text-align: center; }
    .cfg-share-x { position: absolute; top: 6px; right: 12px; border: 0; background: transparent; font-size: 1.6rem; color: var(--kp-muted); cursor: pointer; line-height: 1; padding: 4px; }
    .cfg-share-x:hover { color: var(--kp-brown-dark); }
    .cfg-share-tytul { font-weight: 800; color: var(--kp-brown-dark); font-size: 1.02rem; margin: 0 0 10px; }
    .cfg-share-tytul i { color: #2e7d32; margin-right: 7px; }
    .cfg-share-pod { font-size: .72rem; color: var(--kp-muted); margin: 9px 0 5px; line-height: 1.45; }
    .cfg-share-kod { font-size: 1.75rem; font-weight: 800; letter-spacing: .14em; color: var(--kp-brown); background: #fff; border: 2px dashed var(--kp-gold); border-radius: 12px; padding: 8px 10px; font-variant-numeric: tabular-nums; }
    .cfg-share-linia { display: flex; gap: 8px; }
    .cfg-share-linia input { flex: 1 1 auto; min-width: 0; border: 1.5px solid var(--kp-line); border-radius: 10px; padding: 9px 10px; font-size: .72rem; color: var(--kp-brown-dark); font-family: inherit; background: #fff; }
    .cfg-share-linia button { border: 0; border-radius: 10px; padding: 9px 15px; background: linear-gradient(135deg, var(--kp-brown), var(--kp-brown-mid)); color: #fff; font-weight: 700; font-size: .74rem; cursor: pointer; font-family: inherit; white-space: nowrap; transition: all .15s; }
    .cfg-share-linia button.ok { background: linear-gradient(135deg, #2e7d32, #1b5e20); }
    .cfg-share-qr-wrap { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--kp-line); text-align: left; }
    #cfg-share-qr { width: 98px; height: 98px; border: 1px solid var(--kp-line); border-radius: 10px; background: #fff; padding: 5px; flex: 0 0 auto; }
    /* ── Foto: uchwyty narożne + tryb auto-dopasowania (09.07.2026) ── */
    .cfg-foto-scena { position: relative; }
    .cfg-foto-uchwyt { padding: 0; position: absolute; width: 17px; height: 17px; border-radius: 50%; background: #fff; border: 3px solid var(--kp-gold); box-shadow: 0 1px 6px rgba(0,0,0,.45); transform: translate(-50%, -50%); cursor: nwse-resize; touch-action: none; z-index: 3; }
    .cfg-foto-uchwyt[data-rog="tr"], .cfg-foto-uchwyt[data-rog="bl"] { cursor: nesw-resize; }
    /* na dotyku 17px za mało do złapania palcem — większy cel (audyt UX 10.07) */
    @media (pointer: coarse) { .cfg-foto-uchwyt { width: 44px; height: 44px; border: 18px solid transparent; background-clip: padding-box; box-shadow: none; } }
    .cfg-foto-uchwyt::after { content: ""; position: absolute; inset: -3px; border: 3px solid var(--kp-gold); border-radius: 50%; box-shadow: 0 1px 6px rgba(0,0,0,.45); pointer-events: none; }
    #cfg-foto-uchwyty[hidden] { display: none !important; }
    #cfg-foto-canvas.cfg-foto-cel { cursor: crosshair !important; }
    .cfg-foto-auto-btn { background: linear-gradient(135deg, #b0821f, #8a6314); }
    .cfg-foto-galeria-btn { background: #fff; color: var(--kp-brown); border: 1.5px solid var(--kp-line); box-shadow: none; font-weight: 700; }
    .cfg-foto-galeria-btn:hover { border-color: var(--kp-gold); }
    /* status ładowania modelu ML (detekcja drzwi w przeglądarce) */
    .cfg-foto-ml-status { font-size: .72rem; color: var(--kp-muted); display: inline-flex; align-items: center; gap: 6px; }
    .cfg-foto-ml-status .fa-spinner { animation: cfgMlObrot 1.1s linear infinite; color: var(--kp-gold); }
    @keyframes cfgMlObrot { to { transform: rotate(360deg); } }
    .cfg-foto-ml-status[hidden] { display: none !important; }
    /* ── Auto-dopasowanie: skan + wizjer propozycji (efekt „AR", 09.07.2026) ── */
    #cfg-foto-skan { position: absolute; z-index: 4; width: 0; height: 0; pointer-events: none; }
    .cfg-foto-skan-puls { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2.5px solid #f2c96a; box-shadow: 0 0 14px rgba(242,201,106,.8); animation: cfgSkanPuls .55s ease-out infinite; }
    .cfg-foto-skan-puls.p2 { animation-delay: .27s; }
    @keyframes cfgSkanPuls { from { transform: scale(.4); opacity: 1; } to { transform: scale(3.4); opacity: 0; } }
    #cfg-foto-skan[hidden], #cfg-foto-prop[hidden] { display: none !important; }
    .cfg-foto-prop-ramka { position: absolute; z-index: 4; border: 2px dashed rgba(242,201,106,.95); border-radius: 6px; background: rgba(242,201,106,.10); box-shadow: 0 0 0 2000px rgba(10,5,2,.28), 0 0 22px rgba(242,201,106,.45) inset; pointer-events: none; animation: cfgPropIn .3s ease-out; }
    @keyframes cfgPropIn { from { transform: scale(1.12); opacity: 0; } to { transform: scale(1); opacity: 1; } }
    .pr-rog { position: absolute; width: 20px; height: 20px; border: 3px solid #f2c96a; filter: drop-shadow(0 0 4px rgba(242,201,106,.7)); }
    .pr-tl { left: -3px; top: -3px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
    .pr-tr { right: -3px; top: -3px; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
    .pr-bl { left: -3px; bottom: -3px; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
    .pr-br { right: -3px; bottom: -3px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
    .cfg-foto-prop-etykieta { position: absolute; z-index: 5; transform: translate(-50%, -100%); white-space: nowrap; background: linear-gradient(135deg, #f6d68a, #c9962c); color: #3a2410; font-size: .7rem; font-weight: 800; letter-spacing: .03em; padding: 5px 12px; border-radius: 999px; box-shadow: 0 3px 10px rgba(0,0,0,.45); animation: cfgPropIn .3s ease-out; }
    .cfg-foto-prop-etykieta i { margin-right: 5px; }
    .cfg-foto-prop-akcje { position: absolute; z-index: 5; display: flex; gap: 8px; transform: translateX(-50%); animation: cfgPropIn .3s ease-out .1s backwards; }
    .cfg-foto-prop-akcje button { border: 0; border-radius: 999px; padding: 9px 16px; font-family: inherit; font-weight: 800; font-size: .78rem; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.4); white-space: nowrap; }
    .cfg-foto-prop-tak { background: linear-gradient(135deg, #2e7d32, #1b5e20); color: #fff; }
    .cfg-foto-prop-tak:hover { transform: translateY(-1px); }
    .cfg-foto-prop-nie { background: rgba(255,255,255,.92); color: var(--kp-brown-dark); }
    .cfg-foto-prop-nie:hover { background: #fff; }
    .cfg-foto-auto-btn.czeka { animation: cfgAutoPuls 1.1s ease-in-out infinite; }
    @keyframes cfgAutoPuls { 0%,100% { box-shadow: 0 6px 16px rgba(85,45,28,.28); } 50% { box-shadow: 0 0 0 6px rgba(196,144,96,.25); } }
    .cfg-zamek-card[hidden] { display: none !important; }
    /* 68 mm: zamki listwowe wymagają skrzydła 78/88 — kafle NIE znikają,
       tylko przechodzą w elegancki stan „locked" (Kamil 13.07.2026: samotny
       kafel „nie ładnie wygląda... ma premium wyglądać"). Klik = toast,
       złoty pasek wyjaśnia po ludzku + przycisk przełącza grubość na 78. */
    .cfg-zamek-card.is-locked { cursor: default; border-style: dashed; border-color: #e7dcc8; background: linear-gradient(180deg, #fffdf8, #faf4e9); }
    @media (hover: hover) { .cfg-zamek-card.is-locked:hover { transform: none; box-shadow: none; border-color: #e7dcc8; } }
    .cfg-zamek-card.is-locked .cfg-zamek-head, .cfg-zamek-card.is-locked > .opis { opacity: .55; filter: grayscale(.55); }
    .cfg-zamek-card.is-locked .cfg-zamek-marki { opacity: .45; filter: grayscale(.65); pointer-events: none; }
    .cfg-zamek-lock-info { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 10px; margin-top: 10px; padding: 8px 10px 8px 12px; border-radius: 10px; border: 1px solid #eadfc6; background: linear-gradient(120deg, #fdf6e7, #f7ecd6); }
    .cfg-zamek-lock-info[hidden] { display: none !important; }
    .cfg-zamek-lock-txt { font-size: .72rem; font-weight: 700; color: var(--kp-brown-mid); line-height: 1.35; }
    .cfg-zamek-lock-txt i { color: var(--kp-gold); margin-right: 5px; }
    .cfg-zamek-lock-btn { border: 0; cursor: pointer; border-radius: 999px; padding: 7px 13px; min-height: 30px; font-weight: 800; font-size: .7rem; color: #fff; background: linear-gradient(120deg, var(--kp-brown), var(--kp-brown-dark)); box-shadow: 0 2px 8px rgba(85,45,28,.22); transition: all .18s; }
    @media (hover: hover) { .cfg-zamek-lock-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(85,45,28,.3); } }
    #cfg-antaba-opcje label[hidden] { display: none !important; }   /* elektro przy GU — inline display:inline-flex wygrywałby z [hidden] */
    #cfg-rozeta-wrap[hidden], #cfg-rozeta-foto[hidden] { display: none !important; }   /* rozeta — inline display:flex, ta sama pułapka */
    /* Strona + kierunek otwierania OBOK SIEBIE (Kamil 08.07.2026); wąsko → pod sobą */
    .cfg-otwieranie-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 26px; max-width: 700px; }
    @media (max-width: 640px) { .cfg-otwieranie-grid { grid-template-columns: 1fr; } }
    /* Lupka na zdjęciach klamek/antab (Kamil 08.07.2026: „fajnie by było przybliżyć
       zdjęcie") — pojawia się na hover kafla, na dotyku lekko widoczna od razu;
       klik otwiera lightbox (ten sam co render), stopPropagation nie psuje wyboru */
    .cfg-klamka-foto { position: relative; }
    .cfg-foto-lupka { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--kp-line); background: rgba(255,255,255,.94); color: var(--kp-brown-mid); font-size: .68rem; cursor: zoom-in; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s, transform .15s; z-index: 2; padding: 0; }
    .cfg-klamka-card:hover .cfg-foto-lupka { opacity: 1; }
    .cfg-foto-lupka:hover { transform: scale(1.14); color: var(--kp-brown); border-color: var(--kp-gold); }
    @media (hover: none) { .cfg-foto-lupka { opacity: .85; } }
    .cfg-select { height: 43px; border: 1.5px solid #e9ddc9; border-radius: 12px; padding: 0 36px 0 15px; font-size: .8rem; font-weight: 600; color: var(--kp-brown-dark); font-family: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; transition: all .18s;
        background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c49060' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center / 11px; }
    .cfg-select:hover { border-color: var(--kp-gold); }
    .cfg-select:focus { outline: 0; border-color: var(--kp-gold); box-shadow: 0 0 0 3px rgba(196,144,96,.14); }

    /* Filtry modeli (legacy — chipsy używane nadal w kroku 2) */
    .cfg-filterbar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
    .cfg-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .cfg-fchip { border: 1.5px solid #e8d5c0; background: #fff; color: var(--kp-brown-dark); font-weight: 600; font-size: .76rem; padding: 6px 13px; border-radius: 999px; cursor: pointer; transition: all .15s; font-family: inherit; }
    .cfg-fchip:hover { border-color: var(--kp-gold); transform: translateY(-1px); }
    .cfg-fchip.is-active { background: linear-gradient(135deg, var(--kp-brown), var(--kp-brown-mid)); border-color: var(--kp-brown); color: #fff; box-shadow: 0 4px 10px rgba(85,45,28,.25); }
    /* Kropka koloru w chipie (okucia, listwy na próg — 21.09.2026; antaba/wkładka mają ją inline) */
    .cfg-kropka { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); margin-right: 7px; vertical-align: -1px; flex: 0 0 auto; }
    .cfg-kropka-brak { background: transparent !important; border: 1.5px dashed rgba(85,45,28,.45); }
    .cfg-fchip.is-active .cfg-kropka { border-color: rgba(255,255,255,.75); box-shadow: 0 0 0 1px rgba(255,255,255,.3); }
    .cfg-chip-doplata { margin-left: 6px; font-size: .88em; font-weight: 700; opacity: .85; }
    /* Reakcja na NACIŚNIĘCIE, nie na puszczenie (Apple: feedback na pointer-down) */
    .cfg-fchip:active { transform: scale(.97); transition: transform 100ms ease-out; }
    /* Podpowiedz „co mozna wpisac" — gotowe zdania do klikniecia. */
    .cfg-opis-hint { display:flex; flex-wrap:wrap; align-items:center; gap:6px;
        margin: 2px 0 10px; font-size:.82rem; color: var(--kp-muted); }
    .cfg-opis-hint span { margin-right:2px; }
    .cfg-opis-hint button { border:1px solid #e2e8f0; background:#fff; border-radius:999px;
        padding:5px 11px; font-size:.79rem; color:#475569; cursor:pointer;
        transition: border-color .15s, color .15s, background .15s; }
    .cfg-opis-hint button:hover { border-color:#c49060; color:#8a5a2b; background:#fdf7f1; }
    /* Pasek „szukam po opisie: …" — mowi, co system zrozumial ze zdania. */
    .cfg-opis-info { margin: 0 0 12px; padding: 9px 13px; border-radius: 10px;
        background:#fdf7f1; border:1px solid #ecd9c6; border-left:3px solid #c49060;
        font-size:.82rem; line-height:1.45; color:#6b5442; }
    .cfg-opis-info b { color:#8a5a2b; }
    .cfg-opis-info[hidden] { display:none; }
    .cfg-opis-wiecej { display:block; margin: 14px auto 4px; padding:9px 18px;
        border:1px solid #e2e8f0; background:#fff; border-radius:10px; cursor:pointer;
        font-size:.84rem; color:#475569; }
    .cfg-opis-wiecej:hover { border-color:#c49060; color:#8a5a2b; }
    @media (max-width: 640px) {
        .cfg-opis-hint { font-size:.78rem; gap:5px; }
        .cfg-opis-hint button { padding:7px 12px; font-size:.78rem; }
    }
    .cfg-model-empty { text-align: center; color: var(--kp-muted); padding: 40px 12px; font-size: .9rem; }
    .cfg-model-empty i { display: block; font-size: 1.9rem; color: #cbd5e1; margin-bottom: 10px; }
    .cfg-model-empty[hidden] { display: none; }

    /* Kolory + kafle */
    .cfg-swatches { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 9px; }
    .cfg-swatch-dot { height: 50px; }
    .cfg-tile { border-radius: 14px; }
    .cfg-tile svg { width: 44px; height: 56px; }
    .cfg-chip { background: #fff; box-shadow: 0 1px 3px rgba(85,45,28,.06); }

    /* Większe modele (Kamil: były za małe) + swatche z teksturą */
    .cfg-model-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; max-height: 660px; }
    .cfg-model-thumb { padding: 18px; }
    .cfg-model-name { font-size: .9rem; padding: 12px 4px; letter-spacing: .3px; }
    .cfg-swatches { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
    .cfg-swatch-dot { background-size: cover; background-position: center; }
    .cfg-retro-note { font-size: .78rem; color: #92400e; background: linear-gradient(180deg,#fef3c7,#fde68a); border: 1px solid #fcd34d; border-radius: 10px; padding: 9px 12px; margin: 0 0 12px; line-height: 1.4; }
    .cfg-retro-note[hidden] { display: none; }
    .cfg-retro-note i { color: #d97706; margin-right: 5px; }

    /* ═══ SZEROKIE EKRANY (Kamil: 2560px) — nie marnuj połowy ekranu ═══ */
    @media (min-width: 1500px) {
        .cfg-wrap { max-width: 1800px; grid-template-columns: 1.7fr minmax(430px, 570px); gap: 34px; }
        #cfg-uklad { max-width: 760px; }   /* kafle dostawek nie rozciągają się bez sensu */
        /* modele: 5 kolumn, prawie cała wysokość ekranu */
        .cfg-model-grid { max-height: calc(100vh - 400px); min-height: 660px; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
        /* render: duży, korzysta z wysokości ekranu */
        .cfg-stage { min-height: 520px; }
        .cfg-stage img { height: min(58vh, 730px); }
        .cfg-stage-model { font-size: 1.1rem; }
        .cfg-price-value { font-size: 1.7rem; }
        .cfg-swatches { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
        .cfg-swatch-dot { height: 58px; }
    }

    /* Nawigacja przyklejona — "Dalej" zawsze widoczne (desktop) */
    .cfg-nav { position: sticky; bottom: 10px; background: rgba(253,247,238,.96); backdrop-filter: blur(5px); border: 1.5px solid var(--kp-line); border-radius: 14px; padding: 11px 16px; margin-top: auto; box-shadow: 0 8px 22px rgba(85,45,28,.14); z-index: 20; }
    .cfg-btn-next { padding: 13px 26px; font-size: .95rem; }
    .cfg-dims { max-width: 460px; }
    #cfg-typ-wrap[hidden] { display: none; }
    #cfg-typ-wrap { margin-bottom: 6px; }
    #cfg-typ-wrap .cfg-sub { margin-bottom: 10px; }
    #cfg-typ { gap: 8px; }

    @media (max-width: 980px) {
        .cfg-wrap { grid-template-columns: 1fr; gap: 14px; }
        .kp-header { position: static; }   /* logo przewija się — render ma czysty sticky top */
        .cfg-right { position: sticky; top: 0; z-index: 30; order: -1; }
        .cfg-stage-card { border-radius: 0 0 18px 18px; box-shadow: 0 6px 16px rgba(85,45,28,.14); }
        .cfg-stage { min-height: 230px; padding: 12px; }
        .cfg-stage img { height: 220px; }
        .cfg-floor { display: none; }
        .cfg-summary { padding: 8px 14px 12px; }
        .cfg-cta, .cfg-cta-note { display: none; }        /* na mobile do wyceny prowadzi dolna nawigacja */
        .cfg-steps { overflow-x: auto; padding-bottom: 4px; }
        .cfg-step-dot .lbl { display: none; }
        .cfg-step-dot.active .lbl { display: inline; }   /* aktywny krok z nazwą (audyt UX 10.07.2026) */
        /* iOS: fokus na polu z fontem <16px zoomuje całą stronę (audyt UX) */
        .cfg-search-wrap input, .cfg-select, .cfg-share-linia input, #cfg-share-box input { font-size: 16px; }
        .cfg-model-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); max-height: none; overflow: visible; }
    }
    /* ── TABLET: RENDER DRZWI (Kamil 01.09.2026) ────────────────────────
       Zmierzone w ramce 900x1440: obrazek renderu ma naturalnie 700x1512,
       a dostawal 220 px wysokosci — czyli przy zachowaniu proporcji klient
       widzial drzwi szerokie na ~102 px. Na ekranie z CENA.
       Winowajca ten sam co przy wzorach: `@media (max-width: 980px)`
       z `min-height: 230px`, pisane pod telefon, w ktore tablet w pionie
       sie lapie — majac 1440 px wysokosci.
       46vh z gornym ogranicznikiem: przy 1440 px daje 662 px sceny (drzwi
       ~300 px szerokosci), a nad i pod renderem zostaje miejsce na model,
       cene i przyciski. Telefon zostaje przy 230 px. */
    @media (min-width: 701px) and (max-width: 980px) {
        .cfg-stage { min-height: min(660px, 46vh); padding: 16px; }
        /* Sam kontener nie wystarczy: linia z bloku „max-width: 980px" ustawia
           obrazkowi height WPROST na 220 px. Bez nadpisania tego kontener
           rosl, a render zostawal splaszczony (zmierzone 01.09.2026). */
        .cfg-stage img { height: min(620px, 44vh); max-height: none; }
    }

    /* ── TABLET W POZIOMIE: RENDER (Kamil 01.09.2026) ───────────────────
       Poprawka renderu objela najpierw tylko PION (blok do 980 px). Zmierzone
       w poziomie 1440x900: pole renderu 362x278, drzwi szerokie na 129 px —
       czyli ten sam problem, tylko w drugiej orientacji.

       Tu uklad jest inny: od 981 px obrazek jest ustawiony absolutnie i wypelnia
       kontener (`.cfg-right .cfg-stage img`, inset 12/18, height calc(100%-24px)).
       Zmiana wysokosci obrazka nic nie daje — rosnac musi `.cfg-stage`, ktory
       jako element flex dostaje tyle, ile zostanie po naglowku, cenie i akcjach.

       62vh zamiast stalej: przy 900 px ekranu daje 558 px sceny i zostawia
       miejsce na cene pod spodem. `orientation: landscape` odcina monitory
       ustawione pionowo, ktore nie potrzebuja ukladu tabletowego. */
    @media (min-width: 981px) and (max-width: 1499px) and (orientation: landscape) {
        .cfg-right .cfg-stage { min-height: min(520px, 62vh); }
    }

    /* ── TABLET: CELE DOTYKOWE (Kamil 01.09.2026) ───────────────────────
       Zmierzone w ramce 900x1440 na zywym konfiguratorze: 26 elementow
       klikalnych ponizej 44x44 px. Najgorsze byly kropki krokow kreatora
       (28x28 — niecale 3 mm na 11-calowym ekranie 309 PPI) i przelaczniki
       rodzaju wzoru (31 px). Slawek PROWADZI NA TYM KLIENTA: pokazuje
       palcem, przechodzi krok po kroku, klient patrzy. Nietrafienie w krok
       przerywa rozmowe.

       Przedzial 701-1499 px, ograniczony z OBU stron: telefon ma wlasne,
       gestsze reguly (i tam sa uzasadnione), a desktop obsluguje mysz.
       Zmieniam wylacznie POLA DOTYKOWE i odstepy — zadnych znaczen,
       kolorow ani ukladu. */
    @media (min-width: 701px) and (max-width: 1499px) {
        /* kroki kreatora: kolko 44 px i wiekszy odstep miedzy nimi */
        .cfg-step-dot .n { width: 44px; height: 44px; font-size: .95rem; }
        .cfg-step-dot { gap: 10px; font-size: .84rem; padding: 4px 0; }
        .cfg-steps { gap: 4px; }
        .cfg-step-line { margin: 0 10px; }

        /* przelaczniki rodzaju wzoru (Ramiakowe / Plytowe / Ze szkleniem) */
        .cfg-seg button { padding: 12px 18px; font-size: .84rem; min-height: 44px; }
        .cfg-seg { padding: 4px; }

        /* pole szukania modelu */
        .cfg-search input, .cfg-search { min-height: 48px; font-size: 16px; }

        /* „Zacznij od nowa" i inne odnosniki w pasku logowania */
        .kp-login-link { min-height: 44px; display: inline-flex; align-items: center;
            padding: 0 14px; }

        /* pastylki filtrow i kolekcji — czesto klikane przy pokazywaniu wzorow */
        .cfg-filter-pill, .cfg-collection-tab, .cfg-tab {
            min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; }

        /* strzalki i przyciski nawigacji krok w przod / wstecz */
        .cfg-nav button, .cfg-nav a { min-height: 48px; padding: 0 20px; }

        /* zamkniecia okien i lupy przy zdjeciach */
        .cfg-modal-close, .cfg-foto-lupka { min-width: 48px; min-height: 48px;
            display: inline-flex; align-items: center; justify-content: center; }

        /* ── domkniecie po pomiarze (selektory odczytane z zywej strony) ──
           Przelaczniki widoku drzwi: „Z zewnatrz / Od srodka" i „Dzien / Noc".
           Slawek przelacza to STOJAC PRZY KLIENCIE i pokazujac render —
           31 px to najczesciej klikany i najmniejszy cel na tym ekranie. */
        .cfg-widok-seg button { min-height: 44px; padding: 0 16px; font-size: .82rem; }
        .cfg-widok-seg { gap: 4px; }

        /* Akcje koncowe: „Udostepnij", „Pobierz PDF", „Zobacz na zdjeciu
           swojego domu" — to one koncza rozmowe z klientem. */
        .cfg-share, .cfg-foto-btn { min-height: 46px; padding: 0 18px; }

        /* Wybor kolekcji i szukajka modelu — brakowalo im po jednym pikselu.
           Szukajka ma wlasne id i siedzi w .cfg-search-wrap; sam
           `.cfg-search input` jej nie lapal (odczytane z zywej strony). */
        .cfg-select { min-height: 46px; font-size: 16px; }
        #cfg-model-search, .cfg-search-wrap input { min-height: 46px; font-size: 16px; }

        /* Zwijanie panelu — najmniejszy przycisk na stronie (30 px).
           BEZ `display`: linia 1547 celowo ukrywa ten przycisk na szerszych
           ekranach, a mechanizm zwijania włącza się dopiero w bloku
           telefonowym. Wcześniej dopisałem tu `display:inline-flex` i przy
           981-1499 px przycisk BYŁ WIDOCZNY, ale nic nie robił — klikanie
           w martwy przycisk jest gorsze niż jego brak (zarzut kontroli,
           słuszny). Zostaje sama wielkość pola dotykowego. */
        .cfg-zwin { min-width: 44px; min-height: 44px;
            align-items: center; justify-content: center; }

        /* Logo wraca do domu — rzadko dotykane, ale i tak nie moze byc pulapka. */
        .kp-logo-link { min-height: 44px; display: inline-flex; align-items: center; }

        /* ── KROK 2 „Wymiary i uklad" (Kamil 01.09.2026) ─────────────────
           Zmierzone na zywej stronie w 900x1440 i 1440x900:
           • .cfg-fchip („Grubosc skrzydla" 68/78/88 mm i „Rodzaj dostawki"):
             29 px poziomo, 42 px pionowo, odstep 6 px. Blok celow dotykowych
             wyzej wymienial .cfg-filter-pill / .cfg-collection-tab / .cfg-tab
             i .cfg-fchip nie lapal sie na zadna z nich. A to wybor, ktory
             ZMIENIA CENE (-250 zl / +500 zl) i Slawek klika go przy kliencie.
             min-height wystarczy: wszystkie .cfg-fchip to <button>, a button
             sam centruje tresc w pionie — nie ruszamy paddingow z bloku 701-980.
           • #cfg-rama > summary („Wymiary ramy — ramiaki, belka, prog"): 40 px.
           • rysunki na kaflach (strona i kierunek otwierania, dostawki,
             nadswietle) mialy sztywne 44x56 px w kaflu szerokim na 156-207 px.
             Na 309 PPI przy DPR 2 to 7x9 mm, a same zawiasy 0,5 mm — Slawek
             POKAZUJE nimi klientowi, z ktorej strony chodzi skrzydlo.
             88x114 to podwojenie z zachowaniem proporcji viewBox 40:52;
             miesci sie w najwezszym kaflu (156 px minus 16 px paddingu
             i 4 px obramowania = 136 px swiatla). */
        .cfg-fchip { min-height: 44px; }
        .cfg-filter-chips { gap: 8px; }
        #cfg-rama > summary { min-height: 44px; }
        #cfg-strona .cfg-tile svg, #cfg-kierunek .cfg-tile svg,
        #cfg-uklad .cfg-tile svg, #cfg-nadsw .cfg-tile svg { width: 88px; height: 114px; }
    }

    /* ── STEPPER I NAGŁÓWEK PODGLĄDU NA LAPTOPIE (Kamil 17.10.2026) ─────
       Zmierzone w 1440x900: lewa kolumna ma 890 px, a sześć kroków z
       etykietami i kółkami 44 px (blok wyżej) 966 px, więc „6 Podsumowanie"
       kończyło się na x=1019 i wchodziło pod kartę podglądu (od x=970).
       W 981-1375 px lewa kolumna rośnie od 496 do 890 px.
       • kreski między krokami 6 px zamiast 20 i brak przerwy flex: pełne
         etykiety mieszczą się od ok. 1360 px,
       • poniżej 1360 px etykieta tylko AKTYWNEGO kroku (jak tablet w pionie
         i telefon, blok „max-width: 980px"); cele dotykowe 44 px bez zmian,
       • eyebrow „TWOJE DRZWI · PODGLĄD NA ŻYWO" dostawał 80 px (karta 400 px
         minus pasek przełączników 280 px) i łamał się na 4-5 linii. Dopisek
         „podgląd na żywo" powtarza plakietkę „NA ŻYWO" obok, więc znika.
       Telefon (<=700) i tablet w pionie (701-980) bez zmian. */
    @media (min-width: 981px) and (max-width: 1499px) {
        .cfg-steps { gap: 0; }
        .cfg-step-dot { gap: 8px; }
        .cfg-step-line { margin: 0 6px; min-width: 4px; }
        .cfg-stage-eyebrow .cfg-desktop-only { display: none; }
    }
    @media (min-width: 981px) and (max-width: 1359px) {
        .cfg-step-dot .lbl { display: none; }
        .cfg-step-dot.active .lbl { display: inline; }
    }

    /* ── TABLET W PIONIE (Kamil 31.08.2026) ─────────────────────────────
       Zmierzone na Xiaomi Pad 6 przedstawiciela: przy 900 px regula
       „max-width: 980px" (pisana pod telefon) dawala 5 kolumn i OBRAZEK
       DRZWI 76x159 px — okolo centymetra na ekranie 309 PPI. Poziomo, przy
       1440 px, ten sam wzor mial 151x313. Im wezszy ekran, tym mniejszy
       produkt — dokladnie odwrotnie, niz powinno byc.
       Przedzial 701-980 px to tablet trzymany pionowo: 240 px daje trzy
       kolumny i obrazek wielkosci uzytecznej przy pokazywaniu klientowi.
       Telefony (<=700 i <=560) zostaja bez zmian. */
    @media (min-width: 701px) and (max-width: 980px) {
        .cfg-model-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
        .cfg-model-thumb { padding: 14px; }
        .cfg-model-name { font-size: .84rem; padding: 10px 4px; }
    }
    /* ── TELEFON I TABLET (przywrocone 13.09.2026) ──────────────────────
       Patch TABLET W PIONIE z 31.08 wstawil naglowek 701-980 PRZED ta lista i tym
       samym ZAMKNAL pierwotny blok `max-width: 980px` — wszystko ponizej (sticky
       .cfg-nav, cele dotykowe, .cfg-price-note, PRZYCISK .cfg-zwin, reguly
       body.cfg-zwiniete, uchwyt .cfg-stage-top, przejscia sceny) przestalo dzialac
       na telefonie (<=700 px). Kamil 13.09: „nie zwija mi sie i nie mam przycisku,
       widze tylko zlote podsumowanie, nie moge zobaczyc modeli". Tablet (701-980)
       laczy sie z tym blokiem tak jak przed 31.08; jego wlasne trzy reguly zostaly wyzej.
       ⛔ Nowe reguly TYLKO dla tabletu dopisywac do bloku wyzej, nie tutaj. */
    @media (max-width: 980px) {
        .cfg-swatches { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
        .cfg-nav { position: sticky; bottom: 0; background: rgba(255,255,255,.97); padding: 10px 6px; margin: auto -6px 0; border-top: 1px solid var(--kp-line); z-index: 25; box-shadow: 0 -4px 14px rgba(15,23,42,.06); }
        .cfg-btn { padding: 13px 20px; }                    /* większe cele dotykowe */
        .cfg-fchip { padding: 12px 16px; font-size: .84rem; }   /* ~44px cel dotykowy (audyt UX 10.07) */
        .cfg-widok-seg button { padding: 8px 14px; font-size: .78rem; }   /* Z zewnątrz/Od środka — czytelny cel na telefonie */
        /* kompaktowy panel renderu — klient ma szybko dojść do modeli */
        .cfg-price { margin-bottom: 4px; padding-top: 8px; }
        .cfg-price-value { font-size: 1.3rem; }
        .cfg-summary { padding: 6px 14px 10px; }
        .cfg-chips { gap: 5px; margin-bottom: 8px; }
        .cfg-chip { font-size: .64rem; padding: 3px 8px; }
        /* Kolory wkładki: etykieta bierze całą linię, chipy stają w równych kolumnach
           (auto-fit — działa niezależnie od tego, ile kolorów wróci z kp_wkladka_kolory()). */
        .cfg-wk-kolory { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 7px; }
        /* Okucia (21.09.2026): chip automatyczny „Dobrane do klamki · nikiel" na cala szerokosc — w kolumnie 84 px lamal sie na trzy linie */
        #cfg-okucia .cfg-fchip[data-okucia=""] { grid-column: 1 / -1; }
        .cfg-wk-kolory-lbl { grid-column: 1 / -1; margin-bottom: -2px; }
        .cfg-wk-kolory .cfg-fchip { justify-content: center; text-align: center; padding: 10px 6px; }
        /* ZWIŃ PODGLĄD — przycisk tylko na telefonie */
        /* Etykieta mówi, co zrobi klik; cel dotykowy co najmniej 44 px. */
        .cfg-zwin { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
                    min-width: 44px; min-height: 44px; padding: 0 14px 0 13px; border: 1.5px solid rgba(122,82,22,.22);
                    border-radius: 999px; background: #fff; color: var(--kp-brown-mid);
                    font-family: inherit; font-size: .8rem; font-weight: 700; letter-spacing: .2px; line-height: 1;
                    box-shadow: 0 1px 2px rgba(15,23,42,.06); white-space: nowrap;
                    cursor: pointer; -webkit-tap-highlight-color: transparent; }
        .cfg-zwin:active { background: #fdf3e3; }
        .cfg-zwin i { font-size: .74rem; transition: transform .3s cubic-bezier(.4,0,.2,1); }
        body.cfg-zwiniete .cfg-zwin i { transform: rotate(180deg); }   /* strzałka mówi, co zrobi klik */
        /* Natychmiastowa zmiana po kliknięciu, bez animowania układu pod palcem. */
        body.cfg-zwiniete .cfg-stage { min-height: 0; padding: 0; overflow: hidden; }
        body.cfg-zwiniete .cfg-stage img { height: 0; }
        body.cfg-zwiniete .cfg-chips,
        body.cfg-zwiniete .cfg-cta,
        body.cfg-zwiniete .cfg-cta-note,
        body.cfg-zwiniete .cfg-foto-btn,
        body.cfg-zwiniete .cfg-widok-seg,
        body.cfg-zwiniete #cfg-pora-seg { display: none; }
        /* ⚠ !important MUSI tu być: `.cfg-akcje-row` ma INLINE `style="display:flex"`,
           a inline bije każdą regułę z klasy (ta sama pułapka co przy warstwie przejść,
           it. 14). Bez tego „Udostępnij / Pobierz PDF" zostawały na zwiniętym pasku. */
        body.cfg-zwiniete .cfg-akcje-row { display: none !important; }
        body.cfg-zwiniete .cfg-summary { padding: 8px 14px 10px; }
        body.cfg-zwiniete .cfg-price { margin-bottom: 0; padding-top: 6px; }
        /* Gest pionowy służy wyłącznie przewijaniu strony. */
        .cfg-stage { transition: none; }
        .cfg-stage img { transition: opacity .35s ease, filter 1.05s ease; }

    }

    /* ── TABLET: KROKI 3 i 4 — KLAMKA, ZAMEK, SZKLENIE (Kamil 01.09.2026) ──
       Zmierzone na żywym konfiguratorze w OBU orientacjach Xiaomi Pad 6.
       Siatka `.cfg-klamki` dawała TAK SAMO 6 kolumn po ~129 px przy 900 px i
       przy 1440 px — `minmax(128px,1fr)` mieści się w obu. Ale wiążącym
       ograniczeniem było `.cfg-klamka-foto { height: 96px }` (padding 8 →
       80 px w środku), więc niezależnie od szerokości ekranu wychodziło:
         klamka        479x640  →   60 x  80 px
         szyba/swatch  480x480  →   80 x  80 px  (45 px szerokości kafla marnowane)
         wzór piaskowany        →   53 x  80 px
         witraż LANTRA          →   10 x  80 px  (!)
       Ten sam błąd co przy wzorach drzwi (76 px): klient wybiera po WYGLĄDZIE,
       a Sławek pokazuje mu to palcem na ekranie 309 PPI.
       Po zmianie (zmierzone, nie policzone): klamka 111x148, szyba 131x131
       przy 900 i 137x137 przy 1440, wzór piaskowany 131x196, witraż 34x212.
       Kafel 155 px (900) / 161 px (1440), 5 kolumn w OBU orientacjach.
       Przedział 701–1499 domknięty z OBU stron: przy 700 i przy 1500 zmierzono
       kafle z patchem i bez — wynik identyczny co do piksela.
       ⚠ KOSZT, świadomy: krok 3 rośnie z 4168 do 5051 px (+883), krok 4
       z 2657 do 3722 px (+1065). Sławek przewija więcej. Przy zdjęciu 60 px
       ten ekran i tak nie robił swojej roboty. */
    @media (min-width: 701px) and (max-width: 1499px) {
        .cfg-klamki { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
        .cfg-klamka-foto { height: 168px; padding: 10px; }
        /* wzory na szybie to PIONOWE tafle (witraż, piaskowane) — własne, wyższe okno */
        #cfg-szkla .cfg-klamka-foto { height: 232px; }
        /* wirtualny kafel „Mleczna — standard" ma kwadrat 58 px wpisany INLINE
           — w wyższym oknie zostałby kropką, a inline bije arkusz */
        #cfg-szyba-mleczna .cfg-klamka-foto > div { width: 120px !important; height: 120px !important; }
        /* listwy inox (21.09.2026): probka 58 px w oknie 168 px bylaby kropka — rosnie jak kwadrat Mlecznej */
        #cfg-inox-kafle .cfg-inox-swatch { width: 120px; height: 120px; }
        .cfg-klamka-nazwa { font-size: .8rem; padding: 8px 6px 10px; }
        .cfg-klamka-cena { font-size: .74rem; margin-top: 3px; }   /* dopłata miała 9,92 px */
        .cfg-klamka-card.is-selected::after { width: 22px; height: 22px; font-size: .66rem; top: 8px; right: 8px; }
        /* ✓ zaznaczenia i lupka siedziały w TYM SAMYM rogu (oba top/right 6).
           Na dotyku lupka jest widoczna zawsze (`hover: none` → opacity .85),
           ma 48 px z bloku celów dotykowych i z-index:2 — więc przykrywała
           ptaszka na wybranej klamce. Lupka schodzi na dół zdjęcia. */
        .cfg-klamka-card .cfg-foto-lupka { top: auto; bottom: 6px; right: 6px; }

        /* Kolor wkładki: 38 px w pionie (reguła z bloku 701-980 bije bazową
           specyficznością), 29 px w poziomie (nie łapie jej żadna reguła). */
        .cfg-wk-kolory .cfg-fchip { min-height: 44px; padding: 0 14px;
            display: inline-flex; align-items: center; justify-content: center; }

        /* Dodatki: sąsiednie wiersze stykały się hitboxami — 0 px odstępu przy
           „Wizjer nikiel / patyna / czarny". Odstęp z `margin-top` (nie ma go
           w inline style labela, więc wygrywa bez !important). */
        #cfg-dodatki-sekcja label { min-height: 48px; }
        #cfg-dodatki-sekcja label + label { margin-top: 8px; }
        /* ⚠ !important MUSI tu być: checkbox ma INLINE `style="width:16px;height:16px"`,
           a inline bije każdą regułę z arkusza (ta sama pułapka co .cfg-akcje-row). */
        #cfg-dodatki-sekcja .cfg-dodatek { width: 21px !important; height: 21px !important; }

        /* „Ustawić tę szybę także w dostawce?" — przyciski miały 33 px, a to
           pytanie decyduje o szkleniu całego zestawu. */
        #cfg-szklo-sync button, #cfg-szklo-pyt button { min-height: 46px; }

        /* Podpis pod etykietą kafla („szyba w skrzydle") miał 9,92 px — to on
           mówi klientowi, KTÓRĄ szybę teraz ustawia. */
        #cfg-szklo-ctx .cfg-tile-label small { font-size: .7rem; }

        /* ── DOPŁATY PRZY ANTABIE (02.09.2026, pomiar po wdrożeniu audytu) ──
           Blok wyżej objął `#cfg-dodatki-sekcja`, ale te trzy siedzą we
           WŁASNYCH kontenerach i wypadły z niego. Zmierzone na kroku 3:
           etykiety 22 px (217, 366 i 184 px szerokie), checkboxy 16x16.
           To nie są drobiazgi — każdy z nich to dopłata, którą Sławek
           zaznacza przy kliencie:
             Podświetlenie LED      +370 zł (+600 zł przepust bez silnika)
             Przycisk otwierania    +100 zł przewodowy przy przepuście, inaczej +500 zł bezprzewodowy
             Elektrozaczep          +350 zł
           `!important` na checkboxie MUSI tu być: rozmiar 16x16 przychodzi
           ze stylu INLINE w znaczniku, a inline bije każdą regułę arkusza
           (ta sama pułapka co przy .cfg-dodatek wyżej). Etykiety mają już
           `display:inline-flex; align-items:center` w stylu inline, więc
           samo min-height wystarczy i nic nie rozjeżdża wyrównania. */
        #cfg-antaba-led-wrap, #cfg-antaba-przycisk-wrap,
        #cfg-antaba-elektro-wrap { min-height: 44px; }
        #cfg-antaba-led, #cfg-antaba-przycisk,
        #cfg-antaba-elektro { width: 21px !important; height: 21px !important; }
    }

    /* ── Animacje kroku Szklenie: wejście sekcji przy zmianie kontekstu
          (drzwi/dostawka/nadświetle) + puls na zaznaczonym kaflu ── */
    @keyframes cfgSzkloIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
    .cfg-szklo-anim { animation: cfgSzkloIn .38s cubic-bezier(.16,1,.3,1); }
    @keyframes cfgKafelPuls {
        0%   { box-shadow: 0 0 0 0 rgba(196,144,96,.55); }
        100% { box-shadow: 0 0 0 16px rgba(196,144,96,0); }
    }
    .cfg-klamka-card.cfg-puls { animation: cfgKafelPuls .75s ease-out; }

    /* ── TABLET: KROK KOLOR I PODSUMOWANIE Z CENĄ (Kamil 01.09.2026) ────────
       Zmierzone na żywym konfiguratorze (krok 5) w obu orientacjach Pada 6.

       POZIOMO 1440x900 — najgorsze miejsce na tym ekranie. Prawy panel dostaje
       sztywne `calc(100vh - 67px)` = 833 px. Nagłówek sceny zjadał 179 px,
       podsumowanie 383 px, na render zostawało 269 px → DRZWI 113 px SZEROKOŚCI
       (render ma 700x1512, więc decyduje WYSOKOŚĆ sceny). To niecałe 2 cm na
       ekranie 309 PPI — obok ceny. Pionowo ten sam wzór ma 287x620.
       ⛔ NIE naprawiać tego kopiowaniem `height: min(58vh, 730px)` z bloku
       1500px — ta reguła jest MARTWA także na desktopie: `.cfg-right .cfg-stage
       img` (0,3,1) i tak nadpisuje wysokość przez `calc(100% - 24px)`.
       Jedna trzecia nagłówka to przycisk „Zwiń podgląd" (44 px), który w tym
       przedziale JEST MARTWY: całe zachowanie (`body.cfg-zwiniete …`) siedzi
       w bloku 701-980 px. Zmierzone przy 1440: klik nie zmienia wysokości
       obrazka, karty, chipów ani wiersza akcji — nie obraca nawet chevronu.
       Odsłoniło go dopiero `min-width: 701px` w bloku celów dotykowych wyżej.
       Chowamy go i oddajemy odzyskane piksele scenie: 269 → 318 px, drzwi
       113 → 136 px. Docelowo scena potrzebuje SZERSZEJ prawej kolumny i
       podsumowania OBOK renderu, nie pod nim (zmierzony prototyp: kolumna
       620 px + karta dwukolumnowa daje drzwi 264x571) — to już decyzja
       projektowa Kamila, nie poprawka audytowa.

       PIONOWO 900x1440 — render naprawiony blokiem wyżej (620 px), ale cena
       i notki zostały przy druku TELEFONU z bloku 701-980: cena 20,8 px
       (mniej niż 24 px, które ten sam tablet ma po obróceniu w poziom!),
       notka o kwocie cząstkowej 9,6 px, chipy 10,2 px. Panel ma tu 861 px
       szerokości — nie ma powodu na telefoniczny rozmiar.
       Zwinięcie panelu przestaje KASOWAĆ render: zamiast `height: 0` zostaje
       miniatura 65x140 px. Powód: panel zajmuje 1047 z 1440 px, więc listy
       kolorów nie da się przewinąć, a auto-zwijanie odpala się po 140 px
       scrolla — do tej pory Sławek tracił drzwi dokładnie w chwili, gdy
       klient wybierał ich kolor. Po zmianie: panel 338 px, 1031 px na kolory,
       drzwi wciąż widoczne i wciąż zmieniają kolor na żywo.

       Cele dotykowe kroku „Kolor" nie były wcześniej mierzone, bo panel kroku
       startuje z `display: none`: zakładki RAL/NCS 55x29, pole kodu 110x22,
       „Zastosuj" 91x40, „×" 34x34, klikalny wiersz ceny 831x25. Wszystkie
       schodzą do ≥44 px; font pola był już 16 px, więc Android nie zoomuje.

       Wszystkie trzy bloki domknięte z OBU stron. Zmierzone bez różnicy co do
       piksela: 390x844, 680x900 (telefon) i 1600x1000 (desktop). */
    @media (min-width: 701px) and (max-width: 1499px) {
        /* własny kolor RAL/NCS — jedyne cele <44 px w tym kroku */
        .cfg-krw-tab { min-height: 44px; padding: 0 18px; }
        .cfg-krw-field { height: 46px; }
        .cfg-krw-field input { height: 44px; }
        .cfg-krw-apply { height: 46px; }
        .cfg-krw-clear { width: 44px; height: 44px; }
        /* wiersz ceny JEST przyciskiem (rozwija rozbicie kwoty), a miał 25 px.
           `padding` zamiast `min-height` — zachowuje wyrównanie do linii bazowej
           między etykietą a kwotą, `align-items: center` by je rozjechało. */
        .cfg-price-row { padding: 10px 0; }
        /* „Udostępnij" i „Pobierz PDF" — 12,2 px druku na przycisku 411 px */
        .cfg-share, .cfg-foto-btn { font-size: .86rem; }
    }
    @media (min-width: 701px) and (max-width: 980px) {
        .cfg-price-value { font-size: 1.6rem; }
        .cfg-chip { font-size: .76rem; padding: 5px 11px; }
        /* zwinięty podgląd = MINIATURA, nie zero (patrz komentarz wyżej) */
        body.cfg-zwiniete .cfg-stage { min-height: 156px; padding: 8px; overflow: hidden; }
        body.cfg-zwiniete .cfg-stage img { height: 140px; }
    }
    @media (min-width: 981px) and (max-width: 1499px) {
        .cfg-zwin { display: none; }
        .cfg-stage-top { padding: 8px 14px; }
        .cfg-summary { padding: 2px 16px 10px; }
        .cfg-chips { gap: 5px; margin-bottom: 8px; }
        .cfg-price { margin-bottom: 8px; padding-top: 8px; }
        .cfg-cta { padding: 13px; }   /* 12 px zbijało przycisk do 42 — musi zostać ≥44 */
        .cfg-cta-note { margin-top: 6px; }
        .cfg-share, .cfg-foto-btn { margin-top: 6px; }
    }

    /* ── PRAWA KOLUMNA ZAWSZE W CAŁOŚCI NA EKRANIE (Kamil 06.07.2026):
          render + chipsy + cena + przyciski mieszczą się w viewporcie,
          obrazek drzwi elastycznie się kurczy; scroll ma tylko lewa strona ── */
    @media (min-width: 981px) {
        .cfg-right { height: calc(100vh - 67px); display: flex; flex-direction: column; }
        .cfg-stage-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
        .cfg-stage-top, .cfg-summary { flex: 0 0 auto; }
        .cfg-stage { flex: 1 1 auto; min-height: 160px; }
        /* obrazek absolutnie w scenie — skaluje się do niej, nigdy nie wystaje
           (max-height:100% na flex-item nie ograniczało naturalnej wysokości img) */
        .cfg-stage img {   /* stały box jak na desktopie — zero skoku przy podmianie src */
            position: absolute; inset: 12px 18px; transform: none;
            width: calc(100% - 36px); height: calc(100% - 24px);
            max-width: none; max-height: none; object-fit: contain;
        }
    }

    @media (max-width: 560px) {
        .cfg-nav-count { display: none; }   /* licznik łamał się przy szerokim "Gotowe – podsumowanie" */
        .cfg-model-grid { grid-template-columns: repeat(2, 1fr); }
        .cfg-swatches { grid-template-columns: repeat(3, 1fr); }   /* było 4 — podpisy kolorów ciasne na telefonie (audyt UX 10.07) */
        .cfg-intro h1, .cfg-step-title { font-size: 1.25rem; }
        .cfg-stage { min-height: 210px; }
        .cfg-stage img { height: 200px; }
    }

    /* ══ BLOK PRZENIESIONY TUTAJ 02.09.2026 ═════════════════════════
       Stal wyzej (~linia 1697) i przez to byl MARTWY: regula bazowa
       `.cfg-foto-lupka { width:26px; height:26px }` z linii ~1946 stoi
       PO nim, a `@media` nie podnosi specyficznosci — przy rownej
       specyficznosci wygrywa regula pozniejsza w pliku. Zmierzone:
       lupka zostawala 26x26 mimo deklaracji 44 px.
       Ten blok ma byc OSTATNI w arkuszu i tu ma zostac. ══════════ */
/* ── TELEFON: CELE DOTYKOWE (Kamil 02.09.2026: „pod kątem tableta jak
          i telefonu, czy wszystko gra?") ─────────────────────────────────
       Audyt tabletowy naprawił przedział 701–1499 px. Telefon (390 px) w niego
       NIE WCHODZI, więc na nim zostały dokładnie te same błędy. Zmierzone na
       żywym konfiguratorze przy 390x844, po przejściu kreatorem:
         krok 2 — 14 celów poniżej 44 px, w tym `.cfg-fchip` 29 px
                  („Grubość skrzydła" 68/78/88 mm — wybór za −250/+500 zł),
         krok 3 — 32 cele, w tym `.cfg-foto-lupka` 26x26 px.
       Na telefonie ma to znaczenie WIĘKSZE niż na tablecie: palec jest ten sam,
       a cel mniejszy. Wartości identyczne z blokiem tabletowym — jeden rozmiar
       palca, jedna liczba.

       `!important` przy checkboxach MUSI tu być: rozmiar 16x16 przychodzi ze
       stylu inline w znaczniku, a inline bije każdą regułę arkusza. */
    @media (max-width: 700px) {
        .cfg-fchip { min-height: 44px; }
        .cfg-filter-chips { gap: 8px; }
        #cfg-rama > summary { min-height: 44px; }
        /* Lupka powiększenia zdjęcia — 26x26 px to najmniejszy cel w kroku 3,
           a na dotyku jest widoczna zawsze (hover nie istnieje). */
        .cfg-foto-lupka { width: 44px; height: 44px; }
        /* A6 (przegląd przed startem 19.10.2026): lupa w kaflach klamek, antab, szyb i listew schodzi w dół,
           ptaszek wybranego zostaje w prawym górnym rogu, jak na wszystkich kaflach. */
        .cfg-klamka-card .cfg-foto-lupka { top: auto; bottom: 6px; right: 6px; }
        .cfg-klamka-card.is-selected::after { width: 22px; height: 22px; font-size: .66rem; top: 8px; right: 8px; }
        /* Nagłówek strony: logo 30 px, „Zaloguj" 34 px. */
        .kp-logo-link, .kp-login-link { min-height: 44px;
            display: inline-flex; align-items: center; }
        /* Kolor wkładki i dopłaty przy antabie — te same elementy, co na tablecie. */
        .cfg-wk-kolory .cfg-fchip { min-height: 44px; padding: 0 14px;
            display: inline-flex; align-items: center; justify-content: center; }
        #cfg-antaba-led-wrap, #cfg-antaba-przycisk-wrap,
        #cfg-antaba-elektro-wrap { min-height: 44px; }
        #cfg-antaba-led, #cfg-antaba-przycisk, #cfg-antaba-elektro,
        #cfg-dodatki-sekcja .cfg-dodatek { width: 21px !important; height: 21px !important; }
        #cfg-dodatki-sekcja label { min-height: 48px; }
        #cfg-dodatki-sekcja label + label { margin-top: 8px; }
        #cfg-szklo-sync button, #cfg-szklo-pyt button { min-height: 46px; }
        /* Własny kolor RAL/NCS. */
        .cfg-krw-tab { min-height: 44px; padding: 0 18px; }
        .cfg-krw-field { height: 46px; }
        .cfg-krw-field input { height: 44px; }
        .cfg-krw-apply { height: 46px; }
        .cfg-krw-clear { width: 44px; height: 44px; }
        .cfg-price-row { padding: 10px 0; }

        /* Przełączniki nad renderem: „Z zewnątrz / Od środka" i „Dzień / Noc"
           miały 20 px. To nimi POKAZUJE SIĘ klientowi, jak drzwi wyglądają
           z drugiej strony i po zmroku — i to samo znalazł audyt tabletowy
           (tam 31 px). Segmenty siedzą obok siebie, więc sam wzrost wysokości
           nie wystarczy: bez odstępu sąsiednie hitboxy się stykają. */
        #cfg-widok-seg button, #cfg-pora-seg button { min-height: 44px;
            padding: 0 14px; display: inline-flex; align-items: center;
            justify-content: center; }
        #cfg-widok-seg, #cfg-pora-seg { gap: 6px; }

        /* Nawigacja kreatora — 40 i 43 px, czyli tuż pod normą. Bez nich
           nie da się przejść dalej, więc to najczęściej dotykane przyciski
           na całej stronie. */
        .cfg-btn, .cfg-btn-back, .cfg-btn-next { min-height: 46px; }

        /* „Udostępnij", „Pobierz PDF", „Zobacz na zdjęciu swojego domu". */
        .cfg-share, .cfg-foto-btn { min-height: 46px; }

        /* Rozwijana lista (np. wybór wariantu) miała 36 px; 16 px druku
           dodatkowo powstrzymuje Androida przed przybliżaniem pola. */
        .cfg-select { min-height: 46px; font-size: 16px; }
    }

    /* Telefon/tablet: naturalny scroll bez zmiany wysokości pod palcem (28.09.2026).
       Skrót pokazuje aktualne drzwi po przewinięciu całej karty. */
    .cfg-preview-shortcut, .cfg-label-short { display: none; }
    .cfg-zwin:focus-visible, .cfg-preview-shortcut:focus-visible,
    .cfg-lightbox-close:focus-visible { outline: 3px solid var(--kp-gold); outline-offset: 3px; }
    @media (max-width: 980px) {
        .cfg-right { position: static; z-index: auto; }
        /* Nagłówek przewija się razem z obrazem — nic nie zasłania drzwi. */
        .cfg-stage-card { overflow: hidden; }
        .cfg-stage-top { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr);
            position: relative; align-items: center; gap: 8px; padding: 10px 12px; }
        .cfg-stage-heading { min-width: 0; }
        .cfg-stage-model { overflow-wrap: anywhere; }
        .cfg-stage-controls { display: contents !important; }
        .cfg-live-rzad { justify-self: end; }
        .cfg-live-rzad .cfg-live-badge, .cfg-pora-new, .cfg-pora-symbol,
        .cfg-stage-top .cfg-label-wide { display: none; }
        .cfg-stage-top .cfg-label-short { display: inline; }
        .cfg-stage-top .cfg-widok-seg { min-width: 0; width: 100%; gap: 2px; }
        #cfg-widok-seg button, #cfg-pora-seg button { flex: 1 1 0; min-width: 0; min-height: 44px;
            padding: 0 4px; font-size: .76rem; letter-spacing: 0; justify-content: center; }
        .cfg-zwin { touch-action: manipulation; }
        .cfg-preview-shortcut:not([hidden]) { display: inline-flex; align-items: center; gap: 8px;
            position: fixed; right: max(16px, env(safe-area-inset-right, 0px));
            bottom: calc(var(--cfg-nav-clearance, 84px) + env(safe-area-inset-bottom, 0px)); z-index: 40;
            min-height: 46px; padding: 0 16px; border: 1px solid var(--kp-line); border-radius: 999px;
            background: #fff; color: var(--kp-brown-dark); box-shadow: 0 4px 16px rgba(85,45,28,.18);
            font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; touch-action: manipulation; }
        .cfg-preview-shortcut:hover, .cfg-preview-shortcut:active { background: #f3e7d2; }
        body.kp-embed .cfg-preview-shortcut { display: none; }
    }
    @media (prefers-reduced-motion: reduce) {
        .cfg-zwin i, .cfg-stage, .cfg-stage img { transition: none; }
    }
/* Tabletowy skrót jest fixed; przodek z filtrem nie może zmieniać jego układu odniesienia. */
@media (min-width: 701px) and (max-width: 980px) {
.cfg-nav { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* Telefon: spokojna hierarchia, systemowy font i jeden pasek akcji. */
.cfg-mobile-only, .cfg-step-mobile { display: none; }
.cfg-model-filters, .cfg-filter-options { display: contents; }
.cfg-model-filters > summary { display: none; }
.cfg-model-filters .cfg-opis-hint { flex-basis: 100%; }
.cfg-price-row { border: 0; width: 100%; background: none; color: inherit; font-family: inherit; text-align: left; }
@media (max-width: 700px) {
 html { scroll-padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); }
 .cfg-step-panel :is(input, select, textarea, button, [tabindex]) { scroll-margin-bottom: 6rem; }
 body.kp-body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-size: .9375rem; }
 .cfg-mobile-only { display: inline; }
 .cfg-desktop-only { display: none; }
 .kp-header { position: static; padding: .25rem .75rem; box-shadow: none; }
 .kp-logo { height: 24px; }
 .kp-login-link { font-size: .75rem; padding: 0 .625rem; border-color: transparent; }
 .cfg-wrap { padding: .5rem .75rem calc(7rem + env(safe-area-inset-bottom, 0px)); gap: .75rem; }
 .cfg-steps { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 2px; overflow: visible; margin: 0 0 .875rem; padding: 0; }
 .cfg-step-line, .cfg-steps .cfg-step-dot .lbl { display: none; }
 .cfg-step-dot { flex-direction: column; justify-content: center; gap: 3px; min-width: 0; min-height: 48px; padding: 2px 0; font-size: .6875rem; font-weight: 500; touch-action: manipulation; }
 .cfg-step-dot .n { width: 24px; height: 24px; border-width: 1px; font-size: .75rem; transition: color .15s, background-color .15s, border-color .15s; }
 .cfg-step-dot.active .n { background: var(--kp-brown); box-shadow: none; }
 .cfg-step-dot.active { font-weight: 700; }
 .cfg-step-mobile { display: block; line-height: 1.2; overflow-wrap: anywhere; }
 .cfg-step-title { font-family: inherit; font-size: 1.125rem; font-weight: 700; line-height: 1.25; letter-spacing: -.015em; margin-bottom: .25rem; }
 .cfg-step-lead { font-size: .8125rem; line-height: 1.4; margin-bottom: .75rem; }
 .cfg-card, .cfg-sekcja { padding: .75rem; border-width: 1px; border-radius: 12px; box-shadow: none; }
 .cfg-sekcja + .cfg-sekcja { margin-top: .75rem; }
 .cfg-sekcja-head { gap: .5rem; margin-bottom: .625rem; }
 .cfg-sekcja-ico { width: 28px; height: 28px; font-size: .8125rem; background: var(--kp-cream); border-radius: 7px; }
 .cfg-sekcja-tytul, .cfg-sub { font-size: .875rem; font-weight: 650; line-height: 1.35; letter-spacing: 0; text-transform: none; }
 .cfg-sub { display: block; margin-bottom: .5rem; }
 .cfg-sub::before { display: none; }
 .cfg-sub .cfg-sub-opis { font-size: .8125rem; font-weight: 400; }
 .cfg-sekcja-opis, .cfg-dim-hint { font-size: .8125rem; font-weight: 400; line-height: 1.4; }
 .cfg-sub-oddziel, .cfg-okleina-sekcja + .cfg-sub-oddziel { margin-top: 1.125rem; padding-top: .75rem; border-top-style: solid; }
 .cfg-dim label { font-size: .8125rem; }
 .cfg-wrap input:not([type=checkbox]):not([type=radio]):not([type=range]), .cfg-wrap select, .cfg-wrap textarea,
 .cfg-foto input:not([type=checkbox]):not([type=range]), .cfg-foto select { font-size: 1rem; }
 .cfg-filter-chips { gap: .375rem; }
 .cfg-fchip { min-height: 44px; padding: .5rem .625rem; font-size: .8125rem; line-height: 1.25; border-radius: 9px; box-shadow: none; }
 .cfg-fchip.is-active { background: var(--kp-brown); box-shadow: none; }
 .cfg-toolbar { display: flex; flex-direction: column; align-items: stretch; gap: .375rem; margin-bottom: .625rem; }
 .cfg-search-wrap { flex: none; width: 100%; min-width: 0; }
 .cfg-search-wrap input { min-height: 44px; width: 100%; }
 .cfg-model-filters { display: block; min-width: 0; border-bottom: 1px solid #eee5da; }
 .cfg-model-filters > summary { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 44px; padding: .375rem 0; color: var(--kp-brown); font-size: .8125rem; font-weight: 600; cursor: pointer; list-style: none; touch-action: manipulation; }
 .cfg-model-filters > summary::-webkit-details-marker { display: none; }
 .cfg-model-filters > summary::after { content: '+'; font-size: 1.25rem; font-weight: 400; }
 .cfg-model-filters[open] > summary::after { content: '−'; }
 .cfg-filter-count { margin-left: auto; font-size: .75rem; color: var(--kp-muted); }
 .cfg-filter-options { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 0 .75rem; }
 .cfg-model-filters:not([open]) > .cfg-filter-options { display: none; }
 .cfg-filter-options .cfg-seg { display: flex; width: 100%; }
 .cfg-filter-options .cfg-seg button { min-height: 44px; flex: 1; padding: .5rem; font-size: .8125rem; line-height: 1.3; }
 .cfg-filter-options .cfg-select { width: 100%; }
 .cfg-opis-hint { font-size: .8125rem; margin: .375rem 0 0; gap: .375rem; }
 .cfg-opis-hint span { width: 100%; }
 .cfg-opis-hint button { min-height: 44px; padding: .375rem .625rem; font-size: .8125rem; }
 .cfg-model-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .625rem; }
 .cfg-model-thumb { padding: .625rem; }
 .cfg-model-name { font-size: .8125rem; line-height: 1.25; padding: .5rem .25rem; letter-spacing: 0; overflow-wrap: anywhere; }
 .cfg-tile { padding: .625rem .5rem; border-radius: 10px; }
 .cfg-tile-label, .cfg-klamka-nazwa { font-size: .8125rem; line-height: 1.3; }
 .cfg-tile-label small, .cfg-klamka-cena { font-size: .75rem; line-height: 1.3; }
 .cfg-swatches { gap: .5rem; grid-template-columns: repeat(3,minmax(0,1fr)); }
 .cfg-swatch-name { font-size: .75rem; font-weight: 600; line-height: 1.2; padding: .375rem .125rem; }
 .cfg-okleina-info { padding: .625rem; gap: .625rem; }
 .cfg-okleina-info img { width: 40px; height: 40px; }
 .cfg-okleina-info-nazwa { font-size: .875rem; font-weight: 650; }
 .cfg-okleina-info-opis { font-size: .8125rem; }
 .cfg-stage-card { border-radius: 12px; box-shadow: none; background: #fbf6ee; }
 .cfg-stage-card::before { display: none; }
 .cfg-stage-top { padding: .5rem .75rem; gap: .5rem; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); }
 .cfg-stage-eyebrow { font-size: .75rem; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.3; }
 .cfg-stage-model { font-family: inherit; font-size: .9375rem; font-weight: 650; line-height: 1.3; letter-spacing: 0; }
 .cfg-zwin { padding: 0 .75rem; font-size: .8125rem; border-radius: 9px; box-shadow: none; }
 .cfg-stage-top .cfg-widok-seg { border-radius: 10px; box-shadow: none; }
 #cfg-widok-seg button, #cfg-pora-seg button { font-size: .75rem; border-radius: 8px; box-shadow: none; }
 .cfg-price-label { text-transform: none; letter-spacing: 0; font-size: .75rem; font-weight: 500; }
 .cfg-price-value { font-size: 1.25rem; font-weight: 700; }
 .cfg-price-value .od { font-size: .75rem; font-weight: 400; }
 .cfg-summary { padding: .5rem .75rem .75rem; }
 .cfg-share, .cfg-foto-btn { font-size: .8125rem; font-weight: 600; box-shadow: none; border-radius: 9px; }
 body.cfg-zwiniete .cfg-summary { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: .5rem; padding: .25rem .75rem .625rem; }
 body.cfg-zwiniete .cfg-price { margin: 0; border: 0; padding: 0; }
 /* Cena i przymiarka zostaja w jednym rzedzie; rozbicie ceny zajmuje cala szerokosc ponizej. */
 body.cfg-zwiniete .cfg-price:not([hidden]) { display: contents; }
 body.cfg-zwiniete .cfg-price-row { grid-column: 1; grid-row: 1; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; min-height: 44px; padding: 0; }
 body.cfg-zwiniete .cfg-price-details:not([hidden]) { grid-column: 1 / -1; grid-row: 2; min-width: 0; margin-top: 0; }
 body.cfg-zwiniete .cfg-foto-btn { display: inline-flex; grid-column: 2; grid-row: 1; align-self: center; width: auto; margin: 0; min-height: 44px; padding: .5rem .75rem; gap: .375rem; white-space: nowrap; }
 .cfg-foto-btn:hover { transform: none; }
 .cfg-summary .cfg-share { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; }
 .cfg-summary .cfg-share i { margin-right: 0; }
 .cfg-nav { display: grid; grid-template-columns: 44px minmax(5.5rem,1fr) minmax(0,1.45fr); gap: .375rem .5rem;
  position: fixed; left: 0; right: 0; bottom: 0; margin: 0; padding: .375rem .75rem .5rem;
  padding: .375rem max(.75rem,env(safe-area-inset-right,0px)) max(.5rem,env(safe-area-inset-bottom,0px)) max(.75rem,env(safe-area-inset-left,0px));
  border: 0; border-top: 1px solid var(--kp-line); border-radius: 0; background: #fffdf9; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 -2px 12px rgba(50,30,18,.05); z-index: 40; }
 .cfg-nav-count { display: block; grid-column: 1 / -1; grid-row: 1; text-align: center; font-size: .75rem; line-height: 1.3; font-weight: 500; }
 .cfg-nav .cfg-btn { grid-row: 2; justify-content: center; min-width: 0; min-height: 44px; padding: .5rem; gap: .375rem; font-family: inherit; font-size: .8125rem; line-height: 1.25; font-weight: 600; border-radius: 9px; box-shadow: none; }
 .cfg-nav .cfg-btn-back { grid-column: 1; background: transparent; color: var(--kp-brown); }
 .cfg-nav .cfg-btn-next { grid-column: 3; background: var(--kp-brown); }
 .cfg-nav .cfg-preview-shortcut:not([hidden]) { grid-column: 2; grid-row: 2; position: static; justify-content: center; min-width: 0; min-height: 44px; padding: .5rem; border-radius: 9px; box-shadow: none; font-size: .8125rem; font-weight: 600; }
 .cfg-nav button:active, .cfg-zwin:active { opacity: .75; }
 .cfg-step-panel.is-active { animation: none; }
 .cfg-wrap button, .cfg-model-card, .cfg-tile, .cfg-swatch { touch-action: manipulation; }
}
@media (max-width: 700px) and (prefers-reduced-transparency: reduce), (max-width: 700px) and (prefers-contrast: more) {
 .cfg-nav { background: #fffdf9; backdrop-filter: none; border-top: 1px solid var(--kp-brown); }
}
/* viewport-fit=cover: boczne wycięcie ekranu omija także treść, nie tylko pasek akcji. */
@media (max-width: 980px) {
 .cfg-wrap, .kp-header {
  padding-left: max(12px,env(safe-area-inset-left,0px));
  padding-right: max(12px,env(safe-area-inset-right,0px));
 }
 /* Gotowy obraz i szkielet zajmują tyle samo miejsca: obraz 220px + padding 2×12px. */
 body:not(.cfg-zwiniete) .cfg-stage { min-height: 244px; }
}
@media (min-width: 701px) and (max-width: 980px) {
 body:not(.cfg-zwiniete) .cfg-stage {
  min-height: max(min(660px,46vh),calc(min(620px,44vh) + 32px));
 }
}
@media (max-width: 560px) {
 /* Mały kadr: obraz 200px + padding 2×12px także podczas oczekiwania. */
 body:not(.cfg-zwiniete) .cfg-stage { min-height: 224px; }
}

/* Wybrany kolor i wymiary są widoczne także po zwinięciu podglądu. */
.cfg-stage-selection { display: none; }
.cfg-price[data-state="czeka"] .cfg-price-details, .cfg-price[data-state="blad"] .cfg-price-details { display: none; }
.cfg-price:not([data-state="gotowe"]) .od { visibility: hidden; }
.cfg-price[data-state="blad"] .cfg-price-value { font-size: .875rem; text-decoration: underline; text-underline-offset: 3px; }
.cfg-price-row:disabled { cursor: default; opacity: 1; }
.cfg-price-row:focus-visible { outline: 2px solid var(--kp-brown); outline-offset: 3px; }
@media (max-width: 700px) {
 body.cfg-zwiniete .cfg-stage-selection { display: block; padding: .125rem .75rem .375rem; color: var(--kp-brown-mid); font-size: .75rem; line-height: 1.4; overflow-wrap: anywhere; }
 .cfg-model-card:active, .cfg-swatch:active, .cfg-tile:active { background-color: #f6ede2; }
 .cfg-price-value.bump { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
 .cfg-price-value.bump, #cfg-nextbtn .fa-spin, #cfg-cta .fa-spin { animation: none; }
}

/* Telefon: drzwi prowadzą, a kontrolki zajmują tylko dwa spokojne rzędy. */
@media (max-width: 700px) {
 .cfg-stage-card { --cfg-phone-preview-height: clamp(300px,82vw,440px); }
 @supports (height: 1svh) {
  .cfg-stage-card { --cfg-phone-preview-height: clamp(300px,53svh,440px); }
 }
 .cfg-stage-top { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: .375rem .5rem; padding: .25rem .625rem .625rem; }
 .cfg-stage-eyebrow { display: none; }
 .cfg-stage-model { font-size: .9375rem; line-height: 1.3; }
 .cfg-zwin { min-height: 44px; padding: 0 .5rem; border: 0; background: transparent; box-shadow: none; }
 .cfg-stage-top .cfg-widok-seg { padding: 3px; border: 1px solid var(--kp-line); border-radius: 12px;
  background: var(--kp-cream-dark); box-shadow: none; gap: 2px; }
 #cfg-widok-seg button, #cfg-pora-seg button { min-width: 44px; min-height: 44px; padding: 0 4px; gap: 4px;
  border: 1px solid transparent; border-radius: 9px; font-size: .75rem; line-height: 1.25; font-weight: 600; letter-spacing: 0; }
 #cfg-widok-seg button.is-active, #cfg-pora-seg button.is-active, #cfg-pora-seg button.is-active[data-pora="noc"] {
  background: var(--kp-brown); border-color: var(--kp-brown); color: #fff8ee; box-shadow: 0 1px 3px rgba(62,31,18,.16); }
 #cfg-widok-seg button:focus-visible, #cfg-pora-seg button:focus-visible { outline: 2px solid var(--kp-brown); outline-offset: -3px; }
 #cfg-widok-seg button.is-active:focus-visible, #cfg-pora-seg button.is-active:focus-visible { outline-color: var(--kp-gold-light); }
 .cfg-stage-top .cfg-widok-seg button:active:not(:disabled) { opacity: .85; }
 .cfg-stage-card.is-noc .cfg-stage-top .cfg-widok-seg { background: #282733; border-color: #6c584c; }
 .cfg-stage-card.is-noc .cfg-zwin, .cfg-stage-card.is-noc #cfg-widok-seg button, .cfg-stage-card.is-noc #cfg-pora-seg button { color: #e8dacd; }
 .cfg-stage-card.is-noc #cfg-widok-seg button.is-active, .cfg-stage-card.is-noc #cfg-pora-seg button.is-active,
 .cfg-stage-card.is-noc #cfg-pora-seg button.is-active[data-pora="noc"] {
  background: #f6e8d5; border-color: var(--kp-gold-light); color: var(--kp-brown-dark); }
 .cfg-stage-card.is-noc #cfg-widok-seg button:focus-visible, .cfg-stage-card.is-noc #cfg-pora-seg button:focus-visible { outline-color: #ffd9a0; }
 .cfg-stage-card.is-noc #cfg-widok-seg button.is-active:focus-visible, .cfg-stage-card.is-noc #cfg-pora-seg button.is-active:focus-visible { outline-color: var(--kp-brown); }
 @media (min-width: 360px) { .cfg-stage-top .cfg-pora-symbol { display: inline-block; } }
 body:not(.cfg-zwiniete) .cfg-stage { height: var(--cfg-phone-preview-height); min-height: var(--cfg-phone-preview-height); padding: 8px 12px; overflow: hidden; }
 body:not(.cfg-zwiniete) .cfg-stage img { position: absolute; inset: 8px 12px; transform: none; width: calc(100% - 24px); height: calc(100% - 16px);
  max-width: none; max-height: none; object-fit: contain; }
 body:not(.cfg-zwiniete) .cfg-stage .cfg-skeleton { inset: 8px 12px; }
 .cfg-chips .cfg-chip-model, .cfg-chips .cfg-chip-default-thickness { display: none; }
 body:not(.cfg-zwiniete) .cfg-summary { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1.15fr) minmax(0,.7fr); gap: .375rem; padding: .375rem .625rem .625rem; }
 body:not(.cfg-zwiniete) .cfg-summary .cfg-chips, body:not(.cfg-zwiniete) .cfg-summary .cfg-price,
 body:not(.cfg-zwiniete) .cfg-summary .cfg-cta, body:not(.cfg-zwiniete) .cfg-summary .cfg-cta-note { grid-column: 1 / -1; }
 body:not(.cfg-zwiniete) .cfg-summary .cfg-chips { margin: 0; gap: .375rem; }
 body:not(.cfg-zwiniete) .cfg-summary .cfg-price { margin: 0; padding-top: .375rem; }
 body:not(.cfg-zwiniete) .cfg-summary .cfg-cta { min-height: 44px; padding: .5rem .625rem; font-size: .8125rem; line-height: 1.35; letter-spacing: 0; text-transform: none; box-shadow: none; }
 body:not(.cfg-zwiniete) .cfg-summary .cfg-akcje-row { display: contents !important; }
 body:not(.cfg-zwiniete) .cfg-summary .cfg-share { min-width: 0; min-height: 44px; width: auto; margin: 0; padding: .375rem; gap: .375rem;
  justify-content: center; font-size: .75rem; line-height: 1.25; border-radius: 7px; box-shadow: none; }
 body:not(.cfg-zwiniete) .cfg-summary .cfg-foto-btn { grid-column: 1; }
 body:not(.cfg-zwiniete) .cfg-summary .cfg-cta-note { margin: .125rem 0 0; font-size: .6875rem; line-height: 1.35; }
}

/* Telefon: przymiarka — bardziej zwarta powłoka, pełne cele dotykowe.
   Reguły po istniejących ustawieniach mobile.
   Bez zmiany wymiarów bitmapy, transformacji sceny ani położenia uchwytów. */
@media (max-width: 700px) {
.cfg-foto {
    bottom: auto;
    height: 100vh;
    height: 100dvh;
    padding: 0;
}
.cfg-foto .cfg-foto-panel {
    height: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
}
.cfg-foto .cfg-foto-top {
    gap: .5rem;
    padding: max(.375rem, env(safe-area-inset-top, 0px)) .625rem .375rem;
}
.cfg-foto .cfg-foto-tytul {
    min-width: 0;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
}
.cfg-foto .cfg-foto-tytul i { margin-right: .375rem; }
.cfg-foto .cfg-foto-x {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    flex: 0 0 44px;
}
.cfg-foto .cfg-foto-body,
.cfg-foto .cfg-foto-wybor,
.cfg-foto .cfg-foto-kolory {
    min-height: 0;
    padding: .625rem .625rem max(1rem, env(safe-area-inset-bottom, 0px));
}
.cfg-foto .cfg-foto-body { overflow-y: auto; }

.cfg-foto .cfg-foto-start { padding: .75rem .625rem 1rem; }
.cfg-foto .cfg-foto-ikona {
    font-size: 1.75rem;
    line-height: 1;
    margin-bottom: .5rem;
}
.cfg-foto .cfg-foto-lead {
    font-size: .875rem;
    line-height: 1.4;
    margin-bottom: .75rem;
}
.cfg-foto .cfg-foto-upload {
    min-height: 44px;
    padding: .625rem 1rem;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.3;
    box-shadow: 0 2px 6px rgba(85,45,28,.12);
}
.cfg-foto .cfg-foto-rodo {
    margin-top: .75rem;
    font-size: .75rem;
    line-height: 1.4;
}
.cfg-foto .cfg-foto-przyklady { margin-top: 1rem; padding-top: .75rem; }
.cfg-foto .cfg-foto-przyklady-tytul {
    font-size: .8125rem;
    line-height: 1.4;
    font-weight: 600;
    margin-bottom: .625rem;
}

.cfg-foto .cfg-foto-model-bar { gap: .5rem; margin-bottom: .5rem; }
.cfg-foto .cfg-foto-model-bar strong {
    font-size: .9375rem;
    font-weight: 650;
    line-height: 1.3;
}
.cfg-foto .cfg-foto-model-bar small {
    font-size: .75rem;
    line-height: 1.35;
    margin-top: .125rem;
}
.cfg-foto .cfg-foto-akcje { gap: .5rem; }
.cfg-foto .cfg-foto-akcje button {
    min-width: 0;
    min-height: 44px;
    padding: .5rem .625rem;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.3;
    box-shadow: none;
}
.cfg-foto .cfg-foto-status {
    gap: .5rem;
    margin-bottom: .5rem;
    font-size: .8125rem;
    line-height: 1.4;
}
/* Taki sam udział ekranu jak dotąd; dvh liczy miejsce pod paskami przeglądarki.
   Nie ustawiamy width/height: canvas zachowuje proporcje zdjęcia i skalę uchwytów. */
#cfg-foto-canvas { max-height: 56vh; max-height: 56dvh; }
.cfg-foto .cfg-foto-hint {
    margin: .5rem 0;
    font-size: .75rem;
    line-height: 1.4;
}
.cfg-foto .cfg-foto-porownanie,
.cfg-foto .cfg-foto-dopasuj { margin: .625rem 0; }
.cfg-foto .cfg-foto-porownanie summary,
.cfg-foto .cfg-foto-dopasuj summary {
    min-height: 44px;
    padding: .625rem 0;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.4;
}
.cfg-foto .cfg-foto-porownanie p {
    font-size: .8125rem;
    line-height: 1.4;
    margin: .25rem 0 .5rem;
}
.cfg-foto .cfg-foto-controls { gap: .5rem; }
.cfg-foto .cfg-foto-dopasuj .cfg-foto-controls { padding-bottom: .625rem; }
.cfg-foto .cfg-foto-controls button,
.cfg-foto .cfg-foto-upload-maly,
.cfg-foto .cfg-foto-wroc,
.cfg-foto .cfg-foto-powtorz,
.cfg-foto .cfg-foto-eksport button {
    min-height: 44px;
    padding: .5rem .75rem;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.35;
}
.cfg-foto .cfg-foto-suwak {
    width: 100%;
    min-height: 44px;
    gap: .5rem;
    font-size: .8125rem;
}
.cfg-foto .cfg-foto-suwak input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
}
.cfg-foto .cfg-foto-eksport { gap: .5rem; }
.cfg-foto .cfg-foto-pamiec {
    margin-top: .75rem;
    font-size: .75rem;
    line-height: 1.4;
}
.cfg-foto .cfg-foto-wybor-head h2 {
    margin: .75rem 0 .375rem;
    font-size: 1.125rem;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -.015em;
}
.cfg-foto .cfg-foto-wybor-head p {
    font-size: .8125rem;
    line-height: 1.4;
    margin-bottom: .625rem;
}
}

    /* Wkładki: jeden wybór produktu (producent + klasa), wspólna ilość i kolor. */
    #cfg-wkladka-sekcja .cfg-sekcja-opis { font-weight: 400; line-height: 1.45; }
    .cfg-wkl-komplet { margin: 0 0 12px; color: var(--kp-brown-dark); font-size: .875rem; line-height: 1.4; }
    .cfg-wkl-komplet strong, .cfg-wkl-komplet small { display: block; }
    .cfg-wkl-komplet small { margin-top: 3px; font-size: .8125rem; font-weight: 400; color: #765744; }
    #cfg-wkladki { display: flex; flex-direction: column; border: 1px solid #d9c8b4; border-radius: 12px; }
    .cfg-wkl-opcja { display: grid; grid-template-columns: 20px minmax(0,1fr) auto; align-items: center;
        gap: 10px; width: 100%; min-height: 64px; padding: 11px 13px; margin: 0; border: 0;
        border-bottom: 1px solid #e6dacb; border-radius: 0; background: #fff; color: var(--kp-brown-dark);
        font-family: inherit; font-size: .875rem; line-height: 1.3; text-align: left; cursor: pointer;
        touch-action: manipulation; -webkit-tap-highlight-color: rgba(85,45,28,.08); transition: background-color .15s; }
    .cfg-wkl-opcja:first-child { border-radius: 11px 11px 0 0; }
    .cfg-wkl-opcja:last-child { border-bottom: 0; border-radius: 0 0 11px 11px; }
    .cfg-wkl-opcja.is-selected { background: var(--kp-cream); }
    .cfg-wkl-wybor { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
        border: 1.5px solid #967057; border-radius: 50%; color: #fff; }
    .cfg-wkl-wybor i { visibility: hidden; font-size: 9px; }
    .cfg-wkl-opcja.is-selected .cfg-wkl-wybor { background: var(--kp-brown); border-color: var(--kp-brown); }
    .cfg-wkl-opcja.is-selected .cfg-wkl-wybor i { visibility: visible; }
    .cfg-wkl-nazwa { min-width: 0; }
    .cfg-wkl-nazwa strong, .cfg-wkl-nazwa small { display: block; }
    .cfg-wkl-nazwa strong { font-weight: 700; }
    .cfg-wkl-nazwa small { margin-top: 3px; color: #765744; font-size: .8125rem; }
    .cfg-wkl-kwota { text-align: right; font-variant-numeric: tabular-nums; }
    .cfg-wkl-cena { display: block; color: var(--kp-brown-mid); font-weight: 700; white-space: nowrap; }
    .cfg-wkl-zakres { display: block; margin-top: 3px; color: #765744; font-size: .75rem; }
    .cfg-wkl-opcja:disabled { cursor: default; background: #f4f0ea; color: #765744; }
    #cfg-wkladka-sekcja .cfg-wk-kolory { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: stretch; gap: 8px; margin-top: 18px; }
    #cfg-wkladka-sekcja .cfg-wk-kolory-lbl { grid-column: 1/-1; margin: 0 0 2px; font-size: .875rem; color: var(--kp-brown-dark); }
    #cfg-wkladka-sekcja .cfg-fchip { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
        min-width: 0; min-height: 44px; padding: 9px 7px; border: 1px solid #d9c8b4; border-radius: 9px;
        background: #fff; color: var(--kp-brown-dark); font-size: .8125rem; line-height: 1.25;
        box-shadow: none; touch-action: manipulation; transition: background-color .15s, border-color .15s, color .15s; }
    #cfg-wkladka-sekcja .cfg-fchip[data-wkolor=""] { grid-column: 1/-1; justify-content: flex-start; padding: 10px 12px; }
    #cfg-wkladka-sekcja .cfg-fchip.is-active { background: var(--kp-brown); border-color: var(--kp-brown); color: #fff8ee; }
    #cfg-wkladka-sekcja .cfg-wkl-probka { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(85,45,28,.28); flex-shrink: 0; }
    .cfg-wkl-podsumowanie { margin: 12px 0 0; font-size: .8125rem; line-height: 1.4; color: #765744; }
    #cfg-wkladka-sekcja .cfg-wkl-opcja:focus-visible, #cfg-wkladka-sekcja .cfg-fchip:focus-visible { outline: 2px solid var(--kp-brown); outline-offset: 3px; position: relative; z-index: 1; }
    @media (hover:hover) {
        .cfg-wkl-opcja:hover:not(:disabled) { background: #f7eee2; }
        #cfg-wkladka-sekcja .cfg-fchip:hover:not(.is-active) { background: var(--kp-cream); border-color: #967057; }
    }
    @media (max-width:360px) {
        .cfg-wkl-opcja { gap: 8px; padding: 11px 9px; font-size: .8125rem; }
        #cfg-wkladka-sekcja .cfg-fchip { gap: 5px; padding: 9px 5px; }
    }
    @media (prefers-reduced-motion:reduce) {
        .cfg-wkl-opcja, #cfg-wkladka-sekcja .cfg-fchip { transition: none; }
    }
    /* Listwy na próg: nazwa i dopłata w osobnych wierszach, bez ściskania tekstu. */
    #cfg-listwy-prog { display: grid; grid-template-columns: repeat(3,minmax(0,1fr));
        align-items: stretch; gap: 8px; max-width: 600px; }
    #cfg-listwy-prog .cfg-fchip { display: flex; flex-direction: column; align-items: center;
        justify-content: center; gap: 5px; min-width: 0; min-height: 64px; padding: 10px 12px;
        font-size: .875rem; line-height: 1.3; border-radius: 10px; text-align: center;
        touch-action: manipulation; transition: background-color .15s, border-color .15s, color .15s; }
    #cfg-listwy-prog .cfg-lp-nazwa { display: inline-flex; align-items: center; justify-content: center;
        gap: 7px; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
    #cfg-listwy-prog .cfg-kropka { margin: 0; }
    #cfg-listwy-prog .cfg-chip-doplata { display: block; margin: 0; font-size: .8125rem;
        line-height: 1.25; opacity: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
    #cfg-listwy-prog .cfg-fchip:hover, #cfg-listwy-prog .cfg-fchip:active { transform: none; }
    #cfg-listwy-prog .cfg-fchip:focus-visible { outline: 2px solid var(--kp-brown); outline-offset: 3px; }
    @media (max-width:700px) {
        #cfg-listwy-prog { grid-template-columns: repeat(2,minmax(0,1fr)); }
    }
    @media (prefers-reduced-motion:reduce) {
        #cfg-listwy-prog .cfg-fchip { transition: none; }
    }

/* ── WEWNĘTRZNE: panel-zaślepka kroku w przygotowaniu (17.10.2026) ── */
.kpw-zaslepka { padding: 36px 24px; text-align: center; }
.kpw-zaslepka p { margin: 0; color: #7a6a5a; font-size: .95rem; line-height: 1.5; }
.kpw-zaslepka i { color: #c49060; margin-right: 6px; }

/* ── DOTYK: kafle w przewijanych listach nie podskakują od :hover (17.10.2026) ──
   Na telefonie :hover „przykleja się" do ostatnio dotkniętego elementu i przeskakuje przy gestach
   przewijania; każdy translate/scale z :hover wygląda wtedy jak drganie. Ruch zostaje tylko na myszy. */
@media (hover: none), (pointer: coarse) {
    .cfg-model-card:hover, .cfg-marka-karta:hover, .cfg-fchip:hover, .cfg-foto-przyklad:hover,
    .cfg-tile:hover, .cfg-swatch:hover { transform: none; }
}

/* ── „TWOJE DRZWI TERAZ": stuknięcie w zwinięty podgląd albo w wybrany kafel (telefon, 17.10.2026) ── */
.kpw-teraz { position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: 560px; max-height: 92vh; max-height: 92dvh;
    padding: 0; border: 0; border-radius: 20px 20px 0 0; background: #fdf8f0; color: var(--kp-brown, #552d1c);
    box-shadow: 0 -12px 40px rgba(40,22,10,.28); overflow: hidden; display: none; flex-direction: column; overscroll-behavior: contain; }
.kpw-teraz[open] { display: flex; animation: kpwTerazIn .22s ease-out; }
.kpw-teraz::backdrop { background: rgba(30,18,8,.45); }
@keyframes kpwTerazIn { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .kpw-teraz[open] { animation: none; } }
.kpw-teraz-gora { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 6px 18px; border-bottom: 1px solid #efe4d3; }
.kpw-teraz-gora h2 { margin: 0; font: 700 1.05rem/1.3 'Playfair Display', Georgia, serif; }
.kpw-teraz-x { min-width: 44px; min-height: 44px; border: 0; border-radius: 12px; background: transparent; color: inherit; font-size: 1.15rem; cursor: pointer; }
.kpw-teraz-tresc { overflow: auto; padding: 12px 18px 16px; }
.kpw-teraz-obraz { display: flex; align-items: center; justify-content: center; height: min(50vh, 420px); height: min(50dvh, 420px);
    background: radial-gradient(ellipse at 50% 30%, #fff 0%, #f3ebdf 100%); border-radius: 14px; margin-bottom: 12px; position: relative; }
.kpw-teraz-obraz img { max-width: 100%; max-height: calc(100% - 16px); object-fit: contain; }
.kpw-teraz-obraz small { position: absolute; bottom: 6px; left: 0; right: 0; text-align: center; font-size: .72rem; color: #8a7a68; }
.kpw-teraz-lista { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.kpw-teraz-lista li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: baseline; font-size: .9rem; line-height: 1.4; }
.kpw-teraz-lista i { color: #b07a45; text-align: center; }
.kpw-teraz-lista b { font-weight: 700; }
.kpw-teraz-cena { border-top: 1px solid #efe4d3; padding-top: 10px; margin-bottom: 12px; }
.kpw-teraz-cena-wiersz { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: #8a6a4a; font-weight: 700; }
.kpw-teraz-cena-wiersz strong { font-size: 1.45rem; letter-spacing: 0; text-transform: none; color: var(--kp-brown, #552d1c); }
.kpw-teraz-cena-wiersz strong span { font-size: .8rem; font-weight: 600; margin-right: 4px; }
.kpw-teraz-pozycje .cfg-price-pos { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; color: #6b5a48; padding: 3px 0; }
.kpw-teraz-akcje { display: grid; gap: 8px; }
.kpw-teraz-akcje button { min-height: 48px; border-radius: 12px; font: 700 .92rem/1.2 Inter, system-ui, sans-serif; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.kpw-teraz-przymierz { border: 1px solid #d8b36a; background: linear-gradient(135deg, #f3d48a, #d9a94e); color: #3a2410; }
.kpw-teraz-wycena { border: 0; background: linear-gradient(135deg, var(--kp-brown, #552d1c), #7a4a2c); color: #fff; }
body.cfg-zwiniete #cfg-stage-card { cursor: pointer; }

/* ── Przycisk „Przymierz" na mini podglądzie (zwinięta karta, telefon/tablet, 17.10.2026) ──
   Miejsce i wygląd jak złoty przycisk zwiniętej karty (kolumna 2 siatki .cfg-summary); poza zwiniętą kartą ukryty. */
.kpw-przymierz-mini { display: none; }
@media (max-width: 980px) {
    body.cfg-zwiniete .cfg-summary .kpw-przymierz-mini { display: inline-flex; grid-column: 2; grid-row: 1; align-self: center; align-items: center; gap: .4rem;
        min-height: 44px; min-width: 44px; margin: 0; padding: .5rem .9rem; border: 0; border-radius: 12px; white-space: nowrap; cursor: pointer;
        background: linear-gradient(135deg, #f6d68a, #c9962c); color: #2a1a0c; font: 800 .875rem/1 Inter, system-ui, sans-serif;
        box-shadow: 0 3px 10px rgba(150,100,30,.35); }
    body.cfg-zwiniete .cfg-summary .kpw-przymierz-mini i { font-size: 1rem; }
}

/* „Twoje drzwi teraz" v2: Przymierz zaraz pod drzwiami, pełna szerokość, wyraźny (Kamil 17.10.2026) */
.kpw-teraz-tresc > .kpw-teraz-przymierz { display: flex; width: 100%; min-height: 50px; margin: 0 0 12px; border-radius: 12px; align-items: center; justify-content: center; gap: 8px;
    font: 800 .95rem/1.2 Inter, system-ui, sans-serif; cursor: pointer; box-shadow: 0 3px 10px rgba(150,100,30,.3); }
.kpw-teraz-lista { grid-template-columns: 1fr 1fr; column-gap: 10px; }
.kpw-teraz-lista li:first-child { grid-column: 1 / -1; }

/* ── GÓRA STRONY NA iPHONIE (Kamil 17.10.2026: „nie mogę zobaczyć góry, przeglądarka mi blokuje") ──
   Meta viewport ma viewport-fit=cover (1:1 z zewnętrznych), więc treść może wejść pod pasek stanu / pasek
   przeglądarki. Boki i dół uwzględniały env(safe-area-inset-*), góra nie. Tam, gdzie wcięcia nie ma, to 0 px. */
body.kp-body { padding-top: env(safe-area-inset-top, 0px); }

/* ── „Przymierz u siebie" w pełnoekranowym podglądzie drzwi (Kamil 17.10.2026) ──
   Osobny wiersz POD zdjęciem: lightbox dostaje większy dolny odstęp, więc obraz (max-height: 100%) kończy się nad
   przyciskiem i nic na niego nie nachodzi. Podpowiedź „Dotknij zdjęcia, aby wrócić" zostaje pod przyciskiem. */
.cfg-lightbox.kpw-lb-z-przymierz { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
.kpw-lb-przymierz { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    width: min(420px, calc(100% - 32px)); min-height: 52px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid #d8b36a; border-radius: 14px; background: linear-gradient(135deg, #f3d48a, #d9a94e); color: #2a1a0c;
    font: 800 1rem/1.2 Inter, system-ui, sans-serif; box-shadow: 0 4px 14px rgba(150,100,30,.32); cursor: pointer; touch-action: manipulation; }
.kpw-lb-przymierz[hidden] { display: none; }
.kpw-lb-przymierz:focus-visible { outline: 3px solid #8a5a2b; outline-offset: 2px; }

/* Arkusz „Twoje drzwi teraz": uchwyt (przesuń w dół, aby zamknąć) */
.kpw-teraz-gora { position: relative; padding-top: 16px; }
.kpw-teraz-gora::before { content: ""; position: absolute; top: 6px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: #d9d2c8; }
.kpw-teraz { touch-action: pan-y; }
.kpw-teraz-gora h2 { font: 700 18px/1.3 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; color: #2a1a0c; }
.kpw-teraz-lista li:nth-child(2) { grid-column: 1 / -1; }   /* „Kolor: nazwa · kod" na całą szerokość */

/* ══════════════════════════════════════════════════════════════════════
   PRZEGLĄD STYLU 18.10.2026 (Y:\Claude Dane\przeglad_stylu_2026-10-18\PLAN_STYLU.md), kontrakt w PROSBY_POWLOKA.md.
   Kamil: „bardzo mi się podoba styl Apple”. Porządek i czytelność: ciepłe barwy, tekst ciemniejszy (nie jaśniejszy),
   nagłówki zwykłą pisownią, min. 13 px, grubości 400/600 (700 cena), zaokrąglenia 8/12/pełne.
   ══════════════════════════════════════════════════════════════════════ */
/* ── Zmiana 9: tokeny i barwy ── */
:root { --kpw-tekst: #2b211c; --kpw-tekst-pom: #6b5e55; --kpw-obrys: #a08a76; --kpw-tlo: #faf8f5;
        --kpw-braz: var(--kp-brown, #552d1c); --kpw-r-pole: 8px; --kpw-r-karta: 12px; }
body.kp-body { background: var(--kpw-tlo); color: var(--kpw-tekst); }
.cfg-step-title { color: var(--kpw-tekst); }
.cfg-step-lead { font-size: 15px; color: var(--kpw-tekst-pom); }
.cfg-sekcja-tytul, .cfg-sub { font-size: 17px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--kpw-tekst); }
.cfg-sub::before { display: none; }
.cfg-sekcja-opis { font-size: 13px; font-weight: 400; color: var(--kpw-tekst-pom); }
.cfg-stage-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--kpw-tekst-pom); }
.cfg-price-label { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--kpw-tekst-pom); }
.cfg-live-badge { letter-spacing: 0; text-transform: none; font-size: 12px; }
.kpw-teraz-cena-wiersz { font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--kpw-tekst-pom); }
.cfg-cta { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; }
.cfg-btn-back, .cfg-btn-back:hover { color: var(--kpw-braz); }
.cfg-nav-count { color: var(--kpw-tekst); }
.cfg-tile, .cfg-swatch { border-color: var(--kpw-obrys); }
.cfg-tile { border-width: 1.5px; }
#cfg-model-search, .cfg-select { border-color: var(--kpw-obrys); color: var(--kpw-tekst); }
.cfg-model-name { color: var(--kpw-tekst); }
.cfg-btn-back { background: #f3ede6; }
@media (max-width: 700px) { .cfg-nav .cfg-btn-back { background: transparent; } }

/* ── Zmiana 3: każdy wybór jako przycisk z polem wyboru i ✓ (wzór Kamila 24.09; paski segmentowe odrzucone) ──
   Dotyczy .cfg-fchip (.is-active) i .cfg-seg button (.is-active) we wszystkich krokach. Kroki nie stylują stanu wybranego. */
.cfg-seg { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.cfg-fchip, .cfg-seg button {
    position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px 8px 12px;
    background: #fff; border: 1.5px solid var(--kpw-obrys); border-radius: var(--kpw-r-pole); box-shadow: 0 1px 2px rgba(43,33,28,.06);
    color: var(--kpw-tekst); font-size: 15px; font-weight: 600; line-height: 1.25; text-align: left; letter-spacing: 0; text-transform: none; transform: none; }
.cfg-fchip::before, .cfg-seg button::before {
    content: ''; flex: 0 0 20px; width: 20px; height: 20px; box-sizing: border-box; border: 1.5px solid var(--kpw-obrys); border-radius: 6px; background: #fff;
    display: inline-flex; align-items: center; justify-content: center; font: 900 11px/1 "Font Awesome 6 Free"; color: var(--kpw-braz); }
.cfg-fchip.is-active, .cfg-seg button.is-active { background: var(--kpw-braz); border-color: var(--kpw-braz); color: #fff; box-shadow: none; }
.cfg-fchip.is-active::before, .cfg-seg button.is-active::before { content: '\f00c'; border-color: #fff; }
.cfg-fchip.kpw-bez-pola::before, .cfg-seg button.kpw-bez-pola::before { display: none; }
.cfg-fchip small, .cfg-seg button small { font-size: 13px; font-weight: 400; }
.kpw-doplata { display: block; font-size: 13px; font-weight: 400; margin-top: 2px; opacity: .9; }
.cfg-fchip:has(.kpw-doplata), .cfg-seg button:has(.kpw-doplata) { min-height: 56px; }
@media (hover: hover) and (pointer: fine) {
    .cfg-fchip:not(.is-active):hover, .cfg-seg button:not(.is-active):hover { border-color: var(--kpw-braz); background: #fffcf8; color: var(--kpw-tekst); }
}
.cfg-fchip:focus-visible, .cfg-seg button:focus-visible { outline: 3px solid var(--kp-gold, #c49060); outline-offset: 2px; }
.kpw-opcje { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
@media (min-width: 981px) { .kpw-opcje { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } }
.kpw-opcje > .cfg-fchip, .kpw-opcje > button { width: 100%; }
.kpw-opcje-tytul { display: block; margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--kpw-tekst); }
.kpw-opcje-podpowiedz { display: block; margin: -4px 0 8px; font-size: 13px; color: var(--kpw-tekst-pom); }
/* Kafle i próbki: ramka 2 px w brązie i ciemne kółko z białym ✓ w rogu (jak kafle modeli) */
.cfg-tile.is-selected { border-color: var(--kpw-braz); border-width: 2px; box-shadow: none; background: #fff; }
.cfg-tile.is-selected::after { top: 6px; right: 6px; width: 20px; height: 20px; background: var(--kpw-braz); color: #fff; font-size: 10px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.cfg-swatch.is-selected { border-color: var(--kpw-braz); border-width: 2px; box-shadow: none; }
.cfg-swatch.is-selected .cfg-swatch-dot::after { display: none; }
.cfg-swatch.is-selected::after { content: '\f00c'; font: 900 10px/1 "Font Awesome 6 Free"; position: absolute; top: 5px; right: 5px; z-index: 2;
    width: 20px; height: 20px; border-radius: 50%; background: var(--kpw-braz); color: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px #fff; }
/* Stepper: ukończony krok zawsze z ✓ (także telefon) */
.cfg-step-dot.done .n { font-size: 0; }
.cfg-step-dot.done .n::after { content: '\f00c'; font: 900 11px/1 "Font Awesome 6 Free"; color: var(--kpw-braz); }

/* ── Zmiana 10: pominięty krok czytelny słowami („bez szyby"), nie tylko bladą kropką ── */
.cfg-step-dot.is-skipped { opacity: .75; }
.cfg-step-dot.is-skipped .n { color: var(--kpw-tekst-pom); }
.cfg-step-dot.is-skipped .lbl, .cfg-step-dot.is-skipped .cfg-step-mobile { color: var(--kpw-tekst-pom); font-weight: 400; }
@media (max-width: 700px) { .cfg-step-mobile { white-space: nowrap; letter-spacing: -.01em; } }

/* ── Zmiana 2: dolny pasek telefonu: cena po prawej, miniatura drzwi w „Podgląd" ── */
.kpw-nav-cena { display: none; }
@media (max-width: 700px) {
    .cfg-nav .cfg-nav-count { grid-column: 1 / 3; text-align: left; padding-left: 4px; font-size: 13px; font-weight: 600; }
    .cfg-nav .kpw-nav-cena:not(:empty) { display: block; grid-column: 3; grid-row: 1; text-align: right; padding-right: 4px;
        font-size: 15px; font-weight: 700; color: var(--kpw-tekst); line-height: 1.3; white-space: nowrap; }
    .cfg-nav.kpw-mig { animation: kpwMig .6s ease-out; }
    .cfg-preview-shortcut .kpw-skrot-min { width: 24px; height: 48px; margin: -8px 0; object-fit: contain; transition: opacity .2s ease; }
    .cfg-preview-shortcut.kpw-ma-min > i { display: none; }
}
.cfg-preview-shortcut .kpw-skrot-min:not([src]) { display: none; }
@keyframes kpwMig { 0% { background-color: #f3e3c8; } 100% { background-color: #fffdf9; } }
@media (prefers-reduced-motion: reduce) { .cfg-nav.kpw-mig { animation: none; } .cfg-preview-shortcut .kpw-skrot-min { transition: none; } }
.cfg-preview-shortcut .kpw-skrot-min { width: 24px; height: 48px; margin: -8px 0; object-fit: contain; transition: opacity .2s ease; }
.cfg-preview-shortcut.kpw-ma-min > i { display: none; }

/* ── Zmiana 4: cena bez niespodzianek ── */
.cfg-price-label .fa-chevron-down { display: none; }
.kpw-cena-dopisek:empty, .kpw-cena-zmiana:not(.is-widoczna) { display: none; }
.kpw-cena-dopisek { margin-top: 2px; text-align: right; font-size: 13px; color: var(--kpw-tekst-pom); }
.kpw-cena-zmiana { margin-top: 4px; padding: 6px 10px; border-radius: var(--kpw-r-pole); background: #f6eee3; font-size: 13px; line-height: 1.4; color: var(--kpw-tekst); }
.kpw-cena-link { display: inline-block; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; color: var(--kpw-braz);
    font: 600 13px/44px Inter, system-ui, -apple-system, sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cfg-price[data-state="czeka"] .kpw-cena-link, .cfg-price[data-state="blad"] .kpw-cena-link { visibility: hidden; }

/* ── Zmiana 6: jeden wypełniony przycisk na ekranie. W krokach 1-4 „Zobacz wycenę i wyślij zapytanie” obramowany, od 5 pełny ── */
body.kp-body .cfg-summary .cfg-cta.kpw-cta-obrys { background: #fff; color: var(--kpw-braz); border: 1.5px solid var(--kpw-braz);
    box-shadow: none; min-height: 48px; font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; }
body.kp-body .cfg-summary .cfg-cta.kpw-cta-obrys i { color: inherit; }
@media (hover: hover) and (pointer: fine) { body.kp-body .cfg-summary .cfg-cta.kpw-cta-obrys:hover { background: #fbf5ee; transform: none; } }

/* ── Zmiana 7: niższa zwinięta karta telefonu z miniaturą drzwi (próba, Kamil ocenia na iPhonie) ──
   Lewo: miniatura 52×104 (stuknięcie = pełny podgląd). Prawo: nazwa i „Rozwiń”, „Kolor: …”, cena 22 px
   ze złotym „Przymierz u siebie” (na wąskim ekranie przycisk schodzi pod cenę), link „Z czego składa się cena”. */
.kpw-karta-min { display: none; }
@media (max-width: 700px) {
    body.kp-body.cfg-zwiniete .cfg-stage-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; row-gap: 0;
        align-items: start; padding: 10px 12px 6px; }
    body.kp-body.cfg-zwiniete .kpw-karta-min[src] { display: block; grid-column: 1; grid-row: 1 / span 3; width: 52px; height: 104px;
        object-fit: contain; align-self: center; transition: opacity .2s ease; cursor: pointer; }
    body.kp-body.cfg-zwiniete .cfg-stage-top, body.kp-body.cfg-zwiniete .cfg-stage-selection,
    body.kp-body.cfg-zwiniete .cfg-summary { grid-column: 2; }
    body.kp-body.cfg-zwiniete .kpw-karta-min:not([src]) ~ .cfg-stage-top,
    body.kp-body.cfg-zwiniete .kpw-karta-min:not([src]) ~ .cfg-stage-selection,
    body.kp-body.cfg-zwiniete .kpw-karta-min:not([src]) ~ .cfg-summary { grid-column: 1 / -1; }
    body.kp-body.cfg-zwiniete .cfg-stage-top { padding: 0; border: 0; min-height: 0; align-items: center; }
    body.kp-body.cfg-zwiniete .cfg-stage-model { font-size: 17px; font-weight: 600; color: var(--kpw-tekst); }
    body.kp-body.cfg-zwiniete .cfg-zwin { min-height: 44px; margin: -6px -4px -6px 0; }
    body.kp-body.cfg-zwiniete .cfg-stage-selection { display: block; padding: 0 0 4px; border: 0; font-size: 15px; line-height: 1.3; color: var(--kpw-tekst); }
    body.kp-body.cfg-zwiniete .cfg-stage { display: none; }
    body.kp-body.cfg-zwiniete .cfg-summary { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 4px; padding: 0; border: 0; }
    body.kp-body.cfg-zwiniete .cfg-price:not([hidden]) { display: contents; }
    body.kp-body.cfg-zwiniete .cfg-price-row { order: 1; flex: 1 1 auto; min-height: 44px; padding: 0; justify-content: flex-start; }
    body.kp-body.cfg-zwiniete .cfg-price-label { display: none; }
    body.kp-body.cfg-zwiniete .cfg-price-value { font-size: 22px; font-weight: 700; }
    body.kp-body.cfg-zwiniete .cfg-price-value .od { font-size: 13px; font-weight: 400; }
    body.kp-body.cfg-zwiniete .cfg-summary .kpw-przymierz-mini { order: 2; flex: 0 0 auto; min-height: 44px; padding: .5rem .75rem; font-size: 14px; }
    body.kp-body.cfg-zwiniete .kpw-cena-link { order: 3; flex: 0 0 auto; min-height: 32px; line-height: 32px; }
    body.kp-body.cfg-zwiniete .kpw-cena-dopisek { order: 4; margin: 0; flex: 1 1 auto; text-align: left; line-height: 32px; }
    body.kp-body.cfg-zwiniete .kpw-cena-zmiana { order: 5; flex: 1 1 100%; margin: 0; }
    body.kp-body.cfg-zwiniete .cfg-price-details:not([hidden]) { order: 6; flex: 1 1 100%; margin: 0; }
}
@media (max-width: 700px) {
    body.kp-body.cfg-zwiniete .cfg-summary { column-gap: 6px; row-gap: 2px; }
    body.kp-body.cfg-zwiniete .cfg-price-row { flex: 0 1 auto; width: auto; }
    body.kp-body.cfg-zwiniete .cfg-summary .kpw-przymierz-mini { font-size: 13px; padding: .5rem .625rem; gap: .35rem; }
    body.kp-body.cfg-zwiniete .kpw-cena-dopisek { flex: 0 1 auto; }
}
@media (max-width: 700px) {
    body.kp-body.cfg-zwiniete .cfg-summary { column-gap: 4px; }
    body.kp-body.cfg-zwiniete .cfg-summary .kpw-przymierz-mini { padding: .5rem .5rem; gap: .3rem; margin-left: auto; }
    body.kp-body.cfg-zwiniete .kpw-cena-dopisek { letter-spacing: -.01em; }
}
@media (max-width: 389px) {
    body.kp-body.cfg-zwiniete .kpw-cena-dopisek { order: 1; line-height: 1.3; align-self: center; }
    body.kp-body.cfg-zwiniete .cfg-summary .kpw-przymierz-mini { flex: 1 1 100%; margin-left: 0; justify-content: center; }
}

/* ── Runda 8 (kontrola agentem 18.10): ✓ ukończonego kroku na pełnym brązowym kółku, pominięty krok bez wyblaknięcia ── */
.cfg-step-dot.done .n { background: var(--kpw-braz); border-color: var(--kpw-braz); }
.cfg-step-dot.done .n::after { color: #fff; }
.cfg-step-dot.is-skipped { opacity: 1; }
.cfg-step-dot.is-skipped .n { border-color: var(--kpw-obrys); background: transparent; }

/* ── Kontrakt stylu (prośba sesji kroków 18.10): tekst opcji i dopłata jednym blokiem, dopłata w drugiej linii ──
   <button class="cfg-fchip"><span class="kpw-opcja-tekst">Felc dębowy<small class="kpw-doplata">+10%</small></span></button> */
.kpw-opcja-tekst { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; text-align: left; }
.kpw-opcja-tekst > small, .kpw-opcja-tekst > .kpw-doplata { margin: 2px 0 0; padding-left: 0; text-align: left; }
.is-active > .kpw-opcja-tekst > .kpw-doplata { opacity: .95; }

/* ── Runda 10: telefon, „Podsumowanie” pod kółkiem 6 bez dotykania krawędzi (szersza ostatnia kolumna),
   etykiety nieodwiedzonych kroków ciemniejsze (#6b5e55 zamiast jasnego brązu) ── */
@media (max-width: 700px) {
    .cfg-steps { grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.4fr); }
    .cfg-step-dot:not(.active):not(.done) .cfg-step-mobile { color: var(--kpw-tekst-pom); }
}
/* Pominięty krok, który minęliśmy (is-skipped + done): numer jak przed nim, bez ✓ i bez pustego kółka */
.cfg-step-dot.is-skipped.done .n { font-size: 12px; background: transparent; border-color: var(--kpw-obrys); color: var(--kpw-tekst-pom); }
.cfg-step-dot.is-skipped.done .n::after { content: none; }

/* ── Podpis kafla modelu (Kamil 18.10.2026: ujednolicić z zewnętrznymi): „Kolor: …” w jednej linii,
   jeden kolor i wielkość dla wszystkich kafli (także kolorów spoza palety) ── */
#cfg-model-grid .cfg-model-kolor, #cfg-model-grid .cfg-model-kolor.is-spoza { font-size: 10.5px; font-weight: 500; color: var(--kpw-tekst-pom);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 0; line-height: 1.4; letter-spacing: -.01em; }

/* ── Pasek filtrów kroku Model na komputerze (Kamil 18.10.2026: „nie podoba mi się to na komputerze”) ──
   Pod wyszukiwarką jeden spokojny pasek: „Rodzaj:” [Ramiakowe] [Płytowe] · „Szyba:” [Ze szkleniem] [Bez szklenia] ·
   [Nowości] · [Kolekcja] · po prawej „Na liście: N modeli”. Przyciski 40 px z polem wyboru i ✓ (zasada 24.09),
   dopiski „(z ramkami)” w podpowiedzi przycisku. Pod spodem lżejsze podpowiedzi opisu w jednej linii (przewijanej w bok).
   Telefon (do 700 px) bez zmian: zwijane „Filtry i pomysły”. */
@media (min-width: 701px) {
    .cfg-toolbar { column-gap: 20px; row-gap: 10px; }
    .cfg-toolbar > .cfg-search-wrap { flex: 0 1 520px; max-width: 520px; }
    .cfg-toolbar .cfg-seg, .cfg-toolbar .cfg-select { flex: 0 0 auto; }
    /* <details> nie przepuszcza display:contents do dzieci (slot jest blokiem), więc pasek układa sam .cfg-filter-options */
    .cfg-toolbar > .cfg-model-filters { display: block; flex: 1 1 100%; min-width: 0; }
    .cfg-toolbar .cfg-filter-options { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; row-gap: 10px; }
    .cfg-toolbar .cfg-seg { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 6px; width: auto; }
    .cfg-toolbar .cfg-seg[data-group="rodzaj"]::before { content: 'Rodzaj:'; }
    .cfg-toolbar .cfg-seg[data-group="szklenie"]::before { content: 'Szyba:'; }
    .cfg-toolbar .cfg-seg[data-group]::before { margin-right: 2px; font-size: 14px; font-weight: 600; color: var(--kpw-tekst-pom); white-space: nowrap; }
    .cfg-toolbar .cfg-seg button { min-height: 40px; padding: 6px 12px 6px 10px; gap: 8px; font-size: 14px; flex: 0 0 auto; white-space: nowrap; }
    .cfg-toolbar .cfg-seg button::before { flex-basis: 18px; width: 18px; height: 18px; border-radius: 5px; font-size: 10px; }
    .cfg-toolbar .cfg-seg button small { display: none; }   /* „(z ramkami)”, „(gładkie)”: w podpowiedzi przycisku (title) */
    .cfg-toolbar .cfg-seg button i { font-size: 12px !important; }
    .cfg-toolbar .cfg-select { height: 40px; min-height: 40px; font-size: 14px; border-radius: var(--kpw-r-pole); }
    .cfg-toolbar > .kp-filtr-licznik { flex: 0 0 calc(100% - 540px); text-align: right; font-size: 13px; font-weight: 600; color: var(--kpw-tekst-pom); white-space: nowrap; }
    .cfg-toolbar .cfg-opis-hint { flex: 1 1 100%; min-width: 0; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 2px; scrollbar-width: thin;
        font-size: 13px; color: var(--kpw-tekst-pom); }
    .cfg-toolbar .cfg-opis-hint span { flex: 0 0 auto; white-space: nowrap; }
    .cfg-toolbar .cfg-opis-hint button { flex: 0 0 auto; white-space: nowrap; min-height: 30px; padding: 4px 11px; font-size: 13px;
        border: 1px solid #eadfce; background: transparent; color: var(--kpw-tekst-pom); }
    .cfg-toolbar .cfg-opis-hint button:hover { border-color: var(--kpw-obrys); color: var(--kpw-tekst); background: #fffcf8; }
}
@media (max-width: 700px) { .kp-filtr-licznik { display: none; } }
/* Na komputerze licznik stoi w pasku filtrów; wiersz „Na liście” nad siatką zostaje dla telefonu */
@media (min-width: 701px) { .k1-status { display: none !important; } }

/* ── Blok ceny w rozwiniętej karcie jako jeden wiersz (Kamil 18.10.2026: „i tutaj też popraw”) ──
   Lewo: „Cena netto (bez VAT)”, pod nim „Z czego składa się cena ›” (ten sam lewy margines, mniejszy, w kolorze akcentu).
   Prawo: „od 7 043 zł” wyrównane do dołu tych dwóch linijek. Miejsce na link jest zarezerwowane w wierszu (nic nie
   nachodzi na przycisk), potem 14 px odstępu. Rozbicie ceny rozwija się pod wierszem. Zwinięta karta telefonu bez zmian. */
body:not(.cfg-zwiniete) #cfg-price { position: relative; margin-bottom: 14px; }
body:not(.cfg-zwiniete) #cfg-price .cfg-price-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 30px; row-gap: 0;
    column-gap: 12px; align-items: end; padding: 10px 0 8px; min-height: 0; align-content: start; }
body:not(.cfg-zwiniete) #cfg-price .cfg-price-label { grid-column: 1; grid-row: 1; align-self: start; line-height: 16px; }
body:not(.cfg-zwiniete) #cfg-price .cfg-price-value { grid-column: 2; grid-row: 1 / span 2; align-self: end; line-height: 1; white-space: nowrap; }
body:not(.cfg-zwiniete) #cfg-price > .kpw-cena-link { position: absolute; left: 0; top: 44px; min-height: 0; padding: 0; line-height: 22px;
    font-size: 13px; font-weight: 600; color: var(--kpw-braz); text-decoration: none; }
body:not(.cfg-zwiniete) #cfg-price > .kpw-cena-link::after { content: ' ›'; }
@media (hover: hover) and (pointer: fine) { body:not(.cfg-zwiniete) #cfg-price > .kpw-cena-link:hover { text-decoration: underline; text-underline-offset: 3px; } }
body:not(.cfg-zwiniete) #cfg-price .kpw-cena-dopisek { margin-top: -4px; }
body:not(.cfg-zwiniete) #cfg-price .cfg-price-details:not([hidden]) { margin-top: 6px; }

/* Arkusz „Twoje drzwi teraz”: własne przewijanie treści, nic nie przecieka na stronę (tło blokuje static/kp_blokada_tla.js, 19.10.2026) */
.kpw-teraz-tresc { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* ══════════════════════════════════════════════════════════════════════
   PREMIUM 30.10.2026 (Kamil ze zrzutu iPhone'a: „za dużo tekstu… nie wygląda premium”, wzór: sklep Apple).
   1:1 z zewnętrznych (zewnetrzne/konfigurator.php, blok PREMIUM): nagłówek kroku „Model. Wybierz swój ulubiony.”,
   zwinięta karta telefonu biała i krótka (miniatura, nazwa, kolor, cena netto, mały „Przymierz”), rozwinięta karta biała,
   przełączniki jak w iOS, podsumowanie wyboru szarym tekstem. „html” w selektorach: foto_kamera.css ładuje się później.
   Cena w wewnętrznych nadal narasta z krokami, więc dopisek „bez klamki i zamka” zostaje (osobna linia).
   Powrót: usunąć ten blok (kopie *.bak_premium_2026-10-30 w C:\kopie_bak_plan_resp).
   ══════════════════════════════════════════════════════════════════════ */
.cfg-step-title { font-family: inherit; font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em;
    color: var(--kpw-tekst); margin: 0 0 18px; text-wrap: balance; }
.cfg-step-title .kpw-tytul-pom { color: #8a7d73; }
.cfg-step-panel > .cfg-step-lead { display: none; }
.cfg-step-panel > .cfg-step-title + .cfg-step-lead#k4-lead { display: block; margin: -14px 0 18px; font-size: 26px; font-weight: 700;
    line-height: 1.2; letter-spacing: -.02em; color: #8a7d73; }
.cfg-step-panel > .cfg-step-title + .cfg-step-lead#k4-lead[hidden] { display: none; }
html body.kp-body .cfg-stage-card:not(.is-noc) .cfg-stage-eyebrow, html body.kp-body .cfg-stage-card .cfg-live-badge,
html body.kp-body .cfg-stage-card .cfg-chip-model { display: none; }
html body.kp-body .cfg-stage-card:not(.is-noc) .cfg-stage-model { font-family: inherit; }
body.kp-body:not(.cfg-zwiniete) .cfg-stage-card:not(.is-noc) { background: #fff; border: 0; border-radius: 20px;
    box-shadow: 0 0 0 1px rgba(43,33,28,.07), 0 1px 3px rgba(43,33,28,.05); }
body.kp-body:not(.cfg-zwiniete) .cfg-stage-card:not(.is-noc) .cfg-stage-top { border-bottom: 0; }
body.kp-body:not(.cfg-zwiniete) .cfg-stage-card:not(.is-noc) .cfg-stage-model { font-size: 20px; font-weight: 700; letter-spacing: -.015em;
    text-transform: none; color: var(--kpw-tekst); }
body.kp-body:not(.cfg-zwiniete) .cfg-stage-card:not(.is-noc) .cfg-zwin { color: var(--kpw-tekst-pom); font-weight: 500; }
html body.kp-body .cfg-stage-card:not(.is-noc) .cfg-preview-tools { background: #f2ede7; border: 0; border-radius: 12px; padding: 3px; gap: 3px; }
html body.kp-body .cfg-stage-card:not(.is-noc) .cfg-widok-seg button { background: transparent; color: var(--kpw-tekst); font-weight: 500;
    border-radius: 9px; box-shadow: none; }
html body.kp-body #cfg-stage-card:not(.is-noc) #cfg-widok-seg button.is-active, html body.kp-body #cfg-stage-card:not(.is-noc) #cfg-pora-seg button.is-active,
html body.kp-body .cfg-stage-card:not(.is-noc) .cfg-widok-seg button.is-active:hover:not(:disabled) { background: #fff; color: var(--kpw-tekst);
    font-weight: 600; border-color: transparent; box-shadow: 0 1px 3px rgba(43,33,28,.14), 0 0 0 .5px rgba(43,33,28,.06); }
html body.kp-body .cfg-stage-card:not(.is-noc) .cfg-widok-seg button.is-active i { color: #a57a32; }
html body.kp-body:not(.cfg-zwiniete) .cfg-stage-card:not(.is-noc) .cfg-chips { gap: 0; row-gap: 2px; }
html body.kp-body:not(.cfg-zwiniete) .cfg-stage-card:not(.is-noc) .cfg-chip { background: none; border: 0; box-shadow: none; padding: 0;
    border-radius: 0; font-size: 13px; font-weight: 400; color: var(--kpw-tekst-pom); }
html body.kp-body:not(.cfg-zwiniete) .cfg-stage-card:not(.is-noc) .cfg-chip i { display: none; }
html body.kp-body:not(.cfg-zwiniete) .cfg-stage-card:not(.is-noc) .cfg-chip + .cfg-chip::before { content: '·'; margin: 0 7px; color: #b9ada3; }
html body.kp-body:not(.cfg-zwiniete) .cfg-stage-card:not(.is-noc) .cfg-chip-model + .cfg-chip::before { content: none; }
html body.kp-body:not(.cfg-zwiniete) .cfg-stage-card:not(.is-noc) .cfg-chip .cfg-chip-sw { margin-right: 6px; }
@media (max-width: 980px) {
    html body.kp-body .cfg-summary .cfg-foto-btn { background: #ecd7a6; color: #2a1a0c; border: 0; font-weight: 600; box-shadow: none; }
    html body.kp-body .cfg-summary .cfg-foto-btn i { color: #6b4a1c; }
    html body .kpw-przymierz-scena { background: #ecd7a6; color: #2a1a0c; box-shadow: none; font-weight: 600; font-size: 15px; min-height: 48px; }
}
@media (max-width: 700px) {
    .cfg-step-title { font-size: 22px; margin-bottom: 14px; }
    .cfg-step-panel > .cfg-step-title + .cfg-step-lead#k4-lead { font-size: 22px; margin: -12px 0 14px; }
    body.kp-body.cfg-zwiniete .cfg-stage-card { background: #fff; border: 0; border-radius: 16px;
        box-shadow: 0 0 0 1px rgba(43,33,28,.07), 0 1px 3px rgba(43,33,28,.05); grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 14px; padding: 12px 12px 10px 14px; }
    body.kp-body.cfg-zwiniete .kpw-karta-min[src] { width: 44px; height: 88px; }
    body.kp-body.cfg-zwiniete .cfg-stage-model { font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
    body.kp-body.cfg-zwiniete .cfg-zwin { color: var(--kpw-tekst-pom); font-size: 13px; font-weight: 500; }
    body.kp-body.cfg-zwiniete .cfg-stage-selection { font-size: 14px; line-height: 1.3; color: var(--kpw-tekst-pom); padding: 0; }
    body.kp-body.cfg-zwiniete .cfg-summary { column-gap: 6px; row-gap: 0; margin-top: 2px; flex-wrap: wrap; align-items: baseline; }
    body.kp-body.cfg-zwiniete .cfg-price-row { min-height: 44px; align-items: baseline; }
    body.kp-body.cfg-zwiniete .cfg-price-value { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
    body.kp-body.cfg-zwiniete .cfg-price-value::after { content: ' netto'; font-size: 13px; font-weight: 400; color: var(--kpw-tekst-pom); letter-spacing: 0; }
    body.kp-body.cfg-zwiniete .cfg-price-value .od { font-size: 13px; font-weight: 400; color: var(--kpw-tekst-pom); margin-right: 3px; }
    body.kp-body.cfg-zwiniete .kpw-cena-link { display: none; }
    body.kp-body.cfg-zwiniete .kpw-cena-dopisek { order: 5; flex: 1 1 100%; margin: -6px 0 0; text-align: left; line-height: 1.3; font-size: 13px;
        color: var(--kpw-tekst-pom); }
    html body.kp-body.cfg-zwiniete .cfg-summary .cfg-foto-btn, html body.kp-body.cfg-zwiniete .cfg-summary .kpw-przymierz-mini { order: 2; flex: 0 0 auto;
        align-self: center; margin: 0 0 0 auto; min-height: 36px; height: 36px; padding: 0 14px; border-radius: 18px; background: #f3ece2;
        color: var(--kpw-tekst); font: 600 13px/1 Inter, system-ui, -apple-system, sans-serif; gap: 6px; position: relative; box-shadow: none; }
    html body.kp-body.cfg-zwiniete .cfg-summary .cfg-foto-btn::after, html body.kp-body.cfg-zwiniete .cfg-summary .kpw-przymierz-mini::after {
        content: ''; position: absolute; inset: -4px -2px; }   /* cel dotyku 44 px */
    html body.kp-body.cfg-zwiniete .cfg-summary .cfg-foto-btn i, html body.kp-body.cfg-zwiniete .cfg-summary .kpw-przymierz-mini i { color: #a57a32; font-size: 14px; }
    body.kp-body.cfg-zwiniete .kpw-cena-zmiana, body.kp-body.cfg-zwiniete .cfg-price-details:not([hidden]) { order: 6; flex: 1 1 100%; }
}
/* PREMIUM 30.10.2026, po kontroli Apple: „Przymierz” wyraźny, ciemniejsze „cm” i podpowiedzi, „Zacznij od nowa” w kolorze marki */
@media (max-width: 700px) {
    html body.kp-body.cfg-zwiniete .cfg-summary .cfg-foto-btn, html body.kp-body.cfg-zwiniete .cfg-summary .kpw-przymierz-mini {
        background: #f3e6c4; border: 1px solid #c9a45c; color: #54301c; }
    html body.kp-body.cfg-zwiniete .cfg-summary .cfg-foto-btn i, html body.kp-body.cfg-zwiniete .cfg-summary .kpw-przymierz-mini i { color: #8a6424; }
}
.cfg-dim-input span { color: #6f6254; }
.cfg-wrap input::placeholder { color: #766a5c; }
.kp-header .kp-login-link { color: #6b5a4c; }
/* ══ PSYCHOLOGIA ZAKUPU 30.10.2026 (Kamil: „co jest najważniejsze, żeby klient kupił”, wolna ręka) ══
   Telefon: z rozwiniętej karty jeden krok do zapytania już od 1. ekranu. Wcześniej do formularza prowadziło tylko 6 × „Dalej”,
   a 93% wejść z reklamy kończyło na kroku Model. Ustawienia domyślne są kompletne, więc klient, któremu drzwi pasują, pyta od razu
   (mniej wysiłku na start, domyślne ustawienia). Obramowany, bo wypełniony jest „Dalej” (jeden wypełniony przycisk na ekranie).
   Pod nim „Bezpłatnie i bez zobowiązań.” (obawa przed zobowiązaniem). Powrót: usunąć ten blok i napis w #cfg-cta. */
@media (max-width: 980px) {
    html body.kp-body:not(.cfg-zwiniete) .cfg-summary .cfg-cta { display: flex; grid-column: 1 / -1; min-height: 48px; margin: 4px 0 0;
        padding: 0 16px; background: #fff; color: #54301c; border: 1.5px solid #54301c; border-radius: 12px; box-shadow: none;
        font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; transform: none; }
    html body.kp-body:not(.cfg-zwiniete) .cfg-summary .cfg-cta i { color: inherit; }
    html body.kp-body:not(.cfg-zwiniete) .cfg-summary .cfg-cta-note { display: block; grid-column: 1 / -1; margin: 0 0 4px; text-align: center;
        font-size: 13px; line-height: 1.35; color: #6f6254; }
    html body.kp-body:not(.cfg-zwiniete) .cfg-summary #cfg-akcje-row > .cfg-share { order: 1; }
    html body.kp-body:not(.cfg-zwiniete) .cfg-stage-card.is-noc .cfg-summary .cfg-cta { background: transparent; color: #f3e6c4; border-color: #c9a45c; }
    html body.kp-body:not(.cfg-zwiniete) .cfg-stage-card.is-noc .cfg-summary .cfg-cta-note { color: #b9b2a4; }
    html body.kp-body.cfg-zwiniete .cfg-summary .cfg-cta, html body.kp-body.cfg-zwiniete .cfg-summary .cfg-cta-note { display: none; }
}
/* CENA KOMPLETU 31.10.2026 (Kamil: „Tak, zrób”): karta od 1. kroku pokazuje pełną kwotę, jak podsumowanie (stage.js, etap=5).
   Dopisek „z klamką i zamkiem” tylko w rozwiniętej karcie; w zwiniętej karcie telefonu zostaje sama cena netto,
   jak w zewnętrznych. „bez klamki i zamka” (wybrano drzwi bez zamka) widać zawsze. */
@media (max-width: 700px) {
    html body.kp-body.cfg-zwiniete .kpw-cena-dopisek.is-komplet { display: none; }
}