/* Каталог 2026. Префикс ct26-, поверх токенов hm26. Мобилка первой.
   На мобилке плитки компактные, без подразделов: иначе страница уезжает
   за 5000 px. Подразделы включаются с 600 px. */

/* Клиренс под шапкой не трогаем: main.hm26 из hdr26.css прижимает страницу к шапке
   ровно по её высоте, и правильно — margin поверх серого фона страницы читается
   белой полосой. Воздух над крошками даём отступом внутри main. */
.ct26 { padding-top: 12px; padding-bottom: 24px; }
/* Канон .bc на ≤768 добавляет свои 40px — компенсацию отступа hero на других
   страницах. Здесь клиренс уже дала шапка, компенсация не нужна. */
.ct26 .bc { margin-top: 0; }

/* ── заголовок раздела ────────────────────── */
.ct26-top { margin-bottom: 20px; }
.ct26 h1 { font-size: 28px; line-height: 36px; }
.ct26 .ct26-top__lead { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--hm26-muted); max-width: 58ch; }

/* ── сетка разделов ───────────────────────── */
.ct26-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; align-items: start; }
.ct26-sec {
  background: #fff;
  border: 1px solid var(--hm26-line);
  border-radius: 16px;
  padding: 12px;
  box-shadow: var(--hm26-shadow);
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s ease;
}
.ct26-sec:hover { box-shadow: var(--hm26-shadow-hover); }

.ct26-sec__head { display: grid; grid-template-columns: 32px 1fr; column-gap: 10px; align-items: center; }
.ct26-sec__icon { width: 32px; height: 32px; object-fit: contain; border-radius: 10px; }
.ct26-sec__body { display: grid; row-gap: 3px; }
/* Comfortaa в hm26 висит на всех h2 — названиям разделов нужен Inter, как в блоке главной */
.ct26 .ct26-sec__name { font-family: Inter, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--hm26-ink); }
/* на узкой плитке счётчик и цена идут строками, разделитель включается с 600 px */
.ct26-sec__meta { display: grid; font-size: 12px; line-height: 16px; color: var(--hm26-muted); }
.ct26-sec__price { color: var(--hm26-ink); font-weight: 500; }

/* ── подразделы ───────────────────────────── */
/* Отступы списка поднимаем до .ct26 .ct26-sec__subs: `.hm26 ul { margin:0; padding:0 }`
   перебивает одноклассовое правило и обнуляет их (те же грабли, что с .hm26 a). */
.ct26-sec__subs { display: none; }

@media (min-width: 600px) {
  .ct26-grid { gap: 16px; }
  .ct26-sec { padding: 16px; }
  .ct26-sec__head { grid-template-columns: 40px 1fr; column-gap: 12px; }
  .ct26-sec__icon { width: 40px; height: 40px; }
  .ct26 .ct26-sec__name { font-size: 15px; line-height: 20px; }
  .ct26-sec__meta { display: flex; flex-wrap: wrap; gap: 0 6px; }
  .ct26-sec__price::before { content: "·"; margin-right: 6px; color: var(--hm26-faint); font-weight: 400; }

  .ct26 .ct26-sec__subs {
    display: grid;
    row-gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--hm26-line);
  }
  .ct26 .ct26-sec__subs a { font-size: 13px; line-height: 18px; color: var(--hm26-text); }
  .ct26 .ct26-sec__subs a:hover { color: var(--hm26-accent); }

  /* хвост подразделов — под аккордеоном */
  .ct26-sec__extra { display: none; }
  .ct26-sec.is-open .ct26-sec__extra { display: block; }
  .ct26-sec__more { margin-top: 2px; }
  .ct26-sec__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: 400 13px/18px Inter, sans-serif;
    color: var(--hm26-muted);
    transition: color .15s ease;
  }
  .ct26-sec__toggle:hover { color: var(--hm26-accent); }
  .ct26-sec__toggle::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.4px solid currentColor;
    border-bottom: 1.4px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s ease;
  }
  .ct26-sec.is-open .ct26-sec__toggle::after { transform: translateY(1px) rotate(-135deg); }
}

@media (min-width: 1000px) {
  .ct26 { padding-bottom: 40px; }
  .ct26 h1 { font-size: 40px; line-height: 48px; }
  .ct26 .ct26-top__lead { font-size: 16px; line-height: 24px; }
  .ct26-top { margin-bottom: 28px; }
  .ct26-grid { grid-template-columns: repeat(4, 1fr); }
  .ct26-sec { padding: 20px; border-radius: var(--hm26-radius); }
  .ct26-sec__head { grid-template-columns: 56px 1fr; column-gap: 14px; }
  .ct26-sec__icon { width: 56px; height: 56px; border-radius: 14px; }
  .ct26 .ct26-sec__name { font-size: 17px; line-height: 24px; }
  .ct26-sec__meta { font-size: 13px; line-height: 18px; }
  .ct26 .ct26-sec__subs { margin-top: 20px; padding-top: 18px; row-gap: 10px; }
  .ct26 .ct26-sec__subs a { font-size: 14px; line-height: 20px; }
  .ct26-sec__toggle { font-size: 14px; line-height: 20px; }
}

/* Название в одну колонку с иконкой — на узких плитках иначе рвётся */
@media (max-width: 599px) {
  .ct26-sec__head { grid-template-columns: 32px 1fr; grid-template-rows: auto auto; align-items: start; }
  .ct26-sec__icon { grid-row: 1 / 3; }
  .ct26-sec__body { display: contents; }
}