/* ============================================================
   Virtual Mart Desktop Menu Final
   Clean professional desktop navigation only
   ============================================================ */

@media (min-width: 768px) {

    .nav-sections {
        background: #ffffff !important;
        border-top: 1px solid #e4e9f0 !important;
        border-bottom: 1px solid #e4e9f0 !important;
        box-shadow: 0 2px 10px rgba(0,0,0,.035) !important;
    }

    .nav-sections .navigation {
        background: #ffffff !important;
        max-width: 1280px !important;
        margin: 0 auto !important;
        padding: 0 18px !important;
        min-height: 58px !important;
        display: flex !important;
        align-items: center !important;
    }

    .nav-sections .navigation ul {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .nav-sections .navigation li.level0,
    .nav-sections .navigation li {
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
    }

    .nav-sections .navigation .level0 > .level-top,
    .nav-sections .navigation li > a {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;

        min-height: 42px !important;
        height: 42px !important;
        padding: 0 14px !important;
        margin: 0 !important;

        border-radius: 9px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;

        color: #062b55 !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        line-height: 42px !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        letter-spacing: .1px !important;
        white-space: nowrap !important;

        transition: all .18s ease !important;
    }

    .nav-sections .navigation .level0 > .level-top:hover,
    .nav-sections .navigation .level0 > .level-top.ui-state-focus,
    .nav-sections .navigation li > a:hover,
    .nav-sections .navigation li > a:focus {
        background: #eef3f8 !important;
        color: #062b55 !important;
    }

    /* First item: Shop by Category */
    .nav-sections .navigation .level0:first-child > .level-top,
    .nav-sections .navigation li:first-child > a {
        background: #062b55 !important;
        color: #ffffff !important;
        padding: 0 18px !important;
        box-shadow: 0 3px 10px rgba(6,43,85,.18) !important;
    }

    .nav-sections .navigation .level0:first-child > .level-top:hover,
    .nav-sections .navigation li:first-child > a:hover {
        background: #0a376d !important;
        color: #ffffff !important;
    }

    .nav-sections .navigation .level0:first-child > .level-top *,
    .nav-sections .navigation li:first-child > a * {
        color: #ffffff !important;
    }

    /* Icons */
    .nav-sections .navigation .level0 > .level-top .fa,
    .nav-sections .navigation li > a .fa {
        color: #ed1c24 !important;
        font-size: 15px !important;
        width: 18px !important;
        min-width: 18px !important;
        text-align: center !important;
        margin-right: 4px !important;
    }

    .nav-sections .navigation .level0:first-child > .level-top .fa,
    .nav-sections .navigation li:first-child > a .fa {
        color: #ffffff !important;
    }

    /* Dropdown arrow */
    .nav-sections .navigation .parent .level-top:after,
    .navigation .parent .level-top:after {
        color: inherit !important;
        font-size: 12px !important;
        margin-left: 6px !important;
        position: static !important;
        line-height: 1 !important;
    }

    /* Dropdown panel */
    .nav-sections .navigation .level0 .submenu {
        background: #ffffff !important;
        border: 1px solid #e4e9f0 !important;
        border-radius: 10px !important;
        box-shadow: 0 8px 22px rgba(0,0,0,.12) !important;
        padding: 8px 0 !important;
        margin-top: 6px !important;
    }

    .nav-sections .navigation .level0 .submenu a {
        display: block !important;
        height: auto !important;
        min-height: 36px !important;
        padding: 9px 16px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background: #ffffff !important;
        color: #062b55 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-transform: none !important;
        box-shadow: none !important;
    }

    .nav-sections .navigation .level0 .submenu a:hover {
        background: #eef3f8 !important;
        color: #062b55 !important;
    }
}

/* ============================================================
   End Virtual Mart Desktop Menu Final
   ============================================================ */


/* ============================================================
   Virtual Mart Desktop Category Dropdown Restore v3
   Restores Shop by Category list as dropdown instead of horizontal strip
   ============================================================ */

@media (min-width: 768px) {

    /*
      Important:
      Top menu can be flex, but dropdown/submenu ULs must NOT inherit flex.
    */

    .nav-sections .navigation .level0 .submenu,
    .nav-sections .navigation .level0.parent .submenu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;

        display: none !important;
        width: 280px !important;
        min-width: 280px !important;
        max-width: 320px !important;

        background: #ffffff !important;
        border: 1px solid #e4e9f0 !important;
        border-radius: 10px !important;
        box-shadow: 0 8px 22px rgba(0,0,0,.12) !important;

        padding: 8px 0 !important;
        margin-top: 6px !important;

        z-index: 9999 !important;
    }

    .nav-sections .navigation .level0:hover > .submenu,
    .nav-sections .navigation .level0.ui-state-focus > .submenu,
    .nav-sections .navigation .level0.parent:hover > .submenu,
    .nav-sections .navigation .level0.parent.ui-state-focus > .submenu {
        display: block !important;
    }

    .nav-sections .navigation .level0 .submenu ul,
    .nav-sections .navigation .level0 .submenu li {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #ffffff !important;
        border: 0 !important;
        float: none !important;
    }

    .nav-sections .navigation .level0 .submenu li > a,
    .nav-sections .navigation .level0 .submenu .level-top,
    .nav-sections .navigation .level0 .submenu a {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 36px !important;

        padding: 9px 16px !important;
        margin: 0 !important;

        background: #ffffff !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;

        color: #062b55 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-transform: none !important;
        text-align: left !important;
        white-space: normal !important;
    }

    .nav-sections .navigation .level0 .submenu li > a:hover,
    .nav-sections .navigation .level0 .submenu a:hover {
        background: #eef3f8 !important;
        color: #062b55 !important;
    }

    /*
      Keep only the top-level navigation horizontal.
      Do not allow this rule to affect submenu lists.
    */
    .nav-sections .navigation > ul,
    .nav-sections .navigation > ul.ui-menu {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
}

/* ============================================================
   End Virtual Mart Desktop Category Dropdown Restore v3
   ============================================================ */


/* ============================================================
   Virtual Mart Desktop Dropdown Usability Fix v4
   Fixes first item invisible text and dropdown disappearing quickly
   ============================================================ */

@media (min-width: 768px) {

    /* Keep parent menu item as the hover bridge so dropdown does not disappear */
    body .nav-sections .navigation .level0.parent,
    body .nav-sections .navigation li.level0.parent,
    body .nav-sections .navigation .level0:first-child {
        position: relative !important;
        padding-bottom: 8px !important;
        margin-bottom: -8px !important;
    }

    /* Move dropdown directly under button with no hover gap */
    body .nav-sections .navigation .level0 .submenu,
    body .nav-sections .navigation .level0.parent .submenu {
        top: 42px !important;
        margin-top: 0 !important;
        padding: 8px 0 !important;
        z-index: 99999 !important;
    }

    /* Create an invisible hover bridge above dropdown */
    body .nav-sections .navigation .level0 .submenu:before,
    body .nav-sections .navigation .level0.parent .submenu:before {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: -10px !important;
        height: 10px !important;
        background: transparent !important;
        display: block !important;
    }

    /* Keep dropdown visible while hovering parent OR dropdown */
    body .nav-sections .navigation .level0:hover > .submenu,
    body .nav-sections .navigation .level0.parent:hover > .submenu,
    body .nav-sections .navigation .level0 .submenu:hover,
    body .nav-sections .navigation .level0.parent .submenu:hover {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Fix invisible/white first category item */
    body .nav-sections .navigation .level0 .submenu li,
    body .nav-sections .navigation .level0 .submenu li.active,
    body .nav-sections .navigation .level0 .submenu li.has-active,
    body .nav-sections .navigation .level0 .submenu li:hover {
        background: #ffffff !important;
        background-color: #ffffff !important;
        background-image: none !important;
    }

    body .nav-sections .navigation .level0 .submenu li > a,
    body .nav-sections .navigation .level0 .submenu li > a:visited,
    body .nav-sections .navigation .level0 .submenu li > a:hover,
    body .nav-sections .navigation .level0 .submenu li > a:focus,
    body .nav-sections .navigation .level0 .submenu li > a:active,
    body .nav-sections .navigation .level0 .submenu li.active > a,
    body .nav-sections .navigation .level0 .submenu li.has-active > a {
        background: #ffffff !important;
        background-color: #ffffff !important;
        background-image: none !important;

        color: #062b55 !important;
        opacity: 1 !important;
        visibility: visible !important;

        display: block !important;
        width: 100% !important;
        padding: 10px 16px !important;

        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1.3 !important;
        text-align: left !important;
        text-transform: none !important;
        text-decoration: none !important;
        white-space: normal !important;
    }

    body .nav-sections .navigation .level0 .submenu li > a:hover,
    body .nav-sections .navigation .level0 .submenu li.active > a:hover,
    body .nav-sections .navigation .level0 .submenu li.has-active > a:hover {
        background: #eef3f8 !important;
        color: #062b55 !important;
    }

    body .nav-sections .navigation .level0 .submenu li > a *,
    body .nav-sections .navigation .level0 .submenu li.active > a *,
    body .nav-sections .navigation .level0 .submenu li.has-active > a * {
        color: #062b55 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Dropdown arrow/icon color */
    body .nav-sections .navigation .level0 .submenu li > a:before,
    body .nav-sections .navigation .level0 .submenu li > a:after {
        color: #062b55 !important;
    }
}

/* ============================================================
   End Virtual Mart Desktop Dropdown Usability Fix v4
   ============================================================ */