/* =========================================================================
 * CERVO — CATÁLOGO (rediseño nativo)
 *
 * Se carga SOLO en tienda/categoría/etiqueta y SOLO con el candado ?cervo=1
 * (ver CAPA 17 en cervo-optimizaciones.php).
 *
 * IDEA RECTORA — la inversión.
 * El catálogo es claro (hueso). Las prendas en oferta INVIERTEN a tinta con
 * tipografía en oro. Destacan más que con un adhesivo rojo justamente porque
 * todo lo demás es claro, y leen como "elevado" en vez de "saldado", que es lo
 * que le conviene a la marca. De paso resuelve el choque rojo-vs-oro que ya
 * estaba documentado en el proyecto: aquí no entra ni un rojo.
 *
 * Todo va bajo .cvcat para no filtrar estilos al resto del sitio.
 * ========================================================================= */

.cvcat {
	/* Paleta: la de marca, sin inventar nada nuevo. */
	--cvc-ink:    #141210;
	--cvc-ink-2:  #241f1a;
	--cvc-gold:   #c8a96e;
	--cvc-gold-d: #8a6d3b;   /* legible sobre fondo claro */
	--cvc-bone:   #faf9f7;
	--cvc-ice:    #e5e2dc;
	--cvc-mute:   #7a736c;

	--cvc-gap:    clamp(0.75rem, 0.4rem + 1.4vw, 1.75rem);
	--cvc-pad:    clamp(1rem, 0.4rem + 2.6vw, 3.5rem);
	--cvc-radius: 2px;   /* casi recto: la ropa deportiva no pide esquinas blandas */

	background: var(--cvc-bone);
	color: var(--cvc-ink);
	font-family: var(--cv-sans, 'Jost', 'Segoe UI', sans-serif);
}

/* El contenedor del tema encajona todo a 1170/1300px. El catálogo respira
   a ancho completo: las fotos son lo que vende.
   Mismo recurso que ya usa la portada (.page-template-cervo-inicio #content). */
.woocommerce-shop #content,
.woocommerce-shop .site-content,
.tax-product_cat #content,
.tax-product_cat .site-content,
.tax-product_tag #content,
.tax-product_tag .site-content {
	max-width: 100%;
	padding: 0;
	margin: 0;
}

.cvcat {
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
	padding-inline: var(--cvc-pad);
	padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(3rem, 2rem + 4vw, 6rem);
	/* Sin esto, ancho 100 % + padding = más ancho que la pantalla y en móvil
	   se desbordaba en horizontal (la 2.ª tarjeta quedaba cortada). */
	box-sizing: border-box;
	overflow-x: clip;
}

.cvcat *,
.cvcat *::before,
.cvcat *::after { box-sizing: border-box; }

/* -------------------------------------------------------------------------
 * CABECERA
 * ---------------------------------------------------------------------- */

.cvcat-head {
	margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

.cvcat-head__in {
	max-width: var(--cv-measure, 68ch);
}

.cvcat-head__eyebrow {
	margin: 0 0 0.65rem;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--cvc-gold-d);
}

.cvcat-head__title {
	margin: 0;
	font-family: var(--cv-serif, 'Cormorant Garamond', Georgia, serif);
	font-size: clamp(2.5rem, 1.6rem + 4vw, 5.5rem);
	font-weight: 300;
	line-height: 0.95;
	letter-spacing: -0.015em;
	color: var(--cvc-ink);
}

.cvcat-head__text {
	margin: 1rem 0 0;
	font-size: var(--cv-t-md, 0.95rem);
	line-height: 1.6;
	color: var(--cvc-mute);
}

.cvcat-head__count {
	margin: 1.1rem 0 0;
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cvc-mute);
}

/* La cabecera del SALE invierte: mismo gesto que las tarjetas en oferta. */
.cvcat--sale .cvcat-head {
	position: relative;
	margin-inline: calc(var(--cvc-pad) * -1);
	padding: clamp(2rem, 1.4rem + 3vw, 4.5rem) var(--cvc-pad);
	background: var(--cvc-ink);
}

.cvcat--sale .cvcat-head__title,
.cvcat--sale .cvcat-head__eyebrow { color: var(--cvc-gold); }
.cvcat--sale .cvcat-head__text,
.cvcat--sale .cvcat-head__count   { color: rgba(229, 226, 220, 0.72); }

/* -------------------------------------------------------------------------
 * TIRA DE CATEGORÍAS (sustituye al sidebar)
 * ---------------------------------------------------------------------- */

/* Las categorías CABEN todas: bajan de línea en vez de cortarse.
   Antes era un carrete horizontal y en móvil la última quedaba a medias
   ("UNIS…"), así que había categorías que sencillamente no se veían. */
.cvcat-rail {
	margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem);
}

.cvcat-rail__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cvcat-chip {
	display: block;
	padding: 0.5rem 1.05rem;
	border: 1px solid var(--cvc-ice);
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--cvc-ink);
	text-decoration: none;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.cvcat-chip:hover,
.cvcat-chip:focus-visible {
	border-color: var(--cvc-ink);
	background: var(--cvc-ink);
	color: var(--cvc-bone);
}

.cvcat-chip.is-on {
	border-color: var(--cvc-ink);
	background: var(--cvc-ink);
	color: var(--cvc-bone);
}

/* La pastilla del SALE lleva el oro, para que se encuentre sola. */
/* ── «Nuevo» ──
   No es una categoría: es el filtro por fecha de publicación (ver
   cervo_cat_url_nuevo()). Lleva contorno de tinta y el destello en oro
   oscuro —#8a6d3b, el que sí se lee sobre fondo claro— para que se
   distinga de SALE, que ya usa el oro claro en el borde.
   ⚠️ El chip base es `display: block`; hace falta inline-flex para poner
   el destello al lado del texto sin que se caiga a otra línea. */
