﻿/* FOODY HEADER */

:root { --submenuBg: #fff; --submenuColor: #000; }


header.shopHeader #header2 a.logoHeader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-height: 100%; z-index: 9; }
header.shopHeader #header2.header-delivery .cartBtn.navShopBtn button { border: 1px solid; display: flex; align-items: center; padding: 8px 10px; direction: rtl; font-size: 13px; line-height: 1.2; white-space: nowrap; }
header.shopHeader #header2 .cartItemsCounter { order: -1; }

header.shopHeader #header2 .header-top { justify-content: space-between; }
header.shopHeader #header2 .header-top .header-top-right { position: relative; align-items: center; }
header.shopHeader #header2 .header-top .header-top-right > .navShopBtn { margin-left: 0; margin-right: 15px; }
header.shopHeader #header2 .menu-nav { margin: 0; width: auto; }
header.shopHeader #header2 .header-top-left { display: block; }
header.shopHeader #header2 .cartBtnText { margin-right: 5px; }
header.shopHeader #header2 ul#menu.submenu { background: var(--submenuBg); color: var(--submenuColor); }


header.shopHeader #header2 ul#menu > li > a::after { content: none; }

@media(min-width: 768px ) {
    /* EDIT HEADER IF ALL OLD CSS DELETED */
    header.shopHeader #header2 .menu-nav .nav-menu-anim { width: 30px; height: 30px; display: block; cursor: pointer; margin: 0; }
    header.shopHeader #header2 .menu-nav { position: relative; float: none !important; width: auto; }
    header.shopHeader #header2.open ul#menu.submenu { /* opacity: 1; */ max-height: 1000px; overflow: visible; }
    header.shopHeader #header2 ul#menu.submenu { position: absolute; top: 100%; right: 0; box-shadow: -1px 0px 8px 0px rgb(0 0 0 / 4%); margin: 10% 0 0; list-style: none; padding: 0; min-width: 150px; width: fit-content; max-height: 0; overflow: hidden; transition: .5s ease-in-out; }
    header.shopHeader #header2 ul#menu.submenu li { line-height: 1.2; white-space: nowrap; }
    header.shopHeader #header2 ul#menu.submenu::before { content: ""; position: absolute; top: -5%; right: 10px; border-width: 0 10px 10px; width: 0; height: 0; border-color: transparent; border-style: solid; z-index: 999; border-bottom-color: var(--submenuBg); }
    header.shopHeader #header2 ul#menu.submenu > li.social-mobile { display: none; }
    header.shopHeader #header2 ul#menu.submenu li:hover a, #header2 ul#menu.submenu li:focus a { background-color: #f7f7f7; }
    header.shopHeader #header2 ul#menu.submenu > li:not(.social-mobile) a { display: block; font-size: 87.5%; padding: 5px 25px; line-height: 1.5; }
    header.shopHeader #header2 ul#menu > li { margin: 0; }
}


@media(max-width: 767px ) {
    header.shopHeader #header2 .menu-nav { max-width: none; margin: 0 0 0 auto; z-index: 2; }
    header.shopHeader #header2 .header-top-left { display: none; }
    header.shopHeader #header2 .header-top .header-top-right .userBtn { order: 1; }
    header.shopHeader #header2.open ul#menu.submenu { max-height: inherit; transform: translateX(0); z-index: 1; }
    header.shopHeader #header2 ul#menu.submenu > li:not(.social-mobile) a { font-size: 100%; }
    header.shopHeader #header2 ul#menu.submenu > li.social-mobile { display: block; }
    header.shopHeader #header2 ul#menu.submenu > li.social-mobile svg { width: 16px; height: 16px; }
    header.shopHeader #header2.header-delivery .cartBtn.navShopBtn button { padding: 0; border-color: transparent; }
    header.shopHeader #header2 .cartBtnText { display: none; }


    /* SHOP CHECKOUT */
    .ShopCheckoutPage.ShopRelatedPage section#GridTop:not(.noTopImage), .ShopRelatedPage section#GridTop:not(.noTopImage) { height: 0 !important; }
}



/*------------------------------------*\
            Foody Header
\*------------------------------------*/
/*
#header2.header-delivery .menu-nav { padding: 10px; cursor: pointer;  vertical-align: middle; display: inline-block; float: none !important; width: 50px; }
#header2.header-delivery .submenu li a, #header2.header-delivery .submenu li i { pointer-events: all; }

#header2.header-delivery .submenu { position: absolute; right: 0; margin-right: 15px; background: #cccccc; color: #fff; list-style: none; text-align: center; float: right;  padding-left: 0; z-index: 0;  top: 0; padding: 0; }
#header2.header-delivery .submenu { display: block; }
#header2.header-delivery:not(.menu-open):not(.subopen) .submenu { position: absolute; overflow: hidden; clip: rect(0 0 0 0); max-height: 0px; width: 1px; margin: -1px; padding: 0; border: 0; top: 0; width: 100%; background: transparent; transition: all 350ms ease-in-out; -webkit-transition: all 350ms ease-in-out; }
#header2.header-delivery #header-right .closed { visibility: visible; transition: all 850ms ease-in-out; -webkit-transition: all 850ms ease-in-out; opacity: 1; }
#header2.header-delivery.menu-open #header-right .closed { opacity: 0; visibility: hidden; transition: all 350ms ease-in-out; -webkit-transition: all 350ms ease-in-out; }
#header2.header-delivery .social-links a svg { fill: #000000; width: 23px; vertical-align: middle; height: 20px }
#header2.header-delivery .submenu > li { width: 100%; float: right; padding: 7px; visibility: hidden; }
#header2.header-delivery .submenu > li.active { background: #999999; color: #ffffff; }
#header2.header-delivery .submenu > li:hover, #header .submenu > li:focus { background: #999999; color: #ffffff; }
#header2.header-delivery .submenu > li:first-child { margin-top: 20%; }


#header2.header-delivery .submenu li > a { color: inherit; font-size: 130%;  position: relative; }
#header2.header-delivery .submenu li > a:focus { color: #000000; text-decoration: underline; }
#header2.header-delivery .submenu li:not(.has-sub) > a { display: inline-block; width: 100%; }

#header2.header-delivery .submenu .menu-sub { list-style: none; padding: 0; display: none; float: right; width: 100%; padding-right: 10px; }
#header2.header-delivery .submenu .menu-sub li { text-align: center; padding: 0.5%; }
#header2.header-delivery .submenu .menu-sub li a { font-size: 110%; }

#header2.header-delivery .submenu li.social-mobile .social-links { width: 100%; padding: 0; margin-right: 0; display: inline-block; }
#header2.header-delivery .submenu li.social-mobile { text-align: center; }


@media(min-width:768px) {
    #header2.header-delivery .header-top-left a.whatsapp_icon { display: none; }
}

@media(min-width:991px) {
    #header2.header-delivery .submenu { width: 280px; }
}

@media(max-width:1440px) {
    #header2.header-delivery .submenu { margin-right: 0; }
}

@media(max-width:1250px) {
    #header2.header-delivery .submenu { margin-right: 0; }
}

@media(max-width:991px) {
    #header2.header-delivery .submenu > li { padding: 10px 90px; white-space: nowrap; }
}

@media(max-width:767px) { 
    #header2.header-delivery .nav-menu-anim { margin-left: 0; }
    #header2.header-delivery .menu-nav { padding: 15px 10px; }

    #header2.header-delivery .submenu li { white-space: nowrap; text-align: right; padding: 10px; padding-right: 30px; line-height: 1; }
    #header2.header-delivery .submenu li:first-child { margin-top: 0; }
    #header2.header-delivery .submenu > li:hover { background: transparent; color: inherit; }


    #header2.header-delivery .submenu { width: 97vw; top: 0; right: 0;  margin-top: 52%; z-index: -1; max-height: 75vh; overflow-y: scroll; }

    #header2.header-delivery .submenu li a { font-size: 150%; }
    #header2.header-delivery .submenu .social-links { display: block; padding: 0; }
    #header2.header-delivery .submenu li.social-mobile { display: block; text-align: right; }
    #header2.header-delivery { transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; background-color: #000; padding: 5px 8px; }
    #header2.header-delivery .submenu .menu-sub li { text-align: right; }
    #header2.header-delivery .submenu .menu-sub { margin-top: 8px; }
}

@media(max-width:320px) {
    #header2.header-delivery .menu-nav { padding: 13px 8px; }
    #header2.header-delivery.bg .menu-nav { padding: 13px 8px; margin-top: 0; margin-right: 0; }
    #header2.header-delivery .submenu { margin-top: 67%; }
}




header.shopHeader #header2.header-delivery.open .submenu { max-height: 1000px;  clip: auto; background: #ffffff; height: auto; color: #000000; }

#header2.header-delivery .submenu li.social-mobile .social-links { float: none !important; }
header.shopHeader #header2.header-delivery .header-top-right .searchBtn { vertical-align: middle; border-right: 1px solid #000000; padding-right: 15px; }




#header2.header-delivery .nav-menu-anim { display: block; width: 26px; margin: 0; }
#header2.header-delivery .submenu > li { visibility: visible; }
#header2.header-delivery .submenu > li:first-child { margin-top: 50px; }
#header2.header-delivery:not(.menu-open):not(.subopen) .submenu, header.shopHeader #header2.header-delivery.open .submenu { width: 174px;  border: solid 1px #000000; background-color: #ffffff; top: 104%; padding: 10px; text-align: right; }

#header2.header-delivery .submenu li > a { font-size: 90%; color: #231f20; font-family: 'Heebo-Medium'; }
#header2.header-delivery .submenu > li.active { background: #efd399; }
#header2.header-delivery .submenu > li:first-child { margin-top: 0; }
#header2.header-delivery .submenu > li:not(.active):not(:last-child):not(.last-item) { border-bottom: 1px solid #c1c1c1; }
#header2.header-delivery .submenu > li:not(.social-mobile):hover, #header .submenu > li:not(.social-mobile):focus { background: #efd399; }
#header2.header-delivery .submenu li.social-mobile:hover, #header2.header-delivery .submenu li.social-mobile:focus { background: transparent; }

#header2.header-delivery .cartBtnText { display: inline-block; vertical-align: middle; font-size: 13px; white-space: nowrap; font-family: 'Heebo-Medium'; margin-right: 10px; }

@media(max-width:1024px) {
    #header2.header-delivery #nav-toggle span:after, #header2.header-delivery header.shopHeader #header2 #nav-toggle span, header.shopHeader #header2 #nav-toggle span:before, header.shopHeader #header2 #nav-toggle-mobile span, header.shopHeader #header2 #nav-toggle-mobile span:after, header.shopHeader #header2 #nav-toggle-mobile span:before { background: #ffffff; }
    header.shopHeader #header2 .header-top { max-width: 100%; }
    header.shopHeader #header2.header-delivery a.logoHeader img { max-width: 150px; }
    header.shopHeader #header2 #nav-toggle span, header.shopHeader #header2 #nav-toggle span:before, header.shopHeader #header2 #nav-toggle-mobile span, header.shopHeader #header2 #nav-toggle-mobile span:after, header.shopHeader #header2 #nav-toggle-mobile span:before { background: #ffffff; }
}

@media(max-width:991px) {
    #header2.header-delivery .submenu > li { padding: 7px; white-space: normal; }
    #header2.header-delivery .submenu li > a { font-size: 95%; }

    #header2.header-delivery .cartBtnText { display: none; }
    #header2.header-delivery .cartBtn button { border: 0; padding: 0; }
    #header2.header-delivery .cartItemsCounter { right: -13px; }
    #header2.header-delivery .navShopBtn button { padding-left: 6px; }
}

@media(max-width:767px) {
    #header2.header-delivery .cartBtn.navShopBtn { margin-right: 4px; }
    #header2.header-delivery .userBtn button { margin: 0; }
    header.shopHeader #header2.header-delivery .header-top-right .searchBtn { padding-right: 5px; }
    header.shopHeader #header2 .header-top-right { width: 56%; }
    header.shopHeader #header2 a.logoHeader { width: 42%; }
    header.shopHeader #header2.header-delivery a.logoHeader img { max-width: 90%; vertical-align: middle; }
    header.shopHeader #header2.header-delivery .phone-icon { position: relative; left: auto; top: auto; display: inline-block; vertical-align: middle; margin-right: 5px; }
    header.shopHeader #header2.header-delivery .phone-icon a { color: #000000; font-size: 90%; }
    header.shopHeader #header2 .menu-nav { height: 37px; }
    header.shopHeader #header2 .header-top-left { display: none; }
    header.shopHeader #header2 .menu-nav { order: -1; }
    header.shopHeader #header2 .header-top .phone-icon.mobileRef { order: -1; }
    header.shopHeader #header2 .header-top .userBtn.navShopBtn { margin-right: auto; }
}

*/
