/*
 * Mise en grille des produits sur la page "La Boutique" (boutique-v2, ID 46857).
 * Le thème n'affiche pas les listes WooCommerce en grille : on force une grille
 * responsive sur ul.products. À utiliser avec UN shortcode [products ids="..."
 * columns="4"] par section (au lieu d'un [product id] par produit).
 */

.page-id-46857 ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin: 0 0 2.5em;
	padding: 0;
	list-style: none;
}

/* Neutralise le clearfix WooCommerce (::before/::after) qui, en mode grid,
   créerait des cellules vides (colonne vide en 1ère position). */
.page-id-46857 ul.products::before,
.page-id-46857 ul.products::after {
	content: none;
	display: none;
}

/* Neutralise le float/largeur fixe du thème sur les items */
.page-id-46857 ul.products li.product {
	width: auto;
	float: none;
	clear: none;
	margin: 0;
}

/* Image produit homogène */
.page-id-46857 ul.products li.product img {
	width: 100%;
	height: auto;
	margin: 0 0 0.75em;
}

/* Tablette : 2 colonnes */
@media (max-width: 980px) {
	.page-id-46857 ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile : 1 colonne */
@media (max-width: 600px) {
	.page-id-46857 ul.products {
		grid-template-columns: 1fr;
	}
}