/** 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 26:1 Expected identifier but found "%"
Line 27:2 Unexpected "<"
Line 34:1 Expected identifier but found "%"
Line 36:0 Unexpected "{"
Line 36:1 Expected identifier but found "%"
Line 49:0 Unexpected "{"
... and 336 more hidden warnings

**/
{{ 'header.css' | asset_url | stylesheet_tag }}

<link
  rel="stylesheet"
  href="{{ 'component-cart-notification.css' | asset_url }}"
  media="print"
  onload="this.media='all'"
>
<link rel="stylesheet" href="{{ 'component-search.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 -%}

{%- liquid
  assign container = ''
  if section.settings.container == 'container'
    assign container = 'container'
  elsif section.settings.container == 'container-fluid'
    assign container = 'container-fluid'
  else
    assign container = 'container-fluid px-0'
  endif
-%}



{%- liquid
  assign sticky = ''
  if section.settings.header_sticky
    assign sticky = 'header__sticky'
  endif

  if section.settings.transparent_header and request.page_type == 'index'
    assign transparent = 'transparent--header'
    assign color_enable = section.settings.transparent_header
  endif

  if section.settings.logo_2 != blank
    assign sm_none = 'd-sm-none'
    assign sm_visible = 'd-sm-only-visible'
  else
    assign sm_visible = 'd-none'
  endif

  unless request.page_type == 'index'
    if section.settings.logo_2 != blank
      assign sm_none_other = 'd-sm-none'
      assign sm_visible_other = 'd-sm-only-visible'
    else
      assign sm_visible_other = 'd-none'
    endif
  endunless

  assign cart_icon = section.settings.show_cart
-%}

<noscript>{{ 'header.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-cart-notification.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-search.css' | asset_url | stylesheet_tag }}</noscript>
{{ 'header-drawer.css' | asset_url | stylesheet_tag }}
{%- if section.settings.quick_drawer_button -%}
  {{ 'quick-drawer-button.css' | asset_url | stylesheet_tag }}
{%- endif -%}

<script src="{{ 'menu-product-slider.js' | asset_url }}" defer="defer"></script>

