/**
 * Fanor · Producto · Grid Filtrado (columna derecha). Solo desktop (>=1024px).
 * Las cards reutilizan .fanor-prod-grid__* (productos-grid.css); aquí va el
 * contenedor, toolbar, vista lista y paginación.
 */

.fnr-results {
    --fanor-red: #CC0000;
    --fanor-black: #1A1A1A;
    --fanor-gray: #888888;
    --fanor-gray-2: #999999;
    --bd: #E0E0E0;
    --bd-fine: #EEEEEE;

    /* La card reutiliza .fanor-prod-grid__btn, cuyo fondo es var(--fanor-grid-red).
       Ese token vive en .fanor-prod-grid (el grid "Más vendidos"), NO aquí, así que
       el botón salía con texto blanco sobre fondo transparente = INVISIBLE. Lo
       definimos para que el botón "Agregar al carrito" se vea (igual que el otro). */
    --fanor-grid-red: var(--fanor-red, #CC0000);
    --fanor-grid-red-hover: #A80000;

    /* Widget normal de Elementor: ocupa TODO el ancho del container (sin restos
       del layout flex fijo: nada de flex/width:260px). El ancho y el espaciado
       lateral los controla el container; aquí no metemos padding lateral propio. */
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 26px 0 44px;
    font-family: var(--fanor-font-body);
    box-sizing: border-box;

    /* Contexto de container query: el grid, la barra dual y la card reaccionan al
       ANCHO DE ESTE container (no al viewport), para adaptarse cuando el widget se
       coloca en containers angostos o anidados. Seguro: dentro no hay position:fixed
       (el sheet vive en el widget de filtro); los absolutos (sortmenu, botón, badge)
       se anclan a ancestros posicionados más cercanos. */
    container-type: inline-size;
    container-name: fnrgrid;
}

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

/* ── Reset anti-hover de Elementor / tema (mismo criterio que header-base.css) ──
   Neutraliza el anillo de sombra, el "lift" con transform, filtros y el fondo
   "rosa" que Elementor inyecta a <a>/<button> en hover/focus/active (toolbar,
   cuadrícula/lista, paginación, breadcrumb y las cards reutilizadas). NO tocamos
   text-decoration ni los fondos/colores propios del widget. */
.fnr-results a,
.fnr-results a:hover,
.fnr-results a:focus,
.fnr-results a:active,
.fnr-results button,
.fnr-results button:hover,
.fnr-results button:focus,
.fnr-results 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-results a:focus-visible,
.fnr-results button:focus-visible {
    outline: 2px solid #9AA0A6 !important;
    outline-offset: 2px;
}

/* Fondo en hover/focus/active FIJADO con !important para que ningún tema/Elementor
   cuele su color (antes se colaba en la vista cuadrícula/lista junto a "ordenar" y
   en la paginación). Los botones de fondo blanco se mantienen blancos; la página
   activa y el botón rojo de la card se respetan; los enlaces ghost (breadcrumb,
   nombre/imagen de card) van transparentes. */
.fnr-results.fnr-results .fnr-viewsw__btn,
.fnr-results.fnr-results .fnr-viewsw__btn:hover,
.fnr-results.fnr-results .fnr-viewsw__btn:focus,
.fnr-results.fnr-results .fnr-viewsw__btn:active,
.fnr-results.fnr-results .fnr-pager__nav,
.fnr-results.fnr-results .fnr-pager__nav:hover,
.fnr-results.fnr-results .fnr-pager__nav:focus,
.fnr-results.fnr-results .fnr-pager__nav:active,
.fnr-results.fnr-results .fnr-pager__num,
.fnr-results.fnr-results .fnr-pager__num:hover,
.fnr-results.fnr-results .fnr-pager__num:focus,
.fnr-results.fnr-results .fnr-pager__num:active {
    background: #fff !important;
}

.fnr-results.fnr-results .fnr-pager__num.is-on,
.fnr-results.fnr-results .fnr-pager__num.is-on:hover,
.fnr-results.fnr-results .fnr-pager__num.is-on:focus {
    background: var(--fanor-red) !important;
}

.fnr-results.fnr-results a:not(.fanor-prod-grid__btn):hover,
.fnr-results.fnr-results a:not(.fanor-prod-grid__btn):focus,
.fnr-results.fnr-results a:not(.fanor-prod-grid__btn):active {
    background: transparent !important;
}

/* ---------- Cabecera (migas + título) ---------- */
/* La cabecera se sale hacia la izquierda hasta el borde del sidebar para ocupar
   TODO el ancho útil, como en el diseño: las migas arrancan donde arranca la
   página (no donde arrancan las cards) y el título queda centrado sobre el ancho
   completo, no sobre la parrilla. Sin esto quedaba un hueco muerto encima del
   sidebar y el título descentrado hacia la derecha.

   El desplazamiento lo mide y publica catalogo-filtro.js (ver alinearCabecera):
   es la distancia real entre el borde izquierdo del sidebar y el del grid, así
   que sigue valiendo si se cambia el reparto de columnas en Elementor. Sin JS
   vale 0 y la cabecera se queda dentro de su columna, como antes.

   Se sale del container sin recortarse: `.fnr-results` usa `container-type:
   inline-size`, que contiene tamaño y disposición pero NO pinta recorte. */
.fnr-tophead {
    margin-left: calc(-1 * var(--fnr-cab-izq, 0px));
}
/* Por defecto se apilan, como siempre. Con `is-center` pasan a la misma fila en
   tres columnas: las migas ancladas a la izquierda, el título en la del medio y
   una tercera columna VACÍA del mismo peso que la primera. Esa tercera columna es
   la que centra de verdad el título respecto al ancho útil; sin ella el título
   quedaría centrado en el hueco sobrante de las migas, que es otra cosa. */
.fnr-tophead.is-center {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 18px;
    margin-bottom: 22px;
}

.fnr-tophead.is-center .fnr-crumb {
    grid-column: 1;
    margin-bottom: 0;
}

.fnr-tophead.is-center .fnr-head {
    grid-column: 2;
    min-width: 0;
}

.fnr-tophead.is-center .fnr-results__title {
    text-align: center;
}

/* ---------- Breadcrumb ---------- */
.fnr-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--fanor-gray);
    margin-bottom: 14px;
}

