/*
 * Easy Filter Selector - hoja de estilos del filtro en el frontend.
 *
 * AISLAMIENTO FRENTE AL TEMA DE LA WEB
 * ------------------------------------
 * Todas las reglas de este archivo empiezan por el mismo selector raiz:
 *
 *     .efs-filter:is(#efs#efs,.efs-filter)
 *
 * Es el contenedor del filtro anclado a un selector de id. Se lee asi: ":is()"
 * toma la especificidad de su argumento mas fuerte, que aqui es "#efs#efs" (dos
 * ids, peso 2-0-0), mientras que quien decide a que elemento se aplica la regla
 * es el otro argumento, ".efs-filter". "#efs#efs" no existe ni puede existir
 * (ningun elemento tiene dos ids a la vez), asi que solo aporta peso.
 *
 * Resultado: cada regla del plugin pesa 2-1-0, por encima de lo que usan los
 * temas y los constructores de paginas (.clase, .a .b, #id .clase), de modo que
 * el filtro se ve igual en cualquier web donde se instale. El id de verdad
 * tambien esta: la plantilla pone uno unico por instancia (#efs-filter-1,
 * #efs-filter-2...) para poder apuntar a un filtro concreto desde el panel de
 * ajustes o desde JavaScript, sin repetir ids en la pagina cuando hay varios
 * filtros, que es lo que impide usar un id fijo como prefijo de la hoja.
 *
 * Al tocar este archivo: toda regla nueva empieza por ese selector raiz. Una
 * regla escrita ".efs-card{...}" a secas vuelve a quedar al alcance del tema.
 *
 * VARIABLES DE DISENO
 * -------------------
 * Los colores, el radio, la sombra y la tipografia salen del bloque de
 * variables de aqui abajo. Es la unica superficie que necesita un panel de
 * ajustes: reescribiendo esas variables en el elemento raiz (por ejemplo como
 * estilo en linea sobre #efs-filter-1) cambia el aspecto de toda la hoja sin
 * pelear con la cascada, porque var() se resuelve despues de la especificidad.
 */

  /* Variables de diseno: punto unico de cambio visual. */
  .efs-filter:is(#efs#efs,.efs-filter){
    --efs-font:Arial,Helvetica,sans-serif;
    --efs-line:1.45;
    --efs-bg:#eef2f6;
    --efs-panel:#f4f7fa;
    --efs-border:#cbd4df;
    --efs-text:#102235;
    --efs-muted:#68798b;
    --efs-accent:#0874d1;
    --efs-accent-soft:#e7f2fc;
    --efs-navy:#10283f;
    --efs-navy-2:#173a59;
    --efs-navy-3:#0b1d2d;
    --efs-radius:10px;
    --efs-shadow:0 12px 28px rgba(10,31,50,.13);

    /* Marco exterior del filtro. */
    --efs-frame-bg:#f3f6f9;
    --efs-frame-border:#d7dee7;
    --efs-frame-radius:16px;
    --efs-frame-pad:24px;
    --efs-frame-shadow:0 16px 40px rgba(13,35,56,.07);

    /* Barra superior: buscador y orden. */
    --efs-bar-bg:#0b1d2d;
    --efs-bar-bg-2:#173a59;

    /* Panel de filtros (columna izquierda). Es lo que cambia la pestana Appearance:
       ninguna regla de mas abajo lleva ya el color ni el tamano escrito a mano. */
    --efs-side-bg:#10283f;
    --efs-side-bg-2:#0b1d2d;
    --efs-side-radius:12px;
    --efs-side-title:#ffffff;
    --efs-side-title-size:19px;
    --efs-side-desc:#aebdca;
    --efs-facet-color:#cfdde8;
    --efs-facet-size:12px;
    --efs-term-color:#e9f0f6;
    --efs-term-size:13px;
    --efs-count-color:#91a5b7;
    --efs-term-active-bg:#0874d1;
    --efs-term-active-bg-2:#0c8ce9;
    --efs-term-active-color:#ffffff;

    /* Zona de productos (columna derecha). */
    --efs-heading-color:#10283f;
    --efs-heading-size:25px;
    --efs-heading-bar:#0874d1;
    --efs-results-color:#6c7c8d;
    --efs-card-bg:#ffffff;
    --efs-card-border:#cbd5df;
    --efs-card-radius:11px;
    --efs-card-accent:#10283f;
    --efs-brand-bg:#e9f3fc;
    --efs-brand-color:#0769ba;
    --efs-brand-size:9px;
    --efs-title-color:#11263a;
    --efs-title-hover:#0874d1;
    --efs-title-size:13px;
    --efs-meta-color:#7a8997;
    --efs-meta-size:10px;
    --efs-price-color:#0d2b44;
    --efs-price-size:18px;
    --efs-cart-bg:#0874d1;
    --efs-cart-color:#ffffff;
    --efs-page-active-bg:#10283f;
  }

  .efs-filter:is(#efs#efs,.efs-filter), .efs-filter:is(#efs#efs,.efs-filter) * { box-sizing: border-box; }

  /* Neutraliza lo que el tema deja caer dentro del filtro. La especificidad ya
     gana a las reglas del tema, pero solo para las propiedades que la hoja
     declara: lo que no se declara se hereda del sitio y cambia de web en web.
     Estas se fijan para todo el arbol, y las reglas concretas de mas abajo, que
     pesan mas, siguen mandando donde el diseno dice otra cosa.

     Las heredables van a "inherit" en vez de a un valor fijo: asi cuelgan del
     elemento raiz del filtro (y de sus variables) y no del <body> de la web. */
  .efs-filter:is(#efs#efs,.efs-filter) *{
    font-family:inherit;
    line-height:inherit;
    letter-spacing:inherit;
    word-spacing:inherit;
    text-align:inherit;
    text-transform:none;
    text-indent:0;
    text-shadow:none;
    box-shadow:none;
    float:none;
  }

  /* Neutraliza estilos heredados del tema / page builder */
  .efs-filter:is(#efs#efs,.efs-filter) button{
    font-family:inherit;
    text-transform:none;
    letter-spacing:normal;
    box-shadow:none;
    -webkit-appearance:none;
    appearance:none;
  }

  .efs-filter:is(#efs#efs,.efs-filter) br{ display:none; }
  .efs-filter:is(#efs#efs,.efs-filter) > p:empty{ display:none; margin:0; }

  .efs-filter:is(#efs#efs,.efs-filter){
    width:min(1480px, calc(100% - 36px));
    margin:32px auto 60px;
    color:var(--efs-text);
    font-family:var(--efs-font);
    font-size:16px;
    line-height:var(--efs-line);
    letter-spacing:normal;
    word-spacing:normal;
    text-align:start;
    text-transform:none;
  }

  /* Toolbar: grid fijo y propiedades blindadas, porque el tema de WordPress
     suele pisar width/height/appearance de input y select. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-toolbar{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 190px;
    align-items:center;
    gap:14px;
    margin-bottom:22px;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-mobile-filter{
    display:none;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:0 16px;
    border:1px solid var(--efs-border);
    background:#fff;
    border-radius:11px;
    color:var(--efs-text);
    font-family:inherit;
    font-size:14px;
    font-weight:700;
    line-height:1;
    cursor:pointer;
  }

  /* Maxima especificidad posible via CSS: selector de ID + !important.
     Si el tema igual gana, el bloque enforceToolbarLayout() del script
     aplica estas mismas propiedades como estilo inline. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-search-input,
  .efs-filter:is(#efs#efs,.efs-filter) .efs-sort{
    display:block !important;
    float:none !important;
    position:static !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    height:46px !important;
    min-height:46px !important;
    margin:0 !important;
    border:1px solid var(--efs-border) !important;
    border-radius:11px !important;
    color:var(--efs-text) !important;
    font-family:inherit !important;
    font-size:15px !important;
    line-height:normal !important;
    box-shadow:none !important;
    outline:none !important;
    -webkit-appearance:none !important;
    appearance:none !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-search-input{
    padding:0 40px 0 42px !important;
    background:#fff !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-sort{
    padding:0 34px 0 13px !important;
    font-size:14px !important;
    cursor:pointer;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-search{
    position:relative;
    display:block !important;
    width:100% !important;
    max-width:none !important;
    min-width:0;
    margin:0 !important;
    padding:0 !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-search input,
  .efs-filter:is(#efs#efs,.efs-filter) input.efs-search-input{
    display:block !important;
    float:none !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    height:46px !important;
    min-height:46px;
    margin:0 !important;
    padding:0 40px 0 42px !important;
    border:1px solid var(--efs-border) !important;
    border-radius:11px !important;
    background:#fff !important;
    color:var(--efs-text);
    font-family:inherit;
    font-size:15px;
    line-height:normal;
    box-shadow:none;
    outline:none;
    -webkit-appearance:none;
    appearance:none;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-search input::-webkit-search-cancel-button{
    -webkit-appearance:none;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-sort{
    display:block !important;
    float:none !important;
    width:100% !important;
    max-width:none !important;
    height:46px !important;
    min-height:46px;
    margin:0 !important;
    padding:0 34px 0 13px !important;
    border:1px solid var(--efs-border) !important;
    border-radius:11px !important;
    background-color:#fff !important;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important;
    background-position:right 11px center !important;
    background-size:16px 16px !important;
    color:var(--efs-text);
    font-family:inherit;
    font-size:14px;
    line-height:normal;
    box-shadow:none;
    outline:none;
    -webkit-appearance:none;
    appearance:none;
    cursor:pointer;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-search input:focus,
  .efs-filter:is(#efs#efs,.efs-filter) .efs-sort:focus{
    border-color:#98b7ef !important;
    box-shadow:0 0 0 3px rgba(11,94,215,.09);
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-search-clear{
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    display:grid !important;
    place-items:center;
    width:28px;
    height:28px;
    padding:0 !important;
    border:0 !important;
    border-radius:50% !important;
    background:transparent !important;
    color:var(--efs-muted);
    cursor:pointer;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-search-clear[hidden]{ display:none !important; }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-search-clear:hover{
    background:#f2f4f7 !important;
    color:var(--efs-text);
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-search-clear svg{
    width:14px;
    height:14px;
    stroke:currentColor;
    fill:none;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-search > svg{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    width:18px;
    height:18px;
    stroke:var(--efs-muted);
    fill:none;
    pointer-events:none;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-layout{
    display:grid;
    grid-template-columns:270px minmax(0,1fr);
    gap:30px;
    align-items:start;
  }

  /* Sin barra de desplazamiento propia: al abrir un filtro, la columna crece lo que
     haga falta y se ven todos sus valores de una vez. El unico desplazamiento es el
     de la pagina.

     Una barra dentro de otra obliga a adivinar cuantas opciones quedan escondidas, y
     con el raton encima nunca sabes cual de las dos vas a mover.

     Por eso tampoco va fijada al hacer scroll: lo uno lleva a lo otro. Una columna
     fija mas alta que la pantalla se ancla por arriba y su mitad inferior no hay
     manera de alcanzarla, y evitarlo es lo que obligaba a ponerle el tope de altura
     y, con el, la barra interna. Mejor que los filtros se vayan quedando arriba, al
     alcance de un scroll, que no poder llegar a los ultimos. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-sidebar{
    border:1px solid var(--efs-border);
    border-radius:var(--efs-radius);
    background:#fff;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-side-head{
    position:relative;
    padding:18px 18px 14px;
    border-bottom:1px solid var(--efs-border);
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-side-head h3{
    margin:0 0 4px;
    font-size:17px;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-side-head p{
    margin:0;
    font-size:12px;
    color:var(--efs-muted);
  }

  /* Solo aparece cuando la barra lateral es un panel deslizante: en escritorio es
     una columna mas de la pagina y no hay nada que cerrar. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-side-close{
    display:none;
    position:absolute;
    right:10px;
    top:10px;
    width:40px;
    height:40px;
    padding:0;
    border:0;
    border-radius:8px;
    background:transparent;
    color:inherit;
    cursor:pointer;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-side-close:hover{
    background:rgba(128,128,128,.2);
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-side-close svg{
    width:16px;
    height:16px;
    stroke:currentColor;
    fill:none;
  }

  /* Sin tope de altura: al abrir uno o varios atributos, la barra lateral crece
     lo que haga falta y se ven todos los valores. El unico desplazamiento es el de
     la pagina. En movil si conserva el suyo, porque alli es un panel deslizante
     fijo a la pantalla (ver el bloque @media). */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-facets{
    padding:10px;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-all-btn{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:11px 12px;
    border:0;
    border-radius:9px;
    background:transparent;
    color:var(--efs-text);
    font-size:14px;
    font-weight:700;
    text-align:left;
    cursor:pointer;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-all-btn:hover,
  .efs-filter:is(#efs#efs,.efs-filter) .efs-term:hover{
    background:#f8fafc;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-all-btn.active,
  .efs-filter:is(#efs#efs,.efs-filter) .efs-term.active{
    color:var(--efs-accent);
    background:var(--efs-accent-soft);
    font-weight:700;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-facet{
    margin-top:5px;
    padding-top:6px;
    border-top:1px solid #eef0f3;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-facet-head{
    width:100%;
    display:flex;
    align-items:center;
    gap:8px;
    padding:7px 12px 9px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:var(--efs-muted);
    font-family:inherit;
    font-size:11px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    text-align:left;
    cursor:pointer;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-facet-head:hover{
    background:#f8fafc;
    color:var(--efs-text);
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-facet-head svg{
    flex:0 0 12px;
    width:12px;
    height:12px;
    stroke:currentColor;
    transition:transform .18s ease;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-facet.collapsed .efs-facet-head svg{ transform:rotate(-90deg); }
  .efs-filter:is(#efs#efs,.efs-filter) .efs-facet.collapsed .efs-facet-body{ display:none; }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-facet-label{ flex:1; }

  /* Sin tope de altura ni scroll propio: al abrir una faceta se ven todos sus
     valores de una vez. Un recuadro con barra dentro de otro con barra obliga a
     adivinar cuantas opciones quedan escondidas, y con el raton encima nunca sabes
     cual de las dos vas a mover. La barra lateral entera ya se desplaza sola. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-facet-body{
    overflow:visible;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-facet-badge{
    padding:2px 7px;
    border-radius:999px;
    background:var(--efs-accent-soft);
    color:var(--efs-accent);
    font-size:10px;
    font-weight:700;
    letter-spacing:0;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-term{
    width:100%;
    display:flex;
    align-items:center;
    gap:9px;
    min-height:37px;
    padding:8px 12px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:var(--efs-text);
    font-size:13px;
    text-align:left;
    cursor:pointer;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-check{
    flex:0 0 16px;
    width:16px;
    height:16px;
    display:grid;
    place-items:center;
    border:1.5px solid #cbd2dc;
    border-radius:4px;
    background:#fff;
    transition:border-color .14s ease, background .14s ease;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-term.active .efs-check{
    border-color:var(--efs-accent);
    background:var(--efs-accent);
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-check svg{
    width:10px;
    height:10px;
    stroke:#fff;
    stroke-width:3;
    fill:none;
    opacity:0;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-term.active .efs-check svg{ opacity:1; }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-term-name{
    flex:1;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-count{
    flex:0 0 auto;
    color:#98a2b3;
    font-size:11px;
    font-weight:600;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-main{ min-width:0; }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-results-head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:20px;
    margin-bottom:16px;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-results-head h2{
    margin:0;
    font-size:23px;
    line-height:1.2;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-results-count{
    margin-top:5px;
    color:var(--efs-muted);
    font-size:13px;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-clear{
    display:none;
    border:0;
    background:transparent;
    color:var(--efs-accent);
    font-size:13px;
    font-weight:700;
    cursor:pointer;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-clear.show{ display:inline-block; }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:17px;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-card{
    /* Ancla del enlace extendido: el ::after del titulo se estira sobre esta caja
       para que se pueda pulsar toda la ficha, no solo el nombre del producto. */
    position:relative;
    min-width:0;
    border:1px solid var(--efs-border);
    border-radius:var(--efs-radius);
    overflow:hidden;
    background:#fff;
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-card:hover{
    transform:translateY(-2px);
    box-shadow:var(--efs-shadow);
    border-color:#d5d9e0;
  }

  /* La imagen llena la caja de lado a lado: sin relleno alrededor ni linea que la
     separe del texto. object-fit:cover recorta lo que sobre en vez de dejar franjas
     blancas cuando la foto no es cuadrada. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-image-wrap{
    position:relative;
    aspect-ratio:1/1;
    padding:0;
    background:#fff;
    border-bottom:0;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-image{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-no-image{
    display:none;
    width:100%;
    height:100%;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#f7f8fa;
    color:#98a2b3;
    font-size:12px;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-stock{
    position:absolute;
    left:11px;
    top:11px;
    padding:5px 8px;
    border-radius:999px;
    background:rgba(255,255,255,.94);
    box-shadow:0 1px 6px rgba(16,24,40,.08);
    font-size:10px;
    font-weight:700;
    color:#027a48;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-stock.out{ color:#b42318; }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-card-body{
    padding:15px 15px 16px;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-brand{
    min-height:15px;
    margin-bottom:7px;
    color:var(--efs-accent);
    font-size:10px;
    font-weight:700;
    letter-spacing:.035em;
    text-transform:uppercase;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-title{
    margin:0 0 8px;
    font-size:13px;
    line-height:1.35;
    min-height:36px;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-title a{
    color:var(--efs-text);
    text-decoration:none;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-title a:hover{ color:var(--efs-accent); }

  /* Enlace extendido: en lugar de envolver la ficha en otra etiqueta <a> (lo que
     anidaria enlaces y es HTML invalido), se estira una capa invisible del propio
     enlace del titulo sobre toda la tarjeta. Sigue habiendo un unico enlace, y su
     texto sigue siendo el nombre del producto, que es lo que leen los lectores de
     pantalla y los buscadores. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-title a::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
  }

  /* La ficha entera responde como un enlace. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-card:hover .efs-title a{ color:var(--efs-accent); }

  /* Con teclado, el foco se marca en la tarjeta y no en una franja invisible. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-title a:focus-visible{ outline:none; }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-card:focus-within{
    border-color:var(--efs-accent);
    box-shadow:0 0 0 3px var(--efs-accent-soft);
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-meta{
    margin-bottom:9px;
    color:var(--efs-muted);
    font-size:11px;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-price{
    display:flex;
    align-items:baseline;
    gap:8px;
    font-size:16px;
    font-weight:700;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-price-from{
    margin-right:2px;
    color:var(--efs-muted);
    font-size:11px;
    font-weight:600;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-old-price{
    color:#98a2b3;
    font-size:12px;
    font-weight:500;
    text-decoration:line-through;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-empty{
    display:none;
    padding:60px 20px;
    border:1px dashed var(--efs-border);
    border-radius:var(--efs-radius);
    background:var(--efs-panel);
    color:var(--efs-muted);
    text-align:center;
    font-size:14px;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-empty strong{
    display:block;
    margin-bottom:6px;
    color:var(--efs-text);
    font-size:16px;
  }

  /* Paginacion. Sustituye al antiguo "Load more": con 74 paginas de resultados,
     acumular fichas hasta el infinito hace la pagina cada vez mas pesada y deja al
     visitante sin forma de saber cuanto queda ni de volver a donde estaba. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-pagination{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin-top:28px;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-page{
    min-width:40px;
    min-height:40px;
    padding:0 12px;
    border:1px solid var(--efs-border);
    border-radius:10px;
    background:#fff;
    color:var(--efs-text);
    font-family:inherit;
    font-size:14px;
    font-weight:600;
    line-height:1;
    cursor:pointer;
    transition:border-color .14s ease, background .14s ease, color .14s ease;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-page:hover:not(:disabled):not(.active){
    border-color:#c3cad4;
    background:#fbfcfd;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-page.active{
    border-color:var(--efs-accent);
    background:var(--efs-accent);
    color:#fff;
    cursor:default;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-page:disabled{
    opacity:.4;
    cursor:default;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-page-gap{
    padding:0 2px;
    color:var(--efs-muted);
    user-select:none;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-overlay{ display:none; }

  @media (max-width:1180px){
    .efs-filter:is(#efs#efs,.efs-filter) .efs-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  }

  /* La barra lateral deja de ser una columna antes de lo que parece. Con sus 270px
     fijos al lado de la rejilla, a 800px de ancho cada ficha se quedaba en unos
     128px: ahi no caben la foto, el titulo, el precio y el boton de compra. A partir
     de aqui es el panel deslizante que se abre con el boton "Filters", y los
     productos se quedan con todo el ancho. */
  @media (max-width:1024px){
    .efs-filter:is(#efs#efs,.efs-filter) .efs-toolbar{
      grid-template-columns:auto minmax(0,1fr);
      gap:10px;
    }

    /* El buscador arriba y a todo el ancho: su texto de ayuda es largo y compartiendo
       fila con el boton de filtros se cortaba. Debajo, los dos controles cortos, que
       caben juntos y ahorran una tercera fila antes del primer producto. */
    .efs-filter:is(#efs#efs,.efs-filter) .efs-search{
      grid-column:1 / -1;
      grid-row:1;
    }

    .efs-filter:is(#efs#efs,.efs-filter) .efs-mobile-filter{
      display:inline-flex;
      grid-column:1;
      grid-row:2;
    }

    .efs-filter:is(#efs#efs,.efs-filter) .efs-sort{
      grid-column:2;
      grid-row:2;
    }

    .efs-filter:is(#efs#efs,.efs-filter) .efs-layout{ display:block; }

    /* De arriba abajo de la pantalla. El tope de altura es cosa de la columna fija
       del escritorio, y aqui dejaba el panel 36px corto por abajo.

       En columna flexible: la cabecera con la X se queda quieta y solo ruedan los
       filtros, asi que la X no se va de la pantalla al bajar por la lista. */
    .efs-filter:is(#efs#efs,.efs-filter) .efs-sidebar{
      position:fixed;
      z-index:10002;
      left:0;
      top:0;
      bottom:0;
      width:min(88vw,340px);
      max-height:none;
      display:flex;
      flex-direction:column;
      overflow:hidden;
      border:0;
      border-radius:0;
      transform:translateX(-105%);
      transition:transform .22s ease;
      box-shadow:8px 0 24px rgba(16,24,40,.12);
    }

    .efs-filter:is(#efs#efs,.efs-filter) .efs-sidebar.mobile-open{ transform:translateX(0); }

    /* Sitio para la X, para que el titulo no pase por debajo. */
    .efs-filter:is(#efs#efs,.efs-filter) .efs-side-head{
      flex:0 0 auto;
      padding-right:56px;
    }

    .efs-filter:is(#efs#efs,.efs-filter) .efs-side-close{
      display:grid;
      place-items:center;
    }

    .efs-filter:is(#efs#efs,.efs-filter) .efs-facets{
      flex:1 1 auto;
      min-height:0;
      max-height:none;
      overflow-y:auto;
    }

    .efs-filter:is(#efs#efs,.efs-filter) .efs-overlay{
      position:fixed;
      z-index:10001;
      inset:0;
      background:rgba(16,24,40,.38);
    }

    .efs-filter:is(#efs#efs,.efs-filter) .efs-overlay.show{ display:block; }
  }

  @media (max-width:760px){
    .efs-filter:is(#efs#efs,.efs-filter){
      width:min(100% - 24px, 720px);
      margin-top:18px;
    }

    .efs-filter:is(#efs#efs,.efs-filter) .efs-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
    .efs-filter:is(#efs#efs,.efs-filter) .efs-card-body{ padding:12px; }
    .efs-filter:is(#efs#efs,.efs-filter) .efs-results-head h2{ font-size:20px; }
  }

  @media (max-width:480px){
    .efs-filter:is(#efs#efs,.efs-filter){ width:calc(100% - 18px); }
    .efs-filter:is(#efs#efs,.efs-filter) .efs-grid{ grid-template-columns:1fr 1fr; gap:8px; }
    .efs-filter:is(#efs#efs,.efs-filter) .efs-title{ font-size:12px; min-height:35px; }
    .efs-filter:is(#efs#efs,.efs-filter) .efs-brand{ font-size:9px; }
    .efs-filter:is(#efs#efs,.efs-filter) .efs-price{ font-size:15px; }
    .efs-filter:is(#efs#efs,.efs-filter) .efs-card-body{ padding:10px; }
    .efs-filter:is(#efs#efs,.efs-filter) .efs-stock{ display:none; }
  }

  /* =========================================================
     STRONG INDUSTRIAL UI — VISUAL OVERRIDES ONLY
     No modifica ninguna función, dato, filtro ni evento JS.
     ========================================================= */

  /* Las variables estan todas juntas en la cabecera del archivo. Aqui solo queda
     el marco exterior del filtro, tambien por variables. */
  .efs-filter:is(#efs#efs,.efs-filter){
    padding:var(--efs-frame-pad);
    border:1px solid var(--efs-frame-border);
    border-radius:var(--efs-frame-radius);
    background:var(--efs-frame-bg);
    box-shadow:var(--efs-frame-shadow);
  }

  /* ---------- TOP TOOLBAR ---------- */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-toolbar{
    position:relative;
    padding:16px;
    margin-bottom:26px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    background:linear-gradient(135deg,var(--efs-bar-bg),var(--efs-bar-bg-2));
    box-shadow:0 10px 24px rgba(11,29,45,.18);
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-search-input,
  .efs-filter:is(#efs#efs,.efs-filter) .efs-sort,
  .efs-filter:is(#efs#efs,.efs-filter) .efs-search input,
  .efs-filter:is(#efs#efs,.efs-filter) input.efs-search-input,
  .efs-filter:is(#efs#efs,.efs-filter) .efs-sort{
    height:50px !important;
    min-height:50px !important;
    border:2px solid transparent !important;
    border-radius:8px !important;
    background-color:#fff !important;
    color:#15293c !important;
    box-shadow:0 2px 8px rgba(0,0,0,.10) !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-search input:focus,
  .efs-filter:is(#efs#efs,.efs-filter) .efs-sort:focus,
  .efs-filter:is(#efs#efs,.efs-filter) .efs-search-input:focus,
  .efs-filter:is(#efs#efs,.efs-filter) .efs-sort:focus{
    border-color:#52a7ef !important;
    box-shadow:0 0 0 4px rgba(82,167,239,.18) !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-search > svg{
    stroke:#36536d;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-mobile-filter{
    min-height:50px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:8px;
    background:#fff;
    color:var(--efs-navy);
    box-shadow:0 2px 8px rgba(0,0,0,.10);
  }

  /* ---------- MAIN LAYOUT ---------- */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-layout{
    gap:26px;
  }

  /* ---------- FILTER SIDEBAR ---------- */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-sidebar{
    border:0;
    border-radius:var(--efs-side-radius);
    background:linear-gradient(180deg,var(--efs-side-bg),var(--efs-side-bg-2));
    box-shadow:0 12px 28px rgba(10,31,50,.18);
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-side-head{
    padding:20px 18px 17px;
    border-bottom:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.035);
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-side-head h3{
    color:var(--efs-side-title);
    font-size:var(--efs-side-title-size);
    font-weight:800;
    letter-spacing:-.01em;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-side-head p{
    margin-top:5px;
    color:var(--efs-side-desc);
    font-size:12px;
    line-height:1.45;
  }

  /* La cabecera del panel es azul oscuro: la X tiene que ir en claro. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-side-close{
    color:var(--efs-facet-color);
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-side-close:hover{
    background:rgba(255,255,255,.14);
    color:var(--efs-side-title);
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-facets{
    padding:11px;
  }

  /* El unico desplazamiento propio que queda es el de la lista de filtros dentro del
     panel deslizante del movil. Ahi el color de la barra tiene que ir en tono oscuro
     para no cantar sobre el fondo azul. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-facets{
    scrollbar-color:#58728a transparent;
    scrollbar-width:thin;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-facet{
    border-top:1px solid rgba(255,255,255,.09);
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-all-btn,
  .efs-filter:is(#efs#efs,.efs-filter) .efs-term{
    color:var(--efs-term-color);
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-all-btn{
    min-height:42px;
    padding:10px 12px;
    border:1px solid rgba(255,255,255,.07);
    background:rgba(255,255,255,.035);
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-all-btn:hover,
  .efs-filter:is(#efs#efs,.efs-filter) .efs-term:hover,
  .efs-filter:is(#efs#efs,.efs-filter) .efs-facet-head:hover{
    background:rgba(255,255,255,.09);
    color:var(--efs-side-title);
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-all-btn.active,
  .efs-filter:is(#efs#efs,.efs-filter) .efs-term.active{
    color:var(--efs-term-active-color);
    background:linear-gradient(90deg,var(--efs-term-active-bg),var(--efs-term-active-bg-2));
    box-shadow:0 4px 12px rgba(0,91,169,.28);
  }

  /* El nombre del atributo es el titulo de su filtro, no una etiqueta de apoyo,
     pero tampoco un titular: sobre el fondo azul oscuro basta con 12px para leerlo
     comodo, y con menos relleno la lista de filtros cunde mucho mas en pantalla.
     El color se mantiene, que es lo que da el contraste de 10.8:1. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-facet-head{
    padding:7px 10px;
    color:var(--efs-facet-color);
    font-size:var(--efs-facet-size);
    font-weight:700;
    letter-spacing:.02em;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-facet-head:hover{
    color:var(--efs-side-title);
  }

  /* Un filtro con valores elegidos se destaca en blanco: es la pista de donde
     esta aplicado algo sin tener que abrir cada seccion. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-facet-head:has(.efs-facet-badge){
    color:var(--efs-side-title);
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-facet-badge{
    background:rgba(255,255,255,.12);
    color:#d9e9f7;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-term{
    min-height:40px;
    padding:8px 11px;
    border-radius:7px;
    font-weight:600;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-check{
    border-color:#71879a;
    background:transparent;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-term.active .efs-check{
    border-color:var(--efs-term-active-color);
    background:var(--efs-term-active-color);
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-term.active .efs-check svg{
    stroke:var(--efs-term-active-bg);
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-count{
    color:var(--efs-count-color);
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-term.active .efs-count{
    color:var(--efs-term-active-color);
  }

  /* ---------- RESULTS HEADER ---------- */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-results-head{
    padding:2px 2px 13px;
    margin-bottom:18px;
    border-bottom:2px solid #d5dde6;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-results-head h2{
    position:relative;
    padding-left:14px;
    color:var(--efs-heading-color);
    font-size:var(--efs-heading-size);
    font-weight:800;
    letter-spacing:-.025em;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-results-head h2::before{
    content:"";
    position:absolute;
    left:0;
    top:2px;
    bottom:1px;
    width:5px;
    border-radius:3px;
    background:var(--efs-heading-bar);
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-results-count{
    margin-left:14px;
    color:var(--efs-results-color);
    font-weight:600;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-clear{
    padding:8px 12px;
    border:1px solid #b9c7d5;
    border-radius:7px;
    background:#fff;
    color:#195a91;
    box-shadow:0 2px 5px rgba(16,40,63,.05);
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-clear:hover{
    border-color:#0874d1;
    background:#eef7ff;
    color:#075fa9;
  }

  /* ---------- PRODUCT GRID / CARDS ---------- */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-grid{
    gap:18px;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-card{
    position:relative;
    border:1px solid var(--efs-card-border);
    border-radius:var(--efs-card-radius);
    background:var(--efs-card-bg);
    box-shadow:0 5px 14px rgba(14,38,60,.07);
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-card::before{
    content:"";
    position:absolute;
    z-index:2;
    left:0;
    right:0;
    top:0;
    height:4px;
    background:var(--efs-card-accent);
    opacity:.92;
    /* Es solo decoracion y queda por encima del enlace extendido: sin esto
       dejaria una franja de 4px que no se puede pulsar. */
    pointer-events:none;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-card:hover{
    transform:translateY(-4px);
    border-color:#aebdca;
    box-shadow:0 15px 30px rgba(14,38,60,.15);
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-image-wrap{
    padding:0;
    border-bottom:0;
    background:#fff;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-image{
    transition:transform .22s ease;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-card:hover .efs-image{
    transform:scale(1.025);
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-stock{
    left:12px;
    top:13px;
    padding:6px 9px;
    border:1px solid #b7e3ce;
    border-radius:6px;
    background:#eaf8f1;
    box-shadow:none;
    color:#087443;
    font-size:9px;
    letter-spacing:.04em;
    text-transform:uppercase;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-stock.out{
    border-color:#efc4c0;
    background:#fff0ef;
    color:#b42318;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-card-body{
    padding:17px 16px 18px;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-brand{
    display:inline-flex;
    align-items:center;
    min-height:22px;
    margin:0 0 9px;
    padding:4px 8px;
    border-radius:5px;
    background:var(--efs-brand-bg);
    color:var(--efs-brand-color);
    font-size:var(--efs-brand-size);
    font-weight:800;
    letter-spacing:.06em;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-title{
    margin-bottom:10px;
    color:var(--efs-title-color);
    font-size:var(--efs-title-size);
    font-weight:800;
    line-height:1.42;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-title a{
    color:var(--efs-title-color);
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-title a:hover{
    color:var(--efs-title-hover);
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-meta{
    padding-top:8px;
    margin-bottom:11px;
    border-top:1px solid #edf0f3;
    color:var(--efs-meta-color);
    font-size:var(--efs-meta-size);
    font-weight:600;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-price{
    color:var(--efs-price-color);
    font-size:var(--efs-price-size);
    font-weight:800;
    letter-spacing:-.01em;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-price-from{
    color:#738293;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-old-price{
    color:#94a0ac;
  }

  /* ---------- EMPTY + LOAD MORE ---------- */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-empty{
    border:1px solid #cbd6e0;
    background:#fff;
    box-shadow:0 5px 15px rgba(14,38,60,.05);
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-page{
    border:0;
    border-radius:8px;
    background:#fff;
    box-shadow:0 3px 9px rgba(13,40,63,.10);
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-page.active{
    background:var(--efs-page-active-bg);
    color:#fff;
    box-shadow:0 7px 16px rgba(13,40,63,.20);
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-page:hover:not(:disabled):not(.active){
    background:#0874d1;
    color:#fff;
  }

  /* ---------- TABLET ---------- */
  @media (max-width:1024px){
    /* Aqui ya es un panel deslizante: pierde las esquinas redondeadas y gana la
       sombra lateral que lo despega del contenido. */
    .efs-filter:is(#efs#efs,.efs-filter) .efs-sidebar{
      border-radius:0;
      background:linear-gradient(180deg,var(--efs-side-bg),var(--efs-side-bg-2));
      box-shadow:10px 0 30px rgba(4,19,31,.34);
    }
  }

  /* ---------- MOBILE ---------- */
  @media (max-width:760px){
    .efs-filter:is(#efs#efs,.efs-filter){
      padding:min(var(--efs-frame-pad),12px);
      border-radius:min(var(--efs-frame-radius),12px);
    }

    .efs-filter:is(#efs#efs,.efs-filter) .efs-toolbar{
      padding:11px;
      margin-bottom:18px;
    }

    /* iOS amplia la pagina al enfocar un campo de menos de 16px y la deja asi: el
       visitante escribe una letra y se encuentra la pagina a otra escala, con el
       filtro fuera de pantalla y sin nada que le diga como volver. */
    .efs-filter:is(#efs#efs,.efs-filter) .efs-search-input,
    .efs-filter:is(#efs#efs,.efs-filter) .efs-search input,
    .efs-filter:is(#efs#efs,.efs-filter) input.efs-search-input,
    .efs-filter:is(#efs#efs,.efs-filter) .efs-sort{
      font-size:16px !important;
    }

    .efs-filter:is(#efs#efs,.efs-filter) .efs-results-head h2{
      font-size:calc(var(--efs-heading-size) - 4px);
    }

    .efs-filter:is(#efs#efs,.efs-filter) .efs-grid{
      gap:10px;
    }

    .efs-filter:is(#efs#efs,.efs-filter) .efs-card{
      border-radius:9px;
    }

    .efs-filter:is(#efs#efs,.efs-filter) .efs-card-body{
      padding:12px;
    }

    .efs-filter:is(#efs#efs,.efs-filter) .efs-brand{
      margin-bottom:7px;
    }
  }

  @media (max-width:480px){
    .efs-filter:is(#efs#efs,.efs-filter){
      padding:min(var(--efs-frame-pad),8px);
      background:var(--efs-frame-bg);
    }

    .efs-filter:is(#efs#efs,.efs-filter) .efs-grid{
      gap:8px;
    }

    .efs-filter:is(#efs#efs,.efs-filter) .efs-card-body{
      padding:10px;
    }

    .efs-filter:is(#efs#efs,.efs-filter) .efs-title{
      font-size:calc(var(--efs-title-size) - 1px);
      font-weight:800;
    }

    .efs-filter:is(#efs#efs,.efs-filter) .efs-price{
      font-size:calc(var(--efs-price-size) - 2px);
    }
  }


  /* Mensaje de estado mientras se descarga el catalogo, o si falla la descarga.
     El grid llega vacio desde el servidor y se rellena en cliente, asi que sin
     este aviso la pagina pareceria rota durante la carga. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-status{
    display:none;
    padding:40px 20px;
    border:1px dashed var(--efs-border);
    border-radius:var(--efs-radius);
    background:var(--efs-panel);
    color:var(--efs-muted);
    text-align:center;
    font-size:15px;
  }

  /* Valor de faceta sin resultados con los filtros actuales.
     Se mantiene visible para que la lista de filtros no cambie de tamano ni de
     contenido al buscar, pero apagado y sin poder pulsarse. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-term-empty{
    opacity:.4;
    cursor:default;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-term-empty:hover{
    background:transparent;
    border-color:transparent;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-term-empty .efs-count{
    opacity:.7;
  }

  /* Subcategorias en la faceta de categorias: la sangria dice de quien cuelgan,
     sin tener que repetir la ruta entera en cada opcion. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-term[data-depth]{
    padding-left:calc(11px + var(--efs-depth, 0) * 16px);
  }

  /* Una categoria con hijas comparte renglon con su flecha. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-term-row{
    display:flex;
    align-items:center;
    gap:2px;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-term-row .efs-term{
    flex:1 1 auto;
    min-width:0;
  }

  /* Abrir una rama para ver lo que hay debajo y filtrar por ella son dos acciones
     distintas, asi que son dos botones distintos. Con cientos de categorias, mirar
     dentro sin recortar el catalogo es justo lo que hace falta. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-term-toggle{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:26px;
    height:26px;
    padding:0;
    border:0;
    border-radius:6px;
    background:transparent;
    color:inherit;
    cursor:pointer;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-term-toggle:hover{
    background:rgba(128,128,128,.2);
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-term-toggle svg{
    width:12px;
    height:12px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.4;
    transition:transform .15s ease;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-term-toggle[aria-expanded="true"] svg{
    transform:rotate(90deg);
  }


  /* ---------- BOTON DE COMPRA ---------- */

  /* z-index 2 no es decorativo: la ficha entera es un enlace extendido cuya capa
     invisible esta en z-index 1. Sin subir el boton por encima, el clic se lo
     tragaria ese enlace y el visitante acabaria en la ficha del producto en lugar
     de anadirlo al carrito. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-cart{
    position:relative;
    z-index:2;
    display:block;
    margin-top:12px;
    padding:11px 14px;
    border:0;
    border-radius:9px;
    background:var(--efs-cart-bg);
    color:var(--efs-cart-color);
    font-family:inherit;
    font-size:13px;
    font-weight:700;
    line-height:1.2;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
    transition:background .14s ease, transform .14s ease;
  }

    /* El oscurecido sale del color del propio boton, en lugar de un azul escrito a
     mano: asi el estado de raton encima sigue teniendo sentido con cualquier color
     elegido en los ajustes. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-cart:hover,
  .efs-filter:is(#efs#efs,.efs-filter) .efs-cart:focus{
    background:var(--efs-cart-bg);
    color:var(--efs-cart-color);
    filter:brightness(.9);
    transform:translateY(-1px);
  }

  /* Lo que no se puede comprar tal cual (variaciones por elegir, agotados) se
     distingue del boton de compra: lleva a la ficha, no anade nada. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-cart:not(.add_to_cart_button){
    background:transparent;
    border:1px solid var(--efs-border);
    color:var(--efs-text);
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-cart:not(.add_to_cart_button):hover{
    border-color:var(--efs-accent);
    background:var(--efs-accent-soft);
    color:var(--efs-accent);
  }

  /* Estados que pinta el propio WooCommerce mientras anade. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-cart.loading{
    opacity:.6;
    pointer-events:none;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-cart.added{
    background:#007017;
  }

  /* WooCommerce inserta este enlace detras del boton al terminar. */
  .efs-filter:is(#efs#efs,.efs-filter) .added_to_cart{
    position:relative;
    z-index:2;
    display:block;
    margin-top:7px;
    color:var(--efs-accent);
    font-size:12px;
    font-weight:600;
    text-align:center;
  }

  /* La ficha estira el contenido para que todos los botones queden a la misma
     altura, aunque los titulos ocupen distinto. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-card{
    display:flex;
    flex-direction:column;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-card-body{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
  }


  /* =========================================================
     BLINDAJE FRENTE AL TEMA
     ========================================================= */

  /* Muchos temas dan estilo a "todos los botones" o a "todos los h3" de la pagina, y
     eso entra dentro del filtro: los nombres de los atributos salian con el tamano de
     un titular. El plugin ya neutralizaba la tipografia heredada, pero solo la familia
     y algun detalle del boton, dejando fuera el tamano, el grosor y el interlineado.
     Aqui se fijan, y de paso el relleno, porque un tema con botones de 1em de relleno
     infla igual la barra lateral.

     Estas van ademas con !important, que es lo unico que gana a una regla del tema
     marcada !important, cosa que la especificidad del selector raiz no puede hacer.
     Va al final del archivo a proposito, para ganar tambien a todo lo anterior.

     El !important se queda en este bloque y no se extiende al resto de la hoja: el
     JavaScript pinta y oculta partes del filtro con estilo en linea (display de la
     paginacion, del aviso de "sin resultados", del estado de carga), y un !important
     en esas propiedades dejaria esos estilos en linea sin efecto.

     Solo tipografia y espaciado. El color y el fondo se quedan fuera, que es lo que
     cambia entre los estados de un valor (elegido, sin resultados, con el raton
     encima) y fijarlos aqui los dejaria todos iguales. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-side-head h3{
    margin:0 0 4px !important;
    font-family:inherit !important;
    font-size:var(--efs-side-title-size) !important;
    font-weight:800 !important;
    line-height:normal !important;
    letter-spacing:-.01em !important;
    text-transform:none !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-side-head p{
    margin:5px 0 0 !important;
    font-family:inherit !important;
    font-size:12px !important;
    font-weight:400 !important;
    line-height:1.45 !important;
    letter-spacing:normal !important;
    text-transform:none !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-all-btn{
    min-height:42px !important;
    padding:10px 12px !important;
    font-family:inherit !important;
    font-size:14px !important;
    font-weight:700 !important;
    line-height:normal !important;
    letter-spacing:normal !important;
    text-transform:none !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-facet-head{
    padding:7px 10px !important;
    font-family:inherit !important;
    font-size:var(--efs-facet-size) !important;
    font-weight:700 !important;
    line-height:normal !important;
    letter-spacing:.02em !important;
    text-transform:uppercase !important;
  }

  /* El nombre y el recuento van dentro de su boton: heredan y no se despegan de el. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-facet-label,
  .efs-filter:is(#efs#efs,.efs-filter) .efs-term-name{
    margin:0 !important;
    padding:0 !important;
    font-family:inherit !important;
    font-size:inherit !important;
    font-weight:inherit !important;
    line-height:inherit !important;
    letter-spacing:inherit !important;
    text-transform:inherit !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-facet-badge{
    padding:2px 7px !important;
    font-family:inherit !important;
    font-size:10px !important;
    font-weight:700 !important;
    line-height:normal !important;
    letter-spacing:0 !important;
    text-transform:none !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-term{
    min-height:40px !important;
    padding:8px 11px !important;
    font-family:inherit !important;
    font-size:var(--efs-term-size) !important;
    font-weight:600 !important;
    line-height:normal !important;
    letter-spacing:normal !important;
    text-transform:none !important;
  }

  /* Detras del relleno de arriba, o se pierde la sangria de las subcategorias. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-term[data-depth]{
    padding-left:calc(11px + var(--efs-depth, 0) * 16px) !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-count{
    padding:0 !important;
    font-family:inherit !important;
    font-size:11px !important;
    font-weight:600 !important;
    line-height:normal !important;
    letter-spacing:normal !important;
    text-transform:none !important;
  }

  /* Los dos botones de icono: lo que los infla es el relleno del tema, no la letra. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-term-toggle{
    width:26px !important;
    height:26px !important;
    min-height:0 !important;
    padding:0 !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-side-close{
    width:40px !important;
    height:40px !important;
    min-height:0 !important;
    padding:0 !important;
  }

  /* El panel de filtros se muestra entero: al abrir un filtro crece lo que haga
     falta, sin tope de altura y sin barra de desplazamiento propia. Va blindado
     porque un tema o un constructor de paginas puede ponerle un alto maximo a la
     columna, o un overflow, y entonces vuelve a aparecer la barra de dentro.

     Solo la columna y su lista de filtros: son las dos cajas que contienen los
     filtros, y las unicas que pueden recortarlos. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-sidebar,
  .efs-filter:is(#efs#efs,.efs-filter) .efs-facets{
    max-height:none !important;
    overflow:visible !important;
  }

  /* Menos cuando es el panel deslizante: ahi la cabecera con la X se queda quieta y
     los filtros ruedan, que es lo que la mantiene al alcance. */
  @media (max-width:1024px){
    .efs-filter:is(#efs#efs,.efs-filter) .efs-sidebar{
      overflow:hidden !important;
    }

    .efs-filter:is(#efs#efs,.efs-filter) .efs-facets{
      overflow-y:auto !important;
    }
  }

  /* ---------- LA FICHA DE PRODUCTO ----------

     Aqui el tema entra por la puerta grande: el titulo es un h3, el precio y el SKU
     son div, la imagen es un img y el boton de compra lleva la clase "button" de
     WooCommerce a proposito, para que la tienda lo reconozca. Cualquier regla del
     tema sobre h3, img o .button cae dentro de la ficha. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-image{
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    object-fit:cover !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-no-image{
    font-family:inherit !important;
    font-size:12px !important;
    font-weight:400 !important;
    letter-spacing:normal !important;
    text-transform:none !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-stock{
    padding:6px 9px !important;
    font-family:inherit !important;
    font-size:9px !important;
    font-weight:700 !important;
    line-height:normal !important;
    letter-spacing:.04em !important;
    text-transform:uppercase !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-brand{
    min-height:22px !important;
    margin:0 0 9px !important;
    padding:4px 8px !important;
    font-family:inherit !important;
    font-size:var(--efs-brand-size) !important;
    font-weight:800 !important;
    line-height:normal !important;
    letter-spacing:.06em !important;
    text-transform:uppercase !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-title{
    min-height:36px !important;
    margin:0 0 10px !important;
    padding:0 !important;
    font-family:inherit !important;
    font-size:var(--efs-title-size) !important;
    font-weight:800 !important;
    line-height:1.42 !important;
    letter-spacing:normal !important;
    text-transform:none !important;
  }

  /* Del enlace, todo menos el color: el color es lo que cambia al pasar el raton. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-title a{
    font-family:inherit !important;
    font-size:inherit !important;
    font-weight:inherit !important;
    line-height:inherit !important;
    letter-spacing:inherit !important;
    text-transform:inherit !important;
    text-decoration:none !important;
    box-shadow:none !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-meta{
    padding:8px 0 0 !important;
    margin:0 0 11px !important;
    font-family:inherit !important;
    font-size:var(--efs-meta-size) !important;
    font-weight:600 !important;
    line-height:normal !important;
    letter-spacing:normal !important;
    text-transform:none !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-price{
    margin:0 !important;
    padding:0 !important;
    font-family:inherit !important;
    font-size:var(--efs-price-size) !important;
    font-weight:800 !important;
    line-height:normal !important;
    letter-spacing:-.01em !important;
    text-transform:none !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-price-from{
    font-size:11px !important;
    font-weight:600 !important;
    text-transform:none !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-old-price{
    font-size:12px !important;
    font-weight:500 !important;
    text-decoration:line-through !important;
  }

  /* El boton de compra lleva las clases de WooCommerce, asi que se lo comen tanto el
     tema como la propia tienda. El color no se fija: ahi se distingue lo que se anade
     al carrito de lo que lleva a la ficha, y el verde de "ya anadido". */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-cart{
    width:auto !important;
    min-height:0 !important;
    margin:12px 0 0 !important;
    padding:11px 14px !important;
    font-family:inherit !important;
    font-size:13px !important;
    font-weight:700 !important;
    line-height:1.2 !important;
    letter-spacing:normal !important;
    text-transform:none !important;
    text-decoration:none !important;
    text-align:center !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .added_to_cart{
    margin:7px 0 0 !important;
    padding:0 !important;
    font-family:inherit !important;
    font-size:12px !important;
    font-weight:600 !important;
    line-height:normal !important;
    text-transform:none !important;
    text-decoration:none !important;
    text-align:center !important;
  }

  /* La cabecera de los resultados: otro h2 al alcance del tema. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-results-head h2{
    margin:0 !important;
    padding-left:14px !important;
    font-family:inherit !important;
    font-size:var(--efs-heading-size) !important;
    font-weight:800 !important;
    line-height:1.2 !important;
    letter-spacing:-.025em !important;
    text-transform:none !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-results-count{
    margin:5px 0 0 14px !important;
    padding:0 !important;
    font-family:inherit !important;
    font-size:13px !important;
    font-weight:600 !important;
    line-height:normal !important;
    text-transform:none !important;
  }

  /* Los tamanos de las pantallas pequenas se repiten aqui, detras del blindaje y con
     la misma fuerza: si no, lo de arriba se los tragaria y el telefono heredaria las
     medidas del escritorio.

     Restan sobre la medida elegida en los ajustes en lugar de llevar un numero
     suelto: un cuerpo mas grande en el escritorio sigue siendolo en el telefono, y
     la diferencia entre pantallas se mantiene. */
  @media (max-width:760px){
    .efs-filter:is(#efs#efs,.efs-filter) .efs-results-head h2{ font-size:calc(var(--efs-heading-size) - 4px) !important; }
  }

  @media (max-width:480px){
    .efs-filter:is(#efs#efs,.efs-filter) .efs-title{
      font-size:calc(var(--efs-title-size) - 1px) !important;
      min-height:35px !important;
    }

    .efs-filter:is(#efs#efs,.efs-filter) .efs-brand{ font-size:var(--efs-brand-size) !important; }
    .efs-filter:is(#efs#efs,.efs-filter) .efs-price{ font-size:calc(var(--efs-price-size) - 3px) !important; }
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-cart{
    margin-top:auto;
  }