/*
 * Kartki pakietów — wygląd z 2026.
 *
 * PO CO OSOBNY PLIK
 * -----------------
 * Stary wygląd kartek jest rozsypany po `pages.css` w kilkudziesięciu regułach,
 * w tym w środku sześciu zapytań medialnych. Wycinanie go stamtąd byłoby dużą,
 * ryzykowną zmianą w pliku, od którego zależy cała strona ofertowa.
 *
 * Zamiast tego kartka dostała nowe nazwy klas (`pakiet-*`), więc stare reguły
 * po prostu nie mają czego dotyczyć. Zostają w `pages.css` jako uśpione —
 * i jako druga, obok gita, kopia poprzedniego wyglądu.
 *
 * Klasa `package-container` na elemencie <li> ZOSTAJE mimo to: karuzela liczy
 * z niej krok przewijania (`pages.js`, selektor `.package-container`). Zdjęcie
 * tej klasy wyłącza strzałki. Stąd nadpisania `.package-container.pakiet` —
 * podwójny selektor wygrywa z pojedynczym niezależnie od kolejności wczytania.
 *
 * Zakładki, karuzela, przęsła (`fake-gap`) i wygaszanie krawędzi zostają
 * bez zmian — to konstrukcja strony, a nie wygląd kartki.
 */

/* Barwy (`--pakiet-*`) siedzą w `style.css`, bo korzystają z nich także strony
   spoza oferty — arkusz motywu jest jedynym wczytywanym wszędzie. */

/* ------------------------------------------------------- nagłówek sekcji */

/*
 * Nadtytuł z kreską i tytuł, nad przyciskami zakładek. Rysuje to skrót
 * `[klucz_naglowek_oferty]`, więc napisy stoją w kodzie, nie w treści czterech stron.
 *
 * PRZY LEWEJ KRAWĘDZI, JEDNO POD DRUGIM — tak jak w sekcji „dlaczego Klucz” na tej
 * samej stronie, którą właściciel wskazał jako zrobioną prawidłowo. Pierwsze podejście
 * z 17.08.2026 stawiało wszystko na środku i było źle.
 *
 * Kreska PRZED napisem to ten sam gest, co przy nadtytule slajdu i w tamtej sekcji.
 * Osobne klasy, a nie `.dlaczego-*`, bo tamte biorą barwy z palety ciemnego pasa
 * (`--taryfa-*`) i na białym tle byłyby niewidoczne.
 */
/*
 * ODSTĘPY ZE SKALI MOTYWU, NIE Z PALCA.
 *
 * `--klucz-pas-y` u góry, bo nad nagłówkiem kończy się kremowy pas slajdera i to
 * jest granica między pasami. `--klucz-blok-y` u dołu, bo przyciski zakładek należą
 * już do tej samej sekcji co nagłówek — to odstęp wewnątrz pasa, nie między pasami.
 *
 * Pierwsza wersja z 17.08.2026 miała `margin: 0 auto 2.5rem`: zero u góry, więc
 * nagłówek przyklejał się do slajdera, i wpisane z palca 40 px u dołu, które
 * sumowało się z `margin-top: 47px` przycisków w jeden pusty pas. Stąd reguła niżej
 * zerująca tamten margines — odstęp ma mieć JEDEN właściciel.
 */
.oferta-naglowek {
	max-width: var(--klucz-kolumna);
	margin: var(--klucz-pas-y) auto var(--klucz-blok-y);
	/* Ten sam margines boczny co ciemny pas „dlaczego Klucz” — oba są nagłówkami
	   sekcji i mają zaczynać się w jednej pionowej linii. */
	padding: 0 var(--klucz-margines-boczny);
}

/* Gdy nagłówek stoi nad przyciskami, to on odpowiada za odstęp do nich. Selektor
   sąsiada, a nie zmiana samej `.tab-buttons`, bo tamta reguła obowiązuje nadal
   wszędzie, gdzie przyciski stoją bez nagłówka. */
.oferta-naglowek + .tab-buttons {
	margin-top: 0;
}

.oferta-nadtytul {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 18px;
	font-family: var(--klucz-font-ui);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--pakiet-muted);
}

.oferta-nadtytul::before {
	content: "";
	flex: 0 0 auto;
	width: 28px;
	height: 2px;
	background: var(--pakiet-red);
}

.oferta-tytul {
	margin: 0;
	font-family: var(--klucz-font-ui);
	/* Ta sama skala co nagłówek sekcji „dlaczego Klucz”, żeby oba pasy mówiły
	   jednym głosem. Mniejsza od nagłówka slajdu, bo ten jest pierwszy na stronie
	   i ma zostać największy. */
	font-size: clamp(1.75rem, 3.4vw, 3rem);
	font-weight: 400;
	letter-spacing: -.03em;
	line-height: 1.08;
	color: var(--pakiet-ink);
	text-wrap: balance;
}

/* ------------------------------------------------------- przyciski zakładek */

/*
 * Zakładki oferty w tym samym języku, co kartki pod nimi: pigułka, cienki obrys,
 * a stan wybrany oznaczony czerwienią marki — tak jak wyróżniona kartka.
 *
 * Barwa stanu wybranego bierze się z atrybutu `aria-selected`, który skrypt
 * zakładek i tak ustawia dla czytników ekranu. Wcześniej wpisywał ją prosto
 * w atrybut `style`, przez co nie dało się jej zmienić z arkusza.
 *
 * Reguły z `!important` odpowiadają regule `.tablink:hover` w `pages.css`, która
 * też go używa. Przy równej ważności i specyficzności wygrywa arkusz wczytany
 * później, czyli ten.
 */

/*
 * Odstęp nad zakładkami równy temu pod nimi.
 *
 * Pod zakładkami składa się na niego kilka reguł z `pages.css`, więc wartość
 * nie jest oczywista i zmienia się z szerokością ekranu:
 *
 *   < 768 px   margin-bottom 8 (zlewa się z zerem) + margines kartki 14   =  22
 *   ≥ 768 px   to samo + dopełnienie karuzeli 25                          =  47
 *   ≥ 1024 px  margin-top 60 z `.container_offer` + 25 + 14               =  99
 *
 * Marginesy sąsiadujących elementów się zlewają, dlatego z pary 8 i 60 liczy się
 * tylko większa. Gdyby któraś z tych reguł się zmieniła, tę wartość trzeba
 * przeliczyć — stąd rachunek zapisany wprost, zamiast samej liczby.
 */
