/* Top Notification Bar */
.top-notification { padding: 10px 0; }
.top-notification a { color: #fff; display: flex; align-items: center; }
.top-notification a:hover { color: #f6f6f6; text-decoration: none; }
.top-notification .mobile { display: none; }
.top-notification .cursor { margin-right: 15px; }
.top-notification .cursor img { max-height: 22px; position: relative; top: -2px; }
.top-notification .afterpay { margin-right: 5px; }
.top-notification .afterpay a { display: inline-block; }
.top-notification .afterpay img { max-height: 21px; }

/* Top Header */
.top-header { padding: 25px 0 30px; overflow: visible; }
.top-header a:hover { color: #000; }

.top-search .text { padding: 8px 0 4px 0 !important; font-size: 1rem; line-height: 20px; }
.top-search .aws-container .aws-search-form { background-color: #b8e4cc; flex-direction: row-reverse; }
.top-search .aws-search-field { border: 1px solid #aaaaaa; text-indent: 15px; padding: 10px 10px 10px 0 !important; font-size: 1rem; border-radius: 4px 0 0 4px !important; background-color: #fff; }
.top-search .aws-container .aws-search-form .aws-form-btn { border-top: 1px solid #aaaaaa; border-right: 1px solid #aaaaaa; border-bottom: 1px solid #aaaaaa; border-radius: 0 6px 6px 0 !important; }
.top-search .aws-container .aws-search-form .aws-search-btn_icon { height: 30px; }
.top-search .aws-search-field::-moz-placeholder { color: #333333; opacity: 0.5; }
.top-search .aws-search-field::placeholder { color: #333333; opacity: 0.5; }
.top-search .aws-container { position: relative; z-index: 1050; }
.top-search .aws-search-result { z-index: 1050 !important; }
.aws-search-result .aws_result_item.on-sale .aws_result_title { padding-right: 20px !important; }

.userbar { list-style: none; }
.userbar a { border-bottom: 1px solid #333; }
.userbar a:hover { text-decoration: none; }
.userbar li:first-child { position: relative; padding-right: 15px; }
.userbar li:last-child { padding-left: 15px; }
.userbar li:first-child:after { display: block; content: "|"; position: absolute; top: 0; right: -2px; }

.shopping-bar { list-style: none; }
.shopping-bar li { margin-right: 15px; }
.shopping-bar li:last-child { margin-right: 0; }
.shopping-bar a {
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 25px 25px;
    display: block;
    padding-top: 29px;
    width: 55px;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: normal;
    transition: opacity .15s ease;
}
.shopping-bar a:hover {
    text-decoration: none;
    opacity: 0.7;
}

/* Preload hover images */
body::after { position: absolute; width: 0; height: 0; overflow: hidden; z-index: -1; content: url(../../images/like-h.png) url(../../images/call-h.png) url(../../images/gift-card-h.png) url(../../images/cart-h.png); }

.mylists a    { background-image: url(../../images/heart-outlined.png); }
.service a    { background-image: url(../../images/phone-outlined.png); }
.gift-cards a { background-image: url(../../images/gift-outlined.png); }
.mycart a     { background-image: url(../../images/cart-outlined.png); width: 40px; position: relative; }
@media only screen and (max-width: 768px) {
    .mycart a:hover { background-image: none; }
}

.cart-count {
    width: 25px; height: 25px;
    background: #3DBC9F; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600;
    border-radius: 100%;
    position: absolute; top: -12px; right: -5px;
}

/* Main Navigation */
button.navbar-toggler.mobile { outline: none !important; }
#wrapper-navbar .navbar-dark { padding: 0; }
.menu-main-menu-container,
#navbarNavDropdown > div { width: 100%; }
.navbar-brand > img { max-width: 252px; }
.custom-logo-link { display: inline-block; }
.custom-logo-link img,
.custom-logo { max-width: 252px; height: auto; width: 100%; }
/* On desktop the navbar-collapse is a static flex container — no scroll needed.
   On mobile (collapsed by Bootstrap toggle) restore the scroll for long menus. */
.navbar-collapse {
    overflow: visible !important;
}
@media (max-width: 991px) {
    .navbar-collapse {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        max-height: 100vh;
    }
    /* While the mobile menu is open, lock page scroll so the header stays put
       and the menu (sized by JS to fill to the viewport bottom) is the only
       thing that scrolls — nothing shows behind it. */
    html.vb-menu-open,
    html.vb-menu-open body {
        overflow: hidden !important;
    }
    /* When a dropdown inside the menu is open, lock the menu's own scroll so
       only the dropdown content scrolls — the nav items can't bleed back into
       view (overrides .navbar-collapse's overflow-y:auto !important). */
    #navbarNavDropdown.navbar-collapse.vb-dropdown-locked {
        overflow-y: hidden !important;
    }
}

/* Per-category nav icon images (used as background-image fallback when
   a menu item has no WP "Menu Image" set — the VB 2026 ::after rules
   override these when .nav-has-image class is present). */
#main-menu .best-deals .nav-link { background-image: url(../../images/discount.png); }
#main-menu .all-brand .nav-link  { background-image: url(../../images/brand-tag.png); }
#main-menu .dinner .nav-link      { background-image: url(../../images/dinner.png); }
#main-menu .glassware .nav-link   { background-image: url(../../images/glass.png); }
#main-menu .cookware .nav-link    { background-image: url(../../images/cookware.png); }
#main-menu .kitchenware .nav-link { background-image: url(../../images/kitchen.png); }
#main-menu .outdoor .nav-link     { background-image: url(../../images/outdoor.png); }
#main-menu .decor-gifts .nav-link { background-image: url(../../images/gift.png); }

/* Megamenu */
.navbar-nav li.vb-megamenu { position: unset; }
.vb-megamenu ul.dropdown-menu.vb-megamenu-links { max-width: 100% !important; width: 100%; position: relative; background: transparent !important; margin: 0 auto; display: flex !important; flex-direction: row; flex-wrap: wrap; }

.vb-megamenu-wrap { position: absolute; top: 144px; left: 0; opacity: 0; visibility: hidden; width: 100%; z-index: 10; background: #fff; height: auto; box-shadow: 0px 5px 12px -6px #000; }
.vb-megamenu-wrap.mmclose { opacity: 0 !important; visibility: hidden !important; }
.vb-megamenu-wrap.vb-megamenu-open { opacity: 1; visibility: visible; transition: all .3s ease; }

/* Legacy positioning — superseded by #wrapper-navbar .vb-megamenu-wrap rule below.
   Removed `margin-left: -660px` which caused horizontal scroll on narrow viewports. */
.container.vb-megamenu-wrap { padding: 0 !important; overflow: hidden; }
.container.vb-megamenu-wrap.scroll { overflow: auto; }

.vb-megamenu-wrap:before { content: ""; display: block; width: 100%; position: absolute; top: -10px; left: 0; height: 10px; z-index: 5; box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.3); }

#main-menu > li:hover .vb-megamenu-wrap { opacity: 1; visibility: visible; box-shadow: 0px 9999px 0px 9999px rgba(0,0,0,.5); transition: opacity .3s ease, visibility .3s ease; transition-delay: 0.5s; }

.vb-megamenu.container { padding: 30px 60px; z-index: 3; background: #fff; position: relative; }
.vb-megamenu ul { list-style: none; padding: 0; }

.vb-megamenu > ul > li { display: inline-block; text-align: center; width: 13.6%; position: relative; margin: 0 1.5% 10px; }
.vb-megamenu > ul > li img { max-width: 160px; max-height: 155px; width: 100%; height: 200px; object-fit: cover; }

/* Megamenu featured-image area: keep the space reserved so the layout
   doesn't shift when an image loads on hover, but suppress the gray
   "Image Placeholder" graphic when the <img> has no src yet. */
.vb-megamenu-image-area {
    background: transparent !important;
    border: 0 !important;
}
/* Hide the empty/loading image (no src or empty src) — kills the broken-
   image icon and any placeholder background. */
.vb-megamenu-featured-image:not([src]),
.vb-megamenu-featured-image[src=""],
.vb-megamenu-featured-image[src="#"] {
    visibility: hidden;
    opacity: 0;
}
/* When JS sets a real src on hover, fade the image in */
.vb-megamenu-featured-image[src]:not([src=""]):not([src="#"]) {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s ease;
}
.vb-megamenu > ul > li.nav-has-image a.mbrand-overlay { opacity: 0; visibility: hidden; position: absolute; padding: 15px !important; width: 100%; height: 100%; border: 0 !important; top: 0; left: 0; display: flex; align-items: center; justify-content: center; text-align: center; background: rgba(184,228,204,0.94) !important; line-height: 20px; text-decoration: none; white-space: normal; color: #212529 !important; }
.vb-megamenu > ul > li:hover a.mbrand-overlay { opacity: 1; visibility: visible; }
.vb-megamenu > ul > li a.mbrand-name { font-weight: bold; text-align: center; margin-top: 15px; padding: 0 15px 10px; line-height: 20px; display: block; }
.vb-megamenu > ul > li.shop-all { display: none; }

.vb-megamenu-footer { text-align: center; max-width: 903px; margin: 50px auto 40px; display: none; }
.vb-megamenu-footer a { width: 48%; padding: 10px 30px; }
.vb-megamenu-footer a:first-child { margin-right: 2%; }

.vb-megamenu-overlay { position: absolute; width: 100%; left: 0; background: #000; z-index: 2; opacity: 0.5; }
/* Legacy 99999px overlay — superseded by box-shadow approach on .vb-megamenu-wrap */
.vb-mm-overlay { display: none; }

.vb-megamenu-close { display: none; position: absolute; right: auto; left: 50%; bottom: -16px; width: 32px; height: 32px; cursor: pointer; background: #fff; border-radius: 3px; margin-left: -16px; }
.vb-megamenu-close:before,
.vb-megamenu-close:after { position: absolute; left: 15px; top: 5px; content: ' '; height: 22px; width: 2px; background-color: #333; }

.vb-megamenu > a { white-space: normal; }
.vb-megamenu > a:after { content: none !important; }
.vb-megamenu-close:before { transform: rotate(45deg); }
.vb-megamenu-close:after  { transform: rotate(-45deg); }
/* (Old .all-brand .nav-brands-* megamenu styles removed — superseded by the
   2026 brands redesign in css/custom/brands.css.) */

.vb-megamenu-footer a span { display: inline-block; width: 28px; height: 28px; position: absolute; top: 12px; left: 15px; background-repeat: no-repeat !important; background-size: contain; }

/* Legacy responsive nav rules */
@media (min-width: 1200px) and (max-width: 1349px) {
    .container.vb-megamenu-wrap { max-width: 97.5%; margin-left: -48.25vw; }
}

@media (min-width: 992px) {
    .vb-megamenu-footer a span { display: none !important; }
}

@media screen and (max-width: 1199px) {
    #main-menu li .nav-link { padding: 75px 10px 15px; }
    .top-search .text { font-size: 1rem; }
    .vb-megamenu > ul > li { max-width: 153px; width: 20%; }
    .vb-megamenu > ul > li img { max-width: 145px; max-height: 120px; }
    .container.vb-megamenu-wrap { max-width: 930px; margin-left: -465px; }
}

@media screen and (max-width: 991px) {
    body .mobile { display: block; }
    body .desk   { display: none; }

    .top-notification .mobile { display: block; }
    /* Higher specificity than `.top-notification a {display:flex}` (0,1,1),
       which otherwise re-shows the desk anchor on mobile via later source order. */
    .top-notification .desk { display: none; }
    .top-notification .col-lg-6:last-child { display: flex; justify-content: flex-end; }
    /* The notification anchor is display:flex, so text-center can't position it.
       Center the flex content for the first (subscribe) column on mobile/tablet. */
    .top-notification.second-notification .row > div:first-child a { justify-content: center; }
    .top-notification a { font-size: 1rem; }
    .top-notification .cursor img { width: 20px; margin-top: -6px; }
    .top-notification .afterpay img { width: 95px; }

    .top-header { padding: 10px 0 5px; }
    .top-header .col-lg-4:first-child { display: flex; justify-content: center; align-items: center; font-size: 32px; }
    .top-header .col-lg-4:nth-child(2) { padding-top: 15px; }
    .top-header .navbar-toggler { margin-right: auto; font-size: 32px; padding: 0; color: #333333; }
    .top-header .navbar-toggler .navbar-toggler-icon { width: auto; height: auto; }
    .top-header ul { display: flex; list-style: none; margin-left: auto; padding: 0; margin-bottom: 0; }
    .top-header ul li:first-child { padding-right: 10px; }

    .navbar-brand { width: 200px; margin-right: 0; margin-left: 30px; }
    .navbar-brand > img { max-width: 100%; }
    .custom-logo-link img,
    .custom-logo { max-width: 200px; }
    .mycart a { background-image: none; }
    .top-search .text { padding-bottom: 0; }

    #navbarNavDropdown { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
    .collapse:not(.show) { display: none !important; }
    #navbarNavDropdown.show { display: block !important; }

    #main-menu { display: block; }
    .menu-primary-menu-container { width: 100%; }
    #main-menu li .nav-link,
    #main-menu .all-brand .nav-link,
    #main-menu .best-deals .nav-link { text-align: left; padding: 15px 15px 15px 60px; background-position: 15px center; background-size: 32px; }
    #main-menu > li { border-left: none; border-bottom: 1px solid #404040; }
    #main-menu li:last-child,
    #main-menu li:nth-child(2) .nav-link,
    #main-menu li:nth-child(3) .nav-link { background-size: 28px; }
    #main-menu li:nth-child(5) .nav-link { background-size: 22px; background-position: 20px center; }
    #main-menu li:last-child .nav-link,
    #main-menu li:nth-last-child(2) .nav-link,
    #main-menu li:nth-child(6) .nav-link { background-size: 28px; background-position: 20px center; }

    #navbarNavDropdown .mobile a { color: #fff; display: block; padding: 15px 15px 15px 60px; background-repeat: no-repeat; background-position: 20px center; }
    #navbarNavDropdown .mobile li { border-bottom: 1px solid #404040; }
    #navbarNavDropdown .service a    { background-image: url(../../images/phone-mobile.png); }
    #navbarNavDropdown .gift-cards a { background-image: url(../../images/gift-card-mobile.png); }
    #navbarNavDropdown .register a   { background-image: url(../../images/register-icon.png); }
    #navbarNavDropdown .Login a      { background-image: url(../../images/user-icon.png); }

    #main-menu .dropdown-menu { position: static !important; box-shadow: none; }
    #main-menu .dropdown-menu.show { display: block !important; }
    #main-menu .dropdown-item { padding-left: 25px; text-align: left; }

    .navbar-toggler.mobile.active { padding-right: 2px; }
    .navbar-toggler.mobile .fa-bars:before { content: "\f0c9"; }
    .navbar-toggler.mobile.active .fa-bars:before { content: "\f00d"; }

    /* Megamenu mobile */
    .vb-megamenu-wrap:before { content: none; }
    .vb-megamenu ul.dropdown-menu.vb-megamenu-links { max-width: 100% !important; }
    .vb-megamenu > ul > li.nav-has-image a.mbrand-overlay { display: none; }
    .vb-megamenu > ul > li.shop-all { display: block; }
    .vb-megamenu-wrap { top: auto !important; opacity: 1 !important; visibility: visible !important; position: relative !important; background: transparent; box-shadow: none; height: 0; overflow: hidden; }
    .vb-megamenu-wrap.vb-megamenu-open { height: auto; }
    .vb-megamenu.container { max-width: 100%; background: #eeeeee; padding: 0 !important; }
    .vb-megamenu-close,
    .vb-megamenu > ul > li img,
    .vb-megamenu-overlay { display: none; }
    .vb-megamenu > ul > li { width: 100%; margin: 0; display: block; max-width: 100% !important; }
    .vb-megamenu > ul > li a.mbrand-name { color: #333; text-align: left; font-weight: normal; margin: 0; padding: 15px 15px 15px 25px; border-bottom: 1px solid #cacaca; }
    .vb-megamenu-footer a { margin-right: 0 !important; width: 100%; margin-bottom: 10px; }
    .vb-megamenu-footer { margin-top: 0; max-width: 100%; display: block; }

    /* Mobile megamenu show/expand */
    #main-menu > li.show .vb-megamenu-wrap { margin: 0; height: auto; left: auto; max-width: 100%; box-shadow: none; }
    #main-menu > li .vb-megamenu-wrap { box-shadow: none !important; }

    /* Mobile megamenu footer buttons */
    .vb-megamenu-footer a { background-color: #eeeeee; color: #333; margin-bottom: 0; text-align: left; padding: 15px 15px 15px 25px; position: relative; }
    .vb-megamenu-footer a:last-child { background-color: #3dbc9f; color: #fff; border-bottom: 0; }

    /* Mobile nav link hover */
    #navbarNavDropdown ul.mobile li a { text-decoration: none !important; }
    #navbarNavDropdown ul.mobile li a:hover { background-color: #3d3d3d; }

    /* Dropdown expand arrow.
       NOTE: All Brands is excluded — on mobile it's a plain link to /brands
       (no dropdown), and the expandable categories use the .vb-nav-caret span
       instead. Leaving .all-brand here produced a duplicate caret. */
    .navbar-nav > li.menu-item-has-children > a { position: relative; }

    .navbar-nav > li.menu-item-has-children > a:after {
        content: "" !important;
        position: absolute;
        display: inline-block;
        border-right: 1px solid #eeeeee;
        border-bottom: 1px solid #eeeeee;
        width: 8px;
        height: 8px;
        right: 24px;
        top: 18px;
        left: auto;
        border-top: none;
        border-left: none;
        margin: 0;
    }
    .navbar-nav > li.menu-item-has-children.show > a:after {
        transform: rotate(45deg) !important;
        top: 21px;
    }
}

@media screen and (max-width: 860px) {
    #navbarNavDropdown { max-height: 84vh; }
    .mycart a:hover { background-image: none; }
}
@media screen and (max-width: 780px) { #navbarNavDropdown { max-height: 81vh; } }
@media screen and (max-width: 767px) {
    .top-header { padding-bottom: 6px; padding-top: 10px; }
}

@media screen and (max-width: 576px) {
    .top-notification .col-6:first-child { padding-right: 0; }
    .top-notification .col-6:last-child  { padding-left: 0; }
    .top-notification .cursor { margin-right: 5px; }
    .userbar li:first-child { padding-right: 10px; }
    .userbar li:last-child  { padding-left: 10px; }
    .userbar li:first-child:after { top: -3px; }
}

@media screen and (max-width: 430px) { #navbarNavDropdown { max-height: 79vh; } }
@media screen and (max-width: 390px) { #navbarNavDropdown { max-height: 77vh; } }
@media screen and (max-width: 375px) { #navbarNavDropdown { max-height: 71vh; } }
@media screen and (max-width: 360px) { #navbarNavDropdown { max-height: 74vh; } }

/* =============================================================
   NAVIGATION — Header & Navbar (VB 2026) — self-contained
   Covers:
     1. Top notification bar (dark, afterpay/subscribe)
     2. Top header (mint green: logo, search, user icons)
     3. Main navbar (black, category items)
     4. Secondary main menu (white, deals/brands)
     5. Megamenu dropdown behaviour
     6. Mobile nav fixes
   ============================================================= */

/* ---------- 1. Top notification (dark bar with afterpay/subscribe) ---------- */
.top-notification {
    padding: 10px 0;
    background-color: #1a1a1a;
}
.top-notification a {
    color: #fff;
    display: flex;
    align-items: center;
}
.top-notification a:hover {
    color: #f6f6f6;
    text-decoration: none;
}
.top-notification .cursor { margin-right: 15px; }
.top-notification .cursor img {
    max-height: 22px;
    position: relative;
    top: -2px;
}
.top-notification .desk span { vertical-align: middle; }
.top-notification .afterpay { margin-right: 5px; vertical-align: middle; }
.top-notification .afterpay a { display: inline-flex; vertical-align: middle; }
.top-notification .afterpay img { max-height: 16px; vertical-align: middle; }
.top-notification.second-notification { font-size: 12px; }
.top-notification.second-notification .top-notif-add-text.txt-yellow { color: #FEEB00; }

/* ---------- 2. Top header (logo + search + user icons row) ---------- */
.top-header {
    padding: 25px 0 30px;
    overflow: visible;
}
.top-header a:hover { color: #000; }
.navbar-brand > img { max-width: 200px; }

/* Shopping bar (top-right icon row: wishlist / contact / gifts / cart) */
.shopping-bar { list-style: none; }
.shopping-bar li { margin-right: 15px; }
.shopping-bar li:last-child { margin-right: 0; }
.shopping-bar a {
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 25px 25px;
    display: block;
    padding-top: 29px;
    width: 55px;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: normal;
    transition: opacity .15s ease;
}
.shopping-bar a:hover {
    text-decoration: none;
    opacity: 0.7;
}

/* Mobile/tablet shopping bar (shown next to logo on small screens) */
.mobile-shopping-bar {
    list-style: none;
    display: flex;
    gap: 10px;
    padding: 0;
    margin: 0;
}
.mobile-shopping-bar li { position: relative; }
.mobile-shopping-bar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: opacity .15s ease;
    width: auto !important;
    background-image: none !important;
    padding-top: 0 !important;
}
.mobile-shopping-bar a:hover { opacity: 0.7; }
.mobile-shopping-bar img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
}
.mobile-shopping-bar .cart-count {
    position: absolute;
    top: -7px;
    right: -7px;
    background: #C8102E;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    line-height: 1;
    text-align: center;
    border-radius: 50%;
    padding: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
}

/* Top search */
.top-search .text {
    padding: 8px 0 4px 0 !important;
    font-size: 1rem;
    line-height: 20px;
}
.top-search .aws-container {
    position: relative;
    z-index: 1050;
}
.top-search .aws-container .aws-search-form {
    background-color: #b8e4cc;
    flex-direction: row-reverse;
}
.top-search .aws-search-field {
    border: 1px solid #aaaaaa;
    text-indent: 15px;
    padding: 10px 10px 10px 0 !important;
    font-size: 1rem;
    border-radius: 4px 0 0 4px !important;
    background-color: #fff;
}
.top-search .aws-search-field::-moz-placeholder { color: #333333; opacity: 0.5; }
.top-search .aws-search-field::placeholder        { color: #333333; opacity: 0.5; }
.top-search .aws-container .aws-search-form .aws-form-btn {
    border-top: 1px solid #aaaaaa;
    border-right: 1px solid #aaaaaa;
    border-bottom: 1px solid #aaaaaa;
    border-radius: 0 6px 6px 0 !important;
}
.top-search .aws-container .aws-search-form .aws-search-btn_icon { height: 30px; }
.top-search .aws-search-result { z-index: 1050 !important; }
.top-search .dgwt-wcas-search-form { max-height: 44px; }
.top-search .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
    max-height: 44px;
    border-radius: 0.375rem;
}
.top-search .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp {
    background: unset;
    border-radius: unset;
}
.top-search .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit { top: 14px; }

/* ---------- 3. Main navbar (black, category items) ---------- */
#wrapper-navbar {
    position: relative;
    z-index: 101;
}
#wrapper-navbar .navbar.navbar-dark {
    padding: 0;
    background-color: #1a1a1a !important;
}

#wrapper-navbar .container {
    padding: 0 !important;
    max-width: unset !important;
}

#wrapper-navbar .nav-bar-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.menu-main-menu-container,
#navbarNavDropdown > div { width: 100%; }

/* Let the main nav span the full width from 960px up — unset Bootstrap's
   container max-width. Scoped to the direct menu container (not the nested
   .vb-megamenu-wrap.container elements). */
@media (max-width: 960px) {
    #wrapper-navbar .container {
        max-width: none !important;
    }
}

#wrapper-navbar #main-menu {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    list-style: none;
}
#wrapper-navbar #main-menu > li {
    border-left: 1px solid rgba(255, 255, 255, 0.30);
    flex-basis: 0;
    flex-grow: 1;
    text-align: center;
}
#wrapper-navbar #main-menu > li:first-child { border-left: none; }

/* Nav link */
#wrapper-navbar #main-menu > li > .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 12px !important;
    height: 100%;
    position: relative;
    text-align: center;
    color: #fff;
    font-family: sans-serif, 'Montserrat';
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    background-color: transparent;
    background-repeat: no-repeat;
    transition: color .15s ease, background-color .15s ease;
}

/* Mobile-only expand caret — hidden on desktop, shown inside the ≤991px block. */
.vb-nav-caret { display: none; }

/* Hover underline indicator */
#wrapper-navbar #main-menu > li > .nav-link::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background-color: transparent;
    transition: background-color .15s ease;
}

/* Hover / active state */
#wrapper-navbar #main-menu > li:hover > .nav-link,
#wrapper-navbar #main-menu > li.menu-active > .nav-link {
    background-color: #1a1a1a;
    color: #fff;
}
#wrapper-navbar #main-menu > li:hover > .nav-link::before,
#wrapper-navbar #main-menu > li.menu-active > .nav-link::before { background-color: #C8102E; }

/* Items with an uploaded Menu Image (icon via ::after with order:-1) */
#wrapper-navbar #main-menu > li.nav-has-image > .nav-link {
    background-image: none !important;
    justify-content: center;
    text-align: center;
    color: #FFF;
    text-align: center;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 17.5px; /* 125% */
    letter-spacing: -0.15px;
}
#wrapper-navbar #main-menu > li.nav-has-image > .nav-link::after {
    content: '' !important;
    display: inline-block !important;
    width: 22px !important;
    height: 22px !important;
    background-image: var(--menu-icon) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    order: -1 !important;
    flex-shrink: 0 !important;
    border: none !important;
}

/* Promo items: Best Deals (red) + All Brands (yellow) */
#wrapper-navbar #main-menu > li.best-deals > .nav-link,
#wrapper-navbar #main-menu > li.all-brand > .nav-link {
    background-position: 12px center !important;
    background-size: 22px 22px;
    padding-left: 42px !important;
    padding-right: 12px !important;
    justify-content: flex-start;
    text-align: left;
}
#wrapper-navbar #main-menu > li.best-deals > .nav-link {
    background-color: #C8102E !important;
    background-image: url(../../images/discount.png);
}
#wrapper-navbar #main-menu > li.best-deals:hover > .nav-link { background-color: #e42e34 !important; }
#wrapper-navbar #main-menu > li.best-deals > .nav-link::before { background-color: #C8102E; }
#wrapper-navbar #main-menu > li.all-brand > .nav-link {
    background-color: #faeb37 !important;
    background-image: url(../../images/brand-tag.png);
    color: #333;
}
#wrapper-navbar #main-menu > li.all-brand:hover > .nav-link { background-color: #fcf05a !important; }
#wrapper-navbar #main-menu > li.all-brand > .nav-link::before { background-color: #faeb37; }

/* Dropdown / submenu reset */
#wrapper-navbar #main-menu .dropdown-menu {
    background: #eeeeee;
    margin-top: -1px;
    border-radius: 0;
    border: none;
    padding: 0;
}
#wrapper-navbar #main-menu .dropdown-item {
    border-bottom: 1px solid #cacaca;
    padding: 15px 20px;
    line-height: normal;
}

/* Megamenu wrapper — sized to its content, anchored to the left of each li.
   JS flips it to right-anchored if it would overflow the viewport edge. */
#wrapper-navbar .vb-megamenu-wrap {
    position: absolute !important;
    top: 100% !important;
    left: 0;
    right: auto;
    transform: none !important;
    margin-left: 0 !important;
    width: max-content;
    max-width: calc(100vw - 80px);
    background: #fff;
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.25);
    z-index: 9999;
    /* Closed panel must not capture hover. The wrap hides with opacity:0 +
       visibility:hidden, but opacity:0 stays hit-testable and a visible
       descendant (the featured <img> once JS sets its src) overrides the
       hidden ancestor — leaving an invisible hover-trap over the hero that
       re-triggers li:hover. pointer-events inherits, so this neutralises it. */
    pointer-events: none;
}
#wrapper-navbar #main-menu > li.vb-megamenu {
    position: relative; 
    height: 45px;
}
/* Inner container sizes to its own content (NOT 100% of the wrap) so the
   wrap's max-content width resolves to the real content width — this is what
   lets the JS measure the dropdown accurately and reposition it. */
#wrapper-navbar .vb-megamenu.container {
    width: auto !important;
    max-width: 100% !important;
    margin: 0;
    padding: 30px 40px;
    background: #fff;
    position: relative;
}

/* ---------- Megamenu dropdown — 3-level structure ---------- */

/* Hide duplicate overlay anchors + inline item images */
#wrapper-navbar .vb-megamenu a.mbrand-overlay,
#wrapper-navbar .vb-megamenu .vb-megamenu-content img { display: none !important; }

/* Override Bootstrap dropdown-item hover background */
#wrapper-navbar .vb-megamenu .dropdown-item,
#wrapper-navbar .vb-megamenu a.dropdown-item,
#wrapper-navbar .vb-megamenu li a {
    background: transparent !important;
    background-color: transparent !important;
}
#wrapper-navbar .vb-megamenu .dropdown-item:hover,
#wrapper-navbar .vb-megamenu .dropdown-item:focus,
#wrapper-navbar .vb-megamenu a.dropdown-item:hover,
#wrapper-navbar .vb-megamenu a.dropdown-item:focus,
#wrapper-navbar .vb-megamenu li a:hover {
    background: transparent !important;
    background-color: transparent !important;
}

/* Flex layout: content left, image area right */
#wrapper-navbar .vb-megamenu.container {
    display: flex !important;
    align-items: flex-start;
    gap: 50px;
    padding: 30px 40px !important;
}
/* Content fills the full-width wrap; image area sits at the right.
   margin-right guarantees breathing room before the image even when the
   columns spread out via justify-content. */
#wrapper-navbar .vb-megamenu-content { flex: 1; min-width: 0; }

/* Image placeholder — fixed 280px, vertically centred against the columns */
#wrapper-navbar .vb-megamenu-image-area {
    flex: 0 0 280px;
    width: 280px;
    height: 280px;
    align-self: center;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
}
#wrapper-navbar .vb-megamenu-image-area .vb-megamenu-featured-image {
    display: block !important;
    max-width: 100%;
    max-height: 280px;
    width: 100%;
    height: 280px;
    object-fit: contain;
    transition: opacity .15s ease;
}
#wrapper-navbar .vb-megamenu-image-area .vb-megamenu-featured-image:not([src]),
#wrapper-navbar .vb-megamenu-image-area .vb-megamenu-featured-image[src=""] {
    opacity: 0;
}

