/* AUTOSTYLE SHOP — страница каталога (категория).
   Канон: без hex (только var из tokens.css), отступы только --shop-s-*,
   свои классы с префиксом catalog-. Подключать после storefront.css. */

/* ---------- шапка страницы: крошки + H1 ---------- */
.catalog-page { padding-block: var(--shop-s-6) var(--shop-s-16); }
@media (min-width: 1024px) { .catalog-page { padding-block: var(--shop-s-8) var(--shop-s-20); } }

.catalog-breadcrumbs {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--shop-s-2);
  font-size: 13px;
  color: var(--shop-text-muted);
}
.catalog-breadcrumbs a { padding-block: var(--shop-s-2); }
.catalog-breadcrumbs a:hover { color: var(--shop-link); }
.catalog-breadcrumbs [aria-current="page"] { color: var(--shop-text); font-weight: 500; }
.catalog-breadcrumbs__sep { color: var(--shop-border-strong); }

.catalog-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--shop-s-3);
  margin-top: var(--shop-s-4);
}
.catalog-head__title {
  margin: 0;
  font-family: var(--shop-font-display); font-weight: 700;
  font-size: clamp(1.45rem, 3.4vw, 2.2rem);
  text-transform: uppercase; letter-spacing: var(--shop-tracking-brand);
}
.catalog-head__count { color: var(--shop-text-muted); font-size: 14px; }

/* ---------- субкатегории (плитки перед товарами) ---------- */
.catalog-subcats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--shop-s-3);
  margin-top: var(--shop-s-6);
  scroll-margin-top: calc(var(--shop-header-h-md) + var(--shop-s-4));
}
@media (min-width: 768px) { .catalog-subcats { grid-template-columns: repeat(4, 1fr); gap: var(--shop-s-4); } }
/* плитка компактнее карточек главной: фото-область фиксированной пропорции,
   картинка вписывается, название всегда прижато к низу — все плитки одной высоты */
.catalog-subcats .shop-cat-card__img { aspect-ratio: 4 / 3; flex: 0 0 auto; background: var(--shop-bg); }
.catalog-subcats .shop-cat-card__img img { object-fit: contain; padding: var(--shop-s-3); }
.catalog-subcats .shop-cat-card__name { margin-top: auto; }

/* ---------- лейаут: сайдбар фильтров + результаты ---------- */
.catalog-layout { margin-top: var(--shop-s-8); }
@media (min-width: 1024px) {
  .catalog-layout {
    display: grid; grid-template-columns: 320px 1fr;
    gap: var(--shop-s-8);
    align-items: start;
  }
  /* канон shop-front.css: липкая колонка целиком (грид-ячейка), без внутреннего
     скролла и max-height — при панели выше вьюпорта страничный JS двигает `top`
     («smart sticky»: вниз пинит нижний край, вверх — верхний, как shop-filter.js) */
  .catalog-sidebar {
    position: sticky;
    top: calc(var(--shop-header-h-md) + var(--shop-s-4));
    align-self: start;
  }
}

/* кнопка «Фільтри» — только мобайл/планшет */
.catalog-filters-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--shop-s-2);
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--shop-border-strong);
  border-radius: var(--shop-radius-sm);
  font-weight: 600; font-size: 14px;
  text-transform: uppercase; letter-spacing: var(--shop-tracking-brand);
  transition: border-color var(--shop-duration-base);
}
.catalog-filters-toggle:hover { border-color: var(--shop-accent); }
.catalog-filters-toggle[aria-expanded="true"] { background: var(--shop-accent); color: var(--shop-accent-on); border-color: var(--shop-accent); }
@media (min-width: 1024px) { .catalog-filters-toggle { display: none; } }

.catalog-filters {
  display: none;
  margin-top: var(--shop-s-4);
  border: 1px solid var(--shop-border);
  border-radius: var(--shop-radius-md);
  background: var(--shop-bg-elevated);
  padding: var(--shop-s-5);
}
.catalog-filters.is-open { display: block; }
@media (min-width: 1024px) {
  .catalog-filters {
    display: block;
    margin-top: 0;
  }
}

