/* ==========================================================================
   Fiche produit — lot 0.7.11-single-product-template
   Portee : contenu entre la navbar et le footer global. Header et footer non concernes.
   ========================================================================== */

/* --- Bloc principal : 1 colonne, puis 6/6 des 1024 px, puis 5/7 des 1280 px.
   Le MEME selecteur scope (#kna-main) est utilise a chaque palier : la
   disposition ne depend plus de l'ordre des feuilles ni de woocommerce.css. --- */
body.single-product #kna-main div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
	align-items: start;
	margin: 0 0 28px;
}

@media (min-width: 1024px) {
	body.single-product #kna-main div.product {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 32px;
	}
}

@media (min-width: 1280px) {
	body.single-product #kna-main div.product {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 40px;
	}
}

body.single-product div.product div.images,
body.single-product div.product div.summary {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
}

/* --- Galerie --- */
body.single-product div.product div.images img {
	border-radius: 12px;
	background: #ebece8;
}

body.single-product div.product div.images .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

body.single-product div.product div.images .flex-control-thumbs li {
	width: 84px;
	float: none;
	margin: 0;
}

body.single-product div.product div.images .flex-control-thumbs img {
	border: 2px solid #e5e7eb;
	border-radius: 8px;
	opacity: 1;
}

body.single-product div.product div.images .flex-control-thumbs img.flex-active,
body.single-product div.product div.images .flex-control-thumbs img:hover {
	border-color: #0e5c3a;
}

/* --- Colonne informations --- */
.kna-single__eyebrow {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #0e5c3a;
}

body.single-product #kna-main div.product .product_title {
	margin: 0 0 10px;
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	font-size: 34px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-transform: none;
	color: #0f172a;
}

body.single-product #kna-main .kna-single__ref {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.5;
	color: #475569;
}

body.single-product #kna-main .kna-single__ref-label {
	color: #64748b;
	font-weight: 400;
}

body.single-product #kna-main .kna-single__ref-value {
	color: #4b5563;
	font-weight: 400;
}

body.single-product #kna-main .kna-single__ref-item--marque .kna-single__ref-value {
	color: #0f172a;
	font-weight: 800;
}

/* Separateur emis uniquement entre deux elements reellement presents :
   aucune barre orpheline quand la reference ou la marque manque. */
body.single-product #kna-main .kna-single__ref-item + .kna-single__ref-item::before {
	content: "|";
	margin: 0 10px;
	color: #cbd5e1;
}

body.single-product div.product .woocommerce-product-details__short-description {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.6;
	color: #374151;
}

/* --- Grille d'informations produit --- */
body.single-product #kna-main .kna-single__info {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0 0 20px;
	padding: 16px;
	border: 1px solid #f3f4f6;
	border-radius: 12px;
	background: #fbfdfc;
}

body.single-product #kna-main .kna-single__info-row {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	font-size: 12px;
	color: #374151;
}

body.single-product #kna-main .kna-single__info-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	color: var(--kna-color-brand);
}

body.single-product #kna-main .kna-single__info-icon .kna-icon {
	width: 20px;
	height: 20px;
	stroke-width: 1.8;
}

.kna-single__info-label {
	color: #6b7280;
}

/* --- Conditionnement / variations --- */
body.single-product div.product .variations {
	width: 100%;
	margin: 0 0 14px;
	border-collapse: separate;
	border-spacing: 0 8px;
}

body.single-product div.product .variations th,
body.single-product div.product .variations td {
	padding: 0;
	border: 0;
	text-align: left;
	vertical-align: middle;
}

body.single-product div.product .variations select {
	width: 100%;
	max-width: 320px;
	min-height: 42px;
	padding: 8px 12px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	background: #fff;
}

/* --------------------------------------------------------------------------
   Boutons de conditionnement.
   Les options sont celles du <select> WooCommerce, qui reste la source de
   verite. Les boutons sont construits par le script a partir de ce select :
   sans JavaScript, la liste deroulante native reste visible et pleinement
   fonctionnelle.
   -------------------------------------------------------------------------- */
body.single-product #kna-main .kna-variations__buttons {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 8px;
}

/* Une option occupe 3 colonnes : 4 par ligne (7 options = 4 + 3, aucune case vide). */
body.single-product #kna-main .kna-variations__button {
	grid-column: span 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 44px;
	padding: 8px 10px;
	border: 1px solid #d1d5db;
	border-radius: 10px;
	background: #fff;
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #111827;
	text-align: center;
	cursor: pointer;
}

body.single-product #kna-main .kna-variations__button:hover {
	border-color: #0e5c3a;
}

body.single-product #kna-main .kna-variations__button:focus-visible {
	outline: 2px solid var(--kna-color-brand);
	outline-offset: 2px;
}

body.single-product #kna-main .kna-variations__button--active {
	border-color: #0e5c3a;
	background: #0e5c3a;
	color: #fff;
}

body.single-product #kna-main .kna-variations__button[disabled] {
	border-color: #e5e7eb;
	background: #f3f4f6;
	color: #9ca3af;
	cursor: not-allowed;
	text-decoration: line-through;
}

/* Masquage de la liste NATIVE, uniquement quand les boutons sont operationnels.
   Le <select> reste dans le DOM, focalisable et soumis : source de verite.
   La classe est posee sur le <select> lui-meme par le script, uniquement apres
   une construction reussie de ses boutons : aucune liste n'est masquee sans
   boutons exploitables. Sans JavaScript, la liste native reste affichee. */
body.single-product #kna-main .variations select.kna-variations__select--ready {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- Bloc Tarif pro --- */
body.single-product #kna-main .kna-tarif {
	margin: 16px 0 0;
	padding: 20px;
	border: 1px solid #d2ecd9;
	border-radius: 16px;
	background: #eef8f3;
}

/* Bloc Tarif pro place DANS le formulaire natif.
   Le formulaire devient une grille : les elements natifs (conditionnement,
   quantite, bouton panier, bouton devis eventuel) s'empilent comme avant et la
   boite occupe toute la largeur. Aucun element n'est deplace hors du
   formulaire ; `display: contents` n'est pas utilise. */
body.single-product div.product form.cart {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: start;
	gap: 12px;
}

body.single-product #kna-main form.cart .kna-tarif {
	grid-column: 1 / -1;
	width: 100%;
	min-width: 0;
	margin: 4px 0 0;
}

