/* Catálogo / archivo de producto — loaded on shop + category/tag archives.
   Reconstruido para acercarse a la referencia visual del rediseño de
   catálogo (Manual/Revisiones) manteniendo WooCommerce nativo: los
   filtros siguen siendo los widgets reales de Apariencia → Widgets →
   "Catálogo — Filtros" (categoría, precio, color vía atributo pa_color),
   solo con una piel nueva. */

/* -----------------------------------------------------------------------
   1. Contenedor — mismo .er-container que el resto del sitio (ya vive en
   1280px, dentro del rango 1200-1280 pedido), solo con el padding lateral
   escalonado que pide la referencia en vez del space-8 (32px) plano que
   .er-container usa en el resto del sitio a partir de 768px.
----------------------------------------------------------------------- */
.er-shop-page .er-container { padding-inline: var(--space-4); }
@media (min-width: 768px) { .er-shop-page .er-container { padding-inline: 20px; } }
@media (min-width: 1440px) { .er-shop-page .er-container { padding-inline: 24px; } }

/* -----------------------------------------------------------------------
   2. Cabecera — breadcrumb / H1 / intro, alineados al mismo eje que el
   resto del contenedor (heredado, sin ancho propio).
----------------------------------------------------------------------- */
.er-shop-head { padding: 13px 0 14px; }
.er-shop-head h1 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(2.25rem, 1.9rem + 1.2vw, 3rem); /* 36px → 48px */
	line-height: 1.08;
	color: var(--color-obsidian);
	margin: 0 0 var(--space-2);
}
.er-shop-intro {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--color-text-muted);
	max-width: 32rem;
	margin: 0;
}

/* -----------------------------------------------------------------------
   3. Layout general — sidebar fija + zona de productos.
----------------------------------------------------------------------- */
.er-shop-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; padding-bottom: var(--space-8); align-items: start; }
.er-shop-main { min-width: 0; }

.er-filter-toggle { display: none; }

/* -----------------------------------------------------------------------
   4. Sidebar de filtros — card blanca real, no una lista de enlaces suelta.
----------------------------------------------------------------------- */
.er-shop-sidebar {
	position: sticky;
	top: 96px;
	background: var(--color-white);
	border: 1px solid rgba(23, 21, 21, 0.08);
	border-radius: var(--radius-card);
	padding: 20px;
}
.er-shop-sidebar-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-2);
}
.er-shop-sidebar-head span {
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--color-obsidian);
}
/* "Limpiar filtros" — PHP only prints this link when $_GET actually has a
   price/color filter active (see webER_render_shop_layout), so there's
   no risk of it showing with nothing real to clear. */
.er-shop-clear { font-size: 0.75rem; font-weight: 600; color: var(--color-rose-text); }
.er-filter-close { display: none; }

.er-filter-widget { padding: 14px 0; border-bottom: 1px solid var(--color-border); }
.er-filter-widget:first-child { padding-top: 0; }
.er-filter-widget:last-child { border-bottom: none; padding-bottom: 0; }
.er-filter-title {
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--color-obsidian);
	margin: 0 0 var(--space-3);
}
.er-filter-widget ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 0.8125rem; }
.er-filter-widget ul ul { padding-left: var(--space-4); margin-top: 2px; }
.er-filter-widget .count { color: var(--color-text-muted); font-weight: 400; }

/* Category / attribute list links restyled as elegant checkbox rows —
   these stay real WooCommerce <a> filter links (category archive nav,
   layered nav attribute filter); only the visual is a checkbox, the
   underlying navigation/filtering is untouched. Ancestor classes are the
   real ones WooCommerce outputs on this site (confirmed against actual
   markup) — .er-filter-widget (our own sidebar wrapper), ul.product-categories
   (WC_Widget_Product_Categories) and ul.woocommerce-widget-layered-nav-list
   (WC_Widget_Layered_Nav) — not the widget class names, which aren't
   present on the list itself. */
/* flex-wrap:wrap matters here: a parent category <li> holds <a>, .count
   AND a nested <ul class="children"> as three flex-item siblings (that's
   WP's own wp_list_categories() markup, not something we control) — without
   wrap, the sub-category list squeezed onto the same row as the parent's
   own label instead of dropping to its own line below. */
