/**
 * KINGSEVEN 2026 — Fiche produit
 */

/* ==================================================================
 * Structure : galerie ~60 %, informations ~40 % (cahier des charges §13)
 * ================================================================== */
.ks-single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
	gap: clamp(1.5rem, 3vw, 3.5rem);
	align-items: start;
}

/*
 * Le bloc d'achat n'est PAS collant.
 *
 * Il l'a ete, pour rester visible pendant qu'on parcourt la galerie. Mais un
 * element de grille en `position: sticky` devrait etre contraint a sa cellule,
 * et Chrome le contraint en pratique au conteneur de grille entier : le bloc
 * restait donc epingle pendant que la section details — qui s'etend sur toute
 * la largeur — defilait dessous, et le prix, les variations et le bouton
 * d'achat se superposaient a la description et aux caracteristiques.
 *
 * Constate en production le 2026-09-20. Le borner proprement demanderait
 * d'encapsuler galerie et bloc d'achat dans un conteneur a eux, donc de
 * surcharger content-single-product.php de WooCommerce. Les maquettes ne
 * demandent pas de bloc collant, et la barre d'achat collante de mobile couvre
 * deja le besoin : on retire.
 */

/*
 * Piège classique de CSS Grid : un élément de grille a `min-width: auto`, donc
 * il refuse de devenir plus étroit que son contenu. La piste défilante de la
 * galerie mesure quatre fois la largeur d'une image : sans cette règle, elle
 * élargit sa colonne et fait déborder toute la page horizontalement sur
 * mobile. `min-width: 0` autorise la colonne à se contenter de la place
 * disponible, le débordement restant géré par le défilement interne.
 */
.ks-single-product div.product > * {
	min-width: 0;
}

/* Les sections pleine largeur sortent de la grille à deux colonnes. */
.ks-single-product div.product > .ks-lifestyle,
.ks-single-product div.product > .ks-details,
.ks-single-product div.product > .related,
.ks-single-product div.product > .upsells {
	grid-column: 1 / -1;
}

@media (max-width: 1023px) {
	.ks-single-product div.product {
		grid-template-columns: 1fr;
	}

	.ks-single-product div.product .summary {
		position: static;
	}
}

/* ==================================================================
 * Galerie
 * ================================================================== */
.ks-gallery {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: var(--ks-space-4);
	align-items: start;
}

/* Même raison que ci-dessus : la piste défilante ne doit pas dicter la
   largeur de la colonne qui la contient. */
.ks-gallery > * {
	min-width: 0;
}

/* --- Miniatures -------------------------------------------------- */
.ks-gallery__thumbs {
	display: grid;
	gap: var(--ks-space-2);
	max-height: 620px;
	overflow-y: auto;
	scrollbar-width: thin;
}

.ks-gallery__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--ks-border);
	border-radius: var(--ks-radius-sm);
	overflow: hidden;
	background: var(--ks-bg-media);
	transition: border-color var(--ks-duration-fast) var(--ks-ease);
}

.ks-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ks-gallery__thumb:hover {
	border-color: var(--ks-gray-600);
}

.ks-gallery__thumb.is-active {
	border-color: var(--ks-black);
	border-width: 2px;
}

/* --- Image principale -------------------------------------------- */
.ks-gallery__main {
	position: relative;
	border-radius: var(--ks-radius);
	overflow: hidden;
	background: var(--ks-bg-media);
}

/*
 * Piste défilante horizontale.
 *
 * Le défilement avec accrochage remplace tout carrousel JavaScript : le
 * balayage tactile, l'inertie et l'accessibilité clavier sont natifs, et il n'y
 * a aucun état à synchroniser si le script ne se charge pas.
 */
.ks-gallery__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.ks-gallery__track::-webkit-scrollbar {
	display: none;
}

.ks-gallery__slide {
	scroll-snap-align: center;
	margin: 0;
	aspect-ratio: 4 / 3;
}

.ks-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Contrôles --------------------------------------------------- */
.ks-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	opacity: 0;
	transition: opacity var(--ks-duration) var(--ks-ease);
}

.ks-gallery__nav--prev {
	left: var(--ks-space-3);
}

.ks-gallery__nav--next {
	right: var(--ks-space-3);
}

/* Les flèches n'apparaissent qu'à l'approche : elles n'encombrent pas la
   photographie le reste du temps. Le focus clavier les révèle aussi. */