.catalog-filters__group { border: 0; margin: 0; padding: var(--shop-s-2) 0; border-top: 1px solid var(--shop-border); }
.catalog-filters__group:first-child { border-top: 0; padding-top: 0; }
.catalog-filters__legend {
  /* legend разрывает border-top группы — правый паддинг даёт воздух между
     словом и началом декоративной линии */
  padding: 0 var(--shop-s-3) 0 0;
  margin-bottom: var(--shop-s-1);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--shop-tracking-brand);
}

/* цена: від/до + кнопка */
.catalog-filters__price { display: flex; gap: var(--shop-s-2); align-items: center; }
.catalog-filters__price input {
  flex: 1; width: 0;
  min-height: 44px;
  border: 1px solid var(--shop-border-strong);
  border-radius: var(--shop-radius-sm);
  background: var(--shop-bg);
  color: var(--shop-text);
  font: inherit; font-size: 14px;
  padding-inline: var(--shop-s-3);
}
.catalog-filters__price input::placeholder { color: var(--shop-text-muted); }
.catalog-filters__price input:focus { outline: none; border-color: var(--shop-focus-ring); }
.catalog-filters__price-ok {
  min-height: 44px; min-width: 44px;
  padding-inline: var(--shop-s-3);
  background: var(--shop-accent); color: var(--shop-accent-on);
  border-radius: var(--shop-radius-sm);
  font-size: 13px; font-weight: 600;
  transition: background var(--shop-duration-base);
}
.catalog-filters__price-ok:hover { background: var(--shop-accent-hover); }

/* кастомный чекбокс в бренде */
/* компактные строки: лейбл на всю ширину сайдбара, тап-зона строки ≥40px */
.catalog-check {
  display: flex; align-items: center;
  gap: var(--shop-s-2);
  min-height: 40px;
  font-size: 14px;
  cursor: pointer;
}
.catalog-check:hover { color: var(--shop-link); }
.catalog-check input {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 auto;
  width: var(--shop-s-5); height: var(--shop-s-5);
  margin: 0;
  border: 1px solid var(--shop-border-strong);
  border-radius: var(--shop-radius-sm);
  background: var(--shop-bg);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background var(--shop-duration-base), border-color var(--shop-duration-base);
}
.catalog-check input:hover { border-color: var(--shop-accent); }
.catalog-check input::after {
  content: '';
  /* галочка пропорциональна боксу 20px (была 8×12 при 24px) */
  width: calc(var(--shop-s-3) / 2); height: calc(var(--shop-s-5) / 2);
  border: solid var(--shop-accent-on);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0;
}
.catalog-check input:checked { background: var(--shop-accent); border-color: var(--shop-accent); }
.catalog-check input:checked::after { opacity: 1; }
.catalog-check small { color: var(--shop-text-muted); font-size: 12px; margin-left: auto; }

/* фильтры применяются сразу при отметке — кнопки «Застосувати» нет,
   остаётся только текстовый «Скинути» на всю ширину (канон: shop-filter__footer-reset) */
.catalog-filters__actions {
  padding-top: var(--shop-s-3);
  border-top: 1px solid var(--shop-border);
}
.catalog-filters__reset {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  min-height: 44px;
  background: none; border: 0;
  font: inherit; font-size: 14px;
  color: var(--shop-text-muted);
  text-decoration: underline; text-underline-offset: var(--shop-s-1);
  cursor: pointer;
  transition: color var(--shop-duration-base);
}
.catalog-filters__reset:hover { color: var(--shop-link); }

/* ---------- тулбар над товарами ---------- */
.catalog-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--shop-s-3);
  margin-top: var(--shop-s-6);
}
@media (min-width: 1024px) { .catalog-toolbar { margin-top: 0; } }
.catalog-toolbar__found { margin: 0; font-size: 14px; color: var(--shop-text-muted); }
.catalog-toolbar__found b { color: var(--shop-text); }
.catalog-toolbar__sort {
  display: inline-flex; align-items: center;
  gap: var(--shop-s-2);
  font-size: 13px; color: var(--shop-text-muted);
}

