/* Store4Bike · Ficha de producto.
 *
 * Sin border-radius: sin-radios.css manda en todo el sitio.
 */

/* ------------------------------------------------------------------ */
/*  Barra de compra fija (móvil y tablet)                              */
/* ------------------------------------------------------------------ */
.s4b-compra {
    position: fixed;
    left: 0;
    right: 0;
    /* Se apoya encima del banner de cookies mientras este visible. La variable
       la publica assets/js/cookies.js; si no hay banner vale 0 y la barra se
       queda pegada abajo, como siempre.
       Sin esto, el banner tapaba el boton de comprar. */
    bottom: var(--s4b-cookies-alto, 0px);
    z-index: 1000;
    background: #fff;
    border-top: 1px solid #e3e3e3;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .10);
    /* La franja segura del iPhone: sin esto, el botón queda debajo de la barra
       de gestos del sistema y se pulsa mal. */
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* En escritorio NO se pinta: allí el botón real ya se ve sin desplazarse, y una
   barra fija solo quitaría sitio. */
@media (min-width: 992px) {
    .s4b-compra { display: none; }
}

.s4b-compra__caja {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 9px 15px 11px;
}

/* FILA 1: miniatura + nombre/estado + precios. */
.s4b-compra__fila {
    display: flex;
    align-items: center;
    gap: 10px;
}

.s4b-compra__foto {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    object-fit: contain;
    background: #f4f4f4;
    /* Las fotos de recambio vienen recortadas sobre blanco: sin esto se ve un
       rectangulo blanco dentro del gris. Mismo truco que en el listado. */
    mix-blend-mode: multiply;
}

.s4b-compra__datos {
    /* `min-width: 0` es obligatorio para que el nombre pueda recortarse: sin el,
       un nombre largo ensancha la fila y empuja el precio fuera de pantalla. */
    flex: 1 1 auto;
    min-width: 0;
}

.s4b-compra__nombre {
    margin: 0;
    font-size: 12px;
    line-height: 1.25;
    color: #1a1a1a;
    /* Una sola linea: la barra no puede crecer con el nombre del producto. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Los nombres estan en MAYUSCULAS en 4.539 de 16.972 productos y aqui se
       leen peor que en el titulo. Arreglarlo de verdad es otro trabajo. */
    text-transform: none;
}

.s4b-compra__estado {
    margin: 1px 0 0;
    font-size: 11px;
    line-height: 1.2;
    color: #1a7f37;
}

/* El punto de color delante, como en la referencia. */
.s4b-compra__estado::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 5px;
    border-radius: 50%;
    background: currentColor;
    vertical-align: middle;
}

.s4b-compra__estado--no { color: #a12; }

.s4b-compra__precios {
    flex: 0 0 auto;
    text-align: right;
}

.s4b-compra__antes {
    margin: 0;
    font-size: 11px;
    line-height: 1.1;
    color: #888;
    text-decoration: line-through;
}

.s4b-compra__precio {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.15;
    color: #1a1a1a;
    white-space: nowrap;
}

.s4b-compra__boton {
    /* FILA 2: a ancho completo, como en la referencia. Antes compartia fila con
       el precio y se quedaba en la mitad derecha. */
    width: 100%;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;   /* objetivo táctil cómodo */
    padding: 12px 18px;
    border: 0;
    /* ROJO `#d9001d` (16/09/2026, peticion del cliente). Es el mismo cambio
       que el resto de botones de añadir al carrito —ver el bloque del final
       de `sin-radios.css`, donde esta el porque del tono—. **Va aqui y no
       alli porque esta hoja se carga DESPUES**: una regla de la misma
       especificidad escrita en `sin-radios.css` perderia contra esta. */
    background: #d9001d;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

/* Rojo mas oscuro, no negro: sobre rojo, el negro se lee como otro boton. */
.s4b-compra__boton:hover,
.s4b-compra__boton:focus { background: #a80016; color: #fff; }

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

.s4b-compra__boton[disabled] {
    background: #9b9b9b;
    cursor: default;
}

/* El icono flotante de carrito que había antes sobra: era un atajo que sólo
   desplazaba, y ahora hay una barra con el precio y la acción de verdad. */
@media (max-width: 991px) {
    .buy-float { display: none; }
}

/* ------------------------------------------------------------------ */
/*  LA FICHA DEJA DE SER A TODO ANCHO EN ESCRITORIO                     */
/* ------------------------------------------------------------------ */
/* Se alinea con `.s4b-contenedor` de la cabecera (1440 px, centrado).
 * A 1920 px la ficha ocupaba 1875 y la cabecera 1440: el contenido nacia
 * 200 px a la izquierda del logo y la foto del producto se estiraba sin
 * necesidad.
 *
 * OJO CON DONDE SE PONE EL TOPE. El tema mete relleno ASIMETRICO
 * (30 px a la izquierda, 15 a la derecha) en `.row-wrapper`, y ademas
 * Bootstrap le pone margenes negativos de -10. Poner `max-width` a secas en
 * `.container` deja el contenido 4-5 px descuadrado respecto a la cabecera.
 * Por eso ademas se iguala el relleno de `.row-wrapper`.
 *
 * Solo por encima de 1200 px: por debajo el tema ya se ajusta solo y no hay
 * nada que corregir. */
/* EL `!important` ES OBLIGATORIO, y no es pereza. Creative Elements inyecta un
 * <style> EN LINEA con
 *     body#product #wrapper, body#product .container, ... { max-width: 100% !important }
 * que es su ajuste de «pagina a ancho completo». Un `!important` gana a
 * cualquier especificidad que no lo lleve, asi que sin esto la regla se ignora
 * — comprobado: ni forzando `style.maxWidth` por JS cambiaba el ancho.
 * Con los dos `!important`, gana el de MAYOR ESPECIFICIDAD, y aqui son dos ids
 * contra uno. Es el mismo patron que usa sin-radios.css contra CE. */
@media (min-width: 1200px) {
    #product #wrapper > .container {
        max-width: 1440px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* RELLENO ASIMETRICO A PROPOSITO, y no es un descuido.
     * La cabecera alinea su contenido en 248..1658 (contenedor de 1440 con 15
     * de relleno). Aqui abajo hay tres capas de Bootstrap encadenadas con
     * margenes negativos de -10 y rellenos de 10 que NO se cancelan por el lado
     * derecho. Medido: con 25/25 el contenido quedaba 248..1638, o sea 20 px
     * corto por la derecha. Los 5 de la derecha son esos 20 px devueltos.
     * Si algun dia cambian las capas de en medio, hay que volver a MEDIRLO,
     * no recalcularlo de cabeza. */
    #product #wrapper > .container > .row-wrapper {
        padding-left: 25px;
        padding-right: 5px;
    }

    /* LA MIGA TAMBIEN SE ACOTA AL ANCHO MAXIMO (16/09/2026, peticion del
     * cliente: «que las breadcrumbs esten dentro del ancho maximo»).
     *
     * **NO LA ALCANZABA LA REGLA DE ARRIBA, y el motivo es el selector**: esa
     * dice `#wrapper > .container`, y el contenedor de la miga **no es hijo
     * directo de `#wrapper`** — cuelga de `.page-title-wrapper`. Resultado: en
     * una ventana de 1.900 px el titulo y la foto quedaban centrados en 1.440 y
     * la miga seguia pegada al borde izquierdo de la ventana.
     *
     * `!important` por lo de siempre: Creative Elements inyecta EN LINEA
     * `body#product .container { max-width: 100% !important }`. */
    #product #wrapper > .page-title-wrapper > .container {
        max-width: 1440px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Y EL AJUSTE FINO NO VA EN EL CONTENEDOR, VA EN EL `<ol>`.
     * Medido: el relleno del `.container` se queda en **0 px** —alguien lo pisa
     * con `!important`, asi que poner `padding-left` ahi no hace nada, y lo
     * probe— y lo que desplaza la miga son los **30 px de `margin-left` del
     * propio `ol`**. Con ellos arrancaba en 263 contra los 248 del contenido, y
     * por la derecha se pasaba 15 px.
     * Los 15/15 son MEDIDOS, no calculados: dejan la miga en 248..1658, que es
     * exactamente donde caen la foto, el titulo y las pestañas. */
    #product #wrapper .breadcrumb ol {
        /* `!important` SOLO EN EL IZQUIERDO, y el sintoma lo delataba: el margen
           derecho SI me hizo caso y el izquierdo no se movia. La causa es una
           regla EN LINEA de Creative Elements,
           `#product .breadcrumb ol { margin-left: 30px !important }`, que solo
           fuerza ese lado. Media regla aplicada es la firma de un `!important`
           ajeno. */
        margin-left: 15px !important;
        margin-right: 15px;
    }
}

/* ================================================================== */
/*  BLOQUE «CÓMPRALO CON» (productos cruzados)                         */
/* ================================================================== */
/* RETIRADO DE LA FICHA EL 16/09/2026 (decision del cliente: «este modulo
 * ahora mismo no tiene mucho sentido... te recomienda comprar 2 escapes
 * junto a un escape»).
 *
 * **NO ESTABA MAL CONFIGURADO: ESTABA VACIO POR DENTRO.** Ese modulo aprende
 * del historial de pedidos y **la tienda tiene 0 pedidos** (medido). Sus
 * 17.640 filas no las ha aprendido de nada: la inmensa mayoria tiene
 * `confidence = 0.00` y las parejas son productos sin relacion — a un escape
 * Kawasaki le ofrecia un escape Suzuki y un colector Hyosung, y habia filas
 * apuntando a productos que ya no existen.
 *
 * SE OCULTA SOLO `#abs_usually_bought_together`, **NO el contenedor
 * `.s4b-juntos`**: en ese mismo gancho (`displayReassurance`) viaja el sello
 * de «Pago seguro garantizado», que se queda. Se vio enumerando los hijos
 * desde el navegador, no leyendo la plantilla.
 *
 * ES UN OCULTAMIENTO, NO UNA DESINSTALACION, y es deliberado: revertir es
 * borrar esta regla. **El marcado se sigue enviando** (~400 px de HTML, su
 * <style> y su <script>); cuando el sistema propio de compra cruzada este
 * publicado, toca desactivar el modulo de verdad —borrando su fila de
 * `module_shop`, que es lo unico que PrestaShop mira— y entonces si deja de
 * pesar.
 *
 * El dia que la tienda acumule pedidos reales, este modulo vuelve a tener
 * sentido: esta bien hecho para lo suyo, solo le faltan datos. */
body#product #abs_usually_bought_together {
    display: none;
}

