/**
 * Innova Products - Colour variation swatches (single product).
 */

/* Hide the native <select> but keep it in the DOM for WooCommerce's JS. */
.ipi-swatch-select {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.ipi-swatches {
	display: flex;
	flex-wrap: wrap;
	/* Misma medida que los círculos de la card de la grilla (loop.css). El
	   Figma da 15,5 en la ficha y 15 en la card: no hay razón para sostener
	   dos números para el mismo elemento. */
	gap: 15px;
	align-items: center;
	margin: 4px 0 2px;
}

.ipi-swatch {
	--ipi-sw: #ccc;
	position: relative;
	padding: 0;
	border: 1px solid #DDD;
	border-radius: 50%;
	background: var(--ipi-sw);
	cursor: pointer;
	transition: transform 0.12s ease;
	outline: none;
}

/* La medida, 14px desde el 10/09/2026 (antes 22): la misma que el círculo
   de la card de la grilla (.is-color en loop.css). Si se toca una, se toca
   la otra.
   Va en su propia regla y con el contenedor adelante porque universal.css de
   Oxygen tiene un `.ipi-swatch` con 18px, carga después y con una clase sola
   empata y gana. Así se veía 18 aunque acá dijera otra cosa. */
.ipi-swatches .ipi-swatch {
	width: 14px;
	height: 14px;
}

/* El borde de 1px lo llevan todos, así que un color claro ya no desaparece
   sobre blanco y esta clase no necesita hacer nada extra. Se conserva porque
   el PHP la sigue emitiendo y porque es el gancho para diferenciarlos si
   alguna vez hace falta. */

.ipi-swatch:hover {
	transform: scale(1.08);
}

/* Para quien navega con teclado. Va en outline y no en box-shadow, que está
   pedido que no exista en este control. */
.ipi-swatch:focus-visible {
	outline: 2px solid #18181B;
	outline-offset: 2px;
}

/* El círculo elegido NO se marca de ninguna manera, y es a propósito
   (decisión de Leandro del 12/08/2026): quien mira ve qué color eligió en la
   foto grande, que ahora sigue al color. Marcar también el círculo sería decir
   dos veces lo mismo.
   La clase is-active se sigue poniendo porque swatches.js la usa para llevar el
   estado, y queda como gancho por si alguna vez hace falta distinguirlo. */

/* Un color agotado se muestra igual que los demás y se puede elegir: al
   elegirlo, el bloque de compra pasa a "Agotado" con el botón deshabilitado,
   que es donde el cliente se entera.
   La clase se sigue emitiendo a propósito: es el gancho para volver a
   distinguirlos por CSS sin tocar el plugin. */