/* Storefront navigation: editorial desktop mega menu and dedicated touch drawer. */
@media (min-width: 992px) {
    .navbar-modern .vp-mega-menu {
        --vp-mega-edge: 24px;
        right: var(--vp-mega-edge) !important;
        left: var(--vp-mega-edge) !important;
        width: auto !important;
        max-width: 1770px;
        margin-inline: auto;
        grid-template-columns: minmax(360px, .78fr) minmax(0, 1.7fr);
        border: 0;
        border-top: 1px solid #e5e5e7;
        overflow: hidden;
        border-radius: 0 0 10px 10px;
        box-shadow: 0 24px 64px rgba(20, 25, 34, .16);
        background: #fff;
        transform: translateY(12px) scale(.995);
        transform-origin: 50% 0;
        transition: opacity .2s ease, visibility .2s ease, transform .24s cubic-bezier(.2,.7,.2,1);
    }

    .navbar-modern .nav-item-group:hover .vp-mega-menu,
    .navbar-modern .nav-item-group:focus-within .vp-mega-menu { transform: translateY(0) scale(1); }

    .navbar-modern .vp-mega-menu__categories,
    .navbar-modern .vp-mega-menu__products {
        padding: 34px clamp(28px, 3vw, 54px) 40px;
        background: #fff;
    }

    .navbar-modern .vp-mega-menu__categories {
        border-right: 1px solid #e7e7e9;
        background: linear-gradient(145deg, #fafafa 0%, #f6f6f7 100%);
    }

    .navbar-modern .vp-mega-menu__eyebrow,
    .navbar-modern .vp-mega-menu__products-heading small {
        margin: 0 0 13px;
        color: #72747a;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .12em;
    }

    .navbar-modern .vp-mega-menu__all {
        position: relative;
        width: fit-content;
        margin-bottom: 27px;
        padding-bottom: 3px;
        border-bottom: 0;
        color: #19191b;
        font-size: 20px;
        font-weight: 700;
    }

    .navbar-modern .vp-mega-menu__all::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: currentColor; transform-origin: left; transition: transform .2s ease; }
    .navbar-modern .vp-mega-menu__all:hover::after,
    .navbar-modern .vp-mega-menu__all:focus-visible::after { transform: scaleX(.62); }

    .navbar-modern .vp-mega-menu__category-grid {
        grid-template-columns: repeat(2, minmax(135px, 1fr));
        gap: 24px clamp(24px, 3vw, 52px);
    }

    .navbar-modern .vp-mega-menu__category-title {
        position: relative;
        display: inline-flex;
        padding-bottom: 4px;
        color: #222225;
        font-size: 15px;
        font-weight: 650;
    }

    .navbar-modern .vp-mega-menu__category-title::after { content: ""; position: absolute; right: 100%; bottom: 0; left: 0; height: 1px; background: #4b38ee; transition: right .2s ease; }
    .navbar-modern .vp-mega-menu__category-title:hover::after,
    .navbar-modern .vp-mega-menu__category-title:focus-visible::after { right: 0; }

    .navbar-modern .vp-mega-menu__subcategory {
        padding-block: 2px;
        color: #56585d;
        font-size: 13px;
        line-height: 1.45;
        transition: color .16s ease, transform .16s ease;
    }

    .navbar-modern .vp-mega-menu__subcategory:hover,
    .navbar-modern .vp-mega-menu__subcategory:focus-visible { transform: translateX(3px); }

    .navbar-modern .vp-mega-menu a:hover,
    .navbar-modern .vp-mega-menu a:focus-visible {
        color: #4b38ee;
        outline: 0;
    }

    .navbar-modern .vp-mega-menu__products-heading {
        margin-bottom: 21px;
        align-items: flex-end;
    }

    .navbar-modern .vp-mega-menu__products-heading span {
        color: #19191b;
        font-size: 20px;
        font-weight: 700;
    }

    .navbar-modern .vp-mega-menu__products-heading a {
        padding-bottom: 2px;
        border-bottom: 1px solid currentColor;
        color: #55575c;
        font-size: 12px;
        text-underline-offset: 4px;
    }

    .navbar-modern .vp-mega-menu__product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: clamp(12px, 1.2vw, 22px);
    }

    .navbar-modern .vp-mega-product {
        min-width: 0;
        padding-bottom: 3px;
        transform: none;
        transition: transform .22s ease;
    }

    .navbar-modern .vp-mega-product:hover,
    .navbar-modern .vp-mega-product:focus-visible { transform: translateY(-3px); }

    .navbar-modern .vp-mega-product__image {
        position: relative;
        aspect-ratio: 1 / .9;
        margin-bottom: 12px;
        border: 0;
        border-radius: 5px;
        background: linear-gradient(145deg, #f7f7f6, #eeeFec);
    }

    .navbar-modern .vp-mega-product__image img {
        width: 100%;
        height: 100%;
        padding: 0;
        object-fit: contain;
        transform: none;
        transition: transform .28s ease;
    }

    .navbar-modern .vp-mega-product__image.is-missing::after {
        content: "Image unavailable";
        color: #8b8d92;
        font-size: 11px;
    }

    .navbar-modern .vp-mega-product:hover .vp-mega-product__image img {
        transform: scale(1.035);
    }

    .navbar-modern .vp-mega-product__badge { position: absolute; z-index: 2; top: 9px; left: 9px; min-height: 22px; padding: 6px 8px; border-radius: 999px; background: rgba(28,43,56,.92); color: #fff; font-size: 8px; font-style: normal; font-weight: 800; line-height: 1; letter-spacing: .06em; text-transform: uppercase; backdrop-filter: blur(7px); }

    .navbar-modern .vp-mega-product strong {
        color: #222225;
        font-size: 13px;
        font-weight: 650;
    }

    .navbar-modern .vp-mega-product__price {
        display: flex;
        align-items: baseline;
        gap: 7px;
        margin-top: 4px;
        color: #66686d !important;
        font-size: 11px !important;
        font-weight: 550;
    }

    .navbar-modern .vp-mega-product__price del { color: #999ca1; font-size: 9px; font-weight: 500; }

    .navbar-modern .nav-item-group:hover > .nav-item,
    .navbar-modern .nav-item-group:focus-within > .nav-item {
        color: #171719;
    }

    .navbar-modern .nav-item-group:hover > .nav-item::after,
    .navbar-modern .nav-item-group:focus-within > .nav-item::after {
        right: 0;
        left: 0;
        opacity: 1;
    }
}

@media (min-width: 992px) and (max-width: 1279.98px) {
    .navbar-modern .vp-mega-menu {
        --vp-mega-edge: 16px;
        grid-template-columns: minmax(310px, .8fr) minmax(0, 1.5fr);
    }

    .navbar-modern .vp-mega-menu__categories,
    .navbar-modern .vp-mega-menu__products {
        padding: 27px;
    }

    .navbar-modern .vp-mega-menu__product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .navbar-modern .vp-mega-product:nth-child(n+4) {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .navbar-modern .mobile-menu-sidebar {
        width: min(420px, 92vw);
        max-width: none;
        background: #fff;
        box-shadow: 18px 0 48px rgba(17, 24, 39, .2);
    }

    .navbar-modern .mobile-menu-header {
        position: sticky;
        z-index: 5;
        top: 0;
        display: flex;
        min-height: 72px;
        padding: 12px 18px;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #e9e9eb;
        background: rgba(255, 255, 255, .97);
    }

    .navbar-modern .mobile-menu-brand img {
        display: block;
        width: 132px;
        height: auto;
    }

    .navbar-modern .mobile-menu-close {
        position: static;
        display: grid;
        width: 42px;
        height: 42px;
        padding: 0;
        place-items: center;
        border: 0;
        border-radius: 50%;
        background: #f3f3f5;
        color: #171719;
        font-size: 20px;
    }

    .navbar-modern .mobile-menu-content {
        padding: 0 0 max(24px, env(safe-area-inset-bottom));
    }

    .navbar-modern .sidebar-section {
        padding: 24px 20px;
        border-bottom: 1px solid #e9e9eb;
    }

    .navbar-modern .sidebar-section:first-child {
        padding-top: 22px;
    }

    .navbar-modern .section-title {
        margin: 0 0 10px;
        color: #777980;
        font-size: 10px;
        font-weight: 750;
        letter-spacing: .13em;
    }

    .navbar-modern .nav-cards,
    .navbar-modern .nav-card-group {
        display: block;
    }

    .navbar-modern .mobile-nav-row {
        display: grid;
        min-height: 54px;
        grid-template-columns: minmax(0, 1fr) 48px;
        align-items: center;
        border-bottom: 1px solid #ededee;
    }

    .navbar-modern .nav-cards > .nav-card,
    .navbar-modern .mobile-nav-row .nav-card {
        min-height: 54px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: #1c1c1f;
        font-size: 16px;
        font-weight: 650;
        transform: none;
    }

    .navbar-modern .nav-cards > .nav-card {
        border-bottom: 1px solid #ededee;
    }

    .navbar-modern .nav-card:hover {
        border-color: #ededee;
        background: transparent;
        color: #4b38ee;
        transform: none;
    }

    .navbar-modern .mobile-nav-row .toggle-icon {
        display: grid;
        width: 42px;
        height: 42px;
        margin: 0 0 0 auto;
        padding: 0;
        place-items: center;
        border: 0;
        background: transparent;
        color: #1c1c1f;
        font-size: 16px;
    }

    .navbar-modern .mobile-nav-row .toggle-icon svg { transition: transform .2s ease; }
    .navbar-modern .mobile-nav-row .toggle-icon[aria-expanded="true"] svg { transform: rotate(180deg); }

    .navbar-modern .submenu-items {
        margin: 0;
        padding: 6px 0 12px;
        border: 0;
        background: #f7f7f8;
    }

    .navbar-modern .submenu-item,
    .navbar-modern .submenu-item--nested {
        min-height: 43px;
        margin: 0;
        padding: 11px 16px !important;
        color: #3f4146 !important;
        font-size: 13px !important;
        font-weight: 500;
    }

    .navbar-modern .submenu-item--nested {
        padding-left: 32px !important;
        color: #70737a !important;
    }

    .navbar-modern .submenu-item::before {
        content: none;
    }

    .navbar-modern .account-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .navbar-modern .mobile-account-summary {
        grid-column: 1 / -1;
        margin: 0 0 4px;
        border-radius: 4px;
    }

    .navbar-modern .account-item {
        min-height: 48px;
        margin: 0;
        padding: 0 13px;
        border-color: #e1e1e4;
        border-radius: 4px;
        background: #fff;
        font-size: 13px;
        transform: none;
    }

    .navbar-modern .account-item:hover {
        border-color: #c8c3ef;
        background: #f8f7ff;
        color: #3025b3;
        transform: none;
    }

    .navbar-modern .mobile-menu-icon {
        width: 21px;
        height: 21px;
        flex: 0 0 21px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .navbar-modern .mobile-help-section p {
        margin: 0 0 15px;
        color: #666970;
        font-size: 13px;
        line-height: 1.55;
    }

    .navbar-modern .mobile-help-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .navbar-modern .mobile-help-actions .mobile-help-action {
        display: grid;
        min-height: 64px;
        padding: 10px 13px;
        grid-template-columns: 38px minmax(0, 1fr);
        align-items: center;
        gap: 12px;
        border: 1px solid #dedee4;
        border-radius: 8px;
        background: #fff;
        color: #242427;
        text-decoration: none;
    }

    .navbar-modern .mobile-help-action > svg {
        display: block;
        width: 24px;
        height: 24px;
        margin: auto;
        color: #4b38ee;
    }

    .navbar-modern .mobile-help-action > span {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 3px;
    }

    .navbar-modern .mobile-help-action strong { color: #202024; font-size: 13px; font-weight: 700; }
    .navbar-modern .mobile-help-action small { color: #777a83; font-size: 10px; line-height: 1.35; }
    .navbar-modern .mobile-help-action--primary { border-color: #d7d2ff; background: #f6f4ff; color: #4b38ee; }
    .navbar-modern .mobile-help-action:hover,
    .navbar-modern .mobile-help-action:focus-visible {
        border-color: #bdb6f4;
        background: #f8f7ff;
        color: #3928d8;
        outline: none;
    }

    .navbar-modern .mobile-social-section { display: flex; align-items: center; justify-content: space-between; gap: 18px; background: #fafafa; }
    .navbar-modern .mobile-social-section .section-title { margin-bottom: 6px; }
    .navbar-modern .mobile-social-section p { margin: 0; color: #777a83; font-size: 10px; line-height: 1.45; }
    .navbar-modern .mobile-social-links { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
    .navbar-modern .mobile-social-links a { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid #dedee4; border-radius: 50%; background: #fff; color: #242427; text-decoration: none; transition: border-color .18s ease, background-color .18s ease, color .18s ease; }
    .navbar-modern .mobile-social-links svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
    .navbar-modern .mobile-social-links a:hover,
    .navbar-modern .mobile-social-links a:focus-visible { border-color: #bdb6f4; background: #f1efff; color: #4b38ee; outline: none; }
}

@media (max-width: 991.98px) {
    body.vp-mobile-menu-open .header-area.navbar-modern { z-index: 100000 !important; }
    body.vp-mobile-menu-open .navbar-modern .mobile-menu-sidebar { z-index: 100001 !important; }
}

@media (max-width: 420px) {
    .navbar-modern .mobile-menu-sidebar {
        width: 100vw;
    }
}