/*
 * Stopka sklepu — moduł `stopka` (ST_Stopka).
 *
 * ⚠️ TEN ARKUSZ ŁADUJE SIĘ NA KAŻDEJ PODSTRONIE, bo stopka jest wszędzie.
 * Dlatego jest celowo krótki: zero bibliotek, zero ikon jako plików (ikony
 * rysuje ST_Ikony ścieżką SVG w HTML), zero animacji w pętli.
 *
 * ⚠️ WSZYSTKIE KOLORY IDĄ ZE ZMIENNYCH NA `.st-st`. Zmiana palety to zmiana
 * kilku wartości w jednym miejscu, a nie przeszukiwanie pliku.
 *
 * ⚠️ TŁO JEST WŁASNOŚCIĄ CAŁEJ STOPKI, NIE POSZCZEGÓLNYCH SEKCJI.
 * Poprzednia wersja miała PIĘĆ pasów w pięciu kolorach (jasny błękit →
 * granat → biel → chłodny → biel) i dokładnie to Dawid zgłosił jako
 * „za dużo tych zmian kolorów". Każde zetknięcie dwóch różnych kolorów to
 * pozioma krecha, a pięć krech w jednej stopce czyta się jak sklejka.
 *
 * Teraz jest JEDEN gradient na `.st-st`, od jaśniejszego granatu u góry do
 * niemal nocnego u dołu, a wszystkie sekcje są przezroczyste. Sekcje
 * rozdzielają WŁOSOWE linie, nie zmiany tła — czyli rytm bez szwów.
 *
 * ⚠️ JEDYNY JASNY ELEMENT TO KARTA PŁATNOŚCI I DOSTAWY — i to jest decyzja,
 * nie przeoczenie. Logotypy operatorów (BLIK, karty, InPost, baner Paynow)
 * są przygotowane pod białe tło; na granacie trzeba by je obrysowywać albo
 * utrzymywać drugi komplet cudzych znaków w wersji negatywowej. Ale nie jest
 * to już biały PAS przez całą szerokość — tylko zaokrąglona karta wpuszczona
 * w ciemne tło, więc nie tnie stopki na pół.
 */

