{%- assign locale_selector = false -%}
{%- assign currency_selector = false -%}
{%- assign show_selectors = false -%}

{%- if section.settings.show_currency_selector and shop.enabled_currencies.size > 1 -%}
{%- assign currency_selector = true -%}
{%- endif -%}

{%- if section.settings.show_locale_selector and shop.published_locales.size > 1 -%}
{%- assign locale_selector = true -%}
{%- endif -%}

{%- if currency_selector or locale_selector -%}
{%- assign show_selectors = true -%}
{%- endif -%}

{%- assign social_icons = false -%}

{%- if
  settings.social_twitter_link != blank
  or settings.social_facebook_link != blank
  or settings.social_pinterest_link != blank
  or settings.social_instagram_link != blank
  or settings.social_tumblr_link != blank
  or settings.social_snapchat_link != blank
  or settings.social_youtube_link != blank
  or settings.social_vimeo_link != blank
  or request.page_type == 'article'
  or request.page_type == 'blog'
-%}
  {%- assign social_icons = true -%}
{%- endif -%}

{% if section.settings.message %}
  <style>
    {% if section.settings.logo != blank %}
      .site-header__logo-image {
        max-width: {{ section.settings.logo_max_width | escape }}px;
      }
    {% endif %}

    {% if section.settings.align_logo == 'left' %}
      .site-header__logo-image {
        margin: 0;
      }
    {% endif %}
  </style>
{% endif %}

{% include 'search-drawer' %}

<div class="header_top_bar">
  <div data-section-id="{{ section.id }}" data-section-type="header-section" data-header-section class="annouce">
    {% if section.settings.message %}
    {% if section.settings.home_page_only == false or request.page_type == 'index' %}
    <style>
