/* ============================================================
   BAGBUZZ Design System — Phase 1
   ============================================================ */

/* --- CSS Variables ---------------------------------------- */
:root {
    --bb-deep-navy:   #07182D;
    --bb-navy:        #0B1F3A;
    --bb-gold:        #D4AF37;
    --bb-soft-gold:   #F2D675;
    --bb-white:       #FFFFFF;
    --bb-light-bg:    #F7F4EF;
    --bb-dark-text:   #1C1C1C;
    --bb-muted:       #6c757d;
    --bb-border:      rgba(212, 175, 55, 0.2);

    --bb-font-heading: 'Cormorant Garamond', Georgia, serif;
    --bb-font-body:    'Poppins', sans-serif;

    --bb-transition: 0.25s ease;
    --bb-radius:     6px;
    --bb-shadow:     0 4px 24px rgba(7, 24, 45, 0.10);
}

/* --- Reset & Base ----------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--bb-font-body);
    font-size: 15px;
    color: var(--bb-dark-text);
    background-color: var(--bb-white);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* --- Typography ------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--bb-font-heading);
    font-weight: 600;
    color: var(--bb-deep-navy);
    line-height: 1.2;
}

h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); }

a {
    color: var(--bb-gold);
    text-decoration: none;
    transition: color var(--bb-transition);
}
a:hover { color: var(--bb-soft-gold); }

/* --- Announcement Bar ------------------------------------- */
.bb-announcement-bar {
    background: var(--bb-deep-navy);
    color: var(--bb-soft-gold);
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.05em;
    padding: 8px 16px;
}

/* --- Navbar ----------------------------------------------- */
.bb-navbar {
    background: #FFFFFF;
    padding: 14px 0;
    border-bottom: 1px solid rgba(212, 175, 55, 0.18);
    box-shadow: 0 2px 16px rgba(7, 24, 45, 0.08);
}

.bb-brand {
    font-family: var(--bb-font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--bb-deep-navy) !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.bb-brand:hover { color: var(--bb-gold) !important; }

.bb-navbar .nav-link {
    color: var(--bb-deep-navy) !important;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 14px !important;
    transition: color var(--bb-transition);
    position: relative;
}
.bb-navbar .nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 14px;
    right: 14px;
    height: 1px;
    background: var(--bb-gold);
    transform: scaleX(0);
    transition: transform var(--bb-transition);
}
.bb-navbar .nav-link:hover,
.bb-navbar .nav-link.active {
    color: var(--bb-gold) !important;
}
.bb-navbar .nav-link:hover::after,
.bb-navbar .nav-link.active::after {
    transform: scaleX(1);
}

/* Navbar Icons */
.bb-nav-icons { gap: 20px; }

.bb-icon-link {
    color: var(--bb-deep-navy);
    font-size: 1.1rem;
    transition: color var(--bb-transition);
    position: relative;
    display: flex;
    align-items: center;
}
.bb-icon-link:hover { color: var(--bb-gold); }

.bb-cart-icon { position: relative; }
.bb-cart-count {
    position: absolute;
    top: -8px;
    right: -10px;
    background: var(--bb-gold);
    color: var(--bb-deep-navy);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

/* Mobile toggler */
.bb-navbar .navbar-toggler {
    border-color: rgba(7, 24, 45, 0.25);
}
.bb-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(7,24,45,0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* --- Buttons ---------------------------------------------- */
.bb-btn-primary {
    display: inline-block;
    background: var(--bb-gold);
    color: var(--bb-deep-navy);
    font-family: var(--bb-font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 14px 36px;
    border: 2px solid var(--bb-gold);
    border-radius: var(--bb-radius);
    cursor: pointer;
    transition: background var(--bb-transition), color var(--bb-transition), transform var(--bb-transition);
    text-decoration: none;
}
.bb-btn-primary:hover {
    background: var(--bb-soft-gold);
    border-color: var(--bb-soft-gold);
    color: var(--bb-deep-navy);
    transform: translateY(-1px);
}

.bb-btn-outline {
    display: inline-block;
    background: transparent;
    color: var(--bb-white);
    font-family: var(--bb-font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 14px 36px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--bb-radius);
    cursor: pointer;
    transition: background var(--bb-transition), color var(--bb-transition), border-color var(--bb-transition), transform var(--bb-transition);
    text-decoration: none;
}
.bb-btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--bb-white);
    color: var(--bb-white);
    transform: translateY(-1px);
}

/* --- Section Spacing -------------------------------------- */
.bb-section {
    padding: 80px 0;
}
.bb-section-sm {
    padding: 48px 0;
}
.bb-section-title {
    font-family: var(--bb-font-heading);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    color: var(--bb-deep-navy);
    margin-bottom: 12px;
}
.bb-section-subtitle {
    color: var(--bb-muted);
    font-size: 15px;
    max-width: 520px;
    margin: 0 auto 48px;
}

/* --- Card Base -------------------------------------------- */
.bb-card {
    background: var(--bb-white);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--bb-radius);
    box-shadow: var(--bb-shadow);
    transition: box-shadow var(--bb-transition), transform var(--bb-transition);
    overflow: hidden;
}
.bb-card:hover {
    box-shadow: 0 8px 40px rgba(7, 24, 45, 0.15);
    transform: translateY(-2px);
}

/* --- Hero Section ----------------------------------------- */
.bb-hero {
    background: linear-gradient(135deg, var(--bb-deep-navy) 0%, var(--bb-navy) 60%, #0e2d52 100%);
    color: var(--bb-white);
    display: block;
    position: relative;
    overflow: visible;
}
.bb-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 50%, rgba(212, 175, 55, 0.08) 0%, transparent 65%);
    pointer-events: none;
}
.bb-hero-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bb-gold);
    margin-bottom: 16px;
    display: block;
}
.bb-hero-title {
    font-family: var(--bb-font-heading);
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 700;
    color: var(--bb-white);
    line-height: 1.1;
    margin-bottom: 24px;
}
.bb-hero-title span {
    color: var(--bb-gold);
}
.bb-hero-subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.72);
    max-width: 480px;
    margin-bottom: 40px;
    line-height: 1.8;
}
.bb-hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.bb-hero-deco {
    position: absolute;
    right: -60px;
    top: 50%;
    transform: translateY(-50%);
    width: 520px;
    height: 520px;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.12);
    pointer-events: none;
}
.bb-hero-deco::before {
    content: '';
    position: absolute;
    inset: 40px;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.08);
}

/* --- Footer ----------------------------------------------- */
.bb-footer {
    background: var(--bb-deep-navy);
    color: rgba(255, 255, 255, 0.70);
    padding-top: 72px;
}

.bb-footer-brand {
    font-family: var(--bb-font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--bb-gold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.bb-footer-tagline {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.7;
    max-width: 300px;
}

.bb-footer-heading {
    font-family: var(--bb-font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--bb-gold);
    margin-bottom: 20px;
}

.bb-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.bb-footer-links li { margin-bottom: 10px; }
.bb-footer-links a {
    color: rgba(255, 255, 255, 0.60);
    font-size: 14px;
    transition: color var(--bb-transition);
}
.bb-footer-links a:hover { color: var(--bb-gold); }

.bb-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: rgba(255, 255, 255, 0.70);
    font-size: 1rem;
    transition: background var(--bb-transition), color var(--bb-transition), border-color var(--bb-transition);
}
.bb-social-link:hover {
    background: var(--bb-gold);
    border-color: var(--bb-gold);
    color: var(--bb-deep-navy);
}

.bb-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 24px 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.35);
}

/* --- Utility ---------------------------------------------- */
.bb-gold-text  { color: var(--bb-gold); }
.bb-navy-text  { color: var(--bb-navy); }
.bb-light-bg   { background-color: var(--bb-light-bg); }

/* ============================================================
   BAGBUZZ Admin — Phase 2A
   ============================================================ */

/* --- Admin Login ------------------------------------------ */
.admin-login-body {
    background: #0d1b2e;
    background-image: radial-gradient(ellipse at 50% 30%, rgba(212,175,55,.07) 0%, transparent 65%);
}
.admin-login-card {
    background: #fff;
    border-radius: 10px;
    padding: 40px 36px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 12px 48px rgba(0,0,0,.35);
}
.admin-login-brand {
    font-family: var(--bb-font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--bb-deep-navy);
    letter-spacing: .1em;
    text-align: center;
    margin-bottom: 28px;
    line-height: 1;
}
.admin-login-brand span {
    display: block;
    font-family: var(--bb-font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bb-gold);
    margin-top: 4px;
}
.admin-login-btn {
    background: var(--bb-deep-navy);
    color: #fff;
    border: none;
    padding: 12px;
    font-weight: 600;
    font-size: 14px;
    border-radius: var(--bb-radius);
    transition: background var(--bb-transition);
}
.admin-login-btn:hover {
    background: var(--bb-navy);
    color: #fff;
}
.admin-login-back a {
    font-size: 13px;
    color: var(--bb-muted);
}
.admin-login-back a:hover { color: var(--bb-deep-navy); }

/* --- Admin Layout ----------------------------------------- */
.admin-body { background: #f0f3f7; font-family: var(--bb-font-body); }

.admin-wrapper {
    display: flex;
    min-height: 100vh;
}

/* --- Sidebar ---------------------------------------------- */
.admin-sidebar {
    width: 220px;
    min-width: 220px;
    background: var(--bb-deep-navy);
    min-height: 100vh;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.admin-sidebar-brand {
    padding: 24px 20px 16px;
    font-family: var(--bb-font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--bb-gold);
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1;
    border-bottom: 1px solid rgba(255,255,255,.06);
    margin-bottom: 12px;
}
.admin-sidebar-brand a { color: inherit; }
.admin-sidebar-brand a:hover { color: var(--bb-soft-gold); }
.admin-sidebar-sub {
    display: block;
    font-family: var(--bb-font-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.35);
    margin-top: 3px;
}

.admin-nav { padding: 4px 0; }
.admin-nav-divider {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.25);
    padding: 14px 20px 4px;
}
.admin-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    color: rgba(255,255,255,.65);
    font-size: 13.5px;
    font-weight: 400;
    text-decoration: none;
    transition: color var(--bb-transition), background var(--bb-transition);
    border-left: 3px solid transparent;
}
.admin-nav-link:hover {
    color: var(--bb-soft-gold);
    background: rgba(255,255,255,.04);
}
.admin-nav-link.active {
    color: var(--bb-gold);
    background: rgba(212,175,55,.08);
    border-left-color: var(--bb-gold);
    font-weight: 500;
}
.admin-nav-link.admin-nav-soon {
    color: rgba(255,255,255,.3);
    cursor: default;
}
.admin-nav-link.admin-nav-soon:hover {
    color: rgba(255,255,255,.3);
    background: none;
}
.admin-nav-logout { color: rgba(255,100,100,.7); }
.admin-nav-logout:hover { color: #ff6b6b; }

.admin-soon-badge {
    font-size: 10px;
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.4);
    padding: 1px 7px;
    border-radius: 20px;
    margin-left: auto;
    font-weight: 500;
}

.admin-sidebar-footer {
    border-top: 1px solid rgba(255,255,255,.06);
    padding: 8px 0;
}

/* --- Top Bar ---------------------------------------------- */
.admin-topbar {
    background: #fff;
    border-bottom: 1px solid #e8eaed;
    padding: 14px 24px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.admin-topbar-user {
    font-size: 13.5px;
    color: var(--bb-muted);
    font-weight: 500;
}

/* --- Content ---------------------------------------------- */
.admin-main-content { min-height: calc(100vh - 55px); }

.admin-page-heading {
    font-family: var(--bb-font-heading);
    font-size: 1.6rem;
    color: var(--bb-deep-navy);
    font-weight: 600;
}

/* --- Stat Cards ------------------------------------------- */
.admin-stat-card {
    background: #fff;
    border-radius: var(--bb-radius);
    padding: 20px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
    border: 1px solid #eef0f4;
}
.admin-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.admin-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--bb-deep-navy);
    line-height: 1;
}
.admin-stat-label {
    font-size: 12px;
    color: var(--bb-muted);
    margin-top: 3px;
    font-weight: 500;
}

/* --- Admin Cards ------------------------------------------ */
.admin-card {
    background: #fff;
    border-radius: var(--bb-radius);
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
    border: 1px solid #eef0f4;
}
.admin-card-heading {
    font-size: 14px;
    font-weight: 600;
    color: var(--bb-deep-navy);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* --- Admin Table ------------------------------------------ */
.admin-table thead th {
    background: #f7f8fb;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--bb-muted);
    border-bottom: 1px solid #e8eaed;
    padding: 12px 14px;
    vertical-align: middle;
}
.admin-table tbody td {
    padding: 12px 14px;
    vertical-align: middle;
    border-bottom: 1px solid #f1f3f6;
    font-size: 14px;
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover { background: #fafbfd; }

.admin-thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid #e8eaed;
}

/* --- Badges ---------------------------------------------- */
.admin-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: .04em;
}
.admin-badge-success   { background: #d1fae5; color: #065f46; }
.admin-badge-secondary { background: #f1f3f6; color: #6c757d; }

/* --- Action Buttons --------------------------------------- */
.admin-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    font-size: 13px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--bb-transition), color var(--bb-transition);
    background: none;
    padding: 0;
}
.admin-action-edit  { color: #0d6efd; background: rgba(13,110,253,.08); }
.admin-action-edit:hover  { background: rgba(13,110,253,.18); color: #0d6efd; }
.admin-action-delete { color: #dc3545; background: rgba(220,53,69,.08); }
.admin-action-delete:hover { background: rgba(220,53,69,.18); color: #dc3545; }

/* --- Admin Buttons ---------------------------------------- */
.admin-btn-primary {
    background: var(--bb-deep-navy);
    color: #fff;
    border: 2px solid var(--bb-deep-navy);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: var(--bb-radius);
    transition: background var(--bb-transition);
    text-decoration: none;
}
.admin-btn-primary:hover { background: var(--bb-navy); border-color: var(--bb-navy); color: #fff; }

.admin-btn-outline {
    background: transparent;
    color: var(--bb-deep-navy);
    border: 2px solid #c8cdd5;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: var(--bb-radius);
    transition: border-color var(--bb-transition), color var(--bb-transition);
    text-decoration: none;
}
.admin-btn-outline:hover { border-color: var(--bb-deep-navy); color: var(--bb-deep-navy); }

/* --- Active filter summary bar — Phase 9B --------- */
.admin-filter-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 13px;
    color: #444;
    background: #F7F4EF;
    border-left: 3px solid var(--bb-gold);
    border-radius: 4px;
    padding: 8px 14px;
}
.admin-filter-clear {
    color: var(--bb-gold);
    text-decoration: none;
    font-weight: 600;
    font-size: 12px;
}
.admin-filter-clear:hover { text-decoration: underline; }

/* --- Form Controls ---------------------------------------- */
.admin-form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--bb-deep-navy);
    margin-bottom: 6px;
}
.admin-form-control {
    font-size: 14px;
    border-color: #dde1e9;
    border-radius: var(--bb-radius);
    padding: 9px 12px;
    color: var(--bb-dark-text);
    transition: border-color var(--bb-transition), box-shadow var(--bb-transition);
}
.admin-form-control:focus {
    border-color: var(--bb-gold);
    box-shadow: 0 0 0 3px rgba(212,175,55,.15);
    outline: none;
}
.admin-field-hint {
    font-size: 12px;
    color: var(--bb-muted);
    margin-top: 5px;
}

/* --- Empty State ------------------------------------------ */
.admin-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--bb-muted);
}
.admin-empty-state i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 12px;
    color: #ced4da;
}
.admin-empty-state p {
    margin-bottom: 20px;
    font-size: 15px;
}

/* --- Product Table ---------------------------------------- */
.admin-cell-name {
    display: block;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

/* Gold / featured badge */
.admin-badge-gold { background: rgba(212,175,55,.15); color: #9a7b10; }

/* --- Product Image Manager -------------------------------- */
.admin-img-card {
    border: 1px solid #e8eaed;
    border-radius: var(--bb-radius);
    overflow: hidden;
    background: #fff;
    transition: box-shadow var(--bb-transition);
}
.admin-img-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }

.admin-img-preview {
    width: 100%;
    padding-top: 100%; /* 1:1 square */
    position: relative;
    background: #f7f8fb;
    overflow: hidden;
}
.admin-img-preview img.admin-img-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-img-primary-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: var(--bb-gold);
    color: var(--bb-deep-navy);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 3px;
    pointer-events: none;
}

.admin-img-controls { border-top: 1px solid #f0f2f5; }

/* Thumbnail placeholder (no image) */
.admin-thumb-placeholder {
    width: 44px;
    height: 44px;
    border-radius: 5px;
    background: #f0f3f7;
    border: 1px solid #e8eaed;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ced4da;
    font-size: 1rem;
}

/* --- Responsive Admin ------------------------------------- */
@media (max-width: 768px) {
    .admin-sidebar {
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: auto;
        position: relative;
    }
    .admin-wrapper { flex-direction: column; }
    .admin-content { min-height: 0; }
}

/* ============================================================
   Phase 2D — Public Shop & Product Detail
   ============================================================ */

/* --- Shop Header ------------------------------------------ */
.bb-shop-header {
    background: var(--bb-deep-navy);
    padding: 40px 0 32px;
    color: var(--bb-white);
}
.bb-shop-header-title {
    font-family: var(--bb-font-heading);
    font-size: 2.4rem;
    font-weight: 600;
    color: var(--bb-white);
    margin: 0;
    line-height: 1.2;
}

/* --- Breadcrumb ------------------------------------------- */
.bb-breadcrumb {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.bb-breadcrumb a {
    color: rgba(255,255,255,0.75);
    text-decoration: none;
}
.bb-breadcrumb a:hover { color: var(--bb-gold); }
.bb-breadcrumb .sep { opacity: .45; }

/* Public-page breadcrumb (light bg context) */
.container > .bb-breadcrumb {
    color: var(--bb-muted);
    padding: 18px 0 6px;
}
.container > .bb-breadcrumb a { color: var(--bb-muted); }
.container > .bb-breadcrumb a:hover { color: var(--bb-gold); }

/* --- Category Pills --------------------------------------- */
.bb-pill-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.bb-pill {
    display: inline-block;
    padding: 6px 18px;
    border-radius: 99px;
    border: 1px solid var(--bb-border);
    background: var(--bb-white);
    color: var(--bb-dark-text);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--bb-transition), color var(--bb-transition), border-color var(--bb-transition);
}
.bb-pill:hover {
    background: var(--bb-deep-navy);
    color: var(--bb-white);
    border-color: var(--bb-deep-navy);
}
.bb-pill.active {
    background: var(--bb-deep-navy);
    color: var(--bb-gold);
    border-color: var(--bb-deep-navy);
}

/* --- Product Card ----------------------------------------- */
.bb-product-card {
    background: var(--bb-white);
    border-radius: var(--bb-radius);
    overflow: hidden;
    box-shadow: var(--bb-shadow);
    transition: transform var(--bb-transition), box-shadow var(--bb-transition);
}
.bb-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(7,24,45,0.14);
}

.bb-product-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--bb-light-bg);
}
.bb-product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.bb-product-card:hover .bb-product-img {
    transform: scale(1.04);
}
.bb-product-img-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bb-light-bg);
}
.bb-product-img-placeholder span {
    font-family: var(--bb-font-heading);
    font-size: 18px;
    font-weight: 600;
    color: rgba(7,24,45,0.18);
    letter-spacing: .12em;
}

.bb-product-info {
    padding: 16px 16px 20px;
}
.bb-product-category {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bb-gold);
    margin-bottom: 6px;
}
.bb-product-name {
    font-family: var(--bb-font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--bb-deep-navy);
    margin-bottom: 10px;
    line-height: 1.3;
}
.bb-price-group {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
}
.bb-price-regular, .bb-price-sale {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bb-deep-navy);
}
.bb-price-original {
    font-size: .82rem;
    color: var(--bb-muted);
    text-decoration: line-through;
}
.bb-view-btn {
    margin-top: 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bb-gold);
    letter-spacing: .04em;
    transition: color var(--bb-transition);
}
.bb-product-card:hover .bb-view-btn { color: var(--bb-deep-navy); }

/* --- Sale & Stock Badges ---------------------------------- */
.bb-sale-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #c0392b;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 3px 9px;
    border-radius: 4px;
    z-index: 2;
}
.bb-stock-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    letter-spacing: .04em;
}
.bb-stock-badge.in-stock  { background: #d4edda; color: #155724; }
.bb-stock-badge.out-stock { background: #f8d7da; color: #721c24; }

/* --- Product Detail: Gallery ------------------------------ */
.bb-gallery-main {
    background: var(--bb-light-bg);
    border-radius: var(--bb-radius);
    overflow: hidden;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bb-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s ease;
}
.bb-gallery-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.bb-gallery-thumb {
    width: 72px;
    height: 72px;
    border: 2px solid transparent;
    border-radius: var(--bb-radius);
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    background: var(--bb-light-bg);
    transition: border-color var(--bb-transition);
    flex-shrink: 0;
}
.bb-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.bb-gallery-thumb:hover  { border-color: var(--bb-gold); }
.bb-gallery-thumb.active { border-color: var(--bb-deep-navy); }

/* --- Product Detail: Info --------------------------------- */
.bb-product-detail-category {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bb-gold);
    margin-bottom: 8px;
}
.bb-product-detail-name {
    font-family: var(--bb-font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--bb-deep-navy);
    line-height: 1.2;
    margin-bottom: 8px;
}
.bb-product-detail-sku {
    font-size: 12px;
    color: var(--bb-muted);
    margin-bottom: 18px;
    letter-spacing: .04em;
}
.bb-detail-price-wrap {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 14px;
}
.bb-detail-price-regular,
.bb-detail-price-sale {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--bb-deep-navy);
}
.bb-detail-price-original {
    font-size: 1rem;
    color: var(--bb-muted);
    text-decoration: line-through;
}
.bb-discount-tag {
    background: #fef3cd;
    color: #856404;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 4px;
}
.bb-short-desc {
    font-size: 14.5px;
    color: #444;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* --- Product Meta Grid ------------------------------------ */
.bb-product-meta-grid {
    border-top: 1px solid var(--bb-border);
    border-bottom: 1px solid var(--bb-border);
    padding: 14px 0;
    margin-bottom: 22px;
}
.bb-product-meta-row {
    display: flex;
    gap: 12px;
    padding: 5px 0;
    font-size: 13.5px;
}
.bb-meta-label {
    min-width: 130px;
    color: var(--bb-muted);
    font-weight: 500;
}
.bb-meta-value {
    color: var(--bb-dark-text);
    font-weight: 500;
}

/* --- Qty Input & CTA Buttons ------------------------------ */
.bb-qty-group {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.bb-qty-label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bb-dark-text);
}
.bb-qty-input {
    width: 72px;
    padding: 7px 10px;
    border: 1px solid #dee2e6;
    border-radius: var(--bb-radius);
    font-size: 14px;
    text-align: center;
    background: #f5f5f5;
    cursor: not-allowed;
    color: var(--bb-muted);
}

.bb-btn-coming {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 13px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--bb-radius);
    margin-bottom: 10px;
    cursor: not-allowed;
    opacity: .72;
    border: none;
    transition: none;
}
.bb-btn-coming-primary {
    background: var(--bb-deep-navy);
    color: var(--bb-white);
}
.bb-btn-coming-outline {
    background: transparent;
    color: var(--bb-deep-navy);
    border: 1.5px solid var(--bb-deep-navy) !important;
}

/* --- Trust Points ----------------------------------------- */
.bb-trust-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--bb-border);
}
.bb-trust-item {
    font-size: 12.5px;
    color: var(--bb-dark-text);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 7px;
}
.bb-trust-item i {
    color: var(--bb-gold);
    font-size: 15px;
    flex-shrink: 0;
}

/* --- Description / Specs / Shipping ----------------------- */
.bb-light-bg { background: var(--bb-light-bg); }
.bb-product-tabs { padding: 50px 0; }
.bb-product-section {
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--bb-border);
}
.bb-product-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.bb-section-sub-heading {
    font-family: var(--bb-font-heading);
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--bb-deep-navy);
    margin-bottom: 14px;
}
.bb-product-description,
.bb-product-specs {
    font-size: 14.5px;
    line-height: 1.9;
    color: #444;
    white-space: pre-line;
}

/* --- Responsive: Phase 2D --------------------------------- */
@media (max-width: 767px) {
    .bb-shop-header-title { font-size: 1.7rem; }
    .bb-product-detail-name { font-size: 1.5rem; }
    .bb-detail-price-regular,
    .bb-detail-price-sale { font-size: 1.3rem; }
    .bb-gallery-thumb { width: 58px; height: 58px; }
    .bb-trust-points { grid-template-columns: 1fr; gap: 8px; }
    .bb-product-tabs { padding: 36px 0; }
}

/* ============================================================
   Phase 3A — Session Cart
   ============================================================ */

/* --- Fix qty input: disabled vs enabled ------------------- */
.bb-qty-input {
    background: var(--bb-white);
    cursor: text;
    color: var(--bb-dark-text);
    border: 1.5px solid #ced4da;
}
.bb-qty-input:focus {
    outline: none;
    border-color: var(--bb-gold);
}
.bb-qty-input:disabled {
    background: #f5f5f5;
    cursor: not-allowed;
    color: var(--bb-muted);
    border-color: #e9ecef;
}

/* --- Add to Cart button on product detail page ------------ */
.bb-btn-atc {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 20px;
    background: var(--bb-deep-navy);
    color: var(--bb-white);
    border: none;
    border-radius: var(--bb-radius);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--bb-transition), color var(--bb-transition);
    width: 100%;
    margin-bottom: 10px;
    font-family: var(--bb-font-body);
}
.bb-btn-atc:hover {
    background: var(--bb-gold);
    color: var(--bb-deep-navy);
}

/* --- Product Card: restructured for action buttons -------- */
.bb-product-card-top {
    display: block;
}
.bb-product-card-top:hover .bb-product-img {
    transform: scale(1.04);
}
.bb-product-actions {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bb-product-actions .bb-view-btn {
    display: block;
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bb-muted);
    text-decoration: none;
    transition: color var(--bb-transition);
    padding: 4px 0;
}
.bb-product-card:hover .bb-product-actions .bb-view-btn {
    color: var(--bb-deep-navy);
}
.bb-btn-add-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 9px 16px;
    background: var(--bb-deep-navy);
    color: var(--bb-white);
    border: none;
    border-radius: var(--bb-radius);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--bb-transition), color var(--bb-transition);
    font-family: var(--bb-font-body);
}
.bb-btn-add-cart:hover {
    background: var(--bb-gold);
    color: var(--bb-deep-navy);
}
.bb-btn-out-stock-sm {
    width: 100%;
    padding: 9px 16px;
    background: #f5f5f5;
    color: var(--bb-muted);
    border: 1px solid #e0e0e0;
    border-radius: var(--bb-radius);
    font-size: 13px;
    font-weight: 600;
    cursor: not-allowed;
    font-family: var(--bb-font-body);
}

/* --- Cart Page -------------------------------------------- */
.bb-cart-item {
    background: var(--bb-white);
    border-radius: var(--bb-radius);
    padding: 18px;
    margin-bottom: 14px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    box-shadow: var(--bb-shadow);
}
.bb-cart-img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: var(--bb-radius);
    flex-shrink: 0;
    display: block;
}
.bb-cart-img-placeholder {
    width: 96px;
    height: 96px;
    background: var(--bb-light-bg);
    border-radius: var(--bb-radius);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--bb-font-heading);
    font-size: 11px;
    font-weight: 600;
    color: rgba(7,24,45,.2);
    letter-spacing: .08em;
}
.bb-cart-item-body {
    flex: 1;
    min-width: 0;
}
.bb-cart-item-name {
    display: block;
    font-family: var(--bb-font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--bb-deep-navy);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--bb-transition);
}
.bb-cart-item-name:hover { color: var(--bb-gold); }
.bb-cart-item-meta {
    font-size: 12px;
    color: var(--bb-muted);
    margin-bottom: 8px;
}
.bb-cart-item-price {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bb-dark-text);
    margin-bottom: 12px;
}
.bb-cart-was-price {
    font-size: 12px;
    font-weight: 400;
    color: var(--bb-muted);
    text-decoration: line-through;
    margin-left: 6px;
}
.bb-cart-item-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.bb-cart-update-form {
    display: flex;
    align-items: center;
    gap: 8px;
}
.bb-cart-qty-input {
    width: 64px;
    padding: 6px 8px;
    border: 1.5px solid #ced4da;
    border-radius: var(--bb-radius);
    font-size: 13.5px;
    text-align: center;
    font-family: var(--bb-font-body);
}
.bb-cart-qty-input:focus {
    outline: none;
    border-color: var(--bb-gold);
}
.bb-btn-sm-outline {
    padding: 5px 14px;
    background: transparent;
    color: var(--bb-deep-navy);
    border: 1.5px solid var(--bb-deep-navy);
    border-radius: var(--bb-radius);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--bb-transition), color var(--bb-transition);
    font-family: var(--bb-font-body);
}
.bb-btn-sm-outline:hover {
    background: var(--bb-deep-navy);
    color: var(--bb-white);
}
.bb-btn-sm-danger {
    padding: 5px 14px;
    background: transparent;
    color: #c0392b;
    border: 1.5px solid #c0392b;
    border-radius: var(--bb-radius);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--bb-transition), color var(--bb-transition);
    font-family: var(--bb-font-body);
    display: flex;
    align-items: center;
    gap: 5px;
}
.bb-btn-sm-danger:hover {
    background: #c0392b;
    color: var(--bb-white);
}
.bb-cart-item-total {
    font-size: 1rem;
    font-weight: 700;
    color: var(--bb-deep-navy);
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 2px;
}

/* --- Cart Summary ----------------------------------------- */
.bb-cart-summary {
    background: var(--bb-white);
    border-radius: var(--bb-radius);
    padding: 26px;
    box-shadow: var(--bb-shadow);
    position: sticky;
    top: 80px;
}
.bb-cart-summary-title {
    font-family: var(--bb-font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--bb-deep-navy);
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--bb-border);
}
.bb-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--bb-border);
    font-size: 14px;
}
.bb-summary-row:last-of-type { border-bottom: none; }
.bb-summary-label { color: var(--bb-muted); font-weight: 500; }
.bb-summary-value { font-weight: 600; color: var(--bb-dark-text); }
.bb-summary-total .bb-summary-label,
.bb-summary-total .bb-summary-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bb-deep-navy);
}
.bb-btn-checkout-soon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 20px;
    background: #adb5bd;
    color: var(--bb-white);
    border: none;
    border-radius: var(--bb-radius);
    font-size: 14.5px;
    font-weight: 600;
    cursor: not-allowed;
    opacity: .8;
    font-family: var(--bb-font-body);
}

/* --- Empty Cart ------------------------------------------- */
.bb-cart-empty {
    text-align: center;
    padding: 70px 20px;
}
.bb-cart-empty i {
    font-size: 4rem;
    color: #ced4da;
    display: block;
    margin-bottom: 20px;
}

/* --- Responsive: Cart ------------------------------------- */
@media (max-width: 767px) {
    .bb-cart-item {
        flex-wrap: wrap;
        gap: 14px;
    }
    .bb-cart-img,
    .bb-cart-img-placeholder {
        width: 76px;
        height: 76px;
    }
    .bb-cart-item-total {
        width: 100%;
        text-align: right;
        font-size: .95rem;
        padding-top: 0;
        border-top: 1px solid var(--bb-border);
        padding-top: 10px;
        margin-top: 4px;
    }
    .bb-cart-item-name { font-size: .95rem; }
    .bb-cart-summary { position: static; }
}

/* ============================================================
   Phase 3B — Session Wishlist
   ============================================================ */

/* --- Wishlist count badge in header ----------------------- */
.bb-wish-icon {
    position: relative;
}
.bb-wish-count {
    position: absolute;
    top: -6px;
    right: -8px;
    background: var(--bb-gold);
    color: var(--bb-deep-navy);
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

/* --- Product card: btns row (cart + wishlist side by side) - */
.bb-product-btns {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.bb-product-btns > form {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.bb-product-btns > form .bb-btn-add-cart,
.bb-product-btns > form .bb-btn-out-stock-sm {
    flex: 1;
    height: 40px;
    padding: 8px 12px;
}

/* --- Wishlist heart icon button (compact — in cards) ------- */
.bb-btn-wish {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: transparent;
    border: 1.5px solid #ced4da;
    border-radius: var(--bb-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--bb-muted);
    transition: border-color var(--bb-transition), background var(--bb-transition), color var(--bb-transition);
    font-size: 15px;
    padding: 0;
    align-self: stretch;
}
.bb-btn-wish:hover {
    border-color: var(--bb-gold);
    color: var(--bb-gold);
    background: #fffbf0;
}
.bb-btn-wish.wishlisted {
    border-color: var(--bb-gold);
    background: var(--bb-gold);
    color: var(--bb-deep-navy);
}
.bb-btn-wish.wishlisted:hover {
    background: #c0392b;
    border-color: #c0392b;
    color: var(--bb-white);
}

/* --- Wishlist button on product detail page --------------- */
.bb-btn-wish-detail {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 13px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--bb-radius);
    margin-bottom: 10px;
    cursor: pointer;
    border: 1.5px solid var(--bb-deep-navy);
    background: transparent;
    color: var(--bb-deep-navy);
    transition: background var(--bb-transition), color var(--bb-transition), border-color var(--bb-transition);
    font-family: var(--bb-font-body);
}
.bb-btn-wish-detail:hover {
    background: var(--bb-deep-navy);
    color: var(--bb-white);
}
.bb-btn-wish-detail.wishlisted {
    background: #fff8e6;
    border-color: var(--bb-gold);
    color: #7a6000;
}
.bb-btn-wish-detail.wishlisted:hover {
    background: #c0392b;
    border-color: #c0392b;
    color: var(--bb-white);
}

/* --- Responsive: Phase 3B --------------------------------- */
@media (max-width: 480px) {
    .bb-product-btns > form .bb-btn-add-cart,
    .bb-product-btns > form .bb-btn-out-stock-sm {
        font-size: 12px;
        padding: 8px 8px;
    }
}

/* ============================================================
   Phase 3C — Guest Checkout & Order
   ============================================================ */

/* --- Checkout / Place Order button (shared with cart) ----- */
.bb-btn-place-order {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 24px;
    background: var(--bb-deep-navy);
    color: var(--bb-white);
    border: none;
    border-radius: var(--bb-radius);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--bb-transition), color var(--bb-transition);
    font-family: var(--bb-font-body);
    letter-spacing: .02em;
}
.bb-btn-place-order:hover {
    background: var(--bb-gold);
    color: var(--bb-deep-navy);
}

/* --- Checkout Form Cards ---------------------------------- */
.bb-checkout-card {
    background: var(--bb-white);
    border-radius: var(--bb-radius);
    padding: 24px;
    box-shadow: var(--bb-shadow);
}
.bb-checkout-card-title {
    font-family: var(--bb-font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--bb-deep-navy);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bb-border);
    display: flex;
    align-items: center;
    gap: 4px;
}
.bb-optional-tag {
    font-family: var(--bb-font-body);
    font-size: 12px;
    font-weight: 400;
    color: var(--bb-muted);
    margin-left: 8px;
}
.bb-form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--bb-dark-text);
    margin-bottom: 6px;
    display: block;
}
.bb-form-input {
    font-family: var(--bb-font-body);
    font-size: 14px;
    border: 1.5px solid #ced4da;
    border-radius: var(--bb-radius);
    padding: 10px 14px;
    color: var(--bb-dark-text);
    transition: border-color var(--bb-transition), box-shadow var(--bb-transition);
}
.bb-form-input:focus {
    border-color: var(--bb-gold);
    box-shadow: 0 0 0 3px rgba(212,175,55,.15);
    outline: none;
}
.bb-form-input[readonly] {
    background: var(--bb-light-bg);
    cursor: default;
    color: var(--bb-muted);
}

/* --- Payment Method Option -------------------------------- */
.bb-payment-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid var(--bb-gold);
    border-radius: var(--bb-radius);
    background: #fffdf5;
    cursor: pointer;
}
.bb-payment-option input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--bb-deep-navy);
    flex-shrink: 0;
}
.bb-payment-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--bb-deep-navy);
}
.bb-payment-label i { font-size: 20px; color: var(--bb-gold); }
.bb-payment-label span { display: flex; flex-direction: column; }
.bb-payment-label small {
    font-size: 12px;
    font-weight: 400;
    color: var(--bb-muted);
    margin-top: 2px;
}

/* --- Checkout Order Summary ------------------------------- */
.bb-checkout-summary {
    background: var(--bb-white);
    border-radius: var(--bb-radius);
    padding: 24px;
    box-shadow: var(--bb-shadow);
    position: sticky;
    top: 80px;
}
.bb-checkout-items {
    margin-bottom: 8px;
}
.bb-checkout-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--bb-border);
}
.bb-checkout-item:last-child { border-bottom: none; }
.bb-checkout-item-img-wrap {
    position: relative;
    flex-shrink: 0;
}
.bb-checkout-item-img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}
.bb-checkout-item-img-ph {
    width: 52px;
    height: 52px;
    background: var(--bb-light-bg);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--bb-font-heading);
    font-size: 10px;
    font-weight: 700;
    color: rgba(7,24,45,.2);
    letter-spacing: .06em;
}
.bb-checkout-item-qty {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--bb-deep-navy);
    color: var(--bb-white);
    font-size: 10px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bb-checkout-item-name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--bb-dark-text);
    line-height: 1.4;
}
.bb-checkout-item-total {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--bb-deep-navy);
    white-space: nowrap;
    flex-shrink: 0;
}
.bb-checkout-divider {
    border-top: 1px solid var(--bb-border);
    margin: 12px 0;
}

