/*
 * Karta produktu WooCommerce — dzielona między archiwum sklepu
 * (assets/css/layout/shop.css) i related products na stronie produktu
 * (assets/css/layout/single-product.css), bo oba renderują ten sam
 * override woocommerce/content-product.php. Ta klasa nie zawiera układu
 * siatki/karuzeli — tylko wygląd samej karty.
 *
 * Wymiary z Figmy przez jednostkę --u (tokens.css):
 * - mobile (360): render flakonu 360x290, pod nim na jasnym tle nazwa,
 *   autor i przycisk 321x38 (bez krótkiego opisu - Tura II),
 * - desktop (1728): render wypełnia całą kartę 864x992, nazwa, autor, opis
 *   i przycisk leżą na jego dolnej, jasnej części.
 * Zdjęcie karty = zdjęcie główne produktu (render 1200x2000). Kadr
 * ustawia object-position: wycinek renderu z Figmy przeliczony na
 * object-fit: cover (mobile 63.5% od góry, desktop dół renderu).
 *
 * Selektory z `body.woocommerce-page ul.products li.product` są potrzebne,
 * żeby wygrać specyficznością z natywnym arkuszem WooCommerce (obrazek i
 * przycisk w pętli produktów) bez !important.
 */
.tiere-product-card {
	display: flex;
	flex-direction: column;
	text-align: center;
	background-color: transparent;
}

.tiere-product-card__link {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.tiere-product-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 360 / 290;
	overflow: hidden;
	background-color: var(--color-panel-gray);
}

body.woocommerce-page ul.products li.product .tiere-product-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	object-position: 50% 63.5%;
}

/* Nazwa 14px (Tura II, było 11), 32px pod zdjęciem. */
.tiere-product-card__title {
	margin-top: calc(32 * var(--u));
	font-size: calc(14 * var(--u));
	font-weight: var(--font-weight-medium);
	line-height: calc(11.81 * var(--u));
	text-transform: uppercase;
	color: var(--color-ink);
}

/* Twórca 10px (Tura II, było 8). */
.tiere-product-card__author {
	margin-top: calc(10.19 * var(--u));
	font-size: calc(10 * var(--u));
	line-height: calc(8.44 * var(--u));
	text-transform: uppercase;
}

/* Figma (Tura II): na mobile krótki opis pod nazwą jest usunięty. */
.tiere-product-card__description {
	display: none;
}

/*
 * Przycisk w pętli: "Dodaj do koszyka" (produkt dostępny) albo natywne
 * "Dowiedz się więcej" WooCommerce (produkt niedostępny) — ten sam wygląd.
 */
body.woocommerce-page ul.products li.product.tiere-product-card a.button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(321 * var(--u));
	min-height: calc(38 * var(--u));
	margin: calc(34.56 * var(--u)) auto 0;
	padding: 0;
	border-radius: var(--radius-0);
	background-color: var(--color-brand-red);
	color: var(--color-white);
	font-size: calc(9.646 * var(--u));
	font-weight: var(--font-weight-medium);
	line-height: calc(16.69 * var(--u));
	opacity: 1;
}

body.woocommerce-page ul.products li.product.tiere-product-card a.button:hover,
body.woocommerce-page ul.products li.product.tiere-product-card a.button:focus-visible {
	background-color: var(--color-ink);
	color: var(--color-white);
}

/*
 * Po kliknięciu "Dodaj do koszyka" przy karcie nie pojawia się nic nowego:
 * bez ikony ładowania/potwierdzenia w przycisku i bez linku "Zobacz
 * koszyk" (WooCommerce dokleja go po przycisku). Jedyna informacja zwrotna
 * to licznik przy ikonie koszyka w nagłówku (inc/woocommerce.php,
 * tiere_cart_count_fragment). W trakcie żądania przycisk jest przygaszony.
 */
body.woocommerce-page ul.products li.product.tiere-product-card a.button.loading {
	opacity: 0.6;
}

body.woocommerce-page ul.products li.product.tiere-product-card a.button.loading::after,
body.woocommerce-page ul.products li.product.tiere-product-card a.button.added::after {
	content: none;
}

body.woocommerce-page ul.products li.product.tiere-product-card a.added_to_cart {
	display: none;
}

@media (min-width: 900px) {
	/* Render jest tłem całej karty; teksty i przycisk leżą na nim. */
	.tiere-product-card {
		position: relative;
		min-height: calc(992 * var(--u));
		background-color: var(--color-panel-gray);
	}

	.tiere-product-card__media {
		position: absolute;
		inset: 0;
		aspect-ratio: auto;
	}

	body.woocommerce-page ul.products li.product .tiere-product-card__media img {
		object-position: 50% 100%;
	}

	.tiere-product-card__title,
	.tiere-product-card__author,
	.tiere-product-card__description,
	body.woocommerce-page ul.products li.product.tiere-product-card a.button {
		position: relative;
	}

	/* Nazwa 714px od góry karty. */
	.tiere-product-card__title {
		margin-top: calc(714 * var(--u));
		font-size: calc(25 * var(--u));
		line-height: calc(28 * var(--u));
	}

	.tiere-product-card__author {
		margin-top: calc(5 * var(--u));
		font-size: calc(16 * var(--u));
		line-height: calc(20 * var(--u));
	}

	.tiere-product-card__description {
		display: block;
		width: calc(350 * var(--u));
		max-width: 100%;
		margin-top: calc(25 * var(--u));
		font-size: calc(14 * var(--u));
		line-height: calc(20 * var(--u));
	}

	/* Przycisk przy dolnej krawędzi panelu, na całą szerokość karty; między
	   przyciskami sąsiednich kart zostaje 5px szarej przerwy (Figma). */
	body.woocommerce-page ul.products li.product.tiere-product-card a.button {
		width: calc(100% - 2.5 * var(--u));
		min-height: calc(62 * var(--u));
		margin: auto calc(2.5 * var(--u)) 0 0;
		padding: 0;
		color: var(--color-cream);
		font-size: calc(20 * var(--u));
		line-height: calc(45.68 * var(--u));
	}

	body.woocommerce-page ul.products li.product.tiere-product-card:nth-child(even) a.button {
		margin: auto 0 0 calc(2.5 * var(--u));
	}

	body.woocommerce-page ul.products li.product.tiere-product-card a.button:hover,
	body.woocommerce-page ul.products li.product.tiere-product-card a.button:focus-visible {
		color: var(--color-cream);
	}
}