/**
 * La grille de la boutique.
 *
 * Les largeurs de colonne reprennent les règles de Divi pour la boucle
 * d'origine (`et_flex_column_6_24`, `_8_24_tablet`, `_12_24_phone`), avec
 * l'écart de 24 px de sa rangée. Les seuils sont ceux de Divi 5 sur ce site :
 * 980 px pour la tablette, 859 px pour le téléphone — et 767 px pour le choix
 * d'une ou deux colonnes, qui est celui du plugin.
 */

.tif-bq__grille {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	width: 100%;
}

.tif-bq__grille > .tif-carte {
	width: calc( 25% - 24px * 3 / 4 );
}

@media ( max-width: 980px ) {
	.tif-bq__grille > .tif-carte {
		width: calc( 33.3333% - 24px * 2 / 3 );
	}
}

@media ( max-width: 859px ) {
	.tif-bq__grille > .tif-carte {
		width: calc( 50% - 24px * 1 / 2 );
	}
}

@media ( max-width: 767px ) {
	html[data-tif-cols="1"] .tif-bq__grille > .tif-carte {
		width: 100%;
	}

	html[data-tif-cols="2"] .tif-bq__grille > .tif-carte {
		width: calc( 50% - 24px * 1 / 2 );
	}
}

/* Une carte écartée par un filtre disparaît de la grille, sans laisser de case
   vide : `hidden` seul ne suffit pas sur un élément dont l'affichage est
   redéclaré. */
.tif-bq__grille > [hidden] {
	display: none !important;
}

/* Aucun résultat : le même encadré que celui de la boucle d'origine. */
.tif-bq__vide {
	max-width: 46ch;
	margin: 0 auto;
	padding: clamp( 28px, 6vw, 52px ) clamp( 20px, 5vw, 40px );
	border: 1px solid var( --tif-border-soft, #ddd7c8 );
	border-radius: 28px;
	background: var( --tif-surface, #ffffff );
	text-align: center;
}

.tif-bq__vide[hidden] {
	display: none !important;
}

/* Une catégorie devenue vide quitte la ligne des rayons, comme le serveur la
   retire de son rendu : `hidden` doit l'emporter sur l'affichage de la
   pastille. */
.tif-pill[data-tif-tax][hidden] {
	display: none !important;
}