/* --- Order Success Page ----------------------------------- */
.bb-success-wrap {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px 0 60px;
    text-align: center;
}
.bb-success-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #d4edda;
    color: #155724;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 24px;
}
.bb-success-title {
    font-family: var(--bb-font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--bb-deep-navy);
    margin-bottom: 12px;
}
.bb-success-subtitle {
    font-size: 15px;
    color: var(--bb-muted);
    max-width: 420px;
    margin: 0 auto 32px;
    line-height: 1.7;
}
.bb-success-card {
    background: var(--bb-white);
    border-radius: var(--bb-radius);
    box-shadow: var(--bb-shadow);
    overflow: hidden;
    margin-bottom: 24px;
    text-align: left;
}
.bb-success-card-header {
    background: var(--bb-deep-navy);
    color: var(--bb-white);
    font-family: var(--bb-font-heading);
    font-size: 1rem;
    font-weight: 600;
    padding: 14px 20px;
    letter-spacing: .04em;
}
.bb-success-details { padding: 4px 20px 12px; }
.bb-success-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--bb-border);
    font-size: 14px;
    gap: 12px;
}
.bb-success-row:last-child { border-bottom: none; }
.bb-success-label {
    color: var(--bb-muted);
    font-weight: 500;
    flex-shrink: 0;
}
.bb-success-value {
    font-weight: 600;
    color: var(--bb-dark-text);
    text-align: right;
}
.bb-order-number {
    font-family: var(--bb-font-heading);
    font-size: 1.1rem;
    color: var(--bb-deep-navy);
    letter-spacing: .06em;
}
.bb-order-status-badge {
    display: inline-block;
    background: #fff3cd;
    color: #856404;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.bb-success-note {
    background: var(--bb-light-bg);
    border-left: 3px solid var(--bb-gold);
    border-radius: 0 var(--bb-radius) var(--bb-radius) 0;
    padding: 14px 18px;
    font-size: 14px;
    color: var(--bb-dark-text);
    text-align: left;
    margin-bottom: 32px;
    line-height: 1.7;
}
.bb-success-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* --- Responsive: Phase 3C --------------------------------- */
@media (max-width: 767px) {
    .bb-checkout-summary { position: static; }
    .bb-checkout-card { padding: 18px; }
    .bb-success-title { font-size: 1.5rem; }
    .bb-success-actions { flex-direction: column; align-items: center; }
    .bb-success-actions a { width: 100%; text-align: center; }
}

/* ============================================================
   Phase 3D — Admin Order Management
   ============================================================ */

/* --- Order status badges (used in orders.php, order-view.php) --- */
.admin-order-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 4px;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}
.admin-badge-lg {
    font-size: 12.5px;
    padding: 5px 14px;
    border-radius: 6px;
}

/* Order status colours */
.os-pending    { background: #fff3cd; color: #856404; }
.os-confirmed  { background: #cfe2ff; color: #0a58ca; }
.os-processing { background: #e9d5ff; color: #6f2da8; }
.os-shipped    { background: #d0d9ff; color: #3747b0; }
.os-delivered  { background: #d1e7dd; color: #0a6640; }
.os-cancelled  { background: #f8d7da; color: #842029; }

/* Payment status colours */
.ps-pending  { background: #fff8e1; color: #7b6000; }
.ps-paid     { background: #d1e7dd; color: #0a6640; }
.ps-failed   { background: #f8d7da; color: #842029; }
.ps-refunded { background: #d2f4ea; color: #0a5c4a; }

/* --- Order view: header total badge --- */
.admin-order-total-badge {
    display: inline-block;
    background: var(--bb-deep-navy);
    color: var(--bb-white);
    font-size: 14px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 6px;
    letter-spacing: .02em;
}

/* --- Order view: inner card heading --- */
.admin-card-inner-heading {
    font-size: 13px;
    font-weight: 700;
    color: var(--bb-navy);
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 14px 20px;
    border-bottom: 1px solid var(--admin-border);
    margin-bottom: 0;
}

/* --- Order detail grid (label + value rows) --- */
.admin-order-detail-grid { padding: 4px 20px 12px; }
.admin-od-row {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--admin-border);
    font-size: 13.5px;
}
.admin-od-row:last-child { border-bottom: none; }
.admin-od-label {
    flex: 0 0 110px;
    color: #6c757d;
    font-weight: 500;
    font-size: 12.5px;
}
.admin-od-value { color: #1c1c1c; font-weight: 500; }

/* --- Order items table (inside order-view) --- */
.admin-order-items-table { margin-bottom: 0; }
.admin-order-items-table th { font-size: 11.5px; }
.admin-order-items-table td { vertical-align: middle; padding: 10px 12px; }

.admin-order-item-thumb {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--admin-border);
    display: block;
}
.admin-order-item-thumb-placeholder {
    width: 52px;
    height: 52px;
    border-radius: 6px;
    border: 1px solid var(--admin-border);
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    font-size: 1.1rem;
}

/* --- Order summary rows (right column) --- */
.admin-order-summary-rows { padding: 4px 20px 16px; }
.admin-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--admin-border);
    font-size: 13.5px;
}
.admin-summary-row:last-child { border-bottom: none; }
.admin-summary-total {
    font-size: 15px;
    font-weight: 700;
    color: var(--bb-deep-navy);
}

/* --- Status update form label --- */
.admin-form-label {
    font-size: 12px;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 6px;
}

/* --- Responsive: Phase 3D --------------------------------- */
@media (max-width: 767px) {
    .admin-od-label { flex: 0 0 90px; }
    .admin-order-header { gap: 14px; }
}

/* ============================================================
   Phase 3E — Customer Auth & My Account
   ============================================================ */

/* --- Auth pages (login.php, signup.php) ------------------- */
.bb-auth-container {
    padding: 60px 0 80px;
    min-height: calc(100vh - 220px);
    display: flex;
    align-items: center;
}
.bb-auth-card {
    background: var(--bb-white);
    border-radius: var(--bb-radius);
    box-shadow: 0 4px 28px rgba(7,24,45,.10);
    padding: 40px 36px 32px;
}
.bb-auth-heading {
    text-align: center;
    margin-bottom: 28px;
}
.bb-auth-title {
    font-family: var(--bb-font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--bb-deep-navy);
    margin-bottom: 6px;
}
.bb-auth-subtitle {
    font-size: 14px;
    color: var(--bb-muted);
    margin-bottom: 0;
}

.bb-form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--bb-dark-text);
    margin-bottom: 6px;
    display: block;
}
.bb-required {
    color: #c0392b;
    margin-left: 2px;
}
.bb-optional {
    color: var(--bb-muted);
    font-weight: 400;
    font-size: 12px;
    margin-left: 2px;
}
.bb-form-input {
    border: 1.5px solid #ddd;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--bb-dark-text);
    background: #fafafa;
    transition: border-color .2s, box-shadow .2s;
}
.bb-form-input:focus {
    border-color: var(--bb-gold);
    box-shadow: 0 0 0 3px rgba(212,175,55,.15);
    background: var(--bb-white);
    outline: none;
}
.bb-auth-switch {
    text-align: center;
    font-size: 13.5px;
    color: var(--bb-muted);
    margin-bottom: 0;
}
.bb-auth-switch a {
    color: var(--bb-gold);
    font-weight: 600;
    text-decoration: none;
}
.bb-auth-switch a:hover { text-decoration: underline; }

/* Logged-in account icon in navbar */
.bb-account-icon { color: var(--bb-gold) !important; }

/* --- My Account page -------------------------------------- */
.bb-account-banner {
    background: var(--bb-deep-navy);
    border-radius: var(--bb-radius);
    padding: 28px 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    color: var(--bb-white);
}
.bb-account-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(212,175,55,.18);
    color: var(--bb-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
}
.bb-account-name {
    font-family: var(--bb-font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--bb-white);
    margin-bottom: 4px;
}
.bb-account-meta {
    font-size: 13.5px;
    color: rgba(255,255,255,.65);
}

/* Action cards grid */
.bb-account-card {
    background: var(--bb-white);
    border-radius: var(--bb-radius);
    box-shadow: var(--bb-shadow);
    padding: 24px 16px 20px;
    text-align: center;
    display: block;
    cursor: pointer;
    transition: transform .18s, box-shadow .18s;
    color: var(--bb-dark-text);
    border: 1.5px solid transparent;
}
.bb-account-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(7,24,45,.12);
    border-color: var(--bb-gold);
    color: var(--bb-dark-text);
}
.bb-account-card-icon {
    font-size: 1.8rem;
    color: var(--bb-navy);
    margin-bottom: 10px;
    line-height: 1;
}
.bb-account-card-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--bb-dark-text);
    margin-bottom: 4px;
}
.bb-account-card-count {
    font-size: 11.5px;
    color: var(--bb-gold);
    font-weight: 600;
}
.bb-account-soon-badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    color: #6c757d;
    background: #f0f0f0;
    border-radius: 4px;
    padding: 2px 7px;
    letter-spacing: .04em;
    margin-top: 4px;
}
/* Coming-soon card — muted, no hover lift */
.bb-account-card-soon {
    opacity: .65;
    cursor: default;
}
.bb-account-card-soon:hover {
    transform: none;
    box-shadow: var(--bb-shadow);
    border-color: transparent;
}
/* Logout card accent */
.bb-account-card-logout .bb-account-card-icon { color: #b02a37; }
.bb-account-card-logout:hover { border-color: #f8d7da; }

/* Account details table */
.bb-account-details-card {
    background: var(--bb-white);
    border-radius: var(--bb-radius);
    box-shadow: var(--bb-shadow);
    overflow: hidden;
}
.bb-account-details-heading {
    background: var(--bb-light-bg);
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--bb-navy);
    padding: 14px 22px;
    border-bottom: 1px solid var(--bb-border);
}
.bb-account-details-body { padding: 4px 22px 12px; }
.bb-account-detail-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--bb-border);
    font-size: 14px;
}
.bb-account-detail-row:last-child { border-bottom: none; }
.bb-account-detail-label {
    flex: 0 0 90px;
    color: var(--bb-muted);
    font-weight: 500;
    font-size: 13px;
}
.bb-account-detail-value {
    font-weight: 500;
    color: var(--bb-dark-text);
}
.bb-account-status-badge {
    display: inline-block;
    background: #d1e7dd;
    color: #0a6640;
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* --- Responsive: Phase 3E --------------------------------- */
@media (max-width: 575px) {
    .bb-auth-card { padding: 28px 20px 24px; }
    .bb-auth-title { font-size: 1.5rem; }
    .bb-account-banner { flex-direction: column; text-align: center; gap: 14px; padding: 22px 20px; }
    .bb-account-name { font-size: 1.3rem; }
}

/* ============================================================
   Phase 3F — My Orders & Order Detail (customer-facing)
   ============================================================ */

/* --- Page wrapper ----------------------------------------- */
.bb-myorders-container {
    padding-top: 48px;
    padding-bottom: 80px;
    max-width: 900px;
}

/* --- Breadcrumb ------------------------------------------- */
.bb-breadcrumb { font-size: 13px; }
.bb-breadcrumb-link {
    color: var(--bb-gold);
    text-decoration: none;
}
.bb-breadcrumb-link:hover { text-decoration: underline; }
.bb-breadcrumb-sep { font-size: 10px; color: #bbb; }
.bb-breadcrumb-current { color: #6c757d; }

/* --- Back link -------------------------------------------- */
.bb-back-link {
    font-size: 13px;
    color: var(--bb-gold);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.bb-back-link:hover { text-decoration: underline; color: var(--bb-gold); }

/* Section heading */
.bb-section-title {
    font-family: var(--bb-font-heading);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--bb-deep-navy);
}
.bb-order-count-badge {
    background: var(--bb-light-bg);
    border: 1px solid var(--bb-border);
    color: #6c757d;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
}

/* --- Public order status / payment badges ----------------- */
/* Reuses .os-* and .ps-* colour classes defined in Phase 3D */
.bb-order-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}
.bb-order-badge-lg {
    font-size: 12.5px;
    padding: 5px 14px;
    border-radius: 6px;
}

/* --- Empty state ------------------------------------------ */
.bb-empty-orders {
    text-align: center;
    padding: 80px 20px;
}
.bb-empty-orders-icon {
    font-size: 3.5rem;
    color: #ccc;
    margin-bottom: 20px;
}
.bb-empty-orders-title {
    font-family: var(--bb-font-heading);
    font-size: 1.4rem;
    color: var(--bb-deep-navy);
    margin-bottom: 10px;
}
.bb-empty-orders-text {
    font-size: 14.5px;
    color: var(--bb-muted);
    max-width: 380px;
    margin: 0 auto 28px;
    line-height: 1.7;
}

/* --- Order card (list page) ------------------------------- */
.bb-orders-list { display: flex; flex-direction: column; gap: 16px; }
.bb-order-card {
    background: var(--bb-white);
    border-radius: var(--bb-radius);
    box-shadow: var(--bb-shadow);
    overflow: hidden;
    border: 1.5px solid transparent;
    transition: border-color .18s, box-shadow .18s;
}
.bb-order-card:hover {
    border-color: var(--bb-gold);
    box-shadow: 0 4px 20px rgba(7,24,45,.10);
}
.bb-order-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 20px;
    background: var(--bb-light-bg);
    border-bottom: 1px solid var(--bb-border);
}
.bb-order-card-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.bb-order-number-label {
    font-family: var(--bb-font-heading);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--bb-deep-navy);
}
.bb-order-date {
    font-size: 12px;
    color: #6c757d;
}
.bb-order-card-body {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 16px 20px;
}
.bb-order-card-detail {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 80px;
}
.bb-order-card-detail-label {
    font-size: 11px;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
}
.bb-order-card-detail-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--bb-dark-text);
}
.bb-order-total {
    font-size: 15px;
    font-weight: 700;
    color: var(--bb-deep-navy);
}
.bb-order-card-action { margin-left: auto; }

/* Outline small button (reusable) */
.bb-btn-outline-sm {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border: 1.5px solid var(--bb-navy);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bb-navy);
    text-decoration: none;
    transition: background .18s, color .18s;
    background: transparent;
}
.bb-btn-outline-sm:hover {
    background: var(--bb-deep-navy);
    color: var(--bb-white);
    border-color: var(--bb-deep-navy);
}

/* --- Order view header ------------------------------------ */
.bb-order-view-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}
.bb-order-view-number {
    font-family: var(--bb-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bb-deep-navy);
    margin-bottom: 4px;
}
.bb-order-view-date {
    font-size: 13px;
    color: #6c757d;
    margin-bottom: 0;
}

/* --- Order detail card ------------------------------------ */
.bb-order-detail-card {
    background: var(--bb-white);
    border-radius: var(--bb-radius);
    box-shadow: var(--bb-shadow);
    overflow: hidden;
}
.bb-order-detail-card-heading {
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--bb-navy);
    padding: 14px 20px;
    border-bottom: 1px solid var(--bb-border);
    background: var(--bb-light-bg);
}

/* --- Items list inside order view ------------------------- */
.bb-order-items-list { padding: 4px 0; }
.bb-order-item-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--bb-border);
}
.bb-order-item-row:last-child { border-bottom: none; }
.bb-order-item-img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--bb-border);
    display: block;
    flex-shrink: 0;
}
.bb-order-item-img-wrap { flex-shrink: 0; }
.bb-order-item-img-placeholder {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    border: 1px solid var(--bb-border);
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.bb-order-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--bb-dark-text);
    margin-bottom: 3px;
}
.bb-order-item-sku {
    font-size: 11.5px;
    color: #6c757d;
    margin-bottom: 4px;
}
.bb-order-item-price-row {
    font-size: 13px;
    color: var(--bb-muted);
}
.bb-order-item-total {
    font-size: 14px;
    font-weight: 700;
    color: var(--bb-deep-navy);
    white-space: nowrap;
    margin-left: auto;
    flex-shrink: 0;
}

/* --- Detail rows (shipping section) ----------------------- */
.bb-order-detail-rows { padding: 4px 20px 10px; }
.bb-order-detail-row {
    display: flex;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--bb-border);
    font-size: 14px;
}
.bb-order-detail-row:last-child { border-bottom: none; }
.bb-order-detail-label {
    flex: 0 0 80px;
    font-size: 12.5px;
    font-weight: 500;
    color: #6c757d;
}
.bb-order-detail-value {
    color: var(--bb-dark-text);
    font-weight: 500;
    line-height: 1.6;
}

/* --- Summary rows (right column) -------------------------- */
.bb-order-summary-rows { padding: 4px 20px 14px; }
.bb-order-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--bb-border);
    font-size: 14px;
}
.bb-order-summary-row:last-child { border-bottom: none; }
.bb-order-summary-total {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--bb-deep-navy);
}

/* --- Help box --------------------------------------------- */
.bb-order-help-box {
    background: var(--bb-light-bg);
    border-left: 3px solid var(--bb-gold);
    border-radius: 0 var(--bb-radius) var(--bb-radius) 0;
    padding: 16px 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    color: var(--bb-dark-text);
    line-height: 1.7;
}
.bb-order-help-icon {
    font-size: 1.3rem;
    color: var(--bb-gold);
    flex-shrink: 0;
    margin-top: 2px;
}

/* --- Action buttons row ----------------------------------- */
.bb-order-view-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 8px;
}

/* --- Responsive: Phase 3F --------------------------------- */
@media (max-width: 575px) {
    .bb-myorders-container { padding-top: 32px; padding-bottom: 56px; }
    .bb-order-card-header { flex-direction: column; align-items: flex-start; }
    .bb-order-card-body { gap: 12px; }
    .bb-order-card-action { margin-left: 0; width: 100%; }
    .bb-order-card-action .bb-btn-outline-sm { width: 100%; justify-content: center; }
    .bb-order-view-header { flex-direction: column; }
    .bb-order-view-number { font-size: 1.2rem; }
    .bb-order-item-row { gap: 10px; }
    .bb-order-item-img, .bb-order-item-img-placeholder { width: 52px; height: 52px; }
    .bb-order-view-actions { flex-direction: column; }
    .bb-order-view-actions .bb-btn-outline-sm { justify-content: center; }
    .bb-section-title { font-size: 1.3rem; }
}

/* ============================================================
   Phase 4A — Admin Customer Management
   ============================================================ */

/* --- User account status badges --------------------------- */
.admin-user-status {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 4px;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}
.us-active   { background: #d1e7dd; color: #0a6640; }
.us-inactive { background: #e2e3e5; color: #495057; }

/* --- Customer mini-stat cards (inside customer-view) ------ */
.admin-cust-stat-card {
    background: var(--bb-white);
    border-radius: var(--bb-radius);
    box-shadow: var(--bb-shadow);
    padding: 18px 16px;
    text-align: center;
    border-left: 3px solid var(--bb-gold);
}
.admin-cust-stat-value {
    font-family: var(--bb-font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--bb-deep-navy);
    line-height: 1.1;
    margin-bottom: 4px;
}
.admin-cust-stat-label {
    font-size: 11.5px;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* --- Responsive: Phase 4A --------------------------------- */
@media (max-width: 575px) {
    .admin-cust-stat-value { font-size: 1.1rem; }
}

/* ============================================================
   Phase 4B — Static Public Pages
   ============================================================ */

/* --- Page hero (used by all static pages) ----------------- */
.bb-page-hero {
    background: var(--bb-deep-navy);
    color: var(--bb-white);
    padding: 80px 0 64px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.bb-page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 60% 40%, rgba(212,175,55,.08) 0%, transparent 70%);
    pointer-events: none;
}
.bb-page-hero-eyebrow {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bb-gold);
    margin-bottom: 14px;
}
.bb-page-hero-title {
    font-family: var(--bb-font-heading);
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 700;
    color: var(--bb-white);
    margin-bottom: 16px;
    line-height: 1.15;
}
.bb-page-hero-sub {
    font-size: clamp(14px, 2vw, 16px);
    color: rgba(255,255,255,.70);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.75;
}

/* --- Content sections ------------------------------------- */
.bb-content-section     { padding: 72px 0; }
.bb-content-section-alt { padding: 72px 0; background: var(--bb-light-bg); }
.bb-content-section-sm  { padding: 48px 0; }

.bb-section-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bb-gold);
    margin-bottom: 10px;
    display: block;
}
.bb-section-heading {
    font-family: var(--bb-font-heading);
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 700;
    color: var(--bb-deep-navy);
    margin-bottom: 16px;
    line-height: 1.2;
}
.bb-section-body {
    font-size: 15px;
    color: var(--bb-muted);
    line-height: 1.8;
    max-width: 640px;
}

/* --- Info card (feature/value blocks) --------------------- */
.bb-info-card {
    background: var(--bb-white);
    border-radius: var(--bb-radius);
    box-shadow: var(--bb-shadow);
    padding: 32px 28px;
    height: 100%;
    border-top: 3px solid transparent;
    transition: border-color .2s, transform .2s;
}
.bb-info-card:hover {
    border-top-color: var(--bb-gold);
    transform: translateY(-4px);
}
.bb-info-card-icon {
    font-size: 1.8rem;
    color: var(--bb-gold);
    margin-bottom: 16px;
    display: block;
}
.bb-info-card-title {
    font-family: var(--bb-font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--bb-deep-navy);
    margin-bottom: 8px;
}
.bb-info-card-body {
    font-size: 14px;
    color: var(--bb-muted);
    line-height: 1.75;
    margin-bottom: 0;
}

/* Dark info card variant */
.bb-info-card-dark {
    background: var(--bb-deep-navy);
    border-top-color: var(--bb-gold);
}
.bb-info-card-dark .bb-info-card-title { color: var(--bb-white); }
.bb-info-card-dark .bb-info-card-body  { color: rgba(255,255,255,.65); }

/* --- Contact page ----------------------------------------- */
.bb-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 40px;
}
.bb-contact-info-card {
    background: var(--bb-white);
    border-radius: var(--bb-radius);
    box-shadow: var(--bb-shadow);
    padding: 28px 24px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.bb-contact-info-icon {
    font-size: 1.5rem;
    color: var(--bb-gold);
    flex-shrink: 0;
    margin-top: 2px;
}
.bb-contact-info-label {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--bb-muted);
    margin-bottom: 4px;
}
.bb-contact-info-value {
    font-size: 15px;
    font-weight: 500;
    color: var(--bb-dark-text);
    margin-bottom: 0;
}
.bb-contact-form-card {
    background: var(--bb-white);
    border-radius: var(--bb-radius);
    box-shadow: var(--bb-shadow);
    padding: 36px 32px;
}

/* --- Track order ------------------------------------------ */
.bb-track-wrap   { max-width: 540px; margin: 0 auto; }
.bb-track-form-card {
    background: var(--bb-white);
    border-radius: var(--bb-radius);
    box-shadow: var(--bb-shadow);
    padding: 36px 32px;
    margin-bottom: 28px;
}
.bb-track-result {
    background: var(--bb-white);
    border-radius: var(--bb-radius);
    box-shadow: var(--bb-shadow);
    overflow: hidden;
    border-left: 4px solid var(--bb-gold);
}
.bb-track-result-header {
    background: var(--bb-deep-navy);
    color: var(--bb-white);
    padding: 16px 24px;
    font-family: var(--bb-font-heading);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .04em;
}
.bb-track-result-body { padding: 4px 24px 16px; }
.bb-track-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--bb-border);
    font-size: 14px;
    gap: 12px;
}
.bb-track-row:last-child { border-bottom: none; }
.bb-track-label { color: var(--bb-muted); font-weight: 500; flex-shrink: 0; }
.bb-track-value { font-weight: 600; color: var(--bb-dark-text); text-align: right; }
.bb-track-error {
    background: #f8d7da;
    border-radius: var(--bb-radius);
    padding: 20px 24px;
    color: #842029;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* --- Policy pages ----------------------------------------- */
.bb-policy-wrap  { max-width: 780px; margin: 0 auto; }
.bb-policy-content h2 {
    font-family: var(--bb-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bb-deep-navy);
    margin-top: 40px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--bb-border);
}
.bb-policy-content h2:first-child { margin-top: 0; }
.bb-policy-content p {
    font-size: 14.5px;
    color: #444;
    line-height: 1.85;
    margin-bottom: 16px;
}
.bb-policy-content ul {
    font-size: 14.5px;
    color: #444;
    line-height: 1.85;
    padding-left: 20px;
    margin-bottom: 16px;
}
.bb-policy-content ul li { margin-bottom: 6px; }
.bb-policy-meta {
    font-size: 13px;
    color: #6c757d;
    padding: 12px 16px;
    background: var(--bb-light-bg);
    border-radius: var(--bb-radius);
    margin-bottom: 32px;
}

/* --- Size guide table ------------------------------------- */
.bb-size-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-bottom: 24px;
}
.bb-size-table thead th {
    background: var(--bb-deep-navy);
    color: var(--bb-white);
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
}
.bb-size-table tbody td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--bb-border);
    color: #444;
    vertical-align: middle;
}
.bb-size-table tbody tr:last-child td { border-bottom: none; }
.bb-size-table tbody tr:hover td { background: var(--bb-light-bg); }
.bb-size-table .td-highlight {
    font-weight: 600;
    color: var(--bb-deep-navy);
}