.tab-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.625rem;
	margin-top: 22px;
	margin-bottom: 8px;
}

@media screen and (min-width: 768px) {
	.tab-buttons {
		margin-top: 47px;
	}
}

@media screen and (min-width: 1024px) {
	.tab-buttons {
		margin-top: 99px;
	}
}

.tab-buttons .tablink {
	margin: 0;
	padding: 0.625rem 1.25rem;
	border: 1px solid var(--pakiet-line);
	border-radius: 999px;
	background-color: #fff;
	color: var(--pakiet-ink);
	font-family: var(--klucz-font-ui);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.01em;
	box-shadow: none;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.tab-buttons .tablink:hover {
	border-color: var(--pakiet-red) !important;
	background-color: #fff !important;
	color: var(--pakiet-red) !important;
	box-shadow: none !important;
}

/* Biel na #c94d4d daje 4,51:1 — powyżej progu 4,5:1 dla tekstu tej wielkości. */
.tab-buttons .tablink[aria-selected="true"],
.tab-buttons .tablink[aria-selected="true"]:hover {
	border-color: var(--pakiet-red) !important;
	background-color: var(--pakiet-red) !important;
	color: #fff !important;
}

@media screen and (min-width: 768px) {
	.tab-buttons .tablink {
		font-size: 1.0625rem;
		padding: 0.6875rem 1.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tab-buttons .tablink {
		transition: none;
	}
}

/* ------------------------------------------------------------------ kartka */

/*
 * WYMIARY KARTKI W REM, NIE W PIKSELACH.
 *
 * Pasek dostępności powiększa tekst, ustawiając `font-size` na `html` — rosną
 * więc wyłącznie długości podane w `rem`. Gdy pudełko było w pikselach, przy
 * 150% tekst puchł w kartce tej samej wielkości i wychodził poza obrys: cena
 * przekraczała prawą krawędź, a liczba gigabajtów łamała się w środku.
 *
 * Przy zapisie w `rem` kartka rośnie razem z pismem i układ trzyma się sam.
 * Skutek uboczny jest pożądany: przy 150% w rzędzie mieszczą się trzy kartki
 * zamiast pięciu, bo `flex-wrap` przelicza wiersz od nowa.
 *
 * Wartości to dokładne przeliczenie dotychczasowych pikseli przez 16, więc
 * przy zwykłym stopniu pisma nic się nie zmienia.
 */
.package-container.pakiet {
	/* Punkt odniesienia dla plakietki. `pages.css` ustawia to samo na
	   `.package-container`, ale nowy wygląd nie może zależeć od reguły,
	   którą kiedyś posprzątamy razem ze starym arkuszem. */
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
	box-sizing: border-box;
	padding: 1.875rem;
	border: 1px solid var(--pakiet-line);
	border-radius: 28px;
	background: #fff;
	color: var(--pakiet-ink);
	text-align: left;
	font-family: var(--klucz-font-ui);
}

/* Odstępy zostają na marginesach kartki, a nie na `gap` listy: karuzela liczy
   krok z szerokości kartki powiększonej o `gap` opakowania, więc przeniesienie
   odstępu w inne miejsce zmieniłoby długość przewinięcia. */
.package-container.pakiet {
	margin: 0.875rem 0.75rem 1.75rem;
}

/*
 * Odstęp między kartkami, gdy stoją jedna pod drugą (telefon, zawijanie siatki).
 *
 * Plakietka stoi ponad górną krawędzią kartki, więc wjeżdża w ten odstęp
 * i zjada go od góry. Rachunek:
 *
 *   wysokość plakietki       8 + 20 + 8            = 36 px
 *   wystaje ponad kartkę     100% z 36             = 36 px
 *   czysty prześwit nad nią  (rytm wnętrza kartki) = 20 px
 *   ------------------------------------------------------
 *   odstęp                                          56 px
 *
 * Do 17.08.2026 było tu 45 px, bo plakietka wystawała o 70% i 10 px chowało się
 * w obrysie kartki. Po zdjęciu tła napis wyszedł nad kartkę w całości — patrz
 * komentarz przy `.pakiet-plakietka` — a powiększenie kroju dołożyło ostatni piksel.
 *
 * Zmiana wysokości plakietki albo jej przesunięcia wymaga przeliczenia tej liczby.
 *
 * Marginesy sąsiadujących kartek się zlewają, więc liczy się większa z pary
 * 51 px (dolny) i 14 px (górny) — czyli 51.
 */
.package-container.pakiet:not(:last-child) {
	margin-bottom: 3.5rem;
}

/* ------------------------------------------ siatka zakładek bez karuzeli */

/*
 * Trzy zakładki bez karuzeli („internetowe”, „internetowe w UE”, „połączenia”)
 * mają wspólny układ: jeden rząd kartek, wyśrodkowany, o równej wysokości.
 *
 * `pages.css` dokładał im własne odstępy:
 *
 *   #internet-package .package-container   margin-top: 90px; margin-bottom: 60px
 *   (i drugi raz, margin-top: 60px, w zapytaniu ≥ 768 px)
 *
 * Były potrzebne staremu wyglądowi — kartka miała nad sobą pasek z nazwą
 * (`.package-container-h2`, `top: -39px`) wychodzący poza obrys. Nowa kartka ma
 * w tym miejscu tylko plakietkę, więc zostawały po nich puste pasy.
 *
 * DLACZEGO FLEX, A NIE SIATKA. `repeat(auto-fit, minmax(min, max))` wygląda na
 * właściwe narzędzie, ale liczbę kolumn liczy z GÓRNEGO kresu, jeżeli jest on
 * konkretną długością — nie z dolnego. Przy kresie 300 px w kontenerze 1320 px
 * mieściły się więc cztery kolumny zamiast pięciu i piąta kartka spadała niżej.
 * Bez kresu (`1fr`) liczba kolumn była poprawna, ale zakładki z dwiema i trzema
 * kartkami rozjeżdżały się na całą szerokość.
 *
 * Flex nie ma tego problemu: łamie wiersz według `flex-basis` (220 px), a górny
 * kres siedzi na kartce jako `max-width` i nie ma wpływu na to, ile ich wejdzie
 * w rząd. Odstęp pionowy to 56 px policzone wyżej pod plakietkę — ta sama liczba,
 * co margines kartek stojących w kolumnie, bo przy zawijaniu wiersza plakietka
 * drugiego rzędu wchodzi w ten odstęp dokładnie tak samo.
 *
 * Selektory muszą powtórzyć identyfikator: reguły z `pages.css` mają w sobie `#`
 * i wygrywają z każdą regułą złożoną z samych klas, niezależnie od kolejności
 * wczytania arkuszy.
 */
#internet-package .package-tab,
#internet-eu .package-tab,
#gen-info .package-tab {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 3.5rem 1.5rem;
	list-style: none;
	/*
	 * 36 px nad kartkami — dokładnie tyle, ile taśma karuzeli („wszystko
	 * w jednym”) ma z góry w `pages.css`. Tam to miejsce na plakietkę, która
	 * wychodzi poza obrys kartki; tutaj chodzi o to, żeby przy przełączaniu
	 * zakładek kartki nie podskakiwały. Wcześniej te trzy przylegały do
	 * przycisków, a czwarta odstawała.
	 *
	 * Było 25 px, dopóki plakietka wystawała o 70% swojej wysokości. Od
	 * 17.08.2026 wystaje w całości i ma większy krój, więc równa się jej wysokości.
	 */
	/*
	 * 50 px, nie 36: kartki mają tu wyzerowane marginesy pionowe (reguła niżej),
	 * więc dopełnienie musi wziąć na siebie także te 14 px, które w karuzeli wnosi
	 * `margin-top` kartki. 36 + 14 = 50 — tyle samo, ile nad pierwszą kartką
	 * w karuzeli, żeby przełączenie zakładki niczym nie szarpnęło.
	 */
	padding-top: 3.125rem;
	/*
	 * DOPEŁNIENIE BOCZNE RÓWNE ODSTĘPOWI KARTEK W KARUZELI (24 px).
	 *
	 * Kartki mają tu `flex: 1 1 220px`, więc się ROZPYCHAJĄ i wypełniają wiersz
	 * co do piksela. Wspólna reguła dla wąskich ekranów daje im wprawdzie
	 * `margin: auto`, ale w kontenerze flex `auto` rozdziela WOLNE miejsce —
	 * a rozciągnięte kartki żadnego nie zostawiają. Skutek: przy szerokościach,
	 * na których w rzędzie mieszczą się dwie kartki (ok. 490–768 px), pierwsza
	 * dotykała lewej krawędzi ekranu, a ostatnia prawej.
	 *
	 * Karuzela z zakładki „wszystko w jednym” ma tam po 24 px z każdej strony
	 * (`calc(100% - 3rem)` na kartce), więc tyle samo jest tutaj — inaczej odstęp
	 * boczny zmieniałby się przy przełączaniu zakładek.
	 */
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

/*
 * Kartka w rzędzie.
 *
 * `flex: 1 1 220px` — 220 px to podstawa, od której zależy łamanie wiersza:
 * przy dopełnieniu 30 px zostaje 160 px na treść, a najdłuższa liczba w tej
 * zakładce („+200 GB”, 42 px, światło −5%) zajmuje ok. 154 px. Pięć kartek
 * mieści się więc w rzędzie od 5 × 220 + 4 × 24 = 1196 px w górę.
 *
 * Rozciąganie (`flex-grow: 1`) rozdziela nadmiar po równo, więc kartki w rzędzie
 * są jednakowe. Górny kres siedzi niżej, w zapytaniu medialnym: na wąskim ekranie
 * o szerokości kartki decyduje wspólna reguła dla wszystkich zakładek, żeby
 * karuzela i te trzy nie miały dwóch różnych szerokości.
 *
 * Wyśrodkowanie robi `justify-content` kontenera, więc marginesy boczne nie są
 * do niczego potrzebne.
 *
 * `min-width: 0` zdejmuje `.package-ue-width { min-width: 350px }` z `pages.css`,
 * które rozpychało kartki w zakładce UE ponad ten kres.
 */
#internet-package .package-tab .pakiet,
#internet-eu .package-tab .pakiet,
#gen-info .package-tab .pakiet {
	flex: 1 1 13.75rem;
	width: auto;
	min-width: 0;
	/*
	 * ZERO — ODSTĘPY PIONOWE NALEŻĄ DO `gap` TAŚMY.
	 *
	 * Stało tu `margin: 0.875rem 0 0`, żeby te trzy zakładki nie przylegały do
	 * przycisków, podczas gdy czwarta ma nad sobą 14 px. Załatwiało to odstęp
	 * NAD pierwszą kartką i psuło odstęp MIĘDZY kartkami: taśma jest tu
	 * kontenerem flex, a we flexie marginesy się NIE zlewają, więc te 14 px
	 * doklejało się do `gap` i między kartkami wychodziło 70 px zamiast 56.
	 * W karuzeli taśma jest blokiem, margines zlewa się z sąsiadem i odstęp
	 * wynosi równe 56.
	 *
	 * Tamte 14 px przejęło `padding-top: 3.125rem` taśmy (36 + 14), więc odstęp
	 * nad pierwszą kartką zostaje bez zmian, a między kartkami zgadza się
	 * z karuzelą. Widać to było wyłącznie przy przełączaniu zakładek: te same
	 * kartki, ten sam ekran, a odstępy o jedną czwartą większe.
	 */
	margin: 0;
}

/* Kres szerokości tam, gdzie w rzędzie stoi więcej niż jedna kartka — bez niego
   dwie kartki w „połączeniach” rozjeżdżały się po 640 px każda. */
@media screen and (min-width: 768px) {
	#internet-package .package-tab .pakiet,
	#internet-eu .package-tab .pakiet,
	#gen-info .package-tab .pakiet {
		max-width: 18.75rem;
	}
}

