/**
 * ECOMMERCE — capa visual sobre WooCommerce.
 *
 * No adapta WooCommerce pantalla por pantalla: lo neutraliza y lo hace heredar el
 * sistema de la Home (color, tipografía, botones, controles, ritmo). Hito 1:
 * neutralización global + catálogo (cabecera, grid, orden, paginación, migas).
 * Carrito, checkout y ficha se cubren en hitos siguientes.
 *
 * Ver informes/sistema-visual-ecommerce.md
 */

/* ══════════════════════════════════════════════════════════════════════════
   1 · NEUTRALIZACIÓN GLOBAL — que WooCommerce deje de parecer WooCommerce
   ══════════════════════════════════════════════════════════════════════════ */

/* --- Tipografía y color base de la tienda --- */
.woocommerce,
.woocommerce-page {
	color: var(--zihouse-color-ink);
	font-family: var(--zihouse-font-body);
}

.woocommerce a { color: var(--zihouse-color-ink); }
.woocommerce a:hover { color: var(--zihouse-color-accent); }

/* Títulos de WooCommerce a la fuente display */
.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.woocommerce-products-header__title,
.product_title {
	font-family: var(--zihouse-font-display);
	font-weight: 400;
	letter-spacing: var(--zihouse-tracking-tight);
	color: var(--zihouse-color-ink);
}

/* --- Precio: siempre Fraunces, dato considerado --- */
.woocommerce .price,
.woocommerce .amount,
.woocommerce-Price-amount {
	font-family: var(--zihouse-font-display);
	color: var(--zihouse-color-ink);
	font-weight: 400;
}

.woocommerce del,
.woocommerce del .amount {
	color: var(--zihouse-color-ink-muted);
	font-weight: 400;
}

.woocommerce ins,
.woocommerce ins .amount { text-decoration: none; }

/* --- El distintivo de oferta de fábrica: fuera. El precio ya cuenta la rebaja. --- */
.woocommerce span.onsale { display: none; }

/* --- Botones: al sistema de 3 niveles ---
   Por defecto todos los .button son secundarios (contorno tinta). */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button,
.wc-block-components-button,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-family: var(--zihouse-font-body);
	font-size: var(--zihouse-text-sm);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1;
	min-height: var(--zihouse-control-h);
	padding: 0 1.4em;
	border: 1px solid var(--zihouse-color-ink);
	border-radius: var(--zihouse-radius-md);
	/* !important: WooCommerce colorea sus botones con reglas envueltas en :where()
	   de la misma especificidad que las nuestras → sin esto gana por orden de carga
	   y reaparece su morado de marca (#7f54b3). */
	background: transparent !important;
	color: var(--zihouse-color-ink) !important;
	border-color: var(--zihouse-color-ink) !important;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: background-color var(--zihouse-duration-fast) var(--zihouse-ease-out-quart),
		color var(--zihouse-duration-fast) var(--zihouse-ease-out-quart),
		border-color var(--zihouse-duration-fast) var(--zihouse-ease-out-quart);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button:hover,
.wp-element-button:hover {
	background: var(--zihouse-color-ink);
	color: var(--zihouse-color-bg);
	border-color: var(--zihouse-color-ink);
}

/* Acción principal (comprar / pagar) = primario sólido morado, uno por vista. */
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.single_add_to_cart_button,
.woocommerce .checkout-button,
.wc-block-components-checkout-place-order-button,
.wc-proceed-to-checkout a.checkout-button {
	background: var(--zihouse-color-accent) !important;
	border-color: var(--zihouse-color-accent) !important;
	color: var(--zihouse-color-on-accent) !important;
}

.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.single_add_to_cart_button:hover,
.woocommerce .checkout-button:hover {
	background: var(--zihouse-color-accent-hover) !important;
	border-color: var(--zihouse-color-accent-hover) !important;
	color: var(--zihouse-color-on-accent) !important;
}

/* Hover del botón secundario (tinta), tras el !important de arriba. */
.woocommerce a.button:not(.alt):hover,
.woocommerce button.button:not(.alt):hover,
.woocommerce input.button:not(.alt):hover {
	background: var(--zihouse-color-ink) !important;
	color: var(--zihouse-color-bg) !important;
	border-color: var(--zihouse-color-ink) !important;
}

/* --- Controles de formulario --- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .quantity input.qty,
.woocommerce select,
.woocommerce-ordering select,
.wc-block-components-text-input input {
	font-family: var(--zihouse-font-body);
	font-size: var(--zihouse-text-sm);
	color: var(--zihouse-color-ink);
	min-height: var(--zihouse-control-h);
	padding: 0 0.9em;
	background: var(--zihouse-color-card);
	border: 1px solid var(--zihouse-color-border);
	border-radius: var(--zihouse-radius-md);
	box-shadow: none;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce select:focus {
	outline: 2px solid var(--zihouse-color-accent);
	outline-offset: 2px;
	border-color: var(--zihouse-color-accent);
}

/* --- Avisos (notices): discretos, sin verde/rojo chillón --- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	font-family: var(--zihouse-font-body);
	font-size: var(--zihouse-text-sm);
	background: var(--zihouse-color-surface-strong);
	color: var(--zihouse-color-ink);
	border: 0;
	border-left: 2px solid var(--zihouse-color-ink);
	border-radius: var(--zihouse-radius-sm);
	padding: var(--zihouse-space-sm) var(--zihouse-space-md);
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }

.woocommerce-message { border-left-color: var(--zihouse-color-instock); }
.woocommerce-error { border-left-color: var(--zihouse-color-danger); }

/* Foco de teclado uniforme */
.woocommerce a:focus-visible,
.woocommerce button:focus-visible {
	outline: 2px solid var(--zihouse-color-accent);
	outline-offset: 3px;
}