/* --- Discover page collection cards ----------------------- */
.bb-discover-card {
    border-radius: var(--bb-radius);
    overflow: hidden;
    background: var(--bb-deep-navy);
    color: var(--bb-white);
    padding: 44px 36px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 260px;
    position: relative;
}
.bb-discover-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(212,175,55,.10) 0%, transparent 60%);
    pointer-events: none;
}
.bb-discover-card-icon {
    font-size: 2.4rem;
    color: var(--bb-gold);
    margin-bottom: 16px;
}
.bb-discover-card-title {
    font-family: var(--bb-font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.bb-discover-card-text {
    font-size: 14px;
    color: rgba(255,255,255,.70);
    line-height: 1.7;
    margin-bottom: 0;
}

/* --- Careers page ----------------------------------------- */
.bb-careers-openings-empty {
    background: var(--bb-light-bg);
    border-radius: var(--bb-radius);
    padding: 48px 32px;
    text-align: center;
}
.bb-careers-openings-icon {
    font-size: 2.5rem;
    color: #ccc;
    margin-bottom: 16px;
}

/* --- About page value row --------------------------------- */
.bb-value-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid var(--bb-border);
}
.bb-value-row:last-child { border-bottom: none; }
.bb-value-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(212,175,55,.12);
    color: var(--bb-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.bb-value-title {
    font-family: var(--bb-font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bb-deep-navy);
    margin-bottom: 4px;
}
.bb-value-body {
    font-size: 14px;
    color: var(--bb-muted);
    line-height: 1.75;
    margin-bottom: 0;
}

/* --- CTA strip -------------------------------------------- */
.bb-cta-strip {
    background: var(--bb-deep-navy);
    padding: 64px 0;
    text-align: center;
}
.bb-cta-strip-title {
    font-family: var(--bb-font-heading);
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 700;
    color: var(--bb-white);
    margin-bottom: 10px;
}
.bb-cta-strip-sub {
    font-size: 15px;
    color: rgba(255,255,255,.65);
    margin-bottom: 28px;
}

/* --- Contact page extras ---------------------------------- */
.bb-contact-info-content { flex: 1; min-width: 0; }
.bb-contact-info-note {
    font-size: 12.5px;
    color: var(--bb-muted);
    margin-top: 3px;
}
.bb-contact-form-title {
    font-family: var(--bb-font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--bb-deep-navy);
    margin-bottom: 20px;
}

/* --- Track order result extras ---------------------------- */
.bb-track-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.bb-track-result-order-num {
    font-family: var(--bb-font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .04em;
    margin-bottom: 2px;
}
.bb-track-rows { padding: 0 24px 8px; }
.bb-track-row-label { color: var(--bb-muted); font-weight: 500; flex-shrink: 0; }
.bb-track-row-value { font-weight: 600; color: var(--bb-dark-text); text-align: right; }
.bb-track-items-heading {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--bb-muted);
    padding: 0 24px;
    margin-bottom: 4px;
    margin-top: 4px;
}
.bb-track-items { padding: 0 24px 8px; }
.bb-track-item-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--bb-border);
    font-size: 13.5px;
}
.bb-track-item-row:last-child { border-bottom: none; }
.bb-track-item-name { flex: 1; color: var(--bb-dark-text); font-weight: 500; }
.bb-track-item-qty  { color: var(--bb-muted); white-space: nowrap; }
.bb-track-item-price { font-weight: 600; color: var(--bb-deep-navy); white-space: nowrap; }
.bb-track-result-footer {
    padding: 12px 24px 20px;
    border-top: 1px solid var(--bb-border);
    margin-top: 4px;
}
.bb-track-error { flex-direction: column; text-align: center; padding: 36px 24px; }
.bb-track-error-icon { font-size: 2.2rem; color: #842029; margin-bottom: 12px; }
.bb-track-error-title {
    font-family: var(--bb-font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: #842029;
}
.bb-track-error-body { font-size: 14px; color: #842029; margin: 0; }
.bb-track-error-body a { color: #842029; }

/* --- Policy / Terms h5 subheadings ------------------------ */
.bb-policy-subheading {
    font-family: var(--bb-font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--bb-deep-navy);
    margin-top: 28px;
    margin-bottom: 8px;
}
.bb-policy-content ol {
    font-size: 14.5px;
    color: #444;
    line-height: 1.85;
    padding-left: 20px;
    margin-bottom: 16px;
}
.bb-policy-content ol li { margin-bottom: 8px; }
.bb-policy-content a { color: var(--bb-navy); text-decoration: underline; }

/* --- Responsive: Phase 4B --------------------------------- */
@media (max-width: 767px) {
    .bb-page-hero         { padding: 56px 0 48px; }
    .bb-content-section,
    .bb-content-section-alt { padding: 52px 0; }
    .bb-contact-grid      { grid-template-columns: 1fr; }
    .bb-contact-form-card,
    .bb-track-form-card   { padding: 24px 20px; }
    .bb-policy-content h2 { font-size: 1.25rem; }
    .bb-discover-card     { min-height: 200px; padding: 32px 24px; }
    .bb-track-wrap        { max-width: 100%; }
    .bb-track-result-header { flex-wrap: wrap; gap: 8px; }
}

/* ============================================================
   Phase 4C — Admin Enquiries
   ============================================================ */

/* --- Enquiry status badges --------------------------------- */
.enq-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
}
.enq-new     { background: rgba(212,175,55,.15); color: #9a7800; }
.enq-read    { background: rgba(13,110,253,.10); color: #0a58ca; }
.enq-replied { background: rgba(25,135,84,.12);  color: #146c43; }
.enq-badge-lg { font-size: 13px; padding: 5px 14px; }

/* --- Enquiry table action links ---------------------------- */
.enq-action-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: var(--bb-deep-navy);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background var(--bb-transition);
    white-space: nowrap;
}
.enq-action-link:hover       { background: rgba(7,24,45,.06); color: var(--bb-deep-navy); }
.enq-action-danger           { color: #dc3545; }
.enq-action-danger:hover     { background: rgba(220,53,69,.08); color: #dc3545; }

/* --- Enquiry detail — contact rows ------------------------ */
.enq-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid var(--bb-border);
    gap: 12px;
    font-size: 14px;
}
.enq-detail-label {
    color: var(--bb-muted);
    font-weight: 500;
    flex-shrink: 0;
    min-width: 70px;
}
.enq-detail-value {
    color: var(--bb-dark-text);
    font-weight: 500;
    text-align: right;
    word-break: break-word;
}

/* --- Enquiry message box ---------------------------------- */
.enq-message-box {
    background: var(--bb-light-bg);
    border-radius: var(--bb-radius);
    border-left: 3px solid var(--bb-gold);
    padding: 20px 22px;
    font-size: 14.5px;
    color: #333;
    line-height: 1.85;
    white-space: pre-wrap;
    word-break: break-word;
}

/* --- WhatsApp button --------------------------------------- */
.enq-whatsapp-btn {
    background: #25d366;
    color: #fff;
    border: 2px solid #25d366;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--bb-radius);
    transition: background var(--bb-transition);
    text-decoration: none;
    padding: 8px 20px;
}
.enq-whatsapp-btn:hover { background: #1ebe57; border-color: #1ebe57; color: #fff; }

/* ============================================================
   Phase 4D — Admin Settings
   ============================================================ */
.admin-settings-section {
    background: var(--bb-white);
    border-radius: var(--bb-radius);
    box-shadow: 0 2px 12px rgba(7,24,45,.07);
    overflow: hidden;
}
.admin-settings-section-title {
    background: var(--bb-deep-navy);
    color: var(--bb-white);
    font-family: var(--bb-font-heading);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .03em;
    padding: 14px 24px;
}
.admin-settings-body {
    padding: 24px 28px;
}
.admin-settings-help {
    font-size: 12px;
    color: var(--bb-muted);
    margin-top: 5px;
}

/* ============================================================
   Phase 4E — Admin Polish
   ============================================================ */

/* --- Dashboard stock alert cards -------------------------- */
.admin-alert-card {
    border-left: 3px solid #f59e0b;
}
.admin-alert-card-danger {
    border-left-color: #dc3545;
}
.admin-stock-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
}
.stock-low  { background: rgba(245,158,11,.15); color: #92400e; }
.stock-out  { background: rgba(220,53,69,.12);  color: #842029; }

/* --- Product quick-toggle buttons ------------------------- */
.admin-toggle-btn {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 3px;
    border: 1px solid #c8cdd5;
    background: transparent;
    color: #495057;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
    line-height: 1.6;
}
.admin-toggle-btn:hover         { background: #f1f3f6; }
.admin-toggle-danger            { border-color: #f5c6cb; color: #842029; }
.admin-toggle-danger:hover      { background: rgba(220,53,69,.08); }
.admin-toggle-success           { border-color: #a3cfbb; color: #146c43; }
.admin-toggle-success:hover     { background: rgba(25,135,84,.08); }

/* --- Order notes timeline --------------------------------- */
.order-note-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 0;
    padding: 0 4px;
}
.order-note-item {
    padding: 14px 0;
    border-bottom: 1px solid var(--bb-border);
}
.order-note-item:last-child { border-bottom: none; }
.order-note-status { background: rgba(212,175,55,.04); border-radius: 4px; padding: 12px 8px; margin: 2px 0; }
.order-note-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.order-note-type-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 2px 7px;
    border-radius: 50px;
}
.badge-internal      { background: rgba(13,110,253,.10); color: #0a58ca; }
.badge-status-change { background: rgba(212,175,55,.15); color: #92400e; }
.order-note-admin {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bb-deep-navy);
}
.order-note-time {
    font-size: 11.5px;
    color: var(--bb-muted);
    margin-left: auto;
}
.order-note-body {
    font-size: 13.5px;
    color: #333;
    line-height: 1.7;
}
.order-note-add-form {
    padding: 16px 0 4px;
    border-top: 1px solid var(--bb-border);
    margin-top: 8px;
}

/* --- Free shipping notice (public pages) ------------------ */
.bb-free-shipping-notice {
    display: inline-flex;
    align-items: center;
    background: rgba(25,135,84,.08);
    color: #146c43;
    border: 1px solid rgba(25,135,84,.20);
    border-radius: var(--bb-radius);
    padding: 8px 16px;
    font-size: 13.5px;
    font-weight: 500;
    margin: 12px 0;
}

/* ============================================================
   Phase 5A — Razorpay Payment Page
   ============================================================ */

/* --- Razorpay payment card -------------------------------- */
.bb-rzp-card {
    background: var(--bb-white);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(7,24,45,.07);
}
.bb-rzp-card-header {
    background: var(--bb-deep-navy);
    color: var(--bb-white);
    padding: 16px 24px;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: .03em;
}
.bb-rzp-card-body {
    padding: 28px 24px;
}
.bb-rzp-order-info {
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius);
    padding: 16px;
    background: var(--bb-light-bg);
}
.bb-rzp-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 13.5px;
}
.bb-rzp-info-row + .bb-rzp-info-row {
    border-top: 1px solid var(--bb-border);
}
.bb-rzp-info-label { color: var(--bb-muted); }
.bb-rzp-info-value { font-weight: 600; color: var(--bb-deep-navy); }
.bb-rzp-amount {
    font-size: 1.15rem;
    color: var(--bb-gold) !important;
}
.bb-rzp-secure-note {
    text-align: center;
    font-size: 12px;
    color: var(--bb-muted);
    margin-bottom: 0;
}
.bb-rzp-back-link {
    font-size: 13px;
    color: var(--bb-muted);
    text-decoration: none;
}
.bb-rzp-back-link:hover { color: var(--bb-gold); }

/* ============================================================
   Phase 5C — Payment Events Admin Pages
   ============================================================ */

/* --- Event type chip -------------------------------------- */
.pe-event-type {
    font-family: monospace;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bb-navy);
    background: rgba(11,31,58,.06);
    padding: 2px 8px;
    border-radius: 3px;
}

/* --- Status badges ---------------------------------------- */
.pe-status-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 600;
}
.pe-status-processed { color: #155724; background: #d1fae5; }
.pe-status-ignored   { color: #664d03; background: #fff3cd; }
.pe-status-failed    { color: #721c24; background: #f8d7da; }
.pe-status-received  { color: #0c4a6e; background: #e0f2fe; }

/* --- Detail grid (event-view page) ----------------------- */
.pe-detail-grid {
    padding: 4px 0;
}
.pe-detail-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--bb-border);
    font-size: 13.5px;
}
.pe-detail-row:last-child { border-bottom: none; }
.pe-detail-label {
    flex: 0 0 160px;
    color: #6c757d;
    font-size: 12.5px;
    padding-top: 1px;
}
.pe-detail-value {
    flex: 1;
    color: var(--bb-deep-navy);
    font-weight: 500;
    word-break: break-word;
}

/* --- Payload pre block ------------------------------------ */
.pe-payload-wrap {
    background: #0e1c2f;
    border-radius: 0 0 var(--bb-radius) var(--bb-radius);
    overflow: auto;
    max-height: 520px;
}
.pe-payload {
    margin: 0;
    padding: 20px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    line-height: 1.7;
    color: #a8d8a8;
    white-space: pre;
    word-break: break-all;
}

/* ============================================================
   Phase 6A — Shiprocket Admin & Public Tracking
   ============================================================ */

/* --- Admin orders table chips ----------------------------- */
.sr-awb-chip {
    display: inline-block;
    background: #e0f2fe;
    color: #0c4a6e;
    border-radius: 3px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 600;
    font-family: monospace;
    white-space: nowrap;
}
.sr-created-chip {
    display: inline-block;
    background: #d1fae5;
    color: #155724;
    border-radius: 3px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 600;
}

/* --- Admin order-view Shiprocket status badge ------------- */
.sr-status-badge {
    display: inline-block;
    background: rgba(212,175,55,.15);
    color: var(--bb-deep-navy);
    border: 1px solid rgba(212,175,55,.4);
    border-radius: 3px;
    padding: 2px 8px;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* --- Public tracking section in track-order.php ---------- */
.bb-track-shipping-info {
    border-top: 2px solid var(--bb-gold);
    margin-top: 16px;
    padding-top: 12px;
}
.bb-track-external-link {
    display: inline-flex;
    align-items: center;
    background: var(--bb-gold);
    color: var(--bb-deep-navy);
    font-weight: 700;
    font-size: 13.5px;
    padding: 7px 18px;
    border-radius: var(--bb-radius);
    text-decoration: none;
    transition: opacity .15s;
}
.bb-track-external-link:hover { opacity: .85; color: var(--bb-deep-navy); }

/* ============================================================
   Phase 6B — Shiprocket Sync
   ============================================================ */

/* Sync button — outlined grey, spins icon on click via JS */
.sr-sync-btn {
    border: 1px solid #ced4da;
    background: #fff;
    color: #495057;
    font-size: 12.5px;
    font-weight: 600;
    transition: background .15s, border-color .15s;
}
.sr-sync-btn:hover {
    background: #f8f9fa;
    border-color: #adb5bd;
    color: #212529;
}

/* AWB pending note */
.sr-awb-pending-note {
    font-size: 11.5px;
    color: #856404;
    background: #fff3cd;
    border-radius: 3px;
    padding: 2px 8px;
    display: inline-block;
}

/* ============================================================
   Phase 7B — Email Logs UI
   ============================================================ */

/* Email status badges */
.el-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: capitalize;
}
.el-status-sent    { color: #155724; background: #d1fae5; }
.el-status-failed  { color: #721c24; background: #f8d7da; }
.el-status-skipped { color: #664d03; background: #fff3cd; }
.el-status-lg {
    font-size: 13px;
    padding: 4px 14px;
}

/* Recipient type badges */
.el-rtype-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: capitalize;
}
.el-customer { color: #084298; background: #cfe2ff; }
.el-admin    { color: #D4AF37; background: rgba(7,24,45,.08); border: 1px solid rgba(212,175,55,.3); }

/* Order link in email logs table */
.el-order-link {
    color: var(--bb-navy);
    font-weight: 600;
    text-decoration: none;
    letter-spacing: .04em;
    font-size: 12.5px;
}
.el-order-link:hover { color: var(--bb-gold); }

/* Detail page grid (email-log-view.php) */
.el-detail-grid {
    display: flex;
    flex-direction: column;
}
.el-detail-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--bb-border, #e8e4de);
    font-size: 13.5px;
}
.el-detail-row:last-child { border-bottom: none; }
.el-detail-label {
    flex: 0 0 130px;
    color: #6c757d;
    font-size: 12.5px;
}
.el-detail-value {
    flex: 1;
    color: #212529;
    word-break: break-word;
}

/* Error message box */
.el-error-box {
    margin: 12px 0 0;
    background: #fff5f5;
    border: 1px solid #f8d7da;
    border-radius: 5px;
    padding: 12px 16px;
}
.el-error-label {
    font-size: 12px;
    font-weight: 700;
    color: #dc3545;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 6px;
}
.el-error-body {
    font-size: 13px;
    color: #721c24;
    word-break: break-word;
    font-family: monospace;
}

/* ============================================================
   Phase 7C — SMTP Config Status & Email Test
   ============================================================ */

/* SMTP configured / not-configured badge (inline in section title) */
.smtp-config-badge {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 3px;
    vertical-align: middle;
}
.smtp-badge-ok   { background: #d1fae5; color: #155724; }
.smtp-badge-warn { background: #fff3cd; color: #856404; }
.smtp-badge-off  { background: #f8d7da; color: #721c24; }

/* SMTP config read-only grid */
.smtp-config-grid {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bb-border, #e8e4de);
    border-radius: 6px;
    overflow: hidden;
}
.smtp-config-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--bb-border, #e8e4de);
    font-size: 13.5px;
    background: #fff;
}
.smtp-config-row:nth-child(even) { background: #fafafa; }
.smtp-config-row:last-child { border-bottom: none; }
.smtp-config-label {
    flex: 0 0 160px;
    color: #6c757d;
    font-size: 12.5px;
    font-weight: 600;
}
.smtp-config-value { flex: 1; color: #212529; word-break: break-all; }
.smtp-config-mono  { font-family: monospace; font-size: 13px; }
.smtp-config-hint  { font-size: 11.5px; color: #856404; margin-left: 8px; }

/* Info notice when SMTP is not configured */
.smtp-test-notice {
    background: #e0f2fe;
    border: 1px solid #bae6fd;
    border-radius: 5px;
    padding: 12px 16px;
    font-size: 13px;
    color: #0c4a6e;
    margin-bottom: 16px;
}

/* ============================================================
   Phase 8A — Coupon / Discount Code System
   ============================================================ */

/* --- Public: coupon apply form on cart / checkout --- */
.bb-coupon-box {
    border: 1.5px dashed rgba(212,175,55,.5);
    border-radius: 6px;
    padding: 14px 16px;
    margin-top: 16px;
    background: rgba(212,175,55,.03);
}
.bb-coupon-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bb-deep-navy);
    margin-bottom: 8px;
    display: block;
}
.bb-coupon-input-group {
    display: flex;
    gap: 8px;
}
.bb-coupon-input {
    flex: 1;
    border: 1.5px solid #dee2e6;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 13px;
    font-family: monospace;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bb-deep-navy);
    outline: none;
    transition: border-color .15s;
    background: #fff;
}
.bb-coupon-input:focus { border-color: var(--bb-gold); }
.bb-coupon-apply-btn {
    background: var(--bb-deep-navy);
    color: var(--bb-gold);
    border: none;
    border-radius: 4px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
    letter-spacing: .02em;
}
.bb-coupon-apply-btn:hover { background: #122848; }

/* Applied coupon confirmation row */
.bb-coupon-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 13px;
    background: #d1fae5;
    border-radius: 5px;
    border: 1px solid #a7f3d0;
}
.bb-coupon-applied-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: #065f46;
    font-family: monospace;
    letter-spacing: .06em;
}
.bb-coupon-applied-badge i { font-size: 14px; }
.bb-coupon-remove-btn {
    background: none;
    border: none;
    color: #dc3545;
    font-size: 12px;
    cursor: pointer;
    padding: 2px 7px;
    border-radius: 3px;
    white-space: nowrap;
    transition: background .12s;
}
.bb-coupon-remove-btn:hover { background: rgba(220,53,69,.08); }

/* Discount row in order summary */
.bb-summary-discount .bb-summary-label,
.bb-summary-discount .bb-summary-value {
    color: #198754;
    font-weight: 600;
}

/* Order success discount row */
.bb-success-discount-row .bb-success-label { color: #198754; }
.bb-success-discount-row .bb-success-value { color: #198754; font-weight: 700; }

/* --- Admin: coupon badges --- */
.coupon-code-badge {
    display: inline-block;
    font-family: monospace;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .07em;
    color: var(--bb-navy);
    background: rgba(7,24,45,.05);
    border: 1px solid rgba(7,24,45,.13);
    border-radius: 4px;
    padding: 2px 8px;
}
.coupon-type-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    border-radius: 3px;
    padding: 2px 7px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.coupon-type-fixed   { background: #cfe2ff; color: #084298; }
.coupon-type-percent { background: #d1fae5; color: #065f46; }
.coupon-status-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    border-radius: 3px;
    padding: 2px 8px;
}
.coupon-status-active   { background: #d1fae5; color: #155724; }
.coupon-status-inactive { background: #f8f9fa; color: #6c757d; border: 1px solid #dee2e6; }
.coupon-status-expired  { background: #fff3cd; color: #856404; }

/* ── Return Request Status Badges — Phase 10A ───────── */
.rr-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.rr-status-badge-lg {
    font-size: 12.5px;
    padding: 5px 14px;
}
.rr-status-submitted    { background: #fff3cd; color: #856404; }
.rr-status-under-review { background: #cfe2ff; color: #084298; }
.rr-status-approved     { background: #d1fae5; color: #155724; }
.rr-status-rejected     { background: #f8d7da; color: #721c24; }
.rr-status-completed    { background: #07182D; color: #D4AF37; }
.rr-status-cancelled    { background: #e2e3e5; color: #41464b; }

/* ── Return Request Cards (customer list) ────────────── */
.bb-rr-card {
    border: 1px solid #e5e0d8;
    border-radius: var(--bb-radius);
    background: #fff;
    overflow: hidden;
}
.bb-rr-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f8f5f0;
    border-bottom: 1px solid #e5e0d8;
    flex-wrap: wrap;
    gap: 6px;
}
.bb-rr-card-num {
    font-size: 13px;
    font-weight: 700;
    color: var(--bb-deep-navy);
    letter-spacing: .04em;
    margin-right: 6px;
}
.bb-rr-card-date {
    font-size: 12px;
    color: #6c757d;
}
.bb-rr-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    padding: 12px 16px;
    font-size: 13px;
    color: #444;
}
.bb-rr-card-footer {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid #e5e0d8;
    background: #fdfdfc;
    flex-wrap: wrap;
}

/* ── Return Request Form ─────────────────────────────── */
.bb-rr-form {
    background: #fff;
    border: 1px solid #e5e0d8;
    border-radius: var(--bb-radius);
    padding: 24px;
}
.bb-rr-label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bb-deep-navy);
    display: block;
}
.bb-rr-type-option {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    border: 1.5px solid #d1c9be;
    border-radius: var(--bb-radius);
    padding: 8px 16px;
    font-size: 13.5px;
    font-weight: 500;
    color: #555;
    transition: border-color .15s, background .15s, color .15s;
    user-select: none;
}
.bb-rr-type-option:hover {
    border-color: var(--bb-gold);
    color: var(--bb-deep-navy);
}
.bb-rr-type-option.active {
    border-color: var(--bb-gold);
    background: #fdf8ee;
    color: var(--bb-deep-navy);
    font-weight: 700;
}

/* ── Return Request Detail Table ─────────────────────── */
.bb-rr-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.bb-rr-detail-table th {
    width: 130px;
    padding: 8px 12px 8px 0;
    font-weight: 600;
    color: #6c757d;
    vertical-align: top;
    white-space: nowrap;
}
.bb-rr-detail-table td {
    padding: 8px 0;
    color: #333;
    vertical-align: top;
    border-bottom: 1px solid #f0ece6;
}
.bb-rr-detail-table tr:last-child td {
    border-bottom: none;
}

/* ── Message / Admin Note Boxes ──────────────────────── */
.bb-rr-message-box,
.bb-rr-admin-note {
    border-radius: var(--bb-radius);
    padding: 14px 16px;
    font-size: 13.5px;
    line-height: 1.6;
}
.bb-rr-message-box {
    background: #f8f5f0;
    border: 1px solid #e5e0d8;
}
.bb-rr-admin-note {
    background: #fdf8ee;
    border: 1px solid #e8d98c;
    border-left: 3px solid var(--bb-gold);
}
.bb-rr-message-label {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6c757d;
    margin-bottom: 8px;
}
.bb-rr-message-body {
    color: #333;
}

/* ── Inline return note (non-delivered orders) ───────── */
.bb-return-note {
    display: inline-flex;
    align-items: center;
    font-size: 12.5px;
    color: #6c757d;
    font-style: italic;
}

/* ============================================================
   Phase 10B — Product Reviews
   ============================================================ */

/* ── Stars utility ────────────────────────────────────────── */
.bb-stars {
    color: var(--bb-gold);
    letter-spacing: 1px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

/* ── Review status badges (standalone, not Bootstrap) ─────── */
.bb-rv-badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 2px 9px;
    border-radius: 30px;
    line-height: 1.7;
    white-space: nowrap;
}
.bb-rv-badge-pending  { background: #fff3cd; color: #856404; }
.bb-rv-badge-approved { background: #d1e7dd; color: #0a3622; }
.bb-rv-badge-rejected { background: #f8d7da; color: #842029; }

/* ── Order view: Review section per item ──────────────────── */
.bb-review-item-section {
    padding: 10px 20px 14px;
    border-top: 1px dashed rgba(212, 175, 55, 0.30);
    background: #fdfaf6;
}

/* Existing review indicator row */
.bb-review-item-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0;
}

/* Write-a-Review <details> */
.bb-review-item-toggle {
    /* browser default open/close behaviour; no extra needed */
}
.bb-review-item-toggle[open] > summary.bb-review-summary-btn {
    color: var(--bb-deep-navy);
}

/* <summary> styled as a subtle gold link-button */
.bb-review-summary-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bb-gold);
    list-style: none;
    padding: 0;
    border: none;
    background: none;
    outline: none;
    user-select: none;
    transition: color var(--bb-transition);
}
/* hide default disclosure triangle */
.bb-review-summary-btn::-webkit-details-marker { display: none; }
.bb-review-summary-btn::marker              { display: none; }

.bb-review-summary-btn:hover {
    color: var(--bb-deep-navy);
    text-decoration: underline;
}

/* Inline review form inside <details> */
.bb-review-inline-form {
    padding-top: 14px;
    max-width: 500px;
}

/* ── Product page: review summary bar ─────────────────────── */
.bb-review-summary-bar {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #fff;
    border: 1px solid #e5e0d8;
    border-radius: var(--bb-radius);
    padding: 18px 22px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.bb-review-avg-num {
    font-size: 3rem;
    font-weight: 800;
    color: var(--bb-deep-navy);
    line-height: 1;
    font-family: var(--bb-font-heading);
}
.bb-review-avg-stars {
    color: var(--bb-gold);
    font-size: 20px;
    letter-spacing: 2px;
    margin-bottom: 4px;
    line-height: 1;
}
.bb-review-avg-meta {
    font-size: 13px;
    color: var(--bb-muted);
}
.bb-review-avg-meta strong { color: var(--bb-deep-navy); }

/* ── Product page: individual review card ─────────────────── */
.bb-review-card {
    background: #fff;
    border: 1px solid #e5e0d8;
    border-radius: var(--bb-radius);
    padding: 16px 20px;
}
.bb-review-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}
.bb-review-card-author {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bb-deep-navy);
}
.bb-review-card-date {
    font-size: 12px;
    color: #aaa;
}
.bb-review-card-stars {
    color: var(--bb-gold);
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 5px;
    line-height: 1;
}
.bb-review-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--bb-deep-navy);
    margin-bottom: 4px;
}
.bb-review-card-text {
    font-size: 13.5px;
    color: #444;
    line-height: 1.65;
    white-space: pre-line;
}

/* ── My Reviews page cards ─────────────────────────────────── */
.bb-myreviews-card {
    background: #fff;
    border: 1px solid #e5e0d8;
    border-radius: var(--bb-radius);
    overflow: hidden;
}
.bb-myreviews-card-head {
    background: #f8f5f0;
    border-bottom: 1px solid #e5e0d8;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
}
.bb-myreviews-product-link {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--bb-deep-navy);
    text-decoration: none;
}
.bb-myreviews-product-link:hover {
    text-decoration: underline;
    color: var(--bb-deep-navy);
}
.bb-myreviews-card-body {
    padding: 14px 18px;
}

/* ── No-reviews placeholder ────────────────────────────────── */
.bb-review-empty {
    background: #fff;
    border: 1px solid #e5e0d8;
    border-radius: var(--bb-radius);
    padding: 28px 24px;
    text-align: center;
}
.bb-review-empty p { margin: 0; }
.bb-review-empty .bb-review-empty-heading {
    font-size: 14.5px;
    font-weight: 600;
    color: #444;
    margin-bottom: 6px;
}
.bb-review-empty .bb-review-empty-sub {
    font-size: 13px;
    color: var(--bb-muted);
}

/* ── Admin: review table helpers ───────────────────────────── */
.admin-rv-stars {
    color: var(--bb-gold);
    font-size: 12.5px;
    letter-spacing: 1px;
    display: block;
    line-height: 1.4;
}
.admin-rv-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--bb-deep-navy);
    margin-bottom: 2px;
}
.admin-rv-excerpt {
    font-size: 12.5px;
    color: #555;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.admin-rv-product-link {
    color: var(--bb-deep-navy);
    font-weight: 600;
    text-decoration: none;
    font-size: 13px;
}
.admin-rv-product-link:hover {
    text-decoration: underline;
    color: var(--bb-deep-navy);
}
.admin-rv-customer-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--bb-dark-text);
}
.admin-rv-customer-meta {
    font-size: 11.5px;
    color: var(--bb-muted);
}

/* ── Responsive: Phase 10B ─────────────────────────────────── */
@media (max-width: 575px) {
    .bb-review-item-section {
        padding: 10px 14px 14px;
    }
    .bb-review-inline-form {
        max-width: 100%;
    }
    .bb-review-summary-bar,
    .bb-review-card {
        padding: 14px 16px;
    }
    .bb-review-avg-num  { font-size: 2.4rem; }
    .bb-review-avg-stars { font-size: 17px; }
    .bb-myreviews-card-head,
    .bb-myreviews-card-body { padding: 10px 14px; }
}

/* ============================================================
   Phase 11A — Product Search
   ============================================================ */

/* ── Search Hero ──────────────────────────────────────────── */
.bb-search-hero {
    background: var(--bb-deep-navy);
    padding: 40px 0 32px;
    color: var(--bb-white);
}
.bb-search-hero-title {
    font-family: var(--bb-font-heading);
    font-size: 2.4rem;
    font-weight: 600;
    color: var(--bb-white);
    margin: 0 0 8px;
    line-height: 1.2;
}
.bb-search-hero-sub {
    font-size: 14.5px;
    color: rgba(255, 255, 255, .65);
    margin: 0;
}

/* ── Search Layout wrapper ────────────────────────────────── */
.bb-search-layout {
    padding: 48px 0 72px;
    background: var(--bb-light-bg);
}

/* ── Filter Panel ─────────────────────────────────────────── */
.bb-search-panel {
    background: #fff;
    border: 1px solid #e5e0d8;
    border-radius: var(--bb-radius);
    padding: 20px;
    position: sticky;
    top: 78px;   /* clears sticky navbar */
}
.bb-search-panel-heading {
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--bb-deep-navy);
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #e5e0d8;
}
.bb-search-form-group {
    margin-bottom: 16px;
}
.bb-search-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--bb-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 6px;
}
.bb-search-clear-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 12.5px;
    color: var(--bb-muted);
    text-decoration: none;
    margin-top: 8px;
    padding: 4px 0;
    transition: color var(--bb-transition);
}
.bb-search-clear-link:hover { color: #dc3545; }

/* ── Results header ───────────────────────────────────────── */
.bb-search-results-head {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e0d8;
}
.bb-search-result-count {
    font-size: 14px;
    color: var(--bb-muted);
    padding-top: 3px;
}
.bb-search-result-count strong { color: var(--bb-deep-navy); font-weight: 700; }
.bb-search-result-count em     { color: var(--bb-deep-navy); font-style: italic; }

/* ── Active Filter Chips ──────────────────────────────────── */
.bb-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.bb-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bb-deep-navy);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 8px 4px 12px;
    border-radius: 30px;
    white-space: nowrap;
}
.bb-filter-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    margin-left: 2px;
    transition: background var(--bb-transition), color var(--bb-transition);
}
.bb-filter-chip-x:hover {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

/* ── Empty State ──────────────────────────────────────────── */
.bb-search-empty {
    background: #fff;
    border: 1px solid #e5e0d8;
    border-radius: var(--bb-radius);
    padding: 56px 32px;
    text-align: center;
}
.bb-search-empty i {
    font-size: 2.8rem;
    color: #ced4da;
    display: block;
    margin-bottom: 18px;
}
.bb-search-empty h4 {
    font-family: var(--bb-font-heading);
    font-size: 1.5rem;
    color: var(--bb-deep-navy);
    margin-bottom: 8px;
}
.bb-search-empty p {
    font-size: 14px;
    color: var(--bb-muted);
    margin-bottom: 24px;
}

/* "Shop All Products" secondary button (empty state) */
.bb-search-shop-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: var(--bb-deep-navy);
    border: 2px solid var(--bb-deep-navy);
    font-family: var(--bb-font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 12px 28px;
    border-radius: var(--bb-radius);
    text-decoration: none;
    transition: background var(--bb-transition), color var(--bb-transition);
}
.bb-search-shop-all-btn:hover {
    background: var(--bb-deep-navy);
    color: var(--bb-gold);
}

/* ── Responsive: Phase 11A ────────────────────────────────── */
@media (max-width: 991px) {
    .bb-search-panel {
        position: static;   /* un-stick on tablet/mobile */
        margin-bottom: 4px;
    }
}
@media (max-width: 767px) {
    .bb-search-hero-title { font-size: 1.9rem; }
    .bb-search-layout     { padding: 32px 0 56px; }
    .bb-search-empty      { padding: 40px 20px; }
}

/* ── Phase 11B: Sort Row ───────────────────────────────────── */
.bb-sort-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px 14px;
    background: var(--bb-light-bg);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius);
}
.bb-sort-form {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.bb-sort-label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--bb-navy);
    white-space: nowrap;
    flex-shrink: 0;
}
.bb-sort-select {
    max-width: 220px;
    border-color: var(--bb-border);
    font-size: 0.82rem;
    color: var(--bb-navy);
    background-color: #fff;
    cursor: pointer;
}
.bb-sort-select:focus {
    border-color: var(--bb-gold);
    box-shadow: 0 0 0 3px rgba(212,175,55,0.15);
    outline: none;
}

/* ── Phase 11B: Pagination ─────────────────────────────────── */
.bb-pagination-wrap {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}
.bb-pagination {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}
.bb-page-item {}
.bb-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius);
    background: #fff;
    color: var(--bb-navy);
    font-family: 'Poppins', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--bb-transition), color var(--bb-transition),
                border-color var(--bb-transition);
    cursor: pointer;
}
.bb-page-link:hover {
    background: var(--bb-gold);
    border-color: var(--bb-gold);
    color: #fff;
}
.bb-page-item.active .bb-page-link {
    background: var(--bb-deep-navy);
    border-color: var(--bb-deep-navy);
    color: #fff;
    cursor: default;
    pointer-events: none;
}
.bb-page-item.disabled .bb-page-link {
    color: rgba(7,24,45,0.3);
    background: var(--bb-light-bg);
    border-color: var(--bb-border);
    cursor: not-allowed;
    pointer-events: none;
}
.bb-page-ellipsis {
    border: none;
    background: transparent;
    color: rgba(7,24,45,0.45);
    cursor: default;
    pointer-events: none;
}

/* ── Responsive: Phase 11B ─────────────────────────────────── */
@media (max-width: 575px) {
    .bb-sort-row    { flex-direction: column; align-items: flex-start; }
    .bb-sort-form   { flex-direction: column; align-items: flex-start; gap: 6px; }
    .bb-sort-select { max-width: 100%; width: 100%; }
    .bb-page-link   { min-width: 34px; height: 34px; font-size: 0.78rem; }
}

/* ── Phase 11C: Admin Pagination ───────────────────────────── */
.adm-result-count {
    font-family: 'Poppins', sans-serif;
    font-size: 12.5px;
    color: #6c757d;
}
.adm-result-count strong {
    color: var(--bb-navy);
    font-weight: 600;
}
.adm-pagination-wrap {
    padding: 20px 0 6px;
    display: flex;
    justify-content: center;
}
.adm-pagination {
    display: flex;
    align-items: center;
    gap: 3px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}
.adm-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    background: #fff;
    color: var(--bb-navy);
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    cursor: pointer;
    white-space: nowrap;
}
.adm-page-link:hover {
    background: var(--bb-navy);
    border-color: var(--bb-navy);
    color: #fff;
}
.adm-page-link.active {
    background: var(--bb-deep-navy);
    border-color: var(--bb-deep-navy);
    color: #fff;
    cursor: default;
    pointer-events: none;
}
.adm-page-link.disabled {
    color: #adb5bd;
    background: #f8f9fa;
    border-color: #dee2e6;
    cursor: not-allowed;
    pointer-events: none;
}
.adm-page-ellipsis {
    border: none;
    background: transparent;
    color: #adb5bd;
    cursor: default;
    pointer-events: none;
}
@media (max-width: 575px) {
    .adm-pagination-wrap { padding: 16px 0 4px; }
    .adm-page-link       { min-width: 30px; height: 30px; font-size: 0.74rem; padding: 0 7px; }
}

/* ============================================================
   Phase 12B Luxury UI & Animation Polish
   ============================================================ */

/* --- Extended CSS Variables --------------------------------- */
:root {
    --bb-transition-fast:  0.15s ease;
    --bb-transition-slow:  0.45s ease;
    --bb-shadow-soft:      0 2px 16px rgba(7, 24, 45, 0.07);
    --bb-shadow-luxury:    0 16px 56px rgba(7, 24, 45, 0.20);
    --bb-radius-lg:        12px;
    --bb-radius-xl:        20px;
}

/* --- Enhanced Focus States ---------------------------------- */
:focus-visible {
    outline: 2px solid var(--bb-gold);
    outline-offset: 3px;
    border-radius: 3px;
}

/* --- Homepage Hero Entrance (CSS-only, above fold) ---------- */
.bb-hero .bb-hero-eyebrow {
    animation: bbFadeUp 0.6s ease both;
    animation-delay: 0.10s;
}
.bb-hero .bb-hero-title {
    animation: bbFadeUp 0.6s ease both;
    animation-delay: 0.22s;
}
.bb-hero .bb-hero-subtitle {
    animation: bbFadeUp 0.6s ease both;
    animation-delay: 0.38s;
}
.bb-hero .bb-hero-actions {
    animation: bbFadeUp 0.6s ease both;
    animation-delay: 0.52s;
}
@keyframes bbFadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}

/* Hero deco subtle breathing pulse */
.bb-hero-deco {
    animation: bbDecoPulse 7s ease-in-out infinite;
    will-change: transform, opacity;
}
@keyframes bbDecoPulse {
    0%, 100% { opacity: 1;   transform: translateY(-50%) scale(1);    }
    50%       { opacity: 0.7; transform: translateY(-50%) scale(1.04); }
}

/* --- Sticky Navbar Scroll Shadow --------------------------- */
.bb-navbar {
    transition: box-shadow 0.3s ease !important;
}
.bb-navbar--scrolled {
    box-shadow: 0 6px 24px rgba(7, 24, 45, 0.14) !important;
}

/* --- Nav Icon Hover Lift ----------------------------------- */
.bb-icon-link {
    transition: color var(--bb-transition), transform var(--bb-transition-fast) !important;
}
.bb-icon-link:hover {
    transform: translateY(-2px);
}

/* --- Button Shimmer Effect ---------------------------------- */
.bb-btn-primary,
.bb-btn-place-order,
.bb-btn-add-cart {
    position: relative;
    overflow: hidden;
}
.bb-btn-primary::after,
.bb-btn-place-order::after,
.bb-btn-add-cart::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 35%,
        rgba(255, 255, 255, 0.20) 50%,
        transparent 65%
    );
    transform: translateX(-150%);
    transition: transform 0.55s ease;
    pointer-events: none;
}
.bb-btn-primary:hover::after,
.bb-btn-place-order:hover::after,
.bb-btn-add-cart:hover::after {
    transform: translateX(150%);
}
.bb-btn-primary:hover {
    box-shadow: 0 6px 24px rgba(212, 175, 55, 0.35);
}

/* --- Product Card Luxury Lift ------------------------------- */
.bb-product-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease,
                border-color 0.3s ease !important;
    border: 1px solid transparent;
}
.bb-product-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--bb-shadow-luxury) !important;
    border-color: rgba(212, 175, 55, 0.18);
}
.bb-product-card:hover .bb-product-img {
    transform: scale(1.07) !important;
}
.bb-product-name {
    transition: color var(--bb-transition);
}
.bb-product-card:hover .bb-product-name {
    color: var(--bb-gold);
}

/* --- Sale Badge Pulse -------------------------------------- */
.bb-sale-badge {
    animation: bbSalePulse 3s ease-in-out infinite;
}
@keyframes bbSalePulse {
    0%, 100% { opacity: 1; }
    60%       { opacity: 0.80; }
}

/* --- Wishlist Button Micro-lift ---------------------------- */
.bb-btn-wish {
    transition: border-color var(--bb-transition), background var(--bb-transition),
                color var(--bb-transition), transform var(--bb-transition-fast) !important;
}
.bb-btn-wish:hover {
    transform: scale(1.08);
}
.bb-btn-wish-detail {
    transition: background var(--bb-transition), color var(--bb-transition),
                border-color var(--bb-transition), transform var(--bb-transition-fast) !important;
}
.bb-btn-wish-detail:hover {
    transform: translateY(-1px);
}

/* --- Product Detail Gallery -------------------------------- */
.bb-gallery-main {
    transition: box-shadow 0.35s ease;
}
.bb-gallery-main:hover {
    box-shadow: var(--bb-shadow-luxury);
}
.bb-gallery-thumb {
    transition: border-color var(--bb-transition),
                transform var(--bb-transition-fast) !important;
}
.bb-gallery-thumb:hover {
    transform: scale(1.06);
}
.bb-gallery-thumb.active {
    box-shadow: 0 0 0 2px rgba(7, 24, 45, 0.12);
}

/* --- Trust Item Hover -------------------------------------- */
.bb-trust-item {
    transition: transform var(--bb-transition-fast);
}
.bb-trust-item:hover {
    transform: translateX(3px);
}
.bb-trust-item i {
    transition: transform var(--bb-transition), color var(--bb-transition);
}
.bb-trust-item:hover i {
    transform: scale(1.2);
}

/* --- Category Card Gold Border Reveal ---------------------- */
.bb-card {
    transition: box-shadow var(--bb-transition), transform var(--bb-transition),
                border-color var(--bb-transition) !important;
}
.bb-card:hover {
    border-color: rgba(212, 175, 55, 0.40) !important;
}
.bb-card .bi {
    transition: transform var(--bb-transition), color var(--bb-transition);
}
.bb-card:hover .bi {
    transform: scale(1.14) translateY(-2px);
    color: var(--bb-soft-gold) !important;
}

/* --- Why BAGBUZZ Icon Animation ----------------------------- */
.bb-section .py-4 .bi.fs-1 {
    transition: transform var(--bb-transition), color var(--bb-transition);
    display: block;
}
.bb-section .py-4:hover .bi.fs-1 {
    transform: scale(1.13) translateY(-4px);
    color: var(--bb-soft-gold) !important;
}

/* --- Form Focus States (public) ----------------------------- */
.form-control:focus,
.form-select:focus {
    border-color: var(--bb-gold) !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.16) !important;
    outline: none;
}

/* --- Cart Item Hover --------------------------------------- */
.bb-cart-item {
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    border: 1px solid transparent;
}
.bb-cart-item:hover {
    border-color: rgba(212, 175, 55, 0.22);
    box-shadow: 0 4px 20px rgba(7, 24, 45, 0.09);
}
.bb-cart-summary {
    border-top: 3px solid var(--bb-gold) !important;
    transition: box-shadow var(--bb-transition);
}
.bb-cart-summary:hover {
    box-shadow: var(--bb-shadow-luxury);
}

/* --- Checkout Polish --------------------------------------- */
.bb-checkout-card {
    transition: box-shadow var(--bb-transition);
}
.bb-checkout-card:hover {
    box-shadow: 0 8px 36px rgba(7, 24, 45, 0.10);
}
.bb-checkout-summary {
    border-top: 3px solid var(--bb-gold) !important;
}
.bb-payment-option {
    transition: border-color var(--bb-transition), box-shadow var(--bb-transition) !important;
    cursor: pointer;
}
.bb-payment-option:hover {
    border-color: var(--bb-gold) !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.13);
}

/* --- My Account Cards -------------------------------------- */
.bb-account-card {
    transition: transform var(--bb-transition), box-shadow var(--bb-transition),
                border-color var(--bb-transition) !important;
}
.bb-account-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--bb-shadow-luxury) !important;
    border-color: rgba(212, 175, 55, 0.28) !important;
}
.bb-account-card-icon {
    transition: transform var(--bb-transition);
}
.bb-account-card:hover .bb-account-card-icon {
    transform: scale(1.14);
}
.bb-account-banner {
    border-bottom: 3px solid var(--bb-gold);
}

/* --- Static Page Hero Gold Accent Line -------------------- */
.bb-page-hero {
    position: relative;
}
.bb-page-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--bb-gold), transparent);
}

/* --- Section Label polish (used in about, discover etc.) -- */
.bb-section-label {
    transition: letter-spacing var(--bb-transition);
}

/* --- Pill/Chip hover micro-lift ----------------------------- */
.bb-pill {
    transition: background var(--bb-transition), color var(--bb-transition),
                border-color var(--bb-transition),
                transform var(--bb-transition-fast) !important;
}
.bb-pill:hover {
    transform: translateY(-1px);
}

/* --- Social Links hover lift -------------------------------- */
.bb-social-link {
    transition: background var(--bb-transition), color var(--bb-transition),
                border-color var(--bb-transition),
                transform var(--bb-transition-fast) !important;
}
.bb-social-link:hover {
    transform: translateY(-3px);
}

/* --- Footer Link Underline Slide --------------------------- */
.bb-footer-links a {
    position: relative;
}
.bb-footer-links a::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--bb-gold);
    transition: width var(--bb-transition);
}
.bb-footer-links a:hover::after {
    width: 100%;
}

/* ── Scroll Reveal Animation ──────────────────────────────── */
.bb-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.bb-reveal.is-visible {
    opacity: 1;
    transform: none;
}
.bb-reveal.bb-reveal-delay-1 { transition-delay: 0.08s; }
.bb-reveal.bb-reveal-delay-2 { transition-delay: 0.16s; }
.bb-reveal.bb-reveal-delay-3 { transition-delay: 0.24s; }

/* ── Reduced Motion Support ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:         0.01ms !important;
        animation-iteration-count:  1      !important;
        transition-duration:        0.01ms !important;
        scroll-behavior:            auto   !important;
    }
    .bb-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .bb-hero-deco { animation: none !important; }
    .bb-sale-badge { animation: none !important; }
}

/* ============================================================
   Navbar White Luxury Override — Final Specificity Guard
   Ensures Bootstrap 5 defaults never bleed through to .bb-navbar
   ============================================================ */
nav.navbar.bb-navbar {
    background-color: #ffffff !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.18) !important;
    box-shadow: 0 2px 16px rgba(7, 24, 45, 0.08) !important;
}
nav.navbar.bb-navbar .navbar-brand,
nav.navbar.bb-navbar .bb-brand {
    color: var(--bb-deep-navy) !important;
    font-family: var(--bb-font-heading);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
nav.navbar.bb-navbar .navbar-brand:hover,
nav.navbar.bb-navbar .bb-brand:hover {
    color: var(--bb-gold) !important;
}
nav.navbar.bb-navbar .nav-link {
    color: var(--bb-deep-navy) !important;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
nav.navbar.bb-navbar .nav-link:hover,
nav.navbar.bb-navbar .nav-link:focus,
nav.navbar.bb-navbar .nav-link.active {
    color: var(--bb-gold) !important;
}
nav.navbar.bb-navbar .bb-icon-link {
    color: var(--bb-deep-navy) !important;
}
nav.navbar.bb-navbar .bb-icon-link:hover {
    color: var(--bb-gold) !important;
}
nav.navbar.bb-navbar .navbar-toggler {
    border-color: rgba(212, 175, 55, 0.4) !important;
}
nav.navbar.bb-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2807%2C24%2C45%2C0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
/* Collapsed mobile menu stays white */
nav.navbar.bb-navbar .navbar-collapse {
    background-color: #ffffff;
}

/* ============================================================
   Auth Card Layout Fix — login.php / signup.php
   Centered premium card, max-width 460px, full-width inputs
   ============================================================ */
.bb-auth-container {
    justify-content: center !important;
    padding-top: 60px !important;
    padding-bottom: 80px !important;
}
.bb-auth-container > .row {
    width: 100%;
    max-width: 460px;
    margin-left: auto !important;
    margin-right: auto !important;
}
.bb-auth-container > .row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}
.bb-auth-card {
    width: 100% !important;
    max-width: 460px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.bb-auth-card .bb-form-input,
.bb-auth-card input.form-control,
.bb-auth-card textarea.form-control {
    width: 100% !important;
    display: block !important;
}
@media (max-width: 575.98px) {
    .bb-auth-container {
        padding-top: 32px !important;
        padding-bottom: 48px !important;
    }
    .bb-auth-card {
        padding: 28px 18px 24px !important;
        border-radius: 10px !important;
    }
}

/* ============================================================
   Phase 13 — Premium Visual Polish & Extended Animation System
   ============================================================ */

/* ─── Variable additions ──────────────────────────────────── */
:root {
    --bb-transition-med: 0.35s ease;
}

/* ─── 1. Typography refinements ──────────────────────────── */
.bb-hero-title,
.bb-page-hero-title,
.bb-section-heading,
.bb-section-title,
.bb-cta-strip-title {
    letter-spacing: -0.015em;
}

/* ─── 2. Hero atmospheric enhancements ───────────────────── */
.bb-hero::after {
    content: '';
    position: absolute;
    right: 2%;
    top: 50%;
    transform: translateY(-50%);
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(ellipse,
        rgba(212,175,55,.055) 0%,
        transparent 68%
    );
    pointer-events: none;
    z-index: 0;
}
.bb-hero .container { position: relative; z-index: 1; }
.bb-hero-deco::after {
    content: '';
    position: absolute;
    inset: -44px;
    border-radius: 50%;
    border: 1px solid rgba(212,175,55,.04);
}

/* ─── 3. Page hero (static pages) ────────────────────────── */
.bb-page-hero {
    background: linear-gradient(
        150deg,
        var(--bb-deep-navy) 0%,
        #07152b 55%,
        #0c2040 100%
    );
}
.bb-page-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(212,175,55,.30) 35%,
        rgba(212,175,55,.30) 65%,
        transparent 100%
    );
}

