/**
 * SPD Single Product — Fiche produit WooCommerce
 * =====================================================
 * Phase 5B — Shell structurel. Reproduit la géométrie du
 * design-spd React ProductDetailPage.tsx :
 *
 *   Breadcrumb
 *   ↓
 *   Main product grid (lg:grid-cols-12, gap-8 lg:gap-12)
 *   ├── Gallery          (lg:col-span-6)
 *   └── Product info     (lg:col-span-6)
 *   ↓
 *   Tabs                 (Phase 5F)
 *   ↓
 *   Related products     (Phase 5H)
 *   ↓
 *   Sticky mobile panel  (Phase 5I)
 *
 * Ce fichier couvre : shell structurel (5B), galerie (5C), colonne
 * info/prix/rating/réassurance (5D), contrôles d'achat —
 * variations en pilules, quantité, CTA, buy-now, wishlist (5E) et
 * onglets produit (5F). Les avis et les produits associés arrivent
 * dans les phases 5G → 5J.
 *
 * Scope : body.spd-single-product (is_product() uniquement) et
 * #spd-product-page. Aucun style global.
 *
 * Chargé conditionnellement sur is_product() (voir inc/enqueue.php).
 * Dépend de spd-design-system.css et spd-shell.css pour les tokens.
 *
 * @package SPD_Child
 * @since   2.2.0
 */

/* ============================================================
   0. Neutralisation du container Astra (single product only)
   ============================================================
   Même problématique que le shop (spd-shop.css §0) : Astra wrappe le
   contenu dans .site-content > .ast-container (max-width 1240px +
   padding 20px) puis #primary { margin: 4em 0 } et
   .ast-woocommerce-container. Sans neutralisation, la fiche produit
   serait double-contrainte et ne pourrait pas atteindre la géométrie
   React (max-w-7xl 1280px + px-4 sm:px-6).

   Scope : body.spd-single-product uniquement.
   ============================================================ */
.spd-single-product .site-content > .ast-container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.spd-single-product #primary {
	margin: 0;
	padding: 0;
}

.spd-single-product .ast-woocommerce-container {
	padding: 0;
}

/* ============================================================
   1. Page container
   React: max-w-7xl mx-auto px-4 sm:px-6 py-6 space-y-10 pb-24 lg:pb-16
   ============================================================
   pb-24 (96px) sur mobile réserve l'espace du futur sticky panel
   (Phase 5I, position:fixed) ; lg:pb-16 (64px) sur desktop.
   ============================================================ */
.spd-product-page {
	line-height: 1.5; /* Tailwind preflight ; Astra body = 1.65 */

	/* Tokens px — Astra réduit html { font-size: 91.2% } ≤921px, ce qui
	   rétrécirait tous les rem. Le React utilise 16px à tous les
	   breakpoints ; on fixe les tokens en px (même approche que
	   spd-shop.css). */
	--spd-font-size-xs:   12px;
	--spd-font-size-sm:   14px;
	--spd-font-size-base: 16px;
	--spd-font-size-lg:   18px;
	--spd-font-size-xl:   20px;
	--spd-font-size-2xl:  24px;
	--spd-font-size-3xl:  30px;
	--spd-font-size-4xl:  36px;

	--spd-radius-md:   8px;
	--spd-radius-lg:   12px;
	--spd-radius-xl:   16px;
	--spd-radius-2xl:  24px;

	/* Padding container en px (idem) — le design system les définit
	   en rem ; sous Astra ≤921px ils rétréciraient à ~91.2% (16px
	   deviendrait 14.6px au lieu des 16px du React px-4). */
	--spd-container-padding:    16px;   /* React px-4 */
	--spd-container-padding-sm: 24px;   /* React sm:px-6 */
	--spd-container-padding-lg: 32px;

	max-width: var(--spd-container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--spd-container-padding);
	padding-right: var(--spd-container-padding);
	padding-top: 24px;
	padding-bottom: 96px;  /* React pb-24 — réserve le sticky mobile */

	/* React space-y-10 = 40px entre chaque section de la page. */
	display: flex;
	flex-direction: column;
	gap: 40px;
}

@media (min-width: 640px) {
	.spd-product-page {
		padding-left: var(--spd-container-padding-sm);
		padding-right: var(--spd-container-padding-sm);
	}
}

/* Pas de lg:px-8 — le React utilise px-4 sm:px-6 uniquement. */

@media (min-width: 1024px) {
	.spd-product-page {
		padding-bottom: 64px; /* React lg:pb-16 */
	}
}

/* ============================================================
   2. Breadcrumb
   Le breadcrumb produit utilise le composant PARTAGE
   template-parts/components/breadcrumb.php via l'override
   woocommerce/global/breadcrumb.php — styles .spd-breadcrumb*
   dans spd-shell.css (section 14). Aucun style local : une seule
   source visuelle pour tous les breadcrumbs du site.
   ============================================================ */


/* ============================================================
   3. Product wrapper — sections empilées
   React: le conteneur page a space-y-10 ; dans notre markup le
   .product regroupe main + tabs + related → même rythme vertical.
   ============================================================ */
.spd-product {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* ============================================================
   4. Main grid — Galerie | Info
   React: grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-start
   ============================================================ */
.spd-product__main {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;            /* React gap-8 */
	align-items: start;   /* React items-start */
}

@media (min-width: 1024px) {
	.spd-product__main {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: 48px;        /* React lg:gap-12 */
	}

	.spd-product__gallery,
	.spd-product__info {
		grid-column: span 6 / span 6; /* React lg:col-span-6 × 2 */
	}
}

/* ── Neutralisation des floats/width WooCommerce + Astra ────────
   WC natif : div.images { float:left; width:48% } et
   div.summary { float:right; width:48% }.
   Astra ajoute (≥921px) :
   .woocommerce-page #content .ast-woocommerce-container div.product
   div.images { width:50% } / div.summary { width:46% }
   → ces sélecteurs contiennent l'ID #content → spécificité (1-4-2).
   Un simple #spd-product-page (1-1-0) perd ; le préfixe
   #content #spd-product-page (2-1-0) bat tous les sélecteurs
   WooCommerce/Astra à un seul ID, sans !important.
   Vérifié par mesure réelle : la galerie rendait à 296px (=50% de la
   cellule) et le summary à 272px (=46%, floaté à droite). */
#content #spd-product-page .woocommerce-product-gallery,
#content #spd-product-page .summary {
	float: none;
	width: auto;
	margin: 0;
}

/* WC ajoute aussi margin-bottom sur .summary / .images. */
#content #spd-product-page .woocommerce-product-gallery,
#content #spd-product-page .summary.entry-summary {
	margin-bottom: 0;
}

/* woocommerce_output_all_notices (woocommerce_before_single_product)
   rend un .woocommerce-notices-wrapper VIDE directement dans le flex
   container #spd-product-page → il compte comme item et double le gap
   (80px au lieu des 40px space-y-10 du React entre breadcrumb et
   produit). Vide = display:none ; quand des notices existent
   (ex. ajout au panier) il s'affiche normalement. */
#spd-product-page > .woocommerce-notices-wrapper:empty {
	display: none;
	margin: 0;
}

/* ============================================================
   5. Shells Tabs / Related / Sticky
   Conteneurs structurels vides de style détaillé — remplis en
   5F (tabs), 5H (related) et 5I (sticky mobile).
   ============================================================ */
.spd-product__tabs,
.spd-product__related {
	min-width: 0; /* évite les débordements de contenu dans la pile */
}

/* ============================================================
   6. Galerie (Phase 5C)
   React ProductDetailPage.tsx :
     .lg:col-span-6.space-y-4
     ├── .relative.aspect-4/3.sm:aspect-square.bg-slate-50
     │      .rounded-3xl.border.border-slate-200.overflow-hidden.p-6
     │      .flex.items-center.justify-center
     │   ├── badges (absolute top-4 left-4 flex-col gap-1.5)
     │   └── img.w-full.h-full.object-contain.mix-blend-multiply
     │       .transition-transform.duration-300.hover:scale-105
     └── thumbs .flex.gap-3 → button.w-20.h-20.rounded-2xl.border-2
   ============================================================ */

/* React space-y-4 = 16px entre l'image principale et les vignettes. */
.spd-product-gallery {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ── Image principale ──────────────────────────────────────────
   relative + aspect-4/3 (mobile) → aspect-square (sm ≥640px)
   bg-slate-50 #F8FAFC / border-slate-200 #E2E8F0 / rounded-3xl 24px
   p-6 24px / overflow-hidden / flex centré. */
.spd-product-gallery__main {
	position: relative;
	aspect-ratio: 4 / 3;
	background-color: #F8FAFC;
	border: 1px solid #E2E8F0;
	border-radius: 24px;
	overflow: hidden;
	padding: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (min-width: 640px) {
	.spd-product-gallery__main {
		aspect-ratio: 1 / 1;
	}
}

/* img : w-full h-full object-contain mix-blend-multiply
   transition-transform duration-300 hover:scale-105
   NB: WC applique .woocommerce div.product div.images img
   { width:100%; height:auto } (spécificité 0-2-3) — le préfixe
   #spd-product-page garantit height:100% + object-fit:contain. */
#spd-product-page .spd-product-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
	display: block;
	margin: 0; /* neutralise le centrage WC (.woocommerce-product-gallery__image img { margin:0 auto }) */
	box-shadow: none;
}

.spd-product-gallery__main:hover .spd-product-gallery__img {
	transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
	.spd-product-gallery__img {
		transition: none;
	}
	.spd-product-gallery__main:hover .spd-product-gallery__img {
		transform: none;
	}
}

/* ── Badges ────────────────────────────────────────────────────
   React: absolute top-4 left-4 z-10 flex flex-col gap-1.5
   pointer-events-none. Badge md: text-xs font-bold px-2.5 py-1
   rounded-lg uppercase tracking-wider + shadow-xs. */
.spd-product-gallery__badges {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 6px;
	pointer-events: none;
}

.spd-product-gallery__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	user-select: none;
	font-size: 12px;
	font-size: var(--spd-font-size-xs);
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 8px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1.2;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* Tailwind shadow-xs */
}

