/* =============================================================================
   Selecteur de variations en pastilles — Chaussette Chausson
   Tout est scope sous body.cc-vs-on (pose seulement si l'interrupteur
   cc_variations_pastilles est actif). Voir includes/cc-variations.php.
   Ajoute le 2026-10-09.
   ========================================================================== */

.cc-vs-on {
	--cc-vs-bleu: #134566;
	--cc-vs-trait: #d9dee4;
	--cc-vs-texte: #134566;
}

/* Le tableau de WooCommerce devient une pile de blocs. */
.cc-vs-on form.variations_form table.variations,
.cc-vs-on form.variations_form table.variations tbody,
.cc-vs-on form.variations_form table.variations tr,
.cc-vs-on form.variations_form table.variations th,
.cc-vs-on form.variations_form table.variations td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}

.cc-vs-on form.variations_form table.variations {
	margin: 0 0 22px;
}

.cc-vs-on form.variations_form table.variations tr + tr {
	margin-top: 24px;
}

.cc-vs-on form.variations_form table.variations th.label {
	margin: 0 0 10px;
	line-height: 1.3;
}

.cc-vs-on form.variations_form table.variations th.label label {
	display: inline;
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--cc-vs-texte);
}

.cc-vs-on form.variations_form table.variations th.label label::after {
	content: " :";
}

.cc-vs-on .cc-vs-valeur {
	order: 2;
	margin-left: .3em;
	font-weight: 400;
}

.cc-vs-on .cc-vs-valeur:empty {
	display: none;
}

/* Le libelle porte « Couleur » puis, via JS, « Vert » : le « : » doit venir
   entre les deux, d'ou le passage en flex. */
.cc-vs-on form.variations_form table.variations th.label label {
	display: inline-flex;
	gap: 0;
}

.cc-vs-on form.variations_form table.variations th.label label::after {
	order: 1;
	white-space: pre;
}

/* Les <select> natifs restent dans le DOM (WooCommerce s'en sert) mais
   disparaissent, y compris l'habillage select2 / nice-select de Salient. */
.cc-vs-on form.variations_form td.value select,
.cc-vs-on form.variations_form td.value .select2,
.cc-vs-on form.variations_form td.value .select2-container,
.cc-vs-on form.variations_form td.value .nice-select {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	border: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.cc-vs-on form.variations_form .reset_variations {
	display: none !important;
}

.cc-vs-on form.variations_form td.value {
	position: relative;
}

/* --- Groupe de pastilles ------------------------------------------------- */

.cc-vs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.cc-vs__choix {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	margin: 0;
	cursor: pointer;
	font: inherit;
	-webkit-tap-highlight-color: transparent;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.cc-vs__choix:focus {
	outline: none;
}

.cc-vs__choix:focus-visible {
	outline: 2px solid var(--cc-vs-bleu);
	outline-offset: 3px;
}

/* Boutons texte (tailles, dimensions, couleurs sans teinte connue). */
.cc-vs__pilule {
	min-width: 64px;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--cc-vs-trait);
	border-radius: 12px;
	background: #fff;
	color: var(--cc-vs-texte);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: none;
}

.cc-vs__pilule:hover {
	border-color: var(--cc-vs-bleu);
	background: #fff;
	color: var(--cc-vs-texte);
}

.cc-vs__pilule.is-actif,
.cc-vs__pilule.is-actif:hover {
	border-color: var(--cc-vs-bleu);
	background: var(--cc-vs-bleu);
	color: #fff;
}

/* Ronds de couleur : anneau blanc puis contour au choix actif.
   Le contour de base est une vraie bordure : le theme annule les box-shadow
   des boutons hors survol, ce qui rendait le rond blanc invisible. */
.cc-vs-on .cc-vs .cc-vs__rond {
	box-sizing: border-box;
	width: 36px;
	height: 36px;
	min-width: 0;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, .14) !important;
	border-radius: 50% !important;
	background: var(--cc-vs-fond, #ccc) !important;
	font-size: 0;
	line-height: 0;
}

.cc-vs-on .cc-vs .cc-vs__rond--clair {
	border-color: rgba(0, 0, 0, .28) !important;
}

.cc-vs-on .cc-vs .cc-vs__rond:hover {
	box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--cc-vs-trait) !important;
}

.cc-vs-on .cc-vs .cc-vs__rond.is-actif,
.cc-vs-on .cc-vs .cc-vs__rond.is-actif:hover {
	box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--cc-vs-bleu) !important;
}

/* Motifs (photo de la variation) : plus grands et zoomes sur le tissu,
   sinon un leopard ou des carreaux ne se lisent pas a 36 px. */
.cc-vs-on .cc-vs .cc-vs__rond--image {
	width: 46px;
	height: 46px;
	background-size: 170% !important;
	background-position: center !important;
}

.cc-vs__rond .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Combinaison indisponible avec les choix en cours : grisee et barree,
   mais cliquable (le clic libere les autres attributs). */
.cc-vs__choix.is-indispo {
	opacity: .4;
}

.cc-vs__pilule.is-indispo {
	text-decoration: line-through;
}

.cc-vs__rond.is-indispo::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 4px;
	right: 4px;
	height: 1.5px;
	background: var(--cc-vs-bleu);
	transform: rotate(-45deg);
}

@media (max-width: 690px) {
	.cc-vs {
		gap: 8px;
	}
	.cc-vs__pilule {
		min-width: 56px;
		padding: 0 14px;
	}
}