/* Сторінка katalog.html — каталог товарів. Docs: docs/pages/katalog.md */

/* Секція 1 — Hero (Figma 994:13438) — компактний, навмисно без градієнта-скріму */
.katalog-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-block: 150px 50px;
  background-color: var(--surface-dark);
}

.katalog-hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.katalog-hero__container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.katalog-hero__breadcrumbs {
  margin-bottom: var(--space-24);
}

.katalog-hero__title {
  color: var(--text-inverse);
}

@media (max-width: 767px) {
  .katalog-hero {
    padding-block: var(--space-64) var(--space-32);
  }
}

/* Секція 2 — «Сфера застосування» (Figma 994:13442) — фільтр-чіпи.
   CMS-модель — коментар у katalog.html (таксономія, слаги dim/biznes/promyslovist). */
.katalog-scope {
  padding-block: var(--space-40);
  background-color: var(--background-primary);
}

.katalog-scope__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
}

.katalog-scope__label {
  flex-shrink: 0;
  font-size: var(--font-size-12);
  line-height: var(--line-height-18);
  font-weight: var(--font-weight-medium);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-accent);
}

.katalog-scope__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-16);
}

.katalog-scope__chip {
  /* CMS: статика мала <button> — нативний UA-рендер кнопки в Chrome сам
     центрує вміст по вертикалі. Сервер віддає посилання <a> (сторінку
     фільтрує URL, не JS), а в анкора такого автоцентрування немає — текст
     сідає по line-height згори блоку й «спливає» вгору всередині 46px
     «таблетки». display:inline-flex + center відновлює вирівнювання кнопки
     один в один, не займаючи layout ряду (той самий flex-item ззовні). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding-inline: var(--space-24);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background-color: var(--background-primary);
  color: var(--text-primary);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-16);
  line-height: var(--line-height-28);
  cursor: pointer;
}

.katalog-scope__chip--active {
  border-color: transparent;
  background-color: var(--brand-primary);
  color: var(--text-inverse);
}

@media (max-width: 1199px) {
  .katalog-scope__row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
  }

  .katalog-scope__chips {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    width: 100%;
    padding-bottom: var(--space-4);
  }

  .katalog-scope__chip {
    flex-shrink: 0;
  }
}

@media (max-width: 767px) {
  .katalog-scope {
    padding-block: var(--space-32);
  }
}

/* Секція 3 — «Каталог» (Figma 994:13449). CMS-модель і логіка фільтрації/сортування/
   пагінації — docs/pages/katalog.md, розділ «Секція 3»; реалізація js/modules/katalog-*.js. */
.katalog-catalog {
  padding-block: var(--space-48) 140px;
  background-color: var(--background-secondary);
}

.katalog-catalog__layout {
  display: grid;
  /* 320px лише на широкому десктопі; на планшеті (768–1199px) сайдбар
     звужується разом із viewport (28vw), інакше картки товару затиснуті */
  grid-template-columns: clamp(220px, 28vw, 320px) 1fr;
  align-items: start;
  gap: var(--space-40);
}

/* ---------- Sidebar (спільне для .katalog-categories й .katalog-filters) ---------- */

/* Sticky коротшої колонки працює ЛИШЕ завдяки align-items:start на
   .katalog-catalog__layout: stretch забрав би запас висоти, в межах якого
   коротша колонка «їде» під час скролу довшої. */
.katalog-sidebar {
  position: sticky;
  top: 98px;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.katalog-categories,
.katalog-filters {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--space-24);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card-large);
  background-color: var(--background-primary);
}

.katalog-categories {
  gap: var(--space-16);
}

.katalog-categories__title,
.katalog-filters__title {
  font-size: var(--font-size-20);
  line-height: var(--line-height-28);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.katalog-categories__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 100%;
}

.katalog-categories__group-label,
.katalog-filters__group-title {
  width: 100%;
}

.katalog-categories__group-label {
  font-size: var(--font-size-12);
  line-height: var(--line-height-18);
  font-weight: var(--font-weight-medium);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-disabled);
}

