/* ============================================================
   Бренды — /brands.html (сетка) и /brands/{filename}.html (шапка
   бренда + суб-бренды + товары). Stage 6, Task 1.

   Логотипов у _pp_brands нет (DESCRIBE подтвердил: колонки big_pic
   в таблице не существует) — буква-аватар с пастельной ротацией
   (те же pastel-* переменные/классы, что у .cat-index-card,
   templates/v3/pages/catalogue/index.php) — это финальное решение,
   не временная заглушка.
   ============================================================ */

/* ---- /brands.html ---- */
.br-page { padding-top: 32px; padding-bottom: 48px; }
.br-page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.br-page-title { font-size: 32px; font-weight: 900; }
.br-page-count { font-size: 13px; font-weight: 700; color: var(--muted); }

/* ---- сетка карточек (переиспользуется на /brands.html и суб-брендами на странице бренда) ---- */
.br-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.br-grid--sub { margin-bottom: 8px; }

.br-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; }
.br-card__avatar {
  width: 48px; height: 48px; border-radius: 14px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 19px; color: var(--ink);
}
.br-card__title { font-weight: 800; font-size: 14.5px; color: var(--ink); line-height: 1.3; }
.br-card__desc {
  font-size: 12.5px; color: var(--muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Пастельная ротация аватара — те же переменные, что у .cat-index-card
   (templates/v3/pages/catalogue/index.php), но объявлены здесь же: у
   /brands.html нет причин тянуть весь catalogue.css ради 5 цветовых классов
   (item.php — тянет catalogue.css отдельно, ради .gc/.cat-grid товарной сетки). */
.br-card .pastel-cream, .br-hero__avatar.pastel-cream { background: var(--pastel-cream); }
.br-card .pastel-peach, .br-hero__avatar.pastel-peach { background: var(--pastel-peach); }
.br-card .pastel-lilac, .br-hero__avatar.pastel-lilac { background: var(--pastel-lilac); }
.br-card .pastel-rose, .br-hero__avatar.pastel-rose { background: var(--pastel-rose); }
.br-card .pastel-blue, .br-hero__avatar.pastel-blue { background: var(--pastel-blue); }

.br-empty { background: var(--surface); border-radius: var(--r-card); padding: 40px; text-align: center; color: var(--muted); }

/* ---- /brands/{filename}.html ---- */
.br-item { padding-top: 0; padding-bottom: 48px; }
.br-breadcrumbs { padding: 14px 0 20px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.br-breadcrumbs a:hover { color: var(--terra); }
.br-breadcrumbs__sep { margin: 0 6px; color: var(--muted); }
.br-breadcrumbs__current { color: var(--ink-2); }

.br-hero { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.br-hero__avatar {
  width: 72px; height: 72px; border-radius: 20px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 30px; color: var(--ink);
}
.br-hero__title { font-size: 28px; font-weight: 900; line-height: 1.2; }
.br-hero__count { font-size: 13px; font-weight: 700; color: var(--muted); margin-top: 4px; }

.br-desc { padding: 22px 24px; font-size: 14px; line-height: 1.8; color: var(--ink-2); margin-bottom: 8px; }
.br-desc p:last-child { margin-bottom: 0; }

.br-section { margin-top: 32px; }

.br-back { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.br-back a { font-size: 13px; font-weight: 800; color: var(--terra); }

@media (max-width: 768px) {
  .br-page-title, .br-hero__title { font-size: 22px; }
  .br-hero { gap: 14px; }
  .br-hero__avatar { width: 56px; height: 56px; font-size: 22px; border-radius: 16px; }
  .br-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}