/*
 * Stickerly — hub „Oferta dla firm".
 *
 * Arkusz ładowany WYŁĄCZNIE na stronach używających szablonu (sprawdzane
 * po obecności shortcode'u w treści wpisu).
 *
 * Wejścia elementów obsługuje ten sam silnik co strona główna
 * (`strona-glowna.js`, klasa `.st-anim` + `.st-w`), więc nie ma tu ani jednej
 * dodatkowej linii JavaScriptu.
 */

.st-hub {
	--granat: #344a90;
	--granat-hover: #2b3d78;
	--granat-gleboki: #1f2c58;
	--blekit: #6f83c7;
	--blekit-jasny: #e8ecf8;
	--grafit: #181b22;
	--szary: #606775;
	--obwodka: #dce1ea;
	--tlo-chlodne: #f6f8fc;
}

/* ---------- wspólne ---------- */

/* ⚠️ Flatsome renderuje `the_content()` wprost w `.col-inner` — nie ma tu
   żadnego `.entry-content`. Selektory muszą trafiać w oba, żeby szablon
   działał także po ewentualnej zmianie motywu. */
.st-hub .col-inner > section,
.st-hub .entry-content > section,
.st-hub-sekcja,
.st-hub-real,
.st-hub-hero,
.st-hub-kroki,
.st-hub-faq,
.st-hub-linki {
	margin-block: clamp(2.5rem, 6vw, 4.5rem);
}

.st-hub-h1 {
	margin: 0 0 1.1rem;
	font-size: clamp(1.9rem, 3.6vw, 3.1rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--grafit);
}

.st-hub-h1 span { display: block; color: var(--granat); }

.st-hub-h2 {
	margin: 0 0 1.2rem;
	font-size: clamp(1.4rem, 2.6vw, 2.05rem);
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--grafit);
}

.st-hub-h2--jasny { color: #fff; }

/* Treść pisana w edytorze — nagłówki i akapity z normalnej zawartości strony. */
.st-hub .col-inner > h2,
.st-hub .entry-content h2 {
	margin: clamp(2.2rem, 5vw, 3.4rem) 0 1rem;
	font-size: clamp(1.4rem, 2.6vw, 2.05rem);
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--grafit);
}

.st-hub .col-inner > p,
.st-hub .entry-content p {
	max-width: 76ch;
	font-size: 1.02rem;
	line-height: 1.7;
	color: var(--szary);
}

.st-hub .col-inner > p a,
.st-hub .entry-content a { color: var(--granat); text-decoration: underline; }
.st-hub .col-inner > p a:hover,
.st-hub .entry-content a:hover { color: var(--granat-hover); }

/* Tytuł strony z motywu chowamy — nagłówek H1 rysuje shortcode `[st_hub_hero]`
   i tylko on ma prawo być H1 na stronie. */
.st-hub .entry-header { display: none; }

/* ---------- wejścia ---------- */

.st-anim {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity 0.6s ease var(--o, 0s),
		transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--o, 0s);
}

.st-anim.st-w,
.st-w .st-anim { opacity: 1; transform: none; }

/*
 * NAGLOWEK NIE CZEKA NA JAVASCRIPT.
 * Regula wyzej daje kazdemu `.st-anim` `opacity: 0`, a widocznosc przywraca
 * dopiero klasa `st-w` dokladana przez `IntersectionObserver` ze skryptu
 * w stopce. Dla sekcji nizej to w porzadku. Ale naglowek widac jako pierwszy:
 * przy wolnym laczu albo bledzie w skrypcie klient dostawal pusty pas zamiast
 * tytulu strony. Ta sama poprawka co w hero strony glownej (dziennik 07.09 (7)).
 *
 * `both` jest konieczne — bez niego element wraca do `opacity: 0` z reguly
 * bazowej w chwili, gdy animacja sie konczy.
 */
