/* Наши правки поверх слоя редизайна.
 *
 * Отдельным файлом, а не строкой в assets/redesign/*.css: те файлы
 * приходят от заказчика целиком, и при следующей передаче дизайна любая
 * правка внутри них потерялась бы. Здесь же только то, что чинит стык
 * нашей вёрстки с его слоем.
 *
 * И не в resources/css/app.css: тот проходит через сборку Vite, а слой
 * редизайна подключается после неё и перебил бы правку.
 */

/* Кнопки карусели прижаты к краям служебной полосы, а сама секция
   обрезает всё, что за них выходит (.cp-hero { overflow: hidden }).
   Общая обводка фокуса с отступом наружу срезается по краям, и от неё
   остаётся П-образный след поперёк вкладки. Внутри кнопки она целая. */
.cp-slide-tab:focus-visible,
.cp-slider-arrows button:focus-visible {
    outline-offset: -2px;
}

/* Кнопка паузы в карусели. Значки лежат в разметке оба, видимый выбирает
   aria-pressed: строковые «Ⅱ» и «▶» браузер показывал эмодзи — синим
   квадратом с белым треугольником, поперёк всему оформлению строки. */
.cp-slider-arrows [data-pause] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cp-slider-arrows [data-pause] svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.cp-slider-arrows [data-pause] .cp-icon-play,
.cp-slider-arrows [data-pause][aria-pressed="true"] .cp-icon-pause {
    display: none;
}

.cp-slider-arrows [data-pause][aria-pressed="true"] .cp-icon-play {
    display: block;
}

/* Футер. Слой редизайна перекрашивает его в светлый:
 *
 *     site.css      footer { background: #1c232d !important }   тёмный
 *     editorial.css footer { background: #f5f5f7 !important }   светлый
 *
 * editorial.css подключается после site.css и побеждает, а разметка осталась
 * от тёмного футера — на элементах висят text-white и text-white/40…75.
 * Белый текст на белом фоне не виден. Перекрашиваем его под ту палитру,
 * в которую редизайн покрасил сам футер.
 */
footer .text-white {
    color: #1d1d1f !important;
}

footer [class*="text-white/"] {
    /* Было #72727a — 4.4:1 на светлом футере, чуть ниже порога читаемости
       для текста такого кегля. */
    color: #6c6c74 !important;
}

/* Разделители и рамки оттуда же — на светлом фоне белые линии пропадают. */
footer [class*="border-white/"] {
    border-color: rgba(29, 29, 31, 0.12) !important;
}

footer [class*="bg-white/"] {
    background-color: rgba(29, 29, 31, 0.08) !important;
}

/* ── Вторичный текст: контраст ────────────────────────────────────
 *
 * Слой редизайна набирает подписи, лиды и служебные строки тремя
 * оттенками серого — #777780, #72727a и #85858d. На своих же фонах
 * (#f5f5f7 и белом) они дают 4.4:1, 4.4:1 и 3.4:1, то есть ни один
 * не дотягивает до 4.5:1, с которых текст считается читаемым. Разница
 * между «почти» и «достаточно» здесь — три деления яркости: цвет
 * остаётся тем же серым, а подписи перестают выцветать на солнце
 * и на дешёвых матрицах.
 */
.lede,
.text-ink-faint,
.cp-section-heading > p:last-child:not(.cp-kicker),
.cp-section-heading .cp-kicker,
.cp-direction-card .editorial-brand-name,
.editorial-company p:not(.cp-kicker),
.editorial-welcome > p:last-child,
.cp-about-hero p:not(.cp-kicker),
.cp-film > p,
.experience-step > p:not(.cp-kicker),
.experience-next a > span {
    color: #6c6c74;
}

/* Подпись направления лежит на бежевой карточке крафта (#efe5dc),
   а она светлее общего фона: тому же серому там не хватает ещё
   трёх делений. */
.cp-direction-card .editorial-brand-name,
.editorial-brand-name {
    color: #64646b;
}

/* Тёмные секции и крафт трогать не нужно: у слоя редизайна для них свои
 * правила, и все они специфичнее односоставных селекторов выше —
 * `.on-deep .lede`, `body[data-brand=craft] main .text-ink-faint`
 * и подобные перебивают эту правку сами.
 */

