/* Store4Bike · Listado de categoría. Referencia: xlmoto.es.
 *
 * Sin border-radius: sin-radios.css manda en todo el sitio.
 * `.s4b-contenedor` lo define cabecera.css; aquí no se redefine.
 */

.s4b-listado {
    background: #fff;
}

/* ------------------------------------------------------------------ */
/*  Cabecera: titular a la izquierda                                    */
/* ------------------------------------------------------------------ */
.s4b-listado__cabecera {
    padding: 22px 0 14px;
}

.s4b-listado__miga {
    font-size: 12px;
    color: #888;
    margin-bottom: 8px;
}

.s4b-listado__miga a { color: #888; }
.s4b-listado__miga a:hover { color: #1a1a1a; }
.s4b-listado__miga span { margin: 0 4px; }

.s4b-listado__titulo {
    margin: 0;
    font-size: 28px;
    /* 800, no 700: el titular es lo unico grande de la pagina y con 700 se
       quedaba blando al lado de la rejilla. Montserrat aqui es variable
       (100-900), asi que 800 NO añade ninguna descarga. */
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.01em;   /* a este peso y tamaño, si no, respira de mas */
    /* El tema pone `capitalize` en los h1 y en castellano eso escribe
       «Pastillas De Freno». El texto ya viene arreglado del controlador. */
    text-transform: none;
}

.s4b-listado__texto {
    margin-top: 10px;
    max-width: 70ch;   /* una línea de texto muy larga no se lee */
    font-size: 14px;
    line-height: 1.6;
    color: #555;
}

/* ------------------------------------------------------------------ */
/*  Barra de familias                                                   */
/* ------------------------------------------------------------------ */
.s4b-listado__familias {
    border-bottom: 1px solid #e3e3e3;
    /* Se desplaza en horizontal: con 8 hermanas no caben en 390 px, y partirlas
       en dos filas descoloca el titular. */
    overflow-x: auto;
    scrollbar-width: none;
}

.s4b-listado__familias::-webkit-scrollbar { display: none; }

.s4b-listado__familias ul {
    display: flex;
    gap: 26px;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.s4b-listado__familia {
    display: inline-block;
    padding: 12px 0 11px;
    font-size: 14px;
    font-weight: 500;
    color: #555;
    text-decoration: none;
    /* El borde va SIEMPRE, transparente cuando no está activa: si se añadiera
       solo a la activa, el texto daría un salto de 2 px al cambiar de pestaña. */
    border-bottom: 2px solid transparent;
}

.s4b-listado__familia:hover { color: #1a1a1a; }

.s4b-listado__familia--activa {
    color: #1a1a1a;
    /* 700 CON LAS PESTAÑAS A ANCHO FIJO NO VALDRIA, pero aquí la barra se
       desplaza en horizontal, así que engordar la activa no descoloca a las
       demás. Es lo que la distingue junto con el subrayado. */
    font-weight: 700;
    border-bottom-color: #1a1a1a;
}

/* ------------------------------------------------------------------ */
/*  Dos columnas: filtros y productos                                   */
/* ------------------------------------------------------------------ */
.s4b-listado__cuerpo {
    display: grid;
    /* `minmax(0, 1fr)` en la columna de productos: con `1fr` pelado, una tabla
       o un nombre largo la ensancharía y desbordaría la página. */
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 32px;
    padding: 24px 0 40px;
    align-items: start;
}

.s4b-listado__filtros {
    /* SIN `position: sticky` ni desplazamiento propio. Se probo y quedaba mal:
     * con 60 facetas la columna es mas alta que la pantalla, asi que aparecia
     * una barra de desplazamiento DENTRO de la caja y el selector de moto salia
     * cortado. Una columna larga que se desplaza con la pagina se entiende
     * mejor que una caja con scroll propio. */
    min-width: 0;
}

/* El selector de moto, aquí dentro, ocupa el ancho de la columna. */
.s4b-listado__filtros #s4b-selector-vehiculo {
    max-width: none;
    margin-bottom: 20px;
}

/* Las facetas las pinta ps_facetedsearch: aquí sólo se les quita el envoltorio
   de panel del tema, que dibujaba cajas dentro de cajas. */
/* `#search_filters_wrapper` es OTRO elemento, que el tema deja suelto en el
   body y oculto; el que va dentro de esta columna es `#search_filters`. */
.s4b-listado__filtros #search_filters {
    visibility: visible !important;   /* el tema las esconde por defecto */
    display: block !important;
    position: static !important;
    width: auto;
    box-shadow: none;
    border: 0;
    padding: 0;
    margin: 0;
    background: none;
}

/* ------------------------------------------------------------------ */
/*  Barra superior                                                      */
/* ------------------------------------------------------------------ */
.s4b-listado__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.s4b-listado__recuento {
    margin: 0;
    font-size: 14px;
    color: #555;
}

.s4b-listado__acciones {
    display: flex;
    align-items: center;
    /* Sin las cajas, 12 px dejaban «Filtrar» y «Relevancia» casi pegados y
       parecian un solo control. */
    gap: 24px;
}

/* El botón de filtrar sólo existe en móvil: en escritorio la columna está a la
   vista y un botón para abrirla sobraría. */
.s4b-listado__abrir-filtros { display: none; }

/* ------------------------------------------------------------------ */
/*  Desplegable de orden («Relevancia»)                                 */
/* ------------------------------------------------------------------ */
/* SE REESTILA EL DEL TEMA, NO SE REESCRIBE. `catalog/_partials/sort-orders.tpl`
 * es la plantilla de PrestaShop y la usan tambien busqueda, novedades y marca:
 * tocarla cambiaria las cuatro. Todo lo de aqui va acotado a
 * `.s4b-listado__ordenar`.
 *
 * EL PROBLEMA, medido a 390 px el 13/09/2026: el boton salia de **67 px de alto
 * contra los 41 de «Filtrar»**, con el texto y la flecha en dos lineas y un
 * borde gris translucido distinto. Dos causas encadenadas, las dos del tema:
 *   1. la flecha lleva `float-xs-right` y se calculaba como `display: block`,
 *      asi que se bajaba a una segunda linea;
 *   2. el contenedor arrastra clases de rejilla de Bootstrap
 *      (`col-sm-9 col-xs-8 col-md-9`) con su ancho y su relleno propios.
 *
 * Se igualan los dos controles en vez de quitarle el borde: lado a lado, dos
 * cajas iguales se leen como un par: una con borde y otra sin el, como un
 * descuadre. Para dejarlo sin borde, basta con quitar `border` y `padding` de
 * `.select-title` aqui. */
/* Los dos hijos en fila. `sort-orders.tpl` los suelta sueltos, contando con
   que el padre sea una fila de Bootstrap — y aqui no lo es. */
.s4b-listado__ordenar {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* «Ordenar por:». Solo se ve en escritorio (el tema le pone `hidden-sm-down`),
   y traia `col-sm-3 col-md-3`: un ancho del 25% de un contenedor que ya es
   estrecho, asi que el texto **partia en dos lineas y se montaba sobre el
   boton**. Se ve SOLO en escritorio; mirando el movil el fallo no aparece. */
.s4b-listado__ordenar .sort-by {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
    padding: 0;
    white-space: nowrap;
    font-size: 14px;
    color: #555;
}

.s4b-listado__ordenar .products-sort-order {
    /* Anula el ancho y el relleno que traen las clases de columna. */
    width: auto;
    max-width: none;
    flex: 0 0 auto;
    padding: 0;
}

.s4b-listado__ordenar .select-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    /* SIN NINGUN BORDE (13/09/2026, peticion del cliente). Se paso por caja
       completa y por solo borde inferior antes de llegar aqui. Mismo
       tratamiento que `.s4b-listado__abrir-filtros`: si se cambia uno, hay que
       cambiar el otro.
       `min-height` SE QUEDA aunque ya no haya nada que dibujar: es la zona de
       pulsacion, y en movil un objetivo por debajo de 40 px se falla con el
       dedo. El relleno horizontal se va para que los dos controles alineen con
       el recuento de resultados y el titulo, en vez de quedar metidos 16 px.
       SIN CAJA NI LINEA, LO QUE DICE QUE ESTO SE PULSA SON LA NEGRITA Y EL
       ICONO: no quitar ninguno de los dos. */
    min-height: 40px;
    padding: 9px 0;
    border: 0;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    color: #1a1a1a;
    cursor: pointer;
    white-space: nowrap;
}

/* La flecha: sin `float` y a la altura del texto. El `float` era lo que la
   mandaba a una segunda linea y doblaba el alto del boton. */
.s4b-listado__ordenar .select-title .material-icons {
    float: none;
    display: inline-block;
    margin: 0;
    font-size: 20px;
    line-height: 1;
}

/* ------------------------------------------------------------------ */
/*  Alineacion del texto de la miniatura                                */
/* ------------------------------------------------------------------ */
/* El texto (marca, nombre, precio) iba metido 14 px respecto a la caja de la
 * foto: medido a 390 px, la foto ocupa 28..185 y el texto 42..171.
 *
 * El relleno esta en `.product_desc` (`12px 14px`) y es del tema. Se quita SOLO
 * el horizontal: el vertical separa el texto de la foto y hace falta.
 *
 * NO SE TOCA el relleno de 10 px de `.img_block`, que es lo que deja aire
 * alrededor de la foto DENTRO de su caja gris. Es otra cosa: quitarlo agranda
 * la foto y la pega a los bordes del recuadro. Las fotos de recambio vienen
 * recortadas sobre blanco y sin ese aire quedan tocando el borde. Si se quiere
 * tambien, es `padding: 0` ahi. */
.s4b-listado__productos .js-product-miniature .product_desc {
    padding-left: 0;
    padding-right: 0;
}

/* ------------------------------------------------------------------ */
/*  Nombre del producto en la miniatura                                 */
/* ------------------------------------------------------------------ */
/* EL RECORTE LO PONE `theme.css`, que es GENERADO y no se toca. Se anula desde
 * aqui, acotado al listado nuevo y **solo por debajo de 992 px**, que es donde
 * la columna es estrecha; en escritorio caben de sobra.
 *
 * El elemento es `h3 > a.product_name` — el `h3` no tiene clase, asi que hay
 * que colgarse del enlace.
 *
 * TRAMPA, Y ME COSTO UNA PASADA: **el recorte NO lo hace `-webkit-line-clamp`.**
 * El tema declara `-webkit-line-clamp: 2` pero el enlace es `display: flow-root`
 * y ESA PROPIEDAD SOLO FUNCIONA CON `display: -webkit-box`. O sea que el valor
 * esta ahi de adorno: lo que corta de verdad es un **`min-height`/`height` de
 * 40 px con `overflow: hidden`** — dos lineas justas. Subir el numero de lineas
 * sin tocar la altura no cambia absolutamente nada, y eso fue lo que paso en el
 * primer intento.
 *
 * MEDIDO a 390 px: la caja del nombre mide 129 px y el texto iba a 14 px, o sea
 * **unos 30 caracteres para nombres de 78**. «ESCAPE TRASERO HARLEY DAVIDSON
 * ULTRA CLASIC, ELECTRA GLIDE…» se quedaba en «ESCAPE TRASERO…» y dos fichas
 * seguidas eran indistinguibles.
 *
 * Y OJO AL SELECTOR: la regla del tema es
 * `.js-product-miniature .product_desc .product_name:not(.one_line)` —cuatro
 * clases—, asi que un selector de tres pierde. El primer intento cambio el
 * tamaño y la altura (que el tema declara en otra regla, mas floja) pero NO el
 * numero de lineas, y el resultado fue una caja mas alta con el mismo texto
 * dentro. Hay que copiar el selector entero, `:not()` incluido.
 *
 * LA ALTURA SIGUE SIENDO FIJA, y es deliberado: las fichas de una fila comparten
 * alto, asi que si cada nombre mide lo que quiere, los precios de una misma fila
 * dejan de alinearse. Se fija al numero exacto de lineas del `clamp`.
 *
 * PENDIENTE Y APARTE: 4.539 nombres estan EN MAYUSCULAS, donde cabe menos y se
 * lee peor. Eso es un trabajo de DATOS, no de CSS: `text-transform` escribiria
 * mal los codigos y las siglas («h7pro», «cee», «2t»), y hace falta una lista
 * blanca de ~150 marcas de moto o saldria «Buf. suzuki RMX». */
@media (max-width: 991px) {
    .s4b-listado__productos .js-product-miniature .product_desc .product_name:not(.one_line) {
        /* `-webkit-box` es lo que hace que `line-clamp` exista. */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        font-size: 13px;
        line-height: 1.35;
        /* 3 lineas x 1,35 x 13 = 52,65 */
        height: 53px;
        min-height: 53px;
    }
}

@media (max-width: 575px) {
    .s4b-listado__productos .js-product-miniature .product_desc .product_name:not(.one_line) {
        /* Dos columnas: es la caja mas estrecha (129 px), donde mas falta hace
           una linea mas. 4 x 1,35 x 12,5 = 67,5 */
        font-size: 12.5px;
        -webkit-line-clamp: 4;
        height: 68px;
        min-height: 68px;
    }
}

/* ------------------------------------------------------------------ */
/*  Rejilla de producto                                                 */
/* ------------------------------------------------------------------ */
/* NO se reescribe la miniatura del tema: se le cambia el aspecto. Así sigue
 * pintando sola las rebajas y las etiquetas el día que existan. */
/* El contenedor real de la rejilla es `.product_content`, y sus hijos son
 * `.item-product` con clases de columna de Bootstrap (`col-lg-4`, `col-xl`…).
 * Se comprobo en el DOM: no existe ningun `.products`, que es lo que uno
 * supondria leyendo PrestaShop. Las clases de columna se anulan con `width` y
 * `max-width`, o pelearian con la rejilla. */
.s4b-listado__productos .product_content {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px 22px;
    margin: 0;
}

.s4b-listado__productos .product_content > .item-product {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.s4b-listado__productos .js-product-miniature {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    /* EL BORDE Y LA SOMBRA YA NO SE QUITAN AQUI: desde el 14/09/2026 la tarjeta
       va sin borde en TODA la web y eso vive en `sin-radios.css`. Lo que queda
       en esta regla es lo que SI es de la rejilla: anular las clases de columna
       de Bootstrap, que es para lo que hace falta el `!important`. */
}

/* LA FOTO SOBRE GRIS SE MUDO A `sin-radios.css` el 14/09/2026: ahora es el
   aspecto de la tarjeta en toda la web, no solo en el listado. Aqui no se
   repite para no tener dos sitios que digan lo mismo. */

/* El `mix-blend-mode` de la foto tambien esta ahora en `sin-radios.css`. */

.s4b-listado__vacio {
    padding: 40px 0;
    color: #666;
}

/* ------------------------------------------------------------------ */
/*  Tablet y móvil                                                      */
/* ------------------------------------------------------------------ */
@media (max-width: 1199px) {
    .s4b-listado__productos .product_content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .s4b-listado__cuerpo {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    /* TODO EN UNA LINEA EN MOVIL (13/09/2026, peticion del cliente): el
     * recuento y los dos controles. Antes se partia en dos filas y se comia
     * 77 px de alto por encima de la primera ficha.
     *
     * MEDIDO a 390 px: el contenido pedia 328 px y la barra tiene 315, o sea
     * que faltaban 13. Se recortan de donde no duele —los huecos y el tamaño
     * del recuento, que es texto secundario— y NO del alto de los controles,
     * que es la zona de pulsacion.
     *
     * `nowrap` A SECAS SERIA UNA TRAMPA: en una pantalla mas estrecha el
     * contenido se saldria. Por eso el recuento puede encogerse (`min-width:
     * 0`) y, si aun asi no cabe, abajo se deja que la barra vuelva a partirse.
     * Mas vale dos lineas que una palabra cortada. */
    .s4b-listado__barra {
        flex-wrap: nowrap;
        gap: 10px;
    }

    .s4b-listado__recuento {
        font-size: 13px;
        white-space: nowrap;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .s4b-listado__acciones {
        gap: 16px;
        flex: 0 0 auto;
    }

    .s4b-listado__abrir-filtros {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        /* Sin ningun borde, como «Relevancia». Ver el comentario de
           `.select-title`: `min-height` se queda por la zona de pulsacion, y la
           negrita y el icono son lo unico que dice que esto se pulsa. */
        min-height: 40px;
        padding: 9px 0;
        border: 0;
        background: transparent;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
    }

    /* La columna pasa a ser un panel que entra desde la izquierda. Nace fuera
       de la pantalla y no `display: none`, para poder animarla. */
    .s4b-listado__filtros {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1050;
        width: min(86vw, 340px);
        max-height: none;
        padding: 20px 18px 40px;
        background: #fff;
        box-shadow: 4px 0 24px rgba(0, 0, 0, .18);
        transform: translateX(-100%);
        transition: transform .25s ease;
        overflow-y: auto;
    }

    .s4b-filtros-abiertos .s4b-listado__filtros { transform: translateX(0); }

    .s4b-filtros-abiertos::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(0, 0, 0, .45);
    }

    @media (prefers-reduced-motion: reduce) {
        .s4b-listado__filtros { transition: none; }
    }
}

@media (max-width: 575px) {
    .s4b-listado__titulo { font-size: 22px; }

    .s4b-listado__productos .product_content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 12px;
    }

    .s4b-listado__productos .img_block { padding: 10px; }
}

/* A 360 px —muy comun: iPhone SE y media gama Android— faltaban 21 px para que
   la fila entrara. Se recortan bajando un punto la tipografia de los dos
   controles y del recuento, y apretando los huecos. No se toca `min-height`:
   sigue siendo la zona de pulsacion. */
@media (max-width: 575px) {
    .s4b-listado__barra { gap: 8px; }
    .s4b-listado__acciones { gap: 12px; }
    .s4b-listado__recuento { font-size: 12px; }

    .s4b-listado__abrir-filtros,
    .s4b-listado__ordenar .select-title {
        font-size: 13px;
    }

    .s4b-listado__ordenar .select-title .material-icons { font-size: 18px; }
}

/* RED DE SEGURIDAD PARA PANTALLAS AUN MAS ESTRECHAS. Con los recortes de
   arriba, la fila entra a partir de ~340 px (medido). Por debajo, la barra
   vuelve a partirse en dos: preferible a cortar «resultados» a la mitad con
   puntos suspensivos. */
@media (max-width: 339px) {
    .s4b-listado__barra { flex-wrap: wrap; }
}


/* PANEL DE FILTROS EN MOVIL: UN SOLO TITULO POR FILTRO (13/10/2026).
   ps_facetedsearch pinta DOS titulos por faceta —el de escritorio
   (.hidden-sm-down) y el de movil (.title.hidden-md-up, con sus flechas)— y
   en el panel salian los dos: «Marca» y otra vez «Marca» con dos chevrones.
   El de escritorio es el que abre y cierra la lista (comprobado: el «+» sigue
   funcionando), asi que se esconde el de movil. Afecta a categorias, marcas y
   busqueda, que comparten esta columna. */
@media (max-width: 991px) {
    .s4b-listado__filtros .facet > .title.hidden-md-up { display: none !important; }
}
/* El tema capitaliza los titulos: «Marca Compatible». El dato dice
   «Marca compatible», que es como se escribe en castellano. */
.s4b-listado__filtros .facet-title { text-transform: none; }