/**
 * BN Marketing — front-end styles.
 *
 * Reuses existing design-system tokens (--bn-primary, --bn-ink,
 * --bn-card-bg, --bn-shadow-subtle, --bn-radius-md/lg, --bn-space-*).
 * Does NOT introduce new color literals; everything respects the
 * Claude (light) / Binance (dark) dual theme switch.
 *
 * Components:
 *   .bn-promo-banner      — full activity banner (course/post/vip page)
 *   .bn-promo-banner__*   — children
 *   .bn-promo-card        — compact promo card (used in homepage widget)
 *   .bn-countdown         — countdown ticker
 *   .bn-stock-bar         — progress + remaining count
 *   .bn-deal-tag          — small inline price-tag pill
 *   .bn-coupon-card       — coupon picker / "我的卡券" entry
 *   .bn-groupbuy-list     — list of forming groups on a groupbuy page
 *   .bn-flash-sale-grid   — homepage / page-flash-sale grid
 *   .bn-groupbuy-hero     — single-bn_groupbuy.php hero (Wave 7.4.3)
 *
 * Wave 7.4.2 / 7.5.4: this stylesheet now ships full
 *   [data-bs-theme="dark"] coverage AND breakpoints for
 *   tablet-portrait (768-1023) and tablet-landscape (1024-1279)
 *   tiers in addition to the original 768/992/1200 stops.
 */

/* ============================================================
 * 1. Activity banner (single-ai_course / vip / 付费文章)
 * ============================================================ */

.bn-promo-banner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bn-space-md, 16px);
    padding: clamp(16px, 2vw, 24px);
    margin-bottom: var(--bn-space-lg, 24px);
    background: var(--bn-card-bg, #fff);
    border: 1px solid var(--bn-hairline-on-light, rgba(0,0,0,0.08));
    border-radius: var(--bn-radius-lg, 16px);
    box-shadow: var(--bn-shadow-subtle, 0 1px 3px rgba(0,0,0,0.04));
    overflow: hidden;
    position: relative;
}

