/**
 * Fanor · Producto · Filtro (sidebar). Solo desktop (>=1024px).
 * Porte al pixel del diseño de referencia.
 */

.fnr-filter {
    --fanor-red: #CC0000;
    --fanor-red-hover: #A80000;
    --fanor-black: #1A1A1A;
    --fanor-gray: #888888;
    --fanor-gray-2: #999999;
    --fanor-gray-3: #666666;
    --bd: #E0E0E0;
    --bd-side: #E5E5E5;
    --bd-fine: #EEEEEE;
    --bg-soft: #F7F7F7;
    --fnr-panel-bg: #FFFFFF;
    --fnr-section-bg: #FFFFFF;
    --fnr-section-border: #EEEEEE;
    --fnr-panel-padding: 0;
    --fnr-section-padding: 18px 16px;
    --fnr-title-color: #1A1A1A;
    --fnr-title-border: #CC0000;
    --fnr-vehicle-bg: #F7F7F7;
    --fnr-vehicle-border: #E0E0E0;
    --fnr-vehicle-text: #1A1A1A;
    --fnr-category-text: #444444;
    --fnr-category-active: #CC0000;
    --fnr-price-color: #CC0000;
    --fnr-apply-bg: #CC0000;
    --fnr-apply-hover: #A80000;
    --fnr-apply-text: #FFFFFF;
    --fnr-sheet-bg: #FFFFFF;
    --fnr-sheet-radius: 18px;
    --fnr-empty-bg: #F7F7F7;
    --fnr-empty-border: #E0E0E0;
    --fnr-empty-icon: #CC0000;
    --fnr-empty-text: #666666;
    --fnr-empty-btn-bg: #CC0000;
    --fnr-empty-btn-hover: #A80000;
    --fnr-empty-btn-text: #FFFFFF;
    --fnr-empty-btn-height: 50px;
    --fnr-empty-btn-radius: 4px;

    /* El ancho y el espaciado lateral los controla el container de Elementor: el
       widget se estira al 100% y NO mete borde ni padding lateral propios (los
       agregas tú con el container). */
    width: 100%;
    background: var(--fnr-panel-bg);
    padding: 28px 0;
    box-sizing: border-box;
    font-family: var(--fanor-font-body);
}

.fnr-filter *,
.fnr-filter *::before,
.fnr-filter *::after {
    box-sizing: border-box;
}

.fnr-filter [hidden] {
    display: none !important;
}

/* ── Reset anti-hover de Elementor / tema (mismo criterio que header-base.css) ──
   Elementor y muchos temas inyectan a <a>/<button> en hover/focus/active un anillo
   de sombra, un "lift" con transform, filtros y un fondo (el "hover rosa") que se
   cuela en los controles del sidebar (toggle, chevrons, botones, "cambiar vehículo").
   Neutralizamos SOLO esos efectos; NO tocamos text-decoration (hay botones
   subrayados a propósito) ni los fondos/colores propios del widget. */
.fnr-filter a,
.fnr-filter a:hover,
.fnr-filter a:focus,
.fnr-filter a:active,
.fnr-filter button,
.fnr-filter button:hover,
.fnr-filter button:focus,
.fnr-filter button:active {
    box-shadow: none !important;
    filter: none !important;
    outline: 0 !important;
    transform: none !important;
}

/* Accesibilidad: foco de teclado visible (gris neutro), nunca el anillo del tema. */
.fnr-filter a:focus-visible,
.fnr-filter button:focus-visible {
    outline: 2px solid #9AA0A6 !important;
    outline-offset: 2px;
}

/* Fondo en hover/focus/active FIJADO con !important para que ningún tema ni
   Elementor cuele su color (antes se colaba en "limpiar filtros", el chevron, el
   toggle y "agregar/cambiar vehículo"). Los ghost van transparentes; el rojo de
   .fnr-btn-primary se respeta y se fija aparte. */
.fnr-filter.fnr-filter a,
.fnr-filter.fnr-filter a:hover,
.fnr-filter.fnr-filter a:focus,
.fnr-filter.fnr-filter a:active,
.fnr-filter.fnr-filter button:not(.fnr-btn-primary),
.fnr-filter.fnr-filter button:not(.fnr-btn-primary):hover,
.fnr-filter.fnr-filter button:not(.fnr-btn-primary):focus,
.fnr-filter.fnr-filter button:not(.fnr-btn-primary):active {
    background: transparent !important;
}