.st-st {
	/* paleta marki */
	--st-gr: #344a90;
	--st-gr-h: #2b3d78;
	--st-gr-d: #1f2c58;
	--st-bl: #6f83c7;
	--st-bl-j: #e8ecf8;
	--st-graf: #181b22;
	--st-szary: #606775;
	--st-obw: #dce1ea;
	--st-tlo: #f6f8fc;
	--st-biel: #fff;

	/* skala promieni — pole/przycisk 10, karta 8 */
	--st-r: 10px;

	/* tekst na granacie: biel z przygaszeniem, nie szarość */
	--st-na-gr: rgba(255, 255, 255, .78);
	--st-na-gr-hr: rgba(255, 255, 255, .14);

	position: relative;

	/* ⚠️ Gradient ma CZTERY przystanki, nie dwa. Przy dwóch punkt środkowy
	   wypada w połowie wysokości stopki, czyli akurat na siatce odnośników,
	   i widać tam pas jaśniejszy od reszty. Cztery przystanki rozkładają
	   zmianę tak, że najmocniejsza jest u góry (pod newsletterem) i u dołu. */
	background: linear-gradient(180deg, #3a4e94 0%, #2d3d75 20%, #1f2c58 56%, #161f3e 100%);
	color: var(--st-na-gr);
	line-height: 1.55;
	font-size: 15px;
}

/*
 * ⚠️ WARIANT NA PEŁNĄ SZEROKOŚĆ JEST OPCJONALNY, NIE DOMYŚLNY.
 * `100vw` liczy się RAZEM z paskiem przewijania, więc na stronie z suwakiem
 * element wystaje poza okno i pojawia się przewijanie w poziomie. Domyślnie
 * tła wypełniają tyle, ile da im blok UX — i to jest właściwa kolejność:
 * sekcję w UX Builderze ustawia się na pełną szerokość, a nie obchodzi się
 * jej ustawienie CSS-em. Klasa niżej zostaje wyłącznie jako wyjście awaryjne.
 */
.st-st--pelna {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

.st-st-kon {
	width: min(1240px, 100% - 2.5rem);
	margin-inline: auto;
}

/* ⚠️ Poppins wymaga `!important` — w CSS Tempo siedzi
   `body,p,li,span,div{font-family:'Inter'!important}`, a `!important`
   w arkuszu autora bije nawet styl inline (mina z 10.09). */
.st-st .st-st-h2,
.st-st .st-st-h3,
.st-st .st-st-haslo,
.st-st .st-st-znak,
.st-st .st-st-btn {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
	font-weight: 600;
}

/*
 * ⚠️ NAGŁÓWEK NEWSLETTERA JEST NAJWIĘKSZYM NAPISEM W STOPCE — CELOWO.
 * Poprzednio miał 1,25–1,6 rem, czyli tyle co zwykły akapit z pogrubieniem,
 * i cała sekcja czytała się jak pole formularza, a nie jak zaproszenie.
 * Ujemny odstęp między literami jest tu potrzebny: Poppins 700 przy dużym
 * stopniu bez niego wygląda na rozstrzelony.
 */
.st-st .st-st-h2 {
	margin: 0 0 8px;
	font-size: clamp(1.55rem, 3.4vw, 2.3rem);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.15;
	color: var(--st-biel);
}

/*
 * ⚠️ `.st-st-h3` SIEDZI NA `<span>`, NIE NA NAGŁÓWKU — patrz komentarz w PHP.
 * Osiem nagłówków z nazwami kategorii na każdej podstronie konkurowałoby ze
 * strukturą treści produktu i wpisu. Stąd `display: block`: inaczej margines
 * pionowy na elemencie liniowym nic nie robi.
 */
.st-st .st-st-h3 {
	display: block;
	margin: 0 0 14px;
	font-size: .95rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--st-biel);
}

/*
 * ⚠️ OBRONA PRZED REGUŁĄ TEMPO NA ODNOŚNIKACH W AKAPICIE.
 * `p:not(.stars) a:not(.button, …)` ma specyficzność (0,2,2) i dokłada
 * gradientowe podkreślenie przez `background-image` oraz ścina
 * `padding-bottom` do 1 px. Podwojona klasa daje (0,3,0) i rozstrzyga —
 * bez dokładania `!important`, czyli bez pułapki na następną zmianę.
 */
.st-st a.st-st-l.st-st-l {
	background-image: none;
	padding-bottom: 0;
	text-decoration: none;
	color: inherit;
	transition: color .15s ease;
}

.st-st .st-st-ukryte {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/*
 * ⚠️ PUŁAPKA NA BOTY CHOWANA POZA EKRAN, A NIE `display: none`.
 * Część botów rozpoznaje `display:none` jako sygnał pułapki i pomija takie
 * pole — wtedy zabezpieczenie przestaje cokolwiek łapać.
 */
.st-st .st-st-pulapka {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.st-st .st-st-ikona {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	color: var(--st-bl);
}

/* ============================================ 1. NEWSLETTER */

/*
 * ⚠️ NEWSLETTER NIE MA WŁASNEGO TŁA — siedzi na wspólnym gradiencie.
 * Ma za to własną poświatę: miękką plamę jasnego granatu w lewym górnym
 * rogu, która daje wrażenie światła padającego na sekcję. To jedyna
 * dekoracja w całej stopce i kosztuje zero bajtów.
 */
.st-st-nl {
	position: relative;
	padding: 44px 0 38px;
	border-bottom: 1px solid var(--st-na-gr-hr);
	overflow: hidden;
}

.st-st-nl::before {
	content: "";
	position: absolute;
	inset: -40% 40% 20% -12%;
	background: radial-gradient(closest-side, rgba(126, 152, 232, .38), transparent 72%);
	pointer-events: none;
}

.st-st-nl-in {
	position: relative;
}

.st-st-nl-in {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 20px 40px;
	align-items: center;
}

/* ⚠️ `min-width: 0` na dzieciach siatki i flexa — domyślne `auto` nie
   pozwala im zejść poniżej szerokości najdłuższego słowa, a wtedy długi
   adres e-mail albo nagłówek rozpycha stopkę poza ekran. */
.st-st-nl-txt,
.st-st-nl-prawa {
	min-width: 0;
}

.st-st-plat-txt {
	flex: 1 1 200px;
	min-width: 0;
}

.st-st .st-st-nl-opis {
	margin: 0;
	max-width: 42ch;
	color: rgba(255, 255, 255, .8);
	font-size: 1rem;
}

.st-st-nl-form {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0;
}

/*
 * ⚠️ `min-height` I `height: auto` RAZEM. Flatsome nadaje polom formularza
 * stałą wysokość, której `padding` nie powiększa — bez tego pole ma 39 px,
 * czyli poniżej minimum celu dotykowego (44 px).
 */
.st-st .st-st-pole {
	flex: 1 1 220px;
	min-width: 0;
	height: auto;
	min-height: 48px;
	margin: 0;
	padding: 10px 14px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: var(--st-r);
	background: rgba(255, 255, 255, .96);
	color: var(--st-graf);
	font-size: 15px;
	box-shadow: none;
}

/* ⚠️ OBRYS FOKUSU MUSI BYĆ WIDOCZNY NA TLE, NA KTÓRYM STOI POLE.
   Granatowy obrys na granatowym gradiencie znikał — a to jedyny sygnał dla
   osoby poruszającej się klawiaturą. Biel z podwójnym obrysem działa i na
   ciemnym tle stopki, i na białej karcie płatności. */
.st-st .st-st-pole:focus,
.st-st .st-st-pole:focus-visible {
	border-color: var(--st-biel);
	outline: 2px solid var(--st-biel);
	outline-offset: 2px;
}

.st-st .st-st-btn:focus-visible,
.st-st a.st-st-l:focus-visible {
	outline: 2px solid var(--st-biel);
	outline-offset: 2px;
}

/*
 * ⚠️ PODWOJONA KLASA + `!important` NA PROMIENIU.
 * Flatsome ma `button:not(.icon){border-radius:1px!important}`. Gdy obie
 * deklaracje są oznaczone `!important`, rozstrzyga specyficzność: (0,2,0)
 * naszej reguły bije (0,1,1) motywu. Sam `!important` bez podwojenia klasy
 * by nie wystarczył (mina z 10.09).
 */
.st-st .st-st-btn.st-st-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin: 0;
	padding: 10px 24px;
	border: 1px solid var(--st-biel);
	border-radius: var(--st-r) !important;
	/* ⚠️ GRANATOWY PRZYCISK NA GRANATOWYM TLE JEST NIEWIDOCZNY.
	   Po przejściu stopki na jeden ciemny gradient jedynym sensownym
	   wypełnieniem jest biel — kontrast 8,3:1 i najmocniejszy element
	   w sekcji, czyli dokładnie to, czym ma być główne działanie. */
	background: var(--st-biel);
	color: var(--st-gr-d);
	font-size: .95rem;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: 0;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .15s ease;
}

.st-st .st-st-btn.st-st-btn:hover,
.st-st .st-st-btn.st-st-btn:focus {
	background: #eaeefb;
	border-color: #eaeefb;
	color: var(--st-gr-d);
}

.st-st .st-st-btn--kontur.st-st-btn--kontur {
	background: transparent;
	border-color: rgba(255, 255, 255, .55);
	color: var(--st-biel);
}

.st-st .st-st-btn--kontur.st-st-btn--kontur:hover,
.st-st .st-st-btn--kontur.st-st-btn--kontur:focus {
	background: rgba(255, 255, 255, .12);
	border-color: var(--st-biel);
}

.st-st .st-st-nl-drobne {
	margin: 10px 0 0;
	font-size: .78rem;
	color: rgba(255, 255, 255, .55);
}

.st-st .st-st-kom {
	margin: 0 0 12px;
	padding: 10px 14px;
	border-radius: var(--st-r);
	border-left: 3px solid;
	font-size: .9rem;
}

.st-st .st-st-kom--ok {
	background: #eaf5ef;
	border-color: #1e8e5a;
	color: #14603d;
}

.st-st .st-st-kom--blad {
	background: #fbeceb;
	border-color: #c0392b;
	color: #8f2b20;
}

/* ============================================ 2. CZĘŚĆ GŁÓWNA */

/* Tło idzie z `.st-st` — tu zostaje sam układ. */
.st-st-glowna {
	background: none;
}

.st-st-siatka {
	display: grid;
	/* ⚠️ `minmax(0, 1fr)`, nigdy samo `1fr` — `1fr` to skrót od
	   `minmax(auto, 1fr)`, a `auto` jako dolna granica znaczy `min-content`,
	   więc długa nazwa kategorii ODMAWIA zwężenia i rozpycha siatkę poza
	   ekran (mina z 11.09 na stronach huba). */
	grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr);
	gap: 36px 26px;
	padding: 48px 0 40px;
}

.st-st .st-st-haslo {
	margin: 16px 0 8px;
	font-size: 1.15rem;
	color: var(--st-biel);
}

.st-st .st-st-opis {
	margin: 0 0 20px;
	font-size: .92rem;
	color: var(--st-na-gr);
	max-width: 42ch;
}

.st-st .st-st-logo-box {
	display: block;
}

/* ⚠️ SKALUJEMY WYSOKOŚCIĄ, SZEROKOŚĆ ZOSTAJE `auto`.
   Brandbook zabrania zmiany proporcji logo; podanie obu wymiarów to
   najprostszy sposób, żeby je rozjechać. */
.st-st .st-st-logo-marka {
	height: 40px;
	width: auto;
	max-width: 100%;
	display: block;
}

.st-st .st-st-znak {
	display: inline-block;
	font-size: 1.4rem;
	letter-spacing: -.01em;
}

.st-st .st-st-znak--jasne {
	color: var(--st-biel);
}

.st-st .st-st-znak--ciemne {
	color: var(--st-gr-d);
}

.st-st .st-st-atuty,
.st-st .st-st-lista,
.st-st .st-st-zaufanie,
.st-st .st-st-logotypy,
.st-st .st-st-wpisy,
.st-st .st-st-dok ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.st-st .st-st-atuty li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 10px;
	font-size: .88rem;
	line-height: 1.4;
}

