/* Store4Bike · Cabecera propia.
 *
 * El fondo ocupa todo el ancho; el CONTENIDO se alinea con el cuerpo.
 * Medido el 09/09/2026: a 1920 px la cabecera vieja ocupaba 1.905 px y el cuerpo
 * 1.600, con el logo en x=50 y la primera ficha en x=273. 223 px de
 * desalineacion. Corregirlo es una de las razones de rehacerla.
 *
 * Nada de border-radius: sin-radios.css deja el sitio entero con esquinas
 * rectas y la cabecera no es una excepcion.
 */

.s4b-cabecera {
    background: #fff;
    border-bottom: 1px solid #e3e3e3;
}

/* Tope de 1.440 px por decision del cliente (10/09/2026): mas estrecho que el
 * cuerpo, que va a 1.600. Es deliberado, asi que a partir de ~1.470 px de
 * ventana la cabecera queda por dentro del contenido, no alineada con el. */
.s4b-contenedor {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 15px;
}

/* --- utilidad: visible para lectores de pantalla, no para la vista --- */
.s4b-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* --- franja de promocion --- */
.s4b-promo {
    /* ROJO, PERO NO EL #ff0123 DE LA MARCA. Medido: texto blanco sobre #ff0123
     * da 3,98:1, por debajo del 4,5:1 que pide la WCAG para texto normal — y
     * esta franja son 13 px en TODAS las paginas. #d9001d no es un rojo
     * inventado: ya esta en la paleta, es el de `:hover` del boton del selector
     * de vehiculo, y da 5,29:1. A simple vista la diferencia no se aprecia.
     * Si algun dia se quiere el #ff0123 exacto, hay que subir el tamaño del
     * texto o ponerlo en negrita entera para entrar en el umbral de «texto
     * grande». */
    background: #d9001d;
    color: #fff;
    font-size: 13px;
}

.s4b-promo__caja {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 34px;
}

/* --- barra: logo, cuenta, carrito --- */
.s4b-barra__caja {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
}

.s4b-barra__logo {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
}

.s4b-barra__logo img {
    /* Con `height: 32px` fijo, el `img { max-width: 100% }` del tema lo
     * APLASTA cuando no cabe: medido a 360 px, la relacion pasaba de 8,60 a
     * 6,18. Con maximos en los dos ejes y `auto` en ambos, el navegador
     * escala respetando la proporcion. */
    height: auto;
    width: auto;
    max-height: 18px;
    max-width: 100%;
    display: block;
}

.s4b-barra__acciones {
    display: flex;
    align-items: center;
    gap: 4px;
}

.s4b-icono {
    background: none;
    border: 0;
    padding: 8px;
    cursor: pointer;
    color: inherit;
    display: inline-flex;
}

/* --- buscador: SIEMPRE visible, tambien en movil --- */
.s4b-buscador {
    padding: 0 0 10px;
}

.s4b-buscador .s4b-contenedor {
    position: relative;   /* referencia para el panel de sugerencias */
}

.s4b-buscador__forma {
    display: flex;
    border: 1px solid #cfcfcf;
    background: #fff;
}

.s4b-buscador__campo {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 12px 14px;
    font-size: 16px;   /* 16px o iOS hace zoom al enfocar el campo */
}

/* EL TEXTO DE AYUDA DEL CAMPO (13/09/2026, peticion del cliente): mas pequeño
 * y en negro.
 *
 * EL TAMAÑO VA EN `::placeholder`, NUNCA EN EL CAMPO. El `font-size: 16px` del
 * campo es lo que evita que iOS haga zoom al enfocarlo; bajarlo ahi arreglaria
 * esto y romperia aquello. iOS mira el tamaño del INPUT, no el del marcador, asi
 * que aqui se puede bajar sin consecuencias.
 *
 * EL COLOR SE PROBO EN NEGRO Y SE REVIRTIO el mismo dia: un marcador del mismo
 * color que el texto escrito se confunde con texto ya introducido. Se queda el
 * del navegador — aqui NO se declara `color` ni `opacity` a proposito. */
.s4b-buscador__campo::placeholder {
    font-size: 14px;
}

.s4b-buscador__campo:focus {
    outline: 2px solid #1a1a1a;
    outline-offset: -2px;
}

.s4b-buscador__boton {
    /* `inline-flex` + centrado, y NO es un adorno: siendo `block`, el <svg> es
     * un elemento EN LINEA y se apoya en la LINEA BASE del texto, no en el
     * centro de la caja. Medido: el centro de la lupa quedaba 3 px por encima
     * del centro del campo, lo justo para verse torcido sin saber por que.
     * Con `align-items: center` el navegador la centra de verdad, y deja de
     * depender de la altura de linea heredada. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: #1a1a1a;
    color: #fff;
    padding: 0 16px;
    cursor: pointer;
}

/* --- panel de sugerencias --- */
.s4b-sugerencias {
    position: absolute;
    /* `top: 100%` NO ES OPCIONAL. Sin el, la posicion estatica manda: en
     * escritorio el contenedor es un flex centrado, asi que el panel se
     * colocaba CENTRADO SOBRE LA CABECERA, tapando logo y promocion en vez de
     * colgar de la caja de busqueda. Visto en pantalla el 10/09/2026. */
    top: 100%;
    z-index: 60;
    left: 15px;
    right: 15px;
    background: #fff;
    border: 1px solid #cfcfcf;
    border-top: 0;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.s4b-sugerencias__titulo {
    margin: 0;
    padding: 10px 14px 4px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #777;
}

.s4b-sugerencias__lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.s4b-sugerencias__lista a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    text-decoration: none;
    /* NEGRO EXPLICITO, no `inherit` (23/09/2026, lo vio el cliente en movil:
       los nombres salian grises). **En un enlace, `inherit` no significa «el
       color del texto normal»: significa el que venga de arriba, y de arriba
       viene el del TEMA.** Septima vez que muerde lo mismo en este proyecto
       —portada, menu movil, barra de categorias, ficha…—. Si se quiere negro,
       se escribe. */
    color: #1a1a1a;
}

.s4b-sugerencias__lista a:hover,
.s4b-sugerencias__lista a:focus {
    background: #f2f2f2;
}

.s4b-sugerencias__hueco {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    background: #f4f4f4;
}

/* LA MINIATURA, SOBRE EL GRIS DEL SITIO (23/09/2026, peticion del cliente).
 * Es el mismo tratamiento que las tarjetas del listado, las fichas de la
 * portada y el panel de escritorio: con esto el gris de imagen es el mismo de
 * punta a punta.
 *
 * **EL FONDO Y EL `multiply` SON UNA SOLA DECISION**: las fotos de recambio
 * vienen recortadas SOBRE BLANCO, asi que sin la mezcla se ve un rectangulo
 * blanco dentro del gris; y sobre blanco el `multiply` no haria nada, porque
 * multiplicar por blanco devuelve el mismo color. Cambiar uno sin el otro
 * rompe el bloque — ya dio tres vueltas en la portada el 14/09.
 *
 * `object-fit: contain` para que la foto no se recorte dentro del cuadro: son
 * 40 px y una pieza alargada quedaria partida. */
.s4b-sugerencias__lista img {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    object-fit: contain;
    background: #f4f4f4;
    mix-blend-mode: multiply;
}

.s4b-sugerencias__nombre {
    flex: 1 1 auto;
    font-size: 13px;
    line-height: 1.3;
}

.s4b-sugerencias__precio {
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
}

.s4b-sugerencias__vacio,
.s4b-sugerencias__todo,
.s4b-sugerencias__marca {
    margin: 0;
    padding: 10px 14px;
    font-size: 13px;
}

/* ------------------------------------------------------------------ */
/*  Menu de categorias                                                 */
/* ------------------------------------------------------------------ */
/* SIN LINEA ENTRE EL BUSCADOR Y LA BARRA DE CATEGORIAS (14/09/2026, peticion
   del cliente). Llevaba `border-top: 1px solid #e3e3e3`.
   Lo que separa ahora las dos filas es el hueco, igual que en la portada cuando
   se quitaron las lineas entre secciones.
   **NO SE TOCA el `border-bottom` de `.s4b-cabecera`**: esa linea es otra cosa
   —la que separa la cabecera entera de la pagina— y en escritorio es lo unico
   que lo hace, porque la ultima fila es esta barra y es blanca. */
.s4b-menu {
    /* sin borde */
}

.s4b-menu .s4b-contenedor {
    position: relative;
}

.s4b-menu__barra {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2px;
    /* RED DE SEGURIDAD (14/09/2026). Con el relleno reducido las nueve familias
     * caben a 992 px por solo 3 px de margen: un nombre de categoria mas largo,
     * una familia nueva o una tipografia que cargue distinta lo vuelven a
     * romper. Con esto, en el peor caso la barra se desliza en vez de recortar
     * el ultimo enlace **dejandolo sin forma de pulsarlo**, que es lo que hacia.
     * En uso normal no se desplaza: el contenido cabe. */
    overflow-x: auto;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* Edge antiguo */
}

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

/* `flex: 0 0 auto` NO ES OPCIONAL, y es la misma leccion que la miga de pan:
   sin el, los enlaces se encogen para caber todos, el texto se recorta y **no
   hay nada que deslizar**. Encogerse es justo el fallo que se esta evitando. */
.s4b-menu__barra > li { flex: 0 0 auto; }

.s4b-menu__barra a {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 12px;
    text-decoration: none;
    /* NEGRO EXPLICITO (14/09/2026, peticion del cliente). Aqui ponia
     * `color: inherit`, que en un enlace **no significa «el color del texto
     * normal»**: significa el que venga de arriba, y de arriba venia el gris
     * `#7a7a7a` del tema. Es la misma trampa que se arreglo en la portada el
     * 13/09/2026 y en el menu movil.
     * **Arrastra tambien los ICONOS**: los 15 simbolos de `iconos.svg.tpl` estan
     * dibujados con `currentColor` y ninguno lleva un `fill` fijo, asi que se
     * pintan con el color del enlace. Comprobado antes de tocar nada; si algun
     * dia se añade un icono con color propio, este cambio no le afectara. */
    color: #1a1a1a;
    font-size: 14px;
    white-space: nowrap;
}

/* El icono sube de 18 a 20 px. El tamaño se manda DESDE AQUI y no desde los
   atributos `width`/`height` del `<svg>`, que se quedan como respaldo por si
   la hoja no llega a cargar. */
.s4b-menu__barra a svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

/* LAS NUEVE FAMILIAS NO CABEN EN UNA VENTANA DE ESCRITORIO ESTRECHA, y **ya no
 * cabian antes de agrandar el texto**: medido a 992 px, la barra pedia 1.007 px
 * de los 977 disponibles y **«Taller» quedaba cortado contra el borde, sin
 * forma de pulsarlo**. Al subir a 14/20 px pasaba a pedir 1.025.
 *
 * No se ve a simple vista porque la pagina NO coge desplazamiento horizontal:
 * los enlaces son elementos flex y se encogen, asi que el ultimo se recorta en
 * silencio. Solo aparece entre 992 y ~1.200 px — por debajo manda el menu de
 * movil y por encima sobra sitio.
 *
 * Se recupera del RELLENO, que son 24 px por enlace (216 de los 1.025), no del
 * tamaño de letra, que es justo lo que se ha pedido agrandar. */
@media (max-width: 1199px) {
    .s4b-menu__barra a {
        padding: 11px 8px;
        gap: 6px;
    }
}

.s4b-menu__barra a:hover,
.s4b-menu__barra a:focus {
    background: #f2f2f2;
}

/* El panel cuelga del <nav>, no del contenedor, para poder ir a todo el ancho.
   Esta es la referencia de ese `left/right: 0`. */
.s4b-menu { position: relative; }

.s4b-menu__panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 55;
    background: #fff;
    border: 1px solid #cfcfcf;
    padding: 16px;
    /* LA SOMBRA NO PUEDE ASOMAR POR ARRIBA (15/09/2026, lo vio el cliente:
       «quita la sombra superior del megamenu»).
       UNA SOMBRA CON DESPLAZAMIENTO HACIA ABAJO SIGUE SUBIENDO, y ahi esta la
       trampa: el borde superior del difuminado esta en `offset - blur/2`, o sea
       10 - 14 = **-4 px**. Cuatro pixeles de gris por encima del panel, justo
       debajo de la barra de categorias, que se leen como una linea sucia.
       Se corrige con SPREAD NEGATIVO, no bajando el desplazamiento: -12 px
       encoge la sombra por los cuatro lados y deja su borde superior en +8,
       dentro del panel. La profundidad hacia abajo se mantiene subiendo un
       punto la opacidad. */
    box-shadow: 0 10px 28px -12px rgba(0, 0, 0, .18);
}

/* EL MENU DE SIEMPRE SE QUEDA COMO ESTABA, y esto no es opcional: al mover el
   panel fuera del contenedor, el menu publicado habria pasado a todo el ancho
   sin que nadie lo pidiera. Se le devuelve su caja de 1440 centrada, que es
   exactamente donde estaba (medido: 123..1563 en una ventana de 1700). */
.s4b-menu:not(.s4b-menu--nuevo) .s4b-menu__panel {
    max-width: 1440px;
    margin: 0 auto;
}

.s4b-menu__columnas {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    columns: 3;
    column-gap: 24px;
}

