.submenu {
   background: $white;
   display: block;
   max-height: 0;
   opacity: 0;
   overflow: hidden;
   padding: 0 20px;
   position: absolute;
   top: 91%;
   left: 130px;
   right: 0;
   transition: all $transition-speed;
   z-index: -1;
   width: calc(100% - 20px);
   max-width: 930px;
   margin: 0 auto;
   border-radius: 10px;
   -webkit-box-shadow: 0 0 16px 3px rgba(0, 0, 0, .05);
   -moz-box-shadow: 0 0 16px 3px rgba(0, 0, 0, .05);
   box-shadow: 0 0 16px 3px rgba(0, 0, 0, .05);

   h3 {
      margin-top: 10px;
      align-items: flex-start;
   }

   ul {
      @include list-unstyled;

      display: flex;
      flex-wrap: wrap;
      padding-right: 24px;
   }

   .container-small {
      padding-top: 20px;
      padding-bottom: 20px;
      display: flex;

      > div:first-child {
         width: 75%;
      }
   }

   .nav-item {
      margin-bottom: 10px;
      margin-right: 10px;
      position: relative;
      width: calc(50% - 10px);
      border: none;
      background-color: $body-bg-alt-light;
      color: $black;
      font-size: 13px;
      border-radius: 10px;

      &:hover {
         background-color: $gray-light;
      }

      .nav-link .img {
         position: relative;

         &::before {
            background-color: rgba(0, 0, 0, .03);
            content: "";
            display: block;
            opacity: 1;
            pointer-events: none;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            transition: background-color $transition-speed ease;
            z-index: 2;
            margin-right: 35px;
         }
      }


      a {
         display: flex;
         align-items: center;
         font-weight: $font-weight-bold;
         letter-spacing: $letter-spacing-lg;
         padding: 14px;
         text-transform: uppercase;
         text-decoration: none;
      }

      img {
         flex-shrink: 0;
         margin-right: 35px;
      }
   }

   .submenu-product {
      width: 25%;
      flex-grow: 0;

      .review-stars {
         display: none;
      }

      .h3 {
         color: black;
      }
   }

   .catalog {
      border-color: transparent;
      font-weight: 400;
      margin-bottom: 0;

      @include haf {
         border-color: $border-color;
      }
   }

   @media screen and (max-width: $xl - 1) {
      left: 0;
   }
}

//[data-navitem="7"] .submenu,
.has-submenu.hover .submenu,
.no-js .has-submenu:hover .submenu {
   max-height: 600px;
   opacity: 1;
   z-index: 20;
}

