/**
 * WooCommerce Cart Block dokłada własny fallback-opis produktu pod nazwą
 * (generowany z pełnego opisu, gdy natywny short_description jest puste —
 * ten motyw celowo nie używa natywnego short_description, więc ten fallback
 * zawsze się uruchamia). Mamy własne dane (ACF subtitle + short_description)
 * przez woocommerce_get_item_data — patrz inc/store-api-cart-fields.php.
 *
 * Selektor zawężony do .wp-block-woocommerce-cart celowo — Mini-Cart i
 * Checkout Block używają tej samej klasy komponentu; nie chcemy ich tu
 * przypadkiem też wyłączyć.
 */
.wp-block-woocommerce-cart .wc-block-components-product-metadata__description {
	display: none;
}

/**
 * Kolejność w kolumnie produktu: nazwa -> subtitle/short_description
 * (metadata) -> cena jednostkowa. Domyślnie Cart Block renderuje
 * nazwa -> cena -> metadata.
 *
 * Zamiast zgadywać nazwę klasy wspólnego kontenera (nie jest udokumentowana
 * i różni się między wersjami WooCommerce Blocks), celujemy w niego
 * strukturalnie przez :has() — dokładnie ten element, który bezpośrednio
 * zawiera i nazwę, i cenę. To ogranicza zmianę wyłącznie do tej jednej
 * części wiersza koszyka (nie rusza obrazka, ilości ani kolumny TOTAL,
 * które są poza tym kontenerem).
 */
.wp-block-woocommerce-cart
	div:has(> .wc-block-components-product-name):has(> .wc-block-cart-item__prices) {
	display: flex;
	flex-direction: column;
}

.wp-block-woocommerce-cart .wc-block-components-product-name {
	order: 1;
}

.wp-block-woocommerce-cart .wc-block-components-product-metadata {
	order: 2;
}

.wp-block-woocommerce-cart .wc-block-cart-item__prices {
	order: 3;
}

/**
 * Kontrolki ilości są w tym markupie płaskim rodzeństwem nazwy/ceny/metadata
 * (nie ma osobnego wrappera obejmującego tylko te trzy) — po nadaniu
 * rodzicowi display:flex kontrolki ilości stały się flex-itemem bez
 * jawnego order, więc domyślne 0 wypychało je PRZED order:1/2/3 powyżej.
 * Jawny order:4 nie przesuwa ich nigdzie — utrzymuje dokładnie tę pozycję
 * (na końcu), którą miały przed tą zmianą. Oba selektory na wszelki
 * wypadek — który dokładnie jest bezpośrednim dzieckiem, może różnić się
 * między wersjami WooCommerce Blocks; ustawienie order na elemencie, który
 * akurat nie jest flex-itemem, jest nieszkodliwym no-opem.
 */
.wp-block-woocommerce-cart .wc-block-cart-item__quantity,
.wp-block-woocommerce-cart .wc-block-components-quantity-selector {
	order: 4;
}

/**
 * To samo dla Checkout Block — inny komponent niż w Cart (nazwa klasy
 * .wc-block-components-order-summary-item, nie .wc-block-cart-item), więc
 * osobny, jawny selektor zamiast rozszerzania reguł nad Cart Block.
 * .wc-block-components-order-summary-item__description jest już natywnie
 * flex-column w checkout.css WooCommerce Blocks — nie trzeba tego powtarzać.
 */
.wp-block-woocommerce-checkout .wc-block-components-product-name {
	order: 1;
}

.wp-block-woocommerce-checkout .wc-block-components-product-metadata {
	order: 2;
}

.wp-block-woocommerce-checkout .wc-block-cart-item__prices {
	order: 3;
}

/*
 * ---------------------------------------------------------------------------
 * Strona koszyka wg Figmy (TIERE_mobile_shop_basket 360px,
 * TIERE_DESKTOP_shop_basket 1728px). Wymiary przez jednostkę --u (tokens.css):
 * poniżej 900px wartości z ramki mobile, od 900px z ramki desktop.
 *
 * Wrapper .cart-page i tytuł daje index.php (inc/cart.php); wszystko poniżej
 * to wyłącznie wygląd bloku WooCommerce Cart - jego znaczniki, dane i
 * zachowanie zostają bez zmian. Każdy selektor zaczyna się od .cart-page,
 * więc reguły nie sięgają kasy ani innych stron.
 *
 * Szkielet (ten blok): tytuł, dwie kolumny i linie. Wnętrze pozycji koszyka
 * i podsumowania jest stylowane osobno.
 * ---------------------------------------------------------------------------
 */

/* Mobile: tytuł 13/14.29 w punkcie 17,77 (27px pod nagłówkiem strony);
   pierwsza linia 73.71px pod tytułem; 40px od ostatniego elementu do stopki. */
.cart-page {
	padding: calc(27 * var(--u)) 0 calc(40 * var(--u));
	color: var(--color-ink);
}

.cart-page__title {
	margin: 0 0 calc(73.71 * var(--u)) calc(17 * var(--u));
	font-size: calc(13 * var(--u));
	font-weight: var(--font-weight-bold);
	line-height: calc(14.29 * var(--u));
	text-transform: uppercase;
}

/*
 * Kolumny bloku: pozycje (.wc-block-components-main) i podsumowanie
 * (.wc-block-components-sidebar). Mobile: jedna pod drugą, obie w polu
 * 19-340px. Selektor z .wc-block-cart, żeby wygrać z szerokościami w %
 * z arkusza WooCommerce.
 */
.cart-page .wc-block-cart.wc-block-components-sidebar-layout {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	margin: 0;
}

.cart-page .wc-block-cart.wc-block-components-sidebar-layout .wc-block-components-main,
.cart-page .wc-block-cart.wc-block-components-sidebar-layout .wc-block-components-sidebar {
	box-sizing: border-box;
	width: auto;
	/* Bez tego kolumna nie zwęża się poniżej szerokości swojej treści. */
	min-width: 0;
	margin: 0 calc(19 * var(--u));
	padding: 0;
}

/* Mobile: nagłówek podsumowania stoi 25px pod linią zamykającą pozycje. */
.cart-page .wc-block-cart.wc-block-components-sidebar-layout .wc-block-components-sidebar {
	padding-top: calc(25 * var(--u));
}