body.single-product #kna-main form.cart .kna-tarif[hidden] {
	display: none;
}

/* --------------------------------------------------------------------------
   CONTENANCE DE LA BOITE : LARGEUR PUIS HAUTEUR.
   Regles limitees au formulaire de VARIATIONS (`form.cart.variations_form`) :
   un produit simple, dont le formulaire n'a ni `.single_variation_wrap` ni barre
   d'ajout de variation, n'est concerne par aucune de ces regles.
   Le formulaire de variations est une grille dont les enfants sont en largeur
   automatique (`justify-items: start`). Le conteneur de variation
   `.single_variation_wrap` est l'enfant de grille : sans largeur explicite il se
   reduit a son contenu, et la boite — qui fait 100 % de ce conteneur — se reduit
   avec lui. On rend donc au conteneur la largeur de la colonne.
   Aucune hauteur n'est imposee : la hauteur reste celle du contenu.
   -------------------------------------------------------------------------- */
body.single-product #kna-main form.cart.variations_form .single_variation_wrap {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

/* La quantite et le bouton panier sont rendus DANS la boite, dans
   `.woocommerce-variation-add-to-cart`. La feuille du plugin aligne ces deux
   controles par FLOTTEMENT (`float` sur la quantite et sur le bouton) : un
   conteneur qui ne contient que des flottants n'a plus de hauteur propre, et les
   controles sortent alors par le bas de l'encart — c'est le debordement vertical.
   La feuille du theme applique deja ce traitement ailleurs (`woocommerce.css` :
   `ul.products li.product`, `.flex-control-thumbs li`, `.summary`) ; le
   formulaire panier n'y avait jamais ete traite, faute de boite autour de lui.
   Correction : la barre devient un conteneur flex, ou le flottement des enfants
   est ignore ; sa hauteur redevient celle de son contenu et la boite l'enveloppe.
   `overflow` n'est pas touche (rien n'est coupe) et aucune hauteur n'est fixee.
   `space-between` reproduit la disposition precedente — quantite a gauche,
   bouton panier a droite — et le retour a la ligne garde les deux controles dans
   la boite en mobile, ou le bouton passe en pleine largeur (woocommerce.css,
   480 px). Les flottements et les marges de la feuille du plugin sont annules
   explicitement dans cette barre : la tenue ne depend donc pas de leur contenu
   exact ni de l'ordre de chargement des feuilles. */
body.single-product #kna-main form.cart.variations_form .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	float: none;
	clear: both;
}

body.single-product #kna-main form.cart.variations_form .woocommerce-variation-add-to-cart .quantity {
	float: none;
	margin: 0;
	max-width: 100%;
	min-width: 0;
}

body.single-product #kna-main form.cart.variations_form .woocommerce-variation-add-to-cart .single_add_to_cart_button {
	float: none;
	max-width: 100%;
	min-width: 0;
}

/* --------------------------------------------------------------------------
   SOURCE UNIQUE DU TARIF, MASQUAGE NATIF CONDITIONNEL.
   Le script du theme ecrit le HTML canonique de WooCommerce / WholesaleX dans
   `[data-kna-price]` ; le noeud natif `.woocommerce-variation-price` porte le
   meme montant. Ce noeud n'est retire de l'affichage QUE si la synchronisation
   du theme s'est reellement initialisee, c'est-a-dire si le script a resolu le
   formulaire, trouve la destination et installe ses ecouteurs : c'est ce que
   marque la classe `kna-tarif--sync-ready` posee sur la boite. Sans ce marqueur
   — script absent, bloque ou arrete par une garde — l'affichage natif est
   conserve tel quel.
   Seul ce noeud est vise : le stock et la description de variation
   (`.woocommerce-variation-availability`, `.woocommerce-variation-description`)
   restent affiches, et aucun `.price` global — cards, panier, commande — n'est
   masque.
   -------------------------------------------------------------------------- */
body.single-product #kna-main form.cart.variations_form .kna-tarif.kna-tarif--sync-ready .woocommerce-variation-price {
	display: none !important;
}

/* Meme condition pour le conteneur de variation reste vide : il ne doit pas
   creer de vide, mais rien n'est masque tant que le theme n'a pas pris la main. */
body.single-product #kna-main form.cart.variations_form .kna-tarif.kna-tarif--sync-ready .woocommerce-variation.single_variation:empty {
	display: none;
}

body.single-product #kna-main .kna-tarif__title {
	margin: 0 0 4px;
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 800;
	text-transform: none;
	color: #0f172a;
}

.kna-tarif__row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.kna-tarif__hint {
	margin: 0;
	font-size: 12px;
	color: #6b7280;
}

/* Emplacement du tarif professionnel. Vide tant qu'aucune variation n'est
   retenue : le message de selection ci-dessus reste alors seul affiche. */
.kna-tarif__price {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
	color: #0f172a;
}

.kna-tarif__price[hidden] {
	display: none;
}

.kna-tarif__price .price {
	margin: 0;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

/* Sans choix de conditionnement, aucun prix n'est disponible : seul le message
   est affiche, et il l'est a la place reservee au tarif. */
.kna-tarif--connected .kna-tarif__price .kna-tarif__hint {
	font-size: 13px;
	color: #6b7280;
}

.kna-tarif__login {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border-radius: 8px;
	background: #0e5c3a;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
}

.kna-tarif__login:hover,
.kna-tarif__login:focus {
	background: #093f28;
	color: #fff;
}

body.single-product div.product .single_add_to_cart_button {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 20px !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: #0e5c3a !important;
	color: #fff !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	text-decoration: none !important;
}

body.single-product div.product .single_add_to_cart_button:hover,
body.single-product div.product .single_add_to_cart_button:focus {
	background: #093f28 !important;
	color: #fff !important;
}

body.single-product div.product .single_add_to_cart_button .kna-icon {
	width: 16px;
	height: 16px;
}

body.single-product div.product .quantity input {
	min-height: 44px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
}

/* --- Bandeau de garanties --- */
.kna-single__reassurance {
	margin: 0 0 28px;
	padding: 18px 0;
	border-top: 1px solid #eceef0;
	border-bottom: 1px solid #eceef0;
}

.kna-single__reassurance > * {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

/* --- Onglets --- */
.kna-tabs {
	margin: 0 0 28px;
}

body.single-product #kna-main .kna-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0 0 24px;
	padding: 0;
	border-bottom: 1px solid #e5e7eb;
	list-style: none;
}

body.single-product #kna-main .kna-tabs__nav > li {
	display: flex;
	justify-content: center;
	flex: 1 1 0;
	min-width: 0;
}

