/**
 * Fiche produit.
 *
 * Presque tout ici est de la mise en forme : les blocs existent déjà, rendus
 * par WooCommerce, Kadence Pro, Alma et le child theme. Ce qui manquait était
 * la hiérarchie — tout était empilé au même poids typographique, la promesse
 * de livraison pesant autant que la mention « UGS ».
 *
 * Règle tenue dans tout le fichier : un seul bloc porte un fond, celui de la
 * disponibilité. Tout le reste est séparé par des filets. Border, fond et
 * ombre sont dépensés par rôle, pas distribués partout.
 */

/* =========================================================================
   1. Mise en page
   ========================================================================= */

/* La grille porte sur un conteneur dédié, ouvert par `cristime_product_top_open()`,
   et non sur `div.product` : ce dernier contient aussi les onglets et les
   suggestions, et Chrome contraint un élément collant à son conteneur de
   grille entier, pas à sa rangée. La galerie passait donc par-dessus les
   onglets. */
.single-product .site .cristime-product-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 452px;
	gap: 46px;
	align-items: start;
}

.single-product .site .cristime-product-top > .woocommerce-product-gallery,
.single-product .site .cristime-product-top > .summary {
	/* WooCommerce impose width: 48% aux deux colonnes. Dans une grille ce
	   pourcentage se calcule sur la cellule, et chaque colonne n'occupait plus
	   que la moitié de sa place. */
	width: 100%;
	max-width: none;
	float: none;
}

/* La colonne d'achat est plus haute que la galerie : le visuel suit le
   défilement au lieu de laisser un vide sous lui. `top` dégage le header,
   qui est sticky et se rétracte au scroll.
   ⚠️ Sélecteur volontairement lourd : `woocommerce.min.css` impose
   `position: relative` via `.woocommerce div.product div.images.woocommerce-product-gallery`,
   qui l'emportait d'un élément. */
body.single-product .site .cristime-product-top > div.images.woocommerce-product-gallery {
	position: sticky;
	top: 96px;
	align-self: start;
	margin-bottom: 0;
}

body.cristime-scrolled.single-product .site .cristime-product-top > div.images.woocommerce-product-gallery {
	top: 76px;
}

/* =========================================================================
   2. Galerie : vignettes en rail vertical
   ========================================================================= */

body.single-product .site .cristime-product-top div.images.woocommerce-product-gallery {
	display: grid;
	grid-template-columns: 70px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
}

body.single-product .site .cristime-product-top div.images.woocommerce-product-gallery .flex-viewport,
body.single-product .site .cristime-product-top div.images.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
	grid-column: 2;
	grid-row: 1;
	border: 1px solid var(--cristime-line);
	background: #fff;
	margin: 0;
}

body.single-product .site .cristime-product-top div.images.woocommerce-product-gallery .flex-control-thumbs {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: 9px;
	/* ⚠️ WooCommerce remonte le rail de 32 px, le décale de `left: 50%` et
	   compense au `transform`, pour la disposition horizontale d'origine sous
	   l'image. Il faut neutraliser les trois : ne retirer que le `transform`
	   laisse le `left`, et le rail part à la moitié de la galerie — c'est ce
	   qui faisait déborder la page sur téléphone. */
	position: relative;
	left: auto;
	transform: none;
	margin: 0;
	padding: 0;
	max-width: none;
	justify-content: flex-start;
	overflow: visible;
	list-style: none;
}

body.single-product .site .cristime-product-top div.images.woocommerce-product-gallery .flex-control-thumbs li {
	width: 100%;
	margin: 0;
	float: none;
}

body.single-product .site .cristime-product-top div.images.woocommerce-product-gallery .flex-control-thumbs img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border: 1px solid var(--cristime-border);
	background: #fff;
	padding: 3px;
	opacity: 1;
	transition: border-color .15s ease;
}

body.single-product .site .cristime-product-top div.images.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
body.single-product .site .cristime-product-top div.images.woocommerce-product-gallery .flex-control-thumbs img:hover {
	border-color: var(--cristime-accent-dark);
	box-shadow: inset 0 0 0 1px var(--cristime-accent-dark);
}