/*
 * Linie: szara (#9b9898) nad listą pozycji i pod każdą pozycją - mobile
 * 0.5px, desktop 1px. Natywne obramowania tabeli i komórek są zerowane.
 *
 * Blok ma dwa układy wiersza, przełączane przez WooCommerce zapytaniem
 * kontenerowym: wąski (wiersz jest siatką) i szeroki od 700px (zwykły wiersz
 * tabeli). Projekt ma w obu szerokościach ten sam układ pozycji, więc wiersz
 * jest tu zawsze siatką (tak jak w wąskim układzie WooCommerce), a linia pod
 * pozycją jest jego dolną krawędzią. Wnętrze wiersza: sekcja "Pozycja
 * koszyka" niżej.
 */
.cart-page .wc-block-cart table.wc-block-cart-items {
	/* Stały układ: tabela trzyma szerokość kolumny zamiast rozszerzać się
	   do najszerszej treści wiersza (linie mają mieć szerokość kolumny). */
	table-layout: fixed;
	width: 100%;
	/* Bez linii nad listą pozycji (ustalenie projektu); odstęp o grubości
	   dawnej linii, żeby pozycje zostały na swoich miejscach. */
	border: 0;
	padding-top: calc(0.5 * var(--u));
	border-spacing: 0;
}

.cart-page .wc-block-cart table.wc-block-cart-items td,
.cart-page .wc-block-cart table.wc-block-cart-items th {
	border: 0;
}

/* Mobile: pozycja zajmuje 191px między liniami (165 i 356). */
.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
	display: grid;
	grid-template-columns: calc(112 * var(--u)) minmax(0, 1fr);
	column-gap: 0;
	position: relative;
	box-sizing: border-box;
	min-height: calc(191 * var(--u));
	padding: 0;
	border-bottom: calc(0.5 * var(--u)) solid var(--color-muted);
}

/* Linia zostaje tylko między pozycjami - pod ostatnią nie ma linii.
   Wysokość wiersza bez zmian (border-box, min-height). */
.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row:last-child {
	border-bottom: 0;
}

/*
 * Nagłówek tabeli ("Produkt / Łącznie") nie występuje w projekcie. Zostaje
 * w znacznikach dla czytników ekranu, ukryty tylko wizualnie.
 */
.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__header {
	display: block;
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * Desktop: kompozycja 1728px (wyśrodkowana na szerszych oknach). Tytuł
 * 44/50 w punkcie 77,298; linie obu kolumn na 510 i 949. Pozycje: x 80-829.
 * Podsumowanie: x 1056-1604, bez własnych linii.
 *
 * Świadome odstępstwo od Figmy: w projekcie tytuł stoi 208px pod nagłówkiem
 * strony, tutaj 96px, żeby produkt i podsumowanie były widoczne wcześniej.
 * Cała strona jest przez to 112px wyżej niż w ramce Figmy - współrzędne y
 * podawane w komentarzach tego pliku są współrzędnymi z Figmy, czyli na
 * stronie wypadają o 112px wyżej. Odstępy między elementami są bez zmian.
 */
@media (min-width: 900px) {
	.cart-page {
		max-width: calc(1728 * var(--u));
		margin-inline: auto;
		padding: calc(96 * var(--u)) 0 calc(110 * var(--u));
	}

	.cart-page__title {
		margin: 0 0 calc(162 * var(--u)) calc(77 * var(--u));
		font-size: calc(44 * var(--u));
		line-height: calc(50 * var(--u));
	}

	.cart-page .wc-block-cart.wc-block-components-sidebar-layout {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: flex-start;
	}

	.cart-page .wc-block-cart.wc-block-components-sidebar-layout .wc-block-components-main {
		flex: none;
		width: calc(749 * var(--u));
		margin: 0 0 0 calc(80 * var(--u));
	}

	/* Podsumowanie bez własnej linii u góry i u dołu (ustalenie projektu).
	   Odstępy wewnętrzne większe o 1px - dawną grubość linii - żeby
	   nagłówek, pole kodu, sumy i przycisk zostały na swoich miejscach. */
	.cart-page .wc-block-cart.wc-block-components-sidebar-layout .wc-block-components-sidebar {
		flex: none;
		width: calc(548 * var(--u));
		min-height: calc(440 * var(--u));
		margin: 0 0 0 calc(227 * var(--u));
		padding: calc(78 * var(--u) + 1px) 0 calc(41 * var(--u) + 1px);
	}

	.cart-page .wc-block-cart table.wc-block-cart-items {
		padding-top: 1px;
	}
}

/*
 * Podsumowanie jedzie za przewijaniem długiego koszyka: przykleja się 32px
 * pod nagłówkiem strony (sticky, 90px) i kończy razem z układem dwóch kolumn
 * (.wc-block-cart), więc nie wchodzi na sekcję "Moje konto" ani stopkę.
 * Tylko gdy okno mieści cały panel z przyciskiem (122 + 440px w ramce 1728);
 * w niższym oknie panel przewija się zwyczajnie.
 */
@media (min-width: 900px) and (min-height: 580px) {
	.cart-page .wc-block-cart.wc-block-components-sidebar-layout .wc-block-components-sidebar {
		position: sticky;
		top: calc(122 * var(--u));
	}
}

@media (min-width: 900px) {

	/* Pozycja zajmuje 439px między liniami (510 i 949). */
	.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
		grid-template-columns: calc(285 * var(--u)) minmax(0, 1fr);
		min-height: calc(439 * var(--u));
		border-bottom-width: 1px;
	}
}

/*
 * ---------------------------------------------------------------------------
 * Pozycja koszyka. Znaczniki bloku (kolejność stała):
 *   td.image > a > img
 *   td.product > .wrap > [ nazwa, cena jednostkowa, metadane, ilość + usuń ]
 *   td.total
 * Metadane to wpisy z inc/store-api-cart-fields.php: etykieta
 * "TIERE PARFUM 100 ml" (.tiere-cart-detail--label) i podpis "by ..."
 * (.tiere-cart-detail--author).
 *
 * Projekt: po lewej flakon, po prawej w kolumnie etykieta, nazwa, podpis
 * i wiersz ilości; kwota pozycji w wierszu ilości do prawej; krzyżyk
 * usuwania w prawym górnym rogu. Kolejność w kolumnie ustawia `order`,
 * a kontenery metadanych są "przezroczyste" (display: contents), żeby
 * etykieta i podpis mogły stanąć po obu stronach nazwy.
 *
 * Pozycje podane niżej w komentarzach to współrzędne z ramek Figmy.
 * ---------------------------------------------------------------------------
 */
.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row td {
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	text-align: left;
}

