/* Produits variables (fiche et grilles). Le pourquoi de chaque règle est
 * dans variations.php, « Notes sur variations.css » — ce fichier est servi
 * aux visiteurs, on y laisse le minimum. */

/* Prix unique : second prix et « Effacer » masqués une fois le prix du haut
 * synchronisé (classe posée par variations.js). */
.variations_form.cala-price-synced .woocommerce-variation-price,
.variations_form.cala-price-synced .reset_variations {
	display: none !important;
}

/* Libellé « Finition : … » au-dessus des boutons. */
.variations_form .variations th.label {
	display: none;
}

/* Prix et filet imprimés par nos hooks. */
.cala-product-price {
	margin-bottom: calc(var(--product-element-spacing, 10px) * 0.7);
}
.cala-product-price .price {
	margin: 0;
}
.cala-product-divider {
	display: block;
	height: 0;
	margin: var(--product-element-spacing, 10px) 0;
	border: 0;
	border-top: 1px solid var(--theme-border-color, rgba(0, 0, 0, 0.12));
}
.variations_form .cala-product-price + .variations {
	margin-top: 0;
}

/* Infobulle des boutons texte. */
.ct-variation-swatches[data-swatches-type="button"] .ct-tooltip {
	display: none !important;
}

/* Finitions des cartes : corps et teintes, sur tout le site. */
:root {
	--cala-finition-taille: 10px;
	--cala-finition-encre: #2b2724;
	--cala-finition-gris: #6f6a66;
	--cala-finition-filet: #a38551;
}

@media (min-width: 690px) {

	/* Corps des finitions, tablette et ordinateur. */
	:root {
		--cala-finition-taille: 10.5px;
	}
}

/* Cartes des grilles : « LIEN · CHAÎNE » sur une ligne. */
.ct-card-variation-swatches .ct-variation-swatches[data-swatches-type="button"] {
	flex-direction: row;
	align-items: center;
	gap: 0;
}

/* Une finition : cible de 24 px, 7 px de chaque côté du mot. */
.ct-card-variation-swatches [data-swatches-type="button"] .ct-swatch-container {
	align-items: center;
	min-height: 24px;
	margin: 0;
	padding: 0 7px;
	border: 0;
}

/* Point discret entre deux finitions. */
.ct-card-variation-swatches [data-swatches-type="button"] .ct-swatch-container + .ct-swatch-container::before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: -1.5px;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--cala-finition-gris);
	opacity: 0.45;
	transform: translateY(-50%);
}

/* Mot en capitales espacées, gris, place du tiret réservée dessous. */
.ct-card-variation-swatches [data-swatches-type="button"] .ct-swatch-container .ct-swatch {
	width: auto;
	height: auto;
	min-width: 0;
	padding: 3px 0 5px 0.2em;
	border: 0;
	border-radius: 0;
	background: none;
	overflow: visible;
	font-family: var(--brand-font-body);
	font-size: var(--cala-finition-taille);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--cala-finition-gris);
}

/* Lien et chaîne : nom complet effacé à l'œil (il reste dans aria-label). */
.ct-card-variation-swatches [data-swatches-type="button"] :is([data-value="lien"], [data-value="chaine"]) .ct-swatch-content {
	font-size: 0;
	letter-spacing: 0;
}

/* Le mot court, au corps des finitions. */
.ct-card-variation-swatches [data-swatches-type="button"] :is([data-value="lien"], [data-value="chaine"]) .ct-swatch-content::before {
	font-size: var(--cala-finition-taille);
	letter-spacing: 0.2em;
}

/* « Lien ». */
.ct-card-variation-swatches [data-swatches-type="button"] [data-value="lien"] .ct-swatch-content::before {
	content: "Lien";
}

/* « Chaîne ». */
.ct-card-variation-swatches [data-swatches-type="button"] [data-value="chaine"] .ct-swatch-content::before {
	content: "Cha\00EEne";
}

/* Survol : le mot en encre. */
.ct-card-variation-swatches [data-swatches-type="button"] .ct-swatch-container:hover .ct-swatch {
	color: var(--cala-finition-encre);
}

/* Finition affichée : encre. */
.ct-card-variation-swatches [data-swatches-type="button"] .ct-swatch-container[aria-pressed="true"] .ct-swatch {
	color: var(--cala-finition-encre);
}

/* … et un petit tiret d'or centré dessous, jamais un soulignement. */
.ct-card-variation-swatches [data-swatches-type="button"] .ct-swatch-container[aria-pressed="true"] .ct-swatch-content::after,
.cala-finition-seule__mot::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 12px;
	height: 1px;
	background: var(--cala-finition-filet);
	transform: translateX(-50%);
}

/* Focus au clavier : le bouton entier, mot et marges. */
.ct-card-variation-swatches [data-swatches-type="button"] .ct-swatch-container:focus-visible {
	outline: 2px solid var(--cala-finition-encre);
	outline-offset: 2px;
}

