@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');
:root{
    --bb-dark-blue: #0d2b4d;
    --bb-blue: #163d6b;
    --bb-red: #c1121f;
    --bb-red-dark: #9f0d18;
    --bb-gold: #d4af37;
    --bb-silver: #eef2f5;
    --bb-silver-dark: #c7d0d9;
    --bb-white: #ffffff;
    --bb-text: #1d2430;
    --bb-muted: #6c7583;
    --bb-border: #e3e7eb;
    --bb-shadow: 0 10px 30px rgba(0,0,0,.08);
    --bb-radius: 14px;
}

*,
*::before,
*::after{
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
}

/* =========================================================
   GLOBAL BODY (SILVER GRADIENT BACKGROUND)
========================================================= */
body{
    background: linear-gradient(
        90deg,
        #d9d9d9 0%,
        #f5f5f5 25%,
        #ffffff 50%,
        #f5f5f5 75%,
        #d9d9d9 100%
    ) !important;
}

/* =========================================================
   TOP NOTICE BAR (METALLIC RED)
========================================================= */
.top-notice-bar{
    background: linear-gradient(
        180deg,
        #8b0000 0%,
        #d80202 40%,
        #ff4d4d 60%,
        #d80202 80%,
        #8b0000 100%
    );
    color: #fff;
    text-align: center;
    padding: 6px 0;
    font-weight: 600;
    letter-spacing: 1px;
}



.bb-page-shell{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

img{
    max-width: 100%;
    height: auto;
}

a,
a:hover{
    text-decoration: none;
}

main.py-4{
    padding-top: 1.25rem !important;
    padding-bottom: 2rem !important;
}

/* =========================================================
   HEADER
========================================================= */
.site-header{
    position: sticky;
    top: 0;
    z-index: 9990;
    background: transparent;
}

.top-utility-bar{
    background: linear-gradient(90deg, #d9dee4, #eef2f5);
    border-bottom: 1px solid rgba(0,0,0,.06);
    padding: 7px 0;
}

.utility-link{
    color: var(--bb-dark-blue);
    font-size: 13px;
    font-weight: 600;
}

.utility-link:hover{
    color: var(--bb-red);
}

.currency-chip{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--bb-gold), #f3d97a);
    color: #111;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(212,175,55,.18);
}

.main-header-wrap{
    background: linear-gradient(90deg, var(--bb-dark-blue), var(--bb-blue));
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
    position: relative;
    z-index: 10020;
}

.main-header-row{
    display: flex;
    align-items: center;
    min-height: 86px;
    gap: 18px;
}

.site-logo{
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.site-logo img{
    height: 50px;
    width: auto;
    display: block;
}

.header-search{
    flex: 1 1 auto;
    position: relative;
    max-width: 760px;
}

.header-search .form-control{
    height: 48px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.18);
    padding: 0 54px 0 18px;
    background: rgba(255,255,255,.98);
    box-shadow: none;
    font-size: 15px;
}

.header-search .form-control:focus{
    border-color: var(--bb-gold);
    box-shadow: 0 0 0 3px rgba(212,175,55,.12);
}

.search-btn{
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--bb-dark-blue);
    color: #fff;
    cursor: pointer;
}

.header-right-icons{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    flex: 0 0 auto;
    position: relative;
    z-index: 10160;
}

.icon-box{
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.08);
    cursor: pointer;
    position: relative;
    transition: transform .18s ease, background .18s ease;
}

.icon-box:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.14);
}

.icon-box i{
    font-size: 20px;
}

.cart-count{
    position: absolute;
    top: -4px;
    right: -2px;
    min-width: 19px;
    height: 19px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--bb-red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 19px;
    text-align: center;
}

.mobile-nav-toggle{
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: rgba(255,255,255,.1);
    color: #fff;
    flex: 0 0 auto;
}

/* =========================================================
   ACCOUNT PANEL
========================================================= */
.account-box{
    position: relative;
    z-index: 10150;
}

.account-panel{
    display: none;
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    width: 300px;
    background: #fff;
    border: 1px solid var(--bb-border);
    border-radius: 16px;
    box-shadow: 0 22px 45px rgba(0,0,0,.16);
    z-index: 10200;
    overflow: visible;
}

.account-box:hover .account-panel{
    display: block;
}

.account-panel::before{
    content: "";
    position: absolute;
    top: -8px;
    right: 18px;
    width: 16px;
    height: 16px;
    background: #fff;
    transform: rotate(45deg);
    border-left: 1px solid var(--bb-border);
    border-top: 1px solid var(--bb-border);
    z-index: 1;
}

.account-panel-inner{
    position: relative;
    z-index: 2;
    padding: 16px;
}

.account-panel-title{
    font-weight: 800;
    color: var(--bb-dark-blue);
    margin-bottom: 14px;
}

.account-link{
    display: block;
    color: var(--bb-text);
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    transition: background .15s ease, color .15s ease;
}

.account-link:hover{
    background: var(--bb-silver);
    color: var(--bb-red);
}

/* =========================================================
   CATEGORY BAR + MEGA MENU
========================================================= */
.desktop-category-bar{
    background: linear-gradient(180deg, #ffffff, #f8fafb);
    border-top: 2px solid var(--bb-red);
    border-bottom: 1px solid var(--bb-border);
    position: relative;
    z-index: 10010;
    overflow: visible;
}

.desktop-category-list{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    overflow: visible;
    position: relative;
}

.desktop-category-item{
    position: relative;
    padding: 18px 14px;
    flex: 0 0 auto;
}

.desktop-category-link{
    display: inline-block;
    color: var(--bb-dark-blue);
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    transition: color .15s ease;
}

.desktop-category-item:hover .desktop-category-link{
    color: var(--bb-red);
}

/* default hidden */
.desktop-mega-menu{
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 1100px;
    max-width: calc(100vw - 40px);
    background: #fff;
    border: 1px solid var(--bb-border);
    border-radius: 0 0 20px 20px;
    box-shadow: 0 26px 50px rgba(0,0,0,.16);
    padding: 24px;
    z-index: 10120;
}

/* hover show */
.desktop-category-item:hover .desktop-mega-menu{
    display: block;
}

/* when JS adds this class after menu click, force-hide menu */
body.menu-filtering .desktop-mega-menu,
body.menu-filtering .desktop-category-item:hover .desktop-mega-menu{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* prevent screen overflow */
.desktop-category-item:first-child .desktop-mega-menu,
.desktop-category-item:nth-child(2) .desktop-mega-menu{
    left: 0;
    transform: none;
}

.desktop-category-item:last-child .desktop-mega-menu{
    left: auto;
    right: 0;
    transform: none;
}

.desktop-category-item:nth-last-child(2) .desktop-mega-menu{
    left: auto;
    right: -40px;
    transform: none;
}

.desktop-mega-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    padding-right: 18px;
}

.desktop-subcat-card{
    display: block;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--bb-border);
    background: #fff;
    transition: transform .18s ease, box-shadow .18s ease;
}

.desktop-subcat-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(0,0,0,.08);
}

.desktop-subcat-thumb{
    height: 130px;
    background: #f4f6f8;
}

.desktop-subcat-thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.desktop-subcat-name{
    padding: 12px 12px 14px;
    color: var(--bb-dark-blue);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.desktop-mega-banner{
    height: 100%;
    min-height: 100%;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--bb-border);
    background: linear-gradient(135deg, #eef2f5, #ffffff);
    display: flex;
    flex-direction: column;
}

.desktop-mega-banner img{
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.desktop-mega-banner-content{
    padding: 16px;
}

.desktop-mega-banner-content h5{
    color: var(--bb-dark-blue);
    font-weight: 800;
    margin-bottom: 8px;
}

.desktop-mega-banner-content p{
    color: var(--bb-muted);
    font-size: 14px;
    margin-bottom: 0;
}

/* =========================================================
   MOBILE NAV
========================================================= */
.mobile-mega-nav{
    background: #fff;
    border-bottom: 1px solid var(--bb-border);
    position: relative;
    z-index: 1200;
}

.mobile-nav-card{
    border: 0;
    border-bottom: 1px solid var(--bb-border);
    border-radius: 0;
}

.mobile-nav-btn{
    color: var(--bb-dark-blue);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none !important;
}

.mobile-subcat-item{
    padding: 9px 0;
    font-size: 14px;
    color: var(--bb-muted);
    border-top: 1px solid #f0f3f5;
}

.mobile-search .form-control{
    border-radius: 999px;
    height: 44px;
}

/* =========================================================
   OFFER BAR
========================================================= */
.offer-bar{
    background: linear-gradient(90deg, var(--bb-red-dark), var(--bb-red));
    color: #fff;
    padding: 10px 0;
    overflow: hidden;
    position: relative;
    z-index: 1000;
}

.offer-track{
    display: inline-flex;
    align-items: center;
    gap: 50px;
    white-space: nowrap;
    min-width: 100%;
    animation: offerScroll 18s linear infinite;
    font-size: 15px;
    font-weight: 800;
}

@keyframes offerScroll{
    0%   { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* =========================================================
   HOME PAGE / HERO
========================================================= */
.home-page-v2{
    width: 100%;
}

.hero-slider-section{
    margin-top: .25rem;
}

.hero-carousel{
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 18px 38px rgba(0,0,0,.10);
    background: #dfe5ea;
}

.hero-slide{
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    padding: 64px 70px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 24px;
}

.hero-slide-one{
    background:
        linear-gradient(90deg, rgba(11,39,67,.18), rgba(255,255,255,.02)),
        url('../images/hero/hero-1.jpg');
    background-color: #dfe4e7;
}

.hero-slide-two{
    background:
        linear-gradient(90deg, rgba(11,39,67,.22), rgba(255,255,255,.03)),
        url('../images/hero/hero-2.jpg');
    background-color: #dfe4e7;
}

.hero-slide-three{
    background:
        linear-gradient(90deg, rgba(11,39,67,.22), rgba(255,255,255,.03)),
        url('../images/hero/hero-3.jpg');
    background-color: #dfe4e7;
}

.hero-slide-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,0));
    pointer-events: none;
}

.hero-slide-content{
    position: relative;
    z-index: 2;
    max-width: 620px;
}

.hero-kicker{
    display: inline-block;
    margin-bottom: 12px;
    padding: 8px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--bb-gold), #f3d97a);
    color: #111;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.hero-slide-content h2{
    font-size: 62px;
    line-height: 1.02;
    margin-bottom: 14px;
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 4px 20px rgba(0,0,0,.18);
}

.hero-slide-content p{
    font-size: 20px;
    line-height: 1.5;
    color: rgba(255,255,255,.92);
    margin-bottom: 24px;
    max-width: 540px;
}

.hero-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    height: 50px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--bb-red-dark), var(--bb-red));
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.hero-btn:hover{
    color: #fff;
    opacity: .96;
}

.hero-carousel .carousel-indicators{
    bottom: 18px;
}

.hero-carousel .carousel-indicators li{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 0;
    background: rgba(255,255,255,.6);
}

.hero-carousel .carousel-indicators .active{
    background: var(--bb-gold);
}

.custom-carousel-icon{
    width: 38px;
    height: 38px;
    background-size: 65%;
    background-color: rgba(0,0,0,.28);
    border-radius: 50%;
}

.home-products-section{
    margin-top: 26px;
}

.home-products-head{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.section-mini-title{
    display: inline-block;
    color: var(--bb-red);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.home-products-head h5{
    margin: 0;
    font-size: 34px;
    font-weight: 900;
    color: var(--bb-dark-blue);
}

.home-products-head span{
    color: var(--bb-muted);
    font-size: 14px;
    font-weight: 600;
}

/* =========================================================
   PRODUCT CARD
========================================================= */
.product-card{
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--bb-border);
    transition: transform .18s ease, box-shadow .18s ease;
    box-shadow: 0 6px 18px rgba(0,0,0,.04);
}

.product-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0,0,0,.10);
}

.product-image-wrapper{
    position: relative;
    overflow: hidden;
    background: #f7f8fa;
}

.product-image{
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}

.product-card:hover .product-image{
    transform: scale(1.03);
}

.badge-discount{
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 6;
    background: var(--bb-red);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    padding: 8px 10px;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

.badge-couple{
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 6;
    background: var(--bb-blue);
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    padding: 8px 10px;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(0,0,0,.14);
}

.product-body{
    padding: 14px 14px 16px;
}

.product-title{
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--bb-dark-blue);
    margin-bottom: 6px;
    min-height: 42px;
}

.product-category{
    font-size: 12px;
    color: var(--bb-muted);
}

.product-price{
    margin-bottom: 8px !important;
    min-height: 26px;
}

.price-regular{
    font-weight: 800;
    color: var(--bb-blue);
    font-size: 18px;
}

.price-old{
    text-decoration: line-through;
    color: #8a9099;
    opacity: .9;
    font-size: 13px;
    font-weight: 500;
}

.price-new{
    font-weight: 800;
    font-size: 18px;
    color: var(--bb-red);
}

.product-short-desc{
    font-size: 13px;
    line-height: 1.5;
    color: var(--bb-muted);
}

.product-card .card-footer{
    padding: 0;
    margin-top: 14px;
    gap: 8px;
}

.product-card .btn{
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
    padding: .5rem .9rem;
}

.product-card .btn-outline-secondary{
    border-color: #cbd5df;
    color: var(--bb-dark-blue);
    background: #fff;
}

.product-card .btn-outline-secondary:hover{
    background: #f5f7fa;
    color: var(--bb-red);
    border-color: var(--bb-red);
}

.product-card .btn-primary{
    background: linear-gradient(90deg, var(--bb-red-dark), var(--bb-red));
    border: none;
    color: #fff;
}

.product-card .btn-primary:hover{
    background: linear-gradient(90deg, var(--bb-red), #dd2735);
    color: #fff;
}

/* load more */
.btn-load-more{
    background: linear-gradient(90deg, var(--bb-blue), var(--bb-dark-blue));
    color: #fff;
    border-radius: 999px;
    padding: .8rem 2.4rem;
    border: none;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(18,60,105,.18);
}

.btn-load-more:hover{
    color: #fff;
    opacity: .95;
}

#products-container.loading{
    opacity: .45;
    pointer-events: none;
}

/* =========================================================
   NO PRODUCT MESSAGE
========================================================= */
.no-products-box{
    background: #fff;
    border: 1px solid var(--bb-border);
    border-radius: 18px;
    box-shadow: var(--bb-shadow);
    padding: 48px 20px;
    text-align: center;
}

.no-products-box h5{
    color: var(--bb-dark-blue);
    font-weight: 900;
    margin-bottom: 8px;
}

.no-products-box p{
    color: var(--bb-muted);
    margin-bottom: 0;
}

/* =========================================================
   MINI CART
========================================================= */
.mini-cart-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    opacity: 0;
    visibility: hidden;
    transition: all .2s ease;
    z-index: 9998;
}

.mini-cart-drawer{
    position: fixed;
    top: 0;
    right: -420px;
    width: 420px;
    max-width: 92vw;
    height: 100vh;
    background: #fff;
    z-index: 9999;
    box-shadow: -8px 0 30px rgba(0,0,0,.18);
    transition: right .25s ease;
    display: flex;
    flex-direction: column;
}

.mini-cart-open .mini-cart-overlay{
    opacity: 1;
    visibility: visible;
}

.mini-cart-open .mini-cart-drawer{
    right: 0;
}

.mini-cart-header{
    padding: 14px 16px 10px;
    border-bottom: 1px solid #eaeaea;
    background: #fff;
}

.mini-cart-title{
    font-weight: 700;
    font-size: 18px;
}

.mini-cart-subtitle{
    margin-top: 6px;
    background: #dff7e6;
    color: #1c7c3a;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
}

.mini-cart-check i{
    margin-right: 6px;
}

.mini-cart-close{
    border: none;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
}

.mini-cart-body{
    overflow-y: auto;
    flex: 1;
}

.mini-cart-item{
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
}

.mini-cart-item-img{
    width: 78px;
    height: 92px;
    background: #f4f4f4;
    border-radius: 6px;
    overflow: hidden;
    flex: 0 0 auto;
}

.mini-cart-item-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mini-cart-item-info{
    flex: 1;
    min-width: 0;
}

.mini-cart-item-price{
    font-weight: 800;
    margin-bottom: 4px;
}

.mini-cart-item-name{
    font-size: 14px;
    color: #333;
    line-height: 1.3;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-cart-item-meta{
    font-size: 13px;
    color: #666;
}

.mini-cart-item-actions{
    display: flex;
    align-items: center;
}

.mini-cart-trash{
    border: none;
    background: transparent;
    color: #666;
    cursor: pointer;
}

.mini-cart-trash:hover{
    color: #dc3545;
}

.mini-cart-footer{
    border-top: 1px solid #eaeaea;
    padding: 12px 16px 16px;
    background: #fff;
}

.mini-cart-subtotal{
    font-size: 14px;
    margin-bottom: 12px;
}

/* =========================================================
   TOAST
========================================================= */
.bb-toast-area{
    position: fixed;
    top: 86px;
    right: 18px;
    z-index: 99999;
    width: 360px;
    max-width: calc(100% - 36px);
    pointer-events: none;
}

.bb-toast{
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-left: 6px solid #28a745;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.14);
    padding: 12px;
    margin-bottom: 10px;
    transform: translateY(-8px);
    opacity: 0;
    transition: all .22s ease;
}

.bb-toast.show{
    transform: translateY(0);
    opacity: 1;
}

.bb-toast.success{
    border-left-color:#28a745;
}

.bb-toast.error{
    border-left-color:#dc3545;
}

.bb-toast.info{
    border-left-color:#17a2b8;
}

.bb-toast-icon{
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    margin-top: 2px;
}

.bb-toast-title{
    font-weight: 700;
    font-size: 14px;
    margin: 0 0 2px 0;
    color: #222;
}

.bb-toast-msg{
    font-size: 13px;
    color: #444;
    margin: 0;
    line-height: 1.35;
}

.bb-toast-close{
    margin-left: auto;
    border: 0;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    color: #666;
    cursor: pointer;
    padding: 0 4px;
}

.bb-toast-close:hover{
    color:#111;
}

/* =========================================================
   FOOTER
========================================================= */
.site-footer{
    background: #0a1624;
    color: #c9d1d9;
    font-size: 14px;
    margin-top: 3rem !important;
}

.footer-title{
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: .6rem;
}

.footer-links li{
    margin-bottom: .35rem;
}

.footer-links li a{
    color: #c9d1d9;
}

.footer-links li a:hover{
    color: #fff;
}

.footer-social a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-left: .25rem;
    background: rgba(255,255,255,.08);
    color: #fff;
    transition: background .15s ease, transform .15s ease;
}

.footer-social a:hover{
    background: var(--bb-red);
    color: #fff;
    transform: translateY(-1px);
}

/* =========================================================
   MODAL
========================================================= */
.modal-content{
    border-radius: 16px;
    border: 0;
    overflow: hidden;
}

.modal-header.bg-primary{
    background: linear-gradient(90deg, var(--bb-blue), var(--bb-dark-blue)) !important;
}

.modal-header.bg-dark{
    background: linear-gradient(90deg, #111827, #1f2937) !important;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1399.98px){
    .desktop-mega-menu{
        width: 1000px;
        max-width: calc(100vw - 30px);
    }

    .desktop-category-item:nth-last-child(2) .desktop-mega-menu{
        right: -20px;
    }
}

@media (max-width: 1199.98px){
    .desktop-category-link{
        font-size: 14px;
    }

    .desktop-mega-menu{
        width: 920px;
        max-width: calc(100vw - 24px);
    }

    .desktop-category-item:nth-last-child(2) .desktop-mega-menu{
        right: 0;
    }

    .hero-slide{
        min-height: 470px;
        padding: 54px 50px;
    }

    .hero-slide-content h2{
        font-size: 52px;
    }

    .product-image{
        height: 290px;
    }
}

@media (max-width: 991.98px){
    .site-header{
        position: relative;
    }

    .main-header-row{
        min-height: 72px;
        gap: 12px;
    }

    .site-logo img{
        height: 44px;
    }

    .header-right-icons{
        gap: 8px;
    }

    .icon-box{
        width: 38px;
        height: 38px;
    }

    .account-box:hover .account-panel{
        display: none;
    }

    .offer-track{
        font-size: 14px;
    }

    .hero-slide{
        min-height: 420px;
        padding: 46px 34px;
    }

    .hero-slide-content h2{
        font-size: 42px;
    }

    .hero-slide-content p{
        font-size: 17px;
    }

    .home-products-head h5{
        font-size: 28px;
    }

    .product-image{
        height: 260px;
    }
}

@media (max-width: 767.98px){
    main.py-4{
        padding-top: 1rem !important;
    }

    .main-header-wrap{
        padding: 0;
    }

    .main-header-row{
        min-height: 68px;
    }

    .site-logo img{
        height: 40px;
    }

    .currency-chip{
        padding: 5px 10px;
        font-size: 11px;
    }

    .hero-carousel{
        border-radius: 18px;
    }

    .hero-slide{
        min-height: 330px;
        padding: 34px 20px;
        border-radius: 18px;
    }

    .hero-slide-content h2{
        font-size: 30px;
        margin-bottom: 10px;
    }

    .hero-slide-content p{
        font-size: 14px;
        margin-bottom: 16px;
    }

    .hero-btn{
        min-width: 140px;
        height: 44px;
        font-size: 13px;
    }

    .custom-carousel-icon{
        width: 32px;
        height: 32px;
    }

    .home-products-head{
        flex-direction: column;
        align-items: flex-start;
    }

    .home-products-head h5{
        font-size: 24px;
    }

    .product-image{
        height: 240px;
    }

    .product-title{
        font-size: 14px;
        min-height: auto;
    }

    .price-regular,
    .price-new{
        font-size: 16px;
    }

    .price-old{
        font-size: 12px;
    }

    .bb-toast-area{
        top: 12px;
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
    }

    .mini-cart-drawer{
        width: 100%;
        max-width: 100%;
        right: -100%;
    }

    .site-footer .text-md-right{
        text-align: center !important;
    }
}

@media (max-width: 575.98px){
    .container{
        padding-left: 14px;
        padding-right: 14px;
    }

    .main-header-row{
        gap: 8px;
    }

    .site-logo img{
        height: 36px;
    }

    .mobile-nav-toggle{
        width: 36px;
        height: 36px;
    }

    .icon-box{
        width: 34px;
        height: 34px;
    }

    .icon-box i{
        font-size: 17px;
    }

    .hero-slide{
        min-height: 290px;
        padding: 28px 16px;
    }

    .hero-slide-content h2{
        font-size: 24px;
    }

    .hero-slide-content p{
        font-size: 13px;
        max-width: 100%;
    }

    .hero-kicker{
        font-size: 10px;
        padding: 7px 10px;
    }

    .home-products-head h5{
        font-size: 22px;
    }

    .product-image{
        height: 220px;
    }

    .badge-discount,
    .badge-couple{
        font-size: 10px;
        padding: 7px 8px;
    }

    .product-body{
        padding: 12px 12px 14px;
    }

    .btn-load-more{
        width: 100%;
    }
}

/* =========================================================
   AJAX CATEGORY FILTER CLEAN UI
========================================================= */

.active-menu-filter{
    color: var(--bb-red) !important;
}

.desktop-subcat-card.active-menu-filter{
    border-color: var(--bb-red);
    box-shadow: 0 12px 28px rgba(193, 18, 31, .16);
}

.desktop-mega-banner.active-menu-filter{
    border-color: var(--bb-red);
}

.mobile-subcat-item.active-menu-filter{
    color: var(--bb-red) !important;
    font-weight: 800;
}

.no-products-box{
    width: 100%;
    background: #fff;
    border: 1px dashed var(--bb-border);
    border-radius: 18px;
    padding: 45px 20px;
    text-align: center;
    box-shadow: var(--bb-shadow);
}

.no-products-icon{
    width: 58px;
    height: 58px;
    border-radius: 50%;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bb-silver);
    color: var(--bb-red);
    font-size: 22px;
}

.no-products-box h5{
    font-weight: 900;
    color: var(--bb-dark-blue);
    margin-bottom: 8px;
}

.no-products-box p{
    color: var(--bb-muted);
    margin-bottom: 0;
}

/* =========================================================

/* =========================================================
   BLUE BLOOD FINAL CLIENT THEME - CLEAN SINGLE OVERRIDE
   Keep backend/JS logic untouched. Footer top border removed.
========================================================= */

:root{
    --bb-final-red: #d80202;
    --bb-final-blue: #004aad;
    --bb-final-gold: #d7a000;
    --bb-final-silver: #c4cfcc;
    --bb-final-silver-light: #eef2ef;
    --bb-final-silver-mid: #d6dedb;
    --bb-final-silver-dark: #b8c4c0;
}

html,
body{
    min-height: 100% !important;
}

body{
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.92) 0%, rgba(238,242,239,.78) 20%, rgba(199,209,204,.50) 48%, rgba(238,242,239,.74) 75%, rgba(174,184,178,.62) 100%),
        linear-gradient(90deg, #b9c2bd 0%, #eef2ef 18%, #ffffff 50%, #eef2ef 82%, #b9c2bd 100%) !important;
    border: none !important;
    color: var(--bb-text) !important;
}

.bb-page-shell{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow-x: hidden !important;
    background:
        linear-gradient(90deg, rgba(184,194,188,.58) 0%, rgba(245,247,246,.78) 24%, rgba(255,255,255,.86) 50%, rgba(245,247,246,.78) 76%, rgba(184,194,188,.58) 100%) !important;
    border-left: 1mm solid var(--bb-final-red) !important;
    border-right: 1mm solid var(--bb-final-red) !important;
}

.site-header{
    position: sticky !important;
    top: 0 !important;
    z-index: 9990 !important;
    background: transparent !important;
    border: 0 !important;
}

.top-utility-bar.top-notice-bar,
.top-notice-bar,
.blueblood-dialogue-bar,
.bb-notice-bar{
    min-height: 24px !important;
    padding: 4px 0 !important;
    border: 0 !important;
    background:
        linear-gradient(180deg,
            #5f0000 0%,
            #9b0000 12%,
            #d80202 32%,
            #ff3030 48%,
            #d80202 62%,
            #a40000 82%,
            #5c0000 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.52),
        inset 0 7px 12px rgba(255,255,255,.20),
        inset 0 -8px 12px rgba(0,0,0,.45) !important;
    color: rgba(0,52,145,.92) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.18) !important;
}

.bb-notice-text,
.bb-dialogue-text{
    flex: 1 1 auto !important;
    text-align: center !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    letter-spacing: .2px !important;
    color: rgba(0,52,145,.92) !important;
}

.bb-top-currency{
    flex: 0 0 auto !important;
    margin-left: 12px !important;
}

.main-header-wrap,
.main-header-wrap.bb-logo-bar{
    background:
        linear-gradient(90deg, rgba(178,187,181,.68) 0%, rgba(242,245,243,.82) 24%, rgba(255,255,255,.92) 50%, rgba(242,245,243,.82) 76%, rgba(178,187,181,.68) 100%) !important;
    box-shadow: none !important;
    border: 0 !important;
}

.top-utility-bar .container,
.main-header-wrap .container,
.desktop-category-bar .container{
    max-width: 1280px !important;
}

.main-header-row{
    min-height: 84px !important;
}

.site-logo img,
.bb-main-logo{
    height: 70px !important;
    width: auto !important;
    object-fit: contain !important;
    background: transparent !important;
    mix-blend-mode: multiply !important;
}

.header-search .form-control{
    background: rgba(255,255,255,.96) !important;
    border: 2px solid rgba(0,70,163,.22) !important;
    box-shadow: inset 0 1px 4px rgba(0,0,0,.04) !important;
}

.search-btn{
    background:
        linear-gradient(180deg, #fff26a 0%, #d9a800 45%, #9b7200 100%) !important;
    color: #0e47a1 !important;
    border: 1px solid rgba(120,85,0,.35) !important;
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,.65),
        0 3px 8px rgba(0,0,0,.15) !important;
}

.search-btn i{
    color: #0e47a1 !important;
}