/*
 * Flakon: render bez tła, przycięty do kadru z Figmy (pole ACF cart_image,
 * patrz tiere_cart_item_larger_thumbnail() w inc/store-api-cart-fields.php).
 * Mobile 66x139 w punkcie 41,190 ramki (wiersz zaczyna się na x 19,
 * y 165.5). Produkt bez renderu pokazuje zdjęcie główne w tym samym polu.
 */
.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
	grid-column: 1;
	grid-row: 1;
	padding-top: calc(24.5 * var(--u));
}

.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image a {
	display: block;
}

.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img {
	display: block;
	width: calc(66 * var(--u));
	max-width: none;
	height: calc(139 * var(--u));
	margin: 0 0 0 calc(22 * var(--u));
	object-fit: contain;
}

/*
 * Kolumna tekstowa (mobile od x 131): etykieta 8/11.37 na y 199.55, nazwa
 * 15/21.87 Bold na 217.48, podpis 8/11.37 na 245.91, wiersz ilości od 279.59.
 * Nad obrazkiem w osi z, bo jego przezroczysty margines zachodzi na teksty.
 */
.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
	grid-column: 2;
	grid-row: 1;
	position: relative;
	z-index: 1;
	min-width: 0;
	padding: calc(34.05 * var(--u)) 0 calc(48.86 * var(--u));
}

.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}

.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-metadata,
.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-details {
	display: contents;
}

/* Cena jednostkowa pod nazwą nie występuje w projekcie (kwota pozycji jest
   w wierszu ilości). */
.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices {
	display: none;
}

.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .tiere-cart-detail {
	display: block;
	margin: 0;
	font-size: calc(8 * var(--u));
	line-height: calc(11.37 * var(--u));
	color: var(--color-ink);
}

/* Separator " / ", który blok wstawia między wpisami metadanych. */
.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .tiere-cart-detail > span[aria-hidden="true"] {
	display: none;
}

.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .tiere-cart-detail--label {
	order: 1;
}

.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
	order: 2;
	/* Długa nazwa łamie się w kolumnie i nie wchodzi pod krzyżyk usuwania. */
	max-width: calc(100% - 36 * var(--u));
	margin: calc(6.56 * var(--u)) 0 0;
	overflow-wrap: anywhere;
	font-size: calc(15 * var(--u));
	font-weight: var(--font-weight-bold);
	line-height: calc(21.87 * var(--u));
	text-decoration: none;
	text-transform: uppercase;
	color: var(--color-ink);
}

.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .tiere-cart-detail--author {
	order: 3;
	margin-top: calc(6.56 * var(--u));
}

/*
 * Wiersz ilości (mobile): etykieta "Ilość" na x 132.65 / y 285.27, szary
 * kwadrat minus 27.55x27.55 od x 165.45, liczba w polu 30.18px, czerwony
 * kwadrat plus od x 223.18. Etykietę wstawia pseudo-element; jej tekst
 * przychodzi z PHP w zmiennej CSS (tiere_cart_css_vars() w inc/cart.php),
 * a pole ilości ma własny opis dla czytników ekranu.
 */
.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity {
	order: 4;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 0;
	margin: calc(22.31 * var(--u)) 0 0;
	padding: 0;
}

.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity::before {
	content: var(--tiere-cart-quantity-label, "");
	flex: none;
	width: calc(32.8 * var(--u));
	margin: calc(5.68 * var(--u)) 0 0 calc(1.65 * var(--u));
	font-size: calc(8 * var(--u));
	line-height: calc(11.37 * var(--u));
}

.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector {
	display: flex;
	flex: none;
	width: auto;
	margin: 0;
	border: 0;
	border-radius: var(--radius-0);
}

.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	flex: none;
	width: calc(27.55 * var(--u));
	min-width: 0;
	height: calc(27.55 * var(--u));
	padding: 0 0 calc(2 * var(--u));
	border-radius: var(--radius-0);
	background-color: var(--color-panel-gray);
	color: var(--color-ink);
	font-size: calc(8 * var(--u));
	line-height: 1;
	opacity: 1;
}

.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button--plus {
	background-color: var(--color-brand-red);
}

/* Przycisk nieaktywny (minus przy 1 szt., plus przy limicie) wygląda jak
   aktywny - tak jest w projekcie (minus przy 1 szt.); różni go tylko kursor. */
.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled {
	color: var(--color-ink);
	cursor: default;
	opacity: 1;
}

/*
 * Pole ilości: wpisywany tekst ma na mobile co najmniej 16px (ustalona
 * zasada dla pól formularzy - mniejszy tekst powoduje przybliżenie strony
 * na iPhonie); w Figmie 8px. Od 900px rozmiar z projektu (18px).
 */
.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	flex: none;
	width: calc(30.18 * var(--u));
	min-width: 0;
	box-sizing: border-box;
	height: calc(27.55 * var(--u));
	/* Liczba stoi w wierszu tekstu "Ilość", czyli nieco powyżej środka kwadratów. */
	padding: 0 0 calc(4.8 * var(--u));
	font-size: max(16px, calc(8 * var(--u)));
	line-height: 1;
	color: var(--color-ink);
}

/*
 * Usuwanie: zamiast ikony kosza szary krzyżyk w prawym górnym rogu pozycji
 * (mobile: ramiona 7.4px, środek w punkcie 321.6,205.2). Przycisk jest
 * większy niż sam krzyżyk, żeby dało się w niego trafić palcem.
 */
.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
	display: block;
	position: absolute;
	top: calc(25.7 * var(--u));
	right: calc(4.4 * var(--u));
	width: calc(28 * var(--u));
	height: calc(28 * var(--u));
	margin: 0;
	padding: 0;
	color: var(--color-muted);
}

.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link[hidden] {
	display: none;
}

.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link svg {
	display: none;
}

.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__remove-link::before,
.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__remove-link::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(7.4 * var(--u));
	height: 1px;
	background-color: currentColor;
	transform: translate(-50%, -50%) rotate(45deg);
}

.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__remove-link::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__remove-link:hover,
.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__remove-link:focus-visible {
	color: var(--color-ink);
}

/*
 * Kwota pozycji: w wierszu ilości, do prawej (mobile: y 285.27, prawa
 * krawędź 335.61). Osobna komórka tabeli, nałożona na kolumnę tekstową.
 * Jest zakotwiczona do dołu pozycji, tak jak wiersz ilości (ten ma stały
 * odstęp od dolnej linii), więc zostaje w jednej linii z "Ilość" także
 * wtedy, gdy długa nazwa produktu zajmie kilka wierszy i pozycja urośnie.
 */
