:root {
    --bb-brand-purple: #7c2cff;
    --bb-brand-purple-dark: #2b0f5f;
    --bb-brand-gold: #f8c537;
    --bb-brand-pink: #ff4da6;
    --bb-brand-blue: #37a7ff;
    --bb-brand-surface: rgba(20, 12, 42, .58);
    --bb-brand-glow: rgba(124, 44, 255, .34);
}

.bb-brand-capsule {
    position: relative;
    isolation: isolate;
    width: fit-content;
    max-width: 100%;
    padding: 7px 9px 8px;
    border: 1px solid rgba(248, 197, 55, .26);
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(124, 44, 255, .24), rgba(255, 77, 166, .08) 42%, rgba(11, 18, 32, .16)),
        var(--bb-brand-surface);
    box-shadow:
        0 14px 34px rgba(10, 7, 24, .24),
        0 0 0 1px rgba(255, 255, 255, .06) inset,
        0 0 28px var(--bb-brand-glow);
    overflow: hidden;
    transform: translateZ(0);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.bb-brand-capsule::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    background:
        linear-gradient(110deg, transparent 0 24%, rgba(255, 255, 255, .18) 38%, transparent 52%),
        radial-gradient(circle at 12% 12%, rgba(248, 197, 55, .28), transparent 34%);
    opacity: .58;
    pointer-events: none;
}

.bb-brand-capsule::after {
    content: "";
    position: absolute;
    top: -45%;
    bottom: -45%;
    left: -72%;
    width: 54%;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .32), transparent);
    transform: rotate(18deg) translateX(-10%);
    opacity: 0;
    pointer-events: none;
}

.bb-brand-capsule:hover,
.bb-brand-capsule:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(248, 197, 55, .48);
    box-shadow:
        0 18px 42px rgba(10, 7, 24, .30),
        0 0 0 1px rgba(255, 255, 255, .09) inset,
        0 0 34px rgba(124, 44, 255, .45);
}

.bb-brand-capsule:hover::after,
.bb-brand-capsule:focus-visible::after {
    animation: bb-brand-glint 1.05s ease forwards;
}

.bb-brand-logo span {
    color: rgba(255, 255, 255, .84) !important;
    text-shadow: 0 1px 10px rgba(124, 44, 255, .25);
}

.bb-brand-logo :is(.bb-logo__mark, .bb-public-logo__mark, .bb-catalog-logo__mark) img {
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .32));
}

@media (min-width: 721px) {
    .bb-brand-logo :is(.bb-logo__mark, .bb-public-logo__mark, .bb-catalog-logo__mark) {
        width: min(300px, 30vw);
    }

    .bb-brand-logo :is(.bb-logo__mark, .bb-public-logo__mark, .bb-catalog-logo__mark) img {
        max-height: 62px;
    }

    .bb-brand-capsule {
        padding: 8px 11px 9px;
        border-radius: 22px;
    }
}

.bb-top .bb-eyebrow,
.bb-catalog-top .bb-catalog-kicker {
    border-color: rgba(248, 197, 55, .28);
    background:
        linear-gradient(135deg, rgba(124, 44, 255, .25), rgba(255, 77, 166, .08)),
        rgba(255, 255, 255, .10);
    box-shadow: 0 10px 28px rgba(124, 44, 255, .12);
}

.bb-top .bb-btn-red,
.bb-catalog-top .bb-catalog-btn--red {
    background: linear-gradient(135deg, #ef2424 0%, #d61b62 52%, #7c2cff 100%);
    box-shadow:
        0 16px 36px rgba(239, 36, 36, .26),
        0 0 24px rgba(124, 44, 255, .18);
}

.bb-top .bb-btn-white,
.bb-catalog-top .bb-catalog-btn--white,
.bb-public-links a:hover,
.bb-public-links a:focus-visible {
    box-shadow: 0 0 0 1px rgba(248, 197, 55, .18), 0 14px 30px rgba(124, 44, 255, .14);
}

.bb-catalog-top .bb-catalog-panel,
.bb-top .bb-live-panel {
    border-color: rgba(248, 197, 55, .20);
    box-shadow:
        0 22px 58px rgba(11, 18, 32, .28),
        0 0 34px rgba(124, 44, 255, .10);
}

.bb-public-links a,
.bb-catalog-menu a,
.bb-menu a,
.bb-nav-links a {
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.bb-public-links a:hover,
.bb-public-links a:focus-visible,
.bb-catalog-menu a:hover,
.bb-catalog-menu a:focus-visible,
.bb-menu a:hover,
.bb-menu a:focus-visible,
.bb-nav-links a:hover,
.bb-nav-links a:focus-visible {
    border-color: rgba(248, 197, 55, .34);
    box-shadow: 0 12px 28px rgba(124, 44, 255, .14);
}

.bb-public-links .is-sale,
.bb-catalog-menu .is-sale,
.bb-menu .is-sale,
.bb-nav-links .is-sale {
    box-shadow: 0 12px 26px rgba(255, 77, 166, .14);
}

.bb-public-nav,
.bb-catalog-nav,
.bb-nav {
    position: relative;
}

.bb-public-nav::after,
.bb-catalog-nav::after,
.bb-nav::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(248, 197, 55, .24), rgba(124, 44, 255, .18), transparent);
    opacity: .72;
    pointer-events: none;
}