.cvcat-chip--nuevo {
	display: inline-flex;
	align-items: center;
	gap: 0.42rem;
	border-color: var(--cvc-ink);
	color: var(--cvc-ink);
	font-weight: 500;
}
.cvcat-chip--nuevo .cvcat-destello {
	color: var(--cvc-gold-d);
	flex: none;
	transition: color .18s ease, transform .5s cubic-bezier(0.22, 1, 0.36, 1);
}
.cvcat-chip--nuevo.is-on,
.cvcat-chip--nuevo:hover,
.cvcat-chip--nuevo:focus-visible {
	background: var(--cvc-ink);
	border-color: var(--cvc-ink);
	color: #fff;
}
/* Sobre la tinta el oro claro sí se lee (8,4:1), y ahí es donde brilla. */
.cvcat-chip--nuevo.is-on .cvcat-destello,
.cvcat-chip--nuevo:hover .cvcat-destello,
.cvcat-chip--nuevo:focus-visible .cvcat-destello {
	color: var(--cvc-gold);
	transform: rotate(90deg) scale(1.12);
}

@media (prefers-reduced-motion: reduce) {
	.cvcat-chip--nuevo .cvcat-destello { transition: none; }
	.cvcat-chip--nuevo.is-on .cvcat-destello,
	.cvcat-chip--nuevo:hover .cvcat-destello { transform: none; }
}

.cvcat-chip--sale {
	border-color: var(--cvc-gold);
	color: var(--cvc-gold-d);
	font-weight: 500;
}

.cvcat-chip--sale.is-on,
.cvcat-chip--sale:hover,
.cvcat-chip--sale:focus-visible {
	background: var(--cvc-gold);
	border-color: var(--cvc-gold);
	color: var(--cvc-ink);
}

/* -------------------------------------------------------------------------
 * BARRA DE ORDEN
 * ---------------------------------------------------------------------- */

.cvcat-bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.6rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--cvc-ice);
	margin-bottom: var(--cvc-gap, 1.5rem);
}

.cvcat-bar__label {
	font-size: 0.68rem;
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--cvc-mute);
}

.cvcat-bar .woocommerce-ordering { margin: 0; }

/* El desplegable nativo trae el cromo gris del sistema, que rompe con todo lo
   demás. Se quita (appearance:none) y se dibuja la flecha con un SVG en línea:
   sin petición extra y hereda el color de marca. */
.cvcat-bar .orderby {
	-webkit-appearance: none;
	appearance: none;
	max-width: 100%;
	padding: 0.62rem 2.4rem 0.62rem 1.05rem;
	border: 1px solid var(--cvc-ice);
	border-radius: 999px;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%238a6d3b' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	font-family: var(--cv-sans, 'Jost', sans-serif);
	font-size: 0.78rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1;
	color: var(--cvc-ink);
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease;
}

.cvcat-bar .orderby:hover { border-color: var(--cvc-ink); }

.cvcat-bar .orderby:focus-visible {
	border-color: var(--cvc-ink);
	outline: 2px solid var(--cvc-gold-d);
	outline-offset: 2px;
}

/* El menú desplegado lo pinta el sistema operativo: no se puede estilar.
   Al menos se fuerza el color del texto de las opciones. */
.cvcat-bar .orderby option { color: var(--cvc-ink); }

@media (max-width: 480px) {
	.cvcat-bar { justify-content: space-between; }
	.cvcat-bar .orderby { font-size: 0.74rem; padding-right: 2.1rem; }
}

/* -------------------------------------------------------------------------
 * PORTADA DE CATEGORÍA (solo móvil)
 * Imagen vertical de campaña. En escritorio estorba: la cabecera ya cumple
 * ese papel y una vertical dejaría el catálogo debajo del pliegue.
 * ---------------------------------------------------------------------- */

.cvcat-portada {
	display: none;
	margin: 0 calc(var(--cvc-pad) * -1) clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
	line-height: 0;
}

.cvcat-portada img,
.cvcat-portada picture {
	width: 100%;
	height: auto;
	display: block;
}

/* Móvil: se muestra si hay imagen vertical configurada. */
@media (max-width: 768px) {
	.cvcat-portada.has-mobile { display: block; }
}

/* Escritorio: SOLO si hay imagen apaisada configurada. Mientras el hueco de
   escritorio esté vacío, aquí no aparece nada (que es el estado de ahora). */
@media (min-width: 769px) {
	.cvcat-portada.has-desktop { display: block; }
}

/* Con portada, la cabecera se aprieta: la imagen ya anuncia la sección. */
.cvcat-portada.has-mobile + .cvcat-head,
.cvcat-portada.has-desktop + .cvcat-head {
	margin-bottom: clamp(1rem, 0.8rem + 1vw, 1.5rem);
}

/* -------------------------------------------------------------------------
 * REJILLA
 * 3 columnas en escritorio (no 4): con 3 la foto crece un tercio, y en ropa
 * la silueta es el argumento de venta. En móvil 2, para poder comparar.
 * ---------------------------------------------------------------------- */

.cvcat ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cvc-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cvcat ul.products::before,
.cvcat ul.products::after { content: none; }

@media (min-width: 700px)  { .cvcat ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .cvcat ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Neutraliza el layout flotado del tema viejo. */
.cvcat ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
}

/* -------------------------------------------------------------------------
 * TARJETA
 * ---------------------------------------------------------------------- */

.cvcat-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--cvc-ice);
	border-radius: var(--cvc-radius);
	overflow: hidden;
	transition: border-color .2s ease, transform .2s ease;
}

.cvcat-card:hover { border-color: var(--cvc-ink); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.cvcat-card:hover { transform: translateY(-3px); }
}

.cvcat-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--cvc-ice);
}