/* Column layout */
#wrapper-navbar .vb-megamenu-content > ul.dropdown-menu > li > ul.dropdown-menu {
    display: flex !important;
    gap: 30px 100px;
    align-items: flex-start;
    justify-content: flex-start;
}
#wrapper-navbar .vb-megamenu-content > ul.dropdown-menu > li > ul.dropdown-menu > li {
    /* flex: 0 0 200px; */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Reset all dropdown-menu uls inside megamenu */
#wrapper-navbar .vb-megamenu .dropdown-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: block !important;
    position: static !important;
    width: 100% !important;
    text-align: left !important;
}
#wrapper-navbar .vb-megamenu .dropdown-menu li { text-align: left !important; list-style: none !important; }

/* Level 1: "Shop All …" heading */
#wrapper-navbar .vb-megamenu-content > ul.dropdown-menu > li,
#wrapper-navbar .vb-megamenu > ul.dropdown-menu > li {
    display: block;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}
#wrapper-navbar .vb-megamenu-content > ul.dropdown-menu > li > a:not(.mbrand-overlay),
#wrapper-navbar .vb-megamenu-content > ul.dropdown-menu > li > a.mbrand-name,
#wrapper-navbar .vb-megamenu-content > ul.dropdown-menu > li > span,
#wrapper-navbar .vb-megamenu > ul.dropdown-menu > li > a:not(.mbrand-overlay),
#wrapper-navbar .vb-megamenu > ul.dropdown-menu > li > a.mbrand-name,
#wrapper-navbar .vb-megamenu > ul.dropdown-menu > li > span {
    display: block !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #c8102e !important;
    text-decoration: none !important;
    text-align: left !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}
