/*
 * 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;

    /* Detalles que cambian los estilos de diseno (ver EFS_Skin) pero que no son
       campos de la pestana Appearance. Los valores de aqui son los del estilo de
       serie, Industrial. */
    --efs-serif:inherit;
    --efs-input-bg:#fff;
    --efs-input-color:#15293c;
    --efs-input-border:transparent;
    --efs-input-radius:8px;
    --efs-input-shadow:0 2px 8px rgba(0,0,0,.10);
    --efs-bar-border:rgba(255,255,255,.08);
    --efs-bar-shadow:0 10px 24px rgba(11,29,45,.18);
    --efs-side-shadow:0 12px 28px rgba(10,31,50,.18);
    --efs-side-line:rgba(255,255,255,.1);
    --efs-side-hover:rgba(255,255,255,.09);
    --efs-side-tint:rgba(255,255,255,.035);
    --efs-check-border:#71879a;
    --efs-badge-bg:rgba(255,255,255,.12);
    --efs-badge-color:#d9e9f7;
    --efs-term-active-shadow:0 4px 12px rgba(0,91,169,.28);
    --efs-head-line:#d5dde6;
    --efs-clear-bg:#fff;
    --efs-clear-border:#b9c7d5;
    --efs-clear-color:#195a91;
    --efs-card-shadow:0 5px 14px rgba(14,38,60,.07);
    --efs-card-hover-border:#aebdca;
    --efs-card-hover-shadow:0 15px 30px rgba(14,38,60,.15);
    --efs-card-lift:-4px;
    --efs-image-bg:#fff;
    --efs-noimage-bg:#f7f8fa;
    --efs-meta-line:#edf0f3;
    --efs-stock-bg:#eaf8f1;
    --efs-stock-border:#b7e3ce;
    --efs-stock-color:#087443;
    --efs-out-bg:#fff0ef;
    --efs-out-border:#efc4c0;
    --efs-out-color:#b42318;
    --efs-page-bg:#fff;
    --efs-page-color:#102235;
    --efs-page-active-color:#fff;
    --efs-skeleton-a:#e6ebf0;
    --efs-skeleton-b:#f3f6f9;
  }

  .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(var(--efs-columns,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:var(--efs-noimage-bg);
    color:var(--efs-muted);
    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(var(--efs-columns-md,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 var(--efs-bar-border);
    border-radius:12px;
    background:linear-gradient(135deg,var(--efs-bar-bg),var(--efs-bar-bg-2));
    box-shadow:var(--efs-bar-shadow);
  }

  .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 var(--efs-input-border) !important;
    border-radius:var(--efs-input-radius) !important;
    background-color:var(--efs-input-bg) !important;
    color:var(--efs-input-color) !important;
    box-shadow:var(--efs-input-shadow) !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-search-input::placeholder{
    color:var(--efs-muted);
    opacity:1;
  }

  .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:var(--efs-input-radius);
    background:var(--efs-input-bg);
    color:var(--efs-input-color);
    box-shadow:var(--efs-input-shadow);
  }

  /* ---------- 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:var(--efs-side-shadow);
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-side-head{
    padding:20px 18px 17px;
    border-bottom:1px solid var(--efs-side-line);
    background:var(--efs-side-tint);
  }

  .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:var(--efs-side-hover);
    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 var(--efs-side-line);
  }

  .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 var(--efs-side-line);
    background:var(--efs-side-tint);
  }

  .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:var(--efs-side-hover);
    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:var(--efs-term-active-shadow);
  }

  /* 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:var(--efs-badge-bg);
    color:var(--efs-badge-color);
  }

  .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:var(--efs-check-border);
    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 var(--efs-head-line);
  }

  .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 var(--efs-clear-border);
    border-radius:7px;
    background:var(--efs-clear-bg);
    color:var(--efs-clear-color);
    box-shadow:0 2px 5px rgba(16,40,63,.05);
  }

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

  /* ---------- 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:var(--efs-card-shadow);
  }

  .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(var(--efs-card-lift));
    border-color:var(--efs-card-hover-border);
    box-shadow:var(--efs-card-hover-shadow);
  }

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

  .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 var(--efs-stock-border);
    border-radius:6px;
    background:var(--efs-stock-bg);
    box-shadow:none;
    color:var(--efs-stock-color);
    font-size:9px;
    letter-spacing:.04em;
    text-transform:uppercase;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-stock.out{
    border-color:var(--efs-out-border);
    background:var(--efs-out-bg);
    color:var(--efs-out-color);
  }

  .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 var(--efs-meta-line);
    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 var(--efs-card-border);
    background:var(--efs-card-bg);
    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:var(--efs-page-bg);
    color:var(--efs-page-color);
    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:var(--efs-page-active-color);
    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:var(--efs-accent);
    color:var(--efs-page-active-color);
  }

  /* ---------- 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;
  }

  /* Precarga. La plantilla llega con fichas y facetas "esqueleto" y el contenedor
     con la clase is-loading; el JavaScript las sustituye al pintar el catalogo.
     Asi la pagina tiene forma desde el primer pintado, sin esperar a que se
     descargue el script ni el JSON. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-skeleton-card{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:0 0 16px;
    border:1px solid var(--efs-card-border);
    border-radius:var(--efs-card-radius);
    background:var(--efs-card-bg);
    overflow:hidden;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-skeleton-card .efs-skeleton-line{
    margin:0 14px;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-skeleton-image{
    display:block;
    aspect-ratio:1/1;
    margin-bottom:6px;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-skeleton-line{
    display:block;
    height:11px;
    border-radius:6px;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-skeleton-line--short{ width:45%; }
  .efs-filter:is(#efs#efs,.efs-filter) .efs-skeleton-line--price{ width:35%; height:16px; margin-top:4px; }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-skeleton-image,
  .efs-filter:is(#efs#efs,.efs-filter) .efs-skeleton-card .efs-skeleton-line{
    background:linear-gradient(90deg,var(--efs-skeleton-a) 25%,var(--efs-skeleton-b) 50%,var(--efs-skeleton-a) 75%);
    background-size:200% 100%;
    animation:efs-shimmer 1.3s linear infinite;
  }

  /* En la barra lateral, oscura por defecto, el brillo sale del color de sus textos. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-skeleton-facet{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:14px 0;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-skeleton-facet .efs-skeleton-line{
    background:var(--efs-term-color);
    opacity:.14;
    animation:efs-pulse 1.3s ease-in-out infinite;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-skeleton-facet .efs-skeleton-line--title{
    width:55%;
    opacity:.24;
  }

  /* El texto "Cargando productos..." sigue en la region role=status para los
     lectores de pantalla, pero no se ve: el esqueleto ya lo dice. Solo si hay
     esqueleto: una copia antigua de la plantilla en el tema no lo trae y sigue
     mostrando el texto. */
  .efs-filter:is(#efs#efs,.efs-filter).is-loading:has(.efs-skeleton-card) .efs-status{
    display:block !important;
    position:absolute !important;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    border:0;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }

  .efs-filter:is(#efs#efs,.efs-filter).is-loading .efs-empty,
  .efs-filter:is(#efs#efs,.efs-filter).is-loading .efs-pagination{
    display:none !important;
  }

  @keyframes efs-shimmer{
    from{ background-position:100% 0; }
    to{ background-position:-100% 0; }
  }

  @keyframes efs-pulse{
    50%{ opacity:.06; }
  }

  @media (prefers-reduced-motion:reduce){
    .efs-filter:is(#efs#efs,.efs-filter) .efs-skeleton-image,
    .efs-filter:is(#efs#efs,.efs-filter) .efs-skeleton-line{
      animation:none !important;
    }
  }

  /* 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;
  }

  /* =========================================================
     ESTRUCTURAS (pestana Layout)
     ---------------------------------------------------------
     La plantilla coloca el buscador, el orden y el boton "Filters" segun la
     estructura elegida (ver EFS_Layout), y el contenedor lleva su clase
     (efs-structure-compact...) y la del lado del panel: efs-side-left,
     efs-side-right o efs-side-none. Aqui solo se ajusta lo que cambia de sitio;
     colores y tamanos siguen saliendo de las variables.
     ========================================================= */

  /* Herramientas de la cabecera de resultados. En la clasica solo esta "Clear
     filters"; en las demas, tambien el buscador, el orden o el boton del movil. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-results-tools{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    min-width:0;
  }

  /* Con controles dentro, todo en una fila: el titulo a la izquierda y las
     herramientas ocupando el resto. Si falta sitio encoge el buscador, no se parte
     la fila (el ancho al 100% que el buscador lleva blindado hacia que se partiera
     siempre). */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-results-head--tools{
    align-items:center;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-results-head--tools > div:first-child{
    flex:0 0 auto;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-results-head--tools .efs-results-tools{
    flex:1 1 auto;
    flex-wrap:nowrap;
  }

  /* El buscador pequeno y el orden, al lado de "Clear filters". El ancho va en
     flex-basis porque el script fija width:100% en linea y flex-basis manda sobre
     el. El buscador puede encoger; el orden no, o se cortaria su texto. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-results-tools .efs-search{
    flex:0 1 260px;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-results-tools .efs-sort{
    flex:0 0 180px;
  }

  /* Fuera de la barra oscura los campos llevan borde, o se pierden en el fondo. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-results-tools .efs-search-input,
  .efs-filter:is(#efs#efs,.efs-filter) .efs-results-tools .efs-sort{
    height:42px !important;
    min-height:42px !important;
    border:1px solid var(--efs-card-border) !important;
    font-size:14px !important;
    box-shadow:none !important;
  }

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

  .efs-filter:is(#efs#efs,.efs-filter) .efs-results-tools .efs-clear{
    flex:0 0 auto;
    min-height:42px;
    white-space:nowrap;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-results-tools .efs-mobile-filter{
    min-height:42px;
    border:1px solid var(--efs-card-border);
    box-shadow:none;
  }

  /* Buscador dentro del panel de filtros, entre la cabecera y los atributos. */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-side-search{
    padding:14px 18px 6px;
  }

  .efs-filter:is(#efs#efs,.efs-filter) .efs-side-search .efs-search-input{
    height:44px !important;
    min-height:44px !important;
    font-size:14px !important;
  }

  /* Piezas que la estructura no muestra (ver la plantilla). */
  .efs-filter:is(#efs#efs,.efs-filter) .efs-parked{
    display:none !important;
  }

  /* Sin panel de filtros: los productos a todo el ancho, tambien en el movil. */
  .efs-filter:is(#efs#efs,.efs-filter).efs-side-none .efs-layout{
    grid-template-columns:minmax(0,1fr);
  }

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

  /* Filtros a la derecha: la misma rejilla, en espejo. */
  .efs-filter:is(#efs#efs,.efs-filter).efs-side-right .efs-layout{
    grid-template-columns:minmax(0,1fr) 270px;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-side-right .efs-sidebar{
    grid-column:2;
    grid-row:1;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-side-right .efs-main{
    grid-column:1;
    grid-row:1;
  }

  @media (max-width:1024px){
    /* El panel deslizante sale por el lado en el que esta en el escritorio. */
    .efs-filter:is(#efs#efs,.efs-filter).efs-side-right .efs-sidebar{
      left:auto;
      right:0;
      transform:translateX(105%);
      box-shadow:-10px 0 30px rgba(4,19,31,.34);
    }

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

    /* En el panel deslizante el buscador se queda quieto con la cabecera; solo
       ruedan los atributos. */
    .efs-filter:is(#efs#efs,.efs-filter) .efs-side-search{
      flex:0 0 auto;
    }

    /* Sin barra de arriba, la cabecera de resultados hace de barra: el titulo
       arriba y debajo, a todo el ancho, el buscador y luego los controles cortos,
       en el mismo orden que la barra clasica en el movil. */
    .efs-filter:is(#efs#efs,.efs-filter) .efs-results-head--tools{
      flex-wrap:wrap;
    }

    .efs-filter:is(#efs#efs,.efs-filter) .efs-results-head--tools .efs-results-tools{
      flex:1 1 100%;
      flex-wrap:wrap;
      justify-content:flex-start;
    }

    .efs-filter:is(#efs#efs,.efs-filter) .efs-results-tools .efs-search{
      flex:1 1 100%;
      order:-1;
    }

    .efs-filter:is(#efs#efs,.efs-filter) .efs-results-tools .efs-sort{
      flex:1 1 160px;
    }
  }

  /* Los 16px que evitan el zoom de iOS al enfocar un campo, tambien aqui. */
  @media (max-width:760px){
    .efs-filter:is(#efs#efs,.efs-filter) .efs-results-tools .efs-search-input,
    .efs-filter:is(#efs#efs,.efs-filter) .efs-results-tools .efs-sort,
    .efs-filter:is(#efs#efs,.efs-filter) .efs-side-search .efs-search-input{
      font-size:16px !important;
    }
  }

  /* =========================================================
     FILTROS ARRIBA (estructuras "top")
     ---------------------------------------------------------
     El panel de filtros pasa a ser una fila encima de los productos y cada
     atributo un menu desplegable. El script los arranca cerrados y deja uno
     abierto a la vez. Solo en pantallas anchas: por debajo de 1025px es el mismo
     panel deslizante que en las demas estructuras.
     ========================================================= */
  @media (min-width:1025px){
    .efs-filter:is(#efs#efs,.efs-filter).efs-side-top .efs-layout{
      display:block;
    }

    /* Por encima de las fichas: los menus se abren sobre ellas. */
    .efs-filter:is(#efs#efs,.efs-filter).efs-side-top .efs-sidebar{
      position:relative;
      z-index:20;
      margin-bottom:22px;
    }

    .efs-filter:is(#efs#efs,.efs-filter).efs-side-top .efs-side-head{
      display:none;
    }

    .efs-filter:is(#efs#efs,.efs-filter).efs-side-top .efs-facets{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:8px;
      padding:12px 14px !important;
    }

    .efs-filter:is(#efs#efs,.efs-filter).efs-side-top .efs-all-btn{
      width:auto;
      min-height:40px !important;
      padding:8px 14px !important;
      border-radius:999px;
    }

    .efs-filter:is(#efs#efs,.efs-filter).efs-side-top .efs-facet{
      position:relative;
      margin:0;
      padding:0;
      border:0;
    }

    .efs-filter:is(#efs#efs,.efs-filter).efs-side-top .efs-facet-head{
      width:auto;
      min-height:40px;
      padding:8px 14px !important;
      border:1px solid var(--efs-side-line);
      border-radius:999px;
      white-space:nowrap;
    }

    /* La flecha detras del nombre, como en cualquier menu. */
    .efs-filter:is(#efs#efs,.efs-filter).efs-side-top .efs-facet-head svg{
      order:3;
    }

    .efs-filter:is(#efs#efs,.efs-filter).efs-side-top .efs-facet.collapsed .efs-facet-head svg{
      transform:none;
    }

    .efs-filter:is(#efs#efs,.efs-filter).efs-side-top .efs-facet-badge{
      order:2;
    }

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

    .efs-filter:is(#efs#efs,.efs-filter).efs-side-top .efs-facet:not(.collapsed) .efs-facet-head svg{
      transform:rotate(180deg);
    }

    .efs-filter:is(#efs#efs,.efs-filter).efs-side-top .efs-facet-body{
      position:absolute;
      z-index:40;
      top:calc(100% + 8px);
      left:0;
      width:max-content;
      min-width:240px;
      max-width:340px;
      max-height:340px;
      overflow-y:auto;
      padding:8px;
      border:1px solid var(--efs-side-line);
      border-radius:12px;
      background:linear-gradient(180deg,var(--efs-side-bg),var(--efs-side-bg-2));
      box-shadow:0 20px 44px rgba(10,20,35,.28);
    }

    /* Mientras carga, pastillas en lugar de columnas de lineas. */
    .efs-filter:is(#efs#efs,.efs-filter).efs-side-top .efs-skeleton-facet{
      padding:0;
    }

    .efs-filter:is(#efs#efs,.efs-filter).efs-side-top .efs-skeleton-facet .efs-skeleton-line{
      display:none;
    }

    .efs-filter:is(#efs#efs,.efs-filter).efs-side-top .efs-skeleton-facet .efs-skeleton-line--title{
      display:block;
      width:120px;
      height:40px;
      border-radius:999px;
    }
  }


  /* =========================================================
     PRODUCTOS EN LISTA (cards="list")
     ---------------------------------------------------------
     Una ficha por fila: la foto a la izquierda, nombre y SKU en el centro, el
     precio y el boton a la derecha. Las mismas piezas que la rejilla, colocadas
     con una rejilla dentro del cuerpo de la ficha.
     ========================================================= */
  .efs-filter:is(#efs#efs,.efs-filter).efs-cards-list .efs-grid{
    grid-template-columns:minmax(0,1fr) !important;
    gap:12px;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-cards-list .efs-card{
    flex-direction:row;
    align-items:stretch;
  }

  /* La franja de color pasa de arriba al lado izquierdo. */
  .efs-filter:is(#efs#efs,.efs-filter).efs-cards-list .efs-card::before{
    right:auto;
    bottom:0;
    width:4px;
    height:auto;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-cards-list .efs-image-wrap{
    flex:0 0 160px;
    width:160px;
    aspect-ratio:1/1;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-cards-list .efs-card-body{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"title price" "meta cart";
    align-content:center;
    align-items:center;
    column-gap:28px;
    row-gap:8px;
    padding:18px 22px;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-cards-list .efs-title{
    grid-area:title;
    min-height:0 !important;
    margin:0 !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-cards-list .efs-meta{
    grid-area:meta;
    margin:0 !important;
    padding:0 !important;
    border:0;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-cards-list .efs-price{
    grid-area:price;
    justify-self:end;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-cards-list .efs-cart{
    grid-area:cart;
    justify-self:end;
    min-width:160px;
    margin:0 !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-cards-list .added_to_cart{
    grid-column:2;
    justify-self:end;
  }

  /* El esqueleto de carga, con la misma forma de fila. */
  .efs-filter:is(#efs#efs,.efs-filter).efs-cards-list .efs-skeleton-card{
    display:grid;
    grid-template-columns:160px minmax(0,1fr);
    align-content:center;
    column-gap:22px;
    row-gap:12px;
    padding:0;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-cards-list .efs-skeleton-image{
    grid-row:1 / span 3;
    width:160px;
    margin:0;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-cards-list .efs-skeleton-card .efs-skeleton-line{
    margin:0 22px 0 0;
  }

  @media (max-width:760px){
    .efs-filter:is(#efs#efs,.efs-filter).efs-cards-list .efs-image-wrap{
      flex-basis:108px;
      width:108px;
    }

    .efs-filter:is(#efs#efs,.efs-filter).efs-cards-list .efs-card-body{
      grid-template-columns:minmax(0,1fr);
      grid-template-areas:"title" "meta" "price" "cart";
      row-gap:6px;
      padding:12px 14px;
    }

    .efs-filter:is(#efs#efs,.efs-filter).efs-cards-list .efs-price,
    .efs-filter:is(#efs#efs,.efs-filter).efs-cards-list .efs-cart,
    .efs-filter:is(#efs#efs,.efs-filter).efs-cards-list .added_to_cart{
      grid-column:auto;
      justify-self:start;
    }

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

    .efs-filter:is(#efs#efs,.efs-filter).efs-cards-list .efs-skeleton-card{
      grid-template-columns:108px minmax(0,1fr);
    }

    .efs-filter:is(#efs#efs,.efs-filter).efs-cards-list .efs-skeleton-image{
      width:108px;
    }
  }


  /* =========================================================
     ESTILOS DE DISENO (efs-skin-*)
     ---------------------------------------------------------
     Los colores de cada estilo llegan como variables en el atributo style del
     filtro (ver EFS_Skin). Aqui va solo la forma: lo que no se puede decir con
     un color. Llevan !important donde el blindaje de mas arriba tambien lo
     lleva, que es lo unico que le gana.
     ========================================================= */

  /* ---------- MINIMAL ---------- */
  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-minimal{
    --efs-bar-border:#e5e7eb;
    --efs-bar-shadow:none;
    --efs-side-shadow:none;
    --efs-side-tint:transparent;
    --efs-badge-bg:#111827;
    --efs-badge-color:#ffffff;
    --efs-term-active-shadow:none;
    --efs-card-shadow:none;
    --efs-card-hover-border:#c7cbd1;
    --efs-card-hover-shadow:0 10px 24px rgba(17,24,39,.08);
    --efs-card-lift:0px;
    --efs-stock-bg:#ffffff;
    --efs-stock-border:#e5e7eb;
    --efs-stock-color:#15803d;
    --efs-out-bg:#ffffff;
    --efs-out-border:#e5e7eb;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-minimal .efs-sidebar{
    border:1px solid var(--efs-border);
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-minimal .efs-card::before,
  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-minimal .efs-results-head h2::before{
    display:none;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-minimal .efs-results-head{
    border-bottom-width:1px;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-minimal .efs-results-head h2{
    padding-left:0 !important;
    font-weight:700 !important;
    letter-spacing:-.02em !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-minimal .efs-results-count{
    margin-left:0 !important;
    font-weight:400 !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-minimal .efs-term.active{
    font-weight:700 !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-minimal .efs-title{
    font-weight:600 !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-minimal .efs-meta{
    padding-top:0 !important;
    border-top:0;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-minimal .efs-price{
    font-weight:700 !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-minimal .efs-cart{
    border-radius:6px;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-minimal .efs-clear,
  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-minimal .efs-page{
    box-shadow:none;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-minimal .efs-page{
    border:1px solid var(--efs-border);
  }


  /* ---------- SOFT ---------- */
  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-soft{
    --efs-bar-border:transparent;
    --efs-bar-shadow:0 14px 34px rgba(109,93,252,.28);
    --efs-side-shadow:0 14px 40px rgba(46,42,90,.07);
    --efs-side-tint:transparent;
    --efs-badge-bg:#6d5dfc;
    --efs-badge-color:#ffffff;
    --efs-term-active-shadow:0 6px 16px rgba(109,93,252,.32);
    --efs-card-shadow:0 10px 30px rgba(46,42,90,.06);
    --efs-card-hover-border:#dcd7ff;
    --efs-card-hover-shadow:0 20px 40px rgba(46,42,90,.12);
    --efs-card-lift:-6px;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-soft .efs-toolbar{
    border-radius:22px;
  }

  /* Los valores como pastillas que se encienden, en lugar de una lista con casillas. */
  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-soft .efs-facet-body{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    padding:4px 6px 12px;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-soft .efs-term{
    width:auto;
    min-height:34px !important;
    padding:6px 13px !important;
    border:1px solid var(--efs-border);
    border-radius:999px;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-soft .efs-term:not(.active){
    background:var(--efs-card-bg);
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-soft .efs-term[data-depth]{
    padding-left:13px !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-soft .efs-term.active{
    border-color:transparent;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-soft .efs-term-row{
    flex:1 1 100%;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-soft .efs-check{
    display:none;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-soft .efs-term-name{
    flex:0 1 auto;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-soft .efs-facet-head{
    text-transform:none !important;
    letter-spacing:0 !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-soft .efs-facet{
    border-top:0;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-soft .efs-all-btn,
  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-soft .efs-clear,
  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-soft .efs-page,
  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-soft .efs-cart,
  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-soft .efs-facet-badge{
    border-radius:999px;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-soft .efs-card{
    border-width:1px;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-soft .efs-card::before{
    display:none;
  }

  /* La foto flota dentro de la ficha, con sus propias esquinas. */
  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-soft .efs-image-wrap{
    margin:10px 10px 0;
    border-radius:16px;
    background:#f6f5ff;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-soft.efs-cards-list .efs-image-wrap{
    margin:10px 0 10px 10px;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-soft .efs-stock{
    border-radius:999px;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-soft .efs-brand{
    border-radius:999px;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-soft .efs-title{
    font-weight:700 !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-soft .efs-meta{
    border-top:0;
    padding-top:0 !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-soft .efs-results-head h2::before{
    border-radius:999px;
  }


  /* ---------- EDITORIAL ---------- */
  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial{
    --efs-bar-border:transparent;
    --efs-bar-shadow:none;
    --efs-side-shadow:none;
    --efs-side-tint:transparent;
    --efs-badge-bg:#1a1a1a;
    --efs-badge-color:#faf8f5;
    --efs-term-active-shadow:none;
    --efs-card-shadow:none;
    --efs-card-hover-border:#faf8f5;
    --efs-card-hover-shadow:none;
    --efs-card-lift:0px;
    --efs-stock-bg:#faf8f5;
    --efs-stock-border:#faf8f5;
    --efs-stock-color:#5f6b3a;
    --efs-out-bg:#faf8f5;
    --efs-out-border:#faf8f5;
    --efs-out-color:#9a3b2e;
    --efs-page-bg:transparent;
    --efs-clear-bg:transparent;
    --efs-clear-border:transparent;
    --efs-clear-color:#1a1a1a;
    --efs-noimage-bg:#efebe4;
  }

  /* Titulares con serifa: el de los resultados, el del panel, el de cada ficha. */
  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-results-head h2,
  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-side-head h3,
  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-title,
  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-price{
    font-family:var(--efs-serif) !important;
    font-weight:400 !important;
    letter-spacing:0 !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-results-head h2{
    padding-left:0 !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-results-head h2::before,
  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-card::before{
    display:none;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-results-head{
    border-bottom-width:1px;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-results-count{
    margin-left:0 !important;
    font-size:11px !important;
    font-weight:400 !important;
    letter-spacing:.14em !important;
    text-transform:uppercase !important;
  }

  /* Sin caja de barra: solo los campos, subrayados. */
  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-toolbar{
    padding:0;
    border:0;
    border-radius:0;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-search-input,
  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-sort,
  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-results-tools .efs-search-input,
  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-results-tools .efs-sort{
    border:0 !important;
    border-bottom:1px solid var(--efs-text) !important;
    border-radius:0 !important;
    background-color:transparent !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-mobile-filter{
    border:1px solid var(--efs-text);
    border-radius:0;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-sidebar{
    border-top:2px solid var(--efs-text);
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-side-head{
    padding-left:4px;
    padding-right:4px;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-facets{
    padding-left:0;
    padding-right:0;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-facet-head{
    letter-spacing:.16em !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-term,
  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-all-btn{
    font-weight:400 !important;
    border-radius:0;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-term.active,
  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-all-btn.active{
    font-weight:700 !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-check,
  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-facet-badge{
    border-radius:0;
  }

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

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

  /* Fichas sin caja: la foto sobre papel y el texto centrado debajo. */
  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-card{
    border:0;
    border-radius:0;
    overflow:visible;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-image-wrap{
    overflow:hidden;
  }

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

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-card-body{
    align-items:center;
    padding:16px 6px 6px;
    text-align:center;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-title{
    min-height:0 !important;
    margin-bottom:6px !important;
    text-align:center;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-meta{
    padding-top:0 !important;
    border-top:0;
    letter-spacing:.1em !important;
    text-transform:uppercase !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-price{
    justify-content:center;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-stock{
    letter-spacing:.14em !important;
  }

  /* Boton de contorno que se rellena al pasar el raton. */
  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-cart{
    width:100% !important;
    padding:12px 14px !important;
    border:1px solid var(--efs-cart-bg) !important;
    border-radius:0;
    background:transparent;
    color:var(--efs-cart-bg);
    font-size:11px !important;
    font-weight:600 !important;
    letter-spacing:.16em !important;
    text-transform:uppercase !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-cart:hover,
  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-cart:focus{
    background:var(--efs-cart-bg);
    color:var(--efs-cart-color);
    filter:none;
    transform:none;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-clear{
    padding:8px 2px;
    border-radius:0;
    box-shadow:none;
    font-weight:400 !important;
    text-decoration:underline;
    text-underline-offset:4px;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial .efs-page{
    border-radius:0;
    box-shadow:none;
  }

  /* En lista el texto vuelve a la izquierda: centrado en una fila larga se pierde. */
  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial.efs-cards-list .efs-card-body,
  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial.efs-cards-list .efs-title{
    text-align:left;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial.efs-cards-list .efs-card{
    padding-bottom:12px;
    border-bottom:1px solid var(--efs-border);
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-editorial.efs-cards-list .efs-cart{
    width:auto !important;
  }


  /* ---------- DARK ---------- */
  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-dark{
    --efs-bar-border:#232b38;
    --efs-bar-shadow:none;
    --efs-side-shadow:none;
    --efs-side-line:#232b38;
    --efs-side-hover:rgba(255,255,255,.06);
    --efs-badge-bg:#22d3ee;
    --efs-badge-color:#04131a;
    --efs-term-active-shadow:0 6px 18px rgba(34,211,238,.25);
    --efs-check-border:#4b5869;
    --efs-card-shadow:none;
    --efs-card-hover-border:#36506a;
    --efs-card-hover-shadow:0 18px 36px rgba(0,0,0,.45);
    --efs-noimage-bg:#1b2230;
    --efs-stock-bg:#0f2a1f;
    --efs-stock-border:#1d4d38;
    --efs-stock-color:#4ade80;
    --efs-out-bg:#2c1515;
    --efs-out-border:#5c2323;
    --efs-out-color:#f87171;
    color-scheme:dark;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-dark .efs-sidebar{
    border:1px solid var(--efs-side-line);
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-dark .efs-sort{
    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='%238b98a9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E") !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-dark .efs-search > svg{
    stroke:var(--efs-muted);
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-dark .efs-clear,
  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-dark .efs-page{
    box-shadow:none;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-dark .efs-page{
    border:1px solid var(--efs-card-border);
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-dark .efs-skeleton-facet .efs-skeleton-line{
    opacity:.18;
  }


  /* ---------- VIVID ---------- */
  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-vivid{
    --efs-bar-border:transparent;
    --efs-bar-shadow:0 14px 30px rgba(255,90,31,.28);
    --efs-side-shadow:none;
    --efs-side-tint:transparent;
    --efs-badge-bg:#ff5a1f;
    --efs-badge-color:#ffffff;
    --efs-term-active-shadow:0 6px 16px rgba(255,90,31,.32);
    --efs-card-shadow:0 4px 12px rgba(31,19,0,.05);
    --efs-card-hover-border:#ff5a1f;
    --efs-card-hover-shadow:0 22px 40px rgba(255,90,31,.18);
    --efs-card-lift:-7px;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-vivid .efs-sidebar{
    border:2px solid var(--efs-border);
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-vivid .efs-card{
    border-width:2px;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-vivid .efs-results-head h2{
    font-weight:900 !important;
    letter-spacing:-.035em !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-vivid .efs-price{
    font-weight:900 !important;
    letter-spacing:-.02em !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-vivid .efs-cart{
    border-radius:10px;
    font-weight:800 !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-vivid .efs-cart.add_to_cart_button:hover{
    background:var(--efs-accent);
    filter:none;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-vivid .efs-facet-head{
    text-transform:none !important;
    letter-spacing:0 !important;
  }

  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-vivid .efs-page,
  .efs-filter:is(#efs#efs,.efs-filter).efs-skin-vivid .efs-clear{
    border-radius:10px;
  }