/**
 * Page produit — la référence affiche les avis comme un bloc autonome
 * toujours visible (jamais caché derrière un onglet à cliquer).
 */

.baba-product-reviews {
	padding: var(--baba-space-xl) var(--baba-container-padding);
	border-top: 1px solid var(--baba-color-border);
}

/**
 * Conteneur : même correctif que la page catalogue (collection.css) —
 * Astra met .ast-container en display:flex avec un max-width pensé pour
 * une sidebar, absent ici. Nos sections (bienfaits, message, stats, FAQ)
 * gèrent déjà leur propre largeur via .baba-container, donc on neutralise
 * complètement celui d'Astra ; la fiche produit native (galerie + résumé),
 * qui n'a pas cette classe, reçoit son propre encadrement ci-dessous.
 */
body.single-product .ast-container.ast-container {
	display: block;
	max-width: none;
	padding: 0;
}

body.single-product #primary {
	margin-top: 0;
}

/* flow-root : WooCommerce fait flotter la galerie (à gauche) et le
   descriptif (à droite). Sans contenir ces flottants, div.product se
   réduisait à la hauteur du seul titre (96px), et tout ce qui suit —
   bienfaits, message de Baba, FAQ, avis — remontait derrière le buy-box,
   dont le fond gris de la section "bienfaits" qui grisait toute la page. */
body.single-product div.product {
	display: flow-root;
	max-width: var(--baba-container-max-width);
	margin: 0 auto;
	/* 32px : marge de page propre à la fiche produit sur la référence, plus
	   étroite que le reste du site, pour donner de la place à la photo. */
	padding: var(--baba-space-lg) 32px var(--baba-space-2xl);
}

/**
 * Répartition des deux colonnes. Valeurs reprises telles quelles de la
 * référence (reference/css/section-main-product.css) : la photo occupe 55%
 * et le descriptif 45%, ce dernier décalé de 5rem vers la droite. Le
 * gabarit natif WooCommerce, lui, coupe en deux moitiés de 48% — d'où une
 * photo trop petite et une colonne de texte trop large chez nous.
 */
body.single-product #content .ast-woocommerce-container div.product div.images,
body.single-product #content .ast-woocommerce-container div.product .woocommerce-product-gallery {
	width: 55%;
}

body.single-product #content .ast-woocommerce-container div.product div.summary {
	width: 45%;
	padding-left: 50px;
}

/* Loupe de zoom posée par WooCommerce sur la galerie : sans équivalent sur
   la référence, dont la photo est nue. */
.single-product .woocommerce-product-gallery__trigger {
	display: none;
}

@media screen and (max-width: 749px) {
	body.single-product div.product {
		padding: var(--baba-space-md) var(--baba-container-padding-mobile) var(--baba-space-xl);
	}
}

/**
 * Titre + prix natifs (gabarits WooCommerce non reconstruits).
 */
/* Sélecteur allongé : WooCommerce pose ".woocommerce-js div.product
   .product_title { margin: 0 0 .5em }" (0,3,1), soit 16px sous le titre là
   où la référence n'en laisse que 2. */
.single-product div.product .product_title.product_title {
	margin: 0 0 2px;
	font-family: var(--baba-font-heading);
	font-weight: var(--baba-font-weight-semibold);
	font-size: 32px;
	line-height: 1.15;
	letter-spacing: var(--baba-heading-letter-spacing);
	color: var(--baba-color-text-solid);
}

/* Pastille "Sale!" (coin de la galerie — Astra la remplace par sa propre
   classe .ast-onsale-card, jamais ".onsale" natif) : sans équivalent dans
   la référence, qui signale la promo uniquement via le badge "Promotion" à
   côté du prix (voir .woocommerce-variation-price ci-dessous). */
.single-product span.onsale,
.single-product .ast-onsale-card {
	display: none;
}

/* Chez un produit VARIABLE, ce prix natif affiche une fourchette
   ("€6,23 – €406,00") sans équivalent dans la référence, qui n'affiche que le
   prix de la variante choisie — pris en charge par .woocommerce-variation-price
   ci-dessous. On le masque donc, mais pour les seuls produits variables : sur
   un produit simple, c'est le seul prix de la page. */
