/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy-child
 * Domain Path: /languages
 */

/**
 * Styles Herborisia migrés depuis storefront-child/style.css (02/10/2026).
 *
 * Ne contient que les règles encore utiles sous Blocksy. Retirées lors de la migration :
 * sections et extensions Storefront, Groovy Menu, extensions désinstallées (XO Slider,
 * Smart Slider, Ultimate FAQ, DirectMail, Jetpack, Trustpilot), bandeau, bouton retour
 * en haut, barre d'ajout au panier mobile, barre de livraison offerte, 2 colonnes mobile
 * du catalogue, et les correctifs de mise en page propres à Storefront.
 */

/* ==========================================================================
   Typographie et contenu
   ========================================================================== */

blockquote {
	padding: 1em;
	border-left: 5px solid var(--theme-palette-color-10);
	background: var(--theme-palette-color-7);
	margin-left: 0;
	width: 100%;
}

blockquote p:last-child {
	margin: 0;
}

/* Espacement des titres qui suivent un paragraphe, une liste, un tableau… dans les contenus
   (descriptions de catégories, fiches produit, pages). Réintégré après contrôle : présent sur
   les pages catégorie, produit et « CBD Paris ». */
p + h2, p + header h2, p + h3, p + h4,
ul + h2, ul + header h2, ul + h3, ul + h4,
ol + h2, ol + header h2, ol + h3, ol + h4,
table + h2, table + header h2, table + h3, table + h4,
blockquote + h2, blockquote + header h2, blockquote + h3, blockquote + h4,
form + h2, form + header h2, form + h3, form + h4 {
	margin-top: 1.2906835em;
}

/* Descriptions de catégories (bloc WordPress « Description du terme ») : le CSS du bloc remet la marge des
   paragraphes à 0, ils se touchaient. On rend l'écart natif de Blocksy, le même que sur les fiches produit. */
.wp-block-term-description p {
	margin-block-end: var(--theme-content-spacing);
}

/* Puces des descriptions (fiches produit et catégories) : carrées et vertes, comme celles du résumé produit
   (vert des icônes de réassurance) ; retrait réduit. Les listes numérotées Rank Math gardent leur propre style. */
:is(.woocommerce-Tabs-panel--description, .wp-block-term-description) ul {
	list-style: square;
	padding-inline-start: 1.2em;
}

:is(.woocommerce-Tabs-panel--description, .wp-block-term-description) ul li::marker {
	color: var(--theme-palette-color-3);
}

/* Titre de la fiche produit centré. Les autres titres (pages, articles, catégories) sont centrés
   via le Customizer Blocksy (titre de page > alignement) ; le titre produit est dans le bloc
   résumé, sans réglage d'alignement → CSS. */
.single-product .product_title {
	text-align: center;
}

table td, table th {
	padding: 5px 8px;
}

.wpcf7-form-control.wpcf7-text {
	max-width: 100%;
}

.grecaptcha-badge {
	display: none !important;
}

/* Elementor - Conteneur pleine largeur */
:is(.elementor-section-wrap, [data-elementor-id]) > .e-con-full {
	left: 50% !important;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
	max-width: 100vw !important;
	position: relative !important;
	right: 50% !important;
	width: 100vw !important;
}

/* ==========================================================================
   Catalogue : badges et prix des cartes produit
   ========================================================================== */

/* Badges des cartes produit : tous dans la zone de badges Blocksy (.ct-woo-badges),
   empilés en haut à gauche de l'image (cf. hb_blocksy_card_badges dans functions.php).
   --has-container : mécanisme Blocksy qui passe les badges de « absolu » à « dans le flux ». */
.ct-woo-badges {
	--has-container: relative;
	position: absolute;
	top: 15px;
	inset-inline-start: 15px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	pointer-events: none; /* le clic traverse vers le lien de l'image */
}

/* Style commun (repris de Storefront) : bordure rouge, majuscules. Couleurs du texte et du fond : réglages
   natifs Blocksy (Personnaliser → WooCommerce → Général → Badges : « Sale Badge », « Out of Stock Badge »). */
.onsale {
	border: 1px solid var(--theme-palette-color-6);
	border-radius: 3px;
	line-height: 1;
	padding: 4px 8px;
	text-transform: uppercase;
}

/* Premium / Indoor : texte coloré sur fond blanc (lisible sur l'image) */
.onsale.premium {
	border-color: var(--theme-palette-color-8) !important;
	color: var(--theme-palette-color-5) !important;
}

.onsale.indoor {
	border-color: var(--theme-palette-color-8) !important;
	color: var(--theme-palette-color-5) !important;
}

/* Mentions (taux de CBD, culture, température) : pastilles vertes */
.catalog-mention-group,
.catalog-mention-group .taux-cbd-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.catalog-mention-group .taux-cbd-group {
	flex-direction: row;
	align-items: center;
}

.catalog-mention-group .onsale {
	background-color: var(--theme-palette-color-4) !important;
	border-color: var(--theme-palette-color-4) !important;
	color: var(--theme-palette-color-8) !important;
	text-transform: none;
}

