/*
 * cart.css — mini-koszyk, koszyk, kasa, powiadomienia sklepu
 *
 * Część arkuszy theme'u rozbitych per feature. Kolejność ładowania i lista
 * plików: functions.php → oliwa_enqueue_assets(). Wszystkie wartości pochodzą
 * z assets/css/tokens.css.
 */

/* Mini-koszyk w nagłówku — kwadrat 44px, jak pozostałe ikony akcji. */
.wc-block-mini-cart__button {
	align-items: center;
	border-radius: var(--radius-control);
	color: var(--wp--preset--color--primary);
	display: flex;
	height: var(--control-h-md);
	justify-content: center;
	padding: 0;
	transition: background-color var(--duration-base) var(--easing-standard);
	width: var(--control-h-md);
}

.wc-block-mini-cart__button:hover {
	background-color: var(--wp--preset--color--base-alt);
}

.wc-block-mini-cart__icon {
	height: var(--icon-lg);
	width: var(--icon-lg);
}

/* Licznik: złota pigułka z czytelną liczbą, wysunięta na krawędź ikony.
   Woo renderuje ją jako kółko bez wymiarów, więc bez tego liczba znika. */
.wc-block-mini-cart__quantity-badge {
	position: relative;
}

.wc-block-mini-cart__badge {
	align-items: center;
	background: var(--wp--preset--color--accent);
	border: 0;
	border-color: var(--wp--preset--color--accent);
	border-radius: var(--radius-pill);
	/* Woo hydratuje kolor tekstu inline z productCountColor — ten sam odcień
	   co tło, więc liczba znika. Nadpisanie musi mieć !important. */
	color: var(--wp--preset--color--primary-dark) !important;
	display: flex;
	font-family: var(--font-body);
	font-size: var(--text-2xs);
	font-weight: 600;
	height: var(--icon-md);
	justify-content: center;
	line-height: 1;
	min-width: var(--icon-md);
	padding: 0 var(--space-1);
	position: absolute;
	right: calc(-1 * var(--space-2));
	top: calc(-1 * var(--space-1));
}

/* -------------------------------------------------------------------------
   Mini-koszyk — pełny ekran na telefonie (jak menu spod hamburgera),
   szuflada 440 px na desktopie. Projekt: „Oliwa z Hiszpanii — koszyk sheet",
   z jednym odstępstwem: na telefonie zamiast arkusza od dołu jest pełny
   ekran, bo arkusz udawał okno dialogowe.

   Cała zawartość szuflady powstaje po stronie JS WooCommerce (blok
   mini-cart-contents hydratuje się w przeglądarce), więc jedynym narzędziem
   jest tu arkusz — markupu nie da się przestawić w szablonie.
   ---------------------------------------------------------------------- */

.wc-block-mini-cart__drawer.wc-block-components-drawer {
	background: var(--wp--preset--color--base);
	box-shadow: var(--shadow-raised);
	/* Uwaga: `wc-block-mini-cart__drawer` i `wc-block-components-drawer`
	   siedzą na TYM SAMYM elemencie — selektor musi być złożony, wersja
	   z odstępem nie trafia w nic.

	   Woo liczy szerokość szuflady z własnej zmiennej `--drawer-width`
	   i ustawia ją regułą o tej samej specyficzności co nasza, tyle że
	   ustawianej na `:root`. Podmiana zmiennej na samej szufladzie jest
	   bliżej elementu, więc wygrywa bez `!important`. */
	--drawer-width: var(--drawer-w);
}

.wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-contents {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Nagłówek: tytuł krojem tytułowym, licznik pozycji w drugim wierszu.
   Woo składa oba w jednym <h2>, stąd kolumna zamiast domyślnego wiersza. */
.wc-block-mini-cart__title {
	align-items: flex-start;
	border-bottom: 1px solid var(--hairline);
	color: var(--text-heading);
	display: flex;
	flex: none;
	flex-direction: column;
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: var(--weight-light);
	gap: var(--space-1);
	letter-spacing: 0;
	line-height: var(--leading-snug);
	margin: 0;
	/* Prawy padding robi miejsce na krzyżyk, który Woo stawia absolutnie —
	   bez tego długi tytuł wchodzi pod ikonę zamykania. */
	padding: var(--space-5) calc(var(--control-h-md) + var(--space-6)) var(--space-5) var(--space-6);
	text-transform: none;
}

.wc-block-mini-cart__title .wp-block-woocommerce-mini-cart-title-items-counter-block {
	color: var(--text-muted);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-regular);
	letter-spacing: 0;
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__close {
	align-items: center;
	background: transparent;
	border-radius: var(--radius-control);
	color: var(--text-heading);
	display: flex;
	height: var(--control-h-md);
	justify-content: center;
	padding: 0;
	right: var(--space-4);
	top: var(--space-5);
	transition: background-color var(--duration-base) var(--easing-standard);
	width: var(--control-h-md);
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__close:hover {
	background: var(--wp--preset--color--base-alt);
}

.wc-block-mini-cart__items,
.wc-block-mini-cart__products-table {
	padding: 0;
}

/* Pozycja koszyka. Woo renderuje ją jako <tr> z trzema komórkami
   (zdjęcie | produkt | suma) i sam ustawia na wierszu `display: grid`.
   Projekt chce innego układu: miniatura z lewej, a po prawej cztery wiersze
   — nazwa, ceny, plakietka oszczędności, a na dole licznik z sumą i „×".
   Stepper, suma i krzyżyk siedzą jednak w trzech różnych komórkach, więc
   najpierw `display: contents` rozpuszcza te komórki (i wrappery w środku),
   przez co ich dzieci awansują do gridu wiersza i można je rozstawić. */
.wc-block-mini-cart__products-table table.wc-block-mini-cart-items .wc-block-cart-items__row {
	align-items: center;
	border-bottom: 1px solid var(--hairline);
	column-gap: var(--space-4);
	display: grid;
	grid-template-columns: var(--cart-thumb) 1fr auto auto;
	padding: var(--space-4);
	row-gap: var(--space-2);
}

/* Specyficzność podniesiona tabelą i kontenerem: Woo ustawia `display: flex`
   na `__wrap` i `__quantity` selektorem o stopniu wyższym niż sama klasa, a
   jego arkusz ładuje się po arkuszach theme'u. */
.wc-block-mini-cart__products-table table.wc-block-mini-cart-items .wc-block-cart-item__product,
.wc-block-mini-cart__products-table table.wc-block-mini-cart-items .wc-block-cart-item__wrap,
.wc-block-mini-cart__products-table table.wc-block-mini-cart-items .wc-block-cart-item__quantity,
.wc-block-mini-cart__products-table table.wc-block-mini-cart-items .wc-block-cart-item__total,
.wc-block-mini-cart__products-table table.wc-block-mini-cart-items .wc-block-cart-item__total-price-and-sale-badge-wrapper {
	display: contents;
}

/* Woo wypisuje w komórce dwa obrazki: goły <img> i ten sam w linku do
   produktu. Domyślnie drugi jest nadmiarowy dopiero po nadaniu obu wymiarów
   — bez tej reguły miniatura dubluje się w pionie. */
.wc-block-mini-cart__products-table table.wc-block-mini-cart-items .wc-block-cart-items__row .wc-block-cart-item__image:has(a)>img {
	display: none;
}

.wc-block-mini-cart-items .wc-block-cart-item__image {
	align-self: start;
	grid-area: 1 / 1 / 3 / 2;
	/* Woo trzyma odstęp od nazwy paddingiem komórki; tu odstęp daje
	   `column-gap` gridu, a padding tylko ścinałby miniaturę: obrazek ma
	   `max-width: 100%` z arkusza WooCommerce i skurczyłby się o te 16 px. */
	padding: 0;
}

.wc-block-mini-cart__products-table table.wc-block-mini-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img {
	border-radius: var(--radius-card);
	display: block;
	height: var(--cart-thumb);
	object-fit: cover;
	width: var(--cart-thumb);
}

.wc-block-mini-cart-items .wc-block-components-product-name {
	color: var(--text-heading);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	grid-area: 1 / 2 / 2 / 5;
	line-height: var(--leading-snug);
	overflow-wrap: anywhere;
	text-decoration: none;
}

.wc-block-mini-cart-items .wc-block-cart-item__prices {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	grid-area: 2 / 2 / 3 / 5;
	margin: 0;
}

.wc-block-mini-cart-items .wc-block-components-product-price__regular {
	color: var(--text-muted);
	font-size: var(--text-2xs);
}

.wc-block-mini-cart-items .wc-block-components-product-price__value {
	color: var(--text-body);
	font-size: var(--text-sm);
}

/* Plakietka „Oszczędzasz X" dostaje własny wiersz zamiast miejsca obok ceny:
   przy 390 px wersaliki z trackingiem i czterocyfrową kwotą nie mieszczą się
   w tej samej linii, a projekt i tak pozwala jej się tam zawinąć. Kiedy
   pozycja nie jest przeceniona, Woo w ogóle nie renderuje elementu, więc
   wiersz nie powstaje. */
.wc-block-mini-cart-items .wc-block-components-sale-badge {
	/* Woo składa plakietkę z gołego tekstu („Oszczędzasz") i <span> z kwotą.
	   Po zmianie na `inline-flex` spacja między nimi znika — odstęp musi
	   wrócić jako `gap`. */
	gap: var(--space-1);
	grid-area: 3 / 2 / 4 / 5;
	justify-self: start;
	margin: 0;
	white-space: nowrap;
}

.wc-block-mini-cart-items .wc-block-components-product-badge:not(.wc-block-components-sale-badge) {
	grid-column: 2 / 5;
	justify-self: start;
}

.wc-block-mini-cart-items .wc-block-components-quantity-selector {
	grid-area: 4 / 2 / 5 / 3;
	justify-self: start;
}

.wc-block-mini-cart-items .wc-block-cart-item__total-price-and-sale-badge-wrapper>.wc-block-components-product-price {
	color: var(--text-heading);
	font: var(--type-price);
	grid-area: 4 / 3 / 5 / 4;
	white-space: nowrap;
}

.wc-block-mini-cart-items .wc-block-cart-item__remove-link {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: var(--radius-control);
	color: var(--text-muted);
	cursor: pointer;
	display: flex;
	grid-area: 4 / 4 / 5 / 5;
	height: var(--control-h-sm);
	justify-content: center;
	padding: 0;
	text-decoration: none;
	transition: background-color var(--duration-base) var(--easing-standard),
		color var(--duration-base) var(--easing-standard);
	width: var(--control-h-sm);
}

.wc-block-mini-cart-items .wc-block-cart-item__remove-link:hover {
	background: var(--wp--preset--color--base-alt);
	color: var(--text-heading);
}

/* Opis produktu w szufladzie tylko dubluje kartę produktu i rozpycha pozycję
   — projekt pokazuje wyłącznie nazwę, ceny i licznik. Warianty
   (product-details) zostają, bo bez nich nie widać, co się kupuje. */
.wc-block-mini-cart-items .wc-block-components-product-metadata__description {
	display: none;
}

.wc-block-mini-cart-items .wc-block-components-product-metadata {
	grid-column: 2 / 5;
	margin: 0;
}

/* Stopka: kwota, nota o wysyłce i dwa przyciski. Na telefonie kolumna
   odwrócona, żeby „Przejdź do płatności" stało nad „Zobacz koszyk". */
.wc-block-mini-cart__footer {
	background: var(--wp--preset--color--surface-card);
	border-top: 1px solid var(--hairline);
	display: flex;
	flex: none;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-5) var(--space-6) var(--space-6);
}

.wc-block-mini-cart__footer .wc-block-mini-cart__footer-subtotal {
	align-items: baseline;
	margin: 0;
}

.wc-block-mini-cart__footer .wc-block-components-totals-item__label {
	font: var(--type-body);
}

.wc-block-mini-cart__footer .wc-block-components-totals-item__value {
	color: var(--text-heading);
	font-family: var(--font-body);
	font-size: var(--text-lg);
	font-weight: var(--weight-medium);
	white-space: nowrap;
}

.wc-block-mini-cart__footer .wc-block-components-totals-item__description {
	color: var(--text-muted);
	font: var(--type-body-sm);
}

/* Selektor z rodzicem, bo Woo poniżej 480 px ustawia tu `column` regułą
   o tym samym stopniu — a wtedy „Zobacz koszyk" ląduje nad płatnością. */
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions {
	display: flex;
	flex-direction: column-reverse;
	gap: var(--space-2);
	margin: 0;
}

/* Pusty koszyk. Woo renderuje tu tylko akapit i przycisk (nagłówek chowa
   razem z listą), więc rolę tytułu z projektu przejmuje ten akapit — stąd
   krój tytułowy zamiast pogrubionej treści. */
.wc-block-mini-cart__empty-cart-wrapper {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	justify-content: center;
	min-height: 100%;
	padding: var(--space-10) var(--space-6);
	text-align: center;
}

.wc-block-mini-cart__empty-cart-wrapper>p {
	color: var(--text-heading);
	font: var(--type-h3);
	margin: 0;
}

.wc-block-mini-cart__empty-cart-wrapper>p strong {
	font-weight: inherit;
}

/* `:not([hidden])` jest tu konieczne: Woo chowa ten blok atrybutem `hidden`,
   który działa tylko przez domyślne `display: none` przeglądarki — każda
   nasza deklaracja `display` bez tego warunku odsłania pusty koszyk pod
   stopką pełnego. */
.wc-block-mini-cart__drawer .wp-block-woocommerce-empty-mini-cart-contents-block:not([hidden]) {
	display: flex;
	flex: 1;
	flex-direction: column;
}

@media (max-width: 781px) {
	/* Na telefonie koszyk działa jak menu spod hamburgera: pełny ekran,
	   bez zaokrągleń, uchwytu i wjazdu od dołu. Arkusz („sheet") z projektu
	   udawał okno dialogowe — przy 390 px zostawiał pasek strony u góry i
	   ucinał dolny przycisk. Woo wysuwa szufladę zestawem `left: 100%` plus
	   ujemny `translateX`, więc oprócz `inset` trzeba wyzerować `transform`. */
	.wc-block-mini-cart__drawer.wc-block-components-drawer {
		/* Klatki `slidein` Woo jadą od `translateX(0)` do `-100%`, bo w jego
		   układzie szuflada startuje spoza ekranu (`left: 100%`). Po
		   przestawieniu na `inset: 0` ta sama animacja robi odwrotność:
		   panel wyjeżdża w lewo i po 0,3 s skacze z powrotem. Menu spod
		   hamburgera nie animuje się wcale — tak samo tutaj. */
		animation: none;
		border-radius: 0;
		height: 100%;
		inset: 0;
		max-height: none;
		max-width: none;
		overflow: hidden;
		transform: none;
		transition: none;
		width: 100%;
	}

	/* Woo skaluje wnętrze na 100vh; przy pełnym ekranie to ta sama wartość,
	   ale `height: 100%` wiąże je z szufladą, więc stopka nie ucieka pod
	   krawędź, kiedy przeglądarka zwija pasek adresu. */
	.wc-block-mini-cart__drawer .wc-block-components-drawer__content,
	.wc-block-mini-cart__drawer .wc-block-mini-cart__template-part {
		height: 100%;
	}

	/* Pasek administratora zostaje klikalny — tak samo zachowuje się
	   rozwinięte menu nawigacji. */
	.admin-bar .wc-block-mini-cart__drawer.wc-block-components-drawer {
		height: calc(100% - var(--wp-admin--admin-bar--height, 46px));
		top: var(--wp-admin--admin-bar--height, 46px);
	}

	/* Drugi przycisk jest w projekcie „ghost" — na wąskim ekranie dwie
	   obwiedzione ramki pod sobą czytają się jak dwie równorzędne akcje.
	   Ramkę stylu „outline" Woo rysuje cieniem, nie obramowaniem, więc samo
	   `border: 0` jej nie zdejmuje. */
	.wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions a.wc-block-components-button.wc-block-mini-cart__footer-cart:not(:focus) {
		background: transparent;
		border: 0;
		box-shadow: none;
		color: var(--text-muted);
	}

	/* Woo chowa notę o wysyłce na wąskich ekranach; w projekcie stoi ona
	   pod kwotą także na telefonie. */
	.wc-block-mini-cart__footer .wc-block-components-totals-item.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__description {
		display: block;
	}
}


@media (min-width: 782px) {
	.wc-block-mini-cart__products-table table.wc-block-mini-cart-items .wc-block-cart-items__row {
		grid-template-columns: var(--cart-thumb-lg) 1fr auto auto;
		padding: var(--space-5) var(--space-6);
	}

	.wc-block-mini-cart__products-table table.wc-block-mini-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img {
		height: var(--cart-thumb-lg);
		width: var(--cart-thumb-lg);
	}

	.wc-block-mini-cart-items .wc-block-components-product-name {
		font-size: var(--text-base);
	}

	.wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions {
		flex-direction: row;
		gap: var(--space-3);
	}

	.wc-block-mini-cart__footer-actions>* {
		flex: 1;
	}
}

/* Powiadomienia sklepu — earthy, desaturowane, tylko w bannerach. */
.wc-block-components-notice-banner {
	border-radius: var(--radius-card);
	font-family: var(--font-body);
	font-size: var(--text-sm);
}

.wc-block-components-notice-banner.is-success {
	background-color: #e4eedf;
	border-color: #4b7a3f;
}

.wc-block-components-notice-banner.is-error {
	background-color: #f6e3da;
	border-color: var(--wp--preset--color--sale);
}

.wc-block-components-notice-banner.is-info {
	background-color: #e1eaed;
	border-color: #3c5a66;
}

/* Plakietka oszczędności w koszyku i mini-koszyku.

   Woo trzyma ją w kolumnie ceny z `white-space: nowrap`. Po nadaniu jej
   wersalików i trackingu (jak pozostałym plakietkom) napis „Oszczędzasz
   5,00 zł" przestawał się mieścić w 480px szufladzie i rozpychał tabelę
   pozycji — stąd poziomy pasek przewijania. Tutaj pozwalamy jej się zawijać
   i zdejmujemy tracking; kształt i kolor zostają. */
/* Bez `display` — Woo chowa tę plakietkę dla pozycji bez rabatu właśnie
   przez `display: none`, więc jawne ustawienie wywołałoby „Oszczędzasz
   0,00 zł" przy każdym produkcie. */
.wc-block-cart-items:not(.wc-block-mini-cart-items) .wc-block-components-sale-badge {
	/* `inline-flex` z plakietki systemowej trzyma napis w jednej linii —
	   tu napis MUSI się łamać (wąska kolumna sumy na telefonie), więc
	   wracamy do zwykłego pudełka liniowego. */
	display: inline-block;
	/* Wysokość z plakietki systemowej (22 px) obowiązuje tylko dopóki napis
	   mieści się w jednej linii — tutaj celowo pozwalamy mu się złamać, więc
	   wracamy do `auto` i dokładamy pionowy padding. */
	height: auto;
	letter-spacing: 0;
	margin-top: var(--space-1);
	max-width: 100%;
	padding: var(--pad-control-xs);
	text-align: center;
	white-space: normal;
}

/* Kolumna sumy w koszyku stronicowym: bez `min-width: 0` grid liczy jej
   szerokość od najdłuższego, nierozdzielnego kawałka plakietki i całą tabelę
   wypycha poza ekran. Zerujemy na komórce i na wrapperze — grid patrzy na
   komórkę, flex wewnątrz na wrapper. */
.wc-block-cart-item__total,
.wc-block-cart-item__total-price-and-sale-badge-wrapper {
	min-width: 0;
}

/* Na telefonie plakietka oszczędności nie mieści się w kolumnie sumy —
   samo słowo „Oszczędzasz" jest szersze niż ta kolumna, więc grid rozpychał
   całą tabelę poza ekran (poziomy pasek przewijania na /koszyk/). Rozwiązanie
   jak w projekcie arkusza: plakietka schodzi do własnego wiersza pod pozycją,
   a suma zostaje tam, gdzie stawia ją Woo. `display: contents` na komórce
   sumy i jej wrapperze wypuszcza oba elementy do gridu wiersza. */
@media (max-width: 781px) {

	table.wc-block-cart-items.wp-block-woocommerce-cart-line-items-block .wc-block-cart-item__total,
	table.wc-block-cart-items.wp-block-woocommerce-cart-line-items-block .wc-block-cart-item__total-price-and-sale-badge-wrapper {
		display: contents;
	}

	table.wc-block-cart-items.wp-block-woocommerce-cart-line-items-block .wc-block-cart-item__total-price-and-sale-badge-wrapper>.wc-block-components-product-price {
		grid-column: 4;
		grid-row: 1;
		justify-self: end;
	}

	table.wc-block-cart-items.wp-block-woocommerce-cart-line-items-block .wc-block-components-sale-badge {
		grid-column: 2 / 5;
		justify-self: start;
		margin-top: 0;
	}
}

/* Nazwa produktu też musi móc się złamać — długie nazwy z myślnikiem
   („– Butelka Marasca") inaczej wypychają kolumnę. */
.wc-block-cart-item__wrap {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Stepper ilości (koszyk blokowy). Globalna reguła dla input[type=number]
   daje padding 12px i szerokość 100%, co rozjeżdża trzyczęściową kontrolkę
   Woo — tu ją cofamy i wyrównujemy −, liczbę i + do jednej wysokości. */
.wc-block-components-quantity-selector {
	align-items: center;
	background: var(--wp--preset--color--surface-card);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-control);
	display: inline-flex;
	height: var(--control-h-md);
	margin: 0;
	/* `max-content` zamiast `auto`: w wąskiej kolumnie drawera rodzic potrafi
	   ścisnąć kontrolkę, a `overflow: hidden` (potrzebne dla promienia) wtedy
	   po prostu ucina to, co wystaje — łącznie z drugą cyfrą ilości. */
	min-width: max-content;
	overflow: hidden;
	width: auto;
}

.wc-block-components-quantity-selector::after {
	display: none;
}

/* Kontrolka ma własne przyciski − i +, więc natywny spinner jest zbędny.
   Chrome i tak rezerwuje na niego pas po prawej stronie pola i nakłada go na
   treść — przy ilościach dwucyfrowych ucinał drugą cyfrę w połowie („13"
   wyglądało jak „1:"). `appearance: textfield` odbiera mu ten pas w Firefoksie,
   pseudoelementy w silnikach WebKit/Blink. */
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	appearance: textfield;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--wp--preset--color--contrast);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 500;
	height: 100%;
	line-height: 1;
	margin: 0;
	min-height: 0;
	/* Szerokość w `ch` zamiast w pikselach: pole mieści trzy cyfry niezależnie
	   od stopnia pisma, a przy jednocyfrowej ilości nie zapada się do kwadratu
	   węższego niż przyciski. */
	/* `flex: none` odbiera polu kurczliwość — z `1 1 auto` z wc-blocks pole
	   oddawało miejsce przyciskom przy ciasnym rodzicu. Szerokość w `em` liczy
	   się od stopnia pisma samego pola, więc trzy cyfry mieszczą się niezależnie
	   od tego, co ustawi motyw wyżej. */
	flex: none;
	min-width: 3.5em;
	padding: 0 var(--space-1);
	text-align: center;
	width: 3.5em;
}