/*       .announcement-bar, .header_top_bar, .header_top_bar .site-footer .currency_swicher .disclosure__toggle, .header_top_bar .site-footer .currency_swicher .disclosure-list, .header_top_bar .site-footer .currency_swicher .disclosure-list li,
      .header_top_bar .site-footer .currency_swicher .grid__item .language_switcher_main #translation {
        background-color: {{ section.settings.color_bg }};
      } */
      
      .announcement-bar, .header_top_bar .announcement-bar .header_top_content .currency_switcher form .disclosure-list { background-color: {{ section.settings.color_bg }};}

      .announcement-bar__link:hover {
        {% assign brightness = section.settings.color_bg | color_brightness %}

        {% if brightness <= 192 %}
        {% assign lightenAmount = 255 | minus: brightness | divided_by: 255 | times: 16 %}
        background-color: {{ section.settings.color_bg | color_lighten: lightenAmount }};
        {% else %}
        {% assign darkenAmount = 255 | divided_by: brightness | times: 8 %}
        background-color: {{ section.settings.color_bg | color_darken: darkenAmount }};
        {% endif %}
      }

      .announcement-bar__message, .header_top_content .currency_swicher .selectors-form .disclosure .disclosure__toggle, .header_top_bar .site-footer .currency_swicher .disclosure-list li a {
        color: {{ section.settings.color_text }};
      }
      .header_top_bar .announcement-bar .header_top_content .header_social_media .social-icons .social-icons__item a svg { fill: {{ section.settings.color_text }};}
      
      .header_top_bar .announcement-bar .header_top_content .currency_switcher form .disclosure__toggle, 
      .header_top_bar .announcement-bar .header_top_content .currency_switcher form .disclosure-list .disclosure-list__item a,
      .header_top_bar .announcement-bar .header_top_content .announcement .announcement_items .slick-next:before, .header_top_bar .announcement-bar .header_top_content .announcement .announcement_items .slick-prev:before { color: {{ section.settings.color_text }};}
    </style>

    <div class="announcement-bar" role="region" aria-label="{{ 'sections.header.announcement_bar_label' | t }}">
      <div class="page-width">
        <div class="header_top_content">
          {% if section.settings.show_social_icon != blank %}
          <div class="header_social_media">
            {%- assign socials = "Facebook Twitter Pinterest Instagram Tumblr Snapchat YouTube Vimeo" | split: ' ' -%}
            {%- if social_icons -%}
            <ul class="list--inline site-header__social-icons social-icons site-header__icon-list">
              {%- for social in socials -%}
              {%- assign social_link = social | prepend: 'social_' | append: '_link' | downcase -%}
              {%- assign icon_link = social | prepend: 'icon-' | downcase -%}
              {%- if settings[social_link] != blank -%}
              <li class="social-icons__item">
                <a class="social-icons__link" href="{{ settings[social_link] | escape }}" aria-describedby="a11y-external-message">
                  {%- include icon_link -%}
                  <span class="icon__fallback-text">{{ social }}</span>
                </a>
              </li>
              {%- endif -%}
              {%- endfor -%}
            </ul>
            {% endif %}
          </div>
          {% endif %}
          <div class="announcement" {% if section.settings.show_social_icon == blank or section.settings.show_currency_selector == blank %}style="width: 100%;"{% endif %}>
            <div class="swiper-container"
                 data-swiper='{
                                "slidesPerView": 1, 
                                "loop": true, 
                                "autoplay": {"delay": 2000}, 
                                "speed": 1000,
                                "navigation": {
                                  "nextEl": ".swiper-button-next-{{ section.id }}",
                                  "prevEl": ".swiper-button-prev-{{ section.id }}"
                                }
                              }'>
              <div class="announcement_items swiper-wrapper" id="announce-{{ section.id }}">
                {% for block in section.blocks %}
                <div class="swiper-slide announcement_item">
                  {%- unless block.settings.message_link == blank -%}
                  <a href="{{ block.settings.message_link }}" class="announcement-bar__link">
                    {%- endunless -%}
                    <p class="announcement-bar__message">{{ block.settings.message_text | escape }}</p>
                    {%- unless block.settings.message_link == blank -%}
                  </a>
                  {%- endunless -%}
                </div>
                {% endfor %}
              </div>
            </div>
            
            <!-- buttons -->
            <div class="swiper-button-prev-{{ section.id }} swipe-arrow prev-arrow"></div>
            <div class="swiper-button-next-{{ section.id }} swipe-arrow next-arrow"></div>
            
          </div>
          {% comment %}
          {%- if currency_selector -%}
          <div class="currency_switcher">
            {%- form 'localization', class: 'selectors-form', data-disclosure-form: '' -%}
            <h2 class="visually-hidden" id="country-heading">
              {{ 'general.country.dropdown_label' | t }}
            </h2>
            {%- assign current_currency_symbol = localization.country.currency.symbol -%}
            {%- assign current_currency_iso_code = localization.country.currency.iso_code -%}
            <div class="disclosure" data-disclosure-country>
              <button type="button" class="disclosure__toggle" aria-expanded="false" aria-controls="country-list" aria-describedby="country-heading" data-disclosure-toggle>
                {%- if current_currency_symbol -%}
                {{ current_currency_iso_code }} {{ current_currency_symbol }}
                {%- else -%}
                {{ localization.country.name }} ({{ current_currency_iso_code }})
                {%- endif -%}
              </button>
              <ul id="country-list" class="disclosure-list" style="display: none;" data-disclosure-list>
                {% for country in form.available_countries %}
                {%- assign currency_symbol = country.currency.symbol -%}
                {%- assign currency_iso_code = country.currency.iso_code -%}
                <li class="disclosure-list__item {% if country.iso_code == localization.country.iso_code %}disclosure-list__item--current{% endif %}">
                  <a class="disclosure-list__option" href="#" {% if country.iso_code == localization.country.iso_code %}aria-current="true"{% endif %} data-value="{{ country.iso_code }}" data-disclosure-option>
                    {%- if currency_symbol -%}
                    {{ currency_iso_code }} {{ currency_symbol }}
                    {%- else -%}
                    {{ country.name }} ({{ currency_iso_code }})
                    {%- endif -%}
                  </a>
                </li>
                {%- endfor -%}
              </ul>
              <input type="hidden" name="country_code" id="CountrySelector" value="{{ localization.country.iso_code }}" data-disclosure-input/>
            </div>
            {%- endform -%}
          </div>
          {%- endif -%}
          {% endcomment %}
          {%- if currency_selector -%}
          <div class="currency_switcher">
            <div class="critical-hidden" role="contentinfo" data-section-id="{{ section.id }}" data-section-type="footer-section">
              {%- if show_selectors -%}
              <div class="grid__item small--one-whole">
                {%- form 'localization', class: 'selectors-form', data-disclosure-form: '' -%}
                {%- if currency_selector -%}
                <div class="selectors-form__item notranslate">
                  <h2 class="visually-hidden" id="currency-heading">
                    {{ 'general.currency.dropdown_label' | t }}
                  </h2>

                  <div class="disclosure" data-disclosure-currency>
                    <button type="button" class="disclosure__toggle" aria-expanded="false" aria-controls="currency-list" aria-describedby="currency-heading" data-disclosure-toggle>
                      {{ form.current_currency.iso_code }} {%- if form.current_currency.symbol -%}{{ form.current_currency.symbol }}{%- endif -%}
                    </button>
                    <ul id="currency-list" class="disclosure-list" data-disclosure-list>
                      {% for currency in form.available_currencies %}
                      <li class="disclosure-list__item {% if currency.iso_code == form.current_currency.iso_code %}disclosure-list__item--current{% endif %}">
                        <a class="disclosure-list__option" href="#" {% if currency.iso_code == form.current_currency.iso_code %}aria-current="true"{% endif %} data-value="{{ currency.iso_code }}" data-disclosure-option>
                          {{ currency.iso_code }} {%- if currency.symbol -%}{{ currency.symbol }}{%- endif -%}
                        </a>
                      </li>
                      {%- endfor -%}
                    </ul>
                    <input type="hidden" name="currency_code" id="CurrencySelector" value="{{ form.current_currency.iso_code }}" data-disclosure-input/>
                  </div>
                </div>
                {%- endif -%}
                {%- endform -%}
                {% endif %}
              </div>
            </div>
          </div>
          {%- endif -%}
        </div>
      </div>
    </div>

    {% endif %}
    {% endif %}
  </div>

  {% comment %}
  <div class="site-footer critical-hidden" role="contentinfo" data-section-id="{{ section.id }}" data-section-type="footer-section">
    <div class=" currency_swicher">
      {%- if show_selectors -%}
      <div class="grid__item one-half small--one-whole">
        {%- form 'localization', class: 'selectors-form', data-disclosure-form: '' -%}

        <div class="language_switcher_main notranslate">
          <div class="language_switcher_selected"><span><img class="lazyload" data-src="{{ 'en.svg' | asset_url }}" alt="en"></span>English</div>
          <ul id="translation">
            <li class="English" title="English"><span><img class="lazyload" data-src="{{ 'en.svg' | asset_url }}" alt="en"></span>English</li>
            <li class="Arabic" title="Arabic"><span><img class="lazyload" data-src="{{ 'ae.svg' | asset_url }}" alt="ar"></span>Arabic</li>
            <li class="German" title="German"><span><img class="lazyload" data-src="{{ 'de.svg' | asset_url }}" alt="de"></span>German</li>
            <li class="Italian" title="Italian"><span><img class="lazyload" data-src="{{ 'it.svg' | asset_url }}" alt="it"></span>Italian</li>
            <li class="Polish" title="Polish"><span><img class="lazyload" data-src="{{ 'pl.svg' | asset_url }}" alt="pl"></span>Polish</li>
          </ul>
          <div style="display:none" id="google_translate_element"></div>
        </div>


        {% comment %}
        {%- if locale_selector -%}
        <div class="selectors-form__item">
          <h2 class="visually-hidden" id="lang-heading">
            {{ 'general.language.dropdown_label' | t }}
          </h2>

          <div class="disclosure" data-disclosure-locale>
            <button type="button" class="disclosure__toggle" aria-expanded="false" aria-controls="lang-list" aria-describedby="lang-heading" data-disclosure-toggle>
              {{ form.current_locale.endonym_name }}
            </button>
            <ul id="lang-list" class="disclosure-list" data-disclosure-list>
              {% for locale in form.available_locales %}
              <li class="disclosure-list__item {% if locale.iso_code == form.current_locale.iso_code %}disclosure-list__item--current{% endif %}">
                <a class="disclosure-list__option" href="#" lang="{{ locale.iso_code }}" {% if locale.iso_code == form.current_locale.iso_code %}aria-current="true"{% endif %} data-value="{{ locale.iso_code }}" data-disclosure-option>
                  {{ locale.endonym_name }}
                </a>
              </li>
              {%- endfor -%}
            </ul>
            <input type="hidden" name="locale_code" id="LocaleSelector" value="{{ form.current_locale.iso_code }}" data-disclosure-input/>
          </div>
        </div>
        {%- endif -%}
        {% endcomment %}

        {%- if currency_selector -%}
        <div class="selectors-form__item notranslate">
          <h2 class="visually-hidden" id="currency-heading">
            {{ 'general.currency.dropdown_label' | t }}
          </h2>

          <div class="disclosure" data-disclosure-currency>
            <button type="button" class="disclosure__toggle" aria-expanded="false" aria-controls="currency-list" aria-describedby="currency-heading" data-disclosure-toggle>
              {{ form.current_currency.iso_code }} {%- if form.current_currency.symbol -%}{{ form.current_currency.symbol }}{%- endif -%}
            </button>
            <ul id="currency-list" class="disclosure-list" data-disclosure-list>
              {% for currency in form.available_currencies %}
              <li class="disclosure-list__item {% if currency.iso_code == form.current_currency.iso_code %}disclosure-list__item--current{% endif %}">
                <a class="disclosure-list__option" href="#" {% if currency.iso_code == form.current_currency.iso_code %}aria-current="true"{% endif %} data-value="{{ currency.iso_code }}" data-disclosure-option>
                  {{ currency.iso_code }} {%- if currency.symbol -%}{{ currency.symbol }}{%- endif -%}
                </a>
              </li>
              {%- endfor -%}
            </ul>
            <input type="hidden" name="currency_code" id="CurrencySelector" value="{{ form.current_currency.iso_code }}" data-disclosure-input/>
          </div>
        </div>
        {%- endif -%}
        {%- endform -%}
      </div>
      {% endif %}
    </div>
  </div>
  {% endcomment %}