.katalog-categories__nested {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 100%;
  padding-left: 26px;
}

.katalog-categories__divider,
.katalog-filters__divider {
  height: 1px;
  width: 100%;
  background-color: var(--border-subtle);
}

/* ---------- .katalog-option — чекбокс-рядок категорій і фільтрів.

   Фільтрація серверна, тож увесь рядок — це <a> з toggle-URL: клік по
   квадратику, назві чи лічильнику однаково змінює вибірку. Стан приходить з
   сервера класом --checked (раніше був прихований <input type=checkbox> у
   <label>: клік по квадратику перемикав лише галочку й нічого не фільтрував).
   Селектори з :has(.katalog-option__input:checked) лишені для сумісності зі
   статичною версткою katalog.html. ---------- */

.katalog-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

.katalog-option__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.katalog-option__box {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border-default);
  border-radius: 5px;
}

.katalog-option__check {
  display: none;
  width: 12px;
  height: 12px;
  color: var(--text-inverse);
}

.katalog-option:has(.katalog-option__input:checked) .katalog-option__box,
.katalog-option--checked .katalog-option__box {
  border-color: transparent;
  background-color: var(--brand-primary);
}

.katalog-option:has(.katalog-option__input:checked) .katalog-option__check,
.katalog-option--checked .katalog-option__check {
  display: block;
}

/* Наведення на будь-яку частину рядка підсвічує квадратик — підказка, що
   клікабельний увесь рядок, а не тільки назва. */
.katalog-option:hover:not(.katalog-option--disabled) .katalog-option__box {
  border-color: var(--border-accent);
}

.katalog-option:hover:not(.katalog-option--disabled) .katalog-option__label {
  color: var(--text-primary);
}

.katalog-option:has(.katalog-option__input:focus-visible) .katalog-option__box,
.katalog-option:focus-visible .katalog-option__box {
  outline: 2px solid var(--border-accent);
  outline-offset: 2px;
}

.katalog-option:focus-visible {
  outline: none;
}

.katalog-option__label {
  flex: 1 0 0;
  min-width: 0;
  font-size: var(--font-size-14);
  line-height: var(--line-height-22);
  color: var(--text-secondary);
}

.katalog-option:has(.katalog-option__input:checked) .katalog-option__label,
.katalog-option--checked .katalog-option__label {
  color: var(--text-primary);
}

.katalog-option__count {
  flex-shrink: 0;
  font-size: var(--font-size-12);
  line-height: var(--line-height-18);
  color: var(--text-disabled);
}

/* Лічильник 0 → пункт заблоковано (не приховано — навмисно); на CMS стан
   приходить із сервера класом --disabled (рядок рендериться як <span>). */
.katalog-option:has(.katalog-option__input:disabled),
.katalog-option--disabled {
  cursor: not-allowed;
}

.katalog-option:has(.katalog-option__input:disabled) .katalog-option__label,
.katalog-option:has(.katalog-option__input:disabled) .katalog-option__count,
.katalog-option--disabled .katalog-option__label,
.katalog-option--disabled .katalog-option__count {
  opacity: 0.4;
}

/* ---------- .katalog-filters — блок фільтрів ---------- */

.katalog-filters {
  gap: var(--space-20);
}

.katalog-filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.katalog-filters__reset {
  padding: 0;
  border: none;
  background: none;
  font-size: var(--font-size-12);
  line-height: var(--line-height-18);
  color: var(--text-accent);
  cursor: pointer;
}

.katalog-filters__group {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.katalog-filters__group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
}

.katalog-filters__group-title {
  font-size: var(--font-size-16);
  line-height: var(--line-height-28);
  color: var(--text-primary);
}

.katalog-filters__chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  transform: rotate(180deg);
  transition: transform var(--transition-base) var(--easing-out);
}

.katalog-filters__group--collapsed .katalog-filters__chevron {
  transform: rotate(0deg);
}

.katalog-filters__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 100%;
}

