/* Тема «Маршрут» (kmroute) — базовый слой: токены, палитры, типографика, макет,
   компоненты rt-*. Визуальный язык: светлое полотно, прямые углы, гротеск
   Montserrat капсом с разрядкой + серифный PT Serif «вторым голосом», один
   песочный акцент, фирменный мотив — пунктирная линия (разметка маршрута):
   пунктирные рамки, круглый пунктирный штамп, пунктирные разделители.
   Тёмный подвал. Теней нет, кроме поповеров.
   Витринные компоненты магазина — в shop-теме (css/shop.css), блога — в blog-теме.
   Свои правки пишите в custom.css: этот файл перезаписывается обновлениями темы. */

@layer tokens, base, layout, components, utils;

@layer tokens {
    /* ---------------------------------------------------------------
       ДИЗАЙН-СИСТЕМА «МАРШРУТ»
       1. Геометрия и типографика — :root ниже; часть значений может
          переопределить инлайновый блок настроек в index.html.
       2. Цвет — ролевые палитры (сгенерированы tools/gen-palettes.py
          с проверкой WCAG AA; дефолт «Песок» лежит прямо в :root,
          остальные включаются классом rt-palette-<id> на <html>).
       3. Мотив «маршрут» — пунктир: рамки .rt-promo__box и .rt-card--dash,
          штамп .rt-stamp, разделитель .rt-divider с точкой-«вехой».
       --------------------------------------------------------------- */
    :root {
        /* геометрия: прямые углы — часть характера темы */
        --rt-radius: 2px;
        --rt-container: 1240px;
        --rt-gap: 16px;
        --rt-section: 64px;

        /* типографика: геометрический гротеск + серифный «второй голос» */
        --rt-font: 'Montserrat', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
        --rt-font-serif: 'PT Serif', Georgia, 'Times New Roman', serif;

        /* фирменный пунктир (цвет задаётся на месте через border-color) */
        --rt-dash: 1px dashed;

        /* единственная разрешённая тень — поповеры/диалоги */
        --rt-shadow-pop: rgb(0 0 0 / 16%) 0 8px 30px 0;

        color-scheme: light;
    }

    /* --- ПАЛИТРЫ: роли цвета -------------------------------------------
       canvas   --rt-canvas   полотно страницы
       surface  --rt-bg       карточки и панели; --rt-bg-soft — подложка
       line     --rt-line     волосяные рамки и пунктир
       ink      --rt-ink      текст (он же фон тёмного подвала);
                --rt-ink-soft — второстепенный
       accent   --rt-accent   главное действие, цены (+hover/press/tint);
                --rt-accent-ink — текст НА акценте (проверен AA)
       highlight --rt-highlight декоративный голос: штампы, вехи, метки;
                --rt-highlight-ink — текст на нём (проверен AA)
       link     --rt-link     ссылки в тексте (+link-strong при наведении)
       Меняя цвета палитры, меняйте и ink-роли — иначе надписи на кнопках
       потеряют контраст. Генератор: themes/kmroute-store/tools/gen-palettes.py
       ------------------------------------------------------------------- */
    /* Песок / Sand */
    :root {
        --rt-canvas: #ffffff;
        --rt-bg: #ffffff;
        --rt-bg-soft: #f2f0ec;
        --rt-line: #e5e5e5;
        --rt-ink: #252525;
        --rt-ink-soft: #6b6b6b;
        --rt-accent: #7d6e51;
        --rt-accent-hover: #6a5d44;
        --rt-accent-press: #574c37;
        --rt-accent-tint: #ece7dc;
        --rt-accent-ink: #ffffff;
        --rt-highlight: #bdb099;
        --rt-highlight-ink: #2b2415;
        --rt-link: #75674a;
        --rt-link-strong: #5d5139;
    }
    /* Асфальт / Asphalt */
    html.rt-palette-asphalt {
        --rt-canvas: #fbfbfc;
        --rt-bg: #ffffff;
        --rt-bg-soft: #f0f0f2;
        --rt-line: #e5e5e5;
        --rt-ink: #252525;
        --rt-ink-soft: #6b6b6b;
        --rt-accent: #3f444b;
        --rt-accent-hover: #33373d;
        --rt-accent-press: #282b30;
        --rt-accent-tint: #e3e5e8;
        --rt-accent-ink: #ffffff;
        --rt-highlight: #9aa3ad;
        --rt-highlight-ink: #171b20;
        --rt-link: #4a5058;
        --rt-link-strong: #383d44;
    }
    /* Хвоя / Pine */
    html.rt-palette-pine {
        --rt-canvas: #ffffff;
        --rt-bg: #ffffff;
        --rt-bg-soft: #f2f0ec;
        --rt-line: #e5e5e5;
        --rt-ink: #252525;
        --rt-ink-soft: #6b6b6b;
        --rt-accent: #2f5d48;
        --rt-accent-hover: #27503d;
        --rt-accent-press: #1f4232;
        --rt-accent-tint: #d5e6de;
        --rt-accent-ink: #ffffff;
        --rt-highlight: #7fae9b;
        --rt-highlight-ink: #10241c;
        --rt-link: #2e604a;
        --rt-link-strong: #244c3a;
    }
    /* Океан / Ocean */
    html.rt-palette-ocean {
        --rt-canvas: #ffffff;
        --rt-bg: #ffffff;
        --rt-bg-soft: #f2f0ec;
        --rt-line: #e5e5e5;
        --rt-ink: #252525;
        --rt-ink-soft: #6b6b6b;
        --rt-accent: #235e7d;
        --rt-accent-hover: #1d4f69;
        --rt-accent-press: #174056;
        --rt-accent-tint: #d3e5ee;
        --rt-accent-ink: #ffffff;
        --rt-highlight: #6fa8c4;
        --rt-highlight-ink: #0e2430;
        --rt-link: #24607f;
        --rt-link-strong: #1c4c65;
    }
    /* Закат / Sunset */
    html.rt-palette-sunset {
        --rt-canvas: #ffffff;
        --rt-bg: #ffffff;
        --rt-bg-soft: #f2f0ec;
        --rt-line: #e5e5e5;
        --rt-ink: #252525;
        --rt-ink-soft: #6b6b6b;
        --rt-accent: #b3421f;
        --rt-accent-hover: #9c3919;
        --rt-accent-press: #833014;
        --rt-accent-tint: #f6d6c9;
        --rt-accent-ink: #ffffff;
        --rt-highlight: #e88f5e;
        --rt-highlight-ink: #3a1c0a;
        --rt-link: #a83f1e;
        --rt-link-strong: #863217;
    }
    /* Гравий / Gravel */
    html.rt-palette-gravel {
        --rt-canvas: #ffffff;
        --rt-bg: #ffffff;
        --rt-bg-soft: #f2f0ec;
        --rt-line: #e5e5e5;
        --rt-ink: #252525;
        --rt-ink-soft: #6b6b6b;
        --rt-accent: #695f55;
        --rt-accent-hover: #575047;
        --rt-accent-press: #46403a;
        --rt-accent-tint: #e6e2dd;
        --rt-accent-ink: #ffffff;
        --rt-highlight: #a89f96;
        --rt-highlight-ink: #24201b;
        --rt-link: #6a5f54;
        --rt-link-strong: #544b42;
    }
    /* Терракота / Terracotta */
    html.rt-palette-terracotta {
        --rt-canvas: #ffffff;
        --rt-bg: #ffffff;
        --rt-bg-soft: #f2f0ec;
        --rt-line: #e5e5e5;
        --rt-ink: #252525;
        --rt-ink-soft: #6b6b6b;
        --rt-accent: #9c4a38;
        --rt-accent-hover: #86402f;
        --rt-accent-press: #703527;
        --rt-accent-tint: #f0d9d3;
        --rt-accent-ink: #ffffff;
        --rt-highlight: #cf8570;
        --rt-highlight-ink: #33150c;
        --rt-link: #964736;
        --rt-link-strong: #78392b;
    }
    /* Небо / Sky */
    html.rt-palette-sky {
        --rt-canvas: #fcfdff;
        --rt-bg: #ffffff;
        --rt-bg-soft: #f2f0ec;
        --rt-line: #e5e5e5;
        --rt-ink: #252525;
        --rt-ink-soft: #6b6b6b;
        --rt-accent: #3a6ea5;
        --rt-accent-hover: #315e8d;
        --rt-accent-press: #294e75;
        --rt-accent-tint: #d9e5f2;
        --rt-accent-ink: #ffffff;
        --rt-highlight: #8ab6da;
        --rt-highlight-ink: #12283a;
        --rt-link: #36699f;
        --rt-link-strong: #2b547f;
    }
    /* Мох / Moss */
    html.rt-palette-moss {
        --rt-canvas: #ffffff;
        --rt-bg: #ffffff;
        --rt-bg-soft: #f2f0ec;
        --rt-line: #e5e5e5;
        --rt-ink: #252525;
        --rt-ink-soft: #6b6b6b;
        --rt-accent: #57633a;
        --rt-accent-hover: #4a5431;
        --rt-accent-press: #3d4528;
        --rt-accent-tint: #e1e5d4;
        --rt-accent-ink: #ffffff;
        --rt-highlight: #97a86b;
        --rt-highlight-ink: #1e2411;
        --rt-link: #566338;
        --rt-link-strong: #444f2c;
    }
    /* Слива / Plum */
    html.rt-palette-plum {
        --rt-canvas: #ffffff;
        --rt-bg: #ffffff;
        --rt-bg-soft: #f2f0ec;
        --rt-line: #e5e5e5;
        --rt-ink: #252525;
        --rt-ink-soft: #6b6b6b;
        --rt-accent: #6d4a68;
        --rt-accent-hover: #5d3f59;
        --rt-accent-press: #4d344a;
        --rt-accent-tint: #e7dbe5;
        --rt-accent-ink: #ffffff;
        --rt-highlight: #a983a3;
        --rt-highlight-ink: #251522;
        --rt-link: #6b4966;
        --rt-link-strong: #553a51;
    }
    /* Уголь / Coal */
    html.rt-palette-coal {
        --rt-canvas: #fdfdfd;
        --rt-bg: #ffffff;
        --rt-bg-soft: #f2f2f2;
        --rt-line: #e5e5e5;
        --rt-ink: #252525;
        --rt-ink-soft: #6b6b6b;
        --rt-accent: #2e2e2e;
        --rt-accent-hover: #1f1f1f;
        --rt-accent-press: #141414;
        --rt-accent-tint: #e4e4e4;
        --rt-accent-ink: #ffffff;
        --rt-highlight: #bdb099;
        --rt-highlight-ink: #2b2415;
        --rt-link: #444444;
        --rt-link-strong: #222222;
    }
    /* Мёд / Honey */
    html.rt-palette-honey {
        --rt-canvas: #ffffff;
        --rt-bg: #ffffff;
        --rt-bg-soft: #f2f0ec;
        --rt-line: #e5e5e5;
        --rt-ink: #252525;
        --rt-ink-soft: #6b6b6b;
        --rt-accent: #8a6414;
        --rt-accent-hover: #755410;
        --rt-accent-press: #61460d;
        --rt-accent-tint: #f3e6c8;
        --rt-accent-ink: #ffffff;
        --rt-highlight: #d9a83f;
        --rt-highlight-ink: #2f2405;
        --rt-link: #7d5c15;
        --rt-link-strong: #644a11;
    }
}

