/**
 * Sistema de componentes reutilizable.
 */

/* Botones ------------------------------------------------------------- */

.zihouse-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--zihouse-space-2xs);
	font-family: var(--zihouse-font-body);
	font-size: var(--zihouse-text-sm);
	font-weight: 600;
	line-height: 1;
	padding: 0.95em 1.6em;
	border-radius: var(--zihouse-radius-pill);
	border: 1px solid transparent;
	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),
		transform var(--zihouse-duration-fast) var(--zihouse-ease-out-quart);
	white-space: nowrap;
}

.zihouse-btn:active {
	transform: scale(0.98);
}

.zihouse-btn--primary {
	background: var(--zihouse-color-accent);
	color: var(--zihouse-color-on-accent);
}

.zihouse-btn--primary:hover {
	background: var(--zihouse-color-accent-hover);
	color: var(--zihouse-color-on-accent);
}

/* JERARQUÍA DE ACCIONES — tres niveles, y solo tres.
   1 · primary   sólido morado   → la acción principal. Máximo UNA por pantalla.
   2 · secondary contorno tinta  → la alternativa real.
   3 · ghost     texto + flecha  → navegación y "ver más". Sin límite.
   El usuario debe saber cuál es la acción principal sin leer nada. Si en una
   pantalla hay dos sólidos, no hay ninguno. */

.zihouse-btn--secondary {
	background: transparent;
	border-color: var(--zihouse-color-ink);
	color: var(--zihouse-color-ink);
}

.zihouse-btn--secondary:hover {
	background: var(--zihouse-color-ink);
	color: var(--zihouse-color-bg);
}

/* Terciario: no es un botón, es un enlace con flecha. Sin borde ni relleno,
   para que nunca compita con los dos niveles superiores. */
.zihouse-btn--ghost {
	background: transparent;
	border-color: transparent;
	color: var(--zihouse-color-ink);
	padding-inline: 0;
	border-radius: 0;
	position: relative;
}

.zihouse-btn--ghost::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.1em;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--zihouse-duration-base) var(--zihouse-ease-out-quart);
}

.zihouse-btn--ghost:hover::after,
.zihouse-btn--ghost:focus-visible::after { transform: scaleX(1); }

.zihouse-btn--ghost:hover {
	color: var(--zihouse-color-accent);
}

.zihouse-btn--on-dark {
	color: #fff;
	border-color: color-mix(in oklch, #fff 50%, transparent);
}

.zihouse-btn--on-dark:hover {
	background: #fff;
	color: var(--zihouse-color-ink);
}

/* Badges ---------------------------------------------------------------
   Nunca dependen solo del color: siempre llevan texto. */

.zihouse-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-size: var(--zihouse-text-xs);
	font-weight: 600;
	padding: 0.3em 0.75em;
	border-radius: var(--zihouse-radius-pill);
	background: var(--zihouse-color-surface-strong);
	color: var(--zihouse-color-ink);
}

.zihouse-badge--accent {
	background: var(--zihouse-color-surface-strong);
	color: var(--zihouse-color-ink);
}

.zihouse-badge--danger {
	background: color-mix(in oklch, var(--zihouse-color-danger) 12%, white);
	color: var(--zihouse-color-danger);
}

/* Breadcrumbs ------------------------------------------------------------ */

.zihouse-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	font-size: var(--zihouse-text-xs);
	color: var(--zihouse-color-ink-muted);
	list-style: none;
	margin: 0 0 var(--zihouse-space-md);
	padding: 0;
}

.zihouse-breadcrumbs li:not(:last-child)::after {
	content: "/";
	margin-left: 0.4em;
	color: var(--zihouse-color-border);
}

.zihouse-breadcrumbs a {
	color: var(--zihouse-color-ink-muted);
	text-decoration: none;
}

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

/* Buscador --------------------------------------------------------------- */

.zihouse-search {
	position: relative;
	display: flex;
	align-items: center;
}

.zihouse-search__input {
	width: 100%;
	border: 1px solid var(--zihouse-color-border);
	background: var(--zihouse-color-surface);
	border-radius: var(--zihouse-radius-pill);
	padding: 0.65em 1em 0.65em 2.4em;
	font-size: var(--zihouse-text-sm);
	color: var(--zihouse-color-ink);
}

