/* ═══════════════════════════════════════════════════════════════════════════
   SEKCJE — wygląd layoutów z inc/scf-sekcje.php.

   Reguła porządkująca, przejęta ze starej strony i widoczna w każdej sekcji:
   nagłówek sekcji jest WYŚRODKOWANY i ma nad sobą dużo powietrza, a treść pod nim
   układa się w siatkę o równych kolumnach. Stara strona robiła to blokami Kadence;
   my robimy to jednym zestawem reguł, żeby wszystkie sekcje miały ten sam rytm.

   Wyjątki od środka: hero (H1 do lewej) i sekcje dwukolumnowe (salon, karta produktu).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Rytm pionowy sekcji ─────────────────────────────────────────────────── */
.sekcja { padding-block: var(--rytm-sekcji); }

/* Górny odstęp zerujemy TYLKO między sekcjami o tym samym tle — wtedy wystarcza
   dolny odstęp poprzedniej. Wcześniej reguła `.sekcja + .sekcja` zerowała go zawsze,
   więc sekcja bez tła stojąca pod białym pasem miała nagłówek dosłownie na jego
   krawędzi (0 px — „Wybrane produkty", „Realizacje", FAQ na stronie głównej). */
.sekcja:not([class*="wariant--"]) + .sekcja:not([class*="wariant--"]),
.sekcja.wariant--jasny + .sekcja.wariant--jasny,
.sekcja.wariant--alt + .sekcja.wariant--alt,
.sekcja.wariant--ciemny + .sekcja.wariant--ciemny { padding-top: 0; }
.wariant--jasny { background: var(--c-biel); }
.wariant--alt { background: var(--c-tlo-alt); }
.wariant--ciemny { background: var(--c-ciemne-tlo); color: var(--c-ciemne-tekst); }
.wariant--ciemny h2, .wariant--ciemny h3 { color: var(--c-ciemne-tekst); }
.wariant--ciemny .lead-sekcji { color: var(--c-ciemne-tekst-slaby); }


/* ── Nagłówek sekcji: wyśrodkowany, jak na starej stronie ────────────────── */
.sekcja > .kontener > h2,
.sekcja > .kontener > .nadtytul,
.sekcja > .kontener > .lead-sekcji {
	text-align: center;
	margin-inline: auto;
}
/* Nagłówki BEZ max-width — decyzja klienta 2026-09-30: sztuczny limit (22ch) łamał H2 w kilka
   krótkich linii, np. „Salon podłóg i drzwi w Bydgoszczy - adres i godziny”. Szerokość daje kontener. */
.sekcja > .kontener > .lead-sekcji { margin-bottom: 0; }
.sekcja > .kontener > h2 + .lead-sekcji { margin-top: calc(-1 * var(--s-2)); }

/* ── HERO ────────────────────────────────────────────────────────────────
   Stara strona otwiera się pełnowymiarowym zdjęciem. Zostawiamy jej skalę,
   ale kładziemy na nim treść, żeby pierwszy ekran mówił, co to za firma. */
.sekcja--hero { padding-block: 0; }
.hero {
	display: grid; gap: var(--s-8);
	align-items: center;
	padding-block: var(--s-12) var(--rytm-sekcji);
}
@media (min-width: 900px) {
	.hero {
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
		gap: var(--s-24);
		padding-block: var(--s-16) var(--rytm-sekcji);
		min-height: 34rem;
	}
}
.hero__tekst > :last-child { margin-bottom: 0; }
.hero__tytul { margin-bottom: var(--s-6); }
.hero__tekst .lead-sekcji,
.hero__tekst > p:not([class]) { font-size: var(--t-l); line-height: 1.55; color: var(--c-tekst-slaby); }

.hero__akcje { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin: var(--s-8) 0 0; }
.hero__telefon {
	display: inline-flex; align-items: center; min-height: 48px;
	font-family: var(--font-utility); font-size: var(--t-xs); font-weight: 600;
	letter-spacing: var(--tracking-utility); text-transform: uppercase;
}

/* Zdjęcie hero ma stały kadr, żeby strona nie skakała przy ładowaniu. */
.hero__media { margin: 0; }
.hero__media img {
	width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
	border-radius: var(--promien);
}
@media (min-width: 900px) {
	/* Stara strona otwierała się zdjęciem przez całą szerokość. Nie powtarzamy tego
	   ujemnym marginesem (najprostsza droga do poziomego przewijania) — zamiast tego
	   dajemy zdjęciu wysoki kadr, żeby trzymało skalę pierwszego ekranu. */
	.hero__media img { aspect-ratio: 5 / 6; height: 100%; max-height: 38rem; }
}

/* ── SLIDER (pełna szerokość) ────────────────────────────────────────────
   Odwzorowanie pasa, którym otwiera się stara strona: zdjęcie przez całą szerokość
   okna, proporcja 2,4:1, kropki bez strzałek.

   Taśma przewija się natywnie (`overflow-x` + `scroll-snap`), a nie transformem.
   Dzięki temu bez JS slider dalej działa — zostaje przewijalna lista zdjęć —
   a na telefonie gest palcem mamy za darmo, bez obsługi dotyku w skrypcie. */
.sekcja--slider { padding-block: 0; }
.sekcja--slider + .sekcja { padding-top: var(--rytm-sekcji); }