.ks-gallery__main:hover .ks-gallery__nav,
.ks-gallery__nav:focus-visible {
	opacity: 1;
}

.ks-gallery__expand {
	position: absolute;
	top: var(--ks-space-3);
	right: var(--ks-space-3);
	z-index: 2;
}

.ks-gallery__counter {
	position: absolute;
	right: var(--ks-space-3);
	bottom: var(--ks-space-3);
	z-index: 2;
	margin: 0;
	padding: 4px var(--ks-space-3);
	border-radius: var(--ks-radius-pill);
	background: rgba(255, 255, 255, 0.92);
	font-size: var(--ks-text-xs);
	font-weight: var(--ks-weight-medium);
}

@media (max-width: 767px) {
	/* Maquette mobile : grande image, puis bande de miniatures dessous. */
	.ks-gallery {
		grid-template-columns: 1fr;
	}

	.ks-gallery__thumbs {
		order: 2;
		grid-auto-flow: column;
		grid-auto-columns: 72px;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
	}

	.ks-gallery__thumbs::-webkit-scrollbar {
		display: none;
	}

	.ks-gallery__nav {
		opacity: 1;
	}
}

/* ==================================================================
 * Bloc d'information
 * ================================================================== */
.ks-product__title {
	margin-bottom: var(--ks-space-2);
	font-size: var(--ks-text-2xl);
}

.ks-product__tagline {
	margin-bottom: var(--ks-space-4);
	font-size: var(--ks-text-md);
	color: var(--ks-text-muted);
}

.ks-product__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ks-space-3) var(--ks-space-5);
	margin-bottom: var(--ks-space-5);
}

.ks-product__rating-link:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.ks-stock {
	display: inline-flex;
	align-items: center;
	gap: var(--ks-space-2);
	margin: 0;
	font-size: var(--ks-text-sm);
	font-weight: var(--ks-weight-medium);
}

.ks-stock--in {
	color: var(--ks-green);
}

.ks-stock--out {
	color: var(--ks-text-muted);
}

.ks-product__price {
	align-items: center;
	gap: var(--ks-space-3);
	margin-bottom: var(--ks-space-6);
	font-size: var(--ks-text-xl);
}

.ks-product__price del {
	font-size: var(--ks-text-md);
}

.ks-product__price ins {
	text-decoration: none;
}

/* ==================================================================
 * Variations
 * ================================================================== */
.woocommerce-variation-add-to-cart,
.variations_form .variations {
	margin-bottom: var(--ks-space-5);
}

.variations_form table.variations {
	width: 100%;
	border: 0;
}

.variations_form table.variations th,
.variations_form table.variations td {
	display: block;
	padding: 0;
	text-align: left;
	border: 0;
}

.variations_form table.variations th label {
	display: block;
	margin-bottom: var(--ks-space-2);
	font-size: var(--ks-text-sm);
	font-weight: var(--ks-weight-medium);
}

.variations_form .reset_variations {
	display: inline-block;
	margin-top: var(--ks-space-2);
	font-size: var(--ks-text-sm);
	color: var(--ks-text-muted);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Prix et disponibilité de la variation choisie. */
.woocommerce-variation-price {
	margin-bottom: var(--ks-space-4);
	font-size: var(--ks-text-lg);
	font-weight: var(--ks-weight-semibold);
}

.woocommerce-variation-availability {
	margin-bottom: var(--ks-space-4);
	font-size: var(--ks-text-sm);
}

/* ==================================================================
 * Ajout au panier
 * ================================================================== */
.ks-atc {
	display: flex;
	align-items: stretch;
	gap: var(--ks-space-3);
	margin-block: var(--ks-space-5);
}

.single_add_to_cart_button {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ks-space-2);
	min-height: 54px;
	padding: var(--ks-space-4) var(--ks-space-8);
	background: var(--ks-black);
	color: var(--ks-white);
	border: 0;
	border-radius: var(--ks-radius-sm);
	font-size: var(--ks-text-base);
	font-weight: var(--ks-weight-semibold);
	text-transform: none;
	cursor: pointer;
	transition: background-color var(--ks-duration-fast) var(--ks-ease);
}

.single_add_to_cart_button:hover {
	background: #000;
}

.single_add_to_cart_button.disabled,
.single_add_to_cart_button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.ks-atc__wishlist {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 54px;
	border: 1px solid var(--ks-border);
	border-radius: var(--ks-radius-sm);
}

.ks-atc__wishlist:hover {
	border-color: var(--ks-black);
}

