/* nx_konfigurator/konfigurator.css — SZKIELET (etap 267, KF-11): tylko układ i wymagania dostępności (W-07: cele dotyku >= 44 px,
   tekst pól 16 px, widoczny fokus). Wygląd 1:1 z DS (KonfiguratorScreen.jsx) dochodzi po przeglądzie Przemka (KF-04) w etapach KF-11.
   Tokeny wyłącznie z DS (var(--…) jak naglowek-stopka-v3.css). */
.NxKonf { font-family: var(--font-body); color: var(--text-body); }
.NxKonf [hidden] { display: none !important; }
.NxKonf__metody { display: grid; gap: 16px; }
@media (min-width: 901px) { .NxKonf__metody { grid-template-columns: 1fr 1fr; } }
.NxKonf__metoda { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-card); }
.NxKonf__tytul, .NxKonf__naglowek, .NxKonf__metodaTytul { color: var(--text-strong); margin: 0; }
.NxKonf__metodaOpis, .NxKonf__podpowiedz, .NxKonf__opis, .NxKonf__licznik, .NxKonf__pasek { margin: 0; color: var(--text-muted); }
.NxKonf__krok, .NxKonf__form, .NxKonf__wiersze { display: flex; flex-direction: column; gap: 12px; }
.NxKonf__wiersz { display: flex; flex-direction: column; gap: 4px; }
.NxKonf__etykieta { font-weight: 600; color: var(--text-strong); }
.NxKonf__pole { font-size: var(--fs-body); min-height: 44px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-card); color: var(--text-strong); box-sizing: border-box; max-width: 100%; }
.NxKonf__przycisk { min-height: 44px; min-width: 44px; padding: 10px 16px; font: inherit; font-weight: 600; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-card); color: var(--text-strong); cursor: pointer; }
/* 796 (audyt Fable P1, W-24): w konfiguratorze nie ma czarnego przycisku - akcja główna zawsze czerwona (DS Button primary), także poza stopką */
.NxKonf__przycisk--glowny { background: var(--cta-bg); border-color: transparent; color: var(--cta-text); box-shadow: var(--shadow-xs); }
.NxKonf__przycisk--glowny:hover { background: var(--cta-bg-hover); }
.NxKonf__przycisk--link { border-color: transparent; background: none; text-decoration: underline; }
.NxKonf__przycisk[disabled], .NxKonf .NxKonf__przyciski .NxKonf__przycisk[disabled] { background: var(--surface-sunken); border-color: var(--surface-sunken); color: var(--text-faint); box-shadow: none; opacity: 1; cursor: not-allowed; }   /* 796: DS P4.6 - nieaktywny zawsze szary */
.NxKonf__odpowiedzi, .NxKonf__akcje { display: flex; flex-wrap: wrap; gap: 8px; }
.NxKonf__oferty { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.NxKonf__oferta { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-card); }
.NxKonf__oferta p { margin: 0; }
.NxKonf__ofertaNazwa { font-weight: 600; color: var(--text-strong); }
.NxKonf__ofertaLuki { color: var(--text-strong); font-weight: 600; }
.NxKonf__ofertaCena { font-weight: 700; color: var(--text-strong); }
.NxKonf__bledy { padding: 12px 16px; border: 1px solid var(--red-500); border-radius: var(--radius-md); }
.NxKonf__bledy ul { margin: 4px 0 0; padding-left: 20px; }
.NxKonf__bledy a { color: var(--red-600); }
.NxKonf :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 4px var(--surface-card); }
/* etap 412 (Przemek 9.10 przez S0 12:59): nagłówek kroku dostaje fokus tylko ze skryptu (tabindex=-1, W-07: czytnik zaczyna od nagłówka) i nie jest w kolejności Tab -
   bez czarnej ramki na całą szerokość (Chrome/Safari pokazywały ją po wejściu w krok z klawiatury lub dotykiem); ramka fokusu na przyciskach i polach bez zmian */
.NxKonf :is(h1, h2, h3, h4)[tabindex="-1"]:focus, .NxKonf :is(h1, h2, h3, h4)[tabindex="-1"]:focus-visible { outline: none !important; box-shadow: none !important; }   /* !important: globalny :focus-visible w fix-v2.css ma !important */

/* ===================== KF-11a (etap 284, S1, 7.10): WYGLAD 1:1 Z PROJEKTU DS (KonfiguratorScreen.jsx po uwagach Przemka 7.10) =====================
   Rama = KonfRama (karta, kroki u gory, tresc, stopka „Krok N z 3” + przyciski), KonfKroki, KonfKartaWyboru, KonfPoleTablicy (= pole tablicy findera
   strony glownej: plyta 520:114, ramka 3 px, pasek UE PL bez listy krajow, kroj tablic 16cqw), KonfLadowanie, KonfDaneAuta, KonfAutoNaglowek (logo marki),
   KonfKomunikat, przyciski DS Button xl (48 px). Progi DS: telefon <= 640 px (useViewport 'mobile'). Kroj tablic: @font-face z finder.css (ten sam plik). */