.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
	grid-column: 2;
	grid-row: 1;
	position: relative;
	z-index: 2;
	align-self: end;
	justify-self: end;
	margin: 0 calc(4.39 * var(--u)) calc(59.36 * var(--u)) 0;
	font-size: calc(8 * var(--u));
	line-height: calc(11.37 * var(--u));
	text-align: right;
	color: var(--color-ink);
}

/*
 * Desktop: flakon 152x322 w punkcie 147,558 (wiersz od x 80, linia na
 * y 510.5); teksty od x 365 - etykieta
 * 22/26 na y 589, nazwa 44/50 Bold na 630 (x 362), podpis 18/26 na 695;
 * "Ilość" na 785, kwadraty 63x63 od x 440 i 572 (y 772), liczba w polu
 * 69px; kwota pozycji 18/26 na y 785 z prawą krawędzią 836; krzyżyk
 * 12x12 ze środkiem w punkcie 823,602.
 */
@media (min-width: 900px) {
	.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
		padding-top: calc(47.5 * var(--u));
	}

	.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img {
		width: calc(152 * var(--u));
		height: calc(322 * var(--u));
		margin: 0 0 0 calc(67 * var(--u));
	}

	.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
		padding: calc(78 * var(--u)) 0 calc(114 * var(--u));
	}

	.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .tiere-cart-detail {
		font-size: calc(18 * var(--u));
		line-height: calc(26 * var(--u));
	}

	.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .tiere-cart-detail--label {
		font-size: calc(22 * var(--u));
	}

	.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
		max-width: 100%;
		margin: calc(15 * var(--u)) 0 0 calc(-3 * var(--u));
		font-size: calc(44 * var(--u));
		line-height: calc(50 * var(--u));
	}

	.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .tiere-cart-detail--author {
		margin-top: calc(15 * var(--u));
	}

	.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity {
		margin-top: calc(51 * var(--u));
	}

	.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity::before {
		width: calc(75 * var(--u));
		margin: calc(13 * var(--u)) 0 0;
		font-size: calc(18 * var(--u));
		line-height: calc(26 * var(--u));
	}

	.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
		width: calc(63 * var(--u));
		height: calc(63 * var(--u));
		padding-bottom: calc(5 * var(--u));
		font-size: calc(18 * var(--u));
	}

	.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
		width: calc(69 * var(--u));
		height: calc(63 * var(--u));
		padding-bottom: calc(11 * var(--u));
		font-size: calc(18 * var(--u));
	}

	.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
		top: calc(71 * var(--u));
		right: calc(-14 * var(--u));
		width: calc(40 * var(--u));
		height: calc(40 * var(--u));
	}

	.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__remove-link::before,
	.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__remove-link::after {
		width: calc(17 * var(--u));
	}

	.cart-page .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
		margin: 0 calc(-7 * var(--u)) calc(138 * var(--u)) 0;
		font-size: calc(18 * var(--u));
		line-height: calc(26 * var(--u));
	}
}

/*
 * ---------------------------------------------------------------------------
 * Podsumowanie zamówienia (prawa kolumna). Znaczniki bloku:
 *   h2.wc-block-cart__totals-title
 *   .wc-block-components-totals-wrapper > .wc-block-components-totals-item
 *       > __label, __value, __description      (po jednym na wiersz)
 *   .wc-block-cart__submit > a.wc-block-cart__submit-button
 * Wiersze: wartość przedmiotów, dostawa (z nazwą wybranej metody), łącznie.
 * Etykiety ustawia inc/cart.php; kwoty i nazwa metody pochodzą z WooCommerce.
 *
 * Mobile (Figma): nagłówek 8/13.6 na y 381, wiersze 8/13.6 na 411, 432.45
 * i 454.95 (etykiety od x 20, kwoty do x 335.69), przycisk 321x38 na y 497.
 * ---------------------------------------------------------------------------
 */
.cart-page .wc-block-cart .wc-block-components-sidebar .wc-block-cart__totals-title {
	display: block;
	margin: 0;
	padding: 0 calc(1 * var(--u));
	border: 0;
	font-size: calc(8 * var(--u));
	font-weight: var(--font-weight-regular);
	line-height: calc(13.6 * var(--u));
	text-align: left;
	text-transform: uppercase;
	color: var(--color-ink);
}

.cart-page .wc-block-cart .wc-block-components-sidebar .wc-block-components-totals-wrapper {
	margin: calc(8.9 * var(--u)) 0 0;
	padding: 0;
	border: 0;
}

/* Natywne odstępy i linie kontenerów podsumowania są zerowane - odstępy
   między wierszami wynikają wyłącznie z reguł poniżej. */
.cart-page .wc-block-cart .wc-block-components-sidebar .wp-block-woocommerce-cart-order-summary-block {
	margin: 0;
	padding: 0;
	border: 0;
}

.cart-page .wc-block-cart .wc-block-components-sidebar .wp-block-woocommerce-cart-order-summary-totals-block {
	margin: calc(16.4 * var(--u)) 0 0;
	padding: 0;
	border: 0;
}

/* Wiersz "Wartość przedmiotów" (assets/js/cart-summary.js) siedzi w
   kontenerze miejsca rozszerzeń, który sam jest już wierszem podsumowania. */
.cart-page .wc-block-cart .wc-block-components-sidebar .tiere-cart-items-value.wc-block-components-totals-wrapper {
	margin: 0;
}

.cart-page .wc-block-cart .wc-block-components-sidebar .wp-block-woocommerce-cart-order-summary-totals-block > .wc-block-components-totals-wrapper {
	margin-top: calc(7.85 * var(--u));
}

.cart-page .wc-block-cart .wc-block-components-sidebar .wp-block-woocommerce-cart-order-summary-totals-block > .wc-block-components-totals-wrapper:first-child {
	margin-top: 0;
}

/*
 * Wiersz: etykieta po lewej, kwota po prawej. Opis wiersza (nazwa metody
 * dostawy) stoi w tej samej linii za etykietą, mniejszym, szarym tekstem -
 * tej informacji nie ma w projekcie, a w osobnej linii przesuwałaby
 * "Łącznie" i przycisk względem Figmy.
 */
.cart-page .wc-block-cart .wc-block-components-sidebar .wc-block-components-totals-item {
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
	margin: 0;
	padding: 0 calc(4.31 * var(--u)) 0 calc(1 * var(--u));
	font-size: calc(8 * var(--u));
	line-height: calc(13.6 * var(--u));
	color: var(--color-ink);
}

