/* Jadehaus — estilos del sitio. Sin build step, vanilla CSS.
   Identidad de marca: fondo #F4EDE6 (--marfil) y marrón #502B0B (--grafito,
   reutilizado como color de marca — así todo lo que ya usaba --grafito
   como texto/fondo oscuro pasa a la marca sin tocar cada regla una por
   una). Título "Jade Haus" y títulos de sección en Quando; nombres de
   línea y "códigos" (ej. "Gres Argentino") en Playfair Display;
   descripciones, medidas y precios en Work Sans (Canva Sans Regular no es
   una fuente web pública — Work Sans es el reemplazo más parecido sin
   depender de un archivo de fuente con licencia). */

:root {
	--marfil: #F4EDE6;
	--grafito: #502B0B;
	--moca: #8B5E3C;
	--arena: #D8C4A0;

	--font-title: 'Quando', Georgia, 'Times New Roman', serif;
	--font-sub: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--serif: var(--font-title);
	--sans: 'Work Sans', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* ---------- Aparición suave al scrollear ---------- */
/* .jh-reveal arranca invisible y un poco más abajo; main.js le agrega
   "is-visible" con IntersectionObserver apenas entra en pantalla, así el
   contenido va apareciendo de a poco en vez de estar todo ahí de golpe. */
.jh-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
.jh-reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.jh-reveal { opacity: 1; transform: none; transition: none; }
}

body {
	margin: 0;
	background: var(--marfil);
	color: var(--grafito);
	font-family: var(--sans);
	font-weight: 300;
	line-height: 1.6;
}

h1, h2, h3, h4 {
	font-family: var(--serif);
	font-optical-sizing: auto;
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.15;
	margin: 0 0 0.4em;
}

h1 { font-size: clamp(2rem, 4vw, 2.8rem); }

a { color: inherit; }

