/* ==========================================================================
   Walon Smart Filters — estilos de catálogo
   Sistema de diseño minimalista/monocromo a propósito (negro/blanco + grises),
   coherente con la identidad ya usada en el resto del sitio (ver
   walon-rtwpvg-expand.php, que también trabaja en blanco/negro puro para la
   ficha de producto). --walon-sf-font cae en var(--w-font-body) si el tema
   la define (ya la usan otros módulos del child theme); si no existe, hereda
   la tipografía normal de la página sin forzar nada.
   ========================================================================== */

:root {
	--walon-sf-ink: #0a0a0b;
	--walon-sf-ink-soft: #45454a;
	--walon-sf-muted: #8c8c92;
	--walon-sf-line: #e6e6e9;
	--walon-sf-line-soft: #f0f0f2;
	--walon-sf-surface: #fff;
	--walon-sf-surface-alt: #f7f7f8;
	--walon-sf-danger: #c0392b;
	--walon-sf-radius-sm: 6px;
	--walon-sf-radius-md: 10px;
	--walon-sf-radius-lg: 20px;
	--walon-sf-shadow-sm: 0 1px 2px rgba(10, 10, 11, 0.06);
	--walon-sf-shadow-md: 0 10px 28px rgba(10, 10, 11, 0.12);
	--walon-sf-shadow-lg: 0 -12px 32px rgba(10, 10, 11, 0.18);
	--walon-sf-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--walon-sf-dur-fast: 0.15s;
	--walon-sf-dur: 0.25s;
	--walon-sf-font: var(--w-font-body, inherit);

	/* Cuánto baja el sidebar sticky para no quedar tapado por el header
	   sticky de Astra. 100px es una estimación razonable, no un valor leído
	   del tema (no tenemos el CSS de Astra para saber su alto exacto) — si
	   en el sitio real el header sticky es más alto/bajo, se puede ajustar
	   sin tocar el plugin pegando esto en Personalizar > CSS Adicional:
	   :root{ --walon-sf-sidebar-sticky-top: 140px; } */
	--walon-sf-sidebar-sticky-top: 100px;
}

.walon-shop-toolbar,
.walon-shop-layout,
.walon-active-filters,
.walon-mobile-drawer {
	font-family: var(--walon-sf-font);
	color: var(--walon-sf-ink);
	box-sizing: border-box;
}

.walon-shop-toolbar *,
.walon-shop-layout *,
.walon-active-filters *,
.walon-mobile-drawer * {
	box-sizing: border-box;
}

/*
 * BLINDAJE contra el skin global de botones de Astra. Astra permite
 * definir en Personalizar > Botones un estilo que se aplica a TODOS los
 * <button> del sitio (fondo/color/borde en :hover, :focus, :active), y
 * varios elementos de este plugin son <button> nativos (los headers de
 * acordeón, "Limpiar", cerrar el drawer...). Sin este reset, ese skin
 * global se filtra encima del nuestro de forma impredecible — es la causa
 * confirmada del header "CATEGORÍA" viéndose negro sólido al tocarlo y del
 * botón "Limpiar" apareciendo como una pastilla negra en vez de texto
 * plano. Todo con !important a propósito: tiene que ganarle específicamente
 * a reglas de tema que también suelen usar !important para "aplicar
 * siempre".
 */
.walon-shop-toolbar button,
.walon-shop-layout button,
.walon-active-filters button,
.walon-mobile-drawer button {
	box-shadow: none !important;
	text-shadow: none !important;
	transform: none !important;
}

.walon-shop-toolbar button:hover,
.walon-shop-toolbar button:focus,
.walon-shop-toolbar button:active,
.walon-shop-layout button:hover,
.walon-shop-layout button:focus,
.walon-shop-layout button:active,
.walon-active-filters button:hover,
.walon-active-filters button:focus,
.walon-active-filters button:active,
.walon-mobile-drawer button:hover,
.walon-mobile-drawer button:focus,
.walon-mobile-drawer button:active {
	box-shadow: none !important;
	text-shadow: none !important;
	transform: none !important;
}