<style>
  .header__sticky.sticky {
    position: fixed;
    width: 100%;
    top: 0;
    background: rgb(var(--color-background));
    left: 0;
    z-index: 98;
    padding: 10px 0;
    box-shadow: 0 0 7px rgb(0 0 0 / 15%);
    transition: .5s;
   }
  
  /* Duplicate rule for .header_bottom.sticky to ensure robustness when header__sticky is toggled off */
  .header_bottom.sticky {
    position: fixed;
    width: 100%;
    top: 0;
    background: rgb(var(--color-background));
    left: 0;
    z-index: 98;
    padding: 10px 0;
    box-shadow: 0 0 7px rgb(0 0 0 / 15%);
    transition: .5s;
   }
  /* Header Inner */
  .header__inner {
    align-items: center;
    justify-content: space-between;
  }

  /* Header Logo */
  .header__menu {
    display: flex;
  }
  .header__menu_ul {
    display: flex;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
    margin: 0;
  }
  .header__menu_li {
    position: relative;
    flex-shrink: 0;
  }
  .header__menu_li + .header__menu_li {
      /* margin-left: 2rem; */
      margin-inline-start: 2rem;
  }
  @media only screen and (min-width: 1200px){
    .header__menu_li + .header__menu_li {
      /* margin-left: 2.5rem; */
      margin-inline-start: 2.5rem;
    }
  }
  .header__menu_li:hover .header__menu_item::before {
    right: auto;
    left: 0;
    width: 100%;
  }

  .header__menu_li_child_mega_menu {
    position: static;
  }
  .header__menu_li_child_mega_menu_collection {
    position: static;
  }
  .header__menu_li_child_mega_menu_custom {
    position: static;
  }
  .header__menu_item {
      line-height: 1;
      position: relative;
      display: block;
      padding: 25px 0;
      color: rgba(var(--color-foreground));
      font-size: 1.4rem;
      word-break: break-word;
      text-transform: uppercase;
      font-weight: 600;
  }
  /* Header Actions Buttons */
  .header__actions {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .header__actions_btn {
    position: relative;
    display: flex;
    padding: 8px;
    color: rgba(var(--color-foreground));
    background: none;
    border: none;
  }
  .header__actions_btn:hover {
    color: rgba(var(--color-foreground),0.7);
  }
  .header__actions_btn svg {
    width: auto;
    height: 2rem;
  }
  .header__actions_btn--cart {
    padding-right: 10px;
  }
  .header__actions_btn_cart_num {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    position: absolute;
    top: -2px;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: rgb(var(--color-button-text));
    border-radius: 50%;
    background-color: rgba(var(--color-button), 1);
    letter-spacing: 0;
  }
  /* Off Canvas Mini Cart */
  #offcanvas__mini_cart {
    position: fixed;
    width: 380px;
    background: #fff;
    height: 100%;
    right: 0;
    z-index: 99;
    top: 0;
    right: 0;
    opacity: 0;
    visibility: hidden;
    background-color: rgb(var(--color-background));
    background: var(--gradient-background);
    border-color: rgba(var(--color-foreground), 0.2);
    transform: translateX(100%);
    transition: all 0.3s ease 0s;
  }
    @media only screen and (max-width: 400px){
      #offcanvas__mini_cart {
        width: 100%;
      }
    }
    @media only screen and (min-width: 992px){
      #offcanvas__mini_cart {
        width: 420px;
      }
    }

  .cart-notification-wrapper {
    position: relative;
    z-index: 9;
  }

  .cart-notification__header {
    align-items: flex-start;
    display: flex;
  }

  .cart-notification__heading {
    align-items: center;
    display: flex;
    flex-grow: 1;
    margin-bottom: 0;
    margin-top: 0;
  }

  .cart-notification__heading .icon-checkmark {
    color: rgb(var(--color-foreground));
    margin-right: 1rem;
    width: 1.3rem;
  }

  .cart-notification__links > * {
    margin-top: 1rem;
  }

  /* Offcanvas Search bar css  */
  .header__actions_btn:is(.d-md-only-block) {
    display: none;
  }
  predictive-search.header-search--box.search-modal__form {
    margin-inline-end: 10px;
  }
  .header-search--box .input__field {
    height: 40px;
  }
  @media only screen and (min-width: 1200px){
    .header-search--box .input__field {
      width: 360px;
    }
  }
  .header-search--box .search__button .icon {
    height: 20px;
    width: 22px;
    background: transparent;
  }

  #predictive__search_overlay {
    position: fixed;
    width: 100%;
    height: 200px;
    background: rgba(var(--color-background));
    left: 0;
    top: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 998;
    transition: all 0.3s ease 0s;
    transform: translateY(-100%);
      display: flex;
    justify-content: center;
  }

  div#predictive__search_overlay.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .search__content_inner {
    display: flex;
    justify-content: center;
    height: 100%;
    align-items: center;
    flex-direction: row-reverse;
    width: 600px;
    padding: 0 20px;
  }
  button#search__close_btn {
    margin-inline-start: 30px;
  }
  predictive-search.search-modal__form {
      position: relative;
  }
  search-modal:is(.active) .offcanvas-overlay {
    opacity: 0.4;
    visibility: visible;
  }

  #predictive__search_overlay {
    position: fixed;
    width: 100%;
    background: #fff;
    height: 350px;
    right: 0;
    z-index: 99;
    top: 0;
    left: auto;
    opacity: 0;
    visibility: hidden;
    background-color: rgb(var(--color-background));
    border-color: rgba(var(--color-foreground), 0.2);
    transform: translateY(-100%);
    transition: all 0.3s ease 0s;
  }
  search-modal.active #predictive__search_overlay {
    transform: translate(0);
    opacity: 1;
    visibility: visible;
  }
  #predictive__search_overlay.active + .offcanvas-overlay, #quick__information_overlay.active + .offcanvas-overlay {
    visibility: visible;
    opacity: 0.5;
  }
  /* Header Mobile css  */
  .mobile__menu_bar .icon-hamburger {
      width: 22px;
      height: 22px;
      color: rgba(var(--color-foreground));
  }

  a.header__logo_link {
      word-break: break-word;
      max-width: 300px;
      padding: 0px 0;
      display: flex;
  }
  @media only screen and (max-width: 991px){
    a.header__logo_link {
      text-align: center;
    }
    .header__actions a:first-child {
      padding-left: 0;
    }
  }
  @media only screen and (max-width: 600px){
    a.header__logo_link {
      max-width: 230px;
    }
  }
  @media only screen and (max-width: 400px){
    a.header__logo_link {
      max-width: 160px;
    }
  }

  @media only screen and (min-width: 992px){
    .quick--drawer-button-color{
       --color-foreground: {{ section.settings.color_foreground.red }}, {{ section.settings.color_foreground.green }}, {{ section.settings.color_foreground.blue }};
       --color-background: {{ section.settings.color_background.red }}, {{ section.settings.color_background.green }}, {{ section.settings.color_background.blue }};
     }
  }
  .transparent_header_color:not(.sticky){
  --color-foreground: {{ section.settings.transparent_color_foreground.red }}, {{ section.settings.transparent_color_foreground.green }}, {{ section.settings.transparent_color_foreground.blue }};
  }
  {%- if section.settings.logo_position == "top_center" -%}
  @media only screen and (min-width: 991px){
    .header__logo {
      margin-left: 2.7rem;
    }
  }
  {%- endif -%}

  .header_bottom{
    position: relative;
  }
  .transparent_header_color {
    --color-background: 18,18,18;
    --gradient-background: #fff;
    --color-foreground: #000;
    --color-shadow: 18,18,18;
    --color-secondary-button: 18,18,18;
    --color-secondary-button-text: 255,255,255;
    --color-link: 255,255,255;
    --color-badge-foreground: 255,255,255;
    --color-badge-background: 18,18,18;
    --color-badge-border: 255,255,255;
    --payment-terms-background-color: rgb(18 18 18);
  }
  .transparent--header .transparent_header_color {
      background: transparent;
  }
  .header_bottom:not(.transparent_header_color) {
    box-shadow: 0 1px 5px rgba(var(--color-foreground),.05);
  }
  .header_bottom.transparent_header_color:is(.sticky)  {
     background: rgb(var(--color-background));
     background: var(--gradient-background);
  }

     .header_bottom.transparent_header_color:is(.sticky) .header__menu_item {
        color:  var(--color-foreground);
    }
      .header_bottom.transparent_header_color:is(.sticky) .header__menu_li:hover .header__menu_item    {
        color: rgba(var(--color-foreground), 0.90) !important;
    }
      .header_bottom.transparent_header_color:is(.sticky) .transparent--header .header__actions_btn svg {
        fill: var(--color-foreground);
    }
     .header_bottom.transparent_header_color:is(.sticky) .header__actions_btn {
        color: var(--color-foreground);
    }
    .header_bottom.transparent_header_color:is(.sticky) {
        box-shadow: 0 0 15px 5px rgba(0,0,0,.1) !important;
    }

    .header_bottom.transparent_header_color:is(.sticky) .header__actions_btn:hover, .header_bottom.transparent_header_color:is(.sticky) .header__actions a:hover svg,
    .header_bottom.transparent_header_color:is(.sticky) .header__actions a:hover {
        color: rgba(var(--color-foreground), 0.90) !important;
        fill: rgba(var(--color-foreground), 0.90) !important;
    }



  
  .header_bottom:not(.sticky) .transparent__header--sticky-logo, .header_bottom.sticky .transparent__header--logo {
    display: none;
  }

  /* Mobile Sticky Header Search Bar Styles */
  @media only screen and (max-width: 991px) {
    /* Mobile sticky search bar - hidden by default */
    .mobile-sticky-search {
      display: none;
      opacity: 0;
      transform: translateX(-20px);
      transition: all 0.3s ease;
      flex: 1;
      margin: 0 15px;
    }
    
    /* Show mobile search bar when sticky */
    .header_bottom.sticky .mobile-sticky-search {
      display: flex;
      opacity: 1;
      transform: translateX(0);
    }
    
    /* Hide logo and search icon when sticky on mobile */
    .header_bottom.sticky .header__logo,
    .header_bottom.sticky .header__actions_btn--search {
      display: none!important;
      opacity: 0;
      transform: translateX(-20px);
      transition: all 0.3s ease;
      pointer-events: none;
    }
    
    /* Ensure burger menu and cart stay visible */
    .header_bottom.sticky .mobile__menu_bar,
    .header_bottom.sticky .header__actions_btn--cart {
      opacity: 1;
      transform: none;
      transition: all 0.3s ease;
    }
    
    /* Mobile sticky search input styling */
    .mobile-sticky-search .search__input_field {
      display: flex;
      align-items: center;
      background: rgba(var(--color-background), 0.95);
      border: 1px solid rgba(var(--color-foreground), 0.2);
      border-radius: 25px;
      padding: 0;
      height: 40px;
      overflow: hidden;
    }
    
    .mobile-sticky-search .search__input {
      flex: 1;
      border: none;
      background: transparent;
      padding: 10px 15px;
      font-size: 14px;
      color: rgba(var(--color-foreground));
      outline: none;
    }
    
    .mobile-sticky-search .search__input::placeholder {
      color: rgba(var(--color-foreground), 0.6);
    }
    
    .mobile-sticky-search .search__button {
      background: transparent;
      border: none;
      padding: 10px 15px;
      color: rgba(var(--color-foreground));
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .mobile-sticky-search .search__button:hover {
      color: rgba(var(--color-foreground), 0.7);
    }
    
    .mobile-sticky-search .search__button svg {
      width: 18px;
      height: 18px;
    }
    
    /* Smooth transitions for all mobile elements */
    .header__logo,
    .header__actions_btn--search,
    .mobile__menu_bar,
    .header__actions_btn--cart {
      transition: all 0.3s ease;
    }
  }
</style>

{{ 'header-submenu.css' | asset_url | stylesheet_tag }}
{{ 'component-collection-card.css' | asset_url | stylesheet_tag }}

<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>

<svg style="display: none">
  <symbol id="icon-caret" viewBox="0 0 10 6">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor">
  </symbol>
</svg>

<script src="{{ 'cart-notification.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'mainMenu.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'search-modal.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'header-drawer.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'mobile-nav.js' | asset_url }}" defer></script>
{%- if section.settings.header_sticky -%}
  <script src="{{ 'header-sticky.js' | asset_url }}" defer></script>
{%- endif -%}
<script src="{{ 'details-disclosure.js' | asset_url }}" defer></script>

{%- unless template contains 'cart' -%}
  <script src="{{ 'cart_drawer_action.js' | asset_url }}" defer></script>
{%- endunless -%}

<header
  class="header {{ transparent }}"
  id="shopify__header__section"
  data-section-id="{{ section.id }}"
  data-section-type="header"
>
  <div class="header_bottom {{ sticky }}  color-{{ section.settings.color_scheme }} gradient {% if color_enable %} transparent_header_color {% endif %} {{ section.settings.logo_position }}">
    <div class="{{ container }}">
      <div class="header__inner row">
        <div class="col-auto d-none menu--bar-lines d-md-only-block">
          <div class="mobile__menu_bar header__actions_btn--menu inline-y-center">
            {% render 'icon-hamburger' %}
          </div>
        </div>

        <!-- Mobile Sticky Search Bar (hidden by default, shown when sticky) -->
        <div class="mobile-sticky-search">
          <div class="search__input_field">
            <input
              class="search__input input__field"
              id="mobile-sticky-search-input"
              type="search"
              name="q"
              placeholder="{{ 'general.search.search' | t }}"
              autocomplete="off"
              autocorrect="off"
              autocapitalize="off"
              spellcheck="false"
            >
            <button type="submit" class="search__button" aria-label="{{ 'general.search.search' | t }}">
              <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M0.833313 9.16659C0.833313 4.56421 4.56427 0.833252 9.16665 0.833252C13.769 0.833252 17.5 4.56421 17.5 9.16659C17.5 11.1677 16.7946 13.004 15.6191 14.4405L19.1666 17.9881L17.9881 19.1666L14.4406 15.619C13.0041 16.7946 11.1677 17.4999 9.16665 17.4999C4.56427 17.4999 0.833313 13.7689 0.833313 9.16659ZM9.16665 2.49992C5.48475 2.49992 2.49998 5.48469 2.49998 9.16659C2.49998 12.8485 5.48475 15.8333 9.16665 15.8333C12.8486 15.8333 15.8333 12.8485 15.8333 9.16659C15.8333 5.48469 12.8486 2.49992 9.16665 2.49992Z" fill="currentColor"/>
              </svg>
            </button>
          </div>
        </div>

        {%- if section.settings.logo_position == 'top_center' -%}
          <!--<div class="actions_btn--search-wrapper col-auto d-md-none">
            {% if section.settings.show_search %}
              <button
                id="header_search__action"
                class="header__actions_btn header__actions_btn--search"
                aria-label="{{ 'general.search.search' | t }}"
              >
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M0.833313 9.16659C0.833313 4.56421 4.56427 0.833252 9.16665 0.833252C13.769 0.833252 17.5 4.56421 17.5 9.16659C17.5 11.1677 16.7946 13.004 15.6191 14.4405L19.1666 17.9881L17.9881 19.1666L14.4406 15.619C13.0041 16.7946 11.1677 17.4999 9.16665 17.4999C4.56427 17.4999 0.833313 13.7689 0.833313 9.16659ZM9.16665 2.49992C5.48475 2.49992 2.49998 5.48469 2.49998 9.16659C2.49998 12.8485 5.48475 15.8333 9.16665 15.8333C12.8486 15.8333 15.8333 12.8485 15.8333 9.16659C15.8333 5.48469 12.8486 2.49992 9.16665 2.49992Z" fill="currentColor"/>
                </svg>
              </button>
            {%- endif -%}
          </div>-->
        {%- endif -%}

        {%- if section.settings.logo_position != 'middle_center' -%}
          <!-- Header Logo Start -->
          <div class="header__logo col-auto">
            {% if section.settings.transparent_header
              and section.settings.transparent_logo != blank
              and request.page_type == 'index'
            %}
              {%- if request.page_type == 'index' -%}
                <h1 class="header__heading mb-0 {{ sm_none }}">
              {%- endif -%}
              {%- render 'header-transparent_logo',
                className: 'header__logo_link transparent_header',
                none: sm_none_other,
                logo_inner: section.settings.logo_inner
              -%}
              {%- if request.page_type == 'index' -%}
                </h1>
              {%- endif -%}
            {% else %}
              {%- if request.page_type == 'index' -%}
                <h1 class="header__heading mb-0 {{ sm_none }}">
              {%- endif -%}
              {%- render 'header-logo',
                className: 'header__logo_link logo_link_reguler',
                none: sm_none_other,
                logo_inner: section.settings.logo_inner
              -%}
              {%- if request.page_type == 'index' -%}
                </h1>
              {%- endif -%}
            {% endif %}
          </div>
          <!-- Header Logo End -->
        {% endif %}

        <!-- Header Menu Start -->
        <nav class="header__menu {% if section.settings.logo_position != 'middle_center' %} col {% else %} col-auto col-md-5 {% endif %} d-md-none justify-content-{{ section.settings.menu_position }}">
          {%- render 'menu-nav' -%}
        </nav>
        <!-- Header Menu End -->

        {%- if section.settings.logo_position == 'middle_center' -%}
          <!-- Header Logo Start -->
          <div class="header__logo col-auto">
            {% if section.settings.transparent_header
              and section.settings.transparent_logo != blank
              and request.page_type == 'index'
            %}
              {%- if request.page_type == 'index' -%}
                <h1 class="header__heading mb-0 {{ sm_none }}">
              {%- endif -%}
              {%- render 'header-transparent_logo',
                className: 'header__logo_link transparent_header',
                none: sm_none_other,
                logo_inner: section.settings.logo_inner
              -%}
              {%- if request.page_type == 'index' -%}
                </h1>
              {%- endif -%}
            {% else %}
              {%- if request.page_type == 'index' -%}
                <h1 class="header__heading mb-0 {{ sm_none }}">
              {%- endif -%}
              {%- render 'header-logo',
                className: 'header__logo_link logo_link_reguler',
                none: sm_none_other,
                logo_inner: section.settings.logo_inner
              -%}
              {%- if request.page_type == 'index' -%}
                </h1>
              {%- endif -%}
            {% endif %}
          </div>
          <!-- Header Logo End -->
        {% endif %}

        {%- liquid
          if section.settings.logo_position == 'top_center'
            unless section.settings.quick_drawer_button
              assign search_button_visible = 'd-md-only-visible'
            endunless
          endif
        -%}

                    
       {% if section.settings.show_normal_btn %}             
       <!-- Header Actions Start normal btn -->
       <div class="header__actions nrml_nrb_header {% if section.settings.logo_position == 'middle_center' %}col-auto col-md-5 {% else %} col-auto {% endif %}">

            <button id="header_search__action" class="header__actions_btn header__actions_btn--search " aria-label="Search our store" role="button" aria-haspopup="dialog">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M0.833313 9.16659C0.833313 4.56421 4.56427 0.833252 9.16665 0.833252C13.769 0.833252 17.5 4.56421 17.5 9.16659C17.5 11.1677 16.7946 13.004 15.6191 14.4405L19.1666 17.9881L17.9881 19.1666L14.4406 15.619C13.0041 16.7946 11.1677 17.4999 9.16665 17.4999C4.56427 17.4999 0.833313 13.7689 0.833313 9.16659ZM9.16665 2.49992C5.48475 2.49992 2.49998 5.48469 2.49998 9.16659C2.49998 12.8485 5.48475 15.8333 9.16665 15.8333C12.8486 15.8333 15.8333 12.8485 15.8333 9.16659C15.8333 5.48469 12.8486 2.49992 9.16665 2.49992Z" fill="currentColor"></path>
                </svg>
            </button>
            {% if section.settings.phone_nmbr !=blank %}
              <span class="phone--number--area">
                  <span class="icon">
                      <svg id="fi_17519194" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" data-name="Layer 2"><path d="m30.06 22.26s-.02-.02-.03-.03l-3.99-3.43c-.56-.52-1.23-.77-1.92-.75-1.27.06-2.18 1.06-2.26 1.15-.33.35-.73.53-1.25.54-1.38.04-3.41-1.05-5.41-2.94-2.01-1.85-3.25-3.79-3.3-5.19-.02-.51.13-.93.44-1.26.11-.11 1.04-1.09 1.01-2.35-.01-.7-.32-1.34-.85-1.84l-3.76-3.8c-.57-.54-1.33-.8-2.11-.79-.79.03-1.52.36-2.05.93l-2.18 2.34c-.99 1.06-1.46 2.41-1.38 3.99.18 3.71 3.54 8.79 8.95 13.55 5.1 5.04 10.34 8.03 14.04 8.03h.14c1.58-.03 2.89-.59 3.88-1.65l2.18-2.34c1.11-1.19 1.04-3.06-.15-4.17zm-1.31 2.81-2.18 2.34c-.62.66-1.42 1-2.46 1.02-.03 0-.07 0-.1 0-3.14 0-7.97-2.85-12.67-7.5-4.99-4.39-8.18-9.06-8.33-12.19-.05-1.04.23-1.86.84-2.52l2.18-2.34c.17-.18.41-.29.66-.3h.03c.24 0 .47.09.62.23l3.76 3.8c.21.19.24.34.24.44 0 .34-.29.76-.45.93-.69.74-1.03 1.68-.99 2.72.07 1.94 1.51 4.34 3.93 6.57 2.4 2.27 4.9 3.54 6.84 3.48 1.04-.03 1.96-.44 2.66-1.19.14-.16.55-.49.89-.5.1-.01.25.02.49.24l4 3.45c.37.36.39.95.04 1.33z"></path><path d="m18.27 13.97c.12.05.25.08.38.08h6.11c.55 0 1-.45 1-1s-.45-1-1-1h-3.69l5.83-5.83c.39-.39.39-1.02 0-1.41s-1.02-.39-1.41 0l-5.83 5.83v-3.69c0-.55-.45-1-1-1s-1 .45-1 1v6.11c0 .13.03.26.08.38.1.24.3.44.54.54z"></path></svg>
                  </span>
                  <span class="phone">
                      <span class="phone-txt">{{ section.settings.askqustion }}</span>
                      <h3>
                          <a href="tel:{{ section.settings.phone_nmbr }}">{{ section.settings.phone_nmbr }}</a>
                      </h3>
                  </span>
              </span>
             {% endif %}
             {% if section.settings.btn__txt !=blank %}
             <a href="{{ section.settings.btn___url }}" class="hdr_btn_right  button button-- ">
               {{ section.settings.btn__txt }}
               <span class="right__btn_svg">
                 <svg id="fi_14440636" enable-background="new 0 0 512 512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><g id="Layer_2_00000103972821825980288310000012755641873027120305_"><g id="Layer_2_copy_13"><g id="_113"><path d="m479 0h-386.9c-18.2 0-33 14.8-33 33s14.8 33 33 33h307.1l-389.5 389.6c-12.9 12.9-12.9 33.8 0 46.7s33.8 12.9 46.7 0l389.5-389.6v307.1c0 18.2 14.8 33 33 33s33-14.8 33-33v-386.8c.1-18.2-14.7-33-32.9-33z"></path></g></g></g></svg>
               </span>
              </a>
              {% endif %}
         
       </div>
       <!-- Header Actions end normal btn -->   

         
        {% else %}            
        <!-- Header Actions Start ecomrs -->
        <div class="header__actions {% if section.settings.logo_position == 'middle_center' %}col-auto col-md-5 {% else %} col-auto {% endif %}">
          {%- if section.settings.drawer_menu and section.settings.quick_drawer_button -%}
            <button class="header__actions_btn information--drawer__trigger d-md-none">
              <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill="currentColor" d="M8.25763 2.34393H8.33257H26.4828C28.4328 2.26899 28.4328 5.23147 26.4828 5.15647H8.33257C6.42005 5.23141 6.34505 2.34393 8.25763 2.34393ZM26.4828 13.5941C28.3579 13.5941 28.3579 16.4066 26.4828 16.4066H16.2077C14.2952 16.4066 14.2952 13.5941 16.2077 13.5941H26.4828ZM26.4828 24.8442C28.3579 24.8442 28.3579 27.6567 26.4828 27.6567H3.45756C1.58254 27.6567 1.58254 24.8442 3.45756 24.8442H26.4828Z"/>
              </svg>
            </button>
          {%- endif -%}

          {%- if section.settings.quick_drawer_button -%}
            {% if section.settings.show_search or cart_icon or section.settings.user_icon %}
              <div class="quick__drawer--button__list quick--drawer-button-color">
            {%- endif -%}
          {%- endif -%}

          {% if section.settings.show_search and section.settings.logo_position != 'middle_left_search_inline_expend' %}
            <button
              id="header_search__action"
              class="header__actions_btn header__actions_btn--search {{ search_button_visible }}"
              aria-label="{{ 'general.search.search' | t }}"
            >
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M0.833313 9.16659C0.833313 4.56421 4.56427 0.833252 9.16665 0.833252C13.769 0.833252 17.5 4.56421 17.5 9.16659C17.5 11.1677 16.7946 13.004 15.6191 14.4405L19.1666 17.9881L17.9881 19.1666L14.4406 15.619C13.0041 16.7946 11.1677 17.4999 9.16665 17.4999C4.56427 17.4999 0.833313 13.7689 0.833313 9.16659ZM9.16665 2.49992C5.48475 2.49992 2.49998 5.48469 2.49998 9.16659C2.49998 12.8485 5.48475 15.8333 9.16665 15.8333C12.8486 15.8333 15.8333 12.8485 15.8333 9.16659C15.8333 5.48469 12.8486 2.49992 9.16665 2.49992Z" fill="currentColor"/>
              </svg>
            </button>
          {%- endif -%}

          {% if section.settings.show_search and section.settings.logo_position == 'middle_left_search_inline_expend' %}
            <button
              id="header_search__action"
              class="header__actions_btn header__actions_btn--search {{ search_button_visible }} d-none d-md-only-block"
              aria-label="{{ 'general.search.search' | t }}"
            >
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M0.833313 9.16659C0.833313 4.56421 4.56427 0.833252 9.16665 0.833252C13.769 0.833252 17.5 4.56421 17.5 9.16659C17.5 11.1677 16.7946 13.004 15.6191 14.4405L19.1666 17.9881L17.9881 19.1666L14.4406 15.619C13.0041 16.7946 11.1677 17.4999 9.16665 17.4999C4.56427 17.4999 0.833313 13.7689 0.833313 9.16659ZM9.16665 2.49992C5.48475 2.49992 2.49998 5.48469 2.49998 9.16659C2.49998 12.8485 5.48475 15.8333 9.16665 15.8333C12.8486 15.8333 15.8333 12.8485 15.8333 9.16659C15.8333 5.48469 12.8486 2.49992 9.16665 2.49992Z" fill="currentColor"/>
              </svg>
            </button>
            {%- if settings.predictive_search_enabled -%}
              <predictive-search
                class="header-search--box search-modal__form d-md-none"
                data-loading-text="{{ 'accessibility.loading' | t }}"
              >
            {%- endif -%}
            <form action="{{ routes.search_url }}" method="get" role="search" class="search search-modal__form">
              <div class="search__input_field input__field_form">
                <label class="visually-hidden" for="Search-In-Modal">{{ 'general.search.search' | t }}</label>
                <input
                  class="search__input input__field"
                  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-list"
                    aria-controls="predictive-search-results-list"
                    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 input__field_form_button" aria-label="{{ 'general.search.search' | t }}">
                  <svg
                    class="icon icon-search"
                    aria-hidden="true"
                    focusable="false"
                    role="presentation"
                    width="20"
                    height="20"
                    viewBox="0 0 20 20"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.833313 9.16659C0.833313 4.56421 4.56427 0.833252 9.16665 0.833252C13.769 0.833252 17.5 4.56421 17.5 9.16659C17.5 11.1677 16.7946 13.004 15.6191 14.4405L19.1666 17.9881L17.9881 19.1666L14.4406 15.619C13.0041 16.7946 11.1677 17.4999 9.16665 17.4999C4.56427 17.4999 0.833313 13.7689 0.833313 9.16659ZM9.16665 2.49992C5.48475 2.49992 2.49998 5.48469 2.49998 9.16659C2.49998 12.8485 5.48475 15.8333 9.16665 15.8333C12.8486 15.8333 15.8333 12.8485 15.8333 9.16659C15.8333 5.48469 12.8486 2.49992 9.16665 2.49992Z" fill="currentColor"/>
                  </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 -%}
          {%- endif -%}

          {% comment %}            
          <a href="/pages/compare" class="header__actions_btn header__actions_btn--wishlist d-md-none">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
              <path fill="currentColor" d="M0 128v-8c0-6.6 5.4-12 12-12h105.8c3.3 0 6.5 1.4 8.8 3.9l89.7 97-21.8 23.6L109 140H12c-6.6 0-12-5.4-12-12zm502.6 278.6l-64 64c-20.1 20.1-54.6 5.8-54.6-22.6v-44h-25.7c-3.3 0-6.5-1.4-8.8-3.9l-89.7-97 21.8-23.6L367 372h17v-52c0-28.5 34.5-42.7 54.6-22.6l64 64c12.5 12.5 12.5 32.7 0 45.2zm-19.8-25.4l-64-64c-2.5-2.5-6.8-.7-6.8 2.8v128c0 3.6 4.3 5.4 6.8 2.8l64-64c1.6-1.5 1.6-4.1 0-5.6zm19.8-230.6l-64 64c-20.1 20.1-54.6 5.8-54.6-22.6v-52h-17L126.6 400.1c-2.3 2.5-5.5 3.9-8.8 3.9H12c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h97l240.4-260.1c2.3-2.5 5.5-3.9 8.8-3.9H384V64c0-28.5 34.5-42.7 54.6-22.6l64 64c12.5 12.5 12.5 32.7 0 45.2zm-19.8-25.4l-64-64c-2.5-2.5-6.8-.7-6.8 2.8v128c0 3.6 4.3 5.4 6.8 2.8l64-64c1.6-1.5 1.6-4.1 0-5.6z" />
            </svg>
            <span class="header__actions_btn_cart_num compare__count"></span>
          </a>
          {% endcomment %}
          {%- if shop.customer_accounts_enabled and section.settings.user_icon -%}
            {%- if shop.customer_accounts_enabled -%}
              <a
                href="{%- if customer -%}{{ routes.account_url }}{%- else -%}{{ routes.account_login_url }}{%- endif -%}"
                class="header__actions_btn header__actions_btn--user d-md-none"
              >

                  <svg version="1.1" id="fi_747376" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
                  <g>
                  	<g>
                  		<path d="M437.02,330.98c-27.883-27.882-61.071-48.523-97.281-61.018C378.521,243.251,404,198.548,404,148
                  			C404,66.393,337.607,0,256,0S108,66.393,108,148c0,50.548,25.479,95.251,64.262,121.962
                  			c-36.21,12.495-69.398,33.136-97.281,61.018C26.629,379.333,0,443.62,0,512h40c0-119.103,96.897-216,216-216s216,96.897,216,216
                  			h40C512,443.62,485.371,379.333,437.02,330.98z M256,256c-59.551,0-108-48.448-108-108S196.449,40,256,40
                  			c59.551,0,108,48.448,108,108S315.551,256,256,256z"></path>
                  	</g>
                  </g>
                  </svg>
                <span class="visually-hidden">
                  {%- liquid
                    if customer
                      echo 'customer.account_fallback' | t
                    else
                      echo 'customer.log_in' | t
                    endif
                  -%}
                </span>
              </a>
            {%- endif -%}
          {%- endif -%}

          {%- if section.settings.show_wishlist -%}     
          <a href="/pages/wishlist" class="header__actions_btn header__actions_btn--wishlist d-md-none">
            <svg viewBox="0 -28 512.001 512" xmlns="http://www.w3.org/2000/svg" id="fi_1077035"><path d="m256 455.515625c-7.289062 0-14.316406-2.640625-19.792969-7.4375-20.683593-18.085937-40.625-35.082031-58.21875-50.074219l-.089843-.078125c-51.582032-43.957031-96.125-81.917969-127.117188-119.3125-34.644531-41.804687-50.78125-81.441406-50.78125-124.742187 0-42.070313 14.425781-80.882813 40.617188-109.292969 26.503906-28.746094 62.871093-44.578125 102.414062-44.578125 29.554688 0 56.621094 9.34375 80.445312 27.769531 12.023438 9.300781 22.921876 20.683594 32.523438 33.960938 9.605469-13.277344 20.5-24.660157 32.527344-33.960938 23.824218-18.425781 50.890625-27.769531 80.445312-27.769531 39.539063 0 75.910156 15.832031 102.414063 44.578125 26.191406 28.410156 40.613281 67.222656 40.613281 109.292969 0 43.300781-16.132812 82.9375-50.777344 124.738281-30.992187 37.398437-75.53125 75.355469-127.105468 119.308594-17.625 15.015625-37.597657 32.039062-58.328126 50.167969-5.472656 4.789062-12.503906 7.429687-19.789062 7.429687zm-112.96875-425.523437c-31.066406 0-59.605469 12.398437-80.367188 34.914062-21.070312 22.855469-32.675781 54.449219-32.675781 88.964844 0 36.417968 13.535157 68.988281 43.882813 105.605468 29.332031 35.394532 72.960937 72.574219 123.476562 115.625l.09375.078126c17.660156 15.050781 37.679688 32.113281 58.515625 50.332031 20.960938-18.253907 41.011719-35.34375 58.707031-50.417969 50.511719-43.050781 94.136719-80.222656 123.46875-115.617188 30.34375-36.617187 43.878907-69.1875 43.878907-105.605468 0-34.515625-11.605469-66.109375-32.675781-88.964844-20.757813-22.515625-49.300782-34.914062-80.363282-34.914062-22.757812 0-43.652344 7.234374-62.101562 21.5-16.441406 12.71875-27.894532 28.796874-34.609375 40.046874-3.453125 5.785157-9.53125 9.238282-16.261719 9.238282s-12.808594-3.453125-16.261719-9.238282c-6.710937-11.25-18.164062-27.328124-34.609375-40.046874-18.449218-14.265626-39.34375-21.5-62.097656-21.5zm0 0"></path></svg>
            <span class="header__actions_btn_cart_num wishlist__count"></span>
          </a>
          {% endif %}
                      
          {%- unless template contains 'cart' or cart_icon != true -%}
            {%- if settings.cart_type == 'drawer' -%}
              <open-minicart>
                <a class="header__actions_btn header__actions_btn--cart" href="{{ routes.cart_url }}">
                  <svg id="fi_5337564" enable-background="new 0 0 32 32" height="512" viewBox="0 0 32 32" width="512" xmlns="http://www.w3.org/2000/svg"><g id="_01"><g><path d="m23.8 30h-15.6c-3.3 0-6-2.7-6-6v-.2l.6-16c.1-3.3 2.8-5.8 6-5.8h14.4c3.2 0 5.9 2.5 6 5.8l.6 16c.1 1.6-.5 3.1-1.6 4.3s-2.6 1.9-4.2 1.9c0 0-.1 0-.2 0zm-15-26c-2.2 0-3.9 1.7-4 3.8l-.6 16.2c0 2.2 1.8 4 4 4h15.8c1.1 0 2.1-.5 2.8-1.3s1.1-1.8 1.1-2.9l-.6-16c-.1-2.2-1.8-3.8-4-3.8z"></path></g><g><path d="m16 14c-3.9 0-7-3.1-7-7 0-.6.4-1 1-1s1 .4 1 1c0 2.8 2.2 5 5 5s5-2.2 5-5c0-.6.4-1 1-1s1 .4 1 1c0 3.9-3.1 7-7 7z"></path></g></g></svg>

                  <div class="cart-count-bubble header__actions_btn_cart_num">
                    {%- if cart.item_count < 100 -%}
                      <span id="cart-notification-count" aria-hidden="true">{{ cart.item_count }}</span>
                    {%- endif -%}
                    <span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
                  </div>
                </a>
              </open-minicart>
            {%- else -%}
              <a href="{{ routes.cart_url }}" class="header__actions_btn header__actions_btn--cart">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8 16H15.2632C19.7508 16 20.4333 13.1808 21.261 9.06908C21.4998 7.88311 21.6192 7.29013 21.3321 6.89507C21.045 6.5 20.4947 6.5 19.3941 6.5H6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                  <path d="M8 16L5.37873 3.51493C5.15615 2.62459 4.35618 2 3.43845 2H2.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                  <path d="M8.88 16H8.46857C7.10522 16 6 17.1513 6 18.5714C6 18.8081 6.1842 19 6.41143 19H17.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M10.5 22C11.3284 22 12 21.3284 12 20.5C12 19.6716 11.3284 19 10.5 19C9.67157 19 9 19.6716 9 20.5C9 21.3284 9.67157 22 10.5 22Z" stroke="currentColor" stroke-width="1.5"/>
                  <path d="M17.5 22C18.3284 22 19 21.3284 19 20.5C19 19.6716 18.3284 19 17.5 19C16.6716 19 16 19.6716 16 20.5C16 21.3284 16.6716 22 17.5 22Z" stroke="currentColor" stroke-width="1.5"/>
                </svg>

                <div class="cart-count-bubble header__actions_btn_cart_num">
                  {%- if cart.item_count < 100 -%}
                    <span id="cart-notification-count" aria-hidden="true">{{ cart.item_count }}</span>
                  {%- endif -%}
                  <span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
                </div>
              </a>
            {%- endif -%}
          {%- endunless -%}

          {%- if section.settings.quick_drawer_button -%}
            {% if section.settings.show_search or cart_icon or section.settings.user_icon %}
              </div>
            {%- endif -%}
          {%- endif -%}

          {%- unless section.settings.quick_drawer_button -%}
            {%- if section.settings.drawer_menu -%}
              <button class="header__actions_btn information--drawer__trigger d-md-none">
                <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill="currentColor" d="M8.25763 2.34393H8.33257H26.4828C28.4328 2.26899 28.4328 5.23147 26.4828 5.15647H8.33257C6.42005 5.23141 6.34505 2.34393 8.25763 2.34393ZM26.4828 13.5941C28.3579 13.5941 28.3579 16.4066 26.4828 16.4066H16.2077C14.2952 16.4066 14.2952 13.5941 16.2077 13.5941H26.4828ZM26.4828 24.8442C28.3579 24.8442 28.3579 27.6567 26.4828 27.6567H3.45756C1.58254 27.6567 1.58254 24.8442 3.45756 24.8442H26.4828Z"/>
                </svg>
              </button>
            {%- endif -%}
          {%- endunless -%}
        </div>
{% endif %}




                    

                    
      </div>
    </div>
  </div>