.spd-product-gallery__badge--promo {
	background-color: #D93829;
	color: #FFFFFF;
}

.spd-product-gallery__badge--new {
	background-color: #0F5B94;
	color: #FFFFFF;
}

/* ── Thumbnails ────────────────────────────────────────────────
   React: flex gap-3 (12px). Button: w-20 h-20 (80px) rounded-2xl
   (16px) border-2 overflow-hidden p-1 bg-white transition-all.
   Inactif: border-slate-200 opacity-70 hover:opacity-100.
   Actif: border-[#0F5B94] shadow-md. */
.spd-product-gallery__thumbs {
	display: flex;
	flex-wrap: wrap; /* 5I — les vignettes passent à la ligne plutôt
		que de déborder du viewport (surtout <640px où la rangée ne
		contient que ~4 vignettes). */
	gap: 12px;
}

.spd-product-gallery__thumb {
	width: 80px;
	height: 80px;
	border-radius: 16px;
	border: 2px solid #E2E8F0;
	overflow: hidden;
	padding: 4px;
	background-color: #FFFFFF;
	box-shadow: none;        /* React : aucune ombre sur l'inactif —
	                            shadow-md uniquement sur l'actif. */
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
	            border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.spd-product-gallery__thumb:hover {
	opacity: 1;
}

.spd-product-gallery__thumb.is-active {
	border-color: #0F5B94;
	opacity: 1;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
	            0 2px 4px -2px rgba(0, 0, 0, 0.1); /* Tailwind shadow-md */
}

/* Focus visible — exigé pour la navigation clavier (React utilise le
   ring navigateur ; on rend l'état explicite et cohérent). */
.spd-product-gallery__thumb:focus-visible {
	outline: 2px solid #0F5B94;
	outline-offset: 2px;
}

/* Même risque de spécificité WC (div.images img) sur les vignettes. */
#spd-product-page .spd-product-gallery__thumb-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.spd-product-gallery__thumb {
		transition: none;
	}
}

/* ── Neutralisations WC/Astra dans la galerie SPD ─────────────
   Le CSS natif WooCommerce style .woocommerce-product-gallery__image
   (margin-bottom), .flex-viewport (flexslider) et .onsale. Notre
   markup ne rend ni flexslider ni .onsale, mais on verrouille le
   container pour éviter toute marge résiduelle. */
.spd-product-gallery .woocommerce-product-gallery__image {
	margin: 0;
}

.spd-product-gallery__main .woocommerce-placeholder,
.spd-product-gallery__main img[src*="placeholder"] {
	box-shadow: none;
}

/* ============================================================
   7. Product info (Phase 5D)
   Colonne droite du React ProductDetailPage.tsx
   (.lg:col-span-6 space-y-5) :

     CATÉGORIE • Réf: SKU + share
     ↓ mt-1
     H1
     ↓ mt-2
     rating + "|" + stock
     ↓ space-y-5 (20px)
     Price box
     ↓ 20px
     [5E slot] / short description
     ↓ 20px (+ pt-2)
     form.cart (natif — relooké en 5E)
     ↓ 20px (+ pt-4 + border-t)
     Réassurance

   Le React imbrique topline/H1/rating dans un <div> interne avec
   des margins dédiées (mt-1, mt-2) ; notre DOM les rend comme
   enfants directs de .summary → chaque bloc porte sa margin-top
   mesurée. Les valeurs sont en px (tokens .spd-product-page,
   même convention que la galerie 5C) car Astra réduit html
   font-size à 91.2% ≤921px alors que le React reste à 16px.
   ============================================================ */

/* ── 7.1 Top line : "CATÉGORIE • Réf: SKU" + partage ──────────
   React: flex items-center justify-between gap-2
   label: text-xs font-bold uppercase tracking-wider text-#0F5B94 */
#spd-product-page .spd-product__topline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 0;
}

#spd-product-page .spd-product__topline-label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #0F5B94;
	line-height: 1.5;
}

/* Share button — React: text-slate-400 hover:text-slate-700 p-1.5
   rounded-full hover:bg-slate-100 transition-colors. Share2 18px. */
#spd-product-page .spd-product__share {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 6px;
	margin: 0;
	border: none;
	border-radius: 9999px;
	background: none;
	color: #94A3B8;
	cursor: pointer;
	transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1),
	            background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

#spd-product-page .spd-product__share:hover {
	color: #334155;
	background-color: #F1F5F9;
}

#spd-product-page .spd-product__share:focus-visible {
	outline: 2px solid #0F5B94;
	outline-offset: 2px;
}

#spd-product-page .spd-product__share .spd-icon {
	width: 18px;
	height: 18px;
	display: block;
}

/* État "lien copié" — feedback visuel équivalent au toast React
   (handleShare → showToast 'info'). Icône Check verte 1.5s. */
#spd-product-page .spd-product__share-icon--done {
	display: none;
}

#spd-product-page .spd-product__share.is-copied .spd-product__share-icon--share {
	display: none;
}

#spd-product-page .spd-product__share.is-copied .spd-product__share-icon--done {
	display: block;
	color: #059669; /* emerald-600 */
}

/* ── 7.2 H1 produit ──────────────────────────────────────────
   React: text-2xl sm:text-3xl md:text-4xl font-extrabold
   text-slate-900 tracking-tight mt-1.
   Tailwind v4 : 2xl = 24px/32px, 3xl = 30px/36px, 4xl = 36px/40px. */
#spd-product-page .product_title,
#spd-product-page .product_title.entry-title {
	margin: 4px 0 0;
	font-size: 24px;
	line-height: 32px;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: #0F172A;
	text-transform: none;
}

@media (min-width: 640px) {
	#spd-product-page .product_title,
	#spd-product-page .product_title.entry-title {
		font-size: 30px;
		line-height: 36px;
	}
}

@media (min-width: 768px) {
	#spd-product-page .product_title,
	#spd-product-page .product_title.entry-title {
		font-size: 36px;
		line-height: 40px;
	}
}

/* ── 7.3 Rating row : étoiles + note + (avis) | stock ─────────
   React: flex items-center gap-4 mt-2. Rating size="md" → 16px. */
#spd-product-page .spd-product__rating-row {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 8px;
	flex-wrap: wrap;
}

/* Reset WC : .woocommerce-product-rating a margin-bottom:1.618em. */
#spd-product-page .woocommerce-product-rating {
	margin-bottom: 0;
}

#spd-product-page .spd-rating {
	display: inline-flex;
	align-items: center;
	gap: 6px; /* React: inline-flex items-center gap-1.5 */
}

/* React: flex items-center text-[#EAA21D] — pas de gap interne. */
#spd-product-page .spd-rating__stars {
	display: inline-flex;
	align-items: center;
	color: #EAA21D;
}

#spd-product-page .spd-rating__star {
	display: inline-flex;
}

#spd-product-page .spd-rating__star .spd-icon {
	width: 16px;
	height: 16px;
	display: block;
}

/* Étoile vide : React text-slate-300 (stroke seul, pas de fill). */
#spd-product-page .spd-rating__star:not(.is-filled) {
	color: #CBD5E1;
}

/* Note numérique — React: text-xs font-semibold text-slate-800. */
#spd-product-page .spd-rating__value {
	font-size: 12px;
	font-weight: 600;
	color: #1E293B;
	line-height: 1.5;
}

/* Compteur — React: text-xs text-slate-500 font-normal. Garde le
   lien natif vers #reviews (ancre du tab avis WooCommerce). */
#spd-product-page .spd-rating__count {
	font-size: 12px;
	font-weight: 400;
	color: #64748B;
	text-decoration: none;
	line-height: 1.5;
}

#spd-product-page a.spd-rating__count:hover {
	color: #0F5B94;
}

/* Séparateur — React: text-xs text-slate-400 "|" */
#spd-product-page .spd-product__rating-sep {
	font-size: 12px;
	color: #94A3B8;
	line-height: 1.5;
}

/* Stock — React: text-xs font-semibold text-emerald-600
   flex items-center gap-1. Check 14px. */
#spd-product-page .spd-product__stock {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
}

#spd-product-page .spd-product__stock-icon {
	display: inline-flex;
}

#spd-product-page .spd-product__stock-icon .spd-icon {
	width: 14px;
	height: 14px;
	display: block;
}

#spd-product-page .spd-product__stock--in-stock {
	color: #059669; /* emerald-600 */
}

#spd-product-page .spd-product__stock--out-of-stock {
	color: #EF4444; /* état clair — cohérent WooCommerce (--spd-error) */
}

#spd-product-page .spd-product__stock--available-on-backorder {
	color: #D97706; /* amber-600 — sur commande */
}

/* ── 7.4 Price box ───────────────────────────────────────────
   React: p-4 rounded-2xl bg-slate-50 border border-slate-200.
   Row: flex items-baseline gap-3 → le composant Price interne est
   inline-flex items-baseline gap-2 flex-wrap → tous les gaps
   visibles valent 8px (la row n'a qu'un enfant). */
