/*
 * L'immagine nelle card del catalogo: dimensione del riquadro e modo di occuparlo.
 * Il campo che comanda il secondo sta in `inc/immagine-card.php`.
 *
 * PERCHE' STA QUI E NON NEL TEMPLATE
 * Fino al 2026-08-27 queste regole vivevano nel CSS personalizzato del template
 * 374, sul widget `83c7559`, e l'unico ancoraggio era quell'id. Un id di widget
 * cambia quando si ricostruisce l'elemento: e' cosi' che e' morto `icone.css` il
 * 2026-08-25, in silenzio e senza errori. Qui l'ancoraggio sono le classi
 * strutturali di Elementor, che sopravvivono a una ricostruzione della card.
 *
 * SPECIFICITA'
 * `.elementor.e-loop-item.product` sono tre classi sullo stesso elemento — le
 * mette WordPress via `post_class`, che e' da dove Elementor le prende — piu'
 * `.elementor-widget-image` fa quattro. Bastano a vincere su qualunque regola
 * che il template dovesse riacquistare in futuro, che ne userebbe tre.
 *
 * SE UN GIORNO LA CARD AVESSE DUE IMMAGINI
 * Queste regole le prenderebbero entrambe. Oggi il widget immagine nella card
 * e' uno solo (template 374, verificato); se ne comparisse un secondo andra'
 * distinto qui.
 */

/* -------------------------------------------------------------------------
 * 1) Il riquadro. Altezza fissa: e' cio' che allinea le card fra loro.
 * ---------------------------------------------------------------------- */
.elementor.e-loop-item.product .elementor-widget-image img {
	width: 100% !important;
	height: 340px !important;
	display: block !important;
	max-height: none !important;
	aspect-ratio: auto !important;
}

/* -------------------------------------------------------------------------
 * 2) Come l'immagine occupa il riquadro.
 *    Predefinito: intera, nessun ritaglio. E' la scelta sicura, perche'
 *    ritagliare una copertina ne taglia il titolo.
 * ---------------------------------------------------------------------- */
.elementor.e-loop-item.product .elementor-widget-image img {
	object-fit: contain !important;
	object-position: center !important;
}

/* Eccezione, scelta prodotto per prodotto dal pannello: riempie e ritaglia.
 * `top` e non `center`: sulle foto di abbigliamento taglia l'orlo invece
 * della testa, che e' l'errore meno visibile dei due. */
.elementor.e-loop-item.product.lds-img-riempi .elementor-widget-image img {
	object-fit: cover !important;
	object-position: center top !important;
}
