@media (max-width: 420px) {
  .primary-header__item-menu,
  .primary-header__item-meta {
    display: none;
  }

  .primary-header__btns {
    display: none;
  }

/*  .header__item-phone {
    display: none;
  }*/

  .header__item-mail {
    display: none;
  }

  .sub-header {
    padding: 12px 0px;
  }

  .primary-header__item-mobile-menu {
    display: block;
  }

  .mobile-menu-bar {
    display: block;
  }

  .popup__city {
    flex-direction: column-reverse;
    align-items: center;
    gap: 35px;
    padding-top: 69px;
  }

  .popup-wrapper__city .popup-wrapper__main {
    display: block;
    position: relative;
  }

  .popup-wrapper__main-city {
    padding-left: 15px;
    padding-right: 15px;
  }

  .popup__city .popup {
    padding: 30px;
  }

  .popup__city .input-primary {
    width: 340px;
  }

  .popup__search {
    flex-direction: column-reverse;
    align-items: center;
    gap: 35px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .popup-wrapper__search .popup-wrapper__main {
    padding-top: 69px;
  }

  .popup__search .btn-single-icon {
    font-size: var(--fz-icon-20);
  }

  .catalog__mansory .catalog__item {
    width: 100%;
  }

  .popup-wrapper__catalog .popup-wrapper__secondary {
    padding: 0px;
  }

  .popup__catalog-scroll {
    border-radius: 0px;
    padding: 20px 4px 63px 15px;
    margin-top: 48px;
    height: calc(100vh - 48px);
  }

  .popup__catalog-header {
    padding-bottom: 40px;
    display: flex;
    justify-content: flex-end;
    padding-right: 15px;
  }

  .popup__catalog-header .btn-single-icon {
    font-size: var(--fz-icon-20);
    background: #000;
    color: #fff;
    border: unset;
  }

  .bannerSwiper-main .banner__img-desktop {
    display: none;
  }

  .bannerSwiper-main .banner__img-mobile {
    display: block;
  }

  .bannerSwiper-main .banner__img-mobile {
    height: 100%;
    width: 100%;
  }


  .bannerSwiper__slide {
    aspect-ratio: unset;
  }

  .bannerSwiper__content .title {
    font-size: var(--fz-h2);
    line-height: var(--lh-h2);
  }

  .swiper-arrow-left,
  .swiper-arrow-right {
    height: 40px;
    width: 40px;
  }

  .bannerSwiper-arrows {
    bottom: 30px;
    left: 30px;
  }

  .categorySwiper-item .title a {
    font-size: var(--fz-h6);
    line-height: var(--lh-h6);
    text-align: left;
  }

  .categorySwiper .categorySwiper-item {
    padding: 10px 0px 10px 10px;
  }
}