/* Carte étroite (mobile, 2 colonnes) : badges et cœur de la liste de souhaits ne tiennent pas côte à côte sur
   l'image (ils se chevauchaient) et les badges masquaient le produit. Les badges passent donc juste SOUS l'image,
   dans le flux (position: static ; Blocksy prévoit ce cas avec --has-container) ; le cœur reste dans son angle.
   - Requête de conteneur sur la carte (pas de point de rupture) : seuil 12,5 rem, au-dessus des ~193 px qu'il
     faut pour badge + cœur ; en ordinateur et en tablette, rien ne change.
   - order: 1 : seul moyen de les placer sous l'image sur petit écran uniquement (PHP ne connaît pas la largeur) ;
     dans le code, ils restent avant l'image (ordre de lecture inchangé).
   - Alignement : celui des cartes (réglage natif, variable --horizontal-alignment) ; 8 px de marge minimale de
     chaque côté.
   - Espacement : 10 px au-dessus et au-dessous des badges (valeur par défaut de Blocksy entre les éléments d'une
     carte), au lieu de l'espacement natif de l'image (25 px), qui sinon s'ajoutait sous les badges. */
[data-products] .product {
	container: hb-carte / inline-size;
}

@container hb-carte (max-width: 12.5rem) {
	[data-products] .product figure:has(> .ct-woo-badges) {
		--product-element-spacing: 10px;
	}

	[data-products] .ct-woo-badges {
		position: static;
		order: 1;
		align-items: var(--horizontal-alignment);
		margin-block-start: 10px;
	}

	[data-products] .ct-woo-badges .catalog-mention-group {
		align-items: var(--horizontal-alignment);
	}

	[data-products] .ct-woo-badges > .onsale,
	[data-products] .ct-woo-badges .catalog-mention-group > * {
		max-width: calc(100cqi - 16px);
	}
}

ul.products li.product .woocommerce-LoopProduct-link:focus {
	outline: unset;
}

ul.products li.product .woocommerce-LoopProduct-link {
	text-decoration: none;
}

/* Ombre des cartes produit + ombre renforcée au survol.
   Blocksy sait régler l'ombre (cartes « boxed ») mais pas l'effet au survol → gardé en CSS.
   Sous Storefront, le lien entourait toute la carte ; sous Blocksy, il n'entoure que l'image → on cible la carte. */
ul.products li.product {
	box-shadow: 0 0 75px 0 color-mix(in srgb, var(--theme-palette-color-1) 10%, transparent);
	transition: box-shadow .2s ease;
}

ul.products li.product:hover {
	box-shadow: 0 0 25px 0 color-mix(in srgb, var(--theme-palette-color-1) 15%, transparent);
}

ul.products li.product .woocommerce-loop-category__title {
	color: var(--theme-palette-color-5);
	font-weight: 600;
}

ul.products li.product .price {
	margin-bottom: 10px;
}

/* Prix des cartes alignés sur une même ligne, en bas des cartes : même mécanisme que l'option native
   « Equal Alignment » du bouton d'ajout au panier (margin-top: auto dans la carte en colonne).
   Condition : « Prix » en dernier élément de la carte (Personnaliser → WooCommerce → Catalogue). */
[data-products] .product > .price {
	margin-top: auto;
}

/* ==========================================================================
   Fiche produit
   ========================================================================== */

button.single_add_to_cart_button {
	font-size: 18px;
}

.quantity .qty {
	font-size: 18px;
	font-weight: 600;
}

/* Prix d'appel à gauche, note (étoiles) à droite, sur la même ligne quand la colonne en a la place
   (prix ≈ 270 px + étoiles et nombre d'avis ≈ 195 px) ; sinon (mobile), aucune règle : la note passe
   naturellement sous le prix, alignée à gauche.
   Réglages natifs (Personnaliser → WooCommerce → Produit unique) : « Note » juste APRÈS « Prix » (sinon la
   règle ne s'applique pas : :has(+ …)) ; espacements du bas : Prix 35 px et Note 35 px. Fiche sans avis :
   l'espacement natif du prix s'applique tel quel. Fiche avec avis : l'écart prix → étoiles est réduit ici
   (variable native de Blocksy), les étoiles faisant partie du prix. */
.single-product .entry-summary {
	container: hb-resume / inline-size;
}

.single-product .entry-summary > .price:has(+ .woocommerce-product-rating) {
	--product-element-spacing: 10px;
}

@container hb-resume (min-width: 30rem) {
	.single-product .entry-summary > .price:has(+ .woocommerce-product-rating) {
		float: left;
		margin-inline-end: 1em;
	}

	.single-product .entry-summary > .price + .woocommerce-product-rating {
		justify-content: flex-end;
		/* Même hauteur que la ligne du prix (Price Font 20 px × interligne 1,65) : étoiles centrées sur cette
		   ligne (align-items natif), et l'espacement natif de la note (35 px) part bien du bas de la ligne. */
		min-height: 33px;
	}

	.single-product .entry-summary > .price + .woocommerce-product-rating + * {
		clear: both;
	}
}

/* Prix dans le bouton « Ajouter au panier » (cf. functions.php, section « FICHE PRODUIT »).
   Libellé court sur mobile : classes de visibilité natives de Blocksy posées par fiche-produit.js. */
.single_add_to_cart_button {
	white-space: nowrap;
}

