/**
 * Single product page — compact, responsive, native WooCommerce UI.
 * Phase 7B — PDP Premium Redesign (voir PLAN.md).
 */

.product-page { padding-block: var(--space-8); }
.product-detail__hero { display: grid; gap: var(--space-8); align-items: start; }
.product-detail__gallery,
.product-detail__summary,
.product-specifications,
.product-service { min-width: 0; }

/* Phase 16G — cadre visuel équivalent à celui de la colonne d'achat
   (.product-detail__summary, @media min-width:768px plus bas) mais SANS
   bordure colorée en haut ni box-shadow : la colonne d'achat doit rester
   le point focal visuel de la fiche produit. */
.product-detail__gallery {
	padding: var(--space-4);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}

.product-detail__gallery .woocommerce-product-gallery { width: 100%; float: none; position: relative; }
.product-detail__gallery .woocommerce-product-gallery__wrapper { margin: 0; padding: 0; }
.product-detail__gallery .flex-viewport { overflow: hidden; }
/*
 * Fallback fonctionnel WooCommerce natif (repris de woocommerce.scss,
 * section .woocommerce-product-gallery, ~ligne 183) : dispose les images
 * de la galerie en grille 25% avant/pendant l'initialisation JS de
 * FlexSlider. La CSS frontend WooCommerce native est désactivée
 * (woocommerce_enqueue_styles => __return_empty_array, voir
 * inc/woocommerce.php), donc cette règle doit être maintenue ici : sans
 * elle, tant que FlexSlider n'a pas pris le contrôle du layout (JS lent,
 * bloqué, ou script en erreur), les 2..n images de la galerie s'empilent
 * en pleine largeur au lieu de rester en slides.
 */
.product-detail__gallery .woocommerce-product-gallery__image:nth-child(n + 2) {
	width: 25%;
	display: inline-block;
}
.product-detail__gallery .flex-control-thumbs {
	display: flex;
	gap: var(--space-2);
	max-width: 100%;
	/* Phase 16G : var(--space-4) au lieu de var(--space-3) — respire
	   davantage à l'intérieur du nouveau cadre padded de la galerie
	   (.product-detail__gallery) plutôt que de coller visuellement à
	   l'image principale. */
	margin: var(--space-4) 0 0;
	padding: 0 0 var(--space-2);
	overflow-x: auto;
	overflow-y: hidden;
	list-style: none;
	scrollbar-gutter: stable;
	scroll-snap-type: x proximity;
}
.product-detail__gallery .flex-control-thumbs li {
	flex: 0 0 clamp(4rem, 18%, 6rem);
	width: auto !important;
	margin: 0;
	float: none !important;
	list-style: none;
	scroll-snap-align: start;
}
.product-detail__gallery .flex-control-thumbs img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	cursor: pointer;
	opacity: 0.65;
}
.product-detail__gallery .flex-control-thumbs img:hover,
.product-detail__gallery .flex-control-thumbs img:focus-visible,
.product-detail__gallery .flex-control-thumbs .flex-active {
	opacity: 1;
}
.product-detail__gallery .flex-control-thumbs img:focus-visible {
	outline: 3px solid var(--color-focus-ring);
	outline-offset: 2px;
}
.product-detail__gallery .flex-control-thumbs img[aria-current="true"] {
	opacity: 1;
	box-shadow: 0 0 0 2px var(--color-primary);
}
.product-detail__gallery img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }

/* Anneau de focus clavier de l'image principale (Phase 16C QA) : FlexSlider
   (WooCommerce core JS) pose overflow:hidden en style inline sur
   .woocommerce-product-gallery__image, ce qui découpe net tout outline avec
   offset positif — un utilisateur clavier tabulant jusqu'à l'image n'avait
   alors aucun indicateur de focus visible (violation WCAG 2.4.7). box-shadow
   inset n'est pas affecté par le clip du parent. */
.product-detail__gallery .woocommerce-product-gallery__image a:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 3px var(--color-focus-ring);
	border-radius: var(--radius-lg);
}

/* Déclencheur de zoom (icône loupe) — overlay coin haut-droit de l'image.
   Positionnement CSS uniquement : le trigger est injecté par WooCommerce
   core (assets/js/frontend/single-product.js, ProductGallery.initPhotoswipe)
   en tout premier enfant de .woocommerce-product-gallery (le $target passé
   à wc_product_gallery()), jamais dans .woocommerce-product-gallery__wrapper.
   Aucun JS/FlexSlider/PhotoSwipe modifié ici. */
