{%- comment -%}
Preload important styles
{%- endcomment -%}
{{ 'header.css' | asset_url | stylesheet_tag: preload: true }}
{{ 'mega-menu.css' | asset_url | stylesheet_tag: preload: true }}
{{ 'component-slideshow.css' | asset_url | stylesheet_tag: preload: true }}
{{ 'component-slider.css' | asset_url | stylesheet_tag: preload: true }}

{%- if settings.cart_type == "drawer" -%}
  {{ 'component-cart-drawer.css' | asset_url | stylesheet_tag }}
  {{ 'component-cart.css' | asset_url | stylesheet_tag }}
  {{ 'component-totals.css' | asset_url | stylesheet_tag }}
  {{ 'component-price.css' | asset_url | stylesheet_tag }}
  {{ 'component-discounts.css' | asset_url | stylesheet_tag }}
  {{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }}
  {{ 'wick--cart-drawer.css' | asset_url | stylesheet_tag }}
{%- endif -%}

{%- comment -%}
Lazy-load non-critical components
{%- endcomment -%}
<link rel="stylesheet" href="{{ 'component-list-menu.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-search.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-menu-drawer.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-cart-notification.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-cart-items.css' | asset_url }}" media="print" onload="this.media='all'">

{%- if settings.predictive_search_enabled -%}
  <link rel="stylesheet" href="{{ 'component-price.css' | asset_url }}" media="print" onload="this.media='all'">
  <link rel="stylesheet" href="{{ 'component-loading-overlay.css' | asset_url }}" media="print" onload="this.media='all'">
{%- endif -%}

{%- if section.settings.menu_type_desktop == 'mega' -%}
  <link rel="stylesheet" href="{{ 'component-mega-menu.css' | asset_url }}" media="print" onload="this.media='all'">
  <link rel="stylesheet" href="{{ 'wick--menu-mega_menu.css' | asset_url }}" media="print" onload="this.media='all'">
  <noscript>{{ 'component-mega-menu.css' | asset_url | stylesheet_tag }}</noscript>
  <noscript>{{ 'wick--menu-mega_menu.css' | asset_url | stylesheet_tag }}</noscript>
{%- endif -%}

<noscript>{{ 'component-list-menu.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-search.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-menu-drawer.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-cart-notification.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-cart-items.css' | asset_url | stylesheet_tag }}</noscript>

<style>
  .header__heading-logo {
    max-width: {{ section.settings.logo_width }}px;
  }
</style>

