/*
 * shop.css — lista produktów, karta produktu, panel filtrów
 *
 * 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.
 */

/* -------------------------------------------------------------------------
   WooCommerce — bloki

   Woo 11 renderuje klasy wc-block-* / wp-block-woocommerce-*, których
   klasyczne selektory (ul.products li.product) nie łapią.
   ---------------------------------------------------------------------- */

.wc-block-product-template {
	--grid-gap: var(--space-6);
	gap: var(--grid-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Siatka listingu: 24 px odstępu z design systemu (--space-6).
   Sam `gap` nie wystarczy — WooCommerce liczy szerokość toru z zaszytego
   1,25 em: `minmax(max(150px, 33.3333% - 0.83333em), 1fr)`. Przy szerszej
   przerwie suma torów przekracza kontener i auto-fill po cichu zbija trzy
   kolumny do dwóch. Odejmowana wartość musi więc iść z tej samej zmiennej
   co `gap`: gap * (n - 1) / n.

   Podłoga toru idzie z 150 na 240 px. Design daje karcie 280–320 px i przy
   150 px kolumny nie znikają, tylko się kurczą — na tablecie z panelem
   filtrów wychodziły karty po 196 px ze zdjęciem wyższym niż szerokość
   karty. Z 240 px auto-fill zabiera kolumnę zamiast ścieśniać wszystkie. */
.wc-block-product-template.columns-2 {
	grid-template-columns: repeat(auto-fill, minmax(max(240px, calc(50% - var(--grid-gap) / 2)), 1fr));
}

.wc-block-product-template.columns-3 {
	grid-template-columns: repeat(auto-fill, minmax(max(240px, calc(33.3333% - var(--grid-gap) * 2 / 3)), 1fr));
}

.wc-block-product-template.columns-4 {
	grid-template-columns: repeat(auto-fill, minmax(max(240px, calc(25% - var(--grid-gap) * 3 / 4)), 1fr));
}

/* Podłoga 150 px w formule Woo pozwala zbić kartę do połowy telefonu —
   przy 390 px daje to dwie karty po 152 px, czyli poniżej referencyjnych
   280–320 px z design systemu, ze zdjęciem wyższym niż karta jest szeroka.
   Poniżej 600 px karta idzie więc na pełną szerokość. */
@media (max-width: 600px) {
	.wc-block-product-template.columns-2,
	.wc-block-product-template.columns-3,
	.wc-block-product-template.columns-4,
	.woocommerce ul.products {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Karta produktu = Card z design systemu. */
.wc-block-product-template .wc-block-product {
	background: var(--wp--preset--color--surface-card);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0 0 var(--space-5);
	transition: box-shadow var(--duration-base) var(--easing-standard),
		transform var(--duration-base) var(--easing-standard);
}

.wc-block-product-template .wc-block-product:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
}

/* Media flush do krawędzi karty, reszta z paddingiem 20px. */
.wc-block-product-template .wc-block-product>*:not(.wc-block-components-product-image) {
	margin-left: var(--space-5);
	margin-right: var(--space-5);
}

.wc-block-product-template .wc-block-product>.wc-block-components-product-image {
	margin: 0 0 var(--space-5);
}

.wc-block-components-product-image {
	border-radius: 0;
	overflow: hidden;
}

.wc-block-components-product-image img {
	aspect-ratio: 1 / 1;
	display: block;
	object-fit: cover;
	transition: transform var(--duration-slow) var(--easing-entrance);
	width: 100%;
}

/* W listingu zdjęcie ma stałą wysokość 260 px, a nie proporcję — inaczej
   karty w rzędzie mają różne wysokości mediów przy różnych szerokościach
   kolumn, a design zakłada jedną linię pod zdjęciami w całym rzędzie. */
.wc-block-product-template .wc-block-components-product-image img {
	aspect-ratio: auto;
	height: 260px;
}

.wc-block-product-template .wc-block-product:hover .wc-block-components-product-image img {
	transform: scale(1.04);
}

.wc-block-product-template .wp-block-post-title {
	font-family: var(--font-display);
	font-weight: 500;
	line-height: 1.22;
	margin-bottom: var(--space-2);
	margin-top: 0;
}

/* Eyebrow — odmiana / kategoria nad nazwą. */
.wc-block-product-template .oliwa-card-eyebrow {
	color: var(--text-accent);
	font-family: var(--font-body);
	font-size: var(--text-2xs);
	font-weight: 600;
	letter-spacing: var(--tracking-widest);
	line-height: 1.2;
	margin-bottom: var(--space-2);
	margin-top: 0;
	text-transform: uppercase;
}

.wc-block-product-template .oliwa-card-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.wc-block-product-template .wp-block-post-title a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

/* Cena — Montserrat 500 w oliwce; stara cena wygaszona bez opacity. */
.wc-block-components-product-price {
	font-family: var(--font-body);
}

.wc-block-components-product-price__value {
	color: var(--wp--preset--color--primary);
	font-weight: 500;
}

/* --type-price: Montserrat 500 / 18 px / 1.2. `margin-top: auto` na cenie,
   nie na przycisku — dzięki temu ceny w rzędzie stoją w jednej linii nawet
   wtedy, gdy nazwy mają różną liczbę wierszy. */
.wc-block-product-template .wp-block-woocommerce-product-price {
	color: var(--wp--preset--color--primary);
	font-size: var(--text-md);
	font-weight: 500;
	line-height: 1.2;
	margin-bottom: 0;
	margin-top: auto;
	padding-top: var(--space-4);
}

.wc-block-components-product-price del,
.wc-block-components-product-price__regular {
	color: var(--wp--preset--color--contrast-muted);
	font-weight: 400;
	opacity: 1;
}

/* Cena przed promocją zostaje przy --type-body-sm, a nie skaluje się razem
   z ceną właściwą — to ta nowa ma nieść wagę w karcie. */
.wc-block-product-template .wc-block-components-product-price del,
.woocommerce ul.products li.product .price del {
	font-size: var(--text-sm);
	margin-right: var(--space-2);
}

.wc-block-components-product-price ins {
	text-decoration: none;
}

/* Badge — jedyne miejsce z pill radius.

   Wersja z systemu projektowego (komponent Badge, tone="sale"): plakietka
   jest MIĘKKA — przypalona ziemia idzie w tekst, a tło bierze jasny odcień
   tej samej barwy. Pełne tło #9A3412 z kremowym napisem, które stało tu
   wcześniej, było jedynym dużym polem koloru semantycznego w całym layoucie
   i wygrywało z ceną, na którą plakietka ma tylko wskazywać.

   Trzy różne konteksty renderują trzy różne klasy tej samej plakietki:
   kolekcja produktów (wc-block-components-product-sale-badge), galeria na
   karcie produktu (klasyczny span.onsale) i koszyk blokowy
   (wc-block-components-sale-badge). Wszystkie muszą wyglądać identycznie. */
.wc-block-components-product-sale-badge,
.wc-block-components-sale-badge,
.wc-block-components-product-badge,
span.onsale,
.woocommerce span.onsale {
	align-items: center;
	background: var(--sale-soft);
	border: 0;
	border-radius: var(--radius-pill);
	color: var(--sale);
	display: inline-flex;
	font-family: var(--font-body);
	font-size: var(--text-2xs);
	font-weight: 600;
	/* Stała wysokość zamiast pionowego paddingu — plakietka stoi obok ceny
	   i obok tytułu, a te mają różne interlinie; bez tego różniłaby się
	   wysokością w każdym z trzech kontekstów. */
	height: var(--badge-h);
	letter-spacing: var(--tracking-wider);
	line-height: 1;
	padding: 0 var(--space-3);
	text-transform: uppercase;
}

/* Plakietki nie-promocyjne (np. „Produkt dostępny na zamówienie") dzielą
   z promocją klasę bazową, ale nie jej znaczenie — w systemie mają tone
   „neutral": krem i wygaszony tekst. */
.wc-block-components-product-badge:not(.wc-block-components-sale-badge) {
	background: var(--wp--preset--color--base-alt);
	color: var(--wp--preset--color--contrast-muted);
}

/* Plakietka na liście: 16 px od góry i lewej krawędzi karty. Woo stawia ją
   na 4 px, licząc od zdjęcia — przy medium flush do krawędzi wygląda to na
   przyklejoną do rogu. */
.wc-block-product-template .wc-block-components-product-sale-badge,
.wc-block-product-template .wc-block-components-sale-badge {
	left: var(--space-4);
	right: auto;
	top: var(--space-4);
}

/* Galeria na karcie produktu. Arkusz WooCommerce ładuje się PO arkuszu
   theme'u, a jego `.woocommerce span.onsale` ma tę samą specyficzność co
   nasza reguła wyżej — czyli wygrywa kolejnością. Stąd selektor o stopień
   mocniejszy (div.product) i pełny zestaw właściwości, nie tylko pozycja:
   Woo ustawia tu okrąg 100%, min-width/height 3.236em i własne tło. */
.wp-block-woocommerce-product-image-gallery span.onsale,
.woocommerce div.product span.onsale {
	align-items: center;
	background: var(--sale-soft);
	border-radius: var(--radius-pill);
	color: var(--sale);
	display: inline-flex;
	font-family: var(--font-body);
	font-size: var(--text-2xs);
	font-weight: 600;
	height: var(--badge-h);
	left: var(--space-4);
	letter-spacing: var(--tracking-wider);
	line-height: 1;
	margin: 0;
	min-height: 0;
	min-width: 0;
	padding: 0 var(--space-3);
	position: absolute;
	right: auto;
	text-transform: uppercase;
	top: var(--space-4);
	z-index: 2;
}

/* Przycisk „dodaj do koszyka" zawsze u dołu karty. */
.wc-block-product-template .wp-block-woocommerce-product-button {
	margin-top: 0;
	padding-top: var(--space-2);
}

/* Długi selektor nie jest ozdobą: o wygląd tego przycisku bije się trzech
   autorów naraz. theme.json wystawia `:root :where(.wp-element-button)`
   (0,1,0), WooCommerce dokłada
   `.wp-block-button.wc-block-components-product-button .…__button` (0,3,0),
   a oba arkusze ładują się po arkuszu theme’u. Sama klasa Woo remisuje
   i przegrywa kolejnością, dlatego bierzemy 0,4,0 — taniej niż !important,
   który zablokowałby późniejsze nadpisania w Edytorze witryny. */
.wc-block-product-template .wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button {
	align-items: center;
	border-radius: var(--radius-control);
	display: flex;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	gap: var(--space-2);
	justify-content: center;
	letter-spacing: var(--tracking-wider);
	line-height: 1.2;
	min-height: var(--control-h-sm);
	padding: var(--pad-control-sm);
	text-transform: uppercase;
	width: 100%;
}

/* Ikona torby przed etykietą. Maska zamiast <img>, żeby glif dziedziczył
   kolor tekstu i zmieniał się razem z nim w stanie hover. */
.wc-block-product-template .wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button::before {
	background-color: currentColor;
	content: "";
	flex: none;
	height: var(--icon-sm);
	mask: var(--ico-bag) center / contain no-repeat;
	width: var(--icon-sm);
}

/* Design daje karcie jedno działanie w wariancie outline — pełne wypełnienie
   oliwką rezerwujemy dla akcji głównych (koszyk, zamówienie). */
.wc-block-product-template .wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button:not(.added) {
	background-color: transparent;
	border: 1px solid var(--hairline-strong);
	color: var(--wp--preset--color--primary);
}

.wc-block-product-template .wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button:not(.added):hover {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base-alt);
}

/* Paginacja. Domyślnie WordPress renderuje same gołe liczby bez żadnego
   sygnału, że są klikalne — dajemy im kształt kontrolki (34px, hairline,
   2px radius), a bieżącej stronie wypełnienie oliwką. */
.wp-block-query-pagination.is-layout-flex {
	/* Podwójna klasa daje (0,2,0) i bije rdzeniowe
	   `:root :where(.is-layout-flex) { gap: 0 }` (0,1,0). Po ustawieniu
	   globalnego blockGap na 0 sam `.wp-block-query-pagination` remisował
	   ze specyficznością rdzenia i przegrywał kolejnością — style globalne
	   są wypisywane po arkuszach motywu. */
	gap: var(--space-2);
	/* Paginacja jest dzieckiem układu przepływowego kolekcji produktów,
	   więc jej odstęp od siatki szedł z blockGap. Przy 0 przykleiła się do
	   ostatniego rzędu kart — trzymamy go tu, na własność. */
	margin-block-start: var(--space-6);
}

.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	align-items: center;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-control);
	color: var(--wp--preset--color--primary);
	display: inline-flex;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	justify-content: center;
	letter-spacing: var(--tracking-wide);
	min-height: var(--control-h-sm);
	min-width: var(--control-h-sm);
	padding: 0 var(--space-3);
	text-decoration: none;
	transition: background-color var(--duration-base) var(--easing-standard),
		border-color var(--duration-base) var(--easing-standard),
		color var(--duration-base) var(--easing-standard);
}

