/* Tienda JaviRen - TJ-2 - convergencia visual Stitch (storefront) */

:root {
	/* Paleta Stitch (DESIGN_TIENDA_JAVIREN_STITCH_V1.md, fuente rectora) */
	--jtj1-blue: #0b57b7; /* CTA / accion primaria */
	--jtj1-blue-mid: #0a4287; /* hover/activo sobre --jtj1-blue */
	--jtj1-blue-dark: #0a4287;
	--jtj1-authority: #07264b; /* footer / superficies de autoridad */
	--jtj1-blue-soft: #eaf4ff;
	--jtj1-green: #4b9a16;
	--jtj1-green-light: #62b21c;
	--jtj1-surface: #f6f8fb;
	--jtj1-white: #ffffff;
	--jtj1-ink: #0c1c2d;
	--jtj1-ink-muted: #5e6c7b;
	--jtj1-danger: #ef221f;
	--jtj1-border: #dde6ef;
	--jtj1-radius-sm: 14px;
	--jtj1-radius-md: 20px;
	--jtj1-radius-lg: 28px;
	--jtj1-shadow-sm: 0 8px 24px rgba(9, 49, 95, 0.08);
	--jtj1-shadow-md: 0 20px 55px rgba(9, 49, 95, 0.12);
	--jtj1-container: 1180px;
	--jtj1-font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
}

body {
	font-family: var(--jtj1-font);
	color: var(--jtj1-ink);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Foco visible en toda la tienda (obligatorio WCAG 2.2 AA) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--jtj1-blue);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Banner de staging sitewide (obligatorio: no valido comercialmente, sin pagos reales) */
.jtj1-demo-banner {
	background: var(--jtj1-authority);
	color: var(--jtj1-white);
	text-align: center;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 0.4rem 1rem;
}

/* Header */
.jtj1-header {
	background: var(--jtj1-white);
	border-bottom: 1px solid var(--jtj1-border);
	padding: 0.85rem 1.5rem;
	position: sticky;
	top: 0;
	z-index: 30;
	box-shadow: 0 1px 0 rgba(12, 28, 45, 0.04);
}

.jtj1-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	flex-wrap: wrap;
	max-width: 1400px;
	margin: 0 auto;
}

.jtj1-logo {
	display: flex;
	align-items: center;
}

.jtj1-logo-text {
	font-weight: 800;
	font-size: 1.375rem;
	color: var(--jtj1-authority);
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.jtj1-logo-link {
	display: flex;
	align-items: center;
}

/*
 * Logo de header. TJ-2 Stitch refinamiento 4 (seccion 4-5): el logo debe
 * verse siempre COMPLETO (marca protagonista, ~170-200px de ancho visual
 * desktop). Verificado en runtime contra staging (Home, /shop/ y ficha de
 * producto, con cache de navegador deshabilitada por CDP): el archivo
 * servido es byte-identico a "Logo_SOLO.png" (SHA-256
 * ca3ab2433a9cf52be26b39ec5f36a9c82d74a623bef7b3ce01ccaa1cbb4fe529) y
 * renderiza sin recorte, con `naturalWidth/Height` = 2172x724 en las 3
 * paginas. `object-fit:contain` agregado de forma defensiva (garantiza que
 * el arte nunca se recorte/deforme aunque cambie el asset o su ratio).
 *
 * Selector prefijado con ".jtj1-header" (en vez de ".jtj1-logo-img" sola):
 * WooCommerce carga ".woocommerce img, .woocommerce-page img{height:auto;
 * max-width:100%}" (clase+elemento, mayor especificidad que una sola clase)
 * en toda pagina de catalogo/producto (clases de body ".woocommerce"/
 * ".woocommerce-page"), lo que ganaba sobre esta regla y renderizaba el logo
 * a su tamano nativo completo (verificado en runtime: 2172x724 sin recorte
 * en /shop/ y en la ficha de producto, aunque en Home se veia correcto por
 * no tener esas clases de body).
 */
.jtj1-header .jtj1-logo-img {
	height: 62px;
	width: auto;
	max-width: 240px;
	object-fit: contain;
	display: block;
}

.jtj1-logo:hover .jtj1-logo-text {
	color: var(--jtj1-blue);
}

.jtj1-primary-nav ul {
	display: flex;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.jtj1-primary-nav a {
	color: var(--jtj1-ink);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
}

.jtj1-primary-nav a:hover {
	color: var(--jtj1-blue);
}

.jtj1-header-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

/* Toggle de menu mobile: oculto en desktop, el header conserva la nav siempre visible. */
.jtj1-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	min-height: 44px;
	background: var(--jtj1-white);
	border: 1px solid var(--jtj1-border);
	border-radius: 8px;
	padding: 0.4rem 0.75rem;
	font-weight: 700;
	color: var(--jtj1-ink);
	cursor: pointer;
}

.jtj1-nav-toggle:hover {
	border-color: var(--jtj1-blue);
	color: var(--jtj1-blue);
}

.jtj1-search-form {
	display: flex;
	gap: 0.25rem;
}

.jtj1-search-form input[type="search"] {
	border: 1px solid var(--jtj1-border);
	background: var(--jtj1-surface);
	border-radius: 999px;
	padding: 0.5rem 1rem;
	min-width: 200px;
}

.jtj1-search-form input[type="search"]:focus-visible {
	background: var(--jtj1-white);
}

.jtj1-search-form button {
	border: none;
	background: var(--jtj1-blue);
	color: var(--jtj1-white);
	border-radius: 999px;
	padding: 0.5rem 1.1rem;
	cursor: pointer;
	font-weight: 600;
}

.jtj1-search-form button:hover {
	background: var(--jtj1-blue-mid);
}

.jtj1-contact-line {
	font-size: 0.85rem;
	color: var(--jtj1-ink-muted);
}

/* Mini cart: acento de marca sobre el bloque nativo de WooCommerce. */
.wc-block-mini-cart__button {
	color: var(--jtj1-ink);
}

.wc-block-mini-cart__badge {
	background: var(--jtj1-blue) !important;
}

/* Hero */
.jtj1-hero {
	position: relative;
	overflow: hidden;
	color: var(--jtj1-white);
	background: linear-gradient(135deg, var(--jtj1-blue-mid) 0%, var(--jtj1-authority) 100%);
	padding: 3.5rem 1.5rem;
	display: flex;
	align-items: center;
}

.jtj1-hero-inner {
	max-width: 1180px;
	margin: 0 auto;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 2.5rem;
	flex-wrap: wrap;
}

.jtj1-hero-copy {
	flex: 1 1 360px;
}

/*
 * "color: white" explicito (no basta con heredar de .jtj1-hero): los estilos
 * globales de WordPress (theme.json styles.elements.heading) generan una
 * regla propia sobre h1-h6 con el color de texto principal (ink), que gana
 * sobre la herencia del ancestro y dejaba el titular del Hero en tinta
 * oscura sobre foto/degradado oscuro (verificado en runtime: color
 * computado rgb(12,28,45) en vez de blanco).
 */
.jtj1-hero-copy h1 {
	color: var(--jtj1-white);
	font-size: clamp(2rem, 4.5vw, 3.75rem);
	font-weight: 800;
	line-height: 1.05;
	margin: 0 0 1.1rem;
}

.jtj1-hero-copy p {
	font-size: 1.1rem;
	line-height: 1.6;
	opacity: 0.94;
	margin-bottom: 1.75rem;
	max-width: 46ch;
}

/* PRE-D3: condiciones mayoristas resumidas entre el mensaje y el CTA. */
.jtj1-hero-highlights {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
	max-width: 46ch;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.jtj1-hero-highlights li {
	position: relative;
	padding-left: 1.35rem;
	font-size: 0.96rem;
	line-height: 1.5;
	opacity: 0.94;
}

.jtj1-hero-highlights li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--jtj1-white);
	font-weight: 700;
	opacity: 0.85;
}