/* ── Фон страницы против фона карточек ────────────────────────────
 *
 * Слой редизайна строит всю глубину на одной паре: полотно белое,
 * а всё, что лежит на нём карточкой, — светло-серое #f5f5f7. Так
 * покрашены карточки направлений, плитки каталога, карточки клиентов
 * и оборудования, шапка раздела, служебная полоса и футер.
 *
 * Но у нашего <body> висит теттвиндовский класс `bg-paper`, а его
 * тот же editorial.css переопределяет в `.bg-paper{background:#f5f5f7}`.
 * Односоставный селектор класса бьёт `body{background:#fff}` — и полотно
 * получает ровно тот цвет, которым отличаются от него карточки. В итоге
 * ни одной из них не видно: карточка Centris Print в тройке направлений
 * читалась как дыра между зелёной и бежевой соседками, а плитки каталога
 * и вовсе теряли края.
 *
 * Возвращаем полотну белый — тот, что редизайн и задумывал.
 */
body.bg-paper {
    background: #fff;
}

/* У Craft полотно тёмное. Слой редизайна красит в тёмно-коричневый
 * `main .bg-paper` — но класс `bg-paper` висит не на <main>, а на <body>,
 * и правило не срабатывало ни разу. Полотно оставалось светлым, а весь
 * текст раздела рядом с ним набран бежевым #ffedd7 «под тёмное»:
 * заголовок «Найдите свой формат.» читался как выцветшее пятно
 * с контрастом 1.3:1. Возвращаем ту подложку, под которую цвет текста
 * и подбирали.
 */
body[data-brand="craft"].bg-paper {
    background: #241910;
}

/* Карточка материнского бренда — единственная из трёх без своего оттенка.
 * Пока полотно совпадало с ней цветом, она была невидима; теперь белая
 * карточка на белом полотне тоже нуждается в опоре, и ей достаётся
 * тот самый серый, которым выкрашены все прочие плитки. */
.cp-direction-card.theme-print {
    background: #f5f5f7 !important;
}

/* ── Подложка снимка в плитках каталога ───────────────────────────
 *
 * Подложка объявлена квадратной (`aspect-ratio: 1/1`), но снимок внутри
 * лежит обычным потоком, и `min-height: auto` разрешает ему растянуть
 * её под себя. Из-за этого вертикальный кадр — например, «Ритейл
 * и магазины» — делал свою плитку на 30 пикселей выше соседних,
 * и заголовки в ряду переставали стоять на одной линии.
 *
 * Слой редизайна это уже пытался чинить (`body main .shot>img.product-cutout
 * {width:100%;height:100%;inset:0}`), но забыл про `position: absolute`:
 * без него `inset` не действует, а процентная высота не к чему привязаться.
 */
.editorial-card-grid .shot.product-cutout-stage {
    min-height: 0;
}

.editorial-card-grid .shot.product-cutout-stage > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ── Кнопка «Запросить расчёт» в разделе Craft ────────────────────
 *
 * site.css заливает кнопку фирменным цветом суб-бренда и пишет по нему
 * белым. У Cup это тёмно-зелёный, и белый по нему читается. У Craft же
 * `--cp-accent` — светлый беж #d4b298: белым по нему выходит 1.98:1,
 * то есть надписи на главной кнопке раздела попросту не видно.
 *
 * В самом разделе тот же catalogue.css уже пишет по бежевому тёмным
 * (`main .btn-primary{background:#efd9c6;color:#382416}`) — распространяем
 * эту же пару на шапку, чтобы кнопка не меняла правила на полпути.
 */
body[data-brand="craft"] .btn-primary,
body[data-brand="craft"] .btn-accent,
body[data-brand="craft"] .cp-button {
    color: #382416;
}


/* ══ Шапка сайта ══════════════════════════════════════════════════
 *
 * Тёмная шапка цвета раздела — одна на весь сайт. Раньше так выглядела
 * только страница Cup, и переход на неё из любого другого раздела
 * читался как переход на другой сайт.
 *
 * Цвет берётся из атрибута `data-brand` на body: он и так проставлен
 * ради палитры (см. redesign/site.css), и заводить второй источник
 * той же истины незачем.
 */

header {
    --cp-header-bg: #1d2432;
}

body[data-brand="cup"] header {
    --cp-header-bg: #1e6b4c;
}

body[data-brand="craft"] header {
    --cp-header-bg: #3a2a20;
}