/*
 * Odstęp pod ostatnim rzędem kartek.
 *
 * „Wszystko w jednym” i „internetowe” kończą się blokiem „Dodatkowe informacje”,
 * który ma się stykać z kremowym pasem taryfy — i dlatego nie ma dolnego
 * marginesu. „W UE” i „połączenia” nie mają tego bloku, więc kartki dotykały
 * pasa bezpośrednio.
 *
 * Warunek `:last-child` zamiast wyliczania zakładek z nazwy: reguła sama
 * przestanie obowiązywać, jeżeli któraś z nich dostanie kiedyś swoje pytania.
 * Wartość równa odstępowi nad ciemnym blokiem, żeby rytm strony był ten sam
 * niezależnie od zakładki.
 */
.tabcontent > .package-tab:last-child {
	margin-bottom: var(--klucz-sekcja-y);
}

/* Wyróżniona kartka. W makiecie to ta z plakietką „HIT!”. */
.package-container.pakiet--hit {
	background: var(--pakiet-red);
	border-color: var(--pakiet-red);
	color: #fff;
	transform: translateY(-12px);
}

/*
 * Na wąskim ekranie kartka nie jest podnoszona.
 *
 * Podniesienie o 12 px ma sens w rzędzie: wyróżniona kartka wystaje ponad
 * sąsiadki i widać ją od razu. Na telefonie kartki stoją jedna pod drugą,
 * więc nie ma czego przewyższać — zostaje sam przeskok w pionie, który wygląda
 * na niedopasowanie odstępów, a nie na wyróżnienie. Czerwone tło kartki
 * i napis nad nią wyróżniają ją tam wystarczająco.
 */
