/* v0.2.14 – compact BOX NOW left, status labels right ONLY on cards with BOX NOW.
 * The site's OceanWP custom CSS centers all condition badges with !important.
 * Never change its general condition labels or other products here. */
.woocommerce ul.products li.product .modex-hsc-badge--compact {
    display: block !important;
    position: relative !important;
    box-sizing: border-box !important;
    width: fit-content !important;
    max-width: min(142px, calc(100% - 105px)) !important;
    padding: 5px 7px !important;
    margin: 6px auto 9px 8px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    border-radius: 8px !important;
    vertical-align: top;
    z-index: 2;
}
.woocommerce ul.products li.product .modex-hsc-badge--compact strong,
.woocommerce ul.products li.product .modex-hsc-badge--compact span {
    display: block !important;
    font-size: inherit !important;
    line-height: inherit !important;
    white-space: nowrap;
}
/* Scope to product cards containing OUR compact badge; preserves other state labels.
 * Modern Chrome / Safari / Firefox support :has(). Without :has, the
 * shortened left-corner badge is still considerably narrower than before. */
@supports selector(li:has(.modex-hsc-badge--compact)) {
    .woocommerce ul.products li.product:has(.modex-hsc-badge--compact) .modex-central-condition--loop {
        left: auto !important;
        right: 12px !important;
        top: 15px !important;
        transform: none !important;
    }
    /* A genuine sale label is already top-left in ModeX custom CSS.
     * Give it the first row rather than covering the green BOX NOW badge. */
    .woocommerce ul.products li.product.sale:has(.modex-hsc-badge--compact) .modex-hsc-badge--compact {
        margin-top: 39px !important;
    }
}
@media (max-width: 420px) {
    .woocommerce ul.products li.product .modex-hsc-badge--compact {
        max-width: min(135px, calc(100% - 90px)) !important;
        margin-left: 6px !important;
        font-size: 9.5px !important;
    }
    @supports selector(li:has(.modex-hsc-badge--compact)) {
        .woocommerce ul.products li.product:has(.modex-hsc-badge--compact) .modex-central-condition--loop {
            right: 8px !important;
        }
    }
}