.zihouse-search__input::placeholder {
	color: var(--zihouse-color-ink-muted);
}

.zihouse-search__icon {
	position: absolute;
	left: 0.85em;
	width: 1.05em;
	height: 1.05em;
	color: var(--zihouse-color-ink-muted);
	pointer-events: none;
}

/* Tarjeta de producto -----------------------------------------------------
   Nunca oculta precio, disponibilidad o marca por estética. */

.zihouse-product-card {
	display: flex;
	flex-direction: column;
	gap: var(--zihouse-space-xs);
	text-decoration: none;
	color: inherit;
}

.zihouse-product-card__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--zihouse-radius-md);
	background: var(--zihouse-color-surface);
}

.zihouse-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--zihouse-duration-slow) var(--zihouse-ease-out-quint);
}

.zihouse-product-card:hover .zihouse-product-card__media img {
	transform: scale(1.045);
}

.zihouse-product-card__badges {
	position: absolute;
	top: var(--zihouse-space-xs);
	left: var(--zihouse-space-xs);
	display: flex;
	gap: 0.35em;
}

.zihouse-product-card__brand {
	font-size: var(--zihouse-text-xs);
	color: var(--zihouse-color-ink-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.zihouse-product-card__title {
	font-family: var(--zihouse-font-body);
	font-size: var(--zihouse-text-base);
	font-weight: 600;
	margin: 0;
	color: var(--zihouse-color-ink);
}

.zihouse-product-card__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--zihouse-space-xs);
}

.zihouse-product-card__price {
	font-weight: 600;
	color: var(--zihouse-color-ink);
}

.zihouse-product-card__price del {
	color: var(--zihouse-color-ink-muted);
	font-weight: 400;
	margin-right: 0.4em;
}

/* Producto sin precio real en los datos (no mostramos «0,00 €»): en su lugar,
   una invitación discreta a consultar. No cambia ningún dato de WooCommerce. */
.zihouse-price-ask {
	font-weight: 400;
	color: var(--zihouse-color-ink-muted);
	font-style: italic;
}

.zihouse-product-card__availability {
	font-size: var(--zihouse-text-xs);
	color: var(--zihouse-color-ink-muted);
	display: flex;
	align-items: center;
	gap: 0.35em;
}

.zihouse-product-card__availability::before {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: var(--zihouse-color-success);
}

.zihouse-product-card__availability--out::before {
	background: var(--zihouse-color-ink-muted);
}

/* Tarjeta de categoría / marca -------------------------------------------- */

.zihouse-category-card {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 22rem;
	border-radius: var(--zihouse-radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	isolation: isolate;
}

.zihouse-category-card__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.zihouse-category-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--zihouse-duration-slow) var(--zihouse-ease-out-quint);
}

.zihouse-category-card:hover .zihouse-category-card__media img {
	transform: scale(1.05);
}

.zihouse-category-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, oklch(15% 0.02 285 / 0.72), oklch(15% 0.02 285 / 0));
}

.zihouse-category-card__label {
	padding: var(--zihouse-space-md);
	font-family: var(--zihouse-font-display);
	font-size: var(--zihouse-text-xl);
}

.zihouse-brand-card {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--zihouse-space-md);
	border-radius: var(--zihouse-radius-md);
	background: var(--zihouse-color-surface);
	text-decoration: none;
	color: var(--zihouse-color-ink);
	font-family: var(--zihouse-font-display);
	font-size: var(--zihouse-text-lg);
	min-height: 6rem;
	transition: background-color var(--zihouse-duration-fast) var(--zihouse-ease-out-quart);
}

.zihouse-brand-card:hover {
	background: var(--zihouse-color-surface);
	color: var(--zihouse-color-ink);
}

/* Bloque de confianza ------------------------------------------------------ */

