/* ------------------------------------------------------------------ */
/* Widget : Grille produits — mobile first                             */
/* ------------------------------------------------------------------ */

.lit-product-grid {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.lit-product-grid__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	padding: 0 10px;
}

/* ------------------------------------------------------------------ */
/* Animations au scroll                                                */
/* ------------------------------------------------------------------ */

.lit-product-grid__item {
	display: flex;
	flex-direction: column;
	opacity: 0;
	will-change: opacity, transform;
}

.lit-product-grid__item .product-card {
	flex: 1;
}

/* Dans l'éditeur Elementor, on désactive l'état initial invisible */
.elementor-editor-active .lit-product-grid__item {
	opacity: 1;
}

.lit-product-grid__item.is-visible[data-anim="fadeInUp"] {
	animation: lit-fadeInUp 0.65s ease forwards;
}

.lit-product-grid__item.is-visible[data-anim="fadeInLeft"] {
	animation: lit-fadeInLeft 0.65s ease forwards;
}

.lit-product-grid__item.is-visible[data-anim="fadeInRight"] {
	animation: lit-fadeInRight 0.65s ease forwards;
}

/* Légère latence sur la deuxième card de chaque rangée */
.lit-product-grid__row .lit-product-grid__item:nth-child(2).is-visible {
	animation-delay: 0.15s;
}

@keyframes lit-fadeInUp {
	from { opacity: 0; transform: translateY(48px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes lit-fadeInLeft {
	from { opacity: 0; transform: translateX(-48px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes lit-fadeInRight {
	from { opacity: 0; transform: translateX(48px); }
	to   { opacity: 1; transform: translateX(0); }
}

/* ------------------------------------------------------------------ */
/* Desktop                                                             */
/* ------------------------------------------------------------------ */

@media (min-width: 1025px) {
	.lit-product-grid {
		gap: 37px;
	}

	.lit-product-grid__row {
		gap: 29px;
		padding: 0;
	}

	.lit-product-grid__row--bottom {
		gap: 26px;
	}
}