/* Catálogo rediseñado (docs/superpowers/specs/2026-10-02-categoria-rediseno-design.md).
   Solo se carga en categoría, marca, tienda y búsqueda (inc/assets.php). */

/* §2 Banner de la categoría */
.nm-cat-banner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 24px;
	min-height: 200px;
	overflow: hidden;
	margin: 0 0 24px;
	padding-left: 40px;
	border-radius: var(--nm-radius-banner);
	background: var(--nm-navy);
	color: var(--nm-white);
}

.nm-cat-banner--disney { background: var(--nm-tile-disney); }
.nm-cat-banner--sanrio { background: var(--nm-tile-sanrio); }
/* El rosa del estudio (franja del panorama) es más claro que el token: blanco da 2,9:1; este navy da ≥ 5:1. */
.nm-cat-banner--sanrio.nm-cat-banner--panorama { background-color: #ea5c96; color: #14164f; }
.nm-cat-banner--futbol { background: var(--nm-tile-futbol); }
/* Blanco sobre ámbar da 2:1; el navy da 7:1 (igual que la tarjeta de la portada). */
.nm-cat-banner--escolar { background: var(--nm-tile-escolar); color: var(--nm-navy); }
.nm-cat-banner--marvel { background: var(--nm-tile-marvel); }
.nm-cat-banner--hogar { background: #0f6e6e; }
.nm-cat-banner--cyber { background: #0b0b12; }
.nm-cat-banner--cyber .nm-cat-banner-count { color: var(--nm-yellow); }
.nm-cat-banner--red { background: var(--nm-red); }
/* Marca, tienda y búsqueda (§7): el mismo componente, sin color de licencia ni foto. */
.nm-cat-banner--neutral { min-height: 0; padding: 20px 24px; background: var(--nm-soft); color: var(--nm-navy); }

.nm-cat-banner-copy { min-width: 0; padding-block: 24px; }
.nm-cat-banner--neutral .nm-cat-banner-copy { padding-block: 0; }

/* Dos clases: le gana a .nm-shop-title (shop.css) sin !important. */
.nm-cat-banner .nm-cat-banner-title {
	margin: 0;
	color: inherit;
	font: 800 clamp(2rem, 3.6vw, var(--nm-fs-50)) / 0.98 var(--nm-font-display);
	text-transform: uppercase;
}

.nm-cat-banner--neutral .nm-cat-banner-title { font-size: var(--nm-fs-34); }

/* Sin opacity: bajaría el blanco sobre Sanrio (4,55:1) a menos de 4,5:1. */
.nm-cat-banner-count { margin: 8px 0 0; font: 700 var(--nm-fs-14) / 1.2 var(--nm-font-display); letter-spacing: 0.04em; text-transform: uppercase; }
.nm-cat-banner-tagline { max-width: 46ch; margin: 10px 0 0; font-size: var(--nm-fs-16); }

.nm-cat-banner-art {
	width: 296px;
	aspect-ratio: 4 / 3;
	/* El borde izquierdo de la foto se funde con el color del banner. */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 22%);
	mask-image: linear-gradient(to right, transparent, #000 22%);
}

.nm-cat-banner-art img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Miniatura de WooCommerce: foto de producto sobre blanco, no una escena. */
.nm-cat-banner-art--miniatura {
	width: 168px;
	aspect-ratio: 1;
	margin: 16px 24px 16px 0;
	overflow: hidden;
	border-radius: var(--nm-radius-banner);
	background: var(--nm-white);
	-webkit-mask-image: none;
	mask-image: none;
}

.nm-cat-banner-art--miniatura img { object-fit: contain; }

/* Panorama 21:9 (bodegón de estudio): ocupa todo el alto del banner, pegado a la derecha. Su
   franja izquierda es un color liso por fila (sin el escalón de tono del estudio) y el banner
   repite de fondo una franja de 4 px de ese mismo borde (--nm-banner-bg, ver
   nm_vitrina_banner_panorama_bg), así que foto y fondo se unen sin costura; el color del token
   queda debajo, de respaldo. Los productos nunca se recortan: el alto del banner sigue al ancho
   (40vw hasta 340 px) y la imagen mide alto × 21/9. */
.nm-cat-banner--panorama {
	position: relative;
	display: flex;
	align-items: center;
	height: min(340px, 40vw);
	min-height: 0;
	padding-left: 48px;
	background-image: var(--nm-banner-bg, none);
	background-repeat: repeat-x;
	background-position: left center;
	background-size: auto 100%;
}

.nm-cat-banner--panorama .nm-cat-banner-copy { position: relative; z-index: 1; max-width: 42%; padding-block: 0; }
.nm-cat-banner--panorama .nm-cat-banner-tagline { max-width: 30ch; }

.nm-cat-banner .nm-cat-banner-art--panorama {
	position: absolute;
	inset-block: 0;
	right: 0;
	width: auto;
	height: 100%;
	aspect-ratio: 21 / 9;
	-webkit-mask-image: none;
	mask-image: none;
}

.nm-cat-banner-art--panorama picture { display: block; width: 100%; height: 100%; }
.nm-cat-banner-art--panorama img { object-position: right center; }

/* §3 Fila de subcategorías (carrusel de la portada, carousel.js) */
.nm-subcats { position: relative; margin: 0 0 24px; }
.nm-subcats .nm-carousel-track { grid-auto-columns: 148px; gap: 16px; }
/* Sin título visible: las flechas van sobre los bordes de la fila, a la altura de las fotos. */
.nm-subcats .nm-carousel-btn { position: absolute; top: 56px; z-index: 1; box-shadow: var(--nm-shadow-card); }
.nm-subcats .nm-carousel-nav { display: block; }
.nm-subcats [data-nm-carousel-prev] { left: -14px; }
.nm-subcats [data-nm-carousel-next] { right: -14px; }
.nm-subcats .nm-carousel-btn[hidden] { display: none; }

.nm-subcat {
	display: grid;
	justify-items: center;
	align-content: start;
	gap: 6px;
	height: 100%;
	padding: 8px 8px 12px;
	border: 1px solid var(--nm-line);
	border-radius: var(--nm-radius-banner);
	background: var(--nm-white);
	color: var(--nm-ink);
	text-align: center;
	text-decoration: none;
}

.nm-subcat:hover { border-color: var(--nm-navy); }
.nm-subcat:focus-visible { outline: 2px solid var(--nm-navy); outline-offset: 2px; }

.nm-subcat-img {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--nm-radius);
	background: var(--nm-white);
}

.nm-subcat-img img { width: 100%; height: 100%; object-fit: contain; }
.nm-subcat-img--estudio img { object-fit: cover; }
.nm-subcat-img--inicial { background: var(--nm-soft); color: var(--nm-navy); font: 800 var(--nm-fs-34) / 1 var(--nm-font-display); }
.nm-subcat-name { font: 700 var(--nm-fs-14) / 1.2 var(--nm-font-display); text-transform: uppercase; }
.nm-subcat-count { color: var(--nm-muted); font-size: var(--nm-fs-12); }

/* §5 Descripción, debajo de la grilla */
.nm-cat-about { max-width: 75ch; margin: 16px 0 24px; padding-top: 32px; border-top: 1px solid var(--nm-line); }
.nm-cat-about-title { margin: 0 0 12px; color: var(--nm-navy); font-size: var(--nm-fs-24); text-transform: uppercase; }
.nm-cat-about-text { color: var(--nm-muted); }
.nm-cat-about-text h3 { margin: 16px 0 8px; color: var(--nm-ink); font-size: var(--nm-fs-18); }
.nm-cat-about-text p { margin: 0 0 12px; }

@media (max-width: 820px) {
	/* §6: banner compacto, ~120 px. */
	.nm-cat-banner { min-height: 120px; gap: 12px; margin-bottom: 16px; padding-left: 16px; }
	.nm-cat-banner-copy { padding-block: 12px; }
	.nm-cat-banner .nm-cat-banner-title { font-size: var(--nm-fs-24); }
	.nm-cat-banner-count { margin-top: 4px; font-size: var(--nm-fs-12); }
	.nm-cat-banner-tagline { display: none; }
	.nm-cat-banner-art { align-self: stretch; width: 132px; aspect-ratio: auto; }
	.nm-cat-banner-art--miniatura { align-self: center; width: 96px; aspect-ratio: 1; margin: 12px 12px 12px 0; }
	.nm-cat-banner--neutral { min-height: 0; padding: 12px 16px; }
	/* Panorama en móvil: bloque de color con título y conteo, y el recorte del lado de los productos. */
	.nm-cat-banner--panorama { height: 136px; padding-left: 16px; }
	.nm-cat-banner--panorama .nm-cat-banner-copy { max-width: 54%; }
	.nm-cat-banner .nm-cat-banner-art--panorama {
		width: auto;
		aspect-ratio: 1837 / 1344;
	}
	.nm-cat-banner--neutral .nm-cat-banner-title { font-size: var(--nm-fs-24); }

	/* §6: fotos redondas en una fila que se desliza con el dedo, sin conteo. A la derecha,
	   una flecha sobre un degradado blanco avisa que hay más y avanza la fila; se esfuma
	   al llegar al final. Sin flecha a la izquierda: se vuelve con el dedo. */
	.nm-subcats { margin: 0 -16px 12px; }
	.nm-subcats .nm-carousel-track { grid-auto-columns: 76px; gap: 12px; padding: 4px 48px 8px 16px; scroll-padding-inline: 16px; }
	.nm-subcats [data-nm-carousel-prev] { display: none; }
	.nm-subcats [data-nm-carousel-next] {
		top: 0;
		right: 0;
		bottom: 0;
		width: 64px;
		height: auto;
		padding: 0 8px 26px 0;
		justify-items: end;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: linear-gradient(to right, rgb(255 255 255 / 0), rgb(255 255 255 / 0.85) 55%, var(--nm-white));
		transition: opacity 0.2s;
	}
	.nm-subcats [data-nm-carousel-next] > span[aria-hidden] {
		display: grid;
		place-items: center;
		width: 32px;
		height: 32px;
		padding-bottom: 3px;
		border-radius: 50%;
		background: var(--nm-navy);
		color: var(--nm-white);
		font-size: 24px;
		box-shadow: var(--nm-shadow-card);
	}
	.nm-subcats [data-nm-carousel-next]:disabled { opacity: 0; pointer-events: none; }
	.nm-subcat { padding: 0; border: 0; background: transparent; }
	.nm-subcat-img { width: 64px; border: 1px solid var(--nm-line); border-radius: 50%; }
	.nm-subcat-img img { padding: 6px; }
	.nm-subcat-img--estudio img { padding: 0; }
	.nm-subcat-img--inicial { font-size: var(--nm-fs-24); }
	.nm-subcat-name {
		display: -webkit-box;
		overflow: hidden;
		font: 700 var(--nm-fs-12) / 1.2 var(--nm-font-body);
		text-transform: none;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}
	.nm-subcat-count { display: none; }
}

/* Escritorio: cabecera compacta para que los productos queden sobre el pliegue. Banner de 180–220 px
   (el panorama sigue a todo el alto, pegado a la derecha, así que no se recorta), subcategorías en
   una sola fila de chips con foto redonda y márgenes más cortos. */
@media (min-width: 821px) {
	.nm-shop { padding-top: 12px; }
	.nm-breadcrumb { margin-bottom: 8px; }

	.nm-cat-banner { margin-bottom: 12px; }
	.nm-cat-banner--panorama { height: clamp(172px, 14vw, 200px); }
	.nm-cat-banner--panorama .nm-cat-banner-title { font-size: clamp(1.75rem, 2.8vw, 2.5rem); }
	.nm-cat-banner--panorama .nm-cat-banner-count { margin-top: 6px; }
	.nm-cat-banner--panorama .nm-cat-banner-tagline { margin-top: 6px; font-size: var(--nm-fs-14); }

	/* Las mismas tarjetas de antes, más chicas: foto de 116 px en vez de 132. */
	.nm-subcats { margin-bottom: 8px; }
	.nm-subcats .nm-carousel-track { grid-auto-columns: 148px; gap: 16px; }
	.nm-subcats .nm-carousel-btn { top: 52px; }
	.nm-subcat { gap: 4px; padding: 8px 8px 10px; }
	.nm-subcat-img { width: 116px; }

	.nm-toolbar { margin-bottom: 12px; }
}