/* Une seule photo : le rail n'a plus de raison d'être. 205 produits en stock
   sont dans ce cas. */
.single-product .woocommerce-product-gallery:not(.gallery-has-thumbnails) {
	grid-template-columns: minmax(0, 1fr);
}

.single-product .woocommerce-product-gallery:not(.gallery-has-thumbnails) .flex-viewport,
.single-product .woocommerce-product-gallery:not(.gallery-has-thumbnails) > .woocommerce-product-gallery__wrapper {
	grid-column: 1;
}

.single-product .woocommerce-product-gallery__trigger {
	z-index: 2;
}

/* =========================================================================
   3. Colonne d'achat : en-tête
   ========================================================================= */

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

/*
 * ⚠️ Ne pas réordonner cette colonne en CSS. Un `display: flex` + `order`
 * paraît tentant, mais tout enfant non ordonné reste à `order: 0` et remonte
 * donc en tête : le bouton PayPal et les champs cachés de WooCommerce se
 * retrouvaient au-dessus du nom de la marque. L'ordre vient des priorités de
 * hooks, dans inc/product-summary.php, et c'est là qu'il doit se régler.
 */

.single-product .cristime-product-brand {
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cristime-muted);
	font-weight: 600;
	text-decoration: none;
	margin-bottom: 10px;
}

.single-product .cristime-product-brand:hover {
	color: var(--cristime-accent-dark);
}

body.single-product .site div.product h1.product_title {
	/* Les capitales forcées cassent la reconnaissance des mots et allongent
	   la ligne : les références produit font déjà des titres longs. */
	text-transform: none;
	font-size: 28px;
	line-height: 1.2;
	font-weight: 600;
	margin: 0 0 7px;
	text-wrap: balance;
}

.single-product .cristime-product-ref {
	font-size: 12.5px;
	color: var(--cristime-muted);
	margin: 0 0 12px;
	font-variant-numeric: tabular-nums;
}

.single-product .cristime-product-ref span {
	letter-spacing: .02em;
}

/* Note et avis */
.single-product .cristime-product-rating {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	margin-bottom: 16px;
}

.single-product .cristime-stars {
	position: relative;
	display: inline-block;
	width: 5.4em;
	height: 1em;
	line-height: 1;
	font-size: 15px;
	color: #dcd5cb;
}

.single-product .cristime-stars::before,
.single-product .cristime-stars__on::before {
	content: "★★★★★";
	letter-spacing: 2px;
	white-space: nowrap;
}

.single-product .cristime-stars__on {
	position: absolute;
	inset: 0;
	overflow: hidden;
	color: #e0a01f;
}

.single-product .cristime-product-rating b {
	font-weight: 600;
}