.wc-block-components-quantity-selector__input::-webkit-inner-spin-button,
.wc-block-components-quantity-selector__input::-webkit-outer-spin-button {
	appearance: none;
	margin: 0;
}

.wc-block-components-quantity-selector__input:focus-visible {
	box-shadow: none;
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -2px;
}

.wc-block-components-quantity-selector__button {
	align-items: center;
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	display: flex;
	font-size: var(--text-base);
	height: 100%;
	justify-content: center;
	line-height: 1;
	margin: 0;
	min-width: var(--space-8);
	opacity: 1;
	padding: 0;
	transition: background-color var(--duration-base) var(--easing-standard);
	width: var(--space-8);
}

.wc-block-components-quantity-selector__button:hover:not(:disabled) {
	background: var(--wp--preset--color--base-alt);
}

.wc-block-components-quantity-selector__button:disabled {
	opacity: 0.42;
}

.wc-block-mini-cart__products-table .wc-block-components-quantity-selector {
	height: var(--control-h-sm);
}

.wc-block-mini-cart__products-table .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	min-width: 3em;
	width: 3em;
}

.wc-block-mini-cart__products-table .wc-block-components-quantity-selector__button {
	min-width: var(--control-h-xs);
	width: var(--control-h-xs);
}

.woocommerce table.shop_table,
.woocommerce-cart table.cart {
	background: var(--wp--preset--color--surface-card);
	border: 1px solid var(--hairline);
	border-collapse: collapse;
	border-radius: var(--radius-card);
	overflow: hidden;
}

