@charset "UTF-8";
/* Сторінка категорії - Figma «Website - Products Page» 2351:114400.
   ПК: хедер 56, тіло = фільтр 310 | сітка 970 з розривом 20, картки 310 по три в ряд.
   Моб: заголовок і дві кнопки (сортування, фільтр), сітка у дві колонки по 169. */
.category__count {
  font: var(--t-body);
  letter-spacing: var(--t-body-ls);
  color: var(--c-text);
}

/* Моб (Figma 2346:75757): заголовок окремим рядком 56, під ним два рівні
   блоки 175x44 - «Фільтр» і сортування. */
.category__head {
  flex-direction: column;
  align-items: stretch;
  gap: 0; /* блоки заголовка і кнопок у макеті стоять впритул: 56 + 60 */
  margin-bottom: var(--space-4);
}

.category__head .v-section__head-left {
  align-items: center;
  gap: var(--space-2);
  min-height: 56px; /* блок заголовка в макеті - 56 */
}

.category__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 60px; /* смуга кнопок у макеті - 60 */
}

/* обидві кнопки однакової ширини, як 175+175 у макеті */
.category__actions > * {
  flex: 1 1 50%;
  min-width: 0;
}

.category__filter-btn {
  width: 100%;
  min-width: 0;
}

/* на мобільній сортування виглядає такою ж кнопкою, як «Фільтр» */
.category__actions .v-sort .v-btn {
  width: 100%;
  border: 1px solid var(--c-grey-light);
}

.category__actions .v-sort .v-btn span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category__view {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.category__view .is-active {
  color: var(--c-primary);
}

.category__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* у макеті між сіткою, кнопкою і пагінацією рівно по 24 */
.category__more {
  display: flex;
  justify-content: center;
  padding-block: var(--space-6);
}

@media (min-width: 1024px) {
  .category__head {
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
  }
  .category__actions {
    min-height: 0;
  }
  .category__actions > * {
    flex: 0 0 auto;
  }
  .category__actions .v-sort .v-btn {
    width: auto;
    border: 0;
  }
  .category__body {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-5);
  }
  .category__aside {
    flex: 0 0 310px;
    position: sticky;
    top: 148px; /* хедер 128 + повітря */
  }
  .category__main {
    flex: 1 0 0;
    min-width: 0;
  }
}