/* ГАРНИТУРА СИСТЕМЫ НАЗНАЧАЕТСЯ ЗДЕСЬ (26.09, блок «дрескод-2»).
   Замер показал: `--m367-font-family-base` объявлен в токенах, но НЕ ПРИМЕНЁН
   ни к корню, ни к телу — его читал только токен крошек. В итоге у `<html>`
   стояла «Times New Roman» (то есть ничего), у `<body>` — стоковый набор
   Битрикса «Helvetica Neue, Helvetica, Arial», а Open Sans приезжал из
   служебного пакета CMS и доставался части элементов.

   Кому какая гарнитура достанется, зависело от элемента И ОТ УСТРОЙСТВА
   зрителя: на главной 326 элементов шли Open Sans против 115 Helvetica, на
   странице товара — 39 против 258. Одна система шрифта — это не вкус, а
   условие, чтобы страница выглядела одинаково у всех.

   Наследование делает остальное: всё, что не переопределено явно, берёт
   гарнитуру отсюда. */

html,
body {
    font-family: var(--m367-font-family-base, "Open Sans", Arial, sans-serif);
}

/* M367_SITE_FOUNDATION_V3 START
   Global geometry and shared footer. The shell size itself is owned by
   mitino367_shell_geometry_v1.css.
*/

:root {
    --m367-brand-orange: #ff5a00;
    --m367-brand-orange-hover: #e95100; /* T-3: узаконен из page_contract, пара к brand */
    --m367-brand-orange-rgb: 255, 90, 0;
    --m367-foundation-shell: var(--m367-shell-width, min(1320px, calc(100vw - 36px)));
    --m367-foundation-bg: #050505;
    --m367-foundation-surface: #101113;
    --m367-foundation-surface-raised: #151619;
    /* Приподнятая поверхность. На тёмном фоне высоту показывает СВЕТЛЕЮЩАЯ подложка,
       а не тень: чёрная тень на почти чёрном фоне невидима. */
    --m367-foundation-surface-lifted: #1e2025;
    --m367-foundation-text: rgba(255, 255, 255, .94);
    --m367-foundation-muted: rgba(255, 255, 255, .66);
    --m367-foundation-accent: var(--m367-brand-orange);
    --m367-foundation-border: rgba(var(--m367-brand-orange-rgb), .28);
    --m367-foundation-border-soft: rgba(var(--m367-brand-orange-rgb), .18);
    --m367-foundation-radius: 8px;
}