#wrapper-navbar .vb-megamenu-content > ul.dropdown-menu > li > a:hover,
#wrapper-navbar .vb-megamenu > ul.dropdown-menu > li > a:hover {
    color: #C8102E !important;
    text-decoration: underline !important;
    background: none !important;
}

/* Level 2: column headers */
#wrapper-navbar .vb-megamenu-content > ul.dropdown-menu > li > ul.dropdown-menu,
#wrapper-navbar .vb-megamenu > ul.dropdown-menu > li > ul.dropdown-menu {
    display: flex !important;
    gap: 30px 60px;
    align-items: flex-start;
    justify-content: flex-start;
}
#wrapper-navbar .vb-megamenu-content > ul.dropdown-menu > li > ul.dropdown-menu > li,
#wrapper-navbar .vb-megamenu > ul.dropdown-menu > li > ul.dropdown-menu > li {
    /* Equal-width columns: all share the available content area evenly so a
       column with longer items no longer ends up wider than its neighbours.
       (Replaces `max-width: fit-content`, which sized each column to its own
       content and produced the uneven widths.) */
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}
#wrapper-navbar .vb-megamenu .parent-menu-item > a,
#wrapper-navbar .vb-megamenu .parent-menu-item > span,
#wrapper-navbar .vb-megamenu .parent-menu-item > a.mbrand-name {
    display: block !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111 !important;
    text-decoration: none !important;
    text-align: left !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    cursor: default !important;
    background: none !important;
    border: none !important;
}