#spd-product-page .spd-product__price-box {
	margin-top: 20px; /* React space-y-5 */
	padding: 16px;
	border-radius: 16px;
	background-color: #F8FAFC;
	border: 1px solid #E2E8F0;
}

#spd-product-page .spd-product__price-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

/* p.price — reset WC (.woocommerce div.product p.price) + inline-flex
   pour aligner del/ins sur la baseline avec gap-2 (8px).
   Ordre React : prix actuel AVANT prix barré → ins order:1, del order:2
   (spd_format_price émet del puis ins dans le DOM). */
#spd-product-page .spd-product__price-box .price,
#spd-product-page .spd-product__price-box p.price {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

/* Prix actuel — React Price size="xl": text-2xl md:text-3xl
   font-black text-[#D93829] tracking-tight. */
#spd-product-page .spd-product__price-box .price .spd-price {
	font-size: 24px;
	line-height: 32px;
	font-weight: 900;
	letter-spacing: -0.025em;
	color: #D93829;
}

/* Devise — React: text-xs md:text-sm font-bold uppercase. */
#spd-product-page .spd-product__price-box .price .spd-price-currency {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0;
}

/* Prix promo (ins) — pas de soulignement natif. */
#spd-product-page .spd-product__price-box .price ins.spd-price--sale {
	order: 1;
	text-decoration: none;
	background: none;
}

/* Prix normal barré — React: text-xs md:text-sm font-medium
   text-slate-400 line-through. */
#spd-product-page .spd-product__price-box .price del.spd-price--regular {
	order: 2;
	font-size: 12px;
	line-height: 1.5;
	font-weight: 500;
	color: #94A3B8;
	text-decoration: line-through;
	opacity: 1;
}

/* La devise du prix barré garde la taille du montant (React rend
   "4 800 FCFA" entièrement en text-xs/text-sm — pas de sous-span
   réduit pour le prix original). */
#spd-product-page .spd-product__price-box .price del .spd-price-currency {
	font-size: inherit;
	font-weight: inherit;
	text-transform: none;
}

/* Badge -N% — React: text-[10px] font-extrabold bg-[#FDECEB]
   text-[#D93829] px-1.5 py-0.5 rounded-md. */
#spd-product-page .spd-product__discount {
	font-size: 10px;
	font-weight: 800;
	line-height: 1.5;
	background-color: #FDECEB;
	color: #D93829;
	padding: 2px 6px;
	border-radius: 6px;
	white-space: nowrap;
}

/* Sous-texte — React: text-xs text-slate-500 mt-1. */
#spd-product-page .spd-product__price-note {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: #64748B;
}

#spd-product-page .spd-product__price-note strong {
	font-weight: 700;
	color: inherit;
}

@media (min-width: 768px) {
	#spd-product-page .spd-product__price-box .price .spd-price {
		font-size: 30px;
		line-height: 36px;
	}

	#spd-product-page .spd-product__price-box .price .spd-price-currency {
		font-size: 14px;
	}

	#spd-product-page .spd-product__price-box .price del.spd-price--regular {
		font-size: 14px;
	}

	/* del .spd-price-currency reste inherit via la règle plus haute. */
}

/* ── 7.5 Short description ───────────────────────────────────
   React: text-sm text-slate-600 leading-relaxed (p simple). */
#spd-product-page .woocommerce-product-details__short-description {
	margin-top: 20px; /* React space-y-5 */
	font-size: 14px;
	line-height: 1.625;
	color: #475569;
}

#spd-product-page .woocommerce-product-details__short-description p {
	margin-bottom: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

/* ── 7.6 Zone add-to-cart (native WC — détaillée en 5E) ──────
   React: le bloc contrôles est space-y-5 + pt-2 → 28px depuis la
   description. On réserve la position exacte sans relooker les
   contrôles (quantité, boutons, variantes = Phase 5E). */
#spd-product-page .summary form.cart,
#spd-product-page .summary .variations_form {
	margin-top: 28px;
	margin-bottom: 0;
}

/* Stock dupliqué : le template natif add-to-cart rend
   wc_get_stock_html() (formatté par Astra en .ast-stock-detail, ou
   .stock natif hors stock). Le React affiche la disponibilité
   uniquement dans la rating row (7.3) → on masque la copie du
   formulaire sans retirer le filtre Astra (extensions intactes). */
#spd-product-page .summary .ast-stock-detail,
#spd-product-page .summary .stock {
	display: none;
}

/* ── 7.7 Réassurance ─────────────────────────────────────────
   React: pt-4 border-t border-slate-100 space-y-2.5 text-xs
   text-slate-600 ; items flex items-center gap-2.5 ; icônes 16px
   text-[#0F5B94]. Rendue via spd_product_summary_after — donc
   margin-top 20px (space-y-5) depuis le formulaire. */
#spd-product-page .spd-product__reassurance {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid #F1F5F9;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 12px;
	line-height: 1.5;
	color: #475569;
}

#spd-product-page .spd-product__reassurance-item {
	display: flex;
	align-items: center;
	gap: 10px;
}

#spd-product-page .spd-product__reassurance-icon {
	display: inline-flex;
	flex-shrink: 0;
	color: #0F5B94;
}

#spd-product-page .spd-product__reassurance-icon .spd-icon {
	width: 16px;
	height: 16px;
	display: block;
}

/* ============================================================
   8. Contrôles d'achat (Phase 5E)
   Reproduit React ProductDetailPage.tsx lignes 209–294 +
   QuantitySelector.tsx. WooCommerce reste le moteur : les selects
   natifs, input.qty, .single_add_to_cart_button et la validation
   de variation restent en place ; cette section ne fait que la
   couche visuelle.
   ============================================================ */

/* ── 8.1 Variations — sélecteurs en pilules ──────────────────
   React: label text-xs font-bold text-slate-700 block, puis
   flex flex-wrap gap-2.5 de boutons px-3.5 py-2 rounded-xl
   text-xs font-bold border.

   Le <select> natif est masqué UNIQUEMENT quand le JS a construit
   les pilules (.spd-variations--enhanced posé par
   spdVariationsInit). Sans JS → select natif visible, formulaire
   100% fonctionnel (progressive enhancement). */
#spd-product-page .variations_form .variations,
#spd-product-page .variations_form .variations tbody,
#spd-product-page .variations_form .variations tr,
#spd-product-page .variations_form .variations td,
#spd-product-page .variations_form .variations th {
	display: block;
	width: 100%;
	border: none;
	padding: 0;
	margin: 0;
	text-align: left;
	vertical-align: top;
}

#spd-product-page .variations_form .variations th.label {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	color: #334155; /* slate-700 */
	margin-bottom: 8px; /* React space-y-2 */
}

#spd-product-page .variations_form .variations th.label label {
	font: inherit;
	color: inherit;
	margin: 0;
}

/* Select natif masqué seulement quand les pilules existent.
   display:none est sûr ici : add-to-cart-variation.js lit et
   pilote le select par programmation (pas d'interaction requise)
   et les pilules offrent le contrôle accessible équivalent. */
#spd-product-page .variations_form.spd-variations--enhanced .variations select {
	display: none;
}

#spd-product-page .spd-variation-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px; /* React gap-2.5 */
}

/* Pill — React: px-3.5 py-2 rounded-xl text-xs font-bold
   transition-all border cursor-pointer flex items-center gap-2. */
#spd-product-page .spd-variation-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px; /* React gap-2 */
	padding: 8px 14px; /* px-3.5 py-2 */
	margin: 0;
	border: 1px solid #E2E8F0; /* border-slate-200 */
	border-radius: 12px; /* rounded-xl */
	background-color: #FFFFFF;
	color: #334155; /* text-slate-700 */
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	cursor: pointer;
	transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
	            border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
	            color 200ms cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

#spd-product-page .spd-variation-pill:hover {
	border-color: #CBD5E1; /* hover:border-slate-300 */
	background-color: #F8FAFC; /* hover:bg-slate-50 */
}

/* Selected — React: bg-[#0F5B94] text-white border-[#0F5B94]
   shadow-xs ring-2 ring-[#0F5B94]/20. */
#spd-product-page .spd-variation-pill.is-selected {
	background-color: #0F5B94;
	border-color: #0F5B94;
	color: #FFFFFF;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05),
	            0 0 0 3px rgba(15, 91, 148, 0.2); /* ring-2 /20 */
}

/* Prix dans la pilule — React: font-semibold, slate bleu au repos,
   white/85 quand sélectionné. */
#spd-product-page .spd-variation-pill__price {
	font-weight: 600;
	color: #0F5B94;
}

#spd-product-page .spd-variation-pill.is-selected .spd-variation-pill__price {
	color: rgba(255, 255, 255, 0.85);
}

/* Indisponible — WC désactive l'<option> (disabled) → la pilule
   reflète l'état. React n'a pas d'exemple dédié : opacity réduite,
   pas de suppression. */
#spd-product-page .spd-variation-pill:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

#spd-product-page .spd-variation-pill:focus-visible {
	outline: 2px solid #0F5B94;
	outline-offset: 2px;
}

/* Lien natif "Effacer" (WC le rend visible quand une sélection
   existe) — gardé, stylé en lien discret sous les pilules. */
#spd-product-page .variations_form .reset_variations {
	display: inline-block;
	margin-top: 8px;
	font-size: 12px;
	font-weight: 400;
	color: #94A3B8;
	text-decoration: underline;
	text-underline-offset: 2px;
}

#spd-product-page .variations_form .reset_variations:hover {
	color: #334155;
}

/* ── 8.2 Ligne quantité ──────────────────────────────────────
   React: flex items-center gap-3 → "Quantité :" + selector +
   "Conditionnement sélectionné : X". Puis les CTA passent à la
   ligne suivante via le break flex 100%. */