/* `!important` вынужденный: фон шапки задан с ним же сразу в двух файлах
   редизайна — site.css и editorial.css. */
header {
    background: var(--cp-header-bg) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
    /* Мягкая тень вместо волосяной линии: под шапкой начинается светлая
       бумага страницы, и линия на стыке выглядела швом. */
    box-shadow: 0 10px 30px -24px rgba(0, 0, 0, 0.85);
}

/* Служебной строки сверху нет: над тёмной шапкой она читалась второй
   шапкой. Семья брендов из неё никуда не делась — заголовки разделов
   в выпадающем меню «Продукция» ведут туда же. */
.cp-utility {
    display: none;
}

/* Надписи — белым. Выпадающие панели исключены: они на белом фоне,
   и белый текст в них пропал бы. Тем же правилом накрыто и мобильное
   меню — оно тоже на белом. */
/* Селектор начинается с `body[data-brand]` не для красоты: ссылки
   размечены классами Tailwind (`text-ink-muted`, `text-ink-faint`), а класс
   всегда весомее имени тега. Без атрибута в начале правило проигрывало им,
   и часть пунктов оставалась серой на тёмном фоне. */
body[data-brand] header :is(a, button, span, strong) {
    color: #fff;
}

body[data-brand] header .bg-white,
body[data-brand] header .bg-white :is(a, button, span, strong, h3, p) {
    color: var(--cp-ink);
}

/* Пункты меню приглушены, наведённый — в полную силу. Ровный белый
   на всех делал строку плоской: глазу не за что зацепиться. */
/* Пункты меню приглушены, наведённый — в полную силу. Ровный белый
   на всех делал строку плоской: глазу не за что зацепиться. Сюда же
   идут и простые ссылки верхнего уровня — «О компании», «Наши работы»,
   «Контакты»: они соседи по строке и выделяться не должны. */
body[data-brand] header > .shell > nav > div > button,
body[data-brand] header > .shell > nav > a,
body[data-brand] header a[href^="tel:"] {
    color: rgba(255, 255, 255, 0.78);
    transition: color 0.25s ease;
}

body[data-brand] header > .shell > nav > div > button:hover,
body[data-brand] header > .shell > nav > a:hover,
body[data-brand] header a[href^="tel:"]:hover {
    color: #fff;
}

/* Кнопка расчёта — та же прямая ссылка в строке, но приглушать её нельзя:
   это целевое действие. */
body[data-brand] header > .shell > nav > a.btn-primary {
    color: var(--cp-header-bg);
}

/* Отбивка под текущим языком — фирменным оранжевым; на тёмном он
   читается случайным пятном. Ведём белым. */
body[data-brand] header [aria-current="true"],
body[data-brand] header .text-accent,
body[data-brand] header .border-accent {
    color: #fff;
    border-color: #fff;
    /* Подчёркивание под текущим языком нарисовано фирменным оранжевым
       через `decoration-accent` — на тёмном оно светилось само по себе. */
    text-decoration-color: #fff;
}

/* ── Выбор языка ─────────────────────────────────────────────────
 *
 * Кнопка с флагом и кодом текущего языка, под ней список. Цвет кнопки
 * на десктопе — общий с пунктами меню (правило `nav > div > button` выше),
 * здесь только геометрия. Список на белом, поэтому цвета ему заданы явно:
 * иначе правило «в шапке всё белое» перекрасило бы и его. Селекторы
 * с `body[data-brand] header` — чтобы быть весомее того правила.
 *
 * Шрифт основной, а не моноширинный: коды и названия языков набраны
 * тем же Onest, что и соседние пункты меню. */
.lang-menu {
    position: relative;
    display: flex;
    align-self: stretch;
}

/* В кнопке — код текущего языка в капсуле со знаком глобуса. Флаги
   сняты по решению владельца: российский флаг первым в шапке делал сайт
   «русским». Капсула рисуется цветом текста шапки, поэтому годится
   на заливке любого раздела. */
.lang-menu-button {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 12px;
    border: 0;
    background: none;
    cursor: pointer;
}

.lang-menu-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.08em;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.lang-menu-globe {
    width: 16px;
    height: 16px;
    opacity: 0.85;
    transition: transform 0.4s ease;
}

