/* ---------- Portada: dos paneles a pantalla ---------- */
.nt-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--nt-line);
}
.nt-hero__panel {
	display: block;
	background: var(--nt-bg);
	color: var(--nt-text);
}
/* Alto = lo que queda de pantalla tras barra, cabecera y título */
.nt-hero__media {
	display: block;
	height: clamp(420px, calc(100svh - 40px - var(--nt-header-h) - 52px), 960px);
	overflow: hidden;
	background: #ececec;
}
.nt-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}
.nt-hero__panel:hover .nt-hero__media img { transform: scale(1.015); }
.nt-hero__caption {
	display: block;
	padding: 12px var(--nt-gutter) 16px;
	font-size: 14px;
	line-height: 21px;
}

/* ---------- Portada: rejilla de productos (4 columnas) ---------- */
.nt-grid__list {
	list-style: none;
	margin: 1px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--nt-line);
}
.nt-grid__item { background: var(--nt-bg); }
.nt-grid__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: var(--nt-text);
}
.nt-grid__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #ececec;
}
.nt-grid__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}
.nt-grid__link:hover .nt-grid__media img { transform: scale(1.03); }
.nt-grid__tag {
	position: absolute;
	top: 12px;
	left: var(--nt-gutter);
	font-size: 12px;
	line-height: 18px;
	color: var(--nt-muted);
}
.nt-grid__name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	padding: 12px var(--nt-gutter) 0;
	font-size: 14px;
	line-height: 21px;
}
.nt-grid__price {
	display: block;
	margin-top: auto;
	padding: 0 var(--nt-gutter) 16px;
	font-size: 14px;
	line-height: 21px;
	color: var(--nt-muted);
}
.nt-grid__name:not(:last-child) { margin-bottom: 0; }
.nt-grid__link .nt-grid__name:last-child { padding-bottom: 16px; }

@media (max-width: 820px) {
	.nt-grid__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.nt-hero { grid-template-columns: 1fr; }
	.nt-hero__media { height: auto; aspect-ratio: 4 / 5; }
}
@media (prefers-reduced-motion: reduce) {
	.nt-hero__media img,
	.nt-grid__media img { transition: none; }
	.nt-hero__panel:hover .nt-hero__media img,
	.nt-grid__link:hover .nt-grid__media img { transform: none; }
}