</div>

<header class="mobile_fixed_header" role"banner">

  {% if section.settings.mobile_shop != blank %}
  <div class="grid__item">
    <div class="site-header__icon site-header__icons-wrapper">
      <a href="{{ section.settings.mobile_shop_url }}" class="new">
        {% include 'icon-shop' %}
        <span class="title_txt">{{ section.settings.mobile_shop }}</span>
      </a>
    </div>
  </div>
  {% endif %}

  {% if section.settings.mobile_sale != blank %}
  <div class="grid__item">
    <div class="site-header__icons-wrapper">
      <a href="{{ section.settings.mobile_sale_url }}" class="sale">
        {% include 'icon-sale' %}
        <span class="title_txt">{{ section.settings.mobile_sale }}</span>
      </a>
    </div>
  </div>
  {% endif %}
  
  {% if shop.customer_accounts_enabled %}
  <div class="grid__item grid--no-gutters grid--table site-header__account">
  {% if customer %}
  <a href="{{ routes.account_url }}" class="site-header__icon site-header__account">
    {% include 'icon-login' %}
    <span class="icon__fallback-text">{{ 'layout.customer.account' | t }}</span>
  </a>
  {% else %}
  <a href="{{ routes.account_login_url }}" class="site-header__icon site-header__account">
    {% include 'icon-login' %}
    <span class="icon__fallback-text">{{ 'layout.customer.account' | t }}</span>
  </a>
  {% endif %}
  </div>
  {% endif %}

  <div class="grid__item {% if section.settings.align_logo == 'left' %}medium-up--one-quarter{% else %}medium-up--one-third {% endif %} text-center site-header__icons{% if shop.customer_accounts_enabled %} site-header__icons--plus{% endif %}">
    <div class="site-header__icons-wrapper">
      <a {% if template contains 'cart'%}href="{{ routes.cart_url }}"{% endif %} class="site-header__icon site-header__cart {% if template != 'cart' %}cart_button{% endif %}">
        {% include 'icon-cart' %}
        <span class="title_txt">{{ 'layout.cart.title' | t }}</span>
        <div id="CartCount" class="site-header__cart-count" data-cart-count-bubble>
          <span data-cart-count>{{ cart.item_count }}</span>
          <span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.item_count }}</span>
        </div>
      </a>
    </div>
  </div>

  <div class="grid__item grid--no-gutters grid--table site-header__mobile-nav">
    {% if section.settings.align_logo == 'center' %}
    {%- assign logo_classes = 'medium-up--one-third logo-align--center' -%}
    {% else %}
    {%- assign logo_classes = 'medium-up--one-quarter logo-align--left' -%}
    {% endif %}

    <div class="site-header__icons {% if section.settings.align_logo == 'left' %}medium-up--one-quarter{% else %}medium-up--one-third {% endif %} text-center">
      {% unless linklists[section.settings.main_linklist] == blank %}
      <button type="button" class="btn--link site-header__icon site-header__menu js-mobile-nav-toggle mobile-nav--open" aria-controls="MobileNav"  aria-expanded="false" aria-label="{{ 'layout.navigation.menu' | t }}">
        {% include 'icon-hamburger' %}
        <span>Menu</span>
      </button>
      {% endunless %}
    </div>
  </div>


