/* ============================================================================
   FM · /tienda/ a lo ancho  ·  11-nov-2026
   Solo body.fm-tienda-ancho (clase y carga desde inc/fm-tienda-ancho.php: is_shop() y no búsqueda).
   Va DESPUÉS de css/fm-tienda-filtros.css (columna izquierda del 10-nov) y solo cambia anchos y rejilla.
   - Contenedor: Divi lo deja en width:80% / max-width:1080px → hasta 1600 px de contenido con márgenes
     de 48 px (≥1440), 32 px (768–1439) y 16 px (móvil).
   - Panel de filtros: 280 px (981–1439) y 300 px (≥1440). ≤980 px, encima y plegable como antes.
   - Rejilla: 5 columnas ≥1680 · 4 entre 1100 y 1679 · 3 entre 768 y 1099 · 2 en móvil. 20 por página
     (pre_get_posts en el .php) → filas completas con 4 y con 5 columnas.
   - Tarjetas de igual altura; foto entera (contain) en una caja 1:1 blanca, como Outlet. La caja reserva
     el alto antes de que llegue la foto: sin ella, cada lote de Load More movía la rejilla (CLS 0,04–0,095).
   ============================================================================ */
body.fm-tienda-ancho #main-content > .container {
	width: 100%;
	max-width: 1696px;
	padding-left: 48px;
	padding-right: 48px;
	box-sizing: border-box;
}
@media (max-width: 1439px) {
	body.fm-tienda-ancho #main-content > .container { max-width: 1664px; padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 767px) {
	body.fm-tienda-ancho #main-content > .container { max-width: none; padding-left: 16px; padding-right: 16px; }
}

/* columna del panel */
@media (min-width: 981px) {
	body.fm-tienda-ancho #left-area { grid-template-columns: 280px minmax(0, 1fr); column-gap: 32px; }
}
@media (min-width: 1440px) {
	body.fm-tienda-ancho #left-area { grid-template-columns: 300px minmax(0, 1fr); column-gap: 40px; }
}
/* Árbol de categorías: cada elemento es casilla | nombre | «+», y los hijos debajo a todo lo ancho.
   WOOF pinta las hojas con display:inline-block en línea y el label también inline-block: con un nombre
   largo («Hidromasaje, SPA & sauna», «Revestimientos y pavimentos») la casilla se quedaba sola en una
   línea, el nombre en la siguiente y el «+» en una tercera. Así el nombre parte línea a la derecha de su casilla. */
body.fm-tienda-ancho .fm-filtros .woof_list li {
	display: grid !important;
	grid-template-columns: 22px minmax(0, 1fr) auto; /* 22 = casilla de iCheck: la nativa (13) no deja hueco al cambiarla */
	column-gap: 8px;
	align-items: start;
	margin: 0 0 6px;
}
body.fm-tienda-ancho .fm-filtros .woof_list li > .icheckbox_square-orange,
body.fm-tienda-ancho .fm-filtros .woof_list li > input[type="checkbox"] { grid-column: 1; margin: 0; }
body.fm-tienda-ancho .fm-filtros .woof_list li > label {
	grid-column: 2; display: block; margin: 0 !important; padding: 0;
	white-space: normal; overflow-wrap: anywhere; line-height: 1.35;
}
body.fm-tienda-ancho .fm-filtros .woof_list li > a.woof_childs_list_opener { grid-column: 3; }
body.fm-tienda-ancho .fm-filtros .woof_list li > ul { grid-column: 1 / -1; margin-top: 6px; }

/* rejilla */
body.fm-tienda-ancho #left-area > ul.products {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 16px;
	row-gap: 32px;
	margin: 0 0 40px;
	padding: 0;
	align-items: stretch;
}
@media (min-width: 768px)  { body.fm-tienda-ancho #left-area > ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; } }
@media (min-width: 1100px) { body.fm-tienda-ancho #left-area > ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* 5 columnas solo desde 1680 (11-nov, tarde): a 1440 las tarjetas se quedaban en 182 px; con 4 van de 233 a 293 */
@media (min-width: 1680px) { body.fm-tienda-ancho #left-area > ul.products { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
body.fm-tienda-ancho #left-area > ul.products::before,
body.fm-tienda-ancho #left-area > ul.products::after { content: none !important; display: none !important; }
body.fm-tienda-ancho #left-area > ul.products > li.product {
	float: none !important; width: auto !important; margin: 0 !important; clear: none !important;
	display: flex; flex-direction: column;
}
body.fm-tienda-ancho #left-area > ul.products > li.product > a.woocommerce-LoopProduct-link { display: flex; flex-direction: column; flex: 1 1 auto; }

/* caja de imagen 1:1: la foto entera, centrada, sobre blanco */
body.fm-tienda-ancho #left-area > ul.products li.product .et_shop_image {
	display: block; position: relative; aspect-ratio: 1 / 1; background: #fff; overflow: hidden; margin: 0 0 14px;
}
body.fm-tienda-ancho #left-area > ul.products li.product .et_shop_image img {
	position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; max-width: none;
	margin: 0 !important; object-fit: contain; object-position: center;
}
body.fm-tienda-ancho #left-area > ul.products li.product .woocommerce-loop-product__title {
	font-size: 15px; line-height: 1.35; padding: 0; margin: 0;
}
@media (max-width: 767px) {
	body.fm-tienda-ancho #left-area > ul.products li.product .woocommerce-loop-product__title { font-size: 14px; }
}
/* lo que hubiera detrás del título (precio, botón) se va abajo del todo: alineado entre tarjetas */
body.fm-tienda-ancho #left-area > ul.products > li.product > a.woocommerce-LoopProduct-link ~ * { margin-top: auto; }

/* Load More (BeRocket) mete su spinner div.lmp_products_loading (y, si lo hubiera, el botón) como hermano de la
   lista dentro de #left-area. Sin área, la rejilla del 10-nov lo colocaba en la primera fila libre de la
   columna 2 —woof1/avisos, ENCIMA de la lista— y la empujaba 56 px al empezar cada lote y la devolvía al
   acabar (CLS 0,04–0,13 recorriendo la tienda). Va en la fila de la paginación, debajo de la lista. */
@media (min-width: 981px) {
	body.fm-tienda-ancho #left-area > .lmp_products_loading,
	body.fm-tienda-ancho #left-area > .lmp_load_more_button { grid-area: pag; }
}

/* CLS de carga en móvil/tableta (≤980 px el panel y el contador van encima de la lista):
   1) Divi da p.woocommerce-result-count{padding-bottom:40px} y otra hoja que llega más tarde lo deja en 0:
      mientras el HTML aún se analizaba el contador medía 67 px y la lista bajaba 40 px de golpe (768: 3/6 cargas).
      Se fija el estado final desde el primer pintado. */
body.fm-tienda-ancho #left-area > .woocommerce-result-count { padding-bottom: 0; }
/* 2) En móvil WOOF imprime el botón «Abrir el filtro» dentro del panel (oculto) y su JS lo mueve a la cabecera
      del listado (+38 px). Si eso pasaba después del primer pintado, la lista bajaba (390: 1/2 cargas).
      Se reserva el hueco en la cabecera mientras el botón exista en la página y aún no esté allí. */
body.fm-tienda-ancho:has(.woof_show_mobile_filter) .woocommerce-products-header:not(:has(.woof_show_mobile_filter))::after {
	content: ""; display: block; height: 38px;
}