/* =============================================================================
 * Store4Bike · Esquinas rectas en toda la tienda
 * -----------------------------------------------------------------------------
 * Anula todos los border-radius del sitio. Se hace con una hoja aparte y no
 * editando el CSS del tema porque:
 *   1. El paquete del tema (theme-*.css) es GENERADO: cualquier edición se
 *      pierde en la siguiente recompilación.
 *   2. Parte del CSS no está en ficheros, sino en la base de datos (Creative
 *      Elements lo inyecta en un <style> dentro del <head>). Una hoja de
 *      anulación cubre las dos procedencias a la vez.
 *
 * SOBRE LA ESPECIFICIDAD (esto es lo delicado):
 * Creative Elements tiene 6 reglas de border-radius con !important. Entre dos
 * declaraciones !important NO gana la última: gana la de mayor especificidad, y
 * solo si empatan decide el orden. Un selector `*` tiene especificidad cero y
 * perdería contra `.block-onepagecheckout`. Por eso las anulaciones concretas
 * llevan `html body` delante: así superan a las suyas pase lo que pase, sin
 * depender de dónde acabe cargándose este fichero.
 *
 * Medido el 09/09/2026: 263 declaraciones en el paquete del tema y 58 en los
 * bloques de Creative Elements.
 * ============================================================================= */

/* --- 1. Barrido general ---------------------------------------------------- */
*,
*::before,
*::after {
  border-radius: 0 !important;
}

/* --- 2. Las que llevan !important en Creative Elements --------------------
   Hay que igualar o superar su especificidad. Selectores tomados del bloque
   real inyectado en el <head>, no inventados. */
html body .block-onepagecheckout,
html body .block-onepagecheckout input.form-control,
html body .block-onepagecheckout select.form-control,
html body .block-onepagecheckout textarea.form-control,
html body #form_ets_onepagecheckout .block-promo .promo-input,
html body #form_ets_onepagecheckout .btn-primary,
html body .highlight-right {
  border-radius: 0 !important;
}

/* --- 3. ÚNICA EXCEPCIÓN: los radio buttons siguen redondos -----------------
   No es estética: es una convención de interfaz. Un radio cuadrado es
   indistinguible de una casilla de verificación, y el cliente pierde la pista
   de si puede elegir una opción o varias. Pasa en el proceso de compra, que es
   justo donde no conviene generar dudas.
   Si se quiere cuadrar también, basta con borrar este bloque. */
html body input[type="radio"],
html body input[type="radio"]::before,
html body input[type="radio"]::after,
html body .custom-radio,
html body .custom-radio *,
html body .onepagecheckout-left .custom-radio,
html body .onepagecheckout-left .custom-radio * {
  border-radius: 50% !important;
}

/* ================================================================== */
/*  EL COLOR DE `:hover` DEL TEMA, DE VERDE A ROJO (13/09/2026)         */
/* ================================================================== */
/* El tema pinta en VERDE `#056630` todo lo que se señala con el raton: enlaces,
 * titulos de producto, iconos, migas... Son **169 reglas** en `theme.css`, y no
 * hay que tocar ni una: todas leen la variable `--hovercolor`, declarada en
 * `:root`. Basta con volver a declararla.
 *
 * SE HACE AQUI Y NO EN `theme.css`: ese fichero es GENERADO y se pierde al
 * recompilar el tema. Esta hoja se carga despues, asi que gana.
 *
 * EL ROJO ES `#ff0123`, el mismo de los precios, no un rojo nuevo. Merece
 * saberse que sobre blanco da **3,98:1**, por debajo del 4,5 que pide la WCAG
 * para texto normal — pero es un estado de PASO y el color de reposo si cumple.
 * Si alguna vez se quiere que tambien cumpla al señalar, el rojo es `#d9001d`
 * (5,29:1), que ya esta en la paleta como el de la franja de avisos. */
:root {
    --hovercolor: #ff0123;
}

/* Y UNA SEGUNDA REGLA, porque el tema NO usa la variable en todas partes: el
 * nombre de producto de la miniatura trae el verde ESCRITO A PELO. Se enumeraron
 * todas las hojas del documento desde el navegador buscando `#056630` y
 * `rgb(5,102,48)`: salen exactamente DOS sitios, la variable y esta. O sea que
 * con estas dos declaraciones no queda verde en el sitio.
 *
 * Buscar el verde en `assets/css/theme.css` NO LO ENCUENTRA: ahi hay cero
 * apariciones. Vive en el paquete generado `theme-<hash>.css`, que ademas cambia
 * de nombre. Hay que mirar `document.styleSheets`, no los ficheros.
 *
 * `body` delante para ganar en especificidad sin depender del orden de carga. */
