/**
 * Fiche produit.
 *
 * Le thème compose la page en deux colonnes égales : la photo à gauche, tout le reste à
 * droite. La structure est bonne ; ce qui manquait, c'est la hiérarchie. On garde donc
 * le balisage et on retravaille trois choses :
 *
 *   1. **La photo remplit sa colonne.** Elle occupait 480 px sur 570, le reste étant
 *      pris par une bande de miniatures — vide dans 148 fiches sur 192, qui n'ont
 *      qu'une seule image. La bande ne s'affiche plus que lorsqu'elle a de quoi.
 *   2. **Un seul bouton principal.** Le rose de la marque pour « Ajouter au panier »,
 *      un contour pour « Acheter maintenant ». Deux boutons pleins de même taille ne
 *      donnaient aucune direction.
 *   3. **Un rythme vertical.** Marque, titre, prix, accroche, achat, réassurance : six
 *      blocs séparés par des filets, plutôt qu'une suite de lignes de même poids.
 *
 * Palette : rose #e5177b, encre #150911, mauve sourd #9a8592, filets #efe4e9,
 * fonds #fdf9fb et #fff2f8 — les mêmes que l'en-tête et la page de commande.
 *
 * @package Glow_Bar
 */

/* ================================================================
   1. La photo
   ================================================================ */

.single-product .woo-single-gallery .swiper-slide img,
.single-product .woo-single-images img {
	border-radius: 20px;
}

.single-product .woo-single-gallery .tm-swiper.glow-bar-main-swiper {
	border-radius: 20px;
	background: #fdf9fb;
}

/*
 * Une seule image : la bande de miniatures n'a rien à montrer et prend 90 px sur 570.
 * La classe vient de `body_class`, posée par glow-bar-fiche.php.
 */
.gb-produit-1-image .glow-bar-thumbs-swiper-wrap {
	display: none;
}

/*
 * `width: 100%` ne suffit pas : la galerie est une boîte flexible et le carrousel y est
 * posé à 480 px sans autorisation de grandir. Il lui faut le droit de pousser.
 */
.gb-produit-1-image .woo-single-gallery .tm-swiper.glow-bar-main-swiper {
	flex: 1 1 auto;
	width: 100%;
	max-width: 100%;

	/*
	 * La bande de miniatures est posée en absolu à gauche, et le carrousel lui laisse
	 * la place par une marge de 90 px. La masquer sans reprendre la marge poussait
	 * l'image de 90 px dans la colonne de droite, par-dessus le titre.
	 */
	margin-left: 0;
}

.gb-produit-1-image .woo-single-gallery .glow-bar-main-swiper .swiper-slide,
.gb-produit-1-image .woo-single-gallery .glow-bar-main-swiper img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* Les miniatures : un liseré discret, rose sur celle qui est active. */
.single-product .glow-bar-thumbs-swiper .swiper-slide img {
	border-radius: 12px;
	border: 1px solid transparent;
	transition: border-color 0.2s ease;
}

.single-product .glow-bar-thumbs-swiper .swiper-slide-thumb-active img,
.single-product .glow-bar-thumbs-swiper .swiper-slide:hover img {
	border-color: #e5177b;
}

/* ================================================================
   2. La colonne de droite
   ================================================================ */

.single-product .col-woo-single-summary .entry-summary {
	max-width: 520px;
}

/* --- pastilles --- */

.single-product .entry-summary .entry-product-badges {
	position: static;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 14px;
}

.single-product .entry-summary .entry-product-badges > div {
	margin: 0;
}

.single-product .entry-summary .entry-product-badges span {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 11px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
}

/* --- la marque, en surtitre --- */

.gb-fiche-marque {
	display: inline-block;
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #9a8592;
	text-decoration: none;
	transition: color 0.2s ease;
}

.gb-fiche-marque:hover,
.gb-fiche-marque:focus {
	color: #e5177b;
}

/* --- titre --- */

.single-product .entry-summary .product-title-wrap {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 12px;
}