.jtj1-hero-cta-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
}

.jtj1-hero-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--jtj1-white);
	color: var(--jtj1-blue);
	font-weight: 700;
	padding: 0.9rem 1.85rem;
	border-radius: 999px;
	text-decoration: none;
	box-shadow: var(--jtj1-shadow-sm);
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.jtj1-hero-cta:hover {
	background: var(--jtj1-blue);
	color: var(--jtj1-white);
	transform: translateY(-1px);
}

/* CTA secundario: contorno sobre el fondo azul, no compite con el CTA principal. */
.jtj1-hero-cta-secondary {
	background: transparent;
	color: var(--jtj1-white);
	box-shadow: none;
	border: 1.5px solid rgba(255, 255, 255, 0.65);
}

.jtj1-hero-cta-secondary:hover {
	background: rgba(255, 255, 255, 0.12);
	color: var(--jtj1-white);
	border-color: var(--jtj1-white);
}

.jtj1-hero-visual {
	flex: 0 0 auto;
	max-width: 280px;
}

.jtj1-hero-visual img {
	max-width: 100%;
	height: auto;
	display: block;
}

.jtj1-koala-placeholder-note {
	font-size: 0.7rem;
	opacity: 0.75;
	margin-top: 0.25rem;
}

/*
 * HERO real (staging TJ-2): imagen aprobada a pantalla completa como fondo
 * del bloque (composicion Stitch), con degradado de autoridad para legibilidad
 * del texto en vez de quedar como visual lateral recortado.
 */
.jtj1-hero-visual:has(.jtj1-hero-picture) {
	position: absolute;
	inset: 0;
	max-width: none;
	flex: none;
	z-index: 0;
}

.jtj1-hero-picture {
	display: block;
	width: 100%;
	height: 100%;
}

.jtj1-hero-visual:has(.jtj1-hero-picture) .jtj1-hero-picture img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: 0;
	display: block;
}

.jtj1-hero:has(.jtj1-hero-picture) {
	min-height: 600px;
	padding: 0 1.5rem;
}

.jtj1-hero:has(.jtj1-hero-picture)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(100deg, rgba(7, 38, 75, 0.86) 0%, rgba(7, 38, 75, 0.58) 48%, rgba(7, 38, 75, 0.18) 100%);
}

.jtj1-hero:has(.jtj1-hero-picture) .jtj1-hero-copy {
	position: relative;
	z-index: 2;
	flex: 1 1 480px;
	max-width: 620px;
}

/*
 * Seccion de beneficios (TJ-2 Stitch, resolucion definitiva): se abandono
 * el banner raster compuesto (Banner_Iconos.png / BANNER ICONOS 2.0.png /
 * Banner ICONOS.png) como solucion activa; ya no existe ningun PNG en este
 * componente, por lo que un crop/corte visual deja de ser posible por
 * construccion. Cada uno de los 5 iconos es SVG inline (patterns/benefits.php),
 * dibujado a mano en el mismo lenguaje visual (line-art azul JaviRen +
 * acento verde sutil) que el banner retirado, dentro de un badge circular
 * con fondo tonal suave y sombra minima. Texto debajo del badge, en azul
 * JaviRen, nunca superpuesto sobre ningun grafico.
 */
/*
 * TJ-2 PRE-D3 correccion final (seccion 10-11 del encargo): franja de
 * confianza de marca, no cinco cards. Fondo suave para diferenciarla de
 * "Como comprar" (blanco) sin introducir una segunda seccion pesada; iconos
 * en badge blanco con borde fino azul (reutiliza el mismo lenguaje
 * borde-azul/acento-verde de los marcadores del timeline, sin sombra
 * generica) y divisores finos entre items en desktop.
 */
.jtj1-benefits {
	background: var(--jtj1-surface);
	padding: 2.75rem 1.5rem;
}

/*
 * Grid (no flex): con `flex:1 1 0` + `min/max-width` por item, el primer
 * item podia crecer hasta su `max-width` antes de que el navegador
 * decidiera el wrap, empujando el resto a una columna de a uno en mobile
 * (bug real, detectado en staging con viewport real, no solo calculado).
 * CSS Grid con columnas explicitas por breakpoint es determinista: 5
 * columnas desktop, 2 columnas mobile (el 5to item ocupa la fila completa
 * y queda centrado por el propio contenido interno).
 */
.jtj1-benefits-grid {
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.5rem 1rem;
}

.jtj1-benefit {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 0.5rem;
}

/* Divisor fino entre items (desktop): refuerza el ritmo horizontal sin bordes de card. */
.jtj1-benefit:not(:first-child)::before {
	content: '';
	position: absolute;
	top: 0.5rem;
	bottom: 0.5rem;
	left: 0;
	width: 1px;
	background: var(--jtj1-border);
}

.jtj1-benefit-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: var(--jtj1-white);
	border: 1.5px solid var(--jtj1-blue-soft);
	margin-bottom: 0.85rem;
}

.jtj1-benefit-icon svg {
	width: 2rem;
	height: 2rem;
}

.jtj1-benefit-title {
	color: var(--jtj1-ink);
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.3;
}

/*
 * Banner de Ofertas (TJ-2 Stitch refinamiento 3, seccion 7-11): el asset
 * vinculante "Banner OFERTAS.png" sigue siendo el fondo COMPLETO e integro
 * (fondo degradado + koala + ticket "OFERTAS" ya incluidos, sin
 * transparencia: verificado que los 4 pixeles de esquina son opacos),
 * `width:100%; height:auto` (nunca `object-fit:cover`, que recortaria
 * composicion). Refinamiento 2 lo dejo como unico elemento sin overlay;
 * Nicolas aclaro que necesitaba ademas titulo/descripcion/CTA reales, pero
 * SUPERPUESTOS sobre la zona azul vacia izquierda del propio banner (no un
 * bloque paralelo aparte, no una segunda caja/fondo). La zona 5%-45% de
 * ancho es fondo degradado vacio (verificado visualmente: koala y ticket
 * ocupan el tercio derecho), lo que deja espacio real para el overlay sin
 * taparlos. Radius sutil recorta unicamente las 4 esquinas rectas del PNG.
 */
/*
 * margin-top real (TJ-2 Stitch refinamiento 4, seccion 2): medido en runtime
 * contra staging, la caja de ".jtj1-shortcode-grid" de "Productos
 * Destacados" (patterns/star-products.php) terminaba exactamente donde
 * empezaba esta seccion -0px de separacion real entre las dos cajas de
 * seccion-, aunque el ultimo producto quedara ~136px mas arriba por su
 * propio padding interno. Eso es lo que Nicolas veia como "pegado". Se
 * agrega aqui (no en ".jtj1-shortcode-grid" generico, que tambien envuelve
 * la propia seccion de Ofertas y afectaria su limite con el footer sin
 * necesidad) para no tocar limites no señalados como problema.
 */
.jtj1-offers-section {
	max-width: 1180px;
	margin: 3rem auto 2.5rem;
	padding: 0 1.5rem;
}

.jtj1-offer-banner-wrap {
	position: relative;
	margin-bottom: 2.5rem;
	border-radius: var(--jtj1-radius-lg);
	overflow: hidden;
}

.jtj1-offer-banner-img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Jerarquia editorial (TJ-2 Stitch refinamiento 4, seccion 3): el banner es
 * pieza principal de Home, el copy anterior se veia "demasiado chico" para
 * ese rol. Ancho util ampliado (40% -> 45%, left 6% -> 5%) para acomodar el
 * titulo mas grande sin forzar salto de linea extra; verificado visualmente
 * que sigue sin tocar koala/ticket (ambos ocupan el tercio derecho real de
 * la imagen).
 */
.jtj1-offer-banner-overlay {
	position: absolute;
	left: 5%;
	top: 50%;
	transform: translateY(-50%);
	max-width: 45%;
}