/* LO QUE SIGUE SOLO VUELVE A APLICAR SI SE REPONE EL BLOQUE. Se conserva
 * entero a proposito. */

/* LOS COLORES NO ESTAN AQUI: estan en la configuracion del modulo
 * (`ABS_FQBT_*`), porque el modulo construye su propio <style> con
 * `!important` y pelear contra el desde una hoja seria perder. Ver
 * `scripts/ficha-1-colores-cruzados.php`.
 *
 * Aqui solo va lo que el modulo NO deja configurar. */

/* El tema pone `capitalize` a los titulos y en castellano eso escribe
   «Cómpralo Con». El texto configurado es correcto; lo estropea el CSS. */
.s4b-juntos h3,
.s4b-juntos .abs_usually_bought_together {
    text-transform: none;
}

/* Las casillas salian azules: es el color por defecto del navegador, no del
   modulo. `accent-color` las pinta sin tener que reconstruir el control. */
.s4b-juntos input[type="checkbox"] {
    accent-color: #191919;
}

/* ESPACIADO. El bloque medía 508 px de fuera y 429 de dentro: 79 px eran
   margenes y rellenos sueltos (20 arriba + 8 abajo del bloque, 20 de margen
   inferior, 15 del titulo). En movil eso es un tercio de pantalla en blanco
   alrededor de tres miniaturas.
   Se recorta el aire, NO el contenido: las tres fichas, el total, el boton y
   las casillas siguen enteros. */
.s4b-juntos .block_abs_usually_bought {
    margin-top: 0;
    margin-bottom: 12px;
    padding-top: 12px;
    padding-bottom: 4px;
}

.s4b-juntos h3,
.s4b-juntos .abs_usually_bought_together {
    margin-top: 4px;
}

.s4b-juntos .products_abs_u_b_together {
    padding-bottom: 10px;
}

/* ================================================================== */
/*  TITULOS DE SECCION DE LA FICHA                                     */
/* ================================================================== */
/* Mismo `capitalize` del tema: «5 Otros Productos En La Misma Categoría».
   Se anula aqui y no en el tema, que es generado y se perderia.

   EL SELECTOR SE SACO DEL DOM, no del codigo. El bloque de «otros productos»
   no es `.featured-products` ni `.product-accessories` como uno supondria:
   es `section.categoryproducts > div.pos_title > h2`. Las tres suposiciones
   anteriores no casaban con nada y el titulo seguia capitalizado. */
#product .pos_title h1,
#product h1.product-title,
#product h1.h1,
#product .pos_title h2,
#product .pos_title h3,
#product .categoryproducts h2,
#product .featured-products .products-section-title,
#product .product-accessories h3,
#product .tabs .nav-link,
#product .product-tabs .nav-link {
    text-transform: none;
}

/* «Añadir Al Carrito» -> «Añadir al carrito». Mismo `capitalize` del tema, esta
   vez en los botones. El texto de PrestaShop ya viene bien escrito. */
#product .add-to-cart,
#product .btn-primary,
#product button[type="submit"],
.s4b-compra__boton {
    text-transform: none;
}

/* ------------------------------------------------------------------ */
/*  Miga de pan de la ficha                                             */
/* ------------------------------------------------------------------ */
/* EN MOVIL LA MIGA SALIA ROTA: un solo nivel («Escapes para Cross y Enduro»)
 * seguido de una barra colgando y nada detras. Ni «Inicio», ni la familia, ni
 * forma de subir un nivel.
 *
 * LA CAUSA NO ESTA EN NINGUN FICHERO CSS: es un `<style>` EN LINEA que inyecta
 * Creative Elements, con
 *     @media (max-width: 991px) { .breadcrumb ol li { display: none } }
 * y otra regla que vuelve a enseñar uno solo. Buscar «breadcrumb» en los .css
 * del tema no lo encuentra — hay que mirar las hojas del documento desde el
 * navegador.
 *
 * Y ESA REGLA LLEVA `!important`, que es la trampa de siempre de Creative
 * Elements. Un `#wrapper` de mas no basta: **entre dos `!important` no gana el
 * ultimo, gana el de mayor especificidad**, asi que hay que poner `!important`
 * aqui TAMBIEN, ademas del `#wrapper`. Sin el, el primer intento dejo la barra
 * colgando arreglada (esa regla no era `!important`) y los niveles seguian
 * ocultos: medio arreglo, que es peor que ninguno porque parece que funciona.
 *
 * SE OCULTA EL ULTIMO NIVEL A PROPOSITO: es el nombre del producto, que esta
 * repetido en el `<h1>` justo debajo. Ocupa dos lineas y no lleva a ningun
 * sitio. Con eso la miga cabe en una linea y recupera sus tres enlaces.
 * OJO: al ocultarlo hay que quitar la barra del que pasa a ser el ultimo
 * visible, o vuelve a quedar una barra colgando — que era medio problema.
 *
 * El `<ol>` es `flex`: sin `wrap`, una miga larga se saldria por la derecha. */
