/**
 * Product badges (e.g. "Most Ordered", "Buy 1 Get 1").
 * Loaded site-wide since product cards with badges can appear on the
 * homepage and Order Now page. The PDP additionally uses these same
 * class names when injecting badges via pdp.js — see mv-pdp-gallery
 * positioning override in pdp.css.
 */

.mv-product-badges {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    pointer-events: none;
}

.mv-product-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
}

.mv-product-badge--most_ordered {
    background: #980000;
}

.mv-product-badge--bogo {
    background: #d4a017;
    color: #2a1a00;
}

/* Product cards need a positioning context for the absolutely-positioned
 * badge container above. */
.mv-product-card__image {
    position: relative;
}