{%- style -%}
  .header__heading-link, .header__icons {
    padding-top: {{ section.settings.padding_top | times: 0.5 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.5 | round: 0 }}px;
  }

  .section-header {
    margin-bottom: {{ section.settings.margin_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-header {
      margin-bottom: {{ section.settings.margin_bottom }}px;
    }
  }

  @media screen and (min-width: 990px) {
    .header__heading-link, .header__icons {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

<script src="{{ 'details-disclosure.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'details-modal.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'cart-notification.js' | asset_url }}" defer="defer"></script>

{%- if settings.cart_type == "drawer" -%}
  <script src="{{ 'cart-drawer.js' | asset_url }}" defer="defer"></script>
{%- endif -%}

<svg xmlns="http://www.w3.org/2000/svg" class="hidden">
  <symbol id="icon-search" viewbox="0 0 18 19" fill="none">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.03 11.68A5.784 5.784 0 112.85 3.5a5.784 5.784 0 018.18 8.18zm.26 1.12a6.78 6.78 0 11.72-.7l5.4 5.4a.5.5 0 11-.71.7l-5.41-5.4z" fill="currentColor"/>
  </symbol>

  <symbol id="icon-close" class="icon icon-close" fill="none" viewBox="0 0 18 17">
    <path d="M.865 15.978a.5.5 0 00.707.707l7.433-7.431 7.579 7.282a.501.501 0 00.846-.37.5.5 0 00-.153-.351L9.712 8.546l7.417-7.416a.5.5 0 10-.707-.708L8.991 7.853 1.413.573a.5.5 0 10-.693.72l7.563 7.268-7.418 7.417z" fill="currentColor">
  </symbol>
</svg>

<{% if section.settings.enable_sticky_header %}sticky-header{% else %}div{% endif %} class="header-wrapper color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator %} header-wrapper--border-bottom{% endif %}">
  <header class="header header--{{ section.settings.logo_position }} {% if section.settings.menu != blank %} header--has-menu{% endif %}">
    {%- if section.settings.menu != blank -%}
      <header-drawer data-breakpoint="tablet">
        <details id="Details-menu-drawer-container" class="menu-drawer-container">
          <summary class="header__icon header__icon--menu header__icon--summary link focus-inset" aria-label="{{ 'sections.header.menu' | t }}">
            <span>
              {{- 'icon-hamburger.svg' | inline_asset_content -}}

              {{- 'icon-close.svg' | inline_asset_content -}}
            </span>
          </summary>
          <div id="menu-drawer" class="gradient menu-drawer motion-reduce" tabindex="-1">
            <div class="menu-drawer__inner-container">
              <div class="menu-drawer__navigation-container">
                <nav class="menu-drawer__navigation">
                  <ul class="menu-drawer__menu has-submenu list-menu" role="list">
                    {%- for link in section.settings.menu.links -%}
                      <li>
                        {%- if link.links != blank -%}
                          <details id="Details-menu-drawer-menu-item-{{ forloop.index }}">
                            <summary class="menu-drawer__menu-item list-menu__item link link--text focus-inset{% if link.child_active %} menu-drawer__menu-item--active{% endif %}">
                              {{ link.title | escape }}
                              {% render 'icon-arrow' %}
                              {% render 'icon-caret' %}
                            </summary>
                            <div id="link-{{ link.title | escape }}" class="menu-drawer__submenu has-submenu gradient motion-reduce" tabindex="-1">
                              <div class="menu-drawer__inner-submenu">
                                <button class="menu-drawer__close-button link link--text focus-inset" aria-expanded="true">
                                  {% render 'icon-arrow' %}
                                  {{ link.title | escape }}
                                </button>
                                <ul class="menu-drawer__menu list-menu" role="list" tabindex="-1">
                                  {%- for childlink in link.links -%}
                                    <li>
                                      {%- if childlink.links == blank -%}
                                        <a href="{{ childlink.url }}" class="menu-drawer__menu-item link link--text list-menu__item focus-inset{% if childlink.current %} menu-drawer__menu-item--active{% endif %}"{% if childlink.current %} aria-current="page"{% endif %}>
                                          {{ childlink.title | escape }}
                                        </a>
                                      {%- else -%}
                                        <details id="Details-menu-drawer-submenu-{{ forloop.index }}">
                                          <summary class="menu-drawer__menu-item link link--text list-menu__item focus-inset">
                                            {{ childlink.title | escape }}
                                            {% render 'icon-arrow' %}
                                            {% render 'icon-caret' %}
                                          </summary>
                                          <div id="childlink-{{ childlink.title | escape }}-{{ link.title | escape }}" class="menu-drawer__submenu has-submenu gradient motion-reduce">
                                            <button class="menu-drawer__close-button link link--text focus-inset" aria-expanded="true">
                                              {% render 'icon-arrow' %}
                                              {{ childlink.title | escape }}
                                            </button>
                                            <ul class="menu-drawer__menu list-menu" role="list" tabindex="-1">
                                              {%- for grandchildlink in childlink.links -%}
                                                <li>
                                                  <a href="{{ grandchildlink.url }}" class="menu-drawer__menu-item link link--text list-menu__item focus-inset{% if grandchildlink.current %} menu-drawer__menu-item--active{% endif %}"{% if grandchildlink.current %} aria-current="page"{% endif %}>
                                                    {{ grandchildlink.title | escape }}
                                                  </a>
                                                </li>
                                              {%- endfor -%}
                                            </ul>
                                          </div>
                                        </details>
                                      {%- endif -%}
                                    </li>
                                  {%- endfor -%}
                                </ul>
                              </div>
                            </div>
                          </details>
                        {%- else -%}
                          <a href="{{ link.url }}" class="menu-drawer__menu-item list-menu__item link link--text focus-inset{% if link.current %} menu-drawer__menu-item--active{% endif %}"{% if link.current %} aria-current="page"{% endif %}>
                            {{ link.title | escape }}
                          </a>
                        {%- endif -%}
                      </li>
                    {%- endfor -%}
                  </ul>
                </nav>
                <div class="menu-drawer__utility-links">
                  {%- if shop.customer_accounts_enabled -%}
                    <a href="{%- if customer -%}{{ routes.account_url }}{%- else -%}{{ routes.account_login_url }}{%- endif -%}" class="menu-drawer__account link focus-inset h5">
                      {% render 'icon-account' %}
                      {%- liquid
                        if customer
                          echo 'customer.account_fallback' | t
                        else
                          echo 'customer.log_in' | t
                        endif
                      -%}
                    </a>
                  {%- endif -%}
                  <ul class="list list-social list-unstyled" role="list">
                    {%- if settings.social_twitter_link != blank -%}
                      <li class="list-social__item">
                        <a href="{{ settings.social_twitter_link }}" class="list-social__link link">
                          {%- render 'icon-twitter' -%}
                          <span class="visually-hidden">{{ 'general.social.links.twitter' | t }}</span>
                        </a>
                      </li>
                    {%- endif -%}
                    {%- if settings.social_facebook_link != blank -%}
                      <li class="list-social__item">
                        <a href="{{ settings.social_facebook_link }}" class="list-social__link link">
                          {%- render 'icon-facebook' -%}
                          <span class="visually-hidden">{{ 'general.social.links.facebook' | t }}</span>
                        </a>
                      </li>
                    {%- endif -%}
                    {%- if settings.social_pinterest_link != blank -%}
                      <li class="list-social__item">
                        <a href="{{ settings.social_pinterest_link }}" class="list-social__link link">
                          {%- render 'icon-pinterest' -%}
                          <span class="visually-hidden">{{ 'general.social.links.pinterest' | t }}</span>
                        </a>
                      </li>
                    {%- endif -%}
                    {%- if settings.social_instagram_link != blank -%}
                      <li class="list-social__item">
                        <a href="{{ settings.social_instagram_link }}" class="list-social__link link">
                          {%- render 'icon-instagram' -%}
                          <span class="visually-hidden">{{ 'general.social.links.instagram' | t }}</span>
                        </a>
                      </li>
                    {%- endif -%}
                    {%- if settings.social_tiktok_link != blank -%}
                      <li class="list-social__item">
                        <a href="{{ settings.social_tiktok_link }}" class="list-social__link link">
                          {%- render 'icon-tiktok' -%}
                          <span class="visually-hidden">{{ 'general.social.links.tiktok' | t }}</span>
                        </a>
                      </li>
                    {%- endif -%}
                    {%- if settings.social_tumblr_link != blank -%}
                      <li class="list-social__item">
                        <a href="{{ settings.social_tumblr_link }}" class="list-social__link link">
                          {%- render 'icon-tumblr' -%}
                          <span class="visually-hidden">{{ 'general.social.links.tumblr' | t }}</span>
                        </a>
                      </li>
                    {%- endif -%}
                    {%- if settings.social_snapchat_link != blank -%}
                      <li class="list-social__item">
                        <a href="{{ settings.social_snapchat_link }}" class="list-social__link link">
                          {%- render 'icon-snapchat' -%}
                          <span class="visually-hidden">{{ 'general.social.links.snapchat' | t }}</span>
                        </a>
                      </li>
                    {%- endif -%}
                    {%- if settings.social_youtube_link != blank -%}
                      <li class="list-social__item">
                        <a href="{{ settings.social_youtube_link }}" class="list-social__link link">
                          {%- render 'icon-youtube' -%}
                          <span class="visually-hidden">{{ 'general.social.links.youtube' | t }}</span>
                        </a>
                      </li>
                    {%- endif -%}
                    {%- if settings.social_vimeo_link != blank -%}
                      <li class="list-social__item">
                        <a href="{{ settings.social_vimeo_link }}" class="list-social__link link">
                          {%- render 'icon-vimeo' -%}
                          <span class="visually-hidden">{{ 'general.social.links.vimeo' | t }}</span>
                        </a>
                      </li>
                    {%- endif -%}
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </details>
      </header-drawer>
    {%- endif -%}

    {%- if section.settings.logo_position == 'top-center' or section.settings.menu == blank -%}
      <details-modal class="header__search">
        <details>
          <summary class="header__icon header__icon--search header__icon--summary link focus-inset modal__toggle" aria-haspopup="dialog" aria-label="{{ 'general.search.search' | t }}">
            <span>
              <svg class="modal__toggle-open icon icon-search" aria-hidden="true" focusable="false" role="presentation">
                <use href="#icon-search">
              </svg>
              <svg class="modal__toggle-close icon icon-close" aria-hidden="true" focusable="false" role="presentation">
                <use href="#icon-close">
              </svg>
            </span>
          </summary>
          <div class="search-modal modal__content gradient" role="dialog" aria-modal="true" aria-label="{{ 'general.search.search' | t }}">
            <div class="modal-overlay"></div>
            <div class="search-modal__content{% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_vertical_offset < 0 %} search-modal__content-top{% else %} search-modal__content-bottom{% endif %}" tabindex="-1">
              {%- if settings.predictive_search_enabled -%}
                <predictive-search class="search-modal__form" data-loading-text="{{ 'accessibility.loading' | t }}">
              {%- endif -%}
                <form action="{{ routes.search_url }}" method="get" role="search" class="search search-modal__form">
                  <div class="field">
                    <input class="search__input field__input"
                      id="Search-In-Modal-1"
                      type="search"
                      name="q"
                      value=""
                      placeholder="{{ 'general.search.search' | t }}"
                      aria-label="{{ 'general.search.search' | t }}"
                      {%- if settings.predictive_search_enabled -%}
                        role="combobox"
                        aria-expanded="false"
                        aria-owns="predictive-search-results"
                        aria-controls="predictive-search-results"
                        aria-haspopup="listbox"
                        aria-autocomplete="list"
                        autocorrect="off"
                        autocomplete="off"
                        autocapitalize="off"
                        spellcheck="false"
                      {%- endif -%}
                    >
                    <input type="hidden" name="options[prefix]" value="last">
                    <button class="search__button field__button" aria-label="{{ 'general.search.search' | t }}">
                      <svg class="icon icon-search" aria-hidden="true" focusable="false" role="presentation" version="1.2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1, 0, 0, 1, 0, 0)" width="33" height="29"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M15.7955 15.8111L21 21M18 10.5C18 14.6421 14.6421 18 10.5 18C6.35786 18 3 14.6421 3 10.5C3 6.35786 6.35786 3 10.5 3C14.6421 3 18 6.35786 18 10.5Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
                    </button>
                  </div>

                  {%- if settings.predictive_search_enabled -%}
                    <div class="predictive-search predictive-search--header main-header" tabindex="-1" data-predictive-search>
                      <div class="predictive-search__loading-state">
                        <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                          <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                        </svg>
                      </div>
                    </div>

                    <span class="predictive-search-status visually-hidden" role="status" aria-hidden="true"></span>
                  {%- endif -%}
                </form>
              {%- if settings.predictive_search_enabled -%}
                </predictive-search>
              {%- endif -%}
              <button type="button" class="modal__close-button link link--text focus-inset" aria-label="{{ 'accessibility.close' | t }}">
                <svg class="icon icon-close" aria-hidden="true" focusable="false" role="presentation">
                  <use href="#icon-close">
                </svg>
              </button>
            </div>
          </div>
        </details>
      </details-modal>
    {%- endif -%}

    {%- if request.page_type == 'index' -%}
      <h1 class="header__heading">
    {%- endif -%}
        <a href="{{ routes.root_url }}" class="header__heading-link link link--text focus-inset">
          {%- if section.settings.logo != blank -%}
            {%- liquid
              assign logo_alt = section.settings.logo.alt | default: shop.name | escape
              assign logo = section.settings.logo
              assign logo_url = section.settings.logo | image_url: width: section.settings.width
            -%}
            {{ logo_url | image_tag:
              class: 'header__heading-logo',
              widths: '50, 100, 150, 200, 250, 300, 400, 500',
              width: section.settings.logo_width,
              alt: logo_alt
            }}
          {%- else -%}
            <span class="h2">{{ shop.name }}</span>
          {%- endif -%}
        </a>
    {%- if request.page_type == 'index' -%}
      </h1>
    {%- endif -%}

    {%- if section.settings.menu != blank -%}
      {%- if section.settings.menu_type_desktop == 'dropdown' -%}
        <nav class="header__inline-menu"{% if section.settings.logo_position ==  'top-left' %} style="--menu-bar-background: {{ section.settings.menu_bar_color }}; --menu-text-color: {{ section.settings.menu_text_color }}"{% endif %}>
          <ul class="list-menu list-menu--inline" role="list">
            {%- for link in section.settings.menu.links -%}
              <li>
                {%- if link.links != blank -%}
                  <header-menu>
                    <details id="Details-HeaderMenu-{{ forloop.index }}">
                      <summary class="header__menu-item header__menu-item-alpha list-menu__item link focus-inset">
                        <span{% if link.child_active %} class="header__active-menu-item"{% endif %}>{{ link.title | escape }}</span>
                        {% render 'icon-caret' %}
                      </summary>
                      <ul id="HeaderMenu-MenuList-{{ forloop.index }}" class="header__submenu list-menu list-menu--disclosure gradient caption-large motion-reduce global-settings-popup" role="list" tabindex="-1">
                        {%- for childlink in link.links -%}
                          <li>
                            {%- if childlink.links == blank -%}
                              <a href="{{ childlink.url }}" class="header__menu-item header__menu-item-bravo list-menu__item link link--text focus-inset caption-large{% if childlink.current %} list-menu__item--active{% endif %}"{% if childlink.current %} aria-current="page"{% endif %}>
                                {{ childlink.title | escape }}
                              </a>
                            {%- else -%}
                              <details id="Details-HeaderSubMenu-{{ forloop.index }}">
                                <summary class="header__menu-item header__menu-item-charlie link link--text list-menu__item focus-inset caption-large">
                                  <span>{{ childlink.title | escape }}</span>
                                  {% render 'icon-caret' %}
                                </summary>
                                <ul id="HeaderMenu-SubMenuList-{{ forloop.index }}" class="header__submenu list-menu motion-reduce">
                                  {%- for grandchildlink in childlink.links -%}
                                    <li>
                                      <a href="{{ grandchildlink.url }}" class="header__menu-item header__menu-item-delta list-menu__item link link--text focus-inset caption-large{% if grandchildlink.current %} list-menu__item--active{% endif %}"{% if grandchildlink.current %} aria-current="page"{% endif %}>
                                        {{ grandchildlink.title | escape }}
                                      </a>
                                    </li>
                                  {%- endfor -%}
                                </ul>
                              </details>
                            {%- endif -%}
                          </li>
                        {%- endfor -%}
                      </ul>
                    </details>
                  </header-menu>
                {%- else -%}
                  <a href="{{ link.url }}" class="header__menu-item header__menu-item-echo list-menu__item link link--text focus-inset"{% if link.current %} aria-current="page"{% endif %}>
                    <span {%- if link.current %} class="header__active-menu-item"{% endif %}>{{ link.title | escape }}</span>
                  </a>
                {%- endif -%}
              </li>
            {%- endfor -%}
          </ul>
        </nav>
      {%- else -%}
        {% render "mega-menu" %}
      {%- endif -%}
    {%- endif -%}

    <div class="header__icons">
      {% render 'header-search', input_id: 'Search-In-Modal' %}

      {% comment %} {%- if settings.predictive_search_enabled -%}
        <predictive-search class="search-modal__form header-search-modal__form" data-loading-text="{{ 'accessibility.loading' | t }}">
      {%- endif -%}
        <form action="{{ routes.search_url }}" method="get" role="search" class="search search-modal__form">
          <div class="field">
            <input class="search__input field__input no-label"
              id="Search-In-Modal"
              type="search"
              name="q"
              value=""
              placeholder="{{ 'general.search.search' | t }}"
              {%- if settings.predictive_search_enabled -%}
                role="combobox"
                aria-expanded="false"
                aria-owns="predictive-search-results"
                aria-controls="predictive-search-results"
                aria-haspopup="listbox"
                aria-autocomplete="list"
                autocorrect="off"
                autocomplete="off"
                autocapitalize="off"
                spellcheck="false"
              {%- endif -%}
            >
            <label class="field__label visually-hidden" for="Search-In-Modal">{{ 'general.search.search' | t }}</label>
            <input type="hidden" name="options[prefix]" value="last">
            <button class="search__button field__button" aria-label="{{ 'general.search.search' | t }}">
              <svg class="icon icon-search" aria-hidden="true" focusable="false" role="presentation" version="1.2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1, 0, 0, 1, 0, 0)" width="33" height="29"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M15.7955 15.8111L21 21M18 10.5C18 14.6421 14.6421 18 10.5 18C6.35786 18 3 14.6421 3 10.5C3 6.35786 6.35786 3 10.5 3C14.6421 3 18 6.35786 18 10.5Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
            </button>
          </div>

          {%- if settings.predictive_search_enabled -%}
            <div class="predictive-search predictive-search--header" tabindex="-1" data-predictive-search>
              <div class="predictive-search__loading-state">
                <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                  <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                </svg>
              </div>
            </div>

            <span class="predictive-search-status visually-hidden" role="status" aria-hidden="true"></span>
          {%- endif -%}
        </form>
      {%- if settings.predictive_search_enabled -%}
        </predictive-search>
      {%- endif -%} {% endcomment %}

      {%- if section.settings.customer_service -%}
        <div class="header-link header-dropdown">
          <a href="{%- if customer -%}{{ routes.account_url }}{%- else -%}{{ routes.account_login_url }}{%- endif -%}" class="header-icon-with-text full-unstyled-link{% if section.settings.menu != blank %} small-hide{% endif %}">
            <span class="header__icon header__icon--account link focus-inset">
              {{ 'icon-customer-service.svg' | inline_asset_content }}
              <span class="visually-hidden">
                {%- liquid
                    echo 'customer service'
                -%}
              </span>
            </span>
            {% if section.settings.get_help_text != blank %}
              <p class="account-text small-hide medium-hide">{{ section.settings.get_help_text | upcase }}</p>
            {% endif %}
          </a>
          {% assign help_menu = linklists[section.settings.get_help_menu].links %}
          {% if help_menu.size > 0 and section.settings.enable_get_help_dropdown %}
            <ul class="header-submenu">
              {% for menu_item in section.settings.get_help_menu.links %}
                <li><a href="{{ menu_item.url }}">{{ menu_item.title }}</a></li>
              {% endfor %}
            </ul>
          {% endif %}
        </div>
      {%- endif -%}

      {%- if shop.customer_accounts_enabled -%}
        <div class="header-link header-dropdown">
          <a href="{%- if customer -%}{{ routes.account_url }}{%- else -%}{{ routes.account_login_url }}{%- endif -%}" class="header-icon-with-text full-unstyled-link{% if section.settings.menu != blank %} small-hide{% endif %}">
            <span class="header__icon header__icon--account link focus-inset">
              {% render 'icon-account' %}
              <span class="visually-hidden">
                {%- liquid
                  if customer
                    echo 'customer.account_fallback' | t
                  else
                    echo 'customer.log_in' | t
                  endif
                -%}
              </span>
            </span>
            {% if section.settings.account_text != blank %}
              <p class="account-text small-hide medium-hide">{{ section.settings.account_text | upcase }}</p>
            {% endif %}
          </a>
          {% assign account_menu = linklists[section.settings.account_menu].links %}
          {% if account_menu.size > 0 and section.settings.enable_account_dropdown %}
            <ul class="header-submenu">
              {% for menu_item in account_menu %}
                <li><a href="{{ menu_item.url }}">{{ menu_item.title }}</a></li>
              {% endfor %}
            </ul>
          {% endif %}
        </div>
      {%- endif -%}

      <a href="{{ routes.cart_url }}" class="header__icon header__icon--cart link focus-inset" id="cart-icon-bubble">
        {%- render 'icon-cart' -%}
        
        <span class="visually-hidden">{{ 'templates.cart.cart' | t }}</span>
        {%- if cart != empty -%}
          <div class="cart-count-bubble">
            {%- if cart.item_count < 100 -%}
              <span aria-hidden="true">{{ cart.item_count }}</span>
            {%- endif -%}
            <span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
          </div>
        {%- endif -%}
      </a>
    </div>
  </header>
</{% if section.settings.enable_sticky_header %}sticky-header{% else %}div{% endif %}>

{%- if settings.cart_type == "notification" -%}
  {%- render 'cart-notification', color_scheme: section.settings.color_scheme -%}
{%- endif -%}

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const headerMenu = document.querySelector(".header__inline-menu");
    
    if (!headerMenu) return;
    
    const items = headerMenu.querySelectorAll("details");
    const body = document.body;

    items.forEach(item => {
      item.addEventListener("mouseover", () => {
        item.setAttribute("open", true);
        body.classList.add("overflow-hidden");
        
        const megaMenuWrap = item.querySelector(".mega-menu__wrap");
        if (megaMenuWrap) {
          megaMenuWrap.addEventListener("mouseleave", () => {
            item.removeAttribute("open");
            body.classList.remove("overflow-hidden");
          });
        }
        
        item.addEventListener("mouseleave", () => {
          item.removeAttribute("open");
          body.classList.remove("overflow-hidden");
        });
      });  
    });
  });
</script>

{% if section.settings.enable_sticky_header %}
<script>
  class StickyHeader extends HTMLElement {
    constructor() {
      super();
    }

    connectedCallback() {
      this.header = document.querySelector('section-header--container');
      this.headerBounds = {};
      this.currentScrollTop = 0;
      this.preventReveal = false;
      this.predictiveSearch = this.querySelector('predictive-search');

      this.onScrollHandler = this.onScroll.bind(this);
      this.hideHeaderOnScrollUp = () => this.preventReveal = true;

      this.addEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp);
      window.addEventListener('scroll', this.onScrollHandler, false);

      this.createObserver();
    }

    disconnectedCallback() {
      this.removeEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp);
      window.removeEventListener('scroll', this.onScrollHandler);
    }

    createObserver() {
      let observer = new IntersectionObserver((entries, observer) => {
        this.headerBounds = entries[0].intersectionRect;
        observer.disconnect();
      });

      observer.observe(this.header);
    }

    onScroll() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

      if (this.predictiveSearch && this.predictiveSearch.isOpen) return;

      if (scrollTop > this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
        if (this.preventHide) return;
        requestAnimationFrame(this.hide.bind(this));
      } else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
        if (!this.preventReveal) {
          requestAnimationFrame(this.reveal.bind(this));
        } else {
          window.clearTimeout(this.isScrolling);

          this.isScrolling = setTimeout(() => {
            this.preventReveal = false;
          }, 66);

          requestAnimationFrame(this.hide.bind(this));
        }
      } else if (scrollTop <= this.headerBounds.top) {
        requestAnimationFrame(this.reset.bind(this));
      }

      this.currentScrollTop = scrollTop;
    }

    hide() {
      this.header.classList.add('shopify-section-header-hidden', 'shopify-section-header-sticky');
      this.closeMenuDisclosure();
      this.closeSearchModal();
    }

    reveal() {
      this.header.classList.add('shopify-section-header-sticky', 'animate');
      this.header.classList.remove('shopify-section-header-hidden');
    }

    reset() {
      this.header.classList.remove('shopify-section-header-hidden', 'shopify-section-header-sticky', 'animate');
    }

    closeMenuDisclosure() {
      this.disclosures = this.disclosures || this.header.querySelectorAll('header-menu');
      this.disclosures.forEach(disclosure => disclosure.close());
    }

    closeSearchModal() {
      this.searchModal = this.searchModal || this.header.querySelector('details-modal');
      this.searchModal.close(false);
    }
  }

  customElements.define('sticky-header', StickyHeader);
  </script>
{% endif %}