@media (max-width: 991px) {
    /* LA BANDA GRIS QUE ENVUELVE LA MIGA: fuera el relleno. Medido, ocupaba
     * **69 px para una miga de 24**: 15 px de relleno arriba, 10 abajo, mas los
     * 10+10 de margen del propio `<nav>`. Con el relleno a 0 quedan 44, que son
     * la miga y el aire de sus margenes — y ese aire SI hace falta, o el texto
     * queda pegado a los bordes del gris.
     * El `margin-bottom` del contenedor tampoco se toca: es lo que lo separa de
     * la foto.
     *
     * `!important` OTRA VEZ, y por lo mismo que la miga: el relleno lo pone
     * Creative Elements en un `<style>` en linea, con `!important` y en DOS
     * tramos (`<=575` y `576-991`). `#product .page-title-wrapper` ya tiene mas
     * especificidad que su `.page-title-wrapper.p_tilte_small`, pero sin
     * `!important` no entra a competir siquiera. Un solo `@media (max-width:
     * 991px)` cubre los dos tramos suyos. */
    #product .page-title-wrapper {
        /* NO ES `0` DEL TODO, Y HAY UN MOTIVO: COLAPSO DE MARGENES.
         * Con `padding: 0` exacto, el `margin: 10px 0` del `<nav>` de dentro
         * **se escapa de la banda** —un margen superior atraviesa un contenedor
         * sin relleno ni borde arriba— y en vez de separar la miga del borde
         * gris, empuja la banda ENTERA 10 px hacia abajo. Resultado: una franja
         * blanca entre la cabecera y el gris, que es justo lo que el cliente
         * marco. El hueco no lo creaba nadie: era el margen de dentro saliendo
         * fuera.
         * Se arregla por los dos lados: el margen del `<nav>` a 0 (abajo) y un
         * relleno minimo aqui, que ademas evita que el texto quede pegado al
         * borde del gris. */
        padding: 6px 0 !important;
    }

    /* Ver arriba: este margen colapsaba fuera de la banda. */
    #wrapper .breadcrumb {
        margin: 0;
    }

    #wrapper .breadcrumb ol {
        /* El `<ol>` es `flex` con `justify-content: center`, asi que la miga
         * salia CENTRADA mientras el titulo, la marca y la referencia van a la
         * izquierda. Y `text-align` no tiene nada que ver aqui: en un flex
         * manda `justify-content`, asi que mirar `text-align` —que ya decia
         * `left` en toda la cadena de padres— no lleva a ningun sitio. */
        justify-content: flex-start;

        /* UNA SOLA LINEA Y DESLIZABLE (13/09/2026, peticion del cliente). Con
         * `wrap` la miga se comia dos lineas encima de la foto. Ahora se sale
         * por la derecha y se arrastra con el dedo.
         *
         * `overflow-x: auto` AQUI, en el `<ol>`, y no en un padre: asi el
         * desplazamiento se queda dentro de la miga y **la pagina no coge
         * desbordamiento horizontal**, que es lo que rompe el resto del diseño.
         *
         * Se oculta la barra de desplazamiento: son tres palabras, la barra
         * pesa mas que lo que indica. Lo que dice que hay mas es que el ultimo
         * nivel asoma cortado por el borde. */
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    #wrapper .breadcrumb ol::-webkit-scrollbar {
        display: none;
    }

    #wrapper .breadcrumb ol li {
        display: inline !important;
        /* `flex: 0 0 auto` o los niveles se encogen para caber todos y no hay
           nada que deslizar; `nowrap` para que ninguno parta por dentro. */
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* EL TAMAÑO HAY QUE PONERLO EN EL `<a>`, NO SOLO EN EL `<li>`: el tema le
     * da al enlace su propio `font-size`, asi que no hereda. Medido: con la
     * regla solo en el `li`, `getComputedStyle(li).fontSize` decia 11 px y **el
     * texto seguia pintandose a 16**. Es facil darlo por hecho mirando el
     * contenedor. El `li` se deja tambien, por el separador `::after`, que si
     * hereda de el. */
    #wrapper .breadcrumb ol li,
    #wrapper .breadcrumb ol li a {
        font-size: 10px;
        /* Sin grosor: el tema pone los enlaces en negrita y a este tamaño la
           negrita no se lee como enfasis, solo emborrona las letras. */
        font-weight: 400;
    }

    /* EN NEGRO (13/09/2026, peticion del cliente). Estuvo un rato en gris
     * `#6b6b6b` para restarle peso; lo que la deja en segundo plano es el
     * tamaño (10 px) y la falta de negrita, no el color.
     * El negro es ademas lo que mas contraste da sobre el gris de la banda. */
    #wrapper .breadcrumb ol li,
    #wrapper .breadcrumb ol li a {
        color: #1a1a1a;
    }

    /* El separador lo pinta el tema como `display: block`, y dentro de un
       elemento de una linea eso lo tira al renglon siguiente. */
    #wrapper .breadcrumb ol li::after {
        display: inline;
    }

    #wrapper .breadcrumb ol li:last-child {
        display: none !important;
    }

    #wrapper .breadcrumb ol li:nth-last-child(2)::after {
        content: '';
        margin: 0;
    }
}


/* ================================================================== */
/*  «COMPLETA TU COMPRA» · venta cruzada en la columna de compra       */
/*  (16/09/2026, peticion del cliente; referencia: xlmoto)            */
/* ================================================================== */
/* Lista vertical bajo la caja de compra, en vez del carrusel a todo el ancho
 * que habia al final de la pagina. Marcado en
 * `_partials/producto/completa-compra.tpl`.
 * Vuelta atras: quitar el {include} de `product_layout1.tpl` y reponer el
 * bloque de accesorios en `layouts/layout-both-columns.tpl`. */

.s4b-cruzada {
    margin-top: 24px;
}

.s4b-cruzada__titulo {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
    /* El tema capitaliza los encabezados y en castellano eso escribe mal
       («Completa Tu Compra»). Misma correccion que en los demas titulos. */
    text-transform: none;
    color: #1a1a1a;
}

.s4b-cruzada__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    /* SIN LINEA ARRIBA NI ABAJO (16/09/2026, peticion del cliente): las rayas
       de los extremos cerraban el bloque como si fuera una caja, y esta ficha
       ya no tiene cajas. **Solo se separan los productos ENTRE SI**, que es
       para lo que sirve un separador. */
}

.s4b-cruzada__fila {
    display: flex;
    gap: 12px;
    /* **SIN NINGUNA LINEA ENTRE FILAS (16/09/2026, peticion del cliente).**
       Llevaba `border-bottom: 1px solid #e3e3e3`. Es la misma pasada que dejo
       la portada sin lineas entre secciones el 13/09.
       **LO QUE SEPARA AHORA ES EL RELLENO, y pasa a ser estructural**: los
       `14px 0` del cuerpo dan 28 px entre el boton de una fila y el nombre de
       la siguiente. Recortarlos pega los productos, asi que ese numero ya no
       es holgura. Y ojo, **ese 14 esta ademas atado al `margin-bottom` de la
       caja gris**, que es lo que la deja alineada con el boton. */
    /* **EL RELLENO VERTICAL NO VA AQUI, VA EN EL TEXTO.** Estando en la fila,
       el gris de la foto se quedaba en 94 px de los 123 y flotaba con un hueco
       arriba y abajo. Moviendolo al cuerpo, la caja gris llega de borde a
       borde de la fila y el aire lo pone el texto, que es quien lo necesita. */
    padding: 0;
}

/* Ya no hay ninguna raya que quitarle a la ultima fila, pero la regla se queda
   como red de seguridad: el tema pone bordes a los `li` con un selector mas
   especifico que el nuestro —de ahi salio el separador MORADO que aparecio al
   retirar los recuadros— y esto lo apaga pase lo que pase. */
.s4b-cruzada__fila,
.s4b-cruzada__fila:last-child {
    border: 0;
}

/* LA FOTO, SOBRE GRIS Y CON `multiply`, como en toda la tienda: las fotos de
   recambio vienen recortadas sobre BLANCO y sin la mezcla se ve un rectangulo
   blanco dentro del gris. Fondo y mezcla son UNA decision: cambiar uno sin el
   otro rompe el bloque. */
/* EL GRIS OCUPA TODO EL ALTO DE LA FILA (16/09/2026, peticion del cliente).
   Antes era un cuadrado de 80x80 dentro de una fila de ~110, y quedaba
   flotando; ahora la caja se estira con `align-self: stretch` y la foto se
   centra dentro.
   **El alto NO se pone en pixeles**: la fila la dimensiona el texto —nombre a
   dos lineas mas precio mas boton—, asi que cualquier numero fijo se
   descuadraria en cuanto un nombre ocupe una linea mas. */
.s4b-cruzada__foto {
    flex: 0 0 80px;
    width: 80px;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f4f4;
    /* **EL GRIS ACABA DONDE ACABA EL BOTON** (16/09/2026, peticion del
       cliente). Con `stretch` a secas llegaba hasta la linea separadora, 14 px
       por debajo del boton, y se veia una pestaña de gris suelta.
       El margen inferior se resta del alto estirado, asi que **vale el mismo
       numero que el `padding-bottom` del cuerpo**: si ese cambia, este tambien.
       Se hace asi y no con una altura fija porque la fila la dimensiona el
       texto —un nombre de dos lineas la hace crecer— y cualquier numero en
       pixeles se descuadraria. */
    margin-bottom: 14px;
}

.s4b-cruzada__foto img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* `min-width: 0` no es opcional: sin el, un nombre largo sin espacios ensancha
   la columna flex y saca el bloque de la caja de 289 px. */
.s4b-cruzada__cuerpo {
    flex: 1 1 auto;
    min-width: 0;
    padding: 14px 0;
}

.s4b-cruzada__nombre {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.35;
    /* NEGRO EXPLICITO: en un enlace, lo heredado es el color del TEMA (un
       morado). Es la trampa que ya mordio en la portada y en el menu. */
    color: #1a1a1a;
    text-decoration: none;
}

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

.s4b-cruzada__precio {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
    /* En NEGRO, no en el rojo de la marca: el precio va en negro en toda la
       tienda desde el 13/09/2026. */
    color: #1a1a1a;
}

.s4b-cruzada__antes {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 400;
    color: #888;
    text-decoration: line-through;
}

.s4b-cruzada__forma { margin: 0; }

.s4b-cruzada__boton {
    width: 100%;
    /* TOPE DE ANCHO, por el paso a dos columnas (16/09/2026). El bloque nacio
       en una columna de 289 px, donde «ancho completo» son 237 px y queda bien.
       Con la ficha a dos columnas esa columna pasa a 677 y el boton se estiraba
       a ~590 px: un boton de complemento mas ancho que el de comprar el
       producto principal. El `width: 100%` se queda para la columna estrecha y
       para movil; el tope solo actua cuando sobra sitio. */
    max-width: 260px;
    min-height: 40px;
    padding: 9px 10px;
    border: 1px solid #1a1a1a;
    background: #1a1a1a;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}

.s4b-cruzada__boton:hover,
.s4b-cruzada__boton:focus {
    background: #fff;
    color: #1a1a1a;
}

/* EL TEMA LE PONE UN ICONO POR `::before` a `.ajax_add_to_cart_button` con su
   tipografia propia, y aqui sobra: el boton ya lleva texto y en 289 px cada
   pixel cuenta. */
.s4b-cruzada__boton::before { content: none; }

.s4b-cruzada__agotado {
    margin: 0;
    font-size: 12px;
    color: #888;
}

/* EL CARRUSEL VIEJO NO SE PINTA. El bloque nativo de accesorios seguia
   existiendo al final de la pagina con los mismos productos; con la lista
   nueva serian los mismos dos productos dos veces en la misma ficha.
   Para volver atras: quitar esta regla y el {include} del layout. */
body#product .products-accessories {
    display: none;
}