/* ══════════════════════════════════════════════════════════════════════════
   2 · CATÁLOGO — cabecera, grid, orden, paginación, migas
   ══════════════════════════════════════════════════════════════════════════ */

.zihouse-main--shop {
	max-width: var(--zihouse-container-max);
	margin-inline: auto;
	padding: var(--zihouse-space-2xl) var(--zihouse-container-pad) var(--zihouse-space-3xl);
}

/* --- Migas --- */
.woocommerce-breadcrumb {
	font-family: var(--zihouse-font-body);
	font-size: var(--zihouse-text-xs);
	letter-spacing: 0.02em;
	color: var(--zihouse-color-ink-muted);
	margin-bottom: var(--zihouse-space-lg);
}

.woocommerce-breadcrumb a { color: var(--zihouse-color-ink-muted); }
.woocommerce-breadcrumb a:hover { color: var(--zihouse-color-accent); }

/* --- Hero editorial de categoría (reemplaza la cabecera por defecto) --- */
.woocommerce-products-header { display: none; }

.zihouse-category-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(var(--zihouse-space-xl), 5vw, var(--zihouse-space-3xl));
	align-items: center;
	margin-bottom: var(--zihouse-space-2xl);
	padding-bottom: var(--zihouse-space-2xl);
	border-bottom: 1px solid var(--zihouse-color-border);
}

.zihouse-category-hero__text { min-width: 0; }

.zihouse-category-hero .woocommerce-breadcrumb { margin-bottom: var(--zihouse-space-lg); }

.zihouse-category-hero__eyebrow {
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--zihouse-color-ink-muted);
	margin: 0 0 var(--zihouse-space-sm);
}

.zihouse-category-hero__title {
	font-family: var(--zihouse-font-display);
	font-size: clamp(2.75rem, 5.5vw, 4.75rem);
	line-height: 0.98;
	letter-spacing: -0.01em;
	margin: 0;
}

.zihouse-category-hero__intro { margin-top: var(--zihouse-space-lg); max-width: 46ch; }
.zihouse-category-hero__intro p {
	font-size: var(--zihouse-text-base);
	line-height: 1.7;
	color: var(--zihouse-color-ink-muted);
	margin: 0;
}

.zihouse-category-hero__meta {
	margin-top: var(--zihouse-space-lg);
	font-size: var(--zihouse-text-sm);
	color: var(--zihouse-color-ink-muted);
}

.zihouse-category-hero__media {
	position: relative;
	aspect-ratio: 5 / 4;
	overflow: hidden;
	border-radius: var(--zihouse-radius-lg);
	background: var(--zihouse-color-surface);
}
.zihouse-category-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 56rem) {
	.zihouse-category-hero { grid-template-columns: 1fr; gap: var(--zihouse-space-lg); }
	.zihouse-category-hero__media { aspect-ratio: 16 / 10; }
}

/* Refinamiento C: un punto más de presencia de imagen en el hero. */
@media (min-width: 56.01rem) {
	.zihouse-category-hero { grid-template-columns: 1fr 1.08fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CLUSTER DE SUBCATEGORÍAS — tiles grandes en carrusel horizontal
   ══════════════════════════════════════════════════════════════════════════ */
.zihouse-cluster { margin: 0 0 var(--zihouse-space-3xl); }

.zihouse-cluster__head { margin-bottom: var(--zihouse-space-lg); }

.zihouse-cluster__title {
	font-family: var(--zihouse-font-display);
	font-size: var(--zihouse-text-2xl);
	margin: 0;
}

.zihouse-cluster__track {
	display: flex;
	gap: var(--zihouse-space-lg);
	list-style: none;
	margin: 0;
	padding: 0 0 var(--zihouse-space-xs);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.zihouse-cluster__track::-webkit-scrollbar { display: none; }

.zihouse-cluster__item {
	flex: 0 0 auto;
	width: clamp(13rem, 20vw, 18rem);
	scroll-snap-align: start;
}

.zihouse-cluster__link { display: block; text-decoration: none; color: inherit; }

.zihouse-cluster__media {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--zihouse-color-surface);
	margin-bottom: var(--zihouse-space-sm);
}
.zihouse-cluster__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--zihouse-duration-slow) var(--zihouse-ease-out-quint);
}
.zihouse-cluster__link:hover .zihouse-cluster__media img { transform: scale(1.04); }

.zihouse-cluster__label {
	display: block;
	font-family: var(--zihouse-font-body);
	font-size: var(--zihouse-text-base);
	font-weight: 600;
	color: var(--zihouse-color-ink);
}
.zihouse-cluster__count {
	display: block;
	margin-top: 0.15em;
	font-size: var(--zihouse-text-xs);
	color: var(--zihouse-color-ink-muted);
}

@media (max-width: 40rem) {
	.zihouse-cluster__item { width: clamp(9.5rem, 42vw, 13rem); }
	.zihouse-cluster__title { font-size: var(--zihouse-text-xl); }
}

/* Interlinking al pie del catálogo: mismo componente, separado del grid. */
.zihouse-cluster--related {
	margin-top: var(--zihouse-space-3xl);
	padding-top: var(--zihouse-space-2xl);
	border-top: 1px solid var(--zihouse-color-border);
}