.single-product div.product.product-type-variable .summary > p.price {
	display: none;
}

/* Produit simple : ce prix natif tient le rôle du prix de variante, d'où la
   même présentation (ancien prix barré, prix courant en gras, pastille
   "Promotion"). */
.single-product .woocommerce-variation-price .price,
.single-product .summary > p.price {
	display: flex;
	align-items: center;
	gap: var(--baba-space-xs);
	margin: 0 0 var(--baba-space-sm);
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-lg);
}

.single-product .woocommerce-variation-price .price del,
.single-product .summary > p.price del {
	opacity: 0.5;
	font-size: var(--baba-text-sm);
}

.single-product .woocommerce-variation-price .price ins,
.single-product .summary > p.price ins {
	font-weight: var(--baba-font-weight-bold);
	text-decoration: none;
}

/* Badge "Promotion" : WooCommerce entoure toujours le prix de del/ins quand
   le produit est en promo (jamais sinon) — :has() cible donc uniquement le
   prix promotionnel, sans JS ni gabarit supplémentaire pour ce badge, comme
   .baba-featured__badge sur le produit vedette de l'accueil. */
.single-product .summary > p.price:has(del)::after,
.single-product .woocommerce-variation-price .price:has(del)::after {
	content: 'Promotion';
	padding: 4px 12px 5px;
	background-color: var(--baba-color-badge-bg);
	color: var(--baba-color-badge-text);
	border-radius: var(--baba-radius-pill);
	font-family: var(--baba-font-body);
	font-size: 11px;
	white-space: nowrap;
}

/**
 * Réordonnancement du formulaire de variation : sur la référence, le prix
 * de la variante précède les pilules de poids, qui précèdent elles-mêmes
 * le bouton "Ajouter au panier" — alors que le gabarit natif WooCommerce
 * imbrique prix ET bouton ensemble dans .single_variation_wrap, après les
 * pilules. "display: contents" fait sortir ce conteneur de la boîte (sans
 * toucher au DOM ni au JS natif) pour que ses deux enfants participent
 * directement à l'ordre flex du formulaire, réordonnés via "order".
 */
.single-product .variations_form {
	display: flex;
	flex-direction: column;
}

.single-product .single_variation_wrap {
	display: contents;
}

.single-product .woocommerce-variation.single_variation {
	order: 1;
	margin-bottom: 2px;
}

.single-product .baba-variations {
	order: 2;
}

.single-product .woocommerce-variation-add-to-cart {
	order: 3;
}

/* !important nécessaire : le JS natif de variation (onFoundVariation) pose
   un style inline "display: block" sur ce conteneur à chaque changement de
   variante, qui l'emporterait sinon sur cette règle de feuille de style. */
.single-product .woocommerce-variation-add-to-cart .quantity {
	display: none !important;
}

/* Sélecteur long à dessein : WooCommerce pose ".woocommerce-js div.product
   form.cart .button { width: auto }" (0,4,2), qui laissait le bouton à la
   largeur de son texte au lieu de la pleine largeur de la référence. */
.single-product div.product form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button {
	width: 100%;
	margin-bottom: var(--baba-space-sm);
}

.single-product .woocommerce-variation-description,
.single-product .woocommerce-variation-availability {
	display: none;
}

/* Produit SIMPLE : même traitement que le formulaire de variante ci-dessus.
   La référence n'affiche jamais de champ quantité sur une fiche produit (on
   ajoute une unité, la quantité se règle ensuite dans le tiroir panier) et
   son bouton occupe toute la largeur. Le champ natif reste dans le DOM avec
   sa valeur 1, le formulaire fonctionne donc normalement. */
.single-product div.product.product-type-simple form.cart > .quantity {
	display: none;
}

.single-product div.product.product-type-simple form.cart .single_add_to_cart_button {
	width: 100%;
	margin-bottom: var(--baba-space-sm);
}

/**
 * Pilules de variante (poids) — voir woocommerce/single-product/add-to-
 * cart/variable.php : le <select> natif reste dans le DOM (masqué) pour que
 * la logique JS de WooCommerce (prix/stock/panier) continue de fonctionner
 * sans modification ; seules ces pilules sont visibles/cliquables.
 */