</header>


  <header class="site-header{% if section.settings.align_logo == 'left' %} border-bottom logo--left{% else %} logo--center{% endif %}" role="banner">
    
    <div class="grid grid--no-gutters grid--table site-header__mobile-nav">
      {% if section.settings.align_logo == 'center' %}
        {%- assign logo_classes = 'medium-up--one-third medium-up--push-one-third logo-align--center' -%}
      {% else %}
        {%- assign logo_classes = 'medium-up--one-quarter logo-align--left' -%}
      {% endif %}

       {% if section.settings.align_logo == 'center' %}
        <nav class="grid__item small--hide left_main_menu" id="AccessibleNav" role="navigation">
          {% include 'site-nav', linklist: section.settings.main_linklist %}
        </nav>
      {% endif %}
      
      <div class="grid__item menu_burger" style="display: none;">
        {% unless linklists[section.settings.main_linklist] == blank %}
        <button type="button" class="btn--link site-header__icon site-header__menu js-mobile-nav-toggle mobile-nav--open" aria-controls="MobileNav"  aria-expanded="false" aria-label="{{ 'layout.navigation.menu' | t }}">
          {% include 'icon-hamburger' %}
          {% include 'icon-close' %}
        </button>
        {% endunless %}
        
        {% if shop.customer_accounts_enabled %}
            {% if customer %}
              <a href="{{ routes.account_url }}" class="site-header__icon site-header__account" style="display: none;">
                {% include 'icon-login' %}
                <span class="icon__fallback-text">{{ 'layout.customer.account' | t }}</span>
              </a>
            {% else %}
              <a href="{{ routes.account_login_url }}" class="site-header__icon site-header__account" style="display: none;">
                {% include 'icon-login' %}
                <span class="icon__fallback-text">{{ 'layout.customer.log_in' | t }}</span>
              </a>
            {% endif %}
          {% endif %}
      </div>
      
      <div class="grid__item logo-align--left">
        {% comment %}
          Use the uploaded logo from theme settings if enabled.
          Site name gets precedence with H1 tag on homepage, div on other pages.
        {% endcomment %}
        {% if request.page_type == 'index' %}
          <h1 class="h2 site-header__logo">
        {% else %}
          <div class="h2 site-header__logo">
        {% endif %}
          {% if section.settings.logo %}
            {%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
            <a href="{{ routes.root_url }}" class="{% if section.settings.align_logo == 'center' %} site-header__logo-image--centered{% endif %}" >
              {% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
              <img class="lazyload js"
                   src="{{ section.settings.logo | img_url: '300x300' }}"
                   data-src="{{ img_url }}"
                   data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ logo_alt | escape }}"
                   style="max-width: {{ section.settings.logo_max_width }}px">
              <noscript>
                {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
                <img src="{{ section.settings.logo | img_url: image_size }}"
                     height=""
                     width=""
                     srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
                     alt="{{ section.settings.logo.alt | default: shop.name }}"
                     style="max-width: {{ section.settings.logo_max_width }}px;">
              </noscript>
            </a>
          {% else %}
            <a class="site-header__logo-link" href="{{ routes.root_url }}">{{ shop.name }}</a>
          {% endif %}
        {% if request.page_type == 'index' %}
          </h1>
        {% else %}
          </div>
        {% endif %}
      </div>

      {% if section.settings.align_logo == 'left' %}
        <nav class="grid__item small--hide" id="AccessibleNav" role="navigation">
          {% include 'site-nav', linklist: section.settings.main_linklist %}
        </nav>
      {% endif %}

      <div class="grid__item text-right site-header__icons{% if shop.customer_accounts_enabled %} site-header__icons--plus{% endif %}">
        <div class="site-header__icons-wrapper">
          
          <button type="button" class="btn--link site-header__icon site-header__search-toggle js-drawer-open-top" data-predictive-search-open-drawer>
            {% include 'icon-search' %}
            <span class="icon__fallback-text">{{ 'layout.navigation.search' | t }}</span>
          </button>
		
          {% if shop.customer_accounts_enabled %}
            {% if customer %}
              <a href="{{ routes.account_url }}" class="site-header__icon site-header__account">
                {% include 'icon-login' %}
                <span class="icon__fallback-text">{{ 'layout.customer.account' | t }}</span>
              </a>
            {% else %}
              <a href="{{ routes.account_login_url }}" class="site-header__icon site-header__account">
                {% include 'icon-login' %}
                <span class="icon__fallback-text">{{ 'layout.customer.log_in' | t }}</span>
              </a>
            {% endif %}
          {% endif %}

          <a class="wishlist site-header__icon site-header__account" href="/pages/wishlist">
            {% include 'icon-wishlist' %}
          </a>
          
          <a {% if template contains 'cart'%}href="{{ routes.cart_url }}"{% endif %} class="site-header__icon site-header__cart {% unless template contains 'cart'%}cart_button{% endunless %}">
            {% include 'icon-cart' %}
            <span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
            <div id="CartCount" class="site-header__cart-count{% if cart.item_count == 0 %} hide{% endif %} critical-hidden" data-cart-count-bubble>
              <span class="cart-count" data-cart-count>{{ cart.item_count }}</span>
              <span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.item_count }}</span>
            </div>
          </a>
         
        </div>

      </div>
    </div>

    <nav class="mobile-nav-wrapper medium-up--hide critical-hidden" role="navigation">
      <div class="close-menu-mm mobile-nav--close">
          {% include 'icon-close' %}
      </div>
      <ul id="MobileNav" class="mobile-nav">
        {% for link in linklists[section.settings.main_linklist_mobile].links %}
          {%- assign outerLoopIndex = forloop.index -%}

          <li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}">
            {% if link.links != blank %}
              {% capture child_list_handle %}{{ link.handle }}-{{ outerLoopIndex }}{% endcapture %}
              <button type="button" class="btn--link js-toggle-submenu mobile-nav__link{% if link.child_active %} mobile-nav__link--active{% endif %}" data-target="{{ child_list_handle }}" data-level="1" aria-expanded="false">
                <span class="mobile-nav__label">{{ link.title | escape }}</span>
                <div class="mobile-nav__icon">
                  {% include 'icon-chevron-right' %}
                </div>
              </button>
              <ul class="mobile-nav__dropdown" data-parent="{{ child_list_handle }}" data-level="2">
                <li class="visually-hidden" tabindex="-1" data-menu-title="2">
                  {{- link.title }} {{ 'layout.navigation.menu' | t -}}
                </li>
                <li class="mobile-nav__item border-bottom">
                  <div class="mobile-nav__table">
                    <div class="mobile-nav__table-cell mobile-nav__return">
                      <button class="btn--link js-toggle-submenu mobile-nav__return-btn" type="button" aria-expanded="true" aria-label="{{ link.title }}">
                        {% include 'icon-chevron-left' %}
                      </button>
                    </div>
                    <span class="mobile-nav__sublist-link mobile-nav__sublist-header mobile-nav__sublist-header--main-nav-parent">
                      <span class="mobile-nav__label">{{ link.title | escape }}</span>
                    </span>
                  </div>
                </li>

                {% for childlink in link.links %}
                  <li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}">
                    {% if childlink.links != blank %}
                      {% capture grandchild_list_handle %}{{ childlink.handle }}-{{ outerLoopIndex }}-{{ forloop.index }}{% endcapture %}
                      <button type="button" class="btn--link js-toggle-submenu mobile-nav__link mobile-nav__sublist-link" data-target="{{ grandchild_list_handle }}" aria-expanded="false">
                        <span class="mobile-nav__label">{{ childlink.title | escape }}</span>
                        <div class="mobile-nav__icon">
                          {% include 'icon-chevron-right' %}
                        </div>
                      </button>
                      <ul class="mobile-nav__dropdown" data-parent="{{ grandchild_list_handle }}" data-level="3">
                        <li class="visually-hidden" tabindex="-1" data-menu-title="3">
                          {{- childlink.title }} {{ 'layout.navigation.menu' | t -}}
                        </li>
                        <li class="mobile-nav__item border-bottom">
                          <div class="mobile-nav__table">
                            <div class="mobile-nav__table-cell mobile-nav__return">
                              <button type="button" class="btn--link js-toggle-submenu mobile-nav__return-btn" data-target="{{ child_list_handle }}" aria-expanded="true" aria-label="{{ childlink.title }}">
                                {% include 'icon-chevron-left' %}
                              </button>
                            </div>
                            <a href="{{ childlink.url }}"
                              class="mobile-nav__sublist-link mobile-nav__sublist-header"
                              {% if childlink.current %} aria-current="page"{% endif %}
                            >
                              <span class="mobile-nav__label">{{ childlink.title | escape }}</span>
                            </a>
                          </div>
                        </li>
                        {% for grandchildlink in childlink.links %}
                          <li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}">
                            <a href="{{ grandchildlink.url }}"
                              class="mobile-nav__sublist-link"
                              {% if grandchildlink.current %} aria-current="page"{% endif %}
                            >
                              <span class="mobile-nav__label">{{ grandchildlink.title | escape }}</span>
                            </a>
                          </li>
                        {% endfor %}
                      </ul>
                    {% else %}
                      <a href="{{ childlink.url }}"
                        class="mobile-nav__sublist-link"
                        {% if childlink.current %} aria-current="page"{% endif %}
                      >
                        <span class="mobile-nav__label">{{ childlink.title | escape }}</span>
                      </a>
                    {% endif %}
                  </li>
                {% endfor %}
              </ul>
            {% else %}
              <a href="{{ link.url }}"
                class="mobile-nav__link{% if link.active %} mobile-nav__link--active{% endif %}"
                {% if link.current %} aria-current="page"{% endif %}
              >
                <span class="mobile-nav__label">{{ link.title | escape }}</span>
              </a>
            {% endif %}
          </li>
        {% endfor %}
      </ul>
    </nav>
  </header>

  {% comment %}
  {% if section.settings.align_logo == 'center' %}
  <nav class="small--hide border-bottom" id="AccessibleNav" role="navigation">
    {% include 'site-nav', linklist: section.settings.main_linklist, wrapper_class: 'site-nav--centered' %}
  </nav>
  {% endif %}
  {% endcomment %}
  