.slider { position: relative; background: var(--c-tlo-alt); }
.slider__tasma {
	display: flex; list-style: none; margin: 0; padding: 0;
	overflow-x: auto; scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.slider__tasma::-webkit-scrollbar { display: none; }
.slider__slajd { position: relative; flex: 0 0 100%; scroll-snap-align: center; }
.slider__obraz { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Proporcje kadru — „szeroki" to wartość zmierzona na starej stronie (2,40:1). */
.slider--szeroki .slider__slajd { aspect-ratio: 2.4 / 1; }
.slider--panorama .slider__slajd { aspect-ratio: 3 / 1; }
.slider--niski .slider__slajd { aspect-ratio: 16 / 9; }
@media (max-width: 700px) {
	/* Na telefonie kadr 2,4:1 zostawia pasek wysokości 160px — za mało, żeby
	   cokolwiek było widać. Zdjęcie dostaje wyższy kadr. */
	.slider--szeroki .slider__slajd,
	.slider--panorama .slider__slajd { aspect-ratio: 4 / 3; }
}

.slider__link { display: block; height: 100%; }
.slider__tytul {
	position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
	padding: var(--s-16) var(--margines-boczny) var(--s-8);
	background: linear-gradient(to top, rgb(0 0 0 / 0.55), transparent);
	color: #fff;
}
.slider__tytul span {
	display: block;
	max-width: var(--szerokosc-kontenera); margin-inline: auto;
	font-family: var(--font-display); font-size: var(--t-xl);
}

.slider__kropki {
	position: absolute; left: 0; right: 0; bottom: var(--s-6);
	display: flex; justify-content: center; gap: var(--s-3);
}
.slider__kropka {
	width: 44px; height: 44px; padding: 0;
	background: none; border: 0; cursor: pointer;
	display: grid; place-items: center;
}
.slider__kropka::before {
	content: ""; width: 9px; height: 9px; border-radius: 50%;
	background: rgb(255 255 255 / 0.55);
	box-shadow: 0 0 0 1px rgb(0 0 0 / 0.25);
	transition: background-color .2s ease, transform .2s ease;
}
.slider__kropka:hover::before { background: #fff; }
.slider__kropka.is-aktywna::before { background: #fff; transform: scale(1.35); }
/* Bez JS kropki nie mają czego przełączać — chowamy je dopiero wtedy, gdy skrypt
   potwierdzi, że przejął slider (klasa `ma-slider` dodawana z JS). */
.slider:not(.ma-slider) .slider__kropki { display: none; }

/* ── SYGNATURA: LINIE WYMIAROWE ──────────────────────────────────────────── */
/* docs/design.md §3. Fakty czytamy jak rozpiętość na rysunku technicznym:
   etykieta — wymiarowana odległość — wartość. To jedyne miejsce, w którym
   pozwalamy sobie na ozdobnik; reszta strony jest celowo cicha. */
.wymiary { list-style: none; margin: var(--s-8) 0 0; padding: 0; display: grid; gap: var(--s-4); max-width: 30rem; }
.wymiar { display: grid; grid-template-columns: auto minmax(var(--s-8), 1fr) auto; align-items: center; gap: var(--s-4); }
.wymiar__etykieta {
	font-family: var(--font-utility); font-size: var(--t-xs); font-weight: 600;
	letter-spacing: var(--tracking-utility); text-transform: uppercase;
	color: var(--c-tekst-bardzo-slaby);
}
.wymiar__linia { position: relative; height: 1px; background: var(--c-linia); transform-origin: left center; }
/* Zakończenia jak w rysunku wymiarowym: pionowe kreski na obu końcach. */
.wymiar__linia::before,
.wymiar__linia::after {
	content: ""; position: absolute; top: -4px;
	width: 1px; height: 9px; background: var(--c-akcent);
}
.wymiar__linia::before { left: 0; }
.wymiar__linia::after { right: 0; }
.wymiar__wartosc { font-family: var(--font-display); font-size: var(--t-l); color: var(--c-tekst); white-space: nowrap; }

@media (max-width: 560px) {
	/* Na wąskim ekranie linia nie ma czego wymiarować — zostaje sama para etykieta/wartość. */
	.wymiar { grid-template-columns: 1fr auto; }
	.wymiar__linia { display: none; }
}

/* ── TEKST ───────────────────────────────────────────────────────────────── */
.sekcja--tekst .kontener > h2 { text-align: center; }
.sekcja--tekst .tresc { margin-inline: 0; }

/* ── KAFELKI ─────────────────────────────────────────────────────────────
   Odpowiednik kategorii ze starej strony: kwadratowe zdjęcie, pod nim podpis
   na środku. Bez zdjęcia kafelek nie może się zapaść — dostaje płytę w tle. */


/* ── LICZBA KOLUMN JEST WYBOREM REDAKTORA, NIE WYNIKIEM SZEROKOŚCI ────────
   Wcześniej wszystkie siatki używały `repeat(auto-fit, minmax(…))`, więc na ekranie
   1440px „kolumny: 3" wychodziły jako 4 — a sześć kafelków układało się 4+2, zostawiając
   sierotę w drugim rzędzie. Skoro w panelu jest pole „Liczba kolumn", ma ono znaczyć
   dokładnie tyle, ile mówi. Elastyczność zostaje w progach: 1 kolumna na telefonie,
   2 na tablecie, wybrana liczba od 900px. `auto-fill` zostawiamy tylko katalogowi
   produktów, gdzie kafelków są dziesiątki i sztywna liczba kolumn nie ma sensu. */
.kafelki, .galeria, .opinie, .marki {
	list-style: none; padding: 0;
	display: grid;
	grid-template-columns: 1fr;
}
.kafelki { margin: var(--s-16) 0 0; gap: var(--s-8) var(--s-6); }
.galeria { margin: var(--s-12) 0 0; gap: var(--s-4); }
.opinie  { margin: var(--s-16) 0 0; gap: var(--s-6); align-items: start; }
.marki   { margin: var(--s-16) 0 0; gap: var(--s-6); }

@media (min-width: 560px) {
	.kafelki, .galeria, .opinie, .marki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
	.kafelki--2, .galeria--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kafelki--3, .galeria--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.kafelki--4, .galeria--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	/* Opinie i marki nie mają pola „liczba kolumn" — dobieramy tak, żeby karta
	   nie rozciągała się na pół ekranu i żeby tekst nie robił się kolumną gazety. */
	.opinie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.marki  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.kafelek { display: flex; flex-direction: column; }
.kafelek__wrap { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
/* `kafelek__obraz` to DIV opakowujący <img> — wymiar trzeba nałożyć na oba. */
/* Kadr 4:5 zamiast kwadratu: drzwi są pionowe, a kwadrat ucinał im górę i dół.
   Zdjęcia podłóg (kwadratowe) tracą przy tym tylko boki. */
.kafelek__obraz { position: relative; background: var(--c-tlo-alt); margin-bottom: var(--s-4); overflow: hidden; }
/* Bez powiększania zdjęcia na hover: przy przewijaniu kursor przejeżdża nad kolejnymi
   kafelkami i zdjęcia same się powiększały i wracały, co wyglądało jak drganie. */
.kafelek__obraz img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: opacity .2s ease; }
.kafelek__wrap:hover .kafelek__obraz img { opacity: .9; }
/* Kafelek z ikoną zamiast zdjęcia: ikona nie udaje obrazka, tylko stoi nad tekstem. */
.kafelek__ikona { width: 1.75rem; height: 1.75rem; color: var(--c-akcent); margin-bottom: var(--s-4); }
.kafelki:has(.kafelek__obraz) .kafelek__ikona { display: none; }
/* Podpis jak na starej stronie: wyśrodkowany, podkreślony jak link. */
.kafelek__tytul { font-size: var(--t-m); margin-bottom: var(--s-1); text-align: center; }
.kafelek--link .kafelek__obraz ~ .kafelek__tytul { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
.kafelek__opis { color: var(--c-tekst-slaby); font-size: var(--t-xs); line-height: 1.5; margin: 0; text-align: center; }
/* ── Kafelki BEZ zdjęć ────────────────────────────────────────────────────
   Nie każdą grupę da się zilustrować trafnie (patrz cms/seed/obrazy-recznie.json),
   więc grupa tekstowa musi wyglądać na wybór, a nie na brak grafiki. Robimy z niej
   indeks: kreska u góry, tytuł, zdanie opisu, strzałka przy pozycjach z linkiem.
   To ten sam zabieg, co przy sekcji „kroki" — struktura zamiast dekoracji. */
.kafelki:not(:has(.kafelek__obraz)) {
	gap: 0 var(--s-12);
	margin-top: var(--s-12);
}
.kafelki:not(:has(.kafelek__obraz)) .kafelek {
	padding-block: var(--s-6);
	border-top: 1px solid var(--c-linia);
}
.kafelki:not(:has(.kafelek__obraz)) .kafelek__tytul {
	text-align: left;
	font-family: var(--font-tekst); font-size: var(--t-m); font-weight: 600;
	letter-spacing: 0;
	display: flex; align-items: baseline; gap: var(--s-3);
}
.kafelki:not(:has(.kafelek__obraz)) .kafelek__opis { text-align: left; }

/* Strzałka tylko przy kafelku, który dokądś prowadzi — informacja, nie ozdoba. */
.kafelki:not(:has(.kafelek__obraz)) .kafelek--link .kafelek__tytul::after {
	content: ""; flex: 0 0 auto; margin-left: auto;
	width: 0.4em; height: 0.4em; align-self: center;
	border-top: 1px solid var(--c-tekst-bardzo-slaby);
	border-right: 1px solid var(--c-tekst-bardzo-slaby);
	transform: rotate(45deg); transition: transform .2s ease;
}
.kafelki:not(:has(.kafelek__obraz)) .kafelek__wrap:hover .kafelek__tytul::after {
	transform: translateX(3px) rotate(45deg);
	border-color: var(--c-tekst);
}
.kafelek__wrap:hover .kafelek__tytul { text-decoration: underline; text-underline-offset: 0.25em; }

/* ── KROKI (proces: pomiar → wycena → montaż) ────────────────────────────── */
/* Numeracja jest tu prawdziwą kolejnością działań, nie ozdobą — dlatego widoczne
   numery. Gdyby kolejność nie miała znaczenia, byłyby to kafelki. */
.kroki {
	list-style: none; margin: var(--s-16) 0 0; padding: 0;
	display: grid; gap: var(--s-8);
}
@media (min-width: 900px) {
	.kroki { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-8); }
}
.krok { position: relative; padding-top: var(--s-6); border-top: 1px solid var(--c-linia); }
.krok__nr {
	display: block;
	font-family: var(--font-utility); font-size: var(--t-xs); font-weight: 600;
	letter-spacing: var(--tracking-utility); color: var(--c-akcent-tekst-kontrast);
	margin-bottom: var(--s-3);
}
.krok__tytul { font-size: var(--t-m); font-family: var(--font-tekst); font-weight: 600; color: var(--c-tekst); margin: 0 0 var(--s-2); }
.krok__opis { color: var(--c-tekst-slaby); font-size: var(--t-s); margin: 0; }

/* ── TABELA PORÓWNAWCZA ──────────────────────────────────────────────────── */
/* Wąski ekran: przewijamy w poziomie zamiast łamać kolumny — tabela porównawcza
   traci sens, gdy wiersze się rozjadą. */
.tabela-przewijana {
	margin: var(--s-16) auto 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
	background: var(--c-biel); border: 1px solid var(--c-linia);
}
.tabela { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: var(--t-s); }
.tabela th, .tabela td { padding: var(--s-4); border-bottom: 1px solid var(--c-linia); text-align: left; vertical-align: top; }
.tabela tr:last-child td, .tabela tr:last-child th { border-bottom: 0; }
.tabela thead th {
	background: var(--c-tlo-alt); color: var(--c-tekst);
	font-family: var(--font-utility); font-weight: 600;
	font-size: var(--t-xs); letter-spacing: var(--tracking-utility); text-transform: uppercase;
	white-space: nowrap;
}
.tabela tbody th { font-weight: 600; color: var(--c-tekst); }

/* ── MARKI ───────────────────────────────────────────────────────────────
   Stara strona pokazuje marki jako białe płytki z logotypem na środku.
   Zostawiamy ten obraz, ale dokładamy zdanie opisu — ono jest naszą przewagą. */

.marka-kafel,
.marki > .marka {
	display: grid; gap: var(--s-3); align-content: start; height: 100%;
	background: var(--c-biel); border: 1px solid var(--c-linia);
	padding: var(--s-8) var(--s-6);
	text-align: center;
}
.marka__logo { display: flex; align-items: center; justify-content: center; min-height: 48px; }
.marka__logo img { max-height: 48px; width: auto; object-fit: contain; }
.marka__nazwa { font-family: var(--font-display); font-size: var(--t-l); color: var(--c-tekst); margin: 0; }
.marka__opis { color: var(--c-tekst-slaby); font-size: var(--t-s); margin: 0; }
/* „Oficjalny salon" — informacja handlowa, nie ozdoba. Dlatego ramka, nie kolorowa plama. */
.marka__znacznik {
	justify-self: center; margin: 0;
	font-family: var(--font-utility); font-size: var(--t-xs); font-weight: 600;
	letter-spacing: var(--tracking-utility); text-transform: uppercase;
	color: var(--c-akcent-tekst-kontrast);
	border: 1px solid currentColor; padding: var(--s-1) var(--s-3);
}

/* ── PRODUKTY (kafelki katalogu) ─────────────────────────────────────────── */
.filtr-marek { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-top: var(--s-8); }
.filtr-marek__btn {
	min-height: 44px;  /* W H1: pole dotyku ≥ 44 px */ padding: var(--s-2) var(--s-6);
	background: transparent; border: 1px solid var(--c-linia); border-radius: var(--promien);
	font-family: var(--font-utility); font-size: var(--t-xs); font-weight: 600;
	letter-spacing: var(--tracking-utility); text-transform: uppercase;
	color: var(--c-tekst-slaby); cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.filtr-marek__btn:hover { border-color: var(--c-tekst); color: var(--c-tekst); }
.filtr-marek__btn.is-aktywny { background: var(--c-tekst); color: var(--c-tlo); border-color: var(--c-tekst); }

.produkty {
	list-style: none; margin: var(--s-12) 0 0; padding: 0;
	display: grid; gap: var(--s-6);
	grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}
.produkt {
	display: flex; flex-direction: column;
	background: var(--c-biel); border: 1px solid var(--c-linia);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.produkt:hover { border-color: var(--c-tekst-bardzo-slaby); box-shadow: 0 10px 24px rgb(27 33 26 / 0.06); }
.produkt__link { display: block; text-decoration: none; color: inherit; }
.produkt__obraz { aspect-ratio: 1 / 1; overflow: hidden; background: var(--c-tlo-alt); }
.produkt__obraz img { width: 100%; height: 100%; object-fit: cover; }
.produkt__tytul {
	font-family: var(--font-tekst); font-size: var(--t-s); font-weight: 600;
	color: var(--c-tekst); margin: var(--s-5, 1.25rem) var(--s-5, 1.25rem) var(--s-2);
	letter-spacing: 0;
}
.produkt__cena { margin: 0 1.25rem var(--s-4); font-family: var(--font-display); font-size: var(--t-l); color: var(--c-tekst); }
.produkt__jednostka { font-family: var(--font-tekst); font-size: var(--t-xs); color: var(--c-tekst-slaby); }
.produkt__bez-ceny { font-family: var(--font-tekst); font-size: var(--t-s); color: var(--c-tekst-slaby); }
.produkt__cta { margin: auto 1.25rem 1.25rem; }
.produkt__cta .przycisk { width: 100%; }

/* ── OPINIE ──────────────────────────────────────────────────────────────── */

.opinia {
	position: relative;
	background: var(--c-biel); border: 1px solid var(--c-linia);
	padding: var(--s-12) var(--s-8) var(--s-8);
}
/* Cudzysłów ze starej strony — tam był ogromnym znakiem nad opinią. Rysowany jako SVG w tle,
   nie jako znak w content: test kontrastu traktował jasny znak „”” jak tekst karty (2026-09-30). */
.opinia::before {
	content: ""; position: absolute; top: var(--s-4); left: var(--s-6);
	width: 2.5rem; height: 2.5rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23dfe1e4' d='M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.opinia__tytul { font-size: var(--t-m); font-family: var(--font-tekst); font-weight: 600; color: var(--c-tekst); margin-bottom: var(--s-3); }
.opinia__tresc { color: var(--c-tekst-slaby); font-size: var(--t-s); margin: 0 0 var(--s-6); padding: 0; border: 0; }
/* Opinie bywają długie. Karta ma być kartą, nie kolumną tekstu — reszta jest
   pod linkiem do Google, gdzie i tak stoi pełna treść. */
.opinia__tresc { display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden; }
.opinia__tresc > :last-child { margin-bottom: 0; }
.opinia__autor {
	font-family: var(--font-utility); font-size: var(--t-xs); font-weight: 600;
	letter-spacing: var(--tracking-utility); text-transform: uppercase;
	color: var(--c-tekst-bardzo-slaby); margin: 0;
}
.opinie__google { margin-top: var(--s-8); text-align: center; }

/* ── FORMULARZ ───────────────────────────────────────────────────────────── */
.formularz { margin-top: var(--s-12); }
.formularz input[type="text"], .formularz input[type="email"], .formularz input[type="tel"],
.formularz textarea, .formularz select {
	width: 100%; min-height: 50px; padding: var(--s-3) var(--s-4);
	background: var(--c-biel); border: 1px solid var(--c-linia); border-radius: var(--promien-pole);
	font: inherit; font-size: var(--t-s); color: var(--c-tekst);
}
.formularz input:focus, .formularz textarea:focus, .formularz select:focus { border-color: var(--c-akcent); outline-offset: 0; }
.formularz textarea { min-height: 9rem; resize: vertical; }
.formularz label {
	display: block; margin-bottom: var(--s-5, 1.25rem);
	font-family: var(--font-utility); font-size: var(--t-xs); font-weight: 600;
	letter-spacing: 0.04em; color: var(--c-tekst);
}
.formularz label input, .formularz label textarea, .formularz label select { margin-top: var(--s-2); font-weight: 400; letter-spacing: 0; }
/* Zgoda RODO to zdanie, nie etykieta pola — dlatego nie wersaliki i nie pogrubienie. */
.formularz .wpcf7-acceptance label,
.formularz .wpcf7-list-item label {
	display: flex; gap: var(--s-3); align-items: flex-start;
	font-family: var(--font-tekst); font-size: var(--t-xs); font-weight: 400;
	letter-spacing: 0; color: var(--c-tekst-slaby); text-transform: none;
}
.formularz .wpcf7-list-item { margin: 0; }
.formularz input[type="checkbox"] { width: 1.1rem; height: 1.1rem; min-height: 0; flex: 0 0 auto; margin-top: 0.2em; }
.formularz input[type="submit"], .formularz .wpcf7-submit {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: var(--s-3) var(--s-8); width: auto;
	background: var(--c-akcent-przycisk); color: var(--c-akcent-tekst);
	border: 1px solid var(--c-akcent-przycisk); border-radius: var(--promien);
	font-family: var(--font-utility); font-size: var(--t-xs); font-weight: 600;
	letter-spacing: var(--tracking-utility); text-transform: uppercase; cursor: pointer;
}
.formularz input[type="submit"]:hover { background: var(--c-akcent-tekst-kontrast); border-color: var(--c-akcent-tekst-kontrast); }
.formularz .wpcf7-not-valid-tip { color: #9d2b2b; font-size: var(--t-xs); }
.formularz .wpcf7-response-output {
	margin: var(--s-6) 0 0; padding: var(--s-4);
	border: 1px solid var(--c-linia); font-size: var(--t-s);
}
.formularz__uwaga { font-size: var(--t-xs); color: var(--c-tekst-slaby); }
/* Zanim wtyczka formularza dostanie identyfikator, sekcja i tak musi się bronić. */
.formularz--zastepczy {
	border: 1px dashed var(--c-linia); padding: var(--s-8); color: var(--c-tekst-slaby);
	text-align: center;
}

/* ── SALON (adres, godziny, obszar, mapa) ────────────────────────────────── */
/* Salon: karta z danymi + mapa tej samej wysokości (przebudowa 2026-09-30). */
.salon__tekst { max-width: none; margin-top: var(--s-4); color: var(--c-tekst-tresc); }
.salon { display: grid; gap: var(--s-6); margin-top: var(--s-10, 2.5rem); text-align: left; align-items: stretch; }
@media (min-width: 900px) { .salon--z-mapa { grid-template-columns: minmax(300px, 5fr) 7fr; } }
.salon__karta {
	display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-8);
	padding: var(--s-8); background: var(--c-biel);
	border: 1px solid var(--c-linia); border-top: 2px solid var(--c-akcent);
}
.salon__dane { margin: 0; display: grid; gap: var(--s-6); }
.salon__wiersz { display: grid; gap: var(--s-1); }
.salon__wiersz dt {
	font-family: var(--font-utility); font-size: var(--t-xs); font-weight: 600;
	letter-spacing: var(--tracking-utility); text-transform: uppercase; color: var(--c-tekst-slaby);
}
.salon__wiersz dd { margin: 0; color: var(--c-tekst); }
.salon__adres { font-family: var(--font-display); font-size: var(--t-l); font-style: normal; line-height: 1.35; }
.salon__telefon { font-family: var(--font-display); font-size: var(--t-l); text-decoration: none; color: var(--c-tekst); }
.salon__telefon:hover { text-decoration: underline; }
.salon__wiersz dd a:not(.salon__telefon) { color: var(--c-akcent-tekst-kontrast); }
.salon__godziny { line-height: 1.7; }
.salon__miejscowosci { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); }
.salon__miejscowosci li::after { content: "·"; margin-left: var(--s-2); color: var(--c-tekst-bardzo-slaby); }
.salon__miejscowosci li:last-child::after { content: none; }
.salon__przyciski { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.salon__mapa { min-height: 22rem; border: 1px solid var(--c-linia); background: var(--c-tlo-alt); }
.salon__mapa iframe { width: 100%; height: 100%; min-height: 22rem; border: 0; display: block; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
/* FAQ idzie na PEŁNĄ szerokość kontenera, nie w wąską kolumnę — na starej stronie
   sekcje rozciągają się na całą szerokość i wąski blok wyglądał tu jak wcięcie.
   Sama odpowiedź zostaje w mierze czytelności, bo wiersz przez 1290px się nie czyta. */
.faq { margin-top: var(--s-12); border-top: 1px solid var(--c-linia); text-align: left; }
.faq__pozycja { border-bottom: 1px solid var(--c-linia); }
.faq__pytanie {
	display: flex; align-items: center; justify-content: space-between; gap: var(--s-6);
	padding: var(--s-6) 0; cursor: pointer; list-style: none;
}
.faq__pytanie::-webkit-details-marker { display: none; }
.faq__pytanie h3 { font-size: var(--t-m); font-family: var(--font-tekst); font-weight: 600; margin: 0; }
.faq__pytanie::after {
	content: ""; flex: 0 0 auto; width: 0.55em; height: 0.55em;
	border-right: 1px solid var(--c-tekst-slaby); border-bottom: 1px solid var(--c-tekst-slaby);
	transform: translateY(-0.2em) rotate(45deg); transition: transform .2s ease;
}
.faq__pozycja[open] .faq__pytanie::after { transform: translateY(0.1em) rotate(225deg); }
.faq__odpowiedz { padding-bottom: var(--s-6); color: var(--c-tekst-slaby); }
.faq__odpowiedz > :last-child { margin-bottom: 0; }

/* ── CTA ─────────────────────────────────────────────────────────────────── */
.sekcja--cta { background: var(--c-tlo-alt); padding-block: var(--rytm-sekcji); }
.sekcja--cta + .sekcja { padding-top: var(--rytm-sekcji); }
.cta { display: grid; gap: var(--s-6); justify-items: center; text-align: center; }
.cta__tekst { display: grid; gap: var(--s-4); justify-items: center; }
.cta__tytul { font-size: var(--t-xl); margin-bottom: 0; }
.cta__lead { margin: 0; color: var(--c-tekst-slaby); }
.cta__akcja { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-4) var(--s-6); }
.cta__telefon { font-family: var(--font-utility); font-weight: 600; letter-spacing: var(--tracking-utility); color: var(--c-tekst); text-underline-offset: .3em; white-space: nowrap; }

/* ── GALERIA + LIGHTBOX ──────────────────────────────────────────────────── */

.galeria__figura { margin: 0; }
.galeria__podpis { font-size: var(--t-xs); color: var(--c-tekst-slaby); margin-top: var(--s-2); }
.galeria__przycisk { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.galeria__obraz { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.galeria__przycisk:hover .galeria__obraz { opacity: 0.92; }

.lightbox { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; }
.lightbox::backdrop { background: rgb(0 0 0 / 0.85); }
.lightbox__obraz { max-width: 92vw; max-height: 82vh; width: auto; margin-inline: auto; }
.lightbox__opis { color: #fff; text-align: center; font-size: var(--t-s); margin-top: var(--s-3); }
.lightbox__sterowanie { position: fixed; inset: 0; pointer-events: none; }
.lightbox__sterowanie button {
	position: absolute; pointer-events: auto;
	min-width: 44px; min-height: 44px; border: 0; border-radius: var(--promien);
	background: rgb(255 255 255 / 0.12); color: #fff; font-size: 1.5rem; cursor: pointer;
}
.lightbox__zamknij { top: var(--s-4); right: var(--s-4); }
.lightbox__poprzedni { top: 50%; left: var(--s-4); transform: translateY(-50%); }
.lightbox__nastepny { top: 50%; right: var(--s-4); transform: translateY(-50%); }

/* ── LISTA WPISÓW / KARTY ────────────────────────────────────────────────── */
/* `auto-fit` rozciągnąłby JEDNĄ kartę na całą szerokość kontenera — a na blogu
   przez pierwsze tygodnie będzie stał jeden wpis. Stała liczba kolumn i `auto-fill`
   sprawiają, że pojedyncza karta ma normalną szerokość, a nie 1290px. */
.siatka-kart {
	display: grid; gap: var(--s-8) var(--s-6); margin-top: var(--s-12);
	grid-template-columns: 1fr;
}
@media (min-width: 560px) { .siatka-kart { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } }
@media (min-width: 900px) { .siatka-kart { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.karta { background: var(--c-biel); border: 1px solid var(--c-linia); overflow: hidden; }
.karta__link { display: block; text-decoration: none; height: 100%; color: inherit; }
.karta__obraz { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.karta__tresc { padding: var(--s-6); }
.karta__data { font-family: var(--font-utility); font-size: var(--t-xs); letter-spacing: var(--tracking-utility); text-transform: uppercase; color: var(--c-tekst-bardzo-slaby); }
.karta__tytul { font-size: var(--t-l); margin: var(--s-3) 0; }
.karta__zajawka { color: var(--c-tekst-slaby); font-size: var(--t-s); margin: 0; }

.pagination, .navigation.pagination { margin-top: var(--s-16); }
.nav-links { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; }
.page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; min-height: 44px; padding-inline: var(--s-3);
	border: 1px solid var(--c-linia); text-decoration: none; color: var(--c-tekst);
}
.page-numbers.current { background: var(--c-tekst); color: var(--c-tlo); border-color: var(--c-tekst); }

/* ── UKŁAD Z BOCZNYM PANELEM (wpis) ──────────────────────────────────────── */
.uklad-z-panelem { display: grid; gap: var(--s-12); margin-top: var(--s-8); }
@media (min-width: 900px) {
	.uklad-z-panelem { grid-template-columns: minmax(0, 3fr) minmax(250px, 1fr); gap: var(--s-24); }
	.uklad-z-panelem__panel {
		position: sticky;
		/* Większy niż wysokość przyklejonego nagłówka, inaczej panel wjeżdża pod niego. */
		top: calc(var(--wys-naglowka) + var(--s-4));
		align-self: start;
	}
}
.uklad-z-panelem .tresc { max-width: none; }
.wpis__naglowek { margin-bottom: var(--s-8); }
.wpis__obraz { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: var(--s-12); }
.wpis__data { font-family: var(--font-utility); font-size: var(--t-xs); letter-spacing: var(--tracking-utility); text-transform: uppercase; color: var(--c-tekst-bardzo-slaby); }
.wpis__powrot { margin-top: var(--s-16); }
.wpis__faq { margin-top: var(--s-16); }
.wpis__faq .faq { margin-top: var(--s-8); }

.karta-info { border: 1px solid var(--c-linia); background: var(--c-biel); padding: var(--s-6); }
.karta-info + .karta-info { margin-top: var(--s-4); }
.karta-info__tytul { font-family: var(--font-utility); font-size: var(--t-xs); font-weight: 600; letter-spacing: var(--tracking-utility); text-transform: uppercase; color: var(--c-tekst-bardzo-slaby); margin-bottom: var(--s-4); }
.karta-info ul { list-style: none; padding: 0; margin: 0; }
.karta-info li + li { margin-top: var(--s-3); }
.karta-info--cta { background: var(--c-tlo-alt); }

/* ── KARTA PRODUKTU (single-produkt.php) ─────────────────────────────────── */
.sekcja--karta-produktu { padding-block: var(--s-12) var(--rytm-sekcji); }
.karta-produktu { display: grid; gap: var(--s-8); }
@media (min-width: 900px) {
	.karta-produktu { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-24); align-items: start; }
}
.karta-produktu__glowne { margin: 0; background: var(--c-biel); border: 1px solid var(--c-linia); overflow: hidden; }
.karta-produktu__zdjecie { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: var(--c-biel); }
.karta-produktu__glowne--brak {
	display: grid; place-items: center; aspect-ratio: 3 / 4; padding: var(--s-6);
	border: 1px dashed var(--c-linia); color: var(--c-tekst-bardzo-slaby); text-align: center;
}
.karta-produktu__miniatury {
	list-style: none; padding: 0; margin: var(--s-3) 0 0;
	display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
}
.karta-produktu__miniatura { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid var(--c-linia); }
.karta-produktu__marka { margin-bottom: var(--s-3); }
.karta-produktu__tytul { font-size: var(--t-xxl); margin-bottom: var(--s-4); }
.karta-produktu__lead { font-size: var(--t-m); color: var(--c-tekst-slaby); max-width: none; }
.karta-produktu__cena { margin: var(--s-8) 0; display: flex; align-items: baseline; gap: var(--s-2); }
.karta-produktu__kwota { font-family: var(--font-display); font-size: var(--t-xxl); color: var(--c-tekst); line-height: 1; }
.karta-produktu__kwota--brak { font-size: var(--t-l); color: var(--c-tekst-slaby); }
.karta-produktu__jednostka { color: var(--c-tekst-slaby); font-size: var(--t-s); }
.karta-produktu__akcje { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-12); }
.karta-produktu__parametry { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.karta-produktu__parametry th,
.karta-produktu__parametry td { padding: var(--s-4) 0; border-bottom: 1px solid var(--c-linia); text-align: left; vertical-align: top; }
.karta-produktu__parametry tr:first-child th,
.karta-produktu__parametry tr:first-child td { border-top: 1px solid var(--c-linia); }
.karta-produktu__parametry th { width: 42%; font-weight: 400; color: var(--c-tekst-slaby); }
.karta-produktu__opis { margin-top: var(--rytm-sekcji); }
.karta-produktu__podobne { margin-top: var(--rytm-sekcji); }
.karta-produktu__podobne h2 { text-align: center; }
.karta-produktu__powrot { margin-top: var(--s-12); text-align: center; }

/* ── ANIMACJE: stan początkowy tylko gdy JS działa ───────────────────────── */
/* Klasę `ma-animacje` dodaje animacje.js. Bez JS treść jest widoczna od razu —
   nigdy nie ukrywamy treści w CSS tylko po to, żeby ją animować.
   HERO JEST WYŁĄCZONY z tej reguły: nagłówek strony to element LCP i musi być
   widoczny od pierwszej klatki. Wygaszanie go kosztowało sekundę pustego ekranu. */
/* 2026-09-29: odsłanianie sekcji przy przewijaniu WYŁĄCZONE (animacje.js). Kafelki,
   produkty i marki wjeżdżały o 10 px z opóźnieniem — przy przewijaniu wyglądało to jak
   drganie i przesuwanie się elementów (uwaga klienta). Stara strona nic nie animuje.
   Treść jest widoczna od pierwszej klatki; atrybut `data-anim` w partialach nic nie robi. */

/* ── Warianty liczby kolumn, których brakowało ───────────────────────────── */
/* `kolumny: 3` to wartość domyślna w panelu, więc te dwie klasy są najczęstsze
   ze wszystkich — a nie miały żadnej reguły (audyt układu, 2026-09-29). */


/* Opakowania z partiali, żeby nie dziedziczyły marginesów przeglądarki. */
.krok__tresc > :last-child { margin-bottom: 0; }
.galeria__pozycja { margin: 0; }

/* ── Zapytanie o produkt: czego dotyczy ──────────────────────────────────── */
/* Pasek nad formularzem z nazwą produktu, z którego klient przyszedł. Bez niego
   formularz z wypełnionym polem wygląda jak pomyłka — tu widać, skąd ta wartość. */
.formularz__produkt {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4);
	margin: var(--s-8) 0 0; padding: var(--s-4) var(--s-6);
	background: var(--c-tlo-alt); border-left: 2px solid var(--c-akcent);
}
.formularz__produkt-etykieta {
	font-family: var(--font-utility); font-size: var(--t-xs); font-weight: 600;
	letter-spacing: var(--tracking-utility); text-transform: uppercase;
	color: var(--c-tekst-bardzo-slaby);
}
.formularz__produkt strong { font-family: var(--font-display); font-size: var(--t-l); font-weight: 400; }


/* ── KARUZELA KAFELKÓW (opinie, produkty) ────────────────────────────────
   Taśma przewija się natywnie (scroll-snap), więc działa palcem i bez JS; skrypt
   dokłada tylko strzałki. Liczba kart w oknie zależy od szerokości, a ostatnia
   widoczna karta jest lekko ucięta na telefonie — to sygnał, że da się przewinąć. */
.karuzela { position: relative; margin-top: var(--s-12); }
.karuzela .karuzela__tasma {
	display: grid; grid-template-columns: none;
	grid-auto-flow: column; grid-auto-columns: 84%;
	gap: var(--s-6); margin: 0; padding: 0 0 var(--s-2); list-style: none;
	overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scrollbar-width: none;
	align-items: stretch;
}
.karuzela .karuzela__tasma::-webkit-scrollbar { display: none; }
.karuzela .karuzela__tasma > * { scroll-snap-align: start; }
@media (min-width: 600px) { .karuzela .karuzela__tasma { grid-auto-columns: calc((100% - var(--s-6)) / 2); } }
@media (min-width: 900px) { .karuzela .karuzela__tasma { grid-auto-columns: calc((100% - 2 * var(--s-6)) / 3); } }
@media (min-width: 1100px) {
	.karuzela--produkty .karuzela__tasma { grid-auto-columns: calc((100% - 3 * var(--s-6)) / 4); }
}
/* Opinie w karuzeli mają równą wysokość kart — w siatce ciągnęły się do najdłuższej. */
.karuzela .opinia { height: 100%; }

.karuzela__sterowanie { display: none; justify-content: center; gap: var(--s-3); margin-top: var(--s-8); }
.karuzela.ma-karuzele .karuzela__sterowanie { display: flex; }
.karuzela.ma-karuzele.karuzela--pelna .karuzela__sterowanie { display: none; }
.karuzela__strzalka {
	width: 48px; height: 48px; padding: 0; cursor: pointer;
	background: transparent; border: 1px solid var(--c-linia); color: var(--c-tekst);
	display: grid; place-items: center;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.karuzela__strzalka span {
	width: 9px; height: 9px;
	border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: translateX(2px) rotate(45deg);
}
.karuzela__strzalka--dalej span { transform: translateX(-2px) rotate(-135deg); }
.karuzela__strzalka:hover:not(:disabled) { background: var(--c-tekst); border-color: var(--c-tekst); color: var(--c-biel); }
.karuzela__strzalka:disabled { opacity: .35; cursor: default; }

.produkty__wszystkie { margin: var(--s-8) 0 0; text-align: center; }

/* ── PASEK MAREK (logotypy przewijające się same) ────────────────────────
   Odpowiednik karuzeli marek ze starej strony głównej, bez skryptu: taśma z dwiema
   kopiami listy przesuwa się o -50% w nieskończonej pętli. Maska na krawędziach
   wygasza logotypy przy brzegach — „chowają się" za ekran zamiast się ucinać.
   Najechanie zatrzymuje ruch, a przy wyłączonych animacjach w systemie pasek
   staje się zwykłym, zawijanym rzędem logotypów. */
.sekcja--marki-pasek .kontener + .pasek-marek { margin-top: var(--s-12); }
.pasek-marek {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
	        mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.pasek-marek__tasma {
	display: flex; width: max-content; margin: 0; padding: 0; list-style: none;
	/* Czas zależy od liczby marek, żeby tempo było stałe niezależnie od długości listy. */
	animation: pasek-marek calc(var(--marek, 10) * 3.2s) linear infinite;
	/* Własna warstwa: przesuw liczy karta graficzna, bez przerysowywania strony w każdej
	   klatce — inaczej logotypy „pływały" przy jednoczesnym przewijaniu strony. */
	will-change: transform; backface-visibility: hidden;
}
/* Pauza tylko przy fokusie klawiatury. Pauza na hover zatrzymywała i ruszała pasek za
   każdym razem, gdy kursor przejechał nad nim przy przewijaniu — szarpanie. */
.pasek-marek:focus-within .pasek-marek__tasma { animation-play-state: paused; }
/* Odstęp jako padding, nie gap: przy gap przesunięcie o -50% byłoby o pół odstępu
   za krótkie i pętla „skakałaby" w miejscu łączenia kopii. */
.pasek-marek__marka { flex: 0 0 auto; padding-right: var(--s-6); }
.pasek-marek__marka > a { display: block; text-decoration: none; color: inherit; }
/* Ramka logo: większa niż wcześniej i logotypy w pełnym kolorze — klient chciał, żeby
   marki było „dobrze widać” (2026-09-30). Szarość + hover wymagały najechania kursorem. */
/* Logo, nazwa i znacznik siedzą W ramce i są wyśrodkowane jako całość — kafelki z logo
   i bez logo mają ten sam układ (2026-10-19). Wysokość logo ograniczona, żeby nazwa
   (plan strony głównej: „nazwy tekstem pod logotypami”) zawsze mieściła się pod nim. */
.pasek-marek__ramka {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
	width: 200px; height: 140px; padding: var(--s-3) var(--s-4); text-align: center;
	background: var(--c-biel); border: 1px solid var(--c-linia);
}
.pasek-marek__logo { display: block; flex: none; width: 100%; height: 72px; object-fit: contain; }
/* Kwadratowy plik z marginesem: środkowy pas 43% wysokości (zmierzone 2026-10-19 — logotypy
   DRE, Barański, Porta, Erkado, Interdoor mieszczą się w 28–72% wysokości pliku). */
.pasek-marek__logo--kwadrat { object-fit: cover; }
.pasek-marek__oficjalny {
	font-family: var(--font-utility); font-size: var(--t-xs); font-weight: 500; line-height: 1.2;
	color: var(--c-akcent-tekst-kontrast);
}

/* Karty marek pod paskiem: H3 marki + opis, w tej samej karuzeli co opinie. */
.karuzela--marki { margin-top: var(--s-12); }
.karuzela--marki .karuzela__tasma { align-items: stretch; }
.marka-karta {
	height: 100%; padding: var(--s-6);
	background: var(--c-biel); border: 1px solid var(--c-linia); border-top: 2px solid var(--c-akcent);
}
.marka-karta__nazwa { font-size: var(--t-l, 1.25rem); margin: 0 0 var(--s-2); }
.marka-karta__nazwa a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.marka-karta__znacznik {
	margin: 0 0 var(--s-3); font-family: var(--font-utility); font-size: var(--t-xs); font-weight: 600;
	letter-spacing: var(--tracking-utility); text-transform: uppercase; color: var(--c-akcent-tekst-kontrast);
}
.marka-karta__opis { margin: 0; color: var(--c-tekst-tresc); }
.pasek-marek__nazwa {
	font-family: var(--font-utility); font-size: var(--t-xs); font-weight: 600; line-height: 1.25;
	letter-spacing: var(--tracking-utility); text-transform: uppercase; color: var(--c-tekst-slaby);
}
.pasek-marek__ramka--logo .pasek-marek__nazwa { color: var(--c-tekst); }
@media (max-width: 599px) {
	.pasek-marek__ramka { width: 150px; height: 116px; padding: var(--s-2) var(--s-3); gap: var(--s-1); }
	.pasek-marek__logo { height: 54px; }
}
@keyframes pasek-marek { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.pasek-marek { -webkit-mask-image: none; mask-image: none; }
	.pasek-marek__tasma { animation: none; width: auto; flex-wrap: wrap; justify-content: center; row-gap: var(--s-6); }
	.pasek-marek__marka[aria-hidden="true"] { display: none; }
}

/* Kafelki ZE ZDJĘCIAMI na telefonie idą po dwa w rzędzie. W jednej kolumnie sześć
   kafelków drzwi w kadrze 4:5 to ~2700 px przewijania samych zdjęć. */
@media (max-width: 559px) {
	.kafelki:has(.kafelek__obraz) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-3); }
	.kafelki:has(.kafelek__obraz) .kafelek__opis { display: none; }
}

/* ── KATALOG: porcje po 12 i „Pokaż więcej" ──────────────────────────────── */
/* \`.produkt\` ma display:flex, a to wygrywa z domyślnym [hidden]{display:none}
   przeglądarki — bez tej reguły ukryte karty dalej by się wyświetlały. */
.produkt[hidden],
.katalog [hidden] { display: none !important; }
.katalog__wiecej { margin: var(--s-12) 0 0; text-align: center; }
.katalog__licznik { color: var(--c-tekst-bardzo-slaby); margin-left: var(--s-1); }


/* ── CTA na pełną szerokość ──────────────────────────────────────────────
   Wyśrodkowany tekst CTA zajmował ~40% kontenera (to samo „ściśnięcie do środka").
   Od 900 px: tekst po lewej, przycisk po prawej, w jednym pasie. */
@media (min-width: 900px) {
	.cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-items: stretch; text-align: left; gap: var(--s-16); }
	.cta__tekst { justify-items: start; }
}

/* ── SLIDER: przeciąganie myszą ──────────────────────────────────────────── */
.slider__tasma { cursor: grab; }
.slider.is-przeciagany .slider__tasma { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.slider__obraz { -webkit-user-drag: none; user-select: none; }

/* ── „POKAŻ WIĘCEJ" (opinie, długie teksty, opis produktu) ───────────────
   Przycinamy tylko przy .ma-rozwin (klasę dodaje rozwin.js) — bez JS wszystko widać. */
.sekcja { --tlo-sekcji: var(--c-tlo); }
.wariant--jasny { --tlo-sekcji: var(--c-biel); }
.wariant--alt { --tlo-sekcji: var(--c-tlo-alt); }

.rozwin {
	display: inline-flex; align-items: center; gap: var(--s-2);
	margin-top: var(--s-4); padding: var(--s-2) 0; min-height: 44px;
	background: none; border: 0; cursor: pointer; color: var(--c-tekst);
	font-family: var(--font-utility); font-size: var(--t-xs); font-weight: 600;
	letter-spacing: var(--tracking-utility); text-transform: uppercase;
	text-decoration: underline; text-underline-offset: 0.35em;
}
.rozwin[hidden] { display: none; }

/* Opinie: karty tej samej wysokości; treść przycięta do 6 wierszy.
   Rozwinięta karta rośnie sama — sąsiednie zostają niskie (align-items: start). */
.karuzela .opinie.karuzela__tasma { align-items: start; }
/* 24rem = 6 wierszy opinii + miejsce na przycisk — karta z przyciskiem i bez ma tę samą wysokość. */
.karuzela .opinia { height: auto; min-height: 24rem; display: flex; flex-direction: column; }
.opinia figure { margin: 0; display: flex; flex-direction: column; flex: 1; }
.ma-rozwin .opinia__tresc { -webkit-line-clamp: 6; }
.opinia.is-rozwiniety .opinia__tresc { -webkit-line-clamp: unset; display: block; overflow: visible; }
.opinia .rozwin { align-self: flex-start; margin-top: 0; }
.opinia__autor { margin-top: auto; padding-top: var(--s-4); }

/* Długi tekst: przycięty z wygaszonym dołem, tylko gdy faktycznie się nie mieści. */
.ma-rozwin .tresc-zwijana { max-height: 24em; overflow: hidden; position: relative; }
.ma-rozwin .is-przyciety .tresc-zwijana::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5em;
	background: linear-gradient(to bottom, transparent, var(--tlo-sekcji, var(--c-tlo)));
	pointer-events: none;
}
.ma-rozwin .is-rozwiniety .tresc-zwijana { max-height: none; }
.ma-rozwin .is-rozwiniety .tresc-zwijana::after { content: none; }
.karta-produktu__opis { --tlo-sekcji: var(--c-tlo); }

/* ── „O markach" pod paskiem logotypów ───────────────────────────────────── */
.marki-opisy { margin-top: var(--s-8); border-top: 1px solid var(--c-linia); }
.marki-opisy__przelacznik {
	display: flex; justify-content: center; align-items: center; gap: var(--s-3);
	min-height: 48px; padding: var(--s-3) 0; cursor: pointer; list-style: none;
	font-family: var(--font-utility); font-size: var(--t-xs); font-weight: 600;
	letter-spacing: var(--tracking-utility); text-transform: uppercase; color: var(--c-tekst);
}
.marki-opisy__przelacznik::-webkit-details-marker { display: none; }
.marki-opisy__przelacznik::after {
	content: ""; width: .45em; height: .45em;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: translateY(-.15em) rotate(45deg); transition: transform .2s ease;
}
.marki-opisy[open] .marki-opisy__przelacznik::after { transform: translateY(.1em) rotate(225deg); }
.marki-opisy__lista {
	list-style: none; margin: var(--s-6) 0 0; padding: 0;
	display: grid; gap: var(--s-6) var(--s-8); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.marki-opisy__lista li { border-top: 1px solid var(--c-linia); padding-top: var(--s-4); }
.marki-opisy__lista p { font-size: var(--t-s); color: var(--c-tekst-slaby); margin: var(--s-2) 0 0; }
.marki-opisy__nazwa { font-size: var(--t-m); margin: 0; }

.produkt__obraz--brak {
	display: grid; place-items: center;
	font-family: var(--font-utility); font-size: var(--t-xs); font-weight: 600;
	letter-spacing: var(--tracking-utility); text-transform: uppercase; color: var(--c-tekst-bardzo-slaby);
}

/* ── SIATKA KART DLA KOLEJNYCH SEKCJI TEKSTOWYCH ──────────────────────────
   Renderer (koha_sekcje) owija dwie i więcej sekcji `tekst` pod rząd w .teksty-siatka.
   Każda sekcja staje się kartą: nagłówek nad tekstem, tekst przycięty krócej niż
   w pojedynczej sekcji i rozwijany przyciskiem. Odstępy kart podajemy z !important,
   bo reguły rytmu sąsiednich sekcji (.sekcja + .sekcja) mają wyższą specyficzność
   i zerowałyby górny odstęp kart stojących obok siebie w kodzie. */
.teksty-siatka { padding-block: var(--rytm-sekcji); background: var(--c-tlo); }
.teksty-siatka + .sekcja { padding-top: var(--rytm-sekcji); }
.teksty-siatka__wnetrze { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 900px) {
	.teksty-siatka__wnetrze { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* Nieparzysta ostatnia karta idzie na całą szerokość — bez dziury w rzędzie. */
	.teksty-siatka__wnetrze > .sekcja:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.teksty-siatka .sekcja--tekst {
	padding: var(--s-8) !important;
	background: var(--c-biel); border: 1px solid var(--c-linia);
	--tlo-sekcji: var(--c-biel);
}
.teksty-siatka .sekcja--tekst > .kontener { display: block; padding: 0; max-width: none; }
.teksty-siatka .tekst-uklad__naglowek { font-size: var(--t-l); margin-bottom: var(--s-4); }
.teksty-siatka .tresc { font-size: var(--t-s); }
.ma-rozwin .teksty-siatka .tresc-zwijana { max-height: 11em; }


/* ── NAGŁÓWEK, POD NIM TEKST — na pełną szerokość sekcji ──────────────────
   Decyzja klienta 2026-09-29: bez układu „nagłówek w bocznej kolumnie, tekst obok".
   Sekcja tekstu, formularz i opis produktu: nagłówek do lewej, treść pod nim,
   bez limitu szerokości. */
.tekst-uklad, .formularz-uklad { display: block; }
.sekcja > .tekst-uklad > h2,
.formularz-uklad__wstep h2,
.formularz-uklad__wstep .lead-sekcji { text-align: left; margin-inline: 0; max-width: none; }
.tekst-uklad__tresc { max-width: none; margin: 0; }
.tekst-uklad__tresc h3 { font-size: var(--t-m); font-family: var(--font-tekst); font-weight: 600; margin: var(--s-6) 0 var(--s-2); }
.formularz-uklad__pole { margin-top: var(--s-8); }
.formularz-uklad .formularz, .formularz-uklad .formularz__produkt { margin-top: 0; }
.formularz-uklad .formularz__produkt + .formularz { margin-top: var(--s-6); }
@media (min-width: 700px) {
	.formularz-uklad .wpcf7-form { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-6); }
	.formularz-uklad .wpcf7-form > * { grid-column: 1 / -1; }
	.formularz-uklad .wpcf7-form > p:has(input[type="text"]),
	.formularz-uklad .wpcf7-form > p:has(input[type="tel"]),
	.formularz-uklad .wpcf7-form > p:has(input[type="email"]),
	.formularz-uklad .wpcf7-form > p:has(select) { grid-column: auto; }
}
.karta-produktu__opis { max-width: none; }
.karta-produktu__opis .tresc { max-width: none; }

/* Narzędzia katalogu: filtr marek po lewej, sortowanie po prawej (2026-09-30). */
.katalog__narzedzia { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-8); margin-bottom: var(--s-8); }
.katalog__narzedzia .filtr-marek { margin: 0; justify-content: flex-start; }
.katalog__sortuj { display: inline-flex; align-items: center; gap: var(--s-3); margin-left: auto; }
.katalog__sortuj[hidden] { display: none; }
.katalog__sortuj span {
	font-family: var(--font-utility); font-size: var(--t-xs); font-weight: 600;
	letter-spacing: var(--tracking-utility); text-transform: uppercase; color: var(--c-tekst-slaby);
}
.katalog__sortuj select {
	min-height: 44px; padding: 0 var(--s-8) 0 var(--s-4);
	font: inherit; font-size: var(--t-s); color: var(--c-tekst);
	background: var(--c-biel); border: 1px solid var(--c-linia); border-radius: 0; cursor: pointer;
}

/* Przycisk pod tekstem sekcji (np. „Umów bezpłatny pomiar” przy cenniku). */
.tekst-uklad__akcja { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); margin: var(--s-8) 0 0; }

/* ── ZESPÓŁ: zdjęcie 1:1 nad imieniem, poniżej rola i opis (2026-09-30) ───── */
.zespol { list-style: none; margin: var(--s-12) 0 0; padding: 0; display: grid; gap: var(--s-12) var(--s-8); text-align: left; }
@media (min-width: 560px) { .zespol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
	.zespol--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.zespol--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.osoba__zdjecie {
	position: relative; aspect-ratio: 1 / 1; overflow: hidden; margin-bottom: var(--s-5, 1.25rem);
	background: var(--c-tlo-alt); border-bottom: 2px solid var(--c-akcent);
}
.osoba__zdjecie img { width: 100%; height: 100%; object-fit: cover; display: block; }
.osoba__inicjaly {
	position: absolute; inset: 0; display: grid; place-items: center;
	font-family: var(--font-display); font-size: clamp(2rem, 1.5rem + 2vw, 3rem); letter-spacing: .1em; color: var(--c-tekst-slaby);
}
.osoba__imie { font-size: var(--t-l); margin: 0 0 var(--s-1); }
.osoba__rola {
	margin: 0 0 var(--s-3); font-family: var(--font-utility); font-size: var(--t-xs); font-weight: 600;
	letter-spacing: var(--tracking-utility); text-transform: uppercase; color: var(--c-akcent-tekst-kontrast);
}
.osoba__opis { margin: 0; color: var(--c-tekst-tresc); }