/* ------------------------------------------------------------------ */
/*  La miga de la ficha, IGUAL QUE EN EL RESTO DE LA WEB (escritorio)   */
/* ------------------------------------------------------------------ */
/* 16/09/2026, peticion del cliente: «deja las breadcrumbs como en el resto de
 * la web». En escritorio la ficha tenia SU PROPIA miga y se notaba:
 *
 *   | | Ficha (antes) | Listados y demas |
 *   |---|---|---|
 *   | Tamaño | 14 px | 12 px |
 *   | Color | #253237 (azul del tema) | #888 |
 *   | Ultimo nivel | **ROJO #ff0123** | gris, como el resto |
 *   | Fondo | banda gris #f4f3f1 de 51 px | sin banda |
 *   | Nombre de categoria | «ESCAPES» | «Escapes» |
 *
 * La referencia es `.s4b-listado__miga` (assets/css/listado.css): 12 px, #888,
 * enlaces que se oscurecen al pasar el raton y ninguna banda.
 *
 * **EL TEXTO NO SE ARREGLA AQUI**: lo de «ESCAPES» es un dato, no un estilo, y
 * un `text-transform` escribiria «h7pro», «cee» y «2t». Lo hace
 * `override/controllers/front/ProductController.php` reutilizando la misma
 * funcion que las categorias.
 *
 * **SOLO DE 992 px PARA ARRIBA.** Por debajo la miga de la ficha la decidio el
 * cliente el 13/09/2026 —10 px, una linea, en NEGRO y sin el ultimo nivel—
 * despues de probarla en gris. No se toca sin preguntar. */
@media (min-width: 992px) {
    /* FUERA LA BANDA GRIS. En las paginas de categoria no se pinta desde que
       se publico el listado nuevo, asi que la ficha era la unica que la tenia.
       **EL `!important` ES OBLIGATORIO**: el gris lo pone Creative Elements en
       un `<style>` EN LINEA con `.page-title-wrapper { background: ... !important }`,
       y un `!important` gana a cualquier selector que no lo lleve — aunque el
       mio tenga un id. Entre dos `!important` gana el de mas especificidad, y
       ahi el `#product` desempata.
       Se enumeraron las hojas del documento para encontrarlo: buscar
       «page-title-wrapper» en los .css del tema no devuelve esta regla. */
    #product .page-title-wrapper {
        background: none !important;
        padding-top: 8px !important;
        padding-bottom: 0 !important;
    }

    #wrapper .breadcrumb ol li,
    #wrapper .breadcrumb ol li a {
        font-size: 12px;
        font-weight: 400;
        color: #888;
    }

    /* El ultimo nivel es el nombre del producto y venia en el ROJO de la marca:
       cien caracteres en rojo sobre el titulo, que es lo que mas cantaba de la
       captura. En gris deja de competir con el `<h1>`. */
    #wrapper .breadcrumb ol li:last-child,
    #wrapper .breadcrumb ol li:last-child a {
        color: #888;
    }

    #wrapper .breadcrumb ol li a:hover {
        color: #1a1a1a;
    }
}

/* ------------------------------------------------------------------ */
/*  SIN RECUADROS EN LA COLUMNA DE COMPRA                              */
/*  (16/09/2026, peticion del cliente: «quitar los bordes de estos     */
/*   bloques»)                                                         */
/* ------------------------------------------------------------------ */
/* Los recuadros se ENUMERARON desde el navegador, no buscando «border» en el
 * CSS: en esa columna hay ademas un input de cantidad, dos botones y el
 * corazon con borde, que **no son contenedores y se quedan** — es el mismo
 * criterio que se siguio al quitar los bordes de la portada.
 *
 * Eran dos cajas:
 *   1. `.sticky-buybox` (678x400) — se quita en el <style> de la plantilla.
 *   2. `.ed_item` (636x39), la caja del plazo de entrega, que pinta el modulo
 *      `estimateddelivery` con un borde gris #ccc.
 *
 * LAS LINEAS FINAS SE QUEDAN: el `border-top` sobre «Compartir» y los
 * separadores entre complementos. Sin recuadro, son lo unico que ordena la
 * columna; quitarlas dejaria todo pegado. */
body#product .ed_item {
    border: 0;
    /* El relleno lateral se va con el borde: si no, el aviso de entrega queda
       sangrado respecto al precio y al titulo, que ahora arrancan todos en la
       misma x. */
    padding-left: 0;
    padding-right: 0;
}

/* EL SEPARADOR ENTRE COMPLEMENTOS SALIA EN MORADO `rgb(82,21,65)`, que es el
 * color de enlace del tema. Mi `border-bottom: 1px solid #e3e3e3` declara el
 * color, pero el tema lo pisa con una regla de `border-color` mas especifica
 * sobre los `li`. **Es la quinta vez que ese morado aparece donde no toca**
 * (portada, menu movil, menu de escritorio, fichas de categoria). Se vio
 * enumerando bordes desde el navegador: a simple vista, una linea morada de
 * 1 px parece gris. */
/* Esta regla existia para forzar el gris del separador contra el MORADO que el
   tema le ponia a los `li`. Sin separador, lo que hace falta es apagarlo del
   todo — con la misma especificidad, que es la que hacia falta para ganarle. */
body#product .s4b-cruzada__lista .s4b-cruzada__fila {
    border: 0;
}

/* ------------------------------------------------------------------ */
/*  EL AVISO DE PLAZO DE ENTREGA                                       */
/*  (16/09/2026, peticion del cliente: «este bloque tenemos que        */
/*   mejorarlo a nivel visual»)                                        */
/* ------------------------------------------------------------------ */
/* Lo pinta el modulo `estimateddelivery` (`.ed_item > p.ed_orderbefore`), y el
 * icono del camion es un glifo de FontAwesome en su `::before`.
 *
 * ESTABA A 11,5 px, TODO DEL MISMO COLOR Y EN UNA LINEA CORRIDA: la fecha de
 * entrega —que es el dato por el que se lee esta frase— pesaba lo mismo que el
 * resto.
 *
 * **NO SE PUEDE REORDENAR LA FRASE POR CSS, y se intento.** Lo suyo seria
 * poner la fecha primero y el corte debajo, pero entre los `<span>` hay un
 * TEXTO SUELTO («y recíbelo») que no es un elemento: con `flex` o `grid` se
 * convierte en un item anonimo que no se puede seleccionar ni ordenar, y la
 * frase se parte por donde no debe. Para cambiar el orden habria que
 * sobrescribir la plantilla del modulo en el tema, y esa trae la logica de la
 * cuenta atras y de los transportistas. Queda como mejora aparte.
 *
 * EL ICONO CUELGA (`absolute` + `padding-left`), que es lo que mantiene el
 * texto alineado cuando parte en dos lineas. Con el icono en el flujo, la
 * segunda linea volvia debajo de el. */
body#product .ed_item {
    margin-bottom: 16px;
}

body#product .ed_orderbefore {
    position: relative;
    margin: 0;
    /* SIN SANGRADO: el icono del camion se retiro el 16/09/2026 (peticion del
       cliente), asi que el hueco que le reservaba ya no tiene nada dentro. */
    padding-left: 0;
    font-size: 13px;
    line-height: 1.5;
    /* Gris: es informacion de apoyo. Lo que tiene que saltar es la fecha.
       **`!important` OBLIGATORIO, y el sitio del que viene importa:** el negro
       lo pone `.ed_orderbefore { color: #191919 !important }` desde `cssvalue`,
       el CSS personalizado que vive en un MODULO DEL BACK OFFICE (el pendiente
       8 del proyecto), no en ningun fichero del tema. Por eso no aparece
       buscando en `themes/`. Se encontro enumerando las hojas del documento. */
    color: #6b6b6b !important;
}

/* EL CAMION, FUERA (16/09/2026, peticion del cliente).
   Era un glifo de FontAwesome en el `::before` del parrafo — no una imagen, asi
   que no se quita borrando ningun fichero: se apaga con `content: none`.
   **El `display: none` NO valdria igual de bien aqui**: el glifo lo declara la
   hoja del modulo y `content: none` es lo que de verdad lo deja sin contenido
   que pintar. Reponerlo es borrar esta regla y devolver el `padding-left`. */
body#product .ed_orderbefore::before {
    content: none;
}

/* LA FECHA DE ENTREGA ES EL DATO: negro y en negrita, un punto mas grande que
   el texto que la envuelve. */
body#product .ed_dates strong {
    font-size: 14px;
    color: #1a1a1a;
}

