/**
 * BeautyConnection — Global Utility Classes
 *
 * Reusable components shared across sections and pages.
 * Enqueued site-wide via functions.php.
 */

/* ===========================================
   Badge Ribbon
   Arrow-pointed ribbon label used for product badges.
   Variants: default (dark), --hot (pink).
   =========================================== */
.bc-badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 2px 14px;
    background: #3B3336;
    color: #fff;
    font-family: 'Mulish', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    white-space: nowrap;
    clip-path: polygon(
        0 0,
        100% 0,
        calc(100% - 10px) 50%,
        100% 100%,
        0 100%,
        10px 50%
    );
}

.bc-badge--hot {
    background: #EB0056;
}