/* ══════════════════════════════════════════════════════════════════════
   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; }