/* кастомный дропдаун сортировки */
.catalog-sort { position: relative; }
.catalog-sort__btn {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: var(--shop-s-2);
  min-height: 44px; min-width: 200px;
  border: 1px solid var(--shop-border-strong);
  border-radius: var(--shop-radius-sm);
  background: var(--shop-bg);
  color: var(--shop-text);
  font: inherit; font-size: 14px;
  padding-inline: var(--shop-s-3);
  cursor: pointer;
  transition: border-color var(--shop-duration-base);
}
.catalog-sort__btn:hover { border-color: var(--shop-accent); }
.catalog-sort__btn:focus-visible { outline: none; border-color: var(--shop-focus-ring); }
.catalog-sort__btn svg { flex: 0 0 auto; color: var(--shop-text-muted); transition: transform var(--shop-duration-base); }
.catalog-sort.is-open .catalog-sort__btn svg { transform: rotate(180deg); }
.catalog-sort__list {
  position: absolute; right: 0; top: calc(100% + var(--shop-s-1)); z-index: var(--shop-z-header);
  min-width: 100%;
  display: none;
  margin: 0; padding: var(--shop-s-1) 0;
  list-style: none;
  background: var(--shop-bg-elevated);
  border: 1px solid var(--shop-border);
  border-radius: var(--shop-radius-sm);
  box-shadow: var(--shop-shadow-md);
}
.catalog-sort.is-open .catalog-sort__list { display: block; }
.catalog-sort__option {
  display: flex; align-items: center;
  width: 100%;
  min-height: 44px;
  padding-inline: var(--shop-s-3);
  border: 0; background: none;
  color: var(--shop-text);
  font: inherit; font-size: 14px;
  text-align: left; white-space: nowrap;
  cursor: pointer;
  transition: background var(--shop-duration-base), color var(--shop-duration-base);
}
.catalog-sort__option:hover { background: var(--shop-bg-alt); color: var(--shop-link); }
.catalog-sort__option[aria-selected="true"] { font-weight: 700; color: var(--shop-link); }

/* ---------- сетка товаров ---------- */
.catalog-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--shop-s-4);
  margin-top: var(--shop-s-5);
}
/* максимум 3 колонки товаров: вместе с сайдбаром фильтров лейаут даёт 4 колонки */
@media (min-width: 768px) { .catalog-grid { grid-template-columns: repeat(3, 1fr); } }

/* оплата частинами под ценой (для товаров от 2000 грн) */
.catalog-installment {
  display: flex; align-items: center;
  gap: var(--shop-s-2);
  margin-top: var(--shop-s-1);
  font-size: 12px; color: var(--shop-text-muted);
}
.catalog-installment img { width: 14px; height: 14px; border-radius: var(--shop-radius-sm); }

/* нет в наличии: светлый оверлей, текст по центру (кнопки корзины в разметке нет) */
.shop-card__soldout {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--c-paper) 72%, transparent);
}
.shop-card__soldout span {
  padding: var(--shop-s-2) var(--shop-s-3);
  background: var(--shop-bg);
  border: 1px solid var(--shop-border-strong);
  border-radius: var(--shop-radius-sm);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--shop-tracking-brand);
  color: var(--shop-text-muted);
}
.catalog-card--soldout .shop-card__img-link img { filter: grayscale(0.6); }
.catalog-card--soldout .shop-card__price { color: var(--shop-text-muted); }

/* ---------- пагинация ---------- */
.catalog-pagination {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--shop-s-2);
  margin-top: var(--shop-s-10);
}
.catalog-pagination__item {
  min-width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding-inline: var(--shop-s-2);
  border: 1px solid var(--shop-border);
  border-radius: var(--shop-radius-sm);
  font-size: 14px; font-weight: 600;
  transition: border-color var(--shop-duration-base), color var(--shop-duration-base);
}
.catalog-pagination__item:hover { border-color: var(--shop-accent); color: var(--shop-link); }
.catalog-pagination__item.is-active {
  background: var(--shop-accent); color: var(--shop-accent-on);
  border-color: var(--shop-accent);
}
.catalog-pagination__gap {
  min-width: var(--shop-s-6);
  text-align: center;
  color: var(--shop-text-muted);
}