/* ============ IDENTIDAD DE MARCA ============
         Tokens oficiales. Unica fuente de verdad del sitio. */
      :root {
        --rey-purple:#490AA0; --rey-purple-deep:#2E0668;
        --rey-yellow:#FFD426; --rey-yellow-warm:#FDB913;
        --rey-white:#FFFFFF;  --rey-ink:#141018;
        --rey-sombra:0 4px 16px rgba(46,6,104,.18);
      }

      /* ---- TIPOGRAFIA ----
         Inter para cuerpo e interfaz. Ya estaba cargada: no anade descargas. */
      body, .o_wsale_products_page, p, li, td, th, input, select, textarea,
      .btn, button, a, label, span, div {
        font-family:'Inter', system-ui, -apple-system, sans-serif; }

      /* Archivo Black para todo lo que sea titular de seccion.
         ⚠️ Solo la FUENTE. Nada de text-transform: los h1 son nombres de
         producto y en mayusculas quedan ilegibles. */
      h1, h2, h3, h4, h5, h6,
      .h1, .h2, .h3, .h4, .h5, .h6 {
        font-family:'Archivo Black', 'Inter', sans-serif !important;
        font-weight:400 !important;
        letter-spacing:-.01em; }

      /* el precio manda: display, como en la señaletica de la tienda */
      .product_price, .oe_currency_value, .o_wsale_product_price_value {
        font-family:'Archivo Black', sans-serif !important; }

      /* ---- COLOR: lo que pinta el TEMA y no pasa por las vistas de El Rey ---- */
      .btn-primary, .btn-primary:not(:disabled) {
        background-color:var(--rey-purple) !important;
        border-color:var(--rey-purple) !important;
        color:var(--rey-white) !important; }
      .btn-primary:hover, .btn-primary:focus {
        background-color:var(--rey-purple-deep) !important;
        border-color:var(--rey-purple-deep) !important; }
      .btn-outline-primary {
        color:var(--rey-purple) !important;
        border-color:var(--rey-purple) !important; }
      .btn-outline-primary:hover {
        background-color:var(--rey-purple) !important;
        color:var(--rey-white) !important; }
      .text-primary, a.text-primary { color:var(--rey-purple) !important; }
      .bg-primary { background-color:var(--rey-purple) !important; }

      /* el amarillo del tema (#FAD60A) al amarillo oficial */
      .bg-warning, .btn-warning, .badge.bg-warning {
        background-color:var(--rey-yellow) !important;
        border-color:var(--rey-yellow) !important; }
      /* ⚠️ Sobre amarillo el texto va MORADO. Blanco sobre amarillo no se lee. */
      .bg-warning, .btn-warning { color:var(--rey-purple) !important; }

      /* ---- SUPERFICIES PLANAS ----
         La marca es plana: sin degradados ni glassmorphism. Se neutraliza
         cualquier degradado que meta el tema en cabecera, pie o botones. */
      header .navbar, #wrapwrap > header, .o_footer, footer,
      .btn-primary, .btn-warning { background-image:none !important; }

      /* sombra unica del sistema, en vez de las cuatro que traia el tema */
      .card, .o_wsale_product_grid_wrapper, .oe_product,
      .o_wsale_er_acc_card { box-shadow:var(--rey-sombra); }

      /* ---- RADIOS ----
         tarjetas 16px · botones 10px (decision de Miguel, 2026-08-14) */
      .card, .oe_product, .o_wsale_er_acc_card { border-radius:16px; }

      /* ---- CONSECUENCIA DEL CAMBIO DE TIPOGRAFIA: la etiqueta se comia el corazon ----
         Inter es mas ancha que la Source Sans Pro que habia. Medido en la tarjeta:
             etiqueta "Envio Nacional"  649 -> 755 px
             corazon de lista de deseos 739 -> 769 px
         Se solapaban 16px, y como el corazon lleva fondo blanco y va encima,
         tapaba el final del texto: se leia "ENVIO NACIONA". No era que el texto
         no cupiera en su caja (cabia): era que la caja invadia el corazon.
         ⚠️ NADA DE `text-overflow: ellipsis`. El primer intento recortaba a
         "ENVIO NACI..." — quitaba el solape pero dejaba la etiqueta sin
         significado, que es peor que el defecto original. Tiene que caber
         ENTERA: se aprieta la letra hasta que entra en el hueco libre.
         ⚠️ Y el hueco se mide, no se estima: el corazon empieza a 99px del
         borde del contenedor. */
      /* ⚠️ ESPECIFICIDAD: el primer intento uso `#products_grid .o_ribbons`
         (1 id + 1 clase) y NO aplicaba, aunque llevaba !important y estaba en
         el HTML. Gana la regla del sitio
         `#products_grid .oe_product .o_wsale_badge` (1 id + 2 clases): entre
         dos !important manda la MAS ESPECIFICA, no la ultima. Misma trampa que
         ya mordio con los botones (6949) y con las pastillas de variante. */
      #products_grid .oe_product .o_ribbons.o_wsale_badge,
      #products_grid .oe_product .o_wsale_badge {
        font-size:.52rem !important;
        font-weight:700 !important;
        letter-spacing:.02em !important;
        padding:.2rem .42rem !important;
        white-space:nowrap !important; }

      /* ⚠️ "Bajo cotizacion" NO es un o_wsale_badge: es `.er_cot_badge`, de
         nuestra propia vista, y se quedaba fuera del ajuste de arriba. Medido:
         123px de ancho invadiendo 33px la zona del corazon. Es la etiqueta con
         el texto mas largo del catalogo, asi que marca el limite. */
      #products_grid .oe_product .er_cot_badge {
        font-size:.52rem !important;
        font-weight:700 !important;
        letter-spacing:0 !important;
        padding:.2rem .34rem !important;
        white-space:nowrap !important; }