.single-product .entry-summary h1.product_title {
	flex: 1 1 auto;
	margin: 0;
	font-size: 32px;
	line-height: 1.16;
	letter-spacing: -0.01em;
	color: #150911;
}

/* La liste d'envies : un rond léger, pas un second bouton d'achat. */
.single-product .entry-summary .product-title-wrap .wishlist-btn {
	flex: 0 0 auto;
	margin: 4px 0 0;
}

.single-product .entry-summary .product-title-wrap .woosw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid #efe4e9;
	border-radius: 50%;
	color: #6b3d55;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.single-product .entry-summary .product-title-wrap .woosw-btn:hover {
	border-color: #f8d3e5;
	background: #fff2f8;
	color: #e5177b;
}

/* --- prix et note --- */

.single-product .entry-summary .entry-price-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: flex-start;
	gap: 8px 20px;
	margin: 0;
}

.single-product .entry-summary .price {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.1;
	color: #150911;
}

.single-product .entry-summary .price del {
	order: 2;
	font-size: 17px;
	font-weight: 500;
	color: #a4939c;
	opacity: 1;
}

.single-product .entry-summary .price ins {
	order: 1;
	text-decoration: none;
	background: none;
	color: inherit;
}

.single-product .entry-summary .entry-rating-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.single-product .entry-summary .woocommerce-review-link {
	font-size: 13px;
	color: #9a8592;
}

/* --- la mention sous le prix --- */

.gb-fiche-mention {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin: 8px 0 0;
}

.gb-fiche-ttc {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #a4939c;
}

/*
 * `inline-flex` fait des enfants des éléments de flux et jette les blancs qui les
 * séparent : « Vous économisez » se collait au montant. Le `gap` remet l'espace.
 */
.gb-fiche-economie {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 24px;
	padding: 0 11px;
	border-radius: 999px;
	background: #fff2f8;
	font-size: 12.5px;
	font-weight: 600;
	color: #e5177b;
}

.gb-fiche-economie .woocommerce-Price-amount {
	font-weight: 700;
	color: inherit;
}

/* --- l'accroche --- */

.single-product .entry-summary .woocommerce-product-details__short-description {
	margin: 20px 0 0;
	padding-bottom: 24px;
	border-bottom: 1px solid #efe4e9;
	font-size: 16px;
	line-height: 1.62;
	color: #5c4a54;
}

.single-product .entry-summary .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}

/* ================================================================
   3. L'achat
   ================================================================ */

.single-product .entry-summary form.cart {
	margin: 24px 0 0;
}

.single-product .entry-product-quantity-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
}

/*
 * Le mot « Quantité ».
 *
 * Le thème le pose dans un `label.screen-reader-text` — donc destiné aux seuls lecteurs
 * d'écran — puis le rend visible par une autre règle. Il se retrouvait au-dessus de la
 * pilule, qui descendait d'autant : la pilule et le bouton d'ajout au panier ne
 * partageaient plus la même ligne. Le contrôle « − 1 + » se passe de légende ; on rend
 * au label son rôle d'origine, lisible par les lecteurs d'écran et invisible à l'œil.
 *
 * Les `!important` répondent à ceux de `frontend.min.css`, qui annule le masquage
 * propriété par propriété :
 *
 *     .entry-product-quantity-wrapper .quantity-button-wrapper:not(.quantity-input-hidden) label {
 *         height: auto !important; overflow: visible !important; position: static !important; … }
 *
 * Aucune spécificité ne passe devant : il faut répondre sur le même registre.
 */