.container {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* ---------- Header ---------- */
/* Dos filas: .jh-header-top (logo + buscar/carrito) y .jh-header-nav (las
   5 líneas). Ya no hay submenú desplegable bajo "Catálogo" — Nuevo,
   Japonesa, Orgánica y Térmica son ahora links de primer nivel, así que
   alcanza con que el nav haga flex-wrap en mobile (son solo 5 palabras
   cortas, no hace falta un menú hamburguesa). */
.jh-header {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--marfil);
	border-bottom: 1px solid rgba(80,43,11,0.15);
	transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Tres columnas simétricas: logo (izquierda) y buscar/carrito (derecha) en
   columnas del mismo ancho, con "Jade Haus" en texto centrado en el medio
   (.jh-wordmark) — así la fila queda pareja aunque el logo sea grande. */
.jh-header-top {
	position: relative;
	display: grid;
	/* minmax(0,1fr), no "1fr" a secas: así los dos costados quedan siempre
	   del mismo ancho aunque tengan distinta cantidad de íconos/logo, y el
	   texto del medio queda perfectamente centrado. */
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 1rem;
	padding: 0.4rem 1.5rem 0.25rem;
	transition: padding 0.4s ease;
}
/* Con el ícono de menú (☰) sumado a cuenta/buscar/carrito, en celulares
   angostos (≤400px) las 3 columnas ya no entraban con el gap de 1rem entre
   ellas -- el bloque de íconos se desbordaba de su columna hacia la
   izquierda y quedaba pisando el texto "JADE HAUS" del medio. */
@media (max-width: 400px) { .jh-header-top { gap: 0.35rem; } }
@media (max-width: 340px) { .jh-header-top { gap: 0.2rem; } }

.jh-header.jh-scrolled {
	background: rgba(244,237,230,0.92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 8px 24px rgba(80,43,11,0.1);
}

.jh-header.jh-scrolled .jh-header-top { padding: 0.3rem 1.5rem 0.2rem; }

/* Pedido explícito: nada se achica al scrollear -- ni el menú, ni el logo,
   ni el texto "Jade Haus". Todo queda siempre del mismo tamaño; el header
   solo gana el fondo/blur de abajo cuando scrolleás. */

.jh-header-left {
	display: flex;
	align-items: center;
	gap: 1rem;
	justify-content: flex-start;
}

.jh-logo-lockup {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: var(--grafito);
}

/* Logo circular (assets/img/logo/jade-haus-logo.png) arriba a la
   izquierda, grande — el nombre "Jade Haus" en texto va aparte, centrado
   arriba (.jh-wordmark), como pieza independiente del logo. Los paddings
   del header (.jh-header-top) crecen con el logo para que la fila entera
   quede pareja/simétrica en vez de un logo grande apretado contra el
   borde de arriba. */
.jh-logo-mark { display: block; width: 200px; height: 200px; flex-shrink: 0; transition: width 0.4s ease, height 0.4s ease, transform 0.3s ease, opacity 0.3s ease; }
@media (max-width: 640px) { .jh-logo-mark { width: 135px; height: 135px; } }
@media (max-width: 400px) { .jh-logo-mark { width: 100px; height: 100px; } }
@media (max-width: 340px) { .jh-logo-mark { width: 78px; height: 78px; } }
.jh-logo-lockup:hover .jh-logo-mark { transform: scale(1.04); opacity: 0.92; }

/* El texto "Jade Haus" crece EN LA MISMA PROPORCIÓN que el logo (no solo
   uno de los dos) para que seguir viéndose parejo/simétrico como antes,
   nada más que más grande en conjunto. */
.jh-wordmark {
	font-family: var(--font-title);
	font-size: clamp(1.4rem, 3.4vw, 50px);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--grafito);
	white-space: nowrap;
	justify-self: center;
	transition: color 0.2s ease;
}
.jh-wordmark:hover { color: var(--moca); }
/* En mobile no alcanza el ancho para logo + "JADE HAUS" + íconos a la vez
   sin achicar bastante la letra — si no, se pisan entre sí. */
@media (max-width: 640px) { .jh-wordmark { font-size: 1.05rem; } }
@media (max-width: 400px) { .jh-wordmark { font-size: 0.9rem; letter-spacing: 0.02em; } }
@media (max-width: 340px) { .jh-wordmark { font-size: 0.74rem; letter-spacing: 0.01em; } }

.jh-header-actions {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	flex-shrink: 0;
	justify-content: flex-end;
}
@media (max-width: 640px) { .jh-header-actions { gap: 0.6rem; } }
@media (max-width: 400px) { .jh-header-actions { gap: 0.3rem; } }
@media (max-width: 340px) { .jh-header-actions { gap: 0.1rem; } }

.jh-icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0.35rem;
	color: var(--grafito);
	cursor: pointer;
	text-decoration: none;
}
/* 4 íconos (menú + cuenta + buscar + carrito) con el padding de siempre no
   entraban en celulares chicos -- el toque sigue siendo cómodo igual,
   porque lo que se achica es el aire alrededor del ícono, no el ícono en
   sí (el SVG queda en 20px siempre). */
@media (max-width: 400px) { .jh-icon-btn { padding: 0.15rem; } }
@media (max-width: 340px) { .jh-icon-btn { padding: 0.05rem; } }

.jh-icon-btn svg { display: block; }

/* ---------- Menú de cuenta (desplegable) ---------- */
.jh-account-menu { position: relative; }

.jh-account-dropdown {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	background: #fff;
	border-top: 2px solid var(--moca);
	box-shadow: 0 18px 44px rgba(80,43,11,0.16);
	padding: 1.1rem 1.25rem;
	width: 220px;
	text-align: left;
	opacity: 0;
	pointer-events: none;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease;
	z-index: 40;
}

.jh-account-dropdown.is-open {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.jh-account-dropdown p {
	margin: 0 0 0.8rem;
	font-family: var(--sans);
	font-size: 0.78rem;
	line-height: 1.4;
	opacity: 0.75;
}

.jh-account-dropdown .jh-btn { display: block; text-align: center; width: 100%; box-sizing: border-box; }
.jh-account-dropdown .jh-btn + .jh-btn { margin-top: 0.6rem; }

.jh-search-bar {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 1.5rem;
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.2s ease, padding 0.2s ease;
}

.jh-search-bar.is-open { max-height: 60px; padding: 0 1.5rem 0.85rem; }

.jh-search-bar input {
	width: 100%;
	border: none;
	border-bottom: 1px solid var(--grafito);
	background: none;
	font-family: var(--sans);
	font-size: 0.95rem;
	padding: 0.4em 0;
	color: var(--grafito);
}

.jh-search-bar input:focus { outline: none; }

.jh-header-nav { padding: 0.15rem 0 0.4rem; }

.jh-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.9rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0 1.5rem;
}