.lang-menu-button:hover .lang-menu-chip,
.lang-menu-button[aria-expanded="true"] .lang-menu-chip {
    border-color: rgba(255, 255, 255, 0.7);
    border-color: color-mix(in srgb, currentColor 70%, transparent);
    background: rgba(255, 255, 255, 0.1);
    background: color-mix(in srgb, currentColor 10%, transparent);
}

.lang-menu-button:hover .lang-menu-globe,
.lang-menu-button[aria-expanded="true"] .lang-menu-globe {
    transform: rotate(-20deg);
}

@media (prefers-reduced-motion: reduce) {
    .lang-menu-globe {
        transition: none;
    }
}

/* Самые узкие телефоны (320–374px): шапке не хватало четырёх пикселей
   на логотип, капсулу и «бургер». Глобус убираем, код языка остаётся. */
@media (max-width: 374px) {
    .lang-menu--compact .lang-menu-globe {
        display: none;
    }

    .lang-menu--compact .lang-menu-chip {
        padding: 0 11px;
    }
}

/* На телефоне кнопка стоит рядом с «бургером», и растягиваться ей
   не по чему — высота задана та же, что у него. */
.lang-menu--compact {
    align-self: auto;
}

.lang-menu--compact .lang-menu-button {
    height: 44px;
    padding: 0 8px;
}

/* Флаг. Обёртка скругляет и обрезает рисунок; тонкая обводка поверх
   нужна белой полосе российского флага — на белом списке она сливалась
   с фоном. */
.lang-flag {
    position: relative;
    display: inline-flex;
    flex: none;
    width: 22px;
    height: 16px;
    overflow: hidden;
    border-radius: 4px;
}

.lang-flag svg {
    width: 100%;
    height: 100%;
}

.lang-flag::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(21, 23, 28, 0.12);
}

.lang-menu-list {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 20;
    min-width: 200px;
    padding: 6px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 40px -18px rgba(21, 23, 28, 0.45), 0 0 0 1px rgba(21, 23, 28, 0.06);
}

body[data-brand] header .lang-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2;
    color: #1d1d1f;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

body[data-brand] header .lang-menu-item span {
    color: inherit;
}

/* Код языка в списке — плашкой, служебным моноширинным шрифтом сайта.
   У текущего языка плашка цвета раздела, как заливка шапки. */
body[data-brand] header .lang-menu-item .lang-menu-badge {
    display: inline-grid;
    flex: none;
    place-items: center;
    min-width: 32px;
    height: 24px;
    padding: 0 6px;
    border-radius: 7px;
    background: #f1f1f4;
    color: #5e626b;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    transition: background-color 0.2s ease, color 0.2s ease;
}

body[data-brand] header .lang-menu-item:hover .lang-menu-badge {
    background: #e8e8ed;
    color: #1d1d1f;
}

body[data-brand] header .lang-menu-item[aria-current="true"] .lang-menu-badge {
    background: var(--cp-header-bg);
    color: #fff;
}

body[data-brand] header .lang-menu-item:hover {
    background: #f5f5f7;
}

/* Текущий язык — цветом раздела, как заливка шапки, и галочкой справа. */
body[data-brand] header .lang-menu-item[aria-current="true"] {
    color: var(--cp-header-bg);
    font-weight: 600;
}

.lang-menu-check {
    width: 18px;
    height: 18px;
    margin-left: auto;
}

/* Волосяные разделители заданы цветом бумаги — на тёмном пропадают. */
header .bg-line {
    background: rgba(255, 255, 255, 0.28);
}

/* Кнопка расчёта. Её заливка — фирменный цвет раздела, и на шапке того
   же цвета она исчезала бесследно. Меняем местами: белая плашка,
   надпись цветом шапки. */
header .btn-primary {
    background: #fff !important;
    color: var(--cp-header-bg) !important;
}

header .btn-primary:hover {
    background: #e8e2d6 !important;
}

/* Знаки набраны тёмным и на тёмной шапке пропадают — ставим выворотки.
   В них нейтральные части белые, фирменные цвета осветлены с сохранением
   тона, поэтому знак остаётся узнаваемым.
 *
 * Все знаки (logo-*.png и .webp) с 22.09 отрисованы из фирменных SVG,
 * что передал владелец: они лежат в assets/brand/. Прежние были
 * перерисовкой — толще шрифт и знак, другой зелёный. Выворотки Cup
 * и Craft — белые версии из того же комплекта, где фирменный цвет
 * осветлён (#2D8E6B → #78D8A8, #C5A08E → #E4D2CC): зелёная надпись
 * PRINT CUP на зелёной шапке не читалась. Файлы
 * centris-*-header.svg в той же папке. `?v=2` — у картинок недельный кэш,
 * и без метки браузер держал бы прежний знак. */
