/* Keep MAX/Telegram upper-menu pill labels white (Webflow IX2 sets grey on mouseout). */
.new-uppermenu .link-block-25 .link-top-header,
.new-uppermenu .link-block-25:hover .link-top-header,
.new-uppermenu .link-block-25 .link-top-header:hover {
  color: #fff !important;
}

/*
 * Mobile nav panel (.show-menu):
 * - Keep marquee + white bar visible above the panel
 * - Menu content starts at the top of the panel (no large spacer)
 * - Slide in from the left (JS toggles html.pzps-mobile-nav-open)
 */
@media screen and (max-width: 767px) {
  :root {
    --pzps-mobile-nav-bar-height: 60px;
  }

  .show-menu.div-block-117 {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    /* Below the white hamburger bar so content can start at the top */
    top: var(--pzps-mobile-nav-bar-height);
    height: calc(100% - var(--pzps-mobile-nav-bar-height));
    height: calc(100dvh - var(--pzps-mobile-nav-bar-height));
    max-height: calc(100dvh - var(--pzps-mobile-nav-bar-height));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    /* !important beats Webflow IX2 inline translateY */
    transform: translate3d(-100%, 0, 0) !important;
    transition: transform 0.45s ease, visibility 0s linear 0.45s;
    pointer-events: none;
    visibility: hidden;
  }

  /* With marquee: sit below marquee strip + white bar */
  body:has(.pzps-marquee) .show-menu.div-block-117 {
    top: calc(var(--pzps-marquee-height, 40px) + var(--pzps-mobile-nav-bar-height));
    height: calc(
      100% - var(--pzps-marquee-height, 40px) - var(--pzps-mobile-nav-bar-height)
    );
    height: calc(
      100dvh - var(--pzps-marquee-height, 40px) - var(--pzps-mobile-nav-bar-height)
    );
    max-height: calc(
      100dvh - var(--pzps-marquee-height, 40px) - var(--pzps-mobile-nav-bar-height)
    );
  }

  html.pzps-mobile-nav-open .show-menu.div-block-117 {
    transform: translate3d(0, 0, 0) !important;
    pointer-events: auto;
    visibility: visible;
    transition: transform 0.45s ease, visibility 0s;
  }

  /* Marquee above the sliding panel while open. */
  html.pzps-mobile-nav-open .new-uppermenu:has(.pzps-marquee) {
    z-index: 95 !important;
  }

  /* Content starts at top of panel — kill Webflow’s large margin-top */
  .show-menu .div-block-116 {
    margin-top: 16px !important;
    margin-bottom: 24px !important;
    padding-top: 0 !important;
  }

  html.pzps-mobile-nav-open {
    overflow: hidden;
  }

  /* Hamburger → X (replaces IX2 rotate on mobile). */
  .the-menu a.menu {
    transition: transform 0.2s ease;
  }

  .the-menu a.menu .line-left,
  .the-menu a.menu .line-rigte {
    transition: transform 0.2s ease;
  }

  html.pzps-mobile-nav-open .the-menu a.menu {
    transform: rotate(90deg);
  }

  html.pzps-mobile-nav-open .the-menu a.menu .line-left {
    transform: translateY(5px) rotate(45deg);
  }

  html.pzps-mobile-nav-open .the-menu a.menu .line-rigte {
    transform: translateY(-5px) rotate(-45deg);
  }

  @media (prefers-reduced-motion: reduce) {
    .show-menu.div-block-117 {
      transition: none;
    }

    .the-menu a.menu,
    .the-menu a.menu .line-left,
    .the-menu a.menu .line-rigte {
      transition: none;
    }
  }
}