.single-product .entry-product-quantity-wrapper .quantity-button-wrapper label.screen-reader-text {
	position: absolute !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	min-width: 0 !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Le sélecteur de quantité : une pilule, à la même hauteur que le bouton. */
.single-product .entry-product-quantity-wrapper {
	align-items: center;
}

.single-product .entry-product-quantity-wrapper .quantity-button-wrapper {
	flex: 0 0 132px;
	margin: 0;
}

.single-product .entry-product-quantity-wrapper .quantity {
	display: flex;
	align-items: center;
	height: 54px;
	padding: 0 6px;
	border: 1px solid #e7d7e0;
	border-radius: 999px;
	background: #fff;
}

.single-product .entry-product-quantity-wrapper .quantity .qty {
	order: 2;
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	color: #150911;
}

.single-product .entry-product-quantity-wrapper .quantity .decrease,
.single-product .entry-product-quantity-wrapper .quantity .increase {
	position: static;
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: #fdf9fb;
	color: #6b3d55;
	font-size: 16px;
	line-height: 1;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.single-product .entry-product-quantity-wrapper .quantity .decrease { order: 1; }
.single-product .entry-product-quantity-wrapper .quantity .increase { order: 3; }

/*
 * Le thème écrit « - » et « + » en toutes lettres dans les boutons. Le trait d'union
 * est un glyphe court et fin, le plus est haut et gras : côte à côte, la paire est
 * bancale. On efface le texte et on trace les deux signes, de même longueur et de même
 * épaisseur.
 */
.single-product .entry-product-quantity-wrapper .quantity .decrease,
.single-product .entry-product-quantity-wrapper .quantity .increase {
	position: relative;
	font-size: 0;
	color: #6b3d55;
}

.single-product .entry-product-quantity-wrapper .quantity .decrease::before,
.single-product .entry-product-quantity-wrapper .quantity .increase::before,
.single-product .entry-product-quantity-wrapper .quantity .increase::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 11px;
	height: 1.6px;
	border-radius: 2px;
	background: currentColor;
	transform: translate(-50%, -50%);
}

.single-product .entry-product-quantity-wrapper .quantity .increase::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.single-product .entry-product-quantity-wrapper .quantity .decrease:hover,
.single-product .entry-product-quantity-wrapper .quantity .increase:hover {
	background: #fff2f8;
	color: #e5177b;
}

.single-product .entry-product-quantity-wrapper .quantity .decrease.disabled {
	opacity: 0.4;
	pointer-events: none;
}

/*
 * Deux boutons, deux poids. Le premier — « Ajouter au panier » — prend le rose de la
 * marque et le reste de la ligne ; le second — « Acheter maintenant » — passe à la
 * ligne en contour. Le thème les rendait tous deux pleins et de même taille, l'un noir,
 * l'autre blanc cerclé : rien ne disait lequel choisir.
 */
.single-product .entry-product-quantity-wrapper .single_add_to_cart_button {
	flex: 1 1 200px;
	min-height: 54px;
	margin: 0;
	padding: 0 26px;
	border: 1.5px solid #e5177b;
	border-radius: 999px;
	background: #e5177b;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.single-product .entry-product-quantity-wrapper .single_add_to_cart_button:hover,
.single-product .entry-product-quantity-wrapper .single_add_to_cart_button:focus {
	border-color: #c0135a;
	background: #c0135a;
	color: #fff;
}

.single-product .entry-product-quantity-wrapper .single_add_to_cart_button ~ .single_add_to_cart_button {
	flex: 1 1 100%;
	border-color: #150911;
	background: transparent;
	color: #150911;
}

.single-product .entry-product-quantity-wrapper .single_add_to_cart_button ~ .single_add_to_cart_button:hover,
.single-product .entry-product-quantity-wrapper .single_add_to_cart_button ~ .single_add_to_cart_button:focus {
	border-color: #150911;
	background: #150911;
	color: #fff;
}

/* Partager : un lien, pas un bouton. */
.single-product .entry-summary .product-popup-links {
	margin: 16px 0 0;
}

.single-product .entry-summary .product-popup-link .product-action {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: #6b3d55;
	transition: color 0.2s ease;
}

.single-product .entry-summary .product-popup-link .product-action:hover {
	color: #e5177b;
}

/* ================================================================
   4. La réassurance
   ================================================================ */

.gb-fiche-reassurance {
	margin: 26px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid #efe4e9;
	list-style: none;
	display: grid;
	gap: 16px;
}

.gb-fiche-reassurance li {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	margin: 0;
	padding: 0;
}

.gb-fiche-reassurance li::before {
	content: none;
}

.gb-fiche-reassurance__icone {
	flex: 0 0 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #fff2f8;
	color: #e5177b;
}

.gb-fiche-reassurance__texte {
	display: block;
	padding-top: 2px;
}

.gb-fiche-reassurance__texte strong {
	display: block;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.35;
	color: #150911;
}

.gb-fiche-reassurance__texte em {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-style: normal;
	line-height: 1.5;
	color: #9a8592;
}

/* ================================================================
   5. Les onglets
   ================================================================ */

.single-product .glow-bar-tabs__header-inner {
	border-bottom: 1px solid #efe4e9;
}

.single-product .glow-bar-tabs__header .tab-title {
	font-size: 15px;
	color: #9a8592;
	transition: color 0.2s ease;
}

.single-product .glow-bar-tabs__header .tab-title:hover,
.single-product .glow-bar-tabs__header .tab-title.active {
	color: #150911;
}

/* Le trait sous l'onglet actif prend le rose plutôt que le noir. */
.single-product .glow-bar-tabs__header .tab-title.active::after,
.single-product .glow-bar-tabs__header .tab-title::after {
	background-color: #e5177b;
}

/*
 * Le contenu tenait sur 1170 px de large : deux phrases y flottaient, et l'œil devait
 * traverser toute la page pour lire une ligne. On revient à une colonne de lecture.
 */
.single-product .glow-bar-tabs__content .tab-content {
	max-width: 820px;
	font-size: 16px;
	line-height: 1.72;
	color: #5c4a54;
}

.single-product .glow-bar-tabs__content .tab-content p:last-child {
	margin-bottom: 0;
}

/* ================================================================
   6. Sous la fiche
   ================================================================ */

.single-product .entry-product-section-heading {
	font-size: 30px;
	letter-spacing: -0.01em;
	color: #150911;
}

/* ================================================================
   7. Tablette et téléphone
   ================================================================ */

@media (max-width: 1199px) {
	.single-product .entry-summary h1.product_title {
		font-size: 28px;
	}

	.single-product .entry-summary .price {
		font-size: 27px;
	}
}

@media (max-width: 991px) {
	.single-product .col-woo-single-summary .entry-summary {
		max-width: none;
		margin-top: 28px;
	}

	/* Sur une colonne, les miniatures passent sous la photo. */
	.single-product .woo-single-gallery.feature-style-slider {
		display: block;
	}

	.single-product .glow-bar-thumbs-swiper-wrap {
		width: 100%;
		margin-top: 12px;
	}

	.single-product .glow-bar-tabs__content .tab-content {
		max-width: none;
	}
}

@media (max-width: 767px) {
	/*
	 * Le fil d'Ariane tenait sur deux lignes — cinq niveaux pour un coffret. Il défile
	 * désormais sur une seule, sans barre de défilement visible. La liste `ul` porte
	 * elle-même le `flex-wrap: wrap` : c'est elle qu'il faut viser, pas ses parents.
	 */
	.single-product .page-breadcrumb ul.insight_core_breadcrumb,
	.single-product .woocommerce-breadcrumb {
		flex-wrap: nowrap;
		overflow-x: auto;
		white-space: nowrap;
		scrollbar-width: none;
		font-size: 12.5px;
	}

	.single-product .page-breadcrumb ul.insight_core_breadcrumb > li {
		flex: 0 0 auto;
	}

	.single-product .page-breadcrumb ul.insight_core_breadcrumb::-webkit-scrollbar,
	.single-product .woocommerce-breadcrumb::-webkit-scrollbar {
		display: none;
	}

	.single-product .entry-summary h1.product_title {
		font-size: 25px;
	}

	.single-product .entry-summary .price {
		font-size: 25px;
	}

	.single-product .entry-summary .entry-price-wrap {
		gap: 6px 14px;
	}

	/* Quantité et ajout au panier : une ligne chacun, à pleine largeur. */
	.single-product .entry-product-quantity-wrapper .quantity-button-wrapper {
		flex: 0 0 118px;
	}

	.single-product .entry-product-quantity-wrapper .single_add_to_cart_button {
		flex: 1 1 auto;
		padding: 0 18px;
		font-size: 14.5px;
	}

	.gb-fiche-reassurance {
		margin-top: 22px;
		padding-top: 20px;
		gap: 14px;
	}

	.single-product .entry-product-section-heading {
		font-size: 24px;
	}

	/*
	 * La barre d'achat et la barre d'onglets du bas se disputaient le même bord : la
	 * première, en z-index 100000, recouvrait entièrement la seconde, et la navigation
	 * du site disparaissait dès qu'on faisait défiler une fiche. On la pose au-dessus.
	 * Les 55 px sont la hauteur de `.page-mobile-tabs`, affichée par le thème sous
	 * 768 px — la même borne que ce bloc.
	 */
	.page-has-mobile-tabs #sticky-product-bar {
		bottom: calc(55px + var(--gb-marge-basse, 0px));
	}

	/*
	 * Et sa position escamotée doit suivre.
	 *
	 * Le thème cache la barre en la faisant descendre de sa propre hauteur
	 * (`.sticky-product { transform: translateY(100%) }`), ce qui la sort tout
	 * juste de l'écran — mais seulement parce qu'il la pose à `bottom: 0`. Depuis
	 * qu'on la remonte au-dessus de la barre d'onglets, ces 100 % ne suffisent
	 * plus : il lui restait la hauteur des onglets à parcourir, et cette bande
	 * dépassait en bas de l'écran au chargement de la fiche, avant tout
	 * défilement. C'est ce ruban que l'on voyait, et non la barre « coupée ».
	 *
	 * On lui rend donc la distance qu'on lui a prise. Dès que le thème pose
	 * `.showing`, sa propre règle reprend la main et la barre remonte.
	 */
	.page-has-mobile-tabs #sticky-product-bar:not(.showing) {
		transform: translateY(calc(100% + 55px + var(--gb-marge-basse, 0px)));
	}
}