.katalog-filters__group--collapsed .katalog-filters__options,
.katalog-filters__group--collapsed .katalog-range {
  display: none;
}

/* ---------- Повзунок діапазону (наочний; поки не фільтрує — див. docs/pages/katalog.md) ---------- */

.katalog-range {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding-top: 6px;
}

.katalog-range__track {
  position: relative;
  height: 18px;
}

.katalog-range__bar {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 2px;
  background-color: var(--border-default);
  transform: translateY(-50%);
}

.katalog-range__active {
  position: absolute;
  top: 50%;
  height: 4px;
  border-radius: 2px;
  background-color: var(--brand-primary);
  transform: translateY(-50%);
  left: calc((var(--range-from, 0) - var(--range-min, 0)) / (var(--range-max, 100) - var(--range-min, 0)) * 100%);
  right: calc(100% - (var(--range-to, 100) - var(--range-min, 0)) / (var(--range-max, 100) - var(--range-min, 0)) * 100%);
}

.katalog-range__handle {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 2px solid var(--brand-primary);
  border-radius: var(--radius-full);
  background-color: var(--background-primary);
  cursor: grab;
  transform: translate(-50%, -50%);
}

.katalog-range__handle:active {
  cursor: grabbing;
}

.katalog-range__handle[data-range-handle="from"] {
  left: calc((var(--range-from, 0) - var(--range-min, 0)) / (var(--range-max, 100) - var(--range-min, 0)) * 100%);
}

.katalog-range__handle[data-range-handle="to"] {
  left: calc((var(--range-to, 100) - var(--range-min, 0)) / (var(--range-max, 100) - var(--range-min, 0)) * 100%);
}

.katalog-range__labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: var(--font-size-12);
  line-height: var(--line-height-18);
  color: var(--text-secondary);
}

/* ---------- Контентна частина ---------- */

.katalog-content {
  position: sticky;
  top: 98px;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  min-width: 0;
}

.katalog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}

.katalog-toolbar__found {
  font-size: var(--font-size-16);
  line-height: var(--line-height-28);
  color: var(--text-secondary);
}

.katalog-toolbar__found-value {
  color: var(--text-primary);
}

/* Сортування — власний dropdown (не <select>) заради стилізації панелі */
.katalog-sort {
  position: relative;
}

.katalog-sort__trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding-inline: var(--space-16);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-button);
  background-color: var(--background-primary);
  font-size: var(--font-size-14);
  line-height: var(--line-height-22);
  cursor: pointer;
}

.katalog-sort__prefix {
  color: var(--text-secondary);
}

.katalog-sort__value {
  color: var(--text-primary);
  white-space: nowrap;
}

.katalog-sort__panel {
  position: absolute;
  top: calc(100% + var(--space-8));
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 240px;
  margin: 0;
  padding: var(--space-8);
  list-style: none;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-button);
  background-color: var(--background-primary);
  box-shadow: 0 16px 32px -12px rgba(23, 32, 42, 0.16);
}

.katalog-sort__panel[hidden] {
  display: none;
}

.katalog-sort__option {
  width: 100%;
  padding: var(--space-8) var(--space-12);
  border: none;
  border-radius: 8px;
  background: none;
  text-align: left;
  font-size: var(--font-size-14);
  line-height: var(--line-height-22);
  color: var(--text-primary);
  cursor: pointer;
}

.katalog-sort__option:hover {
  background-color: var(--background-secondary);
}

/* Вибрані параметри — генерується скриптом */

.katalog-applied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.katalog-applied[hidden] {
  display: none;
}

.katalog-applied__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.katalog-applied__chip {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  height: 32px;
  padding: 0 12px 0 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background-color: var(--background-secondary);
  font-size: var(--font-size-12);
  line-height: var(--line-height-18);
  color: var(--text-secondary);
  cursor: pointer;
}

.katalog-applied__clear {
  padding: 0;
  border: none;
  background: none;
  font-size: var(--font-size-12);
  line-height: var(--line-height-18);
  color: var(--text-secondary);
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- Сітка товарів ---------- */

.katalog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
  margin: 0;
  padding: 0;
  list-style: none;
}