#spd-product-page form.cart:not(.grouped_form):not(.variations_form),
#spd-product-page .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 12px; /* React gap-3 */
	row-gap: 12px;    /* React space-y-3 entre les deux lignes */
}

/* Le div plein-large force les CTA sur la 2e ligne flex —
   reproduit les deux rangées React (quantité puis boutons). */
#spd-product-page .spd-product__cta-break {
	flex-basis: 100%;
	width: 100%;
	height: 0;
	margin: 0;
}

#spd-product-page .spd-product__qty-label {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	color: #334155;
}

/* Selector — React QuantitySelector: inline-flex items-center
   border border-slate-200 rounded-xl bg-white shadow-xs
   overflow-hidden select-none. */
#spd-product-page .quantity {
	float: none; /* neutralise WC/Astra */
	display: inline-flex;
	align-items: center;
	border: 1px solid #E2E8F0;
	border-radius: 12px;
	background-color: #FFFFFF;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-xs */
	overflow: hidden;
	user-select: none;
	margin: 0;
	width: auto;
}

/* Boutons −/+ — React: w-9 h-9 text-slate-600 hover:bg-slate-100
   hover:text-slate-900 active:bg-slate-200 disabled:opacity-40. */
#spd-product-page .quantity .spd-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px; /* w-9 */
	height: 36px; /* h-9 */
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 0;
	background: none;
	color: #475569; /* slate-600 */
	cursor: pointer;
	transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1),
	            background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

#spd-product-page .quantity .spd-qty__btn:hover {
	background-color: #F1F5F9; /* slate-100 */
	color: #0F172A; /* slate-900 */
}

#spd-product-page .quantity .spd-qty__btn:active {
	background-color: #E2E8F0; /* slate-200 */
}

#spd-product-page .quantity .spd-qty__btn:disabled {
	opacity: 0.4;
	pointer-events: none;
}

#spd-product-page .quantity .spd-qty__btn:focus-visible {
	outline: 2px solid #0F5B94;
	outline-offset: -2px;
}

#spd-product-page .quantity .spd-qty__btn .spd-icon {
	width: 15px;
	height: 15px;
	display: block;
}

/* Input natif — React: w-10 text-sm font-bold text-slate-900
   text-center tabular-nums. Reste un vrai input WC. */
#spd-product-page .quantity input.qty {
	float: none;
	width: 40px; /* w-10 */
	height: 36px;
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	color: #0F172A;
	text-align: center;
	font-variant-numeric: tabular-nums;
	appearance: textfield;
	-moz-appearance: textfield;
}

#spd-product-page .quantity input.qty::-webkit-outer-spin-button,
#spd-product-page .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

#spd-product-page .quantity input.qty:focus-visible {
	outline: 2px solid #0F5B94;
	outline-offset: -2px;
}

/* Note conditionnement — React: text-xs text-slate-400
   font-medium, <strong> slate-700. */
#spd-product-page .spd-product__qty-unit {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	color: #94A3B8;
	min-width: 0;
}

#spd-product-page .spd-product__qty-unit strong {
	font-weight: 700;
	color: #334155;
}

/* Total dynamique — React sticky panel (ProductDetailPage:410-412) :
   label "Total" text-[11px] text-slate-400 block au-dessus d'un
   Price size="md" (text-base font-extrabold text-[#D93829]
   tracking-tight, devise text-xs font-bold uppercase).
   Poussé en fin de ligne quantité via margin-left:auto —
   miroir du panneau React (Total à gauche, contrôles à droite). */
#spd-product-page .spd-product__total {
	display: inline-flex;
	flex-direction: column;
	margin-left: auto;
	text-align: right;
	min-width: 0;
}

/* display:inline-flex ci-dessus écraserait la règle UA [hidden] —
   rétablit le masquage avant sélection d'une variation. */
#spd-product-page .spd-product__total[hidden] {
	display: none;
}

#spd-product-page .spd-product__total-label {
	font-size: 11px;
	font-weight: 400;
	line-height: 1.3;
	color: #94A3B8; /* slate-400 */
}

#spd-product-page .spd-product__total-value {
	font-size: 16px;
	font-weight: 800; /* font-extrabold */
	line-height: 1.4;
	color: #D93829;
	letter-spacing: -0.025em; /* tracking-tight */
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

#spd-product-page .spd-product__total-value .spd-price-currency {
	font-size: 0.75em; /* React text-xs à côté du montant md */
	font-weight: 700;
	text-transform: uppercase;
}

/* ── 8.3 CTA : Ajouter / Acheter / Wishlist ──────────────────
   React: flex flex-col sm:flex-row gap-3 pt-2.
     - Ajouter : flex-1 py-3.5 px-6 rounded-xl font-bold text-sm
       bg-[#0F5B94] hover:bg-[#0A436D] text-white shadow-md
       active:scale-98 + ShoppingBag 18px.
     - Acheter : py-3.5 px-6 bg-[#D93829] hover:bg-[#B82A1C].
     - Wishlist: p-3.5 rounded-xl border (cœur 20px). */

/* Neutralisation WC/Astra sur le bouton natif. */
#spd-product-page .single_add_to_cart_button,
#spd-product-page .spd-buy-now,
#spd-product-page .spd-wishlist {
	float: none;
}

#spd-product-page button.single_add_to_cart_button {
	flex: 1 1 0%; /* React flex-1 */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px; /* React gap-2 */
	min-width: 0;
	padding: 14px 24px; /* py-3.5 px-6 */
	margin: 0;
	border: none;
	border-radius: 12px;
	background-color: #0F5B94;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	cursor: pointer;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
	            0 2px 4px -2px rgba(0, 0, 0, 0.1); /* shadow-md */
	transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
	            transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Icône ShoppingBag 18px avant le libellé (mask → currentColor,
   compatible avec les états loading/disabled natifs de WC). */
#spd-product-page button.single_add_to_cart_button::before {
	content: '';
	display: inline-block;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

#spd-product-page button.single_add_to_cart_button:hover {
	background-color: #0A436D; /* React hover */
}

#spd-product-page button.single_add_to_cart_button:active {
	transform: scale(0.98); /* React active:scale-98 */
}

#spd-product-page button.single_add_to_cart_button:focus-visible {
	outline: 2px solid #0F5B94;
	outline-offset: 2px;
}

/* État désactivé natif WC — variation non sélectionnée /
   indisponible (.disabled wc-variation-selection-needed |
   wc-variation-is-unavailable) ou bouton disabled. Le clic reste
   possible : WC affiche son message natif (alert). */
#spd-product-page button.single_add_to_cart_button.disabled,
#spd-product-page button.single_add_to_cart_button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

#spd-product-page button.single_add_to_cart_button.disabled:active,
#spd-product-page button.single_add_to_cart_button:disabled:active {
	transform: none;
}

/* Spinner natif WC (.loading::after) conservé — juste l'icône
   masquée pendant le chargement AJAX éventuel. */
#spd-product-page button.single_add_to_cart_button.loading::before {
	opacity: 0;
}

/* Acheter maintenant — React: bg-[#D93829] hover:bg-[#B82A1C]. */
#spd-product-page button.spd-buy-now {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 24px;
	margin: 0;
	border: none;
	border-radius: 12px;
	background-color: #D93829;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	cursor: pointer;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
	            0 2px 4px -2px rgba(0, 0, 0, 0.1);
	transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
	            transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
	white-space: nowrap;
}

#spd-product-page button.spd-buy-now:hover {
	background-color: #B82A1C;
}

#spd-product-page button.spd-buy-now:active {
	transform: scale(0.98);
}

#spd-product-page button.spd-buy-now:focus-visible {
	outline: 2px solid #D93829;
	outline-offset: 2px;
}

/* Wishlist — React: p-3.5 rounded-xl border border-slate-200
   text-slate-500 hover:bg-slate-50 ; actif : border-[#D93829]
   bg-[#FDECEB] text-[#D93829] + cœur rempli. */
#spd-product-page button.spd-wishlist {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px; /* p-3.5 */
	margin: 0;
	border: 1px solid #E2E8F0;
	border-radius: 12px;
	background-color: #FFFFFF;
	color: #64748B; /* slate-500 */
	cursor: pointer;
	transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
	            border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
	            color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

#spd-product-page button.spd-wishlist:hover {
	background-color: #F8FAFC; /* slate-50 */
}

#spd-product-page button.spd-wishlist:focus-visible {
	outline: 2px solid #0F5B94;
	outline-offset: 2px;
}

#spd-product-page button.spd-wishlist .spd-icon {
	width: 20px;
	height: 20px;
	display: block;
}

#spd-product-page button.spd-wishlist.is-active {
	border-color: #D93829;
	background-color: #FDECEB;
	color: #D93829;
}

/* React: fill-[#D93829] sur le cœur actif. */
#spd-product-page button.spd-wishlist.is-active .spd-icon {
	fill: #D93829;
}

/* ── 8.4 Zone .single_variation (données de variation) ──────
   WC remplit .woocommerce-variation avec prix / description /
   disponibilité. Le prix est déjà reflété dans la price box
   (React n'a qu'un seul affichage de prix) et la description de
   variation n'existe pas dans le design → on ne garde visible
   que la disponibilité (stock / rupture / sur commande) et le
   message "déclinaison indisponible", stylés en note discrète.
   Le role="alert" natif du bloc reste intact pour les lecteurs
   d'écran. */
#spd-product-page .single_variation_wrap {
	margin-top: 12px; /* séparation depuis les pilules */
}