/* LA HORA DE CORTE, EN VERDE Y NO EN ROJO. Estaba en `rgb(178,31,37)`, un rojo
   a dos centimetros de la etiqueta roja de ENVÍO GRATIS y del rojo de marca:
   tres rojos distintos en la misma esquina. El verde es el mismo `#1a7f37` de
   «Disponible», justo debajo, y aqui dice lo mismo: buenas noticias. */
body#product .ed_orderbefore .ed_days_to,
body#product .ed_orderbefore .ed_countdown {
    /* Mismo caso: el rojo sale de `.ed_countdown, .date_green { color: #B21F25
       !important }`, tambien en `cssvalue`. Entre dos `!important` gana el de
       mas especificidad, y aqui hay un id y tres clases contra una. */
    color: #1a7f37 !important;
    font-weight: 600;
}

/* ------------------------------------------------------------------ */
/*  PRECIO: SIN «SIN IVA» Y CON «ENVÍO GRATIS» AL LADO                 */
/*  (16/09/2026, peticion del cliente)                                 */
/* ------------------------------------------------------------------ */
/* Antes: la etiqueta de envio gratis iba ENCIMA del precio, en su propia
 * linea, y debajo del precio venia «(465 € Sin IVA)». Tres renglones para un
 * dato. Ahora: precio y etiqueta comparten fila, y el precio sin IVA no se
 * pinta.
 *
 * **NO HACE FALTA TOCAR NINGUNA PLANTILLA**: `.product-prices` ya es un
 * contenedor flex, asi que la etiqueta se manda detras con `order`. Es lo mismo
 * que se hizo con la lupa del buscador en movil — cambiar el ORDEN VISUAL sin
 * tocar el orden del marcado.
 *
 * Ojo: la etiqueta **la escribe JavaScript**, no viene en el HTML del servidor.
 * Por eso no se puede mover desde Smarty aunque se quisiera. */
body#product .product-prices {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

body#product .product-prices .product-price {
    order: 1;
    margin: 0;
}

body#product .product-prices .free-shipping-label-product {
    order: 2;
    margin: 0;

    /* EN NEGRO (16/09/2026, peticion del cliente), el mismo dia que el boton
       de comprar pasa a rojo — y las dos cosas son una sola decision: con la
       etiqueta en el rojo de marca justo al lado del boton, **habria dos rojos
       distintos a dos centimetros** y el aviso de envio competiria con la
       accion. Ahora el rojo de la ficha es unicamente el boton.
       Es ademas el tercer rojo que se retira de esta misma esquina: antes
       cayo el `#B21F25` de la hora de corte del plazo de entrega.

       EL COLOR LO PONE UN `<style>` EN LINEA del modulo de CSS del back
       office (`.free-shipping-label-product`, fondo `#ff0123`), **pero con
       UNA sola clase y SIN `!important`**, asi que este selector lo gana sin
       pelea. No hace falta `!important`: no confundirlo con el caso del
       plazo de entrega, donde `cssvalue` si lo lleva.
       Blanco sobre `#1a1a1a` da 16,9:1. */
    background-color: #1a1a1a;
    color: #fff;
}

/* EL PRECIO SIN IVA, FUERA. Es una tienda para particular: el precio que
   importa es el que se paga. El dato sigue en el HTML por si algun dia hace
   falta —basta con borrar esta regla—. */
body#product .price-line .tax-info {
    display: none;
}

/* ------------------------------------------------------------------ */
/*  SIN SELECTOR DE CANTIDAD EN LA FICHA                               */
/*  (16/09/2026, peticion del cliente: «en esta tienda casi en ningun  */
/*   caso nadie va a comprar mas de una unidad de cada producto»)      */
/* ------------------------------------------------------------------ */
/* SE OCULTA, NO SE BORRA DE LA PLANTILLA, y no es pereza: ese `<input
 * name="qty">` es parte del formulario de compra. Quitandolo del marcado habria
 * que reponer un campo oculto con el valor, y si se olvida, PrestaShop recibe
 * el formulario sin cantidad. Escondiendolo, el campo sigue ahi con su `1` y el
 * formulario se envia exactamente igual.
 *
 * COMPROBADO ANTES DE TOCAR NADA: **0 de los 16.972 productos activos tienen
 * cantidad minima mayor que 1**, asi que ese `1` siempre es un valor valido.
 * Y **1.024 productos se venden ya en pack** («x 10 uds», «2 unidades»): la
 * cantidad viaja dentro del propio producto, que es el argumento del cliente.
 *
 * NO SE PIERDE PODER COMPRAR VARIAS UNIDADES: el cajon lateral del carrito
 * lleva sus botones `+` y `-` en cada linea, y la pagina del carrito tambien.
 * Lo que se quita es el paso de elegir cantidad ANTES de añadir.
 *
 * Revertir: borrar esta regla. */
body#product .product-quantity .qty {
    display: none;
}

/* ------------------------------------------------------------------ */
/*  LA FOTO DEL PRODUCTO, SOBRE GRIS                                   */
/*  (16/09/2026, peticion del cliente)                                 */
/* ------------------------------------------------------------------ */
/* El mismo `#f4f4f4` que las tarjetas de producto del listado, las fichas de
 * categoria de la portada y los iconos del mega-menu: con esto la tienda usa
 * un UNICO gris de imagen de punta a punta.
 *
 * **EL `multiply` NO ES OPCIONAL, es la otra mitad de la decision.** Las fotos
 * de recambio vienen recortadas sobre BLANCO: sin la mezcla se ve un
 * rectangulo blanco dentro del gris. Cambiar uno sin el otro rompe el bloque —
 * en la portada eso dio tres vueltas en un dia.
 *
 * Va en `.product-cover`, que es la caja de la foto, no en la imagen: asi el
 * gris ocupa el hueco entero y la foto queda centrada dentro, como en las
 * tarjetas. */
body#product .product-cover {
    background: #f4f4f4;
}

body#product .product-cover img {
    mix-blend-mode: multiply;
}

/* --- En MOVIL la foto va A SANGRE (16/09/2026, peticion del cliente:
 *     «quitale el padding, que se vea el fondo gris en todo el ancho») ---
 *
 * La caja gris se quedaba en 15..365 de los 375 utiles: la frenaban el relleno
 * de `.cover-item` (0 10px) y el de la columna. Ahora llega a los dos bordes de
 * la pantalla.
 *
 * **SE SACA CON MARGEN NEGATIVO, NO CON `width: 100vw`.** El truco de
 * `100vw + calc(50% - 50vw)` incluye la barra de desplazamiento y mete
 * desbordamiento horizontal en la pagina — ya se descarto por lo mismo en la
 * foto de asesoramiento de la portada y en el panel del mega-menu.
 *
 * Solo por debajo de 992 px: en escritorio la foto vive en su columna y a
 * sangre se saldria de la rejilla. */
@media (max-width: 991px) {
    body#product .product-cover {
        /* **LOS DOS NUMEROS SON DISTINTOS, Y ESTAN MEDIDOS.** La caja nacia en
           15..365 de los 375 utiles: 15 px de hueco por la izquierda y 10 por
           la derecha. Es la misma cadena de rellenos asimetricos de Bootstrap
           que ya obligo al 25/5 del contenedor en escritorio.
           Con -15/-15 la caja quedaba en 0..380 y se salia 5 px (no se veia,
           porque un padre lo recorta, pero estaba). */
        margin-left: -15px;
        margin-right: -10px;
    }

    /* El relleno interior tambien se va: si no, el gris llega al borde pero la
       foto sigue metida 10 px y se nota en el centrado. */
    body#product .cover-item {
        padding-left: 0;
        padding-right: 0;
    }

    /* Y LA FOTO SE PEGA A LA MIGA (16/09/2026, peticion del cliente: «quita la
       separacion de la foto con las migas»).
       **El hueco eran los 15 px de `margin-bottom` de la banda de la miga, y
       nada mas**: se midio la cadena entera —contenedor, columna, fila,
       `page-content`, `images-container`— y todos estaban a 0.
       Al juntarlas, el gris de la banda (#f4f3f1) y el de la foto (#f4f4f4)
       quedan pegados y se leen como un solo bloque. Son practicamente el mismo
       gris, asi que no hay costura visible. */
    body#product .page-title-wrapper {
        /* `!important` OBLIGATORIO: los 15 px los pone Creative Elements EN
           LINEA, dentro de `@media (max-width: 1199px)` y con `!important`. Sin
           el, la regla se lee correcta en el inspector y el hueco sigue ahi
           — pasa por cuarta vez en esta ficha. */
        margin-bottom: 0 !important;
    }
}

