/* ════════════════════════════════════════════════════════════════════
   COOLBAG · КОНТРАКТ ТОКЕНОВ · слой 1 · весь сайт
   ────────────────────────────────────────────────────────────────────
   Куда: Настройки сайта → Ещё → ПОЛЬЗОВАТЕЛЬСКИЕ CSS-СТИЛИ.
   Без тега  — поле принимает голый CSS.
   НЕ в «HTML-код для вставки внутрь HEAD»: тот приземляется раньше
   родных таблиц Tilda, и любое правило с селектором оттуда проигрывает.

   ФАЙЛ ИЗ ТРЁХ СЛОЁВ, читать сверху вниз:
     слой 1 — значения ролей на :root. Ни одного селектора, ни одного
              !important: Tilda про переменные --cb-* не знает, спорить
              ей не с чем, поэтому слой не может проиграть каскад.
     слой 2 — оформление ролей: типографика и цвет по умолчанию.
              Здесь появляются селекторы и !important, но ровно те же,
              что стояли в блоках, — специфичность не изменилась.
     слой 3 — плоскости: область переопределяет значения ролей у себя.

   Чего здесь НЕТ и не будет: механика, скрипты, раскладка и зазоры,
   подобранные по чернилам. Последние блочные по природе — поправка
   зависит от кеглей двух соседних строк (D-094).
   Состояния (наведение, выбранное) тоже остаются в блоках: это их
   логика, а не свойство роли.

   Значения взяты из System/Standards/DESIGN_TOKENS.md, раздел
   «Сквозные роли и канонические значения», а НЕ вычиткой из блоков:
   вычитка перенесла бы сюда существующий дрейф.

   Решение: D-201. Источник правды этого файла — хранилище проекта.
   Правка здесь и правка в DESIGN_TOKENS.md — одно движение, не два.
   ════════════════════════════════════════════════════════════════════ */