/* ─── 4. Product card enhancements ───────────────────────── */
.bb-product-card {
    border: 1px solid rgba(7,24,45,.055);
}
.bb-product-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 24px 56px rgba(7,24,45,.16);
}
.bb-product-card:hover .bb-product-img {
    transform: scale(1.07);
}
.bb-product-name {
    transition: color var(--bb-transition);
}
.bb-product-card:hover .bb-product-name {
    color: var(--bb-gold);
}
.bb-product-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(7,24,45,.44) 0%,
        rgba(7,24,45,.10) 38%,
        transparent 65%
    );
    opacity: 0;
    transition: opacity var(--bb-transition-med);
    pointer-events: none;
    z-index: 1;
}
.bb-product-card:hover .bb-product-img-wrap::after {
    opacity: 1;
}
.bb-sale-badge { z-index: 3 !important; }
.bb-product-actions {
    border-top: 1px solid rgba(7,24,45,.055);
    padding: 14px 16px 16px;
}
.bb-product-img-placeholder {
    background: linear-gradient(135deg, #f5f2ec 0%, #ede8df 100%);
}

/* ─── 5. Category card hover (index.php) ─────────────────── */
.bb-light-bg .bb-card {
    border: 1px solid rgba(212,175,55,.10);
    transition: background var(--bb-transition),
                border-color var(--bb-transition),
                transform var(--bb-transition),
                box-shadow var(--bb-transition);
}
.bb-light-bg .bb-card:hover {
    background: var(--bb-deep-navy) !important;
    border-color: var(--bb-gold);
    box-shadow: 0 12px 36px rgba(7,24,45,.20);
}
.bb-light-bg .bb-card:hover .bb-gold-text { color: var(--bb-gold) !important; }
.bb-light-bg .bb-card:hover > span {
    color: rgba(255,255,255,.88) !important;
}

/* ─── 6. Info card enhanced hover ────────────────────────── */
.bb-info-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 44px rgba(7,24,45,.13);
}

/* ─── 7. Discover card hover lift ────────────────────────── */
.bb-discover-card {
    transition: transform .3s ease, box-shadow .3s ease;
}
.bb-discover-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 22px 48px rgba(7,24,45,.32);
}

/* ─── 8. CTA strip enrichment ────────────────────────────── */
.bb-cta-strip {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        140deg,
        #060e1c 0%,
        var(--bb-deep-navy) 48%,
        #0c2140 100%
    );
}
.bb-cta-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at 65% 50%,
        rgba(212,175,55,.07) 0%,
        transparent 65%
    );
    pointer-events: none;
}
.bb-cta-strip::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(212,175,55,.28),
        transparent
    );
}
.bb-cta-strip > .container { position: relative; z-index: 1; }

/* ─── 9. Footer enhancements ─────────────────────────────── */
.bb-footer { position: relative; }
.bb-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(212,175,55,.45),
        transparent
    );
    z-index: 1;
}
.bb-footer-brand {
    display: inline-block;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(212,175,55,.28);
    margin-bottom: 4px;
}
.bb-footer-links a {
    position: relative;
}
.bb-footer-links a::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--bb-gold);
    transition: width var(--bb-transition);
}
.bb-footer-links a:hover::after { width: 100%; }
.bb-social-link {
    transition: background var(--bb-transition),
                color var(--bb-transition),
                border-color var(--bb-transition),
                transform .2s ease !important;
}
.bb-social-link:hover { transform: translateY(-3px) !important; }

/* ─── 10. Auth card gold top bar ─────────────────────────── */
.bb-auth-card {
    border: 1px solid rgba(212,175,55,.13) !important;
    position: relative;
    overflow: hidden;
}
.bb-auth-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--bb-deep-navy) 0%,
        var(--bb-gold) 50%,
        var(--bb-deep-navy) 100%
    );
    border-radius: var(--bb-radius) var(--bb-radius) 0 0;
    z-index: 1;
}

/* ─── 11. Scrolled navbar gold accent ────────────────────── */
.bb-navbar--scrolled {
    border-bottom-color: rgba(212,175,55,.22) !important;
    box-shadow: 0 4px 28px rgba(7,24,45,.13) !important;
}

/* ─── 12. Reveal animation variants ──────────────────────── */
.bb-reveal-left {
    opacity: 0;
    transform: translateX(-32px);
    transition: opacity .55s ease, transform .55s ease;
}
.bb-reveal-right {
    opacity: 0;
    transform: translateX(32px);
    transition: opacity .55s ease, transform .55s ease;
}
.bb-reveal-scale {
    opacity: 0;
    transform: scale(.93) translateY(8px);
    transition: opacity .5s ease, transform .5s ease;
}
.bb-reveal-left.is-visible,
.bb-reveal-right.is-visible,
.bb-reveal-scale.is-visible {
    opacity: 1;
    transform: none;
}

/* Additional stagger delays */
.bb-reveal-delay-4 { transition-delay: .32s; }
.bb-reveal-delay-5 { transition-delay: .40s; }
.bb-reveal-delay-6 { transition-delay: .48s; }

/* ─── 13. Product detail gallery polish ──────────────────── */
.bb-gallery-main {
    border: 1px solid rgba(7,24,45,.07);
    background: #f9f8f5;
}
.bb-gallery-thumb {
    transition: border-color var(--bb-transition),
                transform .2s ease !important;
}
.bb-gallery-thumb:hover { transform: scale(1.05); }
.bb-gallery-thumb.active { transform: scale(1.02); }

/* ─── 14. Trust points icon animation ────────────────────── */
.bb-trust-item i {
    transition: transform .2s ease, color var(--bb-transition);
}
.bb-trust-item:hover i {
    transform: scale(1.18);
    color: var(--bb-deep-navy);
}

/* ─── 15. Shop & search header gradient ──────────────────── */
.bb-shop-header,
.bb-search-hero {
    background: linear-gradient(135deg, var(--bb-deep-navy) 0%, #0a1f3d 100%);
}

/* ─── 16. Contact info card hover ────────────────────────── */
.bb-contact-info-card {
    transition: box-shadow var(--bb-transition), transform var(--bb-transition);
}
.bb-contact-info-card:hover {
    box-shadow: 0 8px 28px rgba(7,24,45,.10);
    transform: translateY(-2px);
}

/* ─── 17. Mobile nav polish ──────────────────────────────── */
@media (max-width: 991.98px) {
    nav.navbar.bb-navbar .navbar-collapse {
        border-top: 1px solid rgba(212,175,55,.10);
        padding-top: 16px;
        padding-bottom: 8px;
        margin-top: 8px;
    }
    nav.navbar.bb-navbar .bb-nav-icons {
        border-top: 1px solid rgba(212,175,55,.08);
        padding-top: 14px;
        margin-top: 4px;
        justify-content: flex-start;
        gap: 20px;
    }
}

/* ─── 18. Reduced motion support ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .bb-reveal-left,
    .bb-reveal-right,
    .bb-reveal-scale {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .bb-discover-card,
    .bb-contact-info-card {
        transition: none !important;
    }
}

/* ============================================================
   Phase 14 — Luxury Identity Redesign: New Components & Motion
   ============================================================ */

/* ─── Utility weight classes (Bootstrap 5 gap fills) ─────── */
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }

/* ─── Announcement bar: deeper gradient ──────────────────── */
.bb-announcement-bar {
    background: linear-gradient(90deg,
        #060e1c 0%,
        var(--bb-deep-navy) 40%,
        var(--bb-deep-navy) 60%,
        #060e1c 100%
    ) !important;
    font-size: 11.5px !important;
    letter-spacing: 0.08em;
    padding: 9px 16px !important;
    position: relative;
    overflow: hidden;
}
.bb-announcement-bar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,175,55,.22), transparent);
    pointer-events: none;
}

/* ─── Hero right panel (editorial category tiles) ────────── */
.bb-hero-right-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    width: 100%;
    max-width: 380px;
}
.bb-hero-rp-item {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(212,175,55,.10);
    border-radius: 8px;
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    transition: background var(--bb-transition), border-color var(--bb-transition);
}
.bb-hero-rp-item:hover {
    background: rgba(212,175,55,.07);
    border-color: rgba(212,175,55,.28);
}
.bb-hero-rp-item i {
    font-size: 1.5rem;
    color: var(--bb-gold);
}
.bb-hero-rp-item span {
    font-family: var(--bb-font-heading);
    font-size: 0.95rem;
    color: rgba(255,255,255,.70);
    letter-spacing: 0.02em;
}
.bb-hero-rp-item-1 { animation: bbFadeUp 0.6s ease 0.6s both; }
.bb-hero-rp-item-2 { animation: bbFadeUp 0.6s ease 0.72s both; }
.bb-hero-rp-item-3 { animation: bbFadeUp 0.6s ease 0.84s both; }
.bb-hero-rp-item-4 { animation: bbFadeUp 0.6s ease 0.96s both; }

/* ─── Hero scroll cue ────────────────────────────────────── */
@keyframes bbScrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0);    }
    50%       { transform: translateX(-50%) translateY(7px); }
}
.bb-hero-scroll-cue {
    position: absolute;
    bottom: -32px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    animation: bbFadeUp 0.6s ease 1.1s both,
               bbScrollBounce 2.2s ease-in-out 1.7s infinite;
    z-index: 2;
    pointer-events: none;
}
.bb-hero-scroll-cue i {
    font-size: 1.2rem;
    color: rgba(212,175,55,.55);
}

/* ─── Editorial category cards ───────────────────────────── */
.bb-cat-section {
    background: #fff;
    padding-bottom: 72px;
}
.bb-cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bb-light-bg);
    border: 1px solid rgba(7,24,45,.06);
    border-radius: 10px;
    padding: 26px 14px 22px;
    text-align: center;
    position: relative;
    overflow: hidden;
    min-height: 130px;
    transition: background var(--bb-transition),
                border-color var(--bb-transition),
                transform var(--bb-transition),
                box-shadow var(--bb-transition);
}
.bb-cat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, transparent 50%, rgba(212,175,55,.03) 100%);
    pointer-events: none;
}
.bb-cat-card:hover {
    background: var(--bb-deep-navy);
    border-color: rgba(212,175,55,.35);
    transform: translateY(-6px);
    box-shadow: 0 18px 42px rgba(7,24,45,.24);
    text-decoration: none;
}
.bb-cat-card-num {
    font-family: var(--bb-font-heading);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .20em;
    color: var(--bb-gold);
    margin-bottom: 10px;
    opacity: 0.65;
    transition: opacity var(--bb-transition);
}
.bb-cat-card:hover .bb-cat-card-num { opacity: 1; }
.bb-cat-card-icon {
    font-size: 1.55rem;
    color: var(--bb-deep-navy);
    margin-bottom: 10px;
    display: block;
    transition: color var(--bb-transition), transform var(--bb-transition);
}
.bb-cat-card:hover .bb-cat-card-icon {
    color: var(--bb-gold);
    transform: scale(1.14) translateY(-2px);
}
.bb-cat-card-label {
    font-family: var(--bb-font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--bb-deep-navy);
    line-height: 1.3;
    transition: color var(--bb-transition);
}
.bb-cat-card:hover .bb-cat-card-label { color: rgba(255,255,255,.88); }

/* ─── Brand marquee strip ────────────────────────────────── */
@keyframes bbMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.bb-marquee-strip {
    background: var(--bb-deep-navy);
    padding: 14px 0;
    overflow: hidden;
    border-top: 1px solid rgba(212,175,55,.08);
    border-bottom: 1px solid rgba(212,175,55,.08);
    position: relative;
    cursor: default;
}
.bb-marquee-strip::before,
.bb-marquee-strip::after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 72px;
    z-index: 2;
    pointer-events: none;
}
.bb-marquee-strip::before {
    left: 0;
    background: linear-gradient(to right, var(--bb-deep-navy), transparent);
}
.bb-marquee-strip::after {
    right: 0;
    background: linear-gradient(to left, var(--bb-deep-navy), transparent);
}
.bb-marquee-track {
    display: flex;
    white-space: nowrap;
    width: max-content;
    animation: bbMarquee 32s linear infinite;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(212,175,55,.55);
}
.bb-marquee-strip:hover .bb-marquee-track {
    animation-play-state: paused;
}

/* ─── Why BAGBUZZ dark editorial section ─────────────────── */
.bb-why-section {
    background: linear-gradient(150deg, #060d1b 0%, var(--bb-deep-navy) 55%, #091728 100%);
    position: relative;
    overflow: hidden;
}
.bb-why-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%,
        rgba(212,175,55,.07) 0%,
        transparent 62%
    );
    pointer-events: none;
}
.bb-why-section > .container { position: relative; z-index: 1; }
.bb-section-label--light { color: var(--bb-gold) !important; }
.bb-why-heading { color: rgba(255,255,255,.95) !important; }
.bb-why-subtitle {
    font-size: 15px;
    color: rgba(255,255,255,.55);
    max-width: 460px;
    margin: 0 auto;
    line-height: 1.75;
}
.bb-trust-block {
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(212,175,55,.10);
    border-radius: 10px;
    padding: 36px 24px 32px;
    text-align: center;
    height: 100%;
    transition: background var(--bb-transition),
                border-color var(--bb-transition),
                transform var(--bb-transition),
                box-shadow var(--bb-transition);
}
.bb-trust-block:hover {
    background: rgba(212,175,55,.06);
    border-color: rgba(212,175,55,.28);
    transform: translateY(-5px);
    box-shadow: 0 20px 48px rgba(0,0,0,.28);
}
.bb-trust-block-icon {
    font-size: 2rem;
    color: var(--bb-gold);
    margin-bottom: 18px;
    display: block;
    transition: transform var(--bb-transition);
}
.bb-trust-block:hover .bb-trust-block-icon {
    transform: scale(1.16) translateY(-2px);
}
.bb-trust-block-title {
    font-family: var(--bb-font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    color: rgba(255,255,255,.92);
    margin-bottom: 10px;
    line-height: 1.2;
}
.bb-trust-block-body {
    font-size: 13px;
    color: rgba(255,255,255,.48);
    line-height: 1.75;
    margin: 0;
}

/* ─── Auth pages: ambient luxury background ──────────────── */
.bb-auth-container {
    background: linear-gradient(
        160deg,
        #f8f5f0 0%,
        #f2ede6 55%,
        #ece7df 100%
    ) !important;
    position: relative;
    min-height: 72vh;
    padding-top: 52px;
    padding-bottom: 64px;
    display: block;
}
.bb-auth-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% -5%,
        rgba(212,175,55,.065) 0%,
        transparent 58%
    );
    pointer-events: none;
}
.bb-auth-card {
    box-shadow: 0 20px 60px rgba(7,24,45,.12) !important;
}

/* ─── Premium custom scrollbar ───────────────────────────── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #f4f1ec; }
::-webkit-scrollbar-thumb {
    background: rgba(212,175,55,.38);
    border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: var(--bb-gold); }

/* ─── Product card "View Details" button refinement ──────── */
.bb-product-actions .bb-view-btn {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    transition: color var(--bb-transition), letter-spacing var(--bb-transition) !important;
}
.bb-product-card:hover .bb-product-actions .bb-view-btn {
    letter-spacing: .11em;
    color: var(--bb-gold) !important;
}

/* ─── Shop/search header gradient refinement ─────────────── */
.bb-shop-header,
.bb-search-hero {
    background: linear-gradient(
        140deg,
        #060d1b 0%,
        var(--bb-deep-navy) 60%,
        #0a1e3a 100%
    ) !important;
}

/* ─── Page hero deeper atmosphere ───────────────────────────── */
.bb-page-hero {
    background: linear-gradient(
        155deg,
        #060d1b 0%,
        var(--bb-deep-navy) 52%,
        #0b1f3c 100%
    ) !important;
}
.bb-page-hero::before {
    background: radial-gradient(
        ellipse at 65% 35%,
        rgba(212,175,55,.09) 0%,
        transparent 62%
    ) !important;
}

/* ─── Footer brand depth ─────────────────────────────────── */
.bb-footer {
    background: linear-gradient(180deg,
        #071628 0%,
        #071220 100%
    ) !important;
}

/* ─── Reduced motion: Phase 14 ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .bb-hero-rp-item,
    .bb-hero-rp-item-1,
    .bb-hero-rp-item-2,
    .bb-hero-rp-item-3,
    .bb-hero-rp-item-4,
    .bb-hero-scroll-cue {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .bb-marquee-track {
        animation: none !important;
    }
    .bb-cat-card,
    .bb-trust-block {
        transition: none !important;
    }
}

/* ─── Responsive: Phase 14 ───────────────────────────────── */
@media (max-width: 991.98px) {
    .bb-hero-scroll-cue { display: none; }
    .bb-cat-section     { padding-bottom: 56px; }
}
@media (max-width: 767px) {
    .bb-cat-card        { padding: 20px 10px 18px; min-height: 110px; }
    .bb-cat-card-icon   { font-size: 1.3rem; }
    .bb-trust-block     { padding: 28px 18px 24px; }
    .bb-marquee-strip   { display: none; }
    .bb-hero-right-panel { display: none; }
}
@media (max-width: 575px) {
    .bb-hero-scroll-cue { display: none; }
}

/* ─── Ghost button (white outline on dark bg, e.g. CTA strip) */
.bb-btn-ghost {
    background: transparent !important;
    border-color: rgba(255,255,255,.40) !important;
    color: white !important;
}
.bb-btn-ghost:hover {
    background: rgba(255,255,255,.10) !important;
    border-color: rgba(255,255,255,.65) !important;
}

/* ─── Small button modifier ─────────────────────────────── */
.bb-btn-sm,
.bb-btn-primary.bb-btn-sm,
.bb-btn-outline.bb-btn-sm {
    font-size: 13px !important;
    padding: 8px 20px !important;
}

/* ─── Dark info card variant (discover page) ────────────── */
.bb-info-card--dark {
    background: var(--bb-deep-navy) !important;
    color: white;
}
.bb-info-card--dark .bb-info-card-icon {
    color: var(--bb-gold) !important;
}
.bb-info-card--dark .bb-info-card-title {
    color: white !important;
}
.bb-info-card--dark .bb-info-card-body {
    color: rgba(255,255,255,.65) !important;
}

/* ─── Feature list item (discover/about check-list) ─────── */
.bb-feature-list-item {
    font-size: 14.5px;
    color: var(--bb-muted);
    margin-bottom: 8px;
}

/* ─── Product shipping text ─────────────────────────────── */
.bb-product-shipping-text {
    font-size: 14.5px;
    color: rgba(7,24,45,.55);
    line-height: 1.85;
    margin: 0;
}

/* ─── Policy / form hint utilities ──────────────────────── */
.bb-policy-note {
    font-size: 13.5px;
    color: var(--bb-muted);
}
.bb-form-hint {
    font-size: 12.5px;
    color: var(--bb-muted);
}

/* ─── Careers empty state ────────────────────────────────── */
.bb-careers-empty-title {
    font-family: var(--bb-font-heading);
    color: var(--bb-deep-navy);
    margin-bottom: 10px;
}
.bb-careers-empty-body {
    font-size: 14.5px;
    color: var(--bb-muted);
    margin-bottom: 24px;
}

/* ─── Contact address small text ─────────────────────────── */
.bb-contact-address { font-size: 14px; }

/* ─── Inline badge size modifier ────────────────────────── */
.bb-badge-sm { font-size: 12px !important; }

/* ─── Track order page utilities ─────────────────────────── */
.bb-track-date { font-size: 13px; color: var(--bb-muted); }
.bb-track-total { font-weight: 600; color: var(--bb-deep-navy); }
.bb-track-awb { font-family: monospace; font-weight: 600; }
.bb-track-row--last { border-bottom: none !important; padding-bottom: 0 !important; }

/* ─── Shop count label ───────────────────────────────────── */
.bb-shop-count {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,.45);
    letter-spacing: .06em;
}

/* ─── Empty state (shop / search / wishlist) ─────────────── */
.bb-empty-state {
    max-width: 380px;
    margin: 0 auto;
    padding: 60px 24px;
}
.bb-empty-state-icon {
    font-size: 2.8rem;
    color: rgba(7,24,45,.18);
    display: block;
    margin-bottom: 20px;
}
.bb-empty-state-title {
    font-family: var(--bb-font-heading);
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--bb-deep-navy);
    margin-bottom: 10px;
}
.bb-empty-state-body {
    font-size: 14px;
    color: rgba(7,24,45,.50);
    margin-bottom: 28px;
    line-height: 1.7;
}

/* ─── Footer inline top-link ────────────────────────────── */
.bb-footer-top-link {
    color: rgba(212,175,55,.45);
    font-size: 1.15rem;
    line-height: 1;
    transition: color var(--bb-transition-fast);
    text-decoration: none;
}
.bb-footer-top-link:hover { color: var(--bb-gold); }

/* ─── Product reviews section ───────────────────────────── */
.bb-reviews-wrap { max-width: 820px; }

.bb-review-summary {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #fff;
    border: 1px solid #e5e0d8;
    border-radius: 8px;
    padding: 18px 22px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.bb-review-avg-score {
    font-size: 3rem;
    font-weight: 800;
    color: var(--bb-deep-navy);
    line-height: 1;
    font-family: var(--bb-font-heading);
}
.bb-review-stars {
    color: var(--bb-gold);
    font-size: 20px;
    letter-spacing: 2px;
    margin-bottom: 4px;
}
.bb-review-count {
    font-size: 13px;
    color: #6c757d;
}
.bb-review-count strong { color: var(--bb-deep-navy); }

.bb-review-list { display: flex; flex-direction: column; gap: 16px; }

.bb-review-card {
    background: #fff;
    border: 1px solid #e5e0d8;
    border-radius: 8px;
    padding: 18px 20px;
}
.bb-review-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.bb-review-card-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bb-deep-navy);
}
.bb-review-card-date { font-size: 12px; color: #aaa; }
.bb-review-card-stars {
    color: var(--bb-gold);
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 7px;
}
.bb-review-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--bb-deep-navy);
    margin-bottom: 5px;
}
.bb-review-card-body {
    font-size: 13.5px;
    color: #555;
    line-height: 1.65;
    white-space: pre-line;
    margin: 0;
}

.bb-no-reviews {
    background: #fff;
    border: 1px solid #e5e0d8;
    border-radius: 8px;
    padding: 32px 24px;
    text-align: center;
}
.bb-no-reviews-icon {
    font-size: 2rem;
    color: rgba(7,24,45,.15);
    display: block;
    margin-bottom: 12px;
}
.bb-no-reviews-title {
    margin: 0 0 6px;
    font-size: 14.5px;
    font-weight: 600;
    color: #444;
}
.bb-no-reviews-body {
    margin: 0;
    font-size: 13px;
    color: #6c757d;
}

/* ─── Back-to-top button ─────────────────────────────────── */
.bb-back-top {
    position: fixed;
    bottom: 28px;
    right: 22px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bb-deep-navy);
    border: 1.5px solid rgba(212,175,55,.40);
    color: var(--bb-gold);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1050;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.3s ease, transform 0.3s ease,
                border-color 0.2s ease, background 0.2s ease;
    pointer-events: none;
    box-shadow: 0 6px 20px rgba(7,24,45,.30);
}
.bb-back-top.bb-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.bb-back-top:hover {
    background: var(--bb-gold);
    border-color: var(--bb-gold);
    color: var(--bb-deep-navy);
    box-shadow: 0 8px 24px rgba(212,175,55,.30);
}
@media (prefers-reduced-motion: reduce) {
    .bb-back-top { transition: none !important; }
}
@media (max-width: 575px) {
    .bb-back-top { bottom: 16px; right: 14px; width: 36px; height: 36px; font-size: .9rem; }
}

/* ============================================================
   Phase 15 — Bug Fixes & Motion Refinement
   ============================================================ */

/* ─── 1. Prevent horizontal scroll sitewide ──────────────── */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* ─── 2. Mobile nav — explicit white background + layout ──── */
@media (max-width: 991.98px) {
    nav.navbar.bb-navbar {
        z-index: 1030;
    }
    nav.navbar.bb-navbar .navbar-collapse {
        background-color: #ffffff !important;
        border-top: 1px solid rgba(212,175,55,.12) !important;
        border-radius: 0 0 8px 8px;
        padding: 6px 0 16px !important;
        margin-top: 8px !important;
        box-shadow: 0 10px 28px rgba(7,24,45,.10);
    }
    nav.navbar.bb-navbar .navbar-collapse .navbar-nav {
        padding: 0 6px;
        gap: 2px;
    }
    nav.navbar.bb-navbar .navbar-collapse .nav-link {
        padding: 10px 14px !important;
        border-radius: 6px;
        transition: background .15s ease, color .15s ease !important;
    }
    nav.navbar.bb-navbar .navbar-collapse .nav-link:hover,
    nav.navbar.bb-navbar .navbar-collapse .nav-link.active {
        background: rgba(212,175,55,.08) !important;
    }
    nav.navbar.bb-navbar .navbar-collapse .nav-link::after {
        display: none !important;
    }
    nav.navbar.bb-navbar .bb-nav-icons {
        padding: 12px 14px 6px !important;
        border-top: 1px solid rgba(212,175,55,.10) !important;
        margin-top: 8px !important;
        justify-content: flex-start !important;
        gap: 22px !important;
    }
}

/* ─── 3. Marquee — contained, no horizontal bleed ─────────── */
.bb-marquee-strip {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    contain: layout;
}

/* ─── 4. Category section — tighter vertical rhythm ──────── */
.bb-cat-section.bb-section {
    padding-top: 60px !important;
    padding-bottom: 64px !important;
}
.bb-cat-section .justify-content-center.mb-5 {
    margin-bottom: 32px !important;
}
@media (min-width: 992px) {
    .bb-cat-card {
        min-height: 148px;
    }
}
.bb-cat-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 48px rgba(7,24,45,.26) !important;
}
.bb-cat-card:hover .bb-cat-card-num {
    color: rgba(212,175,55,.55) !important;
}

/* ─── 5. Page hero entrance stagger ──────────────────────── */
.bb-page-hero-eyebrow {
    opacity: 0;
    animation: bbFadeUp .50s cubic-bezier(.22,1,.36,1) .06s both;
}
.bb-page-hero-title {
    opacity: 0;
    animation: bbFadeUp .60s cubic-bezier(.22,1,.36,1) .18s both;
}
.bb-page-hero-sub {
    opacity: 0;
    animation: bbFadeUp .60s cubic-bezier(.22,1,.36,1) .30s both;
}

/* ─── 6. Reveal variants — spring easing ─────────────────── */
.bb-reveal {
    transition-timing-function: cubic-bezier(.22,1,.36,1) !important;
    transition-duration: .60s !important;
}
.bb-reveal-left,
.bb-reveal-right {
    transition-timing-function: cubic-bezier(.22,1,.36,1) !important;
    transition-duration: .65s !important;
}
.bb-reveal-scale {
    transition-timing-function: cubic-bezier(.22,1,.36,1) !important;
    transition-duration: .55s !important;
}

/* ─── 7. Auth card entrance ───────────────────────────────── */
.bb-auth-card {
    opacity: 0;
    animation: bbFadeUp .50s cubic-bezier(.22,1,.36,1) .08s both;
}

/* ─── 8. Info card hover lift ─────────────────────────────── */
.bb-info-card {
    transition: transform var(--bb-transition), box-shadow var(--bb-transition) !important;
}
.bb-info-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 32px rgba(7,24,45,.12) !important;
}

/* ─── 9. Trust icon micro-rotate on hover ─────────────────── */
.bb-trust-block:hover .bb-trust-icon {
    transform: scale(1.15) rotate(-4deg);
    transition: transform .35s cubic-bezier(.22,1,.36,1);
}

/* ─── 10. Brand subtle letter-spacing on hover ────────────── */
.bb-brand {
    transition: letter-spacing var(--bb-transition), color var(--bb-transition) !important;
    display: inline-block;
}
.bb-brand:hover {
    letter-spacing: .13em !important;
}

/* ─── 11. Form input — gold focus ring ────────────────────── */
.bb-form-input:focus {
    box-shadow: 0 0 0 3px rgba(212,175,55,.18) !important;
    border-color: var(--bb-gold) !important;
    outline: none;
}

/* ─── 12. Product image — overflow clip for scale effect ──── */
.bb-product-img-wrap {
    overflow: hidden !important;
}
.bb-product-img {
    transition: transform .5s cubic-bezier(.22,1,.36,1) !important;
}

/* ─── 13. Reduced motion — Phase 15 overrides ────────────── */
@media (prefers-reduced-motion: reduce) {
    .bb-page-hero-eyebrow,
    .bb-page-hero-title,
    .bb-page-hero-sub,
    .bb-auth-card {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .bb-reveal,
    .bb-reveal-left,
    .bb-reveal-right,
    .bb-reveal-scale {
        transition-duration: 0s !important;
    }
    .bb-brand {
        transition: color var(--bb-transition) !important;
    }
    .bb-info-card:hover,
    .bb-cat-card:hover {
        transform: none !important;
    }
    .bb-trust-block:hover .bb-trust-icon {
        transform: none !important;
    }
}

/* ============================================================
   Phase 16 — Luxury Light Palette, Navy Reduction & Motion
   ============================================================ */

/* ─── Extended warm luxury palette ───────────────────────── */
:root {
    --bb-ivory:       #F9F6F1;
    --bb-champagne:   #F0E8D6;
    --bb-cream:       #FDFBF7;
    --bb-warm-muted:  #9B9490;
    --bb-charcoal:    #1A1714;
}

/* ═══════════════════════════════════════════════════════════
   I.  NAVY REDUCTION — light editorial surfaces
   ═══════════════════════════════════════════════════════════ */

/* ─── 1. Page hero — ivory/champagne light gradient ──────── */
.bb-page-hero {
    background: linear-gradient(
        148deg,
        #faf7f2 0%,
        #f4ede3 52%,
        #ede5d8 100%
    ) !important;
    color: var(--bb-deep-navy) !important;
    padding: 72px 0 60px;
}
.bb-page-hero::before {
    background: radial-gradient(
        ellipse at 74% 42%,
        rgba(212,175,55,.065) 0%,
        transparent 62%
    ) !important;
    animation: bbOrbFloat 16s ease-in-out infinite;
}
/* Text on light background */
.bb-page-hero-eyebrow { color: var(--bb-gold)       !important; }
.bb-page-hero-title   { color: var(--bb-deep-navy)  !important; }
.bb-page-hero-sub     { color: var(--bb-warm-muted) !important; }

/* ─── 2. Shop header — light editorial ───────────────────── */
.bb-shop-header {
    background: linear-gradient(
        145deg,
        #faf7f2 0%,
        #f4ede3 58%,
        #ede5d8 100%
    ) !important;
    color: var(--bb-deep-navy) !important;
    border-bottom: 1px solid rgba(212,175,55,.14) !important;
}
.bb-shop-header-title { color: var(--bb-deep-navy)  !important; }
.bb-shop-count        { color: var(--bb-warm-muted) !important; }

/* ─── 3. Search hero — light editorial ───────────────────── */
.bb-search-hero {
    background: linear-gradient(
        145deg,
        #faf7f2 0%,
        #f4ede3 58%,
        #ede5d8 100%
    ) !important;
    color: var(--bb-deep-navy) !important;
    border-bottom: 1px solid rgba(212,175,55,.14) !important;
}
.bb-search-hero-title    { color: var(--bb-deep-navy)  !important; }
.bb-search-hero-sub      { color: var(--bb-warm-muted) !important; }
.bb-search-results-title { color: var(--bb-deep-navy)  !important; }

/* Breadcrumb text on light headers */
.bb-breadcrumb         { color: var(--bb-warm-muted) !important; }
.bb-breadcrumb a       { color: var(--bb-warm-muted) !important; }
.bb-breadcrumb a:hover { color: var(--bb-gold)        !important; }
.bb-breadcrumb .sep    { color: rgba(156,148,144,.5)  !important; }

/* ─── 4. Brand marquee strip — warm ivory, not navy ──────── */
.bb-marquee-strip {
    background: var(--bb-ivory) !important;
    border-top-color:    rgba(212,175,55,.20) !important;
    border-bottom-color: rgba(212,175,55,.20) !important;
}
.bb-marquee-strip::before {
    background: linear-gradient(to right, var(--bb-ivory), transparent) !important;
}
.bb-marquee-strip::after {
    background: linear-gradient(to left, var(--bb-ivory), transparent) !important;
}
.bb-marquee-track {
    color: rgba(7,24,45,.32) !important;
    letter-spacing: .14em !important;
}

/* ─── 5. CTA strip — warm champagne, not navy ─────────────── */
.bb-cta-strip {
    background: linear-gradient(
        140deg,
        #f2eadf 0%,
        #eee2cf 50%,
        #e8dcc8 100%
    ) !important;
    border-top:    1px solid rgba(212,175,55,.22) !important;
    border-bottom: 1px solid rgba(212,175,55,.22) !important;
}
.bb-cta-strip::before {
    background: radial-gradient(
        ellipse at 62% 50%,
        rgba(212,175,55,.10) 0%,
        transparent 65%
    ) !important;
}
.bb-cta-strip::after {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(212,175,55,.35),
        transparent
    ) !important;
}
.bb-cta-strip-title { color: var(--bb-deep-navy)  !important; }
.bb-cta-strip-sub   { color: var(--bb-warm-muted) !important; }

/* ─── 6. Why BAGBUZZ — warm charcoal, not cold navy ──────── */
.bb-why-section {
    background: linear-gradient(
        155deg,
        #1f1c19 0%,
        #1a1714 55%,
        #141210 100%
    ) !important;
}
.bb-why-section::before {
    background: radial-gradient(
        ellipse at 50% 0%,
        rgba(212,175,55,.11) 0%,
        transparent 62%
    ) !important;
}
.bb-trust-block {
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(212,175,55,.12) !important;
}
.bb-trust-block:hover {
    background: rgba(212,175,55,.07) !important;
    border-color: rgba(212,175,55,.30) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,.32),
                0 0 0 1px rgba(212,175,55,.12) !important;
}

/* ─── 7. Discover collection cards — warm charcoal ──────── */
.bb-discover-card {
    background: linear-gradient(
        148deg,
        #201e1b 0%,
        #191613 100%
    ) !important;
}
.bb-discover-card::before {
    background: linear-gradient(
        135deg,
        rgba(212,175,55,.09) 0%,
        transparent 55%
    ) !important;
}
.bb-discover-card:hover {
    box-shadow: 0 22px 52px rgba(0,0,0,.36) !important;
}

/* ─── 8. Info card dark variant — warm charcoal ─────────── */
.bb-info-card--dark {
    background: linear-gradient(
        148deg,
        #201e1b 0%,
        #191613 100%
    ) !important;
}
.bb-info-card--dark .bb-info-card-body {
    color: rgba(255,255,255,.58) !important;
}

/* ─── 9. Category cards — clean white base ───────────────── */
.bb-cat-card {
    background: #ffffff !important;
    border-color: rgba(212,175,55,.16) !important;
    box-shadow: 0 2px 14px rgba(7,24,45,.04) !important;
}
/* Navy hover remains — it's the premium accent moment */

/* ═══════════════════════════════════════════════════════════
   II.  EDITORIAL SURFACES & TYPOGRAPHY WARMTH
   ═══════════════════════════════════════════════════════════ */

/* ─── 10. Section labels — consistent gold ───────────────── */
.bb-section-label { color: var(--bb-gold) !important; }

/* ─── 11. Content section alt — warm ivory ───────────────── */
.bb-content-section-alt { background: var(--bb-ivory) !important; }

/* ─── 12. Info cards — warm white base ───────────────────── */
.bb-info-card {
    background: #ffffff !important;
    border: 1px solid rgba(212,175,55,.12) !important;
    box-shadow: 0 2px 14px rgba(7,24,45,.05) !important;
}

/* ─── 13. Value icons — gold ─────────────────────────────── */
.bb-value-icon { color: var(--bb-gold) !important; }

/* ─── 14. Free shipping chip — adapt for light bg ──────── */
.bb-free-shipping-notice {
    color: var(--bb-deep-navy)         !important;
    border-color: rgba(212,175,55,.22) !important;
    background: var(--bb-cream)        !important;
}

/* ─── 15. Gallery main — cream background ────────────────── */
.bb-gallery-main { background: var(--bb-cream) !important; }

/* ─── 16. Pill bar strip — warm ivory ───────────────────── */
.bb-light-bg.py-3.border-bottom { background: var(--bb-ivory) !important; }

/* ─── 17. Hero — richer layered atmosphere ───────────────── */
.bb-hero {
    background: linear-gradient(
        148deg,
        #040f1c 0%,
        #07182D 48%,
        #091b31 80%,
        #050d1a 100%
    ) !important;
}
.bb-hero::before {
    background:
        radial-gradient(ellipse at 76% 22%, rgba(212,175,55,.09) 0%, transparent 42%),
        radial-gradient(ellipse at 22% 78%, rgba(212,175,55,.05) 0%, transparent 38%)
    !important;
}