/* Level 3: items inside each column */
#wrapper-navbar .vb-megamenu > ul.dropdown-menu ul.dropdown-menu ul.dropdown-menu { display: block !important; }
#wrapper-navbar .vb-megamenu-content ul.dropdown-menu ul.dropdown-menu ul.dropdown-menu > li,
#wrapper-navbar .vb-megamenu > ul.dropdown-menu ul.dropdown-menu ul.dropdown-menu > li {
    display: block;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    width: auto !important;
    flex: none !important;
    min-width: 0;
    border: none !important;
}
#wrapper-navbar .vb-megamenu-content ul.dropdown-menu ul.dropdown-menu ul.dropdown-menu > li:last-child,
#wrapper-navbar .vb-megamenu > ul.dropdown-menu ul.dropdown-menu ul.dropdown-menu > li:last-child { margin-bottom: 0 !important; }
#wrapper-navbar .vb-megamenu-content ul.dropdown-menu ul.dropdown-menu ul.dropdown-menu > li > a:not(.mbrand-overlay),
#wrapper-navbar .vb-megamenu-content ul.dropdown-menu ul.dropdown-menu ul.dropdown-menu > li > a.mbrand-name,
#wrapper-navbar .vb-megamenu > ul.dropdown-menu ul.dropdown-menu ul.dropdown-menu > li > a:not(.mbrand-overlay),
#wrapper-navbar .vb-megamenu > ul.dropdown-menu ul.dropdown-menu ul.dropdown-menu > li > a.mbrand-name {
    display: block !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #333 !important;
    text-decoration: none !important;
    text-align: left !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    /* Animate with transform (painted, no reflow) instead of padding-left so
       the hovered item shifting right doesn't widen its fit-content column and
       push the neighbouring columns. */
    transition: color .15s ease, transform .15s ease !important;
    background: none !important;
    border: none !important;
}
#wrapper-navbar .vb-megamenu-content ul.dropdown-menu ul.dropdown-menu ul.dropdown-menu > li:hover > a:not(.mbrand-overlay),
#wrapper-navbar .vb-megamenu-content ul.dropdown-menu ul.dropdown-menu ul.dropdown-menu > li:hover > a.mbrand-name,
#wrapper-navbar .vb-megamenu > ul.dropdown-menu ul.dropdown-menu ul.dropdown-menu > li:hover > a:not(.mbrand-overlay),
#wrapper-navbar .vb-megamenu > ul.dropdown-menu ul.dropdown-menu ul.dropdown-menu > li:hover > a.mbrand-name {
    color: #c8102e !important;
    transform: translateX(4px) !important;
}