.jtj1-offer-banner-title {
	color: var(--jtj1-white);
	font-size: clamp(1.8rem, 2.9vw, 2.625rem);
	font-weight: 800;
	line-height: 1.1;
	margin: 0 0 0.65rem;
}

.jtj1-offer-banner-text {
	color: rgba(255, 255, 255, 0.92);
	font-size: 1.1rem;
	line-height: 1.45;
	margin: 0 0 1.25rem;
	max-width: 34ch;
}

.jtj1-offer-banner-cta {
	display: inline-flex;
	align-items: center;
	background: var(--jtj1-white);
	color: var(--jtj1-blue);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1;
	padding: 1.05rem 1.75rem;
	border-radius: 999px;
	text-decoration: none;
	transition: background 0.15s ease;
}

.jtj1-offer-banner-cta:hover {
	background: var(--jtj1-blue-soft);
}

/*
 * Fallback solo cuando el asset no existe (catalogo demo local TJ-1, que no
 * recibe el artefacto de deploy de staging): mismo titulo/texto/CTA, sobre
 * una caja azul simple en vez del banner grafico.
 */
.jtj1-offer-banner-overlay-fallback {
	position: static;
	transform: none;
	max-width: none;
	background: var(--jtj1-blue);
	padding: 2rem 1.5rem;
	border-radius: var(--jtj1-radius-lg);
	text-align: center;
}

.jtj1-offer-banner-overlay-fallback .jtj1-offer-banner-text {
	max-width: none;
	margin-left: auto;
	margin-right: auto;
}

/* Filter bar */
.jtj1-filter-bar {
	max-width: 1180px;
	margin: 0 auto;
	padding: 1.5rem 1.5rem 0.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
}

.jtj1-filter-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.jtj1-filter-group-label {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--jtj1-ink-muted);
	margin-right: 0.15rem;
}

.jtj1-filter-chip {
	border: 1px solid var(--jtj1-border);
	border-radius: 999px;
	padding: 0.4rem 1rem;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--jtj1-ink);
	background: var(--jtj1-white);
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.jtj1-filter-chip:hover {
	border-color: var(--jtj1-blue);
	color: var(--jtj1-blue);
}

.jtj1-filter-chip.is-active {
	background: var(--jtj1-blue);
	border-color: var(--jtj1-blue);
	color: var(--jtj1-white);
}

/* Ordenamiento nativo de WooCommerce (woocommerce_catalog_ordering), alineado a la derecha en desktop. */
.jtj1-order-group {
	margin-left: auto;
}

.woocommerce-ordering {
	margin: 0;
}

.woocommerce-ordering select.orderby {
	border: 1px solid var(--jtj1-border);
	border-radius: 999px;
	padding: 0.4rem 2rem 0.4rem 1rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--jtj1-ink);
	background-color: var(--jtj1-white);
}

/* PC-04: resumen de filtros activos, removibles individualmente + "Limpiar todos". */
.jtj1-active-filters {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0.75rem 1.5rem 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.jtj1-active-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	background: var(--jtj1-blue-soft);
	border: 1px solid var(--jtj1-blue);
	color: var(--jtj1-blue);
	border-radius: 999px;
	padding: 0.3rem 0.75rem;
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
}

.jtj1-active-filter-chip:hover {
	background: var(--jtj1-blue);
	color: var(--jtj1-white);
}

.jtj1-clear-filters {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--jtj1-ink-muted);
	text-decoration: underline;
}

.jtj1-clear-filters:hover {
	color: var(--jtj1-danger);
}

/* Toggle "Filtrar y ordenar" y boton de cierre del panel: solo mobile (ver media query). */
.jtj1-filter-toggle,
.jtj1-filter-close {
	display: none;
}

/*
 * Como comprar (home, TJ-2 PRE-D3 ultimo refinamiento visual): timeline
 * horizontal editorial de 3 pasos. Reemplaza la version anterior de 3 cards
 * con circulo+sombra (rechazada por Nicolas): fondo blanco, encabezado a la
 * izquierda con acento verde, numeros tipograficos grandes como protagonistas
 * y una linea fina que conecta 3 marcadores pequenos (borde azul, centro
 * verde). Sin cards, sin sombras, sin iconografia redundante: la franja de
 * beneficios (patterns/benefits.php) sigue siendo una seccion aparte.
 */
.jtj1-how-to-buy {
	background: var(--jtj1-white);
	padding: 3.5rem 1.5rem;
	scroll-margin-top: 1.5rem;
}

.jtj1-how-to-buy-header {
	max-width: 1180px;
	margin: 0 auto;
}

.jtj1-how-to-buy-accent {
	display: block;
	width: 46px;
	height: 4px;
	border-radius: 999px;
	background: var(--jtj1-green);
	margin-bottom: 1rem;
}

.jtj1-how-to-buy-title-main {
	margin: 0 0 0.6rem;
	font-size: 2.1rem;
	font-weight: 800;
	color: var(--jtj1-ink);
}

.jtj1-how-to-buy-intro {
	margin: 0;
	max-width: 46ch;
	font-size: 1.02rem;
	line-height: 1.55;
	color: var(--jtj1-ink-muted);
}

/*
 * Timeline (TJ-2 PRE-D3 correccion final, seccion 6-9): el marcador es el
 * primer elemento de CADA paso (no una fila separada "flotando" encima de
 * los numeros); el riel horizontal es un conector propio de cada paso
 * (excepto el ultimo) que se extiende exactamente el ancho del gap del grid
 * para tocar el marcador siguiente, formando una sola linea continua sin
 * piezas visualmente desconectadas.
 */
.jtj1-how-to-buy-timeline {
	list-style: none;
	max-width: 1180px;
	margin: 2.75rem auto 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem;
}

.jtj1-how-to-buy-step {
	position: relative;
	padding: 0 1.25rem 0 0;
}

.jtj1-how-to-buy-marker {
	position: relative;
	z-index: 1;
	display: block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid var(--jtj1-blue);
	background: var(--jtj1-green);
	margin-bottom: 0.85rem;
}

/* Conector: del borde del marcador al marcador del siguiente paso (ancho = gap del grid). */
.jtj1-how-to-buy-step:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 5px;
	left: 12px;
	right: -2.5rem;
	height: 2px;
	background: var(--jtj1-blue-soft);
}

.jtj1-how-to-buy-number {
	display: block;
	font-size: 4.5rem;
	line-height: 1;
	font-weight: 800;
	color: var(--jtj1-blue);
	margin-bottom: 0.75rem;
	font-variant-numeric: tabular-nums;
}

.jtj1-how-to-buy-step-title {
	margin: 0 0 0.3rem;
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--jtj1-ink);
}

.jtj1-how-to-buy-step-subtitle {
	margin: 0 0 0.6rem;
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--jtj1-blue);
}

.jtj1-how-to-buy-step-text {
	margin: 0;
	font-size: 0.94rem;
	line-height: 1.6;
	color: var(--jtj1-ink);
	opacity: 0.85;
}

.jtj1-how-to-buy-step-note {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0.9rem 0 0;
	font-size: 0.82rem;
	color: var(--jtj1-ink-muted);
}

.jtj1-how-to-buy-note-dot {
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--jtj1-green);
}

/* Directorio de categorias (home, bento de categorias vinculantes). */
.jtj1-categories-directory {
	padding: 0 1.5rem;
}

.jtj1-categories-grid {
	max-width: 1180px;
	margin: 0 auto 2.5rem;
	display: grid;
	/* PRE-D3: 4 categorias raiz (antes 3). Se extiende el mismo bento a 3
	 * filas para conservar la primera categoria como card grande sin
	 * romper el patron visual existente. */
	grid-template-columns: 2fr 1fr;
	grid-template-rows: repeat(3, 1fr);
	height: 620px;
	gap: 1.25rem;
}