.product-detail__gallery .woocommerce-product-gallery__trigger {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background-color: var(--color-surface);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-sm);
	color: var(--color-text);
	text-decoration: none;
	line-height: 1;
}
.product-detail__gallery .woocommerce-product-gallery__trigger:hover,
.product-detail__gallery .woocommerce-product-gallery__trigger:focus-visible {
	background-color: var(--color-bg-alt);
}

/* PhotoSwipe repose sur un fond quasi-noir : l'anneau global bleu n'y
   atteint pas 3:1. Ce contexte sombre utilise le token blanc existant. */
.pswp button:focus-visible,
.pswp a:focus-visible,
.pswp [tabindex]:focus-visible {
	outline: 3px solid var(--color-text-inverse);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Colonne d'achat (résumé produit)
   -------------------------------------------------------------------------- */

.product-detail__summary > * { margin-block-start: 0; }
.product-detail__summary > * + * { margin-block-start: var(--space-4); }

.product-detail__brand {
	margin: 0;
	font-size: var(--text-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.product-detail__brand + .product_title {
	margin-block-start: var(--space-1);
}

/* Resserre le cluster identité-produit (titre → prix), Phase 16D : le
   space-4 générique hérité de `.product-detail__summary > * + *` était
   trop lâche entre le nouveau H1 (plus discret) et le prix. */
.product_title + .price {
	margin-block-start: var(--space-3);
}

/* Phase 16D (audit conversion-expert) : le H1 produit était visuellement
   plus imposant que nécessaire (jusqu'à 34px), au point de rivaliser avec
   le prix et de pousser les titres longs sur 4 lignes / ~150px de haut.
   Nouvelle formule plus sobre, plafonnée à 24px — vérifiée en direct via
   getComputedStyle() sur plusieurs breakpoints (voir rapport). */
.product-detail__summary .product_title {
	font-size: clamp(1.125rem, 1.05rem + 0.45vw, 1.5rem);
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: -0.005em;
	max-width: 42ch;
}
.product-detail__summary .price { color: var(--color-primary-dark); font-size: clamp(1.5rem, 3vw, 2.15rem); font-weight: 700; }
.product-detail__summary .stock { font-weight: 600; }
.product-detail__summary .cart { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: stretch; }

/* Champ quantité — style .form-control du design system (bug P0 : aucun
   style natif n'était appliqué, bordure/inset par défaut du navigateur). */
.product-detail__summary .quantity .qty {
	display: block;
	width: 5.5rem;
	min-height: 48px;
	padding: var(--space-3) var(--space-4);
	font-family: inherit;
	font-size: var(--text-base);
	color: var(--color-text);
	background-color: var(--color-surface);
	border: var(--border-width) solid var(--color-border-strong);
	border-radius: var(--radius-md);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.product-detail__summary .quantity .qty:hover {
	border-color: var(--color-secondary-light);
}
.product-detail__summary .quantity .qty:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-tint);
}

/* CTA "In den Warenkorb" — accent achat Phase 16 (bug P0 historique le
   plus grave : le sélecteur natif WooCommerce .single_add_to_cart_button
   n'était jamais couvert par les classes .btn ajoutées uniquement dans les
   boucles produit, voir kagerer_loop_add_to_cart_classes() dans
   inc/woocommerce.php — d'où le style navigateur brut observé). */
.product-detail__summary .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 48px;
	padding: var(--space-3) var(--space-6);
	background-color: var(--color-accent);
	color: var(--color-secondary-dark);
	border: var(--border-width) solid var(--color-accent);
	border-radius: var(--radius-md);
	font-family: inherit;
	font-size: var(--text-base);
	font-weight: var(--font-weight-semibold);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.product-detail__summary .single_add_to_cart_button:hover:not(:disabled) {
	background-color: var(--color-accent-dark);
	border-color: var(--color-accent-dark);
	color: var(--color-text-inverse);
}
.product-detail__summary .single_add_to_cart_button:disabled,
.product-detail__summary .single_add_to_cart_button.disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.product-detail__summary .product_meta { font-size: var(--text-sm); }
.product-detail__meta { margin-top:var(--space-6); padding-top:var(--space-4); border-top:1px solid var(--color-border); color:var(--color-text-muted); font-size:var(--text-sm); }

/* Réassurance d'achat (livraison/paiement/retour) — 3 lignes factuelles
   identiques mot pour mot à template-parts/home/advantages.php. */
.product-purchase-reassurance {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}
.product-purchase-reassurance__item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
}
.product-purchase-reassurance__icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: var(--color-primary);
}
.product-purchase-reassurance__icon svg { display: block; width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   Key facts — ligne compacte flex (remplace la grille 2 colonnes cassée
   avec un nombre impair d'éléments)
   -------------------------------------------------------------------------- */

.product-key-facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4) var(--space-6);
	margin: 0;
	padding: var(--space-4) 0;
	list-style: none;
	border-top: var(--border-width) solid var(--color-border);
	border-bottom: var(--border-width) solid var(--color-border);
	background-color: var(--color-bg-alt);
	padding-inline: var(--space-4);
}
.product-key-facts__item {
	min-width: 6rem;
	overflow-wrap: anywhere;
}
.product-key-facts__label {
	display: block;
	color: var(--color-text-muted);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.product-key-facts__value {
	display: block;
	margin-top: var(--space-1);
	font-weight: var(--font-weight-bold);
}

/* --------------------------------------------------------------------------
   Technische Daten — grille définition premium (remplace le <table> natif)
   -------------------------------------------------------------------------- */

.product-specifications,
.product-service { margin-top: var(--space-8); }

/* Phase 16D (correctif QA post-implémentation) : un plafond fixe à 1.5rem
   ne suffisait pas — le H1 produit est lui-même fluide
   (clamp(1.125rem,1.05rem+0.45vw,1.5rem)) et n'atteint son plafond
   qu'à ~1600px de large ; en dessous (tous les breakpoints réels
   375/768/1024/1440px testés), un H2 fixe à 24px restait plus gros que
   le H1 mesuré (18.5-23.3px selon la largeur), cassant la hiérarchie.
   Remplacé par un clamp qui suit la même courbe mais toujours en
   dessous : mesuré ≥2.4px d'écart avec le H1 à chaque breakpoint réel
   (16.1/375px, 17.3/768px, 18.2/1024px, 19.5/1440px, plafond 20.8px
   atteint à ~1850px, après le plafond du H1 à 1600px). Le déclencheur
   "Technische Daten" (.accordion-trigger) reprend le même clamp dans
   son override desktop plus bas dans ce fichier (@media
   min-width:768px, .product-specifications .accordion-trigger) —
   inchangé en mobile pour rester cohérent avec les autres accordéons
   du thème (text-base). Les h3 de la colonne "Lieferung & Beratung"
   (Lieferinformationen / Fragen zum Produkt?) sont fixés en dessous
   des deux (voir règle .product-service__card h3 plus bas). */
.product-detail h2 {
	font-size: clamp(1rem, 0.93rem + 0.32vw, 1.3rem);
	/* Phase 16G — les H2 de section réels (Beschreibung, Lieferung &
	   Beratung, Kundenbewertungen, Ähnliche Produkte — "Technische Daten"
	   est un <button> d'accordéon, pas un h2, non concerné ici) étaient
	   trop discrets face aux labels de specs (.product-specifications__label,
	   déjà en --color-primary-dark) : même couleur + micro-bordure basse
	   pour les distinguer clairement comme titres de section. inline-block
	   fait hugger la bordure au texte, même esprit que
	   .home-section-title::after (home.css) mais adapté à un titre
	   aligné à gauche plutôt que centré. */
	display: inline-block;
	padding-bottom: var(--space-2);
	color: var(--color-primary-dark);
	border-bottom: 2px solid var(--color-accent);
}

.product-specifications .accordion-item {
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	margin-bottom: 0;
	overflow: hidden;
}
.product-specifications .accordion-trigger {
	width: 100%;
}

.product-specifications__grid {
	display: flex;
	flex-direction: column;
}
.product-specifications__row {
	display: grid;
	grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
}
.product-specifications__row + .product-specifications__row {
	border-top: var(--border-width) solid var(--color-border);
}
.product-specifications__row:nth-child(even) {
	background-color: var(--color-bg-alt);
}
.product-specifications__label,
.product-specifications__value {
	padding: var(--space-3) var(--space-4);
	overflow-wrap: anywhere;
	text-align: left;
}
.product-specifications__label {
	color: var(--color-text-muted);
	font-weight: var(--font-weight-semibold);
	color: var(--color-primary-dark);
}
.product-specifications__value {
	font-weight: var(--font-weight-regular);
}

/* --------------------------------------------------------------------------
   Lieferung & Beratung
   -------------------------------------------------------------------------- */

.product-service__grid { display: grid; gap: var(--space-4); }
.product-service__card { padding: var(--space-5); border: 1px solid var(--color-border); border-left: 3px solid var(--color-primary); border-radius: var(--radius-lg); background: var(--color-surface); }
.product-service__card > :first-child { margin-top: 0; }
/* Phase 16D (correctif QA) : héritaient du h3 global (--text-2xl, 30px
   fixe) — plus gros que le H1 produit à tous les breakpoints réels. Ce
   sont des micro-titres de carte, pas des titres de section : fixés
   sous le plancher du H1 (18.5px min mesuré). */
.product-service__card h3 {
	/* Phase 16G — traitement "label de carte" cohérent avec
	   .product-key-facts__label : trop proche d'un simple <strong> sinon. */
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-text-muted);
}
.product-service__links { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* --------------------------------------------------------------------------
   Onglets produit (Beschreibung) — rangée horizontale desktop, accordéon
   mobile (voir woocommerce/single-product/tabs/tabs.php)
   -------------------------------------------------------------------------- */

.product-detail .woocommerce-tabs,
.product-detail .related { margin-top: var(--space-8); }
.product-detail .related.products > h2 { margin-bottom: var(--space-5); }

/* Nav d'onglets native — cachée sur mobile, remplacée par les accordéons. */
@media (max-width: 767px) {
	.woocommerce-tabs .tabs.wc-tabs { display: none; }
}

/* Habillage horizontal desktop de la nav d'onglets native. */
@media (min-width: 768px) {
	.woocommerce-tabs .tabs.wc-tabs {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-6);
		margin: 0 0 var(--space-6);
		padding: 0;
		list-style: none;
		border-bottom: var(--border-width) solid var(--color-border);
	}
	.woocommerce-tabs .tabs.wc-tabs li { margin: 0; }
	.woocommerce-tabs .tabs.wc-tabs li a {
		display: inline-block;
		padding: var(--space-3) 0;
		margin-bottom: -1px;
		color: var(--color-text-muted);
		font-weight: var(--font-weight-medium);
		text-decoration: none;
		border-bottom: 2px solid transparent;
	}
	.woocommerce-tabs .tabs.wc-tabs li.active a {
		color: var(--color-primary);
		font-weight: var(--font-weight-semibold);
		border-bottom-color: var(--color-primary);
	}

	/* La nav d'onglets sert déjà de titre visuel : le déclencheur
	   accordéon (identique en texte) reste dans le DOM pour le mobile
	   mais n'a pas besoin d'être visible en double sur desktop. */
	.woocommerce-tabs .product-tabs-accordion-trigger { display: none; }
	.woocommerce-tabs .product-tabs-accordion-item {
		border: none;
		margin: 0;
	}
	.woocommerce-tabs .product-tabs-accordion-item .accordion-panel {
		max-height: none !important;
		overflow: visible;
		padding: 0 !important;
	}
}