.st-st .st-st-lista li {
	margin-bottom: 9px;
	font-size: .92rem;
}

.st-st .st-st-kol a.st-st-l.st-st-l,
.st-st .st-st-kontakt a.st-st-l.st-st-l {
	color: var(--st-na-gr);
}

.st-st .st-st-kol a.st-st-l.st-st-l:hover,
.st-st .st-st-kol a.st-st-l.st-st-l:focus,
.st-st .st-st-kontakt a.st-st-l.st-st-l:hover,
.st-st .st-st-kontakt a.st-st-l.st-st-l:focus {
	color: var(--st-biel);
	text-decoration: underline;
}

.st-st .st-st-dane li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.st-st .st-st-kontakt .st-st-btn {
	margin-top: 14px;
}

/* -------------------------------------------- profile społecznościowe */

/*
 * ⚠️ KAFELEK, A NIE SAMA IKONA. Ikona bez tła na ciemnym gradiencie ma
 * ~20 px celu dotykowego, czyli o połowę mniej niż minimum (44 px) — na
 * telefonie w taki odnośnik po prostu nie da się trafić. Kafelek 42 px
 * rozwiązuje to i przy okazji daje sekcji rytm.
 *
 * ⚠️ NAZWA SERWISU JEST W HTML, tylko schowana dla oka (`st-st-ukryte`).
 * Sam rysunek nic nie mówi czytnikowi ekranu ani wyszukiwarce, a `title`
 * na dotyku nie istnieje.
 */
