/* ==========================================================================
   Natalia Jiménez — Muestrario Alta Gama
   Paleta: marfil / negro cálido / bronce. Display: Cormorant Garamond.
   Cuerpo / navbar: Jost.
   ========================================================================== */

:root {
	/* Forma del marco de TODOS los videos del sitio: el banner de la
	   categoría (el "header") y las pausas que cortan la grilla. Vive acá,
	   en una variable, porque tienen que verse iguales — antes las pausas
	   eran 21/9 y quedaban a la mitad de alto que el header. */
	--nj-video-ratio: 16 / 9;
	--nj-video-min-alto: 460px;
	--nj-ivory: #f7f4ee;
	--nj-ivory-deep: #efe9de;
	--nj-ink: #1c1810;
	--nj-ink-soft: rgba(28, 24, 16, 0.68);
	--nj-bronze: #b08d57;
	--nj-bronze-soft: #cbad7c;
	--nj-line: rgba(28, 24, 16, 0.14);
	--nj-font-display: "Cormorant Garamond", Georgia, serif;
	--nj-font-body: "Jost", "Helvetica Neue", Arial, sans-serif;
	--nj-max: 1440px;
}

/* ---------------------------------- Base global (todas las páginas) ---------------------------------- */

/* El header por defecto de Astra se reemplaza en todo el sitio por nuestra navbar (wp_body_open). */
body.nj-theme #masthead {
	display: none;
}

/* Los bloques full-bleed (banner de categoría, fotos de descanso, grilla del
   muestrario) usan width:100vw, y 100vw NO descuenta la barra de scroll: en
   un navegador de escritorio con barra visible se pasan ~15px y aparece
   scroll horizontal. Va en <html> además de <body> porque html es el
   contenedor de scroll: ponerlo solo en body no alcanza (comprobado).

   clip y no hidden: los dos cortan el desborde igual, pero hidden convierte
   al elemento en contenedor de scroll, y eso rompe position:sticky en todo
   lo que tenga adentro. La columna de texto de la ficha de producto es
   sticky, así que con hidden acá se scrolleaba de largo en vez de quedarse
   fija. clip corta sin crear contenedor de scroll. */
html,
body.nj-theme {
	overflow-x: hidden;
}

/* clip no existe en Safari anterior al 16: ahí la declaración se descarta y
   volvería el scroll horizontal. Con @supports, los navegadores viejos se
   quedan con hidden (sin scroll horizontal, y la columna sticky de la ficha
   simplemente no queda fija) y los actuales usan clip, que resuelve las dos
   cosas. */
@supports (overflow-x: clip) {
	html,
	body.nj-theme {
		overflow-x: clip;
	}
}

body.nj-theme {
	background: var(--nj-ivory);
	color: var(--nj-ink);
	font-family: var(--nj-font-body);
}

body.nj-theme h1,
body.nj-theme h2,
body.nj-theme h3,
body.nj-theme h4,
body.nj-theme .woocommerce-loop-product__title,
body.nj-theme .woocommerce-Reviews-title {
	font-family: var(--nj-font-display);
	font-weight: 500;
	color: var(--nj-ink);
}

body.nj-theme a {
	color: var(--nj-ink);
}

body.nj-theme .woocommerce-breadcrumb {
	color: var(--nj-ink-soft);
	font-size: 13px;
}

body.nj-theme .woocommerce-breadcrumb a {
	color: var(--nj-ink-soft);
}

/* Páginas internas (todo menos el home y la portada dividida): el navbar
   arranca ya "sólido" -no hay hero oscuro detrás para justificar la versión
   transparente- y el contenido necesita aire arriba para no quedar tapado
   por el navbar fijo. La portada (.nj-gateway) tampoco tiene navbar, así
   que también queda afuera de este padding. */
body.nj-theme:not(.nj-home):not(.nj-has-banner):not(.nj-gateway) .nj-navbar {
	background-color: rgba(247, 244, 238, 0.96);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	color: var(--nj-ink);
	padding: 18px 56px;
	border-bottom: 1px solid var(--nj-line);
}

body.nj-theme:not(.nj-home):not(.nj-has-banner):not(.nj-gateway) #content {
	padding-top: 76px;
}

@media (max-width: 900px) {
	body.nj-theme:not(.nj-home):not(.nj-has-banner):not(.nj-gateway) .nj-navbar {
		padding: 18px 24px;
	}
	body.nj-theme:not(.nj-home):not(.nj-has-banner):not(.nj-gateway) #content {
		padding-top: 80px;
	}
}

/* Astra envuelve el contenido en un .ast-container con display:flex
   (pensado para su layout con sidebar, que acá no usamos en ninguna
   página). Cualquier hija directa full-bleed —el hero y las filas del
   home, el banner de categoría— sin este override queda con 0 de ancho
   (flex-item sin flex-basis) o se estira a la altura del hermano más alto
   (align-items:stretch por defecto). Por eso esto es global, no solo del
   home. En el home además le sacamos el padding/max-width a #content y
   #primary para que el hero/las filas vayan de borde a borde; en el resto
   de las páginas SÍ queremos ese padding (le da aire al contenido de
   WooCommerce), así que ahí no se toca. */
body.nj-theme .ast-container {
	display: block;
}

body.nj-home .ast-container,
body.nj-home #content,
body.nj-home #primary,
body.nj-home .entry-content,
body.nj-gateway .ast-container,
body.nj-gateway #content,
body.nj-gateway #primary,
body.nj-gateway .entry-content {
	display: block;
	max-width: none;
	width: 100%;
	padding: 0;
	margin: 0;
}

/* ---------------------------------- Navbar ---------------------------------- */

/* Navbar simétrica estilo maison: logo centrado, menú repartido a los costados,
   sin botones con relleno — todo son links de texto con tracking amplio. */
.nj-navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	padding: 34px 56px;
	background: transparent;
	color: #fff;
	transition: background-color 0.5s ease, padding 0.4s ease, backdrop-filter 0.5s ease;
}

.nj-navbar.is-scrolled {
	background-color: rgba(247, 244, 238, 0.94);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	padding: 18px 56px;
	color: var(--nj-ink);
	border-bottom: 1px solid var(--nj-line);
}

.nj-navbar__logo {
	font-family: var(--nj-font-display);
	font-size: 21px;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	text-align: center;
}

.nj-navbar__side {
	display: flex;
	align-items: center;
}

.nj-navbar__side--left {
	justify-content: flex-end;
}

.nj-navbar__side--right {
	justify-content: space-between;
}