/* Megamenu hover trigger */
#wrapper-navbar #main-menu > li:hover .vb-megamenu-wrap,
#wrapper-navbar #main-menu > li.show .vb-megamenu-wrap {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* re-enable interaction only while open */
    box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.25), 0 9999px 0px 9999px rgba(0, 0, 0, .5);
    transition: opacity .3s ease, visibility .3s ease;
    transition-delay: 0.3s;
}

#wrapper-navbar .navbar-expand-lg .navbar-collapse {
    height: 45px;
}

/* ---------- 4. Secondary Main Menu (white bar with deals/brands) ---------- */
#wrapper-secondary-nav {
    position: relative;
    z-index: 100;
    border-bottom: 1px solid #000;
}

#wrapper-secondary-nav .container {
    max-width: 1400px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#wrapper-secondary-nav #secondary-main-menu {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    height: 32px;
}
#wrapper-secondary-nav #secondary-main-menu > li {
    flex-basis: 0;
    flex-grow: 1;
    text-align: center;
    border-right: 1px solid #e5e5e5;
    font-size: 13px;
    font-family: 'Montserrat', sans-serif;
    position: static;
}
#wrapper-secondary-nav #secondary-main-menu > li:last-child { border-right: none; }
#wrapper-secondary-nav #secondary-main-menu > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 12px;
    height: 100%;
    line-height: 1.2;
    color: inherit;
    text-decoration: none;
    background-image: none !important;
    transition: color .15s ease, background-color .15s ease, opacity .15s ease;
    font-size: 14px;
    color: #1A1A1A;
    font-family: Inter;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
}
#wrapper-secondary-nav #secondary-main-menu > li:hover > a { color: #c8102e; }
#wrapper-secondary-nav #secondary-main-menu > li.nav-has-image > a::after {
    content: '';
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: var(--menu-icon);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    order: -1;
    flex-shrink: 0;
}
#wrapper-secondary-nav #secondary-main-menu > li.best-deals { background-color: rgb(200, 16, 46); }
#wrapper-secondary-nav #secondary-main-menu > li.best-deals > a { font-weight: bold; color: #fff; }
#wrapper-secondary-nav #secondary-main-menu > li.best-deals:hover > a { color: #fff; opacity: 0.8; }
#wrapper-secondary-nav #secondary-main-menu > li.all-brand { background-color: rgb(254, 235, 0); }
#wrapper-secondary-nav #secondary-main-menu > li.all-brand > a { font-weight: bold; color: #000; }
#wrapper-secondary-nav #secondary-main-menu > li.all-brand:hover > a { color: #000; opacity: 0.8; }

