/**
 * Carrousel — titre + rangée défilante (scroll-snap natif) de cartes
 * produit, flèches précédent/suivant. Tailles/police mesurées sur la
 * référence (grille produits mise en avant de la page d'accueil).
 */

.baba-carousel {
	padding-top: var(--baba-space-xl);
	padding-bottom: var(--baba-space-xl);
}

.baba-carousel__title {
	margin: 0 0 var(--baba-space-md);
	font-family: var(--baba-font-heading);
	font-weight: var(--baba-font-weight-normal);
	font-size: var(--baba-text-h2);
	letter-spacing: var(--baba-heading-letter-spacing);
	color: var(--baba-color-text-solid);
}

.baba-carousel__wrap {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--baba-space-sm);
}

.baba-carousel__track {
	display: flex;
	flex: 1 1 auto;
	/* Sans ça, un enfant flex garde min-width:auto par défaut : sa largeur
	   intrinsèque (tous les items, non coupés) forçait la piste — et donc
	   la page entière — à dépasser le viewport au lieu de rester coupée par
	   overflow-x:auto. */
	min-width: 0;
	gap: var(--baba-space-xs);
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.baba-carousel__track::-webkit-scrollbar {
	display: none;
}

.baba-carousel__item {
	flex: 0 0 calc((100% - 4 * var(--baba-space-xs)) / 5);
	scroll-snap-align: start;
}

.baba-carousel__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--baba-color-text);
	cursor: pointer;
}

.baba-carousel__arrow:hover,
.baba-carousel__arrow:focus {
	background-color: transparent;
	outline: none;
}

.baba-carousel__arrow--prev svg {
	transform: scaleX(-1);
}

.baba-carousel__arrow[disabled] {
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}

.baba-carousel__footer {
	display: flex;
	justify-content: center;
	margin-top: var(--baba-space-lg);
}

@media screen and (max-width: 989px) {
	.baba-carousel__item {
		flex-basis: calc((100% - 2 * var(--baba-space-xs)) / 3);
	}
}

@media screen and (max-width: 749px) {
	.baba-carousel__arrow {
		display: none;
	}

	.baba-carousel__item {
		flex-basis: 68%;
	}
}