</header>

<div id="header-spacer" style="height:0"></div>

{%- if section.settings.drawer_menu -%}
  {%- render 'quick-information' -%}
{%- endif -%}
<search-modal>
  {%- render 'predictive-search-modal' -%}
</search-modal>

{%- render 'mobile-offcanvas-menu' -%}

<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 | image_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 -%}

<script>
  // Single-header sticky behavior that respects announcement and scrolling bars
  document.addEventListener('DOMContentLoaded', function() {
    const headerBottom = document.querySelector('.header_bottom');
    const spacer = document.getElementById('header-spacer');
    const topbar = document.querySelector('.header__topbar'); // from announcement-bar.liquid
    const ticker = document.querySelector('.scrolling-text-bar'); // from scrolling-bar.liquid
    
    // Mobile sticky search elements
    const mobileSearch = document.querySelector('.mobile-sticky-search');
    const mobileSearchInput = document.getElementById('mobile-sticky-search-input');
    const mobileSearchButton = mobileSearch ? mobileSearch.querySelector('.search__button') : null;
    
    if (!headerBottom || !spacer) return;
    
    let threshold = 0;
    let headerHeight = 0;
    let ticking = false;
    let isMobile = window.innerWidth <= 991;
    
    // Function to compute the threshold based on top bars
    function getThreshold() {
      const a = topbar ? topbar.offsetHeight : 0;
      const b = ticker ? ticker.offsetHeight : 0;
      return a + b;
    }
    
    // Function to update measurements
    function updateMeasurements() {
      threshold = getThreshold();
      headerHeight = headerBottom.offsetHeight;
      isMobile = window.innerWidth <= 991;
    }
    
    // Function to handle mobile search functionality
    function handleMobileSearch() {
      if (!isMobile || !mobileSearch || !mobileSearchInput || !mobileSearchButton) return;
      
      // Handle search form submission
      mobileSearchButton.addEventListener('click', function(e) {
        e.preventDefault();
        const query = mobileSearchInput.value.trim();
        if (query) {
          window.location.href = `/search?q=${encodeURIComponent(query)}`;
        }
      });
      
      // Handle Enter key in search input
      mobileSearchInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
          e.preventDefault();
          const query = this.value.trim();
          if (query) {
            window.location.href = `/search?q=${encodeURIComponent(query)}`;
          }
        }
      });
    }
    
    // Function to handle scroll
    function handleScroll() {
      if (!ticking) {
        requestAnimationFrame(function() {
          const scrollY = window.scrollY;
          
          if (scrollY >= threshold) {
            // Add sticky class and set spacer height
            headerBottom.classList.add('sticky');
            spacer.style.height = headerHeight + 'px';
          } else {
            // Remove sticky class and reset spacer height
            headerBottom.classList.remove('sticky');
            spacer.style.height = '0px';
          }
          
          ticking = false;
        });
        ticking = true;
      }
    }
    
    // Debounced resize handler
    let resizeTimeout;
    function handleResize() {
      clearTimeout(resizeTimeout);
      resizeTimeout = setTimeout(function() {
        updateMeasurements();
        // Recalculate spacer height if currently sticky
        if (headerBottom.classList.contains('sticky')) {
          spacer.style.height = headerHeight + 'px';
        }
        // Re-initialize mobile search if needed
        if (isMobile) {
          handleMobileSearch();
        }
      }, 100);
    }
    
    // Initialize measurements and mobile search
    updateMeasurements();
    handleMobileSearch();
    
    // Add event listeners
    window.addEventListener('scroll', handleScroll, { passive: true });
    window.addEventListener('resize', handleResize);
    
    // Initial check in case page loads scrolled
    handleScroll();
  });