/* ═══════════════════════════════════════════════════════════
   III.  PREMIUM MOTION & AMBIENT EFFECTS
   ═══════════════════════════════════════════════════════════ */

/* ─── 18. Ambient float keyframes ────────────────────────── */
@keyframes bbOrbFloat {
    0%, 100% { transform: translate(0, 0)   scale(1); }
    33%       { transform: translate(14px, -18px) scale(1.04); }
    66%       { transform: translate(-8px, 10px)  scale(.97); }
}
@keyframes bbOrbFloatB {
    0%, 100% { transform: translate(0, 0); }
    45%       { transform: translate(-16px, 12px); }
    80%       { transform: translate(10px, -8px); }
}

/* ─── 19. Auth container — floating ambient orb ──────────── */
.bb-auth-container { overflow: hidden !important; }
.bb-auth-container > .container {
    position: relative;
    z-index: 1;
}

/* ─── 20. Page hero — container layer above orb ──────────── */
.bb-page-hero .container {
    position: relative;
    z-index: 1;
}

/* ─── 21. Gold line at bottom of page hero ───────────────── */
/* Refine the existing ::after to feel more airy on light bg */
.bb-page-hero::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(212,175,55,.25) 35%,
        rgba(212,175,55,.25) 65%,
        transparent 100%
    ) !important;
}

/* ─── 22. Discover & trust — 3D perspective prep ─────────── */
.bb-discover-card,
.bb-trust-block {
    transition: transform .4s cubic-bezier(.22,1,.36,1),
                box-shadow .4s cubic-bezier(.22,1,.36,1),
                background var(--bb-transition),
                border-color var(--bb-transition) !important;
    transform-style: preserve-3d;
    will-change: transform;
}

/* ─── 23. Button primary — richer gold hover shadow ──────── */
.bb-btn-primary:hover {
    box-shadow: 0 8px 32px rgba(212,175,55,.40) !important;
    transform: translateY(-2px) !important;
}

/* ─── 24. Product card — warm image overlay ──────────────── */
.bb-product-img-wrap::after {
    background: linear-gradient(
        to top,
        rgba(5,14,24,.40) 0%,
        rgba(5,14,24,.08) 34%,
        transparent 62%
    ) !important;
}

/* ─── 25. Custom scrollbar — warmer tones ────────────────── */
::-webkit-scrollbar-track { background: #f4f0ea !important; }

/* ─── 26. Reduced motion — Phase 16 ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .bb-page-hero::before     { animation: none !important; }
    .bb-discover-card,
    .bb-trust-block {
        transform-style: flat !important;
        will-change: auto !important;
    }
}

/* ─── 27. Mobile responsive adjustments ─────────────────── */
@media (max-width: 767px) {
    .bb-page-hero   { padding: 52px 0 44px !important; }
    .bb-shop-header { padding-top: 36px    !important; padding-bottom: 28px !important; }
    .bb-cta-strip   { padding: 52px 0      !important; }
    .bb-search-hero { padding-top: 36px    !important; padding-bottom: 28px !important; }
}

/* ─── 28. Ghost/secondary button — adapt for light CTA strip ─
   shipping-info.php and returns-refunds.php use .bb-btn-ghost
   inside .bb-cta-strip. White ghost is invisible on champagne. */
.bb-cta-strip .bb-btn-ghost,
.bb-cta-strip .bb-btn-secondary {
    background: transparent !important;
    border: 2px solid rgba(7,24,45,.28) !important;
    color: var(--bb-deep-navy) !important;
}
.bb-cta-strip .bb-btn-ghost:hover,
.bb-cta-strip .bb-btn-secondary:hover {
    background: rgba(7,24,45,.06) !important;
    border-color: rgba(7,24,45,.55) !important;
    color: var(--bb-deep-navy) !important;
    transform: translateY(-1px) !important;
}

/* ============================================================
   Phase 17 — Final Polish: Typography · Buttons · Spacing · Motion
   ============================================================ */

/* ─── 1. Heading line-heights — editorial luxury ─────────── */
h1 { line-height: 1.12; }
h2 { line-height: 1.18; }
h3 { line-height: 1.26; }
h4, h5, h6 { line-height: 1.34; }

/* ─── 2. Hero title — tighter display setting ────────────── */
.bb-hero-title {
    line-height: 1.07 !important;
    letter-spacing: -.025em !important;
}

/* ─── 3. Page hero title — refined scale ─────────────────── */
.bb-page-hero-title {
    font-size: clamp(1.9rem, 4.5vw, 3rem) !important;
    line-height: 1.13 !important;
}

/* ─── 4. Subtitle readability on ivory/champagne ─────────── */
/* #9B9490 on #f4ede3 gives ~2.7:1 contrast. Darken to #6E6860
   which reaches ~4.0:1 — passes WCAG AA for large text. */
.bb-page-hero-sub {
    color: #6E6860 !important;
}
/* Keep subtitles light on genuinely dark sections */
.bb-hero .bb-hero-subtitle      { color: rgba(255,255,255,.78) !important; }
.bb-why-section .bb-why-subtitle { color: rgba(255,255,255,.62) !important; }

/* ─── 5. Section label — refined weight + tracking ───────── */
.bb-section-label {
    font-size: 11px !important;
    letter-spacing: .22em !important;
    font-weight: 700 !important;
}

/* ─── 6. Button system — coherent shared base ────────────── */
.bb-btn-primary,
.bb-btn-outline,
.bb-btn-ghost,
.bb-btn-sm,
.bb-btn-outline-sm,
.bb-btn-sm-outline {
    font-family: var(--bb-font-body) !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    border-radius: var(--bb-radius) !important;
    text-decoration: none !important;
}

/* ─── 7. Fix: white outline buttons on light section backgrounds
   .bb-btn-outline / .bb-btn-outline-sm are built for dark
   backgrounds. In any light section, override to navy outline. ── */
.bb-section .bb-btn-outline,
.bb-content-section .bb-btn-outline,
.bb-content-section-alt .bb-btn-outline,
.bb-section-sm .bb-btn-outline,
.bb-section .bb-btn-outline-sm,
.bb-content-section .bb-btn-outline-sm,
.bb-content-section-alt .bb-btn-outline-sm,
.bb-section-sm .bb-btn-outline-sm {
    color: var(--bb-deep-navy) !important;
    border-color: rgba(7,24,45,.28) !important;
    background: transparent !important;
}
.bb-section .bb-btn-outline:hover,
.bb-content-section .bb-btn-outline:hover,
.bb-content-section-alt .bb-btn-outline:hover,
.bb-section-sm .bb-btn-outline:hover,
.bb-section .bb-btn-outline-sm:hover,
.bb-content-section .bb-btn-outline-sm:hover,
.bb-content-section-alt .bb-btn-outline-sm:hover,
.bb-section-sm .bb-btn-outline-sm:hover {
    background: rgba(7,24,45,.06) !important;
    border-color: rgba(7,24,45,.55) !important;
    color: var(--bb-deep-navy) !important;
    transform: translateY(-1px) !important;
}

/* ─── 8. Mobile & tablet spacing ─────────────────────────── */
@media (max-width: 991.98px) {
    .bb-section              { padding: 64px 0 !important; }
    .bb-section-sm           { padding: 40px 0 !important; }
    .bb-content-section,
    .bb-content-section-alt  { padding: 56px 0 !important; }
}
@media (max-width: 767px) {
    .bb-section              { padding: 52px 0 !important; }
    .bb-section-sm           { padding: 32px 0 !important; }
    .bb-content-section,
    .bb-content-section-alt  { padding: 44px 0 !important; }
    .bb-why-section          { padding: 60px 0 !important; }
    .bb-section-heading      { margin-bottom: 12px !important; }
    .bb-cat-section .justify-content-center.mb-5 { margin-bottom: 20px !important; }
}
@media (max-width: 575.98px) {
    .bb-section { padding: 44px 0 !important; }
    /* Hero action buttons stack on small mobile */
    .bb-hero-actions {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: flex-start !important;
    }
    .bb-hero-actions .bb-btn-primary,
    .bb-hero-actions .bb-btn-outline {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
    /* Auth card inner padding */
    .bb-auth-card { padding: 28px 18px !important; }
    /* Footer column gap */
    .bb-footer .gy-5 { --bs-gutter-y: 2rem !important; }
}

/* ─── 9. Hero entrance — upgrade Phase 12B to spring easing ─ */
/* Override the sub-properties set by the Phase 12B `animation`
   shorthand. Same selector + !important wins at end of cascade. */
.bb-hero .bb-hero-eyebrow  {
    animation-timing-function: cubic-bezier(.22,1,.36,1) !important;
    animation-duration: .55s !important;
}
.bb-hero .bb-hero-title {
    animation-timing-function: cubic-bezier(.22,1,.36,1) !important;
    animation-duration: .65s !important;
}
.bb-hero .bb-hero-subtitle {
    animation-timing-function: cubic-bezier(.22,1,.36,1) !important;
    animation-duration: .65s !important;
}
.bb-hero .bb-hero-actions {
    animation-timing-function: cubic-bezier(.22,1,.36,1) !important;
    animation-duration: .55s !important;
}

/* ─── 10. Reveal — consolidated spring duration ──────────── */
.bb-reveal,
.bb-reveal-left,
.bb-reveal-right,
.bb-reveal-scale {
    transition-timing-function: cubic-bezier(.22,1,.36,1) !important;
    transition-duration: .60s !important;
}

/* ─── 11. Orb float — disable on mobile (performance) ───── */
@media (max-width: 767px) {
    .bb-page-hero::before { animation: none !important; }
}

/* ─── 12. Border radius consistency ──────────────────────── */
.bb-auth-card,
.bb-product-card,
.bb-info-card,
.bb-discover-card,
.bb-trust-block { border-radius: var(--bb-radius-lg) !important; }

/* ─── 13. Shadow — two-level system ─────────────────────── */
.bb-product-card { box-shadow: 0 2px 12px rgba(7,24,45,.055) !important; }
.bb-info-card    { box-shadow: 0 2px 12px rgba(7,24,45,.055) !important; }
.bb-info-card:hover { box-shadow: 0 14px 40px rgba(7,24,45,.12) !important; }
.bb-auth-card    { box-shadow: 0 20px 60px rgba(7,24,45,.10) !important; }

/* ─── 14. Footer bottom — mobile layout ──────────────────── */
@media (max-width: 767px) {
    .bb-footer-bottom {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
    }
    .bb-footer-links-bottom {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px !important;
    }
}

/* ─── 15. Reduced motion — Phase 17 ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .bb-hero .bb-hero-eyebrow,
    .bb-hero .bb-hero-title,
    .bb-hero .bb-hero-subtitle,
    .bb-hero .bb-hero-actions {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================================
   Phase 18 — Why BAGBUZZ: Light luxury, ambient motion
   ============================================================ */

/* ─── 1. Section surface — warm champagne instead of charcoal ─ */
.bb-why-section {
    background:
        radial-gradient(ellipse 55% 45% at 18% 85%, rgba(212,175,55,.08) 0%, transparent 55%),
        radial-gradient(ellipse 45% 50% at 82% 12%, rgba(212,175,55,.06) 0%, transparent 55%),
        linear-gradient(165deg, #FAF5EC 0%, #F0E8D6 52%, #EAD9BE 100%) !important;
    position: relative;
    overflow: hidden;
}

/* ─── 2. Ambient orb — slow floating gold glow ─────────────── */
/* Reuses the existing bbOrbFloat keyframe from Phase 16 */
.bb-why-section::before {
    content: '';
    position: absolute;
    width: 55%;
    aspect-ratio: 1;
    top: -18%;
    left: 22%;
    background: radial-gradient(circle, rgba(212,175,55,.14) 0%, transparent 62%) !important;
    border-radius: 50%;
    pointer-events: none;
    animation: bbOrbFloat 22s ease-in-out infinite !important;
    will-change: transform;
}

/* ─── 3. Gold sweep shimmer across top of section ──────────── */
/* Uses transform (not left) for GPU-composited animation.
   Start position: translateX(-120%) keeps it fully off-screen left. */
.bb-why-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 55%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(212,175,55,.50) 45%,
        rgba(212,175,55,.50) 55%,
        transparent 100%
    );
    pointer-events: none;
    will-change: transform, opacity;
    animation: bbGoldSweep 7s ease-in-out infinite;
}
@keyframes bbGoldSweep {
    0%   { transform: translateX(-120%); opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { transform: translateX(235%);  opacity: 0; }
}

/* ─── 4. Ensure container sits above pseudo-elements ─────────── */
.bb-why-section > .container { position: relative; z-index: 1; }

/* ─── 5. Heading — navy on light bg ─────────────────────────── */
.bb-section-label--light { color: var(--bb-gold) !important; }
.bb-why-heading {
    color: var(--bb-deep-navy) !important;
    letter-spacing: -.015em !important;
}
.bb-why-subtitle {
    color: #6E6860 !important;
    font-size: 15px !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    line-height: 1.80 !important;
}

/* ─── 6. Trust cards — white surface, gold top accent ──────── */
.bb-trust-block {
    background: #FFFFFF !important;
    border: 1px solid rgba(212,175,55,.18) !important;
    border-top: 3px solid rgba(212,175,55,.52) !important;
    border-radius: var(--bb-radius-lg) !important;
    box-shadow: 0 4px 20px rgba(7,24,45,.07),
                0 1px 4px  rgba(7,24,45,.04) !important;
    padding: 34px 24px 30px !important;
    text-align: center !important;
}

/* ─── 7. Trust card hover — light bg lift ──────────────────── */
.bb-trust-block:hover {
    background: #FFFDF8 !important;
    border-color: rgba(212,175,55,.40) !important;
    border-top-color: var(--bb-gold) !important;
    box-shadow: 0 18px 52px rgba(7,24,45,.11),
                0 4px 12px rgba(212,175,55,.16) !important;
    transform: translateY(-6px) !important;
}

/* ─── 8. Trust icon — gold, slow drift animation ─────────────
   Icons gently float and breathe — staggered so all four move
   at different phases, creating subtle visual rhythm. */
.bb-trust-block-icon {
    font-size: 2rem !important;
    color: var(--bb-gold) !important;
    margin-bottom: 18px !important;
    display: block !important;
    animation: bbIconDrift 7s ease-in-out infinite;
    will-change: transform;
    transition: transform .35s cubic-bezier(.22,1,.36,1) !important;
}
@keyframes bbIconDrift {
    0%, 100% { transform: translateY(0)    scale(1.00); }
    50%       { transform: translateY(-5px) scale(1.08); }
}
/* Stagger icon drift across the four cards */
.bb-why-section .bb-reveal-delay-1 .bb-trust-block-icon { animation-delay: 0s;    }
.bb-why-section .bb-reveal-delay-2 .bb-trust-block-icon { animation-delay: 1.75s; }
.bb-why-section .bb-reveal-delay-3 .bb-trust-block-icon { animation-delay: 3.5s;  }
.bb-why-section .bb-reveal-delay-4 .bb-trust-block-icon { animation-delay: 5.25s; }

/* On hover, stop drift animation so the CSS transform can take over
   (animation-play-state: paused still applies the animated transform;
   animation: none releases it so the static transform rule wins). */
.bb-trust-block:hover .bb-trust-block-icon {
    animation: none !important;
    transform: scale(1.18) translateY(-3px) !important;
}

/* ─── 9. Trust text — dark on white card ──────────────────── */
.bb-trust-block-title {
    font-family: var(--bb-font-heading) !important;
    font-size: 1.18rem !important;
    font-weight: 600 !important;
    color: var(--bb-deep-navy) !important;
    margin-bottom: 10px !important;
    line-height: 1.20 !important;
}
.bb-trust-block-body {
    font-size: 13px !important;
    color: #7A746E !important;
    line-height: 1.80 !important;
    margin-bottom: 0 !important;
}

/* ─── 10. Mobile responsive ──────────────────────────────── */
@media (max-width: 767px) {
    .bb-trust-block {
        padding: 26px 16px 22px !important;
    }
    .bb-trust-block-icon {
        font-size: 1.75rem !important;
        margin-bottom: 14px !important;
    }
    .bb-trust-block-title { font-size: 1.05rem !important; }
    /* Disable the shimmer sweep on mobile — too wide */
    .bb-why-section::after { display: none !important; }
}

/* ─── 11. Reduced motion — Phase 18 ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .bb-why-section::before,
    .bb-why-section::after  { animation: none !important; }
    .bb-trust-block-icon    { animation: none !important; }
}

/* ============================================================
   Phase 19 — Hero Background Image Swiper
   ============================================================ */

/* ─── 1. Media container — full-bleed absolute layer ──────── */
.bb-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;          /* lowest in .bb-hero stacking context */
    pointer-events: none;
    overflow: hidden;
}

/* ─── 2. Individual slides ─────────────────────────────────── */
.bb-hero-media-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    will-change: opacity;
    transition: opacity 1.5s cubic-bezier(.4,0,.2,1);
}

/* Active slide: fade in + Ken Burns slow zoom */
.bb-hero-media-slide.is-active {
    opacity: 1;
    animation: bbKenBurns 7s ease-out forwards;
}
@keyframes bbKenBurns {
    from { transform: scale(1.06); }
    to   { transform: scale(1.01); }
}

/* ─── 3. Dark luxury overlay on the media container ─────────
   Merges the dark vignette with the gold atmospheric glow.
   Lives inside .bb-hero-media so it sits above the slides
   but the entire media layer is still below hero content. */
.bb-hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 68% 50%, rgba(212,175,55,.08) 0%, transparent 52%),
        linear-gradient(
            135deg,
            rgba(4,15,28,.84) 0%,
            rgba(7,24,45,.76) 50%,
            rgba(5,18,36,.73) 100%
        );
    z-index: 1;           /* above slides, within media stacking context */
    pointer-events: none;
}

/* ─── 4. Z-index guard — lift content above media + overlay ── */
/* Container was z-index:1; bump to 2 so it clears the media
   layer and its internal overlay (which is z-index:1 within
   the media stacking context, not the hero's). */
.bb-hero .container {
    z-index: 2 !important;
}
/* Decorative circle above media layer, below content */
.bb-hero-deco {
    z-index: 1 !important;
}

/* ─── 5. Mobile — stronger overlay for text readability ────── */
@media (max-width: 767px) {
    .bb-hero-media::after {
        background:
            linear-gradient(
                150deg,
                rgba(4,15,28,.91) 0%,
                rgba(7,24,45,.84) 55%,
                rgba(5,18,36,.82) 100%
            ) !important;
    }
}

/* ─── 6. Reduced motion — freeze at first slide, no Ken Burns  */
@media (prefers-reduced-motion: reduce) {
    .bb-hero-media-slide {
        transition: none !important;
        will-change: auto !important;
    }
    .bb-hero-media-slide.is-active {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }
}

/* ============================================================
   Phase 20 — Luxury Shop & Product Experience
   ============================================================ */

/* ─── 1. Shared spring easing shorthand ─────────────────────── */
/* Already using --bb-spring in prior phases; add it here if absent */
:root {
    --bb-spring-20: cubic-bezier(.22,1,.36,1);
    --bb-card-r20:  14px;
}

/* ─── 2. Shop header & search hero — editorial light palette ─── */
/* Override Phase 14 dark-gradient (line ~5969) */
.bb-shop-header,
.bb-search-hero {
    background: linear-gradient(
        145deg,
        var(--bb-ivory) 0%,
        var(--bb-champagne) 100%
    ) !important;
    border-bottom: 1px solid rgba(212,175,55,.16) !important;
    padding: 52px 0 44px !important;
}
.bb-shop-header-title {
    color: var(--bb-deep-navy) !important;
    font-weight: 600 !important;
    letter-spacing: -.01em !important;
}
.bb-search-hero-title {
    color: var(--bb-deep-navy) !important;
    font-weight: 600 !important;
    letter-spacing: -.01em !important;
    margin-bottom: 8px !important;
}
.bb-search-hero-sub {
    color: rgba(7,24,45,.5) !important;
    font-size: 14px !important;
}
/* Breadcrumb light context */
.bb-shop-header .bb-breadcrumb,
.bb-search-hero .bb-breadcrumb {
    color: rgba(7,24,45,.48) !important;
}
.bb-shop-header .bb-breadcrumb a,
.bb-search-hero .bb-breadcrumb a {
    color: rgba(7,24,45,.55) !important;
}
.bb-shop-header .bb-breadcrumb a:hover,
.bb-search-hero .bb-breadcrumb a:hover {
    color: var(--bb-gold) !important;
}
.bb-shop-count {
    color: rgba(7,24,45,.5) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: .03em !important;
}

/* ─── 3. Category pill bar ───────────────────────────────────── */
.bb-light-bg.border-bottom {
    background: var(--bb-ivory) !important;
    border-color: rgba(212,175,55,.13) !important;
}
.bb-pill {
    padding: 7px 22px !important;
    border: 1px solid rgba(7,24,45,.10) !important;
    background: rgba(255,255,255,.9) !important;
    color: rgba(7,24,45,.7) !important;
    font-size: 12.5px !important;
    letter-spacing: .05em !important;
    transition: all .3s var(--bb-spring-20) !important;
}
.bb-pill:hover {
    background: rgba(7,24,45,.05) !important;
    color: var(--bb-deep-navy) !important;
    border-color: rgba(7,24,45,.18) !important;
    transform: translateY(-1px) !important;
}
.bb-pill.active {
    background: var(--bb-deep-navy) !important;
    color: var(--bb-gold) !important;
    border-color: var(--bb-deep-navy) !important;
    box-shadow: 0 4px 14px rgba(7,24,45,.22) !important;
    transform: none !important;
}

/* ─── 4. Product card — luxury upgrade ───────────────────────── */
.bb-product-card {
    border-radius: var(--bb-card-r20) !important;
    border: 1px solid rgba(212,175,55,.12) !important;
    box-shadow: 0 2px 10px rgba(7,24,45,.06) !important;
    transition: transform .5s var(--bb-spring-20),
                box-shadow .5s var(--bb-spring-20),
                border-color .3s ease !important;
}
.bb-product-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 32px 72px rgba(7,24,45,.20) !important;
    border-color: rgba(212,175,55,.30) !important;
}

/* Image wrap */
.bb-product-img-wrap {
    background: var(--bb-ivory) !important;
}
/* Slow luxury zoom */
.bb-product-img {
    transition: transform .7s var(--bb-spring-20) !important;
    object-position: center center;
}
.bb-product-card:hover .bb-product-img {
    transform: scale(1.08) !important;
}

/* Overlay gradient — editorial bottom-up fade */
.bb-product-img-wrap::after {
    background: linear-gradient(
        to top,
        rgba(7,24,45,.52) 0%,
        rgba(7,24,45,.10) 40%,
        transparent 65%
    ) !important;
    transition: opacity .4s ease !important;
}
.bb-product-card:hover .bb-product-img-wrap::after {
    opacity: 1 !important;
}

/* Sale badge — navy/gold premium */
.bb-sale-badge {
    background: var(--bb-deep-navy) !important;
    color: var(--bb-gold) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    padding: 4px 10px !important;
    border-radius: 3px !important;
    top: 12px !important;
    left: 12px !important;
    animation: none !important;
}

/* Product info */
.bb-product-info {
    padding: 16px 18px 10px !important;
}
.bb-product-category {
    font-size: 10px !important;
    letter-spacing: .16em !important;
    margin-bottom: 5px !important;
    opacity: .85 !important;
}
.bb-product-name {
    font-size: 1.07rem !important;
    font-weight: 700 !important;
    line-height: 1.22 !important;
    margin-bottom: 10px !important;
}
.bb-price-regular,
.bb-price-sale {
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
}
.bb-price-original {
    font-size: .8rem !important;
    color: rgba(7,24,45,.38) !important;
}
.bb-stock-badge.in-stock {
    background: rgba(39,174,96,.10) !important;
    color: #1a7040 !important;
    font-size: 10.5px !important;
}
.bb-stock-badge.out-stock {
    background: rgba(192,57,43,.08) !important;
    color: #a93226 !important;
    font-size: 10.5px !important;
}

/* Product actions bar */
.bb-product-actions {
    padding: 12px 18px 16px !important;
    border-top: 1px solid rgba(212,175,55,.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* View details link — underline reveal */
.bb-view-btn {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: var(--bb-deep-navy) !important;
    position: relative !important;
    padding-bottom: 2px !important;
    text-decoration: none !important;
    transition: color .25s ease !important;
}
.bb-view-btn::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: var(--bb-gold) !important;
    transform: scaleX(0) !important;
    transform-origin: left !important;
    transition: transform .35s var(--bb-spring-20) !important;
}
.bb-product-card:hover .bb-view-btn {
    color: var(--bb-gold) !important;
}
.bb-product-card:hover .bb-view-btn::after {
    transform: scaleX(1) !important;
}

/* Cart + wishlist buttons compact */
.bb-btn-add-cart {
    font-size: 11.5px !important;
    padding: 7px 13px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    letter-spacing: .03em !important;
}
.bb-btn-wish {
    border-radius: 6px !important;
}

/* Image placeholder — luxury gradient */
.bb-product-img-placeholder {
    background: linear-gradient(135deg, #f8f5f0 0%, #ede8df 100%) !important;
}
.bb-product-img-placeholder span {
    font-size: 13px !important;
    letter-spacing: .2em !important;
    color: rgba(7,24,45,.14) !important;
}

/* ─── 5. Product detail — gallery ────────────────────────────── */
/* Gallery wrap: flex row on desktop (thumbs left, main right) */
.bb-gallery-wrap {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
/* Vertical thumb column (desktop) */
.bb-gallery-thumbs-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    width: 80px;
}
.bb-gallery-thumbs-col .bb-gallery-thumb {
    width: 80px !important;
    height: 80px !important;
    border-radius: 8px !important;
    border: 2px solid transparent !important;
    overflow: hidden;
    background: var(--bb-ivory);
    cursor: pointer;
    padding: 0 !important;
    transition: border-color .25s ease, transform .3s var(--bb-spring-20),
                box-shadow .25s ease !important;
    flex-shrink: 0;
    display: block;
}
.bb-gallery-thumbs-col .bb-gallery-thumb:hover {
    border-color: rgba(212,175,55,.55) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(7,24,45,.12) !important;
}
.bb-gallery-thumbs-col .bb-gallery-thumb.active {
    border-color: var(--bb-deep-navy) !important;
    box-shadow: 0 0 0 1px rgba(7,24,45,.14) !important;
    transform: none !important;
}
.bb-gallery-thumbs-col .bb-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Main image area — flex-grow fills remaining space */
.bb-gallery-wrap .bb-gallery-main {
    flex: 1 1 0;
    min-width: 0;
}

/* Gallery main — more premium */
.bb-gallery-main {
    border-radius: 16px !important;
    background: var(--bb-ivory) !important;
    cursor: zoom-in;
    box-shadow: 0 4px 28px rgba(7,24,45,.09) !important;
    transition: box-shadow .4s ease !important;
    overflow: hidden;
    aspect-ratio: 1 !important;
}
.bb-gallery-main:hover {
    box-shadow: 0 14px 52px rgba(7,24,45,.16) !important;
}
.bb-gallery-main img {
    transition: transform .65s var(--bb-spring-20) !important;
}
.bb-gallery-main:hover img {
    transform: scale(1.04) !important;
}

/* Mobile: revert to horizontal row below */
@media (max-width: 767px) {
    .bb-gallery-wrap {
        flex-direction: column;
        gap: 12px;
    }
    .bb-gallery-thumbs-col {
        flex-direction: row;
        width: auto;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 2px;
        order: 2;
    }
    .bb-gallery-thumbs-col::-webkit-scrollbar { display: none; }
    .bb-gallery-thumbs-col .bb-gallery-thumb {
        width: 66px !important;
        height: 66px !important;
    }
}

/* ─── 6. Product detail — info block ─────────────────────────── */
.bb-product-detail-category {
    font-size: 10.5px !important;
    letter-spacing: .18em !important;
    margin-bottom: 10px !important;
}
.bb-product-detail-name {
    font-size: clamp(1.85rem, 3vw, 2.7rem) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -.02em !important;
    margin-bottom: 10px !important;
}
.bb-product-detail-sku {
    font-size: 11px !important;
    color: rgba(7,24,45,.38) !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    margin-bottom: 22px !important;
}
/* Price block — gold line separators */
.bb-detail-price-wrap {
    padding: 18px 0 !important;
    border-top: 1px solid rgba(212,175,55,.15) !important;
    border-bottom: 1px solid rgba(212,175,55,.15) !important;
    margin-bottom: 22px !important;
    gap: 12px !important;
    align-items: center !important;
}
.bb-detail-price-regular,
.bb-detail-price-sale {
    font-size: 2rem !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
}
.bb-detail-price-original {
    font-size: 1.05rem !important;
    color: rgba(7,24,45,.38) !important;
}
.bb-discount-tag {
    background: rgba(212,175,55,.14) !important;
    color: var(--bb-deep-navy) !important;
    border: 1px solid rgba(212,175,55,.3) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .07em !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
}
.bb-short-desc {
    font-size: 14px !important;
    line-height: 1.85 !important;
    color: rgba(7,24,45,.65) !important;
    margin-bottom: 24px !important;
}
/* Meta grid */
.bb-product-meta-grid {
    border-color: rgba(212,175,55,.14) !important;
    padding: 16px 0 !important;
    margin-bottom: 24px !important;
}
.bb-product-meta-row {
    padding: 6px 0 !important;
    font-size: 13px !important;
    border-bottom: 1px solid rgba(7,24,45,.04) !important;
}
.bb-product-meta-row:last-child { border-bottom: none !important; }
.bb-meta-label {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
    color: rgba(7,24,45,.45) !important;
    min-width: 140px !important;
}
.bb-meta-value {
    color: var(--bb-deep-navy) !important;
    font-weight: 500 !important;
}
/* ATC button */
.bb-btn-atc {
    border-radius: 8px !important;
    padding: 15px 24px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: .06em !important;
    transition: all .4s var(--bb-spring-20) !important;
}
/* Qty input */
.bb-qty-input {
    border: 1.5px solid rgba(212,175,55,.3) !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    width: 76px !important;
    padding: 9px 10px !important;
    background: #fff !important;
    cursor: text !important;
    color: var(--bb-dark-text) !important;
}
.bb-qty-input:focus {
    border-color: var(--bb-gold) !important;
    box-shadow: 0 0 0 3px rgba(212,175,55,.12) !important;
    outline: none !important;
}
/* Wishlist button — detail page */
.bb-btn-wish-detail {
    border-radius: 8px !important;
    padding: 12px 22px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;
    margin-top: 12px !important;
    border: 1.5px solid rgba(7,24,45,.15) !important;
    color: var(--bb-deep-navy) !important;
    background: transparent !important;
    transition: all .3s var(--bb-spring-20) !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.bb-btn-wish-detail:hover {
    border-color: var(--bb-gold) !important;
    background: rgba(212,175,55,.07) !important;
    transform: translateY(-1px) !important;
}
.bb-btn-wish-detail.wishlisted {
    border-color: rgba(212,175,55,.55) !important;
    background: rgba(212,175,55,.08) !important;
}
/* Trust items — card treatment */
.bb-trust-points {
    gap: 10px !important;
    margin-top: 24px !important;
    padding-top: 22px !important;
    border-top: 1px solid rgba(212,175,55,.14) !important;
}
.bb-trust-item {
    font-size: 12px !important;
    color: var(--bb-deep-navy) !important;
    font-weight: 500 !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    background: var(--bb-ivory) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(212,175,55,.14) !important;
    transition: background .25s ease, border-color .25s ease,
                transform .3s var(--bb-spring-20) !important;
}
.bb-trust-item:hover {
    background: rgba(212,175,55,.09) !important;
    border-color: rgba(212,175,55,.32) !important;
    transform: translateY(-2px) translateX(0) !important;
}
.bb-trust-item i {
    font-size: 15px !important;
    flex-shrink: 0 !important;
    transition: transform .3s var(--bb-spring-20) !important;
}
.bb-trust-item:hover i {
    transform: scale(1.2) !important;
}

/* ─── 7. Description / specs / shipping — editorial ──────────── */
.bb-product-tabs { padding: 60px 0 !important; }
.bb-product-section {
    border-color: rgba(212,175,55,.14) !important;
}
.bb-section-sub-heading {
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
    position: relative;
    padding-bottom: 14px !important;
    margin-bottom: 20px !important;
}
.bb-section-sub-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 28px;
    height: 2px;
    background: var(--bb-gold);
    border-radius: 2px;
    opacity: .8;
}
.bb-product-description,
.bb-product-specs {
    font-size: 14px !important;
    line-height: 1.95 !important;
    color: rgba(7,24,45,.67) !important;
}
.bb-product-shipping-text {
    font-size: 14px !important;
    line-height: 1.9 !important;
    color: rgba(7,24,45,.65) !important;
}

/* ─── 8. Reviews section — premium ──────────────────────────── */
.bb-review-summary {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
    background: var(--bb-ivory);
    border: 1px solid rgba(212,175,55,.18);
    border-radius: 12px;
    margin-bottom: 24px;
}
.bb-review-avg-score {
    font-family: var(--bb-font-heading);
    font-size: 3rem;
    font-weight: 700;
    color: var(--bb-deep-navy);
    line-height: 1;
    flex-shrink: 0;
}
.bb-review-stars {
    color: var(--bb-gold);
    font-size: 15px;
    letter-spacing: 2px;
    line-height: 1;
    margin-bottom: 5px;
}
.bb-review-count {
    font-size: 12.5px;
    color: rgba(7,24,45,.5);
}
.bb-review-count strong { color: var(--bb-deep-navy); }

.bb-review-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}
.bb-review-card {
    background: #fff !important;
    border: 1px solid rgba(212,175,55,.14) !important;
    border-left: 3px solid var(--bb-gold) !important;
    border-radius: 10px !important;
    padding: 20px 24px !important;
    transition: box-shadow .3s ease, transform .35s var(--bb-spring-20) !important;
}
.bb-review-card:hover {
    box-shadow: 0 8px 28px rgba(7,24,45,.09) !important;
    transform: translateY(-2px) !important;
}
.bb-review-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
}
.bb-review-card-name {
    font-family: var(--bb-font-heading) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--bb-deep-navy) !important;
}
.bb-review-card-date {
    font-size: 11.5px !important;
    color: rgba(7,24,45,.38) !important;
    letter-spacing: .04em !important;
}
.bb-review-card-stars {
    color: var(--bb-gold) !important;
    font-size: 13px !important;
    margin-bottom: 8px !important;
    letter-spacing: 2px !important;
}
.bb-review-card-title {
    font-family: var(--bb-font-heading) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin-bottom: 6px !important;
}
.bb-review-card-body {
    font-size: 13.5px !important;
    color: rgba(7,24,45,.62) !important;
    line-height: 1.75 !important;
}

/* No reviews placeholder */
.bb-no-reviews {
    text-align: center;
    padding: 40px 20px !important;
    background: var(--bb-ivory) !important;
    border: 1px dashed rgba(212,175,55,.32) !important;
    border-radius: 12px !important;
}
.bb-no-reviews-icon {
    color: rgba(212,175,55,.45) !important;
    font-size: 2rem !important;
    margin-bottom: 12px !important;
    display: block;
}
.bb-no-reviews-title {
    font-family: var(--bb-font-heading) !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    color: var(--bb-deep-navy) !important;
    margin-bottom: 8px !important;
}
.bb-no-reviews-body {
    font-size: 13.5px !important;
    color: rgba(7,24,45,.5) !important;
    line-height: 1.75 !important;
    max-width: 420px;
    margin: 0 auto !important;
}

/* ─── 9. Search layout ───────────────────────────────────────── */
.bb-search-layout {
    background: var(--bb-ivory) !important;
    padding: 52px 0 80px !important;
}
.bb-search-panel {
    background: #fff !important;
    border: 1px solid rgba(212,175,55,.18) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(7,24,45,.06) !important;
    position: sticky;
    top: 80px;
}
.bb-search-panel-heading {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: var(--bb-deep-navy) !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid rgba(212,175,55,.14) !important;
    margin-bottom: 18px !important;
}
.bb-search-label {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    color: rgba(7,24,45,.45) !important;
    display: block !important;
    margin-bottom: 5px !important;
}
.bb-sort-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #fff !important;
    border: 1px solid rgba(212,175,55,.15) !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    margin-bottom: 16px !important;
}
.bb-sort-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
    color: rgba(7,24,45,.45) !important;
    white-space: nowrap !important;
}
.bb-sort-select {
    border: 1px solid rgba(212,175,55,.22) !important;
    border-radius: 6px !important;
    font-size: 12.5px !important;
    color: var(--bb-deep-navy) !important;
}
.bb-search-result-count {
    font-size: 13px !important;
    color: rgba(7,24,45,.52) !important;
}
.bb-search-result-count strong {
    color: var(--bb-deep-navy) !important;
    font-weight: 700 !important;
}
.bb-filter-chip {
    background: rgba(212,175,55,.10) !important;
    border: 1px solid rgba(212,175,55,.26) !important;
    color: var(--bb-deep-navy) !important;
    border-radius: 99px !important;
    font-size: 12px !important;
    padding: 4px 10px 4px 12px !important;
    font-weight: 500 !important;
}
.bb-filter-chip-x {
    color: rgba(7,24,45,.45) !important;
    margin-left: 4px !important;
    transition: color .2s !important;
}
.bb-filter-chip-x:hover { color: var(--bb-deep-navy) !important; }

