/*
 * Jednolity rozmiar miniaturek produktów na wszystkich listach produktów
 * (sklep, kategorie/tagi, wyszukiwarka, "podobne produkty" na stronie
 * produktu) — patrz pełne wyjaśnienie w includes/class-shop-loop.php.
 *
 * Proporcja 3:4 (portret) celowo zamiast kwadratu 1:1 — zdjęcia produktów
 * w tym sklepie to w większości stojące sylwetki (spodnie, kurtki), więc
 * kwadrat obcinałby je bardziej agresywnie niż smuklejszy, "modowy" kadr.
 */
.woocommerce ul.products li.product figure,
.woocommerce ul.products li.product a.ct-media-container,
.woocommerce ul.products li.product a.woocommerce-loop-product__link,
ul.products li.product figure,
ul.products li.product a.ct-media-container,
ul.products li.product > a:first-of-type {
	display: block;
	overflow: hidden;
	border-radius: 10px;
}

/* !important celowo: Blocksy dokleja do KAŻDEGO zdjęcia produktu własny,
   inline'owy atrybut style="aspect-ratio: ..." wyliczony z rzeczywistych
   proporcji danego pliku (np. "10/13", "305/407") — to właśnie ta
   różnica w proporcjach poszczególnych zdjęć powodowała "skaczące"
   rzędy. Styl inline ZAWSZE wygrywa z regułą w zewnętrznym pliku CSS
   (wyższa specyficzność), więc bez !important ta reguła była całkowicie
   ignorowana — sprawdzone w surowym HTML-u strony /products/. */
.woocommerce ul.products li.product img,
ul.products li.product img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4 !important;
	object-fit: cover;
	object-position: center top;
	background: #fafafa;
	border-radius: 10px;
	transition: transform 0.35s ease;
}

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