/*
 * Grille du catalogue (page Acheter et archives de taxonomies produit, body.tm-catalog-page) —
 * cf. inc/functions-catalog.php.
 *
 * Maquette « Catalogue Produits » : 4 colonnes et 20 px d'écart (--space-5) sur ordinateur ;
 * 2 colonnes et 12 px (--space-3) sur mobile ; 3 colonnes entre 768 et 1023 px (non dessiné dans
 * la maquette), pour garder des cartes lisibles. La ligne .row de Besa passe de flexbox à une grille
 * CSS ; les largeurs en % de ses colonnes sont neutralisées. body.tm-catalog-page et div.product
 * donnent la priorité sur les sélecteurs de Besa, dont la règle mobile
 * « body.tbay-body-mobile-product-two .tbay-filter + .products-grid .row > .product » (max-width: 50 %).
 */

body.tm-catalog-page .display-products.products-grid > .row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-5);
	margin: 0;
}

/* Clearfix de Bootstrap (.row::before/::after) : ils deviendraient des cases vides de la grille. */
body.tm-catalog-page .display-products.products-grid > .row::before,
body.tm-catalog-page .display-products.products-grid > .row::after {
	content: none;
}

body.tm-catalog-page .display-products.products-grid > .row > div.product {
	display: flex;
	flex: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}

body.tm-catalog-page .display-products.products-grid > .row > div.product > .tm-pcard {
	width: 100%;
}

@media (max-width: 1023px) {
	body.tm-catalog-page .display-products.products-grid > .row {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	body.tm-catalog-page .display-products.products-grid > .row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-3);
	}
}

/* ---------- Carte de réassurance (inc/functions-catalog.php) ----------
 * Une seule carte, sur toute la 3e rangée : 2 rangées de produits avant elle, quel que soit le
 * nombre de colonnes (8 produits sur ordinateur, 6 en tablette, 4 sur mobile). Les produits suivants
 * se placent automatiquement dans les rangées 2 et 4 et au-delà. En fin de grille (moins de 5
 * produits) : à sa place dans le flux.
 */

body.tm-catalog-page .display-products.products-grid > .row > div.tm-reassurance-slot {
	grid-column: 1 / -1;
	grid-row: 3;
	flex: none;
	width: auto;
	min-width: 0;
	max-width: none;
	margin: 0;
	padding: 0;
}

body.tm-catalog-page .display-products.products-grid > .row > div.tm-reassurance-slot--end {
	grid-row: auto;
}