body .js-product-miniature .product_desc .product_name:hover {
    color: #ff0123;
}

/* ================================================================== */
/*  EL PRECIO, EN NEGRO EN TODA LA WEB (13/09/2026)                    */
/* ================================================================== */
/* Estaba en el rojo de la marca `#ff0123`.
 *
 * DONDE ESTABA EL ROJO, enumerado desde el navegador y no adivinado:
 *   · `.price` — el precio de la miniatura, o sea listados, portada, bloques de
 *     producto y los listados que salen dentro de la ficha;
 *   · `.price-abs-u-b-tog.abs-currency` — los precios del modulo de «comprados
 *     juntos», que tiene los suyos propios.
 * **El precio principal de la ficha YA estaba en negro**, asi que lo que se
 * corrige es la incoherencia: el mismo producto tenia el precio rojo en el
 * listado y negro en su ficha.
 *
 * HACE FALTA `!important`, y no por gusto: el rojo lo pone un `<style>` EN
 * LINEA con `!important` sobre `.product-price-and-shipping .price`. Entre dos
 * `!important` gana el de mas especificidad, de ahi el `body` delante.
 *
 * NO SE TOCA `--hovercolor`: al señalar con el raton se sigue poniendo rojo, que
 * es lo que se pidio antes. Son dos cosas distintas aunque compartieran color. */
body .price,
body .js-product-miniature .price,
body .product-price-and-shipping .price,
body .price-abs-u-b-tog,
body .abs-currency {
    color: #1a1a1a !important;
}


/* ================================================================== */
/*  BOTON DE DESEOS: SIEMPRE VISIBLE, EN LA ESQUINA INFERIOR DERECHA   */
/*  EN TODA LA WEB (14/09/2026, peticion del cliente)                  */
/*                                                                     */
/*  Estaba solo en la portada, acotado a `.s4b-p-productos`. Aqui pasa */
/*  a `sin-radios.css`, que se carga en TODAS las paginas, asi que     */
/*  vale igual en categoria, marca, busqueda, novedades y rebajados.   */
/*                                                                     */
/*  POR QUE: el tema lo esconde con `opacity: 0; visibility: hidden` y */
/*  solo lo revela al pasar el raton. Un boton que hay que descubrir no */
/*  lo usa nadie, y **en tactil no hay hover**: en movil era            */
/*  literalmente inalcanzable.                                          */
/*                                                                     */
/*  EL SELECTOR LLEVA `[class*="style_product"]`, Y NO ES ADORNO.       */
/*  El tema esconde el boton con TRES clases                            */
/*  (`.js-product-miniature.style_product2 .add-to-links`) y CUATRO en  */
/*  el `li`. Con `body .js-product-miniature .add-to-links` —dos clases—*/
/*  **pierde**: en la portada funcionaba solo porque alli el selector   */
/*  llevaba ademas `.s4b-p-productos`. Se vio en el listado de          */
/*  categoria: el corazon salia OCULTO y 15 px por DEBAJO de la ficha.  */
/*  El atributo cuenta como una clase mas y ademas cubre las cinco      */
/*  variantes del tema (`style_product_default`, `1`, `2`, `3`, `4`)    */
/*  sin tener que enumerarlas.                                          */
/*                                                                      */
/*  LO QUE NO CUBRE: la VISTA DE LISTA del listado, que el tema ajusta  */
/*  con un selector de ID (`#js-product-list .product_content.list …`). */
/*  Ahi el corazon vuelve al flujo en vez de ir a la esquina. No queda  */
/*  roto —se ve y se pulsa— pero no es la esquina.                      */
/* ================================================================== */

/* `.add-to-links` PASA A `static` A PROPOSITO: siendo `absolute` era el bloque
   contenedor de sus hijos, asi que el corazon no podia anclarse a la FICHA,
   solo a el. Al volverla estatica, el `li` se ancla a `.js-product-miniature`,
   que el tema ya deja en `relative`. Alto 0 para que no empuje nada. */
body .js-product-miniature[class*="style_product"] .add-to-links {
    position: static;
    height: 0;
    margin: 0;
    padding: 0;
}