/* La classe "variations" est indispensable au JS natif de WooCommerce (voir
   variable.php), mais elle apporte aussi son filet de séparation sous les
   pilules — absent de la référence, qui enchaîne directement sur le bouton. */
.single-product div.product form.cart .baba-variations.baba-variations {
	margin-bottom: 0;
	border: 0;
}

.baba-variations__group {
	margin-bottom: var(--baba-space-md);
}

.baba-variations__label {
	margin: 0 0 6px;
	font-family: var(--baba-font-body);
	font-size: 14px;
	line-height: 1.4;
	color: rgba(0, 0, 0, 0.75);
}

.baba-variations__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.baba-variations__pill {
	display: inline-flex;
	align-items: center;
	padding: 12px 16px;
	background-color: var(--baba-color-bg);
	color: var(--baba-color-text-solid);
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 8px;
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-base);
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.baba-variations__pill input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.baba-variations__pill--selected {
	background-color: #000000;
	color: #ffffff;
	border-color: #000000;
}

.baba-variations__select {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/**
 * Stock + réassurance (icônes) — sous le bandeau bundle, avant l'accordéon.
 */
/* Couleurs et graisse relevées sur la référence : seule l'accroche
   "En stock !" est en vert, la suite de la phrase reste en gris foncé. */
.baba-product__stock {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0 0 var(--baba-space-sm);
	font-family: var(--baba-font-body);
	font-weight: var(--baba-font-weight-normal);
	font-size: var(--baba-text-base);
	color: rgba(0, 0, 0, 0.75);
}

.baba-product__stock strong {
	font-weight: var(--baba-font-weight-semibold);
	color: #83a064;
}

.baba-product__stock-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

/* La référence présente cette rangée comme un cartouche gris, les trois
   items séparés par de fins traits verticaux — pas des filets horizontaux. */
.baba-product__trust-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	margin: 0 0 var(--baba-space-md);
	padding: var(--baba-space-md) 0;
	list-style: none;
	background-color: var(--baba-color-bg-alt);
	border-radius: 8px;
}

.baba-product__trust-row li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 0 var(--baba-space-xs);
	text-align: center;
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-sm);
	line-height: 1.3;
	color: var(--baba-color-text-solid);
}

/* Traits verticaux courts, centrés entre deux items (et non des bordures
   pleine hauteur) : la référence les dessine ainsi (verticalbaricon_1.svg). */
.baba-product__trust-row li + li {
	position: relative;
}

.baba-product__trust-row li + li::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 1px;
	height: 48px;
	transform: translateY(-50%);
	background-color: var(--baba-color-border);
}

/* 40px : taille d'affichage des icônes sur la référence. */
.baba-product__trust-row img {
	width: 40px;
	height: 40px;
}

.baba-product__trust-row svg {
	width: 26px;
	height: 26px;
	color: var(--baba-color-accent);
}

@media screen and (max-width: 749px) {
	.single-product .product_title.product_title {
		font-size: 26px;
	}

	.baba-product__trust-row {
		grid-template-columns: 1fr;
		gap: var(--baba-space-sm);
	}
}

/**
 * "Message de Baba" — accroche au-dessus du titre (.baba-story__heading),
 * seul élément que .baba-story (accueil) n'a pas.
 */
.baba-message__kicker {
	margin: 0 0 var(--baba-space-xs);
	font-family: var(--baba-font-body);
	font-style: italic;
	font-weight: var(--baba-font-weight-semibold);
	font-size: 15px;
	line-height: 1.4;
	letter-spacing: var(--baba-nav-letter-spacing);
	text-transform: uppercase;
	color: var(--baba-color-accent);
}

/**
 * "Les bienfaits de nos fleurs & résines" — même gabarit que .baba-story
 * (texte + photo encadrée), sur fond gris ; seul le contenu texte diffère
 * (grille de 4 bienfaits au lieu d'un paragraphe).
 */
.baba-benefits {
	background-color: var(--baba-color-bg-alt);
}

/* 100px : respiration verticale propre à cette section sur la référence
   (photo de 639px dans une section de 839px), plus généreuse que les 64px
   de .baba-story sur l'accueil. */
.baba-benefits .baba-story {
	padding-top: 100px;
	padding-bottom: 100px;
}

