/**
 * SIIRA Santé — Fiche produit.
 *
 * Reproduit l'écran « Produit » de la maquette : miniatures verticales à
 * gauche, visuel principal, rangée de bénéfices sous la galerie, colonne
 * d'achat à droite, onglets avec encart latéral, synthèse des avis à barres
 * et carrousel de produits complémentaires.
 *
 * @package SIIRA_Sante
 */

/* Flexbox plutôt que grille : chaque colonne porte une largeur plancher
   (flex-basis 380 px). Elle ne peut donc jamais être écrasée — si la place
   manque, elle passe simplement à la ligne. C'est ce qui rend impossible le
   défaut où le titre du produit s'affichait à la verticale. */
.siira.single-product div.product {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 40px;
	max-width: var(--siira-container);
	margin-inline: auto;
	padding-inline: var(--siira-gutter);
	padding-bottom: var(--siira-section-y);
	box-sizing: border-box;
}

/* Galerie et colonne d'achat côte à côte, la rangée de bénéfices dessous. */
.siira.single-product div.product > * {
	min-width: 0;
}

.siira.single-product div.product .woocommerce-product-gallery {
	flex: 1 1 380px;
	max-width: 560px;
	order: 1;
}

.siira.single-product div.product .summary {
	flex: 1 1 380px;
	order: 2;
}

/* Les blocs pleine largeur, dans leur ordre d'apparition. */
.siira-product-benefits,
.siira.single-product .woocommerce-tabs,
.siira.single-product #reviews,
.siira.single-product .siira-reviews-head,
.siira.single-product .siira-carousel,
.siira.single-product .up-sells,
.siira.single-product .related,
.siira.single-product div.product > .siira-trust {
	flex: 1 1 100%;
	width: 100%;
	order: 3;
}

/* =========================================================================
   Galerie
   ====================================================================== */

.siira.single-product div.product .woocommerce-product-gallery {
	position: relative;
	float: none;
	width: 100%;
	margin: 0;
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
	gap: 14px;
}

.siira.single-product .woocommerce-product-gallery__wrapper {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	background-color: var(--siira-cream-200);
	border: 1px solid var(--siira-border);
	border-radius: var(--siira-radius-card);
	overflow: hidden;
}

.siira.single-product .woocommerce-product-gallery img {
	border-radius: var(--siira-radius-card);
}

/* Miniatures en colonne à gauche. */
.siira.single-product .flex-control-thumbs {
	flex: 0 0 76px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	order: -1;
}

.siira.single-product .flex-control-thumbs li {
	width: 100%;
	margin: 0;
	float: none;
	list-style: none;
}

.siira.single-product .flex-control-thumbs img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 6px;
	background-color: var(--siira-cream-200);
	border: 1px solid var(--siira-border);
	border-radius: 8px;
	opacity: 1;
	cursor: pointer;
	box-sizing: border-box;
	transition: border-color var(--siira-transition);
}

.siira.single-product .flex-control-thumbs img.flex-active,
.siira.single-product .flex-control-thumbs img:hover {
	border-color: var(--siira-navy);
}

.siira.single-product .woocommerce-product-gallery__trigger {
	top: 14px;
	right: 14px;
	left: auto;
	z-index: 3;
}

/* Rangée de bénéfices sous la galerie. */
.siira-product-benefits {
	display: flex;
	justify-content: space-around;
	gap: 18px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.siira-product-benefits__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 0;
	max-width: 11ch;
	text-align: center;
	font-size: var(--siira-fs-tiny);
	line-height: 1.35;
	color: var(--siira-text);
}

.siira-product-benefits__item .siira-icon {
	color: var(--siira-navy);
}

/* =========================================================================
   Colonne d'achat
   ====================================================================== */

.siira.single-product div.product .summary {
	float: none;
	width: 100%;
	margin: 0;
	min-width: 0;
}

.siira.single-product .product_title {
	font-size: var(--siira-fs-h1);
	margin-bottom: 6px;
}

/* Sous-titre du produit (description courte remontée sous le titre). */
.siira-product-subtitle {
	font-size: var(--siira-fs-body);
	color: var(--siira-text);
	margin: 0 0 16px;
}

/* Ligne note + origine. */
.siira-product-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 20px;
	padding-bottom: 18px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--siira-border);
}

.siira.single-product .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	float: none;
}

.siira.single-product .woocommerce-product-rating .woocommerce-review-link {
	font-size: var(--siira-fs-xsmall);
	color: var(--siira-text-light);
}

.siira-origin {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: var(--siira-fs-xsmall);
	color: var(--siira-text);
}

.siira-origin__flag {
	display: inline-block;
	width: 20px;
	height: 14px;
	border-radius: 2px;
	background: linear-gradient(
		to right,
		#0b3d91 0 33.33%,
		#ffffff 33.33% 66.66%,
		#c8102e 66.66% 100%
	);
	border: 1px solid var(--siira-border);
}

.siira-format {
	font-size: var(--siira-fs-small);
	color: var(--siira-text-light);
	margin: 0;
}