.st-st-socjale {
	margin-top: 20px;
}

.st-st .st-st-social-tyt {
	display: block;
	margin-bottom: 10px;
	font-size: .76rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}

.st-st .st-st-social-lista {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.st-st a.st-st-social.st-st-social {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, .18);
	background: rgba(255, 255, 255, .08);
	color: var(--st-biel);
	transition: background-color .15s ease, transform .15s ease, border-color .15s ease;
}

.st-st a.st-st-social.st-st-social:hover,
.st-st a.st-st-social.st-st-social:focus-visible {
	background: rgba(255, 255, 255, .18);
	border-color: rgba(255, 255, 255, .42);
	transform: translateY(-2px);
}

.st-st .st-st-social-ik {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
}

/* ============================================ 3. PASEK ZAUFANIA */

/*
 * ⚠️ „NIERÓWNE ODSTĘPY" W TYM PASKU BRAŁY SIĘ Z RÓŻNEJ DŁUGOŚCI TEKSTÓW.
 * Cztery równe kolumny plus `gap` znaczy, że światło MIĘDZY tekstami zależy
 * od tego, jak długi jest każdy z nich: po krótkim zostaje pół kolumny
 * pustki, po długim ani piksela. Oko czyta to jako rozjechany układ, mimo
 * że siatka jest idealnie regularna.
 *
 * Poprawka to nie zmiana szerokości, tylko DODANIE STAŁEGO ODNIESIENIA:
 * pionowa kreska między pozycjami i jednakowe wypełnienie po obu jej
 * stronach. Odstęp przestaje zależeć od tekstu, bo jest mierzony od kreski.
 */