.nj-navbar__list {
	display: flex;
	gap: 34px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nj-navbar__list a {
	color: inherit;
	text-decoration: none;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1.8px;
	font-weight: 300;
	opacity: 0.85;
	transition: opacity 0.2s ease;
}

.nj-navbar__list a:hover {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 6px;
}

.nj-navbar__contact-link {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1.6px;
	font-weight: 300;
	color: inherit;
	text-decoration: none;
	opacity: 0.7;
	white-space: nowrap;
	border-bottom: 1px solid transparent;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.nj-navbar__contact-link:hover {
	opacity: 1;
	border-color: currentColor;
}

@media (max-width: 900px) {
	.nj-navbar {
		padding: 22px 24px;
	}
	.nj-navbar__list {
		gap: 16px;
	}
	.nj-navbar__list a {
		font-size: 10px;
		letter-spacing: 1px;
	}
}

/* El color va explícito y en tinta, igual que el logo "NATALIA JIMÉNEZ".
   Dos motivos, y ninguno es capricho:

   1. Astra pinta TODOS los <button> de blanco (es su color de texto para
      botones) y ese color le gana a lo que el botón herede de la navbar. Sin
      esta línea las barritas —que son currentColor— quedaban blancas sobre el
      marfil de las páginas internas: el ícono estaba ahí, pero invisible.

   2. Heredar de .nj-navbar tampoco alcanzaba: la navbar dice color:#fff para
      escribir sobre el hero, pero ese blanco ya no le llega a NINGÚN texto de
      la barra — logo, links y Contacto son <a> y los pinta de tinta la regla
      "body.nj-theme a". O sea que la barra entera se lee en tinta siempre, y
      el toggle era lo único que seguía blanco. Con var(--nj-ink) queda del
      mismo color que el título en todos los estados: hamburguesa cerrada, X
      abierta, barra transparente o sólida. */
.nj-navbar__toggle {
	display: none;
	position: relative;
	width: 26px;
	height: 16px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	justify-self: end;
	color: var(--nj-ink);
}

/* Astra también repinta el botón en hover/focus/active; el toggle no es un
   botón de Astra y tiene que seguir al título también ahí. */
.nj-navbar__toggle:hover,
.nj-navbar__toggle:focus,
.nj-navbar__toggle:focus-visible,
.nj-navbar__toggle:active {
	background: none;
	color: var(--nj-ink);
}

.nj-navbar__toggle span {
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background: currentColor;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.nj-navbar__toggle span:first-child {
	top: 0;
}

.nj-navbar__toggle span:last-child {
	bottom: 0;
}

.nj-navbar__toggle.is-active span:first-child {
	transform: translateY(7px) rotate(45deg);
}

.nj-navbar__toggle.is-active span:last-child {
	transform: translateY(-8px) rotate(-45deg);
}

.nj-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 99;
	background: var(--nj-ivory);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-12px);
	transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
}

.nj-mobile-menu.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nj-mobile-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

.nj-mobile-menu li {
	margin: 22px 0;
}

.nj-mobile-menu a {
	font-family: var(--nj-font-display);
	font-size: 32px;
	color: var(--nj-ink);
	text-decoration: none;
}

@media (max-width: 640px) {
	.nj-navbar {
		grid-template-columns: auto 1fr auto;
	}
	.nj-navbar__side {
		display: none;
	}
	.nj-navbar__toggle {
		display: block;
	}
}

/* ------------------------- Selector de idioma (ES / EN) ------------------------- */

/* Vive en el extremo izquierdo de la navbar (ver nj_render_navbar). El lado
   izquierdo pasa de "todo pegado al logo" a repartido, igual que el derecho,
   que ya tenía links + Contacto en los dos extremos. */
.nj-navbar--has-lang .nj-navbar__side--left {
	justify-content: space-between;
}

.nj-navbar__lang {
	display: flex;
	align-items: center;
	gap: 8px;
	/* Sin shrink: con la ventana angosta se comprimen los links del menú,
	   no las dos letras del idioma. */
	flex: 0 0 auto;
}

.nj-navbar__lang-item {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1.6px;
	font-weight: 300;
	color: inherit;
	text-decoration: none;
}

/* El idioma activo es un <span> subrayado (no se puede clickear, ya estás
   ahí); el otro es un <a> apagado que se enciende al pasar por encima —
   mismo lenguaje que .nj-navbar__contact-link. */
.nj-navbar__lang-item.is-current {
	opacity: 1;
	border-bottom: 1px solid currentColor;
}

a.nj-navbar__lang-item {
	opacity: 0.6;
	border-bottom: 1px solid transparent;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

a.nj-navbar__lang-item:hover,
a.nj-navbar__lang-item:focus-visible {
	opacity: 1;
	border-color: currentColor;
}

.nj-navbar__lang-sep {
	font-size: 11px;
	font-weight: 300;
	opacity: 0.35;
	user-select: none;
}

/* En mobile los links del menú se van al overlay, pero el idioma se queda
   visible en la navbar: es el hueco natural a la izquierda del logo, y la
   navbar (z-index 100) está por encima del overlay (99), así que se puede
   cambiar de idioma incluso con el menú abierto. */
@media (max-width: 640px) {
	.nj-navbar--has-lang .nj-navbar__side--left {
		display: flex;
	}
	.nj-navbar--has-lang .nj-navbar__side--left .nj-navbar__list {
		display: none;
	}
}

/* Con el overlay del menú abierto el fondo es marfil: la navbar transparente
   escribe en blanco y quedaban invisibles tanto la X del toggle como el
   selector de idioma. Ver la clase que agrega nj-scroll.js. */
.nj-navbar.is-menu-open {
	color: var(--nj-ink);
}

/* TranslatePress trae su propio selector flotante en una esquina. El nuestro
   vive en la navbar, así que el flotante se saca. (También conviene ponerlo
   en No en Ajustes > TranslatePress; esto es el cinturón por si queda activo.) */
#trp-floater-ls {
	display: none !important;
}

/* ---------------------------------- Hero ---------------------------------- */

/* El hero es 100% imagen (más adelante, video) — sin texto encima, como en
   las maisons de referencia. El scrim es apenas lo necesario para que la
   navbar transparente se lea sobre el cielo/fondo claro de la foto. */
.nj-hero {
	position: relative;
	min-height: 100svh;
	overflow: hidden;
}

/* Zoom-out estilo Gucci: la imagen arranca "acercada" y se asienta en su
   tamaño real. Usamos transition + una clase que agrega el JS (no una
   animation con auto-play): un @keyframes arranca su reloj apenas se
   parsea el CSS, no cuando el usuario realmente ve la imagen pintada —
   eso es lo que se sentía como una pausa antes del zoom. Con la clase
   agregada después del primer frame pintado, el zoom arranca justo
   cuando hay algo para ver. Mismo criterio para el resto de las
   imágenes al entrar en pantalla (ver nj-scroll.js). */
/* Degradé como capa propia (::after), no mezclado en el "background" de la
   foto: así la imagen se puede pisar por PHP con un solo background-image
   (para la foto que carga el cliente) sin perder posición/tamaño — pasaba
   justo eso cuando el degradé y la foto compartían la misma propiedad
   "background" en capas. Ver .nj-gateway__bg, que ya usaba este patrón. */
.nj-hero__bg {
	position: absolute;
	inset: 0;
	background-image: url("../img/hero-principal.webp");
	/* La foto es apaisada (3:2) y la novia queda en la mitad de abajo: con el
	   recorte "cover" de una pantalla ancha hay que correr el encuadre hacia
	   abajo para no cortarle la cola del vestido. */
	background-position: center 65%;
	background-size: cover;
	background-repeat: no-repeat;
	transform: scale(1.22);
	transition: transform 2.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nj-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0) 22%);
}