.wp-block-query-pagination .page-numbers:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	background-color: var(--wp--preset--color--base-alt);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.wp-block-query-pagination .page-numbers.current {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base-alt);
}

/* Wielokropek nie jest linkiem — nie udajemy przycisku. */
.wp-block-query-pagination .page-numbers.dots {
	border-color: transparent;
	color: var(--wp--preset--color--contrast-muted);
}

.wp-block-query-pagination-numbers {
	display: inline-flex;
	gap: var(--space-2);
}

/* Ta sama historia co wyżej: bez podniesienia specyficzności numery stron
   sklejają się w jeden pasek. */
.wp-block-query-pagination .wp-block-query-pagination-numbers {
	gap: var(--space-2);
}

/* Kontrolki katalogu — 2px, hairline, wysokość 34px. */
.wc-block-catalog-sorting select,
.wc-block-components-sort-select__select,
.woocommerce-ordering select {
	background-color: var(--wp--preset--color--surface-card);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-control);
	color: var(--wp--preset--color--contrast);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	min-height: var(--control-h-sm);
	padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
}

.wc-block-catalog-sorting select:focus-visible,
.wc-block-components-sort-select__select:focus-visible,
.woocommerce-ordering select:focus-visible {
	border-color: var(--wp--preset--color--accent);
	box-shadow: var(--focus-ring-shadow);
	outline: none;
}