/* Bracelet simple : « LIEN » seul, au dessin d'une finition affichée. */
.cala-finition-seule {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 24px;
}

/* Le mot, au dessin de la finition affichée (tiret ci-dessus). */
.cala-finition-seule__mot {
	position: relative;
	padding: 3px 0 5px 0.2em;
	font-family: var(--brand-font-body);
	font-size: var(--cala-finition-taille);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--cala-finition-encre);
}

/* Bracelet simple épuisé : estompé comme une finition épuisée. */
.cala-finition-seule--epuisee .cala-finition-seule__mot {
	opacity: 0.4;
}

/* Produit variable épuisé (classe posée par variations.php). */
.single-product.cala-out-of-stock form.variations_form .woocommerce-variation-add-to-cart {
	display: none;
}
.single-product.cala-out-of-stock form.variations_form .cala-product-divider {
	margin-bottom: 0;
}

/* « Disponible » d'une variation : même marge que sur un produit simple. */
form.variations_form .single_variation .woocommerce-variation-availability p.stock {
	margin-bottom: var(--theme-content-spacing, 1.5em);
}

/* Boutons de finition : dessin, largeur égale, trois états. */
form.variations_form [data-swatches-type="button"] .ct-swatch-container,
form.variations_form [data-swatches-type="button"] .ct-swatch {
	--swatch-border-radius: 3px;
	border-radius: 3px;
}
form.variations_form {
	--cala-swatch-w: 184px;
	--cala-swatch-n: 2;
	--cala-swatch-gap: 10px;
}
.product_cat-cartes-cadeaux form.variations_form {
	--cala-swatch-w: 62px;
	--cala-swatch-n: 5;
}
form.variations_form .ct-variation-swatches[data-swatches-type="button"] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--cala-swatch-w), 1fr));
	gap: var(--cala-swatch-gap);
	max-width: min(calc(var(--cala-swatch-n) * var(--cala-swatch-w) + (var(--cala-swatch-n) - 1) * var(--cala-swatch-gap)), 100%);
}
/* Téléphone : deux paliers pour tenir côte à côte (voir variations.php). */
@media (max-width: 689.98px) {
	form.variations_form {
		--cala-swatch-w: 172px;
		--cala-swatch-gap: 6px;
	}
	form.variations_form [data-swatches-type="button"] .ct-swatch {
		padding-left: 7px;
		padding-right: 7px;
	}
}
@media (max-width: 401.98px) {
	form.variations_form {
		--cala-swatch-w: 160px;
	}
	form.variations_form [data-swatches-type="button"] .ct-swatch {
		font-size: 13px;
		padding-left: 6px;
		padding-right: 6px;
	}
}
form.variations_form table.variations {
	width: 100%;
}
form.variations_form [data-swatches-type="button"] .ct-swatch-container {
	display: flex;
}
form.variations_form [data-swatches-type="button"] .ct-swatch {
	flex: 1 1 auto;
	justify-content: center;
	text-align: center;
}
form.variations_form .reset_variations {
	display: none !important;
}
form.variations_form [data-swatches-type="button"] .ct-swatch {
	--swatch-button-text-color: var(--theme-palette-color-3);
	--swatch-button-border-color: var(--theme-border-color);
	--swatch-button-background-color: transparent;
	border-width: 1px;
	font-weight: 400;
}
form.variations_form [data-swatches-type="button"] .ct-swatch-container:hover .ct-swatch {
	--swatch-button-text-color: var(--theme-palette-color-2);
	--swatch-button-border-color: var(--theme-palette-color-2);
}
form.variations_form [data-swatches-type="button"] [aria-pressed="true"] .ct-swatch,
form.variations_form [data-swatches-type="button"] [aria-pressed="true"]:hover .ct-swatch {
	--swatch-button-text-color: var(--theme-palette-color-1);
	--swatch-button-border-color: var(--theme-palette-color-1);
}

/* Ligne sous les boutons (remplie par variations.js). */
form.variations_form .cala-finition-line {
	margin: 0 0 var(--product-element-spacing, 10px);
	min-height: 1.5em;
	font-size: 15px;
	line-height: 1.5;
	color: var(--theme-palette-color-3);
}
form.variations_form .cala-finition-line:empty::before {
	content: "\00a0";
}

/* Liens dans le bloc « Détails ». */
.ct-dynamic-data-layer[data-field^="details:"] a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	text-decoration-color: currentColor;
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.ct-dynamic-data-layer[data-field^="details:"] a:hover,
.ct-dynamic-data-layer[data-field^="details:"] a:focus-visible {
	color: var(--theme-palette-color-2);
	text-decoration-color: currentColor;
}

/* Le bouton déjà choisi ne se désélectionne pas (fiche et cartes). */
form.variations_form [data-swatches-type] .ct-swatch-container[aria-pressed="true"],
.ct-card-variation-swatches [data-swatches-type] .ct-swatch-container[aria-pressed="true"] {
	pointer-events: none;
}