.fnr-filter.fnr-filter .fnr-btn-primary,
.fnr-filter.fnr-filter .fnr-btn-primary:focus,
.fnr-filter.fnr-filter .fnr-btn-primary:active {
    background: var(--fnr-apply-bg) !important;
}

.fnr-filter.fnr-filter .fnr-btn-primary:hover {
    background: var(--fnr-apply-hover) !important;
}

.fnr-filter.fnr-filter button.fnr-btn-primary--vehicle,
.fnr-filter.fnr-filter button.fnr-btn-primary--vehicle:focus,
.fnr-filter.fnr-filter button.fnr-btn-primary--vehicle:active {
    background: var(--fnr-empty-btn-bg) !important;
    color: var(--fnr-empty-btn-text) !important;
}

.fnr-filter.fnr-filter button.fnr-btn-primary--vehicle:hover {
    background: var(--fnr-empty-btn-hover) !important;
}

.fnr-filter__title {
    font-family: var(--fanor-font-display);
    font-weight: 700;
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--fnr-title-color);
    border-bottom: 3px solid var(--fnr-title-border);
    padding-bottom: 8px;
    display: inline-block;
}

/* ═══════════════ El sidebar como UNA tarjeta con apartados ═══════════════
   Antes eran bloques sueltos sobre el blanco de la página: con la página en
   gris eso se leía como cosas flotando. Ahora el widget entero es una tarjeta
   blanca y cada bloque una SECCIÓN separada por un filete a todo el ancho, que
   es lo que hace que se lea como un panel de filtros y no como una lista.

   Todo esto va bajo `:not(.is-compact)`: en móvil el mismo widget se convierte
   en bottom sheet (ya es una superficie propia, con su cabecera y su footer
   fijos), y encima de eso una tarjeta con sombra sobraría. */
.fnr-filter:not(.is-compact) {
    padding: var(--fnr-panel-padding);
    /* Misma sombra que las cards del catálogo: el sidebar y la parrilla quedan
       al mismo "nivel" sobre el gris de la página. */
    box-shadow: 0 1px 3px rgba(0, 0, 0, .09);
    /* Las migas y el título viven dentro de la columna del grid, así que sin este
       empujón el sidebar arrancaría más arriba que la primera fila de cards. El
       valor lo mide y publica catalogo-filtro.js (ver alinearSidebar): es la
       diferencia real entre ambas columnas, no una suma de altos, para que siga
       valiendo si el título se parte en dos líneas o lo apagan desde Elementor.
       Sin JS vale 0 y el sidebar se queda arriba, como hasta ahora. */
    margin-top: var(--fnr-cab-alto, 0px);
}

/* Sangría lateral contenida: el widget se estira al ancho que le da su columna
   de Elementor y ANTES no metía padding lateral ninguno, así que cada píxel que
   se añada aquí se lo quita al rótulo de la categoría —que va a una línea con
   recorte por puntos suspensivos—. 16px es lo justo para que el contenido no
   toque el borde de la tarjeta sin partir nombres como «Cilindro de freno». */
.fnr-filter:not(.is-compact) .fnr-filter__sec {
    padding: var(--fnr-section-padding);
    background: var(--fnr-section-bg);
}

/* Filete ENTRE secciones (no encima de la primera ni debajo de la última): así
   la tarjeta no arranca ni termina con una línea suelta. */
.fnr-filter:not(.is-compact) .fnr-filter__sec + .fnr-filter__sec {
    border-top: 1px solid var(--fnr-section-border);
}

/* El panel de orden ya no necesita marco propio: la sección es su marco. Se le
   quita el borde para no dibujar una caja dentro de otra. */
.fnr-filter:not(.is-compact) .fnr-filter__sec .fnr-sortpanel {
    border: 0;
    padding: 0;
    margin-bottom: 0;
}

/* Los bloques ya no ponen su propia separación: la pone la sección. */
.fnr-filter:not(.is-compact) .fnr-filter__sec > .fnr-block {
    margin: 0;
}

.fnr-filter__sec--acciones {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ---------- Cabecera plegable de bloque ---------- */
.fnr-block__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    text-align: left;
    color: var(--fanor-gray-2);
    font-family: inherit;
}

/* Apagados los plegables la cabecera se emite `disabled`: sin cursor de mano y
   sin sugerir que se pueda pulsar, pero con el mismo aspecto de rótulo. */