.cart-page .wc-block-cart .wc-block-components-sidebar .wc-block-components-totals-item .wc-block-components-totals-item__label {
	flex: none;
	order: 1;
	font-size: inherit;
	font-weight: var(--font-weight-regular);
	line-height: inherit;
}

.cart-page .wc-block-cart .wc-block-components-sidebar .wc-block-components-totals-item .wc-block-components-totals-item__description {
	flex: 1 1 auto;
	order: 2;
	width: auto;
	min-width: 0;
	margin: 0 calc(5 * var(--u));
	font-size: inherit;
	line-height: inherit;
	color: var(--color-muted);
}

.cart-page .wc-block-cart .wc-block-components-sidebar .wc-block-components-totals-item .wc-block-components-totals-item__value {
	flex: none;
	order: 3;
	margin-left: auto;
	font-size: inherit;
	font-weight: var(--font-weight-regular);
	line-height: inherit;
	text-align: right;
}

/* Blok pogrubia kwotę zerowej dostawy i pisze ją wersalikami; w projekcie
   jest zwykłym tekstem jak pozostałe kwoty. */
.cart-page .wc-block-cart .wc-block-components-sidebar .wc-block-components-totals-item__value strong {
	font-weight: inherit;
	text-transform: none;
}

/* Nazwy metody dostawy w koszyku nie pokazujemy: klient jeszcze jej nie
   wybrał (robi to w kasie). Kwota dostawy zostaje, liczy ją WooCommerce. */
.cart-page .wc-block-cart .wc-block-components-sidebar .wc-block-components-totals-shipping__via {
	display: none;
}

/* "Łącznie": ten sam rozmiar co pozostałe wiersze, pogrubione. */
.cart-page .wc-block-cart .wc-block-components-sidebar .wc-block-components-totals-footer-item {
	margin: 0;
}

.cart-page .wc-block-cart .wc-block-components-sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.cart-page .wc-block-cart .wc-block-components-sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: inherit;
	font-weight: var(--font-weight-bold);
}

.cart-page .wc-block-cart .wc-block-components-sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__value .wc-block-components-formatted-money-amount {
	font-size: inherit;
	font-weight: inherit;
}

/* Dopisek "Zawiera ... w podatkach" - ukryty zgodnie z ustaleniem (ceny
   w sklepie są cenami brutto). */
.cart-page .wc-block-cart .wc-block-components-sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-tax {
	display: none;
}

/* Przycisk "Przejdź do kasy" = przycisk bazowy projektu (czerwony, po
   najechaniu ciemny), mobile 321x38. Sam link i jego adres daje blok. */
.cart-page .wc-block-cart .wc-block-components-sidebar .wc-block-cart__submit {
	margin: calc(28.45 * var(--u)) 0 0;
}

.cart-page .wc-block-cart .wc-block-cart__submit-button.wc-block-components-button:not(.is-link) {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: calc(38 * var(--u));
	margin: 0;
	padding: 0 calc(7.45 * var(--u));
	border: 0;
	border-radius: var(--radius-0);
	background-color: var(--color-brand-red);
	color: var(--color-white);
	font-size: calc(9.646 * var(--u));
	font-weight: var(--font-weight-medium);
	line-height: calc(16.69 * var(--u));
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease;
}

.cart-page .wc-block-cart .wc-block-cart__submit-button.wc-block-components-button:not(.is-link):hover,
.cart-page .wc-block-cart .wc-block-cart__submit-button.wc-block-components-button:not(.is-link):focus-visible {
	background-color: var(--color-ink);
	color: var(--color-white);
}

/*
 * Na wąskich ekranach WooCommerce przykleja kopię przycisku do dołu okna,
 * gdy właściwy przycisk jest poza ekranem. Zachowanie zostaje; pasek
 * dostaje tylko tło strony zamiast białego.
 */
.cart-page .wc-block-cart .wc-block-cart__submit-container--sticky {
	background-color: var(--color-cream);
}

/*
 * Desktop: nagłówek 22/26 na y 589, wiersze 18/26 na 695, 736 i 779
 * (x 1056-1604), przycisk 548x62 na y 846, przesunięty 3px w lewo względem
 * kolumny (x 1053) - tak jak w projekcie.
 */
@media (min-width: 900px) {
	.cart-page .wc-block-cart .wc-block-components-sidebar .wc-block-cart__totals-title {
		padding: 0;
		font-size: calc(22 * var(--u));
		line-height: calc(26 * var(--u));
	}

	.cart-page .wc-block-cart .wc-block-components-sidebar .wc-block-components-totals-wrapper {
		margin-top: calc(17 * var(--u));
	}

	.cart-page .wc-block-cart .wc-block-components-sidebar .wp-block-woocommerce-cart-order-summary-totals-block {
		margin-top: calc(80 * var(--u));
	}

	.cart-page .wc-block-cart .wc-block-components-sidebar .wp-block-woocommerce-cart-order-summary-totals-block > .wc-block-components-totals-wrapper {
		margin-top: calc(15 * var(--u));
	}

	.cart-page .wc-block-cart .wc-block-components-sidebar .wp-block-woocommerce-cart-order-summary-totals-block > .wc-block-components-totals-wrapper:first-child {
		margin-top: 0;
	}

	.cart-page .wc-block-cart .wc-block-components-sidebar .wc-block-components-totals-item {
		padding: 0;
		font-size: calc(18 * var(--u));
		line-height: calc(26 * var(--u));
	}

	/* Mniejszy tekst z interlinią 1, żeby nie podnosił wysokości wiersza. */
	.cart-page .wc-block-cart .wc-block-components-sidebar .wc-block-components-totals-item .wc-block-components-totals-item__description {
		margin: 0 calc(12 * var(--u));
		font-size: calc(14 * var(--u));
		line-height: 1;
	}

	.cart-page .wc-block-cart .wc-block-components-sidebar .wc-block-cart__submit {
		width: calc(548 * var(--u));
		margin: calc(41 * var(--u)) 0 0 calc(-3 * var(--u));
	}

	.cart-page .wc-block-cart .wc-block-cart__submit-button.wc-block-components-button:not(.is-link) {
		min-height: calc(62.32 * var(--u));
		padding: 0 calc(20.39 * var(--u));
		color: var(--color-cream);
		font-size: calc(20 * var(--u));
		line-height: calc(45.68 * var(--u));
	}

	.cart-page .wc-block-cart .wc-block-cart__submit-button.wc-block-components-button:not(.is-link):hover,
	.cart-page .wc-block-cart .wc-block-cart__submit-button.wc-block-components-button:not(.is-link):focus-visible {
		color: var(--color-cream);
	}
}