/* El `:not(.cart)` deja FUERA el boton de carrito, que vive en el mismo `<ul>`:
   aqui solo se toca el de deseos. */
body .js-product-miniature[class*="style_product"] .add-to-links > li:not(.cart) {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: auto;
    margin: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    z-index: 4;
}

/* SOLO EL ICONO. El corazon es un `::before` del `<a>` con la tipografia
   `roadthemes-icon`, asi que ocultar el `<span>` deja el icono intacto.
   **Se oculta EN LO VISUAL, no con `display: none`**: ese texto es lo unico que
   nombra el boton para un lector de pantalla.
   (Sigue en INGLES, «wishlist», y eso es de la traduccion del modulo.) */
body .js-product-miniature .addToWishlist span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

body .js-product-miniature .addToWishlist {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 32x32: por debajo de eso se falla con el dedo. Misma medida que los
       iconos de la cabecera. */
    width: 32px;
    height: 32px;
    color: #1a1a1a;
    background: #fff;
    line-height: 1;
}

body .js-product-miniature .addToWishlist::before {
    font-size: 18px;
    margin: 0;
}

body .js-product-miniature .addToWishlist:hover { color: var(--hovercolor); }

body .js-product-miniature .addToWishlist:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

/* ================================================================== */
/*  LA TARJETA DE PRODUCTO, IGUAL EN TODA LA WEB (14/09/2026,          */
/*  peticion del cliente): foto sobre fondo gris y ficha SIN BORDE.    */
/*                                                                     */
/*  Era el aspecto del listado de categoria —vivia en `listado.css`,   */
/*  acotado a `.s4b-listado__productos`— y ahora vale tambien en marca, */
/*  busqueda, novedades, rebajados y los destacados de la portada.     */
/*                                                                     */
/*  NO HACE FALTA `!important`: el borde lo ponen el paquete del tema   */
/*  (`.js-product-miniature`) y un `<style>` EN LINEA del modulo de CSS,*/
/*  los dos con UN SOLO selector de clase. El elemento `body` delante   */
/*  ya gana. (En `listado.css` si hay `!important`, pero es por otra    */
/*  razon: alli se pelea con las clases de columna de Bootstrap.)       */
/* ================================================================== */

body .js-product-miniature {
    border: 0;
    box-shadow: none;
}

/* LA TARJETA NO REACCIONA AL PASAR EL RATON (14/09/2026, peticion del cliente).
 * Ni salto, ni sombra, ni nada que aparezca. **Lo unico que cambia es el NOMBRE
 * del producto, que pasa a rojo**: es un enlace y necesita decir que se pulsa.
 *
 * Se enumeraron las reglas `:hover` que tocan la tarjeta desde el navegador
 * —no buscando en los ficheros, porque una parte vive en el paquete generado
 * `theme-<hash>.css` y otra en un `<style>` EN LINEA— y quedaban cuatro cosas:
 *   1. `transform: translateY(-3px)`  (en linea) — el salto;
 *   2. `box-shadow: 0 6px 16px`       (en linea) — la sombra. **Ojo: quitarla
 *      en la regla base NO basta**, porque la del `:hover` tiene mas
 *      especificidad y la repone;
 *   3. `transition: 300ms linear`     (tema) — lo que hacia que todo lo
 *      anterior se moviera en vez de cambiar de golpe;
 *   4. `.variant-links`, un panel de variantes que se desliza desde abajo.
 *
 * NO hubo que tocar la «Vista rapida»: se comprobo que mide **0x0**, asi que
 * no llega a verse nunca.
 *
 * EL `!important` DE LAS TRANSICIONES ES DELIBERADO. Es una regla de barrido
 * sobre los descendientes, y ahi la especificidad no se puede ganar una por una:
 * el tema tiene reglas de cuatro clases sobre elementos de dentro. */
body .js-product-miniature,
body .js-product-miniature * {
    transition: none !important;
}

body .js-product-miniature:hover {
    transform: none;
    box-shadow: none;
}

/* El panel de variantes tampoco asoma. Sigue oculto, como en reposo: mostrarlo
   siempre cambiaria la altura de la ficha, y esta tienda apenas tiene productos
   con combinaciones. */
body .js-product-miniature[class*="style_product"]:hover .product_desc .variant-links {
    visibility: hidden !important;
    opacity: 0 !important;
    bottom: auto !important;
}