.er-filter-widget ul.product-categories li,
.er-filter-widget ul.woocommerce-widget-layered-nav-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	min-height: 28px;
}
.er-filter-widget ul.product-categories li > a,
.er-filter-widget ul.woocommerce-widget-layered-nav-list li > a { min-width: 0; }
.er-filter-widget ul.product-categories li > .count,
.er-filter-widget ul.woocommerce-widget-layered-nav-list li > .count { flex: none; white-space: nowrap; }
.er-filter-widget ul.product-categories li > ul.children { flex-basis: 100%; }
.er-filter-widget ul.product-categories li > a,
.er-filter-widget ul.woocommerce-widget-layered-nav-list li > a {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--color-text);
	flex: 1;
}
.er-filter-widget ul.product-categories li > a::before,
.er-filter-widget ul.woocommerce-widget-layered-nav-list li > a::before {
	content: "";
	flex: none;
	width: 15px;
	height: 15px;
	border: 1px solid var(--color-border);
	border-radius: 4px;
	background: var(--color-white);
	transition: background-color 150ms ease, border-color 150ms ease;
}
.er-filter-widget ul.product-categories li.current-cat > a::before,
.er-filter-widget ul.woocommerce-widget-layered-nav-list li.chosen > a::before {
	background-color: var(--color-rose);
	border-color: var(--color-rose);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}
.er-filter-widget ul.product-categories li.current-cat > a,
.er-filter-widget ul.woocommerce-widget-layered-nav-list li.chosen > a { font-weight: 600; color: var(--color-obsidian); }

/* -----------------------------------------------------------------------
   Colores — swatches reales por término (pa_color: amarillo/blanco/rojo/
   rosado ya existentes en el catálogo). WooCommerce core no trae swatches
   de color de fábrica, así que el color de cada círculo se mapea aquí por
   slug del término real — no se inventa ningún color/nombre nuevo.
----------------------------------------------------------------------- */
/* Real markup WooCommerce outputs (no term-slug class to hook, only the
   filter link's own href), confirmed against this site's actual HTML:
   <ul class="woocommerce-widget-layered-nav-list">
     <li class="... wc-layered-nav-term "><a href="?filter_color=amarillo">Amarillo</a> <span class="count">(4)</span></li>
   the color is mapped off that href — still the real term/slug, just
   matched by URL instead of a dedicated class core doesn't provide. */