:root {

  /* ── Гарнитуры ─────────────────────────────────────────────────── */
  --cb-font-heading: "Bounded", Arial, sans-serif;      /* заголовки */
  --cb-font-body: GrosVentre, Arial, sans-serif;        /* основной текст */

  /* ── ЦВЕТ · ДВА ЯРУСА, имена описывают РОЛЬ, а не внешность ────────
     До 12 августа роли назывались по цвету: --cb-dark, --cb-light.
     Из-за этого подвал — единственная тёмная плоскость сайта — не мог
     переопределить роли и заводил собственные имена, выпадая из системы
     целиком. Функциональные имена решают это так же, как режимы
     переменных в Figma: правила остаются общими, а область переопределяет
     значения ролей у себя. Любая будущая тёмная секция получается даром.

     ЧТО ЧЕМУ СООТВЕТСТВУЕТ:
       surface            — плоскость, на которой лежит блок
       on-surface         — первичный текст на этой плоскости
       on-surface-muted   — вторичный текст
       on-surface-faint   — погашенный текст и разделительные линии
       accent / on-accent — акцент и текст поверх акцентной заливки

     ── ЯРУС 1 · ПАЛИТРА ─────────────────────────────────────────────
     Сами пигменты. ЕДИНСТВЕННОЕ место во всём проекте, где стоит hex.
     Имена — по названиям из брендового макета, без номеров: у каждого
     тона одна ступень, номер сейчас не означал бы ничего. Появится
     второй оранжевый — тогда и появится ступень.

     Чтобы попробовать другой пигмент, правится строка ЗДЕСЬ — и меняется
     всё, что на него ссылается, на всех блоках и страницах разом.
     Чтобы поменять, какой пигмент играет роль, правится строка роли ниже;
     прежний пигмент при этом остаётся в палитре и не теряется. */
  --cb-navy: #21252C;         /* тёмно-синий · самый тёмный оттенок бренда
                                 переименован 16 августа из --cb-ink: имя
                                 называло роль, а вся палитра названа по
                                 цветам, и «ink» читалось как чёрный */
  --cb-orange: #EB7D39;       /* оранжевый · ключевой оттенок бренда */
  --cb-teal: #92BAC3;         /* пыльный бирюзовый · дополнительный оттенок бренда */
  --cb-milk: #FCFBFA;         /* молочно-белый */
  --cb-graphite: #818080;     /* графит */
  --cb-silver: #ADADAD;       /* серый · переименован 13 августа, прежде звался светло-серым */
  --cb-mist: #E0E0E0;         /* светло-серый · новая ступень, введена 13 августа */

  /* Точки градиентов из брендового макета. Отдельными пигментами, потому
     что могут понадобиться и поштучно. */
  --cb-navy-soft: #6E7B92;    /* верхняя точка тёмного градиента */
  --cb-orange-soft: #F9B894;  /* средняя точка оранжевого градиента */
  --cb-orange-pale: #FFDBC9;  /* верхняя точка оранжевого градиента */

  /* ЗАГОТОВКА, НЕ ПРИМЕНЯЕТСЯ. Решение Roman 12 августа: завести и ждать.
     Оба градиента в макете помечены «только для заголовков».
     Прежде чем применять, решить три вещи, каждая меняет результат:
       · направление — в макете оно не задано;
       · какие именно заголовки его получают;
       · поведение на тёмной плоскости — градиент НЕ переворачивается сам
         механикой плоскостей, его придётся задавать отдельной записью.
     Плюс сам приём: текст с градиентом рисуется обрезкой фона по буквам,
     у этого свои последствия для выделения мышью и для отката без поддержки. */
  --cb-grad-heading-navy: linear-gradient(180deg, var(--cb-navy), var(--cb-navy-soft));
  --cb-grad-heading-accent: linear-gradient(180deg, var(--cb-orange), var(--cb-orange-soft), var(--cb-orange-pale));

  /* ── ЯРУС 2 · РОЛИ ────────────────────────────────────────────────
     Что чем является. Hex здесь не пишется никогда — только ссылка
     на палитру выше. */
  --cb-surface: var(--cb-milk);                  /* плоскость, на которой лежит блок */
  --cb-on-surface: var(--cb-navy);                /* первичный текст */
  --cb-on-surface-muted: var(--cb-graphite);     /* вторичный текст */
  --cb-on-surface-faint: var(--cb-silver);       /* погашенный текст и линии */
  --cb-accent: var(--cb-orange);                 /* акцент */
  --cb-accent-2: var(--cb-teal);                 /* второй акцент · первое назначение
                                                    12 августа: наведение на кнопку
                                                    «Подробнее» в каталоге главной */
  --cb-on-accent: var(--cb-milk);                /* текст поверх акцентной заливки */
  /* Линии светлее погашенного текста: роль разведена 13 августа. Прежде обе
     сидели на #ADADAD, теперь линия уходит на новую ступень.
     ⚠ Контраст #E0E0E0 к молочному — 1.28:1. Формальный порог для
     графического элемента 3.0, то есть линия заведомо ниже него.
     Решение владельца, принято сознательно. */
  --cb-rule-color: var(--cb-mist);               /* цвет линий */

  /* Совместимость на время переезда. Блок, ещё не прошедший проход,
     продолжает работать на прежних именах и не требует срочной правки.
     Удалить, когда последний блок перейдёт на функциональные имена —
     проверяется скриптом audit_contract_gate.py, он помечает каждое
     использование псевдонима предупреждением. */
  --cb-dark: var(--cb-on-surface);
  --cb-light: var(--cb-surface);
  --cb-muted: var(--cb-on-surface-muted);
  --cb-faint: var(--cb-on-surface-faint);

  /* ── Типографическая шкала · D-088, потолки по D-096 ───────────────
     Интерполяция 420 → 1920. Выше верхнего якоря не масштабируется
     ничто (D-095), ниже нижнего значения удерживаются.
     D-роли самостоятельны: D2 означает «текст второго уровня»,
     а не «описание при H2». */
  --cb-h1-size: clamp(32px, calc(26.4000px + 1.33333vw), 52px);   /* H1 · единственный на странице */
  --cb-h2-size: clamp(26px, calc(20.4000px + 1.33333vw), 46px);   /* H2 · заголовок блока */
  --cb-h3-size: clamp(20px, calc(18.3200px + 0.40000vw), 26px);   /* H3 · заголовок пункта */
  --cb-d1-size: clamp(20px, calc(18.8800px + 0.26667vw), 24px);   /* D1 · текст первого уровня */
  --cb-d2-size: clamp(16px, calc(14.8800px + 0.26667vw), 20px);   /* D2 · текст второго уровня */
  --cb-d3-size: clamp(14px, calc(13.4400px + 0.13333vw), 16px);   /* D3 · текст третьего уровня */
  --cb-d4-size: clamp(12px, calc(11.4400px + 0.13333vw), 14px);   /* D4 · подписи и крошки · Light */

  /* ── Межстрочные ───────────────────────────────────────────────── */
  --cb-leading-heading: 1.2;   /* все заголовки */
  --cb-leading-descr: 1.1;     /* все описания */

  /* ── Трекинги ──────────────────────────────────────────────────── */
  --cb-h1-tracking: 0.06em;    /* H1 · оба первых экрана сведены 11 августа (D-099) */
  --cb-btn-tracking: 0.06em;   /* подпись кнопки · пока только HOME_HERO, кандидат */

  /* ── Охранная зона блока ───────────────────────────────────────────
     Горизонталь и вертикаль ВСЕГДА разными переменными, даже когда
     значения совпадают: мобильный часто требует асимметрии.
     Прежние --cb-pad-x / --cb-pad-y — та же роль с другими минимумами,
     приводятся к этим именам и значениям при переезде блока. */
  --cb-pad-inline: clamp(16px, calc(5.8462px + 2.82051vw), 60px);
  --cb-pad-block: clamp(32px, calc(22.7692px + 2.56410vw), 72px);

  /* ── Ритмы · сетка проекта, шаг 20 (D-093) ─────────────────────── */
  --cb-section-gap: clamp(32px, calc(25.5385px + 1.79487vw), 60px);  /* между смысловыми секциями */
  --cb-item-gap: clamp(16px, calc(12.7692px + 0.89744vw), 30px);     /* между однородными элементами */
  --cb-title-gap: clamp(8px, calc(6.1538px + 0.51282vw), 16px);      /* заголовок → его описание */

  /* ── Физические пороги · не масштабируются никогда ─────────────── */
  --cb-line-strong: 2px;   /* основная линия */
  --cb-line-hair: 1px;     /* тонкая линия */
  --cb-touch-min: 44px;    /* минимальная зона нажатия */

  /* ── Начертания ────────────────────────────────────────────────────
     Две ступени на весь проект. До 12 августа литералы 300/400 были
     переписаны в каждом блоке; сведены сюда вместе с ролями ниже.
     Кандидаты в контракт имён — подтвердить у Roman. */
  --cb-weight-rest: 300;     /* покой: описания, вторичный текст */
  --cb-weight-active: 400;   /* активное: заголовки, подписи кнопок */

}


