/*
 * Page produit WooCommerce (desktop uniquement, >= 768px) :
 * - vraies vignettes (images) dans une colonne à gauche de l'image
 *   principale ;
 * - en dessous, une rangée de tirets pour naviguer/scroller entre les
 *   images (générée par assets/js/product-gallery.js).
 *
 * Sur mobile, la galerie garde son comportement WooCommerce par défaut
 * (vignettes en ligne sous l'image) — non modifié ici.
 *
 * !important est nécessaire par endroits : le CSS natif de WooCommerce
 * définit déjà .flex-control-thumbs li (width: 25%; float: left) et
 * .flex-control-thumbs img (opacity: .5), et l'ordre de chargement des
 * feuilles de style entre plugin/thème n'est pas garanti.
 */

@media (min-width: 768px) {
	.woocommerce-product-gallery {
		display: flex !important;
		align-items: flex-start !important;
		gap: 28px !important;
		max-width: 600px !important;
	}
	.woocommerce-product-gallery .flex-viewport {
		order: 2 !important;
		flex: 1 1 auto !important;
		min-width: 0 !important;
	}

	/* Conteneur [vignettes + tirets], créé par product-gallery.js. */
	.woocommerce-product-gallery .zorya-gallery-left {
		order: 1 !important;
		flex: 0 0 auto !important;
		display: flex;
		flex-direction: column;
		gap: 20px;
		width: 76px;
	}

	.woocommerce-product-gallery .flex-control-thumbs {
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 10px !important;
		overflow: visible !important;
	}
	.woocommerce-product-gallery .flex-control-thumbs li {
		position: relative !important;
		float: none !important;
		width: 100% !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}
	.woocommerce-product-gallery .flex-control-thumbs li img {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		max-width: none !important;
		aspect-ratio: 3 / 4;
		object-fit: cover !important;
		margin: 0 !important;
		opacity: 0.55 !important;
		cursor: pointer;
		transition: opacity 0.2s ease;
	}
	.woocommerce-product-gallery .flex-control-thumbs li img:hover,
	.woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
		opacity: 1 !important;
	}

	/* Rangée horizontale de tirets, sous la colonne de vignettes : toujours
	   sur une seule ligne, chaque tiret se réduit automatiquement en largeur
	   selon le nombre de photos (flex-basis partagée, pas de retour à la
	   ligne). */
	.zorya-gallery-dashes {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		gap: 6px;
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.zorya-gallery-dash {
		display: block;
		flex: 1 1 0;
		min-width: 0;
		padding: 8px 0;
		border: none;
		background: none;
		cursor: pointer;
	}
	.zorya-gallery-dash::before {
		content: "";
		display: block;
		width: 100%;
		height: 2px;
		background: #d0d0d0;
		transition: background-color 0.2s ease, height 0.2s ease;
	}
	.zorya-gallery-dash.is-active::before {
		height: 3px;
		background: #111111;
	}
}

/* Sur mobile, la colonne/rangée de tirets custom n'a pas d'utilité. */
@media (max-width: 767.98px) {
	.zorya-gallery-dashes {
		display: none;
	}
}