/* ============================================================================
   GOSOFT — КАТАЛОГ И СЕТКА ТОВАРОВ (css/catalog.css)

   Правки по дизайн-аудиту от 26.08.2026 (пункты 2, 4, 5).
   Подключается на архивах товаров, в поиске и на страницах категорий.

   Скоуп: .page__catalog / .page__search — не влияет на главную,
   у которой свой изолированный home.css.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. КНОПКА «В КОРЗИНУ» — ВСЕГДА ВИДНА
   В style.css:3617 стоит opacity:0 + pointer-events:none на min-width:1023px,
   кнопка появлялась только при наведении. На тач-устройствах с мышью и при
   навигации с клавиатуры она недостижима, а это единственное действие покупки
   в сетке. Раскрываем её, как уже сделано на главной.
   ------------------------------------------------------------------------ */
/* .products-catalog__wrap в style.css:3571 — горизонтальный ряд
   (статусы слева, круглая кнопка справа). Для полноширинной кнопки
   переводим его в колонку, иначе кнопка вылезает за карточку. */
.page__catalog .products-catalog__wrap,
.page__search .products-catalog__wrap {
  flex-direction: column;
  align-items: stretch;
  gap: var(--gs-space-3);
}

.page__catalog .products-catalog__add,
.page__search .products-catalog__add {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  width: 100%;
  height: 42px;
  gap: var(--gs-space-2);
  border-radius: var(--gs-radius-pill);
  background: var(--gs-blue-50);
  color: var(--gs-action-hover);
  font-family: var(--gs-font-sans);
  font-size: 14.5px;
  font-weight: var(--gs-weight-semibold);
  transition: background-color var(--gs-duration-base) var(--gs-ease),
              color var(--gs-duration-base) var(--gs-ease),
              box-shadow var(--gs-duration-base) var(--gs-ease);
}
.page__catalog .products-catalog__add:hover,
.page__search .products-catalog__add:hover {
  background: var(--gs-action);
  color: var(--gs-text-inverse);
  box-shadow: var(--gs-shadow-action);
}
.page__catalog .products-catalog__add:active,
.page__search .products-catalog__add:active {
  transform: scale(0.985);
}
.page__catalog .products-catalog__add-icon,
.page__search .products-catalog__add-icon {
  width: 17px;
  height: 17px;
  scale: 1;
}
/* Подпись кнопки скрыта в components.css как visually-hidden — раскрываем */
.page__catalog .products-catalog__add-label,
.page__search .products-catalog__add-label {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   2. НАЗВАНИЕ ТОВАРА — ФИКСИРОВАННАЯ ВЫСОТА
   line-clamp:2 уже был, но без min-height: короткие названия занимали одну
   строку, длинные две — из-за этого цена и статусы в соседних карточках
   стояли на разной высоте, ряд выглядел рваным (пункт 2 аудита).
   ------------------------------------------------------------------------ */
.page__catalog .products-catalog__name,
.page__search .products-catalog__name {
  min-height: 2.6em;
}
.page__catalog .products-catalog__name a,
.page__search .products-catalog__name a {
  font-size: 16px;
  line-height: 1.3;
}

/* ---------------------------------------------------------------------------
   3. ЦЕНА
   Копейки убраны в PHP (content-product.php). Здесь — вес и ритм.
   ------------------------------------------------------------------------ */
.page__catalog .products-catalog__price-current,
.page__search .products-catalog__price-current {
  /* Шрифт НЕ меняем: SF Pro в теме без кириллических цифр даёт разъезд
     межбуквенного интервала. Достаточно табличных цифр родного Involve. */
  font-variant-numeric: tabular-nums;
  color: var(--gs-text-price);
}
.page__catalog .products-catalog__price-old,
.page__search .products-catalog__price-old {
  font-variant-numeric: tabular-nums;
  color: var(--gs-text-subtle);
}

/* ---------------------------------------------------------------------------
   4. СТАТУСЫ: «В наличии» + «Мгновенная доставка»
   Аудит: два одинаковых серых текста читаются как шум, а не как позитивный
   сигнал. Делаем «В наличии» зелёным сигналом с точкой-индикатором,
   а доставку — вторичной строкой.
   Зелёный берём затемнённый (--gs-success-700): #0baf03 на белом даёт
   контраст 2.9:1, для 13px этого мало.
   ------------------------------------------------------------------------ */
.page__catalog .products-catalog__info,
.page__search .products-catalog__info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.page__catalog .products-catalog__availability,
.page__search .products-catalog__availability {
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: var(--gs-weight-medium);
  color: var(--gs-success-700);
}
/* Точка-индикатор перед статусом */
.page__catalog .products-catalog__availability::before,
.page__search .products-catalog__availability::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: var(--gs-radius-circle);
  background: currentColor;
}
.page__catalog .products-catalog__availability-icon,
.page__search .products-catalog__availability-icon {
  display: none; /* точка заменяет иконку — строка становится чище */
}
.page__catalog .products-catalog__delivery,
.page__search .products-catalog__delivery {
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gs-text-subtle);
}
.page__catalog .products-catalog__delivery-icon,
.page__search .products-catalog__delivery-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
   5. КАРТОЧКА: аккуратный отклик
   ------------------------------------------------------------------------ */