/* La foto sobre gris claro y con aire. Los recambios son piezas fotografiadas
   sobre blanco: sin este gris no se recortan del fondo de la pagina. */
body .js-product-miniature .img_block {
    background: #f4f4f4;
    padding: 18px;
    margin-bottom: 12px;
    /* OBLIGATORIO DESDE QUE LA FOTO HACE ZOOM (14/09/2026): sin esto la imagen
       ampliada se sale del recuadro gris y se monta sobre el nombre y el precio
       de la ficha de al lado. Recorta en la caja de RELLENO, asi que la foto
       crece hacia los 18 px de aire y el gris nunca se queda sin margen. */
    overflow: hidden;
}

/* `mix-blend-mode: multiply` funde el blanco de la foto con el gris de la caja.
   Sin esto se ve un RECTANGULO BLANCO dentro del gris, porque las fotos vienen
   recortadas sobre blanco. Y hay que quitar ademas el fondo propio que el tema
   le pone a la <img> en algunos listados (#f8f8f8), o el recorte sigue ahi. */
body .js-product-miniature .img_block img {
    background: transparent;
    mix-blend-mode: multiply;
}

/* ================================================================== */
/*  ZOOM SUAVE DE LA FOTO AL PASAR EL RATON (14/09/2026, peticion del  */
/*  cliente). Es la UNICA excepcion al bloque de arriba: la ficha sigue */
/*  sin saltar, sin sombra y sin paneles que asomen — lo unico que se   */
/*  mueve es la imagen, dentro de su recuadro gris.                     */
/*                                                                      */
/*  EL `!important` DE LA TRANSICION NO ES OPCIONAL: dos reglas mas     */
/*  arriba hay `body .js-product-miniature * { transition: none         */
/*  !important }`, un barrido sobre TODOS los descendientes. Sin        */
/*  `!important` aqui, el zoom se aplicaria de golpe, sin animar, y     */
/*  pareceria un parpadeo en vez de un acercamiento.                    */
/* ================================================================== */
body .js-product-miniature .img_block img {
    transition: transform .35s ease !important;
}

body .js-product-miniature:hover .img_block img,
body .js-product-miniature:focus-within .img_block img {
    transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
    body .js-product-miniature .img_block img,
    body .js-product-miniature:hover .img_block img {
        transition: none !important;
        transform: none;
    }
}

/* El texto alinea con la caja de la foto. El relleno horizontal es del tema
   (`12px 14px`); se quita SOLO el de los lados — el vertical separa el texto de
   la foto y hace falta. */
body .js-product-miniature .product_desc {
    padding-left: 0;
    padding-right: 0;
}

/* ================================================================== */
/*  BOTON DE AÑADIR AL CARRITO EN LA TARJETA (15/09/2026)              */
/* ================================================================== */
/* Peticion del cliente: que al pasar el raton aparezca el boton de añadir.
 * Tiene sentido ahora y no antes porque el mismo dia se monto el cajon lateral
 * del carrito: al pulsar, se abre el cajon y **no se sale del listado**.
 *
 * NO HUBO QUE CONSTRUIR NADA: el boton YA ESTA en la tarjeta, dentro de un
 * `<form class="add-to-cart-or-refresh">` con su `type="submit"` y su token.
 * El tema simplemente lo dejaba en `display: none`. Aqui solo se enseña, asi
 * que el AJAX, el stock y las combinaciones los sigue manejando PrestaShop.
 *
 * SOLO EN ESCRITORIO (decision del cliente). En movil la tarjeta se queda
 * **exactamente como esta**: se compra desde la ficha, que ya tiene su barra de
 * compra fija. `hover: hover` ademas deja fuera los portatiles tactiles y los
 * hibridos, donde un boton que solo aparece al pasar el raton no aparece nunca.
 *
 * ES UNA EXCEPCION DELIBERADA A «LA TARJETA NO REACCIONA AL PASAR EL RATON»
 * (decision del cliente del 14/09). Lo que sigue apagado es todo lo demas: ni
 * salto, ni sombra, ni el panel de variantes. Se mueve la foto (zoom) y aparece
 * este boton, nada mas.
 */