/* ─── 10. Free shipping notice ───────────────────────────────── */
.bb-free-shipping-notice {
    background: rgba(212,175,55,.10) !important;
    border: 1px solid rgba(212,175,55,.22) !important;
    color: var(--bb-deep-navy) !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    letter-spacing: .02em !important;
}

/* ─── 11. Empty states ───────────────────────────────────────── */
.bb-empty-state-icon {
    color: rgba(212,175,55,.45) !important;
    font-size: 2.4rem !important;
    display: block !important;
    margin-bottom: 16px !important;
}
.bb-empty-state-title {
    font-family: var(--bb-font-heading) !important;
    font-size: 1.7rem !important;
    font-weight: 600 !important;
    color: var(--bb-deep-navy) !important;
    margin-bottom: 10px !important;
}
.bb-empty-state-body {
    font-size: 14px !important;
    color: rgba(7,24,45,.5) !important;
    line-height: 1.75 !important;
    max-width: 420px;
    margin: 0 auto 22px !important;
}

/* ─── 12. Mobile ─────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .bb-shop-header,
    .bb-search-hero {
        padding: 40px 0 34px !important;
    }
}
@media (max-width: 767px) {
    .bb-shop-header-title,
    .bb-search-hero-title {
        font-size: 1.9rem !important;
    }
    .bb-product-info {
        padding: 13px 15px 8px !important;
    }
    .bb-product-actions {
        padding: 10px 15px 14px !important;
    }
    .bb-product-detail-name {
        font-size: 1.75rem !important;
    }
    .bb-detail-price-regular,
    .bb-detail-price-sale {
        font-size: 1.65rem !important;
    }
    .bb-trust-item {
        padding: 8px 10px !important;
        font-size: 11.5px !important;
    }
    .bb-review-card {
        padding: 16px 18px !important;
    }
    .bb-review-summary {
        padding: 16px 18px;
        gap: 14px;
    }
    .bb-review-avg-score { font-size: 2.5rem; }
    .bb-product-tabs { padding: 44px 0 !important; }
    .bb-section-sub-heading { font-size: 1.4rem !important; }
    .bb-section-sub-heading::after { width: 22px; }
    .bb-no-reviews { padding: 28px 16px !important; }
}
@media (max-width: 575px) {
    .bb-trust-points {
        gap: 6px !important;
    }
    .bb-review-summary {
        padding: 14px 16px;
        gap: 12px;
    }
    .bb-review-avg-score { font-size: 2.2rem; }
}

/* ─── 13. Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .bb-product-card,
    .bb-product-img,
    .bb-gallery-main img,
    .bb-gallery-thumbs-col .bb-gallery-thumb,
    .bb-pill,
    .bb-review-card,
    .bb-trust-item,
    .bb-view-btn::after {
        transition: none !important;
        animation: none !important;
    }
    .bb-product-card:hover,
    .bb-gallery-thumbs-col .bb-gallery-thumb:hover,
    .bb-review-card:hover,
    .bb-trust-item:hover {
        transform: none !important;
    }
    .bb-gallery-main:hover img {
        transform: none !important;
    }
}

/* ============================================================
   Phase 21 — Merchandising Consistency Polish
   ============================================================ */

/* ─── 1. Product name — 2-line clamp + reserved height ─────── */
/* Prevents variable-length names from misaligning price/CTA in grids */
.bb-product-name {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    min-height: 2.5em !important;
}

/* ─── 2. Image wrap — enforce 1:1 aspect ratio everywhere ───── */
.bb-product-img-wrap {
    aspect-ratio: 1 / 1 !important;
    background: var(--bb-ivory) !important;
}

/* ─── 3. Action button height normalization ──────────────────── */
/* Align bb-btn-out-stock-sm with the Phase 20 bb-btn-add-cart styling */
.bb-btn-out-stock-sm {
    padding: 7px 13px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    background: rgba(7,24,45,.04) !important;
    border-color: rgba(7,24,45,.13) !important;
    color: rgba(7,24,45,.35) !important;
    letter-spacing: .03em !important;
}

/* ─── 4. Homepage featured section — editorial module ────────── */
/* Gives the featured picks section a distinct curated feel */
.bb-featured-section {
    background: linear-gradient(
        180deg,
        var(--bb-ivory)     0%,
        rgba(253,251,247,1) 55%,
        #fff                100%
    ) !important;
    position: relative;
}
.bb-featured-section .bb-section-label {
    color: var(--bb-gold) !important;
}
/* Subtle gold shimmer at top of featured module */
.bb-featured-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 180px;
    background: radial-gradient(
        ellipse 70% 100% at 50% 0%,
        rgba(212,175,55,.07) 0%,
        transparent 75%
    );
    pointer-events: none;
}

/* ─── 5. Price group — consistent min-height ─────────────────── */
/* Ensures price line is same height even when only regular price shown */
.bb-price-group {
    min-height: 1.65em !important;
    align-items: baseline !important;
}

/* ─── 6. Search empty state — Phase 20 luxury override ──────── */
/* Old .bb-search-empty rules replaced by .bb-empty-state (done in template) */
/* Keep this rule to neutralise the base bg styling if the class persists anywhere */
.bb-search-empty {
    background: var(--bb-ivory) !important;
    border: 1px dashed rgba(212,175,55,.28) !important;
    border-radius: 14px !important;
}
.bb-search-empty i {
    color: rgba(212,175,55,.45) !important;
    font-size: 2.4rem !important;
}
.bb-search-empty h4 {
    font-family: var(--bb-font-heading) !important;
    font-size: 1.65rem !important;
    color: var(--bb-deep-navy) !important;
}
.bb-search-empty p {
    color: rgba(7,24,45,.5) !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
}

/* ─── 7. Wishlist action bar refinements ─────────────────────── */
.bb-wishlist-bar {
    padding-bottom: 4px !important;
    border-bottom: 1px solid rgba(212,175,55,.10) !important;
    margin-bottom: 28px !important;
}
.bb-wishlist-bar .bb-btn-outline {
    font-size: 12px !important;
    padding: 8px 18px !important;
    letter-spacing: .04em !important;
}
.bb-btn-sm-danger {
    padding: 8px 16px !important;
    font-size: 12px !important;
    border-radius: 7px !important;
    letter-spacing: .02em !important;
    transition: background .25s ease, color .25s ease, border-color .25s ease !important;
}

/* ─── 8. Shop section — ensure product grid section top matches ─ */
/* Prevents shop page section from having uneven top gap vs featured */
.bb-search-layout .row.g-4,
.bb-section .row.g-4 {
    /* no extra override needed — gap is already g-4 (24px) everywhere */
}

/* ─── 9. Mobile pass ─────────────────────────────────────────── */
@media (max-width: 575px) {
    .bb-product-name {
        min-height: 2.4em !important;
        -webkit-line-clamp: 2 !important;
    }
    .bb-featured-section::before {
        height: 100px;
    }
    .bb-wishlist-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    .bb-price-group {
        min-height: 1.5em !important;
    }
}

/* ─── 10. Reduced motion — Phase 21 additions ────────────────── */
@media (prefers-reduced-motion: reduce) {
    .bb-featured-section::before {
        display: none;
    }
}

/* ============================================================
   Phase 22 — Hero Banner Cropping Fix & Overlay Refinement
   ============================================================ */

/* ─── 1. Hero height: 16:9 aspect-ratio aware ───────────────────
   88vh was too tall for 16:9 images, causing ~17% crop top/bottom.
   56.25vw = 100vw × 9/16 — matches the native image ratio exactly.
   Clamped: min 480px (content floor), max 90vh (very tall screens). */
.bb-hero {
    min-height: clamp(480px, 56.25vw, 90vh) !important;
}

/* ─── 2. Ken Burns — reduce starting zoom to minimise crop ──────
   Previous scale(1.06) zoomed in 6% before animating, adding
   extra crop on top of the container size. 1.02 is barely
   perceptible but still gives the cinematic warmth. */
@keyframes bbKenBurns {
    from { transform: scale(1.025); }
    to   { transform: scale(1.00);  }
}

/* ─── 3. Overlay — lighter desktop, preserve mobile readability ─
   Previous left-anchor was rgba(.84) — images were barely visible.
   Pulling to ~.68 lets the images breathe while keeping text safe. */
.bb-hero-media::after {
    background:
        radial-gradient(ellipse at 68% 50%, rgba(212,175,55,.10) 0%, transparent 52%),
        linear-gradient(
            135deg,
            rgba(4,15,28,.70) 0%,
            rgba(7,24,45,.60) 50%,
            rgba(5,18,36,.55) 100%
        ) !important;
}

/* ─── 4. Mobile — portrait phones can't show 16:9 without heavy
   crop, so keep a sensible fixed height + stronger overlay ──────*/
@media (max-width: 767px) {
    .bb-hero {
        min-height: 480px !important;
    }
    .bb-hero-media::after {
        background:
            linear-gradient(
                160deg,
                rgba(4,15,28,.88) 0%,
                rgba(7,24,45,.80) 55%,
                rgba(5,18,36,.78) 100%
            ) !important;
    }
}

/* ─── 5. Tablet (768–991px) — medium fix ────────────────────────
   At 768px, 56.25vw ≈ 432px which is below the 480px floor.
   Give it a bit more breathing room. */
@media (min-width: 768px) and (max-width: 991px) {
    .bb-hero {
        min-height: clamp(480px, 56.25vw, 640px) !important;
    }
}

/* ─── 6. Reduced motion — freeze first slide, no Ken Burns ──────
   (already handled in Phase 19 block; this guards the override) */
@media (prefers-reduced-motion: reduce) {
    .bb-hero-media-slide.is-active {
        animation: none !important;
        transform: scale(1) !important;
    }
}

/* ─── 7. Hero category panel — removed from markup ──────────────
   Nullify orphaned rules from earlier phases so they can never
   accidentally re-appear if markup is restored incorrectly. */
.bb-hero-right-panel,
.bb-hero-rp-item,
.bb-hero-rp-item-1,
.bb-hero-rp-item-2,
.bb-hero-rp-item-3,
.bb-hero-rp-item-4 {
    display: none !important;
}

/* ============================================================
   Phase 23 — Immersive 3D Luxury Design System
   ============================================================ */

/* ─── 1. Design tokens ───────────────────────────────────────── */
:root {
    /* Spatial shadow system — layered, warm */
    --bb-s1: 0 2px 8px rgba(7,24,45,.06),  0 1px 3px rgba(7,24,45,.04);
    --bb-s2: 0 6px 20px rgba(7,24,45,.10), 0 2px 8px rgba(7,24,45,.06);
    --bb-s3: 0 16px 44px rgba(7,24,45,.14), 0 4px 14px rgba(7,24,45,.08);
    --bb-s4: 0 32px 80px rgba(7,24,45,.18), 0 8px 24px rgba(7,24,45,.10);
    /* Gold glow accent */
    --bb-gold-glow: 0 0 36px rgba(212,175,55,.18), 0 0 72px rgba(212,175,55,.08);
    /* Camera perspective */
    --bb-p3d: 1100px;
}

/* ─── 2. Keyframes ───────────────────────────────────────────── */

/* Floating ambient orbs */
@keyframes bb3dOrb {
    0%, 100% { transform: translate(0, 0)   scale(1);    }
    33%       { transform: translate(22px, -28px) scale(1.04); }
    66%       { transform: translate(-14px, 16px) scale(.97); }
}
@keyframes bb3dOrbAlt {
    0%, 100% { transform: translate(0, 0);     }
    40%       { transform: translate(-26px, 20px); }
    75%       { transform: translate(16px, -12px); }
}
/* Shimmer light-pass over image/card surfaces */
@keyframes bb3dShimmer {
    from { transform: translateX(-120%) skewX(-15deg); opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: .55; }
    to   { transform: translateX(220%)  skewX(-15deg); opacity: 0; }
}
/* Slow editorial float for decorative elements */
@keyframes bb3dFloat {
    0%, 100% { transform: translateY(0)    rotate(0deg);  }
    50%       { transform: translateY(-14px) rotate(1.5deg); }
}
/* Gentle pulse-glow on atmospheric surfaces */
@keyframes bb3dPulse {
    0%, 100% { opacity: .55; transform: scale(1);    }
    50%       { opacity: .80; transform: scale(1.025); }
}
/* Expanding gold underline for brand */
@keyframes bb3dUnderline {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* ─── 3. Global 3D surface prep ──────────────────────────────── */
.bb-info-card,
.bb-discover-card,
.bb-trust-block,
.bb-auth-card,
.bb-cat-card {
    transform-style: preserve-3d;
    will-change: transform;
    backface-visibility: hidden;
}

/* ─── 4. Hero copy — floating glass plane ────────────────────── */
/* Very subtle frosted backing behind hero copy on desktop */
.bb-hero-copy {
    position: relative;
}
@media (min-width: 992px) {
    .bb-hero-copy::before {
        content: '';
        position: absolute;
        inset: -32px -28px;
        background: rgba(4,12,24,.09);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border-radius: 20px;
        border: 1px solid rgba(255,255,255,.06);
        z-index: -1;
        pointer-events: none;
    }
}

/* ─── 5. Page hero — ambient orb depth ───────────────────────── */
/* ::after is already used for the gold bottom line */
.bb-page-hero {
    overflow: hidden !important;
}
.bb-page-hero::before {
    content: '';
    position: absolute;
    width: 580px;
    height: 580px;
    border-radius: 50%;
    top: -200px;
    right: -100px;
    background: radial-gradient(ellipse, rgba(212,175,55,.12) 0%, transparent 62%);
    animation: bb3dOrb 13s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
/* Enhanced page hero background with secondary ambient orb baked in */
.bb-page-hero {
    background:
        radial-gradient(ellipse 35% 50% at 15% 85%, rgba(7,24,45,.22) 0%, transparent 55%),
        radial-gradient(ellipse 50% 60% at 80% 15%, rgba(212,175,55,.10) 0%, transparent 55%),
        linear-gradient(150deg, var(--bb-deep-navy) 0%, #07152b 55%, #0c2040 100%) !important;
}
/* Ensure content sits above the orb */
.bb-page-hero .container {
    position: relative;
    z-index: 1;
}

/* ─── 6. Auth container — ivory surface with ambient orbs ────── */
/* Previous dark navy → light editorial with floating depth */
.bb-auth-container {
    background: linear-gradient(
        155deg,
        var(--bb-ivory)              0%,
        rgba(240,232,214,.65)        50%,
        var(--bb-ivory)             100%
    ) !important;
    position: relative !important;
}
.bb-auth-container::before {
    content: '';
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    top: -160px;
    right: -100px;
    background: radial-gradient(ellipse, rgba(212,175,55,.13) 0%, transparent 62%);
    animation: bb3dOrb 14s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
.bb-auth-container::after {
    content: '';
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    bottom: -90px;
    left: 5%;
    background: radial-gradient(ellipse, rgba(7,24,45,.09) 0%, transparent 62%);
    animation: bb3dOrbAlt 19s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

/* ─── 7. Auth card — elevated glass surface ──────────────────── */
.bb-auth-card {
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border: 1px solid rgba(212,175,55,.20) !important;
    box-shadow:
        var(--bb-s3),
        inset 0 1px 0 rgba(255,255,255,.90) !important;
    position: relative !important;
    z-index: 1 !important;
    transition: box-shadow .5s cubic-bezier(.22,1,.36,1),
                transform .5s cubic-bezier(.22,1,.36,1) !important;
}
.bb-auth-card:hover {
    box-shadow:
        var(--bb-s4),
        inset 0 1px 0 rgba(255,255,255,.90) !important;
    transform: translateY(-4px) !important;
}
/* Auth title on light background */
.bb-auth-title {
    color: var(--bb-deep-navy) !important;
}
.bb-auth-subtitle {
    color: rgba(7,24,45,.55) !important;
}
/* Form inputs on light auth card */
.bb-auth-card .bb-form-input {
    background: rgba(255,255,255,.85) !important;
    border-color: rgba(212,175,55,.22) !important;
}
.bb-auth-card .bb-form-input:focus {
    border-color: var(--bb-gold) !important;
    box-shadow: 0 0 0 3px rgba(212,175,55,.14) !important;
    background: #fff !important;
}
.bb-auth-card .bb-form-label {
    color: rgba(7,24,45,.65) !important;
}
.bb-auth-card .bb-auth-switch {
    color: rgba(7,24,45,.5) !important;
}
.bb-auth-card .bb-auth-switch a {
    color: var(--bb-deep-navy) !important;
}
.bb-auth-container > .container {
    z-index: 2 !important;
}

/* ─── 8. Content sections — ambient depth ────────────────────── */
.bb-content-section {
    position: relative;
    overflow: hidden;
}
.bb-content-section::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    top: -160px;
    right: -120px;
    background: radial-gradient(ellipse, rgba(212,175,55,.07) 0%, transparent 62%);
    animation: bb3dOrb 17s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
/* Ensure content is above orbs */
.bb-content-section .container {
    position: relative;
    z-index: 1;
}

.bb-content-section-alt {
    position: relative;
    overflow: hidden;
}
.bb-content-section-alt::before {
    content: '';
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    bottom: -110px;
    left: -80px;
    background: radial-gradient(ellipse, rgba(212,175,55,.08) 0%, transparent 62%);
    animation: bb3dOrbAlt 21s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
.bb-content-section-alt .container {
    position: relative;
    z-index: 1;
}

/* ─── 9. Info card — spatial elevation ───────────────────────── */
.bb-info-card {
    background: #fff !important;
    border: 1px solid rgba(212,175,55,.14) !important;
    box-shadow: var(--bb-s2) !important;
    border-radius: 14px !important;
    transition: transform .5s cubic-bezier(.22,1,.36,1),
                box-shadow .5s cubic-bezier(.22,1,.36,1),
                border-color .3s ease !important;
}
.bb-info-card:hover {
    box-shadow: var(--bb-s3) !important;
    border-color: rgba(212,175,55,.28) !important;
    transform: translateY(-7px) !important;
}

/* ─── 10. Discover card — richer 3D depth ────────────────────── */
.bb-discover-card {
    border: 1px solid rgba(212,175,55,.13) !important;
    box-shadow: var(--bb-s2) !important;
    transition: transform .5s cubic-bezier(.22,1,.36,1),
                box-shadow .5s cubic-bezier(.22,1,.36,1),
                border-color .3s ease !important;
}
.bb-discover-card:hover {
    box-shadow: var(--bb-s3) !important;
    border-color: rgba(212,175,55,.28) !important;
}

/* ─── 11. Value row — about page floating panels ─────────────── */
.bb-value-row {
    background: rgba(255,255,255,.85) !important;
    border: 1px solid rgba(212,175,55,.13) !important;
    border-radius: 12px !important;
    padding: 20px 24px !important;
    margin-bottom: 14px !important;
    box-shadow: var(--bb-s1) !important;
    transition: transform .4s cubic-bezier(.22,1,.36,1),
                box-shadow .4s cubic-bezier(.22,1,.36,1),
                border-color .3s ease !important;
    position: relative;
    overflow: hidden;
}
/* Shimmer left-border reveal on hover */
.bb-value-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10%;
    bottom: 10%;
    width: 3px;
    background: var(--bb-gold);
    border-radius: 2px;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .4s cubic-bezier(.22,1,.36,1) !important;
}
.bb-value-row:hover::before {
    transform: scaleY(1);
}
.bb-value-row:hover {
    transform: translateX(6px) !important;
    box-shadow: var(--bb-s2) !important;
    border-color: rgba(212,175,55,.24) !important;
}

/* ─── 12. CTA strip — depth atmosphere ───────────────────────── */
.bb-cta-strip {
    position: relative !important;
    overflow: hidden !important;
}
.bb-cta-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 45% 80% at 18% 50%, rgba(212,175,55,.11) 0%, transparent 58%),
        radial-gradient(ellipse 35% 60% at 82% 50%, rgba(212,175,55,.09) 0%, transparent 50%);
    pointer-events: none;
    animation: bb3dPulse 7s ease-in-out infinite;
}
.bb-cta-strip .container {
    position: relative;
    z-index: 1;
}

/* ─── 13. Why section (homepage) — atmospheric depth ─────────── */
.bb-why-section {
    position: relative;
    overflow: hidden;
}
.bb-why-section::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    top: -200px;
    right: -150px;
    background: radial-gradient(ellipse, rgba(212,175,55,.09) 0%, transparent 60%);
    animation: bb3dOrb 15s ease-in-out infinite;
    pointer-events: none;
}
.bb-why-section::after {
    content: '';
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    bottom: -100px;
    left: -80px;
    background: radial-gradient(ellipse, rgba(212,175,55,.06) 0%, transparent 60%);
    animation: bb3dOrbAlt 20s ease-in-out infinite;
    pointer-events: none;
}
.bb-why-section .container {
    position: relative;
    z-index: 1;
}

/* ─── 14. Product card shimmer on hover ──────────────────────── */
/* ::before is free; ::after is used by Phase 20 overlay gradient */
.bb-product-img-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 55%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 25%,
        rgba(255,255,255,.22) 50%,
        transparent 75%
    );
    z-index: 3;
    transform: translateX(-140%) skewX(-15deg);
    pointer-events: none;
    opacity: 0;
}
.bb-product-card:hover .bb-product-img-wrap::before {
    animation: bb3dShimmer .75s cubic-bezier(.22,1,.36,1) forwards;
}

/* ─── 15. Product tabs — depth ───────────────────────────────── */
.bb-product-tabs {
    position: relative;
    overflow: hidden;
}
.bb-product-tabs::before {
    content: '';
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    top: -80px;
    right: -80px;
    background: radial-gradient(ellipse, rgba(212,175,55,.06) 0%, transparent 60%);
    animation: bb3dOrb 18s ease-in-out infinite;
    pointer-events: none;
}
.bb-product-tabs .container {
    position: relative;
    z-index: 1;
}

/* ─── 16. Footer — warm depth and orbs ───────────────────────── */
.bb-footer {
    position: relative !important;
    overflow: hidden !important;
}
.bb-footer-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.bb-footer-orb-1 {
    width: 520px;
    height: 520px;
    top: -200px;
    right: -100px;
    background: radial-gradient(ellipse, rgba(212,175,55,.08) 0%, transparent 60%);
    animation: bb3dOrb 16s ease-in-out infinite;
}
.bb-footer-orb-2 {
    width: 320px;
    height: 320px;
    bottom: -90px;
    left: 8%;
    background: radial-gradient(ellipse, rgba(212,175,55,.05) 0%, transparent 60%);
    animation: bb3dOrbAlt 22s ease-in-out infinite;
}
.bb-footer .container {
    position: relative;
    z-index: 1;
}
/* Social link hover lift */
.bb-social-link {
    transition: transform .3s cubic-bezier(.22,1,.36,1),
                color .25s ease,
                background .25s ease !important;
}
.bb-social-link:hover {
    transform: translateY(-3px) scale(1.1) !important;
}

/* ─── 17. Navbar — enhanced scrolled depth ───────────────────── */
.bb-navbar--scrolled {
    box-shadow:
        0 2px 16px rgba(7,24,45,.10),
        0 1px 4px rgba(7,24,45,.06),
        inset 0 -1px 0 rgba(212,175,55,.12) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}
/* Brand gold underline reveal on hover */
.bb-brand {
    position: relative;
    display: inline-block;
}
.bb-brand::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 1.5px;
    background: var(--bb-gold);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .38s cubic-bezier(.22,1,.36,1);
}
.bb-brand:hover::after {
    transform: scaleX(1);
}
/* Nav link subtle underline reveal */
.bb-navbar .nav-link {
    position: relative;
}
.bb-navbar .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    right: 50%;
    height: 1.5px;
    background: var(--bb-gold);
    transition: left .32s cubic-bezier(.22,1,.36,1),
                right .32s cubic-bezier(.22,1,.36,1);
    opacity: 0;
}
.bb-navbar .nav-link:hover::after,
.bb-navbar .nav-link.active::after {
    left: 8px;
    right: 8px;
    opacity: .7;
}

/* ─── 18. Back-to-top — floating refinement ──────────────────── */
.bb-back-top {
    box-shadow: var(--bb-s2) !important;
    transition: transform .4s cubic-bezier(.22,1,.36,1),
                box-shadow .4s cubic-bezier(.22,1,.36,1),
                background .25s ease,
                opacity .3s ease !important;
}
.bb-back-top:hover {
    box-shadow: var(--bb-s3), var(--bb-gold-glow) !important;
    transform: translateY(-5px) !important;
}

/* ─── 19. Featured section — additional depth layer ─────────── */
/* (bb-featured-section already has ivory bg + ::before gold shimmer from Phase 21) */
.bb-featured-section {
    overflow: hidden !important;
}

/* ─── 20. Cat section ambient depth ─────────────────────────── */
.bb-cat-section {
    position: relative;
    overflow: hidden;
}
.bb-cat-section::before {
    content: '';
    position: absolute;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    bottom: -150px;
    right: -80px;
    background: radial-gradient(ellipse, rgba(212,175,55,.06) 0%, transparent 60%);
    animation: bb3dOrbAlt 18s ease-in-out infinite;
    pointer-events: none;
}
.bb-cat-section .container {
    position: relative;
    z-index: 1;
}

/* ─── 21. Category cards — depth lift ───────────────────────── */
.bb-cat-card {
    box-shadow: var(--bb-s1) !important;
    border: 1px solid rgba(212,175,55,.10) !important;
    transition: transform .45s cubic-bezier(.22,1,.36,1),
                box-shadow .45s cubic-bezier(.22,1,.36,1),
                border-color .3s ease !important;
}
.bb-cat-card:hover {
    box-shadow: var(--bb-s3) !important;
    border-color: rgba(212,175,55,.26) !important;
    transform: translateY(-8px) !important;
}

/* ─── 22. Trust block (homepage why section) — glass depth ───── */
.bb-trust-block {
    box-shadow: var(--bb-s2) !important;
    transition: transform .5s cubic-bezier(.22,1,.36,1),
                box-shadow .5s cubic-bezier(.22,1,.36,1),
                border-color .3s ease !important;
}
.bb-trust-block:hover {
    box-shadow: var(--bb-s3) !important;
    transform: translateY(-8px) !important;
}

/* ─── 23. Review cards — floating depth ─────────────────────── */
.bb-review-card {
    box-shadow: var(--bb-s1) !important;
    transition: transform .45s cubic-bezier(.22,1,.36,1),
                box-shadow .45s cubic-bezier(.22,1,.36,1) !important;
}
.bb-review-card:hover {
    box-shadow: var(--bb-s3) !important;
    transform: translateY(-4px) !important;
}

/* ─── 24. Mobile — simplify depth effects ────────────────────── */
@media (max-width: 767px) {
    .bb-hero-copy::before {
        display: none;
    }
    /* Reduce orb sizes for performance on mobile */
    .bb-page-hero::before,
    .bb-auth-container::before,
    .bb-auth-container::after,
    .bb-content-section::before,
    .bb-content-section-alt::before,
    .bb-why-section::before,
    .bb-why-section::after,
    .bb-cta-strip::before,
    .bb-footer-orb-1,
    .bb-footer-orb-2 {
        width: 280px !important;
        height: 280px !important;
        animation-duration: 30s !important;
    }
    /* Disable nav link underline on mobile (touch doesn't trigger hover) */
    .bb-navbar .nav-link::after {
        display: none;
    }
    /* Simplify card tilt on mobile */
    .bb-info-card:hover,
    .bb-discover-card:hover,
    .bb-trust-block:hover {
        transform: translateY(-4px) !important;
    }
}

/* ─── 25. Reduced motion — full system guard ─────────────────── */
@media (prefers-reduced-motion: reduce) {
    .bb-page-hero::before,
    .bb-auth-container::before,
    .bb-auth-container::after,
    .bb-content-section::before,
    .bb-content-section-alt::before,
    .bb-why-section::before,
    .bb-why-section::after,
    .bb-cat-section::before,
    .bb-cta-strip::before,
    .bb-product-tabs::before,
    .bb-footer-orb,
    .bb-featured-section::before {
        animation: none !important;
    }
    .bb-info-card,
    .bb-discover-card,
    .bb-cat-card,
    .bb-trust-block,
    .bb-review-card,
    .bb-auth-card,
    .bb-value-row,
    .bb-back-top,
    .bb-social-link {
        transition: none !important;
    }
    .bb-info-card:hover,
    .bb-discover-card:hover,
    .bb-cat-card:hover,
    .bb-trust-block:hover,
    .bb-review-card:hover,
    .bb-auth-card:hover,
    .bb-value-row:hover,
    .bb-back-top:hover,
    .bb-social-link:hover {
        transform: none !important;
    }
    .bb-product-card:hover .bb-product-img-wrap::before {
        animation: none !important;
    }
    .bb-brand::after,
    .bb-navbar .nav-link::after {
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 24 — 3D Product Viewer & AR Experience
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. Gallery view-mode tab bar ────────────────────────────── */
.bb-viewer-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 14px;
    background: var(--bb-ivory);
    border: 1px solid rgba(212,175,55,.18);
    border-radius: 10px;
    padding: 4px;
    width: fit-content;
}
.bb-viewer-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 20px;
    border-radius: 7px;
    border: none;
    background: transparent;
    font-family: 'Poppins', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .04em;
    color: rgba(7,24,45,.48);
    cursor: pointer;
    transition: background .22s cubic-bezier(.22,1,.36,1),
                color .22s cubic-bezier(.22,1,.36,1),
                box-shadow .22s cubic-bezier(.22,1,.36,1);
}
.bb-viewer-tab i { font-size: 14px; }
.bb-viewer-tab.is-active {
    background: #fff;
    color: var(--bb-deep-navy);
    box-shadow: 0 1px 6px rgba(7,24,45,.08), 0 0 0 1px rgba(212,175,55,.22);
}
.bb-viewer-tab:hover:not(.is-active) {
    color: var(--bb-deep-navy);
    background: rgba(255,255,255,.55);
}

/* ─── 2. Gallery panels (photos / 3D) ─────────────────────────── */
.bb-gallery-panel[data-panel="3d"] {
    display: none;
}
.bb-gallery-panel[data-panel="3d"].is-active {
    display: block;
    animation: bbPanelFadeIn .28s cubic-bezier(.22,1,.36,1) both;
}
@keyframes bbPanelFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ─── 3. 3D viewer container ──────────────────────────────────── */
.bb-3d-viewer-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(145deg, var(--bb-ivory) 0%, rgba(240,232,214,.55) 100%);
    border: 1px solid rgba(212,175,55,.18);
    box-shadow: var(--bb-s2);
}
model-viewer {
    width: 100%;
    height: 100%;
    --poster-color: transparent;
    --progress-bar-color: var(--bb-gold);
    --progress-mask: none;
    background: transparent;
}

/* ─── 4. Custom AR launch button (slot) ───────────────────────── */
.bb-ar-btn {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(212,175,55,.32);
    border-radius: 30px;
    font-family: 'Poppins', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--bb-deep-navy);
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(7,24,45,.12);
    transition: background .22s cubic-bezier(.22,1,.36,1),
                box-shadow .22s cubic-bezier(.22,1,.36,1),
                transform .22s cubic-bezier(.22,1,.36,1);
    z-index: 5;
}
.bb-ar-btn:hover {
    background: #fff;
    box-shadow: 0 6px 22px rgba(7,24,45,.16), 0 0 0 1px rgba(212,175,55,.28);
    transform: translateY(-2px);
}
.bb-ar-btn i {
    font-size: 15px;
    color: var(--bb-gold);
}

/* ─── 5. Viewer "drag to rotate" hint overlay ─────────────────── */
.bb-3d-hint {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(249,246,241,.86);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 14px;
    pointer-events: none;
    transition: opacity .45s cubic-bezier(.22,1,.36,1);
    z-index: 4;
}
.bb-3d-hint.is-dismissed {
    opacity: 0;
    pointer-events: none;
}
.bb-3d-hint-icon {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    border: 1px solid rgba(212,175,55,.28);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(7,24,45,.10);
    animation: bb3dFloat 3s ease-in-out infinite;
}
.bb-3d-hint-icon i {
    font-size: 22px;
    color: var(--bb-gold);
}
.bb-3d-hint-label {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .05em;
    color: rgba(7,24,45,.58);
}

/* ─── 6. "3D" badge on product cards ──────────────────────────── */
.bb-3d-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(212,175,55,.30);
    border-radius: 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bb-deep-navy);
    box-shadow: 0 2px 8px rgba(7,24,45,.08);
    z-index: 2;
    pointer-events: none;
    user-select: none;
}
.bb-3d-badge i {
    font-size: 12px;
    color: var(--bb-gold);
}

/* ─── 7. Mobile ───────────────────────────────────────────────── */
@media (max-width: 767px) {
    .bb-viewer-tabs { width: 100%; }
    .bb-viewer-tab  { flex: 1; justify-content: center; }
    .bb-ar-btn {
        bottom: 12px; right: 12px;
        padding: 7px 13px;
        font-size: 11px;
    }
    .bb-3d-badge { font-size: 9.5px; padding: 3px 7px; }
}

/* ─── 8. Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .bb-viewer-tab,
    .bb-ar-btn,
    .bb-gallery-panel,
    .bb-3d-hint { transition: none !important; animation: none !important; }
    .bb-3d-hint-icon { animation: none !important; }
    .bb-gallery-panel[data-panel="3d"].is-active { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 25 — Immersive Interaction System
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. Scroll progress bar (gold line at top) ──────────────── */
.bb-scroll-progress {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,
        var(--bb-gold) 0%,
        rgba(212,175,55,.75) 60%,
        rgba(212,175,55,.35) 100%);
    transform-origin: left;
    transform: scaleX(0);
    z-index: 10001;
    pointer-events: none;
    will-change: transform;
}

/* ─── 2. Ambient cursor light ─────────────────────────────────── */
.bb-cursor-light {
    position: fixed;
    top: 0; left: 0;
    width: 680px; height: 680px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(212,175,55,.07) 0%,
        rgba(240,232,214,.04) 35%,
        transparent 62%
    );
    pointer-events: none;
    will-change: transform;
    z-index: 1;
    opacity: 0;
    mix-blend-mode: overlay;
    transition: opacity .7s ease;
}
.bb-cursor-light.is-active { opacity: 1; }

/* ─── 3. Section ornament sweep line ──────────────────────────── */
.bb-ornament {
    display: block;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg,
        var(--bb-gold) 0%,
        rgba(212,175,55,.35) 65%,
        transparent 100%);
    margin: 7px 0 14px;
    transition: width 1.1s cubic-bezier(.22,1,.36,1);
    pointer-events: none;
}
.bb-ornament.is-visible { width: 100px; }

/* ─── 4. Word-reveal system (page-hero titles) ─────────────────── */
.bb-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: .06em;
}
.bb-word-inner {
    display: inline-block;
    transform: translateY(108%);
    will-change: transform;
    transition: transform .76s cubic-bezier(.22,1,.36,1);
}
.bb-word-inner.is-visible { transform: translateY(0); }

/* Hero title simple-entry fallback (when word split skipped) */
@keyframes bbTitleUp {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0);    }
}
.bb-title-animate {
    animation: bbTitleUp .9s cubic-bezier(.22,1,.36,1) .12s both;
}
/* Eyebrow / subtitle reveal */
@keyframes bbFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0);    }
}
.bb-page-hero-eyebrow {
    animation: bbFadeUp .65s cubic-bezier(.22,1,.36,1) 0s both;
}
.bb-page-hero-sub {
    animation: bbFadeUp .65s cubic-bezier(.22,1,.36,1) .28s both;
}

/* ─── 5. Card spotlight (CSS-var driven) ──────────────────────── */
.bb-product-card,
.bb-info-card,
.bb-discover-card {
    isolation: isolate;
}
.bb-product-card::after,
.bb-info-card::after,
.bb-discover-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        260px circle at var(--spot-x, 50%) var(--spot-y, 50%),
        rgba(212,175,55,.10) 0%,
        transparent 70%
    );
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease;
    z-index: 0;
}
.bb-product-card:hover::after,
.bb-info-card:hover::after,
.bb-discover-card:hover::after { opacity: 1; }

/* ─── 6. Auth card entry ──────────────────────────────────────── */
@keyframes bbAuthCardIn {
    from { opacity: 0; transform: translateY(28px) scale(.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1);   }
}
.bb-auth-card {
    animation: bbAuthCardIn .75s cubic-bezier(.22,1,.36,1) .1s both !important;
}

/* ─── 7. Cart / contact / policy / track reveal ───────────────── */
/* These elements get .bb-reveal class added by JS — the existing
   .bb-reveal CSS already handles the animation. No extra rules needed.
   Only add stagger delays extension here: */
.bb-reveal-delay-5 { transition-delay: .75s; }
.bb-reveal-delay-6 { transition-delay: 1.0s; }

/* ─── 8. Section heading subtle depth on reveal ───────────────── */
.bb-section-heading {
    transition: opacity .55s cubic-bezier(.22,1,.36,1),
                transform .55s cubic-bezier(.22,1,.36,1);
}

/* ─── 9. Value row hover depth (about page) ───────────────────── */
.bb-value-row {
    transition: transform .35s cubic-bezier(.22,1,.36,1),
                box-shadow .35s cubic-bezier(.22,1,.36,1) !important;
}
.bb-value-row:hover {
    transform: translateX(5px) !important;
}

/* ─── 10. Discover card richer hover ─────────────────────────── */
.bb-discover-card {
    transition: transform .4s cubic-bezier(.22,1,.36,1),
                box-shadow .4s cubic-bezier(.22,1,.36,1) !important;
}

/* ─── 11. Policy / legal content reveal wrapper ──────────────── */
.bb-policy-wrap { overflow: hidden; }

/* ─── 12. Track form card entry ──────────────────────────────── */
.bb-track-form-card {
    transition: transform .55s cubic-bezier(.22,1,.36,1),
                opacity .55s cubic-bezier(.22,1,.36,1),
                box-shadow .35s cubic-bezier(.22,1,.36,1);
}