.single-product .cristime-product-rating a {
	color: var(--cristime-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.single-product .cristime-product-rating a:hover {
	color: var(--cristime-ink);
}

/* Prix */
.single-product div.product .summary > p.price {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.01em;
	margin: 0 0 4px;
	color: var(--cristime-ink);
	font-variant-numeric: tabular-nums;
}

.single-product div.product .summary > p.price del {
	font-size: .56em;
	font-weight: 400;
	color: var(--cristime-muted);
	margin-right: .3em;
	opacity: 1;
}

.single-product div.product .summary > p.price ins {
	text-decoration: none;
}

/* Badge de code promo, rendu par un snippet en base */
.single-product .cristime-promo-badge {
	margin: 12px 0 0;
}

/* Description courte : c'est la vraie description du produit, renseignée sur
   884 fiches en stock sur 887, alors que la description longue manque sur
   plus d'un tiers d'entre elles. */
.single-product .woocommerce-product-details__short-description {
	color: var(--cristime-muted);
	font-size: 14px;
	line-height: 1.6;
	margin: 14px 0 20px;
}

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

/* =========================================================================
   4. Bloc de disponibilité — le seul bloc avec un fond
   ========================================================================= */

.cristime-avail {
	border: 1px solid var(--cristime-avail-line, #cfe2d6);
	background: var(--cristime-avail-bg, #f0f5f2);
	padding: 15px 17px;
	display: grid;
	gap: 11px;
	margin-bottom: 18px;
}

.cristime-avail--out {
	--cristime-avail-line: var(--cristime-border);
	--cristime-avail-bg: var(--cristime-surface);
}

.single-product .cristime-avail__row {
	display: grid;
	grid-template-columns: 19px 1fr;
	gap: 11px;
	align-items: start;
	margin: 0;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--cristime-ink);
}

.cristime-avail__icon {
	width: 18px;
	height: 18px;
	margin-top: 1px;
	flex: 0 0 auto;
}

.single-product .cristime-avail__row--stock {
	color: var(--cristime-stock, #2f6b4f);
	font-weight: 600;
	font-size: 14px;
}

.cristime-avail--out .cristime-avail__row--stock {
	color: var(--cristime-promo);
}

.cristime-avail__free {
	color: var(--cristime-stock, #2f6b4f);
	font-weight: 600;
}

.cristime-avail__sub {
	display: block;
	color: var(--cristime-muted);
	font-size: 12.5px;
	margin-top: 1px;
	font-weight: 400;
}

.cristime-avail__phone {
	display: block;
	font-family: var(--global-heading-font-family);
	font-size: 17px;
	font-weight: 700;
	margin-top: 3px;
	text-decoration: none;
	color: var(--cristime-ink);
}

.cristime-avail__phone:hover {
	color: var(--cristime-accent-dark);
}

/* =========================================================================
   5. Alma, bouton d'achat, favoris
   ========================================================================= */

/* Le widget Alma porte déjà sa propre boîte : en ajouter une autour donnait
   deux rectangles emboîtés. On habille la sienne, dont la classe
   `.alma-payment-plans-container` est stable (les autres sont hachées et
   changent à chaque version du plugin). */
.single-product .alma-product-eligibility {
	margin: 0 0 18px;
}

.single-product .alma-payment-plans-container {
	border: 1px solid var(--cristime-border);
	border-radius: 0;
	padding: 12px 14px;
}

.single-product div.product form.cart {
	display: flex;
	align-items: stretch;
	gap: 10px;
	margin-bottom: 20px;
}

/* ⚠️ Trois éléments sur la rangée quand le produit a plus d'un exemplaire en
   stock : quantité 113 + bouton + cœur 54 + deux écarts dépassaient la
   colonne de 452, et le cœur retombait seul à la ligne suivante. En `nowrap`
   le bouton rétrécit à la place — encore faut-il lever le `min-width: auto`
   implicite des éléments flex, qui l'empêche de descendre sous la largeur de
   son texte. */
body.single-product .site div.product form.cart {
	/* On reste en `wrap`, mais le bouton porte une base de 0 : sa taille
	   hypothétique ne fait donc jamais déborder la ligne, et seul le lien
	   « Voir le panier » va à la ligne suivante. */
	flex-wrap: wrap;
}

/*
 * Après un ajout au panier, WooCommerce insère un lien « Voir le panier »
 * dans le formulaire, juste après le bouton. Sans traitement il devenait un
 * quatrième élément de la rangée et écrasait le bouton d'achat sur trois
 * lignes.
 *
 * ⚠️ C'est le SEUL élément du formulaire à porter un `order`. C'est ce qui
 * rend la chose sûre : tous les autres restent à `order: 0` et conservent
 * l'ordre du DOM, y compris ceux qu'une extension ajouterait plus tard.
 * Ordonner une partie des enfants seulement est le piège inverse, déjà
 * rencontré sur cette colonne.
 */
body.single-product .site div.product form.cart .added_to_cart {
	order: 1;
	flex: 1 0 100%;
	margin: 0;
	padding: 13px;
	border: 1px solid var(--cristime-border);
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	color: var(--cristime-ink);
}

body.single-product .site div.product form.cart .added_to_cart:hover {
	border-color: var(--cristime-accent-dark);
	color: var(--cristime-accent-dark);
}

body.single-product .site div.product form.cart .quantity {
	flex: 0 0 auto;
	margin: 0;
}

/* ⚠️ WooCommerce pose un clearfix `::before` / `::after` en `display: table`
   sur le formulaire. Inoffensif en flux, ce sont deux éléments flex de
   largeur nulle une fois la rangée passée en flex : chacun consommait un
   `gap`, et le bouton se retrouvait décalé de 10 px à chaque extrémité.
   Même piège que sur les `li` du mini-panier. */
/* ⚠️ À spécificité égale c'est `woocommerce.min.css` qui gagne, étant chargé
   après : il faut un cran de plus, pas une règle équivalente. */
body.single-product .site div.product form.cart::before,
body.single-product .site div.product form.cart::after {
	content: none;
}

.single-product div.product form.cart .quantity {
	flex: 0 0 auto;
}

/* ⚠️ `woocommerce.min.css` impose au bouton « width: 70%, height: 50px,
   line-height: 50px, font-size: 125% » via
   `.kadence-cart-button-medium-large.woocommerce div.product .button.single_add_to_cart_button`,
   soit 5 classes. Le bouton ne remplissait donc pas sa rangée et restait
   surdimensionné. Sélecteur calibré pour passer devant. */
body.single-product .site div.product form.cart button.single_add_to_cart_button {
	flex: 1 1 0%;
	width: auto;
	height: auto;
	min-height: 0;
	min-width: 0;
	line-height: 1.25;
	padding: 17px 20px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .02em;
	border-radius: 0;
}

/* Favoris : un carré à côté du bouton, plus un appel à l'action concurrent.
   ⚠️ L'icône du plugin est un pseudo-élément de police d'icônes, pas un SVG :
   il lui faut un `line-height: 1` explicite pour ne pas se décaler. */
body.single-product .site div.product form.cart .tinv-wraper {
	flex: 0 0 54px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--cristime-border);
	margin: 0;
}

.single-product div.product form.cart .tinv-wraper a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	line-height: 1;
	margin: 0;
	padding: 0;
	color: var(--cristime-ink);
}

.single-product div.product form.cart .tinv-wraper a:hover {
	color: var(--cristime-accent-dark);
}

.single-product div.product form.cart .tinvwl_add_to_wishlist-text,
.single-product div.product form.cart .tinvwl_remove_from_wishlist-text {
	display: none;
}

/* =========================================================================
   6. Réassurance et moyens de paiement (Kadence Pro)
   ========================================================================= */

.single-product .single-product-extras {
	border-top: 1px solid var(--cristime-line);
	padding-top: 16px;
	margin-bottom: 16px;
	font-size: 13px;
}

.single-product .single-product-extras ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.single-product .single-product-extras li {
	margin: 0;
}

.single-product .single-product-payments {
	border: 0;
	border-top: 1px solid var(--cristime-line);
	padding: 14px 0 0;
	margin: 0 0 14px;
}

.single-product .single-product-payments legend {
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cristime-muted);
	padding: 0;
	margin-bottom: 8px;
}

.single-product div.product .product_meta {
	border-top: 1px solid var(--cristime-line);
	padding-top: 13px;
	font-size: 12px;
	color: var(--cristime-muted);
	display: grid;
	gap: 3px;
}

/* =========================================================================
   7. Onglets et suggestions
   ========================================================================= */

body.single-product .site div.product .woocommerce-tabs {
	margin-top: 34px;
	/* Kadence encadre le bloc d'onglets (visible surtout sur téléphone).
	   Notre mise en forme ne garde qu'un filet sous la barre d'onglets. */
	border: 0;
	border-radius: 0;
	padding: 0;
	background: none;
	box-shadow: none;
}

body.single-product .site div.product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 30px;
	margin: 0;
	padding: 0 0 0 0;
	border-bottom: 1px solid var(--cristime-line);
}

body.single-product .site div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

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

body.single-product .site div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 16px 0;
	border-bottom: 2px solid transparent;
	font-size: 14px;
	font-weight: 500;
	color: var(--cristime-muted);
	text-decoration: none;
}