</script>

{% schema %}
{
  "name": "Header",
  "blocks": [
     {
      "type": "mega-menu-with-banner",
      "name": "Mega menu (Banner)",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "Menu item",
          "info": "Enter the name of the menu item to which you want to add a mega menu."
        },
        {
          "type": "header",
          "content": "Promotion1"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "select",
          "id": "height",
          "options": [
            {
              "value": "adapt",
              "label": "t:sections.image-with-text.settings.height.options__1.label"
            },
            {
              "value": "square",
              "label": "Square"
            },
          {
              "value": "portrait",
              "label": "Portrait"
            },
            {
              "value": "landscape",
              "label": "Landscape"
            },
            {
              "value": "16-9",
              "label": "Wide"
            }
          ],
            "default": "adapt",
            "label": "t:sections.image-with-text.settings.height.label"
        },
        {
          "type": "text",
          "id": "promo1_heading",
          "label": "Heading"
        },
        {
          "type": "richtext",
          "id": "promo1_text",
          "label": "Text"
        },
        {
          "type": "url",
          "id": "promo1_link",
          "label": "Link"
        },
        {
          "type": "header",
          "content": "Promotion2"
        },
        {
          "type": "image_picker",
          "id": "image_2",
          "label": "Image"
        },
        {
          "type": "select",
          "id": "height_2",
          "options": [
            {
              "value": "adapt",
              "label": "t:sections.image-with-text.settings.height.options__1.label"
            },
            {
              "value": "square",
              "label": "Square"
            },
          {
              "value": "portrait",
              "label": "Portrait"
            },
            {
              "value": "landscape",
              "label": "Landscape"
            },
            {
              "value": "16-9",
              "label": "Wide"
            }
          ],
            "default": "adapt",
            "label": "t:sections.image-with-text.settings.height.label"
        },
        {
          "type": "text",
          "id": "promo2_heading",
          "label": "Heading"
        },
        {
          "type": "richtext",
          "id": "promo2_text",
          "label": "Text"
        },
        {
          "type": "url",
          "id": "promo2_link",
          "label": "Link"
        },
        {
          "type": "header",
          "content": "Promotion3"
        },
        {
          "type": "image_picker",
          "id": "image_3",
          "label": "Image"
        },
        {
          "type": "select",
          "id": "height_3",
          "options": [
            {
              "value": "adapt",
              "label": "t:sections.image-with-text.settings.height.options__1.label"
            },
            {
              "value": "square",
              "label": "Square"
            },
          {
              "value": "portrait",
              "label": "Portrait"
            },
            {
              "value": "landscape",
              "label": "Landscape"
            },
            {
              "value": "16-9",
              "label": "Wide"
            }
          ],
            "default": "adapt",
            "label": "t:sections.image-with-text.settings.height.label"
        },
        {
          "type": "text",
          "id": "promo3_heading",
          "label": "Heading"
        },
        {
          "type": "richtext",
          "id": "promo3_text",
          "label": "Text"
        },
        {
          "type": "url",
          "id": "promo3_link",
          "label": "Link"
        }
      ]
     },
     {
      "type": "mega-menu-with-collection",
      "name": "Mega menu (Collection)",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "Menu item",
          "info": "Enter the name of the menu item to which you want to add a mega menu. [Learn more](https://themeadora.com/doc)"
        },
        {
          "type": "select",
          "id": "image_ratio",
          "options": [
            {
              "value": "adapt",
              "label": "t:sections.collection-list.settings.image_ratio.options__1.label"
            },
            {
              "value": "portrait",
              "label": "t:sections.collection-list.settings.image_ratio.options__2.label"
            },
            {
              "value": "square",
              "label": "t:sections.collection-list.settings.image_ratio.options__3.label"
            }
          ],
          "default": "square",
          "label": "t:sections.collection-list.settings.image_ratio.label",
          "info": "t:sections.collection-list.settings.image_ratio.info"
        },
    	{
          "type": "select",
          "id": "title_position",
          "options": [
    		{
              "value": "top--left",
              "label": "Top left"
            },
            {
              "value": "top--right",
              "label": "Top right"
            },
            {
              "value": "bottom--left",
              "label": "Bottom letf"
            },
    		{
              "value": "bottom--right",
              "label": "Bottom right"
            },
    		{
              "value": "full--center",
              "label": "Center"
            }
          ],
          "default": "bottom--left",
          "label": "Title position"
        },
        {
          "type": "header",
          "content": "Collection 1"
        },
        {
          "type": "collection",
          "id": "collection_1",
          "label": "Collection 1"
        },
        {
          "type": "image_picker",
          "id": "collection_image_1",
          "label": "Collection image 1"
        },
        {
          "type": "header",
          "content": "Collection 2"
        },
        {
          "type": "collection",
          "id": "collection_2",
          "label": "Collection 2"
        },
        {
          "type": "image_picker",
          "id": "collection_image_2",
          "label": "Collection image 2"
        }
      ]
    }
  ],
  "settings": [
    {
      "type": "header",
      "content": "General settings"
    },
   {
        "type": "select",
        "id": "container",
        "label": "Header width",
        "default": "container",
        "options": [
          {
            "value": "container",
            "label": "Page width"
          },
          {
            "value": "container-fluid",
            "label": "Full width"
          }
        ]
      },
      {
        "type": "image_picker",
        "id": "logo",
        "label": "Logo"
      },
	  {
        "type": "image_picker",
        "id": "logo_inner",
        "label": "Home page logo"
      },
      {
        "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",
        "label": "Desktop logo position",
        "default": "middle_left",
        "options": [
          {
            "value": "middle_left",
            "label": "Middle left"
          },
          {
            "value": "middle_center",
            "label": "Middle center"
          },
          {
            "value": "top_left",
            "label": "Top left"
          },
          {
            "value": "top_center",
            "label": "Top center"
          },
          {
            "value": "middle_left_search_inline_expend",
            "label": "Middle left with search box"
          },
        ]
      },
	  {
        "type": "link_list",
        "id": "menu",
        "default": "main-menu",
        "label": "t:sections.header.settings.menu.label"
      },
      {
        "type": "select",
        "id": "menu_position",
        "label": "Menu alignment",
        "default": "center",
        "options": [
          {
            "value": "center",
            "label": "Center"
          },
          {
            "value": "start",
            "label": "Left"
          },
          {
            "value": "end",
            "label": "Right"
          }
        ]
     },
      {
        "type": "checkbox",
        "id": "header_sticky",
        "default": true,
        "label": "Enable sticky  header"
      },
      {
        "type": "checkbox",
        "id": "show_normal_btn",
        "default": false,
        "label": "Show header Right Button",
        "info": "if use this option the eCommerce Option (cart,wishlist,search button) will Hide"
      },
      {
        "type": "text",
        "id": "askqustion",
        "label": "ask qustion",
        "default": "Ask Questions?"
      },
      {
        "type": "text",
        "id": "phone_nmbr",
        "label": "Phone Number",
        "default": "+1-800-1234567"
      },
      {
        "type": "text",
        "id": "btn__txt",
        "label": "Button Text",
        "default": "Get a Quote"
      },
      {
        "type": "url",
        "id": "btn___url",
        "label": "Link"
      },
      {
        "type": "checkbox",
        "id": "show_wishlist",
        "default": false,
        "label": "Show wishlist icon"
      },
      {
        "type": "checkbox",
        "id": "show_cart",
        "default": true,
        "label": "Show cart icon"
      },
      {
        "type": "checkbox",
        "id": "show_search",
        "default": true,
        "label": "Show search icon"
      },
      {
        "type": "checkbox",
        "id": "user_icon",
        "default": true,
        "label": "Show user icon"
      },
      {
        "type": "color_scheme",
        "id": "color_scheme",
        "label": "t:sections.all.colors.label",
        "default": "accent-1"
      },
      {
        "type": "header",
        "content": "Transparent header"
      },
      {
        "type": "checkbox",
        "id": "transparent_header",
        "default": false,
        "label": "Enable on homepage"
      },
      {
        "type": "image_picker",
        "id": "transparent_logo",
        "label": "Logo"
      },
      {
        "type": "color",
        "id": "transparent_color_foreground",
        "default": "#fff",
        "label": "Text color",
         "info": "It works only when the transparent header is enabled"
      },
      {
        "type": "header",
        "content": "Drawer menu"
      },
      {
        "type": "checkbox",
        "id": "drawer_menu",
        "default": false,
        "label": "Enable"
      },
      {
        "type": "link_list",
        "id": "drawer-menu",
        "default": "main-menu",
        "label": "Menu"
      },
      {
        "type": "color",
        "id": "color_foreground",
        "default": "#121212",
        "label": "Text color"
      },
      {
        "type": "color",
        "id": "color_background",
        "default": "#FFFFFF",
        "label": "Background color"
      },
       {
        "type": "header",
        "content": "Submenu"
      },
      {
        "type": "color_scheme",
        "id": "submenu_color_scheme",
        "label": "t:sections.header.settings.color_scheme.label",
        "default": "accent-1"
      },
      {
        "type": "header",
        "content": "Mobile Settings"
      },
       {
        "type": "image_picker",
        "id": "logo_2",
        "label": "Logo"
      }
   ]
}
{% endschema %}