/* ═══════════════════════════════════════════════════════════════════════════
   MODO BRUTALISTA — PRUEBA REVERSIBLE

   Qué es: una capa que se carga LA ÚLTIMA y solo redefine variables y un
   puñado de componentes. No toca ni una línea del CSS original.

   Para quitarlo: `zihouse_modo_brutal()` en functions.php devuelve false y este
   fichero deja de encolarse. La web vuelve exactamente a donde estaba.

   Qué cambia, en una frase: se van las esquinas redondeadas, se van las
   sombras, el aire se recorta y las fichas se pegan unas a otras con una línea
   de por medio, que es como se lee una rejilla en Sklum.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
	/* ── Nada redondo ────────────────────────────────────────────────────
	   El redondeo es lo que más suaviza una rejilla. Al cuadrarlo todo, las
	   imágenes pasan a leerse como bloques y la página gana contundencia. */
	--zihouse-radius-sm: 0;
	--zihouse-radius-md: 0;
	--zihouse-radius-lg: 0;
	--zihouse-radius-pill: 0;
	--zihouse-radius-media: 0;
	--zihouse-radius-media-sm: 0;
	--zihouse-radius-control: 0;

	/* ── Sin sombras ─────────────────────────────────────────────────────
	   La sombra finge profundidad. El brutalismo no finge: o hay un borde o
	   no hay nada. */
	--zihouse-shadow-sm: none;
	--zihouse-shadow-md: none;
	--zihouse-shadow-lg: none;

	/* ── El aire, recortado ──────────────────────────────────────────────
	   La escala entera sigue siendo proporcional —importa que las relaciones
	   se mantengan—, pero los pasos grandes bajan a poco más de la mitad. Son
	   los que dejaban esos huecos de pantalla y media entre secciones. */
	--zihouse-space-3xs: calc(var(--zihouse-u) * 0.2);
	--zihouse-space-2xs: calc(var(--zihouse-u) * 0.35);
	--zihouse-space-xs:  calc(var(--zihouse-u) * 0.5);
	--zihouse-space-sm:  calc(var(--zihouse-u) * 0.7);
	--zihouse-space-md:  calc(var(--zihouse-u) * 1);
	--zihouse-space-lg:  calc(var(--zihouse-u) * 1.4);
	--zihouse-space-xl:  calc(var(--zihouse-u) * 2);
	--zihouse-space-2xl: calc(var(--zihouse-u) * 3);
	--zihouse-space-3xl: calc(var(--zihouse-u) * 4);
}

@media (max-width: 767px) {
	:root {
		--zihouse-space-lg:  calc(var(--zihouse-u) * 1.1);
		--zihouse-space-xl:  calc(var(--zihouse-u) * 1.5);
		--zihouse-space-2xl: calc(var(--zihouse-u) * 1.6);
		--zihouse-space-3xl: calc(var(--zihouse-u) * 1.9);
	}
}

/* ── La rejilla: sin separación y sin líneas ─────────────────────────────
   Se probó con una línea de un píxel entre fichas, a modo de cuadrícula. La
   tienda la quitó: encierra cada foto en su casilla y le resta justo lo que se
   buscaba, que es que las imágenes manden.

   Sin línea y sin hueco, las fotos se tocan y la rejilla se lee como un muro. */
.products,
.zihouse-grid--productos {
	gap: 0 !important;
	border: 0 !important;
}

.products > li,
.products .zihouse-product-card,
.zihouse-grid--productos > * {
	border: 0 !important;
}

.zihouse-product-card {
	border-radius: 0;
	box-shadow: none;
	padding: var(--zihouse-space-sm);
	background: transparent;
	transition: background 0.18s ease;
}