/* ════════════════════════════════════════════════════════════════════
   ТИПОГРАФИЧЕСКИЕ РОЛИ · слой 2
   ────────────────────────────────────────────────────────────────────
   Здесь роль перестаёт быть только числом и становится оформлением
   целиком: гарнитура, кегль, начертание, межстрочный, трекинг.
   Блок больше не пишет типографику — он пишет только раскладку.

   КАК ПОДКЛЮЧИТЬ НОВЫЙ БЛОК: дописать его селектор в список нужной
   роли ниже. Больше ничего. Менять кегль, гарнитуру или начертание
   роли — здесь и только здесь, на всём сайте разом.

   ПОЧЕМУ СПИСКИ СЕЛЕКТОРОВ, А НЕ КЛАССЫ ВИДА .cb-h3.
   Разметку блоков рисует Tilda, своего класса мы на её узел не повесим
   без скрипта. Собственная система классов у Tilda есть — t-title,
   t-name, t-descr, t-text с модификаторами размера, — но на наши роли
   она не ложится: замер 12 августа показал, что t-name_xs несёт у нас
   18px в подвале и 12px в меню, наш H3 приезжает под тремя разными
   классами, а у заголовка карточки каталога и у обеих кнопок общего
   класса нет вовсе. Повесить роль на t-name_xl значит подписаться на
   то, что чужой блок с тем же классом заберёт наш кегль.

   ПОЧЕМУ СЕЛЕКТОРЫ ОСТАЛИСЬ ТЕМИ ЖЕ, ЧТО БЫЛИ В БЛОКАХ.
   Специфичность не изменилась ни на единицу, значит расстановка сил
   против родных правил Tilda прежняя — переезд не может ничего сломать
   в каскаде. Префикс .uc-* сохранён: правила не растекаются на блоки,
   которых мы не касались.

   ЦВЕТ РОЛИ ЧИТАЕТСЯ ЧЕРЕЗ --cb-text. Роль пишет не сам цвет, а
   `color: var(--cb-text, <цвет роли>) !important`. Переменная --cb-text
   НИГДЕ не объявлена по умолчанию — и именно поэтому работает запасное
   значение: пока блок молчит, роль красит сама.

   Зачем понадобилось. Замер живой страницы 12 августа: !important у цвета
   роли делал невозможным ЛЮБОЕ состояние блока. Заголовок выбранной плитки
   блока 3 не уходил в акцент, описание не темнело, заголовок формата не
   отзывался на наведение — правила стояли в файле, матчились и проигрывали
   собственному слою. Снять !important нельзя: Tilda задаёт цвет правилами
   с ID-селектором на 7 из 13 элементов, несущих роли (первый экран, обе
   карточки каталога, две строки процесса).

   Блок теперь меняет не `color`, а --cb-text на нужном элементе:
     .uc-cb-whyus .t908__item_active .t908__heading { --cb-text: var(--cb-accent) }
   Переменная объявляется НА САМОМ элементе, а не на его предке: иначе
   она унаследуется сразу и заголовком, и описанием, а им нужны разные цвета.
   Это ровно тот механизм, которым уже работают плоскости ниже, — и именно
   поэтому плоскости работали, а состояния нет.

   ЦВЕТ ЗДЕСЬ ЕСТЬ — но только умолчательный для роли. Замер 12 августа
   показал, что устойчивого умолчания у цвета нет так, как есть у кегля:
   он зависит от плоскости (заголовок карточки каталога светлый не потому,
   что H3 светлый, а потому что под ним фотография) и от состояния
   (у блока 3 три ступени контраста на одну роль). Поэтому плоскость
   решается слоем 3, а состояние остаётся в блоке и переопределяет роль.

   ЧЕГО ЗДЕСЬ НЕТ. Собственная шкала подвала --cb-foot-* и номер шага
   процесса --cb-num-size — это не контрактные роли.
   Кнопка каталога берёт свой --cb-btn-size вместо D4 вопреки D-096 —
   долг, правится своим проходом, не здесь.
   ════════════════════════════════════════════════════════════════════ */

