/*
 * gwint — makieta sklepu hurtowni technicznej (B2B).
 *
 * 1. **Gęsto i rzeczowo.** Klient zamawia co tydzień te same rzeczy — liczy się, ile pozycji widzi naraz,
 *    nie nastrój. Wiersze zamiast kafli, tabele zamiast kart, kody w kroju o stałej szerokości.
 * 2. **Jeden kolor sygnałowy.** Żółty jak oznaczenia BHP to wyłącznie wypełnienia (przyciski, odliczanie,
 *    znak logo) z grafitowym tekstem. Linki i wymiary na rysunkach są stalowoniebieskie.
 * 3. **Kalka.** Rysunki techniczne stoją na tle w kratkę (sekcja 07) — to zastępuje zdjęcia produktów.
 * 4. **Tabele na telefonie stają się kartami** (sekcja 10): nagłówek kolumny wchodzi do komórki z `data-etykieta`.
 * 5. **BEM i zmienne.** Kolory tylko ze zmiennych; ciemne obszary (`sekcja--ciemna`, nagłówek, stopka)
 *    przełączają zmienne, nie reguły.
 */

/* ——— 01 · Zmienne i reset ———————————————————————————————————————————— */

:root {
	--tlo: #F3F4F6;
	--papier: #FFFFFF;
	--grafit: #14171A;
	--grafit-2: #1F2429;
	--grafit-3: #2B3138;
	--tekst: #14171A;
	--przygas: #555E68;
	--linia: #D5D9DE;
	--linia-mocna: #B3BAC3;
	--kratka: #E7EBF0;
	--sygnal: #FFC20E;
	--sygnal-ciemny: #E5A800;
	--na-sygnale: #14171A;
	--niebieski: #1F5FAD;
	--ok: #1E7034;
	--uwaga: #8A5300;
	--blad: #B42318;
	--blad-tlo: #FDF0EE;

	--sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

	--kontener: 1320px;
	--margines: clamp(16px, 3vw, 32px);
	--promien: 4px;
	--krzywa: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Ciemne obszary przełączają zmienne — te same przyciski i linki działają na obu tłach. */
.sekcja--ciemna, .naglowek, .stopka, .pasek-info {
	--tekst: #E9ECEF;
	--przygas: #A9B1BA;
	--linia: #343B43;
	--niebieski: #8CB8EC;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
/* Safari na iOS ignoruje overflow-x:hidden przy przewijaniu palcem; clip nie psuje sticky. */
html, body { overflow-x: clip; }
body { margin: 0; background: var(--tlo); color: var(--tekst); font: 400 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset, blockquote, pre { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: var(--niebieski); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; }

.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.przeskocz { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--sygnal); color: var(--na-sygnale); font-weight: 600; text-decoration: none; }
.przeskocz:focus { top: 12px; }
.ikona { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ——— 02 · Typografia ————————————————————————————————————————————————— */

.tytul { font-weight: 600; letter-spacing: -0.015em; line-height: 1.12; color: var(--tekst); }
.tytul--hero { font-size: clamp(2.4rem, 4.6vw, 3.8rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; }
.tytul--strona { font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 700; letter-spacing: -0.025em; }
.tytul--sekcja { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.tytul--produkt { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.tytul--pod { font-size: 1.2rem; }
.lid { max-width: 62ch; margin-top: 12px; font-size: 1.05rem; color: var(--przygas); }
.etykieta { margin-bottom: 12px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--przygas); }
.etykieta--sygnal { color: var(--sygnal); }
.kod { font-family: var(--mono); font-size: 0.92em; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; }
.link-kod { font-family: var(--mono); font-size: 0.92em; }

/* ——— 03 · Układ ——————————————————————————————————————————————————————— */

.kontener { width: 100%; max-width: var(--kontener); margin-inline: auto; padding-inline: var(--margines); }
.kontener--waski { max-width: 860px; }
.sekcja { padding-block: clamp(40px, 6vw, 80px); }
.sekcja--sklep, .sekcja--koszyk, .sekcja--kasa { padding-top: 8px; }
.sekcja--szara { background: var(--papier); border-block: 1px solid var(--linia); }
.sekcja--ciemna { background: var(--grafit); color: var(--tekst); }
.sekcja--warianty { padding-top: 0; }

.naglowek-sekcji { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 22px; }
.naglowek-sekcji__lid { margin-top: 6px; font-size: 14px; color: var(--przygas); }
.naglowek-strony { padding-block: 24px 28px; }
.okruchy { margin-bottom: 12px; font-size: 13px; color: var(--przygas); }
.okruchy__link { color: var(--przygas); }

/* ——— 04 · Przyciski, pola, chipy ————————————————————————————————————————— */

.przycisk {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 46px; padding: 0 20px; border: 1.5px solid transparent; border-radius: var(--promien);
	font-size: 15px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.przycisk--pelny { background: var(--sygnal); color: var(--na-sygnale); }
.przycisk--pelny:hover { background: var(--sygnal-ciemny); }
.przycisk--obrys { border-color: var(--linia-mocna); color: var(--tekst); background: var(--papier); }
.sekcja--ciemna .przycisk--obrys { background: transparent; border-color: var(--przygas); }
.przycisk--obrys:hover { border-color: var(--tekst); }
.przycisk--maly { min-height: 38px; padding: 0 14px; font-size: 14px; }
.przycisk--szeroki { width: 100%; }
.przycisk:disabled { opacity: 1; background: var(--linia); color: var(--przygas); cursor: not-allowed; }

.link-strzalka { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; font-weight: 600; font-size: 14px; color: var(--niebieski); text-decoration: none; }
.link-strzalka__ikona { width: 16px; height: 16px; transition: transform 0.2s; }
.link-strzalka:hover { text-decoration: underline; }
.link-strzalka:hover .link-strzalka__ikona { transform: translateX(3px); }
.link-akcja { display: inline-flex; align-items: center; min-height: 24px; padding: 0; border: 0; background: none; font-size: 14px; font-weight: 500; color: var(--niebieski); text-decoration: underline; text-underline-offset: 3px; }

.pole-wejscie, .pole-tekst {
	width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--linia-mocna); border-radius: var(--promien);
	background: var(--papier); font-size: 15px;
}
.pole-tekst { padding: 10px 12px; resize: vertical; line-height: 1.5; }
.pole-tekst--kod, .pole-wejscie--kod { font-family: var(--mono); font-size: 14px; text-transform: uppercase; }
.pole-tekst--kod::placeholder, .pole-wejscie--kod::placeholder { text-transform: none; }
.pole-wejscie:focus, .pole-tekst:focus, .pole-ilosc:focus { outline: 2px solid var(--niebieski); outline-offset: 0; border-color: var(--niebieski); }
.pole-wejscie[aria-invalid="true"] { border-color: var(--blad); background: var(--blad-tlo); }
.pole-ilosc { width: 72px; min-height: 40px; padding: 0 8px; border: 1px solid var(--linia-mocna); border-radius: var(--promien); background: var(--papier); font-family: var(--mono); font-size: 15px; text-align: right; }

.pole { display: grid; gap: 5px; align-content: start; }
.pole--szerokie { grid-column: 1 / -1; }
.pole--waskie { max-width: 110px; }
.pole__etykieta { font-size: 14px; font-weight: 600; }
.pole__opcjonalne { font-weight: 400; color: var(--przygas); }
.pole__pomoc { font-size: 13px; color: var(--przygas); }
.pole__pomoc--ok { color: var(--ok); }
.pole__pomoc--blad { color: var(--blad); }
.pole__blad { font-size: 13px; color: var(--blad); }
.pole__blad:empty { display: none; }
.pole__wiersz { display: flex; gap: 8px; }
.pole[hidden] { display: none; }
.pola { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pola + .pola { margin-top: 14px; }

.chipy { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 16px; }
.chipy::-webkit-scrollbar { display: none; }
.chipy--zawijane { flex-wrap: wrap; overflow: visible; padding-bottom: 0; }
.chip { flex-shrink: 0; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--linia-mocna); border-radius: var(--promien); background: var(--papier); font-size: 14px; font-weight: 500; color: var(--tekst); text-decoration: none; }
.chip:hover { border-color: var(--tekst); }
.chip[aria-current] { background: var(--grafit); border-color: var(--grafit); color: #FFFFFF; }
.chip--kod { font-family: var(--mono); font-size: 13px; }
.chip--maly { min-height: 28px; padding: 0 10px; font-size: 13px; background: var(--tlo); }

.komunikat { margin-top: 12px; padding: 10px 14px; border-left: 3px solid var(--ok); background: var(--papier); font-size: 14px; font-weight: 500; }
.komunikat:empty { display: none; }
.uwaga { margin-top: 16px; padding: 12px 14px; border-left: 3px solid var(--sygnal); background: var(--papier); font-size: 14px; }

.zgoda { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--przygas); cursor: pointer; }
.zgoda__pole { width: 20px; height: 20px; margin: 0; accent-color: var(--grafit); }

/* ——— 05 · Pasek, nagłówek, kategorie ———————————————————————————————————————— */

.pasek-info { background: #0B0D0F; color: var(--tekst); font-size: 13px; }
.pasek-info__wnetrze { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 34px; }
.pasek-info__wysylka { display: flex; align-items: center; gap: 8px; }
.pasek-info__wysylka .ikona { width: 18px; height: 18px; color: var(--sygnal); }
.pasek-info__wysylka strong { color: var(--sygnal); font-family: var(--mono); font-weight: 600; }
.pasek-info__dodatki { color: var(--przygas); }
.pasek-info__dodatki a { color: var(--tekst); }

.naglowek { background: var(--grafit); color: var(--tekst); }
.naglowek__wnetrze { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; min-height: 72px; }

.logo { display: inline-flex; align-items: center; gap: 10px; color: #FFFFFF; text-decoration: none; }
.logo__znak { display: grid; place-items: center; width: 36px; height: 36px; background: var(--sygnal); color: var(--na-sygnale); font-family: var(--mono); font-size: 20px; font-weight: 600; }
.logo__nazwa { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }
.logo__dopisek { max-width: 80px; font-family: var(--mono); font-size: 10px; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; color: var(--przygas); }

.szukaj { display: flex; max-width: 640px; width: 100%; }
.szukaj__pole { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--promien) 0 0 var(--promien); background: #FFFFFF; color: var(--grafit); font-size: 15px; }
.szukaj__pole::placeholder { color: #5E6773; }
.szukaj__przycisk { display: grid; place-items: center; width: 52px; border: 0; border-radius: 0 var(--promien) var(--promien) 0; background: var(--sygnal); color: var(--na-sygnale); }
.szukaj__pole:focus { outline: 2px solid var(--sygnal); outline-offset: 0; }

.naglowek__akcje { display: flex; align-items: center; gap: 8px; }
.naglowek__akcja { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border-radius: var(--promien); color: var(--tekst); font-size: 14px; text-decoration: none; }
.naglowek__akcja:hover, .naglowek__akcja[aria-current] { background: var(--grafit-3); }
.naglowek__licznik { position: absolute; top: 2px; left: 22px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--sygnal); color: var(--na-sygnale); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.naglowek__licznik[hidden] { display: none; }

/* Przełącznik netto/brutto działa tylko ze skryptem, więc bez niego go nie ma — ceny stoją w netto z podpisem. */
.przelacznik-cen { display: none; padding: 3px; border: 1px solid var(--linia); border-radius: var(--promien); }
.js .przelacznik-cen { display: inline-flex; }
.przelacznik-cen__opcja { position: relative; cursor: pointer; }
.przelacznik-cen__pole { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.przelacznik-cen__opcja span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 10px; border-radius: 3px; font-family: var(--mono); font-size: 13px; color: var(--przygas); }
.przelacznik-cen__pole:checked + span { background: var(--sygnal); color: var(--na-sygnale); font-weight: 600; }
.przelacznik-cen__pole:focus-visible + span { outline: 2px solid var(--sygnal); outline-offset: 2px; }

.kategorie-nav { background: var(--papier); border-bottom: 1px solid #D5D9DE; color: #14171A; }
.kategorie-nav__lista { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.kategorie-nav__lista::-webkit-scrollbar { display: none; }
.kategorie-nav__link { display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 14px; border-bottom: 3px solid transparent; color: #14171A; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.kategorie-nav__link:hover { border-bottom-color: #B3BAC3; }
.kategorie-nav__link[aria-current] { border-bottom-color: var(--sygnal); }
.kategorie-nav__szybkie { margin-left: auto; }
.kategorie-nav__link--szybkie .ikona { width: 18px; height: 18px; }

@media (max-width: 1100px) {
	.logo__dopisek { display: none; }
	/* Napis przy ikonie chowamy tylko wizualnie — z display:none link „Konto” zostawał bez nazwy dla czytnika. */
	.naglowek__etykieta { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (max-width: 760px) {
	.pasek-info__dodatki { display: none; }
	.naglowek__wnetrze { grid-template-columns: auto 1fr; gap: 10px 12px; padding-block: 10px; min-height: 0; }
	.naglowek__akcje { justify-self: end; }
	.szukaj { grid-column: 1 / -1; grid-row: 2; max-width: none; }
	.kategorie-nav__szybkie { margin-left: 0; }
}

/* ——— 06 · Strona główna ——————————————————————————————————————————————— */

.hero { padding-block: clamp(32px, 5vw, 64px); background: var(--papier); border-bottom: 1px solid var(--linia); }
.hero__siatka { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.hero__przyciski { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hero__liczby { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--linia); }
.hero__liczby div { display: flex; flex-direction: column-reverse; }
.hero__liczby dd { font-family: var(--mono); font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; }
.hero__liczby dt { font-size: 13px; color: var(--przygas); }
.hero__kadr { position: relative; }
.hero__obraz { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--promien); }
.hero__odliczanie { position: absolute; left: -16px; bottom: -16px; display: grid; gap: 2px; max-width: 280px; padding: 16px 18px; background: var(--sygnal); color: var(--na-sygnale); box-shadow: 0 10px 30px rgba(20, 23, 26, 0.18); }
.hero__odliczanie-etykieta { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.hero__odliczanie-etykieta .ikona { width: 16px; height: 16px; }
.hero__odliczanie-czas { font-family: var(--mono); font-size: 1.7rem; font-weight: 600; line-height: 1.1; }
.hero__odliczanie-opis { font-size: 13px; }

.kategorie { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.kategoria { display: grid; align-content: start; overflow: hidden; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--papier); color: var(--tekst); text-decoration: none; transition: border-color 0.15s; }
.kategoria:hover { border-color: var(--grafit); }
.kategoria__obraz { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.kategoria__tresc { display: grid; gap: 4px; padding: 14px 16px 16px; }
.kategoria__nazwa { font-size: 1.1rem; font-weight: 600; }
.kategoria__opis { font-size: 13px; color: var(--przygas); line-height: 1.4; }
.kategoria__ile { margin-top: 6px; font-family: var(--mono); font-size: 12px; color: var(--przygas); }

.szybkie-zajawka { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.szybkie-zajawka .przycisk { margin-top: 24px; }
.kroki { display: grid; gap: 8px; margin-top: 22px; }
.kroki__krok { display: flex; align-items: center; gap: 12px; }
.kroki__nr { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--sygnal); color: var(--sygnal); font-family: var(--mono); font-size: 13px; font-weight: 600; }
.terminal { border: 1px solid var(--linia); border-radius: var(--promien); background: #0B0D0F; overflow: hidden; }
.terminal__glowa { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--linia); font-family: var(--mono); font-size: 12px; color: var(--przygas); }
.terminal__tresc { padding: 18px; font-family: var(--mono); font-size: 15px; line-height: 1.9; color: #E9ECEF; white-space: pre; overflow-x: auto; }
.terminal__tresc::after { content: "▌"; color: var(--sygnal); animation: kursor 1s steps(1) infinite; }
@keyframes kursor { 50% { opacity: 0; } }

.korzysci { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--linia); }
.korzysc { padding: 22px; border-right: 1px solid var(--linia); }
.korzysc:last-child { border-right: 0; }
.korzysc__ikona { width: 28px; height: 28px; color: var(--niebieski); }
.korzysc__tytul { margin-top: 12px; font-size: 1.05rem; font-weight: 600; }
.korzysc__tekst { margin-top: 6px; font-size: 14px; color: var(--przygas); }

.normy { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px 48px; align-items: center; }

@media (max-width: 1100px) {
	.kategorie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.korzysci { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.korzysc:nth-child(2) { border-right: 0; }
	.korzysc:nth-child(-n+2) { border-bottom: 1px solid var(--linia); }
}

@media (max-width: 860px) {
	.hero__siatka, .szybkie-zajawka, .normy { grid-template-columns: 1fr; }
	.hero__odliczanie { left: 12px; bottom: 12px; }
}

@media (max-width: 560px) {
	.kategorie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kategoria__opis { display: none; }
	.korzysci { grid-template-columns: 1fr; }
	.korzysc { border-right: 0; border-bottom: 1px solid var(--linia); }
	.hero__liczby { grid-template-columns: 1fr 1fr; }
	.hero__liczby dd { font-size: 1.3rem; }
}

/* ——— 07 · Kalka i rysunki techniczne ————————————————————————————————————— */

.kalka {
	display: grid; place-items: center; border: 1px solid var(--linia); border-radius: var(--promien);
	background-color: #FFFFFF;
	background-image: linear-gradient(var(--kratka) 1px, transparent 1px), linear-gradient(90deg, var(--kratka) 1px, transparent 1px);
	background-size: 12px 12px; background-position: -1px -1px;
}
.kalka--duza { aspect-ratio: 3 / 2; padding: clamp(12px, 3vw, 32px); background-size: 16px 16px; }
.rysunek { display: block; width: 100%; height: auto; overflow: visible; }
.r-linia { fill: none; stroke: #14171A; stroke-width: 1.6; stroke-linejoin: round; }
.r-cienka { fill: none; stroke: #14171A; stroke-width: 0.8; }
.r-tlo { fill: #FFFFFF; }
.r-ciemne { fill: #C9CED6; }
.r-kreski { stroke-dasharray: 3 3; }
.r-wymiar { fill: none; stroke: #1F5FAD; stroke-width: 0.8; }
.r-litera { fill: #1F5FAD; font: italic 600 12px var(--mono); }

.legenda { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 20px; margin-top: 12px; font-size: 14px; }
.legenda__wiersz { display: flex; gap: 10px; align-items: baseline; }
.legenda__litera { min-width: 28px; font-family: var(--mono); font-style: italic; font-weight: 600; color: #1F5FAD; }

/* ——— 08 · Lista produktów (wiersze) ——————————————————————————————————————— */

.lista-produktow { border-top: 1px solid var(--linia); background: var(--papier); }
.wiersz {
	position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr) 170px 150px 200px; gap: 20px; align-items: center;
	padding: 14px 16px; border: 1px solid var(--linia); border-top: 0; transition: background 0.15s;
}
.wiersz:hover { background: #FAFBFC; }
.wiersz--ukryty { display: none; }
.wiersz__rysunek { aspect-ratio: 4 / 3; padding: 6px; }
.wiersz__meta { font-family: var(--mono); font-size: 12px; color: var(--przygas); }
.wiersz__nazwa { margin-top: 2px; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.wiersz__link { color: var(--tekst); text-decoration: none; }
.wiersz__link:hover { color: var(--niebieski); text-decoration: underline; }
.wiersz__krotko { margin-top: 2px; font-size: 13px; color: var(--przygas); }
.wiersz__warianty { margin-top: 4px; font-family: var(--mono); font-size: 12px; color: var(--przygas); }
.wiersz__cena { text-align: right; }
.wiersz__od { font-size: 13px; color: var(--przygas); }
.wiersz__jednostka { font-size: 12px; color: var(--przygas); }
.wiersz__akcja { display: flex; justify-content: flex-end; }
.wiersz__dodaj { display: flex; gap: 6px; }
.wiersz__dodaj .pole-ilosc { width: 60px; }
.znacznik-nowosc { padding: 0 6px; background: var(--sygnal); color: var(--na-sygnale); font-weight: 600; }

.cena { white-space: nowrap; }
.cena__kwota { font-family: var(--mono); font-weight: 600; letter-spacing: -0.02em; color: var(--tekst); }
.cena__typ { font-size: 12px; color: var(--przygas); }
.cena--duza .cena__kwota { font-size: 1.25rem; }

.stan { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.stan::before { content: ""; width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: currentColor; }
.stan--jest { color: var(--ok); }
.stan--malo { color: var(--uwaga); }
.stan--brak { color: var(--przygas); }
.stan--brak::before { background: transparent; border: 1.5px solid currentColor; }

@media (max-width: 1100px) {
	.wiersz { grid-template-columns: 96px minmax(0, 1fr) 150px; grid-template-areas: "rys opis cena" "rys stan akcja"; row-gap: 8px; }
	.wiersz__rysunek { grid-area: rys; align-self: start; }
	.wiersz__opis { grid-area: opis; }
	.wiersz__stan { grid-area: stan; }
	.wiersz__cena { grid-area: cena; }
	.wiersz__akcja { grid-area: akcja; }
}

@media (max-width: 600px) {
	.wiersz { grid-template-columns: 80px minmax(0, 1fr); grid-template-areas: "rys opis" "rys stan" "cena cena" "akcja akcja"; gap: 8px 14px; padding: 14px 12px; }
	.wiersz__krotko { display: none; }
	.wiersz__cena { display: flex; align-items: baseline; gap: 8px; text-align: left; }
	.wiersz__akcja { justify-content: stretch; }
	.wiersz__akcja > * { width: 100%; }
	.wiersz__dodaj .przycisk { flex: 1; }
}

/* ——— 09 · Sklep: filtry ——————————————————————————————————————————————————— */

.sklep { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; }
.filtry { position: sticky; top: 16px; display: grid; padding: 16px; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--papier); }
.filtry__glowa { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--linia); }
.filtry__tytul { font-size: 1rem; font-weight: 600; }
.filtry__zamknij { display: none; width: 44px; height: 44px; border: 0; background: none; place-items: center; }
.filtry__grupa { padding: 12px 0; border-bottom: 1px solid var(--linia); }
.filtry__grupa:last-of-type { border-bottom: 0; }
.filtry__legenda { float: left; width: 100%; margin-bottom: 6px; padding: 0; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--przygas); }
.filtry__legenda + * { clear: both; }
.filtry__siatka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 6px; }
.filtry__cena { display: flex; align-items: center; gap: 6px; }
.filtry__liczba { width: 76px; min-height: 38px; padding: 0 8px; border: 1px solid var(--linia-mocna); border-radius: var(--promien); background: var(--papier); font-family: var(--mono); }
.filtry__pokaz { display: none; }
.wybor { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: 14px; cursor: pointer; }
.wybor__pole { width: 18px; height: 18px; margin: 0; accent-color: var(--grafit); }
.wybor__ile { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--przygas); }

.sklep__pasek { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.sklep__ile { font-family: var(--mono); font-size: 13px; color: var(--przygas); }
.sklep__filtry-przelacz { display: none; }
.sortuj { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.sortuj__pole { min-height: 38px; padding: 0 30px 0 10px; border: 1px solid var(--linia-mocna); border-radius: var(--promien); background: var(--papier); font-size: 14px; }
.pusto { display: none; margin-top: 16px; padding: 32px 20px; border: 1px dashed var(--linia-mocna); text-align: center; }
.pusto--widoczne { display: block; }
.pusto__tekst { margin-bottom: 14px; }

@media (max-width: 900px) {
	.sklep { grid-template-columns: 1fr; }
	.sklep__filtry-przelacz { display: inline-flex; }
	.js .filtry {
		position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(340px, 88vw); border-radius: 0; overflow-y: auto; align-content: start;
		transform: translateX(-105%); visibility: hidden; transition: transform 0.3s var(--krzywa), visibility 0s linear 0.3s;
	}
	.js .filtry--otwarte { transform: none; visibility: visible; transition: transform 0.3s var(--krzywa); box-shadow: 0 0 0 100vmax rgba(11, 13, 15, 0.5); }
	.js .filtry__pokaz { display: inline-flex; margin-top: 12px; }
	.js .filtry__zamknij { display: inline-grid; }
	.sklep__ile { order: 3; width: 100%; }
}
html:not(.js) .filtry__pokaz { display: inline-flex; margin-top: 12px; }
.blokada-przewijania { overflow: hidden; }

/* ——— 10 · Tabele (warianty, koszyk, szybkie zamówienie, konto) ——————————————————— */

.tabela-przewijana { overflow-x: auto; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--papier); }
.tabela-przewijana[hidden] { display: none; }
.tabela-przewijana:focus-visible { outline: 2px solid var(--niebieski); outline-offset: 2px; }
.tabela { width: 100%; font-size: 14px; }
.tabela th, .tabela td { padding: 10px 12px; border-bottom: 1px solid var(--linia); text-align: left; vertical-align: middle; }
.tabela thead th { position: sticky; top: 0; background: #EEF0F3; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.tabela tbody tr:last-child > * { border-bottom: 0; }
.tabela tbody tr:hover { background: #FAFBFC; }
.tabela td { font-family: var(--mono); font-size: 13px; }
.tabela .tabela__produkt { font-family: var(--sans); font-size: 14px; }
/* Komórki liczbowe mają krój stały, ale przyciski w nich — zwykły; „Zamów ponownie” w mono wyglądało jak kod. */
.tabela .przycisk, .tabela .plik__link { font-family: var(--sans); }

.wariant--wybrany { background: #FFF8E1 !important; }
.wariant__kod { font-weight: 500; }
.wariant__szt { display: block; font-size: 11px; color: var(--przygas); }
.wariant__ilosc { text-align: right !important; }
.tabela--warianty thead th:last-child { text-align: right; }

/* Pasek z sumą trzyma się dołu ekranu, dopóki tabela jest widoczna — przy 8 rozmiarach nie trzeba przewijać do przycisku. */
.tabela-wariantow__stopa {
	position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
	margin-top: -1px; padding: 12px 16px; border: 1px solid var(--linia); background: var(--grafit); color: #E9ECEF;
}
.tabela-wariantow__suma { font-size: 14px; }
.tabela-wariantow__suma strong { font-family: var(--mono); color: var(--sygnal); }

.tabela__usun { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--promien); background: none; color: var(--przygas); }
.tabela__usun:hover { background: var(--blad-tlo); color: var(--blad); }
.tabela__usun .ikona { width: 18px; height: 18px; }
.tabela__nazwa { color: var(--tekst); font-weight: 600; text-decoration: none; }
.tabela__nazwa:hover { color: var(--niebieski); text-decoration: underline; }
.tabela__param { display: block; font-family: var(--mono); font-size: 12px; color: var(--przygas); }
.tabela__rabat { display: block; font-size: 11px; color: var(--ok); }
.tabela__przed { color: var(--przygas); font-size: 12px; }

/* Na telefonie wiersz tabeli staje się kartą: nagłówek kolumny wchodzi do komórki z data-etykieta. */
@media (max-width: 760px) {
	.tabela-przewijana { overflow: visible; border: 0; background: transparent; }
	.tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.tabela, .tabela tbody { display: block; }
	.tabela tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 12px; margin-bottom: 10px; padding: 12px; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--papier); }
	.tabela th, .tabela td { display: block; padding: 0; border: 0; }
	.tabela td[data-etykieta]::before, .tabela th[data-etykieta]::before { content: attr(data-etykieta); display: block; font-family: var(--mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--przygas); }
	.tabela th[data-etykieta="Kod"]::before { display: none; }
	.tabela tr > :first-child { grid-column: 1 / -1; padding-bottom: 6px; border-bottom: 1px solid var(--linia); }
	.wariant__ilosc { text-align: left !important; }
	.tabela .tabela__produkt { grid-column: 1 / -1; }
	.tabela-wariantow__stopa { margin-top: 0; }
}

/* ——— 11 · Strona produktu ——————————————————————————————————————————————— */

.produkt { padding-block: 20px 32px; }
.produkt__siatka { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.produkt__meta { font-family: var(--mono); font-size: 12px; color: var(--przygas); }
.produkt__krotko { margin: 10px 0 14px; font-size: 1.05rem; color: var(--przygas); }
.produkt__cena { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linia); font-size: 14px; color: var(--przygas); }
.produkt__cena .cena--duza .cena__kwota { font-size: 1.8rem; }
.produkt__jednostka { margin-top: 2px; font-size: 13px; }
.produkt__wysylka { display: flex; align-items: center; gap: 8px; margin: 16px 0; font-size: 14px; }
.produkt__wysylka .ikona { color: var(--niebieski); }

.progi { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--linia); border-left: 3px solid var(--sygnal); background: var(--papier); }
.progi__tytul { font-size: 14px; font-weight: 600; }
.progi__lista { display: flex; gap: 8px; margin-top: 8px; }
.progi__prog { display: flex; align-items: baseline; gap: 8px; padding: 6px 10px; background: var(--tlo); font-size: 13px; }
.progi__prog strong { font-family: var(--mono); color: var(--ok); }
.progi__uwaga { margin-top: 8px; font-size: 12px; color: var(--przygas); }

.szczegoly { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; }
.szczegoly .tytul--pod { margin-bottom: 10px; }
.szczegoly__opis { margin-bottom: 28px; max-width: 62ch; color: var(--przygas); }
.dane { border-top: 1px solid var(--linia); }
.dane__wiersz { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--linia); font-size: 14px; }
.dane__wiersz dt { color: var(--przygas); }
.pliki { display: grid; gap: 6px; }
.plik__link { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--papier); color: var(--tekst); text-decoration: none; }
.plik__link:hover { border-color: var(--niebieski); }
.plik__link--maly { display: inline-flex; min-height: 36px; font-size: 13px; }
.plik__ikona { color: var(--niebieski); }
.plik__nazwa { flex: 1; font-weight: 500; }
.plik__info { font-family: var(--mono); font-size: 12px; color: var(--przygas); }
.pliki__uwaga { margin-top: 8px; font-size: 13px; color: var(--przygas); }
.pliki__uwaga:empty { display: none; }

@media (max-width: 900px) {
	.produkt__siatka, .szczegoly { grid-template-columns: 1fr; }
	.dane__wiersz { grid-template-columns: 130px minmax(0, 1fr); }
}

/* ——— 12 · Szybkie zamówienie ——————————————————————————————————————————————— */

.szybkie { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: start; }
.szybkie__wejscie { display: grid; gap: 16px; }
.karta-formularza { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--papier); }
.karta-formularza__opis { font-size: 14px; color: var(--przygas); }
.karta-formularza__przyciski { display: flex; flex-wrap: wrap; gap: 8px; }
.plik-csv { display: grid; gap: 6px; padding-top: 12px; border-top: 1px dashed var(--linia); }
.plik-csv__etykieta { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.plik-csv__pole { font-size: 14px; }
.po-kodzie { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: 8px; align-items: end; }

.szybkie__wynik { position: sticky; top: 16px; display: grid; gap: 12px; padding: 18px; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--papier); }
.szybkie__stan { font-size: 14px; color: var(--przygas); }
.bledy { display: grid; gap: 6px; }
.bledy:empty { display: none; }
.blad-kodu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; border-left: 3px solid var(--blad); background: var(--blad-tlo); font-size: 14px; }
.blad-kodu .kod { color: var(--blad); }
.szybkie__stopa { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-top: 12px; border-top: 1px solid var(--linia); }
.szybkie__stopa[hidden] { display: none; }
.szybkie__suma { margin-right: auto; font-size: 14px; }
.szybkie__suma strong { font-family: var(--mono); font-size: 1.15rem; }

@media (max-width: 960px) {
	.szybkie { grid-template-columns: 1fr; }
	.szybkie__wynik { position: static; }
}

@media (max-width: 480px) {
	.po-kodzie { grid-template-columns: minmax(0, 1fr) 80px; }
	.po-kodzie .przycisk { grid-column: 1 / -1; }
}

/* ——— 13 · Koszyk i podsumowanie ———————————————————————————————————————————— */

.koszyk, .kasa { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.do-darmowej { margin-bottom: 12px; padding: 12px 16px; border: 1px solid var(--linia); background: var(--papier); font-size: 14px; }
.do-darmowej strong { font-family: var(--mono); }
.do-darmowej__pasek { height: 6px; margin-top: 8px; background: var(--tlo); overflow: hidden; }
.do-darmowej__wypelnienie { display: block; width: 0; height: 100%; background: var(--sygnal); transition: width 0.4s var(--krzywa); }
.tabela--koszyk .pole-ilosc { width: 70px; }

.podpowiedzi { display: grid; gap: 6px; margin-top: 12px; }
.podpowiedzi:empty { display: none; }
.podpowiedz { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 14px; border-left: 3px solid var(--ok); background: var(--papier); font-size: 14px; }

.koszyk__narzedzia { display: grid; gap: 14px; margin-top: 20px; padding: 16px; border: 1px solid var(--linia); background: var(--papier); }
.koszyk__narzedzia .pole { max-width: 360px; }
.koszyk__przyciski { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.koszyk__przyciski--srodek { justify-content: center; margin-top: 20px; }
.koszyk__pusty { display: none; padding: 40px 24px; border: 1px dashed var(--linia-mocna); text-align: center; }
.koszyk__pusty p { margin: 10px auto 0; max-width: 52ch; color: var(--przygas); }
.koszyk--pusty { grid-template-columns: 1fr; }
.koszyk--pusty .koszyk__pusty { display: block; }
.koszyk--pusty .do-darmowej, .koszyk--pusty .tabela-przewijana, .koszyk--pusty .podpowiedzi, .koszyk--pusty .koszyk__narzedzia, .koszyk--pusty .podsumowanie { display: none; }

.podsumowanie { position: sticky; top: 16px; display: grid; gap: 14px; padding: 18px; border: 1px solid var(--linia); background: var(--papier); }
.podsumowanie__lista { font-size: 14px; }
.podsumowanie__lista > div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; }
.podsumowanie__lista dt { color: var(--przygas); }
.podsumowanie__lista dd { font-family: var(--mono); font-weight: 500; }
.podsumowanie__rabat dd { color: var(--ok); }
.podsumowanie__razem { margin-top: 6px; padding-top: 12px !important; border-top: 1px solid var(--linia); }
.podsumowanie__razem dt { color: var(--tekst) !important; font-weight: 600; }
.podsumowanie__razem dd { font-size: 1.4rem; font-weight: 600; }
.podsumowanie__uwaga { display: flex; gap: 8px; font-size: 13px; color: var(--przygas); }
.podsumowanie__uwaga .ikona { width: 18px; height: 18px; color: var(--niebieski); }
.podsumowanie__po { font-size: 13px; color: var(--przygas); }
.podsumowanie__po:empty { display: none; }
.pozycje-male { display: grid; }
.pozycja-mala { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linia); font-size: 13px; }
.pozycja-mala .kalka { aspect-ratio: 4 / 3; padding: 2px; }
.pozycja-mala__nazwa { font-weight: 500; line-height: 1.3; }
.pozycja-mala__kod { display: block; font-family: var(--mono); font-size: 11px; color: var(--przygas); }
.pozycja-mala .cena__kwota { font-size: 13px; }

.szuflada__tlo { position: fixed; inset: 0; z-index: 80; background: rgba(11, 13, 15, 0.5); opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0s linear 0.25s; }
.szuflada__panel {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 81; width: min(420px, 100vw); display: flex; flex-direction: column; background: var(--papier);
	transform: translateX(105%); visibility: hidden; transition: transform 0.3s var(--krzywa), visibility 0s linear 0.3s;
}
.szuflada--otwarta .szuflada__tlo { opacity: 1; visibility: visible; transition: opacity 0.25s; }
.szuflada--otwarta .szuflada__panel { transform: none; visibility: visible; transition: transform 0.3s var(--krzywa); }
.szuflada__glowa { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--linia); }
.szuflada__zamknij { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; }
.szuflada__tresc { flex: 1; overflow-y: auto; padding: 8px 20px; }
.szuflada__komunikat { margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--ok); background: var(--tlo); font-size: 14px; font-weight: 500; }
.szuflada__stopa { display: grid; gap: 8px; padding: 16px 20px 20px; border-top: 1px solid var(--linia); }
.szuflada__suma { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }

@media (max-width: 1000px) {
	.koszyk, .kasa { grid-template-columns: 1fr; }
	.podsumowanie { position: static; }
	.podsumowanie--kasa { order: -1; }
}

/* ——— 14 · Zamówienie (kasa) ——————————————————————————————————————————————— */

.kasa__krok { padding: 22px 0; border-bottom: 1px solid var(--linia); }
.kasa__krok:first-child { padding-top: 0; }
.kasa__legenda { float: left; width: 100%; display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 0; font-size: 1.2rem; font-weight: 600; }
.kasa__legenda + * { clear: both; }
.kasa__nr { display: inline-grid; place-items: center; width: 28px; height: 28px; background: var(--grafit); color: #FFFFFF; font-family: var(--mono); font-size: 13px; }
.kasa__zgody { padding: 18px 0; }
.kasa__info { margin-top: 10px; font-size: 13px; color: var(--przygas); text-align: center; }
.kasa__krok .przelacznik { margin-bottom: 14px; }

.przelacznik { display: inline-flex; padding: 3px; border: 1px solid var(--linia-mocna); border-radius: var(--promien); background: var(--papier); }
.przelacznik__opcja { position: relative; cursor: pointer; }
.przelacznik__pole { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.przelacznik__opcja span { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 3px; font-size: 14px; font-weight: 600; }
.przelacznik__pole:checked + span { background: var(--grafit); color: #FFFFFF; }
.przelacznik__pole:focus-visible + span { outline: 2px solid var(--niebieski); outline-offset: 2px; }

.opcje { display: grid; gap: 8px; }
.opcja { display: grid; grid-template-columns: 20px 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; border: 1.5px solid var(--linia); border-radius: var(--promien); background: var(--papier); cursor: pointer; }
.opcja:has(.opcja__pole:checked) { border-color: var(--grafit); }
.opcja[hidden] { display: none; }
.opcja__pole { width: 18px; height: 18px; margin: 0; accent-color: var(--grafit); }
.opcja__tresc { display: grid; }
.opcja__nazwa { font-weight: 600; }
.opcja__opis { font-size: 13px; color: var(--przygas); }
.opcja__cena { font-family: var(--mono); font-size: 14px; font-weight: 500; }

.potwierdzenie { display: none; grid-column: 1 / -1; padding: 40px 24px; border: 1px solid var(--linia); border-top: 4px solid var(--sygnal); background: var(--papier); text-align: center; }
.potwierdzenie p { margin-top: 10px; color: var(--przygas); }
.kasa--zlozona .kasa__formularz, .kasa--zlozona .podsumowanie { display: none; }
.kasa--zlozona .potwierdzenie { display: block; }

@media (max-width: 560px) {
	.pola { grid-template-columns: 1fr; }
	.pole__wiersz { flex-direction: column; }
}

/* ——— 15 · Konto firmowe ——————————————————————————————————————————————————— */

.konto { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.konto__nawigacja { position: sticky; top: 16px; border: 1px solid var(--linia); background: var(--papier); }
.konto__link { display: flex; align-items: center; min-height: 44px; padding: 0 16px; border-left: 3px solid transparent; color: var(--tekst); font-size: 14px; font-weight: 500; text-decoration: none; }
.konto__link:hover { background: var(--tlo); border-left-color: var(--sygnal); }
.konto__tresc { display: grid; gap: 20px; }
.panel { padding: 20px; border: 1px solid var(--linia); background: var(--papier); scroll-margin-top: 16px; }
.panel > .tytul { margin-bottom: 14px; }
.panel__opis { margin: -6px 0 14px; font-size: 14px; color: var(--przygas); }
.kafle-konta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kafel-konta { padding: 14px 16px; border: 1px solid var(--linia); background: var(--tlo); }
.kafel-konta__etykieta { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--przygas); }
.kafel-konta__wartosc { margin-top: 4px; font-family: var(--mono); font-size: 1.4rem; font-weight: 600; }
.kafel-konta__wartosc span { display: block; font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--przygas); }
.kafel-konta__opis { margin-top: 4px; font-size: 13px; color: var(--przygas); }
.limit { height: 8px; margin-top: 10px; background: var(--linia); }
.limit__wypelnienie { display: block; height: 100%; background: var(--grafit); }
.opiekun { display: flex; gap: 12px; align-items: center; margin-top: 8px; font-size: 13px; }
.opiekun__inicjaly { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; background: var(--grafit); color: var(--sygnal); font-family: var(--mono); font-weight: 600; }
.opiekun__imie { font-weight: 600; font-size: 15px; }
.status { display: inline-block; padding: 2px 8px; font-family: var(--sans); font-size: 12px; font-weight: 600; white-space: nowrap; }
.status--ok { background: #E6F2E9; color: var(--ok); }
.status--wyslane { background: #E8F0FA; color: var(--niebieski); }
.status--czeka { background: #FFF3D6; color: var(--uwaga); }
.listy { display: grid; gap: 8px; }
.lista-zakupowa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; padding: 12px 14px; border: 1px solid var(--linia); }
.lista-zakupowa__nazwa { font-weight: 600; }
.lista-zakupowa__opis { font-family: var(--mono); font-size: 12px; color: var(--przygas); }
.lista-zakupowa__akcje { display: flex; align-items: center; gap: 12px; }
.dane--konto .dane__wiersz { grid-template-columns: 160px minmax(0, 1fr); }

@media (max-width: 900px) {
	.konto { grid-template-columns: 1fr; }
	.konto__nawigacja { position: static; }
	.konto__nawigacja ul { display: flex; overflow-x: auto; scrollbar-width: none; }
	.konto__link { border-left: 0; border-bottom: 3px solid transparent; white-space: nowrap; }
	.kafle-konta { grid-template-columns: 1fr; }
}

/* ——— 16 · O firmie, kontakt ———————————————————————————————————————————————— */

.firma { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.firma__obraz { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--promien); }
.liczby { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--linia); }
.liczby__pozycja { display: flex; flex-direction: column-reverse; }
.liczby__pozycja dd { font-family: var(--mono); font-size: 1.8rem; font-weight: 600; letter-spacing: -0.02em; }
.liczby__pozycja dt { font-size: 13px; color: var(--przygas); }
.etapy { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--linia); counter-reset: etap; }
.etap { padding: 20px; border-right: 1px solid var(--linia); }
.etap:last-child { border-right: 0; }
.etap__nr { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--niebieski); }
.etap__tytul { margin-top: 8px; font-size: 1.05rem; font-weight: 600; }
.etap__tekst { margin-top: 4px; font-size: 14px; color: var(--przygas); }
.faq__element { border-bottom: 1px solid var(--linia); }
.faq__pytanie { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; cursor: pointer; list-style: none; font-weight: 600; }
.faq__pytanie::-webkit-details-marker { display: none; }
.faq__pytanie::after { content: "+"; flex-shrink: 0; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--linia-mocna); font-family: var(--mono); }
.faq__element[open] > .faq__pytanie::after { content: "−"; }
.faq__odpowiedz { padding-bottom: 16px; color: var(--przygas); }
.kontakt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.kontakt__obraz { width: 100%; margin-top: 20px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--promien); }
.formularz { padding: 20px; border: 1px solid var(--linia); background: var(--tlo); }
.formularz__wyslij { margin-top: 16px; }

@media (max-width: 900px) {
	.firma, .kontakt { grid-template-columns: 1fr; }
	.liczby, .etapy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.etap:nth-child(2) { border-right: 0; }
	.etap:nth-child(-n+2) { border-bottom: 1px solid var(--linia); }
}

/* ——— 17 · Stopka ———————————————————————————————————————————————————————— */

.stopka { padding-top: 48px; background: var(--grafit); color: var(--tekst); font-size: 14px; }
.stopka__gora { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding-bottom: 36px; }
.stopka__opis { margin-top: 14px; max-width: 40ch; color: var(--przygas); }
.stopka__tytul { margin-bottom: 10px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--przygas); }
.stopka__lista { display: grid; gap: 2px; }
.stopka__link { display: inline-flex; align-items: center; min-height: 30px; color: var(--tekst); text-decoration: none; }
.stopka__link:hover { color: var(--sygnal); text-decoration: underline; }
.stopka__adres { font-style: normal; margin-bottom: 8px; color: var(--przygas); }
.stopka__dol { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-block: 16px 24px; border-top: 1px solid var(--linia); font-size: 12px; color: var(--przygas); }

@media (max-width: 900px) {
	.stopka__gora { grid-template-columns: 1fr 1fr; }
	.stopka__marka { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
	.stopka__gora { grid-template-columns: 1fr; }
}

/* ——— 18 · Dostępność i ruch ——————————————————————————————————————————— */

:focus-visible { outline: 2px solid var(--niebieski); outline-offset: 2px; }
.naglowek :focus-visible, .stopka :focus-visible, .sekcja--ciemna :focus-visible, .pasek-info :focus-visible, .tabela-wariantow__stopa :focus-visible { outline-color: var(--sygnal); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Pola poniżej 16 px włączają auto-przybliżenie w Safari na iOS. */
@media (max-width: 768px) {
	input, select, textarea { font-size: 16px !important; }
}