@layer base {
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; }
    body {
        margin: 0;
        background: var(--rt-canvas);
        color: var(--rt-ink);
        font: 400 15px/1.65 var(--rt-font);
    }
    img, svg, video { max-width: 100%; height: auto; }
    h1, h2, h3, h4 {
        margin: 0 0 .6em;
        font-family: var(--rt-font);
        font-weight: 700;
        line-height: 1.3;
        color: var(--rt-ink);
    }
    h1 { font-size: 26px; letter-spacing: .02em; }
    h2 { font-size: 21px; }
    h3 { font-size: 17px; }
    h4 { font-size: 15px; }
    p { margin: 0 0 1em; }
    a {
        color: var(--rt-link);
        text-decoration: underline;
        text-decoration-color: color-mix(in srgb, var(--rt-link) 35%, transparent);
        text-underline-offset: 2px;
        transition: color .15s;
    }
    a:hover { color: var(--rt-link-strong); text-decoration-color: currentColor; }
    hr { border: 0; border-top: var(--rt-dash) var(--rt-line); margin: var(--rt-gap) 0; }
    blockquote {
        margin: 0 0 1em;
        padding: 4px 0 4px 18px;
        border-left: var(--rt-dash) var(--rt-highlight);
        font-family: var(--rt-font-serif);
        font-style: italic;
    }
    ::placeholder { color: var(--rt-ink-soft); opacity: 1; }
    :focus-visible { outline: 2px dashed var(--rt-ink); outline-offset: 2px; }
    @media (min-width: 768px) {
        h1 { font-size: 32px; }
        h2 { font-size: 24px; }
        h3 { font-size: 19px; }
    }
}

