/* ─────────────────────────────────────────────
   TOPBAR STYLE UPDATE
   Use this in assets/css/topbar_style.css or paste at the end.
   Logic/classes remain compatible with existing topbar/cart/search JS.
───────────────────────────────────────────── */

:root{
    --tb-dark:#3f3f3f;
    --tb-black:#171719;
    --tb-border:#3d3d3d;
    --tb-text:#333;
}

.estore-topbar-shell{
    width:100%;
    background:#fff;
    position:relative;
    z-index:120;
    font-family:inherit;
}

.topbar-promo-main{
    background:var(--tb-black);
    color:#fff;
    text-align:center;
    padding:10px 12px;
    font-size:18px;
    line-height:1.35;
    font-weight:400;
}

.topbar-promo-sub{
    background:#454545;
    color:#fff;
    text-align:center;
    padding:8px 12px;
    font-size:14px;
    line-height:1.35;
    letter-spacing:.2px;
}

.topbar{
    position:static!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
    opacity:1!important;
    width:100%;
    height:120px;
    background:#fff;
    border:0;
    box-shadow:none!important;
    display:block;
    padding:0!important;
    z-index:120;
}

.topbar.scrolled{
    transform:none!important;
    opacity:1!important;
    box-shadow:none!important;
    background:#fff!important;
}

.topbar__main{
    max-width:1440px;
    margin:0 auto;
    height:120px;
    display:grid;
    grid-template-columns:260px minmax(360px,620px) 300px;
    gap:40px;
    align-items:center;
    padding:0 38px;
}

.topbar__logo{
    display:flex!important;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    width:auto!important;
    height:auto!important;
    margin:0!important;
}

.topbar__logo img{
    width:auto!important;
    height:118px!important;
    max-width:190px!important;
    object-fit:contain!important;
    display:block;
}

/* Expanded search bar */
.topbar__search-expanded,
.topbar__search-btn{
    width:100%!important;
    height:48px!important;
    border:2px solid var(--tb-border)!important;
    background:#fff!important;
    color:#777!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    padding:0 15px!important;
    border-radius:4px!important;
    cursor:text!important;
    font:inherit!important;
    text-align:left!important;
    font-size:16px!important;
    flex-shrink:1!important;
}

.topbar__search-expanded span,
.topbar__search-btn span{
    flex:1;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.topbar__search-expanded svg,
.topbar__search-btn svg{
    width:22px!important;
    height:22px!important;
    color:#666;
    stroke:currentColor;
    flex-shrink:0;
}

.topbar__search-expanded:hover,
.topbar__search-btn:hover{
    background:#fff!important;
}

/* Search dropdown/panel */
.topbar-search-box{
    position:fixed;
    top:185px;
    left:50%;
    transform:translateX(-50%);
    width:min(620px, calc(100% - 40px));
    background:#fff;
    border:1px solid #eee;
    box-shadow:0 8px 30px rgba(0,0,0,.12);
    z-index:1200;
    display:none;
}

.topbar-search-box.open{display:block;}

.topbar-search-input{
    width:100%;
    border:0;
    border-bottom:1px solid #eee;
    padding:14px 16px;
    outline:none;
    font-size:14px;
}

.topbar-search-results{
    max-height:360px;
    overflow-y:auto;
}

.topbar-search-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:11px 14px;
    text-decoration:none;
    color:#111;
    border-bottom:1px solid #f2f2f2;
    font-size:14px;
}

