/* SDG tweaks, product page: the sale badge. Two markups exist on this site:
 * - WooCommerce's <span class="onsale">Sale!</span> (Astra's 3.5 em circle, a tall block for a long text);
 * - Astra Pro's "modern shop" badge <span class="ast-on-card-button ast-onsale-card circle">, used on product pages too.
 *   Astra positions it with top/left (.ast-onsale-card) AND right (.ast-on-card-button), so any width:auto stretches it
 *   from the left to the right edge of the product.
 * B2BKing replaces the text with its rule name for B2B users ("B2B price -30%"). Here both are a small pill sized to
 * the text in the top-left corner of the photo, never wider than the photo column. */
.single-product div.product{position:relative}
.single-product div.product span.onsale,.single-product div.product .ast-onsale-card{position:absolute !important;top:14px !important;left:14px !important;right:auto !important;bottom:auto !important;display:inline-block !important;width:max-content !important;max-width:min(calc(100% - 28px),320px);height:auto !important;min-width:0 !important;min-height:0 !important;margin:0 !important;padding:6px 12px !important;border-radius:999px !important;line-height:1.2 !important;font-size:12px !important;font-weight:700;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:9;opacity:1;visibility:visible;box-shadow:0 1px 4px rgba(0,0,0,.14)}
@media (min-width:922px){.single-product div.product.ast-product-gallery-layout-vertical span.onsale,.single-product div.product.ast-product-gallery-layout-vertical .ast-onsale-card{left:calc(12.5% + 14px) !important}}