#spd-product-page .single_variation .woocommerce-variation-price,
#spd-product-page .single_variation .woocommerce-variation-description {
	display: none;
}

#spd-product-page .single_variation .woocommerce-variation-availability,
#spd-product-page .single_variation .woocommerce-variation--unavailable {
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	color: #475569;
}

#spd-product-page .single_variation .stock.out-of-stock {
	font-size: 12px;
	font-weight: 600;
	color: #EF4444;
	margin: 0;
}

#spd-product-page .single_variation .stock.available-on-backorder {
	font-size: 12px;
	font-weight: 600;
	color: #D97706;
	margin: 0;
}

#spd-product-page .single_variation .stock.in-stock {
	font-size: 12px;
	font-weight: 600;
	color: #059669;
	margin: 0;
}

/* ── 8.5 Responsive ──────────────────────────────────────────
   React: les CTA passent en colonne sous sm (640px) —
   flex-col sm:flex-row → chaque bouton prend toute la largeur.
   La ligne quantité reste inline (wrap si nécessaire à 360px). */
@media (max-width: 639px) {
	#spd-product-page button.single_add_to_cart_button,
	#spd-product-page button.spd-buy-now,
	#spd-product-page button.spd-wishlist {
		flex-basis: 100%;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	#spd-product-page .spd-variation-pill,
	#spd-product-page .quantity .spd-qty__btn,
	#spd-product-page button.single_add_to_cart_button,
	#spd-product-page button.spd-buy-now,
	#spd-product-page button.spd-wishlist {
		transition: none;
	}

	#spd-product-page button.single_add_to_cart_button:active,
	#spd-product-page button.spd-buy-now:active {
		transform: none;
	}
}

/* ============================================================
   9. Onglets produit (Phase 5F)
   React ProductDetailPage.tsx lignes 314–392 :

     div.bg-white.rounded-3xl.border.border-slate-200
        .p-6.sm:p-8.shadow-xs
     ├── nav : flex border-b border-slate-200 gap-6
     │         overflow-x-auto max-w-full touch-pan-x pb-2
     │   button : pb-3 text-sm font-bold border-b-2
     │            transition-colors whitespace-nowrap
     │     actif   : border-[#0F5B94] text-[#0F5B94]
     │     inactif : border-transparent text-slate-500
     │               hover:text-slate-800
     └── contenu : pt-6 text-sm text-slate-600 leading-relaxed

   Le markup reste le template NATIF WooCommerce
   (.woocommerce-tabs > ul.tabs > li.{key}_tab > a[role=tab] +
   .woocommerce-Tabs-panel#tab-*) : single-product.js gère le clic,
   aria-selected, le tabindex et la navigation clavier. Cette section
   ne fait que la couche visuelle + les contenus SPD.
   ============================================================ */

/* ── 9.1 Carte conteneur ─────────────────────────────────────
   React: bg-white rounded-3xl (24px) border-slate-200 (#E2E8F0)
   p-6 (24px) → sm:p-8 (32px) shadow-xs. */
#spd-product-page .woocommerce-tabs {
	background-color: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 24px;
	padding: 24px;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-xs */
}

@media (min-width: 640px) {
	#spd-product-page .woocommerce-tabs {
		padding: 32px; /* React sm:p-8 */
	}
}

/* ── 9.2 Nav onglets ─────────────────────────────────────────
   React: flex border-b gap-6 overflow-x-auto pb-2.
   Neutralisation complète du chrome natif WC (ul.tabs ::before,
   pilules li avec bordures/fond/ombres, coins ::before/::after). */
#spd-product-page .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: nowrap;
	gap: 24px; /* React gap-6 */
	list-style: none;
	margin: 0;
	padding: 0 0 8px; /* React pb-2 — réserve la zone scrollbar */
	border-bottom: 1px solid #E2E8F0;
	overflow-x: auto;
	overflow-y: hidden;
	max-width: 100%;
	position: static;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-x; /* React touch-pan-x */
}

#spd-product-page .woocommerce-tabs ul.tabs::before,
#spd-product-page .woocommerce-tabs ul.tabs::after {
	display: none; /* ligne de base + clearfix natifs WC */
}

#spd-product-page .woocommerce-tabs ul.tabs li {
	display: flex; /* l'ancre s'étire → soulignements alignés */
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	background: none;
	box-shadow: none;
	position: static;
	z-index: auto;
}

#spd-product-page .woocommerce-tabs ul.tabs li::before,
#spd-product-page .woocommerce-tabs ul.tabs li::after {
	display: none; /* coins arrondis dessinés par WC */
}

/* Onglet — React button : pb-3 (12px) text-sm (14px) font-bold
   border-b-2 transition-colors whitespace-nowrap. */
#spd-product-page .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0 0 12px;
	margin: 0;
	border: none;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: none;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	color: #64748B; /* text-slate-500 */
	white-space: nowrap;
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
	            border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

#spd-product-page .woocommerce-tabs ul.tabs li a:hover {
	color: #1E293B; /* React hover:text-slate-800 */
	background: none;
	text-shadow: none;
}

/* Actif — React: border-[#0F5B94] text-[#0F5B94]. */
#spd-product-page .woocommerce-tabs ul.tabs li.active a {
	color: #0F5B94;
	border-bottom-color: #0F5B94;
	text-shadow: none;
}

#spd-product-page .woocommerce-tabs ul.tabs li a:focus-visible {
	outline: 2px solid #0F5B94;
	outline-offset: 2px;
}

/* ── 9.3 Panneaux ────────────────────────────────────────────
   React: pt-6 (24px) text-sm (14px) text-slate-600 (#475569)
   leading-relaxed (1.625). WC/entry-content ajoutent des marges
   aux p/ul — neutralisées, l'espacement vit dans .spd-tab-stack
   (space-y-4 = 16px entre enfants directs). */
#spd-product-page .woocommerce-tabs .woocommerce-Tabs-panel {
	padding: 24px 0 0;
	margin: 0;
	border: none;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-size: 14px;
	line-height: 1.625;
	color: #475569;
}

/* single-product.js déplace le focus sur le panneau après activation
   d'un onglet (tabindex=-1) — le ring natif dessine un cadre parasite
   autour de tout le panneau. Conteneur non interactif : le focus
   clavier reste assuré par les ancres d'onglets (:focus-visible). */
#spd-product-page .woocommerce-tabs .woocommerce-Tabs-panel:focus {
	outline: none;
}

#spd-product-page .woocommerce-Tabs-panel p,
#spd-product-page .woocommerce-Tabs-panel ul,
#spd-product-page .woocommerce-Tabs-panel ol {
	margin: 0;
}

#spd-product-page .woocommerce-Tabs-panel p + p {
	margin-top: 16px; /* space-y-4 dans la description libre */
}

#spd-product-page .spd-tab-stack > * + * {
	margin-top: 16px; /* React space-y-4 */
}

#spd-product-page .spd-tab-stack--tight > * + * {
	margin-top: 12px; /* React space-y-3 (livraison) */
}

/* Titre interne — React: h4 font-bold text-slate-900 (hérite
   text-sm du panneau). */
#spd-product-page .spd-tab-heading {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.625;
	color: #0F172A;
}

/* Liste ingrédients — React: ul.list-disc pl-5 space-y-1. */
#spd-product-page .spd-tab-list {
	list-style: disc;
	margin: 0;
	padding: 0 0 0 20px; /* pl-5 */
}

#spd-product-page .spd-tab-list li {
	margin: 0;
	padding: 0;
}

#spd-product-page .spd-tab-list li + li {
	margin-top: 4px; /* React space-y-1 */
}

/* Bloc origine — React: div.pt-2 + span.font-bold.slate-900.block
   puis valeur inline. */
#spd-product-page .spd-tab-origin {
	padding-top: 8px; /* React pt-2 (en plus du gap space-y-4) */
}

#spd-product-page .spd-tab-origin__label {
	display: block;
	font-weight: 700;
	color: #0F172A;
}

/* Encart « Le conseil culinaire SPD » — React: bg-slate-50 p-4
   rounded-xl border-slate-200 flex items-start gap-3 ; icône
   Sparkles 18px text-[#EAA21D] shrink-0 mt-0.5 ; texte
   text-xs text-slate-700. */
#spd-product-page .spd-tab-tip {
	display: flex;
	align-items: flex-start;
	gap: 12px; /* React gap-3 */
	padding: 16px; /* React p-4 */
	background-color: #F8FAFC;
	border: 1px solid #E2E8F0;
	border-radius: 12px; /* rounded-xl */
}

#spd-product-page .spd-tab-tip__icon {
	display: inline-flex;
	flex-shrink: 0;
	margin-top: 2px; /* React mt-0.5 */
	color: #EAA21D;
}

#spd-product-page .spd-tab-tip__icon .spd-icon {
	width: 18px;
	height: 18px;
	display: block;
}

#spd-product-page .spd-tab-tip__text {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: #334155; /* slate-700 */
}

#spd-product-page .spd-tab-tip__text strong {
	font-weight: 700;
	color: inherit;
}

/* Grille nutrition — React: grid grid-cols-2 sm:grid-cols-4
   gap-3 max-w-lg (512px). Carte : p-3 bg-slate-50 rounded-xl
   border-slate-200 text-center. */
#spd-product-page .spd-nutrition-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px; /* React gap-3 */
	max-width: 512px;
}

@media (min-width: 640px) {
	#spd-product-page .spd-nutrition-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

#spd-product-page .spd-nutrition-card {
	padding: 12px; /* React p-3 */
	background-color: #F8FAFC;
	border: 1px solid #E2E8F0;
	border-radius: 12px;
	text-align: center;
}