.zihouse-trust {
	display: grid;
	gap: var(--zihouse-space-md);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.zihouse-trust__item {
	display: flex;
	flex-direction: column;
	gap: var(--zihouse-space-2xs);
}

.zihouse-trust__item h3 {
	font-family: var(--zihouse-font-body);
	font-size: var(--zihouse-text-base);
	font-weight: 600;
	margin: 0;
}

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

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

.zihouse-footer {
	background: var(--zihouse-color-ink);
	color: color-mix(in oklch, white 88%, var(--zihouse-color-ink));
	padding-block: var(--zihouse-space-3xl) var(--zihouse-space-lg);
}

.zihouse-footer__tagline {
	font-family: var(--zihouse-font-display);
	font-size: clamp(2rem, 1.5rem + 3vw, 4.5rem);
	line-height: var(--zihouse-leading-tight);
	letter-spacing: var(--zihouse-tracking-tight);
	color: #fff;
	max-width: 18ch;
	margin: 0 0 var(--zihouse-space-md);
}

.zihouse-footer__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--zihouse-space-sm);
	margin-bottom: var(--zihouse-space-2xl);
}

.zihouse-footer__logo {
	margin: 0 0 var(--zihouse-space-sm);
}

.zihouse-logo-img--footer {
	max-height: 2rem;
	width: auto;
}

.zihouse-footer a {
	color: inherit;
	text-decoration: none;
}

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

.zihouse-footer__grid {
	display: grid;
	gap: var(--zihouse-space-xl);
	grid-template-columns: 1.4fr repeat(3, 1fr);
}

.zihouse-footer__heading {
	font-size: var(--zihouse-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: color-mix(in oklch, white 55%, var(--zihouse-color-ink));
	margin: 0 0 var(--zihouse-space-sm);
}

.zihouse-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--zihouse-space-2xs);
	font-size: var(--zihouse-text-sm);
}

.zihouse-footer__bottom {
	margin-top: var(--zihouse-space-xl);
	padding-top: var(--zihouse-space-md);
	border-top: 1px solid color-mix(in oklch, white 15%, var(--zihouse-color-ink));
	display: flex;
	flex-wrap: wrap;
	gap: var(--zihouse-space-sm);
	justify-content: space-between;
	font-size: var(--zihouse-text-xs);
	color: color-mix(in oklch, white 55%, var(--zihouse-color-ink));
}

.zihouse-footer__newsletter {
	display: flex;
	gap: var(--zihouse-space-2xs);
	flex-wrap: wrap;
}

.zihouse-footer__newsletter input[type="email"] {
	flex: 1;
	min-width: 12rem;
	padding: 0.75em 1em;
	border-radius: var(--zihouse-radius-pill);
	border: 1px solid color-mix(in oklch, white 25%, var(--zihouse-color-ink));
	background: color-mix(in oklch, white 8%, var(--zihouse-color-ink));
	color: #fff;
}

@media (max-width: 64rem) {
	.zihouse-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 40rem) {
	.zihouse-footer__grid {
		grid-template-columns: 1fr;
	}
}

/* Mapa diferido ------------------------------------------------------- */

.zihouse-map {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--zihouse-radius-lg);
	overflow: hidden;
	background: var(--zihouse-color-surface-strong);
}

.zihouse-map__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--zihouse-space-sm);
	text-align: center;
	padding: var(--zihouse-space-md);
}

.zihouse-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* =============================================================================
   SECCIÓN 12 — FOOTER EDITORIAL (reemplaza al footer anterior)
   El nombre de marca a escala completa como firma de cierre. Fondo marfil, no
   negro: el cierre debe pertenecer al mismo mundo cálido que el resto.
   ========================================================================== */

.zihouse-footer {
	background: var(--zihouse-color-surface);
	color: var(--zihouse-color-ink);
	padding: var(--zihouse-space-3xl) 0 var(--zihouse-space-md);
	overflow: hidden;
}

.zihouse-footer__cta {
	max-width: var(--zihouse-container-max);
	margin-inline: auto;
	padding-inline: var(--zihouse-container-pad);
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--zihouse-space-lg);
	flex-wrap: wrap;
	padding-bottom: var(--zihouse-space-2xl);
	border-bottom: 1px solid var(--zihouse-color-border);
}

.zihouse-footer__tagline {
	margin: 0;
	font-family: var(--zihouse-font-display);
	font-size: var(--zihouse-text-3xl);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: var(--zihouse-tracking-tight);
	max-width: 16ch;
}

.zihouse-footer__cta-actions { display: flex; gap: var(--zihouse-space-sm); flex-wrap: wrap; }

.zihouse-footer__cols {
	max-width: var(--zihouse-container-max);
	margin-inline: auto;
	padding: var(--zihouse-space-2xl) var(--zihouse-container-pad) var(--zihouse-space-xl);
	display: grid;
	gap: var(--zihouse-space-xl) var(--zihouse-space-lg);
	grid-template-columns: repeat(2, 1fr);
	align-items: start;
}

