/* ============================================================
   Epifyt — Masonry boutique WooCommerce
   Site : adrien-noat.fr
   Cible : archive produit (boutique, catégories, tags)
   Dépend de : shop-masonry.js
   IMPORTANT : la valeur de --masonry-row doit rester identique
   à la constante ROW du fichier JS.
   ============================================================ */

:root {
	--masonry-row: 8px;   /* unité de base du calcul des spans */
	--masonry-gap-x: 32px;
	--masonry-gap-y: 48px;
}

/* ------------------------------------------------------------
   1. Conteneur de la grille
   ------------------------------------------------------------ */

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: var(--masonry-row);
	align-items: start;              /* évite l'étirement des cartes */
	column-gap: var(--masonry-gap-x);
	row-gap: 0;                      /* l'espacement passe par le padding */
	flex-wrap: initial;              /* neutralise un flex éventuel de Salient */
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;                   /* supprime les clearfix de thème */
}

/* ------------------------------------------------------------
   2. Carte produit
   ------------------------------------------------------------ */

.woocommerce ul.products li.product.product.product,
.woocommerce-page ul.products li.product.product.product {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding-bottom: var(--masonry-gap-y) !important;
	float: none !important;
	clear: none !important;
	height: auto !important;
	min-height: 0 !important;
	grid-row-end: span 40;
}



/* ------------------------------------------------------------
   3. Visuel produit
   Salient utilise .product-image-wrap (+ .has-hover-image)
   ------------------------------------------------------------ */

/* Force la carte et ses conteneurs internes à occuper la colonne */
.woocommerce ul.products li.product > *,
.woocommerce ul.products li.product .product-wrap,
.woocommerce ul.products li.product .product-image-wrap,
.woocommerce ul.products li.product .product-image-wrap > a {
	display: block;
	width: 100% !important;
	max-width: none !important;
	float: none !important;
}

.woocommerce ul.products li.product .product-image-wrap img {
	max-width: none !important;
}

/* ------------------------------------------------------------
   4. Responsive
   ------------------------------------------------------------ */

@media (max-width: 999px) {
	:root {
		--masonry-gap-x: 20px;
		--masonry-gap-y: 20px;
	}

	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: 1fr;
	}

	/* En une colonne, le masonry n'a plus d'objet : on rend la main au flux */
	.woocommerce ul.products li.product {
		grid-row-end: auto !important;
	}
}

/* ------------------------------------------------------------
   5. Repli sans JavaScript
   ------------------------------------------------------------ */

.no-js .woocommerce ul.products,
.no-js .woocommerce-page ul.products {
	grid-auto-rows: auto;
	row-gap: var(--masonry-gap-y);
}

.no-js .woocommerce ul.products li.product {
	grid-row-end: auto;
	padding-bottom: 0;
}

/* Neutralise le masonry natif de Salient au-delà de 1300px */
@media (min-width: 1300px) {

	.woocommerce ul.products,
	.woocommerce-page ul.products {
		display: grid !important;
		position: static !important;
		height: auto !important;
	}

	.woocommerce ul.products li.product,
	.woocommerce-page ul.products li.product {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		right: auto !important;
		transform: none !important;
		width: 100% !important;
		max-width: 100% !important;
		flex: none !important;
	}
}

/* Le fond de carte s'arrête avant l'espacement vertical */
.woocommerce ul.products li.product .background-color-expand {
	top: 0 !important;
	bottom: var(--masonry-gap-y) !important;
	height: auto !important;
}