/* --- Barra de control (recuento + orden) --- */
.woocommerce .woocommerce-result-count {
	font-size: var(--zihouse-text-sm);
	color: var(--zihouse-color-ink-muted);
	margin: 0;
	padding-top: 0.6em;
}

.woocommerce .woocommerce-ordering { margin-bottom: var(--zihouse-space-lg); }

/* --- Grid: rejilla editorial, no columnas flotadas de WooCommerce --- */
.zihouse-main--shop ul.products,
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* 2 col móvil/tablet → 4 en desktop */
	gap: var(--zihouse-grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Desktop (≥1024px): 4 columnas, fiel a la referencia. */
@media (min-width: 64rem) {
	.zihouse-main--shop ul.products,
	.woocommerce ul.products {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* WooCommerce añade ::before/::after (clearfix del layout flotado antiguo). En un
   GRID esos pseudo-elementos ocupan celdas → dejan un hueco vacío al inicio y
   empujan los productos. Se anulan. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
	display: none;
}

/* ── Red de seguridad anti-desbordamiento horizontal ──────────────────────────
   En móvil, la galería de producto (flexslider), los drawers y el wordmark del
   footer podían superar el ancho del viewport → scroll lateral y contenido
   cortado por la izquierda. `overflow-x: clip` lo corta sin romper
   position:sticky (a diferencia de overflow:hidden). Esta hoja NO carga en la
   Home, así que el arreglo queda acotado a páginas internas. */
html { overflow-x: clip; }
.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery__wrapper { max-width: 100%; }
.single-product .woocommerce-product-gallery__wrapper img { max-width: 100%; height: auto; }

/* Anular el float/width por defecto de WooCommerce en cada celda */
.woocommerce ul.products li.product,
.woocommerce ul.products li.zihouse-shop-item {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	padding: 0;
}

.woocommerce ul.products li.product::before { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   SISTEMA DE IMAGEN DEL CATÁLOGO
   Lienzo CUADRADO uniforme (1/1) en blanco piedra con borde tenue y radio 6px.
   Las fuentes son cuadradas (150×150) o apaisadas: el 1/1 encaja los productos
   cuadrados a sangre y minimiza el blanco en los apaisados (mucho mejor que el
   4:5 retrato anterior, que dejaba el producto flotando). El producto se AMPLÍA
   (sin el padding compuesto de antes) y mix-blend-multiply funde el fondo blanco
   de la foto con el lienzo → distintos fabricantes parecen del mismo estudio.
   La ficha NO es una card cerrada: el texto va directo sobre el fondo crema.
   ACOTADO a `.woocommerce ul.products`: la Home conserva su tarjeta propia.
   ══════════════════════════════════════════════════════════════════════════ */
.woocommerce ul.products .zihouse-product-card__media {
	aspect-ratio: 1 / 1;              /* uniforme; producto protagonista a sangre */
	border-radius: 6px;               /* radio máximo pedido */
	border: 1px solid var(--zihouse-shop-media-border, #e5ded4);
	background: var(--zihouse-shop-media-bg, #fbfbf8);
	box-shadow: none;                 /* sin sombras fuertes: no es una card */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3%;                      /* aire mínimo: el producto llena el lienzo */
	margin-bottom: var(--zihouse-space-sm);
}

.woocommerce ul.products .zihouse-product-card__media img {
	width: 100%;
	height: 100%;
	padding: 0;                       /* anula el padding heredado (producto pequeño) */
	transition: transform var(--zihouse-duration-base) var(--zihouse-ease-out-quart);
}

/* Foto SOBRE BLANCO: contenida y fundida con el lienzo (sin rectángulo blanco). */
.woocommerce ul.products .zihouse-product-card--studio .zihouse-product-card__media img {
	object-fit: contain;
	mix-blend-mode: multiply;
}

/* Foto de AMBIENTE: a sangre; el lienzo no lleva aire alrededor. */
.woocommerce ul.products .zihouse-product-card--scene .zihouse-product-card__media {
	padding: 0;
}
.woocommerce ul.products .zihouse-product-card--scene .zihouse-product-card__media img {
	object-fit: cover;
	mix-blend-mode: normal;
}

.woocommerce ul.products .zihouse-product-card:hover .zihouse-product-card__media img {
	transform: scale(1.04);
}

/* Categoría/etiqueta con fondo NO blanco: el multiply ensuciaría la foto. Añade
   la clase `zihouse-shop--photo` en el <body> para desactivarlo puntualmente. */
.zihouse-shop--photo .woocommerce ul.products .zihouse-product-card__media img {
	mix-blend-mode: normal;
}

/* Ocultar los restos del ítem por defecto de WooCommerce por si algún hook los
   inyecta fuera de nuestra tarjeta (rating vacío, botón de añadir suelto). */
.zihouse-shop-item > .button:not(.zihouse-btn),
.zihouse-shop-item > .star-rating,
.zihouse-shop-item > .woocommerce-loop-product__title,
.zihouse-shop-item > .price { display: none; }

/* Producto agotado en el grid: imagen atenuada (la disponibilidad ya lo dice). */
.zihouse-product-card:has(.zihouse-product-card__availability--out) .zihouse-product-card__media {
	opacity: 0.6;
}

/* --- Paginación --- */
.woocommerce nav.woocommerce-pagination {
	margin-top: var(--zihouse-space-2xl);
	text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
	display: inline-flex;
	gap: var(--zihouse-space-2xs);
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	margin: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	font-family: var(--zihouse-font-body);
	font-size: var(--zihouse-text-sm);
	min-width: var(--zihouse-control-h);
	height: var(--zihouse-control-h);
	line-height: var(--zihouse-control-h);
	padding: 0 0.6em;
	border: 1px solid var(--zihouse-color-border);
	border-radius: var(--zihouse-radius-md);
	color: var(--zihouse-color-ink);
	background: transparent;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--zihouse-color-accent);
	border-color: var(--zihouse-color-accent);
	color: var(--zihouse-color-on-accent);
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
	border-color: var(--zihouse-color-ink);
}

/* ══════════════════════════════════════════════════════════════════════════
   3 · MÓVIL
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 40rem) {
	.zihouse-main--shop ul.products,
	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--zihouse-space-md);
	}

	.woocommerce .woocommerce-result-count { display: none; }
	.woocommerce .woocommerce-ordering { width: 100%; }
	.woocommerce-ordering select { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   4 · CATÁLOGO — panel de filtros (DRAWER en todos los tamaños)
   El grid va a ancho completo; los filtros viven en un panel lateral que se
   abre con «Filtrar» y oscurece el fondo. Sin JS los <details> y el GET siguen
   funcionando; el JS solo mejora (conteo en vivo).
   ══════════════════════════════════════════════════════════════════════════ */
.zihouse-shop-layout { display: block; }
.zihouse-shop-main { min-width: 0; }

/* --- Barra de control sobre el grid --- */
.zihouse-shop-controls {
	display: flex;
	align-items: center;
	gap: var(--zihouse-space-md);
	flex-wrap: wrap;
	padding-bottom: var(--zihouse-space-md);
	margin-bottom: var(--zihouse-space-lg);
	border-bottom: 1px solid var(--zihouse-color-border);
}

.zihouse-filters-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	min-height: var(--zihouse-control-h);
	padding: 0 1.1em;
	font-family: var(--zihouse-font-body);
	font-size: var(--zihouse-text-sm);
	font-weight: 600;
	letter-spacing: 0.01em;
	border: 1px solid var(--zihouse-color-ink);
	border-radius: var(--zihouse-radius-md);
	background: transparent;
	color: var(--zihouse-color-ink);
	cursor: pointer;
	transition: background var(--zihouse-duration-fast) var(--zihouse-ease-out-quart), color var(--zihouse-duration-fast) var(--zihouse-ease-out-quart);
}
.zihouse-filters-toggle:hover { background: var(--zihouse-color-ink); color: var(--zihouse-color-bg); }

.zihouse-filters-toggle__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4em;
	height: 1.4em;
	padding: 0 0.4em;
	margin-left: 0.15em;
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1;
	color: var(--zihouse-color-on-accent);
	background: var(--zihouse-color-accent);
	border-radius: 999px;
}

.zihouse-shop-controls__count {
	font-size: var(--zihouse-text-sm);
	color: var(--zihouse-color-ink-muted);
	margin: 0;
}

/* La ordenación de WooCommerce se empuja a la derecha. */
.zihouse-shop-controls .woocommerce-ordering { margin: 0 0 0 auto; }
.zihouse-shop-controls .woocommerce-ordering select {
	min-height: var(--zihouse-control-h);
	border: 1px solid var(--zihouse-color-border);
	border-radius: var(--zihouse-radius-md);
	background: transparent;
	font-family: var(--zihouse-font-body);
	font-size: var(--zihouse-text-sm);
	padding: 0 2em 0 0.8em;
}

/* --- Chips de filtros aplicados --- */
.zihouse-active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--zihouse-space-2xs);
	margin: 0 0 var(--zihouse-space-lg);
}