.jh-nav a {
	text-decoration: none;
	font-family: var(--font-sub);
	font-size: 0.85rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	position: relative;
	padding-bottom: 3px;
	transition: font-size 0.4s ease;
}

.jh-nav a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -2px;
	height: 1px;
	background: var(--moca);
	transition: right 0.2s ease;
}

.jh-nav a:hover::after { right: 0; }
.jh-nav a.active { color: var(--moca); }
.jh-nav a.active::after { right: 0; }

/* ---------- Menú mobile/tablet ---------- */
/* El ícono de tres líneas solo existe visualmente por debajo de 1024px —
   arriba de eso el nav de 5 palabras entra cómodo en una sola fila y el
   ícono queda oculto (display:none), sin ocupar espacio ni parpadear al
   redimensionar. */
.jh-menu-toggle { display: none; }

@media (max-width: 1024px) {
	.jh-menu-toggle { display: inline-flex; }
	.jh-menu-toggle[aria-expanded="true"] { color: var(--moca); }

	/* El nav pasa de fila centrada (wrap feo en dos líneas) a panel
	   desplegable prolijo, con la misma transición de max-height que ya
	   usa el buscador (.jh-search-bar) para mantener el mismo lenguaje de
	   animación en todo el header. */
	.jh-header-nav {
		overflow: hidden;
		max-height: 0;
		padding: 0;
		background: var(--marfil);
		border-top: 0 solid rgba(80,43,11,0.12);
		transition: max-height 0.25s ease;
	}
	.jh-header-nav.is-open {
		max-height: 340px;
		padding: 0.2rem 0 0.4rem;
		border-top-width: 1px;
	}

	.jh-nav {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0 1.5rem;
	}
	.jh-nav li { border-bottom: 1px solid rgba(80,43,11,0.08); }
	.jh-nav li:last-child { border-bottom: none; }
	.jh-nav a {
		display: block;
		padding: 0.95rem 0.1rem;
		font-size: 0.88rem;
	}
	/* El subrayado animado que crece desde la izquierda tiene sentido en
	   una fila horizontal; apilado en columna alcanza con el color de
	   --moca en el link activo, así que se lo saca para no dejar una
	   rayita suelta pegada abajo de cada palabra. */
	.jh-nav a::after { display: none; }
	.jh-nav a.active { font-weight: 500; }
}

/* ---------- Badge de carrito ---------- */
.jh-cart-badge {
	display: none;
	position: absolute;
	top: -2px;
	right: -4px;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--grafito);
	color: var(--marfil);
	font-family: var(--sans);
	font-size: 0.62rem;
	line-height: 1;
}

/* ---------- Botones ---------- */
.jh-btn {
	display: inline-block;
	background: var(--grafito);
	color: var(--marfil);
	border: 1px solid var(--grafito);
	border-radius: 0;
	font-family: var(--sans);
	font-weight: 400;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	text-decoration: none;
	padding: 0.9em 1.8em;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.jh-btn:hover { background: var(--moca); border-color: var(--moca); }

.jh-btn.jh-btn-outline {
	background: transparent;
	color: var(--grafito);
	border: 1px solid var(--grafito);
}

.jh-btn.jh-btn-outline:hover {
	background: var(--grafito);
	color: var(--marfil);
	border-color: var(--grafito);
}

.jh-btn.jh-btn-small {
	padding: 0.6em 1.2em;
	font-size: 0.68rem;
}

.jh-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* ---------- Secciones ---------- */
.jh-section {
	padding: 5rem 0;
}

.jh-centered { text-align: center; max-width: 560px; margin: 0 auto 2.5rem; }

/* ---------- Home: hero "Gres Argentino" + tríptico + CTA mayorista ---------- */
.jh-home-hero {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: linear-gradient(155deg, #CBA97A 0%, #B4875A 55%, #9C7148 100%);
	box-shadow: inset 0 -1px 0 rgba(80,43,11,0.08);
}
@media (min-width: 700px) { .jh-home-hero { aspect-ratio: 21 / 9; } }

.jh-home-hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	animation: jhHeroZoomIn 3.2s ease-out both;
	transform-origin: center;
}

@keyframes jhHeroZoomIn {
	from { transform: scale(1.22); }
	to { transform: scale(1); }
}

/* A propósito NO se respeta prefers-reduced-motion acá: es un zoom único y
   sutil (no parpadeo ni parallax), y varios navegadores con "reducir
   movimiento" activado (a veces sin que el usuario lo sepa) estaban
   apagando el efecto por completo. */

.jh-home-hero-caption {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-sub);
	text-transform: uppercase;
	color: var(--marfil);
	font-size: clamp(1.7rem, 5.2vw, 3.4rem);
	letter-spacing: 0.05em;
	text-shadow: 0 2px 20px rgba(30,16,4,0.45);
}