.single_add_to_cart_button .hb-atc-price:not(:empty) {
	margin-inline-start: .3em; /* espace avant « – » (bouton en display:flex : un espace texte serait supprimé) */
}

.single_add_to_cart_button del {
	opacity: .7;
	font-weight: normal;
	margin-inline-end: .25em;
}

.single_add_to_cart_button .hb-atc-amount {
	font-weight: 900; /* prix payé bien marqué (libellé du bouton : 500) */
}

.single-product div.product form.cart {
	padding: 15px;
	background: var(--theme-palette-color-7);
	margin-bottom: 0;
}

.single-product div.product table.variations .value {
	margin-bottom: 0;
}

table.variations label {
	font-weight: 600;
}

.price del {
	font-size: 0.9em;
}

/* Prix (police, taille, graisse, couleur) : réglage natif Blocksy « Price Font » / « Price Font Color »
   (Personnaliser → WooCommerce → Produit unique), appliqué à .entry-summary .price,
   donc aussi au prix de la variation sélectionnée. */

.single-product .price del + ins {
	font-size: 1.2em;
}

/* Cœur de la wishlist sur l'image (cf. hb_gallery_wishlist_button, functions.php) : style et position natifs
   des cartes produits ; seule exception, sous la loupe de Blocksy quand elle est affichée (20 px + 40 px). */
.ct-product-gallery-container:has(> .woocommerce-product-gallery__trigger) > .ct-woo-card-extra {
	top: 70px;
}

/* Compteur « 1/X » de la galerie en mobile (cf. hb_gallery_counter, functions.php) : en bas à gauche de
   l'image, même marge que le cœur de la wishlist ; couleurs de la palette Blocksy. */
.hb-gallery-counter {
	position: absolute;
	z-index: 2;
	bottom: 15px;
	inset-inline-start: 15px;
	padding: 2px 10px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
	border-radius: 100px;
	color: var(--theme-palette-color-1);
	background: var(--theme-palette-color-8);
	pointer-events: none;
}

/* Boutons sur l'image (fiche produit et cartes produits), écrans tactiles : le navigateur garde l'état
   « survol » après un tap ; le rond restait coloré une fois le produit retiré de la wishlist. On y garde
   les couleurs de repos tant que le bouton n'est pas actif. */
@media (hover: none) {
	.ct-woo-card-extra .ct-button:hover:not([data-button-state=active]):not([data-button-state=loading]) {
		color: var(--theme-button-text-initial-color);
		background-color: var(--theme-button-background-initial-color);
	}
}

/* Points & Rewards, panier : bouton « Utiliser ma cagnotte » placé comme les boutons natifs des messages
   Blocksy (écart avec le texte ; à droite à partir de 480 px, seuil des messages Blocksy). Le plugin enferme
   le bouton dans un formulaire, que la règle de Blocksy ne vise pas. */
.wc_points_redeem_earn_points {
	gap: 10px 15px;
}

@media (min-width: 480px) {
	.wc_points_redeem_earn_points > form.wc_points_rewards_apply_discount {
		margin-inline-start: auto;
	}
}

/* Barre « livraison offerte » déplacée au-dessus du code promo (cf. hb_cart_move_shipping_progress) : masquée
   quand le retrait en boutique est choisi, comme le fait Blocksy pour la barre des totaux. */
.woocommerce:has(.cart_totals [value*=local_pickup]:checked) .hb-cart-shipping-progress {
	display: none;
}

/* Bloc de réassurance de la fiche produit : éléments natifs de Blocksy « Reasons to Buy » (délai, retrait) et
   « Free Shipping Bar » (livraison offerte), réglés dans le Personnaliser. Icônes : assets/icons/ (trait fin,
   « fill="none" » sur chaque forme, couleur « currentColor »). Plan : docs/superpowers/plans/2026-10-06-*. */

/* Icônes de « Reasons to Buy » : Blocksy n'a pas de réglage de couleur pour elles ; taille par sa variable
   native (15 px par défaut, trop fin pour un trait de 1,75). */
.ct-product-additional-info .ct-icon-container {
	--theme-icon-size: 20px;
	color: var(--theme-palette-color-3);
}

/* « Free Shipping Bar » sur la fiche : message seul, sans barre de progression (aucun réglage ni filtre ne la
   retire : l'élément l'affiche directement, et les fragments du panier renvoient le même HTML partout) ;
   icône posée comme celles de « Reasons to Buy » (l'élément n'en a pas). Le panier garde sa barre. */
.ct-shipping-progress-single .ct-progress-bar {
	display: none;
}

/* Même icône devant le message de la barre du panier (cadre et barre : assets/cart.css). */
:is(.ct-shipping-progress-single, .ct-shipping-progress-cart-page) .ct-message {
	display: flex;
	align-items: center;
	gap: .5em;
}

:is(.ct-shipping-progress-single, .ct-shipping-progress-cart-page) .ct-message::before {
	content: "";
	flex: 0 0 20px;
	height: 20px;
	background-color: var(--theme-palette-color-3);
	-webkit-mask: url("assets/icons/livraison-offerte.svg") center / contain no-repeat;
	mask: url("assets/icons/livraison-offerte.svg") center / contain no-repeat;
}