body.single-product .site div.product .woocommerce-tabs ul.tabs li.active a,
body.single-product .site div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--cristime-ink);
	font-weight: 600;
	border-bottom-color: var(--cristime-accent-dark);
}

body.single-product .site div.product .woocommerce-tabs .panel {
	padding: 26px 0 8px;
	max-width: 78ch;
	line-height: 1.65;
}

.single-product .related > h2,
.single-product .up-sells > h2 {
	font-size: 19px;
	font-weight: 600;
	margin: 0 0 18px;
}

/* =========================================================================
   8. Mobile
   ========================================================================= */

@media (max-width: 1024px) {
	.single-product .site .cristime-product-top {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}

	/* Le sticky n'a plus d'objet sur une colonne unique, et il collerait la
	   galerie sous le header pendant toute la lecture. */
	body.single-product .site .cristime-product-top > div.images.woocommerce-product-gallery {
		position: static;
	}

	body.single-product .site .cristime-product-top div.images.woocommerce-product-gallery {
		grid-template-columns: minmax(0, 1fr);
	}

	body.single-product .site .cristime-product-top div.images.woocommerce-product-gallery .flex-viewport,
	body.single-product .site .cristime-product-top div.images.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
		grid-column: 1;
		grid-row: 1;
	}

	body.single-product .site .cristime-product-top div.images.woocommerce-product-gallery .flex-control-thumbs {
		grid-column: 1;
		grid-row: 2;
		flex-direction: row;
		flex-wrap: wrap;
	}

	body.single-product .site .cristime-product-top div.images.woocommerce-product-gallery .flex-control-thumbs li {
		width: 62px;
	}

	body.single-product .site div.product h1.product_title {
		font-size: 21px;
	}

	/* 342 px de colonne : la quantité et le cœur se resserrent, et le bouton
	   allège son texte pour tenir sans rogner. */
	body.single-product .site div.product form.cart .quantity {
		flex: 0 0 96px;
		max-width: 96px;
	}

	body.single-product .site div.product form.cart .tinv-wraper {
		flex: 0 0 48px;
	}

	body.single-product .site div.product form.cart button.single_add_to_cart_button {
		padding: 16px 10px;
		font-size: 14px;
	}

	.single-product div.product .summary > p.price {
		font-size: 27px;
	}

	body.single-product .site div.product .woocommerce-tabs ul.tabs {
		gap: 18px;
		overflow-x: auto;
		flex-wrap: nowrap;
	}

	body.single-product .site div.product .woocommerce-tabs ul.tabs li a {
		white-space: nowrap;
		font-size: 13px;
	}
}