@media screen and (max-width: 767px) {
	.package-container.pakiet--hit {
		transform: none;
	}
}

.package-container.pakiet:hover {
	box-shadow: 0 18px 40px -24px rgba(23, 23, 23, .5);
}

/* --------------------------------------------------------------- plakietka */

/* Przy lewej krawędzi, nad nazwą pakietu — czyta się w kolejności, w jakiej
   patrzy się na kartkę. */
/*
 * SAM NAPIS, BEZ TŁA — decyzja właściciela z 17.08.2026.
 *
 * Wcześniej była to ciemna pigułka z białym napisem. Zdjęte zostało tło
 * i zaokrąglenie.
 *
 * NAPIS WYSZEDŁ W CAŁOŚCI NAD KARTKĘ (100% zamiast 70%) — i to nie jest kwestia
 * gustu. Kartka wyróżniona ma CZERWONE tło, a wyróżnienie nie jest osobnym
 * przełącznikiem: `Klucz_Pakiety` wylicza je z treści odznaki, bo wyróżniona jest
 * dokładnie ta kartka, której odznaka brzmi „HIT!”. Czerwona kartka ZAWSZE ma więc
 * plakietkę. Przy dawnym przesunięciu dolne 30% napisu leżałoby na czerwonym tle
 * w czerwonej barwie — czyli zniknęłoby, i to na jedynej kartce, która ma się
 * rzucać w oczy.
 *
 * Wyniesienie napisu w całości nad obrys zdejmuje problem bez drugiej barwy
 * i bez reguły wyjątkowej dla `--hit`: napis zawsze leży na białym tle sekcji.
 *
 * Barwa: przyciemniony akcent, nie sam akcent. Akcent daje na bieli 4,51:1 —
 * ledwie powyżej progu, a napis jest mały i rozstrzelony. Przyciemniony daje
 * 5,79:1 i trzyma się także wtedy, gdyby kartki kiedyś stanęły na kremie (5,23:1
 * zamiast 4,08:1 dla samego akcentu). Obie barwy idą za panelem.
 *
 * WYSOKOŚĆ JEST LICZBĄ, OD KTÓREJ ZALEŻĄ CZTERY INNE. Pionowe wypełnienie
 * zostało, choć bez tła nic nie maluje — razem z krojem składa się na wysokość
 * plakietki, a ta wchodzi do rachunku odstępów w czterech miejscach: tu niżej,
 * w prześwicie nad kartkami trzech zakładek, w tym samym prześwicie dla
 * „wszystko w jednym” na telefonie i w taśmie karuzeli w `pages.css`.
 *
 * Dziś: 8 + 20 + 8 = 36 px. Powiększenie kroju z 15 na 20 px (życzenie
 * właściciela, 17.08.2026) podniosło ją z 35 na 36 — wszystkie cztery miejsca
 * zostały przeliczone. Każda kolejna zmiana kroju albo wypełnienia wymaga tego
 * samego.
 */
.pakiet-plakietka {
	position: absolute;
	top: 1px;
	/* Równo z wypełnieniem kartki (1,875rem), żeby napis stał w jednej linii
	   pionowej z nazwą pakietu pod nim. Pigułka miała 1,75rem, bo liczyło się
	   wtedy ominięcie łuku rogu, a nie zgranie z treścią. */
	left: 1.875rem;
	transform: translateY(-100%);
	/* Wyżej niż panel szczegółów (3) i krzyżyk (4). Napis leży dziś w całości
	   nad kartką, więc panel (`inset: 0`) już go nie dosięga — warstwa zostaje
	   na wypadek powrotu do nachodzenia i dlatego, że nic nie kosztuje. */
	z-index: 5;
	padding: 0.5rem 0;
	color: var(--pakiet-red-ciemny);
	font-size: 1.25rem;
	font-weight: 800;
	/* Interlinia podana wprost, żeby wysokość plakietki była policzalna:
	   8 + 20 + 8 = 36 px. Od tej liczby zależy odstęp między kartkami niżej. */
	line-height: 1;
	letter-spacing: .12em;
	white-space: nowrap;
}

/* ------------------------------------------------------- nagłówek i cena */

.pakiet-gora {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.875rem;
}

.pakiet-nazwa {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 400;
	letter-spacing: -.01em;
	line-height: 1.25;
	text-transform: none;
	color: inherit;
}

/* W kartkach bez osobnej liczby gigabajtów nazwa JEST wartością oferty
   („10 GB”, „Atlantycki: 512MB”), więc musi ważyć więcej. */
.pakiet-nazwa--duza {
	font-size: 1.625rem;
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.1;
}

/* Jednostka dosunięta do DOŁU liczby, tak jak w makiecie. Przy wyrównaniu do góry
   „zł” wisiało przy górnej krawędzi cyfry i odrywało się od niej wzrokowo. */
.pakiet-cena {
	display: flex;
	align-items: flex-end;
	gap: 0.1875rem;
	margin: 0;
	white-space: nowrap;
}

.pakiet-cena-liczba {
	font-size: 2.5rem;
	font-weight: 800;
	letter-spacing: -.05em;
	line-height: .9;
}

.pakiet-cena-jednostka {
	/* Lekkie podniesienie znad linii podstawowej: bez niego dolna linia jednostki
	   schodzi poniżej cyfry, bo liczba ma ciasną interlinię (0,9). */
	padding-bottom: 2px;
	font-size: 0.6875rem;
	line-height: 1.25;
	color: var(--pakiet-muted);
}

