.phantom-menu {
   position: relative;
   width: 100%;
   z-index: 1000;
}

.phantom-menu-root,
.phantom-submenu,
.phantom-mega-links {
   list-style: none;
   margin: 0;
   padding: 0;
}

.phantom-menu-root {
   display: flex;
   align-items: stretch;
   gap: 0;
}

.phantom-menu-top {
   position: relative;
}

.phantom-menu-link,
.phantom-mega-group-title-link,
.phantom-mega-group-title,
.phantom-menu-link.is-static {
   display: inline-flex;
   align-items: center;
   gap: 0.55rem;
   text-decoration: none;
   white-space: nowrap;
}

.phantom-menu-link-top,
.phantom-menu-link-top.is-static {
   display: flex;
   align-items: center;
   min-height: 48px;
   padding: 0.9rem 1.1rem;
}

.phantom-submenu-link,
.phantom-submenu-link.is-static,
.phantom-mega-link,
.phantom-mega-link.is-static {
   display: inline-flex;
   min-height: 36px;
   padding: 0.35rem 0;
}

.phantom-submenu {
   position: absolute;
   top: 100%;
   left: 0;
   min-width: 220px;
   display: none;
   padding: 0.7rem 1rem;
   background: #141414;
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

.phantom-submenu-item {
   position: relative;
}

.phantom-submenu-item > .phantom-submenu {
   top: 0;
   left: 100%;
}

.phantom-menu-top:hover > .phantom-submenu,
.phantom-submenu-item:hover > .phantom-submenu {
   display: block;
}

.has-mega-menu {
   position: static;
}

.phantom-mega-menu {
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   display: none;
   width: 100%;
   padding: 1.4rem 1.6rem;
   background: #161616;
   box-shadow: 0 14px 36px rgba(0, 0, 0, 0.30);
}

.has-mega-menu:hover > .phantom-mega-menu {
   display: block;
}

.phantom-mega-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 1.4rem 1.8rem;
   width: 100%;
}

.phantom-mega-group {
   min-width: 0;
}

.phantom-mega-group-title-row {
   display: flex;
   align-items: center;
   gap: 0.6rem;
   margin-bottom: 0.65rem;
}

.phantom-mega-group-title,
.phantom-mega-group-title-link {
   font-weight: 600;
}

.phantom-mega-links {
   display: flex;
   flex-direction: column;
   gap: 0.2rem;
}

.menu-icon,
.phantom-mega-group-icon {
   flex: 0 0 auto;
   width: 1rem;
   height: 1rem;
   border-radius: 0.2rem;
   background: currentColor;
   opacity: 0.75;
}

.menu-label {
   display: inline-block;
}

@media (max-width: 900px) {
   .phantom-menu-root {
      flex-wrap: wrap;
   }

   .phantom-mega-menu {
      position: static;
      left: auto;
      right: auto;
      box-shadow: none;
   }

   .phantom-submenu {
      position: static;
      min-width: 0;
      box-shadow: none;
   }

   .phantom-submenu-item > .phantom-submenu {
      left: auto;
      top: auto;
   }
}