/* Variantes — le FRONT : les pastilles qui pilotent le <select> natif.
   Feuille du SITE CLIENT : sobre, neutre, tout en préfixe .ckwc-vrt — elle
   ne porte aucune couleur de charte CercleKit (le front appartient au design
   du site). Chargée seulement sur la fiche produit, module allumé.

   ⚠️ ELLE DOIT SE DÉFENDRE. Constaté sur LH Color (kit Elementor) : les
   règles génériques du thème (`button { … }`, `select { … }`) écrasaient les
   nôtres — selects « masqués » rendus à 340px qui créaient un DÉFILEMENT
   HORIZONTAL (mesuré : +41px, exactement leur dépassement), boutons passés
   en bloc plein fond, rond « Blanc » invisible (bordure annulée). D'où :
   `display:none !important` sur le select (le script de variations de
   WooCommerce lit et écrit dedans sans avoir besoin qu'il soit peint —
   vérifié : scroll à 0, variations toujours résolues), `all: unset` puis
   redéclaration sur les pastilles, et JAMAIS de `!important` sur les fonds
   des ronds/vignettes : la couleur y arrive en style inline, qu'un
   `!important` à nous écraserait nous-mêmes. */

.ckwc-vrt select {
	display: none !important;
}

.ckwc-vrt .ckwc-vrt-liste {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
}

/* La base commune — on repart de zéro, le thème n'a plus prise. */
.ckwc-vrt button.ckwc-vrt-item {
	all: unset;
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(0, 0, 0, .25);
	margin: 0 !important;
	font: inherit;
	color: inherit;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color .12s ease, outline-color .12s ease;
}

/* Rond de couleur (ou matière) — le fond arrive en style INLINE. */
.ckwc-vrt button.ckwc-vrt-rond {
	width: 28px !important;
	height: 28px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background-color: rgba(0, 0, 0, .04);
	background-size: cover;
	background-position: center;
}

/* Vignette d'image — idem, l'image arrive en inline. */
.ckwc-vrt button.ckwc-vrt-img {
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	border-radius: 3px !important;
	background-color: rgba(0, 0, 0, .04);
	background-size: cover;
	background-position: center;
}

.ckwc-vrt button.ckwc-vrt-img.est-vide {
	border-style: dashed;
}

/* Bouton texte — là, le fond est à NOUS : transparent, point. */
.ckwc-vrt button.ckwc-vrt-btn {
	min-width: 36px;
	padding: 6px 12px !important;
	border-radius: 3px !important;
	background: transparent !important;
	color: inherit !important;
}

/* ── LA RANGÉE S'ALIGNE À GAUCHE, NET (Kévin, 2026-08-04 : « faut que ce
   soit aligné propre à gauche ») : le thème centrait le LIBELLÉ de la
   rangée (`th { text-align:center }`), les pastilles semblaient flotter.
   Scopé aux seules rangées qui portent nos pastilles. */
.variations tr:has(.ckwc-vrt) th,
.variations tr:has(.ckwc-vrt) td {
	text-align: left !important;
	vertical-align: middle;
}

/* ── CHOISI : UN LISERÉ, PAS UN ANNEAU (1.0.380). Kévin, capture xpospace :
   « pourquoi j'ai un énorme contour en plus à la sélection », puis « je veux
   pas de gros contour, je veux un liseré propre ». La version d'avant (liseré
   blanc PUIS anneau sombre de 4px AUTOUR de la bordure) répondait à « un vrai
   état d'actif, on sait pas c'est lequel » — mais empilait trois traits.
   Tout est maintenant DEDANS (`inset`) : la pastille garde sa taille, rien ne
   déborde sur la voisine. Toujours sans rien emprunter au thème. */
.ckwc-vrt button.ckwc-vrt-item.est-choisi {
	outline: none !important;
	border-color: rgba(0, 0, 0, .85) !important;
	/* Bouton texte : la bordure doublée vers l'intérieur = un trait net de 2px. */
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .85) !important;
}

/* Rond / vignette : un liseré BLANC intérieur sous la bordure foncée — il se
   voit sur un rond noir ou vert foncé, où la bordure seule disparaîtrait. */
.ckwc-vrt button.ckwc-vrt-rond.est-choisi,
.ckwc-vrt button.ckwc-vrt-img.est-choisi {
	box-shadow: inset 0 0 0 2px #fff !important;
}

.ckwc-vrt button.ckwc-vrt-btn.est-choisi {
	font-weight: 600;
}

/* Indisponible avec la sélection en cours (WooCommerce a retiré l'option). */
.ckwc-vrt button.ckwc-vrt-item.est-indisponible {
	opacity: .35 !important;
	cursor: not-allowed;
}

.ckwc-vrt button.ckwc-vrt-item:hover:not(.est-indisponible) {
	border-color: currentColor;
}

.ckwc-vrt button.ckwc-vrt-item:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}