.pakiet--hit .pakiet-cena-jednostka {
	color: #fff;
}

/* ------------------------------------------------------------ liczba GB */

/* Sama liczba jest wielka, dopiski przy niej zostają małe — pakiet Premium
   ma w tym miejscu „100 GB (w dzień) +200 GB (w nocy)”. */
.pakiet-ilosc {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.3;
	color: var(--pakiet-muted);
}

.pakiet--hit .pakiet-ilosc {
	color: #fff;
}

/*
 * Liczba w osobnym wierszu, dopisek pod nią.
 *
 * Kartka Premium ma tu „100 GB (w dzień) +200 GB (w nocy)”. Przy liczbie
 * o wielkości 46 px sama para „100 GB (w dzień)” nie mieści się w szerokości
 * kartki, więc łamała się w przypadkowym miejscu — na ekranie zostawało
 * „100 GB (w” i niżej „dzień)”.
 *
 * Dopisku nie da się związać z liczbą bez własnego elementu (treść przychodzi
 * z pola tekstowego jako goły tekst), więc zamiast walczyć o jeden wiersz
 * rozdzielamy je celowo. `<br>` z treści staje się wtedy zbędny — zostawiony
 * dokładałby pusty wiersz między parami.
 */
.pakiet-liczba {
	display: block;
	/* Górny kres obniżony z 2.875rem: w siatce pięciu kolumn kartka ma ok. 244 px,
	   a „+200 GB” przy 46 px już się w niej nie mieściło. */
	font-size: clamp(2.125rem, 4vw, 2.625rem);
	font-weight: 800;
	letter-spacing: -.05em;
	line-height: 1;
	/* Czerwień marki, nie szarość: liczba gigabajtów jest tym, po co ktoś na tę
	   kartkę patrzy.

	   Uwaga: `--pakiet-red` nie pochodzi ze `style.css` — panel nadpisuje całą
	   paletę w `klucz-motyw-inline-css`, a wartość ze `style.css` jest tylko
	   zapasem na wypadek jego braku. Zmierzone na żywo: #c83c3c z panelu daje
	   5,04:1 na bieli i 4,55:1 na kremie, czyli mieści się nawet w progu 4,5:1
	   dla pisma zwykłej wielkości, a to jest 34–42 px grubym krojem (próg 3:1).
	   Zapas #c94d4d ze `style.css` schodzi do 4,52:1 i 4,08:1 — też wystarcza.
	   Gdyby ktoś w panelu ustawił jaśniejszą czerwień, ten napis pierwszy na tym
	   ucierpi, bo jest największy i stoi na jasnym tle. */
	color: var(--pakiet-red);
}

.pakiet--hit .pakiet-liczba {
	color: #fff;
}

.pakiet-ilosc br {
	display: none;
}

/* Prześwit przed drugą parą („+200 GB (w nocy)”), żeby czytały się jako dwie
   pozycje, a nie jedna czterowierszowa. */
.pakiet-liczba:not(:first-child) {
	margin-top: 7px;
}

/* --------------------------------------------------------------- cechy */

.pakiet-cechy {
	display: flex;
	flex-direction: column;
	gap: 0.5625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pakiet-cecha {
	position: relative;
	padding-left: 1.375em;
	font-size: 1rem;
	line-height: 1.4;
}

.pakiet-cecha::before {
	content: "✓";
	position: absolute;
	top: 0;
	left: 0;
	color: var(--pakiet-red);
	font-weight: 700;
}

.pakiet--hit .pakiet-cecha::before {
	color: #fff;
}

/* Drugi plan: wiersze „1000 min po 0,25 zł do…”. Kartka „wszystko w jednym”
   ma ich cztery — postawione na równi z ofertą robiły ścianę tekstu. */
.pakiet-cecha--dodatkowa {
	font-size: 0.8125rem;
	color: var(--pakiet-muted);
}

.pakiet--hit .pakiet-cecha--dodatkowa {
	color: #fff;
}

.pakiet-rada {
	appearance: none;
	border: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Kółko liczone w `em`, więc rośnie razem z tekstem przy powiększeniu
	   z paska dostępności. Przy 0.625rem daje to te same 15 px co wcześniej. */
	width: 1.5em;
	height: 1.5em;
	border-radius: 999px;
	background: var(--pakiet-red);
	color: #fff;
	font-size: 0.625rem;
	font-style: italic;
	font-weight: 800;
	vertical-align: 1px;
	cursor: help;
	font-family: inherit;
	line-height: 1;
	position: relative;
}

/* Samo kółko ma 15 px — na palec za mało. Niewidoczna nakładka rozszerza pole
   dotknięcia do 44 px w obie strony, nie ruszając wyglądu. Pod spodem jest tylko
   tekst cechy, nic klikalnego, więc nakładka niczego nie przesłania. */
.pakiet-rada::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}

.pakiet--hit .pakiet-rada {
	background: #fff;
	color: var(--pakiet-red);
}

/*
 * Dymek z wyjaśnieniem. Wcześniej robił to `title`, czyli dymek przeglądarki:
 * na dotyku nie otwierał się w ogóle, a myszą dopiero po około sekundzie.
 * Tutaj pokazanie jest natychmiastowe (najechanie albo tabulator), a dotknięcie
 * przełącza go przyciskiem — stan trzyma `aria-expanded`, którym steruje
 * `pakiety-rady.js`.
 *
 * Kotwicą jest `.pakiet-cecha`, która ma już `position: relative` pod znaczek ✓,
 * więc dymek nie wystaje poza kartkę na wąskim ekranie.
 */
.pakiet-rada-tresc {
	position: absolute;
	top: calc(100% + 0.35em);
	right: 0;
	left: 0;
	z-index: 3;
	padding: 0.55em 0.7em;
	border-radius: 0.5em;
	background: var(--pakiet-ink);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.35;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transition: opacity .12s ease;
}

.pakiet-rada:hover + .pakiet-rada-tresc,
.pakiet-rada:focus-visible + .pakiet-rada-tresc,
.pakiet-rada[aria-expanded="true"] + .pakiet-rada-tresc {
	opacity: 1;
	visibility: visible;
}