/* ─── 13. Contact info card richer reveal ─────────────────────── */
.bb-contact-info-card {
    transition: transform .45s cubic-bezier(.22,1,.36,1),
                box-shadow .45s cubic-bezier(.22,1,.36,1) !important;
}

/* ─── 14. Cart items stagger ─────────────────────────────────── */
.bb-cart-item:nth-child(1) { transition-delay: .05s; }
.bb-cart-item:nth-child(2) { transition-delay: .12s; }
.bb-cart-item:nth-child(3) { transition-delay: .20s; }
.bb-cart-item:nth-child(4) { transition-delay: .28s; }
.bb-cart-item:nth-child(n+5) { transition-delay: .35s; }

/* ─── 15. Section depth entry animation ───────────────────────── */
@keyframes bbSectionIn {
    from { opacity: 0; transform: translateY(18px) scale(.993); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
.bb-content-section,
.bb-content-section-alt {
    animation: bbSectionIn .7s cubic-bezier(.22,1,.36,1) both;
    animation-play-state: paused;
}
.bb-content-section.is-in-view,
.bb-content-section-alt.is-in-view {
    animation-play-state: running;
}

/* ─── 16. Hero scroll cue pulse ───────────────────────────────── */
@keyframes bbScrollCuePulse {
    0%, 100% { transform: translateX(-50%) translateY(0);   opacity: .65; }
    50%       { transform: translateX(-50%) translateY(5px); opacity: 1;   }
}
.bb-hero-scroll-cue {
    animation: bbScrollCuePulse 2s ease-in-out infinite !important;
}

/* ─── 17. Mobile — disable expensive effects ──────────────────── */
@media (max-width: 767px) {
    .bb-cursor-light { display: none !important; }
    .bb-page-hero-eyebrow,
    .bb-page-hero-sub,
    .bb-title-animate { animation-duration: .5s !important; }
}

/* ─── 18. Reduced motion guard ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .bb-scroll-progress,
    .bb-cursor-light { display: none !important; }
    .bb-ornament { transition: none !important; }
    .bb-word-inner { transition: none !important; transform: translateY(0) !important; }
    .bb-title-animate,
    .bb-auth-card,
    .bb-page-hero-eyebrow,
    .bb-page-hero-sub { animation: none !important; opacity: 1 !important; transform: none !important; }
    .bb-content-section,
    .bb-content-section-alt { animation: none !important; opacity: 1 !important; transform: none !important; }
    .bb-hero-scroll-cue { animation: none !important; }
    .bb-value-row:hover { transform: none !important; }
    .bb-product-card::after,
    .bb-info-card::after,
    .bb-discover-card::after { display: none !important; }
}

/* ============================================================
   Phase 26 — Banner Hero Rework (16:9 img slideshow, no crop)
   ============================================================ */

/* ─── 1. Hero: block, height = media height, clips deco overflow ─ */
.bb-hero {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    align-items: unset !important;
    padding: 0 !important;
    position: relative !important;
    overflow: hidden !important; /* clips .bb-hero-deco circle only */
    background: var(--bb-deep-navy) !important;
}
.bb-hero::before     { display: none !important; } /* kill Phase 23 orb */
.bb-hero-copy::before { display: none !important; } /* kill Phase 23 glass panel */

/* ─── 2. Media: in-flow 16:9 grid — images drive the height ─────
   aspect-ratio:16/9 gives the container an exact 16:9 height at
   every viewport width. No max-height, no overflow:hidden here —
   nothing clips the images. CSS Grid with grid-area:1/1 stacks
   all slides in the same cell for crossfade. */
.bb-hero-media {
    position: relative !important;
    inset: unset !important;
    display: grid !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    background: var(--bb-deep-navy) !important;
    pointer-events: none;
}

/* ─── 3. Slides: opacity crossfade, background-image neutralised ─ */
.bb-hero-media-slide {
    grid-area: 1 / 1 !important;
    opacity: 0 !important;
    transition: opacity 1.5s cubic-bezier(.4,0,.2,1) !important;
    animation: none !important;
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    background-size: unset !important;
    background-position: unset !important;
}
.bb-hero-media-slide.is-active {
    opacity: 1 !important;
    animation: none !important;
}

/* ─── 4. Banner images: fill the 16:9 cell, no crop ─────────────
   The grid cell is exactly 16:9. Images are also 16:9.
   width:100% + height:100% fills the cell; object-fit:cover on
   same-ratio images = zero cropping. */
.bb-banner-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    user-select: none;
    pointer-events: none;
}

/* ─── 5. Overlay: minimal bottom-left gradient for CTA only ─────
   The ::after still exists on .bb-hero-media (position:relative).
   Soft radial shadow in the bottom-left corner only — the vast
   majority of the banner stays at 100% brightness. */
.bb-hero-media::after {
    background:
        radial-gradient(ellipse 50% 45% at 12% 100%, rgba(4,15,28,.55) 0%, transparent 100%)
    !important;
}

/* ─── 6. CTA: pinned bottom-left ────────────────────────────────
   Positioned relative to .bb-hero (position:relative), which is
   exactly as tall as .bb-hero-media. */
.bb-hero-cta {
    position: absolute !important;
    bottom: clamp(20px, 4vw, 52px) !important;
    left: clamp(20px, 5vw, 72px) !important;
    right: auto !important;
    z-index: 3 !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
    justify-content: flex-start !important;
}

/* ─── 7. Scroll cue: pin to bottom of .bb-hero (not .container) ─ */
.bb-hero-scroll-cue {
    bottom: 8px !important;
}

/* ─── 8. Mobile: 16:9 on portrait phones is naturally short ─────
   At 390px wide, 16:9 = ~219px tall. This is correct — it shows
   the full banner without cropping. CTA spacing tightened. */
@media (max-width: 767px) {
    .bb-hero-cta {
        bottom: clamp(12px, 3.5vw, 24px) !important;
        left: clamp(12px, 4vw, 24px) !important;
        gap: 8px !important;
    }
    .bb-hero-cta .bb-btn-primary,
    .bb-hero-cta .bb-btn-outline {
        font-size: 13px !important;
        padding: 10px 18px !important;
    }
}

/* ─── 9. Reduced motion: freeze first slide ─────────────────────*/
@media (prefers-reduced-motion: reduce) {
    .bb-hero-media-slide {
        transition: none !important;
    }
    .bb-hero-media-slide:not(.is-active) {
        opacity: 0 !important;
    }
}

/* ============================================================
   Phase 26-b — Kill all hero zoom / Ken Burns permanently
   Appended last so it wins over every prior phase.

   Root cause: phases 19/22 defined @keyframes bbKenBurns with
   scale(1.06→1.01) and applied it via animation:forwards on
   .is-active. The forwards fill-mode leaves a residual transform
   even when the keyframe finishes. Phase 26 set animation:none
   but never zeroed the transform property — this final block
   does that explicitly.
   ============================================================ */
.bb-hero-media-slide,
.bb-hero-media-slide.is-active {
    transform: none !important;
    animation: none !important;
    will-change: opacity !important; /* keep compositor hint for fade only */
}

.bb-banner-img {
    transform: none !important;
    animation: none !important;
}

/* ============================================================
   Phase 26-c — Natural image dimensions (no forced frame ratio)

   Root cause of zoom/crop:
     Phase 26 set aspect-ratio:16/9 on .bb-hero-media and then
     height:100% + object-fit:cover on .bb-banner-img. If the
     actual image is not 16:9, cover zooms and crops it to fill
     the forced 16:9 frame — exactly the 720x480 (3:2) rendering
     seen in devtools when the real images are a different ratio.

   Fix:
     Remove the forced aspect-ratio so the container height is
     driven by the image's own intrinsic dimensions (Option A).
     height:auto on the img lets it render at its true size.
     object-fit is unset — no fitting or cropping at all.
   ============================================================ */

/* Drop the forced 16:9 frame — container height = image height */
.bb-hero-media {
    aspect-ratio: unset !important;
}

/* Render at true image dimensions: full width, natural height, no crop */
.bb-banner-img {
    height: auto !important;
    object-fit: unset !important;
    object-position: unset !important;
}

/* ============================================================
   Phase 27 — Hero banner-only, clean slate (1672×941)

   This block is appended last and wins over every prior rule.
   It is the sole source of truth for the homepage hero.
   ============================================================ */

/* ─── 1. Hero section ──────────────────────────────────────────*/
.bb-hero {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    background: transparent !important;
    overflow: visible !important;
}

/* ─── 2. Kill every overlay, orb, and decorative layer ─────────
   Targets all pseudo-elements that generate dark gradients and
   decorative content across every prior phase. content:none and
   background:none are added alongside display:none to ensure
   browsers that keep invisible pseudo-elements from painting. */
.bb-hero::before,
.bb-hero::after,
.bb-hero-deco,
.bb-hero-copy::before,
.bb-hero-media::before,
.bb-hero-media::after,
.bb-hero-cta,
.bb-hero-scroll-cue {
    display: none !important;
    content: none !important;
    background: none !important;
    opacity: 0 !important;
}

/* ─── 3. Hero media: grid container, no imposed size ───────────*/
.bb-hero-media {
    position: relative !important;
    inset: unset !important;
    display: grid !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
    background: transparent !important;
}

/* ─── 4. Slides: grid stack, opacity crossfade only ────────────
   transition kept for smooth fade; no transform/animation/zoom. */
.bb-hero-media-slide {
    grid-area: 1 / 1 !important;
    opacity: 0 !important;
    transition: opacity 1.5s cubic-bezier(.4,0,.2,1) !important;
    transform: none !important;
    animation: none !important;
    will-change: opacity !important;
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    background-size: unset !important;
    background-position: unset !important;
}
.bb-hero-media-slide.is-active {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

/* ─── 5. Banner images: natural 1672×941, no crop ──────────────
   width:100% fills the viewport width.
   height:auto derives the display height from the 1672×941 ratio.
   filter:none and opacity:1 ensure no dimming from any prior rule. */
.bb-banner-img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    animation: none !important;
    filter: none !important;
    opacity: 1 !important;
    user-select: none;
    pointer-events: none;
}

/* ─── 6. Reduced motion: freeze first slide ────────────────────*/
@media (prefers-reduced-motion: reduce) {
    .bb-hero-media-slide {
        transition: none !important;
    }
    .bb-hero-media-slide:not(.is-active) {
        opacity: 0 !important;
    }
}

/* ============================================================
   Phase 28 — Hero absolute/relative slide layout
   (replaces grid-area:1/1 stacking approach)

   WHY:  CSS Grid with grid-area:1/1 makes ALL slides — even
         invisible ones — participate in the grid row height
         calculation. This can force a constrained or
         unpredictable container height.

   FIX:  Inactive slides → position:absolute (out of flow,
         no layout contribution). Active slide → position:relative
         (in normal flow, drives .bb-hero-media height directly
         from the img width:100%/height:auto natural ratio).
         Container height = active image height = 1672×941 ratio.
   ============================================================ */

/* ─── 1. Hero shell ────────────────────────────────────────────*/
.bb-hero {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

/* ─── 2. All pseudo/decorative layers killed ───────────────────*/
.bb-hero::before,
.bb-hero::after,
.bb-hero-deco,
.bb-hero-copy,
.bb-hero-copy::before,
.bb-hero-media::before,
.bb-hero-media::after,
.bb-hero-cta,
.bb-hero-scroll-cue {
    display: none !important;
    content: none !important;
    background: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ─── 3. Media container: block, height from active slide ──────*/
.bb-hero-media {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
    background: transparent !important;
}

/* ─── 4. Inactive slides: absolutely layered, out of flow ──────
   position:absolute removes them from layout entirely — they do
   not contribute to .bb-hero-media height. Opacity fade handled
   by the transition below. */
.bb-hero-media-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    opacity: 0 !important;
    transition: opacity 1.5s cubic-bezier(.4,0,.2,1) !important;
    transform: none !important;
    animation: none !important;
    background: none !important;
    background-image: none !important;
    pointer-events: none !important;
}

/* ─── 5. Active slide: in-flow, sets the container height ──────
   position:relative puts the active slide back in document flow.
   Its img (width:100%; height:auto) drives .bb-hero-media height
   to exactly width × (941/1672) at every viewport width. */
.bb-hero-media-slide.is-active {
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    pointer-events: auto !important;
}

/* ─── 6. Banner images: natural 1672×941, no crop or zoom ──────*/
.bb-banner-img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    animation: none !important;
    filter: none !important;
    opacity: 1 !important;
}

/* ─── 7. Final zoom/transform kill ─────────────────────────────*/
.bb-hero-media-slide,
.bb-hero-media-slide.is-active,
.bb-banner-img {
    transform: none !important;
    animation: none !important;
}

/* ─── 8. Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .bb-hero-media-slide {
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Phase 29 — Final hero reset (kills Phase 22 min-height + Phase 18 gradient)
   Overrides: line 6712 (background gradient), line 8273 (min-height clamp),
              line 8303 (mobile min-height 480px)
   ═══════════════════════════════════════════════════════════════ */
.bb-hero {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    background-image: none !important;
    overflow: visible !important;
    align-items: unset !important;
}

@media (max-width: 767px) {
    .bb-hero {
        min-height: 0 !important;
        height: auto !important;
    }
}

.bb-hero::before,
.bb-hero::after,
.bb-hero-deco,
.bb-hero-copy,
.bb-hero-copy::before,
.bb-hero-media::before,
.bb-hero-media::after,
.bb-hero-cta,
.bb-hero-scroll-cue {
    display: none !important;
    content: none !important;
    background: none !important;
    background-image: none !important;
    opacity: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

.bb-hero-media {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
    background: transparent !important;
    background-image: none !important;
}

.bb-hero-media-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    opacity: 0 !important;
    transition: opacity 1.5s cubic-bezier(.4,0,.2,1) !important;
    transform: none !important;
    animation: none !important;
    filter: none !important;
    background: none !important;
    background-image: none !important;
}

.bb-hero-media-slide.is-active {
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

.bb-banner-img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    animation: none !important;
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

@media (prefers-reduced-motion: reduce) {
    .bb-hero-media-slide {
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Phase 30 — Complete hero isolation (kills tint, overlay, mix-blend)
   Root cause: .bb-hero background gradient + pseudo-element overlays
   from Phases 18/22/23 still winning via stacking context + blend modes.
   isolation:isolate creates a new stacking context so no parent background
   bleeds through; visibility:hidden + filter:none + mix-blend-mode:normal
   on all pseudo-selectors ensures zero darkening remains.
   ═══════════════════════════════════════════════════════════════ */
.bb-hero {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    background-image: none !important;
    overflow: visible !important;
    isolation: isolate !important;
}

.bb-hero::before,
.bb-hero::after,
.bb-hero-deco,
.bb-hero-copy,
.bb-hero-copy::before,
.bb-hero-media::before,
.bb-hero-media::after,
.bb-hero-cta,
.bb-hero-scroll-cue {
    display: none !important;
    content: none !important;
    background: transparent !important;
    background-image: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    box-shadow: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    pointer-events: none !important;
}

.bb-hero-media {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
    background: transparent !important;
    background-image: none !important;
    isolation: isolate !important;
}

.bb-hero-media-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    opacity: 0 !important;
    transform: none !important;
    animation: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    background: transparent !important;
    background-image: none !important;
    pointer-events: none !important;
}

.bb-hero-media-slide.is-active {
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    pointer-events: auto !important;
}

.bb-banner-img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    mix-blend-mode: normal !important;
    transform: none !important;
    animation: none !important;
    box-shadow: none !important;
}

.bb-hero,
.bb-hero-media,
.bb-hero-media-slide.is-active {
    min-height: 0 !important;
    max-height: none !important;
}

@media (max-width: 767px) {
    .bb-hero {
        min-height: 0 !important;
        height: auto !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Phase 30 final — confirmed hero render reset (appended last)
   ═══════════════════════════════════════════════════════════════ */
.bb-hero {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    background-image: none !important;
    overflow: visible !important;
    isolation: isolate !important;
    align-items: unset !important;
}

.bb-hero::before,
.bb-hero::after,
.bb-hero-deco,
.bb-hero-copy,
.bb-hero-copy::before,
.bb-hero-media::before,
.bb-hero-media::after,
.bb-hero-cta,
.bb-hero-scroll-cue {
    display: none !important;
    content: none !important;
    background: transparent !important;
    background-image: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    box-shadow: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    pointer-events: none !important;
}

.bb-hero-media {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
    background: transparent !important;
    background-image: none !important;
    isolation: isolate !important;
}

.bb-hero-media-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    opacity: 0 !important;
    transform: none !important;
    animation: none !important;
    transition: opacity 1.5s cubic-bezier(.4,0,.2,1) !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    background: transparent !important;
    background-image: none !important;
    pointer-events: none !important;
}

.bb-hero-media-slide.is-active {
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    pointer-events: auto !important;
}

.bb-banner-img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    mix-blend-mode: normal !important;
    transform: none !important;
    animation: none !important;
    box-shadow: none !important;
}

.bb-hero,
.bb-hero-media,
.bb-hero-media-slide.is-active {
    min-height: 0 !important;
    max-height: none !important;
}

@media (max-width: 767px) {
    .bb-hero {
        min-height: 0 !important;
        height: auto !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bb-hero-media-slide {
        transition: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bb-hero-media-slide {
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Phase 31 — Simplified hero slider (replaces all prior hero phases)
   New markup: .bb-hero > .bb-hero-slider > .bb-hero-slide > img.bb-banner-img
   Old .bb-hero-media / .bb-hero-media-slide classes are gone from index.php.
   ═══════════════════════════════════════════════════════════════ */

/* 1. Hero shell — no background, no height forcing, no compositing bleed */
.bb-hero {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    background-image: none !important;
    overflow: hidden !important;
    isolation: isolate !important;
    align-items: unset !important;
}

/* 2. Kill every old pseudo-element and decorative layer */
.bb-hero::before,
.bb-hero::after,
.bb-hero-deco,
.bb-hero-copy,
.bb-hero-copy::before,
.bb-hero-media,
.bb-hero-media::before,
.bb-hero-media::after,
.bb-hero-cta,
.bb-hero-scroll-cue {
    display: none !important;
    content: none !important;
    background: none !important;
    background-image: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* 3. Slider wrapper — plain block, transparent */
.bb-hero-slider {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
    isolation: isolate !important;
}

/* 4. Inactive slides hidden, active slide shown — display swap, no stacking */
.bb-hero-slide {
    display: none !important;
    width: 100% !important;
    background: transparent !important;
}

.bb-hero-slide.is-active {
    display: block !important;
}

/* 5. The actual banner image — render exactly as uploaded */
.bb-banner-img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    transform: none !important;
    animation: none !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   Phase 32 — Specificity escalation: html body .bb-hero (0,1,2)
   beats Phase 18's .bb-hero !important (0,1,0) and Phase 23's
   .bb-hero::before/after !important (0,1,1) regardless of order.
   Two !important rules at the same specificity resolve by order —
   but at higher specificity the new rule wins unconditionally.
   ═══════════════════════════════════════════════════════════════ */

/* Hero shell: specificity (0,1,2) — beats any solo .bb-hero !important */
html body .bb-hero {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    background-image: none !important;
    overflow: hidden !important;
    isolation: isolate !important;
    align-items: unset !important;
}

/* Pseudo-elements: specificity (0,1,3) — beats .bb-hero::before !important (0,1,1) */
html body .bb-hero::before,
html body .bb-hero::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
    background-image: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Old decorative/copy/media elements — just needs to be last for these new classes */
.bb-hero-deco,
.bb-hero-copy,
.bb-hero-copy::before,
.bb-hero-media,
.bb-hero-media::before,
.bb-hero-media::after,
.bb-hero-cta,
.bb-hero-scroll-cue {
    display: none !important;
    content: none !important;
    background: transparent !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Slider wrapper — new class, no history, no conflict */
.bb-hero-slider {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
    isolation: isolate !important;
    overflow: visible !important;
}

/* Inactive slides hidden */
.bb-hero-slide {
    display: none !important;
    width: 100% !important;
    background: transparent !important;
}

/* Active slide — drives container height */
.bb-hero-slide.is-active {
    display: block !important;
    width: 100% !important;
    background: transparent !important;
}

/* Hero banner image — scoped to .bb-hero to avoid affecting product images */
.bb-hero .bb-banner-img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    transform: none !important;
    animation: none !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   Phase 33 — Absolute-stacked slider with aspect-ratio container
   Fixes: (1) vertical stacking — slides are now position:absolute
   so they never participate in normal document flow; the slider's
   aspect-ratio:1672/941 is the sole height driver.
   (2) right-side crop — the image fills height:100% of the
   aspect-ratio container; object-fit:contain renders it fully
   inside that frame with no clipping.
   Specificity: html body .bb-hero-slider = (0,1,2) beats all prior
   same-class !important rules.
   ═══════════════════════════════════════════════════════════════ */

/* Hero shell — transparent, no min-height, isolation:isolate */
html body .bb-hero {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    background-image: none !important;
    overflow: hidden !important;
    isolation: isolate !important;
    align-items: unset !important;
}

/* Kill all pseudo-element overlays */
html body .bb-hero::before,
html body .bb-hero::after,
html body .bb-hero-deco,
html body .bb-hero-copy,
html body .bb-hero-copy::before,
html body .bb-hero-cta,
html body .bb-hero-scroll-cue {
    display: none !important;
    content: none !important;
    background: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Slider container — aspect-ratio drives height, all slides stack inside */
html body .bb-hero-slider {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1672 / 941 !important;
    overflow: hidden !important;
    background: transparent !important;
    isolation: isolate !important;
}

/* All slides absolute-stacked, invisible by default */
html body .bb-hero-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 1.5s cubic-bezier(.22,1,.36,1), visibility 0s linear 1.5s !important;
    background: transparent !important;
    pointer-events: none !important;
    z-index: 1 !important;
    will-change: opacity !important;
    backface-visibility: hidden !important;
    transform: none !important;
}

/* Active slide — full opacity, on top */
html body .bb-hero-slide.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 2 !important;
    transition: opacity 1.5s cubic-bezier(.22,1,.36,1), visibility 0s linear 0s !important;
    transform: none !important;
}

/* Reduced motion — instant swap, no crossfade */
@media (prefers-reduced-motion: reduce) {
    html body .bb-hero-slide,
    html body .bb-hero-slide.is-active {
        transition: none !important;
    }
}

/* Banner image — fills the absolute slide frame exactly */
html body .bb-hero .bb-banner-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    transform: none !important;
    animation: none !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   Phase 34 — Dual-layer crossfade hero
   Two persistent layers (.bb-layer-a / .bb-layer-b) sit stacked.
   The hidden layer gets its img src updated while invisible, then
   fades in over the active one — pure opacity, no visibility
   toggling, no multiple-slide stacking noise.
   ═══════════════════════════════════════════════════════════════ */

html body .bb-hero-layer {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    transition: opacity 2.2s cubic-bezier(.22,1,.36,1) !important;
    will-change: opacity !important;
    backface-visibility: hidden !important;
    transform: none !important;
    background: transparent !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

html body .bb-hero-layer.is-active {
    opacity: 1 !important;
    z-index: 2 !important;
    pointer-events: auto !important;
}

@media (prefers-reduced-motion: reduce) {
    html body .bb-hero-layer,
    html body .bb-hero-layer.is-active {
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Phase 35 — Hero manual controls + dot indicators
   ═══════════════════════════════════════════════════════════════ */

.bb-hero-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 14px 0 4px;
    background: transparent;
}

.bb-hero-ctrl-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(7,24,45,.18);
    border-radius: 50%;
    background: transparent;
    color: var(--bb-deep-navy);
    font-size: 14px;
    cursor: pointer;
    transition: border-color .25s, background .25s, color .25s, transform .25s;
    flex-shrink: 0;
}
.bb-hero-ctrl-btn:hover {
    border-color: var(--bb-gold);
    color: var(--bb-gold);
    background: rgba(212,175,55,.06);
    transform: scale(1.08);
}
.bb-hero-ctrl-btn:active { transform: scale(.96); }

.bb-hero-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bb-hero-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(7,24,45,.22);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background .3s, transform .3s, width .3s;
    flex-shrink: 0;
}
.bb-hero-dot.is-active {
    background: var(--bb-gold);
    width: 20px;
    border-radius: 3px;
    transform: none;
}
.bb-hero-dot:hover:not(.is-active) {
    background: rgba(7,24,45,.45);
}

@media (max-width: 575px) {
    .bb-hero-ctrl-btn { width: 30px; height: 30px; font-size: 12px; }
    .bb-hero-dot { width: 5px; height: 5px; }
    .bb-hero-dot.is-active { width: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   Phase 35b — Colour variant swatches on product page
   ═══════════════════════════════════════════════════════════════ */

.bb-variant-group {
    margin-bottom: 20px;
}

.bb-variant-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bb-muted);
    margin-bottom: 10px;
}

.bb-variant-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.bb-variant-swatch {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 8px;
    border: 2px solid transparent;
    overflow: hidden;
    text-decoration: none;
    transition: border-color .2s, box-shadow .2s, transform .2s;
    background: #f4f3f0;
    flex-shrink: 0;
}
.bb-variant-swatch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.bb-variant-swatch-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--bb-deep-navy);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.bb-variant-swatch:hover {
    border-color: var(--bb-gold);
    transform: scale(1.06);
    box-shadow: 0 2px 8px rgba(212,175,55,.25);
}
.bb-variant-swatch.is-active {
    border-color: var(--bb-deep-navy);
    box-shadow: 0 0 0 1px var(--bb-deep-navy);
    cursor: default;
    pointer-events: none;
}

.bb-variant-current-label {
    font-size: 13px;
    color: var(--bb-deep-navy);
    font-weight: 500;
    margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   Phase 35c — Admin panel layout stabilisation
   Fixes cramped form layout and ensures comfortable desktop view
   ═══════════════════════════════════════════════════════════════ */

/* Prevent the admin main content area from being excessively narrow */
.admin-main-content {
    min-width: 0;
    overflow-x: auto;
}

/* Give admin forms comfortable max-width breathing room */
.admin-main-content .row.g-4 { max-width: 1200px; }

/* Ensure admin cards don't overflow their column */
.admin-card { overflow: visible; }

/* Multi-category checkbox grid in admin forms */
.bb-admin-cat-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 10px 12px;
    background: #f7f8fb;
    border: 1px solid #dde1e9;
    border-radius: 6px;
}
.bb-admin-cat-checkboxes .form-check {
    margin: 0;
    min-width: 130px;
}
.bb-admin-cat-checkboxes .form-check-label {
    font-size: 13px;
    color: var(--bb-deep-navy);
}

/* Phase 36A removed — full-image banner fixes applied directly in Phase 34-39 below */

/* ============================================================
   PHASE 36 — Contact form grid · Buy Now · Product tabs
   ============================================================ */

/* --- Contact form: 2-column row layout -------------------- */
.bb-form-row-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 20px !important;
    align-items: start !important;
}
@media (max-width: 575px) {
    .bb-form-row-2 {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
}

/* --- Product card: Add to Cart nowrap fix ----------------- */
html body .bb-product-btns > form .bb-btn-add-cart,
html body .bb-btn-add-cart {
    white-space: nowrap !important;
}

/* --- Product detail: ATC + Buy Now row -------------------- */
.bb-atc-btn-row {
    display: flex !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
}
.bb-atc-btn-row .bb-btn-atc {
    flex: 1 !important;
    margin-bottom: 0 !important;
}
.bb-btn-buy-now {
    background: transparent !important;
    color: var(--bb-deep-navy) !important;
    border: 2px solid var(--bb-deep-navy) !important;
}
.bb-btn-buy-now:hover {
    background: var(--bb-deep-navy) !important;
    color: var(--bb-white) !important;
}

/* --- Product tabs ----------------------------------------- */
.bb-tabs-wrap {
    padding: 36px 0 48px !important;
}
.bb-tabs-nav {
    display: flex !important;
    border-bottom: 2px solid #e4e8ef !important;
    margin-bottom: 28px !important;
    gap: 0 !important;
}
.bb-tab-btn {
    background: none !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    margin-bottom: -2px !important;
    padding: 10px 26px !important;
    font-family: var(--bb-font-display) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    color: var(--bb-muted) !important;
    cursor: pointer !important;
    transition: color .2s, border-color .2s !important;
}
.bb-tab-btn:hover {
    color: var(--bb-deep-navy) !important;
}
.bb-tab-btn.is-active {
    color: var(--bb-deep-navy) !important;
    border-bottom-color: var(--bb-gold) !important;
}
.bb-tab-panel {
    display: none !important;
}
.bb-tab-panel.is-active {
    display: block !important;
}
.bb-tab-panels .bb-product-description,
.bb-tab-panels .bb-product-specs {
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: #3a3a4a !important;
    max-width: 760px !important;
}
.bb-tab-panels .bb-product-shipping-text {
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: #3a3a4a !important;
    max-width: 640px !important;
}
@media (max-width: 575px) {
    .bb-tab-btn {
        padding: 9px 14px !important;
        font-size: 13px !important;
    }
    .bb-tabs-wrap {
        padding: 24px 0 36px !important;
    }
}

/* Phase 34 - Shop header banner (full image, no crop) */
.bb-shop-header--banner {
    display: grid;
    position: relative;
    overflow: visible;
    background: #f7f2e8;
    border-bottom: 1px solid rgba(212,175,55,.18);
}

.bb-shop-header--banner .bb-shop-header-banner {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    position: relative;
    z-index: 0;
}

.bb-shop-header--banner .bb-shop-header-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(250,247,242,.88) 0%,
        rgba(250,247,242,.58) 28%,
        rgba(250,247,242,.14) 56%,
        rgba(250,247,242,0) 100%
    );
}

.bb-shop-header-banner-img {
    display: block;
    width: 100%;
    height: auto;
}

.bb-shop-header--banner .container {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    position: relative;
    z-index: 1;
}

.bb-shop-header-content {
    max-width: 420px;
    padding: clamp(36px, 7vw, 72px) 0 clamp(32px, 6vw, 56px);
}

@media (max-width: 767px) {
    .bb-shop-header--banner .bb-shop-header-banner::after {
        background: linear-gradient(
            180deg,
            rgba(250,247,242,.86) 0%,
            rgba(250,247,242,.58) 42%,
            rgba(250,247,242,.20) 72%,
            rgba(250,247,242,0) 100%
        );
    }

    .bb-shop-header-content {
        max-width: 100%;
        padding: 30px 0 26px;
    }
}

/* Phase 35 - Collections hero banner (full image, no crop) */
.bb-page-hero--collections {
    display: grid;
    position: relative;
    overflow: visible;
    background: #0d1723;
}

.bb-page-hero--collections::before,
.bb-page-hero--collections::after {
    display: none !important;
}

.bb-page-hero--collections .bb-page-hero-banner {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    position: relative;
    z-index: 0;
}

.bb-page-hero--collections .bb-page-hero-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(7, 18, 34, .84) 0%,
        rgba(7, 18, 34, .54) 34%,
        rgba(7, 18, 34, .18) 62%,
        rgba(7, 18, 34, 0) 100%
    );
}

.bb-page-hero-banner-img {
    display: block;
    width: 100%;
    height: auto;
}

.bb-page-hero--collections .container {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    position: relative;
    z-index: 1;
}

.bb-page-hero-content {
    max-width: 620px;
    padding: clamp(42px, 8vw, 82px) 0 clamp(34px, 7vw, 66px);
}

.bb-page-hero--collections .bb-page-hero-title {
    color: #f7f2e8 !important;
}

.bb-page-hero--collections .bb-page-hero-sub {
    color: rgba(247,242,232,.82) !important;
    max-width: 560px;
}

@media (max-width: 767px) {
    .bb-page-hero--collections .bb-page-hero-banner::after {
        background: linear-gradient(
            180deg,
            rgba(7, 18, 34, .76) 0%,
            rgba(7, 18, 34, .44) 44%,
            rgba(7, 18, 34, .18) 74%,
            rgba(7, 18, 34, 0) 100%
        );
    }

    .bb-page-hero-content {
        max-width: 100%;
        padding: 34px 0 28px;
    }
}

/* Phase 36 - Collections CTA banner (full image, no crop) */
.bb-cta-strip--banner {
    display: grid;
    position: relative;
    overflow: visible;
    background: #efe5d4;
}

.bb-cta-strip--banner::before,
.bb-cta-strip--banner::after {
    display: none !important;
}

.bb-cta-strip--banner .bb-cta-strip-banner {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    position: relative;
    z-index: 0;
}

.bb-cta-strip--banner .bb-cta-strip-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(247,242,232,.70) 0%,
        rgba(247,242,232,.42) 36%,
        rgba(247,242,232,.22) 68%,
        rgba(247,242,232,.10) 100%
    );
}

.bb-cta-strip-banner-img {
    display: block;
    width: 100%;
    height: auto;
}

.bb-cta-strip--banner .container {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    position: relative;
    z-index: 1;
}

.bb-cta-strip-content {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    padding: clamp(48px, 7vw, 88px) 0;
}

.bb-cta-strip--banner .bb-cta-strip-title {
    color: var(--bb-deep-navy) !important;
}

.bb-cta-strip--banner .bb-cta-strip-sub {
    color: rgba(47,51,61,.68) !important;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 767px) {
    .bb-cta-strip-content {
        padding: 40px 0;
    }
}

/* Phase 37 - Our Story hero banner (full image, no crop) */
.bb-page-hero--story {
    display: grid;
    position: relative;
    overflow: visible;
    background: #0d1723;
}

.bb-page-hero--story::before,
.bb-page-hero--story::after {
    display: none !important;
}

.bb-page-hero--story .bb-page-hero-banner {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    position: relative;
    z-index: 0;
}

.bb-page-hero--story .bb-page-hero-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(7, 18, 34, .82) 0%,
        rgba(7, 18, 34, .54) 34%,
        rgba(7, 18, 34, .18) 62%,
        rgba(7, 18, 34, 0) 100%
    );
}

.bb-page-hero--story .container {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    position: relative;
    z-index: 1;
}

.bb-page-hero--story .bb-page-hero-title {
    color: #f7f2e8 !important;
}

.bb-page-hero--story .bb-page-hero-sub {
    color: rgba(247,242,232,.82) !important;
    max-width: 560px;
}

@media (max-width: 767px) {
    .bb-page-hero--story .bb-page-hero-banner::after {
        background: linear-gradient(
            180deg,
            rgba(7, 18, 34, .76) 0%,
            rgba(7, 18, 34, .44) 44%,
            rgba(7, 18, 34, .18) 74%,
            rgba(7, 18, 34, 0) 100%
        );
    }
}

/* Phase 38 - Lets Talk hero banner (full image, no crop) */
.bb-page-hero--contact {
    display: grid;
    position: relative;
    overflow: visible;
    background: #0d1723;
}

.bb-page-hero--contact::before,
.bb-page-hero--contact::after {
    display: none !important;
}

.bb-page-hero--contact .bb-page-hero-banner {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    position: relative;
    z-index: 0;
}

.bb-page-hero--contact .bb-page-hero-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(7, 18, 34, .82) 0%,
        rgba(7, 18, 34, .54) 34%,
        rgba(7, 18, 34, .18) 62%,
        rgba(7, 18, 34, 0) 100%
    );
}

.bb-page-hero--contact .container {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    position: relative;
    z-index: 1;
}

.bb-page-hero--contact .bb-page-hero-title {
    color: #f7f2e8 !important;
}

.bb-page-hero--contact .bb-page-hero-sub {
    color: rgba(247,242,232,.82) !important;
    max-width: 620px;
}

@media (max-width: 767px) {
    .bb-page-hero--contact .bb-page-hero-banner::after {
        background: linear-gradient(
            180deg,
            rgba(7, 18, 34, .76) 0%,
            rgba(7, 18, 34, .44) 44%,
            rgba(7, 18, 34, .18) 74%,
            rgba(7, 18, 34, 0) 100%
        );
    }
}

/* Phase 39 - Shared editorial CTA banner (full image, no crop) */
.bb-cta-strip--editorial-banner {
    display: grid;
    position: relative;
    overflow: visible;
    background: #efe5d4;
}

.bb-cta-strip--editorial-banner::before,
.bb-cta-strip--editorial-banner::after {
    display: none !important;
}

.bb-cta-strip--editorial-banner .bb-cta-strip-banner {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    position: relative;
    z-index: 0;
}

.bb-cta-strip--editorial-banner .bb-cta-strip-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(247,242,232,.70) 0%,
        rgba(247,242,232,.42) 36%,
        rgba(247,242,232,.22) 68%,
        rgba(247,242,232,.10) 100%
    );
}

.bb-cta-strip--editorial-banner .container {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    position: relative;
    z-index: 1;
}

.bb-cta-strip--editorial-banner .bb-cta-strip-title {
    color: var(--bb-deep-navy) !important;
}

.bb-cta-strip--editorial-banner .bb-cta-strip-sub {
    color: rgba(47,51,61,.68) !important;
}

/* Phase 40 - Brand logo lockups */
.bb-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.bb-brand-logo {
    display: block;
    width: 34px;
    height: 34px;
    object-fit: contain;
    flex-shrink: 0;
}

.bb-brand-text {
    display: inline-block;
    line-height: 1;
}

.bb-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.bb-footer-brand-logo {
    display: block;
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
}

.bb-footer-brand-text {
    display: inline-block;
    line-height: 1;
}

@media (max-width: 575px) {
    .bb-brand {
        gap: 10px !important;
    }

    .bb-brand-logo {
        width: 30px;
        height: 30px;
    }

    .bb-footer-brand-logo {
        width: 38px;
        height: 38px;
    }
}

/* Phase 41 - Banner wrapper cleanup + heading visibility */
.bb-shop-header--banner,
.bb-page-hero--collections,
.bb-page-hero--story,
.bb-page-hero--contact,
.bb-cta-strip--banner,
.bb-cta-strip--editorial-banner {
    padding: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
}