.wc-block-product-results-count,
.wp-block-woocommerce-product-results-count,
.woocommerce-result-count {
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--text-sm);
	margin: 0;
}

/* Okruszki. */
.wc-block-breadcrumbs,
.wp-block-woocommerce-breadcrumbs,
.woocommerce-breadcrumb {
	color: var(--wp--preset--color--contrast-muted);
	font-family: var(--font-body);
	font-size: var(--text-sm);
}

.wc-block-breadcrumbs a,
.woocommerce-breadcrumb a {
	color: var(--wp--preset--color--contrast-muted);
	text-decoration: none;
}

.wc-block-breadcrumbs a:hover,
.woocommerce-breadcrumb a:hover {
	color: var(--wp--preset--color--primary);
}

/* Filtry. */
.wp-block-woocommerce-product-filters label,
.wc-block-product-filter-checkbox-list__label {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	line-height: 1.5;
}

.wp-block-woocommerce-product-filter-taxonomy input[type="checkbox"],
.wc-block-product-filter-checkbox-list__input {
	accent-color: var(--wp--preset--color--primary);
}

.wp-block-woocommerce-product-filter-price .wc-block-components-price-slider__range-input-progress {
	--range-color: var(--wp--preset--color--accent);
}

.wc-block-product-filter-removable-chips__item,
.wc-block-product-filter-chips__item,
.wc-block-product-filters__apply,
.wc-block-product-filters__open-overlay {
	border-radius: var(--radius-control);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
}