/* Tríptico: tres fotos parejas, con una sombra suave y un levantamiento
   sutil al pasar el mouse — lectura simétrica de a tres, con jerarquía
   apenas insinuada por el hover en vez de bordes o marcos pesados. */
.jh-home-triptych {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(0.75rem, 2.5vw, 1.5rem);
	margin: 3rem 0;
}
.jh-home-triptych > div {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--arena);
	box-shadow: 0 10px 28px rgba(80,43,11,0.14);
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.jh-home-triptych > div:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(80,43,11,0.2);
}
.jh-home-triptych img,
.jh-home-triptych video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.jh-home-triptych > div:hover img,
.jh-home-triptych > div:hover video { transform: scale(1.045); }

.jh-home-wholesale {
	text-align: center;
	max-width: 520px;
	margin: 3.5rem auto 4rem;
}
.jh-home-wholesale p {
	font-family: var(--font-sub);
	font-size: 1.15rem;
	font-style: italic;
	line-height: 1.5;
	color: var(--grafito);
}
.jh-home-wholesale a {
	display: inline-block;
	margin-top: 0.9rem;
	padding-bottom: 2px;
	font-family: var(--sans);
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	text-decoration: none;
	color: var(--grafito);
	border-bottom: 1px solid var(--moca);
	transition: color 0.2s ease, border-color 0.2s ease;
}
.jh-home-wholesale a:hover { color: var(--moca); }

/* ---------- Catálogo ---------- */



/* Foto difusa de ambientación: aparece entre el menú de línea y las
   categorías (Tazas/Bowls/etc.) cuando se filtra por una línea puntual —
   pedido explícito del cliente ("no quiero que aparezca catálogo ahí, sino
   una foto difusa"). Es una sola imagen de referencia compartida para todas
   las líneas por ahora (se puede reemplazar por una específica por línea
   más adelante sin tocar el resto). */
.jh-linea-difuso {
	position: relative;
	width: 100%;
	aspect-ratio: 1600 / 420;
	overflow: hidden;
	margin-bottom: 2rem;
}
.jh-linea-difuso img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	/* Menos blur que antes (4px -> 2px) para que se distinga mejor qué
	   imagen es cada línea, pero sigue siendo un fondo difuso, no nítido. */
	filter: blur(2px) brightness(0.9) saturate(1.05);
	transform: scale(1.06); /* tapa el borde nítido que deja el blur */
}
.jh-linea-difuso-caption {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Un poco más oscuro que antes (0.28 -> 0.36) para que el título se siga
	   leyendo bien ahora que el fondo tiene menos blur y se ve más "ocupado". */
	background: rgba(51,49,45,0.36);
	color: var(--marfil);
	font-family: var(--serif);
	font-size: clamp(1.6rem, 4vw, 2.6rem);
	letter-spacing: 0.02em;
	text-align: center;
}
@media (max-width: 640px) { .jh-linea-difuso { aspect-ratio: 1600 / 640; } }

.jh-filters {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 2rem;
}

.jh-filter-chip {
	border: 1px solid var(--grafito);
	background: transparent;
	border-radius: 0;
	padding: 0.5em 1.1em;
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor: pointer;
}

.jh-filter-chip.active { background: var(--grafito); color: var(--marfil); }

/* minmax(0, 1fr), no "1fr" a secas: un "1fr" solo vale minmax(auto, 1fr),
   así que la columna no se achica más allá del contenido más ancho de
   adentro (nombre largo, foto) -- eso hacía que en celulares angostos la
   grilla de 2 columnas se desbordara del contenedor en vez de encogerse
   (mismo motivo por el que .jh-header-top ya usaba minmax(0,1fr) más arriba). */
.jh-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 0.75rem;
}