/* --------------------------------------------------------------------------
   Technische Daten — accordéon mobile (desktop : titre statique + contenu
   toujours visible, le bouton perd son interactivité visuelle)
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
	.product-specifications .accordion-item {
		border: none;
		border-radius: 0;
		overflow: visible;
	}
	.product-specifications .accordion-trigger {
		padding: 0 0 var(--space-4);
		background: none;
		border: none;
		cursor: default;
		pointer-events: none;
		/* Phase 16D (correctif QA) : même clamp que .product-detail h2
		   ci-dessus — 1.5rem fixe restait plus gros que le H1 fluide aux
		   breakpoints réels, voir commentaire détaillé plus haut. */
		font-size: clamp(1rem, 0.93rem + 0.32vw, 1.3rem);
		font-weight: var(--font-weight-semibold);
		color: var(--color-secondary-dark);
	}
	.product-specifications .accordion-trigger:hover {
		background: none;
	}
	.product-specifications .accordion-icon { display: none; }
	.product-specifications .accordion-panel {
		max-height: none !important;
		overflow: visible;
		padding: 0 !important;
	}
	.product-specifications__grid {
		border: var(--border-width) solid var(--color-border);
		border-radius: var(--radius-lg);
		overflow: hidden;
	}
}

@media (max-width: 767px) {
	.product-specifications__grid {
		border: var(--border-width) solid var(--color-border);
		border-radius: var(--radius-lg);
		overflow: hidden;
	}
}