.er-filter-widget ul.woocommerce-widget-layered-nav-list { flex-direction: row; flex-wrap: wrap; gap: 7px; }
.wc-layered-nav-term { min-height: auto !important; }
.wc-layered-nav-term > a {
	display: block;
	width: 18px; height: 18px;
	border-radius: 50%;
	border: 1px solid rgba(23, 21, 21, 0.12);
	overflow: hidden;
	text-indent: -999px;
	white-space: nowrap;
	padding: 0 !important;
	position: relative;
}
.wc-layered-nav-term > a::before { content: none !important; }
.wc-layered-nav-term > a[href*="filter_color=amarillo"] { background: #E9B51A; }
.wc-layered-nav-term > a[href*="filter_color=blanco"] { background: #FFFFFF; }
.wc-layered-nav-term > a[href*="filter_color=rojo"] { background: #C23B3B; }
.wc-layered-nav-term > a[href*="filter_color=rosado"] { background: #D9899B; }
.wc-layered-nav-term.chosen > a { outline: 2px solid var(--color-rose); outline-offset: 2px; }
.wc-layered-nav-term .count { display: none; } /* el aro de selección ya comunica el estado; el conteo no cabe en 18px */

/* -----------------------------------------------------------------------
   Rango de precio — jQuery UI slider nativo de WooCommerce. El slider es
   el elemento protagonista (fila propia, sin competir con el botón); el
   mínimo y máximo se muestran debajo, uno a cada extremo. El filtrado se
   dispara solo al soltar el slider (ver initPriceFilterAutoSubmit en
   global.js), así que el botón "Filtrar" real de WooCommerce queda oculto
   por JS y solo aparece — como control secundario discreto — si JS no
   carga (ver .er-price-filter-submit más abajo).
----------------------------------------------------------------------- */
.price_slider_wrapper { margin-bottom: var(--space-3); }
.price_slider { position: relative; height: 4px; background: var(--color-soft-rose); border-radius: 999px; margin: var(--space-6) 2px var(--space-4); }
.price_slider .ui-slider-range { position: absolute; height: 100%; background: var(--color-rose); border-radius: 999px; }
.price_slider .ui-slider-handle {
	position: absolute;
	top: 50%;
	width: 15px; height: 15px;
	margin-left: -7.5px;
	background: var(--color-white);
	border: 2px solid var(--color-rose);
	border-radius: 50%;
	transform: translateY(-50%);
	cursor: grab;
	outline: none;
}
.price_slider .ui-slider-handle:hover,
.price_slider .ui-slider-handle:focus-visible { border-color: var(--color-rose-hover); box-shadow: 0 0 0 4px var(--color-soft-rose); }
.price_slider .ui-slider-handle:active { cursor: grabbing; }
.price_slider_amount { display: block; }
.price_slider_amount input[type="text"]#min_price,
.price_slider_amount input[type="text"]#max_price { display: none; }

.er-price-range { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); }
.er-price-range-item { display: flex; flex-direction: column; gap: 2px; }
.er-price-range-item--max { align-items: flex-end; text-align: right; }
.er-price-range-caption { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-text-muted); }
.er-price-range-item .from, .er-price-range-item .to { font-size: 0.9375rem; font-weight: 600; color: var(--color-obsidian); }

/* Fallback visible únicamente sin JS (ver initPriceFilterAutoSubmit) —
   sigue siendo el submit real del <form>, solo restyled como enlace
   discreto en vez de un botón protagonista. */
.er-price-filter-submit {
	display: block;
	margin-top: var(--space-3);
	background: none !important;
	color: var(--color-rose-text) !important;
	border: none !important;
	padding: 0 !important;
	min-height: auto !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	text-decoration: underline;
}

/* -----------------------------------------------------------------------
   Bloque de ayuda WhatsApp — mismo canal ya configurado (webER_whatsapp_url),
   nunca compite en peso visual con "Añadir al carrito".
----------------------------------------------------------------------- */
.er-shop-help {
	margin-top: 12px;
	background: var(--color-soft-rose);
	border-radius: var(--radius-card);
	padding: 18px;
}
.er-shop-help svg { color: var(--color-rose-text); margin-bottom: var(--space-2); }
.er-shop-help strong { display: block; font-size: 0.875rem; margin-bottom: 2px; }
.er-shop-help p { font-size: 0.8125rem; color: var(--color-text-muted); margin: 0 0 var(--space-3); }
.er-shop-help .er-btn { background: var(--color-white); color: var(--color-rose-text) !important; border-color: transparent; width: 100%; font-size: 0.8125rem; }
.er-shop-help .er-btn:hover { background: var(--color-white); color: var(--color-rose-hover) !important; }

/* -----------------------------------------------------------------------
   5. Toolbar — compacta, no una banda gruesa.
----------------------------------------------------------------------- */
.er-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	min-height: 50px;
	margin-bottom: var(--space-6);
	font-size: 0.8125rem;
	color: var(--color-text-muted);
	background: var(--color-ivory);
	border: 1px solid rgba(23, 21, 21, 0.07);
	border-radius: 11px;
	padding: 5px var(--space-4);
}
.er-shop-order { display: flex; align-items: center; gap: var(--space-2); }
.er-shop-order::before { content: "Ordenar por:"; white-space: nowrap; }
/* WooCommerce core fija `.woocommerce .woocommerce-ordering{margin:0 0 1em}`
   (woocommerce.css) — ese margen cuenta como parte de la caja del ítem
   flex, así que align-items:center en .er-shop-order centraba la caja
   CON el margen (select + 13px de margen invisible debajo), no el
   <select> visible en sí, empujándolo ~6px hacia arriba respecto al
   texto "Mostrando los N resultados". Selector con más especificidad
   que la regla del core para poder pisarla sin !important. */
.er-shop-toolbar .er-shop-order .woocommerce-ordering { margin: 0; }
.er-shop-toolbar select {
	width: auto;
	min-height: 42px;
	padding: 0.4em 2.2em 0.4em 0.9em;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-control);
	font-family: var(--font-body);
	font-size: 0.8125rem;
}

