/**
 * Biotifull Shoppable Videos — styles front.
 * Rendu calqué sur le carrousel shoppable de Fenty Beauty.
 */

.bsv-carousel {
	--bsv-gap: 12px;
	--bsv-vis-d: 7;
	--bsv-vis-t: 5;
	--bsv-vis-m: 3;
	--bsv-vis: var(--bsv-vis-d);
	--bsv-ratio-idle: 100 / 130;
	--bsv-ratio-active: 100 / 159;
	--bsv-radius: 8px;
	--bsv-buybox-bg: #ffffff;
	--bsv-btn: #111111;
	--bsv-btn-text: #ffffff;
	--bsv-border: #e6e6e6;
	--bsv-card-ratio: 100 / 163;

	position: relative;
	margin: 0 auto;
	box-sizing: border-box;
	font-family: inherit;
}

.bsv-carousel *,
.bsv-carousel *::before,
.bsv-carousel *::after {
	box-sizing: border-box;
}

/* ================= Viewport & piste ================= */

/*
 * Le viewport masque le débordement : c'est lui qui produit l'effet de cartes
 * coupées aux deux extrémités. La piste est déplacée par transform (pas de
 * défilement natif) afin de garder une carte parfaitement centrée.
 */
.bsv-viewport {
	overflow: hidden;
	width: 100%;
}

.bsv-track {
	display: flex !important;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--bsv-gap);
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	transition: transform 0.45s cubic-bezier( 0.4, 0, 0.2, 1 );
	will-change: transform;
}

/* ================= Carte ================= */

.bsv-card {
	/*
	 * Largeur calculée pour que les cartes des DEUX extrémités soient visibles
	 * à exactement 50 %.
	 *
	 * Avec N emplacements et les deux bords coupés en deux, la largeur occupée
	 * vaut (N-1) largeurs de carte + (N-1) gouttières. D'où :
	 *     largeur_carte = 100% / (N - 1) - gouttière
	 *
	 * La carte active étant centrée par le JS, le reliquat se répartit
	 * symétriquement : une demi-carte à gauche, une demi-carte à droite.
	 */
	flex: 0 0 calc(100% / (var(--bsv-vis) - 1) - var(--bsv-gap));
	min-width: 0;
	cursor: pointer;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.bsv-card::marker,
.bsv-card::before {
	content: none !important;
}

/*
 * Le conteneur interne porte un ratio fixe et organise ses enfants en colonne.
 * La vidéo prend l'espace restant (flex: 1) : replier la buy box fait donc
 * grandir la vidéo, exactement comme sur Fenty.
 */
.bsv-card__inner {
	display: flex;
	flex-direction: column;
}

/* Vidéo au repos : format compact. */
.bsv-video-wrap {
	aspect-ratio: var(--bsv-ratio-idle);
	transition: aspect-ratio 0.45s cubic-bezier( 0.4, 0, 0.2, 1 );
}

/* Carte active : vidéo plus haute, seule à être lue. */
.bsv-card.is-active {
	cursor: default;
}

.bsv-card.is-active .bsv-video-wrap {
	aspect-ratio: var(--bsv-ratio-active);
}

/* Les cartes inactives sont légèrement en retrait. */
.bsv-card:not(.is-active) .bsv-video-wrap {
	opacity: 0.92;
}

.bsv-card:not(.is-active):hover .bsv-video-wrap {
	opacity: 1;
}

/* ================= Vidéo ================= */

.bsv-video-wrap {
	position: relative;
	flex: 0 0 auto;
	width: 100%;
	border-radius: var(--bsv-radius);
	overflow: hidden;
	background: #efefef;
	transition: flex-basis 0.25s ease;
}

.bsv-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
	border-radius: inherit;
}

/* Repli si aspect-ratio n'est pas supporté. */
@supports not (aspect-ratio: 1 / 1) {
	.bsv-card__inner {
		height: 620px;
	}
}

/* Bouton son : cercle sombre en bas à droite de la vidéo. */
.bsv-sound-toggle {
	position: absolute;
	bottom: 12px;
	right: 12px;
	z-index: 2;
	width: 34px;
	height: 34px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba(20, 20, 20, 0.55);
	color: #fff;
	cursor: pointer;
	transition: background 0.15s ease;
}

.bsv-sound-toggle:hover,
.bsv-sound-toggle:focus-visible {
	background: rgba(20, 20, 20, 0.78);
}

.bsv-icon {
	display: inline-flex;
	line-height: 0;
}

.bsv-icon--sound {
	display: none;
}

.bsv-sound-toggle[aria-pressed="true"] .bsv-icon--muted {
	display: none;
}

.bsv-sound-toggle[aria-pressed="true"] .bsv-icon--sound {
	display: inline-flex;
}

/* Spinner de chargement vidéo. */
.bsv-spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 30px;
	margin: -15px 0 0 -15px;
	border: 3px solid rgba(0, 0, 0, 0.15);
	border-top-color: rgba(0, 0, 0, 0.55);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	animation: bsv-spin 0.8s linear infinite;
}

.bsv-video-wrap.is-loading .bsv-spinner {
	opacity: 1;
}

@keyframes bsv-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ================= Buy box ================= */

.bsv-buybox {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
	padding: 10px;
	background: var(--bsv-buybox-bg);
	border: 1px solid var(--bsv-border);
	border-radius: var(--bsv-radius);
	transition: padding 0.2s ease;
}

