/* ==========================================================
   WonderLab sales badge — discount percentage (simple + variable)
   v1.5.85+

   Brand colour / radius are inline on the element (from the Sales
   Badge settings); this file owns the typography + the stacked
   "Up to" layout. !important is used on the visual props so the
   badge renders consistently over Divi / theme `.onsale` rules
   (which set their own font-size, display, min-width, etc.).
   ========================================================== */

span.onsale.wlpp-badge {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 5px 9px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap;
    text-align: center;
}

/* Stacked "Up to / 50% / OFF" — used when a variable product's
   variations carry different discounts. */
span.onsale.wlpp-badge--stacked {
    flex-direction: column !important;
    padding: 5px 8px !important;
}

span.onsale.wlpp-badge .wlpp-badge__upto {
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.85;
}

span.onsale.wlpp-badge .wlpp-badge__pct {
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 0.95 !important;
    margin: 1px 0;
}

span.onsale.wlpp-badge .wlpp-badge__off {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Product detail page badge can breathe a little more than a tight
   archive card. */
.single-product .et_pb_wc_images span.onsale.wlpp-badge--stacked,
.single-product div.product .images span.onsale.wlpp-badge--stacked {
    padding: 7px 11px !important;
}

.single-product .et_pb_wc_images span.onsale.wlpp-badge .wlpp-badge__pct,
.single-product div.product .images span.onsale.wlpp-badge .wlpp-badge__pct {
    font-size: 23px !important;
}