/* H1 · единственный заголовок страницы.
   Верхний регистр — часть роли, как у H3: он не должен зависеть от того,
   как текст набран в панели Tilda.
   На странице товара кегль роли переопределён самим блоком: имя изделия
   тянется по ширине колонки. Переменная объявлена там на самом заголовке,
   поэтому это правило подхватывает её без спора о специфичности. */
.uc-cb-first .t1241__title,
.uc-cb-product-first .t997__title {
  color: var(--cb-text, var(--cb-on-surface)) !important;
  font-family: var(--cb-font-heading) !important;
  font-size: var(--cb-h1-size) !important;
  font-weight: var(--cb-weight-active) !important;
  line-height: var(--cb-leading-heading) !important;
  letter-spacing: var(--cb-h1-tracking);
  text-transform: uppercase;
}

/* H2 · заголовок блока и название модели в каталоге.
   Название модели переведено с H3 на H2 решением Roman 12 августа:
   карточка каталога занимает треть экрана и по весу равна секции.
   Название формата сюда НЕ входит: поднималось 12 августа и в тот же
   день возвращено на H3 — в ряду из трёх карточек H2 спорил по весу
   с заголовками соседних секций.

   ⚠️ Имя изделия в попапе переведено сюда с H1 15 августа — сверкой кеглей
   с Figma, не глазом. В макете оно набрано 46-м, то есть ровно потолком H2;
   стояло на H1 и давало 52. Ошибка была невидима на глаз и видна замером:
   шапка попапа занимала вдвое больше доли, чем в макете, и тянула за собой
   всю раскладку колонки. Верхний регистр здесь нужен так же, как в H1, но
   даёт его сам блок — заголовок приходит из поля товара как есть. */
.uc-product-catalog .cb-pop__name,
.uc-cb-whyus .t-section__title,
.uc-cb-order-path .t-section__title,
.uc-cb-catalog .t-card__title {
  color: var(--cb-text, var(--cb-on-surface)) !important;
  font-family: var(--cb-font-heading) !important;
  font-size: var(--cb-h2-size) !important;
  font-weight: var(--cb-weight-active) !important;
  line-height: var(--cb-leading-heading) !important;
}

/* H3 · заголовок пункта.
   Оформление совпадало дословно во всех местах — сведены без оговорок.
   ВЕРХНИЙ РЕГИСТР — часть роли, решение Roman 12 августа: чтобы регистр
   не зависел от того, как текст набран в панели Tilda. Замер того же дня:
   восемь заголовков из одиннадцати уже набраны прописными вручную, три
   заголовка форматов — строчными. Правило приводит их к одному виду и
   снимает возможность разъехаться при следующей правке текста. */
.uc-cb-whyus .t908__heading,
.uc-cb-order-path .t1106__title,
.uc-cb-formats .t-card__title,
.uc-cb-product-first .t997__card-title {
  color: var(--cb-text, var(--cb-on-surface)) !important;
  font-family: var(--cb-font-heading) !important;
  font-size: var(--cb-h3-size) !important;
  font-weight: var(--cb-weight-active) !important;
  line-height: var(--cb-leading-heading) !important;
  text-transform: uppercase;
}

/* D1 · текст первого уровня.
   Описание карточки каталога переведено сюда решением Roman 12 августа:
   D2 оказался мелковат на широкой карточке. Начертание остаётся Light. */
.uc-cb-first .t1241__descr,
.uc-cb-catalog .t-card__descr,
.uc-cb-product-first .t997__descr {
  color: var(--cb-text, var(--cb-on-surface)) !important;
  font-family: var(--cb-font-body) !important;
  font-size: var(--cb-d1-size) !important;
  font-weight: var(--cb-weight-rest) !important;
  line-height: var(--cb-leading-descr) !important;
}

/* D1 в заголовочной одежде · подпись «ПОДРОБНЕЕ» поверх кадра форматов.
   От роли берётся только кегль. Гарнитура заголовочная, начертание Regular,
   регистр верхний — решение Roman 12 августа: подпись равняется на кнопку
   каталога, чтобы два одинаковых по смыслу призыва не выглядели разной
   типографикой. Тот же приём, что у метрики первого экрана ниже:
   D-роль задаёт размер и не обязывает к гарнитуре (D-088).
   Селектор бьёт по псевдоэлементу: в разметке T688 кнопки нет вовсе,
   надпись рисуется блоком. Цвет приходит плоскостью «поверх фотографии».
   Кегли двух подписей пока расходятся — 24 здесь против 16 в каталоге:
   каталог сидит на внеконтрактном --cb-btn-size, это отдельный долг. */
.uc-cb-formats .t688__img-wrapper::before {
  color: var(--cb-text, var(--cb-on-surface));
  font-family: var(--cb-font-heading);
  font-size: var(--cb-d1-size);
  font-weight: var(--cb-weight-active);
  line-height: var(--cb-leading-descr);
  text-transform: uppercase;
}