.katalog-grid__item {
  display: flex;
}

.katalog-grid__item[hidden] {
  display: none;
}

/* ---------- Картка товару каталогу — навмисно НЕ product-card.css:
   інший набір полів (категорія/параметри/модифікації/бейджі). ---------- */

.catalog-product-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card-large);
  background-color: var(--background-primary);
  transition:
    border-color var(--transition-base) var(--easing-out),
    box-shadow var(--transition-base) var(--easing-out);
}

.catalog-product-card:hover {
  border-color: var(--border-accent);
  box-shadow: 0 16px 32px -12px rgba(23, 32, 42, 0.16);
}

.catalog-product-card__media {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: 200px;
  background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 0%, #f7f9fc 100%);
  text-decoration: none;
}

.catalog-product-card__image {
  display: block;
  width: 240px;
  height: 168px;
  object-fit: contain;
}

.catalog-product-card__body {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: var(--space-20);
  padding: var(--space-24);
}

.catalog-product-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.catalog-product-card__category {
  font-size: var(--font-size-12);
  line-height: var(--line-height-18);
  font-weight: var(--font-weight-medium);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-accent);
}

.catalog-product-card__title {
  font-size: var(--font-size-20);
  line-height: var(--line-height-28);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  text-decoration: none;
}

.catalog-product-card__specs {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
}

.catalog-product-card__spec-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}

.catalog-product-card__spec-label {
  font-size: var(--font-size-12);
  line-height: var(--line-height-18);
  color: var(--text-secondary);
}

.catalog-product-card__spec-value {
  margin: 0;
  font-size: var(--font-size-14);
  line-height: var(--line-height-22);
  color: var(--text-primary);
  text-align: right;
}

.catalog-product-card__mods {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.catalog-product-card__mods-label {
  font-size: var(--font-size-12);
  line-height: var(--line-height-18);
  color: var(--text-secondary);
}

.catalog-product-card__mod-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.catalog-product-card__mod-chip {
  height: 30px;
  padding-inline: var(--space-12);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background-color: var(--background-primary);
  font-size: var(--font-size-12);
  line-height: var(--line-height-18);
  color: var(--text-secondary);
  cursor: pointer;
}

.catalog-product-card__mod-chip--active {
  border-color: transparent;
  background-color: var(--brand-primary);
  color: var(--text-inverse);
}

.catalog-product-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  min-height: 26px;
}

.catalog-product-card__badge {
  display: flex;
  align-items: center;
  height: 26px;
  padding-inline: 10px;
  border-radius: 6px;
  background-color: var(--background-secondary);
  font-size: var(--font-size-12);
  line-height: var(--line-height-18);
  color: var(--text-secondary);
}

.catalog-product-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  margin-top: auto;
  padding-inline: var(--space-16);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-button);
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
  font-weight: var(--font-weight-medium);
  color: var(--text-accent);
  text-decoration: none;
  text-align: center;
}

.catalog-product-card:hover .catalog-product-card__cta {
  background-color: var(--background-accent-soft);
}

/* ---------- Пагінація ---------- */

.katalog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
}

.katalog-pagination[hidden] {
  display: none;
}

.katalog-pagination__item,
.katalog-pagination__next {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-width: 44px;
  padding-inline: var(--space-16);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-button);
  background-color: var(--background-primary);
  font-size: var(--font-size-14);
  line-height: var(--line-height-22);
  color: var(--text-primary);
  cursor: pointer;
}

.katalog-pagination__item {
  padding-inline: 0;
}

.katalog-pagination__item--active {
  border-color: transparent;
  background-color: var(--brand-primary);
  color: var(--text-inverse);
}

.katalog-pagination__next--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Двоколонковий layout тримається до 768px (планшет лишається двоколонковим);
   картки товарів — 2 в ряд на планшеті/мобайлі */
