/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 16:49 Expected identifier but found "%"
Line 17:0 Unexpected "{"
Line 17:1 Expected identifier but found "%"
Line 18:0 Unexpected "{"
Line 18:1 Expected identifier but found "%"
Line 20:0 Unexpected "{"
Line 20:1 Expected identifier but found "%"
Line 22:0 Unexpected "{"
... and 97 more hidden warnings

**/
{% comment %} ------- SAFE HEADER START ------- {% endcomment %}
{% include 'drawer-nav' %}
{% include 'drawer-cart' %}

{%- assign show_announcement_bar = section.settings.show_announcement_bar -%}

{% if show_announcement_bar %}
  <div id="announcement-bar" class="announcement-bar">
    {% if section.settings.notification_bar_text != blank %}
      {% if section.settings.notification_bar_link != blank %}
        <a href="{{ section.settings.notification_bar_link }}" class="announcement-text">
          {{ section.settings.notification_bar_text | escape }}
        </a>
      {% else %}
        <span class="announcement-text">{{ section.settings.notification_bar_text | escape }}</span>
      {% endif %}
    {% endif %}

    <div class="announcement-actions">
      {% if shop.customer_accounts_enabled %}
        <a class="announcement-action" href="/account" aria-label="{{ 'layout.navigation.account' | t | default: 'Account' }}">
          <svg class="icon" aria-hidden="true"><use xlink:href="#icon-account"></use></svg>
        </a>
      {% endif %}
      <a class="announcement-action" href="/search" aria-label="{{ 'layout.navigation.search' | t | default: 'Search' }}">
        <svg class="icon" aria-hidden="true"><use xlink:href="#icon-search"></use></svg>
      </a>
      <a class="announcement-action js-drawer-open-CartDrawer" href="/cart" aria-controls="CartDrawer" aria-label="{{ 'layout.navigation.cart' | t | default: 'Cart' }}">
        <svg class="icon" aria-hidden="true"><use xlink:href="#icon-cart"></use></svg>
      </a>
    </div>
  </div>
{% endif %}

<header
  role="banner"
  class="site-header is-moved-by-drawer {% if section.settings.sticky_header %}sticky-header{% endif %}"
  data-sticky-header="{{ section.settings.sticky_header }}"
>
  <div class="header-bar{% if settings.enable_max_width_container %} max-width-container{% endif %}">
    <!-- LEFT: Logo -->
    <div class="header-left">
      {% assign mobileW = section.settings.logo_mobile_max_width | default: '180' | remove: 'px' | append: 'x' | escape %}
      <a href="/" class="logo-link" aria-label="{{ shop.name }}">
        {% if section.settings.logo_image != blank %}
          <img class="logo-image logo--desktop"
               src="{{ section.settings.logo_image | img_url: '900x' }}"
               alt="{{ shop.name }}" itemprop="logo">
        {% else %}
          <span class="site-header__link logo--desktop">{{ shop.name }}</span>
        {% endif %}

        {% if section.settings.logo_mobile_image != blank %}
          <img class="logo-image logo--mobile"
               src="{{ section.settings.logo_mobile_image | img_url: mobileW }}"
               alt="{{ shop.name }}" itemprop="logo">
        {% endif %}
      </a>
    </div>

    <!-- MENU (near left logo) -->
    <div class="header-menu">
      {% assign main_menu = linklists[section.settings.nav_linklist] %}
      {% if main_menu and main_menu.links.size > 0 %}
      <nav class="main-navigation" role="navigation" aria-label="main-navigation">
        <ul>
          {% for l1 in main_menu.links %}
            <li class="{% if l1.links and l1.links.size > 0 %}has-dropdown{% endif %}">
              <a href="{{ l1.url }}" class="{% if l1.active %}is-active{% endif %}">{{ l1.title }}</a>

              {% if l1.links and l1.links.size > 0 %}
                <!-- Level 2: horizontal ribbon -->
                <div class="dropdown dropdown--level1">
                  <ul>
                    {% for l2 in l1.links %}
                      <li class="lvl2 {% if l2.links and l2.links.size > 0 %}has-flyout{% endif %}">
                        <a href="{{ l2.url }}" class="{% if l2.active %}is-active{% endif %}">{{ l2.title }}</a>

                        {% if l2.links and l2.links.size > 0 %}
                          <!-- Level 3: compact flyout -->
                          <div class="dropdown dropdown--level2">
                            <ul>
                              {% for l3 in l2.links %}
                                <li class="lvl3"><a href="{{ l3.url }}" class="{% if l3.active %}is-active{% endif %}">{{ l3.title }}</a></li>
                              {% endfor %}
                            </ul>
                          </div>
                        {% endif %}
                      </li>
                    {% endfor %}
                  </ul>
                </div>
              {% endif %}
            </li>
          {% endfor %}
        </ul>
      </nav>
      {% endif %}
    </div>

    <!-- RIGHT: Logo -->
    <div class="header-right">
      {% if section.settings.logo_right_image != blank %}
        <a href="{{ section.settings.logo_right_link | default: '/' }}" class="logo-link" aria-label="{{ shop.name }} right">
          <img class="logo-image"
               src="{{ section.settings.logo_right_image | img_url: '900x' }}"
               alt="{{ shop.name }} - right logo" itemprop="logo">
        </a>
      {% endif %}
    </div>

    <!-- MOBILE: Hamburger -->
    <button class="hamburger-btn js-drawer-open-NavDrawer" aria-controls="NavDrawer" aria-expanded="false" aria-label="{{ 'layout.navigation.menu' | t }}">
      <span class="icon hamburger-svg">
        <svg><use xlink:href="#icon-burger"></use></svg>
      </span>
    </button>
  </div>

  <div id="HeaderSearchBar">
    {% include 'search-bar' %}
  </div>
