/* Add custom CSS styles below */
body {
  background: #F6F0E6 !important;
}
/* =========================================================
   SHAL ROASTERY - RAED THEME
   HEADER FINAL VERSION
   ========================================================= */


/* =========================================================
   1. إخفاء الـ Top Navbar
   Search + Email
   ========================================================= */

.store-header .top-navbar {
    display: none !important;
}


/* =========================================================
   2. MAIN HEADER
   ========================================================= */

#mainnav {
    height: auto !important;
    min-height: 0 !important;
    background-color: #6B2632 !important;
    border: 0 !important;
    box-shadow: none !important;
}

#mainnav .inner {
    background-color: #6B2632 !important;
}

#mainnav .container {
    background: transparent !important;
}


/* =========================================================
   3. DESKTOP
   ========================================================= */

@media (min-width: 1024px) {

    /*
       أول div داخل container يحتوي:
       - mobile button
       - logo
       - custom-main-menu

       سنجعله Grid
    */

    #mainnav .container > div.flex > div:first-child {

        position: relative !important;

        width: 100% !important;
        height: 145px !important;

        display: grid !important;

        grid-template-columns: 1fr auto 1fr !important;
        grid-template-rows: 85px 60px !important;

        align-items: center !important;

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


    /* =========================================
       إخفاء زر الموبايل
       ========================================= */

    #mainnav [data-testid="store-header-mobile-toggle"] {
        display: none !important;
    }


    /* =========================================
       LOGO
       ========================================= */

    #mainnav .navbar-brand {

        grid-column: 2 !important;
        grid-row: 1 !important;

        position: static !important;

        transform: none !important;

        width: auto !important;
        height: 85px !important;

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

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        z-index: 20 !important;
    }


    #mainnav .navbar-brand img {

        width: auto !important;
        height: auto !important;

        max-width: 180px !important;
        max-height: 65px !important;

        object-fit: contain !important;
    }


    /* =========================================
       MENU
       الصف الثاني
       ========================================= */

    #mainnav custom-main-menu {

        grid-column: 1 / 4 !important;
        grid-row: 2 !important;

        width: 100% !important;
        height: 60px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

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

        border-top: 1px solid rgba(255,255,255,0.18) !important;
    }


    #mainnav custom-main-menu nav {

        display: block !important;

        width: 100% !important;
        height: 100% !important;
    }


    #mainnav custom-main-menu .main-menu {

        width: 100% !important;
        height: 100% !important;

        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 45px !important;

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

        list-style: none !important;
    }


    #mainnav custom-main-menu .main-menu li {

        display: inline-flex !important;

        align-items: center !important;

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


    /*
       إخفاء عناصر نسخة الموبايل
    */

    #mainnav custom-main-menu .main-menu li.lg\:hidden {
        display: none !important;
    }


    /*
       روابط المنيو
    */

    #mainnav custom-main-menu .main-menu li a {

        display: flex !important;

        align-items: center !important;

        padding: 8px 0 !important;

        color: #FFFFFF !important;

        font-size: 15px !important;
        font-weight: 500 !important;

        text-decoration: none !important;

        white-space: nowrap !important;

        transition: all 0.25s ease !important;
    }


    #mainnav custom-main-menu .main-menu li a:hover {

        color: #C49A5A !important;

    }


    /* =========================================
       ACCOUNT + CART
       ========================================= */

    #mainnav .container > div.flex > div:last-child {

        position: absolute !important;

        top: 0 !important;

        right: 0 !important;

        height: 85px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: flex-end !important;

        z-index: 30 !important;
    }


    /* RTL */
    html[dir="rtl"] #mainnav .container > div.flex > div:last-child {

        right: auto !important;

        left: 0 !important;
    }


    /* =========================================
       USER
       ========================================= */

    #mainnav .s-user-menu-login-btn {

        width: 42px !important;
        height: 42px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

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

        background: transparent !important;

        border: 0 !important;

        color: #FFFFFF !important;
    }


    #mainnav .s-user-menu-login-btn svg {

        width: 28px !important;
        height: 28px !important;

        fill: #FFFFFF !important;
    }


    #mainnav .s-user-menu-login-btn svg path {

        fill: #FFFFFF !important;
    }


    /* =========================================
       CART
       ========================================= */

    #mainnav .s-cart-summary-wrapper {

        display: flex !important;

        align-items: center !important;

        margin-right: 15px !important;

        color: #FFFFFF !important;

        text-decoration: none !important;
    }


    #mainnav .s-cart-summary-wrapper .header-btn__icon {

        color: #FFFFFF !important;

        font-size: 27px !important;
    }


    #mainnav .s-cart-summary-wrapper svg {

        width: 28px !important;
        height: 30px !important;

        fill: #FFFFFF !important;
    }


    #mainnav .s-cart-summary-wrapper svg path {

        fill: #FFFFFF !important;
    }


    /* رقم السلة */

    #mainnav .s-cart-summary-count {

        min-width: 20px !important;
        height: 20px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        padding: 0 5px !important;

        background: #C49A5A !important;

        color: #FFFFFF !important;

        border-radius: 50% !important;

        font-size: 11px !important;

        font-weight: 700 !important;
    }


    #mainnav .s-cart-summary-content,
    #mainnav .s-cart-summary-total {

        color: #FFFFFF !important;
    }

}


