{% comment %}
      Designed by Foysal • eCommerceThesis
    {% endcomment %}

    <style>
                  .header-wrapper .header__menu-item,
                  .header-wrapper .header__menu-item span,
                  .header-wrapper .list-menu__item,
                  .header-wrapper .header__active-menu-item,
                  .header-wrapper .header__menu-item.link,
                  .header-wrapper .header__menu-item.link--text,
                  .header-wrapper .header__submenu .header__menu-item {
                    text-underline-offset: unset !important;
                    text-decoration: none !important;
                    border-bottom: none !important;
                    color: #333 !important;
                    font-family: 'Segoe UI', sans-serif;
                  }

                  .header__menu-item::after,
                  .header__active-menu-item::after {
                    display: none !important;
                  }

                  /* Submenu styling */
                  .ecommercethesis-submenu {
                    border-radius: 12px;
                    background: #f9fafe;
                    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
                    padding: 8px;
                    opacity: 0;
                    transform: translateY(-10px);
                    transition: opacity 0.3s ease, transform 0.3s ease;
                    pointer-events: none;
                  }

                  details[open] > .ecommercethesis-submenu {
                    opacity: 1;
                    transform: translateY(0);
                    pointer-events: auto;
                    margin-top: 8px;
                  }

                  .ecommercethesis-submenu .header__menu-item {
                    border-radius: 8px;
                    padding: 10px 16px;
                    margin: 2px 0;
                    font-size: 15px;
                    white-space: nowrap;
                    transition: background-color 0.2s ease, color 0.2s ease;
                  }

                  .ecommercethesis-submenu .header__menu-item:hover,
                  .ecommercethesis-submenu .header__menu-item:focus {
                    background-color: rgba(92,106,196,0.1);
                    color: #000;
                  }

                  .ecommercethesis-nav-item {
                    position: relative;
                  }

                  .ecommercethesis-nav-item::before {
                    content: '';
                    position: absolute;
                    bottom: -2px;
                    left: 50%;
                    width: 0;
                    height: 2px;
                    background-color: #5c6ac4;
                    transform: translateX(-50%);
                    transition: width 0.25s ease;
                  }

                  .ecommercethesis-nav-item:hover::before,
                  details[open] > summary.ecommercethesis-nav-item::before,
                  .ecommercethesis-nav-item[aria-current="page"]::before {
                    width: 100%;
                  }


            /* First-Level Arrow: Down by default, Up when open */
      .header__menu-item .icon-caret {
        transform: rotate(0deg); /* Downward */
        transition: transform 0.3s ease;
      }

      details[open] > summary > .icon-caret {
        transform: rotate(180deg); /* Upward */
      }

      /* Second-Level Flyout Arrow: Right by default, Left when open */
      .ecommercethesis-submenu-parent > .header__menu-item .icon-caret {
        transform: rotate(-90deg); /* Right */
        transition: transform 0.3s ease;
      }

      .ecommercethesis-submenu-parent[open] > .header__menu-item .icon-caret {
        transform: rotate(90deg) !important; /* Left */
      }




                  /* Flyout styles */
                  .ecommercethesis-submenu-parent {
                    position: relative !important;
                  }

                  .ecommercethesis-flyout-submenu {
                    position: absolute !important;
                    left: calc(100% + 10px) !important;
                    top: 0 !important;
                    margin-top: 0 !important;
                    border-radius: 12px !important;
                    background: #fff !important;
                    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
                    min-width: 200px;
                    z-index: 11;
                    opacity: 0;
                    transform: translateX(-10px);
                    transition: opacity 0.25s ease, transform 0.25s ease;
                    pointer-events: none;
                  }

                  .ecommercethesis-submenu-parent[open] > .ecommercethesis-flyout-submenu {
                    opacity: 1;
                    transform: translateX(0);
                    pointer-events: auto;
                  }

                  @media screen and (max-width: 749px) {
                    .ecommercethesis-submenu {
                      border-radius: 8px;
                      box-shadow: none;
                      border-left: 2px solid rgba(0,0,0,0.05);
                      margin-left: 10px;
                    }

                    .ecommercethesis-flyout-submenu {
                      position: relative !important;
                      left: 0 !important;
                      box-shadow: none !important;
                      border-left: 2px solid rgba(0,0,0,0.05);
                      margin-left: 10px !important;
                      margin-top: 0 !important;
                    }

                    .ecommercethesis-flyout-submenu::before {
                      display: none;
                    }
                  }

                  .header__submenu.list-menu {
                    border-radius: 12px;
                    overflow: visible !important;
                    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
                    padding: 8px;
                  }
    </style>

    <script>
      document.addEventListener('DOMContentLoaded', function() {
        function initializeFlyoutMenus() {
          document.querySelectorAll('.header__submenu.list-menu').forEach(submenu => {
            submenu.classList.add('ecommercethesis-submenu');
          });

          document.querySelectorAll('.header__inline-menu .header__menu-item').forEach(item => {
            item.classList.add('ecommercethesis-nav-item');
          });

          document.querySelectorAll('.header__submenu details').forEach(menuItem => {
            menuItem.classList.add('ecommercethesis-submenu-parent');
            const childSubmenu = menuItem.querySelector('.header__submenu');
            if (childSubmenu) {
              childSubmenu.classList.add('ecommercethesis-flyout-submenu');
            }
          });

          setupMenuClosingBehavior();
        }

        function setupMenuClosingBehavior() {
          const firstLevelDetails = document.querySelectorAll('.header__inline-menu > ul > li > details');

          firstLevelDetails.forEach(detail => {
            detail.addEventListener('click', function(event) {
              if (event.target.closest('summary')) {
                firstLevelDetails.forEach(other => {
                  if (other !== detail && other.hasAttribute('open')) {
                    other.removeAttribute('open');
                  }
                });
              }
            });
          });

          document.querySelectorAll('.ecommercethesis-submenu-parent').forEach(detail => {
            detail.addEventListener('click', function(event) {
              if (event.target.closest('summary')) {
                event.stopPropagation();

                const parentSubmenu = detail.closest('.ecommercethesis-submenu');
                if (parentSubmenu) {
                  parentSubmenu.querySelectorAll('.ecommercethesis-submenu-parent').forEach(other => {
                    if (other !== detail && other.hasAttribute('open')) {
                      other.removeAttribute('open');
                    }
                  });
                }
              }
            });
          });

          document.addEventListener('click', function(event) {
            if (!event.target.closest('.header__inline-menu')) {
              document.querySelectorAll('.header__inline-menu details[open]').forEach(detail => {
                detail.removeAttribute('open');
              });
            }
          });

          firstLevelDetails.forEach(detail => {
            detail.addEventListener('toggle', function() {
              if (!this.hasAttribute('open')) {
                this.querySelectorAll('.ecommercethesis-submenu-parent[open]').forEach(flyout => {
                  flyout.removeAttribute('open');
                });
              }
            });
          });
        }

        initializeFlyoutMenus();
        setTimeout(initializeFlyoutMenus, 500);
      });
    </script>