.jtj1-category-card {
	position: relative;
	display: block;
	border-radius: var(--jtj1-radius-lg);
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-color: var(--jtj1-surface);
	box-shadow: var(--jtj1-shadow-sm);
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.jtj1-category-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--jtj1-shadow-md);
}

.jtj1-category-card:nth-child(1) {
	grid-column: 1;
	grid-row: 1 / 4;
}

.jtj1-category-card:nth-child(2) {
	grid-column: 2;
	grid-row: 1;
}

.jtj1-category-card:nth-child(3) {
	grid-column: 2;
	grid-row: 2;
}

.jtj1-category-card:nth-child(4) {
	grid-column: 2;
	grid-row: 3;
}

.jtj1-category-card-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 1.25rem 1.5rem;
	background: linear-gradient(180deg, rgba(7, 38, 75, 0) 42%, rgba(7, 38, 75, 0.8) 100%);
}

.jtj1-category-card-name {
	color: var(--jtj1-white);
	font-weight: 800;
	font-size: 1.3rem;
	line-height: 1.2;
}

.jtj1-category-card-count {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.85rem;
	margin-top: 0.2rem;
}

/* Product grid / cards */
.jtj1-section-title {
	max-width: 1180px;
	margin: 3rem auto 1.25rem;
	padding: 0 1.5rem;
	font-size: 1.65rem;
	font-weight: 800;
	color: var(--jtj1-ink);
}

ul.products {
	max-width: 1180px;
	margin: 0 auto 2.5rem;
	padding: 0 1.5rem;
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.5rem;
	list-style: none;
}

/*
 * El clearfix clasico de WooCommerce (ul.products::before/::after con
 * content:" " y display:table, pensado para el layout float original)
 * genera una caja real que, en un contenedor display:grid, se cuenta como
 * item de grilla mas (verificado en runtime): el primer producto quedaba
 * desplazado a la 2a columna de la 1a fila, dejando la 1a celda vacia y
 * agrupando el resto como "1 + pares". Se anula el contenido generado para
 * que esos pseudo-elementos no participen del grid.
 */
ul.products::before,
ul.products::after {
	/*
	 * !important necesario: la regla nativa
	 * ".woocommerce ul.products::before/::after{content:' ';display:table}"
	 * tiene mayor especificidad (incluye ".woocommerce" como ancestro) que
	 * "ul.products::before/::after" sola y gana sin !important (verificado
	 * en runtime: el primer producto seguia desplazado a la 2a columna).
	 */
	content: none !important;
}

/*
 * WooCommerce carga su hoja de estilos clasica (.woocommerce ul.products
 * li.product{width;float;margin}) con mayor especificidad que nuestra regla
 * de grid, produciendo columnas angostas dobladas sobre el propio grid
 * (verificado visualmente). Se reafirma con la misma familia de selectores.
 */
.woocommerce ul.products li.product.jtj1-card,
.woocommerce-page ul.products li.product.jtj1-card,
li.product.jtj1-card {
	width: auto;
	float: none;
	margin: 0;
	background: var(--jtj1-white);
	border: 1px solid var(--jtj1-border);
	border-radius: var(--jtj1-radius-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
	box-shadow: var(--jtj1-shadow-sm);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

li.product.jtj1-card:hover {
	box-shadow: var(--jtj1-shadow-md);
	transform: translateY(-2px);
}

.jtj1-card-media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--jtj1-surface);
	overflow: hidden;
}

.jtj1-packshot-toggle {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	padding: 0;
	margin: 0;
	background: transparent;
	cursor: pointer;
}

/* TJ-2 PRE-D3 correccion final (seccion 2): productos de una sola imagen real no simulan hover; sin cursor de interaccion. */
.jtj1-packshot-toggle-static {
	cursor: default;
}

.jtj1-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.2s ease, transform 0.35s ease;
}

.jtj1-packshot-toggle:hover .jtj1-img {
	transform: scale(1.03);
}

.jtj1-img-commercial {
	opacity: 1;
}

.jtj1-img-commercial.is-hidden {
	opacity: 0;
}

/*
 * TJ-2 PRE-D3 refinamiento visual (seccion 4 del encargo): la segunda
 * imagen (packshot/economica/informational) debe mostrar el producto
 * completo, nunca recortado. object-fit:contain + fondo neutro reemplaza
 * cover solo para esta capa (la imagen comercial de fondo conserva cover,
 * pensada para llenar el frame como foto de estilo de vida).
 */
.jtj1-img-packshot {
	opacity: 0;
	object-fit: contain;
	background: var(--jtj1-white);
	box-sizing: border-box;
	padding: 0.5rem;
}

.jtj1-img-packshot.is-visible {
	opacity: 1;
}

.jtj1-badge {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	color: var(--jtj1-white);
	pointer-events: none;
}

.jtj1-badge-sale {
	background: var(--jtj1-danger);
}

/* .jtj1-badge-demo retirada (TJ-2 Stitch V2, seccion 8): ver jtj1-chip-economy abajo para el unico badge por producto que queda. */

/*
 * Badge "Linea economica" (TJ-2 Stitch V2, seccion 15): chip discreto junto
 * al titulo (card) o encima del precio (PDP), no una cinta de esquina como
 * las ofertas: es informativo, no promocional.
 */
.jtj1-chip-economy {
	display: inline-block;
	align-self: flex-start;
	background: var(--jtj1-blue-soft);
	color: var(--jtj1-blue-mid);
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	margin-bottom: 0.15rem;
}

/*
 * PRE-D3: fila de badges mayoristas (Destacado / Formato economico / Mejor
 * precio por pallet). Reutiliza .jtj1-chip-economy como base visual comun;
 * cada variante solo cambia el color para diferenciar la senal sin agregar
 * un lenguaje visual nuevo (Destacado = ambar de atencion, tier = verde de
 * ahorro, economico conserva el azul informativo original).
 */
.jtj1-badge-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-bottom: 0.15rem;
}

.jtj1-badge-row .jtj1-chip-economy {
	margin-bottom: 0;
}

.jtj1-badge-featured {
	background: #fef3c7;
	color: #92400e;
}

.jtj1-badge-tier {
	background: #dcfce7;
	color: #166534;
}

/* PRE-D3: resumen de compra por volumen en la PDP (lote/pallet/referencia/tiers). */
.jtj1-wholesale-summary {
	background: var(--jtj1-surface);
	border: 1px solid var(--jtj1-border);
	border-radius: var(--jtj1-radius-sm);
	padding: 0.9rem 1.1rem;
	margin: 0 0 1.1rem;
}

.jtj1-wholesale-summary-line {
	margin: 0 0 0.35rem;
	font-size: 0.92rem;
	color: var(--jtj1-ink);
}

.jtj1-wholesale-summary-line:last-child {
	margin-bottom: 0;
}

.jtj1-wholesale-summary-ref {
	color: var(--jtj1-ink-muted);
}

.jtj1-wholesale-tiers {
	width: 100%;
	border-collapse: collapse;
	margin-top: 0.6rem;
	font-size: 0.88rem;
}

.jtj1-wholesale-tiers td {
	padding: 0.3rem 0;
	border-top: 1px dashed var(--jtj1-border);
}

.jtj1-wholesale-tiers td:last-child {
	text-align: right;
	font-weight: 700;
	color: #166534;
}

/* PRE-D3: linea compacta de lote/referencia en la card del catalogo. */
.jtj1-card-wholesale-meta,
.jtj1-card-wholesale-ref {
	margin: 0;
	font-size: 0.82rem;
	color: var(--jtj1-ink-muted);
}

.jtj1-card-body {
	padding: 1.1rem 1.1rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	flex: 1;
}

.jtj1-card-title-link {
	text-decoration: none;
	color: inherit;
}