.zihouse-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.35em 0.75em;
	font-size: var(--zihouse-text-xs);
	color: var(--zihouse-color-ink);
	background: var(--zihouse-color-surface);
	border: 1px solid var(--zihouse-color-border);
	border-radius: 999px;
	transition: border-color var(--zihouse-duration-fast) var(--zihouse-ease-out-quart);
}
.zihouse-chip:hover { border-color: var(--zihouse-color-ink); }
.zihouse-chip svg { opacity: 0.5; }
.zihouse-chip:hover svg { opacity: 1; }

.zihouse-active-filters__clear {
	font-size: var(--zihouse-text-xs);
	color: var(--zihouse-color-ink-muted);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	margin-left: 0.4em;
}

/* --- El drawer --- */
.zihouse-filters {
	position: fixed;
	inset: 0;
	z-index: var(--zihouse-z-modal);
	visibility: hidden;
	pointer-events: none;
}
.zihouse-filters[data-open="true"] { visibility: visible; pointer-events: auto; }

.zihouse-filters .zihouse-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: var(--zihouse-color-overlay);
	opacity: 0;
	transition: opacity var(--zihouse-duration-base) var(--zihouse-ease-out-quart);
}
.zihouse-filters[data-open="true"] .zihouse-drawer__backdrop { opacity: 1; }

.zihouse-filters__form {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	width: min(90vw, 24rem);
	background: var(--zihouse-color-bg);
	transform: translateX(-100%);
	transition: transform var(--zihouse-duration-base) var(--zihouse-ease-out-quint);
	box-shadow: 0 0 60px rgba(0, 0, 0, 0.15);
}
.zihouse-filters[data-open="true"] .zihouse-filters__form { transform: translateX(0); }

/* Cabecera fija */
.zihouse-filters__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--zihouse-space-lg);
	border-bottom: 1px solid var(--zihouse-color-border);
	flex: 0 0 auto;
}
.zihouse-filters__title {
	font-family: var(--zihouse-font-display);
	font-size: var(--zihouse-text-xl);
}
.zihouse-filters__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.2rem;
	height: 2.2rem;
	margin-right: -0.4rem;
	border: 0;
	background: transparent;
	color: var(--zihouse-color-ink);
	cursor: pointer;
}

