/* ==========================================================================
   EVOX — Utilidades de maquetación reutilizables
   --------------------------------------------------------------------------
   Piezas de layout que se aplican añadiendo una clase al elemento en Bricks.

   Este archivo se carga en TODO el sitio a propósito: estas utilidades se
   usan en plantillas que no son la tienda (portada, páginas de contenido),
   y limitarlas a la tienda fue justo lo que hizo que no se aplicaran.

   Sobre los !important: Bricks imprime los estilos de cada elemento con su ID
   único (#brxe-xxxxx), que gana a cualquier selector de clase. Sin ellos, en
   cuanto tocas Display, Gap o Width en el panel de Bricks, el ajuste del panel
   pisa estas reglas y la maquetación se rompe. Se marcan SOLO las propiedades
   estructurales; colores, tamaños y espaciados siguen siendo tuyos.
   ========================================================================== */

/* ==========================================================================
   CARRUSEL DE CATEGORÍAS
   --------------------------------------------------------------------------
   Estructura esperada en Bricks:

     Container  .evox-cat-row
     └─ Div     .evox-cat-rail    ← dentro va el Query Loop de categorías

   Las cards llevan ancho FIJO y el riel hace scroll horizontal cuando no
   entran. Así da igual cuántas categorías haya: las cards siempre miden lo
   mismo y nunca se aprietan para que quepan todas.
   ========================================================================== */

.evox-cat-row {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch;
	gap: 16px;
	/*
	 * Aire lateral del carrusel. Va aquí y no en el panel de Bricks porque un
	 * contenedor con scroll horizontal SE COME su padding derecho al
	 * desplazarse: la última card queda pegada al borde. Con esta variable
	 * más el ::after de abajo, el aire se respeta a ambos lados.
	 *
	 * Para cambiarlo, en el Custom CSS de la fila:
	 *     %root% { --evox-cat-pad: 24px; }
	 */
	padding-left: var(--evox-cat-pad, 16px);
	scroll-padding-left: var(--evox-cat-pad, 16px);
	padding-right: 0;
}
/* El "tope" que devuelve el aire de la derecha al llegar al final del scroll. */
.evox-cat-row::after {
	content: '';
	flex: 0 0 var(--evox-cat-pad, 16px);
}

.evox-cat-rail {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 16px;
	overflow-x: auto !important;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/*
	 * ESTO ES LO QUE HACE QUE FUNCIONE. Un elemento flex no se encoge por
	 * debajo del tamaño de su contenido salvo que se le permita con
	 * min-width: 0. Sin esta línea el riel se estira con TODAS las cards,
	 * empuja al bloque lateral fuera del contenedor y aparece scroll
	 * horizontal en toda la página.
	 */
	flex: 1 1 0 !important;
	min-width: 0 !important;
}
.evox-cat-rail::-webkit-scrollbar {
	display: none;
}

/* Cada card del riel: ancho fijo, sin encogerse. */
.evox-cat-rail > * {
	flex: 0 0 260px !important;
	scroll-snap-align: start;
}


@media (max-width: 767px) {
	/* En móvil todo va dentro del mismo riel deslizable: se ve una card
	   completa y un adelanto de la siguiente, que es la señal de que hay
	   más para deslizar. */
	.evox-cat-row {
		overflow-x: auto !important;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}
	.evox-cat-row::-webkit-scrollbar {
		display: none;
	}
	.evox-cat-rail {
		overflow: visible !important; /* el scroll pasa a ser el de la fila */
		flex: 0 0 auto !important;
	}
	.evox-cat-rail > * {
		flex: 0 0 78vw !important;
		max-width: 300px;
	}
}

/* --------------------------------------------------------------------------
   VISIBILIDAD POR CONTEXTO — sin depender de las Conditions de Bricks

   Añade la clase `evox-solo-sillas` al elemento que solo deba verse cuando
   el visitante está en la categoría Sillas o en alguna de sus subcategorías.
   Funciona esté donde esté: dentro de la grilla de productos, en una sección
   suelta o en el sidebar.

   PHP marca el <body> con `evox-en-sillas` / `evox-en-tienda` según el
   contexto (ver includes/catalog.php).

   Se hace así porque las Conditions con {echo:...} dependen de que la
   ejecución de funciones esté habilitada en el sitio, y cuando no lo está
   fallan en silencio: la condición devuelve vacío y el bloque desaparece sin
   ningún aviso.

   OJO con la lógica invertida: se OCULTA cuando NO estamos en sillas, en vez
   de ocultar siempre y mostrar en sillas. Así, en las páginas donde sí debe
   verse no se aplica ninguna regla nuestra y el `display` que le hayas puesto
   en Bricks (grid, flex, lo que sea) queda intacto.
   -------------------------------------------------------------------------- */

body:not(.evox-en-sillas) .evox-solo-sillas {
	display: none !important;
}

/* Variante que además se muestra en la página Productos (raíz de la tienda). */
body:not(.evox-en-sillas):not(.evox-en-tienda) .evox-solo-sillas-tienda {
	display: none !important;
}