/*
 * Gabarits d'attente du défilement infini.
 *
 * Ils occupent exactement la place d'une vignette produit — leur hauteur minimale est
 * mesurée sur une vignette réelle au moment de la pose — pour que le remplacement ne
 * décale jamais la page sous le doigt.
 */
.gb-squelette {
	--gb-squelette-fond: #f2eef0;
	--gb-squelette-eclat: #faf6f8;

	pointer-events: none;
	user-select: none;
}

.gb-squelette__image,
.gb-squelette__ligne {
	border-radius: 6px;
	background-color: var(--gb-squelette-fond);
	background-image: linear-gradient(
		100deg,
		var(--gb-squelette-fond) 0%,
		var(--gb-squelette-eclat) 45%,
		var(--gb-squelette-fond) 70%
	);
	background-size: 320% 100%;
	animation: gb-squelette-eclat 1.4s ease-in-out infinite;
}

.gb-squelette__image {
	/* 227 × 303 dans la grille : le même rapport que la photographie produit. */
	aspect-ratio: 3 / 4;
	width: 100%;
	border-radius: 10px;
}

.gb-squelette__ligne {
	height: 10px;
	margin-top: 14px;
}

.gb-squelette__ligne--rayon {
	width: 38%;
	height: 8px;
	margin-top: 18px;
}

.gb-squelette__ligne--titre {
	width: 82%;
	height: 12px;
}

.gb-squelette__ligne--prix {
	width: 46%;
}

@keyframes gb-squelette-eclat {
	from {
		background-position: 160% 0;
	}

	to {
		background-position: -60% 0;
	}
}

/*
 * Arrivée des vraies vignettes : une seule apparition, légèrement décalée d'une carte
 * à l'autre. Le décalage est posé en ligne par le script.
 */
.glow-bar-grid .grid-item.gb-arrivee {
	animation: gb-arrivee 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

@keyframes gb-arrivee {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/*
 * Le fondu que le thème applique à chaque image (`image-fade-in`, 0,5 s depuis
 * `opacity: 0; transform: scale(1.1)`) se déclenchait vignette par vignette, au gré
 * des chargements : c'est lui qui donnait l'aspect clignotant. Dans la grille de la
 * boutique, l'apparition est désormais gérée d'un seul tenant ci-dessus.
 */
#glow-bar-main-post .glow-bar-lazy-image--deferred img,
#glow-bar-main-post .glow-bar-lazy-image--deferred.m-img-loaded img {
	opacity: 1;
	animation: none;
	transform: none;
}

/* Le bouton « Charger plus » ne sert plus qu'aux robots en défilement infini. */
.woocommerce-pagination[data-type="infinite"] .shop-load-more-button {
	opacity: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.gb-squelette__image,
	.gb-squelette__ligne,
	.glow-bar-grid .grid-item.gb-arrivee {
		animation: none;
	}
}