/* ============================================================
   ART-GSM 2026 — Style B РЕЛЬСЫ ВИТРИНЫ КАТАЛОГА (/catalog/)
   Сетка .bento собрана из сырых разделов iblock 17 в
   catalog.section.list/sections_list/template.php (гейт AG_IS_CATALOG_LANDING).
   Визуал плиток задаёт home.css (.bento/.bento-tile/.bt-*), секций — base.css.
   Здесь: гашение легаси-обёрток каталога + выравнивание + отступы.
   Грузится тест-шаблоном only → прод (aspro_max) не затронут.
   ============================================================ */

/* ---------- распрямить флекс-обёртку каталога (нет левого блока на корне) ---------- */
body.ag-styleb[data-cur="/catalog/"] .main-catalog-wrapper {
  display: block;
  gap: 0;
}
body.ag-styleb[data-cur="/catalog/"] .section-content-wrapper {
  width: 100%;
  max-width: none;
  float: none;
}

/* ---------- центрирующий контейнер бенто = ширина шапки (.maxwidth-theme) ---------- */
body.ag-styleb[data-cur="/catalog/"] .ag-catalog-landing {
  padding-bottom: var(--s-24);
}
/* первая группа — прижать к заголовку h1 */
body.ag-styleb[data-cur="/catalog/"] .ag-catalog-landing .ag-cat-group:first-of-type {
  padding-top: var(--s-8);
}

/* ---------- подзаголовок-лид под H1 (нет .page-head обёртки) ---------- */
body.ag-styleb[data-cur="/catalog/"] .ag-catalog-landing .ph-sub {
  margin: 0 0 var(--s-8);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 78ch;
}

/* ---------- схлопнуть легаси-пустоту над H1 (.page-top .topic pt:42 — урок контактов) ---------- */
body.ag-styleb[data-cur="/catalog/"] .page-top .topic { padding-top: var(--s-8); }
body.ag-styleb[data-cur="/catalog/"] .page-top > div:has(.breadcrumbs) { padding-top: 2px; padding-bottom: 2px; }

/* ---------- бенто на витрине: 3 ряда по 4, плитка чуть ниже чем на главной ---------- */
body.ag-styleb[data-cur="/catalog/"] .ag-catalog-landing .bento { grid-auto-rows: 132px; }

@media (max-width: 1023px) {
  body.ag-styleb[data-cur="/catalog/"] .ag-catalog-landing .bento { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  body.ag-styleb[data-cur="/catalog/"] .ag-catalog-landing .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 124px; }
}
@media (max-width: 420px) {
  body.ag-styleb[data-cur="/catalog/"] .ag-catalog-landing .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 116px; gap: var(--s-10); }
}

/* ============================================================
   КАТАЛОГ-ВХОД (/catalog/zapchasti/ и др. секции со списком подкатегорий)
   Aspro section-compact-list → Style B карточки (аудит 2026-06-12, catalog-mix)
   ============================================================ */