/* --------------------------------------------------------------------------
   Related products ("Ähnliche Produkte") — grille propre (bug P0 : le
   template natif WooCommerce n'a aucune règle de grille, chaque card
   s'étalait sur 100% de la largeur avec une image géante pixelisée).
   Voir woocommerce/single-product/related.php (override créé Phase 7B).
   -------------------------------------------------------------------------- */

.product-detail .related.products .products-grid {
	margin: 0;
	padding: 0;
	list-style: none;
}
.product-detail .related.products .card--product .card__media {
	position: relative;
}
.product-detail .related.products .card--product .card__badge {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
}
.product-detail .related.products .card--product .card__title-link {
	color: inherit;
	text-decoration: none;
}
.product-detail .related.products .card--product .card__title-link:hover {
	color: var(--color-primary);
	text-decoration: underline;
}
.product-detail .related.products .card--product .card__actions .btn {
	width: 100%;
}

@media (min-width: 768px) {
	.product-page { padding-block: var(--space-12); }
	.product-detail__hero { grid-template-columns: minmax(0,57fr) minmax(340px,43fr); gap:var(--space-10); }
	.product-detail__summary { position:sticky; top:var(--space-6); padding:var(--space-6); border:1px solid var(--color-border); border-top:4px solid var(--color-primary); border-radius:var(--radius-lg); background:var(--color-surface); box-shadow:var(--shadow-sm); }
	.product-detail__summary .product_title { font-size:clamp(1.25rem,1.15rem + .2vw,1.375rem); line-height:1.22; max-width:none; }
	.product-service__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 479px) {
	.product-detail__summary .cart > * { width: 100%; }
	.product-detail__summary .quantity .qty,
	.product-detail__summary .single_add_to_cart_button { width: 100%; }
}

