/* ==========================================================================
   KOSZYK — warstwa wizualna (ładowana warunkowo na `is_cart()`, inc/woo/cart.php).

   ZAKRES: pełny koszyk. STAN PUSTY (poniżej, ADR-0024) + STAN WYPEŁNIONY (na
   końcu pliku, ADR-0030). Obie części merge-safe.

   Hook/CSS-first (ADR-0003): NIE override'ujemy bloków. Siatkę rekomendacji
   („nowości w sklepie") renderuje NASZ `product-card.php` w `.product-grid`
   (shortcode `[humee_products]` podmienia natywny `product-new` w treści strony
   — seed `tools/seed-cart-empty.php`), więc kafle i siatka stylują się same przez
   `components.css`. Tu zostaje TYLKO layout pustego stanu: nagłówki + separator.
   Copy PL = treść strony (seed), nie motyw. Stan wg prototypu (`koszyk__empty`).
   ========================================================================== */


/* Kontener pustego koszyka — wyśrodkowany, w rytmie sekcji. */
.wp-block-woocommerce-empty-cart-block {
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--xl);
	padding-inline: var(--wp--preset--spacing--md);
}

/* Nagłówek „twój koszyk jest pusty" (native `wc-block-cart__empty-cart__title`).
   `with-empty-cart-icon` dokleja przez legacy CSS ikonę ::before — legacy jest
   OFF (ADR-0016), więc ikona nie występuje; zostaje sam, czysty nagłówek. */
.wc-block-cart__empty-cart__title,
.wp-block-woocommerce-empty-cart-block > h2 {
	font-size: var(--wp--preset--font-size--h-1);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--tight);
	letter-spacing: var(--wp--custom--letter-spacing--wide);
	color: var(--wp--preset--color--dark);
	text-align: center;
}

/* Drugi nagłówek („nowości w sklepie") — mniejszy, oddech nad siatką. */
.wp-block-woocommerce-empty-cart-block > h2:not(.wc-block-cart__empty-cart__title) {
	margin-block-start: var(--wp--preset--spacing--lg);
	margin-block-end: var(--wp--preset--spacing--md);
	font-size: var(--wp--preset--font-size--lead);
}

/* Separator kropkowany bloku — subtelna, krótka linia zamiast natywnych kropek. */
.wp-block-woocommerce-empty-cart-block .wp-block-separator {
	max-width: 6rem;
	margin-block: var(--wp--preset--spacing--md);
	margin-inline: auto;
	border: 0;
	border-block-start: 1px solid var(--wp--preset--color--line);
	opacity: 1;
}

/* Siatka rekomendacji (shortcode `[humee_products]`) = prymityw `.product-grid`
   z components.css — kafle `.product-card` stylują się same. Nic tu nie trzeba;
   modyfikator kontekstu na wypadek przyszłych korekt tylko dla pustego koszyka. */
.product-grid--cart-empty {
	margin-block-start: var(--wp--preset--spacing--md);
}


/* ==========================================================================
   KOSZYK — STAN WYPEŁNIONY (blok `woocommerce/filled-cart-block`, Store API).

   ⚠ MARKUP PRYWATNY WOOCOMMERCE — PIN do WC 10.9.3. WC uznaje klasy `wc-block-*`
   za wewnętrzne i może je zmienić między wydaniami. Cała ta sekcja to JEDNO,
   oznaczone miejsce do audytu przy MAJOR update Woo — procedura utrzymania w
   ADR-0030 (odpal E2E koszyka: desktop/mobile + `/en/`, 0 błędów konsoli).

   Hook/CSS-first (ADR-0003): NIE ruszamy markupu bloków ani ich mechaniki (qty,
   remove, kupon = natywny Store API bez przeładowania). Legacy CSS Woo jest OFF
   (foundation.php), więc klasy bloków ubieramy w tokeny theme.json od zera.
   Nadpisania celują SPECYFICZNOŚCIĄ, nie kolejnością (ADR-0011): rule'y scope'owane
   pod `.wc-block-cart …` biją pojedyncze klasy z `wc-blocks-style`. Zero `!important`,
   zero hardkodów. Cross-sell = NASZA siatka `.product-grid` (ADR-0024), nie obcy
   `product-collection` (podmiana w treści strony — `tools/seed-cart-empty.php`).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Układ dwukolumnowy (pozycje | podsumowanie) daje SAM blok
   (`.wc-block-components-sidebar-layout` = flex 65/35, klasa `is-large`). NIE
   ruszamy tego kontenera (jego `column-gap`/`max-width`/`margin` = zawinięcie
   sidebara pod spód). Oddech pionowy dajemy na ZEWNĘTRZNYM wrapperze bloku.

   ⚠ SPECYFICZNOŚĆ (ADR-0011): reguły WC dla wierszy są głębokie
   (`table.wc-block-cart-items .wc-block-cart-items__row … = 0,3,2`). Nadpisania
   row-level prefiksujemy `.wc-block-cart table.wc-block-cart-items
   .wc-block-cart-items__row` (0,4,1) — bije natywne przez specyficzność, nie
   kolejność. Reguły spoza wiersza (sidebar/kupon/sumy/CTA) wystarcza `.wc-block-cart`.
   -------------------------------------------------------------------------- */
