/* ====== VENDIDAS ESTE MES — pastilla de la tarjeta ======
         La linea reserva su altura aunque el producto no tenga dato: si no,
         las tarjetas de una misma fila quedan de alturas distintas. */
      /* ⚠️ `min-width:0` TAMBIEN AQUI. `.o_wsale_product_information` es un flex
         en columna, y un item flex no encoge por debajo de su contenido
         (`min-width:auto`). Sin esto el contenedor se quedaba clavado en 149px
         aunque la tarjeta bajara a 130px, y la pastilla se salia por la
         derecha -- que es justo lo que se veia en el movil. */
      /* ⚠️ `align-self:stretch` PORQUE EL PADRE ES `align-items:flex-start`.
         `.o_wsale_product_sub` es un flex en COLUMNA y no estira a sus hijos,
         asi que la pastilla se quedaba en 105px dentro de una tarjeta cuyo
         precio y boton miden 115px, y se veia pequena y descolgada a la
         izquierda. Con stretch ocupa el mismo ancho que el boton. */
      #products_grid .oe_product .er_vendidas {
        min-height:2.7rem; margin:.3rem 0 0 0;
        min-width:0; max-width:100%; align-self:stretch; }
      /* ⚠️ `inline-block`, NO `inline-flex`. Con flex la flecha era hermana de
         los dos renglones y les robaba su ancho A LOS DOS: el segundo,
         "vendidas este mes" (17 caracteres SIEMPRE, es el renglon largo del
         catalogo entero), se quedaba 6px sin sitio. Metida dentro del primer
         renglon, el segundo dispone de la pastilla completa. */
      #products_grid .oe_product .er_v_pill {
        display:block; max-width:100%; text-align:center;
        font-family:'Inter',sans-serif; font-size:.68rem; font-weight:600;
        letter-spacing:-.01em; line-height:1.28;
        color:#490AA0; background:#F2ECFC;
        border:1px solid #E3D8F7; border-radius:9999px;
        padding:.28rem .55rem; }
      #products_grid .oe_product .er_v_pill svg {
        width:12px; height:12px; vertical-align:-.16em; margin-right:.26rem; }
      #products_grid .oe_product .er_v_pill b { font-weight:800; }
      /* ⚠️ NO SE RECORTA CON "...": se PARTE EN DOS RENGLONES.
         El primer intento uso `text-overflow:ellipsis` y en el movil dejaba
         "1,665 unidad..." -- se salvaba el desborde pero se perdia la frase.
         Con dos renglones se lee entera y sigue sin salirse. La altura se
         reserva SIEMPRE (min-height), porque en una misma fila conviven
         "444 kg vendidos este mes" (un renglon) y "19,192 unidades vendidas
         este mes" (dos): sin reserva los botones quedan desalineados. */
      /* ⚠️ EL CORTE ES FORZADO, NO LIBRE. Dejar que el texto fluyera solo
         partia "1,665 unidades vendidas este mes" en TRES renglones en una
         tarjeta de 165px, y como cada producto rompia por un sitio distinto
         las pastillas quedaban de alturas distintas. Aqui la cifra y la
         unidad van arriba, y "vendidas este mes" abajo: SIEMPRE dos
         renglones, misma altura en toda la fila. */
      /* ⚠️ DOS RENGLONES SIEMPRE, EN TODOS LOS ANCHOS. Al principio esto solo
         se aplicaba por debajo de 1400px. Resultado en escritorio: 16 pastillas
         de 24px y 32 de 36px en la misma rejilla, segun si el texto cabia de
         un renglon -- y con eso los botones "Agregar" de una misma fila
         quedaban a distinta altura. Cortando siempre igual, todas miden lo
         mismo y la fila queda a plomo. */
      #products_grid .oe_product .er_v_p1,
      #products_grid .oe_product .er_v_p2 { display:block; }
      /* el renglon 2 es de largo FIJO ("vendidas este mes", 17 caracteres en
         todo el catalogo) y cabe siempre -> nunca se parte */
      #products_grid .oe_product .er_v_p2 { white-space:nowrap; }
      /* el 1 sí puede crecer (cifra + unidad). Hoy el peor caso real es
         "51 dispensadores" y le sobran 20px, pero si algun dia no cupiera
         preferimos que baje de renglon a que se salga de la tarjeta. */
      #products_grid .oe_product .er_v_p1 { overflow-wrap:anywhere; }
      @media (max-width:1399.98px) {
        #products_grid .oe_product .er_v_pill { border-radius:12px; }
      }
      @media (max-width:991.98px) {
        #products_grid .oe_product .er_vendidas { min-height:2.4rem; }
        #products_grid .oe_product .er_v_pill {
          font-size:.62rem; padding:.24rem .48rem; gap:.24rem; }
        #products_grid .oe_product .er_v_pill svg { width:11px; height:11px; margin-right:.22rem; }
      }
      /* ⚠️ POR DEBAJO DE 375px NO CABE "vendidas este mes" (17 caracteres, el
         renglon largo del catalogo). Medido: a 360px la tarjeta baja a 157px
         y una pastilla se iba a TRES renglones; a 320px se desbordaban 11px
         en 34 de 48. Aqui se encoge la letra y, como ultimo recurso, el
         segundo renglon puede partirse: preferimos un renglon de mas a que
         el texto se salga. 375px NO entra en esta regla -- ahi ya cabe. */
      @media (max-width:374.98px) {
        #products_grid .oe_product .er_vendidas { min-height:2.3rem; }
        #products_grid .oe_product .er_v_pill {
          font-size:.58rem; padding:.22rem .36rem; }
        #products_grid .oe_product .er_v_pill svg {
          width:10px; height:10px; margin-right:.18rem; }
        #products_grid .oe_product .er_v_p2 { white-space:normal; }
      }