body.single-product #kna-main .kna-tabs__link {
	display: inline-block;
	width: auto;
	padding: 14px 10px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #6b7280;
	text-align: center;
	cursor: pointer;
}

body.single-product #kna-main .kna-tabs__link[aria-selected="true"] {
	border-bottom-color: var(--kna-color-brand);
	color: var(--kna-color-brand);
	font-weight: 600;
	box-shadow: none;
}

/* Onglet sans contenu reel : annonce mais non interactif, aucun panneau. */
body.single-product #kna-main .kna-tabs__link--unavailable {
	color: #9ca3af;
	cursor: default;
}

body.single-product #kna-main .kna-tabs__link:focus-visible {
	outline: 2px solid var(--kna-color-brand);
	outline-offset: 2px;
}

.kna-tabs__panel[hidden] {
	display: none;
}

/* Repli par defaut : avant initialisation, sans JavaScript, ou si le script
   des onglets n'a pas pu s'initialiser, la navigation interactive est masquee
   et tous les panneaux disponibles restent lisibles. */
body.single-product #kna-main .kna-tabs__nav {
	display: none;
}

body.single-product #kna-main .kna-tabs__panel {
	display: block;
}

/* Composant initialise par son propre script (.kna-tabs--ready) : navigation
   affichee, seul le panneau actif est visible. */
body.single-product #kna-main .kna-tabs--ready .kna-tabs__nav {
	display: flex;
}

body.single-product #kna-main .kna-tabs--ready .kna-tabs__panel {
	display: none;
}

body.single-product #kna-main .kna-tabs--ready .kna-tabs__panel--active {
	display: block;
}

/* Conditionnements reels listes dans le panneau Conditionnement. */
body.single-product #kna-main .kna-tabs__options {
	margin: 0 0 12px;
	padding: 0 0 0 18px;
	list-style: disc;
}

body.single-product #kna-main .kna-tabs__options-label {
	font-weight: 600;
	color: #0f172a;
}

body.single-product #kna-main .kna-tabs__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

/* Deuxieme colonne uniquement si le composant Points cles est REELLEMENT
   present dans le DOM (tabs.php ne rend .kna-tabs__aside que si l'onglet a un
   aside non vide), et seulement a partir de 1024 px. Sous 1024 px : 1 colonne. */
@media (min-width: 1024px) {
	body.single-product #kna-main .kna-tabs__grid:has(> .kna-tabs__aside) {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}
}

.kna-tabs__panel h2,
.kna-tabs__panel h3 {
	font-size: 15px;
	font-weight: 800;
	color: #111827;
}

/* Encart « Points clés » : MEMES tokens que l'encart « Tarif pro » (fond vert
   pale #eef8f3, bordure #d2ecd9, rayon 16 px) et titre noir, comme demande.
   Aucune nouvelle palette n'est creee : ces trois valeurs sont celles de
   `body.single-product #kna-main .kna-tarif` defini plus haut. */
.kna-key-points {
	margin: 0;
	padding: 20px;
	border: 1px solid #d2ecd9;
	border-radius: 16px;
	background: #eef8f3;
	list-style: none;
}

.kna-key-points__title {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 800;
	text-transform: none;
	color: #0f172a;
}

.kna-key-points__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 10px;
	font-size: 12.5px;
	line-height: 1.45;
	color: #374151;
}

/* --- Produits similaires --- */
.kna-related {
	margin: 0 0 32px;
}

.kna-related__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 16px;
}

body.single-product #kna-main .kna-related__title {
	margin: 0;
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.01em;
	text-transform: none;
	color: #0f172a;
}

.kna-related__link {
	font-size: 12px;
	font-weight: 700;
	color: #0e5c3a;
	text-decoration: none;
}

.kna-related__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kna-related__grid > li {
	display: flex;
}

body.single-product #kna-main .kna-related__item {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	padding: 12px;
	border: 1px solid #f3f4f6;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}

body.single-product #kna-main .kna-related__media {
	display: block;
	margin: -12px -12px 12px;
	border-radius: 12px 12px 0 0;
	overflow: hidden;
	background: #f8fafc;
}

body.single-product #kna-main .kna-related__media img {
	display: block;
	width: 100%;
	height: 150px;
	object-fit: cover;
}

body.single-product #kna-main .kna-related__placeholder {
	display: block;
	width: 100%;
	height: 150px;
}

body.single-product #kna-main .kna-related__name {
	margin: 0 0 4px;
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.3;
	text-transform: none;
	color: #0f172a;
}

body.single-product #kna-main .kna-related__name a {
	color: inherit;
	text-decoration: none;
}

body.single-product #kna-main .kna-related__cbd {
	margin: 0 0 12px;
	font-size: 11px;
	color: #6b7280;
}

body.single-product #kna-main .kna-related__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: auto;
	padding: 8px;
	border-radius: 8px;
	background: #f3f4f6;
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	font-size: 11px;
	font-weight: 600;
	color: #1f2937;
	text-decoration: none;
}

body.single-product #kna-main .kna-related__cta:hover,
body.single-product #kna-main .kna-related__cta:focus {
	background: #e5e7eb;
	color: #111827;
}

/* --- Responsive --- */
@media (max-width: 1100px) {
	.kna-related__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	body.single-product #kna-main div.product {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}

	body.single-product #kna-main .kna-single__info {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.single-product #kna-main .kna-tabs__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.kna-single__reassurance > * {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	body.single-product #kna-main .kna-single__info {
		grid-template-columns: minmax(0, 1fr);
	}

	.kna-related__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.single-product #kna-main .kna-tabs__nav {
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 4px;
		padding-bottom: 8px;
	}

	body.single-product #kna-main .kna-tabs__nav > li {
		flex: 0 0 auto;
	}

	body.single-product #kna-main .kna-tabs__link {
		white-space: nowrap;
	}

	body.single-product #kna-main div.product .product_title {
		font-size: 26px;
	}

	/* Sept options maximum sur petit ecran : trois par ligne, jamais de case vide. */
	body.single-product #kna-main .kna-variations__button {
		grid-column: span 4;
	}

	body.single-product div.product form.cart {
		justify-items: stretch;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kna-tarif__login,
	body.single-product div.product .single_add_to_cart_button {
		transition: none;
	}
}

