/* ============================================================================
   Статичный каталог (SEO, этап 3): блок «Разделы» на страницах категорий и
   страницы подкатегорий (radiatory-*.html, potolki-*.html, truby-*.html,
   kanalizaciya-*.html). Разметку генерирует build_static_catalog.py.
   Подключается ПОСЛЕ styles.css (и services.v1.css на подкатегориях).
   Префикс cg- — чтобы не пересекаться с pt-/lp-/sv-.
   ============================================================================ */

/* ── Блок «Разделы» на странице категории ── */
.cg-subcats{margin-top:28px;padding:22px 24px;border:1px solid var(--line-2);border-radius:16px;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01))}
.cg-subcats__title{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 14px}
.cg-subcats__list{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.cg-subcats__link{display:inline-flex;align-items:baseline;gap:8px;padding:10px 16px;border-radius:100px;
  border:1px solid rgba(91,168,255,.35);background:rgba(26,95,168,.14);color:#fff;font-size:14.5px;font-weight:700;
  transition:border-color .2s,background .2s}
.cg-subcats__link:hover{border-color:#5ba8ff;background:rgba(26,95,168,.3)}
.cg-subcats__count{font-size:12.5px;font-weight:600;color:#9db3d6}

/* ── Страница подкатегории ── */
.cg-facts{max-width:880px;margin:0;padding:0;list-style:none;display:grid;gap:10px}
.cg-facts li{color:#c4d0ea;font-size:15px;line-height:1.65;padding-left:22px;position:relative}
.cg-facts li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue-2),var(--red))}
.cg-facts b{color:#fff}
.cg-list .cards{margin-top:8px}
.cg-list .card__name{margin:0}
.cg-list__note{color:var(--ink-soft);font-size:14px;line-height:1.7;margin:22px 0 0;max-width:880px}
.cg-list__note a{color:#5ba8ff;border-bottom:1px solid rgba(91,168,255,.3)}
.cg-brands{max-width:640px}

/* Плашки наличия — те же классы, что рисует JS-каталог; стили только на
   подкатегориях (.cg-list), чтобы не менять вид карточек на категориях */
.cg-list .card__badge--stock,.cg-list .card__badge--order{font-size:11px;font-weight:700;padding:4px 8px;border-radius:6px;
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.cg-list .card__badge--stock{background:#e0f7e8;color:#0a7028}
.cg-list .card__badge--order{background:#fdf1dc;color:#8a5a00}

@media (max-width:640px){
  .cg-subcats{padding:18px 16px}
  .cg-subcats__link{font-size:14px;padding:9px 14px}
}