.backdrop {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 87px;
  right: 0;
  backdrop-filter: brightness(80%) blur(4px);
  -webkit-backdrop-filter: brightness(80%) blur(4px);
  opacity: 0.5;
  transition: opacity 300ms, visibility 0s linear 150ms;
  z-index: -1;
  visibility: hidden;
}

.backdrop.visible {
  visibility: visible;
  opacity: 1 !important;
  z-index: 20;
}

.menu-item-content {
  position: fixed;
  top: 80px;
  right: 0;
  z-index: 100;
  width: 100%;
  display: block;
  overflow: hidden !important;
  transition: all 250ms ease-in;
}

.menu-item-content.hide {
  opacity: 0;
  visibility: hidden;
}

.menu-item-content.visible {
  opacity: 1;
  visibility: visible;
}

.background-wrapper {
  background-color: #fff;
  display: grid;
  z-index: 21;
  overflow: hidden;
}

.wrapper-container {
  max-width: 1152px;
  width: 100%;
  place-self: center;
  gap: 48px;
  margin: 49px 0 96px 0;
  animation: slideDown 0.5s ease-out;
}

.nav-item-wrapper {
  width: 800px;
  flex: 1 0 auto;
}

.nav-item,
.subscription-plans {
  gap: 16px;
  display: flex;
  flex-flow: column;
}

.divider {
  width: 100px;
  border: 1px solid var(--neutral-50, #f1f2f3);
}

.divider-left {
  width: 100px;
  border: 1px solid var(--neutral-50, #f1f2f3);
  place-self: self-start;
}

.item-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  text-align: left;
  margin-bottom: 8px;
  color: var(--neutral-900, #090a0b);
}

.header.content .block.block-menu .item-title {
    margin-bottom: 28px;
}

.item-title:hover {
  color: var(--primary-500, #007aff);
  cursor: pointer;
}
.item-title:hover::after {
  content: "→";
  margin-left: 8px;
  color: var(--primary-500, #007aff);
}
.item-content {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.menu-item {
  display: flex;
  font-size: 14px;
  font-weight: 500;
}

.menu-item:after {
    background: url('../images/arrow-top.svg') no-repeat center center;
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    margin-top: 2px;
    transition: transform 0.25s ease-in-out;
    transform: translate(6px, -2px) rotate(180deg);
    place-self: center;
    position: absolute;
    right: -10px;
}

.menu-item:hover {
  border-bottom: 1px solid var(--neutral-900, #090A0B) ;
}

.ui-menu-item:hover .menu-item:after {
    background: url('../images/arrow-top.svg') no-repeat center center;
    display: block;
    width: 12px;
    height: 12px;
    margin-top: 2px;
    content: "";
    font-weight: 600;
    transform: translate(6px, 2px);
    place-self: center;
}

.level-top-menu-item {
  color: #090a0b;
  line-height: 38px;
  font-weight: normal;
  height: 100%;
}

.header.content .block.block-menu ul .level-top-menu-item {
  line-height: 1.5;
}

div.img > a > img {
  aspect-ratio: 3/2;
  object-fit: cover;
}

.plans-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: var(--neutral-900, #090a0b);
}

.plans-content {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.nav-item-plans {
  display: grid;
  gap: 8px;
}

.flex-gap-4 {
  display: flex;
  gap: 4px;
  margin-top: 16px;
}

.img-small > img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 16px;
}

.grid-2-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
}

.grid-3-col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
}

.grid-4-col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
}

.shop-all {
  display: flex;
  flex-flow: row wrap;
  gap: 12px 0px;
}

.subscription-plans-title {
  width: 100%;
}

.shop-list-item {
  width: 50%;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  color: var(--primary-700, #383B45)
}

.block.block-menu ul li .shop-list-item.active-item a ,
.shop-list-item.active-item a {
  line-height: 24px;
}

.shop-list-item.active-item a span {
  font-weight: 700;
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  color: var(--button-color-ghost-enabled-text, #007aff);
}

@keyframes slideDown {
  0% {
    transform: translateY(-10%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.header.content .block.block-menu ul .wrapper-container {
    position: relative;
}

.els-shop-all {
    position: absolute;
    right: 0px;
    bottom: -51px;
    display: flex;
    align-items: center;
}

.els-shop-all a {
    color: var(--button-color-ghost-enabled-text, #007aff);
    font-weight: bold;
    font-size: 18px;
    margin-right: 10px;
}

.els-shop-all a:hover {
    color: var(--primary-500, #007aff);
    cursor: pointer;
}