.zihouse-footer__label {
	margin: 0 0 var(--zihouse-space-sm);
	font-size: var(--zihouse-text-xs);
	font-weight: 500;
	letter-spacing: var(--zihouse-tracking-wide);
	text-transform: uppercase;
	color: var(--zihouse-color-ink-muted);
}

.zihouse-footer__lines {
	margin: 0 0 var(--zihouse-space-xs);
	font-size: var(--zihouse-text-sm);
	line-height: 1.65;
	color: var(--zihouse-color-ink);
}

.zihouse-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	font-size: var(--zihouse-text-sm);
}

.zihouse-footer__list a,
.zihouse-footer__link {
	text-decoration: none;
	color: var(--zihouse-color-ink);
	transition: color var(--zihouse-duration-fast) var(--zihouse-ease-out-quart);
}

.zihouse-footer__list a:hover,
.zihouse-footer__link:hover { color: var(--zihouse-color-accent); }

.zihouse-footer__link {
	font-size: var(--zihouse-text-sm);
	border-bottom: 1px solid var(--zihouse-color-ink);
	padding-bottom: 2px;
}

.zihouse-footer__newsletter {
	display: flex;
	align-items: center;
	gap: var(--zihouse-space-2xs);
	border-bottom: 1px solid var(--zihouse-color-ink);
	padding-bottom: var(--zihouse-space-2xs);
}

.zihouse-footer__newsletter input[type="email"] {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	font-family: var(--zihouse-font-body);
	font-size: var(--zihouse-text-sm);
	color: var(--zihouse-color-ink);
	outline: none;
}

.zihouse-footer__newsletter input::placeholder { color: var(--zihouse-color-ink-muted); }

.zihouse-footer__newsletter button {
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--zihouse-color-ink);
	display: inline-flex;
	padding: 0.2em;
}

.zihouse-footer__newsletter button svg { width: 1.2rem; height: 1.2rem; }
.zihouse-footer__newsletter button:hover { color: var(--zihouse-color-accent); }

/* Firma: el nombre ocupando todo el ancho disponible. */
.zihouse-footer__wordmark {
	font-family: var(--zihouse-font-display);
	font-weight: 400;
	font-size: 25.5vw;
	line-height: 0.78;
	letter-spacing: -0.035em;
	text-align: center;
	color: var(--zihouse-color-ink);
	white-space: nowrap;
	user-select: none;
	margin-block: var(--zihouse-space-lg) var(--zihouse-space-md);
}

.zihouse-footer__legal {
	max-width: var(--zihouse-container-max);
	margin-inline: auto;
	padding: var(--zihouse-space-md) var(--zihouse-container-pad) 0;
	border-top: 1px solid var(--zihouse-color-border);
	display: flex;
	justify-content: space-between;
	gap: var(--zihouse-space-sm);
	flex-wrap: wrap;
	font-size: var(--zihouse-text-xs);
	color: var(--zihouse-color-ink-muted);
}

@media (min-width: 64rem) {
	.zihouse-footer__cols { grid-template-columns: 1.2fr 1fr 1fr 1fr 1.4fr; }
}

@media (max-width: 40rem) {
	.zihouse-footer__cols { grid-template-columns: 1fr; gap: var(--zihouse-space-lg); }
	.zihouse-footer__wordmark { font-size: 26vw; }
}

/* Botón claro: para usar sobre fondos oscuros (contraste real) --------------- */
.zihouse-btn--light {
	background: var(--zihouse-ivory);
	color: var(--zihouse-near-black);
	border-color: var(--zihouse-ivory);
}
.zihouse-btn--light:hover {
	background: transparent;
	color: var(--zihouse-ivory);
	border-color: var(--zihouse-ivory);
}

/* SUB-FOOTER oscuro ---------------------------------------------------------- */

/* Fix de especificidad: dentro del footer, `.zihouse-footer a { color: inherit }`
   ganaba al botón claro y lo dejaba marfil sobre marfil (invisible). */
.zihouse-footer .zihouse-btn--light {
	background: var(--zihouse-ivory);
	color: var(--zihouse-color-ink);
	border-color: var(--zihouse-ivory);
	font-weight: 600;
}