.fnr-block__head[disabled] {
    cursor: default;
    opacity: 1;
}

.fnr-block__chev {
    flex: none;
    transition: transform .18s ease;
}

.fnr-block__head[aria-expanded="false"] .fnr-block__chev {
    transform: rotate(-90deg);
}

.fnr-block__body {
    padding-top: 2px;
}

/* Dentro de la cabecera el rótulo es un ítem flex: su margen inferior de siempre
   descuadraría el chevron respecto al texto. La separación con el cuerpo la pone
   ahora `.fnr-block__body`. */
.fnr-block__head .fnr-block__title {
    margin-bottom: 0;
}

.fnr-sep {
    height: 1px;
    background: var(--bd-fine);
    margin: 22px 0;
}

/* ---------- Panel «Ordenar productos» ---------- */
/* Sube al sidebar la vista, el orden y los productos por página. Los estilos de
   `.fnr-select` y `.fnr-viewsw` viven en grid-filtro.css (son de la toolbar que
   este panel sustituye) y llegan aquí porque ambas hojas cargan en la misma
   página; lo de abajo es solo lo propio del panel más lo que hay que reajustar
   al meterlos en una columna estrecha.
   El panel nace `hidden` y lo enciende catalogo-filtro.js: sin JavaScript estos
   controles no refrescan nada, así que no se enseñan. */
.fnr-sortpanel {
    border: 1px solid var(--bd);
    border-top: 3px solid var(--fanor-red);
    border-radius: 0 0 6px 6px;
    padding: 14px;
    margin-bottom: 22px;
}

.fnr-sortpanel__title {
    font-family: var(--fanor-font-display);
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--fanor-black);
    margin-bottom: 12px;
}

.fnr-sortpanel .fnr-viewsw {
    margin-bottom: 13px;
}

.fnr-sortpanel__row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.fnr-sortpanel__lab {
    font-size: 13px;
    color: var(--fanor-gray-3);
    white-space: nowrap;
}

/* El selector se come el resto de la fila: en 260px no sobra ancho para que las
   dos filas queden con los desplegables a distinta anchura según el rótulo. */
.fnr-sortpanel__row .fnr-select {
    flex: 1;
    min-width: 0;
}

.fnr-sortpanel__row .fnr-select select {
    width: 100%;
    height: 36px;
}

.fnr-sortpanel__range {
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid var(--bd-fine);
    font-size: 13px;
    color: var(--fanor-gray);
}

/* En compacto manda la barra «Filtrar / Ordenar» del grid: el panel sobraría
   dentro del bottom sheet, que es para filtros. */
.fnr-filter.is-compact .fnr-sortpanel {
    display: none;
}

/* ---------- Tu vehículo ---------- */
.fnr-veh {
    margin-top: 22px;
    border: 1px solid var(--fnr-vehicle-border);
    border-top: 3px solid var(--fanor-red);
    border-radius: 0 0 6px 6px;
    background: var(--fnr-vehicle-bg);
    padding: 13px 14px;
}

.fnr-veh__label {
    font-family: var(--fanor-font-display);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--fanor-gray);
    margin-bottom: 9px;
}

.fnr-veh__row {
    display: flex;
    align-items: center;
    gap: 9px;
}

.fnr-veh__name {
    font-family: var(--fanor-font-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--fnr-vehicle-text);
    line-height: 1.2;
}

.fnr-veh__change {
    margin-top: 11px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fanor-red);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-family: inherit;
}

.fnr-veh__sep {
    height: 1px;
    background: #E6E6E6;
    margin: 13px 0 12px;
}

.fnr-veh--empty p {
    font-size: 12.5px;
    color: var(--fnr-empty-text);
    line-height: 1.45;
    margin: 0 0 12px;
}

.fnr-veh__head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 9px;
    font-family: var(--fanor-font-display);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--fanor-black);
}

.fnr-veh--empty {
    background: var(--fnr-empty-bg);
    border-color: var(--fnr-empty-border);
}

.fnr-veh__empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fnr-empty-icon);
    flex: 0 0 auto;
}

.fnr-veh__empty-icon svg {
    width: 22px;
    height: 22px;
}

.fnr-btn-primary--vehicle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--fnr-empty-btn-height);
    border-radius: var(--fnr-empty-btn-radius);
    background: var(--fnr-empty-btn-bg);
    color: var(--fnr-empty-btn-text);
}