.nj-hero__bg.is-visible {
	transform: scale(1);
}

.nj-hero__placeholder-note {
	position: absolute;
	bottom: 22px;
	right: 24px;
	z-index: 2;
	font-size: 10px;
	letter-spacing: 0.5px;
	color: rgba(255, 255, 255, 0.75);
	font-weight: 300;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.nj-hero__scroll {
	position: absolute;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	width: 1px;
	height: 46px;
	background: rgba(255, 255, 255, 0.5);
}

.nj-hero__scroll span {
	position: absolute;
	top: 0;
	left: -2px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #fff;
	animation: nj-scroll-cue 2.2s ease-in-out infinite;
}

@keyframes nj-scroll-cue {
	0% { top: 0; opacity: 1; }
	100% { top: 42px; opacity: 0; }
}

@media (max-width: 640px) {
	.nj-hero__placeholder-note {
		left: 16px;
		right: 16px;
		text-align: center;
	}
}

/* ---------------------------------- Portada dividida (tienda / sitio) ----------------------------------
   Vista única de entrada: 2 mitades a pantalla completa, cada una un link
   grande a foto completa (izquierda → Tienda Nube, derecha → el sitio,
   plantilla Home Alta Gama). Sin navbar ni footer — ver funciones
   nj_render_navbar / nj_whatsapp_float_button / nj_footer_editorial. */

/* #page no tiene ancho propio y "body" está en display:flex (fila): sin
   contenido angosto de sobra que lo empuje, se encoge al ancho de sus
   hijos (shrink-to-fit) en vez de ocupar todo el viewport. En el home eso
   no se nota porque las filas de categoría igual son anchas; acá, con
   textos cortos en cada mitad, #page terminaba en ~60% del ancho. */
body.nj-gateway {
	overflow: hidden;
}

body.nj-gateway #page {
	width: 100%;
}

.nj-gateway {
	position: relative;
	display: flex;
	min-height: 100svh;
}

/* Prefijo body.nj-gateway (no solo .nj-gateway__panel): "body.nj-theme a"
   fija el texto de todos los links a --nj-ink y le gana en especificidad
   a un selector de una sola clase — el link entero (y todo lo que
   hereda su color, como el CTA) quedaba en tinta oscura sobre la foto
   en vez de blanco. */
body.nj-gateway .nj-gateway__panel {
	position: relative;
	flex: 1;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	overflow: hidden;
	color: #fff;
	text-decoration: none;
}

/* Mismo zoom-out que el hero del home (arranca "acercada" y se asienta
   apenas se pinta el primer frame) — la clase is-visible la agrega
   nj-scroll.js, no un @keyframes con auto-play. */
.nj-gateway__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transform: scale(1.22);
	transition: transform 2.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nj-gateway__bg.is-visible {
	transform: scale(1);
}

.nj-gateway__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(28, 24, 16, 0.1) 0%, rgba(28, 24, 16, 0.3) 45%, rgba(28, 24, 16, 0.86) 100%);
}

.nj-gateway__bg--shop {
	background-image: url("../img/categoria-clasicos.webp");
}

.nj-gateway__bg--site {
	background-image: url("../img/hero-atelier.webp");
}

.nj-gateway__placeholder-note {
	position: absolute;
	top: 22px;
	right: 24px;
	z-index: 2;
	font-size: 10px;
	letter-spacing: 0.5px;
	color: rgba(255, 255, 255, 0.75);
	font-weight: 300;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.nj-gateway__text {
	position: relative;
	z-index: 2;
	padding: 0 48px 72px;
	text-align: center;
}

.nj-gateway__eyebrow {
	display: block;
	text-transform: uppercase;
	letter-spacing: 2.5px;
	font-size: 12px;
	color: var(--nj-bronze-soft);
	margin-bottom: 14px;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

/* Mismo motivo que en .nj-gateway__panel: "body.nj-theme h1,h2,h3,h4"
   también le gana en especificidad a un selector de una sola clase. */
body.nj-gateway .nj-gateway__text h2 {
	font-family: var(--nj-font-display);
	font-weight: 600;
	font-size: clamp(28px, 3.4vw, 42px);
	color: #fff;
	margin: 0 0 12px;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.65);
}

.nj-gateway__text p {
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.92);
	/* margin-inline auto: sin esto el max-width deja el párrafo pegado a la
	   izquierda aunque el texto adentro esté centrado. */
	margin: 0 auto 24px;
	max-width: 320px;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.nj-gateway__cta {
	display: inline-block;
	font-family: var(--nj-font-body);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1.4px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.55);
	padding-bottom: 7px;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
	transition: border-color 0.2s ease;
}

.nj-gateway__panel:hover .nj-gateway__cta,
.nj-gateway__panel:focus-visible .nj-gateway__cta {
	border-color: #fff;
}

.nj-gateway__logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	font-family: var(--nj-font-display);
	font-size: 22px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
	white-space: nowrap;
	pointer-events: none;
}

