/**
 * ESB Variation Swatches
 * Variables sobrescribibles desde el child theme o desde Elementor.
 */

:root {
	--esb-swatch-size: 38px;
	--esb-swatch-gap: 10px;
	--esb-swatch-radius: 50%;
	--esb-swatch-ring: #111111;
	--esb-swatch-border: rgba(0, 0, 0, 0.14);
	--esb-swatch-text: inherit;
}

/* El select nativo sigue en el DOM (WooCommerce lo necesita) pero oculto. */
.esb-swatches__select {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.esb-swatches {
	margin: 0 0 6px;
}

.esb-swatches__head {
	margin-bottom: 8px;
	font-size: 0.9em;
	line-height: 1.3;
}

.esb-swatches__selected {
	font-weight: 600;
	color: var(--esb-swatch-text);
}

.esb-swatches__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--esb-swatch-gap);
	align-items: center;
}

/* --- Botón base --- */
.esb-swatch {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	cursor: pointer;
	line-height: 1;
	transition: transform 0.12s ease;
}

.esb-swatch:hover:not(.is-disabled) {
	transform: translateY(-1px);
}

.esb-swatch:focus-visible {
	outline: 2px solid var(--esb-swatch-ring);
	outline-offset: 3px;
}

/* --- Muestra de color --- */
.esb-swatch__color {
	display: block;
	width: var(--esb-swatch-size);
	height: var(--esb-swatch-size);
	border-radius: var(--esb-swatch-radius);
	border: 1px solid var(--esb-swatch-border);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

/* Colores muy claros: borde más marcado para que no desaparezcan. */
.esb-swatch.is-light .esb-swatch__color {
	border-color: rgba(0, 0, 0, 0.28);
}

/* Seleccionado: anillo exterior. */
.esb-swatch.is-selected .esb-swatch__color {
	box-shadow:
		0 0 0 2px #fff,
		0 0 0 4px var(--esb-swatch-ring);
}

/* --- Swatch de texto (atributos sin color) --- */
.esb-swatch__text {
	display: block;
	padding: 8px 16px;
	min-width: 40px;
	border: 1px solid var(--esb-swatch-border);
	border-radius: 999px;
	font-size: 0.88em;
	line-height: 1.2;
	color: var(--esb-swatch-text);
	background: transparent;
}

.esb-swatch.is-selected .esb-swatch__text {
	border-color: var(--esb-swatch-ring);
	background: var(--esb-swatch-ring);
	color: #fff;
}

/* --- No disponible --- */
.esb-swatch.is-disabled {
	cursor: not-allowed;
	opacity: 0.4;
}

.esb-swatch.is-disabled::after {
	content: "";
	position: absolute;
	top: 50%;
	left: -2px;
	right: -2px;
	height: 1px;
	background: currentColor;
	transform: rotate(-45deg);
	pointer-events: none;
}

.esb-swatch.is-disabled:hover {
	transform: none;
}

/* Móvil: swatches algo mayores para el dedo. */
@media (max-width: 600px) {
	:root {
		--esb-swatch-size: 42px;
		--esb-swatch-gap: 12px;
	}
}

/* Modo oscuro: el anillo de selección debe seguir viéndose. */
@media (prefers-color-scheme: dark) {
	:root {
		--esb-swatch-ring: #f2f2f2;
		--esb-swatch-border: rgba(255, 255, 255, 0.28);
	}

	.esb-swatch.is-selected .esb-swatch__color {
		box-shadow:
			0 0 0 2px #1a1a1a,
			0 0 0 4px var(--esb-swatch-ring);
	}

	.esb-swatch.is-selected .esb-swatch__text {
		color: #1a1a1a;
	}
}