/* -------------------------------------------------------------------------
 * CARRUSEL DE LA TARJETA
 *
 * Un solo marcado, dos comportamientos, SIN JavaScript:
 *   · Táctil (móvil/tablet): carrete horizontal con scroll-snap → se desliza.
 *   · Ratón (escritorio):    pila con fundido a la 2.ª foto al pasar el cursor.
 *
 * La bifurcación es @media (hover: hover), que detecta puntero fino de verdad;
 * no se adivina por ancho de pantalla (una tablet ancha seguiría siendo táctil).
 * ---------------------------------------------------------------------- */

.cvcat-gal {
	display: flex;
	height: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

.cvcat-gal::-webkit-scrollbar { display: none; }

.cvcat-gal__slide {
	flex: 0 0 100%;
	height: 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

.cvcat-gal__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Puntos: solo indican cuántas fotos hay. En táctil son la pista de que
   el carrete se desliza. */
.cvcat-gal__dots {
	position: absolute;
	left: 50%;
	bottom: 0.6rem;
	translate: -50% 0;
	display: flex;
	gap: 0.28rem;
	padding: 0.28rem 0.5rem;
	border-radius: 999px;
	background: rgba(20, 18, 16, .34);
	backdrop-filter: blur(4px);
}

.cvcat-gal__dots i {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba(250, 249, 247, .5);
	transition: width .22s ease, background-color .22s ease;
}

/* El punto activo se alarga en cápsula además de aclararse: el cambio de
   forma se percibe aunque la foto de fondo sea clara. */
.cvcat-gal__dots i.is-on {
	width: 12px;
	border-radius: 999px;
	background: var(--cvc-gold);
}

@media (prefers-reduced-motion: reduce) {
	.cvcat-gal__dots i { transition: none; }
}

/* --- Escritorio con ratón: pila + fundido al pasar el cursor --- */
@media (hover: hover) and (pointer: fine) {

	.cvcat-gal {
		display: block;
		position: absolute;
		inset: 0;
		overflow: hidden;
	}

	.cvcat-gal__slide {
		position: absolute;
		inset: 0;
		opacity: 0;
		transition: opacity .45s ease;
	}

	/* Solo importan las dos primeras: la de reposo y la del hover. */
	.cvcat-gal__slide:first-child { opacity: 1; }
	.cvcat-gal__slide:nth-child(n+3) { display: none; }

	.cvcat-card:hover .cvcat-gal.has-more .cvcat-gal__slide:first-child { opacity: 0; }
	.cvcat-card:hover .cvcat-gal.has-more .cvcat-gal__slide:nth-child(2) { opacity: 1; }

	/*
	 * EL FALLO DE LOS COLORES ESTABA AQUÍ.
	 * Las muestras viven dentro de la tarjeta, así que al ir a pulsarlas el
	 * :hover sigue activo y la 1.ª diapositiva está en opacity:0. El cambio de
	 * color SÍ ocurría, pero sobre una capa invisible: solo se veía al retirar
	 * el ratón. De ahí el "a veces sí, a veces no".
	 *
	 * Con un color elegido se desactiva el intercambio por hover y la 1.ª
	 * diapositiva manda siempre: es la que lleva la foto del color escogido.
	 */
	.cvcat-card.is-color-picked .cvcat-gal .cvcat-gal__slide:first-child,
	.cvcat-card.is-color-picked:hover .cvcat-gal.has-more .cvcat-gal__slide:first-child { opacity: 1; }

	.cvcat-card.is-color-picked:hover .cvcat-gal.has-more .cvcat-gal__slide:nth-child(2) { opacity: 0; }

	/* Sin 2.ª foto no hay fundido: se hace el zoom sutil de siempre. */
	.cvcat-gal__slide img { transition: transform .5s cubic-bezier(.2, .6, .2, 1); }

	.cvcat-gal__dots { display: none; }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.cvcat-card:hover .cvcat-gal:not(.has-more) .cvcat-gal__slide img { transform: scale(1.04); }
}

.cvcat-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 0.4rem;
	padding: clamp(0.75rem, 0.5rem + 0.6vw, 1.15rem);
}

.cvcat-card__title {
	margin: 0;
	font-family: var(--cv-sans, 'Jost', sans-serif);
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: 0.01em;
}

.cvcat-card__title a {
	color: inherit;
	text-decoration: none;
}

.cvcat-card__title a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* -------------------------------------------------------------------------
 * PRECIO
 * El precio es el titular de la tarjeta: va en la serif, grande.
 * ---------------------------------------------------------------------- */

.cvcat-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 0.35rem;
}

.cvcat-price__now {
	font-family: var(--cv-serif, 'Cormorant Garamond', Georgia, serif);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	color: var(--cvc-ink);
}

/* El precio de WooCommerce sin oferta arrastra su propio marcado. */
.cvcat-price__now .amount,
.cvcat-price__now .woocommerce-Price-amount { font-size: inherit; color: inherit; }
.cvcat-price__now del { display: none; }

.cvcat-price__was {
	font-family: var(--cv-sans, 'Jost', sans-serif);
	font-size: 0.8rem;
	font-weight: 300;
	font-variant-numeric: tabular-nums;
	color: var(--cvc-mute);
	text-decoration: line-through;
	/* Sin !important: el tachado va en el color heredado, no en el rojo del
	   CSS legacy. Al vivir bajo .cvcat gana por especificidad. */
	text-decoration-thickness: 1px;
}

.cvcat-save {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0.05em;
	color: var(--cvc-gold-d);
}

.cvcat-save span   { white-space: nowrap; }

/* main-style.css del tema trae `.woocommerce ul.products li.product strong
   {display:block}`, que partía "Ahorras" y el importe en dos líneas.
   Se corrige por especificidad desde aquí; el tema NO se toca. */