:is(.ct-shipping-progress-single, .ct-shipping-progress-cart-page) .ct-message p {
	margin: 0;
}

/* Formats des produits reliés (extension « liaisons-produits-variables ») : même espace sous le tableau que la
   règle native de Blocksy pour les produits variables (form.variations_form table.variations, 1.5em), que le
   tableau de l'extension (dans form.cart, sans classe ni filtre) ne reçoit pas. */
form.cart:not(.variations_form) table.variations {
	margin-bottom: 1.5em;
}

/* Cagnotte fidélité sous le bouton (Points & Rewards n'a ni réglage ni filtre de mise en page) :
   - centrée ; pas de marge basse (dernier élément de la zone d'achat : espace bas = espace haut) ;
   - icône « pièce € » (assets/icons/cagnotte.svg) posée en CSS comme celle de la livraison offerte : le
     message est affiché via wp_kses_post, qui retirerait un SVG inséré dans le texte ;
   - le saut de ligne écrit en dur par le plugin est retiré à la source (hb_fidelite_strip_br). */
.ct-cart-actions > .wc-points-rewards-product-message,
.ct-cart-actions > p.points {
	text-align: center;
	margin-bottom: 0;
}

.ct-cart-actions .wc-points-rewards-product-message::before,
.ct-cart-actions > p.points.hide-on-price-available::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-inline-end: 6px;
	vertical-align: -4px;
	background-color: var(--theme-palette-color-3);
	-webkit-mask: url("assets/icons/cagnotte.svg") center / contain no-repeat;
	mask: url("assets/icons/cagnotte.svg") center / contain no-repeat;
}

/* Zone d'achat assez large (bureau) : cagnotte centrée sous le bouton plutôt que sous toute la ligne.
   Requête de conteneur : on regarde la largeur réelle de la zone d'achat, pas l'écran, sans point de rupture
   du thème. Seuil 30rem = marges (2 x 15px) + quantité (130px) + écart (10px) + message sur une ligne (~300px).
   En dessous (mobile), la mise en page native de Blocksy reste : cagnotte centrée sur toute la largeur. */
.ct-product-add-to-cart {
	container: hb-achat / inline-size;
}

@container hb-achat (min-width: 30rem) {
	.ct-cart-actions:has(> .quantity) {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
	}

	.ct-cart-actions:has(> .quantity) > * {
		grid-column: 1 / -1;
	}

	.ct-cart-actions:has(> .quantity) > .quantity {
		grid-column: 1;
	}

	.ct-cart-actions:has(> .quantity) > .single_add_to_cart_button,
	.ct-cart-actions:has(> .quantity) > .wc-points-rewards-product-message,
	.ct-cart-actions:has(> .quantity) > p.points {
		grid-column: 2;
	}
}

/* Points & Rewards : message affiché sous le bouton (cf. hb_points_rewards_move_messages).
   Le message « jusqu'à X points » est masqué par le plugin lui-même dès qu'un format est choisi. */
.hb-variation-points:empty {
	display: none;
}

/* Même règle que celle du plugin (build/style-index.css), adaptée à Blocksy : le plugin masque
   « Gagnez jusqu'à X points » dès qu'un format est choisi, mais vise un enfant DIRECT de la zone
   d'ajout au panier ; sous le bouton, Blocksy ajoute un conteneur (.ct-cart-actions). */
.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-enabled .ct-cart-actions > p.points.hide-on-price-available {
	display: none;
}

.single-product div.product .product_meta .sku_wrapper {
	display: none;
}

/* Prix de variation : pas d'animation à l'apparition (évite le « saut » du prix) */
.single_variation,
.single_variation_wrap,
.woocommerce-variation,
.woocommerce-variation-price {
	transition: none !important;
	animation: none !important;
}

/* --- Boutons de variation (Variation Swatches) --- */
.woo-variation-swatches .wvs-style-squared.variable-items-wrapper .variable-item.button-variable-item,
.woo-variation-swatches .wvs-style-squared.variable-items-wrapper .variable-item:not(.radio-variable-item) {
	/* Forme (carrée), largeur, hauteur et taille du texte : réglages du plugin
	   (Variation Swatches → Général « Style de forme » et → Style). Ici : contour seulement. */
	border: none !important;
	box-shadow: none !important;
	outline: 1px solid var(--theme-palette-color-1);
}

.woo-variation-swatches .wvs-style-squared.variable-items-wrapper .variable-item:not(.radio-variable-item).selected,
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).button-variable-item.selected:not(.no-stock) {
	background-color: var(--theme-palette-color-10);
	color: var(--theme-palette-color-8);
	box-shadow: none !important;
}

.woo-variation-swatches .wvs-style-squared.variable-items-wrapper .variable-item:not(.radio-variable-item).selected:hover {
	background-color: var(--theme-palette-color-10);
}

/* Badge « -X% » de remise par variation : pastille calée sur le bord droit du swatch, à cheval sur son bord
   haut (ne déborde jamais sur le bouton voisin : écarts entre boutons inchangés). */