/* Zaznaczony filtr — wypełniona oliwka z kremowym tekstem. */
.wc-block-product-filter-chips__item[aria-checked="true"] {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base-alt);
}

/* -------------------------------------------------------------------------
   WooCommerce — szablony klasyczne

   Koszyk, kasa i moje konto Woo renderuje shortcodem, więc theme.json ich
   nie dotyka.
   ---------------------------------------------------------------------- */

.woocommerce ul.products {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
}

.woocommerce ul.products li.product {
	background: var(--wp--preset--color--surface-card);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	display: flex;
	flex-direction: column;
	float: none !important;
	margin: 0 !important;
	overflow: hidden;
	padding: 0 var(--space-5) var(--space-5);
	transition: box-shadow var(--duration-base) var(--easing-standard),
		transform var(--duration-base) var(--easing-standard);
	width: auto !important;
}

.woocommerce ul.products li.product:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
}

.woocommerce ul.products li.product a img {
	border-radius: 0;
	height: 260px;
	margin: 0 calc(-1 * var(--space-5)) var(--space-5);
	object-fit: cover;
	transition: transform var(--duration-slow) var(--easing-entrance);
	width: calc(100% + var(--space-5) * 2);
}

.woocommerce ul.products li.product:hover a img {
	transform: scale(1.04);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	color: var(--wp--preset--color--primary);
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 500;
	padding: 0;
}