/* Цена попапа · D1 в заголовочной одежде, но межстрочный заголовочный —
   поэтому отдельной записью, а не в списке выше: там подпись «ПОДРОБНЕЕ»
   с межстрочным описания, и объединять их значило бы навязать одному из
   двух чужой ритм.

   ⚠️ Переведена сюда с H3 15 августа сверкой кеглей с Figma: в макете цена
   набрана 24-м, потолком D1, а стояла на H3 и давала 26.

   Три носителя, и все три обязательны. Знак валюты — отдельный родной узел:
   без правила он брал свои 18 против 26 у числа, в одной строке. Обёртка
   несёт родной межстрочный 1.35 — из-за неё подвал был выше макета на пять
   пикселей сверх того, что объясняется обрезкой Figma. */
.uc-product-catalog .cb-pop__price .js-product-price,
.uc-product-catalog .cb-pop__price .js-catalog-prod-price {
  color: var(--cb-text, var(--cb-on-surface)) !important;
  font-family: var(--cb-font-heading) !important;
  font-size: var(--cb-d1-size) !important;
  font-weight: var(--cb-weight-active) !important;
  line-height: var(--cb-leading-heading) !important;
}

/* D2 в заголовочной одежде · имя варианта и его надбавка.
   ⚠️ Имя и цена — ОДНА ступень и одна гарнитура, решение Roman 16 августа.
   Это две половины одного утверждения: «что беру» и «сколько это стоит».
   Разведи их по кеглю — и цена превратится в сноску, хотя она половина
   решения о покупке.

   Прописные и Bounded: имя варианта — короткая метка выбора, а не фраза.
   Ступень уточнена с D1 на D2 тем же решением: на D1 строка выбора
   спорила по весу с ценой в подвале, а она подчинена ей по смыслу. */
.uc-product-catalog .cb-pop__opt-name,
.uc-product-catalog .cb-pop__opt-plus {
  color: var(--cb-text, var(--cb-on-surface)) !important;
  font-family: var(--cb-font-heading) !important;
  font-size: var(--cb-d2-size) !important;
  font-weight: var(--cb-weight-active) !important;
  line-height: var(--cb-leading-heading) !important;
  text-transform: uppercase;
}

/* D3 в телесной одежде · состав варианта.
   Ступенью ниже имени и другой гарнитурой: состав — предложение, а не метка,
   и читается он иначе. Строчные обязательны — прописные Bounded и Gros Ventre
   между собой неразличимы (см. характеристики).
   Цвет — графит: состав поясняет имя, а не спорит с ним за внимание. */
.uc-product-catalog .cb-pop__opt-descr {
  color: var(--cb-text, var(--cb-on-surface-muted)) !important;
  font-family: var(--cb-font-body) !important;
  font-size: var(--cb-d3-size) !important;
  font-weight: var(--cb-weight-rest) !important;
  line-height: var(--cb-leading-descr) !important;
  text-transform: lowercase;
}

/* D4 · знак валюты.
   ⚠️ Разведён с числом 16 августа решением Roman. Прежде оба стояли на D1,
   и «59 990 ₽» читалось как шестизначное число: знак одного кегля и одного
   веса с цифрами склеивается с ними в общий разряд. Две ступени вниз и
   графит вместо основного цвета возвращают ему роль подписи при числе.
   Подъём знака к верхней линии цифр — композиция, он остаётся в блоке. */
.uc-product-catalog .cb-pop__price .t-catalog__prod-popup__price-currency {
  color: var(--cb-text, var(--cb-on-surface-muted)) !important;
  font-family: var(--cb-font-heading) !important;
  font-size: var(--cb-d4-size) !important;
  font-weight: var(--cb-weight-active) !important;
  line-height: var(--cb-leading-heading) !important;
}

/* D2 · текст второго уровня.
   12 августа сюда переведены описание плитки блока 3 и описание карточки
   форматов: на D3 они читались мелко на широком экране. Тем же днём и по
   тому же поводу — подпись метрики первого экрана и текст шага процесса:
   на десктопе D3 давал 16px и переставал читаться. Ниже 1920 подпись
   вырастет с 14 на 16 — направление то же, отдельного правила под десктоп
   не заводим, роль одна на все ширины. */
.uc-product-catalog .cb-pop__descr,
.uc-cb-whyus .t-section__descr,
.uc-cb-whyus .t908__descr,
.uc-cb-formats .t-card__descr,
.uc-cb-first .cb-first__metric-label,
.uc-cb-order-path .t1106__text {
  color: var(--cb-text, var(--cb-on-surface-muted)) !important;
  font-family: var(--cb-font-body) !important;
  font-size: var(--cb-d2-size) !important;
  font-weight: var(--cb-weight-rest) !important;
  line-height: var(--cb-leading-descr) !important;
}

