/* ==========================================================================
   Scheda prodotto: miniature della galleria
   BeTheme inizializza le miniature con Swiper a 5 per riga fisse, quindi con
   meno di cinque foto resta spazio vuoto a destra: qui si allargano fino a
   occupare tutta la riga. Le larghezze arrivano da uno stile inline di Swiper,
   per questo servono gli !important.
   ========================================================================== */

/* "al massimo cinque miniature": il primo li esiste come quintultimo o meno */
.woocommerce .mfn-product-gallery.mfn-thumbnails-bottom .flex-control-thumbs > li:first-child:nth-last-child(-n+5),
.woocommerce .mfn-product-gallery.mfn-thumbnails-bottom .flex-control-thumbs > li:first-child:nth-last-child(-n+5) ~ li {
	flex: 1 1 0 !important;
	width: auto !important;
}

/* l'immagine ha larghezza naturale 300px: senza questo non seguirebbe il li */
.woocommerce .mfn-product-gallery.mfn-thumbnails-bottom .flex-control-thumbs > li:first-child:nth-last-child(-n+5) img,
.woocommerce .mfn-product-gallery.mfn-thumbnails-bottom .flex-control-thumbs > li:first-child:nth-last-child(-n+5) ~ li img {
	width: 100% !important;
	height: auto !important;
}

/* se nelle opzioni del tema si imposta una spaziatura, l'ultima lascerebbe un
   vuoto a destra */
.woocommerce .mfn-product-gallery.mfn-thumbnails-bottom .flex-control-thumbs > li:last-child {
	margin-right: 0 !important;
}

/* frecce inutili quando le miniature ci stanno tutte */
.mfn-flex-control-thumbs-wrapper:not(:has(.flex-control-thumbs > li:nth-child(6))) .mfn-swiper-arrow {
	display: none;
}

/* --- Niente salti mentre la galleria si inizializza (CLS) -----------------
   WooCommerce la tiene a opacity 0 finche' lo script non ha finito, ma nel
   frattempo occupa spazio: per un attimo la foto diventa larga 6 volte e le
   miniature vengono tolte e rimesse, e tutto quello che sta sotto salta.
   Qui la galleria prende subito la sua altezza finale (foto quadrata + una
   riga di miniature quadrate, al massimo 5) e ritaglia il resto. Quando lo
   script porta opacity a 1 la regola non vale piu' e l'altezza e' la stessa. */
.woocommerce-product-gallery.mfn-thumbnails-bottom[style*="opacity: 0"] {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.woocommerce-product-gallery.mfn-thumbnails-bottom[style*="opacity: 0"]:has(.woocommerce-product-gallery__image:nth-child(2):last-child) { aspect-ratio: 2 / 3; }
.woocommerce-product-gallery.mfn-thumbnails-bottom[style*="opacity: 0"]:has(.woocommerce-product-gallery__image:nth-child(3):last-child) { aspect-ratio: 3 / 4; }
.woocommerce-product-gallery.mfn-thumbnails-bottom[style*="opacity: 0"]:has(.woocommerce-product-gallery__image:nth-child(4):last-child) { aspect-ratio: 4 / 5; }
.woocommerce-product-gallery.mfn-thumbnails-bottom[style*="opacity: 0"]:has(.woocommerce-product-gallery__image:nth-child(5)) { aspect-ratio: 5 / 6; }