.jtj1-card-title {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
	color: var(--jtj1-ink);
}

.jtj1-highlights {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.8rem;
	color: var(--jtj1-ink-muted);
}

.jtj1-highlights li {
	position: relative;
	padding-left: 1rem;
}

.jtj1-highlights li::before {
	content: "•";
	color: var(--jtj1-green);
	position: absolute;
	left: 0;
}

.jtj1-card-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
}

.jtj1-price-regular {
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--jtj1-ink);
}

.jtj1-price-regular del {
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--jtj1-ink-muted);
}

.jtj1-price-sale {
	font-size: 1.15rem;
	color: var(--jtj1-danger);
	font-weight: 800;
}

.jtj1-price-savings {
	font-size: 0.75rem;
	color: var(--jtj1-green);
	font-weight: 700;
}

/*
 * TJ-2 PRE-D3 refinamiento visual (seccion 8 del encargo): el precio
 * principal de la card nunca debe leerse como el precio transaccional final
 * sin unidad. "/ pack" o "/ caja" queda siempre junto al precio.
 */
.jtj1-price-unit-suffix {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--jtj1-ink-muted);
}

/*
 * TJ-2 PRE-D3 refinamiento visual (seccion 9-10 del encargo): desglose
 * compacto Lote/Pallet debajo del precio y la referencia unitaria. Usa
 * exclusivamente el motor de tiers ya existente (javiren_tienda_wholesale_price_breakdown);
 * nunca convierte la card en una tabla administrativa.
 */
.jtj1-card-wholesale-breakdown {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	background: var(--jtj1-surface);
	border: 1px solid var(--jtj1-border);
	border-radius: 10px;
	padding: 0.5rem 0.65rem;
}

.jtj1-card-wholesale-tier {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	column-gap: 0.5rem;
	font-size: 0.8rem;
}

.jtj1-card-wholesale-tier-label {
	font-weight: 700;
	color: var(--jtj1-ink);
}

.jtj1-card-wholesale-tier-value {
	color: var(--jtj1-ink-muted);
	text-align: right;
}

.jtj1-card-wholesale-tier-unit-price {
	flex-basis: 100%;
	text-align: right;
	font-size: 0.75rem;
	font-weight: 700;
	color: #166534;
}

.jtj1-stock-status.jtj1-out-of-stock {
	color: var(--jtj1-danger);
	font-weight: 700;
	font-size: 0.85rem;
	margin: 0;
}

.jtj1-add-to-cart-form {
	display: flex;
	align-items: stretch;
	gap: 0.6rem;
	margin-top: auto;
}

/*
 * TJ-2 PRE-D3 refinamiento visual (seccion 11 del encargo): selector de
 * cantidad mas grande, centrado y con touch target adecuado (min 44px de
 * alto). Semantica funcional sin cambios (min/step siguen viniendo de
 * Javiren_Tienda_Wholesale_Pricing::quantity_input_args, plugin).
 */
.jtj1-qty-input {
	width: 4.75rem;
	min-height: 48px;
	border: 1px solid var(--jtj1-border);
	border-radius: 10px;
	padding: 0.4rem 0.5rem;
	font-size: 1.05rem;
	font-weight: 700;
	text-align: center;
	color: var(--jtj1-ink);
	background: var(--jtj1-white);
	flex: 0 0 auto;
}

.jtj1-add-to-cart-button,
.jtj1-view-product-button {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--jtj1-blue);
	color: var(--jtj1-white);
	border-radius: 999px;
	padding: 0.55rem 0.9rem;
	text-decoration: none;
	font-weight: 700;
	border: none;
	cursor: pointer;
}

.jtj1-add-to-cart-button:hover,
.jtj1-view-product-button:hover {
	background: var(--jtj1-blue-mid);
	color: var(--jtj1-white);
}

.jtj1-add-to-cart-button.added::after {
	content: " ✓";
}

/* PC-03: CTA "Agotado" en el mismo slot, deshabilitado y accesible. */
.jtj1-add-to-cart-form-disabled {
	margin-top: auto;
}

.jtj1-cta-disabled {
	width: 100%;
	min-height: 44px;
	background: var(--jtj1-surface);
	color: var(--jtj1-ink-muted);
	border: 1px solid var(--jtj1-border);
	border-radius: 999px;
	padding: 0.5rem 0.75rem;
	font-weight: 600;
	cursor: not-allowed;
}

/*
 * Product single page extras. Caracteristicas PDP (TJ-2 Stitch refinamiento
 * 1, seccion 4): tipografia mayor que el texto secundario de la card (que
 * conserva 0.8rem), con mas jerarquia visual porque es parte relevante de
 * la decision de compra en la ficha de producto.
 */
.jtj1-highlights.jtj1-highlights-single {
	margin: 1rem 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--jtj1-ink);
}

.jtj1-highlights.jtj1-highlights-single li {
	padding-left: 1.35rem;
	margin-bottom: 0.35rem;
}

.jtj1-highlights.jtj1-highlights-single li::before {
	font-size: 1.15em;
}

/* Breadcrumb (single product) */
.woocommerce-breadcrumb {
	max-width: 1180px;
	margin: 1.25rem auto 0;
	padding: 0 1.5rem;
	font-size: 0.85rem;
	color: var(--jtj1-ink-muted);
}

.woocommerce-breadcrumb a {
	color: var(--jtj1-ink-muted);
	text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
	color: var(--jtj1-blue);
	text-decoration: underline;
}

/*
 * Layout general de la ficha de producto (TJ-2 Stitch V2, seccion 16):
 * galeria (52-58%) + panel de informacion (42-48%) usando el ancho completo
 * del container, sin tratar el panel de informacion como una tarjeta mobile
 * flotante (sin borde/sombra/fondo propio: se integra en la pagina).
 */
.jtj1-single-product {
	max-width: 1220px;
	margin: 0 auto;
	padding: 1.5rem 1.5rem 4rem;
}

.jtj1-single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 3.5rem;
	align-items: start;
}

/*
 * min-width:0 en TODOS los hijos directos del grid (no solo galeria/resumen):
 * "div.product" tiene 5 hijos directos en la plantilla clasica de WooCommerce
 * (".onsale", galeria, resumen, ".woocommerce-tabs" y ".related.products");
 * cualquiera de ellos sin min-width:0 fuerza el ancho minimo de contenido
 * (min-width:auto implicito de todo item de grid) y desborda la pista de
 * grid completa (verificado en runtime: pista resuelta a 1040px sobre un
 * contenedor real de 327px en mobile, con contenido invisible tapando el
 * boton "Agregar al carrito" mas abajo en la pagina).
 */
.jtj1-single-product div.product > * {
	min-width: 0;
}

/*
 * min-width:0 obligatorio: un item de CSS grid tiene min-width:auto
 * implicito, que impide encogerlo por debajo del ancho intrinseco de su
 * contenido. La galeria (imagenes con tamano natural grande) empujaba la
 * celda de grid muchisimo mas ancha que el viewport en mobile (verificado en
 * runtime: 1040px de ancho real sobre un viewport de 390px), desbordando
 * contenido invisible sobre el boton "Agregar al carrito" mas abajo en la
 * pagina y bloqueando el click (Playwright: "...intercepts pointer events").
 */
/*
 * width:auto !important necesario: el CSS clasico de WooCommerce
 * (".woocommerce div.product div.images, div.product div.summary{width:48%}",
 * pensado para su layout float original) sigue aplicando sobre estos hijos
 * directos de "div.product" aunque el padre ya sea display:grid, encogiendo
 * cada uno al 48% del ancho de SU PROPIA celda de grid en vez de llenarla
 * (verificado en runtime: pista de grid 641px/474px pero elementos reales
 * 307px/227px, exactamente 48% de cada pista). float:none idem, por si
 * algun tema hijo reintroduce el float original.
 */