/* Cuerpo con scroll */
.zihouse-filters__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: var(--zihouse-space-2xs) var(--zihouse-space-lg) var(--zihouse-space-lg);
}

/* Grupo-acordeón <details> */
.zihouse-filter-group { border-bottom: 1px solid var(--zihouse-color-border); }
.zihouse-filter-group__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--zihouse-space-md) 0;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--zihouse-color-ink);
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.zihouse-filter-group__summary::-webkit-details-marker { display: none; }
.zihouse-filter-group__icon { position: relative; width: 12px; height: 12px; flex: 0 0 auto; }
.zihouse-filter-group__icon::before,
.zihouse-filter-group__icon::after {
	content: "";
	position: absolute;
	background: var(--zihouse-color-ink-muted);
	transition: transform var(--zihouse-duration-fast) var(--zihouse-ease-out-quart), opacity var(--zihouse-duration-fast) var(--zihouse-ease-out-quart);
}
.zihouse-filter-group__icon::before { top: 5px; left: 0; width: 12px; height: 1.5px; }
.zihouse-filter-group__icon::after { top: 0; left: 5px; width: 1.5px; height: 12px; }
.zihouse-filter-group[open] .zihouse-filter-group__icon::after { opacity: 0; transform: rotate(90deg); }
.zihouse-filter-group__body { padding-bottom: var(--zihouse-space-md); }

/* Precio */
.zihouse-filters__price { display: flex; align-items: center; gap: 0.6rem; }
.zihouse-filters__price input { width: 100%; }

/* Check */
.zihouse-filters__check {
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.4em 0;
	font-size: var(--zihouse-text-sm);
	cursor: pointer;
}
.zihouse-filters__count {
	margin-left: auto;
	color: var(--zihouse-color-ink-muted);
	font-size: var(--zihouse-text-xs);
}

/* Barra inferior fija */
.zihouse-filters__foot {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--zihouse-space-md);
	padding: var(--zihouse-space-md) var(--zihouse-space-lg);
	border-top: 1px solid var(--zihouse-color-border);
	background: var(--zihouse-color-bg);
}
.zihouse-filters__clear {
	font-size: var(--zihouse-text-sm);
	color: var(--zihouse-color-ink-muted);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	white-space: nowrap;
}
.zihouse-filters__clear[hidden] { display: none; }
.zihouse-filters__apply { flex: 1 1 auto; min-height: var(--zihouse-control-h); }

@media (max-width: 40rem) {
	.zihouse-filters__form { width: 100vw; }
	.zihouse-shop-controls__count { order: 3; width: 100%; }
	.zihouse-shop-controls .woocommerce-ordering { margin-left: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   5 · FICHA DE PRODUCTO (PDP) — reconstrucción propia sobre la arquitectura de
   la referencia. Clases .zihouse-pdp / .zihouse-accordion. Sin tabs.
   ══════════════════════════════════════════════════════════════════════════ */
.zihouse-pdp__breadcrumb { margin-bottom: var(--zihouse-space-lg); }
.zihouse-pdp .woocommerce-breadcrumb {
	font-size: var(--zihouse-text-xs);
	letter-spacing: 0.02em;
	color: var(--zihouse-color-ink-muted);
	margin: 0;
}

/* --- Hero: galería | summary --- */
.zihouse-pdp__hero {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(var(--zihouse-space-xl), 4vw, var(--zihouse-space-3xl));
	align-items: start;
}

/* --- Galería: imagen grande + miniaturas reales --- */
.zihouse-pdp__gallery {
	position: sticky;
	top: calc(var(--zihouse-header-height) + var(--zihouse-space-md));
}
.zihouse-pdp__gallery .woocommerce-product-gallery { width: 100% !important; margin: 0; }
.zihouse-pdp__gallery .woocommerce-product-gallery__image {
	aspect-ratio: 1 / 1;
	background: var(--zihouse-shop-media-bg, var(--zihouse-color-surface));
	overflow: hidden;
}
.zihouse-pdp__gallery .woocommerce-product-gallery__image > a {
	display: flex; align-items: center; justify-content: center; height: 100%;
}
/* `:not(.zoomImg)`: no tocar la capa de aumento del zoom nativo (la posiciona el
   plugin a tamaño completo); solo damos el tratamiento a la imagen base. */
.zihouse-pdp__gallery .woocommerce-product-gallery__image img:not(.zoomImg) {
	max-width: 100%; max-height: 100%; width: auto; height: auto;
	border-radius: 0; object-fit: contain; mix-blend-mode: multiply; padding: 5%;
}
.zihouse-pdp__gallery .flex-control-thumbs {
	display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--zihouse-space-xs);
	margin: var(--zihouse-space-sm) 0 0; padding: 0; list-style: none;
}
.zihouse-pdp__gallery .flex-control-thumbs li { margin: 0; }
.zihouse-pdp__gallery .flex-control-thumbs img {
	aspect-ratio: 1 / 1; object-fit: contain; padding: 10%;
	background: var(--zihouse-shop-media-bg, var(--zihouse-color-surface));
	mix-blend-mode: multiply; cursor: pointer; opacity: 0.55;
	transition: opacity var(--zihouse-duration-fast) var(--zihouse-ease-out-quart);
}
.zihouse-pdp__gallery .flex-control-thumbs img.flex-active,
.zihouse-pdp__gallery .flex-control-thumbs img:hover { opacity: 1; }

/* --- Summary --- */
.zihouse-pdp__summary { display: flex; flex-direction: column; gap: var(--zihouse-space-md); }

.zihouse-pdp__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--zihouse-space-md); }
.zihouse-pdp__title { font-family: var(--zihouse-font-display); font-size: var(--zihouse-text-3xl); line-height: 1.04; margin: 0; }
.zihouse-pdp__wishlist {
	flex: 0 0 auto; display: inline-flex; width: 2.6rem; height: 2.6rem;
	align-items: center; justify-content: center;
	border: 1px solid var(--zihouse-color-border); border-radius: 999px;
	background: transparent; color: var(--zihouse-color-ink); cursor: pointer;
	transition: border-color var(--zihouse-duration-fast) var(--zihouse-ease-out-quart), color var(--zihouse-duration-fast) var(--zihouse-ease-out-quart);
}
.zihouse-pdp__wishlist:hover { border-color: var(--zihouse-color-ink); }
.zihouse-pdp__wishlist.is-active { color: var(--zihouse-color-accent); border-color: var(--zihouse-color-accent); }
.zihouse-pdp__wishlist.is-active svg { fill: currentColor; }