/* ==========================================================================
   0.7.11.1 — bandeau de garanties : composant EXISTANT kna-product-reassurance
   Alignement visuel sur la maquette (4 blocs horizontaux, separateurs discrets).
   Aucun texte, aucune donnee, aucune icone n'est modifiee : la source reste
   kna_reassurance_data() et ses reglages client.
   ========================================================================== */

body.single-product #kna-main .kna-product-reassurance {
	margin: 32px 0;
	padding: 20px 24px;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	background: #fafcfb;
}

body.single-product #kna-main .kna-product-reassurance__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.single-product #kna-main .kna-product-reassurance__item {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	padding-left: 24px;
	border-left: 1px solid #e5e7eb;
}

body.single-product #kna-main .kna-product-reassurance__item:first-child {
	padding-left: 0;
	border-left: 0;
}

body.single-product #kna-main .kna-product-reassurance__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	border: 0;
	border-radius: 0;
	color: var(--kna-color-brand);
}

body.single-product #kna-main .kna-product-reassurance__icon .kna-icon {
	width: 32px;
	height: 32px;
	stroke-width: 1.9;
}

body.single-product #kna-main .kna-product-reassurance__title {
	display: block;
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 600;
	text-transform: none;
	color: #0f172a;
}

body.single-product #kna-main .kna-product-reassurance__desc {
	display: block;
	font-size: 11px;
	line-height: 1.4;
	color: #6b7280;
}

@media (max-width: 900px) {
	body.single-product #kna-main .kna-product-reassurance__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}

	body.single-product #kna-main .kna-product-reassurance__item:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}
}

@media (max-width: 640px) {
	body.single-product #kna-main .kna-product-reassurance__list {
		grid-template-columns: minmax(0, 1fr);
	}

	body.single-product #kna-main .kna-product-reassurance__item {
		padding-left: 0;
		border-left: 0;
	}
}
/* --------------------------------------------------------------------------
   LOT 2 — les sections de fin de fiche sont emises DANS div.product
   (hook woocommerce_after_single_product_summary). Comme div.product est une
   grille 2 colonnes (woocommerce.css:223-228), chacune tombait dans une
   demi-cellule : d'ou l'ecrasement des cards similaires.
   Correction strictement structurelle : elles s'etendent sur toute la largeur.
   Scope limite au contenu principal #kna-main ; aucun autre fichier touche.
   -------------------------------------------------------------------------- */
body.single-product #kna-main div.product > .kna-product-reassurance,
body.single-product #kna-main div.product > .kna-tabs,
body.single-product #kna-main div.product > .kna-related,
body.single-product #kna-main div.product > .kna-tarif {
	grid-column: 1 / -1;
	width: 100%;
	min-width: 0;
}

/* --------------------------------------------------------------------------
   LOT C (proposition locale, NON DEPLOYEE) — bouton « Demander un devis ».
   Element natif focalisable (bouton submit du formulaire panier, ou lien vers le
   parcours professionnel). Jamais a la place du bouton panier, jamais superpose.
   -------------------------------------------------------------------------- */
body.single-product #kna-main form.cart .kna-tarif__quote {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 4px 0 0;
}

body.single-product #kna-main form.cart .kna-tarif__quote-button,
body.single-product #kna-main form.cart .kna-tarif__quote-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid #0e5c3a;
	border-radius: 8px;
	background: #ffffff;
	color: #0e5c3a;
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

body.single-product #kna-main form.cart .kna-tarif__quote-button:hover,
body.single-product #kna-main form.cart .kna-tarif__quote-button:focus,
body.single-product #kna-main form.cart .kna-tarif__quote-link:hover,
body.single-product #kna-main form.cart .kna-tarif__quote-link:focus {
	background: #eef8f3;
}

body.single-product #kna-main form.cart .kna-tarif__quote-note {
	font-size: 12px;
	color: #6b7280;
}

@media (max-width: 480px) {
	body.single-product #kna-main form.cart .kna-tarif__quote-button,
	body.single-product #kna-main form.cart .kna-tarif__quote-link {
		width: 100%;
	}
}

/* ==========================================================================
   MICRO-LOT NIVEAU 2 — FICHE PRODUIT : ENCART « TARIF PRO », ETATS DE LA MAQUETTE
   --------------------------------------------------------------------------
   La grille a DEUX COLONNES n'est employee que lorsque des actions d'achat
   REELLES existent : la classe `kna-tarif--actions` est posee par le PHP quand le
   compte est connecte ET que le produit est achetable pour ce compte
   (`is_purchasable()`). Dans tous les autres cas l'encart reste sur UNE COLONNE :
   aucune colonne vide n'est reservee a l'achat.

     A. B2B actif, variation valide ...... 2 colonnes (information | actions) ;
                                           quantite a gauche de la barre, bouton
                                           panier a droite, bouton devis dessous.
     B. B2B actif, avant selection ....... 2 colonnes conservees ; UNE seule
                                           consigne compacte ; actions visibles
                                           mais neutralisees par WooCommerce.
     C. Visiteur ou B2C ................. 1 colonne : message de connexion compact,
                                           action reelle (connexion ou parcours
                                           professionnel), aucune colonne d'achat
                                           reservee, aucun bouton cree par le theme.
     D. Variation indisponible ........... 2 colonnes conservees ; message court
                                           (stock/indisponibilite de WooCommerce) ;
                                           actions desactivees ; aucun trou.

   Rien n'est deplace dans le DOM, aucun gabarit WooCommerce n'est surcharge,
   `display: contents` n'est pas utilise, et les regles ne visent que le formulaire
   de VARIATIONS : un produit simple n'est concerne par aucune d'elles.
   Invariants du lot B3 conserves : masquage du prix natif de variation limite au
   marqueur `kna-tarif--sync-ready`, aucune regle globale sur `.price`, stock,
   description et formulaire natif intacts.
   ========================================================================== */