/* Libellé — React: text-[11px] uppercase font-bold slate-400
   block (capitalize est surchargé par uppercase). */
#spd-product-page .spd-nutrition-card__label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	text-transform: uppercase;
	color: #94A3B8;
}

/* Valeur — React: text-sm font-extrabold text-slate-900. */
#spd-product-page .spd-nutrition-card__value {
	display: block;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.5;
	color: #0F172A;
}

/* Lignes livraison — React: <p><strong>Libellé :</strong> texte
   (strong hérite slate-600, juste en gras). */
#spd-product-page .spd-tab-line {
	margin: 0;
}

#spd-product-page .spd-tab-line strong {
	font-weight: 700;
	color: inherit;
}

/* ============================================================
   10. Onglet Avis (Phase 5G) — reviews WooCommerce natifs

   Moteur 100 % natif (wp_comments + meta rating + comment_form) ;
   cette section n'est que la couche visuelle SPD du panneau
   #tab-reviews :

     #reviews.woocommerce-Reviews
     ├── #comments
     │   ├── h2.woocommerce-Reviews-title (« n avis pour … » / « Avis »)
     │   ├── ol.commentlist
     │   │   └── li > .comment_container (flex : avatar + .comment-text)
     │   │       └── .comment-text : étoiles SPD (note réelle de l'avis,
     │   │           template review-rating.php) → p.meta (auteur,
     │   │           badge « vérifié », date) → .description
     │   ├── nav.woocommerce-pagination (avis paginés natifs)
     │   └── p.woocommerce-noreviews (état vide)
     ├── #review_form_wrapper > #review_form > #respond
     │   └── #commentform : notes → nom/email (2 col. ≥640px) →
     │       note p.stars (widget natif restylé) → textarea →
     │       consentement cookies → submit
     └── p.woocommerce-verification-required (restriction native)
   ============================================================ */

/* ── 10.1 Titre + liste ──────────────────────────────────────
   Titre interne : font-bold slate-900 16px (cohérent .spd-tab-heading
   qui reste à 14px — l'avis est une sous-section).

   SPÉCIFICITÉ — la feuille de compatibilité Astra
   (woocommerce.min.css) cible les avis via
   « .woocommerce-js #reviews #comments ol.commentlist li … »
   (2 IDs + classes). Tous les sélecteurs de liste ci-dessous
   utilisent « #spd-product-page #reviews #comments … » (3 IDs)
   et ceux du formulaire « … #review_form #respond … » (4 IDs)
   pour rester prioritaires sans !important. */

#spd-product-page #reviews #comments .woocommerce-Reviews-title {
	display: block; /* Astra : display:none sur le titre natif */
	margin: 0 0 4px;
	padding: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	color: #0F172A;
	border: none;
}

#spd-product-page #reviews #comments .woocommerce-Reviews-title span {
	font-weight: 600;
	color: #334155;
}

/* Liste — neutralisation des styles natifs WC/Astra
   (border-bottom par li + marge 2em, clearfix, zoom). */
#spd-product-page #reviews #comments ol.commentlist {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	background: none;
}

#spd-product-page #reviews #comments ol.commentlist::before,
#spd-product-page #reviews #comments ol.commentlist::after {
	display: none; /* clearfix natif */
}

#spd-product-page #reviews #comments ol.commentlist > li {
	position: static;
	margin: 0;
	padding: 20px 0;
	background: none;
	border: none; /* supprime le border-bottom Astra */
}

#spd-product-page #reviews #comments ol.commentlist > li + li {
	border-top: 1px solid #E2E8F0;
}

#spd-product-page #reviews #comments ol.commentlist > li::before,
#spd-product-page #reviews #comments ol.commentlist > li::after {
	display: none; /* coins/bullets natifs */
}

/* Réponses imbriquées (réponses admin aux avis) : indentation
   sobre sous l'avis parent. */
#spd-product-page #reviews #comments ol.commentlist ul.children {
	list-style: none;
	margin: 12px 0 0 56px;
	padding: 0;
}

/* Ligne d'avis : avatar à gauche, contenu à droite. */
#spd-product-page #reviews #comments ol.commentlist li .comment_container {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
}

/* Astra : avatar absolue 3.6em + padding — neutralisé. */
#spd-product-page #reviews #comments ol.commentlist li .comment_container img.avatar {
	float: none;
	position: static;
	top: auto;
	left: auto;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid #E2E8F0;
	border-radius: 50%;
	background: none;
	box-shadow: none;
	object-fit: cover;
	flex-shrink: 0;
}

/* Astra : .comment-text en flex-wrap avec ordres explicites +
   marge-left 50px — retour au flux block normal. */
#spd-product-page #reviews #comments ol.commentlist li .comment-text {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	float: none;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

#spd-product-page #reviews #comments ol.commentlist li .comment-text::before,
#spd-product-page #reviews #comments ol.commentlist li .comment-text::after {
	display: none; /* clearfix Astra */
}

/* ── 10.2 Étoiles par avis (note réelle du commentaire) ──────
   Même set lucide Star que le rating du Product Info, taille sm
   (14px — React Rating size="sm"). */
#spd-product-page #reviews #comments .spd-rating__stars {
	display: inline-flex;
	align-items: center;
	color: #EAA21D;
}

#spd-product-page #reviews #comments .spd-rating__star {
	display: inline-flex;
}

#spd-product-page #reviews #comments .spd-rating__star .spd-icon {
	width: 14px;
	height: 14px;
	display: block;
}

#spd-product-page #reviews #comments .spd-rating__star:not(.is-filled) {
	color: #CBD5E1; /* text-slate-300, étoile vide */
}

/* Fallback natif (wc_get_rating_html) si la lib d'icônes SPD est
   indisponible — remise à zéro de la marge Astra. */
#spd-product-page #reviews #comments .comment-text .star-rating {
	margin: 0 0 4px;
}

/* ── 10.3 Méta : auteur → badge vérifié → date → texte ───────
   rating → auteur : 6px ; date : même ligne ; texte : +8px.
   Astra impose p.meta en font-size 1.2em et p génériques à
   margin-bottom 1.7em — rétablis aux valeurs SPD. */
#spd-product-page #reviews #comments ol.commentlist li .comment-text p {
	margin: 0;
}

#spd-product-page #reviews #comments ol.commentlist li .comment-text p.meta {
	margin: 6px 0 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	color: #64748B;
}

#spd-product-page #reviews #comments ol.commentlist li .comment-text p.meta .woocommerce-review__author {
	font-size: 14px;
	font-weight: 700;
	color: #0F172A;
}

#spd-product-page #reviews #comments ol.commentlist li .comment-text p.meta .woocommerce-review__verified {
	font-style: normal;
	font-weight: 600;
	color: #059669; /* emerald-600 */
}

/* Astra masque le tiret séparateur natif — restauré, en slate-300. */
#spd-product-page #reviews #comments ol.commentlist li .comment-text p.meta .woocommerce-review__dash {
	display: inline;
	color: #CBD5E1;
}

#spd-product-page #reviews #comments ol.commentlist li .comment-text p.meta .woocommerce-review__published-date {
	padding-left: 0;
	font-size: 12px;
	color: #94A3B8;
}

#spd-product-page #reviews #comments ol.commentlist li .comment-text p.meta .woocommerce-review__awaiting-approval {
	font-style: normal;
	font-weight: 600;
	color: #D97706; /* amber-600 */
}

#spd-product-page #reviews #comments ol.commentlist li .comment-text .description {
	margin: 8px 0 0;
	padding: 0;
	font-style: normal;
	color: #475569;
}

#spd-product-page #reviews #comments ol.commentlist li .comment-text .description p + p {
	margin-top: 12px;
}

/* ── 10.4 États ──────────────────────────────────────────────
   Aucun avis : encart discret (slate-50, bordure en pointillés) —
   cohérent avec les états vides du shop. Aucun avis/compteur inventé. */
#spd-product-page #reviews #comments .woocommerce-noreviews {
	margin: 12px 0 0;
	padding: 24px;
	background-color: #F8FAFC;
	border: 1px dashed #CBD5E1;
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.5;
	color: #64748B;
	text-align: center;
}

/* Restriction native (acheteurs vérifiés requis / connexion) :
   encart info bleu — reste visible, jamais masqué. */
#spd-product-page #reviews .woocommerce-verification-required,
#spd-product-page #reviews .must-log-in {
	margin: 0;
	padding: 16px;
	background-color: #EBF3F9;
	border: 1px solid #D7E7F3;
	border-radius: 12px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	color: #0F5B94;
}

#spd-product-page #reviews .must-log-in a {
	color: #0F5B94;
	font-weight: 700;
	text-decoration: underline;
}

/* ── 10.5 Pagination des avis (native, comments pages) ─────── */
#spd-product-page #reviews nav.woocommerce-pagination {
	margin-top: 16px;
	border: none;
}

#spd-product-page #reviews nav.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: none;
	list-style: none;
}

#spd-product-page #reviews nav.woocommerce-pagination ul li {
	margin: 0;
	padding: 0;
	border: none;
	float: none;
}

#spd-product-page #reviews nav.woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid #E2E8F0;
	border-radius: 8px;
	background-color: #FFFFFF;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: #334155;
	text-decoration: none;
	transition: border-color 150ms ease, color 150ms ease,
	            background-color 150ms ease;
}

#spd-product-page #reviews nav.woocommerce-pagination a.page-numbers:hover {
	border-color: #0F5B94;
	color: #0F5B94;
}

#spd-product-page #reviews nav.woocommerce-pagination .page-numbers.current {
	border-color: #0F5B94;
	background-color: #0F5B94;
	color: #FFFFFF;
}