.zihouse-pdp__meta {
	display: flex; flex-wrap: wrap; gap: var(--zihouse-space-2xs) var(--zihouse-space-lg);
	margin: 0; padding: var(--zihouse-space-sm) 0;
	border-top: 1px solid var(--zihouse-color-border); border-bottom: 1px solid var(--zihouse-color-border);
}
.zihouse-pdp__meta-item { display: flex; gap: 0.4em; align-items: baseline; }
.zihouse-pdp__meta-item dt { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--zihouse-color-ink-muted); }
.zihouse-pdp__meta-item dd { margin: 0; font-size: var(--zihouse-text-sm); color: var(--zihouse-color-ink); }
.zihouse-pdp__meta-item dd.is-out { color: var(--zihouse-color-ink-muted); }

.zihouse-pdp__short { color: var(--zihouse-color-ink-muted); line-height: 1.7; max-width: 52ch; }
.zihouse-pdp__short p { margin: 0 0 0.4em; }
.zihouse-pdp__more { color: var(--zihouse-color-ink); text-decoration: underline; text-underline-offset: 0.2em; font-size: var(--zihouse-text-sm); }

.zihouse-pdp__price { font-size: var(--zihouse-text-2xl); color: var(--zihouse-color-ink); margin: 0; }
.zihouse-pdp__price del { color: var(--zihouse-color-ink-muted); font-weight: 400; margin-right: 0.4em; }
.zihouse-pdp__price ins { text-decoration: none; }

/* El precio de la variación se refleja arriba en `.zihouse-pdp__price` (vía pdp.js
   con el evento found_variation): ocultamos el duplicado que WooCommerce pinta
   dentro del formulario, para una sola jerarquía de precio. */
.zihouse-pdp__buy .single_variation .woocommerce-variation-price,
.zihouse-pdp__buy .single_variation .price { display: none; }
.zihouse-pdp__buy .woocommerce-variation-availability { font-size: var(--zihouse-text-sm); color: var(--zihouse-color-ink-muted); margin: 0 0 var(--zihouse-space-2xs); }
.zihouse-pdp__buy .woocommerce-variation.single_variation { margin-bottom: var(--zihouse-space-2xs); }

.zihouse-pdp__buy form.cart { display: flex; flex-wrap: wrap; gap: var(--zihouse-space-sm); align-items: stretch; margin: 0; }
.zihouse-pdp__buy .variations { border: 0; margin: 0 0 var(--zihouse-space-sm); width: 100%; }
.zihouse-pdp__buy .variations td, .zihouse-pdp__buy .variations th { padding: 0.4em 0; border: 0; vertical-align: middle; }
.zihouse-pdp__buy .variations th.label { font-size: var(--zihouse-text-sm); font-weight: 600; padding-right: var(--zihouse-space-sm); }
.zihouse-pdp__buy .variations select { min-width: 12rem; min-height: var(--zihouse-control-h); border: 1px solid var(--zihouse-color-border); border-radius: var(--zihouse-radius-md); background: transparent; padding: 0 2em 0 0.8em; }
.zihouse-pdp__buy .quantity input.qty { width: 4.5rem; text-align: center; min-height: var(--zihouse-control-h); border: 1px solid var(--zihouse-color-border); border-radius: var(--zihouse-radius-md); }
.zihouse-pdp__buy .single_add_to_cart_button { flex: 1 1 auto; min-height: var(--zihouse-control-h); }
.zihouse-pdp__buy .woocommerce-variation-add-to-cart { display: flex; gap: var(--zihouse-space-sm); align-items: stretch; width: 100%; }

.zihouse-pdp__value {
	list-style: none; margin: var(--zihouse-space-2xs) 0 0; padding: var(--zihouse-space-md);
	background: var(--zihouse-color-surface); display: flex; flex-direction: column; gap: 0.45em;
	font-size: var(--zihouse-text-sm); color: var(--zihouse-color-ink);
}
.zihouse-pdp__value li { position: relative; padding-left: 1.4em; }
.zihouse-pdp__value li::before {
	content: ""; position: absolute; left: 0; top: 0.35em; width: 0.55em; height: 0.3em;
	border-left: 1.5px solid var(--zihouse-color-accent); border-bottom: 1.5px solid var(--zihouse-color-accent);
	transform: rotate(-45deg);
}