.s4b-menu__columnas a {
    display: block;
    padding: 5px 0;
    text-decoration: none;
    color: inherit;
    font-size: 13px;
    break-inside: avoid;
}

.s4b-menu__columnas a:hover {
    text-decoration: underline;
}

/* `.s4b-menu__n` (el recuento de productos en cada enlace del menu) se retiro
   el 13/09/2026 por decision del cliente. La regla se borra con el marcado:
   dejar CSS de algo que ya no se pinta solo sirve para confundir al siguiente. */

.s4b-menu__cargando,
.s4b-menu__todo {
    margin: 0;
    font-size: 13px;
}

/* ------------------------------------------------------------------ */
/*  Panel de movil                                                     */
/* ------------------------------------------------------------------ */
.s4b-panel {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* El icono de cerrar, en negro como los de la barra. `.s4b-icono` lo deja en
   `color: inherit` y lo heredado aqui es el gris del tema (#7a7a7a): al lado del
   texto negro de las familias se veia apagado. */
.s4b-panel__cabeza .s4b-icono {
    color: #1a1a1a;
}

/* El logo del panel. Mismas cautelas que el de la barra: `img { max-width:
   100% }` del tema APLASTA un logo con `height` fijo, asi que se limita por los
   dos ejes con `auto` en ambos y el navegador escala respetando la proporcion. */
.s4b-panel__inicio {
    display: inline-flex;
    align-items: center;
}

.s4b-panel__inicio img {
    display: block;
    width: auto;
    height: auto;
    max-width: 150px;
    max-height: 20px;
}

.s4b-panel__cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    border-bottom: 1px solid #e3e3e3;
    position: sticky;
    top: 0;
    background: #fff;
}

/* `.s4b-panel__titulo` («Categorías») se retiro el 13/09/2026: su sitio lo ocupa
   el icono de inicio. La regla se deja por si se repone. */
.s4b-panel__titulo {
    font-weight: 600;
}

.s4b-panel__lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.s4b-panel__lista {
    /* Bloques separados en vez de una lista con lineas: es lo que pidio el
       cliente siguiendo xlmoto. El hueco lo da el `gap`, no un margen por fila,
       para que la ultima no arrastre un hueco suelto al final. */
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 12px 0;
}

.s4b-panel__rama {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    /* 56 px de alto: son los objetivos principales del menu y se tocan con el
       pulgar, a menudo en movimiento. */
    min-height: 56px;
    padding: 10px 14px;
    background: #f4f4f4;
    border: 0;
    font: inherit;
    font-weight: 600;
    /* NEGRO EXPLICITO, no `inherit`: lo que se hereda en un enlace es el color
       del TEMA, que aqui es un morado (#521541). Mismo caso que las fichas de
       la portada. */
    color: #1a1a1a;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.s4b-panel__rama > span:first-of-type {
    flex: 1 1 auto;
}

/* El chevron. Apunta a la derecha en reposo y baja 90 grados al desplegar, asi
   que dice hacia donde se abre. El giro se lee de `aria-expanded`, que es el
   mismo atributo que usa el lector de pantalla: una sola fuente de verdad. */
.s4b-panel__mas {
    flex: 0 0 auto;
    transition: transform .18s ease;
}

.s4b-panel__rama[aria-expanded="true"] .s4b-panel__mas {
    transform: rotate(90deg);
}

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

/* --- Enlaces secundarios (atencion al cliente, pedido...) --- */
/* Sin fondo y mas ligeros que las familias, a proposito: son el segundo nivel
   de la pantalla y no deben competir con las categorias, que es a lo que se
   entra aqui. */
.s4b-panel__mas-enlaces {
    list-style: none;
    margin: 18px 0 0;
    padding: 6px 26px 24px;
    border-top: 1px solid #e3e3e3;
}

.s4b-panel__mas-enlaces a {
    display: block;
    padding: 13px 0;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 15px;
}

.s4b-panel__mas-enlaces a:hover,
.s4b-panel__mas-enlaces a:focus { color: var(--hovercolor); }

.s4b-panel__hijas {
    /* Alineado con el texto de la familia, no con el borde del bloque: el icono
       ocupa 20 px mas 12 de hueco mas los 14 del relleno. */
    padding: 0 14px 14px 46px;
}

.s4b-panel__hijas .s4b-menu__columnas {
    columns: 1;
    margin-bottom: 6px;
}

.s4b-panel__hijas a {
    display: block;
    padding: 8px 0 8px 32px;
    font-size: 14px;
    color: inherit;
    text-decoration: none;
}

/* ------------------------------------------------------------------ */
/*  Quien manda a cada ancho                                           */
/* ------------------------------------------------------------------ */
@media (min-width: 992px) {
    /* En escritorio manda la barra; el panel de movil no existe. */
    .s4b-panel { display: none !important; }
}

@media (max-width: 991px) {
    /* En movil manda el panel; la barra horizontal no aparece. */
    .s4b-menu { display: none; }
}

/* ================================================================== */
/*  ESCRITORIO                                                         */
/* ================================================================== */
@media (min-width: 992px) {

    /* En escritorio no hay hamburguesa: manda la barra de categorias.
     * Ademas, ocupando sitio empujaba el logo 37 px a la derecha. */
    .s4b-barra__menu {
        display: none;
    }

    .s4b-barra__caja {
        min-height: 72px;
        gap: 24px;
    }

    /* Sin esto el enlace del logo se estira a 1.286 px y se lleva por delante
     * la fila entera. */
    .s4b-barra__logo {
        flex: 0 0 auto;
    }

    .s4b-barra__logo img {
        max-height: 20px;
    }

    /* Al fijar el logo con `flex: 0 0 auto` deja de empujar, y cuenta y
     * carrito se quedaban pegados a el, DEBAJO del buscador. `margin-left:
     * auto` los manda al borde derecho, que es donde se les busca. */
    .s4b-barra__acciones {
        margin-left: auto;
    }

    /* --- El buscador sube a la fila del logo ---
     * Con REJILLA, no con posicionamiento absoluto: absoluto respecto a
     * .s4b-cabecera pondria el buscador encima de la franja de promocion.
     * Compartiendo fila de rejilla se superpone solo a la barra, que es lo
     * que se busca. */
    .s4b-cabecera {
        display: grid;
        /* `minmax(0, 1fr)` Y NO `1fr`. Un `1fr` pelado lleva un minimo `auto`
         * implicito, asi que la columna se agranda hasta caber el contenido en
         * vez de ceñirse al contenedor. Medido a 992 px: la rejilla ocupaba 977
         * y la barra de dentro 1116, con el carrito fuera de pantalla.
         * El 0 le quita ese minimo. */
        grid-template-columns: minmax(0, 1fr);
    }

    /* `grid-column: 1` NO ES OPCIONAL. Con solo `grid-row`, la colocacion
     * automatica mete el segundo elemento de la misma fila en una COLUMNA
     * IMPLICITA nueva: la barra se queda sin su ancho y el buscador aparece
     * pegado a la derecha con 283 px. Comprobado el 10/09/2026. */
    /* OJO: EN ESCRITORIO LA POSICION NO LA DECIDE EL HTML, LA DECIDE ESTA
       REJILLA, Y LAS DOS DICEN COSAS DISTINTAS A PROPOSITO. La franja de avisos
       va TERCERA en el marcado, porque en MOVIL tiene que salir debajo del
       buscador; aqui `grid-row: 1` la devuelve arriba, porque en escritorio el
       buscador va SUPERPUESTO a la fila del logo y «debajo del buscador» no es
       un sitio que exista. Leyendo solo el `.tpl` parece un fallo y no lo es.
       Si se vuelve a mover, hay que tocar LOS DOS SITIOS. */
    /* DESDE EL 29/09/2026 LA FRANJA VA DEBAJO DEL MENU (peticion del
       cliente): logo y buscador en la fila 1, menu en la 2, franja en la 3.
       Antes era la primera fila de todas. */
    .s4b-barra    { grid-row: 1; grid-column: 1; }
    .s4b-menu     { grid-row: 2; grid-column: 1; }
    .s4b-promo    { grid-row: 3; grid-column: 1; }

    /* La capa del buscador cubre la fila entera de la barra, asi que tiene que
     * dejar pasar los clics. `pointer-events: none` va en ESTE div, el
     * exterior: ponerlo solo en el .s4b-contenedor de dentro no basta, porque
     * quien tapa el carrito es la caja de fuera. Comprobado con
     * document.elementFromPoint sobre el carrito: devolvia DIV.s4b-buscador. */
    .s4b-buscador {
        grid-row: 1;
        grid-column: 1;
        padding: 0;
        pointer-events: none;
    }

    /* La capa del buscador cubre toda la fila, asi que deja pasar los clics;
     * solo el formulario los recibe. Sin esto, el logo y el carrito quedarian
     * debajo de una lamina invisible y no se podrian pulsar. */
    .s4b-buscador .s4b-contenedor {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 72px;
    }

    .s4b-buscador__forma {
        pointer-events: auto;
        /* La caja va CENTRADA y superpuesta a la fila del logo, asi que su
         * ancho no puede ser `100%`: se comeria el logo y las acciones.
         * Los 440 px reservados son los dos lados: logo (~172 px a 20 px de
         * alto) + acciones (~84 px) + holgura. Asi crece con la pantalla pero
         * nunca invade.
         * Comprobado que no solapa a 992, 1200, 1440 y 1920 px. */
        width: calc(100% - 440px);
        max-width: 900px;
    }

    .s4b-sugerencias {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        /* El panel copia el ancho de la caja, o se veria descolgado. */
        width: calc(100% - 440px);
        max-width: 900px;
        pointer-events: auto;
        /* En escritorio el contenedor centra la caja en una fila de 72 px, asi
         * que el panel cae 11 px por debajo. Con ese hueco, un panel sin borde
         * superior parece despegado: aqui SI lleva borde. En movil va pegado a
         * la caja y por eso alli no lo lleva. */
        border-top: 1px solid #cfcfcf;
    }
}

/* ================================================================== */
/*  Cabecera fija al hacer scroll                                      */
/* ================================================================== */
.s4b-cabecera--fija {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}

/* Al quedarse fija se esconde la promocion: ya se ha leido y roba 34 px de
   pantalla en cada scroll. */
.s4b-cabecera--fija .s4b-promo {
    display: none;
}

/* ================================================================== */
/*  Cuenta y carrito: solo iconos, con globo de recuento               */
/* ------------------------------------------------------------------ */
/*  Se estilan los widgets NATIVOS (ps_customersignin y ps_shoppingcart)
    sin tocar sus plantillas, y todo va acotado a .s4b-barra__acciones
    para no alterar la cabecera vieja de Creative Elements.            */
/* ================================================================== */

.s4b-barra__acciones > div {
    display: flex;
    align-items: center;
}

/* Fuera las etiquetas de texto: el icono manda.
   La accesibilidad no se pierde: el enlace de cuenta ya trae `title`, y a
   ambos les pone `aria-label` el JS. */
.s4b-barra__acciones .hidden-sm-down {
    display: none !important;
}

.s4b-barra__acciones .user-info a,
.s4b-barra__acciones .blockcart .header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 8px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

/* El `:hover` de estos dos ya no vive aqui: esta abajo, en el bloque
   «Iconos de la barra», junto con el del menu, el corazon y WhatsApp.
   Tenerlo en dos sitios era lo que dejaba unos iconos en negro y otros en rojo. */

.s4b-barra__acciones .material-icons {
    font-size: 24px;
    line-height: 1;
}

/* --- El globo del recuento ---
   Cuadrado a proposito: sin-radios.css deja el sitio entero con esquinas
   rectas y un globo redondo cantaria.
   El JS le quita los parentesis al "(0)" del modulo y lo esconde cuando esta
   a cero: un globo con un cero no informa de nada. */
.s4b-barra__acciones .cart-products-count {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    background: #d32027;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}

.s4b-barra__acciones .cart-products-count[hidden] {
    display: none;
}

/* ================================================================== */
/*  LA LUPA, DENTRO DEL CAMPO Y A LA IZQUIERDA (13/09/2026)            */
/* ================================================================== */
/* Como en la referencia. Antes era un boton negro cuadrado pegado a la
 * derecha: funcionaba, pero hacia que el buscador pareciera un formulario
 * en vez de una caja de busqueda.
 *
 * SE MUEVE CON `order`, NO CAMBIANDO EL ORDEN EN EL HTML. Asi el campo
 * sigue siendo el primer elemento enfocable del formulario: quien navega
 * con el teclado llega a escribir, no al boton.
 *
 * El boton SIGUE SIENDO un submit de verdad, solo que sin fondo. En la
 * referencia la lupa es decorativa y hay que pulsar Enter; aqui se puede
 * hacer las dos cosas.
 *
 * Solo por debajo de 992 px: en escritorio la caja va centrada y superpuesta
 * a la fila del logo, y ahi el boton oscuro a la derecha si funciona. */
@media (max-width: 991px) {
    .s4b-buscador__boton {
        order: -1;
        background: transparent;
        color: #8a8a8a;
        padding: 0 6px 0 12px;
    }

    .s4b-buscador__boton:hover,
    .s4b-buscador__boton:focus { color: #1a1a1a; }

    .s4b-buscador__campo { padding-left: 4px; }

    /* MENOS RELLENO VERTICAL (13/09/2026, peticion del cliente): la caja pasa
     * de 50 a 44 px de alto. Afecta a la barra de la cabecera Y a la del
     * buscador a pantalla completa, porque **es el mismo campo**: la capa no
     * duplica nada.
     * NO SE BAJA MAS: con 9 px la caja se queda en 44, y por debajo de 40 el
     * campo deja de ser un objetivo comodo para el dedo. Y el `font-size: 16px`
     * NO se toca — es lo que evita que iOS haga zoom al enfocar. */
    .s4b-buscador__campo { padding-top: 9px; padding-bottom: 9px; }
}

/* ================================================================== */
/*  FRANJA DE AVISOS ROTATIVA                                          */
/* ================================================================== */
.s4b-promo__caja {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* La pista ocupa el hueco que quede y recorta: tres mensajes de largo
   distinto no pueden cambiar el alto de la franja al rotar. */
.s4b-promo__pista {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.s4b-promo__flecha {
    flex: 0 0 auto;
    border: 0;
    background: none;
    color: inherit;
    /* 28x28 es pequeño para un dedo, pero la franja entera mide 34 px de alto
       y agrandarlo la deformaria. Son un atajo, no la accion principal: los
       mensajes pasan solos cada 5 s. */
    width: 28px;
    height: 28px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    opacity: .75;
}

.s4b-promo__flecha:hover,
.s4b-promo__flecha:focus { opacity: 1; }

.s4b-promo__flecha:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

/* LA LINEA DEL PIE DE LA CABECERA, FUERA EN MOVIL (13/09/2026, peticion del
 * cliente).
 *
 * `.s4b-cabecera` lleva `border-bottom: 1px solid #e3e3e3` para separarse del
 * contenido. En ESCRITORIO la ultima fila de la cabecera es el menu de
 * categorias, que es blanco, y esa linea es lo unico que lo separa de la pagina:
 * ahi se queda.
 *
 * Por debajo de 992 px el menu se oculta y la ultima fila pasa a ser la FRANJA
 * DE AVISOS, que es roja y maciza: la linea gris ya no separa nada y queda
 * colgando entre el rojo y lo que venga debajo — en la portada, el banner
 * negro. Se ve como un pelo gris entre dos bloques de color, que es justo lo
 * que el cliente marco.
 *
 * O sea que el borde no sobra: sobra SOLO donde la franja lo remata. */
@media (max-width: 991px) {
    .s4b-cabecera {
        border-bottom: 0;
    }
}

/* Y DESDE EL 29/09/2026 TAMBIEN EN ESCRITORIO, por la misma razon: la franja
   pasa a ser la ultima fila alli tambien, debajo del menu. Con la cabecera
   FIJA la franja se esconde y la ultima fila vuelve a ser el menu blanco: ahi
   lo separa de la pagina la sombra de `.s4b-cabecera--fija`, asi que no hace
   falta reponer la linea. */
.s4b-cabecera {
    border-bottom: 0;
}

/* ------------------------------------------------------------------ */
/*  Iconos de la barra, mas juntos en movil (13/09/2026)                */
/* ------------------------------------------------------------------ */
/* Medido a 390 px: entre corazon, cuenta y carrito habia **20 px de aire**, y
 * solo 4 eran el `gap`. Los otros 16 son el relleno interno de cada caja
 * (8 px por lado), que es lo que de verdad los separa — bajar el `gap` a 0 y
 * dejarlo ahi habria quitado 4 de 20 y pareceria que la regla no hace nada.
 *
 * NO SE TOCA EL ALTO: los 40 px son la zona de pulsacion, y con el dedo un
 * objetivo mas bajo se falla. Solo se estrecha el relleno LATERAL, que no
 * afecta a la altura. Quedan cajas de 32x40 y **8 px entre iconos**.
 *
 * El tercer hijo (el carrito) no lleva relleno propio: su enlace ya mide 24 px
 * y se centra en la caja, asi que solo hay que estrechar la caja. */
@media (max-width: 991px) {
    .s4b-barra__acciones {
        gap: 0;
    }

    /* LOS TRES SELECTORES, uno por icono, y hay que copiarlos de la seccion
       «Cuenta y carrito» de mas arriba: la cuenta es `> div > .user-info > a`
       (tres niveles) y el carrito es un `div.header`, NO un enlace. Un
       `> div > a` generico no casa con ninguno de los dos — se probo y dejo el
       corazon estrechado y los otros dos anchos, con huecos desiguales de 12 y
       16 px, que se ve peor que antes de tocar nada. */
    .s4b-barra__acciones > .s4b-icono,
    .s4b-barra__acciones .user-info a,
    .s4b-barra__acciones .blockcart .header {
        padding-left: 4px;
        padding-right: 4px;
    }
}

/* ------------------------------------------------------------------ */
/*  Iconos de la barra, en negro (13/09/2026)                           */
/* ------------------------------------------------------------------ */
/* Estaban los cuatro en el gris que hereda del tema (#7a7a7a).
 *
 * SE INCLUYE EL DEL MENU, aunque el cliente hablara de «los iconos» a raiz del
 * corazon: es el mismo tipo de control y esta en la misma fila, y dejarlo gris
 * mientras los otros tres van en negro se lee como un descuido, no como una
 * jerarquia.
 *
 * NO SE INCLUYE la lupa del buscador: esa vive DENTRO del campo de texto, hace
 * de indicacion del campo y no de accion de la barra. En negro competiria con
 * el propio texto que se escribe.
 *
 * En los tres de la derecha hay que poner el color en el elemento que lo
 * declara —`.user-info a` y `.blockcart .header` lo traen como `inherit`, pero
 * el gris entra por encima—, no en el contenedor. */
.s4b-barra__menu,
.s4b-barra__deseos,
.s4b-barra__whatsapp,
.s4b-barra__acciones .user-info a,
.s4b-barra__acciones .blockcart .header {
    color: #1a1a1a;
}

/* ------------------------------------------------------------------ */
/*  Y EN ROJO AL PASAR EL RATON (14/09/2026, peticion del cliente)      */
/* ------------------------------------------------------------------ */
/* El rojo es `#ff0123`, el de la marca y el mismo `--hovercolor` que ya usa el
 * resto del sitio al señalar. **No se escribe la variable a pelo sino el color**:
 * `--hovercolor` la leen 169 reglas del tema y si algun dia se cambia, estos
 * iconos irian detras sin que nadie lo decida.
 *
 * ARRASTRA LOS DIBUJOS SOLO: los simbolos del sprite estan trazados con
 * `currentColor` y ninguno lleva `fill` propio, asi que cambian con el color del
 * enlace. Es la misma comprobacion que se hizo al ponerlos en negro.
 *
 * VAN LOS CINCO, incluido el del MENU aunque en escritorio no se pinte: en movil
 * si, y dejarlo sin reaccion mientras los demas responden se lee como un
 * descuido. **La lupa del buscador sigue fuera**: vive dentro del campo de texto
 * y es indicacion del campo, no una accion de la barra.
 *
 * `:focus-visible` ADEMAS DE `:hover`, o quien navega con teclado no tiene el
 * mismo aviso. No sustituye al `outline`, se suma.
 *
 * Sustituye al `color: #000` que tenian SOLO cuenta y carrito: era un negro algo
 * mas oscuro que el de reposo, o sea un cambio que practicamente no se veia. */
.s4b-barra__menu:hover,
.s4b-barra__deseos:hover,
.s4b-barra__whatsapp:hover,
.s4b-barra__acciones .user-info a:hover,
.s4b-barra__acciones .blockcart .header:hover,
.s4b-barra__menu:focus-visible,
.s4b-barra__deseos:focus-visible,
.s4b-barra__whatsapp:focus-visible,
.s4b-barra__acciones .user-info a:focus-visible,
.s4b-barra__acciones .blockcart .header:focus-visible {
    color: #ff0123;
}

/* ------------------------------------------------------------------ */
/*  Animacion al cambiar de aviso (13/09/2026)                          */
/* ------------------------------------------------------------------ */
/* SOLO `opacity` Y `transform`, que es lo unico que se anima sin coste: las
 * resuelve el compositor y NO obligan a recalcular maquetacion ni a repintar.
 * Animar `left`, `width` o `margin` si lo haria, y esto corre en todas las
 * paginas.
 *
 * 240 ms: por debajo de 200 no se percibe como movimiento y por encima de 300
 * se hace esperar. El desplazamiento es de 10 px — lo justo para dar direccion;
 * mas convierte un detalle en un carrusel.
 *
 * `.s4b-promo__pista` ya lleva `overflow: hidden`, asi que el mensaje entra
 * recortado por el borde y no empuja nada.
 *
 * NO HAY ANIMACION DE SALIDA: el mensaje anterior se oculta de golpe. Cruzarlos
 * obligaria a tenerlos los dos visibles a la vez, o sea a posicionarlos en
 * absoluto y reservar el alto a mano. */
@keyframes s4b-promo-der {
    from { opacity: 0; transform: translateX(10px); }
    to   { opacity: 1; transform: none; }
}

@keyframes s4b-promo-izq {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: none; }
}

.s4b-promo__texto--der { animation: s4b-promo-der .24s ease-out; }
.s4b-promo__texto--izq { animation: s4b-promo-izq .24s ease-out; }

/* Quien pide menos movimiento ya tiene la rotacion automatica apagada desde el
   JS; aqui se apaga tambien la de las flechas, que si siguen funcionando. */
@media (prefers-reduced-motion: reduce) {
    .s4b-promo__texto--der,
    .s4b-promo__texto--izq { animation: none; }
}

/* ================================================================== */
/*  Buscador a pantalla completa en movil (13/09/2026)                 */
/* ------------------------------------------------------------------ */
/*  Lo enciende el JS con `s4b-buscando` en el <body>. NO hay un segundo
    formulario: es ESTE MISMO bloque, que pasa de franja a capa. Asi el
    autocompletado no se entera de nada.                               */
/* ================================================================== */
@media (max-width: 991px) {

    .s4b-buscando .s4b-buscador {
        position: fixed;
        inset: 0;
        z-index: 1200;   /* por encima de la cabecera fija */
        background: #fff;
        padding: 10px 0 0;
        /* `dvh` Y NO `vh`: en iOS `100vh` cuenta la barra del navegador como si
         * no existiera, asi que con el teclado abierto la capa se pasa de largo
         * y da saltos al aparecer y desaparecer el teclado. `dvh` sigue la
         * altura real. El `vh` queda de respaldo para navegadores sin `dvh`. */
        height: 100vh;
        height: 100dvh;
        display: flex;
        flex-direction: column;
    }

    .s4b-buscando .s4b-buscador > .s4b-contenedor {
        display: flex;
        flex-direction: column;
        min-height: 0;   /* sin esto el hijo que desplaza no puede encogerse */
        /* `0 0 auto` DESDE EL 23/09/2026: este contenedor ya NO lleva dentro el
           panel ni los atajos —se sacaron fuera para que el panel de escritorio
           pueda ir a todo el ancho—, asi que solo envuelve el formulario y no
           debe crecer. Con `1 1 auto` se comia el alto y el panel se quedaba
           sin sitio para desplazarse. */
        flex: 0 0 auto;

        /* MAS ANCHO DENTRO DE LA CAPA (13/09/2026, peticion del cliente).
         * `.s4b-contenedor` es el contenedor general del sitio: `max-width:
         * 1440px`, `margin: 0 auto` y 15 px de relleno. Dentro de la capa eso
         * dejaba el contenido en **351 px de 390**, o sea casi 20 px muertos por
         * lado — y el culpable NO era el relleno sino el `margin: 0 auto`: en un
         * contenedor flex, un margen automatico en el eje transversal se come el
         * espacio libre y **el elemento deja de estirarse**. Por eso hay que
         * anular el margen, no solo bajar el relleno.
         * Con 12 px de relleno el contenido pasa de 351 a 366 px. Se deja algo:
         * a 0 el campo y los atajos quedan tocando el borde de la pantalla. */
        width: 100%;
        max-width: none;
        margin: 0;
        padding-left: 12px;
        padding-right: 12px;
    }

    /* EL ORDEN DENTRO DE LA CAJA HAY QUE REHACERLO, y no es evidente: en movil
     * la lupa lleva `order: -1` para ir DENTRO del campo por la izquierda (ver
     * el bloque de la cabecera movil). Dentro de la capa eso la deja delante de
     * la flecha de volver y sale «lupa, flecha, campo», que no se entiende.
     * Aqui la flecha se va la primera (`-2`) y la lupa vuelve a su sitio a la
     * derecha (`0`): «‹ campo lupa». */
    .s4b-buscando .s4b-buscador__volver { order: -2; }
    .s4b-buscando .s4b-buscador__boton  { order: 0; }

    /* La flecha de volver, dentro de la caja del campo y a su izquierda. */
    .s4b-buscando .s4b-buscador__volver {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        min-height: 40px;
        border: 0;
        background: none;
        color: #1a1a1a;
        cursor: pointer;
    }

    /* Las sugerencias y los atajos llenan lo que queda y se desplazan ellos,
       no la pagina: el fondo esta bloqueado. */
    .s4b-buscando .s4b-sugerencias,
    .s4b-buscando .s4b-buscador__atajos {
        position: static;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border: 0;
        box-shadow: none;
        /* El relleno lateral lo ponia `.s4b-contenedor`, del que estos dos
           salieron el 23/09. Se repone aqui con el mismo valor que usa la capa
           (12 px, no los 15 del sitio: dentro de la capa se gano ancho a
           proposito el 13/09). */
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Atajos del estado vacio. Fuera de la media query porque el bloque nace
   `hidden` y solo lo enseña el JS dentro de la capa. */
.s4b-buscador__atajos-t {
    margin: 18px 0 10px;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #777;
}

.s4b-buscador__atajos ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.s4b-buscador__atajos a {
    display: flex;
    align-items: center;
    gap: 10px;
    /* 48 px de alto: son el primer objetivo que se toca al abrir la capa. */
    min-height: 48px;
    padding: 0 12px;
    border: 1px solid #e3e3e3;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 14px;
}

.s4b-buscador__atajos a:hover,
.s4b-buscador__atajos a:focus { border-color: #1a1a1a; color: #1a1a1a; }


/* ================================================================== */
/*  MEGA-MENU NUEVO (14/09/2026) · vista previa `?menu=nuevo`          */
/* ------------------------------------------------------------------ */
/*  Referencia: xlmoto. El panel deja de ser una lista a tres columnas */
/*  y pasa a tener grupos con titulo, columna lateral con enlaces      */
/*  relacionados, y —en las familias que tengan TODAS sus fotos—       */
/*  rejilla de fichas con imagen.                                      */
/*                                                                     */
/*  NADA DE ESTO PISA AL MENU DE SIEMPRE: son clases nuevas que solo   */
/*  existen cuando el JS pinta la version nueva.                       */
/* ================================================================== */

/* «Todos X» AL PIE del panel (peticion del cliente, 14/09/2026). Estuvo unas
   horas arriba, siguiendo a la referencia. La linea separadora se va con el: al
   pie, lo que lo separa del contenido es el hueco. */
/* «TODOS X» AL PIE DEL PANEL Y EN FRANJA NEGRA (15/09/2026, peticion del
   cliente: «para que se vea»). Estuvo en gris al pie, luego en la columna
   derecha, y vuelve abajo con fondo negro.
   **LA FRANJA VA DENTRO DE `.s4b-contenedor`, no a todo el ancho de la
   ventana**: asi arranca en la misma x que la barra de categorias y que los
   grupos del panel. A sangre quedaria mas llamativa pero rompe esa alineacion,
   que es justo lo que se arreglo el 14/09 al sacar el FONDO del panel a todo el
   ancho dejando el CONTENIDO en su sitio. */
.s4b-menu__todos {
    margin: 24px 0 0;
}

.s4b-menu__todos a {
    /* `block` para que la franja la pinte el propio enlace y toda ella sea
       pulsable, no solo el texto. */
    display: block;
    padding: 14px 16px;
    background: #1a1a1a;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
}

/* Sobre negro no vale el rojo de marca (#ff0123 da 3,1:1 contra el negro y
   ademas vibra). Se aclara el fondo, que es el gesto de siempre en un boton
   oscuro. */
.s4b-menu__todos a:hover,
.s4b-menu__todos a:focus-visible { background: #3a3a3a; color: #fff; }

/* EL RECUENTO, EN GRIS CLARO PORQUE EL FONDO ES NEGRO — misma correccion que en
   la barra del panel movil: `#6b6b6b` sobre negro da 2,3:1 y no se leeria.
   **Al invertir un fondo hay que invertir tambien los colores de dentro.** */
.s4b-menu__todos .s4b-menu__n { color: #bdbdbd; font-weight: 400; }

.s4b-menu__nuevo {
    display: flex;
    /* `nowrap` EN ESCRITORIO, Y NO ES EL VALOR POR DEFECTO POR CASUALIDAD:
       con `wrap`, en las familias CON FOTOS el cuerpo lleva una rejilla de seis
       columnas cuyo tamaño minimo es grande, asi que la columna derecha se caia
       a la fila siguiente y el «Todos X» aparecia debajo, con el `border-left`
       colgando como una raya suelta. Se vio en pantalla, no leyendo el CSS.
       El `wrap` se activa SOLO por debajo de 1200 px, donde si se quiere que la
       columna baje y haga de pie. */
    flex-wrap: nowrap;
    gap: 32px;
    align-items: flex-start;
}

/* El cuerpo: los grupos UNO AL LADO DE OTRO cuando son de texto. Con cuatro
   grupos (Chasis) cada uno se queda en el 25%, que con enlaces cortos sobra. */
.s4b-menu__cuerpo {
    display: flex;
    flex: 1 1 auto;
    gap: 32px;
    min-width: 0;           /* sin esto, un nombre largo ensancha la columna */
}

.s4b-menu__grupo { flex: 1 1 0; min-width: 0; }

.s4b-menu__grupo-t {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #1a1a1a;
}

.s4b-menu__lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.s4b-menu__lista a {
    display: block;
    padding: 5px 0;
    font-size: 13px;
    /* NEGRO EXPLICITO, no `inherit`: en un enlace lo heredado es el color del
       TEMA (un morado #521541). Es la cuarta vez que muerde lo mismo. */
    color: #1a1a1a;
    text-decoration: none;
}

.s4b-menu__lista a:hover { color: #ff0123; }

/* --- HOJA CON FOTO PEQUEÑA AL LADO (15/09/2026, peticion del cliente) -----
 * Hoy solo los seis tipos de moto de Escapes, reutilizando las fotos de la
 * portada. No confundir con `.s4b-menu__tile`, que es la rejilla de fichas con
 * la foto ENCIMA del nombre y se enciende por familia entera.
 *
 * `display: flex` PISA EL `display: block` de la regla de arriba, que es lo que
 * pone el nombre al lado de la foto y no debajo.
 */
.s4b-menu__lista a.s4b-menu__hoja--foto {
    display: flex;
    align-items: center;
    gap: 10px;
    /* El relleno vertical baja de 5 a 3: la foto ya da alto de sobra y con los
       5 de antes las seis filas crecian 24 px de mas. */
    padding: 3px 0;
}

/* LA CAJA NO ES 16:9 COMO EL FICHERO, Y ESO ES LO QUE HACE QUE SE VEA LA MOTO.
 *
 * Esas fotos llevan la moto pegada al borde DERECHO y **entre un 47% y un 64%
 * del ancho es aire** (medido en las seis publicadas: el motivo arranca en
 * x=298 en la de quad, que es la mas ancha, y en x=410 en la de scooter). A
 * 16:9 y 56 px de ancho, ese aire se lleva mas de la mitad de la caja y la moto
 * queda en unos 20 px: se ve una mancha.
 *
 * Con la caja casi cuadrada y `object-position: right`, `cover` recorta por la
 * IZQUIERDA —que es justo donde no hay nada— y la moto pasa a ocupar la caja
 * entera. **El 1,07:1 esta calculado sobre el caso peor**: el motivo mas ancho
 * es el del quad, 342 px de 640 (53%), asi que con un 60% del ancho visible
 * entra entero y aun le sobran 42 px.
 *
 * SI CAMBIA LA TANDA DE FOTOS HAY QUE VOLVER A MEDIR: si alguna llegara con la
 * moto mas centrada, este recorte le comeria la rueda delantera.
 */
/* ESTA ES LA CAJA DE LAS FOTOS DE MOTO, y se queda como estaba (48 px sobre
   gris). El 15/09/2026 se encogio y se dejo sin fondo por error: el cliente
   pedia eso **solo para el icono del colector**, no para las seis motos
   («solo queria mas pequeño el icono, las imagenes de tipos de escape estaban
   bien»). Lo pequeño y sin fondo vive ahora en `--icono`, aqui debajo. */
.s4b-menu__hoja-foto {
    /* 72 px desde el 15/09/2026 (peticion del cliente: «mas grandes»). Era 48.
       **Solo en ESCRITORIO**: en movil la caja la manda `.s4b-panel__hoja-foto`
       y se queda en 72, que ya era su tamaño.
       Cabe de sobra: la celda de la rejilla de tres columnas mide ~370 px y el
       texto mas largo —«Escapes para Scooter y Maxiscooter»— 215, asi que con
       72 + 10 de hueco quedan ~288 para el texto. */
    flex: 0 0 72px;
    width: 72px;
    aspect-ratio: 1.07 / 1;
    /* SIN FONDO desde el 16/09/2026 (peticion del cliente: «en el menu de
       escapes, quitale el fondo a las imagenes de tipos de escape»). Era el
       gris `#f4f4f4` con `multiply`, el mismo tratamiento que las tarjetas de
       producto. Ahora las motos flotan sobre el blanco del panel, como ya
       hacian los iconos de componente.
       **EL TAMAÑO NO SE TOCA**: siguen en 72 px. El 15/09 se aplico «sin fondo
       y mas pequeñas» a estas seis por error —el cliente solo lo pedia para el
       icono— y hubo que revertirlo. Aqui solo se pide el fondo. */
    background: none;
    overflow: hidden;
}

.s4b-menu__hoja-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* A la derecha: es donde esta la moto y donde queda pegada al texto. */
    object-position: right center;
    /* SIN FONDO NO HAY MEZCLA QUE HACER: multiplicar por blanco devuelve el
       mismo color, asi que dejar el `multiply` seria codigo muerto. Fondo y
       mezcla son UNA decision — si algun dia vuelve el gris `#f4f4f4`, tiene
       que volver tambien esta linea o aparece un rectangulo blanco dentro. */
    mix-blend-mode: normal;
}

/* --- VARIANTE ICONO: pequeña y sin fondo --------------------------------
 * Para las fotos de COMPONENTE que se generan a medida (`{id}-fila.webp`), no
 * para las motos reutilizadas de la portada. Hoy: el colector.
 *
 * **SIN FONDO OBLIGA A QUITAR EL `multiply`**: sobre blanco la mezcla no hace
 * nada —multiplicar por blanco devuelve el mismo color— y dejarla puesta seria
 * codigo muerto. Es la misma pareja fondo+mezcla de siempre.
 *
 * Y `object-position` vuelve al CENTRO: estas se generan ya a la proporcion de
 * la caja y llenas, asi que anclarlas a la derecha les comeria el lado
 * izquierdo sin ninguna necesidad.
 */
.s4b-menu__hoja-foto--icono {
    flex: 0 0 28px;
    width: 28px;
    background: none;
}

.s4b-menu__hoja-foto--icono img {
    object-position: center;
    mix-blend-mode: normal;
}

/* --- CON FOTO EN LINEA: CADA GRUPO, SU COLUMNA -------------------------
 * (15/09/2026, peticion del cliente: «intenta estructurarlo de otra manera en
 *  pc».)
 *
 * ANTES los grupos se apilaban a todo el ancho y cada lista se partia en tres
 * columnas. Con 6 hojas cuadraba (2 filas de 3), pero **con 4 —que es lo que
 * tiene casi toda familia— salia «3 + 1»**: una fila coja y medio panel vacio.
 * Se veia en Motor, con el fallo repetido dos veces seguidas.
 *
 * Ahora manda el CONTENIDO, no una rejilla fija: cada grupo es una columna con
 * sus hojas debajo, que es ademas la estructura de la referencia (xlmoto) y la
 * que tenia el panel de texto desde el principio. Con 2 grupos salen 2 columnas
 * de 4; con 3, tres columnas. **Nunca queda una fila coja, porque no hay
 * filas.**
 *
 * EL MOTIVO POR EL QUE SE APILABAN YA NO APLICA: era que «Escapes para Scooter
 * y Maxiscooter» (215 px) no cabia en una celda de 237. En columna de grupo,
 * con dos grupos, la columna mide ~550 px y entra de sobra. El problema no era
 * el ancho del panel, era partirlo en tres.
 */
.s4b-menu__nuevo--filas .s4b-menu__grupo + .s4b-menu__grupo { margin-top: 0; }

/* Las hojas con icono ocupan mas alto que una linea de texto, asi que la
   columna necesita un minimo para que el nombre no parta en dos lineas cuando
   hay cuatro grupos (Chasis). */
.s4b-menu__nuevo--filas .s4b-menu__grupo { min-width: 220px; }

/* UN GRUPO DE MAS DE 3 HOJAS OCUPA DOBLE ANCHO Y PARTE SU LISTA EN DOS.
   Sin esto, los seis tipos de moto de Escapes caen en una sola columna y, con
   las fotos a 72 px, el panel pasa de 560 px de alto. Con el corte en 3, los
   dos grupos de cuatro de Motor dan las «4 columnas de 2» que pidio el cliente.

   **SE PARTE EN DOS Y NO EN MAS**: a tres columnas, en Accesorios cada celda
   bajaria a ~140 px y los nombres partirian en dos lineas. Se probo la version
   que repartia columnas segun el numero de hojas y el cliente la descarto
   —ver el comentario de `cabecera.js`—, asi que aqui se queda el doble ancho
   fijo. */
.s4b-menu__nuevo--filas .s4b-menu__grupo--largo { flex: 2 1 0; }

.s4b-menu__nuevo--filas .s4b-menu__grupo--largo .s4b-menu__lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
}

/* UN PANEL DE UN SOLO GRUPO REPARTE SUS HOJAS EN VARIAS COLUMNAS (16/09/2026,
   peticion del cliente sobre Equipamiento: «pon este en 4 columnas»).
   Con un solo grupo no hay columnas vecinas con las que cuadrar, asi que el
   doble ancho de `--largo` dejaba media anchura del panel vacia.

   **ESTAS REGLAS VAN DESPUES DE LA DE `--largo` A PROPOSITO**: tienen la misma
   especificidad y lo que las hace ganar es el orden — si algun dia se reordena
   el fichero, Equipamiento vuelve a dos columnas sin dar ningun error.

   **Y repiten `display: grid` y el hueco**: un grupo de dos o tres hojas no
   llega a `--largo`, asi que sin eso la lista seguiria apilada y la regla no
   haria nada.

   **LAS COLUMNAS MIDEN LO QUE SU CONTENIDO, NO UNA FRACCION DEL PANEL**
   (16/09/2026, segunda peticion: «reduce la separacion, no es necesario que
   ocupen todo el menu»). Con `1fr` las cuatro se repartian los 1.323 px del
   panel y quedaban a 331 cada una, o sea los nombres separadisimos entre si.
   Con `max-content` cada columna mide su enlace y **el hueco lo decide el
   `column-gap`**, que es lo unico que hay que tocar si se quiere mas o menos
   aire. `justify-content: start` las pega a la izquierda; sin eso la rejilla
   tiene ancho de sobra y el navegador no tiene por que arrancar en el borde.

   Contrapartida asumida: al medir cada una lo suyo, **las columnas NO quedan
   alineadas entre familias** ni entre si — «Chaquetas» ocupa menos que
   «Camisetas y sudaderas». Es lo que se ha pedido; para volver a columnas
   iguales, `repeat(N, minmax(0, 1fr))` y quitar el `justify-content`.

   Quien pone la clase es el JS; el 2 y el 3 estan escritos por si algun dia un
   panel se queda con un grupo de dos o tres. */
.s4b-menu__nuevo--filas .s4b-menu__grupo--cols2 .s4b-menu__lista,
.s4b-menu__nuevo--filas .s4b-menu__grupo--cols3 .s4b-menu__lista,
.s4b-menu__nuevo--filas .s4b-menu__grupo--cols4 .s4b-menu__lista,
.s4b-menu__nuevo--filas .s4b-menu__grupo--cols5 .s4b-menu__lista,
.s4b-menu__nuevo--filas .s4b-menu__grupo--cols6 .s4b-menu__lista {
    display: grid;
    column-gap: 40px;
    justify-content: start;
}

.s4b-menu__nuevo--filas .s4b-menu__grupo--cols2 .s4b-menu__lista {
    grid-template-columns: repeat(2, max-content);
}

.s4b-menu__nuevo--filas .s4b-menu__grupo--cols3 .s4b-menu__lista {
    grid-template-columns: repeat(3, max-content);
}

.s4b-menu__nuevo--filas .s4b-menu__grupo--cols4 .s4b-menu__lista {
    grid-template-columns: repeat(4, max-content);
}

/* 13/10/2026: Equipamiento pasa a 6 hojas (Guantes y Pantalones RST). Caben
   en una fila; el tope del JS sube de 4 a 6. */
.s4b-menu__nuevo--filas .s4b-menu__grupo--cols5 .s4b-menu__lista {
    grid-template-columns: repeat(5, max-content);
}

.s4b-menu__nuevo--filas .s4b-menu__grupo--cols6 .s4b-menu__lista {
    grid-template-columns: repeat(6, max-content);
}

/* --- con fotos: los grupos se APILAN y las fichas van en rejilla ancha ---
   Un grupo de seis fichas con foto metido en una columna del 25% daria fotos
   de 40 px. Apilando, la rejilla usa el ancho entero del panel. */
.s4b-menu__nuevo--fotos .s4b-menu__cuerpo {
    display: block;
}

.s4b-menu__nuevo--fotos .s4b-menu__grupo + .s4b-menu__grupo { margin-top: 20px; }

.s4b-menu__tiles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}

.s4b-menu__tile a {
    display: block;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

/* MISMO TRATAMIENTO QUE LAS TARJETAS DE PRODUCTO: gris #f4f4f4 y `multiply`.
   Las piezas vienen fotografiadas sobre blanco, asi que sin la mezcla se ve un
   rectangulo blanco dentro del gris. Ademas el menu y el listado hablan el
   mismo idioma visual. */
.s4b-menu__tile-foto {
    display: block;
    background: #f4f4f4;
    /* BANDA BAJA (15/09/2026, peticion del cliente: «mucho mas bajas»). Era
       `4 / 3`, o sea 164 px de alto a 1440; ahora 91.
       LA PROPORCION ESTA EN DOS SITIOS Y HAY QUE CAMBIAR LOS DOS: aqui y en
       `$GRANDE` de `scripts/menu-imagenes.php`, que genera el fichero. Si solo
       se toca este, `object-fit: cover` recorta la foto por arriba y por abajo
       y el motivo, que va pegado a la izquierda, se queda descabezado. */
    aspect-ratio: 2.4 / 1;
    overflow: hidden;       /* obligatorio: la foto hace zoom al pasar el raton */
    margin-bottom: 8px;
}

.s4b-menu__tile-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
    transition: transform .35s ease;
}

.s4b-menu__tile a:hover .s4b-menu__tile-foto img { transform: scale(1.06); }
.s4b-menu__tile a:hover .s4b-menu__tile-nombre { color: #ff0123; }

.s4b-menu__tile-nombre { display: block; }

/* --- columna lateral ---------------------------------------------- */
.s4b-menu__lado {
    flex: 0 0 240px;
    border-left: 1px solid #e3e3e3;
    padding-left: 24px;
}

.s4b-menu__lado-t {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.s4b-menu__rel {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

.s4b-menu__rel a {
    display: block;
    padding: 4px 0;
    font-size: 13px;
    color: #1a1a1a;
    text-decoration: none;
}

.s4b-menu__rel a:hover { color: #ff0123; }

/* La foto de la familia es la MISMA que usa la portada (`cat-<slug>-v2.webp`),
   asi que en la mayoria de los casos el navegador ya la tiene descargada. */
.s4b-menu__promo {
    display: block;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.s4b-menu__promo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #f4f4f4;
    margin-bottom: 8px;
}

.s4b-menu__promo:hover { color: #ff0123; }

/* Entre 992 y 1199 el panel se queda estrecho y la columna lateral se retira
   antes de que aplaste a los grupos. Su contenido es editorial (la promo de
   Escapes) y no se pierde nada critico.
   **ESTO SE PUDO VOLVER A HACER CON UN `display: none` LIMPIO** cuando el
   «Todos X» bajo al pie del panel. Mientras vivio dentro de esta columna no se
   podia: ocultarla borraba el enlace mas usado en todas las ventanas de
   portatil, sin dar ningun error. Si algun dia vuelve aqui dentro, hay que
   volver a desplegar la columna en vez de ocultarla. */
@media (max-width: 1199px) {
    .s4b-menu__lado { display: none; }
    .s4b-menu__tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ================================================================== */
/*  MOVIL: navegacion POR NIVELES en vez de acordeon                   */
/* ================================================================== */

/* El titulo de la familia sustituye al logo al bajar un nivel. Ocupa el hueco
   central para que el boton de cerrar no se mueva de sitio. */
.s4b-panel__titulo {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Al entrar en una familia, el logo deja sitio al titulo. Se oculta por CSS y
   no por JS para que no haya dos fuentes de verdad: manda `data-s4b-nivel`. */
.s4b-panel[data-s4b-nivel="2"] .s4b-panel__inicio { display: none; }

.s4b-panel__nivel2 {
    flex: 1 1 auto;
    overflow-y: auto;
    /* SIN RELLENO ABAJO: el enlace «Todos X» va pegado al borde inferior, y
       24 px de relleno lo dejarian flotando sobre un hueco blanco. */
    padding: 8px 0 0;
    /* COLUMNA FLEX PARA PODER EMPUJAR EL ENLACE ABAJO CON `margin-top: auto`.
       Hace falta porque `sticky` SOLO PEGA SI HAY ALGO QUE DESPLAZAR: en una
       familia corta —Equipamiento, 4 hojas— la lista no llena la pantalla, no
       hay desplazamiento y el enlace se quedaba a media altura, justo debajo de
       la ultima fila. Con el margen automatico se va al fondo tambien ahi.
       Las dos cosas se complementan: el margen resuelve la lista CORTA y el
       `sticky`, la LARGA. */
    display: flex;
    flex-direction: column;
}

/* El aire entre la ultima hoja y el enlace. **No puede ir en el `margin-top`
   del enlace**, que ahora vale `auto`. */
.s4b-panel__nivel2 > ul:last-of-type { margin-bottom: 18px; }

/* La familia entera, primera fila y destacada: es el enlace mas usado. */
.s4b-panel__todos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 0 16px;
    /* AL FINAL DEL PANEL desde el 15/09/2026 y EMPUJADO AL FONDO. El `auto` es
       lo que lo baja cuando la lista no llena la pantalla; el hueco con la
       ultima hoja lo pone ahora el `margin-bottom` de la lista. */
    margin-top: auto;

    /* PEGADO AL BORDE INFERIOR DE LA PANTALLA (15/09/2026, peticion del
     * cliente). Con listas de 17 hojas el enlace quedaba fuera de la vista
     * hasta llegar al final.
     *
     * `sticky` Y NO `fixed`, Y LA DIFERENCIA IMPORTA: siendo `fixed` saldria
     * del flujo y habria que reservarle hueco a mano con un `padding-bottom`
     * calculado —un numero que se descuadra en cuanto cambie el alto de la
     * barra—. Con `sticky` sigue ocupando su sitio al final de la lista: se
     * queda pegado abajo mientras hay contenido que desplazar y aterriza solo
     * en su posicion natural al llegar al final. No tapa nada.
     *
     * FUNCIONA PORQUE SU PADRE ES EL QUE DESPLAZA (`.s4b-panel__nivel2` lleva
     * `overflow-y: auto`). Si algun dia ese desplazamiento se mueve al panel
     * entero, esto deja de pegarse **sin dar ningun error**.
     *
     * EL `bottom` SE APARTA DEL BANNER DE COOKIES reutilizando la variable que
     * ya publica `cookies.js` — la misma que usa la barra de compra de la
     * ficha. Sin banner vale 0 y queda a ras. El banner va en z-index 1100 y el
     * panel en 200, asi que sin esto lo taparia. */
    position: sticky;
    bottom: var(--s4b-cookies-alto, 0px);
    z-index: 1;
    /* En una columna flex, un elemento con contenido corto se encoge. Sin esto
       la barra perderia sus 56 px de alto en cuanto la lista fuera larga. */
    flex: 0 0 auto;
    /* EN NEGRO CON TEXTO BLANCO (15/09/2026, peticion del cliente: «para que
       destaque un poco mas»). Era gris `#f4f4f4` con texto negro y, flotando
       sobre una lista blanca, se distinguia poco.
       Blanco sobre `#1a1a1a` da **16,9:1**, muy por encima del 4,5 de la WCAG.
       **YA NO HACE FALTA EL `border-top`** que llevaba para separarse del texto
       que pasa por debajo: el propio bloque negro lo remata. */
    background: #1a1a1a;
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
}

.s4b-panel__grupo-t {
    /* A LA DERECHA como las hojas (15/09/2026, peticion del cliente: «que todos
       los elementos de los submenus esten justificados a la derecha»). Un
       titulo a la izquierda sobre una lista a la derecha se lee como un
       descuadre. */
    text-align: right;
    margin: 18px 16px 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    /* EN NEGRO (19/09/2026, peticion del cliente: «en movil, pon en negro las
       categorias»). Era `#6b6b6b`.
       SE MIDIO ANTES DE TOCAR NADA, y por eso se cambia SOLO esto: las hojas
       («Manetas», «Puños») y las familias del nivel 1 **ya estaban en #1a1a1a**
       — el unico texto gris del panel era este titulo de grupo.
       ES OTRA CLASE QUE LA DE ESCRITORIO (`.s4b-menu__grupo-t`), asi que el
       mega-menu de PC se queda como estaba. Comprobado antes de editar. */
    color: #1a1a1a;
}

.s4b-panel__hojas {
    list-style: none;
    margin: 0;
    padding: 0;
}

.s4b-panel__hojas a {
    display: flex;
    align-items: center;
    /* TODAS LAS HOJAS A LA DERECHA (15/09/2026, peticion del cliente). Empezo
       aplicandose solo a las filas CON foto y quedaba un grupo mixto —unas a la
       derecha y otras a la izquierda—, asi que se sube a la regla base.
       AFECTA A LAS NUEVE FAMILIAS, no solo a Escapes: es lo pedido.
       Las filas con foto NO usan esto: van con `row-reverse` + `flex-start`,
       que en un eje invertido empaqueta igualmente a la derecha. */
    justify-content: flex-end;
    text-align: right;
    gap: 14px;
    min-height: 48px;
    padding: 0 16px;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 15px;
}

/* JUSTIFICADAS A LA DERECHA (15/09/2026, peticion del cliente): la imagen al
   borde DERECHO de la pantalla y el texto pegado a ella. Antes iba al reves.
 *
 * `row-reverse` + `justify-content: flex-start` NO es contradictorio: al
 * invertir el eje, «start» pasa a ser la derecha, asi que el contenido se
 * empaqueta contra ese borde. Con `flex-end` se iria a la izquierda, que es lo
 * contrario de lo que se busca.
 *
 * Y HAY QUE INTERCAMBIAR EL RELLENO, no solo el orden: el que se quita es el
 * del lado donde ahora esta la imagen (derecha), y se repone el del lado del
 * texto (izquierda). Si no, la imagen no llega al borde y el texto queda
 * pegado al otro. */
.s4b-panel__hoja--foto a {
    flex-direction: row-reverse;
    justify-content: flex-start;
    text-align: right;
    padding-left: 16px;
    padding-right: 0;
    min-height: 72px;
}

.s4b-panel__hoja-foto {
    flex: 0 0 72px;
    align-self: stretch;
    background: #f4f4f4;
    overflow: hidden;
}

.s4b-panel__hoja-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
}

/* VARIANTE ICONO EN MOVIL: pequeña y sin fondo. Solo para las fotos de
   COMPONENTE generadas a medida; **las motos y las fotos de FAMILIA
   (Equipamiento) se quedan en la caja gris de 72 px**, que es de la regla base.

   HAY QUE SOLTAR EL `align-self: stretch` DE LA REGLA BASE, o la caja seguiria
   midiendo el alto entero de la fila y, siendo mas estrecha, `cover` recortaria
   la foto por los lados. Con `center` + `aspect-ratio` la caja decide su propio
   alto. */
.s4b-panel__hoja-foto--icono {
    flex: 0 0 36px;
    align-self: center;
    aspect-ratio: 1.07 / 1;
    background: none;
}

/* Sin fondo gris el `multiply` de la regla base sobra: sobre blanco no hace
   nada. Se apaga por coherencia con el escritorio. */
.s4b-panel__hoja-foto--icono img { mix-blend-mode: normal; }

/* La fila puede encoger: ya no la sostiene una foto de 72 px.
   NO BAJA DE 44: por debajo deja de ser un objetivo comodo para el dedo, que es
   el mismo suelo que se respeta en la barra del listado y en la cabecera. La
   foto (36 px) ya no es lo que manda aqui. */
/* EL ICONO SI LLEVA MARGEN CONTRA EL BORDE (15/09/2026, lo vio el cliente:
   «esta muy pegada al borde»). Las fotos de moto van a sangre a proposito —son
   fotografia y el corte queda bien—, pero un icono suelto tocando el borde de
   la pantalla se lee como un fallo de maquetacion. */
.s4b-panel__hoja--icono a { min-height: 44px; padding-right: 16px; }

/* Las fotos REUTILIZADAS DE LA PORTADA (los seis tipos de moto) traen la moto
   pegada al borde derecho y entre un 47% y un 64% del ancho en blanco. Esta
   caja es casi cuadrada, asi que con el centrado por defecto `cover` conserva
   ese aire y recorta la moto por los dos lados. Anclando a la derecha, recorta
   por donde no hay nada. Las de `/img/menu/` NO llevan esta clase: alli el
   motivo va centrado. */
.s4b-panel__hoja-foto--derecha img {
    object-position: right center;
    /* Sin fondo, la mezcla sobra: ver la regla de escritorio. */
    mix-blend-mode: normal;
}

/* Y EL FONDO SE QUITA AQUI, NO EN LA REGLA BASE (16/09/2026, misma peticion
   que en escritorio). La base `.s4b-panel__hoja-foto` **la comparten las fotos
   de FAMILIA de Equipamiento**, que siguen necesitando su caja gris: son
   prendas recortadas sobre blanco y sin fondo no se distinguirian del panel.
   Por eso se acota a `--derecha`, que es la clase que solo llevan las seis
   motos reutilizadas de la portada. */
.s4b-panel__hoja-foto--derecha {
    background: none;
}

/* --- el fondo del panel, a todo el ancho (14/09/2026, peticion del cliente) ---
   Solo en la version nueva. El contenido NO se mueve: lo mantiene en su sitio el
   `.s4b-contenedor` que el JS mete dentro del panel.

   SIN BORDES LATERALES: con el panel a todo el ancho caerian justo en el borde
   de la ventana, donde no separan nada. Se queda el de abajo, que es el que
   remata la banda contra la pagina.

   EL RELLENO HORIZONTAL SE QUITA porque ahora lo pone el contenedor de dentro;
   dejarlo sumaria 16 px a cada lado y el panel dejaria de alinear con la barra
   de categorias, que es justo lo que se quiere evitar. */
.s4b-menu--nuevo .s4b-menu__panel {
    border: 0;
    border-bottom: 1px solid #cfcfcf;
    padding: 24px 0;
}

/* El recuento de articulos del enlace «Todos X». En gris y sin negrita: el
   nombre es lo que se pulsa y el numero solo acompaña.
   OJO: `.s4b-menu__n` se habia retirado el 13/09/2026 al quitar los recuentos de
   CADA subcategoria. Vuelve SOLO para este enlace; los de las hojas siguen
   fuera. */
.s4b-menu__n,
/* EL RECUENTO, EN GRIS CLARO PORQUE EL FONDO ES NEGRO. Era `#6b6b6b`, pensado
   para fondo gris claro: sobre `#1a1a1a` da **2,3:1** y no se leeria. `#bdbdbd`
   da 8,9:1 y es el mismo gris que ya se usaba para texto secundario sobre negro
   en la barra de garantias antes de blanquearla.
   **Al invertir un fondo hay que invertir TAMBIEN los colores de dentro**: es
   exactamente lo que se aprendio en la portada, donde cambiar solo el fondo
   dejo texto blanco sobre blanco sin dar ningun error. */
.s4b-panel__todos .s4b-menu__n {
    font-weight: 400;
    color: #bdbdbd;
}

/* ------------------------------------------------------------------ */
/*  «Todos los productos», al final de la barra (14/09/2026)            */
/* ------------------------------------------------------------------ */
/* `margin-left: auto` lo empuja al borde derecho sin sacarlo del flujo, asi que
   sigue siendo un elemento mas de la barra y hereda su desplazamiento.

   SE OCULTA POR DEBAJO DE 1280 px, Y EL NUMERO ESTA MEDIDO, no elegido: con el
   enlace, la barra pide **1.195 px**. El contenedor son la ventana menos 30, asi
   que hace falta una ventana de ~1.225 para que quepa. **Se probo primero con
   1200 y no valia por 40 px**: la barra entraba en desplazamiento y habia que
   arrastrarla para llegar a «Taller», que es peor que no enseñar el atajo.
   1280 deja 55 px de margen.

   Las nueve familias solas caben a 992 px por solo 3 px, asi que este enlace no
   puede acompañarlas en ventanas estrechas. Por debajo de 992 la barra no se
   pinta: manda el panel de movil, que ya tiene su lista de enlaces secundarios. */
@media (min-width: 1280px) {
    .s4b-menu__item--todos { margin-left: auto; }
}

@media (max-width: 1279px) {
    .s4b-menu__item--todos { display: none; }
}

/* Sin icono y en negrita fina: tiene que leerse como un atajo, no como la
   decima familia. */
.s4b-menu__item--todos > a {
    font-weight: 600;
    white-space: nowrap;
}

/* ================================================================== */
/*  CAJON LATERAL DEL CARRITO (15/09/2026)                             */
/* ================================================================== */
/* Mismo patron que el panel de movil: capa fija a pantalla completa con un
   fondo pulsable y un panel a un lado. Aqui SI hay fondo oscurecido —y en el
   menu no— porque el cajon es un dialogo del que se sale, no una navegacion:
   el fondo atenuado es lo que dice que la pagina sigue ahi detras. */
.s4b-carrito {
    position: fixed;
    inset: 0;
    z-index: 300;   /* por encima del panel de movil (200) */
    display: flex;
    justify-content: flex-end;
}

.s4b-carrito__fondo {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
}

.s4b-carrito__panel {
    position: relative;   /* por encima del fondo, sin z-index que mantener */
    display: flex;
    flex-direction: column;
    width: 400px;
    max-width: 100%;
    background: #fff;
    /* La sombra cae hacia la IZQUIERDA, que es por donde el panel se separa de
       la pagina. Con spread negativo no asoma por el borde derecho, que esta
       pegado a la ventana — misma leccion que la sombra del mega-menu. */
    box-shadow: -10px 0 28px -12px rgba(0, 0, 0, .3);
}

.s4b-carrito__cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* 16 y no 12: **todas las lineas espaciadoras del cajon dejan el mismo
       aire** (16/09/2026, peticion del cliente: «pon todas las lineas
       espaciadoras como esa», por la del envio gratis). Antes cada una tenia
       el suyo —12 la cabecera, 14 las filas, 4 la del pie— y el cajon se leia
       irregular sin que se supiera por que. */
    padding: 16px;
    border-bottom: 1px solid #e3e3e3;
}

.s4b-carrito__titulo {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    /* El tema capitaliza los encabezados y en castellano eso escribe mal. */
    text-transform: none;
}

/* --- aviso de envio gratis, CON BARRA DE PROGRESO ---
   (16/09/2026, peticion del cliente: «vamos a gamificar el envio gratis, dale
   mas protagonismo y crea una barra de progreso de color rojo».)
   Era una linea de texto de 13 px perdida entre la cabecera y las lineas. */
/* **YA NO ES UNA BANDA, ES PARTE DEL PIE** (16/09/2026, peticion del cliente:
   «baja lo del envio gratis junto al precio»). Pierde el fondo gris y el
   relleno lateral: dentro del pie esos lo hacian parecer una caja pegada
   encima del total. El relleno horizontal ya lo pone el propio pie.

   **Y SE SEPARA DEL TOTAL CON SU PROPIA LINEA** (16/09/2026, peticion del
   cliente: «me da miedo que pueda confundir a los usuarios que este tan cerca
   del precio»). Tenia razon y el riesgo es concreto: **son DOS IMPORTES EN
   EUROS a 14 px de distancia** —«te faltan 68,01 €» y «Total 31,99 €»— y el
   primero puede leerse como parte del segundo. Un cliente que entiende que
   debe 68 € cuando su carrito son 32 abandona.

   La separacion pasa de 14 a **32 px con una linea en medio**: 16 de relleno,
   el borde, y 16 hasta el total. **La linea es lo que de verdad los separa**;
   el hueco solo no basta cuando las dos cosas son texto del mismo tamaño en el
   mismo color.

   El `border-top` del pie se queda donde estaba —separando el pie de los
   recomendados—: son dos limites distintos y cada uno hace su trabajo. */
.s4b-carrito__envio {
    margin: 0 0 16px;
    padding: 0 0 16px;
    border-bottom: 1px solid #e3e3e3;
    color: #1a1a1a;
}

/* **EL COLOR VA EN EL `<p>`, NO EN SU PADRE** (16/09/2026, peticion del
   cliente: «pon los textos en negro»). El tema declara `p { color: #888 }`, y
   aunque es un selector de ELEMENTO —especificidad 0,0,1— gana igualmente:
   **una declaracion sobre el propio elemento vence a cualquier color
   HEREDADO**, por especifico que sea el selector del padre. La herencia no
   compite con la cascada, se aplica solo cuando nadie declara nada.
   El sintoma fue que el `color: #1a1a1a` del contenedor «no hacia nada» — y el
   total, que es otro `<p>`, salia gris por lo mismo. */
.s4b-carrito__envio-texto {
    margin: 0 0 9px;
    color: #1a1a1a;
    font-size: 14px;
    line-height: 1.3;
}

/* **EL IMPORTE VA AL MISMO TAMAÑO QUE LA FRASE** (16/09/2026, peticion del
   cliente: «pon el texto de "te faltan..." todo en negro y con el mismo
   tamaño»). Nacio a 16 px para darle protagonismo al «gamificar», pero al
   bajar el bloque junto al total eso se volvio en contra: **quedaban dos
   importes a 16 px en el mismo bloque** —«96,19 €» y «Total 3,81 €»— y era
   justo la confusion que el cliente queria evitar. Ahora el unico importe
   destacado del pie es el total, que es el que se paga.
   El color ya era negro en los dos; lo que se iguala es el tamaño.
   **La negrita se queda**: distingue la cifra dentro de la frase sin competir
   con el total, que ademas es mas grande. */
.s4b-carrito__envio-texto strong {
    font-size: inherit;
    font-weight: 700;
}

.s4b-carrito__barra {
    display: block;
    height: 6px;
    background: #e0e0e0;   /* la guia: mas claro no se ve a 6 px */
    overflow: hidden;      /* red de seguridad si el tramo se pasa de 100% */
}

.s4b-carrito__barra-tramo {
    display: block;
    height: 100%;
    width: 0;
    background: #d9001d;   /* el rojo de los botones, no el #ff0123 de marca */
    /* **SOLO `width`, y es deliberado:** es lo unico que se puede animar aqui
       sin pintar otra cosa. La transicion es lo que convierte el avance en
       algo que se ve pasar — que es justo lo que se ha pedido al «gamificar».
       Sin ella el tramo salta y no se lee como progreso. */
    transition: width .45s ease, background-color .3s ease;
}

/* Quien pide menos animacion no la tiene: la barra sigue midiendo lo mismo,
   solo deja de deslizarse. */
@media (prefers-reduced-motion: reduce) {
    .s4b-carrito__barra-tramo { transition: none; }
}

/* CONSEGUIDO: la barra pasa a VERDE (decision del cliente). El rojo dice
   «te falta»; mantenerlo al llegar seria seguir avisando de algo que ya esta
   resuelto. Es el mismo verde de «Disponible» en la ficha.

   **EL TEXTO SE QUEDA NEGRO EN LOS DOS ESTADOS** (16/09/2026, peticion del
   cliente: «pon los textos en negro»). Llego a ir en verde al conseguirlo, y
   era decir lo mismo dos veces: **el color lo comunica la BARRA, el texto lo
   dice con palabras**. Ademas, junto al total —que es negro— un texto verde
   metia un tercer color en un bloque de tres lineas. */
.s4b-carrito__envio--ok .s4b-carrito__barra-tramo { background: #1a7f37; }
.s4b-carrito__envio--ok .s4b-carrito__envio-texto { color: #1a1a1a; }

/* --- lista --- */
/* El cuerpo es lo unico que se desplaza: la cabecera y el pie —con el total y
   los botones— se quedan siempre a la vista. Es el mismo motivo por el que el
   enlace «Todos X» del menu movil va pegado abajo. */
.s4b-carrito__cuerpo {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.s4b-carrito__lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.s4b-carrito__linea {
    display: flex;
    /* **`stretch` Y NO `flex-start`** (16/09/2026, peticion del cliente: «haz
       que el fondo gris sea de mas altura para que se quede alineado con el
       resto de elementos»). El gris era un cuadro de 60 px flotando en una
       fila de ~100 —la dimensionan el nombre a dos lineas, el selector de
       cantidad y el precio— y quedaba suelto arriba. Es el mismo arreglo que
       ya se hizo en «Completa tu compra» de la ficha. */
    align-items: stretch;
    gap: 12px;
    padding: 16px;   /* el mismo aire que el resto de lineas del cajon */
    border-bottom: 1px solid #f0f0f0;
}

/* Mientras el servidor responde, la fila se atenua y deja de aceptar clics: sin
   esto se puede pulsar «+» cinco veces y encadenar cinco peticiones que llegan
   desordenadas. No se toca el numero en pantalla — lo pone el servidor. */
.s4b-carrito__linea--esperando {
    opacity: .5;
    pointer-events: none;
}

.s4b-carrito__foto {
    flex: 0 0 60px;
    width: 60px;
    /* Gris + `multiply`, como el resto de fotos de producto de la web: vienen
       recortadas sobre blanco y sin la mezcla se ve un rectangulo blanco. */
    background: #f4f4f4;
    /* **EL GRIS LLEGA DE ARRIBA A ABAJO DE LA FILA, y el alto NO se pone en
       pixeles**: la fila la dimensiona el texto —un nombre de una o dos lineas
       cambia su altura—, asi que cualquier numero fijo cuadraria en un
       producto y no en el siguiente. Con `stretch` en la fila, esto sobra;
       se declara igualmente para que la caja no dependa de que nadie cambie
       el `align-items` del padre. */
    align-self: stretch;
    /* La foto se CENTRA dentro del gris estirado: sin esto se queda pegada
       arriba y el gris deja una franja vacia debajo. */
    display: flex;
    align-items: center;
}

.s4b-carrito__foto img {
    display: block;
    width: 100%;
    height: auto;
    mix-blend-mode: multiply;
}

.s4b-carrito__datos-linea {
    flex: 1 1 auto;
    min-width: 0;   /* sin esto un nombre largo ensancha la fila */
}

.s4b-carrito__nombre {
    display: block;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.35;
}

.s4b-carrito__nombre:hover { color: #ff0123; }

.s4b-carrito__atributos {
    margin: 2px 0 0;
    font-size: 12px;
    color: #6b6b6b;
}

.s4b-carrito__fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}

.s4b-carrito__cantidad {
    display: flex;
    align-items: center;
    border: 1px solid #cfcfcf;
}

.s4b-carrito__mas-menos {
    /* 32x32: por debajo deja de ser un objetivo comodo para el dedo, que es el
       mismo suelo que se respeta en el resto del movil. */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 15px;
    line-height: 1;
}

.s4b-carrito__mas-menos:hover { background: #f4f4f4; color: #1a1a1a; }

.s4b-carrito__n {
    min-width: 32px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
}

.s4b-carrito__precio {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.s4b-carrito__quitar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #6b6b6b;
}

.s4b-carrito__quitar:hover { color: #ff0123; }

/* --- vacio --- */
/* Ocupa el hueco que deja la lista y se centra: un mensaje de dos lineas
   pegado al borde de arriba se lee como si faltara algo por cargar. */
.s4b-carrito__vacio {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 32px 16px;
    text-align: center;
    color: #1a1a1a;
}

/* «Tu carrito está vacío» iba tambien en el gris `#888` del tema: es el UNICO
   texto de esa pantalla y tiene que leerse. Mismo caso del `<p>`. */
.s4b-carrito__vacio p { margin: 0; color: #1a1a1a; }

/* CON EL CAJON ABIERTO, FUERA LA BARRA DE COMPRA FIJA DE LA FICHA.
   Son dos capas fijas que no se conocen: la barra va en z-index 1000 y el panel
   del cajon en 300, asi que en movil la barra se dibujaba ENCIMA y tapaba el
   total y «Finalizar compra». **No se sube el z-index del cajon**: el banner de
   cookies vive en 1100 y tiene que seguir por encima de todo — ya hubo que
   coordinarlos una vez para que el banner no tapara el boton de comprar.
   La clase la pone y la quita `cabecera.js` al abrir y cerrar. */
body.s4b-carrito-abierto .s4b-compra { display: none; }

/* --- RECOMENDADOS (16/09/2026, peticion del cliente) ---
   Complementos del ultimo producto añadido, entre las lineas y el total.

   **VAN AQUI PORQUE ESE HUECO YA ESTABA VACIO**: con uno o dos productos, el
   cuerpo del cajon (`flex: 1 1 auto`) dejaba ~600 px de blanco entre la ultima
   linea y el pie. Asi no empujan el total fuera de pantalla, que es lo que no
   puede pasar en un carrito.

   `flex: 0 0 auto` NO es opcional: en una columna flex un bloque de contenido
   corto se encoge, y con una lista larga arriba perderia su alto. Misma
   leccion que la barra «Todos X» del menu movil. */
.s4b-carrito__reco {
    flex: 0 0 auto;
    /* **EL 8 DE ABAJO NO ES UNA EXCEPCION AL 16, ES LO QUE LO CONSIGUE.** Las
       filas de aqui dentro ya traen `padding: 8px 0`, asi que el aire real
       hasta la linea del pie es 8 + 8 = 16, igual que el resto. Poner 16 daria
       24 y esa linea quedaria mas suelta que las demas. **El aire de una linea
       hay que MEDIRLO en pantalla, no leerlo del `padding` del bloque.** */
    padding: 16px 16px 8px;
    border-top: 1px solid #e3e3e3;
}

.s4b-carrito__reco-titulo {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    text-transform: none;   /* el tema capitaliza y en castellano escribe mal */
}

.s4b-carrito__reco-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.s4b-carrito__reco-fila {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border: 0;   /* el tema pone bordes MORADOS a los `li`; quinta vez */
}

.s4b-carrito__reco-foto {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: #f4f4f4;
}

/* Las fotos de recambio vienen recortadas sobre BLANCO: sin la mezcla se ve un
   rectangulo blanco dentro del gris. Fondo y mezcla son UNA decision. */
.s4b-carrito__reco-foto img {
    max-width: 100%;
    height: auto;
    mix-blend-mode: multiply;
}

.s4b-carrito__reco-cuerpo {
    flex: 1 1 auto;
    min-width: 0;   /* sin esto, un nombre largo empuja el boton fuera */
}

.s4b-carrito__reco-nombre {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #1a1a1a;   /* explicito: heredado seria el morado del tema */
    font-size: 12px;
    line-height: 1.3;
    text-transform: none;
}

.s4b-carrito__reco-nombre:hover { color: #d9001d; }

.s4b-carrito__reco-precio {
    margin: 3px 0 0;
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
}

/* **EL ANCHO LO LLEVA EL FORMULARIO, NO EL BOTON, y es obligatorio en movil.**
   `botones-movil.css` fuerza `width: 100% !important` a todo
   `button.ajax_add_to_cart_button` por debajo de 768 px —lo necesita el «Ver
   mas productos» del listado, que trae un ancho en linea—. Aqui el boton pedia
   entonces el 100% de un form cuyo ancho dependia del propio boton: la caja
   colapsaba y el `+` se quedaba en **11,5 px**, medio cortado contra el borde
   del cajon. Con el ancho en el form, ese 100% vale 36 px y todo cuadra.
   Se vio midiendo: en la captura parecia que el boton «se salia». */
.s4b-carrito__reco-forma {
    flex: 0 0 36px;
    width: 36px;
    margin: 0;
}

/* Un «+» y no «Añadir al carrito»: en una columna de 375 px el texto obliga a
   partir la fila en dos. Lleva `aria-label` con el nombre del producto, asi
   que quien no ve la fila sabe que añade. **36 px es el suelo de pulsacion
   que se usa en toda la tienda para un control de este tamaño.** */
.s4b-carrito__reco-boton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: #d9001d;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background .18s ease;
}

.s4b-carrito__reco-boton:hover,
.s4b-carrito__reco-boton:focus { background: #a80016; }

/* --- pie --- */
.s4b-carrito__pie {
    border-top: 1px solid #e3e3e3;
    /* EL PIE SE APARTA DEL BANNER DE COOKIES (16/09/2026). El banner vive en
       z-index 1100 —por encima del cajon, y tiene que seguir asi— y en movil
       se dibujaba SOBRE el boton «Finalizar compra»: comprobado con
       `elementFromPoint`, que devolvia el boton del banner donde deberia estar
       el de pagar. Le pasa a quien todavia no ha decidido las cookies, o sea
       **al visitante que llega por primera vez**.
       Se reutiliza `--s4b-cookies-alto`, la variable que publica `cookies.js`
       y que ya usa la barra de compra de la ficha por este mismo motivo. Al
       decidir vuelve a 0 y el relleno desaparece. */
    padding: 16px 16px calc(16px + var(--s4b-cookies-alto, 0px));
}

/* EL TOTAL TAMBIEN SALIA EN GRIS `#888`, y por la misma razon que el aviso de
   envio: es un `<p>` y el tema declara el color sobre el elemento. **El importe
   del carrito es el dato mas importante del cajon y se estaba pintando como
   texto secundario.** No se vio hasta medirlo: a 16 px y en negrita, el gris
   pasa por negro de reojo. */
.s4b-carrito__total {
    display: flex;
    justify-content: space-between;
    margin: 0 0 4px;
    color: #1a1a1a;
    font-size: 16px;
    font-weight: 700;
}

.s4b-carrito__nota {
    margin: 0 0 12px;
    font-size: 12px;
    color: #6b6b6b;
}

.s4b-carrito__boton {
    display: block;
    padding: 13px 16px;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid #1a1a1a;
    color: #1a1a1a;
    background: #fff;
}

.s4b-carrito__boton + .s4b-carrito__boton { margin-top: 8px; }

/* El de finalizar compra va relleno y el otro en linea: dos llamadas del mismo
   peso reparten el clic, que es justo lo que se corrigio en la ficha al retirar
   «Comprar Ya». */
.s4b-carrito__boton--fuerte {
    background: #1a1a1a;
    color: #fff;
    margin-bottom: 8px;
}

.s4b-carrito__boton--fuerte:hover { background: #3a3a3a; color: #fff; }
.s4b-carrito__boton:not(.s4b-carrito__boton--fuerte):hover { background: #f4f4f4; color: #1a1a1a; }

/* En movil el cajon ocupa casi todo, pero NO el 100%: la franja de pagina que
   queda a la izquierda es lo que dice que se puede cerrar tocando fuera. */
@media (max-width: 575px) {
    .s4b-carrito__panel { width: 92%; }
}

/* ------------------------------------------------------------------ */
/*  LAS LINEAS DEL CAJON NO LLEGAN A LOS BORDES (16/09/2026)           */
/* ------------------------------------------------------------------ */
/* Peticion del cliente: «la ultima no tiene el ancho completo y las otras 2 si;
 * deja las 3 lineas como la ultima».
 *
 * LA DESIGUALDAD NO LA DECIDIO NADIE, SALIO DE DONDE VIVE CADA BORDE: la del
 * envio gratis se ve con margen porque es el `border-bottom` de un bloque que
 * esta DENTRO del pie, y hereda sus 16 px de relleno lateral. Las demas son
 * bordes de contenedores que ocupan el ancho entero del cajon, asi que tocaban
 * los dos lados. Mismo CSS, resultados distintos segun el nivel del elemento.
 *
 * **SE RESUELVE CON UN PSEUDOELEMENTO, NO MOVIENDO EL RELLENO.** Meter los
 * 16 px laterales en cada contenedor para que el borde se encoja habria
 * desplazado TAMBIEN su contenido —fotos, nombres y precios— y el cajon entero
 * se habria estrechado. Aqui el borde se dibuja aparte, acotado con
 * `left`/`right`, y el contenido no se entera.
 *
 * VA AL FINAL DEL FICHERO A PROPOSITO: anula los `border` declarados mas
 * arriba, y con la misma especificidad manda el ultimo.
 *
 * VUELTA ATRAS: borrar este bloque; cada elemento recupera su borde de siempre. */
.s4b-carrito__cabeza,
.s4b-carrito__linea,
.s4b-carrito__reco,
.s4b-carrito__pie {
    position: relative;
    border-top: 0;
    border-bottom: 0;
}

.s4b-carrito__cabeza::after,
.s4b-carrito__linea::after,
.s4b-carrito__reco::before,
.s4b-carrito__pie::before {
    content: '';
    position: absolute;
    left: 16px;    /* el mismo relleno lateral que el pie: de ahi sale el
                      margen de la linea que el cliente tomo de referencia */
    right: 16px;
    height: 1px;
    background: #e3e3e3;
    /* Decorativo puro: no debe recibir clics ni tapar nada. */
    pointer-events: none;
}

/* Las que cierran un bloque van abajo; las que lo abren, arriba. */
.s4b-carrito__cabeza::after,
.s4b-carrito__linea::after { bottom: 0; }

.s4b-carrito__reco::before,
.s4b-carrito__pie::before { top: 0; }

/* La linea entre productos era mas clara que las estructurales y se queda
   asi: separa dos filas de lo mismo, no dos partes del cajon. */
.s4b-carrito__linea::after { background: #f0f0f0; }

/* ==================================================================
 * PANEL ANCHO DEL BUSCADOR, SOLO EN ESCRITORIO (23/09/2026, peticion
 * del cliente). Referencia: el buscador de 24MX.
 *
 * Dos columnas: a la izquierda en que PARTE de la tienda hay
 * coincidencias (categorias y marcas), a la derecha los productos en
 * tarjetas con foto y precio.
 *
 * **POR DEBAJO DE 992 px NO EXISTE**: alli sigue la lista de siempre
 * dentro de la capa a pantalla completa del 13/09. El JS pinta un
 * marcado distinto para cada caso, asi que estas reglas no pueden
 * alcanzar al movil aunque se equivoque el selector.
 * ================================================================== */
@media (min-width: 992px) {

    /* El panel deja de colgar de la caja de busqueda y ocupa el ancho del
       contenedor: con dos columnas y ocho tarjetas, 420 px no dan.
       LA CLASE LA PONE EL JS al pintar, no se deduce con `:has()`: en esta
       tienda las variantes las decide el codigo que pinta —mismo criterio que
       el mega-menu— y asi no depende del soporte del navegador. */
    /* El panel se ancla a `.s4b-buscador`, que va a todo el ancho de la
       ventana, no a `.s4b-contenedor`. Ver el comentario de `buscador.tpl`. */
    .s4b-buscador { position: relative; }

    .s4b-sugerencias--ancho {
        /* **HAY QUE ANULAR `transform`, `width` Y `max-width`, NO SOLO PONER
         * `left`/`right`.** La regla de escritorio de mas arriba centra el
         * panel bajo la caja con `left: 50%` + `translateX(-50%)` +
         * `width: calc(100% - 440px)`. Declarando solo `left: 0` el panel se
         * quedaba en **x = -450**, medio fuera de la pantalla, con la columna
         * de categorias invisible. Es la leccion ya escrita: al sustituir un
         * diseño cuyo CSS se conserva, la regla nueva tiene que anular lo que
         * ponia la vieja. */
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        transform: none;
        /* ALTURA PARA QUE LAS DOS FILAS QUEPAN SIN DESPLAZAR (23/09/2026,
         * peticion del cliente). El tope anterior eran 560 px y **el panel
         * pide 707** a 1440x900: la segunda fila salia cortada.
         *
         * EL NUMERO ESTA MEDIDO, no elegido: lo que necesita y el sitio que
         * queda bajo la caja de busqueda, a varios tamaños.
         *     1920x950 -> pide 722, hay 843
         *     1440x900 -> pide 707, hay 793
         *     1280x800 -> pide 627, hay 693
         * El `85vh` es lo que lo mantiene dentro en pantallas bajas; el tope en
         * px evita que en un monitor alto se estire mas de lo que hace falta.
         *
         * **SI SE AÑADE UNA TERCERA FILA O EL NOMBRE PASA A DOS LINEAS, HAY QUE
         * VOLVER A MEDIR**: el alto lo manda la foto, que es cuadrada y crece
         * con el ancho de columna (271 px a 1920). */
        max-height: min(85vh, 780px);
        /* SIN BORDE NI SOMBRA (23/09/2026, peticion del cliente, en dos pasos:
           primero el borde y despues la sombra).
           A todo el ancho, un marco de 1 px cae contra el borde de la ventana y
           no delimita nada. Se quita tambien el `border-top` que pone la regla
           de escritorio de mas arriba.
           **LO QUE SEPARA AHORA EL PANEL DE LA PAGINA ES SOLO SU FONDO
           BLANCO**, y conviene tenerlo presente: sobre una pagina tambien
           blanca —una categoria, una ficha— el limite inferior deja de verse.
           Si algun dia molesta, la via es una linea de 1 px SOLO abajo, no
           devolver el marco entero ni la sombra. */
        border: 0;
        box-shadow: none;
    }

    /* El CONTENIDO sigue alineado con el resto del sitio aunque el fondo vaya
       a sangre: mismo criterio que el mega-menu. Lo envuelve el JS. */
    .s4b-sugerencias--ancho > .s4b-contenedor {
        padding-left: 15px;
        padding-right: 15px;
    }

    .s4b-sug {
        display: grid;
        /* La columna izquierda mide lo suyo y la derecha se lleva el resto.
           `minmax(0, 1fr)` y no `1fr`: con `1fr` un nombre de producto largo
           —y en esta tienda los hay de 120 caracteres— ensancha la columna y
           descuadra la rejilla. Ya mordio en la cabecera y en la ficha. */
        grid-template-columns: 250px minmax(0, 1fr);
    }

    /* SIN LINEA ENTRE LAS DOS COLUMNAS (23/09/2026, peticion del cliente).
     * Llevaba `border-right: 1px solid #e3e3e3`.
     * **LO QUE SEPARA AHORA LAS COLUMNAS ES EL HUECO**, y pasa a ser
     * estructural: son los 18 px de relleno derecho de la izquierda mas los
     * 18 del izquierdo de la derecha, o sea 36. Recortarlos las pega.
     * Es la misma pasada que dejo la portada sin lineas entre secciones. */
    .s4b-sug__lado {
        padding: 16px 18px 30px;
    }

    .s4b-sug__main {
        /* 30 abajo y no 20: la segunda fila de tarjetas quedaba pegada al
           borde del panel (peticion del cliente). Cuesta 10 px de alto y sigue
           cabiendo sin desplazar en 1280x720, que es el caso mas justo. */
        padding: 16px 18px 30px;
        min-width: 0;   /* deja que la rejilla de dentro se encoja */
    }

    .s4b-sug__t {
        margin: 0 0 8px;
        font-size: 15px;
        font-weight: 700;
        color: #1a1a1a;
    }

    .s4b-sug__lado .s4b-sug__t:not(:first-child) {
        margin-top: 20px;
    }

    .s4b-sug__cab {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 10px;
    }

    .s4b-sug__cab .s4b-sug__t { margin-bottom: 0; }

    .s4b-sug__todas {
        font-size: 13px;
        color: #1a1a1a;
        text-decoration: underline;
    }

    .s4b-sug__todas:hover,
    .s4b-sug__todas:focus-visible { color: #ff0123; }

    /* ---------- columna izquierda ---------- */
    .s4b-sug__lista {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .s4b-sug__lista a {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 6px 0;
        font-size: 14px;
        /* Negro EXPLICITO: en un enlace, lo heredado es el morado del tema.
           Sexta vez que muerde lo mismo. */
        color: #1a1a1a;
        text-decoration: none;
    }

    .s4b-sug__lista a:hover,
    .s4b-sug__lista a:focus-visible { color: #ff0123; }

    .s4b-sug__lista svg {
        flex: 0 0 auto;
        color: #9a9a9a;
    }

    .s4b-sug__lista span {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Lo tecleado, en negrita: es lo que hace legible la columna de un
       vistazo. El resto va en peso normal a proposito. */
    .s4b-sug__lista b { font-weight: 700; }

    .s4b-sug__lista em {
        flex: 0 0 auto;
        font-style: normal;
        font-size: 12px;
        color: #8a8a8a;
    }

    /* ---------- rejilla de productos ---------- */
    .s4b-sug__rejilla {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .s4b-sug__rejilla a {
        display: block;
        color: #1a1a1a;
        text-decoration: none;
    }

    .s4b-sug__foto {
        display: flex;
        align-items: center;
        justify-content: center;
        /* El mismo gris de imagen que el resto de la tienda, con `multiply`
           porque las fotos de recambio vienen recortadas SOBRE BLANCO: sin la
           mezcla se ve un rectangulo blanco dentro del gris. Fondo y mezcla
           son UNA decision. */
        background: #f4f4f4;
        /* **4:3 Y NO CUADRADA, Y ESTO ES LO QUE QUITA EL DESPLAZAMIENTO.**
         * El alto del panel lo manda la foto, que crece con el ancho de
         * columna: cuadrada son 271 px a 1920 y 230 a 1366, o sea ~460 px solo
         * de fotos en las dos filas. Subir el `max-height` arreglaba 1440 y
         * 1600 pero **en 1366x768 seguia cortando por 17 px** —medido— y dejar
         * el panel pegado al borde inferior no es arreglarlo.
         * Con 4:3 se ahorran ~58 px por fila y cabe en todas con holgura.
         * La foto NO se recorta: va con `object-fit`-equivalente (`max-height`
         * + `max-width`), asi que solo queda menos gris arriba y abajo. */
        aspect-ratio: 4 / 3;
        margin-bottom: 8px;
        overflow: hidden;
    }

    .s4b-sug__foto img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        mix-blend-mode: multiply;
    }

    .s4b-sug__precio {
        display: block;
        font-size: 15px;
        font-weight: 700;
        margin-bottom: 2px;
    }

    .s4b-sug__nombre {
        display: block;
        font-size: 12.5px;
        line-height: 1.35;
        /* Negro, no gris (23/09/2026): el cliente pidio los nombres en negro en
           movil y aqui se iguala, que es el mismo texto. */
        color: #1a1a1a;
        /* Tres lineas y corta: los nombres de esta tienda llegan a 120
           caracteres y sin tope una tarjeta estiraria toda su fila. */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .s4b-sug__rejilla a:hover .s4b-sug__nombre,
    .s4b-sug__rejilla a:focus-visible .s4b-sug__nombre { color: #ff0123; }
}

/* === ENLACE DE LA FRANJA AL CLUB4BIKE (29/09/2026) ====================
   Sustituye al mensaje del 5BIKE. BLANCO ESCRITO, NO `inherit`: en un enlace
   `inherit` trae el color del TEMA -la trampa que ya ha mordido siete veces-,
   y sobre el rojo de la franja eso seria morado sobre rojo.
   Subrayado para que se lea como algo que se pulsa: en esta franja los otros
   dos mensajes son texto plano. */
.s4b-promo__enlace,
.s4b-promo__enlace:visited {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.s4b-promo__enlace:hover,
.s4b-promo__enlace:focus-visible {
    color: #fff;
    text-decoration: none;
}

/* ---- MARCAS DE MOTO en el desplegable de Escapes (27/10/2026) ----
   El grupo va en su propia fila, a todo el ancho, debajo de tipo de moto y
   componentes: once tarjetas en una columna de grupo no caben. */
.s4b-menu__cuerpo--marcas { flex-wrap: wrap; row-gap: 20px; }
.s4b-menu__nuevo--filas .s4b-menu__grupo--marcas { flex: 1 1 100%; min-width: 0; padding-top: 18px; border-top: 1px solid #e3e3e3; }
/* TODAS EN UNA FILA (peticion del cliente, 27/10/2026): tantas columnas como
   marcas, que se reparten el ancho. Con 10 en 1.323 px tocan a ~125 px. */
.s4b-menu__marcas { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.s4b-menu__marca { display: flex; flex-direction: column; gap: 6px; height: 100%; text-decoration: none; color: #1a1a1a; }
.s4b-menu__marca-logo { display: flex; align-items: center; justify-content: center; height: 52px; padding: 0 10px; background: #f4f4f4; border-bottom: 2px solid transparent; }
.s4b-menu__marca-logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 28px; margin: 0; }
.s4b-menu__marca-logo b { font-size: 15px; font-weight: 800; letter-spacing: .02em; }
.s4b-menu__marca-nombre { font-size: 13px; text-align: center; }
.s4b-menu__marca:hover .s4b-menu__marca-logo, .s4b-menu__marca:focus-visible .s4b-menu__marca-logo { border-bottom-color: #d9001d; }
.s4b-menu__marca:hover .s4b-menu__marca-nombre { color: #d9001d; }
.s4b-menu__marca--todas { align-items: center; justify-content: center; min-height: 52px; padding: 0 12px; border: 1px solid #d5d5d5; font-size: 13px; font-weight: 700; text-align: center; }
.s4b-menu__marca--todas:hover, .s4b-menu__marca--todas:focus-visible { border-color: #1a1a1a; color: #1a1a1a; }

/* Movil: el logo en la caja de la derecha de la fila, sin recortar */
.s4b-panel__hoja-foto--logo { display: flex; align-items: center; justify-content: center; padding: 0 8px; }
.s4b-panel__hoja-foto--logo img { width: auto !important; height: auto !important; max-width: 100%; max-height: 26px; object-fit: contain; }