/* ═══════════════════════════════════════════════════════════════════════
   Бренды: посадочная страница и указатель.
   Макеты «Бренд.dc.html» и «Бренд моб.dc.html» от 04.09.2026.
   Плитка, сетка и сортировка берутся из листинга — здесь только то,
   чего в каталоге нет: шапка бренда, состав, соседи и указатель.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ Шапка бренда ═════════════════════════════════════════════════════
   Логотипа нет, поэтому вся графика — знак страны и крупное имя. */
.br__head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;
  align-items:start;margin:26px 0 0}
.br__headmain{min-width:0}

.br__eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 14px;
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--burgundy)}

.br__glyph{display:grid;place-items:center;flex:none;background:var(--burgundy);
  border-radius:999px;color:var(--white);font-weight:600}
.br__glyph--inline{display:none;width:44px;height:44px;font-size:18px}
.br__glyph--big{width:88px;height:88px;font-size:34px}

.br__h1{max-width:20ch;margin:0 0 20px;font-size:clamp(40px,5vw,66px);line-height:1;
  font-weight:600;letter-spacing:-.045em;text-wrap:balance}

.br__facts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0;
  font-size:15px;color:var(--muted)}
.br__fact{display:inline-flex;align-items:center;gap:14px}
/* Ключ факта нужен только там, где факты идут таблицей, — на телефоне.
   В строке с точками «Страна: Япония · Раздел: Косметика» было бы вдвое
   больше слов при том же смысле. */