.cp-header-logo {
    content: url('logo-print-invert.webp?v=2');
    height: 58px;
    width: auto;
    margin-right: 10px;
}

body[data-brand="cup"] .cp-header-logo {
    content: url('logo-cup-invert.webp?v=2');
}

/* Знак Cup горизонтальный — знак и надпись в строку, 4.07 : 1 (у прежней
   перерисовки было 3.7 : 1). Общая рамка шапки из слоя редизайна (98×57,
   `header .cp-header-logo`) рассчитана на знак в две строки, и этот
   вписывался бы в неё полоской в 24px. Размер свой, с той же весомостью
   селектора, что у рамки, плюс атрибут. Высота прежняя — ширина по знаку. */
body[data-brand="cup"] header .cp-header-logo {
    width: 163px;
    height: 40px;
    margin-right: 6px;
}

@media (max-width: 1100px) {
    body[data-brand="cup"] header .cp-header-logo {
        width: 138px;
        height: 34px;
    }
}

body[data-brand="craft"] .cp-header-logo {
    content: url('logo-craft-invert.webp?v=2');
}

/* ══ Знаки направлений в карточках ═══════════════════════════════
 *
 * Слой редизайна вписывает знак в рамку 92×66 — под знаки в две строки
 * (знак сверху, надпись снизу). Знак Cup теперь горизонтальный, 3.7 : 1,
 * и в той рамке становился полоской в 25px высотой. Ширина — по знаку,
 * высота — прежняя из слоя редизайна, но не шире 170px: знаки в две
 * строки остаются ровно такими же, а горизонтальный получает место.
 */
.cp-full-logo {
    width: auto;
    max-width: 170px;
    object-position: left center;
}

/* ══ Пункты выпадающих меню «Для вашего бизнеса» и «Решения» ═══════
 *
 * По ширине своего текста и с ровным просветом, число — сразу за
 * названием. Прежде пункты стояли в четырёх колонках по четверти ширины:
 * число уезжало к правому краю колонки, далеко от названия, а длинное
 * название переносилось на вторую строку, и ряды шли вразнобой.
 */

.nav-panel-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.nav-panel-list > a {
    white-space: nowrap;
    border-radius: 10px;
}

/* ══ Заголовки разделов в меню «Продукция» ════════════════════════
 *
 * Они и раньше были ссылками на страницу направления, но выглядели
 * обычным текстом: ни подчёркивания, ни состояния под курсором. Ссылка,
 * о которой нельзя догадаться, — то же самое, что её отсутствие.
 */

.catalogue-menu-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 5px;
    text-decoration-thickness: 2px;
    transition: text-decoration-color 0.2s ease, gap 0.2s ease;
}

.catalogue-menu-title::after {
    content: "\2192";
    font-weight: 400;
    opacity: 0.45;
    transition: opacity 0.2s ease;
}

.catalogue-menu-title:hover {
    text-decoration-color: currentColor;
    gap: 12px;
}

.catalogue-menu-title:hover::after {
    opacity: 1;
}

/* ── Подвал: отступ и высота ──────────────────────────────────────
 *
 * `redesign/editorial.css` отбивает подвал от страницы полем в 70px
 * и делает это через !important, поэтому перебиваем тем же. Поле было
 * заметно там, где над подвалом стоял белый блок; когда секции страницы
 * стали цветными, оно читается как пустая полоса неизвестно чего.
 */
footer {
    margin-top: 0 !important;
}

/* Подвал был высотой в три четверти экрана: восемьдесят пикселей полей
   сверху и снизу плюс широкие просветы между колонками ссылок. Ссылок
   от этого не убавилось, а листать до них стало дольше. */
footer > .shell {
    padding-block: clamp(34px, 4vw, 52px) !important;
}

/* ── Подвал: раскладка ────────────────────────────────────────────
 *
 * Один ряд колонок: знак, каталог, направления, компания, контакты.
 * Раньше под каталогом шли полные списки предметов, сфер и решений,
 * и подвал был высотой в экран. Классы свои, а не Tailwind: сборку
 * на рабочей машине не перезапустить, новых классов в ней не будет. */