/* Na karcie HIT tło kartki jest czerwone — dymek zostaje ciemny, żeby nie
   zlewał się z nią w jedną plamę. */
.pakiet--hit .pakiet-rada-tresc {
	background: #2f3131;
}

@media (prefers-reduced-motion: reduce) {
	.pakiet-rada-tresc {
		transition: none;
	}
}

/* ------------------------------------------------------------ kod USSD */

/* `margin-top: auto` dosuwa kod do dołu, więc w rzędzie kartek o różnej
   liczbie cech kody stoją w jednej linii. */
/*
 * Etykieta i kod w jednym wierszu.
 *
 * `flex-wrap: wrap` zrzucał kod pod etykietę, bo w kolumnie o szerokości 244 px
 * napis „AKTYWUJ KODEM” (ok. 110 px) i plakietka (ok. 101 px) nie mieszczą się
 * obok siebie. Zamiast zawijać całe pudełko, pozwalamy złamać sam napis:
 * najdłuższe jego słowo ma ok. 62 px, więc razem z plakietką i przerwą wychodzi
 * ok. 173 px — mieści się z zapasem.
 */
.pakiet-kod {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 0.625rem;
	margin-top: auto;
	padding-top: 1.125rem;
	border-top: 1px solid var(--pakiet-line);
}

.pakiet--hit .pakiet-kod {
	border-top-color: rgba(255, 255, 255, .35);
}

.pakiet-kod-etykieta {
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--pakiet-muted);
}

.pakiet--hit .pakiet-kod-etykieta {
	color: #fff;
}

/* Font o stałej szerokości: kody ustawiają się wtedy znak w znak.
   `flex: 0 0 auto` — plakietka nigdy się nie kurczy, bo ściśnięty kod USSD
   przestaje być przepisywalny; miejsce ustępuje etykieta obok. */
.pakiet-chip {
	flex: 0 0 auto;
	padding: 0.4375rem 0.6875rem;
	border-radius: 999px;
	/*
	 * Pigułka na czerwonym tle, biały napis — 5,04:1, powyżej progu 4,5:1.
	 *
	 * Biel PEŁNA, bez przezroczystości: czerwień marki ma na bieli zapas rzędu
	 * pół stopnia, więc wyciszenie napisu do 90% zeszłoby poniżej progu.
	 */
	background: var(--pakiet-red);
	color: #fff;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 0.8125rem;
	font-weight: 700;
}

.pakiet--hit .pakiet-chip {
	background: #fff;
	color: var(--pakiet-red);
}

/* ------------------------------------------------------------ szczegóły */

/*
 * Miejsce po odsyłaczu zamawiane z góry — inaczej kartka kurczy się o 19,5 px
 * w chwili otwarcia panelu.
 *
 * Otwarcie wyjmuje z toku OBA dzieci `<details>`: treść (reguła niżej) i sam
 * `<summary>`, przebrany w krzyżyk. Element zostaje wtedy bez ani jednej rzeczy
 * w toku i zapada się do zera. Nakładka nic nie przesuwa, ale ten zanik owszem:
 * kartka gubi wysokość wiersza z napisem, a przez `align-items: stretch` traci
 * ją cały rząd i wszystko pod nim — stąd podskok ciemnej sekcji.
 *
 * Widać go tylko wtedy, gdy otwierana kartka jest w rzędzie najwyższa, czyli to
 * ona wyznacza wysokość. Dlatego w zakładce „wszystko w jednym” podskoku nie ma,
 * a w „internet” i „informacje ogólne” jest — po jednej kartce w każdej.
 *
 * 1.5rem to próg celu dotykowego z WCAG 2.5.8 (24 px), w rem — rośnie razem
 * z powiększeniem tekstu z paska dostępności. Zamknięty napis ma 22,5 px przy
 * każdym stopniu pisma (0.9375rem × 1.5), więc zapas zawsze wystarcza i po obu
 * stronach przełącznika stoi ta sama wartość.
 *
 * Warunek: napis mieści się w jednej linii. Dziś mieści we wszystkich trzech
 * językach („szczegóły”, „Деталі”, „Details”) — dłuższy zawinąłby się i podskok
 * wróciłby pomniejszony o te 24 px.
 */
.pakiet-szczegoly {
	min-height: 1.5rem;
	font-size: 0.9375rem;
}

.pakiet-szczegoly > summary {
	min-height: 1.5rem;
	cursor: pointer;
	color: var(--pakiet-muted);
	font-weight: 700;
	list-style-position: inside;
}

.pakiet--hit .pakiet-szczegoly > summary {
	color: #fff;
}

.pakiet-szczegoly-tresc {
	display: flex;
	flex-direction: column;
	gap: 0.4375rem;
	padding-top: 0.625rem;
	color: var(--pakiet-muted);
}

.pakiet--hit .pakiet-szczegoly-tresc {
	color: #fff;
}

.pakiet-szczegoly-tresc p {
	margin: 0;
}

.pakiet-uwaga {
	font-style: italic;
}

/*
 * Szczegóły jako warstwa NA kartce — jednakowo we wszystkich zakładkach.
 *
 * Dwa problemy naraz. Rozwinięcie `<details>` w toku treści powiększało kartkę,
 * kartka podnosiła wysokość całego rzędu, a wszystko poniżej — druga zakładka,
 * taryfa, stopka — zjeżdżało w dół. Panel wyjęty z toku (`position: absolute`)
 * nie zmienia wysokości niczego: `<details>` zostaje wysokie na sam odsyłacz.
 *
 * Drugi problem dotyczy karuzeli: taśma ma `overflow-x: auto`, a to zgodnie ze
 * specyfikacją wymusza przycinanie także w pionie. Panel wysunięty POD kartkę
 * byłby tam ucięty na jej krawędzi. Dlatego panel nigdzie nie wychodzi poza
 * obrys kartki, tylko ją przykrywa — jeden układ w czterech zakładkach zamiast
 * dwóch różnych, a w karuzeli panel jedzie i chowa się razem z kartką.
 *
 * Punktem odniesienia jest sama kartka (`.package-container.pakiet` ma
 * `position: relative`), więc `.pakiet-szczegoly` NIE może być pozycjonowane —
 * inaczej panel liczyłby położenie od wiersza z odsyłaczem.
 *
 * Dłuższa treść przewija się w środku panelu, zamiast go rozpychać.
 */
