/**
 * Produit vedette de l'accueil (entre le texte d'intro et les carrousels) :
 * photo à gauche, détails à droite. Réutilise les classes .baba-faq__* pour
 * les deux accordéons (offre bundle à un seul item, détails produit à 9)
 * plutôt que de dupliquer le CSS/JS d'accordéon.
 */

.baba-featured {
	display: grid;
	/* Mesuré sur la référence (chez-baba.fr, section "featured-product",
	   classe product--medium) : la colonne image fait 55 % de la largeur
	   TOTALE, celle des infos 45 % — sans gouttière partagée entre les deux
	   (la référence n'a aucun espace entre les colonnes : l'écart visuel
	   vient d'un padding-left posé sur la colonne infos elle-même, voir
	   .baba-featured__content). Une column-gap classique aurait grignoté les
	   deux colonnes à parts égales et donc rétréci l'image à tort. */
	grid-template-columns: 55fr 45fr;
	column-gap: 0;
	align-items: start;
	/* La section "featured-product" de la référence est plafonnée à 1512px
	   de contenu (max-width 1575px de son propre conteneur, moins 31,5px de
	   marge de chaque côté) — plus étroite que le conteneur général du site
	   (--baba-container-max-width: 1600px). 1512 + les 2×52,5px de padding
	   de .baba-container ci-dessous = 1617px. */
	max-width: 1617px;
	padding-top: var(--baba-space-lg);
	padding-bottom: var(--baba-space-2xl);
}

.baba-featured__image {
	display: block;
	width: 100%;
	height: auto;
}

.baba-featured__content {
	/* Mesuré sur la référence : 73,5px de retrait à gauche de la colonne
	   infos (l'équivalent de la gouttière), rien à droite. */
	padding-left: 73.5px;
}

/* Pas de text-transform:uppercase ici : sur la référence, seule "BABA FARMER
   KUSH" est en capitales, "(Soutien aux agriculteurs)" reste en casse normale
   — c'est le nom du produit tel quel, pas un effet CSS. */
.baba-featured__title.baba-featured__title,
.baba-featured__title {
	margin: 0 0 var(--baba-space-xs);
	font-family: var(--baba-font-heading);
	font-weight: 600;
	font-size: 26px;
	line-height: 1.15;
	letter-spacing: var(--baba-heading-letter-spacing);
	color: var(--baba-color-text-solid);
}

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

.baba-featured__trust {
	display: flex;
	align-items: center;
	gap: var(--baba-space-xs);
	margin-bottom: var(--baba-space-sm);
	padding-bottom: var(--baba-space-sm);
	border-bottom: 1px solid var(--baba-color-border);
}

/* 70x12 : dimensions d'affichage de l'image sur la référence. */
.baba-featured__stars {
	flex-shrink: 0;
	width: 70px;
	height: 12px;
}

/* Ce texte est un lien vers les avis de la page, comme sur la référence, mais
   rien n'y paraît : elle le laisse noir, sans soulignement et sans variation
   au survol (a:not(.button_custom,.button_custom2) de sa feuille 6558). Il
   faut donc désamorcer les styles de lien d'Astra, plus spécifiques au
   survol qu'une simple classe. */
.baba-featured__trust-text,
.baba-featured__trust-text:hover,
.baba-featured__trust-text:focus {
	font-family: var(--baba-font-body);
	font-size: 14px;
	line-height: 19.6px;
	color: var(--baba-color-text-solid);
	text-decoration: none;
}

.baba-featured__checklist {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px var(--baba-space-md);
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

.baba-featured__checklist li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-md);
	line-height: 1.4;
	color: var(--baba-color-text-solid);
}

/* 23px : taille d'affichage de la coche sur la référence. */
.baba-featured__check-icon {
	flex-shrink: 0;
	width: 23px;
	height: 23px;
}

.baba-featured__price {
	display: flex;
	align-items: center;
	gap: var(--baba-space-xs);
	margin-bottom: var(--baba-space-sm);
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-lg);
}

.baba-featured__price del {
	opacity: 0.5;
	font-size: var(--baba-text-sm);
}

.baba-featured__price ins {
	font-weight: var(--baba-font-weight-bold);
	text-decoration: none;
}

.baba-featured__badge {
	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;
}

/* Sur la référence, "Quantité" est une étiquette au-dessus d'un bouton-pilule
   noir (un sélecteur de variante à une seule option — ni un vrai champ de
   quantité, ni un bouton cliquable, juste son habillage visuel). */
.baba-featured__qty-heading {
	margin: 0 0 6px;
	font-family: var(--baba-font-body);
	font-size: 11px;
	line-height: 16px;
	color: rgba(0, 0, 0, 0.75);
}

.baba-featured__qty-pill {
	display: inline-block;
	margin: 0 0 var(--baba-space-sm);
	padding: 8px 16px;
	background-color: #000000;
	color: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.55);
	border-radius: 8px;
	font-family: var(--baba-font-body);
	font-size: 12px;
	line-height: 12px;
}

.baba-featured__form {
	margin-bottom: var(--baba-space-sm);
}