.siira.single-product div.product p.price,
.siira.single-product div.product span.price {
	clear: both;
	font-family: var(--siira-font-body);
	font-size: 2rem;
	font-weight: var(--siira-fw-bold);
	color: var(--siira-heading);
	margin: 0 0 2px;
}

.siira.single-product div.product p.price del {
	font-size: 1.125rem;
	font-weight: var(--siira-fw-regular);
	color: var(--siira-text-light);
	margin-right: 8px;
}

.siira.single-product div.product p.price ins {
	text-decoration: none;
	color: var(--siira-sale);
}

.siira-unit-price {
	font-size: var(--siira-fs-small);
	color: var(--siira-text-light);
	margin: 0 0 22px;
}

/* Liste des bénéfices, coches cerclées comme sur la maquette. */
.siira-benefits {
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
}

.siira-benefits__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 13px;
	font-size: var(--siira-fs-small);
	color: var(--siira-heading);
}

.siira-benefits__item:last-child {
	margin-bottom: 0;
}

.siira-benefits__icon {
	flex: 0 0 auto;
	color: var(--siira-green);
	line-height: 0;
	margin-top: 1px;
}

/* Ligne quantité + ajout au panier. */
.siira.single-product form.cart {
	display: flex;
	align-items: stretch;
	gap: 14px;
	margin: 0 0 12px;
}

.siira.single-product form.cart.variations_form {
	display: block;
}

.siira-qty {
	display: inline-flex;
	align-items: center;
	background-color: var(--siira-white);
	border: 1px solid var(--siira-border);
	border-radius: var(--siira-radius-btn);
	overflow: hidden;
	flex: 0 0 auto;
}

.siira-qty__btn {
	width: 40px;
	align-self: stretch;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	line-height: 1;
	color: var(--siira-navy);
	background: none;
	border: 0;
	cursor: pointer;
	transition: background-color var(--siira-transition);
}

.siira-qty__btn:hover {
	background-color: var(--siira-cream);
}

.siira .siira-qty input.qty {
	width: 44px;
	padding: 13px 0;
	text-align: center;
	border: 0;
	border-radius: 0;
	font-size: var(--siira-fs-small);
	font-weight: var(--siira-fw-semibold);
	-moz-appearance: textfield;
}

.siira .siira-qty input.qty::-webkit-outer-spin-button,
.siira .siira-qty input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.siira.single-product form.cart .single_add_to_cart_button {
	flex: 1 1 auto;
	padding-inline: 32px;
	font-size: var(--siira-fs-body);
}

/* Disponibilité, en vert sous le bouton. */
.siira-stock {
	margin: 0 0 20px;
	font-size: var(--siira-fs-xsmall);
	color: var(--siira-success);
	text-align: center;
}

.siira.single-product .product_meta {
	margin-top: 18px;
	font-size: var(--siira-fs-xsmall);
	color: var(--siira-text-light);
}

/* =========================================================================
   Onglets
   ====================================================================== */

.siira.single-product .woocommerce-tabs {
	margin-top: 48px;
}

.siira.single-product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 6px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--siira-border);
}

.siira.single-product .woocommerce-tabs ul.tabs::before,
.siira.single-product .woocommerce-tabs ul.tabs li::before,
.siira.single-product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.siira.single-product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.siira.single-product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 10px 18px;
	font-family: var(--siira-font-body);
	font-size: var(--siira-fs-small);
	font-weight: var(--siira-fw-medium);
	color: var(--siira-text-light);
	border-radius: var(--siira-radius-btn) var(--siira-radius-btn) 0 0;
}

/* Onglet actif : pastille crème, comme sur la maquette. */
.siira.single-product .woocommerce-tabs ul.tabs li.active a {
	color: var(--siira-heading);
	background-color: var(--siira-cream);
	font-weight: var(--siira-fw-semibold);
}

.siira.single-product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--siira-heading);
}

.siira.single-product .woocommerce-tabs .panel {
	font-size: var(--siira-fs-small);
}

/* Onglet Description : texte à gauche, encart des labels à droite. */
.siira-desc-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 36px;
	align-items: start;
}

.siira-desc-main {
	min-width: 0;
}

/* Accordéons de la FAQ, en <details> natifs (aucun JavaScript). */
.siira-faq__item {
	border-bottom: 1px solid var(--siira-border-light);
}

.siira-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	font-size: var(--siira-fs-small);
	font-weight: var(--siira-fw-medium);
	color: var(--siira-heading);
	cursor: pointer;
	list-style: none;
}

.siira-faq__q::-webkit-details-marker {
	display: none;
}

.siira-faq__q::after {
	content: '+';
	font-size: 18px;
	color: var(--siira-text-light);
	flex: 0 0 auto;
}

.siira-faq__item[open] .siira-faq__q::after {
	content: '\2212';
}

.siira-faq__a {
	padding: 0 0 14px;
	color: var(--siira-text);
}