.footer-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1.5fr) minmax(0, 1.2fr);
    gap: 28px clamp(24px, 2.5vw, 40px);
}

.footer-tagline {
    max-width: 30ch;
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.55;
}

/* Заголовки колонок — основным шрифтом сайта, как и ссылки под ними,
   только темнее и плотнее. Раньше здесь был служебный моноширинный капс
   с разрядкой (.eyebrow) — владелец попросил нормальный шрифт. Цвет
   с !important: иначе его перебила бы перекраска text-white/… выше. */
footer .footer-head {
    margin-bottom: 14px;
    font-family: "Onest", ui-sans-serif, system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
    color: #1d1d1f !important;
}

footer a.footer-head:hover {
    color: #6c6c74 !important;
}

.footer-list {
    display: grid;
    gap: 9px;
    font-size: 14px;
    line-height: 1.35;
}

.footer-list--two {
    grid-template-columns: repeat(2, minmax(0, max-content));
    column-gap: clamp(20px, 2vw, 32px);
}

.footer-direction {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-ig {
    display: inline-flex;
    transition: color 0.2s ease;
}

.footer-ig svg {
    width: 15px;
    height: 15px;
}

.footer-ig:hover {
    color: #1d1d1f !important;
}

.footer-phone {
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.footer-address {
    max-width: 30ch;
    line-height: 1.5;
}

.footer-crease {
    margin-top: clamp(24px, 3vw, 36px);
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: 16px;
    font-size: 11px;
    letter-spacing: 0.14em;
}

@media (max-width: 1100px) {
    .footer-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    /* В четверти ширины две колонки ссылок уже не помещаются. */
    .footer-list--two {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ══ Сайт-витрина ═════════════════════════════════════════════════
 *
 * Пока зонтик Centris Print закрыт (config/site.php), у сайта своя шапка
 * и свой подвал: components/showcase. Разметка у них та же, что у основных,
 * поэтому почти всё оформление приходит из правил выше. Здесь — только то,
 * чего у основных нет.
 */

/* Пункт раздела, который сейчас на экране, — в полную силу, как наведённый,
   и с чертой под словом. Отмечает его experience.js (data-section-link →
   aria-current), когда раздел проходит верхнюю треть экрана. Без черты
   разница между 78% и 100% белого почти не читалась, и казалось, что шапка
   не отзывается на то, где человек находится. */
body[data-brand] header > .shell > nav > a[aria-current="location"] {
    color: #fff;
}

body[data-brand] header > .shell > nav > a[data-section-link] {
    position: relative;
}

/* Черта — по ширине слова (поля ссылки — px-3, 12px), чуть ниже строки.
   Растёт от середины, а не появляется рывком. */
body[data-brand] header > .shell > nav > a[data-section-link]::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: calc(50% - 17px);
    left: 12px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

body[data-brand] header > .shell > nav > a[aria-current="location"]::after {
    transform: scaleX(1);
}

/* Три колонки вместо пяти: знак, разделы витрины, контакты. */
.footer-grid--showcase {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.2fr);
}

/* Знак бренда целиком, в строку — у Cup он горизонтальный, 3.7 : 1. */
.footer-logo {
    display: inline-flex;
}

.footer-logo img {
    display: block;
    width: auto;
    height: 40px;
    /* Слой редизайна даёт картинкам подвала поля в 5px (site.css, footer img) —
       под прежние знаки на белой подложке. Здесь они лишние: знак выходил
       мельче и отступал от колонки текста. */
    padding: 0;
}

@media (max-width: 1100px) {
    .footer-grid--showcase {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Мобильное меню — белая панель, и правила тёмной шапки выше ему вредят:
   кнопка расчёта выходила белой на белом (одна надпись без плашки),
   а телефон — белым текстом, то есть невидимым. В панели — наоборот:
   кнопка в цвет шапки, телефон основным цветом текста. Касается обеих
   шапок — основной и витрины: разметка панели у них одна. */
header #mobile-nav .btn-primary {
    background: var(--cp-header-bg) !important;
    color: #fff !important;
}

header #mobile-nav .btn-primary:hover {
    filter: brightness(1.12);
}

body[data-brand] header #mobile-nav a[href^="tel:"] {
    color: var(--cp-ink);
}