@media (max-width: 1199px) {
  .katalog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 1 картка в ряд лише нижче 599px — навмисно вужче за мобільний ≤767px, тому власний медіа-запит */
@media (max-width: 598px) {
  .katalog-grid {
    grid-template-columns: 1fr;
  }
}

/* Мобільний попап сайдбару: fixed-оверлей під шапкою, clip-path-анімація,
   is-scroll-locked на <body>. Елементи, що існують ЛИШЕ для попапу, приховані
   тут у базовому шарі й вмикаються в медіа-запиті ≤767px нижче. */
.katalog-mobile-filters-trigger {
  display: none;
}

.katalog-sidebar__mobile-head,
.katalog-sidebar__mobile-actions {
  display: none;
}

@media (max-width: 767px) {
  .katalog-catalog {
    padding-block: var(--space-32) var(--space-64);
  }

  .katalog-catalog__layout {
    grid-template-columns: 1fr;
  }

  /* На мобайлі сайдбар — завжди fixed-попап (нижче); тут лише прибираємо
     колонку сітки й вимикаємо sticky */
  .katalog-sidebar,
  .katalog-content {
    position: static;
  }

  .katalog-mobile-filters-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding-inline: var(--space-20);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-button);
    background-color: var(--background-primary);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    cursor: pointer;
  }

  /* Закрито за замовчуванням: невидимий і поза взаємодією, доки немає
     .katalog-sidebar--open; clip-path-анімація по горизонтальній осі */
  .katalog-sidebar {
    position: fixed;
    inset: 78px 0 0 0;
    z-index: var(--z-modal);
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--space-24);
    width: auto;
    padding: var(--space-24) var(--container-gutter) 0;
    overflow-y: auto;
    background-color: var(--background-primary);
    visibility: hidden;
    clip-path: inset(0 100% 0 0);
    transition:
      clip-path 380ms var(--easing-out),
      visibility 0s linear 380ms;
    pointer-events: none;
  }

  .katalog-sidebar--open {
    visibility: visible;
    clip-path: inset(0 0% 0 0);
    transition:
      clip-path 380ms var(--easing-out),
      visibility 0s linear 0s;
    pointer-events: auto;
  }

  .katalog-sidebar__mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .katalog-sidebar__mobile-title {
    font-size: var(--font-size-20);
    line-height: var(--line-height-28);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
  }

  .katalog-sidebar__mobile-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: var(--radius-full);
    background-color: var(--background-secondary);
    color: var(--text-primary);
    cursor: pointer;
  }

  .katalog-categories,
  .katalog-filters {
    flex-shrink: 0;
  }

  .katalog-sidebar__mobile-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-shrink: 0;
    gap: var(--space-12);
    margin-top: auto;
    padding-block: var(--space-16);
    background-color: var(--background-primary);
    border-top: 1px solid var(--border-subtle);
  }

  .katalog-sidebar__mobile-clear,
  .katalog-sidebar__mobile-apply {
    flex: 1 0 0;
    height: 48px;
    border-radius: var(--radius-button);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-15);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
  }

  .katalog-sidebar__mobile-clear {
    border: 1px solid var(--border-default);
    background-color: var(--background-primary);
    color: var(--text-primary);
  }

  .katalog-sidebar__mobile-apply {
    border: none;
    background-color: var(--brand-primary);
    color: var(--text-inverse);
  }

  .katalog-toolbar {
    flex-wrap: wrap;
    align-items: center;
  }

  .katalog-toolbar__found {
    flex: 1 0 100%;
  }

  .katalog-mobile-filters-trigger {
    flex-shrink: 0;
  }

  .katalog-sort {
    flex: 0 1 auto;
    max-width: 160px;
    min-width: 0;
  }

  .katalog-sort__trigger {
    width: 100%;
  }

  /* Префікс «Сортування:» не влазить у вузький мобільний тригер */
  .katalog-sort__prefix {
    display: none;
  }

  .katalog-sort__value {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .katalog-sort__panel {
    left: 0;
    right: auto;
    min-width: 0;
    width: 100%;
  }
}