.woocommerce table.shop_table th {
	background: var(--wp--preset--color--base-alt);
	color: var(--wp--preset--color--primary);
	font-family: var(--font-body);
	font-size: var(--text-2xs);
	font-weight: 600;
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
}

.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
	border-top: 1px solid var(--hairline);
	padding: var(--pad-control-lg);
}

/* Podsumowanie zamówienia — pull-out na oliwce, jak w projekcie. */
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review {
	background: var(--wp--preset--color--primary);
	border-radius: var(--radius-card);
	color: var(--text-on-dark-warm);
	padding: var(--space-12);
}

.woocommerce-cart .cart-collaterals .cart_totals h2,
.woocommerce-checkout #order_review_heading {
	color: var(--wp--preset--color--base-alt);
	font-family: var(--font-body);
	font-size: var(--text-2xs);
	font-weight: 600;
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
}

.woocommerce-cart .cart_totals table.shop_table,
.woocommerce-checkout #order_review table.shop_table {
	background: transparent;
	border: 0;
}

.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-checkout #order_review table.shop_table th {
	background: transparent;
	color: var(--text-on-dark-warm);
}

.woocommerce-cart .cart_totals table.shop_table td,
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td,
.woocommerce-checkout #order_review table.shop_table th {
	border-top-color: var(--hairline-on-dark);
}