/* Pedido explícito: 2 columnas en celular Y en tablet (antes pasaba a 3 ya
   en 782px, que corta tablets chicas a la mitad de una tarjeta), y recién
   3 columnas -- nunca 4 -- de ahí para arriba en desktop. Mismo corte de
   1024px que el menú hamburguesa, para que "celular y tablet" sea
   consistente en todo el sitio. Con fotos cuadradas y sin recortar, 3 por
   fila es lo que entra bien sin que la última se vea apretada o cortada
   (ej. las bandejas anchas de la línea orgánica). */
@media (min-width: 1025px) {
	.jh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 1.25rem; }
}

.jh-card { text-align: left; }

/* 1/1: las fotos reales de producto son cuadradas (~3400×3400), no 3:4 --
   con 3:4 el object-fit:cover recortaba arriba/abajo (o los costados en
   piezas más anchas que altas, como bowls) para rellenar el marco vertical.
   En 1:1 entra la foto completa sin recortar nada, y de paso el cuadrado
   queda más grande visualmente en la grilla. */
.jh-swatch-photo {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 0;
	overflow: hidden;
	background: var(--arena);
	box-shadow: 0 8px 20px rgba(80,43,11,0.1);
	transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.jh-card:hover .jh-swatch-photo {
	box-shadow: 0 14px 30px rgba(80,43,11,0.18);
	transform: translateY(-3px);
}

.jh-card-line {
	font-family: var(--font-sub);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--moca);
	margin-top: 0.6rem;
}

.jh-card-title {
	font-family: var(--serif);
	font-weight: 500;
	font-size: 1rem;
	letter-spacing: -0.005em;
	margin: 0.15rem 0 0.3rem;
}

.jh-card-title a { text-decoration: none; }

.jh-card-medida {
	font-size: 0.76rem;
	opacity: 0.6;
	margin: 0 0 0.4rem;
}

/* flex-wrap: los productos con muchos colores (9-10) no entraban en una
   sola fila dentro de una tarjeta angosta -- sin flex-shrink:0 en .jh-dot
   (ver más abajo), el flex achicaba el ANCHO de cada puntito para que
   entraran todos, y quedaban ovalados en vez de círculos. Ahora, si no
   entran todos en una fila, los que sobran pasan a la siguiente en vez de
   deformarse. */
.jh-colors {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-bottom: 0.5rem;
}

.jh-price-gate {
	background: var(--marfil);
	border: 1px solid var(--arena);
	padding: 0.9rem 1rem;
	margin: 1.25rem 0;
}

.jh-price-gate-label {
	font-family: var(--font-sub);
	font-size: 0.82rem;
	color: var(--moca);
	margin: 0 0 0.6rem;
}

.jh-price-gate-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.jh-price-gate.jh-price-gate--compact {
	background: none;
	border: none;
	padding: 0;
	margin: 0.35rem 0 0.5rem;
}

.jh-price-gate--compact .jh-price-gate-label {
	font-size: 0.7rem;
	opacity: 0.75;
	margin-bottom: 0.4rem;
}

.jh-price-gate--compact .jh-price-gate-actions .jh-btn-small {
	padding: 0.5em 0.9em;
	font-size: 0.62rem;
}

.jh-dot {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1px solid rgba(51,49,45,0.4);
	padding: 0;
	cursor: pointer;
	box-sizing: border-box;
}

button.jh-dot.selected {
	border: 2px solid var(--grafito);
	box-shadow: 0 0 0 2px var(--marfil);
}

.jh-card-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.jh-stepper-small {
	transform: scale(0.92);
	transform-origin: left center;
}

.jh-price-locked {
	font-size: 0.8rem;
	opacity: 0.7;
}

.jh-price-locked a { text-decoration: underline; }

.jh-price {
	font-family: var(--sans);
	font-weight: 500;
	font-size: 1.1rem;
	color: var(--grafito);
}

.jh-payment-info { margin: -0.75rem 0 1.5rem; }

.jh-payment-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-family: var(--sans);
	font-size: 0.82rem;
	color: var(--moca);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.jh-payment-toggle svg { transition: transform 0.25s; flex-shrink: 0; }
.jh-payment-toggle.is-open svg { transform: rotate(180deg); }

.jh-payment-panel {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.3s ease, opacity 0.25s ease, margin 0.3s ease;
	background: #fff;
	box-shadow: 0 8px 20px rgba(80, 43, 11, 0.08);
}

.jh-payment-panel.is-open {
	max-height: 220px;
	opacity: 1;
	margin-top: 0.75rem;
}