/*
 * Pole "Kod rabatowy" (assets/js/cart-coupon.js) między nagłówkiem
 * podsumowania a sumami: etykieta jak w polach formularzy koszyka, pole
 * z dolną linią i przycisk projektu w jednym wierszu. Wpisywany tekst ma na
 * mobile co najmniej 16px (zasada dla pól formularzy - bez przybliżania na
 * iPhonie). Komunikat błędu w ciemniejszej czerwieni - jasna czerwień
 * marki ma za mały kontrast dla drobnego tekstu na kremowym tle.
 */
.cart-page .wc-block-cart .wc-block-components-sidebar .tiere-cart-coupon {
	margin: calc(16.4 * var(--u)) 0 0;
	padding: 0 calc(1 * var(--u));
}

.cart-page .wc-block-cart .wc-block-components-sidebar .tiere-cart-coupon + .wp-block-woocommerce-cart-order-summary-totals-block {
	margin-top: calc(22 * var(--u));
}

.tiere-cart-coupon__label {
	display: block;
	font-size: calc(8 * var(--u));
	line-height: calc(13.6 * var(--u));
	color: var(--color-ink);
}

.tiere-cart-coupon__row {
	display: flex;
	align-items: flex-end;
	gap: calc(8 * var(--u));
	margin-top: calc(4 * var(--u));
}

.tiere-cart-coupon__input {
	flex: 1 1 auto;
	box-sizing: border-box;
	min-width: 0;
	height: calc(30 * var(--u));
	margin: 0;
	padding: 0;
	border: 0;
	border-bottom: calc(0.5 * var(--u)) solid var(--color-muted);
	border-radius: var(--radius-0);
	outline: 0;
	background: transparent;
	font: inherit;
	font-size: max(16px, calc(8 * var(--u)));
	color: var(--color-ink);
	text-transform: uppercase;
}

.tiere-cart-coupon__input:focus-visible {
	border-bottom-color: var(--color-ink);
}

.tiere-cart-coupon__input[aria-invalid="true"] {
	border-bottom-color: var(--color-red-dark);
}