/* --- El titulo del producto, mas pequeño en MOVIL (16/09/2026, peticion del
 *     cliente) ---
 *
 * Estaba a **28,8 px**, que es el tamaño de escritorio sin adaptar: los nombres
 * de esta tienda son larguisimos —«ESCAPE TRASERO HARLEY DAVIDSON ULTRA CLASIC,
 * ELECTRA GLIDE, ROAD KING, FLT, FLHT, FLHR, FLHX, FLTR 99-16 (2 SILENCIOSOS)»—
 * y a ese cuerpo se comian media pantalla antes del precio.
 *
 * 22 px con interlineado 1,25: sigue siendo lo mas grande de la pagina —el
 * precio va a 17— y deja de competir con la foto.
 *
 * **EL `!important` NO ES CAPRICHO**: el tamaño lo fija el tema con
 * `.h1`/`.product-title` y hay ademas reglas en linea por tramos. Se comprueba
 * midiendo, no leyendo.
 *
 * Solo por debajo de 992 px: en escritorio el titulo vive en una columna de
 * 678 px y ahi 28,8 esta bien. */
@media (max-width: 991px) {
    body#product h1.product-title {
        font-size: 22px !important;
        line-height: 1.25 !important;
    }
}

/* ------------------------------------------------------------------ */
/*  MARCA ENCIMA DEL NOMBRE, Y SIN ETIQUETAS                           */
/*  (16/09/2026, peticion del cliente)                                 */
/* ------------------------------------------------------------------ */
/* La marca pasa a ser el ANTETITULO de la ficha: pequeña, en mayusculas y
 * separada del nombre. Asi se lee «Turbo Kit» y debajo el producto, que es el
 * orden de cualquier ficha al uso.
 *
 * **EN MAYUSCULAS POR CSS, no en el dato**: los nombres de marca vienen de
 * `manufacturer.name` y se pintan tambien en el listado, en `/marcas` y en el
 * JSON-LD. Aqui es una decision de COMO SE PINTA.
 *
 * **NEGRO EXPLICITO, no `inherit`**: en un enlace, lo heredado es el morado del
 * tema. Es la trampa que ya mordio en la portada, en el menu movil, en el menu
 * de escritorio y en el separador de los complementos. */
body#product .s4b-marca {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

body#product .s4b-marca a {
    color: #1a1a1a;
    text-decoration: none;
}

body#product .s4b-marca a:hover {
    color: #ff0123;
}

/* La referencia se queda, pero como dato secundario: sin etiqueta delante ya no
   necesita competir con nada. */
body#product .product-reference {
    margin: 6px 0 0;
    font-size: 13px;
    color: #6b6b6b;
}

/* --- Barra de recorrido de «Productos relacionados» (solo movil) ---
 * La construye `producto.js`. Misma linea que los carruseles de la portada:
 * 2 px, guia gris y tramo recorrido en negro.
 * **El gris no puede ser mas claro que #d5d5d5**: a 2 px de alto, sobre blanco,
 * deja de verse (medido en su dia en la portada). */
@media (max-width: 991px) {
    .s4b-relacionados-barra {
        position: relative;
        height: 2px;
        /* **SIN MARGENES LATERALES**: la barra es hermana del carrusel, asi que
           sin ellos mide exactamente lo mismo y los dos bordes coinciden. Con
           los 15 px que tenia al principio quedaba metida 22 px respecto a las
           fichas —medido— y se leia como otra cosa. */
        margin: 14px 0 0;
        background: #d5d5d5;
    }

    .s4b-relacionados-barra__tramo {
        position: absolute;
        top: 0;
        height: 2px;
        background: #1a1a1a;
        transition: left .25s ease;
    }
}

/* --- LA CAPA DE ZOOM TAMBIEN VA SOBRE GRIS ---
 * (16/09/2026, lo vio el cliente: «hay veces que falla y se ve el fondo blanco
 * del producto, por ejemplo cuando haces hover».)
 *
 * **NO ERA EL `multiply` FALLANDO, que es lo que parecia.** Al pasar el raton,
 * easyzoom monta ENCIMA una capa propia —`.easyzoom-flyout`, 678x542— con la
 * foto a tamaño completo, y esa capa nace con `background: #fff`. La imagen de
 * dentro si heredaba la mezcla, pero multiplicaba contra BLANCO, asi que el
 * blanco seguia blanco.
 * Se encontro porque el navegador no podia hacer hover: «.easyzoom-flyout
 * intercepts pointer events». El error decia el nombre del culpable.
 *
 * Con el mismo gris debajo, la foto ampliada se ve igual que la de reposo. */
body#product .easyzoom-flyout {
    background: #f4f4f4;
}

/* El cartelito de «Loading image» sale mientras carga la foto grande: sobre
   gris tambien, o parpadea un rectangulo blanco. */
body#product .easyzoom-notice {
    background: #f4f4f4;
}

/* ------------------------------------------------------------------ */
/*  LA FICHA TECNICA («Detalles del producto»)                         */
/*  (16/09/2026, peticion del cliente: «quitale el fondo y mejora el   */
/*   diseño de este bloque de informacion tecnica»)                    */
/* ------------------------------------------------------------------ */
/* LO QUE ESTABA MAL, MEDIDO Y NO OPINADO:
 *  - fondo beige `#f4f3f1` en `#tab-content` (lo que pidio el cliente);
 *  - **TODO el texto de la tabla en MORADO `rgb(82,21,65)`** — el color de
 *    enlace del tema. **Sexta vez que ese morado aparece donde no toca**; en un
 *    `dl` se hereda hasta las `dt` y las `dd` sin que nadie declare un color;
 *  - las filas eran **cajas grises sueltas de 41 px**, que se leen como botones
 *    y no como una tabla;
 *  - etiqueta y valor con **el mismo color, el mismo fondo y el mismo peso**:
 *    nada distinguia el dato del nombre del dato;
 *  - **columnas de 644 px cada una** en un contenedor de 1.313, o sea media
 *    pantalla para escribir «Ciclo» y el valor a 654 px de su etiqueta;
 *  - los subtitulos iban a 15px/400, **mas ligeros que las propias filas**
 *    (14px/500), asi que no se leian como titulos.
 *
 * SOLO CSS: no se toca `product-details.tpl`, que es plantilla del nucleo.
 * VUELTA ATRAS: borrar este bloque. */

/* 1 · FUERA EL FONDO. Con esto la ficha entera queda en blanco de arriba
       abajo, como el resto de la tienda.
       **HACE FALTA `!important`, y es la quinta vez en esta misma ficha:** el
       beige lo pone un `<style>` EN LINEA —`.tabs .tab-content { background:
       #f4f3f1 !important }`— y un `!important` gana a cualquier selector que
       no lo lleve. Entre dos, desempata la especificidad: aqui van dos ids
       contra dos clases. **Sintoma que lo delato: todo lo demas del bloque se
       aplico a la primera y solo el fondo se quedo igual.** */
body#product #tab-content {
    background: transparent !important;
    padding: 24px 0 0;
    /* **Y FUERA EL RECUADRO** (17/09/2026, peticion del cliente: «quita el
       borde general de esta seccion»). Era `1px solid #ebebeb` en los CUATRO
       lados. Al quitarle el fondo ayer, ese marco se quedo dibujando una caja
       alrededor de nada — el mismo recorrido que la portada el 14/09 y que la
       columna de compra: sin fondo, el borde deja de delimitar y pasa a ser
       ruido.
       **Las lineas de las filas de la ficha tecnica NO se tocan**: son el
       `border-bottom` de `dt`/`dd` y son lo unico que ordena la tabla ahora
       que no hay ni fondo ni cajas. */
    border: 0;
}

/* EL MORADO SE HEREDA EN LOS CONTENEDORES, no solo en el texto. Aunque hoy
   `dt` y `dd` ya llevan color propio, `section`, `dl` y `.product-out-of-stock`
   siguen en `rgb(82,21,65)`: el dia que ahi caiga un texto suelto —el aviso de
   «sin stock», por ejemplo— saldria morado sin que nadie lo decida. */
body#product #product-details,
body#product #product-details .product-features,
body#product #product-details .data-sheet,
body#product #product-details .product-manufacturer,
body#product #product-details .product-out-of-stock {
    color: #1a1a1a;
}

/* 2 · LOS SUBTITULOS PESAN MAS QUE LO QUE ENCABEZAN. El `text-transform`
       tiene que ir explicito: el tema capitaliza los encabezados y en
       castellano eso escribe mal («Ficha Técnica»). */
body#product #product-details .product-features > .h6 {
    margin: 0 0 12px;
    color: #1a1a1a;
    font-size: 16px;
    font-weight: 700;
    text-transform: none;
}

/* Las dos secciones («Ficha técnica» y «Referencias específicas») necesitan
   aire entre ellas ahora que no hay cajas que las delimiten. */
body#product #product-details .product-features + .product-features {
    margin-top: 30px;
}

/* TODO EL BLOQUE EN EL MISMO EJE. `section.product-features` traia 5 px de
   relleno propio, asi que el logo y la referencia arrancaban en x=26 y la
   tabla en x=31: cinco pixeles de desfase **entre elementos del mismo
   bloque**, que es de lo que se nota aunque no se sepa por que. Medido, no
   calculado. */
body#product #product-details .product-features {
    padding-left: 0;
    padding-right: 0;
}