/* ---- Toolbar ---- */

.walon-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid var(--walon-sf-line);
	margin-bottom: 20px;
}

.walon-shop-toolbar__left,
.walon-shop-toolbar__right {
	display: flex;
	align-items: center;
	gap: 16px;
}

.walon-result-count {
	margin: 0;
	font-size: 13px;
	color: var(--walon-sf-ink-soft);
	white-space: nowrap;
	letter-spacing: 0.01em;
}

.walon-result-count strong {
	color: var(--walon-sf-ink);
	font-weight: 800;
}

.walon-filter-toggle,
.walon-mobile-filter-trigger {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--walon-sf-ink) !important;
	background: var(--walon-sf-surface) !important;
	color: var(--walon-sf-ink) !important;
	height: 42px;
	padding: 0 18px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: var(--walon-sf-radius-sm);
	transition: background-color var(--walon-sf-dur-fast) var(--walon-sf-ease),
		color var(--walon-sf-dur-fast) var(--walon-sf-ease),
		transform var(--walon-sf-dur-fast) var(--walon-sf-ease);
}

.walon-filter-toggle::before,
.walon-mobile-filter-trigger::before {
	content: "";
	width: 13px;
	height: 10px;
	flex-shrink: 0;
	background: currentColor;
	clip-path: polygon(0 0, 100% 0, 62% 45%, 62% 100%, 38% 100%, 38% 45%);
}

.walon-mobile-filter-trigger {
	align-items: center;
	gap: 8px;
}

.walon-filter-toggle:hover,
.walon-filter-toggle:focus,
.walon-mobile-filter-trigger:hover,
.walon-mobile-filter-trigger:focus {
	background: var(--walon-sf-ink) !important;
	color: #fff !important;
}

.walon-filter-toggle:active,
.walon-mobile-filter-trigger:active {
	transform: scale(0.97) !important;
}

.walon-filter-toggle[aria-expanded="true"] {
	background: var(--walon-sf-ink) !important;
	color: #fff !important;
}

.walon-mobile-filter-trigger {
	display: none;
	position: relative;
}

.walon-ordering {
	appearance: none;
	height: 42px;
	border: 1px solid var(--walon-sf-line);
	border-radius: var(--walon-sf-radius-sm);
	padding: 0 36px 0 14px;
	background-color: var(--walon-sf-surface);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 16px;
	font-size: 13px;
	color: var(--walon-sf-ink);
	cursor: pointer;
	transition: border-color var(--walon-sf-dur-fast) var(--walon-sf-ease);
}

.walon-ordering:hover,
.walon-ordering:focus-visible {
	border-color: var(--walon-sf-ink);
}

/* ---- Chips de filtros activos ---- */

.walon-active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}

.walon-active-filters:empty {
	display: none;
	margin-bottom: 0;
}

.walon-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--walon-sf-line) !important;
	background: var(--walon-sf-surface) !important;
	border-radius: 999px !important;
	padding: 7px 8px 7px 14px;
	font-size: 12px;
	font-weight: 500;
	color: var(--walon-sf-ink) !important;
	cursor: pointer;
	transition: border-color var(--walon-sf-dur-fast) var(--walon-sf-ease),
		background-color var(--walon-sf-dur-fast) var(--walon-sf-ease);
}

.walon-chip:hover,
.walon-chip:focus {
	border-color: var(--walon-sf-ink) !important;
	background: var(--walon-sf-surface-alt) !important;
	color: var(--walon-sf-ink) !important;
}

.walon-chip span[aria-hidden] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--walon-sf-surface-alt);
	font-size: 13px;
	line-height: 1;
}

.walon-chip--clear {
	background: transparent;
	border-style: dashed;
	text-decoration: none;
	color: var(--walon-sf-ink-soft);
	padding: 7px 14px;
}

