/* ============ COMPRA MAS Y AHORRA (ficha) ============ */
      /* margin-bottom: la tabla quedaba PEGADA a la tarjeta de Sucursal/Entrega
         que Odoo pinta justo debajo ("se amontona"). */
      .er_vol { margin:1rem 0 1.1rem 0; border:1px solid #ece9f3; border-radius:12px;
                overflow:hidden; background:#fff; }
      .er_vol_t { display:block; padding:.55rem .85rem;
                  background:#faf9fc; border-bottom:1px solid #ece9f3;
                  font-size:.63rem; font-weight:700; letter-spacing:.11em;
                  text-transform:uppercase; color:#490AA0; }
      .er_vol_f { display:flex; align-items:center; gap:.6rem; width:100%;
                  padding:.55rem .85rem; border:0; background:transparent;
                  border-top:1px solid #f4f2f8; text-align:left; cursor:pointer;
                  transition:background .12s ease; }
      .er_vol_f:first-of-type { border-top:0; }
      .er_vol_f:hover { background:#f7f5fc; }
      .er_vol_f.er_on { background:#f2eefb; }
      .er_vol_c { flex:1 1 auto; font-size:.83rem; color:#141018; }
      .er_vol_p { flex:0 0 auto; font-size:.86rem; font-weight:700; color:#490AA0;
                  white-space:nowrap; }
      .er_vol_u { font-size:.72rem; font-weight:500; color:#8b86a0; }
      .er_vol_a { flex:0 0 auto; font-size:.68rem; font-weight:700;
                  color:#128C4A; background:#e8f7ee; border-radius:6px;
                  padding:.12rem .35rem; white-space:nowrap; }
      .er_vol_caja { border-top:1px solid #ece9f3; background:#fffdf5; }
      .er_vol_caja .er_vol_c { font-weight:600; }
      /* ============ SELECTOR DE EMBALAJE / VARIANTES ============
         Las pastillas venian con margin:0 -> se TOCABAN entre si ("se amontonan"),
         y con radius 999px + texto de 16px ocupaban tanto que "Bulto con 200
         unidades" saltaba de renglon con el hueco desalineado.
         Se pasa el contenedor a flex con gap real y se baja el tamano, en la
         misma linea de 10px del resto de la ficha. */
      .o_wsale_product_page_variants ul.btn-group-toggle {
        display:flex !important; flex-wrap:wrap !important;
        gap:.5rem !important; margin:0 !important; padding:0 !important; }
      /* ⚠️ Con ID: la vista 6920 define "#product_detail .o_variant_pills
         { border-radius:999px !important }". Entre dos reglas !important gana la
         MAS ESPECIFICA, no la ultima -- "li.o_variant_pills" (1 elemento + 1
         clase) perdia contra 1 ID + 1 clase y el radio se quedaba en 999px.
         Es la misma trampa que ya paso con los botones (vista 6949). */
      #product_detail li.o_variant_pills,
      li.o_variant_pills {
        border-radius:10px !important;
        padding:.45rem .9rem !important;
        font-size:.85rem !important;
        font-weight:600 !important;
        line-height:1.3 !important;
        margin:0 !important;
        border-color:#e7e4f0 !important;
        transition:border-color .15s ease, color .15s ease; }
      #product_detail li.o_variant_pills:hover,
      li.o_variant_pills:hover { border-color:#490AA0 !important; }

      @media (max-width: 575.98px) {
        #product_detail li.o_variant_pills,
        li.o_variant_pills { font-size:.8rem !important; padding:.42rem .75rem !important; }
      }

      @media (prefers-reduced-motion: reduce) {
        .er_vol_f, li.o_variant_pills { transition:none; }
      }