.fnr-btn-primary--vehicle:hover {
    background: var(--fnr-empty-btn-hover);
}

.fnr-veh__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.fnr-veh__button-icon svg,
.fnr-veh__button-icon i {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

/* ---------- Toggle (switch) ---------- */
.fnr-toggle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.fnr-toggle__track {
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 11px;
    background: #D0D0D0;
    transition: background .2s;
    flex-shrink: 0;
}

.fnr-toggle.is-on .fnr-toggle__track {
    background: var(--fnr-price-color);
}

.fnr-toggle__knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
    transition: left .2s;
}

.fnr-toggle.is-on .fnr-toggle__knob {
    left: 18px;
}

.fnr-toggle__txt {
    flex: 1;
    min-width: 0;
    /* white-space normal a la fuerza: el <button> del toggle puede heredar
       `white-space: nowrap` del tema/Elementor, y entonces el texto no envolvía y
       se salía del sidebar. overflow-wrap parte palabras larguísimas por si acaso. */
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 12.5px;
    color: var(--fanor-black);
    line-height: 1.3;
    padding-top: 2px;
}

/* ---------- Bloques genéricos ---------- */
.fnr-block__title {
    font-family: var(--fanor-font-display);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--fanor-black);
    margin-bottom: 5px;
}

.fnr-block__sub {
    font-size: 11.5px;
    color: var(--fanor-red);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 11px;
}

/* ---------- Árbol categorías ---------- */
.fnr-node__row {
    display: flex;
    align-items: center;
    gap: 6px;
    /* Separación vertical configurable (Estilo → "Separación entre categorías").
       Fallback 7px = default holgado del diseño, también para instancias viejas
       cuyo CSS de Elementor aún no define la variable. */
    padding: var(--fnr-cat-gap, 7px) 0;
}

.fnr-check {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    cursor: pointer;
    min-width: 0;
    position: relative;
}

.fnr-check__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.fnr-check__box {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    border: 1.5px solid #bbb;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all .15s;
}

.fnr-check__input:checked ~ .fnr-check__box {
    background: var(--fnr-category-active);
    border-color: var(--fnr-category-active);
}

.fnr-check__label {
    font-size: 13.5px;
    color: var(--fnr-category-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fnr-check__input:checked ~ .fnr-check__label {
    color: var(--fnr-category-active);
    font-weight: 600;
}

.fnr-check--sm .fnr-check__box {
    width: 16px;
    height: 16px;
}

.fnr-check--sm .fnr-check__label {
    font-size: 12.5px;
}

.fnr-node__children {
    display: flex;
    flex-direction: column;
    padding-left: 28px;
    margin-bottom: var(--fnr-cat-gap, 7px);
}

/* Subcategorías: misma separación que las filas padre (antes iban pegadas). */
.fnr-node__children .fnr-check {
    padding: var(--fnr-cat-gap, 7px) 0;
}

.fnr-chev {
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--fanor-gray-2);
    padding: 0;
}

.fnr-chev svg {
    transition: transform .15s;
}

.fnr-chev.is-open svg {
    transform: rotate(180deg);
}

/* Fix: el chevron (SVG con stroke=currentColor) desaparecía al hacer click porque
   el tema/Elementor ponía el color del <button> en blanco en :focus/:active. Fijamos
   el color del icono en todos los estados (doble clase raíz + !important para ganar). */
.fnr-filter.fnr-filter .fnr-chev,
.fnr-filter.fnr-filter .fnr-chev:hover,
.fnr-filter.fnr-filter .fnr-chev:focus,
.fnr-filter.fnr-filter .fnr-chev:active {
    color: var(--fanor-gray-2) !important;
}

.fnr-tree__empty {
    font-size: 12.5px;
    color: var(--fanor-gray-2);
    margin: 4px 0 0;
}

/* ---------- Precio slider ---------- */
.fnr-price {
    padding: 0 9px;
}

.fnr-price.is-no-slider .fnr-price__track,
.fnr-price.is-no-slider .fnr-price__ticks,
.fnr-price.is-no-slider .fnr-price__ends {
    display: none;
}

.fnr-price__track {
    position: relative;
    height: 22px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.fnr-price__rail {
    position: absolute;
    left: 0;
    right: 0;
    height: 5px;
    border-radius: 3px;
    background: var(--bd);
}

.fnr-price__fill {
    position: absolute;
    height: 5px;
    border-radius: 3px;
    background: var(--fnr-price-color);
}

.fnr-price__knob {
    position: absolute;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--fnr-price-color);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .28);
    cursor: grab;
    touch-action: none;
    z-index: 2;
}

