<header data-component-type="Navigation" class="relative main-header w-full bg-transparent overflow-x-hidden" data-component-slug="clothing-template-header">
  

  <input type="checkbox" id="menuToggleCheckbox" hidden>

  <nav class="w-full flex items-center justify-between py-7 px-6 lg:py-5 lg:px-10 md:py-4 md:px-5 sm:py-3 sm:px-4">
    <div>
      <img data-node="logo" data-node-type="file" data-node-label="Logo" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767002372/seltrix/templates/clothing-template/clothing-logo.svg" src="{{logo}}" alt="Logo" class="w-[220px] lg:w-[180px] md:w-[150px] sm:w-[120px] h-auto block">
    </div>

    <ul class="hidden xl:flex gap-10 list-none">
      {{#if show_nav_item_1}}
      <li>
        <a class="text-xl font-normal leading-none text-black no-underline" data-node="nav_item_1" data-node-type="page_links" data-node-default="home" href="{{nav_item_1}}">
          <span data-node="nav_item_1_text" data-node-type="text" data-node-default="Home">{{nav_item_1_text}}</span>
        </a>
      </li>
      {{/if}} {{#if show_nav_item_2}}
      <li>
        <a class="text-xl font-normal leading-none text-black no-underline" data-node="nav_item_2" data-node-type="page_links" data-node-default="stores" href="{{nav_item_2}}">
          <span data-node="nav_item_2_text" data-node-type="text" data-node-default="Stores">{{nav_item_2_text}}</span>
        </a>
      </li>
      {{/if}} {{#if show_nav_item_3}}
      <li>
        <a class="text-xl font-normal leading-none text-black no-underline" data-node="nav_item_3" data-node-type="page_links" data-node-default="membership" href="{{nav_item_3}}">
          <span data-node="nav_item_3_text" data-node-type="text" data-node-default="Membership">{{nav_item_3_text}}</span>
        </a>
      </li>
      {{/if}} {{#if show_nav_item_4}}
      <li>
        <a class="text-xl font-normal leading-none text-black no-underline" data-node="nav_item_4" data-node-type="page_links" data-node-default="about-us" href="{{nav_item_4}}">
          <span data-node="nav_item_4_text" data-node-type="text" data-node-default="About Us">{{nav_item_4_text}}</span>
        </a>
      </li>
      {{/if}}
    </ul>

    {{#if show_nav_cta}}
    <div class="hidden xl:block">
      <a data-node="nav_cta" data-node-type="page_links" data-node-default="/store" href="{{nav_cta}}" class="w-[267px] h-16 px-[46px] rounded-xl bg-[#010609] text-white text-xl font-normal leading-none flex items-center justify-center no-underline">
        <span data-node="nav_cta_text" data-node-type="text" data-node-default="Explore Store">{{nav_cta_text}}</span>
      </a>
    </div>
    {{/if}}

    <label for="menuToggleCheckbox" class="menu-toggle flex xl:hidden relative bg-transparent border-none cursor-pointer z-[10001] w-8 h-8 items-center justify-center" aria-label="Open Menu">
      <svg class="w-7 h-7 md:w-6 md:h-6 sm:w-6 sm:h-6 stroke-black" fill="none" viewBox="0 0 24 24" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/>
      </svg>
    </label>
  </nav>

  <div class="mobile-menu fixed inset-0 bg-white z-[10000] pt-24 md:pt-20 sm:pt-16 px-6 md:px-5 sm:px-4 pb-10 overflow-y-auto">
    <ul class="list-none flex flex-col gap-6 md:gap-5 sm:gap-4 text-center">
      {{#if show_m_nav_item_1}}
      <li>
        <a class="text-2xl md:text-xl sm:text-lg font-normal text-black no-underline block py-2" data-node="m_nav_item_1" data-node-type="page_links" data-node-default="home" href="{{m_nav_item_1}}">
          <span data-node="m_nav_item_1_text" data-node-type="text" data-node-default="Home">{{m_nav_item_1_text}}</span>
        </a>
      </li>
      {{/if}} {{#if show_m_nav_item_2}}
      <li>
        <a class="text-2xl md:text-xl sm:text-lg font-normal text-black no-underline block py-2" data-node="m_nav_item_2" data-node-type="page_links" data-node-default="stores" href="{{m_nav_item_2}}">
          <span data-node="m_nav_item_2_text" data-node-type="text" data-node-default="Stores">{{m_nav_item_2_text}}</span>
        </a>
      </li>
      {{/if}} {{#if show_m_nav_item_3}}
      <li>
        <a class="text-2xl md:text-xl sm:text-lg font-normal text-black no-underline block py-2" data-node="m_nav_item_3" data-node-type="page_links" data-node-default="membership" href="{{m_nav_item_3}}">
          <span data-node="m_nav_item_3_text" data-node-type="text" data-node-default="Membership">{{m_nav_item_3_text}}</span>
        </a>
      </li>
      {{/if}} {{#if show_m_nav_item_4}}
      <li>
        <a class="text-2xl md:text-xl sm:text-lg font-normal text-black no-underline block py-2" data-node="m_nav_item_4" data-node-type="page_links" data-node-default="about-us" href="{{m_nav_item_4}}">
          <span data-node="m_nav_item_4_text" data-node-type="text" data-node-default="About Us">{{m_nav_item_4_text}}</span>
        </a>
      </li>
      {{/if}}
    </ul>

    {{#if show_nav_cta}}
    <div class="mt-8 md:mt-6 sm:mt-5 px-4">
      <a data-node="m_nav_cta" data-node-type="page_links" data-node-default="/store" href="{{nav_cta}}" class="w-full h-14 md:h-12 sm:h-11 rounded-xl bg-[#010609] text-white text-lg md:text-base sm:text-sm font-normal leading-none flex items-center justify-center no-underline">
        <span data-node="m_nav_cta_text" data-node-type="text" data-node-default="Explore Store">{{nav_cta_text}}</span>
      </a>
    </div>
    {{/if}}
  </div>
</header>