/*
 * ⚠️ MNIEJ KRESEK, WIĘCEJ ODDECHU — POPRAWKA PO OCENIE 14.09.
 * Dawid: *„za dużo jest tych oddzielaczy"*. Stopka miała cztery poziome
 * linie: pod newsletterem, nad paskiem zaufania, nad blogiem i nad dolnym
 * paskiem. Przy jednym wspólnym gradiencie sekcje i tak są rozróżnialne
 * rytmem i wielkością pisma — kreska jest potrzebna tylko tam, gdzie zmienia
 * się RODZAJ treści: po zaproszeniu do newslettera i przed drobnym drukiem
 * na dole. Zostają dwie z czterech.
 */
.st-st-zaufanie-pas {
	padding: 6px 0 20px;
}

.st-st .st-st-zaufanie {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px 0;
}

.st-st .st-st-zaufanie li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 2px 22px;
	font-size: .84rem;
	line-height: 1.35;
	border-left: 1px solid var(--st-na-gr-hr);
}

/* ⚠️ Pierwsza pozycja KAŻDEGO rzędu bez kreski i bez lewego wypełnienia —
   inaczej pasek zaczynałby się kreską wiszącą przy krawędzi treści, a tekst
   byłby wcięty względem reszty stopki. Przy dwóch kolumnach (telefon)
   dotyczy to co drugiej pozycji, stąd `nth-child` w zapytaniach niżej. */
.st-st .st-st-zaufanie li:first-child {
	border-left: 0;
	padding-left: 0;
}

/* ============================================ 4. PŁATNOŚCI I DOSTAWA */

/*
 * ⚠️ JASNE TŁO JEST DECYZJĄ, NIE PRZEOCZENIEM.
 * Logotypy operatorów (BLIK, karty, InPost) są przygotowane pod białe tło —
 * na granacie trzeba by je obrysowywać albo prosić o wersje negatywowe,
 * czyli utrzymywać dwa komplety cudzych znaków.
 */
.st-st-platnosci {
	background: none;
	padding: 22px 0 4px;
}