/*
 * Bouton « liste d'envies » en double.
 *
 * Le theme place le bouton YITH a cote de l'ajout au panier, comme sur la
 * maquette. YITH en insere un second par son propre accrochage, en bas du bloc
 * d'achat : le client en voyait donc deux.
 *
 * On masque celui de YITH plutot que de le desaccrocher : le nom et la
 * priorite du hook changent d'une version de l'extension a l'autre, alors que
 * ce selecteur — un enfant direct du resume, donc pas celui que le theme place
 * dans .ks-atc — reste valable.
 */
.summary > .yith-wcwl-add-to-wishlist {
	display: none;
}

.ks-product__assurance {
	display: grid;
	gap: var(--ks-space-3);
	justify-items: center;
	margin-bottom: var(--ks-space-6);
}

.ks-product__shipping {
	display: flex;
	align-items: center;
	gap: var(--ks-space-2);
	margin: 0;
	font-size: var(--ks-text-sm);
	color: var(--ks-text-muted);
}

.ks-product__features {
	margin: var(--ks-space-6) 0;
	padding: var(--ks-space-6) 0;
	border-block: 1px solid var(--ks-border);
	list-style: none;
}

/* ==================================================================
 * Barre d'achat collante (mobile)
 * ================================================================== */
.ks-sticky-atc {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--ks-z-sticky);
	display: none;
	align-items: center;
	gap: var(--ks-space-4);
	padding: var(--ks-space-3) var(--ks-gutter);
	/* Barre de gestes iPhone : sans cette marge, le bouton passe dessous. */
	padding-bottom: calc(var(--ks-space-3) + env(safe-area-inset-bottom));
	background: var(--ks-white);
	border-top: 1px solid var(--ks-border);
	box-shadow: 0 -2px 16px rgba(17, 17, 17, 0.08);
	transform: translateY(110%);
	transition: transform var(--ks-duration-slow) var(--ks-ease);
}

.ks-sticky-atc.is-visible {
	transform: translateY(0);
}

.ks-sticky-atc__price {
	flex: none;
	font-size: var(--ks-text-md);
	font-weight: var(--ks-weight-semibold);
}

.ks-sticky-atc__btn {
	flex: 1 1 auto;
}

@media (max-width: 1023px) {
	.ks-sticky-atc {
		display: flex;
	}

	/* Réserve la hauteur de la barre pour ne masquer aucun contenu (§20). */
	body.ks-single-product {
		padding-bottom: var(--ks-sticky-atc-h);
	}
}

/* ==================================================================
 * Blocs lifestyle
 * ================================================================== */
.ks-lifestyle {
	margin-block: var(--ks-section-y);
}

.ks-lifestyle__grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: var(--ks-space-3);
}

.ks-lifestyle__item {
	position: relative;
	display: grid;
	grid-template-areas: 'stack';
	align-items: end;
	aspect-ratio: 4 / 3;
	border-radius: var(--ks-radius);
	overflow: hidden;
	background: var(--ks-bg-media);
}

.ks-lifestyle__item--lead {
	aspect-ratio: 16 / 9;
}

.ks-lifestyle__img,
.ks-lifestyle__scrim,
.ks-lifestyle__content {
	grid-area: stack;
	align-self: stretch;
}

.ks-lifestyle__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ks-lifestyle__scrim {
	background: linear-gradient(180deg, rgba(17, 17, 17, 0.05) 30%, rgba(17, 17, 17, 0.72) 100%);
}

.ks-lifestyle__content {
	align-self: end;
	position: relative;
	z-index: 2;
	padding: var(--ks-space-5);
	color: var(--ks-white);
}

.ks-lifestyle__title {
	margin-bottom: var(--ks-space-4);
	color: var(--ks-white);
	font-size: var(--ks-text-xl);
	line-height: 1.1;
}

.ks-lifestyle__subtitle {
	margin-bottom: var(--ks-space-1);
	color: var(--ks-white);
	font-size: var(--ks-text-md);
}

.ks-lifestyle__text {
	margin: 0;
	font-size: var(--ks-text-sm);
	line-height: var(--ks-leading-snug);
	color: rgba(255, 255, 255, 0.9);
}

.ks-lifestyle__item--lead .ks-lifestyle__text {
	margin-bottom: var(--ks-space-5);
}

@media (max-width: 1023px) {
	.ks-lifestyle__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ks-lifestyle__item--lead {
		grid-column: 1 / -1;
	}
}