.tiere-cart-coupon__button {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	min-width: calc(80 * var(--u));
	min-height: calc(30 * var(--u));
	margin: 0;
	padding: 0 calc(10 * var(--u));
	border: 0;
	border-radius: var(--radius-0);
	background-color: var(--color-brand-red);
	color: var(--color-white);
	font: inherit;
	font-size: calc(9.646 * var(--u));
	font-weight: var(--font-weight-medium);
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.tiere-cart-coupon__button:hover,
.tiere-cart-coupon__button:focus-visible {
	background-color: var(--color-ink);
}

.tiere-cart-coupon__button:focus-visible {
	outline: 2px solid var(--color-ink);
	outline-offset: 2px;
}

.tiere-cart-coupon__button:disabled {
	cursor: progress;
	opacity: 0.7;
}

.tiere-cart-coupon__message {
	margin: calc(6 * var(--u)) 0 0;
	font-size: calc(8 * var(--u));
	line-height: calc(13.6 * var(--u));
	color: var(--color-ink);
}

.tiere-cart-coupon__message--error {
	color: var(--color-red-dark);
}

/* Desktop: skala wierszy podsumowania (18/26), przycisk i pole 46px. */
@media (min-width: 900px) {
	.cart-page .wc-block-cart .wc-block-components-sidebar .tiere-cart-coupon {
		margin-top: calc(34 * var(--u));
		padding: 0;
	}

	.cart-page .wc-block-cart .wc-block-components-sidebar .tiere-cart-coupon + .wp-block-woocommerce-cart-order-summary-totals-block {
		margin-top: calc(48 * var(--u));
	}

	.tiere-cart-coupon__label {
		font-size: calc(18 * var(--u));
		line-height: calc(26 * var(--u));
	}

	.tiere-cart-coupon__row {
		gap: calc(16 * var(--u));
		margin-top: calc(8 * var(--u));
	}

	.tiere-cart-coupon__input {
		height: calc(46 * var(--u));
		border-bottom-width: 1px;
		font-size: calc(18 * var(--u));
	}

	.tiere-cart-coupon__button {
		min-width: calc(160 * var(--u));
		min-height: calc(46 * var(--u));
		padding: 0 calc(20 * var(--u));
		font-size: calc(16 * var(--u));
	}

	.tiere-cart-coupon__message {
		margin-top: calc(10 * var(--u));
		font-size: calc(14 * var(--u));
		line-height: calc(20 * var(--u));
	}
}

/*
 * ---------------------------------------------------------------------------
 * Logowanie w koszyku (tylko niezalogowani): zachęta nad listą pozycji
 * (cart-login-prompt.php) i sekcja "Moje konto" pod koszykiem
 * (cart-account.php), domyślnie zwinięta.
 *
 * Oba elementy mają sens tylko przy niepustym koszyku, a pusty koszyk
 * pojawia się też bez przeładowania strony (usunięcie ostatniej pozycji),
 * więc widoczność zależy od obecności wypełnionego bloku (.wc-block-cart).
 * ---------------------------------------------------------------------------
 */
.cart-page:not(:has(.wc-block-cart)) .cart-page__login-prompt,
.cart-page:not(:has(.wc-block-cart)) .cart-account {
	display: none;
}

/*
 * Zachęta. Mobile: 8/10, wyśrodkowana, na y 124 - czyli 41px nad linią
 * otwierającą listę (165). Stoi w odstępie między tytułem a listą, którego
 * nie zmienia (ujemny margines górny + dolny dopełniają do tych 41px).
 */
.cart-page__login-prompt {
	margin: calc(-41 * var(--u)) 0 calc(31 * var(--u));
	padding: 0 calc(19 * var(--u));
	font-size: calc(8 * var(--u));
	line-height: calc(10 * var(--u));
	text-align: center;
	color: var(--color-ink);
}

/*
 * Komunikat dla zalogowanego jest dłuższy od zachęty (333 z 360 na mobile),
 * więc dostaje węższe marginesy boczne, żeby zostać w jednej linii i nie
 * przesuwać listy. Na desktopie obowiązuje wspólna reguła niżej.
 */
.cart-page__login-prompt--info {
	padding-inline: calc(10 * var(--u));
}

.cart-page__login-toggle,
.cart-page__login-strong {
	font-weight: var(--font-weight-bold);
}

.cart-page__login-toggle:hover,
.cart-page__login-toggle:focus-visible,
a.cart-page__login-strong:hover,
a.cart-page__login-strong:focus-visible {
	text-decoration: underline;
}

/*
 * Sekcja "Moje konto". Mobile: tytuł 13/14.29 na y 575 (40px pod przyciskiem
 * "Przejdź do kasy"), pola od y 642, przycisk 321x38 na y 817, linki od
 * y 923 jeden pod drugim. Odstęp do stopki daje dolny padding .cart-page.
 */
.cart-account {
	margin-top: calc(40 * var(--u));
	color: var(--color-ink);
}

.cart-account[hidden] {
	display: none;
}

.cart-account__title {
	margin: 0 0 0 calc(17 * var(--u));
	font-size: calc(13 * var(--u));
	font-weight: var(--font-weight-bold);
	line-height: calc(14.29 * var(--u));
	text-transform: uppercase;
}

.cart-account__form,
.cart-account__links,
.cart-account__notices {
	margin: 0 calc(19 * var(--u));
}

.cart-account__form {
	margin-top: calc(52.71 * var(--u));
}

/* Komunikat błędu logowania (klasyczna lista komunikatów WooCommerce). */
.cart-account__notices {
	margin-top: calc(16 * var(--u));
}

.cart-account__notices + .cart-account__form {
	margin-top: calc(16 * var(--u));
}

.cart-account .cart-account__notices .woocommerce-error,
.cart-account .cart-account__notices .woocommerce-message,
.cart-account .cart-account__notices .woocommerce-info {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	list-style: none;
	font-size: calc(8 * var(--u));
	line-height: calc(13.6 * var(--u));
	color: var(--color-red-dark);
}

.cart-account .cart-account__notices .woocommerce-error::before,
.cart-account .cart-account__notices .woocommerce-message::before,
.cart-account .cart-account__notices .woocommerce-info::before {
	content: none;
}

.cart-account .cart-account__notices a {
	text-decoration: underline;
}

/*
 * Pola: etykieta 8/26, pod nią pole z samą dolną linią (szara, 0.5px na
 * mobile). Tekst podpowiedzi jest jasnoszary (#d9d9d9) w rozmiarze z
 * projektu; wpisywany tekst ma na mobile co najmniej 16px (ustalona zasada
 * dla pól formularzy - inaczej iPhone przybliża stronę po dotknięciu pola).
 * Odstępy mobile wprost z Figmy: pierwsze pole ma podpowiedź tuż pod
 * etykietą, drugie 11px niżej.
 */
.cart-account__field {
	margin: 0;
}

.cart-account__field + .cart-account__field {
	margin-top: calc(18.5 * var(--u));
}

.cart-account__field label {
	display: block;
	font-size: calc(8 * var(--u));
	line-height: calc(26 * var(--u));
}

.cart-account__field input {
	display: block;
	box-sizing: content-box;
	width: 100%;
	height: calc(26 * var(--u));
	margin: 0;
	padding: 0 0 calc(5 * var(--u));
	border: 0;
	border-bottom: calc(0.5 * var(--u)) solid var(--color-muted);
	border-radius: var(--radius-0);
	outline: 0;
	background: transparent;
	font: inherit;
	font-size: max(16px, calc(8 * var(--u)));
	line-height: calc(26 * var(--u));
	color: var(--color-ink);
}

.cart-account__field + .cart-account__field input {
	margin-top: calc(11 * var(--u));
}

.cart-account__field input::placeholder {
	font-size: calc(8 * var(--u));
	color: var(--color-panel-gray);
	opacity: 1;
}

.cart-account__field input:focus-visible {
	border-bottom-color: var(--color-ink);
}

/* Autouzupełnianie przeglądarki nie zamalowuje pola własnym tłem. */
.cart-account__field input:-webkit-autofill {
	-webkit-text-fill-color: var(--color-ink);
	box-shadow: 0 0 0 1000px var(--color-cream) inset;
}

/* Przyciski: bazowy przycisk projektu na całą szerokość kolumny (321x38);
   drugi ("Załóż konto", gdy zostanie podłączony) stoi 15px pod pierwszym. */
.cart-account__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: calc(38 * var(--u));
	margin: calc(30.5 * var(--u)) 0 0;
	padding: 0 calc(7.45 * var(--u));
	border-radius: var(--radius-0);
	background-color: var(--color-brand-red);
	color: var(--color-white);
	font-size: calc(9.646 * var(--u));
	font-weight: var(--font-weight-medium);
	line-height: calc(16.69 * var(--u));
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease;
}

.cart-account__button + .cart-account__button {
	margin-top: calc(15 * var(--u));
}

.cart-account__button:hover,
.cart-account__button:focus-visible {
	background-color: var(--color-ink);
	color: var(--color-white);
}

/* Linki pod przyciskami: 8/26, każdy z szewronem; mobile jeden pod drugim. */
.cart-account__links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-top: calc(15 * var(--u));
}

.cart-account__link {
	display: inline-flex;
	align-items: center;
	font-size: calc(8 * var(--u));
	line-height: calc(26 * var(--u));
	color: var(--color-ink);
}

.cart-account__link::after {
	content: "";
	flex: none;
	width: calc(3.5 * var(--u));
	height: calc(3.5 * var(--u));
	margin-left: calc(10 * var(--u));
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(45deg);
}

.cart-account__link:hover,
.cart-account__link:focus-visible {
	text-decoration: underline;
}

/*
 * Desktop: zachęta 18/26 na y 420 (90px nad linią 510). Sekcja: tytuł
 * 44/50 w punkcie 77,1068, pola w kolumnie x 80-824 (etykiety na 1190
 * i 1308, linie na 1258 i 1376), przycisk 744x62 w punkcie 77,1440, linki
 * 18/26 na y 1614 obok siebie (x 80 i 401).
 */