.zihouse-product-card:hover {
	background: var(--zihouse-color-surface-2, #f3f0eb);
}

/* La foto, a cuadro y sin marco. */
.zihouse-product-card__frame,
.zihouse-product-card__media,
.zihouse-product-card__media img,
.zi-media,
.zi-media--card {
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* ── Tipografía de ficha: compacta y en versal ───────────────────────── */
.zihouse-product-card__brand {
	font-size: 0.62rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.zihouse-product-card__title {
	font-family: var(--zihouse-font-body);
	font-size: 0.82rem;
	line-height: 1.3;
	letter-spacing: 0.01em;
	text-transform: none;
}

.zihouse-product-card__price {
	font-family: var(--zihouse-font-body);
	font-size: 0.86rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* ── Botones y controles: rectángulos ────────────────────────────────── */
.zihouse-btn,
.button,
.wp-element-button,
input[type="submit"],
.zihouse-product-card__cta,
select,
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea {
	border-radius: 0 !important;
}

.zihouse-btn,
.button,
.wp-element-button {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.72rem;
	font-weight: 600;
}

/* ── El hero de categoría, apretado ──────────────────────────────────── */
.zihouse-category-hero {
	align-items: start;
	padding-top: var(--zihouse-space-xs);
	padding-bottom: var(--zihouse-space-md);
	margin-bottom: var(--zihouse-space-md);
	gap: var(--zihouse-space-md);
}

.zihouse-category-hero__media,
.zihouse-category-hero__media img {
	border-radius: 0 !important;
}

/* ── Secciones: menos aire por arriba ──────────────────────────────────
   En la portada NO. Ahi el hero va pegado a la cabecera y ocupa toda la
   pantalla: cualquier relleno por arriba lo empuja hacia abajo y deja asomar el
   fondo del body como una franja clara sobre la foto. Se vio en un telefono en
   cuanto se subio. */
body:not(.home) .zihouse-main {
	padding-top: var(--zihouse-space-md) !important;
}

.zihouse-section,
.zihouse-seo,
section[class*="zihouse-"] {
	padding-block: var(--zihouse-space-lg);
}

/* ── Nada de tarjetas flotantes en el resto de bloques ───────────────── */
.zihouse-card,
.zihouse-tile,
.zihouse-seo-tipo,
.zihouse-seo-marca,
.zihouse-faqcard,
.zihouse-related__track > * {
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Las fotos de ambiente y de categoría, también a cuadro. */
.zihouse-cat-tile img,
.zihouse-seo-tipo__media,
.zihouse-seo-tipo__media img,
figure img,
.wp-block-image img {
	border-radius: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SEGUNDA PASADA · LO QUE PIDIO LA TIENDA AL VERLO

   1. El carril de categorias, de borde a borde y con piezas pequenas.
   2. La foto de producto, mas grande: que llene la celda.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · El carril de navegacion, a sangre ──────────────────────────────
   Estaba encajado dentro del contenedor y con piezas de hasta 15 rem, asi que
   cabian cinco y se acababa. Sklum lo resuelve al reves: rompe el margen, hace
   las piezas pequenas y deja que la fila corra. Asi se ve de un vistazo todo lo
   que hay dentro de la seccion, que es para lo que existe el bloque. */
.zihouse-cluster {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-bottom: var(--zihouse-space-lg);
}

.zihouse-cluster__head {
	padding-inline: var(--zihouse-container-pad);
	margin-bottom: var(--zihouse-space-sm);
}

/* Se anula el modo rejilla: siempre carril, haya tres piezas o veinte. */
.zihouse-cluster__track,
.zihouse-cluster--n1 .zihouse-cluster__track,
.zihouse-cluster--n2 .zihouse-cluster__track,
.zihouse-cluster--n3 .zihouse-cluster__track,
.zihouse-cluster--n4 .zihouse-cluster__track,
.zihouse-cluster--n5 .zihouse-cluster__track,
.zihouse-cluster--n6 .zihouse-cluster__track {
	grid-auto-columns: clamp(7.5rem, 10vw, 9.5rem);
	gap: 2px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	padding-inline: var(--zihouse-container-pad);
	padding-bottom: 0;
	/* Sin esto el snap pega la primera pieza al borde de la pantalla y se come
	   el margen que acabamos de poner: el snapport tiene que respetarlo. */
	scroll-padding-inline: var(--zihouse-container-pad);
	-webkit-overflow-scrolling: touch;
}

/* Cuadrada y sin aire: la pieza es un bloque, no una tarjeta. */
.zihouse-cluster__media {
	aspect-ratio: 1 / 1;
	border-radius: 0 !important;
	margin-bottom: var(--zihouse-space-2xs);
	background: var(--zihouse-color-surface-2, #f1eee9);
}

.zihouse-cluster__label {
	font-size: 0.72rem;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0.01em;
}

@media (max-width: 767px) {
	.zihouse-cluster__track,
	.zihouse-cluster--n6 .zihouse-cluster__track {
		grid-auto-columns: 6.5rem;
	}
	.zihouse-cluster__label { font-size: 0.68rem; }
}

/* ── 2 · La foto de producto, que llene la celda ────────────────────────
   La tarjeta traia un acolchado por dentro y la foto se quedaba pequena en
   medio de su propio hueco. Se le quita el acolchado a la celda y se le pone
   solo al texto: la imagen pasa a tocar las cuatro lineas de la rejilla, que es
   lo que hace que una rejilla se lea como un muro y no como un tablero. */
.zihouse-product-card {
	padding: 0;
}

.zihouse-product-card__frame {
	padding: 0;
	border: 0;
	background: none;
}

.zihouse-product-card__media,
.zi-media--card {
	--zi-media-ratio: 1 / 1;
	aspect-ratio: 1 / 1 !important;
	width: 100%;
	margin: 0;
	background: var(--zihouse-color-surface-2, #f1eee9);
}

.woocommerce ul.products .zihouse-product-card__media {
	aspect-ratio: 1 / 1 !important;
}

.zihouse-product-card__media img,
.zi-media--card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* El texto, pegado debajo y con su propio margen. */
.zihouse-product-card__line,
.zihouse-product-card__title,
.zihouse-product-card__price,
.zihouse-product-card__brand,
.zihouse-product-card__support {
	padding-inline: var(--zihouse-space-2xs);
}

.zihouse-product-card__line {
	margin-top: var(--zihouse-space-2xs);
}

.zihouse-product-card__support {
	padding-bottom: var(--zihouse-space-2xs);
}

/* Con la foto a sangre, la rejilla admite una columna mas. */
@media (min-width: 1200px) {
	.woocommerce ul.products,
	.products.columns-3,
	.products.columns-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}


/* ═══════════════════════════════════════════════════════════════════════════
   TERCERA PASADA · LA REJILLA A SANGRE

   Lo que faltaba, y era lo importante. La rejilla vivia dentro del contenedor,
   que topa en 1.600 px. A 1.440 no se nota porque la pantalla es mas estrecha
   que el tope, pero en un monitor de 2.000 px quedaban DOSCIENTOS pixeles de
   margen a cada lado y la foto se quedaba clavada en 398 px, midiera lo que
   midiera la pantalla.

   Sklum no topa: la rejilla ocupa el ancho del navegador, sea cual sea. A 2.000
   px eso son 500 px de foto en vez de 398.

   El truco del 100vw con margen negativo saca el bloque del contenedor sin
   tocar la plantilla.
   ═══════════════════════════════════════════════════════════════════════════ */

.woocommerce ul.products,
ul.products,
.products,
.zihouse-grid--productos {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	border: 0 !important;
}

/* La barra de control y el resto del contenido siguen dentro del contenedor:
   solo la rejilla se va a los bordes. */

/* Cuatro columnas a partir de tablet grande, cinco en monitores muy anchos.
   Sklum mantiene cuatro y cada pieza crece; a partir de 1.900 px una quinta
   evita que la foto se vuelva desproporcionada. */
@media (min-width: 1000px) {
	.woocommerce ul.products,
	.products.columns-3,
	.products.columns-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

/* Nada de una quinta columna en monitores anchos: meterla achica la foto justo
   donde hay sitio para que crezca. Cuatro siempre, y que cada pieza mande. A
   2.000 px eso son 500 px de foto. */

/* El texto de cada ficha, con el mismo aire que el borde de la pantalla. */
.zihouse-product-card__line,
.zihouse-product-card__title,
.zihouse-product-card__price,
.zihouse-product-card__brand,
.zihouse-product-card__support {
	padding-inline: var(--zihouse-space-xs);
}

/* Y el carrusel de relacionados de la ficha, igual. */
.zihouse-related__track {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-inline: var(--zihouse-container-pad);
	scroll-padding-inline: var(--zihouse-container-pad);
}