.siira.single-product .woocommerce-tabs .panel > h2:first-child {
	display: none;
}

.siira.single-product .woocommerce-tabs .panel h3 {
	font-size: 1.0625rem;
	margin-bottom: 10px;
}

.siira.single-product .woocommerce-tabs .panel table {
	width: 100%;
	border-collapse: collapse;
	margin: 14px 0;
	font-size: var(--siira-fs-xsmall);
}

.siira.single-product .woocommerce-tabs .panel table th,
.siira.single-product .woocommerce-tabs .panel table td {
	padding: 10px 12px;
	border: 1px solid var(--siira-border);
	text-align: left;
}

.siira.single-product .woocommerce-tabs .panel table th {
	background-color: var(--siira-cream-200);
	font-weight: var(--siira-fw-semibold);
	color: var(--siira-heading);
}

/* Encart des labels, à droite de la description. */
.siira-labels {
	align-self: start;
	padding: 22px 20px;
	background-color: var(--siira-cream);
	border-radius: var(--siira-radius-card);
}

.siira-labels__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.siira-labels__item {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	font-size: var(--siira-fs-small);
	color: var(--siira-heading);
}

.siira-labels__item:last-child {
	margin-bottom: 0;
}

.siira-labels__icon {
	color: var(--siira-navy);
	line-height: 0;
}

/* =========================================================================
   Avis
   ====================================================================== */

.siira.single-product #reviews {
	margin-top: 40px;
}

.siira.single-product #reviews .woocommerce-Reviews-title {
	font-size: var(--siira-fs-h2);
	margin-bottom: 18px;
}

.siira-reviews-head {
	display: flex;
	align-items: flex-start;
	gap: 40px;
	flex-wrap: wrap;
	padding: 24px;
	margin-bottom: 24px;
	background-color: var(--siira-cream-200);
	border: 1px solid var(--siira-border);
	border-radius: var(--siira-radius-card);
}

.siira-reviews-head__action {
	margin: 0;
	align-self: center;
}

.siira.single-product #reviews .commentlist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.siira.single-product #reviews .comment_container {
	display: flex;
	gap: 16px;
	padding: 20px;
	background-color: var(--siira-white);
	border: 1px solid var(--siira-border);
	border-radius: var(--siira-radius-card);
	margin-bottom: 14px;
}

.siira.single-product #reviews .comment_container img.avatar {
	position: static;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	margin: 0;
}

.siira.single-product #reviews .comment-text {
	border: 0;
	margin: 0;
	padding: 0;
}

.siira.single-product #review_form_wrapper {
	margin-top: 24px;
}

/* =========================================================================
   Produits complémentaires
   ====================================================================== */

.siira.single-product .siira-carousel {
	margin-top: 48px;
}

.siira.single-product .related > h2,
.siira.single-product .upsells > h2 {
	font-size: var(--siira-fs-h3);
	margin-bottom: 20px;
}

.siira.single-product .up-sells {
}

/* Bandeau de réassurance en pleine largeur sous la fiche. */
.siira.single-product .siira-trust {
	margin-bottom: 0;
}

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

@media (max-width: 1024px) {
	.siira.single-product div.product {
		gap: 32px;
	}

	.siira-desc-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 900px) {
	.siira.single-product div.product .woocommerce-product-gallery {
		max-width: none;
	}

	.siira.single-product div.product .woocommerce-product-gallery {
		flex-direction: column;
	}

	.siira.single-product .flex-control-thumbs {
		flex-direction: row;
		flex: 0 0 auto;
		order: 1;
		overflow-x: auto;
	}

	.siira.single-product .flex-control-thumbs li {
		flex: 0 0 68px;
	}

	.siira-product-benefits {
		flex-wrap: wrap;
	}
}

@media (max-width: 600px) {
	.siira.single-product form.cart {
		flex-wrap: wrap;
	}

	.siira.single-product form.cart .single_add_to_cart_button {
		flex-basis: 100%;
	}

	.siira.single-product .woocommerce-tabs ul.tabs {
		gap: 2px;
		overflow-x: auto;
		white-space: nowrap;
	}

	.siira-reviews-head {
		gap: 20px;
	}
}

/* =========================================================================
   Ligne « à quoi sert le produit »

   Remplace l'affichage des catégories : avec une gamme courte, le client a
   besoin de savoir à quoi répond le produit, pas dans quel rayon il est
   rangé. Se remplit dans l'onglet SIIRA de la fiche produit.
   ====================================================================== */

.siira .siira-usages {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.siira .siira-usages__item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 7px 14px 7px 11px;
	background-color: var(--siira-cream);
	border: 1px solid var(--siira-border);
	border-radius: var(--siira-radius-pill);
	font-family: var(--siira-font-body);
	font-size: var(--siira-fs-xsmall);
	font-weight: var(--siira-fw-medium);
	line-height: 1.3;
	color: var(--siira-navy);
}

/* Puce verte : rappel de la feuille du logo. */
.siira .siira-usages__item::before {
	content: '';
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--siira-leaf);
}