@charset "UTF-8";
.sidebar-filter {
  display: flex;
  flex-direction: column; }
  @media (min-width: 1024px) {
    .sidebar-filter::-webkit-scrollbar {
      width: 3px;
      /* ширина для вертикального скролла */
      height: 3px;
      /* высота для горизонтального скролла */
      border-radius: 0px;
      background-color: #D8D8D8; }
    .sidebar-filter::-webkit-scrollbar-thumb {
      background-color: #6F7682;
      border-radius: 10em; }
      .sidebar-filter::-webkit-scrollbar-thumb:hover {
        background-color: #6F7682; } }
  @media (max-width: 1023px) {
    .sidebar-filter {
      position: fixed;
      z-index: 120;
      top: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      max-width: 376px;
      max-height: calc(var(--vh, 1vh) * 100);
      overflow: hidden;
      transition: all .3s ease;
      transform: translateX(-100%);
      background-color: #fff; } }
  .sidebar-filter__header {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    justify-content: space-between;
    margin-bottom: 1.6rem;
    fill: #D8D8D8; }
    @media (max-width: 1023px) {
      .sidebar-filter__header {
        margin-bottom: 0;
        padding: 10px 16px;
        color: #fff;
        fill: #fff;
        background: #00A19B; } }
  .sidebar-filter__close {
    display: flex;
    align-items: center;
    transition: all ease .3s; }
    @media (min-width: 1024px) {
      .sidebar-filter__close {
        display: none;
        cursor: pointer; }
        .sidebar-filter__close:hover {
          transform: rotate(180deg); } }
  .sidebar-filter__filters {
    padding: 20px 16px;
    background-color: #F8F8F8; }
    @media (min-width: 1024px) {
      .sidebar-filter__filters {
        display: none; } }
  @media (max-width: 1023px) {
    .sidebar-filter__body {
      overflow: auto;
      flex-grow: 1;
      padding-right: 6px; } }
  @media (max-width: 1023px) {
    .sidebar-filter .catalog-sort__sort {
      display: block; } }

/* Side filter*/
@media (max-width: 1023px) {
  .side-filter {
    padding: 20px 10px 0 16px; } }

.side-filter .folded .side-filter__item {
  display: flex; }

.side-filter .folded .side-filter__more .icon {
  transform: rotate(-90deg); }

@media (min-width: 1024px) {
  .side-filter__overflow {
    max-height: 290px;
    overflow: auto; }
    .side-filter__overflow::-webkit-scrollbar {
      width: 3px;
      /* ширина для вертикального скролла */
      height: 3px;
      /* высота для горизонтального скролла */
      border-radius: 0px;
      background-color: #D8D8D8; }
    .side-filter__overflow::-webkit-scrollbar-thumb {
      background-color: #6F7682;
      border-radius: 10em; }
      .side-filter__overflow::-webkit-scrollbar-thumb:hover {
        background-color: #6F7682; } }

.side-filter__block {
  position: relative;
  margin-bottom: 2rem;
  padding-bottom: 2.4rem;
  border-bottom: 1px solid #D8D8D8; }
  @media (max-width: 1023px) {
    .side-filter__block {
      padding: 0;
      padding-bottom: 18px; } }
  .side-filter__block-body {
    margin-top: 2.4rem; }
    @media (max-width: 1023px) {
      .side-filter__block-body {
        margin-top: 16px; } }
    .side-filter__block-body--popular {
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      gap: .8rem; }
    .side-filter__block-body.folded {
      max-height: 60rem;
      overflow: auto; }
      .side-filter__block-body.folded::-webkit-scrollbar {
        width: 3px;
        /* ширина для вертикального скролла */
        height: 3px;
        /* высота для горизонтального скролла */
        border-radius: 0px;
        background-color: #D8D8D8; }
      .side-filter__block-body.folded::-webkit-scrollbar-thumb {
        background-color: #6F7682;
        border-radius: 10em; }
        .side-filter__block-body.folded::-webkit-scrollbar-thumb:hover {
          background-color: #6F7682; }

.side-filter__toggler {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  margin-left: auto; }
  @media (min-width: 1024px) {
    .side-filter__toggler:hover {
      cursor: pointer; } }

.side-filter__title {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all .3s ease;
  fill: #353535;
  font-weight: 600; }
  @media (min-width: 1024px) {
    .side-filter__title span {
      flex-grow: 1; } }
  @media (min-width: 1024px) {
    .side-filter__title {
      cursor: pointer; }
      .side-filter__title:hover {
        fill: #00A19B; } }
  .side-filter__title .icon {
    cursor: pointer;
    transform: rotate(90deg);
    pointer-events: none; }
    .side-filter__title .icon.active {
      transform: rotate(-90deg); }

.side-filter__item {
  display: none;
  margin-top: 2rem; }
  @media (max-width: 1023px) {
    .side-filter__item {
      margin-top: 16px; } }
  .side-filter__item:nth-child(-n + 5) {
    display: flex; }
  .side-filter__item:first-child {
    margin-top: 0; }
  .side-filter__item:not([disabled]) {
    order: -1; }
  .side-filter__item.activated:not(:first-of-type) {
    opacity: 0;
    transition: all .3s ease;
    transform: translateY(-65px); }
  .side-filter__item.deactivated:not(:first-of-type) {
    opacity: 0;
    transition: all .3s ease;
    transform: translateY(65px); }
  .side-filter__item.focus-in + .activated {
    opacity: 1;
    transition: none;
    transform: none; }

.side-filter .checkbox label {
  background-color: transparent; }

.side-filter__more {
  display: inline-flex;
  align-items: center;
  margin-top: 2.4rem;
  gap: 3px; }
  .side-filter__more .icon {
    transform: rotate(90deg); }

.side-filter__footer {
  position: sticky;
  z-index: 10;
  bottom: 0;
  display: grid;
  margin: 0 -3.4rem;
  padding: 1.4rem 3.6rem;
  gap: 1.8rem;
  transition: all .3s ease;
  background: #fff;
  grid-template-columns: 1fr 1fr; }
  @media (max-width: 1023px) {
    .side-filter__footer {
      margin: 0;
      padding: 10px 16px; } }
  .side-filter__footer:not(.loaded) > div {
    opacity: .4;
    pointer-events: none; }
  .side-filter__footer.disabled > div {
    opacity: .4;
    pointer-events: none; }
  .side-filter__footer .btn--primary {
    font-weight: 400; }
    .side-filter__footer .btn--primary:active, .side-filter__footer .btn--primary:focus {
      color: #e4e4e4; }
  @media (max-width: 1023px) {
    .side-filter__footer .btn--outline .icon {
      width: 8px !important;
      height: 8px !important; } }

.filter-form__content.expanded {
  max-height: 0px;
  overflow: hidden; }

.filter-form__content .form-group {
  display: none; }
  .filter-form__content .form-group:nth-of-type(-n + 4) {
    display: block; }

.filter-form__content.active .form-group {
  display: block; }
  .filter-form__content.active .form-group:nth-of-type(-n + 4) {
    display: block; }

.filter-form__more {
  position: relative;
  display: inline-block;
  color: #E74829; }
  .filter-form__more .icon {
    fill: #E74829; }
  .filter-form__more:after {
    position: absolute;
    top: 100%;
    right: 100%;
    left: 0;
    height: 1px;
    content: '';
    transition: all .3s ease;
    background-color: #E74829; }
  .filter-form__more:hover {
    cursor: pointer; }
    .filter-form__more:hover:after {
      right: 0; }
  .filter-form__more.active .icon {
    transform: rotate(180deg); }

.btn-filter .text {
  margin-right: 5px; }

.btn-filter-reset a:hover {
  cursor: pointer; }
  .btn-filter-reset a:hover:after {
    right: 0; }

.mobile-filter-button {
  width: 100%;
  max-width: 320px;
  display: none;
  align-items: center; }
  @media (max-width: 424px) {
    .mobile-filter-button {
      max-width: none; } }
  .mobile-filter-button .btn {
    width: 100%; }
    .mobile-filter-button .btn .icon {
      transform: rotate(0deg);
      fill: #353535; }
  .mobile-filter-button span {
    margin-left: 8px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 400; }
  @media (max-width: 1023px) {
    .mobile-filter-button {
      display: flex; } }