/* === Основные стили меню === */

.header__new-category__menu__item {
  display: flex;
}

.header__new-category__menu__item-wrapper {
  width: 19.48rem; /* 374px */
  display: flex;
  gap: 0.521rem; /* 10px */
  align-items: center;
  justify-content: space-between;
  padding: 0.833rem; /* 16px */
}

.header__new-category__menu__item:hover
  .header__new-category__menu__item-wrapper {
  border-radius: 0.417rem;
  -webkit-border-radius: 0.417rem;
  -moz-border-radius: 0.417rem;
  -ms-border-radius: 0.417rem;
  -o-border-radius: 0.417rem;
  border-bottom: solid 0.104rem #e9e800; /* 2px */
  background-color: #ffffff;
}

.header__new-category__menu__item-wrapper a {
  font-size: 1.042rem; /* 20px */
  line-height: 1.3;
  font-weight: 500;
  color: #333;
  text-decoration: none;
}

.header__new-category__menu__item-wrapper a:hover {
  color: #e9e800;
}

.header__new-category__menu__item-icon {
  padding: 0 0.26rem; /* 5px */
  width: 1.042rem; /* 20px */
}

/* === Выпадающий список (2-й уровень) === */

.header__new-category__menu__item__list {
  display: none; /* Скрыт по умолчанию */
  position: absolute;
  left: 20.313rem; /* 390px */
  top: 0;
  width: calc(83.333rem - 20.313rem); /* 1600px - 390px */
  padding-left: 1.042rem; /* 20px */
  border-left: solid 0.052rem #dadada; /* 1px */
  gap: 1.25rem 1.667rem; /* 24px 32px */
  flex-wrap: wrap;
  background: #fff;
  z-index: 1000;

  /* Плавное появление */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.header__new-category__menu__item__list.active {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

/* === Подпункты (3-й уровень) === */

.header__new-category__menu__item__list__item {
  display: flex;
  flex-direction: column;
  width: calc(33.333% - 1.146rem); /* ~1/3 */
}

.header__new-category__menu__item__list__item-subsection-link {
  width: fit-content;
  font-size: 1.042rem;
  font-weight: 500;
  line-height: 1.3;
  padding-bottom: 0.26rem;
  border-bottom: solid 0.104rem #333333;
  margin-bottom: 0.521rem;
  color: #333;
  text-decoration: none;
}

.header__new-category__menu__item__list__item-subsection-link:hover {
  color: #e9e800;
}

/* Список под-подкатегорий */
.header__new-category__menu__item__list__item__list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem; /* 12px */
  margin: 0.781rem 0 0 0.781rem; /* 15px */
}

/* Скрытые пункты (до "Ещё") */
.header__new-category__menu__item__list__item__list-link.hidden {
  display: none;
}

.header__new-category__menu__item__list__item__list-link {
  font-size: 0.833rem; /* 16px */
  line-height: 1.3;
  color: #757575;
  text-decoration: none;
}

.header__new-category__menu__item__list__item__list-link:hover {
  color: #000;
}

/* Кнопка "Ещё" */
.header__new-category__menu__item__list__item__list-more {
  cursor: pointer;
  font-size: 0.833rem;
  color: #333;
  margin-top: 0.521rem;
  user-select: none;
  width: fit-content;
}

.header__new-category__menu__item__list__item__list-more:hover {
  text-decoration: underline;
}

/* Скрываем кнопку после клика */
.header__new-category__menu__item__list__item__list-more.hidden {
  display: none;
}

/* === Общий список === */
ul.header__new-category__menu__list {
  display: flex;
  flex-direction: column;
  gap: 0.417rem; /* 8px */
  position: relative;
}

.header__new-category__menu__list-mobile {
  display: none;
}
@media (max-width: 1100px) {
  /* === Переключение между версиями === */
  ul.header__new-category__menu__list {
    display: none;
  }

  .header__new-category__menu__list-mobile {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  @media (min-width: 1100px) {
    .header__new-category__menu__list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .header__new-category__menu__list-mobile {
      display: none;
    }
  }

  /* === Мобильные стили === */
  .header__new-category__menu__item-mobile {
    border-bottom: 1px solid #f0f0f0;
  }

  .header__new-category__menu__item-mobile-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    cursor: pointer;
    background: #fff;
    border-radius: 8px;
    user-select: none;
  }

  .header__new-category__menu__item-mobile-link {
    font-size: 20px;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    flex-grow: 1;
  }

  .header__new-category__menu__icon-mobile {
    flex-shrink: 0;
    width: 50px;
    height: 48px;
    padding: 12px 15px;
    stroke: #333;
    transition: transform 0.3s ease;
    transform-origin: center;
    rotate: 90deg;
  }

  /* Поворот стрелки при открытии */
  .header__new-category__menu__item-mobile.open
    > .header__new-category__menu__item-mobile-wrapper
    .header__new-category__menu__icon-mobile {
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
  }

  /* Выпадающий список */
  .header__new-category__menu__dropdown-mobile {
    display: none;
    margin: 10px 20px 15px 20px;
    flex-direction: column;
    gap: 12px;
  }

  .header__new-category__menu__dropdown-mobile.open {
    display: flex;
  }

  .header__new-category__menu__dropdown__item-mobile {
    display: flex;
    flex-direction: column;
  }

  .header__new-category__menu__dropdown__link-mobile {
    font-size: 18px;
    color: #333;
    text-decoration: none;
    padding: 6px 0;
    font-weight: 500;
  }

  .header__new-category__menu__sublist-mobile {
    display: none;
  }
  .header__new-category__menu__sublist-mobile.show {
    margin: 8px 0 0 15px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .header__new-category__menu__sublist__link-mobile {
    font-size: 16px;
    color: #757575;
    text-decoration: none;
    padding: 4px 0;
  }

  .header__new-category__menu__sublist__link-mobile.hidden {
    display: none;
  }

  .header__new-category__menu__sublist__more-mobile {
    font-size: 16px;
    color: #333;
    cursor: pointer;
    width: fit-content;
    margin-top: 5px;
  }

  .header__new-category__menu__sublist__more-mobile:hover {
    text-decoration: underline;
  }
  .header__new-category__menu__sublist__more-mobile.hidden {
    display: none;
  }
  .header__new-category__menu__dropdown__item-mobile-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  svg.header__new-category__menu__subicon-mobile {
    width: 35px;
    height: 35px;
    padding: 6px;
    cursor: pointer;
    rotate: 90deg;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
  }
  svg.header__new-category__menu__subicon-mobile.open {
    rotate: 0deg;
  }
}

@media screen and (max-width: 767px) {
  .header__new-category__menu__list-mobile {
    padding-left: 15px;
    margin-top: 12px;
    height: 560px;
  }
  .header__mobile-catalog-wrapper
    a.header__new-category__menu__item-mobile-link,
  .header__mobile-catalog-wrapper
    a.header__new-category__menu__dropdown__link-mobile {
    font-size: 20px;
    line-height: 130%;
  }

  .header__mobile-catalog-wrapper a.header__new-category__menu__sublist__link-mobile {
    font-size: 16px;
    color: #757575;
    text-decoration: none;
    padding: 3px 0;
    font-weight: 400;
  }
  .header__new-category__menu__dropdown-mobile {
    margin: 20px 25px 15px 18px;
  }
  .header__new-category__menu__sublist-mobile.show{
    margin-top: 5px;
    gap: 0;
  }
}