.bn-promo-banner--seckill {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--bn-primary, #c2611c) 6%, var(--bn-card-bg, #fff)),
        var(--bn-card-bg, #fff) 60%);
    border-color: color-mix(in srgb, var(--bn-primary, #c2611c) 22%, transparent);
}

.bn-promo-banner--groupbuy {
    --bn-groupbuy-accent: #2b7a78;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--bn-groupbuy-accent) 8%, var(--bs-card-bg, var(--bn-card-bg, #fff))),
        var(--bs-card-bg, var(--bn-card-bg, #fff)) 60%);
    border-color: color-mix(in srgb, var(--bn-groupbuy-accent) 22%, transparent);
}

.bn-promo-banner__header {
    display: flex;
    align-items: baseline;
    gap: var(--bn-space-sm, 8px);
    flex-wrap: wrap;
}

.bn-promo-banner__tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    color: #fff;
    background: var(--bn-primary, #c2611c);
    border-radius: var(--bn-radius-pill, 999px);
    letter-spacing: 0.04em;
}

.bn-promo-banner--groupbuy .bn-promo-banner__tag {
    background: var(--bn-groupbuy-accent, #2b7a78);
}

.bn-promo-banner__title {
    margin: 0;
    font-size: clamp(15px, 1.4vw, 18px);
    font-weight: 600;
    color: var(--bn-ink, #0f0f10);
    letter-spacing: -0.01em;
}

.bn-promo-banner__pricing {
    display: flex;
    align-items: baseline;
    gap: var(--bn-space-sm, 8px);
    flex-wrap: wrap;
}

.bn-promo-banner__price {
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 700;
    color: var(--bn-primary, #c2611c);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.bn-promo-banner__price-original {
    font-size: 13px;
    color: var(--bn-ink-muted, #8a8a8e);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}

.bn-promo-banner__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bn-space-md, 16px) var(--bn-space-lg, 24px);
    align-items: center;
}

.bn-promo-banner__cta {
    display: flex;
    gap: var(--bn-space-sm, 8px);
    align-items: center;
}

/* ============================================================
 * 2. Countdown
 * ============================================================ */

.bn-countdown {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--bn-ink, #0f0f10);
}

.bn-countdown__icon {
    width: 14px;
    height: 14px;
    color: var(--bn-primary, #c2611c);
}

.bn-countdown__time {
    padding: 2px 8px;
    background: color-mix(in srgb, var(--bn-primary, #c2611c) 8%, transparent);
    color: var(--bn-primary, #c2611c);
    border-radius: var(--bn-radius-sm, 6px);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.bn-countdown--ended .bn-countdown__time {
    background: color-mix(in srgb, var(--bn-ink, #0f0f10) 6%, transparent);
    color: var(--bn-ink-muted, #999);
}

/* ============================================================
 * 3. Stock bar
 * ============================================================ */

.bn-stock-bar {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    max-width: 240px;
}

.bn-stock-bar__track {
    display: block;
    height: 6px;
    width: 100%;
    background: color-mix(in srgb, var(--bn-ink, #0f0f10) 8%, transparent);
    border-radius: var(--bn-radius-pill, 999px);
    overflow: hidden;
}

.bn-stock-bar__fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--bn-primary, #c2611c) 70%, transparent),
        var(--bn-primary, #c2611c));
    transition: width 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bn-stock-bar__label {
    font-size: 12px;
    color: var(--bn-ink-muted, #8a8a8e);
    font-variant-numeric: tabular-nums;
}

.bn-stock-bar--hot .bn-stock-bar__label {
    color: var(--bn-primary, #c2611c);
    font-weight: 500;
}

.bn-stock-bar--exhausted .bn-stock-bar__label {
    color: var(--bn-ink-muted, #999);
}

/* ============================================================
 * 4. Deal tag (small inline pill, for VIP cards / 文章 cards)
 * ============================================================ */

.bn-deal-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--bn-primary, #c2611c);
    background: color-mix(in srgb, var(--bn-primary, #c2611c) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--bn-primary, #c2611c) 22%, transparent);
    border-radius: var(--bn-radius-sm, 6px);
    letter-spacing: 0.02em;
    line-height: 1.5;
}

.bn-deal-tag--groupbuy {
    --bn-groupbuy-accent: #2b7a78;
    color: var(--bn-groupbuy-accent);
    background: color-mix(in srgb, var(--bn-groupbuy-accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--bn-groupbuy-accent) 22%, transparent);
}

/* ============================================================
 * 5. Coupon card (领券中心 / 我的卡券 / 结算页 picker)
 * ============================================================ */

.bn-coupon-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--bn-space-md, 16px);
}

.bn-coupon-card {
    position: relative;
    display: grid;
    grid-template-columns: 110px 1fr;
    background: var(--bn-card-bg, #fff);
    border: 1px solid var(--bn-hairline-on-light, rgba(0,0,0,0.08));
    border-radius: var(--bn-radius-md, 12px);
    overflow: hidden;
    transition: transform 0.18s var(--bn-ease-out, cubic-bezier(0.2, 0.8, 0.2, 1)),
                box-shadow 0.18s var(--bn-ease-out, cubic-bezier(0.2, 0.8, 0.2, 1));
}

.bn-coupon-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--bn-shadow-md, 0 6px 16px rgba(0,0,0,0.06));
}

.bn-coupon-card__face {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--bn-space-md, 16px);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--bn-primary, #c2611c) 12%, transparent),
        color-mix(in srgb, var(--bn-primary, #c2611c) 4%, transparent));
    color: var(--bn-primary, #c2611c);
    position: relative;
}

.bn-coupon-card__face::after {
    /* zig-zag decorative tear */
    content: '';
    position: absolute;
    inset: 0 -1px 0 auto;
    width: 8px;
    background-image: radial-gradient(circle at right, var(--bn-card-bg, #fff) 4px, transparent 4px);
    background-size: 8px 14px;
    background-repeat: repeat-y;
}

.bn-coupon-card__amount {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.bn-coupon-card__amount-unit {
    font-size: 12px;
    font-weight: 500;
    margin-left: 2px;
}

.bn-coupon-card__min {
    margin-top: 4px;
    font-size: 11px;
    color: var(--bn-ink-muted, #8a8a8e);
}

.bn-coupon-card__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--bn-space-md, 16px);
    gap: 6px;
}

.bn-coupon-card__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--bn-ink, #0f0f10);
    letter-spacing: -0.01em;
}

.bn-coupon-card__meta {
    font-size: 12px;
    color: var(--bn-ink-muted, #8a8a8e);
    line-height: 1.5;
}

.bn-coupon-card__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: var(--bn-primary, #c2611c);
    border: 0;
    border-radius: var(--bn-radius-pill, 999px);
    cursor: pointer;
    transition: opacity 0.15s var(--bn-ease-out, ease);
}
.bn-coupon-card__action:hover { opacity: 0.92; }
.bn-coupon-card__action:disabled,
.bn-coupon-card--disabled .bn-coupon-card__action {
    background: color-mix(in srgb, var(--bn-ink, #0f0f10) 25%, transparent);
    cursor: not-allowed;
    opacity: 0.7;
}

.bn-coupon-card--disabled {
    opacity: 0.55;
    filter: saturate(0.6);
}

/* ============================================================
 * 6. Group-buy hero + list
 * ============================================================ */

/* Page-level container override — narrower than default site container. */
.bn-groupbuy-page {
    --bn-groupbuy-accent: #2b7a78;
    --bn-groupbuy-accent-rgb: 43, 122, 120;
}

.bn-groupbuy-page > .container {
    max-width: 980px;
    padding: var(--bn-space-xl, 32px) var(--bn-space-md, 16px);
}

/* Hero media — smart-fill 1:1 frame */
.bn-groupbuy-hero {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--bn-space-lg, 24px);
    align-items: center;
    background: var(--bn-card-bg, #fff);
    padding: var(--bn-space-lg, 24px);
    border-radius: var(--bn-radius-lg, 16px);
    border: 1px solid var(--bn-hairline-on-light, rgba(0,0,0,.08));
    margin-bottom: var(--bn-space-lg, 24px);
}

/* Hero copy column. */
.bn-groupbuy-hero__tag {
    margin-bottom: var(--bn-space-xs, 8px);
}

.bn-groupbuy-hero__title {
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 600;
    margin: 6px 0 4px;
    color: var(--bn-ink, #0f0f10);
}

.bn-groupbuy-hero__product {
    color: var(--bn-ink-muted, #888);
    margin: 0 0 14px;
    font-size: 13px;
}

.bn-groupbuy-hero__product a {
    color: inherit;
}

.bn-groupbuy-hero__price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.bn-groupbuy-hero__price {
    font-size: 32px;
    font-weight: 700;
    color: var(--bn-groupbuy-accent, #2b7a78);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.bn-groupbuy-hero__original {
    font-size: 13px;
    color: var(--bn-ink-muted, #888);
    text-decoration: line-through;
}

.bn-groupbuy-hero__deadline {
    color: var(--bn-ink-muted, #888);
    font-size: 13px;
    margin: 0 0 16px;
}

.bn-groupbuy-hero__cta {
    background: var(--bn-groupbuy-accent, #2b7a78);
    border-color: var(--bn-groupbuy-accent, #2b7a78);
}

.bn-groupbuy-hero__cta:hover,
.bn-groupbuy-hero__cta:focus-visible {
    background: color-mix(in srgb, var(--bn-groupbuy-accent, #2b7a78) 88%, #000);
    border-color: color-mix(in srgb, var(--bn-groupbuy-accent, #2b7a78) 88%, #000);
}

/* Shared-group highlight row. */
.bn-groupbuy-row--shared {
    margin-bottom: var(--bn-space-md, 16px);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--bn-groupbuy-accent, #2b7a78) 8%, var(--bn-card-bg, #fff)),
        var(--bn-card-bg, #fff) 60%);
}

/* Section header above forming groups. */
.bn-groupbuy-section-title {
    font-size: 16px;
    font-weight: 600;
    margin: var(--bn-space-lg, 24px) 0 var(--bn-space-sm, 12px);
    color: var(--bn-ink, #0f0f10);
}

.bn-groupbuy-section-title__count {
    color: var(--bn-ink-muted, #888);
    font-weight: 400;
}

/* Empty state. */
.bn-groupbuy-empty {
    padding: var(--bn-space-xl, 32px);
    background: var(--bn-card-bg, #fff);
    border-radius: var(--bn-radius-md, 12px);
    border: 1px solid var(--bn-hairline-on-light, rgba(0,0,0,.06));
    text-align: center;
    color: var(--bn-ink-muted, #888);
}

/* Row action group (share + join). */
.bn-groupbuy-row__actions {
    display: flex;
    gap: var(--bn-space-xs, 8px);
}

.bn-groupbuy-row__share {
    background: transparent;
    color: var(--bn-groupbuy-accent, #2b7a78);
    border: 1px solid color-mix(in srgb, var(--bn-groupbuy-accent, #2b7a78) 30%, transparent);
}

/* Login link styled like CTA. */
.bn-groupbuy-row__cta--link {
    text-decoration: none;
    color: #fff;
}

/* Activity-description card. */
.bn-groupbuy-content-card {
    margin-top: var(--bn-space-xl, 32px);
    padding: var(--bn-space-lg, 24px);
    background: var(--bn-card-bg, #fff);
    border-radius: var(--bn-radius-lg, 16px);
    border: 1px solid var(--bn-hairline-on-light, rgba(0,0,0,.06));
}

.bn-groupbuy-content-card__title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 var(--bn-space-sm, 12px);
}

/* ============================================================
 * 9. Flash-sale page (秒杀专题)
 * ============================================================ */

.bn-flash-sale-page > .container {
    padding-bottom: var(--bn-space-xxl, 48px);
}

.bn-flash-sale-page .archive-hero {
    padding: var(--bn-space-xxl, 48px) 0 var(--bn-space-lg, 24px);
}

.bn-flash-sale-page .archive-title {
    font-size: clamp(22px, 2.4vw, 32px);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--bn-ink, #0f0f10);
    margin-bottom: 6px;
}

.bn-flash-sale-page .archive-title__icon {
    color: var(--bn-primary, #c2611c);
    vertical-align: middle;
    margin-right: 6px;
}

.bn-flash-sale-page .archive-desc {
    color: var(--bn-ink-muted, #8a8a8e);
}

.bn-flash-sale-section {
    margin-bottom: var(--bn-space-xl, 32px);
}

.bn-flash-sale-section__title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: var(--bn-space-md, 16px);
}

.bn-flash-sale-section__count {
    color: var(--bn-ink-muted, #8a8a8e);
    font-weight: 400;
    font-size: 13px;
}

.bn-flash-sale-card.is-ended {
    opacity: 0.5;
    filter: saturate(0.6);
}

.bn-flash-sale-card__countdown {
    font-size: 12px;
}

.bn-flash-sale-card__upcoming {
    font-size: 12px;
    color: var(--bn-ink-muted, #888);
}

.bn-flash-sale-empty {
    text-align: center;
    padding: 80px 0;
    color: var(--bn-ink-muted, #999);
}

/* Homepage flash-sale widget header. */
.bn-section-header--with-link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--bn-space-md, 16px);
    margin-bottom: var(--bn-space-md, 16px);
}

.bn-flash-sale-widget__title {
    margin: 0;
}

.bn-flash-sale-widget__title-inner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.bn-flash-sale-widget__icon {
    color: var(--bn-primary, #c2611c);
}

.bn-flash-sale-widget__more {
    font-size: 13px;
    color: var(--bn-ink-muted, #888);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ============================================================
 * 10. Coupon page (领券中心)
 * ============================================================ */

.bn-coupons-page > .container {
    max-width: 1100px;
    padding-bottom: var(--bn-space-xxl, 48px);
}

.bn-coupons-page .archive-hero {
    padding: var(--bn-space-xxl, 48px) 0 var(--bn-space-lg, 24px);
}

.bn-coupons-page .archive-title {
    font-size: clamp(22px, 2.4vw, 32px);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--bn-ink, #0f0f10);
    margin-bottom: 6px;
}

.bn-coupons-page .archive-title__icon {
    color: var(--bn-primary, #c2611c);
    vertical-align: middle;
    margin-right: 6px;
}

.bn-coupons-page .archive-desc {
    color: var(--bn-ink-muted, #8a8a8e);
}

.bn-coupon-redeem-row {
    display: flex;
    justify-content: center;
    margin-bottom: var(--bn-space-lg, 24px);
}

.bn-coupon-redeem-form {
    display: flex;
    gap: var(--bn-space-xs, 8px);
    width: 100%;
    max-width: 480px;
}

.bn-coupon-redeem-form__input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--bn-hairline-on-light, rgba(0,0,0,.12));
    border-radius: var(--bn-radius-md, 12px);
    font-size: 14px;
    background: var(--bn-card-bg, #fff);
    color: var(--bn-ink, #0f0f10);
}

.bn-coupon-redeem-form__btn {
    padding: 10px 20px;
    background: var(--bn-primary, #c2611c);
    color: #fff;
    border: 0;
    border-radius: var(--bn-radius-md, 12px);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.bn-coupons-empty {
    text-align: center;
    padding: 64px 0;
    color: var(--bn-ink-muted, #999);
}

@media (max-width: 575.98px) {
    .bn-coupon-redeem-form {
        flex-direction: column;
    }
}

.bn-groupbuy-hero__media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--bn-radius-md, 12px);
    overflow: hidden;
    background: color-mix(in srgb, var(--bn-ink, #0f0f10) 6%, transparent);
    isolation: isolate;
}

.bn-groupbuy-hero__media::before {
    content: '';
    position: absolute;
    inset: -8%;
    background-image: var(--bn-img, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(28px) saturate(1.15) brightness(.92);
    transform: scale(1.15);
    z-index: 0;
    pointer-events: none;
}

.bn-groupbuy-hero__media img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

@media (max-width: 575.98px) {
    .bn-groupbuy-hero {
        grid-template-columns: 1fr;
        gap: var(--bn-space-md, 16px);
    }
    .bn-groupbuy-hero__media {
        aspect-ratio: 4 / 3;
        max-width: 320px;
        margin: 0 auto;
    }
}

.bn-groupbuy-list {
    display: grid;
    gap: var(--bn-space-md, 16px);
}

.bn-groupbuy-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--bn-space-md, 16px);
    align-items: center;
    padding: var(--bn-space-md, 16px);
    background: var(--bn-card-bg, #fff);
    border: 1px solid var(--bn-hairline-on-light, rgba(0,0,0,0.08));
    border-radius: var(--bn-radius-md, 12px);
}

.bn-groupbuy-row__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--bn-ink, #0f0f10) 6%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bn-ink, #0f0f10);
    font-weight: 600;
}

.bn-groupbuy-row__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bn-groupbuy-row__leader {
    font-size: 13px;
    font-weight: 500;
    color: var(--bn-ink, #0f0f10);
}

.bn-groupbuy-row__meta {
    font-size: 11px;
    color: var(--bn-ink-muted, #8a8a8e);
    display: flex;
    gap: var(--bn-space-sm, 8px);
}

.bn-groupbuy-row__cta {
    --bn-groupbuy-accent: #2b7a78;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: var(--bn-groupbuy-accent);
    border: 0;
    border-radius: var(--bn-radius-pill, 999px);
    cursor: pointer;
    transition: filter 0.15s ease;
}
.bn-groupbuy-row__cta:hover {
    filter: brightness(1.06);
    color: #fff;
}
.bn-groupbuy-row__cta:active {
    filter: brightness(0.95);
}
.bn-groupbuy-row__cta:focus-visible {
    outline: 2px solid var(--bn-groupbuy-accent);
    outline-offset: 2px;
}
[data-bs-theme="dark"] .bn-groupbuy-row__cta {
    --bn-groupbuy-accent: #4cd6cf;
    color: #181a20;
}

/* ============================================================
 * 7. Homepage flash-sale grid
 * ============================================================ */

.bn-flash-sale-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--bn-space-md, 16px);
}

.bn-flash-sale-card {
    display: flex;
    flex-direction: column;
    gap: var(--bn-space-sm, 8px);
    padding: var(--bn-space-md, 16px);
    background: var(--bn-card-bg, #fff);
    border: 1px solid var(--bn-hairline-on-light, rgba(0,0,0,0.08));
    border-radius: var(--bn-radius-md, 12px);
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s var(--bn-ease-out, ease), box-shadow 0.18s var(--bn-ease-out, ease);
    overflow: hidden;
}

.bn-flash-sale-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--bn-shadow-md, 0 8px 22px rgba(0,0,0,0.06));
}

.bn-flash-sale-card__thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: color-mix(in srgb, var(--bn-ink, #0f0f10) 5%, transparent);
    border-radius: var(--bn-radius-sm, 6px);
    overflow: hidden;
    isolation: isolate;
}

.bn-flash-sale-card__thumb::before {
    content: '';
    position: absolute;
    inset: -8%;
    background-image: var(--bn-img, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(24px) saturate(1.15) brightness(.92);
    transform: scale(1.15);
    z-index: 0;
    pointer-events: none;
}

.bn-flash-sale-card__thumb img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.bn-flash-sale-card__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--bn-ink, #0f0f10);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bn-flash-sale-card__price-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.bn-flash-sale-card__price {
    font-size: 18px;
    font-weight: 700;
    color: var(--bn-primary, #c2611c);
    font-variant-numeric: tabular-nums;
}

.bn-flash-sale-card__original {
    font-size: 12px;
    color: var(--bn-ink-muted, #8a8a8e);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
 * 8. Responsive — Bootstrap-aligned breakpoints
 *    sm  ≤ 575.98px (also covered earlier in section 4)
 *    md  ≤ 767.98px
 *    lg  ≤ 991.98px (tablet)
 * ============================================================ */

/* Tablet — keep grids dense but a touch tighter than desktop. */
@media (max-width: 991.98px) {
    .bn-promo-banner {
        gap: var(--bn-space-md, 16px);
    }
    .bn-coupon-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }
    .bn-flash-sale-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
    .bn-groupbuy-hero {
        grid-template-columns: 200px 1fr;
        padding: var(--bn-space-md, 16px);
    }
}

/* Phone (md down) — collapse layouts. */
@media (max-width: 767.98px) {
    .bn-promo-banner {
        padding: var(--bn-space-md, 16px);
    }
    .bn-promo-banner__price {
        font-size: 22px;
    }
    .bn-coupon-card {
        grid-template-columns: 90px 1fr;
    }
    .bn-coupon-card__amount {
        font-size: 22px;
    }
    .bn-flash-sale-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

/* Small phone (sm down) — single-column safe defaults. */
@media (max-width: 575.98px) {
    .bn-flash-sale-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--bn-space-sm, 12px);
    }
    .bn-flash-sale-card__title {
        font-size: 13px;
    }
    .bn-flash-sale-card__price {
        font-size: 16px;
    }
    .bn-coupon-card {
        grid-template-columns: 80px 1fr;
        padding: var(--bn-space-sm, 12px);
    }
}

/* Reduced motion: kill bar fill animation. */
@media (prefers-reduced-motion: reduce) {
    .bn-stock-bar__fill,
    .bn-flash-sale-card,
    .bn-coupon-card {
        transition: none !important;
    }
}

/* ============================================================
 * 9. Tablet-landscape tier (1024-1279) — Wave 7.4.2
 *    Sits between the existing tablet (≤991.98) and desktop tiers.
 *    Goal: keep grids usable on iPad Pro / 13" laptops where
 *    desktop minmax(280px) yields awkwardly stretched cards.
 * ============================================================ */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .bn-coupon-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
    .bn-flash-sale-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    .bn-groupbuy-hero {
        grid-template-columns: 220px 1fr;
        padding: var(--bn-space-lg, 24px);
    }
    .bn-promo-banner {
        padding: var(--bn-space-lg, 24px);
    }
}

/* Tablet-portrait tier (768-1023) — Wave 7.4.2 explicit slot.
 * Existing `max-width: 991.98px` already covers this range loosely;
 * this rule narrows minmax sizing for the 768-1023 sweet spot. */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .bn-coupon-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
    .bn-flash-sale-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

/* Desktop-wide (≥1280) — Wave 7.4.2 hero room.
 * Slightly looser minmax so card density doesn't feel cramped
 * on 1440/1920p displays. */
@media (min-width: 1280px) {
    .bn-coupon-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
    .bn-flash-sale-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

/* ============================================================
 * 10. Dark-mode coverage — Wave 7.4.2
 *
 *     Previously this stylesheet defaulted to `--bn-card-bg, #fff`
 *     and `--bn-hairline-on-light, ...` literal fallbacks, so when
 *     [data-bs-theme="dark"] was active the marketing components
 *     painted on white surfaces inside an otherwise dark page.
 *     We now switch to canonical Bootstrap-aligned tokens
 *     (--bs-card-bg / --bn-surface-*-dark) AND provide explicit
 *     overrides for every public class.
 * ============================================================ */
[data-bs-theme="dark"] .bn-promo-banner {
    background: var(--bn-surface-card-dark, #1e2329);
    border-color: var(--bn-hairline-on-dark, #2b3139);
    box-shadow: var(--bn-shadow-card, 0 0 0 1px var(--bn-hairline-on-dark, #2b3139));
}
[data-bs-theme="dark"] .bn-promo-banner--seckill {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--bn-primary, #fcd535) 8%, var(--bn-surface-card-dark, #1e2329)),
        var(--bn-surface-card-dark, #1e2329) 60%);
    border-color: color-mix(in srgb, var(--bn-primary, #fcd535) 28%, transparent);
}
[data-bs-theme="dark"] .bn-promo-banner--groupbuy {
    background: linear-gradient(135deg,
        color-mix(in srgb, #2dbdb6 12%, var(--bn-surface-card-dark, #1e2329)),
        var(--bn-surface-card-dark, #1e2329) 60%);
    border-color: color-mix(in srgb, #2dbdb6 28%, transparent);
}

[data-bs-theme="dark"] .bn-promo-card,
[data-bs-theme="dark"] .bn-coupon-card,
[data-bs-theme="dark"] .bn-groupbuy-card,
[data-bs-theme="dark"] .bn-flash-sale-card {
    background: var(--bn-surface-card-dark, #1e2329);
    border-color: var(--bn-hairline-on-dark, #2b3139);
    color: var(--bn-on-dark, #eaecef);
}

[data-bs-theme="dark"] .bn-coupon-card__amount,
[data-bs-theme="dark"] .bn-flash-sale-card__price {
    color: var(--bn-primary, #fcd535);
}
[data-bs-theme="dark"] .bn-flash-sale-card__title {
    color: var(--bn-on-dark, #eaecef);
}
[data-bs-theme="dark"] .bn-flash-sale-card__original,
[data-bs-theme="dark"] .bn-coupon-card__hint,
[data-bs-theme="dark"] .bn-promo-banner__hint {
    color: var(--bn-muted-strong, #929aa5);
}

[data-bs-theme="dark"] .bn-stock-bar {
    background: var(--bn-surface-elevated-dark, #2b3139);
    border-color: var(--bn-hairline-on-dark, #2b3139);
}
[data-bs-theme="dark"] .bn-stock-bar__fill {
    background: linear-gradient(90deg,
        var(--bn-primary, #fcd535),
        color-mix(in srgb, var(--bn-primary, #fcd535) 70%, var(--bn-trading-up, #0ecb81)));
}

[data-bs-theme="dark"] .bn-countdown {
    background: var(--bn-surface-elevated-dark, #2b3139);
    color: var(--bn-on-dark, #eaecef);
    border-color: var(--bn-hairline-on-dark, #2b3139);
}

[data-bs-theme="dark"] .bn-deal-tag {
    background: color-mix(in srgb, var(--bn-primary, #fcd535) 14%, transparent);
    color: var(--bn-primary, #fcd535);
    border-color: color-mix(in srgb, var(--bn-primary, #fcd535) 32%, transparent);
}

/* Coupon picker modal — was using rgba(0,0,0,0.45) which still works in dark
 * but the inline panel inherited light card-bg. Now uses the same canvas. */
[data-bs-theme="dark"] .bn-coupon-picker__panel {
    background: var(--bn-surface-card-dark, #1e2329);
    color: var(--bn-on-dark, #eaecef);
    box-shadow: var(--bn-shadow-elevated, 0 24px 48px -16px rgba(0,0,0,0.6));
}

/* Wave 7.4.4: focus-visible coverage for marketing-shaped CTAs.
 * Provides a high-contrast 2px outline that respects the active theme. */
.bn-coupon-picker__panel .js-bn-use-coupon:focus-visible,
.bn-stock-bar__cta:focus-visible,
.bn-flash-sale-card a:focus-visible {
    outline: 2px solid var(--bn-primary, #c2611c);
    outline-offset: 2px;
}

/* ============================================================
 * 11. Groupbuy hero — Wave 7.4.3 module
 *
 *     Migrates inline grid + literal #2b7a78 from
 *     single-bn_groupbuy.php into reusable BEM rules. Token
 *     `--bn-groupbuy-accent` is auto-themed by [data-bs-theme].
 * ============================================================ */
.bn-groupbuy-hero {
    --bn-groupbuy-accent: #2b7a78;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--bn-space-lg, 24px);
    padding: clamp(16px, 2vw, 28px);
    background: var(--bs-card-bg, var(--bn-card-bg, #fff));
    border: 1px solid var(--bn-hairline-on-light, rgba(0,0,0,0.08));
    border-radius: var(--bn-radius-xl, 16px);
    box-shadow: var(--bn-shadow-card, 0 1px 2px rgba(0,0,0,0.04));
}

[data-bs-theme="dark"] .bn-groupbuy-hero {
    --bn-groupbuy-accent: #4cd6cf;
    background: var(--bn-surface-card-dark, #1e2329);
    border-color: var(--bn-hairline-on-dark, #2b3139);
}

.bn-groupbuy-hero__thumb {
    aspect-ratio: 1 / 1;
    border-radius: var(--bn-radius-lg, 12px);
    overflow: hidden;
    background: var(--bn-surface-soft-light, #faf9f5);
}
[data-bs-theme="dark"] .bn-groupbuy-hero__thumb {
    background: var(--bn-surface-elevated-dark, #2b3139);
}
.bn-groupbuy-hero__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bn-groupbuy-hero__title {
    margin: 0 0 var(--bn-space-xs, 8px);
    font-size: var(--bn-fs-title-lg, 20px);
    font-weight: 600;
    line-height: var(--bn-lh-title, 1.3);
}

.bn-groupbuy-hero__price {
    color: var(--bn-groupbuy-accent);
    font-weight: 700;
    font-size: var(--bn-fs-num-display, 28px);
    font-variant-numeric: tabular-nums;
}

.bn-groupbuy-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--bn-groupbuy-accent);
    color: #fff;
    border-radius: var(--bn-radius-pill, 9999px);
    text-decoration: none;
    font-weight: 600;
    transition: filter 0.15s ease;
}
.bn-groupbuy-hero__cta:hover {
    filter: brightness(1.06);
    color: #fff;
}
.bn-groupbuy-hero__cta:focus-visible {
    outline: 2px solid var(--bn-groupbuy-accent);
    outline-offset: 3px;
}

@media (max-width: 767.98px) {
    .bn-groupbuy-hero {
        grid-template-columns: 1fr;
    }
    .bn-groupbuy-hero__thumb {
        max-width: 240px;
    }
}

/* ============================================================
 * 12. My-coupons page chrome — Wave 7.4.4
 *
 *     Migrates the inline styles from page-my-coupons.php into
 *     reusable classes that respect dark mode + responsive tiers.
 * ============================================================ */
.bn-my-coupons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--bn-space-md, 16px);
}
.bn-my-coupons__card {
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: center;
    gap: var(--bn-space-sm, 12px);
    padding: var(--bn-space-md, 16px);
    background: var(--bs-card-bg, var(--bn-card-bg, #fff));
    border: 1px solid var(--bn-hairline-on-light, rgba(0,0,0,0.08));
    border-radius: var(--bn-radius-lg, 12px);
    box-shadow: var(--bn-shadow-card, 0 1px 2px rgba(0,0,0,0.04));
}
[data-bs-theme="dark"] .bn-my-coupons__card {
    background: var(--bn-surface-card-dark, #1e2329);
    border-color: var(--bn-hairline-on-dark, #2b3139);
}
.bn-my-coupons__amount {
    font-size: 28px;
    font-weight: 700;
    color: var(--bn-primary, #c2611c);
    text-align: center;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.bn-my-coupons__title {
    font-weight: 600;
    margin: 0 0 4px;
}
.bn-my-coupons__hint {
    font-size: 12px;
    color: var(--bn-muted-strong, #87867f);
    margin: 0;
}
.bn-my-coupons__empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 64px 16px;
    color: var(--bn-muted-strong, #87867f);
}

@media (max-width: 767.98px) {
    .bn-my-coupons {
        grid-template-columns: 1fr;
    }
    .bn-my-coupons__card {
        grid-template-columns: 80px 1fr;
        padding: var(--bn-space-sm, 12px);
    }
    .bn-my-coupons__amount {
        font-size: 24px;
    }
}

/* ============================================================
 * 13. My-coupons page chrome (extracted from inline styles)
 *     Wave 7.4.4
 * ============================================================ */
.bn-my-coupons-hero {
    padding: 48px 0 16px;
}
.bn-my-coupons-hero__title {
    font-size: clamp(22px, 2.4vw, 32px);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--bn-ink, #0f0f10);
    margin-bottom: 6px;
}
.bn-my-coupons-hero__desc {
    color: var(--bn-ink-muted, #8a8a8e);
}

.bn-my-coupons-container {
    max-width: 1100px;
    padding-bottom: 48px;
}

.bn-my-coupons-tabs {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.bn-my-coupons-tab {
    padding: 8px 18px;
    border-radius: var(--bn-radius-pill, 999px);
    font-size: 14px;
    text-decoration: none;
    color: var(--bn-ink-muted, #888);
    background: color-mix(in srgb, var(--bn-ink, #0f0f10) 5%, transparent);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.bn-my-coupons-tab:hover {
    color: var(--bn-ink, #0f0f10);
    background: color-mix(in srgb, var(--bn-ink, #0f0f10) 10%, transparent);
}
.bn-my-coupons-tab.is-active {
    background: var(--bn-primary, #c2611c);
    color: #fff;
    font-weight: 600;
}
.bn-my-coupons-tab.is-active:hover {
    color: #fff;
}
.bn-my-coupons-tab:focus-visible {
    outline: 2px solid var(--bn-primary, #c2611c);
    outline-offset: 2px;
}

.bn-my-coupons-empty {
    text-align: center;
    padding: 64px 0;
    color: var(--bn-ink-muted, #87867f);
}
.bn-my-coupons-empty__cta {
    color: var(--bn-primary, #c2611c);
    text-decoration: none;
}
.bn-my-coupons-empty__cta:hover {
    text-decoration: underline;
}

.bn-my-coupons-code {
    font-size: 11px;
    font-family: var(--bn-font-mono, ui-monospace, SFMono-Regular, monospace);
    background: color-mix(in srgb, var(--bn-ink, #0f0f10) 6%, transparent);
    padding: 1px 6px;
    border-radius: 4px;
}
[data-bs-theme="dark"] .bn-my-coupons-code {
    background: color-mix(in srgb, #ffffff 8%, transparent);
}

@media (min-width: 1024px) and (max-width: 1279.98px) {
    .bn-my-coupons-container {
        max-width: 960px;
    }
}
@media (max-width: 575.98px) {
    .bn-my-coupons-hero {
        padding: 28px 0 12px;
    }
    .bn-my-coupons-tabs {
        margin-bottom: 16px;
    }
    .bn-my-coupons-tab {
        padding: 6px 14px;
        font-size: 13px;
    }
}