/*
 * Strona pojedynczego produktu — ładowane warunkowo na is_product() (patrz
 * inc/enqueue.php). Wymiary z Figmy przez jednostkę --u (tokens.css):
 * poniżej 900px ramka TIERE_mobile_shop (360px), od 900px ramka
 * TIERE_DESKTOP_shop (1728px). Układ jest na pełną szerokość okna.
 *
 * Selektor `div.product.type-product` (nie samo `.product`) celowo, żeby
 * nie złapać też `<li class="tiere-product-card product type-product">`
 * z kart w pętli/karuzeli related — to inny tag (div vs li).
 */

div.product.type-product {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
	div.product.type-product {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.single-product__media-band,
.related-carousel {
	grid-column: 1 / -1;
}

/*
 * Natywny markup WooCommerce daje panelowi zdjęcia klasy
 * `woocommerce-product-gallery ... images` i kolumnie info `summary
 * entry-summary` — więc `.woocommerce div.product div.images` i
 * `div.summary` z woocommerce-layout.css (width: 48%, float,
 * margin-bottom: 2em) nadal się stosują mimo że kontener jest gridem.
 * Selektor niżej ma więcej klas niż WC, więc wygrywa bez !important.
 */
div.product.type-product .woocommerce-product-gallery.images,
div.product.type-product .summary.entry-summary {
	float: none;
	width: 100%;
	margin: 0;
}

/*
 * Górny panel produktu: galeria renderów (flakon z przodu = zdjęcie główne,
 * flakon z tyłu, pudełko), markup w woocommerce/single-product/product-image.php,
 * sterowanie w assets/js/product-gallery.js.
 *
 * Figma: mobile panel 360x290, desktop 864x992. Na desktopie panel jest
 * rozciągany do wysokości wiersza, gdy kolumna informacji jest wyższa.
 * Wysokość panelu wynika z aspect-ratio, a slajdy leżą w nim absolutnie,
 * więc wczytywanie zdjęć nie przesuwa układu.
 */
.woocommerce-product-gallery {
	position: relative;
	aspect-ratio: 360 / 290;
	overflow: hidden;
	background-color: var(--color-panel-gray);
}

div.product.type-product .woocommerce-product-gallery.images {
	align-self: stretch;
}

/*
 * Tor slajdów: natywne przewijanie w poziomie ze scroll-snap (przesunięcie
 * palcem, gładzik, strzałki), pasek przewijania ukryty - stan pokazują
 * kreski. overscroll-behavior nie oddaje gestu nawigacji "wstecz" w
 * przeglądarce po dojściu do skraju.
 */
.tiere-gallery__track {
	position: absolute;
	inset: 0;
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.tiere-gallery__track::-webkit-scrollbar {
	display: none;
}

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

.tiere-gallery__track.is-dragging {
	scroll-snap-type: none;
	cursor: grabbing;
}

.tiere-gallery__slide {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

/*
 * Render wypełnia panel (object-fit: cover). Kadr z Figmy przeliczony na
 * object-position: mobile 63.5% od góry renderu (jak karta w listingu),
 * desktop 80.3% (wycinek 68.9% wysokości od punktu 25%). Wszystkie slajdy
 * mają geometrię zdjęcia głównego, więc kadr jest wspólny.
 */
div.product.type-product .woocommerce-product-gallery.images .tiere-gallery__image,
div.product.type-product .woocommerce-product-gallery.images .tiere-gallery__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	object-position: 50% 63.5%;
	-webkit-user-drag: none;
	user-select: none;
}

/*
 * Wskaźnik slajdów (Figma, grupa "slider"): poziome kreski, aktywna
 * #ff1a1a, pozostałe #989898.
 * - mobile: kreski 14.67x2.18, odstęp 5, środek linii 12px nad dolną
 *   krawędzią zdjęcia,
 * - desktop: kreski 28x3, odstęp 9, środek linii 49px nad dolną krawędzią.
 * Przycisk ma 24px wysokości (cel dotyku), kreskę rysuje ::before na jego
 * środku, więc kontener jest przesunięty o połowę przycisku (12px).
 * Kreski są wyśrodkowane w panelu; w ramce desktop Figmy grupa stoi ok.
 * 21px na prawo od środka zdjęcia, co traktujemy jako niedokładność
 * makiety (na mobile jest wyśrodkowana).
 */
.tiere-gallery__dots {
	--tiere-dot-width: calc(14.67 * var(--u));
	--tiere-dot-height: calc(2.18 * var(--u));
	--tiere-dot-gap: calc(5 * var(--u));
	position: absolute;
	left: 50%;
	bottom: calc(12 * var(--u) - 12px);
	display: flex;
	transform: translateX(-50%);
}

.tiere-gallery__dot {
	position: relative;
	width: calc(var(--tiere-dot-width) + var(--tiere-dot-gap));
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.tiere-gallery__dot::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--tiere-dot-width);
	height: var(--tiere-dot-height);
	background-color: #989898;
	transform: translate(-50%, -50%);
	transition: background-color 0.2s ease;
}

.tiere-gallery__dot[aria-current="true"]::before {
	background-color: var(--color-brand-red);
}

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

@media (min-width: 900px) {
	.woocommerce-product-gallery {
		aspect-ratio: 864 / 992;
	}

	div.product.type-product .woocommerce-product-gallery.images .tiere-gallery__image,
	div.product.type-product .woocommerce-product-gallery.images .tiere-gallery__placeholder {
		object-position: 50% 80.3%;
	}

	/*
	 * Runda III: kreski wyżej niż w Figmie (49 nad dołem), żeby były widoczne
	 * w pierwszym oknie, ale zawsze w wolnym miejscu pod produktem. Panel
	 * i zdjęcie skalują się tylko z szerokością (--u), więc położenie liczone
	 * z geometrii renderu 1200x2000 (object-position 80.3%) jest stałe przy
	 * każdej wysokości okna: render ma 1440 wysokości, wycinek zaczyna się
	 * 0.803 x 448 = 360 od góry, dolna krawędź flakonu / pudełka (y 1519 /
	 * 1537 w renderze) wypada 734 / 747 od góry panelu. Środek kresek: 40
	 * pod pudełkiem, czyli 992 - 747 - 40 = 205 nad dołem panelu (w procentach
	 * wysokości panelu, bo powyżej 1728px panel rośnie szybciej niż --u). Przy
	 * niskim oknie kreski mogą wymagać przewinięcia - nie nachodzą na zdjęcie
	 * produktu. Przy innej geometrii renderów przeliczyć.
	 */
	.tiere-gallery__dots {
		--tiere-dot-width: calc(28 * var(--u));
		--tiere-dot-height: calc(3 * var(--u));
		--tiere-dot-gap: calc(9 * var(--u));
		bottom: calc(205 / 992 * 100% - 12px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tiere-gallery__dot::before {
		transition: none;
	}
}

/*
 * Kolumna informacyjna. Figma (--u, tokens.css):
 * - mobile: margines boczny 19px, nazwa 17px pod panelem zdjęcia,
 * - desktop: kolumna 864x992, treść od 44px od lewej i 175px od góry.
 * Elementy stoją jeden pod drugim: nazwa -> podtytuł -> zakładki -> treść
 * zakładki -> cena -> pojemność i cena za 100 ml -> przycisk.
 */

.summary.entry-summary {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: calc(17 * var(--u)) calc(19 * var(--u)) calc(56 * var(--u));
	background-color: var(--color-cream);
	color: var(--color-ink);
}

/* Nazwa produktu: Stolzl Bold, mobile 13/14.29, desktop 44/50, czerwona. */
.product_title {
	font-size: calc(13 * var(--u));
	font-weight: var(--font-weight-bold);
	line-height: calc(14.29 * var(--u));
	text-transform: uppercase;
	color: var(--color-brand-red);
}

/*
 * Podtytuł ("This scent was influenced by ... | nazwa dropu"): Regular,
 * mobile 10px, desktop 22/26. Na mobile Figma ma interlinię 7.43px (mniejszą
 * niż rozmiar tekstu); tu jest 12px, żeby dłuższy podtytuł mógł się złamać
 * bez nakładania wierszy — marginesy są dobrane tak, że jednowierszowy tekst
 * stoi dokładnie tam, gdzie w projekcie. To samo dotyczy zakładek i ceny.
 */
.single-product__subtitle {
	margin: calc(3.7 * var(--u)) 0 calc(16 * var(--u));
	font-size: calc(10 * var(--u));
	line-height: calc(12 * var(--u));
	text-transform: uppercase;
}

/*
 * Informacja o limitowanej edycji (tiere_single_product_edition_note): ostatni
 * element każdego panelu zakładek, typografia i szerokość z panelu. Odstęp od
 * treści zakładki daje istniejący margines akapitów panelu
 * (.product-tabs__panel p:not(:last-child)). Desktop: zaraz pod treścią
 * aktywnej zakładki. Mobile: dosunięta do dołu obszaru zakładek o stałej
 * wysokości (components/tabs.css), w tym samym miejscu przy każdej zakładce.
 */
@media (max-width: 899px) {
	.summary.entry-summary .single-product__edition {
		margin-top: auto;
	}
}

/*
 * Cena główna: "CENA: 615 ZŁ" — Regular, wersaliki łącznie z walutą,
 * mobile 14px (Tura II, było 10), desktop 22/26.
 * Selektor z natywną klasą `.price`, żeby wygrać z regułą WooCommerce
 * `.woocommerce div.product p.price` bez !important.
 */
div.product.type-product .price.single-product__price {
	margin: calc(22 * var(--u)) 0 0;
	font-size: calc(14 * var(--u));
	line-height: calc(17 * var(--u));
	text-transform: uppercase;
	color: var(--color-ink);
}

/*
 * Pojemność i cena za 100 ml (inc/woocommerce.php) — informacje wymagane,
 * dodane poza projektem Figmy: dyskretne szare wiersze pod ceną, w skali
 * najmniejszego tekstu projektu (mobile 8/10, desktop 14/20).
 */
.summary.entry-summary .single-product__capacity,
.summary.entry-summary .single-product__unit-price {
	margin: calc(2 * var(--u)) 0 0;
	font-size: calc(8 * var(--u));
	line-height: calc(10 * var(--u));
	color: var(--color-muted);
}

/*
 * Natywny tekst stanu magazynowego WooCommerce (np. "2000 w magazynie") —
 * nieobecny w Figmie. Ukrywane wyłącznie prezentacyjnie na PDP; zarządzanie
 * stanem magazynowym w WooCommerce (admin, e-maile, itd.) zostaje nietknięte.
 */
.summary.entry-summary .stock {
	display: none;
}

/*
 * Formularz dodawania do koszyka. Natywny margin-bottom: 2em formularza
 * (WC) i jego clearfix ::before / ::after są zbędne w układzie flex.
 * Mobile: przycisk na całą szerokość kolumny (321x38). Desktop: przycisk
 * o szerokości treści (253x62), 40px pod ostatnim wierszem ceny.
 */
div.product.type-product .summary form.cart {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	margin: calc(14 * var(--u)) 0 0;
}

div.product.type-product .summary form.cart::before,
div.product.type-product .summary form.cart::after {
	display: none;
}

/*
 * Przycisk "Dodaj do koszyka" = przycisk bazowy z Figmy. Selektor
 * scope'owany przez `div.product.type-product`, żeby specyficzność pokonała
 * natywne reguły WooCommerce (`.woocommerce button.button.alt` itd.) bez
 * !important; hover ciemny jak w sekcji "buttons" projektu.
 */
div.product.type-product .single_add_to_cart_button.button {
	display: flex;
	align-items: center;
	justify-content: center;
	float: none;
	width: 100%;
	min-height: calc(38 * var(--u));
	margin: 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-transform: uppercase;
}

div.product.type-product .single_add_to_cart_button.button:hover,
div.product.type-product .single_add_to_cart_button.button:focus-visible {
	background-color: var(--color-ink);
	color: var(--color-white);
}

/*
 * Ilość na PDP ukryta wyłącznie wizualnie — pole nadal jest w DOM z domyślną
 * wartością 1, więc formularz add-to-cart wysyła poprawną ilość. Mechanizm
 * zmiany ilości w WooCommerce (koszyk, sold_individually itd.) zostaje
 * całkowicie nietknięty — to czysto prezentacyjna zmiana na tej jednej stronie.
 */
.summary form.cart .quantity {
	display: none;
}

@media (min-width: 900px) {
	.summary.entry-summary {
		padding: calc(175 * var(--u)) calc(44 * var(--u)) calc(56 * var(--u));
	}

	.product_title {
		font-size: calc(44 * var(--u));
		line-height: calc(50 * var(--u));
	}

	.single-product__subtitle {
		margin: calc(10 * var(--u)) 0 calc(34 * var(--u));
		font-size: calc(22 * var(--u));
		line-height: calc(26 * var(--u));
	}

	div.product.type-product .price.single-product__price {
		margin-top: calc(34 * var(--u));
		font-size: calc(22 * var(--u));
		line-height: calc(26 * var(--u));
	}

	.summary.entry-summary .single-product__capacity,
	.summary.entry-summary .single-product__unit-price {
		margin-top: calc(4 * var(--u));
		font-size: calc(14 * var(--u));
		line-height: calc(20 * var(--u));
	}

	div.product.type-product .summary form.cart {
		align-items: flex-start;
		margin-top: calc(40 * var(--u));
	}

	div.product.type-product .single_add_to_cart_button.button {
		width: auto;
		min-height: calc(62 * 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));
	}

	div.product.type-product .single_add_to_cart_button.button:hover,
	div.product.type-product .single_add_to_cart_button.button:focus-visible {
		color: var(--color-cream);
	}
}

/*
 * Sekcja mediów (template-parts/woocommerce/single-product-media-band.php).
 *
 * Figma mobile (360): zdjęcie 1 360x405.87, wideo 360x411, cytat z autorem,
 * zdjęcie 2 360x412; zdjęcia 3 nie ma. Figma desktop (1728): dwa wiersze po
 * dwie komórki 864x1079 (4:5; zdjęcie 1 | zdjęcie 2, zdjęcie 3 | wideo),
 * między nimi cytat z autorem.
 *
 * W DOM elementy są w kolejności desktopowej; kolejność mobile ustawia
 * `order`. Brakujący element po prostu nie istnieje w DOM, więc pozostałe
 * zsuwają się bez przerw.
 */
.single-product__media-band {
	display: flex;
	flex-direction: column;
	background-color: var(--color-cream);
}

.single-product__media-cell {
	position: relative;
	overflow: hidden;
}

.single-product__media-cell--photo-1 {
	order: 1;
	aspect-ratio: 360 / 405.87;
}

.single-product__media-cell--video {
	order: 2;
	aspect-ratio: 360 / 411;
}

.single-product__media-cell--photo-2 {
	order: 4;
	aspect-ratio: 360 / 412;
}

.single-product__media-cell--photo-3 {
	display: none;
}

/*
 * Zdjęcia i wideo wypełniają swoją ramkę (object-fit: cover). Pliki w
 * galerii produktu są już wycięte do kadru komórki desktopowej z Figmy
 * (4:5), więc na desktopie wchodzą 1:1, a na mobile są lekko przycięte
 * z góry i z dołu. Dwie klasy w selektorze, żeby wygrać z `.woocommerce
 * img` (max-width, height: auto).
 */
.single-product__media-cell .single-product__media-asset {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/*
 * Cytat i autor: Stolzl Bold, wersaliki, wyśrodkowane. Mobile 12/18 w polu
 * 302px (Tura II, było 10/16 w 245px), 41px pod wideo, autor 12/16 5px pod
 * cytatem, 36px do zdjęcia. Desktop 34/43 w polu 1409px, odstępy
 * 121 / 19 / 95 (Figma, karta Juicy Boost).
 */
.single-product__media-quote {
	order: 3;
	box-sizing: content-box;
	width: calc(302 * var(--u));
	max-width: 100%;
	margin: 0 auto;
	padding: calc(41 * var(--u)) 0 calc(36 * var(--u));
	font-size: calc(12 * var(--u));
	font-weight: var(--font-weight-bold);
	line-height: calc(18 * var(--u));
	text-align: center;
	text-transform: uppercase;
}

.single-product__media-quote-text,
.single-product__media-quote-text p {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	color: var(--color-brand-red);
}

.single-product__media-quote-author {
	margin-top: calc(5 * var(--u));
	line-height: calc(16 * var(--u));
	color: var(--color-ink);
}

@media (min-width: 900px) {
	.single-product__media-band {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.single-product__media-cell,
	.single-product__media-quote {
		order: 0;
	}

	.single-product__media-cell {
		display: block;
		aspect-ratio: 864 / 1079;
	}

	/* Komórka bez pary: sama w wierszu, w szerokości jednej kolumny. */
	.single-product__media-cell--solo {
		grid-column: 1 / -1;
		justify-self: center;
		width: 50%;
	}

	.single-product__media-quote {
		grid-column: 1 / -1;
		width: calc(1409 * var(--u));
		padding: calc(121 * var(--u)) 0 calc(95 * var(--u));
		font-size: calc(34 * var(--u));
		line-height: calc(43 * var(--u));
	}

	.single-product__media-quote-author {
		margin-top: calc(19 * var(--u));
		line-height: calc(43 * var(--u));
	}
}

/*
 * "Odkryj więcej" - nagłówek nad produktami powiązanymi
 * (woocommerce/single-product/related.php). Obie sekcje stoją poza
 * div.product (tiere_relocate_related_products w inc/woocommerce.php),
 * więc mają tło na pełną szerokość okna.
 *
 * Figma mobile: tekst 12/18 w polu 245px (Tura II, było 10/16), 40px pod
 * sekcją mediów i 37px nad pierwszą kartą. Figma desktop: jeden wiersz
 * 34/43 w polu 1409px, 49px pod mediami i 137px nad kartami. Pierwsze dwa
 * słowa są czerwone (.text-accent), reszta ciemna.
 */
.related-heading {
	padding: calc(40 * var(--u)) 0 calc(37 * var(--u));
	background-color: var(--color-cream);
}

.related-carousel__heading {
	width: calc(245 * var(--u));
	max-width: 100%;
	margin: 0 auto;
	font-size: calc(12 * var(--u));
	font-weight: var(--font-weight-bold);
	line-height: calc(18 * var(--u));
	text-align: center;
	text-transform: uppercase;
	/* Figma mobile łamie wiersz po "zapachów," (wymuszony podział w tekście).
	   Tekst jest tłumaczalny, więc zamiast znacznika podziału wiersze są
	   wyrównywane długością, co daje ten sam podział. */
	text-wrap: balance;
	color: var(--color-ink);
}

/*
 * Produkty powiązane. Karta to ten sam komponent co na listingu sklepu
 * (components/product-card.css); tutaj jest tylko układ.
 *
 * Mobile (Figma): karty jedna pod drugą na jasnym tle, 53px odstępu,
 * 49px do stopki, bez karuzeli i bez strzałek.
 *
 * Selektory z `body.woocommerce-page` i klasą toru są potrzebne, żeby
 * wygrać z natywnym arkuszem WooCommerce (float, szerokość i marginesy
 * li.product, clearfix listy) oraz z regułami przycisku w karcie.
 */
.related-carousel__wrapper {
	position: relative;
}

body.woocommerce-page .related-carousel ul.products.related-carousel__track {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: calc(53 * var(--u)) 0;
	margin: 0;
	padding: 0 0 calc(49 * var(--u));
	list-style: none;
}

body.woocommerce-page .related-carousel ul.products.related-carousel__track::before,
body.woocommerce-page .related-carousel ul.products.related-carousel__track::after {
	content: none;
}

body.woocommerce-page .related-carousel ul.products.related-carousel__track li.product.tiere-product-card {
	float: none;
	clear: none;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.related-carousel__control,
.related-carousel__divider {
	display: none;
}

/*
 * Desktop (Figma): dwie karty 864x992 obok siebie na pełną szerokość, bez
 * odstępów i marginesów; kolejne karty dojeżdżają po kliknięciu strzałki.
 * Tor przewija się natywnie (scroll-snap), JS tylko steruje strzałkami
 * (assets/js/related-carousel.js).
 */
@media (min-width: 900px) {
	/* Figma (Tura II) miała 49px pod mediami i 137px nad kartami. Runda III:
	   klient prosi o wyrównanie - nagłówek na środku pasa, ta sama wysokość
	   pasa (49 + 137 = 2 x 93). */
	.related-heading {
		padding: calc(93 * var(--u)) 0;
	}

	.related-carousel__heading {
		width: calc(1409 * var(--u));
		font-size: calc(34 * var(--u));
		line-height: calc(43 * var(--u));
	}

	.related-carousel {
		background-color: var(--color-panel-gray);
	}

	body.woocommerce-page .related-carousel ul.products.related-carousel__track {
		display: flex;
		gap: 0;
		padding: 0;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scrollbar-width: none; /* Firefox */
	}

	body.woocommerce-page .related-carousel ul.products.related-carousel__track::-webkit-scrollbar {
		display: none; /* Chrome/Safari/Edge */
	}

	body.woocommerce-page .related-carousel ul.products.related-carousel__track li.product.tiere-product-card {
		flex: 0 0 50%;
		scroll-snap-align: start;
	}

	/*
	 * Przyciski kart na całą szerokość karty. Na listingu 5px szarej przerwy
	 * między przyciskami daje margines zależny od parzystości karty; tutaj
	 * karty się przesuwają, więc przerwę rysuje nieruchomy pasek na środku
	 * (.related-carousel__divider), a przyciski nie mają marginesów.
	 */
	body.woocommerce-page .related-carousel ul.products.related-carousel__track li.product.tiere-product-card a.button {
		width: 100%;
		margin: auto 0 0;
	}

	/* Figma: przyciski kończą się na 861px i zaczynają od 866px. */
	.related-carousel__divider {
		display: block;
		position: absolute;
		bottom: 0;
		left: calc(50% - 3 * var(--u));
		width: calc(5 * var(--u));
		height: calc(62 * var(--u));
		background-color: var(--color-panel-gray);
		pointer-events: none;
	}

	/*
	 * Strzałki: okrąg 63x63, środek na połowie wysokości karty (465px od
	 * góry), 26px od krawędzi okna. Figma pokazuje tylko "dalej"; "wstecz"
	 * jest jej lustrzanym odbiciem i pojawia się dopiero po przesunięciu
	 * karuzeli (atrybut hidden ustawia JS).
	 */
	.related-carousel__control {
		display: block;
		position: absolute;
		top: calc(465 * var(--u));
		z-index: 1;
		width: calc(63 * var(--u));
		height: calc(63 * var(--u));
		padding: 0;
		transition: opacity 0.2s ease;
	}

	.related-carousel__control[hidden] {
		display: none;
	}

	.related-carousel__control--next {
		right: calc(26 * var(--u));
	}

	.related-carousel__control--prev {
		left: calc(26 * var(--u));
	}

	.related-carousel__control:disabled {
		opacity: 0.3;
		cursor: default;
	}
}

.related-carousel__arrow {
	width: 100%;
	height: 100%;
}

/* Plik ikony ma kolor wpisany na stałe (black); w Figmie to #1e1e1c. */
.related-carousel__arrow circle {
	stroke: var(--color-ink);
}

.related-carousel__arrow path {
	fill: var(--color-ink);
}

.related-carousel__arrow--prev {
	transform: scaleX(-1);
}

/*
 * Powyżej 1728px --u przestaje rosnąć, a karta (50% okna) dalej się
 * poszerza. Przy stałej wysokości 992px render (object-fit: cover,
 * przyklejony do dołu) był powiększany i ucinał nakrętkę flakonu. Tutaj
 * karta rośnie proporcjonalnie do szerokości (864:992 jak w Figmie), razem
 * z odstępem nazwy i pozycją strzałki, więc kadr renderu zostaje taki sam
 * jak przy 1728px. Mechanizm przewijania bez zmian.
 */
@media (min-width: 1729px) {
	body.woocommerce-page .related-carousel ul.products.related-carousel__track li.product.tiere-product-card {
		min-height: calc(992 * 100vw / 1728);
	}

	.related-carousel__track .tiere-product-card__title {
		margin-top: calc(714 * 100vw / 1728);
	}

	.related-carousel__control {
		top: calc(465 * 100vw / 1728);
	}
}

/*
 * Stan "produkt niedostępny" (inc/stock-notify.php,
 * template-parts/woocommerce/single-product-stock-notify.php). Figma nie ma
 * projektu tego stanu — wygląd jest złożony z elementów projektu:
 * - napis "Produkt chwilowo niedostępny": typografia wiersza ceny, czerwony,
 * - "Powiadom mnie o dostępności": przycisk bazowy w miejscu "Dodaj do
 *   koszyka" (mobile na całą szerokość) — główna akcja tego stanu,
 * - formularz rozwijany pod przyciskiem: etykieta nad polem, pole z samą
 *   dolną linią i kwadratowy checkbox jak w projektach koszyka/kasy.
 * Zmieniony jest wyłącznie wygląd; markup, JS i logika modułu bez zmian.
 * Natywny tekst stanu WC (.stock) jest wyżej ukryty, ten blok go zastępuje.
 */
.stock-notify {
	width: 100%;
	margin-top: calc(10 * var(--u));
}

.stock-notify[hidden],
.stock-notify__message[hidden] {
	display: none;
}

.stock-notify__status {
	margin: 0;
	font-size: calc(10 * var(--u));
	line-height: calc(12 * var(--u));
	text-transform: uppercase;
	color: var(--color-brand-red);
}

.stock-notify__title {
	margin: calc(14 * var(--u)) 0 0;
	font-size: inherit;
	font-weight: inherit;
}

/*
 * Trigger rozwijanego formularza jako przycisk bazowy (Figma, sekcja
 * "buttons"): czerwony, po najechaniu ciemny. Stan rozwinięcia niesie
 * aria-expanded; bez znaku +/-.
 */
.stock-notify__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: calc(38 * var(--u));
	padding: 0 calc(7.45 * var(--u));
	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-transform: uppercase;
	transition: background-color 0.2s ease;
}

.stock-notify__toggle:hover,
.stock-notify__toggle:focus-visible {
	background-color: var(--color-ink);
}

.stock-notify__panel {
	margin-top: calc(16 * var(--u));
}

.stock-notify__panel[hidden] {
	display: none;
}

.stock-notify__field {
	margin: 0 0 calc(14 * var(--u));
}

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

/*
 * Pole z samą dolną linią. Wpisywany tekst ma na mobile co najmniej 16px
 * (ustalona zasada dla pól formularzy — inaczej iPhone przybliża stronę po
 * dotknięciu pola); od 900px rozmiar z projektu.
 */
.stock-notify__field input[type="email"] {
	display: block;
	width: 100%;
	padding: 0 0 calc(5 * var(--u));
	font: inherit;
	font-size: max(16px, calc(8 * var(--u)));
	line-height: 1.5;
	color: var(--color-ink);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--color-muted);
	border-radius: var(--radius-0);
	outline: 0;
}

.stock-notify__field input[type="email"]:focus-visible {
	border-bottom-color: var(--color-ink);
}

.stock-notify__consent {
	display: flex;
	align-items: flex-start;
	gap: calc(13 * var(--u));
	margin: 0 0 calc(14 * var(--u));
	font-size: calc(8 * var(--u));
	line-height: calc(11 * var(--u));
}

/* Kwadratowy checkbox z projektu kasy: mobile 15px, desktop 36px. */
.stock-notify__consent input {
	flex: none;
	appearance: none;
	-webkit-appearance: none;
	width: calc(15 * var(--u));
	height: calc(15 * var(--u));
	margin: 0;
	border: 1px solid var(--color-ink);
	border-radius: var(--radius-0);
	background-color: transparent;
	cursor: pointer;
}

.stock-notify__consent input:checked {
	background-color: var(--color-ink);
	box-shadow: inset 0 0 0 calc(3 * var(--u)) var(--color-cream);
}

.stock-notify__consent input:focus-visible {
	outline: 1px solid var(--color-ink);
	outline-offset: 2px;
}

.stock-notify__consent a {
	text-decoration: underline;
}

/* Honeypot - poza ekranem, nie display:none (część botów to sprawdza). */
.stock-notify__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Wysyłka formularza: przycisk bazowy. Selektor scope'owany tak samo jak
   .single_add_to_cart_button, żeby pokonać `.woocommerce button.button`. */
div.product.type-product .stock-notify .stock-notify__submit.button {
	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-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));
}

div.product.type-product .stock-notify .stock-notify__submit.button:hover,
div.product.type-product .stock-notify .stock-notify__submit.button:focus-visible {
	background-color: var(--color-ink);
	color: var(--color-white);
}

div.product.type-product .stock-notify .stock-notify__submit.button:disabled {
	opacity: 0.6;
}

.stock-notify__message {
	margin: calc(10 * var(--u)) 0 0;
	font-size: calc(10 * var(--u));
	line-height: calc(14 * var(--u));
}

.stock-notify__message.is-error {
	color: var(--color-red-dark);
}

/* Po udanym zapisie (JS) zostaje tylko komunikat. Przycisk wysyłki ma
   wyżej selektor o większej specyficzności (display: flex), więc jest tu
   ukrywany osobną, równie mocną regułą. */
.stock-notify__form.is-done > :not(.stock-notify__message),
div.product.type-product .stock-notify .stock-notify__form.is-done .stock-notify__submit.button {
	display: none;
}

.stock-notify__form.is-done .stock-notify__message {
	margin-top: 0;
}

.stock-notify__admin-hint {
	margin: calc(10 * var(--u)) 0 0;
	padding: calc(8 * var(--u));
	font-size: calc(8 * var(--u));
	line-height: calc(11 * var(--u));
	border: 1px dashed var(--color-muted);
}

@media (min-width: 900px) {
	.stock-notify {
		max-width: calc(659 * var(--u));
		margin-top: calc(20 * var(--u));
	}

	.stock-notify__status {
		font-size: calc(22 * var(--u));
		line-height: calc(26 * var(--u));
	}

	.stock-notify__title {
		margin-top: calc(40 * var(--u));
	}

	.stock-notify__toggle {
		display: inline-flex;
		width: auto;
		min-height: calc(62 * 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));
	}

	.stock-notify__panel {
		margin-top: calc(34 * var(--u));
	}

	.stock-notify__field {
		margin-bottom: calc(26 * var(--u));
	}

	.stock-notify__field label {
		font-size: calc(18 * var(--u));
		line-height: calc(26 * var(--u));
	}

	.stock-notify__field input[type="email"] {
		padding: calc(11 * var(--u)) 0 calc(5 * var(--u));
		font-size: calc(18 * var(--u));
		line-height: calc(26 * var(--u));
	}

	.stock-notify__consent {
		gap: calc(31 * var(--u));
		margin-bottom: calc(34 * var(--u));
		font-size: calc(18 * var(--u));
		line-height: calc(26 * var(--u));
	}

	.stock-notify__consent input {
		width: calc(36 * var(--u));
		height: calc(36 * var(--u));
	}

	.stock-notify__consent input:checked {
		box-shadow: inset 0 0 0 calc(7 * var(--u)) var(--color-cream);
	}

	div.product.type-product .stock-notify .stock-notify__submit.button {
		display: inline-flex;
		width: auto;
		min-height: calc(62 * 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));
	}

	div.product.type-product .stock-notify .stock-notify__submit.button:hover,
	div.product.type-product .stock-notify .stock-notify__submit.button:focus-visible {
		color: var(--color-cream);
	}

	.stock-notify__message {
		margin-top: calc(20 * var(--u));
		font-size: calc(18 * var(--u));
		line-height: calc(26 * var(--u));
	}

	.stock-notify__admin-hint {
		padding: calc(12 * var(--u));
		font-size: calc(14 * var(--u));
		line-height: calc(20 * var(--u));
	}
}