@media (hover: hover) and (min-width: 992px) {

    /* EL ANCLAJE SE MIDE DESDE `.inner_desc`, QUE ES LA CAJA DE REFERENCIA REAL.
     *
     * **NO ES LA TARJETA, aunque lo parezca.** `.js-product-miniature` es
     * `relative`, pero entre medias el tema deja `.inner_desc` tambien en
     * `relative`, y el bloque contenedor de un elemento absoluto es **el
     * ancestro posicionado MAS CERCANO**. Comprobado con `offsetParent`: es
     * `DIV.inner_desc`. (El corazon se ancla ahi tambien; la nota que decia que
     * iba contra la tarjeta estaba equivocada.)
     *
     * Por eso el primer intento —`bottom: 138px`, calculado contra la tarjeta—
     * caia **22 px por encima del pie de la foto** en vez de a ras, y el
     * cliente lo vio: «en los listings la franja aparece mas arriba».
     *
     * `bottom: 100%` deja el pie de la franja justo en el TECHO de
     * `.inner_desc`. De ahi al pie de la foto hay dos constantes nuestras:
     *   12 px del `margin-bottom` de `.img_block`
     * + 12 px del `padding` vertical de `.product_desc`
     * = **24 px**, y por eso el `calc`. **Si se toca cualquiera de esos dos
     * valores, hay que tocar este.**
     *
     * Asi la franja queda a ras del pie de la foto **independientemente del
     * alto de la tarjeta y del texto**, que es lo que fallaba al medir desde
     * abajo. */
    body .js-product-miniature[class*="style_product"] .add-to-links > li.cart {
        position: absolute;
        /* A RAS DE LA FOTO POR LOS DOS LADOS: la franja mide exactamente lo que
           el recuadro gris, que es lo que hace que «encaje». Con un margen
           lateral quedaba una franja flotando dentro de la foto y se leia como
           descuadre. */
        left: 0;
        right: 0;
        bottom: calc(100% + 24px);
        /* **NO PONER `width` AQUI.** Con `left` + `right` + `width` a la vez,
           **gana el ancho** y los anclajes dejan de decidir: la franja medi­a
           los 312 px de la tarjeta pero empezando en x=10, o sea 10 px fuera
           por la derecha. Fue justo lo que vio el cliente. El ancho lo tienen
           que dar `left` y `right`. */
        margin: 0;
        z-index: 4;

        /* **SE OCULTA CON `opacity`, NO CON `visibility` NI `display`.** Un
           elemento con `visibility: hidden` no se puede enfocar, asi que quien
           navega con teclado no llegaria nunca al boton. Con opacidad 0 sigue
           en el arbol de foco y el `:focus-within` de abajo lo revela. Es el
           mismo patron de los enlaces de salto.
           `pointer-events: none` mientras esta invisible: sin eso taparia el
           enlace de la foto y el raton no podria pulsar el producto. */
        opacity: 0;
        pointer-events: none;

        /* El `!important` es obligatorio: mas arriba hay un barrido
           `body .js-product-miniature * { transition: none !important }` que
           alcanza a este boton. Sin el, aparece de golpe. Misma pelea que el
           zoom de la foto. */
        transition: opacity .18s ease !important;
    }

    body .js-product-miniature[class*="style_product"]:hover .add-to-links > li.cart,
    body .js-product-miniature[class*="style_product"] .add-to-links > li.cart:focus-within {
        opacity: 1;
        pointer-events: auto;
    }

    /* Las capas que el modulo mete entre el `li` y el boton (`div` y `form`)
       vienen en linea o con anchos del tema: hay que estirarlas o el boton se
       queda del ancho de su texto y descentrado.
       **EL `li` NO ENTRA EN ESTA LISTA**: el suyo lo deciden `left` y `right`,
       y darle ademas `width: 100%` es lo que lo sacaba de la tarjeta. */
    body .js-product-miniature[class*="style_product"] .add-to-links > li.cart .product-add-to-cart,
    body .js-product-miniature[class*="style_product"] .add-to-links > li.cart form {
        display: block;
        width: 100%;
    }

    /* NEGRO SOBRE LA FOTO GRIS, como el resto de botones de la tienda (el de
       «Finalizar compra» del cajon, la franja de «Todos X» del menu). Blanco
       sobre `#1a1a1a` da 16,9:1.
     *
     * **EL `!important` DEL `display` ES OBLIGATORIO, y el selector lleva
     * `.ajax_add_to_cart_button` por lo mismo.** El tema esconde este boton con
     * `ul.add-to-links .ajax_add_to_cart_button { display: none !important }`,
     * y un `!important` vence a cualquier selector que no lo lleve por
     * especifico que sea — se probo sin el y la regla del `li` SI entraba
     * (position, bottom, opacity) mientras el boton seguia en `display: none`,
     * que es el sintoma que lo delata: media regla aplicada.
     * Ademas el color amarillo del tema lo pone un selector de cinco clases
     * (`.js-product-miniature.style_product2 .add-to-links li.cart
     * button.ajax_add_to_cart_button`), asi que aqui hay que igualarlo. */
    body .js-product-miniature[class*="style_product"] .add-to-links > li.cart button.ajax_add_to_cart_button,
    body .js-product-miniature[class*="style_product"] .add-to-links > li.cart button {
        /* **FLEX Y NO `block`, y esto se vio en pantalla.** El boton lleva un
           icono de carrito en un `::before` con la tipografia
           `roadthemes-icon`. Con `display: block` ese pseudoelemento cae en su
           propio renglon, el texto pasa al siguiente y **se corta por abajo**
           (scrollHeight 45 contra 40 de caja). En `flex` el icono y el texto
           comparten linea. */
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        min-height: 40px;      /* zona de pulsacion, el mismo suelo de siempre */
        padding: 10px 12px;
        border: 0;
        background: #1a1a1a;
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.2;
        cursor: pointer;
        text-transform: none;  /* el tema capitaliza y en castellano escribe mal */
        transition: background .18s ease !important;
    }

    body .js-product-miniature[class*="style_product"] .add-to-links > li.cart button.ajax_add_to_cart_button:hover,
    body .js-product-miniature[class*="style_product"] .add-to-links > li.cart button:hover {
        background: #3a3a3a;
        color: #fff;
    }

    /* Un producto agotado trae el boton deshabilitado: que se note. */
    body .js-product-miniature[class*="style_product"] .add-to-links > li.cart button.ajax_add_to_cart_button[disabled],
    body .js-product-miniature[class*="style_product"] .add-to-links > li.cart button[disabled] {
        background: #6b6b6b;
        cursor: not-allowed;
    }
}