.search-btn:hover{
    background:
        linear-gradient(180deg, #ffe84b 0%, #c99800 55%, #7f5e00 100%) !important;
}

.icon-box{
    background: transparent !important;
    border: 0 !important;
    color: #c49a22 !important;
    width: 54px !important;
    height: 54px !important;
}

.icon-box i{
    font-size: 31px !important;
}

.icon-box:hover{
    background: transparent !important;
    color: var(--bb-final-red) !important;
}

.currency-chip{
    background: linear-gradient(180deg, #f8d947 0%, #d8a800 48%, #b58600 100%) !important;
    color: #111 !important;
    border: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35) !important;
    white-space: nowrap !important;
}

.cart-count{
    background: #ff0000 !important;
    color: #fff !important;
}

.mobile-nav-toggle{
    background: transparent !important;
    color: #c49a22 !important;
    border-radius: 0 !important;
}

.desktop-category-bar{
    background:
        linear-gradient(180deg, #e9bd2b 0%, #d8a800 50%, #bd8f00 100%) !important;
    border: 0 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        inset 0 -1px 0 rgba(0,0,0,.10) !important;
}

.desktop-category-item{
    padding: 13px 16px !important;
}

.desktop-category-link{
    color: #0046a3 !important;
    font-size: 17px !important;
    font-weight: 900 !important;
}

.desktop-category-link:hover,
.desktop-category-link.active-menu-filter{
    color: #ff0000 !important;
}

.bb-discount-bar,
.blueblood-discount-bar{
    min-height: 28px !important;
    padding: 3px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    overflow: hidden !important;
    background:
        linear-gradient(180deg,
            #fff06a 0%,
            #e8bd12 18%,
            #9f7600 43%,
            #ffd719 56%,
            #9d7200 78%,
            #e9ba08 100%) !important;
    box-shadow:
        inset 0 4px 7px rgba(255,255,255,.56),
        inset 0 -5px 8px rgba(80,53,0,.55) !important;
}

.bb-discount-bar span,
.blueblood-discount-bar span{
    color: #d80202 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: .5px !important;
    text-transform: lowercase !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.34) !important;
}

.bb-watch-bar,
.blueblood-time-bar{
    min-height: 25px !important;
    padding: 2px 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 26px !important;
    color: #fff !important;
    background:
        linear-gradient(180deg,
            #1c2db6 0%,
            #07158b 31%,
            #02056f 51%,
            #1726a9 78%,
            #3042df 100%) !important;
    box-shadow:
        inset 0 3px 6px rgba(255,255,255,.24),
        inset 0 -5px 8px rgba(0,0,0,.42) !important;
}

.bb-current-time,
.bb-world-watch{
    font-size: 18px !important;
    line-height: 1 !important;
    color: #fff !important;
    font-family: Arial, sans-serif !important;
    font-weight: 400 !important;
}

.bb-discount-time{
    margin-left: auto !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: #fff !important;
}

main.py-4{
    margin: 0 !important;
    padding: 0 !important;
    background:
        linear-gradient(90deg, #b8c2bd 0%, #e7ebe8 20%, #f8faf8 50%, #e7ebe8 80%, #b8c2bd 100%) !important;
}

main.py-4 > .container{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 6mm 6mm 0 !important;
    background:
        linear-gradient(90deg, #b5c0ba 0%, #dfe6e2 16%, #f7f9f8 50%, #dfe6e2 84%, #b5c0ba 100%) !important;
    border-top: 1mm solid var(--bb-final-blue) !important;
    border-left: 1mm solid var(--bb-final-blue) !important;
    border-right: 1mm solid var(--bb-final-blue) !important;
    border-bottom: 0 !important;
    outline: 0 !important;
    box-shadow:
        inset 0 1mm 0 0 var(--bb-final-gold),
        inset 0 2mm 0 0 var(--bb-final-silver),
        inset 0 3mm 0 0 var(--bb-final-red),
        inset 1mm 0 0 0 var(--bb-final-gold),
        inset 2mm 0 0 0 var(--bb-final-silver),
        inset 3mm 0 0 0 var(--bb-final-red),
        inset -1mm 0 0 0 var(--bb-final-gold),
        inset -2mm 0 0 0 var(--bb-final-silver),
        inset -3mm 0 0 0 var(--bb-final-red) !important;
    box-sizing: border-box !important;
}

.home-page-v2{
    margin: 0 !important;
    padding: 4mm 4mm 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background:
        linear-gradient(90deg, #b9c3be 0%, #e3e8e5 20%, #fafcfb 50%, #e3e8e5 80%, #b9c3be 100%) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.hero-slider-section,
.hero-carousel,
.hero-carousel .carousel-inner,
.hero-carousel .carousel-item,
.hero-slide{
    border: 0 !important;
    outline: 0 !important;
}

.hero-slider-section{
    margin: 0 !important;
    padding: 0 !important;
}

.hero-carousel,
.hero-carousel .carousel-inner,
.hero-carousel .carousel-item{
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-shadow: inset 0 0 30px rgba(0,0,0,.15) !important;
}

.hero-slide{
    min-height: 500px !important;
    border-radius: 0 !important;
}

.home-products-section{
    margin-top: 18px !important;
    margin-bottom: 0 !important;
    padding-bottom: 32px !important;
    background: rgba(255,255,255,.55) !important;
    border-radius: 0 !important;
}

.product-card{
    border-radius: 0 !important;
    border-color: rgba(0,70,163,.18) !important;
}

.product-title,
.home-products-head h5{
    color: var(--bb-final-blue) !important;
}

.section-mini-title{
    color: var(--bb-final-red) !important;
}

.product-card .btn-primary{
    background: var(--bb-final-red) !important;
    border: 0 !important;
}

/* footer is connected with body: NO TOP BORDER, only left/right/bottom */
.site-footer{
    position: relative !important;
    margin: 0 !important;
    padding: 20px 15px 28px !important;
    background: linear-gradient(180deg, #003c9f 0%, #001f70 45%, #000d45 100%) !important;
    color: #ffffff !important;
    border-top: 0 !important;
    border-left: 1mm solid var(--bb-final-blue) !important;
    border-right: 1mm solid var(--bb-final-blue) !important;
    border-bottom: 1mm solid var(--bb-final-blue) !important;
    outline: 0 !important;
    box-shadow:
        inset 1mm 0 0 0 var(--bb-final-gold),
        inset 2mm 0 0 0 var(--bb-final-silver),
        inset 3mm 0 0 0 var(--bb-final-red),
        inset -1mm 0 0 0 var(--bb-final-gold),
        inset -2mm 0 0 0 var(--bb-final-silver),
        inset -3mm 0 0 0 var(--bb-final-red),
        inset 0 -1mm 0 0 var(--bb-final-gold),
        inset 0 -2mm 0 0 var(--bb-final-silver),
        inset 0 -3mm 0 0 var(--bb-final-red),
        inset 0 4px 8px rgba(255,255,255,.18),
        inset 0 -5px 10px rgba(0,0,0,.38) !important;
    overflow: hidden !important;
}

.site-footer::before,
.site-footer::after{
    content: none !important;
    display: none !important;
}

.site-footer .container{
    max-width: 100% !important;
    position: relative !important;
    z-index: 2 !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    padding-bottom: 10px !important;
}

.footer-title{
    color: #f5c400 !important;
    font-weight: 900 !important;
    letter-spacing: .5px !important;
    text-transform: uppercase !important;
}

.site-footer p,
.site-footer li,
.site-footer a{
    color: #ffffff !important;
}

.site-footer a:hover{
    color: #f5c400 !important;
}

.footer-social a{
    background: linear-gradient(180deg, #fff26a 0%, #d9a800 50%, #8f6500 100%) !important;
    color: #003c9f !important;
    border: 1px solid rgba(255,255,255,.35) !important;
    box-shadow: inset 0 2px 4px rgba(255,255,255,.55) !important;
}

.footer-social a i{
    color: #003c9f !important;
}

.footer-social a:hover{
    transform: translateY(-2px) !important;
    background: linear-gradient(180deg, #ffef5a 0%, #c99700 60%, #755400 100%) !important;
}

.bb-bottom-discount,
.bb-bottom-watch{
    display: none !important;
}

@media (max-width: 991.98px){
    .bb-notice-text,
    .bb-dialogue-text{
        font-size: 12px !important;
    }

    .bb-top-currency{
        display: none !important;
    }

    .main-header-row{
        min-height: 64px !important;
        gap: 8px !important;
    }

    .site-logo img,
    .bb-main-logo{
        height: 46px !important;
    }

    .icon-box{
        width: 39px !important;
        height: 39px !important;
    }

    .icon-box i{
        font-size: 22px !important;
    }

    .bb-discount-bar span,
    .blueblood-discount-bar span{
        font-size: 15px !important;
    }

    .bb-watch-bar,
    .blueblood-time-bar{
        padding: 2px 10px !important;
        gap: 8px !important;
    }

    .bb-current-time,
    .bb-world-watch{
        font-size: 13px !important;
    }

    .bb-discount-time{
        font-size: 12px !important;
    }

    main.py-4 > .container{
        padding: 3mm 3mm 0 !important;
        border-top-width: .75mm !important;
        border-left-width: .75mm !important;
        border-right-width: .75mm !important;
        box-shadow:
            inset 0 .75mm 0 0 var(--bb-final-gold),
            inset 0 1.5mm 0 0 var(--bb-final-silver),
            inset 0 2.25mm 0 0 var(--bb-final-red),
            inset .75mm 0 0 0 var(--bb-final-gold),
            inset 1.5mm 0 0 0 var(--bb-final-silver),
            inset 2.25mm 0 0 0 var(--bb-final-red),
            inset -.75mm 0 0 0 var(--bb-final-gold),
            inset -1.5mm 0 0 0 var(--bb-final-silver),
            inset -2.25mm 0 0 0 var(--bb-final-red) !important;
    }

    .home-page-v2{
        padding: 3mm 3mm 0 !important;
    }

    .hero-slide{
        min-height: 340px !important;
        padding: 34px 20px !important;
    }

    .site-footer{
        border-left-width: .75mm !important;
        border-right-width: .75mm !important;
        border-bottom-width: .75mm !important;
        box-shadow:
            inset .75mm 0 0 0 var(--bb-final-gold),
            inset 1.5mm 0 0 0 var(--bb-final-silver),
            inset 2.25mm 0 0 0 var(--bb-final-red),
            inset -.75mm 0 0 0 var(--bb-final-gold),
            inset -1.5mm 0 0 0 var(--bb-final-silver),
            inset -2.25mm 0 0 0 var(--bb-final-red),
            inset 0 -.75mm 0 0 var(--bb-final-gold),
            inset 0 -1.5mm 0 0 var(--bb-final-silver),
            inset 0 -2.25mm 0 0 var(--bb-final-red) !important;
    }

    .site-footer .container{
        padding-left: 22px !important;
        padding-right: 22px !important;
    }
}

@media (max-width: 575.98px){
    .bb-discount-bar span:nth-child(3),
    .blueblood-discount-bar span:nth-child(3){
        display: none !important;
    }

    .bb-discount-bar span,
    .blueblood-discount-bar span{
        font-size: 13px !important;
    }

    main.py-4 > .container{
        padding: 2mm 2mm 0 !important;
    }

    .home-page-v2{
        padding: 2mm 2mm 0 !important;
    }

    .site-footer .container{
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}


/* =========================================================
   FINAL UPDATE: DISCOUNT TIME IN GOLD BAR + MENU IN BLUE BAR
   Backend/JS logic untouched. Category mega menu hover restored.
========================================================= */

/* No separate blue watch/time bar now. Discount time moved to gold bar. */
.bb-watch-bar{
    display: none !important;
}

/* Golden discount bar now contains discount text + discount time */
.bb-discount-with-time{
    min-height: 32px !important;
    padding: 3px 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 10030 !important;
}

.bb-discount-left{
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    gap: 28px !important;
    min-width: 0 !important;
}

.bb-discount-left span{
    color: #d80202 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: .5px !important;
    text-transform: lowercase !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.34) !important;
}

.bb-discount-time-gold{
    flex: 0 0 auto !important;
    color: #004aad !important;
    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.45) !important;
}

/* Blue menu bar directly below discount bar */
.bb-blue-menu-bar{
    background:
        linear-gradient(180deg,
            #1c2db6 0%,
            #07158b 31%,
            #02056f 51%,
            #1726a9 78%,
            #3042df 100%) !important;
    border: 0 !important;
    box-shadow:
        inset 0 3px 6px rgba(255,255,255,.24),
        inset 0 -5px 8px rgba(0,0,0,.42) !important;
    position: relative !important;
    z-index: 10040 !important;
    overflow: visible !important;
}

.bb-blue-menu-bar .container,
.bb-blue-menu-bar .desktop-category-list,
.bb-blue-menu-bar .desktop-category-item{
    overflow: visible !important;
}

.bb-blue-menu-bar .desktop-category-item{
    padding: 8px 16px !important;
    position: relative !important;
}

.bb-blue-menu-bar .desktop-category-link{
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.35) !important;
}

.bb-blue-menu-bar .desktop-category-item:hover .desktop-category-link,
.bb-blue-menu-bar .desktop-category-link:hover,
.bb-blue-menu-bar .desktop-category-link.active-menu-filter{
    color: #f5c400 !important;
}

/* Restore mega menu hover after moving menu to blue bar */
.bb-blue-menu-bar .desktop-mega-menu{
    display: none !important;
    top: 100% !important;
    z-index: 20000 !important;
}

.bb-blue-menu-bar .desktop-category-item:hover .desktop-mega-menu{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

body.menu-filtering .bb-blue-menu-bar .desktop-mega-menu,
body.menu-filtering .bb-blue-menu-bar .desktop-category-item:hover .desktop-mega-menu{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Mobile menu remains functional but follows blue theme */
.mobile-mega-nav{
    background: #07158b !important;
    border: 0 !important;
}

.mobile-nav-card,
.mobile-nav-card .card-header{
    background: transparent !important;
    border-color: rgba(255,255,255,.18) !important;
}

.mobile-nav-btn{
    color: #ffffff !important;
}

.mobile-subcat-item{
    color: #f5c400 !important;
}

/* No extra gap before content */
.site-header + main.py-4,
main.py-4{
    margin-top: 0 !important;
}

@media (max-width: 991.98px){
    .bb-discount-with-time{
        padding: 3px 10px !important;
        gap: 8px !important;
    }

    .bb-discount-left{
        gap: 10px !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
    }

    .bb-discount-left span{
        font-size: 14px !important;
    }

    .bb-discount-time-gold{
        font-size: 12px !important;
    }
}

@media (max-width: 575.98px){
    .bb-discount-left span:nth-child(3){
        display: none !important;
    }
}

/* =========================================================
   FINAL HERO TIGHT FIT UPDATE
   Remove only the extra outer space around homepage banner.
   Backend/JS/menu/cart/coupon logic untouched.
========================================================= */

/* remove frame inner padding that was creating space around hero */
main.py-4 > .container{
    padding: 0 !important;
}

/* remove homepage wrapper padding only; border/frame remains from main/footer */
.home-page-v2{
    padding: 0 !important;
}

/* hero must touch the content frame with no outside gap */
.hero-slider-section{
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.hero-slider-section > .container,
.hero-slider-section .container{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.hero-carousel,
.hero-carousel .carousel-inner,
.hero-carousel .carousel-item{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* keep hero text spacing intact; only remove the OUTSIDE gap */
.hero-slide{
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 64px 70px !important;
}

/* product area gets safe inner spacing back, so only banner is tight */
.home-products-section{
    margin: 18px 6mm 0 !important;
    padding-bottom: 32px !important;
}

@media (max-width: 991.98px){
    main.py-4 > .container,
    .home-page-v2{
        padding: 0 !important;
    }

    .hero-slide{
        padding: 34px 20px !important;
    }

    .home-products-section{
        margin: 14px 3mm 0 !important;
    }
}

@media (max-width: 575.98px){
    .home-products-section{
        margin: 12px 2mm 0 !important;
    }
}

/* =========================================================
   PRODUCT DETAILS PAGE + IMAGE MAGNIFIER
========================================================= */
.product-details-page{ padding:0!important; margin:0!important; }
.bb-product-breadcrumb{ margin:0 0 16px!important; }
.bb-product-breadcrumb .breadcrumb{ background:rgba(255,255,255,.68)!important; border-radius:0!important; border:1px solid rgba(0,74,173,.15); margin-bottom:0!important; }
.bb-product-breadcrumb a{ color:var(--bb-final-blue,#004aad); font-weight:700; }
.bb-product-detail-card{ background:rgba(255,255,255,.82); border:1px solid rgba(0,74,173,.16); box-shadow:0 16px 34px rgba(0,0,0,.08); padding:24px; }
.bb-product-gallery{ background:linear-gradient(90deg,#dfe6e2,#fff,#dfe6e2); border:1px solid rgba(0,74,173,.15); padding:14px; }
.bb-main-image-wrap{ position:relative; overflow:hidden; background:#eef2ef; min-height:500px; display:flex; align-items:center; justify-content:center; cursor:crosshair; }
.bb-main-product-image{ width:100%; height:500px; object-fit:contain; display:block; }
.bb-detail-discount-badge,.bb-detail-couple-badge{ position:absolute; top:14px; z-index:8; border-radius:999px; padding:8px 12px; font-size:12px; font-weight:900; color:#fff; }
.bb-detail-discount-badge{ left:14px; background:#d80202; }
.bb-detail-couple-badge{ right:14px; background:#004aad; }
.bb-zoom-lens{ position:absolute; width:120px; height:120px; border:2px solid #d7a000; background:rgba(255,255,255,.22); display:none; pointer-events:none; z-index:15; }
.bb-zoom-result{ position:absolute; top:16px; right:16px; width:280px; height:280px; border:4px solid #004aad; background-repeat:no-repeat; background-color:#fff; box-shadow:0 14px 38px rgba(0,0,0,.25); display:none; z-index:20; }
.bb-main-image-wrap:hover .bb-zoom-lens,.bb-main-image-wrap:hover .bb-zoom-result{ display:block; }
.bb-gallery-thumbs{ display:flex; gap:10px; margin-top:12px; overflow-x:auto; padding-bottom:4px; }
.bb-gallery-thumb{ width:78px; height:78px; flex:0 0 78px; border:2px solid transparent; background:#fff; padding:2px; cursor:pointer; }
.bb-gallery-thumb.active,.bb-gallery-thumb:hover{ border-color:#d7a000; }
.bb-gallery-thumb img{ width:100%; height:100%; object-fit:cover; }
.bb-gallery-hint{ margin-top:8px; color:#6c7583; font-size:13px; }
.bb-product-info{ height:100%; display:flex; flex-direction:column; }
.bb-detail-category{ color:#6c7583; font-weight:700; margin-bottom:8px; }
.bb-detail-category span{ color:#004aad; }
.bb-detail-title{ font-size:34px; line-height:1.18; font-weight:900; color:#004aad; margin-bottom:12px; }
.bb-detail-sku-stock{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.bb-detail-sku-stock span{ background:#fff; border:1px solid rgba(0,74,173,.14); padding:8px 12px; font-size:14px; }
.bb-detail-price-box{ background:linear-gradient(90deg,#eef2ef,#fff,#eef2ef); border-left:5px solid #d80202; padding:18px; margin-bottom:18px; }
.bb-price-old{ font-size:20px; color:#8a9099; text-decoration:line-through; font-weight:700; }
.bb-price-new,.bb-price-regular{ display:inline-block; font-size:34px; color:#d80202; font-weight:900; margin-left:10px; }
.bb-price-regular{ margin-left:0; }
.bb-save-text{ margin-top:7px; color:#198754; font-weight:800; }
.bb-detail-short{ color:#596577; font-size:16px; line-height:1.7; }
.bb-detail-actions{ display:flex; flex-wrap:wrap; gap:12px; margin:18px 0; }
.bb-detail-cart-btn,.bb-detail-back-btn{ border-radius:999px; padding:12px 24px; font-weight:900; }
.bb-detail-cart-btn{ background:#d80202; border:0; color:#fff; }
.bb-detail-cart-btn:hover{ background:#b90000; color:#fff; }
.bb-detail-back-btn{ background:#fff; border:1px solid rgba(0,74,173,.25); color:#004aad; }
.bb-detail-back-btn:hover{ background:#004aad; color:#fff; }
.bb-product-meta-box{ margin-top:auto; background:rgba(255,255,255,.70); border:1px solid rgba(0,74,173,.14); padding:14px; }
.bb-product-meta-box div{ padding:7px 0; border-bottom:1px dashed rgba(0,0,0,.12); }
.bb-product-meta-box div:last-child{ border-bottom:0; }
.bb-description-box{ margin-top:24px; padding:20px; background:rgba(255,255,255,.76); border:1px solid rgba(0,74,173,.14); }
.bb-description-box h4{ color:#004aad; font-weight:900; margin-bottom:12px; }
.bb-description-content{ color:#485466; line-height:1.8; font-size:15px; }
.bb-related-section{ margin-top:26px; background:rgba(255,255,255,.68); border:1px solid rgba(0,74,173,.14); padding:18px; }
.bb-related-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:14px; margin-bottom:14px; }
.bb-related-head span{ color:#d80202; font-weight:900; text-transform:uppercase; font-size:12px; }
.bb-related-head h3{ color:#004aad; font-size:26px; font-weight:900; margin:0; }
.bb-related-head a{ color:#004aad; font-weight:800; }
.bb-related-thumb-row{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.bb-related-thumb-card{ background:#fff; border:1px solid rgba(0,74,173,.14); color:#1d2430; transition:transform .16s ease,box-shadow .16s ease; }
.bb-related-thumb-card:hover{ transform:translateY(-3px); box-shadow:0 12px 24px rgba(0,0,0,.12); color:#004aad; }
.bb-related-img{ position:relative; height:180px; overflow:hidden; background:#eef2ef; }
.bb-related-img img{ width:100%; height:100%; object-fit:cover; }
.bb-related-img span{ position:absolute; top:8px; left:8px; background:#d80202; color:#fff; padding:5px 8px; border-radius:999px; font-size:11px; font-weight:900; }
.bb-related-info{ padding:10px; }
.bb-related-info strong{ display:block; font-size:14px; line-height:1.35; min-height:38px; }
.bb-related-info small{ display:block; color:#d80202; font-size:15px; font-weight:900; margin-top:6px; }
.product-title a{ color:inherit; }
.product-title a:hover{ color:#d80202; }
@media (max-width:991.98px){ .bb-product-detail-card{padding:14px;} .bb-main-image-wrap{min-height:360px;} .bb-main-product-image{height:360px;} .bb-zoom-result,.bb-zoom-lens{display:none!important;} .bb-detail-title{font-size:26px;} .bb-price-new,.bb-price-regular{font-size:28px;} .bb-related-thumb-row{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:575.98px){ .bb-product-detail-card{padding:10px;} .bb-main-image-wrap{min-height:280px;} .bb-main-product-image{height:280px;} .bb-detail-title{font-size:22px;} .bb-related-thumb-row{grid-template-columns:1fr;} }

/* =========================================================
   FINAL PATCH: no page border + account dropdown fix
   Date: current task
   Purpose:
   1) Remove four-side decorative border from homepage/body/footer area.
   2) Keep header, discount bar, blue menu, content and footer in one clean container.
   3) Keep account dropdown above menu/hero and usable on mobile touch.
   ========================================================= */

:root{
    --bb-blue: #003b99;
    --bb-deep-blue: #001b66;
    --bb-gold: #d6a400;
    --bb-red: #d80202;
    --bb-silver-bg: #dce5e2;
}

html,
body{
    overflow-x: hidden !important;
    background: linear-gradient(90deg, #c6d1ce 0%, #edf2f1 18%, #f9fbfb 50%, #edf2f1 82%, #c6d1ce 100%) !important;
}

/* Keep the whole frontend as one clean full-width shell, without old side borders */
.bb-page-shell,
.site-header,
main,
.main-content,
.page-content,
.home-page-v2,
.home-products-section,
.site-footer,
.bb-footer{
    max-width: 100% !important;
    width: 100% !important;
}

/* Remove all previous decorative frame/border layers used around body/footer */
.bb-page-shell,
.bb-page-shell::before,
.bb-page-shell::after,
.blueblood-page-frame,
.blueblood-page-frame::before,
.blueblood-page-frame::after,
.blueblood-content-frame,
.blueblood-content-frame::before,
.blueblood-content-frame::after,
.bb-content-frame,
.bb-content-frame::before,
.bb-content-frame::after,
.bb-border-frame,
.bb-border-frame::before,
.bb-border-frame::after,
.home-page-v2,
.home-page-v2::before,
.home-page-v2::after,
main.py-4,
main.py-4::before,
main.py-4::after,
.site-footer,
.site-footer::before,
.site-footer::after,
.bb-footer,
.bb-footer::before,
.bb-footer::after{
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.bb-page-shell::before,
.bb-page-shell::after,
.blueblood-page-frame::before,
.blueblood-page-frame::after,
.blueblood-content-frame::before,
.blueblood-content-frame::after,
.bb-content-frame::before,
.bb-content-frame::after,
.bb-border-frame::before,
.bb-border-frame::after,
.home-page-v2::before,
.home-page-v2::after,
main.py-4::before,
main.py-4::after,
.site-footer::before,
.site-footer::after,
.bb-footer::before,
.bb-footer::after{
    content: none !important;
    display: none !important;
}

/* Body/content area remains silver gradient but without red/blue/gold side strips */
main.py-4,
.home-page-v2,
.home-products-section{
    background: linear-gradient(90deg, #c7d3d0 0%, #edf2f1 18%, #ffffff 50%, #edf2f1 82%, #c7d3d0 100%) !important;
}

main.py-4{
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Hero must stay tight under menu without outer decorative border */
.home-hero-wrapper,
.home-hero-wrapper::before,
.home-hero-wrapper::after,
.hero-carousel-shell,
.hero-carousel-shell::before,
.hero-carousel-shell::after,
.home-hero-carousel,
.home-hero-carousel::before,
.home-hero-carousel::after{
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.home-hero-wrapper::before,
.home-hero-wrapper::after,
.hero-carousel-shell::before,
.hero-carousel-shell::after,
.home-hero-carousel::before,
.home-hero-carousel::after{
    content: none !important;
    display: none !important;
}

.home-hero-wrapper,
.hero-carousel-shell,
.home-hero-carousel{
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-radius: 0 !important;
}

/* Account dropdown: always above blue menu / mega menu / banner */
.site-header,
.main-header-wrap,
.bb-logo-bar,
.main-header-row,
.header-right-icons,
.account-box{
    overflow: visible !important;
}

.site-header{
    position: relative !important;
    z-index: 5000 !important;
}

.bb-logo-bar{
    position: relative !important;
    z-index: 9000 !important;
}

.desktop-category-bar,
.bb-blue-menu-bar{
    position: relative !important;
    z-index: 5000 !important;
}

.desktop-mega-menu{
    z-index: 7000 !important;
}

.account-box{
    position: relative !important;
    z-index: 12000 !important;
    cursor: pointer !important;
}

.account-panel{
    display: block !important;
    position: absolute !important;
    top: calc(100% + 12px) !important;
    right: 50% !important;
    transform: translateX(50%) translateY(10px) !important;
    z-index: 20000 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
}

.account-panel::before{
    content: "" !important;
    position: absolute !important;
    top: -10px !important;
    right: 50% !important;
    transform: translateX(50%) !important;
    border-left: 10px solid transparent !important;
    border-right: 10px solid transparent !important;
    border-bottom: 10px solid #ffffff !important;
}

.account-box:hover .account-panel,
.account-box:focus-within .account-panel,
.account-box.account-open .account-panel{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(50%) translateY(0) !important;
}

.account-panel-inner{
    position: relative !important;
    z-index: 20001 !important;
}

@media (max-width: 991.98px){
    .account-panel{
        position: fixed !important;
        top: 118px !important;
        right: 12px !important;
        left: 12px !important;
        width: auto !important;
        max-width: none !important;
        transform: translateY(10px) !important;
    }

    .account-panel::before{
        display: none !important;
        content: none !important;
    }

    .account-box:hover .account-panel,
    .account-box:focus-within .account-panel,
    .account-box.account-open .account-panel{
        transform: translateY(0) !important;
    }
}

/*
|--------------------------------------------------------------------------
| ACCOUNT DROPDOWN FINAL FIX
|--------------------------------------------------------------------------
| Purpose:
| 1) PC screen: login/register dropdown will stay ABOVE discount/menu/hero area.
| 2) PC screen: dropdown will open below user icon but will NOT touch discount bar.
| 3) Mobile screen: dropdown will not become thin/narrow; it will open as a proper panel.
| 4) Existing backend/cart/category/coupon logic is untouched.
|
| Paste this code at the VERY END of:
| public/frontend/css/frontend.css
|--------------------------------------------------------------------------
*/

/* Header/account parent must allow absolute dropdown layering */
.bb-header-row,
.bb-header-inner,
.bb-action-icons,
.bb-user-menu,
.account-dropdown-wrapper,
.user-dropdown-wrapper,
.user-menu-wrapper,
.header-user-dropdown,
.user-menu-area {
    position: relative !important;
}

/* Keep header layers above discount/menu/hero */
.bb-top-notice,
.bb-header-row,
.bb-header-inner,
.bb-header-section,
.header-area,
.site-header,
.main-header {
    position: relative !important;
    z-index: 9990 !important;
}

/* Discount + blue menu should stay below account dropdown */
.bb-discount-bar,
.bb-main-menu-bar,
.bb-category-menu,
.discount-strip,
.discount-bar,
.main-menu-bar,
.category-menu-bar {
    position: relative !important;
    z-index: 100 !important;
}

/* Main account dropdown panel - desktop */
.bb-account-dropdown,
.account-dropdown,
.user-dropdown,
.user-menu-dropdown,
.customer-dropdown,
.login-register-dropdown,
.header-account-dropdown {
    position: absolute !important;
    top: calc(100% + 18px) !important;
    right: 0 !important;
    left: auto !important;

    width: 380px !important;
    min-width: 380px !important;
    max-width: 380px !important;

    z-index: 999999 !important;
    background: #ffffff !important;
    border-radius: 0 0 18px 18px !important;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.22) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;

    overflow: visible !important;
    transform: none !important;
}

/* Small arrow above dropdown */
.bb-account-dropdown::before,
.account-dropdown::before,
.user-dropdown::before,
.user-menu-dropdown::before,
.customer-dropdown::before,
.login-register-dropdown::before,
.header-account-dropdown::before {
    content: "" !important;
    position: absolute !important;
    top: -13px !important;
    right: 185px !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 14px solid transparent !important;
    border-right: 14px solid transparent !important;
    border-bottom: 14px solid #ffffff !important;
    z-index: 1000000 !important;
}

/* Prevent dropdown disappearing while moving mouse from icon to panel */
.bb-user-menu::after,
.account-dropdown-wrapper::after,
.user-dropdown-wrapper::after,
.user-menu-wrapper::after,
.header-user-dropdown::after,
.user-menu-area::after {
    content: "" !important;
    position: absolute !important;
    top: 100% !important;
    right: -20px !important;
    width: 430px !important;
    height: 30px !important;
    background: transparent !important;
    z-index: 999998 !important;
}

/* Make buttons fit nicely inside dropdown */
.bb-account-dropdown .btn,
.account-dropdown .btn,
.user-dropdown .btn,
.user-menu-dropdown .btn,
.customer-dropdown .btn,
.login-register-dropdown .btn,
.header-account-dropdown .btn {
    white-space: nowrap !important;
}

/* Keep dropdown contents normal width */
.bb-account-dropdown *,
.account-dropdown *,
.user-dropdown *,
.user-menu-dropdown *,
.customer-dropdown *,
.login-register-dropdown *,
.header-account-dropdown * {
    box-sizing: border-box !important;
}

/* Tablet/mobile fix */
@media (max-width: 991.98px) {
    .bb-account-dropdown,
    .account-dropdown,
    .user-dropdown,
    .user-menu-dropdown,
    .customer-dropdown,
    .login-register-dropdown,
    .header-account-dropdown {
        position: fixed !important;
        top: 132px !important;
        right: 12px !important;
        left: auto !important;

        width: calc(100vw - 24px) !important;
        min-width: 0 !important;
        max-width: 360px !important;

        border-radius: 16px !important;
        z-index: 999999 !important;
        transform: none !important;
    }

    .bb-account-dropdown::before,
    .account-dropdown::before,
    .user-dropdown::before,
    .user-menu-dropdown::before,
    .customer-dropdown::before,
    .login-register-dropdown::before,
    .header-account-dropdown::before {
        top: -12px !important;
        right: 54px !important;
    }

    .bb-user-menu::after,
    .account-dropdown-wrapper::after,
    .user-dropdown-wrapper::after,
    .user-menu-wrapper::after,
    .header-user-dropdown::after,
    .user-menu-area::after {
        display: none !important;
    }
}

/* Extra small mobile */
@media (max-width: 575.98px) {
    .bb-account-dropdown,
    .account-dropdown,
    .user-dropdown,
    .user-menu-dropdown,
    .customer-dropdown,
    .login-register-dropdown,
    .header-account-dropdown {
        top: 118px !important;
        right: 10px !important;
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .bb-account-dropdown .d-flex,
    .account-dropdown .d-flex,
    .user-dropdown .d-flex,
    .user-menu-dropdown .d-flex,
    .customer-dropdown .d-flex,
    .login-register-dropdown .d-flex,
    .header-account-dropdown .d-flex {
        flex-wrap: nowrap !important;
    }

    .bb-account-dropdown .btn,
    .account-dropdown .btn,
    .user-dropdown .btn,
    .user-menu-dropdown .btn,
    .customer-dropdown .btn,
    .login-register-dropdown .btn,
    .header-account-dropdown .btn {
        min-width: 0 !important;
        flex: 1 1 50% !important;
        font-size: 15px !important;
        padding: 10px 8px !important;
    }
}

/* =========================================================
   MOBILE ACCOUNT DROPDOWN FINAL FIX
   Paste this block at the VERY END of public/frontend/css/frontend.css
   Purpose:
   - Account/Login dropdown will not become thin on mobile
   - Dropdown will stay above discount/menu/hero sections
   - Works for hover + click/touch based dropdowns
   ========================================================= */

/* Header/dropdown layer must stay above discount/menu/hero */
.bb-header,
.bb-main-header,
.header-area,
.frontend-header,
.site-header,
.top-header,
.main-header,
.header-main,
.bb-logo-search-row,
.bb-header-tools,
.account-dropdown-wrap,
.account-menu-wrap,
.user-menu-wrap,
.user-dropdown-wrap,
.user-icon-wrap,
.account-wrapper,
.user-account,
.account-box,
.bb-account,
.header-user,
.header-user-box,
.header-user-dropdown {
    position: relative;
    z-index: 999999 !important;
}

/* Discount/menu/hero must stay lower than account dropdown */
.bb-discount-bar,
.discount-bar,
.discount-strip,
.bb-main-menu,
.main-menu-bar,
.category-menu-bar,
.bb-menu-bar,
.home-hero,
.hero-carousel,
#homeHeroCarousel,
.carousel,
.home-products-section {
    position: relative;
    z-index: 1 !important;
}

/* Desktop/tablet dropdown base */
.account-dropdown,
.user-dropdown,
.login-register-dropdown,
.login-register-box,
.account-hover-box,
.bb-account-dropdown,
.user-panel,
.account-panel,
.header-account-dropdown,
#accountDropdown,
#userDropdown,
.user-menu-dropdown {
    z-index: 1000000 !important;
    min-width: 360px !important;
    width: 360px !important;
    max-width: calc(100vw - 24px) !important;
    overflow: visible !important;
    white-space: normal !important;
}

/* Keep dropdown visible while mouse/touch is inside parent or box */
.account-dropdown-wrap:hover .account-dropdown,
.account-dropdown-wrap:focus-within .account-dropdown,
.user-dropdown-wrap:hover .user-dropdown,
.user-dropdown-wrap:focus-within .user-dropdown,
.user-icon-wrap:hover .login-register-dropdown,
.user-icon-wrap:focus-within .login-register-dropdown,
.account-wrapper:hover .account-hover-box,
.account-wrapper:focus-within .account-hover-box,
.header-user:hover .header-account-dropdown,
.header-user:focus-within .header-account-dropdown,
.bb-account:hover .bb-account-dropdown,
.bb-account:focus-within .bb-account-dropdown {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Add invisible bridge so dropdown does not close while moving cursor */
.account-dropdown-wrap::after,
.user-dropdown-wrap::after,
.user-icon-wrap::after,
.account-wrapper::after,
.header-user::after,
.bb-account::after {
    content: "";
    position: absolute;
    left: -20px;
    right: -20px;
    top: 100%;
    height: 28px;
    z-index: 999998;
}

/* Very important mobile fix */
@media (max-width: 767.98px) {
    .bb-header,
    .bb-main-header,
    .header-area,
    .frontend-header,
    .site-header,
    .top-header,
    .main-header,
    .header-main,
    .bb-logo-search-row {
        overflow: visible !important;
        z-index: 999999 !important;
    }

    .bb-header-tools,
    .account-dropdown-wrap,
    .account-menu-wrap,
    .user-menu-wrap,
    .user-dropdown-wrap,
    .user-icon-wrap,
    .account-wrapper,
    .user-account,
    .account-box,
    .bb-account,
    .header-user {
        position: static !important;
        overflow: visible !important;
        z-index: 999999 !important;
    }

    .account-dropdown,
    .user-dropdown,
    .login-register-dropdown,
    .login-register-box,
    .account-hover-box,
    .bb-account-dropdown,
    .user-panel,
    .account-panel,
    .header-account-dropdown,
    #accountDropdown,
    #userDropdown,
    .user-menu-dropdown {
        position: fixed !important;
        top: 118px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: calc(100vw - 28px) !important;
        min-width: calc(100vw - 28px) !important;
        max-width: calc(100vw - 28px) !important;
        padding: 16px !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        box-shadow: 0 18px 45px rgba(0,0,0,0.30) !important;
        z-index: 1000000 !important;
        overflow: visible !important;
        white-space: normal !important;
    }

    /* Dropdown internal buttons full-width on mobile */
    .account-dropdown .btn,
    .user-dropdown .btn,
    .login-register-dropdown .btn,
    .login-register-box .btn,
    .account-hover-box .btn,
    .bb-account-dropdown .btn,
    .header-account-dropdown .btn,
    #accountDropdown .btn,
    #userDropdown .btn,
    .user-menu-dropdown .btn,
    .account-dropdown a,
    .user-dropdown a,
    .login-register-dropdown a,
    .login-register-box a,
    .account-hover-box a,
    .bb-account-dropdown a,
    .header-account-dropdown a,
    #accountDropdown a,
    #userDropdown a,
    .user-menu-dropdown a {
        max-width: 100% !important;
        white-space: normal !important;
    }

    /* If bootstrap row/col inside dropdown causes thin layout */
    .account-dropdown .row,
    .user-dropdown .row,
    .login-register-dropdown .row,
    .login-register-box .row,
    .account-hover-box .row,
    .bb-account-dropdown .row,
    .header-account-dropdown .row,
    #accountDropdown .row,
    #userDropdown .row,
    .user-menu-dropdown .row {
        margin-left: -5px !important;
        margin-right: -5px !important;
    }

    .account-dropdown [class*="col-"],
    .user-dropdown [class*="col-"],
    .login-register-dropdown [class*="col-"],
    .login-register-box [class*="col-"],
    .account-hover-box [class*="col-"],
    .bb-account-dropdown [class*="col-"],
    .header-account-dropdown [class*="col-"],
    #accountDropdown [class*="col-"],
    #userDropdown [class*="col-"],
    .user-menu-dropdown [class*="col-"] {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}

/* Extra small mobile */
@media (max-width: 420px) {
    .account-dropdown,
    .user-dropdown,
    .login-register-dropdown,
    .login-register-box,
    .account-hover-box,
    .bb-account-dropdown,
    .user-panel,
    .account-panel,
    .header-account-dropdown,
    #accountDropdown,
    #userDropdown,
    .user-menu-dropdown {
        top: 108px !important;
        width: calc(100vw - 18px) !important;
        min-width: calc(100vw - 18px) !important;
        max-width: calc(100vw - 18px) !important;
        padding: 14px !important;
    }
}

/* =========================================================
   MOBILE ACCOUNT DROPDOWN POSITION FIX
   Paste this at the VERY END of public/frontend/css/frontend.css
========================================================= */

.bb-account-wrap,
.bb-user-wrap,
.user-menu-wrap,
.account-menu-wrap,
.header-user-wrap,
.user-dropdown-wrap,
.account-dropdown-wrap,
.user-icon-wrap,
.account-icon-wrap {
    position: relative !important;
    z-index: 999999 !important;
}

.bb-account-dropdown,
.account-dropdown,
.user-dropdown,
.user-menu-dropdown,
.header-account-dropdown,
.profile-dropdown,
.login-register-dropdown,
.bb-login-dropdown {
    z-index: 999999 !important;
}

@media (max-width: 767.98px) {
    .bb-account-dropdown,
    .account-dropdown,
    .user-dropdown,
    .user-menu-dropdown,
    .header-account-dropdown,
    .profile-dropdown,
    .login-register-dropdown,
    .bb-login-dropdown {
        position: fixed !important;
        top: 330px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: calc(100vw - 32px) !important;
        max-width: 330px !important;
        min-width: 280px !important;
        margin: 0 !important;
        padding: 18px 14px !important;
        box-sizing: border-box !important;
        border-radius: 14px !important;
        z-index: 999999 !important;
        overflow: visible !important;
    }

    .bb-account-dropdown::before,
    .bb-account-dropdown::after,
    .account-dropdown::before,
    .account-dropdown::after,
    .user-dropdown::before,
    .user-dropdown::after,
    .user-menu-dropdown::before,
    .user-menu-dropdown::after,
    .header-account-dropdown::before,
    .header-account-dropdown::after,
    .profile-dropdown::before,
    .profile-dropdown::after,
    .login-register-dropdown::before,
    .login-register-dropdown::after,
    .bb-login-dropdown::before,
    .bb-login-dropdown::after {
        display: none !important;
        content: none !important;
    }

    .bb-account-dropdown .btn,
    .account-dropdown .btn,
    .user-dropdown .btn,
    .user-menu-dropdown .btn,
    .header-account-dropdown .btn,
    .profile-dropdown .btn,
    .login-register-dropdown .btn,
    .bb-login-dropdown .btn,
    .bb-account-dropdown button,
    .account-dropdown button,
    .user-dropdown button,
    .user-menu-dropdown button,
    .header-account-dropdown button,
    .profile-dropdown button,
    .login-register-dropdown button,
    .bb-login-dropdown button {
        white-space: normal !important;
    }
}

@media (max-width: 420px) {
    .bb-account-dropdown,
    .account-dropdown,
    .user-dropdown,
    .user-menu-dropdown,
    .header-account-dropdown,
    .profile-dropdown,
    .login-register-dropdown,
    .bb-login-dropdown {
        top: 318px !important;
        width: calc(100vw - 24px) !important;
        max-width: 310px !important;
        min-width: 270px !important;
    }
}
/* =========================================================
   FINAL FIX: ACCOUNT DROPDOWN DESKTOP + MOBILE RESPONSIVE
   Purpose:
   1) Account dropdown always stays above discount/menu/hero sections
   2) Desktop dropdown does not go behind blue/golden bars
   3) Mobile dropdown becomes full usable width and centered
   4) Existing header, discount bar, menu bar, content and footer design remain unchanged
   ========================================================= */

.site-header,
.header-area,
.bb-header,
.bb-header-main,
.bb-header-row,
.header-middle,
.logo-search-row,
.main-header-wrap,
.main-header-area,
.bb-top-area,
.bb-top-header,
.bb-logo-search-area,
.bb-main-header,
.bb-header-content,
.account-box,
.user-account-box,
.header-action-item,
.header-icons,
.header-action,
.header-actions {
    position: relative !important;
}

.site-header,
.header-area,
.bb-header,
.bb-header-main,
.bb-header-row,
.header-middle,
.logo-search-row,
.main-header-wrap,
.main-header-area,
.bb-top-area,
.bb-top-header,
.bb-logo-search-area,
.bb-main-header,
.bb-header-content {
    z-index: 99990 !important;
    overflow: visible !important;
}

.bb-discount-bar,
.discount-bar,
.bb-main-menu-bar,
.desktop-category-bar,
.mobile-category-bar,
.category-mega-wrap,
.category-nav-wrap,
.home-hero-section,
.hero-carousel,
.hero-slide,
.home-products-section,
.main-content-wrapper,
.site-main,
.page-content {
    z-index: 1 !important;
}

.account-box,
.user-account-box,
.header-action-item.account-box {
    z-index: 999999 !important;
    overflow: visible !important;
}

.account-box .account-panel,
.user-account-box .account-panel,
.account-panel {
    position: absolute !important;
    top: calc(100% + 14px) !important;
    right: -70px !important;
    left: auto !important;
    width: 380px !important;
    min-width: 380px !important;
    max-width: 380px !important;
    background: #ffffff !important;
    border-radius: 0 0 18px 18px !important;
    padding: 28px 28px 26px !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.18) !important;
    z-index: 9999999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    display: block !important;
    pointer-events: none !important;
    transform: translateY(10px) !important;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
}

.account-box .account-panel:before,
.user-account-box .account-panel:before,
.account-panel:before {
    content: "" !important;
    position: absolute !important;
    top: -13px !important;
    right: 170px !important;
    border-left: 14px solid transparent !important;
    border-right: 14px solid transparent !important;
    border-bottom: 14px solid #ffffff !important;
    z-index: 10000000 !important;
}

.account-box:hover .account-panel,
.account-box:focus-within .account-panel,
.account-box:active .account-panel,
.user-account-box:hover .account-panel,
.user-account-box:focus-within .account-panel,
.user-account-box:active .account-panel {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

.account-panel .auth-actions,
.account-panel .account-actions,
.account-panel .account-auth-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 24px !important;
}

.account-panel .btn,
.account-panel a,
.account-panel button {
    pointer-events: auto !important;
}

/* keep dropdown open while moving mouse from icon to panel */
.account-box:after,
.user-account-box:after {
    content: "" !important;
    position: absolute !important;
    top: 100% !important;
    right: -95px !important;
    width: 440px !important;
    height: 24px !important;
    background: transparent !important;
    z-index: 9999998 !important;
}

@media (max-width: 991.98px) {
    .site-header,
    .header-area,
    .bb-header,
    .main-header-wrap,
    .main-header-area,
    .bb-logo-search-area,
    .bb-main-header,
    .header-middle,
    .logo-search-row {
        overflow: visible !important;
        z-index: 99990 !important;
    }

    .account-box,
    .user-account-box,
    .header-action-item.account-box {
        position: static !important;
        z-index: 999999 !important;
    }

    .account-box .account-panel,
    .user-account-box .account-panel,
    .account-panel {
        position: fixed !important;
        top: 176px !important;
        left: 50% !important;
        right: auto !important;
        width: calc(100vw - 28px) !important;
        min-width: 0 !important;
        max-width: 360px !important;
        padding: 22px 18px 20px !important;
        border-radius: 0 0 18px 18px !important;
        transform: translate(-50%, 8px) !important;
        z-index: 9999999 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        display: block !important;
    }

    .account-box .account-panel:before,
    .user-account-box .account-panel:before,
    .account-panel:before {
        top: -12px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        border-left: 12px solid transparent !important;
        border-right: 12px solid transparent !important;
        border-bottom: 12px solid #ffffff !important;
    }

    .account-box:hover .account-panel,
    .account-box:focus-within .account-panel,
    .account-box:active .account-panel,
    .user-account-box:hover .account-panel,
    .user-account-box:focus-within .account-panel,
    .user-account-box:active .account-panel {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translate(-50%, 0) !important;
    }

    .account-box:after,
    .user-account-box:after {
        display: none !important;
    }

    .account-panel .auth-actions,
    .account-panel .account-actions,
    .account-panel .account-auth-buttons {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .account-panel .auth-btn,
    .account-panel .btn,
    .account-panel button,
    .account-panel a.btn {
        width: 100% !important;
        min-height: 44px !important;
        font-size: 15px !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 575.98px) {
    .account-box .account-panel,
    .user-account-box .account-panel,
    .account-panel {
        top: 178px !important;
        width: calc(100vw - 24px) !important;
        max-width: 330px !important;
        padding: 20px 16px 20px !important;
    }

    .account-panel .account-menu-item,
    .account-panel .account-link,
    .account-panel li,
    .account-panel a:not(.btn) {
        font-size: 16px !important;
    }
}

/* ==========================================================
   FINAL CLIENT REVISION: CLEAN HEADER + GOLD BODY
   - Top red notice bar removed from layout.
   - Separate golden discount bar removed from layout.
   - Notice + discount text now scroll inside the header.
   - Header/menu/footer use deep silver background.
   - Body/content background uses pure golden tone.
   ========================================================== */
:root{
    --bb-deep-silver-1:#c5cec9;
    --bb-deep-silver-2:#eef2f0;
    --bb-deep-silver-3:#aebbb5;
    --bb-pure-gold:#d6a400;
    --bb-pure-gold-dark:#b98900;
    --bb-deep-red:#8e0000;
    --bb-blue:#0046a3;
}

html,
body{
    background: var(--bb-pure-gold) !important;
}

.bb-page-shell,
main.py-4,
.home-page-v2,
.home-products-section,
.product-detail-page,
.cart-page,
.checkout-page{
    background: var(--bb-pure-gold) !important;
}

/* Hide old standalone bars if any cached/old markup still exists */
.top-utility-bar,
.top-notice-bar,
.bb-discount-bar,
.bb-gold-discount-bar,
.bb-old-discount-bar{
    display:none !important;
    height:0 !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
    border:0 !important;
}

.site-header{
    position:relative !important;
    z-index:5000 !important;
    background:linear-gradient(90deg,var(--bb-deep-silver-3) 0%,var(--bb-deep-silver-2) 28%,#ffffff 50%,var(--bb-deep-silver-2) 72%,var(--bb-deep-silver-3) 100%) !important;
    box-shadow:0 3px 10px rgba(0,0,0,.18) !important;
}

.bb-logo-bar,
.main-header-wrap{
    position:relative !important;
    overflow:visible !important;
    background:linear-gradient(90deg,var(--bb-deep-silver-3) 0%,var(--bb-deep-silver-2) 28%,#ffffff 50%,var(--bb-deep-silver-2) 72%,var(--bb-deep-silver-3) 100%) !important;
    padding-top:24px !important;
    padding-bottom:23px !important;
    border:0 !important;
    box-shadow:none !important;
}

/* Header internal scrolling notice lines */
.bb-header-marquee{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    pointer-events:none !important;
    z-index:1 !important;
}

.bb-header-marquee .bb-marquee-track{
    display:inline-block !important;
    min-width:100% !important;
    padding-left:100% !important;
    animation:bbHeaderMarquee 22s linear infinite !important;
    font-weight:800 !important;
    letter-spacing:.2px !important;
}

.bb-header-notice-marquee{
    top:5px !important;
    height:18px !important;
    line-height:18px !important;
}
.bb-header-notice-marquee .bb-marquee-track{
    color:var(--bb-deep-red) !important;
    font-size:14px !important;
    text-shadow:0 1px 0 rgba(255,255,255,.65) !important;
}

.bb-header-discount-marquee{
    bottom:4px !important;
    height:18px !important;
    line-height:18px !important;
}
.bb-header-discount-marquee .bb-marquee-track{
    color:#e10000 !important;
    font-size:15px !important;
    text-transform:lowercase !important;
    text-shadow:0 1px 0 #ffd900,0 0 6px rgba(255,238,0,.65) !important;
}
.bb-header-discount-marquee .bb-marquee-track span{
    margin-right:44px !important;
}
.bb-header-discount-marquee .bb-dot-gap{
    color:#a67a00 !important;
    margin-right:44px !important;
}

@keyframes bbHeaderMarquee{
    0%{ transform:translateX(0); }
    100%{ transform:translateX(-100%); }
}

.main-header-row{
    position:relative !important;
    z-index:3 !important;
}

/* Menu bar: no blue strip; deep silver like header */
.desktop-category-bar,
.bb-blue-menu-bar{
    position:relative !important;
    z-index:4500 !important;
    background:linear-gradient(90deg,var(--bb-deep-silver-3) 0%,var(--bb-deep-silver-2) 28%,#ffffff 50%,var(--bb-deep-silver-2) 72%,var(--bb-deep-silver-3) 100%) !important;
    border-top:1px solid rgba(255,255,255,.75) !important;
    border-bottom:2px solid var(--bb-pure-gold-dark) !important;
    box-shadow:0 3px 8px rgba(0,0,0,.12) !important;
}
.desktop-category-link{
    color:#003d93 !important;
    text-shadow:0 1px 0 rgba(255,255,255,.75) !important;
}
.desktop-category-item:hover > .desktop-category-link,
.desktop-category-link:hover{
    color:#d00000 !important;
}
.desktop-mega-menu{
    z-index:999999 !important;
}

/* Footer deep silver instead of blue */
.site-footer,
.footer-section,
.bb-footer{
    background:linear-gradient(90deg,var(--bb-deep-silver-3) 0%,var(--bb-deep-silver-2) 28%,#ffffff 50%,var(--bb-deep-silver-2) 72%,var(--bb-deep-silver-3) 100%) !important;
    color:#002b70 !important;
    border:0 !important;
    box-shadow:inset 0 2px 0 rgba(255,255,255,.7), 0 -3px 10px rgba(0,0,0,.12) !important;
}
.site-footer h1,.site-footer h2,.site-footer h3,.site-footer h4,.site-footer h5,.site-footer h6,
.footer-section h1,.footer-section h2,.footer-section h3,.footer-section h4,.footer-section h5,.footer-section h6,
.bb-footer h1,.bb-footer h2,.bb-footer h3,.bb-footer h4,.bb-footer h5,.bb-footer h6{
    color:#d00000 !important;
    text-shadow:0 1px 0 rgba(255,255,255,.75) !important;
}
.site-footer a,.footer-section a,.bb-footer a{
    color:#003d93 !important;
}
.site-footer p,.footer-section p,.bb-footer p{
    color:#002b70 !important;
}
.footer-social a,
.site-footer .social-link,
.bb-footer .social-link{
    background:linear-gradient(145deg,#fff4a8 0%,#e2b400 48%,#a97900 100%) !important;
    color:#003d93 !important;
}

/* Product/content cards stay clean on golden body */
.home-products-section .container,
.product-detail-wrapper,
.cart-wrapper,
.checkout-wrapper{
    background:transparent !important;
}
.product-card,
.product-box,
.card,
.product-detail-card,
.cart-card,
.summary-card{
    background:#ffffff !important;
}

/* Account dropdown must always stay above menu/hero */
.account-box,
.icon-box.account-box{
    position:relative !important;
    z-index:1000000 !important;
}
.account-panel{
    z-index:1000001 !important;
}
.account-box:hover .account-panel,
.account-box:focus-within .account-panel{
    opacity:1 !important;
    visibility:visible !important;
    transform:translateY(0) !important;
    pointer-events:auto !important;
}

@media (max-width:991.98px){
    .bb-logo-bar,
    .main-header-wrap{
        padding-top:22px !important;
        padding-bottom:22px !important;
    }
    .bb-header-notice-marquee .bb-marquee-track{
        font-size:12px !important;
    }
    .bb-header-discount-marquee .bb-marquee-track{
        font-size:13px !important;
    }
    .bb-header-discount-marquee .bb-marquee-track span{
        margin-right:28px !important;
    }
    .mobile-mega-nav{
        background:linear-gradient(90deg,var(--bb-deep-silver-3),var(--bb-deep-silver-2),#ffffff,var(--bb-deep-silver-2),var(--bb-deep-silver-3)) !important;
        position:relative !important;
        z-index:5500 !important;
    }
}

/* =========================================================
   FINAL FIX - slim deep silver header + mobile account dropdown position
   Date: current patch
   Purpose:
   1) Header height slimmer without changing HTML/backend logic.
   2) Account login/register panel stays just under the user icon on mobile,
      not far down over the hero section.
========================================================= */

/* Slim header for desktop/tablet */
.bb-logo-bar,
.main-header-wrap{
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    min-height: auto !important;
}

.main-header-row,
.header-inner,
.bb-logo-bar .main-header-row,
.main-header-wrap .main-header-row{
    min-height: 64px !important;
}

.site-logo img,
.bb-main-logo,
.bb-logo,
.header-logo img,
.logo img{
    max-height: 58px !important;
}

.header-search .form-control,
.bb-search-input{
    height: 44px !important;
}

.search-btn,
.bb-search-btn{
    width: 38px !important;
    height: 38px !important;
}

.header-right-icons .icon-box,
.header-action-item,
.icon-box{
    width: 42px !important;
    height: 42px !important;
}

/* Keep dropdown above all bars/slider */
.header-right-icons,
.account-box,
.icon-box.account-box,
.header-action-item.account-box,
.user-account-box{
    position: relative !important;
    z-index: 2147483000 !important;
}

.account-box .account-panel,
.user-account-box .account-panel,
.account-panel{
    z-index: 2147483001 !important;
    pointer-events: auto !important;
}

.account-box:hover .account-panel,
.account-box:focus-within .account-panel,
.account-box:active .account-panel,
.user-account-box:hover .account-panel,
.user-account-box:focus-within .account-panel,
.user-account-box:active .account-panel{
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Mobile: make header slimmer and dropdown close to the user icon */
@media (max-width: 575.98px){
    .bb-logo-bar,
    .main-header-wrap{
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        min-height: auto !important;
    }

    .main-header-row,
    .header-inner,
    .bb-logo-bar .main-header-row,
    .main-header-wrap .main-header-row{
        min-height: 54px !important;
        gap: 8px !important;
        align-items: center !important;
    }

    .site-logo img,
    .bb-main-logo,
    .bb-logo,
    .header-logo img,
    .logo img{
        max-height: 42px !important;
    }

    .mobile-nav-toggle{
        width: 32px !important;
        height: 32px !important;
        flex: 0 0 32px !important;
    }

    .header-right-icons{
        gap: 8px !important;
        margin-left: auto !important;
        z-index: 2147483000 !important;
    }

    .header-right-icons .icon-box,
    .header-action-item,
    .icon-box{
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px !important;
    }

    .header-right-icons .icon-box i,
    .header-action-item i,
    .icon-box i{
        font-size: 20px !important;
    }

    /* This is the main fix: panel is fixed near top, centered safely inside viewport */
    .account-box .account-panel,
    .user-account-box .account-panel,
    .account-panel{
        position: fixed !important;
        top: 142px !important;
        left: 50% !important;
        right: auto !important;
        width: min(330px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        border-radius: 14px !important;
        overflow: visible !important;
        z-index: 2147483001 !important;
    }

    .account-box:hover .account-panel,
    .account-box:focus-within .account-panel,
    .account-box:active .account-panel,
    .user-account-box:hover .account-panel,
    .user-account-box:focus-within .account-panel,
    .user-account-box:active .account-panel{
        transform: translateX(-50%) !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .account-box .account-panel:before,
    .user-account-box .account-panel:before,
    .account-panel:before{
        top: -8px !important;
        right: 82px !important;
        left: auto !important;
        display: block !important;
    }

    .account-panel-inner{
        padding: 16px !important;
    }

    .account-panel .auth-actions,
    .account-panel .account-auth-buttons{
        display: flex !important;
        gap: 8px !important;
    }

    .account-panel .auth-btn,
    .account-panel .btn,
    .account-panel button,
    .account-panel a.btn{
        min-height: 44px !important;
        font-size: 15px !important;
    }

    .account-panel .account-menu-item,
    .account-panel .account-link,
    .account-panel li,
    .account-panel a:not(.btn){
        font-size: 16px !important;
        line-height: 1.25 !important;
    }
}

/* Extra small mobile: keep panel even closer to the header */
@media (max-width: 380px){
    .account-box .account-panel,
    .user-account-box .account-panel,
    .account-panel{
        top: 136px !important;
        width: calc(100vw - 18px) !important;
        max-width: calc(100vw - 18px) !important;
    }
}

/* =========================================================
   100% FINAL MOBILE FIX - account dropdown + mobile menu
   ---------------------------------------------------------
   Fixes:
   - Mobile account login/register panel no longer drops over hero.
   - Mobile hamburger menu container no longer appears plain white.
   - Desktop/header/menu/footer existing logic and backend untouched.
========================================================= */

@media (max-width: 991.98px){
    /* Keep header/dropdowns above slider, menu and body */
    .bb-header-wrap,
    .bb-logo-bar,
    .bb-header-inner,
    .bb-header-actions,
    .account-box,
    .bb-user-wrap,
    .user-area,
    .user-menu-wrap{
        overflow: visible !important;
        z-index: 9990 !important;
    }

    /* Mobile hamburger menu: remove white block, keep same silver design */
    .mobile-mega-nav,
    #mobileMenu,
    .mobile-menu,
    .mobile-nav-wrapper,
    .mobile-menu-wrapper,
    .mobile-category-menu{
        background: linear-gradient(90deg,#c2ccc8 0%,#e9eeeb 24%,#ffffff 50%,#e9eeeb 76%,#c2ccc8 100%) !important;
        border-top: 2px solid #0050a8 !important;
        border-bottom: 2px solid #0050a8 !important;
        box-shadow: inset 0 10px 22px rgba(255,255,255,.35), inset 0 -10px 22px rgba(0,0,0,.05) !important;
        padding: 10px 12px 14px !important;
        position: relative !important;
        z-index: 9980 !important;
    }

    .mobile-mega-nav .card,
    .mobile-nav-card,
    .mobile-menu-card,
    .mobile-category-card{
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .mobile-mega-nav .card-header,
    .mobile-nav-card .card-header,
    .mobile-menu-card .card-header,
    .mobile-category-card .card-header{
        background: transparent !important;
        border: 0 !important;
        padding: 4px 0 !important;
    }

    .mobile-nav-btn,
    .mobile-mega-nav button,
    .mobile-mega-nav a{
        color: #004aa2 !important;
        font-weight: 800 !important;
        text-shadow: 0 1px 0 rgba(255,255,255,.7) !important;
    }

    .mobile-submenu,
    .mobile-mega-nav .collapse,
    .mobile-mega-nav .submenu{
        background: rgba(255,255,255,.38) !important;
        border-radius: 10px !important;
    }

    /* Main account dropdown - force it near header icon in mobile */
    .account-box{
        position: static !important;
    }

    .account-box .account-panel,
    .account-panel,
    .bb-account-dropdown,
    .user-dropdown,
    .user-account-dropdown,
    .account-dropdown{
        position: fixed !important;
        top: 98px !important;
        right: 8px !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: min(330px, calc(100vw - 16px)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 16px) !important;
        height: auto !important;
        max-height: calc(100vh - 118px) !important;
        overflow-y: auto !important;
        padding: 16px !important;
        margin: 0 !important;
        background: rgba(255,255,255,.96) !important;
        border: 1px solid rgba(0,0,0,.08) !important;
        border-radius: 16px !important;
        box-shadow: 0 18px 45px rgba(0,0,0,.22) !important;
        z-index: 99999 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .account-box .account-panel:before,
    .account-panel:before,
    .bb-account-dropdown:before,
    .user-dropdown:before,
    .account-dropdown:before{
        display: none !important;
    }

    .account-box:hover .account-panel,
    .account-box:focus-within .account-panel,
    .account-box.account-open .account-panel,
    .account-box.open .account-panel,
    .account-panel.show,
    .bb-account-dropdown.show,
    .user-dropdown.show,
    .account-dropdown.show{
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        display: block !important;
    }
}

@media (max-width: 575.98px){
    .account-box .account-panel,
    .account-panel,
    .bb-account-dropdown,
    .user-dropdown,
    .user-account-dropdown,
    .account-dropdown{
        top: 88px !important;
        right: 6px !important;
        width: min(300px, calc(100vw - 12px)) !important;
        max-width: calc(100vw - 12px) !important;
        padding: 14px !important;
        border-radius: 15px !important;
    }

    .account-panel .account-tabs,
    .account-panel .login-register-row,
    .account-panel .auth-actions{
        display: flex !important;
        gap: 8px !important;
    }

    .account-panel .account-tabs a,
    .account-panel .account-tabs button,
    .account-panel .login-register-row a,
    .account-panel .auth-actions a,
    .account-panel .auth-actions button{
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        white-space: nowrap !important;
    }
}


/* =========================================================
   FINAL UPDATE: Header Search Icon -> Expand on hover/touch
   Purpose: keep all old layout/logic intact, only convert the
   header search box to collapsed icon by default.
   ========================================================= */
.header-search.bb-expand-search{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    position: relative !important;
    height: 56px !important;
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    flex: 0 0 56px !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    overflow: visible !important;
    z-index: 2200 !important;
    transition: width .28s ease, max-width .28s ease, flex-basis .28s ease !important;
}

.header-search.bb-expand-search .bb-search-input{
    width: 0 !important;
    min-width: 0 !important;
    height: 52px !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border-radius: 30px !important;
    border: 2px solid rgba(157, 181, 214, .65) !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.10) !important;
    color: #243241 !important;
    transition: opacity .20s ease, padding .20s ease, width .28s ease !important;
}

.header-search.bb-expand-search .search-btn,
.header-search.bb-expand-search .bb-search-toggle{
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255,255,255,.65) !important;
    background: radial-gradient(circle at 35% 25%, #ffe86a 0%, #d8a800 50%, #9b7600 100%) !important;
    color: #004aa8 !important;
    font-size: 21px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.25), inset 0 1px 4px rgba(255,255,255,.75) !important;
    z-index: 3 !important;
    cursor: pointer !important;
}

.header-search.bb-expand-search:hover,
.header-search.bb-expand-search:focus-within,
.header-search.bb-expand-search.search-open{
    width: min(720px, 48vw) !important;
    max-width: min(720px, 48vw) !important;
    flex: 1 1 min(720px, 48vw) !important;
}

.header-search.bb-expand-search:hover .bb-search-input,
.header-search.bb-expand-search:focus-within .bb-search-input,
.header-search.bb-expand-search.search-open .bb-search-input{
    width: 100% !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    padding: 0 72px 0 24px !important;
}

/* old mobile menu search box is no longer needed because header icon expands */
.mobile-search-area{
    display: none !important;
}

@media (max-width: 991.98px){
    .main-header-row{
        position: relative !important;
        gap: 8px !important;
    }

    .header-search.bb-expand-search{
        display: flex !important;
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        flex: 0 0 46px !important;
        height: 46px !important;
        margin-left: 4px !important;
        margin-right: 4px !important;
        order: 4 !important;
    }

    .header-search.bb-expand-search .search-btn,
    .header-search.bb-expand-search .bb-search-toggle{
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        font-size: 17px !important;
    }

    .header-search.bb-expand-search.search-open,
    .header-search.bb-expand-search:focus-within{
        position: absolute !important;
        left: 10px !important;
        right: 10px !important;
        bottom: -58px !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        flex: none !important;
        height: 50px !important;
        margin: 0 !important;
        z-index: 99999 !important;
    }

    .header-search.bb-expand-search.search-open .bb-search-input,
    .header-search.bb-expand-search:focus-within .bb-search-input{
        width: 100% !important;
        height: 48px !important;
        opacity: 1 !important;
        padding: 0 62px 0 18px !important;
        pointer-events: auto !important;
        font-size: 15px !important;
    }

    .header-search.bb-expand-search.search-open .search-btn,
    .header-search.bb-expand-search:focus-within .search-btn{
        right: 2px !important;
        width: 44px !important;
        height: 44px !important;
    }
}

@media (max-width: 575.98px){
    .header-search.bb-expand-search{
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        flex-basis: 42px !important;
        margin-left: 2px !important;
        margin-right: 2px !important;
    }

    .header-search.bb-expand-search .search-btn,
    .header-search.bb-expand-search .bb-search-toggle{
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        font-size: 16px !important;
    }

    .header-search.bb-expand-search.search-open,
    .header-search.bb-expand-search:focus-within{
        left: 8px !important;
        right: 8px !important;
        bottom: -54px !important;
    }
}


/* =========================================================
   FINAL SEARCH POSITION + AUTH DROPDOWN LAYER FIX
   - Search icon is now beside account/user icons
   - Full search expands on hover/focus/touch without breaking header
   - Account dropdown stays above menu/slider on desktop and mobile
   ========================================================= */
.main-header-row{
    position: relative !important;
}

.header-right-icons{
    position: relative !important;
    z-index: 99990 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 18px !important;
    overflow: visible !important;
}

.header-right-icons .bb-expand-search{
    position: relative !important;
    flex: 0 0 56px !important;
    width: 56px !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    z-index: 100000 !important;
}

.header-right-icons .bb-expand-search .bb-search-input{
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 56px !important;
    height: 56px !important;
    padding: 0 56px 0 22px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border-radius: 35px !important;
    transition: width .28s ease, opacity .20s ease !important;
    z-index: 1 !important;
}

.header-right-icons .bb-expand-search .bb-search-toggle,
.header-right-icons .bb-expand-search .search-btn{
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    z-index: 2 !important;
}

.header-right-icons .bb-expand-search:hover .bb-search-input,
.header-right-icons .bb-expand-search:focus-within .bb-search-input,
.header-right-icons .bb-expand-search.search-open .bb-search-input{
    width: min(560px, 62vw) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.account-box,
.account-panel{
    z-index: 100050 !important;
}

.account-panel{
    top: calc(100% + 12px) !important;
}

.desktop-category-bar,
.mobile-mega-nav,
.hero-section,
.main-wrapper,
.home-hero-wrapper{
    z-index: auto !important;
}

.modal{
    z-index: 200000 !important;
}
.modal-backdrop{
    z-index: 199990 !important;
}

@media (max-width: 991.98px){
    .header-right-icons{
        gap: 12px !important;
    }

    .header-right-icons .bb-expand-search{
        flex: 0 0 44px !important;
        width: 44px !important;
        height: 44px !important;
    }

    .header-right-icons .bb-expand-search .bb-search-input{
        width: 44px !important;
        height: 44px !important;
        padding: 0 48px 0 16px !important;
    }

    .header-right-icons .bb-expand-search .bb-search-toggle,
    .header-right-icons .bb-expand-search .search-btn{
        width: 44px !important;
        height: 44px !important;
    }

    .header-right-icons .bb-expand-search:hover .bb-search-input,
    .header-right-icons .bb-expand-search:focus-within .bb-search-input,
    .header-right-icons .bb-expand-search.search-open .bb-search-input{
        width: min(300px, 74vw) !important;
    }

    .account-panel{
        position: absolute !important;
        top: calc(100% + 8px) !important;
        right: -58px !important;
        width: 288px !important;
        max-width: calc(100vw - 18px) !important;
        transform: none !important;
        z-index: 100050 !important;
    }

    .account-box:hover .account-panel,
    .account-box:focus-within .account-panel,
    .account-box.mobile-account-open .account-panel{
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
    }
}

@media (max-width: 575.98px){
    .header-right-icons .bb-expand-search:hover .bb-search-input,
    .header-right-icons .bb-expand-search:focus-within .bb-search-input,
    .header-right-icons .bb-expand-search.search-open .bb-search-input{
        width: min(255px, 72vw) !important;
    }

    .account-panel{
        right: -72px !important;
        width: 274px !important;
    }
}

/* =========================================================
   FINAL PATCH: Search icon must stay beside user/account icon
   and account dropdown/modal must stay above menu/slider.
   Paste-safe override only; no backend logic changed.
   ========================================================= */
.site-header,
.site-header .container,
.main-header-row,
.header-right-icons,
.account-dropdown-wrapper{
    overflow: visible !important;
}

.site-header{
    position: relative !important;
    z-index: 99990 !important;
}

.main-menu-area,
.main-menu-wrapper,
.header-main-menu,
.category-menu,
.hero-section,
.home-hero,
.hero-slider,
.home-products-section{
    position: relative;
    z-index: 1 !important;
}

/* Desktop / tablet: logo left, search + user icons right */
@media (min-width: 768px){
    .main-header-row{
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        width: 100% !important;
        position: relative !important;
    }

    .site-logo,
    .header-logo,
    .main-logo{
        flex: 0 0 auto !important;
        margin-right: 24px !important;
    }

    .header-right-icons{
        margin-left: auto !important;
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 28px !important;
        position: relative !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        z-index: 100000 !important;
    }

    /* IMPORTANT: force search item into right icon group, just before user icon */
    .header-right-icons .header-search.bb-expand-search,
    .header-right-icons #bbHeaderSearch,
    .header-search.bb-expand-search#bbHeaderSearch{
        order: 1 !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        margin: 0 -2px 0 0 !important;
        padding: 0 !important;
        width: 54px !important;
        min-width: 54px !important;
        max-width: 54px !important;
        height: 54px !important;
        flex: 0 0 54px !important;
        z-index: 100010 !important;
    }

    .header-right-icons .account-dropdown-wrapper{
        order: 2 !important;
        position: relative !important;
        z-index: 100020 !important;
    }

    .header-right-icons .wishlist-icon,
    .header-right-icons .header-wishlist,
    .header-right-icons .wishlist-link{
        order: 3 !important;
    }

    .header-right-icons .cart-icon-wrapper,
    .header-right-icons .header-cart,
    .header-right-icons .cart-link{
        order: 4 !important;
    }

    /* Expand search to the LEFT side so it does not leave user icon area */
    .header-right-icons .header-search.bb-expand-search:hover,
    .header-right-icons .header-search.bb-expand-search:focus-within,
    .header-right-icons .header-search.bb-expand-search.is-open{
        width: min(520px, 42vw) !important;
        min-width: min(520px, 42vw) !important;
        max-width: min(520px, 42vw) !important;
        flex-basis: min(520px, 42vw) !important;
        z-index: 100030 !important;
    }

    .header-right-icons .header-search.bb-expand-search .search-input,
    .header-right-icons .header-search.bb-expand-search input[type="search"],
    .header-right-icons .header-search.bb-expand-search input[type="text"]{
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        transition: all .25s ease !important;
    }

    .header-right-icons .header-search.bb-expand-search:hover .search-input,
    .header-right-icons .header-search.bb-expand-search:focus-within .search-input,
    .header-right-icons .header-search.bb-expand-search.is-open .search-input,
    .header-right-icons .header-search.bb-expand-search:hover input[type="search"],
    .header-right-icons .header-search.bb-expand-search:focus-within input[type="search"],
    .header-right-icons .header-search.bb-expand-search.is-open input[type="search"],
    .header-right-icons .header-search.bb-expand-search:hover input[type="text"],
    .header-right-icons .header-search.bb-expand-search:focus-within input[type="text"],
    .header-right-icons .header-search.bb-expand-search.is-open input[type="text"]{
        opacity: 1 !important;
        pointer-events: auto !important;
        width: 100% !important;
        padding-left: 18px !important;
        padding-right: 64px !important;
    }
}

/* Mobile: keep previous centered dropdown behavior intact */
@media (max-width: 767.98px){
    .header-right-icons .header-search.bb-expand-search,
    .header-right-icons #bbHeaderSearch{
        order: 1 !important;
    }

    .header-right-icons .account-dropdown-wrapper{
        order: 2 !important;
        position: static !important;
    }

    .account-dropdown-wrapper .account-dropdown,
    .account-dropdown-wrapper .user-dropdown,
    .account-dropdown-wrapper .account-menu{
        position: fixed !important;
        top: 104px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: min(330px, calc(100vw - 28px)) !important;
        max-width: calc(100vw - 28px) !important;
        z-index: 2147483600 !important;
    }
}


/* =========================================================
   FINAL PATCH: search icon beside user icon + slim icon dividers
   Purpose:
   - Search icon stays inside .header-right-icons on desktop and mobile.
   - Search icon is immediately before user/account icon.
   - A vertical divider appears between search/user/wishlist/cart icons.
   - Header icons are slightly smaller without changing backend logic.
   ========================================================= */

.main-header-row{
    display: flex !important;
    align-items: center !important;
}

.site-logo{
    flex: 0 0 auto !important;
}

/* After moving search form into this wrapper, keep every action on the right side */
.header-right-icons{
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 2147483000 !important;
}

/* All direct action items behave like compact icon columns */
.header-right-icons > *{
    position: relative !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}

/* Vertical separator between every header action icon */
.header-right-icons > * + *{
    border-left: 1px solid rgba(146, 117, 20, .48) !important;
    padding-left: 13px !important;
    margin-left: 13px !important;
}

/* Keep search exactly before user/account icon */
.header-right-icons .header-search.bb-expand-search{
    order: 1 !important;
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    position: relative !important;
    overflow: visible !important;
    z-index: 2147483002 !important;
}

.header-right-icons .account-box,
.header-right-icons .user-account-box,
.header-right-icons .header-action-item.account-box{
    order: 2 !important;
}

.header-right-icons > a.icon-box{
    order: 3 !important;
}

.header-right-icons > button.icon-box,
.header-right-icons > .cart-icon,
.header-right-icons > .cart-btn{
    order: 4 !important;
}

/* Slightly smaller icons */
.header-right-icons .icon-box,
.header-right-icons .header-action-item,
.header-right-icons .account-box.icon-box{
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    flex-basis: 42px !important;
}

.header-right-icons .icon-box i,
.header-right-icons .header-action-item i{
    font-size: 25px !important;
    line-height: 1 !important;
}

.header-right-icons .header-search.bb-expand-search .bb-search-input{
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 46px 0 18px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border-radius: 999px !important;
    z-index: 1 !important;
}

.header-right-icons .header-search.bb-expand-search .search-btn,
.header-right-icons .header-search.bb-expand-search .bb-search-toggle{
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 50% !important;
    font-size: 18px !important;
    z-index: 2 !important;
}

.header-right-icons .header-search.bb-expand-search:hover .bb-search-input,
.header-right-icons .header-search.bb-expand-search:focus-within .bb-search-input,
.header-right-icons .header-search.bb-expand-search.search-open .bb-search-input{
    width: min(540px, 48vw) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    padding: 0 60px 0 20px !important;
}

/* Account dropdown remains above menu and slider */
.header-right-icons .account-box,
.account-box,
.account-panel{
    z-index: 2147483010 !important;
}

.account-panel{
    pointer-events: none !important;
}

.account-box:hover .account-panel,
.account-box:focus-within .account-panel,
.account-box.account-open .account-panel,
.account-box.open .account-panel{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: block !important;
}

@media (max-width: 991.98px){
    .header-right-icons > * + *{
        padding-left: 9px !important;
        margin-left: 9px !important;
    }

    .header-right-icons .header-search.bb-expand-search{
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
        flex-basis: 38px !important;
    }

    .header-right-icons .header-search.bb-expand-search .search-btn,
    .header-right-icons .header-search.bb-expand-search .bb-search-toggle{
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        font-size: 16px !important;
    }

    .header-right-icons .header-search.bb-expand-search .bb-search-input{
        height: 38px !important;
        width: 38px !important;
        padding: 0 42px 0 14px !important;
    }

    .header-right-icons .header-search.bb-expand-search:hover .bb-search-input,
    .header-right-icons .header-search.bb-expand-search:focus-within .bb-search-input,
    .header-right-icons .header-search.bb-expand-search.search-open .bb-search-input{
        width: min(300px, 72vw) !important;
        padding: 0 52px 0 15px !important;
    }

    .header-right-icons .icon-box,
    .header-right-icons .header-action-item,
    .header-right-icons .account-box.icon-box{
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        flex-basis: 36px !important;
    }

    .header-right-icons .icon-box i,
    .header-right-icons .header-action-item i{
        font-size: 21px !important;
    }
}

@media (max-width: 575.98px){
    .header-right-icons > * + *{
        padding-left: 7px !important;
        margin-left: 7px !important;
    }

    .header-right-icons .header-search.bb-expand-search{
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 34px !important;
        flex-basis: 34px !important;
    }

    .header-right-icons .header-search.bb-expand-search .search-btn,
    .header-right-icons .header-search.bb-expand-search .bb-search-toggle{
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        font-size: 14px !important;
    }

    .header-right-icons .header-search.bb-expand-search .bb-search-input{
        height: 34px !important;
        width: 34px !important;
    }

    .header-right-icons .header-search.bb-expand-search:hover .bb-search-input,
    .header-right-icons .header-search.bb-expand-search:focus-within .bb-search-input,
    .header-right-icons .header-search.bb-expand-search.search-open .bb-search-input{
        width: min(245px, 70vw) !important;
    }

    .header-right-icons .icon-box,
    .header-right-icons .header-action-item,
    .header-right-icons .account-box.icon-box{
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        flex-basis: 32px !important;
    }

    .header-right-icons .icon-box i,
    .header-right-icons .header-action-item i{
        font-size: 19px !important;
    }

    .cart-count{
        top: -7px !important;
        right: -5px !important;
    }
}

/* =========================================================
   FINAL PATCH: Search icon at right icon group + separators
   Purpose:
   - Search icon stays at the far-left of header right icons.
   - Order: Search | User | Wishlist | Cart.
   - Vertical separators between every icon.
   - Icons are slightly smaller and search expands to the LEFT.
   - Existing backend/cart/auth/category logic untouched.
========================================================= */
.main-header-row{
    position: relative !important;
}

/* make sure header right group has clean spacing and visible separators */
.header-right-icons{
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    margin-left: auto !important;
    overflow: visible !important;
    z-index: 2147482000 !important;
}

.header-right-icons > .icon-box,
.header-right-icons > .header-search.bb-expand-search{
    margin-left: 9px !important;
    margin-right: 9px !important;
}

.header-icon-separator{
    display: inline-block !important;
    width: 1px !important;
    height: 34px !important;
    min-width: 1px !important;
    margin: 0 3px !important;
    background: linear-gradient(180deg, transparent 0%, rgba(178,134,0,.35) 15%, rgba(178,134,0,.95) 50%, rgba(178,134,0,.35) 85%, transparent 100%) !important;
    box-shadow: 1px 0 0 rgba(255,255,255,.45) !important;
    flex: 0 0 1px !important;
}

/* slightly smaller right icons */
.header-right-icons .icon-box{
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    border-radius: 50% !important;
}

.header-right-icons .icon-box i{
    font-size: 26px !important;
    line-height: 1 !important;
}

.header-right-icons .cart-count{
    top: -5px !important;
    right: -4px !important;
}

/* Search icon lives inside right icon group. It must not remain beside logo. */
.main-header-row > .header-search.bb-expand-search{
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.header-right-icons > .header-search.bb-expand-search{
    order: 1 !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    overflow: visible !important;
    z-index: 2147482100 !important;
}

.header-right-icons > .header-search.bb-expand-search .bb-search-input{
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    padding: 0 54px 0 18px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.98) !important;
    border: 2px solid rgba(0,74,173,.22) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.16) !important;
    transition: width .28s ease, opacity .18s ease !important;
    z-index: 1 !important;
}

.header-right-icons > .header-search.bb-expand-search .search-btn,
.header-right-icons > .header-search.bb-expand-search .bb-search-toggle{
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 50% !important;
    z-index: 2 !important;
}

.header-right-icons > .header-search.bb-expand-search .search-btn i,
.header-right-icons > .header-search.bb-expand-search .bb-search-toggle i{
    font-size: 22px !important;
}

/* Expand left from the search icon, so it does not cover user/wishlist/cart. */
.header-right-icons > .header-search.bb-expand-search:hover .bb-search-input,
.header-right-icons > .header-search.bb-expand-search:focus-within .bb-search-input,
.header-right-icons > .header-search.bb-expand-search.search-open .bb-search-input{
    width: min(520px, 56vw) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Keep account dropdown above the expanding search and menu */
.header-right-icons .account-box,
.header-right-icons .account-panel{
    z-index: 2147482200 !important;
}

@media (max-width: 991.98px){
    .header-right-icons > .icon-box,
    .header-right-icons > .header-search.bb-expand-search{
        margin-left: 5px !important;
        margin-right: 5px !important;
    }

    .header-icon-separator{
        height: 28px !important;
        margin: 0 2px !important;
    }

    .header-right-icons .icon-box{
        width: 38px !important;
        height: 38px !important;
        flex-basis: 38px !important;
    }

    .header-right-icons .icon-box i{
        font-size: 22px !important;
    }

    .header-right-icons > .header-search.bb-expand-search{
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        flex-basis: 40px !important;
        order: 1 !important;
    }

    .header-right-icons > .header-search.bb-expand-search .bb-search-input{
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        padding: 0 46px 0 14px !important;
    }

    .header-right-icons > .header-search.bb-expand-search .search-btn,
    .header-right-icons > .header-search.bb-expand-search .bb-search-toggle{
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }

    .header-right-icons > .header-search.bb-expand-search:hover .bb-search-input,
    .header-right-icons > .header-search.bb-expand-search:focus-within .bb-search-input,
    .header-right-icons > .header-search.bb-expand-search.search-open .bb-search-input{
        width: min(285px, 70vw) !important;
    }
}

@media (max-width: 575.98px){
    .header-right-icons{
        gap: 0 !important;
    }

    .header-right-icons > .icon-box,
    .header-right-icons > .header-search.bb-expand-search{
        margin-left: 3px !important;
        margin-right: 3px !important;
    }

    .header-icon-separator{
        height: 24px !important;
        margin: 0 1px !important;
    }

    .header-right-icons .icon-box{
        width: 34px !important;
        height: 34px !important;
        flex-basis: 34px !important;
    }

    .header-right-icons .icon-box i{
        font-size: 20px !important;
    }

    .header-right-icons > .header-search.bb-expand-search{
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        flex-basis: 36px !important;
    }

    .header-right-icons > .header-search.bb-expand-search .bb-search-input{
        width: 36px !important;
        min-width: 36px !important;
        height: 38px !important;
        padding: 0 44px 0 12px !important;
    }

    .header-right-icons > .header-search.bb-expand-search .search-btn,
    .header-right-icons > .header-search.bb-expand-search .bb-search-toggle{
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }

    .header-right-icons > .header-search.bb-expand-search .search-btn i,
    .header-right-icons > .header-search.bb-expand-search .bb-search-toggle i{
        font-size: 16px !important;
    }

    .header-right-icons > .header-search.bb-expand-search:hover .bb-search-input,
    .header-right-icons > .header-search.bb-expand-search:focus-within .bb-search-input,
    .header-right-icons > .header-search.bb-expand-search.search-open .bb-search-input{
        width: min(245px, 66vw) !important;
    }
}

/* =========================================================
   FINAL PATCH: Search icon first + thin vertical separators
   Task: Right header icons order = Search | User | Wishlist | Cart
   Existing backend/Blade logic untouched.
========================================================= */

/* Right side icon group: keep enough spacing for search expansion */
.header-right-icons{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    margin-left: auto !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 99990 !important;
}

/* Force exact visual order, regardless of previous cached/order rules */
.header-right-icons > .currency-chip{
    order: 0 !important;
}

.header-right-icons > .header-search.bb-expand-search,
.header-right-icons > #bbHeaderSearch{
    order: 1 !important;
}

.header-right-icons > .header-icon-separator:nth-of-type(1){
    order: 2 !important;
}

.header-right-icons > .account-box{
    order: 3 !important;
}

.header-right-icons > .header-icon-separator:nth-of-type(2){
    order: 4 !important;
}

.header-right-icons > .icon-box.d-none.d-sm-inline-flex{
    order: 5 !important;
}

.header-right-icons > .header-icon-separator:nth-of-type(3){
    order: 6 !important;
}

.header-right-icons > .cart-icon-box{
    order: 7 !important;
}

/* Make every icon compact and equal sized */
.header-right-icons > .icon-box,
.header-right-icons > .account-box.icon-box,
.header-right-icons > .cart-icon-box.icon-box{
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    flex: 0 0 44px !important;
    margin: 0 10px !important;
    padding: 0 !important;
    border-radius: 50% !important;
}

.header-right-icons > .icon-box i,
.header-right-icons > .account-box.icon-box i,
.header-right-icons > .cart-icon-box.icon-box i{
    font-size: 25px !important;
    line-height: 1 !important;
}

/* Search must be the first icon and expand to the LEFT without pushing other icons */
.header-right-icons > .header-search.bb-expand-search{
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    flex: 0 0 48px !important;
    height: 48px !important;
    margin: 0 10px 0 0 !important;
    padding: 0 !important;
    position: relative !important;
    overflow: visible !important;
    z-index: 100010 !important;
}

.header-right-icons > .header-search.bb-expand-search .bb-search-input{
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: none !important;
    padding: 0 48px 0 18px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border-radius: 999px !important;
    z-index: 1 !important;
    transition: width .28s ease, opacity .18s ease, padding .18s ease !important;
}

.header-right-icons > .header-search.bb-expand-search .search-btn,
.header-right-icons > .header-search.bb-expand-search .bb-search-toggle{
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 50% !important;
    z-index: 2 !important;
}

.header-right-icons > .header-search.bb-expand-search .search-btn i,
.header-right-icons > .header-search.bb-expand-search .bb-search-toggle i{
    font-size: 21px !important;
}

.header-right-icons > .header-search.bb-expand-search:hover .bb-search-input,
.header-right-icons > .header-search.bb-expand-search:focus-within .bb-search-input,
.header-right-icons > .header-search.bb-expand-search.search-open .bb-search-input{
    width: min(520px, 48vw) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    padding: 0 62px 0 20px !important;
}

/* Thin premium vertical separators between icons */
.header-icon-separator{
    display: inline-block !important;
    width: 1px !important;
    min-width: 1px !important;
    max-width: 1px !important;
    height: 34px !important;
    flex: 0 0 1px !important;
    margin: 0 4px !important;
    padding: 0 !important;
    background: linear-gradient(180deg, transparent 0%, rgba(150,111,0,.28) 12%, rgba(184,139,0,.78) 50%, rgba(150,111,0,.28) 88%, transparent 100%) !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* Hide duplicate/empty pseudo separators from earlier patches */
.header-right-icons::before,
.header-right-icons::after,
.header-right-icons > .icon-box::before,
.header-right-icons > .icon-box::after,
.header-right-icons > .header-search.bb-expand-search::before,
.header-right-icons > .header-search.bb-expand-search::after{
    content: none !important;
    display: none !important;
}

/* Account dropdown should still open under user icon, above hero/menu */
.header-right-icons > .account-box .account-panel{
    right: -118px !important;
    top: calc(100% + 12px) !important;
    z-index: 2147483001 !important;
}

.header-right-icons > .account-box .account-panel:before{
    right: 134px !important;
}

@media (max-width: 1199.98px){
    .header-right-icons > .header-search.bb-expand-search:hover .bb-search-input,
    .header-right-icons > .header-search.bb-expand-search:focus-within .bb-search-input,
    .header-right-icons > .header-search.bb-expand-search.search-open .bb-search-input{
        width: min(420px, 42vw) !important;
    }
}

@media (max-width: 991.98px){
    .header-right-icons{
        gap: 0 !important;
    }

    .header-right-icons > .icon-box,
    .header-right-icons > .account-box.icon-box,
    .header-right-icons > .cart-icon-box.icon-box{
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        flex-basis: 36px !important;
        margin: 0 5px !important;
    }

    .header-right-icons > .icon-box i,
    .header-right-icons > .account-box.icon-box i,
    .header-right-icons > .cart-icon-box.icon-box i{
        font-size: 21px !important;
    }

    .header-right-icons > .header-search.bb-expand-search{
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        flex-basis: 38px !important;
        height: 38px !important;
        margin: 0 5px 0 0 !important;
    }

    .header-right-icons > .header-search.bb-expand-search .bb-search-input{
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        padding: 0 38px 0 14px !important;
    }

    .header-right-icons > .header-search.bb-expand-search .search-btn,
    .header-right-icons > .header-search.bb-expand-search .bb-search-toggle{
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
    }

    .header-right-icons > .header-search.bb-expand-search:hover .bb-search-input,
    .header-right-icons > .header-search.bb-expand-search:focus-within .bb-search-input,
    .header-right-icons > .header-search.bb-expand-search.search-open .bb-search-input{
        width: min(280px, 62vw) !important;
        padding: 0 48px 0 14px !important;
    }

    .header-icon-separator{
        height: 28px !important;
        margin: 0 2px !important;
    }

    .header-right-icons > .account-box .account-panel{
        right: 6px !important;
        top: 88px !important;
    }
}

@media (max-width: 575.98px){
    /* On very small screen keep search first, but hide wishlist separator/wishlist if Bootstrap hides heart */
    .header-right-icons > .header-icon-separator.d-none.d-sm-inline-block{
        display: none !important;
    }

    .header-right-icons > .icon-box,
    .header-right-icons > .account-box.icon-box,
    .header-right-icons > .cart-icon-box.icon-box{
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        flex-basis: 34px !important;
        margin: 0 4px !important;
    }

    .header-right-icons > .header-search.bb-expand-search{
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        flex-basis: 36px !important;
        height: 36px !important;
        margin-right: 4px !important;
    }

    .header-right-icons > .header-search.bb-expand-search .bb-search-input{
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }

    .header-right-icons > .header-search.bb-expand-search .search-btn,
    .header-right-icons > .header-search.bb-expand-search .bb-search-toggle{
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }

    .header-right-icons > .header-search.bb-expand-search:hover .bb-search-input,
    .header-right-icons > .header-search.bb-expand-search:focus-within .bb-search-input,
    .header-right-icons > .header-search.bb-expand-search.search-open .bb-search-input{
        width: min(238px, 58vw) !important;
        padding: 0 46px 0 12px !important;
    }

    .header-icon-separator{
        height: 24px !important;
        margin: 0 1px !important;
    }
}


/* =========================================================
   100% FINAL PATCH: SEARCH FIRST + BDT VISIBLE + THIN SEPARATORS
   Paste at the VERY END of public/frontend/css/frontend.css
   - Search icon stays as the first icon at the left side of the right icon group.
   - Search input expands LEFT on hover/focus/touch without moving other icons.
   - BDT currency badge is visible on desktop and mobile.
   - Separators are slim vertical lines, not thick bars.
   ========================================================= */

.main-header-row{
    display:flex !important;
    align-items:center !important;
    position:relative !important;
    overflow:visible !important;
}

.bb-header-currency-chip{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 auto !important;
    margin-left:auto !important;
    margin-right:20px !important;
    padding:7px 16px !important;
    min-width:58px !important;
    height:34px !important;
    border-radius:999px !important;
    background:linear-gradient(180deg,#f8dc43 0%,#d5a300 52%,#a77a00 100%) !important;
    color:#111 !important;
    font-size:13px !important;
    font-weight:900 !important;
    line-height:1 !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 4px 10px rgba(0,0,0,.12) !important;
    white-space:nowrap !important;
    z-index:50 !important;
}

.header-right-icons{
    margin-left:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:0 !important;
    overflow:visible !important;
    position:relative !important;
    z-index:2147482000 !important;
    flex:0 0 auto !important;
}

.header-right-icons .header-icon-separator{
    display:inline-block !important;
    width:1px !important;
    min-width:1px !important;
    height:28px !important;
    margin:0 13px !important;
    background:linear-gradient(180deg, transparent 0%, rgba(154,116,0,.55) 18%, rgba(196,154,34,.95) 50%, rgba(154,116,0,.55) 82%, transparent 100%) !important;
    border:0 !important;
    box-shadow:none !important;
    opacity:1 !important;
}

.header-right-icons .icon-box{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    flex:0 0 42px !important;
    padding:0 !important;
    margin:0 !important;
    color:#c49a22 !important;
}

.header-right-icons .icon-box i{
    font-size:24px !important;
}

/* Search icon must be the FIRST icon and expand to the LEFT */
.header-right-icons > .header-search.bb-expand-search{
    order:-100 !important;
    position:relative !important;
    flex:0 0 48px !important;
    width:48px !important;
    min-width:48px !important;
    max-width:48px !important;
    height:48px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    z-index:2147482600 !important;
}

.header-right-icons > .header-search.bb-expand-search .bb-search-input{
    position:absolute !important;
    top:50% !important;
    right:0 !important;
    left:auto !important;
    transform:translateY(-50%) !important;
    width:48px !important;
    min-width:48px !important;
    max-width:none !important;
    height:48px !important;
    opacity:0 !important;
    pointer-events:none !important;
    padding:0 52px 0 18px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.98) !important;
    border:2px solid rgba(0,74,173,.22) !important;
    color:#263442 !important;
    box-shadow:0 8px 22px rgba(0,0,0,.16) !important;
    transition:width .28s ease, opacity .18s ease !important;
    z-index:2147482500 !important;
}

.header-right-icons > .header-search.bb-expand-search .search-btn,
.header-right-icons > .header-search.bb-expand-search .bb-search-toggle{
    position:absolute !important;
    top:50% !important;
    right:0 !important;
    left:auto !important;
    transform:translateY(-50%) !important;
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    border-radius:50% !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:radial-gradient(circle at 35% 25%,#fff26a 0%,#d8a800 52%,#8f6800 100%) !important;
    color:#004aad !important;
    border:1px solid rgba(255,255,255,.72) !important;
    box-shadow:0 4px 12px rgba(0,0,0,.22), inset 0 1px 4px rgba(255,255,255,.75) !important;
    z-index:2147482700 !important;
    cursor:pointer !important;
}

.header-right-icons > .header-search.bb-expand-search .search-btn i,
.header-right-icons > .header-search.bb-expand-search .bb-search-toggle i{
    font-size:20px !important;
    color:#004aad !important;
}

.header-right-icons > .header-search.bb-expand-search:hover .bb-search-input,
.header-right-icons > .header-search.bb-expand-search:focus-within .bb-search-input,
.header-right-icons > .header-search.bb-expand-search.search-open .bb-search-input{
    width:min(520px, 54vw) !important;
    opacity:1 !important;
    pointer-events:auto !important;
}

/* Account dropdown should stay above the expanded search and menu/slider */
.account-box,
.account-panel{
    z-index:2147482800 !important;
}

.modal{z-index:2147483000 !important;}
.modal-backdrop{z-index:2147482990 !important;}

@media (max-width:991.98px){
    .bb-header-currency-chip{
        margin-right:10px !important;
        padding:6px 12px !important;
        min-width:48px !important;
        height:31px !important;
        font-size:12px !important;
    }

    .header-right-icons .header-icon-separator{
        height:23px !important;
        margin:0 8px !important;
    }

    .header-right-icons .icon-box{
        width:36px !important;
        height:36px !important;
        min-width:36px !important;
        flex-basis:36px !important;
    }

    .header-right-icons .icon-box i{
        font-size:20px !important;
    }

    .header-right-icons > .header-search.bb-expand-search{
        width:40px !important;
        min-width:40px !important;
        max-width:40px !important;
        height:40px !important;
        flex-basis:40px !important;
    }

    .header-right-icons > .header-search.bb-expand-search .bb-search-input{
        width:40px !important;
        min-width:40px !important;
        height:40px !important;
        padding:0 46px 0 14px !important;
    }

    .header-right-icons > .header-search.bb-expand-search .search-btn,
    .header-right-icons > .header-search.bb-expand-search .bb-search-toggle{
        width:40px !important;
        height:40px !important;
        min-width:40px !important;
    }

    .header-right-icons > .header-search.bb-expand-search .search-btn i,
    .header-right-icons > .header-search.bb-expand-search .bb-search-toggle i{
        font-size:17px !important;
    }

    .header-right-icons > .header-search.bb-expand-search:hover .bb-search-input,
    .header-right-icons > .header-search.bb-expand-search:focus-within .bb-search-input,
    .header-right-icons > .header-search.bb-expand-search.search-open .bb-search-input{
        width:min(300px, 74vw) !important;
    }
}

@media (max-width:575.98px){
    .bb-header-currency-chip{
        margin-right:7px !important;
        min-width:44px !important;
        padding:5px 9px !important;
        font-size:11px !important;
    }

    .header-right-icons .header-icon-separator{
        height:20px !important;
        margin:0 6px !important;
    }

    .header-right-icons .icon-box{
        width:32px !important;
        height:32px !important;
        min-width:32px !important;
        flex-basis:32px !important;
    }

    .header-right-icons .icon-box i{
        font-size:18px !important;
    }

    .header-right-icons > .header-search.bb-expand-search{
        width:36px !important;
        min-width:36px !important;
        max-width:36px !important;
        height:36px !important;
        flex-basis:36px !important;
    }

    .header-right-icons > .header-search.bb-expand-search .bb-search-input{
        width:36px !important;
        min-width:36px !important;
        height:36px !important;
        padding:0 42px 0 12px !important;
    }

    .header-right-icons > .header-search.bb-expand-search .search-btn,
    .header-right-icons > .header-search.bb-expand-search .bb-search-toggle{
        width:36px !important;
        height:36px !important;
        min-width:36px !important;
    }

    .header-right-icons > .header-search.bb-expand-search:hover .bb-search-input,
    .header-right-icons > .header-search.bb-expand-search:focus-within .bb-search-input,
    .header-right-icons > .header-search.bb-expand-search.search-open .bb-search-input{
        width:min(255px, 72vw) !important;
    }
}

/* =========================================================
   FINAL PRODUCT CARD FLIP UPDATE
   Purpose:
   - Product image covers the full card.
   - Only View and Add to Cart buttons are shown.
   - Name/category stay inside image at bottom.
   - Hover/touch flips smoothly to golden details side.
   - Existing AJAX/cart/filter/currency logic untouched.
========================================================= */
.bb-flip-products-row .product-card.bb-flip-product-card{
    position: relative !important;
    height: 430px !important;
    min-height: 430px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.16) !important;
    overflow: visible !important;
    perspective: 1200px !important;
    transform: none !important;
}

.bb-flip-products-row .product-card.bb-flip-product-card:hover{
    transform: none !important;
    box-shadow: 0 18px 38px rgba(0,0,0,.20) !important;
}

.bb-flip-card-inner{
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    transform-style: preserve-3d !important;
    transition: transform .72s cubic-bezier(.2,.75,.25,1) !important;
}

.bb-flip-product-card:hover .bb-flip-card-inner,
.bb-flip-product-card:focus-within .bb-flip-card-inner,
.bb-flip-product-card.is-flipped .bb-flip-card-inner{
    transform: rotateY(180deg) !important;
}

.bb-flip-card-face{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid rgba(0,74,173,.14) !important;
}

.bb-flip-card-front{
    z-index: 2 !important;
}

.bb-flip-card-back{
    transform: rotateY(180deg) !important;
    background:
        radial-gradient(circle at top left, rgba(255,247,174,.96) 0%, rgba(229,180,0,.96) 38%, rgba(183,132,0,.98) 100%) !important;
    color: #111827 !important;
    display: flex !important;
}

.bb-flip-image-link{
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.bb-flip-product-image,
.bb-flip-products-row .product-image{
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform .45s ease !important;
}

.bb-flip-product-card:hover .bb-flip-product-image,
.bb-flip-product-card.is-flipped .bb-flip-product-image{
    transform: scale(1.04) !important;
}

.bb-flip-front-gradient{
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 52% !important;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.38) 48%, rgba(0,0,0,.82) 100%) !important;
    pointer-events: none !important;
    z-index: 3 !important;
}

.bb-flip-front-info{
    position: absolute !important;
    left: 18px !important;
    right: 18px !important;
    bottom: 86px !important;
    z-index: 4 !important;
}

.bb-flip-front-info .product-category{
    color: rgba(255,255,255,.88) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.45) !important;
}

.bb-flip-front-info .product-title,
.bb-flip-front-info .product-title-link{
    color: #ffffff !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
    font-weight: 900 !important;
    text-shadow: 0 3px 10px rgba(0,0,0,.55) !important;
    margin: 0 !important;
}

.bb-flip-front-actions,
.bb-flip-back-actions{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    z-index: 5 !important;
}

.bb-flip-front-actions{
    position: absolute !important;
    left: 18px !important;
    right: 18px !important;
    bottom: 22px !important;
}

.bb-flip-front-actions .btn,
.bb-flip-back-actions .btn{
    border-radius: 999px !important;
    font-weight: 900 !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
    line-height: 1 !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.16) !important;
}

.bb-flip-front-actions .btn-product-view,
.bb-flip-back-actions .btn-product-view{
    background: rgba(255,255,255,.94) !important;
    color: #003d93 !important;
    border: 1px solid rgba(0,61,147,.18) !important;
}

.bb-flip-front-actions .btn-product-cart,
.bb-flip-back-actions .btn-product-cart{
    background: #d80202 !important;
    color: #ffffff !important;
    border: 0 !important;
}

.bb-flip-back-content{
    width: 100% !important;
    height: 100% !important;
    padding: 28px 22px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.06) 45%, rgba(91,62,0,.10) 100%) !important;
}

.bb-back-category{
    color: #7b0000 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 800 !important;
}

.bb-back-title,
.bb-back-title .product-title-link{
    color: #003d93 !important;
    font-size: 20px !important;
    line-height: 1.28 !important;
    font-weight: 900 !important;
    margin-bottom: 14px !important;
}

.bb-back-price{
    min-height: auto !important;
}

.bb-back-price .price-regular,
.bb-back-price .price-new{
    color: #d80202 !important;
    font-size: 25px !important;
    font-weight: 900 !important;
}

.bb-back-price .price-old{
    color: rgba(0,0,0,.58) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

.bb-back-desc{
    color: #1d2430 !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    margin-bottom: 18px !important;
}

.bb-flip-card-front .badge-discount,
.bb-flip-card-front .badge-couple{
    z-index: 6 !important;
}

/* Hide old separate body/action/image icon layout only inside flip cards */
.bb-flip-product-card .product-body,
.bb-flip-product-card .product-image-actions{
    display: none !important;
}

@media (max-width: 1199.98px){
    .bb-flip-products-row .product-card.bb-flip-product-card{
        height: 410px !important;
        min-height: 410px !important;
    }
}

@media (max-width: 767.98px){
    .bb-flip-products-row .product-card.bb-flip-product-card{
        height: 390px !important;
        min-height: 390px !important;
    }

    .bb-flip-front-info{
        left: 14px !important;
        right: 14px !important;
        bottom: 82px !important;
    }

    .bb-flip-front-info .product-title,
    .bb-flip-front-info .product-title-link{
        font-size: 17px !important;
    }

    .bb-flip-front-actions{
        left: 14px !important;
        right: 14px !important;
        bottom: 18px !important;
    }

    .bb-flip-front-actions .btn,
    .bb-flip-back-actions .btn{
        flex: 1 1 0 !important;
        padding: 10px 8px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    .bb-flip-back-content{
        padding: 22px 18px 20px !important;
    }

    .bb-back-title,
    .bb-back-title .product-title-link{
        font-size: 18px !important;
    }

    .bb-back-price .price-regular,
    .bb-back-price .price-new{
        font-size: 22px !important;
    }
}

@media (max-width: 575.98px){
    .bb-flip-products-row .product-card.bb-flip-product-card{
        height: 370px !important;
        min-height: 370px !important;
    }
}


/* =========================================================
   100% FINAL PATCH: transparent search, Montserrat,
   thin separators, silver flip back, menu colors,
   guaranteed opposite hero scrolling.
   Paste at VERY END of frontend.css
========================================================= */
html, body, button, input, select, textarea, .btn, .form-control{
    font-family: 'Montserrat', Arial, Helvetica, sans-serif !important;
}

/* Header height and bigger marquee text */
.bb-logo-bar,
.main-header-wrap{
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}
.main-header-row{
    min-height: 78px !important;
}
.bb-header-notice-marquee .bb-marquee-track{
    font-size: 17px !important;
    animation-name: bbHeaderNewsLeft !important;
    animation-duration: 24s !important;
}
.bb-header-discount-marquee .bb-marquee-track{
    font-size: 20px !important;
    animation-name: bbHeaderDiscountRight !important;
    animation-duration: 24s !important;
}
.bb-header-discount-marquee .bb-marquee-track span:not(:first-child),
.bb-header-discount-marquee .bb-dot-gap:not(:first-of-type){
    display: none !important;
}
@keyframes bbHeaderNewsLeft{
    0%{ transform: translateX(0); }
    100%{ transform: translateX(-100%); }
}
@keyframes bbHeaderDiscountRight{
    0%{ transform: translateX(-100%); }
    100%{ transform: translateX(0); }
}

/* Right-side icon group: search must be first/leftmost */
.header-right-icons{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    overflow: visible !important;
    margin-left: auto !important;
}
.header-right-icons > .header-search.bb-expand-search{ order: 1 !important; }
.header-right-icons > .bb-header-currency{ order: 3 !important; }
.header-right-icons > .account-box{ order: 5 !important; }
.header-right-icons > a[aria-label="Wishlist"]{ order: 7 !important; }
.header-right-icons > a[aria-label="Cart"]{ order: 9 !important; }
.header-right-icons > .header-icon-separator:nth-of-type(1){ order: 2 !important; }
.header-right-icons > .header-icon-separator:nth-of-type(2){ order: 4 !important; }
.header-right-icons > .header-icon-separator:nth-of-type(3){ order: 6 !important; }
.header-right-icons > .header-icon-separator:nth-of-type(4){ order: 8 !important; }

/* Remove any old pseudo separators that caused duplicate bars */
.header-right-icons::before,
.header-right-icons::after,
.header-right-icons .icon-box::before,
.header-right-icons .icon-box::after,
.header-right-icons .bb-expand-search::before,
.header-right-icons .bb-expand-search::after,
.header-right-icons .bb-header-currency::before,
.header-right-icons .bb-header-currency::after{
    content: none !important;
    display: none !important;
}

/* Thin separators only */
.header-icon-separator{
    display: inline-block !important;
    width: 1px !important;
    min-width: 1px !important;
    height: 30px !important;
    margin: 0 16px !important;
    background: linear-gradient(180deg, transparent 0%, rgba(198,151,0,.92) 22%, rgba(198,151,0,.92) 78%, transparent 100%) !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Icon size slightly smaller and clean */
.header-right-icons .icon-box{
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
    background: transparent !important;
    border: 0 !important;
    color: #c49a22 !important;
    box-shadow: none !important;
}
.header-right-icons .icon-box i{
    font-size: 26px !important;
}

/* Search icon: always transparent, gold outline/icon, expands left without BDT blocking it */
.header-right-icons .header-search.bb-expand-search{
    position: relative !important;
    width: 54px !important;
    min-width: 54px !important;
    height: 54px !important;
    flex: 0 0 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    z-index: 100200 !important;
}
.header-right-icons .header-search.bb-expand-search .bb-search-input{
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 54px !important;
    height: 54px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    padding: 0 64px 0 22px !important;
    border-radius: 999px !important;
    border: 2px solid rgba(196,154,34,.78) !important;
    background: rgba(255,255,255,.93) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.12) !important;
    transition: width .30s ease, opacity .20s ease !important;
    z-index: 1 !important;
}
.header-right-icons .header-search.bb-expand-search .search-btn,
.header-right-icons .header-search.bb-expand-search .bb-search-toggle,
.search-btn,
.bb-search-toggle{
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    border-radius: 50% !important;
    background: transparent !important;
    background-image: none !important;
    color: #c49a22 !important;
    border: 2px solid #c49a22 !important;
    box-shadow: none !important;
    z-index: 3 !important;
}
.header-right-icons .header-search.bb-expand-search .search-btn i,
.header-right-icons .header-search.bb-expand-search .bb-search-toggle i,
.search-btn i,
.bb-search-toggle i{
    color: #c49a22 !important;
    font-size: 22px !important;
}
.header-right-icons .header-search.bb-expand-search:hover .bb-search-input,
.header-right-icons .header-search.bb-expand-search:focus-within .bb-search-input,
.header-right-icons .header-search.bb-expand-search.search-open .bb-search-input{
    width: min(650px, 58vw) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* BDT badge: outline only */
.currency-chip,
.bb-header-currency{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 84px !important;
    height: 48px !important;
    padding: 0 20px !important;
    border-radius: 999px !important;
    background: transparent !important;
    background-image: none !important;
    color: #111111 !important;
    border: 2px solid #c49a22 !important;
    box-shadow: none !important;
    font-weight: 900 !important;
    font-size: 15px !important;
}

/* Menu colors */
.desktop-category-link,
.bb-blue-menu-bar .desktop-category-link{
    color: #d6a400 !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.65) !important;
}
.desktop-category-link:hover,
.desktop-category-item:hover > .desktop-category-link,
.bb-blue-menu-bar .desktop-category-item:hover .desktop-category-link,
.bb-blue-menu-bar .desktop-category-link:hover,
.desktop-category-link.active-menu-filter{
    color: #003d93 !important;
}

/* Product flip backside silver instead of gold */
.product-card,
.product-card .card,
.product-card .product-card-back,
.product-card .flip-card-back,
.product-card .back,
.flip-card-back,
.product-flip-back,
.product-card-back,
.product-card .card-back,
.product-card .product-back,
.product-card .product-flip-inner,
.product-card .product-body,
.product-card .card-body{
    background: linear-gradient(90deg, #c8d2ce 0%, #eef2f0 26%, #ffffff 50%, #eef2f0 74%, #c8d2ce 100%) !important;
}

/* Guaranteed dual hero scroller */
.bb-dual-hero-section{
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-top: 3px solid #0046a3 !important;
    border-bottom: 4px solid #d6a400 !important;
}
.bb-dual-hero-grid{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
}
.bb-dual-hero-panel{
    position: relative !important;
    min-height: 520px !important;
    overflow: hidden !important;
}
.bb-dual-left{ border-right: 2px solid #d6a400 !important; }
.bb-dual-hero-track{
    display: flex !important;
    width: 400% !important;
    height: 100% !important;
    min-height: 520px !important;
    will-change: transform !important;
}
.bb-dual-slide{
    flex: 0 0 25% !important;
    min-height: 520px !important;
    background-size: cover !important;
    background-position: center !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    padding: 64px 7vw !important;
}
.bb-scroll-left{
    animation: bbHeroScrollLeft 18s linear infinite !important;
}
.bb-scroll-right{
    animation: bbHeroScrollRight 18s linear infinite !important;
    transform: translateX(-50%);
}
.bb-dual-hero-panel:hover .bb-dual-hero-track{
    animation-play-state: paused !important;
}
@keyframes bbHeroScrollLeft{
    0%{ transform: translateX(0); }
    100%{ transform: translateX(-50%); }
}
@keyframes bbHeroScrollRight{
    0%{ transform: translateX(-50%); }
    100%{ transform: translateX(0); }
}

@media (max-width: 991.98px){
    .bb-logo-bar,
    .main-header-wrap{
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
    .main-header-row{
        min-height: 72px !important;
    }
    .bb-header-notice-marquee .bb-marquee-track{ font-size: 14px !important; }
    .bb-header-discount-marquee .bb-marquee-track{ font-size: 16px !important; }
    .header-icon-separator{
        height: 25px !important;
        margin: 0 10px !important;
    }
    .header-right-icons .header-search.bb-expand-search{
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        flex-basis: 44px !important;
    }
    .header-right-icons .header-search.bb-expand-search .search-btn,
    .header-right-icons .header-search.bb-expand-search .bb-search-toggle{
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
    }
    .header-right-icons .header-search.bb-expand-search:hover .bb-search-input,
    .header-right-icons .header-search.bb-expand-search:focus-within .bb-search-input,
    .header-right-icons .header-search.bb-expand-search.search-open .bb-search-input{
        width: min(330px, 74vw) !important;
    }
    .currency-chip,
    .bb-header-currency{
        min-width: 68px !important;
        height: 40px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
    }
    .bb-dual-hero-grid{
        grid-template-columns: 1fr !important;
    }
    .bb-dual-left{
        border-right: 0 !important;
        border-bottom: 2px solid #d6a400 !important;
    }
    .bb-dual-hero-panel,
    .bb-dual-hero-track,
    .bb-dual-slide{
        min-height: 360px !important;
    }
    .bb-dual-slide{
        padding: 38px 24px !important;
    }
}
@media (max-width: 575.98px){
    .header-icon-separator{
        margin: 0 6px !important;
        height: 22px !important;
    }
    .header-right-icons .icon-box{
        width: 36px !important;
        height: 36px !important;
        flex-basis: 36px !important;
    }
    .header-right-icons .icon-box i{
        font-size: 20px !important;
    }
    .currency-chip,
    .bb-header-currency{
        min-width: 55px !important;
        height: 34px !important;
        padding: 0 9px !important;
        font-size: 11px !important;
    }
    .bb-dual-hero-panel,
    .bb-dual-hero-track,
    .bb-dual-slide{
        min-height: 300px !important;
    }
    .bb-dual-slide{
        padding: 28px 16px !important;
    }
}

/* Exact flip card backside silver override */
.bb-flip-card-back,
.bb-flip-products-row .bb-flip-card-back,
.product-card.bb-flip-product-card .bb-flip-card-back{
    background: linear-gradient(90deg, #c8d2ce 0%, #eef2f0 26%, #ffffff 50%, #eef2f0 74%, #c8d2ce 100%) !important;
    color: #111827 !important;
}

/* =========================================================
   FINAL PATCH: Search full expand + silver flip background + End Time visibility
   Paste at the VERY END of public/frontend/css/frontend.css
   Backend/cart/coupon/category logic untouched.
========================================================= */

/* 1) Search icon must be outline/transparent by default and expand fully */
.header-right-icons{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:12px !important;
    overflow:visible !important;
}

.header-right-icons .header-search.bb-expand-search,
.header-right-icons #bbHeaderSearch{
    position:relative !important;
    order:1 !important;
    flex:0 0 54px !important;
    width:54px !important;
    min-width:54px !important;
    max-width:none !important;
    height:54px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    z-index:2147481000 !important;
    transition:flex-basis .28s ease, width .28s ease !important;
}

.header-right-icons .header-search.bb-expand-search:hover,
.header-right-icons .header-search.bb-expand-search:focus-within,
.header-right-icons .header-search.bb-expand-search.search-open,
.header-right-icons #bbHeaderSearch:hover,
.header-right-icons #bbHeaderSearch:focus-within,
.header-right-icons #bbHeaderSearch.search-open{
    flex:0 0 min(640px, 52vw) !important;
    width:min(640px, 52vw) !important;
    min-width:54px !important;
    max-width:min(640px, 52vw) !important;
}

.header-right-icons .header-search.bb-expand-search .bb-search-input,
.header-right-icons #bbHeaderSearch .bb-search-input{
    position:absolute !important;
    top:50% !important;
    right:0 !important;
    transform:translateY(-50%) !important;
    width:54px !important;
    height:54px !important;
    opacity:0 !important;
    pointer-events:none !important;
    padding:0 62px 0 22px !important;
    border-radius:999px !important;
    border:2px solid rgba(201,154,34,.72) !important;
    background:rgba(255,255,255,.96) !important;
    box-shadow:0 8px 18px rgba(0,0,0,.10) !important;
    transition:width .28s ease, opacity .18s ease !important;
    z-index:1 !important;
}

.header-right-icons .header-search.bb-expand-search:hover .bb-search-input,
.header-right-icons .header-search.bb-expand-search:focus-within .bb-search-input,
.header-right-icons .header-search.bb-expand-search.search-open .bb-search-input,
.header-right-icons #bbHeaderSearch:hover .bb-search-input,
.header-right-icons #bbHeaderSearch:focus-within .bb-search-input,
.header-right-icons #bbHeaderSearch.search-open .bb-search-input{
    width:100% !important;
    opacity:1 !important;
    pointer-events:auto !important;
}

.header-right-icons .header-search.bb-expand-search .search-btn,
.header-right-icons .header-search.bb-expand-search .bb-search-toggle,
.header-right-icons #bbHeaderSearch .search-btn,
.header-right-icons #bbHeaderSearch .bb-search-toggle{
    position:absolute !important;
    top:50% !important;
    right:0 !important;
    transform:translateY(-50%) !important;
    width:54px !important;
    height:54px !important;
    min-width:54px !important;
    border-radius:50% !important;
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    border:2px solid rgba(201,154,34,.92) !important;
    box-shadow:none !important;
    color:#c49a22 !important;
    z-index:2 !important;
}

.header-right-icons .header-search.bb-expand-search .search-btn:hover,
.header-right-icons .header-search.bb-expand-search .bb-search-toggle:hover,
.header-right-icons #bbHeaderSearch .search-btn:hover,
.header-right-icons #bbHeaderSearch .bb-search-toggle:hover{
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    color:#c49a22 !important;
    box-shadow:0 0 0 3px rgba(201,154,34,.10) !important;
}

.header-right-icons .header-search.bb-expand-search .search-btn i,
.header-right-icons .header-search.bb-expand-search .bb-search-toggle i,
.header-right-icons #bbHeaderSearch .search-btn i,
.header-right-icons #bbHeaderSearch .bb-search-toggle i{
    color:#c49a22 !important;
}

/* BDT badge outline only, but it must not block search expansion */
.header-right-icons .currency-chip,
.header-right-icons .bb-header-currency-chip{
    order:3 !important;
    height:42px !important;
    min-width:74px !important;
    padding:0 20px !important;
    border-radius:999px !important;
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    border:2px solid rgba(201,154,34,.92) !important;
    box-shadow:none !important;
    color:#1d2430 !important;
}

.header-right-icons .currency-chip strong,
.header-right-icons .bb-header-currency-chip strong{
    color:#1d2430 !important;
    font-weight:900 !important;
}

/* Thin separators only where actual separator tags exist */
.header-right-icons .header-icon-separator{
    order:2 !important;
    width:1px !important;
    height:30px !important;
    flex:0 0 1px !important;
    margin:0 4px !important;
    display:inline-block !important;
    background:linear-gradient(180deg, transparent, rgba(201,154,34,.82), transparent) !important;
    border:0 !important;
    box-shadow:none !important;
}
.header-right-icons .bb-header-currency-chip + .header-icon-separator{ order:4 !important; }
.header-right-icons .account-box{ order:5 !important; }
.header-right-icons .account-box + .header-icon-separator{ order:6 !important; }
.header-right-icons .wishlist-icon-box{ order:7 !important; }
.header-right-icons .wishlist-icon-box + .header-icon-separator{ order:8 !important; }
.header-right-icons .cart-icon-box{ order:9 !important; }

/* 2) Product card flip/back side must be silver, never gold */
.product-card-back,
.product-flip-back,
.flip-card-back,
.bb-flip-card-back,
.product-card .back,
.product-card .back-side,
.product-card .card-back,
.product-card .product-back,
.product-card [class*="back"],
.product-card [class*="Back"],
.product-card [class*="flip-back"],
.product-card [class*="FlipBack"]{
    background:linear-gradient(135deg,#b8c4c0 0%,#eef2f0 45%,#ffffff 55%,#c4cfcc 100%) !important;
    background-color:#dce5e2 !important;
    color:#1d2430 !important;
}

.product-card-back *,
.product-flip-back *,
.flip-card-back *,
.bb-flip-card-back *,
.product-card .back *,
.product-card .back-side *,
.product-card .card-back *,
.product-card .product-back *,
.product-card [class*="back"] *,
.product-card [class*="Back"] *{
    background-color:transparent !important;
}

/* Common 3D flip wrappers: make the hidden/back face silver even if HTML uses custom names */
[class*="flip"] [class*="back"],
[class*="Flip"] [class*="Back"],
[class*="flip"] [class*="Back"],
[class*="Flip"] [class*="back"]{
    background:linear-gradient(135deg,#b8c4c0 0%,#eef2f0 45%,#ffffff 55%,#c4cfcc 100%) !important;
    background-color:#dce5e2 !important;
}

/* 3) Keep discount/end-time marquee readable */
.bb-header-discount-marquee,
.bb-header-discount-marquee .bb-marquee-track{
    overflow:visible !important;
}
.bb-header-discount-marquee .bb-marquee-track span{
    display:inline-block !important;
}

@media (max-width:991.98px){
    .header-right-icons .header-search.bb-expand-search,
    .header-right-icons #bbHeaderSearch{
        flex-basis:44px !important;
        width:44px !important;
        min-width:44px !important;
        height:44px !important;
    }

    .header-right-icons .header-search.bb-expand-search:hover,
    .header-right-icons .header-search.bb-expand-search:focus-within,
    .header-right-icons .header-search.bb-expand-search.search-open,
    .header-right-icons #bbHeaderSearch:hover,
    .header-right-icons #bbHeaderSearch:focus-within,
    .header-right-icons #bbHeaderSearch.search-open{
        flex-basis:min(300px, 72vw) !important;
        width:min(300px, 72vw) !important;
        max-width:min(300px, 72vw) !important;
    }

    .header-right-icons .header-search.bb-expand-search .bb-search-input,
    .header-right-icons #bbHeaderSearch .bb-search-input,
    .header-right-icons .header-search.bb-expand-search .search-btn,
    .header-right-icons .header-search.bb-expand-search .bb-search-toggle,
    .header-right-icons #bbHeaderSearch .search-btn,
    .header-right-icons #bbHeaderSearch .bb-search-toggle{
        width:44px !important;
        height:44px !important;
        min-width:44px !important;
    }

    .header-right-icons .header-search.bb-expand-search:hover .bb-search-input,
    .header-right-icons .header-search.bb-expand-search:focus-within .bb-search-input,
    .header-right-icons .header-search.bb-expand-search.search-open .bb-search-input,
    .header-right-icons #bbHeaderSearch:hover .bb-search-input,
    .header-right-icons #bbHeaderSearch:focus-within .bb-search-input,
    .header-right-icons #bbHeaderSearch.search-open .bb-search-input{
        width:100% !important;
        padding:0 54px 0 15px !important;
    }

    .header-right-icons .currency-chip,
    .header-right-icons .bb-header-currency-chip{
        min-width:62px !important;
        height:36px !important;
        padding:0 13px !important;
    }
}

@media (max-width:575.98px){
    .header-right-icons{
        gap:7px !important;
    }
    .header-right-icons .header-icon-separator{
        height:24px !important;
        margin:0 1px !important;
    }
    .header-right-icons .header-search.bb-expand-search:hover,
    .header-right-icons .header-search.bb-expand-search:focus-within,
    .header-right-icons .header-search.bb-expand-search.search-open,
    .header-right-icons #bbHeaderSearch:hover,
    .header-right-icons #bbHeaderSearch:focus-within,
    .header-right-icons #bbHeaderSearch.search-open{
        flex-basis:min(230px, 64vw) !important;
        width:min(230px, 64vw) !important;
        max-width:min(230px, 64vw) !important;
    }
}

/* =========================================================
   FINAL MINI PATCH: Header End Time + Flip Add to Cart Text
   Purpose:
   1) Header discount marquee must always show End Time beside discount text.
   2) Flip card backside Add to Cart button text/icon will be dark blue.
   Backend/cart/filter logic untouched.
========================================================= */

.bb-header-discount-marquee,
.bb-header-discount-marquee .bb-marquee-track{
    overflow: visible !important;
    white-space: nowrap !important;
}

.bb-header-discount-marquee .bb-marquee-track span,
.bb-header-discount-marquee .bb-end-time-text{
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.bb-header-discount-marquee .bb-end-time-text{
    margin-left: 38px !important;
    margin-right: 80px !important;
    color: #d80202 !important;
    font-weight: 900 !important;
    text-transform: lowercase !important;
    text-shadow: 0 1px 0 #ffd900, 0 0 6px rgba(255,238,0,.65) !important;
}

/* Flip card backside cart button text/icon = dark blue */
.bb-flip-card-back .btn-product-cart,
.bb-flip-back-actions .btn-product-cart,
.bb-flip-card-back .add-to-cart-btn,
.bb-flip-card-back .btn-add-to-cart,
.bb-flip-card-back button[class*="cart"],
.bb-flip-card-back a[class*="cart"]{
    color: #003d93 !important;
    -webkit-text-fill-color: #003d93 !important;
    text-shadow: none !important;
}

.bb-flip-card-back .btn-product-cart i,
.bb-flip-back-actions .btn-product-cart i,
.bb-flip-card-back .add-to-cart-btn i,
.bb-flip-card-back .btn-add-to-cart i,
.bb-flip-card-back button[class*="cart"] i,
.bb-flip-card-back a[class*="cart"] i{
    color: #003d93 !important;
    -webkit-text-fill-color: #003d93 !important;
}

/* =========================================================
   LIVE FINAL PATCH: MOBILE HEADER ICONS + METALLIC COLORS
   Purpose:
   1) Mobile portrait: show Search, BDT, User, Wishlist and Bag icons.
   2) Search + BDT always transparent outline style.
   3) Header icons glossy/sharp; bag icon outline only.
   4) News = metallic red, discount = metallic blue.
   5) Add to Cart button = metallic red.
   Paste at the very end of public/frontend/css/frontend.css
========================================================= */

:root{
    --bb-metal-red-1:#6b0000;
    --bb-metal-red-2:#d80202;
    --bb-metal-red-3:#ff3b3b;
    --bb-metal-blue-1:#001b66;
    --bb-metal-blue-2:#004aad;
    --bb-metal-blue-3:#39a7ff;
    --bb-metal-gold:#c79a17;
    --bb-metal-gold-light:#f5d96a;
}

/* whole site font */
html, body, button, input, select, textarea,
.site-header, .site-header *, .product-card, .product-card *, .site-footer, .site-footer *{
    font-family: 'Montserrat', Arial, Helvetica, sans-serif !important;
}

/* metallic red news marquee */
.bb-header-notice-marquee .bb-marquee-track,
.bb-header-notice-marquee .bb-marquee-track *{
    color: #9b0000 !important;
    background: linear-gradient(180deg, var(--bb-metal-red-3) 0%, var(--bb-metal-red-2) 46%, var(--bb-metal-red-1) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.45), 0 0 7px rgba(216,2,2,.18) !important;
}

/* metallic blue discount marquee */
.bb-header-discount-marquee .bb-marquee-track,
.bb-header-discount-marquee .bb-marquee-track span,
.bb-header-discount-marquee .bb-end-time-text,
.bb-header-discount-marquee .bb-dot-gap{
    color: #004aad !important;
    background: linear-gradient(180deg, var(--bb-metal-blue-3) 0%, var(--bb-metal-blue-2) 48%, var(--bb-metal-blue-1) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.55), 0 0 7px rgba(0,74,173,.20) !important;
}

/* default transparent outline search icon and BDT badge */
.header-right-icons .header-search.bb-expand-search,
.header-right-icons .header-search.bb-expand-search:hover,
.header-right-icons .header-search.bb-expand-search:focus-within,
.header-right-icons .header-search.bb-expand-search.search-open{
    background: transparent !important;
}

.header-right-icons .bb-expand-search .search-btn,
.header-right-icons .bb-expand-search .bb-search-toggle,
.header-right-icons .bb-expand-search:hover .search-btn,
.header-right-icons .bb-expand-search:focus-within .search-btn,
.header-right-icons .bb-expand-search.search-open .search-btn{
    background: rgba(255,255,255,.08) !important;
    border: 2px solid var(--bb-metal-gold) !important;
    color: var(--bb-metal-gold) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.75),
        inset 0 -10px 18px rgba(199,154,23,.10),
        0 5px 16px rgba(0,0,0,.16) !important;
}

.header-right-icons .bb-expand-search .search-btn i,
.header-right-icons .bb-expand-search .bb-search-toggle i{
    color: var(--bb-metal-gold) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.78), 0 0 5px rgba(199,154,23,.45) !important;
}

.currency-chip.bb-header-currency,
.currency-chip.bb-header-currency:hover,
.bb-header-currency-chip,
.bb-header-currency-chip:hover{
    background: rgba(255,255,255,.08) !important;
    border: 2px solid var(--bb-metal-gold) !important;
    color: #101820 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.75),
        inset 0 -10px 18px rgba(199,154,23,.08),
        0 4px 13px rgba(0,0,0,.10) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.60) !important;
}
.currency-chip.bb-header-currency strong,
.bb-header-currency-chip strong{
    color: #101820 !important;
    -webkit-text-fill-color: #101820 !important;
}

/* glossy header icons */
.header-right-icons .icon-box,
.header-right-icons .wishlist-icon-box,
.header-right-icons .account-box,
.header-right-icons .cart-icon-box{
    background: linear-gradient(145deg, rgba(255,255,255,.28), rgba(255,255,255,.03)) !important;
    border: 1px solid rgba(199,154,23,.42) !important;
    color: var(--bb-metal-gold) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.72),
        inset 0 -10px 16px rgba(199,154,23,.08),
        0 4px 12px rgba(0,0,0,.08) !important;
}
.header-right-icons .icon-box i{
    color: var(--bb-metal-gold) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.85), 0 0 6px rgba(199,154,23,.40) !important;
}
.header-right-icons .icon-box:hover i,
.header-right-icons .icon-box:hover{
    color: #004aad !important;
}
.header-right-icons .icon-box:hover i{
    text-shadow: 0 1px 0 rgba(255,255,255,.85), 0 0 6px rgba(0,74,173,.32) !important;
}

/* bag icon outline only */
.header-right-icons .cart-icon-box i{
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: 1.35px var(--bb-metal-gold) !important;
    text-shadow: none !important;
}
.header-right-icons .cart-icon-box:hover i{
    -webkit-text-stroke-color: #004aad !important;
}

/* thin separators only, no duplicated thick bars */
.header-right-icons .header-icon-separator{
    width: 1px !important;
    min-width: 1px !important;
    height: 32px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    background: linear-gradient(180deg, transparent 0%, rgba(199,154,23,.85) 28%, rgba(199,154,23,.85) 72%, transparent 100%) !important;
    box-shadow: none !important;
    border: 0 !important;
}
.header-right-icons .header-icon-separator::before,
.header-right-icons .header-icon-separator::after{
    content: none !important;
    display: none !important;
}

/* Add to Cart buttons metallic red */
.btn-add-to-cart,
.add-to-cart-btn,
.product-card .btn-primary,
.product-card .btn-add-cart,
.bb-add-to-cart,
button[data-action="add-to-cart"],
.add-to-cart,
.product-card button[type="button"].btn-primary,
.product-card .card-footer .btn-primary{
    background: linear-gradient(180deg, #ff3b3b 0%, #d80202 46%, #8b0000 100%) !important;
    border: 1px solid rgba(139,0,0,.70) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 14px rgba(216,2,2,.24) !important;
}
.btn-add-to-cart:hover,
.add-to-cart-btn:hover,
.product-card .btn-primary:hover,
.product-card .btn-add-cart:hover,
.bb-add-to-cart:hover,
button[data-action="add-to-cart"]:hover,
.add-to-cart:hover,
.product-card .card-footer .btn-primary:hover{
    background: linear-gradient(180deg, #ff5555 0%, #e10000 46%, #760000 100%) !important;
    color: #ffffff !important;
}

/* mobile portrait: make every right-side icon visible */
@media (max-width: 575.98px){
    .bb-logo-bar,
    .main-header-wrap{
        padding-top: 20px !important;
        padding-bottom: 20px !important;
        overflow: visible !important;
    }

    .main-header-row{
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 6px !important;
        min-height: 76px !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .mobile-nav-toggle{
        width: 28px !important;
        height: 34px !important;
        flex: 0 0 28px !important;
        padding: 0 !important;
        margin-right: 2px !important;
        color: var(--bb-metal-gold) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .mobile-nav-toggle i{
        font-size: 22px !important;
        color: var(--bb-metal-gold) !important;
    }

    .site-logo{
        flex: 0 0 118px !important;
        width: 118px !important;
        max-width: 118px !important;
        overflow: hidden !important;
    }
    .site-logo img,
    .bb-main-logo{
        width: 118px !important;
        max-width: 118px !important;
        height: auto !important;
        max-height: 45px !important;
        object-fit: contain !important;
    }

    .header-right-icons{
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin-left: 2px !important;
        gap: 3px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        overflow: visible !important;
    }

    .header-right-icons .header-icon-separator{
        height: 26px !important;
        margin: 0 2px !important;
        flex: 0 0 1px !important;
    }

    .header-right-icons .bb-expand-search{
        order: 1 !important;
        flex: 0 0 36px !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        margin: 0 !important;
    }
    .header-right-icons .bb-expand-search .search-btn,
    .header-right-icons .bb-expand-search .bb-search-toggle{
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        font-size: 15px !important;
    }
    .header-right-icons .bb-expand-search .bb-search-input{
        height: 36px !important;
        width: 36px !important;
        padding: 0 42px 0 12px !important;
    }
    .header-right-icons .bb-expand-search:hover .bb-search-input,
    .header-right-icons .bb-expand-search:focus-within .bb-search-input,
    .header-right-icons .bb-expand-search.search-open .bb-search-input{
        width: min(210px, calc(100vw - 28px)) !important;
        max-width: min(210px, calc(100vw - 28px)) !important;
    }

    .currency-chip.bb-header-currency,
    .bb-header-currency-chip{
        flex: 0 0 50px !important;
        width: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
        height: 34px !important;
        padding: 0 !important;
        font-size: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
    }

    .header-right-icons .icon-box,
    .header-right-icons .wishlist-icon-box,
    .header-right-icons .account-box,
    .header-right-icons .cart-icon-box{
        display: inline-flex !important;
        flex: 0 0 30px !important;
        width: 30px !important;
        height: 34px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        border-radius: 999px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .header-right-icons .icon-box i{
        font-size: 18px !important;
    }

    .cart-count{
        top: -6px !important;
        right: -7px !important;
        min-width: 17px !important;
        height: 17px !important;
        line-height: 17px !important;
        font-size: 10px !important;
    }
}

@media (max-width: 390px){
    .site-logo,
    .site-logo img,
    .bb-main-logo{
        flex-basis: 108px !important;
        width: 108px !important;
        max-width: 108px !important;
    }
    .header-right-icons .header-icon-separator{
        margin: 0 1px !important;
    }
    .currency-chip.bb-header-currency,
    .bb-header-currency-chip{
        flex-basis: 46px !important;
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        font-size: 11px !important;
    }
    .header-right-icons .icon-box,
    .header-right-icons .wishlist-icon-box,
    .header-right-icons .account-box,
    .header-right-icons .cart-icon-box{
        flex-basis: 28px !important;
        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
    }
    .header-right-icons .icon-box i{
        font-size: 17px !important;
    }
    .header-right-icons .bb-expand-search,
    .header-right-icons .bb-expand-search .search-btn,
    .header-right-icons .bb-expand-search .bb-search-toggle{
        flex-basis: 34px !important;
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 34px !important;
    }
}

/* =========================================================
   FINAL PATCH: Real icons + dark-blue BDT + mobile footer stack
   Purpose:
   1) Fix FontAwesome icons showing as square boxes after Montserrat override.
   2) Keep header icons glossy/sharp but preserve actual icon glyphs.
   3) Make BDT badge dark blue.
   4) Make cart/bag icon outline style only.
   5) Stack footer columns correctly on mobile.
========================================================= */

/* FontAwesome must not inherit Montserrat, otherwise icons become square boxes */
.header-right-icons i,
.mobile-nav-toggle i,
.account-panel i,
.footer-social i,
.fa,
.fas,
.far,
.fab{
    font-family: "Font Awesome 5 Free" !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
}

.fas,
.fa{
    font-weight: 900 !important;
}

.far{
    font-weight: 400 !important;
}

.fab{
    font-family: "Font Awesome 5 Brands" !important;
    font-weight: 400 !important;
}

/* Header icon group: keep all icons visible in mobile vertical screen */
.header-right-icons{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    min-width: 0 !important;
}

/* Glossy but transparent icon buttons */
.header-right-icons .icon-box,
.header-right-icons .search-btn,
.header-right-icons .bb-search-toggle{
    background: radial-gradient(circle at 32% 18%, rgba(255,255,255,.92) 0%, rgba(255,255,255,.46) 28%, rgba(255,255,255,.08) 68%, rgba(197,154,25,.10) 100%) !important;
    border: 2px solid rgba(197,154,25,.92) !important;
    color: #c59a19 !important;
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,.72),
        inset 0 -3px 8px rgba(197,154,25,.10),
        0 5px 12px rgba(0,0,0,.10) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.85), 0 0 7px rgba(197,154,25,.22) !important;
}

.header-right-icons .icon-box i,
.header-right-icons .search-btn i,
.header-right-icons .bb-search-toggle i{
    color: #c59a19 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.85), 0 0 6px rgba(197,154,25,.30) !important;
}

.header-right-icons .icon-box:hover,
.header-right-icons .search-btn:hover,
.header-right-icons .bb-search-toggle:hover{
    background: radial-gradient(circle at 32% 18%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.55) 30%, rgba(255,255,255,.12) 68%, rgba(0,58,140,.10) 100%) !important;
    border-color: #003a8c !important;
    color: #003a8c !important;
}

.header-right-icons .icon-box:hover i,
.header-right-icons .search-btn:hover i,
.header-right-icons .bb-search-toggle:hover i{
    color: #003a8c !important;
}

/* Bag icon outline only, no fill impression */
.cart-icon-box i.fa-shopping-bag{
    color: transparent !important;
    -webkit-text-stroke: 1.6px #c59a19 !important;
    text-stroke: 1.6px #c59a19 !important;
    text-shadow: none !important;
}

.cart-icon-box:hover i.fa-shopping-bag{
    -webkit-text-stroke-color: #003a8c !important;
    text-stroke-color: #003a8c !important;
}

/* BDT badge dark blue */
.currency-chip,
.bb-header-currency,
.bb-header-currency-chip{
    color: #003a8c !important;
    border-color: #003a8c !important;
    background: transparent !important;
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,.72),
        0 5px 12px rgba(0,0,0,.08) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.85) !important;
}

.currency-chip strong,
.bb-header-currency strong,
.bb-header-currency-chip strong{
    color: #003a8c !important;
    font-weight: 900 !important;
}

/* News = metallic red, discount = metallic blue */
.bb-header-notice-marquee .bb-marquee-track{
    color: #b00000 !important;
    background: linear-gradient(180deg, #ff6a6a 0%, #c00000 48%, #690000 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.35) !important;
}

.bb-header-discount-marquee .bb-marquee-track,
.bb-header-discount-marquee .bb-marquee-track span,
.bb-header-discount-marquee .bb-end-time-text{
    color: #003a8c !important;
    background: linear-gradient(180deg, #4d8cff 0%, #004aad 52%, #001c66 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.42) !important;
}

/* Add to Cart = metallic red */
.add-to-cart-btn,
.btn-add-to-cart,
.product-card .btn-primary,
.bb-flip-products-row .btn-primary,
.bb-flip-products-row .add-to-cart,
.bb-back-cart,
button[data-action="add-to-cart"]{
    background: linear-gradient(180deg, #ff4040 0%, #d80202 47%, #850000 100%) !important;
    border-color: #8c0000 !important;
    color: #ffffff !important;
    box-shadow: inset 0 2px 4px rgba(255,255,255,.34), 0 8px 18px rgba(216,2,2,.20) !important;
}

/* Mobile header: reduce gaps so search, BDT, user, wish and bag all fit */
@media (max-width: 767.98px){
    .main-header-row{
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .mobile-nav-toggle{
        flex: 0 0 30px !important;
        width: 30px !important;
        height: 30px !important;
        margin-right: 2px !important;
    }

    .site-logo{
        flex: 0 1 auto !important;
        min-width: 0 !important;
    }

    .site-logo img,
    .bb-main-logo{
        max-width: 150px !important;
        height: auto !important;
        max-height: 46px !important;
    }

    .header-right-icons{
        flex: 1 1 auto !important;
        justify-content: flex-end !important;
        gap: 5px !important;
        margin-left: 2px !important;
        min-width: 0 !important;
    }

    .header-icon-separator{
        width: 1px !important;
        min-width: 1px !important;
        height: 28px !important;
        margin: 0 2px !important;
        background: linear-gradient(180deg, transparent 0%, rgba(197,154,25,.90) 46%, transparent 100%) !important;
    }

    .header-right-icons .icon-box,
    .header-right-icons .header-search.bb-expand-search,
    .header-right-icons .search-btn,
    .header-right-icons .bb-search-toggle{
        flex: 0 0 36px !important;
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        margin: 0 !important;
    }

    .header-right-icons .icon-box i,
    .header-right-icons .search-btn i,
    .header-right-icons .bb-search-toggle i{
        font-size: 18px !important;
    }

    .currency-chip,
    .bb-header-currency,
    .bb-header-currency-chip{
        flex: 0 0 58px !important;
        width: 58px !important;
        min-width: 58px !important;
        height: 36px !important;
        padding: 0 !important;
        font-size: 14px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .cart-count{
        top: -8px !important;
        right: -6px !important;
        min-width: 18px !important;
        height: 18px !important;
        line-height: 18px !important;
        font-size: 10px !important;
    }
}

@media (max-width: 420px){
    .site-logo img,
    .bb-main-logo{
        max-width: 132px !important;
        max-height: 42px !important;
    }

    .header-right-icons{
        gap: 3px !important;
    }

    .header-icon-separator{
        margin: 0 1px !important;
    }

    .header-right-icons .icon-box,
    .header-right-icons .header-search.bb-expand-search,
    .header-right-icons .search-btn,
    .header-right-icons .bb-search-toggle{
        flex-basis: 32px !important;
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
    }

    .header-right-icons .icon-box i,
    .header-right-icons .search-btn i,
    .header-right-icons .bb-search-toggle i{
        font-size: 16px !important;
    }

    .currency-chip,
    .bb-header-currency,
    .bb-header-currency-chip{
        flex-basis: 52px !important;
        width: 52px !important;
        min-width: 52px !important;
        height: 32px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 360px){
    .site-logo img,
    .bb-main-logo{
        max-width: 112px !important;
    }

    .header-icon-separator{
        display: none !important;
    }

    .header-right-icons{
        gap: 2px !important;
    }
}

/* Footer mobile stack: 3 columns become vertical, full width */
@media (max-width: 767.98px){
    .site-footer .row,
    .bb-footer .row,
    footer .row{
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
    }

    .site-footer [class*="col-"],
    .bb-footer [class*="col-"],
    footer [class*="col-"]{
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        text-align: center !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-bottom: 10px !important;
    }

    .site-footer ul,
    .bb-footer ul,
    footer ul{
        padding-left: 0 !important;
        list-style: none !important;
    }

    .site-footer .footer-social,
    .bb-footer .footer-social,
    footer .footer-social{
        justify-content: center !important;
        text-align: center !important;
        margin-top: 8px !important;
    }
}

/* =========================================================
   FINAL PATCH: product Add to Cart metallic red + footer social icons
   Purpose:
   1) Product card front Add to Cart button matches flip/back Add to Cart button.
   2) Footer social icons show clearly, with Pinterest, X and LinkedIn support.
   3) Footer icons are transparent fill with golden border.
   Paste/keep this block at the VERY END of public/frontend/css/frontend.css
========================================================= */

:root{
    --bb-metallic-red-1:#ff2d2d;
    --bb-metallic-red-2:#d80202;
    --bb-metallic-red-3:#8e0000;
    --bb-dark-blue-final:#003b93;
    --bb-golden-final:#c99700;
}

/* Product card Add to Cart button: same metallic red style as flip/back button */
.product-card .btn-primary,
.product-card .add-to-cart-btn,
.product-card .btn-add-to-cart,
.product-card button.add-to-cart,
.product-card a.add-to-cart,
.product-card .ajax-add-to-cart,
.product-card .btn-cart,
.product-card .bb-add-to-cart-btn,
.product-card .bb-front-add-cart,
.bb-flip-products-row .product-card .btn-primary,
.bb-flip-products-row .product-card .add-to-cart-btn,
.bb-flip-products-row .product-card .btn-add-to-cart,
.bb-product-card .btn-primary,
.bb-product-card .add-to-cart-btn{
    background: linear-gradient(180deg, var(--bb-metallic-red-1) 0%, var(--bb-metallic-red-2) 46%, var(--bb-metallic-red-3) 100%) !important;
    border: 1px solid rgba(255,255,255,.34) !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.35) !important;
    box-shadow:
        inset 0 2px 5px rgba(255,255,255,.45),
        inset 0 -4px 8px rgba(80,0,0,.42),
        0 8px 18px rgba(216,2,2,.25) !important;
}

.product-card .btn-primary i,
.product-card .add-to-cart-btn i,
.product-card .btn-add-to-cart i,
.product-card button.add-to-cart i,
.product-card a.add-to-cart i,
.product-card .ajax-add-to-cart i,
.product-card .btn-cart i,
.product-card .bb-add-to-cart-btn i,
.product-card .bb-front-add-cart i{
    color: #ffffff !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.35) !important;
}

.product-card .btn-primary:hover,
.product-card .add-to-cart-btn:hover,
.product-card .btn-add-to-cart:hover,
.product-card button.add-to-cart:hover,
.product-card a.add-to-cart:hover,
.product-card .ajax-add-to-cart:hover,
.product-card .btn-cart:hover,
.product-card .bb-add-to-cart-btn:hover,
.product-card .bb-front-add-cart:hover{
    background: linear-gradient(180deg, #ff4545 0%, #e10000 48%, #9b0000 100%) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* Footer social icons: transparent fill + golden outline + visible icon glyphs */
.site-footer .footer-social,
.site-footer .bb-footer-social-icons{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.site-footer .footer-social a,
.site-footer .bb-footer-social-icons a,
.footer-social a,
.bb-footer-social-icons a{
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    background-image: none !important;
    border: 2px solid var(--bb-golden-final) !important;
    color: var(--bb-dark-blue-final) !important;
    box-shadow:
        inset 0 1px 4px rgba(255,255,255,.55),
        0 4px 12px rgba(0,0,0,.10) !important;
    margin: 0 !important;
    opacity: 1 !important;
    overflow: visible !important;
    text-decoration: none !important;
    transition: transform .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease !important;
}

.site-footer .footer-social a i,
.site-footer .bb-footer-social-icons a i,
.footer-social a i,
.bb-footer-social-icons a i,
.site-footer .footer-social .bb-x-icon,
.site-footer .bb-footer-social-icons .bb-x-icon{
    display: inline-block !important;
    font-size: 18px !important;
    line-height: 1 !important;
    color: var(--bb-dark-blue-final) !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.75) !important;
}

.site-footer .footer-social .bb-x-icon,
.site-footer .bb-footer-social-icons .bb-x-icon{
    font-family: Montserrat, Arial, sans-serif !important;
    font-weight: 900 !important;
    font-size: 17px !important;
}

.site-footer .footer-social a:hover,
.site-footer .bb-footer-social-icons a:hover,
.footer-social a:hover,
.bb-footer-social-icons a:hover{
    background: transparent !important;
    border-color: #d80202 !important;
    color: #d80202 !important;
    transform: translateY(-2px) !important;
    box-shadow:
        inset 0 1px 4px rgba(255,255,255,.65),
        0 8px 18px rgba(0,0,0,.16) !important;
}

.site-footer .footer-social a:hover i,
.site-footer .bb-footer-social-icons a:hover i,
.site-footer .footer-social a:hover .bb-x-icon,
.site-footer .bb-footer-social-icons a:hover .bb-x-icon{
    color: #d80202 !important;
}

/* Mobile footer stacking and icon centering */
@media (max-width: 767.98px){
    .site-footer .row > [class*="col-"]{
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        margin-bottom: 18px !important;
    }

    .site-footer .footer-links{
        padding-left: 0 !important;
        text-align: center !important;
    }

    .site-footer .footer-social,
    .site-footer .bb-footer-social-icons{
        justify-content: center !important;
        width: 100% !important;
    }
}

/* =========================================================
   FINAL FIX: Add to Cart dark-blue label + visible footer icons
   Date: 2026-06-02
   ========================================================= */
:root{
    --bb-dark-blue-final: #004aad;
    --bb-metallic-red-1: #ff4a4a;
    --bb-metallic-red-2: #e10000;
    --bb-metallic-red-3: #9b0000;
    --bb-golden-final: #c99500;
}

/* Product card Add to Cart button: metallic red fill, dark-blue text/icon */
.product-card .btn-danger,
.product-card .btn-primary,
.product-card .add-to-cart,
.product-card .add-to-cart-btn,
.product-card .btn-add-to-cart,
.product-card .ajax-add-to-cart,
.product-card .btn-cart,
.product-card .bb-add-to-cart,
.product-card .bb-add-to-cart-btn,
.product-card .bb-front-add-cart,
.product-card .bb-back-cart,
.product-card button[data-action="add-to-cart"],
.product-card a[data-action="add-to-cart"],
.bb-flip-products-row .btn-danger,
.bb-flip-products-row .btn-primary,
.bb-flip-products-row .add-to-cart,
.bb-flip-products-row .add-to-cart-btn,
.bb-flip-products-row .btn-add-to-cart,
.bb-flip-products-row .ajax-add-to-cart,
.bb-flip-products-row .btn-cart,
.bb-flip-products-row .bb-add-to-cart,
.bb-flip-products-row .bb-add-to-cart-btn,
.bb-flip-products-row .bb-front-add-cart,
.bb-flip-products-row .bb-back-cart,
.bb-flip-products-row button[data-action="add-to-cart"],
.bb-flip-products-row a[data-action="add-to-cart"]{
    background: linear-gradient(180deg, var(--bb-metallic-red-1) 0%, var(--bb-metallic-red-2) 48%, var(--bb-metallic-red-3) 100%) !important;
    background-color: var(--bb-metallic-red-2) !important;
    border: 1px solid rgba(255,255,255,.42) !important;
    color: var(--bb-dark-blue-final) !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.32) !important;
    box-shadow:
        inset 0 2px 5px rgba(255,255,255,.45),
        inset 0 -4px 9px rgba(80,0,0,.42),
        0 8px 18px rgba(216,2,2,.28) !important;
}

.product-card .btn-danger i,
.product-card .btn-primary i,
.product-card .add-to-cart i,
.product-card .add-to-cart-btn i,
.product-card .btn-add-to-cart i,
.product-card .ajax-add-to-cart i,
.product-card .btn-cart i,
.product-card .bb-add-to-cart i,
.product-card .bb-add-to-cart-btn i,
.product-card .bb-front-add-cart i,
.product-card .bb-back-cart i,
.product-card button[data-action="add-to-cart"] i,
.product-card a[data-action="add-to-cart"] i,
.bb-flip-products-row .btn-danger i,
.bb-flip-products-row .btn-primary i,
.bb-flip-products-row .add-to-cart i,
.bb-flip-products-row .add-to-cart-btn i,
.bb-flip-products-row .btn-add-to-cart i,
.bb-flip-products-row .ajax-add-to-cart i,
.bb-flip-products-row .btn-cart i,
.bb-flip-products-row .bb-add-to-cart i,
.bb-flip-products-row .bb-add-to-cart-btn i,
.bb-flip-products-row .bb-front-add-cart i,
.bb-flip-products-row .bb-back-cart i,
.bb-flip-products-row button[data-action="add-to-cart"] i,
.bb-flip-products-row a[data-action="add-to-cart"] i{
    color: var(--bb-dark-blue-final) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.32) !important;
}

.product-card .btn-danger:hover,
.product-card .btn-primary:hover,
.product-card .add-to-cart:hover,
.product-card .add-to-cart-btn:hover,
.product-card .btn-add-to-cart:hover,
.product-card .ajax-add-to-cart:hover,
.product-card .btn-cart:hover,
.product-card .bb-add-to-cart:hover,
.product-card .bb-add-to-cart-btn:hover,
.product-card .bb-front-add-cart:hover,
.product-card .bb-back-cart:hover,
.product-card button[data-action="add-to-cart"]:hover,
.product-card a[data-action="add-to-cart"]:hover,
.bb-flip-products-row .btn-danger:hover,
.bb-flip-products-row .btn-primary:hover,
.bb-flip-products-row .add-to-cart:hover,
.bb-flip-products-row .add-to-cart-btn:hover,
.bb-flip-products-row .btn-add-to-cart:hover,
.bb-flip-products-row .ajax-add-to-cart:hover,
.bb-flip-products-row .btn-cart:hover,
.bb-flip-products-row .bb-add-to-cart:hover,
.bb-flip-products-row .bb-add-to-cart-btn:hover,
.bb-flip-products-row .bb-front-add-cart:hover,
.bb-flip-products-row .bb-back-cart:hover,
.bb-flip-products-row button[data-action="add-to-cart"]:hover,
.bb-flip-products-row a[data-action="add-to-cart"]:hover{
    background: linear-gradient(180deg, #ff5959 0%, #e10000 48%, #860000 100%) !important;
    color: var(--bb-dark-blue-final) !important;
}

/* Footer social icon wrapper */
.site-footer .footer-social,
.site-footer .bb-footer-social-icons,
.footer-social.bb-footer-social-icons{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.site-footer .footer-social a,
.site-footer .bb-footer-social-icons a,
.footer-social.bb-footer-social-icons a{
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    background-image: none !important;
    border: 2px solid var(--bb-golden-final) !important;
    color: var(--bb-dark-blue-final) !important;
    text-decoration: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    box-shadow:
        inset 0 1px 5px rgba(255,255,255,.65),
        0 5px 12px rgba(0,0,0,.10) !important;
}

/* Important: global Montserrat rules can break Font Awesome. Force correct icon font. */
.site-footer .footer-social a i,
.site-footer .bb-footer-social-icons a i,
.footer-social.bb-footer-social-icons a i{
    font-family: "Font Awesome 5 Brands" !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 19px !important;
    line-height: 1 !important;
    color: var(--bb-dark-blue-final) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.75) !important;
}

/* Fallback content if cPanel/browser does not render brand glyphs inside <i> */
.site-footer .bb-footer-social-icons a i::before{ display: inline-block !important; }
.site-footer .bb-footer-social-icons a i.fa-facebook-f::before{ content: "\f39e" !important; }
.site-footer .bb-footer-social-icons a i.fa-instagram::before{ content: "\f16d" !important; }
.site-footer .bb-footer-social-icons a i.fa-youtube::before{ content: "\f167" !important; }
.site-footer .bb-footer-social-icons a i.fa-pinterest-p::before{ content: "\f231" !important; }
.site-footer .bb-footer-social-icons a i.fa-linkedin-in::before{ content: "\f0e1" !important; }

.site-footer .footer-social .bb-x-icon,
.site-footer .bb-footer-social-icons .bb-x-icon,
.footer-social.bb-footer-social-icons .bb-x-icon{
    font-family: Montserrat, Arial, sans-serif !important;
    font-size: 19px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    color: var(--bb-dark-blue-final) !important;
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.75) !important;
}

.site-footer .footer-social a:hover,
.site-footer .bb-footer-social-icons a:hover,
.footer-social.bb-footer-social-icons a:hover{
    background: transparent !important;
    border-color: #d80202 !important;
    color: #d80202 !important;
    transform: translateY(-2px) !important;
}
.site-footer .footer-social a:hover i,
.site-footer .bb-footer-social-icons a:hover i,
.site-footer .footer-social a:hover .bb-x-icon,
.site-footer .bb-footer-social-icons a:hover .bb-x-icon{
    color: #d80202 !important;
}

@media (max-width: 767.98px){
    .site-footer .footer-social,
    .site-footer .bb-footer-social-icons,
    .footer-social.bb-footer-social-icons{
        justify-content: center !important;
        gap: 9px !important;
        width: 100% !important;
    }
    .site-footer .footer-social a,
    .site-footer .bb-footer-social-icons a,
    .footer-social.bb-footer-social-icons a{
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }
}

/* Product details page final fixes: paste at the very bottom of public/frontend/css/frontend.css */
.product-details-page,
.product-details-page::before,
.product-details-page::after,
.bb-product-breadcrumb,
.bb-product-breadcrumb::before,
.bb-product-breadcrumb::after,
.bb-product-breadcrumb .breadcrumb,
.bb-product-detail-card,
.bb-related-section{
    border-top: 0 !important;
    outline-top: 0 !important;
    box-shadow: none !important;
}

.product-details-page{
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.bb-product-breadcrumb{
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.bb-detail-cart-btn,
.bb-detail-cart-btn.btn-add-to-cart,
.bb-detail-cart-btn:not(:disabled),
.bb-detail-actions .btn-add-to-cart{
    background: linear-gradient(135deg, #8f0008 0%, #e60012 42%, #ff4b55 50%, #b0000b 100%) !important;
    background-color: #d90010 !important;
    color: #004aad !important;
    border: 1px solid rgba(255,255,255,.65) !important;
    box-shadow: 0 12px 25px rgba(214,0,16,.32), inset 0 1px 0 rgba(255,255,255,.55) !important;
    text-shadow: none !important;
}

.bb-detail-cart-btn i,
.bb-detail-actions .btn-add-to-cart i{
    color: #004aad !important;
    text-shadow: none !important;
}

.bb-detail-cart-btn:hover,
.bb-detail-actions .btn-add-to-cart:hover{
    background: linear-gradient(135deg, #760006 0%, #d40010 45%, #ff5a63 52%, #9b0009 100%) !important;
    color: #004aad !important;
    transform: translateY(-2px);
}

/* =========================================================
   FINAL MOBILE PATCH: Search icon must NOT overlap logo
   Paste at the VERY END of public/frontend/css/frontend.css
   ========================================================= */
@media (max-width: 767.98px){
    .bb-logo-bar,
    .main-header-wrap{
        overflow: hidden !important;
    }

    .main-header-row{
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        min-height: 86px !important;
        padding-left: 8px !important;
        padding-right: 6px !important;
        overflow: visible !important;
    }

    .mobile-menu-toggle,
    .bb-mobile-menu-toggle,
    .hamburger-menu,
    .menu-toggle{
        flex: 0 0 34px !important;
        width: 34px !important;
        min-width: 34px !important;
        margin-right: 2px !important;
        z-index: 20 !important;
    }

    .header-logo,
    .logo-box,
    .site-logo,
    .main-logo,
    .bb-logo{
        flex: 0 0 112px !important;
        width: 112px !important;
        max-width: 112px !important;
        min-width: 112px !important;
        margin: 0 4px 0 0 !important;
        position: relative !important;
        z-index: 10 !important;
        overflow: hidden !important;
    }

    .header-logo img,
    .logo-box img,
    .site-logo img,
    .main-logo img,
    .bb-logo img{
        width: 112px !important;
        max-width: 112px !important;
        height: auto !important;
        object-fit: contain !important;
    }

    .header-right-icons{
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 166px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0 !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 30 !important;
    }

    .header-right-icons .header-icon-separator{
        width: 1px !important;
        min-width: 1px !important;
        height: 26px !important;
        margin: 0 3px !important;
        flex: 0 0 1px !important;
    }

    .header-right-icons .icon-box,
    .header-right-icons > .account-box.icon-box,
    .header-right-icons > .cart-icon-box.icon-box,
    .header-right-icons > a.icon-box{
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
    }

    .header-right-icons .icon-box i,
    .header-right-icons > .account-box.icon-box i,
    .header-right-icons > .cart-icon-box.icon-box i,
    .header-right-icons > a.icon-box i{
        font-size: 19px !important;
        line-height: 1 !important;
    }

    .currency-chip,
    .bb-header-currency,
    .bb-header-currency-chip{
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
        height: 34px !important;
        flex: 0 0 60px !important;
        padding: 0 6px !important;
        font-size: 14px !important;
        margin: 0 !important;
        color: #004aad !important;
    }

    .header-right-icons .header-search.bb-expand-search,
    .header-right-icons > .header-search.bb-expand-search{
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        flex: 0 0 36px !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        order: 1 !important;
        transform: none !important;
        z-index: 40 !important;
    }

    .header-right-icons .header-search.bb-expand-search .search-btn,
    .header-right-icons .header-search.bb-expand-search .bb-search-toggle,
    .header-right-icons > .header-search.bb-expand-search .search-btn,
    .header-right-icons > .header-search.bb-expand-search .bb-search-toggle{
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        right: 0 !important;
        left: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: transparent !important;
        background-image: none !important;
        color: #c49a22 !important;
        border: 2px solid #c49a22 !important;
        z-index: 45 !important;
    }

    .header-right-icons .header-search.bb-expand-search .search-btn i,
    .header-right-icons .header-search.bb-expand-search .bb-search-toggle i{
        font-size: 18px !important;
        color: #c49a22 !important;
    }

    .header-right-icons .header-search.bb-expand-search .bb-search-input,
    .header-right-icons > .header-search.bb-expand-search .bb-search-input{
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        right: 0 !important;
        left: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        padding: 0 40px 0 10px !important;
        z-index: 42 !important;
    }

    .header-right-icons .header-search.bb-expand-search:hover .bb-search-input,
    .header-right-icons .header-search.bb-expand-search:focus-within .bb-search-input,
    .header-right-icons .header-search.bb-expand-search.search-open .bb-search-input,
    .header-right-icons > .header-search.bb-expand-search:hover .bb-search-input,
    .header-right-icons > .header-search.bb-expand-search:focus-within .bb-search-input,
    .header-right-icons > .header-search.bb-expand-search.search-open .bb-search-input{
        width: min(210px, calc(100vw - 176px)) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

@media (max-width: 389.98px){
    .header-logo,
    .logo-box,
    .site-logo,
    .main-logo,
    .bb-logo{
        flex-basis: 98px !important;
        width: 98px !important;
        min-width: 98px !important;
        max-width: 98px !important;
    }

    .header-logo img,
    .logo-box img,
    .site-logo img,
    .main-logo img,
    .bb-logo img{
        width: 98px !important;
        max-width: 98px !important;
    }

    .header-right-icons{
        max-width: calc(100vw - 150px) !important;
    }

    .header-right-icons .icon-box,
    .header-right-icons > .account-box.icon-box,
    .header-right-icons > .cart-icon-box.icon-box,
    .header-right-icons > a.icon-box{
        width: 31px !important;
        min-width: 31px !important;
        height: 31px !important;
        flex-basis: 31px !important;
    }

    .header-right-icons .header-search.bb-expand-search,
    .header-right-icons > .header-search.bb-expand-search{
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        flex-basis: 32px !important;
    }

    .header-right-icons .header-search.bb-expand-search .search-btn,
    .header-right-icons .header-search.bb-expand-search .bb-search-toggle,
    .header-right-icons > .header-search.bb-expand-search .search-btn,
    .header-right-icons > .header-search.bb-expand-search .bb-search-toggle{
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
    }

    .currency-chip,
    .bb-header-currency,
    .bb-header-currency-chip{
        width: 54px !important;
        min-width: 54px !important;
        max-width: 54px !important;
        flex-basis: 54px !important;
        height: 31px !important;
        font-size: 13px !important;
    }
}

/* =========================================================
   FINAL 100% MOBILE FIX: Search icon must never overlap logo
   Issue: on small mobile screens header actions were too wide,
   so the search circle moved over the logo. This override keeps
   hamburger + logo + all right icons in one safe flex line.
   ========================================================= */
@media (max-width: 575.98px){
    .site-header,
    .site-header .container,
    .main-header-row,
    .header-right-icons{
        overflow: visible !important;
    }

    .main-header-row{
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        width: 100% !important;
        min-width: 0 !important;
        position: relative !important;
    }

    .mobile-nav-toggle,
    .mobile-menu-toggle,
    .navbar-toggler{
        flex: 0 0 34px !important;
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 34px !important;
        margin: 0 3px 0 0 !important;
        padding: 0 !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        z-index: 20 !important;
    }

    .site-logo,
    .header-logo,
    .logo-box,
    .main-logo,
    .bb-logo{
        flex: 0 0 112px !important;
        width: 112px !important;
        min-width: 112px !important;
        max-width: 112px !important;
        margin: 0 4px 0 0 !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        z-index: 15 !important;
    }

    .site-logo img,
    .header-logo img,
    .logo-box img,
    .main-logo img,
    .bb-logo img,
    img.bb-main-logo{
        width: 112px !important;
        max-width: 112px !important;
        height: auto !important;
        display: block !important;
    }

    .header-right-icons{
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        z-index: 30 !important;
    }

    .header-right-icons > *{
        flex-shrink: 0 !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .header-right-icons > * + *{
        border-left: 1px solid rgba(196,154,34,.55) !important;
        padding-left: 5px !important;
        margin-left: 5px !important;
    }

    .header-right-icons .header-search.bb-expand-search,
    .header-right-icons > .header-search.bb-expand-search,
    .header-right-icons #bbHeaderSearch{
        order: 1 !important;
        flex: 0 0 34px !important;
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 50 !important;
    }

    .header-right-icons .header-search.bb-expand-search .search-btn,
    .header-right-icons .header-search.bb-expand-search .bb-search-toggle{
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        border-radius: 50% !important;
        position: relative !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        z-index: 55 !important;
    }

    .currency-chip,
    .bb-header-currency,
    .bb-header-currency-chip,
    .header-currency-badge{
        order: 2 !important;
        flex: 0 0 52px !important;
        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
        height: 32px !important;
        font-size: 12px !important;
        color: #001f5b !important;
    }

    .header-right-icons .account-box,
    .header-right-icons .user-account-box,
    .header-right-icons .header-action-item.account-box,
    .header-right-icons .wishlist-icon,
    .header-right-icons .header-wishlist,
    .header-right-icons .cart-icon-wrapper,
    .header-right-icons .header-cart,
    .header-right-icons .icon-box,
    .header-right-icons > a.icon-box{
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        flex-basis: 32px !important;
    }

    .header-right-icons .account-box,
    .header-right-icons .user-account-box,
    .header-right-icons .header-action-item.account-box{ order: 3 !important; }
    .header-right-icons .wishlist-icon,
    .header-right-icons .header-wishlist,
    .header-right-icons .header-wishlist.icon-box{ order: 4 !important; }
    .header-right-icons .cart-icon-wrapper,
    .header-right-icons .header-cart,
    .header-right-icons .header-cart.icon-box{ order: 5 !important; }

    .header-right-icons i,
    .header-right-icons svg{
        font-size: 17px !important;
        max-width: 18px !important;
        max-height: 18px !important;
        line-height: 1 !important;
    }

    .header-right-icons .header-search.bb-expand-search .bb-search-input{
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 34px !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* On touch/mobile, do not let search expansion cover logo */
    .header-right-icons .header-search.bb-expand-search:hover .bb-search-input,
    .header-right-icons .header-search.bb-expand-search:focus-within .bb-search-input,
    .header-right-icons .header-search.bb-expand-search.search-open .bb-search-input{
        width: min(180px, calc(100vw - 210px)) !important;
        max-width: min(180px, calc(100vw - 210px)) !important;
        right: 0 !important;
        left: auto !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 45 !important;
    }
}

@media (max-width: 374.98px){
    .main-header-row{ gap: 4px !important; }

    .mobile-nav-toggle,
    .mobile-menu-toggle,
    .navbar-toggler{
        flex-basis: 30px !important;
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
    }

    .site-logo,
    .header-logo,
    .logo-box,
    .main-logo,
    .bb-logo{
        flex-basis: 96px !important;
        width: 96px !important;
        min-width: 96px !important;
        max-width: 96px !important;
        margin-right: 3px !important;
    }

    .site-logo img,
    .header-logo img,
    .logo-box img,
    .main-logo img,
    .bb-logo img,
    img.bb-main-logo{
        width: 96px !important;
        max-width: 96px !important;
    }

    .header-right-icons > * + *{
        padding-left: 3px !important;
        margin-left: 3px !important;
    }

    .header-right-icons .header-search.bb-expand-search,
    .header-right-icons > .header-search.bb-expand-search,
    .header-right-icons #bbHeaderSearch,
    .header-right-icons .header-search.bb-expand-search .search-btn,
    .header-right-icons .header-search.bb-expand-search .bb-search-toggle{
        flex-basis: 30px !important;
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        height: 30px !important;
    }

    .currency-chip,
    .bb-header-currency,
    .bb-header-currency-chip,
    .header-currency-badge{
        flex-basis: 46px !important;
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        height: 30px !important;
        font-size: 11px !important;
    }

    .header-right-icons .account-box,
    .header-right-icons .user-account-box,
    .header-right-icons .header-action-item.account-box,
    .header-right-icons .wishlist-icon,
    .header-right-icons .header-wishlist,
    .header-right-icons .cart-icon-wrapper,
    .header-right-icons .header-cart,
    .header-right-icons .icon-box,
    .header-right-icons > a.icon-box{
        width: 29px !important;
        min-width: 29px !important;
        max-width: 29px !important;
        height: 29px !important;
        flex-basis: 29px !important;
    }
}


/* =========================================================
   FINAL CLIENT UPDATE - HEADER/LOGO/COLOR/FOOTER PERFECT FIX
   Requirements:
   - BDT badge removed from header HTML; keep currency logic from session.
   - Mobile cart/bag icon fully visible on small screens.
   - Metallic red #960000 and metallic silver gradient applied.
   - Header notice/discount marquee font one size larger.
   - Search icon size equal to other icons.
   - Cart bag inner icon white; outline remains golden.
   - Footer text bolder; social icons gold inside + TikTok supported.
   - Add to Cart buttons use metallic red.
========================================================= */
:root{
    --bb-metallic-red:#960000;
    --bb-metallic-red-light:#ff3b3b;
    --bb-metallic-red-mid:#d80000;
    --bb-metallic-red-dark:#5f0000;
    --bb-metallic-blue:#004aad;
    --bb-metallic-gold:#c99a00;
    --bb-metallic-gold-light:#ffe066;
    --bb-metallic-silver-1:#aeb8b4;
    --bb-metallic-silver-2:#d7dfdc;
    --bb-metallic-silver-3:#f8fbfa;
    --bb-metallic-silver-4:#c3cec9;
}

/* Global red/silver polish */
body,
.bb-page-shell,
.site-header,
.bb-logo-bar,
.main-header-wrap,
.desktop-category-bar,
.bb-blue-menu-bar,
.site-footer{
    font-family:'Montserrat', Arial, sans-serif !important;
}

.bb-logo-bar,
.main-header-wrap,
.desktop-category-bar,
.bb-blue-menu-bar,
.site-footer,
.footer-section,
.bb-footer{
    background:linear-gradient(90deg,
        var(--bb-metallic-silver-1) 0%,
        var(--bb-metallic-silver-2) 21%,
        var(--bb-metallic-silver-3) 50%,
        var(--bb-metallic-silver-2) 79%,
        var(--bb-metallic-silver-1) 100%) !important;
}

/* Header height and marquee font size */
.bb-logo-bar,
.main-header-wrap{
    padding-top:16px !important;
    padding-bottom:16px !important;
}
.main-header-row,
.bb-logo-bar .main-header-row,
.main-header-wrap .main-header-row{
    min-height:70px !important;
}
.bb-header-notice-marquee{
    top:4px !important;
    height:22px !important;
    line-height:22px !important;
}
.bb-header-discount-marquee{
    bottom:5px !important;
    height:22px !important;
    line-height:22px !important;
}
.bb-header-notice-marquee .bb-marquee-track{
    font-size:17px !important;
    font-weight:900 !important;
    color:var(--bb-metallic-red) !important;
    text-shadow:0 1px 0 rgba(255,255,255,.85), 0 0 5px rgba(255,60,60,.22) !important;
}
.bb-header-discount-marquee .bb-marquee-track,
.bb-header-discount-marquee .bb-marquee-track span,
.bb-header-discount-marquee .bb-end-time-text{
    font-size:17px !important;
    font-weight:900 !important;
    color:var(--bb-metallic-blue) !important;
    text-shadow:0 1px 0 rgba(255,255,255,.90), 0 2px 4px rgba(0,74,173,.30) !important;
}
.bb-header-discount-marquee .bb-dot-gap{
    color:var(--bb-metallic-gold) !important;
}

/* Remove BDT badge visually also, in case old cached markup remains */
.bb-header-currency,
.bb-header-currency-chip,
.header-right-icons .currency-chip{
    display:none !important;
}

/* Header icon polished style */
.header-right-icons{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:10px !important;
    overflow:visible !important;
    flex:0 1 auto !important;
    min-width:0 !important;
}
.header-icon-separator{
    display:inline-block !important;
    width:1px !important;
    height:34px !important;
    flex:0 0 1px !important;
    margin:0 2px !important;
    background:linear-gradient(180deg, transparent 0%, var(--bb-metallic-gold) 20%, var(--bb-metallic-gold-light) 50%, var(--bb-metallic-gold) 80%, transparent 100%) !important;
    opacity:.75 !important;
}
.header-right-icons .icon-box,
.header-right-icons .header-search.bb-expand-search{
    width:46px !important;
    min-width:46px !important;
    max-width:46px !important;
    height:46px !important;
    flex:0 0 46px !important;
    border-radius:50% !important;
}
.header-right-icons .icon-box{
    background:rgba(255,255,255,.10) !important;
    border:2px solid var(--bb-metallic-gold) !important;
    color:var(--bb-metallic-gold) !important;
    box-shadow:inset 0 2px 6px rgba(255,255,255,.72), 0 5px 14px rgba(0,0,0,.10) !important;
}
.header-right-icons .icon-box i{
    font-size:22px !important;
    line-height:1 !important;
    filter:drop-shadow(0 1px 0 rgba(255,255,255,.65)) !important;
}
.header-right-icons .icon-box:hover{
    color:var(--bb-metallic-red) !important;
    border-color:var(--bb-metallic-red) !important;
    transform:translateY(-1px) !important;
}

/* Search icon: equal size, no filled bigger circle */
.header-right-icons .header-search.bb-expand-search{
    position:relative !important;
    overflow:visible !important;
    margin:0 !important;
    padding:0 !important;
    z-index:100100 !important;
}
.header-right-icons .header-search.bb-expand-search .search-btn,
.header-right-icons .header-search.bb-expand-search .bb-search-toggle{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    max-width:46px !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.10) !important;
    border:2px solid var(--bb-metallic-gold) !important;
    color:var(--bb-metallic-gold) !important;
    box-shadow:inset 0 2px 6px rgba(255,255,255,.72), 0 5px 14px rgba(0,0,0,.10) !important;
}
.header-right-icons .header-search.bb-expand-search .search-btn i,
.header-right-icons .header-search.bb-expand-search .bb-search-toggle i{
    color:var(--bb-metallic-gold) !important;
    font-size:21px !important;
}
.header-right-icons .bb-expand-search .bb-search-input{
    right:0 !important;
    width:46px !important;
    height:46px !important;
    border:2px solid var(--bb-metallic-gold) !important;
    background:rgba(255,255,255,.98) !important;
    box-shadow:0 8px 22px rgba(0,0,0,.16) !important;
}
.header-right-icons .bb-expand-search:hover .bb-search-input,
.header-right-icons .bb-expand-search:focus-within .bb-search-input,
.header-right-icons .bb-expand-search.search-open .bb-search-input{
    width:min(520px, 58vw) !important;
    opacity:1 !important;
    pointer-events:auto !important;
    padding:0 62px 0 20px !important;
}

/* Cart/bag icon: golden outline, white inner bag glyph */
.header-right-icons .cart-icon-box{
    background:rgba(150,0,0,.72) !important;
    border-color:var(--bb-metallic-gold) !important;
}
.header-right-icons .cart-icon-box i,
.header-right-icons .cart-icon-box .fa-shopping-bag{
    color:#ffffff !important;
    text-shadow:0 1px 1px rgba(0,0,0,.45) !important;
    -webkit-text-fill-color:#ffffff !important;
}
.cart-count{
    top:-8px !important;
    right:-7px !important;
    background:#ff0000 !important;
    color:#fff !important;
    z-index:5 !important;
}

/* Metallic red Add to Cart buttons */
.btn-primary,
.product-card .btn-primary,
.bb-detail-cart-btn,
.bb-add-to-cart,
.add-to-cart-btn,
button[data-action="add-to-cart"],
.btn-add-to-cart,
.product-card .add-to-cart,
.product-card .btn-cart,
.bb-flip-product-card .btn-primary,
.bb-flip-product-card .btn-add-to-cart,
.bb-card-back .btn-primary,
.bb-card-back .btn-add-to-cart{
    background:linear-gradient(135deg,
        var(--bb-metallic-red-dark) 0%,
        var(--bb-metallic-red) 28%,
        var(--bb-metallic-red-light) 52%,
        var(--bb-metallic-red-mid) 70%,
        var(--bb-metallic-red-dark) 100%) !important;
    border:1px solid rgba(255,255,255,.28) !important;
    color:#ffffff !important;
    box-shadow:inset 0 2px 5px rgba(255,255,255,.42), 0 9px 22px rgba(150,0,0,.28) !important;
}
.btn-primary i,
.product-card .btn-primary i,
.bb-detail-cart-btn i,
.bb-add-to-cart i,
.add-to-cart-btn i,
.btn-add-to-cart i,
.product-card .add-to-cart i,
.product-card .btn-cart i,
.bb-flip-product-card .btn-primary i,
.bb-flip-product-card .btn-add-to-cart i,
.bb-card-back .btn-primary i,
.bb-card-back .btn-add-to-cart i{
    color:#ffffff !important;
}
.btn-primary:hover,
.product-card .btn-primary:hover,
.bb-detail-cart-btn:hover,
.bb-add-to-cart:hover,
.add-to-cart-btn:hover,
.btn-add-to-cart:hover{
    color:#ffffff !important;
    filter:saturate(1.08) brightness(1.02) !important;
}

/* Use provided metallic red tone wherever red is used in headings/badges */
.section-mini-title,
.footer-title,
.site-footer h6,
.badge-discount,
.bb-detail-discount-badge,
.price-new,
.bb-price-new,
.bb-price-regular{
    color:var(--bb-metallic-red) !important;
}
.badge-discount,
.bb-detail-discount-badge{
    background:linear-gradient(135deg,var(--bb-metallic-red-dark),var(--bb-metallic-red-light),var(--bb-metallic-red)) !important;
    color:#fff !important;
}

/* Footer: bolder text and gold social icons incl TikTok */
.site-footer,
.site-footer p,
.site-footer li,
.site-footer a,
.bb-footer,
.bb-footer p,
.bb-footer li,
.bb-footer a{
    font-weight:600 !important;
}
.footer-title,
.site-footer .footer-title{
    font-weight:900 !important;
    letter-spacing:.4px !important;
}
.footer-social,
.bb-footer-social-icons{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    flex-wrap:wrap !important;
    gap:8px !important;
}
.footer-social a,
.bb-footer-social-icons a{
    width:42px !important;
    height:42px !important;
    margin:0 !important;
    border-radius:50% !important;
    background:transparent !important;
    border:2px solid var(--bb-metallic-gold) !important;
    color:var(--bb-metallic-gold) !important;
    box-shadow:inset 0 2px 5px rgba(255,255,255,.65), 0 5px 12px rgba(0,0,0,.08) !important;
}
.footer-social a i,
.bb-footer-social-icons a i,
.footer-social .bb-x-icon,
.bb-footer-social-icons .bb-x-icon{
    color:var(--bb-metallic-gold) !important;
    -webkit-text-fill-color:var(--bb-metallic-gold) !important;
    font-family:"Font Awesome 5 Brands" !important;
    font-weight:400 !important;
    font-size:18px !important;
    line-height:1 !important;
}
.footer-social .bb-x-icon,
.bb-footer-social-icons .bb-x-icon{
    font-family:'Montserrat', Arial, sans-serif !important;
    font-weight:900 !important;
}
.footer-social a:hover,
.bb-footer-social-icons a:hover{
    background:rgba(201,154,0,.08) !important;
    color:var(--bb-metallic-red) !important;
    border-color:var(--bb-metallic-red) !important;
}
.footer-social a:hover i,
.bb-footer-social-icons a:hover i,
.footer-social a:hover .bb-x-icon,
.bb-footer-social-icons a:hover .bb-x-icon{
    color:var(--bb-metallic-red) !important;
    -webkit-text-fill-color:var(--bb-metallic-red) !important;
}

/* Mobile footer proper stack */
@media (max-width: 767.98px){
    .site-footer .row{
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
    }
    .site-footer .row > [class*="col-"]{
        width:100% !important;
        max-width:100% !important;
        flex:0 0 100% !important;
        text-align:center !important;
        margin-bottom:18px !important;
    }
    .site-footer .footer-links{
        padding-left:0 !important;
        margin-bottom:0 !important;
    }
    .footer-social,
    .bb-footer-social-icons{
        justify-content:center !important;
    }
}

/* Mobile header: fit all icons after removing BDT and keep bag fully visible */
@media (max-width: 575.98px){
    .bb-logo-bar,
    .main-header-wrap{
        padding-top:18px !important;
        padding-bottom:18px !important;
    }
    .main-header-row,
    .bb-logo-bar .main-header-row,
    .main-header-wrap .main-header-row{
        display:flex !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:6px !important;
        min-height:76px !important;
        width:100% !important;
        overflow:visible !important;
    }
    .mobile-nav-toggle{
        order:1 !important;
        width:31px !important;
        min-width:31px !important;
        max-width:31px !important;
        height:31px !important;
        flex:0 0 31px !important;
        margin-right:2px !important;
    }
    .site-logo{
        order:2 !important;
        flex:0 1 136px !important;
        width:136px !important;
        min-width:112px !important;
        max-width:136px !important;
        overflow:hidden !important;
        margin-right:auto !important;
        z-index:2 !important;
    }
    .site-logo img,
    .bb-main-logo{
        width:100% !important;
        max-width:136px !important;
        height:auto !important;
        max-height:42px !important;
        object-fit:contain !important;
        display:block !important;
    }
    .header-right-icons{
        order:3 !important;
        flex:0 0 auto !important;
        width:auto !important;
        max-width:calc(100vw - 156px) !important;
        min-width:0 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:flex-end !important;
        flex-wrap:nowrap !important;
        gap:3px !important;
        margin-left:0 !important;
        padding-right:5px !important;
        overflow:visible !important;
    }
    .header-icon-separator{
        width:1px !important;
        min-width:1px !important;
        flex:0 0 1px !important;
        height:28px !important;
        margin:0 1px !important;
    }
    .header-right-icons .icon-box,
    .header-right-icons .header-search.bb-expand-search{
        width:34px !important;
        min-width:34px !important;
        max-width:34px !important;
        height:34px !important;
        flex:0 0 34px !important;
    }
    .header-right-icons .icon-box i{
        font-size:18px !important;
    }
    .header-right-icons .header-search.bb-expand-search .search-btn,
    .header-right-icons .header-search.bb-expand-search .bb-search-toggle{
        width:34px !important;
        height:34px !important;
        min-width:34px !important;
        max-width:34px !important;
    }
    .header-right-icons .header-search.bb-expand-search .search-btn i,
    .header-right-icons .header-search.bb-expand-search .bb-search-toggle i{
        font-size:17px !important;
    }
    .header-right-icons .cart-icon-box{
        margin-right:0 !important;
    }
    .cart-count{
        top:-7px !important;
        right:-5px !important;
        min-width:17px !important;
        height:17px !important;
        line-height:17px !important;
        font-size:10px !important;
    }
    .bb-header-notice-marquee .bb-marquee-track{
        font-size:16px !important;
    }
    .bb-header-discount-marquee .bb-marquee-track,
    .bb-header-discount-marquee .bb-marquee-track span,
    .bb-header-discount-marquee .bb-end-time-text{
        font-size:16px !important;
    }
    .header-right-icons .bb-expand-search:hover .bb-search-input,
    .header-right-icons .bb-expand-search:focus-within .bb-search-input,
    .header-right-icons .bb-expand-search.search-open .bb-search-input{
        position:fixed !important;
        top:122px !important;
        left:10px !important;
        right:10px !important;
        width:calc(100vw - 20px) !important;
        height:44px !important;
        z-index:2147483000 !important;
        transform:none !important;
        padding:0 58px 0 18px !important;
    }
    .header-right-icons .bb-expand-search:hover .search-btn,
    .header-right-icons .bb-expand-search:focus-within .search-btn,
    .header-right-icons .bb-expand-search.search-open .search-btn{
        position:fixed !important;
        top:127px !important;
        right:14px !important;
        transform:none !important;
        z-index:2147483001 !important;
    }
}

@media (max-width: 390px){
    .site-logo{
        flex-basis:126px !important;
        width:126px !important;
        min-width:102px !important;
        max-width:126px !important;
    }
    .site-logo img,
    .bb-main-logo{
        max-width:126px !important;
        max-height:39px !important;
    }
    .header-right-icons{
        max-width:calc(100vw - 144px) !important;
        gap:2px !important;
        padding-right:4px !important;
    }
    .header-icon-separator{
        margin:0 !important;
    }
    .header-right-icons .icon-box,
    .header-right-icons .header-search.bb-expand-search{
        width:31px !important;
        min-width:31px !important;
        max-width:31px !important;
        height:31px !important;
        flex-basis:31px !important;
    }
    .header-right-icons .icon-box i{
        font-size:16px !important;
    }
    .header-right-icons .header-search.bb-expand-search .search-btn,
    .header-right-icons .header-search.bb-expand-search .bb-search-toggle{
        width:31px !important;
        height:31px !important;
        min-width:31px !important;
        max-width:31px !important;
    }
    .header-right-icons .header-search.bb-expand-search .search-btn i,
    .header-right-icons .header-search.bb-expand-search .bb-search-toggle i{
        font-size:15px !important;
    }
}

/* =========================================================
   FINAL PATCH: MOBILE SEARCH ICON SIZE + LOGO OVERLAP FIX
   Purpose:
   - Small screen-e search icon logo er upor overlap korbe na.
   - Search icon size other header icons-er same/kompact thakbe.
   - Desktop design/logic unchanged.
========================================================= */
@media (max-width: 575.98px){
    .main-header-wrap .container,
    .bb-logo-bar .container{
        padding-left:6px !important;
        padding-right:6px !important;
        max-width:100% !important;
    }

    .main-header-row{
        display:flex !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        justify-content:flex-start !important;
        width:100% !important;
        min-width:0 !important;
        gap:6px !important;
        overflow:visible !important;
    }

    .mobile-nav-toggle{
        width:30px !important;
        min-width:30px !important;
        max-width:30px !important;
        height:30px !important;
        flex:0 0 30px !important;
        padding:0 !important;
        margin:0 2px 0 0 !important;
    }

    .mobile-nav-toggle i{
        font-size:19px !important;
    }

    .site-logo{
        flex:0 1 148px !important;
        width:148px !important;
        min-width:0 !important;
        max-width:148px !important;
        overflow:hidden !important;
        margin:0 !important;
        padding:0 !important;
        position:relative !important;
        z-index:2 !important;
    }

    .site-logo img,
    .bb-main-logo{
        width:auto !important;
        max-width:148px !important;
        height:auto !important;
        max-height:38px !important;
        object-fit:contain !important;
        display:block !important;
    }

    .header-right-icons{
        margin-left:auto !important;
        display:flex !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        justify-content:flex-end !important;
        gap:3px !important;
        min-width:0 !important;
        max-width:calc(100vw - 196px) !important;
        overflow:visible !important;
        position:relative !important;
        z-index:5 !important;
        padding-right:0 !important;
    }

    .header-icon-separator{
        display:inline-block !important;
        width:1px !important;
        min-width:1px !important;
        max-width:1px !important;
        height:26px !important;
        flex:0 0 1px !important;
        margin:0 1px !important;
    }

    .header-right-icons .icon-box,
    .header-right-icons .header-search.bb-expand-search{
        width:33px !important;
        min-width:33px !important;
        max-width:33px !important;
        height:33px !important;
        min-height:33px !important;
        max-height:33px !important;
        flex:0 0 33px !important;
        margin:0 !important;
        padding:0 !important;
        position:relative !important;
        left:auto !important;
        right:auto !important;
        top:auto !important;
        transform:none !important;
    }

    .header-right-icons .icon-box i{
        font-size:18px !important;
        line-height:1 !important;
    }

    .header-right-icons .header-search.bb-expand-search .search-btn,
    .header-right-icons .header-search.bb-expand-search .bb-search-toggle{
        width:33px !important;
        min-width:33px !important;
        max-width:33px !important;
        height:33px !important;
        min-height:33px !important;
        max-height:33px !important;
        padding:0 !important;
        position:absolute !important;
        right:0 !important;
        left:auto !important;
        top:50% !important;
        transform:translateY(-50%) !important;
        border-width:2px !important;
    }

    .header-right-icons .header-search.bb-expand-search .search-btn i,
    .header-right-icons .header-search.bb-expand-search .bb-search-toggle i{
        font-size:17px !important;
        line-height:1 !important;
    }

    .header-right-icons .cart-icon-box{
        overflow:visible !important;
    }

    .cart-count{
        top:-7px !important;
        right:-7px !important;
        min-width:17px !important;
        height:17px !important;
        line-height:17px !important;
        font-size:10px !important;
    }

    /* Expanded search opens as full bar below header; default icon will not cover logo */
    .header-right-icons .bb-expand-search:hover .bb-search-input,
    .header-right-icons .bb-expand-search:focus-within .bb-search-input,
    .header-right-icons .bb-expand-search.search-open .bb-search-input{
        position:fixed !important;
        top:116px !important;
        left:8px !important;
        right:8px !important;
        width:calc(100vw - 16px) !important;
        max-width:calc(100vw - 16px) !important;
        height:42px !important;
        opacity:1 !important;
        pointer-events:auto !important;
        padding:0 54px 0 16px !important;
        z-index:2147483000 !important;
        transform:none !important;
    }

    .header-right-icons .bb-expand-search:hover .search-btn,
    .header-right-icons .bb-expand-search:focus-within .search-btn,
    .header-right-icons .bb-expand-search.search-open .search-btn,
    .header-right-icons .bb-expand-search:hover .bb-search-toggle,
    .header-right-icons .bb-expand-search:focus-within .bb-search-toggle,
    .header-right-icons .bb-expand-search.search-open .bb-search-toggle{
        position:fixed !important;
        top:120px !important;
        right:12px !important;
        width:34px !important;
        height:34px !important;
        min-width:34px !important;
        max-width:34px !important;
        transform:none !important;
        z-index:2147483001 !important;
    }
}

@media (max-width: 390px){
    .main-header-wrap .container,
    .bb-logo-bar .container{
        padding-left:4px !important;
        padding-right:4px !important;
    }

    .main-header-row{
        gap:4px !important;
    }

    .mobile-nav-toggle{
        width:28px !important;
        min-width:28px !important;
        max-width:28px !important;
        height:28px !important;
        flex-basis:28px !important;
    }

    .site-logo{
        flex-basis:132px !important;
        width:132px !important;
        max-width:132px !important;
    }

    .site-logo img,
    .bb-main-logo{
        max-width:132px !important;
        max-height:36px !important;
    }

    .header-right-icons{
        max-width:calc(100vw - 170px) !important;
        gap:2px !important;
    }

    .header-icon-separator{
        height:24px !important;
        margin:0 !important;
    }

    .header-right-icons .icon-box,
    .header-right-icons .header-search.bb-expand-search{
        width:31px !important;
        min-width:31px !important;
        max-width:31px !important;
        height:31px !important;
        min-height:31px !important;
        max-height:31px !important;
        flex-basis:31px !important;
    }

    .header-right-icons .icon-box i{
        font-size:16px !important;
    }

    .header-right-icons .header-search.bb-expand-search .search-btn,
    .header-right-icons .header-search.bb-expand-search .bb-search-toggle{
        width:31px !important;
        min-width:31px !important;
        max-width:31px !important;
        height:31px !important;
        min-height:31px !important;
        max-height:31px !important;
    }

    .header-right-icons .header-search.bb-expand-search .search-btn i,
    .header-right-icons .header-search.bb-expand-search .bb-search-toggle i{
        font-size:15px !important;
    }
}


/* =========================================================
   100% FINAL FIX: Fixed Sticky Header + Main Menu (All Pages)
   ---------------------------------------------------------
   Why this version:
   - Previous position:sticky can fail when a parent wrapper has overflow/transform.
   - This version uses position:fixed for the full .site-header, so header + menu
     stay at the top on Home, Product Details, Cart and every frontend page.
   - Existing design, dropdown, mega menu, search expand, modal and cart logic untouched.
========================================================= */

:root{
    /* Adjust only these values if your live header height differs slightly */
    --bb-fixed-header-space-desktop: 168px;
    --bb-fixed-header-space-tablet: 152px;
    --bb-fixed-header-space-mobile: 172px;
    --bb-fixed-header-space-small: 166px;
}

html{
    scroll-padding-top: var(--bb-fixed-header-space-desktop) !important;
}

body{
    padding-top: var(--bb-fixed-header-space-desktop) !important;
}

/* Full header wrapper fixed at viewport top */
.site-header{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 2147482000 !important;
    overflow: visible !important;
    background: linear-gradient(90deg, #bfc9c4 0%, #eef2f0 25%, #ffffff 50%, #eef2f0 75%, #bfc9c4 100%) !important;
    border: 0 !important;
    transform: translateZ(0) !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
}

/* Keep the shell/content normal; fixed header is independent */
.bb-page-shell,
body,
html{
    width: 100% !important;
}

/* Header internal rows + main menu must remain visible */
.site-header,
.site-header .main-header-wrap,
.site-header .bb-logo-bar,
.site-header .desktop-category-bar,
.site-header .bb-blue-menu-bar,
.site-header .mobile-mega-nav,
.site-header #mobileMegaNav,
.site-header .main-header-row,
.site-header .header-right-icons,
.site-header .account-box,
.site-header .header-search,
.site-header .bb-expand-search{
    overflow: visible !important;
}

.site-header .main-header-wrap,
.site-header .bb-logo-bar,
.site-header .main-header-row,
.site-header .header-right-icons{
    position: relative !important;
    z-index: 2147482010 !important;
}

/* Desktop menu/mega menu stays with fixed header */
.site-header .desktop-category-bar,
.site-header .bb-blue-menu-bar{
    position: relative !important;
    z-index: 2147482020 !important;
    overflow: visible !important;
}

.site-header .desktop-mega-menu{
    z-index: 2147482300 !important;
}

/* Mobile collapsed menu is part of sticky header */
.site-header .mobile-mega-nav,
.site-header #mobileMegaNav,
.site-header .mobile-menu,
.site-header .mobile-nav-wrapper,
.site-header .mobile-menu-wrapper,
.site-header .mobile-category-menu{
    position: relative !important;
    z-index: 2147482050 !important;
    overflow: visible !important;
}

/* Account dropdown + search expand should not hide behind menu/slider */
.site-header .account-box,
.site-header .account-panel,
.site-header .header-search,
.site-header .bb-expand-search,
.site-header .bb-search-input,
.site-header .search-btn,
.site-header .bb-search-toggle{
    z-index: 2147482400 !important;
}

.site-header .account-panel{
    z-index: 2147482500 !important;
}

/* Page content must stay below the fixed header */
main,
main.py-4,
.main-content,
.page-content,
.home-page-v2,
.product-details-page,
.cart-page,
.checkout-page{
    position: relative !important;
    z-index: 1 !important;
}

/* Remove accidental first-content overlap from old margin rules */
.site-header + main.py-4,
.site-header + main,
main.py-4{
    margin-top: 0 !important;
}

/* Carousel/product layers must not cover fixed header */
.hero-slider-section,
.hero-carousel,
.hero-carousel .carousel-inner,
.hero-carousel .carousel-item,
.hero-slide,
.home-products-section,
.product-card,
.bb-product-detail-card,
.site-footer{
    position: relative !important;
    z-index: 1 !important;
}

.carousel-control-prev,
.carousel-control-next,
.carousel-indicators{
    z-index: 40 !important;
}

/* Bootstrap modal, mini-cart and toast intentionally stay above sticky header */
.modal{
    z-index: 2147483000 !important;
}
.modal-backdrop{
    z-index: 2147482900 !important;
}
.mini-cart-overlay{
    z-index: 2147482600 !important;
}
.mini-cart-drawer{
    z-index: 2147482700 !important;
}
.bb-toast-area{
    z-index: 2147483100 !important;
}

/* Product/details anchor jump safety */
[id],
.product-details-page,
.home-products-section,
.bb-product-breadcrumb{
    scroll-margin-top: var(--bb-fixed-header-space-desktop) !important;
}

@media (max-width: 991.98px){
    :root{
        --bb-fixed-header-space-desktop: var(--bb-fixed-header-space-tablet);
    }

    html{
        scroll-padding-top: var(--bb-fixed-header-space-tablet) !important;
    }

    body{
        padding-top: var(--bb-fixed-header-space-tablet) !important;
    }

    .site-header{
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 2147482000 !important;
    }

    [id],
    .product-details-page,
    .home-products-section,
    .bb-product-breadcrumb{
        scroll-margin-top: var(--bb-fixed-header-space-tablet) !important;
    }
}

@media (max-width: 767.98px){
    :root{
        --bb-fixed-header-space-desktop: var(--bb-fixed-header-space-mobile);
    }

    html{
        scroll-padding-top: var(--bb-fixed-header-space-mobile) !important;
    }

    body{
        padding-top: var(--bb-fixed-header-space-mobile) !important;
    }

    .site-header{
        position: fixed !important;
        top: 0 !important;
    }

    [id],
    .product-details-page,
    .home-products-section,
    .bb-product-breadcrumb{
        scroll-margin-top: var(--bb-fixed-header-space-mobile) !important;
    }
}

@media (max-width: 575.98px){
    :root{
        --bb-fixed-header-space-desktop: var(--bb-fixed-header-space-small);
    }

    html{
        scroll-padding-top: var(--bb-fixed-header-space-small) !important;
    }

    body{
        padding-top: var(--bb-fixed-header-space-small) !important;
    }

    .site-header{
        position: fixed !important;
        top: 0 !important;
    }

    [id],
    .product-details-page,
    .home-products-section,
    .bb-product-breadcrumb{
        scroll-margin-top: var(--bb-fixed-header-space-small) !important;
    }
}



/* =========================================================
   FINAL GAPLESS STICKY HEADER + MENU FIX
   ---------------------------------------------------------
   Purpose:
   - Remove the visible gap between sticky menu and slider/content.
   - Keep header + main menu fixed at top on all frontend pages.
   - Keep mega menu, account dropdown, search expand, modal and cart layering safe.
   - No HTML/backend logic changed.
========================================================= */

:root{
    /* These values match the actual visible fixed header height more closely.
       Previous values were too large and created a gold gap above the slider. */
    --bb-fixed-header-space-desktop: 140px !important;
    --bb-fixed-header-space-tablet: 132px !important;
    --bb-fixed-header-space-mobile: 154px !important;
    --bb-fixed-header-space-small: 148px !important;
}

html{
    scroll-padding-top: var(--bb-fixed-header-space-desktop) !important;
}

body{
    padding-top: var(--bb-fixed-header-space-desktop) !important;
}

.site-header{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2147482000 !important;
    overflow: visible !important;
}

/* Every internal header row/menu must be tight with no bottom margin/padding gap */
.site-header,
.site-header .main-header-wrap,
.site-header .bb-logo-bar,
.site-header .desktop-category-bar,
.site-header .bb-blue-menu-bar,
.site-header .mobile-mega-nav,
.site-header #mobileMegaNav{
    margin-bottom: 0 !important;
}

.site-header .desktop-category-bar,
.site-header .bb-blue-menu-bar{
    bottom: auto !important;
    transform: none !important;
}

/* Main content starts immediately after the fixed header reserved space */
.site-header + main,
.site-header + main.py-4,
main,
main.py-4,
.main-content,
.page-content,
.home-page-v2,
.product-details-page,
.cart-page,
.checkout-page{
    margin-top: 0 !important;
    padding-top: 0 !important;
}

main.py-4 > .container,
main > .container,
.home-page-v2,
.product-details-page,
.cart-page,
.checkout-page{
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Home slider/dual slider must touch the menu with zero gap */
.hero-slider-section,
.hero-slider-section > .container,
.hero-slider-section .container,
.hero-carousel,
.hero-carousel .carousel-inner,
.hero-carousel .carousel-item,
.hero-slide,
.bb-dual-hero-section,
.bb-dual-hero-grid,
.bb-dual-hero-panel,
.home-hero-wrapper,
.hero-carousel-shell,
.home-hero-carousel{
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Prevent a background-colored stripe from appearing above the slider */
.bb-dual-hero-section{
    border-top: 0 !important;
}

/* Keep a neat separator, but it belongs to the menu itself, not an extra gap */
.site-header .desktop-category-bar,
.site-header .bb-blue-menu-bar{
    border-bottom: 3px solid #0046a3 !important;
    box-shadow: 0 2px 0 #d6a400 !important;
}

/* Product detail pages: remove any first-block accidental top border/gap as well */
.bb-product-breadcrumb,
.bb-product-detail-card,
.product-details-page .container,
.product-details-page .row:first-child{
    margin-top: 0 !important;
}

[id],
.product-details-page,
.home-products-section,
.bb-product-breadcrumb{
    scroll-margin-top: var(--bb-fixed-header-space-desktop) !important;
}

@media (max-width: 991.98px){
    html{ scroll-padding-top: var(--bb-fixed-header-space-tablet) !important; }
    body{ padding-top: var(--bb-fixed-header-space-tablet) !important; }

    .site-header{
        position: fixed !important;
        top: 0 !important;
    }

    [id],
    .product-details-page,
    .home-products-section,
    .bb-product-breadcrumb{
        scroll-margin-top: var(--bb-fixed-header-space-tablet) !important;
    }
}

@media (max-width: 767.98px){
    html{ scroll-padding-top: var(--bb-fixed-header-space-mobile) !important; }
    body{ padding-top: var(--bb-fixed-header-space-mobile) !important; }

    .hero-slider-section,
    .bb-dual-hero-section,
    .home-page-v2{
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    [id],
    .product-details-page,
    .home-products-section,
    .bb-product-breadcrumb{
        scroll-margin-top: var(--bb-fixed-header-space-mobile) !important;
    }
}

@media (max-width: 575.98px){
    html{ scroll-padding-top: var(--bb-fixed-header-space-small) !important; }
    body{ padding-top: var(--bb-fixed-header-space-small) !important; }

    .site-header + main,
    main.py-4,
    main.py-4 > .container,
    .home-page-v2,
    .bb-dual-hero-section{
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    [id],
    .product-details-page,
    .home-products-section,
    .bb-product-breadcrumb{
        scroll-margin-top: var(--bb-fixed-header-space-small) !important;
    }
}

/* =========================================================
   FINAL MOBILE GAPLESS STICKY FIX - 100% MOBILE VIEW
   ---------------------------------------------------------
   Desktop gap was already fixed. This block reduces only the
   mobile reserved fixed-header space that was creating the
   visible gold gap between the sticky menu/header and slider.
   It also forces first hero/slider block to touch the header.
========================================================= */

@media (max-width: 991.98px){
    :root{
        --bb-fixed-header-space-tablet: 124px !important;
    }

    html{
        scroll-padding-top: 124px !important;
    }

    body{
        padding-top: 124px !important;
    }

    .site-header + main,
    .site-header + main.py-4,
    main,
    main.py-4,
    main.py-4 > .container,
    .home-page-v2,
    .product-details-page,
    .cart-page,
    .checkout-page{
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .hero-slider-section,
    .bb-dual-hero-section,
    .home-hero-wrapper,
    .hero-carousel-shell,
    .home-hero-carousel,
    .hero-carousel,
    .hero-carousel .carousel-inner,
    .hero-carousel .carousel-item,
    .hero-slide{
        margin-top: 0 !important;
        padding-top: 0 !important;
        border-top: 0 !important;
    }

    .bb-dual-hero-section{
        transform: translateY(0) !important;
    }

    [id],
    .product-details-page,
    .home-products-section,
    .bb-product-breadcrumb{
        scroll-margin-top: 124px !important;
    }
}

@media (max-width: 767.98px){
    :root{
        --bb-fixed-header-space-mobile: 122px !important;
    }

    html{
        scroll-padding-top: 122px !important;
    }

    body{
        padding-top: 122px !important;
    }

    .site-header + main,
    .site-header + main.py-4,
    main.py-4,
    main.py-4 > .container,
    .home-page-v2,
    .bb-dual-hero-section,
    .hero-slider-section{
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .bb-dual-hero-section,
    .hero-slider-section{
        border-top: 0 !important;
    }

    [id],
    .product-details-page,
    .home-products-section,
    .bb-product-breadcrumb{
        scroll-margin-top: 122px !important;
    }
}

@media (max-width: 575.98px){
    :root{
        --bb-fixed-header-space-small: 118px !important;
    }

    html{
        scroll-padding-top: 118px !important;
    }

    body{
        padding-top: 118px !important;
    }

    .site-header + main,
    .site-header + main.py-4,
    main.py-4,
    main.py-4 > .container,
    .home-page-v2,
    .bb-dual-hero-section,
    .hero-slider-section,
    .home-hero-wrapper,
    .hero-carousel-shell,
    .home-hero-carousel{
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .bb-dual-hero-section,
    .hero-slider-section,
    .home-hero-wrapper{
        border-top: 0 !important;
    }

    [id],
    .product-details-page,
    .home-products-section,
    .bb-product-breadcrumb{
        scroll-margin-top: 118px !important;
    }
}

@media (max-width: 390px){
    html{
        scroll-padding-top: 114px !important;
    }

    body{
        padding-top: 114px !important;
    }

    [id],
    .product-details-page,
    .home-products-section,
    .bb-product-breadcrumb{
        scroll-margin-top: 114px !important;
    }
}

/* =========================================================
   FINAL GLOBAL COLOR SYSTEM FROM CLIENT REFERENCE IMAGE
   Red    : #960000 -> #ED2024
   Silver : #A6B0B0 -> #FFFFFF
   Gold   : #8B7121 -> #E9C31E
   Blue   : #000096 -> #00E0FA
   Purpose: replace previous red/silver/gold/blue usages with
            exact metallic gradient shades from supplied image.
========================================================= */
:root{
    --bb-metal-red-dark: #960000;
    --bb-metal-red-light: #ED2024;
    --bb-metal-silver-dark: #A6B0B0;
    --bb-metal-silver-light: #FFFFFF;
    --bb-metal-gold-dark: #8B7121;
    --bb-metal-gold-light: #E9C31E;
    --bb-metal-blue-dark: #000096;
    --bb-metal-blue-light: #00E0FA;

    --bb-red: #960000 !important;
    --bb-red-dark: #960000 !important;
    --bb-final-red: #960000 !important;
    --bb-final-blue: #000096 !important;
    --bb-final-gold: #E9C31E !important;
    --bb-final-silver: #A6B0B0 !important;
    --bb-dark-blue: #000096 !important;
    --bb-blue: #000096 !important;
    --bb-gold: #E9C31E !important;
    --bb-silver: #FFFFFF !important;
    --bb-silver-dark: #A6B0B0 !important;

    --bb-gradient-red: linear-gradient(135deg, #960000 0%, #ED2024 48%, #960000 100%);
    --bb-gradient-red-glossy: linear-gradient(180deg, #960000 0%, #ED2024 42%, #ff7073 50%, #ED2024 60%, #960000 100%);
    --bb-gradient-silver: linear-gradient(90deg, #A6B0B0 0%, #FFFFFF 48%, #A6B0B0 100%);
    --bb-gradient-silver-vertical: linear-gradient(180deg, #A6B0B0 0%, #FFFFFF 48%, #A6B0B0 100%);
    --bb-gradient-gold: linear-gradient(135deg, #8B7121 0%, #E9C31E 50%, #8B7121 100%);
    --bb-gradient-gold-glossy: linear-gradient(180deg, #8B7121 0%, #E9C31E 42%, #fff48a 50%, #E9C31E 62%, #8B7121 100%);
    --bb-gradient-blue: linear-gradient(135deg, #000096 0%, #00E0FA 52%, #000096 100%);
    --bb-gradient-blue-glossy: linear-gradient(180deg, #000096 0%, #00E0FA 48%, #000096 100%);
}

/* Global background replacements */
html,
body{
    background: var(--bb-gradient-gold) !important;
}

.bb-page-shell,
main.py-4,
.home-page-v2,
.home-products-section,
.product-details-page,
.product-detail-page,
.cart-page,
.checkout-page{
    background: var(--bb-gradient-gold) !important;
}

/* Silver areas: header, menu, footer, cards and wrappers where silver was used */
.site-header,
.bb-logo-bar,
.main-header-wrap,
.desktop-category-bar,
.bb-blue-menu-bar,
.mobile-mega-nav,
.site-footer,
.footer-section,
.bb-footer,
.bb-product-gallery,
.bb-product-detail-card,
.bb-description-box,
.bb-related-section,
.bb-product-meta-box,
.cart-card,
.summary-card,
.product-card:not(.bb-flip-product-card),
.bb-flip-product-card .bb-flip-front,
.bb-flip-product-card .bb-flip-back,
.bb-card-silver,
.no-products-box{
    background: var(--bb-gradient-silver) !important;
}

/* Header/menu/footer silver must remain smooth and metallic */
.site-header,
.bb-logo-bar,
.main-header-wrap,
.desktop-category-bar,
.bb-blue-menu-bar,
.site-footer,
.bb-footer{
    background: var(--bb-gradient-silver) !important;
}

/* Menu bottom/top highlights use exact blue shade */
.desktop-category-bar,
.bb-blue-menu-bar{
    border-top-color: rgba(255,255,255,.85) !important;
    border-bottom: 3px solid #000096 !important;
    box-shadow: 0 2px 0 #00E0FA, 0 4px 0 #000096, 0 6px 14px rgba(0,0,150,.22) !important;
}

/* Main menu font: gold by default, blue on hover/active */
.desktop-category-link,
.bb-blue-menu-bar .desktop-category-link,
.mobile-nav-btn{
    color: #8B7121 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.65), 0 0 2px rgba(233,195,30,.55) !important;
}
.desktop-category-item:hover > .desktop-category-link,
.desktop-category-link:hover,
.desktop-category-link.active-menu-filter,
.bb-blue-menu-bar .desktop-category-item:hover .desktop-category-link,
.bb-blue-menu-bar .desktop-category-link:hover,
.bb-blue-menu-bar .desktop-category-link.active-menu-filter,
.mobile-nav-btn:hover{
    color: #000096 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.65), 0 0 3px rgba(0,224,250,.35) !important;
}

/* Red gradient buttons and badges */
.btn-primary,
.product-card .btn-primary,
.btn-add-to-cart,
.add-to-cart-btn,
.bb-add-to-cart,
.bb-detail-cart-btn,
.bb-front-cart-btn,
.bb-back-cart-btn,
.bb-flip-product-card .btn-primary,
.product-card .add-to-cart,
button[data-add-to-cart],
.badge-discount,
.bb-detail-discount-badge,
.cart-count,
.hero-btn,
.bb-red-btn{
    background: var(--bb-gradient-red-glossy) !important;
    border: 1px solid #960000 !important;
    box-shadow: inset 0 2px 4px rgba(255,255,255,.45), inset 0 -4px 8px rgba(0,0,0,.18), 0 8px 18px rgba(150,0,0,.22) !important;
}

/* Add to Cart text/icon requested dark blue across card, flip card, details */
.product-card .btn-primary,
.product-card .btn-primary i,
.product-card .add-to-cart,
.product-card .add-to-cart i,
.btn-add-to-cart,
.btn-add-to-cart i,
.add-to-cart-btn,
.add-to-cart-btn i,
.bb-add-to-cart,
.bb-add-to-cart i,
.bb-detail-cart-btn,
.bb-detail-cart-btn i,
.bb-front-cart-btn,
.bb-front-cart-btn i,
.bb-back-cart-btn,
.bb-back-cart-btn i,
.bb-flip-product-card .btn-primary,
.bb-flip-product-card .btn-primary i,
button[data-add-to-cart],
button[data-add-to-cart] i{
    color: #000096 !important;
    text-shadow: none !important;
    font-weight: 900 !important;
}

.product-card .btn-primary:hover,
.btn-add-to-cart:hover,
.add-to-cart-btn:hover,
.bb-detail-cart-btn:hover,
.bb-front-cart-btn:hover,
.bb-back-cart-btn:hover{
    background: linear-gradient(135deg, #ED2024 0%, #960000 55%, #ED2024 100%) !important;
    color: #000096 !important;
}

/* Golden icon outlines and glossy hover without wrong fill */
.header-right-icons .icon-box,
.icon-box,
.mobile-nav-toggle,
.footer-social a,
.site-footer .social-link,
.bb-footer .social-link,
.header-right-icons .bb-expand-search .search-btn,
.header-right-icons .bb-expand-search .bb-search-toggle,
.currency-chip{
    border-color: #8B7121 !important;
    color: #8B7121 !important;
    background: transparent !important;
    box-shadow: inset 0 1px 3px rgba(255,255,255,.75), 0 0 0 1px rgba(233,195,30,.30), 0 6px 14px rgba(139,113,33,.12) !important;
}

.header-right-icons .icon-box i,
.icon-box i,
.mobile-nav-toggle i,
.header-right-icons .bb-expand-search .search-btn i,
.header-right-icons .bb-expand-search .bb-search-toggle i,
.footer-social a i,
.site-footer .social-link i,
.bb-footer .social-link i{
    color: #8B7121 !important;
    -webkit-text-stroke: .35px #E9C31E;
    text-shadow: 0 1px 0 rgba(255,255,255,.65), 0 0 3px rgba(233,195,30,.45) !important;
}

/* Cart/bag icon inner color remains white while border stays gold */
.icon-box.cart-icon i,
.icon-box.bag-icon i,
.header-cart-icon i,
.header-right-icons .cart-icon i,
.header-right-icons .bag-icon i,
a[href*="cart"] .icon-box i,
.header-right-icons a[href*="cart"] i{
    color: #ffffff !important;
    -webkit-text-stroke: .6px #8B7121;
    text-shadow: 0 0 3px rgba(139,113,33,.75), 0 1px 0 rgba(0,0,0,.18) !important;
}

/* Metallic red text treatment */
.bb-header-notice-marquee .bb-marquee-track,
.bb-notice-text,
.bb-dialogue-text,
.section-mini-title,
.footer-title,
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6{
    color: #960000 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.70), 0 0 4px rgba(237,32,36,.28) !important;
}

/* Metallic blue discount text */
.bb-header-discount-marquee .bb-marquee-track,
.bb-header-discount-marquee .bb-marquee-track span,
.bb-discount-time-gold,
.bb-discount-time,
.discount-time,
.bb-current-discount-text,
.blueblood-discount-bar span{
    color: #000096 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.75), 0 0 5px rgba(0,224,250,.55) !important;
}

/* Gradient text helper for stronger metallic effect on supported browsers */
.bb-header-notice-marquee .bb-marquee-track,
.bb-notice-text,
.bb-dialogue-text{
    background: var(--bb-gradient-red-glossy) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.bb-header-discount-marquee .bb-marquee-track,
.bb-header-discount-marquee .bb-marquee-track span,
.bb-current-discount-text{
    background: var(--bb-gradient-blue-glossy) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Product prices / titles: use red/blue codes from reference */
.price-new,
.bb-price-new,
.bb-price-regular,
.product-price,
.product-price .price-regular,
.price-regular{
    color: #960000 !important;
}
.product-title,
.product-title a,
.home-products-head h5,
.bb-detail-title,
.bb-related-head h3,
.bb-detail-category span,
.footer-links li a,
.site-footer a,
.bb-footer a{
    color: #000096 !important;
}

/* Silver back side when product flips */
.bb-flip-product-card,
.bb-flip-product-card .bb-flip-front,
.bb-flip-product-card .bb-flip-back,
.product-card.bb-flip-product-card,
.product-card.bb-flip-product-card .product-body,
.product-card.bb-flip-product-card .bb-back-content{
    background: var(--bb-gradient-silver) !important;
}

/* Hero/product thin lines and borders use blue/gold reference */
.hero-slider-section,
.bb-dual-hero-section,
.hero-carousel,
.bb-product-breadcrumb,
.bb-product-detail-card,
.product-card,
.desktop-mega-menu,
.account-panel{
    border-color: rgba(0,0,150,.35) !important;
}
.hero-slider-section,
.bb-dual-hero-section{
    border-top-color: #000096 !important;
    border-bottom-color: #E9C31E !important;
}

/* Footer social icons: transparent fill, golden border/icon from exact code */
.footer-social a,
.site-footer .social-link,
.bb-footer .social-link{
    background: transparent !important;
    border: 2px solid #8B7121 !important;
    color: #8B7121 !important;
}
.footer-social a i,
.site-footer .social-link i,
.bb-footer .social-link i,
.footer-social .fab,
.footer-social .fa-brands{
    color: #8B7121 !important;
    -webkit-text-fill-color: #8B7121 !important;
    font-family: "Font Awesome 5 Brands", "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}
.footer-social a:hover,
.site-footer .social-link:hover,
.bb-footer .social-link:hover{
    background: var(--bb-gradient-gold-glossy) !important;
    border-color: #E9C31E !important;
}
.footer-social a:hover i,
.site-footer .social-link:hover i,
.bb-footer .social-link:hover i{
    color: #000096 !important;
    -webkit-text-fill-color: #000096 !important;
}

/* Footer typography stronger but still clean */
.site-footer,
.site-footer p,
.site-footer li,
.site-footer a,
.bb-footer,
.bb-footer p,
.bb-footer li,
.bb-footer a{
    font-weight: 600 !important;
}
.footer-title{
    font-weight: 900 !important;
}

/* Mobile responsive keeps all new colors and prevents icon overflow */
@media (max-width: 767.98px){
    .site-header,
    .bb-logo-bar,
    .main-header-wrap,
    .desktop-category-bar,
    .bb-blue-menu-bar,
    .mobile-mega-nav{
        background: var(--bb-gradient-silver) !important;
    }

    .header-right-icons .icon-box,
    .icon-box,
    .header-right-icons .bb-expand-search,
    .header-right-icons .bb-expand-search .search-btn,
    .header-right-icons .bb-expand-search .bb-search-toggle{
        border-color: #8B7121 !important;
        background: transparent !important;
        color: #8B7121 !important;
    }

    .bb-header-notice-marquee .bb-marquee-track{
        font-size: 16px !important;
    }

    .bb-header-discount-marquee .bb-marquee-track{
        font-size: 16px !important;
    }
}


/* =========================================================
   FINAL PATCH: BODY BACKGROUND = REFERENCE GOLDEN GRADIENT
   Purpose: Body/content background will use attached reference GOLD
   gradient (#8B7121 -> #E9C31E), not silver.
========================================================= */
html,
body,
.bb-page-shell,
main.py-4,
main.py-4 > .container,
.home-page-v2,
.home-products-section,
.home-products-section .container,
.product-section,
.products-section,
#products-section,
#products-container,
.product-listing-area,
.product-grid-area,
.product-detail-page,
.product-details-page,
.cart-page,
.checkout-page{
    background:
        linear-gradient(90deg,
            #8B7121 0%,
            #b99513 18%,
            #E9C31E 50%,
            #b99513 82%,
            #8B7121 100%) !important;
}

/* remove any previous silver/white overlay behind product grid */
.home-products-section,
.home-products-section::before,
.home-products-section::after,
.home-page-v2::before,
.home-page-v2::after,
main.py-4::before,
main.py-4::after{
    background-color: transparent !important;
    box-shadow: none !important;
}

/* keep product/card surfaces readable over golden body */
.product-card,
.bb-flip-product-card,
.bb-flip-card-front,
.bb-flip-card-back,
.product-box,
.card{
    background:
        linear-gradient(135deg,
            rgba(166,176,176,.90) 0%,
            rgba(255,255,255,.96) 48%,
            rgba(166,176,176,.86) 100%) !important;
}

/* title/count strip should follow the golden body cleanly */
.home-products-head,
.home-products-head::before,
.home-products-head::after{
    background: transparent !important;
}

/* =========================================================
   FINAL MOBILE ICON SHAPE + SAME SIZE + GLOSSY SHARP PATCH
   Purpose:
   1) Small mobile screen search icon remains perfect circle, not oval.
   2) Cart/bag, search, user, wish icons are strictly same size.
   3) Existing reference colors remain intact, icons get glossy sharp finish.
========================================================= */
:root{
    --bb-ref-red-start:#960000;
    --bb-ref-red-end:#ED2024;
    --bb-ref-silver-start:#A6B0B0;
    --bb-ref-silver-end:#FFFFFF;
    --bb-ref-gold-start:#8B7121;
    --bb-ref-gold-end:#E9C31E;
    --bb-ref-blue-start:#000096;
    --bb-ref-blue-end:#00E0FA;
    --bb-mobile-icon-size:42px;
    --bb-mobile-icon-font:22px;
}

/* glossy icon foundation for all viewports */
.header-right-icons .icon-box,
.header-right-icons .header-action-item,
.header-right-icons .bb-expand-search,
.header-right-icons .bb-expand-search .search-btn,
.header-right-icons .bb-expand-search .bb-search-toggle,
.mobile-nav-toggle{
    background: rgba(255,255,255,.16) !important;
    border: 2px solid var(--bb-ref-gold-start) !important;
    color: var(--bb-ref-gold-start) !important;
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,.85),
        inset 0 -4px 7px rgba(139,113,33,.22),
        0 5px 12px rgba(0,0,0,.12),
        0 0 0 1px rgba(233,195,30,.20) !important;
    text-shadow:
        0 1px 0 rgba(255,255,255,.90),
        0 0 7px rgba(233,195,30,.45) !important;
    filter: drop-shadow(0 1px 1px rgba(255,255,255,.42)) !important;
}

.header-right-icons .icon-box i,
.header-right-icons .header-action-item i,
.header-right-icons .bb-expand-search i,
.header-right-icons .bb-expand-search .search-btn i,
.header-right-icons .bb-expand-search .bb-search-toggle i,
.mobile-nav-toggle i{
    color: var(--bb-ref-gold-start) !important;
    -webkit-text-fill-color: var(--bb-ref-gold-start) !important;
    text-shadow:
        0 1px 0 rgba(255,255,255,.95),
        0 0 8px rgba(233,195,30,.55) !important;
}

.header-right-icons .icon-box:hover,
.header-right-icons .header-action-item:hover,
.header-right-icons .bb-expand-search:hover .search-btn,
.header-right-icons .bb-expand-search:hover .bb-search-toggle,
.mobile-nav-toggle:hover{
    background: rgba(255,255,255,.26) !important;
    border-color: var(--bb-ref-gold-end) !important;
    color: var(--bb-ref-gold-start) !important;
    box-shadow:
        inset 0 2px 5px rgba(255,255,255,.95),
        inset 0 -5px 9px rgba(139,113,33,.28),
        0 7px 16px rgba(0,0,0,.16),
        0 0 12px rgba(233,195,30,.30) !important;
}

/* cart/bag icon inside must be clear and sharp; badge remains red */
.header-right-icons .cart-icon i,
.header-right-icons .bag-icon i,
.header-right-icons .cart-box i,
.header-right-icons .mini-cart-trigger i,
.header-right-icons .icon-box.cart-icon i,
.header-right-icons .icon-box.bag-icon i,
.header-right-icons [data-cart] i{
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    -webkit-text-stroke: .7px var(--bb-ref-gold-start) !important;
    text-shadow:
        0 1px 0 rgba(0,0,0,.24),
        0 0 7px rgba(233,195,30,.70) !important;
}

.cart-count,
.header-right-icons .cart-count{
    background: linear-gradient(180deg,var(--bb-ref-red-end),var(--bb-ref-red-start)) !important;
    color:#fff !important;
    border: 1px solid rgba(255,255,255,.75) !important;
    box-shadow: 0 2px 8px rgba(150,0,0,.32) !important;
}

/* mobile/tablet: every header icon must be the exact same box */
@media (max-width: 767.98px){
    .main-header-row{
        display:flex !important;
        align-items:center !important;
        flex-wrap:nowrap !important;
        gap:6px !important;
        min-width:0 !important;
        overflow:visible !important;
    }

    .site-logo,
    .site-logo img,
    .bb-main-logo{
        flex-shrink:1 !important;
        min-width:0 !important;
        max-width:142px !important;
    }

    .header-right-icons{
        display:flex !important;
        align-items:center !important;
        justify-content:flex-end !important;
        flex-wrap:nowrap !important;
        gap:5px !important;
        margin-left:auto !important;
        min-width:0 !important;
        overflow:visible !important;
    }

    .header-right-icons .icon-box,
    .header-right-icons .header-action-item,
    .header-right-icons .bb-expand-search,
    .header-right-icons .bb-expand-search .search-btn,
    .header-right-icons .bb-expand-search .bb-search-toggle,
    .mobile-nav-toggle{
        width: var(--bb-mobile-icon-size) !important;
        min-width: var(--bb-mobile-icon-size) !important;
        max-width: var(--bb-mobile-icon-size) !important;
        height: var(--bb-mobile-icon-size) !important;
        min-height: var(--bb-mobile-icon-size) !important;
        max-height: var(--bb-mobile-icon-size) !important;
        flex: 0 0 var(--bb-mobile-icon-size) !important;
        padding:0 !important;
        margin:0 !important;
        border-radius:50% !important;
        aspect-ratio:1 / 1 !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        line-height:1 !important;
        overflow:visible !important;
        transform:none !important;
    }

    .header-right-icons .icon-box i,
    .header-right-icons .header-action-item i,
    .header-right-icons .bb-expand-search i,
    .header-right-icons .bb-expand-search .search-btn i,
    .header-right-icons .bb-expand-search .bb-search-toggle i,
    .mobile-nav-toggle i{
        font-size: var(--bb-mobile-icon-font) !important;
        line-height:1 !important;
        width:auto !important;
        height:auto !important;
        display:block !important;
        transform:none !important;
    }

    /* Search wrapper stays circular by default. The input expands left without changing the icon circle. */
    .header-right-icons .bb-expand-search{
        position:relative !important;
        overflow:visible !important;
        z-index:100020 !important;
    }

    .header-right-icons .bb-expand-search .bb-search-input,
    .header-right-icons .bb-expand-search input[type="search"],
    .header-right-icons .bb-expand-search input[type="text"]{
        position:absolute !important;
        top:50% !important;
        right:0 !important;
        transform:translateY(-50%) !important;
        width: var(--bb-mobile-icon-size) !important;
        min-width: var(--bb-mobile-icon-size) !important;
        height: var(--bb-mobile-icon-size) !important;
        min-height: var(--bb-mobile-icon-size) !important;
        max-height: var(--bb-mobile-icon-size) !important;
        border-radius:999px !important;
        padding:0 !important;
        opacity:0 !important;
        pointer-events:none !important;
        z-index:1 !important;
        background:rgba(255,255,255,.97) !important;
        border:2px solid var(--bb-ref-gold-start) !important;
        box-shadow:0 8px 18px rgba(0,0,0,.16) !important;
    }

    .header-right-icons .bb-expand-search .search-btn,
    .header-right-icons .bb-expand-search .bb-search-toggle{
        position:relative !important;
        top:auto !important;
        right:auto !important;
        transform:none !important;
        z-index:3 !important;
    }

    .header-right-icons .bb-expand-search:hover .bb-search-input,
    .header-right-icons .bb-expand-search:focus-within .bb-search-input,
    .header-right-icons .bb-expand-search.search-open .bb-search-input,
    .header-right-icons .bb-expand-search:hover input[type="search"],
    .header-right-icons .bb-expand-search:focus-within input[type="search"],
    .header-right-icons .bb-expand-search.search-open input[type="search"],
    .header-right-icons .bb-expand-search:hover input[type="text"],
    .header-right-icons .bb-expand-search:focus-within input[type="text"],
    .header-right-icons .bb-expand-search.search-open input[type="text"]{
        width:min(230px, calc(100vw - 108px)) !important;
        min-width:min(230px, calc(100vw - 108px)) !important;
        opacity:1 !important;
        pointer-events:auto !important;
        padding:0 calc(var(--bb-mobile-icon-size) + 12px) 0 14px !important;
    }

    /* Cart/bag must not look smaller than other icons */
    .header-right-icons .cart-icon,
    .header-right-icons .bag-icon,
    .header-right-icons .cart-box,
    .header-right-icons .mini-cart-trigger,
    .header-right-icons [data-cart]{
        width: var(--bb-mobile-icon-size) !important;
        min-width: var(--bb-mobile-icon-size) !important;
        max-width: var(--bb-mobile-icon-size) !important;
        height: var(--bb-mobile-icon-size) !important;
        min-height: var(--bb-mobile-icon-size) !important;
        max-height: var(--bb-mobile-icon-size) !important;
        flex-basis: var(--bb-mobile-icon-size) !important;
        border-radius:50% !important;
    }
}

/* very small phones: shrink all icons equally, never oval */
@media (max-width: 389.98px){
    :root{
        --bb-mobile-icon-size:36px;
        --bb-mobile-icon-font:19px;
    }

    .main-header-row{
        gap:4px !important;
    }

    .header-right-icons{
        gap:4px !important;
    }

    .site-logo,
    .site-logo img,
    .bb-main-logo{
        max-width:122px !important;
    }

    .header-right-icons .bb-expand-search:hover .bb-search-input,
    .header-right-icons .bb-expand-search:focus-within .bb-search-input,
    .header-right-icons .bb-expand-search.search-open .bb-search-input,
    .header-right-icons .bb-expand-search:hover input[type="search"],
    .header-right-icons .bb-expand-search:focus-within input[type="search"],
    .header-right-icons .bb-expand-search.search-open input[type="search"],
    .header-right-icons .bb-expand-search:hover input[type="text"],
    .header-right-icons .bb-expand-search:focus-within input[type="text"],
    .header-right-icons .bb-expand-search.search-open input[type="text"]{
        width:min(200px, calc(100vw - 96px)) !important;
        min-width:min(200px, calc(100vw - 96px)) !important;
    }
}

@media (max-width: 340px){
    :root{
        --bb-mobile-icon-size:32px;
        --bb-mobile-icon-font:17px;
    }

    .site-logo,
    .site-logo img,
    .bb-main-logo{
        max-width:108px !important;
    }

    .header-right-icons{
        gap:3px !important;
    }
}


/* =========================================================
   100% FINAL CONSOLIDATED RESPONSIVE ICON PATCH
   Purpose:
   - Remove search oval permanently on all small/mobile/tablet devices.
   - Keep search button a true circle; input is fully hidden by default.
   - Force search/user/wishlist/cart icons to the same size per breakpoint.
   - Keep layout consistent on iPhone SE/XR/12 Pro/14 Pro Max, Pixel,
     Samsung Galaxy, iPad/Surface responsive presets.
   - This replaces the previous repeated search/icon fixes.
========================================================= */
:root{
    --bb-final-icon-size: 42px;
    --bb-final-icon-font: 19px;
    --bb-final-icon-border: 2px;
    --bb-final-gold-start: #8B7121;
    --bb-final-gold-end: #E9C31E;
    --bb-final-blue-start: #000096;
    --bb-final-blue-end: #00E0FA;
    --bb-final-red-start: #960000;
    --bb-final-red-end: #ED2024;
}

.site-header,
.main-header-wrap,
.bb-logo-bar,
.main-header-row,
.header-right-icons{
    overflow: visible !important;
}

.main-header-row{
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
}

.header-right-icons{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    flex:0 0 auto !important;
    margin-left:auto !important;
    min-width:0 !important;
}

/* every visible header action icon gets identical circle geometry */
.header-right-icons .icon-box,
.header-right-icons .header-search.bb-expand-search,
.header-right-icons .bb-expand-search,
.header-right-icons .bb-expand-search .search-btn,
.header-right-icons .bb-expand-search .bb-search-toggle,
.header-right-icons a.icon-box,
.header-right-icons button.icon-box{
    width:var(--bb-final-icon-size) !important;
    min-width:var(--bb-final-icon-size) !important;
    max-width:var(--bb-final-icon-size) !important;
    height:var(--bb-final-icon-size) !important;
    min-height:var(--bb-final-icon-size) !important;
    max-height:var(--bb-final-icon-size) !important;
    flex:0 0 var(--bb-final-icon-size) !important;
    aspect-ratio:1 / 1 !important;
    box-sizing:border-box !important;
    border-radius:50% !important;
    padding:0 !important;
    margin:0 !important;
    line-height:1 !important;
}

.header-right-icons .icon-box,
.header-right-icons .bb-expand-search .search-btn,
.header-right-icons .bb-expand-search .bb-search-toggle{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:transparent !important;
    border:var(--bb-final-icon-border) solid var(--bb-final-gold-start) !important;
    color:var(--bb-final-gold-start) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.90),
        inset 0 -3px 8px rgba(139,113,33,.12),
        0 7px 14px rgba(0,0,0,.13) !important;
    overflow:hidden !important;
    transform:none !important;
}

.header-right-icons .icon-box i,
.header-right-icons .bb-expand-search i,
.header-right-icons .bb-expand-search .search-btn i,
.header-right-icons .bb-expand-search .bb-search-toggle i{
    font-family:"Font Awesome 5 Free" !important;
    font-weight:900 !important;
    font-size:var(--bb-final-icon-font) !important;
    width:auto !important;
    height:auto !important;
    line-height:1 !important;
    display:inline-block !important;
    color:var(--bb-final-gold-start) !important;
    text-shadow:0 1px 0 rgba(255,255,255,.75), 0 2px 6px rgba(139,113,33,.25) !important;
}

/* bag/cart inner glyph stays sharp and white, but circle border remains golden */
.header-right-icons .cart-icon i,
.header-right-icons .bag-icon i,
.header-right-icons a[href*="cart"] i.fa-shopping-bag,
.header-right-icons a[href*="cart"] i.fa-bag-shopping,
.header-right-icons a[href*="cart"] i.fa-shopping-cart,
.header-right-icons .icon-box .fa-shopping-bag,
.header-right-icons .icon-box .fa-bag-shopping,
.header-right-icons .icon-box .fa-shopping-cart{
    color:#ffffff !important;
    text-shadow:0 1px 2px rgba(0,0,0,.35), 0 0 5px rgba(255,255,255,.30) !important;
}

.header-right-icons .icon-box:hover,
.header-right-icons .bb-expand-search:hover .search-btn,
.header-right-icons .bb-expand-search:hover .bb-search-toggle{
    border-color:var(--bb-final-gold-end) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -4px 10px rgba(233,195,30,.18),
        0 9px 18px rgba(0,0,0,.18) !important;
}

/* Search wrapper itself must never draw an oval. Only the button draws the circle. */
.header-right-icons .header-search.bb-expand-search,
.header-right-icons .bb-expand-search{
    position:relative !important;
    border:0 !important;
    outline:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
    z-index:100050 !important;
}

.header-right-icons .header-search.bb-expand-search::before,
.header-right-icons .header-search.bb-expand-search::after,
.header-right-icons .bb-expand-search::before,
.header-right-icons .bb-expand-search::after,
.header-right-icons .bb-expand-search .search-btn::before,
.header-right-icons .bb-expand-search .search-btn::after,
.header-right-icons .bb-expand-search .bb-search-toggle::before,
.header-right-icons .bb-expand-search .bb-search-toggle::after{
    content:none !important;
    display:none !important;
}

/* Default closed state: input is display:none, so no oval/ghost can be painted. */
.header-right-icons .bb-expand-search:not(:hover):not(:focus-within):not(.search-open) .bb-search-input,
.header-right-icons .bb-expand-search:not(:hover):not(:focus-within):not(.search-open) .form-control,
.header-right-icons .bb-expand-search:not(:hover):not(:focus-within):not(.search-open) input[type="search"],
.header-right-icons .bb-expand-search:not(:hover):not(:focus-within):not(.search-open) input[type="text"]{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    outline:0 !important;
    background:transparent !important;
    box-shadow:none !important;
}

/* Open state: input expands to the LEFT behind the search circle */
.header-right-icons .bb-expand-search:hover .bb-search-input,
.header-right-icons .bb-expand-search:focus-within .bb-search-input,
.header-right-icons .bb-expand-search.search-open .bb-search-input,
.header-right-icons .bb-expand-search:hover .form-control,
.header-right-icons .bb-expand-search:focus-within .form-control,
.header-right-icons .bb-expand-search.search-open .form-control,
.header-right-icons .bb-expand-search:hover input[type="search"],
.header-right-icons .bb-expand-search:focus-within input[type="search"],
.header-right-icons .bb-expand-search.search-open input[type="search"],
.header-right-icons .bb-expand-search:hover input[type="text"],
.header-right-icons .bb-expand-search:focus-within input[type="text"],
.header-right-icons .bb-expand-search.search-open input[type="text"]{
    display:block !important;
    position:absolute !important;
    top:50% !important;
    right:0 !important;
    transform:translateY(-50%) !important;
    width:min(360px, 42vw) !important;
    min-width:min(360px, 42vw) !important;
    max-width:min(360px, 42vw) !important;
    height:var(--bb-final-icon-size) !important;
    min-height:var(--bb-final-icon-size) !important;
    max-height:var(--bb-final-icon-size) !important;
    padding:0 calc(var(--bb-final-icon-size) + 13px) 0 18px !important;
    border-radius:999px !important;
    border:var(--bb-final-icon-border) solid var(--bb-final-gold-start) !important;
    background:rgba(255,255,255,.98) !important;
    box-shadow:0 9px 20px rgba(0,0,0,.18) !important;
    color:#1d2430 !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    z-index:1 !important;
}

.header-right-icons .bb-expand-search .search-btn,
.header-right-icons .bb-expand-search .bb-search-toggle{
    position:absolute !important;
    top:50% !important;
    right:0 !important;
    left:auto !important;
    transform:translateY(-50%) !important;
    z-index:3 !important;
}

.cart-count{
    z-index:5 !important;
}

/* Tablet / mobile: consistent scale across the listed device presets */
@media (max-width:1199.98px){
    :root{
        --bb-final-icon-size:40px;
        --bb-final-icon-font:18px;
    }
    .header-right-icons{ gap:7px !important; }
    .header-right-icons .bb-expand-search:hover .bb-search-input,
    .header-right-icons .bb-expand-search:focus-within .bb-search-input,
    .header-right-icons .bb-expand-search.search-open .bb-search-input,
    .header-right-icons .bb-expand-search:hover .form-control,
    .header-right-icons .bb-expand-search:focus-within .form-control,
    .header-right-icons .bb-expand-search.search-open .form-control,
    .header-right-icons .bb-expand-search:hover input[type="search"],
    .header-right-icons .bb-expand-search:focus-within input[type="search"],
    .header-right-icons .bb-expand-search.search-open input[type="search"],
    .header-right-icons .bb-expand-search:hover input[type="text"],
    .header-right-icons .bb-expand-search:focus-within input[type="text"],
    .header-right-icons .bb-expand-search.search-open input[type="text"]{
        width:min(310px, 45vw) !important;
        min-width:min(310px, 45vw) !important;
        max-width:min(310px, 45vw) !important;
    }
}

@media (max-width:767.98px){
    :root{
        --bb-final-icon-size:31px;
        --bb-final-icon-font:15px;
        --bb-final-icon-border:2px;
    }
    .main-header-row{
        gap:5px !important;
        min-height:58px !important;
    }
    .mobile-nav-toggle{
        width:31px !important;
        min-width:31px !important;
        max-width:31px !important;
        height:31px !important;
        min-height:31px !important;
        max-height:31px !important;
        flex:0 0 31px !important;
        padding:0 !important;
        margin:0 !important;
    }
    .site-logo,
    .site-logo img,
    .bb-main-logo{
        max-width:128px !important;
        height:auto !important;
        min-width:0 !important;
    }
    .header-right-icons{
        gap:5px !important;
        flex:0 0 auto !important;
        max-width:calc(100vw - 170px) !important;
    }
    .header-right-icons .bb-expand-search:hover .bb-search-input,
    .header-right-icons .bb-expand-search:focus-within .bb-search-input,
    .header-right-icons .bb-expand-search.search-open .bb-search-input,
    .header-right-icons .bb-expand-search:hover .form-control,
    .header-right-icons .bb-expand-search:focus-within .form-control,
    .header-right-icons .bb-expand-search.search-open .form-control,
    .header-right-icons .bb-expand-search:hover input[type="search"],
    .header-right-icons .bb-expand-search:focus-within input[type="search"],
    .header-right-icons .bb-expand-search.search-open input[type="search"],
    .header-right-icons .bb-expand-search:hover input[type="text"],
    .header-right-icons .bb-expand-search:focus-within input[type="text"],
    .header-right-icons .bb-expand-search.search-open input[type="text"]{
        width:min(220px, calc(100vw - 102px)) !important;
        min-width:min(220px, calc(100vw - 102px)) !important;
        max-width:min(220px, calc(100vw - 102px)) !important;
        padding-left:12px !important;
        padding-right:calc(var(--bb-final-icon-size) + 10px) !important;
    }
}

@media (max-width:430px){
    :root{
        --bb-final-icon-size:29px;
        --bb-final-icon-font:14px;
    }
    .main-header-row{
        gap:4px !important;
    }
    .site-logo,
    .site-logo img,
    .bb-main-logo{
        max-width:116px !important;
    }
    .header-right-icons{
        gap:4px !important;
        max-width:calc(100vw - 154px) !important;
    }
    .header-right-icons .bb-expand-search:hover .bb-search-input,
    .header-right-icons .bb-expand-search:focus-within .bb-search-input,
    .header-right-icons .bb-expand-search.search-open .bb-search-input,
    .header-right-icons .bb-expand-search:hover .form-control,
    .header-right-icons .bb-expand-search:focus-within .form-control,
    .header-right-icons .bb-expand-search.search-open .form-control,
    .header-right-icons .bb-expand-search:hover input[type="search"],
    .header-right-icons .bb-expand-search:focus-within input[type="search"],
    .header-right-icons .bb-expand-search.search-open input[type="search"],
    .header-right-icons .bb-expand-search:hover input[type="text"],
    .header-right-icons .bb-expand-search:focus-within input[type="text"],
    .header-right-icons .bb-expand-search.search-open input[type="text"]{
        width:min(185px, calc(100vw - 92px)) !important;
        min-width:min(185px, calc(100vw - 92px)) !important;
        max-width:min(185px, calc(100vw - 92px)) !important;
    }
}

@media (max-width:360px){
    :root{
        --bb-final-icon-size:27px;
        --bb-final-icon-font:13px;
    }
    .site-logo,
    .site-logo img,
    .bb-main-logo{
        max-width:102px !important;
    }
    .header-right-icons{
        gap:3px !important;
        max-width:calc(100vw - 136px) !important;
    }
}

/* =========================================================
   100% FINAL FIX: MOBILE SEARCH OVAL + CART COUNTER CUT
   ---------------------------------------------------------
   Paste-safe override. Keeps current colors/design.
   Fixes:
   1) Removes every possible oval/ghost shape behind search icon.
   2) Makes search/user/wish/cart icons exactly equal circular size.
   3) Prevents cart counter from being clipped on small mobile screens.
========================================================= */

/* all header wrappers must allow counter/badges to show fully */
.site-header,
.main-header-wrap,
.bb-logo-bar,
.main-header-wrap .container,
.main-header-row,
.header-right-icons,
.header-right-icons > *,
.account-box,
.icon-box,
.cart-link,
.cart-icon,
.header-cart,
.header-cart-box{
    overflow: visible !important;
}

/* Search wrapper/container must never draw any visible shape */
.header-search.bb-expand-search,
.header-right-icons .header-search.bb-expand-search,
.header-right-icons .bb-expand-search,
.bb-expand-search,
.header-search,
.header-search::before,
.header-search::after,
.bb-expand-search::before,
.bb-expand-search::after{
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    border-radius: 0 !important;
}

/* Default/collapsed search input must be completely gone, not width:0 oval */
.header-search.bb-expand-search:not(:hover):not(:focus-within):not(.search-open) .bb-search-input,
.header-search.bb-expand-search:not(:hover):not(:focus-within):not(.search-open) .form-control,
.header-right-icons .bb-expand-search:not(:hover):not(:focus-within):not(.search-open) .bb-search-input,
.header-right-icons .bb-expand-search:not(:hover):not(:focus-within):not(.search-open) .form-control{
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* only while active/hovered, input comes back as full search bar */
.header-search.bb-expand-search:hover .bb-search-input,
.header-search.bb-expand-search:focus-within .bb-search-input,
.header-search.bb-expand-search.search-open .bb-search-input,
.header-right-icons .bb-expand-search:hover .bb-search-input,
.header-right-icons .bb-expand-search:focus-within .bb-search-input,
.header-right-icons .bb-expand-search.search-open .bb-search-input{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    border: 1px solid rgba(139,113,33,.75) !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.10) !important;
    border-radius: 999px !important;
}

/* perfect same-size glossy circle icons */
.header-right-icons .icon-box,
.header-right-icons .account-box,
.header-right-icons .wishlist-link,
.header-right-icons .cart-link,
.header-right-icons .header-search.bb-expand-search,
.header-right-icons .bb-expand-search{
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    flex: 0 0 42px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    overflow: visible !important;
}

.header-right-icons .icon-box,
.header-right-icons .account-box > .icon-box,
.header-right-icons a.icon-box,
.header-right-icons button.icon-box,
.header-search.bb-expand-search .search-btn,
.header-search.bb-expand-search .bb-search-toggle,
.header-right-icons .bb-expand-search .search-btn,
.header-right-icons .bb-expand-search .bb-search-toggle{
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 2px solid #8B7121 !important;
    outline: 0 !important;
    color: #8B7121 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.88),
        inset 0 -5px 9px rgba(139,113,33,.10),
        0 4px 12px rgba(0,0,0,.12) !important;
    overflow: visible !important;
    line-height: 1 !important;
}

.header-search.bb-expand-search .search-btn i,
.header-search.bb-expand-search .bb-search-toggle i,
.header-right-icons .icon-box i{
    color: #8B7121 !important;
    font-size: 19px !important;
    line-height: 1 !important;
}

/* active search expansion opens to the left but button remains circle */
.header-right-icons .header-search.bb-expand-search:hover,
.header-right-icons .header-search.bb-expand-search:focus-within,
.header-right-icons .header-search.bb-expand-search.search-open,
.header-right-icons .bb-expand-search:hover,
.header-right-icons .bb-expand-search:focus-within,
.header-right-icons .bb-expand-search.search-open{
    width: min(255px, 62vw) !important;
    max-width: min(255px, 62vw) !important;
    flex: 0 0 min(255px, 62vw) !important;
    border-radius: 999px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.header-right-icons .bb-expand-search:hover .bb-search-input,
.header-right-icons .bb-expand-search:focus-within .bb-search-input,
.header-right-icons .bb-expand-search.search-open .bb-search-input{
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    padding: 0 52px 0 15px !important;
}

.header-right-icons .bb-expand-search:hover .search-btn,
.header-right-icons .bb-expand-search:focus-within .search-btn,
.header-right-icons .bb-expand-search.search-open .search-btn,
.header-right-icons .bb-expand-search:hover .bb-search-toggle,
.header-right-icons .bb-expand-search:focus-within .bb-search-toggle,
.header-right-icons .bb-expand-search.search-open .bb-search-toggle{
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
}

/* cart counter must not be cut */
.header-right-icons .cart-count,
.cart-count,
.header-cart-count,
.cart-badge,
.badge.cart-count{
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    min-width: 19px !important;
    height: 19px !important;
    padding: 0 5px !important;
    line-height: 19px !important;
    border-radius: 999px !important;
    background: #ED2024 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    z-index: 9999999 !important;
    overflow: visible !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.22) !important;
    border: 1px solid rgba(255,255,255,.85) !important;
    clip-path: none !important;
}

/* Mobile exact sizing: no oval, no overlap, no cut counter */
@media (max-width: 575.98px){
    .main-header-row{
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 5px !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    .header-right-icons{
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 5px !important;
        margin-left: auto !important;
        overflow: visible !important;
        min-width: 0 !important;
    }

    .site-logo{
        flex: 0 1 auto !important;
        min-width: 0 !important;
        max-width: 128px !important;
        overflow: hidden !important;
    }

    .site-logo img,
    .bb-main-logo{
        max-width: 126px !important;
        height: auto !important;
        max-height: 38px !important;
        object-fit: contain !important;
    }

    .mobile-nav-toggle{
        flex: 0 0 30px !important;
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        padding: 0 !important;
        margin-right: 2px !important;
    }

    .header-right-icons .icon-box,
    .header-right-icons .account-box,
    .header-right-icons .wishlist-link,
    .header-right-icons .cart-link,
    .header-right-icons .header-search.bb-expand-search,
    .header-right-icons .bb-expand-search{
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        flex: 0 0 34px !important;
        border-radius: 50% !important;
        overflow: visible !important;
    }

    .header-right-icons .icon-box,
    .header-search.bb-expand-search .search-btn,
    .header-search.bb-expand-search .bb-search-toggle,
    .header-right-icons .bb-expand-search .search-btn,
    .header-right-icons .bb-expand-search .bb-search-toggle{
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        flex: 0 0 34px !important;
        border-radius: 50% !important;
    }

    .header-search.bb-expand-search .search-btn i,
    .header-search.bb-expand-search .bb-search-toggle i,
    .header-right-icons .icon-box i{
        font-size: 16px !important;
    }

    .header-right-icons .header-search.bb-expand-search:hover,
    .header-right-icons .header-search.bb-expand-search:focus-within,
    .header-right-icons .header-search.bb-expand-search.search-open,
    .header-right-icons .bb-expand-search:hover,
    .header-right-icons .bb-expand-search:focus-within,
    .header-right-icons .bb-expand-search.search-open{
        position: absolute !important;
        right: 74px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: min(210px, calc(100vw - 180px)) !important;
        max-width: min(210px, calc(100vw - 180px)) !important;
        min-width: 132px !important;
        flex: none !important;
        z-index: 2147483000 !important;
    }

    .cart-count,
    .header-right-icons .cart-count,
    .header-cart-count,
    .cart-badge{
        top: -7px !important;
        right: -7px !important;
        min-width: 18px !important;
        height: 18px !important;
        line-height: 18px !important;
        font-size: 10px !important;
        padding: 0 4px !important;
    }
}

@media (max-width: 389.98px){
    .main-header-row{ gap: 4px !important; }
    .header-right-icons{ gap: 4px !important; }
    .site-logo{ max-width: 112px !important; }
    .site-logo img,
    .bb-main-logo{ max-width: 110px !important; max-height: 34px !important; }

    .header-right-icons .icon-box,
    .header-right-icons .account-box,
    .header-right-icons .wishlist-link,
    .header-right-icons .cart-link,
    .header-right-icons .header-search.bb-expand-search,
    .header-right-icons .bb-expand-search,
    .header-search.bb-expand-search .search-btn,
    .header-search.bb-expand-search .bb-search-toggle,
    .header-right-icons .bb-expand-search .search-btn,
    .header-right-icons .bb-expand-search .bb-search-toggle{
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        flex-basis: 32px !important;
    }

    .header-right-icons .icon-box i,
    .header-search.bb-expand-search .search-btn i,
    .header-search.bb-expand-search .bb-search-toggle i{
        font-size: 15px !important;
    }

    .cart-count,
    .header-right-icons .cart-count,
    .header-cart-count,
    .cart-badge{
        top: -6px !important;
        right: -6px !important;
        min-width: 17px !important;
        height: 17px !important;
        line-height: 17px !important;
        font-size: 9px !important;
    }
}


/* =========================================================
   FINAL RECOVERY: NO TOP GAP + ACCOUNT DROPDOWN ABOVE MENU
   Paste order: this block is intentionally at the very end.
   Fixes:
   1) Removes the accidental large top space above header.
   2) Keeps header/menu sticky without using body padding.
   3) Account dropdown stays above main menu, mega menu and slider.
   4) Mouse can move from user icon to SIGN IN/JOIN without closing.
========================================================= */

/* Remove all previous fixed-header spacer/padding that created the big top gap */
html{
    scroll-padding-top: 0 !important;
}

body{
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.bb-page-shell,
.site-header,
main.py-4,
.home-page-v2,
.hero-slider-section,
.hero-carousel{
    margin-top: 0 !important;
}

/* Use sticky header instead of fixed header, so no artificial top padding/gap is needed */
.site-header{
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    transform: none !important;
    z-index: 2147482000 !important;
    overflow: visible !important;
}

/* Very important: header wrappers must not clip dropdown */
.main-header-wrap,
.bb-logo-bar,
.site-header .container,
.main-header-row,
.header-right-icons,
.account-box{
    position: relative !important;
    overflow: visible !important;
}

/* The logo/header row must stay above the category/main menu so account dropdown can cover it */
.main-header-wrap,
.bb-logo-bar{
    z-index: 2147482500 !important;
}

/* Main menu stays sticky with header, but below the account dropdown */
.desktop-category-bar,
.bb-blue-menu-bar{
    position: relative !important;
    z-index: 2147480500 !important;
    overflow: visible !important;
}

/* Mega menu below account dropdown but above page content */
.desktop-mega-menu{
    z-index: 2147480800 !important;
}

/* Page content and sliders must never cover account dropdown */
main.py-4,
.home-page-v2,
.hero-slider-section,
.hero-carousel,
.carousel,
.home-products-section,
.site-footer{
    position: relative !important;
    z-index: 1 !important;
}

/* Account icon parent */
.account-box{
    z-index: 2147483000 !important;
    isolation: isolate !important;
    cursor: pointer !important;
}

/* Invisible bridge: prevents dropdown from closing while moving mouse from user icon to panel */
.account-box::after{
    content: "" !important;
    position: absolute !important;
    top: 100% !important;
    right: -120px !important;
    width: 470px !important;
    height: 38px !important;
    background: transparent !important;
    z-index: 2147483001 !important;
    pointer-events: auto !important;
}

/* Account dropdown panel: always on top of menu and slider */
.account-box .account-panel,
.account-panel{
    display: block !important;
    position: absolute !important;
    top: calc(100% + 20px) !important;
    right: -92px !important;
    left: auto !important;
    width: 380px !important;
    min-width: 380px !important;
    max-width: calc(100vw - 24px) !important;
    background: rgba(255,255,255,.98) !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    border-radius: 0 0 18px 18px !important;
    box-shadow: 0 22px 50px rgba(0,0,0,.22) !important;
    z-index: 2147483002 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(8px) !important;
    transition: opacity .16s ease, visibility .16s ease, transform .16s ease !important;
    overflow: visible !important;
}

/* Account dropdown arrow */
.account-box .account-panel::before,
.account-panel::before{
    content: "" !important;
    position: absolute !important;
    top: -13px !important;
    right: 178px !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 14px solid transparent !important;
    border-right: 14px solid transparent !important;
    border-bottom: 14px solid rgba(255,255,255,.98) !important;
    z-index: 2147483003 !important;
}

/* Show dropdown on hover/focus/class and keep it visible while hovering the panel */
.account-box:hover .account-panel,
.account-box:focus-within .account-panel,
.account-box.account-open .account-panel,
.account-box.mobile-account-open .account-panel,
.account-panel:hover{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

.account-panel,
.account-panel *,
.account-panel a,
.account-panel button,
.account-panel .btn{
    pointer-events: auto !important;
}

/* Make sure Bootstrap or custom menu classes do not create higher stacking contexts */
.desktop-category-list,
.desktop-category-item,
.mobile-mega-nav,
.mobile-category-bar{
    z-index: 2147480500 !important;
}

/* Mobile/tablet account panel */
@media (max-width: 991.98px){
    body{
        padding-top: 0 !important;
    }

    .site-header{
        position: sticky !important;
        top: 0 !important;
        z-index: 2147482000 !important;
    }

    .main-header-wrap,
    .bb-logo-bar{
        z-index: 2147482500 !important;
    }

    .account-box{
        position: relative !important;
        z-index: 2147483000 !important;
    }

    .account-box::after{
        display: none !important;
        content: none !important;
    }

    .account-box .account-panel,
    .account-panel{
        position: fixed !important;
        top: 92px !important;
        right: 10px !important;
        left: auto !important;
        width: min(340px, calc(100vw - 20px)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 20px) !important;
        transform: translateY(8px) !important;
        border-radius: 16px !important;
        z-index: 2147483002 !important;
    }

    .account-box .account-panel::before,
    .account-panel::before{
        display: none !important;
        content: none !important;
    }

    .account-box:hover .account-panel,
    .account-box:focus-within .account-panel,
    .account-box.account-open .account-panel,
    .account-box.mobile-account-open .account-panel,
    .account-panel:hover{
        transform: translateY(0) !important;
    }
}

@media (max-width: 380px){
    .account-box .account-panel,
    .account-panel{
        top: 86px !important;
        right: 6px !important;
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
    }
}

/* Search expanded bar should not sit above account dropdown */
.header-search.bb-expand-search.search-open,
.header-search.bb-expand-search:focus-within{
    z-index: 2147482600 !important;
}

.account-box .account-panel{
    z-index: 2147483002 !important;
}

/* =========================================================
   ACCOUNT DROPDOWN FINAL FIX - HOVER + MODAL BUTTONS WORK
   ---------------------------------------------------------
   Fixes:
   1) Account dropdown stays above main menu / mega menu / slider.
   2) Desktop hover works normally.
   3) SIGN IN / JOIN buttons can open Bootstrap modals.
   4) No portal/body move, no broken Bootstrap modal bubbling.
========================================================= */

/* header layers must stay visible */
.site-header,
.site-header .main-header-wrap,
.site-header .bb-logo-bar,
.site-header .container,
.site-header .main-header-row,
.site-header .header-right-icons,
.site-header .account-box{
    overflow: visible !important;
}

.site-header{
    position: sticky !important;
    top: 0 !important;
    z-index: 2147482000 !important;
    transform: none !important;
}

.site-header .main-header-wrap,
.site-header .bb-logo-bar,
.site-header .main-header-row,
.site-header .header-right-icons{
    position: relative !important;
    z-index: 2147482500 !important;
}

/* Menu and slider must stay lower than account dropdown */
.site-header .desktop-category-bar,
.site-header .bb-blue-menu-bar,
.desktop-category-bar,
.bb-blue-menu-bar{
    position: relative !important;
    z-index: 2147480500 !important;
    overflow: visible !important;
}

.site-header .desktop-mega-menu,
.desktop-mega-menu{
    z-index: 2147480800 !important;
}

main,
main.py-4,
.home-page-v2,
.hero-slider-section,
.hero-carousel,
.carousel,
.home-products-section,
.site-footer{
    position: relative !important;
    z-index: 1 !important;
}

/* Account parent */
.account-box{
    position: relative !important;
    overflow: visible !important;
    z-index: 2147483000 !important;
    isolation: isolate !important;
    cursor: pointer !important;
}

/* Invisible bridge between icon and dropdown. This keeps hover alive. */
.account-box::after{
    content: "" !important;
    position: absolute !important;
    top: 100% !important;
    right: -120px !important;
    width: 470px !important;
    height: 42px !important;
    background: transparent !important;
    z-index: 2147483001 !important;
    pointer-events: auto !important;
}

/* Normal inside dropdown, not portal */
.account-box .account-panel,
.account-panel{
    display: block !important;
    position: absolute !important;
    top: calc(100% + 22px) !important;
    right: -92px !important;
    left: auto !important;
    width: 380px !important;
    min-width: 380px !important;
    max-width: calc(100vw - 24px) !important;
    background: rgba(255,255,255,.985) !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    border-radius: 0 0 18px 18px !important;
    box-shadow: 0 22px 55px rgba(0,0,0,.24) !important;
    z-index: 2147483002 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(8px) !important;
    transition: opacity .16s ease, visibility .16s ease, transform .16s ease !important;
    overflow: visible !important;
}

.account-box .account-panel::before,
.account-panel::before{
    content: "" !important;
    position: absolute !important;
    top: -13px !important;
    right: 178px !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 14px solid transparent !important;
    border-right: 14px solid transparent !important;
    border-bottom: 14px solid rgba(255,255,255,.985) !important;
    z-index: 2147483003 !important;
    background: transparent !important;
    transform: none !important;
}

.account-box:hover .account-panel,
.account-box:focus-within .account-panel,
.account-box.account-open .account-panel,
.account-box.mobile-account-open .account-panel,
.account-panel:hover{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

.account-panel,
.account-panel *,
.account-panel a,
.account-panel button,
.account-panel .btn{
    pointer-events: auto !important;
}

/* Bootstrap modal must always be above sticky header/dropdown */
.modal{
    z-index: 2147483600 !important;
}
.modal-backdrop{
    z-index: 2147483500 !important;
}

@media (max-width: 991.98px){
    .account-box::after{
        display: none !important;
        content: none !important;
    }

    .account-box .account-panel,
    .account-panel{
        position: fixed !important;
        top: 92px !important;
        right: 10px !important;
        left: auto !important;
        width: min(340px, calc(100vw - 20px)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 20px) !important;
        border-radius: 16px !important;
        z-index: 2147483002 !important;
    }

    .account-box .account-panel::before,
    .account-panel::before{
        display: none !important;
        content: none !important;
    }
}

@media (max-width: 380px){
    .account-box .account-panel,
    .account-panel{
        top: 86px !important;
        right: 6px !important;
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
    }
}


/* =========================================================
   FINAL STICKY HEADER + MENU RESTORE
   ---------------------------------------------------------
   Purpose:
   1) Header + main menu stay fixed/sticky on every page.
   2) No extra top gold gap.
   3) Page content starts exactly after header/menu.
   4) Account dropdown remains above main menu/mega menu/slider.
   5) Bootstrap login/register modal remains clickable/working.
========================================================= */

:root{
    --bb-sticky-header-height: 0px;
}

/* Prevent old sticky/fixed patches from adding wrong spacing */
html,
body{
    margin-top: 0 !important;
    padding-top: 0 !important;
    scroll-padding-top: var(--bb-sticky-header-height) !important;
}

/* JS adds this class after measuring the header height */
body.bb-sticky-ready{
    padding-top: var(--bb-sticky-header-height) !important;
}

/* Make the whole header + category menu fixed at top */
.site-header{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 2147482000 !important;
    overflow: visible !important;
}

/* Header wrappers must stay unclipped */
.site-header,
.site-header .main-header-wrap,
.site-header .bb-logo-bar,
.site-header .container,
.site-header .main-header-row,
.site-header .header-right-icons,
.site-header .account-box{
    overflow: visible !important;
}

/* Logo/header row must stay above the menu row because dropdown belongs here */
.site-header .main-header-wrap,
.site-header .bb-logo-bar{
    position: relative !important;
    z-index: 2147482400 !important;
}

/* Main menu stays inside fixed header, below logo row and dropdown */
.site-header .desktop-category-bar,
.site-header .bb-blue-menu-bar,
.desktop-category-bar,
.bb-blue-menu-bar{
    position: relative !important;
    z-index: 2147481000 !important;
    overflow: visible !important;
}

/* Mega menu above page content but below account dropdown */
.site-header .desktop-mega-menu,
.desktop-mega-menu{
    z-index: 2147481200 !important;
}

/* Page content must not create an overlay above header/dropdown */
main,
main.py-4,
.home-page-v2,
.hero-slider-section,
.hero-carousel,
.carousel,
.home-products-section,
.product-details-page,
.site-footer{
    position: relative !important;
    z-index: 1 !important;
}

/* Remove accidental extra top gaps under fixed header */
.bb-page-shell,
main.py-4,
.home-page-v2,
.hero-slider-section,
.hero-carousel,
.product-details-page{
    margin-top: 0 !important;
}

/* Account dropdown must always be above menu/slider */
.site-header .account-box,
.account-box{
    position: relative !important;
    z-index: 2147483000 !important;
    overflow: visible !important;
    isolation: isolate !important;
}

/* Hover bridge: mouse can move from icon to dropdown safely */
.account-box::after{
    content: "" !important;
    position: absolute !important;
    top: 100% !important;
    right: -125px !important;
    width: 480px !important;
    height: 44px !important;
    background: transparent !important;
    z-index: 2147483001 !important;
    pointer-events: auto !important;
}

.account-box .account-panel,
.account-panel{
    z-index: 2147483002 !important;
}

.account-box:hover .account-panel,
.account-box:focus-within .account-panel,
.account-box.account-open .account-panel,
.account-box.mobile-account-open .account-panel,
.account-panel:hover{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Bootstrap modal must be above everything */
.modal{
    z-index: 2147483600 !important;
}

.modal-backdrop{
    z-index: 2147483500 !important;
}

/* Mobile fixed header + account dropdown */
@media (max-width: 991.98px){
    body.bb-sticky-ready{
        padding-top: var(--bb-sticky-header-height) !important;
    }

    .site-header{
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 2147482000 !important;
    }

    .account-box::after{
        display: none !important;
        content: none !important;
    }

    .account-box .account-panel,
    .account-panel{
        position: fixed !important;
        top: calc(var(--bb-sticky-header-height) - 18px) !important;
        right: 10px !important;
        left: auto !important;
        width: min(340px, calc(100vw - 20px)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 20px) !important;
        border-radius: 16px !important;
        z-index: 2147483002 !important;
    }
}

@media (max-width: 380px){
    .account-box .account-panel,
    .account-panel{
        right: 6px !important;
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
    }
}

/* =========================================================
   DYNAMIC HOMEPAGE SLIDER + MARQUEE COLOR OVERRIDES
   Final production override.
========================================================= */

/* Header notice: deep red */
.bb-header-notice-marquee .bb-marquee-track,
.bb-header-notice-marquee .bb-marquee-track *{
    color:#8b0000 !important;
    text-shadow:none !important;
}

/* Discount marquee: deep blue */
.bb-header-discount-marquee .bb-marquee-track,
.bb-header-discount-marquee .bb-marquee-track span,
.bb-header-discount-marquee .bb-end-time-text,
.bb-header-discount-marquee .bb-dot-gap{
    color:#001f7a !important;
    text-shadow:none !important;
}

/* Dynamic track sizing: every database item occupies exactly one panel width. */
.bb-dual-hero-track{
    width:calc(var(--bb-total-slides, 4) * 100%) !important;
    animation-duration:var(--bb-slider-duration, 18s) !important;
}

.bb-dual-hero-track .bb-dual-slide{
    flex:0 0 calc(100% / var(--bb-total-slides, 4)) !important;
    width:calc(100% / var(--bb-total-slides, 4)) !important;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
}

/* Preserve existing direction animations. */
.bb-scroll-left{
    animation-name:bbHeroScrollLeft !important;
    animation-timing-function:linear !important;
    animation-iteration-count:infinite !important;
}

.bb-scroll-right{
    animation-name:bbHeroScrollRight !important;
    animation-timing-function:linear !important;
    animation-iteration-count:infinite !important;
}

/* Pause behavior is now controlled by Admin. */
.bb-dual-hero-panel.bb-pause-on-hover:hover .bb-dual-hero-track{
    animation-play-state:paused !important;
}

.bb-dual-hero-panel:not(.bb-pause-on-hover):hover .bb-dual-hero-track{
    animation-play-state:running !important;
}

/* Uploaded images are normalized to 1600x900 server-side;
   cover keeps both desktop and responsive containers filled edge-to-edge. */
.bb-dual-slide{
    overflow:hidden !important;
}

.bb-dual-slide .hero-btn{
    border-color:transparent !important;
}