/**
 * Innova Shop - card de la grilla de productos.
 *
 * Esto se ve en la tienda de ANCERS, así que acá no va branding nuestro: los
 * tamaños y los colores salen del Figma del cliente. Y a propósito no hay CSS
 * de grilla ni de card: eso lo controla Oxygen, y competir con él termina en una
 * pelea de especificidad.
 */

/* ------------------------------------------------- Foto de la card --- */

/* La excepción a la regla de arriba, pedida por Leandro el 10/09/2026: la foto
   de la card llena su caja y se recorta al centro, venga del tamaño que venga.

   El selector que se pidió era `.woocommerce img, .woocommerce-page img`, pero
   en este sitio `.woocommerce` es una clase del <body>, así que habría estirado
   TODAS las imágenes de cualquier página de la tienda: el logo del navbar, las
   miniaturas del carrito lateral, los logos de medios de pago del checkout. Se
   conserva la forma del selector y se acota a la foto del producto.

   Dos clases a propósito: le ganan en especificidad al `.woocommerce img` de
   WooCommerce (que pone height:auto) y a la clase sola de Oxygen, sin
   !important. Oxygen ya pone casi lo mismo en universal.css; esto hace que la
   foto no dependa de que nadie edite esa clase. */
.woocommerce .card__featured--img,
.woocommerce-page .card__featured--img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* --------------------------------------------------- Círculos de color --- */

.is-colores {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	padding: 0 1px;
}

.is-color {
	--is-c: #ccc;
	display: block;
	/* 14px desde el 10/09/2026 (antes 18). La ficha usa la misma medida en
	   swatches.css: si se toca una, se toca la otra. */
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--is-c);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
	transition: transform 0.12s ease;
}

/* Los claros necesitan un anillo visible o desaparecen sobre el fondo. */
.is-color.is-light {
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.22);
}

.is-color:hover,
.is-color:focus-visible {
	transform: scale(1.12);
}

.is-color:focus-visible {
	outline: 2px solid #231f20;
	outline-offset: 2px;
}

.is-color--mas {
	font-size: 11px;
	/* La altura del círculo, para que el "+3" no agrande la fila. */
	line-height: 14px;
	color: #666;
}

/* El área táctil llega a 44px sin agrandar el círculo. */
@media (hover: none) {
	.is-color {
		position: relative;
	}

	.is-color::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 44px;
		height: 44px;
		transform: translate(-50%, -50%);
	}
}

/* --------------------------------------------------- Cambio de imagen --- */

/*
 * El fundido al cambiar de color.
 *
 * Va sobre la opacidad y no sobre display, para que el cambio se lea como un
 * pase y no como un corte.
 *
 * La transición vive acá, en la imagen, y NO en .is-cambiando. Si estuviera en
 * la clase que se pone y se saca, la vuelta a opacidad 1 sería instantánea y se
 * vería solo la mitad del fundido.
 *
 * Los 120ms tienen que coincidir con la constante FUNDIDO de loop-colors.js: el
 * JS espera ese tiempo antes de cambiar la foto, y si los números se separan, o
 * cambia antes de que la opacidad haya bajado (y se ve el corte igual) o espera
 * de más (y la card queda apagada un instante de más).
 */
.is-foto-color {
	transition: opacity 120ms ease;
}

.is-foto-color.is-cambiando {
	opacity: .2;
}

@media (prefers-reduced-motion: reduce) {
	.is-color,
	.is-foto-color {
		transition: none;
	}

	.is-foto-color.is-cambiando {
		opacity: 1;
	}
}

/* ------------------------------------------------------------- Precio --- */

/*
 * El bloque de precio (Tarea 9): el número grande, su rótulo ("la caja de
 * 6", "la unidad", "el set") y, en el modo que lo agrega, el unitario de
 * referencia. IS_Lote_Precio::bloque() arma el mismo HTML acá y en la
 * ficha (ficha.css): lo único que cambia entre las dos pantallas es el
 * modo, que acá sale del ajuste (IS_Settings::modo_precio()) y en la ficha
 * está fijo. Dos líneas y no más, o la card crece y rompe la grilla.
 */
.is-lote--grilla {
	display: flex;
	flex-direction: column;
	font-size: 14px;
	line-height: 13px;
}

/* Las tres reglas de abajo van prefijadas con la clase contenedora, y no
   como clases pelotas, para ganarle en especificidad a universal.css de
   Oxygen sin !important: loop.css carga ANTES que universal.css, así que
   con un solo selector los dos empatan y gana Oxygen (mismo criterio que
   ficha.css, Tarea 8). */

/* El número grande: el precio que se cobra. */
.is-lote--grilla .is-lote__principal {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
}

/* Su rótulo: "la caja de 6", "la unidad", "el set". */
.is-lote--grilla .is-lote__rotulo {
	display: block;
	font-size: 12px;
	color: #666;
	margin-top: 2px;
}

/* El unitario de referencia, cuando el modo lo agrega como dato de apoyo
   (modo caja_unidad, el de fábrica). Más chico y más apagado que el
   principal porque es un dato de comparación, no el precio que se cobra. */