/* ==========================================================================
   PHASE 16F — PDP FINAL UX / NATIVE REVIEWS
   ========================================================================== */

.product-rating-summary {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-2);
	font-size: var(--text-sm);
}
.product-rating-summary .star-rating {
	position: relative;
	display: inline-block;
	width: 5.5em;
	height: 1.2em;
	margin: 0;
	overflow: hidden;
	line-height: 1.2;
	letter-spacing: .1em;
	color: var(--color-border-strong);
}
.product-rating-summary .star-rating::before { content: "★★★★★"; }
.product-rating-summary .star-rating span {
	position: absolute;
	inset: 0 auto auto 0;
	height: 100%;
	overflow: hidden;
	color: var(--color-accent-dark);
}
.product-rating-summary .star-rating span::before { content: "★★★★★"; }
.product-rating-summary a { color: var(--color-text-muted); }

.product-detail__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-3);
	margin-top: var(--space-4);
	padding-top: var(--space-3);
}
.product-detail__meta span + span::before {
	content: "•";
	margin-right: var(--space-3);
	color: var(--color-border-strong);
}

.product-detail__subnav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-6);
	margin-top: var(--space-5);
	padding-block: var(--space-3);
	border-block: 1px solid var(--color-border);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-semibold);
}

.product-specifications,
.product-description-section,
.product-service,
.product-reviews-section,
.product-detail .related {
	margin-top: var(--space-12);
	scroll-margin-top: var(--space-6);
}

@media (min-width: 768px) {
	.product-specifications__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 var(--space-8);
		border: 0;
		border-radius: 0;
	}
	.product-specifications__row,
	.product-specifications__row:nth-child(even) {
		grid-template-columns: minmax(0, 48%) minmax(0, 1fr);
		background: transparent;
		border-bottom: 1px solid var(--color-border);
	}
	.product-specifications__row + .product-specifications__row { border-top: 0; }
	.product-specifications__label,
	.product-specifications__value { padding: var(--space-3) 0; }
	.product-specifications__value { text-align: right; font-weight: var(--font-weight-semibold); }
}