.zihouse-footer .zihouse-btn--light:hover,
.zihouse-subfooter .zihouse-btn--light:hover {
	background: transparent;
	color: var(--zihouse-ivory);
	border-color: var(--zihouse-ivory);
}

/* El carril de marcas lo mueve el scroll (ver scroll-effects.js): sin animación
   automática, así funciona también con "reducir movimiento" del sistema. */

/* Tarjeta de producto: tratamiento editorial ---------------------------------
   Sustituye a la rejilla plana de cajas blancas. La ficha no cambia ni un dato
   (nombre, precio y disponibilidad siguen siendo los de WooCommerce): cambia
   cómo se presentan. */
.zihouse-product-card {
	gap: 0;
	position: relative;
	padding-bottom: var(--zihouse-space-sm);
	border-bottom: 1px solid transparent;
	transition: border-color var(--zihouse-duration-base) var(--zihouse-ease-out-quart);
}

.zihouse-product-card:hover { border-bottom-color: var(--zihouse-color-ink); }

.zihouse-product-card__media {
	aspect-ratio: 3 / 4;
	border-radius: 6px;
	border: 1px solid var(--zihouse-shop-media-border, #e5ded4);
	background: var(--zihouse-shop-media-bg, #faf6ee);
	margin-bottom: var(--zihouse-space-sm);
}

.zihouse-product-card__media img {
	width: 100%;
	height: 100%;
	transition: transform 900ms var(--zihouse-ease-out-quint);
}

/* Foto SOBRE BLANCO (detección automática): el producto se contiene y su fondo
   blanco se funde con el lienzo marfil (multiply) → sin rectángulo blanco stark. */
.zihouse-product-card--studio .zihouse-product-card__media img {
	object-fit: contain;
	mix-blend-mode: multiply;
	padding: 6%;
}

/* Foto de AMBIENTE: llena el lienzo a sangre, sin fusión (la foto es el lienzo). */
.zihouse-product-card--scene .zihouse-product-card__media img {
	object-fit: cover;
	mix-blend-mode: normal;
	padding: 0;
}

.zihouse-product-card:hover .zihouse-product-card__media img { transform: scale(1.07); }

.zihouse-product-card__brand {
	font-size: 0.68rem;
	letter-spacing: 0.16em;
	opacity: 0.5;
}

.zihouse-product-card__title {
	font-family: var(--zihouse-font-display);
	font-size: clamp(1.05rem, 1.35vw, 1.3rem);
	font-weight: 400;
	line-height: 1.25;
	margin: 0.35rem 0 0.55rem;
}

.zihouse-product-card__meta {
	align-items: center;
	border-top: 1px solid var(--zihouse-color-border);
	padding-top: var(--zihouse-space-2xs);
}

.zihouse-product-card__price {
	font-family: var(--zihouse-font-display);
	font-size: 1.05rem;
	font-weight: 400;
}

/* Crédito de autoría del proyecto en el pie legal. */
.zihouse-footer__credit {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
}

.zihouse-footer__credit strong {
	font-weight: 600;
	color: var(--zihouse-color-ink);
	letter-spacing: 0.01em;
}

/* Condiciones de compra en la ficha de producto -----------------------------
   Tipográfico, sin iconos ni cajas: las barras de confianza con iconitos son
   justo lo que abarata una ficha de producto. Aquí la jerarquía la marcan el
   peso y el color, y una sola línea fina que la separa del botón de comprar. */
.zihouse-terms {
	margin-top: var(--zihouse-space-md);
	padding-top: var(--zihouse-space-sm);
	border-top: 1px solid var(--zihouse-color-border);
}

.zihouse-terms__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--zihouse-space-2xs);
}

.zihouse-terms__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5em;
	line-height: 1.5;
}

.zihouse-terms__label {
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--zihouse-color-ink);
}

.zihouse-terms__note {
	font-size: 0.85rem;
	color: var(--zihouse-color-ink-muted);
}

.zihouse-terms__help {
	margin: var(--zihouse-space-sm) 0 0;
	font-size: 0.88rem;
	color: var(--zihouse-color-ink-muted);
}

.zihouse-terms__help a {
	color: var(--zihouse-color-ink);
	text-underline-offset: 0.25em;
}