/* =========================================================
   LIGHTHOUSE SUPERMART - custom.css
   Organized navigation + existing site styles
   ========================================================= */


/* =========================================================
   1. GENERAL DROPDOWN / SUBMENU BEHAVIOUR
   ========================================================= */

.navbar .dropdown:hover > .dropdown-menu,
.navbar .dropdown:focus-within > .dropdown-menu {
    display: block;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu-menu {
    top: 0;
    left: 100%;
    margin-left: 0.1rem;
    display: none;
    position: absolute;
}

.dropdown-submenu:hover > .dropdown-submenu-menu,
.dropdown-submenu:focus-within > .dropdown-submenu-menu {
    display: block;
}

.dropdown-menu > li > a {
    color: #333;
}

.dropdown-menu > li > a:hover {
    color: #B93D59;
}


/* =========================================================
   2. SIDEBAR
   ========================================================= */

aside {
    position: sticky;
    top: 90px;
    height: fit-content;
}

.list-group-item a {
    color: #333;
}

.list-group-item a:hover {
    text-decoration: none;
    color: #007bff;
}


/* =========================================================
   3. NAVBAR BASE
   ========================================================= */

.navbar-custom {
    border-top: 1px solid #F5F5F5;
    border-bottom: 1px solid #F5F5F5;
}


/*
 * IMPORTANT:
 * Desktop dropdowns are positioned below the nav by the
 * Lighthouse navigation rules further down this file.
 * Do not add position: static here.
 */

.navbar-brand img {
    height: 45px;
    margin-top: 0;
    transition: all 0.3s;
}


/* =========================================================
   4. STICKY NAVIGATION
   ========================================================= */

nav.sticky ul {
    padding-top: 7px !important;
    padding-left: 2% !important;
    padding-right: 7% !important;
}

nav.sticky .navbar-brand img {
    height: 50px;
}

.secondbag {
    display: none;
    transition: all 0.3s;
}

nav.sticky .secondbag {
    display: block;
    margin-right: 12px;
}

nav.sticky .shopping-circle-count {
    top: -3px;
}

.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff !important;
    border-bottom: 1px solid #ddd;
    min-height: 95px;
    z-index: 16;
}

.sticky ul li a {
    color: #333333;
    font-family: 'poppins', 'verdana';
}

.sticky ul li a:hover {
    background: transparent;
}

.sticky .top-create-button {
    color: #333;
}

.sticky .top-login-button {
    color: #333;
}

.sticky .logged-in-user {
    background: #42AEF7;
    color: #fff !important;
}

.sticky .logged-in-user-name {
    margin-right: 26px;
    color: #42AEF7;
}

.sticky .custom-dropdown-content {
    display: none;
    position: absolute;
    min-width: 190px;
    z-index: 1;
    right: -20px;
    width: auto;
    text-align: left;
    margin-top: -15px !important;
    padding: 0;
}

.sticky div.shopping-cart-2 {
    display: inline-block;
}

.sticky .nav-logo-holder {
    width: 120px;
    height: 45px;
}


/* =========================================================
   5. GENERAL TYPOGRAPHY / TOP LINKS
   ========================================================= */

.uppercase {
    text-transform: uppercase;
}

.top-white-links {
    color: #666666;
    font-family: 'poppins', sans-serif;
    line-height: 40px;
    font-size: 15px;
    font-weight: 400;
    text-transform: capitalize;
    display: inline-block;
    position: relative;
    z-index: 10;
}

.top-white-links a {
    color: #000;
}

.top-white-links a:hover {
    color: #B93D59;
}

.top-white-links span {
    margin-left: 13px;
}

.top-white-links i {
    margin-right: 5px;
}


/* =========================================================
   6. SHOPPING BAG / CART COUNT
   ========================================================= */

.shopping-bag {
    position: relative;
    margin-top: 3px;
    display: inline-block;
    margin-right: 8px;
    margin-left: 15px;
}

.shopping-bag-height {
    height: 30px;
    margin-left: 20px;
    margin-top: -12px;
}

.shopping-circle-count {
    background: #000000;
    border: 2px solid #000000;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: inline-block;
    text-align: center;
    color: #fff;
    font-size: 12px;
    position: absolute;
    right: 13px;
    top: -8px;
    line-height: 20px;
}

.slash {
    margin-left: 7px !important;
    margin-right: 7px;
}


