.nav--header-top .nav-list {
  display: flex;
  gap: 3rem; }

.nav--header-top .nav-item {
  position: relative; }
  .nav--header-top .nav-item .nav-link {
    transition: all ease .3s; }
  .nav--header-top .nav-item:after {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    margin: auto;
    width: 0%;
    content: '.';
    color: transparent;
    background: #FFC422;
    height: 2px;
    transition: all ease .3s; }
  .nav--header-top .nav-item:before {
    bottom: auto;
    top: -1px; }
  @media (min-width: 1024px) {
    .nav--header-top .nav-item:hover {
      cursor: pointer; }
      .nav--header-top .nav-item:hover .nav-link {
        color: #121219; }
      .nav--header-top .nav-item:hover:after {
        width: 100%; } }
  .nav--header-top .nav-item:active:not(.has-nav) .nav-link {
    transform: translateY(2px); }
  .nav--header-top .nav-item.active:not(.has-nav) {
    pointer-events: none; }
    .nav--header-top .nav-item.active:not(.has-nav) .nav-link {
      font-weight: 600; }
    .nav--header-top .nav-item.active:not(.has-nav):after {
      width: 100%; }
  .nav--header-top .nav-item.has-nav {
    position: relative; }
    .nav--header-top .nav-item.has-nav .icon {
      transition: all ease .3s; }
    .nav--header-top .nav-item.has-nav:hover .nav-lvl2 {
      opacity: 1;
      visibility: visible;
      transform: translateY(0.3rem); }
    .nav--header-top .nav-item.has-nav:hover .nav-toggle .icon {
      fill: #FFC422;
      transform: rotate(180deg); }

.nav--header-top .nav-link {
  display: flex;
  align-items: center;
  gap: 2px; }

.nav--header-top .nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center; }

