/* ==========================================================================
   Baba – Koszyk
   ==========================================================================

   Makieta koszyka jest rysowana na stronie 1920 px, a jej kolumna treści leży
   między x = 102 a x = 1818 — czyli ma 1716 px. Treść na żywej stronie ma
   1440 px (zmierzone na `.e-con-inner` nagłówka i stopki). Stąd
   `--kosz-s: 0.8392`.

   To jest ta sama siatka co listing katalogu (`--kat-col-gap: 3.017%` jest tam
   skomentowane jako „51,78 / 1716”), ale INNA niż karta produktu, która stoi
   na 1749 px i używa `--kat-s: 0.8233`. Nie wolno tu użyć `--kat-s`.

   Wymiary zapisujemy jako `calc(<liczba z Figmy>px * var(--kosz-s))`, żeby dało
   się porównać arkusz z makietą bez kalkulatora. Miary poziome siatki idą
   ułamkiem szerokości treści — kolumny mają zostać w proporcji przy każdej
   szerokości.

   Tokeny siedzą na `.baba-kosz`, NIGDY w `:root`. Korzeń widoku ma obie klasy
   (`baba-kat baba-kosz`): karuzela „Zobacz także” ma wyglądać dokładnie tak jak
   w katalogu, więc dostaje nietknięte `--kat-*`, a koszyk trzyma własne stopnie
   w przestrzeni `--kosz-*`. Jedna klasa, dwa zestawy tokenów, zero kolizji.

   Trzy miejsca, w których świadomie ODCHODZIMY od makiety, bo jest w niej
   niekonsekwencja (spis w tabeli odchyleń):
   - pole kodu rabatowego ma w makiecie 421,6 px przy liniach o 417 px i wystaje
     poza nie o ~4 px w lewo; wyrównujemy je do linii,
   - przycisk płatności jest wyśrodkowany względem karty (1573), a nie względem
     jej wcięć (1564,5) — środkujemy względem karty,
   - ceny w zaślepkach są odwrócone (przekreślone 35 zł przy aktywnym 49 zł);
     robimy poprawnie, przekreślona to cena regularna.
   -------------------------------------------------------------------------- */

.baba-kosz {
	--kosz-s: 0.8392;                    /* 1440 / 1716 — treść strony / siatka makiety */
	--kosz-pad: 18px;                    /* margines boczny makiety telefonu */

	/* Barwy zmierzone z wektorów makiety, nie z pikseli podglądu — JPEG
	   przesuwa je o jedną wartość na kanale. */
	--kosz-bg: #f8f1f1;                  /* karta podsumowania */
	--kosz-badge: #e8aff9;               /* plakietka informacyjna */
	/* Linie rozdzielające. W wektorze makiety ten kolor ma
	   `fill-opacity="0.5"` — wcześniej odczytałem sam kolor i krycie pominąłem,
	   przez co linie wychodziły dwa razy za ciemne. Zapis z kanałem alfa składa
	   się poprawnie na obu tłach: #9d9d9d na bieli i #999595 na różowej karcie,
	   dokładnie tak jak w makiecie. */
	--kosz-rule: rgba(59, 58, 58, .5);
	--kosz-ink: #202020;                 /* teksty karty podsumowania */

	/* Stopnie pisma ustalone KALIBRACJĄ, nie odczytem z nazw stylów.
	   Procedura: zmierzyć szerokość tuszu napisu w makiecie (z wektorów PDF-a),
	   zmierzyć ten sam napis w Poppinsie przy 1000 px na canvasie i rozwiązać
	   proporcję, uwzględniając światło międzyliterowe. Kontrola drugą miarą —
	   wysokością tuszu. Przy 100 px `actualBoundingBox` wraca zaokrąglony do
	   pełnych pikseli i nie rozstrzyga; dlatego 1000 px i dzielenie przez 10.

	   Kalibracja potwierdziła przy okazji KRÓJ. Sześć wersalikowych etykiet
	   („cena produktów”, „dostawa”, „wpisz kod rabatowy”, „bezpieczne
	   płatności”, „szybka realizacja”, „akceptowalne płatności”) daje
	   w Poppinsie 15,89 / 15,91 / 15,94 / 15,96 / 15,97 / 15,89 — rozrzut
	   pół procenta. W „Plus Jakarta Sans”, czyli w kroju, który serwis podaje
	   domyślnie, te same napisy rozjeżdżają się od 14,8 do 17,3. To Poppins.

	   Wyszła z tego skala 36 / 24 / 16 / 14 / 10:
	     36 — „Koszyk” i „Zobacz także”      (zmierzone 35,4–35,6)
	     24 — tytuł pozycji, „Łącznie”, cena aktualna (23,3–24,5)
	     16 — wszystkie wersaliki-etykiety    (15,4–16,0)
	     14 — kategoria, meta pozycji, cena przekreślona (13,5–14,0)
	     10,4 — „usuń pozycję”                (9,6–9,7; doprecyzowane do 10,4
	            pomiarem szerokości całego bloku ikona + napis: 103 px)

	   Waga jest jedyną rzeczą, której kalibracja NIE rozstrzyga: odmiany
	   Poppinsa mają na tyle zbliżone metryki, że stopień wychodzi ten sam
	   z dokładnością do 3 %. Wagi są więc odczytane z rysunku. */
	--kosz-fs-h1: calc(36px * var(--kosz-s));
	--kosz-lh-h1: calc(44px * var(--kosz-s));
	--kosz-fs-title: calc(24px * var(--kosz-s));
	--kosz-lh-title: calc(30px * var(--kosz-s));
	--kosz-fs-label: calc(16px * var(--kosz-s));
	--kosz-lh-label: calc(20.8px * var(--kosz-s));
	--kosz-fs-mini: calc(14px * var(--kosz-s));
	--kosz-lh-mini: calc(17.3px * var(--kosz-s));
	--kosz-fs-usun: calc(10.6px * var(--kosz-s));
	--kosz-fs-price: calc(24px * var(--kosz-s));
	--kosz-fs-total: calc(24px * var(--kosz-s));
	--kosz-fs-coupon-btn: calc(12px * var(--kosz-s));
	--kosz-ls-wide: calc(1.5px * var(--kosz-s));

	font-family: var(--kat-font, "Poppins", -apple-system, "Segoe UI", sans-serif);
	color: var(--kat-ink, #1e1e1e);
	max-width: 1440px;
	margin-inline: auto;
}

/* ---------- kontener motywu ----------

   Koszyk jest stroną klasyczną, więc Hello Elementor daje mu `.site-main`
   o szerokości 1140 px i `padding-inline: 10px` (zmierzone). Siatka serwisu ma
   1440 px, więc kolumnę motywu zerujemy — punktowo, zakresem
   `body.woocommerce-cart`, żeby nie ruszyć pozostałych stron klasycznych.

   Wyzerowanie `padding-inline` jest też warunkiem, pod którym na telefonie
   działa podsumowanie „na wylot”: wtedy `.baba-kosz` jest jedynym źródłem
   wcięcia bocznego i ujemny margines −18 px sięga dokładnie krawędzi ekranu. */

body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main {
	max-width: none;
	padding-inline: 0;
}

/* Tytuł strony jest tytułem DOKUMENTU i zostaje z motywu — nie renderujemy
   drugiego `h1`. Motyw daje mu jednak 10 px w „Plus Jakarta Sans” (zmierzone),
   więc typografię trzeba nadpisać w całości. */
body.woocommerce-cart .page-header,
body.woocommerce-checkout .page-header {
	max-width: 1440px;
	margin-inline: auto;
	padding: 0;
}

body.woocommerce-cart .page-header .entry-title,
body.woocommerce-checkout .page-header .entry-title {
	font-family: var(--kat-font, "Poppins", sans-serif);
	font-size: calc(36px * 0.8392);
	line-height: calc(44px * 0.8392);
	font-weight: 700;
	color: #000;
	margin: 0;
	padding: 0;
}

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

.baba-kosz__badge {
	box-sizing: border-box;
	width: 48.077%;                      /* 825 / 1716 */
	min-height: calc(80px * var(--kosz-s));
	margin: calc(33.6px * var(--kosz-s)) 0 0;   /* od dolnej krawędzi liter H1 */
	padding: calc(18px * var(--kosz-s)) calc(32px * var(--kosz-s));
	display: flex;
	align-items: center;
	border-radius: calc(21px * var(--kosz-s)); /* makieta: 21 px, nie pigułka (zmierzone na 825 × 80) */
	background: var(--kosz-badge);
	color: #fff;
	font-size: var(--kosz-fs-label);
	line-height: var(--kosz-lh-label);
	letter-spacing: var(--kosz-ls-wide);
	text-transform: uppercase;
}

/* ---------- siatka dwukolumnowa ----------

   Kolumny 825 i 490 z przerwą 401 (825 + 401 + 490 = 1716). Przerwa idzie
   procentem, reszta jednostkami `fr` — po odjęciu przerwy `fr` dzieli resztę
   w proporcji 825 : 490, czyli przy 1440 px wychodzi 692,3 / 336,5.

   `grid-template-areas` załatwia przy okazji różnicę kolejności desktop ↔
   telefon BEZ duplikowania znacznika. W DOM-ie idzie kolejność telefonowa
   (pozycje → karta → płatności), bo to poprawna kolejność czytania i tabulacji
   na małym ekranie; na desktopie obszary same przenoszą płatności pod pozycje. */

.baba-kosz__grid {
	display: grid;
	grid-template-columns: minmax(0, 825fr) minmax(0, 490fr);
	grid-template-areas:
		"pozycje karta"
		"platnosci karta";
	column-gap: 23.368%;                 /* 401 / 1716 */
	align-items: start;
	margin-top: calc(56px * var(--kosz-s));   /* 524 − 468 */
}

.baba-kosz__items    { grid-area: pozycje; }
.baba-kosz__payments { grid-area: platnosci; }
.baba-kosz__summary  { grid-area: karta; }

/* ---------- pozycja ---------- */

.baba-kosz__item {
	display: grid;
	/* Miniatura ma z makiety 338 px, ale NIE MOŻE być stała: kolumny siatki są
	   procentowe, a między 768 a 1440 px nie ma żadnego progu. Przy 1024 px
	   kolumna tytułu kurczyła się do 85 px, a przy 768 px do zera — tytuł
	   wylewał się wtedy 154 px na kolumnę ceny i nachodził na nią.

	   `calc(100% - 240px)` rezerwuje resztę wiersza: ~87 px ceny, ~37 px przerw
	   i ~116 px na tytuł. Przy 1440 px wychodzi 452 px, czyli więcej niż 338
	   z makiety — `min()` bierze wtedy wartość projektową i widok zostaje 1:1. */
	/* Kolumna tytułu ma DOLNĄ granicę, a trzecia jest `minmax(0, auto)`.
	   Przy `minmax(0, 1fr)` to tytuł oddawał całą różnicę: dwuczłonowa cena
	   zestawu („447,00 zł 299,00 zł”) żądała 171 px i przy oknie ~978 px na
	   nazwę zostawało 32 px — łamała się po jednej literze. Teraz to cena
	   ustępuje i `flex-wrap` niżej przenosi przekreśloną kwotę do drugiego
	   wiersza. 150 px to próg, poniżej którego nazwa produktu i tak przestaje
	   być czytelna. */
	grid-template-columns: min(calc(338px * var(--kosz-s)), calc(100% - 240px)) minmax(calc(150px * var(--kosz-s)), 1fr) minmax(0, auto);
	column-gap: calc(22px * var(--kosz-s));   /* 462 − 440 */
	align-items: start;
	padding-bottom: calc(31.7px * var(--kosz-s));  /* 743,9 − 712,2 */
	border-bottom: 1px solid var(--kosz-rule);
	margin-bottom: calc(34.1px * var(--kosz-s));   /* 778 − 743,9 */
}

/* Składnik zestawu. Klasę wnosi filtr `woocommerce_cart_item_class` wtyczki
   zestawów, nie my.

   Samo wcięcie nie wystarczyło: składnik miał ten sam stopień tytułu co zestaw
   i własną pełną cenę, więc koszyk na 299 zł czytał się jak koszyk na 746 zł.
   Dlatego poza wcięciem: kreska łącząca, mniejsza miniatura i tytuł, a zamiast
   ceny „w zestawie” (patrz `Baba_Kosz_Pozycja::ceny()`). */

.baba-kosz__item.asnp-wepb-cart-bundle-item {
	position: relative;
	padding-left: calc(64px * var(--kosz-s));
	/* Składniki trzymają się zestawu: bez odstępu i bez kreski między sobą. */
	margin-bottom: calc(18px * var(--kosz-s));
	padding-bottom: 0;
	border-bottom: none;
	/* Miniatura o połowę mniejsza — inaczej wcięcie ginie przy dużym obrazku. */
	grid-template-columns: min(calc(169px * var(--kosz-s)), calc(50% - 120px)) minmax(0, 1fr) auto;
}

/* Kreska łącząca składniki z zestawem.

   Pion sięga od dolnej krawędzi poprzedniego wiersza (stąd ujemne −18, tyle ma
   odstęp między wierszami grupy) do połowy wysokości miniatury składnika.
   Miniatura ma 169 px szerokości i proporcje 390,22 / 217,26, czyli 94 px
   wysokości — połowa to 47. */
.baba-kosz__item.asnp-wepb-cart-bundle-item::before {
	content: "";
	position: absolute;
	left: calc(28px * var(--kosz-s));
	top: calc(-18px * var(--kosz-s));
	height: calc(65px * var(--kosz-s));   /* 18 + 47 */
	border-left: 1px solid var(--kosz-rule);
}

/* Poprzeczka do miniatury — razem z pionem daje znak „└”. */
.baba-kosz__item.asnp-wepb-cart-bundle-item::after {
	content: "";
	position: absolute;
	left: calc(28px * var(--kosz-s));
	top: calc(47px * var(--kosz-s));
	width: calc(30px * var(--kosz-s));    /* do krawędzi miniatury na 64 */
	border-top: 1px solid var(--kosz-rule);
}

/* Wtyczka zestawów zmniejsza miniaturę składnika przez
   `transform: scale(0.6)` z punktem zaczepienia w prawym górnym rogu
   (`easy-product-bundles-for-woocommerce/…/style.css`). Przy naszej, i tak już
   o połowę węższej kolumnie robił się z tego znaczek wiszący w rogu pustego
   pudełka. Rozmiar ustawiamy siatką, nie skalowaniem. */
.baba-kosz__item.asnp-wepb-cart-bundle-item .product-thumbnail img {
	transform: none;
}

/* Ostatni składnik domyka grupę kreską i odstępem zwykłej pozycji. */
.baba-kosz__item.asnp-wepb-cart-bundle-item:not(:has(+ .asnp-wepb-cart-bundle-item)) {
	padding-bottom: calc(31.7px * var(--kosz-s));
	border-bottom: 1px solid var(--kosz-rule);
	margin-bottom: calc(34.1px * var(--kosz-s));
}

/* Sam zestaw nie odcina się od swoich składników. */
.baba-kosz__item.asnp-wepb-cart-bundle {
	padding-bottom: calc(18px * var(--kosz-s));
	border-bottom: none;
	margin-bottom: calc(18px * var(--kosz-s));
}

.baba-kosz__item.asnp-wepb-cart-bundle-item .baba-kosz__title {
	margin-top: calc(10px * var(--kosz-s));
	font-size: calc(18px * var(--kosz-s));
	line-height: calc(24px * var(--kosz-s));
	font-weight: 500;
}

.baba-kosz__price-w-zestawie {
	font-size: var(--kosz-fs-mini);
	line-height: var(--kosz-lh-mini);
	letter-spacing: var(--kosz-ls-wide);
	text-transform: uppercase;
	color: var(--kat-muted, #545e69);
	white-space: nowrap;
}

.baba-kosz__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--kat-media-ratio, 390.22 / 217.26);
	object-fit: cover;
	/* Okładki w tym sklepie są pionowe (768 × 1086), więc kadr od góry ucina
	   tytuł, a wyśrodkowany — autora. Ten sam kompromis co w katalogu. */
	object-position: 50% 25%;
	border-radius: var(--kat-radius, 10.835px);
}

.baba-kosz__body {
	padding-top: calc(19.2px * var(--kosz-s));   /* 543,2 − 524 */
}