/* D2 в заголовочной одежде · по правилу D-088: D-роль задаёт размер и не
   обязывает к гарнитуре. Здесь два носителя.

   Значение метрики первого экрана — прежний носитель.

   ⚠️ Названия переключателей попапа переведены сюда с D1 15 августа сверкой
   кеглей с Figma: в макете они набраны 20-м, то есть потолком D2, а стояли
   на D1 и давали 24. У ошибки было видимое следствие — слово ДОСТАВКА не
   помещалось в свою четверть ряда, таб раздвигался на три пикселя и
   переполнял колонку, а за ней панель. Цвет приходит от блока состоянием
   (--cb-state-ink), поэтому здесь не задаётся. */
.uc-cb-first .cb-first__metric-value {
  color: var(--cb-text, var(--cb-on-surface)) !important;
  font-family: var(--cb-font-heading) !important;
  font-size: var(--cb-d2-size) !important;
  font-weight: var(--cb-weight-active) !important;
  line-height: var(--cb-leading-heading) !important;
  text-transform: uppercase;
}

/* D1 в заголовочной одежде · названия переключателей попапа.
   ⚠️ ВЕРНУЛИСЬ на D1 19 августа по трём листам Figma (D-244): 24 на 1920,
   20 на 1440, 16 на 420. Отделены от метрики первого экрана, с которой делили
   правило, — иначе главная поехала бы вместе с попапом.

   Прежняя причина перевода на D2 15 августа снята обстоятельствами: ряд
   переполнялся словом ДОСТАВКА при равных четвертях, но доставка убрана из
   карточки (D-238), табов стало три, и ряд идёт по ширине содержимого.
   Значения ступеней в области попапа задаёт сам блок плоскостью — здесь
   объявлена только роль. Цвет приходит от блока состоянием (--cb-state-ink). */
.uc-product-catalog .cb-pop__tab-name {
  color: var(--cb-text, var(--cb-on-surface)) !important;
  font-family: var(--cb-font-heading) !important;
  font-size: var(--cb-d1-size) !important;
  font-weight: var(--cb-weight-active) !important;
  line-height: var(--cb-leading-heading) !important;
  text-transform: uppercase;
}

/* D3 · текст третьего уровня.
   Роль осталась без носителей 12 августа, когда подпись метрики и текст
   шага процесса ушли в D2, и вернулась 13-го вместе со страницей товара.
   Описание карточки характеристики — кандидат на D2 по тому же доводу,
   что сработал на главной (D3 мелковат на широком экране), но это отдельное
   решение Roman: здесь текст лежит поверх фотографии и ведёт себя иначе. */
.uc-cb-product-first .t997__card-desc {
  color: var(--cb-text, var(--cb-on-surface-muted)) !important;
  font-family: var(--cb-font-body) !important;
  font-size: var(--cb-d3-size) !important;
  font-weight: var(--cb-weight-rest) !important;
  line-height: var(--cb-leading-descr) !important;
}

/* D3 в заголовочной одежде · служебные подписи попапа.
   По правилу D-088: D-роль задаёт размер и не обязывает к гарнитуре.

   ⚠️ Носителей было четыре, осталось два: название и значение свойства
   ушли отсюда в D2 телесной гарнитуры 16 августа, вместе со сменой регистра
   на строчный. Здесь остались модель и номер переключателя.
   История перевода сюда 15 августа: все четверо стояли на телесной
   гарнитуре в начертании Light, а в макете набраны Bounded Regular.
   Расхождение по кеглю
   было нулевым, поэтому предыдущая сверка его не увидела: она сравнивала
   размер и цвет, но не гарнитуру и не начертание. Отсюда правило — у текста
   сверяются ВСЕ шесть свойств, а не те, что научились сверять (D-217).

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

   ⚠️ Гарнитура и начертание вынесены В ИНДИРЕКЦИЮ — --cb-face и
   --cb-face-weight, — по той же причине, по какой в индирекции живёт цвет.
   Роль объявляет их с !important, и блок, попытавшийся сменить гарнитуру
   у себя, проигрывает каскад при любой специфичности. Мобильная композиция
   попапа ставит свойствам телесную гарнитуру в Light: строчный регистр,
   утверждённый 16 августа, читается на телефоне только так — прописные
   двух гротесков между собой неразличимы. Значение по умолчанию оставлено
   прежним, поэтому десктоп не двигается. */
.uc-product-catalog .cb-pop__num {
  color: var(--cb-text, var(--cb-on-surface-muted)) !important;
  font-family: var(--cb-face, var(--cb-font-heading)) !important;
  font-size: var(--cb-d3-size) !important;
  font-weight: var(--cb-face-weight, var(--cb-weight-active)) !important;
  line-height: var(--cb-leading-heading) !important;
}

/* D3 в телесной одежде · модель изделия над именем.
   ⚠️ Отделена от номера таба 19 августа: по всем трём листам модель набрана
   Gros Ventre, а номер остаётся Bounded. Делить одно правило они больше не
   могут. Это разворот части паспорта от 15 августа, где модель перевели на
   заголовочную с формулировкой «в макете они набраны Bounded»: тогда лист был
   один, теперь их три и они сверены между собой.

   ⚠️ Кегль читается через --cb-model-size с откатом на ступень D3. На обоих
   десктопах модель идёт ровно по D3, но на 420 она остаётся 14, когда D3
   уходит в 12: модель в группе «прочие», а номер таба и кнопка — в «несущих»,
   и общую ступень они делят только на широких экранах. Индирекция нужна,
   чтобы блок подставил величину, не объявляя роль у себя. */
