/*
 * Listing sklepu. Wymiary 1:1 z Figmy przez jednostkę --u (tokens.css):
 * poniżej 900px wartości z ramki TIERE_mobile_shop_general (360px), od
 * 900px z ramki TIERE_DESKTOP_shop_general (1728px). Wszystkie sekcje są
 * na pełną szerokość okna. Wygląd samej karty: components/product-card.css.
 */

/* Baner + nagłówek (tylko główna strona sklepu, patrz tiere_shop_intro()). */

.shop-intro__banner,
.shop-media-band__media {
	display: block;
	position: relative;
	overflow: hidden;
	background-color: var(--color-panel-gray);
}

.shop-intro__banner img,
.shop-media-band__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.shop-intro__banner {
	aspect-ratio: 360 / 208;
}

.shop-intro__inner {
	display: flex;
	justify-content: center;
	padding: calc(32 * var(--u)) 0;
}

/* Mobile 12/18 w polu 259px (Tura II, było 10/16 w 294px). */
.shop-intro__heading {
	width: calc(259 * var(--u));
	max-width: 100%;
	font-size: calc(12 * var(--u));
	font-weight: var(--font-weight-bold);
	line-height: calc(18 * var(--u));
	text-align: center;
	text-transform: uppercase;
	color: var(--color-ink);
}

.shop-intro__heading .text-accent {
	display: block;
}

@media (min-width: 900px) {
	.shop-intro__banner {
		aspect-ratio: 1728 / 807;
	}

	.shop-intro__inner {
		padding: calc(145 * var(--u)) 0 calc(141 * var(--u));
	}

	.shop-intro__heading {
		width: calc(1174 * var(--u));
		font-size: calc(34 * var(--u));
		line-height: calc(43 * var(--u));
	}
}

/*
 * Siatka: mobile 1 kolumna (53px między kartami, 43px do zdjęcia pod
 * siatką), desktop 2 kolumny stykające się ze sobą, bez odstępów.
 */

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

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

@media (min-width: 900px) {
	body.woocommerce-page ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0;
		padding-bottom: 0;
	}
}

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

/*
 * 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.
 *
 * Nazwa rośnie razem z szerokością (714/1728 okna), żeby została pod
 * flakonem. Karta rośnie tylko o to przesunięcie nazwy: teksty i przycisk
 * mają tu stałe px, więc 278px pod nazwą (992 - 714) to ten sam blok co
 * przy 1728px, bez dodatkowej pustej przestrzeni nad przyciskiem.
 * Kadr renderu (3:5) jest przypięty od góry: przy 1728px karta 864x992
 * pokazuje go od 448px skalowanego obrazu (1440 - 992), tu tak samo
 * w proporcji do szerokości, więc flakon z nakrętką wygląda jak przy 1728px.
 */
@media (min-width: 1729px) {
	body.woocommerce-page ul.products li.product.tiere-product-card {
		min-height: calc(278 * var(--u) + 714 * 100vw / 1728);
	}

	body.woocommerce-page ul.products .tiere-product-card__title {
		margin-top: calc(714 * 100vw / 1728);
	}

	body.woocommerce-page ul.products li.product .tiere-product-card__media img {
		object-position: 50% calc(-448 * 100vw / 1728);
	}
}

/* Zdjęcie pod siatką: mobile 360x453 bez logo, desktop 1728x996 z logo. */

.shop-media-band {
	position: relative;
}

.shop-media-band__media {
	aspect-ratio: 360 / 453;
}

.shop-media-band__logo {
	display: none;
}

@media (min-width: 900px) {
	.shop-media-band__media {
		aspect-ratio: 1728 / 996;
	}

	.shop-media-band__logo {
		display: block;
		position: absolute;
		top: 37.55%; /* 374 / 996 */
		left: calc(997 * var(--u));
		width: calc(476 * var(--u));
		color: var(--color-brand-red);
		pointer-events: none;
	}

	.shop-media-band__logo svg {
		width: 100%;
		height: auto;
	}
}

/* Paginacja (nie występuje w Figmie; pojawia się dopiero przy większej liczbie produktów). */

.woocommerce-pagination {
	margin: var(--space-8) auto;
	text-align: center;
	padding-inline: var(--container-padding-inline);
}

.woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	gap: var(--space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-pagination a.page-numbers,
.woocommerce-pagination span.page-numbers {
	font-size: var(--text-body);
	color: var(--color-ink);
}

.woocommerce-pagination span.page-numbers.current {
	font-weight: var(--font-weight-bold);
	color: var(--color-brand-red);
}