.baba-kosz__cat {
	margin: 0;
	font-size: var(--kosz-fs-mini);
	line-height: var(--kosz-lh-mini);
	letter-spacing: var(--kosz-ls-wide);
	text-transform: uppercase;
	color: var(--kat-ink, #1e1e1e);
}

/* Tytuły produktów w tym sklepie bywają na sto kilkanaście znaków i mają
   w środku słowa dłuższe niż zwężona kolumna („wypracowanie”, „rozszerzona”).
   Bez łamania wyrazów wychodziły o kilkadziesiąt pikseli poza swoją kolumnę,
   na kolumnę ceny. To samo zabezpieczenie ma już panel mini-koszyka. */
.baba-kosz__title,
.baba-zam .baba-zam__pozycja-tytul {
	overflow-wrap: anywhere;
}

.baba-kosz__title {
	margin: calc(17px * var(--kosz-s)) 0 0;      /* 578,2 − 543,2 − wysokość liter */
	font-size: var(--kosz-fs-title);
	line-height: var(--kosz-lh-title);
	/* Makieta daje 700. Redakcja poprosiła o lżejszą nazwę, żeby odzyskać
	   miejsce w wąskiej kolumnie tekstu — 600 to ta sama waga, którą ma już
	   tytuł kafelka w katalogu, więc nie wprowadzamy trzeciej wartości. */
	font-weight: 600;
	color: var(--kat-title, #1a1a1a);
}

/* Kit Elementora celuje w `.elementor-kit-NNNNN a` wersalikami i własnym
   stopniem — remis specyficzności rozstrzygamy dokładając własną klasę.
   Stan `:hover` osobno, bo kit pogrubia i podkreśla. */
.baba-kosz .baba-kosz__title a,
.baba-kosz .baba-kosz__title a:hover {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	text-transform: none;
	text-decoration: none;
}

.baba-kosz__meta {
	list-style: none;
	margin: calc(24px * var(--kosz-s)) 0 0;
	padding: 0;
}

.baba-kosz__meta li {
	margin: 0;
	font-size: var(--kosz-fs-mini);
	line-height: var(--kosz-lh-mini);
	letter-spacing: var(--kosz-ls-wide);
	text-transform: uppercase;
	color: var(--kat-ink, #1e1e1e);
}

.baba-kosz__meta-key::after {
	content: ":";
}

.baba-kosz__wariant {
	margin-top: calc(10px * var(--kosz-s));
	font-size: var(--kosz-fs-mini);
	line-height: var(--kosz-lh-mini);
	color: var(--kat-muted, #545e69);
}

.baba-kosz__wariant p {
	margin: 0;
}

/* ---------- ceny i „usuń pozycję” ---------- */

.baba-kosz__side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	padding-top: calc(11.1px * var(--kosz-s));   /* 535,1 − 524 */
	text-align: right;
}

.baba-kosz__price {
	margin: 0;
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	/* Dwuczłonowa cena (przekreślona + aktualna) łamie się na dwa wiersze, kiedy
	   zabraknie miejsca. Same kwoty dalej są nierozdzielne. */
	flex-wrap: wrap;
	gap: calc(15px * var(--kosz-s));
	white-space: nowrap;
}

.baba-kosz__price-was {
	font-size: var(--kosz-fs-mini);
	line-height: var(--kosz-lh-mini);
	color: var(--kat-ink, #1e1e1e);
	text-decoration: line-through;
}

.baba-kosz__price-now {
	font-size: var(--kosz-fs-price);
	line-height: 1;
	font-weight: 700;
	color: var(--kat-accent, #995bb3);
	text-decoration: none;
	background: none;
}

.baba-kosz__qty {
	font-size: var(--kosz-fs-mini);
	color: var(--kat-muted, #545e69);
}

.baba-kosz .baba-kosz__remove,
.baba-kosz .baba-kosz__remove:hover {
	display: inline-flex;
	align-items: center;
	gap: calc(4.1px * var(--kosz-s));    /* 838 − 833,9 — odstęp, nie skok */
	margin-top: calc(30.5px * var(--kosz-s));   /* 586,7 − 556,2 */
	font-size: var(--kosz-fs-usun);
	line-height: var(--kosz-lh-label);
	letter-spacing: var(--kosz-ls-wide);
	text-transform: uppercase;
	color: var(--kat-ink, #1e1e1e);
	text-decoration: none;
	font-weight: 400;
}

/* Woo rysuje `a.remove` jako czerwone kółko z krzyżykiem — zdejmujemy to
   w całości, bo nasz odnośnik jest ikoną z napisem. */
.baba-kosz .baba-kosz__remove.remove {
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	line-height: inherit;
	font-weight: 400;
}

.baba-kosz__remove .baba-kosz__icon svg {
	display: block;
	width: calc(10.836px * var(--kosz-s));
	height: calc(11.914px * var(--kosz-s));
}

/* ---------- akceptowalne płatności ---------- */

.baba-kosz__payments {
	margin-top: calc(36.2px * var(--kosz-s));    /* 1288,1 − 1251,9 */
}

.baba-kosz__payments-title {
	margin: 0 0 calc(24px * var(--kosz-s));
	font-size: var(--kosz-fs-label);
	line-height: var(--kosz-lh-label);
	letter-spacing: var(--kosz-ls-wide);
	text-transform: uppercase;
	font-weight: 400;
	color: var(--kosz-ink);
}

.baba-kosz__marki {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: calc(12px * var(--kosz-s));
	align-items: center;
}

.baba-kosz__marka img {
	display: block;
	height: calc(28px * var(--kosz-s));
	width: auto;
}

/* ---------- karta podsumowania ----------

   Wcięcia są w makiecie asymetryczne: linie rozdzielające biegną 1356 → 1772
   wewnątrz karty 1328 → 1818, czyli 28 z lewej i 46 z prawej. Sprawdzone
   dwukrotnie — wektorem i próbkowaniem pikseli — więc przepisujemy je tak,
   jak są, zamiast „poprawiać” na symetryczne. */

.baba-kosz__summary {
	box-sizing: border-box;
	margin-top: calc(14px * var(--kosz-s));      /* 538 − 524 */
	/* Dół: ostatnia zaleta kończy się na 1185, karta na 1241. */
	padding: calc(56.2px * var(--kosz-s)) calc(46px * var(--kosz-s)) calc(49.7px * var(--kosz-s)) calc(28px * var(--kosz-s));
	border-radius: calc(20px * var(--kosz-s));
	background: var(--kosz-bg);
	color: var(--kosz-ink);
}

.baba-kosz__rows {
	margin: 0;
}

.baba-kosz__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	/* Etykieta bywa jednym słowem („DOSTAWA”), a wartość ma `nowrap`, żeby nie
	   łamać kwoty. Przy zwężonej karcie żadne z nich nie miało jak ustąpić —
	   wiersz „DOSTAWA / DOSTĘP ONLINE” potrzebował 191 px w karcie o 157 px
	   i wychodził poza stronę. Wtedy wartość schodzi do własnej linii. */
	flex-wrap: wrap;
	gap: calc(16px * var(--kosz-s));
	margin: 0 0 calc(18.7px * var(--kosz-s));    /* skok 39,5 minus interlinia 20,8 */
}

.baba-kosz__row dt,
.baba-kosz__row dd {
	margin: 0;
	font-size: var(--kosz-fs-label);
	line-height: var(--kosz-lh-label);
	letter-spacing: var(--kosz-ls-wide);
	text-transform: uppercase;
}

.baba-kosz__row dd {
	/* `margin-left: auto` trzyma wartość przy prawej krawędzi także wtedy, gdy
	   zjedzie do własnej linii — `justify-content` sam by jej tam nie dosunął. */
	margin-left: auto;
	text-align: right;
	white-space: nowrap;
}

/* Wiersz rabatu — makieta go nie pokrywa, rysujemy przez analogię do
   „Cena produktów”. Bez niego kwota „Łącznie” spadałaby bez wyjaśnienia. */
.baba-kosz .baba-kosz__row.cart-discount a {
	color: var(--kat-accent, #995bb3);
	font-size: inherit;
	text-transform: none;
}

/* Odstęp przed linią „Łącznie” to 16,5 px (dolna krawędź pudełka wiersza
   „dostawa” na 116,5 od góry karty, linia na 133). Jest MNIEJSZY niż odstęp
   między wierszami, a przy zlewaniu się marginesów wygrywa większy — dlatego
   skracamy margines poprzednika zamiast dodawać własny. */
.baba-kosz__row:has(+ .baba-kosz__row--total) {
	margin-bottom: calc(16.5px * var(--kosz-s));
}

/* Linia nad kwotą „Łącznie”. */
.baba-kosz__row--total {
	position: relative;
	align-items: flex-start;
	/* Bez `margin-top`. Marginesy sąsiadów w pionie ZLEWAJĄ SIĘ do większego,
	   więc dopóki wiersz wyżej ma 18,7 px, wszystko mniejsze nie robi tutaj nic
	   — linia stała 2,2 px za nisko mimo zmieniania tej wartości. Odstęp
	   ustawia więc reguła z `:has()` niżej, zmniejszając margines POPRZEDNIKA. */
	margin-top: 0;
	padding-top: calc(24.2px * var(--kosz-s));   /* 695,2 − 671 */
	border-top: 1px solid var(--kosz-rule);
	margin-bottom: 0;
}

.baba-kosz__row--total dt {
	font-size: var(--kosz-fs-total);
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.baba-kosz__row--total dd {
	font-size: var(--kosz-fs-total);
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.baba-kosz__vat {
	display: block;
	margin-top: calc(7.9px * var(--kosz-s));     /* linia pisma „z VAT” na 744 */
	font-size: var(--kosz-fs-label);
	line-height: var(--kosz-lh-label);
	font-weight: 400;
	letter-spacing: var(--kosz-ls-wide);
	text-transform: uppercase;
}

/* ---------- przycisk płatności ---------- */

.baba-kosz__checkout {
	/* Rozciągamy na całą szerokość karty i środkujemy — w makiecie przycisk
	   stoi na 1412..1730, czyli względem KARTY (środek 1573), a nie względem
	   jej wcięć (środek 1564,5). Bez tego wychodził o 56 px za bardzo w lewo. */
	margin: calc(38px * var(--kosz-s)) calc(-46px * var(--kosz-s)) 0 calc(-28px * var(--kosz-s));
	/* Flex, nie `text-align: center`. Przycisk jest elementem LINIOWYM, więc
	   przy środkowaniu tekstem opakowanie dostaje wiodące odstępy wiersza
	   i rośnie z 46 do 90 px — czyli przycisk jedzie 30 px w dół, a wartość
	   marginesu przestaje cokolwiek znaczyć. */
	display: flex;
	justify-content: center;
}

/* Wersaliki z `!important`, bo `baba-strona/assets/css/baba-tresc.css:48`
   gasi je na WSZYSTKICH odnośnikach w treści:
   `:is(.page-content, .baba-prod__text, .entry-content) a { text-transform: none !important }`.
   Komentarz przy tamtej regule mówi, że w przyciskach wersaliki są elementem
   projektu — selektor po prostu nie robi dla nich wyjątku, a strona koszyka
   siedzi w `.entry-content`. Przez to „Przejdź do płatności” szło minuskułą
   wbrew makiecie. */
.baba-kosz .baba-kosz__btn,
.baba-kosz .baba-kosz__btn:hover {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: calc(318px * var(--kosz-s));
	min-height: calc(51px * var(--kosz-s));
	padding: 0 calc(20px * var(--kosz-s));
	border-radius: calc(25.5px * var(--kosz-s));
	font-size: var(--kosz-fs-label);
	line-height: var(--kosz-lh-label);
	letter-spacing: var(--kosz-ls-wide);
	text-transform: uppercase !important;
	text-decoration: none;
	font-weight: 500;
}

.baba-kosz .baba-kosz__btn--pelny,
.baba-kosz .baba-kosz__btn--pelny:hover {
	background: var(--kat-accent, #995bb3);
	border: none;
	color: #fff;
}

.baba-kosz .baba-kosz__btn--obrys,
.baba-kosz .baba-kosz__btn--obrys:hover {
	background: none;
	border: 1px solid var(--kat-ink, #1e1e1e);
	color: var(--kat-ink, #1e1e1e);
}

/* ---------- kod rabatowy ----------

   W makiecie pole ma 421,6 px i wystaje ~4 px poza linie rozdzielające
   (417 px). Wyrównujemy je do linii — różnica jest w tabeli odchyleń jako
   świadoma poprawka, bo niewyrównanie do sąsiednich linii czyta się jak błąd. */

.baba-kosz__coupon {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	/* Odstęp od przycisku. Linię rysuje `::before` z przesunięciem −39,2 px,
	   czyli dokładnie tam, gdzie jest w makiecie (873) — margines odpowiada
	   tylko za to, jak nisko siedzi całe pole. */
	margin-top: calc(74.2px * var(--kosz-s));
}

/* Sama pigułka. Obrys siedzi tutaj, a nie na `.coupon`, bo `cart.js` dokleja
   komunikat błędu na końcu `.coupon` i wpadałby do środka obrysu. */
.baba-kosz__coupon-pole {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	min-height: calc(56.6px * var(--kosz-s));
	padding: calc(4px * var(--kosz-s)) calc(14px * var(--kosz-s)) calc(4px * var(--kosz-s)) calc(25px * var(--kosz-s));
	border: 1px solid var(--kat-line, #cfcfcf);
	border-radius: calc(28.3px * var(--kosz-s));
}

/* Linia nad kuponem. Jest osobnym elementem, bo w makiecie kończy się na
   1772 — czyli równo z liniami wyżej, a nie z krawędzią pola. */
.baba-kosz__coupon::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(-39.2px * var(--kosz-s));
	border-top: 1px solid var(--kosz-rule);
}

.baba-kosz .baba-kosz__coupon-input {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	box-shadow: none;
	font-family: inherit;
	font-size: var(--kosz-fs-label);
	line-height: var(--kosz-lh-label);
	letter-spacing: var(--kosz-ls-wide);
	text-transform: uppercase;
	color: var(--kosz-ink);
}

.baba-kosz .baba-kosz__coupon-input::placeholder {
	color: var(--kosz-ink);
	opacity: 1;
}

/* Obrys fokusu siedzi na PIGUŁCE, nie na samym polu.

   Na polu — prostokącie bez zaokrąglenia — obrys z odsunięciem rysował narożniki
   wystające poza pigułkę; to te „elementy w rogach pola" ze zgłoszenia. Na
   pigułce podąża za jej `border-radius`. Fokusu nie gasimy bez zamiennika:
   bez niego pole znika dla klawiatury. */
.baba-kosz .baba-kosz__coupon-input:focus,
.baba-kosz .baba-kosz__coupon-input:focus-visible {
	outline: none;
}

.baba-kosz .baba-kosz__coupon-pole:focus-within {
	border-color: var(--kat-accent, #995bb3);
	box-shadow: 0 0 0 2px var(--kat-accent, #995bb3);
}

.baba-kosz .baba-kosz__coupon-btn,
.baba-kosz .baba-kosz__coupon-btn:hover {
	flex: 0 0 auto;
	box-sizing: border-box;
	width: calc(89px * var(--kosz-s));
	min-height: calc(28px * var(--kosz-s));
	padding: 0;
	border: none;
	border-radius: calc(14px * var(--kosz-s));
	background: var(--kat-accent, #995bb3);
	color: #fff;
	font-family: inherit;
	font-size: var(--kosz-fs-coupon-btn);
	line-height: 1;
	letter-spacing: var(--kosz-ls-wide);
	text-transform: uppercase;
	font-weight: 500;
}

/* ---------- zapewnienia ---------- */

.baba-kosz__perks {
	list-style: none;
	margin: calc(39.2px * var(--kosz-s)) 0 0;
	padding: calc(35.5px * var(--kosz-s)) 0 0;   /* ikona zalety na 506,7 od góry karty */
	border-top: 1px solid var(--kosz-rule);
}

.baba-kosz__perk {
	display: flex;
	/* Wyśrodkowana, nie przy pierwszej linii: przy zaletach łamiących się na
	   dwa wiersze makieta stawia ikonę na środku akapitu (koszyk 994..1010
	   przy tekście 992..1011). Przy jednym wierszu różnicy nie widać. */
	align-items: center;
	gap: calc(16.5px * var(--kosz-s));   /* 1391,3 − 1374,8 */
	/* Obrys ikony wystaje 2,1 px w lewo poza wcięcie karty — tak jest
	   w makiecie (1353,8 przy wcięciu 1356) i tak zostaje. */
	margin-bottom: calc(31.5px * var(--kosz-s));  /* linie pisma zalet: 1061, 1114, 1164 */
	font-size: var(--kosz-fs-label);
	line-height: var(--kosz-lh-label);
	letter-spacing: var(--kosz-ls-wide);
	text-transform: uppercase;
	color: var(--kat-muted, #545e69);
}

.baba-kosz__perk:last-child {
	margin-bottom: 0;
}

.baba-kosz__perk-icon svg {
	display: block;
	margin-left: calc(-2.1px * var(--kosz-s));
	width: calc(20.957px * var(--kosz-s));
	height: calc(21.539px * var(--kosz-s));
}

/* ---------- pusty koszyk ---------- */

.baba-kosz__empty .wc-empty-cart-message {
	font-size: var(--kosz-fs-label);
	line-height: var(--kosz-lh-label);
	margin: calc(40px * var(--kosz-s)) 0;
}

/* ---------- komunikaty Woo ----------

   Makieta notek nie zawiera, więc ubieramy je w jej język: tło i zaokrąglenie
   karty podsumowania zamiast fabrycznego szarego paska z kolorową kreską.
   Szablonów `notices/*` dalej nie forkujemy. */

/* Na stronie produktu `.woocommerce-notices-wrapper` jest BEZPOŚREDNIM dzieckiem
   `<body>` — poza `.baba-kosz` i `.baba-zam`. Stąd fabryczny czerwony pasek przy
   próbie dodania tego samego produktu drugi raz. Tokeny `--kosz-*` siedzą na
   `.baba-kosz`, więc na poziomie `body` trzeba je podać osobno. */
body > .woocommerce-notices-wrapper {
	--kosz-s: 0.8392;
	--kosz-bg: #f8f1f1;
	--kosz-ink: #202020;
	--kosz-fs-label: 16px;
	--kosz-lh-label: 22px;
	--kosz-ls-wide: 1.5px;

	box-sizing: border-box;
	padding-inline: 20px;
	/* Krój też trzeba podać wprost: wewnątrz `.baba-kosz` notka dziedziczyła
	   Poppinsa z korzenia widoku, a na `body` dziedziczy systemowy stos motywu.
	   To o ten szczegół chodziło w zgłoszeniu „inny font niż reszta strony”. */
	font-family: "Poppins", -apple-system, "Segoe UI", sans-serif;

	/* Własne białe tło, i to na PEŁNĄ szerokość.

	   Domyślny zestaw Elementora (post 10531) maluje `body` gradientem
	   `#07382D` — na stronach nie widać go, bo kontenery mają własne tła, ale
	   ten pasek jest bezpośrednim dzieckiem `body` i tła nie miał, więc zieleń
	   przez niego prześwitywała. To jest „tło ze starego sklepu” ze zgłoszenia.

	   Ograniczenie szerokości schodzi z paska na jego zawartość: gdyby `max-width`
	   został tutaj, przy oknie szerszym niż 1440 px zieleń zostałaby po bokach. */
	background: #fff;
}

body > .woocommerce-notices-wrapper > * {
	max-width: 1400px;
	margin-inline: auto;
}

/* Pusta notka to śmieć, nie informacja — Woo potrafi wypisać sam pasek. */
body > .woocommerce-notices-wrapper:empty {
	display: none;
}

.baba-kosz .woocommerce-message,
.baba-kosz .woocommerce-error,
.baba-kosz .woocommerce-info,
.baba-zam .woocommerce-message,
.baba-zam .woocommerce-error,
.baba-zam .woocommerce-info,
body > .woocommerce-notices-wrapper .woocommerce-message,
body > .woocommerce-notices-wrapper .woocommerce-error,
body > .woocommerce-notices-wrapper .woocommerce-info {
	/* WooCommerce renderuje notki w DWÓCH różnych kształtach
	   (`plugins/woocommerce/templates/notices/`):

	     .woocommerce-message  → `success.php` → <div>, tekst i przycisk
	                             jako BEZPOŚREDNIE dzieci
	     .woocommerce-info     → `notice.php`  → <div>, tak samo
	                             (u nas bywa też <p> — patrz `cart-empty.php`)
	     .woocommerce-error    → `error.php`   → <ul><li>, przycisk WEWNĄTRZ <li>

	   Tu jest część wspólna — wygląd. Układ różni się między kształtami i stoi
	   w dwóch regułach niżej. Wcześniej cały układ wisiał na `> li`, którego
	   w notce „dodano do koszyka” po prostu nie ma: przycisk wypadał wtedy do
	   drugiego wiersza siatki, pod ikonę, a tekst dostawał wcięcie szerokości
	   tego przycisku. */
	display: flex;
	align-items: center;
	/* `nowrap` na desktopie: przy zawijaniu przeglądarka najpierw łamie wiersz,
	   a dopiero potem ściska elementy — długi komunikat spychał przycisk pod
	   spód nawet przy szerokim oknie. */
	flex-wrap: nowrap;
	gap: calc(16px * var(--kosz-s));
	box-sizing: border-box;
	/* Górny margines jest po stronie NOTKI, nie plakietki. Plakietka ma
	   `margin-bottom: 0`, więc notka pod nią stykała się z nią krawędzią
	   (zmierzone: 0 px). Gdyby odstęp dołożyć plakietce, urósłby też ten do listy
	   pozycji — a on jest z makiety i jest poprawny. */
	/* Poziome `auto`, a nie `0`: pasek notek ogranicza szerokość zawartości do
	   1400 px i centruje ją, a `0` z tej reguły (0,3,0) wygrywało z tamtą
	   i notka siadała przy lewej krawędzi. Bez `max-width` `auto` zachowuje się
	   jak `0`, więc w koszyku i zamówieniu nic się nie zmienia. */
	margin: calc(24px * var(--kosz-s)) auto calc(24px * var(--kosz-s));
	padding: calc(20px * var(--kosz-s)) calc(28px * var(--kosz-s));
	border: none;
	border-radius: calc(20px * var(--kosz-s));
	background: var(--kosz-bg);
	color: var(--kosz-ink);
	font-size: var(--kosz-fs-label);
	line-height: var(--kosz-lh-label);
	letter-spacing: var(--kosz-ls-wide);
	text-transform: uppercase;
}

/* Notka BŁĘDU jest listą i bywa WIELOPOZYCYJNA — walidacja zamówienia wypisuje
   kilka `<li>`. Przy flexie stanęłyby obok siebie, gdyby się zmieściły; w drugiej
   kolumnie siatki układają się jedna pod drugą, a ikona zostaje przy pierwszym
   wierszu. Tylko dla niej, bo tylko ona ma `<li>`. */
.baba-kosz .woocommerce-error,
.baba-zam .woocommerce-error,
body > .woocommerce-notices-wrapper .woocommerce-error {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
}

/* Fabryczna ikona Woo siedzi w `::before` z pozycjonowaniem absolutnym pod
   `padding-left: 3.5em`, którego już nie ma — wracamy z nią do wiersza. */
.baba-kosz .woocommerce-message::before,
.baba-kosz .woocommerce-error::before,
.baba-kosz .woocommerce-info::before,
.baba-zam .woocommerce-message::before,
.baba-zam .woocommerce-error::before,
.baba-zam .woocommerce-info::before,
body > .woocommerce-notices-wrapper .woocommerce-message::before,
body > .woocommerce-notices-wrapper .woocommerce-error::before,
body > .woocommerce-notices-wrapper .woocommerce-info::before {
	position: static;
	/* Odstęp niesie `gap` siatki — margines dokładałby się do niego. */
	margin-right: 0;
	grid-column: 1;
	align-self: center;
	line-height: 1;
	color: var(--kat-accent, #995bb3);
}

/* Fabryczny clearfix Woo (`::after { content:" "; display:table; clear:both }`)
   jest w siatce PEŁNOPRAWNYM elementem: robi drugi, pusty wiersz i dokłada do
   niego przerwę. Zmierzone: notka rosła o 13,4 px, a treść siadała 6,7 px nad
   swoim środkiem. Pływających elementów i tak już nie ma, więc clearfix nie ma
   czego czyścić. */
.baba-kosz .woocommerce-message::after,
.baba-kosz .woocommerce-error::after,
.baba-kosz .woocommerce-info::after,
.baba-zam .woocommerce-message::after,
.baba-zam .woocommerce-error::after,
.baba-zam .woocommerce-info::after,
body > .woocommerce-notices-wrapper .woocommerce-message::after,
body > .woocommerce-notices-wrapper .woocommerce-error::after,
body > .woocommerce-notices-wrapper .woocommerce-info::after {
	display: none;
}

/* Treść notki w drugiej kolumnie, a w niej własny wiersz: tekst po lewej,
   przycisk po prawej. Bez tego przycisk zostawał pływający (patrz niżej)
   i uciekał do prawego górnego rogu, a tekst go oblewał. */
.baba-kosz .woocommerce-message > li,
.baba-kosz .woocommerce-error > li,
.baba-kosz .woocommerce-info > li,
.baba-zam .woocommerce-message > li,
.baba-zam .woocommerce-error > li,
.baba-zam .woocommerce-info > li,
body > .woocommerce-notices-wrapper .woocommerce-message > li,
body > .woocommerce-notices-wrapper .woocommerce-error > li,
body > .woocommerce-notices-wrapper .woocommerce-info > li {
	grid-column: 2;
	display: flex;
	align-items: center;
	/* `nowrap` z rozmysłu. Przy zawijaniu przeglądarka najpierw łamie wiersz,
	   a dopiero potem ściska elementy — więc długi komunikat spychał przycisk
	   pod spód nawet przy szerokim oknie. Bez zawijania tekst ściska się sam
	   i łamie wewnątrz, a przycisk zostaje w tym samym wierszu. */
	flex-wrap: nowrap;
	justify-content: space-between;
	gap: calc(12px * var(--kosz-s));
	margin: 0;
	list-style: none;
}

/* Na telefonie odwrotnie: 200-pikselowy przycisk obok tekstu nie ma czego
   ścisnąć, więc schodzi pod spód — dalej przy prawej krawędzi. */
@media (max-width: 767px) {
	.baba-kosz .woocommerce-message > li,
	.baba-kosz .woocommerce-error > li,
	.baba-kosz .woocommerce-info > li,
	.baba-zam .woocommerce-message > li,
	.baba-zam .woocommerce-error > li,
	.baba-zam .woocommerce-info > li,
	body > .woocommerce-notices-wrapper .woocommerce-message > li,
	body > .woocommerce-notices-wrapper .woocommerce-error > li,
	body > .woocommerce-notices-wrapper .woocommerce-info > li {
		flex-wrap: wrap;
	}

	/* To samo dla notek w kształcie `<div>` — tam przycisk jest bezpośrednim
	   dzieckiem notki, a nie pozycji listy. */
	.baba-kosz .woocommerce-message,
	.baba-kosz .woocommerce-info,
	.baba-zam .woocommerce-message,
	.baba-zam .woocommerce-info,
	body > .woocommerce-notices-wrapper .woocommerce-message,
	body > .woocommerce-notices-wrapper .woocommerce-info {
		flex-wrap: wrap;
	}
}

/* Link w notce („Cofnij?") szedł malinowym #cc3366 z motywu. Ciemny fiolet
   bierzemy z palety projektu, a nie dobieramy na oko. */
.baba-kosz .woocommerce-message a,
.baba-kosz .woocommerce-error a,
.baba-kosz .woocommerce-info a,
.baba-zam .woocommerce-message a,
.baba-zam .woocommerce-error a,
.baba-zam .woocommerce-info a,
body > .woocommerce-notices-wrapper .woocommerce-message a,
body > .woocommerce-notices-wrapper .woocommerce-error a,
body > .woocommerce-notices-wrapper .woocommerce-info a {
	color: var(--kat-accent-strong, #82499b);
	text-decoration: underline;
}

.baba-kosz .woocommerce-message a:hover,
.baba-kosz .woocommerce-error a:hover,
.baba-kosz .woocommerce-info a:hover,
.baba-zam .woocommerce-message a:hover,
.baba-zam .woocommerce-error a:hover,
.baba-zam .woocommerce-info a:hover,
body > .woocommerce-notices-wrapper .woocommerce-message a:hover,
body > .woocommerce-notices-wrapper .woocommerce-error a:hover,
body > .woocommerce-notices-wrapper .woocommerce-info a:hover {
	color: var(--kat-ink, #1e1e1e);
}

/* Przycisk w notce też jest linkiem — nie może łapać podkreślenia z reguły wyżej. */
.baba-kosz .woocommerce-message a.button,
.baba-kosz .woocommerce-error a.button,
.baba-kosz .woocommerce-info a.button,
.baba-zam .woocommerce-message a.button,
.baba-zam .woocommerce-error a.button,
.baba-zam .woocommerce-info a.button,
body > .woocommerce-notices-wrapper a.button {
	text-decoration: none;
}

.baba-kosz .woocommerce-error,
.baba-zam .woocommerce-error,
body > .woocommerce-notices-wrapper .woocommerce-error {
	color: var(--wc-red, #a00);
}

.baba-kosz .woocommerce-error::before,
.baba-zam .woocommerce-error::before,
body > .woocommerce-notices-wrapper .woocommerce-error::before {
	color: var(--wc-red, #a00);
}

/* Przycisk w notce („Kontynuuj zakupy", „Zobacz koszyk") jest fabrycznym szarym
   guzikiem Woo.

   `.woocommerce-error` domknięte na koszyku i w zamówieniu — dotąd zasięg
   obejmował tylko `message` i `info`, więc przycisk w notce BŁĘDU zostawał szary.

   `float: none` jest tu konieczne. Woo ma `.woocommerce-error .button { float: right }`
   (0,2,0), a nasz `margin-left: auto` nie miał czego zrobić: przycisk siedzi
   wewnątrz `<li>`, a `<li>` nie był pojemnikiem flex. Pływający przycisk uciekał
   do prawego górnego rogu bloku (zmierzone: środek 22 px niżej niż środek notki),
   a tekst go oblewał — na telefonie wcinał się w środek zdania. */
.baba-kosz .woocommerce-message .button,
.baba-kosz .woocommerce-error .button,
.baba-kosz .woocommerce-info .button,
.baba-zam .woocommerce-message .button,
.baba-zam .woocommerce-error .button,
.baba-zam .woocommerce-info .button,
body > .woocommerce-notices-wrapper .woocommerce-message .button,
body > .woocommerce-notices-wrapper .woocommerce-error .button,
body > .woocommerce-notices-wrapper .woocommerce-info .button {
	float: none;
	flex: 0 0 auto;
	margin-left: auto;
	padding: calc(10px * var(--kosz-s)) calc(26px * var(--kosz-s));
	border: 1px solid var(--kat-ink, #1e1e1e);
	border-radius: calc(24px * var(--kosz-s));
	background: none;
	color: var(--kat-ink, #1e1e1e);
	font-family: inherit;
	font-size: var(--kosz-fs-label);
	line-height: 1;
	letter-spacing: var(--kosz-ls-wide);
	text-transform: uppercase !important;   /* patrz `baba-tresc.css:48` */
}

.baba-kosz .woocommerce-message .button:hover,
.baba-kosz .woocommerce-error .button:hover,
.baba-kosz .woocommerce-info .button:hover,
.baba-zam .woocommerce-message .button:hover,
.baba-zam .woocommerce-error .button:hover,
.baba-zam .woocommerce-info .button:hover,
body > .woocommerce-notices-wrapper .woocommerce-message .button:hover,
body > .woocommerce-notices-wrapper .woocommerce-error .button:hover,
body > .woocommerce-notices-wrapper .woocommerce-info .button:hover {
	background: var(--kat-ink, #1e1e1e);
	color: #fff;
}

/* Komunikat błędu kuponu.

   `.coupon-error-notice` wypisuje sam WooCommerce obok pola. Jego reguły celują
   w układ tabelaryczny (`table.cart td.actions .coupon`) i w `form.checkout_coupon`
   — my nie używamy żadnego, więc bez tego bloku notka dostaje 16 px pisma przy
   interlinii 15 px (wiersze wchodzą na siebie) i jako element flexa ściska pole
   kuponu do 77 px. */

.baba-kosz .baba-kosz__coupon .coupon-error-notice {
	margin: calc(10px * var(--kosz-s)) 0 0;
	padding: 0 0 0 calc(25px * var(--kosz-s));   /* pod tekstem pola, nie pod obrysem */
	font-size: var(--kosz-fs-mini);
	line-height: var(--kosz-lh-label);
	letter-spacing: var(--kosz-ls-wide);
	text-transform: uppercase;
	color: var(--wc-red, #a00);
}

/* Pole z błędem — bez tego nic nie wskazuje, którego pola dotyczy komunikat. */
.baba-kosz .baba-kosz__coupon-input.has-error {
	color: var(--wc-red, #a00);
}

/* ==========================================================================
   Progi. Kolejność bloków jest kontraktem — przy równej specyficzności wygrywa
   ten niżej w pliku.
   ========================================================================== */

@media (max-width: 1200px) {
	.baba-kosz__badge {
		width: 100%;
	}
}

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

   Na ≤767 px skala przestaje obowiązywać. Ramka makiety ma 360 px, czyli
   praktycznie tyle, ile realny telefon, więc miary idą 1:1. Stopnie pisma mają
   podłogę 12 px: makieta schodzi przy kategorii do ~8 px, co jest poniżej
   granicy czytelności, a konwencja projektu trzyma tekst podstawowy na 15 px.
   Różnica jest świadoma i wpisana do tabeli odchyleń. */

@media (max-width: 767px) {
	.baba-kosz {
		--kosz-s: 1;
		padding-inline: var(--kosz-pad);

		/* Stopnie przeliczone z makiety telefonu tą samą kalibracją co desktop
		   (stosunek szerokości tuszu do wersji desktopowej o znanym stopniu):
		     „Koszyk”            70,3 / 126,5 × 36 = 20,0
		     tytuł pozycji       74,8 / 149,6 × 24 = 12,0
		     „cena produktów”    92,8 / 166,1 × 16 =  8,9
		     kategoria           41,1 /  65,1 × 14 =  8,8
		     „usuń pozycję”      73,8 /  88,1 × 10 =  8,4

		   Makieta schodzi więc przy etykietach do ~8,8 px, a przy „usuń pozycję”
		   do 8,4. To jest poniżej granicy czytelności i poniżej konwencji
		   projektu, która trzyma tekst podstawowy telefonu na 15 px. Zgodnie
		   z ustaleniem z planu: GEOMETRIA zostaje 1:1 z ramki 360 px, a stopnie
		   dostają podłogę 12 px. Tytuły i kwoty idą na 16, żeby nie zrównały się
		   z etykietami i nie zniknęła hierarchia. Różnica jest świadoma i stoi
		   w tabeli odchyleń. */
		--kosz-fs-h1: 20px;
		--kosz-lh-h1: 26px;
		--kosz-fs-title: 16px;
		--kosz-lh-title: 20px;
		--kosz-fs-label: 12px;
		--kosz-lh-label: 16px;
		--kosz-fs-mini: 12px;
		--kosz-lh-mini: 16px;
		--kosz-fs-usun: 12px;
		--kosz-fs-price: 16px;
		--kosz-fs-total: 16px;
		--kosz-fs-coupon-btn: 12px;           /* makieta 11 — próg czytelności */
		--kosz-ls-wide: 1px;
	}

	/*
	 * Wcięcie wpisane wprost, a NIE przez `var(--kosz-pad)`.
	 *
	 * `--kosz-pad` to token na `.baba-kosz`, a nagłówek strony leży POZA tym
	 * korzeniem — treść koszyka doklejamy filtrem `the_content`, więc `.page-header`
	 * jest jego rodzeństwem, nie dzieckiem. Nieznana zmienna unieważnia całą
	 * deklarację („invalid at computed-value time"), więc padding cicho wychodził
	 * zero i napis „Koszyk" stał na samej krawędzi ekranu. Nic tego nie zgłaszało.
	 */
	body.woocommerce-cart .page-header,
	body.woocommerce-checkout .page-header {
		padding-inline: 18px;
	}

	/*
	 * Sekcja „Zobacz także" nie ma w arkuszach ANI JEDNEJ własnej reguły —
	 * ani tu, ani w katalogu. Na desktopie prześwit nad nią bierze się
	 * z marginesów motywu, ale na telefonie wychodziło zero i karuzela
	 * zaczynała się dokładnie tam, gdzie kończył się koszyk.
	 */
	.baba-kosz__polecane {
		margin-top: 43px;                  /* makieta: logotypy 1173, „Zobacz także" 1216 */
	}

	body.woocommerce-cart .page-header .entry-title,
	body.woocommerce-checkout .page-header .entry-title {
		font-size: 20px;
		line-height: 26px;
	}

	.baba-kosz__badge {
		width: 100%;
		min-height: 67px;
		margin-top: 20px;
		padding: 13.25px 32.1px;               /* tekst 50,1..307,7 w plakietce 18..342 */
		border-radius: 21px;                    /* makieta telefonu: 21 px przy 324 × 67 */
		justify-content: center;
		text-align: center;
		/* 10,5 px, nie 12 z podłogi czytelności. Przy 12 px zdanie łamie się na
		   CZTERY wiersze i plakietka rośnie do 80,5 px zamiast 67 — czyli zmienia
		   kształt, a nie tylko stopień. Zmierzone: 12 / 11,5 / 11 px dają cztery
		   wiersze, 10,5 px daje trzy i dokładnie 67 px wysokości. To jedno zdanie
		   ozdobne, nie etykieta do skanowania wzrokiem, więc wygrywa kształt. */
		font-size: 10.5px;
		line-height: 13.5px;                   /* 3 wiersze × 13,5 + 26,5 = 67 */
	}

	.baba-kosz__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"pozycje"
			"karta"
			"platnosci";
		column-gap: 0;
		margin-top: 28px;
	}

	/* Pozycja: miniatura po lewej, tekst po prawej, a „usuń pozycję” i ceny
	   w osobnym wierszu pod spodem — miniatura 120,3 × 67, kolumna tekstu
	   od x 156, czyli 17,7 px odstępu. */
	.baba-kosz__item {
		grid-template-columns: 120.3px minmax(0, 1fr);
		grid-template-areas:
			"media tresc"
			"spod  spod";
		column-gap: 17.7px;
		padding-bottom: 19.9px;                /* 373,9 − 354 */
		margin-bottom: 23.1px;                 /* 397 − 373,9 */
	}

	.baba-kosz__media  { grid-area: media; }
	.baba-kosz__body   { grid-area: tresc; padding-top: 2.4px; }
	.baba-kosz__side   { grid-area: spod; }

	.baba-kosz__title  { margin-top: 9px; }
	.baba-kosz__meta   { margin-top: 11px; }
	.baba-kosz__meta li { line-height: 14px; }

	/* Cały spód pozycji to jeden wiersz: ikona i napis z lewej, ceny z prawej. */
	.baba-kosz__side {
		flex-direction: row-reverse;
		align-items: center;
		justify-content: space-between;
		padding-top: 12px;
	}

	.baba-kosz .baba-kosz__remove {
		margin-top: 0;
	}

	.baba-kosz__price {
		gap: 12px;
	}

	/* Podsumowanie idzie na wylot, poza obie krawędzie ekranu.
	   Ujemny margines o ZNANEJ wartości, nie `vw` — `vw` liczy pasek
	   przewijania i rozjeżdża się o kilkanaście pikseli. Warunkiem jest
	   wyzerowany `padding-inline` na `.site-main`, co robimy wyżej. */
	.baba-kosz__summary {
		margin: 40px calc(-1 * var(--kosz-pad)) 0;
		padding: 17.5px var(--kosz-pad) 42px;  /* linia pisma „ceny produktów” na 674 */
		border-radius: 0;
	}

	.baba-kosz__row {
		margin-bottom: 5px;                    /* linia pisma 674 → 695 */
	}

	/* Odstęp przed linią „Łącznie”: dolna krawędź wiersza „dostawa” na 59,4
	   od góry bloku, linia na 62,2. Ta sama pułapka ze zlewaniem marginesów
	   co na desktopie — skracamy margines poprzednika. */
	.baba-kosz__row:has(+ .baba-kosz__row--total) {
		margin-bottom: 7.5px;
	}

	.baba-kosz__row--total {
		/* Zero, tak jak na desktopie — odstęp przed linią ustawia reguła
		   z `:has()` wyżej. Zostawiona tu wartość 19,2 px wygrywała z nią
		   i spychała całą dolną część bloku o 16,4 px w dół. */
		margin-top: 0;
		padding-top: 15.5px;                   /* linia pisma „Łącznie” na 736 */
	}

	.baba-kosz__vat {
		margin-top: 4px;                       /* linia pisma „z VAT” na 755 */
	}

	/* Ujemne marginesy boczne są sztuczką desktopu (środkowanie względem karty,
	   nie względem jej wcięć). Na telefonie skala wynosi 1, więc zostawały
	   w pełnej wartości: przycisk jechał 9 px w prawo, a −46 px z prawej
	   rozpychało stronę o 28 px i dawało przewijanie w bok. */
	.baba-kosz__checkout {
		margin: 9.3px 0 0;                     /* przycisk na 124 od góry bloku */
	}

	.baba-kosz .baba-kosz__btn {
		width: 202px;
		min-height: 46px;
		border-radius: 23px;
	}

	.baba-kosz__coupon {
		width: 316.2px;
		min-height: 45.2px;
		margin: 26.4px 0 0 0.4px;              /* linię rysuje ::before na −13,2 */
		padding: 4px 17.6px 4px 19px;          /* „DODAJ” kończy się na 317 */
		border-radius: 22.6px;
	}

	.baba-kosz__coupon::before {
		left: 4.6px;                           /* 23 − 18,4 */
		right: 4.6px;
		top: -13.2px;
	}

	.baba-kosz .baba-kosz__coupon-btn {
		width: 72px;
		min-height: 27px;
		border-radius: 13.5px;
		font-size: 12px;                       /* makieta 10 — próg czytelności;
		                                          pigułka 72 × 27 zostaje z makiety */
	}

	.baba-kosz__perks {
		margin-top: 15.6px;
		padding-top: 21.9px;                   /* linia pisma pierwszej zalety na 937 */
		margin-inline: 5px;
	}

	.baba-kosz__perk {
		gap: 12.5px;                           /* 49,8 − 37,3 */
		margin-bottom: 14px;                   /* skok zalet 925 → 956 → 992 */
		line-height: 17px;
	}

	.baba-kosz__perk-icon svg {
		width: 15.7px;
		height: 16.2px;
	}

	.baba-kosz__payments {
		margin-top: 16.7px;                    /* 1070,7 − 1054 */
	}

	.baba-kosz__marka img {
		height: 20px;
	}

	/* Zestaw na telefonie zostaje JEDNYM wierszem.

	   Składniki wchodziły tu osobnymi wierszami z kreską łączącą i podpisem
	   „w zestawie" — przy 390 px robiła się z tego drabinka na pół ekranu,
	   w której zestaw ginął. Co jest w środku, dalej mówi jego własne
	   „KURSÓW / LEKCJI”, więc informacja nie znika bez śladu.

	   Tylko telefon: na desktopie składniki ZOSTAJĄ. */
	.baba-kosz .baba-kosz__item.asnp-wepb-cart-bundle-item {
		display: none;
	}
}

/* ==========================================================================
   Utwardzenie wobec WooCommerce i kitu Elementora.

   Ten blok stoi NA KOŃCU arkusza i to jest jego jedyne miejsce — przy równej
   specyficzności rozstrzyga kolejność, a te reguły mają wygrywać z cudzymi.
   Każda z nich ma wpisane, z kim przegrywała, żeby następny czytelnik nie
   musiał tego szukać w narzędziach przeglądarki.
   ========================================================================== */

/* Tło strony.

   `reset.css` motywu daje `body { background: #fff }`, ale kit Elementora
   ustawia `.elementor-kit-10531 { background-color: transparent }` — a klasa
   kitu siedzi NA `body`, więc wygrywa i strona pokazuje to, co jest pod spodem.
   Na stronach budowanych Elementorem nie widać tego, bo biel wnoszą kontenery;
   koszyk jest stroną klasyczną i takich kontenerów nie ma.

   Klasę kitu piszemy bez spacji (`body.elementor-kit-…`), bo siedzi na samym
   `body` — `body .elementor-kit-…` szukałoby jej dopiero wśród potomków. */
body.woocommerce-cart.elementor-kit-10531,
body.woocommerce-checkout.elementor-kit-10531 {
	background-color: #fff;

	/* Samo tło NIE wystarczy. Kit maluje na `body` jeszcze
	   `background-image: linear-gradient(rgb(7,56,45) 0%, rgb(7,56,45) 100%)`
	   — jednolitą ciemną zieleń udającą kolor. Obraz tła leży NAD kolorem, więc
	   biel pod spodem nic nie daje i strona zostaje ciemna. Stąd oba wiersze. */
	background-image: none;
}

/* Przycisk „Przejdź do płatności”.

   Przegrywał z `.woocommerce-cart .wc-proceed-to-checkout a.checkout-button`
   z `woocommerce.css` (trzy klasy i element = 0,3,1) — stąd 20 px zamiast
   13,4 px i napis łamany na dwie linie. Dokładamy czwartą klasę. */
.baba-kosz .baba-kosz__summary .baba-kosz__checkout a.baba-kosz__btn,
.baba-kosz .baba-kosz__summary .baba-kosz__checkout a.baba-kosz__btn:hover {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--kosz-fs-label);
	line-height: var(--kosz-lh-label);
	font-weight: 500;
	padding: calc(14px * var(--kosz-s)) calc(20px * var(--kosz-s));
	white-space: nowrap;
	background: var(--kat-accent, #995bb3);
	color: #fff;
}

/* Opakowanie przycisku kasy.

   Woo daje `.woocommerce-cart .wc-proceed-to-checkout { padding: 1em 0 }`,
   a samemu przyciskowi `margin-bottom: 1em`. Na desktopie te 16 px wsiąkły
   w kalibrację marginesu i wynik wychodził zgodny — ale przypadkiem, bo
   `1em` nie skaluje się razem z `--kosz-s`. Na telefonie ten sam padding
   spychał przycisk o 30 px. Zerujemy go, żeby liczby w arkuszu znaczyły to,
   co jest w nich napisane. */
.baba-kosz .baba-kosz__summary .baba-kosz__checkout {
	padding: 0;
}

.baba-kosz .baba-kosz__summary .baba-kosz__checkout a.baba-kosz__btn {
	margin-bottom: 0;
}

/* ---------- kształt przycisków wobec WooCommerce ----------

   Reguły przycisków są zapisane parami `X, X:hover { … }`. Selektor bez
   `:hover` ma o jedną klasę mniej niż ten z `:hover`, więc Woo wygrywał
   w spoczynku, a przegrywał po najechaniu — przycisk był prostokątny i
   „zaokrąglał się” dopiero pod kursorem. Zmierzone: promień 3 px zamiast
   21,4 px, a na zamówieniu dodatkowo tło `#7f54b3`, czyli domyślny fiolet
   WooCommerce zamiast markowego `#995bb3`.

   | reguła                                   | specyficzność |
   | ---------------------------------------- | ------------- |
   | Woo `…a.button`                          | 0,2,1         |
   | Woo `…a.button.alt`                      | 0,3,1         |
   | `.baba-kosz .baba-kosz__btn`             | 0,2,0         |
   | `.baba-kosz .baba-kosz__btn:hover`       | 0,3,0         |

   Dokładamy typ elementu i drugą klasę — wychodzi 0,3,1, czyli remis z Woo.
   Remis rozstrzyga kolejność wczytania, a ta jest po naszej stronie na stałe:
   `Baba_Kosz_Strona::zasoby()` wisi na `wp_enqueue_scripts` z priorytetem 20,
   WooCommerce na domyślnym 10. Bez `!important` — Woo go tutaj nie używa. */

.baba-kosz a.baba-kosz__btn,
.baba-kosz button.baba-kosz__btn,
.baba-zam a.baba-kosz__btn,
.baba-zam button.baba-kosz__btn {
	border-radius: calc(25.5px * var(--kosz-s));
	/* Motyw daje `transition: all`, więc animowała się też geometria. */
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
	/* Środkowanie też trzeba utwardzić: Woo narzuca `display: inline-block`,
	   przez co `justify-content` z reguły o klasę słabszej przestawało cokolwiek
	   znaczyć i napis „Wróć do sklepu" siadał przy lewej krawędzi pigułki. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.baba-kosz a.baba-kosz__btn.baba-kosz__btn--pelny,
.baba-kosz button.baba-kosz__btn.baba-kosz__btn--pelny,
.baba-zam a.baba-kosz__btn.baba-kosz__btn--pelny,
.baba-zam button.baba-kosz__btn.baba-kosz__btn--pelny {
	background: var(--kat-accent, #995bb3);
	border: none;
	color: #fff;
}

.baba-kosz a.baba-kosz__btn.baba-kosz__btn--obrys,
.baba-kosz button.baba-kosz__btn.baba-kosz__btn--obrys,
.baba-zam a.baba-kosz__btn.baba-kosz__btn--obrys,
.baba-zam button.baba-kosz__btn.baba-kosz__btn--obrys {
	background: none;
	border: 1px solid var(--kat-ink, #1e1e1e);
	color: var(--kat-ink, #1e1e1e);
}

/* Przycisk przy kodzie rabatowym — ta sama pułapka, własny promień. */
.baba-kosz button.baba-kosz__coupon-btn,
.baba-zam button.baba-kosz__coupon-btn {
	border-radius: calc(14px * var(--kosz-s));
	transition: background-color .15s ease, color .15s ease;
}

/* „Usuń pozycję”.

   Woo rysuje `a.remove` jako czerwony krzyżyk: `.woocommerce a.remove`
   (0,2,1) daje `font-size: 1.5em` i `display: block`, a kolor ma na
   `!important`. Specyficzność załatwia dwie pierwsze rzeczy, koloru nie da
   się przebić inaczej niż `!important` — to jedyne jego użycie w tym arkuszu
   i bierze się wprost z `!important` po tamtej stronie. */
.baba-kosz .baba-kosz__items a.remove.baba-kosz__remove,
.baba-kosz .baba-kosz__items a.remove.baba-kosz__remove:hover {
	display: inline-flex;
	align-items: center;
	width: auto;
	height: auto;
	font-size: var(--kosz-fs-usun);
	line-height: var(--kosz-lh-mini);
	font-weight: 400;
	text-decoration: none;
	border-radius: 0;
	background: none;
	color: var(--kat-ink, #1e1e1e) !important;
}

/* Pole kodu rabatowego.

   Motyw i Woo stylują `input[type=text]` ramką, tłem i cieniem — pole ma być
   niewidoczne, bo obrys rysuje dopiero jego opakowanie. */
.baba-kosz .baba-kosz__coupon input.baba-kosz__coupon-input,
.baba-kosz .baba-kosz__coupon input.baba-kosz__coupon-input:focus {
	border: none;
	background: none;
	box-shadow: none;
	height: auto;
	padding: 0;
	font-size: var(--kosz-fs-label);
}

.baba-kosz .baba-kosz__coupon button.baba-kosz__coupon-btn,
.baba-kosz .baba-kosz__coupon button.baba-kosz__coupon-btn:hover {
	font-size: var(--kosz-fs-coupon-btn);
	line-height: 1;
	font-weight: 500;
	background: var(--kat-accent, #995bb3);
	color: #fff;
	border: none;
	white-space: nowrap;
}

/* Pozycja nie może być niższa od miniatury — inaczej produkt bez wierszy meta
   łamie rytm 254 px, na którym stoi cała lista. Tytuły dłuższe niż w makiecie
   (tam jest zaślepka „Dziady cz. II”, a w sklepie bywa 70 znaków) rozpychają
   wiersz w dół i tak ma zostać: ucinanie nazwy produktu w koszyku to gorsze
   rozwiązanie niż nierówny rytm. */
.baba-kosz .baba-kosz__item {
	min-height: calc(188.2px * var(--kosz-s));
}

@media (max-width: 767px) {
	.baba-kosz .baba-kosz__item {
		min-height: 67px;
	}

	.baba-kosz .baba-kosz__summary .baba-kosz__checkout a.baba-kosz__btn {
		padding: 12px 18px;
	}
}

/* ==========================================================================
   Wysuwany mini-koszyk (szuflada).

   PROPORCJE SĄ NASZE, nie z makiety — i to świadomie. Makieta rysuje panel na
   płótnie 1920 px jako 686 px, czyli 36 % szerokości okna. Przeliczenie tego
   skalą siatki treści (`--kosz-s`, 0,8392) dało 576 px NA SZTYWNO i to był
   błąd: element przyklejony do krawędzi OKNA nie skaluje się skalą kolumny
   treści. Przy oknie 1768 px wychodziło 33 %, ale przy 978 px już 59 % —
   szuflada przestawała być szufladą.

   Szerokość wyprowadzona z treści: miniatura 96 + odstęp 14 + kolumna tekstu
   282 + marginesy 2 × 24 = 440. Przy 282 px i piśmie 15 px w wiersz wchodzi
   ~34 znaki, więc najdłuższa nazwa w tym sklepie („Rozprawka na egzaminie
   ósmoklasisty – autorski kurs Baby od polskiego", 68 znaków) mieści się
   w dwóch wierszach.

   Górną krawędź ustawia skrypt (`--kosz-panel-top`), bo nagłówek serwisu jest
   przyklejony i jego wysokość zmienia się przy przewijaniu oraz z paskiem
   administratora.

   Telefon (≤ 767 px) ma własny blok na końcu sekcji i zostaje na 360 px.
   ========================================================================== */

.baba-kosz-panel {
	--kosz-panel-top: 0px;
	--kosz-pad: 24px;
	/* Skala zostaje na 1: panel liczy w bezwzględnych pikselach. Token musi
	   istnieć, bo reguły wspólne ze stroną koszyka używają go w `calc()`
	   i bez niego deklaracja jest nieprawidłowa. */
	--kosz-s: 1;
	/* Jaśniejsza niż w koszyku (tam 0,5). W szufladzie półczarna linia tnie
	   listę na plastry. */
	--kosz-rule: rgba(59, 58, 58, .18);
	--kosz-ink: #202020;
	--kosz-ls-wide: 1.2px;
	--kosz-fs-title: 15px;
	--kosz-lh-title: 20px;
	--kosz-fs-label: 12px;
	--kosz-lh-label: 16px;
	--kosz-fs-mini: 10.5px;
	--kosz-lh-mini: 15px;
	--kosz-fs-usun: 11px;
	--kosz-fs-price: 15px;

	position: fixed;
	inset: var(--kosz-panel-top) 0 0 0;
	/* Nad paskiem zakupu (9000) i nad czatem WPChat (99999): jego przezroczysty
	   prostokąt 400 × 88 px w prawym dolnym rogu łapał kursor nad „Przejdź do
	   płatności”, panel gasł po zjechaniu na przycisk, a klik szedł w czat. */
	z-index: 100000;
	font-family: var(--kat-font, "Poppins", -apple-system, "Segoe UI", sans-serif);
}

.baba-kosz-panel[hidden] {
	display: none;
}

.baba-kosz-panel__tlo {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .35);
	opacity: 0;
	transition: opacity .25s ease;
}

.baba-kosz-panel.is-otwarty .baba-kosz-panel__tlo {
	opacity: 1;
}

/* Okno jest kolumną flex i SAMO SIĘ NIE PRZEWIJA — przewija się wyłącznie
   lista. Bez tego suma i przyciski lądowały pod krawędzią ekranu: przy pięciu
   pozycjach treść miała 1567 px w oknie 1085 px, więc do „Przejdź do
   płatności” trzeba było przewinąć 736 px. */
.baba-kosz-panel__okno {
	position: absolute;
	inset: 0 0 0 auto;
	display: flex;
	flex-direction: column;
	width: min(440px, calc(100vw - 56px));
	box-sizing: border-box;
	overflow: hidden;
	background: #fff;
	transform: translateX(100%);
	transition: transform .25s ease;
}

.baba-kosz-panel.is-otwarty .baba-kosz-panel__okno {
	transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
	.baba-kosz-panel__okno,
	.baba-kosz-panel__tlo {
		transition: none;
	}
}

/* `min-height: 0` jest tu konieczne: bez niego element flex nie umie zejść
   poniżej swojej treści, lista nie oddaje wysokości i stopka wypada poza okno. */
.baba-kosz-panel__tresc {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

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

.baba-kosz-panel__naglowek {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	min-height: 64px;
	box-sizing: border-box;
	padding: 18px var(--kosz-pad) 14px;
	border-bottom: 1px solid var(--kosz-rule);
}

.baba-kosz-panel__tytul {
	margin: 0;
	font-size: 20px;
	line-height: 26px;
	font-weight: 600;
	color: var(--kat-title, #1a1a1a);
}

.baba-kosz-panel__licznik {
	margin-left: 7px;
	font-size: 13px;
	font-weight: 400;
	color: var(--kat-muted, #545e69);
}

/* Krzyżyk wyrównany do linii tytułu i do prawej krawędzi kolumny treści.
   Wcześniej siedział na `top: 10px`, gdy tytuł zaczynał się na 36, i wychodził
   21 px poza kolumnę. */
.baba-kosz-panel__x {
	position: absolute;
	top: 18px;
	right: calc(var(--kosz-pad) - 6px);
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: none;
	font-size: 22px;
	line-height: 1;
	color: var(--kat-muted, #545e69);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.baba-kosz-panel__x:hover {
	background: rgba(30, 30, 30, .06);
	color: var(--kat-ink, #1e1e1e);
}

/* ---------- lista ---------- */

/* Padding jest na liście, a nie na oknie, żeby pasek przewijania trzymał się
   krawędzi panelu, a nie wchodził w treść. */
.baba-kosz-panel__lista {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	padding: 0 var(--kosz-pad);
}

/* Wiersz: miniatura i JEDNA kolumna tekstu. Cena z „usuń” siedzą w kolumnie
   tekstu, nie w osobnym pasie pod całym wierszem — tamten pas zjadał 50 px na
   każdej pozycji i rozrzucał powiązane informacje po dwóch krańcach. */
.baba-kosz-panel .baba-kosz__item {
	display: grid;
	/* Trzecia kolumna to kosz w prawym górnym rogu — tyle, ile zajmie ikona.
	   Cena idzie niżej i rozpina się od kolumny tekstu do prawej krawędzi. */
	grid-template-columns: 96px minmax(0, 1fr) auto;
	grid-template-areas:
		"media tresc usun"
		".     cena  cena";
	gap: 10px 14px;
	align-items: start;
	min-height: 0;
	margin: 0;
	padding: 16px 0;
	border-bottom: 1px solid var(--kosz-rule);
}

.baba-kosz-panel .baba-kosz__item:last-child {
	border-bottom: none;
}

.baba-kosz-panel .baba-kosz__media {
	grid-area: media;
}

.baba-kosz-panel .baba-kosz__media img {
	width: 96px;
	height: 54px;
	aspect-ratio: auto;
	border-radius: var(--kat-radius, 10.835px);
}

.baba-kosz-panel .baba-kosz__body {
	grid-area: tresc;
	padding-top: 0;
}

/* Kosz w prawym górnym rogu wiersza, na wysokości początku tekstu.
   Ujemne marginesy dosuwają go do krawędzi mimo pola dotykowego 24 × 24. */
.baba-kosz-panel .baba-kosz__item > .product-remove {
	grid-area: usun;
	align-self: start;
	margin: -3px -4px 0 0;
}

/* Składniki zestawu nie mają odnośnika usuwania — `Baba_Kosz_Pozycja::usun()`
   zwraca dla nich pusty ciąg, a pusty obszar zostawiałby po sobie wcięcie. */
.baba-kosz-panel .baba-kosz__item > .product-remove:empty {
	display: none;
}

.baba-kosz-panel .baba-kosz__cat {
	margin: 0;
	font-size: var(--kosz-fs-mini);
	line-height: 14px;
	letter-spacing: var(--kosz-ls-wide);
	text-transform: uppercase;
	color: var(--kat-muted, #545e69);
}

.baba-kosz-panel .baba-kosz__title {
	margin: 4px 0 0;
	font-size: var(--kosz-fs-title);
	line-height: var(--kosz-lh-title);
	font-weight: 600;
	color: var(--kat-title, #1a1a1a);
	/* Ucięcie po trzech wierszach. W tym sklepie próg nie jest osiągany, ale
	   żadna nazwa nie rozepchnie już listy. Pełna nazwa zostaje w `title`
	   odnośnika i w `aria-label` przycisku usuwania. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.baba-kosz-panel .baba-kosz__meta {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

.baba-kosz-panel .baba-kosz__meta li {
	margin: 0;
	font-size: var(--kosz-fs-mini);
	line-height: var(--kosz-lh-mini);
	letter-spacing: var(--kosz-ls-wide);
	text-transform: uppercase;
	color: var(--kat-muted, #545e69);
}

/* Odstęp PO dwukropku. Sam `::after { content: ":" }` dawał „KURSÓW:3”. */
.baba-kosz-panel .baba-kosz__meta-key {
	margin-right: 4px;
}

.baba-kosz-panel .baba-kosz__title,
.baba-kosz-panel .baba-kosz__meta li {
	overflow-wrap: anywhere;
}

/* Ostatnia linia wiersza: „usuń” po lewej, cena po prawej.

   `align-items: center`, a NIE `baseline`: przy wyrównaniu do linii pisma
   pojemnik rósł do 57 px, choć oba dzieci mają 16 i 20 — „usuń” jest
   `inline-flex` z ikoną, więc jego linia pisma leży na dole pudełka
   i rozpychała wiersz. */
.baba-kosz-panel .baba-kosz__side {
	display: flex;
	/* `flex-direction` i `padding-top` MUSZĄ tu być: `.baba-kosz__side` z widoku
	   koszyka nie jest zakresowany klasą `.baba-kosz`, więc dosięga i tutaj ze
	   swoim `column` i wcięciem 11,1 px. Bez nadpisania „usuń” stawało NAD ceną,
	   a wiersz rósł do 57 px. */
	grid-area: cena;
	align-self: center;
	flex-direction: row;
	align-items: center;
	/* Została tu sama cena — `space-between` zepchnąłby ją na lewo. */
	justify-content: flex-end;
	gap: 10px;
	/* Odstęp od bloku tekstu robi `row-gap` siatki. */
	margin-top: 0;
	padding-top: 0;
	text-align: left;
}

.baba-kosz-panel .baba-kosz__price {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	white-space: nowrap;
}

.baba-kosz-panel .baba-kosz__price-was {
	font-size: 11px;
	line-height: 16px;
	color: var(--kat-muted, #545e69);
	text-decoration: line-through;
}

.baba-kosz-panel .baba-kosz__price-now {
	font-size: var(--kosz-fs-price);
	line-height: 20px;
	font-weight: 600;
	color: var(--kat-accent, #995bb3);
	background: none;
	text-decoration: none;
}

.baba-kosz-panel .baba-kosz__price-w-zestawie {
	font-size: var(--kosz-fs-mini);
	line-height: 16px;
	letter-spacing: var(--kosz-ls-wide);
	text-transform: uppercase;
	color: var(--kat-muted, #545e69);
}

/* ---------- zestaw ----------

   Zestaw i jego składniki to JEDNA pozycja listy, więc w środku grupy nie ma
   ani jednej kreski. Podległość mówią wcięcie, mniejsza miniatura, lżejszy
   tytuł i napis „w zestawie” — kreska łącząca „└” do tego wszystkiego była
   już nadmiarem i znika. */

.baba-kosz-panel .baba-kosz__item.asnp-wepb-cart-bundle,
.baba-kosz-panel .baba-kosz__item.asnp-wepb-cart-bundle-item:has(+ .asnp-wepb-cart-bundle-item) {
	padding-bottom: 0;
	border-bottom: none;
}

/* Składniki nie mają kosza, więc nie mają też trzeciej kolumny — inaczej
   odstęp między kolumnami zabierałby im 14 px szerokości tekstu.

   Miniatura jest TAKA SAMA jak u pozycji nadrzędnej. Zmniejszona (64 × 36)
   była nieczytelna — okładki w tym sklepie mają napis na całą szerokość.
   Podległość i tak widać po wcięciu, lżejszym tytule, napisie „w zestawie”
   zamiast ceny, braku kosza i braku kresek wewnątrz grupy. Wcięcie schodzi
   z 40 na 28 px, żeby kolumna tekstu nie straciła na tej zamianie. */
.baba-kosz-panel .baba-kosz__item.asnp-wepb-cart-bundle-item {
	grid-template-columns: 96px minmax(0, 1fr);
	grid-template-areas:
		"media tresc"
		".     cena";
	padding-top: 12px;
	padding-left: 28px;
	margin-bottom: 0;
}

/* Kreska łącząca z widoku koszyka nie jest zakresowana klasą `.baba-kosz`,
   więc dosięgałaby i tutaj. */
.baba-kosz-panel .baba-kosz__item.asnp-wepb-cart-bundle-item::before,
.baba-kosz-panel .baba-kosz__item.asnp-wepb-cart-bundle-item::after {
	content: none;
}

.baba-kosz-panel .baba-kosz__item.asnp-wepb-cart-bundle-item .baba-kosz__media img {
	width: 96px;
	height: 54px;
}

.baba-kosz-panel .baba-kosz__item.asnp-wepb-cart-bundle-item .baba-kosz__title {
	font-size: 13.5px;
	line-height: 18px;
	font-weight: 500;
}

/* ---------- pusty koszyk ---------- */

.baba-kosz-panel__pusty {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	margin: 0;
	padding: 48px var(--kosz-pad);
	text-align: center;
	font-size: 14px;
	line-height: 20px;
	color: var(--kat-muted, #545e69);
}

/* ---------- stopka ---------- */

.baba-kosz-panel__stopka {
	flex: 0 0 auto;
	box-sizing: border-box;
	padding: 14px var(--kosz-pad) 20px;
	border-top: 1px solid var(--kosz-rule);
	background: #fff;
}

.baba-kosz-panel__suma {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	margin: 0;
	padding: 0;
	border: none;
}

.baba-kosz-panel__suma-etykieta {
	font-size: 15px;
	line-height: 22px;
	font-weight: 600;
	color: var(--kosz-ink);
}

.baba-kosz-panel__suma-kwota {
	font-size: 18px;
	line-height: 22px;
	font-weight: 600;
	color: var(--kosz-ink);
	text-align: right;
}

.baba-kosz-panel .baba-kosz__vat {
	grid-column: 1 / -1;
	margin-top: 2px;
	font-size: var(--kosz-fs-mini);
	line-height: var(--kosz-lh-mini);
	font-weight: 400;
	letter-spacing: var(--kosz-ls-wide);
	text-transform: uppercase;
	color: var(--kat-muted, #545e69);
}

/* Przyciski na pełną szerokość kolumny. Wcześniej miały 313 px wyśrodkowane
   w panelu 576 px i zostawiały puste marginesy po obu stronach. */
.baba-kosz-panel__akcje {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 14px;
}

/* ---------- utwardzenie wewnątrz panelu ----------

   Panel nie ma przodka `.baba-kosz`, więc wszystkie reguły zakresowane tamtą
   klasą (a jest nimi całe utwardzenie wobec Woo i kitu) omijały go bokiem.
   Efekt był widoczny od razu: „usuń” wracało do czerwonego krzyżyka w 24 px,
   a tytuły pozycji do wersalików w kolorze odnośników kitu. */

.baba-kosz-panel .baba-kosz__title a,
.baba-kosz-panel .baba-kosz__title a:hover {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	text-transform: none;
	text-decoration: none;
}

/* „Usuń” jako cichy odnośnik, nie jako pas z wersalikami.

   `color` z `!important`, bo `.woocommerce a.remove` ma czerwień na
   `!important` po tamtej stronie — to jedyny powód, dla którego jest tu użyty. */
.baba-kosz-panel a.remove.baba-kosz__remove,
.baba-kosz-panel a.remove.baba-kosz__remove:hover {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Pole dotykowe większe od samej ikony — 14 px trafia się myszą źle. */
	width: 24px;
	height: 24px;
	padding: 0;
	border-radius: 12px;
	background: none;
	font-size: 0;
	line-height: 1;
	text-decoration: none;
	color: var(--kat-muted, #545e69) !important;
	transition: color .15s ease, background-color .15s ease;
}

.baba-kosz-panel a.remove.baba-kosz__remove:hover {
	background: rgba(30, 30, 30, .07);
	color: var(--kat-ink, #1e1e1e) !important;
}

.baba-kosz-panel .baba-kosz__remove svg,
.baba-kosz-panel .baba-kosz__remove .baba-kosz__icon svg {
	display: block;
	width: 14px;
	height: 14px;
}

/* Guzik z obrysem ma NIEPRZEZROCZYSTE tło, a okno panelu własny kontekst
   składania.

   Ze zgłoszenia: przez „Zobacz koszyk" szła pozioma kreska wychodząca poza oba
   końce pigułki. Na desktopie tego nie odtworzyłem; kształt na zrzucie —
   kółko z kreską przy każdym końcu — pasuje do strzałek karuzeli
   (`.baba-kat__arrow`), które przy `@media (hover: none)`, czyli na dotyku, są
   widoczne na stałe i w poziomie stoją dokładnie w końcach guzika.
   `background: none` sprawiał, że cokolwiek za guzikiem prześwitywało. */
.baba-kosz-panel .baba-kosz-panel__okno {
	isolation: isolate;
}

.baba-kosz-panel .baba-kosz__btn--obrys,
.baba-kosz-panel a.baba-kosz__btn.baba-kosz__btn--obrys {
	background: #fff;
}

/* Strzałki karuzeli nie mają co robić pod otwartym panelem. */
body.baba-kosz-panel-otwarty .baba-kat__arrow {
	opacity: 0;
	pointer-events: none;
}

.baba-kosz-panel .baba-kosz__btn,
.baba-kosz-panel .baba-kosz__btn:hover {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 46px;
	padding: 0 16px;
	border-radius: 23px;
	font-size: 13px;
	line-height: 1.2;
	font-weight: 500;
	letter-spacing: var(--kosz-ls-wide);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	/* Wyłącznie kolory. `transition: all` z motywu animował też geometrię. */
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.baba-kosz-panel .baba-kosz__btn--pelny,
.baba-kosz-panel .baba-kosz__btn--pelny:hover {
	background: var(--kat-accent, #995bb3);
	border: none;
	color: #fff;
}

.baba-kosz-panel .baba-kosz__btn--pelny:hover {
	background: #854d9e;
}

.baba-kosz-panel .baba-kosz__btn--obrys,
.baba-kosz-panel .baba-kosz__btn--obrys:hover {
	background: none;
	border: 1px solid var(--kat-ink, #1e1e1e);
	color: var(--kat-ink, #1e1e1e);
}

.baba-kosz-panel .baba-kosz__btn--obrys:hover {
	background: rgba(30, 30, 30, .06);
}

/* Plakietka opinii („pinek”) ma `z-index: 2147483647` i leży NA panelu,
   zasłaniając cenę. Przy otwartej szufladzie wygaszamy ją; nic nie usuwamy
   na stałe. Klasę na `body` dokłada `assets/js/baba-koszyk.js`. */
body.baba-kosz-panel-otwarty .pinek-badge-trigger {
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}

/* ---------- panel na desktopie: rozwijane menu, nie okno modalne ---------- */

@media (min-width: 768px) {
	/* Kontener rozciąga się na całą stronę (`position: fixed; inset: … 0 0 0`),
	   bo na telefonie niesie przyciemnione tło. Tutaj tła nie ma, a kontener
	   klikalny przechwytywałby kliknięcia treści pod spodem i psuł wykrywanie
	   zjechania myszą. Zdarzenia wskaźnika dostaje samo okno. */
	.baba-kosz-panel {
		pointer-events: none;
	}

	.baba-kosz-panel__okno {
		pointer-events: auto;
		/* Bez przyciemnienia biały panel zlewałby się z białą stroną i nie
		   byłoby widać, gdzie się kończy. */
		box-shadow: -12px 0 32px rgba(0, 0, 0, .12);
	}

	.baba-kosz-panel__tlo {
		display: none;
	}
}

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

   Blokada przewijania dotyczy WYŁĄCZNIE telefonu — tam panel jest oknem
   modalnym i przykrywa stronę. Na desktopie wysuwa się po najechaniu, więc
   strona musi zostać w pełni używalna; inaczej przypadkowe muśnięcie ikony
   myszą zatrzymywałoby przewijanie. */

@media (max-width: 767px) {
	body.baba-kosz-panel-otwarty {
		overflow: hidden;
	}

	.baba-kosz-panel {
		--kosz-pad: 18px;
	}

	.baba-kosz-panel__okno {
		width: min(360px, 100%);
	}

	.baba-kosz-panel__naglowek {
		min-height: 56px;
		padding-top: 14px;
		padding-bottom: 12px;
	}

	.baba-kosz-panel__x {
		top: 14px;
	}

	.baba-kosz-panel__tytul {
		font-size: 18px;
		line-height: 24px;
	}

	.baba-kosz-panel .baba-kosz__item {
		grid-template-columns: 84px minmax(0, 1fr);
		column-gap: 12px;
		padding: 14px 0;
	}

	.baba-kosz-panel .baba-kosz__media img {
		width: 84px;
		height: 47px;
	}

	.baba-kosz-panel .baba-kosz__item.asnp-wepb-cart-bundle-item {
		grid-template-columns: 84px minmax(0, 1fr);
		padding-left: 20px;
	}

	.baba-kosz-panel .baba-kosz__item.asnp-wepb-cart-bundle-item .baba-kosz__media img {
		width: 84px;
		height: 47px;
	}

	/* Wiersz panelu na telefonie: 158 px to za dużo.

	   Zmierzone przy 390 x 640: nagłówek 56, lista 397, stopka 187 — mieściły się
	   DWIE I PÓŁ pozycji, a przy oknie ~530 px (tak wyglądał zrzut ze zgłoszenia)
	   niecałe dwie. Z tych 158 px sama treść brała 114, bo tytuł łamał się na
	   trzy–cztery wiersze i pod nim stały jeszcze „MODUŁÓW/LEKCJI".

	   Meta znika TYLKO w panelu; na stronie koszyka zostaje, bo tam jest miejsce
	   i to ona odróżnia od siebie warianty tego samego kursu. */
	.baba-kosz-panel .baba-kosz__title {
		-webkit-line-clamp: 2;
	}

	.baba-kosz-panel .baba-kosz__meta {
		display: none;
	}

	/* „Usuń" i cena w JEDNYM wierszu zamiast w dwóch. Obszar `usun` musi tu
	   zostać: bez niego kosz wypadał do wiersza dorozumianego i wychodziło
	   z tego o jeden wiersz siatki więcej, nie mniej. */
	.baba-kosz-panel .baba-kosz__item {
		grid-template-areas:
			"media tresc"
			"usun  cena";
		padding: 10px 0;
		row-gap: 6px;
	}

	.baba-kosz-panel .baba-kosz__item > .product-remove {
		align-self: center;
	}

	.baba-kosz-panel .baba-kosz__side {
		justify-content: flex-end;
	}

	.baba-kosz-panel__stopka {
		padding-top: 10px;
		padding-bottom: 12px;
	}

	.baba-kosz-panel__akcje {
		gap: 8px;
	}

	.baba-kosz-panel__akcje .baba-kosz__btn {
		min-height: 42px;
	}
}

/* ==========================================================================
   Zamówienie (checkout)
   ==========================================================================

   Ta sama siatka co koszyk: treść makiety 102 → 1818 (1716 px), skala 0,8392,
   plakietka i karta w tych samych miejscach. Różni się podział kolumn:
   koszyk ma 825 / 401 / 490, zamówienie 939 / 287 / 490.

   Kalibracja stopni (szerokość tuszu kontra Poppins na canvasie przy 1000 px):
     36 — „Zamówienie”                          (zmierzone 35,8)
     24 — nagłówki sekcji, „Podsumowanie”,
          „Szczegóły zamówienia”                 (23,6–23,9, siedem napisów)
     19,4 — etykiety pól                         (19,0–19,6, sześć napisów)
     16 — wersaliki, światło 1,5                 (15,70–15,77 — ten sam styl
                                                  co w koszyku, gdzie wyszło 15,9)
     11 — „masz konto? zaloguj się!”             (10,65–10,80)
   -------------------------------------------------------------------------- */

.baba-zam {
	--zam-fs-label: calc(19.4px * var(--kosz-s));
	--zam-lh-label: calc(24px * var(--kosz-s));
	/* Odnośniki „Mam kod rabatowy” i „Zaloguj się”. Makieta dawała 11 px, co
	   po skali schodzi do 9,2 px — obok nagłówka sekcji na 20,1 px to była
	   kropka, nie napis. Podnosimy do stopnia etykiet formularza. */
	--zam-fs-link: calc(16px * var(--kosz-s));
	--zam-fs-podpowiedz: calc(11px * var(--kosz-s));
	--zam-line: var(--kat-rule, #9c9c9c);
	--zam-border: var(--kat-line, #cfcfcf);

	/* Barwy tekstu ZMIERZONE z makiety zamówienia, nie przejęte z koszyka.
	   Wcześniej użyłem tu tokenów koszyka (#1e1e1e / #1a1a1a) zakładając, że
	   paleta jest wspólna — nie jest.

	   Odczyt przez NAJCIEMNIEJSZY piksel, nie przez najczęstszy: przy małym
	   tekście antyaliasing zjada rdzeń kreski i najczęstszy piksel wychodzi
	   jaśniejszy od prawdy. Po przejściu na najciemniejszy makieta desktopowa
	   i telefonowa zgodziły się co do wartości. */
	--zam-tytul: #202020;                /* nagłówki sekcji, „Szczegóły zamówienia” */
	--zam-etykieta: #000000;             /* etykiety pól */
	--zam-podpowiedz: #999999;           /* podpowiedź pod polem e-mail */
	--zam-zgoda: #000000;                /* akapit zgód i teksty zgód */
}

/* ---------- siatka ---------- */

.baba-zam__grid {
	display: grid;
	grid-template-columns: 54.72% 28.55%;   /* 939 / 1716 i 490 / 1716 */
	column-gap: 16.72%;                     /* 287 / 1716 */
	align-items: start;
}

.baba-zam__glowna { min-width: 0; }

/* Woo i motyw dają `.woocommerce` oraz formularzowi własne marginesy górne —
   razem spychały pierwszą sekcję o 56 px. Odstęp od plakietki ustawiamy sami. */
.baba-zam > .woocommerce,
.baba-zam form.checkout {
	margin: 0;
}

.baba-zam .baba-zam__grid {
	margin-top: calc(56px * var(--kosz-s));  /* 524 − 468, jak w koszyku */
}

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

.baba-zam__sekcja + .baba-zam__sekcja,
.baba-zam__platnosci .baba-zam__sekcja {
	margin-top: calc(48px * var(--kosz-s));
}

.baba-zam__naglowek {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: calc(24px * var(--kosz-s));
	padding-bottom: calc(17.5px * var(--kosz-s));   /* linia na 569 */
	border-bottom: 1px solid var(--zam-line);
}

.baba-zam .baba-zam__tytul {
	margin: 0;
	padding: 0;
	font-size: calc(24px * var(--kosz-s));
	line-height: calc(30px * var(--kosz-s));
	font-weight: 600;
	color: var(--zam-tytul);
}

.baba-zam .baba-zam__login,
.baba-zam .baba-zam__login:hover,
.baba-zam .baba-zam__kupon-link,
.baba-zam .baba-zam__kupon-link:hover {
	font-size: var(--zam-fs-link);
	line-height: 1;
	font-weight: 600;
	letter-spacing: var(--kosz-ls-wide);
	text-transform: uppercase;
	color: var(--kat-sec-accent, #0060d4);
	text-decoration: none;
	white-space: nowrap;
}

/* ---------- pola ----------

   Dwie podkolumny: 102..516 i 592..1021, przerwa 76 px. Kolumnę pola
   przypisujemy WPROST po identyfikatorze, bo automatyczne rozmieszczanie
   nie zna makiety, a ukryte `billing_country` nie zajmuje komórki i przesunęłoby
   parzystość. Cokolwiek dojdzie w Flexible Checkout Fields, wpadnie do kolumny
   pierwszej z domyślną szerokością etykiety — zobaczymy je, zamiast zgubić. */

/* JEDNA kolumna, nie dwie.

   Makieta ustawia pola w dwóch podkolumnach (102..516 i 592..1021), ale
   w praktyce czytało się to źle: etykiety obu kolumn miały różną szerokość,
   więc pola zaczynały się na różnych wysokościach i w różnych miejscach,
   a wzrok skakał w zygzaku. Redakcja poprosiła o jedno pole pod drugim.

   Kolumna etykiety jest teraz WSPÓLNA dla wszystkich pól (168 px z makiety,
   czyli 141 po skali — tyle potrzebuje najdłuższa jednowierszowa etykieta,
   „Ulica i numer”), więc wszystkie pola zaczynają się równo. */
.baba-zam__pola {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: calc(24px * var(--kosz-s));
	margin-top: calc(40px * var(--kosz-s)); /* 609 − 569 */
	align-items: start;
}

/* Clearfix WooCommerce w siatce.

   `.form-row` ma od Woo `::before` i `::after` z `content: " "`. W układzie
   pływającym to nieszkodliwy clearfix, ale w siatce i we flexie pseudoelementy
   STAJĄ SIĘ POZYCJAMI. Efekt: `::before` zajmował pierwszą komórkę, etykieta
   lądowała w drugiej, a pole spadało do następnego wiersza — pola wychodziły
   szerokie na kolumnę etykiety i stały pod nią. */
.baba-zam .baba-zam__pola > .form-row::before,
.baba-zam .baba-zam__pola > .form-row::after,
.baba-zam .baba-zam__przelacznik::before,
.baba-zam .baba-zam__przelacznik::after,
.baba-zam .baba-required-consents .form-row::before,
.baba-zam .baba-required-consents .form-row::after,
.baba-zam .woocommerce-terms-and-conditions-wrapper .form-row::before,
.baba-zam .woocommerce-terms-and-conditions-wrapper .form-row::after,
.baba-zam .baba-zam__pola > .form-row > label::before,
.baba-zam .baba-zam__pola > .form-row > label::after {
	display: none;
}

/* Wiersz pola jest PIONOWY: etykieta, pod nią pole na pełną szerokość, pod nim
   objaśnienie.

   Odstępy robią MARGINESY, nie `row-gap`. Etykieta ma przylegać do swojego pola
   bliżej (6,7 px) niż objaśnienie pod nim (7,6 px), a `row-gap` rozdaje wszystkim
   po równo. Odstęp MIĘDZY polami (23,9 px z `row-gap` siatki `.baba-zam__pola`)
   jest 3,6 razy większy od wewnętrznego, więc wiersze się nie zlewają.

   Pełna szerokość załatwia przy okazji objaśnienia: „Na ten adres e-mail zostanie
   nadany dostęp do materiałów” potrzebuje 461 px i w poprzedniej, wąskiej kolumnie
   pola (319 px) łamało się na dwa wiersze. */
.baba-zam .baba-zam__pola > .form-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	column-gap: 0;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

/* Wszystkie pola w jednej kolumnie i ze wspólną szerokością etykiety —
   po rezygnacji z dwóch podkolumn nie ma powodu, żeby się różniły. */
.baba-zam__pola > .form-row {
	grid-column: 1;
}

/*
 * Dopisek „(opcjonalne)” przy etykiecie dokłada SAM WooCommerce każdemu polu
 * niewymaganemu (`woocommerce_form_field()`), poza naszą tablicą etykiet.
 * Nie mieścił się w kolumnie etykiety i wchodził pod pole — „NIP (opcjonalne)”
 * potrzebowało 137 px przy 100 px miejsca.
 *
 * Makieta nie ma go nigdzie: pola wymagane mają gwiazdkę, reszta nie ma nic
 * i to wystarcza za informację. Chowamy tylko na zamówieniu.
 */
.baba-zam form.checkout .optional {
	display: none;
}



/* Dwie etykiety wydłużyły się na prośbę klienta z 18.09: „E-mail” → „Adres
   e-mail” i „Ulica” → „Ulica i numer”. Przy 119 px z makiety obie łamały się
   na dwa wiersze i podnosiły wiersz z 34 do 55 px. Zmierzone w przeglądarce
   szerokości napisu bez łamania, razem z gwiazdką i odstępem: 131 px dla
   e-maila i 137 px dla ulicy, czyli 155 i 164 w jednostkach makiety. Dajemy
   168 na obie — kilka pikseli zapasu na wypadek podmiany kroju.
   Kolumna pola traci 41 px; to świadome odstępstwo od makiety, bo słowa są
   późniejsze niż ona. */


/* „Potwierdź adres e-mail” zostaje dwuwierszowe — tak samo jest w makiecie,
   gdzie „Potwierdź E-mail” ma 52 px wysokości, czyli dwie linie. */

/* Etykieta ma się ŁAMAĆ, a nie wychodzić poza kolumnę. Bez tego „NIP
   (opcjonalne)” z Flexible Checkout Fields potrzebowało 137 px w kolumnie
   100 px i wchodziło pod pole. Same napisy skracamy w `kolejnosc_pol()`,
   ale to jest zabezpieczenie na wszystko, co redakcja dopisze w panelu. */
.baba-zam .baba-zam__pola > .form-row > label {
	margin: 0 0 calc(8px * var(--kosz-s));
	overflow-wrap: anywhere;
	/* Odstęp od pola był potrzebny, gdy etykieta stała OBOK niego. */
	padding-right: 0;
	font-size: var(--zam-fs-label);
	line-height: var(--zam-lh-label);
	font-weight: 400;
	color: var(--zam-etykieta);
}

.baba-zam .baba-zam__pola > .form-row .woocommerce-input-wrapper {
	min-width: 0;
	width: 100%;
}

.baba-zam .baba-zam__pola input[type="text"],
.baba-zam .baba-zam__pola input[type="email"],
.baba-zam .baba-zam__pola input[type="tel"],
.baba-zam .baba-zam__pola input[type="password"],
.baba-zam .baba-zam__pola select,
.baba-zam .baba-zam__pola textarea {
	box-sizing: border-box;
	width: 100%;
	height: calc(41px * var(--kosz-s));
	padding: 0 calc(18px * var(--kosz-s));
	border: 1px solid var(--zam-border);
	border-radius: calc(4px * var(--kosz-s));
	background: #fff;
	box-shadow: none;
	font-family: inherit;
	font-size: var(--kosz-fs-label);
	line-height: calc(39px * var(--kosz-s));
	letter-spacing: var(--kosz-ls-wide);
	text-transform: uppercase;
	color: var(--kat-ink, #1e1e1e);
}

.baba-zam .baba-zam__pola ::placeholder {
	color: var(--zam-border);
	opacity: 1;
	text-transform: uppercase;
}

.baba-zam .baba-zam__pola input:focus,
.baba-zam .baba-zam__pola select:focus {
	outline: 2px solid var(--kat-accent, #995bb3);
	outline-offset: calc(2px * var(--kosz-s));
}

/* Podpowiedź pod polem e-mail — w makiecie 234..492 na 657, czyli pod
   polem, wyrównana do jego lewej krawędzi. */
.baba-zam__podpowiedz {
	/* Pod polem, na pełną szerokość wiersza. */
	grid-column: 1;
	display: block;
	/* Makieta daje tu ~8 px (kalibracja: 7,3 przy świetle 1,5) i jedną linię.

	   Stało tu wcześniej `white-space: nowrap` z komentarzem, że napis wychodzi
	   o 58 px poza kolumnę, „w przerwę między kolumnami, gdzie nie ma z czym
	   kolidować”. Przestało to być prawdą, kiedy napis się wydłużył: miał 433 px
	   w pudełku o 230 px i wchodził 143 px w prawą kolumnę, pod etykietę
	   „Potwierdź E-mail”. To było zgłoszone nachodzenie tekstów.

	   Dlatego: stopień w górę do progu czytelności (8,4 px było i tak nie do
	   przeczytania) i zawijanie jako zabezpieczenie — patrz `podpowiedz_pola()`.

	   Wiersz e-maila ma z makiety 58,5 px wysokości (pola pod nim idą co 70).
	   Sam stopień 12 px rozpychał go do 63,5 i wszystkie pola poniżej schodziły
	   o 6 px, więc odstęp i interlinia są tak dobrane, żeby wiersz został na swoim.

	   Od uwag klienta z 18.09 podpowiedź e-maila ma 55 znaków i zajmuje dwie
	   linie — wiersz e-maila rośnie i pola pod nim zjeżdżają. To świadome:
	   klient prosił o tę treść wprost. */
	margin-top: calc(9px * var(--kosz-s));
	font-size: 12px;
	line-height: 14px;
	letter-spacing: var(--kosz-ls-wide);
	text-transform: uppercase;
	color: var(--zam-podpowiedz);
}

/* Kraj jest ukryty przez wtyczkę pól, ale zostaje w DOM — Woo go potrzebuje
   do przeliczania podatku. Nie może zajmować komórki siatki. */
.baba-zam__pola > .inspire_checkout_fields_hide {
	display: none !important;
}

/* ---------- sekcje zwijane ---------- */

.baba-zam__przelacznik {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: calc(30px * var(--kosz-s)) 0 0;
	padding: 0;
}

.baba-zam .baba-zam__przelacznik label {
	display: flex;
	align-items: center;
	gap: calc(23px * var(--kosz-s));      /* 145 − 122 */
	margin: 0;
	font-size: var(--kosz-fs-label);
	line-height: var(--kosz-lh-label);
	letter-spacing: var(--kosz-ls-wide);
	text-transform: uppercase;
	color: var(--zam-etykieta);
	cursor: pointer;
}

.baba-zam input[type="checkbox"].baba-zam__ptaszek,
.baba-zam .baba-zam__zgody input[type="checkbox"] {
	flex: 0 0 auto;
	appearance: none;
	-webkit-appearance: none;
	width: calc(22px * var(--kosz-s));
	height: calc(22px * var(--kosz-s));
	margin: 0;
	border: 1px solid #9d9d9d;
	border-radius: calc(3px * var(--kosz-s));
	background: #fff;
	cursor: pointer;
}

.baba-zam input[type="checkbox"]:checked {
	border-color: var(--kat-accent, #995bb3);
	background: var(--kat-accent, #995bb3);
}

.baba-zam input[type="checkbox"]:checked::after {
	content: "";
	display: block;
	width: 32%;
	height: 60%;
	margin: 10% auto 0;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.baba-zam__strzalka {
	flex: 0 0 auto;
	width: calc(14px * var(--kosz-s));
	height: calc(14px * var(--kosz-s));
	border: solid var(--kat-ink, #1e1e1e);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translate(-25%, -25%);
	transition: transform .2s ease;
}

.baba-zam__zwijane {
	display: none;
	margin-top: calc(30px * var(--kosz-s));
}

.baba-zam__sekcja--zwijana.is-otwarta .baba-zam__zwijane {
	display: grid;
}

/* Pola wysyłki chowa i pokazuje natywny `checkout.js` (slideToggle po
   `#ship-to-different-address-checkbox`), więc nie narzucamy im `display` —
   inaczej walczylibyśmy z jego stylem wpisywanym wprost w element. */
.baba-zam .shipping_address .baba-zam__pola {
	display: grid;
}

.baba-zam__sekcja--zwijana.is-otwarta .baba-zam__strzalka {
	transform: rotate(-135deg) translate(-25%, -25%);
}

/* ---------- metody płatności ---------- */

.baba-zam .baba-zam__metody {
	list-style: none;
	margin: calc(30px * var(--kosz-s)) 0 0;
	padding: 0;
}

/*
 * Radio i etykieta stoją w makiecie w jednym wierszu (kwadrat 19..34, napis
 * od 47). Stockowy `checkout/payment-method.php` renderuje je jako RODZEŃSTWO
 * wewnątrz `<li>`, więc `display: flex` na samej etykiecie nic nie daje —
 * `<input>` jest wtedy liniowy, etykieta blokowa i napis spada pod kwadrat.
 * Kontenerem flex musi być `<li>`.
 *
 * `flex-wrap` plus `flex-basis: 100%` na opisie metody, bo `.payment_box`
 * jest trzecim dzieckiem i ma iść pod spód, a nie w ten sam wiersz.
 */
.baba-zam .baba-zam__metody > li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(16.5px * var(--kosz-s));        /* kwadrat kończy się na 121, napis od 139 */
	margin: 0 0 calc(37px * var(--kosz-s));   /* 1369 − 1310 − 22 */
	padding: 0;
	background: none;
}

.baba-zam .baba-zam__metody > li > .payment_box {
	flex: 0 0 100%;
}

/*
 * Ta sama pułapka co w siatce pól: `::before`/`::after` to clearfix WooCommerce
 * (`content: " "; display: table`). W kontenerze flex przestają być clearfixem
 * i stają się pełnoprawnymi elementami — pierwszy zjadał `gap`, przez co
 * kwadrat radia odsuwał się od krawędzi o 23 px.
 */
.baba-zam form.checkout #payment ul.payment_methods > li::before,
.baba-zam form.checkout #payment ul.payment_methods > li::after {
	display: none;
}

/* Odstęp daje `gap` na `<li>`; własny margines radia by go dublował
   (WooCommerce ustawia `margin: 0 1em 0 0`). */
.baba-zam form.checkout #payment ul.payment_methods > li input[type="radio"] {
	margin: 0;
}

.baba-zam .baba-zam__metody > li > label {
	display: flex;
	align-items: center;
	gap: calc(23px * var(--kosz-s));
	margin: 0;
	font-size: var(--kosz-fs-label);
	line-height: var(--kosz-lh-label);
	letter-spacing: var(--kosz-ls-wide);
	text-transform: uppercase;
	color: var(--zam-etykieta);
	cursor: pointer;
}

.baba-zam .baba-zam__metody input[type="radio"] {
	flex: 0 0 auto;
	appearance: none;
	-webkit-appearance: none;
	width: calc(22px * var(--kosz-s));
	height: calc(22px * var(--kosz-s));
	margin: 0;
	border: 1px solid #9d9d9d;
	border-radius: calc(3px * var(--kosz-s));
	background: #fff;
	cursor: pointer;
}

.baba-zam .baba-zam__metody input[type="radio"]:checked {
	border-color: var(--kat-accent, #995bb3);
	background: var(--kat-accent, #995bb3);
	box-shadow: inset 0 0 0 3px #fff;
}

.baba-zam .baba-zam__metody label img {
	height: calc(32px * var(--kosz-s));
	width: auto;
	margin-left: calc(12px * var(--kosz-s));
}

/* Paynow w rozmiarze PayPala. Wtyczka Paynow tnie logo do 48 px szerokości
   (`max-width: 3rem`), a plik ma ¼ wysokości pustego marginesu nad literami.
   PayPal wychodzi min(32 × s, 24) px i wypełnia plik w całości, więc Paynow
   dostaje 4/3 tego: 100 × 32 px przy PayPalu 99 × 24, znak 22,7 px. */
.baba-zam form.checkout #payment ul.payment_methods > li[class*="payment_method_pay_by_paynow_pl"] > label > img {
	max-width: none;
	max-height: none;
	width: auto;
	height: min(calc(42.67px * var(--kosz-s)), 32px);
	vertical-align: middle;
}

.baba-zam .payment_box {
	margin: calc(16px * var(--kosz-s)) 0 0 calc(45px * var(--kosz-s));
	padding: calc(16px * var(--kosz-s));
	border-radius: calc(8px * var(--kosz-s));
	background: var(--kosz-bg);
	font-size: var(--kosz-fs-mini);
	line-height: var(--kosz-lh-mini);
}

/* ---------- zgody ---------- */

.baba-zam .baba-zam__zgody {
	margin: calc(48px * var(--kosz-s)) 0 0;
	padding: 0;
}

.baba-zam__naglowek--zgody {
	border-bottom: 0;
	padding-bottom: calc(14.6px * var(--kosz-s));  /* „Zgody” 1449 → akapit 1491 */
}

.baba-zam .woocommerce-privacy-policy-text {
	margin: 0 0 calc(25.5px * var(--kosz-s));      /* akapit 1525 → pierwsza zgoda 1581 */
	padding-bottom: calc(20px * var(--kosz-s));
	border-bottom: 1px solid var(--zam-line);
}

/*
 * Gwiazdka przy zgodzie wymaganej.
 *
 * WooCommerce renderuje ją jako `<abbr class="required">` będące TRZECIM
 * bezpośrednim dzieckiem etykiety — a etykieta jest siatką o dwóch kolumnach
 * (kwadrat + tekst). Gwiazdka lądowała więc w NOWYM WIERSZU SIATKI, pod całą
 * zgodą. To nie było łamanie tekstu, tylko rozmieszczenie w siatce — stąd
 * zgłoszenie „gwiazdki wskoczyły do kolejnego wiersza".
 *
 * Chowamy znacznik i dokładamy gwiazdkę na końcu tekstu przez `::after`, więc
 * wraca do zdania, do którego należy. `:has()` pilnuje, żeby dostały ją tylko
 * zgody wymagane — newsletter nie ma znacznika i gwiazdki też nie dostanie.
 */
.baba-zam__zgody label > abbr.required {
	display: none;
}

.baba-zam__zgody label:has(> abbr.required) > .woocommerce-terms-and-conditions-checkbox-text::after {
	content: '\00a0*';
	color: #a00;
}

/* Krótsze „wiszące" końcówki akapitów zgód. Nie usuwa ich całkiem — przy
   tekście, który dokładnie wypełnia wiersz, ostatni znak i tak zjedzie niżej. */
.baba-zam__zgody label > span {
	text-wrap: pretty;
}

/*
 * Odnośniki w zgodach i w akapicie polityki — jeden kolor w obu stanach.
 *
 * Kit Elementora daje im po najechaniu limonkę (`--e-global-color-accent`),
 * nieczytelną na białym tle. Wchodzimy zakresem `.baba-zam form.checkout`,
 * bo kit celuje w `.elementor-kit-NNNNN a:hover` i jedna klasa mu nie wystarcza.
 * Kolor to fiolet marki, ten sam co ceny i przyciski.
 */
.baba-zam form.checkout .baba-required-consents a,
.baba-zam form.checkout .baba-required-consents a:hover,
.baba-zam form.checkout .baba-required-consents a:focus,
.baba-zam form.checkout .woocommerce-terms-and-conditions-wrapper a,
.baba-zam form.checkout .woocommerce-terms-and-conditions-wrapper a:hover,
.baba-zam form.checkout .woocommerce-terms-and-conditions-wrapper a:focus,
.baba-zam form.checkout .woocommerce-privacy-policy-text a,
.baba-zam form.checkout .woocommerce-privacy-policy-text a:hover,
.baba-zam form.checkout .woocommerce-privacy-policy-text a:focus {
	color: var(--kat-accent, #995bb3);
	text-decoration: underline;
}

.baba-zam .woocommerce-privacy-policy-text p,
.baba-zam .baba-required-consents label,
.baba-zam .woocommerce-terms-and-conditions-wrapper label {
	margin: 0;
	font-size: var(--kosz-fs-mini);
	line-height: calc(20px * var(--kosz-s));
	color: var(--zam-zgoda);
}

.baba-zam .baba-required-consents .form-row,
.baba-zam .woocommerce-terms-and-conditions-wrapper .form-row {
	margin: 0 0 calc(21px * var(--kosz-s));
	padding: 0;
}

.baba-zam .baba-required-consents label,
.baba-zam .woocommerce-terms-and-conditions-wrapper label {
	display: grid;
	grid-template-columns: calc(22px * var(--kosz-s)) minmax(0, 1fr);
	column-gap: calc(23px * var(--kosz-s));
	align-items: start;
}

.baba-zam .baba-required-consents { margin: 0 !important; }

/* ---------- przycisk na dole lewej kolumny ---------- */

.baba-zam__zloz {
	display: flex;
	justify-content: center;
	margin-top: calc(84px * var(--kosz-s));   /* 1980 − 1896 */
}

.baba-zam .baba-zam__btn {
	width: calc(318px * var(--kosz-s));
	min-height: calc(51px * var(--kosz-s));
	border-radius: calc(25.5px * var(--kosz-s));
}

/* ---------- karta podsumowania ---------- */

.baba-zam__karta {
	box-sizing: border-box;
	/* Górna krawędź karty: 538, wersaliki nagłówka strony: 524.
	   Uwaga na zaokrąglone narożniki — przy lewej krawędzi tło zaczyna się
	   dopiero na 552 i łatwo wziąć to za górę karty. Krawędź czytamy w środku
	   szerokości. */
	margin-top: calc(20.7px * var(--kosz-s));
	padding: calc(37.3px * var(--kosz-s)) calc(46px * var(--kosz-s)) calc(40px * var(--kosz-s)) calc(28px * var(--kosz-s));
	border-radius: calc(20px * var(--kosz-s));
	background: var(--kosz-bg);
	color: var(--kosz-ink);
}

.baba-zam .baba-zam__karta-tytul {
	margin: 0 0 calc(23.9px * var(--kosz-s));
	font-size: calc(24px * var(--kosz-s));
	line-height: calc(30px * var(--kosz-s));
	font-weight: 600;
	color: var(--zam-tytul);
}

.baba-zam__sumy { margin: 0; }

.baba-zam .baba-zam__sumy .baba-kosz__row {
	margin-bottom: calc(24.7px * var(--kosz-s));   /* 673 − 634 − 14,3 */
}

.baba-zam .baba-zam__sumy .baba-kosz__row:last-child { margin-bottom: 0; }

.baba-zam__karta-akcja {
	display: flex;
	justify-content: center;
	margin: calc(56px * var(--kosz-s)) calc(-46px * var(--kosz-s)) 0 calc(-28px * var(--kosz-s));
}

.baba-zam .baba-zam__btn-karta {
	width: calc(318px * var(--kosz-s));
	min-height: calc(51px * var(--kosz-s));
	border-radius: calc(25.5px * var(--kosz-s));
}

.baba-zam .baba-kosz__perks {
	margin-top: calc(49px * var(--kosz-s));    /* dół przycisku 803, ikona 853 */
	padding-top: 0;
	border-top: 0;
}

/* Skok zapewnień jest w zamówieniu ciaśniejszy niż w koszyku: 853 → 906 → 960.
   `:last-child` musi być tu powtórzone — reguła koszyka ma niższą wagę, a bez
   niej margines ostatniej zalety wychodzi poza listę i scala się z odstępem
   „Szczegółów zamówienia”. */
.baba-zam .baba-kosz__perk {
	margin-bottom: calc(32px * var(--kosz-s));
}

.baba-zam .baba-kosz__perk:last-child {
	margin-bottom: 0;
}

.baba-zam__szczegoly {
	margin-top: calc(30.4px * var(--kosz-s)); /* trzecia zaleta 994, linia 1032 */
	padding-top: calc(29.2px * var(--kosz-s)); /* linia 1032, nagłówek 1069 */
	border-top: 1px solid var(--kosz-rule);
}

.baba-zam .baba-zam__tytul--szczegoly {
	margin: 0 0 calc(29.7px * var(--kosz-s)); /* nagłówek 1069, pierwsza pozycja 1122 */
	font-size: calc(24px * var(--kosz-s));
	line-height: calc(30px * var(--kosz-s));
	font-weight: 600;
}

.baba-zam__pozycja {
	display: grid;
	/* Miniatura ma w makiecie 209 px (ciągły pas 1356..1564), a kolumna tekstu
	   zaczyna się na 1579. Wcześniej stało tu 190 — pomyliłem krawędź okładki
	   z początkiem tekstu, bo pomiar był ucięty zakresem. */
	/* Jak w koszyku: miniatura ustępuje, żeby kolumna tekstu nie zeszła do zera.
	   Przy 1024 px zostawało jej 43 px, a karta rosła z 878 do 1326 px, bo tytuł
	   łamał się na literę. Rezerwa 100 px to przerwa 12 px plus ~88 px tekstu. */
	grid-template-columns: min(calc(209px * var(--kosz-s)), calc(100% - 100px)) minmax(0, 1fr);
	column-gap: calc(14px * var(--kosz-s));      /* 1579 − 1565 */
	align-items: start;
	/* Pozycje rozdziela linia (1257), której wcześniej tu nie było — wziąłem
	   skok 135 za odstęp do następnej pozycji, a to była odległość do linii.
	   Wysokość wiersza zależy od długości tytułu, więc odstępy liczą się od
	   jego dolnej krawędzi, nie od stałej wysokości miniatury. */
	padding-bottom: calc(19px * var(--kosz-s));  /* dół pozycji 1238, linia 1257 */
	border-bottom: 1px solid var(--kosz-rule);
	margin-bottom: calc(21px * var(--kosz-s));   /* linia 1257, druga pozycja 1278 */
}

.baba-zam__pozycja:last-child {
	padding-bottom: 0;
	border-bottom: 0;
	margin-bottom: calc(24px * var(--kosz-s));   /* dół pozycji 1394, strzałka 1418 */
}

.baba-zam__pozycja-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--kat-media-ratio, 390.22 / 217.26);
	object-fit: cover;
	object-position: 50% 25%;
	border-radius: calc(8px * var(--kosz-s));
}

.baba-zam .baba-zam__pozycja-tytul {
	margin: calc(4px * var(--kosz-s)) 0 calc(8px * var(--kosz-s));
	font-size: var(--kosz-fs-mini);
	line-height: calc(18px * var(--kosz-s));
	font-weight: 700;
	color: var(--kat-title, #1a1a1a);
}

.baba-zam__pozycja .baba-kosz__price-now { font-size: var(--kosz-fs-label); }

.baba-zam__wiecej {
	display: block;
	width: calc(34px * var(--kosz-s));
	height: calc(34px * var(--kosz-s));
	margin: calc(20px * var(--kosz-s)) auto 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--kat-sec-accent, #0060d4);
	cursor: pointer;
}

/* Motyw Hello Elementor maluje KAŻDY <button> przy `:hover` i `:focus`
   (`themes/hello-elementor/assets/css/reset.css`: `background-color:#c36`).
   Bez własnej reguły z tłem przycisk zalewa się malinowym — redakcja zgłosiła
   to jako „wygląda jak wykrzaczenie stylów”. Typ elementu w selektorze daje
   0,1,2, więc poprawka nie zależy od kolejności kolejkowania arkuszy. */
.baba-zam button.baba-zam__wiecej:hover,
.baba-zam button.baba-zam__wiecej:focus {
	background: #004fae;   /* ciemniejszy odpowiednik `--kat-sec-accent`, ten sam co przy strzałkach */
}

.baba-zam button.baba-zam__wiecej:focus-visible {
	outline: 2px solid var(--kat-sec-accent, #0060d4);
	outline-offset: 3px;
}

.baba-zam__wiecej span {
	display: block;
	width: calc(9px * var(--kosz-s));
	height: calc(9px * var(--kosz-s));
	margin: 0 auto;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translate(-20%, -20%);
}

.baba-zam__wiecej[aria-expanded="true"] span {
	transform: rotate(-135deg) translate(-20%, -20%);
}

/* Formularz logowania wjeżdża dopiero po kliknięciu odnośnika w nagłówku. */
.baba-zam__logowanie .woocommerce-form-login {
	margin: calc(20px * var(--kosz-s)) 0 0;
}

/* ==========================================================================
   Utwardzenie zamówienia wobec WooCommerce.

   `woocommerce-layout.css` celuje w `.woocommerce form .form-row …`, czyli
   dwie klasy i dwa elementy. Moje reguły z samym `.baba-zam` miały o jeden
   człon mniej i przegrywały — stąd etykiety wracały do `display: block`,
   a clearfixowe `::before`/`::after` zostawały pozycjami flexa i rozpychały
   wiersz z checkboxem o 185 px.

   Blok stoi na końcu arkusza i to jest jego jedyne miejsce.
   ========================================================================== */

.baba-zam form.checkout .form-row::before,
.baba-zam form.checkout .form-row::after,
.baba-zam form.checkout .woocommerce-billing-fields__field-wrapper::before,
.baba-zam form.checkout .woocommerce-billing-fields__field-wrapper::after {
	display: none;
}

.baba-zam form.checkout .baba-zam__przelacznik {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0;
}

.baba-zam form.checkout .baba-zam__przelacznik label,
.baba-zam form.checkout .baba-zam__metody > li > label {
	display: flex;
	align-items: center;
	gap: calc(23px * var(--kosz-s));      /* 145 − 122 */
	margin: 0;
	padding: 0;
	font-size: var(--kosz-fs-label);
	line-height: var(--kosz-lh-label);
	letter-spacing: var(--kosz-ls-wide);
	text-transform: uppercase;
	color: var(--zam-etykieta);
	cursor: pointer;
}

.baba-zam form.checkout input[type="checkbox"],
.baba-zam form.checkout input[type="radio"] {
	flex: 0 0 auto;
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	width: calc(22px * var(--kosz-s));
	height: calc(22px * var(--kosz-s));
	min-width: calc(22px * var(--kosz-s));
	margin: 0;
	padding: 0;
	border: 1px solid #9d9d9d;
	border-radius: calc(3px * var(--kosz-s));
	background: #fff;
	cursor: pointer;
}

.baba-zam form.checkout input[type="checkbox"]:checked,
.baba-zam form.checkout input[type="radio"]:checked {
	border-color: var(--kat-accent, #995bb3);
	background: var(--kat-accent, #995bb3);
}

.baba-zam form.checkout input[type="checkbox"]:checked::after {
	content: "";
	display: block;
	width: 32%;
	height: 58%;
	margin: 8% auto 0;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.baba-zam form.checkout input[type="radio"]:checked {
	box-shadow: inset 0 0 0 3px #fff;
}

/* Zgody: kwadrat u góry, tekst obok — wiersze bywają na cztery linie. */
.baba-zam form.checkout .baba-required-consents label,
.baba-zam form.checkout .woocommerce-terms-and-conditions-wrapper label {
	display: grid;
	grid-template-columns: calc(22px * var(--kosz-s)) minmax(0, 1fr);
	column-gap: calc(23px * var(--kosz-s));
	align-items: start;
	margin: 0;
	padding: 0;
	font-size: var(--kosz-fs-mini);
	line-height: calc(20px * var(--kosz-s));
	text-transform: none;
	letter-spacing: 0;
}

.baba-zam form.checkout .baba-required-consents input[type="checkbox"],
.baba-zam form.checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
	margin-top: calc(2px * var(--kosz-s));
}

/* Pola: wysokość i obrys muszą przebić `.woocommerce form .form-row input.input-text`. */
.baba-zam form.checkout .baba-zam__pola input.input-text,
.baba-zam form.checkout .baba-zam__pola input[type="email"],
.baba-zam form.checkout .baba-zam__pola input[type="tel"],
.baba-zam form.checkout .baba-zam__pola select {
	box-sizing: border-box;
	width: 100%;
	height: calc(41px * var(--kosz-s));
	padding: 0 calc(18px * var(--kosz-s));
	border: 1px solid var(--zam-border);
	border-radius: calc(4px * var(--kosz-s));
	background: #fff;
	box-shadow: none;
	font-size: var(--kosz-fs-label);
	line-height: calc(39px * var(--kosz-s));
	letter-spacing: var(--kosz-ls-wide);
	text-transform: uppercase;
}

/* Odstępy pionowe dociągnięte pomiarem: pierwsze pole na 609, skok wierszy 69,5. */
.baba-zam .baba-zam__pola {
	margin-top: calc(36.4px * var(--kosz-s));
	row-gap: calc(28.5px * var(--kosz-s));
}

/* Blok płatności ma od Woo szare tło i własne wcięcia (`.woocommerce-checkout-payment`
   w `woocommerce.css`), a lista metod i wiersze zgód dostają 22 px wcięcia
   z lewej — po nim checkboxy stały 22 px za daleko. */
.baba-zam form.checkout #payment,
.baba-zam form.checkout #payment .payment_methods,
.baba-zam form.checkout #payment .place-order {
	padding: 0;
	margin-left: 0;
	border-radius: 0;
	background: none;
}

.baba-zam form.checkout #payment ul.payment_methods {
	border: 0;
}

.baba-zam form.checkout #payment ul.payment_methods > li,
.baba-zam form.checkout .baba-required-consents .form-row,
.baba-zam form.checkout .woocommerce-terms-and-conditions-wrapper .form-row {
	padding-left: 0;
	margin-left: 0;
	list-style: none;
	background: none;
}

/* Opis pod wybraną metodą — Woo daje mu trójkącik i różowe tło. */
.baba-zam form.checkout #payment .payment_box::before {
	display: none;
}

/* Odstępy między sekcjami.

   Pięć poprzednich podejść mierzyło je od krawędzi pudełek — a pudełko tekstu
   jest wyższe niż sam tekst i o tę różnicę wynik zależał od stopnia pisma.
   Te liczby biorą się z pomiaru od LINII PISMA ostatniego wiersza sekcji do
   wersalików następnego nagłówka, czyli z tego, co widać. Kolejne wartości
   trzeba czytać razem: przesunięcie jednej sekcji przenosi się na następne. */
.baba-zam .woocommerce-billing-fields + .baba-zam__sekcja--zwijana {
	margin-top: calc(60.4px * var(--kosz-s));   /* „Miasto” 862 → „Dane do faktury” 943 */
}

.baba-zam form.checkout .baba-zam__przelacznik {
	margin-top: calc(37.1px * var(--kosz-s));   /* nagłówek 943 → kwadrat zgody 1026 */
}

.baba-zam .woocommerce-shipping-fields {
	margin-top: calc(41.1px * var(--kosz-s));   /* zgoda 1036 → „Zakup na inny adres” 1090 */
}

.baba-zam form.checkout #payment .baba-zam__sekcja {
	margin-top: calc(30px * var(--kosz-s));     /* zgoda 1183 → „Metoda płatności” 1233 */
}

.baba-zam form.checkout #payment ul.payment_methods {
	margin-top: calc(36.2px * var(--kosz-s));   /* nagłówek 1233 → napis PayPal 1315 */
}

.baba-zam form.checkout .baba-zam__zgody {
	margin-top: calc(42.5px * var(--kosz-s));   /* druga metoda 1386 → „Zgody” 1449 */
}

/* Odstęp między metodami płatności: radio 1310 i 1369, czyli skok 59. */
.baba-zam form.checkout #payment ul.payment_methods > li {
	margin: 0 0 calc(37px * var(--kosz-s));
}

.baba-zam form.checkout #payment ul.payment_methods > li:last-child {
	margin-bottom: 0;
}

.baba-zam .baba-zam__karta-tytul {
	margin-bottom: calc(23.9px * var(--kosz-s)); /* „Podsumowanie” 582, „ŁĄCZNIE” 633 */
}

.baba-zam .baba-zam__sumy .baba-kosz__row {
	margin-bottom: calc(18.2px * var(--kosz-s));
}

.baba-zam .baba-zam__karta-akcja {
	margin-top: calc(64px * var(--kosz-s));     /* „DOSTAWA” 672, przycisk 753 */
}


/* ==========================================================================
   Zamówienie — telefon (makieta 360 × 3216)

   Marginesy 18 px, kolumna treści 324. Pola układają się tak samo jak na
   desktopie — etykieta z lewej, pole z prawej — tylko w JEDNEJ kolumnie:
   etykieta 18..~105, pole 112..307 (196 px), wysokość 41, skok 53.

   Kolejność bloków na telefonie: formularz, a pod nim różowe podsumowanie
   na wylot — czyli ta sama kolejność, co w DOM-ie, bez przestawiania.
   ========================================================================== */

@media (max-width: 767px) {
	.baba-zam {
		--zam-fs-label: 12px;
		--zam-lh-label: 16px;
		--zam-fs-link: 12px;
		--zam-fs-podpowiedz: 12px;
	}

	.baba-zam__grid {
		grid-template-columns: minmax(0, 1fr);
		column-gap: 0;
		row-gap: 0;
		margin-top: 28px;
	}

	.baba-zam .baba-zam__tytul {
		font-size: 16px;
		line-height: 20px;
	}

	/* Nagłówek sekcji ma na telefonie strzałkę po prawej; odnośnik logowania
	   przenosi się nad formularz i jest wyśrodkowany (makieta: 87..272 na 268). */
	.baba-zam__naglowek {
		padding-bottom: 12px;
	}

	.baba-zam .baba-zam__login {
		display: block;
		margin: 0 0 30px;
		text-align: center;
		font-size: 12px;
		white-space: normal;
	}

	.baba-zam__pola {
		grid-template-columns: minmax(0, 1fr);
		column-gap: 0;
		row-gap: 12px;                          /* skok 53 minus wysokość 41 */
		margin-top: 20px;
	}

	.baba-zam .baba-zam__pola > .form-row {
		grid-column: 1;
	}

	.baba-zam .baba-zam__pola > .form-row > label {
		margin-bottom: 6px;
		padding-right: 0;
		font-size: 12px;
		line-height: 16px;
	}

	.baba-zam form.checkout .baba-zam__pola input.input-text,
	.baba-zam form.checkout .baba-zam__pola input[type="email"],
	.baba-zam form.checkout .baba-zam__pola input[type="tel"],
	.baba-zam form.checkout .baba-zam__pola select {
		height: 41px;
		padding: 0 12px;
		font-size: 12px;
		line-height: 39px;
	}

	.baba-zam__podpowiedz {
		margin-top: 6px;
		font-size: 12px;
		line-height: 16px;
		white-space: normal;
	}

	.baba-zam form.checkout .baba-zam__przelacznik {
		margin-top: 15px;                       /* nagłówek 824, kwadrat 871 */
	}

	.baba-zam form.checkout .baba-zam__przelacznik label,
	.baba-zam form.checkout .baba-zam__metody > li > label {
		gap: 12px;
		font-size: 12px;
		line-height: 16px;
	}

	/* Kwadrat kończy się na 34, napis zaczyna na 47. */
	.baba-zam .baba-zam__metody > li { gap: 12px; }

	.baba-zam form.checkout input[type="checkbox"],
	.baba-zam form.checkout input[type="radio"] {
		width: 16px;
		height: 16px;
		min-width: 16px;
	}

	/* Odstępy między sekcjami — czwarty pomiar, od linii pisma ostatniego
	   wiersza sekcji do wersalików następnego nagłówka. */
	.baba-zam .woocommerce-billing-fields + .baba-zam__sekcja--zwijana { margin-top: 81.5px; }
	.baba-zam .woocommerce-shipping-fields { margin-top: 32px; }
	.baba-zam form.checkout #payment .baba-zam__sekcja { margin-top: 22px; }
	.baba-zam form.checkout #payment ul.payment_methods { margin-top: 16px; }

	.baba-zam form.checkout .baba-zam__zgody {
		margin-top: 25px;
		margin-bottom: 0;
	}

	/* Ostatnia zgoda kończy blok formularza — jej odstęp dolny rozpychał tylko
	   wiersz siatki nad kartą. Odstęp do karty ustawia sama karta. */
	.baba-zam form.checkout .baba-required-consents .form-row:last-child {
		margin-bottom: 0;
	}

	/* Nagłówek „Zgody” stoi na 1124, akapit polityki na 1164. */
	.baba-zam .baba-zam__naglowek--zgody { padding-bottom: 21px; }

	/* Makieta telefonu nie rysuje tu linii — kwadrat pierwszej zgody wychodzi
	   wprost spod akapitu (1180 → 1195). Na desktopie linia jest i zostaje. */
	.baba-zam .woocommerce-privacy-policy-text {
		margin: 0 0 12px;
		padding-bottom: 0;
		border-bottom: 0;
	}

	.baba-zam form.checkout #payment ul.payment_methods > li { margin-bottom: 15px; }

	/* Próg czytelności 12 px, ten sam co w koszyku.

	   Wcześniej stało tu 8 px na akapicie zgód i 9 px na samych zgodach —
	   niżej niż próg, który sam przyjąłem, i to akurat na treści prawnie
	   istotnej. Blok zgód przez to urośnie i strona będzie dłuższa niż makieta;
	   to świadome odstępstwo, takie samo jak w koszyku. */
	.baba-zam form.checkout .baba-required-consents label,
	.baba-zam form.checkout .woocommerce-terms-and-conditions-wrapper label {
		grid-template-columns: 16px minmax(0, 1fr);
		column-gap: 12px;
		font-size: 12px;
		line-height: 16px;
	}

	.baba-zam .woocommerce-privacy-policy-text p {
		font-size: 12px;
		line-height: 16px;
	}

	/* Logotypy bramek na telefonie w makiecie nie występują. */
	.baba-zam .baba-zam__metody label img { display: none; }

	/* Karta schodzi pod formularz i idzie na wylot, jak blok podsumowania
	   w koszyku. Ujemny margines o znanej wartości, nie `vw`. */
	.baba-zam__karta {
		margin: 18.5px calc(-1 * var(--kosz-pad)) 0;
		/* Górne 15,5 px, nie 20: etykiety wierszy mają u nas 12 px zamiast 9 px
		   z makiety (próg czytelności), więc linia pisma siedzi niżej w wierszu.
		   Równamy po liniach pisma — one decydują, gdzie tekst widać. */
		padding: 15.5px var(--kosz-pad) 42px;
		border-radius: 0;
	}

	.baba-zam .baba-zam__karta-tytul {
		font-size: 16px;
		line-height: 20px;
		margin-bottom: 16px;
	}

	.baba-zam .baba-zam__karta-akcja {
		margin: 25px 0 0;
	}

	.baba-zam .baba-zam__btn-karta {
		width: 202px;
		min-height: 46px;
		border-radius: 23px;
	}

	/* Na telefonie makieta nie ma drugiego przycisku pod formularzem —
	   zamówienie składa się przyciskiem z bloku podsumowania. Zostawiamy go
	   w DOM-ie (to on ma `#place_order`, na którym wisi `checkout.js`),
	   tylko go nie pokazujemy. */
	.baba-zam__zloz { display: none; }

	.baba-zam .baba-zam__szczegoly { margin-top: 24px; padding-top: 24px; }
	.baba-zam .baba-zam__tytul--szczegoly { font-size: 16px; line-height: 20px; margin-bottom: 16px; }
	.baba-zam__pozycja { grid-template-columns: 120px minmax(0, 1fr); column-gap: 12px; }
}

@media (max-width: 767px) {
	/* Telefon dostaje ten sam układ pionowy co desktop. Miał wcześniej własną
	   poziomą siatkę (etykieta 94 px + pole 196 px) z makiety telefonu, ale na
	   kontenerze 335 px było w niej ciasno, a dwa różne układy w jednym widoku
	   to dwa razy więcej do utrzymania. */
	.baba-zam .baba-zam__pola > .form-row {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		padding: 0;
	}
}

@media (max-width: 767px) {
	/* Te dwie wartości muszą mieć ten sam zakres co blok utwardzający wyżej
	   (`.baba-zam .baba-zam__pola`). Zapytanie medialne nie podnosi
	   specyficzności, więc reguła z jedną klasą przegrywała i na telefonie
	   zostawały odstępy desktopu — przy skali 1 dawało to skok 69,5 zamiast 53. */
	.baba-zam .baba-zam__pola {
		margin-top: 20px;
		row-gap: 12px;
	}
}

/* ==========================================================================
   Kod rabatowy i blok konta na zamówieniu
   ========================================================================== */

/* Dwa odnośniki po prawej w nagłówku pierwszej sekcji: „mam kod rabatowy”
   i „masz konto? zaloguj się!”. */
.baba-zam__naglowek-linki {
	display: flex;
	align-items: baseline;
	gap: calc(28px * var(--kosz-s));
	flex: 0 0 auto;
}

/* Formularz kuponu stoi nad siatką (nie da się go wsadzić do środka
   `form.checkout`), więc sam ogranicza się do szerokości lewej kolumny. */
.baba-zam .baba-zam__kupon {
	width: 54.72%;                              /* 939 / 1716 — tyle, co lewa kolumna */
	margin: 0 0 calc(24px * var(--kosz-s));
	padding: 0;
	border: 0;
}

.baba-zam .baba-zam__kupon .baba-kosz__coupon {
	margin-top: 0;
}

/* W koszyku pigułka ma nad sobą linię rysowaną przez `::before`. Tutaj linii
   nie ma — kupon nie stoi w karcie, tylko sam nad formularzem. */
.baba-zam .baba-zam__kupon .baba-kosz__coupon::before {
	display: none;
}

/* ---------- „Załóż konto” ----------

   Przy obowiązkowym koncie (`woocommerce_enable_guest_checkout = no`) ten
   checkbox się NIE renderuje — WooCommerce pokazuje go tylko wtedy, gdy
   rejestracja jest opcjonalna. Style zostają, bo znacznik dalej jest
   w szablonie i odżyje, gdyby sklep kiedyś wrócił do zamawiania bez konta. */

.baba-zam .baba-zam__konto {
	margin-top: calc(34px * var(--kosz-s));
}

.baba-zam form.checkout .baba-zam__konto .create-account {
	display: block;
	margin: 0;
	padding: 0;
}

.baba-zam form.checkout .baba-zam__konto .create-account > label {
	display: flex;
	align-items: center;
	gap: calc(23px * var(--kosz-s));
	margin: 0;
	font-size: var(--kosz-fs-label);
	line-height: var(--kosz-lh-label);
	letter-spacing: var(--kosz-ls-wide);
	text-transform: uppercase;
	color: var(--zam-etykieta);
	cursor: pointer;
}

@media (max-width: 767px) {
	/* Na telefonie odnośniki nie mieszczą się obok tytułu — schodzą pod niego
	   i są wyśrodkowane, tak jak „masz konto?” w makiecie mobilnej. */
	.baba-zam .baba-zam__naglowek {
		flex-wrap: wrap;
	}

	.baba-zam__naglowek-linki {
		flex: 1 0 100%;
		justify-content: center;
		gap: 18px;
		margin-top: 12px;
	}

	.baba-zam .baba-zam__kupon {
		width: 100%;
		margin-bottom: 16px;
	}

	.baba-zam .baba-zam__konto {
		margin-top: 20px;
	}

	.baba-zam form.checkout .baba-zam__konto .create-account > label {
		gap: 12px;
		font-size: 12px;
		line-height: 16px;
	}
}

/* ---------- karta zamówienia: dwa zestawy wierszy ----------

   Desktop pokazuje „Łącznie” i „Dostawa” (w tej kolejności), telefon — zestaw
   z koszyka: „cena produktów”, „dostawa”, „Łącznie” z podpisem „z VAT”.
   Wiersze są w znaczniku raz; o widoczności i kolejności decyduje `order`. */

.baba-zam__sumy {
	display: flex;
	flex-direction: column;
}

.baba-zam .baba-zam__row--cena { display: none; }
.baba-zam .baba-zam__row--lacznie { order: 1; }
.baba-zam .baba-zam__row--dostawa,
.baba-zam .baba-zam__row--wysylka { order: 2; }
.baba-zam .baba-zam__vat { display: none; }

@media (max-width: 767px) {
	.baba-zam .baba-zam__sumy .baba-zam__row--cena {
		display: flex;
		order: 1;
		margin-bottom: 5px;                  /* linia pisma 1463 → 1484 */
	}

	.baba-zam .baba-zam__sumy .baba-zam__row--dostawa,
	.baba-zam .baba-zam__sumy .baba-zam__row--wysylka {
		order: 2;
		margin-bottom: 0;
	}

	.baba-zam .baba-zam__sumy .baba-zam__row--lacznie {
		order: 3;
		margin-top: 9.5px;                   /* linia rozdzielająca na 1497 */
		margin-bottom: 0;                    /* odstęp do przycisku daje `__karta-akcja` */
		padding-top: 15.6px;                 /* linia pisma „Łącznie” na 1527 */
		border-top: 1px solid var(--kosz-rule);
	}

	.baba-zam .baba-zam__sumy .baba-zam__row--lacznie dt,
	.baba-zam .baba-zam__sumy .baba-zam__row--lacznie dd {
		font-size: 16px;
		line-height: 1;
		font-weight: 700;
		letter-spacing: normal;
		text-transform: none;
	}

	.baba-zam .baba-zam__sumy .baba-zam__row--lacznie dt { align-self: flex-start; }

	.baba-zam .baba-zam__vat {
		display: block;
		margin-top: 4px;                     /* linia pisma „z VAT” na 1546 */
		font-size: 12px;
		line-height: 16px;
		font-weight: 400;
		letter-spacing: var(--kosz-ls-wide);
		text-transform: uppercase;
	}

	/* Przycisk startuje w makiecie na 1558, czyli 6,5 px pod blokiem sum. */
	.baba-zam .baba-zam__karta-akcja { margin-top: 8.5px; }

	/* Linia nad zapewnieniami — w makiecie telefonu jest (1618), na desktopie nie.
	   Dół przycisku wypada na 1604, linia 14 px niżej. */
	.baba-zam .baba-kosz__perks {
		margin-top: 14px;
		padding-top: 24.2px;                 /* linia pisma pierwszej zalety na 1656 */
		border-top: 1px solid var(--kosz-rule);
	}

	/* Skok między zapewnieniami: 1650 → 1680 → 1711, czyli ~30,5 px.
	   Wiersz ma u nas 17 px (makieta 14 — patrz odstępstwo „próg 12 px”). */
	.baba-zam .baba-kosz__perks li { margin-bottom: 13.5px; }
	.baba-zam .baba-kosz__perks li:last-child { margin-bottom: 0; }

	/* Nagłówek „Podsumowanie” to element desktopu; makieta telefonu go nie ma. */
	.baba-zam .baba-zam__karta-tytul { display: none; }
}