/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* =========================================================================
   P75 – kafel siatki produktów jest kwadratem, obraz siedzi w nim w całości
   =========================================================================
   Wyjątek od zasady „zero własnego CSS” (10.09): Woodmart nie ma na to opcji.
   W ustawieniach motywu nie istnieje pole proporcji obrazka w siatce, a w jego
   arkuszach nie ma ani jednej reguły `aspect-ratio` dla obrazka produktu –
   wysokość kafla bierze się wprost z wysokości pliku miniatury.

   Sam rozmiar miniatury (mu-plugin `fhz-miniatury.php`, dłuższy bok = 430)
   nie wystarcza: pionowe zdjęcie daje wtedy 287×430, a poziome 430×287, więc
   kafle nadal różniłyby się wysokością – tym razem w drugą stronę. Dopiero
   kwadratowe POLE o stałej proporcji wyrównuje wiersz przy każdej proporcji
   zdjęcia przychodzącego z Monitora.

   `object-fit: contain` = obraz wpisany w pole w całości: pionowy na pełną
   wysokość, poziomy na pełną szerokość, reszta pola zostaje pusta. Żadnego
   przycinania – to była decyzja Marka z 30.09.

   Zakres: wyłącznie kafel w siatce (`.wd-product`). Karta produktu, galeria
   i lightbox mają własne kontenery i nie są tu dotykane.

   Specyficzność: części arkuszy Woodmartu wczytują się `<link>`-ami w `<body>`,
   czyli PO stylach motywu potomnego – przy remisie wygrywa motyw. Dlatego oba
   selektory są o klasę mocniejsze od tego, co ustawia motyw
   (`.wd-product-thumb img`, 0,1,1).
   ------------------------------------------------------------------------- */

/* Pole trzyma WYŁĄCZNIE link ze zdjęciem głównym. Drugie zdjęcie (`.wd-product-img-hover`,
   to spod kursora) motyw pozycjonuje absolutnie NA tym polu i samo się do niego dopasowuje –
   nadanie mu `position: relative` wstawiłoby je z powrotem w przepływ i kafel z drugim zdjęciem
   robił się dwa razy wyższy (zmierzone: 930 px zamiast 465 px). */
.wd-product .wd-product-img-link {
	position: relative;
	aspect-ratio: 1 / 1;
}

/* Obraz WYJĘTY Z PRZEPŁYWU (`position: absolute`), a nie tylko rozciągnięty na 100%.
   Powód zmierzony, nie teoretyczny: obraz zostawiony w przepływie sam narzuca wysokość
   rodzicowi, a wtedy `aspect-ratio` ustępuje. Widać to w karuzeli „powiązane produkty”
   przy produkcie BEZ ZDJĘCIA: leniwie ładowany symbol zastępczy potrafi zostać dobrany
   ze `srcset` w wariancie 1500 px i rozpycha kafel do 1500 px wysokości (występuje też
   bez tego arkusza – sprawdzone na wersji z HEAD). Pozycjonowanie absolutne zamyka temat
   raz: pole trzyma proporcję niezależnie od tego, jaki plik wybierze przeglądarka. */
.wd-product .wd-product-img-link > img,
.wd-product .wd-product-img-link > picture,
.wd-product .wd-product-img-hover > img,
.wd-product .wd-product-img-hover > picture {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.wd-product .wd-product-img-link > picture > img,
.wd-product .wd-product-img-hover > picture > img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* Siatka produktów z BLOKU WooCommerce (`wc-block-grid`), a nie z motywu. Na tym sklepie renderuje ją
   blok „Nowe w sklepie” w PUSTYM koszyku. Kafle wyrównuje tam sam grid, ale obrazki miały różną
   wysokość (286×286 obok 286×429), więc nazwy i ceny stały na różnych poziomach – ta sama usterka
   co w siatce motywu, tylko inny markup.

   Tu proporcję dostaje SAM OBRAZEK, a nie jego kontener – odwrotnie niż w siatce motywu. Kontener bloku
   jest `inline-block`, więc jego szerokość liczy się z zawartości; wyjęcie obrazka z przepływu zostawiało
   go bez szerokości i kafel zapadał się do 139 px (zmierzone). Obrazek ma tu `width: 100%` od Woo, więc
   `aspect-ratio` liczy jego wysokość wprost z szerokości kolumny i żadnego cyklu nie ma. */
.wc-block-grid__product .wc-block-grid__product-image > img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	object-position: center;
}