</div>

{% if section.settings.sticky == 'Enable' %}
<script type="lazyload2" defer="defer">
  $(document).ready(function () {
   
    var stickyHeight = $('.site-header').height();

    $(window).scroll(function(){
      if ($(window).scrollTop() >= stickyHeight) {
        $('.site-header').addClass('sticky');
      }
      else {
        $('.site-header').removeClass('sticky');
      }
    });

  });
</script>
{% endif %}


<script type="lazyload2" defer="defer">
  $(document).ready(function() {
    if($(window).width() < 750){
      $('.header_top_bar .site-footer').remove();
    }
  });
</script>


<style type="text/css">
  .site-header .grid .small--hide .site-nav li > a, .site-header .grid .small--hide .site-nav li.has_megamenu>a:before { color:  {{ section.settings.menu_color }};}
  .site-header .grid .small--hide .site-nav li:hover > a,
  .site-header .grid .small--hide .site-nav li:hover.has_megamenu>a:before,
  .site-header .grid .small--hide .site-nav li>a.site-nav__link--active,
  .site-header .grid .small--hide .site-nav li>a.site-nav__link--active:before { color:  {{ section.settings.menu_hover_color }};}
</style>


<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Organization",
  "name": {{ shop.name | json }},
  {% if section.settings.logo %}
    {% assign image_size = section.settings.logo.width | append:'x' %}
    "logo": {{ section.settings.logo | img_url: image_size | prepend: "https:" | json }},
  {% endif %}
  "sameAs": [
    {{ settings.social_twitter_link | json }},
    {{ settings.social_facebook_link | json }},
    {{ settings.social_pinterest_link | json }},
    {{ settings.social_instagram_link | json }},
    {{ settings.social_tumblr_link | json }},
    {{ settings.social_snapchat_link | json }},
    {{ settings.social_youtube_link | json }},
    {{ settings.social_vimeo_link | json }}
  ],
  "url": {{ shop.url | append: page.url | json }}
}
</script>