/*
 * ⚠️ BIEL TYLKO POD TYM, CO JEJ NAPRAWDĘ POTRZEBUJE.
 *
 * Wersja z 14.09 miała białą KARTĘ na całą szerokość i Dawid słusznie
 * zgłosił, że „za bardzo się wyrzuca w oczy". Zaproponował, żeby wywalić
 * biel i położyć logotypy wprost na granacie — **i to działa tylko w połowie**.
 *
 * Sprawdzone złożeniem obu plików na granacie #1F2C58 (14.09):
 *   • **InPost — czytelny.** Biały napis i żółte słońce na przezroczystości;
 *     na granacie wygląda lepiej niż na bieli.
 *   • **Pasek Paynow — NIE.** BNP Paribas, Toyota Financial Services,
 *     Bank Pekao, citi handlowy, Inteligo, Bank Nowy, BPS, Apple Pay
 *     i Google Pay to CIEMNY tusz na przezroczystości — na granacie znikają.
 *
 * Stąd podział: pasek banków dostaje własną, wąską białą płytkę dokładnie
 * pod siebie, InPost idzie na granat bez niczego. Białego pola jest wtedy
 * kilka razy mniej niż w karcie, a żaden cudzy znak nie traci czytelności.
 */
.st-st-plat-in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 26px;
	padding: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

/* Etykieta stoi teraz na granacie, nie na białej karcie. */
.st-st-platnosci .st-st-h3 {
	color: rgba(255, 255, 255, .62);
	margin: 0;
	font-size: .76rem;
	letter-spacing: .08em;
}

.st-st .st-st-plat-opis {
	margin: 4px 0 0;
	font-size: .85rem;
	color: rgba(255, 255, 255, .6);
}

/*
 * ⚠️ PŁYTKA OBEJMUJE SAM PASEK, NIE CAŁY RZĄD.
 * Reguła `:has()` niżej zdejmuje kafelkowi wypełnienie i ramkę — tu
 * przywracamy je WYŁĄCZNIE w grupie płatności, czyli tam, gdzie leży pasek
 * banków wymagający bieli.
 */
.st-st .st-st-logotypy--platnosci .st-st-logo:has(> .st-st-logo-img--pasek) {
	padding: 9px 13px;
	border-radius: 10px;
	background: var(--st-biel);
}

/*
 * InPost wprost na granacie — bez płytki, bez ramki.
 *
 * ⚠️ ZDJĘTA PŁYTKA POZWALA POWIĘKSZYĆ ZNAK. W ramce logotyp musiał zmieścić
 * się w 34 px wysokości razem z wypełnieniem; bez niej mieści się w 44 px
 * i jest po prostu czytelny. Zmierzone 14.09: 57 × 34 px przy płytce,
 * ~73 × 44 px bez niej.
 */
.st-st .st-st-logotypy--dostawa .st-st-logo {
	min-width: 0;
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
}

.st-st .st-st-logotypy--dostawa .st-st-logo .st-st-logo-img {
	max-height: 44px;
}

/*
 * ⚠️ OBIE GRUPY LOGOTYPÓW MUSZĄ MIEĆ JAWNĄ PODSTAWĘ FLEXA.
 * Bez niej `flex: 0 1 auto` liczy szerokość z zawartości, a zawartością
 * paska płatności jest element z `flex: 1 1 100%` — czyli 100 % szerokości,
 * której jeszcze nie ma. Wychodzi z tego błędne koło: zmierzone 14.09 po
 * przejściu na kartę baner miał 499 px zamiast 640, a InPost 51 px, czyli
 * tyle, że logotypu nie dało się odczytać.
 */
.st-st .st-st-logotypy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.st-st .st-st-logotypy--platnosci {
	flex: 1 1 320px;
}

/* Dostawa bierze tyle, ile potrzebuje — to jeden logotyp, nie pasek. */
.st-st .st-st-logotypy--dostawa {
	flex: 0 0 auto;
}

.st-st .st-st-logotypy--dostawa .st-st-logo {
	min-width: 104px;
	min-height: 48px;
}

.st-st .st-st-logotypy--dostawa .st-st-logo-img {
	max-height: 34px;
}