</header>

<style>
/* ---- RESET / BASE SAFE ---- */
.site-header, .max-width-container, .header-bar, .header-menu { overflow: visible; }
:root{
  --logo-h-desktop: {{ section.settings.logo_height_desktop | default: 72 }}px;
  --logo-h-mobile:  {{ section.settings.logo_height_mobile  | default: 40 }}px;
}

/* Announcement bar (no dependencies) */
#announcement-bar.announcement-bar{
  display:flex; align-items:center; gap:12px;
  width:100%; padding:6px 16px; background:#fff;
}
#announcement-bar .announcement-text{ margin-right:auto; color:#111; text-decoration:none; }
#announcement-bar .announcement-actions{ margin-left:auto; display:inline-flex; gap:12px; align-items:center; }
#announcement-bar .announcement-action .icon{ width:22px; height:22px; fill:#111; display:inline-block; }

/* Header layout: logo sx | menu | spacer | logo dx */
.header-bar{ display:grid; grid-template-columns:auto auto 1fr auto; align-items:baseline; gap:24px; min-height:90px; position:relative; }
.header-left{ justify-self:start; }
.header-menu{ justify-self:start; display:flex; align-items:center; margin-left:36px; position:relative; z-index:5; }
.header-right{ justify-self:end; }

.logo-link{ display:inline-flex; align-items:center; line-height:0; }
.logo-image{ height:auto; width:auto; vertical-align:middle; }

/* Uniform logo heights (desktop) */
@media (min-width:841px){
  .logo--desktop{ display:inline; max-height: var(--logo-h-desktop); }
  .logo--mobile{ display:none; }
  .hamburger-btn{ display:none; }
}
/* Mobile */
@media (max-width:840px){
  .header-bar{ grid-template-columns:1fr; min-height:64px; }
  .header-menu, .header-right{ display:none !important; }
  .logo--desktop{ display:none; }
  .logo--mobile{ display:inline; max-height: var(--logo-h-mobile); }
  .hamburger-btn{
    display:inline-flex; position:absolute; right:12px; top:50%; transform:translateY(-50%);
    background:transparent; border:0; padding:10px; min-width:40px; min-height:40px; z-index:3;
  }
}