.br__fact-k{display:none}
.br__fact-v--link{color:var(--burgundy);font-weight:600}
.br__fact-v--link:hover{color:var(--burgundy-hover)}
.br__fact-short{display:none}
.br__dot{color:#C3B2B7}

/* Текст о бренде. Девятнадцати текстов пока нет ни одного — блок просто
   не выводится, и страница от этого не разъезжается. */
.br__text{max-width:860px;margin:34px 0 0;font-size:18px;line-height:1.65;
  color:#3C3336;text-wrap:pretty}
.br__text p{margin:0 0 16px}
.br__text p:last-child{margin-bottom:0}

/* Плашка БАД — обязательная по ст. 25 ФЗ «О рекламе» */
.br__bad{display:flex;gap:20px;margin:32px 0 0;padding:26px 30px;background:#EFE7DF;
  border:1px solid #DCCFC6;border-radius:22px;color:var(--burgundy)}
.br__bad svg{flex:none;margin-top:3px}
.br__bad p{max-width:56ch;margin:0;font-size:19px;line-height:1.45;font-weight:600;
  color:#2A2024;text-wrap:pretty}

/* ═══ Лента ════════════════════════════════════════════════════════════ */
.br__goods{margin:36px 0 0}
.br__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.br__count{margin:0;font-size:15px;color:var(--muted)}
.br__tiles{margin-top:20px}

/* Одинокая плитка в ряду читается как поломка выдачи. При одном–трёх
   товарах остаток ряда занимает карточка соседей: ряд закрыт, и человек
   получает следующий шаг вместо пустоты. */
.br__fill{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:14px;padding:24px;background:rgba(255,255,255,.5);border:1px solid var(--border);
  border-radius:16px}
.br__fill--1{grid-column:2 / -1}
.br__fill--2{grid-column:3 / -1}
.br__fill--3{grid-column:4 / -1}
.br__fill-note{margin:0;font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.br__fill-t{max-width:34ch;margin:0;font-size:19px;line-height:1.35;font-weight:600;
  letter-spacing:-.02em;text-wrap:pretty}
.br__fill-rows{width:100%;max-width:520px;display:flex;flex-direction:column;gap:10px}
.br__fill-rows a{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:2px 14px;min-height:44px;padding-bottom:10px;border-bottom:1px solid var(--border);
  color:var(--ink)}
.br__fill-rows a:hover{color:var(--burgundy)}

/* ═══ Подборки ═════════════════════════════════════════════════════════ */
.br__pb{margin:56px 0 0}
.br__pb h2,.br__comp h2,.br__nb h2{margin:0 0 18px;font-size:clamp(22px,2.1vw,28px);
  line-height:1.2;font-weight:600;letter-spacing:-.025em}
.br__pb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.br__pb-card{display:flex;flex-direction:column;gap:10px;padding:28px 30px;
  background:var(--white);border:1px solid #EDE4DE;border-radius:20px;color:var(--ink)}
.br__pb-card:hover{border-color:var(--burgundy);color:var(--ink)}
.br__pb-meta{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted)}
.br__pb-t{font-size:23px;line-height:1.2;font-weight:600;letter-spacing:-.025em}
.br__pb-n{max-width:44ch;font-size:15px;line-height:1.5;color:var(--muted);text-wrap:pretty}

/* ═══ Что входит в каталог ═════════════════════════════════════════════ */
.br__comp{margin:56px 0 0}
.br__comp-pad{padding:34px 36px;background:var(--white);border-radius:20px}
.br__comp-rows{display:flex;flex-direction:column;max-width:56ch;margin-bottom:24px}
.br__comp-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid #EDE4DE;font-size:16px}
.br__comp-n{flex:none;font-weight:600;font-variant-numeric:tabular-nums;color:var(--burgundy)}
.br__comp-notes{max-width:74ch;display:flex;flex-direction:column;gap:14px}
.br__comp-notes p{margin:0;font-size:16px;line-height:1.6;color:var(--muted);text-wrap:pretty}

/* ═══ Соседние бренды ══════════════════════════════════════════════════ */
.br__nb{margin:56px 0 0}
.br__nb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.br__nb-card{display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:88px;padding:0 26px;background:var(--white);border:1px solid #EDE4DE;
  border-radius:16px;color:var(--ink)}
.br__nb-card:hover{border-color:var(--burgundy);color:var(--ink)}
.br__nb-card > span{min-width:0}
.br__nb-name{display:block;font-size:19px;font-weight:600;letter-spacing:-.02em}
.br__nb-meta{display:block;font-size:13px;color:var(--muted)}
.br__nb-arrow{flex:none;color:var(--burgundy)}
.br__fill-rows .br__nb-name{font-size:16px;letter-spacing:-.01em}
.br__fill-rows .br__nb-meta{font-size:12px}

/* ═══ Указатель /brands/ ═══════════════════════════════════════════════ */
.bri__h1{margin:0 0 18px;font-size:clamp(36px,4.2vw,54px);line-height:1.02;
  font-weight:600;letter-spacing:-.04em}
.bri__lead{max-width:64ch;margin:0;font-size:18px;line-height:1.6;color:var(--muted);
  text-wrap:pretty}
.bri .br__eyebrow{margin:18px 0 14px}

.bri__groups{display:flex;flex-direction:column;gap:44px;margin:44px 0 0}
.bri__gh{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:16px;padding-bottom:14px;border-bottom:1px solid var(--burgundy)}
.bri__gh h2{margin:0;font-size:clamp(22px,2.2vw,30px);line-height:1.1;font-weight:600;
  letter-spacing:-.03em}
/* Счётчик группы — ссылка в раздел: цель должна быть по пальцу, а не по
   высоте строки в 14 пикселей. */
.bri__gh a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:600}

.bri__row{display:grid;grid-template-columns:minmax(0,1fr) 160px 130px;gap:20px;
  align-items:baseline;padding:18px 4px;border-bottom:1px solid var(--border);color:var(--ink)}
.bri__row:hover{color:var(--burgundy)}
.bri__name{font-size:22px;font-weight:600;letter-spacing:-.025em}
.bri__country,.bri__n{font-size:15px;color:var(--muted)}
.bri__n{font-variant-numeric:tabular-nums}

/* ═══ Планшет ══════════════════════════════════════════════════════════ */
@media (max-width:1199px){
  /* Знак уезжает в строку с надзаголовком: на трёх колонках плашка 88
     рядом с H1 оставляла бы имени слишком узкую полосу. */
  .br__glyph--big{display:none}
  .br__glyph--inline{display:grid}
  .br__head{grid-template-columns:minmax(0,1fr)}
  .br__fill--3{grid-column:1 / -1}
  .br__nb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:900px){
  .br__nb-grid{grid-template-columns:minmax(0,1fr)}
  .bri__row{grid-template-columns:minmax(0,1fr);gap:4px}
}

/* ═══ Телефон ══════════════════════════════════════════════════════════ */
@media (max-width:767px){
  .br__eyebrow{gap:10px}
  .br__glyph--inline{width:34px;height:34px;font-size:15px}
  .br__h1{font-size:34px;margin-bottom:16px}

  /* Строка «Корея · Косметика · 23 товара» на 390 ломалась на три строки
     с висячими разделителями. Здесь факты идут таблицей «ключ — значение»,
     и точки не нужны вовсе. */
  .br__facts{display:flex;flex-direction:column;align-items:stretch;gap:0;font-size:15px}
  .br__facts .br__dot{display:none}
  .br__fact{display:flex;align-items:center;justify-content:space-between;gap:14px;
    min-height:44px;border-bottom:1px solid #E6DBD4}
  .br__fact-k{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;
    text-transform:uppercase;color:var(--muted)}
  .br__fact-v{text-align:right}
  /* Ссылка раздела — полноценная цель для пальца, а не строка текста */
  .br__fact-v--link{display:flex;align-items:center;justify-content:flex-end;
    min-height:44px;font-weight:600}
  /* «Производитель — LION» в таблице повторил бы ключ строки */
  .br__fact-full{display:none}
  .br__fact-short{display:inline}

  .br__text{font-size:16px;margin-top:26px}
  .br__bad{gap:14px;padding:20px 22px;border-radius:18px}
  .br__bad p{font-size:16px}

  .br__bar{flex-direction:column;align-items:stretch}
  .br__fill{grid-column:1 / -1;padding:20px}
  .br__fill--1{grid-column:2 / -1}

  .br__pb,.br__comp,.br__nb{margin-top:40px}
  .br__pb-grid{grid-template-columns:minmax(0,1fr)}
  .br__pb-card{padding:22px 24px}
  .br__pb-t{font-size:20px}
  .br__comp-pad{padding:24px 22px;border-radius:24px}
  .br__nb-card{min-height:72px;padding:0 20px}

  .bri__h1{font-size:34px}
  .bri__lead{font-size:16px}
  .bri__groups{gap:34px;margin-top:32px}
  .bri__row{padding:14px 2px}
  .bri__name{font-size:19px}
  /* Строка в две строчки: название со страной слева, число справа */
  .bri__row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'name n' 'country n'}
  .bri__name{grid-area:name}
  .bri__country{grid-area:country}
  .bri__n{grid-area:n;align-self:center}
}

@media (max-width:360px){
  .br__fill--1{grid-column:1 / -1}
}