.uc-product-catalog .cb-pop__model {
  color: var(--cb-text, var(--cb-on-surface-muted)) !important;
  font-family: var(--cb-font-body) !important;
  font-size: var(--cb-model-size, var(--cb-d3-size)) !important;
  font-weight: var(--cb-weight-active) !important;
  line-height: var(--cb-leading-heading) !important;
}

/* D2 в телесной одежде · характеристики попапа.
   ⚠️ Переведены сюда с D3 решением Roman 16 августа: «должно быть точно
   такое же, как у описания». Описание набрано D2 телесной гарнитурой, и
   характеристики — тот же уровень чтения, а не служебная подпись.
   Вместе с этим они ушли из заголовочной одежды: прописные Bounded и
   Gros Ventre неразличимы между собой, разница гарнитур в 16% по ширине
   читается только в строчных, а строчными их и набирают с 16 августа.

   Начертание в индирекции: название идёт в Light, значение в Regular —
   различие уровней внутри одной строки. Роль объявляет вес с !important,
   и блок, меняющий его у себя, проигрывает каскад. */
.uc-product-catalog .cb-pop__row-name,
.uc-product-catalog .cb-pop__row-value {
  color: var(--cb-text, var(--cb-on-surface-muted)) !important;
  font-family: var(--cb-font-body) !important;
  font-size: var(--cb-d2-size) !important;
  font-weight: var(--cb-face-weight, var(--cb-weight-rest)) !important;
  line-height: var(--cb-leading-descr) !important;
}

/* D4 · служебная подпись.
   ⚠️ Сводка выбранного в попапе — КОМФОРТ · FORMULA · ПВЗ — переведена сюда
   с D3 15 августа: в макете она набрана 14-м, потолком D4, а стояла на D3
   и давала 16, то есть равнялась по весу с названиями свойств. Сводка —
   не свойство, а напоминание о собранном; равный вес стирал эту разницу.

   ⚠️ Начертание Regular, а не Light: именованный стиль макета «Site/Discription/
   D - 4» объявляет weight 400. Роль до 15 августа давала 300 — сводка выходила
   бледнее макетной при верном кегле и верном цвете. */
.uc-product-catalog .cb-pop__meta-item,
.uc-product-catalog .cb-pop__meta-dot {
  color: var(--cb-text, var(--cb-on-surface-muted)) !important;
  font-family: var(--cb-font-body) !important;
  font-size: var(--cb-d4-size) !important;
  font-weight: var(--cb-weight-active) !important;
  line-height: var(--cb-leading-descr) !important;
}

/* Подпись кнопки первого экрана · роль D3, поднята с D4 решением Roman
   12 августа: на десктопе D4 читался мелко. Начертание прежнее.
   Межстрочный намеренно не задан: подпись центрируется флексом, и замер
   показал, что line-height на неё не влияет. */
.uc-cb-first .t1241__buttons .t-btn {
  font-family: var(--cb-font-body) !important;
  font-size: var(--cb-d3-size) !important;
  font-weight: var(--cb-weight-active) !important;
  letter-spacing: var(--cb-btn-tracking) !important;
  text-transform: uppercase;
}

/* Подпись кнопки попапа · роль D3, гарнитура заголовочная — в макете кнопка
   набрана Bounded 16, то есть потолком D3. Правила не было вовсе, и кнопка
   брала родные 14 платформы; сверка кеглей 15 августа это показала.
   Своей записи не избежать: подпись кнопки первого экрана набрана телесной,
   и подпись «ПОДРОБНЕЕ» из форматов — D1, а не D3.

   ⚠️ Начертание и межстрочный названы ЯВНО: у родной кнопки Tilda они 600
   и 1.4, и без этих двух строк паспорт узла расходился с макетом при верном
   кегле и верной гарнитуре. Ровно тот класс расхождений, ради которого
   заведён паспорт из шести свойств (D-217). */
/* ⚠️ Цвет подписи ЗАКРЕПЛЁН РОЛЬЮ, а не оставлен платформе. До 20 августа
   он приходил из настроек блока Tilda: на боевой белый, в фикстуре — чёрный
   по умолчанию, то есть контракт им не владел вовсе. Лист даёт #FCFBFA, и
   это ровно роль «текст поверх акцентной заливки». */
.uc-product-catalog .cb-pop__act > .t-btn {
  color: var(--cb-on-accent) !important;
  font-family: var(--cb-font-heading) !important;
  font-size: var(--cb-d3-size) !important;
  font-weight: var(--cb-weight-active) !important;
  line-height: var(--cb-leading-heading) !important;
  letter-spacing: var(--cb-btn-tracking) !important;
  text-transform: uppercase;
}

