/* ══════════════════════════════════════════════════════════════════════
   kfg/kroki/k4.css — KROK 4 (Szklenie), 17.10.2026.
   Kafle (.cfg-klamka-card), sekcje i notatki mają style w kfg/shell.css (1:1 z zewn.).
   Tu tylko próbki szyb i inoxu (z zewnętrznych: .cfg-inox-swatch), pole RAL i dopisek pod podglądem.
   Prefiks: k4-. Reguły wąskich ekranów na końcu pliku.
   ══════════════════════════════════════════════════════════════════════ */

#k4-szyba-sekcja[hidden], #k4-lakobel-sekcja[hidden], #k4-inox-sekcja[hidden], #k4-brak-info[hidden],
#k4-lead[hidden], #k4-ral-wrap[hidden], #k4-nota-poglad[hidden], .k4-podglad-nota[hidden] { display: none !important; }

/* Próbka szyby 58 px, jak „Mleczna — standard" w zewn. (gdy szyba nie ma zdjęcia producenta) */
.k4-sw { display: block; width: 58px; height: 58px; border-radius: 8px; border: 1px solid rgba(0,0,0,.09);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 -6px 12px rgba(0,0,0,.06); }
.k4-sw-mleczna       { background: linear-gradient(135deg, #f2f4f6, #dfe5ea); }
.k4-sw-float         { background: linear-gradient(135deg, #eaf4f1 0%, #cfe3df 55%, #e6f1ee 100%); }
.k4-sw-przezroczysta { background: linear-gradient(135deg, #f4fafd 0%, #d6e9f4 55%, #eef7fc 100%); }
.k4-sw-czarna        { background: linear-gradient(135deg, #5b5f63 0%, #25282b 50%, #3b3f43 100%); }
.k4-sw-ryfl, .k4-sw-ryfl-grafit, .k4-sw-ryfl-braz {
    background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 2px, rgba(0,0,0,.07) 2px 5px), var(--k4-tlo); }
.k4-sw-ryfl          { --k4-tlo: linear-gradient(135deg, #eaf4f1, #cfe3df); }
.k4-sw-ryfl-grafit   { --k4-tlo: linear-gradient(135deg, #8d9296, #50555a); }
.k4-sw-ryfl-braz     { --k4-tlo: linear-gradient(135deg, #b99f86, #7d6450); }
.k4-sw-lakobel       { background: linear-gradient(135deg, #3a3a3d 0%, #1b1b1d 45%, #2d2d30 70%, #101012 100%); }

/* Kolory inoxu: jak .cfg-inox-swatch z zewn. (szczotkowana stal, pionowe rysy) */
.k4-inox { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 8px;
    border: 1px solid rgba(0,0,0,.09); font-size: .72rem; font-weight: 800; letter-spacing: .06em; color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), inset 0 -6px 12px rgba(0,0,0,.08);
    background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 1px, rgba(0,0,0,0) 1px 3px), var(--k4-inox-tlo); }
.k4-inox-nikiel { --k4-inox-tlo: linear-gradient(135deg, #f4f5f7 0%, #c6cbd1 38%, #eef0f2 58%, #a9b0b7 100%); }
.k4-inox-czarny { --k4-inox-tlo: linear-gradient(135deg, #454545 0%, #171717 45%, #303030 68%, #0b0b0b 100%); }
.k4-inox-zloty  { --k4-inox-tlo: linear-gradient(135deg, #f4e3ad 0%, #c9a24a 40%, #ecd692 60%, #a3792a 100%); }
.k4-inox-ral    { --k4-inox-tlo: linear-gradient(135deg, #d9534f 0%, #e8a33d 33%, #5aa469 66%, #3b78c2 100%); text-shadow: 0 1px 2px rgba(0,0,0,.45); }

/* Strony inoxu: rysunek skrzydła z listwą z jednej albo z obu stron */
.k4-strony { display: block; width: 58px; height: 58px; position: relative; }
.k4-strony::before { content: ''; position: absolute; left: 14px; right: 14px; top: 3px; bottom: 3px; border-radius: 3px;
    background: #fdf7ec; border: 1.6px solid var(--kp-brown, #552d1c); }
.k4-strony::after { content: ''; position: absolute; top: 9px; bottom: 9px; width: 4px; border-radius: 2px;
    background: linear-gradient(90deg, #c6cbd1, #f4f5f7, #a9b0b7); left: 22px; }
.k4-strony-2::after { left: 22px; box-shadow: 14px 0 0 0 #c6cbd1; }

/* Pole numeru RAL (cel dotykowy ≥ 44 px, 16 px czcionki: iOS nie powiększa strony przy fokusie) */
.k4-ral { margin: 12px 0 0; }
.k4-ral label { display: block; font-size: .8125rem; font-weight: 700; color: var(--kp-brown-dark); margin-bottom: 6px; }
.k4-ral-pole { display: inline-flex; align-items: stretch; border: 2px solid #f0e7d6; border-radius: 12px; background: #fff; overflow: hidden; max-width: 100%; }
.k4-ral-pole:focus-within { border-color: var(--kp-brown); box-shadow: 0 0 0 3px rgba(196,144,96,.2); }
.k4-ral-pre { display: flex; align-items: center; padding: 0 12px; background: #f9f4ea; font-weight: 800; font-size: .875rem; color: var(--kp-brown-mid); }
.k4-ral input { width: 9em; min-width: 0; height: 48px; border: 0; outline: 0; padding: 0 12px; font: inherit; font-size: 1rem; font-weight: 700; color: var(--kp-brown-dark); background: transparent; }

/* Dopisek „podgląd poglądowy" wstawiany przez k4.js pod podglądem (przy szybie, której wrapper nie rysuje) */
.k4-podglad-nota { display: flex; align-items: flex-start; gap: 7px; margin: 8px 2px 0; font-size: .75rem; line-height: 1.35; color: var(--kp-muted, #8a7a68); }
.k4-podglad-nota i { color: var(--kp-gold, #c49060); margin-top: 2px; }

/* Wąskie ekrany (≤ 560 px): kafle szyb jak w zewn. (większe pole zdjęcia), pole RAL na całą szerokość */
@media (max-width: 560px) {
    #k4-szyby-standard .cfg-klamka-foto, #k4-szyby-doplata .cfg-klamka-foto { height: 120px; }
    .k4-ral-pole { display: flex; }
    .k4-ral input { width: auto; flex: 1; }
}

/* Żółty pasek „podgląd poglądowy" w kroku 4 zastąpiony szarym tekstem 13 px pod siatką (plan stylu 18.10.2026, pkt 9) */
#k4-nota-poglad { background: none; border: 0; box-shadow: none; padding: 0; margin: 12px 2px 0; font-size: .8125rem; line-height: 1.45; color: #6b5e55; }
#k4-nota-poglad i { color: #8a6f52; }
.k4-podglad-nota { font-size: .8125rem; color: #6b5e55; }