@layer layout {
    .rt-container {
        max-width: var(--rt-container);
        margin-inline: auto;
        padding-inline: var(--rt-gap);
    }
    .rt-page { min-height: 60vh; padding-block: calc(var(--rt-gap) * 1.5) var(--rt-section); }
    .rt-section { margin-block: var(--rt-section); }
    .rt-section:first-child { margin-top: calc(var(--rt-gap) * 1.5); }
    /* сетка карточек: базово 2 колонки, дальше решают модификаторы */
    .rt-grid {
        display: grid;
        gap: calc(var(--rt-gap) * 1.5) var(--rt-gap);
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (min-width: 768px)  { .rt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    @media (min-width: 1100px) { .rt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
    /* контент с сайдбаром (каталог, кабинет): сайдбар слева, как в исходной композиции */
    .rt-cols { display: grid; gap: calc(var(--rt-gap) * 2); }
    @media (min-width: 1000px) {
        .rt-cols { grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
        .rt-cols--right { grid-template-columns: minmax(0, 1fr) 300px; }
    }
}

@layer components {
    /* --- заголовок секции: по центру, капс с разрядкой, пунктирные линии
           по бокам и точка-«веха» под ним ---------------------------------- */
    .rt-section-title {
        display: flex;
        align-items: center;
        gap: 16px;
        margin: 0 0 calc(var(--rt-gap) * 1.5);
        font-family: var(--rt-font);
        font-size: 15px;
        font-weight: 700;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: var(--rt-ink);
        text-align: center;
    }
    .rt-section-title::before, .rt-section-title::after {
        content: '';
        flex: 1;
        border-top: var(--rt-dash) var(--rt-line);
    }
    .rt-section-title .rt-waypoint { margin-inline: -6px; }
    .rt-waypoint {
        flex: none;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--rt-highlight);
    }
    .rt-section-sub {
        margin: calc(var(--rt-gap) * -1) 0 var(--rt-gap);
        text-align: center;
        font-family: var(--rt-font-serif);
        font-style: italic;
        color: var(--rt-ink-soft);
    }

    /* --- пунктирный разделитель с вехой ------------------------------------ */
    .rt-divider {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: var(--rt-section) 0;
    }
    .rt-divider::before, .rt-divider::after {
        content: '';
        flex: 1;
        border-top: var(--rt-dash) var(--rt-line);
    }

    /* --- кнопки: прямоугольник без скруглений, капс-лейбл ------------------- */
    .rt-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 22px;
        border: 1px solid transparent;
        border-radius: 0;
        background: var(--rt-bg-soft);
        color: var(--rt-ink);
        font-family: var(--rt-font);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
        text-decoration: none;
        line-height: 1.2;
        cursor: pointer;
        transition: background .15s, border-color .15s, color .15s;
    }
    .rt-btn:hover { background: var(--rt-line); color: var(--rt-ink); }
    .rt-btn--primary { background: var(--rt-accent); color: var(--rt-accent-ink); }
    .rt-btn--primary:hover { background: var(--rt-accent-hover); color: var(--rt-accent-ink); }
    .rt-btn--primary:active { background: var(--rt-accent-press); }
    .rt-btn--dark { background: var(--rt-ink); color: var(--rt-canvas); }
    .rt-btn--dark:hover { background: var(--rt-accent); color: var(--rt-accent-ink); }
    .rt-btn--ghost { background: transparent; border-color: var(--rt-ink); }
    .rt-btn--ghost:hover { background: var(--rt-ink); color: var(--rt-canvas); }
    .rt-btn--sm { padding: 8px 14px; font-size: 11px; }
    .rt-btn[disabled], .rt-btn--disabled { opacity: .5; pointer-events: none; }

    /* серифная «ссылка-приглашение» (курсив, пунктирное подчёркивание) */
    .rt-morelink {
        font-family: var(--rt-font-serif);
        font-style: italic;
        font-size: 15px;
        color: var(--rt-link);
        text-decoration: underline;
        text-decoration-style: dashed;
        text-decoration-color: color-mix(in srgb, var(--rt-link) 45%, transparent);
        text-underline-offset: 3px;
    }
    .rt-morelink:hover { color: var(--rt-link-strong); text-decoration-color: currentColor; }

    /* --- формы --------------------------------------------------------------- */
    .rt-input, .rt-select, .rt-textarea {
        width: 100%;
        padding: 11px 12px;
        border: 1px solid var(--rt-line);
        border-radius: var(--rt-radius);
        background: var(--rt-bg);
        color: var(--rt-ink);
        font: 400 15px/1.4 var(--rt-font);
        transition: border-color .15s;
    }
    .rt-textarea { min-height: 110px; resize: vertical; }
    .rt-input:focus, .rt-select:focus, .rt-textarea:focus { border-color: var(--rt-ink); outline: none; }
    .rt-select { appearance: none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 49%, var(--rt-ink-soft) 51%), linear-gradient(135deg, var(--rt-ink-soft) 49%, transparent 51%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
    .rt-field { margin-bottom: var(--rt-gap); }
    .rt-field > label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
    .rt-hint { font-size: 13px; color: var(--rt-ink-soft); }
    .rt-error-text { font-size: 13px; color: var(--rt-accent-press); }

    /* --- карточка: плоская; пунктирная рамка — фирменный вариант ------------- */
    .rt-card {
        position: relative;
        background: var(--rt-bg);
        border: 1px solid var(--rt-line);
        border-radius: 0;
        overflow: hidden;
        transition: border-color .18s;
    }
    .rt-card:hover { border-color: var(--rt-ink-soft); }
    .rt-card--dash { border-style: dashed; }

    /* --- круглый пунктирный штамп (скидка, «новинка») ------------------------- */
    .rt-stamp {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1;
        display: grid;
        place-content: center;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: var(--rt-bg);
        border: var(--rt-dash) var(--rt-ink-soft);
        box-shadow: 0 0 0 3px var(--rt-bg);
        color: var(--rt-ink);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        text-align: center;
        line-height: 1.15;
        rotate: 8deg;
    }
    .rt-stamp--highlight { background: var(--rt-highlight); border-color: var(--rt-highlight-ink); color: var(--rt-highlight-ink); box-shadow: none; }

    .rt-badge {
        display: inline-block;
        padding: 3px 9px;
        border-radius: 0;
        background: var(--rt-highlight);
        color: var(--rt-highlight-ink);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }
    .rt-badge--soft { background: var(--rt-accent-tint); color: var(--rt-ink); }
    .rt-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 12px;
        border: var(--rt-dash) var(--rt-line);
        border-radius: 999px;
        font-size: 13px;
        color: var(--rt-ink-soft);
        text-decoration: none;
    }
    .rt-pill:hover { border-color: var(--rt-ink-soft); color: var(--rt-ink); }

    /* --- полоса промо-боксов (подпись темы) ----------------------------------- */
    .rt-promo { display: grid; gap: var(--rt-gap); }
    @media (min-width: 768px) { .rt-promo { grid-template-columns: repeat(3, 1fr); } }
    .rt-promo__box {
        padding: calc(var(--rt-gap) * 1.5) var(--rt-gap);
        border: var(--rt-dash) var(--rt-ink-soft);
        text-align: center;
    }
    .rt-promo__over {
        margin-bottom: 6px;
        font-size: 12px;
        color: var(--rt-ink-soft);
        letter-spacing: .04em;
    }
    .rt-promo__title {
        margin: 0 0 8px;
        font-size: 17px;
        font-weight: 700;
        letter-spacing: .16em;
        text-transform: uppercase;
    }

    /* --- верхняя полоса (юзербар) ---------------------------------------------- */
    .rt-topbar {
        background: var(--rt-bg-soft);
        border-bottom: 1px solid var(--rt-line);
        font-size: 13px;
        color: var(--rt-ink-soft);
    }
    .rt-topbar .rt-container { display: flex; align-items: center; gap: var(--rt-gap); min-height: 34px; }
    .rt-topbar a { color: var(--rt-ink-soft); text-decoration: none; }
    .rt-topbar a:hover { color: var(--rt-ink); }
    .rt-topbar__spacer { flex: 1; }
    .rt-topbar__phone { white-space: nowrap; }
    .rt-topbar__pages { display: none; gap: 14px; margin-left: 18px; }
    @media (min-width: 768px) { .rt-topbar__pages { display: inline-flex; } }
    /* дубли страниц для мобильного меню: на широком экране полоса — только каталог */
    @media (min-width: 768px) { .rt-menu__list .rt-menu__page { display: none; } }
    @media (max-width: 767px) {
        .rt-menu__list .rt-menu__page:first-of-type { border-top: var(--rt-dash) var(--rt-line); margin-top: 6px; padding-top: 6px; }
    }

    /* --- шапка: меню, расступающееся вокруг логотипа ---------------------------
       Режим по умолчанию (rt-header--center): одна полоса, пункты меню слева и
       справа от логотипа. Запасной режим (rt-header--left): логотип слева,
       меню отдельной полосой ниже — для длинных меню. ------------------------- */
    .rt-header { background: var(--rt-bg); }
    /* полоса бренда: бургер / логотип / действия. Режим «по центру» — грид 1fr auto 1fr,
       логотип стоит ровно по центру независимо от ширины действий. */
    .rt-brandbar {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: var(--rt-gap);
        padding-block: 16px;
    }
    .rt-brandbar > .rt-logo { grid-column: 2; justify-self: center; }
    .rt-brandbar > .rt-burger { grid-column: 1; justify-self: start; }
    .rt-brandbar > .rt-header__actions { grid-column: 3; justify-self: end; }
    .rt-header--left .rt-brandbar { grid-template-columns: auto auto 1fr; }
    .rt-header--left .rt-brandbar > .rt-logo { justify-self: start; }
    .rt-logo {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--rt-font);
        font-size: 24px;
        font-weight: 800;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--rt-ink);
        text-decoration: none;
        line-height: 1.1;
        white-space: nowrap;
    }
    .rt-logo img { max-height: 48px; width: auto; }
    .rt-logo__mark {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--rt-accent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--rt-accent) 25%, transparent);
    }
    .rt-header__actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
    .rt-header__actions .rt-pill { text-decoration: none; }
    .rt-iconbtn {
        appearance: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: 0;
        background: none;
        color: var(--rt-ink);
        cursor: pointer;
    }
    .rt-iconbtn svg { display: block; width: 20px; height: 20px; }
    .rt-iconbtn:hover { color: var(--rt-link); }
    .rt-cartbtn__total { font-weight: 400; letter-spacing: 0; text-transform: none; }
    @media (max-width: 479px) { .rt-cartbtn__total { display: none; } }

    /* --- форма поиска (в диалоге) ------------------------------------------------ */
    .rt-search { display: flex; }
    .rt-search .rt-input { border-right: 0; }
    .rt-search-dialog[open] { width: min(640px, calc(100vw - 2 * var(--rt-gap))); }

    /* --- полоса меню: отдельный липкий элемент под полосой бренда.
           При переполнении прокручиваются только пункты — логотип на месте. --- */
    .rt-menu { background: var(--rt-bg); border-block: 1px solid var(--rt-line); }
    .rt-menu__list {
        display: flex;
        align-items: center;
        justify-content: center;
        justify-content: safe center; /* центр, но при переполнении начало не обрезается */
        gap: 2px;
        margin: 0;
        padding: 0;
        list-style: none;
        overflow-x: auto;
        position: relative; /* absolute-потомки не растягивают документ */
    }
    .rt-header--left + .rt-menu .rt-menu__list { justify-content: flex-start; }
    .rt-menu__list a {
        display: block;
        padding: 16px 13px;
        color: var(--rt-ink);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        text-decoration: none;
        white-space: nowrap;
    }
    .rt-menu__list a:hover { color: var(--rt-link); }
    .rt-menu__list li.selected > a, .rt-menu__list a.selected {
        color: var(--rt-link);
        text-decoration: underline;
        text-decoration-style: dashed;
        text-underline-offset: 6px;
    }
    /* липкая полоса меню (настройка sticky_header -> html[data-rt-sticky]) */
    html[data-rt-sticky] .rt-menu { position: sticky; top: 0; z-index: 40; }

    /* --- хлебные крошки ----------------------------------------------------------- */
    .rt-breadcrumbs {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin: 0 0 var(--rt-gap);
        padding: 0;
        list-style: none;
        font-size: 13px;
        color: var(--rt-ink-soft);
    }
    .rt-breadcrumbs a { color: var(--rt-ink-soft); text-decoration: none; }
    .rt-breadcrumbs a:hover { color: var(--rt-link); }
    .rt-breadcrumbs li + li::before { content: '·'; margin-right: 6px; color: var(--rt-ink-soft); }

    /* --- табы ------------------------------------------------------------------------ */
    .rt-tabs { border-bottom: 1px solid var(--rt-line); display: flex; gap: 4px; overflow-x: auto; position: relative; }
    .rt-tabs button, .rt-tabs a {
        appearance: none;
        border: 0;
        background: none;
        padding: 11px 16px;
        font: 700 12px/1.2 var(--rt-font);
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--rt-ink-soft);
        cursor: pointer;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
        text-decoration: none;
        white-space: nowrap;
    }
    .rt-tabs .rt-tab--active { color: var(--rt-ink); border-bottom-color: var(--rt-accent); }
    .rt-tabpanel { padding-block: var(--rt-gap); }

    /* --- таблица ----------------------------------------------------------------------- */
    .rt-table { width: 100%; border-collapse: collapse; font-size: 14px; }
    .rt-table th, .rt-table td { padding: 10px 12px; border-bottom: 1px solid var(--rt-line); text-align: left; vertical-align: top; }
    .rt-table th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--rt-ink-soft); }
    .rt-table-wrap { overflow-x: auto; position: relative; }

    /* --- диалог --------------------------------------------------------------------------- */
    .rt-dialog[open] {
        display: flex;
        flex-direction: column;
        gap: var(--rt-gap);
        width: min(560px, calc(100vw - 2 * var(--rt-gap)));
        max-height: calc(100vh - 48px);
        padding: calc(var(--rt-gap) * 1.5);
        border: 1px solid var(--rt-ink);
        border-radius: 0;
        background: var(--rt-bg);
        color: var(--rt-ink);
        box-shadow: var(--rt-shadow-pop);
        overflow: auto;
    }
    .rt-dialog::backdrop { background: rgb(18 17 15 / 45%); }
    .rt-dialog__close {
        position: absolute;
        top: 10px;
        right: 10px;
        appearance: none;
        border: 0;
        background: none;
        font-size: 22px;
        line-height: 1;
        color: var(--rt-ink-soft);
        cursor: pointer;
    }

    /* --- пагинация ---------------------------------------------------------------------- */
    .rt-paging { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--rt-section) 0 0; padding: 0; list-style: none; }
    .rt-paging a, .rt-paging span {
        display: inline-block;
        min-width: 36px;
        padding: 8px 10px;
        border: 1px solid var(--rt-line);
        border-radius: 0;
        text-align: center;
        text-decoration: none;
        font-size: 13px;
        color: var(--rt-ink);
    }
    .rt-paging a:hover { border-color: var(--rt-ink); }
    .rt-paging .selected span, .rt-paging span.selected, .rt-paging .selected a {
        background: var(--rt-ink);
        border-color: var(--rt-ink);
        color: var(--rt-canvas);
    }

    /* --- уведомления ----------------------------------------------------------------------- */
    .rt-notice { padding: 12px 14px; border: var(--rt-dash) var(--rt-ink-soft); border-radius: 0; background: var(--rt-bg-soft); font-size: 14px; }
    .rt-notice--error { border-color: var(--rt-accent-press); color: var(--rt-accent-press); background: var(--rt-bg); }
    .rt-notice--ok { border-color: var(--rt-highlight-ink); }

    /* --- подвал: тёмный, как графика темы ----------------------------------------------------- */
    .rt-footer {
        margin-top: var(--rt-section);
        background: var(--rt-ink);
        color: color-mix(in srgb, var(--rt-canvas) 72%, var(--rt-ink));
        font-size: 14px;
    }
    .rt-footer__cols { display: grid; gap: calc(var(--rt-gap) * 1.5); padding-block: calc(var(--rt-gap) * 2.5); }
    @media (min-width: 768px) { .rt-footer__cols { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1100px) { .rt-footer__cols { grid-template-columns: repeat(4, 1fr); } }
    .rt-footer h4 {
        color: var(--rt-canvas);
        font-size: 12px;
        letter-spacing: .16em;
        text-transform: uppercase;
    }
    .rt-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
    .rt-footer a { color: inherit; text-decoration: none; }
    .rt-footer a:hover { color: var(--rt-canvas); }
    .rt-footer__bottom {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--rt-gap);
        padding-block: var(--rt-gap);
        border-top: var(--rt-dash) color-mix(in srgb, var(--rt-canvas) 30%, var(--rt-ink));
        font-size: 13px;
    }
    .rt-footer__bottom .rt-topbar__spacer { flex: 1; }
    .rt-payments { display: flex; gap: 8px; align-items: center; }
    .rt-payments svg { display: block; height: 22px; width: auto; opacity: .8; }

    /* --- соцсети (svg-иконки в тексте) ---------------------------------------------------------- */
    .rt-socials { display: flex; gap: 10px; align-items: center; }
    .rt-socials a { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border: var(--rt-dash) currentColor; border-radius: 50%; color: var(--rt-ink-soft); }
    .rt-socials a:hover { color: var(--rt-link); }
    .rt-socials svg { width: 15px; height: 15px; fill: currentColor; }
    .rt-footer .rt-socials a { color: inherit; }
    .rt-footer .rt-socials a:hover { color: var(--rt-canvas); }

    /* --- бургер и мобильное меню -------------------------------------------------------------------- */
    .rt-burger { display: none; }
    @media (max-width: 767px) {
        .rt-burger {
            display: inline-flex;
            flex-direction: column;
            gap: 4px;
            padding: 10px;
            border: 1px solid var(--rt-line);
            border-radius: 0;
            background: none;
            cursor: pointer;
        }
        .rt-burger span { width: 18px; height: 2px; background: var(--rt-ink); }
        /* на телефоне полоса меню закрыта, её раскрывает бургер полосы бренда */
        .rt-menu { border-top: 0; }
        .rt-menu:not(.rt-menu--open) { display: none; }
        .rt-menu__list { flex-direction: column; align-items: stretch; }
        .rt-menu__list a { padding: 12px 14px; }
        .rt-menu__list li.selected > a, .rt-menu__list a.selected { text-decoration: none; border-left: 2px solid var(--rt-accent); }
        .rt-brandbar { padding-block: 10px; }
        .rt-logo { font-size: 19px; }
        html[data-rt-sticky] .rt-menu { position: static; } /* раскрытый список не липнет */
    }
}

