/*
 * Pastilles de variantes.
 *
 * Aucune couleur en dur : tout vient des jetons du thème Dosage, avec un repli
 * pour les boutiques qui utiliseraient l'extension sous un autre thème.
 */

.dosage-swatches {
	--ds-encre: var(--wp--preset--color--ink, #14110e);
	--ds-papier: var(--wp--preset--color--paper, #fff);
	--ds-filet: var(--wp--preset--color--line, #e6e1d9);
	--ds-second: var(--wp--preset--color--data, #4c453d);
	--ds-argile: var(--wp--preset--color--clay, #e5dcd1);
	--ds-rayon: var(--wp--custom--radius, 0);
	--ds-mono: var(--wp--preset--font-family--mono, ui-monospace, monospace);

	margin-block: 16px;
}

/*
 * Le menu natif reste dans le document — il porte la valeur envoyée au panier
 * et il fait vivre le formulaire de variations de WooCommerce. Il est
 * seulement mis hors de vue. Surtout pas « display: none » : certaines
 * extensions lisent sa position ou sa hauteur, et un champ retiré du rendu
 * cesse d'être mesurable.
 */
.dosage-swatches__natif {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.dosage-swatches__champ {
	margin: 0;
	padding: 0;
	border: 0;
}

/*
 * Le libelle de WooCommerce disparait sur les rangees que l'on habille.
 * Deux raisons : il pointe vers un menu desormais masque, ce qu'un lecteur
 * d'ecran ne pardonne pas ; et dans une cellule de tableau il se centre
 * verticalement sur une rangee devenue haute, donc il finit sous les
 * pastilles qu'il est cense annoncer.
 *
 * La regle ne s'applique qu'aux rangees qui portent des pastilles : si le
 * module est eteint, le libelle natif revient tout seul.
 */
.variations tr:has( [data-dosage-swatches] ) > th.label {
	display: none;
}

.dosage-swatches__legende {
	display: block;
	float: none;
	width: auto;
	padding: 0;
	margin: 0 0 10px;
	font-family: var(--ds-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ds-encre);
}

/* Le libelle occupe maintenant toute la largeur : la cellule de valeur aussi. */
.variations tr:has( [data-dosage-swatches] ) > td.value {
	display: block;
	width: 100%;
	padding-left: 0;
}

.dosage-swatches__choisie {
	margin: 0 0 12px;
	font-family: var(--ds-mono);
	font-size: 12.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ds-second);
	min-height: 1.4em;
}

.dosage-swatches__groupe + .dosage-swatches__groupe {
	margin-top: 20px;
}

.dosage-swatches__ton {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 8px;
	font-family: var(--ds-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ds-second);
}

.dosage-swatches__compte {
	font-variant-numeric: tabular-nums;
	opacity: 0.7;
}

.dosage-swatches__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------- La pastille ---------- */
/*
 * L'extension doit tenir sous n'importe quel theme, y compris un theme qui
 * style l'element « label » nu — c'est courant, et ca sortirait les noms de
 * teintes en capitales. On repose la typographie explicitement plutot que de
 * l'heriter.
 */
.dosage-swatch,
.dosage-swatch .dosage-swatch__nom {
	font-family: inherit;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

.dosage-swatch {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 6px 12px 6px 6px;
	background: var(--ds-papier);
	border: 1px solid var(--ds-filet);
	border-radius: var(--ds-rayon);
	cursor: pointer;
	position: relative;
}

.dosage-swatch:hover {
	border-color: var(--ds-encre);
}

/* Le bouton radio réel : invisible, mais bien là. C'est lui qui porte le
   clavier, le groupe de flèches et l'annonce du lecteur d'écran. */
.dosage-swatch__input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.dosage-swatch:has(.dosage-swatch__input:focus-visible) {
	outline: 2px solid var(--ds-encre);
	outline-offset: 2px;
}

/* L'état choisi ne repose pas sur la seule couleur : le trait double
   d'épaisseur et le nom passe en gras. */
.dosage-swatch--choisie {
	border-color: var(--ds-encre);
	border-width: 2px;
	padding: 5px 11px 5px 5px;
}

.dosage-swatch--choisie .dosage-swatch__nom {
	font-weight: 600;
}

.dosage-swatch__pastille {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	background: var(--shade-color, var(--ds-argile));
	background-size: cover;
	background-position: center;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 50%;
}

.dosage-swatch__texte {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.dosage-swatch__nom {
	font-size: 15px;
	line-height: 1.2;
	white-space: nowrap;
}

.dosage-swatch__code {
	font-family: var(--ds-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--ds-second);
}

/* ---------- Épuisé et indisponible ---------- */
/*
 * Une teinte épuisée reste sélectionnable : on la barre, on l'annonce en
 * toutes lettres, et c'est le bouton d'achat qui se ferme. Un bouton désactivé
 * sortirait du clavier et du lecteur d'écran — la cliente ne saurait même pas
 * que la teinte existe.
 */
.dosage-swatch--epuise .dosage-swatch__nom {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.dosage-swatch__epuise {
	font-family: var(--ds-mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ds-second);
}

/* Valeur que le menu ne propose plus, parce qu'un autre attribut a été
   choisi. Marquée, jamais retirée. */
.dosage-swatch--indisponible {
	opacity: 0.45;
}

.dosage-swatch--indisponible .dosage-swatch__pastille {
	position: relative;
	overflow: hidden;
}

.dosage-swatch--indisponible .dosage-swatch__pastille::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom right,
		transparent calc(50% - 1px),
		currentColor calc(50% - 1px),
		currentColor calc(50% + 1px),
		transparent calc(50% + 1px)
	);
	opacity: 0.55;
}

/* ---------- Petit écran ---------- */
@media (max-width: 480px) {
	.dosage-swatch__nom {
		white-space: normal;
	}

	.dosage-swatches__liste {
		gap: 6px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dosage-swatch {
		transition: none !important;
	}
}