/* Megamenu support in secondary nav */
#wrapper-secondary-nav #secondary-main-menu > li .vb-megamenu-wrap {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%);
    margin-left: 0 !important;
    width: 100%;
    max-width: 1320px;
    background: #fff;
    z-index: 9999;
    pointer-events: none; /* closed panel must not capture hover — see main-menu note */
}
#wrapper-secondary-nav #secondary-main-menu > li:hover .vb-megamenu-wrap {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.25), 0 9999px 0px 9999px rgba(0, 0, 0, .5);
    transition: opacity .3s ease, visibility .3s ease;
    transition-delay: 0.3s;
}

/* All Brands opens on hover (the rule above) AND on click via the .show class
   the click handler sets — so it works either way on desktop. */
#wrapper-secondary-nav #secondary-main-menu > li.all-brand.show .vb-megamenu-wrap {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.25), 0 9999px 0px 9999px rgba(0, 0, 0, .5);
    transition: opacity .3s ease, visibility .3s ease;
}

/* The All Brands caret is mobile/tablet-only (shown by the #main-menu mobile
   caret rule once it moves into the hamburger). On desktop it stays hidden via
   the base `.vb-nav-caret { display: none }` rule. */

/* Third-level (L3) entries in the secondary menu. The depth cap was raised from
   2 to 3 in header.php; L3 items are a manual admin/content task (add them under
   the WP menu to appear). Render any nested third-level list as an indented,
   always-visible block inside the open flyout rather than a hidden dropdown. */
#wrapper-secondary-nav #secondary-main-menu .dropdown-menu .dropdown-menu {
    display: block !important;
    position: static !important;
    box-shadow: none;
    padding-left: 16px;
    margin: 0;
    background: transparent;
}
#wrapper-secondary-nav #secondary-main-menu .dropdown-menu .dropdown-menu > li > a {
    font-size: 0.9em;
    opacity: 0.9;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */

@media (max-width: 1650px) {
    #wrapper-navbar #main-menu > li.vb-megamenu,
    #wrapper-navbar .navbar-expand-lg .navbar-collapse {
        height: 55px;
    }
}

@media (max-width: 1600px) {
    #wrapper-secondary-nav .container {
        max-width: 1150px !important;
    }
}

@media (max-width: 1320px) {
    #wrapper-secondary-nav .container {
        max-width: 1000px !important;
    }
}

@media (max-width: 1140px) {
    #wrapper-secondary-nav .container {
        max-width: 890px !important;
    }
}

/* Mid-size desktops (992px–1500px) — smaller image to fit narrower viewport */
@media screen and (min-width: 992px) and (max-width: 1500px) {
    #wrapper-navbar .vb-megamenu-image-area {
        flex: 0 0 240px !important;
        width: 240px !important;
        height: 240px !important;
    }
    #wrapper-navbar .vb-megamenu-image-area .vb-megamenu-featured-image {
        height: 240px !important;
    }
}

@media (max-width: 1600px) {
    #wrapper-navbar .vb-megamenu.container {
        gap: 40px;
    }

    #wrapper-navbar .vb-megamenu-content > ul.dropdown-menu > li > ul.dropdown-menu,
    #wrapper-navbar .vb-megamenu > ul.dropdown-menu > li > ul.dropdown-menu {
        gap: 30px 20px;
        justify-content: flex-start !important;
    }
}

@media (max-width: 1320px) {
    #wrapper-navbar .vb-megamenu-content > ul.dropdown-menu > li > ul.dropdown-menu,
    #wrapper-navbar .vb-megamenu > ul.dropdown-menu > li > ul.dropdown-menu {
        gap: 30px 10px;
    }
}

@media (max-width: 1070px) {
    #wrapper-navbar .vb-megamenu-image-area {
        width: 200px !important;
        height: 200px !important;
    }

    #wrapper-navbar .vb-megamenu.container {
        padding: 30px 15px !important;
    }
}

/* 992px–1140px: span the full navbar width (avoids overflow on smaller
   desktops/laptops). JS skips inline positioning at <=1140px so CSS wins. */
@media screen and (min-width: 992px) and (max-width: 1140px) {
    #wrapper-navbar #main-menu > li.vb-megamenu { position: static; }
    #wrapper-navbar .vb-megamenu-wrap {
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
    }
}

/* Below 992px — image area handled by tablet/mobile block */