/* --- Base : une seule colonne (etats C, et encart hors formulaire) --------- */
body.single-product #kna-main form.cart.variations_form .kna-tarif {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 6px;
	align-items: start;
}

/* --- Etats A, B, D : deux colonnes, actions reelles disponibles ----------- */
body.single-product #kna-main form.cart.variations_form .kna-tarif--actions {
	--kna-actions-col: 240px;
	grid-template-columns: minmax(0, 1fr) var(--kna-actions-col);
	column-gap: 20px;
}

body.single-product #kna-main form.cart.variations_form .kna-tarif > .kna-tarif__title,
body.single-product #kna-main form.cart.variations_form .kna-tarif > .kna-tarif__row,
body.single-product #kna-main form.cart.variations_form .kna-tarif > .kna-tarif__price,
body.single-product #kna-main form.cart.variations_form .kna-tarif > .woocommerce-variation.single_variation,
body.single-product #kna-main form.cart.variations_form .kna-tarif > .reset_variations {
	grid-column: 1;
	min-width: 0;
}

body.single-product #kna-main form.cart.variations_form .kna-tarif > .kna-tarif__title {
	margin-bottom: 0;
}

/* Consigne avant selection : compacte et UNIQUE (elle vit dans l'emplacement du
   tarif). Un montant resolu contient `.price` ; la consigne n'en contient pas.
   La regle vise aussi l'encart hors formulaire (repli visiteur). */
body.single-product #kna-main .kna-tarif .kna-tarif__price:not(:has(.price)) {
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.45;
	color: #6b7280;
}

body.single-product #kna-main .kna-tarif .kna-tarif__price:not(:has(.price)) .kna-tarif__hint {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

/* Tarif professionnel resolu : mis en avant dans la colonne d'information. */
body.single-product #kna-main form.cart.variations_form .kna-tarif > .kna-tarif__price:has(.price) {
	margin: 0;
	font-size: 22px;
	font-weight: 800;
	color: #0f172a;
}

/* Stock et description de variation (et message court de l'etat D). */
body.single-product #kna-main form.cart.variations_form .kna-tarif > .woocommerce-variation.single_variation {
	margin: 2px 0 0;
}

body.single-product #kna-main form.cart.variations_form .kna-tarif > .woocommerce-variation.single_variation .woocommerce-variation-availability p,
body.single-product #kna-main form.cart.variations_form .kna-tarif > .woocommerce-variation.single_variation .woocommerce-variation-description p {
	margin: 0 0 4px;
	font-size: 12px;
	color: #374151;
}

/* Lien « Effacer » : discret, dans la colonne d'information. */
body.single-product #kna-main form.cart.variations_form .kna-tarif > .reset_variations {
	font-size: 11px;
	color: #6b7280;
}

/* --- Barre native : empilee proprement quand il n'y a pas d'actions (etat C) */
body.single-product #kna-main form.cart.variations_form .kna-tarif > .woocommerce-variation-add-to-cart {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	grid-column: 1;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	float: none;
	clear: both;
}

/* --- Etats A, B, D : la barre reprend EXACTEMENT les pistes de la boite ----- */
body.single-product #kna-main form.cart.variations_form .kna-tarif--actions > .woocommerce-variation-add-to-cart {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--kna-actions-col);
	column-gap: 20px;
	row-gap: 6px;
	align-items: center;
}

body.single-product #kna-main form.cart.variations_form .kna-tarif--actions > .woocommerce-variation-add-to-cart .quantity {
	grid-column: 1;
	justify-self: start;
	width: auto;
	margin: 0;
}

body.single-product #kna-main form.cart.variations_form .kna-tarif--actions > .woocommerce-variation-add-to-cart .single_add_to_cart_button {
	grid-column: 2;
	justify-self: stretch;
	width: 100%;
}

body.single-product #kna-main form.cart.variations_form .kna-tarif:not(.kna-tarif--actions) > .woocommerce-variation-add-to-cart .quantity,
body.single-product #kna-main form.cart.variations_form .kna-tarif:not(.kna-tarif--actions) > .woocommerce-variation-add-to-cart .single_add_to_cart_button {
	width: 100%;
	max-width: 100%;
	float: none;
	margin: 0;
}

/* --- Bouton « Demander un devis » (+ lien du parcours professionnel) -------- */
body.single-product #kna-main form.cart.variations_form .kna-tarif > .kna-tarif__quote {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	grid-column: 1;
	margin: 0;
}

/* Etats A, B, D : colonne d'actions, JUSTE sous le bouton panier. */
body.single-product #kna-main form.cart.variations_form .kna-tarif--actions > .kna-tarif__quote {
	grid-column: 2;
}

body.single-product #kna-main form.cart.variations_form .kna-tarif > .kna-tarif__quote .kna-tarif__quote-button,
body.single-product #kna-main form.cart.variations_form .kna-tarif > .kna-tarif__quote .kna-tarif__quote-link {
	width: 100%;
	justify-content: center;
}

body.single-product #kna-main form.cart.variations_form .kna-tarif > .kna-tarif__quote .kna-tarif__quote-note {
	font-size: 11px;
	line-height: 1.35;
	color: #6b7280;
	text-align: right;
}

body.single-product #kna-main form.cart.variations_form .kna-tarif:not(.kna-tarif--actions) > .kna-tarif__quote .kna-tarif__quote-note {
	text-align: left;
}

/* --------------------------------------------------------------------------
   ACTIONS NEUTRALISEES, VISIBLEMENT (etats B et D) : le bouton panier de
   WooCommerce porte la classe `disabled` (selection manquante) ou
   `wc-variation-is-unavailable`, et le bouton devis est rendu `disabled` par le
   PHP tant que le script n'a pas valide la variation. Sans cette regle, la
   feuille du theme force le vert `!important` et le bouton parait actif.
   Aucune logique n'est modifiee : on ne fait que rendre l'etat lisible.
   -------------------------------------------------------------------------- */
body.single-product div.product .single_add_to_cart_button.disabled,
body.single-product div.product .single_add_to_cart_button:disabled,
body.single-product div.product .single_add_to_cart_button[disabled] {
	background: #e5e7eb !important;
	color: #6b7280 !important;
	cursor: not-allowed;
	opacity: 1;
}