body.ag-styleb .section-compact-list .row.flexbox::before, body.ag-styleb .section-compact-list .row.flexbox::after { content: none !important; display: none !important; }
body.ag-styleb .section-compact-list .row.flexbox { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: var(--s-14); margin: 0 !important; }
body.ag-styleb .section-compact-list [class*="col-"] { width: auto !important; max-width: none !important; flex: none !important; padding: 0 !important; }
body.ag-styleb .section-compact-list__item.item {
  display: flex !important; align-items: center; gap: var(--s-12);
  background: var(--surface); border: 1px solid var(--line) !important; border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-sm) !important; padding: 12px 14px !important; margin: 0 !important;
  min-height: 84px; transition: transform .15s, box-shadow .2s, border-color .2s;
}
body.ag-styleb .section-compact-list__item.item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md) !important; border-color: var(--accent) !important; }
body.ag-styleb .section-compact-list__image {
  width: 60px; height: 60px; flex: none; border-radius: var(--r-sm); background: var(--surface-2);
  display: grid !important; place-items: center; overflow: hidden; padding: 6px;
}
body.ag-styleb .section-compact-list__image .thumb { display: block; width: 100%; height: 100%; }
body.ag-styleb .section-compact-list__image img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
body.ag-styleb .section-compact-list__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body.ag-styleb .section-compact-list__link { font-weight: 700 !important; font-size: 14.5px !important; line-height: 1.2 !important; color: var(--ink) !important; }
body.ag-styleb .section-compact-list__link span { border: 0 !important; }
body.ag-styleb .section-compact-list__item:hover .section-compact-list__link { color: var(--accent) !important; }
body.ag-styleb .section-compact-list .element-count2 {
  font-family: var(--mono); font-size: 11.5px !important; font-weight: 600; color: var(--ink-3) !important;
  text-transform: none !important; letter-spacing: 0 !important;
}
@media (max-width: 1100px) { body.ag-styleb .section-compact-list .row.flexbox { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { body.ag-styleb .section-compact-list .row.flexbox { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { body.ag-styleb .section-compact-list .row.flexbox { grid-template-columns: 1fr; } }

/* ============================================================
   КАТАЛОГ-ВХОД: bento-карточки категорий с фото (2026-06-12)
   Компактнее старого section-compact-list, full-image, 2 ряда + кнопка.
   ============================================================ */
body.ag-styleb .catcards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-14);
}
body.ag-styleb .catcard {
  position: relative; overflow: hidden; aspect-ratio: 16 / 10;
  border-radius: var(--r-md); border: 1px solid var(--line); background: #eceef3;
  box-shadow: var(--shadow-sm); text-decoration: none; isolation: isolate;
  transition: transform .15s, box-shadow .2s, border-color .2s;
}
body.ag-styleb .catcard .cc-media { position: absolute; inset: 0; z-index: 0; }
body.ag-styleb .catcard .cc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
body.ag-styleb .catcard:hover .cc-media img { transform: scale(1.05); }
body.ag-styleb .catcard::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(13,17,28,.88) 0%, rgba(13,17,28,.52) 30%, rgba(13,17,28,.08) 60%, rgba(13,17,28,0) 78%);
}
body.ag-styleb .catcard.no-img { background: var(--surface); }
body.ag-styleb .catcard.no-img::after { background: linear-gradient(to top, var(--surface-2), transparent 60%); }
body.ag-styleb .catcard.no-img .cc-name { color: var(--ink); text-shadow: none; }
body.ag-styleb .catcard.no-img .cc-count { color: var(--ink-3); text-shadow: none; }
body.ag-styleb .catcard:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
body.ag-styleb .catcard .cc-info {
  position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2;
  display: flex; flex-direction: column; gap: 2px;
}
body.ag-styleb .catcard .cc-name { font-weight: 700; font-size: 14.5px; line-height: 1.16; color: #fff; letter-spacing: -.01em; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
body.ag-styleb .catcard .cc-count { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.86); text-shadow: 0 1px 4px rgba(0,0,0,.55); }

/* 2 ряда в свёрнутом виде (по числу колонок брейкпоинта) */
body.ag-styleb .catcards.collapsed .catcard:nth-child(n+9) { display: none; }
body.ag-styleb .catcards-more {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: var(--s-20) auto 0; padding: 11px 26px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface);
  color: var(--ink); font-weight: 700; font-size: 14px; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
body.ag-styleb .catcards-more:hover { background: var(--surface-2); border-color: var(--accent); color: var(--accent); }
body.ag-styleb .catcards-more svg { width: 16px; height: 16px; }

@media (max-width: 980px) {
  body.ag-styleb .catcards { grid-template-columns: repeat(3, 1fr); }
  body.ag-styleb .catcards.collapsed .catcard:nth-child(n+9) { display: block; }
  body.ag-styleb .catcards.collapsed .catcard:nth-child(n+7) { display: none; }
}
@media (max-width: 680px) {
  body.ag-styleb .catcards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  body.ag-styleb .catcards.collapsed .catcard:nth-child(n+7) { display: block; }
  body.ag-styleb .catcards.collapsed .catcard:nth-child(n+5) { display: none; }
  body.ag-styleb .catcard .cc-name { font-size: 13px; }
}