.fnr-price__knob:active {
    cursor: grabbing;
}

.fnr-price__ticks {
    height: 7px;
    margin-top: 3px;
    background-image: repeating-linear-gradient(90deg, #D8D8D8 0, #D8D8D8 1px, transparent 1px, transparent 5%);
}

.fnr-price__ends {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
}

.fnr-price__ends span {
    font-size: 11.5px;
    color: var(--fanor-gray-2);
}

.fnr-price__inputs {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-top: 14px;
}

.fnr-field {
    flex: 1;
    min-width: 0;
}

.fnr-field__lab {
    font-size: 11px;
    color: var(--fanor-gray);
    margin-bottom: 4px;
}

.fnr-field__wrap {
    position: relative;
}

.fnr-field__pre {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--fanor-gray);
    pointer-events: none;
}

.fnr-field__wrap input {
    width: 100%;
    min-width: 0;
    height: 38px;
    border: 1px solid var(--bd);
    border-radius: 4px;
    padding: 0 8px 0 22px;
    font-size: 13px;
    color: var(--fanor-black);
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
}

.fnr-field__wrap input:focus {
    border-color: var(--fnr-price-color);
}

/* ---------- Botones ---------- */
.fnr-btn-primary {
    width: 100%;
    background: var(--fnr-apply-bg);
    color: var(--fnr-apply-text);
    border: none;
    border-radius: 4px;
    height: 40px;
    font-family: var(--fanor-font-display);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .4px;
    cursor: pointer;
    transition: background .2s;
}

.fnr-btn-primary--lg {
    height: 44px;
    font-size: 14px;
    letter-spacing: .5px;
    margin-top: 24px;
}

.fnr-btn-primary:hover {
    background: var(--fnr-apply-hover);
}

.fnr-btn-text {
    width: 100%;
    margin-top: 10px;
    background: none;
    border: none;
    color: var(--fanor-gray);
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-family: inherit;
}

.fnr-btn-text:hover {
    color: var(--fanor-red);
}

/* ═══════════════════════════════════════════════════════════════════════
   MODO COMPACTO — el sidebar se convierte en BOTTOM SHEET
   Se activa por la clase `.fnr-filter.is-compact`, que el JS (catalogo-filtro.js)
   sincroniza con el ANCHO DEL CONTAINER del grid (ResizeObserver), no con el
   viewport. El disparador (barra "Filtrar") vive en el widget del grid; aquí el
   mismo .fnr-filter se transforma in place en un panel inferior deslizable (el
   markup no cambia). El panel sigue position:fixed (ancho de viewport, correcto
   en un sheet móvil).
   ═══════════════════════════════════════════════════════════════════════ */

/* Chrome del sheet: oculto en desktop (se activa solo dentro del media query). */
.fnr-sheet__overlay,
.fnr-sheet__handle,
.fnr-sheet__header,
.fnr-sheet__footer {
    display: none;
}

/* Bloquea el scroll del documento mientras el sheet está abierto. */
body.fnr-noscroll {
    overflow: hidden;
}

/* En modo compacto el sidebar NO se muestra en línea; solo como sheet al abrirlo. */
.fnr-filter.is-compact {
    display: none;
}

    /* Capas: las mismas que el minicarrito (header-minicart.css, 100000/100001).
       Con 300/301 el botón flotante de Joinchat (z-index 9000) quedaba ENCIMA del
       sheet y tapaba «Ver productos». Siguen por debajo del toast de Fanor (999999). */
    .fnr-sheet__overlay:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .5);
        z-index: 100000;
        animation: fnrSheetFade .2s ease;
    }

