/* =====================================================
   ВЕКТОР ИТ — Каталог WooCommerce (Ф4, пилот: карточка товара)
   Namespace: .vkt-cat — правила ТОЛЬКО под этим классом.
   Использует существующие примитивы кита (.vkt-card/.vkt-grid/.vkt-btn/
   .vkt-form — front-page.css, site-wide) — тут только layout карточки.
   ===================================================== */

/* ── Карточка товара: галерея + сводка ───────────────────────────── */
.vkt-cat__product {
  display: grid;
  grid-template-columns: minmax(0, 380px) 1fr;
  gap: var(--space-8);
  align-items: start;
  margin-bottom: var(--space-8);
}
@media (max-width: 767px) {
  .vkt-cat__product {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-7);
  }
}

.vkt-cat__gallery-main {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-white);
  padding: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vkt-cat__gallery-main img {
  width: 100%;
  max-width: 320px;
  height: 320px;
  object-fit: contain;
  display: block;
  cursor: zoom-in;
}
@media (max-width: 480px) {
  .vkt-cat__gallery-main img { height: 240px; }
}

.vkt-cat__gallery-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.vkt-cat__gallery-thumbs img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-white);
  cursor: zoom-in;
}

.vkt-cat__gallery-empty {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-card);
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--color-ink-muted);
}
.vkt-cat__gallery-empty svg { color: var(--color-border); }

/* ── Хлебные крошки ───────────────────────────────────────────────── */
.vkt-cat__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-6);
}
.vkt-cat__crumbs a { color: var(--color-ink-muted); }
.vkt-cat__crumbs [aria-current] { color: var(--color-ink); }

.vkt-cat__summary h1 {
  margin-top: 0;
  margin-bottom: var(--space-4);
}

/* ── Бейджи (регион / наличие / гарантия — тексты 1:1 с прода) ───── */
.vkt-cat__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
}
.vkt-cat__badge {
  font-size: var(--text-2xs);
  color: var(--color-ink-muted);
  background: var(--color-bg-light);
  border-radius: var(--radius-control);
  padding: var(--space-1) var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.vkt-cat__badge--info { position: relative; }
.vkt-cat__badge-icon { cursor: help; }
.vkt-cat__tooltip {
  position: absolute;
  left: 0;
  bottom: calc(100% + var(--space-2));
  width: 260px;
  background: var(--color-navy);
  color: var(--color-accent-tint);
  padding: var(--space-3);
  border-radius: var(--radius-control);
  font-size: var(--text-2xs);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease;
  z-index: 10;
}
.vkt-cat__badge-icon:hover + .vkt-cat__tooltip,
.vkt-cat__badge-icon:focus + .vkt-cat__tooltip {
  opacity: 1;
  visibility: visible;
}

.vkt-cat__price {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}
.vkt-cat__price del { color: var(--color-ink-muted); font-weight: 400; margin-right: var(--space-2); }
.vkt-cat__price ins { text-decoration: none; color: var(--color-accent); }
/* Было --text-2xs (14px, «подписи/юр.текст» по шкале) — владелец 2026-07-13:
   мелковато для реальной цифры стоимости установки, читаемой рядом с ценой. */
.vkt-cat__install-note { color: var(--color-ink-muted); font-size: var(--text-base); margin-bottom: var(--space-6); }

/* Мобайл: цена крупнее (читаемость «с вытянутой руки»), CTA-кнопка
   full-width (design.md — единственный легитимный случай full-width
   кнопки) с явным отступом от вкладок ниже, чтобы не сливалась
   (владелец 2026-07-13: «кнопка заказать маленькая и сливается с табами»). */
@media (max-width: 767px) {
  .vkt-cat__price { font-size: var(--text-xl); }
  .vkt-cat__summary .vkt-btn {
    width: 100%;
    text-align: center;
    margin-bottom: var(--space-7);
  }
}

/* ── Вкладки товара (Описание/Характеристики/Файлы/Поставка) ─────── */
.vkt-cat__tabs { margin-bottom: var(--space-8); }

/* Под-переключатель разделов характеристик — свой namespace, НЕ .vkt-tabs
   (см. комментарий в single-product.php: main.js слушает .vkt-tabs__tab/
   .vkt-tabs__panel без :scope-ограничения, вложенный второй набор с теми
   же классами ловится внешним обработчиком и гасит активную внешнюю
   вкладку). Визуально повторяет .vkt-tabs__tab (пилюли), только мельче. */
.vkt-cat__spec-nav { margin-top: var(--space-2); }
.vkt-cat__spec-nav-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.vkt-cat__spec-tab {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 700;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-control);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-ink-muted);
  cursor: pointer;
}
.vkt-cat__spec-tab:hover:not([aria-selected="true"]) { background: var(--color-white); border-color: var(--color-accent); color: var(--color-accent); }
.vkt-cat__spec-tab[aria-selected="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-white); }
.vkt-cat__spec-panel { display: none; }
.vkt-cat__spec-panel.is-active { display: block; }

.vkt-cat__spec-table {
  width: 100%;
  border: none;
  border-collapse: collapse;
}
.vkt-cat__spec-table td {
  border: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  color: var(--color-ink-muted);
}
.vkt-cat__spec-table td:first-child { color: var(--color-ink); width: 45%; }

/* Единая ширина контента во всех вкладках (Описание/Характеристики/Файлы/
   Поставка) — раньше «Поставка и гарантии» и «Файлы» были уже Описания
   (свои max-width), владелец заметил «разные контейнеры» 2026-07-13. */
.vkt-cat__yikes-tab :where(p, ol, ul) { color: var(--color-ink-muted); }

/* Список файлов — свой парсинг ссылок в PHP (не wpautop), единообразный
   паддинг гарантирован разметкой <ul><li>, а не «угадыванием» по <p> */
.vkt-cat__doclist { list-style: none; margin: 0; padding: 0; }
.vkt-cat__doclist li + li { border-top: 1px solid var(--color-border); }
.vkt-cat__doclist .doc-link {
  display: block;
  padding: var(--space-3) 0;
}

/* ── Карточки товара в сетке (похожие товары / архив категории /
   каталог) — переиспользуют .vkt-equip-card, тут только адаптация под
   data-dense листинг (не маркетинговая карточка с главной). ─────────── */
.vkt-cat__related { margin-bottom: var(--space-8); }
.vkt-cat__related h2 { margin-bottom: var(--space-6); }
/* Вся карточка — ссылка (не только "Подробнее", как на главной) —
   снимаем дефолтный underline браузера с заголовка внутри неё. */
.vkt-cat a.vkt-card { display: block; color: inherit; text-decoration: none; }
.vkt-cat a.vkt-card:hover h4 { color: var(--color-accent); }
/* .vkt-card h4 по умолчанию --text-md (22px, для широких маркетинговых
   карточек) — в узкой сетке каталога тяжело; data-dense зона
   (design.md «Компактность») — размер поменьше.
   ⚠ Специфичность СТРОГО выше .vkt-card h4 (front-page.css, тот же 0,1,1) —
   иначе побеждает по порядку подключения файлов, не по намерению
   (найдено 2026-07-13: правило было равным по весу и проигрывало). */
.vkt-cat .vkt-card h4 { font-size: var(--text-base); margin-bottom: var(--space-1); }
.vkt-cat__related-price { font-weight: 700; color: var(--color-ink); margin-top: var(--space-2); }
.vkt-cat__related-price del { color: var(--color-ink-muted); font-weight: 400; margin-right: var(--space-1); font-size: var(--text-2xs); }

/* ── Фильтр по серии (архив категории, чипы над сеткой) ──────────────
   Только там, где реально 2+ серии у товаров категории (PHP-гейт в
   taxonomy-product_cat.php) — в остальных категориях блока в разметке
   нет вообще, стили тут ни на что не влияют. Пилюля — тот же паттерн,
   что .vkt-cat__spec-tab выше (радиус/паддинг/шрифт из кита). */
.vkt-cat__filter { margin-bottom: var(--space-6); }
.vkt-cat__filter-track {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.vkt-cat__filter-chip {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 700;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-control);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-ink-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* background-color на :hover ОБЯЗАТЕЛЕН явно (design.md/wordpress-dev.md
   Bug 8): GeneratePress красит button:hover глобально инлайн-стилем
   кастомайзера (#3F4047) — без явного значения тут побеждает он же,
   кнопка сереет при наведении. */
.vkt-cat__filter-chip:hover:not(.is-active) { background-color: var(--color-white); border-color: var(--color-accent); color: var(--color-accent); }
.vkt-cat__filter-chip.is-active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-white); }
/* Мобайл: чипы скроллятся ГОРИЗОНТАЛЬНО ВНУТРИ своего контейнера
   (overflow-x на самом ряду, без выхода за .vkt-container) — страница
   при этом не скроллится вбок, ширина ряда остаётся в рамках колонки. */
@media (max-width: 767px) {
  .vkt-cat__filter-track {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-2);
  }
  .vkt-cat__filter-chip { flex: none; }
}

