{block name="et-menu-styles"}
    {if $etMenuSettings.customColorsEnabled}
        <style type="text/css">
            {if !empty($etMenuSettings.colorBackground)}
            #et-menu-main-wrapper.bg-fullsize,
            #et-menu-main-wrapper.bg-boxed > .container:not(.et-menu-main-content) {
                background-color: {$etMenuSettings.colorBackground};
            }
            {/if}

            {if !empty($etMenuSettings.colorBackground) || !empty($etMenuSettings.colorFont) || !empty($etMenuSettings.colorPartingLine)}
            #et-menu-main-wrapper .et-menu-item,
            #et-menu-main-wrapper .et-menu-overflow-trigger {
            {if $etMenuSettings.colorBackground !== ''} background-color: {$etMenuSettings.colorBackground};{/if}
            {if $etMenuSettings.colorFont !== ''} color: {$etMenuSettings.colorFont};{/if}
            {if $etMenuSettings.colorPartingLine} border-color: {$etMenuSettings.colorPartingLine}{/if}
            }
            {/if}

            {if !empty($etMenuSettings.colorFont)}
            #et-menu-main-wrapper .et-menu-main-search .nav-link,
            #et-menu-main-wrapper .et-menu-main-currency-language .nav-link,
            #et-menu-main-wrapper .et-menu-main-account .nav-link,
            #et-menu-main-wrapper .et-menu-main-wishlist .nav-link,
            #et-menu-main-wrapper .et-menu-main-basket .nav-link {
                color: {$etMenuSettings.colorFont};
            }
            {/if}

            {if !empty($etMenuSettings.colorMobileItemFont)}
            #et-menu-mobile-wrapper .et-menu-item {
                color: {$etMenuSettings.colorMobileItemFont};
            }
            {/if}

            {if !empty($etMenuSettings.colorMobileItemBackground)}
            #et-menu-mobile-wrapper .et-menu-item-link {
                background-color: {$etMenuSettings.colorMobileItemBackground};
            }
            {/if}
            {if !empty($etMenuSettings.colorBackgroundHover) || !empty($etMenuSettings.colorFontHover)}
            #et-menu-main-wrapper .et-menu-item:focus,
            #et-menu-main-wrapper .et-menu-item:hover,
            #et-menu-main-wrapper .et-menu-item:active,
            #et-menu-main-wrapper .et-menu-item.et-menu-open,
            #et-menu-main-wrapper .et-menu-overflow-trigger:focus,
            #et-menu-main-wrapper .et-menu-overflow-trigger:hover,
            #et-menu-main-wrapper .et-menu-overflow-trigger:active {
            {if $etMenuSettings.colorBackgroundHover !== ''} background-color: {$etMenuSettings.colorBackgroundHover};{/if}
            {if $etMenuSettings.colorFontHover !== ''} color: {$etMenuSettings.colorFontHover};{/if}
            }
            {/if}

            {if !empty($etMenuSettings.colorBottomBar)}
            #et-menu-main-wrapper.et-hover-style-bottomBar .et-menu-item:after,
            #et-menu-main-wrapper.et-hover-style-bottomBar .et-menu-overflow-trigger:after {
                border-color: {$etMenuSettings.colorBottomBar};
            }
            {/if}

            {if !empty($etMenuSettings.colorFontHover)}
            #et-menu-main-wrapper .et-menu-main-search .nav-link:focus,
            #et-menu-main-wrapper .et-menu-main-search .nav-link:hover,
            #et-menu-main-wrapper .et-menu-main-search .nav-link:active,
            #et-menu-main-wrapper .et-menu-main-currency-language .nav-link:focus,
            #et-menu-main-wrapper .et-menu-main-currency-language .nav-link:hover,
            #et-menu-main-wrapper .et-menu-main-currency-language .nav-link:active,
            #et-menu-main-wrapper .et-menu-main-account .nav-link:focus,
            #et-menu-main-wrapper .et-menu-main-account .nav-link:hover,
            #et-menu-main-wrapper .et-menu-main-account .nav-link:active,
            #et-menu-main-wrapper .et-menu-main-wishlist .nav-link:focus,
            #et-menu-main-wrapper .et-menu-main-wishlist .nav-link:hover,
            #et-menu-main-wrapper .et-menu-main-wishlist .nav-link:active,
            #et-menu-main-wrapper .et-menu-main-basket .nav-link:focus,
            #et-menu-main-wrapper .et-menu-main-basket .nav-link:hover,
            #et-menu-main-wrapper .et-menu-main-basket .nav-link:active {
                color: {$etMenuSettings.colorFontHover};
            }
            {/if}

            {if !empty($etMenuSettings.colorMobileItemFontHover)}
            #et-menu-mobile-wrapper .et-menu-item:focus,
            #et-menu-mobile-wrapper .et-menu-item:hover,
            #et-menu-mobile-wrapper .et-menu-item:active,
            #et-menu-mobile-wrapper .et-menu-item.et-menu-open {
                color: {$etMenuSettings.colorMobileItemFontHover};
            }
            {/if}

            {if !empty($etMenuSettings.colorMobileItemBackgroundHover)}
            #et-menu-mobile-wrapper .et-menu-item-link:focus,
            #et-menu-mobile-wrapper .et-menu-item-link:hover,
            #et-menu-mobile-wrapper .et-menu-item-link:active,
            #et-menu-mobile-wrapper .et-menu-item.et-menu-open .et-menu-item-link {
                background-color: {$etMenuSettings.colorMobileItemBackgroundHover};
            }
            {/if}

            {if !empty($etMenuSettings.colorContentBackground) || !empty($etMenuSettings.colorContentFont)}
            #et-menu-main-content,
            #et-menu-main-content .container,
            #et-menu-main-content .container-fluid {
            {if $etMenuSettings.colorContentBackground !== ''} background-color: {$etMenuSettings.colorContentBackground};{/if}
            {if $etMenuSettings.colorContentFont !== ''} color: {$etMenuSettings.colorContentFont};{/if}
            }
            {/if}

            {if !empty($etMenuSettings.colorMobileContentBackground) || !empty($etMenuSettings.colorMobileContentFont)}
            #et-menu-mobile-content,
            #et-menu-mobile-content .container,
            #et-menu-mobile-content .container-fluid {
            {if $etMenuSettings.colorMobileContentBackground !== ''} background-color: {$etMenuSettings.colorMobileContentBackground};{/if}
            {if $etMenuSettings.colorMobileContentFont !== ''} color: {$etMenuSettings.colorMobileContentFont};{/if}
            }
            {/if}

            {if !empty($etMenuSettings.colorMobileContentBackground) || !empty($etMenuSettings.colorMobileContentFont)}
            #et-menu-mobile-content a {
            {if $etMenuSettings.colorMobileContentBackground !== ''} background-color: {$etMenuSettings.colorMobileContentBackground};{/if}
            {if $etMenuSettings.colorMobileContentFont !== ''} color: {$etMenuSettings.colorMobileContentFont};{/if}
            }
            {/if}

            {if !empty($etMenuSettings.colorContentBackgroundHover) || !empty($etMenuSettings.colorContentFontHover)}
            #et-menu-main-content a:focus,
            #et-menu-main-content a:hover,
            #et-menu-main-content a:active {
            {if $etMenuSettings.colorContentBackgroundHover !== ''} background-color: {$etMenuSettings.colorContentBackgroundHover};{/if}
            {if $etMenuSettings.colorContentFontHover !== ''} color: {$etMenuSettings.colorContentFontHover};{/if}
            }
            {/if}

            {if !empty($etMenuSettings.colorMobileContentBackgroundHover) || !empty($etMenuSettings.colorMobileContentFontHover)}
            #et-menu-mobile-content a:focus,
            #et-menu-mobile-content a:hover,
            #et-menu-mobile-content a:active {
            {if $etMenuSettings.colorMobileContentBackgroundHover !== ''} background-color: {$etMenuSettings.colorMobileContentBackgroundHover};{/if}
            {if $etMenuSettings.colorMobileContentFontHover !== ''} color: {$etMenuSettings.colorMobileContentFontHover};{/if}
            }
            {/if}

            {if !empty($etMenuSettings.colorBottomPartingLine)}
            #et-menu-main-wrapper {
                border-bottom-color: {$etMenuSettings.colorBottomPartingLine};
            }
            {/if}

            {if !empty($etMenuSettings.colorMobileHeaderBackground) || !empty($etMenuSettings.colorMobileHeaderFont)}
            #et-menu-mobile-wrapper .et-menu-mobile-header {
            {if !empty($etMenuSettings.colorMobileHeaderBackground)} background-color: {$etMenuSettings.colorMobileHeaderBackground};{/if}
            {if !empty($etMenuSettings.colorMobileHeaderFont)} color: {$etMenuSettings.colorMobileHeaderFont};{/if}
            }
            {/if}

            {if !empty($etMenuSettings.colorMobileFooterBackground) || !empty($etMenuSettings.colorMobileFooterFont)}
            #et-menu-mobile-wrapper .et-menu-mobile-footer {
            {if !empty($etMenuSettings.colorMobileFooterBackground)} background-color: {$etMenuSettings.colorMobileFooterBackground};{/if}
            {if !empty($etMenuSettings.colorMobileFooterFont)} color: {$etMenuSettings.colorMobileFooterFont};{/if}
            }
            {/if}

            {if !empty($etMenuSettings.colorMobileBackground)}
            #et-menu-mobile-wrapper .et-menu-mobile-items,
            #et-menu-mobile-wrapper .et-mobile-menu {
                background-color: {$etMenuSettings.colorMobileBackground};
            }
            {/if}

            {if !empty($etMenuSettings.colorContentBorder)}
            #et-menu-main-content {
                border-color: {$etMenuSettings.colorContentBorder};
            }
            {/if}
        </style>
    {/if}
{/block}