<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "Organization",
    "name": {{ shop.name | json }},
    {% if section.settings.svg_logo != blank or section.settings.logo != blank %}
      "logo": {% if section.settings.svg_logo != blank %}{{ section.settings.svg_logo | json }}{% else %}{{ section.settings.logo | image_url: width: section.settings.logo.width | prepend: "https:" | json }}{% endif %},
    {% endif %}
    "sameAs": [
      {{ settings.social_twitter_link | json }},
      {{ settings.social_facebook_link | json }},
      {{ settings.social_pinterest_link | json }},
      {{ settings.social_instagram_link | json }},
      {{ settings.social_tiktok_link | json }},
      {{ settings.social_tumblr_link | json }},
      {{ settings.social_snapchat_link | json }},
      {{ settings.social_youtube_link | json }},
      {{ settings.social_vimeo_link | json }}
    ],
    "url": {{ request.origin | append: page.url | json }}
  }
</script>

{%- if request.page_type == 'index' -%}
  {% assign potential_action_target = request.origin | 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": {{ request.origin | append: page.url | json }}
    }
  </script>
{%- endif -%}

{% schema %}
{
  "name": "t:sections.header.name",
  "class": "section-header section-header--container",
  "settings": [
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.all.colors.accent_1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.all.colors.accent_2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.all.colors.background_1.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.all.colors.background_2.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.all.colors.inverse.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.all.colors.label"
    },
    {
      "type": "image_picker",
      "id": "logo",
      "label": "t:sections.header.settings.logo.label"
    },
    {
      "type": "range",
      "id": "logo_width",
      "min": 50,
      "max": 250,
      "step": 10,
      "default": 100,
      "unit": "t:sections.header.settings.logo_width.unit",
      "label": "t:sections.header.settings.logo_width.label"
    },
    {
      "type": "select",
      "id": "logo_position",
      "options": [
        {
          "value": "middle-left",
          "label": "t:sections.header.settings.logo_position.options__1.label"
        },
        {
          "value": "top-left",
          "label": "t:sections.header.settings.logo_position.options__2.label"
        },
        {
          "value": "top-center",
          "label": "t:sections.header.settings.logo_position.options__3.label"
        }
      ],
      "default": "middle-left",
      "label": "t:sections.header.settings.logo_position.label",
      "info": "t:sections.header.settings.logo_position.info"
    },
    {
      "type": "header",
      "content": "Navigation"
    },
    {
      "type": "color",
      "id": "menu_bar_color",
      "label": "Bottom menu-bar color",
      "visible_if": "{{ section.settings.logo_position == 'top-left' }}"
    },
    {
      "type": "color",
      "id": "menu_text_color",
      "label": "Bottom menu-text color",
      "visible_if": "{{ section.settings.logo_position == 'top-left' }}"
    },
    {
      "type": "header",
      "content": "Annoucement"
    },
    {
      "type": "checkbox",
      "id": "auto_rotate",
      "label": "t:sections.announcement-bar.settings.auto_rotate.label",
      "default": false
    },
    {
      "type": "range",
      "id": "change_slides_speed",
      "min": 3,
      "max": 10,
      "step": 1,
      "unit": "s",
      "label": "t:sections.announcement-bar.settings.change_slides_speed.label",
      "default": 5
    },
    {
      "type": "select",
      "id": "announcement_color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.all.colors.accent_1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.all.colors.accent_2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.all.colors.background_1.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.all.colors.background_2.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.all.colors.inverse.label"
        }
      ],
      "default": "accent-1",
      "label": "t:sections.all.colors.label"
    },
    {
      "type": "link_list",
      "id": "menu",
      "default": "main-menu",
      "label": "t:sections.header.settings.menu.label"
    },
    {
      "type": "select",
      "id": "menu_type_desktop",
      "options": [
        {
          "value": "dropdown",
          "label": "t:sections.header.settings.menu_type_desktop.options__1.label"
        },
        {
          "value": "mega",
          "label": "t:sections.header.settings.menu_type_desktop.options__2.label"
        }
      ],
      "default": "dropdown",
      "label": "t:sections.header.settings.menu_type_desktop.label",
      "info": "t:sections.header.settings.menu_type_desktop.info"
    },
    {
      "type": "checkbox",
      "id": "show_line_separator",
      "default": true,
      "label": "t:sections.header.settings.show_line_separator.label"
    },
    {
      "type": "checkbox",
      "id": "enable_sticky_header",
      "default": true,
      "label": "t:sections.header.settings.enable_sticky_header.label",
      "info": "t:sections.header.settings.enable_sticky_header.info"
    },
    {
      "type": "checkbox",
      "id": "customer_service",
      "default": true,
      "label": "Customer service"
    },
    {
      "type": "header",
      "content": "Get help"
    },
    {
      "type": "text",
      "id": "get_help_text",
      "label": "Text",
      "default": "Get help"
    },
    {
      "type": "checkbox",
      "id": "enable_get_help_dropdown",
      "default": true,
      "label": "Get help dropdown"
    },
    {
      "type": "link_list",
      "id": "get_help_menu",
      "label": "Get help menu"
    },
    {
      "type": "header",
      "content": "Account"
    },
    {
      "type": "text",
      "id": "account_text",
      "label": "Text",
      "default": "Account"
    },
    {
      "type": "checkbox",
      "id": "enable_account_dropdown",
      "default": true,
      "label": "Account dropdown"
    },
    {
      "type": "link_list",
      "id": "account_menu",
      "label": "Account menu"
    },
    {
      "type": "header",
      "content": "t:sections.all.spacing"
    },
    {
      "type": "range",
      "id": "margin_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.header.settings.margin_bottom.label",
      "default": 0
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 36,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 20
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 36,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 20
    }
  ],
  "blocks": [
    {
      "type": "megamenu",
      "name": "Megamenu",
      "settings": [
        {
          "type": "checkbox",
          "id": "contains_featured_col",
          "label": "Contains featured column?"
        },
        {
          "type": "select",
          "id": "select_main_menu",
          "label": "Main menu item",
          "options": [
            {
              "value": "1",
              "label": "Main menu item 1"
            },
            {
              "value": "2",
              "label": "Main menu item 2"
            },
            {
              "value": "3",
              "label": "Main menu item 3"
            },
            {
              "value": "4",
              "label": "Main menu item 4"
            },
            {
              "value": "5",
              "label": "Main menu item 5"
            },
            {
              "value": "6",
              "label": "Main menu item 6"
            },
            {
              "value": "7",
              "label": "Main menu item 7"
            },
            {
              "value": "8",
              "label": "Main menu item 8"
            },
            {
              "value": "9",
              "label": "Main menu item 9"
            },
            {
              "value": "10",
              "label": "Main menu item 10"
            },
            {
              "value": "11",
              "label": "Main menu item 10"
            },
            {
              "value": "12",
              "label": "Main menu item 10"
            }
          ]
        },
        {
          "type": "range",
          "id": "menu_columns",
          "label": "Menu Columns",
          "min": 0,
          "max": 5,
          "default": 2
        },
        {
          "type": "header",
          "content": "Menu Columns"
        },
        {
          "type": "header",
          "content": "First Columns"
        },
        {
          "type": "select",
          "id": "featured_color_scheme",
          "options": [
            {
              "value": "accent-1",
              "label": "t:sections.all.colors.accent_1.label"
            },
            {
              "value": "accent-2",
              "label": "t:sections.all.colors.accent_2.label"
            },
            {
              "value": "background-1",
              "label": "t:sections.all.colors.background_1.label"
            },
            {
              "value": "background-2",
              "label": "t:sections.all.colors.background_2.label"
            },
            {
              "value": "inverse",
              "label": "t:sections.all.colors.inverse.label"
            }
          ],
          "default": "background-2",
          "label": "t:sections.all.colors.label",
          "visible_if": "{{ block.settings.contains_featured_col == true }}"
        },
        {
          "type": "text",
          "id": "column1_menu1_heading",
          "label": "Menu heading 1"
        },
        {
          "type": "url",
          "id": "column1_menu1_heading_link",
          "label": "Menu heading link 1"
        }, 
        {
          "type": "link_list",
          "id": "column1_menu1",
          "label": "Menu 1"
        },
        {
          "type": "text",
          "id": "column1_menu2_heading",
          "label": "Menu heading 2"
        },
        {
          "type": "url",
          "id": "column1_menu2_heading_link",
          "label": "Menu heading link 2"
        }, 
        {
          "type": "link_list",
          "id": "column1_menu2",
          "label": "Menu 2"
        },
        {
          "type": "text",
          "id": "featured_button",
          "label": "Button text",
          "visible_if": "{{ block.settings.contains_featured_col == true }}"
        },
        {
          "type": "url",
          "id": "feartured_url",
          "label": "Button URL",
          "visible_if": "{{ block.settings.contains_featured_col == true }}"
        },
        {
          "type": "image_picker",
          "id": "column1_image",
          "label": "Image",
          "visible_if": "{{ block.settings.contains_featured_col == false }}"
        },
        {
          "type": "url",
          "id": "column1_url",
          "label": "URL",
          "visible_if": "{{ block.settings.contains_featured_col == false }}"
        },
        {
          "type": "richtext",
          "id": "column1_label",
          "label": "Label",
          "visible_if": "{{ block.settings.contains_featured_col == false }}"
        },
        {
          "type": "header",
          "content": "Second Column"
        },    
        {
          "type": "text",
          "id": "column2_menu1_heading",
          "label": "Menu heading 1"
        },
        {
          "type": "url",
          "id": "column2_menu1_heading_link",
          "label": "Menu heading link 1"
        }, 
        {
          "type": "link_list",
          "id": "column2_menu1",
          "label": "Menu 1"
        },
        {
          "type": "text",
          "id": "column2_menu2_heading",
          "label": "Menu heading 2"
        },
        {
          "type": "url",
          "id": "column2_menu2_heading_link",
          "label": "Menu heading link 2"
        }, 
        {
          "type": "link_list",
          "id": "column2_menu2",
          "label": "Menu 2"
        },
        {
          "type": "image_picker",
          "id": "column2_image",
          "label": "Image"
        },
        {
          "type": "url",
          "id": "column2_url",
          "label": "URL"
        },
        {
          "type": "richtext",
          "id": "column2_label",
          "label": "Label"
        },
        {
          "type": "header",
          "content": "Third Column"
        },        
        {
          "type": "text",
          "id": "column3_menu1_heading",
          "label": "Menu heading 1"
        },
        {
          "type": "url",
          "id": "column3_menu1_heading_link",
          "label": "Menu heading link 1"
        }, 
        {
          "type": "link_list",
          "id": "column3_menu1",
          "label": "Menu 1"
        },
        
        {
          "type": "text",
          "id": "column3_menu2_heading",
          "label": "Menu heading 2"
        },
        {
          "type": "url",
          "id": "column3_menu2_heading_link",
          "label": "Menu heading link 2"
        }, 
        {
          "type": "link_list",
          "id": "column3_menu2",
          "label": "Menu 2"
        },
        {
          "type": "image_picker",
          "id": "column3_image",
          "label": "Image"
        },
        {
          "type": "url",
          "id": "column3_url",
          "label": "URL"
        },
        {
          "type": "richtext",
          "id": "column3_label",
          "label": "Label"
        },
        {
          "type": "header",
          "content": "Fourth Column"
        },        
        {
          "type": "text",
          "id": "column4_menu1_heading",
          "label": "Menu heading 1"
        },
        {
          "type": "url",
          "id": "column4_menu1_heading_link",
          "label": "Menu heading link 1"
        }, 
        {
          "type": "link_list",
          "id": "column4_menu1",
          "label": "Menu 1"
        },
        {
          "type": "text",
          "id": "column4_menu2_heading",
          "label": "Menu heading 2"
        },
        {
          "type": "url",
          "id": "column4_menu2_heading_link",
          "label": "Menu heading link 2"
        }, 
        {
          "type": "link_list",
          "id": "column4_menu2",
          "label": "Menu 2"
        },
        {
          "type": "image_picker",
          "id": "column4_image",
          "label": "Image"
        },
        {
          "type": "url",
          "id": "column4_url",
          "label": "URL"
        },
        {
          "type": "richtext",
          "id": "column4_label",
          "label": "Label"
        },
        {
          "type": "header",
          "content": "Fifth Column"
        },        
        {
          "type": "text",
          "id": "column5_menu1_heading",
          "label": "Menu heading 1"
        },
        {
          "type": "url",
          "id": "column5_menu1_heading_link",
          "label": "Menu heading link 1"
        }, 
        {
          "type": "link_list",
          "id": "column5_menu1",
          "label": "Menu 1"
        },
        {
          "type": "text",
          "id": "column5_menu2_heading",
          "label": "Menu heading 2"
        },
        {
          "type": "url",
          "id": "column5_menu2_heading_link",
          "label": "Menu heading link 2"
        }, 
        {
          "type": "link_list",
          "id": "column5_menu2",
          "label": "Menu 2"
        },
        {
          "type": "image_picker",
          "id": "column5_image",
          "label": "Image"
        },
        {
          "type": "url",
          "id": "column5_url",
          "label": "URL"
        },
        {
          "type": "richtext",
          "id": "column5_label",
          "label": "Label"
        },
        {
          "type": "header",
          "content": "Footer"
        },
        {
          "type": "richtext",
          "id": "footer_heading",
          "label": "Footer heading"
        },
        {
          "type": "url",
          "id": "footer_heading_link",
          "label": "Footer link"
        },
        {
          "type": "metaobject_list",
          "id": "popular_brands",
          "label": "Popular brands",
          "metaobject_type": "popular_brands",
          "limit": 6
        }
      ]
    },
    {
      "type": "announcement",
      "name": "t:sections.announcement-bar.blocks.announcement.name",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "default": "Welcome to our store",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
        },
        {
          "type": "select",
          "id": "text_alignment",
          "options": [
            {
              "value": "left",
              "label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__1.label"
            },
            {
              "value": "center",
              "label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__2.label"
            },
            {
              "value": "right",
              "label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__3.label"
            }
          ],
          "default": "center",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.label"
        },
        {
          "type": "url",
          "id": "link",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
        }
      ]
    }
  ]
}
{% endschema %}