/* =========================================================
   7. ACCOUNT CUSTOM DROPDOWN
   ========================================================= */

.custom-dropdown {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.custom-dropdown:hover .custom-dropdown-content {
    display: block;
}

.custom-dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 190px;
    -webkit-box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, 0.2);
    padding: 0;
    z-index: 1;
    right: 0;
    width: auto;
    text-align: left;
    margin-top: 0;
}

.custom-dropdown-content a {
    color: black;
    padding: 0 16px;
    text-decoration: none;
    display: block;
    line-height: 50px;
    transition: all 0.2s;
}

.custom-dropdown-content a:hover,
.custom-dropdown-content a:focus {
    background-color: #b93d59;
    color: #fff;
    display: block;
}


/* =========================================================
   8. LIGHTHOUSE DESKTOP CATEGORY NAVIGATION
   ========================================================= */

@media (min-width: 992px) {

    /*
     * Keep the desktop navigation on one horizontal line.
     */
    #navbar .navbar-collapse {
        width: 100%;
        overflow: visible;
    }

    #navbar .navbar-nav {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        overflow: visible;
    }

    #navbar .navbar-nav > .nav-item {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    #navbar .navbar-nav > .nav-item > a {
        white-space: nowrap;
        display: block;
        padding-left: 10px;
        padding-right: 10px;
    }

    /*
     * Prevent the category navigation from causing page
     * horizontal overflow.
     */
    html,
    body {
        overflow-x: hidden;
    }

    #navbar {
        max-width: 100%;
        overflow: visible;
    }

    /*
     * Stable desktop navbar height.
     */
    #navbar .navbar-nav {
        min-height: 45px;
    }

    #navbar .navbar-nav > .nav-item > .nav-link {
        line-height: 45px;
        padding-top: 0;
        padding-bottom: 0;
    }


    /* =====================================================
       DESKTOP CATEGORY DROPDOWNS
       ===================================================== */

    #navbar .navbar-nav .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 0 !important;

        min-width: 210px;
        max-width: 250px;

        padding: 5px 0;

        background: #fff;
        border: 0;
        border-radius: 0;

        box-shadow: 0 5px 18px rgba(0, 0, 0, 0.12);

        z-index: 1050;
    }

    #navbar .navbar-nav .dropdown-menu .dropdown-item {
        display: block;
        padding: 8px 14px;
        line-height: 1.4;
        white-space: normal;
        font-size: 14px;
        color: #333;
    }

    #navbar .navbar-nav .dropdown-menu .dropdown-item:hover {
        background: transparent;
        color: #B93D59;
    }


    /* =====================================================
       SUBCATEGORY SCROLL
       Maximum approximately 7 visible items.
       ===================================================== */

    #navbar .category-nav-item > .dropdown-menu {
        max-height: 280px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /*
     * Slim Chrome / Edge / Safari scrollbar.
     */
    #navbar .category-nav-item > .dropdown-menu::-webkit-scrollbar {
        width: 5px;
    }

    #navbar .category-nav-item > .dropdown-menu::-webkit-scrollbar-track {
        background: #f5f5f5;
    }

    #navbar .category-nav-item > .dropdown-menu::-webkit-scrollbar-thumb {
        background: #bbb;
        border-radius: 10px;
    }

    #navbar .category-nav-item > .dropdown-menu::-webkit-scrollbar-thumb:hover {
        background: #999;
    }

    /*
     * Firefox.
     */
    #navbar .category-nav-item > .dropdown-menu {
        scrollbar-width: thin;
        scrollbar-color: #bbb #f5f5f5;
    }


    /* =====================================================
       HOVER DROPDOWN
       ===================================================== */

    #navbar .navbar-nav > .dropdown:hover > .dropdown-menu {
        display: block;
    }

    #navbar .navbar-nav > .dropdown:focus-within > .dropdown-menu {
        display: block;
    }

}


/* =========================================================
   9. NUMBER OF CATEGORY LINKS SHOWN
   ========================================================= */

/*
 * IMPORTANT:
 * These selectors use the category-nav-item class generated
 * in layout.html.php.
 *
 * 992px - 1199px  = 5 categories
 * 1200px - 1399px = 8 categories
 * 1400px - 1599px = 11 categories
 * 1600px+         = 12 categories
 */


/* 992px - 1199px */
@media (min-width: 992px) and (max-width: 1199px) {

    #navbar .category-nav-item:nth-child(n + 6) {
        display: none;
    }

}