/*
 * opacity:1 !important necesario (TJ-2 Stitch refinamiento 1): la plantilla
 * clasica de WooCommerce imprime este contenedor con
 * style="opacity:0" inline, pensado para que "wc-single-product.js" lo
 * suba a 1 tras inicializar FlexSlider. Ese script ahora se dequeuea
 * deliberadamente en esta pagina (ver functions.php) porque la galeria
 * propia (product-gallery.js) reemplaza esa inicializacion; sin este
 * override el contenedor completo -incluida la galeria propia, que vive
 * dentro de el- quedaba invisible (verificado en runtime: galeria en
 * blanco tras el dequeue).
 */
.jtj1-single-product .woocommerce-product-gallery {
	grid-column: 1;
	min-width: 0;
	width: auto !important;
	float: none !important;
	opacity: 1 !important;
}

.jtj1-single-product .summary.entry-summary {
	grid-column: 2;
	min-width: 0;
	width: auto !important;
	float: none !important;
	padding-top: 0.25rem;
}

.jtj1-pdp-eyebrow {
	color: var(--jtj1-blue);
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 0.6rem;
}

.jtj1-single-product .product_title.entry-title {
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.2;
	margin: 0 0 0.5rem;
	color: var(--jtj1-ink);
}

.jtj1-pdp-format {
	color: var(--jtj1-ink-muted);
	font-size: 0.95rem;
	margin: 0 0 1rem;
}

.jtj1-single-product p.price,
.jtj1-single-product span.price {
	font-size: 1.85rem;
	font-weight: 800;
	color: var(--jtj1-ink);
}

.jtj1-single-product p.price ins,
.jtj1-single-product span.price ins {
	text-decoration: none;
	color: var(--jtj1-danger);
}

.jtj1-single-product p.price del,
.jtj1-single-product span.price del {
	color: var(--jtj1-ink-muted);
	font-size: 1rem;
	font-weight: 500;
}

/* TJ-2 PRE-D3 correccion final (seccion 5): unidad junto al precio principal de la PDP, misma jerarquia (secundaria) que en las cards. */
.jtj1-pdp-price-unit-suffix {
	font-size: 1rem;
	font-weight: 600;
	color: var(--jtj1-ink-muted);
	margin-left: 0.35rem;
}

.jtj1-single-product form.cart {
	margin-top: 1.1rem;
	display: flex;
	gap: 0.85rem;
	flex-wrap: wrap;
	align-items: center;
}

/*
 * Control de cantidad PDP (TJ-2 Stitch refinamiento 1, seccion 5): valores
 * en px + !important porque el CSS clasico de WooCommerce (".quantity .qty",
 * em-based) seguia ganando sobre la version anterior en rem, produciendo
 * una caja real de ~105x75px con el numero a 13px (verificado en runtime
 * contra staging) — el "input enorme, numero chico" reportado. Alineado
 * verticalmente con el CTA porque "form.cart" ya es un flex row con
 * align-items:center.
 */
.jtj1-single-product form.cart .quantity {
	display: flex;
	width: auto;
}

.jtj1-single-product form.cart .qty {
	box-sizing: border-box !important;
	width: 72px !important;
	height: 52px !important;
	min-height: 52px !important;
	padding: 0 !important;
	border: 1px solid var(--jtj1-border);
	border-radius: 10px;
	font-size: 19px !important;
	font-weight: 600;
	text-align: center;
	line-height: normal;
}

.jtj1-single-product .single_add_to_cart_button {
	background: var(--jtj1-blue);
	color: var(--jtj1-white);
	border-radius: 999px;
	padding: 0.85rem 1.85rem;
	font-weight: 700;
	border: none;
	min-height: 44px;
}

.jtj1-single-product .single_add_to_cart_button:hover {
	background: var(--jtj1-blue-mid);
}

.jtj1-single-product .woocommerce-product-details__short-description {
	margin-top: 1.1rem;
	color: var(--jtj1-ink-muted);
	line-height: 1.6;
}

.jtj1-single-product .woocommerce-tabs {
	grid-column: 1 / -1;
	margin-top: 3rem;
}

.jtj1-single-product ul.tabs {
	list-style: none;
	display: flex;
	gap: 1.75rem;
	border-bottom: 1px solid var(--jtj1-border);
	padding: 0;
	margin: 0 0 1.5rem;
}

.jtj1-single-product ul.tabs li a {
	text-decoration: none;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--jtj1-ink-muted);
	padding-bottom: 0.85rem;
	display: inline-block;
}

.jtj1-single-product ul.tabs li.active a {
	color: var(--jtj1-blue);
	border-bottom: 2px solid var(--jtj1-blue);
}

.jtj1-single-product table.woocommerce-product-attributes {
	width: 100%;
	border-collapse: collapse;
}

.jtj1-single-product table.woocommerce-product-attributes th,
.jtj1-single-product table.woocommerce-product-attributes td {
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--jtj1-border);
	text-align: left;
}

.jtj1-single-product .related.products {
	grid-column: 1 / -1;
	margin-top: 3rem;
}

.jtj1-single-product .related.products > h2 {
	font-size: 1.5rem;
	font-weight: 800;
	margin-bottom: 1.25rem;
}

/*
 * Galeria de producto: la plantilla clasica de WooCommerce depende de
 * FlexSlider (JS) para reorganizar las imagenes en slides; en este build su
 * inicializacion deja el contenedor con altura 0 aunque las imagenes existen
 * en el DOM con tamano real (verificado en runtime). Se fuerza un layout
 * simple con CSS (imagen principal + miniaturas en fila) que no depende de
 * esa inicializacion JS.
 */
/*
 * !important es necesario aqui: FlexSlider (JS) escribe width/transform
 * inline en el wrapper y en cada slide (verificado en runtime, ej.
 * style="width:600%;transform:translate3d(...)"), lo que gana sobre CSS
 * externo sin !important sin importar la especificidad.
 */
.woocommerce-product-gallery__wrapper {
	display: flex !important;
	flex-wrap: wrap;
	gap: 0.75rem;
	width: 100% !important;
	transform: none !important;
}

.woocommerce-product-gallery__image {
	width: 100% !important;
}

.woocommerce-product-gallery__image:nth-child(n + 2) {
	width: calc(33.333% - 0.5rem) !important;
}

.woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--jtj1-radius-sm);
	border: 1px solid var(--jtj1-border);
}

/*
 * wc-product-gallery-zoom inyecta ".zoomImg" (lupa de zoom) con el tamano
 * natural de la imagen grande (ej. 1200x1200) posicionado absolute encima de
 * la galeria, oculto via opacity:0 hasta la interaccion de zoom. Con el
 * nuevo layout de la ficha de producto (grid galeria+resumen) ese overlay
 * oculto queda solapado sobre el boton "Agregar al carrito" en mobile y
 * bloquea el click aunque sea invisible (verificado en runtime: Playwright
 * reporta "zoomImg... intercepts pointer events", timeout en el click; el
 * mismo test pasa 3/3 en el codigo previo a este layout). No participa del
 * flujo de puntero mientras esta oculto; la interaccion de zoom en si se
 * dispara sobre la imagen principal, no sobre este overlay.
 */
.zoomImg {
	pointer-events: none;
}

/*
 * Galeria interactiva (TJ-2 Stitch V2, seccion 12): construida por
 * product-gallery.js sobre las mismas imagenes nativas de WooCommerce.
 * Cuando corre JS, el wrapper original queda oculto (progressive
 * enhancement); sin JS, el grid wrapped de arriba sigue siendo usable.
 */
.jtj1-gallery-enhanced .woocommerce-product-gallery__wrapper {
	display: none !important;
}