@media (min-width: 900px) {
	.cart-page__login-prompt {
		margin: calc(-90 * var(--u)) 0 calc(64 * var(--u));
		padding: 0 calc(80 * var(--u));
		font-size: calc(18 * var(--u));
		line-height: calc(26 * var(--u));
	}

	.cart-account {
		margin-top: calc(118 * var(--u));
	}

	.cart-account__title {
		margin-left: calc(77 * var(--u));
		font-size: calc(44 * var(--u));
		line-height: calc(50 * var(--u));
	}

	.cart-account__form,
	.cart-account__links,
	.cart-account__notices {
		width: calc(744 * var(--u));
		margin-right: 0;
		margin-left: calc(80 * var(--u));
	}

	.cart-account__form {
		margin-top: calc(72 * var(--u));
	}

	.cart-account__notices,
	.cart-account__notices + .cart-account__form {
		margin-top: calc(30 * var(--u));
	}

	.cart-account .cart-account__notices .woocommerce-error,
	.cart-account .cart-account__notices .woocommerce-message,
	.cart-account .cart-account__notices .woocommerce-info {
		font-size: calc(18 * var(--u));
		line-height: calc(26 * var(--u));
	}

	.cart-account__field + .cart-account__field {
		margin-top: calc(49 * var(--u));
	}

	.cart-account__field label {
		font-size: calc(18 * var(--u));
	}

	.cart-account__field input,
	.cart-account__field + .cart-account__field input {
		margin-top: calc(11 * var(--u));
		border-bottom-width: 1px;
		font-size: calc(18 * var(--u));
	}

	.cart-account__field input::placeholder {
		font-size: calc(18 * var(--u));
	}

	.cart-account__button {
		min-height: calc(62.32 * var(--u));
		margin: calc(63 * var(--u)) 0 0 calc(-3 * var(--u));
		padding: 0 calc(20.39 * var(--u));
		color: var(--color-cream);
		font-size: calc(20 * var(--u));
		line-height: calc(45.68 * var(--u));
	}

	.cart-account__button + .cart-account__button {
		margin-top: calc(24.68 * var(--u));
	}

	.cart-account__button:hover,
	.cart-account__button:focus-visible {
		color: var(--color-cream);
	}

	.cart-account__links {
		flex-direction: row;
		gap: calc(65.5 * var(--u));
		margin-top: calc(24.68 * var(--u));
	}

	.cart-account__link {
		font-size: calc(18 * var(--u));
	}

	.cart-account__link::after {
		width: calc(8.3 * var(--u));
		height: calc(8.3 * var(--u));
		margin-left: calc(16 * var(--u));
	}
}

/*
 * ---------------------------------------------------------------------------
 * Stany koszyka poza projektem Figmy: pusty koszyk i komunikaty bloku.
 * Treść i logika są standardowe (WooCommerce); tu jest tylko wygląd
 * w typografii i kolorach strony.
 * ---------------------------------------------------------------------------
 */

/*
 * Pusty koszyk: standardowy nagłówek bloku ("Twój koszyk jest obecnie
 * pusty!") jako zwykłe zdanie pod tytułem strony, do lewej jak tytuł,
 * bez domyślnej ikony WooCommerce. Stoi w miejscu zachęty do logowania
 * (mobile y 124, desktop y 420), która przy pustym koszyku jest ukryta.
 */
.cart-page .wp-block-woocommerce-empty-cart-block {
	margin: calc(-41 * var(--u)) calc(19 * var(--u)) 0;
}

.cart-page .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
	margin: 0;
	padding: 0;
	font-size: calc(10 * var(--u));
	font-weight: var(--font-weight-regular);
	line-height: calc(16 * var(--u));
	text-align: left;
	color: var(--color-ink);
}

.cart-page .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	content: none;
}

/*
 * Komunikaty bloku koszyka (błędy i informacje ze sklepu, np. zmiana
 * dostępności produktu). Pojawiają się nad listą pozycji i przesuwają ją
 * w dół. Zamiast kolorowych, zaokrąglonych ramek WooCommerce: przezroczyste
 * tło, ostra ramka 1px, tekst strony; błąd wyróżnia ciemnoczerwona ramka.
 * Ten sam wygląd mają krótkie powiadomienia w rogu ekranu (snackbar).
 */
.cart-page .wc-block-components-notices:has(.wc-block-components-notice-banner) {
	margin: 0 calc(19 * var(--u)) calc(16 * var(--u));
}

.cart-page .wc-block-components-notice-banner {
	margin: 0 0 calc(8 * var(--u));
	padding: calc(8 * var(--u)) calc(10 * var(--u));
	border: 1px solid var(--color-ink);
	border-radius: var(--radius-0);
	background-color: var(--color-cream);
	box-shadow: none;
	font-size: calc(10 * var(--u));
	line-height: calc(14 * var(--u));
	color: var(--color-ink);
}

.cart-page .wc-block-components-notice-banner.is-error {
	border-color: var(--color-red-dark);
}

/* Powiadomienie w rogu ekranu ma w WooCommerce przezroczystą ramkę. */
.cart-page .wc-block-components-notice-snackbar.wc-block-components-notice-banner {
	border-color: var(--color-ink);
}

.cart-page .wc-block-components-notice-banner > svg {
	border-radius: var(--radius-0);
	background-color: var(--color-ink);
}

.cart-page .wc-block-components-notice-banner.is-error > svg {
	background-color: var(--color-red-dark);
}

.cart-page .wc-block-components-notice-banner .wc-block-components-notice-banner__content {
	font-size: inherit;
	line-height: inherit;
}

.cart-page .wc-block-components-notice-banner a {
	color: inherit;
	text-decoration: underline;
}

@media (min-width: 900px) {
	.cart-page .wp-block-woocommerce-empty-cart-block {
		margin: calc(-90 * var(--u)) 0 0 calc(80 * var(--u));
	}

	.cart-page .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
		font-size: calc(18 * var(--u));
		line-height: calc(26 * var(--u));
	}

	/* Szerokość kompozycji: od lewej krawędzi listy do prawej krawędzi
	   podsumowania (x 80-1604). */
	.cart-page .wc-block-components-notices:has(.wc-block-components-notice-banner) {
		width: calc(1524 * var(--u));
		margin: 0 0 calc(30 * var(--u)) calc(80 * var(--u));
	}

	.cart-page .wc-block-components-notice-banner {
		margin-bottom: calc(12 * var(--u));
		padding: calc(16 * var(--u)) calc(20 * var(--u));
		font-size: calc(18 * var(--u));
		line-height: calc(26 * var(--u));
	}
}

/*
 * Kasa: etykieta "TIERE PARFUM ..." dotyczy tylko koszyka. Blok kasy
 * dostaje te same wpisy metadanych, więc tam ten jeden jest ukryty i jej
 * podsumowanie wygląda jak dotąd (nazwa + podpis "by ...").
 */
.wp-block-woocommerce-checkout .tiere-cart-detail--label {
	display: none;
}