/* =================== hc-cat-filter-aside.css =================== */
/* hc-cat-filter-aside — обёртка вокруг формы фильтров (.hc-cat-filters)
 * на странице каталога /shop.
 *
 * Desktop (>1024px): sticky-aside в левой колонке .hc-cat-page.
 * Mobile/tablet (<=1024px): fixed slide-in drawer слева, открывается
 * по клику на кнопку "ОТКРЫТЬ ФИЛЬТР" (Alpine `filtersOpen` → `.is-open`).
 *
 * Strict isolation: .hc-cat-filter-aside / .hc-cat-filter-aside__*.
 * Содержимое (.hc-cat-filters) живёт отдельным block-файлом. */

.hc-cat-filter-aside {
  position: sticky;
  top: calc(var(--hc-hdr-h, 68px) + 12px);
  align-self: start;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  max-height: calc(100vh - var(--hc-hdr-h, 68px) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
}

/* Все дочерние элементы внутри aside никогда не превышают его ширину. */
.hc-cat-filter-aside > *,
.hc-cat-filter-aside *:not(svg):not(path):not(g):not(rect):not(circle):not(line) {
  max-width: 100%;
  box-sizing: border-box;
}

/* Длинные слова/SKU/категории переносятся, не вылезают за edge. */
.hc-cat-filter-aside a,
.hc-cat-filter-aside span,
.hc-cat-filter-aside label,
.hc-cat-filter-aside button,
.hc-cat-filter-aside h4,
.hc-cat-filter-aside p {
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

@media (max-width: 1024px) {
  .hc-cat-filter-aside {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(360px, 92vw);
    max-width: 92vw;
    max-height: 100vh;
    padding: 0;
    background: var(--hc-paper, #ffffff);
    box-shadow: 0 30px 80px -30px rgba(27, 20, 13, 0.5);
    z-index: var(--hc-z-drawer, 80);
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .hc-cat-filter-aside.is-open {
    transform: translateX(0);
  }
  /* Inner .hc-cat-filters в drawer-mode уже имеет padding 16px — этого достаточно */
}