/* ── Архив категории / каталог (/katalog/, /katalog/{категория}/) ─── */
.vkt-cat--archive h1 { margin-bottom: var(--space-4); }
.vkt-cat__archive-desc { max-width: 75ch; color: var(--color-ink-muted); margin-bottom: var(--space-6); }
.vkt-cat__cat-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
}
.vkt-cat__cat-link {
  font-size: var(--text-2xs);
  font-weight: 700;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-control);
  border: 1px solid var(--color-border);
  color: var(--color-ink-muted);
}
.vkt-cat__cat-link:hover { border-color: var(--color-accent); color: var(--color-accent); text-decoration: none; }
.vkt-cat__empty { color: var(--color-ink-muted); }

.vkt-cat__pagination { margin-top: var(--space-8); }
.vkt-cat__pagination ul { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.vkt-cat__pagination a,
.vkt-cat__pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-control);
  border: 1px solid var(--color-border);
  color: var(--color-ink-muted);
  text-decoration: none; /* дефолтный browser-underline на <a> — без него
    кнопки "2"/"Next" выглядели сломанными внутри пилюли (владелец 2026-07-13) */
}
.vkt-cat__pagination a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.vkt-cat__pagination .current { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-white); }

/* ── /cart/, /checkout/ — нативный WC-блок, только сняты кнопки корзины ─ */
.vkt-cat--cart .wc-block-grid__product-price .price { color: var(--color-ink); font-weight: 700; }
.vkt-cat--cart .wc-block-grid__product-title { color: var(--color-ink); font-weight: 700; }

/* ── Форма-заявка внизу карточки (переиспользует .vkt-form) ──────── */
.vkt-cat__request {
  max-width: 560px;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-7);
}
.vkt-cat__request h2 { margin-bottom: var(--space-3); }
.vkt-cat__request > p { color: var(--color-ink-muted); margin-bottom: var(--space-5); }