body.single-product #kna-main form.cart.variations_form .kna-tarif__quote-button[disabled],
body.single-product #kna-main form.cart.variations_form .kna-tarif__quote-button:disabled {
	border-color: #e5e7eb;
	background: #f3f4f6;
	color: #9ca3af;
	cursor: not-allowed;
}

body.single-product #kna-main form.cart.variations_form .kna-tarif__quote-button[disabled]:hover,
body.single-product #kna-main form.cart.variations_form .kna-tarif__quote-button[disabled]:focus {
	background: #f3f4f6;
}

/* --------------------------------------------------------------------------
   Mobile / tablette : une seule colonne dans TOUS les etats, dans l'ordre
   information, quantite, bouton panier, bouton devis, puis « Effacer » : les
   deux actions restent adjacentes et en pleine largeur.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	body.single-product #kna-main form.cart.variations_form .kna-tarif,
	body.single-product #kna-main form.cart.variations_form .kna-tarif--actions {
		grid-template-columns: minmax(0, 1fr);
	}

	body.single-product #kna-main form.cart.variations_form .kna-tarif > .kna-tarif__title,
	body.single-product #kna-main form.cart.variations_form .kna-tarif > .kna-tarif__row,
	body.single-product #kna-main form.cart.variations_form .kna-tarif > .kna-tarif__price,
	body.single-product #kna-main form.cart.variations_form .kna-tarif > .woocommerce-variation.single_variation,
	body.single-product #kna-main form.cart.variations_form .kna-tarif > .reset_variations,
	body.single-product #kna-main form.cart.variations_form .kna-tarif > .woocommerce-variation-add-to-cart,
	body.single-product #kna-main form.cart.variations_form .kna-tarif > .kna-tarif__quote,
	body.single-product #kna-main form.cart.variations_form .kna-tarif--actions > .woocommerce-variation-add-to-cart,
	body.single-product #kna-main form.cart.variations_form .kna-tarif--actions > .kna-tarif__quote {
		grid-column: 1;
	}

	body.single-product #kna-main form.cart.variations_form .kna-tarif--actions > .woocommerce-variation-add-to-cart {
		grid-template-columns: minmax(0, 1fr);
	}

	body.single-product #kna-main form.cart.variations_form .kna-tarif--actions > .woocommerce-variation-add-to-cart .quantity,
	body.single-product #kna-main form.cart.variations_form .kna-tarif--actions > .woocommerce-variation-add-to-cart .single_add_to_cart_button {
		grid-column: 1;
		justify-self: stretch;
		width: 100%;
	}

	body.single-product #kna-main form.cart.variations_form .kna-tarif > .kna-tarif__quote .kna-tarif__quote-note {
		text-align: left;
	}

	body.single-product #kna-main form.cart.variations_form .kna-tarif > .kna-tarif__title { order: 1; }
	body.single-product #kna-main form.cart.variations_form .kna-tarif > .kna-tarif__row { order: 2; }
	body.single-product #kna-main form.cart.variations_form .kna-tarif > .kna-tarif__price { order: 3; }
	body.single-product #kna-main form.cart.variations_form .kna-tarif > .woocommerce-variation.single_variation { order: 4; }
	body.single-product #kna-main form.cart.variations_form .kna-tarif > .woocommerce-variation-add-to-cart { order: 5; }
	body.single-product #kna-main form.cart.variations_form .kna-tarif > .kna-tarif__quote { order: 6; }
	body.single-product #kna-main form.cart.variations_form .kna-tarif > .reset_variations { order: 7; }
}

/* ==========================================================================
   MICRO-LOT NIVEAU 1 — CONFORMITE VISUELLE DE LA FICHE PRODUIT
   --------------------------------------------------------------------------
   PRESENTATION SEULE : aucune logique, aucun prix, aucun role, aucun reglage,
   aucune donnee. Les elements WooCommerce ne sont jamais retires du DOM : ils
   sont au plus masques visuellement, de facon ciblee.
   ========================================================================== */

/* --- 1) BLOC « POINTS CLES » ------------------------------------------------
   La liste etait rendue avec le marquage par defaut du navigateur (retrait de
   `ul` et puces) : d'ou un rendu non conforme. La liste est remise a zero, la
   coche est une PASTILLE RONDE VERTE de 18 px avec la coche dedans (le SVG
   utilise `currentColor`, la couleur vient donc du conteneur, et l'epaisseur du
   trait est fixee ici) et le texte est aligne a cote d'elle. Le fond, la bordure
   et le rayon de la carte sont ceux de l'encart « Tarif pro ». Un champ vide ne
   produit ni ligne ni coche : la source ne fournit que les points remplis
   (aucun element vide n'est genere cote gabarit). */
body.single-product #kna-main .kna-key-points__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.single-product #kna-main .kna-key-points__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: #374151;
}

/* COCHE BLANCHE DANS PASTILLE VERT FONCE, motif de la maquette.
   Correction demandee : la pastille precedente (fond vert pale
   `rgba(14,92,58,.12)` + coche `#0e5c3a` de 12 px au trait 2.5, soit environ
   1,25 px a l'ecran) etait trop peu contrastee pour que la coche se voie.
   Desormais : pastille au VERT du bouton « Ajouter au panier » (#0e5c3a),
   coche BLANCHE et plus epaisse.
   Le SVG du theme est rendu par kna_icon() avec `fill="none"
   stroke="currentColor"` : la couleur est donc fixee DEUX fois, sur le
   conteneur (`color`) et sur le SVG (`stroke`), pour ne dependre d'aucune
   heritage ni d'aucune regle concurrente. Visibilite et opacite sont forcees
   (`!important`) sur le SEUL SVG de la pastille : aucune autre cible n'est
   touchee, et le gabarit n'est pas modifie.
   Aucune regle de ce lot ne masque ni ne retire d'element : la pastille garde
   ses 18 px, sa position et l'alignement du texte. */
body.single-product #kna-main .kna-key-points__item > span:first-child,
body.single-product #kna-main .kna-key-points__item > span[aria-hidden="true"] {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	border-radius: 50%;
	background: #0e5c3a;
	color: #ffffff;
}