/* ==================================================================
 * Détails : description, caractéristiques, dimensions, avis
 * ================================================================== */
.ks-details {
	margin-block: var(--ks-section-y);
}

.ks-details__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ks-space-10) var(--ks-space-8);
	margin-top: var(--ks-space-8);
	align-items: start;
}

.ks-details__block--wide {
	grid-column: 1 / -1;
}

.ks-details__title {
	margin-bottom: var(--ks-space-4);
	font-size: var(--ks-text-lg);
}

/* Sur desktop, le titre est un simple intitulé : la navigation se fait par
   les onglets-ancres, l'accordéon n'a pas lieu d'être. */
.ks-details__title .ks-accordion__trigger {
	display: none;
}

.ks-details__bullets {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ks-space-3);
	margin-top: var(--ks-space-6);
	padding: 0;
	list-style: none;
}

.ks-details__bullets li {
	display: flex;
	align-items: center;
	gap: var(--ks-space-3);
	font-size: var(--ks-text-sm);
}

/* --- Tableau de caractéristiques --------------------------------- */
.ks-specs th,
.ks-specs td {
	padding: var(--ks-space-3) 0;
	border-bottom: 1px solid var(--ks-border);
	font-size: var(--ks-text-sm);
	text-align: left;
	vertical-align: top;
}

.ks-specs th {
	font-weight: var(--ks-weight-regular);
	color: var(--ks-text-muted);
	width: 55%;
}

.ks-specs td {
	font-weight: var(--ks-weight-medium);
	color: var(--ks-black);
}

.ks-dimensions__img {
	width: 100%;
	height: auto;
	border-radius: var(--ks-radius);
}

@media (max-width: 1023px) {
	/*
	 * Bascule en accordéons : les titres redeviennent des boutons, les
	 * panneaux se replient. Le contenu est strictement le même.
	 *
	 * Le seuil est le même que celui de la fiche produit (1023 px) : dès que
	 * la page passe sur une colonne, trois colonnes de détails deviennent
	 * illisibles et le tableau de caractéristiques déborde.
	 */
	.ks-details__grid {
		display: block;
		border-top: 1px solid var(--ks-border);
		margin-top: var(--ks-space-6);
	}

	.ks-details__block {
		border-bottom: 1px solid var(--ks-border);
	}

	.ks-details__title {
		margin: 0;
	}

	.ks-details__title .ks-accordion__trigger {
		display: flex;
	}

	.ks-details__title .ks-details__heading {
		display: none;
	}

	.ks-details__bullets {
		grid-template-columns: 1fr;
	}

	.ks-specs th {
		width: 50%;
	}
}

/* ==================================================================
 * Avis WooCommerce
 * ================================================================== */
#reviews .commentlist {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--ks-space-6);
}

/*
 * Disposition d'un avis : flex, pas grid.
 *
 * WooCommerce met en page ses avis avec un flottant et une `margin-left: 50px`
 * sur le texte. Une grille par-dessus entrait en conflit : le bloc de texte se
 * retrouvait dimensionne sur son contenu minimum, soit 31 px de large. Le
 * texte s'enroulait alors quasiment caractere par caractere, et une fiche a 17
 * avis produisait une section de 45 000 pixels de haut.
 *
 * Constate en production le 2026-09-20. En flex, le texte occupe la place
 * restante et la meme section retombe a environ 3 600 px.
 */
#reviews .comment_container {
	display: flex;
	align-items: flex-start;
	gap: var(--ks-space-4);
}

#reviews .comment-text {
	flex: 1 1 auto;
	/* Sans min-width, un mot long ou une URL collee elargit le bloc au-dela
	   de la place disponible. */
	min-width: 0;
	overflow-wrap: break-word;
	/* Neutralise le decalage prevu par WooCommerce pour son flottant. */
	margin-left: 0;
}

#reviews .avatar {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: var(--ks-radius-pill);
}

/* Photos jointes par les clients : vignettes alignees, pas des images pleine
   largeur empilees. */
#reviews .description img {
	display: inline-block;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--ks-radius-sm);
	margin: var(--ks-space-2) var(--ks-space-2) 0 0;
}

#reviews .woocommerce-review__author {
	font-weight: var(--ks-weight-semibold);
	color: var(--ks-black);
}

#reviews .woocommerce-review__published-date {
	display: block;
	font-size: var(--ks-text-xs);
	color: var(--ks-text-muted);
}