.cvcat ul.products li.product .cvcat-save strong {
	display: inline;
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * PACK DE 2 (CAPA 24)
 *
 * «Compra 2 por $237.500», debajo del precio. En pesos y no en porcentaje:
 * en una rejilla de doce tarjetas nadie va a calcular un 5%.
 *
 * NUNCA COINCIDE CON `.cvcat-save`: cervo_pack_oferta() devuelve null en todo
 * lo que esté en oferta, así que la tarjeta enseña una promesa o la otra, no
 * dos. Por eso comparten el hueco y no hay que reservar espacio para ambas.
 *
 * El rojo lo pidió la tienda y aquí encaja mejor que en la ficha: el oro de
 * esta hoja ya significa "rebajado" (.cvcat-save, .is-sale .cvcat-price__now),
 * y repetirlo haría que la misma señal dijera dos cosas.
 *
 * `white-space: nowrap` para que "$237.500" no parta en dos líneas y descuadre
 * la altura de una tarjeta respecto a sus vecinas de la misma fila.
 * ---------------------------------------------------------------------- */

/*
 * ⚠️ MISMOS VALORES QUE `.cp-pack` DEL GRID (2026-08-13). Estaba en `0.78rem`
 * (≈12,5 px) y el grid en `11.5px`: la misma frase salía de dos tamaños según
 * en qué sección del sitio estuvieras. Se iguala al del grid, que es el que el
 * dueño toma como referencia.
 *
 * En px y no en rem, a propósito: es el valor exacto del grid, y con `rem` un
 * cambio futuro en el tamaño base los volvería a separar.
 */
.cvcat-pack {
	margin: 0.3rem 0 0;
	font-family: var(--cv-sans, 'Jost', 'Segoe UI', sans-serif);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.3;
	color: #c0392b;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * INSIGNIAS
 * ---------------------------------------------------------------------- */

.cvcat-flags {
	position: absolute;
	inset: 0.6rem 0.6rem auto auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.35rem;
	pointer-events: none;
}

/* El sello de descuento: disco de tinta con el número en oro.
   Es la pieza que se recuerda de la página. */
/* El sello llevaba la serif (Cormorant): a 3 rem el "-18" se leía mal, porque
   es una display de trazo fino pensada para títulos grandes. Va en la sans con
   peso alto, que a tamaño pequeño es mucho más nítida. */
/* El sello: círculo más contenido y centrado de verdad.
   `align-items: baseline` descentraba el conjunto en vertical, porque el "%"
   es más pequeño y arrastraba la línea base. Ahora se centra el bloque entero
   y el "%" se sube con un desplazamiento propio. */
/*
 * ⚠️ EL SELLO ES AHORA EL MISMO QUE EL DEL GRID DE LA PORTADA (2026-08-13).
 *
 * Era un disco de tinta de 3 rem con el número en oro. Se cambió por decisión
 * del dueño después de compararlo con el de «LO MÁS VENDIDOS»: **el rojo llama
 * mucho más**. El oro sobre negro es elegante y discreto, y una rebaja no
 * quiere ser discreta.
 *
 * Los valores son los de `.cp-discount-badge` (`cervo-productos.php`) copiados
 * uno a uno —mismo rojo, mismo tamaño, mismo grosor, mismo espaciado— para que
 * las dos piezas sean indistinguibles. Si algún día se toca una, hay que tocar
 * la otra: **son dos archivos distintos porque son dos sistemas distintos**, y
 * unificarlos de verdad es trabajo de la migración del catálogo.
 *
 * ⚠️ Se conservan los nombres de clase `cvcat-seal*`. Renombrarlos obligaría a
 * repasar `is-sale`, las media queries y el marcado, sin ganar nada.
 */
.cvcat-seal {
	display: inline-flex;
	align-items: center;
	gap: 3px;

	padding: 3px 7px;
	border-radius: 3px;

	background: #e81f1f;
	color: #fff;

	font-family: var(--cv-sans, 'Jost', 'Segoe UI', sans-serif);
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1.5;
	text-transform: uppercase;
	white-space: nowrap;
}

.cvcat-seal svg {
	width: 9px;
	height: 9px;
	flex-shrink: 0;
}

/*
 * ⚠️ DOS TAMAÑOS, COMO EN EL GRID. El sello va en dos sitios: sobre la foto y
 * junto al precio. En `cervo-productos.php` el de la foto es MÁS GRANDE
 * (`.cp-badge-img .cp-discount-badge`: 11 px, más aire y sombra) y el del
 * precio se queda en el tamaño base. Se replica igual: sobre una foto compite
 * con la imagen y necesita cuerpo; junto al precio acompaña a un número y no
 * debe gritarle por encima.
 */
.cvcat-flags .cvcat-seal {
	font-size: 11px;
	letter-spacing: 0.07em;
	gap: 4px;
	padding: 5px 9px;
	border-radius: 4px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
}

.cvcat-flags .cvcat-seal svg {
	width: 11px;
	height: 11px;
}

/*
 * El del precio se alinea con la línea base de las cifras: `.cvcat-price` usa
 * `align-items: baseline`, y una cápsula sin texto propio se colgaría del borde
 * superior.
 */
.cvcat-seal--precio {
	align-self: center;
}

@media (max-width: 30rem) {
	.cvcat-flags .cvcat-seal {
		font-size: 9px;
		gap: 3px;
		padding: 4px 7px;
	}

	.cvcat-flags .cvcat-seal svg {
		width: 9px;
		height: 9px;
	}
}

/* -------------------------------------------------------------------------
 * MUESTRAS DE COLOR
 * ---------------------------------------------------------------------- */

.cvcat-colors {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin: 0.1rem 0 0;
	/* Aire arriba y abajo: el área táctil crece en alto sin invadir a nadie,
	   porque en vertical no hay vecinos. */
	padding: 0.2rem 0;
	list-style: none;
}

.cvcat-colors li { display: flex; line-height: 1; }

.cvcat-dot {
	display: block;
	width: 1.15rem;
	height: 1.15rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	/* Borde interior: sin él, un color blanco o crema desaparece sobre la
	   tarjeta clara y el cliente no ve que existe esa opción. */
	box-shadow: inset 0 0 0 1px rgba(20, 18, 16, .22);
	transition: box-shadow .16s ease, transform .16s ease;
}

/* Con imagen de variación es un botón: se nota que se puede tocar. */
button.cvcat-dot { cursor: pointer; }

button.cvcat-dot:hover { transform: scale(1.15); }

/* Anillo exterior separado del color, para que se vea sobre cualquier tono. */
button.cvcat-dot.is-on {
	box-shadow:
		inset 0 0 0 1px rgba(20, 18, 16, .22),
		0 0 0 2px var(--cvc-bone),
		0 0 0 3px var(--cvc-ink);
}

/* -------------------------------------------------------------------------
 * COLOR AGOTADO
 *
 * Antes se pintaba una muestra por cada color asignado al producto, hubiera
 * o no existencias: el cliente pulsaba, veía la foto de ese color y en la
 * ficha se encontraba con que no se podía comprar. Ahora el que no tiene
 * stock sale tachado con una línea roja y deja de ser pulsable.
 *
 * 🔒 OCULTOS POR DECISIÓN DEL DUEÑO (2026-08-13).
 *
 * Se activó la regla que este mismo comentario dejaba preparada. La tarjeta
 * enseña ahora **solo lo que se puede comprar**: nada de tachados que anuncian
 * lo que no hay.
 *
 * ⚠️ SE OCULTAN, NO SE BORRAN. El PHP sigue pintándolos y todo lo de abajo
 * —el tachado rojo, el color apagado— sigue escrito y funcionando. Para volver
 * a enseñarlos basta con quitar la regla de aquí debajo. Por eso no se tocó
 * `content-product.php`: un cambio de criterio visual no debería obligar a
 * rehacer marcado.
 *
 * ⚠️ EFECTO EN LECTORES DE PANTALLA: dentro de cada `<li>` va un
 * `.screen-reader-text` con «Negro: agotado». Al ocultar el `<li>` entero, esa
 * información deja de anunciarse. Es coherente —si no se enseña a nadie,
 * tampoco se anuncia— y evita lo peor, que sería leer en voz alta colores que
 * no están a la vista.
 *
 * 📌 El contador «+2» NO cambia: cuenta los colores que no caben, no los
 * agotados.
 * ---------------------------------------------------------------------- */
/*
 * ⚠️ VA CON EL CONTENEDOR DELANTE, Y NO ES ADORNO. `.cvcat-color--off` a secas
 * (0,1,0) **NO funciona**: más abajo hay `.cvcat-colors li { display: flex }`
 * (0,1,1), que tiene más especificidad y gana. Se probó primero sin el
 * contenedor y las muestras agotadas seguían saliendo, sin ningún error.
 * Mismo tipo de fallo que el `a:visited` del tema padre contra una clase sola.
 */
.cvcat-colors .cvcat-color--off { display: none; }

.cvcat-color--off { position: relative; }

.cvcat-dot--off {
	cursor: default;
	/* El color se apaga: sigue reconociéndose, pero no compite con los que
	   sí se pueden comprar. */
	opacity: .42;
	filter: grayscale(.45);
}

/* La línea roja. Va en el <li> y no en el punto para que cruce el círculo
   entero de borde a borde, sin quedarse corta por el radio. */
.cvcat-color--off::after {
	content: '';
	position: absolute;
	top: 50%;
	left: -1px;
	right: -1px;
	height: 1.5px;
	background: #c0392b;
	transform: translateY(-50%) rotate(-45deg);
	transform-origin: center;
	border-radius: 2px;
	pointer-events: none;
}

/* Sobre tarjeta en oferta (fondo tinta) el rojo pierde fuerza: se aclara. */
.cvcat-card.is-sale .cvcat-color--off::after { background: #e0604f; }

.cvcat-card.is-sale .cvcat-dot {
	box-shadow: inset 0 0 0 1px rgba(250, 249, 247, .38);
}

.cvcat-card.is-sale button.cvcat-dot.is-on {
	box-shadow:
		inset 0 0 0 1px rgba(250, 249, 247, .38),
		0 0 0 2px var(--cvc-ink),
		0 0 0 3px var(--cvc-gold);
}

/* -------------------------------------------------------------------------
 * ÁREA TÁCTIL — el bug de "a veces cambia el color equivocado"
 *
 * Antes: punto de 13,6 px, separación entre centros 18,4 px… y un área táctil
 * invisible de 44 px, que se extiende 22 px desde el centro. Es decir, el área
 * de cada muestra SE SOLAPABA con la del vecino (22 > 18,4) y hasta llegaba a
 * la de dos posiciones más allá. Al pulsar un color, el clic caía a menudo en
 * otro; y si ese otro era un <span> sin imagen, no pasaba nada.
 *
 * Ahora el punto es de 18,4 px con 8,8 px de separación (27,2 px entre
 * centros) y el área se extiende solo 4 px por lado → 26,4 px: los objetivos
 * se tocan pero NO se invaden.
 *
 * Son menos de los 44 px que recomiendan las guías, pero un objetivo de 26 px
 * que acierta siempre es mejor que uno de 44 px que selecciona el color de al
 * lado. La fila entera lleva además espacio vertical para no fallar en alto.
 * ---------------------------------------------------------------------- */
.cvcat-colors li { position: relative; }

button.cvcat-dot::after {
	content: '';
	position: absolute;
	inset: -4px;
}

.cvcat-colors__more {
	font-size: 0.66rem;
	font-weight: 400;
	color: var(--cvc-mute);
	letter-spacing: 0.04em;
}

.cvcat-card.is-sale .cvcat-colors__more { color: rgba(229, 226, 220, .6); }

.cvcat-flag {
	padding: 0.28rem 0.6rem;
	border-radius: 999px;
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.cvcat-flag--new {
	background: var(--cvc-ink);
	color: var(--cvc-bone);
}

.cvcat-veil {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	background: rgba(250, 249, 247, .74);
}

.cvcat-veil span {
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--cvc-ink);
}

/* -------------------------------------------------------------------------
 * LA INVERSIÓN — tarjetas en oferta
 * ---------------------------------------------------------------------- */

.cvcat-card.is-sale {
	background: var(--cvc-ink);
	border-color: var(--cvc-ink);
}

.cvcat-card.is-sale .cvcat-card__title a { color: var(--cvc-ice); }
.cvcat-card.is-sale .cvcat-price__now    { color: var(--cvc-gold); }
.cvcat-card.is-sale .cvcat-price__was    { color: rgba(229, 226, 220, .5); }
.cvcat-card.is-sale .cvcat-save          { color: var(--cvc-gold); }
.cvcat-card.is-sale .cvcat-card__media   { background: var(--cvc-ink-2); }

/*
 * ⚠️ SOBRE TINTA, EL SELLO NO CAMBIA — y esto es un cambio de criterio.
 *
 * Antes se invertía a oro macizo «para no perderse» sobre la tarjeta oscura.
 * Con el sello rojo eso ya no hace falta: el #e81f1f destaca sobre negro tanto
 * o más que sobre blanco. Y sobre todo, **invertirlo rompería lo que se acaba
 * de ganar**: que el sello sea idéntico en la portada y en el catálogo. Un
 * mismo descuento no puede ser rojo aquí y dorado dos tarjetas más allá.
 *
 * Solo se le añade una sombra para despegarlo del fondo oscuro.
 */
.cvcat-card.is-sale .cvcat-seal {
	box-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}

.cvcat-card.is-sale .cvcat-cta {
	border-color: var(--cvc-gold);
	color: var(--cvc-ink);
	background: var(--cvc-gold);
}

.cvcat-card.is-sale .cvcat-cta:hover,
.cvcat-card.is-sale .cvcat-cta:focus-visible {
	background: var(--cvc-ice);
	border-color: var(--cvc-ice);
}

.cvcat-card.is-out { opacity: .72; }

/* -------------------------------------------------------------------------
 * LLAMADA A LA ACCIÓN
 * "Elegir talla" y no "Añadir al carrito": son productos variables, el botón
 * nunca podría añadir nada sin escoger antes. Prometer lo que hace.
 * ---------------------------------------------------------------------- */

.cvcat-actions {
	display: flex;
	align-items: stretch;
	gap: 0.4rem;
	margin-top: 0.65rem;
}

.cvcat-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.62rem 0.8rem;
	border: 1px solid var(--cvc-ink);
	border-radius: 999px;
	background: transparent;
	font-family: var(--cv-sans, 'Jost', sans-serif);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	color: var(--cvc-ink);
	transition: background-color .18s ease, color .18s ease;
}

.cvcat-cta__ico {
	display: block;
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
}

.cvcat-cta__ico svg { width: 100%; height: 100%; display: block; }

.cvcat-cta__txt {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cvcat-cta:hover,
.cvcat-cta:focus-visible {
	background: var(--cvc-ink);
	color: var(--cvc-bone);
}

/* Favorito. Círculo del mismo alto que el botón, para que la fila cuadre. */
.cvcat-fav {
	display: grid;
	place-content: center;
	flex: 0 0 auto;
	width: 2.35rem;
	padding: 0;
	border: 1px solid var(--cvc-ice);
	border-radius: 50%;
	background: transparent;
	color: var(--cvc-mute);
	cursor: pointer;
	transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

.cvcat-fav svg {
	width: 1.05rem;
	height: 1.05rem;
	display: block;
	transition: transform .2s cubic-bezier(.3, 1.5, .5, 1), fill .2s ease;
	fill: transparent;
}

/* Hover: el corazón se pone rojo, se rellena y da un latido. */
.cvcat-fav:hover,
.cvcat-fav:focus-visible {
	border-color: #c0392b;
	color: #c0392b;
	background: rgba(192, 57, 43, .07);
}

.cvcat-fav:hover svg,
.cvcat-fav:focus-visible svg {
	fill: currentColor;
	transform: scale(1.18);
}

@media (prefers-reduced-motion: no-preference) {
	.cvcat-fav:hover svg { animation: cvcat-latido .5s ease; }
}

@keyframes cvcat-latido {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.32); }
	60%  { transform: scale(1.08); }
	100% { transform: scale(1.18); }
}

/* En tarjeta en oferta (fondo tinta) el rojo pierde contraste: se aclara. */
.cvcat-card.is-sale .cvcat-fav:hover,
.cvcat-card.is-sale .cvcat-fav:focus-visible {
	border-color: #e2685c;
	color: #e2685c;
	background: rgba(226, 104, 92, .12);
}

/* Estado guardado: relleno lleno. Listo para cuando exista la lista de deseos. */
.cvcat-fav[aria-pressed="true"] svg { fill: currentColor; }
.cvcat-fav[aria-pressed="true"] { color: var(--cvc-warn, #c0392b); border-color: currentColor; }

/* Mientras no exista la lista de deseos el botón lleva aria-disabled (no el
   atributo `disabled`: Chrome no dispara :hover en botones deshabilitados y se
   perdería la animación). Al conectar la lista, basta quitar ese aria. */

.cvcat-card.is-sale .cvcat-cta {
	border-color: var(--cvc-gold);
	background: var(--cvc-gold);
	color: var(--cvc-ink);
}

.cvcat-card.is-sale .cvcat-cta:hover,
.cvcat-card.is-sale .cvcat-cta:focus-visible {
	background: var(--cvc-ice);
	border-color: var(--cvc-ice);
}

.cvcat-card.is-sale .cvcat-fav {
	border-color: rgba(229, 226, 220, .3);
	color: rgba(229, 226, 220, .75);
}

/* -------------------------------------------------------------------------
 * PAGINACIÓN Y VACÍO
 * ---------------------------------------------------------------------- */

.cvcat-pager {
	margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

/* Mismo lenguaje que las pastillas de categoría: círculo, borde hielo, y la
   página actual en tinta. Las flechas se separan del bloque de números. */
.cvcat-pager .woocommerce-pagination { border: 0; }

.cvcat-pager .woocommerce-pagination ul.page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	border: 0;
	padding: 0;
	margin: 0;
	list-style: none;
}

.cvcat-pager .woocommerce-pagination li {
	border: 0;
	margin: 0;
	overflow: visible;
}

.cvcat-pager li > .page-numbers {
	display: grid;
	place-content: center;
	min-width: 2.6rem;
	height: 2.6rem;
	padding: 0 0.5rem;
	border: 1px solid var(--cvc-ice);
	border-radius: 999px;
	background: transparent;
	font-family: var(--cv-sans, 'Jost', sans-serif);
	font-size: 0.82rem;
	font-weight: 400;
	font-variant-numeric: tabular-nums lining-nums;
	line-height: 1;
	color: var(--cvc-ink);
	text-decoration: none;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.cvcat-pager li > a.page-numbers:hover,
.cvcat-pager li > a.page-numbers:focus-visible {
	border-color: var(--cvc-ink);
	background: var(--cvc-ink);
	color: var(--cvc-bone);
}

.cvcat-pager li > .page-numbers.current {
	background: var(--cvc-ink);
	border-color: var(--cvc-ink);
	color: var(--cvc-gold);
	font-weight: 500;
}

/* Flechas: sin borde y separadas, para que no compitan con los números. */
.cvcat-pager li > .page-numbers.next,
.cvcat-pager li > .page-numbers.prev {
	border-color: transparent;
	font-size: 1.05rem;
	color: var(--cvc-gold-d);
}

.cvcat-pager li > .page-numbers.prev { margin-right: 0.35rem; }
.cvcat-pager .page-numbers.next { margin-left: 0.35rem; }

.cvcat-pager .page-numbers.next:hover,
.cvcat-pager .page-numbers.prev:hover,
.cvcat-pager .page-numbers.next:focus-visible,
.cvcat-pager .page-numbers.prev:focus-visible {
	background: var(--cvc-gold);
	border-color: var(--cvc-gold);
	color: var(--cvc-ink);
}

.cvcat-pager li > .page-numbers.dots {
	border-color: transparent;
	min-width: 1.2rem;
	color: var(--cvc-mute);
}

.cvcat-empty {
	padding: clamp(3rem, 2rem + 4vw, 6rem) 0;
	text-align: center;
}

.cvcat-empty__title {
	margin: 0 0 1.25rem;
	font-family: var(--cv-serif, 'Cormorant Garamond', Georgia, serif);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
	font-weight: 300;
	color: var(--cvc-ink);
}

.cvcat-empty .cvcat-cta {
	display: inline-block;
	margin-top: 0;
}

/* -------------------------------------------------------------------------
 * ACCESIBILIDAD
 * ---------------------------------------------------------------------- */

.cvcat a:focus-visible,
.cvcat select:focus-visible {
	outline: 2px solid var(--cvc-gold-d);
	outline-offset: 2px;
}

.cvcat--sale .cvcat-head a:focus-visible { outline-color: var(--cvc-gold); }

@media (prefers-reduced-motion: reduce) {
	.cvcat *,
	.cvcat *::before,
	.cvcat *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

/* El tema esconde el sidebar cuando no hay widgets; aquí no se usa nunca. */
.cvcat ~ .os-sidebar,
.cvcat + #secondary { display: none; }

/* =========================================================================
 * PAGINACIÓN — OVERRIDE DE ESPECIFICIDAD
 *
 * El tema y WooCommerce pintan la paginación con selectores muy pesados:
 *   .woocommerce .woocommerce-pagination .page-numbers li a   → 0-3-2
 *   .woocommerce nav.woocommerce-pagination ul li a           → 0-2-4
 * (le clavan width:45px, height:45px, display:inline-block y fondo lila).
 *
 * Los selectores de arriba (0-2-1) perdían. Este bloque va al FINAL y con
 * peso 0-5-3, así que gana sin recurrir a !important.
 * ========================================================================= */

.cvcat .cvcat-pager .woocommerce-pagination ul.page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	border: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cvcat .cvcat-pager .woocommerce-pagination ul.page-numbers li {
	display: block;
	width: auto;
	height: auto;
	border: 0;
	margin: 0;
	padding: 0;
	overflow: visible;
	line-height: normal;
}

.cvcat .cvcat-pager .woocommerce-pagination ul.page-numbers li a.page-numbers,
.cvcat .cvcat-pager .woocommerce-pagination ul.page-numbers li span.page-numbers {
	display: grid;
	place-content: center;
	width: auto;
	min-width: 2.6rem;
	height: 2.6rem;
	padding: 0 0.55rem;
	border: 1px solid var(--cvc-ice);
	border-radius: 999px;
	background: transparent;
	font-family: var(--cv-sans, 'Jost', sans-serif);
	font-size: 0.82rem;
	font-weight: 400;
	font-variant-numeric: tabular-nums lining-nums;
	line-height: 1;
	color: var(--cvc-ink);
	text-decoration: none;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.cvcat .cvcat-pager .woocommerce-pagination ul.page-numbers li a.page-numbers:hover,
.cvcat .cvcat-pager .woocommerce-pagination ul.page-numbers li a.page-numbers:focus {
	border-color: var(--cvc-ink);
	background: var(--cvc-ink);
	color: var(--cvc-bone);
}

.cvcat .cvcat-pager .woocommerce-pagination ul.page-numbers li span.page-numbers.current,
.cvcat .cvcat-pager .woocommerce-pagination ul.page-numbers li a.page-numbers.current {
	background: var(--cvc-ink);
	border-color: var(--cvc-ink);
	color: var(--cvc-gold);
	font-weight: 500;
}

/* Flechas: sin borde y separadas, para no competir con los números. */
.cvcat .cvcat-pager .woocommerce-pagination ul.page-numbers li a.page-numbers.next,
.cvcat .cvcat-pager .woocommerce-pagination ul.page-numbers li a.page-numbers.prev {
	border-color: transparent;
	font-size: 1.05rem;
	color: var(--cvc-gold-d);
}

.cvcat .cvcat-pager .woocommerce-pagination ul.page-numbers li a.page-numbers.next { margin-left: 0.35rem; }
.cvcat .cvcat-pager .woocommerce-pagination ul.page-numbers li a.page-numbers.prev { margin-right: 0.35rem; }

.cvcat .cvcat-pager .woocommerce-pagination ul.page-numbers li a.page-numbers.next:hover,
.cvcat .cvcat-pager .woocommerce-pagination ul.page-numbers li a.page-numbers.prev:hover {
	background: var(--cvc-gold);
	border-color: var(--cvc-gold);
	color: var(--cvc-ink);
}

.cvcat .cvcat-pager .woocommerce-pagination ul.page-numbers li span.page-numbers.dots {
	border-color: transparent;
	min-width: 1.2rem;
	color: var(--cvc-mute);
}

/* -------------------------------------------------------------------------
 * …y contra !important, !important.
 *
 * cervo-legacy.css (el CSS rescatado del Customizer) trae:
 *   .woocommerce-pagination a, .woocommerce-pagination span
 *       { background:#202020 !important; color:#fff !important; font-size:12px !important }
 *   .woocommerce-pagination .page-numbers.current
 *       { background:#e63946 !important; color:#fff !important }
 *
 * Eso es lo que se seguía viendo (no era el estilo "nativo"). La subida de
 * especificidad no basta contra !important, así que aquí se replica, pero
 * SOLO bajo .cvcat: el catálogo viejo conserva su aspecto mientras el candado
 * siga cerrado. Cuando se retire cervo-legacy.css, este bloque puede irse.
 * ---------------------------------------------------------------------- */

.cvcat .cvcat-pager .woocommerce-pagination ul.page-numbers li a.page-numbers,
.cvcat .cvcat-pager .woocommerce-pagination ul.page-numbers li span.page-numbers {
	background: transparent !important;
	color: var(--cvc-ink) !important;
	font-size: 0.82rem !important;
	border-radius: 999px !important;
}

.cvcat .cvcat-pager .woocommerce-pagination ul.page-numbers li a.page-numbers:hover,
.cvcat .cvcat-pager .woocommerce-pagination ul.page-numbers li a.page-numbers:focus {
	background: var(--cvc-ink) !important;
	color: var(--cvc-bone) !important;
}

.cvcat .cvcat-pager .woocommerce-pagination ul.page-numbers li span.page-numbers.current,
.cvcat .cvcat-pager .woocommerce-pagination ul.page-numbers li a.page-numbers.current {
	background: var(--cvc-ink) !important;
	color: var(--cvc-gold) !important;
	font-weight: 500;
}

.cvcat .cvcat-pager .woocommerce-pagination ul.page-numbers li a.page-numbers.next,
.cvcat .cvcat-pager .woocommerce-pagination ul.page-numbers li a.page-numbers.prev {
	background: transparent !important;
	color: var(--cvc-gold-d) !important;
	font-size: 1.05rem !important;
}

.cvcat .cvcat-pager .woocommerce-pagination ul.page-numbers li a.page-numbers.next:hover,
.cvcat .cvcat-pager .woocommerce-pagination ul.page-numbers li a.page-numbers.prev:hover {
	background: var(--cvc-gold) !important;
	color: var(--cvc-ink) !important;
}

/* =========================================================================
 * REJILLA — OVERRIDE DE ESPECIFICIDAD
 *
 * El tema añade al <ul> las clases `columns-4` y `os-mobile-col-2` con reglas
 * más pesadas que las de arriba. Resultado medido a 390 px: columnas de
 * 206,7 px dentro de un contenedor de 341,9 px → la 2.ª tarjeta se salía
 * 45 px por la derecha y el conjunto se veía pegado a ese lado.
 * (El `gap` delataba el problema: salía 5 px en vez de los 12 px propios.)
 * ========================================================================= */

.cvcat ul.products,
.cvcat ul.products.columns-2,
.cvcat ul.products.columns-3,
.cvcat ul.products.columns-4,
.cvcat ul.products.columns-5,
.cvcat ul.products.columns-6,
.cvcat ul.products.os-mobile-col-2 {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: var(--cvc-gap) !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

@media (min-width: 700px) {
	.cvcat ul.products,
	.cvcat ul.products.columns-2,
	.cvcat ul.products.columns-3,
	.cvcat ul.products.columns-4,
	.cvcat ul.products.columns-5,
	.cvcat ul.products.columns-6,
	.cvcat ul.products.os-mobile-col-2 {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (min-width: 1400px) {
	.cvcat ul.products,
	.cvcat ul.products.columns-2,
	.cvcat ul.products.columns-3,
	.cvcat ul.products.columns-4,
	.cvcat ul.products.columns-5,
	.cvcat ul.products.columns-6,
	.cvcat ul.products.os-mobile-col-2 {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

.cvcat ul.products li.product {
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
}

/* -------------------------------------------------------------------------
 * PORTADA — sin hueco arriba
 *
 * `.cvcat` abre con padding superior. La portada es una imagen de campaña a
 * sangre: debe arrancar pegada a la cabecera del sitio, así que se sube ese
 * mismo padding con un margen negativo.
 * ---------------------------------------------------------------------- */

@media (max-width: 768px) {

	.cvcat-portada.has-mobile {
		margin-top: calc(-1 * clamp(1.5rem, 1rem + 2vw, 3rem));
	}

	/* En SALE, además, sin hueco abajo: la imagen entrega directamente a la
	   banda oscura del título y las dos negras se leen como una sola pieza. */
	.cvcat--sale .cvcat-portada.has-mobile { margin-bottom: 0; }
}