/* ================================================================
   8. La barre d'achat qui suit le défilement
   ================================================================
   Elle réapparaît dès que le bouton d'ajout au panier sort de l'écran — utile sur
   téléphone, où la fiche est longue. Le thème la livre avec un bouton noir : on lui
   donne le rose de la marque et on desserre la composition. */

#sticky-product-bar {
	border-top: 1px solid #efe4e9;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(10px);
	box-shadow: 0 -6px 24px rgba(21, 9, 17, 0.06);
}

#sticky-product-bar .sticky-product-thumbnail img {
	border-radius: 10px;
}

#sticky-product-bar .sticky-product-name {
	margin: 0 0 2px;
	font-size: 15px;
	font-weight: 600;
	color: #150911;
}

#sticky-product-bar .sticky-product-price {
	font-size: 15px;
	color: #150911;
}

#sticky-product-bar .sticky-product-price del {
	margin-right: 6px;
	font-size: 13.5px;
	color: #a4939c;
}

#sticky-product-bar .sticky-product-price ins {
	text-decoration: none;
	background: none;
	font-weight: 700;
}

#sticky-product-bar .sticky-product-add_to_cart_button {
	min-height: 48px;
	padding: 0 30px;
	border: 0;
	border-radius: 999px;
	background: #e5177b;
	color: #fff;
	font-size: 14.5px;
	font-weight: 600;
	transition: background-color 0.2s ease;
}

#sticky-product-bar .sticky-product-add_to_cart_button:hover,
#sticky-product-bar .sticky-product-add_to_cart_button:focus {
	background: #c0135a;
	color: #fff;
}

#sticky-product-bar .sticky-product-bar-close {
	color: #a4939c;
	transition: color 0.2s ease;
}

#sticky-product-bar .sticky-product-bar-close:hover {
	color: #150911;
}