/* Возврат «← К КАТАЛОГУ» · роль D3, телесная гарнитура регулярного
   начертания, верхний регистр. Назначено Roman 20 августа и подтверждено
   листом 1920: узел ссылки на листе набран Gros Ventre 16 — то же
   назначение, что у модели изделия внутри попапа.

   ⚠️ РЕГИСТР ОБЪЯВЛЕН ЯВНО И С !important. Платформа набирает эту ссылку
   строчными собственным правилом, и текст «К КАТАЛОГУ», который скрипт
   проставляет вместо родного «More products», выводился как «к каталогу»:
   строка в разметке была верной, на экране — нет.

   ⚠️ Правило пишется отдельной записью, потому что узел живёт СНАРУЖИ
   панели: под `.cb-pop` он не попадает, и ни одна из ролей попапа его не
   достаёт. Обе половины названы — обёртка и сам текст: стрелка приходит
   от платформы отдельным узлом и должна встать в тот же кегль. */
.uc-product-catalog .t-catalog__prod-popup__close-txt-wr,
.uc-product-catalog .t-catalog__prod-popup__close-txt {
  font-family: var(--cb-font-body) !important;
  font-size: var(--cb-d3-size) !important;
  font-weight: var(--cb-weight-active) !important;
  line-height: var(--cb-leading-descr) !important;
  text-transform: uppercase !important;
}


/* ════════════════════════════════════════════════════════════════════
   ПЛОСКОСТИ · слой 3
   ────────────────────────────────────────────────────────────────────
   Область переопределяет значения ролей у себя — правила при этом
   остаются общими. Это ровно режимы переменных из Figma.
   Новая тёмная секция подключается одной такой записью.

   БЛАГОДАРЯ ЭТОМУ блок не выбирает цвет. Он объявляет, на какой он
   плоскости, а цвет роли приходит из слоя выше. Исключение — состояния:
   «в покое приглушён, при наведении в акцент» — это логика блока,
   она остаётся у блока и переопределяет роль на своей области.
   ════════════════════════════════════════════════════════════════════ */

/* Карточка каталога · плоскость «поверх фотографии».
   Замер живой страницы 12 августа: заголовок, описание и подпись кнопки
   отрисованы одним и тем же #fcfbfa. Вторичный текст здесь НЕ приглушается —
   поверх фотографии контраст и так хрупкий, и вторая ступень его добила бы.
   Поэтому на этой плоскости muted совпадает с on-surface, и это не дрейф,
   а свойство плоскости.
   --cb-surface здесь не задаётся: плоскость — сама фотография. */
.uc-cb-catalog .t694__cell {
  --cb-on-surface: var(--cb-milk);
  --cb-on-surface-muted: var(--cb-milk);
}

/* Первый экран страницы товара · плоскость «поверх фотографии».
   Весь текст экрана лежит на затемнённом снимке, поэтому вторичный
   не приглушается: контраст там и так держится градиентом, а вторая
   ступень его добила бы. Тот же расклад, что у карточки каталога. */
.uc-cb-product-first {
  --cb-on-surface: var(--cb-milk);
  --cb-on-surface-muted: var(--cb-milk);
}

/* Попап карточки товара · плоскость плотного набора.
   Решение Roman 15 августа: межстрочный обеих ролей прижат к единице.

   Зачем именно так. Макет держит границу текста по капители, браузер —
   по line-box, и всякое отношение больше единицы добавляет к высоте блока
   половину разницы сверху и столько же снизу. При отношении 1 строка равна
   кеглю. Замер до и после: лишок высоты на кегль был разбросан 0.46…0.75
   и стал 0.39…0.45 на всех четырёх блоках — то есть посторонние источники
   расхождения ушли, осталась только разница систем измерения.

   Это переопределение ЗНАЧЕНИЙ ролей в области, а не своя типографика:
   правила остаются общими, и потому запись живёт здесь, а не в блоке.

   ⚠ Цена решения: описание попапа рассчитано на одну строку. Если владелец
   впишет туда абзац, строки склеятся — тогда --cb-leading-descr вернуть
   на роль и пересверить высоты. */
.uc-product-catalog .cb-pop {
  --cb-leading-heading: 1;
  --cb-leading-descr: 1;
}

/* Кадр карточки форматов · та же плоскость «поверх фотографии».
   Объявляется на обёртке кадра, а не на карточке: текст под кадром
   лежит на обычной светлой плоскости и инверсии не получает. */
.uc-cb-formats .t688__img-wrapper {
  --cb-on-surface: var(--cb-milk);
}

/* Подвал · единственная тёмная плоскость сайта.
   Вторичный текст не инвертируется: #818080 читается и на светлом,
   и на тёмном — проверено замером контраста при сборке подвала. */
.uc-cb-footer {
  --cb-surface: var(--cb-navy);
  --cb-on-surface: var(--cb-milk);
  --cb-on-surface-muted: var(--cb-graphite);
  --cb-on-surface-faint: var(--cb-silver);
}