@layer utils {
    .rt-muted { color: var(--rt-ink-soft); }
    .rt-center { text-align: center; }
    .rt-serif { font-family: var(--rt-font-serif); }
    .rt-serif-note { font-family: var(--rt-font-serif); font-style: italic; color: var(--rt-ink-soft); }
    .rt-row { display: flex; align-items: center; gap: var(--rt-gap); flex-wrap: wrap; }
    .rt-row__spacer { flex: 1; }
    .rt-mt0 { margin-top: 0; }
    .rt-mb0 { margin-bottom: 0; }
    .rt-visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        clip-path: inset(50%);
        overflow: hidden;
        white-space: nowrap;
    }
}

@layer components {
    /* --- пользовательский контент страниц ---------------------------------------- */
    .rt-usercontent { max-width: 760px; }
    .rt-usercontent img { border-radius: 0; }
    .rt-usercontent table { width: 100%; border-collapse: collapse; }
    .rt-usercontent td, .rt-usercontent th { padding: 8px 10px; border: 1px solid var(--rt-line); }
    .rt-pagelist { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
    .rt-pagelist a { text-decoration: none; }

    /* --- страница ошибки ------------------------------------------------------------ */
    .rt-errorpage { padding-block: var(--rt-section); }
    .rt-errorpage__code {
        display: inline-block;
        padding: 10px 26px;
        border: 3px dashed var(--rt-highlight);
        border-radius: 50%;
        rotate: -6deg;
        font-family: var(--rt-font);
        font-size: clamp(56px, 14vw, 120px);
        font-weight: 800;
        line-height: 1.1;
        color: var(--rt-ink);
    }

    /* --- авторизация --------------------------------------------------------------- */
    .rt-auth { display: flex; justify-content: center; padding-block: var(--rt-gap); }
    .rt-auth__card { width: min(440px, 100%); padding: calc(var(--rt-gap) * 1.75); }

    /* --- личный кабинет --------------------------------------------------------------- */
    .rt-account__nav { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
    .rt-account__nav li a {
        display: block;
        padding: 9px 12px;
        border-radius: 0;
        color: var(--rt-ink);
        text-decoration: none;
        border-left: 2px solid transparent;
    }
    .rt-account__nav li.selected a { background: var(--rt-bg-soft); border-left-color: var(--rt-accent); }
    .rt-account__card { padding: calc(var(--rt-gap) * 1.5); }

    /* --- формы ядра (.wa-form из loginForm/signupForm/$form->html()) -------------------- */
    .rt-waform .wa-field { margin-bottom: var(--rt-gap); }
    .rt-waform .wa-field .wa-name { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
    .rt-waform input[type=text], .rt-waform input[type=email], .rt-waform input[type=password],
    .rt-waform input[type=tel], .rt-waform input[type=url], .rt-waform input[type=number],
    .rt-waform select, .rt-waform textarea,
    .rt-auth input[type=text], .rt-auth input[type=email], .rt-auth input[type=password], .rt-auth input[type=tel] {
        width: 100%;
        padding: 11px 12px;
        border: 1px solid var(--rt-line);
        border-radius: var(--rt-radius);
        background: var(--rt-bg);
        color: var(--rt-ink);
        font: 400 15px/1.4 var(--rt-font);
    }
    .rt-waform input[type=submit], .rt-auth input[type=submit],
    .rt-waform .wa-buttons button, .rt-auth button[type=submit] {
        display: inline-flex;
        padding: 12px 22px;
        border: 0;
        border-radius: 0;
        background: var(--rt-accent);
        color: var(--rt-accent-ink);
        font: 700 12px/1.2 var(--rt-font);
        letter-spacing: .14em;
        text-transform: uppercase;
        cursor: pointer;
    }
    .rt-waform .wa-error-msg, .rt-auth .wa-error-msg, .rt-waform .wa-errors-block { color: var(--rt-accent-press); font-size: 13px; }

    /* --- кнопка корзины в шапке ------------------------------------------------------------ */
    .rt-cartbtn { position: relative; }
    .rt-cartbtn [data-rt-cart-count] {
        min-width: 20px;
        padding: 2px 5px;
        border-radius: 999px;
        background: var(--rt-accent);
        color: var(--rt-accent-ink);
        font-size: 11px;
        line-height: 1.3;
        text-align: center;
    }
    .rt-socials--top a { width: 24px; height: 24px; border: 0; }
    .rt-socials--top svg { width: 14px; height: 14px; }
}

/* ВНЕ @layer сознательно: UA-правило [hidden] лежит ниже слоёв, и display
   компонента в слое перебил бы его. Одно правило вне слоёв побеждает всё. */
[hidden] { display: none !important; }