<style>
    :root {
        --color-secundary-header: {{ section.settings.header_background_secundary_color }};
        --color-secundary-header-text: {{ section.settings.header_background_secundary_color_text }};
        --color-primary-darken-header: {{ section.settings.header_background_secundary_color | color_darken: 10  }};
        --color-background: {{ section.settings.header_background_color  }};
        --color-background-text: {{ section.settings.header_background_text  }};
        --button-background-mobile: {{ section.settings.button_background_mobile }};
        --button-background-mobile-text: {{ section.settings.button_background_mobile_text }};
    }
    
    .container-header {
        margin: 0 auto;
        max-width: 1600px;
    }

    /*Predictive search*/
    .form-input-wrapper.show-results .form-input {
        border-bottom-color: #fff;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    #predictive-search {
        display: none;
        position: absolute;
        z-index: 1;
        width: 100%;
    }
    .form-input-wrapper.show-results #predictive-search {
        display: block;
    }

    /*GENERAL*/
    .header-alternative a:hover {
        text-decoration: underline;
    }
    .body-backdrop {
        position: fixed;
        display: none;
        width: 100vw;
        height: 100vh;
        z-index: 12;
        background-color: #33333399;
    }
    .header-top-row-link, .content-control-link {
        color: var(--color-background-text);
    }

    /* HEADER TOP ROW */
    .header-top-row {
        display: flex;
        padding: 0 55px;
        font-size: 12px;
        font-weight: 400;
        color: var(--color-primary-darken-header);
    }
    .header-top-row-list {
        display: flex;
        list-style: none;
        gap: 20px;
        padding: 0;
        margin-top: 18px;
    }

    /* HEADER MAIN ROW */
    .header-main {
        background-color: var(--color-background);
    }
    .header-main-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        padding: 18px 55px;
    }
    .header-main-row-wrapper.sticky {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background-color: #F7F7F7;
        z-index: 11;
        animation: smoothScroll 1s forwards;
        box-shadow: 0 20px 30px 0 rgb(28 9 80 / 5%);
        width: 100%;
    }
    .header-logo svg {
        display: none;
        fill: var(--color-secundary-header);;
        cursor: pointer;
    }
    .header-logo {
        display: flex;
        gap: 10px;
        text-transform: uppercase;
        font-size: 24px;
        color: var(--color-secundary-header);
        font-weight: 700;
    }
    .header-main-logo {
        color: var(--color-secundary-header);
    }
    .form-input {
        display: flex;
        align-items: center;
        position: relative;
        border: 1px solid #D9D9D9;
        border-radius: 5px;
        background-color: #fff;
        padding: 2px 8px;
        margin: 0;
    }
    .header-search {
        z-index: 11;
        flex-grow: 0.7;
        max-width: 520px;
        position: relative;
    }
    #Search {
        width: calc(100% - 30px);
        height: 30px;
        outline: none;
        border: none;
        background: none;
        font-size: 12px;
    }
    .button-search-submit {
        position: absolute;
        right: 10px;
        border: none;
        background: none;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .header-login {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }
    .header-login-text, .header-login-text a {
        color: var(--color-background-text);
        font-size: 12px;
    }
    .header-login-text .bold {
        font-weight: 700;
    }
    .header-login path {
        stroke: var(--color-background-text);;
    }
    .cart {
        position: relative;
    }
    .cart path {
        fill: var(--color-background-text);
    }
    .cart-counter-items {
        position: absolute;
        top: -3px;
        right: -3px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--color-primary-darken-header);
        width: 15px;
        height: 15px;
        border-radius: 50%;
        font-size: 10px;
        color: #fff;
    }

    /*HEADER MENU*/
    .header-menu {
        background-color: var(--color-secundary-header);
    }

    .content-header-menu {
        padding: 0 55px;
    }
    .header-menu-list {
        overflow: visible !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        color: var(--color-secundary-header-text);
        font-weight: 400;
        text-transform: uppercase;
        overflow-x: auto;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .menu-item {
        display: flex;
        align-items: center;
        min-width: max-content;
        padding: 0 10px;
        gap: 10px;
        height: 35px;
        color: var(--color-secundary-header-text);
        position: relative;
    }
    .menu-item-link, .menu-item-icon {
        display: flex;
        align-items: center;
        height: 100%;
        color: var(--color-secundary-header-text);
        font-size: 12px;
    }
    .menu-item-icon {
        padding: 0 6px;
        transition: all .3s .1s;
    }
    .menu-item.item-active {
        font-size: 15px;
        margin-right: 20px;
        background-color: var(--color-primary-darken-header);
    }
    .content-header-menu ul::-webkit-scrollbar {
        display: none;
    }
    .menu-item:hover {
        background-color: var(--color-primary-darken-header);
        cursor: pointer;
    }

    /*ICONE HAMBURGUER*/
    #menu-item-active-icon {
        width: 20px;
        height: 15px;
        position: relative;
        margin: 50px auto;
        transform: rotate(0deg);
        transition: .5s ease-in-out;
        cursor: pointer;
    }

    #menu-item-active-icon span {
        display: block;
        position: absolute;
        height: 2px;
        width: 100%;
        background: var(--color-secundary-header-text);
        border-radius: 9px;
        opacity: 1;
        left: 0;
        transform: rotate(0deg);
        transition: .25s ease-in-out;
    }

    #menu-item-active-icon span:nth-child(1) {
        top: 0px;
    }
    #menu-item-active-icon span:nth-child(2),#menu-item-active-icon span:nth-child(3) {
        top: 6px;
    }
    #menu-item-active-icon span:nth-child(4) {
        top: 12px;
    }
    .menu-item.show #menu-item-active-icon span:nth-child(1) {
        top: 6px;
        width: 0%;
        left: 50%;
    }
    .menu-item.show #menu-item-active-icon span:nth-child(2) {
        transform: rotate(45deg);
    }
    .menu-item.show #menu-item-active-icon span:nth-child(3) {
        transform: rotate(-45deg);
    }
    .menu-item.show #menu-item-active-icon span:nth-child(4) {
        top: 6px;
        width: 0%;
        left: 50%;
    }


    /*MENU MOBILE */
    .menu-wrapper .menu-sidebar {
        color: var(--color-secundary-header-text);
        font-size: 15px;
        background-color: #fff;
        position: fixed;
        top: 0;
        left: -80%;
        width: 80%;
        height: 100%;
        z-index: 12;
        transition: all 0.5s ease;
    }

    .content .content-control .content-control-link{
        color: var(--color-secundary-header-text);
    }
    body.active .menu-wrapper .menu-sidebar {
        left: 0;
    }
    body.active .body-backdrop {
        display: flex;
    }
    .active {
        overflow: hidden;
    }
    .menu-header {
        background-color: var(--color-secundary-header);
        padding: 15px;
        font-weight: 600;
        line-height: 2.5;
    }
    .content-control {
        display: flex;
        border-top: 1px solid #ccc;
        gap: 20px;
    }

    .content-menu-header {
        display: flex;
        justify-content: space-between;
    }
    .menu-button-guest {
        background-color: var(--button-background-mobile);
        border-radius: 4px;
        padding: 4px 12px;
        border: none;
        width: 100%;
        font-size: 16px;
        font-weight: 600;
        color: var(--button-background-mobile-text);
    }
    .menu-button-customer {
        background-color: #fff;
        border: 2px solid var(--color-secundary-header);
        border-radius: 4px;
        padding: 4px 12px;
        width: 100%;
        font-size: 16px;
        font-weight: 600;
        color: var(--color-secundary-header);
    }
    .menu-content {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 15px;
        background-color: var(--color-background);
    }
    .menu-links-list {
        list-style: none;
        display: flex;
        flex-direction: column;
        padding: 0;
        color: var(--color-background-text);
        gap: 15px;
        margin: 20px 0;
    }
    .accordion-item-icon {
        fill: var(--color-background-text);
        transition: all 0.35s;
    }
    .accordion-subitem-icon {
        fill: #505050;
        transition: all 0.35s;
    }
    .menu-links-subtitle {
        font-size: 16px;
        font-weight: 700;
    }
    .close-button {
        display: flex;
        align-items: center;
        cursor: pointer;
    }
    .close-button svg {
        fill: var(--color-secundary-header-text);
    }
    .content {
        min-width: 80%;
    }

    /*Accordion*/
    .tab input {
        display: none;
    }
    .tab {
        overflow: hidden;
        flex-wrap: wrap;
    }
    .tab-label {
        display: flex !important;
        justify-content: space-between;
        cursor: pointer;
        width: 100%;
        margin: 0;
    }
    .subitem-link {
        font-size: 12px;
        font-weight: 400;
        color: var(--color-background-text);
    }
    .item-link {
        font-size: 12px;
        font-weight: 400;
        color: var(--color-background-text);
    }
    .menu-links-list .item-link {
        font-size: 15px;
    }
    .menu-links-list .subitem-link {
        font-size: 13px;
    }

    .tab-content {
        max-height: 0;
        padding: 0px;
        flex-basis: 100%;
        background: white;
        transition: all 0.35s;
    }
    input:checked ~ .tab-content {
        max-height: 100vh;
        padding: 7px 0;
    }
    input:checked + .tab-label svg {
        transform: rotate(90deg);
    }


    /*tooltip-header MENU*/
    .tooltip-header {
        position: absolute;
        top: 110%;
        left: 0;
        width: calc(100% + 20px);
        border-radius: 4px;
        background-color: var(--color-background);
        box-sizing: content-box;
        transition: all .3s;
        z-index: 11;
        padding: 0 5px;
        max-height: 0;
        overflow: hidden;
        text-transform: none;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    }

    .tooltip-header .tab {
        padding: 0 7px;
        color: #505050;
        font-size: 12px;
        margin-top: 5px;
    }

    .menu-links .tab {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        cursor: pointer;
    }
    .menu-item.show .tooltip-header {
        padding: 10px 5px;
        max-height: 100vh;
    }
    .menu-item.show .menu-item-icon {
        transform: rotate(90deg);
    }

    .barraColorida {
        display: block!important;
        height: 6px;
        width: 100%;
        background-image: linear-gradient(to right,{{ section.settings.background1 }}, {{ section.settings.background2 }}, {{ section.settings.background3 }},{{ section.settings.background4 }});">
      }
    /*RESPONSIVE*/
    @media only screen and (max-width: 780px) {
        .header-menu {
            display: none;
        }

        .header-main-row {
            padding: 18px 12px;
        }
        .content-header-menu {
            padding: 0px 12px;
        }
        .header-search {
            order: 1;
            max-width: 100%;
            flex-basis: 100%;
        }
        #Search {
            font-size: 12px;
            height: 28px;
        }
        .header-main-row {
            row-gap: 20px;
        }
        .menu-item {
            font-size: 11px;
        }
        .header-top-row, .header-login {
            display: none;
        }
        .header-logo {
            font-size: 18px;
        }
        .cart svg {
            width: 32px;
        }
        .header-logo svg {
            display: block;
        }
        .header-logo.centered {
            width: calc(100% - 32px);
            padding-right: 12px;
        }
        .header-logo.centered > a {
            display: flex;
            justify-content: center;
            width: 100%;
        }
    }