.woo-variation-items-wrapper .variable-items-wrapper {
	overflow: visible; /* la pastille dépasse au-dessus du bouton ; espacement libellé/boutons : natif Blocksy (gap 10px) */
}
/* Boutons sur plusieurs lignes (mobile) : lignes un peu plus espacées pour la pastille qui dépasse au-dessus. */
.woo-variation-items-wrapper .variable-items-wrapper:has(.hb-variation-discount) {
	row-gap: 14px;
}
.woo-variation-items-wrapper .button-variable-item {
	position: relative;
	overflow: visible;
}
/* Le swatch contenant un badge : neutraliser le position:relative de .variable-item-contents
   (forcé par le plugin) pour que le badge s'ancre sur la BOÎTE (.button-variable-item). */
.woo-variation-items-wrapper ul.variable-items-wrapper li.button-variable-item .variable-item-contents:has(.hb-variation-discount) {
	position: static !important;
}
.hb-variation-discount {
	position: absolute;
	/* -1px : le trait du bouton est un contour (outline) de 1px tracé À L'EXTÉRIEUR de sa boîte ;
	   la pastille se cale sur ce trait (bord droit et milieu du bord haut), pas sur la boîte. */
	top: -1px;
	right: -1px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.15em 0.6em;
	border-radius: 999px;
	background: var(--theme-palette-color-6);
	color: var(--theme-palette-color-8);
	font-size: 0.8em;
	font-weight: 700;
	line-height: 1.45;
	white-space: nowrap;
	z-index: 2;
	pointer-events: none;
}
/* Variation en rupture : pas de badge promo */
.woo-variation-items-wrapper .button-variable-item.disabled .hb-variation-discount {
	display: none;
}

/* --- Description courte et onglets --- */
.woocommerce-product-details__short-description {
	margin-bottom: 1.618em;
}

.woocommerce-product-details__short-description ul {
	margin-left: 15px;
	list-style: square;
}

.woocommerce-tabs {
	padding-bottom: 1em;
}

.woocommerce-tabs table,
.woocommerce-product-details__short-description table {
	border: 1px solid var(--theme-border-color);
}

.woocommerce-tabs table {
	margin-bottom: 0;
}

.woocommerce-tabs table:not(.has-background) th,
.woocommerce-product-details__short-description table th,
.woocommerce-tabs table:not(.has-background) td,
.woocommerce-product-details__short-description table td {
	background-color: unset !important;
}

.woocommerce-product-details__short-description table th:first-child {
	min-width: 145px;
}

.woocommerce-product-details__short-description table th,
.woocommerce-product-details__short-description table td {
	line-height: 18px;
	vertical-align: middle;
}

.woocommerce-tabs table:not(.has-background) tbody tr:nth-child(2n) th,
.woocommerce-product-details__short-description table tbody tr:nth-child(2n) th,
.woocommerce-tabs table:not(.has-background) tbody tr:nth-child(2n) td,
.woocommerce-product-details__short-description table tbody tr:nth-child(2n) td {
	background-color: var(--theme-palette-color-7) !important;
}

.woocommerce-tabs table td,
.woocommerce-tabs table th {
	font-size: 14px;
	line-height: 1.214;
}

/* Navigation des onglets (couleurs, indicateur de l'onglet actif, police) : réglages natifs Blocksy
   (Personnaliser → WooCommerce → Produit unique → Onglets du produit). */

/* Onglets personnalisés (Custom Product Tabs) */
.woocommerce-Tabs-panel--recommandations-dusage table,
.woocommerce-Tabs-panel--utilisation table {
	border: 0 none;
	width: auto !important;
}

.woocommerce-Tabs-panel--recommandations-dusage table th,
.woocommerce-Tabs-panel--utilisation table th {
	font-size: 16px;
	padding-left: 0;
	vertical-align: bottom;
}

.woocommerce-tabs .woocommerce-Tabs-panel--recommandations-dusage ul,
.woocommerce-tabs .woocommerce-Tabs-panel--utilisation ul {
	margin-left: 1.2em;
}

/* --- Avis --- */
.woocommerce-noreviews {
	display: none;
}

#reviews .commentlist li {
	margin-bottom: 1em;
	padding: 10px 10px 2px 10px;
	border: 1px solid var(--theme-border-color);
}

#reviews .commentlist li ul.children li {
	border: none;
}

#reviews .commentlist li:last-child {
	border-bottom: 1px solid var(--theme-border-color);
}

#reviews .commentlist li p.meta {
	margin-bottom: 5px !important;
}

#reviews .commentlist li p.meta time {
	display: none;
}

#reviews .commentlist .description p {
	margin-bottom: 0;
}

/* ==========================================================================
   Pages de remerciement (Blocksy → Pages de remerciement)
   Mise en page : blocs natifs de l'éditeur (Groupe, Colonnes, Liste, Boutons, « Détails de la commande »).
   Ici, seulement ce que l'éditeur ne sait pas faire, sur des classes posées dans les blocs
   (Avancé → Classe CSS) ; données de la commande : code court [hb_commande], cf. functions.php.
   ========================================================================== */

/* « Et maintenant ? » : liste numérotée (classe hb-etapes) en frise. Pastilles numérotées reliées par un trait ;
   la première (commande reçue) est cochée. Chaque étape : titre en gras, puis détail plus petit. */