#reviews .description {
	margin-top: var(--ks-space-2);
	font-size: var(--ks-text-sm);
	line-height: var(--ks-leading-relaxed);
}

#review_form_wrapper {
	margin-top: var(--ks-space-10);
	padding-top: var(--ks-space-8);
	border-top: 1px solid var(--ks-border);
}

#review_form .comment-form-rating .stars a {
	color: var(--ks-gold);
}

/* ==================================================================
 * Miniatures de variation
 * ================================================================== */

/*
 * Priorité sur WooCommerce.
 *
 * `woocommerce.css` cible ses boutons avec des sélecteurs à deux classes
 * (« .woocommerce button.button »). Une classe seule ne suffit donc pas à
 * reprendre la main : on égale sa spécificité plutôt que de recourir à
 * !important, qui rendrait toute surcharge ultérieure impossible.
 */
.woocommerce button.single_add_to_cart_button,
.woocommerce div.product form.cart button.single_add_to_cart_button {
	background: var(--ks-black);
	color: var(--ks-white);
	border-radius: var(--ks-radius-sm);
	font-size: var(--ks-text-base);
	font-weight: var(--ks-weight-semibold);
	padding: var(--ks-space-4) var(--ks-space-8);
}

.woocommerce button.single_add_to_cart_button:hover {
	background: #000;
	color: var(--ks-white);
}

/*
 * Liste déroulante remplacée par les miniatures.
 *
 * `display: none` plutôt qu'un masquage hors écran : un `<tr>` en
 * position absolue n'a pas de comportement défini, et il continuait de
 * dicter la largeur du tableau — 16 px de débordement à 320 px.
 *
 * Le champ reste dans le document et reste soumis avec le formulaire ; le
 * script de variations de WooCommerce lit sa valeur, qu'il soit affiché ou
 * non. Ce sont les miniatures qui portent l'accessibilité (role radiogroup,
 * navigation aux flèches), et elles ne sont révélées que si le JavaScript
 * s'exécute — sinon la liste déroulante reste visible et fonctionnelle.
 */
.ks-variation-row--replaced {
	display: none;
}

.ks-swatches {
	margin-bottom: var(--ks-space-5);
}

.ks-swatches[hidden] {
	display: none;
}

.ks-swatches__label {
	margin-bottom: var(--ks-space-3);
	font-size: var(--ks-text-sm);
}

.ks-swatches__name {
	color: var(--ks-text-muted);
}

.ks-swatches__value {
	font-weight: var(--ks-weight-semibold);
	color: var(--ks-black);
}

.ks-swatches__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ks-space-3);
}

.ks-swatch {
	width: 72px;
	height: 60px;
	padding: 3px;
	border: 1px solid var(--ks-border);
	border-radius: var(--ks-radius-sm);
	background: var(--ks-bg-media);
	overflow: hidden;
	transition: border-color var(--ks-duration-fast) var(--ks-ease);
}

.ks-swatch img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 2px;
}

.ks-swatch:hover {
	border-color: var(--ks-gray-600);
}

.ks-swatch.is-active {
	border-color: var(--ks-black);
	border-width: 2px;
	padding: 2px;
}

/* Variante sans image : la valeur s'affiche en toutes lettres. */
.ks-swatch--text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: 44px;
	padding-inline: var(--ks-space-4);
	background: var(--ks-white);
	font-size: var(--ks-text-sm);
	font-weight: var(--ks-weight-medium);
}

/* ==================================================================
 * Produits similaires
 * ==================================================================
 *
 * La grille elle-même (`ul.products`) est définie dans 02-layout.css : elle
 * sert aussi la boutique, les catégories et la recherche. On ne garde ici que
 * l'espacement propre à la fiche produit.
 */
.related.products,
.upsells.products {
	margin-block: var(--ks-section-y);
}

.related.products > h2,
.upsells.products > h2 {
	margin-bottom: var(--ks-space-8);
	font-size: var(--ks-text-xl);
}

/* ------------------------------------------------------------------
 * Tableau de variations sur très petit écran
 *
 * `table.variations` prend la largeur de son contenu : la liste déroulante
 * native de WooCommerce, dont les libellés sont longs, la faisait dépasser de
 * 16 px à 320 px. `table-layout: fixed` lui impose la largeur disponible, et
 * la liste s'y conforme.
 * ------------------------------------------------------------------ */
.variations_form table.variations {
	table-layout: fixed;
	max-width: 100%;
}

.variations_form table.variations select {
	max-width: 100%;
}