@media (max-width: 900px) {
	.nj-gateway {
		flex-direction: column;
	}
	.nj-gateway__panel {
		min-height: 50svh;
	}
	.nj-gateway__logo {
		font-size: 15px;
		letter-spacing: 2px;
	}
	.nj-gateway__text {
		padding: 0 28px 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nj-gateway__bg {
		transition: none;
	}
}

/* ---------------------------------- Intro (debajo del hero) ----------------------------------
   El título grande vive acá, no encima de la foto — como el bloque
   "Discover / The Pre-Spring Collection" que sigue al hero en las
   maisons de referencia. */

.nj-intro {
	text-align: center;
	max-width: 640px;
	margin: 0 auto;
	padding: 96px 32px 56px;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.nj-intro.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.nj-intro__eyebrow {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 12px;
	color: var(--nj-bronze);
	margin-bottom: 18px;
}

.nj-intro h1 {
	font-family: var(--nj-font-display);
	font-weight: 500;
	font-size: clamp(32px, 4.6vw, 54px);
	line-height: 1.15;
	color: var(--nj-ink);
	margin: 0 0 20px;
	text-wrap: balance;
}

.nj-intro p {
	font-size: 15px;
	line-height: 1.7;
	color: var(--nj-ink-soft);
	margin: 0;
}

/* ---------------------------------- Categorías ----------------------------------
   Cada categoría es una fila grande y asimétrica: una foto dominante
   (~62% del ancho, casi toda la altura) + una columna de texto angosta,
   alternando de lado — igual que un "Shop The Look" editorial en vez de
   una grilla de tarjetas parejas. */

.nj-categories {
	display: flex;
	flex-direction: column;
}

.nj-look {
	display: grid;
	grid-template-columns: minmax(320px, 38%) 1fr;
	min-height: 88vh;
	border-top: 10px solid var(--nj-ivory);
}

.nj-look--reverse {
	grid-template-columns: 1fr minmax(320px, 38%);
}

.nj-look--reverse .nj-look__media {
	order: -1;
}

.nj-look__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 64px 64px;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.nj-look__text.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.nj-look__eyebrow {
	text-transform: uppercase;
	letter-spacing: 2.5px;
	font-size: 12px;
	color: var(--nj-bronze);
	margin-bottom: 18px;
}

.nj-look__text h2 {
	font-family: var(--nj-font-display);
	font-weight: 500;
	font-size: clamp(36px, 4.2vw, 56px);
	color: var(--nj-ink);
	margin: 0 0 22px;
}

.nj-look__text p {
	font-size: 15px;
	line-height: 1.75;
	color: var(--nj-ink-soft);
	max-width: 320px;
	margin: 0 0 36px;
}

.nj-look__cta {
	font-family: var(--nj-font-body);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1.4px;
	color: var(--nj-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--nj-bronze);
	padding-bottom: 7px;
	width: fit-content;
	transition: color 0.2s ease;
}

.nj-look__cta:hover {
	color: var(--nj-bronze);
}

.nj-look__media {
	position: relative;
	overflow: hidden;
	background: var(--nj-ivory-deep);
}

.nj-look__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.22);
	transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.nj-look__media.is-visible img {
	transform: scale(1);
}

.nj-look__note {
	position: absolute;
	bottom: 18px;
	right: 20px;
	z-index: 2;
	font-size: 10px;
	letter-spacing: 0.4px;
	color: rgba(255, 255, 255, 0.8);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

@media (max-width: 900px) {
	.nj-look,
	.nj-look--reverse {
		grid-template-columns: 1fr;
		min-height: auto;
	}
	.nj-look--reverse .nj-look__media {
		order: 0;
	}
	.nj-look__media {
		height: 62svh;
	}
	.nj-look__text {
		padding: 48px 28px 56px;
	}
	.nj-look__text p {
		max-width: none;
	}
}

/* ---------------------------------- Banda de contacto ---------------------------------- */

.nj-contact-band {
	max-width: 620px;
	margin: 0 auto;
	padding: 96px 32px 200px;
	border-top: 1px solid var(--nj-line);
	text-align: center;
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.nj-contact-band.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.nj-contact-band h2 {
	font-family: var(--nj-font-display);
	font-weight: 500;
	font-size: clamp(28px, 3vw, 36px);
	margin: 0 0 18px;
	color: var(--nj-ink);
}

.nj-contact-band p {
	color: var(--nj-ink-soft);
	font-size: 16px;
	line-height: 1.7;
	margin: 0 0 40px;
}

.nj-contact-band__ctas {
	display: flex;
	gap: 40px;
	justify-content: center;
	flex-wrap: wrap;
}

@media (max-width: 640px) {
	.nj-contact-band {
		padding: 24px 24px 120px;
	}
}

/* ---------------------------------- CTAs compartidos (también en catálogo WooCommerce) ----------------------------------
   Links de texto con subrayado fino — nada de botones con relleno de color:
   así se mantiene el mismo lenguaje visual discreto en todo el sitio. */

.nj-cta-whatsapp,
.nj-cta-secundario {
	display: inline-block;
	background: none;
	font-family: var(--nj-font-body);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1.4px;
	font-weight: 400;
	text-decoration: none;
	padding-bottom: 7px;
	border-bottom: 1px solid;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.nj-cta-whatsapp {
	color: var(--nj-ink);
	border-color: var(--nj-bronze);
}

.nj-cta-whatsapp:hover {
	color: var(--nj-bronze);
}

.nj-cta-secundario {
	color: var(--nj-ink-soft);
	border-color: var(--nj-line);
}

.nj-cta-secundario:hover {
	color: var(--nj-ink);
	border-color: var(--nj-ink);
}

.nj-cta-whatsapp--card {
	display: block;
	text-align: center;
	margin-top: 16px;
	font-size: 11px;
}

.nj-consulta-block {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 20px;
}

/* ---------------------------------- Botón flotante de WhatsApp (global) ---------------------------------- */

/* Ícono de mensaje de texto genérico (no el logo de WhatsApp) en marrón/
   bronce con blanco — se siente más "alta costura" y menos "botón de
   e-commerce", aunque el link siga yendo a WhatsApp.
   Prefijo body.nj-theme: "body.nj-theme a" (color ink en todos los links)
   le gana en especificidad a un selector de una sola clase y el ícono
   quedaba en tinta oscura en vez de blanco — mismo caso que en la
   portada dividida. */
body.nj-theme .nj-whatsapp-float {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 999;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: var(--nj-bronze);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.nj-whatsapp-float:hover {
	background-color: var(--nj-ink);
	transform: scale(1.08);
}

/* Botón nativo de Astra "volver arriba": flota casi en la misma esquina
   que el nuestro (30px del borde vs. nuestros 24px) y es azul — al
   aparecer con el scroll, un pixel de su borde se asomaba detrás del
   botón de WhatsApp. Lo sacamos: el nuestro ya cubre esa esquina. */
#ast-scroll-top {
	display: none !important;
}

/* ---------------------------------- Muestrario (grilla de categoría WooCommerce) ---------------------------------- */

/* Encabezado de la página de categoría ("Novias", "Fiestas", "Clásicos").
   El título y la descripción viven en <header class="woocommerce-
   products-header">, no en ".ast-archive-description" (esa clase no
   existe en esta versión de Astra — quedó de una versión anterior del
   theme y estas reglas nunca se estaban aplicando; el título se veía sin
   el eyebrow "Colección" ni el tamaño/espaciado propios). */
body.nj-theme .woocommerce-products-header {
	max-width: var(--nj-max);
	margin: 0 auto;
	padding: 12px 56px 64px;
	text-align: center;
	border-bottom: 1px solid var(--nj-line);
	margin-bottom: 40px;
}

body.nj-theme .woocommerce-products-header .page-title::before {
	content: "Colección";
	display: block;
	text-transform: uppercase;
	letter-spacing: 2.5px;
	font-size: 12px;
	font-family: var(--nj-font-body);
	font-weight: 400;
	color: var(--nj-bronze);
	margin-bottom: 16px;
}

body.nj-theme .woocommerce-products-header .page-title {
	font-size: clamp(34px, 4vw, 48px);
	margin: 0 0 12px;
}

body.nj-theme .woocommerce-products-header p {
	max-width: 520px;
	margin: 0 auto;
	color: var(--nj-ink-soft);
	font-size: 15px;
	line-height: 1.7;
}

/* Imagen representativa de la colección, entre el título y la grilla.
   Full-bleed (borde a borde) igual que el hero del home: esta página SÍ
   tiene el .ast-container en display:flex (a diferencia del home, donde
   ya lo pisamos a block), así que un simple width:100% no alcanza — el
   div, como flex-item sin flex-basis, colapsaría a 0. El truco de
   left:50%/margin -50vw lo saca del contenedor por completo y flex:none
   evita que el padre flex lo achique. */
body.nj-theme .nj-category-banner {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	flex: none;
	/* .ast-container es flex (row) y por defecto estira sus hijos
	   (align-items: stretch) a la altura del hermano más alto — que acá es
	   #primary, con el resto de la página entera. Sin esto, el banner
	   queda con metros de alto vacío empujando la grilla para abajo. */
	align-self: flex-start;
	margin-bottom: 48px;
}

body.nj-theme .nj-category-banner__frame {
	position: relative;
	overflow: hidden;
	height: 100svh;
	min-height: 640px;
	background: var(--nj-ivory-deep);
}

/* El marco toma el aspect-ratio real del video (inline, por PHP — ver
   nj_video_ratio()): se ve completo, sin recortar. Con un video de
   proporción parecida a 16:9 esto ya da una altura bien parecida a la
   de las otras colecciones (con foto); solo un video muy panorámico
   volvería a quedar chico — ver conversación si eso pasa de nuevo. */
body.nj-theme .nj-category-banner__frame--video {
	/* width:100% NO es redundante con el ancho automático del bloque: sin un
	   ancho definido, el navegador resuelve el ancho a partir del alto y la
	   proporción, y el min-height de abajo se lo lleva puesto. Con un video
	   16:9 eso da 460 × 16/9 = 818px de ancho — en un celular de 375px el
	   marco se salía de la pantalla y solo se veía su mitad izquierda (el
	   banner "roto" en responsive). Con el ancho fijado, la proporción manda
	   sobre el alto, que es lo que queremos. */
	width: 100%;
	height: auto;
	/* PHP escribe --nj-ratio (y --nj-ratio-vertical si hay versión vertical)
	   en el style del marco. Van como variables y no como un aspect-ratio
	   inline a propósito: un inline le gana a cualquier regla de la hoja de
	   estilos, y entonces la media query de abajo no podría cambiar la
	   proporción en celular. */
	aspect-ratio: var(--nj-ratio, var(--nj-video-ratio));
	min-height: var(--nj-video-min-alto);
}

/* En pantallas angostas el mínimo de alto sobra y molesta: 375px de ancho
   por 16/9 son 211px de alto, así que el min-height de 460px solo agrega
   franjas vacías arriba y abajo del video (el object-fit es "contain", no
   recorta). Lo sacamos y el marco queda exactamente del tamaño del video.
   Arriba de 900px el ancho ya alcanza para superar el mínimo por sí solo,
   así que ahí la regla sigue valiendo para videos muy panorámicos. */
@media (max-width: 900px) {
	body.nj-theme .nj-category-banner__frame--video {
		min-height: 0;
	}

	/* Con versión vertical cargada, el marco toma la proporción de ESE
	   archivo — que es el que el navegador baja acá (ver el atributo "media"
	   de los <source>, en nj_video_tag()). La clase la pone PHP solo cuando
	   la vertical existe: sin ella todo sigue como estaba. */
	body.nj-theme .nj-category-banner__frame--video.nj-video--vertical {
		aspect-ratio: var(--nj-ratio-vertical);
	}
}

body.nj-theme .nj-category-banner__frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
	transform: scale(1.22);
	transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

body.nj-theme .nj-category-banner__frame video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transform: scale(1.22);
	transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

body.nj-theme .nj-category-banner__frame.is-visible img,
body.nj-theme .nj-category-banner__frame.is-visible video {
	transform: scale(1);
}

body.nj-theme .nj-category-banner__note {
	position: absolute;
	bottom: 16px;
	right: 20px;
	z-index: 2;
	font-size: 10px;
	letter-spacing: 0.4px;
	color: rgba(255, 255, 255, 0.8);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Grilla full-bleed: sale del contenedor de Astra para alinearse exacto con
   el banner de la categoría y las fotos de descanso, que ya van de borde a
   borde. Antes quedaban ~96px de blanco a cada lado (max-width 1440 + 56px
   de padding propio + 20px del .ast-container) y la grilla no coincidía con
   las fotos. Mismo truco que .nj-category-banner.

   Va acotada a la página de categoría (.tax-product_cat) a propósito. La
   lista de "Productos relacionados" de la ficha de producto usa el mismo
   ul.products, pero vive adentro de una columna: ahí el 100vw con
   margin-left:-50vw la sacaba de su lugar y la hacía pisar la columna de
   texto. Los estilos de TARJETA (li.product y lo de adentro) siguen sin
   acotar, porque ahí sí queremos que se vean iguales en los dos lados. */
body.nj-theme.tax-product_cat ul.products {
	position: relative;
	left: 50%;
	width: 100vw !important;
	max-width: none;
	margin: 0 0 0 -50vw !important;
	/* Sin respiro a los costados: las fotos llegan al filo de la pantalla,
	   como en las grillas de las maisons de referencia. El texto de cada
	   pieza se despega del borde con su propio padding (ver li.product),
	   no con padding del contenedor — así la foto sigue llegando al borde. */
	padding: 0 0 96px;
	/* Flex en vez de grid a propósito: en grid las piezas caen en carriles
	   fijos, así que una fila incompleta (Novias tiene 17 piezas y las fotos
	   de descanso las parten en 4 / 8 / 5) deja la última pegada a la
	   izquierda. Con flex + justify-content:center las filas completas se
	   ven idénticas y solo la incompleta se acomoda al medio. */
	--nj-cols: 3;
	/* Casi sin aire: las fotos casi se tocan, en las dos direcciones. Antes
	   la separación vertical era grande porque abajo de cada pieza iba el
	   título; ahora la grilla es solo fotos y un mosaico apretado es
	   justamente el efecto buscado. */
	--nj-gap: 4px;
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--nj-gap) !important;
}

/* Foto de descanso dentro de la grilla (cada 4 piezas, una fila entera —
   ver el hook PHP "woocommerce_after_shop_loop_item"): corta el ritmo de
   la grilla con una pausa visual, a todo el ancho de la página (no solo
   el ancho de la grilla) — mismo truco de "romper" el contenedor que
   .nj-category-banner. */
body.nj-theme ul.products li.nj-rest-photo {
	/* La grilla ya no tiene padding lateral, así que no hay nada que
	   compensar: el 100% del contenedor ya es el ancho de la pantalla.

	   Arriba y abajo, 20px de aire: la pausa (foto o video) necesita
	   despegarse de las filas de vestidos, si no se lee como una pieza más
	   de la grilla. A los costados sigue en 0 para llegar al borde. */
	flex: 0 0 100%;
	max-width: none;
	margin: 20px 0;
	position: relative;
	overflow: hidden;
	height: 70svh;
	min-height: 420px;
	background: var(--nj-ivory-deep);
	list-style: none;
}

/* Mismo marco que el video del header (.nj-category-banner__frame--video):
   las dos usan --nj-video-ratio, así que se ven idénticas y no pueden
   volver a separarse. Antes esto era 21/9 con min-height 200px y las
   pausas quedaban a la mitad de alto que el banner de arriba.

   Acá NO se usa --nj-ratio (la proporción real del archivo, que PHP sí
   escribe en el style): se fuerza 16/9 a propósito. Los videos de pausa de
   Novias son 1920x576 (10:3, panorámicos) y respetando su proporción real
   nunca pasarían de ~430px de alto, la mitad que el banner de arriba.

   CONTRAPARTIDA: al forzar el marco a 16/9 y usar object-fit:cover, un
   video 10:3 se recorta a los costados — se ve la franja central, cerca
   de la mitad del ancho original. La solución de fondo es reexportar esos
   videos en 1920x1080 como el del header; esto es el atajo mientras tanto.
   Para volver atrás: usar var(--nj-ratio) acá y sacar el bloque de
   object-fit. (Antes esta regla llevaba !important porque PHP escribía el
   aspect-ratio inline; ahora escribe variables, así que ya no hace falta.)

   En celular manda la media query del final: si hay versión vertical, esa
   se ve entera y no se recorta nada. */
body.nj-theme ul.products li.nj-rest-photo--video {
	height: auto;
	aspect-ratio: var(--nj-video-ratio);
	min-height: var(--nj-video-min-alto);
}

body.nj-theme ul.products li.nj-rest-photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.22);
	transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

body.nj-theme ul.products li.nj-rest-photo video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transform: scale(1.22);
	transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Va DESPUÉS de la regla de arriba a propósito: las dos tienen la misma
   especificidad, así que gana la última. Sin cover, el video panorámico
   quedaría con dos franjas de fondo arriba y abajo dentro del marco 16/9. */
body.nj-theme ul.products li.nj-rest-photo--video video {
	object-fit: cover;
}

body.nj-theme ul.products li.nj-rest-photo.is-visible img,
body.nj-theme ul.products li.nj-rest-photo.is-visible video {
	transform: scale(1);
}

.nj-rest-photo__note {
	position: absolute;
	bottom: 18px;
	right: 20px;
	z-index: 2;
	font-size: 10px;
	letter-spacing: 0.4px;
	color: rgba(255, 255, 255, 0.8);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* <li> vacío que reabre el hook de la foto de descanso para que WooCommerce
   cierre su propio </li> sin romper el HTML — no debe ocupar lugar. */
body.nj-theme ul.products li.nj-loop-continue {
	display: none;
}

body.nj-theme ul.products li.product {
	flex: 0 0 calc((100% - (var(--nj-cols) - 1) * var(--nj-gap)) / var(--nj-cols));
	max-width: calc((100% - (var(--nj-cols) - 1) * var(--nj-gap)) / var(--nj-cols));
	width: auto !important;
	margin: 0 !important;
	text-align: left;
}

/* Miniatura: recorte retrato consistente con el resto del sitio + zoom sutil al pasar el mouse. */
/* ".astra-shop-thumbnail-wrap" es el marco real de la miniatura. El link que
   envuelve la imagen adentro (no ".ast-loop-product__link" — ese es el link
   del TÍTULO, un elemento distinto) también necesita height:100%: si no, al
   ser position:relative pero sin alto propio, la imagen (position:absolute
   dentro suyo) no tiene contra qué resolver su 100% y queda en 0px. */
body.nj-theme ul.products li.product .astra-shop-thumbnail-wrap {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background: var(--nj-ivory-deep);
	margin-bottom: 20px;
}

body.nj-theme ul.products li.product .astra-shop-thumbnail-wrap > a {
	display: block;
	height: 100%;
}

/* !important porque woocommerce-grid.min.css trae "height: auto" con la
   misma especificidad y, según el orden de carga, le gana a esta regla. */
body.nj-theme ul.products li.product img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	object-fit: cover;
	transform: scale(1.22) !important;
	transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

body.nj-theme ul.products li.product .astra-shop-thumbnail-wrap.is-visible img {
	transform: scale(1) !important;
}

/* Catálogo: solo la foto. Abajo de cada pieza no va nada — ni la categoría,
   ni el nombre, ni el "Consultar". El nombre del vestido y el CTA viven en
   la ficha, a un clic de distancia; la grilla queda como un mosaico limpio.

   Se oculta el wrapper entero de Astra y no cada elemento por separado
   porque ese bloque lo imprime astra_woo_woocommerce_shop_product_content,
   que no se desengancha con remove_action (mismo motivo documentado arriba
   para el botón "Agregar al carrito").

   El link a la ficha NO se pierde: sigue siendo la foto, y lo nombra el
   alt de la imagen, así que un lector de pantalla lo anuncia igual. */
body.nj-theme.tax-product_cat ul.products li.product .astra-shop-summary-wrap {
	display: none;
}

/* Sin texto debajo, el margen que separaba la foto del título sobra. */
body.nj-theme.tax-product_cat ul.products li.product .astra-shop-thumbnail-wrap {
	margin-bottom: 0;
}

body.nj-theme .ast-woo-product-category {
	display: block;
	text-transform: uppercase;
	letter-spacing: 1.6px;
	font-size: 11px;
	color: var(--nj-bronze);
	margin-bottom: 6px;
}

body.nj-theme .woocommerce-loop-product__title {
	font-size: 21px !important;
	line-height: 1.3;
	margin: 0 0 8px !important;
}

body.nj-theme ul.products .price {
	display: block;
	margin-bottom: 14px;
}

/* Este muestrario no muestra precios (ver el filtro woocommerce_get_price_html).
   La grilla ya omite el elemento cuando viene vacío, pero la ficha del
   producto lo imprime igual y deja un hueco de unos pocos píxeles. */
body.nj-theme .price:empty {
	display: none;
}

body.nj-theme .nj-cta-whatsapp--card {
	text-align: left;
	margin-top: 0;
}

/* Nota: acá había un bloque @media (max-width: 1200px) con
   "grid-template-columns: repeat(3, 1fr)". Era código muerto desde que la
   grilla pasó a display:flex — grid-template-columns no hace nada en un
   flex container. Se eliminó; las columnas las decide --nj-cols. */

@media (max-width: 900px) {
	/* Dos columnas en vez de tres: en tablet y celular tres piezas por fila
	   dejan las fotos demasiado chicas, que es justo lo contrario de lo que
	   buscamos. Con dos, cada foto ocupa casi media pantalla. */
	body.nj-theme.tax-product_cat ul.products {
		--nj-cols: 2;
		padding: 0 0 72px;
		gap: var(--nj-gap) !important;
	}
	body.nj-theme ul.products li.nj-rest-photo {
		height: 50svh;
		min-height: 320px;
	}
	/* Va después de la regla de arriba y con un selector más específico
	   porque tiene que ganarle: el height fijo de 50svh recortaría el video
	   vertical igual que antes. Con la proporción del archivo, la pausa
	   ocupa el ancho completo y se ve entera. Sin versión vertical cargada
	   no aplica nada de esto y el descanso sigue como estaba. */
	body.nj-theme ul.products li.nj-rest-photo--video.nj-video--vertical {
		height: auto;
		min-height: 0;
		aspect-ratio: var(--nj-ratio-vertical);
	}
	body.nj-theme .woocommerce-products-header {
		padding: 32px 24px 48px;
	}
}

/* Nota: acá había un @media (max-width: 560px) que bajaba a --nj-cols: 2.
   Quedó redundante: desde 900px para abajo ya son 2 columnas. */

/* ---------------------------------- Footer ---------------------------------- */

/* Ocultamos la barra chica de Astra ("Copyright... Powered by Astra"):
   la reemplaza nuestra propia barra inferior, dentro de .nj-footer. */
/* El footer original de Astra (#colophon) queda vacío una vez que
   nj_footer_editorial() lo reemplaza — lo ocultamos entero, si no deja una
   franja en blanco (el color de fondo del body) debajo del nuestro. */
body.nj-theme #colophon.site-footer {
	display: none;
}

.nj-footer {
	background: var(--nj-ink);
	color: rgba(247, 244, 238, 0.75);
}

.nj-footer__top {
	max-width: var(--nj-max);
	margin: 0 auto;
	padding: 96px 56px 56px;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 56px;
}

.nj-footer__col--brand p {
	font-size: 14px;
	line-height: 1.75;
	max-width: 340px;
	margin: 18px 0 28px;
	color: rgba(247, 244, 238, 0.6);
}

.nj-footer .nj-footer__col--brand .nj-footer__logo {
	display: inline-block;
	font-family: var(--nj-font-display);
	font-size: 24px;
	letter-spacing: 1px;
	color: var(--nj-ivory) !important;
	text-decoration: none;
}

.nj-footer__social {
	display: flex;
	gap: 14px;
}

.nj-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(247, 244, 238, 0.3);
	border-radius: 50%;
	color: rgba(247, 244, 238, 0.8);
	transition: border-color 0.2s ease, color 0.2s ease;
}

.nj-footer__social a:hover {
	border-color: var(--nj-bronze-soft);
	color: var(--nj-bronze-soft);
}

.nj-footer .nj-footer__col h4 {
	font-family: var(--nj-font-body);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 1.4px;
	font-size: 12px;
	color: var(--nj-bronze-soft) !important;
	margin: 0 0 20px;
}

.nj-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.nj-footer .nj-footer__col a {
	color: rgba(247, 244, 238, 0.75) !important;
	text-decoration: none;
	font-size: 14px;
	transition: color 0.2s ease;
}

.nj-footer .nj-footer__col a:hover {
	color: var(--nj-ivory) !important;
}

.nj-footer__bottom {
	max-width: var(--nj-max);
	margin: 0 auto;
	padding: 24px 56px;
	border-top: 1px solid rgba(247, 244, 238, 0.15);
}

.nj-footer__bottom p {
	margin: 0;
	font-size: 12px;
	letter-spacing: 0.4px;
	color: rgba(247, 244, 238, 0.5);
}

@media (max-width: 900px) {
	.nj-footer__top {
		grid-template-columns: 1fr;
		gap: 40px;
		padding: 64px 24px 40px;
	}
	.nj-footer__bottom {
		padding: 20px 24px;
	}
}

/* ---------------------------------- Accesibilidad ---------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.nj-look__text,
	.nj-look__media img,
	.nj-hero__bg,
	body.nj-theme ul.products li.product img,
	body.nj-theme .nj-category-banner__frame img,
	body.nj-theme .nj-category-banner__frame video,
	body.nj-theme ul.products li.nj-rest-photo img,
	body.nj-theme ul.products li.nj-rest-photo video,
	.nj-intro,
	.nj-contact-band,
	.nj-navbar {
		transition: none !important;
		animation: none !important;
	}
	.nj-look__text,
	.nj-intro,
	.nj-contact-band {
		opacity: 1;
		transform: none;
	}
	.nj-look__media img,
	.nj-hero__bg,
	body.nj-theme ul.products li.product img,
	body.nj-theme .nj-category-banner__frame img,
	body.nj-theme .nj-category-banner__frame video,
	body.nj-theme ul.products li.nj-rest-photo img,
	body.nj-theme ul.products li.nj-rest-photo video {
		transform: none !important;
	}
	.nj-hero__scroll span {
		animation: none;
	}
}

/* ===================== FICHA DE PRODUCTO ===================== */

/*
 * Astra maqueta la ficha con floats: galería al 50% a la izquierda, texto
 * al 46% a la derecha. Con la galería alta eso dejaba mil pixeles de
 * columna derecha vacía. Pasamos a grid para repartir el ancho de otra
 * manera y, sobre todo, para que el bloque de texto pueda quedar fijo
 * mientras se recorren las fotos (position:sticky no funciona sobre un
 * elemento flotado).
 *
 * .nj-ficha es un div que agrega el theme (ver functions.php) y que
 * envuelve SOLO las fotos y el texto. No es nomenclatura por gusto: un
 * elemento sticky puede correrse por todo su contenedor, y el div.product
 * de WooCommerce incluye también los productos relacionados, así que el
 * texto terminaba montado sobre las tarjetas. Este div corta ese recorrido
 * justo donde terminan las fotos. Marcarle la fila del grid NO alcanza:
 * la fila no limita hasta dónde puede correrse un sticky (probado).
 *
 * El !important no es capricho: Astra imprime el ancho de estas dos
 * columnas en un <style> inline con un selector que incluye #content, y un
 * id le gana a cualquier cantidad de clases. No hay forma de ganarle por
 * especificidad desde una hoja del theme hijo.
 */
body.nj-theme.single-product .nj-ficha {
	display: grid;
	/* La columna de fotos un poco más angosta que la de texto: la galería
	   tiene tope de ancho propio, así no le queda tanto aire a los costados. */
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	column-gap: 3.5rem;
	align-items: start;
}

body.nj-theme.single-product .nj-ficha > .woocommerce-product-gallery,
body.nj-theme.single-product .nj-ficha > .summary {
	width: 100% !important;
	float: none !important;
	margin: 0;
}

/* El nombre, la descripción y los botones acompañan el scroll de las fotos. */
body.nj-theme.single-product .nj-ficha > .summary {
	position: sticky;
	top: 7rem;
}

/* --- Galería: foto principal + carrusel de miniaturas --- */

/*
 * El tope va acá, en el contenedor de toda la galería, y no en la foto:
 * FlexSlider mide este elemento al arrancar y a partir de esa medida le
 * pone ancho en línea a cada diapositiva. Si se acota algo de adentro
 * (.flex-viewport o el wrapper), las medidas que calculó dejan de coincidir
 * con lo que se ve y el carrusel queda corrido.
 *
 * Se acota el ANCHO y no el alto porque son fotos verticales 2:3 tomadas de
 * cuerpo entero: recortarlas al alto de la pantalla les comería el ruedo o
 * la cabeza. Limitando el ancho, el alto sale solo y queda en torno a dos
 * tercios de la ventana.
 */
/*
 * Apilada en grid, con la foto y las flechas compartiendo la MISMA celda
 * (fila 1) y las miniaturas abajo (fila 2). Así las flechas quedan
 * centradas sobre la foto solas, sin tener que restarle a mano el alto de
 * la tira de miniaturas — que cambia con el scrollbar y con el breakpoint.
 */
body.nj-theme .nj-gallery {
	max-width: clamp(320px, 46vh, 440px);
	margin-inline: auto;
	opacity: 1 !important; /* WooCommerce la arranca en 0 y la enciende por JS */
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto auto;
}

/* Foto (con carrusel o sin él) y flechas, todas en la fila de arriba. */
body.nj-theme .nj-gallery > .flex-viewport,
body.nj-theme .nj-gallery > .woocommerce-product-gallery__image,
body.nj-theme .nj-gallery > .flex-direction-nav {
	grid-row: 1;
	grid-column: 1;
}

body.nj-theme .nj-gallery > ol.flex-control-thumbs {
	grid-row: 2;
	grid-column: 1;
}

/* --- Flechas --- */

body.nj-theme .nj-gallery .flex-direction-nav {
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: 0 12px;
	list-style: none;
	z-index: 2;
	/* La franja entera no debe tapar el clic que abre el visor: solo
	   los botones reciben el mouse. */
	pointer-events: none;
}

body.nj-theme .nj-gallery .flex-direction-nav li {
	margin: 0;
	list-style: none;
}

body.nj-theme .nj-gallery .flex-direction-nav a {
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(253, 251, 247, 0.86);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
	font-size: 0; /* FlexSlider igual mete texto en el enlace */
	text-indent: 0;
	opacity: 0.75;
	transition: opacity 0.25s ease, background 0.25s ease;
}

body.nj-theme .nj-gallery .flex-direction-nav a:hover,
body.nj-theme .nj-gallery .flex-direction-nav a:focus-visible {
	opacity: 1;
	background: rgba(253, 251, 247, 1);
}

/* La punta de flecha, dibujada con dos bordes en diagonal. */
body.nj-theme .nj-gallery .flex-direction-nav a::before {
	content: "";
	width: 9px;
	height: 9px;
	border-left: 1.5px solid var(--nj-ink, #2b2622);
	border-bottom: 1.5px solid var(--nj-ink, #2b2622);
	transform: rotate(45deg);
	margin-left: 3px;
}

body.nj-theme .nj-gallery .flex-direction-nav a.flex-next::before {
	transform: rotate(-135deg);
	margin-left: -3px;
}

/* En la primera y en la última foto, la flecha que no lleva a ningún lado. */
body.nj-theme .nj-gallery .flex-direction-nav a.flex-disabled {
	opacity: 0;
	pointer-events: none;
}

body.nj-theme .nj-gallery .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
}

body.nj-theme .nj-gallery .woocommerce-product-gallery__image a {
	display: block;
	cursor: zoom-in;
}

/*
 * Las miniaturas: en una sola fila que se corre de costado. WooCommerce las
 * maqueta como grilla de 4 columnas con float, que con 13 fotos se apila en
 * cuatro filas y empuja todo para abajo.
 */
body.nj-theme .nj-gallery ol.flex-control-thumbs {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.45rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	margin: 0.75rem 0 0;
	padding: 0 0 0.5rem;
	list-style: none;
	scrollbar-width: thin;
	scrollbar-color: var(--nj-line, #d8d2c8) transparent;
}

/* WooCommerce le da a cada miniatura calc(25% - .75em) con un selector de
 * cinco clases: no hay forma de ganarle por especificidad desde acá, y ese
 * 25% es justamente la grilla de cuatro columnas que queremos desarmar. */
body.nj-theme .nj-gallery ol.flex-control-thumbs li {
	flex: 0 0 auto;
	width: 62px !important;
	margin: 0;
	scroll-snap-align: start;
}

body.nj-theme .nj-gallery ol.flex-control-thumbs img {
	display: block;
	width: 62px;
	height: 93px;
	object-fit: cover;
	opacity: 0.45;
	cursor: pointer;
	transition: opacity 0.25s ease;
}

body.nj-theme .nj-gallery ol.flex-control-thumbs img:hover {
	opacity: 0.75;
}

/* La miniatura de la foto que se está viendo, a plena luz. */
body.nj-theme .nj-gallery ol.flex-control-thumbs img.flex-active {
	opacity: 1;
	outline: 1px solid var(--nj-ink, #2b2622);
	outline-offset: 2px;
}

/* Un vestido con una sola foto no necesita tira de miniaturas. */
body.nj-theme .nj-gallery ol.flex-control-thumbs:has(li:only-child) {
	display: none;
}

/* Cada foto ya se abre con un clic: la lupa flotante sobra. */
body.nj-theme .nj-gallery .woocommerce-product-gallery__trigger {
	display: none;
}

@media (max-width: 1200px) {
	body.nj-theme.single-product .nj-ficha {
		column-gap: 2.25rem;
	}
}

@media (max-width: 921px) {
	/* Una sola columna: primero las fotos, después el texto, sin sticky. */
	body.nj-theme.single-product .nj-ficha {
		display: block;
	}
	body.nj-theme.single-product .nj-ficha > .summary {
		position: static;
		margin-top: 2rem;
	}
}

/* ---------- Productos relacionados (al pie de la ficha) ---------- */

/*
 * Las tarjetas usan los mismos estilos que la grilla de la colección
 * (li.product y lo de adentro, que quedaron sin acotar más arriba). Lo que
 * cambia acá es el contenedor: acá NO va full-bleed, va dentro del ancho
 * de la ficha. El orden de la tarjeta —foto arriba, después colección,
 * nombre y "Consultar"— sale del propio HTML de Astra; alcanza con no
 * romperlo.
 */
body.nj-theme .related.products {
	margin-top: 5rem;
	padding-top: 3rem;
	border-top: 1px solid var(--nj-line, #e3ddd3);
}

body.nj-theme .related.products > h2 {
	margin: 0 0 2rem;
	text-align: center;
}

body.nj-theme .related.products ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* La grilla de la colección le da ancho a cada pieza con flex-basis; acá
   el ancho lo pone el grid, así que hay que soltar ese flex-basis. */
body.nj-theme .related.products ul.products li.product {
	flex: none;
	width: auto;
	margin: 0;
}

body.nj-theme .related.products ul.products li.product .astra-shop-summary-wrap {
	text-align: center;
}

@media (max-width: 921px) {
	body.nj-theme .related.products ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	body.nj-theme .related.products {
		margin-top: 3.5rem;
		padding-top: 2.5rem;
	}
}

@media (max-width: 560px) {
	body.nj-theme .related.products ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem 1rem;
	}
}