/* ============================================================================
   Spend to Save (Buy More Save More) progress bar
   Brand styling matching the BFCM gift guide: yellow #F7D153 on black/ink.
   ============================================================================ */

.bmsm-progress-wrapper {
    --bmsm-yellow: #F7D153;
    --bmsm-ink: #111;
    --bmsm-muted: #5f5f5f;
    --bmsm-line: #e3e1da;
    --bmsm-paper: #f6f5f1;
    display: block;
    width: 100%;
    clear: both;
    margin: 20px 0;
    padding: 16px 18px;
    background: var(--bmsm-paper);
    border: 1px solid var(--bmsm-line);
    border-radius: 10px;
    color: var(--bmsm-ink);
    font-size: 15px;
    line-height: 1.45;
    text-align: left;
}

.bmsm-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.bmsm-label {
    flex: 0 0 auto;
    background: var(--bmsm-ink);
    color: var(--bmsm-yellow);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.4;
    padding: 3px 9px;
    border-radius: 999px;
}

.bmsm-message {
    font-size: 15px;
    color: var(--bmsm-ink);
}

.bmsm-message strong {
    font-weight: 800;
    color: var(--bmsm-ink);
}

.bmsm-progress-bar {
    position: relative;
    height: 16px;
    margin: 12px 0 6px;
    background: #e2e0d8;
    border-radius: 999px;
    overflow: hidden;
}

.bmsm-progress-fill {
    height: 100%;
    background: var(--bmsm-yellow);
    border-radius: inherit;
    transition: width 0.5s ease;
}

.bmsm-scale {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--bmsm-muted);
}

.bmsm-tiers {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

.bmsm-tier {
    list-style: none;
    margin: 0;
    padding: 6px 4px;
    background: #fff;
    border: 1px solid #d9d6cc;
    border-radius: 6px;
    text-align: center;
    line-height: 1.25;
}

.bmsm-tier strong {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: var(--bmsm-ink);
}

.bmsm-tier span {
    display: block;
    font-size: 11px;
    color: var(--bmsm-muted);
}

.bmsm-tier.is-unlocked {
    background: var(--bmsm-ink);
    border-color: var(--bmsm-ink);
}

/* !important: theme rules for bold text in product summaries otherwise turn this black on black. */
.bmsm-progress-wrapper .bmsm-tiers .bmsm-tier.is-unlocked strong {
    color: var(--bmsm-yellow) !important;
}

.bmsm-tier.is-unlocked strong::before {
    content: "\2713\00a0";
}

.bmsm-progress-wrapper .bmsm-tiers .bmsm-tier.is-unlocked span {
    color: #cfcfcf !important;
}

.bmsm-progress-wrapper.is-max {
    border-color: var(--bmsm-yellow);
    box-shadow: inset 0 0 0 1px var(--bmsm-yellow);
}

.bmsm-note {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--bmsm-muted);
}

/* ---------- Placements ---------- */

.bmsm-product-page {
    clear: both;
    width: 100%;
    max-width: 560px;
    margin: 24px 0 16px;
}

.bmsm-product-page .bmsm-progress-wrapper,
.bmsm-cart-page .bmsm-progress-wrapper,
.bmsm-checkout-page .bmsm-progress-wrapper {
    margin: 0 0 20px;
}

/* Hide in WoodMart's sticky add-to-cart bars */
.wd-sticky-btn .bmsm-product-page,
.sticky-add-to-cart .bmsm-product-page,
.footer-sticky-bar .bmsm-product-page,
.product-footer-sticky .bmsm-product-page {
    display: none !important;
}

/* Mini cart: compact, no tier pills */
.bmsm-mini-cart .bmsm-progress-wrapper {
    margin: 12px 0;
    padding: 12px 14px;
    font-size: 13px;
}

.bmsm-mini-cart .bmsm-message {
    font-size: 13px;
}

.bmsm-mini-cart .bmsm-progress-bar {
    height: 12px;
    margin: 10px 0 5px;
}

.bmsm-mini-cart .bmsm-tiers {
    display: none;
}

/* BFCM landing page, under the tier ladder */
.bmsm-lp {
    max-width: 720px;
    margin: 28px auto 0;
}

.bmsm-lp .bmsm-progress-wrapper {
    margin: 0;
    background: #fff;
}

@media (max-width: 575px) {
    .bmsm-progress-wrapper {
        padding: 14px;
    }

    .bmsm-tiers {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}