/* =========================================================
   4. MOBILE
   ========================================================= */

@media (max-width: 1023px) {

    #mainnav {

        width: 100% !important;

        background-color: #6B2632 !important;
    }


    #mainnav .container {

        padding-left: 12px !important;
        padding-right: 12px !important;
    }


    /*
       الصف الرئيسي للموبايل
    */

    #mainnav .container > div.flex {

        width: 100% !important;

        min-height: 70px !important;

        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;

        justify-content: space-between !important;
    }


    /*
       Logo + Menu button
    */

    #mainnav .container > div.flex > div:first-child {

        width: auto !important;

        height: 70px !important;

        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;

        justify-content: flex-start !important;
    }


    /*
       زر القائمة
    */

    #mainnav [data-testid="store-header-mobile-toggle"] {

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        margin-right: 10px !important;

        color: #FFFFFF !important;
    }


    #mainnav [data-testid="store-header-mobile-toggle"] i {

        color: #FFFFFF !important;

        font-size: 24px !important;
    }


    /*
       Logo
    */

    #mainnav .navbar-brand {

        position: static !important;

        transform: none !important;

        margin: 0 !important;

        padding: 0 !important;

        display: flex !important;

        align-items: center !important;
    }


    #mainnav .navbar-brand img {

        width: auto !important;

        max-width: 135px !important;

        max-height: 50px !important;
    }


    /*
       Account + Cart
    */

    #mainnav .container > div.flex > div:last-child {

        position: static !important;

        height: 70px !important;

        width: auto !important;

        display: flex !important;

        align-items: center !important;

        justify-content: flex-end !important;
    }


    /*
       User
    */

    #mainnav .s-user-menu-login-btn {

        width: 38px !important;
        height: 38px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;
    }


    #mainnav .s-user-menu-login-btn svg {

        width: 24px !important;
        height: 24px !important;

        fill: #FFFFFF !important;
    }


    /*
       Cart
    */

    #mainnav .s-cart-summary-wrapper {

        margin-right: 8px !important;

        color: #FFFFFF !important;
    }


    #mainnav .s-cart-summary-wrapper .header-btn__icon {

        font-size: 24px !important;

        color: #FFFFFF !important;
    }


    /*
       Mobile menu component
    */

    #mainnav custom-main-menu {

        position: static !important;
    }

}


/* =========================================================
   5. HOVER
   ========================================================= */

#mainnav .s-user-menu-login-btn:hover svg path {

    fill: #C49A5A !important;
}


#mainnav .s-cart-summary-wrapper:hover svg path {

    fill: #C49A5A !important;
}