.is-lote--grilla .is-lote__secundario {
	display: block;
	font-size: 11px;
	color: #999;
	margin-top: 1px;
}

/* El dato de "U x Caja" ([ancers_unid_caja]), al lado del código y no
   adentro del bloque de precio: por eso lleva su propio par de clases en
   vez de depender de .is-lote--grilla como ancestro. Dos clases en el mismo
   elemento, mismo motivo que arriba: ganarle a Oxygen sin !important. */
.is-lote.is-lote__ficha-dato {
	display: inline-block;
	font-size: 12px;
	color: #666;
}

/* El rótulo de audiencia ("Precio minorista", el nombre de la categoría
   mayorista): shortcode_precio() lo pega al final del bloque llamando a
   shortcode_label() (arreglo del Critical 1 de la revisión: antes viajaba
   empaquetado adentro de get_price_html() y esta regla vivía en
   .is-precio .is-price-label, que dejó de existir). shop.css ya trae una
   base para .is-price-label (inline, versalitas, pensada para cuando no
   hay una card angosta alrededor); acá se lo pisa para que caiga en su
   propia línea debajo del precio, como en el diseño. */
.is-lote--grilla .is-price-label {
	display: block;
	margin: 4px 0 0;
	font-size: 9px;
	line-height: 10px;
	color: #666;
	opacity: 1;
	text-transform: none;
	letter-spacing: 0;
}

@media screen and (max-width: 768px) {
	.is-lote--grilla .is-lote__rotulo,
	.is-lote--grilla .is-lote__secundario {
		font-size: 10px;
	}

	.is-lote--grilla .is-price-label {
		font-size: 10px;
	}
}

/* -------------------------------------------------------- Categorías --- */

.is-cats__titulo {
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 16px;
	letter-spacing: 0.2px;
}

.is-cats__links {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.is-cats__link {
	font-size: 11px;
	line-height: 10px;
	color: inherit;
	text-decoration: none;
}

.is-cats__link:hover,
.is-cats__link.is-activo {
	text-decoration: underline;
}

.is-cats__link.is-activo {
	font-weight: 600;
}

/* Los dos grupos, con separación fija: el Figma los reparte dentro de una caja
   de 424px, pero eso se rompe en cuanto Ancers agrega una línea. */
.is-cats__grupo + .is-cats__grupo {
	margin-top: 32px;
}

/* La barra de desplazamiento propia solo tiene sentido cuando la fila se
   desborda, y eso solo pasa en mobile. En escritorio no existe. */
.is-cats__barra {
	display: none;
}

/*
 * 991px y no 768px: es el breakpoint de Oxygen.
 *
 * A partir de ahí `.categoria-grid` toma `order:-1` y el bloque deja de ser una
 * columna al costado de la grilla para pasar a ser una banda a todo el ancho
 * arriba de los productos. Con el corte en 768 quedaba una tierra de nadie
 * entre 768 y 991 donde el bloque ya estaba arriba pero seguía apilado en
 * vertical, y las 19 categorías se comían la pantalla entera antes del primer
 * producto.
 */
@media screen and (max-width: 991px) {
	.is-cats__grupo + .is-cats__grupo {
		margin-top: 18px;
	}

	.is-cats__titulo {
		margin-bottom: 6px;
	}

	.is-cats__links {
		flex-direction: row;
		gap: 22px;
		overflow-x: auto;
		/* Que el gesto no arrastre la página cuando la fila llegó al final. */
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		/* La nativa se esconde en los dos motores y la reemplaza
		   `.is-cats__barra`: en Windows es una barra gris gruesa que no tiene
		   nada que ver con el diseño, y en un teléfono no se dibuja hasta que
		   tocás, que es justo cuando ya no hace falta que avise. */
		scrollbar-width: none;
	}

	.is-cats__links::-webkit-scrollbar {
		display: none;
	}

	.is-cats__link {
		display: flex;
		align-items: center;
		/* Sin esto flex encoge los ítems para que entren todos y no hay scroll
		   que valga: la fila nunca se desborda y los nombres se parten. */
		flex: 0 0 auto;
		/* Área táctil. El texto son 13px, así que sin esto el blanco quedaría
		   en 20px de alto. */
		min-height: 34px;
		/* "Black and White" en dos renglones rompe la altura de la fila. */
		white-space: nowrap;
	}

	/* La clase la pone el JS y solo cuando midió que sobra ancho. Dibujar la
	   barra igual sería prometer una cola que no existe. */
	.is-cats__grupo.is-desborda .is-cats__barra {
		display: block;
		position: relative;
		height: 3px;
		margin-top: 4px;
		background: rgba(0, 0, 0, .08);
	}

	.is-cats__thumb {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 20%;
		background: rgba(0, 0, 0, .45);
		/* El JS mueve el pulgar con translateX y no con `left`: transform no
		   dispara layout y el pulgar sigue al dedo sin arrastrarse. */
		will-change: transform;
	}
}

/* Un color agotado se muestra igual que los demás y se puede clickear: la
   ficha lo respeta y ahí 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. */