.page__catalog .products-catalog__card,
.page__search .products-catalog__card {
  transition: transform var(--gs-duration-base) var(--gs-ease),
              box-shadow var(--gs-duration-base) var(--gs-ease),
              border-color var(--gs-duration-base) var(--gs-ease);
}
.page__catalog .products-catalog__card:hover,
.page__search .products-catalog__card:hover {
  transform: translateY(-3px);
  border-color: var(--gs-border-strong);
  box-shadow: var(--gs-shadow-md);
}
.page__catalog .products-catalog__img,
.page__search .products-catalog__img {
  object-fit: contain;
  transition: transform var(--gs-duration-slow) var(--gs-ease);
}
.page__catalog .products-catalog__card:hover .products-catalog__img,
.page__search .products-catalog__card:hover .products-catalog__img {
  transform: scale(1.04);
}

/* Бейдж скидки — внутрь карточки, чтобы не наезжать на край */
.page__catalog .products-catalog__badge-sale,
.page__search .products-catalog__badge-sale {
  box-shadow: var(--gs-shadow-xs);
}

/* ---------------------------------------------------------------------------
   6. ФИЛЬТРЫ — STICKY НА ДЕСКТОПЕ (пункт 4 аудита)
   У категории Windows минимум две страницы товаров; панель сортировки
   уезжала вместе с контентом и была недоступна без обратного скролла.
   ------------------------------------------------------------------------ */
@media (min-width: 1025px) {
  .page__catalog .products-catalog__topbar {
    position: sticky;
    top: 0;
    z-index: var(--gs-z-sticky);
    background: var(--gs-surface);
    padding-block: var(--gs-space-3);
    box-shadow: 0 1px 0 var(--gs-border);
  }
}

/* ---------------------------------------------------------------------------
   7. МОБИЛЬНАЯ СЕТКА (пункт 5 аудита)

   ПРОВЕРЕНО: в style.css:4021 уже стоит 2 колонки на <=768px
   (.products-catalog__body), то есть требование аудита выполнено темой.
   Здесь только подгоняем внутренности карточки под узкую колонку —
   саму сетку не трогаем, чтобы не плодить конфликтующие правила.
   ------------------------------------------------------------------------ */
@media (max-width: 640px) {
  .page__catalog .products-catalog__card,
  .page__search .products-catalog__card {
    padding: var(--gs-space-3);
  }
  .page__catalog .products-catalog__name a,
  .page__search .products-catalog__name a {
    font-size: 14px;
  }
  .page__catalog .products-catalog__price-current,
  .page__search .products-catalog__price-current {
    font-size: 17px;
  }
  .page__catalog .products-catalog__add,
  .page__search .products-catalog__add {
    height: 38px;
    font-size: 13.5px;
  }
  .page__catalog .products-catalog__delivery,
  .page__search .products-catalog__delivery {
    font-size: 12px;
  }
  /* Рейтинг рядом с ценой на узкой колонке не помещается — переносим */
  .page__catalog .products-catalog__desc,
  .page__search .products-catalog__desc {
    flex-wrap: wrap;
    gap: 4px;
  }
}

/* На очень узких экранах тема сама даёт 2 колонки; ужимаем подписи, чтобы
   цена оставалась главным элементом и ничего не переносилось. */
@media (max-width: 380px) {
  .page__catalog .products-catalog__availability,
  .page__search .products-catalog__availability {
    font-size: 12.5px;
  }
  .page__catalog .products-catalog__delivery,
  .page__search .products-catalog__delivery {
    font-size: 11.5px;
  }
}

/* ---------------------------------------------------------------------------
   8. ЗАГОЛОВОК КАТЕГОРИИ (пункт 4 аудита)

   Название категории повторяется трижды: в баннере (крупно), в хлебных
   крошках и в H1 сразу под ними. H1 нужен для SEO, поэтому НЕ убираем его
   из разметки — понижаем визуально до подписи над сеткой, чтобы не было
   третьего повтора одного и того же слова подряд.
   ------------------------------------------------------------------------ */