/* --- Descripción editorial + acordeones --- */
.zihouse-pdp__desc {
	display: grid; grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(var(--zihouse-space-xl), 4vw, var(--zihouse-space-3xl)); align-items: start;
	margin-top: var(--zihouse-space-3xl); padding-top: var(--zihouse-space-2xl);
	border-top: 1px solid var(--zihouse-color-border);
}
.zihouse-pdp__h2 { font-family: var(--zihouse-font-display); font-size: var(--zihouse-text-2xl); margin: 0 0 var(--zihouse-space-md); }
.zihouse-pdp__prose { font-size: var(--zihouse-text-base); line-height: 1.75; color: var(--zihouse-color-ink); max-width: 60ch; }
.zihouse-pdp__prose p { margin: 0 0 1em; }
.zihouse-pdp__dims { display: flex; gap: var(--zihouse-space-lg); list-style: none; margin: var(--zihouse-space-lg) 0 0; padding: var(--zihouse-space-md) 0 0; border-top: 1px solid var(--zihouse-color-border); }
.zihouse-pdp__dims li { display: flex; flex-direction: column; gap: 0.15em; }
.zihouse-pdp__dims-k { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--zihouse-color-ink-muted); }
.zihouse-pdp__dims-v { font-family: var(--zihouse-font-display); font-size: var(--zihouse-text-lg); }

/* Acordeón genérico (usado en ficha y FAQ) */
.zihouse-accordion { border-bottom: 1px solid var(--zihouse-color-border); }
.zihouse-accordion:first-child { border-top: 1px solid var(--zihouse-color-border); }
.zihouse-accordion__summary {
	display: flex; align-items: center; justify-content: space-between; gap: var(--zihouse-space-md);
	padding: var(--zihouse-space-md) 0; font-family: var(--zihouse-font-body);
	font-size: var(--zihouse-text-base); font-weight: 600; color: var(--zihouse-color-ink);
	cursor: pointer; list-style: none; user-select: none;
}
.zihouse-accordion__summary::-webkit-details-marker { display: none; }
.zihouse-accordion__icon { position: relative; width: 12px; height: 12px; flex: 0 0 auto; }
.zihouse-accordion__icon::before, .zihouse-accordion__icon::after {
	content: ""; position: absolute; background: var(--zihouse-color-ink-muted);
	transition: opacity var(--zihouse-duration-fast) var(--zihouse-ease-out-quart), transform var(--zihouse-duration-fast) var(--zihouse-ease-out-quart);
}
.zihouse-accordion__icon::before { top: 5px; left: 0; width: 12px; height: 1.5px; }
.zihouse-accordion__icon::after { top: 0; left: 5px; width: 1.5px; height: 12px; }
.zihouse-accordion[open] .zihouse-accordion__icon::after { opacity: 0; transform: rotate(90deg); }
.zihouse-accordion__body { padding: 0 0 var(--zihouse-space-md); font-size: var(--zihouse-text-sm); line-height: 1.7; color: var(--zihouse-color-ink-muted); }
.zihouse-accordion__body p { margin: 0 0 0.6em; }
.zihouse-accordion__body table { width: 100%; border-collapse: collapse; }
.zihouse-accordion__body th, .zihouse-accordion__body td { text-align: left; padding: 0.45em 0; border-bottom: 1px solid var(--zihouse-color-border); }
.zihouse-accordion__body th { font-weight: 600; color: var(--zihouse-color-ink); width: 40%; }
.zihouse-pdp__note { color: var(--zihouse-color-ink-muted); font-size: var(--zihouse-text-xs); }

/* --- Barra de valor (4 iconos) --- */
.zihouse-pdp__valuebar {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--zihouse-space-lg);
	margin-top: var(--zihouse-space-3xl); padding: var(--zihouse-space-xl) 0;
	border-top: 1px solid var(--zihouse-color-border); border-bottom: 1px solid var(--zihouse-color-border);
}
.zihouse-pdp__value-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--zihouse-space-xs); }
.zihouse-pdp__value-item span { font-size: var(--zihouse-text-sm); color: var(--zihouse-color-ink-muted); }
.zihouse-pdp__value-item svg { color: var(--zihouse-color-ink); }

/* --- FAQ --- */
.zihouse-pdp__faq { margin-top: var(--zihouse-space-3xl); }
.zihouse-pdp__faq-title { font-family: var(--zihouse-font-display); font-size: var(--zihouse-text-2xl); margin: 0 0 var(--zihouse-space-lg); }
.zihouse-pdp__faq-list { max-width: 60rem; }
.zihouse-pdp__faq-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--zihouse-space-md); margin-top: var(--zihouse-space-lg); }
.zihouse-pdp__faq-cta span { color: var(--zihouse-color-ink-muted); }

/* Botón de WhatsApp sutil: contorno + icono, no un pill morado chillón. */
.zihouse-pdp__wa {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	min-height: var(--zihouse-control-h);
	padding: 0 1.1em;
	font-family: var(--zihouse-font-body);
	font-size: var(--zihouse-text-sm);
	font-weight: 600;
	color: var(--zihouse-color-ink);
	text-decoration: none;
	border: 1px solid var(--zihouse-color-ink);
	border-radius: var(--zihouse-radius-md);
	background: transparent;
	transition: background var(--zihouse-duration-fast) var(--zihouse-ease-out-quart), color var(--zihouse-duration-fast) var(--zihouse-ease-out-quart);
}
.zihouse-pdp__wa:hover { background: var(--zihouse-color-ink); color: var(--zihouse-color-bg); }
.zihouse-pdp__wa svg { flex: 0 0 auto; }