#spd-product-page #reviews nav.woocommerce-pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
	color: #94A3B8;
}

/* ── 10.6 Formulaire d'avis ──────────────────────────────────
   Séparé de la liste par un filet + 24px (rythme pt-6 du panneau).
   Le markup reste le comment_form natif — seul le style change.
   Astra ajoute un cadre bordé sur #review_form, passe
   .comment-form-rating en flex label↔étoiles et met les champs
   nom/email en float:49% ≥1201px — tout est neutralisé ici. */
#spd-product-page #reviews #review_form_wrapper {
	width: auto;
	margin-top: 24px;
	padding: 24px 0 0;
	border-top: 1px solid #E2E8F0;
}

#spd-product-page #reviews #review_form {
	border: none; /* cadre Astra supprimé */
	padding: 0;
}

#spd-product-page #reviews #review_form #respond {
	position: static;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
}

#spd-product-page #reviews #review_form #respond::before,
#spd-product-page #reviews #review_form #respond::after {
	display: none; /* clearfix Astra */
}

#spd-product-page #reviews #review_form .comment-reply-title {
	display: block;
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	color: #0F172A;
}

/* Lien « Annuler la réponse » natif (visible lors d'une réponse). */
#spd-product-page #reviews #review_form .comment-reply-title small {
	float: none;
	margin: 0 0 0 8px;
	font-size: 12px;
	font-weight: 400;
}

#spd-product-page #reviews #review_form .comment-reply-title small a {
	color: #64748B;
	text-decoration: underline;
}

/* Grille : 1 colonne mobile, nom/email côte à côte ≥640px. */
#spd-product-page #reviews #review_form #respond #commentform {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin-top: 16px;
}

#spd-product-page #reviews #review_form #respond #commentform > * {
	margin: 0;
	padding: 0;
	border: none;
}

/* Astra : float:left/right + width:49% sur nom/email ≥1201px —
   neutralisés, la grille pilote la mise en page. */
#spd-product-page #reviews #review_form #respond #commentform .comment-form-author,
#spd-product-page #reviews #review_form #respond #commentform .comment-form-email {
	float: none;
	display: block;
	width: auto;
}

@media (min-width: 640px) {
	#spd-product-page #reviews #review_form #respond #commentform {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	#spd-product-page #reviews #review_form #respond #commentform .comment-form-author {
		grid-column: 1;
	}

	#spd-product-page #reviews #review_form #respond #commentform .comment-form-email {
		grid-column: 2;
	}
}

#spd-product-page #reviews #review_form #respond #commentform .comment-notes,
#spd-product-page #reviews #review_form #respond #commentform .logged-in-as,
#spd-product-page #reviews #review_form #respond #commentform .comment-form-rating,
#spd-product-page #reviews #review_form #respond #commentform .comment-form-comment,
#spd-product-page #reviews #review_form #respond #commentform .comment-form-cookies-consent,
#spd-product-page #reviews #review_form #respond #commentform .form-submit {
	grid-column: 1 / -1;
}

#spd-product-page #reviews #review_form #respond #commentform .comment-notes,
#spd-product-page #reviews #review_form #respond #commentform .logged-in-as {
	font-size: 12px;
	line-height: 1.5;
	color: #64748B;
}

/* Bloc « Votre note » : Astra le passe en flex (label à gauche du
   widget) — retour au block, label au-dessus des étoiles. */
#spd-product-page #reviews #commentform .comment-form-rating {
	display: block;
	margin: 0;
}

#spd-product-page #reviews #review_form #respond #commentform label {
	display: block;
	margin: 0 0 6px;
	padding-right: 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	color: #334155;
}

#spd-product-page #reviews #review_form #respond #commentform .required {
	color: #EF4444;
	font-weight: 600;
}

/* Champs — cohérents avec les formulaires du site (checkout) :
   border #E2E8F0, radius 8px, padding 10×14, focus bleu + anneau. */
#spd-product-page #reviews #review_form #respond #commentform input[type="text"],
#spd-product-page #reviews #review_form #respond #commentform input[type="email"],
#spd-product-page #reviews #review_form #respond #commentform input[type="url"],
#spd-product-page #reviews #review_form #respond #commentform select,
#spd-product-page #reviews #review_form #respond #commentform textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 10px 14px;
	border: 1px solid #E2E8F0;
	border-radius: 8px;
	background-color: #FFFFFF;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.5;
	color: #0F172A;
	box-shadow: none;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

#spd-product-page #reviews #review_form #respond #commentform input[type="text"]:focus,
#spd-product-page #reviews #review_form #respond #commentform input[type="email"]:focus,
#spd-product-page #reviews #review_form #respond #commentform input[type="url"]:focus,
#spd-product-page #reviews #review_form #respond #commentform select:focus,
#spd-product-page #reviews #review_form #respond #commentform textarea:focus {
	border-color: #0F5B94;
	box-shadow: 0 0 0 3px rgba(15, 91, 148, 0.12);
	outline: none;
}

#spd-product-page #reviews #review_form #respond #commentform textarea {
	height: auto; /* Astra : height:90px — min-height pilote */
	min-height: 128px;
	resize: vertical;
}

/* Le <select>#rating reste stylé en fallback sans JS — avec JS le
   widget p.stars natif le remplace visuellement (select masqué par
   single-product.js, valeur pilotée par les ancres étoiles). */
#spd-product-page #reviews #review_form #respond #commentform select#rating {
	max-width: 320px;
	cursor: pointer;
}

/* Consentement cookies natif — checkbox + label inline. */
#spd-product-page #reviews #review_form #respond #commentform .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	clear: none;
}

#spd-product-page #reviews #review_form #respond #commentform .comment-form-cookies-consent input {
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	accent-color: #0F5B94;
	flex-shrink: 0;
}

#spd-product-page #reviews #review_form #respond #commentform .comment-form-cookies-consent label {
	display: inline;
	margin: 0;
	font-weight: 400;
	color: #64748B;
}

/* Bouton « Soumettre » — même langage que le CTA produit :
   bleu #0F5B94, radius 12px, bold 14px, shadow-md. */
#spd-product-page #reviews #review_form #respond #commentform .form-submit {
	margin: 0;
}

#spd-product-page #reviews #review_form #respond #commentform .form-submit .submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	margin: 0;
	border: none;
	border-radius: 12px;
	background-color: #0F5B94;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	cursor: pointer;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
	            0 2px 4px -2px rgba(0, 0, 0, 0.1);
	transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
	            transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
}

#spd-product-page #reviews #review_form #respond #commentform .form-submit .submit:hover {
	background-color: #0A436D;
	color: #FFFFFF;
}

#spd-product-page #reviews #review_form #respond #commentform .form-submit .submit:active {
	transform: scale(0.98);
}

#spd-product-page #reviews #review_form #respond #commentform .form-submit .submit:focus-visible {
	outline: 2px solid #0F5B94;
	outline-offset: 2px;
}

/* ── 10.7 Widget note « p.stars » (natif WC, restylé) ────────
   single-product.js injecte p.stars > span[role=group] > 5 ancres
   a.star-N[role=radio] (texte accessible conservé, masqué via
   text-indent) et pilote .active/.selected + aria-checked —
   mécanique native intacte, icône = même silhouette lucide Star
   qu'ailleurs (mask + couleur de fond). */
#spd-product-page #reviews p.stars {
	margin: 0;
	clear: none;
}

#spd-product-page #reviews p.stars > span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

#spd-product-page #reviews p.stars a {
	position: relative;
	top: auto; /* Astra : top:8px dans .comment-form-rating */
	display: inline-block;
	width: 24px;
	height: 24px;
	overflow: hidden;
	text-indent: -999em;
	font-size: 0;
	line-height: 0;
	text-decoration: none;
	border-radius: 4px;
}

#spd-product-page #reviews p.stars a::before {
	content: '';
	position: absolute;
	inset: 0;
	width: 24px; /* WC natif : 1em — orphelin à 0 car font-size:0 sur a */
	height: 24px;
	background-color: #CBD5E1; /* slate-300 — non sélectionné */
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2' fill='black'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2' fill='black'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: background-color 120ms ease, transform 120ms ease;
}

/* Survol : remplissage gold jusqu'à l'étoile survolée. */
#spd-product-page #reviews p.stars:hover a::before {
	background-color: #EAA21D;
}

#spd-product-page #reviews p.stars a:hover ~ a::before,
#spd-product-page #reviews p.stars a:focus-visible ~ a::before {
	background-color: #CBD5E1;
}

/* Sélection native (.selected + a.active) : gold jusqu'à l'active. */
#spd-product-page #reviews p.stars.selected a::before {
	background-color: #EAA21D;
}

#spd-product-page #reviews p.stars.selected a.active ~ a::before {
	background-color: #CBD5E1;
}

/* Le survol prime toujours sur l'état sélectionné. */
#spd-product-page #reviews p.stars:hover a:hover ~ a::before,
#spd-product-page #reviews p.stars:hover a:focus-visible ~ a::before {
	background-color: #CBD5E1;
}

#spd-product-page #reviews p.stars a:focus-visible {
	outline: 2px solid #0F5B94;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	#spd-product-page #reviews p.stars a::before,
	#spd-product-page #reviews #commentform .form-submit .submit,
	#spd-product-page #reviews nav.woocommerce-pagination .page-numbers,
	#spd-product-page #reviews #commentform input[type="text"],
	#spd-product-page #reviews #commentform input[type="email"],
	#spd-product-page #reviews #commentform input[type="url"],
	#spd-product-page #reviews #commentform select,
	#spd-product-page #reviews #commentform textarea {
		transition: none;
	}
}