.m367-shell-frame,
.m367-shell-content,
.m367-header-shell {
    width: var(--m367-foundation-shell) !important;
    max-width: var(--m367-foundation-shell) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

.workarea > .container.bx-content-section {
    width: var(--m367-foundation-shell) !important;
    max-width: var(--m367-foundation-shell) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

.m367-layout-managed .workarea > .container.bx-content-section {
    padding: 0 !important;
}

.m367-layout-managed .workarea > .container.bx-content-section > .row {
    display: block !important;
    margin: 0 !important;
}

.m367-layout-managed .workarea > .container.bx-content-section > .row > .bx-content.col {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

.m367-layout-managed .sidebar {
    display: none !important;
}

/* Footer */
.m367-site-footer {
    width: 100%;
    margin: 0;
    color: var(--m367-foundation-text);
    background: #070708;
    border-top: 1px solid var(--m367-foundation-border);
}

.m367-site-footer__inner {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1.25fr;
    gap: 32px;
    padding-top: 44px;
    padding-bottom: 34px;
}

.m367-site-footer__logo {
    display: inline-block;
    color: var(--m367-foundation-text);
    font-size: 32px;
    font-weight: var(--m367-font-weight-strong);
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
}

.m367-site-footer__logo span,
/* Заголовки колонок подвала переведены с h4 на h2 (26.09): на странице после
   h2 сразу шёл h4, и уровень перепрыгивался — это ловят и axe, и Lighthouse, а
   читающий с экрана теряет структуру. Вид не изменился: правила ниже держат
   кегль и начертание, а не тег. */
.m367-site-footer h4,
.m367-site-footer .m367-site-footer__title {
    color: var(--m367-foundation-accent);
}

.m367-site-footer__brand p {
    max-width: 330px;
    margin: 16px 0 0;
    color: var(--m367-foundation-muted);
    font-size: 14px;
    line-height: 1.5;
}

.m367-site-footer h4,
.m367-site-footer .m367-site-footer__title {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: var(--m367-font-weight-strong);
    line-height: 1.2;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.m367-site-footer__subhead {
    margin-top: 22px !important;
}

.m367-site-footer__documents a {
    color: #fff !important;
    font-weight: var(--m367-font-weight-strong);
}

.m367-site-footer__documents a:hover {
    color: var(--m367-foundation-accent) !important;
}

.m367-site-footer__col a,
.m367-site-footer__contacts a {
    display: block;
    margin-bottom: 9px;
    color: var(--m367-foundation-muted);
    font-size: 14px;
    line-height: 1.35;
    text-decoration: none;
}

.m367-site-footer__col a:hover,
.m367-site-footer__contacts a:hover {
    color: var(--m367-foundation-accent);
}

.m367-site-footer__contacts p {
    margin: 14px 0 0;
    color: var(--m367-foundation-muted);
    font-size: 14px;
    line-height: 1.45;
}

.m367-site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    padding-top: 18px;
    padding-bottom: 22px;
    color: rgba(255, 255, 255, .54);
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 13px;
}

/* Cookie notice */
.m367-site-cookie {
    position: fixed;
    z-index: 99999;
    right: auto;
    bottom: 24px;
    left: 50%;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: min(1120px, calc(100vw - 36px));
    padding: 16px 18px;
    color: #fff;
    background: #111214;
    border: 1px solid var(--m367-foundation-border);
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .34);
    font-size: 13px;
    line-height: 1.5;
    transform: translateX(-50%);
    box-sizing: border-box;
}

.m367-site-cookie.is-visible {
    display: flex;
}

.m367-site-cookie__text {
    max-width: 920px;
}

.m367-site-cookie a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.m367-site-cookie__button {
    flex: 0 0 auto;
    padding: 10px 18px;
    color: #fff;
    /* БЕЛЫЙ ТЕКСТ КЛАДЁТСЯ ТОЛЬКО НА `--m367-accent-strong` (правило 26.09).
       Тут стояла марка `--m367-foundation-accent` (#ff5a00), и белым по ней
       контраст 3,13 при норме 4,5 — ровно тот недобор, который 26.09 сняли у
       десяти кнопок сайта, а эту пропустили: она живёт в подвале и на глаза
       аудиту не попалась. Нашлась замером 27.09 на странице 404. */
    background: var(--m367-accent-strong, #bf4f18);
    border: 0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: var(--m367-font-weight-strong);
    cursor: pointer;
}

@media (max-width: 1100px) {
    .m367-site-footer__inner {
        grid-template-columns: 1.4fr repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .m367-site-footer__inner {
        grid-template-columns: 1fr;
        gap: 24px;
        padding-top: 34px;
    }

    .m367-site-footer__bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    /* На телефоне баннер остаётся ОДНОЙ строкой. Колонкой он вырастал до
       четверти экрана и закрывал сам товар — то есть мешал ровно тому, ради
       чего человек пришёл. */
    .m367-site-cookie {
        align-items: center;
        flex-direction: row;
        gap: 12px;
        bottom: 8px;
        padding: 10px 12px;
        font-size: 12px;
        line-height: 1.35;
    }

    .m367-site-cookie__button {
        padding: 8px 14px;
        font-size: 13px;
    }
}

/* M367_SITE_FOUNDATION_V3 END */


/* ЦВЕТОВАЯ ТЕМА КОМПОНЕНТОВ БИТРИКСА — НАША МАРКА (25.09, владелец: «какие-то
   синие вкрапления… проверь весь сайт на несоответствие дрес-коду»).

   Стоковые компоненты берут акцент из переменной `--primary`, а её задаёт не
   `:root`, а КЛАСС ТЕМЫ на контейнере: раздел каталога помечен `bx-blue`, и
   оттуда приходит `#0083d1`. Отсюда синие точки переключения кадров на
   карточках полки и на странице товара, и то же самое в корзине.

   Лечится не поштучно, а в корне: всем темам назначаем нашу марку. Один
   акцент на весь сайт — это и есть дрес-код; зелёной теме такую правку уже
   делали раньше, теперь правило общее. Наш файл подключается после шаблона,
   поэтому при равном весе побеждает он.

   Тему при этом не снимаем: на классах тем держится ещё и геометрия стоковых
   блоков. */
.bx-blue, .bx-theme-blue,
.bx-yellow, .bx-theme-yellow,
.bx-red, .bx-theme-red,
.bx-green, .bx-theme-green {
	--primary: var(--m367-accent);
	--primary-rgb: var(--m367-accent-rgb);
}

/* ТРЕТЬЯ ПАЛИТРА СВЕДЕНА К НАШЕЙ (26.09, блок «дрескод-2»).

   `--accent: #c44932` объявлен в двух местах слоя бывшего подрядчика
   (`variables.css` и `template_styles.css`) и красил САМУЮ ЗАМЕТНУЮ вещь
   страницы — кнопку «Купить». Замер: на странице товара чужим кирпичным залито
   5 кнопок, а наш акцент виден четырьмя точками переключения кадров. То есть
   главный цвет сайта покупателю показывал не наш цвет.

   Сводим здесь, одним правилом, как 25.09 сводили `--primary`: поштучно такое
   не чинят, завтра вылезет в шестом месте. Наш файл подключается после
   шаблона, поэтому при равном весе побеждает он.

   Берётся `--m367-accent-strong`, а не `--m367-accent`: на этой заливке стоит
   белый текст, и норму контраста проходит только тёмная ступень — см. замер в
   `m367_tokens.css`. */
:root,
.bx-blue, .bx-theme-blue,
.bx-yellow, .bx-theme-yellow,
.bx-red, .bx-theme-red,
.bx-green, .bx-theme-green {
	--accent: var(--m367-accent-strong);
}