.wp-block-woocommerce-cart {
	max-width: var(--wp--custom--max-width);
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--lg);
	padding-inline: var(--wp--custom--gutter);
}

/* --------------------------------------------------------------------------
   2. Tabela pozycji — nagłówek kolumn jako subtelne, wyszarzone etykiety +
   hairline; wiersze rozdzielone linią, oddech pionowy w komórkach.
   -------------------------------------------------------------------------- */
.wc-block-cart .wc-block-cart-items__header {
	color: var(--wp--preset--color--placeholder);
	font-size: var(--wp--preset--font-size--body);
	letter-spacing: var(--wp--custom--letter-spacing--wide);
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row td {
	padding-block: var(--wp--preset--spacing--md);
}

/* --------------------------------------------------------------------------
   3. Miniatura pozycji — szersza kolumna + zaokrąglenie kart Humee. Img jest
   width:100% (WC) → rozmiar dyktuje szerokość kolumny (nagłówek + komórka).
   -------------------------------------------------------------------------- */
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__header-image,
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
	width: 7rem;
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img {
	border-radius: var(--wp--custom--radius--modal);
	background: var(--wp--preset--color--bg-alt);
}

/* --------------------------------------------------------------------------
   4. Nazwa produktu — typografia nagłówka pozycji na tokenach (WC daje small).
   -------------------------------------------------------------------------- */
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
	color: var(--wp--preset--color--dark);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--tight);
	text-decoration: none;
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row a.wc-block-components-product-name:hover,
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row a.wc-block-components-product-name:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* --------------------------------------------------------------------------
   5. Ceny pozycji — cena regularna przekreślona (wyszarzona), cena po rabacie
   akcentem. Ten sam język cenowy co kafel/single (spójność).
   -------------------------------------------------------------------------- */
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices {
	font-size: var(--wp--preset--font-size--body);
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-price__regular {
	color: var(--wp--preset--color--placeholder);
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-price__value.is-discounted {
	color: var(--wp--preset--color--accent);
}

/* --------------------------------------------------------------------------
   6. Wariant (kolor / rozmiar) — dyskretne, wyszarzone etykiety pod nazwą.
   -------------------------------------------------------------------------- */
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-metadata {
	margin-block-start: var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--placeholder);
	font-size: var(--wp--preset--font-size--body);
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-details__name {
	font-weight: var(--wp--custom--font-weight--medium);
}

/* --------------------------------------------------------------------------
   7. Stepper ilości — kontrolka na tokenach (obwódka hairline, radius pill).
   Mechanika (Store API update-item) natywna — tu tylko wygląd + fokus.
   -------------------------------------------------------------------------- */
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--bg-alt);
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector__input {
	color: var(--wp--preset--color--dark);
	font-size: var(--wp--preset--font-size--body);
	font-weight: var(--wp--custom--font-weight--medium);
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector__button {
	color: var(--wp--preset--color--dark);
	transition: color 0.2s ease;
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector__button:hover,
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector__button:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* --------------------------------------------------------------------------
   8. „Usuń pozycję" — ikona-kosz wyszarzona, na hover/fokus akcent.
   Usuwanie robi rdzeń (Store API) — nie tykamy zachowania.
   -------------------------------------------------------------------------- */
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__remove-link {
	color: var(--wp--preset--color--placeholder);
	transition: color 0.2s ease;
}

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

/* --------------------------------------------------------------------------
   9. Kwota pozycji (kolumna „Łącznie") + badge „Oszczędzasz X” jako pigułka
   Humee (spójna z badge nowość/promocja na kaflach).
   -------------------------------------------------------------------------- */
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total .wc-block-components-product-price__value {
	color: var(--wp--preset--color--dark);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: var(--wp--custom--font-weight--medium);
	white-space: nowrap;
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-sale-badge {
	margin-block-start: var(--wp--preset--spacing--xs);
	padding: 0.15rem 0.6rem 0.3rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--body);
	white-space: nowrap;
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-sale-badge .wc-block-formatted-money-amount {
	color: inherit;
}

/* --------------------------------------------------------------------------
   10. Podsumowanie (sidebar) — karta cream Humee, sticky na desktopie.
   -------------------------------------------------------------------------- */
.wc-block-cart .wc-block-cart__sidebar {
	padding: var(--wp--preset--spacing--md);
	border-radius: var(--wp--custom--radius--modal);
	background: var(--wp--preset--color--bg-alt);
}

@media (min-width: 782px) {
	.wc-block-cart .wc-block-cart__sidebar {
		position: sticky;
		top: calc(var(--wp--custom--header-height) + var(--wp--preset--spacing--sm));
	}
}

.wc-block-cart .wc-block-cart__totals-title {
	margin-block-start: 0;
	color: var(--wp--preset--color--dark);
	font-size: var(--wp--preset--font-size--heading);
	font-weight: var(--wp--custom--font-weight--regular);
	letter-spacing: var(--wp--custom--letter-spacing--wide);
	text-align: start;
}

/* --------------------------------------------------------------------------
   11. Pole kuponu — panel „dodaj kupony" + natywny input/przycisk na tokenach.
   NIE tworzymy prymitywu formularza (`.field`/`.input` = tor „Konto”); stylujemy
   natywne klasy bloku bezpośrednio (task §5).
   -------------------------------------------------------------------------- */
.wc-block-cart .wc-block-components-totals-coupon .wc-block-components-panel__button {
	color: var(--wp--preset--color--dark);
	font-size: var(--wp--preset--font-size--body);
	letter-spacing: var(--wp--custom--letter-spacing--wide);
}

.wc-block-cart .wc-block-components-totals-coupon__input input {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--dark);
}

.wc-block-cart .wc-block-components-totals-coupon__input.is-active input:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--dark);
}

.wc-block-cart .wc-block-components-totals-coupon__button {
	border: 1px solid var(--wp--preset--color--dark);
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: var(--wp--preset--color--dark);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wc-block-cart .wc-block-components-totals-coupon__button:not([aria-disabled="true"]):hover,
.wc-block-cart .wc-block-components-totals-coupon__button:not([aria-disabled="true"]):focus-visible {
	background: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--bg-alt);
}

/* --------------------------------------------------------------------------
   12. Podsumowanie — DWA POZIOMY HIERARCHII (research UX: Baymard/NN-g, brandy
   COS/Arket/Nike). Zamiast rosnących rozmiarów: pozycje pośrednie (kwota/kurier)
   = jeden spokojny, WYCISZONY poziom (label szary `placeholder`, wartość ciemna,
   ten sam `body` 16px, tabular-nums), a kwota łączna = JEDYNY wyeksponowany
   element — tylko ~1.4× większa (`lead` 22px) + waga 600 + hairline nad nią.
   Wielki total (heading 30px / 2×) czyta się „promocyjnie/tandetnie" (research)
   → zejście do lead. MNIEJ PODZIAŁÓW: wygaszamy 4 natywne hairline'y sekcji,
   zostaje JEDEN nad kwotą łączną (reszta grupowana samym whitespace).
   -------------------------------------------------------------------------- */
.wc-block-cart .wp-block-woocommerce-cart-order-summary-block,
.wc-block-cart .wp-block-woocommerce-cart-order-summary-coupon-form-block,
.wc-block-cart .wp-block-woocommerce-cart-order-summary-totals-block,
.wc-block-cart .wc-block-components-totals-wrapper {
	border-color: transparent;
}

/* Pozycje pośrednie = poziom wyciszony: label szary, wartość ciemna, ten sam
   rozmiar (nie konkuruje z kwotą łączną), cyfry tabularne (równe przecinki). */
.wc-block-cart .wc-block-components-totals-item__label {
	color: var(--wp--preset--color--placeholder);
	font-size: var(--wp--preset--font-size--body);
}

.wc-block-cart .wc-block-components-totals-item__value {
	color: var(--wp--preset--color--dark);
	font-size: var(--wp--preset--font-size--body);
	font-variant-numeric: tabular-nums;
}

.wc-block-cart .wc-block-components-totals-footer-item {
	border-block-start: 1px solid var(--wp--preset--color--line);
	margin-block-start: var(--wp--preset--spacing--sm);
	padding-block-start: var(--wp--preset--spacing--sm);
	letter-spacing: var(--wp--custom--letter-spacing--wide);
	/* GRID zamiast natywnego flex-wrap: kolumna wartości ZAWSZE po prawej —
	   przy większej czcionce flex-wrap owijał kwotę pod etykietę w lewo. */
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	column-gap: var(--wp--preset--spacing--sm);
}

/* Kwota łączna = JEDYNY akcent: label + wartość na `lead` (~1.4× pozycji) + waga
   600; emfaza z wagi i hairline'a, nie z rozmiaru (research: total ≠ 2×). */
.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	color: var(--wp--preset--color--dark);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: var(--wp--custom--font-weight--medium);
}