@keyframes st-hub-wejscie {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

.st-hub-hero .st-anim {
	animation: st-hub-wejscie 0.6s ease var(--o, 0s) both;
}

/* ---------- okruszki ---------- */

/* Ścieżka jest tu nawigacją, nie ozdobnikiem: hub ma cztery poziomy. */
.st-hub-okruszki {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 1.1rem;
	font-size: 0.85rem;
	color: var(--szary);
}

.st-hub-okruszki a { color: var(--szary); text-decoration: none; }
.st-hub-okruszki a:hover { color: var(--granat); text-decoration: underline; }
.st-hub-okruszki b { color: var(--grafit); font-weight: 600; }
.st-hub-okruszki span { color: var(--obwodka); }

/* ---------- nagłówek strony ---------- */

/* Miękka poświata za nagłówkiem — strona przestaje zaczynać się od płaskiej
   bieli, a nie robi się z tego ciemna sekcja. */
/* ⚠️ GÓRNY ODSTĘP LICZONY, NIE ODZIEDZICZONY. Zanim to poprawiliśmy, między
   dołem menu a okruszkami było 262 px pustki: 30 px paddingu `.page-wrapper`
   + 72 px marginesu sekcji + 38 px paddingu nagłówka. Na desktopie czytało
   się to jak pusty pas, o którym nikt nie wie, co miał zawierać. */
.st-hub-hero {
	position: relative;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
}

.st-hub .col-inner > section:first-child,
.st-hub .entry-content > section:first-child { margin-top: 0; }

/* ⚠️ NAGŁÓWEK BEZ ZDJĘCIA JEST WYŚRODKOWANY. Sama zmiana siatki na jedną
   kolumnę nie wystarczyła: tekst nadal kończył się w połowie ekranu, a po
   prawej zostawał martwy pas — czytało się to jak brakująca grafika.
   Wyśrodkowana kolumna wygląda na decyzję, a nie na dziurę. */
/*
 * ⚠️ KONIEC WYŚRODKOWANIA. Wyśrodkowany tytuł na pełnej szerokości to układ,
 * który nie mówi nic — a wcześniej wybraliśmy go tylko dlatego, że po prawej
 * zostawał martwy pas. Teraz ten pas ma zawartość (wykrojniki), więc treść
 * wraca do lewej krawędzi i odzyskuje hierarchię: oko startuje w jednym,
 * przewidywalnym miejscu, tak jak na każdej innej podstronie.
 */
.st-hub-hero--bez-obrazu {
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.st-hub-hero--bez-obrazu .st-hub-hero-tresc { width: min(58ch, 100%); }

/* ---------- wykrojniki w prawej kolumnie ---------- */

/*
 * Trzy prostokąty z białą obwódką i lekkim przechyłem — ten sam motyw,
 * z którego zbudowane są kafle hero na stronie głównej.
 * ⚠️ Rysowane CSS-em, nie grafiką: zero bajtów do pobrania, ostre na każdym
 * ekranie i nie trzeba ich podmieniać przy zmianie palety.
 */
.st-hub-hero-wykrojniki {
	position: relative;
	display: grid;
	place-items: center;
	min-height: clamp(120px, 18vw, 190px);
}

.st-hub-hero-wykrojniki span {
	position: absolute;
	border: 2px solid rgba(255, 255, 255, 0.16);
	border-radius: 14px;
	transform: rotate(var(--r, 0deg));
}

.st-hub-hero-wykrojniki span:nth-child(1) { width: 58%; height: 62%; }
.st-hub-hero-wykrojniki span:nth-child(2) { width: 44%; height: 44%; border-color: rgba(255, 255, 255, 0.26); }
.st-hub-hero-wykrojniki span:nth-child(3) { width: 72%; height: 34%; border-color: rgba(255, 255, 255, 0.1); }

/* ---------- treść wchodzi na nagłówek ---------- */

/*
 * ⚠️ TO JEST CAŁY EFEKT „NOWOCZESNOŚCI", O KTÓRY CHODZIŁO. Sekcja pod
 * nagłówkiem wjeżdża na jego dolną krawędź, więc strona ma dwie warstwy
 * zamiast dwóch pasów sklejonych na styk. Dotyczy tylko elementów, które
 * wyglądają jak karty — nachodzenie ściany tekstu wyglądałoby jak błąd.
 */
.st-hub-hero + .st-kontakt,
.st-hub-hero + .st-karty,
.st-hub-hero + .st-hub-kroki {
	position: relative;
	z-index: 2;
	margin-top: clamp(-3.4rem, -5vw, -2rem);
}

/*
 * ⚠️ NAGŁÓWEK BYŁ NIEWIDOCZNY — BIEL NA BIELI.
 * Wcześniej tło pasa szło z #FBFCFE do przezroczystości, czyli praktycznie
 * z bieli w biel. Efekt: strona informacyjna zaczynała się tytułem zawieszonym
 * w pustce i, jak to ujął Dawid 07.09, „wyglądała jak zwykła strona".
 *
 * Teraz to prawdziwy pas: błękit marki na pełną szerokość okna, zamknięty
 * od dołu granatową kreską. Kreska jest tu ważniejsza niż samo tło — to ona
 * oddziela nagłówek od treści i daje akcent, o który chodziło.
 *
 * ⚠️ Bez gradientu (decyzja Dawida z 07.09). Płaski kolor wygląda na wybrany,
 * a nie na domyślny efekt edytora.
 *
 * ⚠️ `inset` z ujemnymi wartościami po bokach wypycha pas poza kontener
 * Flatsome (`.row-main` ma 1270 px) na pełną szerokość okna. `z-index: -1`
 * kładzie go pod treścią, a `pointer-events: none` sprawia, że nie przechwytuje
 * kliknięć w okruszki i przycisk.
 */
.st-hub-hero::before {
	content: "";
	position: absolute;
	/* Nie `-1`. Element z ujemnym z-index chowa sie pod tlem przodka, ktory
	   jakies tlo ma — a `<main>` ma biale. Dokladnie na to nadzialem sie juz
	   przy podswietleniu frazy w H1 (dziennik 06.09 (7)). Zamiast tego pas
	   dostaje 0, a tresc naglowka jest podnoszona nad niego regula nizej. */
	z-index: 0;
	inset: -2.4rem -50vw -1.6rem -50vw;
	/* ⚠️ BYŁ BLADY BŁĘKIT — WYGLĄDAŁ JAK NIEDOKOŃCZONA MAKIETA (Dawid 07.09).
	   Granat głęboki to kolor, który mapowanie UI przewiduje dla ciemnych
	   sekcji i stopki; ten sam nosi nagłówek bloga, więc całość zaczyna
	   wyglądać jak jedna witryna, a nie jak trzy szablony obok siebie. */
	background: var(--granat-gleboki);
	pointer-events: none;
}

.st-hub-hero > * {
	position: relative;
	z-index: 1;
}

/* Pas potrzebuje oddechu — inaczej okruszki kleją się do menu, a przycisk
   do dolnej kreski. */
.st-hub-hero {
	padding-block: clamp(1.4rem, 3vw, 2.2rem) clamp(1.8rem, 4vw, 3rem);
	margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}

.st-hub-lead p {
	margin: 0 0 0.9rem;
	max-width: 60ch;
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--szary);
}

/* Punkty z „✔" na początku akapitu — tak przychodzą ze starej strony i tak
   je zostawiamy, żeby treść dało się wkleić bez przerabiania na listę. */
.st-hub-lead p:not(:first-child) {
	position: relative;
	padding-left: 1.7rem;
	margin-bottom: 0.55rem;
	color: var(--grafit);
	font-size: 0.98rem;
}

.st-hub-lead p:not(:first-child)::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 50%;
	background: var(--blekit-jasny);
}