</style>

<div class="body-backdrop" onclick="toggleMenu()"></div>


<div class="header-alternative">
<header>

    <div class="header-main">
        <div>
            {% if section.settings.show_top_row  %}
            {% assign alignment = section.settings.align_top_row %}
            <div class="header-top-row container-header" style="justify-content: {{alignment}};">
                <nav>
                    <ul class="header-top-row-list">
                        {% for block in section.blocks %}
                            {% if block.type == 'text' %}
                            <li>
                                <a class="header-top-row-link" href="{{block.settings.link_top_row}}">
                                    {{block.settings.text_top_row}}
                                </a>
                            </li>
                            {%endif%}
                        {% endfor %}
                    </ul>
                </nav>
            </div>
            {% endif %}

            <div class="header-main-row-wrapper">
                <div class="header-main-row container-header">

                    <div class="header-logo {% if section.settings.centered_mobile_logo %}centered{% endif %}">
                        <svg onclick="toggleMenu()" width="16px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                            <path d="M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z"/>
                        </svg>
                        {% if section.settings.logo %}
                            <a href="{{ routes.root_url }}">
                            {% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
                            <img class=""
                                src="{{ section.settings.logo | img_url: '300x300' }}"
                                alt="{{ logo_alt | escape }}"
                                style="max-width: {{ section.settings.logo_max_width }}px">
                            </a>
                        {% else %}
                            <a class="header-main-logo" href="{{ routes.root_url }}">{{ shop.name }}</a>
                        {% endif %}
                        </div>

                    <div class="header-search">
                        <script src="{{ 'predictive-search.js' | asset_url }}" defer="defer"></script>

                        <predictive-search class="form-input-wrapper">
                            <form class="form-input" action="{{ routes.search_url }}" method="get" role="search">

                                <input
                                id="Search"
                                type="search"
                                placeholder="Busque o que você precisa..."
                                name="q"
                                value="{{ search.terms | escape }}"
                                {% if settings.predictive_search_enabled %}
                                  role="combobox"
                                  aria-expanded="false"
                                  aria-owns="predictive-search-results-list"
                                  aria-controls="predictive-search-results-list"
                                  aria-haspopup="listbox"
                                  aria-autocomplete="list"
                                  autocorrect="off"
                                  autocomplete="off"
                                  autocapitalize="off"
                                  spellcheck="false"
                                {% endif %}
                                />

                                <button class="button-search-submit" type="submit">
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22" height="22" viewBox="0 0 23.041 23.041">
                                        <defs>
                                          <clipPath id="clip-path">
                                            <path id="Caminho_38" data-name="Caminho 38" d="M21-14.459l2.04-2.04-6.48-6.54.24-.42a9.045,9.045,0,0,0,1.44-4.92,8.788,8.788,0,0,0-2.67-6.45A8.788,8.788,0,0,0,9.12-37.5a8.788,8.788,0,0,0-6.45,2.67A8.788,8.788,0,0,0,0-28.38,8.888,8.888,0,0,0,2.67-21.9a8.739,8.739,0,0,0,6.45,2.7,9.269,9.269,0,0,0,4.98-1.5h0l.42-.3ZM9.12-21.18a6.944,6.944,0,0,1-5.1-2.1,6.944,6.944,0,0,1-2.1-5.1,6.944,6.944,0,0,1,2.1-5.1,6.944,6.944,0,0,1,5.1-2.1,6.944,6.944,0,0,1,5.1,2.1,6.975,6.975,0,0,1,2.16,5.1,6.975,6.975,0,0,1-2.16,5.1A6.944,6.944,0,0,1,9.12-21.18Z" transform="translate(0 37.5)" fill="#9a9a9a"/>
                                          </clipPath>
                                          <clipPath id="clip-path-2">
                                            <path id="Caminho_37" data-name="Caminho 37" d="M-230,7.791H138.648V-222H-230Z" transform="translate(230 222)" fill="#9a9a9a"/>
                                          </clipPath>
                                        </defs>
                                        <g id="Grupo_23" data-name="Grupo 23" transform="translate(0 37.5)">
                                          <g id="Grupo_22" data-name="Grupo 22" transform="translate(0 -37.5)" clip-path="url(#clip-path)">
                                            <g id="Grupo_21" data-name="Grupo 21" transform="translate(-141.315 -113.359)" clip-path="url(#clip-path-2)">
                                              <path id="Caminho_36" data-name="Caminho 36" d="M-5-13.315H24.185V-42.5H-5Z" transform="translate(143.243 152.787)" fill="#9a9a9a"/>
                                            </g>
                                          </g>
                                        </g>
                                    </svg>

                                </button>

                                <input name="options[prefix]" type="hidden" value="last">

                            </form>
                            {% if settings.predictive_search_enabled %}
                                <div id="predictive-search" tabindex="-1"></div>
                            {% endif %}
                        </predictive-search>

                    </div>

                    {% if shop.customer_accounts_enabled %}
                    <div class="header-login">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="32" viewBox="0 0 29.079 36.727">
                            <defs>
                                <style>.a{fill:#03c;}.b{fill:none;stroke:#0033c6;stroke-width:2px;}.c{clip-path:url(#a);}.d{fill:#f7f7f7;}</style>
                                <clipPath id="a"><rect class="a" width="29.079" height="14.79"/>
                                </clipPath>
                            </defs>
                            <g transform="translate(0 -1.056)">
                                <path class="b" d="M9.137,0a9.265,9.265,0,0,1,9.137,9.389,9.265,9.265,0,0,1-9.137,9.389A9.265,9.265,0,0,1,0,9.389,9.265,9.265,0,0,1,9.137,0Z" transform="translate(5.401 2.056)"/>
                                <g transform="translate(0 22.994)">
                                    <g class="c">
                                        <path class="b" d="M12.932,0A13.045,13.045,0,0,1,25.864,13.156,13.045,13.045,0,0,1,12.932,26.312,13.045,13.045,0,0,1,0,13.156,13.045,13.045,0,0,1,12.932,0Z" transform="translate(1.605 1.633)"/>
                                    </g>
                                </g>
                            </g>
                        </svg>
                        <div class="header-login-text">
                            {% if customer %}
                                <span>
                                    <div class="bold">
                                        Olá, {{customer.first_name}}
                                    </div>

                                    <a href="{{routes.account_url}}">Minha conta</a>
                                </span>
                            {%else %}
                                <span>
                                    <div class="bold">
                                        <a href="{{routes.account_login_url}}">Entre</a> ou
                                        <a href="{{routes.account_register_url}}">cadastre-se</a>
                                    </div>
                                    Veja seus pedidos
                                </span>
                            {% endif %}
                        </div>
                    </div>
                    {% endif %}

                    <div class="cart">
                        <a href="{{routes.cart_url}}">
                            <svg id="Grupo_17" data-name="Grupo 17" xmlns="http://www.w3.org/2000/svg" height="32" viewBox="0 0 46.318 38">
                                <path id="Caminho_33" data-name="Caminho 33" d="M55.86,105.435c-1.026,2.16-5.535,12.582-6.149,13.546-.071.113-.137.227-.2.336-.6,1.026-1.234,1.815-3.417,1.815H25.257c.435,1.328,1.347,2.963,3.238,2.963H46.53a.964.964,0,1,1,0,1.928H28.494c-2.675,0-4.632-2.094-5.36-5.308-.4-1.772-5.284-18.107-5.634-19.388a2.427,2.427,0,0,0-2.094-1.4H10.964a.964.964,0,0,1,0-1.928h4.443c1.654,0,3.219.09,3.895,1.659a.674.674,0,0,1,.043.128c.194.7,4.24,15.053,5.393,19.411H46.091c1.252,0,1.375-.217,1.749-.855.076-.128.151-.26.241-.4.572-.9,5.053-11.258,6.007-13.272.4-1.04.326-1.607.217-1.768-.071-.1-.3-.165-.619-.165-2.089.033-28.613,0-29.535,0a.967.967,0,0,1,0-1.933h0c.227,0,27.427.033,29.516,0a2.51,2.51,0,0,1,2.226,1C56.47,102.651,56.46,103.87,55.86,105.435ZM27.979,126.977a4.511,4.511,0,1,1-4.509,4.509A4.519,4.519,0,0,1,27.979,126.977Zm0,7.17a2.656,2.656,0,1,0-2.656-2.656A2.659,2.659,0,0,0,27.979,134.147Z" transform="translate(-10 -98)" fill="#0033c6"/>
                                <path id="Caminho_34" data-name="Caminho 34" d="M26.3,124.27a4.09,4.09,0,1,1-4.088,4.088,4.327,4.327,0,0,1,.7-2.283A3.955,3.955,0,0,1,26.3,124.27Zm0,6.5a2.408,2.408,0,1,0-2.408-2.408A2.41,2.41,0,0,0,26.3,130.77Z" transform="translate(11.328 -94.449)" fill="#0033c6"/>
                            </svg>
                            <span class="cart-counter-items cart-count" data-cart-count>{{ cart.item_count }}</span>

                        </a>
                    </div>
                </div>
            </div>


        </div>
    </div>

    <div class="header-menu">
        <div class="content-header-menu container-header">
            <nav>
                <ul class="header-menu-list">
                   {% if section.settings.active_drawer %}
                     <li class="menu-item item-active">
                  <div id="menu-item-active-icon"  class="menu-item-icon" onclick="toggleTooltip(this)">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                        <span>
                            {{section.settings.main_item_menu}}
                        </span>
                    {% endif %}
                        <div class="tooltip-header">
                            <ul>
                                {% for collection in collections %}

                                <li class="tab">
                                    <div class="tab-label">
                                        <a class="item-link" href="{{collection.url }}">
                                            {{collection.title}}
                                        </a>
                                    </div>
                                </li>

                                {%endfor%}
                            </ul>
                        </div>
                    </li>
                    {% for link in linklists[section.settings.main_linklist].links %}
                        {% assign indexFirstLoop = forloop.index0 %}
                        <li class="menu-item" {% if link.link.size > 0 %}  {% endif%} >
                            <a class="menu-item-link" href="{{ link.url }}">{{ link.title }}</a>

                            {% if link.links != blank %}
                            <span class="menu-item-icon" onclick="toggleTooltip(this)">
                                <svg width="7px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">
                                    <path fill="#fff" d="M64 448c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L178.8 256L41.38 118.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25l-160 160C80.38 444.9 72.19 448 64 448z"/>
                                </svg>
                            </span>
                            <div class="tooltip-header">
                                <ul>
                                    {% for child_link in link.links %}
                                    {% assign indexSecondLoop = forloop.index0 %}

                                    <li class="tab">
                                        {% if child_link.links != blank %}
                                        <input type="checkbox" id="item-tooltip-{{indexFirstLoop}}-{{indexSecondLoop}}">
                                        <label class="tab-label" for="item-tooltip-{{indexFirstLoop}}-{{indexSecondLoop}}">
                                            <a class="item-link" href="{{child_link.url}}">
                                                {{child_link.title}}
                                            </a>

                                            <svg class="accordion-item-icon" width="7px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">
                                                <path d="M64 448c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L178.8 256L41.38 118.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25l-160 160C80.38 444.9 72.19 448 64 448z"/>
                                            </svg>
                                        </label>

                                        <div class="tab-content">
                                            <ul>
                                            {% for grandchild_link in child_link.links %}
                                            <li class="tab">
                                                <a class="subitem-link" href="{{grandchild_link.url}}">
                                                    {{grandchild_link.title}}
                                                </a>
                                            </li>
                                            {%endfor%}
                                            </ul>
                                        </div>
                                        {%else%}
                                        <div class="tab-label" for="item-{{forloop.index}}">
                                            <a class="item-link" href="{{child_link.url}}">
                                                {{child_link.title}}
                                            </a>
                                        </div>
                                        {%endif%}
                                    </li>
                                    {%endfor%}
                                </ul>
                            </div>
                            {% endif %}
                        </li>
                    {% endfor %}
                </ul>
            </nav>
        </div>
    </div>
</header>
 
{%- if section.settings.active_bar -%}
    <div class="barraColorida"></div>

{%- endif -%}
  

<style>
  
  </style>
<div class="menu-wrapper">
    <div class="menu-sidebar">
        {% if shop.customer_accounts_enabled %}
            <div class="menu-header">
                <div class="content-menu-header">
                    <div class="close-button" onclick="toggleMenu()">
                        <svg width="18px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>
                    </div>
                    <div class="content">
                        {% if customer %}
                            <div class="content-user">
                                Olá {{customer.first_name}}!
                            </div>
                            <div class="content-control">
                                <a class="content-control-link" href="{{routes.account_login_url}}">
                                    Entrar
                                </a>
                                <a class="content-control-link" href="{{routes.account_register_url}}">
                                    Criar cadastro
                                </a>
                            </div>
                        {% else %}
                            <div class="content-user">
                                Olá visitante!
                            </div>
                            <div class="content-control">
                                <a class="content-control-link" href="{{routes.account_login_url}}">
                                    Entrar
                                </a>
                                <a class="content-control-link" href="{{routes.account_register_url}}">
                                    Criar cadastro
                                </a>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        {% endif %}

        <div class="menu-content">
            {% if shop.customer_accounts_enabled %}
                <div class="menu-button-container">
                    {% if customer %}
                        <a href="{{routes.cart_url}}">
                            <button class="menu-button-customer">
                                Carrinho
                            </button>
                        </a>
                    {%else%}
                        <a href="{{routes.account_logout_url}}">
                            <button class="menu-button-guest">
                                Entrar
                            </button>
                        </a>
                    {%endif%}
                </div>
            {% endif %}

            <div class="menu-links">

                <div class="menu-links-subtitle" style="color: var(--color-background-text)">
                    Departamentos
                </div>
                <ul class="menu-links-list">
                    {% for link in linklists[section.settings.main_linklist_mobile].links %}
                    {% assign indexFirstLoop = forloop.index0 %}

                        {% if link.links != blank %}
                        <li class="tab">
                            <input type="checkbox" id="item-menu-{{indexFirstLoop}}">
                            <label class="tab-label" for="item-menu-{{indexFirstLoop}}">
                                <a class="item-link" href="{{link.url}}">
                                    {{link.title}}
                                </a>
                                <svg class="accordion-item-icon" width="8px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">
                                    <path d="M64 448c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L178.8 256L41.38 118.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25l-160 160C80.38 444.9 72.19 448 64 448z"/>
                                </svg>
                            </label>

                            <div class="tab-content">
                              <ul>
                                {% for child_link in link.links %}
                                {% assign indexSecondLoop = forloop.index0 %}

                                    <li class="tab">
                                        {% if child_link.links != blank %}
                                        <input type="checkbox" id="subitem-menu-{{indexFirstLoop}}-{{indexSecondLoop}}">
                                        <label class="tab-label" for="subitem-menu-{{indexFirstLoop}}-{{indexSecondLoop}}">
                                            <a class="subitem-link" href="{{child_link.url}}">
                                                {{child_link.title}}
                                            </a>

                                            <svg class="accordion-subitem-icon" width="7px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">
                                                <path d="M64 448c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L178.8 256L41.38 118.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25l-160 160C80.38 444.9 72.19 448 64 448z"/>
                                            </svg>
                                        </label>

                                        <div class="tab-content">
                                          <ul>
                                            {%for grandchild_link in child_link.links %}
                                            <li class="tab">
                                                <a class="subitem-link" href="{{grandchild_link.url}}">
                                                    {{grandchild_link.title}}
                                                </a>
                                            </li>
                                            {%endfor%}
                                          </ul>
                                        </div>
                                        {%else%}
                                        <li class="tab">
                                            <div class="tab-label" for="item-{{forloop.index}}">
                                                <a class="subitem-link" href="{{child_link.url}}">
                                                    {{child_link.title}}
                                                </a>
                                            </div>
                                        </li>

                                        {%endif%}
                                    </li>
                                {%endfor%}
                              </ul>
                            </div>
                        </li>
                        {% else %}
                        <li class="tab">
                            <div class="tab-label">
                                <a class="item-link" href="{{link.url}}">
                                    {{link.title}}
                                </a>
                            </div>
                        </li>
                        {%endif%}
                    {% endfor%}
                </ul>
            </div>
        </div>
    </div>
</div>
</div>

<script>
    //Menu mobile
    function toggleMenu() {
        document.querySelector("body").classList.toggle("active")
    }

    //tooltip-header
    function toggleTooltip(element) {
        var items  = document.querySelectorAll('.menu-item')
        for(var i = 0; i < items.length; i++) {
            if(items[i] != element.parentElement) {
                items[i].classList.remove("show")
            }
        }
        element.parentElement.classList.toggle("show")
    }

    //Clicar fora
    window.onclick = function(event) {
        if (!event.target.closest('.menu-item-icon') && !event.target.closest('.tooltip-header') ) {
            var allDropdowns = document.getElementsByClassName("menu-item");
            var i
            for (i = 0; i < allDropdowns.length; i++) {
                var dropdown = allDropdowns[i];
                if (dropdown.classList.contains('show')) {
                    dropdown.classList.remove('show')
                }
            }
        }
    }
</script>


{% if section.settings.sticky == 'Enable' %}
    <script type="lazyload2" defer="defer">
    $(document).ready(function () {

        var stickyHeight = $('.header-main-row-wrapper').height();

        $(window).scroll(function(){
            if ($(window).scrollTop() >= stickyHeight) {
                $('.header-main-row-wrapper').addClass('sticky');
            }
            else {
                $('.header-main-row-wrapper').removeClass('sticky');
            }
        })
    })
    </script>
{% endif %}

{% schema %}
{
  "name": {
    "cs": "Záhlaví",
    "da": "Overskrift",
    "de": "Titel",
    "en": "Header",
    "es": "Encabezado",
    "fi": "Ylätunniste",
    "fr": "En-tête",
    "it": "Header",
    "ja": "ヘッダー",
    "ko": "헤더",
    "nb": "Header",
    "nl": "Koptekst",
    "pl": "Nagłówek",
    "pt-BR": "Cabeçalho",
    "pt-PT": "Cabeçalho",
    "sv": "Rubrik",
    "th": "ส่วนหัว",
    "tr": "Üstbilgi",
    "vi": "Đầu trang",
    "zh-CN": "标头",
    "zh-TW": "標頭"
  },
  "settings": [
    {
      "type": "image_picker",
      "id": "logo",
      "label": {
        "cs": "Obrázek loga",
        "da": "Logobillede",
        "de": "Logo-Foto",
        "en": "Logo image",
        "es": "Logo",
        "fi": "Logokuva",
        "fr": "Image du logo",
        "it": "Immagine del logo",
        "ja": "ロゴ画像",
        "ko": "로고 이미지",
        "nb": "Logobilde",
        "nl": "Afbeelding van logo",
        "pl": "Obraz logo",
        "pt-BR": "Imagem do logotipo",
        "pt-PT": "Imagem do logótipo",
        "sv": "Logobild",
        "th": "รูปภาพโลโก้",
        "tr": "Logo görseli",
        "vi": "Hình ảnh logo",
        "zh-CN": "logo 图片",
        "zh-TW": "標誌圖片"
      }
    },
    {
        "type": "checkbox",
        "id": "centered_mobile_logo",
        "label":"Logo mobile centralizado",        
        "default": false
    },
    {
      "type": "range",
      "id": "logo_max_width",
      "label": {
        "cs": "Šířka vlastního loga",
        "da": "Tilpasset logobredde",
        "de": "Logobreite",
        "en": "Custom logo width",
        "es": "Ancho del logo personalizado",
        "fi": "Mukautetun logon leveys",
        "fr": "Largeur personnalisée du logo",
        "it": "Larghezza logo personalizzato",
        "ja": "ロゴの幅をカスタマイズする",
        "ko": "사용자 지정 로고 폭",
        "nb": "Tilpasset logobredde",
        "nl": "Aangepaste logo-breedte",
        "pl": "Niestandardowa szerokość logo",
        "pt-BR": "Largura do logotipo personalizado",
        "pt-PT": "Largura de logótipo personalizada",
        "sv": "Anpassad logotypsbredd",
        "th": "ความกว้างของโลโก้แบบกำหนดเอง",
        "tr": "Özel logo genişliği",
        "vi": "Chiều rộng logo tùy chỉnh",
        "zh-CN": "自定义 logo 宽度",
        "zh-TW": "自訂商標寬度"
      },
      "min": 50,
      "max": 250,
      "step": 5,
      "unit": "px",
      "default": 150
    },
    {
      "type": "link_list",
      "id": "main_linklist",
      "label": {
        "cs": "Nabídka",
        "da": "Menu",
        "de": "Menü",
        "en": "Menu",
        "es": "Menú",
        "fi": "Valikko",
        "fr": "Menu",
        "it": "Menu",
        "ja": "メニュー",
        "ko": "메뉴",
        "nb": "Meny",
        "nl": "Menu",
        "pl": "Menu",
        "pt-BR": "Menu",
        "pt-PT": "Menu",
        "sv": "Meny",
        "th": "เมนู",
        "tr": "Menü",
        "vi": "Menu",
        "zh-CN": "菜单",
        "zh-TW": "選單"
      },
      "default": "main-menu"
    },
	{
      "type": "link_list",
      "id": "main_linklist_mobile",
      "label": {
        "cs": "Nabídka",
        "da": "Menu",
        "de": "Menü",
        "en": "Menu Mobile",
        "es": "Menú",
        "fi": "Valikko",
        "fr": "Menu",
        "it": "Menu",
        "ja": "メニュー",
        "ko": "메뉴",
        "nb": "Meny",
        "nl": "Menu",
        "pl": "Menu",
        "pt-BR": "Menu Mobile",
        "pt-PT": "Menu",
        "sv": "Meny",
        "th": "เมนู",
        "tr": "Menü",
        "vi": "Menu",
        "zh-CN": "菜单",
        "zh-TW": "選單"
      },
      "default": "main-menu"
    },
    {
        "type": "checkbox",
        "id": "active_drawer",
        "label": "Ativar drawer de coleções",
        "info": "Aqui serão listadas as coleções",
        "default": true
    },
    {
        "type": "text",
        "id": "main_item_menu",
        "label": "Texto item principal do menu",
        "info": "Aqui serão listadas as coleções",
        "default": "Departamentos"
    },
    
    {
      "type": "header",
      "content": "Barra colorida"
    },
    {
        "type": "checkbox",
        "id": "active_bar",
        "label": "Ativar barra colorida",
        "info": "Aqui irá ficar a barra colorida",
        "default": true
    },
    {
      "type": "color",
      "id": "background1",
      "label": "Cor 1",
      "default": "#00FF48"
    },
    {
      "type": "color",
      "id": "background2",
      "label": "Cor 2",
      "default": "#01C6FF"
    },
    {
      "type": "color",
      "id": "background3",
      "label": "Cor 3",
      "default": "#FFA000"
    },
    {
      "type": "color",
      "id": "background4",
      "label": "Cor 4",
      "default": "#C100BE"
    },
	{
		"type":"header",
		"content":"Cores"
	},
    {
        "type":"color",
        "id":"header_background_color",
        "default": "#F7F7F7",
        "label":"Background Principal"
    },
    {
        "type":"color",
        "id":"header_background_text",
        "default": "#000000",
        "label":"Texto e ícones principal"
    },
    {
		"type":"color",
		"id":"header_background_secundary_color",
        "default": "#0033C6",
		"label":"Background secundário"
	},
    {
		"type":"color",
		"id":"header_background_secundary_color_text",
        "default": "#F7F7F7",
		"label":"Texto e ícones secundário"
	},
	{
		"type":"color",
		"id":"button_background_mobile",
        "default": "#51A559",
		"label":"Botão mobile"
	},
    {
		"type":"color",
		"id":"button_background_mobile_text",
        "default": "#FFF",
		"label":"Botão mobile texto"
	},
    {
        "type": "header",
        "content": "Links do topo"
    },
    {
        "type": "checkbox",
        "id": "show_top_row",
        "label":"Exibir links no topo",
        "info": "Para configurar os links, não esqueça de adicionar os blocos.",
        "default": false
    },
    {
        "type": "select",
        "id": "align_top_row",
        "label": "Alinhamento",
        "options": [
            {
                "value": "start",
                "label": "Esquerda"
            },
            {
                "value": "center",
                "label": "Centro"
            },
            {
                "value": "end",
                "label": "Direita"
            }
        ],
        "default": "end"
    },
    {
        "type": "header",
        "content": "Cabeçalho fixo"
    },
    
    {
        "type": "select",
        "id": "sticky",
        "label": "Cabeçalho Fixo Ativar/Desativar",
        "options": [
            {
                "value": "Enable",
                "label": "Ativar"
            },
            {
                "value": "Disable",
                "label": "Desativar"
            }
        ],
        "default": "Disable"
    }
  ],
  "blocks": [
    {
        "type": "text",
        "name": "Links do Topo",
        "limit": 10,
        "settings": [
            {
                "type": "text",
                "id": "text_top_row",
                "label": "Texto",
                "default": "Texto do link"
            },
            {
                "type": "url",
                "id": "link_top_row",
                "label": "Link",
                "info": "Texto do link"
            }
        ]
    }
  ]
}
{% endschema %}