/* Tablet/mobile — hide secondary nav, adjust top-header padding */
@media screen and (max-width: 991px) {
    #wrapper-secondary-nav { display: none; }
    .top-header {
        padding: 25px 30px 30px !important;
        overflow: visible;
    }
    .top-notification a { font-size: 12px !important; }

    /* Fill the expanded navbar collapse area so no page content bleeds through */
    #navbarNavDropdown { background-color: #1a1a1a; }

    /* Stack nav items vertically — overrides desktop flex row */
    #wrapper-navbar #main-menu {
        display: block !important;
    }
    #wrapper-navbar #main-menu > li {
        flex-basis: auto !important;
        flex-grow: 0 !important;
        text-align: left !important;
        border-left: none !important;
        border-bottom: 1px solid #404040;
    }

    /* Mobile nav: left-align links, icon via ::after */
    #wrapper-navbar #main-menu > li > a.nav-link {
        justify-content: flex-start !important;
        text-align: left !important;
        padding: 15px !important;
        gap: 15px !important;
    }
    #wrapper-navbar #main-menu > li.nav-has-image > a.nav-link { background-image: none !important; }
    #wrapper-navbar #main-menu > li.nav-has-image > a.nav-link::after {
        display: inline-block !important;
        content: '' !important;
        order: -1 !important;
        width: 28px !important;
        height: 28px !important;
        background-image: var(--menu-icon) !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        flex-shrink: 0 !important;
        position: static !important;
        border: none !important;
        margin: 0 !important;
    }
    /* Hide Bootstrap dropdown caret on non-image items */
    #wrapper-navbar #main-menu > li:not(.nav-has-image) > a.nav-link.dropdown-toggle::after {
        display: none !important;
        content: none !important;
    }
    /* Remove left border (shows as vertical line on mobile) */
    #wrapper-navbar #main-menu > li { border-left: none !important; }
    /* Fallback via attribute selector */
    #wrapper-navbar #main-menu > li > a.nav-link[style*="--menu-icon"] {
        background-image: none !important;
        justify-content: flex-start !important;
        text-align: left !important;
        padding: 15px !important;
        gap: 15px !important;
    }
    #wrapper-navbar #main-menu > li > a.nav-link[style*="--menu-icon"]::after {
        display: inline-block !important;
        content: '' !important;
        order: -1 !important;
        width: 28px !important;
        height: 28px !important;
        background-image: var(--menu-icon) !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        flex-shrink: 0 !important;
        position: static !important;
        border: none !important;
        margin: 0 !important;
    }

    /* Mobile megamenu: inline/relative, collapsed by default, animated open on .show.
       We can't transition height:0 → height:auto, so the panel is laid out as a
       single-row CSS grid and we animate the row track from 0fr → 1fr. This gives
       a smooth expand/collapse for any content height (incl. the long All-Brands
       list) with no fixed max-height to clip it. */
    #wrapper-navbar .vb-megamenu-wrap {
        position: relative !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        height: auto !important;
        overflow: hidden !important;
        opacity: 1 !important;
        visibility: visible !important;
        box-shadow: none !important;
        /* Mobile panels are toggled inline via .show, not hover —
           keep them interactive regardless of the desktop pointer-events rule. */
        pointer-events: auto !important;
        display: grid !important;
        /* minmax(0, …) removes the fr track's auto (min-content) minimum, so the
           closed panel collapses fully to 0 instead of leaving a content sliver. */
        grid-template-rows: minmax(0, 0fr);
        transition: grid-template-rows .35s ease;
    }
    /* The grid item must be allowed to shrink below its content size so the
       0fr track clips it cleanly. */
    #wrapper-navbar .vb-megamenu-wrap > .vb-megamenu.container {
        min-height: 0;
        overflow: hidden;
        padding-left: 15px !important;
    }
    #wrapper-navbar #main-menu > li.show > .vb-megamenu-wrap {
        grid-template-rows: minmax(0, 1fr);
    }

    /* Expand caret for category + All Brands items (Figma: tap to reveal
       sub-categories). Hidden on desktop via the base rule below. */
    #wrapper-navbar #main-menu > li > a.nav-link .vb-nav-caret {
        display: block;
        position: absolute;
        right: 20px;
        top: 50%;
        width: 9px;
        height: 9px;
        margin-top: -7px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform .3s ease;
        opacity: .85;
        pointer-events: none;
    }
    #wrapper-navbar #main-menu > li.show > a.nav-link .vb-nav-caret {
        transform: rotate(-135deg);
        margin-top: -2px;
    }

    /* Best Deals (red) + All Brands (yellow) relocated into the mobile list.
       Full-width rows, no background icon (Figma), left-aligned like the rest. */
    #wrapper-navbar #main-menu > li.best-deals > a.nav-link,
    #wrapper-navbar #main-menu > li.all-brand > a.nav-link {
        background-image: none !important;
        padding: 15px !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }

    #wrapper-navbar #main-menu > li.best-deals > a.nav-link {
        color: #FFF;
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px; /* 142.857% */
        letter-spacing: -0.15px;
    }

    #wrapper-navbar #main-menu > li.all-brand > a.nav-link {
        color: #000;
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px; /* 142.857% */
        letter-spacing: -0.15px;
    }

    /* ---------------------------------------------------------------
       Sub-category reveal — as the panel slides open, its contents
       slide up + fade in with a staggered (cascading) delay. Applies
       to the "Shop All" heading + each category column, and to the
       All Brands group rows.
       --------------------------------------------------------------- */
    #wrapper-navbar #main-menu .vb-megamenu-content > ul.dropdown-menu > li > a,
    #wrapper-navbar #main-menu .vb-megamenu-content > ul.dropdown-menu > li > ul.dropdown-menu > li {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity .45s ease, transform .45s ease;
    }
    #wrapper-navbar #main-menu > li.show .vb-megamenu-content > ul.dropdown-menu > li > a,
    #wrapper-navbar #main-menu > li.show .vb-megamenu-content > ul.dropdown-menu > li > ul.dropdown-menu > li {
        opacity: 1;
        transform: translateY(0);
    }
    /* Staggered entrance: heading first, then each column / brand group.
       Delays live only on the open (.show) state, so collapse stays snappy. */
    #wrapper-navbar #main-menu > li.show .vb-megamenu-content > ul.dropdown-menu > li > a { transition-delay: .05s; }
    #wrapper-navbar #main-menu > li.show .vb-megamenu-content > ul.dropdown-menu > li > ul.dropdown-menu > li:nth-child(1) { transition-delay: .12s; }
    #wrapper-navbar #main-menu > li.show .vb-megamenu-content > ul.dropdown-menu > li > ul.dropdown-menu > li:nth-child(2) { transition-delay: .19s; }
    #wrapper-navbar #main-menu > li.show .vb-megamenu-content > ul.dropdown-menu > li > ul.dropdown-menu > li:nth-child(3) { transition-delay: .26s; }
    #wrapper-navbar #main-menu > li.show .vb-megamenu-content > ul.dropdown-menu > li > ul.dropdown-menu > li:nth-child(4) { transition-delay: .33s; }
    #wrapper-navbar #main-menu > li.show .vb-megamenu-content > ul.dropdown-menu > li > ul.dropdown-menu > li:nth-child(5) { transition-delay: .40s; }
    #wrapper-navbar #main-menu > li.show .vb-megamenu-content > ul.dropdown-menu > li > ul.dropdown-menu > li:nth-child(n+6) { transition-delay: .47s; }

    /* Suppress the desktop hover trigger on mobile */
    #wrapper-navbar #main-menu > li:hover .vb-megamenu-wrap {
        box-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    /* Hide image placeholder on tablet/mobile */
    #wrapper-navbar .vb-megamenu-image-area { display: none !important; }

    #wrapper-navbar .vb-megamenu .dropdown-menu {
        flex-direction: column;
    }

    #wrapper-navbar .vb-megamenu-content ul.dropdown-menu ul.dropdown-menu ul.dropdown-menu > li > a:not(.mbrand-overlay),
    #wrapper-navbar .vb-megamenu-content ul.dropdown-menu ul.dropdown-menu ul.dropdown-menu > li > a.mbrand-name {
        padding-left: 15px !important;
    }

    #wrapper-navbar .vb-megamenu-content ul.dropdown-menu ul.dropdown-menu ul.dropdown-menu > li:hover > a:not(.mbrand-overlay),
    #wrapper-navbar .vb-megamenu-content ul.dropdown-menu ul.dropdown-menu ul.dropdown-menu > li:hover > a.mbrand-name,
    #wrapper-navbar .vb-megamenu > ul.dropdown-menu ul.dropdown-menu ul.dropdown-menu > li:hover > a:not(.mbrand-overlay),
    #wrapper-navbar .vb-megamenu > ul.dropdown-menu ul.dropdown-menu ul.dropdown-menu > li:hover > a.mbrand-name {
        padding-left: 30px !important;
    }

    #wrapper-navbar .vb-megamenu-content > ul.dropdown-menu > li > ul.dropdown-menu > li,
    #wrapper-navbar .vb-megamenu > ul.dropdown-menu > li > ul.dropdown-menu > li {
        max-height: fit-content !important;
    }

    #wrapper-navbar .navbar-expand-lg .navbar-collapse {
        height: 100vh !important;
    }
}

