<header data-component-type="Navigation" class="main-header">
  <style>
    @import url("https://fonts.googleapis.com/css2?family=Michroma&display=swap");

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: "Michroma", sans-serif;
    }

    .main-header {
      width: 100%;
      background: transparent;
    }

    .page-home .main-header,
    .header-overlay .main-header {
      position: absolute;
      top: 80px;
      left: 0;
      z-index: 10;
    }

    .page-inner .main-header,
    .header-default .main-header {
      position: relative;
      top: 0;
      background: #ffffff;
      z-index: 1;
    }

    .nav-container {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 28px 100px;
    }

    .nav-logo img {
      width: 220px;
      height: auto;
      display: block;
    }

    .nav-menu {
      display: flex;
      gap: 40px;
      list-style: none;
    }

    .nav-menu a {
      font-size: 20px;
      font-weight: 400;
      line-height: 100%;
      color: #000;
      text-decoration: none;
    }

    .nav-menu a.active {
      font-weight: 500;
    }

    .nav-cta a {
      width: 267px;
      height: 64px;

      padding: 18px 46px;
      border-radius: 12px;

      background: #010609;
      color: #ffffff;

      font-family: "Michroma", sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 20px;
      line-height: 100%;
      letter-spacing: 0%;

      display: flex;
      align-items: center;
      justify-content: center;

      text-decoration: none;
      opacity: 1;
    }

    .menu-toggle {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      z-index: 10001;
    }

    .menu-toggle svg {
      width: 28px;
      height: 28px;
      stroke: #000;
    }

    .mobile-menu {
      position: fixed;
      inset: 0;
      background: #fff;
      transform: translateY(-100%);
      transition: transform 0.4s ease;
      z-index: 10000;
      padding: 120px 16px 40px;
      pointer-events: none;
    }

    #menuToggleCheckbox:checked ~ .mobile-menu {
      transform: translateY(0);
      pointer-events: auto;
    }

    .mobile-menu ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 28px;
      text-align: center;
    }

    .mobile-menu a {
      font-size: 20px;
      font-weight: 400;
      color: #000;
      text-decoration: none;
    }

    @media (max-width: 1024px) {
      .nav-container {
        padding: 24px 40px;
      }

      .nav-menu,
      .nav-cta {
        display: none;
      }

      .menu-toggle {
        display: block;
      }
    }

    @media (max-width: 768px) {
      .nav-container {
        padding: 20px 16px;
      }
    }

    @media (max-width: 1024px) {
      .main-header {
        top: 40px;
      }

      .nav-container {
        padding: 20px 40px;
      }

      .nav-logo img {
        width: 180px;
      }
    }

    @media (max-width: 768px) {
      .main-header {
        top: 24px;
      }

      .nav-container {
        padding: 16px 20px;
      }

      .nav-logo img {
        width: 150px;
      }

      .menu-toggle svg {
        width: 26px;
        height: 26px;
      }

      .mobile-menu {
        padding: 100px 24px 40px;
      }

      .mobile-menu ul {
        gap: 24px;
      }

      .mobile-menu a {
        font-size: 18px;
        padding: 12px 0;
      }
    }

    @media (max-width: 480px) {
      .main-header {
        top: 16px;
      }

      .nav-container {
        padding: 36px 50px;
      }

      .nav-logo img {
        width: 130px;
      }

      .menu-toggle svg {
        width: 24px;
        height: 24px;
      }

      .mobile-menu {
        padding: 170px 20px 32px;
      }

      .mobile-menu a {
        font-size: 26px;
      }
    }

    #menuToggleCheckbox:checked + nav .menu-toggle svg {
      opacity: 0;
    }

    .menu-toggle::before,
    .menu-toggle::after {
      content: "";
      position: absolute;
      width: 26px;
      height: 2px;
      background: #000;
      opacity: 0;
      transition: all 0.3s ease;
    }

    #menuToggleCheckbox:checked + nav .menu-toggle::before {
      opacity: 1;
      transform: rotate(45deg);
    }

    #menuToggleCheckbox:checked + nav .menu-toggle::after {
      opacity: 1;
      transform: rotate(-45deg);
    }

    .menu-toggle {
      position: relative;
    }

    .menu-toggle::before,
    .menu-toggle::after {
      top: 50%;
      left: 0;
    }
  </style>

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

  <nav class="nav-container">
    <div class="nav-logo">
      <img
        data-node="logo"
        data-node-type="file"
        data-node-label="Logo"
        data-node-default="/assets/clothing-logo.svg"
        src="{{logo}}"
        alt="Logo"
      />
    </div>

    <ul class="nav-menu">
      {{#if show_nav_item_1}}
      <li>
        <a
          class="nav-link"
          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="nav-link"
          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="nav-link"
          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="nav-link"
          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="nav-cta">
      <a
        data-node="nav_cta"
        data-node-type="page_links"
        data-node-default="/store"
        href="{{nav_cta}}"
      >
        <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" aria-label="Open Menu">
      <svg 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" id="mobileMenu">
    <ul>
      {{#if show_m_nav_item_1}}
      <li>
        <a
          class="mobile-link"
          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="mobile-link"
          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="mobile-link"
          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="mobile-link"
          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>
  </div>
</header>