/* 3 · LA TABLA DE VERDAD.
       **REJILLA EN EL `<dl>`, no anchos en los hijos.** Asi la columna de la
       etiqueta mide lo mismo en todas las filas por construccion, sin tener
       que acertar un porcentaje. `minmax(0, 1fr)` y no `1fr`: con `1fr` un
       valor largo —«125-140-150-160-170-175-180-200»— ensancha la columna y
       descuadra la tabla; es la misma trampa que ya mordio en la cabecera y en
       la pagina de acceso.
       **El ancho se acota a 720 px**: una ficha tecnica no necesita 1.313, y a
       ese ancho el ojo tiene que viajar de la etiqueta al dato. */
body#product #product-details .data-sheet {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    max-width: 720px;
    margin: 0;
}

/* `width: auto` NO es decorativo: el tema le da un ancho propio a `dt` y `dd`
   (644 px medidos), y dentro de una rejilla eso desborda la celda. */
body#product #product-details .data-sheet .name,
body#product #product-details .data-sheet .value {
    width: auto;
    margin: 0;
    padding: 11px 0;
    background: none;
    border-bottom: 1px solid #e3e3e3;
    font-size: 14px;
    line-height: 1.45;
}

body#product #product-details .data-sheet .name {
    color: #6b6b6b;      /* 5,7:1 sobre blanco */
    font-weight: 400;
    padding-right: 16px;
    /* **EL TEMA CAPITALIZA Y EN CASTELLANO ESO ESCRIBE MAL.** El dato de la
       base de datos dice «Marca compatible» y en pantalla salia «Marca
       Compatible». No se ve leyendo la plantilla: lo estropea el CSS al
       pintar. Es la misma correccion que ya hizo falta en los `<h1>`, en los
       botones y en el titulo de los cruzados. */
    text-transform: none;
}

body#product #product-details .data-sheet .value {
    color: #1a1a1a;
    font-weight: 600;    /* el DATO es lo que se viene a leer */
}

/* «Referencias específicas» SON SIGLAS, y ahi el `capitalize` tapaba el
   problema: el dato de la base de datos dice `ean13`, el tema lo pintaba
   «Ean13» y al quitarle el `capitalize` se quedo en «ean13», que se lee como
   un descuido. Esa seccion solo contiene EAN13, UPC, ISBN y MPN — las cuatro
   siglas—, asi que van en mayusculas.
   **LIMITACION CONOCIDA:** se identifica como «la segunda seccion», porque no
   tiene clase propia que la distinga de la ficha tecnica. En un producto SIN
   caracteristicas seria la primera y volveria a salir «ean13». No se ha visto
   ninguno asi, pero si aparece, ese es el motivo. */
body#product #product-details .product-features + .product-features .data-sheet .name {
    text-transform: uppercase;
}

/* 4 · LA REFERENCIA, con la misma jerarquia que la tabla. Estaba al reves:
       la palabra «Referencia» a 16px y el codigo —que es el dato— a 13 en
       gris. Se queda aqui ademas de bajo el titulo: decision del cliente del
       16/09/2026. */
body#product #product-details .product-reference {
    margin: 0 0 22px;
    color: #1a1a1a;
    font-size: 14px;
}

body#product #product-details .product-reference .label {
    margin: 0 8px 0 0;
    color: #6b6b6b;
    font-size: 14px;
    font-weight: 400;
}

body#product #product-details .product-reference span {
    color: #1a1a1a;
    font-size: 14px;
    font-weight: 600;
}

/* 5 · EL LOGO DE MARCA, SIN RECUADRO. Es un `.img-thumbnail` de Bootstrap, o
       sea borde, relleno y fondo blanco — un marco que sobre blanco no
       delimita nada. Ademas la marca ya sale como antetitulo sobre el nombre
       del producto, asi que aqui basta el logotipo. */
body#product #product-details .product-manufacturer .img-thumbnail {
    padding: 0;
    border: 0;
    background: none;
}

body#product #product-details .product-manufacturer {
    margin: 0 0 18px;
}

/* 6 · EN MOVIL, ETIQUETA ENCIMA DEL VALOR. A 390 px una columna de 240 mas el
       valor no cabe en una linea, y el valor se partiria en tres. La linea la
       lleva entonces SOLO el valor, que es quien cierra la fila — dejandola en
       los dos se veria una raya por cada media fila. */
@media (max-width: 767px) {
    body#product #product-details .data-sheet {
        grid-template-columns: minmax(0, 1fr);
    }

    body#product #product-details .data-sheet .name {
        padding: 10px 0 0;
        border-bottom: 0;
        font-size: 13px;
    }

    body#product #product-details .data-sheet .value {
        padding: 1px 0 10px;
    }
}

/* ------------------------------------------------------------------ */
/*  REFERENCIA Y «DISPONIBLE», EN LA MISMA LINEA (17/09/2026)          */
/* ------------------------------------------------------------------ */
/* Peticion del cliente. La fila la construye `producto.js`; aqui solo se
   maqueta. `align-items: baseline` y no `center`: los dos son texto y lo que
   tiene que cuadrar es el renglon, no la caja —el bloque de stock trae un
   icono que lo hace mas alto y con `center` la referencia quedaba un pelo
   levantada—. */
body#product .s4b-ref-linea {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;   /* red de seguridad: con una referencia larga en movil,
                          «Disponible» baja de linea en vez de desbordar */
    gap: 6px 14px;
}

/* Los dos pierden su margen propio: dentro de la fila lo pone el `gap`, y
   sumarlos dejaba el hueco desigual segun quien llegara primero. */
body#product .s4b-ref-linea .product-reference,
body#product .s4b-ref-linea #product-availability {
    margin: 0;
}

/* El bloque de stock venia con `margin-top` para despegarse del boton, que era
   su sitio anterior. Aqui estorba. */
body#product .s4b-ref-linea #product-availability {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 13px;   /* el mismo cuerpo que la referencia */
}

/* ------------------------------------------------------------------ */
/*  LA LINEA HUERFANA DEBAJO DE «DISPONIBLE» (17/09/2026)              */
/* ------------------------------------------------------------------ */
/* **ERA UN CONTENEDOR VACIO QUE SOLO APORTABA SU BORDE**, y lo dejamos
 * nosotros: `.product-additional-info` es el hueco donde vivian los botones de
 * compartir, retirados el 16/09/2026 al desactivar `ps_sharebuttons`. Sin
 * contenido seguia ocupando **21 px y pintando un `border-top`** que ya no
 * separaba nada de nada. Lo vio el cliente.
 *
 * **NO SE PUEDE USAR `:empty`, y se comprobo en el navegador**: dentro quedan
 * DOS nodos de texto con los saltos de linea que deja Smarty al no pintar sus
 * `{if}`, asi que el selector no casa. Es la trampa clasica de `:empty` — un
 * div «vacio» casi nunca lo esta para el CSS.
 *
 * **CONTRAPARTIDA, y hay que tenerla presente:** al ser incondicional, el dia
 * que un modulo se enganche a `displayProductAdditionalInfo` **no se vera y no
 * dara ningun error**. Ese gancho es el mismo por el que entran el aviso de
 * plazo de entrega y el boletin, asi que si alguno deja de verse, mirar aqui
 * primero. */
/* 13/10/2026: SE OCULTA SALVO QUE LLEVE EL AVISO DE «VUELVE A ESTAR
 * DISPONIBLE» (ps_emailalerts), que entra por ese mismo gancho y solo se pinta
 * cuando el producto no se puede pedir. Sin esta excepcion, una ficha agotada
 * no dejaria ni comprar ni apuntarse. */
body#product .product-additional-info:not(:has(.js-mailalert)) {
    display: none;
}
body#product .product-additional-info:has(.js-mailalert) {
    border-top: 0;
    padding-top: 0;
    margin-top: 16px;
}

/* El aviso: caja gris como el resto de la ficha. Campo y boton son hijos
 * directos de .js-mailalert (lo exige el JS del modulo), asi que la fila la
 * hace la rejilla y no una caja intermedia. */
body#product .s4b-aviso .js-mailalert {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 18px 18px 16px;
    background: #f4f4f4;
    text-align: left;
}
body#product .s4b-aviso .js-mailalert > :not(input):not(button) {
    grid-column: 1 / -1;
}
body#product .s4b-aviso__titulo {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
}
body#product .s4b-aviso__texto {
    margin: 0 0 4px;
    font-size: 14px;
    color: #4a4a4a;
}
body#product .s4b-aviso .js-mailalert > input[type=email] {
    min-height: 48px;
    margin: 0;
    border: 1px solid #d5d5d5;
    background: #fff;
    font-size: 16px;
}
body#product .s4b-aviso .js-mailalert > .js-mailalert-add {
    min-height: 48px;
    margin: 0;
    padding: 0 22px;
    border: 0 !important;
    box-shadow: none !important;
    background: #1a1a1a !important;
    color: #fff;
    font-weight: 700;
    text-transform: none;
}
body#product .s4b-aviso .js-mailalert > .js-mailalert-add:hover,
body#product .s4b-aviso .js-mailalert > .js-mailalert-add:focus-visible {
    background: #3a3a3a !important;
}
body#product .s4b-aviso .js-mailalert > .js-mailalert-add:disabled {
    background: #9a9a9a !important;
}
/* Con sesion iniciada no hay campo: el boton ocupa la fila. */
body#product .s4b-aviso .js-mailalert:not(:has(> input)) > button {
    grid-column: 1 / -1;
}
body#product .s4b-aviso .gdpr_consent_wrapper,
body#product .s4b-aviso .gdpr_consent_wrapper label {
    font-size: 12px;
    color: #4a4a4a;
    text-align: left;
}
body#product .s4b-aviso__ok {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #1a7f37;
}