/* -----------------------------------------------------------------------
   11. Grid de productos — 3 columnas reales en desktop.
----------------------------------------------------------------------- */
.woocommerce ul.products {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 20px !important;
}

/* -----------------------------------------------------------------------
   21. Paginación
----------------------------------------------------------------------- */
.woocommerce-pagination { margin-top: var(--space-8); }
.woocommerce-pagination .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	list-style: none;
	padding: 0;
	margin: 0;
}
.woocommerce-pagination .page-numbers li { display: flex; }
.woocommerce-pagination .page-numbers .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-obsidian);
	background: transparent;
}
.woocommerce-pagination .page-numbers .page-numbers.current { background: var(--color-rose); color: var(--color-white); }
.woocommerce-pagination .page-numbers .page-numbers:hover:not(.current) { background: var(--color-soft-rose); }
.woocommerce-pagination .page-numbers .next,
.woocommerce-pagination .page-numbers .prev { font-size: 1rem; }

/* -----------------------------------------------------------------------
   22. Trust bar — franja de beneficios entre catálogo y footer.
----------------------------------------------------------------------- */
.er-shop-trust {
	max-width: var(--container-width);
	margin: 0 auto 36px;
	padding-inline: var(--space-4);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-4);
}
@media (min-width: 768px) { .er-shop-trust { padding-inline: 20px; } }
@media (min-width: 1440px) { .er-shop-trust { padding-inline: 24px; } }
.er-shop-trust-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	border: 1px solid rgba(23, 21, 21, 0.08);
	border-radius: var(--radius-card);
	background: var(--color-white);
	padding: 16px;
}
.er-shop-trust-item img { flex: none; }
.er-shop-trust-item strong { display: block; font-size: 0.875rem; margin-bottom: 2px; }
.er-shop-trust-item span { color: var(--color-text-muted); font-size: 0.8125rem; }

.er-empty-state { text-align: center; padding: var(--space-12) 0; }
.er-empty-state .er-btn { margin-top: var(--space-4); }

/* -----------------------------------------------------------------------
   Bloque editorial SEO (pie del catálogo) — después de la franja de
   confianza, antes del footer. Escritorio/tablet ancho: expandido, con
   un max-width legible y las 3 subsecciones en columnas editoriales (sin
   look de card comercial). Mobile: acordeón (ver @media más abajo).
----------------------------------------------------------------------- */
.er-shop-seo {
	max-width: var(--container-width);
	margin: 0 auto 60px;
	padding-inline: var(--space-4);
}
@media (min-width: 768px) { .er-shop-seo { padding-inline: 20px; } }
@media (min-width: 1440px) { .er-shop-seo { padding-inline: 24px; } }

/* El botón de acordeón solo aparece cuando global.js activa el modo
   colapsable (mobile con JS). Sin JS o en escritorio: oculto. */
.er-shop-seo-toggle { display: none; }

.er-shop-seo h2 {
	font-family: var(--font-display);
	font-weight: 400;
	/* claramente por debajo del H1 de categoría (2.25–3rem) */
	font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
	line-height: 1.15;
	color: var(--color-obsidian);
	margin: 0 0 var(--space-4);
	max-width: 42rem;
}
.er-shop-seo-intro { max-width: 42rem; }
.er-shop-seo-intro p {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--color-text-muted);
	margin: 0 0 var(--space-3);
}
.er-shop-seo-intro p:last-child { margin-bottom: 0; }

.er-shop-seo-sections {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--space-6) var(--space-8);
	margin-top: var(--space-6);
	max-width: 62rem;
}
.er-shop-seo-section h3 {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-obsidian);
	margin: 0 0 var(--space-2);
}
.er-shop-seo-section p {
	font-family: var(--font-body);
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--color-text-muted);
	margin: 0;
}