.st-hub-lead p:not(:first-child)::after {
	content: "";
	position: absolute;
	left: 0.34rem;
	top: 0.6em;
	width: 0.34rem;
	height: 0.62rem;
	border-right: 2px solid var(--granat);
	border-bottom: 2px solid var(--granat);
	transform: rotate(45deg);
}

.st-hub-btn {
	display: inline-block;
	margin-top: 0.8rem;
	padding: 0.85rem 1.8rem;
	border-radius: 999px;
	background: var(--granat);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.st-hub-btn:hover {
	background: var(--granat-hover);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(52, 74, 144, 0.3);
}

.st-hub-hero-obraz {
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 24px 56px rgba(24, 27, 34, 0.18);
}

/* ⚠️ WYSOKOŚĆ ZDJĘCIA OGRANICZONA. Kolumny nagłówka są wyrównane do środka,
   więc wysokie zdjęcie rozciągało wiersz i spychało tekst w dół — na desktopie
   wyglądało to jak pusty pas nad okruszkami, choć w kodzie żadnego odstępu
   tam nie ma. */
.st-hub-hero-obraz img {
	display: block;
	width: 100%;
	max-height: clamp(260px, 30vw, 420px);
	height: auto;
	object-fit: contain;
}

/* ---------- kroki procesu ---------- */

/*
 * ⚠️ KROKI JAKO KARTY, NIE JAKO KÓŁKA NA KRESCE. Poprzedni układ był
 * przepisaniem starej witryny: cztery kółka na cienkiej linii. Teraz każdy
 * etap to karta z wielką, przygaszoną cyfrą w tle — porządek jest czytelny
 * z odległości, a sekcja nie wygląda jak schemat z instrukcji obsługi.
 */
.st-hub-kroki {
	/* Boczny padding celowo mały — każdy piksel oddany ramce panelu zabiera
	   go karcie, a tam siedzi tekst, który ma się nie łamać co słowo. */
	padding: clamp(1.8rem, 3.8vw, 2.8rem) clamp(0.9rem, 1.6vw, 1.4rem);
	border-radius: 26px;
	background:
		radial-gradient(90% 70% at 10% 0%, rgba(129, 154, 224, 0.16) 0%, rgba(129, 154, 224, 0) 60%),
		var(--tlo-chlodne);
}

.st-hub-kroki > .st-hub-h2 { padding-inline: clamp(0.2rem, 0.8vw, 0.7rem); }

.st-hub-kroki-lista {
	position: relative;
	display: grid;
	/* Liczba kolumn przychodzi inline z PHP (najwyżej cztery) — patrz moduł.
	   Odstęp celowo mniejszy niż w innych siatkach: tu każdy piksel oddany
	   przerwie zabiera go tekstowi w karcie. */
	gap: clamp(0.8rem, 1.6vw, 1.3rem);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.st-hub-krok {
	position: relative;
	z-index: 1;
	overflow: hidden;
	padding: clamp(1.1rem, 1.9vw, 1.5rem);
	border: 1px solid var(--obwodka);
	border-radius: 18px;
	background: #fff;
	text-align: left;
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
}

.st-hub-krok:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(24, 27, 34, 0.12); }

/*
 * ⚠️ CYFRA MUSI MIEŚCIĆ SIĘ W KARCIE. Poprzednio wystawała poza krawędź
 * i przy `overflow: hidden` czytała się jak błąd składu, a nie jak zamiar.
 * Teraz jest KONTUROWA (sam obrys, bez wypełnienia), w całości widoczna
 * w prawym górnym rogu — element dekoracyjny, który nie zabiera miejsca
 * tekstowi i nie wygląda na ucięty.
 */
.st-hub-krok-tlo {
	position: absolute;
	top: 0.5rem;
	right: 0.9rem;
	font-size: 3.6rem;
	font-weight: 800;
	line-height: 1;
	/* ⚠️ BEZ `-webkit-text-stroke`. Obrys rysuje się na krawędzi glifu, więc
	   przy cyfrach z „oczkiem" (4, 6, 8, 9) kontur wewnętrzny nakłada się na
	   zewnętrzny i cyfra wygląda na uszkodzoną. Zwykłe wypełnienie w bardzo
	   jasnym błękicie daje ten sam efekt bez artefaktów. */
	color: #e8ecf8;
	pointer-events: none;
	user-select: none;
}

.st-hub-krok-nr {
	position: relative;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin-bottom: 0.9rem;
	border-radius: 10px;
	background: var(--granat);
	color: #fff;
	font-size: 0.9rem;
	font-weight: 700;
}

.st-hub-krok-tytul {
	position: relative;
	display: block;
	margin-bottom: 0.4rem;
	font-weight: 700;
	font-size: 1.02rem;
	color: var(--grafit);
}

.st-hub-krok-opis {
	position: relative;
	display: block;
	font-size: 0.92rem;
	line-height: 1.55;
	text-wrap: pretty;
	color: var(--szary);
}

/* ---------- sekcje treści ---------- */

/*
 * ⚠️ TEKST NIGDY NA CAŁĄ SZEROKOŚĆ. Akapit rozciągnięty na 1100 px to ściana,
 * której się nie czyta. Sekcja ze zdjęciem dzieli miejsce na dwie kolumny,
 * a sekcja bez zdjęcia dostaje wąską kolumnę na środku.
 */
.st-hub-sekcja--zdjecie {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.6rem, 4vw, 3.5rem);
	align-items: center;
}