.topbar-search-item:hover{background:#fafafa;}

.topbar-search-item img{
    width:46px;
    height:58px;
    object-fit:cover;
    background:#f5f5f5;
}

.topbar-search-empty{
    padding:14px;
    color:#888;
    font-size:13px;
}

.topbar__actions{
    height:64px;
    display:flex!important;
    align-items:center;
    justify-content:flex-end;
    gap:0!important;
    margin-left:0!important;
    white-space:nowrap;
}

.topbar__user,
.topbar__cart{
    width:auto!important;
    height:52px!important;
    min-width:112px;
    border-radius:0!important;
    color:var(--tb-text)!important;
    display:flex!important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    text-decoration:none;
    background:transparent!important;
    padding:0 12px;
    position:relative;
    border-right:1px solid #333;
}

.topbar__cart{border-left:1px solid #333;}
.topbar__user:hover,
.topbar__cart:hover{background:#f8f8f8!important;}

.topbar__user svg,
.topbar__cart svg{
    width:26px!important;
    height:26px!important;
    stroke-width:1.7!important;
}

.topbar__user::after{
    content:'My Account';
    font-size:13px;
    line-height:1;
    color:#333;
    font-weight:400;
    white-space:nowrap;
}

.topbar__cart::after{
    content:'Shopping Cart';
    font-size:13px;
    line-height:1;
    color:#333;
    font-weight:400;
    white-space:nowrap;
}

.cart-icon{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.topbar__cart-badge{
    position:absolute!important;
    top:-7px!important;
    right:-9px!important;
    min-width:17px!important;
    height:17px!important;
    padding:0 4px!important;
    border-radius:50%!important;
    background:#2f3d45!important;
    color:#fff!important;
    display:flex!important;
    align-items:center;
    justify-content:center;
    font-size:10px!important;
    font-weight:700!important;
    line-height:1!important;
}

.topbar__cart-total{display:none!important;}

/* Dark navigation row */
.topbar__nav{
    width:100%;
    background:var(--tb-dark);
    min-height:64px;
}

.topbar__nav-inner{
    max-width:1440px;
    margin:0 auto;
    height:64px;
    display:flex;
    align-items:center;
    gap:58px;
    padding:0 38px;
}

.topbar__hamburger{
    width:auto!important;
    height:auto!important;
    border:0!important;
    background:transparent!important;
    color:#fff!important;
    padding:0!important;
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    flex-shrink:0;
}

.topbar__hamburger span{display:none!important;}
.topbar__hamburger::before{
    content:'☰';
    font-size:18px;
    line-height:1;
    color:#fff;
}

.topbar__nav-link{
    color:#fff;
    text-decoration:none;
    font-size:16px;
    font-weight:400;
    letter-spacing:.2px;
    text-transform:uppercase;
    display:inline-flex;
    align-items:center;
    gap:8px;
    height:64px;
}

.topbar__nav-link:hover{color:#fff;opacity:.82;}
.topbar__nav-caret{font-size:12px;line-height:1;opacity:.95;}
.topbar__mobile-search-wrap{display:none;}
.topbar__mobile-cart{display:none!important;}

@media (max-width:900px){
    .topbar-promo-main,
    .topbar-promo-sub{display:none;}

    .topbar__main{
        min-height:105px;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:0 12px;
    }

    .topbar__logo img{
        height:98px!important;
        max-width:170px!important;
    }

    .topbar__main .topbar__search-expanded,
    .topbar__main .topbar__search-btn,
    .topbar__main .topbar__actions{
        display:none!important;
    }

    .topbar__nav{
        min-height:52px;
        background:var(--tb-dark);
    }

    .topbar__nav-inner{
        height:52px;
        padding:0 10px;
        gap:10px;
        max-width:none;
    }

    .topbar__nav-link{display:none!important;}

    .topbar__hamburger{
        width:31px!important;
        height:52px!important;
        display:flex!important;
    }

    .topbar__hamburger::before{font-size:25px;}

    .topbar__mobile-search-wrap{
        display:flex;
        flex:1;
        min-width:0;
    }

    .topbar__mobile-search-wrap .topbar__search-expanded,
    .topbar__mobile-search-wrap .topbar__search-btn{
        height:38px!important;
        border:0!important;
        border-radius:0!important;
        background:#fff!important;
        padding:0 12px!important;
        font-size:14px!important;
    }

    .topbar__mobile-search-wrap .topbar__search-expanded svg,
    .topbar__mobile-search-wrap .topbar__search-btn svg{
        width:18px!important;
        height:18px!important;
    }

    .topbar__mobile-cart{
        display:flex!important;
        min-width:40px!important;
        width:40px!important;
        height:52px!important;
        border:0!important;
        padding:0!important;
        align-items:center!important;
        justify-content:center!important;
        color:#fff!important;
        background:transparent!important;
        position:relative;
    }

    .topbar__mobile-cart::after{display:none!important;content:none!important;}
    .topbar__mobile-cart svg{
        width:31px!important;
        height:31px!important;
        color:#fff!important;
        stroke:#fff!important;
    }

    .topbar__mobile-cart .topbar__cart-badge{
        top:7px!important;
        right:0!important;
        background:#333!important;
        border:1px solid #fff;
    }

    .topbar-search-box{
        top:155px;
        right:12px;
        left:12px;
        transform:none;
        width:auto;
    }
}

@media (max-width:420px){
    .topbar__logo img{height:92px!important;}
    .topbar__nav-inner{padding:0 8px;gap:8px;}
    .topbar__mobile-search-wrap .topbar__search-expanded,
    .topbar__mobile-search-wrap .topbar__search-btn{
        font-size:13px!important;
        padding:0 10px!important;
    }
}

/* Final drawer/tag hover product panel */
.tag-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.38);z-index:1400;display:none}.tag-drawer-overlay.active{display:block}.tag-drawer{position:fixed;top:0;left:-360px;width:340px;max-width:92vw;height:100vh;background:#fff;z-index:1401;transition:left .28s ease;box-shadow:8px 0 32px rgba(0,0,0,.18);display:flex;flex-direction:column}.tag-drawer.open{left:0}.tag-drawer__head{height:64px;background:#3f3f3f;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-weight:800;text-transform:uppercase}.tag-drawer__close{border:0;background:transparent;color:#fff;font-size:28px;cursor:pointer}.tag-drawer__body{display:flex;min-height:0;flex:1}.tag-drawer__tags{width:118px;border-right:1px solid #eee;overflow:auto;background:#fafafa}.tag-drawer__tag{display:block;width:100%;border:0;border-bottom:1px solid #eee;background:transparent;padding:14px 10px;text-align:left;font-size:12px;font-weight:800;text-transform:uppercase;color:#555;cursor:pointer}.tag-drawer__tag.active,.tag-drawer__tag:hover{background:#fff;color:#111}.tag-drawer__products{flex:1;overflow:auto;padding:14px}.tag-drawer__grid{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tag-drawer__grid.active{display:grid}.tag-drawer__product{text-decoration:none;color:#333}.tag-drawer__product img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#f7f7f7}.tag-drawer__product span{display:block;font-size:11px;text-transform:uppercase;font-weight:800;line-height:1.25;margin-top:7px}.tag-drawer__price{font-size:12px;font-weight:800;margin-top:4px}@media(min-width:1100px){.tag-drawer{width:760px;left:-800px}.tag-drawer__tags{width:190px}.tag-drawer__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(min-width:1400px){.tag-drawer{width:900px;left:-940px}.tag-drawer__grid{grid-template-columns:repeat(5,minmax(0,1fr))}}


/* final dropdown/search fixes */
.topbar.hide{transform:none!important;opacity:1!important;}
.topbar__collection-trigger{border:0;background:transparent;cursor:pointer;font-family:inherit;}
.tag-drawer.dropdown-mode{left:0!important;right:0!important;width:100%!important;max-width:none!important;height:auto!important;min-height:260px;display:flex;box-shadow:0 18px 42px rgba(0,0,0,.18);transition:none!important;}
.tag-drawer.dropdown-mode .tag-drawer__head{display:none;}
.tag-drawer.dropdown-mode .tag-drawer__body{max-width:1320px;width:100%;margin:0 auto;background:#fff;border-top:1px solid #eee;}
.tag-drawer-overlay.transparent{background:transparent!important;pointer-events:none;}
@media(max-width:900px){.topbar__collection-trigger{display:none!important}.tag-drawer.dropdown-mode{display:none!important}}



.top-specs-bar,
.specs-marquee-wrap{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    z-index:99999!important;
    display:block!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
}

.estore-topbar-shell,
.topbar,
body > .topbar{
    margin-top:36px!important;
}


.topbar-promo-main,
.topbar-promo-sub,
.topbar,
.topbar__nav,
.topbar__main{
    margin:0!important;
}

.topbar-promo-sub{
    padding-bottom:0!important;
}

.topbar{
    padding:0!important;
}

.topbar__nav{
    margin-top:0!important;
}