/*
 * Red de seguridad (TJ-2 Stitch refinamiento 1): la causa raiz real de la
 * galeria duplicada era FlexSlider inicializandose pese a la ausencia de
 * theme support (ver functions.php, filtro
 * woocommerce_single_product_flexslider_enabled). Con FlexSlider desactivado
 * en origen, ".flex-viewport"/".flex-control-nav" ya no deberian existir en
 * el DOM; esta regla queda como defensa documentada, no como parche ciego.
 */
.jtj1-gallery-enhanced .flex-viewport,
.jtj1-gallery-enhanced .flex-control-nav {
	display: none !important;
}

.jtj1-gallery-main {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--jtj1-surface);
	border-radius: var(--jtj1-radius-md);
	overflow: hidden;
	margin-bottom: 0.85rem;
}

.jtj1-gallery-main-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.jtj1-gallery-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	border: none;
	background: rgba(255, 255, 255, 0.92);
	color: var(--jtj1-ink);
	box-shadow: var(--jtj1-shadow-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.jtj1-gallery-arrow svg {
	width: 20px;
	height: 20px;
}

.jtj1-gallery-arrow:hover {
	background: var(--jtj1-white);
	color: var(--jtj1-blue);
}

.jtj1-gallery-arrow-prev {
	left: 0.85rem;
}

.jtj1-gallery-arrow-next {
	right: 0.85rem;
}

.jtj1-gallery-thumbs {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.jtj1-gallery-thumb {
	flex: 0 0 auto;
	width: 4.5rem;
	height: 4.5rem;
	padding: 0;
	border-radius: var(--jtj1-radius-sm);
	border: 2px solid var(--jtj1-border);
	background: var(--jtj1-surface);
	overflow: hidden;
	cursor: pointer;
}

.jtj1-gallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.jtj1-gallery-thumb.is-active {
	border-color: var(--jtj1-blue);
}

/* Footer */
.jtj1-footer {
	background: var(--jtj1-authority);
	color: var(--jtj1-white);
	padding: 3rem 1.5rem 1.5rem;
	margin-top: 3rem;
}

.jtj1-footer-inner {
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	justify-content: space-between;
}

.jtj1-footer a {
	color: var(--jtj1-white);
}

.jtj1-footer a:hover {
	opacity: 0.8;
}

.jtj1-footer-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.75rem;
}

/* PRE-D3: columna de contacto publico (email, telefono, WhatsApp, retiro, horario). */
.jtj1-footer-contact {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: 0.9rem;
}

.jtj1-footer-contact-heading {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	opacity: 0.75;
	margin-bottom: 0.1rem;
}

.jtj1-footer-contact-link {
	text-decoration: none;
}

.jtj1-footer-contact-link:hover {
	text-decoration: underline;
}

.jtj1-footer-whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.jtj1-whatsapp-icon {
	flex: 0 0 auto;
}

.jtj1-footer-contact-text {
	opacity: 0.85;
}

.jtj1-footer-bottom {
	max-width: 1180px;
	margin: 1.75rem auto 0;
	padding: 1.25rem 1.5rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 0.75rem;
	opacity: 0.75;
}

/* Empty / no-results states */
.woocommerce-info,
.jtj1-empty-state {
	max-width: 1180px;
	margin: 2rem auto;
	padding: 1.5rem;
	border: 1px dashed var(--jtj1-border);
	border-radius: var(--jtj1-radius-sm);
	text-align: center;
	color: var(--jtj1-ink-muted);
}

/* Mini cart / cart block adjustments (target sizes, focus, spacing) */
.wc-block-mini-cart__button,
.wc-block-components-quantity-selector__button {
	min-height: 44px;
	min-width: 44px;
}

/* Carrito y checkout (bloques nativos de WooCommerce): solo color/tipografia/spacing de marca, sin tocar su logica. */
.jtj1-cart .wc-block-cart-item__product-name,
.jtj1-checkout .wc-block-components-checkout-step__title {
	color: var(--jtj1-ink);
}

.jtj1-cart .wc-block-cart__submit-container .wp-element-button,
.jtj1-checkout .wc-block-components-checkout-place-order-button,
.jtj1-checkout .wc-block-checkout__actions .wp-element-button {
	background: var(--jtj1-blue);
	border-radius: 999px;
	font-weight: 700;
}

.jtj1-cart .wc-block-cart__submit-container .wp-element-button:hover,
.jtj1-checkout .wc-block-components-checkout-place-order-button:hover,
.jtj1-checkout .wc-block-checkout__actions .wp-element-button:hover {
	background: var(--jtj1-blue-mid);
}

.jtj1-checkout-demo-note {
	max-width: 1180px;
	margin: 0 auto 1.5rem;
	color: var(--jtj1-ink-muted);
	font-size: 0.85rem;
}

/* Responsive */
@media (max-width: 1019px) {
	.jtj1-single-product div.product {
		grid-template-columns: 1fr;
	}

	.jtj1-single-product .woocommerce-product-gallery,
	.jtj1-single-product .summary.entry-summary {
		grid-column: 1;
	}

	.jtj1-highlights.jtj1-highlights-single {
		font-size: 1rem;
	}
}

@media (max-width: 782px) {
	/*
	 * Header mobile simplificado (lote final TJ-1, seccion 4): fila primaria
	 * marca + menu + carrito, fila secundaria buscador de ancho completo, nav
	 * colapsada detras del toggle. display:contents disuelve el wrapper
	 * .jtj1-header-actions solo en mobile para que buscador y mini-cart
	 * ordenen de forma independiente junto a logo/toggle/nav como items
	 * directos de .jtj1-header-inner, sin duplicar markup ni el bloque nativo
	 * del mini-cart.
	 */
	.jtj1-header .jtj1-logo-img {
		height: 46px;
		max-width: 190px;
	}

	.jtj1-header-inner {
		flex-wrap: wrap;
		align-items: center;
	}

	.jtj1-logo {
		order: 1;
	}

	.jtj1-nav-toggle {
		display: inline-flex;
		order: 2;
		margin-left: auto;
	}

	/*
	 * !important necesario: el bloque nativo wp:group renderiza tambien
	 * ".wp-block-group.is-layout-flex" (especificidad 0-2-0, mayor que
	 * ".jtj1-header-actions" sola) forzando display:flex y ganando sobre
	 * esta regla sin !important (verificado en runtime: display computado
	 * quedaba en "flex", no "contents", y el orden mobile no se aplicaba).
	 */
	.jtj1-header-actions {
		display: contents !important;
	}

	.wp-block-woocommerce-mini-cart {
		order: 3;
	}

	.jtj1-search-form {
		order: 4;
		flex-basis: 100%;
		width: 100%;
	}

	.jtj1-search-form input[type="search"] {
		flex: 1;
		min-width: 0;
	}

	.jtj1-primary-nav {
		order: 5;
		flex-basis: 100%;
		width: 100%;
		display: none;
	}

	.jtj1-primary-nav.is-open {
		display: block;
	}

	.jtj1-primary-nav ul {
		flex-direction: column;
		gap: 0.5rem;
		padding: 0.75rem 0 0.25rem;
	}

	.jtj1-hero-inner {
		flex-direction: column;
		text-align: center;
	}

	.jtj1-hero:has(.jtj1-hero-picture) {
		min-height: 420px;
		padding: 0 1.25rem;
	}

	.jtj1-hero:has(.jtj1-hero-picture) .jtj1-hero-copy {
		max-width: 100%;
	}

	.jtj1-hero:has(.jtj1-hero-picture)::after {
		background: linear-gradient(180deg, rgba(7, 38, 75, 0.55) 0%, rgba(7, 38, 75, 0.86) 100%);
	}

	/*
	 * Mobile (TJ-2 Stitch, resolucion definitiva): 2 columnas explicitas
	 * (grid determinista, no flex-wrap automatico -que en runtime real dejo
	 * crecer al primer item hasta su max-width antes de decidir el wrap,
	 * empujando el resto a una columna de a uno, bug detectado y corregido
	 * en esta misma sesion-). 5 items en 2 columnas = 2 filas de a 2 mas
	 * una fila final de 1 (el 5to item ocupa la fila completa via
	 * `grid-column:1/-1`, centrado por su propio contenido interno). Sin
	 * scroll horizontal, sin cortar, sin deformar. Badge/icono reducidos
	 * para ganar densidad en pantallas angostas.
	 */
	.jtj1-benefits-grid {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 1.75rem;
	}

	.jtj1-benefit:last-child {
		grid-column: 1 / -1;
	}

	/* Los divisores verticales son exclusivos de la fila unica de desktop; en un grid de 2 columnas que envuelve no hay "izquierda" consistente. */
	.jtj1-benefit::before {
		display: none;
	}

	.jtj1-benefit-icon {
		width: 3.75rem;
		height: 3.75rem;
	}

	.jtj1-benefit-icon svg {
		width: 1.9rem;
		height: 1.9rem;
	}

	/*
	 * Como comprar mobile (TJ-2 PRE-D3 ultimo refinamiento visual): secuencia
	 * vertical, sin comprimir horizontalmente ni usar cards. La linea/marcador
	 * horizontal de desktop se oculta; se dibuja en su lugar un unico
	 * conector vertical fino (marcador+linea a la izquierda de cada paso).
	 */
	.jtj1-how-to-buy {
		padding: 2.75rem 1.25rem;
	}

	.jtj1-how-to-buy-title-main {
		font-size: 1.65rem;
	}

	.jtj1-how-to-buy-timeline {
		grid-template-columns: 1fr;
		position: relative;
		gap: 2.25rem;
		margin-top: 2rem;
	}

	/* Conector vertical unico, de punta a punta de la secuencia. */
	.jtj1-how-to-buy-timeline::before {
		content: '';
		position: absolute;
		top: 1.1rem;
		bottom: 1.1rem;
		left: 5px;
		width: 2px;
		background: var(--jtj1-blue-soft);
	}

	.jtj1-how-to-buy-step {
		padding: 0 0 0 2rem;
	}

	/* El conector horizontal es exclusivo de desktop (grid de 3 columnas). */
	.jtj1-how-to-buy-step:not(:last-child)::after {
		display: none;
	}

	/* El marcador (mismo elemento real que en desktop) sale del flujo y se ancla junto al numero. */
	.jtj1-how-to-buy-marker {
		position: absolute;
		top: 1.1rem;
		left: 0;
		margin-bottom: 0;
	}

	.jtj1-how-to-buy-number {
		font-size: 2.5rem;
		margin-bottom: 0.4rem;
	}

	.jtj1-categories-grid {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(4, 200px);
		height: auto;
	}

	/*
	 * Ofertas mobile (TJ-2 Stitch refinamiento 3, seccion 10): el overlay
	 * absoluto sobre el 40% izquierdo del banner no cabe de forma legible en
	 * una columna mobile angosta; pasa a bloque estatico inmediatamente
	 * debajo del banner completo (preferencia explicita del encargo), sin
	 * recortar ni tapar koala/ticket (el banner sigue integro arriba).
	 */
	.jtj1-offer-banner-overlay {
		position: static;
		transform: none;
		max-width: none;
		background: var(--jtj1-blue);
		padding: 1.5rem 1.25rem;
		text-align: center;
	}

	.jtj1-offer-banner-text {
		max-width: none;
		margin-left: auto;
		margin-right: auto;
	}

	.jtj1-offer-banner-wrap {
		margin-bottom: 1.75rem;
	}

	.jtj1-offers-section {
		margin-top: 2.25rem;
	}

	.jtj1-category-card:nth-child(1),
	.jtj1-category-card:nth-child(2),
	.jtj1-category-card:nth-child(3),
	.jtj1-category-card:nth-child(4) {
		grid-column: 1;
		grid-row: auto;
	}

	.jtj1-order-group {
		margin-left: 0;
	}

	/*
	 * Filtros mobile (seccion 5): panel colapsado detras de "Filtrar y
	 * ordenar" en desktop este mismo panel queda siempre visible (sin regla
	 * aqui, hereda el layout base de .jtj1-filter-bar/.jtj1-active-filters).
	 */
	.jtj1-filter-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		width: calc(100% - 3rem);
		margin: 1rem auto 0;
		background: var(--jtj1-white);
		border: 1px solid var(--jtj1-border);
		border-radius: 8px;
		padding: 0.65rem 1rem;
		font-weight: 700;
		color: var(--jtj1-ink);
		cursor: pointer;
	}

	.jtj1-filter-panel {
		display: none;
	}

	.jtj1-filter-panel.is-open {
		display: block;
	}

	.jtj1-filter-bar {
		flex-direction: column;
		align-items: stretch;
		padding: 0.5rem 1.5rem;
	}

	.jtj1-active-filters {
		padding: 0.75rem 1.5rem 0;
	}

	.jtj1-filter-close {
		display: block;
		min-height: 44px;
		width: calc(100% - 3rem);
		margin: 0.5rem auto 1rem;
		background: var(--jtj1-blue);
		color: var(--jtj1-white);
		border: none;
		border-radius: 8px;
		padding: 0.6rem 1rem;
		font-weight: 700;
		cursor: pointer;
	}

	/*
	 * Densidad de product cards en mobile (seccion 3): se mantienen 2
	 * columnas (patron confirmado por research PuntoLimpieza/Elite), sin
	 * reducir tipografia. Se ajustan padding/gap y el selector de cantidad
	 * para recuperar espacio vertical sin perder legibilidad.
	 */
	ul.products {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: 1rem;
	}

	.jtj1-card-body {
		padding: 0.75rem;
		gap: 0.4rem;
	}

	.jtj1-qty-input {
		width: 3.75rem;
		min-height: 44px;
		padding: 0.4rem 0.3rem;
		font-size: 0.95rem;
	}

	/*
	 * A 2 columnas el boton "Anadir al carrito" no cabe en una linea (sin
	 * reducir tipografia, ver nota arriba) y el texto pasa a 2 lineas: el
	 * radius 999px (pill) de desktop deforma ese boton mas alto en una
	 * capsula redondeada rara. Se reduce el radius para que 1 o 2 lineas se
	 * vean como un boton rectangular limpio en vez de una pildora distorsionada.
	 */
	.jtj1-add-to-cart-button {
		border-radius: var(--jtj1-radius-sm);
	}
}

