/* ----- Desktop and Tablet ----- */
  @media screen and (min-width: 768px) {
    /* Menu Open/Close */
    .nav_menu {
      grid-template-columns: 0fr;
      transition: grid-template-columns 0.6s cubic-bezier(0.625, 0.05, 0, 1);
    }

    .nav_menu-desktop-trigger[data-nav-desktop='opened'] .nav_menu,
    .nav_menu-desktop-trigger:hover .nav_menu,
    .nav_menu-desktop-trigger:focus-within .nav_menu {
      grid-template-columns: 1fr;
    }

    /* Menu Links Opacity */
    .nav_menu-ul {
      opacity: 0;
      transition: opacity 0.4s ease;
    }

    .nav_menu-desktop-trigger[data-nav-desktop='opened'] .nav_menu-ul,
    .nav_menu-desktop-trigger:hover .nav_menu-ul,
    .nav_menu-desktop-trigger:focus-within .nav_menu-ul {
      opacity: 1;
    }

    /* Menu Burger Open/Close */
    .nav_menu-wrapper_burger {
      max-width: 4.5rem;
      transition: max-width 0.6s cubic-bezier(0.625, 0.05, 0, 1);
    }

    .nav_menu-desktop-trigger[data-nav-desktop='opened'] .nav_menu-wrapper_burger,
    .nav_menu-desktop-trigger:hover .nav_menu-wrapper_burger,
    .nav_menu-desktop-trigger:focus-within .nav_menu-wrapper_burger {
      max-width: 0rem;
    }

    /* Keep links clickable while the menu is force-opened at the top.
     !important is needed to override the inline pointer-events:none that
     your existing desktop script sets on mouseleave/focusout. */
    .nav_menu-desktop-trigger[data-nav-desktop='opened'] [data-nav-link] {
      pointer-events: auto !important;
    }

    /* Designer Override */
    .wf-design-mode .nav_menu {
      grid-template-columns: 1fr;
    }
    .wf-design-mode .nav_menu-ul {
      opacity: 1;
    }
    .wf-design-mode .nav_menu-wrapper_burger {
      max-width: 4.5rem !important;
    }
  }

  /* ----- Mobile ----- */
  @media screen and (max-width: 767px) {
    /* Menu Open/Close */
    .nav_menu {
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.6s cubic-bezier(0.625, 0.05, 0, 1);
    }

    [data-nav-status='open'] .nav_menu,
    .nav_menu.is-open {
      grid-template-rows: 1fr;
    }

    /*Nav Paddings */
    .nav_right {
      transition: padding 0.4s cubic-bezier(0.625, 0.05, 0, 1);
    }

    [data-nav-status='open'] .nav_right,
    .nav:has(.is-open) .nav_right {
      padding-inline: 0rem;
    }

    /* Nav Links Opacity */
    [data-nav-link] {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.6s ease;
    }

    [data-nav-status='open'] [data-nav-link],
    .nav_menu.is-open [data-nav-link] {
      opacity: 1;
      pointer-events: auto;
    }

    /* Menu Background */
    .nav_background {
      transform: scaleY(0);
      transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
    }

    [data-nav-status='open'] .nav_background,
    .nav_wrapper:has(.is-open) .nav_background {
      transform: scaleY(1);
    }
  }

  @media screen and (max-width: 767px) and (max-height: 670px) {
    .nav_menu-content {
      max-height: 100dvh; 
      overflow-y: auto;
    }
  }