/* Le titre de cette section est nettement plus petit que celui de
   .baba-story (43px) sur la référence : 30px/33px, mesuré à 1440px. */
.baba-benefits__heading.baba-benefits__heading {
	margin: 0 0 22px;
	font-size: 30px;
	line-height: 1.1;
}

/* Le trait doré : 15% de la largeur de la colonne de texte (96px sur les
   639px de la référence), pas une largeur fixe — il suit donc la colonne.
   Dessiné en border-top comme sur la référence, d'où la hauteur nulle. */
.baba-benefits__heading::after {
	content: '';
	display: block;
	width: 15%;
	height: 0;
	/* 22px : l'écart que la référence laisse entre le titre et le trait
	   (sans quoi le trait se lit comme un soulignement du dernier mot). */
	margin-top: 22px;
	border-top: 3px solid var(--baba-color-accent);
}

.baba-benefits__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 22px 0;
}

/* Chaque bienfait est une carte blanche posée sur le fond gris de la
   section — c'est ce contraste qui les délimite sur la référence, pas une
   bordure. */
.baba-benefits__item {
	padding: 15px;
	background-color: #ffffff;
	border-radius: 5px;
}

.baba-benefits__item-title {
	/* Police de corps de texte, pas la police de titre : la référence
	   compose ces intitulés en Fraunces comme le paragraphe qui suit. */
	margin: 0 0 2px;
	font-family: var(--baba-font-body);
	font-weight: var(--baba-font-weight-semibold);
	font-size: 15px;
	line-height: 1.4;
	color: var(--baba-color-text-solid);
}

.baba-benefits__item-text {
	margin: 0;
	font-family: var(--baba-font-body);
	font-size: 16px;
	line-height: 1.4;
	color: var(--baba-color-text-solid);
}

/* Le bouton de cette section est plus grand que le bouton courant du thème
   (mesuré sur la référence : 202x54, 18px, coins arrondis à 5px) : règle
   limitée à la section pour ne pas toucher aux boutons déjà validés. */
.baba-benefits .baba-story__button {
	/* .baba-btn fixe une hauteur de 49px : la redéclarer est indispensable,
	   la line-height seule ne redimensionne pas la boîte. */
	height: 54px;
	padding: 0 35px;
	font-weight: var(--baba-font-weight-semibold);
	font-size: 18px;
	line-height: 54px;
	/* Ce bouton-ci n'a pas l'interlettrage des boutons du thème. */
	letter-spacing: normal;
	border-radius: 5px;
}

/* Le cadre doré est un SVG qui masque le pourtour de la photo avec la
   couleur du fond : la version de l'accueil peint ce masque en blanc, ce qui
   cerne la photo d'un liseré blanc bien visible sur le gris de cette
   section. La référence livre pour cet emplacement le même dessin avec un
   masque #f7f7f7 — c'est ce fichier-là qu'on utilise ici. */
.baba-benefits .baba-story__media::after {
	background-image: url('../../images/faq/frame-fond-gris.svg');
	/* Le liseré de 2px qui recouvre les bords du SVG doit lui aussi prendre
	   la couleur du fond de la section, sinon il subsiste en blanc. */
	box-shadow: inset 0 0 0 2px var(--baba-color-bg-alt), 0 0 0 2px var(--baba-color-bg-alt);
}

/* En dessous de 767px, la référence recentre tout le bloc texte, réduit les
   deux tailles de la carte à 14px et double la largeur du trait (30%). */
@media screen and (max-width: 749px) {
	.baba-benefits__grid {
		grid-template-columns: 1fr;
	}

	.baba-benefits__heading.baba-benefits__heading {
		text-align: center;
	}

	.baba-benefits__heading::after {
		width: 30%;
		margin-right: auto;
		margin-left: auto;
	}

	.baba-benefits__item-title,
	.baba-benefits__item-text {
		font-size: 14px;
		text-align: center;
	}

	/* Centré mais à sa largeur naturelle, comme sur la référence : d'où le
	   fit-content, sans lequel le bouton s'étirerait sur toute la colonne. */
	.baba-benefits .baba-story__button {
		display: flex;
		width: fit-content;
		margin-right: auto;
		margin-left: auto;
	}
}