.walon-chip--clear:hover {
	color: var(--walon-sf-ink);
	border-color: var(--walon-sf-ink);
}

/* ---- Layout general: sidebar + resultados ---- */

.walon-shop-layout {
	display: flex;
	align-items: flex-start;
	gap: 32px;
}

.walon-filter-sidebar {
	flex: 0 0 288px;
	max-width: 300px;
	position: sticky;
	top: var(--walon-sf-sidebar-sticky-top);
	max-height: calc(100vh - var(--walon-sf-sidebar-sticky-top) - 24px);
	overflow-y: auto;
	overflow-x: hidden;
	padding: 4px 24px 24px 0;
	border-right: 1px solid var(--walon-sf-line-soft);
}

.walon-filter-sidebar[hidden] {
	display: none;
}

.walon-product-results {
	flex: 1 1 auto;
	min-width: 0;
	transition: opacity var(--walon-sf-dur) var(--walon-sf-ease);
}

.walon-product-results.is-loading {
	opacity: 0.5;
	pointer-events: none;
}

/* ---- Grupos de filtro (acordeón) ---- */

.walon-filter-group {
	border-bottom: 1px solid var(--walon-sf-line-soft);
	padding: 4px 0;
}

.walon-filter-group--flat {
	border-bottom: 1px solid var(--walon-sf-line-soft);
	padding: 8px 0;
}

.walon-filter-group__header {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 8px;
	background: none !important;
	border: 0 !important;
	padding: 16px 2px;
	font-size: 14px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--walon-sf-ink) !important;
	cursor: pointer;
	text-align: left;
	outline: none;
	transition: color var(--walon-sf-dur-fast) var(--walon-sf-ease);
}

.walon-filter-group__header:hover,
.walon-filter-group__header:focus {
	background: none !important;
	color: var(--walon-sf-ink-soft) !important;
}

.walon-filter-group__header:active {
	background: none !important;
	color: var(--walon-sf-ink) !important;
}

.walon-filter-group__header:focus-visible {
	outline: 2px solid var(--walon-sf-ink) !important;
	outline-offset: 2px;
}

.walon-filter-group__chevron {
	width: 16px;
	height: 16px;
	margin-left: auto;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px;
	transition: transform var(--walon-sf-dur) var(--walon-sf-ease);
}

.walon-filter-group__header[aria-expanded="true"] .walon-filter-group__chevron {
	transform: rotate(180deg);
}

.walon-filter-group__count {
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--walon-sf-ink);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	display: none;
	align-items: center;
	justify-content: center;
}

.walon-filter-group__count:not(:empty) {
	display: inline-flex;
}

/* Animación de abrir/cerrar: grid-template-rows 0fr -> 1fr. El wrapper
   -inner tiene overflow:hidden para que el contenido no se vea mientras
   la fila todavía está creciendo/achicando. Se decide leyendo el
   aria-expanded del botón hermano — initAccordions() en desktop-panel.js
   solo togglea ese atributo, nada más. */
.walon-filter-group__options {
	display: grid;
	grid-template-rows: 1fr;
	overflow: hidden;
	transition: grid-template-rows var(--walon-sf-dur) var(--walon-sf-ease);
}

.walon-filter-group__header[aria-expanded="false"] + .walon-filter-group__options {
	grid-template-rows: 0fr;
	/* Estado inicial garantizado sin depender de que initAccordions() ya
	   haya corrido: JS forzaba este mismo resultado con .style.setProperty()
	   inline, pero eso deja una fracción de segundo (antes de que el JS se
	   ejecute) donde el grupo se ve abierto y luego "salta" a cerrado — el
	   parpadeo reportado al refrescar. Con esta regla CSS pura, el estado
	   correcto ya está aplicado en el primer paint (aria-expanded="false"
	   ya viene así del HTML servido por PHP), sin esperar a ningún script. */
	display: none !important;
}