ol.hb-etapes {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: hb-etape;
}

ol.hb-etapes > li {
	position: relative;
	padding-inline-start: 36px;
	padding-block-end: 14px;
	font-size: .875rem;
	counter-increment: hb-etape;
}

ol.hb-etapes > li:last-child {
	padding-block-end: 0;
}

ol.hb-etapes > li > strong {
	font-size: 1rem;
}

ol.hb-etapes > li::before {
	content: counter(hb-etape);
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	width: 24px;
	height: 24px;
	display: grid;
	place-items: center;
	border: 2px solid var(--theme-palette-color-3);
	border-radius: 50%;
	background: var(--theme-palette-color-8);
	color: var(--theme-palette-color-10);
	font-size: 12px;
	font-weight: 700;
}

ol.hb-etapes > li:first-child::before {
	content: "✓";
	background: var(--theme-palette-color-3);
	color: var(--theme-palette-color-8);
}

ol.hb-etapes > li:not(:last-child)::after {
	content: "";
	position: absolute;
	inset-inline-start: 11px;
	top: 26px;
	bottom: 2px;
	width: 2px;
	background: var(--theme-palette-color-4);
}

/* Paragraphe précédé d'une icône du dossier assets/icons (mêmes dessins que la réassurance de la fiche produit),
   en vert palette 3 : classe hb-ico + hb-ico-boutique, hb-ico-camion, hb-ico-horloge ou hb-ico-cagnotte. */
.hb-ico {
	position: relative;
	padding-inline-start: 34px;
}

.hb-ico::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 2px;
	width: 22px;
	height: 22px;
	background-color: var(--theme-palette-color-3);
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
}

/* Adresse de l'icône écrite dans chaque classe (une URL relative dans une variable CSS n'est pas résolue
   partout depuis cette feuille). */
.hb-ico-boutique::before { -webkit-mask-image: url("assets/icons/retrait-boutique.svg"); mask-image: url("assets/icons/retrait-boutique.svg"); }
.hb-ico-camion::before   { -webkit-mask-image: url("assets/icons/expedition.svg"); mask-image: url("assets/icons/expedition.svg"); }
.hb-ico-horloge::before  { -webkit-mask-image: url("assets/icons/delai-livraison.svg"); mask-image: url("assets/icons/delai-livraison.svg"); }
.hb-ico-cagnotte::before { -webkit-mask-image: url("assets/icons/cagnotte.svg"); mask-image: url("assets/icons/cagnotte.svg"); }

/* En-tête de la page Commande (Personnaliser → En-tête « Commande ») : élément « Contacts » de Blocksy avec les
   icônes au trait retour.svg et cadenas.svg. Le réglage « Icons Color » de Blocksy colore le remplissage (fill)
   des icônes ; ces dessins sont au trait (currentColor) : on leur passe la même couleur. Textes sur une ligne. */
.ct-header [data-id="contacts"] .ct-icon-container {
	color: var(--theme-icon-color);
}

.ct-header [data-id="contacts"] .contact-text {
	white-space: nowrap;
}

/* Carte de la cagnotte (produite par le code court, seulement si des points sont crédités) : même cadre que les
   cartes de la page (bordure palette 5, coins de 8 px). */
.hb-ty-cagnotte {
	margin: 0;
	padding: 22px 24px 22px 58px;
	border: 1px solid var(--theme-palette-color-5);
	border-radius: 8px;
	background: var(--theme-palette-color-8);
}

.hb-ty-cagnotte.hb-ico::before {
	inset-inline-start: 24px;
	top: 24px;
}

/* ==========================================================================
   Popup de bienvenue (Blocksy → Blocs de contenu → Popup)
   Code promo dans un paragraphe de classe hb-code-promo (Avancé → Classe CSS) : encadré pointillé, copié au clic
   (assets/js/site.js) avec confirmation « ✓ copié ». Repris de l'ancien mu-plugin herborisia-lightpopup.php,
   couleurs de la palette au lieu des codes en dur.
   ========================================================================== */
.hb-code-promo {
	display: block;
	width: fit-content;
	margin: 8px auto 4px;
	padding: 12px 30px;
	border: 2px dashed var(--theme-palette-color-3);
	border-radius: 10px;
	color: var(--theme-palette-color-10);
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: 3px;
	cursor: pointer;
	transition: background-color .15s ease;
}

.hb-code-promo:hover {
	background-color: var(--theme-palette-color-7);
}

.hb-code-promo.is-copied::after {
	content: " \2713  copi\00e9";
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: normal;
}

/* ==========================================================================
   Plugin Display Posts
   ========================================================================== */

ul.display-posts-listing {
	margin-left: 1em;
}

ul.display-posts-listing li.listing-item {
	list-style: square;
}

/* ==========================================================================
   Rank Math : FAQ en accordéon, listes, fil d'Ariane
   ========================================================================== */

ol.rank-math-list {
	margin-left: 1.3em;
}

ol.rank-math-list li::marker {
	color: var(--theme-palette-color-5);
	font-size: 1.41575em;
	font-weight: 600;
}

#rank-math-faq .rank-math-list-item {
	margin-bottom: 1em;
	margin-top: 1em;
	border-bottom: 1px solid var(--theme-palette-color-8);
}