{% if request.page_type == 'index' %}
  {% assign potential_action_target = shop.url | append: routes.search_url | append: "?q={search_term_string}" %}
  <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "WebSite",
      "name": {{ shop.name | json }},
      "potentialAction": {
        "@type": "SearchAction",
        "target": {{ potential_action_target | json }},
        "query-input": "required name=search_term_string"
      },
      "url": {{ shop.url | append: page.url | json }}
    }
  </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": "radio",
      "id": "align_logo",
      "label": {
        "cs": "Zarovnání loga",
        "da": "Logojustering",
        "de": "Logo-Ausrichtung",
        "en": "Logo alignment",
        "es": "Alineación de logo",
        "fi": "Logon tasaus",
        "fr": "Alignement du logo",
        "it": "Allineamento logo",
        "ja": "ロゴアラインメント",
        "ko": "로고 정렬",
        "nb": "Logojustering",
        "nl": "Logo-uitlijning",
        "pl": "Wyrównanie logo",
        "pt-BR": "Alinhamento do logotipo",
        "pt-PT": "Alinhamento do logótipo",
        "sv": "Logojustering",
        "th": "การจัดวางโลโก้",
        "tr": "Logo hizalaması",
        "vi": "Căn chỉnh logo",
        "zh-CN": "logo 对齐方式",
        "zh-TW": "商標對齊"
      },
      "default": "left",
      "options": [
        {
          "value": "left",
          "label": {
            "cs": "Doleva",
            "da": "Venstre",
            "de": "Links",
            "en": "Left",
            "es": "Izquierda",
            "fi": "Vasen",
            "fr": "Gauche",
            "it": "Sinistra",
            "ja": "左",
            "ko": "왼쪽",
            "nb": "Venstre",
            "nl": "Links",
            "pl": "Do lewej",
            "pt-BR": "Esquerda",
            "pt-PT": "Esquerda",
            "sv": "Vänster",
            "th": "ด้านซ้าย",
            "tr": "Sol",
            "vi": "Bên trái",
            "zh-CN": "左侧",
            "zh-TW": "左方"
          }
        },
		{
          "value": "center",
          "label": "Centro"
        }
      ]
    },
    {
      "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": "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": 100
    },
    {
      "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":"header",
		"content":"Cor da barra de navegação"
	},
	{
		"type":"color",
		"id":"menu_color",
		"label":"Cor do texto da barra de navegação"
	},
	{
		"type":"color",
		"id":"menu_hover_color",
		"label":"Cor do texto da barra de navegação, ao passar o mouse"
	},
    {
      "type": "header",
      "content": {
        "cs": "Panel oznámení",
        "da": "Meddelelseslinje",
        "de": "Ankündigungsbereich",
        "en": "Announcement bar",
        "es": "Barra de anuncios",
        "fi": "Ilmoituspalkki",
        "fr": "Barre d'annonces",
        "it": "Barra degli annunci",
        "ja": "告知バー",
        "ko": "공지 표시줄",
        "nb": "Kunngjøringslinje",
        "nl": "Aankondigingsbalk",
        "pl": "Pasek ogłoszeń",
        "pt-BR": "Barra de avisos",
        "pt-PT": "Barra de comunicado",
        "sv": "Meddelandefält",
        "th": "แถบประกาศ",
        "tr": "Duyuru çubuğu",
        "vi": "Thanh thông báo",
        "zh-CN": "公告栏",
        "zh-TW": "公告列"
      }
    },
	{
      "type": "checkbox",
      "id": "show_currency_selector",
      "label": {
        "cs": "Zobrazit selektor měny",
        "da": "Vis valutavælger",
        "de": "Währungsauswahl anzeigen",
        "en": "Show currency selector",
        "es": "Mostrar el selector de moneda",
        "fi": "Näytä valuutanvalitsin",
        "fr": "Afficher le sélecteur de devise",
        "it": "Mostra selettore valuta",
        "ja": "通貨セレクターを表示する",
        "ko": "통화 선택기 표시",
        "nb": "Vis valutavelger",
        "nl": "Valutakiezer weergeven",
        "pl": "Pokaż selektor walut",
        "pt-BR": "Exibir seletor de moeda",
        "pt-PT": "Mostrar seletor de moeda",
        "sv": "Visa valutaväljare",
        "th": "แสดงเครื่องมือเลือกสกุลเงิน",
        "tr": "Para birimi seçici göster",
        "vi": "Hiển thị hộp chọn đơn vị tiền tệ",
        "zh-CN": "货币选择器显示",
        "zh-TW": "顯示幣別選擇器"
      },
      "default": true
    },
	{
      "type": "checkbox",
      "id": "show_locale_selector",
      "label": {
        "cs": "Zobrazit selektor jazyka",
        "da": "Vis sprogvælger",
        "de": "Sprachauswahl anzeigen",
        "en": "Show language selector",
        "es": "Mostrar el selector de idioma",
        "fi": "Näytä kielenvalitsin",
        "fr": "Afficher le sélecteur de langue",
        "it": "Mostra selettore lingua",
        "ja": "言語セレクターを表示する",
        "ko": "언어 선택기 표시",
        "nb": "Vis språkvelger",
        "nl": "Taalkiezer weergeven",
        "pl": "Pokaż selektor języka",
        "pt-BR": "Exibir seletor de idioma",
        "pt-PT": "Mostrar seletor de idioma",
        "sv": "Visa språkväljare",
        "th": "แสดงตัวเลือกภาษา",
        "tr": "Dil seçiciyi göster",
        "vi": "Hiển thị hộp chọn ngôn ngữ",
        "zh-CN": "显示语言选择器",
        "zh-TW": "顯示語言選擇器"
      },
      "default": true
    },
	{
      "type": "checkbox",
      "id": "show_social_icon",
      "label": "Mostrar ícones sociais",
      "default": true
	},
    {
      "type": "checkbox",
      "id": "message",
      "label": {
        "cs": "Zobrazit oznámení",
        "da": "Vis meddelelse",
        "de": "Ankündigung anzeigen",
        "en": "Show announcement",
        "es": "Mostrar anuncio",
        "fi": "Näytä ilmoitus",
        "fr": "Afficher l'annonce",
        "it": "Mostra annuncio",
        "ja": "告知を表示する",
        "ko": "공지 표시",
        "nb": "Vis kunngjøring",
        "nl": "Aankondiging weergeven",
        "pl": "Pokaż ogłoszenie",
        "pt-BR": "Exibir comunicado",
        "pt-PT": "Mostrar comunicado",
        "sv": "Visa tillkännagivande",
        "th": "แสดงประกาศ",
        "tr": "Duyuruyu göster",
        "vi": "Hiển thị thông báo",
        "zh-CN": "显示公告",
        "zh-TW": "顯示公告"
      },
      "default": false
    },
    {
      "type": "checkbox",
      "id": "home_page_only",
      "label": {
        "cs": "Jen domovská stránka",
        "da": "Kun startside",
        "de": "Nur Startseite",
        "en": "Home page only",
        "es": "Solo página de inicio",
        "fi": "Vain etusivu",
        "fr": "Page d'accueil uniquement",
        "it": "Solo home page",
        "ja": "ホームページのみ",
        "ko": "홈페이지만",
        "nb": "Kun på startsiden",
        "nl": "Alleen homepage",
        "pl": "Tylko strona główna",
        "pt-BR": "Apenas na página inicial",
        "pt-PT": "Apenas a página inicial",
        "sv": "Endast hemsida",
        "th": "หน้าแรกเท่านั้น",
        "tr": "Yalnızca ana sayfa",
        "vi": "Chỉ trang chủ",
        "zh-CN": "仅主页",
        "zh-TW": "僅限首頁"
      },
      "default": true
    },
    {
      "type": "color",
      "id": "color_bg",
      "label": {
        "cs": "Panel",
        "da": "Bjælke",
        "de": "Zeile",
        "en": "Bar",
        "es": "Barra",
        "fi": "Palkki",
        "fr": "Barre",
        "it": "Barra",
        "ja": "バー",
        "ko": "바",
        "nb": "Felt",
        "nl": "Balk",
        "pl": "Pasek",
        "pt-BR": "Barra",
        "pt-PT": "Barra",
        "sv": "Fält",
        "th": "แถบ",
        "tr": "Çubuk",
        "vi": "Thanh",
        "zh-CN": "栏",
        "zh-TW": "橫條"
      },
      "default": "#3a3a3a"
    },
    {
      "type": "color",
      "id": "color_text",
      "label": {
        "cs": "Text",
        "da": "Tekst",
        "de": "Text",
        "en": "Text",
        "es": "Texto",
        "fi": "Teksti",
        "fr": "Texte",
        "it": "Testo",
        "ja": "テキスト",
        "ko": "텍스트",
        "nb": "Tekst",
        "nl": "Tekst",
        "pl": "Tekst",
        "pt-BR": "Texto",
        "pt-PT": "Texto",
        "sv": "Text",
        "th": "ข้อความ",
        "tr": "Metin",
        "vi": "Văn bản",
        "zh-CN": "文本",
        "zh-TW": "文字"
      },
      "default": "#ffffff"
    },
	{
		"type": "header",
        "content": "Rótulos do menu"
	  },
	  {
        "type": "text",
        "id": "nm_label",
        "label":"Título do menu",
        "default": "Menu Title"
      },
	  {
        "type": "text",
        "id": "nm_label1",
        "label":"Rótulo do menu",
        "default": "New"
      },
      {
        "type": "select",
        "id": "sticky",
        "label": "Cabeçalho Fixo Ativar/Desativar",
        "options": [
          {
            "value": "Enable",
            "label": "Ativar"
          },
          {
            "value": "Disable",
            "label": "Desativar"
          }
        ]
      },
	{
		"type": "header",
		"content": "Menu Fixo Mobile"
	},
	{
		"type":"text",
		"id":"mobile_shop",
		"label":"Texto da loja",
		"default": "Comprar"
	},
	{
		"type":"url",
		"id":"mobile_shop_url",
		"label":"Url da loja"
	}
  ],
  "blocks": [
    {
      "type": "announcement",
      "name": "Anúncio",
      "settings": [
        {
          "type": "text",
          "id": "message_text",
          "label": "Texto",
          "default": "Anuncie algo aqui"
        },
        {
          "type": "url",
          "id": "message_link",
          "label": "Link",
          "info": "Opcional"
        }
      ]
    }
  ]
}
{% endschema %}