/*
 * Breakpoint de seguridad (seccion 3): si un viewport extremadamente
 * angosto incumple los criterios de aceptacion en 2 columnas, se permite
 * bajar a 1 columna.
 */
@media (max-width: 359px) {
	ul.products {
		grid-template-columns: 1fr;
	}
}
/* POST-ASTRA: resumen contiguo al selector y contacto social accesible. */
.jtj1-selected-purchase {
	flex: 0 0 100%;
	box-sizing: border-box;
	padding: 1rem;
	border: 1px solid var(--jtj1-border);
	border-radius: var(--jtj1-radius-sm);
	background: var(--jtj1-surface);
	color: var(--jtj1-ink);
}
.jtj1-selected-purchase p { margin: 0 0 0.4rem; }
.jtj1-selected-purchase p:last-child { margin-bottom: 0; }
.jtj1-selected-subtotal { font-size: 1.2rem; }
.jtj1-selected-saving { color: var(--jtj1-blue-dark); font-weight: 600; }
.jtj1-selected-purchase [hidden] { display: none; }
.jtj1-delivery-info { margin: 1rem 0; font-size: 0.9rem; line-height: 1.55; }
.jtj1-delivery-info p { margin: 0 0 0.5rem; }
.jtj1-footer-socials { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.jtj1-footer-socials a { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; }
.jtj1-footer-socials svg { flex-shrink: 0; }
.jtj1-footer-socials a:focus-visible { outline-color: var(--jtj1-white); }