.fnr-filter.is-compact.is-sheet-open {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 85vh;
        max-height: 85vh;
        z-index: 100001;
        padding: 0;
        border-radius: var(--fnr-sheet-radius) var(--fnr-sheet-radius) 0 0;
        background: var(--fnr-sheet-bg);
        box-shadow: 0 -8px 30px rgba(0, 0, 0, .25);
        transform: translateY(100%);
        transition: transform .28s cubic-bezier(.22, 1, .36, 1);
    }

    .fnr-filter.is-compact.is-sheet-open.is-sheet-shown {
        transform: translateY(0);
    }

    /* Handle (barra de arrastre) */
    .fnr-filter.is-compact.is-sheet-open .fnr-sheet__handle {
        display: flex;
        justify-content: center;
        flex: 0 0 auto;
        padding: 12px 0 0;
        touch-action: none;
    }

    .fnr-filter.is-compact.is-sheet-open .fnr-sheet__handle span {
        width: 42px;
        height: 5px;
        border-radius: 3px;
        background: #DADADA;
    }

    /* Header fijo */
    .fnr-filter.is-compact.is-sheet-open .fnr-sheet__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 0 0 auto;
        padding: 14px 20px 16px;
        border-bottom: 1px solid var(--bd-fine);
    }

    .fnr-sheet__title {
        margin: 0;
        font-family: var(--fanor-font-display);
        font-weight: 900;
        font-size: 20px;
        text-transform: uppercase;
        letter-spacing: .5px;
        color: var(--fanor-black);
    }

    .fnr-sheet__title span {
        color: var(--fanor-red);
    }

    .fnr-sheet__close {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--fanor-gray);
        padding: 6px;
        margin: -6px;
    }

    .fnr-sheet__close:hover {
        color: var(--fanor-red);
    }

    /* Cuerpo scrollable (= .fnr-sheet__body): expandir subcategorías crece aquí,
       el panel mantiene su altura fija. */
    .fnr-filter.is-compact.is-sheet-open .fnr-filter__scroll {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 18px 20px;
    }

    /* En el sheet el título lo da el header; ocultamos el título interno y los
       botones apply/clear del cuerpo (los sustituye el footer fijo). */
    .fnr-filter.is-compact.is-sheet-open .fnr-filter__title,
    .fnr-filter.is-compact.is-sheet-open .fnr-filter__scroll [data-fnr-apply],
    .fnr-filter.is-compact.is-sheet-open .fnr-filter__scroll [data-fnr-clear] {
        display: none;
    }

    /* Footer fijo */
    .fnr-filter.is-compact.is-sheet-open .fnr-sheet__footer {
        display: flex;
        gap: 12px;
        flex: 0 0 auto;
        padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--bd-fine);
    }

    .fnr-sheet__clear {
        flex: 1;
        height: 50px;
        background: #fff;
        border: 1.5px solid #D1D5DB;
        border-radius: 6px;
        cursor: pointer;
        font-family: var(--fanor-font-display);
        font-weight: 700;
        font-size: 13.5px;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: var(--fanor-black);
    }

    .fnr-sheet__clear:hover {
        border-color: var(--fanor-black);
    }

.fnr-sheet__apply {
        flex: 1.4;
        height: 50px;
         background: var(--fnr-apply-bg);
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-family: var(--fanor-font-display);
        font-weight: 700;
        font-size: 13.5px;
        text-transform: uppercase;
        letter-spacing: .4px;
         color: var(--fnr-apply-text);
    }

.fnr-sheet__apply:hover {
         background: var(--fnr-apply-hover);
    }

    /* El reset anti-hover fuerza `background:transparent !important` a todo
       button:not(.fnr-btn-primary); reafirmamos el rojo del botón "Ver productos"
       con specificity (0,3,1) declarado DESPUÉS para que gane. */
.fnr-filter.fnr-filter button.fnr-sheet__apply,
    .fnr-filter.fnr-filter button.fnr-sheet__apply:focus,
    .fnr-filter.fnr-filter button.fnr-sheet__apply:active {
        background: var(--fnr-apply-bg) !important;
        color: var(--fnr-apply-text) !important;
    }

    .fnr-filter.fnr-filter button.fnr-sheet__apply:hover {
        background: var(--fnr-apply-hover) !important;
    }

@keyframes fnrSheetFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Táctil (sin hover real): evita el fondo rojo/rosa "pegado" tras tocar en
   móvil. Neutraliza el hover del tema en las filas de categoría (<label>, que
   escapan al reset a/button) y devuelve los botones a su estado normal. En
   escritorio (hover real) el hover sigue intacto. ── */
@media (hover: none) {
    .fnr-filter .fnr-check:hover,
    .fnr-filter .fnr-check:active { background: transparent !important; }
    .fnr-filter.fnr-filter .fnr-btn-primary:hover { background: var(--fanor-red) !important; }
    .fnr-btn-text:hover { color: var(--fanor-gray); }
}

@media (pointer: coarse) {
    .fnr-field__wrap input {
        font-size: 16px;
    }
}