.walon-filter-group__header[aria-expanded="true"] + .walon-filter-group__options {
	display: grid !important;
}

.walon-filter-group__options-inner {
	overflow: hidden;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-bottom: 16px;
}

.walon-filter-option {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 13.5px;
	color: var(--walon-sf-ink-soft);
	cursor: pointer;
	min-height: 42px;
	padding: 8px 8px;
	border-radius: var(--walon-sf-radius-sm);
	transition: background-color var(--walon-sf-dur-fast) var(--walon-sf-ease);
}

.walon-filter-option:hover {
	background: var(--walon-sf-surface-alt);
	color: var(--walon-sf-ink);
}

.walon-filter-option.is-disabled {
	opacity: 0.38;
	cursor: not-allowed;
}

.walon-filter-option.is-disabled:hover {
	background: none;
}

.walon-filter-option__count {
	margin-left: auto;
	color: var(--walon-sf-muted);
	font-size: 11.5px;
	font-variant-numeric: tabular-nums;
}

.walon-filter-option input[type="checkbox"] {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	accent-color: var(--walon-sf-ink);
	cursor: pointer;
}

.walon-filter-option input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--walon-sf-ink);
	outline-offset: 2px;
}

.walon-filter-option--toggle {
	font-weight: 600;
	color: var(--walon-sf-ink);
}

/* Tallas: grilla de pills */

.walon-filter-group__options-inner--grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	padding-top: 2px;
}

.walon-filter-option--size {
	position: relative;
	justify-content: center;
	border: 1px solid var(--walon-sf-line);
	border-radius: var(--walon-sf-radius-sm);
	padding: 8px 4px;
	text-align: center;
	font-weight: 600;
	min-height: 38px;
}

.walon-filter-option--size:hover {
	border-color: var(--walon-sf-ink);
	background: var(--walon-sf-surface);
}

.walon-filter-option--size input {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	cursor: pointer;
}

.walon-filter-option--size:has(input:checked) {
	border-color: var(--walon-sf-ink);
	background: var(--walon-sf-ink);
	color: #fff;
}

.walon-filter-option--size:has(input:focus-visible) {
	outline: 2px solid var(--walon-sf-ink);
	outline-offset: 2px;
}

.walon-filter-option--size.is-disabled {
	border-style: dashed;
}

/* Colores: swatches */

.walon-filter-group__options-inner--swatches {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
	gap: 14px 10px;
	padding-top: 4px;
}

/*
 * "Ver más" para listas largas (Categoría, Talla, Color): las opciones
 * después del umbral (índice >= 8/12, ver filters-desktop.php) se ocultan
 * hasta que el botón agrega .is-expanded al -inner que las contiene. Es lo
 * que evita que una categoría con 30 tallas o 40 colores deje el sidebar
 * entero como una pared de checkboxes.
 */
.walon-filter-option--overflow {
	display: none;
}

.walon-filter-group__options-inner.is-expanded .walon-filter-option--overflow {
	display: flex;
}

.walon-filter-show-more {
	grid-column: 1 / -1;
	appearance: none;
	background: none !important;
	border: 0 !important;
	border-top: 1px solid var(--walon-sf-line-soft) !important;
	border-radius: 0 !important;
	width: 100%;
	margin-top: 6px;
	padding: 10px 2px 2px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--walon-sf-ink-soft);
	text-align: left;
	cursor: pointer;
}

.walon-filter-show-more:hover,
.walon-filter-show-more:focus,
.walon-filter-show-more:active {
	background: none !important;
	color: var(--walon-sf-ink) !important;
	text-decoration: underline;
}

.walon-filter-option--swatch {
	position: relative;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
	font-size: 11px;
	min-height: auto;
	padding: 2px;
}

.walon-filter-option--swatch:hover {
	background: none;
}