.rank-math-question {
	color: var(--theme-palette-color-5);
	cursor: pointer;
	position: relative;
	display: block;
	padding-right: 1em;
	font-weight: 300;
	margin-top: 30px;
}

.rank-math-question:after {
	position: absolute;
	right: 5px;
	top: 0;
	content: "\2715";
	transform: rotate(-45deg);
	transition: all 150ms ease-in-out;
}

.rank-math-question.collapse:after {
	transform: rotate(0deg);
}

.rank-math-question:hover {
	opacity: 0.8;
}

/* Fil d'Ariane sur une seule ligne, qui défile au doigt quand il est trop long (mobile) ; aucun réglage natif
   (Blocksy ni Rank Math). Barre de défilement masquée ; overscroll-behavior évite de déclencher le geste
   « page précédente » du navigateur en bout de défilement. Sur ordinateur, il tient sur la ligne : rien ne change. */
.ct-breadcrumbs .rank-math-breadcrumb p {
	white-space: nowrap;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.ct-breadcrumbs .rank-math-breadcrumb p::-webkit-scrollbar {
	display: none;
}

/* ==========================================================================
   Mon compte
   ========================================================================== */

table.my_account_orders:not(.has-background) tbody td {
	background-color: var(--theme-palette-color-8);
}

table.my_account_orders:not(.has-background) th {
	background-color: var(--theme-palette-color-4);
}

table.my_account_orders .button,
table.woocommerce-MyAccount-downloads .button {
	padding: .26180469716em .875em;
}

table.my_account_orders thead th {
	padding: .8em 1.41575em;
}

ul.my-account-orders-custom-status {
	list-style: none;
	margin: 0;
}

ul.my-account-orders-custom-status li:not(:last-child) {
	margin-bottom: 10px;
}

/* ==========================================================================
   Accueil (Elementor, page 2249)
   Mise en page, couleurs (palette Blocksy, couleurs globales d'Elementor) et typographie : réglages natifs
   d'Elementor. Ici, seulement ce qu'Elementor ne sait pas faire, sur des classes posées dans l'éditeur
   (Avancé → Classes CSS). Pas de breakpoints : container queries sur la largeur des sections.
   ========================================================================== */

/* Titres de section : vert, majuscules espacées, filet dessous (classe hb-titre sur le widget Titre).
   L'espace au-dessus est porté par le titre, pour être le même dans toutes les sections. */
.elementor-widget-heading.hb-titre {
	margin-block-start: 40px;
}

.elementor-widget-heading.hb-titre .elementor-heading-title {
	font-size: 1.4rem;
	line-height: 1.3;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--theme-palette-color-3);
	font-weight: 700;
	text-align: center;
}

.elementor-widget-heading.hb-titre .elementor-heading-title::after {
	content: "";
	display: block;
	width: 44px;
	height: 2px;
	margin: 8px auto 0;
	background-color: var(--theme-palette-color-4);
}

/* Hero (classe hb-hero) : conteneur « Pleine largeur » (cf. « Conteneur pleine largeur » plus haut), en grille
   texte à gauche, photo à droite ; une seule colonne sur mobile (réglage natif d'Elementor). */
.hb-hero {
	container: hb-hero / inline-size;
}

/* Images fleuries (JPEG sur fond blanc : ornement du hero, séparateurs entre sections) : le blanc se fond dans
   ce qu'il y a dessous (aplat vert, ombre des cartes). Classe hb-fusion sur le widget Image. */
.hb-fusion img {
	mix-blend-mode: multiply;
}

/* « Herboristerie » au-dessus du titre, dans le H1 : <span class="hb-eyebrow">. */
.hb-eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-bottom: 14px;
	font-size: .8rem;
	line-height: 1;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--theme-palette-color-3);
}

.hb-eyebrow::before,
.hb-eyebrow::after {
	content: "";
	width: 40px;
	height: 1px;
	background-color: currentColor;
}

/* Photo du hero : remplit sa colonne, quelle que soit la hauteur du texte. */
.hb-hero__visuel {
	position: relative;
}

.hb-hero__photo {
	position: absolute;
	inset: 0;
}

.hb-hero__photo :is(a, img) {
	display: block;
	width: 100%;
	height: 100%;
}

.hb-hero__photo img {
	object-fit: cover;
}

/* Carte « Notre boutique », posée sur la photo. */
.hb-hero__boutique {
	position: absolute;
	inset-inline-start: 24px;
	bottom: 24px;
	box-shadow: 0 16px 36px -16px color-mix(in srgb, var(--theme-palette-color-1) 60%, transparent);
	transition: transform .25s ease;
}

.hb-hero__boutique:hover {
	transform: translateY(-3px);
}

/* Note Google (widget « Home – Note hero », mode Rating) : compacte, sur deux lignes. */
/* Le plugin met en page par variables CSS (--flx, --gap, --align, --rpi-star-size) : on les règle.
   Note et étoiles sur une ligne, puis « Basé sur N avis Google » : de « powered by Google », seul le mot
   « Google » (logo texte, mention d'attribution des données Google) est gardé. */
.hb-note {
	--rpi-star-size: 13px;
}