/* =========================================================================
   9. Fiche en rupture
   ========================================================================= */

/*
 * Sur un produit qu'on ne peut pas acheter, Kadence Pro continue d'afficher
 * « Envoi sous 48 h », « Livraison offerte à partir de 79 € » et les moyens de
 * paiement, et le snippet en base affiche son code promo. Trois promesses
 * qu'on ne peut pas tenir, sur la page que Google sert le plus souvent.
 *
 * ⚠️ Masqué en CSS faute de mieux : ces blocs sont accrochés par Kadence sous
 * forme de méthodes d'objet, qu'un `remove_action` ne sait pas viser sans
 * l'instance. À reprendre par le réglage Customizer si Kadence l'expose un
 * jour proprement.
 */
.single-product div.product.outofstock .single-product-extras,
.single-product div.product.outofstock .single-product-payments,
.single-product div.product.outofstock .cristime-promo-badge {
	display: none;
}

/* Les badges sont posés en absolu dans le coin haut gauche de la galerie,
   qui est désormais occupé par le rail de vignettes. On les décale de la
   largeur du rail plus son écart, pour qu'ils reviennent sur l'image. */
body.single-product .site .cristime-product-top div.images.woocommerce-product-gallery .cristime-badges,
body.single-product .site .cristime-product-top div.images.woocommerce-product-gallery .cristime-badge {
	left: 92px;
}

body.single-product .site .cristime-product-top div.images.woocommerce-product-gallery:not(.gallery-has-thumbnails) .cristime-badges,
body.single-product .site .cristime-product-top div.images.woocommerce-product-gallery:not(.gallery-has-thumbnails) .cristime-badge {
	left: 8px;
}

@media (max-width: 1024px) {
	body.single-product .site .cristime-product-top div.images.woocommerce-product-gallery .cristime-badges,
	body.single-product .site .cristime-product-top div.images.woocommerce-product-gallery .cristime-badge {
		left: 8px;
	}
}