.woocommerce ul.products li.product .price {
	color: var(--wp--preset--color--primary);
	font-family: var(--font-body);
	font-size: var(--text-md);
	font-weight: 500;
	line-height: 1.2;
	margin: auto 0 0;
	padding-top: var(--space-4);
}

.woocommerce ul.products li.product .price del {
	color: var(--wp--preset--color--contrast-muted);
	font-weight: 400;
	opacity: 1;
}

.woocommerce ul.products li.product .button {
	align-items: center;
	background-color: transparent;
	border: 1px solid var(--hairline-strong);
	color: var(--wp--preset--color--primary);
	display: flex;
	font-size: var(--text-sm);
	gap: var(--space-2);
	justify-content: center;
	line-height: 1.2;
	margin-top: var(--space-2);
	min-height: var(--control-h-sm);
	padding: var(--pad-control-sm);
	width: 100%;
}

.woocommerce ul.products li.product .button::before {
	background-color: currentColor;
	content: "";
	flex: none;
	height: var(--icon-sm);
	mask: var(--ico-bag) center / contain no-repeat;
	width: var(--icon-sm);
}

.woocommerce ul.products li.product .button:hover {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base-alt);
}

/* Plakietka promocji — ten sam offset 16 px co w kolekcji blokowej.
   Karta musi mieć `position: relative`, bo zdjęcie wychodzi poza padding
   ujemnym marginesem i bez tego plakietka zaczepiłaby się o `main`. */
.woocommerce ul.products li.product {
	position: relative;
}

.woocommerce ul.products li.product span.onsale {
	left: var(--space-4);
	position: absolute;
	right: auto;
	top: var(--space-4);
	z-index: 2;
}

.woocommerce span.onsale {
	align-items: center;
	background: var(--sale-soft);
	border-radius: var(--radius-pill);
	color: var(--sale);
	display: inline-flex;
	font-family: var(--font-body);
	font-size: var(--text-2xs);
	font-weight: 600;
	height: var(--badge-h);
	letter-spacing: var(--tracking-wider);
	line-height: 1;
	min-height: 0;
	min-width: 0;
	padding: 0 var(--space-3);
	text-transform: uppercase;
}