/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Unexpected "{"
Line 16:3 Expected identifier but found "'header.css'"
Line 18:0 Unexpected "<"
Line 23:5 Expected identifier but found "%"
Line 23:32 Expected identifier but found "%"
Line 24:4 Unexpected "<"
Line 42:5 Expected identifier but found "%"
Line 42:26 Expected identifier but found "%"
Line 43:4 Unexpected "<"
... and 37 more hidden warnings

**/
{{ 'header.css' | asset_url | stylesheet_tag }}

<header class="site-header">

  <!-- TOP ROW -->
  <div class="site-header__top">

    {%- comment -%} SEARCH BAR {%- endcomment -%}
    <div class="site-header__search">
      <form action="{{ routes.search_url }}" method="get" role="search" class="search-form">
        <input
          type="search"
          name="q"
          class="search-form__input"
          placeholder="{{ section.settings.search_placeholder | default: 'Search for products' }}"
          value="{{ search.terms | escape }}"
        >
        <button type="submit" class="search-form__submit" aria-label="Search">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="11" cy="11" r="7"></circle>
            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
          </svg>
        </button>
      </form>
    </div>

    {%- comment -%} LOGO {%- endcomment -%}
    <div class="site-header__logo">
      <a href="{{ routes.root_url }}">
        {%- if section.settings.logo != blank -%}
          {{ section.settings.logo | image_url: width: 300 | image_tag:
            widths: '150,200,300,500',
            alt: section.settings.logo.alt | default: shop.name,
            class: 'site-header__logo-image'
          }}
        {%- else -%}
          <span class="site-header__logo-text">{{ shop.name }}</span>
        {%- endif -%}
      </a>
    </div>

    {%- comment -%} ICONS {%- endcomment -%}
    <div class="site-header__icons">

      <!-- ACCOUNT -->
      <a href="{{ routes.account_url }}" class="header-icon" aria-label="Account">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.6">
          <circle cx="12" cy="8" r="4"></circle>
          <path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"></path>
        </svg>
      </a>

      <!-- WISHLIST -->
      <a href="{{ section.settings.wishlist_url | default: '#' }}" class="header-icon" aria-label="Wishlist">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.6">
          <path d="M12 21s-7.5-4.6-10-9.3C.5 8 2.4 4 6.4 4c2.1 0 3.7 1.2 5.6 3.3C13.9 5.2 15.5 4 17.6 4c4 0 5.9 4 3.4 7.7C19.5 16.4 12 21 12 21z"></path>
        </svg>
        <span class="header-icon__badge" data-wishlist-count>
          {{ section.settings.wishlist_count }}
        </span>
      </a>

      <!-- CART -->
      <a href="{{ routes.cart_url }}" class="header-icon" aria-label="Cart">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.6">
          <circle cx="9" cy="21" r="1"></circle>
          <circle cx="20" cy="21" r="1"></circle>
          <path d="M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6"></path>
        </svg>
        <span class="header-icon__badge header-icon__badge--dark" data-cart-count>
          {{ cart.item_count }}
        </span>
      </a>

    </div>
  </div>

  <!-- BOTTOM MENU -->
  <nav class="site-header__nav" aria-label="Main menu">

    <ul class="site-header__nav-list">

      {%- if section.settings.menu != blank -%}
        {%- for link in section.settings.menu.links -%}
          <li class="site-header__nav-item">
            <a href="{{ link.url }}" class="site-header__nav-link {% if link.current %}is-active{% endif %}">
              {{ link.title }}
            </a>
          </li>
        {%- endfor -%}
      {%- endif -%}

    </ul>

  </nav>

</header>

{% schema %}
{
  "name": "Header",
  "settings": [
    {
      "type": "image_picker",
      "id": "logo",
      "label": "Logo image"
    },
    {
      "type": "text",
      "id": "search_placeholder",
      "label": "Search placeholder text",
      "default": "Search for products"
    },
    {
      "type": "url",
      "id": "wishlist_url",
      "label": "Wishlist page URL"
    },
    {
      "type": "range",
      "id": "wishlist_count",
      "label": "Wishlist count (static fallback)",
      "min": 0,
      "max": 99,
      "step": 1,
      "default": 0
    },
    {
      "type": "link_list",
      "id": "menu",
      "label": "Menu",
      "default": "main-menu"
    }
  ],
  "presets": [
    {
      "name": "Custom Header"
    }
  ]
}
{% endschema %}