.st-hub-sekcja--lewo .st-hub-sekcja-tekst { order: 2; }

.st-hub-sekcja--waska .st-hub-sekcja-tekst {
	width: min(70ch, 100%);
	margin-inline: auto;
}

.st-hub-sekcja-tekst > :first-child { margin-top: 0; }

.st-hub-sekcja-tekst h2 {
	margin: 0 0 0.9rem;
	font-size: clamp(1.4rem, 2.6vw, 2.05rem);
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--grafit);
}

.st-hub-sekcja-tekst p {
	margin: 0 0 0.9rem;
	font-size: 1.02rem;
	line-height: 1.72;
	color: var(--szary);
}

.st-hub-sekcja-tekst strong { color: var(--grafit); }

.st-hub-sekcja-obraz {
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 22px 50px rgba(24, 27, 34, 0.16);
}

.st-hub-sekcja-obraz img { display: block; width: 100%; height: auto; }

/* ---------- realizacje ---------- */

.st-real { margin-block: clamp(2.5rem, 6vw, 4.5rem); }
.st-real-naglowek { margin-bottom: 1.4rem; }
.st-real-opis { margin: 0; max-width: 70ch; color: var(--szary); font-size: 1rem; line-height: 1.65; }

/* Kafle celowo NIEWIELKIE: chodzi o pokazanie skali produkcji, a nie
   pojedynczego zdjęcia. Więcej sztuk na ekranie działa lepiej niż cztery duże. */