.walon-filter-option--swatch input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.walon-swatch {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1.5px solid rgba(10, 10, 11, 0.35);
	box-shadow: inset 0 0 0 2px #fff;
	display: inline-block;
	position: relative;
	transition: transform var(--walon-sf-dur-fast) var(--walon-sf-ease),
		box-shadow var(--walon-sf-dur-fast) var(--walon-sf-ease),
		border-color var(--walon-sf-dur-fast) var(--walon-sf-ease);
}

.walon-filter-option--swatch:hover .walon-swatch {
	border-color: var(--walon-sf-ink);
}

.walon-filter-option--swatch:hover .walon-swatch {
	transform: scale(1.08);
}

.walon-filter-option--swatch:has(input:checked) .walon-swatch {
	box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--walon-sf-ink);
}

.walon-filter-option--swatch:has(input:checked) .walon-swatch::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: rgba(10, 10, 11, 0.28);
}

.walon-filter-option--swatch:has(input:focus-visible) .walon-swatch {
	outline: 2px solid var(--walon-sf-ink);
	outline-offset: 3px;
}

.walon-filter-option--swatch .walon-filter-option__label {
	line-height: 1.2;
	color: var(--walon-sf-ink-soft);
}

.walon-filter-option--swatch .walon-filter-option__count {
	margin-left: 0;
	font-size: 10.5px;
}