.pakiet-szczegoly[open] > .pakiet-szczegoly-tresc {
	position: absolute;
	inset: 0;
	z-index: 3;
	overflow-y: auto;
	/* Górne dopełnienie robi miejsce na przycisk zamykania: 12 px odsunięcia
	   + 34 px przycisku + 8 px prześwitu. */
	padding: 3.375rem 1.625rem 1.5rem;
	border-radius: 27px;
	background: #fff;
	box-shadow: 0 20px 30px -26px rgba(23, 23, 23, .6);
}

/* Kartka wyróżniona jest czerwona i ma białe pismo — na białym panelu byłoby
   niewidoczne. */
.pakiet--hit .pakiet-szczegoly[open] > .pakiet-szczegoly-tresc {
	color: var(--pakiet-muted);
}

/*
 * Odsyłacz zamienia się w krzyżyk, gdy panel jest otwarty.
 *
 * To nadal ten sam `<summary>`, tylko przeniesiony w róg i przebrany — dzięki
 * temu zamykanie robi przeglądarka, tak samo jak otwieranie, bez ani jednej
 * linii skryptu i z obsługą klawiatury z pudełka.
 *
 * Napis chowamy wcięciem, a nie `display: none` ani zerowym stopniem pisma:
 * zostaje w drzewie dostępności, więc czytnik ekranu nadal mówi „szczegóły”
 * i sam dopowiada, czy rzecz jest rozwinięta.
 *
 * 34 px to rozmiar celu dotykowego z zapasem ponad wymagane 24 px (WCAG 2.2,
 * 2.5.8), w rem — rośnie razem z powiększeniem tekstu.
 */
.pakiet-szczegoly[open] > summary {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 4;
	width: 2.125rem;
	height: 2.125rem;
	overflow: hidden;
	border: 1px solid var(--pakiet-line);
	border-radius: 999px;
	background: #fff;
	color: var(--pakiet-ink);
	text-indent: -999em;
	list-style: none;
}

.pakiet-szczegoly[open] > summary::-webkit-details-marker {
	display: none;
}

.pakiet-szczegoly[open] > summary::after {
	content: "✕";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-indent: 0;
	font-size: 0.9375rem;
	font-weight: 700;
}

.pakiet-szczegoly[open] > summary:hover {
	border-color: var(--pakiet-red);
	color: var(--pakiet-red);
}

.pakiet a {
	color: inherit;
}

/* ------------------------------------------------------------- szerokości */

/*
 * Jednakowa wysokość kartek w rzędzie.
 *
 * `pages.css` ustawia `.package-tab { align-items: flex-start }` — każda kartka
 * była wtedy wysoka na tyle, ile ma treści, i rząd wyglądał jak schodki.
 * Przy rozciągnięciu działa wreszcie `margin-top: auto` na pasku z kodem:
 * kody stoją w jednej linii niezależnie od liczby cech nad nimi.
 *
 * Obie reguły mają tę samą specyficzność, a zapytanie medialne jej nie zmienia,
 * więc rozstrzyga kolejność wczytania — `pakiety.css` idzie po `pages.css`.
 */
.package-tab {
	align-items: stretch;
}

/* Szerokość kartki. Podwójny selektor wygrywa z regułami `.package-container`
   w zapytaniach medialnych `pages.css`, które ustawiały `min-content`
   i `calc(100% / 2 - 20px)` pod stary, węższy układ. */
.package-tab .pakiet {
	flex: 0 1 18.125rem;
	width: auto;
	max-width: 21.25rem;
}

#all-in-one .package-tab .pakiet {
	flex: 0 0 18.125rem;
}

/*
 * Poniżej 768 px `.package-tab` NIE jest kontenerem flex — reguła, która to
 * włącza, siedzi w `pages.css` w zapytaniu `min-width: 768px`. Lista jest wtedy
 * zwykłym blokiem, a kartki blokami jedna pod drugą.
 *
 * Dlatego tutaj nie sterujemy szerokością przez `flex-basis`, tylko puszczamy
 * kartkę na całą dostępną szerokość i ograniczamy ją od góry. Wyśrodkowanie robi
 * `margin-inline: auto` — stara reguła robiła to samo i to ją zgubiłem,
 * ustawiając stały margines boczny.
 */
@media screen and (max-width: 767px) {
	/*
	 * Szerokość kartki na telefonie — jedna reguła dla wszystkich zakładek,
	 * łącznie z karuzelą, żeby przełączanie zakładek nie zmieniało szerokości.
	 *
	 * BEZ GÓRNEGO OGRANICZNIKA SZEROKOŚCI. Stało tu `min(340px, …)`, żeby kartka
	 * nie czytała się jak pas na całą szerokość. Skutek uboczny wyszedł dopiero
	 * przy porównaniu z sekcjami pod nią: powyżej ok. 380 px ogranicznik zaczynał
	 * działać i boki kartki rosły razem z ekranem — przy 430 px już po 45 px,
	 * podczas gdy ciemna sekcja, dodatkowe informacje i stopka trzymały równe 20.
	 * Kartka wyglądała na węższą od wszystkiego, co pod nią stoi.
	 *
	 * ⚠ Sprawdzanie przy jednej szerokości tego nie wykryje. Przy 375 px ogranicznik
	 * nie działa i wszystko wygląda równo; różnica zaczyna się dopiero wyżej.
	 *
	 * Teraz szerokość liczy się wyłącznie z marginesu bocznego, więc kartka stoi
	 * w tej samej pionowej linii co reszta strony na KAŻDEJ szerokości telefonu:
	 *
	 *   360 px  →  320 px kartki, po 20 px z boku
	 *   390 px  →  350 px kartki, po 20 px
	 *   430 px  →  390 px kartki, po 20 px
	 *
	 * Marginesy `auto` są tu potrzebne tylko karuzeli: poniżej 768 px jej lista
	 * nie jest kontenerem flex, więc kartki nie mają czym się wyśrodkować.
	 */
	.package-tab .pakiet,
	#all-in-one .package-tab .pakiet {
		flex-basis: auto;
		width: auto;
		max-width: min(21.25rem, calc(100% - 3rem));
		margin-left: auto;
		margin-right: auto;
	}

	.package-container.pakiet {
		padding: 1.625rem;
	}

	/*
	 * Przęsło karuzeli (`li.fake-gap`) tylko w karuzeli.
	 *
	 * W poziomej taśmie to pusty element, który odsuwa pierwszą kartkę od
	 * krawędzi. `pages.css` nadaje mu wymiary dopiero od 768 px w górę — niżej
	 * zostawał gołym `<li>` i z rozpórki poziomej robiła się pionowa: 26 px
	 * pustego miejsca nad pierwszą kartką. Dlatego „wszystko w jednym” miało
	 * nad kartkami 48 px, a pozostałe zakładki 22 px.
	 */
	.fake-gap {
		display: none;
	}

	/*
	 * Margines pierwszej kartki zostaje w środku listy.
	 *
	 * Bez karuzeli lista „wszystko w jednym” jest zwykłym blokiem, więc górny
	 * margines pierwszej kartki sklejał się z marginesem listy i wychodził na
	 * zewnątrz zakładki — kartka lądowała 14 px pod przyciskami zamiast 22 px,
	 * jak w trzech pozostałych zakładkach (te są flexem, a tam marginesy się
	 * nie sklejają). `flow-root` to blok, który trzyma marginesy u siebie.
	 */
	#all-in-one .package-tab {
		display: flow-root;
		/*
		 * Te same 36 px, co w trzech pozostałych zakładkach. Na szerokim
		 * ekranie daje je taśma karuzeli, ale jej padding jest zapisany
		 * dopiero od 768 px w górę — niżej musi to zrobić sama lista.
		 */
		padding-top: 2.25rem;
	}

	.tab-buttons .tablink {
		padding: 0.5625rem 1rem;
		font-size: 0.9375rem;
	}
}