/* ── 10.8 Petit mobile ─────────────────────────────────────── */
@media (max-width: 479px) {
	#spd-product-page #reviews #comments ol.commentlist li .comment_container img.avatar {
		width: 40px;
		height: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#spd-product-page .woocommerce-tabs ul.tabs li a {
		transition: none;
	}
}

/* ============================================================
   11. Produits associés / Up-sells (Phase 5H.1)
   ============================================================
   React ProductDetailPage.tsx :
     <div>
       <h2 class="text-xl sm:text-2xl font-extrabold text-slate-900
                  tracking-tight mb-6">
         Produits associés de la même gamme
       </h2>
       <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4
                   gap-4 sm:gap-6">
         {relatedProducts.map(rel => <ProductCard …/>)}
       </div>
     </div>

   La card elle-même est le composant CANONIQUE — styles partagés dans
   spd-product-card.css (scope .spd-product-cards, porté par les
   sections .spd-related / .spd-upsells). Ici : uniquement le titre de
   section + la grille + l'espacement. AUCUN sélecteur de card spécifique
   Related (Shop = Related = même composant).
   ============================================================ */

/* ── Pile des sections (up-sells puis related) — rythme space-y-10 ── */
.spd-product__related {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* ── Titre de section — React h2 ──
   #spd-product-page (1-1-0) bat .woocommerce .related.products h2
   (0-2-1) d'Astra/WooCommerce, sans !important. */
#spd-product-page .spd-related__title,
#spd-product-page .spd-upsells__title {
	font-size: 20px;                    /* React text-xl */
	font-weight: var(--spd-font-weight-extrabold); /* font-extrabold (800) */
	color: #0F172A;                     /* React text-slate-900 */
	letter-spacing: var(--spd-tracking-tight);
	line-height: 1.3;
	margin: 0 0 24px;                   /* React mb-6 */
	padding: 0;
}

@media (min-width: 640px) {
	#spd-product-page .spd-related__title,
	#spd-product-page .spd-upsells__title {
		font-size: 24px;                /* React sm:text-2xl */
	}
}

/* ── Grille — React grid-cols-1 sm:grid-cols-2 md:grid-cols-4
   gap-4 sm:gap-6. minmax(0,1fr) : les tracks peuvent rétrécir sous le
   contenu intrinsèque de la card (pas d'overflow horizontal). */
.spd-related__grid,
.spd-upsells__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;                          /* React gap-4 */
	align-items: stretch;               /* cards à hauteur égale */
	min-width: 0;
}

@media (min-width: 640px) {
	.spd-related__grid,
	.spd-upsells__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)); /* sm:grid-cols-2 */
		gap: 24px;                                       /* sm:gap-6 */
	}
}

@media (min-width: 768px) {
	.spd-related__grid,
	.spd-upsells__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr)); /* md:grid-cols-4 */
	}
}

/* ── Neutralisation des restes natifs sur les sections ──
   Les sélecteurs ul.products / li.product de WC+Astra sont morts (plus
   de ul.products dans le markup), mais WC ajoute clear:both et des
   marges aux sections .products — on remet à zéro pour garder le
   rythme vertical React. */
#spd-product-page .related.products,
#spd-product-page .up-sells.products {
	clear: none;
	margin: 0;
	padding: 0;
}

/* ============================================================
   12. Panneau d'achat sticky mobile (Phase 5I)
   ============================================================
   React ProductDetailPage.tsx lignes 408–431 :

     <div className="lg:hidden fixed bottom-14 left-0 right-0 z-30
       bg-white border-t border-slate-200 p-3 shadow-xl flex
       items-center justify-between gap-3">
       <div> "Total" text-[11px] slate-400 + Price size="md" </div>
       <div className="flex items-center gap-2">
         <QuantitySelector size="sm" /> + bouton "Ajouter"
       </div>
     </div>

   Position : au-dessus de la mobile nav (.spd-mobile-nav, fixed
   bottom:0). Le React utilise bottom-14 (56px) — la nav WP mesure
   ~64px+safe-area, donc l'offset réel est exposé par le JS sous
   --spd-mobile-nav-height (mesuré, resize compris) ; 64px en
   repli. Le panneau ne chevauche jamais la nav : aucun clipping,
   aucun débordement.

   z-index : React z-30 < nav z-50 — le panneau reste au-dessus du
   contenu mais SOUS la nav et les overlays du shell (dropdowns,
   drawer panier, modale recherche, toasts).

   Rendu `hidden` jusqu'à ce que spd-single-product.js l'ait câblé
   (enhancement progressif — sans JS la barre ne masquerait que du
   contenu).
   ============================================================ */
#spd-product-page .spd-sticky-panel {
	position: fixed;
	left: 0;
	right: 0;
	bottom: var(--spd-mobile-nav-height, 64px);
	z-index: calc(var(--spd-z-sticky) - 10); /* 1010 — sous la nav (1020) */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px; /* React gap-3 */
	padding: 12px; /* React p-3 */
	background-color: #FFFFFF;
	border-top: 1px solid #E2E8F0;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
	            0 8px 10px -6px rgba(0, 0, 0, 0.1); /* Tailwind shadow-xl */
}

/* display:flex ci-dessus écraserait la règle UA [hidden] — masquage
   rétabli tant que le JS n'a pas retiré l'attribut. */
#spd-product-page .spd-sticky-panel[hidden] {
	display: none;
}

/* React lg:hidden — masqué à partir de 1024px (la nav mobile disparaît
   au même breakpoint ; le contenu reprend alors pb-16 desktop). */
@media (min-width: 1024px) {
	#spd-product-page .spd-sticky-panel {
		display: none;
	}
}

/* ── 12.1 Total ──────────────────────────────────────────────
   Réutilise les styles .spd-product__total* de la zone d'achat (8.2 —
   même bloc Total/Price-md que le React) ; seules la marge auto et
   l'alignement droit de la version inline sont annulés. */
#spd-product-page .spd-sticky-panel .spd-product__total {
	margin-left: 0;
	text-align: left;
	min-width: 0;
	flex-shrink: 1;
}

/* ── 12.2 Groupe de contrôles — React: flex items-center gap-2 ── */
#spd-product-page .spd-sticky-panel__controls {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

/* ── 12.3 QuantitySelector size="sm" ─────────────────────────
   Même coquille que .quantity (8.2) avec les dimensions sm du React :
   boutons w-7 h-7 (28px), valeur w-8 text-xs (32px/12px), icônes 13px. */
#spd-product-page .spd-sticky-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid #E2E8F0;
	border-radius: 12px;
	background-color: #FFFFFF;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-xs */
	overflow: hidden;
	user-select: none;
	flex-shrink: 0;
}

#spd-product-page .spd-sticky-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px; /* React w-7 */
	height: 28px;
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 0;
	background: none;
	color: #475569; /* slate-600 */
	cursor: pointer;
	transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1),
	            background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

#spd-product-page .spd-sticky-qty__btn:hover {
	background-color: #F1F5F9; /* slate-100 */
	color: #0F172A; /* slate-900 */
}

#spd-product-page .spd-sticky-qty__btn:active {
	background-color: #E2E8F0; /* slate-200 */
}

#spd-product-page .spd-sticky-qty__btn:disabled {
	opacity: 0.4;
	pointer-events: none;
}

#spd-product-page .spd-sticky-qty__btn:focus-visible {
	outline: 2px solid #0F5B94;
	outline-offset: -2px;
}

#spd-product-page .spd-sticky-qty__btn .spd-icon {
	width: 13px; /* React sm : Minus/Plus size={13} */
	height: 13px;
	display: block;
}

#spd-product-page .spd-sticky-qty__value {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px; /* React w-8 */
	font-size: 12px; /* React text-xs */
	font-weight: 700;
	line-height: 1.5;
	color: #0F172A;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* ── 12.4 Bouton "Ajouter" ───────────────────────────────────
   React: py-2.5 px-4 bg-[#0F5B94] text-white font-bold text-xs
   rounded-xl shadow-xs flex items-center gap-1.5 + ShoppingBag 14. */
#spd-product-page .spd-sticky-panel__add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px; /* React gap-1.5 */
	padding: 10px 16px; /* py-2.5 px-4 */
	margin: 0;
	border: none;
	border-radius: 12px;
	background-color: #0F5B94;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	cursor: pointer;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-xs */
	white-space: nowrap;
	transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
	            transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
}

#spd-product-page .spd-sticky-panel__add .spd-icon {
	width: 14px;
	height: 14px;
	display: block;
}

#spd-product-page .spd-sticky-panel__add:hover {
	background-color: #0A436D; /* même hover que le CTA principal */
}

#spd-product-page .spd-sticky-panel__add:active {
	transform: scale(0.98);
}

#spd-product-page .spd-sticky-panel__add:focus-visible {
	outline: 2px solid #0F5B94;
	outline-offset: 2px;
}

/* État désactivé — miroir du CTA principal : .is-disabled suit la
   classe .disabled WC (variation requise/indisponible — le clic reste
   possible et déclenche l'alerte native) ; :disabled = hors stock,
   vraiment inerte. */
#spd-product-page .spd-sticky-panel__add.is-disabled,
#spd-product-page .spd-sticky-panel__add:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

#spd-product-page .spd-sticky-panel__add.is-disabled:active,
#spd-product-page .spd-sticky-panel__add:disabled:active {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	#spd-product-page .spd-sticky-qty__btn,
	#spd-product-page .spd-sticky-panel__add {
		transition: none;
	}

	#spd-product-page .spd-sticky-panel__add:active {
		transform: none;
	}
}