.product-description-section__content {
	margin: 0;
	max-width: 74ch;
}
.product-description-section__content > :last-child { margin-bottom: 0; }

.product-service__grid {
	gap: 0;
	background: var(--color-bg-alt);
	border-block: 1px solid var(--color-border);
}
.product-service__card {
	padding: var(--space-5) var(--space-6);
	border: 0;
	border-radius: 0;
	background: transparent;
}
.product-service__card + .product-service__card { border-top: 1px solid var(--color-border); }
.product-service > .product-service__links { margin-top: var(--space-3); font-size: var(--text-sm); }
@media (min-width: 768px) {
	.product-service__card + .product-service__card {
		border-top: 0;
		border-left: 1px solid var(--color-border);
	}
}

.product-reviews-section .woocommerce-Reviews {
	display: grid;
	gap: var(--space-8);
}
.product-reviews-section__title { margin-bottom: var(--space-5); }
.product-reviews-section .woocommerce-Reviews-title { display: none; }
.product-reviews-section .woocommerce-noreviews {
	margin: 0;
	color: var(--color-text-muted);
}
.product-reviews-section .commentlist {
	margin: 0;
	padding: 0;
	list-style: none;
}
.product-reviews-section .commentlist > li {
	padding-block: var(--space-5);
	border-bottom: 1px solid var(--color-border);
}
.product-reviews-section .comment_container {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--space-4);
}
.product-reviews-section .avatar { width: 44px; height: 44px; border-radius: 50%; }
.product-reviews-section .meta { margin: 0 0 var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }
.product-reviews-section .woocommerce-review__verified { color: var(--color-primary); }

#review_form_wrapper {
	max-width: 760px;
	padding: var(--space-6);
	background: var(--color-bg-alt);
	border-top: 3px solid var(--color-primary);
}
#review_form .comment-reply-title {
	display: block;
	margin-bottom: var(--space-4);
	font-size: var(--text-lg);
	font-weight: var(--font-weight-semibold);
}
#review_form label { display: block; margin-bottom: var(--space-2); font-weight: var(--font-weight-semibold); }
#review_form input[type="text"],
#review_form input[type="email"],
#review_form textarea,
#review_form select {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	font: inherit;
	color: var(--color-text);
	background: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-md);
}
#review_form textarea { min-height: 150px; resize: vertical; }
#review_form input:focus-visible,
#review_form textarea:focus-visible,
#review_form select:focus-visible {
	outline: 3px solid var(--color-focus-ring);
	outline-offset: 2px;
}
#review_form .form-submit input[type="submit"] {
	min-height: 46px;
	padding: var(--space-3) var(--space-6);
	font: inherit;
	font-weight: var(--font-weight-semibold);
	color: var(--color-secondary-dark);
	background: var(--color-accent);
	border: 1px solid var(--color-accent);
	border-radius: var(--radius-md);
	cursor: pointer;
}

/* WooCommerce replaces the rating <select> with these native star links. */
#review_form .stars { margin-block: var(--space-2) var(--space-4); }
#review_form .stars span { display: inline-flex; gap: var(--space-1); }
#review_form .stars a {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	overflow: hidden;
	color: var(--color-text-muted);
	text-decoration: none;
	text-indent: -9999px;
}
#review_form .stars a::before {
	content: "☆";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.45rem;
	line-height: 1;
	text-indent: 0;
}
#review_form .stars:hover a::before,
#review_form .stars.selected a:not(.active)::before,
#review_form .stars.selected a.active::before { content: "★"; }
#review_form .stars a:hover ~ a::before,
#review_form .stars.selected a.active ~ a::before { content: "☆"; }
#review_form .stars a:hover,
#review_form .stars a.active,
#review_form .stars a:focus-visible { color: var(--color-accent-dark); }
#review_form .stars a:focus-visible {
	outline: 3px solid var(--color-focus-ring);
	outline-offset: 1px;
	border-radius: var(--radius-sm);
}

@media (max-width: 767px) {
	.product-specifications,
	.product-description-section,
	.product-service,
	.product-reviews-section,
	.product-detail .related { margin-top: var(--space-8); }
	.product-specifications__row { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); }
	.product-service__card { padding-inline: var(--space-4); }
	#review_form_wrapper { padding: var(--space-5) var(--space-4); }
}