/**
 * Catálogo — estilos del frontend.
 *
 * Mobile-first: todo lo de acá se diseñó primero para una pantalla de teléfono,
 * que es de donde va a venir casi todo el tráfico del piloto. Los targets
 * táctiles no bajan de 44px y nada depende de hover.
 */

/* ── Precio por unidad de medida ───────────────────────────────────────────
 *
 * Va pegado al precio, un escalón más abajo en jerarquía: es la referencia
 * para comparar, no el precio que se paga. Se muestra en línea para que el
 * navegador decida si entra al lado o pasa abajo según el ancho, en vez de
 * forzar un salto de línea que en desktop queda suelto.
 */
.super-cat-pum {
	display: inline-block;
	font-size: 0.8125em;
	font-weight: 400;
	line-height: 1.3;
	opacity: 0.75;
	white-space: nowrap;
}

/* Dentro del carrito y del checkout de bloques el precio ya viene chico:
 * achicarlo otra vez lo dejaría ilegible. */
.wc-block-components-product-price .super-cat-pum,
.wc-block-cart-item__prices .super-cat-pum {
	font-size: 0.9em;
}

/* ── Selector de peso ──────────────────────────────────────────────────── */

.super-cat-peso {
	margin: 0 0 1em;
}

.super-cat-peso__etiqueta {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35em;
}

.super-cat-peso__select {
	/* Ancho completo en mobile: es la decisión principal de esta pantalla.
	 * 16px de tipografía es el mínimo para que iOS no haga zoom al enfocar. */
	width: 100%;
	max-width: 22rem;
	min-height: 44px;
	padding: 0.5em 0.75em;
	font-size: 16px;
	line-height: 1.4;
}

.super-cat-peso__banda,
.super-cat-peso__nota {
	margin: 0.5em 0 0;
	font-size: 0.875em;
	line-height: 1.4;
}

.super-cat-peso__nota {
	opacity: 0.75;
}

/*
 * La línea con el peso concreto arranca oculta y sólo aparece cuando el script
 * la puede mantener al día. Sin JavaScript queda la nota general, que es cierta
 * para cualquier opción; mostrar un número que puede haber quedado viejo sería
 * peor que no mostrarlo.
 */
.super-cat-peso__banda {
	display: none;
}

.super-cat-peso--js .super-cat-peso__banda {
	display: block;
}