.nav--header-top .nav-lvl2 {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1rem);
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 500;
  background: #FFFFFF;
  padding: 1.6rem 2rem;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(0.75rem);
  transition: all ease .3s; }
  .nav--header-top .nav-lvl2-item:not(:last-child) {
    margin-bottom: .8rem; }
  @media (min-width: 1024px) {
    .nav--header-top .nav-lvl2-item {
      cursor: pointer; }
      .nav--header-top .nav-lvl2-item:hover {
        color: #8B8B8B; } }
  .nav--header-top .nav-lvl2-item:active .nav-lvl2-link {
    transform: translateY(2px); }
  .nav--header-top .nav-lvl2-item-name {
    transition: all ease .3s; }

.nav--header-top .nav-lvl2-link {
  transition: all ease .3s; }

.nav--header-bottom {
  font-weight: 600; }
  @media (max-width: 1023px) {
    .nav--header-bottom {
      overflow: auto;
      margin: 0 calc(-1 * (36px / 2)); } }
  .nav--header-bottom .nav-list {
    display: flex;
    justify-content: space-between;
    align-items: center; }
    @media (max-width: 1023px) {
      .nav--header-bottom .nav-list {
        gap: 30px;
        padding: 0 calc((36px / 2)); } }
  .nav--header-bottom .nav-item {
    display: flex;
    position: relative;
    z-index: 2; }
    .nav--header-bottom .nav-item:before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      border-top: 0.3rem solid transparent;
      border-bottom: 0.3rem solid transparent;
      transition: all ease .3s;
      pointer-events: none; }
    @media (max-width: 1023px) {
      .nav--header-bottom .nav-item {
        flex-shrink: 0; }
        .nav--header-bottom .nav-item:first-child {
          display: none; }
        .nav--header-bottom .nav-item:last-child {
          padding-right: calc((36px / 2)); } }
    .nav--header-bottom .nav-item .nav-link {
      height: 100%;
      text-align: center;
      display: block;
      padding: 1.6rem 0;
      width: 100%;
      text-transform: uppercase;
      font-family: "PlayfairDisplay", Arial, Verdana, sans-serif; }
      @media (max-width: 1023px) {
        .nav--header-bottom .nav-item .nav-link {
          padding: 8px 0;
          font-size: 14px; } }
    @media (min-width: 1024px) {
      .nav--header-bottom .nav-item {
        cursor: pointer; }
        .nav--header-bottom .nav-item:hover:before {
          border-top: 3px solid #FFC422;
          border-bottom: 3px solid #FFC422; } }
    .nav--header-bottom .nav-item:active:before {
      border-top: 3px solid #121219;
      border-bottom: 3px solid #121219; }
    .nav--header-bottom .nav-item.active:before, .nav--header-bottom .nav-item.catalog-open:before {
      border-top: 3px solid #121219;
      border-bottom: 3px solid #121219; }
    .nav--header-bottom .nav-item.active {
      pointer-events: auto; }
    .nav--header-bottom .nav-item .btn--catalog {
      padding-left: 5.5rem; }
      .nav--header-bottom .nav-item .btn--catalog .nav-item-name {
        pointer-events: none; }

.nav--footer .nav-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start; }

.nav--footer .nav-item {
  position: relative; }
  .nav--footer .nav-item:not(:last-child) {
    margin-bottom: 1.2rem; }
    @media (max-width: 575px) {
      .nav--footer .nav-item:not(:last-child) {
        margin-bottom: 8px; } }
  .nav--footer .nav-item .nav-link {
    transition: all ease .3s; }
  .nav--footer .nav-item:after {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    margin: auto;
    width: 0%;
    content: '.';
    color: transparent;
    background: #FFC422;
    height: 2px;
    transition: all ease .3s; }
  .nav--footer .nav-item:before {
    bottom: auto;
    top: -1px; }
  @media (min-width: 1024px) {
    .nav--footer .nav-item:hover {
      cursor: pointer; }
      .nav--footer .nav-item:hover .nav-link {
        color: #121219; }
      .nav--footer .nav-item:hover:after {
        width: 100%; } }
  .nav--footer .nav-item:active:not(.has-nav) .nav-link {
    transform: translateY(2px); }
  .nav--footer .nav-item.active:not(.has-nav) {
    pointer-events: none; }
    .nav--footer .nav-item.active:not(.has-nav) .nav-link {
      font-weight: 600; }
    .nav--footer .nav-item.active:not(.has-nav):after {
      width: 100%; }

@media (max-width: 575px) {
  .nav--footer {
    padding-left: 25px;
    margin: 10px 0px; } }

.nav--mobile .nav-list {
  display: flex;
  flex-direction: column; }

.nav--mobile .nav-item {
  padding: 0px 0px;
  margin-bottom: 12px; }
  .nav--mobile .nav-item:last-child {
    margin-bottom: 0px; }
  .nav--mobile .nav-item.active .nav-lvl2 {
    transform: translateX(0); }

.nav--mobile .nav-item-img-wrap {
  flex-shrink: 0;
  width: 34px;
  height: 34px; }
  .nav--mobile .nav-item-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain; }

.nav--mobile .nav-link {
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all ease .3s; }
  .nav--mobile .nav-link:active {
    transform: translateX(6px); }
    .nav--mobile .nav-link:active .nav-link__toggle {
      fill: #FFC422; }
  .nav--mobile .nav-link__toggle {
    margin-left: auto;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    fill: #C4C4C4;
    transform: rotate(-90deg); }

.nav--mobile .nav-lvl2 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 18px 80px;
  top: 60px;
  z-index: 2;
  background-color: #fff;
  transform: translateX(100%);
  transition: all ease .3s;
  max-height: calc(var(--vh, 1vh) * 100 - 60px);
  overflow: auto; }
  .nav--mobile .nav-lvl2__header {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    padding: 10px 20px 6px;
    position: relative; }
    .nav--mobile .nav-lvl2__header .icon {
      z-index: 2;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      fill: #FFC422;
      margin: auto 0; }
  .nav--mobile .nav-lvl2-list {
    padding: 0 18px;
    margin: 0 -18px; }
  .nav--mobile .nav-lvl2-item {
    padding: 10px 0;
    border-bottom: 1px solid #E4E4E4; }
    .nav--mobile .nav-lvl2-item:active {
      color: #FFC422; }
  .nav--mobile .nav-lvl2-link {
    display: flex;
    align-items: center;
    gap: 16px; }
    .nav--mobile .nav-lvl2-link img {
      width: 32px;
      height: 32px;
      object-fit: contain;
      flex-shrink: 0; }