.fnr-crumb a {
    color: var(--fanor-gray);
    text-decoration: none;
}

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

.fnr-crumb span {
    color: var(--fanor-black);
    font-weight: 500;
}

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

/* ---------- Toolbar ---------- */
/* Con el panel «Ordenar productos» encendido en el sidebar, la toolbar repetiría
   orden y vista: se esconde, pero NO se quita del DOM. Su <select> sigue siendo
   la fuente de las opciones del espejo del panel y del dropdown «Ordenar» de la
   barra móvil; borrarlo dejaría a los dos sin de dónde leer. La clase la pone
   catalogo-filtro.js solo cuando el panel llegó a encenderse de verdad. */
.fnr-results.has-sortpanel .fnr-toolbar {
    display: none;
}

/* Sin toolbar, la cabecera solo necesita aire por debajo. El filete que la cerraba
   se quitó a petición: con la página en gris y las cards en blanco la separación
   ya la hace el fondo, y la línea partía el ancho en dos sin necesidad. */
.fnr-results.has-sortpanel .fnr-tophead {
    padding-bottom: 18px;
    margin-bottom: 24px;
}

.fnr-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 18px 0 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--bd-fine);
}

.fnr-toolbar__count {
    font-size: 14px;
    color: var(--fanor-gray);
}

.fnr-toolbar__right {
    display: flex;
    align-items: center;
    gap: 16px;
}

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

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

.fnr-select {
    position: relative;
}