/* ==========================================================================
   LA MOTO CON EL ESCAPE MONTADO (19/09/2026, idea del cliente).

   **ESTE `figure` NO SE PINTA EN NINGUNA PANTALLA, Y NO SE BORRA: ES LA FUENTE
   DE DATOS.** `producto.js` lee de aqui la foto y el nombre de la moto para
   construir la segunda lamina de la galeria (bloque siguiente). Si se quita del
   marcado, la lamina desaparece de las dos pantallas.
   Lo pinta `override/controllers/front/ProductController.php`.

   POR QUE DEJO DE VERSE EN ESCRITORIO (20/09/2026, lo vio el cliente: «en pc no
   queda nada bien; en mobile si»). Estaba debajo de la galeria «en el hueco que
   deja la columna izquierda», y al medirlo ese hueco **no existia**:

     foto del producto (galeria) ... 678 x 532
     foto de la moto .............. 678 x 543   <- la mas grande de la ficha
     hueco real que rellenaba ..... 15 px
     lo que alargaba la pagina .... +561 px

   O sea que la imagen mas grande de la ficha no era el producto que se vende, y
   colgaba sola al final de la columna con el precio ya fuera de pantalla: se
   leia como un segundo producto. **Lo que decian estas notas —«no empuja nada:
   rellena»— era falso.**

   Vuelta atras: devolver aqui el bloque `@media (min-width: 992px)` con
   `display: block`, `padding: 14px` y `background: #f4f4f4`, y quitar el
   `display: none` de `.s4b-galmoto` de abajo.
   ========================================================================== */
.s4b-moto {
    display: none;
}

/* ==========================================================================
   LA MOTO COMO SEGUNDA LAMINA DE LA GALERIA (19/09/2026).
   EN LAS DOS PANTALLAS desde el 20/09/2026 — ver el bloque de arriba.
   Lo monta `producto.js`; aqui solo el aspecto.

   **YA NO HAY MEDIA QUERY, y no hizo falta cambiar ni una declaracion**: la
   estructura de la galeria es identica en las dos pantallas (`.product-cover`
   con una sola `.cover-item`), asi que las mismas reglas valen tal cual.

   EL ZOOM DE ESCRITORIO SOBREVIVE, comprobado en produccion antes de tocar
   nada: `easyzoom` vive DENTRO de la primera `.cover-item` —asi que la moto no
   lo hereda— y su `.easyzoom-flyout` queda **10 px por dentro** de la caja
   pese al `overflow-x`, sin recortarse ni mover el desplazamiento.

   **EN ESCRITORIO LAS MINIATURAS NO SON UN ADORNO, SON LA UNICA FORMA DE
   PASAR.** Con el raton no se desliza y la barra va oculta; en movil se pasa
   con el dedo. Si algun dia se quitan, en PC la moto queda inalcanzable.

   Vuelta atras: borrar este bloque y el de producto.js.
   ========================================================================== */
/* El carrusel lo hace el NAVEGADOR, no una libreria: es lo mismo que la
   portada y evita volver a montar slick, que se desmonta a proposito. */
.product-cover.s4b-galmoto {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.product-cover.s4b-galmoto::-webkit-scrollbar { display: none; }

/* `0 0 100%` con `min-width: 0`: sin esto las dos laminas se encogen a la
   mitad y se ven las dos a la vez, que es justo lo contrario. */
.product-cover.s4b-galmoto > .cover-item {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
}

.s4b-galmoto__lamina {
    position: relative;
    background: #f4f4f4;
}

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

/* EL ROTULO NO ES DECORACION: dice que esa foto es la MOTO y no el producto.
   Si se quita, la lamina afirma algo que no podemos comprobar.

   PEGADO DEBAJO DE LA FOTO Y OPACO (19/09/2026, peticion del cliente).
   Nacio superpuesto sobre la imagen con `rgba(26,26,26,.78)`; ahora va fuera
   de la foto, en bloque y con negro macizo.
   **`position: static` es lo que lo saca del flujo superpuesto** — sin eso,
   cambiar solo el color lo dejaria encima igual.
   Contrapartida asumida: esta lamina pasa a ser mas alta que la del producto,
   asi que la del producto queda con la franja gris debajo. Es preferible a
   tapar la moto. */
.s4b-galmoto__rotulo {
    position: static;
    display: block;
    margin: 0;
    padding: 8px 10px;
    background: #1a1a1a;
    color: #fff;
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
}

.s4b-galmoto__tira {
    display: flex;
    gap: 8px;
    margin: 8px 0 0;
}

.s4b-galmoto__mini {
    flex: 0 0 56px;
    height: 56px;
    padding: 3px;
    border: 1px solid #e3e3e3;
    background: #f4f4f4;
    cursor: pointer;
}

.s4b-galmoto__mini.es-activa { border-color: #1a1a1a; }

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

/* === LAMINA DEL VIDEO CON EL SONIDO DEL ESCAPE (29/09/2026) ===============
   La monta `producto.js` a partir de `.s4b-motovideo`. Vuelta atras: quitar
   el `figure` de product_layout1.tpl (o vaciar motos-videos.json).

   FONDO OSCURO, NO EL GRIS DE IMAGEN: aqui no hay foto recortada sobre blanco
   que mezclar con `multiply`; es video, y las bandas de un video vertical en
   una caja apaisada se leen mejor en negro que en gris.
   `aspect-ratio: 4/3` y `object-fit: contain`: los videos llegan verticales
   (movil) y apaisados; asi la lamina mide lo mismo sea cual sea, cabe entera
   y nada se recorta. */
.s4b-galmoto__lamina--video {
    background: #111;
}

.s4b-galmoto__video {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: #111;
}

/* La miniatura del video lleva un triangulo de «reproducir»: sin el, entre
   dos fotos parece una tercera foto y nadie sabe que ahi hay sonido. */
.s4b-galmoto__mini--video {
    position: relative;
}

.s4b-galmoto__mini--video img {
    mix-blend-mode: normal;
    object-fit: cover;
}

.s4b-galmoto__mini--video::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    margin: -8px 0 0 -5px;
    border-style: solid;
    border-width: 8px 0 8px 13px;
    border-color: transparent transparent transparent #fff;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, .7));
}

/* === LAS LAMINAS EXTRA RELLENAN EL ALTO DE LA DEL PRODUCTO (29/09/2026, lo
   vio el cliente: «se ve desajustada la imagen de la moto»).
   El carrusel es flex y estira todas las laminas a la MAS ALTA. Al llegar el
   video (4:3 + rotulo = 313 px a 390), la foto de la moto —apaisada, 211 px—
   se quedaba con 70 px de gris vacio bajo el rotulo.
   Ahora la foto y el video son `flex: 1 1 0` dentro de su lamina: no aportan
   altura propia, asi que el alto lo marca SIEMPRE la foto del producto, y
   ellos rellenan ese hueco con `object-fit: contain` (se ve entero, centrado,
   sin recortar). El rotulo queda pegado abajo. Vale para cualquier
   proporcion de foto o de video sin tocar numeros. */
.product-cover.s4b-galmoto > .s4b-galmoto__lamina {
    display: flex;
    flex-direction: column;
}

.product-cover.s4b-galmoto .s4b-galmoto__img,
.product-cover.s4b-galmoto .s4b-galmoto__video {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
}

.product-cover.s4b-galmoto .s4b-galmoto__rotulo {
    flex: 0 0 auto;
}

/* === Y EL `flex` NO SE APLICABA, NI AHORA NI DESDE EL 20/09 ===
   El carrusel de la foto se desmonta a proposito (`unslick`), pero el
   contenedor CONSERVA la clase `slick-block` sin `slick-initialized`, y para
   ese caso el tema fuerza `display: block !important` en el contenedor e
   `inline-block !important` en sus hijos
   (`.slick-block:not(.slick-initialized) > *`, en theme-<hash>.css). O sea que
   la galeria funcionaba con laminas EN LINEA, cada una de su alto, y todo lo
   que dependia de `flex` —igualar alturas, rellenar— no hacia nada.
   Se gana con `!important` + mas especificidad (un id delante). Se encontro
   enumerando `document.styleSheets`: leyendo producto.css parecia aplicado. */
body#product .product-cover.s4b-galmoto {
    display: flex !important;
    align-items: stretch;
}

body#product .product-cover.s4b-galmoto > .cover-item {
    display: block !important;
}

body#product .product-cover.s4b-galmoto > .s4b-galmoto__lamina {
    display: flex !important;
}