/* Ritmo compacto entre secciones de la ficha (menos espacio en blanco).
   Prefijo `.single-product` para ganar en especificidad a las reglas de sección. */
.single-product .zihouse-pdp__desc,
.single-product .zihouse-pdp__valuebar,
.single-product .zihouse-pdp__faq,
.single-product .zihouse-pdp .related.products { margin-top: var(--zihouse-space-xl); }
.single-product .zihouse-pdp__desc { padding-top: var(--zihouse-space-lg); }
.single-product .zihouse-pdp__valuebar { padding-block: var(--zihouse-space-lg); }

/* --- Relacionados (tarjeta del PLP) --- */
.zihouse-pdp .related.products { margin-top: var(--zihouse-space-3xl); }
.zihouse-pdp .related.products > h2 { font-family: var(--zihouse-font-display); font-size: var(--zihouse-text-2xl); margin-bottom: var(--zihouse-space-lg); }

/* --- Responsive --- */
@media (max-width: 56rem) {
	.zihouse-pdp__hero { grid-template-columns: 1fr; gap: var(--zihouse-space-lg); }
	.zihouse-pdp__gallery { position: static; }
	.zihouse-pdp__desc { grid-template-columns: 1fr; gap: var(--zihouse-space-xl); }
	.zihouse-pdp__valuebar { grid-template-columns: repeat(2, 1fr); gap: var(--zihouse-space-md); }
}
@media (max-width: 40rem) {
	.zihouse-pdp__gallery .flex-control-thumbs { grid-template-columns: repeat(4, 1fr); }
	.zihouse-pdp__dims { flex-wrap: wrap; gap: var(--zihouse-space-md); }
}

/* ══════════════════════════════════════════════════════════════════════════
   6 · CARRITO · CHECKOUT · CUENTA (neutralización)
   ══════════════════════════════════════════════════════════════════════════ */
.woocommerce-cart .zihouse-main--shop,
.woocommerce-checkout .zihouse-main--shop,
.woocommerce-account .zihouse-main--shop {
	max-width: var(--zihouse-container-max);
}

/* Totales / resumen */
.cart_totals,
.woocommerce-checkout-review-order,
.wc-block-components-totals-item {
	font-family: var(--zihouse-font-body);
}

.cart_totals h2,
.woocommerce-checkout h3 {
	font-family: var(--zihouse-font-display);
	font-size: var(--zihouse-text-xl);
}

.woocommerce table.shop_table {
	border: 1px solid var(--zihouse-color-border);
	border-radius: var(--zihouse-radius-md);
	font-size: var(--zihouse-text-sm);
}

.woocommerce table.shop_table th { font-weight: 600; color: var(--zihouse-color-ink); }

/* Cuenta: navegación lateral con la tipografía del sistema */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.6em 0;
	font-family: var(--zihouse-font-body);
	font-size: var(--zihouse-text-base);
	color: var(--zihouse-color-ink-muted);
	border-bottom: 1px solid var(--zihouse-color-border);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { color: var(--zihouse-color-ink); }

/* Bloques de carrito/checkout: tipografía y radios coherentes */
.wc-block-components-product-name,
.wc-block-components-order-summary-item__description { color: var(--zihouse-color-ink); }
.wc-block-components-totals-item__value,
.wc-block-formatted-money-amount { font-family: var(--zihouse-font-display); }

/* ══════════════════════════════════════════════════════════════════════════
   7 · AJUSTES — relacionados a ancho completo, filtros pulidos
   ══════════════════════════════════════════════════════════════════════════ */

/* Las pestañas, relacionados y upsells son hijos del grid de 2 columnas de la
   ficha → salían uno a la izquierda y otro a la derecha, ocupando raro. Que
   ocupen el ancho completo, en su propia fila debajo de galería + compra. */
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .related,
.single-product div.product > .upsells,
.single-product div.product > .up-sells {
	grid-column: 1 / -1;
}

/* Filtros: inputs de precio con el mismo control del sistema (no el nativo). */
.zihouse-filters__price input {
	min-height: var(--zihouse-control-h);
	padding: 0 0.7em;
	font-family: var(--zihouse-font-body);
	font-size: var(--zihouse-text-sm);
	color: var(--zihouse-color-ink);
	background: var(--zihouse-color-card);
	border: 1px solid var(--zihouse-color-border);
	border-radius: var(--zihouse-radius-md);
	-moz-appearance: textfield;
}

.zihouse-filters__price input::-webkit-outer-spin-button,
.zihouse-filters__price input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.zihouse-filters__price input:focus {
	outline: 2px solid var(--zihouse-color-accent);
	outline-offset: 2px;
	border-color: var(--zihouse-color-accent);
}

.zihouse-filters__price span { color: var(--zihouse-color-ink-muted); }

/* Checkbox del sistema (evita el gris nativo inconsistente entre navegadores) */
.zihouse-filters input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 1.1em;
	height: 1.1em;
	border: 1px solid var(--zihouse-color-ink-muted);
	border-radius: var(--zihouse-radius-sm);
	background: var(--zihouse-color-card);
	cursor: pointer;
	position: relative;
	flex: 0 0 auto;
}

.zihouse-filters input[type="checkbox"]:checked {
	background: var(--zihouse-color-accent);
	border-color: var(--zihouse-color-accent);
}

.zihouse-filters input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	inset: 0;
	background: no-repeat center / 0.7em url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 6'/%3E%3C/svg%3E");
}

.zihouse-filters input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--zihouse-color-accent);
	outline-offset: 2px;
}