.fnr-select select {
    appearance: none;
    -webkit-appearance: none;
    height: 40px;
    border: 1px solid var(--bd);
    border-radius: 4px;
    padding: 0 36px 0 13px;
    font-size: 13px;
    color: #444;
    background: #fff;
    cursor: pointer;
    outline: none;
    font-family: inherit;
}

.fnr-select select:focus {
    border-color: var(--fanor-red);
}

.fnr-select svg {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.fnr-viewsw {
    display: flex;
    gap: 6px;
}

.fnr-viewsw__btn {
    width: 38px;
    height: 38px;
    /* El tema pone `padding: 8px 16px` a todo <button>. Sobre una caja de 38px
       eso deja 6px de contenido y el ícono, que es un ítem flex, se encogía a
       4px de ancho: los cuadraditos salían como una rayita. Venía de antes de
       que existiera el panel del sidebar (afectaba igual a la toolbar). */
    padding: 0;
    border: 1px solid var(--bd);
    background: #fff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s;
    color: #888;
}

.fnr-viewsw__btn.is-on {
    border-color: var(--fanor-red);
    color: var(--fanor-red);
}

/* ---------- Grid contenedor ---------- */
/* Columnas por dispositivo configurables en Ajustes → Widgets (variables
   --fnr-cols-* inyectadas por el widget; fallback = 3/2/1). */
.fnr-grid {
    align-items: stretch;
    display: grid;
    grid-template-columns: repeat(var(--fnr-cols-desktop, 3), minmax(0, 1fr));
    gap: var(--fanor-grid-gap, 18px);
    transition: opacity .15s ease;
}

/* Los ítems del grid pueden encogerse por debajo de su contenido (evita que un
   título largo ensanche la columna y desborde el container). */
.fnr-grid > * {
    min-width: 0;
}

.fnr-grid:not(.is-list) > .fanor-prod-grid__card {
    height: 100%;
}

.fnr-grid:not(.is-list) > .fnr-cards__loop {
    height: 100%;
}

/* Responsive por ANCHO DE CONTAINER (no viewport): escritorio → tablet → móvil.
   La vista lista fuerza 1 columna aparte.
   OJO: los umbrales son del ANCHO DEL CONTAINER (.fnr-results), no del viewport.
   El grid vive en la columna de contenido (junto al sidebar), que en escritorio
   mide ~800–1000px: con umbrales de viewport (1024/768) esa columna caía siempre
   en la rama "tablet" y quedaba pegada a 2 col. Se calibran a anchos de container
   reales: una card va cómoda ~180–220px → 3 col ≈ 640px, 4 col ≈ 860px. Así una
   columna de escritorio ancha respeta --fnr-cols-desktop y solo baja a tablet/móvil
   cuando el container es realmente estrecho (anidado/móvil). */
@container fnrgrid (max-width: 640px) {
    .fnr-grid:not(.is-list) { grid-template-columns: repeat(var(--fnr-cols-tablet, 2), minmax(0, 1fr)); }
}

@container fnrgrid (max-width: 420px) {
    .fnr-grid:not(.is-list) { grid-template-columns: repeat(var(--fnr-cols-movil, 1), minmax(0, 1fr)); }
}

.fnr-grid.is-loading {
    opacity: .45;
    pointer-events: none;
}

/* ---------- Celda de plantilla del Theme Builder ----------
   El catálogo pinta cada producto con un Loop Item de Elementor (foto, Verifica,
   código, título, precio, Agregar al carrito, logo). Si solo se estira la celda,
   el container de Elementor mete el aire en la FOTO. Hay que llenar la celda y
   dar el extra al bloque que lleva el título, para que el botón y el logo
   queden abajo. `min-width: 0` evita que un nombre largo ensanche la columna. */
.fnr-grid:not(.is-list) .fnr-cards__loop {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
}

.fnr-grid:not(.is-list) .fnr-cards__loop > .elementor,
.fnr-grid:not(.is-list) .fnr-cards__loop > .elementor > .e-con.e-parent,
.fnr-grid:not(.is-list) .fnr-cards__loop > .elementor > .e-con.e-parent > .e-con-inner {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    height: 100%;
    justify-content: flex-start;
    min-height: 0;
    min-width: 0;
}

/* Foto y logo Wagner: no crecen. Sin esto el hueco se abría bajo la cámara. */
.fnr-grid:not(.is-list) .fnr-cards__loop .e-con-inner > .e-con:has(.elementor-widget-image):not(:has(.elementor-widget-woocommerce-product-title)):not(:has(.elementor-widget-theme-post-title)) {
    flex: 0 0 auto;
}

/* Bloque del título (código / nombre / precio): absorbe el alto extra. */
.fnr-grid:not(.is-list) .fnr-cards__loop .e-con-inner > .e-con:has(.elementor-widget-woocommerce-product-title),
.fnr-grid:not(.is-list) .fnr-cards__loop .e-con-inner > .e-con:has(.elementor-widget-theme-post-title),
.fnr-grid:not(.is-list) .fnr-cards__loop .e-con:has(> .elementor-widget-woocommerce-product-title),
.fnr-grid:not(.is-list) .fnr-cards__loop .e-con:has(> .elementor-widget-theme-post-title) {
    flex: 1 1 auto;
    min-height: 0;
}

.fnr-grid.is-list .fnr-cards__loop {
    height: auto;
}

.fnr-cards__loop > * {
    min-width: 0;
}

.fnr-grid__empty {
    grid-column: 1 / -1;
    padding: 48px 16px;
    text-align: center;
    color: var(--fanor-gray);
    font-size: 15px;
}

/* ---------- Vista lista ---------- */
.fnr-grid.is-list {
    grid-template-columns: 1fr;
}

.fnr-grid.is-list .fanor-prod-grid__card--list {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 18px;
    align-items: stretch;
}

/* En container angosto la card lista se apila (imagen arriba): la columna fija de
   200px desbordaría. */
@container fnrgrid (max-width: 560px) {
    .fnr-grid.is-list .fanor-prod-grid__card--list {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.fnr-grid.is-list .fanor-prod-grid__card--list .fanor-prod-grid__img {
    aspect-ratio: 1 / 1;
}

.fnr-grid.is-list .fanor-prod-grid__card--list .fanor-prod-grid__info {
    padding: 14px 16px 14px 0;
    justify-content: center;
}

/* ---------- Paginación ---------- */
.fnr-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 38px;
}

.fnr-pager__nav {
    width: 38px;
    height: 38px;
    border: 1px solid var(--bd);
    background: #fff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #444;
    text-decoration: none;
}

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

.fnr-pager__num {
    min-width: 38px;
    height: 38px;
    padding: 0 6px;
    border: 1px solid var(--bd);
    background: #fff;
    color: #444;
    border-radius: 4px;
    font-family: var(--fanor-font-display);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.fnr-pager__num.is-on {
    background: var(--fanor-red);
    border-color: var(--fanor-red);
    color: #fff;
}

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

.fnr-pager__gap {
    color: var(--fanor-gray-2);
    padding: 0 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE ≤768px — estructura de catálogo móvil
   ───────────────────────────────────────────────────────────────────────
   Referencia de estructura: las páginas de categoría de las tiendas de ropa
   grandes (Nike y similares). El ancho útil lo decide el container de
   Elementor: esta parrilla ya no se sangra al bisel. Cuatro decisiones, en
   orden de importancia:

   (1) LA FOTO MANDA. El marco de la card desaparece. El padding lateral lo
       pone el container (si pones 10px, se ven 10px).
   (2) SIN CROMO. Nada de borde, radio ni fondo blanco por card: la foto va
       sobre un plato gris y el texto suelto sobre el fondo de página. Con el
       marco fuera, que dos cards de una fila tengan textos de distinto largo
       deja de verse como un descuadre.
   (3) CABECERA DE UNA LÍNEA. Título y conteo comparten renglón y cierran con
       una regla; la toolbar de escritorio se retira.
   (4) FILTROS EN PÍLDORAS. Tira desplazable en horizontal en vez de la barra
       dual a caja: mismo alcance, menos peso visual, y crece si mañana se
       añaden facetas.
   ═══════════════════════════════════════════════════════════════════════ */

/* Ocultos en desktop (se activan dentro del container query). */
.fnr-filterbar,
.fnr-count {
    display: none;
}

@container fnrgrid (max-width: 768px) {
    .fnr-results {
        /* Padding del texto de la card respecto a la foto, no respecto al teléfono. */
        --fnr-inset: 12px;
        padding: 12px 0 30px;
    }

    /* ---------- Cabecera ---------- */
    /* El título centrado es cosa de escritorio: en un teléfono la cabecera se
       apila y se lee alineada a la izquierda, como el resto de la columna. */
    .fnr-tophead,
    .fnr-tophead.is-center,
    .fnr-results.has-sortpanel .fnr-tophead {
        display: block;
        column-gap: 0;
        padding-bottom: 0;
        margin-bottom: 0;
        margin-left: 0;
    }

    .fnr-tophead.is-center .fnr-results__title {
        text-align: left;
    }

    .fnr-crumb {
        font-size: 12px;
        gap: 6px;
        margin-bottom: 7px;
    }

    .fnr-tophead.is-center .fnr-crumb {
        margin-bottom: 7px;
    }

    /* Sin filete, igual que en escritorio: la cabecera se despide con aire, no
       con una raya. */
    .fnr-head {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 2px 9px;
        padding-bottom: 12px;
    }

    .fnr-results__title {
        font-size: 21px;
        letter-spacing: .2px;
    }

    /* `block` y no `inline`: dentro de .fnr-head el flex lo convierte igualmente en
       ítem alineado por línea base, y si el título está apagado (no hay .fnr-head)
       se comporta como el párrafo suelto que era. Una sola regla para los dos casos. */
    .fnr-count {
        display: block;
        margin: 0;
        font-family: var(--fanor-font-body);
        font-size: 13px;
        color: var(--fanor-gray);
        white-space: nowrap;
    }

    .fnr-toolbar {
        display: none;
    }

    /* ---------- Tira de píldoras ---------- */
    .fnr-filterbar {
        display: block;
        position: relative;
        margin: 12px 0 14px;
    }

    /* Sangrada igual que la parrilla y con inset devuelto por padding: la primera
       píldora arranca alineada con el título y la última puede desplazarse hasta
       el borde en vez de chocar contra un margen. */
    .fnr-filterbar__row {
        display: flex;
        align-items: center;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        border: 0;
        border-radius: 0;
    }

    .fnr-filterbar__row::-webkit-scrollbar {
        display: none;
    }

    .fnr-filterbar__btn {
        flex: 0 0 auto;
        height: 38px;
        padding: 0 15px;
        background: #fff;
        border: 1px solid #DCDCDC;
        border-radius: 999px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        font-family: var(--fanor-font-body);
        font-weight: 500;
        font-size: 14px;
        text-transform: none;
        letter-spacing: 0;
        color: var(--fanor-black);
        white-space: nowrap;
    }

    .fnr-filterbar__btn svg {
        color: currentColor;
        flex: 0 0 auto;
    }

    .fnr-filterbar__caret {
        margin-left: -2px;
        color: #7A7A7A;
    }

    /* Píldora con filtros activos: se marca con borde negro (como el chip activo de
       la referencia), no con relleno rojo —el rojo es de las acciones de compra. */
    .fnr-filterbar__btn.has-activos {
        border-color: var(--fanor-black);
        font-weight: 600;
    }

    .fnr-filterbar__badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 19px;
        height: 19px;
        padding: 0 5px;
        border-radius: 999px;
        background: var(--fanor-red);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
    }

    .fnr-filterbar__badge[hidden] {
        display: none;
    }

    /* La barra dual ya no existe: el separador sobra. */
    .fnr-filterbar__divider {
        display: none;
    }

    .fnr-filterbar__btn[data-fnr-open-sort][data-open="true"] {
        background: #F2F2F2;
    }

    /* Dropdown Ordenar (flotante, no empuja el contenido). Nunca más ancho que el
       container (evita que se salga por la derecha en containers angostos). */
    .fnr-sortmenu {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        width: min(230px, 100%);
        z-index: 60;
        background: #fff;
        border: 1px solid #E8E8E8;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
    }

    .fnr-sortmenu[hidden] {
        display: none;
    }

    .fnr-sortmenu__opt {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 13px 16px;
        background: #fff;
        border: none;
        border-bottom: 1px solid #F4F4F4;
        cursor: pointer;
        text-align: left;
        font-family: var(--fanor-font-body);
        font-size: 14px;
        font-weight: 400;
        color: #444;
    }

    .fnr-sortmenu__opt:last-child {
        border-bottom: none;
    }

    .fnr-sortmenu__opt:hover {
        background: #FAFAFA;
    }

    .fnr-sortmenu__opt.is-active {
        font-weight: 600;
        color: var(--fanor-red);
    }

    .fnr-sortmenu__opt .chk {
        flex: 0 0 auto;
        color: var(--fanor-red);
    }

    .fnr-sortmenu__opt:not(.is-active) .chk {
        display: none;
    }

    /* Blindaje anti-tema (mismo criterio que viewsw/pager): fija fondos Y color
       para que ningún tema cuele su "hover rosa" ni ponga el texto en blanco. */
    .fnr-results.fnr-results .fnr-filterbar__btn,
    .fnr-results.fnr-results .fnr-filterbar__btn:hover,
    .fnr-results.fnr-results .fnr-filterbar__btn:focus,
    .fnr-results.fnr-results .fnr-filterbar__btn:active {
        background: #fff !important;
        color: var(--fanor-black) !important;
    }

    .fnr-results.fnr-results .fnr-filterbar__btn[data-fnr-open-sort][data-open="true"],
    .fnr-results.fnr-results .fnr-filterbar__btn[data-fnr-open-sort][data-open="true"]:hover {
        background: #F2F2F2 !important;
        color: var(--fanor-black) !important;
    }

    .fnr-results.fnr-results .fnr-sortmenu__opt,
    .fnr-results.fnr-results .fnr-sortmenu__opt:focus,
    .fnr-results.fnr-results .fnr-sortmenu__opt:active {
        background: #fff !important;
    }

    .fnr-results.fnr-results .fnr-sortmenu__opt:hover {
        background: #FAFAFA !important;
    }

    /* ---------- Parrilla ---------- */
    /* El hueco lo pone el control «Separación de la cuadrícula» (--fanor-grid-gap),
       con valor propio por escritorio / tablet / móvil. La vista lista sigue a 0:
       las cards van pegadas en una columna. */

    .fnr-grid__empty {
        padding: 40px calc(var(--fnr-inset) + 4px);
    }

    .fnr-pager {
        margin-top: 28px;
    }

    /* La vista lista mantiene su inset (una card por fila a sangre completa se
       leería como bloque suelto, no como lista). */
    .fnr-grid.is-list {
        gap: 0;
    }
}

/* ── Táctil (sin hover real): resetea los :hover rojos que se quedan "pegados"
   tras tocar en móvil (breadcrumb y paginación). En escritorio el :hover sigue. ── */
@media (hover: none) {
    .fnr-crumb a:hover { color: var(--fanor-gray); }
    .fnr-pager__nav:hover { border-color: var(--bd); color: #444; }
    .fnr-pager__num:hover:not(.is-on) { border-color: var(--bd); }
}

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