.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--wp--preset--color--dark);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: var(--wp--custom--font-weight--medium);
	font-variant-numeric: tabular-nums;
	text-align: end;
}

/* Dopisek „w tym … VAT” = drobna, wyciszona nota pod wierszem kwoty (research:
   nota podatkowa mała + muted, nigdy w rozmiarze kwoty). Rozmiar zostawiamy
   natywny (0.75em ≈ 12px — realnie drobny; token `sm` przez clamp puchnie do
   16px na desktopie, więc go nie używamy). */
.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__description {
	grid-column: 1 / -1;
	color: var(--wp--preset--color--placeholder);
	letter-spacing: normal;
}

/* Nota VAT rozbija kwotę łączną → wyrównana do prawej, siedzi pod ceną (a nie
   pod zawijającą się etykietą po lewej). Tekst jest w zagnieżdżonym `<p …-tax>`,
   który natywnie ma `display: flex` — dlatego `text-align:end` NIE działa,
   trzeba `justify-content: flex-end` (flex nie reaguje na text-align). */
.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-tax {
	justify-content: flex-end;
	text-align: end;
}

.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-formatted-money-amount {
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   13. Obszar `order-meta` = slot WPLoyalty (komunikat earn/redeem). NIE łamiemy
   go (ADR-0023) — komunikat ma WŁASNE style inline (border akcent), więc dajemy
   mu tylko oddech; zero override inline (byłby `!important`, zakazany).
   -------------------------------------------------------------------------- */
.wc-block-cart .wc-block-components-order-meta {
	margin-block-start: var(--wp--preset--spacing--sm);
}

/* --------------------------------------------------------------------------
   14. CTA „przejdź do płatności” = odwzorowanie prymitywu `.btn` (dark pill,
   pełna szerokość, hover akcent) — jedno źródło wyglądu CTA w sklepie.
   GIGANTYCZNOŚĆ: WC daje `min-height: 3em` selektorem `body:not(...) .wc-block-
   components-button:not(.is-link)` (0,3,1); przy foncie 26px `3em` = 78px →
   przycisk puchnie. Musimy go pobić — selektor z dwiema klasami elementu +
   `:not(.is-link)` = (0,4,0) > (0,3,1). Wysokość schodzi do 3rem (48px) jak
   `.btn` i reszta CTA w sklepie (research: desktop 48–52px, >60px = niezgrabne).
   -------------------------------------------------------------------------- */
.wc-block-cart .wc-block-cart__submit-button.wc-block-components-button:not(.is-link) {
	/* padding + line-height 1 MUSZĄ być, inaczej zostaje wielki natywny padding
	   WC i przycisk puchnie — mirror prymitywu `.btn`. */
	padding: var(--wp--custom--pill--pad);
	min-height: 3rem;
	line-height: 1;
	border: 1px solid var(--wp--preset--color--dark);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--bg);
	font-size: var(--wp--preset--font-size--button-1);
	font-weight: var(--wp--custom--font-weight--medium);
	letter-spacing: var(--wp--custom--letter-spacing--wide);
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

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

/* --------------------------------------------------------------------------
   15. Cross-sell = NASZA siatka (ADR-0024). OSOBNA sekcja pełnej szerokości POD
   całym koszykiem (sibling bloku `woocommerce/cart` w treści strony — NIE w
   kolumnie pozycji), constrained do szerokości strony + guttery. Nagłówek
   „dobierz do kompletu” tłumaczalny + prymityw `.product-grid`.

   TŁO: sekcja jest PRZEWIEWNA na tle strony (`--bg`, ten sam beż) — BEZ kremowej
   karty/radiusa. Wcześniejsze kremowe pudło (`bg-alt` + modal-radius) czytało się
   jak ciężki, odklejony panel krzyczący bardziej niż sam koszyk. Kontrast, który
   jest potrzebny (beżowe media = kolor strony), przenosimy na SAME KAFLE (media
   dostaje kremową powierzchnię niżej) — sekcja się zlewa, kafle są widoczne.
   Delikatny hairline u góry oddziela cross-sell od koszyka bez robienia z niego
   osobnego bloku.
   -------------------------------------------------------------------------- */
.cart-cross-sell {
	max-width: var(--wp--custom--max-width);
	margin-inline: auto;
	margin-block-start: var(--wp--preset--spacing--lg);
	padding-block: var(--wp--preset--spacing--md);
	padding-inline: var(--wp--custom--gutter);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.cart-cross-sell__title {
	margin-block: 0 var(--wp--preset--spacing--md);
	color: var(--wp--preset--color--dark);
	font-size: var(--wp--preset--font-size--heading);
	font-weight: var(--wp--custom--font-weight--regular);
	letter-spacing: var(--wp--custom--letter-spacing--wide);
}

/* Siatka cross-sell = prymityw `.product-grid`, ale w OSOBNEJ sekcji pełnej
   szerokości cross-sell jest zwykle 2–4 kafle — a listingowe 4 sztywne kolumny
   (1fr) zostawiały puste kolumny po prawej (brzydka dziura). `auto-fit` ZWIJA
   puste tory, więc kafle o stałej szerokości (240–320px) CENTRUJĄ się niezależnie
   od liczby (2/3/4) i nigdy nie ma osieroconej kolumny. Override tylko w scope
   `.cart-cross-sell` (prymityw listingu nietknięty — DRY). */
.cart-cross-sell .product-grid {
	grid-template-columns: repeat(auto-fit, minmax(15rem, 20rem));
	justify-content: center;
}

/* Media kafla natywnie = `--bg` (ten sam beż co strona koszyka → niewidoczne).
   Skoro zdjęliśmy kremową kartę sekcji, powierzchnię przenosimy TU: kremowy
   kwadrat delikatnie unosi kafel nad beżowe tło (odwrotna tonacja niż listing,
   gdzie beżowe media leży na kremowej stronie — efekt „lekkiego liftu" ten sam).
   Scoped do `.cart-cross-sell` — listingowy `.product-card__media` nietknięty. */
.cart-cross-sell .product-card__media {
	background: var(--wp--preset--color--bg-alt);
}

/* --------------------------------------------------------------------------
   16. Mobile — sidebar przestaje być sticky (grid bloku składa się do 1 kol.),
   cross-sell zwęża się naturalnie; miniatura nieco mniejsza.
   -------------------------------------------------------------------------- */
@media (max-width: 781px) {
	.wc-block-cart {
		padding-block: var(--wp--preset--spacing--md);
	}

	.wc-block-cart .wc-block-cart-item__image img {
		width: 4.5rem;
	}
}