.baba-featured__form .single_add_to_cart_button {
	width: 100%;
}

/* Sur la référence, le sélecteur "Quantité" (pilule noire ci-dessus) est
   purement informatif — il n'y a aucun champ numérique visible : Shopify
   commande toujours 1 unité par clic. Le champ quantité natif WooCommerce
   reste dans le DOM (le bouton "Ajouter au panier" continue de fonctionner
   normalement, avec sa valeur par défaut 1), seule sa présentation visuelle
   est masquée. */
.baba-featured__form .quantity {
	display: none;
}

/* Offre bundle : même mécanique d'accordéon que la FAQ (une seule
   question), mais bandeau noir plein comme sur la référence. */
.baba-featured__bundle {
	margin-bottom: var(--baba-space-md);
}

.baba-featured__bundle .baba-faq__item {
	margin-bottom: 0;
	background-color: var(--baba-color-badge-bg);
}

.baba-featured__bundle-toggle.baba-featured__bundle-toggle {
	padding: 10px 48px 10px 10px;
	color: var(--baba-color-badge-text);
}

/* La FAQ teinte la question ouverte en #fbfbfb (voir faq.css) : ici, la
   ligne doit rester noire, ouverte ou fermée. */
.baba-featured__bundle .baba-faq__item[data-open='true'] .baba-faq__question,
.baba-featured__bundle .baba-faq__item[data-open='true'] .baba-faq__question:hover,
.baba-featured__bundle .baba-faq__item[data-open='true'] .baba-faq__question:focus {
	background-color: transparent;
}

/* Le "+"/"−" est doré sur la référence, pas blanc, malgré le bandeau noir. */
.baba-featured__bundle-toggle .baba-faq__icon::before,
.baba-featured__bundle-toggle .baba-faq__icon::after {
	background-color: var(--baba-color-accent);
}

.baba-featured__bundle-icon {
	flex-shrink: 0;
	margin-right: 10px;
	font-size: 15px;
	line-height: 1;
}

/* .baba-faq__question-text impose sa propre couleur (texte noir, pour la
   FAQ) : elle gagne sur l'héritage du blanc posé sur .baba-featured__bundle-
   toggle, ce qui rendait le texte invisible sur le bandeau noir. Mesuré sur
   la référence : ce texte n'est PAS en gras (400, pas 800) malgré l'aspect
   visuel trompeur du blanc sur noir — 18px/25.2px comme le reste du bloc. */
.baba-featured__bundle .baba-faq__question-text {
	font-weight: 400;
	font-size: 14px;
	line-height: 19.6px;
	color: var(--baba-color-badge-text);
}

/* Pas de badge (pastille "B") sur ces deux accordéons : le retrait de 55px
   de .baba-faq__answer-inner (calé sur le badge de la FAQ) ne s'applique
   pas ici. */
.baba-featured__bundle-details {
	padding: 0 20px 20px;
}

.baba-featured__bundle-details-title {
	margin: 0 0 4px;
	font-weight: var(--baba-font-weight-bold);
}

.baba-featured__bundle-details p {
	margin: 0 0 4px;
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-sm);
	color: var(--baba-color-badge-text);
}

.baba-featured__bundle-details p:last-child {
	margin-bottom: 0;
}

/* Accordéon "détails produit" : sur la référence, ce n'est pas le même
   habillage que la FAQ — pas de cadre, pas de teinte au survol/ouverture,
   juste un fin trait doré sous chaque ligne, et la police de titre (Fraunces)
   au lieu de la police de corps de texte. */
.baba-featured__details-item .baba-faq__question {
	padding: 12px 32px 12px 0;
	border-bottom: 1px solid #ead8cc;
}

.baba-featured__details-item[data-open='true'] .baba-faq__question,
.baba-featured__details-item[data-open='true'] .baba-faq__question:hover,
.baba-featured__details-item[data-open='true'] .baba-faq__question:focus {
	background-color: transparent;
}

.baba-featured__details-item .baba-faq__question-text {
	font-family: var(--baba-font-body);
	font-size: 16px;
	line-height: 22.4px;
	letter-spacing: normal;
}

.baba-featured__details-answer {
	padding: 16px 20px 16px 0;
}

.baba-featured__details-answer p {
	margin: 0 0 var(--baba-space-xs);
	font-family: var(--baba-font-body);
	font-style: normal;
	font-size: 14px;
	line-height: 19.6px;
	color: var(--baba-color-text-solid);
}

.baba-featured__details-answer p:last-child {
	margin-bottom: 0;
}

.baba-featured__details-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--baba-space-sm);
	font-family: var(--baba-font-body);
	font-size: 12px;
	line-height: 20px;
	color: var(--baba-color-accent);
	text-decoration: none;
}

.baba-featured__details-more:hover,
.baba-featured__details-more:focus {
	text-decoration: underline;
}

@media screen and (max-width: 989px) {
	.baba-featured {
		grid-template-columns: 1fr;
		row-gap: var(--baba-space-md);
	}

	.baba-featured__content {
		padding-left: 0;
	}

	.baba-featured__checklist {
		grid-template-columns: 1fr;
	}
}