.jh-payment-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	width: 100%;
	padding: 0.6rem 0.9rem;
	font-family: var(--sans);
	font-size: 0.88rem;
	border: none;
	border-bottom: 1px solid var(--arena);
	background: none;
	color: inherit;
	text-align: left;
	cursor: pointer;
	transition: background 0.2s;
}

.jh-payment-row:hover { background: rgba(139, 94, 60, 0.08); }

.jh-payment-row.is-selected {
	background: var(--marfil);
	font-weight: 500;
}

.jh-payment-row.is-selected strong { color: var(--moca); font-size: 0.98rem; }
.jh-payment-row:last-of-type { border-bottom: none; }

.jh-payment-note {
	font-size: 0.72rem;
	opacity: 0.6;
	font-style: italic;
	margin: 0.5rem 0.9rem 0.75rem;
}

/* mostrar/ocultar según el toggle de demo */
body[data-demo="invitado"] .jh-only-mayorista { display: none !important; }
body[data-demo="mayorista"] .jh-only-invitado { display: none !important; }

/* ---------- Producto ---------- */
.jh-product-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.5rem;
}

@media (min-width: 900px) {
	.jh-product-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

.jh-product-photo-main {
	aspect-ratio: 1 / 1;
	border-radius: 0;
	cursor: pointer;
	position: relative;
}

.jh-gallery { position: relative; }

.jh-gallery-hint {
	position: absolute;
	left: 0.75rem;
	bottom: 0.75rem;
	background: rgba(51,49,45,0.75);
	color: var(--marfil);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.4em 0.8em;
	border-radius: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.jh-gallery-thumbs {
	display: none;
	gap: 0.6rem;
	margin-top: 0.75rem;
}

.jh-gallery.is-open .jh-gallery-thumbs { display: flex; }
.jh-gallery.is-open .jh-gallery-hint { opacity: 0; }

.jh-gallery-thumb {
	width: 64px;
	height: 64px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 0;
	overflow: hidden;
	cursor: pointer;
	background: var(--arena);
}

.jh-gallery-thumb.selected { border-color: var(--grafito); }

.jh-swatch-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 1rem 0 1.5rem;
}

.jh-swatch-picker button {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 2px solid transparent;
	cursor: pointer;
}

.jh-swatch-picker button.selected {
	border-color: var(--grafito);
}

.jh-qty-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 1.5rem 0;
}

.jh-stepper {
	display: flex;
	align-items: center;
	border: 1px solid var(--grafito);
	border-radius: 0;
}

.jh-stepper button {
	width: 34px;
	height: 34px;
	background: none;
	border: none;
	font-size: 1rem;
	cursor: pointer;
}

.jh-stepper input {
	width: 42px;
	text-align: center;
	border: none;
	background: none;
	font-family: var(--sans);
	font-size: 0.95rem;
}

/* ---------- Carrito ---------- */
.jh-cart-table { width: 100%; border-collapse: collapse; }

.jh-cart-table .jh-stepper button { width: 24px; height: 24px; font-size: 0.8rem; }
.jh-cart-table .jh-stepper input { width: 26px; font-size: 0.8rem; }

.jh-cart-table th {
	text-align: left;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-bottom: 2px solid var(--grafito);
	padding-bottom: 0.75rem;
}
.jh-cart-table td {
	padding: 1rem 0;
	border-bottom: 1px solid rgba(51,49,45,0.12);
	vertical-align: middle;
}
.jh-cart-item-info { display: flex; align-items: center; gap: 1rem; }
.jh-cart-thumb { width: 56px; height: 56px; border-radius: 0; flex-shrink: 0; overflow: hidden; background: var(--arena); }
.jh-cart-remove { background: none; border: none; text-decoration: underline; cursor: pointer; font-size: 0.8rem; color: var(--grafito); opacity: 0.6; }

@media (max-width: 781px) {
	.jh-cart-table thead { display: none; }
	.jh-cart-table, .jh-cart-table tbody, .jh-cart-table tr, .jh-cart-table td { display: block; width: 100%; }
	.jh-cart-table tr { padding: 1rem 0; border-bottom: 1px solid rgba(51,49,45,0.12); }
	.jh-cart-table td { border: none; padding: 0.25rem 0; }
}

.jh-cart-summary {
	max-width: 320px;
	margin-left: auto;
	margin-top: 2rem;
	text-align: right;
}