body.single-product #kna-main .kna-key-points__item > span:first-child svg.kna-icon,
body.single-product #kna-main .kna-key-points__item > span[aria-hidden="true"] svg.kna-icon {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: 12px;
	height: 12px;
	min-width: 12px;
	min-height: 12px;
	overflow: visible;
	fill: none;
	stroke: #ffffff;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Repli strictement borne : si la pastille ne contient AUCUN SVG (icone non
   rendue cote site), la coche est dessinee en CSS, en blanc, dans la meme
   pastille. Le selecteur `:not(:has(svg))` garantit qu'elle n'est JAMAIS
   dessinee en plus du SVG : aucun doublon possible, et rien n'est deplace
   (la pastille serait sinon vide). Aucun gabarit, aucun PHP n'est modifie. */
body.single-product #kna-main .kna-key-points__item > span[aria-hidden="true"]:not(:has(svg))::after {
	content: "";
	display: block;
	width: 8px;
	height: 4px;
	margin-top: -2px;
	border-left: 2px solid #ffffff;
	border-bottom: 2px solid #ffffff;
	border-radius: 1px;
	transform: rotate(-45deg);
}

body.single-product #kna-main .kna-key-points__item > span:last-child {
	min-width: 0;
}

body.single-product #kna-main .kna-key-points__item:last-child {
	margin-bottom: 0;
}

body.single-product #kna-main .kna-key-points__title {
	margin: 0 0 12px;
}

/* --- 2) MONTANT DU TARIF : a gauche, grand et lisible --------------------- */
body.single-product #kna-main form.cart.variations_form .kna-tarif--actions > .kna-tarif__price:has(.price) {
	font-size: 24px;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

/* --- 3) QUANTITE NATIVE MASQUEE DANS L'ENCART TARIF PRO (TOUTES LARGEURS) --
   NŒUD REELLEMENT VISE (releve sur la page servie par le site) :
     body.single-product
       > main#kna-main
         > div.product
           > form.cart.variations_form
             > div.single_variation_wrap
               > div.kna-tarif.kna-tarif--actions
                 > div.woocommerce-variation-add-to-cart.variations_button
                   > div.quantity                 <-- conteneur du champ « 1 »
                     > input.input-text.qty.text[name="quantity"]
   Le conteneur est donc `div.quantity`, enfant direct de
   `.woocommerce-variation-add-to-cart`, lui-meme enfant direct de la boite
   `.kna-tarif--actions`. La classe `.kna-tarif--actions` n'est produite QUE par
   `kna_single_product_tarif_box_open()` pour un produit VARIABLE dont le compte
   connecte a une action d'achat reelle : le selecteur ne peut donc atteindre ni
   le panier, ni la commande, ni le formulaire d'un produit simple.
   `!important` porte sur la SEULE propriete `display` de ce conteneur (et de son
   champ) : il rend la regle insensible a une regle concurrente ou a un style en
   ligne, sans toucher au DOM — `name`, `value`, min/max et la soumission
   WooCommerce sont intacts, et la quantite reste dans le formulaire.
   La regle n'est dans aucune media query : elle s'applique a TOUTES les
   largeurs, desktop comme mobile. */
body.single-product #kna-main form.cart.variations_form .kna-tarif--actions > .woocommerce-variation-add-to-cart > .quantity,
body.single-product #kna-main .kna-tarif--actions .quantity,
body.single-product #kna-main .kna-tarif--actions input.qty {
	display: none !important;
}

/* --- 4) ETATS SANS ACTION D'ACHAT (visiteur, B2C, produit non achetable) ---
   L'encart ne doit montrer que le titre, la consigne courte et l'action reelle
   vers le parcours professionnel (« Se connecter » / « Devenir client pro »).
   Quantite, bouton panier, bouton devis, note et affichage de variation sont
   masques VISUELLEMENT : ils restent dans le DOM, le verrou serveur est intact. */
body.single-product #kna-main form.cart.variations_form .kna-tarif:not(.kna-tarif--actions) > .woocommerce-variation-add-to-cart,
body.single-product #kna-main form.cart.variations_form .kna-tarif:not(.kna-tarif--actions) > .kna-tarif__quote,
body.single-product #kna-main form.cart.variations_form .kna-tarif:not(.kna-tarif--actions) > .reset_variations,
body.single-product #kna-main form.cart.variations_form .kna-tarif:not(.kna-tarif--actions) > .woocommerce-variation.single_variation {
	display: none;
}

/* L'action reelle de ces etats (lien de connexion ou parcours professionnel)
   reprend la forme du bouton principal du theme. */
body.single-product #kna-main .kna-tarif .kna-tarif__login {
	min-height: 44px;
	padding: 0 20px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

body.single-product #kna-main .kna-tarif .kna-tarif__row {
	margin-top: 4px;
}

/* ==========================================================================
   LOT 1 — HARMONISATION UI/UX FICHE PRODUIT (NIVEAU 1 : CSS SEUL)
   --------------------------------------------------------------------------
   Bloc ajoute en fin de feuille, sans modifier aucune regle precedente.
   Aucun gabarit, aucun script, aucun prix, aucune regle WholesaleX touches :
   presentation uniquement. Couleurs issues des tokens (tokens.css) et des
   valeurs de la direction artistique (#eef8f3 / #d2ecd9 / brand / brand-hover).
   ========================================================================== */

/* --- 1) Correctif : debordement horizontal du <select> natif masque --------
   La feuille WooCommerce impose `min-width: 75%` (et la feuille du theme
   `min-height: 42px`) a `.variations select` : la largeur de 1 px du masquage
   accessible etait ignoree et le select, en position absolue, depassait de la
   colonne (barre de defilement horizontale en desktop). Le select reste dans
   le DOM, focalisable et soumis : seules ses dimensions minimales sont levees. */
body.single-product #kna-main .variations select.kna-variations__select--ready {
	min-width: 0;
	max-width: 1px;
	min-height: 0;
}

/* --- 2) Correctif : contraste du lien « Se connecter » / parcours pro -------
   `.kna-main--shop a` (couleur de lien verte) l'emportait sur
   `.kna-tarif__login` : texte vert sur fond vert, illisible. */
body.single-product #kna-main .kna-tarif a.kna-tarif__login {
	background: var(--kna-color-brand);
	color: #ffffff;
	transition: background-color 0.15s ease;
}

body.single-product #kna-main .kna-tarif a.kna-tarif__login:hover,
body.single-product #kna-main .kna-tarif a.kna-tarif__login:focus {
	background: var(--kna-color-brand-hover);
	color: #ffffff;
}