.bb-filter-shell,
.bb-filter-panel,
.bb-category-products,
.bb-category-seo,
.bb-category-faq,
.bb-order-cart-panel,
.bb-order-cart-form,
.bb-checkout-wizard-card,
.bb-smart-form,
.bb-public-legal-card,
.bb-public-info-card {
    border-color: rgba(124, 44, 255, .12) !important;
}

.bb-filter-shell,
.bb-category-products,
.bb-order-cart-form,
.bb-smart-form {
    background-image:
        radial-gradient(circle at 0 0, rgba(248, 197, 55, .08), transparent 26%),
        radial-gradient(circle at 100% 0, rgba(124, 44, 255, .06), transparent 28%);
    background-blend-mode: normal;
}

.bb-filter-panel__title::before,
.bb-section-head h2::before,
.bb-category-products h2::before,
.bb-order-cart-panel__head h2::before,
.bb-smart-form__head h2::before {
    content: "";
    display: inline-block;
    width: .58em;
    height: .58em;
    margin-right: .42em;
    border-radius: 999px;
    background: radial-gradient(circle at 35% 30%, #fff7b8, var(--bb-brand-gold) 42%, var(--bb-brand-purple) 100%);
    box-shadow: 0 0 16px rgba(248, 197, 55, .28);
    vertical-align: .05em;
}

.bb-smart-input:focus,
.bb-smart-form__select:focus,
.bb-filter-panel input:focus,
.bb-filter-panel select:focus,
.bb-search-card input:focus,
.bb-order-cart-field input:focus,
.bb-order-cart-field textarea:focus {
    border-color: rgba(124, 44, 255, .48) !important;
    box-shadow: 0 0 0 4px rgba(124, 44, 255, .12), 0 0 0 1px rgba(248, 197, 55, .16) inset !important;
    outline: none;
}

.bb-pwa-mobile-nav {
    border-color: rgba(248, 197, 55, .20) !important;
    box-shadow: 0 20px 44px rgba(15, 23, 42, .22), 0 0 24px rgba(124, 44, 255, .12) !important;
}

.bb-pwa-mobile-nav__item.is-active {
    background: linear-gradient(135deg, #111827 0%, var(--bb-brand-purple-dark) 58%, #1e293b 100%) !important;
}

.bb-pwa-mobile-nav__badge {
    box-shadow: 0 0 0 2px #ffffff, 0 0 14px rgba(255, 77, 166, .38) !important;
}

body.bb-order-cart-page .bb-order-cart-main {
    box-sizing: border-box !important;
}

@keyframes bb-brand-glint {
    0% {
        opacity: 0;
        transform: rotate(18deg) translateX(-10%);
    }
    18% {
        opacity: .78;
    }
    100% {
        opacity: 0;
        transform: rotate(18deg) translateX(310%);
    }
}

@media (max-width: 720px) {
    .bb-brand-capsule {
        padding: 5px 7px 6px;
        border-radius: 17px;
        box-shadow:
            0 12px 28px rgba(10, 7, 24, .22),
            0 0 0 1px rgba(255, 255, 255, .06) inset,
            0 0 22px rgba(124, 44, 255, .24);
    }

    .bb-brand-logo span {
        font-size: 12px !important;
        line-height: 1.15;
    }

    .bb-public-nav::after,
    .bb-catalog-nav::after,
    .bb-nav::after {
        opacity: .46;
    }

    .bb-filter-panel__title::before,
    .bb-section-head h2::before,
    .bb-category-products h2::before,
    .bb-order-cart-panel__head h2::before,
    .bb-smart-form__head h2::before {
        width: .48em;
        height: .48em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bb-brand-capsule,
    .bb-brand-capsule::after,
    .bb-brand-logo :is(.bb-logo__mark, .bb-public-logo__mark, .bb-catalog-logo__mark) img,
    .bb-public-links a,
    .bb-catalog-menu a,
    .bb-menu a,
    .bb-nav-links a {
        animation: none !important;
        transition: none !important;
    }

    .bb-brand-capsule:hover,
    .bb-brand-capsule:focus-visible {
        transform: none;
    }
}