/* 1200px - 1399px */
@media (min-width: 1200px) and (max-width: 1399px) {

    #navbar .category-nav-item:nth-child(n + 9) {
        display: none;
    }

}


/* 1400px - 1599px */
@media (min-width: 1400px) and (max-width: 1599px) {

    #navbar .category-nav-item:nth-child(n + 12) {
        display: none;
    }

}


/* 1600px and above */
@media (min-width: 1600px) {

    #navbar .category-nav-item:nth-child(n + 13) {
        display: none;
    }

}


/* =========================================================
   10. ALL CATEGORIES MEGA MENU
   ========================================================= */

@media (min-width: 992px) {

    #navbar .all-categories-nav {
        position: static;
    }

    #navbar .all-categories-nav > .all-categories-megamenu {
        position: absolute;

        top: 100%;
        left: 15px;
        right: 15px;

        width: auto;
        max-width: none;

        padding: 0;

        background: #fff;

        border: 0;
        border-radius: 0;

        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

        z-index: 2000;
    }


    /* Open mega menu on hover */
    #navbar .all-categories-nav:hover > .all-categories-megamenu {
        display: block;
    }

    #navbar .all-categories-nav:focus-within > .all-categories-megamenu {
        display: block;
    }


    /* =====================================================
       MEGA MENU HEADER
       ===================================================== */

    .mega-menu-header {
        padding: 14px 20px;
        border-bottom: 1px solid #eee;
    }

    .mega-menu-header a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-decoration: none;
        color: #333;
    }

    .mega-menu-header strong {
        font-size: 15px;
    }

    .mega-menu-header span {
        font-size: 13px;
        color: #B93D59;
    }


    /* =====================================================
       MEGA MENU GRID
       ===================================================== */

    .mega-menu-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
        padding: 20px;
        max-height: 70vh;
        overflow-y: auto;
    }


    /* Slim mega menu scrollbar */
    .mega-menu-grid::-webkit-scrollbar {
        width: 5px;
    }

    .mega-menu-grid::-webkit-scrollbar-track {
        background: #f5f5f5;
    }

    .mega-menu-grid::-webkit-scrollbar-thumb {
        background: #bbb;
        border-radius: 10px;
    }

    .mega-menu-grid::-webkit-scrollbar-thumb:hover {
        background: #999;
    }

    .mega-menu-grid {
        scrollbar-width: thin;
        scrollbar-color: #bbb #f5f5f5;
    }


    /* =====================================================
       MEGA MENU CATEGORY BLOCK
       ===================================================== */

    .mega-category {
        min-width: 0;
        padding: 0 18px 22px 0;
    }

    .mega-category-title {
        display: block;
        margin-bottom: 8px;

        color: #B93D59 !important; 

        font-size: 14px;
        font-weight: 700;

        text-decoration: none;
    }

    .mega-category-title:hover {
        color: #333;
    }


    /* =====================================================
       MEGA MENU SUBCATEGORIES
       ===================================================== */

    .mega-category ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mega-category ul li {
        margin: 0;
        padding: 0;
    }

    .mega-category ul li a {
        display: block;

        padding: 3px 0;

        color: #666;

        font-size: 13px;
        line-height: 1.4;

        text-decoration: none;
    }

    .mega-category ul li a:hover {
        color: #B93D59;
    }

}


/* 1200px+ = 5 columns */
@media (min-width: 1200px) {

    .mega-menu-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

}


/* 1600px+ = 6 columns */
@media (min-width: 1600px) {

    .mega-menu-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

}


/* =========================================================
   11. MOBILE
   ========================================================= */

/*
 * Your mobile navigation is already handled by Bootstrap's
 * navbar-expand-lg/collapse structure in layout.html.php.
 *
 * The desktop category-count rules begin at 992px, so they
 * do not affect the mobile menu.
 */

@media (max-width: 991.98px) {

    /*
     * Restore normal Bootstrap/mobile dropdown positioning.
     */
    #navbar .navbar-nav .dropdown-menu {
        position: static;
        padding: 0 16px;
    }

    /*
     * Do not apply desktop mega-menu positioning on mobile.
     */
    #navbar .all-categories-nav > .all-categories-megamenu {
        position: static;
        width: auto;
        box-shadow: none;
    }

    .mega-menu-grid {
        display: block;
        padding: 10px 0;
    }

    .mega-category {
        padding: 8px 0;
    }

}