/*
 * Controles de variación en la ficha de producto (swatches de color, chips
 * de texto para talla/material/etc.). El <select> nativo de WooCommerce se
 * deja en el DOM (oculto acá) para que la lógica de variaciones siga
 * funcionando sin tocarla — ver class-color-swatches.php.
 */
.variations select {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cohasa-variacion-opciones {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.color-swatch {
	--swatch-color: var(--color-line-strong, #7f8a9b);
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: var(--swatch-color);
	border: 2px solid var(--color-line, #d8dde5);
	padding: 0;
	cursor: pointer;
	position: relative;
	flex: 0 0 auto;
}

.color-swatch.is-selected {
	border-color: var(--color-ink, #0d1117);
	box-shadow: 0 0 0 2px var(--color-bg, #fff), 0 0 0 3px var(--color-ink, #0d1117);
}

.color-swatch:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring, 0 0 0 3px #fff, 0 0 0 5px #0d1117);
}

/* Sin transform en hover a propósito: desplaza el botón justo cuando el
   mouse se mueve antes del clic (real en usuarios, no solo en pruebas
   automatizadas) y puede hacer que el clic aterrice fuera del botón. */
.color-swatch:hover {
	box-shadow: 0 0 0 2px var(--color-bg, #fff), 0 0 0 3px var(--color-ink-soft, #47536b);
}
.color-swatch.is-selected:hover {
	box-shadow: 0 0 0 2px var(--color-bg, #fff), 0 0 0 3px var(--color-ink, #0d1117);
}

/* Chip de texto para atributos que no son color (Talla, Material, etc.) —
   mismo patrón del mockup "Marketplace funcional" (.variant-chip). Borde
   completo en los 4 lados siempre (regla "todo o nada" de design.md). */
.variant-chip {
	min-width: 44px;
	min-height: 44px;
	padding: 8px 16px;
	border: 1.5px solid var(--color-line, #d8dde5);
	border-radius: var(--radius, 8px);
	background: var(--color-surface, #fff);
	color: var(--color-ink, #0d1117);
	font-family: var(--font-body, inherit);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.variant-chip.is-selected {
	border-color: var(--color-ink, #0d1117);
	background: var(--color-ink, #0d1117);
	color: var(--color-bg, #fff);
}

.variant-chip:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring, 0 0 0 3px #fff, 0 0 0 5px #0d1117);
}

.variant-chip.is-disabled,
.color-swatch:disabled {
	opacity: .4;
	cursor: not-allowed;
	/* Nunca solo opacidad como único indicador — ver design.md: color no es
	   el único portador de significado. El chip deshabilitado va tachado. */
	background-image: linear-gradient(to top left, transparent calc(50% - 1px), var(--color-line, #d8dde5), transparent calc(50% + 1px));
}