/*
 * ⚠️ `st-st-logo--<slot>` TO STABILNY UCHWYT NA POJEDYNCZY LOGOTYP.
 * Znaki operatorów mają bardzo różne proporcje (BLIK jest kwadratowy,
 * InPost podłużny), więc wymiar trzeba będzie dobrać punktowo — i ma to być
 * możliwe bez ruszania PHP.
 */
.st-st .st-st-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 62px;
	min-height: 38px;
	padding: 4px 10px;
	border: 1px solid var(--st-obw);
	border-radius: 8px;
	background: var(--st-biel);
}

.st-st .st-st-logo-img {
	display: block;
	max-height: 26px;
	width: auto;
}

/* Dopóki nie ma grafiki, nazwa jest pełnoprawną treścią — a nie pustym
   pudełkiem, które czyta się jak niedokończona strona. */
.st-st .st-st-logo-nazwa {
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--st-szary);
	white-space: nowrap;
}

/* ============================================ 5. NAJNOWSZE WPISY */

/*
 * ⚠️ BLOG BYŁ NA JASNYM BŁĘKICIE (#F6F8FC) I TO BYŁO ZŁE Z DWÓCH POWODÓW:
 * wchodził jako trzeci kolor w tym samym miejscu stopki, a przy okazji
 * wyglądał na pomyłkę — jasny pas z ciemnym tekstem tuż nad dolnym paskiem.
 * Teraz siedzi na wspólnym gradiencie, oddzielony włosową linią.
 */
.st-st-blog {
	background: none;
	padding: 22px 0 26px;
}

.st-st-blog .st-st-h3 {
	color: var(--st-biel);
	margin: 0;
}

.st-st-blog-glowa {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.st-st .st-st-wiecej {
	font-size: .85rem;
	color: rgba(255, 255, 255, .72);
}

.st-st .st-st-wiecej:hover,
.st-st .st-st-wiecej:focus {
	color: var(--st-biel);
	text-decoration: underline;
}

.st-st .st-st-wpisy {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px 26px;
}

.st-st .st-st-wpis {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-left: 14px;
	border-left: 2px solid rgba(255, 255, 255, .22);
}

.st-st .st-st-wpis-tytul {
	color: var(--st-biel);
	font-size: .92rem;
	font-weight: 500;
	line-height: 1.35;
}

.st-st .st-st-wpis-tytul:hover,
.st-st .st-st-wpis-tytul:focus {
	color: var(--st-bl);
}

.st-st .st-st-wpis-data {
	font-size: .76rem;
	color: rgba(255, 255, 255, .5);
}

/* ============================================ 6. DOLNY PASEK */

.st-st-dol {
	background: rgba(0, 0, 0, .16);
	border-top: 1px solid var(--st-na-gr-hr);
	padding: 16px 0;
}

.st-st-dol-in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
}

.st-st-dol-lewa {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.st-st .st-st-logo-dol {
	height: 26px;
	width: auto;
	display: block;
}

.st-st .st-st-dol-lewa .st-st-znak {
	font-size: 1rem;
}

.st-st .st-st-copy {
	font-size: .8rem;
	color: rgba(255, 255, 255, .55);
}

.st-st .st-st-dok ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
}

.st-st .st-st-dok a.st-st-l.st-st-l {
	font-size: .8rem;
	color: rgba(255, 255, 255, .62);
}

.st-st .st-st-dok a.st-st-l.st-st-l:hover,
.st-st .st-st-dok a.st-st-l.st-st-l:focus {
	color: var(--st-biel);
	text-decoration: underline;
}

/* ============================================ WĄSKIE EKRANY */