/*
 * Odstęp pod karuzelą.
 *
 * Trzy pozostałe zakładki dostają go z reguły `.tabcontent > .package-tab:last-child`
 * — ale ta nie łapie „wszystko w jednym”, bo tam lista jest zagnieżdżona w taśmie
 * i nie jest bezpośrednim dzieckiem zakładki. Ta zakładka miała więc pod sobą
 * o jakieś 40 px mniej niż reszta i kartki wpadały prosto w ciemny pas poniżej.
 *
 * W `rem`, żeby odstęp rósł razem z kartkami przy powiększeniu tekstu.
 */
#all-in-one .package-carousel {
	margin-bottom: var(--klucz-sekcja-y);
}

/* ------------------------------------------------------- strzałki karuzeli */

/*
 * Strzałki w nowym języku: okrągły biały przycisk z obrysem i czerwonym znakiem.
 *
 * DLACZEGO ROBIŁY WRAŻENIE PRZESUNIĘTYCH. `pages.css` daje im `width: 6rem`
 * (96 px) i `font-size: 15rem` — znak jest wtedy dwa i pół raza szerszy od
 * przycisku i wystaje poza niego na boki. Pudełka są symetryczne (`left: 0`
 * i `right: 0` w kontenerze o równym dopełnieniu 100 px), ale to, co widać,
 * to sam znak, a `‹` i `›` nie mają w foncie jednakowych odsadek. Przy stopniu
 * 240 px nawet kilkuprocentowa różnica daje kilkanaście pikseli rozjazdu.
 *
 * Znak zmniejszony do 1,5 rem siedzi w środku pudełka i różnica odsadek robi
 * się niewidoczna. 44 px to zalecany rozmiar celu dotykowego (WCAG 2.2, 2.5.8
 * wymaga 24 px).
 *
 * Zapytanie medialne jest konieczne: reguła z `pages.css`, która ustawia
 * `display: block`, siedzi w `min-width: 768px`, a poniżej tego progu strzałki
 * mają być schowane. Bez tego samego progu mój `display: flex` z wyższą
 * szczegółowością pokazałby je także na telefonie, gdzie nie ma czym przewijać.
 */
@media screen and (min-width: 768px) {
	#all-in-one .pkg-nav {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		padding: 0;
		overflow: hidden;
		border: 1px solid var(--pakiet-line);
		border-radius: 999px;
		background-color: #fff;
		color: var(--pakiet-red);
		/* Znak z fontu chowamy wcięciem — rysowaną strzałkę nakłada `slider.css`
		   jako maskę na `::after`, żeby obie taśmy miały ten sam znak. */
		text-indent: -999em;
		line-height: 1;
	}

	#all-in-one .pkg-nav::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 0.875rem;
		height: 0.875rem;
		transform: translate(-50%, -50%);
		background-color: currentColor;
		-webkit-mask: no-repeat center / contain;
		mask: no-repeat center / contain;
	}

	#all-in-one .pkg-nav:hover {
		border-color: var(--pakiet-red);
		background-color: var(--pakiet-red);
		color: #fff;
	}

	#all-in-one .pkg-nav.prev {
		left: 20px;
	}

	#all-in-one .pkg-nav.next {
		right: 20px;
	}
}

/* Tryb wysokiego kontrastu i powiększony tekst mają własne reguły w
   `dostepnosc.css`; tutaj wystarczy nie przeszkadzać — barwy kartki
   są zapisane zmiennymi, więc nadpisanie ich wystarcza. */

/* ---------------------------------------------- odstęp zakładki → kartki */

/*
 * `pages.css` daje `.container_offer` 60 px górnego marginesu. Razem
 * z dopełnieniem taśmy karuzeli (36 px na plakietkę) i marginesem kartki (14 px)
 * robiło to 76 px pustki między przyciskami a plakietką — za dużo.
 *
 * 30 px na życzenie właściciela (18.08.2026). Nadpisanie tutaj, a nie poprawka
 * w `pages.css`: ten arkusz wczytuje się później, a tamten zostaje nietknięty
 * jako zapis poprzedniego wyglądu.
 */
.container_offer {
	margin-top: 30px;
}

/*
 * Odstęp pod kartkami — para do `.container_offer` wyżej.
 *
 * `.package-carousel` miał 64 px dolnego marginesu. Jest ostatnim dzieckiem
 * `.container_offer`, który nie ma dopełnienia ani obramowania, więc ten margines
 * PRZENIKA przez rodzica i odpycha następną sekcję — nie widać go ani na jednym,
 * ani na drugim elemencie, tylko jako pustka między nimi. Stąd 64 px, których
 * nie tłumaczyła żadna reguła widoczna w narzędziach przeglądarki.
 *
 * 30 px, tyle samo co nad kartkami.
 */
.package-carousel {
	margin-bottom: 30px;
}