.er-shop-seo-links {
	margin: var(--space-8) 0 0;
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	line-height: 1.9;
	max-width: 62rem;
}
.er-shop-seo-links a { color: var(--color-rose-text); font-weight: 600; }
.er-shop-seo-links a:hover { color: var(--color-rose-hover); }
.er-shop-seo-sep { color: var(--color-text-muted); opacity: 0.55; margin: 0 10px; }

/* -----------------------------------------------------------------------
   Controles compactos SOLO MOBILE — ocultos por completo en desktop y
   tablet (rango ≥768px intacto). El detalle de comportamiento vive en el
   bloque @media (max-width: 767px) más abajo; aquí solo se garantiza que
   nunca aparezcan fuera de mobile.
----------------------------------------------------------------------- */
.er-shop-mobile-actions,
.er-shop-count-m,
.er-sort-sheet { display: none; }

/* -----------------------------------------------------------------------
   26-27. Responsive — tablet (768-1023): drawer + grid de 2. Mobile
   (<768): drawer + toolbar compacta + grid de 1/2 según ancho real.
----------------------------------------------------------------------- */
@media (max-width: 1023px) {
	.er-shop-layout { grid-template-columns: 1fr; gap: 16px; }
	.woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; }

	.er-filter-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		margin-bottom: var(--space-4);
	}

	.er-shop-sidebar {
		position: fixed;
		inset: 0 auto 0 0;
		width: min(360px, 90vw);
		z-index: 1000;
		border: none;
		border-radius: 0;
		padding: var(--space-6);
		overflow-y: auto;
		transform: translateX(-100%);
		transition: transform var(--duration) var(--ease);
		box-shadow: 12px 0 40px -20px rgba(0, 0, 0, 0.3);
	}
	.er-shop-sidebar.is-open { transform: translateX(0); }
	.er-shop-sidebar-head { display: flex; }
	.er-filter-close { display: block; background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--color-obsidian) !important; padding: 0; min-height: auto; }
}