.woocommerce-cart .cart_totals .button,
.woocommerce-checkout #place_order {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary-dark);
	width: 100%;
}

.woocommerce-cart .cart_totals .button:hover,
.woocommerce-checkout #place_order:hover {
	background-color: var(--wp--preset--color--accent-deep);
	color: var(--wp--preset--color--base);
}

.woocommerce .quantity .qty {
	border: 1px solid var(--hairline);
	border-radius: var(--radius-control);
	color: var(--wp--preset--color--contrast);
	font-family: var(--font-body);
	min-height: var(--control-h-md);
	padding: var(--space-2);
}

.woocommerce div.product .product_title {
	font-family: var(--font-display);
	font-weight: 300;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--wp--preset--color--primary);
	font-family: var(--font-body);
	font-size: var(--text-lg);
	font-weight: 500;
}

/* Zakładki karty produktu stoją w product.css — arkusz WooCommerce ładuje
   się po arkuszach theme'u, więc wygląd zakładek wymaga selektorów o
   wyższej specyficzności niż te, które stały tutaj. */

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
	background: var(--wp--preset--color--base-alt);
	border-radius: var(--radius-card);
	border-top: 2px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font-size: var(--text-sm);
}

.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before {
	color: var(--wp--preset--color--accent-deep);
}

.woocommerce .woocommerce-error {
	border-top-color: var(--wp--preset--color--sale);
}