@font-face { font-family: 'arklas_tablica_samochodowaRg'; src: url('../../grafika/home/fonts/arklatrs-webfont.woff') format('woff'), url('../../grafika/home/fonts/arklatrs-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; }
@keyframes nxKonfObrot { to { transform: rotate(360deg); } }
.NxKonf { box-sizing: border-box; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; max-width: 1040px; margin: 0 auto; font-size: var(--fs-body); line-height: 1.38; }
/* 1344 wariant B (Fable 5.1, 25.10; Przemek: „H2 w konfiguratorze nieco większy”): nagłówek kroku (H2 startu i H3 kroków w oknie) 26 → 34 px (= --fs-display-lg, jeden stopień skali DS
   pod H1 44: 44 : 34 = 1,29 = krok skali DS; 34 : 16 tekstu = 2,1), interlinia 40 px (siatka 8); telefon 22 → 26 px (= --fs-h2; H1 telefonu 34 : 26 = 1,31), interlinia 32.
   Odstępy: pasek kroków → nagłówek 24 → 32 (komputer), 20 → 24 (telefon); nagłówek → treść 12 → 20 (komputer), 12 → 16 (telefon) — bliskość Gestalt (nad nagłówkiem ok. 2,5× więcej niż pod).
   Jedna zmienna dla wszystkich nagłówków kroków — reguły l. 72, 217 i blok 811 czytają ją. */
.NxKonf { --nxk-fs-naglowek: 34px; --nxk-lh-naglowek: 1.18; --nxk-naglowek-dol: var(--space-6); --nxk-tresc-gora: var(--space-8); }
@media (max-width: 640px) { .NxKonf { --nxk-fs-naglowek: 26px; --nxk-lh-naglowek: 1.23; --nxk-naglowek-dol: var(--space-5); --nxk-tresc-gora: var(--space-7); } }
/* 1344 B2 (Przemek 25.10 09:2x: „w całym konfiguratorze”): poziomy nagłówków konfiguratora — 1: nagłówek kroku/ekranu (wyżej), 2: nagłówek stanu (ładowanie) = jeden stopień niżej,
   3: nagłówek sekcji w kroku (np. „Wybierz warsztat i preferowany termin montażu” w kroku 3) = dwa stopnie niżej; skala DS 34 → 26 → 22 (komputer), 26 → 22 → 20 (telefon).
   Nagłówek → lead (.NxKonf__opis) 16, nagłówek → blok (karty, odpowiedzi, auto) 20 (telefon 16/16). */
.NxKonf { --nxk-fs-naglowek-2: var(--fs-h2); --nxk-lh-naglowek-2: 1.23; --nxk-fs-naglowek-3: var(--fs-h3); --nxk-lh-naglowek-3: 1.27; --nxk-naglowek-lead: var(--space-5); }
@media (max-width: 640px) { .NxKonf { --nxk-fs-naglowek-2: var(--fs-h3); --nxk-lh-naglowek-2: 1.27; --nxk-fs-naglowek-3: var(--fs-section); --nxk-lh-naglowek-3: 1.3; } }
.NxKonf__tresc .NxKonf__tytul + .NxKonf__opis, .NxKonf__krok > .NxKonf__naglowek + .NxKonf__opis { margin-top: calc(var(--nxk-naglowek-lead) - var(--nxk-naglowek-dol)); }   /* 1344 B2: nagłówek → lead 16 (20 − 4); telefon 16 − 16 = 0 */
/* etap 395 (Przemek 9.10 07:16: „nie chcę ramki w ramce”): w karcie hero strony głównej konfigurator bez własnej ramki, cienia i tła - zostaje jedna ramka
   i duży cień boksu (.NxHero__karta, jak stary dobór .nx-search-wrapper w strona-glowna-v3.css); szerokość bez zmian (max-width 1040 jw.) */
.NxStronaGlowna .NxHero__karta .NxKonf { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
/* 1132 O8 (audyt DS Opus 1110 odstępy): krok 1 na głównej, komputer — kreska pod paskiem kroków wystawała 32 px poza treść z każdej strony (kreska stopki była równa z treścią);
   boczne dopełnienie paska → margines, więc kreska i pasek kroków zaczynają się w jednej linii z nagłówkiem i stopką. Tylko pasek osadzony w .NxKonf (okno ma własny w .NxKonf__oknoGora) */
@media (min-width: 641px) { .NxStronaGlowna .NxHero__karta .NxKonf > .NxKonf__etapy { margin: 0 var(--space-8); padding-left: 0; padding-right: 0; } }
/* etap 396: 641–~1000 px trzy przyciski stopki (napisy bez łamania) nie mieściły się w rzędzie i nachodziły na siebie — zawijanie do drugiego rzędu; gdy się mieszczą, wygląd bez zmian */
@media (min-width: 641px) {
  .NxKonf .NxKonf__przyciski { flex-wrap: wrap; }
  .NxKonf .NxKonf__przyciski .NxKonf__przycisk--dodatkowy { min-width: max-content; }
  .NxKonf .NxKonf__przyciski .NxKonf__przycisk--glowny { margin-left: auto; }
}
.NxKonf *, .NxKonf *::before, .NxKonf *::after { box-sizing: border-box; }
/* kroki u gory (KonfKroki) */
.NxKonf__etapy { list-style: none; margin: 0; padding: var(--space-7) var(--space-8) var(--space-5); border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 1.1fr 1.6fr 1.4fr; gap: 12px; }
.NxKonf__etap { min-width: 0; margin: 0; padding: 0; }
.NxKonf__etapPasek { display: block; height: 3px; border-radius: 2px; background: var(--border); }
.NxKonf__etapNazwa { display: block; margin-top: 8px; font-size: var(--fs-body-sm); line-height: 1.3; font-weight: 500; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.NxKonf__etap[aria-current="step"] .NxKonf__etapPasek, .NxKonf__etap.is-zrobiony .NxKonf__etapPasek { background: var(--ink); }
.NxKonf__etap[aria-current="step"] .NxKonf__etapNazwa { font-weight: 700; color: var(--text-strong); }
.NxKonf__etap.is-zrobiony .NxKonf__etapNazwa { color: var(--text-strong); }
/* tresc */
/* 1132 O16 (audyt DS Opus 1110 odstępy, skala tokens/spacing.css): pasek kroków dół 18 → 16, kreska pod paskiem → nagłówek 28 → 24 (rama okna 24 jak w O2); telefon (20, niżej) bez zmian */
.NxKonf__tresc { padding: var(--nxk-tresc-gora, var(--space-7)) var(--space-8) 8px; }   /* 1344 B: góra 24 → 32 */
/* 1132 O16: wyjątek — krok naprawy podciąga własny pasek kroków o -28 (krok-naprawa.css l. 7, liczy na dawne 28); zostaje 28, aż moduł naprawy przejdzie na 24 (dług). Telefon: tam 20 / -20, bez zmian */
@media (min-width: 641px) { .NxKonf__oknoTresc:has([data-nxkonf-krok=naprawa]) { padding-top: 28px; } }
/* 1132 O3 (rytm tekstu DS, Podstawy 1 pkt 5): nagłówek → opis 8 → 12, opis → treść 20 → 22 (jedyny wyjątek od skali, wartość z reguły DS); nadtytuły („Pytanie 1 z 4”, linijka auta) 6 → 8 niżej (l. licznik / autoLinia).
   UWAGA (S9 sprawdza regułę 540/777): na 06c 375×667 krok rośnie o ok. 6 px — cena pierwszej szyby nad przyklejonym dołem miała ok. 10 px zapasu */
.NxKonf__tresc .NxKonf__tytul, .NxKonf__krok > .NxKonf__naglowek, .NxKonf__krok:not(.NxKonf__krok--osadzony) > .NxKonf__awaria > .NxKonf__naglowek { font-family: var(--font-display); font-size: var(--nxk-fs-naglowek, var(--fs-h2)); line-height: var(--nxk-lh-naglowek, 1.18); font-weight: 700; letter-spacing: -0.01em; color: var(--text-strong); margin: 0 0 var(--nxk-naglowek-dol, var(--space-4)); outline: none; text-wrap: balance; }   /* 1344: rozmiar, interlinia i odstęp pod ze zmiennych .NxKonf (wyżej) */
.NxKonf__tresc .NxKonf__opis { font-size: var(--fs-body); line-height: 1.55; color: var(--text-muted); margin: 0 0 22px; max-width: 720px; text-wrap: pretty; }
.NxKonf__krok { gap: 0; }
/* karty wyboru metody (KonfKartaWyboru) */
.NxKonf__karty { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: var(--space-2) 0 var(--space-7); }   /* 1132 O16: dół 22 → 24 */
/* 1132 O6 + O15: jedna miara karty wyboru w całym konfiguratorze — wnętrze komputer 16 × 20 (było 18 × 20), telefon 12 × 16 (niżej; było 14); kółko ↔ napis 10 jak komponent DS Radio (było 12) */
.NxKonf__karta { display: flex; gap: 10px; align-items: flex-start; padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--border-strong, var(--border)); margin: 1px; background: var(--surface-card); cursor: pointer; min-height: 44px; }
.NxKonf__karta:has(input:checked) { border: 2px solid var(--ink); margin: 0; }
.NxKonf__karta:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
/* 1116 (audyt DS Opus K9/K10/K11/K12) K9: płaskie radio 1:1 jak .NxKonf__odp input (1074f, l. ~340): appearance none, ramka 1,5 px --grey-500, zaznaczone = ramka + kropka 10 px --ink (D7);
   accent-color zbędny przy appearance none; fokus = pierścień karty (:has wyżej) → kółko bez drugiego pierścienia (!important jak 1074f: globalny :focus-visible fix-v2 ma !important); bez :has pierścień zostaje na kółku; wysoki kontrast = natywne */
.NxKonf__karta input { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin: 2px 0 0; padding: 0; box-sizing: border-box; flex: none; border: 1.5px solid var(--grey-500, #797676); border-radius: 50%; background: var(--surface-card); cursor: inherit; }
.NxKonf__karta input:checked { border-color: var(--ink); background: radial-gradient(circle at center, var(--ink) 0 5px, transparent 5.5px) var(--surface-card); }
@supports selector(:has(input)) { .NxKonf__karta input:focus-visible { outline: none !important; box-shadow: none !important; } }
@media (forced-colors: active) { .NxKonf__karta input { -webkit-appearance: auto; appearance: auto; background: none; } }
.NxKonf__kartaTekst { min-width: 0; }
.NxKonf__kartaNazwa { display: block; font-size: var(--fs-body); font-weight: 700; color: var(--text-strong); line-height: 1.3; }   /* 1116 K12: 16 px także na komputerze (było --fs-subtitle 18 px; telefon l. ~199 już --fs-body) */
.NxKonf__kartaOpis { display: block; margin-top: 4px; font-size: var(--fs-body-sm); line-height: 1.45; color: var(--text-muted); }
/* pole tablicy (KonfPoleTablicy = finder strony glownej, zmierzone 1:1 z produkcji 7.10) */
.NxKonf__polaTablicy { max-width: 424px; }
.NxKonf__etykieta { display: block; font-size: var(--fs-ui, 14px); font-weight: 600; color: var(--text-strong); margin-bottom: var(--space-2); line-height: 1.5; }   /* 1132 O13: etykieta → pole 8 = 4 + gap 4 wiersza (było 6 + 4 = 10); etykieta tablicy na starcie jest tylko dla czytnika (NxKonf__sr) */
.NxKonf__tablica { display: flex; align-items: stretch; width: 100%; aspect-ratio: 520 / 114; container-type: inline-size; background: #FFFFFF; border-radius: 13px; overflow: hidden; border: 3px solid #14141A; transition: box-shadow 0.2s var(--ease-out), border-color 0.2s; }
.NxKonf__tablica.is-blad { border-color: var(--red-500); }
/* 791 (Przemek 15.10: „pole po kliknięciu nie powinno mieć różowej obwódki. Tylko czarna grubsza i po odstępie cieńsza jak reszta pól tekstowych”):
   fokus tablicy = pierścień DS D1 jak pola tekstowe (tokens/base.css: outline 2px --focus-ring-outer, odsunięcie 2px, biały odstęp --focus-ring-inner)
   wokół grubej czarnej ramki tablicy; także po kliknięciu (:focus), bez różowego --focus-ring */
.NxKonf__tablica:has(.NxKonf__tablicaPole:focus) { outline: 2px solid var(--focus-ring-outer); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-ring-inner, #fff); }
/* 791 R2 (przegląd R1): wysoki kontrast jak pola DS (tokens/base.css @media forced-colors): obrys w kolorze systemowym Highlight, bez cienia */
@media (forced-colors: active) { .NxKonf__tablica:has(.NxKonf__tablicaPole:focus) { outline-color: Highlight !important; box-shadow: none !important; } }
.NxKonf__tablicaPasek { height: 100%; aspect-ratio: 200 / 440; flex: 0 0 auto; display: block; background: #003399; }
.NxKonf__tablicaPasek svg { display: block; width: 100%; height: 100%; }
.NxKonf__tablicaMiejsce { position: relative; flex: 1; min-width: 0; display: flex; }
.NxKonf .NxKonf__tablicaPole { flex: 1; min-width: 0; width: 100%; min-height: 0; height: auto; border: none; outline: none; padding: 0 5.5cqw; margin: 0; background: transparent; border-radius: 0; box-shadow: none; font-family: 'arklas_tablica_samochodowaRg', 'Arial Narrow', 'Instrument Sans', sans-serif; font-size: 16cqw; font-weight: 700; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; color: #14141A; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); transition: background-color 0.2s var(--ease-out); }
.NxKonf .NxKonf__tablicaPole:focus-visible { outline: none; box-shadow: none; }
/* 1333 v3 (Przemek 25.10 09:1x: „WPISZ NUMER … na szarym tle, kolor fonta i tła jak w placeholderze wyszukiwarki, gdy nieaktywna”): puste i nieaktywne pole = tło pigułki wyszukiwarki
   (--surface-subtle, naglowek-stopka-v3.css .RamkaSzukania); po kliknięciu i z wpisanym numerem - białe jak pigułka w fokusie (--surface-card), czyli zwykła tablica */
.NxKonf .NxKonf__tablicaPole:placeholder-shown:not(:focus) { background: var(--surface-subtle); }
/* 509 → 1333 (Przemek 24.10 21:5x): placeholder „Wpisz numer” statyczny, krojem tablic i WIELKIMI literami jak wpisany numer (text-transform pola), kolor podpowiedzi sklepu (429: --text-muted, kontrast ≥ 4,5:1);
   mniejszy stopień niż numer, żeby 11 znaków zmieściło się obok paska PL (bez animacji - nakładka pisana usunięta) */
.NxKonf .NxKonf__tablicaPole::placeholder { color: var(--text-muted); opacity: 1; text-shadow: none; font-size: 11cqw; letter-spacing: 0.02em; }
/* 1333 v3 (Przemek 25.10: „WPISZ NUMER wyśrodkowane w pionie”): Chrome/Edge stawiają podpowiedź na linii bazowej wpisywanego numeru (16cqw), więc mniejszy napis (11cqw) siedział ~1,9cqw (7 px na komputerze, 6 px na telefonie) za nisko;
   Safari/WebKit centruje ją sam i ignoruje top (zmierzone 25.10 Playwright chromium + webkit). line-height/padding/vertical-align na ::placeholder nie działają, transform psuje Safari.
   Przesunięcie tylko dla silników z -webkit-tap-highlight-color (Chromium i WebKit; Firefox bez zmian - niesprawdzony, brak w Playwright) */
@supports (-webkit-tap-highlight-color: transparent) { .NxKonf .NxKonf__tablicaPole::placeholder { position: relative; top: -1.9cqw; } }
/* 1333b (Przemek 25.10 15:0x: „równe optycznie odstępy … za duża przerwa między WP i SZ … podobna animacja (wpisywania z klawiatury) … gdy klient kliknie w to pole, niech znika z niego tekst”):
   podpowiedź = nakładka z literami w osobnych elementach (mechanika pisaka 509: span aria-hidden nad polem, prawdziwy placeholder zostaje dla czytników i jest przezroczysty klasą is-pisak; bez skryptu widać zwykły placeholder).
   Krój tablic: każda litera w komórce 1308/2048 em z odsadkami 134 j., a „I” ma odsadki 557/558 → o 423 j. (0,206 em) za szeroko z każdej strony; ujemny margines wyrównuje odstępy między konturami
   (c1280: przed 7 / 16,5 / 16,5 / 7 px, po 7 px wszędzie). Spacja = odstęp z kroju (540 j. + letter-spacing) - taki sam jak w wpisanym numerze „SB 12345”. J/L/1 - ta sama poprawka na zapas, gdyby tekst podpowiedzi się zmienił */
.NxKonf__pisak { position: absolute; left: 5.5cqw; top: 0; bottom: 0; display: flex; align-items: center; pointer-events: none; font-family: 'arklas_tablica_samochodowaRg', 'Arial Narrow', 'Instrument Sans', sans-serif; font-size: 11cqw; font-weight: 700; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.NxKonf__pisak > span { display: block; visibility: hidden; }
.NxKonf__pisak > span.is-on { visibility: visible; }
.NxKonf__pisak > .NxKonf__pisakOdstep { width: 0.284em; }
.NxKonf__pisak > [data-l="I"] { margin: 0 -0.206em; }
.NxKonf__pisak > [data-l="J"] { margin: 0 -0.096em; }
.NxKonf__pisak > [data-l="L"] { margin: 0 -0.042em; }
.NxKonf__pisak > [data-l="1"] { margin: 0 -0.086em; }
/* kursor: pisze bez migania (jak prawdziwy kursor w trakcie pisania), po napisaniu mignie 3 razy i znika - bez zapętlonego migotania; „ogranicz ruch” = cały napis od razu, bez kursora */
.NxKonf__pisak i { display: block; width: 3px; height: 0.75em; background: var(--text-muted); opacity: 0.9; }
.NxKonf__pisak.is-koniec i { animation: nxKonfKursor 1.1s steps(1, end) 3 forwards; }
.NxKonf__pisak.is-cicho i { display: none; }
@keyframes nxKonfKursor { from { opacity: 0.9; } 50%, to { opacity: 0; } }
/* kliknięcie (fokus) albo wpisany numer: nakładka znika (CSS, nie skrypt - działa też przy wartości wstawionej kodem); display, nie visibility - litery is-on mają własne visibility: visible, które wygrywa z hidden rodzica.
   Prawdziwy placeholder znika w fokusie także bez skryptu */
.NxKonf__tablicaMiejsce:has(.NxKonf__tablicaPole:focus) .NxKonf__pisak, .NxKonf__tablicaMiejsce:has(.NxKonf__tablicaPole:not(:placeholder-shown)) .NxKonf__pisak { display: none; }
.NxKonf .NxKonf__tablica.is-pisak .NxKonf__tablicaPole::placeholder, .NxKonf .NxKonf__tablicaPole:focus::placeholder { color: transparent; }
@media (prefers-reduced-motion: reduce) { .NxKonf__pisak i { display: none; } }
/* 509: krok 1 - numer rejestracyjny ALBO wybór ręczny w tym samym miejscu (NxKonf--reczne ustawia radio „Wyszukiwanie ręczne”) */
.NxKonf .NxKonf__recznyStart { display: none; }
.NxKonf.NxKonf--reczne .NxKonf__recznyStart { display: block; margin: 20px 0 0; }
/* 1195 (Przemek 21.10 19:5x: „przełączając między dopasowaniem automatycznym i ręcznym zmienia się wysokość okna - ma być taka sama”): komputer (pola ręczne w jednym rzędzie, > 1100 px)
   - obszar pól ręcznych = obszar numeru rejestracyjnego (pole tablicy 93 + „zarejestrowane poza Polską” 21 + odstępy; pomiar 21.10: karta 390 vs 375 px) → karta kroku 1 bez skoku */
@media (min-width: 1101px) { .NxKonf.NxKonf--reczne .NxKonf__start .NxKonf__recznyStart { min-height: 126px; } }
/* 2264b (testy UX 2236 F2-3, odbiór 2264: section.NxOC skacze 0,106 Pixel 8 / 0,135 słaby Android tuż po „Ręcznie”): konfigurator.js wczytuje się po pierwszym
   dotknięciu, więc pola ręczne wchodzą do pustego pojemnika > 0,5 s po kliknięciu i rozpychają stronę (liczone do CLS). Pusty pojemnik trzyma wysokość gotowych pól
   (pomiar na sklepie 29.10, Chrome i Safari: ≤ 480 px 543, do 640 px 519, 641–760 px 459, 761–1100 px 285); po wstawieniu pól (:empty nie pasuje) decyduje treść.
   R2 (przegląd R1 B1): bez rezerwy przy otwartym oknie (html.NxKonf-okno) — recznyPorzuc() opróżnia wtedy pojemnik, a wysokość sekcji trzyma 2264. */
:root:not(.NxKonf-okno) .NxKonf.NxKonf--reczne .NxKonf__start .NxKonf__recznyStart:empty { min-height: 285px; }
@media (max-width: 760px) { :root:not(.NxKonf-okno) .NxKonf.NxKonf--reczne .NxKonf__start .NxKonf__recznyStart:empty { min-height: 459px; } }
@media (max-width: 640px) { :root:not(.NxKonf-okno) .NxKonf.NxKonf--reczne .NxKonf__start .NxKonf__recznyStart:empty { min-height: 519px; } }
@media (max-width: 480px) { :root:not(.NxKonf-okno) .NxKonf.NxKonf--reczne .NxKonf__start .NxKonf__recznyStart:empty { min-height: 543px; } }
@media (min-width: 1101px) { :root:not(.NxKonf-okno) .NxKonf.NxKonf--reczne .NxKonf__start .NxKonf__recznyStart:empty { min-height: 126px; } }
/* 1218 (Przemek 22.10: „Niech tablica i tekst pod nia beda jednak po lewej stronie.”): wyśrodkowanie tablicy i tekstu pod nią z 1195 cofnięte - od lewej, w linii z przełącznikiem */
.NxKonf.NxKonf--reczne .NxKonf__start .NxKonf__polaTablicy, .NxKonf.NxKonf--reczne .NxKonf__start .NxKonf__zagranica,
.NxKonf.NxKonf--reczne .NxKonf__start .NxKonf__stopka [form=NxKonfFormTablica] { display: none; }
.NxKonf .NxKonf__start .NxKonf__stopka .NxKonf__dalejStrony { display: none; }
.NxKonf.NxKonf--reczne .NxKonf__start .NxKonf__stopka .NxKonf__dalejStrony { display: inline-flex; }
.NxKonf__blad { margin: 6px 0 0; font-size: var(--fs-ui, 14px); line-height: 1.5; color: var(--danger, var(--red-600)); font-weight: 600; overflow-wrap: anywhere; }
.NxKonf__zagranica { margin: var(--space-4) 0 0; font-size: var(--fs-body-sm); line-height: 1.5; color: var(--text-muted); }
/* etap 457 (KF-18 A2): informacja o danych pod polem numeru - drobny tekst jak .NxKonf__drobny, odnośnik jak w „auto spoza Polski” */
.NxKonf__tablicaRodo { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); text-wrap: pretty; }
/* link w tekscie (KonfLink): cel dotyku 44 px bez zmiany wysokosci wiersza */
.NxKonf .NxKonf__link { display: inline-block; line-height: 20px; vertical-align: baseline; background: none; border: 0; padding: 12px 0; margin: -12px 0; min-height: 44px; min-width: 0; font: inherit; font-weight: inherit; color: var(--text-strong); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; border-radius: 0; }
/* stopka ramy: „Krok N z 3” + przyciski (KonfRama stopka + KonfPrzyciski) */
/* 1344 B: na głównej (komputer) dół karty 72 → 56 px pod przyciskami (góra karty → pasek kroków = 40): równowaga góra/dół karty; okno i telefon bez zmian */
@media (min-width: 641px) { .NxStronaGlowna .NxHero__karta .NxKonf > .NxKonf__tresc { padding-bottom: 0; } .NxStronaGlowna .NxHero__karta .NxKonf > .NxKonf__tresc > .NxKonf__start > .NxKonf__stopka { padding-bottom: 16px; } }
/* 1132 O1 (audyt DS Opus 1110 odstępy): ostatni blok treści → kreska stopki zawsze 24 na komputerze (było 20 + dolne 8 px ostatnich bloków: 21–29 zależnie od kroku); telefon 16 (niżej) bez zmian.
   Dolne 8 px zdjęte z .NxKonf__odpowiedzi i .NxKonf__pokazWszystkieWrap (niżej) */
.NxKonf__stopka { margin: var(--space-7) 0 0; padding: 16px 0 24px; border-top: 1px solid var(--border); }
.NxKonf__krokZ { margin: 0 0 var(--space-3); font-size: var(--fs-meta); color: var(--text-muted); }   /* 1132 O16: 10 → 8 */
/* 1132 O4: przycisk ↔ przycisk w rzędzie 12, między rzędami 8 (było 10/10 — spoza skali; stopka 1103 na telefonie ma własne 8 przez margin-top, wysokość bez zmian) */
.NxKonf__przyciski { display: flex; flex-direction: row; gap: var(--space-3) var(--space-4); align-items: stretch; }
.NxKonf__przyciski .NxKonf__odstep { flex: 1; }
.NxKonf .NxKonf__przyciski .NxKonf__przycisk { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 48px; min-height: 48px; padding: 0 26px; font-family: var(--font-body); font-weight: 700; font-size: var(--fs-body); line-height: 1; letter-spacing: -0.005em; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--surface-card); color: var(--text-strong); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.NxKonf .NxKonf__przyciski .NxKonf__przycisk:hover { background: var(--surface-subtle); border-color: var(--grey-400); }
.NxKonf .NxKonf__przyciski .NxKonf__przycisk--dodatkowy { flex: none; }   /* 796: szerokość = treść (DS), nie konkuruje z akcją główną */
/* 796: korekta danych („Zmień auto”, „Zmień odpowiedzi”) = DS TextButton 14/600 podkreślony, po lewej za „Wróć”; cel dotyku 44 px */
.NxKonf .NxKonf__przyciski .NxKonf__przycisk--tekst { flex: none; height: auto; min-height: 44px; min-width: 0; padding: 0 6px; border: 0; background: none; box-shadow: none; font-size: var(--fs-body-sm); font-weight: 600; color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; white-space: normal; text-align: left; line-height: 1.3; }
.NxKonf .NxKonf__przyciski .NxKonf__przycisk--tekst:hover { background: none; color: var(--red-500); }
.NxKonf .NxKonf__przyciski .NxKonf__przycisk[hidden] { display: none; }   /* 796: hidden wygrywa z display stopki (krok 3: „Dalej” / pakiet z karty) */
/* 796: suma w stopce (DS MontazKreator): etykieta 13 muted + kwota 22/700 po lewej, przyciski po prawej */
.NxKonf__suma { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.NxKonf__sumaEtykieta { font-size: var(--fs-meta); color: var(--text-muted); }
.NxKonf__sumaKwota { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.NxKonf .NxKonf__przyciski .NxKonf__przycisk--wroc { min-width: 120px; }
.NxKonf .NxKonf__przyciski .NxKonf__przycisk--glowny { min-width: 180px; background: var(--cta-bg); color: var(--cta-text); border-color: transparent; box-shadow: var(--shadow-xs); }
.NxKonf .NxKonf__przyciski .NxKonf__przycisk--glowny:hover { background: var(--cta-bg-hover); box-shadow: var(--shadow-sm); }
.NxKonf__przycisk svg { flex: none; }
/* ladowanie (KonfLadowanie) */
.NxKonf__ladowanie { text-align: center; padding: 40px 0 20px; }
.NxKonf__kolko { width: 54px; height: 54px; margin: 0 auto 18px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--red-500); animation: nxKonfObrot 0.8s linear infinite; }
.NxKonf__ladowanie .NxKonf__naglowek { font-family: var(--font-display); font-size: var(--nxk-fs-naglowek-2, var(--fs-h3)); line-height: var(--nxk-lh-naglowek-2, 1.27); font-weight: 700; color: var(--text-strong); margin: 0 0 8px; outline: none; }   /* 1344 B2: 22 → 26 (poziom 2), odstęp 6 → 8 (siatka) */
.NxKonf__ladowanie p { font-size: var(--fs-body); color: var(--text-muted); margin: 0; }
.NxKonf__ladowanie .NxKonf__dluzej { font-size: var(--fs-body-sm); margin: 12px auto 0; max-width: 460px; }
.NxKonf__ladowanie--kroki .NxKonf__naglowek { margin-bottom: 18px; }
/* 919 (D23): K64 trzy kroki zamiast kółka — tokeny DS; animacja tylko znacznika kroku bieżącego (transform/opacity); stan zawsze tekstem */
.NxKonf .NxKonf__vinKroki { list-style: none; margin: 0 auto 16px; padding: 0; max-width: 360px; text-align: left; display: flex; flex-direction: column; gap: 14px; }
.NxKonf .NxKonf__vinKrok { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; }
.NxKonf .NxKonf__vinKrokZnak { flex: none; position: relative; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); box-sizing: border-box; margin-top: 1px; }
.NxKonf .NxKonf__vinKrok[data-stan="zrobione"] .NxKonf__vinKrokZnak { background: var(--text-strong); border-color: var(--text-strong); }
.NxKonf .NxKonf__vinKrok[data-stan="zrobione"] .NxKonf__vinKrokZnak::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--surface, #fff); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.NxKonf .NxKonf__vinKrok[data-stan="trwa"] .NxKonf__vinKrokZnak { border-color: var(--red-500); }
.NxKonf .NxKonf__vinKrok[data-stan="trwa"] .NxKonf__vinKrokZnak::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--red-500); animation: nxKonfPuls 1.6s ease-in-out infinite; }
.NxKonf .NxKonf__vinKrok[data-stan="trwa"] .NxKonf__vinKrokZnak { animation: nxKonfPulsRama 1.6s ease-in-out infinite; }
.NxKonf .NxKonf__vinKrokTresc { display: flex; flex-direction: column; font-size: var(--fs-body); line-height: 1.35; }
.NxKonf .NxKonf__vinKrokNazwa { font-weight: 600; color: var(--text-strong); }
.NxKonf .NxKonf__vinKrokStan { color: var(--text-muted); font-size: var(--fs-body-sm); }
.NxKonf .NxKonf__vinKrok[data-stan="czeka"] .NxKonf__vinKrokNazwa { color: var(--text-muted); font-weight: 500; }
@keyframes nxKonfPuls { 0%, 100% { transform: scale(0.6); opacity: 0.55; } 50% { transform: scale(1); opacity: 1; } }
@keyframes nxKonfPulsRama { 0%, 100% { opacity: 1; } 50% { opacity: 0.85; } }
@media (prefers-reduced-motion: reduce) { .NxKonf .NxKonf__vinKrok[data-stan="trwa"] .NxKonf__vinKrokZnak, .NxKonf .NxKonf__vinKrok[data-stan="trwa"] .NxKonf__vinKrokZnak::after { animation: none; } }
/* komunikat (KonfKomunikat) */
.NxKonf__ramka { display: flex; gap: 12px; align-items: flex-start; padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--surface-subtle); border: 1px solid var(--border); color: var(--text-strong); margin: 0 0 16px; font-size: var(--fs-body-sm); line-height: 1.5; }
.NxKonf__ramka--uwaga { background: var(--warning-bg); border-color: var(--amber-500); }
.NxKonf__ramka--blad { background: var(--danger-bg); border-color: var(--red-500); }
.NxKonf__ramka p { margin: 0; }
.NxKonf__kontakt { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); margin: 4px 0 8px; }   /* K22 dla numeru: telefon i czat (DS KonfKontakt); 1132 O4: w rzędzie 12, między rzędami (telefon: kolumna) 8 — było 10 */
.NxKonf__kontakt .NxKonf__przycisk { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 44px; min-height: 44px; padding: 0 24px; font-family: var(--font-body); font-size: var(--fs-body-sm); font-weight: 700; line-height: 1; letter-spacing: -0.005em; border-color: var(--border-strong); white-space: nowrap; text-decoration: none; box-sizing: border-box; }   /* 298b: DS Button secondary lg (44 px, 14 px, ikona 18) */
.NxKonf__kontakt .NxKonf__ikona { flex: none; }
/* 895c (PLAN-UX pkt 1, 5): pod przyciskami ekranów płatności VIN — pomoc („Masz pytanie? Zadzwoń: …”) i „Zacznij od nowa” jako odnośniki, najmniej eksponowane;
   na telefonie jedno „Krok 2 z 3” (pasek u góry) — bez powtórzenia w stopce tych ekranów */
.NxKonf .NxKonf__pod { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin: 16px 0 0; }
.NxKonf .NxKonf__pod .NxKonf__pomoc { margin: 0; font-size: var(--fs-body-sm); }
/* 895c R1 B1: w kolumnie pod przyciskami odnośniki BEZ ujemnych marginesów (.NxKonf__link: padding 12 / margin -12 nakładał cele telefonu i restartu
   o ~20 px — dotknięcie numeru otwierało K60n); każdy cel = własne 44 px wysokości, bez nakładania */
.NxKonf .NxKonf__pod .NxKonf__link { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0; }
.NxKonf .NxKonf__pod .NxKonf__odNowa { font-size: var(--fs-body-sm); color: var(--text-muted); text-decoration: underline; cursor: pointer; }
@media (max-width: 640px) { .NxKonf [data-nxkonf-ekran="K60"] .NxKonf__krokZ, .NxKonf [data-nxkonf-ekran="K60n"] .NxKonf__krokZ, .NxKonf [data-nxkonf-ekran="K63"] .NxKonf__krokZ { display: none; } }
@media (max-width: 640px) { .NxKonf__kontakt { flex-direction: column; } }
.NxKonf__tekstPod { margin: 0 0 12px; font-size: var(--fs-body-sm); color: var(--text-muted); }
.NxKonf__tekstPod--opis { margin: 0 0 8px; font-size: var(--fs-body-sm); line-height: 1.5; }   /* K07 jak DS: 15 px / 1.5 (pomiar W-02) */
/* auto: logo marki + nazwa (KonfAutoNaglowek) i dane (KonfDaneAuta) */
.NxKonf__auto { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; }
.NxKonf__logo { width: 96px; height: 76px; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border); }
.NxKonf__logo img { display: block; width: 88px; height: 68px; object-fit: contain; }
.NxKonf__logo span { font-family: var(--font-display); font-weight: 700; color: var(--text-strong); text-align: center; line-height: 1.15; padding: 0 6px; font-size: var(--fs-body-sm); overflow-wrap: anywhere; }
.NxKonf__autoNazwa { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; color: var(--text-strong); }
.NxKonf__autoPod { font-size: var(--fs-body-sm); color: var(--text-muted); margin-top: 2px; }
.NxKonf__dane { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.NxKonf__dane > div { padding: 12px 16px; border-left: 1px solid var(--border); }
.NxKonf__dane > div:first-child { border-left: 0; }
/* 807 (Przemek 15.10): „Czy to Twoje auto?” - 3 kolumny (Numer | Generacja | Nadwozie), rok w drugim wierszu; pierwszy kafel wiersza bez lewej kreski,
   drugi wiersz z górną (podsumowanie VIN zostaje w 4 kolumnach) */
.NxKonf__dane.NxKonf__dane--auto { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }   /* 807b (Przemek P-056): tyle kolumn, ile kafli, jeden wiersz */
.NxKonf__dane > div.is-uwaga { background: var(--warning-bg); }
.NxKonf__dane dt { font-size: var(--fs-meta); color: var(--text-muted); }
.NxKonf__dane dd { margin: 0; font-size: var(--fs-body); font-weight: 700; color: var(--text-strong); }
.NxKonf__kandydaci { display: grid; gap: var(--space-4); margin: 0 0 16px; }   /* 1132 O5: karta ↔ karta 12 */
@media (max-width: 640px) {
  .NxKonf__etapy { padding: 16px 16px 14px; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .NxKonf__etapNazwa { white-space: normal; }
  .NxKonf__tresc { padding: var(--nxk-tresc-gora, 20px) 16px 8px; }   /* 1344 B: góra 20 → 24 */
  .NxKonf__tresc .NxKonf__tytul, .NxKonf__krok > .NxKonf__naglowek, .NxKonf__krok:not(.NxKonf__krok--osadzony) > .NxKonf__awaria > .NxKonf__naglowek { font-size: var(--nxk-fs-naglowek, var(--fs-h3)); }   /* 1344: telefon ze zmiennej .NxKonf */
  .NxKonf__karty { grid-template-columns: 1fr; }
  .NxKonf__karta { padding: var(--space-4) var(--space-5); }   /* 1132 O6: 12 × 16 (było 14) */
  .NxKonf__kartaNazwa { font-size: var(--fs-body); }
  .NxKonf__stopka { margin: 16px -16px 0; padding: 12px 16px 16px; position: sticky; bottom: 0; background: var(--surface-card); z-index: 2; }
  /* 1132 O7 (wariant „41 px od krawędzi”, nie od krawędzi do krawędzi — to decyzja Przemka): krok 1 na głównej zaczynał się 57 px od krawędzi ekranu (24 strona + 16 karta + 16 konfigurator),
     kroki w oknie 16 px — boczne dopełnienia paska kroków, treści i stopki startu = 0 (kolumna szersza o 32 px, odnośniki pod kreską rzadziej łamią się na dwa wiersze);
     ramka karty z etapu 395 zostaje. Tylko elementy osadzone bezpośrednio w .NxKonf (okno <dialog> leży w .NxKonf, ale jego pasek i treść mają innych rodziców — bez zmian).
     Napis „Krok N z 3 · Nazwa” z 811 (absolutny, left/right 16) równa się z paskiem: 0. Przycisk czatu (448): odnośniki stopki kończą się ≥ 60 px przed prawym brzegiem treści (max-width), brzeg treści 41 px od ekranu → tekst ≥ 101 px od ekranu, strefa czatu 20 + 64 = 84 */
  .NxStronaGlowna .NxHero__karta .NxKonf > .NxKonf__etapy, .NxStronaGlowna .NxHero__karta .NxKonf > .NxKonf__tresc { padding-left: 0; padding-right: 0; }
  .NxStronaGlowna .NxHero__karta .NxKonf > .NxKonf__etapy[data-krok-tel]::after,
  .NxStronaGlowna .NxHero__karta .NxKonf > .NxKonf__etapy:not([data-krok-tel]) .NxKonf__etap[aria-current="step"] .NxKonf__etapNazwa { left: 0; right: 0; }
  .NxStronaGlowna .NxHero__karta .NxKonf > .NxKonf__tresc .NxKonf__stopka { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  /* 1218 (Przemek 22.10, iPhone 15 Pro: „Pola powinny byc odrobine wezsze, poniewaz gdy sa aktywne to ucina ramke w okol nich.”): po O7 pola ręczne sięgają krawędzi .NxKonf
     (overflow: hidden), a pierścień fokusu (fix-v2.css: outline 2 + odsunięcie 2) wychodzi 4 px poza ramkę → boki ucięte. Pole z etykietą węższe o 4 px z każdej strony = pierścień cały.
     Tablica rejestracyjna (pierścień .NxKonf__tablica:has(:focus) też 2 + 2) - ta sama zasada: tablica z komunikatem pod nią 4 px od krawędzi */
  .NxStronaGlowna .NxHero__karta .NxKonf > .NxKonf__tresc .NxKonf__siatka .szy-field { width: auto; margin-left: 4px; margin-right: 4px; }
  .NxStronaGlowna .NxHero__karta .NxKonf > .NxKonf__tresc .NxKonf__start .NxKonf__polaTablicy { margin-left: 4px; margin-right: 4px; }
  .NxKonf__przyciski { flex-direction: row; flex-wrap: wrap; }   /* 796: DS MontazKreator - rząd [Wróć 1/3][główny 2/3]; tekst i dodatkowy pełną szerokością nad nim */
  .NxKonf__przyciski .NxKonf__odstep { display: none; }
  .NxKonf .NxKonf__przyciski .NxKonf__przycisk { min-width: 0; flex: none; }
  .NxKonf .NxKonf__przyciski .NxKonf__suma { order: 0; flex: 1 1 100%; flex-direction: row; align-items: baseline; justify-content: space-between; }
  .NxKonf .NxKonf__stopka .NxKonf__przyciski .NxKonf__przycisk--tekst { order: 1; flex: 1 1 100%; justify-content: flex-start; padding: 0; text-align: left; }   /* wyżej niż reguła 412 (padding 12/20) */
  .NxKonf .NxKonf__przyciski .NxKonf__przycisk--dodatkowy { order: 2; flex: 1 1 100%; }
  .NxKonf .NxKonf__przyciski .NxKonf__przycisk--wroc { order: 3; flex: 1 1 0; }
  .NxKonf .NxKonf__przyciski .NxKonf__przycisk--glowny { order: 4; flex: 2 1 0; }
  /* etap 412: długi napis przycisku („Tak, przechodzę do następnego kroku”) był ucięty po bokach przy 375 px - na telefonie napis się zawija, przycisk rośnie (min. 48 px) */
  .NxKonf .NxKonf__przyciski .NxKonf__przycisk { height: auto; padding: 12px 20px; white-space: normal; line-height: 1.25; text-align: center; }
  .NxKonf__ladowanie { padding: 28px 0 12px; }
  .NxKonf__ladowanie .NxKonf__naglowek { font-size: var(--nxk-fs-naglowek-2, var(--fs-section)); }   /* 1344 B2: telefon 20 → 22 */
  .NxKonf__auto { gap: 12px; }
  .NxKonf__logo { width: 72px; height: 58px; }
  .NxKonf__logo img { width: 64px; height: 50px; }
  .NxKonf__autoNazwa { font-size: var(--fs-section); }
  .NxKonf__dane, .NxKonf__dane.NxKonf__dane--auto { grid-template-columns: 1fr; grid-auto-flow: row; }   /* 807: telefon - jedna kolumna także dla „Czy to Twoje auto?” */
  .NxKonf__dane > div { border-left: 0; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 12px; }
  .NxKonf__dane > div:first-child { border-top: 0; }
  .NxKonf .NxKonf__dane > div.NxKonf__danePole { display: block; }   /* 807: telefon - etykieta nad polem (rok, nadwozie) */
  /* 366 (raport S7 8.10 20:10, Księga W-07, W-03 <= 640): cele dotyku >= 44 px na telefonie - „Wybierz tę szybę” na karcie oferty (było 38 px wysokości)
     i odnośniki „Zmień” (podsumowanie K21, wiersz odpowiedzi nad listą; było 42 px szerokości) */
  .NxKonf .NxKonf__ofertyWrap .NxBtn { min-height: 44px; }
  /* 540 (S0 12.10 12:53): na telefonie pierwsza oferta (nazwa i cena) widoczna bez przewijania nad przyklejonym dołem:
     (A) „Wróć” obok drugiego przycisku zamiast pod nim, gdy w dole nie ma przycisku głównego; (B) niższe zdjęcie karty oferty w konfiguratorze;
     (C) objaśnienia ramki „Do sprawdzenia” zwinięte pod tytułem (konfigurator.js 540) */
  .NxKonf .NxKonf__stopka:not(:has(.NxKonf__przycisk--glowny)) .NxKonf__przyciski:has(> .NxKonf__przycisk--wroc) { flex-direction: row; }
  .NxKonf .NxKonf__stopka:not(:has(.NxKonf__przycisk--glowny)) .NxKonf__przyciski:has(> .NxKonf__przycisk--wroc) .NxKonf__przycisk--wroc { flex: none; padding: 12px 16px; }
  .NxKonf .NxKonf__stopka:not(:has(.NxKonf__przycisk--glowny)) .NxKonf__przyciski:has(> .NxKonf__przycisk--wroc) .NxKonf__przycisk--dodatkowy { flex: 1 1 0; min-width: 0; order: 4; }   /* 796: „Wróć” zostaje pierwszy w rzędzie */
  /* 796: bez przycisku głównego korekta („Zmień odpowiedzi”) w jednym rzędzie z „Wróć” (Fable P1: para zostaje; dół ekranu nie rośnie - reguła 540) */
  /* 1132 O14: „Zmień odpowiedzi” przy lewej, 12 px za „Wróć” (jak „Zmień auto” w 06d i jak na komputerze), nie na środku pustego pola; para w jednym rzędzie zostaje */
  .NxKonf .NxKonf__stopka:not(:has(.NxKonf__przycisk--glowny)) .NxKonf__przyciski:has(> .NxKonf__przycisk--wroc) .NxKonf__przycisk--tekst { order: 4; flex: 1 1 0; justify-content: flex-start; text-align: left; padding-left: var(--space-4); }
  /* 777 (raport strażników S7 15.10 #9, reguła 540): po 14.10 (linijka różnicy, ikony cech) cena pierwszej oferty na 375×667 wypadła 20 px pod przyklejony dół -
     strefa zdjęcia karty oferty na telefonie niższa: stała wysokość 76 px (było ~110: zdjęcie 96 + odstępy), zdjęcie i glif szyby wpasowane w nią (proporcje zachowane) */
  .NxKonf .NxKonf__ofertyWrap .NxKarta--lista .NxKarta__lfoto { display: flex; align-items: center; justify-content: center; height: 76px; padding: 4px 10px; box-sizing: border-box; }
  .NxKonf .NxKonf__ofertyWrap .NxKarta--lista .NxKarta__img { max-height: 68px !important; width: auto !important; max-width: 100%; object-fit: contain; }
  .NxKonf .NxKonf__ofertyWrap .NxKarta--lista .NxKarta__glif { width: auto !important; height: 60px !important; max-width: 100%; }
  .NxKonf .NxKonf__ramkaPrzelacz { display: flex; align-items: flex-start; gap: 8px; width: 100%; min-height: 44px; margin: -4px 0 0; padding: 4px 0; border: 0; background: none; font: inherit; font-weight: 700; color: inherit; text-align: left; cursor: pointer; }
  .NxKonf .NxKonf__ramkaPrzelacz svg { flex: none; margin-top: 3px; transition: transform var(--dur-base) var(--ease-out); }
  .NxKonf .NxKonf__ramkaPrzelacz[aria-expanded="true"] svg { transform: rotate(180deg); }
  .NxKonf .NxKonf__roznice { margin: 4px 0 0; }
  .NxKonf .NxKonf__ramkaPrzelacz[hidden] { display: none; }
  .NxKonf .NxKonf__link { min-width: 44px; }
}
@media (prefers-reduced-motion: reduce) { .NxKonf__kolko { animation: none; } }   /* 1333: pasek tablicy bez wjazdu (nxKonfPasekWjazd usunięty) */

/* ===================== etap 298a (S1, 7.10): wybór z listy K12/K13 = DS KonfWyborReczny (pola szy-field ze stylów sklepu) ===================== */
.NxKonf .NxKonf__siatka { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: start; }
.NxKonf .NxKonf__siatka--bezGeneracji { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* 760: model bez wyboru generacji - 4 pola */
@media (max-width: 640px) { .NxKonf .NxKonf__siatka { grid-template-columns: 1fr; gap: var(--space-4); } }   /* DS useViewport: mobile <= 640; 1132 O16: 14 → 12 (jak siatka komputera) */
/* etap 1018 (przegląd S9 18.10 W8): tablet - 5 (4) pól w jednym wierszu dawało 56 px na tekst przy 768 (ucięte „5D Hatch…”, „Wybierz n…”, „Wybierz lub wpisz”);
   R2 (przegląd R1 B1: wybrana długa generacja, np. „F06 Gran Coupe (2012-2018)” = 211 px): 761–1100 = 2 kolumny (przy 768 ok. 240 px tekstu),
   641–760 = 1 kolumna jak telefon; komputer > 1100 bez zmian */
@media (min-width: 761px) and (max-width: 1100px) { .NxKonf .NxKonf__siatka, .NxKonf .NxKonf__siatka--bezGeneracji { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 641px) and (max-width: 760px) { .NxKonf .NxKonf__siatka, .NxKonf .NxKonf__siatka--bezGeneracji { grid-template-columns: 1fr; gap: var(--space-4); } }   /* 1132 O16: 14 → 12 */
.NxKonf .NxKonf__siatka .szy-field { width: 100%; min-width: 0; font-size: var(--fs-body); }
.NxKonf .NxKonf__siatka .szy-field__frame { min-height: 48px; }
.NxKonf .NxKonf__siatka .szy-field__control { min-height: 46px; font-size: var(--fs-body); }
/* etap 412: pole z listą i wpisywaniem 1:1 z prototypu konfiguratora (etap 22, .car-picker-*), kolory i czcionka sklepu:
   „×” czyści (widoczny przy wartości, zastępuje ⌄), ⌄ rozwija, lista pod ramką (max 260 px, przewijana), nagłówki grup, wiersze ≥ 44 px, aktywny = tło + pasek z lewej */
.NxKonf.NxKonf--lista { overflow: visible; }   /* 412: otwarta lista może wyjść poza ramę modułu */
.NxKonf .NxKonf__komboPole .szy-field__frame { padding-left: 12px; padding-right: 42px; }   /* 412c (dług 412-R2 N1): rezerwa = przycisk 44 − wysunięcie 3 + obramowanie 1 → pole tekstu kończy się przed przyciskiem (bez 3 px wspólnych) */
.NxKonf .NxKonf__komboPole .szy-field__control { text-overflow: ellipsis; cursor: text; }
.NxKonf .NxKonf__komboPole { scroll-margin-top: 12px; scroll-margin-bottom: 12px; }   /* 1335a: telefon - pole przewinięte na górę widocznego obszaru z odstępem (etykieta nie przy krawędzi) */
.NxKonf .szy-field[tabindex="-1"]:focus { outline: none; }   /* 1335a R2: fokus ramki po wyborze palcem - dla czytnika ekranu, bez obwódki (pole nie jest edytowane) */
.NxKonf .NxKonf__komboPole .szy-field__control:disabled { cursor: not-allowed; }
.NxKonf .NxKonf__komboWyczysc, .NxKonf .NxKonf__komboRozwin { position: absolute; right: 1px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-muted); cursor: pointer; font: inherit; }
/* R2 (B4, W-07): cel 44 × 44 px; przycisk wystaje 3 px poza prawą krawędź ramki (w odstęp siatki); od 412c rezerwa pola 42 px (bez nakładania na pole tekstu) */
.NxKonf .NxKonf__komboWyczysc, .NxKonf .NxKonf__komboRozwin { right: -3px; }
.NxKonf .NxKonf__komboWyczysc { font-size: 24px; line-height: 1; }
.NxKonf .NxKonf__komboWyczysc:hover { background: transparent; color: var(--text-strong); }   /* etap 1266 (Przemek WPROST 23.10 09:06): tło przycisku wystającego 3 px zakrywało prawą krawędź ramki pola - najechanie zmienia tylko kolor „×” */
.NxKonf .NxKonf__komboWyczysc[hidden] { display: none; }
.NxKonf .NxKonf__komboWyczysc:not([hidden]) + .NxKonf__komboRozwin { display: none; }
.NxKonf .NxKonf__komboRozwin:disabled { cursor: not-allowed; color: var(--grey-300); }
.NxKonf .NxKonf__komboOkno { position: absolute; z-index: 20; top: calc(100% + 4px); left: -1px; right: -1px; background: var(--surface-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: 0 6px 18px rgba(7, 5, 10, 0.13); overflow: hidden; }
.NxKonf .NxKonf__komboOkno--gora { top: auto; bottom: calc(100% + 4px); }
.NxKonf .NxKonf__komboOkno.NxKonf__komboOkno--stale { position: fixed; right: auto; z-index: 30; }   /* 1338: w oknie konfiguratora lista poza krawędzią okna (left/top/width z JS) */
.NxKonf .NxKonf__komboOkno[hidden] { display: none; }
.NxKonf .NxKonf__komboLista { max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }
.NxKonf .NxKonf__komboGrupa { padding: 8px 12px; background: var(--surface-subtle); font-size: var(--fs-caption); font-weight: 600; line-height: 1.4; color: var(--text-strong); }
.NxKonf .NxKonf__komboOpcja { display: flex; align-items: center; min-height: 44px; padding: 11px 12px; font-size: var(--fs-body); line-height: 1.38; color: var(--text-strong); cursor: pointer; overflow-wrap: anywhere; }
.NxKonf .NxKonf__komboOpcja:hover, .NxKonf .NxKonf__komboOpcja.is-aktywna { background: var(--surface-subtle); box-shadow: inset 3px 0 var(--ink); }
.NxKonf .NxKonf__komboOpcja[aria-selected="true"] { font-weight: 600; }
.NxKonf .NxKonf__komboPusto { padding: 12px; font-size: var(--fs-body-sm); line-height: 1.5; color: var(--text-muted); }
.NxKonf .NxKonf__komboPusto p { margin: 0 0 4px; }
.NxKonf .NxKonf__komboPusto .NxKonf__link { display: block; margin: 2px 0; }
/* P-85 (1:1 z makietą): „×” także przy roku, podpowiedź pod zablokowanym polem („Najpierw wybierz markę.”), „Mojego auta nie ma na liście” pod Marką i Modelem */
.NxKonf .NxKonf__siatka .szy-field__frame:has(> .NxKonf__komboWyczysc:not([hidden])) { padding-right: 42px; }   /* 412c: jw. przy „×” (także pole roku) */
.NxKonf .NxKonf__siatka .NxKonf__podpowiedzPola { margin: 6px 0 0; font-size: var(--fs-meta); line-height: 1.4; }
.NxKonf .NxKonf__siatka .NxKonf__brakAutaPole { margin: 6px 0 0; font-size: var(--fs-meta); line-height: 1.4; }
.NxKonf .NxKonf__podLista { visibility: hidden; }   /* R2: odnośnik częściowo pod otwartą listą (wystające podkreślenie) */
.NxKonf .NxKonf__bledy { margin: 0 0 16px; flex-direction: column; align-items: stretch; gap: 0; }
.NxKonf .NxKonf__bledy .NxKonf__bledyTytul { font-weight: 700; margin: 0 0 2px; }
.NxKonf .NxKonf__bledy ul { margin: 4px 0 0; padding-left: 18px; }
/* 370 (audyt dostępności A5 + skan 375 S1, W-07): odnośniki w listach błędów (wybór auta, VIN) - na komputerze cel >= 24 px bez zmiany układu (ujemny margines),
   na telefonie każdy wiersz >= 44 px (lista w stanie błędu odrobinę wyższa - cele się nie nakładają); odnośniki NxKonf__link (VIN) mają już 44 px z ujemnym marginesem */
.NxKonf .NxKonf__bledy li > a:not(.NxKonf__link) { display: inline-block; padding: 3px 0; margin: -3px 0; }
@media (max-width: 640px) { .NxKonf .NxKonf__bledy li > a:not(.NxKonf__link) { display: flex; align-items: center; min-height: 44px; padding: 0; margin: 0; } }
.NxKonf .NxKonf__pomocLinki { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 16px 0 0; font-size: var(--fs-body-sm); }
.NxKonf .NxKonf__awariaMiejsce:empty { display: none; }
.NxKonf .NxKonf__pomocGen { margin: var(--space-5) 0 0; }   /* DS K08/K09: „Nie wiesz, którą wybrać? Poproś o pomoc.”; 1132 O16: 14 → 16 */

/* ===================== etap 298b (S1, 7.10): krok „pytania” K18–K22 = DS KonfiguratorScreen (KonfEkranyKrok2) ===================== */
.NxKonf .NxKonf__autoPod { font-size: 14px; color: var(--text-muted); margin-top: 2px; }
.NxKonf .NxKonf__pole-rodzaj { border: 0; padding: 0; margin: 0 0 var(--space-5); min-width: 0; }   /* 1132 O16: 18 → 16 */
.NxKonf .NxKonf__pole-rodzaj legend { font-size: 15px; font-weight: 700; line-height: 1.38; color: var(--text-strong); margin-bottom: 8px; padding: 0; }
.NxKonf .NxKonf__rodzaje { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }   /* 1132 O5: karta ↔ karta 12 (było 10) */
.NxKonf .NxKonf__inneSzyby { margin-top: 12px; }
.NxKonf .NxKonf__karty2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
/* 908 A2 (DS-1 karta wyboru, w obecnych tokenach): metody jedna pod drugą, ramka 1 px, wybrana 2 px atrament; nazwa 16/700, cena 16/700 cyfry tabelaryczne,
   opis 14 --text-muted; „Szukasz innej szyby?” = odnośnik 14 pod kartami. 1220 (Przemek 22.10): karty na całą szerokość treści — prawy margines = lewy (było max-width 640) */
.NxKonf .NxKonf__metody { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-5); }
.NxKonf .NxKonf__inne { margin: var(--space-5) 0 0; font-size: 14px; }
.NxKonf .NxKonf__inneLink { font-size: 14px; }   /* 327: kolumny nie rosną ponad ramę (min-content pola ręcznego z kółkiem) */
.NxKonf .NxKonf__metoda { display: block; padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); box-sizing: border-box; background: var(--surface-card); border: 1px solid var(--border); margin: 1px; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out); }   /* nadpisuje starą regułę szkieletu 267 (.NxKonf__metoda, nieużywana poza 298b) */
.NxKonf .NxKonf__metoda:hover { border-color: var(--border-strong); }
.NxKonf .NxKonf__metoda:has(input:checked), .NxKonf .NxKonf__metoda.is-wybrana { border: 2px solid var(--ink); margin: 0; }
.NxKonf .NxKonf__metoda:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.NxKonf .NxKonf__metodaRzad { display: flex; gap: 10px; align-items: flex-start; }   /* 1132 O15: kółko ↔ napis 10 jak DS Radio (było 12); 1132 O6: wnętrze karty 16 × 20 (wyżej) */
/* 1116 (audyt DS Opus K9/K10/K11/K12) K9: płaskie radio jak .NxKonf__odp input (1074f); fokus = pierścień karty (:has wyżej), kółko bez drugiego; wysoki kontrast = natywne */
.NxKonf .NxKonf__metoda input { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin: 3px 0 0; padding: 0; box-sizing: border-box; flex: none; border: 1.5px solid var(--grey-500, #797676); border-radius: 50%; background: var(--surface-card); cursor: inherit; }
.NxKonf .NxKonf__metoda input:checked { border-color: var(--ink); background: radial-gradient(circle at center, var(--ink) 0 5px, transparent 5.5px) var(--surface-card); }
@supports selector(:has(input)) { .NxKonf .NxKonf__metoda input:focus-visible { outline: none !important; box-shadow: none !important; } }
@media (forced-colors: active) { .NxKonf .NxKonf__metoda input { -webkit-appearance: auto; appearance: auto; background: none; } }
.NxKonf .NxKonf__metodaTekst { min-width: 0; flex: 1; }
.NxKonf .NxKonf__metodaGlowa { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.NxKonf .NxKonf__metoda--reczna .NxKonf__metodaGlowa { flex-wrap: nowrap; }
.NxKonf .NxKonf__metodaNazwa { font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--text-strong); }
.NxKonf .NxKonf__metodaCena { font-size: 16px; font-weight: 700; color: var(--text-strong); white-space: nowrap; font-variant-numeric: tabular-nums; }
.NxKonf .NxKonf__metodaCena--bez { font-size: 14px; color: var(--green-600); }
.NxKonf .NxKonf__metodaOpis { display: block; margin: var(--space-2) 0 0; font-size: 14px; line-height: 1.45; color: var(--text-muted); }
.NxKonf .NxKonf__metodaKupon { display: block; margin: var(--space-3) 0 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.NxKonf .NxKonf__vinPod { margin-top: 12px; }
.NxKonf .NxKonf__licznik { margin: 0 0 var(--space-3); font-size: 14px; font-weight: 600; color: var(--text-muted); }
.NxKonf .NxKonf__ilustracje { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 520px; margin: 4px 0 12px; }
.NxKonf .NxKonf__ilustracja { margin: 0; text-align: center; }
.NxKonf .NxKonf__iluSvg { display: block; width: 100%; max-width: 220px; margin: 0 auto; }
.NxKonf .NxKonf__ilustracja figcaption { font-size: 14px; font-weight: 600; margin-top: 6px; color: var(--text-strong); }
/* 1132 O9 (audyt DS Opus 1110 odstępy): „Jak to sprawdzić?” wisiał w pustym polu — cel dotyku 44 px (tekst ~20 px) dokładał 12 px niewidocznego pola nad i pod tekstem do marginesów.
   Ujemny margines jak .NxKonf__link (l. ~116): cel 44 px zostaje, w układzie zajmuje tyle co tekst → opis → odnośnik 22 (reguła DS opis → treść), odnośnik → kafle 24 (margines .NxKonf__odpowiedzi niżej).
   Rozwinięte „gdzie szukać” (.NxKonf__gdzie): 12 pod odnośnikiem, 0 pod sobą — do kafli 24 jak bez rozwinięcia. Cel dotyku nie nachodzi na kafle (zaczynają się 24 px pod tekstem, pole kończy 12 px pod nim) */
.NxKonf .NxKonf__jak { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; margin: -12px 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-strong); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }   /* 1116 (audyt DS Opus K9/K10/K11/K12) K11: 14 px ze skali DS (było 15) */
.NxKonf .NxKonf__gdzie { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--text-strong); max-width: 720px; }   /* 1116 K11: 14 px ze skali DS (było 15); 1220: długość wiersza jak opis (720), w oknie do prawej krawędzi treści (było 620) */
.NxKonf .NxKonf__jak + .NxKonf__gdzie { margin: var(--space-4) 0 0; }   /* 1132 O9 (K19) */
/* 1132 O1 + O5 + O9: kafle 24 pod odnośnikiem (było 18 + 12 niewidocznego pola = 30), karta ↔ karta 12 (było 10), bez dolnych 8 px (kreska stopki 24 = O1) */
.NxKonf .NxKonf__odpowiedzi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-7) 0 0; }
.NxKonf .NxKonf__odp { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; border-radius: var(--radius-lg); border: 1px solid var(--border-strong, var(--border)); background: var(--surface-card); font-size: 16px; font-weight: 600; color: var(--text-body, #303030); cursor: pointer; box-sizing: border-box; }
.NxKonf .NxKonf__odp:has(input:checked) { border: 2px solid var(--ink); }
.NxKonf .NxKonf__odp:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
/* 1074f R2 (DS Radio = design-system/components/forms/Radio.jsx po etapie 126 R1 B2; AUDYT-codex nr 03): płaskie kółko bez natywnego cieniowania Safari (appearance none na natywnym input); niezaznaczone: ramka 1,5 px --grey-500 (#797676 = 4,5:1 do bieli, WCAG 2.2 1.4.11 ≥ 3:1; --border-strong dawało 1,38:1), tło --surface-card; zaznaczone = atrament (D7): ramka --ink, kropka 10 px = radial-gradient w tle o stałym promieniu 5 px od środka padding-box, więc średnica NIE zależy od zaokrąglenia ramki (Chrome 2x rysuje 1 px, Safari 1,5 px — inset box-shadow dawał 11 vs 10 px); fokus = pierścień karty (:has wyżej), nie na kółku — !important, bo globalny :focus-visible w css/fix-v2.css l. 2–10 ma !important (jak nagłówki l. 34), kropka w tle nie ginie od box-shadow none; wysoki kontrast = natywne */
.NxKonf .NxKonf__odp input { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin: 0; padding: 0; box-sizing: border-box; flex: none; border: 1.5px solid var(--grey-500, #797676); border-radius: 50%; background: var(--surface-card); cursor: inherit; }
.NxKonf .NxKonf__odp input:checked { border-color: var(--ink); background: radial-gradient(circle at center, var(--ink) 0 5px, transparent 5.5px) var(--surface-card); }
@supports selector(:has(input)) { .NxKonf .NxKonf__odp input:focus-visible { outline: none !important; box-shadow: none !important; } }
@media (forced-colors: active) { .NxKonf .NxKonf__odp input { -webkit-appearance: auto; appearance: auto; background: none; } }
/* 802 (Fable 3.6 poz. 10): kafel odpowiedzi = ilustracja + radio z podpisem („Tak, jest” / „Nie, nie ma”); „Nie wiem” bez ilustracji, treść na środku wysokości */
.NxKonf .NxKonf__odp--kafel { flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 10px; padding: var(--space-5) var(--space-6); cursor: pointer; }   /* 1132 O6: wnętrze karty wyboru 16 × 20 jak karty metody i opcji (było 14 × 16); telefon 12 × 16 niżej */
.NxKonf .NxKonf__odpIlu { display: block; }
.NxKonf .NxKonf__odpIlu svg { display: block; width: 100%; max-width: 200px; height: auto; margin: 0 auto; }
.NxKonf .NxKonf__odpRzad { display: flex; align-items: center; gap: 10px; }
/* 1184 (Przemek 21.10, projekt Fable 5.1): kafel odpowiedzi bez rysunku - ten sam kafel-radio, wiersz [kółko 20 + podpis], cel dotyku 56 px, wnętrze 12 × 16 jak karty na telefonie (1132 O6); siatka 3 kolumny / kolumna na telefonie bez zmian */
.NxKonf .NxKonf__odp--kafel.NxKonf__odp--bezIlu { flex-direction: row; align-items: center; justify-content: flex-start; min-height: 56px; padding: var(--space-4) var(--space-5); }
@media (max-width: 640px) {
  /* telefon: kafle w jednej kolumnie - radio i podpis z lewej, mała ilustracja z prawej (pierwszy ekran bez przewijania) */
  .NxKonf .NxKonf__odp--kafel { flex-direction: row-reverse; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); }   /* 1132 O6: 12 × 16 (było 10 × 14) */
  .NxKonf .NxKonf__odpIlu svg { width: 96px; }
  .NxKonf .NxKonf__odp--kafel.NxKonf__odp--bezIlu { flex-direction: row; justify-content: flex-start; }   /* 1184: bez rysunku row-reverse odwróciłby wiersz */
}
.NxKonf .NxKonf__bladOdp { margin: 0 0 8px; }
.NxKonf .NxKonf__nad { margin: 0 0 10px; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }   /* 802: DS eyebrow 11/700 CAPS .08em */
.NxKonf .NxKonf__podsum { list-style: none; margin: 0 0 12px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.NxKonf .NxKonf__podsum li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-height: 48px; box-sizing: border-box; }
.NxKonf .NxKonf__podsum li + li { border-top: 1px solid var(--border); }
.NxKonf .NxKonf__podsum .NxKonf__ikona { color: var(--text-muted); flex: none; }   /* DS Icon 20, kolor --text-muted */
.NxKonf .NxKonf__podsumNazwa { flex: 1; min-width: 0; font-size: 15px; color: var(--text-strong); }
.NxKonf .NxKonf__podsum strong { font-size: 15px; }
.NxKonf .NxKonf__ukryte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 640px) {
  .NxKonf .NxKonf__rodzaje { grid-template-columns: 1fr 1fr; }
  .NxKonf .NxKonf__metody, .NxKonf .NxKonf__karty2, .NxKonf .NxKonf__odpowiedzi { grid-template-columns: minmax(0, 1fr); }
  .NxKonf .NxKonf__podsum li { padding: 10px 12px; }
  .NxKonf .NxKonf__metoda { padding: var(--space-4) var(--space-5); }   /* 1132 O6: telefon 12 × 16 (było 16) */
  /* 327 (raport „oczami klienta” 10): karta oferty na telefonie - zdjęcie na pełną szerokość, kolumny jedna pod drugą (bez pustego prostokąta) */
  .NxKonf .NxListing .NxKarta--lista .NxKarta__lfoto { flex: 1 1 100%; min-width: 0; border-right: 0; border-bottom: 1px solid var(--border-subtle); }
  .NxKonf .NxListing .NxKarta--lista .NxKarta__ltresc, .NxKonf .NxListing .NxKarta--lista .NxKarta__lprawa { flex: 1 1 100%; min-width: 0; }
  .NxKonf .NxListing .NxKarta--lista .NxKarta__lprawa { border-left: 0; border-top: 1px solid var(--border-subtle); }
}

/* 327 + 336 (S7 04:19 i 06:43, WCAG 2.5.8): link nazwy szyby >= 24 px wysokości na KAŻDEJ szerokości; ujemny margines = ten sam układ co w DS (pole celu większe, wiersz bez zmian) */
.NxKonf .NxListing .NxKarta__h3 a { display: inline-block; padding: 3px 0; margin: -3px 0; }
/* etap 709 (dług dostępności, KF-16 14.10: „link nazwy szyby 308x27 px”): telefon (≤ 640 px) - obszar dotyku nazwy ≥ 44 px (cel DS, jak 679): padding 12,5 px + ujemny margines
   (nazwa jednowierszowa 21,8 + 25 = 46,8 px z zapasem); układ karty i położenie tekstu bez zmian; komputer bez zmian (reguła 327 wyżej) */
@media only screen and (max-width: 640px) { .NxKonf .NxListing .NxKarta__h3 a { position: relative; padding: 12.5px 0; margin: -12.5px 0; } }   /* position: dopełnienie nad sąsiednimi blokami karty (inaczej 41 px) */

/* etap 708d (Przemek 14.10: uwagi producenta tylko jako ikona): ramka 708b .NxKarta__uwaga usunięta - ikona .NxUwaga w pasku cech, style z karty-v3.css (708c) */

/* ===================== etap 318 (S1, 8.10): krok „oferty” K24 = karta listy sklepu (karty-v3.css w .NxListing) + wersje „Nie wiem” ===================== */
.NxKonf .NxKonf__ofertyWrap { display: grid; gap: 16px; }
.NxKonf .NxKonf__ofertyWrap .NxKonf__oferty { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.NxKonf .NxKonf__ofertyWrap .NxKonf__oferta { display: block; padding: 0; border: 0; border-radius: 0; background: none; }   /* stara ramka szkieletu 267 - kartę rysuje NxKarta */
.NxKonf .NxKonf__ofertyWrap .NxKonf__ofertaLuki { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-strong); }
/* etap 579: linijka różnicy na karcie oferty (to, co odróżnia szybę od podobnych na liście) i zdanie „inna wersja wyposażenia” z wejściem do pomocy */
.NxKonf .NxKonf__ofertyWrap .NxKarta__roznica { margin: 4px 0 0; font-size: 13px; line-height: 18px; color: var(--text-strong); overflow-wrap: anywhere; }
/* etap 1273: „Wersja producenta” pod nazwą (cały tekst, zawijany) i miniatury zdjęć w ramce szyb nierozróżnialnych (odnośniki do pełnych zdjęć; cel dotyku 44 px) */
.NxKonf .NxKonf__ofertyWrap .NxKarta__wersja { margin: 4px 0 0; font-size: 13px; line-height: 18px; color: var(--text-strong); overflow-wrap: anywhere; }
.NxKonf .NxKonf__ofertyWrap .NxKarta__wersja--brak { color: var(--text-muted); }
.NxKonf .NxKonf__ofertyWrap .NxKarta__miniatury { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.NxKonf .NxKonf__ofertyWrap .NxKarta__miniatury li { margin: 0; padding: 0; }
.NxKonf .NxKonf__ofertyWrap .NxKarta__miniatura { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; width: 64px; height: 48px; border: 1px solid var(--border); border-radius: var(--radius-sm, 6px); background: var(--surface, #fff); overflow: hidden; }
.NxKonf .NxKonf__ofertyWrap .NxKarta__miniatura img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.NxKonf .NxKonf__ofertyWrap .NxKarta__fotoLink { display: block; min-width: 44px; min-height: 44px; border-radius: var(--radius-sm, 6px); }
.NxKonf .NxKonf__ofertyWrap .NxKarta__fotoLink:focus-visible { outline: 2px solid var(--focus, #1a73e8); outline-offset: 2px; }
.NxKonf .NxKonf__ofertyWrap .NxKarta__miniatura:focus-visible { outline: 2px solid var(--focus, #1a73e8); outline-offset: 2px; }
.NxKonf .NxKonf__ofertyWrap .NxKarta__roznica--vin { color: var(--text-muted); }   /* S8 11:44: zdanie o VIN przy ok. 1/3 szyb — spokojne, bez pogrubienia; odnośnik „Zapytaj nas” zostaje wyróżniony */
.NxKonf .NxKonf__ofertyWrap .NxKarta__roznicaLink { font-size: 13px; font-weight: 600; }
.NxKonf .NxListing .NxKarta--bezAkcji { cursor: default; }   /* niedostępna: bez sugestii kliknięcia (318 v3 B2) */
.NxKonf .NxListing .NxKarta--bezAkcji:hover { transform: none; box-shadow: none; border-color: var(--border); }
.NxKonf .NxListing .NxKarta--bezAkcji:hover .NxKarta__img { transform: none; }
.NxKonf .NxKonf__wersjeInfo { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-strong); }
.NxKonf .NxKonf__ramkaIkona { flex: none; margin-top: 1px; color: var(--text-muted); }
.NxKonf .NxKonf__ramkaTresc { min-width: 0; }
.NxKonf .NxKonf__ramkaTytul { font-weight: 700; margin: 0 0 2px; }
.NxKonf .NxKonf__roznica { margin: 2px 0 0; }
/* 802 (audyt Fable P4): wiersz cechy w ramce „Do sprawdzenia” - ikona 20 | nazwa 600 + objaśnienie 400 w jednej linii (zawija się pod tekstem, nie pod ikoną) */
.NxKonf .NxKonf__cechaWiersz { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--text-secondary); }
.NxKonf .NxKonf__cechaIkona { flex: none; margin-top: 0; color: var(--text-strong); }
.NxKonf .NxKonf__cechaNazwa { font-weight: 600; color: var(--text-strong); }
.NxKonf .NxKonf__odpWiersz .NxKonf__cechaIkona { vertical-align: -5px; margin-right: 8px; }
.NxKonf .NxKonf__wersja { display: grid; gap: 12px; }
.NxKonf .NxKonf__wersjaTytul { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--text-secondary); }   /* 802 (Fable P4): nagłówek grupy wersji lżejszy - nie konkuruje z kartami ani z ramką */
/* etap 336 (prośba S6 282c2 B8): K58 płatny VIN (krok-vin-platnosc.js) = DS KonfVinPlatnosc + KonfVinCena + Checkbox labelTone body.
   Ramka ceny z K41 (krok-vin.js, .NxKonf__ramka.NxKonf__cena) bez zmian - stąd :not(.NxKonf__ramka). */
.NxKonf .NxKonf__email { margin: 0 0 var(--space-5); font-size: 15px; color: var(--text-strong); }   /* 1132 O13: 14 → 16 */
.NxKonf .NxKonf__cena:not(.NxKonf__ramka) { margin: 4px 0 16px; padding: var(--space-4) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-subtle); font-size: 15px; line-height: 1.5; }
.NxKonf .NxKonf__cena:not(.NxKonf__ramka) > .NxKonf__cenaWiersz { font-weight: 700; color: var(--text-strong); }
.NxKonf .NxKonf__cena:not(.NxKonf__ramka) > p { margin: 6px 0 0; color: var(--text-strong); }
.NxKonf .NxKonf__cena:not(.NxKonf__ramka) > p.NxKonf__cenaPod { color: var(--text-muted); }
.NxKonf .NxKonf__cenaLink { margin-top: 4px; font-size: 14px; }
.NxKonf .NxKonf__zgoda { margin: 0 0 var(--space-5); }   /* 1132 O16: 14 → 16 */
/* DS Checkbox: wiersz inline-flex, kwadrat 20 px (ramka 1.5 --border-input, --radius-sm), zaznaczony = --red-500 + ikona check 14 biała (stroke 3), fokus z klawiatury = podwójny pierścień.
   Kwadratem jest sam natywny input (appearance: none) - ten sam wygląd co ukryty input + span DS, bez zmiany znaczników S6 */
.NxKonf .NxKonf__zgodaEtykieta { position: relative; display: inline-flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; font-family: var(--font-body); font-size: var(--fs-ui); line-height: 1.43; font-weight: 400; color: var(--text-body); }
.NxKonf .NxKonf__zgodaEtykieta > span { min-width: 0; font-size: 14px; line-height: 1.5; }
.NxKonf .NxKonf__zgodaEtykieta > input[type=checkbox] {
  -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; margin: 0; padding: 0; box-sizing: border-box;
  border: 1.5px solid var(--border-input); border-radius: var(--radius-sm); background: var(--surface-card) no-repeat center / 14px 14px; cursor: inherit;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.NxKonf .NxKonf__zgodaEtykieta > input[type=checkbox]:checked { border-color: var(--red-500); background-color: var(--red-500);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.NxKonf .NxKonf__zgodaEtykieta > input[type=checkbox]:focus { outline: none; }
.NxKonf .NxKonf__zgodaEtykieta > input[type=checkbox]:focus-visible { outline: 2px solid var(--focus-ring-outer); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-ring-inner); }
@media (forced-colors: active) { .NxKonf .NxKonf__zgodaEtykieta > input[type=checkbox] { -webkit-appearance: auto; appearance: auto; } }
.NxKonf .NxKonf__zgoda > .NxKonf__blad { margin: 6px 0 0; }
.NxKonf .NxKonf__drobny { margin: 0 0 6px; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.NxKonf .NxKonf__drobny + .NxKonf__drobny { margin-bottom: 0; }
/* 908 B1: odpowiedzi jako chipy nad listą szyb (zamiast ekranu „Sprawdź wyposażenie szyby”); chip 34 px, 13 px, ramka --border, „Zmień” = odnośnik */
.NxKonf .NxKonf__odpChipy { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-4); padding: 0; }
.NxKonf .NxKonf__odpChipy .NxKonf__odpChip { display: flex; margin: 0; padding: 0; }
/* S3 rozbieżność 2/3: cały chip = przycisk 44 px; na telefonie chipy w JEDNYM wierszu przewijanym w bok (lista szyb nie spada niżej) */
.NxKonf .NxKonf__odpChipBtn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-card); font: inherit; font-size: var(--fs-meta); line-height: 1.3; color: var(--text-strong); white-space: nowrap; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out); }
.NxKonf .NxKonf__odpChipBtn:hover { border-color: var(--ink); }
.NxKonf .NxKonf__odpChipBtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.NxKonf .NxKonf__odpChipBtn .NxKonf__cechaIkona { width: 16px; height: 16px; margin: 0; vertical-align: 0; color: var(--text-muted); flex: none; }
.NxKonf .NxKonf__odpChipZmien { margin-left: 4px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 640px) {
    .NxKonf .NxKonf__odpChipy { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
    .NxKonf .NxKonf__odpChipy::-webkit-scrollbar { display: none; }
    .NxKonf .NxKonf__odpChipy .NxKonf__odpChip { flex: none; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .NxKonf .NxKonf__odpChipBtn { transition: none; } }
/* 908 A3: odnośniki pod przyciskami („Poproś o pomoc — bezpłatnie · Zmień odpowiedzi”) */
/* 1132 O10 (pomiar sklepu 20.10 19:1x, 06f „Nie wiem”): od zdania nad odnośnikami do ich tekstu było ok. 40 px = 12 (dół .NxKonf__tekstPod) + 12 (góra wiersza) + 16 (drugi odnośnik
   „Zmień odpowiedzi” ma klasę NxKonf__zmienOdp: margin-top 4 nadpisywał pionowe -12 z .NxKonf__link, więc jego pole 44 px podnosiło wiersz o 4 + 12). Cel: tekst → odnośniki 16
   (miara „odnośniki pod treścią ← tekst nad nimi”), odnośniki → kreska stopki 24 (O1). Wiersz = 16 od góry; dół poprzedniego .NxKonf__tekstPod zerowany; po samym opisie (bez
   warunków VIN, tryb 962) 22 = opis → treść wg DS. Oba odnośniki z pionowym -12 (cel dotyku 44 px zostaje, wiersz wysoki jak tekst) */
.NxKonf .NxKonf__linkiPod { margin: var(--space-5) 0 0; font-size: 14px; color: var(--text-muted); }
.NxKonf .NxKonf__tekstPod:has(+ .NxKonf__linkiPod) { margin-bottom: 0; }
.NxKonf .NxKonf__opis + .NxKonf__linkiPod { margin-top: 0; }
.NxKonf .NxKonf__linkiPod .NxKonf__link { font-size: 14px; font-weight: 600; margin-top: -12px; margin-bottom: -12px; }
/* 1074g (DS, AUDYT-codex nr 05): odstęp wokół kropki między linkami „Nie wiem” — tylko przy dwóch linkach (węzeł tekstowy „ · ” nie jest elementem); bez skrótu margin, by nie ruszyć pionowego -12px z l. 111 */
.NxKonf .NxKonf__linkiPod .NxKonf__link:not(:last-child) { margin-right: var(--space-3, 8px); }
.NxKonf .NxKonf__linkiPod .NxKonf__link + .NxKonf__link { margin-left: var(--space-3, 8px); }
/* K66: kupon z wyniku VIN pod listą szyb (DS: marginTop 14 + KonfKomunikat info) */
.NxKonf .NxKonf__kupon { margin-top: var(--space-5); }   /* 1132 O16: 14 → 16 */
/* etap 903: kod rabatowy w ramce pod ofertami — wartość (czcionka o stałej szerokości, zaznaczalna) + „Kopiuj” (cel ≥ 44 px) + stan „Skopiowano” */
.NxKonf .NxKonf__kuponKod { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 0; }
.NxKonf .NxKonf__kuponWartosc { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 17px; letter-spacing: .04em; padding: 6px 10px; border: 1px dashed var(--border-strong, #999); border-radius: 6px; background: var(--surface, #fff); user-select: all; -webkit-user-select: all; }
.NxKonf .NxKonf__kuponKopiuj { min-height: 44px; height: 44px; padding: 0 18px; }
.NxKonf .NxKonf__kuponStan { font-size: 14px; color: var(--text-muted); }
.NxKonf .NxKonf__kuponStan:empty { display: none; }
/* ===================== etap 349 (S1, 8.10): pięć zmian przebiegu P-45…P-49 (TAK Przemka) ===================== */
.NxKonf .NxKonf__autoLinia { margin: 0 0 var(--space-3); font-size: var(--fs-body-sm); line-height: 1.5; color: var(--text-muted); }   /* P-47: „Audi A4 B8 · 2012” nad pytaniem; 1132 O3: nadtytuł 6 → 8 */
.NxKonf .NxKonf__odpWiersz { margin: 0 0 var(--space-5); font-size: var(--fs-body-sm); line-height: 1.5; color: var(--text-strong); }   /* P-46: „Kamera: Nie · Zmień” nad listą; 1132 O16: 14 → 16 */
.NxKonf .NxKonf__zmienOdp { margin-top: 4px; }
/* 796 (audyt Fable P1 pkt 5, W-24): start - „Chcę wymienić szybę z ubezpieczenia” / „Chcę naprawić…” jako przyciski tekstowe (DS TextButton) także na komputerze,
   jak na telefonie; akcja główna „Znajdź auto” jedyna wypełniona, po prawej */
.NxKonf .NxKonf__start .NxKonf__stopka .NxKonf__przycisk--dodatkowy { height: auto; min-height: 44px; padding: 0 16px 0 0; border: 0; background: none; box-shadow: none; font-size: var(--fs-body-sm); font-weight: 600; color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }
.NxKonf .NxKonf__start .NxKonf__stopka .NxKonf__przycisk--dodatkowy:hover { background: none; color: var(--red-500); }
/* P-48: telefon - „Znajdź auto” pod polem numeru; „z ubezpieczenia” i „naprawić” w stopce startu jako odnośniki (cel >= 44 px); komputer bez zmian */
.NxKonf .NxKonf__znajdzTel { display: none; }
@media (max-width: 640px) {
  .NxKonf .NxKonf__znajdzTel { display: flex; margin: 12px 0 0; }
  .NxKonf .NxKonf__znajdzTel .NxKonf__przycisk--glowny { width: 100%; }
  .NxKonf .NxKonf__start .NxKonf__stopka .NxKonf__przycisk--glowny, .NxKonf.NxKonf--reczne .NxKonf__start .NxKonf__stopka .NxKonf__dalejStrony { display: none; }
  .NxKonf .NxKonf__start .NxKonf__stopka .NxKonf__przyciski { gap: 0; }
  .NxKonf .NxKonf__start .NxKonf__stopka .NxKonf__przycisk--dodatkowy { height: auto; min-height: 44px; padding: 0; border: 0; background: none; box-shadow: none; justify-content: flex-start;
    font-weight: 600; color: var(--text-link, var(--text-strong)); text-decoration: underline; text-underline-offset: 3px;
    white-space: normal; text-align: left; line-height: 1.3; }   /* etap 396: dłuższy odnośnik („…z ubezpieczenia”) łamie się zamiast ucinać przy 375 */
  .NxKonf .NxKonf__start .NxKonf__stopka .NxKonf__przycisk--dodatkowy:hover { background: none; }
  /* etap 448 (raport regresji S4 10.10): przycisk czatu (64 px, 20 px od prawej) zaslanial koniec tych odnosnikow („…uszkodzenie szyby”), gdy dol ramki
     byl przy dolnej krawedzi ekranu (zwykle polozenie przy starcie na telefonie) - odnosnik konczy sie przed przyciskiem (prawy brzeg tekstu 41 px od ekranu + 60 = poza strefa 20 + 64 px) */
  .NxKonf .NxKonf__start .NxKonf__stopka .NxKonf__przycisk--dodatkowy { align-self: flex-start; max-width: calc(100% - 60px); }
}

/* ---------- etap 454 (Przemek 10.10): kroki 2-3 w oknie na środku ekranu, jak w pierwszej wersji (stary finder: nx_finder/finder.css .NxAsst) ----------
   <dialog> otwierany showModal() w #NxKonf (warstwa górna strony): tło rgba(12,10,16,.55) + rozmycie 3 px, karta max 894 px, radius-2xl, shadow-modal;
   telefon <= 640 = cały ekran. Strona pod oknem nie przewija się (klasa na <html>; miejsce na pasek przewijania zostaje - scrollbar-gutter z etapu 27). */
html.NxKonf-okno { overflow: hidden; }
.NxKonf__okno { box-sizing: border-box; position: fixed; inset: 0; width: calc(100% - 40px); max-width: 894px; height: -webkit-fit-content; height: fit-content; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); margin: auto; padding: 0; border: 0; border-radius: var(--radius-2xl); background: var(--surface-card); box-shadow: var(--shadow-modal); color: var(--text-body); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.38; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; outline: none; }
.NxKonf__okno[open] { animation: nxKonfOknoIn 0.3s var(--ease-out); }
.NxKonf__okno::backdrop { background: rgba(12, 10, 16, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.NxKonf__okno[open]::backdrop { animation: nxKonfTloIn 0.25s ease-out; }
@keyframes nxKonfOknoIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes nxKonfTloIn { from { opacity: 0; } to { opacity: 1; } }
/* góra okna: pasek etapów + X (przyklejona przy przewijaniu treści okna) */
.NxKonf__oknoGora { position: sticky; top: 0; z-index: 3; display: flex; align-items: flex-start; background: var(--surface-card); border-bottom: 1px solid var(--border); }
.NxKonf__oknoGora .NxKonf__etapy { flex: 1; min-width: 0; border-bottom: 0; padding-right: 12px; }
.NxKonf__oknoZamknij { flex: none; width: 44px; height: 44px; margin: 14px 16px 0 0; padding: 0; border: 0; border-radius: 50%; background: var(--surface-sunken); color: var(--text-strong); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.NxKonf__oknoZamknij:hover { background: var(--border); }
.NxKonf__oknoZamknij:focus-visible { outline: 2px solid var(--focus-ring-outer); outline-offset: 2px; }
.NxKonf__oknoTresc { padding-bottom: 24px; }
/* 1132 O2 (audyt DS Opus 1110 odstępy): pod przyciskami okna raz 48 px (krótkie kroki: 24 stopki + 24 okna), raz 24–28 (długie, stopka przyklejona 1019 chowa dolne 24 pod krawędzią).
   Gdy stopka jest ostatnim elementem treści — dopełnienie okna 0, pod przyciskami zawsze 24 (telefon 16: własne dopełnienie stopki). Ekrany bez stopki (ładowanie) i z elementami
   po stopce (895c .NxKonf__pod, zgłoszenie zdjęć .NxKonf__zglDane) zachowują 24; naprawa ma własną stopkę z ujemnym dołem (krok-naprawa.css) — bez zmian.
   R2 (przegląd R1 B1): „ostatni” liczony w CAŁEJ treści okna — stopka = ostatnie dziecko bieżącego kroku, krok = ostatni w kontenerze kroków (szkielet ofert w czasie
   ładowania stoi za krokiem → 24). Komunikat okna (.NxKonf__komunikat po kontenerze, tekst wstawia komunikat() w JS) z tekstem sam niesie 24 pod sobą — warunek
   :has(> .NxKonf__komunikat:empty) na oknie WebKit nie przelicza po zmianie tekstu (pomiar 21.10: selektor przestaje pasować, styl zostaje 0) */
.NxKonf__oknoTresc:has(> [data-nxkonf-kroki] > .NxKonf__krok:last-child > .NxKonf__stopka:last-child):not(:has([data-nxkonf-krok=naprawa])) { padding-bottom: 0; }
.NxKonf__oknoTresc > .NxKonf__komunikat:not(:empty) { padding-bottom: var(--space-7); }
/* pytanie przy zamykaniu, gdy klient coś wpisał (jak .NxAsst__potwierdz) */
.NxKonf__oknoPytanie { position: fixed; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(7, 5, 10, 0.35); }
/* etap 1265 (Przemek 23.10: „tło za pop-upem powinno być rozmyte i przyciemnione (biały na białym)”): pod pytaniem „Zamknąć okno?” okno konfiguratora
   przyciemnione i rozmyte tak samo jak strona pod oknem cookies (było rgba(255,255,255,.72) — białe okienko na białym); bez wsparcia / reduced-transparency = samo przyciemnienie */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .NxKonf__oknoPytanie { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
}
@media (prefers-reduced-transparency: reduce) { .NxKonf__oknoPytanie { -webkit-backdrop-filter: none; backdrop-filter: none; } }
.NxKonf__oknoPytanieBox { width: 100%; max-width: 420px; padding: 24px; border-radius: var(--radius-xl); background: var(--surface-card); box-shadow: var(--shadow-overlay); }
.NxKonf__oknoPytanieT { margin: 0 0 8px; font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.27; font-weight: 700; color: var(--text-strong); }
.NxKonf__oknoPytanieO { margin: 0 0 20px; font-size: var(--fs-body); line-height: 1.55; color: var(--text-muted); }
.NxKonf__oknoPytanie .NxKonf__przyciski { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 640px) {
  .NxKonf__okno { width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; }
  .NxKonf__oknoZamknij { margin: 8px 8px 0 0; }
  .NxKonf__oknoGora .NxKonf__etapy { padding-right: 4px; }
  .NxKonf__oknoPytanie .NxKonf__przyciski { flex-direction: column-reverse; }
}
@media (prefers-reduced-motion: reduce) { .NxKonf__okno[open], .NxKonf__okno[open]::backdrop { animation: none; } }
/* etap 819 (Przemek P-059; opinie Fable 5.1 + ChatGPT, decyzja S0 16:21): szerokość okna wg rodzaju ekranu — S 560 (krótki formularz), M 760 (standard),
   L = dotychczasowe 894 (oferty, wybór auta 5 pól). Atrybut ustawia konfigurator.js (idz / nx.okno). Tylko >= 641 px: telefon zostaje pełnoekranowy
   (selektor z atrybutem ma wyższą specyficzność niż reguła telefonu wyżej). Bez animacji szerokości. */
@media (min-width: 641px) {
  .NxKonf__okno[data-nxkonf-okno="s"] { max-width: 560px; }
  .NxKonf__okno[data-nxkonf-okno="m"] { max-width: 760px; }
}
/* etap 598 B: rok niepewny na ekranie „Czy to Twoje auto?” — pole roku do wpisania (wąskie jak pole Rok w wyborze ręcznym) */
.NxKonf .NxKonf__rokNiepewny { margin: 16px 0 8px; display: grid; gap: 6px; }
.NxKonf .NxKonf__rokNiepewny .szy-field { max-width: 220px; }
.NxKonf .NxKonf__rokNiepewny .NxKonf__tekstPod { margin: 0; }
/* 807 (audyt Fable P1b): rok niepewny - pole roku jako 4. kafel siatki danych auta, pod siatką jedna linijka 14 muted, pomoc „bez dowodu” zwinięta */
.NxKonf .NxKonf__dane > div.NxKonf__danePole dt label { font: inherit; color: inherit; }
.NxKonf .NxKonf__dane > div.NxKonf__danePole dd { margin-top: 4px; font-weight: 400; }
.NxKonf .NxKonf__danePole .szy-field__frame { min-height: 40px; background: var(--surface-card); }
.NxKonf .NxKonf__danePole .szy-field__control { min-height: 38px; padding: 6px 28px 6px 0; font-size: var(--fs-body); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }   /* 807b: miejsce na strzałkę (wąskie kafle przy 4 kolumnach) */
.NxKonf .NxKonf__danePole .NxKonf__blad { margin: 6px 0 0; font-size: var(--fs-meta); }
.NxKonf .NxKonf__dane + .NxKonf__ukryte + .NxKonf__rokNiepewny { margin-top: -6px; }
.NxKonf .NxKonf__rokNiepewny .NxKonf__podpowiedz { margin: 0; font-size: var(--fs-body-sm); line-height: 1.45; color: var(--text-muted); }
.NxKonf .NxKonf__rokPomoc { margin: 2px 0 0; }
.NxKonf .NxKonf__rokPomocTytul { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; list-style: none; font-size: var(--fs-body-sm); font-weight: 600; color: var(--text-strong); text-decoration: underline; text-underline-offset: 3px; }
.NxKonf .NxKonf__rokPomocTytul::-webkit-details-marker { display: none; }
.NxKonf .NxKonf__rokPomocTytul:hover { color: var(--red-500); }
.NxKonf .NxKonf__rokPomoc[open] .NxKonf__rokPomocIkona { transform: rotate(180deg); }
.NxKonf .NxKonf__rokPomoc .NxKonf__kontakt { margin: 4px 0 0; }
.NxKonf .NxKonf__auto--akcja > .NxKonf__link { margin-left: auto; font-size: var(--fs-body-sm); font-weight: 600; align-self: center; }
/* etap 599 (P-012 = A): jedna ramka nad szybami, których dane nie rozróżniają — nagłówek z ikoną info, karty (cena, dostępność, bez „Wybierz”), jeden przycisk */
.NxKonf .NxKonf__ofertyWrap .NxKonf__vinRamka { display: grid; gap: 12px; padding: 14px 16px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-subtle); }
.NxKonf .NxKonf__vinNaglowek { display: flex; gap: 12px; align-items: flex-start; color: var(--text-strong); }
.NxKonf .NxKonf__vinNaglowek p { margin: 0; overflow-wrap: anywhere; }
.NxKonf .NxKonf__vinNaglowek p + p { margin-top: 4px; color: var(--text-muted); }
.NxKonf .NxKonf__vinCta { display: flex; justify-content: flex-end; }
/* telefon (kryterium 540/S4 13:12: cena pierwszej szyby nad dolnym paskiem bez przewijania; zwykła karta ma ok. 10 px zapasu na 375×667): nad kartami ramki
   tylko 6 px marginesu — objaśnienie i przycisk POD kartami (tylko kolejność wizualna; czytnik czyta objaśnienie pierwsze, w objaśnieniu nie ma elementów fokusu) */
@media (max-width: 640px) {
  .NxKonf .NxKonf__ofertyWrap .NxKonf__vinRamka { padding: 6px 6px 14px; gap: 12px; }
  .NxKonf .NxKonf__vinLista { order: 1; }
  .NxKonf .NxKonf__vinNaglowek { order: 2; padding: 0 8px; }
  .NxKonf .NxKonf__vinCta { order: 3; padding: 0 8px; }
  .NxKonf .NxKonf__vinCta .NxBtn { width: 100%; justify-content: center; }
}

/* etap 731: „Dane do faktury” na K58 (osoba / firma + NIP) — pola jak formularz kroku VIN (.NxKonf__wiersz/.NxKonf__pole), radia jak segmenty, cele ≥ 44 px */
.NxKonf .NxKonf__nabywca { margin: 16px 0; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-md, 12px); }
.NxKonf .NxKonf__nabywca .NxKonf__podtytul { margin: 0 0 4px; font-size: var(--fs-body); font-weight: 700; }
.NxKonf .NxKonf__nabywca .NxKonf__drobny { margin: 0 0 12px; }
.NxKonf .NxKonf__nabywcaRodzaj { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 0; border: 0; }
.NxKonf .NxKonf__nabywcaRodzaj legend { width: 100%; margin: 0 0 6px; padding: 0; }
.NxKonf .NxKonf__radio { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px); cursor: pointer; }
.NxKonf .NxKonf__radio:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.NxKonf .NxKonf__radio input { width: 18px; height: 18px; margin: 0; }
.NxKonf .NxKonf__nabywca .NxKonf__wiersz[hidden] { display: none; }
.NxKonf .NxKonf__nabywca .NxKonf__pole { min-height: 44px; width: 100%; box-sizing: border-box; }
.NxKonf .NxKonf__nabywca .NxKonf__bledy[hidden] { display: none; }
@media (min-width: 641px) {
  .NxKonf .NxKonf__nabywca { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .NxKonf .NxKonf__nabywca > .NxKonf__podtytul, .NxKonf .NxKonf__nabywca > .NxKonf__drobny, .NxKonf .NxKonf__nabywca > .NxKonf__bledy,
  .NxKonf .NxKonf__nabywca > .NxKonf__nabywcaRodzaj, .NxKonf .NxKonf__nabywca > [data-nxkonf-pole=NxKonfNabUlica], .NxKonf .NxKonf__nabywca > [data-nxkonf-pole=NxKonfNabNazwa] { grid-column: 1 / -1; }
  /* 1074a (DS, AUDYT-codex nr 01): 16 px (space-5) między rzędami grup pól (Imię/Nazwisko → Ulica → Kod/Miasto; firma: NIP → Nazwa → …) — margines pod grupą zamiast row-gap, żeby nie rozsuwać tytułu, przełącznika „faktura na firmę” ani dopisku; [hidden] = display:none, więc bez podwójnego odstępu; ostatni rząd (Kod/Miasto, zawsze widoczny) bez marginesu - dopisek zostaje jak był */
  .NxKonf .NxKonf__nabywca > .NxKonf__wiersz { margin-bottom: var(--space-5, 16px); }
  .NxKonf .NxKonf__nabywca > [data-nxkonf-pole=NxKonfNabKod], .NxKonf .NxKonf__nabywca > [data-nxkonf-pole=NxKonfNabMiasto] { margin-bottom: 0; }
}

/* etap 756 (Przemek 14.10, Księga W-22): „Pokaż wszystkie szyby (N)” pod dwiema pierwszymi szybami listy - przycisk drugorzędny (jak NxKonf__przycisk),
   na środku listy, na telefonie pełna szerokość; ≥ 44 px. Ogłoszenie dla czytnika (NxKonf__sr) niewidoczne. */
.NxKonf .NxKonf__pokazWszystkieWrap { display: flex; justify-content: center; margin: var(--space-5) 0 0; }   /* 1116 (audyt DS Opus K9/K10/K11/K12) K10: odstęp nad przyciskiem 16 px (było 4); 1132 O1: bez dolnych 8 (przycisk → kreska stopki 24) */
.NxKonf .NxKonf__pokazWszystkie { min-height: 44px; padding: 10px 20px; font: inherit; font-size: var(--fs-body-sm); font-weight: 600; border: 1px solid var(--border-strong, var(--border)); border-radius: var(--radius-pill);
  background: var(--surface-card); color: var(--text-strong); cursor: pointer; }
.NxKonf .NxKonf__pokazWszystkie:hover { background: var(--surface-subtle); }
.NxKonf .NxKonf__pokazWszystkie:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media only screen and (max-width: 640px) { .NxKonf .NxKonf__pokazWszystkie { width: 100%; } }
.NxKonf .NxKonf__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.NxKonf .NxKonf__oferty > li[hidden] { display: none; }

/* etap 744: „Wyślij link ponownie” (ekrany „VIN zajęty” i K76) — pole jak DS (48 px, 16 px — bez powiększania na iPhonie) */
.NxKonf .NxKonf__linkPonow { margin: 16px 0; max-width: 440px; }
.NxKonf .NxKonf__linkPonow .szy-field__frame { min-height: 48px; margin: 4px 0 8px; }
.NxKonf .NxKonf__linkPonow .szy-field__control { width: 100%; min-height: 46px; font-size: var(--fs-body); }
.NxKonf .NxKonf__linkPonow .NxKonf__linkStan:empty { display: none; }
.NxKonf .NxKonf__linkPonow .NxKonf__linkStan:focus { outline: none; }

/* etap 811 (S2, 15.10; audyt Fable §3 „drobne” kroku 1, S0 14:25): nagłówek ekranu w skali DS 26 px (telefon 22 bez zmian, reguła wyżej);
   pasek kroków na telefonie w jednej linii: trzy kreski + „Krok N z 3 · Nazwa” (atrybut data-krok-tel z konfigurator.js, etapy()); bez atrybutu
   (teksty jeszcze niewczytane) - sama nazwa bieżącego kroku. Nazwy kroków zostają w DOM dla czytnika. Osobny blok na końcu pliku (807 S1 zmienia wcześniejsze reguły). */
@media (min-width: 641px) {
  .NxKonf .NxKonf__tresc .NxKonf__tytul, .NxKonf .NxKonf__krok > .NxKonf__naglowek, .NxKonf .NxKonf__krok:not(.NxKonf__krok--osadzony) > .NxKonf__awaria > .NxKonf__naglowek { font-size: var(--nxk-fs-naglowek, var(--fs-h2)); }   /* 1344: ze zmiennej .NxKonf (811 nadpisywał l. 72) */
}
@media (max-width: 640px) {
  .NxKonf .NxKonf__etapy { position: relative; padding-bottom: 38px; }
  .NxKonf .NxKonf__etap .NxKonf__etapNazwa { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
  .NxKonf .NxKonf__etapy:not([data-krok-tel]) .NxKonf__etap[aria-current="step"] .NxKonf__etapNazwa,
  .NxKonf .NxKonf__etapy[data-krok-tel]::after { position: absolute; left: 16px; right: 16px; bottom: 12px; width: auto; height: auto; clip: auto; margin: 0;
    font-size: var(--fs-body-sm); line-height: 1.3; font-weight: 700; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .NxKonf .NxKonf__etapy[data-krok-tel]::after { content: attr(data-krok-tel); content: attr(data-krok-tel) / ""; }   /* treść tylko wizualna - czytnik ma listę kroków */
  .NxKonf .NxKonf__oknoGora .NxKonf__etapy[data-krok-tel]::after,
  .NxKonf .NxKonf__oknoGora .NxKonf__etapy:not([data-krok-tel]) .NxKonf__etap[aria-current="step"] .NxKonf__etapNazwa { right: 4px; }
}

/* etap 799 (audyt konfiguratora 15.10, pakiet P2, opinia Fable): ekran „Dopasowanie automatyczne po numerze VIN” (krok-vin.js formularz()) jak buy box DS —
   najpierw cena i co dostaję (biała karta z kreską, kwota 26/700, korzyści z ✓), potem numer VIN jednym wierszem z drobnym drukiem (skąd numer, odbiorca VIN), e-mail;
   w stopce jedna czerwona akcja, alternatywa bezpłatna = odnośnik tekstowy (DS TextButton 14/600 muted, podkreślony, cel 44 px) obok CTA (nie flex: 1). */
.NxKonf .NxKonf__vinCena { margin: var(--space-2) 0 var(--space-5); padding: var(--space-5) var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-card); }
.NxKonf .NxKonf__vinCenaKwota { margin: 0 0 12px; line-height: 1.35; }
.NxKonf .NxKonf__vinCenaGrupa { white-space: nowrap; }
.NxKonf .NxKonf__vinCenaKwota strong { font-size: var(--fs-h2); line-height: 1; font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.NxKonf .NxKonf__vinCenaKwota span { font-size: var(--fs-body-sm); font-weight: 600; color: var(--text-muted); }
.NxKonf .NxKonf__vinCenaLista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.NxKonf .NxKonf__vinCenaLista li { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: var(--fs-body-sm); line-height: 1.5; color: var(--text-body); }
.NxKonf .NxKonf__vinCenaIkona { flex: none; margin-top: 3px; color: var(--success); }
.NxKonf .NxKonf__vinNumer { margin: 0 0 16px; }
.NxKonf .NxKonf__vinNumerWiersz { margin: 0 0 2px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: var(--fs-body-sm); line-height: 1.5; color: var(--text-strong); }
.NxKonf .NxKonf__vinNumerWiersz strong { font-family: var(--font-mono); letter-spacing: .02em; }
.NxKonf .NxKonf__vinNumerWiersz .NxKonf__link { font-size: var(--fs-body-sm); }
.NxKonf .NxKonf__vinNumer .NxKonf__drobny { margin: 0; }
.NxKonf .NxKonf__vinNumer .NxKonf__drobny + .NxKonf__drobny { margin-top: 4px; }
.NxKonf .NxKonf__stopka--vin .NxKonf__przyciski .NxKonf__przycisk--dodatkowy { height: auto; min-height: 44px; padding: 0 8px; border-color: transparent; background: none; box-shadow: none;
  font-size: var(--fs-body-sm); font-weight: 600; color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; white-space: normal; }
.NxKonf .NxKonf__stopka--vin .NxKonf__przyciski .NxKonf__przycisk--dodatkowy:hover { background: none; border-color: transparent; color: var(--red-500); }
@media (min-width: 641px) {
  .NxKonf .NxKonf__stopka--vin .NxKonf__przycisk--dodatkowy { flex: none; align-self: center; margin-left: auto; }
  .NxKonf .NxKonf__stopka--vin .NxKonf__przycisk--dodatkowy + .NxKonf__przycisk--glowny { margin-left: 0; }
}
/* etap 747b: formularz „Wyślij zapytanie o szybę” w ekranie wyniku VIN (brak_w_sklepie) — pola DS szy-field jak 744, jedna kolumna, przycisk ≥ 44 px */
.NxKonf .NxKonf__zapytanie { margin: 16px 0; max-width: 520px; }
.NxKonf .NxKonf__zapDane { list-style: none; margin: 0 0 12px; padding: 0; }
.NxKonf .NxKonf__zapDane li { margin: 0 0 4px; overflow-wrap: anywhere; }
.NxKonf .NxKonf__zapPole { margin: 0 0 12px; }
.NxKonf .NxKonf__zapPole .NxKonf__podpowiedz { margin: 2px 0 0; }
.NxKonf .NxKonf__zapPole .szy-field__frame { min-height: 48px; margin: 4px 0 4px; }
.NxKonf .NxKonf__zapPole .szy-field__control { width: 100%; min-height: 46px; font-size: var(--fs-body); box-sizing: border-box; }
.NxKonf .NxKonf__zapPole .NxKonf__zapUwagi { min-height: 96px; resize: vertical; padding-top: 10px; padding-bottom: 10px; line-height: 1.4; font-family: inherit; }
.NxKonf .NxKonf__zapPulapka { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.NxKonf .NxKonf__zapAkcja { margin: 8px 0; }
.NxKonf .NxKonf__zapWyslij { min-height: 44px; min-width: 180px; padding: 10px 24px; background: var(--cta-bg); color: var(--cta-text); border-color: transparent; box-shadow: var(--shadow-xs); }   /* czerwony CTA jak główny w stopce */
.NxKonf .NxKonf__zapWyslij:hover:not([disabled]) { background: var(--cta-bg-hover); box-shadow: var(--shadow-sm); }
.NxKonf .NxKonf__zapytanie .NxKonf__blad:focus { outline: none; }
@media (max-width: 640px) { .NxKonf .NxKonf__zapWyslij { width: 100%; } }
/* 813: „Napisz na czacie” poza godzinami infolinii ukryty - hidden wygrywa z display przycisków kontaktu */
.NxKonf [data-nxkonf-czat][hidden], #NxKonf [data-nxkonf-czat][hidden] { display: none !important; }

/* etap 820 (S2, Przemek 15.10 17:15 „Do poprawy.” — ekran „Chcę naprawić uszkodzenie szyby”): (1) okno bez paska kroków (naprawa) - bez pustego paska z linią
   nad tytułem, X w prawym górnym rogu w rzędzie z tytułem (ten sam przycisk 44 px co w innych krokach); (2) numer sklepu nigdy nie łamany (konfigurator.js el()). */
.NxKonf__okno .NxKonf__tel, .NxKonf .NxKonf__tel { white-space: nowrap; }
.NxKonf__okno--bezEtapow .NxKonf__oknoGora { height: 0; border-bottom: 0; background: transparent; justify-content: flex-end; overflow: visible; }
.NxKonf__okno--bezEtapow .NxKonf__oknoZamknij { margin-top: 20px; }
.NxKonf__okno--bezEtapow .NxKonf__krok > .NxKonf__naglowek, .NxKonf__okno--bezEtapow .NxKonf__krok:not(.NxKonf__krok--osadzony) > .NxKonf__awaria > .NxKonf__naglowek { padding-right: 56px; }   /* 1021: awaria kroku w oknie (W-52) jak nagłówek kroku */
@media (max-width: 640px) {
  .NxKonf__okno--bezEtapow .NxKonf__oknoZamknij { margin-top: 12px; }
}
/* 820: włączony krok naprawy ma własny pasek „1 Usługa / 2 Uszkodzenie / 3 Warsztat i termin” u góry treści - miejsce na X po prawej */
.NxKonf__okno--bezEtapow [data-nxkonf-krok=naprawa] .NxKonf__etapyNaprawy .NxKonf__etapy { padding-right: 76px; }
@media (max-width: 640px) {
  .NxKonf__okno--bezEtapow [data-nxkonf-krok=naprawa] .NxKonf__etapyNaprawy .NxKonf__etapy { padding-right: 60px; }
  .NxKonf .NxKonf__okno--bezEtapow [data-nxkonf-krok=naprawa] .NxKonf__etapyNaprawy .NxKonf__etap .NxKonf__etapNazwa { right: 60px; }   /* jedna linia nazwy (811) kończy się przed X */
}
/* 807c (Przemek P-065): „Uzupełnij dane pojazdu” (nieaktywny, szary DS) → „Tak, to moje auto” (czerwony) - oba napisy w jednej komórce (bez skoku szerokości) */
.NxKonf .NxKonf__przyciski .NxKonf__przycisk--bramka { transition: background-color 220ms var(--ease-out, ease-out), color 220ms var(--ease-out, ease-out), box-shadow 220ms var(--ease-out, ease-out); }
.NxKonf .NxKonf__napisy { display: inline-grid; }
.NxKonf .NxKonf__napis { grid-area: 1 / 1; align-self: center; text-align: center; transition: opacity 220ms var(--ease-out, ease-out), transform 220ms var(--ease-out, ease-out); }
.NxKonf .NxKonf__przycisk--bramka .NxKonf__napis--uzup { opacity: 0; transform: translateY(4px); }
.NxKonf .NxKonf__przycisk--bramka.is-nieaktywny .NxKonf__napis--tak { opacity: 0; transform: translateY(-4px); }
.NxKonf .NxKonf__przycisk--bramka.is-nieaktywny .NxKonf__napis--uzup { opacity: 1; transform: none; }
.NxKonf .NxKonf__przyciski .NxKonf__przycisk--bramka.is-nieaktywny, .NxKonf .NxKonf__przyciski .NxKonf__przycisk--bramka.is-nieaktywny:hover { background: var(--surface-sunken); border-color: var(--surface-sunken); color: var(--text-muted); box-shadow: none; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .NxKonf .NxKonf__przyciski .NxKonf__przycisk--bramka, .NxKonf .NxKonf__napis { transition: none; } }
/* 846 (844 bezpiecznik kamery): odpowiedź Tak / Nie na ekranie „Najpierw ustalmy, czy auto ma kamerę” (A2) i „Jak rozpoznać kamerę?” */
/* 1132 O9: ten sam przycisk .NxKonf__jak (ujemne -12, wyżej) w obudowie kamery — opis → odnośnik 22 (było 20 + 4 + 12), odnośnik → Tak / Nie 24 (16 + 8 .NxKonf__kameraOdp; było 12 + 8 + 8);
   rozwinięte „gdzie szukać” 12 pod odnośnikiem, bez dolnego (8 + 16 + 8 dawałoby 32). Pole dotyku kończy się 12 px pod tekstem, przyciski zaczynają 24 px pod nim — bez nakładania */
.NxKonf .NxKonf__kameraJak { margin: 0 0 var(--space-5); }
.NxKonf .NxKonf__jak + .NxKonf__kameraGdzie { margin: var(--space-4) 0 0; }
.NxKonf .NxKonf__kameraOdp { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); margin: 8px 0 16px; }   /* 1132 O4: w rzędzie 12, między rzędami 8 (było 10) */
.NxKonf .NxKonf__kameraOdp .NxKonf__przycisk { min-width: 120px; min-height: 48px; }
.NxKonf .NxKonf__kameraGdzie { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 0 8px; }
.NxKonf .NxKonf__kameraGdzie[hidden] { display: none; }
.NxKonf .NxKonf__kameraGdzie .NxKonf__gdzie { flex: 1 1 260px; margin: 0; }
.NxKonf .NxKonf__kameraGdzie .NxKonf__ilustracja { flex: 0 0 auto; width: 160px; }
.NxKonf .NxKonf__kameraZdj { flex: 0 0 auto; width: 320px; max-width: 100%; margin: 0; }
.NxKonf .NxKonf__kameraZdj { width: 240px; }
.NxKonf .NxKonf__kameraSvg { display: block; width: 100%; height: auto; }
/* 961 (Przemek 17.10 17:17: krok 1 jak przed 908): blok §908-A1 (lead, przełącznik metod, „Znajdź auto” pod tablicą na każdej szerokości, odstępy startu) usunięty */
/* §908-A5 (S1): na telefonie „Wróć” = sama strzałka w polu 44×44 (napis dla czytnika), przycisk główny bierze resztę rzędu - krótsze napisy
   bez łamania; na komputerze bez zmian (strzałka + napis). Stopka bez „Krok N z 3” (konfigurator.js stopka(), start.php). */
.NxKonf .NxKonf__krokZ { display: none; }
.NxKonf .NxKonf__start .NxKonf__krokZ { display: block; }   /* 961: „Krok 1 z 3” w stopce startu jak przed 908 (start.php) */
@media (max-width: 640px) {
  .NxKonf .NxKonf__stopka .NxKonf__przyciski .NxKonf__przycisk--wroc { order: 3; flex: none; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .NxKonf .NxKonf__stopka:not(:has(.NxKonf__przycisk--glowny)) .NxKonf__przyciski:has(> .NxKonf__przycisk--wroc) .NxKonf__przycisk--wroc { padding: 0; }
  .NxKonf .NxKonf__przycisk--wroc .NxKonf__wrocTekst { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .NxKonf .NxKonf__przycisk--wroc svg { margin: 0; }
  .NxKonf .NxKonf__stopka .NxKonf__przyciski .NxKonf__przycisk--glowny { flex: 1 1 0; }
}
/* §908-A7 (S1) DS: przyciski w OKNIE = Button lg 44/14 (700, padding 0 24); xl 48/16 tylko na stronie (start). Pismo i kolory wyżej = tokeny skali DS
   (AUDYT-FABLE §2.19: 15→14/16, 24→22, 28→26, 12→13; heksy → --ink/--warning-bg/--danger-bg; tablica PL = wyjątek DS). */
.NxKonf__okno .NxKonf__przyciski .NxKonf__przycisk { height: 44px; min-height: 44px; padding: 0 24px; font-size: var(--fs-ui); }
@media (max-width: 640px) { .NxKonf__okno .NxKonf__przyciski .NxKonf__przycisk { height: auto; min-height: 44px; padding: 12px 20px; } }
/* §908-A8 (S1) mikrointerakcje wg DS (AUDYT-FABLE §2.19 „Ruch”, ChatGPT: przejścia 180 ms): zaznaczenie odpowiedzi/segmentu 180 ms, pasek postępu
   wypełnia się od lewej (300 ms) przy zmianie kroku, wciśnięcie przycisku = scale(0.98) jak DS Button. Tylko bez „ogranicz ruch”. */
.NxKonf__etapPasek { position: relative; overflow: hidden; }
.NxKonf__etap[aria-current="step"] .NxKonf__etapPasek, .NxKonf__etap.is-zrobiony .NxKonf__etapPasek { background: var(--border); }
.NxKonf__etapPasek::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left center; }
.NxKonf__etap[aria-current="step"] .NxKonf__etapPasek::after, .NxKonf__etap.is-zrobiony .NxKonf__etapPasek::after { transform: scaleX(1); }
@media (forced-colors: active) { .NxKonf__etapPasek::after { background: CanvasText; } }
@media (prefers-reduced-motion: no-preference) {
  .NxKonf__etapPasek::after { transition: transform 300ms var(--ease-out); }
  .NxKonf .NxKonf__odp, .NxKonf .NxKonf__metoda, .NxKonf .NxKonf__radio { transition: border-color 180ms var(--ease-out), background-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out); }
  .NxKonf .NxKonf__przycisk { transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform 120ms var(--ease-out); }
  .NxKonf .NxKonf__przycisk:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(0.98); }
}
/* §908-B3 (S1, Przemek P-279; AUDYT-CHATGPT „zwarty wiariant mobilny”): na telefonie karta szyby w konfiguratorze ZWARTA - zdjęcie (88 px) obok nazwy
   i cech, pod spodem jeden rząd: dostępność nad ceną | przycisk. Tylko w konfiguratorze (karty-v3.css listingów bez zmian); eurocode zostaje na karcie (Księga). */
@media (max-width: 640px) {
  .NxKonf .NxKonf__ofertyWrap .NxKonf__oferty .NxKarta--lista { display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-areas: "foto tresc" "prawa prawa"; }
  .NxKonf .NxKonf__ofertyWrap .NxKonf__oferty .NxKarta--lista .NxKarta__lfoto { grid-area: foto; align-self: start; height: auto; min-width: 0; padding: var(--space-4) 0 0 var(--space-4); border: 0; background: none; }
  .NxKonf .NxKonf__ofertyWrap .NxKonf__oferty .NxKarta--lista .NxKarta__img { max-height: 56px !important; width: 100% !important; }
  .NxKonf .NxKonf__ofertyWrap .NxKonf__oferty .NxKarta--lista .NxKarta__glif { width: 100% !important; height: auto !important; max-height: 48px; }
  .NxKonf .NxKonf__ofertyWrap .NxKonf__oferty .NxKarta--lista .NxKarta__ltresc { grid-area: tresc; min-width: 0; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-3) var(--space-4); }
  .NxKonf .NxKonf__ofertyWrap .NxKonf__oferty .NxKarta--lista .NxKarta__h3 { font-size: var(--fs-body); line-height: 1.3; }
  .NxKonf .NxKonf__ofertyWrap .NxKonf__oferty .NxKarta--lista .NxKarta__chipy { margin-top: 0; gap: var(--space-3) var(--space-5); }
  .NxKonf .NxKonf__ofertyWrap .NxKonf__oferty .NxKarta--lista .NxKarta__lprawa { grid-area: prawa; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "dost cta" "cena cta"; align-items: center; column-gap: var(--space-4); row-gap: 0; min-width: 0; padding: var(--space-3) var(--space-4) var(--space-4); border-left: 0; border-top: 1px solid var(--border-subtle); }
  .NxKonf .NxKonf__ofertyWrap .NxKonf__oferty .NxKarta--lista .NxKarta__lprawa .NxDostepnosc { grid-area: dost; }
  .NxKonf .NxKonf__ofertyWrap .NxKonf__oferty .NxKarta--lista .NxKarta__lprawa .NxCena { grid-area: cena; }
  .NxKonf .NxKonf__ofertyWrap .NxKonf__oferty .NxKarta--lista .NxKarta__lprawa .NxKarta__cta { grid-area: cta; margin: 0; }
  .NxKonf .NxKonf__ofertyWrap .NxKonf__oferty .NxKarta--lista .NxKarta__lprawa .NxKarta__cta .NxBtn { white-space: nowrap; }
}
/* §908-A8b (S1): ładowanie w przycisku (DS Button loading: kółko 16 px w kolorze napisu, napis ukryty, szerokość bez zmian, bez klikania) */
.NxKonf .NxKonf__przycisk[aria-busy="true"] { position: relative; color: transparent !important; pointer-events: none; }
.NxKonf .NxKonf__przycisk[aria-busy="true"]::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; box-sizing: border-box; border: 2px solid var(--cta-text); border-right-color: transparent; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) { .NxKonf .NxKonf__przycisk[aria-busy="true"]::after { animation: nxKonfObrot 0.8s linear infinite; } }
/* §917 (S1, D18) szkielet ofert: tylko obok PUSTEGO kroku ofert w trakcie ładowania (gdy krok dostanie treść albo awarię - znika bez JS);
   kształt = karta listy (zdjęcie 208 | treść | prawa 232), ≤640 = zwarta karta B3; tło --surface-sunken, promienie DS; pojawia się po 150 ms. */
.NxKonf .NxKonf__szkielet { display: none; }
.NxKonf .NxKonf__krok[data-nxkonf-krok="oferty"][aria-busy="true"]:empty + .NxKonf__szkielet { display: block; animation: nxKonfSzkPokaz 1ms linear 150ms both; }
@keyframes nxKonfSzkPokaz { from { visibility: hidden; } to { visibility: visible; } }
.NxKonf .NxKonf__szkTekst { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.NxKonf .NxKonf__szkPas { display: block; height: 14px; border-radius: var(--radius-sm); background: var(--surface-sunken); }
.NxKonf .NxKonf__szkPas--tytul { width: min(360px, 70%); height: 28px; margin: 0 0 var(--space-4); }
.NxKonf .NxKonf__szkPas--wiersz { width: min(280px, 60%); height: 36px; margin: 0 0 var(--space-6); border-radius: var(--radius-pill); }
.NxKonf .NxKonf__szkKarta { display: flex; margin: 0 0 var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); overflow: hidden; }
.NxKonf .NxKonf__szkFoto { flex: 0 0 208px; height: 150px; margin: var(--space-5); border-radius: var(--radius-md); background: var(--surface-sunken); }
.NxKonf .NxKonf__szkTresc { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); min-width: 0; }
.NxKonf .NxKonf__szkPas--nazwa { width: 85%; height: 18px; }
.NxKonf .NxKonf__szkPas--nazwa2 { width: 55%; height: 18px; }
.NxKonf .NxKonf__szkPas--chip { width: 140px; height: 26px; border-radius: var(--radius-pill); }
.NxKonf .NxKonf__szkPas--kod { width: 180px; }
.NxKonf .NxKonf__szkPrawa { flex: 0 0 232px; display: flex; flex-direction: column; justify-content: center; gap: var(--space-4); padding: var(--space-5); border-left: 1px solid var(--border-subtle); box-sizing: border-box; }
.NxKonf .NxKonf__szkPas--cena { width: 110px; height: 30px; }
.NxKonf .NxKonf__szkPas--przycisk { width: 100%; height: 44px; border-radius: var(--radius-pill); }
@media (max-width: 640px) {
  .NxKonf .NxKonf__szkKarta { display: grid; grid-template-columns: 88px minmax(0, 1fr); }
  .NxKonf .NxKonf__szkFoto { width: 76px; height: 56px; margin: var(--space-4) 0 0 var(--space-4); }
  .NxKonf .NxKonf__szkTresc { padding: var(--space-4); gap: var(--space-3); }
  .NxKonf .NxKonf__szkPrawa { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4) var(--space-4); border-left: 0; border-top: 1px solid var(--border-subtle); }
  .NxKonf .NxKonf__szkPas--przycisk { width: 150px; }
}
@media (prefers-reduced-motion: no-preference) {
  .NxKonf .NxKonf__szkPas, .NxKonf .NxKonf__szkFoto { background: linear-gradient(90deg, var(--surface-sunken) 0%, var(--surface-subtle) 50%, var(--surface-sunken) 100%) 0 0 / 200% 100%; animation: nxKonfSzkPolysk 1.4s ease-in-out infinite; }
}
@keyframes nxKonfSzkPolysk { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (forced-colors: active) { .NxKonf .NxKonf__szkPas, .NxKonf .NxKonf__szkFoto { background: GrayText; } }

/* etap 915 (D22, S5): karta „Szukasz szyby do tego auta?” na ekranie startu — tylko tokeny DS (karta jak „Czy to Twoje auto?”) */
.NxKonf__zapamietane { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); margin: 0 0 var(--space-4); }
.NxKonf__zapamietane[hidden] { display: none; }
.NxKonf__zapamietaneTytul { margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 600; color: var(--text-strong); }
.NxKonf__zapamietaneAuto { margin: 0 0 var(--space-3); font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
.NxKonf__zapamietane .NxKonf__drobny { margin: 0 0 var(--space-4); color: var(--text-muted); }
.NxKonf .NxKonf__zapamietane .NxKonf__przyciski { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--space-3); margin: 0; }
.NxKonf .NxKonf__zapamietane .NxKonf__przycisk--glowny { order: 1; width: 100%; }
.NxKonf .NxKonf__zapamietane .NxKonf__przycisk--link { order: 2; align-self: center; border-color: transparent; background: none; }
@media (min-width: 640px) {
  .NxKonf .NxKonf__zapamietane .NxKonf__przyciski { flex-direction: row; align-items: center; }
  .NxKonf .NxKonf__zapamietane .NxKonf__przycisk--glowny { width: auto; }
}
/* ============================================================
   §961 (S9, Przemek 17.10 17:17: „krok 1 konfiguratora ma wyglądać tak, jak poprzednio. Reszta tak, jak po zmianach”): blok §929 (układ C3,
   podpowiedź w polu) usunięty; tu tylko to, czym 908 zmienił krok 1 poza tymi blokami - wartości sprzed 908 (main a458a67a4), zakres .NxKonf__start:
   - karty metody: reguła 908-A2 dla .NxKonf__metody (ekran K18 w oknie: jedna kolumna, max 640, odstęp nad) trafiała też w karty startu
     („NxKonf__karty NxKonf__metody”) - na starcie siatka i odstępy jak przed 908;
   - opis karty 15 px, nagłówki grup listy marek 12 px, ramka błędów 15 px (908-A7 zamienił je na tokeny 14 / 13 / 14).
   Świadomie zostaje: rezerwa 412c (42 px) w polach z „×”/„⌄” - poprawka błędu (wpisany rok pod „×”), ramki pól bez zmian, tekst pola o 4 px węższy.
   Wzorzec: pomiar960 --a11y pakiet z a458a67a4 ↔ pakiet 961 (stan/etapy/961-krok1-jak-przed/pomiar). Kroki 2-3 bez zmian.
   ============================================================ */
.NxKonf .NxKonf__start .NxKonf__metody { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 4px; max-width: none; }
@media (max-width: 640px) { .NxKonf .NxKonf__start .NxKonf__metody { grid-template-columns: minmax(0, 1fr); } }
.NxKonf .NxKonf__start .NxKonf__kartaOpis { font-size: 15px; }
.NxKonf .NxKonf__start .NxKonf__komboGrupa { font-size: 12px; }
.NxKonf .NxKonf__start .NxKonf__ramka { font-size: 15px; }   /* ramka błędów „Uzupełnij…” trybu ręcznego: 15 px jak przed 908 (908-A7: 14) */
/* etap 1015 (Przemek 19.10): lista „Jaka to szyba?” w formularzu K15 - strzałka jak sortowanie listingu (listing-v3.css), cel 44 px, tekst 16 px (iOS bez powiększania) */
.NxKonf .NxKonf__zglForm select.NxKonf__pole { width: 100%; padding-right: 40px; font-family: var(--font-body); font-size: 16px; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23676767' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; }
/* etap 1019 (macierz S7 19.10, USTERKI #1: W-09/10/20/23/24/27/35): okno kroków na komputerze/tablecie - stopka (Razem / Wróć / przycisk główny)
   przyklejona do dolnej krawędzi okna jak na telefonie (≤ 640, wyżej); dotąd przy dłuższej treści (pakiet z warsztatem) przycisk główny chował się
   pod krawędzią okna 1280×900. Tło od brzegu do brzegu okna (cień 100vmax przycięty clip-path do wysokości stopki, poza oknem tnie overflow okna) -
   także gdy stopka stoi w węższym formularzu (.NxKonf__zgl max 640 px); linia nad stopką na szerokość treści jak dotąd. */
@media (min-width: 641px) {
  .NxKonf__okno .NxKonf__oknoTresc .NxKonf__stopka { position: sticky; bottom: 0; z-index: 2; background: var(--surface-card);
    box-shadow: 0 0 0 100vmax var(--surface-card); -webkit-clip-path: inset(0 -100vmax); clip-path: inset(0 -100vmax); }
}
/* etap 1025 (S5, przegląd wyglądu WYGLAD-19-10, pozycje C): (1) telefon - pasek odpowiedzi nad listą szyb przewijany w bok wygasa przy prawej krawędzi
   (widać, że jest więcej), a zapas na końcu pozwala ostatniej pigułce wyjść spoza wygaszenia (W-16); R2 (przegląd R1 B1): przy przejściu klawiaturą (fokus widoczny
   w pasku) pigułki zawijają się w wiersze bez wygaszenia - każda z pełnym pierścieniem fokusu, bez przewijania w bok; (2) „Zmień auto” przy aucie w oknie pomocy
   w jednym wierszu (W-10 375). R2 (B2): ikona „i” zostaje przy prawej krawędzi karty jak w DS (przesunięta w lewo ucinała dymek przy lewej krawędzi ekranu) */
@media (max-width: 640px) {
  .NxKonf .NxKonf__odpChipy:has(.NxKonf__odpChip + .NxKonf__odpChip) { padding-right: 32px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
  .NxKonf .NxKonf__odpChipy:has(.NxKonf__odpChip + .NxKonf__odpChip):has(:focus-visible) { flex-wrap: wrap; overflow-x: visible; padding-right: 0; -webkit-mask-image: none; mask-image: none; }
}
.NxKonf .NxKonf__auto > .NxKonf__link { flex: none; white-space: nowrap; }
/* etap 1029 (S5, przegląd wyglądu WYGLAD-19-10, pozycje C, cz. 2): (1) krok 1 „Ręcznie” na komputerze (5 pól w rzędzie, od 1101 px) - podpowiedź
   „Wybierz lub wpisz” ucinana o 3 px („Wybierz lub wpi…”, W-07). R2 (przegląd R1 B2: rozmiar pisma pól = DS --fs-field 16 px, bez wyjątków): węższa kolumna
   roku (krótka wartość, „np. 2018”; R3: .5fr, min. 96 px - przy 1101 px siatka 907 px, listy po 191 px, rok z „×” mieści „2018”) i szersze cztery listy; (2) „Czy to Twoje auto?” z listą nadwozia
   albo roku (tablica: brak nadwozia / rok niepewny; W-05) - od 901 px (R2, B3: tablet poziomy W-03) kolumny wg treści, etykiety kafli bez łamania, ramka listy
   nadwozia >= 232 px, roku >= 150 px; obie listy naraz (R2, B1) = kafle 2 × 2 (w 694 px nie mieszczą się 4 kolumny z dwiema listami). Telefon i do 900 px bez zmian. */
@media (min-width: 1101px) {
  .NxKonf .NxKonf__siatka { grid-template-columns: minmax(96px, .5fr) repeat(4, minmax(0, 1fr)); }
  .NxKonf .NxKonf__siatka--bezGeneracji { grid-template-columns: minmax(96px, .5fr) repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 901px) {
  .NxKonf .NxKonf__dane.NxKonf__dane--auto:is(:has(> .NxKonf__daneNad), :has(> .NxKonf__daneRok)) { grid-auto-columns: auto; }   /* kolumny wg treści, nadmiar po równo */
  .NxKonf .NxKonf__dane.NxKonf__dane--auto:is(:has(> .NxKonf__daneNad), :has(> .NxKonf__daneRok)) dt { white-space: nowrap; }   /* „Numer rejestracyjny” w jednym wierszu */
  .NxKonf .NxKonf__dane > .NxKonf__daneNad .szy-field__frame { min-width: 232px; }
  .NxKonf .NxKonf__dane > .NxKonf__daneRok .szy-field__frame { min-width: 150px; }
  .NxKonf .NxKonf__dane.NxKonf__dane--auto:has(> .NxKonf__daneNad):has(> .NxKonf__daneRok) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .NxKonf .NxKonf__dane.NxKonf__dane--auto:has(> .NxKonf__daneNad):has(> .NxKonf__daneRok) > div:nth-child(odd) { border-left: 0; }
  .NxKonf .NxKonf__dane.NxKonf__dane--auto:has(> .NxKonf__daneNad):has(> .NxKonf__daneRok) > div:nth-child(n+3) { border-top: 1px solid var(--border); }
}
/* etap 1034 (Przemek, mapa p-20261019-162858-939, W-07): „Najpierw wpisz rok.” / „Najpierw wybierz markę.” / … / „Brak aut dla tego rocznika w katalogu.” jako tekst W POLU
   (szary, ten sam krój i rozmiar co podpowiedź „Wybierz lub wpisz”), nie wiersz pod polem; do 2 linii - pełny tekst także w wąskim polu na komputerze (5 pól w rzędzie, ok. 150 px);
   omija „×”/strzałkę (rezerwa 42 px jak 412c); znika, gdy klient wpisze tekst */
.NxKonf .NxKonf__ramkaPodp .NxKonf__podpWPolu { position: absolute; left: 13px; right: 42px; top: 50%; transform: translateY(-50%); margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.2;
  color: var(--text-muted); pointer-events: none; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* R2 (B2): znika, gdy pole ma wartość (placeholder = spacja, więc :placeholder-shown = puste pole) - niezależnie od sposobu zmiany wartości */
.NxKonf .NxKonf__ramkaPodp:has(.szy-field__control:not(:placeholder-shown)) .NxKonf__podpWPolu { display: none; }
/* R2 (B1): gdy tekst nie mieści się w 2 liniach - mniejszy krój (do 3 linii w polu 48 px) */
.NxKonf .NxKonf__ramkaPodp .NxKonf__podpWPolu--maly { font-size: var(--fs-meta); line-height: 1.2; -webkit-line-clamp: 3; }
/* etap 1036 (S5; przegląd wyglądu S1 19.10 LISTA poz. 3, W-35): pola formularzy kroku VIN (.NxKonf__pole: VIN, e-mail, dane do faktury, link, zapytanie)
   z błędem walidacji (aria-invalid="true" ustawia JS razem z komunikatem pod polem i listą „Sprawdź zaznaczone pola”) miały zwykłą szarą ramkę —
   lista mówiła o „zaznaczonych” polach, a żadne nie było zaznaczone. Ramka --danger jak DS (.szy-field__frame[data-error]); błąd wygrywa z fokusem
   (DS: [data-error] po :focus-within), pierścień fokusu klawiatury zostaje. */
.NxKonf .NxKonf__pole[aria-invalid="true"], .NxKonf .NxKonf__pole[aria-invalid="true"]:focus, .NxKonf .NxKonf__pole[aria-invalid="true"]:hover { border-color: var(--danger, var(--red-600)); }
/* R2 (przegląd R1 B1): pola DS w ramce (.szy-field__frame > .szy-field__control) — link ponownie (krok-vin-platnosc formularzLinku) i zapytanie (telefon, uwagi)
   ustawiają aria-invalid na kontrolce, bez data-error na ramce: ramka --danger wg stanu kontrolki (pola z data-error — już --danger, bez zmian) */
.NxKonf .szy-field__frame:has(> .szy-field__control[aria-invalid="true"]), .NxKonf .szy-field__frame:has(> .szy-field__control[aria-invalid="true"]):focus-within { border-color: var(--danger, var(--red-600)); }
/* etap 1102 (P-557 A + uwaga Przemka „Niech pole telefonu nie będzie takie szerokie.”; DS Podstawy 2 / tokens/base.css .szy-field__frame):
   płatny VIN — dane do faktury i telefon (klasa NxKonf__poleStan nadawana w krok-vin-platnosc.js tylko w wariancie płatnym; bezpłatny 962 bez zmian):
   puste i bez fokusu szare (--surface-subtle), wypełnione albo z fokusem białe; ramka --border-input (DS; --border #E9E9E9 dawał 1,1:1 do szarego), fokus — ramka --ink
   (DS :focus-within). Stan pusty = :placeholder-shown (placeholder " "), więc działa też przy wartościach wstawianych kodem (odczyt NIP, zmiana rodzaju) i autouzupełnianiu.
   Błąd (aria-invalid, etap 1036: ramka --danger) wygrywa — reguły ramki z :not([aria-invalid="true"]). Telefon: szerokość na numer (240 px; najdłuższy dopuszczalny
   „+000 000 000 000 000” ok. 186 px tekstu), nie na całą kolumnę. */
.NxKonf .NxKonf__poleStan { transition: background-color var(--dur-base, 200ms) var(--ease-out, ease-out), border-color var(--dur-base, 200ms) var(--ease-out, ease-out); }
.NxKonf .NxKonf__poleStan:not([aria-invalid="true"]) { border-color: var(--border-input); }
.NxKonf .NxKonf__poleStan:not([aria-invalid="true"]):focus { border-color: var(--ink); }
.NxKonf .NxKonf__poleStan:placeholder-shown:not(:focus) { background-color: var(--surface-subtle); }
.NxKonf #NxKonfVinTel.NxKonf__poleStan { width: 100%; max-width: 240px; box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) { .NxKonf .NxKonf__poleStan { transition: none; } }
/* etap 1103 (Przemek P-558 = A, 20.10 09:1x; prototyp grube-B z audytu DS 1063 nr 06): niższa stopka konfiguratora na telefonie — 2 rzędy zamiast 3 (167 → 125 px).
   Rząd 1: „Zmień auto” (lewa) + „Razem <kwota>” (prawa, kwota bez zmniejszania); rząd 2: Wróć (44×44) + przycisk główny — jak dziś.
   R2 (przegląd R1 B1): układ elastyczny zamiast siatki — gdy kwota z „Zmień auto” nie mieszczą się w jednym rzędzie (tekst powiększony do 200%, długa kwota),
   suma schodzi pod „Zmień auto” (do prawej) zamiast na nią nachodzić; podział przed rzędem 2 wymusza ::after (pełna szerokość, kolejność 2).
   Tylko stopka z sumą, przyciskiem tekstowym, Wróć i głównym (bez dodatkowego); inne stopki i komputer bez zmian. Napisy i akcje bez zmian, cele ≥ 44 px. */
@media (max-width: 640px) {
  .NxKonf .NxKonf__stopka--suma .NxKonf__przyciski:has(> .NxKonf__suma):has(> .NxKonf__przycisk--tekst):has(> .NxKonf__przycisk--wroc):has(> .NxKonf__przycisk--glowny):not(:has(> .NxKonf__przycisk--dodatkowy)) {
    display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-4); row-gap: 0; }   /* 1132 O4: 10 → 12 w rzędzie; rzędy nadal przez margin-top 8 — wysokość paska bez zmian */
  .NxKonf .NxKonf__stopka--suma .NxKonf__przyciski:has(> .NxKonf__suma):has(> .NxKonf__przycisk--tekst):has(> .NxKonf__przycisk--wroc):has(> .NxKonf__przycisk--glowny):not(:has(> .NxKonf__przycisk--dodatkowy))::after { content: ""; order: 2; flex: 0 0 100%; height: 0; }
  .NxKonf .NxKonf__stopka--suma .NxKonf__przyciski:has(> .NxKonf__suma):has(> .NxKonf__przycisk--tekst):has(> .NxKonf__przycisk--wroc):has(> .NxKonf__przycisk--glowny):not(:has(> .NxKonf__przycisk--dodatkowy)) > .NxKonf__przycisk--tekst {
    order: 0; flex: 0 0 auto; width: auto; min-height: 44px; padding: 0; justify-content: flex-start; text-align: left; }
  .NxKonf .NxKonf__stopka--suma .NxKonf__przyciski:has(> .NxKonf__suma):has(> .NxKonf__przycisk--tekst):has(> .NxKonf__przycisk--wroc):has(> .NxKonf__przycisk--glowny):not(:has(> .NxKonf__przycisk--dodatkowy)) > .NxKonf__suma {
    order: 1; flex: 1 0 auto; margin-left: auto; min-width: 0; max-width: 100%; min-height: 44px; flex-direction: row; flex-wrap: wrap; align-items: baseline;
    align-content: center; justify-content: flex-end; column-gap: 8px; text-align: right; }
  .NxKonf .NxKonf__stopka--suma .NxKonf__przyciski:has(> .NxKonf__suma):has(> .NxKonf__przycisk--tekst):has(> .NxKonf__przycisk--wroc):has(> .NxKonf__przycisk--glowny):not(:has(> .NxKonf__przycisk--dodatkowy)) > .NxKonf__przycisk--wroc { order: 3; margin-top: 8px; }
  .NxKonf .NxKonf__stopka--suma .NxKonf__przyciski:has(> .NxKonf__suma):has(> .NxKonf__przycisk--tekst):has(> .NxKonf__przycisk--wroc):has(> .NxKonf__przycisk--glowny):not(:has(> .NxKonf__przycisk--dodatkowy)) > .NxKonf__przycisk--glowny { order: 4; flex: 1 1 0; width: auto; margin-top: 8px; }
}
/* etap 1117 (AUDYT-opus 1110 K1 K2 K6 K7 K8; DS Podstawy 1 — skala 16/14/13, Podstawy 2 — podpowiedź pod polem): ekran płatnego sprawdzenia VIN (06e = ekran K58,
   krok-vin-platnosc.js: ekran() ustawia data-nxkonf-ekran="K58" na kroku — ten sam wzorzec co K60/K63 wyżej). Zawężenie [data-nxkonf-ekran="K58"], bo klasy
   __podpowiedz / __drobny / __email / __cena / __dane występują też na innych ekranach (krok-naprawa, krok-vin, krok-zdjecia, krok-tablica, zapytanie W-40,
   zapamiętane) — tam bez zmian. Wariant bezpłatny 962 (.NxKonf[data-vin-bezplatnie="1"]) rysuje ten sam ekran K58 bez wiersza kwoty i bez danych do faktury —
   R2 (przegląd R1 B1): wszystkie reguły 1117 tylko w płatnym (:not([data-vin-bezplatnie="1"])), 962 bez zmian (podpowiedź telefonu, e-mail, podsumowanie). */
/* 1117 K1 (podpowiedzi pól 14 px): „Zadzwonimy…” pod telefonem i status NIP (#NxKonfNabNipStan — ta sama klasa, to samo miejsce pod polem, inaczej na jednym
   ekranie zostałyby dwie wielkości podpowiedzi) dziedziczyły 16 px z .NxKonf. DS .szy-field__hint = 14 px / 1,5 / 6 px nad; .NxKonf__wiersz ma gap 4 px, więc
   margin-top 2 px daje 6 px odstępu od pola (DS bez gap). Pusty status NIP (przed odczytem) bez marginesu. „Faktury wystawiamy na adres w Polsce.” 13 → 14 px;
   zdania pod formularzem (RODO, sprzedawca, Paynow) są poza .NxKonf__nabywca — zostają 13 px. */
.NxKonf:not([data-vin-bezplatnie="1"]) [data-nxkonf-ekran="K58"] :is([data-nxkonf-pole="telefon"], .NxKonf__nabywca > .NxKonf__wiersz) > .NxKonf__podpowiedz { font-size: var(--fs-ui, 14px); line-height: 1.5; }
.NxKonf:not([data-vin-bezplatnie="1"]) [data-nxkonf-ekran="K58"] :is([data-nxkonf-pole="telefon"], .NxKonf__nabywca > .NxKonf__wiersz) > .NxKonf__podpowiedz:not(:empty) { margin-top: 2px; }
.NxKonf:not([data-vin-bezplatnie="1"]) [data-nxkonf-ekran="K58"] .NxKonf__nabywca > .NxKonf__drobny { font-size: var(--fs-ui, 14px); }
/* 1117 K2 (odstęp między grupami pól faktury także na telefonie): 1074a działa od 641 px; ≤ 640 px jedna kolumna — 16 px (space-5) pod każdym wierszem pola.
   Ostatnim widocznym wierszem jest zawsze Miejscowość (kolejność w sekcjaNabywcy: imię, nazwisko, NIP, nazwa, ulica, kod, miasto; uklad() ukrywa tylko
   imię/nazwisko albo NIP/nazwę; [hidden] = display:none, więc bez pustych marginesów) — bez marginesu, żeby „Faktury wystawiamy…” został na miejscu. */
@media (max-width: 640px) {
  .NxKonf:not([data-vin-bezplatnie="1"]) [data-nxkonf-ekran="K58"] .NxKonf__nabywca > .NxKonf__wiersz { margin-bottom: var(--space-5, 16px); }
  .NxKonf:not([data-vin-bezplatnie="1"]) [data-nxkonf-ekran="K58"] .NxKonf__nabywca > [data-nxkonf-pole=NxKonfNabMiasto] { margin-bottom: 0; }
}
/* 1117 K6 (15 px poza skalą DS → 16 px treści): wiersz „Wynik wyszukiwania… wyślemy na:” i ramka ceny na K58 (reguły 336 wyżej). .NxKonf__email.NxKonf__zapStale
   (zapytanie W-40) i .NxKonf__cena.NxKonf__odpCena (naprawa) są na innych ekranach — bez zmian; .NxKonf__cenaLink zostaje 14 px (własna reguła). */
.NxKonf:not([data-vin-bezplatnie="1"]) [data-nxkonf-ekran="K58"] .NxKonf__email, .NxKonf:not([data-vin-bezplatnie="1"]) [data-nxkonf-ekran="K58"] .NxKonf__cena:not(.NxKonf__ramka) { font-size: var(--fs-body, 16px); }
/* 1117 K7 (telefon: wartości podsumowania do prawej): wiersz „etykieta – wartość” jest flex space-between (reguła 807 wyżej), więc jednowierszowe wartości stoją
   przy prawej krawędzi, a łamana nazwa auta wyrównywała się do lewej — poszarpana prawa krawędź. Bez .NxKonf__danePole (etykieta nad polem) i bez --auto. */
@media (max-width: 640px) {
  .NxKonf:not([data-vin-bezplatnie="1"]) [data-nxkonf-ekran="K58"] .NxKonf__dane:not(.NxKonf__dane--auto) > div:not(.NxKonf__danePole) > dd { text-align: right; }
}
/* 1117 K8 (komputer: szersza kolumna „Samochód”): 4 równe kolumny łamały nazwę auta w środku nawiasu. Tylko w płatnym VIN — wariant bezpłatny 962 ma 3 kafle
   (bez kwoty) i czwartą kolumnę pustą już dziś (poza zakresem, bez zmian). Kolumny Szyba / VIN / Kwota nie węższe niż ich treść (minmax(max-content, 1fr)):
   przy minmax(0, 1fr) kolumna VIN przy 1,6–2 fr dla auta spadłaby poniżej 17 znaków numeru i VIN zacząłby się łamać. Na 1280 (siatka ~828 px): auto ~313,
   szyba ~156, VIN wg treści (~200), kwota ~156. */
/* R2 (przegląd R1 B2, pomiar 641/768/900/1180/1280): przy 641 px 4 kolumny dają 134 px (dziś VIN 17 znaków wychodzi poza kolumnę), a K8 zostawiało autu 93 px —
   641–767: dwie równe kolumny (2 × 2: auto | szyba, VIN | kwota), od 768: K8 (auto ≥ 210 px) */
@media (min-width: 641px) and (max-width: 767px) {
  .NxKonf:not([data-vin-bezplatnie="1"]) [data-nxkonf-ekran="K58"] .NxKonf__dane:not(.NxKonf__dane--auto) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .NxKonf:not([data-vin-bezplatnie="1"]) [data-nxkonf-ekran="K58"] .NxKonf__dane:not(.NxKonf__dane--auto) { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(max-content, 1fr)); }
}
/* etap 1124 (P-551, Przemek 20.10 „To okno miało być zmienione… nie miało być tam tekstów od razu, aby klient zamykał okno”; Fable 5.1 + DS): ekran K64
   „Dziękujemy - sprawdzamy VIN” (krok-vin-platnosc.js czekaj('K64') ustawia data-nxkonf-ekran="K64"). Na starcie tylko kółko i tytuł w .NxKonf__ladowanie;
   po 15 s / serwer dlugo dopisek .NxKonf__dluzej (w bloku) i odsłonięty .NxKonf__kontakt; po końcu automatu komunikat .NxKonf__blad + „Sprawdź stan płatności”.
   Wzór: DS ui_kits/storefront HomeScreen loading() (kółko 54, 18 px do tytułu 22 px, tekst 14 px do 460 px wyśrodkowany, pomoc dopiero w stanie „trwa dłużej”)
   i stopka DS (przyciski 44 px, drugorzędne, obok siebie, na telefonie jeden pod drugim). Zawężenie do K64 — K03 tablicy, K60 i inne ekrany bez zmian. */
.NxKonf [data-nxkonf-ekran="K64"] .NxKonf__ladowanie { padding: var(--space-10, 48px) 0 var(--space-7, 24px); }                 /* samo kółko + tytuł: więcej powietrza (DS 24/16 + treść okna 28/8) */
.NxKonf [data-nxkonf-ekran="K64"] .NxKonf__ladowanie .NxKonf__naglowek { margin: 0 auto; max-width: 560px; text-wrap: balance; } /* bez opisu pod tytułem — bez marginesu 6 px; tytuł nie łamie się po jednym słowie */
.NxKonf [data-nxkonf-ekran="K64"] .NxKonf__ladowanie .NxKonf__dluzej { margin: var(--space-5, 16px) auto 0; max-width: 460px; line-height: 1.5; }   /* DS: extra marginTop 14–16, 460 px */
.NxKonf [data-nxkonf-ekran="K64"] > .NxKonf__blad { margin: 0 auto var(--space-4, 12px); max-width: 460px; text-align: center; }  /* błąd odpytywania pod blokiem, wyśrodkowany jak reszta */
.NxKonf [data-nxkonf-ekran="K64"] > .NxKonf__ponowWiersz { margin: 0; text-align: center; }   /* pusty wiersz (przycisk ukryty, 0 px) bez marginesu - inaczej +12 px nad kontaktem */
.NxKonf [data-nxkonf-ekran="K64"] > .NxKonf__ponowWiersz:has(> :not([hidden])) { margin-bottom: var(--space-4, 12px); }
.NxKonf [data-nxkonf-ekran="K64"] > .NxKonf__ponowWiersz .NxKonf__przycisk,
.NxKonf [data-nxkonf-ekran="K64"] > .NxKonf__kontakt .NxKonf__przycisk { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 44px; min-height: 44px; padding: 0 24px;
  font-family: var(--font-body); font-size: var(--fs-body-sm); font-weight: 700; line-height: 1; letter-spacing: -0.005em; border-color: var(--border-strong); white-space: nowrap; text-decoration: none; box-sizing: border-box; }   /* DS Button secondary lg — ten sam wzór co .NxKonf__kontakt (298b), także dla „Sprawdź stan płatności” */
.NxKonf [data-nxkonf-ekran="K64"] > .NxKonf__kontakt { justify-content: center; gap: var(--space-4, 12px); margin: 0 0 var(--space-7, 24px); }   /* telefon i czat pod tekstem, wyśrodkowane; 24 px do dołu okna */
@media (max-width: 640px) {
  .NxKonf [data-nxkonf-ekran="K64"] .NxKonf__ladowanie { padding: var(--space-8, 32px) 0 var(--space-6, 20px); }
  .NxKonf [data-nxkonf-ekran="K64"] > .NxKonf__kontakt { gap: var(--space-3, 8px); margin-bottom: var(--space-6, 20px); }
  .NxKonf [data-nxkonf-ekran="K64"] > .NxKonf__ponowWiersz .NxKonf__przycisk,
  .NxKonf [data-nxkonf-ekran="K64"] > .NxKonf__kontakt .NxKonf__przycisk { width: 100%; height: auto; padding: 12px 20px; white-space: normal; line-height: 1.25; }   /* telefon: jeden pod drugim, pełna szerokość (jak stopka DS), długi napis się zawija */
}
/* etap 1150 (Przemek 20.10 „Niech wybór dokumentu i wygląd pól wygląda w konfiguratorze tak samo jak w koszyku”; Fable 5.1, Księga W-02): dane do faktury
   na płatnym K58 1:1 z kasą — css/konto-v3.css: przełącznik .NxKonto__przelacznikEtykieta + .NxKonto__przelacznik (l. 135–147), pola .cmxform input (l. 63–75),
   etykiety label.formSpan + em.required (l. 46–48), siatka .NxKonto__pola (l. 51–59, telefon l. 532) = DS SegmentedControl.jsx + .szy-field (CheckoutScreen.jsx:425).
   Znaczniki (krok-vin-platnosc.js sekcjaNabywcy): div.NxKonf__nabywcaRodzaj > p.NxKonf__segmentyEtykieta + div.NxKonf__segmenty[role=radiogroup] >
   label.NxKonf__segment > input[type=radio] + span; wiersze div.NxKonf__wiersz[data-nxkonf-pole] > label.NxKonf__etykieta (+ em.NxKonf__wymagane) + input.NxKonf__pole.
   Zawężenie jak 1117 (tylko płatny VIN; bezpłatny 962 nie ma sekcji nabywcy). Nadpisuje w tym zakresie: 731 (.NxKonf__nabywcaRodzaj: flex / gap 8 / margin 12
   → blok, 16 px pod przełącznikiem jak kasa), 1074a (Nazwa firmy na całą szerokość → połówka obok NIP; rzędy 16 → 14 px jak kasa gap 14; odstęp rzędów nadal
   marginesem pod wierszem, nie row-gap — tytuł, lista błędów i przełącznik siedzą w tej samej siatce), 1117 K2 (telefon 16 → 14 px; ostatni wiersz Miejscowość 0
   bez zmian) i 1117 K1 (status NIP: wiersz bez gap, więc margin-top 6 px = DS .szy-field__hint). Tło/ramka/fokus/błąd pola (1102 szare puste, --border-input,
   fokus --ink; 1036 błąd --danger) bez zmian — to już DS. */
/* przełącznik „Kupujesz jako”: etykieta 14/600, 6 px nad; obudowa ramka --border-input, tło --surface-subtle, padding 2, gap 2, do 360 px (telefon: cała szerokość);
   segment 38 px (dotyk 44), 14/600, wybrany = atrament + tekst odwrócony, hover = białe tło. Promień przez JEDNĄ zmienną --nx-seg-promien: obudowa = zmienna,
   segment = zmienna − 2 px (padding obudowy; dziś --radius-md 6 → 4 = --radius-sm jak kasa). Dziś kasa i DS = --radius-md; po wgraniu 1140 (pigułka w kasie)
   → --radius-pill — decyzja S0. */
.NxKonf:not([data-vin-bezplatnie="1"]) [data-nxkonf-ekran="K58"] .NxKonf__nabywca .NxKonf__nabywcaRodzaj { display: block; margin: 0 0 16px; padding: 0; border: 0; }
.NxKonf:not([data-vin-bezplatnie="1"]) [data-nxkonf-ekran="K58"] .NxKonf__nabywca .NxKonf__segmentyEtykieta { margin: 0 0 6px; font-size: var(--fs-ui, 14px); font-weight: 600; line-height: 1.5; color: var(--text-strong); }
.NxKonf:not([data-vin-bezplatnie="1"]) [data-nxkonf-ekran="K58"] .NxKonf__nabywca .NxKonf__segmenty { --nx-seg-promien: var(--radius-md, 6px);
  display: flex; gap: 2px; box-sizing: border-box; max-width: 360px; margin: 0; padding: 2px; border: 1px solid var(--border-input); border-radius: var(--nx-seg-promien); background: var(--surface-subtle); }
.NxKonf:not([data-vin-bezplatnie="1"]) [data-nxkonf-ekran="K58"] .NxKonf__nabywca .NxKonf__segment { position: relative; flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 3px;
  min-width: 0; min-height: 38px; margin: 0; padding: 0 6px; box-sizing: border-box; border-radius: calc(var(--nx-seg-promien) - 2px);
  font-family: var(--font-body); font-size: var(--fs-ui, 14px); font-weight: 600; line-height: 1.43; white-space: nowrap; color: var(--text-body); background: transparent; cursor: pointer;
  transition: background-color var(--dur-fast, 120ms) var(--ease-out, ease-out), color var(--dur-fast, 120ms) var(--ease-out, ease-out); }
.NxKonf:not([data-vin-bezplatnie="1"]) [data-nxkonf-ekran="K58"] .NxKonf__nabywca .NxKonf__segment:hover { background: var(--surface-card); }
.NxKonf:not([data-vin-bezplatnie="1"]) [data-nxkonf-ekran="K58"] .NxKonf__nabywca .NxKonf__segment:has(input:checked) { background: var(--ink); color: var(--text-inverse); }
/* radio ukryte wizualnie, ale w drzewie i fokusowalne (Tab do grupy, strzałki zmieniają wybór; NIE display:none) — jak kasa: rozciągnięte na cały segment, klik trafia w radio */
.NxKonf:not([data-vin-bezplatnie="1"]) [data-nxkonf-ekran="K58"] .NxKonf__nabywca .NxKonf__segment > input[type=radio] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: inherit; }
/* fokus klawiatury D1 na segmencie (DS data-focus-visible, kasa :has(input:focus-visible)): 2 px atrament na zewnątrz + 2 px bieli; pierścień fix-v2 na samym radiu
   jest niewidoczny (opacity 0) */
.NxKonf:not([data-vin-bezplatnie="1"]) [data-nxkonf-ekran="K58"] .NxKonf__nabywca .NxKonf__segment:has(> input:focus-visible) { outline: 2px solid var(--focus-ring-outer, var(--ink)); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-ring-inner, #FFFFFF); z-index: 1; }
@media (pointer: coarse) { .NxKonf:not([data-vin-bezplatnie="1"]) [data-nxkonf-ekran="K58"] .NxKonf__nabywca .NxKonf__segment { min-height: 44px; } }
@media (max-width: 640px) { .NxKonf:not([data-vin-bezplatnie="1"]) [data-nxkonf-ekran="K58"] .NxKonf__nabywca .NxKonf__segmenty { max-width: none; } }
@media (prefers-reduced-motion: reduce) { .NxKonf:not([data-vin-bezplatnie="1"]) [data-nxkonf-ekran="K58"] .NxKonf__nabywca .NxKonf__segment { transition: none; } }
@media (forced-colors: active) { .NxKonf:not([data-vin-bezplatnie="1"]) [data-nxkonf-ekran="K58"] .NxKonf__nabywca .NxKonf__segment:has(input:checked) { outline: 2px solid Highlight; } }
/* etykieta pola i gwiazdka = kasa label.formSpan + em.required: 14/600 --text-strong, 6 px nad polem (wiersz bez gap — dotąd 6 + gap 4 = 10 px), „*” z CSS;
   w kasie przed <em> jest spacja w szablonie, tu etykieta i em stykają się — stąd twarda spacja w content + 2 px marginesu jak kasa */
.NxKonf:not([data-vin-bezplatnie="1"]) [data-nxkonf-ekran="K58"] .NxKonf__nabywca .NxKonf__wiersz { gap: 0; }
.NxKonf:not([data-vin-bezplatnie="1"]) [data-nxkonf-ekran="K58"] .NxKonf__nabywca .NxKonf__wiersz > .NxKonf__etykieta { display: block; margin: 0 0 6px; font-size: var(--fs-ui, 14px); font-weight: 600; line-height: 1.5; color: var(--text-strong); }
.NxKonf:not([data-vin-bezplatnie="1"]) [data-nxkonf-ekran="K58"] .NxKonf__nabywca .NxKonf__wymagane { display: inline; font-style: normal; }
.NxKonf:not([data-vin-bezplatnie="1"]) [data-nxkonf-ekran="K58"] .NxKonf__nabywca .NxKonf__wymagane::before { content: "\00a0*"; margin-left: 2px; color: var(--text-strong); font-weight: 600; }
/* pole = kasa .cmxform input (DS .szy-field): 44 px = 9 + 16 × 1,5 + 9 + ramki, 16 px, --radius-md, cała szerokość kolumny; błąd pod polem (.NxKonf__blad 6 px) = kasa label.error */
.NxKonf:not([data-vin-bezplatnie="1"]) [data-nxkonf-ekran="K58"] .NxKonf__nabywca .NxKonf__pole { display: block; width: 100%; max-width: 100%; min-height: 44px; margin: 0; padding: 9px 14px;
  font-family: var(--font-body); font-size: var(--fs-field, 16px); line-height: 1.5; border-radius: var(--radius-md, 6px); box-shadow: none; }
.NxKonf:not([data-vin-bezplatnie="1"]) [data-nxkonf-ekran="K58"] .NxKonf__nabywca .NxKonf__wiersz[data-nxkonf-pole="NxKonfNabNip"] > .NxKonf__podpowiedz:not(:empty) { margin-top: 6px; }   /* status NIP 6 px pod polem (DS hint) — wiersz bez gap, 1117 K1 liczyło 2 + 4 */
/* siatka pól = kasa .NxKonto__pola: ≤ 640 jedna kolumna, od 641 dwie równe (minmax(0, 1fr)), odstępy 14 px; „Ulica i numer” na całą szerokość (1074a, jak kasa
   .NxKonto__caly); [hidden] NIP/Nazwa u osoby = display:none, więc osoba zaczyna od Imię | Nazwisko. Rzędy: 14 px pod wierszem, ostatni rząd (Miejscowość;
   od 641 także Kod pocztowy obok) 0 — „Faktury wystawiamy…” zostaje na miejscu. */
.NxKonf:not([data-vin-bezplatnie="1"]) [data-nxkonf-ekran="K58"] .NxKonf__nabywca > .NxKonf__wiersz { margin-bottom: 14px; }
.NxKonf:not([data-vin-bezplatnie="1"]) [data-nxkonf-ekran="K58"] .NxKonf__nabywca > [data-nxkonf-pole="NxKonfNabMiasto"] { margin-bottom: 0; }
@media (min-width: 641px) {
  .NxKonf:not([data-vin-bezplatnie="1"]) [data-nxkonf-ekran="K58"] .NxKonf__nabywca { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; }
  .NxKonf:not([data-vin-bezplatnie="1"]) [data-nxkonf-ekran="K58"] .NxKonf__nabywca > [data-nxkonf-pole="NxKonfNabNazwa"] { grid-column: auto; }   /* 1074a: Nazwa była na całą szerokość; teraz NIP | Nazwa firmy jak kasa */
  .NxKonf:not([data-vin-bezplatnie="1"]) [data-nxkonf-ekran="K58"] .NxKonf__nabywca > [data-nxkonf-pole="NxKonfNabKod"] { margin-bottom: 0; }
}
/* etap 1173 (Przemek 21.10 17:0x, zrzut „To dopasowanie jest już opłacone”: „Przycisk »Wyślij link ponownie« niezgodny z DS (font). Niech będzie czerwony.
   Za dużo białych przycisków na tej planszy.”): na ekranach z formularzem linku (powtórka, VIN zajęty, K76) JEDEN wyróżniony przycisk — „Wyślij link ponownie”
   = główny czerwony DS (jak główny w stopce: 48 px, font-body 700, --fs-body, pigułka, --cta-bg); telefon i czat = odnośniki tekstowe DS; „ręcznie” w stopce
   = rodzaj „tekst” (JS). Inne ekrany bez zmian. */
.NxKonf .NxKonf__linkPonow .NxKonf__przycisk--glowny { display: inline-flex; align-items: center; justify-content: center; gap: 9px; box-sizing: border-box; height: 48px; min-height: 48px; min-width: 180px;
  padding: 0 26px; font-family: var(--font-body); font-weight: 700; font-size: var(--fs-body); line-height: 1; letter-spacing: -0.005em; border-radius: var(--radius-pill);
  border: 1px solid transparent; background: var(--cta-bg); color: var(--cta-text); box-shadow: var(--shadow-xs); white-space: nowrap; cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.NxKonf .NxKonf__linkPonow .NxKonf__przycisk--glowny:hover { background: var(--cta-bg-hover); box-shadow: var(--shadow-sm); }
.NxKonf .NxKonf__linkPonow .NxKonf__przycisk--glowny[disabled] { background: var(--surface-sunken); border-color: var(--surface-sunken); color: var(--text-faint); box-shadow: none; cursor: default; }
@media (max-width: 640px) { .NxKonf .NxKonf__linkPonow .NxKonf__przycisk--glowny { width: 100%; } }
.NxKonf .NxKonf__kontakt--odnosniki { gap: var(--space-2) var(--space-5); }
.NxKonf .NxKonf__kontakt--odnosniki .NxKonf__przycisk { height: auto; min-height: 44px; min-width: 0; padding: 0; border: 0; background: none; box-shadow: none; font-size: var(--fs-body-sm);
  font-weight: 600; color: var(--text-strong); text-decoration: underline; text-underline-offset: 3px; }
.NxKonf .NxKonf__kontakt--odnosniki .NxKonf__przycisk:hover { background: none; color: var(--red-500); }
.NxKonf .NxKonf__kontakt--odnosniki { align-items: flex-start; }   /* telefon (kolumna): odnośniki od lewej jak treść i „ręcznie” w stopce, nie rozciągnięte */
.NxKonf .NxKonf__kontakt--odnosniki .NxKonf__przycisk { justify-content: flex-start; }
/* etap 1221 (Przemek 22.10 08:59, ekran „Dopasowanie automatyczne po numerze VIN”, krok-vin.js formularz(); typografia wg oceny Fable 5.1 — stan/etapy/1221-…/FABLE-FONTY.md):
   (1) cena „12,90 zł z VAT” bez etykiety — „z VAT” w kolorze kwoty (było --text-muted), 14/600 (Fable 2.3);
   (2) e-mail: podpowiedź pod polem, pole węższe — od 641 px szerokość połowy formularza jak e-mail w kasie (.NxKonto__pola: dwie kolumny, odstęp 14 px),
   ≤ 640 px cała szerokość; puste szare przez NxKonf__poleStan (reguły 1102 wyżej), także pole VIN w wariancie „Wpisz inny VIN”;
   (3) podpowiedzi pól formularza (e-mail, VIN) jak DS .szy-field__hint 14 / 1,5 / --text-muted — dziedziczyły 16 z .NxKonf__okno (Fable 2.1); pod polem
   margin-top 2 + gap 4 wiersza = 6 px (DS); pola formularza wg kontraktu .szy-field__control 16 / 1,5, bok 14 (Fable 2.4);
   „Wpisz inny VIN” 14/600 jak DS TextButton (Fable 2.2). Zawężenie [data-nxkonf-krok="vin"] .NxKonf__form = tylko formularz() z krok-vin.js (K58 nie ma .NxKonf__form). */
.NxKonf .NxKonf__vinCenaKwota span { font-size: var(--fs-ui, 14px); font-weight: 600; color: var(--text-strong); }
.NxKonf #NxKonfVinEmail { width: 100%; }
@media (min-width: 641px) { .NxKonf #NxKonfVinEmail { max-width: calc(50% - 7px); } }
.NxKonf [data-nxkonf-krok="vin"] .NxKonf__form > .NxKonf__wiersz > .NxKonf__podpowiedz { font-size: var(--fs-ui, 14px); line-height: 1.5; color: var(--text-muted); }
.NxKonf [data-nxkonf-krok="vin"] .NxKonf__form > .NxKonf__wiersz > .NxKonf__pole + .NxKonf__podpowiedz { margin-top: 2px; }
.NxKonf [data-nxkonf-krok="vin"] .NxKonf__form > .NxKonf__wiersz > .NxKonf__pole { font-size: var(--fs-field, 16px); line-height: 1.5; padding: 8px 14px; }
.NxKonf .NxKonf__vinNumerWiersz .NxKonf__link { font-size: var(--fs-ui, 14px); font-weight: 600; }

/* etap 1244 (Przemek 22.10 16:5x, wygląd wprost): „Chcę wymienić szybę z ubezpieczenia” i „Chcę naprawić uszkodzenie szyby” w stopce kroku 1 wyglądają
   DOKŁADNIE jak „Wskaż model ręcznie.” (.NxKonf__zagranica .NxKonf__link - wyliczone style żywej strony 22.10: 14 px, waga 400, wysokość linii 21 px,
   kolor text-strong, podkreślenie z odstępem 3 px, bez zmiany koloru po najechaniu, bez pomniejszenia po kliknięciu, fokus jak dotąd: obrys 2 px w kolorze tekstu).
   Komputer i telefon. Układ w rzędzie stopki (min. 44 px celu, odstęp od „Znajdź auto”) bez zmian; teksty i działanie bez zmian. */
.NxKonf .NxKonf__start .NxKonf__stopka .NxKonf__przycisk--dodatkowy,
.NxKonf .NxKonf__start .NxKonf__stopka .NxKonf__przycisk--dodatkowy:hover,
.NxKonf .NxKonf__start .NxKonf__stopka .NxKonf__przycisk--dodatkowy:focus,
.NxKonf .NxKonf__start .NxKonf__stopka .NxKonf__przycisk--dodatkowy:active:not(:disabled):not([aria-disabled="true"]) {
  font-size: var(--fs-body-sm); font-weight: 400; line-height: 1.5; letter-spacing: normal; color: var(--text-strong);
  text-decoration: underline; text-underline-offset: 3px; background: none; transform: none; transition: none;
}

/* ---------- 1335 (Przemek P-1011 A, P-1036, P-1038 = B): telefon - pola Marka/Model/Generacja/Nadwozie = przyciski, wybór w pełnoekranowym panelu
   (wzorzec DS design-system/components/overlay/CarPickerSheet.jsx, ekran ui_kits/storefront/konfigurator-wybierak.html; wartości z tokenów) ---------- */
.NxKonf .NxKonf__wyzwalacz { display: flex; align-items: center; width: 100%; padding-right: 30px; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.NxKonf .NxKonf__wyzwalacz:disabled { cursor: not-allowed; color: var(--text-disabled); }
.NxKonf .NxKonf__wyzwTekst { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.NxKonf .NxKonf__wyzwalacz--pusty .NxKonf__wyzwTekst { color: var(--text-muted); }
.NxKonf .NxKonf__wyzwalacz:disabled .NxKonf__wyzwTekst { color: var(--text-disabled); }
.NxKonf .NxKonf__wyzwalacz--podp .NxKonf__wyzwTekst { white-space: normal; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }   /* 1034: tekst czekania do 2 linii */
.NxKonf .szy-field__frame:has(> .NxKonf__wyzwalacz) { padding-left: 12px; padding-right: 12px; }
.NxKonf .szy-field__frame:has(> .NxKonf__wyzwalacz:focus-visible) { border-color: var(--ink); outline: 2px solid var(--ink); outline-offset: 2px; }
.NxKonf .NxKonf__wyzwZnak { pointer-events: none; color: var(--text-muted); }
.NxKonf .NxKonf__wyzwalacz:disabled ~ .NxKonf__wyzwZnak { color: var(--grey-300); }
html.NxKonf-wyb, html.NxKonf-wyb body { overflow: hidden; }   /* panel na stronie: tło bez przewijania */
.NxKonf__wybDialog { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; }
.NxKonf__wybDialog::backdrop { background: var(--surface-card); }
.NxKonf .NxKonf__wyb { position: fixed; left: 0; top: 0; z-index: 40; width: 100%; height: 100vh; height: 100dvh; display: flex; flex-direction: column; box-sizing: border-box;
  background: var(--surface-card); color: var(--text-strong); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.38; text-align: left;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); animation: nxKonfWybIn var(--dur-slow) var(--ease-out); }
@keyframes nxKonfWybIn { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.NxKonf .NxKonf__wybGora { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 56px; padding: 0 8px; border-bottom: 1px solid var(--border); }
.NxKonf .NxKonf__wybWroc { justify-self: start; display: inline-flex; align-items: center; gap: 2px; height: 44px; padding: 0 10px 0 4px; border: 0; background: transparent; border-radius: var(--radius-md);
  font: inherit; font-size: var(--fs-ui); font-weight: 600; color: var(--text-strong); cursor: pointer; }
.NxKonf .NxKonf__wybWroc svg { width: 22px; height: 22px; }
.NxKonf .NxKonf__wybSrodek { min-width: 0; text-align: center; }
.NxKonf .NxKonf__wybTytul { margin: 0; font-family: var(--font-display); font-size: var(--fs-subtitle); font-weight: 700; line-height: 1.2; color: var(--text-strong); outline: none; }
.NxKonf .NxKonf__wybKontekst { margin: 2px 0 0; max-width: 220px; font-size: var(--fs-caption); line-height: 1.3; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.NxKonf .NxKonf__wybKontekst[hidden] { display: none; }
.NxKonf .NxKonf__wybZamknij { justify-self: end; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: var(--radius-md); color: var(--text-muted); cursor: pointer; }
.NxKonf .NxKonf__wybGora button:focus-visible, .NxKonf .NxKonf__wybWiersz:focus-visible, .NxKonf .NxKonf__wybLink:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.NxKonf .NxKonf__wybSzukaj { flex: none; padding: 12px 16px 8px; }
.NxKonf .NxKonf__wybSzukaj[hidden] { display: none; }
.NxKonf .NxKonf__wybSzukajRamka { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 4px 0 12px; box-sizing: border-box; background: var(--surface-subtle); border: 1px solid var(--border-input); border-radius: var(--radius-md); }
.NxKonf .NxKonf__wybSzukajRamka > svg { flex: none; color: var(--text-muted); }   /* lupa (DS szy-cps__lupa) */
.NxKonf .NxKonf__wybSzukajRamka:focus-within { border-color: var(--ink); background: var(--surface-card); box-shadow: inset 0 0 0 1px var(--ink); }
/* 1357 (Przemek 25.10 19:07, zrzut iPhone): bez czarnego prostokąta na samym polu „Szukaj” — globalny :focus-visible (css/fix-v2.css, !important) rysował go
   wewnątrz zaokrąglonej ramki (pole tekstowe po dotknięciu zawsze ma :focus-visible). Fokus = cała ramka: atrament 2 px (border + inset), jak szukajka
   nagłówka (fix-v2.css .RamkaSzukania input:focus-visible); wysoki kontrast — obrys systemowy na ramce */
.NxKonf .NxKonf__wybSzukajPole:focus, .NxKonf .NxKonf__wybSzukajPole:focus-visible { outline: none !important; box-shadow: none !important; }
@media (forced-colors: active) { .NxKonf .NxKonf__wybSzukajRamka:focus-within { outline: 2px solid Highlight; outline-offset: 2px; } }
.NxKonf .NxKonf__wybSzukajPole { flex: 1; min-width: 0; min-height: 44px; margin: 0; padding: 0; border: 0; background: transparent; font: inherit; font-size: var(--fs-field); color: var(--text-strong); outline: none; -webkit-appearance: none; appearance: none; }
.NxKonf .NxKonf__wybSzukajPole::placeholder { color: var(--text-muted); opacity: 1; }
.NxKonf .NxKonf__wybSzukajPole::-webkit-search-cancel-button, .NxKonf .NxKonf__wybSzukajPole::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.NxKonf .NxKonf__wybSzukajCzysc { flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: 50%; color: var(--text-muted); cursor: pointer; }
.NxKonf .NxKonf__wybSzukajCzysc[hidden] { display: none; }
.NxKonf .NxKonf__wybLista { position: relative; flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.NxKonf .NxKonf__wybGrupa { position: sticky; top: 0; z-index: 1; padding: 8px 16px; background: var(--surface-subtle); font-size: var(--fs-caption); font-weight: 600; line-height: 1.4; color: var(--text-strong); }
.NxKonf .NxKonf__wybWiersz { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin: 0; padding: 8px 16px; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  background: var(--surface-card); font: inherit; font-size: var(--fs-field); font-weight: 400; line-height: 1.38; color: var(--text-strong); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.NxKonf .NxKonf__wybWiersz b { font-weight: 400; }
.NxKonf .NxKonf__wybWiersz[aria-current="true"] b, .NxKonf .NxKonf__wybWiersz[aria-expanded="true"] b { font-weight: 600; }
.NxKonf .NxKonf__wybWiersz[aria-expanded="true"] { background: var(--surface-subtle); }
.NxKonf .NxKonf__wybWiersz:active { background: var(--surface-subtle); box-shadow: inset 3px 0 var(--ink); }
.NxKonf .NxKonf__wybWiersz--model { padding-left: 36px; }
.NxKonf .NxKonf__wybWiersz--model::before { content: ""; position: absolute; left: 20px; top: 0; bottom: 0; width: 2px; background: var(--border); }
.NxKonf .NxKonf__wybNazwa { flex: 1; min-width: 0; }
.NxKonf .NxKonf__wybPrefiks { color: var(--text-muted); }
.NxKonf .NxKonf__wybPod { display: block; margin-top: 2px; font-size: var(--fs-caption); color: var(--text-muted); }
.NxKonf .NxKonf__wybZnak { flex: none; display: inline-flex; color: var(--text-muted); transition: transform var(--dur-base) var(--ease-out); }
.NxKonf .NxKonf__wybWiersz[aria-expanded="true"] .NxKonf__wybZnak { transform: rotate(180deg); }
.NxKonf .NxKonf__wybFajka { flex: none; display: inline-flex; color: var(--ink); }
.NxKonf .NxKonf__wybPusto { margin: 0; padding: 16px; font-size: var(--fs-ui); color: var(--text-muted); }
.NxKonf .NxKonf__wybLista > .NxKonf__awaria { margin: 16px; }
.NxKonf .NxKonf__wybSzkielet span { display: block; height: 56px; border-bottom: 1px solid var(--border); background: linear-gradient(90deg, var(--surface-subtle), var(--surface-sunken), var(--surface-subtle)); background-size: 200% 100%; animation: nxKonfWybSk 1.2s linear infinite; }
@keyframes nxKonfWybSk { from { background-position: 200% 0; } to { background-position: 0 0; } }
.NxKonf .NxKonf__wybStopka { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); }
.NxKonf .NxKonf__wybStopka[hidden] { display: none; }
.NxKonf .NxKonf__wybLink { font-size: var(--fs-ui); font-weight: 600; text-align: left; }   /* R2 B3: odnośnik na całą szerokość stopki (cel dotyku jak DS szy-cps__link) */
@media (prefers-reduced-motion: reduce) { .NxKonf .NxKonf__wyb, .NxKonf .NxKonf__wybSzkielet span, .NxKonf .NxKonf__wybZnak { animation: none; transition: none; } }
/* etap 2181b B1b: kod sprawy („Dzwonisz? Podaj kod”) w bloku kontaktu W-16 / kroku pomocy — DS design-system/components/forms/kod-sprawy.jsx.
   Całą szerokość rzędu kontaktu; kod 8 cyfr w dwóch grupach (do podyktowania), zaznaczany jednym dotknięciem, bez odliczania; po terminie przekreślony. */
.NxKonf__kontakt .NxKonf__kodSprawy { flex: 1 0 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-subtle); }
.NxKonf__kodSprawy[hidden], .NxKonf__kodSprawy [hidden] { display: none; }
.NxKonf__kodSprawy .NxKonf__przycisk[aria-busy="true"] { opacity: .7; cursor: progress; }
.NxKonf__kodSprawyWynik { display: flex; flex-direction: column; gap: 4px; }
.NxKonf__kodSprawyEtykieta { margin: 0; font-size: var(--fs-body-sm); font-weight: 700; color: var(--text-strong); }
.NxKonf__kodSprawyKod { margin: 0; font-family: var(--font-display); font-size: 32px; font-weight: 700; line-height: 1.15; letter-spacing: .08em; color: var(--ink); font-variant-numeric: tabular-nums; -webkit-user-select: all; user-select: all; }
.NxKonf__kodSprawyKod:focus { outline: none; }
.NxKonf__kodSprawyKod:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: var(--radius-md); }
.NxKonf__kodSprawyKod.is-wygasly { color: var(--text-muted); text-decoration: line-through; }
.NxKonf__kodSprawyWazny { margin: 0; font-size: var(--fs-meta); color: var(--text-muted); }
.NxKonf__kodSprawyBlad { margin: 0; font-size: var(--fs-body-sm); color: var(--red-500); }
.NxKonf__kodSprawyBlad:empty { display: none; }
/* 2231 (Przemek 29.10 PILNE; zmiana 11:32 P-1374): po odpowiedzi na pytanie o wyposażenie — kliknięta odpowiedź zaznaczona, pozostałe przygaszone
   i nieklikalne przez ODPOWIEDZ_ZAZN_MS, potem treść pytania ustępuje TEMU SAMEMU kółku co przy wynikach tablicy/VIN (.NxKonf__kolko, wyżej),
   wyśrodkowanemu na wysokości pytania (konfigurator.js ustawia min-height); stopka zostaje. prefers-reduced-motion: kółko bez obrotu (reguła 1333),
   bez wejścia. Bez nowych tekstów (stan dla czytnika = aria-busy kroku). */
.NxKonf .NxKonf__odpowiedzi.is-przejscie .NxKonf__odp:not(.is-wybrana) { opacity: 0.45; pointer-events: none; }
.NxKonf .NxKonf__odpowiedzi.is-przejscie .NxKonf__odp.is-wybrana { pointer-events: none; }
.NxKonf .NxKonf__ladowanie--odp { display: flex; align-items: center; justify-content: center; padding: 0; box-sizing: border-box; outline: none; }
.NxKonf .NxKonf__ladowanie--odp .NxKonf__kolko { margin: 0; }
@keyframes nxKonfOdpWejscie { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .NxKonf .NxKonf__odpowiedzi .NxKonf__odp { transition: opacity 150ms var(--ease-out), border-color 150ms var(--ease-out), background-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out); }
  .NxKonf .is-wejscie > * { animation: nxKonfOdpWejscie 220ms var(--ease-out) both; }
}

/* 2243 (testy UX 2236 #3, iPhone SE 320 × 568): w pytaniu o wyposażenie trzecia odpowiedź („Nie wiem”) wystawała spod przyklejonej stopki „Wróć” o kilka pikseli —
   klient widział dwie odpowiedzi zamiast trzech. Tylko niskie ekrany telefonu (szerokość i wysokość ≤ 640 px): mniejsze odstępy nad kaflami i kafle 48 px
   (cel dotyku ≥ 44 px); razem ok. 60 px, więc wszystkie trzy odpowiedzi mieszczą się nad stopką. Wyższe ekrany i komputer bez zmian.
   R2 (przegląd R1 Codex B1/B2): tylko ekran pytania K19 (nagłówek #NxKonfPytanie) z kaflami bez ilustracji — K20 „Nie wiem” i wariant z ilustracjami bez zmian;
   przeglądarka bez :has() = dotychczasowy wygląd. */
@media (max-width: 640px) and (max-height: 640px) {
  .NxKonf [data-nxkonf-krok=pytania]:has(#NxKonfPytanie):has(.NxKonf__odp--bezIlu) .NxKonf__autoLinia, .NxKonf [data-nxkonf-krok=pytania]:has(#NxKonfPytanie):has(.NxKonf__odp--bezIlu) .NxKonf__licznik { margin-bottom: var(--space-2, 4px); }
  .NxKonf [data-nxkonf-krok=pytania]:has(#NxKonfPytanie):has(.NxKonf__odp--bezIlu) .NxKonf__opis { margin-bottom: var(--space-4, 12px); }
  .NxKonf [data-nxkonf-krok=pytania]:has(#NxKonfPytanie):has(.NxKonf__odp--bezIlu) .NxKonf__odpowiedzi { margin-top: var(--space-4, 12px); gap: var(--space-3, 8px); }
  .NxKonf [data-nxkonf-krok=pytania]:has(#NxKonfPytanie):has(.NxKonf__odp--bezIlu) .NxKonf__odp--kafel.NxKonf__odp--bezIlu { min-height: 48px; padding-top: var(--space-3, 8px); padding-bottom: var(--space-3, 8px); }
}
/* 2243b (testy UX 2236 #3 ciąg dalszy, S0 17:32): stopka z samymi przyciskami pomocniczymi („Wróć”, „Zmień odpowiedzi”) nie przykleja się na telefonie tam,
   gdzie zasłaniała treść do wyboru — (1) pytanie o wyposażenie na niskim ekranie (iPhone SE 320 × 568: opis w 3 wierszach + „Jak to sprawdzić?” — „Nie wiem”
   wchodziło 26 px pod „Wróć” mimo 2243), (2) lista ofert na telefonie (Pixel 8: „Wybierz tę szybę” pierwszej karty pod stopką). Stopka stoi wtedy pod treścią
   (przewinięcie); „Zmień” jest też w pigułkach odpowiedzi nad listą, zamknięcie okna w nagłówku. Stopka z przyciskiem głównym (np. „Zapytaj o dostępność”) zostaje przyklejona;
   przeglądarka bez :has() = pytania jak dotąd. */
@media (max-width: 640px) {
  .NxKonf [data-nxkonf-krok=oferty] .NxKonf__stopka:not(:has(.NxKonf__przycisk--glowny)) { position: static; }
}
@media (max-width: 640px) and (max-height: 640px) {
  .NxKonf [data-nxkonf-krok=pytania]:has(#NxKonfPytanie) .NxKonf__stopka:not(:has(.NxKonf__przycisk--glowny)) { position: static; }
}