.bb-shop-header--banner > .container,
.bb-page-hero--collections > .container,
.bb-page-hero--story > .container,
.bb-page-hero--contact > .container,
.bb-cta-strip--banner > .container,
.bb-cta-strip--editorial-banner > .container {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: flex !important;
}

.bb-shop-header--banner > .container {
    align-items: center !important;
}

.bb-page-hero--collections > .container,
.bb-page-hero--story > .container,
.bb-page-hero--contact > .container {
    align-items: center !important;
}

.bb-cta-strip--banner > .container,
.bb-cta-strip--editorial-banner > .container {
    align-items: center !important;
    justify-content: center !important;
}

.bb-shop-header-content,
.bb-page-hero-content,
.bb-cta-strip-content {
    position: relative;
    z-index: 2;
}

.bb-page-hero--collections .bb-page-hero-title,
.bb-page-hero--story .bb-page-hero-title,
.bb-page-hero--contact .bb-page-hero-title,
.bb-page-hero--collections .bb-page-hero-sub,
.bb-page-hero--story .bb-page-hero-sub,
.bb-page-hero--contact .bb-page-hero-sub,
.bb-page-hero--collections .bb-page-hero-eyebrow,
.bb-page-hero--story .bb-page-hero-eyebrow,
.bb-page-hero--contact .bb-page-hero-eyebrow {
    text-shadow: 0 2px 18px rgba(7, 18, 34, .24);
}

.bb-page-hero--collections .bb-page-hero-eyebrow,
.bb-page-hero--story .bb-page-hero-eyebrow,
.bb-page-hero--contact .bb-page-hero-eyebrow {
    color: #e0bb49 !important;
}

.bb-shop-header-banner-img,
.bb-page-hero-banner-img,
.bb-cta-strip-banner-img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
}

@media (max-width: 767px) {
    .bb-shop-header--banner > .container,
    .bb-page-hero--collections > .container,
    .bb-page-hero--story > .container,
    .bb-page-hero--contact > .container,
    .bb-cta-strip--banner > .container,
    .bb-cta-strip--editorial-banner > .container {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* Phase 42 - Shared dark hero readability for footer-linked pages */
.bb-page-hero:not(.bb-page-hero--collections):not(.bb-page-hero--story):not(.bb-page-hero--contact) {
    color: #f7f2e8 !important;
}

.bb-page-hero:not(.bb-page-hero--collections):not(.bb-page-hero--story):not(.bb-page-hero--contact) .bb-page-hero-eyebrow {
    color: #e0bb49 !important;
    text-shadow: 0 2px 18px rgba(7, 18, 34, .28);
}

.bb-page-hero:not(.bb-page-hero--collections):not(.bb-page-hero--story):not(.bb-page-hero--contact) .bb-page-hero-title {
    color: #f7f2e8 !important;
    text-shadow: 0 2px 20px rgba(7, 18, 34, .32);
}

.bb-page-hero:not(.bb-page-hero--collections):not(.bb-page-hero--story):not(.bb-page-hero--contact) .bb-page-hero-sub {
    color: rgba(247,242,232,.82) !important;
    text-shadow: 0 2px 18px rgba(7, 18, 34, .22);
}

/* Phase 43 - Strong footer-page hero text override */
html body .bb-page-hero:not(.bb-page-hero--collections):not(.bb-page-hero--story):not(.bb-page-hero--contact) > .container {
    position: relative !important;
    z-index: 3 !important;
}

html body .bb-page-hero:not(.bb-page-hero--collections):not(.bb-page-hero--story):not(.bb-page-hero--contact) .bb-page-hero-eyebrow {
    color: #e0bb49 !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

html body .bb-page-hero:not(.bb-page-hero--collections):not(.bb-page-hero--story):not(.bb-page-hero--contact) .bb-page-hero-title {
    color: #fffaf2 !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    text-shadow: 0 4px 24px rgba(7, 18, 34, .38) !important;
}

html body .bb-page-hero:not(.bb-page-hero--collections):not(.bb-page-hero--story):not(.bb-page-hero--contact) .bb-page-hero-sub {
    color: rgba(255,250,242,.84) !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    text-shadow: 0 3px 20px rgba(7, 18, 34, .30) !important;
}

/* Phase 44 - Faster hero controls + homepage banner grid */
html body .bb-hero-layer {
    transition: opacity 1.1s cubic-bezier(.22,1,.36,1) !important;
}

.bb-hero-controls {
    padding: 10px 0 0 !important;
    gap: 12px !important;
}

.bb-hero-ctrl-btn {
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease !important;
}

.bb-hero-dot {
    transition: background .18s ease, transform .18s ease, width .18s ease !important;
}

.bb-home-banner-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}

.bb-home-banner-card {
    background: transparent;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    height: 100%;
}

.bb-home-banner-img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
    background: transparent;
}

.bb-home-banners .container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.bb-home-banners .bb-home-banner-grid {
    align-items: stretch;
}

.bb-home-banners {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.bb-marquee-strip {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.bb-footer-credit {
    color: var(--bb-gold);
    text-decoration: none;
    transition: color .2s ease;
}

.bb-footer-credit:hover {
    color: #fff3cf;
}

.bb-footer-meta {
    flex-wrap: wrap;
    justify-content: center;
}

.bb-footer-meta-line {
    color: rgba(255,255,255,.84);
    font-size: 13px;
    line-height: 1.7;
    text-align: center;
}

.bb-footer-meta-line a {
    font-weight: 600;
}

@media (max-width: 767px) {
    .bb-home-banner-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .bb-footer-meta {
        gap: 10px !important;
    }
}

/* Phase 45 - Homepage carry section + split campaign rows */
.bb-why-carry-section {
    background:
        radial-gradient(circle at top center, rgba(212,175,55,.14), transparent 36%),
        linear-gradient(180deg, #fffdf8 0%, #f7f0e4 100%);
    position: relative;
    overflow: hidden;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.bb-why-carry-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 28%, rgba(212,175,55,.08) 52%, rgba(255,255,255,0) 78%);
    pointer-events: none;
}

.bb-why-carry-banner-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    line-height: 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.bb-why-carry-banner-card {
    position: relative;
    overflow: hidden;
    background: transparent;
    min-height: 280px;
    height: 100%;
}

.bb-why-carry-banner-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.22,1,.36,1);
    vertical-align: top;
}

.bb-why-carry-banner-card:hover .bb-why-carry-banner-img {
    transform: scale(1.03);
}

.bb-why-choose-section {
    background:
        radial-gradient(circle at top center, rgba(212,175,55,.14), transparent 34%),
        linear-gradient(180deg, #fffdf8 0%, #f7f0e4 100%);
    position: relative;
    overflow: hidden;
}

.bb-why-choose-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 28%, rgba(212,175,55,.08) 52%, rgba(255,255,255,0) 78%);
    pointer-events: none;
}

.bb-featured-section::after,
.bb-why-choose-section::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .7;
}

.bb-featured-section::after {
    background:
        radial-gradient(circle at 12% 18%, rgba(212,175,55,.12) 0%, transparent 18%),
        radial-gradient(circle at 88% 20%, rgba(7,24,45,.06) 0%, transparent 20%),
        linear-gradient(90deg, transparent 0 24%, rgba(212,175,55,.05) 24% 24.12%, transparent 24.12% 100%),
        linear-gradient(0deg, transparent 0 74%, rgba(7,24,45,.04) 74% 74.12%, transparent 74.12% 100%);
}

.bb-why-choose-section::after {
    background:
        radial-gradient(circle at 18% 82%, rgba(212,175,55,.11) 0%, transparent 20%),
        radial-gradient(circle at 84% 14%, rgba(7,24,45,.06) 0%, transparent 18%),
        repeating-linear-gradient(
            135deg,
            transparent 0 28px,
            rgba(212,175,55,.035) 28px 29px
        );
}

.bb-why-choose-section .container {
    position: relative;
    z-index: 1;
}

.bb-why-choose-card {
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(212,175,55,.22);
    border-radius: 20px;
    padding: 30px 24px 26px;
    box-shadow: 0 18px 50px rgba(20, 18, 16, .08);
    text-align: center;
    transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s cubic-bezier(.22,1,.36,1), border-color .3s ease;
}

.bb-why-choose-card:hover {
    transform: translateY(-8px);
    border-color: rgba(212,175,55,.38);
    box-shadow: 0 24px 64px rgba(20, 18, 16, .12);
}

.bb-why-choose-icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, rgba(212,175,55,.18), rgba(212,175,55,.06));
    color: var(--bb-gold);
    font-size: 1.4rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}

.bb-why-choose-title {
    margin-bottom: 12px;
    color: var(--bb-deep-navy);
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.7rem, 1.2rem + .8vw, 2rem);
}

.bb-why-choose-body {
    margin: 0;
    color: #766f67;
    font-size: 1rem;
    line-height: 1.75;
}

@media (max-width: 767px) {
    .bb-why-carry-banner-grid {
        grid-template-columns: 1fr;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .bb-why-carry-banner-card {
        min-height: 220px;
    }

    .bb-why-choose-card {
        padding: 24px 20px 22px;
    }
}

/* Phase 46 - Collections work-ready image panels */
.bb-collection-banner-card {
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 18px 48px rgba(20, 18, 16, .10);
    border: 1px solid rgba(212,175,55,.12);
    transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s cubic-bezier(.22,1,.36,1);
}

.bb-collection-banner-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 26px 64px rgba(20, 18, 16, .14);
}

.bb-collection-banner-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Phase 47 - Product zoom restoration + responsive device polish */
@media (hover: hover) and (pointer: fine) {
    html body .bb-product-card:hover .bb-product-img,
    html body .bb-product-card-top:hover .bb-product-img {
        transform: scale(1.1) !important;
    }

    html body .bb-gallery-main:hover img {
        transform: scale(1.09) !important;
    }

    html body .bb-collection-banner-card:hover .bb-collection-banner-img {
        transform: scale(1.04);
    }
}

html body .bb-product-img-wrap,
html body .bb-gallery-main,
html body .bb-collection-banner-card {
    overflow: hidden !important;
}

html body .bb-product-img,
html body .bb-gallery-main img,
html body .bb-collection-banner-img {
    will-change: transform;
    backface-visibility: hidden;
}

html body .bb-gallery-main img {
    transition: transform .7s cubic-bezier(.22,1,.36,1) !important;
    transform-origin: center center;
}

html body .bb-collection-banner-img {
    transition: transform .7s cubic-bezier(.22,1,.36,1);
}

img {
    max-width: 100%;
}

@media (max-width: 1199px) {
    .bb-section {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }

    .bb-content-section,
    .bb-content-section-alt {
        padding-top: 52px !important;
        padding-bottom: 52px !important;
    }

    .bb-page-hero-title,
    .bb-section-heading {
        text-wrap: balance;
    }
}

@media (max-width: 991px) {
    .bb-product-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .bb-product-btns,
    .bb-hero-controls,
    .bb-footer-bottom,
    .bb-footer-meta {
        flex-wrap: wrap;
    }

    .bb-product-btns form,
    .bb-product-btns .bb-btn-out-stock-sm,
    .bb-product-actions .bb-view-btn {
        width: 100%;
    }

    .bb-product-actions .bb-view-btn {
        text-align: center;
    }

    .bb-product-btns {
        width: 100%;
        justify-content: stretch !important;
        gap: 10px !important;
    }

    .bb-product-btns form:first-child {
        flex: 1 1 auto;
    }

    .bb-product-btns .bb-btn-add-cart,
    .bb-product-btns .bb-btn-out-stock-sm {
        width: 100%;
        justify-content: center;
        white-space: nowrap;
    }

    .bb-home-banner-grid {
        grid-template-columns: 1fr !important;
    }

    .bb-collection-banner-card {
        min-height: 260px;
    }

    .bb-viewer-tabs {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .bb-section {
        padding-top: 44px !important;
        padding-bottom: 44px !important;
    }

    .bb-content-section,
    .bb-content-section-alt {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .bb-page-hero-title {
        font-size: clamp(2rem, 8vw, 2.8rem) !important;
        line-height: 1.06 !important;
    }

    .bb-page-hero-sub,
    .bb-section-body {
        font-size: 15px !important;
        line-height: 1.8 !important;
    }

    .bb-gallery-main,
    .bb-3d-viewer-wrap {
        border-radius: 14px !important;
    }

    .bb-gallery-thumbs-col {
        gap: 10px !important;
    }

    .bb-gallery-thumbs-col .bb-gallery-thumb {
        width: 72px !important;
        height: 72px !important;
    }

    .bb-product-detail-name {
        font-size: clamp(1.7rem, 7vw, 2.15rem) !important;
    }

    .bb-product-detail-price-row,
    .bb-meta-grid,
    .bb-trust-points {
        gap: 12px !important;
    }

    .bb-hero-controls {
        padding-top: 12px !important;
        justify-content: center;
    }

    .bb-footer-bottom {
        gap: 12px !important;
        text-align: center;
    }
}

@media (max-width: 575px) {
    .bb-container,
    .container {
        --bs-gutter-x: 1rem;
    }

    .bb-product-info {
        padding: 14px 14px 8px !important;
    }

    .bb-product-actions {
        padding: 12px 14px 14px !important;
    }

    .bb-btn-add-cart,
    .bb-btn-outline,
    .bb-btn-primary,
    .bb-btn-ghost {
        min-height: 46px;
    }

    .bb-home-banners .container {
        padding-left: 0;
        padding-right: 0;
    }

    .bb-collection-banner-card {
        border-radius: 16px;
        min-height: 220px;
    }

    .bb-footer-meta-line {
        font-size: 12px;
    }
}

/* Phase 48 - Product gallery mobile fix */
@media (max-width: 767px) {
    html body .bb-gallery-panel[data-panel="photos"] {
        width: 100%;
    }

    html body .bb-gallery-wrap {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100%;
    }

    html body .bb-gallery-wrap .bb-gallery-main {
        order: 1;
        width: 100%;
        aspect-ratio: 1 / 1 !important;
        min-height: 280px;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        background: #fff !important;
    }

    html body .bb-gallery-main img,
    html body #bb-main-img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
        background: #fff !important;
    }

    html body .bb-gallery-thumbs-col {
        order: 2 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        touch-action: pan-x;
        gap: 8px !important;
        padding: 2px 2px 8px !important;
        margin: 0 !important;
    }

    html body .bb-gallery-thumbs-col::-webkit-scrollbar {
        display: none !important;
    }

    html body .bb-gallery-thumbs-col .bb-gallery-thumb {
        flex: 0 0 76px !important;
        width: 76px !important;
        height: 76px !important;
    }
}

/* Phase 49 - Product image lightbox */
.bb-no-scroll {
    overflow: hidden !important;
}

.bb-image-lightbox {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(7, 18, 34, .92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, visibility .28s ease;
    z-index: 11000;
}

.bb-image-lightbox.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.bb-image-lightbox-stage {
    max-width: min(96vw, 1080px);
    max-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bb-image-lightbox-img {
    display: block;
    max-width: 100%;
    max-height: 88vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 18px;
    box-shadow: 0 28px 80px rgba(0,0,0,.35);
    background: #fff;
}

.bb-image-lightbox-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(212,175,55,.34);
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.bb-image-lightbox-close:hover {
    transform: scale(1.05);
    background: rgba(255,255,255,.14);
    border-color: rgba(212,175,55,.54);
}

.bb-image-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border: 1px solid rgba(212,175,55,.34);
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
    z-index: 2;
}

.bb-image-lightbox-prev {
    left: 18px;
}

.bb-image-lightbox-next {
    right: 18px;
}

.bb-image-lightbox-nav:hover {
    background: rgba(255,255,255,.14);
    border-color: rgba(212,175,55,.54);
}

.bb-image-lightbox-meta {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    min-width: 76px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(212,175,55,.24);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-align: center;
}

@media (max-width: 767px) {
    .bb-image-lightbox {
        padding: 14px;
    }

    .bb-image-lightbox-stage,
    .bb-image-lightbox-img {
        max-width: 100%;
        max-height: 82vh;
    }

    .bb-image-lightbox-close {
        top: 12px;
        right: 12px;
        width: 42px;
        height: 42px;
    }

    .bb-image-lightbox-nav {
        width: 42px;
        height: 42px;
    }

    .bb-image-lightbox-prev {
        left: 10px;
    }

    .bb-image-lightbox-next {
        right: 10px;
    }

    .bb-image-lightbox-meta {
        bottom: 12px;
        font-size: 11px;
        padding: 7px 12px;
    }
}

/* Phase 50 - Warm category section + featured picks moving rail */
.bb-cat-section {
    background:
        radial-gradient(circle at 50% 0%, rgba(212,175,55,.16) 0%, transparent 34%),
        linear-gradient(180deg, #fcf8f1 0%, #f4eadb 100%) !important;
    position: relative;
    overflow: hidden;
}

.bb-cat-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 26%, rgba(212,175,55,.05) 52%, rgba(255,255,255,0) 78%);
    pointer-events: none;
}

.bb-cat-section .container {
    position: relative;
    z-index: 1;
}

.bb-featured-section {
    overflow: hidden;
}

.bb-featured-marquee {
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0, #000 2%, #000 98%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2%, #000 98%, transparent 100%);
}

.bb-featured-track {
    display: flex;
    align-items: stretch;
    gap: 26px;
    width: max-content;
    animation: bbFeaturedRail 28s linear infinite;
    will-change: transform;
}

.bb-featured-marquee:hover .bb-featured-track {
    animation-play-state: paused;
}

.bb-featured-slide {
    width: min(400px, 84vw);
    flex: 0 0 auto;
}

.bb-featured-product-card {
    height: 100%;
}

@keyframes bbFeaturedRail {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-50% - 13px));
    }
}

@media (max-width: 767px) {
    .bb-featured-marquee {
        overflow-x: auto;
        overflow-y: hidden;
        mask-image: none;
        -webkit-mask-image: none;
        padding-bottom: 4px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .bb-featured-marquee::-webkit-scrollbar {
        display: none;
    }

    .bb-featured-track {
        animation: none !important;
        gap: 16px;
        padding-right: 12px;
    }

    .bb-featured-slide {
        width: min(340px, 90vw);
    }
}

/* Phase 53 - Featured picks image recovery */
html body .bb-featured-section .bb-featured-product-card {
    isolation: isolate;
}

html body .bb-featured-section .bb-featured-product-card .bb-product-img-wrap {
    position: relative !important;
    aspect-ratio: 1 / 1 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

html body .bb-featured-section .bb-featured-product-card .bb-product-img-wrap::before,
html body .bb-featured-section .bb-featured-product-card .bb-product-img-wrap::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    background: none !important;
}

html body .bb-featured-section .bb-featured-product-card .bb-product-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    z-index: 2 !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    background: transparent !important;
}

html body .bb-featured-section .bb-featured-product-card .bb-product-img-placeholder {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
}

/* Phase 54 - Featured picks wider runway */
html body .bb-featured-section .container {
    max-width: min(1680px, 96vw) !important;
}

html body .bb-featured-section .bb-featured-marquee {
    margin-left: calc(50% - 48vw);
    margin-right: calc(50% - 48vw);
    border-radius: 36px;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

html body .bb-featured-section .bb-featured-track {
    gap: 36px;
    padding-left: 28px;
    padding-right: 28px;
}

@media (max-width: 991px) {
    html body .bb-featured-section .container {
        max-width: 100% !important;
    }

    html body .bb-featured-section .bb-featured-marquee {
        margin-left: 0;
        margin-right: 0;
        border-radius: 28px;
    }

    html body .bb-featured-section .bb-featured-track {
        gap: 22px;
        padding-left: 16px;
        padding-right: 16px;
    }
}

html body .bb-featured-section .bb-featured-marquee::before,
html body .bb-featured-section .bb-featured-marquee::after {
    display: none !important;
    content: none !important;
    background: none !important;
    opacity: 0 !important;
}

@media (max-width: 767px) {
    html body .bb-featured-section .bb-featured-marquee {
        border-radius: 0;
    }

    html body .bb-featured-section .bb-featured-track {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Phase 52 - Featured picks editorial runway refresh */
.bb-featured-section {
    background:
        radial-gradient(circle at 14% 14%, rgba(212,175,55,.18) 0%, transparent 24%),
        radial-gradient(circle at 86% 10%, rgba(255,255,255,.45) 0%, transparent 20%),
        linear-gradient(180deg, #fffdf8 0%, #f6ecdc 46%, #fbf6ee 100%) !important;
    position: relative;
    overflow: hidden;
}

.bb-featured-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent 0 9%, rgba(212,175,55,.055) 9% 9.1%, transparent 9.1% 100%),
        linear-gradient(0deg, transparent 0 76%, rgba(10,27,48,.035) 76% 76.1%, transparent 76.1% 100%);
    pointer-events: none;
}

.bb-featured-section::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 7%;
    width: min(1100px, 88vw);
    height: 220px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(212,175,55,.22) 0%, rgba(212,175,55,.07) 34%, transparent 74%);
    filter: blur(14px);
    pointer-events: none;
}

.bb-featured-section .container {
    position: relative;
    z-index: 1;
}

.bb-featured-section .text-center.mb-5 {
    margin-bottom: 34px !important;
}

.bb-featured-section .bb-section-label {
    color: #cda238 !important;
    letter-spacing: .28em;
}

.bb-featured-section .bb-section-heading {
    color: #07182d !important;
    position: relative;
    display: inline-block;
    padding-inline: 24px;
}

.bb-featured-section .bb-section-heading::before,
.bb-featured-section .bb-section-heading::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 72px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(212,175,55,.72) 100%);
}

.bb-featured-section .bb-section-heading::before {
    right: 100%;
    margin-right: 14px;
}

.bb-featured-section .bb-section-heading::after {
    left: 100%;
    margin-left: 14px;
    transform: scaleX(-1);
}

.bb-featured-section .bb-section-body {
    color: #6f675d !important;
    max-width: 760px;
}

.bb-featured-marquee {
    position: relative;
    overflow: hidden;
    padding: 26px 22px 28px;
    border-radius: 34px;
    background:
        linear-gradient(145deg, rgba(15,20,26,.94) 0%, rgba(35,27,21,.94) 48%, rgba(14,12,10,.96) 100%);
    border: 1px solid rgba(212,175,55,.16);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 32px 70px rgba(25,17,10,.18),
        0 10px 24px rgba(25,17,10,.10);
    mask-image: none;
    -webkit-mask-image: none;
}

.bb-featured-marquee::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 22%, rgba(212,175,55,.12) 0%, transparent 22%),
        radial-gradient(circle at 82% 18%, rgba(255,255,255,.08) 0%, transparent 18%);
    pointer-events: none;
}

.bb-featured-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -24%;
    width: 34%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.10) 46%, transparent 100%);
    transform: skewX(-18deg);
    animation: bbFeaturedSheen 7.5s ease-in-out infinite;
    pointer-events: none;
}

.bb-featured-track {
    display: flex;
    align-items: stretch;
    gap: 34px;
    width: max-content;
    padding: 8px 10px 18px;
    animation: bbFeaturedRunway 34s linear infinite;
    will-change: transform;
}

.bb-featured-marquee:hover .bb-featured-track {
    animation-play-state: paused;
}

.bb-featured-slide {
    width: min(440px, 86vw);
    flex: 0 0 auto;
    transition: transform .55s cubic-bezier(.22,1,.36,1), filter .55s cubic-bezier(.22,1,.36,1);
    animation: bbFeaturedFloat 7.2s ease-in-out infinite;
}

.bb-featured-slide:nth-child(2n) {
    animation-delay: -1.6s;
}

.bb-featured-slide:nth-child(3n) {
    animation-delay: -3.1s;
}

.bb-featured-slide:nth-child(4n) {
    animation-delay: -4.2s;
}

.bb-featured-slide:hover {
    transform: translateY(-10px) scale(1.012);
    z-index: 3;
}

.bb-featured-product-card {
    height: 100%;
    position: relative;
    border-radius: 28px !important;
    overflow: hidden;
    background: rgba(255,251,246,.99) !important;
    border: 1px solid rgba(212,175,55,.14) !important;
    box-shadow:
        0 30px 70px rgba(0,0,0,.16),
        0 10px 24px rgba(0,0,0,.08) !important;
}

.bb-featured-product-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, transparent 22%);
    pointer-events: none;
    z-index: 1;
}

.bb-featured-product-card::after {
    content: "";
    position: absolute;
    inset: auto 18px 0 18px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(212,175,55,.18) 20%, rgba(212,175,55,.26) 50%, rgba(212,175,55,.18) 80%, transparent 100%);
    pointer-events: none;
}

.bb-featured-product-card .bb-product-card-top,
.bb-featured-product-card .bb-product-actions {
    position: relative;
    z-index: 2;
}

.bb-featured-product-card .bb-product-img-wrap {
    position: relative;
    background:
        radial-gradient(circle at 50% 18%, rgba(212,175,55,.16) 0%, transparent 38%),
        linear-gradient(180deg, #fffdfa 0%, #f5ede3 100%) !important;
    padding-bottom: 100%;
}

.bb-featured-product-card .bb-product-img {
    position: relative;
    z-index: 2;
    display: block;
    opacity: 1 !important;
    filter: none !important;
    visibility: visible !important;
    transform: scale(1.015);
    transition: transform .8s cubic-bezier(.22,1,.36,1);
}

.bb-featured-product-card:hover .bb-product-img {
    transform: scale(1.055);
}

.bb-featured-product-card .bb-product-img-wrap::before,
.bb-featured-product-card .bb-product-img-wrap::after {
    pointer-events: none;
}

.bb-featured-product-card .bb-product-img-wrap::before {
    z-index: 0 !important;
}

.bb-featured-product-card .bb-product-img-wrap::after {
    z-index: 1 !important;
    opacity: .18 !important;
}

.bb-featured-product-card .bb-sale-badge,
.bb-featured-product-card .bb-3d-badge {
    z-index: 3;
}

.bb-featured-product-card .bb-product-info {
    padding: 22px 24px 14px !important;
}

.bb-featured-product-card .bb-product-category {
    color: #c39a34 !important;
    letter-spacing: .22em;
}

.bb-featured-product-card .bb-product-name {
    font-size: 1.22rem !important;
    line-height: 1.3 !important;
    margin-bottom: 16px !important;
}

.bb-featured-product-card .bb-price-group {
    margin-bottom: 16px !important;
}

.bb-featured-product-card .bb-price-sale,
.bb-featured-product-card .bb-price-regular {
    font-size: 1.26rem !important;
}

.bb-featured-product-card .bb-product-actions {
    padding: 16px 24px 22px !important;
    border-top: 1px solid rgba(212,175,55,.12) !important;
    background: linear-gradient(180deg, rgba(255,252,247,.42) 0%, rgba(255,249,240,.9) 100%);
}

.bb-featured-product-card .bb-view-btn {
    letter-spacing: .18em;
}

@keyframes bbFeaturedRunway {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-50% - 17px));
    }
}

@keyframes bbFeaturedFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes bbFeaturedSheen {
    0%,
    100% {
        transform: translateX(-8%) skewX(-18deg);
        opacity: 0;
    }
    14% {
        opacity: .0;
    }
    32% {
        opacity: .9;
    }
    52% {
        transform: translateX(318%) skewX(-18deg);
        opacity: 0;
    }
}

@media (max-width: 991px) {
    .bb-featured-marquee {
        padding: 18px 14px 20px;
        border-radius: 28px;
    }

    .bb-featured-track {
        gap: 22px;
    }

    .bb-featured-slide {
        width: min(390px, 88vw);
    }
}

@media (max-width: 767px) {
    .bb-featured-section {
        padding-top: 54px !important;
        padding-bottom: 54px !important;
    }

    .bb-featured-section .bb-section-heading {
        padding-inline: 0;
    }

    .bb-featured-section .bb-section-heading::before,
    .bb-featured-section .bb-section-heading::after {
        display: none;
    }

    .bb-featured-marquee {
        overflow-x: auto;
        overflow-y: hidden;
        padding: 10px 0 6px;
        background: transparent;
        border: 0;
        box-shadow: none;
        border-radius: 0;
    }

    .bb-featured-marquee::before,
    .bb-featured-marquee::after {
        display: none;
    }

    .bb-featured-track {
        animation: none !important;
        gap: 16px;
        padding: 4px 12px 12px 0;
    }

    .bb-featured-slide {
        width: min(340px, 90vw);
        animation: none;
    }
}

/* Phase 52 - Featured picks redesign */
.bb-featured-section {
    background:
        radial-gradient(circle at 18% 18%, rgba(212,175,55,.16) 0%, transparent 24%),
        radial-gradient(circle at 82% 14%, rgba(255,255,255,.08) 0%, transparent 18%),
        linear-gradient(145deg, #1a1510 0%, #241c15 46%, #120f0c 100%) !important;
    color: #f8f1e7 !important;
    padding-top: 72px !important;
    padding-bottom: 72px !important;
}

.bb-featured-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent 0 10%, rgba(212,175,55,.06) 10% 10.08%, transparent 10.08% 100%),
        linear-gradient(0deg, transparent 0 78%, rgba(255,255,255,.04) 78% 78.08%, transparent 78.08% 100%);
    opacity: .7;
    pointer-events: none;
}

.bb-featured-section::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 44px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(212,175,55,.24) 18%, rgba(212,175,55,.36) 50%, rgba(212,175,55,.24) 82%, transparent 100%);
    pointer-events: none;
}

.bb-featured-section .container {
    position: relative;
    z-index: 1;
}

.bb-featured-section .bb-section-label {
    color: #d9b257 !important;
}

.bb-featured-section .bb-section-heading {
    color: #fff8ee !important;
    letter-spacing: -.02em;
}

.bb-featured-section .bb-section-body {
    color: rgba(255,244,228,.76) !important;
    max-width: 720px;
}

.bb-featured-marquee {
    position: relative;
    overflow: hidden;
    padding: 18px 0 22px;
    mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.bb-featured-marquee::before,
.bb-featured-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 180px;
    z-index: 2;
    pointer-events: none;
}

.bb-featured-marquee::before {
    left: 0;
    background: linear-gradient(90deg, rgba(19,15,11,.98) 0%, rgba(19,15,11,0) 100%);
}

.bb-featured-marquee::after {
    right: 0;
    background: linear-gradient(270deg, rgba(19,15,11,.98) 0%, rgba(19,15,11,0) 100%);
}

.bb-featured-track {
    display: flex;
    align-items: stretch;
    gap: 30px;
    width: max-content;
    padding: 8px 0 26px;
    animation: bbFeaturedRunway 38s linear infinite;
    will-change: transform;
}

.bb-featured-marquee:hover .bb-featured-track {
    animation-play-state: paused;
}

.bb-featured-slide {
    width: min(430px, 86vw);
    flex: 0 0 auto;
    transition: transform .45s cubic-bezier(.22,1,.36,1), filter .45s cubic-bezier(.22,1,.36,1);
}

.bb-featured-slide:nth-child(odd) {
    transform: translateY(8px);
}

.bb-featured-slide:nth-child(even) {
    transform: translateY(-8px);
}

.bb-featured-marquee:hover .bb-featured-slide {
    filter: saturate(1.04);
}

.bb-featured-slide:hover {
    transform: translateY(-14px) scale(1.01) !important;
    z-index: 3;
}

.bb-featured-product-card {
    background: rgba(255,250,244,.98) !important;
    border-radius: 28px !important;
    overflow: hidden;
    border: 1px solid rgba(212,175,55,.16) !important;
    box-shadow: 0 28px 80px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.10) !important;
}

.bb-featured-product-card::before,
.bb-featured-product-card::after {
    display: none !important;
}

.bb-featured-product-card .bb-product-img-wrap {
    background:
        radial-gradient(circle at 50% 18%, rgba(212,175,55,.10) 0%, transparent 42%),
        linear-gradient(180deg, #fffdfa 0%, #f6eee3 100%) !important;
}

.bb-featured-product-card .bb-product-info {
    padding: 20px 22px 12px !important;
}

.bb-featured-product-card .bb-product-actions {
    padding: 14px 22px 18px !important;
    border-top: 1px solid rgba(212,175,55,.10) !important;
}

.bb-featured-product-card .bb-product-name {
    font-size: 1.18rem !important;
    line-height: 1.28 !important;
}

.bb-featured-product-card .bb-price-sale,
.bb-featured-product-card .bb-price-regular {
    font-size: 1.2rem !important;
}

@keyframes bbFeaturedRunway {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-50% - 15px));
    }
}

@media (max-width: 991px) {
    .bb-featured-marquee::before,
    .bb-featured-marquee::after {
        width: 100px;
    }

    .bb-featured-slide {
        width: min(390px, 88vw);
    }
}

@media (max-width: 767px) {
    .bb-featured-section {
        padding-top: 52px !important;
        padding-bottom: 52px !important;
    }

    .bb-featured-marquee {
        overflow-x: auto;
        overflow-y: hidden;
        mask-image: none;
        -webkit-mask-image: none;
        padding: 6px 0 8px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .bb-featured-marquee::before,
    .bb-featured-marquee::after {
        display: none;
    }

    .bb-featured-track {
        animation: none !important;
        gap: 16px;
        padding: 6px 12px 12px 0;
    }

    .bb-featured-slide,
    .bb-featured-slide:nth-child(odd),
    .bb-featured-slide:nth-child(even) {
        width: min(340px, 90vw);
        transform: none !important;
    }
}

/* Phase 51 - Featured picks luxury motion upgrade */
.bb-featured-section {
    background:
        radial-gradient(circle at 12% 18%, rgba(212,175,55,.14) 0%, transparent 20%),
        radial-gradient(circle at 88% 14%, rgba(7,24,45,.07) 0%, transparent 18%),
        linear-gradient(180deg, #fffdf8 0%, #f7efe2 52%, #fffaf2 100%) !important;
    position: relative;
    overflow: hidden;
}

.bb-featured-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent 0 18%, rgba(212,175,55,.045) 18% 18.1%, transparent 18.1% 100%),
        linear-gradient(0deg, transparent 0 70%, rgba(7,24,45,.035) 70% 70.1%, transparent 70.1% 100%);
    pointer-events: none;
    opacity: .9;
}

.bb-featured-section::after {
    content: "";
    position: absolute;
    inset: auto -8% 10% -8%;
    height: 220px;
    background: radial-gradient(ellipse at center, rgba(212,175,55,.10) 0%, transparent 68%);
    pointer-events: none;
    filter: blur(8px);
}

.bb-featured-section .container {
    position: relative;
    z-index: 1;
}

.bb-featured-section .text-center.mb-5 {
    margin-bottom: 42px !important;
}

.bb-featured-section .bb-section-heading {
    position: relative;
    display: inline-block;
    padding-inline: 18px;
}

.bb-featured-section .bb-section-heading::before,
.bb-featured-section .bb-section-heading::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 56px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(212,175,55,.6) 100%);
}

.bb-featured-section .bb-section-heading::before {
    right: 100%;
    margin-right: 10px;
}

.bb-featured-section .bb-section-heading::after {
    left: 100%;
    margin-left: 10px;
    transform: scaleX(-1);
}

.bb-featured-marquee {
    position: relative;
    padding: 18px 0 10px;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%);
}

.bb-featured-marquee::before,
.bb-featured-marquee::after {
    content: "";
    position: absolute;
    top: 14px;
    bottom: 4px;
    width: 140px;
    z-index: 2;
    pointer-events: none;
}

.bb-featured-marquee::before {
    left: 0;
    background: linear-gradient(90deg, rgba(255,248,238,.96) 0%, rgba(255,248,238,0) 100%);
}

.bb-featured-marquee::after {
    right: 0;
    background: linear-gradient(270deg, rgba(255,248,238,.96) 0%, rgba(255,248,238,0) 100%);
}

.bb-featured-track {
    display: flex;
    align-items: stretch;
    gap: 30px;
    width: max-content;
    animation: bbFeaturedRail 30s linear infinite;
    will-change: transform;
    padding: 6px 0 18px;
}

.bb-featured-marquee:hover .bb-featured-track {
    animation-play-state: paused;
}

.bb-featured-slide {
    width: min(420px, 86vw);
    flex: 0 0 auto;
    transform: perspective(1200px) rotateY(-1.6deg);
    transition: transform .45s cubic-bezier(.22,1,.36,1);
}

.bb-featured-slide:hover {
    transform: perspective(1200px) rotateY(0deg) translateY(-6px);
}

.bb-featured-product-card {
    height: 100%;
    border-radius: 24px !important;
    overflow: hidden;
    box-shadow: 0 26px 70px rgba(20,18,16,.10), 0 4px 18px rgba(20,18,16,.05) !important;
}

.bb-featured-product-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(212,175,55,.16);
    pointer-events: none;
    z-index: 1;
}

.bb-featured-product-card .bb-product-img-wrap::before {
    content: "";
    position: absolute;
    inset: auto -20% -45% -20%;
    height: 170px;
    background: radial-gradient(ellipse at center, rgba(212,175,55,.18) 0%, transparent 72%);
    pointer-events: none;
    z-index: 0;
}

@media (max-width: 991px) {
    .bb-featured-slide {
        width: min(390px, 88vw);
        transform: none;
    }

    .bb-featured-marquee::before,
    .bb-featured-marquee::after {
        width: 90px;
    }
}

@media (max-width: 767px) {
    .bb-featured-marquee {
        overflow-x: auto;
        overflow-y: hidden;
        mask-image: none;
        -webkit-mask-image: none;
        padding: 8px 0 4px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .bb-featured-marquee::before,
    .bb-featured-marquee::after {
        display: none;
    }

    .bb-featured-track {
        animation: none !important;
        gap: 16px;
        padding: 4px 12px 12px 0;
    }

    .bb-featured-slide {
        width: min(340px, 90vw);
    }
}