/* ============================================================
   Boutique et archives — la grille produits.

   `woocommerce-layout` étant retiré, la grille est ENTIÈREMENT à nous :
   plus de `float`, plus de largeurs en pourcentage calculées par WooCommerce.
   Une grille CSS qui se réorganise seule, sans point de rupture à maintenir.
   ============================================================ */

.woocommerce ul.products,
.woocommerce-page ul.products {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--bepc-s-6);
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

/* WooCommerce pose un clearfix `::before` / `::after` sur `ul.products`, utile
   au temps des `float`. Dans un conteneur `grid`, ces pseudo-éléments
   deviennent des ÉLÉMENTS DE GRILLE : ils occupent les premières cases et
   décalent tous les produits d'un cran. Symptôme : un catalogue qui commence
   en deuxième colonne, sans qu'aucune règle ne parle de position. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	display: none;
}

.woocommerce ul.products li.product {
	width: auto;
	margin: 0;
	float: none;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--bepc-surface);
	border: 1px solid var(--bepc-border);
	border-radius: var(--bepc-radius);
	box-shadow: var(--bepc-shadow-sm);
	transition: transform var(--bepc-d-base) ease, box-shadow var(--bepc-d-base) ease;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: var(--bepc-shadow-card);
}

/* --- Vignette ---------------------------------------------------- */

.bepc-wc-produit__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--bepc-surface-soft);
	overflow: hidden;
}

.woocommerce ul.products li.product .bepc-wc-produit__media img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	border-radius: 0;
}

.bepc-wc-produit__badge {
	position: absolute;
	top: var(--bepc-s-3);
	inset-inline-start: var(--bepc-s-3);
}

.bepc-wc-produit--rupture .bepc-wc-produit__media img {
	filter: grayscale(0.7);
	opacity: 0.75;
}

.woocommerce ul.products li.product span.onsale {
	position: absolute;
	top: var(--bepc-s-3);
	inset-inline-end: var(--bepc-s-3);
	inset-inline-start: auto;
	margin: 0;
}

/* --- Corps de la carte ------------------------------------------- */

.woocommerce ul.products li.product .woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	gap: var(--bepc-s-2);
	padding: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: var(--bepc-s-4) var(--bepc-s-4) 0;
	font-family: var(--bepc-font-title);
	font-size: 1.05rem;
	line-height: 1.3;
	color: var(--bepc-encre);
}

.woocommerce ul.products li.product .price {
	margin: 0;
	padding: 0 var(--bepc-s-4);
	font-size: 1.1rem;
}

.woocommerce ul.products li.product .button {
	margin: auto var(--bepc-s-4) var(--bepc-s-4);
	text-align: center;
}

/* --- En-tête de la boutique -------------------------------------- */

.woocommerce .woocommerce-products-header {
	margin-bottom: var(--bepc-s-8);
}

.woocommerce .woocommerce-products-header__title {
	margin: 0;
}

.woocommerce .term-description {
	max-width: var(--bepc-max-text);
	color: var(--bepc-text-2);
}

/* --- Aucun produit ----------------------------------------------- */

.woocommerce .woocommerce-info.woocommerce-no-products-found,
.woocommerce-no-products-found .woocommerce-info {
	padding: var(--bepc-s-8);
	text-align: center;
}

/* --- Pagination --------------------------------------------------- */

.woocommerce nav.woocommerce-pagination ul {
	margin-top: var(--bepc-s-10);
	border: 0;
	display: flex;
	justify-content: center;
	gap: var(--bepc-s-2);
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	padding: var(--bepc-s-2) var(--bepc-s-4);
	border-radius: var(--bepc-radius-pill);
	color: var(--bepc-caramel);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--bepc-miel);
	color: var(--bepc-encre);
}