/* ================================================================== */
/*  EL BOTON DE AÑADIR AL CARRITO, EN ROJO (16/09/2026)               */
/* ================================================================== */
/* Peticion del cliente: «que sea lo que destaque siempre en la tienda».
 * Con la ficha, la portada y el listado ya sin bordes y practicamente en
 * blanco y negro, el boton de comprar no se distinguia de cualquier otro
 * boton oscuro de la pagina.
 *
 * **EL ROJO NO ES EL #ff0123 DE LA MARCA, Y ES LA MISMA DECISION QUE LA
 * FRANJA DE AVISOS.** Blanco sobre #ff0123 da 3,98:1, por debajo del 4,5:1
 * que pide la WCAG — y el texto de estos botones va a 13-15 px, que NO
 * cuenta como texto grande (para eso harian falta 18,66 px en negrita).
 * Se usa **#d9001d**, que ya esta en la paleta (franja de avisos y :hover
 * del boton del selector de moto) y da **5,29:1**. A simple vista no se
 * distingue del rojo de marca.
 *
 * **LA EXCEPCION ES «COMPLETA TU COMPRA», y por eso los selectores van
 * ACOTADOS A SU CONTENEDOR en vez de escritos contra la clase.** Ese boton
 * lleva EXACTAMENTE las mismas clases que los demas —`add-to-cart` y
 * `ajax_add_to_cart_button`—, porque se copio del formulario del tema para
 * heredar el AJAX y el token. Una regla contra `.add-to-cart` a secas lo
 * pintaria de rojo tambien, que es justo lo que el cliente NO quiere: el
 * complemento no puede competir con el producto. El `:not()` es el segundo
 * cinturon, por si algun dia cambia el contenedor.
 *
 * **LOS DESHABILITADOS SE QUEDAN GRISES.** Un «Añadir al carrito» en rojo
 * que no responde al pulsarlo es peor que uno gris: el color promete que
 * se puede comprar.
 *
 * **EL HOVER PASA A UN ROJO MAS OSCURO, NO A NEGRO.** El negro era el gesto
 * correcto cuando el reposo tambien era oscuro; sobre rojo se lee como otro
 * boton distinto.
 *
 * `.s4b-compra__boton` (la barra de compra fija de movil) NO esta aqui: vive
 * en `producto.css`, **que se carga DESPUES de esta hoja**, asi que una
 * regla suya de la misma especificidad ganaria a esta. Se cambia alli.
 *
 * VUELTA ATRAS: borrar este bloque y el equivalente de `producto.css`. */