@media (max-width: 1080px) {
	.st-st-siatka {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Marka i kontakt na całą szerokość — przy trzech kolumnach zostawałyby
	   wąskie paski z łamiącym się tekstem. */
	.st-st-marka,
	.st-st-kontakt {
		grid-column: 1 / -1;
	}

	.st-st .st-st-atuty {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 20px;
	}

	.st-st .st-st-dane {
		display: flex;
		flex-wrap: wrap;
		gap: 6px 26px;
	}
}

@media (max-width: 900px) {
	.st-st-nl-in {
		grid-template-columns: minmax(0, 1fr);
	}

	.st-st .st-st-zaufanie {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Przy dwóch kolumnach pierwsza pozycja rzędu to co druga pozycja listy. */
	.st-st .st-st-zaufanie li:nth-child(odd) {
		border-left: 0;
		padding-left: 0;
	}

	.st-st .st-st-wpisy {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.st-st-siatka {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 26px 18px;
		padding: 34px 0 30px;
	}

	.st-st .st-st-atuty,
	.st-st .st-st-zaufanie {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Jedna kolumna — pionowa kreska nie ma czego rozdzielać. */
	.st-st .st-st-zaufanie li {
		border-left: 0;
		padding-left: 0;
		padding-right: 0;
	}

	.st-st .st-st-dane {
		display: block;
	}

	/* Cel dotykowy jest tu wart więcej niż proporcje — na wąskim ekranie
	   przycisk i pole biorą całą szerokość. */
	.st-st .st-st-pole,
	.st-st .st-st-btn.st-st-btn {
		flex: 1 1 100%;
		width: 100%;
	}

	.st-st-plat-in,
	.st-st-dol-in {
		justify-content: flex-start;
	}

	.st-st-nl {
		padding: 32px 0 28px;
	}

	.st-st-plat-in {
		padding: 16px;
	}

	.st-st .st-st-logo {
		min-width: 54px;
		min-height: 34px;
	}
}

/* ⚠️ `prefers-reduced-motion` wyłącza przejścia — stopka nie ma nic, co by
   się od tego zepsuło, a osoby z tym ustawieniem mają je zgłoszone nie bez
   powodu. */
@media (prefers-reduced-motion: reduce) {
	.st-st * {
		transition: none !important;
	}
}

/* ============================================================
   SZEROKI PASEK LOGOTYPÓW (baner płatności)
   ============================================================

   ⚠️ Kafelek `.st-st-logo` jest zaprojektowany pod POJEDYNCZY znak operatora:
   ramka, minimalna szerokość 62 px, obrazek ścięty do 26 px wysokości.
   Baner Paynow niesie ~24 logotypy banków w jednym rzędzie — w takim kafelku
   każdy z nich miał ~12 px szerokości i był nieczytelny (zmierzone 14.09:
   wyświetlany rozmiar 300 × 22 px).

   Pasek dostaje więc własne traktowanie: cały rząd dla siebie, bez ramki
   i bez ograniczenia wysokości. Ramka wokół cudzego banera i tak jest zbędna —
   plik ma własne tło i własne marginesy. */

.st-st .st-st-logo:has(> .st-st-logo-img--pasek) {
	flex: 1 1 100%;
	min-width: 0;
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
	justify-content: flex-start;
}

.st-st .st-st-logo-img--pasek {
	max-height: none;
	width: 100%;
	max-width: 640px;
	height: auto;
}

/* Zapas dla przeglądarek bez `:has()` — kafelek zostaje, ale obrazek
   przestaje być ścinany do 26 px. */
@supports not selector(:has(*)) {
	.st-st .st-st-logo-img--pasek { max-height: 44px; max-width: 100%; }
}

/* ============================================================
   WŁASNA IKONA WGRANA Z PANELU

   ⚠️ IKONA WBUDOWANA TO SVG, WŁASNA TO OBRAZEK — i to są dwa różne
   pudełka. SVG skaluje się do rozmiaru nadanego klasą, obrazek ma
   własne proporcje, więc bez `object-fit` logo szersze niż wysokie
   zostałoby rozciągnięte do kwadratu.
   ============================================================ */
.st-st img.st-ikona-wlasna {
	width: 1em;
	height: 1em;
	object-fit: contain;
	display: block;
}

.st-st-social img.st-ikona-wlasna,
.st-st-profil img.st-ikona-wlasna {
	width: 20px;
	height: 20px;
}