{% style %}
      .category-section {
          display: flex;
          flex-direction: column;
      }

    .category-name {
        cursor: pointer;
        padding: 10px 0;
        position: relative;

    }

      .category-name:hover,
    .sub-category-name:hover,
  .flyout-section li:hover  {
        background: #ddddde;
    }
      .category-name a {
        font-size: 14px;
        line-height: 16px;
        text-decoration: none;
        padding: 5px 2px 5px 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        cursor: pointer;
        color: #3c3c3c;
    }
      .category-name a svg.arrow-svg,
    .sub-category-name a svg.arrow-svg {
        opacity: 0;
        font-size: 15px;
        height: 15px;
        stroke-width: 2px;
    }

    .category-name:hover a svg.arrow-svg,
    .sub-category-name:hover a svg.arrow-svg {
        opacity: 1;
    }

      .flyout-wrap, .flyout-wrap-2 {
          display: none;
          position: absolute;
          top: 0;
          left: 100%;
          background-color: #f9f9f9;
          border: 1px solid #ddd;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
          z-index: 1;
          width: 100%;
          height: 100%;
      }
    .sub-category-name a {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
    .flyout-section li {
      list-style: none;
  }
      .category-name:hover .flyout-wrap, .sub-category-name:hover .flyout-wrap-2, .flyout-wrap:hover, .flyout-wrap-2:hover {
          display: block;
      }
{% endstyle %}

<div class="category-section">
  {%- assign menu = linklists[section.settings.main_menu] -%}
  {%- for link in menu.links -%}
    <div class="category-name" tabindex="0">
      <a href="{{ link.url }}">
        {{- link.title }}
        {% if link.links.size > 1 %}
          <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="arrow-svg">
            <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
          </svg>
        {% endif %}
      </a>
    </div>
    <div class="flyout-wrap">
      <div class="flyout-section">
        {%- if link.links.size > 1 -%}
          {%- for childlink in link.links -%}
            <div class="sub-category-name">
              {%- if childlink.links.size > 0 -%}
                <a
                  id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}"
                  href="{{ childlink.url }}"
                  class="header__menu-item list-menu__item link link--text focus-inset caption-large{% if childlink.current %} list-menu__item--active{% endif %}"
                  {% if childlink.current %}
                    aria-current="page"
                  {% endif %}
                >
                  {{- childlink.title | escape -}}
                  {% if childlink.links.size > 0 %}
                    <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="arrow-svg">
                      <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
                    </svg>
                  {% endif %}
                </a>
                <div class="flyout-wrap-2">
                  <div class="flyout-section">
                    {%- for grandchildlink in childlink.links -%}
                      <li>
                        <a
                          id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
                          href="{{ grandchildlink.url }}"
                          class="header__menu-item list-menu__item link link--text focus-inset caption-large{% if grandchildlink.current %} list-menu__item--active{% endif %}"
                          {% if grandchildlink.current %}
                            aria-current="page"
                          {% endif %}
                        >
                          {{- grandchildlink.title | escape -}}
                        </a>
                      </li>
                    {%- endfor -%}
                  </div>
                </div>
              {%- else -%}
                <a
                  id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}"
                  href="{{ childlink.url }}"
                  class="header__menu-item list-menu__item link link--text focus-inset caption-large{% if childlink.current %} list-menu__item--active{% endif %}"
                  {% if childlink.current %}
                    aria-current="page"
                  {% endif %}
                >
                  {{- childlink.title | escape -}}
                </a>
              {%- endif -%}
            </div>
          {%- endfor -%}
        {%- else -%}
        {%- endif -%}
      </div>
    </div>
  {%- endfor -%}
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
      const categoryNames = document.querySelectorAll('.category-name');

      function toggleFlyoutWrap(element, show) {
          const flyoutWrap = element.nextElementSibling;
          if (flyoutWrap && flyoutWrap.classList.contains('flyout-wrap')) {
              flyoutWrap.style.display = show ? 'block' : 'none';
          }
      }

      categoryNames.forEach(category => {
          const subCategoryWrap = category.nextElementSibling;
          const subCategoryNames = subCategoryWrap.querySelectorAll('.sub-category-name');

          if (subCategoryNames.length > 0) {
              category.addEventListener('mouseenter', () => toggleFlyoutWrap(category, true));
              category.addEventListener('mouseleave', () => toggleFlyoutWrap(category, false));

              const flyoutWrap = category.nextElementSibling;
              if (flyoutWrap && flyoutWrap.classList.contains('flyout-wrap')) {
                  flyoutWrap.addEventListener('mouseenter', () => toggleFlyoutWrap(category, true));
                  flyoutWrap.addEventListener('mouseleave', () => toggleFlyoutWrap(category, false));
              }

              subCategoryNames.forEach(subCategory => {
                  const flyoutWrap2 = subCategory.querySelector('.flyout-wrap-2');
                  if (flyoutWrap2) {
                      subCategory.addEventListener('mouseenter', () => {
                          flyoutWrap2.style.display = 'block';
                      });
                      subCategory.addEventListener('mouseleave', () => {
                          flyoutWrap2.style.display = 'none';
                      });
                  }
              });
          } else {
              toggleFlyoutWrap(category, false);
          }
      });

      document.addEventListener('click', function (event) {
          if (!event.target.closest('.category-section')) {
              categoryNames.forEach(category => {
                  toggleFlyoutWrap(category, false);
              });
          }
      });
  });
</script>