{* NOTE: We CANNOT use mobile detect to show only one of the menus, because e.g. iPad Pro is mobile, but is on the LG breakpoint in landscape mode - requiring the desktop menu to be shown. *}

{* DESKTOP / MAIN MENU *}
{et_isPencilModeEnabled assign='adminPencilModeEnabled'}
{et_isShopVersionAtLeast value="5.5.0-rc.1" assign='shopIsAtLeast55'}
{block name="et-menu-main-wrapper"}
    <div id="et-menu-main-wrapper"
         data-menu-open-on="{if $etMenuSettings.openOnHover}hover{else}click{/if}"
         data-menu-overflow-mode="{$etMenuSettings.overflowMode}"
         data-menu-hover-intent="{if $etMenuSettings.openOnHover && isset($etMenuSettings.hoverIntentEnabled) && $etMenuSettings.hoverIntentEnabled}true{else}false{/if}"
         class="d-none d-lg-block et-menu et-menu-main et-hover-style-{$etMenuSettings.hoverStyle} bg{if $etMenuSettings.size === 'fullsizeBoxed' || $etMenuSettings.size === 'fullsize'}-fullsize{else}-boxed{/if}{if $etMenuSettings.displayPartingLine} parting-line-enabled{/if}{if $etMenuSettings.centerMode} center-mode-enabled{/if}{if $etMenuSettings.sticky} et-sticky{/if}{if JTL\Shop::isAdmin(true) && $adminPencilModeEnabled} et-admin{/if}"
         role="menubar">
        {block name="et-menu-main"}
            <div class="{block name="et-menu-main-container-class"}container{if $etMenuSettings.size === 'fullsize'}-fluid{/if}{/block}">
                <div class="row">
                    {block name="et-menu-main-left"}
                        <div class="et-menu-main-left">
                            {if $etMenuSettings.logoSource !== 'none'}
                                {block name='et-menu-main-logo'}
                                    {if isset($etMenuSettings.logoMaxHeight) && (!empty($etMenuSettings.logoMaxHeight.xs) || !empty($etMenuSettings.logoMaxHeight.sm) || !empty($etMenuSettings.logoMaxHeight.md) || !empty($etMenuSettings.logoMaxHeight.lg) || !empty($etMenuSettings.logoMaxHeight.xl))}
                                        {et_getGlobalSettings assign="etGlobalSettings"}
                                        <style>
                                        {if !empty($etMenuSettings.logoMaxHeight.xs)} @media(max-width:{$etGlobalSettings.breakpoints.xsMax}px) { #et-menu-main-wrapper .et-menu-main-logo img { max-height: {$etMenuSettings.logoMaxHeight.xs}px; width: auto; } }{/if}
                                        {if !empty($etMenuSettings.logoMaxHeight.sm)} @media(min-width:{$etGlobalSettings.breakpoints.smMin}px) and (max-width:{$etGlobalSettings.breakpoints.smMax}px) { #et-menu-main-wrapper .et-menu-main-logo img { max-height: {$etMenuSettings.logoMaxHeight.sm}px; width: auto; } }{/if}
                                        {if !empty($etMenuSettings.logoMaxHeight.md)} @media(min-width:{$etGlobalSettings.breakpoints.mdMin}px) and (max-width:{$etGlobalSettings.breakpoints.mdMax}px) { #et-menu-main-wrapper .et-menu-main-logo img { max-height: {$etMenuSettings.logoMaxHeight.md}px; width: auto; } }{/if}
                                        {if !empty($etMenuSettings.logoMaxHeight.lg)} @media(min-width:{$etGlobalSettings.breakpoints.lgMin}px) and (max-width:{$etGlobalSettings.breakpoints.lgMax}px) { #et-menu-main-wrapper .et-menu-main-logo img { max-height: {$etMenuSettings.logoMaxHeight.lg}px; width: auto; } }{/if}
                                        {if !empty($etMenuSettings.logoMaxHeight.xl)} @media(min-width:{$etGlobalSettings.breakpoints.xlMin}px) { #et-menu-main-wrapper .et-menu-main-logo img { max-height: {$etMenuSettings.logoMaxHeight.xl}px; width: auto; } }{/if}
                                        </style>
                                    {/if}
                                    <div class="et-menu-main-logo" itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
                                        <meta itemprop="name" content="{$meta_publisher|strip_tags|escape:'html'}" />
                                        <meta itemprop="url" content="{if isset($ShopHomeURL)}{$ShopHomeURL}{else}{$ShopURL}{/if}">
                                        <meta itemprop="logo" content="{$ShopLogoURL}">
                                        <a class="link-discreet no-text-decoration" href="{if isset($ShopHomeURL)}{$ShopHomeURL}{else}{$ShopURL}{/if}" title="{$Einstellungen.global.global_shopname}">
                                            {if $etMenuSettings.logoSource === 'standard' && isset($ShopLogoURL)}
                                                {image src=$ShopLogoURL
                                                alt=$Einstellungen.global.global_shopname
                                                id="shop-logo-menu-main"
                                                class="img-responsive"
                                                }
                                            {elseif $etMenuSettings.logoSource === 'single' && $etMenuSettings.logoSingle.src !== ''}
                                                {image src=$etMenuSettings.logoSingle.src webp=!empty($etMenuSettings.logoSingle.srcWebP)
                                                alt=$Einstellungen.global.global_shopname
                                                id="shop-logo-menu-main"
                                                class="img-responsive"
                                                }
                                            {elseif $etMenuSettings.logoSource === 'breakpoint' && !empty($etMenuSettings.logoBreakpoint)}
                                                {include file='widgets/base/breakpoint_image.tpl' id='shop-logo-menu-main' image=$etMenuSettings.logoBreakpoint alt=$Einstellungen.global.global_shopname webp=true}
                                            {else}
                                                {* No Logo configured *}
                                            {/if}
                                        </a>
                                    </div>
                                {/block}
                            {/if}
                        </div>
                    {/block}
                    {block name="et-menu-main-center"}
                        <div class="col et-menu-main-center">
                            <div class="row menu-item-row">
                                {if $etMenuSettings.overflowMode === 'nowrap'}<div class="et-menu-overflow-trigger"><i class="et-closed {et_getIcon key="collapseClosed"}"></i><i class="et-open {et_getIcon key="collapseOpen"}"></i></div>{/if}
                                {et_renderGrid id="menu_main" context=['menuType' => 'main']}
                            </div>
                        </div>
                    {/block}
                    {block name="et-menu-main-right"}
                        <div class="et-menu-main-right">
                            {if $etMenuSettings.searchEnabled}
                                {block name='et-menu-main-search'}
                                    <div class="et-menu-main-search">
                                        <a class="et-menu-main-search-toggle nav-link">
                                            <i class="{et_getIcon key='search'}"></i>
                                        </a>
                                        <div class="et-menu-main-search-form" style="display:none;">
                                            {include file='layout/header_nav_search.tpl' idPostFix='-menu-main'}
                                        </div>
                                    </div>
                                {/block}
                            {/if}
                            {if $etMenuSettings.currencyLanguageSelectEnabled}
                                {block name='et-menu-main-currency-language'}
                                    <div class="et-menu-main-currency-language">
                                        {include file='snippets/language_dropdown.tpl'}
                                        {include file='snippets/currency_dropdown.tpl'}
                                    </div>
                                {/block}
                            {/if}
                            {if $etMenuSettings.accountBasketEnabled}
                                {block name='et-menu-main-account'}
                                    <div class="et-menu-main-account">
                                        {include file='layout/header_shop_nav_account.tpl' idPostFix='-menu-main'}
                                    </div>
                                {/block}
                            {/if}
                            {if $etMenuSettings.wishlistEnabled}
                                {block name='et-menu-main-wishlist'}
                                    <div class="et-menu-main-wishlist">
                                        {include file='layout/header_shop_nav_wish.tpl' idPostFix='-menu-main'}
                                    </div>
                                {/block}
                            {/if}
                            {if $etMenuSettings.accountBasketEnabled}
                                {block name='et-menu-main-basket'}
                                    <div class="et-menu-main-basket{if $etMenuSettings.basketAmountEnabled} et-main-menu-basket-amount-enabled{/if}">
                                        {include file='basket/cart_dropdown_label.tpl' idPostFix='-menu-main'}
                                    </div>
                                {/block}
                            {/if}
                        </div>
                    {/block}
                </div>
            </div>
        {/block}
        <div id="et-menu-main-content" class="et-menu-main-content{if isset($etMenuSettings.displayContentBorder) && $etMenuSettings.displayContentBorder} et-border-enabled{/if}" style="display:none;">{* This is the main menu dropdown / popup - its content and display is controlled by JS. *}</div>
        {if JTL\Shop::isAdmin(true) && $adminPencilModeEnabled}<a href="{et_getPluginBaseUrl}#/area/menu/grid/{if $isMobile}mobile{else}main{/if}" title="{et_language key="et360_admin_edit_widget"}" class="et-admin-link" target="_blank"><i class="fas fa-pen"></i></a>{/if}
    </div>
{/block}

{* MOBILE MENU *}
{block name="et-menu-mobile-wrapper"}
    <div id="et-menu-mobile-wrapper" class="et-menu-mobile-wrapper d-block d-sm-block d-md-block d-lg-none" data-menu-footer-enabled="{if $etMenuSettings.footerInMobileEnabled}true{else}false{/if}" role="navigation">
        <div class="et-menu et-menu-mobile">
            {block name="et-menu-mobile"}
                {block name="et-menu-mobile-header"}
                    <div class="container-fluid et-menu-mobile-header">
                        <div class="row">
                            {block name="et-menu-mobile-header-logo"}
                                <div class="col">
                                    <div class="et-menu-mobile-logo">
                                        {* Note: JS tries to instead move LOGO from header / #logo in here when the menu is opened *}
                                        {if isset($ShopLogoURL)}
                                            {image src=$ShopLogoURL
                                                alt=$Einstellungen.global.global_shopname
                                                id="shop-logo-mobile-menu"
                                                class="img-responsive"
                                                lazy=true
                                            }
                                        {else}
                                            <span class="h1">{$Einstellungen.global.global_shopname}</span>
                                        {/if}
                                    </div>
                                </div>
                            {/block}
                            {block name="et-menu-mobile-header-close"}
                                <div class="col">
                                    <div class="et-menu-mobile-close">
                                        <div class="et-menu-mobile-close-trigger" data-toggle-mobile-menu tabindex="0" role="button" aria-label="{if $shopIsAtLeast55}{lang key="close" section="aria"}{else}Close{/if}">
                                            <i class="{et_getIcon key='close'}"></i>
                                        </div>
                                    </div>
                                </div>
                            {/block}
                        </div>
                    </div>
                {/block}
                {block name="et-menu-mobile-item-row"}
                    <div class="{block name="et-menu-mobile-container-class"}et-menu-mobile-items container-fluid{/block}">
                        <div class="row menu-item-row">
                            {* Note: Mobile may be rendered elsewhere, if necessary *}
                            {et_renderGrid id="menu_mobile" fallbackId="menu_main" context=['menuType' => 'mobile']}
                        </div>
                    </div>
                {/block}
                {block name="et-menu-mobile-footer"}
                    <div class="et-menu-mobile-footer">
                        {* Account, Wishlist, Comparelist *}
                        {block name="et-menu-mobile-account-wishlist-compare"}
                            <div class="et-menu-mobile-account-wishlist-compare">
                                <div class="row">
                                    <div class="col">
                                        <a class="link-discreet" href="{get_static_route id='jtl.php' secure=true}" title="{lang key='myAccount' section='global'}"><i class="{et_getIcon key='login'}"></i></a>
                                    </div>
                                    {if $Einstellungen.global.global_wunschliste_anzeigen === 'Y'}
                                        <div class="col">
                                            <a class="link-discreet" href="{get_static_route id='wunschliste.php' secure=true}" title="{lang key='goToWishlist' section='global'}"><i class="{et_getIcon key='wishlist'}"></i></a>
                                        </div>
                                    {/if}
                                    {if !empty($smarty.session.Vergleichsliste->oArtikel_arr)}
                                        <div class="col">
                                            <a class="link-discreet" href="{get_static_route id='vergleichsliste.php' secure=true}" title="{lang key='goToCompare' section='global'}"><i class="{et_getIcon key='comparelist'}"></i></a>
                                        </div>
                                    {/if}
                                </div>
                            </div>
                        {/block}
                        {* Language, Currency selection *}
                        {if (isset($smarty.session.Sprachen) && count($smarty.session.Sprachen) > 1) || (isset($smarty.session.Waehrungen) && count($smarty.session.Waehrungen) > 1)}
                            {block name="et-menu-mobile-language-currency"}
                                <div class="et-menu-mobile-language-currency">
                                    <div class="row">
                                        {if isset($smarty.session.Sprachen) && count($smarty.session.Sprachen) > 1}
                                            <div class="col">
                                                {include file='snippets/language_dropdown.tpl'}
                                            </div>
                                        {/if}
                                        {if isset($smarty.session.Waehrungen) && count($smarty.session.Waehrungen) > 1}
                                            <div class="col">
                                                {include file='snippets/currency_dropdown.tpl'}
                                            </div>
                                        {/if}
                                    </div>
                                </div>
                            {/block}
                        {/if}
                        {block name="et-menu-mobile-footer-placeholder"}
                            <div class="et-menu-mobile-footer-placeholder">
                                {* This is filled dynamically when the mobile menu is opened for the first time - the #footer will be mapped into this *}
                            </div>
                        {/block}
                    </div>
                {/block}

                {block name="et-menu-mobile-content"}
                    <div id="et-menu-mobile-content" class="et-menu-mobile-content">
                        <div class="container-fluid et-menu-mobile-content-header">
                            <div class="row">
                                <div class="col-2">
                                    <div class="et-menu-mobile-content-back">
                                        <div class="et-menu-mobile-content-back-trigger">
                                            <i class="{et_getIcon key='navigationPrevious'}"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-10 et-menu-mobile-content-title et-menu-item-title h3">
                                    {* Will be set dynamically by JS *}
                                </div>
                            </div>
                        </div>
                        <div class="container-fluid et-menu-mobile-content-container">
                            {* This is the mobile menu content display - its content and display is controlled by JS. *}
                        </div>
                    </div>
                {/block}
            {/block}
        </div>
    </div>
{/block}