body.single-product #kna-main .kna-tarif a.kna-tarif__login:focus-visible {
	outline: 2px solid var(--kna-color-brand);
	outline-offset: 2px;
}

/* --- 3) Conditionnement : libelle au-dessus, boutons sur toute la largeur ---
   Le tableau natif reste en place (aucun noeud deplace) ; il est seulement
   rendu en blocs. Le libelle d'attribut reste celui saisi dans WooCommerce :
   seule sa premiere lettre est mise en capitale. */
body.single-product #kna-main form.cart table.variations,
body.single-product #kna-main form.cart table.variations tbody,
body.single-product #kna-main form.cart table.variations tr,
body.single-product #kna-main form.cart table.variations th,
body.single-product #kna-main form.cart table.variations td {
	display: block;
	width: 100%;
}

body.single-product #kna-main form.cart table.variations {
	margin: 0 0 4px;
}

body.single-product #kna-main form.cart table.variations tr + tr {
	margin-top: 14px;
}

body.single-product #kna-main form.cart table.variations th.label {
	margin: 0 0 8px;
	line-height: 1.3;
}

body.single-product #kna-main form.cart table.variations th.label label {
	display: inline-block;
	margin: 0;
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 800;
	color: var(--kna-color-text-strong);
}

body.single-product #kna-main form.cart table.variations th.label label::first-letter {
	text-transform: uppercase;
}

body.single-product #kna-main form.cart table.variations td.value {
	position: relative;
}

/* Lien natif « Effacer » : tant que WooCommerce le garde invisible
   (`visibility: hidden` en ligne), il ne reserve plus 28 px de vide sous les
   boutons. Des qu'une option est choisie, WooCommerce le rend visible et il
   reapparait, intact et fonctionnel. */
body.single-product #kna-main form.cart table.variations a.reset_variations[style*="hidden"] {
	display: none;
}

body.single-product #kna-main form.cart table.variations a.reset_variations {
	margin-top: 8px;
	font-size: 12px;
	color: var(--kna-color-text-muted);
}

body.single-product #kna-main .kna-variations__button {
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

body.single-product #kna-main .kna-variations__button:not([disabled]):not(.kna-variations__button--active):hover {
	background: #eef8f3;
}

/* Petit ecran, EXACTEMENT 4 options (1 + 3 orphelin avec la regle 3 par
   ligne) : 2 par ligne. Les autres effectifs gardent la regle existante. */
@media (max-width: 640px) {
	body.single-product #kna-main .kna-variations__buttons:has(> .kna-variations__button:nth-child(4):last-child) > .kna-variations__button {
		grid-column: span 6;
	}
}

/* --- 4) Caracteristiques : carte vert pale de la maquette ----------------- */
body.single-product #kna-main .kna-single__info {
	gap: 14px 16px;
	padding: 16px 18px;
	border-color: #d2ecd9;
	background: #eef8f3;
}

body.single-product #kna-main .kna-single__info-row {
	font-size: 13px;
	color: var(--kna-color-text-strong);
}

body.single-product #kna-main .kna-single__info-label {
	color: #4b5563;
}

/* --- 5) Galerie : rayon et focus coherents ------------------------------- */
body.single-product #kna-main div.product div.images .woocommerce-product-gallery__wrapper img {
	border-radius: 16px;
}

body.single-product #kna-main div.product div.images .flex-control-thumbs img {
	border-radius: 10px;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

body.single-product #kna-main div.product div.images .flex-control-thumbs img.flex-active,
body.single-product #kna-main div.product div.images .flex-control-thumbs img:hover {
	border-color: var(--kna-color-brand);
}

body.single-product #kna-main .woocommerce-product-gallery__trigger:focus-visible {
	outline: 2px solid var(--kna-color-brand);
	outline-offset: 2px;
}

/* --- 6) Onglets : alignes a gauche et soulignes, comme la maquette -------- */
body.single-product #kna-main .kna-tabs__nav {
	gap: 0 32px;
}

body.single-product #kna-main .kna-tabs__nav > li {
	flex: 0 0 auto;
	justify-content: flex-start;
}

body.single-product #kna-main .kna-tabs__link {
	margin-bottom: -1px;
	padding: 14px 2px;
	font-size: 14px;
	color: #4b5563;
}

body.single-product #kna-main .kna-tabs__link:not(.kna-tabs__link--unavailable):hover {
	color: var(--kna-color-brand);
}

body.single-product #kna-main .kna-tabs__link[aria-selected="true"] {
	border-bottom-width: 3px;
	font-weight: 800;
}

body.single-product #kna-main .kna-tabs__link--unavailable {
	color: #9ca3af;
}

/* --- 7) Produits similaires : cartes et bouton aux couleurs du theme ------ */
body.single-product #kna-main .kna-related__item {
	border-color: #e5e7eb;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.single-product #kna-main .kna-related__item:hover {
	border-color: #d2ecd9;
	box-shadow: 0 6px 18px rgba(17, 17, 17, 0.06);
}

body.single-product #kna-main .kna-related__name a:hover {
	color: var(--kna-color-brand);
}

body.single-product #kna-main .kna-related__cta {
	border: 1px solid #d2ecd9;
	background: #eef8f3;
	color: var(--kna-color-brand);
	font-weight: 700;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

body.single-product #kna-main .kna-related__cta:hover,
body.single-product #kna-main .kna-related__cta:focus {
	border-color: var(--kna-color-brand);
	background: var(--kna-color-brand);
	color: #ffffff;
}

body.single-product #kna-main .kna-related__link {
	color: var(--kna-color-brand);
}

body.single-product #kna-main .kna-related__link:hover {
	color: var(--kna-color-brand-hover);
	text-decoration: underline;
}

body.single-product #kna-main .kna-related__cta:focus-visible,
body.single-product #kna-main .kna-related__link:focus-visible,
body.single-product #kna-main .kna-related__name a:focus-visible {
	outline: 2px solid var(--kna-color-brand);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	body.single-product #kna-main .kna-variations__button,
	body.single-product #kna-main .kna-related__item,
	body.single-product #kna-main .kna-related__cta,
	body.single-product #kna-main div.product div.images .flex-control-thumbs img {
		transition: none;
	}
}