/* Tienda JaviRen - TJ-1 - estilos frontend DEMO */

:root {
	--jtj1-blue: #0546b6;
	--jtj1-blue-dark: #083b8c;
	--jtj1-green: #5fa11b;
	--jtj1-surface: #f6f8fb;
	--jtj1-white: #ffffff;
	--jtj1-ink: #0b1f3a;
	--jtj1-ink-muted: #4b5a6e;
	--jtj1-danger: #b3261e;
	--jtj1-border: #d9e1ec;
}

@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 DEMO sitewide */
.jtj1-demo-banner {
	background: var(--jtj1-danger);
	color: var(--jtj1-white);
	text-align: center;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 0.4rem 1rem;
}

/* Header */
.jtj1-header {
	background: var(--jtj1-white);
	border-bottom: 1px solid var(--jtj1-border);
	padding: 0.75rem 1.5rem;
}

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

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

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

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

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

.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);
	border-radius: 8px;
	padding: 0.45rem 0.75rem;
	min-width: 180px;
}

.jtj1-search-form button {
	border: none;
	background: var(--jtj1-blue);
	color: var(--jtj1-white);
	border-radius: 8px;
	padding: 0.45rem 0.9rem;
	cursor: pointer;
}

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

/* Hero */
.jtj1-hero {
	background: linear-gradient(135deg, var(--jtj1-blue) 0%, var(--jtj1-blue-dark) 100%);
	color: var(--jtj1-white);
	padding: 3.5rem 1.5rem;
}

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

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

.jtj1-hero-copy h1 {
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	margin: 0 0 1rem;
}

.jtj1-hero-copy p {
	font-size: 1.05rem;
	opacity: 0.92;
	margin-bottom: 1.5rem;
}

.jtj1-hero-cta {
	display: inline-block;
	background: var(--jtj1-green);
	color: var(--jtj1-white);
	font-weight: 700;
	padding: 0.75rem 1.5rem;
	border-radius: 8px;
	text-decoration: none;
}

.jtj1-hero-cta:hover {
	background: #4d8615;
	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;
}

/* Benefits strip */
.jtj1-benefits {
	background: var(--jtj1-surface);
	padding: 2rem 1.5rem;
}

.jtj1-benefits-grid {
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.5rem;
	text-align: center;
}

.jtj1-benefit h3 {
	color: var(--jtj1-blue);
	font-size: 1rem;
	margin-bottom: 0.35rem;
}

.jtj1-benefit p {
	font-size: 0.875rem;
	color: var(--jtj1-ink-muted);
	margin: 0;
}

/* Filter bar */
.jtj1-filter-bar {
	max-width: 1180px;
	margin: 0 auto;
	padding: 1.5rem 1.5rem 0.5rem;
	display: flex;
	flex-wrap: wrap;
	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.35rem 0.9rem;
	font-size: 0.85rem;
	text-decoration: none;
	color: var(--jtj1-ink);
	background: var(--jtj1-white);
}

.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);
}

/* 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-surface);
	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;
}

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

.jtj1-categories-grid {
	max-width: 1180px;
	margin: 0 auto 2.5rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1rem;
}

.jtj1-category-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	background: var(--jtj1-white);
	border: 1px solid var(--jtj1-border);
	border-radius: 12px;
	padding: 1.25rem 1rem;
	text-decoration: none;
	text-align: center;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.jtj1-category-card:hover {
	border-color: var(--jtj1-blue);
	transform: translateY(-2px);
}

.jtj1-category-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--jtj1-blue);
	color: var(--jtj1-white);
	font-weight: 800;
	font-size: 1.1rem;
}

.jtj1-category-card-name {
	color: var(--jtj1-ink);
	font-weight: 700;
	font-size: 0.95rem;
}

.jtj1-category-card-count {
	color: var(--jtj1-ink-muted);
	font-size: 0.78rem;
}

/* Product grid / cards */
.jtj1-section-title {
	max-width: 1180px;
	margin: 2.5rem auto 1rem;
	padding: 0 1.5rem;
	font-size: 1.5rem;
	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: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
}

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

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

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

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

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

.jtj1-img-packshot {
	opacity: 0;
}

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

.jtj1-badge {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	font-size: 0.7rem;
	font-weight: 700;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	color: var(--jtj1-white);
	pointer-events: none;
}

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

.jtj1-badge-demo {
	background: var(--jtj1-ink);
	top: 0.6rem;
	right: 0.6rem;
	left: auto;
}

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

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

.jtj1-card-title {
	font-size: 1rem;
	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 del {
	color: var(--jtj1-ink-muted);
}

.jtj1-price-sale {
	color: var(--jtj1-danger);
	font-weight: 700;
}

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

.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;
	gap: 0.5rem;
	margin-top: auto;
}

.jtj1-qty-input {
	width: 3.5rem;
	border: 1px solid var(--jtj1-border);
	border-radius: 8px;
	padding: 0.4rem;
}

.jtj1-add-to-cart-button,
.jtj1-view-product-button {
	flex: 1;
	text-align: center;
	background: var(--jtj1-blue);
	color: var(--jtj1-white);
	border-radius: 8px;
	padding: 0.5rem 0.75rem;
	text-decoration: none;
	font-weight: 600;
	border: none;
	cursor: pointer;
}

.jtj1-add-to-cart-button:hover,
.jtj1-view-product-button:hover {
	background: var(--jtj1-blue-dark);
	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: 8px;
	padding: 0.5rem 0.75rem;
	font-weight: 600;
	cursor: not-allowed;
}

/* Product single page extras */
.jtj1-highlights.jtj1-highlights-single {
	margin: 1rem 0;
}

.jtj1-product-demo-flag {
	display: inline-block;
	background: var(--jtj1-ink);
	color: var(--jtj1-white);
	font-size: 0.7rem;
	font-weight: 700;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	margin-bottom: 0.5rem;
}

/*
 * 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: 8px;
	border: 1px solid var(--jtj1-border);
}

/* Footer */
.jtj1-footer {
	background: var(--jtj1-ink);
	color: var(--jtj1-white);
	padding: 2.5rem 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-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.jtj1-footer-bottom {
	max-width: 1180px;
	margin: 1.5rem auto 0;
	font-size: 0.75rem;
	opacity: 0.7;
}

/* 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: 12px;
	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;
}

/* Responsive */
@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 {
		position: sticky;
		top: 0;
		z-index: 30;
	}

	.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;
	}

	/*
	 * 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: 3rem;
		padding: 0.4rem 0.35rem;
	}
}

/*
 * 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;
	}
}