/* Sans le padding et la marge du plugin sous la note, pour que le texte soit centré face à la photo
   (le plugin les impose en !important, sans variable CSS : seul cas où on répond par !important). */
.hb-note .wp-gr .wp-google-list .grw-header-inner {
	padding: 0 !important;
	margin: 0 !important;
}

.hb-note .grw-header-inner .rpi-col8 {
	--flx: grid;
	--gap: 2px 4px;
	--align: center;
	grid-template-columns: auto 1fr;
}

.hb-note .rpi-stars {
	grid-column: 1 / -1;
	font-size: 13px;
}

.hb-note .wp-google-based {
	white-space: nowrap;
	font-size: 12px;
	color: var(--theme-palette-color-9);
}

.hb-note .wp-gr .wp-google-powered {
	font-size: 0;
	line-height: 1.2;
}

.hb-note .wp-gr .wp-google-powered > span {
	font-size: 12px;
}

@container hb-hero (max-width: 767px) {
	.hb-hero__visuel {
		order: -1;
		min-height: 230px !important;
	}

	.hb-hero__boutique {
		inset-inline-start: 12px;
		bottom: -26px;
		z-index: 2;
	}

	.hb-hero__texte {
		padding-top: 48px !important;
	}

	/* Engagements : une ligne qui défile au doigt. */
	.hb-hero__engagements {
		display: flex !important;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}

	.hb-hero__engagements > .e-con {
		flex: 0 0 96px;
	}
}

/* « Notre sélection » : cartes par univers (classe hb-univers). Grande carte Herboristerie à gauche,
   4 cartes à droite ; 2 colonnes puis 1 quand la section rétrécit. */
.hb-univers {
	container: hb-univers / inline-size;
}

.hb-univers__carte {
	position: relative;
	overflow: hidden;
	min-height: 230px;
}

.hb-univers__carte--grand {
	grid-row: span 2;
}

/* Titre d'univers (H3 lié) : flèche dans un rond, alignée à droite. */
.hb-univers__titre .elementor-heading-title a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	color: inherit;
}

.hb-univers__titre .elementor-heading-title a::after {
	content: "\2192";
	display: grid;
	place-items: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--theme-palette-color-8);
	color: var(--theme-palette-color-9);
	font-size: 15px;
	transition: transform .25s ease;
}

.hb-univers__titre .elementor-heading-title a:hover::after {
	transform: translateX(3px);
}

/* Photo produit : fondue dans le fond pastel, en bas à droite (au centre dans la grande carte). */
.hb-univers__photo {
	position: absolute;
	inset-inline-end: 14px;
	bottom: 14px;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	width: 36%;
	height: 58%;
}

.hb-univers__photo img {
	width: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform .4s ease;
}

.hb-univers__carte:hover .hb-univers__photo img {
	transform: scale(1.05) rotate(-2deg);
}

.hb-univers__carte--grand .hb-univers__photo {
	position: static;
	justify-content: center;
	width: auto;
	height: auto;
}

.hb-univers__carte--grand .hb-univers__photo img {
	max-width: min(100%, 340px);
}

/* Pastilles des sous-catégories : au-dessus de la photo, sans la recouvrir. */
.hb-univers__liens {
	position: relative;
	z-index: 1;
	margin-top: auto;
	padding-inline-end: 38%;
}

.hb-univers__carte--grand .hb-univers__liens {
	padding-inline-end: 0;
}

@container hb-univers (max-width: 899px) {
	.hb-univers > .e-con-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	/* Même structure pour toutes les cartes : la grande prend toute la largeur. */
	.hb-univers__carte--grand {
		grid-column: span 2;
		grid-row: auto;
	}

	.hb-univers__carte--grand .hb-univers__photo {
		position: absolute;
		justify-content: flex-end;
		width: 30%;
		height: 62%;
	}

	.hb-univers__carte--grand .hb-univers__liens {
		padding-inline-end: 34%;
	}
}

@container hb-univers (max-width: 559px) {
	.hb-univers > .e-con-inner {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.hb-univers__carte--grand {
		grid-column: auto;
	}

	.hb-univers__carte {
		min-height: 160px;
	}

	.hb-univers__photo,
	.hb-univers__carte--grand .hb-univers__photo {
		width: 30%;
		height: 52%;
	}

	.hb-univers__liens {
		padding-inline-end: 32%;
	}
}

/* « Nos coups de cœur » (classe hb-defile) : une ligne de produits qui défile au doigt quand c'est étroit. */
.hb-defile {
	container: hb-defile / inline-size;
}

@container hb-defile (max-width: 599px) {
	.hb-defile [data-products] {
		display: flex !important;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		gap: 12px;
	}

	.hb-defile [data-products] > li {
		flex: 0 0 62%;
		scroll-snap-align: start;
	}
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Bloc catégories Gutenberg (WooCommerce Blocks) : 2 colonnes sur mobile.
   Non couvert par le réglage de colonnes Blocksy, qui ne s'applique qu'au catalogue. */
@media only screen and (max-width: 767px) {
	.wc-block-grid__products {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 10px;
	}
}

@media (min-width: 768px) {
	.woocommerce-tabs table,
	.woocommerce-product-details__short-description table {
		width: auto;
	}
}