@media (max-width: 767px) {
	.er-shop-head h1 { font-size: 2.25rem; }
	.er-shop-toolbar { flex-wrap: wrap; }
	.woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }

	/* ---------------------------------------------------------------
	   Cierre del catálogo: el hueco enorme (~64px) antes de "Entrega
	   programada" era la SUMA de dos espacios apilados —
	   `ul.products { margin-bottom: var(--space-8) }` (32px) +
	   `.er-shop-layout { padding-bottom: var(--space-8) }` (32px)—. En
	   mobile se elimina el padding del layout y se recorta el margen del
	   grid para dejar ~26px entre el último producto y los beneficios.
	   (En tablet/desktop el layout conserva su padding-bottom.)
	   --------------------------------------------------------------- */
	.er-shop-layout { padding-bottom: 0; }
	.woocommerce ul.products { margin-bottom: 16px !important; }

	/* ---------------------------------------------------------------
	   Beneficios — en mobile NO es un grid 2x2 de tarjetas estrechas
	   (títulos y descripciones se partían en varias líneas). Se convierte
	   en una lista vertical de 1 columna: cada beneficio es una FILA
	   compacta (icono a la izquierda, título + descripción a la derecha)
	   separada por un divisor sutil, no una tarjeta. Mismos iconos rosas,
	   mismos textos, mismo color gris de la descripción.
	   --------------------------------------------------------------- */
	.er-shop-trust {
		display: block;
		margin-bottom: 28px;
	}
	.er-shop-trust-item {
		/* display:flex + align-items:flex-start se heredan de la regla base */
		gap: 14px;
		padding: 14px 0;
		border: 0;
		border-bottom: 1px solid rgba(23, 21, 21, 0.08);
		border-radius: 0;
		background: none;
	}
	.er-shop-trust-item:last-child { border-bottom: 0; }
	/* alineación óptica del icono con la altura-x del título */
	.er-shop-trust-item img { margin-top: 2px; }
	.er-shop-trust-item strong {
		font-size: 1.0625rem; /* 17px */
		font-weight: 700;
		line-height: 1.2;
		margin-bottom: 4px;
	}
	.er-shop-trust-item span {
		display: block;
		font-size: 0.9375rem; /* 15px */
		line-height: 1.4;
	}

	/* ---------------------------------------------------------------
	   Bloque SEO — en mobile es un acordeón editorial. Cerrado: solo la
	   cabecera (~56px). El contenido SIEMPRE está en el DOM; global.js
	   añade .er-shop-seo--collapsible y lo colapsa/expande. Sin JS el
	   contenido queda visible (nunca oculto de forma engañosa).
	   --------------------------------------------------------------- */
	.er-shop-seo {
		margin-bottom: 28px;
		padding-inline: var(--fa-gutter);
	}
	.er-shop-seo--collapsible .er-shop-seo-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		min-height: 56px;
		padding: 12px 16px;
		background: var(--color-ivory);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-control);
		font-family: var(--font-body);
		font-size: 0.9375rem;
		font-weight: 700;
		line-height: 1.3;
		/* !important para ganarle al reset global de <button> (color:
		   var(--color-white) !important) — sin esto el título salía blanco
		   sobre el fondo crema y no se leía. */
		color: var(--color-obsidian) !important;
		text-align: left;
		cursor: pointer;
	}
	.er-shop-seo--collapsible .er-shop-seo-toggle span { color: var(--color-obsidian); }
	.er-shop-seo--collapsible .er-shop-seo-toggle::after {
		content: "+";
		flex: none;
		color: var(--color-rose-text);
		font-size: 1.5rem;
		font-weight: 400;
		line-height: 1;
	}
	.er-shop-seo--collapsible.is-open .er-shop-seo-toggle::after { content: "\2212"; } /* − */
	.er-shop-seo--collapsible .er-shop-seo-body {
		display: none;
		padding: 18px 2px calc(2px + env(safe-area-inset-bottom, 0px));
	}
	.er-shop-seo--collapsible.is-open .er-shop-seo-body { display: block; }

	/* Tipografía del contenido abierto: un punto por debajo de escritorio
	   pero legible (nada minúsculo). */
	.er-shop-seo h2 { font-size: 1.375rem; margin-bottom: var(--space-3); }
	.er-shop-seo-sections { grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-4); }
	.er-shop-seo-links { margin-top: var(--space-4); padding-top: var(--space-3); line-height: 2; }

	/* ---------------------------------------------------------------
	   Ritmo vertical del bloque introductorio — mismos componentes,
	   mismos tamaños de texto y de H1, solo el espaciado. Jerarquía
	   editorial: breadcrumb + H1 + descripción forman UN grupo de
	   título compacto (el breadcrumb rotula al H1, la descripción es su
	   bajada), y luego un salto claro hacia los controles y el catálogo.
	     buscador → breadcrumb ........ ~16px
	     breadcrumb → H1 .............. ~9px   (grupo de título)
	     H1 → descripción ............ ~8px   (bajada del título)
	     descripción → toolbar ....... ~16px  (salto de sección)
	     toolbar → contador .......... ~10px
	     contador → grid ............. ~10px
	   --------------------------------------------------------------- */
	.er-shop-page .er-breadcrumbs { padding-top: 5px; }
	.er-shop-head { padding: 9px 0 0; }
	.er-shop-head h1 { margin-bottom: 8px; }
	.er-shop-intro { font-size: 0.875rem; }

	/* Sin JS: la toolbar nativa (contador + "Ordenar por:") sigue siendo
	   el fallback, solo que como un bloque más discreto y de una sola
	   altura, no una banda gruesa. */
	.er-shop-toolbar {
		gap: 10px;
		min-height: 0;
		margin-bottom: 16px;
		padding: 10px var(--space-3);
	}

	/* ---------------------------------------------------------------
	   Con JS (progressive enhancement) → fila [Filtrar] [Ordenar] +
	   "N productos". Reemplaza la toolbar nativa y el botón "Filtrar"
	   suelto de tablet. Todo lo demás (drawer de filtros, <select>
	   nativo, submit GET de WooCommerce) se mantiene por debajo.
	   --------------------------------------------------------------- */
	html.er-has-sort-sheet .er-shop-layout > .er-filter-toggle { display: none; }
	html.er-has-sort-sheet .er-shop-toolbar { display: none; }

	html.er-has-sort-sheet .er-shop-mobile-actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		margin: 16px 0 0;
	}
	/* Controles de catálogo compactos — 46px de alto (real, con height +
	   min-height para ganar a cualquier min-height/line-height del theme
	   o WooCommerce). Texto de UI legible (15px/600), icono 17px a ~8px
	   del texto, border-radius de control (10px). NO son tarjetas: caja
	   ajustada, sin padding vertical, centrado por el flex de .er-btn.
	   Siguen 50/50 en una fila. */
	html.er-has-sort-sheet .er-shop-mobile-actions .er-btn {
		width: 100%;
		height: 46px;
		min-height: 46px;
		padding: 0 14px;
		gap: 8px;
		font-size: 0.9375rem;
		font-weight: 600;
		line-height: 1;
		border-radius: 10px;
	}
	html.er-has-sort-sheet .er-shop-mobile-actions .er-btn svg { flex: none; }

	/* Zona del contador — mismo tamaño/color/estilo de texto, con el aire
	   justo: ~10px sobre "N productos" y ~10px hasta la primera fila. */
	html.er-has-sort-sheet .er-shop-count-m {
		display: block;
		margin: 10px 0 10px;
		font-size: 0.8125rem;
		color: var(--color-text-muted);
	}

	/* ---------------------------------------------------------------
	   Bottom sheet de "Ordenar" — panel limpio desde abajo. Solo
	   presenta las opciones reales del <select> nativo de WooCommerce.
	   --------------------------------------------------------------- */
	html.er-has-sort-sheet .er-sort-sheet { display: block; }
	.er-sort-sheet {
		position: fixed;
		inset: 0;
		z-index: 1500;
		visibility: hidden;
	}
	.er-sort-sheet.is-open { visibility: visible; }
	.er-sort-sheet-overlay {
		position: absolute;
		inset: 0;
		background: rgba(23, 21, 21, 0.45);
		opacity: 0;
		transition: opacity var(--duration) var(--ease);
	}
	.er-sort-sheet.is-open .er-sort-sheet-overlay { opacity: 1; }
	.er-sort-sheet-panel {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		background: var(--color-white);
		border-radius: 16px 16px 0 0;
		padding: 4px 20px calc(16px + env(safe-area-inset-bottom, 0px));
		transform: translateY(100%);
		transition: transform var(--duration) var(--ease);
	}
	.er-sort-sheet.is-open .er-sort-sheet-panel { transform: translateY(0); }
	.er-sort-sheet-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12px 0 6px;
	}
	.er-sort-sheet-head span {
		font-family: var(--font-body);
		font-size: 0.9375rem;
		font-weight: 700;
		color: var(--color-obsidian);
	}
	.er-sort-sheet-close {
		background: none;
		border: none;
		font-size: 1.5rem;
		line-height: 1;
		color: var(--color-obsidian) !important;
		padding: 0 4px;
		min-height: auto;
	}
	.er-sort-sheet-list { list-style: none; margin: 0; padding: 4px 0 0; }
	.er-sort-sheet-list label {
		display: flex;
		align-items: center;
		gap: 12px;
		margin: 0;
		padding: 13px 2px;
		font-size: 0.9375rem;
		font-weight: 400;
		color: var(--color-text);
		cursor: pointer;
	}
	.er-sort-sheet-list li + li label { border-top: 1px solid var(--color-border); }
	.er-sort-sheet-list input[type="radio"] {
		appearance: none;
		-webkit-appearance: none;
		width: 20px;
		height: 20px;
		min-height: 0;
		margin: 0;
		flex: none;
		border: 1.5px solid var(--color-border);
		border-radius: 50%;
		background: var(--color-white);
	}
	.er-sort-sheet-list input[type="radio"]:checked {
		border-color: var(--color-rose);
		background: radial-gradient(circle, var(--color-rose) 0 6px, transparent 7px);
	}
	.er-sort-sheet-list input[type="radio"]:checked + span {
		font-weight: 700;
		color: var(--color-obsidian);
	}
}
@media (max-width: 389px) {
	.woocommerce ul.products { grid-template-columns: 1fr !important; }
}