/*
 * Listado de productos del nuevo diseño (resources/views/v2/inicio.blade.php):
 * categoría, búsqueda y favoritos. Págs. 2–15 del PDF.
 * Colores y fuentes: tokens.css. Tarjeta de producto: app.css.
 * Mobile-first.
 */

.tema-v2 .jo-listado { padding-top: 24px; }
.tema-v2 .jo-listado__lema { display: none; }
.tema-v2 .jo-oculto { display: none !important; }

/* ---------------------------------------------------------------- Filtros
   Los de la plantilla (layouts.public_filtros), en el tono del diseño:
   botones pequeños blancos, casi rectos. */
.tema-v2 .jo-listado__filtros .tf-shop-control { justify-content: flex-start !important; flex-wrap: wrap; margin-bottom: 8px; }
.tema-v2 .jo-listado__filtros .tf-control-layout-wrap { justify-content: flex-start !important; }
.tema-v2 .jo-listado__filtros .tf-control-layout { gap: 4px; }
.tema-v2 .jo-listado__filtros .tf-control-layout .item { color: var(--jo-texto-tenue); }
.tema-v2 .jo-listado__filtros .tf-view-layout-switch.active .item { color: var(--jo-texto); }
.tema-v2 .filtros-atributo-inline .filtro-summary {
	background: var(--jo-blanco);
	border-color: transparent;
	border-radius: var(--jo-radio);
	font-size: var(--jo-texto-xs);
	font-weight: 600;
	padding: 6px 10px;
}
.tema-v2 .filtros-atributo-inline .filtro-cuenta { color: var(--jo-texto-tenue); font-weight: 400; }
.tema-v2 .filtros-atributo-inline .filtro-grupo[open] > .filtro-summary,
.tema-v2 .filtros-atributo-inline .filtro-grupo:hover > .filtro-summary { border-color: var(--jo-texto); }
.tema-v2 .filtros-atributo-inline .filtro-opciones { border-radius: var(--jo-radio); }
.tema-v2 .filtro-botones-mobile .tf-btn-filter { background: var(--jo-blanco); border: 0; border-radius: var(--jo-radio); }
.tema-v2 .filtros-activos { margin: 4px 0 0; }

/* ---------------------------------------------------------------- Título */
.tema-v2 .jo-listado__titulo {
	font-family: var(--jo-fuente-titulos);
	font-size: var(--jo-titulo-m);
	line-height: 1.1;
	margin: 16px 0 20px;
}
/* «Alquiler de sillas.»: del tamaño de los títulos de categoría de la portada
   (.por-categoria__titulo: 20, 22 y 25 px; diseñador, 30-10-2026). */
.tema-v2 .jo-listado__titulo--categoria { font-size: 20px; margin-bottom: 6px; }
/* Descripción de la categoría, bajo el título (Salva, 30-10-2026). */
.tema-v2 .jo-listado__intro { max-width: 80ch; margin: 0 0 24px; font-size: var(--jo-texto-m); line-height: 1.45; color: var(--jo-texto); }
.tema-v2 .jo-listado__intro p { margin: 0 0 .6em; }
/* Las descripciones guardadas traen colores puestos a mano (gris): fuera. */
.tema-v2 .jo-listado__intro [style] { color: inherit !important; }
.tema-v2 .jo-listado__intro > :last-child { margin-bottom: 0; }
/* Banner de promoción de la categoría: la imagen completa del diseñador (con su texto). */
.tema-v2 .jo-listado__banner { display: block; margin: 48px 0 40px; } /* abajo: que el sello del pie no lo pise */
.tema-v2 .jo-listado__banner img { display: block; width: 100%; height: auto; }

/* ---------------------------------------------------------------- Rejilla
   Columnas minmax(0, 1fr): las de la plantilla (1fr) no encogen por debajo
   del nombre del producto y desbordan el móvil. data-grid lo cambian los
   botones de densidad; en móvil siempre 2. */
/* Menos separación entre filas (diseñador, 30-10-2026): la rejilla separa
   24 px y la tarjeta pierde el margen inferior de 30 px de la plantilla. */
.tema-v2 .jo-listado__rejilla[data-grid] { display: grid; gap: 24px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tema-v2 .jo-listado__rejilla .card-product { margin-bottom: 0; }

.tema-v2 .jo-listado__vacio { padding: 48px 0; color: var(--jo-texto-suave); }
.tema-v2 .jo-listado__vacio .jo-boton { margin-top: 8px; }

@media (min-width: 768px) {
	.tema-v2 .jo-listado__rejilla[data-grid="grid-3"],
	.tema-v2 .jo-listado__rejilla[data-grid="grid-4"],
	.tema-v2 .jo-listado__rejilla[data-grid="grid-6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.tema-v2 .jo-listado__titulo { font-size: var(--jo-titulo-l); }
	.tema-v2 .jo-listado__titulo--categoria { font-size: 22px; }
}

/* ---------------------------------------------------------------- Escritorio: barra lateral fija */
@media (min-width: 1100px) {
	.tema-v2 .jo-listado { display: grid; grid-template-columns: var(--jo-ancho-barra) minmax(0, 1fr); gap: 48px; align-items: start; }
	.tema-v2 .jo-listado__lateral { position: sticky; top: calc(var(--jo-alto-cabecera) + 24px); }
	.tema-v2 .jo-listado__lateral .jo-barra { position: static; }
	.tema-v2 .jo-listado__lema {
		display: block;
		margin: 0 0 22px;
		font-family: var(--jo-fuente-titulos);
		font-size: var(--jo-texto-s);
		line-height: 1.25;
	}
	.tema-v2 .jo-listado__lema em { font-style: italic; }
	.tema-v2 .jo-listado__titulo--categoria { font-size: 25px; }

	.tema-v2 .jo-listado__rejilla[data-grid="grid-2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tema-v2 .jo-listado__rejilla[data-grid="grid-3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.tema-v2 .jo-listado__rejilla[data-grid="grid-4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.tema-v2 .jo-listado__rejilla[data-grid="grid-6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px 12px; }
}