/* 1 · Ficha de producto, boton principal.
   2 · Tarjetas de producto de toda la web (el que asoma al pasar el raton).
   3 · Cajon lateral del carrito, «Finalizar compra».
   4 · Pagina /carrito, «Tramitar Pedido». */
/* EL BOTON DE LA FICHA VA APARTE, Y NECESITA `!important`. No es pereza:
   el negro se lo pone un `<style>` EN LINEA del modulo de CSS del back office
   —`.product-actions .add-to-cart { background: #191919 !important }`— y un
   `!important` vence a cualquier selector que no lo lleve, por especifico que
   sea. **Sintoma que lo delato: los otros cuatro botones cogieron el rojo a la
   primera y este se quedo negro**; con la misma regla para los cinco, uno de
   ellos no obedece y parece un fallo del selector.
   Entre dos `!important` desempata la especificidad, y la de aqui (1,3,1) le
   gana de sobra a la suya (0,2,0). Los otros cuatro NO lo llevan porque no lo
   necesitan. */
body#product .product-add-to-cart .add-to-cart:not(.s4b-cruzada__boton) {
    background: #d9001d !important;
    color: #fff !important;
    /* **FUERA EL BORDE (16/09/2026, lo vio el cliente: «quitale el borde
       negro»).** Estos botones traian `border: 1px solid #191919`, o sea del
       MISMO color que su fondo: invisible mientras eran negros. Al pasar el
       fondo a rojo, ese pixel se convierte en un marco oscuro alrededor del
       boton — un defecto que **no lo crea el cambio de color, lo DESTAPA**.
       Conviene recordarlo: al cambiar un fondo hay que mirar tambien el borde,
       que hasta ese momento no se distinguia de el. */
    border: 0 !important;
}

body .js-product-miniature[class*="style_product"] .add-to-links > li.cart button.ajax_add_to_cart_button:not(.s4b-cruzada__boton),
body .js-product-miniature[class*="style_product"] .add-to-links > li.cart button:not(.s4b-cruzada__boton),
body .s4b-carrito__boton--fuerte,
/* **EN `/carrito` SE ACOTA AL BOTON DE FINALIZAR, NO A `.btn-primary`.** Esa
   pagina tiene TRES: «Continuar comprando», el «Aplicar» del vale y este. Con
   la clase a secas los tres se irian a rojo, que es justo lo contrario de lo
   que se busca — el rojo tiene que señalar UNA cosa. Y hace falta `!important`
   porque `paginas.css` pinta los botones de estas paginas en negro con el
   suyo. */
body#cart .cart-detailed-actions .btn-primary {
    background: #d9001d !important;
    color: #fff !important;
    border: 0 !important;   /* el mismo borde invisible de siempre */
}

body#product .product-add-to-cart .add-to-cart:not(.s4b-cruzada__boton):hover,
body#product .product-add-to-cart .add-to-cart:not(.s4b-cruzada__boton):focus {
    background: #a80016 !important;
    color: #fff !important;
}

body .js-product-miniature[class*="style_product"] .add-to-links > li.cart button.ajax_add_to_cart_button:not(.s4b-cruzada__boton):hover,
body .js-product-miniature[class*="style_product"] .add-to-links > li.cart button:not(.s4b-cruzada__boton):hover,
body .s4b-carrito__boton--fuerte:hover,
body .s4b-carrito__boton--fuerte:focus,
body#cart .cart-detailed-actions .btn-primary:hover,
body#cart .cart-detailed-actions .btn-primary:focus {
    background: #a80016 !important;
    color: #fff !important;
}

/* Agotado o carrito vacio: gris, como estaba. Va DESPUES de las dos reglas
   de arriba a proposito — con la misma especificidad gana la ultima. */
body#product .product-add-to-cart .add-to-cart[disabled] {
    background: #6b6b6b !important;
    color: #fff !important;
}

body .js-product-miniature[class*="style_product"] .add-to-links > li.cart button[disabled],
body#cart .cart-detailed-actions .btn-primary.disabled,
body#cart .cart-detailed-actions .btn-primary[disabled] {
    background: #6b6b6b !important;
    color: #fff !important;
}