.walon-swatch--negro { background: #101012; }
.walon-swatch--blanco { background: #fff; border-color: #d5d5d8; }
.walon-swatch--gris { background: #9a9a9e; }
.walon-swatch--azul { background: #1c3fa0; }
.walon-swatch--celeste { background: #4fb6e8; }
.walon-swatch--rojo { background: #c0392b; }
.walon-swatch--verde { background: #2e7d4a; }
.walon-swatch--amarillo { background: #f1c40f; }
.walon-swatch--naranja { background: #e67e22; }
.walon-swatch--rosado { background: #e685b5; }
.walon-swatch--morado { background: #7d3c98; }
.walon-swatch--beige { background: #e8dcc4; }
.walon-swatch--marron { background: #6b4423; }
.walon-swatch--dorado { background: #c9a227; }
.walon-swatch--plateado { background: #bdc3c7; }
.walon-swatch--multicolor {
	background: conic-gradient(#c0392b, #e67e22, #f1c40f, #2e7d4a, #1c3fa0, #7d3c98, #c0392b);
}

/* Estado vacío */

.walon-empty-results {
	padding: 72px 20px;
	text-align: center;
}

.walon-empty-results[hidden] {
	display: none;
}

.walon-empty-results__inner {
	max-width: 340px;
	margin: 0 auto;
}

.walon-empty-results__title {
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 6px;
	color: var(--walon-sf-ink);
}

.walon-empty-results__hint {
	color: var(--walon-sf-muted);
	margin-bottom: 20px;
	font-size: 13px;
}

.walon-empty-results__clear {
	border: 1px solid var(--walon-sf-ink) !important;
	background: #fff !important;
	color: var(--walon-sf-ink) !important;
	border-radius: var(--walon-sf-radius-sm) !important;
	padding: 11px 22px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--walon-sf-dur-fast) var(--walon-sf-ease),
		color var(--walon-sf-dur-fast) var(--walon-sf-ease);
}

.walon-empty-results__clear:hover,
.walon-empty-results__clear:focus {
	background: var(--walon-sf-ink) !important;
	color: #fff !important;
}

/* ---- Filas completas del grid ---- */

/* Aplicada por WalonSF.loadMore.applyRowCompletion() (load-more.js) a las
   tarjetas sueltas que no alcanzan a completar la última fila visible,
   mientras todavía quede más por cargar con "Mostrar más". */
.walon-row-overflow {
	display: none !important;
}

/* ---- Paginación / Mostrar más ---- */

.walon-pagination {
	display: flex;
	justify-content: center;
	margin: 36px 0 28px;
}

.walon-pagination:empty {
	display: none;
	margin: 0;
}

.walon-load-more-btn {
	appearance: none;
	position: relative;
	border: 1px solid var(--walon-sf-ink) !important;
	background: var(--walon-sf-surface) !important;
	color: var(--walon-sf-ink) !important;
	min-width: 190px;
	height: 50px;
	padding: 0 30px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: var(--walon-sf-radius-sm) !important;
	transition: background-color var(--walon-sf-dur-fast) var(--walon-sf-ease),
		color var(--walon-sf-dur-fast) var(--walon-sf-ease);
}

.walon-load-more-btn:hover:not(:disabled),
.walon-load-more-btn:focus:not(:disabled) {
	background: var(--walon-sf-ink) !important;
	color: #fff !important;
}

.walon-load-more-btn:disabled {
	cursor: wait;
	opacity: 0.7;
}

.walon-load-more-btn.is-loading {
	color: transparent;
}

.walon-load-more-btn.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid currentColor;
	border-color: var(--walon-sf-ink) var(--walon-sf-ink) var(--walon-sf-ink) transparent;
	border-radius: 50%;
	animation: walon-sf-spin 0.7s linear infinite;
}

@keyframes walon-sf-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ---- Drawer mobile ---- */

.walon-mobile-drawer {
	position: fixed;
	inset: 0;
	z-index: 100000;
}

.walon-mobile-drawer[hidden] {
	display: none;
}

.walon-mobile-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 11, 0.5);
	opacity: 0;
	transition: opacity var(--walon-sf-dur) var(--walon-sf-ease);
}

.walon-mobile-drawer.is-open .walon-mobile-drawer__overlay {
	opacity: 1;
}

/*
 * Panel lateral desde la izquierda (no bottom-sheet): ancho fijo, alto
 * completo, entra con translateX en vez de translateY. Se mantiene todo
 * el resto del comportamiento (overlay, scroll-lock, focus trap) igual —
 * mobile-drawer.js no necesita cambios, solo la animación es CSS.
 */
.walon-mobile-drawer__panel {
	position: absolute;
	inset: 0;
	right: auto;
	width: min(88vw, 380px);
	height: 100%;
	background: #fff;
	display: flex;
	flex-direction: column;
	border-radius: 0;
	padding-bottom: env(safe-area-inset-bottom, 0);
	box-shadow: 6px 0 32px rgba(10, 10, 11, 0.18);
	transform: translateX(-100%);
	transition: transform var(--walon-sf-dur) var(--walon-sf-ease);
}

.walon-mobile-drawer.is-open .walon-mobile-drawer__panel {
	transform: translateX(0);
}

.walon-mobile-drawer__header {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 16px 20px 18px;
	border-bottom: 1px solid var(--walon-sf-line-soft);
	flex-shrink: 0;
}

.walon-mobile-drawer__header h2 {
	margin: 0;
	font-size: 15px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	flex: 1;
}

/* "Limpiar": texto plano subrayado, sin fondo — nunca una pastilla sólida
   (eso era el skin de botones del tema filtrándose, ver el bloque de
   blindaje al principio del archivo). */
.walon-mobile-drawer__clear {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--walon-sf-ink-soft) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	padding: 8px 2px;
	white-space: nowrap;
	/* Arranca oculto (sin filtros no hay nada que limpiar); app.js lo
	   revela con .style.visibility apenas hay al menos un filtro activo,
	   ver updateClearButtonVisibility(). */
	visibility: hidden;
}

.walon-mobile-drawer__clear:hover,
.walon-mobile-drawer__clear:focus,
.walon-mobile-drawer__clear:active {
	background: none !important;
	color: var(--walon-sf-ink) !important;
}

/*
 * "X" cerrar: SVG propio (dos líneas cruzadas) en vez del carácter "×"
 * (&times;) — un glifo de fuente se alinea distinto según la tipografía
 * cargada y terminaba viéndose descentrado. El SVG siempre mide y centra
 * igual, sin depender de ninguna fuente. Sin círculo de fondo detrás.
 */
.walon-mobile-drawer__close {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	width: 32px;
	height: 32px;
	padding: 0;
	color: var(--walon-sf-ink) !important;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin: 0 -4px 0 0;
}

.walon-mobile-drawer__close svg {
	display: block;
}

.walon-mobile-drawer__close:hover,
.walon-mobile-drawer__close:focus,
.walon-mobile-drawer__close:active {
	background: none !important;
	color: var(--walon-sf-ink-soft) !important;
}

.walon-mobile-drawer__body {
	flex: 1;
	overflow-y: auto;
	padding: 4px 20px 0;
	-webkit-overflow-scrolling: touch;
}

.walon-mobile-drawer__body .walon-filter-group:first-child {
	padding-top: 0;
}

.walon-mobile-drawer__footer {
	flex-shrink: 0;
	padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0));
	border-top: 1px solid var(--walon-sf-line-soft);
	background: #fff;
	box-shadow: 0 -4px 12px rgba(10, 10, 11, 0.04);
}

.walon-mobile-drawer__apply {
	width: 100%;
	height: 52px;
	background: var(--walon-sf-ink) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--walon-sf-radius-sm) !important;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: opacity var(--walon-sf-dur-fast) var(--walon-sf-ease);
}

.walon-mobile-drawer__apply:active {
	opacity: 0.85;
}

body.walon-scroll-locked {
	overflow: hidden;
}

/* Ordenamiento dentro del drawer: reusa .walon-ordering pero a ancho completo */
.walon-ordering--mobile {
	width: 100%;
}

/* ---- Responsive ---- */

@media (max-width: 1023px) {
	.walon-filter-toggle,
	.walon-filter-sidebar {
		display: none !important;
	}

	.walon-shop-layout {
		display: block;
	}

	.walon-shop-toolbar {
		gap: 10px;
	}

	/*
	 * En mobile el botón de filtros no va inline en el toolbar (queda muy
	 * arriba, hay que scrollear de vuelta para encontrarlo): se convierte
	 * en una barra fija abajo, siempre a mano mientras se navega el grid —
	 * mismo patrón que apps de retail (Zara/H&M/Nike). Se resta
	 * safe-area-inset-bottom para no quedar debajo del home indicator de
	 * iPhone. El z-index se dejó bajo el rango típico de widgets de chat
	 * (999999+) para no taparlo, pero por encima del contenido normal —
	 * si el burbuja de WhatsApp del sitio queda superpuesta, ese botón
	 * vive aparte en inc/whatsapp-button.php, fuera de este plugin.
	 */
	.walon-mobile-filter-trigger {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99000;
		width: 100%;
		height: 56px;
		height: calc(56px + env(safe-area-inset-bottom, 0));
		padding-bottom: env(safe-area-inset-bottom, 0);
		justify-content: center;
		background: #fff !important;
		color: var(--walon-sf-ink) !important;
		border: 0 !important;
		border-top: 1px solid var(--walon-sf-line) !important;
		border-radius: 0;
		box-shadow: 0 -4px 16px rgba(10, 10, 11, 0.08);
	}

	.walon-mobile-filter-trigger:hover,
	.walon-mobile-filter-trigger:focus {
		background: #fff !important;
		color: var(--walon-sf-ink) !important;
	}

	.walon-mobile-filter-trigger:active {
		background: var(--walon-sf-surface-alt) !important;
		color: var(--walon-sf-ink) !important;
	}

	/* Deja espacio para que la barra fija no tape la última fila de
	   productos ni el botón "Mostrar más". */
	.walon-product-results {
		padding-bottom: calc(70px + env(safe-area-inset-bottom, 0));
	}
}

@media (max-width: 480px) {
	.walon-shop-toolbar__right {
		width: 100%;
	}

	.walon-ordering {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.walon-shop-toolbar *,
	.walon-shop-layout *,
	.walon-active-filters *,
	.walon-mobile-drawer * {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
	}
}