.st-real-siatka {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 0.7rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-real-kafel {
	overflow: hidden;
	border-radius: 14px;
	background: var(--obwodka);
	aspect-ratio: 1;
}

.st-real-otworz {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

.st-real-kafel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.st-real-kafel:hover img { transform: scale(1.06); }

/* ---------- powiększenie zdjęcia ---------- */

/*
 * Własne, bo wtyczka do lightboxa to kolejne ~40 kB skryptu na każdej stronie,
 * a potrzebujemy jednego obrazka na wierzchu i strzałek. Warstwa powstaje
 * dopiero przy pierwszym kliknięciu.
 */
.st-lupa {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: grid;
	place-items: center;
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(10, 16, 36, 0.92);
	opacity: 0;
	transition: opacity 0.22s ease;
}

.st-lupa.st-lupa--widoczna { opacity: 1; }

.st-lupa img {
	max-width: 100%;
	max-height: 100%;
	border-radius: 12px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.st-lupa button {
	position: absolute;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.st-lupa button:hover { background: rgba(255, 255, 255, 0.24); }
.st-lupa-zamknij { top: 1.2rem; right: 1.2rem; }
.st-lupa-poprz { left: 1.2rem; top: 50%; transform: translateY(-50%); }
.st-lupa-nast { right: 1.2rem; top: 50%; transform: translateY(-50%); }
.st-lupa-licznik { position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; }

/* Zdjęcia poza pierwszą partią czekają schowane — znaczniki są w HTML, ale
   przeglądarka nie pobiera pliku, dopóki element nie stanie się widoczny. */
.st-real-ukryty { display: none; }

.st-real-wiecej { margin-top: 1.4rem; text-align: center; }

.st-hub-btn--kontur {
	background: transparent;
	border: 2px solid var(--granat);
	color: var(--granat);
	cursor: pointer;
	font-size: 0.98rem;
	font-family: inherit;
}

.st-hub-btn--kontur:hover { background: var(--granat); color: #fff; }

/* ---------- linkowanie wewnętrzne ---------- */

.st-hub-linki-naglowek {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.8rem;
}

.st-hub-linki-naglowek .st-hub-h2 { margin-bottom: 0.8rem; }

.st-hub-wyzej {
	color: var(--granat);
	font-size: 0.92rem;
	font-weight: 600;
	text-decoration: none;
}

.st-hub-wyzej:hover { color: var(--granat-hover); text-decoration: underline; }

.st-hub-linki-siatka {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 0.7rem;
	margin: 0.6rem 0 0;
	padding: 0;
	list-style: none;
}

.st-hub-linki-siatka a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem;
	height: 100%;
	padding: 0.95rem 1.1rem;
	border: 1px solid var(--obwodka);
	border-radius: 14px;
	background: #fff;
	color: var(--grafit);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* Widoczne tylko dla redaktora — strona bez treści nie jest publikowana. */
.st-hub-szkic {
	display: inline-block;
	margin-left: 0.4rem;
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
	background: var(--blekit-jasny);
	color: var(--granat);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	vertical-align: middle;
}

.st-hub-linki-siatka i {
	flex: 0 0 auto;
	color: var(--blekit);
	font-style: normal;
	transition: transform 0.2s ease, color 0.2s ease;
}

.st-hub-linki-siatka a:hover {
	border-color: var(--granat);
	box-shadow: 0 12px 26px rgba(52, 74, 144, 0.14);
	transform: translateY(-2px);
	color: var(--granat);
}

.st-hub-linki-siatka a:hover i { color: var(--granat); transform: translateX(3px); }

/* ---------- FAQ ---------- */

/*
 * ⚠️ FAQ JAKO KARTY, nie jako lista z kreskami. Poprzednia wersja była
 * przepisaniem starej witryny. Karty z własnym tłem i obwódką czytają się
 * jak element strony, a nie jak tabela, i pozwalają wyróżnić pozycję otwartą.
 */
.st-hub-faq-lista {
	display: grid;
	gap: 0.65rem;
}

.st-hub-pyt {
	border: 1px solid var(--obwodka);
	border-radius: 16px;
	background: #fff;
	overflow: hidden;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.st-hub-pyt[open] {
	border-color: var(--blekit);
	box-shadow: 0 14px 32px rgba(52, 74, 144, 0.1);
}

.st-hub-pyt summary {
	position: relative;
	padding: 1.15rem 3rem 1.15rem 1.25rem;
	font-weight: 700;
	font-size: 1.02rem;
	color: var(--grafit);
	cursor: pointer;
	list-style: none;
}

.st-hub-pyt summary::-webkit-details-marker { display: none; }

.st-hub-pyt summary::after {
	content: "";
	position: absolute;
	right: 1.35rem;
	top: 1.5rem;
	width: 0.55rem;
	height: 0.55rem;
	border-right: 2px solid var(--granat);
	border-bottom: 2px solid var(--granat);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.st-hub-pyt[open] summary::after { transform: rotate(-135deg); }
.st-hub-pyt summary:hover { color: var(--granat); }

.st-hub-pyt-tresc { padding: 0 1.25rem 1.25rem; }

/* ⚠️ BEZ `max-width`. Karta ma 1240 px, a ograniczenie do 74ch zatrzymywało
   tekst na 725 px i zostawiało pół karty pustej — wyglądało to jak błąd
   składu, nie jak zamiar. Odpowiedzi FAQ mają po jednym–dwa zdania, więc
   przy pełnej szerokości mieszczą się w jednej–dwóch liniach. */
.st-hub-pyt-tresc p {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.7;
	color: var(--szary);
}

/* ---------- wycena ---------- */

.st-hub-wycena {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-top: clamp(3rem, 7vw, 5rem);
	padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem;
	background:
		radial-gradient(70% 60% at 15% 0%, rgba(129, 154, 224, 0.28) 0%, rgba(129, 154, 224, 0) 60%),
		linear-gradient(160deg, #2f4380 0%, #24336a 55%, #1b264f 100%);
	color: #fff;
	text-align: center;
}

.st-hub-wycena-srodek { width: min(760px, 100%); margin-inline: auto; }
.st-hub-wycena-opis { margin: 0 0 1.6rem; color: rgba(255, 255, 255, 0.72); font-size: 1.02rem; }

.st-hub-wycena-pole {
	padding: clamp(1.2rem, 3vw, 2rem);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.06);
	text-align: left;
}

.st-hub-wycena-zastepnik { margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 0.98rem; }
.st-hub-wycena-zastepnik a { color: #fff; }

/* ---------- telefon ---------- */

/* ---------- nagłówek na ciemnym tle ---------- */

/*
 * ⚠️ TEN BLOK MUSI STAĆ NA KOŃCU ARKUSZA, ZA REGUŁAMI, KTÓRE NADPISUJE.
 * Pierwsza wersja siedziała wyżej i przegrywała z `.st-hub-lead p { color:
 * var(--szary) }` z dalszej części pliku — przy równej specyficzności wygrywa
 * reguła późniejsza. Efekt: szary tekst na granacie, kontrast **2,37**,
 * czyli poniżej każdego progu czytelności. Wyłapane pomiarem, nie na oko.
 */

.st-hub-h1 { color: #fff; }
.st-hub-h1 span { color: #a9baf0; }

.st-hub-lead p { color: rgba(255, 255, 255, 0.82); }

/* ⚠️ PUNKTY MIAŁY KONTRAST 1,28 — GRAFIT NA GRANACIE, CZYLI NIC.
   `.st-hub-lead p` ustawia biel, ale punkty łapią się na późniejszą regułę
   z `:not(:first-child)`, która nadawała im kolor tekstu głównego.
   Zmierzone na stronie barbera przed poprawką: rgb(24,27,34) na rgb(31,44,88). */
.st-hub-hero .st-hub-lead p:not(:first-child) { color: rgba(255, 255, 255, 0.82); }
.st-hub-hero .st-hub-lead strong { color: #fff; }

/* Znacznik „✔" przy punktach — na ciemnym tle biel byłaby krzykiem. */
.st-hub-lead p:not(:first-child)::before { color: #a9baf0; }

/* ⚠️ Bieżąca strona w okruszkach to `<b>`, nie `[aria-current]` — miała
   kolor grafitu, czyli była praktycznie niewidoczna na granacie. */
.st-hub-okruszki,
.st-hub-okruszki a { color: rgba(255, 255, 255, 0.7); }
.st-hub-okruszki a:hover { color: #fff; text-decoration: underline; }
.st-hub-okruszki b { color: #fff; }
.st-hub-okruszki span { color: rgba(255, 255, 255, 0.38); }

/* ⚠️ Przycisk odwrócony: biały na granacie. Granatowy przycisk na granatowym
   tle to niewidoczny przycisk — a to jedyne wezwanie w całym nagłówku. */
.st-hub-hero .st-hub-btn {
	background: #fff;
	color: var(--granat-gleboki);
	border-color: #fff;
}

.st-hub-hero .st-hub-btn:hover {
	background: var(--blekit-jasny);
	color: var(--granat-gleboki);
	border-color: var(--blekit-jasny);
}

/*
 * ⚠️ TEN BLOK MUSI STAĆ ZA BLOKIEM CIEMNYM — druga taka pomyłka tego dnia.
 * Pierwsza wersja siedziała w linii 183, a ciemne tło `.st-hub-hero::before`
 * w linii 280. Przy równej specyficzności (0,1,1) wygrywa reguła późniejsza,
 * więc klasa `--jasny` była na elemencie, a tło zostawało granatowe.
 * Zmierzone: `jasny: true`, a `tlo: rgb(31,44,88)`.
 */
/* ---------- wariant jasny: hub „Oferta dla firm" ---------- */

/*
 * ⚠️ CIEMNY NAGŁÓWEK ZOSTAJE TYLKO NA STRONACH INFORMACYJNYCH.
 * Dawid 07.09 o hubie: *„to miało zostać jasne… dla całego drzewka oferta
 * dla firm to ma być białe"*. To ma sens także merytorycznie: hub jest
 * ofertą sprzedażową i ma zdjęcia branżowe, a ciemny pas pod zdjęciem
 * odbierał im kontrast.
 */
/*
 * ⚠️ BŁĘKIT ODRZUCONY — „wygląda jak notatnik" (Dawid 07.09).
 * Miał odróżniać nagłówek od treści, ale na stronie, która niżej ma białe
 * karty i białe tło, dawał efekt kartki w kratkę zamiast pasa marki.
 * Zostaje **biel** — tak jak było, zanim zacząłem przy tym majstrować —
 * a rozdzielenie od treści bierze na siebie sama granatowa kreska.
 */
.st-hub-hero--jasny::before {
	background: #fff;
	border-bottom: 2px solid rgba(52, 74, 144, 0.14);
}

.st-hub-hero--jasny .st-hub-h1 { color: var(--grafit); }
.st-hub-hero--jasny .st-hub-h1 span { color: var(--granat); }

.st-hub-hero--jasny .st-hub-lead p,
.st-hub-hero--jasny .st-hub-lead p:not(:first-child) { color: var(--szary); }
.st-hub-hero--jasny .st-hub-lead strong { color: var(--grafit); }
.st-hub-hero--jasny .st-hub-lead p:not(:first-child)::before { color: var(--granat); }

.st-hub-hero--jasny .st-hub-okruszki,
.st-hub-hero--jasny .st-hub-okruszki a { color: var(--szary); }
.st-hub-hero--jasny .st-hub-okruszki a:hover { color: var(--granat); }
.st-hub-hero--jasny .st-hub-okruszki b { color: var(--grafit); }
.st-hub-hero--jasny .st-hub-okruszki span { color: var(--obwodka); }

/* Na jasnym tle przycisk wraca do granatu — biały byłby niewidoczny. */
.st-hub-hero--jasny .st-hub-btn {
	background: var(--granat);
	color: #fff;
	border-color: var(--granat);
}

.st-hub-hero--jasny .st-hub-btn:hover {
	background: var(--granat-hover);
	color: #fff;
	border-color: var(--granat-hover);
}

/* Wykrojniki na jasnym tle muszą być ciemne, inaczej znikają. */
.st-hub-hero--jasny .st-hub-hero-wykrojniki span { border-color: rgba(52, 74, 144, 0.13); }
.st-hub-hero--jasny .st-hub-hero-wykrojniki span:nth-child(2) { border-color: rgba(52, 74, 144, 0.26); }
.st-hub-hero--jasny .st-hub-hero-wykrojniki span:nth-child(3) { border-color: rgba(52, 74, 144, 0.1); }

@media (max-width: 900px) {
	.st-hub-hero { grid-template-columns: 1fr; }
	.st-hub-hero-obraz { order: -1; }
	.st-hub-kroki-lista { grid-template-columns: 1fr 1fr !important; gap: 1.4rem; }
	.st-hub-kroki-lista::before { display: none; }
	.st-hub-linki-siatka { grid-template-columns: 1fr 1fr; }
	.st-hub-sekcja--zdjecie { grid-template-columns: 1fr; }
	.st-hub-sekcja--lewo .st-hub-sekcja-tekst { order: 0; }
	.st-real-siatka { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.5rem; }
	.st-hub-krok-tlo { font-size: 3rem; top: 0.4rem; right: 0.7rem; }
	.st-lupa-poprz { left: 0.5rem; }
	.st-lupa-nast { right: 0.5rem; }
}

@media (max-width: 549px) {
	.st-hub-kroki-lista { grid-template-columns: 1fr !important; }
	.st-hub-krok { display: grid; grid-template-columns: 44px 1fr; gap: 0.2rem 0.9rem; text-align: left; }
	.st-hub-krok-nr { grid-row: 1 / 3; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.st-anim { opacity: 1; transform: none; transition: none; }
	.st-hub-hero .st-anim { animation: none; }
}

/* ================= DOKUMENT (regulamin, polityka) ============================= */

/*
 * ⚠️ SPIS TREŚCI JEST PRZYKLEJONY, ALE TYLKO NA DUŻYM EKRANIE. Na telefonie
 * przyklejona kolumna zjadałaby pół widoku; tam idzie zwykłą listą na górze.
 */
.st-dok { margin-block: clamp(1.5rem, 4vw, 2.5rem); }

.st-dok--ze-spisem {
	display: grid;
	grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: start;
}

.st-dok-spis {
	position: sticky;
	top: 100px;
	padding: 1.2rem 1.3rem;
	border: 1px solid var(--obwodka);
	border-radius: 16px;
	background: var(--tlo-chlodne);
}

.st-dok-spis-tytul {
	margin: 0 0 0.7rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--szary);
}

.st-dok-spis ol {
	margin: 0;
	padding-left: 1.2rem;
	font-size: 0.88rem;
	line-height: 1.5;
}

.st-dok-spis li { margin-bottom: 0.45rem; }
.st-dok-spis li::marker { color: var(--blekit); font-weight: 700; }
.st-dok-spis a { color: var(--szary); text-decoration: none; }
.st-dok-spis a:hover { color: var(--granat); text-decoration: underline; }

.st-dok-tresc { max-width: 78ch; }

.st-dok-data {
	margin: 0 0 1.6rem;
	padding: 0.5rem 0.9rem;
	display: inline-block;
	border-radius: 999px;
	background: var(--blekit-jasny);
	color: var(--granat);
	font-size: 0.82rem;
	font-weight: 600;
}

/* Odstęp na przyklejony nagłówek motywu — bez tego kotwica ze spisu ląduje
   pod paskiem menu i wygląda, jakby nie zadziałała. */
.st-dok-tresc h2 {
	scroll-margin-top: 110px;
	margin: 2.4rem 0 0.9rem;
	padding-top: 1.6rem;
	border-top: 1px solid var(--obwodka);
	font-size: clamp(1.25rem, 2.2vw, 1.6rem);
	line-height: 1.25;
	color: var(--grafit);
}

.st-dok-tresc h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.st-dok-tresc h3 { margin: 1.6rem 0 0.6rem; font-size: 1.05rem; color: var(--grafit); }
.st-dok-tresc p { margin: 0 0 0.9rem; font-size: 0.98rem; line-height: 1.75; color: var(--szary); }
.st-dok-tresc ul, .st-dok-tresc ol { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.st-dok-tresc li { margin-bottom: 0.5rem; font-size: 0.98rem; line-height: 1.7; color: var(--szary); }
.st-dok-tresc li::marker { color: var(--blekit); }
.st-dok-tresc strong { color: var(--grafit); }
.st-dok-tresc a { color: var(--granat); }

/* ================= KARTA KONTAKTOWA ========================================== */

.st-kontakt {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0.8rem;
	margin-block: clamp(1.5rem, 4vw, 2.5rem);
}

.st-kontakt-kafel {
	display: grid;
	gap: 0.15rem;
	padding: 1.2rem 1.3rem;
	border: 1px solid var(--obwodka);
	border-radius: 16px;
	background: #fff;
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

a.st-kontakt-kafel:hover {
	border-color: var(--granat);
	box-shadow: 0 14px 30px rgba(52, 74, 144, 0.14);
	transform: translateY(-3px);
}

.st-kontakt-ikona {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	margin-bottom: 0.6rem;
	border-radius: 11px;
	background: var(--blekit-jasny);
	color: var(--granat);
}

.st-kontakt-ikona .st-ikona { width: 1.25em; height: 1.25em; }
.st-kontakt-etykieta { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--szary); }
.st-kontakt-wartosc { font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--grafit); }

@media (max-width: 900px) {
	.st-dok--ze-spisem { grid-template-columns: 1fr; }
	.st-dok-spis { position: static; }
}

/* ================= OŚ INSTRUKCJI ================= */

/*
 * ⚠️ To jest oś DO WYKONANIA, nie oś do oglądania. Linia i kropki mają
 * pokazać, że kroki idą po kolei i że jest ich pięć — całą treść widać
 * bez animacji i bez JavaScriptu, bo ktoś czyta to z naklejką w ręce.
 *
 * Zdjęcia idą na przemian raz z lewej, raz z prawej. Pięć jednakowo
 * ułożonych bloków pod sobą czyta się jak tabela, nie jak instrukcja.
 */

.st-os { margin-block: clamp(2.5rem, 6vw, 4.5rem); }

.st-os-lead {
	max-width: 62ch;
	margin: 0 0 clamp(1.8rem, 4vw, 3rem);
	font-size: 1.02rem;
	line-height: 1.7;
	color: var(--szary);
}

.st-os-lista {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Linia osi. Rysowana pseudoelementem, więc nie wchodzi do drzewa
   dostępności i czytnik ekranu jej nie odczyta. */
.st-os-lista::before {
	content: "";
	position: absolute;
	top: 0.6rem;
	bottom: 0.6rem;
	left: 11px;
	width: 2px;
	background: linear-gradient(180deg, var(--obwodka), var(--blekit) 22%, var(--blekit) 78%, var(--obwodka));
	border-radius: 2px;
}

.st-os-krok {
	position: relative;
	display: grid;
	gap: clamp(1rem, 2.5vw, 2rem);
	padding-left: 2.6rem;
	margin-bottom: clamp(2rem, 5vw, 3.4rem);
}

.st-os-krok:last-child { margin-bottom: 0; }

/* Kropka na linii. */
.st-os-krok::before {
	content: "";
	position: absolute;
	top: 0.55rem;
	left: 5px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--granat);
	box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--blekit-jasny);
}

.st-os-nr {
	display: inline-block;
	margin-bottom: 0.55rem;
	padding: 0.24rem 0.62rem;
	border-radius: 999px;
	background: var(--blekit-jasny);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--granat);
}

.st-os-tytul {
	margin: 0 0 0.6rem;
	font-size: clamp(1.15rem, 2vw, 1.5rem);
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--grafit);
}

.st-os-tresc p {
	margin: 0 0 0.75rem;
	font-size: 1rem;
	line-height: 1.75;
	color: var(--szary);
}

.st-os-tresc p:last-child { margin-bottom: 0; }
.st-os-tresc strong { color: var(--grafit); }

.st-os-obraz {
	overflow: hidden;
	border: 1px solid var(--obwodka);
	border-radius: 20px;
	background: var(--tlo-chlodne);
	box-shadow: 0 14px 34px -22px rgba(24, 27, 34, 0.4);
}

.st-os-obraz img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

@media (min-width: 900px) {
	.st-os-lista::before { left: calc(50% - 1px); }

	.st-os-krok {
		grid-template-columns: 1fr 1fr;
		align-items: center;
		padding-left: 0;
		column-gap: clamp(2.6rem, 6vw, 5rem);
	}

	.st-os-krok::before { left: calc(50% - 7px); top: 50%; margin-top: -7px; }

	/* Nieparzyste: tekst po lewej, zdjęcie po prawej. Parzyste odwrotnie —
	   kolejność w HTML zostaje bez zmian, przestawiamy tylko kolumny,
	   więc czytnik ekranu i tak dostaje krok w prawidłowej kolejności. */
	.st-os-krok:nth-child(even) .st-os-tresc { grid-column: 2; grid-row: 1; }
	.st-os-krok:nth-child(even) .st-os-obraz { grid-column: 1; grid-row: 1; }

	.st-os-krok:nth-child(odd) .st-os-tresc { text-align: right; }
	.st-os-krok:nth-child(odd) .st-os-nr { margin-left: auto; }
}

/* ================= SIATKA KART ================= */

.st-karty { margin-block: clamp(2.5rem, 6vw, 4.5rem); }

.st-karty-lead {
	max-width: 62ch;
	margin: 0 0 clamp(1.4rem, 3vw, 2.2rem);
	font-size: 1.02rem;
	line-height: 1.7;
	color: var(--szary);
}

/* ⚠️ Liczbę kolumn ustawia PHP atrybutem inline. `repeat(var(--x), 1fr)`
   jest nieprawidłowe i przeglądarka odrzuca całą deklarację. */
.st-karty-siatka {
	display: grid;
	gap: clamp(0.9rem, 2vw, 1.4rem);
}

.st-karta-x {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--obwodka);
	border-radius: 20px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

a.st-karta-x:hover {
	transform: translateY(-4px);
	border-color: var(--blekit);
	box-shadow: 0 20px 40px -26px rgba(24, 27, 34, 0.5);
}

.st-karta-x-obraz {
	display: block;
	background: var(--tlo-chlodne);
	border-bottom: 1px solid var(--obwodka);
}

.st-karta-x-obraz img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	padding: clamp(0.7rem, 1.6vw, 1.2rem);
}

.st-karta-x-tresc {
	display: block;
	padding: clamp(1rem, 2vw, 1.35rem);
}

.st-karta-x-tytul {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--grafit);
}

.st-karta-x-etykieta {
	display: inline-block;
	margin-bottom: 0.55rem;
	padding: 0.2rem 0.58rem;
	border-radius: 999px;
	background: var(--blekit-jasny);
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--granat);
}

.st-karta-x-opis { display: block; }

.st-karta-x-opis p {
	margin: 0 0 0.6rem;
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--szary);
}

.st-karta-x-opis p:last-child { margin-bottom: 0; }
.st-karta-x-opis strong { color: var(--grafit); }

/* Wariant ikonowy: małe rysunki, których nie wolno rozciągać — po
   powiększeniu do kafla robią się rozmyte. */
.st-karty--ikony .st-karta-x { align-items: center; text-align: center; }

.st-karty--ikony .st-karta-x-obraz {
	border: 0;
	background: none;
	padding-top: clamp(1rem, 2vw, 1.4rem);
}

.st-karty--ikony .st-karta-x-obraz img {
	width: clamp(56px, 9vw, 84px);
	aspect-ratio: 1;
	object-fit: contain;
	padding: 0;
	margin: 0 auto;
}

.st-karty--ikony .st-karta-x-tresc { padding-top: 0.7rem; }

@media (max-width: 760px) {
	.st-karty-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 460px) {
	.st-karty-siatka { grid-template-columns: 1fr !important; }
}

/* ================= TABELE W TREŚCI ================= */

/*
 * ⚠️ Na telefonie tabela NIE przewija się w poziomie — każdy wiersz staje się
 * kartą etykieta/wartość, tak samo jak w tabeli parametrów produktu. Poziome
 * przewijanie wewnątrz strony gubi się pod kciukiem i zwykle nikt go nie
 * znajduje. Nagłówki kolumn wchodzą przez `data-etykieta` w komórkach.
 */

.st-hub-tabela { margin: 1.6rem 0 2rem; }

.st-hub-tabela table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--obwodka);
	border-radius: 14px;
	overflow: hidden;
	font-size: 0.95rem;
}

.st-hub-tabela th {
	padding: 0.75rem 0.9rem;
	background: var(--granat);
	color: #fff;
	font-weight: 700;
	text-align: left;
	letter-spacing: 0.01em;
}

.st-hub-tabela td {
	padding: 0.7rem 0.9rem;
	border-top: 1px solid var(--obwodka);
	color: var(--szary);
	line-height: 1.6;
	vertical-align: top;
}

.st-hub-tabela tbody tr:nth-child(even) { background: var(--tlo-chlodne); }
.st-hub-tabela td:first-child { color: var(--grafit); font-weight: 600; }

@media (max-width: 720px) {
	.st-hub-tabela thead { display: none; }
	.st-hub-tabela tr { display: block; border-top: 1px solid var(--obwodka); }
	.st-hub-tabela tr:first-child { border-top: 0; }

	.st-hub-tabela td {
		display: flex;
		gap: 0.8rem;
		justify-content: space-between;
		border-top: 0;
		padding: 0.45rem 0.9rem;
	}

	.st-hub-tabela td::before {
		content: attr(data-etykieta);
		flex: 0 0 42%;
		font-weight: 700;
		color: var(--grafit);
	}

	.st-hub-tabela td:first-child { padding-top: 0.9rem; }
	.st-hub-tabela tr:last-child td:last-child { padding-bottom: 0.9rem; }
}