.jh-cart-total {
	font-family: var(--sans);
	font-weight: 500;
	font-size: 1.5rem;
	margin: 0.5rem 0 1.5rem;
}

.jh-sticky-checkout {
	position: sticky;
	bottom: 0;
	background: var(--marfil);
	padding: 1rem;
	box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
	margin-top: 1.5rem;
}

/* ---------- Formularios ---------- */
.jh-form { max-width: 460px; }
.jh-form label { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.4rem; }
.jh-form input, .jh-form textarea, .jh-form select {
	width: 100%;
	padding: 0.75em 0.85em;
	margin-bottom: 1.2rem;
	border: 1px solid rgba(51,49,45,0.3);
	border-radius: 0;
	font-family: var(--sans);
	font-size: 0.9rem;
	background: #fff;
}

.jh-status-pill {
	display: inline-block;
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.35em 0.9em;
	border-radius: 0;
}
.jh-status-pill.pendiente { background: var(--arena); color: var(--grafito); }
.jh-status-pill.procesado { background: #d9c9b0; color: var(--grafito); }
.jh-status-pill.entregado { background: var(--grafito); color: var(--marfil); }

/* ---------- Admin mock ---------- */
.jh-admin-shell {
	display: grid;
	grid-template-columns: 220px 1fr;
	min-height: 70vh;
}
.jh-admin-sidebar {
	background: var(--grafito);
	color: var(--marfil);
	padding: 2rem 1.25rem;
}
.jh-admin-sidebar h2 { color: var(--marfil); font-size: 1.1rem; }
.jh-admin-sidebar ul { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.jh-admin-sidebar li { margin-bottom: 0.9rem; font-size: 0.85rem; opacity: 0.85; cursor: pointer; }
.jh-admin-sidebar li.active { opacity: 1; color: var(--arena); font-weight: 600; }
.jh-admin-sidebar li:hover { opacity: 1; }

.jh-admin-panel { display: none; }
.jh-admin-panel.active { display: block; }
.jh-admin-main { padding: 2rem; background: #fff; }
.jh-admin-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.jh-admin-table th, .jh-admin-table td { text-align: left; padding: 0.65rem 0.5rem; border-bottom: 1px solid rgba(51,49,45,0.1); }
.jh-admin-table th { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; }

.jh-color-checklist {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.2rem;
	padding: 0.75rem;
	border: 1px solid rgba(51,49,45,0.15);
	max-height: 160px;
	overflow-y: auto;
}
.jh-color-checklist label {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.78rem;
	text-transform: none;
	letter-spacing: 0;
	margin: 0;
	padding: 0.2em 0.5em;
	border: 1px solid rgba(51,49,45,0.15);
	cursor: pointer;
	background: var(--marfil);
}
.jh-color-checklist label:has(input:checked) {
	border-color: var(--moca);
	background: #fff;
}
.jh-color-checklist input[type="checkbox"] { margin: 0; }
.jh-color-checklist .jh-color-checklist-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 1px solid rgba(51,49,45,0.3);
	flex-shrink: 0;
}

@media (max-width: 781px) {
	.jh-admin-shell { grid-template-columns: 1fr; }
	.jh-admin-sidebar { display: flex; overflow-x: auto; gap: 1rem; padding: 1rem; }
	.jh-admin-sidebar ul { display: flex; margin: 0; gap: 1rem; }
}

/* ---------- Footer ---------- */
/* Dos columnas: enlaces de servicio a la izquierda, contacto con ícono a
   la derecha — mismo footer en todas las páginas del sitio. */
.jh-footer {
	background: var(--grafito);
	color: var(--marfil);
	padding: 3rem 0;
	margin-top: 3rem;
	font-size: 0.88rem;
	border-top: 3px solid var(--moca);
}
.jh-footer a { text-decoration: none; color: inherit; opacity: 0.88; transition: opacity 0.2s ease; }
.jh-footer a:hover { opacity: 1; }
.jh-footer-cols { display: flex; flex-wrap: wrap; gap: 2rem 3rem; justify-content: space-between; }
.jh-footer-links, .jh-footer-contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.jh-footer-links li:first-child a { text-decoration: underline; text-underline-offset: 3px; }
.jh-footer-contact li { display: flex; align-items: center; gap: 0.65rem; }
.jh-footer-contact svg { flex-shrink: 0; }