/* Каталог разбит на две линейки.

   До этого пять перегол лежали одной сеткой и сортировались по площади. Получалось, что
   пергола 16 м² за 390 000 стоит рядом с перголой 18 м² за 260 000 — меньшая дороже большей,
   и цена выглядит ошибкой. Разница не в размере: у старших моделей стойка 150 × 150 вместо
   100 × 100, двойная ламель, вдвое выше снеговая и ветровая нагрузка, электропривод и свет.
   Заголовок группы объясняет надбавку до того, как человек успеет удивиться. */

.cgroup {
  margin: 0 0 clamp(48px, 6vw, 82px);
}

.cgroup-title {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.cgroup-note {
  max-width: 56ch;
  margin: 0 0 clamp(22px, 3vw, 34px);
  color: var(--ink-mute);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* `scroll-margin-top: 96px` отсюда убран: то же самое теперь делает `scroll-padding-top`
   на `html` (`outexp-fixes.css`, пункт 7) — для всех якорей сразу, а не для одного этого.
   Отступы складывались бы: 96 + 96 = 192 px, и заголовок группы уезжал бы вниз экрана. */

/* Группа целиком скрывается, когда фильтр не оставил в ней ни одной карточки. */
.cgroup.hide {
  display: none;
}

/* Объяснение под карточкой, когда выбранного цвета нет на кадре.

   У 3×4 белое исполнение есть как товар, а съёмки под него нет. Раньше выбор белого — хоть
   точкой, хоть фильтром «Белый» — молча оставлял графитовое фото с белой точкой сверху:
   человек, отфильтровавший белое, смотрел на чёрную перголу. Проверено в браузере до правки.

   Показывается классом, а не атрибутом `hidden`: рядом в каталоге классы задают `display`, а
   правило `[hidden]{display:none}` из браузерного листа его не перебивает — эта грабля в
   проекте уже стоила времени. */
.cnophoto {
  display: none;
  /* Лежит поверх кадра, а не под ним. Абзацем в потоке заметка раздвигала карточку вниз при
     выборе белого, и ряд каталога разъезжался: соседи оставались прежней высоты. Теперь она
     ничего не двигает — `.cbody` уже `position:relative`, а высоту держит `.shot`. */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 10px 14px;
  /* Подложка обязательна: кадр товара на белом фоне, и серый текст по нему не читается.
     Тон взят у `--bg-alt`, как у чипа с площадью в противоположном углу. */
  background: var(--bg-alt);
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--ink-mute);
}

.cnophoto.on {
  display: block;
}

/* Яма между линейками каталога.

   `.grid` тянет `padding-bottom: clamp(60px, 8vw, 110px)` со старого сайта, где каталог был
   ОДНОЙ сеткой и этот отступ отделял её от подвала. После разделения на две линейки сетка
   встречается дважды, и у верхней группы отступ складывается с её собственным `margin-bottom`:
   замерено на 1257 px — 100 px подкладки плюс 75 px поля, итого 176 px пустоты между
   последней карточкой и заголовком «С электроприводом». Владелец назвал это ямой, и он прав.

   Внутри группы подкладка не нужна: расстояние держит `margin` самой `.cgroup`. Нижнюю
   группу это не оголяет — за ней идёт подвал со своим отступом. */
.cgroup .grid {
  padding-bottom: 0;
}

/* Вторая метка на карточке — в нижнем левом углу кадра.

   До 2026-09-02 она стояла вторым ярусом слева сверху (top: 58px). Владелец прислал разбор:
   на карточке 3×6 эта плашка легла прямо на перголу — «закрывает само изображение».
   Так и есть: кадр вписан `object-fit: contain` в рамку 4/3, а 3×6 — самая широкая и низкая
   модель каталога, её силуэт занимает середину по высоте и подходит слева ближе всех.
   Верхний угол под меткой площади там не пустой.

   Низ кадра у всех моделей свободен: перголы сняты с запасом снизу. Метка остаётся у левого
   края, в одной вертикали с меткой площади, и цвет у неё прежний акцентный — две одинаковые
   плашки читались бы как две площади.

   `top: auto` обязателен: `.chip` задаёт `top: 12px`, и без сброса метка получила бы обе
   привязки сразу и осталась бы наверху. */
.chip-extra {
  top: auto;
  bottom: 12px;
  background: var(--accent-on);
  color: var(--accent-ink);
}