/* ============================================================================
   FM · /tienda/ con el panel de filtros WOOF en una columna izquierda  ·  10-nov-2026
   Solo body.woocommerce-shop (lo carga inc/fm-tienda-woof.php cuando is_shop()).
   El HTML no se reordena: rejilla sobre #left-area con ÁREAS POR CLASE.
   - No vale «grid-row: 1 / -1» sin filas explícitas: -1 es la última línea EXPLÍCITA y el panel
     ocuparía solo la fila 1 (hueco enorme bajo las migas). Por eso hay filas con nombre y una
     última fila «resto» 1fr que absorbe la altura del panel cuando el listado es corto.
   - Contador y orden comparten la celda «barra», como antes (uno a cada lado).
   - Lo que no tenga área (p. ej. el aviso de «sin resultados») cae en la columna 2.
   Colores: paleta global de la cabecera 2026 (:root en fm-header-2026.css).
   ============================================================================ */
@media (min-width: 981px) {
	body.woocommerce-shop #left-area {
		display: grid;
		grid-template-columns: 280px minmax(0, 1fr);
		grid-template-rows: auto auto auto auto auto auto auto auto 1fr;
		grid-template-areas:
			"filtros migas"
			"filtros cabecera"
			"filtros woof1"
			"filtros woof2"
			"filtros avisos"
			"filtros barra"
			"filtros lista"
			"filtros pag"
			"filtros resto";
		column-gap: 40px;
		row-gap: 0;
	}
	body.woocommerce-shop #left-area > * { grid-column: 2; }
	body.woocommerce-shop #left-area > .fm-filtros {
		grid-area: filtros;
		align-self: start;
		position: sticky;
		top: calc(var(--fm-h-top, 0px) + var(--fm-h-alto, 112px) + 20px);
		max-height: calc(100vh - var(--fm-h-top, 0px) - var(--fm-h-alto, 112px) - 40px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	body.woocommerce-shop #left-area > .woocommerce-breadcrumb { grid-area: migas; }
	body.woocommerce-shop #left-area > .woocommerce-products-header { grid-area: cabecera; }
	body.woocommerce-shop #left-area > .woof_products_top_panel_content { grid-area: woof1; }
	body.woocommerce-shop #left-area > .woof_products_top_panel { grid-area: woof2; }
	body.woocommerce-shop #left-area > .woocommerce-notices-wrapper { grid-area: avisos; }
	body.woocommerce-shop #left-area > .woocommerce-result-count { grid-area: barra; justify-self: start; align-self: center; float: none; margin: 0 0 20px; }
	body.woocommerce-shop #left-area > .woocommerce-ordering { grid-area: barra; justify-self: end; align-self: center; float: none; margin: 0 0 20px; }
	body.woocommerce-shop #left-area > ul.products { grid-area: lista; }
	body.woocommerce-shop #left-area > .woocommerce-pagination { grid-area: pag; }
	/* sticky: #page-container lleva overflow-y:hidden (regla del CLS, style.css) y eso lo convierte en
	   contenedor de desplazamiento: el panel no se pegaría a la ventana. clip recorta igual sin serlo. */
	body.woocommerce-shop #page-container { overflow-y: clip !important; }
	/* y el body: Divi le pone overflow-x:hidden en línea (→ overflow-y:auto). Comprobado en Chrome (10-nov):
	   sin este clip el panel no se pega (queda a la altura de las migas); con él, sí. */
	body.woocommerce-shop { overflow-x: clip !important; }

	/* 9 por página → 3×3, sin fila coja */
	body.woocommerce-shop #left-area > ul.products {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 32px;
		row-gap: 40px;
		margin-bottom: 40px;
	}
	body.woocommerce-shop #left-area > ul.products::before,
	body.woocommerce-shop #left-area > ul.products::after { content: none !important; display: none !important; }
	body.woocommerce-shop #left-area > ul.products > li.product { float: none !important; width: auto !important; margin: 0 !important; clear: none !important; }
}
@media (max-width: 980px) {
	body.woocommerce-shop #left-area { display: flex; flex-direction: column; }
	body.woocommerce-shop #left-area > .woocommerce-breadcrumb { order: 1; }
	body.woocommerce-shop #left-area > .woocommerce-products-header { order: 2; }
	body.woocommerce-shop #left-area > .fm-filtros { order: 3; margin-bottom: 24px; }
	body.woocommerce-shop #left-area > * { order: 4; }
}

/* ---- el panel ----
   Escritorio: la caja es el envoltorio. Móvil: WOOF (mobile_mode) esconde el panel tras «Abrir el filtro»;
   la caja va en el propio div.woof para que no quede un recuadro vacío mientras está cerrado. */
@media (max-width: 980px) {
	body.woocommerce-shop .fm-filtros { background: none !important; border: 0 !important; padding: 0 !important; }
	body.woocommerce-shop .fm-filtros div.woof { background: var(--fm-arena, #E9E3D8); border: 1px solid var(--fm-tierra, #8A6F55); padding: 20px 20px 8px; box-sizing: border-box; }
}
body.woocommerce-shop .fm-filtros .woof_reset_search_form,
body.woocommerce-shop .fm-filtros .woof_submit_search_form {
	background: transparent !important;
	border: 1px solid var(--fm-tierra, #8A6F55) !important;
	color: var(--fm-tierra-texto, #6B533F) !important;
	font-size: 13px !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 8px 16px !important;
	border-radius: 0 !important;
}
body.woocommerce-shop .fm-filtros .woof_reset_search_form:hover,
body.woocommerce-shop .fm-filtros .woof_submit_search_form:hover { background: var(--fm-fondo-cabecera, #DCCFBE) !important; }
body.woocommerce-shop .fm-filtros {
	background: var(--fm-arena, #E9E3D8);
	border: 1px solid var(--fm-tierra, #8A6F55);
	color: var(--fm-texto, #2F2A25);
	padding: 20px 20px 8px;
	box-sizing: border-box;
}
body.woocommerce-shop .fm-filtros .woof_container {
	border-bottom: 1px solid var(--fm-piedra, #A89B88);
	padding: 0 0 14px;
	margin: 0 0 14px;
}
body.woocommerce-shop .fm-filtros .woof_container:last-of-type { border-bottom: 0; }
body.woocommerce-shop .fm-filtros .woof_container h4 {
	color: var(--fm-tierra-texto, #6B533F);
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 600;
	margin: 0 0 10px;
}
body.woocommerce-shop .fm-filtros label,
body.woocommerce-shop .fm-filtros .woof_list li { color: var(--fm-texto, #2F2A25); }
body.woocommerce-shop .fm-filtros input[type="search"],
body.woocommerce-shop .fm-filtros input[type="text"],
body.woocommerce-shop .fm-filtros select,
body.woocommerce-shop .fm-filtros .chosen-container .chosen-single,
body.woocommerce-shop .fm-filtros .select2-selection {
	background: var(--fm-blanco, #FFFFFF);
	border: 1px solid var(--fm-piedra, #A89B88);
	color: var(--fm-texto, #2F2A25);
	max-width: 100%;
}
body.woocommerce-shop .fm-filtros .chosen-container,
body.woocommerce-shop .fm-filtros select { width: 100% !important; }