.page__catalog .main-catalog-title {
  margin-bottom: var(--gs-space-4);
  font-family: var(--gs-font-sans);
  font-size: var(--gs-text-md);
  font-weight: var(--gs-weight-semibold);
  line-height: 1.3;
  letter-spacing: var(--gs-tracking-caps);
  text-transform: uppercase;
  color: var(--gs-text-subtle);
}
/* Синий акцент здесь избыточен — он уже есть в баннере */
.page__catalog .main-catalog-title ._blue__title {
  color: inherit;
}

/* ---------------------------------------------------------------------------
   8. ДОСТУПНОСТЬ И МОУШЕН
   ------------------------------------------------------------------------ */
.page__catalog a:focus-visible,
.page__catalog button:focus-visible,
.page__search a:focus-visible,
.page__search button:focus-visible {
  outline: 2px solid var(--gs-focus-color);
  outline-offset: 2px;
  border-radius: var(--gs-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  .page__catalog .products-catalog__card,
  .page__catalog .products-catalog__card:hover,
  .page__search .products-catalog__card,
  .page__search .products-catalog__card:hover {
    transition: none;
    transform: none;
  }
  .page__catalog .products-catalog__card:hover .products-catalog__img,
  .page__search .products-catalog__card:hover .products-catalog__img {
    transform: none;
  }
}

@media (hover: none) {
  .page__catalog .products-catalog__card:hover,
  .page__search .products-catalog__card:hover {
    transform: none;
    box-shadow: none;
  }
  .page__catalog .products-catalog__card:hover .products-catalog__img,
  .page__search .products-catalog__card:hover .products-catalog__img {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   САЙДБАР КАТАЛОГА (.main__catalog-aside)

   Список категорий строится из базы (page-parts/sidebar-shop.php), поэтому
   его длина заранее неизвестна. Правки здесь, а не в style.css: этот файл
   подключается позже и относится к каталогу по смыслу.
   --------------------------------------------------------------------------- */

/* Базовое правило style.css:3323 задаёт max-height:500px. При 15+ категориях
   в ветке список обрезался без всякого признака, что часть скрыта. */
.page .filters-catalog__inner.is-open > .catalog__accordion-list {
  max-height: 1500px;
}

/* Счётчик товаров: сразу видно, где пусто, а где выбор. */
.page .catalog__accordion-count {
  margin-left: auto;
  padding-left: 8px;
  color: var(--gs-text-subtle);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.page .catalog__accordion-link,
.page .catalog__accordion--link {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Текущая категория — заметный акцент, а не только цвет текста:
   в длинном списке одного цвета мало, чтобы найти себя взглядом. */
.page .catalog__accordion-link--active {
  color: var(--primary-blue);
  font-weight: 600;
}

/* «Все Windows» — вход в родительскую категорию целиком. Отделяем
   от подкатегорий, иначе читается как ещё один их пункт. */
.page .catalog__accordion-link--all {
  font-weight: 500;
  border-bottom: 1px solid var(--stroke-light);
  padding-bottom: 6px;
  margin-bottom: 4px;
}

/* Третий уровень вложенности. */
.page .catalog__accordion-sublist {
  list-style: none;
  margin: 2px 0 4px;
  padding-left: 12px;
  border-left: 1px solid var(--stroke-light);
}

.page .catalog__accordion-link--sub {
  font-size: 13px;
  color: var(--gs-text-muted);
}

.page .filters-catalog__empty {
  padding: 12px 0;
  color: var(--gs-text-muted);
  font-size: 14px;
}

/* ---------------------------------------------------------------------------
   ШИРИНА САЙДБАРА И СЛОЙ СПИСКА ТОВАРОВ

   Базовые 275px (style.css:3218) оказались тесными: названия категорий
   вроде «Microsoft Office 2021 Professional Plus» переносились в три
   строки и колонка выглядела нитью вдоль списка товаров.

   Правим здесь, а не в style.css: catalog.css подключается позже и
   относится к каталогу по смыслу — так же, как соседние правила выше.
   --------------------------------------------------------------------------- */

.page .main__catalog-aside {
  width: 320px;
  /* Не даём флексу сжать колонку, когда названия длинные:
     без этого flex-basis отступал бы обратно к содержимому. */
  flex: 0 0 320px;
}

/*
 * Свой контекст наложения для списка товаров.
 *
 * Карточки содержат выпадающие элементы и всплывающие подсказки;
 * без явного z-index они рисуются в общем потоке и могут уходить
 * под соседние блоки каталога.
 */
.page .products-catalog {
  position: relative;
  z-index: 1;
}

/* На узких экранах сайдбар во всю ширину — блоки идут друг под другом.
   Граница ровно 1023px: именно там style.css:3802 переключает раскладку
   на column-reverse и задаёт width:100%. При другом значении в зазоре
   между брейкпоинтами flex:0 0 320px конфликтовал бы с width:100%. */
@media (max-width: 1023px) {
  .page .main__catalog-aside {
    width: 100%;
    flex: 1 1 auto;
  }
}