/* État replié : ne reste qu'une barre fine avec le chevron. */
.bsv-buybox.is-collapsed {
	padding: 4px 8px;
	justify-content: flex-end;
}

.bsv-buybox.is-collapsed .bsv-buybox__thumb,
.bsv-buybox.is-collapsed .bsv-buybox__info,
.bsv-buybox.is-collapsed .bsv-add-to-cart {
	display: none;
}

.bsv-buybox__thumb {
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	border-radius: 6px;
	overflow: hidden;
	background: #f6f6f6;
	display: block;
	box-shadow: none;
}

.bsv-buybox__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	margin: 0;
	border-radius: 0;
}

.bsv-buybox__info {
	flex: 1 1 auto;
	min-width: 0;
}

.bsv-buybox__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	color: #111;
	text-decoration: none;
	margin: 0 0 3px;
}

.bsv-buybox__name:hover {
	text-decoration: underline;
}

.bsv-buybox__price {
	display: block;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.2;
	color: #111;
}

.bsv-buybox__price del {
	opacity: 0.55;
	margin-right: 4px;
}

.bsv-buybox__price ins {
	text-decoration: none;
}

.bsv-buybox__price .woocommerce-Price-amount {
	white-space: nowrap;
}

/* Bouton d'ajout : cercle noir. */
.bsv-add-to-cart {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: var(--bsv-btn);
	color: var(--bsv-btn-text);
	cursor: pointer;
	transition: transform 0.12s ease, opacity 0.15s ease;
	box-shadow: none;
	line-height: 0;
}

.bsv-add-to-cart:hover {
	transform: scale(1.07);
	background: var(--bsv-btn);
	color: var(--bsv-btn-text);
}

.bsv-add-to-cart:disabled {
	cursor: default;
	opacity: 0.9;
}

.bsv-add-to-cart__loading,
.bsv-add-to-cart__done {
	display: none;
}

.bsv-add-to-cart[data-state="loading"] .bsv-add-to-cart__idle,
.bsv-add-to-cart[data-state="done"] .bsv-add-to-cart__idle {
	display: none;
}

.bsv-add-to-cart[data-state="loading"] .bsv-add-to-cart__loading {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: currentColor;
	border-radius: 50%;
	animation: bsv-spin 0.7s linear infinite;
}

.bsv-add-to-cart[data-state="done"] .bsv-add-to-cart__done {
	display: inline-flex;
}

/* Chevron de repli. */
.bsv-buybox__toggle {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	color: #111;
	cursor: pointer;
	box-shadow: none;
	line-height: 0;
}

.bsv-chevron {
	transition: transform 0.2s ease;
}

.bsv-buybox__toggle[aria-expanded="false"] .bsv-chevron {
	transform: rotate(180deg);
}

/* ================= Navigation (sous le carrousel) ================= */

.bsv-nav-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 24px;
}

.bsv-nav {
	width: 40px;
	height: 40px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: #111;
	color: #fff;
	cursor: pointer;
	box-shadow: none;
	line-height: 0;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.bsv-nav:hover {
	transform: scale(1.06);
	background: #111;
	color: #fff;
}

.bsv-nav:disabled {
	opacity: 0.3;
	cursor: default;
	transform: none;
}

.bsv-nav-wrap[hidden] {
	display: none;
}

/* ================= Divers ================= */

.bsv-notice {
	padding: 12px 14px;
	background: #fff3cd;
	border: 1px solid #ffe69c;
	border-radius: 6px;
	color: #664d03;
}

.bsv-carousel button:focus-visible,
.bsv-carousel a:focus-visible {
	outline: 2px solid #111;
	outline-offset: 2px;
}

.bsv-carousel .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* ================= Breakpoints ================= */

@media (max-width: 1024px) {
	.bsv-carousel {
		--bsv-vis: var(--bsv-vis-t);
	}
}

@media (max-width: 640px) {
	.bsv-carousel {
		--bsv-vis: var(--bsv-vis-m);
		--bsv-gap: 12px;
	}
	.bsv-nav-wrap {
		margin-top: 18px;
	}
	.bsv-buybox__name,
	.bsv-buybox__price {
		font-size: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bsv-track {
		scroll-behavior: auto;
	}
	.bsv-add-to-cart,
	.bsv-nav,
	.bsv-chevron,
	.bsv-track,
	.bsv-video-wrap {
		transition: none;
	}
}

/* ================= Compatibilité Elementor / Blocksy ================= */

/* Neutralise les styles globaux de boutons du thème sur nos contrôles. */
.bsv-carousel button.bsv-add-to-cart,
.bsv-carousel button.bsv-nav,
.bsv-carousel button.bsv-sound-toggle,
.bsv-carousel button.bsv-buybox__toggle {
	text-transform: none;
	letter-spacing: normal;
	font-size: inherit;
	min-height: 0;
	min-width: 0;
	box-shadow: none;
	text-decoration: none;
}

/* Elementor et Blocksy stylent parfois les listes : on remet à zéro. */
.elementor .bsv-track,
.elementor .bsv-track > li,
.entry-content .bsv-track,
.entry-content .bsv-track > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* WooCommerce injecte un lien « Voir le panier » après l'ajout : on le masque. */
.bsv-buybox .added_to_cart,
.bsv-buybox .add_to_cart_button + .added_to_cart {
	display: none !important;
}

/* Le thème peut imposer une largeur max aux images de contenu. */
.bsv-carousel img {
	max-width: 100%;
	height: auto;
}