/* Top-level menu with underline */
@media (min-width:841px){
  .main-navigation > ul{ display:flex; gap:36px; margin:0; padding:0; list-style:none; }
  .main-navigation li{ position:relative; }
  .main-navigation a{
    position:relative; text-transform:uppercase; letter-spacing:.02em; text-decoration:none; color:#111;
    padding-bottom:6px; display:inline-block; white-space:nowrap;
  }
  .main-navigation a::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:#111;
    transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
  }
  .main-navigation a:hover::after, .main-navigation a.is-active::after{ transform:scaleX(1); }
}

/* Dropdown L2 = ribbon; L3 = compact flyout */
@media (min-width:841px){
  .dropdown{ display:none; }

  .dropdown--level1{
    position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%);
    background:#fff; border:1px solid rgba(0,0,0,.06); box-shadow:0 8px 24px rgba(0,0,0,.12);
    padding:12px 18px; z-index:60; min-width:520px; max-width:70vw;
  }
  .dropdown--level1 ul{ margin:0; padding:0; list-style:none; display:flex; gap:28px; align-items:center; flex-wrap:nowrap; }
  .dropdown--level1 .lvl2 > a{
    display:inline-block; padding:6px 0; color:#111; text-transform:uppercase; letter-spacing:.02em;
    border-bottom:2px solid transparent; transition:border-color .18s ease; white-space:nowrap;
  }
  .dropdown--level1 .lvl2 > a:hover, .dropdown--level1 .lvl2 > a.is-active{ border-bottom-color:#111; }

  .lvl2{ position:relative; }
  .lvl2.has-flyout > a::after{ content:"›"; font-size:12px; margin-left:8px; opacity:.6; }

  .dropdown--level2{
    position:absolute; top:100%; left:0; transform:translateY(6px);
    background:#fff; border:1px solid rgba(0,0,0,.06); box-shadow:0 8px 24px rgba(0,0,0,.12);
    padding:8px 0; min-width:220px; z-index:70;
  }
  .dropdown--level2 ul{ margin:0; padding:0; list-style:none; }
  .dropdown--level2 .lvl3 > a{ display:block; padding:10px 14px; color:#111; }
  .dropdown--level2 .lvl3 > a:hover{ background:#f5f5f5; }

  .main-navigation li.has-dropdown:hover > .dropdown--level1,
  .main-navigation li.has-dropdown:focus-within > .dropdown--level1{ display:block; }

  .dropdown--level1 .lvl2.has-flyout:hover > .dropdown--level2,
  .dropdown--level1 .lvl2.has-flyout:focus-within > .dropdown--level2{ display:block; }
}
</style>

{% schema %}
{
  "name": "Header",
  "class": "header",
  "settings": [
    { "type": "checkbox", "id": "sticky_header", "label": "Enable sticky header", "default": true },

    { "type": "header", "content": "Navigation" },
    { "type": "link_list", "id": "nav_linklist", "label": "Main menu", "default": "main-menu" },

    { "type": "header", "content": "Logos" },
    { "type": "image_picker", "id": "logo_image", "label": "Left logo image" },
    { "type": "image_picker", "id": "logo_right_image", "label": "Right logo image" },
    { "type": "url", "id": "logo_right_link", "label": "Right logo link" },

    { "type": "header", "content": "Logo sizes" },
    { "type": "range", "id": "logo_height_desktop", "label": "Desktop logo height", "min": 40, "max": 120, "step": 2, "unit": "px", "default": 72 },
    { "type": "range", "id": "logo_height_mobile", "label": "Mobile logo height", "min": 24, "max": 100, "step": 2, "unit": "px", "default": 40 },

    { "type": "header", "content": "Mobile Logo (optional)" },
    { "type": "image_picker", "id": "logo_mobile_image", "label": "Mobile logo image" },
    { "type": "text", "id": "logo_mobile_max_width", "label": "Mobile logo width (px)", "default": "180" },

    { "type": "header", "content": "Announcement bar" },
    { "type": "checkbox", "id": "show_announcement_bar", "label": "Show announcement" },
    { "type": "text", "id": "notification_bar_text", "label": "Text" },
    { "type": "url", "id": "notification_bar_link", "label": "Link" }
  ]
}
{% endschema %}
{% comment %} ------- SAFE HEADER END ------- {% endcomment %}