@media screen and (max-width: 767px) {
    #wrapper-navbar .vb-megamenu.container {
        padding-left: 5px !important;
    }

    #wrapper-navbar .vb-megamenu-content > ul.dropdown-menu > li > ul.dropdown-menu,
    #wrapper-navbar .vb-megamenu > ul.dropdown-menu > li > ul.dropdown-menu {
        padding-left: 10px !important;
    }
    #wrapper-navbar .vb-megamenu-content > ul.dropdown-menu > li > ul.dropdown-menu,
    #wrapper-navbar .vb-megamenu > ul.dropdown-menu > li > ul.dropdown-menu {
        gap: 10px !important;
    }

    #wrapper-navbar .vb-megamenu-content > ul.dropdown-menu > li > ul.dropdown-menu > li,
    #wrapper-navbar .vb-megamenu > ul.dropdown-menu > li > ul.dropdown-menu > li {
        max-height: fit-content !important;
    }
}

/* Small mobile (< 425px) — megamenu stacks vertically */
@media screen and (max-width: 424px) {
    #wrapper-navbar .vb-megamenu.container {
        flex-direction: column !important;
        padding: 10px !important;
    }
    #wrapper-navbar .vb-megamenu-image-area { display: none !important; }
    #wrapper-navbar .vb-megamenu-content > ul.dropdown-menu > li > ul.dropdown-menu {
        flex-direction: column !important;
        gap: 8px !important;
    }
    #wrapper-navbar .vb-megamenu-content > ul.dropdown-menu > li > ul.dropdown-menu > li {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        margin-bottom: 8px !important;
    }
    #wrapper-navbar .vb-megamenu-content > ul.dropdown-menu > li > a:not(.mbrand-overlay),
    #wrapper-navbar .vb-megamenu-content > ul.dropdown-menu > li > span,
    #wrapper-navbar .vb-megamenu > ul.dropdown-menu > li > a:not(.mbrand-overlay),
    #wrapper-navbar .vb-megamenu > ul.dropdown-menu > li > span {
        font-size: 14px !important;
        padding: 8px 0 !important;
        margin-bottom: 4px !important;
    }
    #wrapper-navbar .vb-megamenu-content ul.dropdown-menu ul.dropdown-menu > li > a:not(.mbrand-overlay),
    #wrapper-navbar .vb-megamenu-content ul.dropdown-menu ul.dropdown-menu > li > span,
    #wrapper-navbar .vb-megamenu > ul.dropdown-menu ul.dropdown-menu > li > a:not(.mbrand-overlay),
    #wrapper-navbar .vb-megamenu > ul.dropdown-menu ul.dropdown-menu > li > span {
        font-size: 13px !important;
        padding: 4px 0 !important;
    }
    #wrapper-navbar .vb-megamenu-content ul.dropdown-menu ul.dropdown-menu ul.dropdown-menu > li > a:not(.mbrand-overlay),
    #wrapper-navbar .vb-megamenu > ul.dropdown-menu ul.dropdown-menu ul.dropdown-menu > li > a:not(.mbrand-overlay) {
        font-size: 12px !important;
        padding: 4px 8px !important;
        margin: 0 0 4px 0 !important;
    }

    #wrapper-navbar .vb-megamenu-content ul.dropdown-menu ul.dropdown-menu ul.dropdown-menu > li:hover > a:not(.mbrand-overlay),
    #wrapper-navbar .vb-megamenu-content ul.dropdown-menu ul.dropdown-menu ul.dropdown-menu > li:hover > a.mbrand-name,
    #wrapper-navbar .vb-megamenu > ul.dropdown-menu ul.dropdown-menu ul.dropdown-menu > li:hover > a:not(.mbrand-overlay),
    #wrapper-navbar .vb-megamenu > ul.dropdown-menu ul.dropdown-menu ul.dropdown-menu > li:hover > a.mbrand-name {
        padding-left: 15px !important;
    }
}

/* Mobile header — centered logo + scaled icons (≤ 820px) */
@media screen and (max-width: 820px) {
    #mobile-navbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
    }
    #mobile-navbar .custom-logo-link,
    #mobile-navbar .navbar-brand {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        max-width: calc(100% - 140px);
    }
    #mobile-navbar .custom-logo-link img,
    #mobile-navbar .navbar-brand > img {
        max-width: 160px;
        height: auto;
        display: block;
    }
    .mobile-shopping-bar img { width: 24px; height: 24px; }
    .mobile-shopping-bar { gap: 8px; }
    .mobile-shopping-bar .cart-count {
        width: 16px;
        height: 16px;
        font-size: 9px;
        top: -6px;
        right: -6px;
    }
}

/* Extra-small phones (≤ 480px) */
@media screen and (max-width: 480px) {
    #mobile-navbar .custom-logo-link img,
    #mobile-navbar .navbar-brand > img { max-width: 135px; }
    .mobile-shopping-bar img { width: 21px; height: 21px; }
    .mobile-shopping-bar { gap: 6px; }
    .mobile-shopping-bar .cart-count {
        width: 14px;
        height: 14px;
        font-size: 8px;
        top: -5px;
        right: -5px;
    }
}

@media (max-width: 400px) {
    .top-header {
        padding-left: 13px !important;
        padding-right: 13px !important;
    }
}

/* Respect users who prefer reduced motion — show the mobile sub-category
   contents immediately with no slide/fade/stagger. */
@media (prefers-reduced-motion: reduce) {
    #wrapper-navbar .vb-megamenu-wrap,
    #wrapper-navbar #main-menu .vb-megamenu-content > ul.dropdown-menu > li > a,
    #wrapper-navbar #main-menu .vb-megamenu-content > ul.dropdown-menu > li > ul.dropdown-menu > li {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}