/* RUNGEL — секции и компоненты страниц.
   Сброс, типографика и классические части магазина — в base.css.
   Правило проекта: ни одного HEX и ни одного случайного размера —
   только переменные из tokens.css. Прозрачности задаются через
   color-mix от токенов, чтобы палитра оставалась в одном файле. */

/* ============================================================
   СЕКЦИИ
   ============================================================ */

.rg-section-title {
    margin: 0 0 var(--rg-s-6);
    font-size: var(--rg-h2);
    font-weight: var(--rg-w-black);
    text-transform: uppercase;
}

/* ============================================================
   КНОПКИ (дополняют базовые классы из tokens.css)
   ============================================================ */

.rg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rg-s-2);
    text-decoration: none;
}
.rg-btn--outline {
    background: transparent;
    color: var(--rg-bg);
    border: 1.5px solid color-mix(in srgb, var(--rg-bg) 40%, transparent);
}
.rg-btn--outline:hover {
    border-color: var(--rg-bg);
    background: color-mix(in srgb, var(--rg-bg) 8%, transparent);
    /* Кнопка светлая на фотографии — цвет надписи фиксируем, иначе общий
       `a:hover` перекрашивает её в тайгу и она пропадает. */
    color: var(--rg-bg);
}

/* ============================================================
   ГЛАВНАЯ: ВЕРТИКАЛЬНЫЙ РИТМ

   Расстояние между секциями задаётся здесь и только здесь. Так между
   любыми двумя блоками ровно один шаг `--rg-section`, независимо от их
   порядка, а перестановка секций в шаблоне ничего не ломает.
   ============================================================ */

.rg-home {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--rg-section);
    padding-bottom: var(--rg-section);
}

/* ============================================================
   ПЕРВЫЙ ЭКРАН
   ============================================================ */

.rg-hero {
    position: relative;
    display: flex;
    /* Текст по центру, а не у нижнего края: сверху оставалось больше воздуха,
       чем снизу, и экран выглядел незаполненным. */
    align-items: center;
    min-height: clamp(440px, 42vw, 600px);
    padding: clamp(40px, 5vw, 72px) var(--rg-gutter);
    background-size: cover;
    background-position: 62% 45%;
    color: var(--rg-bg);
    overflow: hidden;
}

/* Затемнение под белым текстом: без него контраст на фото не держит 4.5:1. */
.rg-hero::before,
.rg-hero::after {
    content: '';
    position: absolute;
    inset: 0;
}
.rg-hero::before {
    background: linear-gradient(100deg,
        color-mix(in srgb, var(--rg-taiga-deep) 88%, transparent) 0%,
        color-mix(in srgb, var(--rg-taiga-deep) 66%, transparent) 42%,
        color-mix(in srgb, var(--rg-taiga-deep) 12%, transparent) 78%,
        color-mix(in srgb, var(--rg-taiga-deep) 25%, transparent) 100%);
}
.rg-hero::after {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--rg-ink) 55%, transparent) 0%,
        transparent 32%, transparent 62%,
        color-mix(in srgb, var(--rg-ink) 50%, transparent) 100%);
}

/* Кадры первых экранов: широкий для десктопа, вертикальный для телефона.
   Горизонтальный снимок на узком экране обрезается до полосы — герой
   уезжает за край, а весит файл столько же. */
.rg-hero--home { background-image: url('../img/hero-home.webp'); }


.rg-hero__body { position: relative; z-index: 1; width: 100%; max-width: 56ch; }

.rg-hero__badge {
    display: inline-flex;
    align-items: center;
    padding: 6px var(--rg-s-3);
    margin-bottom: var(--rg-s-5);
    border: 1px solid color-mix(in srgb, var(--rg-bg) 28%, transparent);
    border-radius: var(--rg-r-pill);
    font-family: var(--rg-font-mono);
    font-size: var(--rg-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.rg-hero__title {
    overflow-wrap: normal;
    hyphens: none;
    margin: 0 0 var(--rg-s-5);
    color: var(--rg-bg);
    font-size: var(--rg-h1);
    font-weight: var(--rg-w-black);
    line-height: .94;
    letter-spacing: -.03em;
    text-transform: uppercase;
    text-shadow: 0 2px 24px color-mix(in srgb, var(--rg-taiga-deep) 45%, transparent);
}

.rg-hero__lead {
    max-width: 52ch;
    margin: 0 0 var(--rg-s-6);
    color: color-mix(in srgb, var(--rg-bg) 78%, transparent);
    font-size: var(--rg-body-lg);
    line-height: 1.55;
    text-wrap: pretty;
}

.rg-hero__actions { display: flex; flex-wrap: wrap; gap: var(--rg-s-3); }

/* Первый экран раздела «Стартовый разбор».
   Затемнение слабее, чем на других экранах: кадр здесь тёплый и светлый,
   и плотная зелёная вуаль делала из утра пасмурный день. Запас по контрасту
   позволяет — за заголовком остаётся кратно больше нормы 4.5. */
.rg-hero--start {
    background-image: url('../img/hero-start.webp');
    background-position: 50% 55%;
}
.rg-hero--start::before {
    background: linear-gradient(100deg,
        color-mix(in srgb, var(--rg-taiga-deep) 86%, transparent) 0%,
        color-mix(in srgb, var(--rg-taiga-deep) 66%, transparent) 44%,
        color-mix(in srgb, var(--rg-taiga-deep) 10%, transparent) 78%,
        color-mix(in srgb, var(--rg-taiga-deep) 22%, transparent) 100%);
}

/* Первый экран лендинга партнёрской программы: тот же компонент, другая
   фотография. Затемнение ослаблено — закатный кадр уходил в ночь, а запас
   по контрасту был четырёхкратный (замер по самой светлой точке под текстом). */
.rg-hero--partners {
    background-image: url('../img/hero-partners.webp');
    background-position: 58% 60%;
}
.rg-hero--partners::before {
    background: linear-gradient(100deg,
        color-mix(in srgb, var(--rg-taiga-deep) 76%, transparent) 0%,
        color-mix(in srgb, var(--rg-taiga-deep) 50%, transparent) 40%,
        color-mix(in srgb, var(--rg-taiga-deep) 8%, transparent) 76%,
        color-mix(in srgb, var(--rg-taiga-deep) 18%, transparent) 100%);
}

/* Вертикальные кадры для телефона. Блок стоит после всех модификаторов
   намеренно: специфичность у них одинаковая, и решает порядок. */
@media (max-width: 600px) {
    .rg-hero--home { background-image: url('../img/hero-home-mobile.webp'); }
    .rg-hero--partners { background-image: url('../img/hero-partners-mobile.webp'); }
    .rg-hero--start { background-image: url('../img/hero-start-mobile.webp'); }
}
.rg-hero--partners::after {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--rg-ink) 40%, transparent) 0%,
        transparent 30%,
        color-mix(in srgb, var(--rg-ink) 32%, transparent) 58%,
        color-mix(in srgb, var(--rg-ink) 66%, transparent) 100%);
}

/* ============================================================
   ЛИНЕЙКИ ТОВАРОВ
   ============================================================ */

/* Вертикальный ритм главной задан один раз — на самой странице (`.rg-home`).
   Секции держат только боковые поля: иначе отступ снизу одной и сверху
   следующей складываются или, наоборот, пропадают. */
.rg-line { padding: 0 var(--rg-gutter); }

.rg-line__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--rg-s-4);
    margin-bottom: var(--rg-s-2);
}
.rg-line__title {
    margin: 0;
    font-size: var(--rg-h2);
    font-weight: var(--rg-w-black);
    text-transform: uppercase;
}
.rg-line__count {
    font-family: var(--rg-font-mono);
    font-size: var(--rg-caption);
    color: var(--rg-muted);
}
.rg-line__lead {
    max-width: 60ch;
    margin: 0 0 var(--rg-s-6);
    color: var(--rg-muted);
    font-size: 15px;
}

/* Сетка ровно та же, что в каталоге (`.rg-catalog__grid`): карточка держит
   свой размер, число колонок зависит только от ширины экрана. Раньше у линеек
   был разный минимум колонки — 200 и 240 px, — и один и тот же гель выглядел
   крупнее в короткой линейке. В FOR LIFE две позиции, поэтому справа остаётся
   воздух: это честнее, чем растягивать карточки под остаток строки. */
/* Зазор между карточками: было 12 px, и в ряду из девяти карточки читались
   сплошной лентой. */
.rg-line__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--rg-s-5);
}

/* ============================================================
   КАРТОЧКА ТОВАРА
   ============================================================ */

.rg-card__media {
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    /* Квадрат вместо 5:4 — снимок стиков занимает больше места. */
    aspect-ratio: 1 / 1;
    background: var(--rg-surface);
    line-height: 0;
}
.rg-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Отступ минимальный: гель должен быть крупным, поля тут не нужны. */
    padding: var(--rg-s-1);
}

/* Позиции без фотографии: мягкая вкусовая подложка вместо плотной заливки —
   рядом с белыми карточками с фото сплошной цвет перевешивал ряд. */
.rg-card__media--empty {
    background: color-mix(in srgb, var(--rg-flavor, var(--rg-taiga)) 12%, var(--rg-surface));
}
.rg-card__media--empty .rg-card__placeholder { color: var(--rg-flavor, var(--rg-muted)); }

/* Пока фотографий товаров нет — подпись вместо пустого цветного поля. */
.rg-card__placeholder {
    padding: var(--rg-s-3);
    font-family: var(--rg-font-mono);
    font-size: 10px;
    letter-spacing: .04em;
    color: color-mix(in srgb, var(--rg-surface) 75%, transparent);
}

.rg-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    padding: var(--rg-s-4) var(--rg-s-4) 18px;
}

.rg-card__name {
    margin: 0;
    font-size: 19px;
    font-weight: var(--rg-w-extra);
    letter-spacing: -.01em;
    text-transform: uppercase;
    /* Названия товаров рвать посреди слова нельзя. */
    overflow-wrap: normal;
    hyphens: auto;
}
.rg-card__name a { color: var(--rg-ink); text-decoration: none; }
.rg-card__name a:hover { color: var(--rg-flavor, var(--rg-moss)); }

.rg-card__tag {
    flex: 1;
    margin: 0;
    color: var(--rg-muted);
    font-size: var(--rg-caption);
    line-height: 1.4;
}

/* Цена у левого края, кнопка у правого: рядом друг с другом они читались
   одним пятном, и цена как будто была частью кнопки. */
.rg-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--rg-s-3);
    margin-top: var(--rg-s-2);
}

/* Пока товар кладётся в корзину, кнопка гасится и не принимает второй клик. */
.rg-btn--buy.loading { opacity: .65; pointer-events: none; }

/* После добавления WooCommerce вставляет рядом с кнопкой ссылку «Просмотр
   корзины». В строке с ценой она не помещается — переносим её под них. */
.rg-card .added_to_cart {
    flex-basis: 100%;
    order: 3;
    margin-right: auto;
    color: var(--rg-flavor, var(--rg-moss));
    font-size: var(--rg-caption);
    font-weight: var(--rg-w-semi);
    text-decoration: none;
}
.rg-card .added_to_cart:hover { color: var(--rg-flavor, var(--rg-moss)); text-decoration: underline; }

.rg-card__price {
    font-family: var(--rg-font-display);
    font-size: 18px;
    font-weight: var(--rg-w-extra);
    color: var(--rg-ink);
}
.rg-card__price .woocommerce-Price-amount { color: inherit; }

.rg-card__out {
    font-family: var(--rg-font-mono);
    font-size: var(--rg-mono);
    text-transform: uppercase;
    color: var(--rg-faint);
}

/* ============================================================
   ЗАРАБАТЫВАЙ С RUNGEL
   ============================================================ */

/* ============================================================
   МОТИВ «НАСЕЧКА»
   ============================================================

   Наклонная метка под 115° — штрих движения из логотипа и отметка
   трейловой разметки. Ролей ровно две: текстура тёмного поля
   (`.rg-hatch`) и счётчик уровня (`.rg-ticks`). Больше нигде.

   Правило появления: только на сплошном тёмном поле и не больше
   одного такого поля на экран; никогда на светлом фоне, на фото
   и под мелким текстом. Угол, толщина и прозрачность не меняются —
   иначе это уже другой мотив. */

.rg-hatch { position: relative; overflow: hidden; isolation: isolate; }
.rg-hatch::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(115deg,
        color-mix(in srgb, var(--rg-bg) 8%, transparent) 0 2px,
        transparent 2px var(--rg-hatch-gap, 22px));
    -webkit-mask-image: linear-gradient(255deg, var(--rg-ink) 0 30%, transparent 74%);
            mask-image: linear-gradient(255deg, var(--rg-ink) 0 30%, transparent 74%);
}
.rg-hatch > * { position: relative; z-index: 1; }

/* Финишная лента: те же насечки, но плотные и снизу — так финальный
   призыв отличается от блока на главной, оставаясь тем же мотивом. */
.rg-hatch--finish::before {
    --rg-hatch-gap: 9px;
    -webkit-mask-image: linear-gradient(to top, var(--rg-ink) 0, transparent 60%);
            mask-image: linear-gradient(to top, var(--rg-ink) 0, transparent 60%);
}

/* Счётчик уровня: три слота, залито столько, сколько дано.
   Растущая высота читается как движение вверх. Цвет — currentColor,
   поэтому счётчик подходит и к моховому, и к золотому уровню. */
.rg-ticks { display: inline-flex; align-items: flex-end; gap: 4px; line-height: 0; }
.rg-ticks i {
    display: block;
    width: 4px;
    border-radius: 2px;
    background: currentColor;
    transform: skewX(-16deg);
    opacity: .24;
}
.rg-ticks i:nth-child(1) { height: 12px; }
.rg-ticks i:nth-child(2) { height: 17px; }
.rg-ticks i:nth-child(3) { height: 22px; }
.rg-ticks i.is-on { opacity: 1; }

/* ============================================================
   ЗАРАБОТОК НА ГЛАВНОЙ
   ============================================================ */
.rg-earn {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(var(--rg-s-5), 4vw, var(--rg-s-7));
    align-items: center;
    margin: 0 var(--rg-gutter);
    padding: clamp(26px, 4vw, 56px);
    border-radius: var(--rg-r-xl);
    background: var(--rg-taiga);
    color: var(--rg-bg);
}

.rg-earn__title {
    margin: 0 0 var(--rg-s-4);
    color: var(--rg-bg);
    font-size: var(--rg-h2);
    font-weight: var(--rg-w-black);
    line-height: .98;
    letter-spacing: -.02em;
    text-transform: uppercase;
}
.rg-earn__lead {
    max-width: 42ch;
    margin: 0 0 var(--rg-s-6);
    color: color-mix(in srgb, var(--rg-bg) 78%, transparent);
    font-size: var(--rg-body);
    line-height: 1.6;
}

/* Уровни идут лестницей: счётчик слева, выгода справа и крупнее
   с каждой ступенью. Раньше это были три одинаковые плашки, и рост
   от участника к амбассадору приходилось додумывать. */
.rg-earn__ladder { display: flex; flex-direction: column; gap: var(--rg-s-3); }

.rg-earn__step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--rg-s-4);
    min-height: var(--rg-tap-min);
    padding: var(--rg-s-4) var(--rg-s-5);
    border: 1px solid color-mix(in srgb, var(--rg-bg) 16%, transparent);
    border-radius: var(--rg-r-lg);
    background: color-mix(in srgb, var(--rg-bg) 6%, transparent);
}
.rg-earn__step .rg-ticks { color: var(--rg-moss-light); }

.rg-earn__name {
    font-family: var(--rg-font-display);
    font-size: var(--rg-body);
    font-weight: var(--rg-w-extra);
    letter-spacing: .02em;
    text-transform: uppercase;
}
.rg-earn__note {
    display: block;
    margin-top: 2px;
    font-size: var(--rg-caption);
    line-height: 1.45;
    color: color-mix(in srgb, var(--rg-bg) 70%, transparent);
}
.rg-earn__val {
    font-family: var(--rg-font-display);
    font-size: 20px;
    font-weight: var(--rg-w-black);
    letter-spacing: -.02em;
    white-space: nowrap;
    text-align: right;
}
.rg-earn__step--2 .rg-earn__val { font-size: 25px; }
.rg-earn__step--3 {
    background: color-mix(in srgb, var(--rg-bg) 11%, transparent);
    border-color: color-mix(in srgb, var(--rg-gold) 52%, transparent);
}
.rg-earn__step--3 .rg-ticks { color: var(--rg-gold); }
.rg-earn__step--3 .rg-earn__val { font-size: 31px; color: var(--rg-gold); }

@media (max-width: 860px) {
    .rg-earn { grid-template-columns: 1fr; gap: var(--rg-s-6); }
    .rg-earn__step { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--rg-s-2); }
    .rg-earn__val { grid-column: 2; text-align: left; }
}

/* ============================================================
   БЛОК РАЗДЕЛА «СТАРТОВЫЙ РАЗБОР»
   ============================================================ */

.rg-bot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    gap: clamp(var(--rg-s-5), 3.4vw, 52px);
    align-items: center;
    margin: 0 var(--rg-gutter);
    padding: clamp(22px, 3.4vw, 44px);
    background: var(--rg-surface);
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-r-xl);
}

.rg-bot__eyebrow {
    display: block;
    margin-bottom: var(--rg-s-3);
    color: var(--rg-moss);
    font-family: var(--rg-font-mono);
    font-size: var(--rg-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.rg-bot__title {
    margin: 0 0 var(--rg-s-3);
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: var(--rg-w-extra);
    line-height: 1.14;
    letter-spacing: -.02em;
    text-wrap: balance;
}
.rg-bot__lead {
    max-width: 46ch;
    margin: 0 0 var(--rg-s-6);
    color: var(--rg-text);
    font-size: var(--rg-body);
    line-height: 1.6;
}

/* Настоящий первый шаг разбора вместо заглушки: рисовать несуществующий
   экран результата нечестно, а живой вопрос сразу втягивает в опрос. */
.rg-bot__preview {
    padding: var(--rg-s-5);
    background: var(--rg-bg);
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-r-lg);
}
.rg-bot__meta {
    display: flex;
    align-items: center;
    gap: var(--rg-s-3);
    margin-bottom: var(--rg-s-4);
    font-family: var(--rg-font-mono);
    font-size: var(--rg-mono);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--rg-muted);
}
.rg-bot__bar {
    flex: 1;
    height: 6px;
    border-radius: var(--rg-r-pill);
    background: var(--rg-line);
    overflow: hidden;
}
.rg-bot__bar i {
    display: block;
    width: 6%;   /* первый шаг из семнадцати */
    height: 100%;
    border-radius: inherit;
    background: var(--rg-moss);
}
.rg-bot__q {
    margin: 0 0 var(--rg-s-4);
    font-family: var(--rg-font-display);
    font-size: var(--rg-h3);
    font-weight: var(--rg-w-extra);
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--rg-ink);
}
.rg-bot__answers { display: flex; flex-wrap: wrap; gap: var(--rg-s-2); }
.rg-bot__answers .rg-chip {
    width: auto;
    min-height: var(--rg-tap-min);
    padding: 12px 16px;
    gap: var(--rg-s-2);
    background: var(--rg-surface);
    font-size: var(--rg-body-sm);
    text-decoration: none;
}
.rg-bot__answers .rg-chip:hover { color: var(--rg-ink); border-color: var(--rg-moss); }
.rg-bot__dot {
    flex: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--rg-line-hover);
    border-radius: 50%;
}
.rg-bot__answers .rg-chip:hover .rg-bot__dot { border-color: var(--rg-moss); }
.rg-bot__more {
    margin: var(--rg-s-4) 0 0;
    font-size: var(--rg-caption);
    line-height: 1.5;
    color: var(--rg-muted);
}

@media (max-width: 860px) {
    .rg-bot { grid-template-columns: 1fr; }
}

/* ============================================================
   ОТЗЫВЫ
   ============================================================ */

.rg-reviews { padding: 0 var(--rg-gutter); }

.rg-reviews__head {
    display: flex;
    align-items: center;
    gap: var(--rg-s-4);
    margin-bottom: var(--rg-s-6);
}
.rg-reviews__head .rg-section-title { margin: 0; }

.rg-reviews__nav { display: flex; gap: var(--rg-s-2); margin-left: auto; }
.rg-reviews__nav[hidden] { display: none; }

.rg-reviews__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--rg-tap-min);
    height: var(--rg-tap-min);
    border: 1px solid var(--rg-line-strong);
    border-radius: var(--rg-r-pill);
    background: var(--rg-surface);
    color: var(--rg-ink);
    font-size: var(--rg-body);
    cursor: pointer;
    transition: border-color var(--rg-ease), opacity var(--rg-ease);
}
.rg-reviews__arrow:hover:not(:disabled) { border-color: var(--rg-taiga); }
.rg-reviews__arrow:disabled { opacity: .35; cursor: default; border-color: var(--rg-line); }

/* Отзывов больше, чем помещается в строку, а «пять и один» в остатке
   выглядит поломкой. Поэтому лента: одна строка на любой ширине, листается
   стрелками, свайпом и колесом. Карточка фиксированной ширины и прилипает
   к краю — прокрутка всегда останавливается на целом отзыве. */
.rg-reviews__track {
    /* `position: relative` здесь не для позиционирования: без него область
       прокрутки ленты складывалась с областью страницы, и весь сайт получал
       горизонтальную прокрутку на 660 px. Позиционированный бокс становится
       содержащим для карточек, и переполнение остаётся внутри ленты. */
    position: relative;
    display: flex;
    /* В одну строку карточки выравниваются по высоте: рваный низ в ленте
       читается как поломка, а не как разная длина отзывов. */
    align-items: stretch;
    gap: var(--rg-s-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    /* Место под тень и фокусную рамку карточек. */
    padding-bottom: var(--rg-s-2);
    scrollbar-width: none;
}
.rg-reviews__track::-webkit-scrollbar { display: none; }
.rg-reviews__track:focus-visible { outline: 0; box-shadow: var(--rg-focus); border-radius: var(--rg-r-lg); }

.rg-reviews__track > .rg-review {
    flex: 0 0 clamp(260px, 26vw, 340px);
    scroll-snap-align: start;
}

@media (prefers-reduced-motion: reduce) {
    .rg-reviews__track { scroll-behavior: auto; }
}

.rg-review {
    display: flex;
    flex-direction: column;
    gap: var(--rg-s-3);
    margin: 0;
    padding: var(--rg-s-5);
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-r-lg);
    background: var(--rg-surface);
}
.rg-review__text {
    flex: 1;
    margin: 0;
    color: var(--rg-ink-2);
    font-size: var(--rg-body);
    line-height: 1.6;
    text-wrap: pretty;
}
.rg-review__author {
    display: flex;
    align-items: center;
    gap: var(--rg-s-3);
    padding-top: var(--rg-s-3);
    border-top: 1px solid var(--rg-line-soft);
}
.rg-review__avatar {
    flex: none;
    width: var(--rg-tap-min);
    height: var(--rg-tap-min);
    border-radius: 50%;
    background: var(--rg-line);
    /* Портреты кадрированы по-разному — держим лицо в верхней части круга. */
    object-fit: cover;
    object-position: center top;
}

.rg-review__social {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--rg-tap-min);
    height: var(--rg-tap-min);
    margin-left: auto;
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-r-sm);
    color: var(--rg-muted);
    text-decoration: none;
}
.rg-review__social:hover { border-color: var(--rg-moss); color: var(--rg-moss); }
.rg-review__name {
    display: block;
    font-family: var(--rg-font-display);
    font-size: 15px;
    font-weight: var(--rg-w-bold);
    color: var(--rg-ink);
}
.rg-review__role { display: block; font-size: var(--rg-caption); color: var(--rg-muted); }

/* ============================================================
   АМБАССАДОРЫ И ПАРТНЁРЫ
   ============================================================ */

.rg-ambassadors { padding: 0 var(--rg-gutter); }

.rg-ambassadors__grid {
    display: grid;
    /* auto-fit, а не auto-fill: пустые колонки схлопываются и шесть карточек
       выстраиваются в одну ровную строку, а не «пять и один». */
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    align-items: start;
    gap: var(--rg-s-3);
    margin-bottom: 44px;
}

.rg-person {
    overflow: hidden;
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-r-lg);
    background: var(--rg-surface);
}
.rg-person__photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    /* Часть портретов почти квадратные: кадрируем по верху, чтобы не срезать лица. */
    object-fit: cover;
    object-position: center top;
    background: var(--rg-surface-muted);
}
.rg-person__body { display: flex; flex-direction: column; gap: 2px; padding: var(--rg-s-3); }

.rg-person__name {
    font-family: var(--rg-font-display);
    font-size: 15px;
    font-weight: var(--rg-w-extra);
    text-transform: uppercase;
    color: var(--rg-ink);
}
.rg-person__role { font-size: var(--rg-caption); color: var(--rg-muted); }

.rg-logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rg-s-3); }
.rg-logos__item {
    display: flex;
    flex: 1 1 120px;
    min-width: 110px;
    height: 92px;
    align-items: center;
    justify-content: center;
    padding: var(--rg-s-3) var(--rg-s-4);
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-r-md);
    background: var(--rg-bg);
}
/* Логотипы разного веса и пропорций: приглушаем, чтобы ряд читался как
   ряд, а не как набор чужих ярких картинок. Цвет возвращается на наведении. */
.rg-logos__item img {
    max-height: 44px;
    width: auto;
    max-width: 100%;
    filter: grayscale(1);
    opacity: .7;
    transition: filter .2s ease, opacity .2s ease;
}
a.rg-logos__item:hover { border-color: var(--rg-line-hover); }
a.rg-logos__item:hover img { filter: none; opacity: 1; }

/* ============================================================
   ПОДВАЛ
   ============================================================ */

.rg-footer {
    padding: clamp(32px, 4vw, 56px) var(--rg-gutter);
    background: var(--rg-ink);
    color: var(--rg-bg);
}

/* Плавающая кнопка «Подобрать гель» висит над концом страницы: подвал
   оставляет ей место, иначе внизу она закрывает контакты. */
.rg-page:has(.rg-fab) .rg-footer {
    padding-bottom: calc(clamp(32px, 4vw, 56px) + 96px);
}

.rg-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--rg-s-6);
    margin-bottom: var(--rg-s-6);
}

.rg-footer__logo {
    /* В ассете нет пустых полей: высота — это высота самой марки. */
    height: 34px;
    width: auto;
    margin-bottom: 18px;
}
.rg-footer__about {
    max-width: 34ch;
    margin: 0;
    color: color-mix(in srgb, var(--rg-bg) 60%, transparent);
    font-size: var(--rg-body-sm);
}

.rg-footer__col { display: flex; flex-direction: column; gap: var(--rg-s-2); font-size: var(--rg-body-sm); }
.rg-footer__col a { color: color-mix(in srgb, var(--rg-bg) 82%, transparent); text-decoration: none; }
.rg-footer__col a:hover { color: var(--rg-bg); }

.rg-footer__title {
    font-family: var(--rg-font-mono);
    font-size: var(--rg-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--rg-bg) 40%, transparent);
}

.rg-footer__socials { display: flex; gap: var(--rg-s-2); margin-top: var(--rg-s-1); }
/* Селектор длиннее необходимого намеренно: рядом живёт правило
   `.rg-footer__col a:hover`, и короткая запись ему проигрывает. */
.rg-footer__socials .rg-footer__social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--rg-tap-min);
    height: var(--rg-tap-min);
    border: 1px solid color-mix(in srgb, var(--rg-bg) 22%, transparent);
    border-radius: var(--rg-r-sm);
    color: color-mix(in srgb, var(--rg-bg) 82%, transparent);
}
.rg-footer__socials .rg-footer__social:hover {
    border-color: var(--rg-moss-light);
    color: var(--rg-moss-light);
}

.rg-footer__legal {
    padding-top: var(--rg-s-5);
    border-top: 1px solid color-mix(in srgb, var(--rg-bg) 12%, transparent);
    font-size: 12px;
    color: color-mix(in srgb, var(--rg-bg) 45%, transparent);
}

/* ============================================================
   СТРАНИЦА НЕ НАЙДЕНА
   ============================================================

   Экран короткий, поэтому задаём ему минимальную высоту: без неё подвал
   уезжает наверх и под ним остаётся пустое поле в половину экрана. */

.rg-404 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: min(60vh, 520px);
    /* Боковых полей не держим: их уже задал контейнер `.site-content`,
       второй отступ уводил бы заголовок правее шапки. */
    padding: clamp(24px, 5vw, 64px) 0;
}
.rg-404__code {
    margin: 0 0 var(--rg-s-4);
    font-family: var(--rg-font-mono);
    font-size: var(--rg-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rg-muted);
}
.rg-404__title {
    max-width: 16ch;
    margin: 0 0 var(--rg-s-4);
    font-size: var(--rg-h1);
    font-weight: var(--rg-w-black);
    line-height: .96;
    letter-spacing: -.03em;
    text-transform: uppercase;
}
.rg-404__lead {
    max-width: 46ch;
    margin: 0 0 var(--rg-s-6);
    color: var(--rg-muted);
    font-size: var(--rg-body-lg);
}
.rg-404__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rg-s-3);
    margin: 0 0 var(--rg-s-7);
}
.rg-404__search { width: min(100%, 480px); }

@media (max-width: 600px) {
    .rg-404 { min-height: 0; }
}

/* ============================================================
   УВЕДОМЛЕНИЕ О COOKIE
   ============================================================

   Полосу рисует Clearfy, и кнопка у него синяя — единственное место
   на сайте, где появляется чужой цвет. Красим только кнопку: сама полоса
   и её разметка остаются плагину, иначе обновление придётся догонять
   правками стилей. */

.clearfy-cookie-container .clearfy-cookie-accept {
    min-height: 36px;
    padding: 8px 20px;
    background: var(--rg-taiga);
    border: 0;
    border-radius: var(--rg-r-pill);
    color: var(--rg-bg);
    font-family: var(--rg-font-display);
    font-size: var(--rg-caption);
    font-weight: var(--rg-w-bold);
    cursor: pointer;
    transition: background var(--rg-ease);
}
.clearfy-cookie-container .clearfy-cookie-accept:hover {
    background: var(--rg-moss);
    color: var(--rg-bg);
}
.clearfy-cookie-container .clearfy-cookie-accept:focus-visible {
    outline: 0;
    box-shadow: var(--rg-focus);
}

/* ============================================================
   ПЛАВАЮЩАЯ КНОПКА
   ============================================================ */

.rg-fab {
    position: sticky;
    bottom: 0;
    z-index: 60;
    display: flex;
    justify-content: flex-end;
    height: 0;
    padding: 0 18px;
    pointer-events: none;
}

.rg-fab__btn {
    display: flex;
    align-items: center;
    gap: var(--rg-s-2);
    min-height: var(--rg-btn-h);
    padding: var(--rg-s-4) var(--rg-s-5);
    transform: translateY(-78px);
    border-radius: var(--rg-r-pill);
    background: var(--rg-moss);
    color: var(--rg-surface);
    font-family: var(--rg-font-display);
    font-size: 15px;
    font-weight: var(--rg-w-extra);
    text-decoration: none;
    box-shadow: var(--rg-shadow-float);
    pointer-events: auto;
}
.rg-fab__btn:hover { background: var(--rg-taiga); color: var(--rg-surface); }

.rg-fab__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--rg-surface);
    animation: rgPulse 2s infinite;
}

@keyframes rgPulse {
    0%, 100% { opacity: .25; transform: scale(.9); }
    50%      { opacity: 1;   transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
    .rg-fab__dot { animation: none; opacity: 1; }
}

/* ============================================================
   КАРТОЧКА ТОВАРА
   ============================================================ */

.rg-product { width: 100%; }

/* Поля крошки не держит: в колоночной вёрстке их уже задал `.rg-fixed`,
   и второй отступ сдвигал бы строку правее заголовка страницы. */
.rg-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rg-s-2);
    padding: var(--rg-s-3) 0;
    font-size: var(--rg-caption);
    color: var(--rg-muted);
}

/* Поля крошкам нужны только там, где их не задал контейнер. Такой случай
   один — карточка товара: она идёт от края до края, а отступы держат
   секции внутри неё. */
.rg-product > .rg-crumbs { padding-inline: var(--rg-gutter); }
.rg-crumbs a { color: var(--rg-muted); text-decoration: none; }
.rg-crumbs a:hover { color: var(--rg-ink); }
.rg-crumbs [aria-current] { color: var(--rg-ink); }

.rg-product__top {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(var(--rg-s-5), 3vw, var(--rg-s-7));
    align-items: start;
    padding: 0 var(--rg-gutter) clamp(28px, 4vw, 56px);
}

.rg-product__media {
    display: flex;
    align-items: flex-end;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--rg-r-xl);
    background: var(--rg-surface);
}

/* На широком экране колонка растёт вместе со страницей, и снимок занимал
   пол-экрана. Ограничиваем саму колонку, а не картинку внутри неё: иначе
   рядом со снимком остаётся пустая полоса. */
@media (min-width: 1200px) {
    .rg-product__top { grid-template-columns: 520px minmax(0, 1fr); }
}
.rg-product__media--empty {
    background: color-mix(in srgb, var(--rg-flavor, var(--rg-taiga)) 12%, var(--rg-surface));
}
.rg-product__media--empty .rg-product__stub { color: var(--rg-flavor, var(--rg-muted)); }
.rg-product__media img {
    width: 100%;
    height: 100%;
    /* Снимок с прозрачным фоном: показываем композицию целиком и крупно. */
    object-fit: contain;
    padding: var(--rg-s-2);
}

.rg-product__stub {
    padding: var(--rg-s-5);
    font-family: var(--rg-font-mono);
    font-size: var(--rg-mono);
    letter-spacing: .04em;
    color: color-mix(in srgb, var(--rg-surface) 80%, transparent);
}

.rg-product__pill {
    display: inline-flex;
    padding: 6px var(--rg-s-3);
    border-radius: var(--rg-r-pill);
    background: color-mix(in srgb, var(--rg-flavor, var(--rg-taiga)) 12%, transparent);
    color: var(--rg-flavor, var(--rg-taiga));
    font-family: var(--rg-font-mono);
    font-size: var(--rg-mono);
    letter-spacing: .07em;
    text-transform: uppercase;
}

.rg-product__title {
    overflow-wrap: normal;
    hyphens: auto;
    margin: var(--rg-s-3) 0 var(--rg-s-3);
    font-size: clamp(34px, 6vw, 64px);
    font-weight: var(--rg-w-black);
    line-height: .96;
    letter-spacing: -.03em;
    text-transform: uppercase;
}

.rg-product__subtitle {
    max-width: 44ch;
    margin: 0 0 var(--rg-s-5);
    font-size: var(--rg-body-lg);
    line-height: 1.5;
    color: var(--rg-text);
}

.rg-product__price {
    margin-bottom: var(--rg-s-5);
    font-family: var(--rg-font-display);
    font-size: clamp(28px, 3.4vw, 38px);
    font-weight: var(--rg-w-black);
    letter-spacing: -.02em;
    color: var(--rg-ink);
}
.rg-product__price .woocommerce-Price-amount { color: inherit; }

/* Штатную форму WooCommerce не переписываем — приводим к дизайн-системе. */
.rg-product__info form.cart {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rg-s-3);
    margin: 0 0 var(--rg-s-5);
}
.rg-product__info form.cart .quantity input {
    width: 90px;
    min-height: var(--rg-btn-h);
    padding: 0 var(--rg-s-3);
    border: 1.5px solid var(--rg-line);
    border-radius: var(--rg-r-md);
    background: var(--rg-surface);
    font-family: var(--rg-font-text);
    font-size: var(--rg-body);
    text-align: center;
}
.rg-product__info form.cart button[type="submit"] {
    min-height: var(--rg-btn-h);
    padding: 14px 28px;
    border: 0;
    border-radius: var(--rg-r-pill);
    background: var(--rg-taiga);
    color: var(--rg-bg);
    font-family: var(--rg-font-display);
    font-size: var(--rg-body);
    font-weight: var(--rg-w-extra);
    cursor: pointer;
    transition: background var(--rg-ease), transform var(--rg-ease);
}
/* Одинаковая кнопка «в корзину» не должна вести себя по-разному в двух
   местах: и цвет, и наведение те же, что у «Купить» в каталоге. */
.rg-product__info form.cart button[type="submit"]:hover {
    background: var(--rg-taiga-deep);
    transform: translateY(-1px);
}
.rg-product__info form.cart button[type="submit"]:focus-visible { outline: 0; box-shadow: var(--rg-focus); }
.rg-product__info form.cart button[type="submit"].loading { opacity: .65; pointer-events: none; }
.rg-product__info form.cart button[type="submit"].is-added { background: var(--rg-moss); }

/* Ссылка появляется после добавления товара — подтверждение и быстрый путь
   в корзину, вместо уведомления магазина во всю ширину страницы. */
.rg-product__added {
    display: inline-block;
    margin-top: var(--rg-s-3);
    color: var(--rg-flavor, var(--rg-moss));
    font-size: var(--rg-body-sm);
    font-weight: var(--rg-w-semi);
}

.rg-product__facts {
    display: flex;
    flex-direction: column;
    gap: var(--rg-s-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--rg-body-sm);
    color: var(--rg-text);
}
.rg-product__facts li { display: flex; gap: var(--rg-s-2); }
.rg-product__facts li::before { content: '●'; color: var(--rg-moss); }

.rg-product__section { padding: 0 var(--rg-gutter) var(--rg-block); }
.rg-product__section--last { padding-bottom: var(--rg-section); }

.rg-product__heading {
    margin: 0 0 18px;
    font-size: var(--rg-h3);
    font-weight: var(--rg-w-black);
    letter-spacing: -.02em;
    text-transform: uppercase;
}
.rg-product__note {
    margin: 0 0 18px;
    font-family: var(--rg-font-mono);
    font-size: var(--rg-caption);
    color: var(--rg-muted);
}
.rg-product__footnote { margin: var(--rg-s-3) 0 0; font-size: 12px; color: var(--rg-faint); }

/* --- Панель «Для кого и когда» --- */

.rg-panel {
    padding: clamp(20px, 3vw, 36px);
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-r-xl);
    background: var(--rg-surface);
}
.rg-panel__title { margin: 0 0 var(--rg-s-3); font-size: var(--rg-h3); font-weight: var(--rg-w-extra); }
.rg-panel__text { max-width: 70ch; margin: 0; font-size: var(--rg-body); line-height: 1.65; text-wrap: pretty; }

/* --- Функции ингредиентов --- */

.rg-ingredients {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    align-items: start;
    gap: var(--rg-s-3);
}

.rg-ingredient {
    display: flex;
    flex-direction: column;
    gap: var(--rg-s-2);
    padding: 18px;
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-r-lg);
    background: var(--rg-surface);
}
.rg-ingredient__mark {
    width: 28px;
    height: 4px;
    border-radius: 2px;
    background: var(--rg-flavor, var(--rg-moss));
}
.rg-ingredient__name { margin: 0; font-size: 15px; font-weight: var(--rg-w-extra); letter-spacing: -.01em; }
.rg-ingredient__text { margin: 0; font-size: var(--rg-caption); line-height: 1.5; color: var(--rg-muted); }

/* --- Таблицы пищевой ценности --- */

.rg-nutrition {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: start;
    gap: var(--rg-s-3);
}
.rg-table--macros td:first-child,
.rg-table--micro td:first-child { color: var(--rg-ink-2); }
.rg-table--macros td:last-child,
.rg-table--micro td:nth-child(2) {
    font-family: var(--rg-font-display);
    font-size: 15px;
    font-weight: var(--rg-w-bold);
    color: var(--rg-ink);
    text-align: right;
}
.rg-table--micro td:last-child {
    width: 74px;
    font-family: var(--rg-font-mono);
    font-size: var(--rg-caption);
    color: var(--rg-flavor, var(--rg-moss));
    text-align: right;
}
.rg-table--micro th:last-child, .rg-table--micro th:nth-child(2) { text-align: right; }

/* --- Полный состав --- */

.rg-details {
    overflow: hidden;
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-r-lg);
    background: var(--rg-surface);
}
.rg-details__summary {
    display: flex;
    align-items: center;
    gap: var(--rg-s-3);
    min-height: 64px;
    padding: 22px clamp(18px, 2.5vw, 28px);
    font-family: var(--rg-font-display);
    font-size: clamp(17px, 2vw, 21px);
    font-weight: var(--rg-w-extra);
    color: var(--rg-ink);
    cursor: pointer;
    list-style: none;
}
.rg-details__summary::-webkit-details-marker { display: none; }
.rg-details__summary:hover { color: var(--rg-taiga); background: var(--rg-surface-muted); }
.rg-details__summary:focus-visible { outline: 0; box-shadow: var(--rg-focus); }

.rg-details__icon {
    position: relative;
    width: 20px;
    height: 20px;
    margin-left: auto;
    flex: none;
}
.rg-details__icon::before,
.rg-details__icon::after {
    content: '';
    position: absolute;
    inset: 50% 0 auto 0;
    height: 2px;
    border-radius: 2px;
    background: var(--rg-muted);
    transition: transform var(--rg-ease);
}
.rg-details__icon::after { transform: rotate(90deg); }
.rg-details[open] .rg-details__icon::after { transform: rotate(0deg); }

.rg-details__body { padding: 0 clamp(18px, 2.5vw, 28px) var(--rg-s-5); }
.rg-details__text { margin: 0; font-size: 15px; line-height: 1.7; color: var(--rg-text); }
.rg-details__meta {
    margin: var(--rg-s-4) 0 0;
    font-size: var(--rg-caption);
    line-height: 1.6;
    color: var(--rg-muted);
}

/* --- Другие вкусы линейки --- */

.rg-others {
    display: grid;
    /* 165px: на телефоне влезают две колонки вместо одной, а длинные
       названия вроде «Восстановление» не рвутся посреди слова. */
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: var(--rg-s-3);
}

.rg-other {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-r-lg);
    background: var(--rg-surface);
    text-decoration: none;
    transition: transform var(--rg-ease), box-shadow var(--rg-ease);
}
.rg-other:hover { transform: translateY(-3px); box-shadow: var(--rg-shadow-card); }
.rg-other__swatch {
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--rg-surface);
    line-height: 0;
}
.rg-other__swatch img { width: 100%; height: 100%; object-fit: contain; padding: var(--rg-s-1); }
.rg-other__swatch--empty {
    background: color-mix(in srgb, var(--rg-flavor, var(--rg-taiga)) 12%, var(--rg-surface));
}
.rg-other__body { display: flex; flex-direction: column; gap: 2px; padding: var(--rg-s-3); }
.rg-other__name {
    font-family: var(--rg-font-display);
    font-size: 15px;
    font-weight: var(--rg-w-extra);
    text-transform: uppercase;
    color: var(--rg-ink);
    /* Названия рвать посреди слова нельзя. */
    overflow-wrap: normal;
    hyphens: auto;
}
.rg-other__price { font-size: var(--rg-caption); color: var(--rg-muted); }
.rg-other__arrow {
    padding: 0 var(--rg-s-3) var(--rg-s-3);
    margin-top: auto;
    font-size: 18px;
    color: var(--rg-faint);
    text-align: right;
}

/* На телефоне каталог идёт в две колонки: с крупными снимками одна колонка
   растягивала бы линейку из семи гелей на три экрана прокрутки. */
@media (max-width: 600px) {
    .rg-line__grid,
    .rg-line--for_life .rg-line__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--rg-s-4);
    }
    .rg-card__body { padding: var(--rg-s-3); }
    .rg-card__name { font-size: 16px; }
    .rg-card__foot { flex-wrap: wrap; }
}

/* «Для кого и когда» внутри правой колонки карточки товара. */
.rg-panel--inline {
    margin-top: var(--rg-s-5);
    padding: var(--rg-s-5);
    border-radius: var(--rg-r-lg);
}
.rg-panel--inline .rg-panel__title { font-size: 19px; }
.rg-panel--inline .rg-panel__text { font-size: 15px; }

/* ============================================================
   КАТАЛОГ
   ============================================================ */

.rg-catalog {
    /* Явная ширина: без неё каталог из двух позиций занимал половину
       экрана вместо всей ширины. */
    width: 100%;
    padding: 0 0 var(--rg-section);
}

.rg-catalog__head { padding: var(--rg-section) var(--rg-gutter) var(--rg-s-6); }

.rg-catalog__heading {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--rg-s-4);
}
.rg-catalog__title {
    margin: 0;
    font-size: var(--rg-h2);
    font-weight: var(--rg-w-black);
    text-transform: uppercase;
}
.rg-catalog__count {
    font-family: var(--rg-font-mono);
    font-size: var(--rg-caption);
    color: var(--rg-muted);
}
.rg-catalog__lead {
    max-width: 60ch;
    margin: var(--rg-s-2) 0 var(--rg-s-5);
    color: var(--rg-muted);
    font-size: 15px;
}

.rg-catalog__filters { display: flex; flex-wrap: wrap; gap: var(--rg-s-2); }

/* Чип-фильтр: тот же компонент, что в разделе «Стартовый разбор». */
.rg-catalog__filters .rg-chip {
    width: auto;
    min-height: var(--rg-tap-min);
    padding: var(--rg-s-3) var(--rg-s-5);
    border-radius: var(--rg-r-pill);
    font-size: var(--rg-body-sm);
    text-decoration: none;
}
.rg-catalog__filters .rg-chip--active {
    background: var(--rg-taiga);
    border-color: var(--rg-taiga);
    color: var(--rg-bg);
}

.rg-catalog__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--rg-s-5);
    padding: 0 var(--rg-gutter);
}

.rg-catalog__empty { padding: 0 var(--rg-gutter); color: var(--rg-muted); }

/* Пагинация WooCommerce — своей разметки не пишем, приводим к токенам. */
.rg-catalog .woocommerce-pagination { padding: var(--rg-s-6) var(--rg-gutter) 0; }
.rg-catalog .woocommerce-pagination ul {
    display: flex;
    gap: var(--rg-s-2);
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0;
}
.rg-catalog .woocommerce-pagination li { border: 0; }
.rg-catalog .woocommerce-pagination a,
.rg-catalog .woocommerce-pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--rg-tap-min);
    min-height: var(--rg-tap-min);
    padding: 0 var(--rg-s-3);
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-r-sm);
    background: var(--rg-surface);
    color: var(--rg-ink);
    font-family: var(--rg-font-display);
    font-weight: var(--rg-w-semi);
    text-decoration: none;
}
.rg-catalog .woocommerce-pagination .current {
    background: var(--rg-taiga);
    border-color: var(--rg-taiga);
    color: var(--rg-bg);
}

@media (max-width: 600px) {
    .rg-catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rg-s-4); }
}

/* ============================================================
   ЛЕНДИНГ ПАРТНЁРСКОЙ ПРОГРАММЫ
   ============================================================ */

.rg-partners { width: 100%; }

.rg-partners__heading {
    margin: 0 0 18px;
    font-size: var(--rg-h3);
    font-weight: var(--rg-w-black);
    letter-spacing: -.02em;
    text-transform: uppercase;
}

/* --- Три уровня --- */

.rg-tiers { padding: var(--rg-section) var(--rg-gutter) 0; }

.rg-tiers__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    align-items: stretch;
    gap: var(--rg-s-3);
}

.rg-tier {
    display: flex;
    flex-direction: column;
    padding: clamp(20px, 2.5vw, 30px);
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-r-xl);
    background: var(--rg-surface);
}

/* Амбассадор — целевой уровень, поэтому выделен тёмной карточкой. */
.rg-tier--ambassador {
    background: var(--rg-taiga);
    border-color: var(--rg-taiga);
    color: var(--rg-bg);
}
.rg-tier--ambassador .rg-tier__name,
.rg-tier--ambassador .rg-tier__rate { color: var(--rg-bg); }
.rg-tier--ambassador .rg-tier__num { color: color-mix(in srgb, var(--rg-bg) 55%, transparent); }
.rg-tier--ambassador .rg-tier__perks li { color: color-mix(in srgb, var(--rg-bg) 78%, transparent); }
.rg-tier--ambassador .rg-tier__perks li::before { color: var(--rg-gold); }

.rg-tier__head { display: flex; align-items: center; gap: var(--rg-s-3); margin-bottom: var(--rg-s-4); }
.rg-tier__head .rg-ticks { margin-left: auto; color: var(--rg-moss); }
.rg-tier--ambassador .rg-tier__head .rg-ticks { color: var(--rg-gold); }

.rg-tier__num {
    font-family: var(--rg-font-mono);
    font-size: var(--rg-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rg-muted);
}

.rg-tier__name {
    margin: 0 0 var(--rg-s-2);
    font-size: var(--rg-h3);
    font-weight: var(--rg-w-black);
    text-transform: uppercase;
    letter-spacing: -.01em;
}
.rg-tier__rate {
    margin: 0;
    font-family: var(--rg-font-display);
    font-size: 17px;
    font-weight: var(--rg-w-bold);
    color: var(--rg-moss);
}

.rg-tier__perks {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--rg-s-2);
    margin: 18px 0 22px;
    padding: 0;
    list-style: none;
    font-size: var(--rg-body-sm);
    line-height: 1.5;
    color: var(--rg-text);
}
.rg-tier__perks li { display: flex; gap: var(--rg-s-2); }
.rg-tier__perks li::before { content: '●'; flex: none; color: var(--rg-moss); font-size: 10px; line-height: 1.7; }

.rg-tier__cta {
    justify-content: center;
    background: var(--rg-surface-muted);
    color: var(--rg-ink);
    border: 1.5px solid var(--rg-line);
}
.rg-tier__cta:hover { border-color: var(--rg-taiga); color: var(--rg-ink); }
.rg-tier--partner .rg-tier__cta { background: var(--rg-taiga); border-color: var(--rg-taiga); color: var(--rg-bg); }
.rg-tier--partner .rg-tier__cta:hover { background: var(--rg-taiga-deep); color: var(--rg-bg); }
.rg-tier--ambassador .rg-tier__cta { background: var(--rg-bg); border-color: var(--rg-bg); color: var(--rg-ink); }
.rg-tier--ambassador .rg-tier__cta:hover { background: var(--rg-surface); color: var(--rg-ink); }

/* --- Сводная таблица --- */

.rg-compare { padding: var(--rg-section) var(--rg-gutter) 0; }

/* Узкая таблица прокручивается внутри себя, а не ломает страницу. */
.rg-compare__scroll {
    overflow-x: auto;
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-r-lg);
    background: var(--rg-surface);
}
.rg-compare__table { min-width: 520px; border: 0; }
.rg-compare__table th[scope="row"] {
    font-family: var(--rg-font-text);
    font-size: var(--rg-body-sm);
    font-weight: var(--rg-w-regular);
    color: var(--rg-text);
    text-align: left;
    background: transparent;
    text-transform: none;
    letter-spacing: 0;
    padding: 14px 18px;
}
.rg-compare__table td {
    font-family: var(--rg-font-text);
    font-size: var(--rg-body-sm);
    font-weight: var(--rg-w-semi);
    color: var(--rg-ink);
    text-align: left;
}
/* В нутриентной таблице последняя колонка — «% РСП» и красится акцентом.
   Здесь последняя колонка это «Амбассадор», акцент к ней отношения не имеет. */
.rg-compare__table td:last-child {
    font-family: var(--rg-font-text);
    font-size: var(--rg-body-sm);
    color: var(--rg-ink);
    text-align: left;
}

/* --- Калькулятор --- */

/* Инструмент светлый, тёмным остаётся только результат: чёрное поле
   во всю ширину выглядело траурно и отталкивало от того, чем как раз
   хочется поиграть. Тёмное пятно на странице теперь одно — финальное. */
.rg-calc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
    gap: clamp(var(--rg-s-5), 3vw, 48px);
    /* Тот же вертикальный ритм, что у соседних секций: они держат
       `padding: var(--rg-section)` сверху, а карточка — margin. */
    margin: var(--rg-section) var(--rg-gutter) 0;
    padding: clamp(22px, 3.4vw, 44px);
    background: var(--rg-surface);
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-r-xl);
}

.rg-calc__title {
    margin: 0 0 var(--rg-s-3);
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: var(--rg-w-black);
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: var(--rg-ink);
}
.rg-calc__lead {
    max-width: 44ch;
    margin: 0 0 var(--rg-s-7);
    color: var(--rg-text);
    font-size: var(--rg-body-sm);
    line-height: 1.6;
}

.rg-calc__value {
    display: flex;
    align-items: baseline;
    gap: var(--rg-s-3);
    margin: 0;
}
.rg-calc__value output {
    font-family: var(--rg-font-display);
    font-size: clamp(42px, 5.4vw, 64px);
    font-weight: var(--rg-w-black);
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--rg-ink);
}
.rg-calc__value span { font-size: var(--rg-body-sm); color: var(--rg-muted); }

.rg-calc__range {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: var(--rg-tap-min);
    margin: var(--rg-s-4) 0 0;
    background: transparent;
    cursor: pointer;
}
.rg-calc__range:focus-visible { outline: 0; border-radius: var(--rg-r-pill); box-shadow: var(--rg-focus); }
.rg-calc__range::-webkit-slider-runnable-track {
    height: 10px;
    border-radius: var(--rg-r-pill);
    background: linear-gradient(to right,
        var(--rg-moss) 0 var(--rg-p, 18%),
        var(--rg-line) var(--rg-p, 18%) 100%);
}
.rg-calc__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
    margin-top: -9px;
    border: 4px solid var(--rg-surface);
    border-radius: 50%;
    background: var(--rg-taiga);
}
.rg-calc__range::-moz-range-track { height: 10px; border-radius: var(--rg-r-pill); background: var(--rg-line); }
.rg-calc__range::-moz-range-progress { height: 10px; border-radius: var(--rg-r-pill); background: var(--rg-moss); }
.rg-calc__range::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border: 4px solid var(--rg-surface);
    border-radius: 50%;
    background: var(--rg-taiga);
}

/* Разметка шкалы теми же насечками — единственное место, где мотив
   выходит на светлый фон: здесь это разметка инструмента, а не фон. */
.rg-calc__marks {
    height: 10px;
    margin-top: 2px;
    background-image: repeating-linear-gradient(115deg,
        var(--rg-line-strong) 0 1px, transparent 1px 13px);
}
.rg-calc__scale {
    display: flex;
    justify-content: space-between;
    margin-top: var(--rg-s-2);
    font-family: var(--rg-font-mono);
    font-size: var(--rg-mono);
    color: var(--rg-muted);
}

.rg-calc__results { display: flex; flex-direction: column; gap: var(--rg-s-3); }

.rg-calc__card {
    padding: var(--rg-s-5);
    background: var(--rg-bg);
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-r-lg);
}
.rg-calc__card--accent {
    background: var(--rg-taiga);
    border-color: var(--rg-taiga);
    color: var(--rg-bg);
}

.rg-calc__label {
    display: block;
    margin-bottom: var(--rg-s-2);
    font-family: var(--rg-font-mono);
    font-size: var(--rg-mono);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--rg-muted);
}
.rg-calc__card--accent .rg-calc__label { color: var(--rg-moss-light); }

.rg-calc__sum {
    font-family: var(--rg-font-display);
    font-size: clamp(26px, 3vw, 34px);
    font-weight: var(--rg-w-black);
    line-height: 1.05;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--rg-ink);
}
.rg-calc__card--accent .rg-calc__sum {
    font-size: clamp(32px, 4vw, 46px);
    color: var(--rg-moss-light);
}

.rg-calc__note { display: block; margin-top: var(--rg-s-2); font-size: var(--rg-caption); color: var(--rg-muted); }
.rg-calc__card--accent .rg-calc__note { color: color-mix(in srgb, var(--rg-bg) 72%, transparent); }

.rg-calc__gain {
    display: block;
    width: 100%;
    height: 8px;
    margin-top: var(--rg-s-4);
    border-radius: var(--rg-r-pill);
    background: color-mix(in srgb, var(--rg-bg) 18%, transparent);
    overflow: hidden;
}
.rg-calc__gain i {
    display: block;
    width: var(--rg-p, 18%);
    height: 100%;
    border-radius: inherit;
    background: var(--rg-moss-light);
    transition: width var(--rg-ease);
}

.rg-calc__disclaimer {
    margin: var(--rg-s-3) 0 0;
    font-size: var(--rg-caption);
    line-height: 1.5;
    color: var(--rg-muted);
}

@media (max-width: 860px) {
    .rg-calc { grid-template-columns: 1fr; }
}

/* --- Как это работает --- */

.rg-steps { padding: var(--rg-section) var(--rg-gutter) 0; }

.rg-steps__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--rg-s-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rg-step {
    padding: 22px;
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-r-lg);
    background: var(--rg-surface);
}
.rg-step__num {
    display: block;
    margin-bottom: var(--rg-s-3);
    font-family: var(--rg-font-display);
    font-size: 36px;
    font-weight: var(--rg-w-black);
    line-height: 1;
    color: var(--rg-line);
}
.rg-step__title { margin: 0 0 6px; font-size: var(--rg-body); font-weight: var(--rg-w-extra); }
.rg-step__text { margin: 0; font-size: var(--rg-body-sm); line-height: 1.55; color: var(--rg-muted); }

/* --- Вопросы --- */

.rg-faq { padding: var(--rg-section) var(--rg-gutter) 0; }
.rg-faq__list { display: flex; flex-direction: column; gap: var(--rg-s-2); }
.rg-faq .rg-details__summary { min-height: 60px; padding: 20px; font-size: var(--rg-body); font-weight: var(--rg-w-bold); }
.rg-faq .rg-details__body { padding: 0 20px 20px; }

/* --- Финальный призыв --- */

/* Финальный призыв: узкая колонка на самом тёмном поле страницы,
   насечки собираются в плотную финишную ленту снизу — так он отличается
   от блока «Зарабатывай» на главной, оставаясь тем же мотивом. */
.rg-pcta {
    margin: var(--rg-section) var(--rg-gutter);
    padding: clamp(36px, 5vw, 72px) clamp(20px, 4vw, 48px) clamp(30px, 4vw, 56px);
    border-radius: var(--rg-r-xl);
    background: var(--rg-taiga-deep);
    color: var(--rg-bg);
    text-align: center;
}
.rg-pcta__inner { max-width: 44ch; margin: 0 auto; }
.rg-pcta__title {
    margin: 0 0 var(--rg-s-4);
    /* Цвет задаём явно: заголовки на светлых страницах красит общее
       правило, и на тёмном поле надпись уходила в чёрный. */
    color: var(--rg-bg);
    font-size: var(--rg-h2);
    font-weight: var(--rg-w-black);
    line-height: 1;
    letter-spacing: -.02em;
    text-transform: uppercase;
}
.rg-pcta__lead {
    margin: 0 0 var(--rg-s-6);
    color: color-mix(in srgb, var(--rg-bg) 78%, transparent);
    font-size: var(--rg-body);
    line-height: 1.6;
}
.rg-pcta__facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--rg-s-2) var(--rg-s-5);
    margin: var(--rg-s-6) 0 0;
    padding: 0;
    list-style: none;
    font-family: var(--rg-font-mono);
    font-size: var(--rg-mono);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--rg-bg) 66%, transparent);
}
.rg-pcta__facts li { display: flex; align-items: center; gap: var(--rg-s-2); }
.rg-pcta__facts li::before {
    content: '';
    width: 4px;
    height: 12px;
    border-radius: 2px;
    background: currentColor;
    transform: skewX(-16deg);
}
/* ============================================================
   КОРЗИНА И ОФОРМЛЕНИЕ ЗАКАЗА

   Обе страницы собраны блоками WooCommerce: разметку мы не трогаем,
   иначе каждое обновление магазина ломало бы вёрстку. Приводим к
   дизайн-системе только оформлением — наши стили подключаются после
   `wc-blocks-style`, поэтому хватает обычной специфичности, без !important.
   ============================================================ */

.woocommerce-cart .page-title,
.woocommerce-checkout .page-title,
.woocommerce-account .page-title,
.woocommerce-order-received .page-title {
    margin: 0 0 var(--rg-s-6);
    font-family: var(--rg-font-display);
    font-size: var(--rg-h2);
    font-weight: var(--rg-w-black);
    line-height: 1.05;
    letter-spacing: -.02em;
    text-align: left;
    text-transform: uppercase;
    overflow-wrap: normal;
}

/* Пояснение о порядке заказа над формой оформления */
.rg-checkout-notice {
    max-width: 62ch;
    margin: 0 0 var(--rg-s-6);
    padding: var(--rg-s-4) var(--rg-s-5);
    background: var(--rg-warn-bg);
    border: 1px solid var(--rg-warn-line);
    border-radius: var(--rg-r-md);
    color: var(--rg-warn-ink);
    font-size: var(--rg-body-sm);
    line-height: 1.5;
}

/* Страна одна — Россия: продаём и возим только по ней (настройка магазина).
   Выбирать не из чего, а лишнее поле в форме заказа стоит человеку времени.
   Значение при этом остаётся в форме и уходит в заказ. */
.wc-block-components-country-input { display: none; }

/* Платёжного адреса на странице оформления нет (его блок убран настройкой
   магазина), поэтому переключать «использовать этот адрес для выставления
   счетов» нечего: снятая галочка только спрятала бы поля, которых не существует.
   Управляющего фильтра у блока нет — прячем сам переключатель. */
.wc-block-checkout__use-address-for-billing { display: none; }

/* --- Размер текста --- */

/* Блоки корзины и оформления почти весь текст берут из пресетов темы
   (`--wp--preset--font-size--*`) — так они задуманы. Поэтому шкалу здесь
   не переопределяем селекторами, а поднимаем сами пресеты внутри двух
   блоков: сумма, названия и подписи в заказе должны читаться, а не быть
   мелким шрифтом. Всё остальное на сайте это не задевает.
*/
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
    --wp--preset--font-size--x-small: var(--rg-body-sm);
    --wp--preset--font-size--small: var(--rg-body);
    --wp--preset--font-size--medium: var(--rg-body-lg);
    font-size: var(--rg-body);
}

/* --- Общее для блоков магазина --- */

.wc-block-components-title,
.wc-block-cart__totals-title,
.wc-block-components-checkout-step__title,
.wc-block-components-checkout-order-summary__title-text,
.wc-block-cart-items__header {
    font-family: var(--rg-font-display);
    font-weight: var(--rg-w-bold);
    color: var(--rg-ink);
}

/* Шапка таблицы и заголовок итогов — это подписи, а не текст: их размер
   держим своим. Селектор с блоком-контейнером нужен, чтобы перебить более
   частное правило WooCommerce, которое сажает сюда пресет `small`. */
.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__header,
.wp-block-woocommerce-cart .wc-block-cart__totals-title,
.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title-text {
    font-family: var(--rg-font-mono);
    font-size: var(--rg-caption);
    font-weight: var(--rg-w-medium);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--rg-muted);
}

.wc-block-components-product-name {
    font-family: var(--rg-font-display);
    font-weight: var(--rg-w-bold);
    color: var(--rg-ink);
    text-decoration: none;
    overflow-wrap: normal;
}
.wc-block-components-product-name:hover { color: var(--rg-moss); }

.wc-block-components-product-metadata__description {
    color: var(--rg-muted);
}

.wc-block-components-product-price__value,
.wc-block-components-formatted-money-amount,
.wc-block-components-totals-item__value {
    font-family: var(--rg-font-display);
    font-weight: var(--rg-w-bold);
    color: var(--rg-ink);
}

.wc-block-components-totals-item__label { color: var(--rg-text); }

.wc-block-cart-items__row,
.wc-block-components-totals-wrapper {
    border-color: var(--rg-line-soft);
}

/* --- Кнопки --- */

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button:not(.wc-block-components-panel__button):not(.wc-block-components-quantity-selector__button) {
    font-family: var(--rg-font-display);
    font-weight: var(--rg-w-extra);
    font-size: var(--rg-body);
    min-height: var(--rg-btn-h);
    padding: 16px 30px;
    background: var(--rg-taiga);
    color: var(--rg-bg);
    border: 0;
    border-radius: var(--rg-r-md);
    transition: background var(--rg-ease), transform var(--rg-ease);
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button:not(.wc-block-components-panel__button):not(.wc-block-components-quantity-selector__button):hover {
    background: var(--rg-taiga-deep);
    color: var(--rg-bg);
    transform: translateY(-1px);
}
.wc-block-components-button:focus-visible {
    outline: 0;
    box-shadow: var(--rg-focus);
}
.wc-block-components-button:disabled { opacity: .55; transform: none; }

/* Вторичные кнопки — «Применить купон», ссылки-кнопки */
/* Раскрывающий заголовок «Добавить купоны» — единственный элемент корзины
   без отклика на курсор. */
.wc-block-components-panel__button:hover { color: var(--rg-taiga); }

.wc-block-components-totals-coupon__button,
.wc-block-components-address-card__edit {
    background: transparent;
    color: var(--rg-moss);
    font-family: var(--rg-font-text);
    font-weight: var(--rg-w-semi);
}

/* --- Поля ввода --- */

.wc-block-components-text-input input[type='text'],
.wc-block-components-text-input input[type='email'],
.wc-block-components-text-input input[type='tel'],
.wc-block-components-text-input input[type='number'],
.wc-block-components-textarea,
.wc-block-components-combobox-control input.components-combobox-control__input {
    font-family: var(--rg-font-text);
    font-size: var(--rg-body);
    min-height: var(--rg-btn-h);
    padding: 22px 18px 8px;
    background: var(--rg-surface);
    color: var(--rg-ink);
    border: 1.5px solid var(--rg-line);
    border-radius: var(--rg-r-md);
}
/* Примечание к заказу тянулось мышью в любую сторону и вылезало из колонки.
   Оставляем только высоту — ширину держит вёрстка. */
.wc-block-components-textarea { resize: vertical; max-height: 40vh; }

.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-block-components-combobox-control input.components-combobox-control__input:focus {
    outline: 0;
    border-color: var(--rg-moss);
    box-shadow: var(--rg-focus);
}
.wc-block-components-text-input label,
.wc-block-components-combobox-control label {
    color: var(--rg-faint);
    font-family: var(--rg-font-text);
}

/* --- Выбор доставки и оплаты --- */

.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
    border-color: var(--rg-line);
    border-radius: var(--rg-r-md);
    font-family: var(--rg-font-text);
}
.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control-accordion-option:has(.wc-block-components-radio-control__input:checked) {
    border-color: var(--rg-taiga);
    background: color-mix(in srgb, var(--rg-taiga) 4%, transparent);
}
.wc-block-components-radio-control__label { color: var(--rg-ink); font-weight: var(--rg-w-semi); }
.wc-block-components-radio-control__secondary-label { color: var(--rg-muted); }
.wc-block-components-radio-control__description { color: var(--rg-text); font-size: var(--rg-body-sm); }

/* --- Боковая колонка: итоги --- */

/* Итоги корзины — карточкой; на оформлении блок уже нарисован рамкой сам */
.wc-block-cart__sidebar.wc-block-components-sidebar {
    padding: var(--rg-s-5);
    background: var(--rg-surface);
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-r-lg);
}
.wc-block-checkout__sidebar .wc-block-components-order-summary,
.wc-block-checkout__sidebar .wc-block-components-panel {
    border-color: var(--rg-line);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-family: var(--rg-font-display);
    font-size: var(--rg-h3);
    font-weight: var(--rg-w-black);
    color: var(--rg-ink);
}

/* --- Счётчик количества --- */

.wc-block-components-quantity-selector {
    border-color: var(--rg-line);
    border-radius: var(--rg-r-sm);
}
.wc-block-components-quantity-selector__input { font-family: var(--rg-font-display); color: var(--rg-ink); }
.wc-block-components-quantity-selector__button { color: var(--rg-muted); }
.wc-block-components-quantity-selector__button:hover { color: var(--rg-taiga); }

.wc-block-cart-item__remove-link { color: var(--rg-faint); }
.wc-block-cart-item__remove-link:hover { color: var(--rg-error); }

/* --- Уведомления --- */

.wc-block-components-notice-banner {
    border-radius: var(--rg-r-md);
    font-family: var(--rg-font-text);
}
.wc-block-components-notice-banner.is-error { border-color: var(--rg-error); }
.wc-block-components-notice-banner.is-success { border-color: var(--rg-moss); }

/* --- Страница «Заказ принят» --- */

.woocommerce-order-received .woocommerce-notice--success,
.woocommerce-order-received .woocommerce-thankyou-order-received {
    margin: 0 0 var(--rg-s-6);
    padding: var(--rg-s-5) var(--rg-s-6);
    background: var(--rg-taiga);
    border-radius: var(--rg-r-lg);
    color: var(--rg-bg);
    font-family: var(--rg-font-display);
    font-size: var(--rg-h3);
    font-weight: var(--rg-w-bold);
}

.woocommerce-order-overview,
.woocommerce-order-received .woocommerce-order-details,
.woocommerce-order-received .woocommerce-customer-details {
    font-family: var(--rg-font-text);
}
.woocommerce-order-overview {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rg-s-5);
    margin: 0 0 var(--rg-s-6);
    padding: 0;
    list-style: none;
}
.woocommerce-order-overview li {
    padding: 0;
    border: 0;
    color: var(--rg-muted);
    font-family: var(--rg-font-mono);
    font-size: var(--rg-mono);
    letter-spacing: .07em;
    text-transform: uppercase;
}
.woocommerce-order-overview li strong {
    display: block;
    margin-top: var(--rg-s-2);
    color: var(--rg-ink);
    font-family: var(--rg-font-display);
    font-size: var(--rg-body-lg);
    letter-spacing: normal;
    text-transform: none;
}

.woocommerce-order-received h2,
.woocommerce-order-received h3 {
    font-family: var(--rg-font-display);
    font-weight: var(--rg-w-bold);
    color: var(--rg-ink);
}

/* Пояснение о порядке заказа нужно до оформления, а не после */
.woocommerce-order-received .rg-checkout-notice { display: none; }

/* Таблица состава заказа.

   Селекторы длиннее необходимого намеренно: у WooCommerce есть свои
   правила для `.shop_table th` со специфичностью выше короткой записи. */
.woocommerce-order-details .woocommerce-table--order-details,
.woocommerce-order-details .woocommerce-table--order-details th,
.woocommerce-order-details .woocommerce-table--order-details td {
    border-color: var(--rg-line-soft);
}
.woocommerce-order-details .woocommerce-table--order-details {
    width: 100%;
    margin: 0 0 var(--rg-s-6);
    border-collapse: collapse;
}
.woocommerce-order-details .woocommerce-table--order-details thead th {
    padding: var(--rg-s-3) 0;
    border-bottom: 1.5px solid var(--rg-line);
    color: var(--rg-muted);
    font-family: var(--rg-font-mono);
    font-size: var(--rg-mono);
    font-weight: var(--rg-w-medium);
    letter-spacing: .07em;
    text-transform: uppercase;
    text-align: left;
}
.woocommerce-order-details .woocommerce-table--order-details tbody td,
.woocommerce-order-details .woocommerce-table--order-details tfoot th,
.woocommerce-order-details .woocommerce-table--order-details tfoot td {
    padding: var(--rg-s-3) 0;
    border-bottom: 1px solid var(--rg-line-soft);
    color: var(--rg-text);
    font-size: var(--rg-body);
}
.woocommerce-order-details .woocommerce-table--order-details tfoot th {
    color: var(--rg-muted);
    font-family: var(--rg-font-text);
    font-weight: var(--rg-w-semi);
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
}
.woocommerce-order-details .woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-order-details .woocommerce-table--order-details tfoot tr:last-child td {
    border-bottom: 0;
    color: var(--rg-ink);
    font-family: var(--rg-font-display);
    font-size: var(--rg-h3);
    font-weight: var(--rg-w-black);
}
.woocommerce-order-details .woocommerce-table--order-details .woocommerce-Price-amount,
.woocommerce-order-details .woocommerce-table--order-details .product-total {
    font-family: var(--rg-font-display);
    font-weight: var(--rg-w-bold);
    color: var(--rg-ink);
}
.woocommerce-order-details .woocommerce-table--order-details a { color: var(--rg-ink); text-decoration: none; }
.woocommerce-order-details .woocommerce-table--order-details a:hover { color: var(--rg-moss); }

/* --- Пустая корзина ---
   Разметку экрана мы переписали в настройках магазина (русские тексты и
   ссылка в каталог вместо смайлика во весь экран), здесь — оформление.
   Подборка товаров приводится к виду карточек каталога: у блочной сетки
   свои классы, до неё правила `.rg-card` не достают. */

.wp-block-woocommerce-empty-cart-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(24px, 4vw, 48px) 0 0;
}
.rg-empty-cart {
    margin: 0 0 var(--rg-s-3);
    font-size: var(--rg-h2);
    font-weight: var(--rg-w-black);
    letter-spacing: -.02em;
    text-transform: uppercase;
}
.wp-block-woocommerce-empty-cart-block > p {
    max-width: 52ch;
    margin: 0 0 var(--rg-s-6);
    color: var(--rg-muted);
}
.wp-block-woocommerce-empty-cart-block .wp-block-button__link {
    padding: 14px 26px;
    background: var(--rg-taiga);
    border-radius: var(--rg-r-pill);
    color: var(--rg-bg);
    font-family: var(--rg-font-display);
    font-size: var(--rg-caption);
    font-weight: var(--rg-w-bold);
    text-decoration: none;
}
.wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover {
    background: var(--rg-taiga-deep);
    color: var(--rg-bg);
}
.wp-block-woocommerce-empty-cart-block h2:not(.rg-empty-cart) {
    margin: clamp(40px, 6vw, 72px) 0 var(--rg-s-5);
    font-size: var(--rg-h3);
    font-weight: var(--rg-w-black);
    text-transform: uppercase;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid {
    width: 100%;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--rg-s-4);
    margin: 0;
    padding: 0;
    list-style: none;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product {
    display: flex;
    flex-direction: column;
    gap: var(--rg-s-2);
    /* Блочная сетка держит ширину колонки процентами (`has-4-columns`),
       и в нашей раскладке этот процент ужимал карточку до полосы. Селектор
       длиннее необходимого намеренно: у правила WooCommerce три класса. */
    flex: initial;
    max-width: none;
    width: auto;
    margin: 0;
    padding: var(--rg-s-3) var(--rg-s-3) var(--rg-s-4);
    background: var(--rg-bg);
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-r-lg);
}
/* Содержимое карточки центрируем целиком: цену и кнопку WooCommerce
   центрирует своими стилями, и разнобой заметнее, чем сам выбор. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product,
.wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product-title {
    align-items: center;
    text-align: center;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img {
    border-radius: var(--rg-r-md);
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
    margin: 0;
    font-family: var(--rg-font-display);
    font-size: var(--rg-body);
    font-weight: var(--rg-w-bold);
    color: var(--rg-ink);
    text-decoration: none;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link { text-decoration: none; }
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
    font-family: var(--rg-font-display);
    font-weight: var(--rg-w-bold);
    color: var(--rg-ink);
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product .add_to_cart_button {
    /* Кнопка WooCommerce держит место под индикатор загрузки, из-за чего
       надпись уезжает вверх. Центрируем содержимое явно и задаём высоту
       по тап-зоне, а не по строке. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* `.wp-block-button__link` тянется на всю высоту родителя (`height: 100%`),
       и надпись всплывала вверх. Высоту задаём сами. */
    height: auto;
    min-height: var(--rg-tap-min);
    margin: var(--rg-s-2) 0 0;
    padding: 0 20px;
    line-height: 1;
    background: var(--rg-taiga);
    border: 0;
    border-radius: var(--rg-r-pill);
    color: var(--rg-bg);
    font-family: var(--rg-font-display);
    font-size: var(--rg-caption);
    font-weight: var(--rg-w-bold);
    text-decoration: none;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product .add_to_cart_button:hover {
    background: var(--rg-taiga-deep);
    color: var(--rg-bg);
}

.woocommerce-customer-details address {
    padding: var(--rg-s-5);
    background: var(--rg-surface);
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-r-lg);
    color: var(--rg-text);
    font-style: normal;
    line-height: 1.6;
}

/* ============================================================
   КОНТЕНТНЫЕ РАЗДЕЛЫ
   Забеги, сообщества, амбассадоры, научные статьи, новости.
   Общий приём: карточка на поверхности с границей-линией, заголовок
   дисплейным шрифтом, мета — моноширинным. Цветом пользуемся редко
   и только там, где он несёт смысл (метка партнёрского старта).
   ============================================================ */

.rg-section {
    width: 100%;
    padding: var(--rg-section) var(--rg-gutter) var(--rg-s-8);
}

/* --- Шапка раздела --- */

.rg-shead {
    max-width: 62ch;
    margin-bottom: var(--rg-block);
}
.rg-shead__kicker {
    display: block;
    margin-bottom: var(--rg-s-3);
    color: var(--rg-muted);
    font-family: var(--rg-font-mono);
    font-size: var(--rg-mono);
    letter-spacing: .07em;
    text-transform: uppercase;
}
.rg-shead__title {
    margin: 0 0 var(--rg-s-4);
    font-size: var(--rg-h1);
    font-weight: var(--rg-w-black);
    line-height: .98;
    letter-spacing: -.03em;
    text-transform: uppercase;
    overflow-wrap: normal;
}
.rg-shead__lead {
    margin: 0;
    color: var(--rg-text);
    font-size: var(--rg-body-lg);
    line-height: 1.5;
}

/* --- Фильтры --- */

.rg-filters {
    display: flex;
    flex-direction: column;
    gap: var(--rg-s-4);
    margin-bottom: var(--rg-s-7);
}
.rg-filters__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rg-s-2);
}
.rg-filters__label {
    margin-right: var(--rg-s-2);
    color: var(--rg-faint);
    font-family: var(--rg-font-mono);
    font-size: var(--rg-mono);
    letter-spacing: .07em;
    text-transform: uppercase;
}
.rg-filters .rg-chip {
    width: auto;
    min-height: var(--rg-tap-min);
    padding: 10px 16px;
    font-size: var(--rg-body-sm);
    text-decoration: none;
}
.rg-filters__back { margin-bottom: var(--rg-s-6); font-size: var(--rg-body-sm); }

/* --- Забеги --- */

.rg-races {
    display: grid;
    gap: var(--rg-s-5);
}

.rg-race {
    display: grid;
    grid-template-columns: 88px 1fr auto;
    align-items: center;
    gap: var(--rg-s-5);
    padding: var(--rg-s-5);
    background: var(--rg-surface);
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-r-lg);
}
.rg-race--partner { border-color: color-mix(in srgb, var(--rg-moss) 45%, var(--rg-line)); }

.rg-race__when {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    padding: var(--rg-s-3);
    background: var(--rg-bg);
    border-radius: var(--rg-r-md);
    text-align: center;
}
.rg-race__day {
    font-family: var(--rg-font-display);
    font-size: 28px;
    font-weight: var(--rg-w-black);
    line-height: 1;
    color: var(--rg-ink);
}
.rg-race__month {
    color: var(--rg-muted);
    font-family: var(--rg-font-mono);
    font-size: var(--rg-mono);
    letter-spacing: .07em;
    text-transform: uppercase;
}

.rg-race__mark {
    display: inline-block;
    margin-bottom: var(--rg-s-2);
    padding: 3px 10px;
    background: color-mix(in srgb, var(--rg-moss) 14%, transparent);
    border-radius: var(--rg-r-pill);
    color: var(--rg-taiga);
    font-family: var(--rg-font-mono);
    font-size: var(--rg-mono);
    letter-spacing: .07em;
    text-transform: uppercase;
}
.rg-race__title {
    margin: 0 0 var(--rg-s-2);
    font-size: var(--rg-body-lg);
    font-weight: var(--rg-w-bold);
    overflow-wrap: normal;
}
.rg-race__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rg-s-3);
    margin: 0;
    color: var(--rg-muted);
    font-size: var(--rg-body-sm);
}
.rg-race__distances {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rg-s-2);
    margin: var(--rg-s-3) 0 0;
    padding: 0;
    list-style: none;
}
.rg-race__distances li {
    padding: 3px 10px;
    background: var(--rg-surface-muted);
    border-radius: var(--rg-r-xs);
    font-family: var(--rg-font-mono);
    font-size: var(--rg-caption);
    color: var(--rg-ink-2);
}
.rg-race__link {
    align-self: center;
    padding: 12px 20px;
    border: 1.5px solid var(--rg-line);
    border-radius: var(--rg-r-md);
    color: var(--rg-ink);
    font-family: var(--rg-font-display);
    font-weight: var(--rg-w-semi);
    font-size: var(--rg-body-sm);
    text-decoration: none;
    white-space: nowrap;
}
.rg-race__link:hover { border-color: var(--rg-taiga); color: var(--rg-taiga); }

/* --- Сообщества --- */

.rg-coms {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--rg-s-5);
}

.rg-com {
    display: flex;
    flex-direction: column;
    gap: var(--rg-s-3);
    padding: var(--rg-s-5);
    background: var(--rg-surface);
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-r-lg);
}
.rg-com__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    background: var(--rg-bg);
    border-radius: var(--rg-r-md);
    overflow: hidden;
}
.rg-com__logo img { width: 100%; height: 100%; object-fit: contain; }
.rg-com__initials {
    color: var(--rg-faint);
    font-family: var(--rg-font-display);
    font-size: var(--rg-body-lg);
    font-weight: var(--rg-w-black);
    text-transform: uppercase;
}
.rg-com__title {
    margin: 0;
    font-size: var(--rg-body-lg);
    font-weight: var(--rg-w-bold);
    overflow-wrap: normal;
}
.rg-com__city {
    margin: 0;
    color: var(--rg-muted);
    font-family: var(--rg-font-mono);
    font-size: var(--rg-mono);
    letter-spacing: .07em;
    text-transform: uppercase;
}
.rg-com__about { margin: 0; color: var(--rg-text); font-size: var(--rg-body-sm); }
.rg-com__link {
    margin-top: auto;
    color: var(--rg-moss);
    font-weight: var(--rg-w-semi);
    font-size: var(--rg-body-sm);
    text-decoration: none;
}
.rg-com__link:hover { color: var(--rg-taiga); }

/* --- Амбассадоры --- */

.rg-ambs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: var(--rg-s-5);
}

.rg-amb {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--rg-surface);
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-r-lg);
}
/* Портреты приходят разных пропорций. Кадрируем их одинаково: контейнер
   держит соотношение, снимок лежит в нём абсолютно — иначе высота карточки
   определялась бы исходным файлом и сетка шла бы лесенкой. */
.rg-amb__photo {
    position: relative;
    aspect-ratio: 4 / 5;
    background: var(--rg-surface-muted);
}
.rg-amb__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rg-amb__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--rg-s-2);
    padding: var(--rg-s-5);
}
.rg-amb__name {
    margin: 0;
    font-size: var(--rg-body-lg);
    font-weight: var(--rg-w-bold);
    text-transform: uppercase;
    overflow-wrap: normal;
}
.rg-amb__name a { color: var(--rg-ink); text-decoration: none; }
.rg-amb__name a:hover { color: var(--rg-moss); }
.rg-amb__discipline {
    margin: 0;
    color: var(--rg-muted);
    font-family: var(--rg-font-mono);
    font-size: var(--rg-mono);
    letter-spacing: .07em;
    text-transform: uppercase;
}
.rg-amb__achievements { margin: 0; color: var(--rg-text); font-size: var(--rg-body-sm); }
/* --- Научные статьи --- */

.rg-scis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: var(--rg-s-5);
}

.rg-sci {
    display: flex;
    flex-direction: column;
    gap: var(--rg-s-3);
    padding: var(--rg-s-6);
    background: var(--rg-surface);
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-r-lg);
}
.rg-sci__title {
    margin: 0;
    font-size: var(--rg-h3);
    font-weight: var(--rg-w-bold);
    line-height: 1.2;
    overflow-wrap: normal;
}
.rg-sci__title a { color: var(--rg-ink); text-decoration: none; }
.rg-sci__title a:hover { color: var(--rg-moss); }
.rg-sci__summary { margin: 0; color: var(--rg-text); font-size: var(--rg-body-sm); }
.rg-sci__source {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rg-s-3);
    margin: auto 0 0;
    padding-top: var(--rg-s-3);
    border-top: 1px solid var(--rg-line-soft);
    color: var(--rg-muted);
    font-family: var(--rg-font-mono);
    font-size: var(--rg-caption);
}

.rg-article { max-width: 72ch; }
.rg-article__source {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rg-s-4);
    margin: 0 0 var(--rg-s-6);
    color: var(--rg-muted);
    font-family: var(--rg-font-mono);
    font-size: var(--rg-caption);
}
.rg-article__note {
    margin-top: var(--rg-s-7);
    padding-top: var(--rg-s-4);
    border-top: 1px solid var(--rg-line);
    color: var(--rg-faint);
    font-size: var(--rg-caption);
}

/* --- Страница амбассадора --- */

.rg-profile {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: var(--rg-s-7);
    margin-bottom: var(--rg-s-7);
}
.rg-profile__photo {
    overflow: hidden;
    border-radius: var(--rg-r-xl);
    background: var(--rg-surface-muted);
}
.rg-profile__photo img { width: 100%; height: auto; }
.rg-profile__name {
    margin: 0 0 var(--rg-s-3);
    font-size: var(--rg-h2);
    font-weight: var(--rg-w-black);
    text-transform: uppercase;
    overflow-wrap: normal;
}
.rg-profile__discipline {
    margin: 0 0 var(--rg-s-4);
    color: var(--rg-muted);
    font-family: var(--rg-font-mono);
    font-size: var(--rg-mono);
    letter-spacing: .07em;
    text-transform: uppercase;
}
.rg-profile__achievements { margin: 0 0 var(--rg-s-5); font-size: var(--rg-body-lg); }
.rg-profile__quote {
    margin: 0 0 var(--rg-s-5);
    padding: var(--rg-s-4) var(--rg-s-5);
    background: var(--rg-bg-soft);
    border-left: 3px solid var(--rg-moss);
    border-radius: 0 var(--rg-r-md) var(--rg-r-md) 0;
    color: var(--rg-ink-2);
    font-style: italic;
}

/* --- Форма заявки --- */

.rg-form {
    max-width: 46rem;
    margin-top: var(--rg-s-8);
    padding: var(--rg-s-7);
    background: var(--rg-surface);
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-r-xl);
}
.rg-form__title {
    margin: 0 0 var(--rg-s-3);
    font-size: var(--rg-h3);
    font-weight: var(--rg-w-black);
    text-transform: uppercase;
    overflow-wrap: normal;
}
.rg-form__lead { margin: 0 0 var(--rg-s-6); color: var(--rg-muted); }
.rg-form__row {
    display: flex;
    flex-direction: column;
    gap: var(--rg-s-2);
    margin: 0 0 var(--rg-s-4);
}
.rg-form__row label { color: var(--rg-muted); font-size: var(--rg-body-sm); }
/* Растягивать поле мышью можно только по высоте: за угол его тянули вширь,
   и текст уезжал за пределы колонки формы. Потолок — чтобы страница
   не превращалась в один бесконечный ввод. */
.rg-form textarea.rg-field {
    min-height: 6rem;
    max-height: 60vh;
    padding: 14px 18px;
    resize: vertical;
}
.rg-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rg-s-4);
    margin: var(--rg-s-5) 0 0;
}
.rg-form__note { color: var(--rg-faint); font-size: var(--rg-caption); }
.rg-form__trap { position: absolute; left: -9999px; }
.rg-form__notice {
    margin: 0 0 var(--rg-s-5);
    padding: var(--rg-s-4) var(--rg-s-5);
    border-radius: var(--rg-r-md);
    font-size: var(--rg-body-sm);
}
.rg-form__notice--ok {
    background: color-mix(in srgb, var(--rg-moss) 12%, transparent);
    color: var(--rg-taiga);
}
.rg-form__notice--error {
    background: var(--rg-warn-bg);
    border: 1px solid var(--rg-warn-line);
    color: var(--rg-warn-ink);
}

/* ============================================================
   ЛОНГРИД «СЧАСТЬЕ БЕГУНА»
   Светлый и не рекламный: широкие поля, крупная типографика,
   источник рядом с каждым утверждением.
   ============================================================ */

.rg-long { width: 100%; }

.rg-long__hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--rg-s-7);
    padding: var(--rg-section) var(--rg-gutter);
    background: var(--rg-bg-soft);
}
.rg-long__kicker {
    display: block;
    margin-bottom: var(--rg-s-4);
    color: var(--rg-muted);
    font-family: var(--rg-font-mono);
    font-size: var(--rg-mono);
    letter-spacing: .07em;
    text-transform: uppercase;
}
.rg-long__title {
    margin: 0 0 var(--rg-s-5);
    font-size: var(--rg-h1);
    font-weight: var(--rg-w-black);
    line-height: .96;
    letter-spacing: -.03em;
    text-transform: uppercase;
    overflow-wrap: normal;
}
.rg-long__lead {
    margin: 0;
    max-width: 46ch;
    color: var(--rg-text);
    font-size: var(--rg-body-lg);
    line-height: 1.55;
}
.rg-long__hero-media {
    overflow: hidden;
    border-radius: var(--rg-r-xl);
    box-shadow: var(--rg-shadow-card);
}
.rg-long__hero-media img { width: 100%; height: 100%; object-fit: cover; }

.rg-long__body {
    max-width: 46rem;
    margin: 0 auto;
    padding: var(--rg-section) var(--rg-gutter) var(--rg-s-8);
}

.rg-long__block {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: var(--rg-s-5);
    padding-bottom: var(--rg-s-7);
    margin-bottom: var(--rg-s-7);
    border-bottom: 1px solid var(--rg-line);
}
.rg-long__mark {
    width: 14px;
    height: 14px;
    margin-top: 10px;
    border-radius: 50%;
    background: var(--rg-flavor, var(--rg-moss));
}
.rg-long__subtitle {
    margin: 0 0 var(--rg-s-4);
    font-size: var(--rg-h3);
    font-weight: var(--rg-w-black);
    overflow-wrap: normal;
}
.rg-long__text {
    margin: 0 0 var(--rg-s-4);
    font-size: var(--rg-body-lg);
    line-height: 1.6;
}
.rg-long__source {
    margin: 0;
    font-family: var(--rg-font-mono);
    font-size: var(--rg-caption);
}
.rg-long__source a { color: var(--rg-muted); }
.rg-long__source a:hover { color: var(--rg-moss); }

.rg-long__conclusion {
    margin: 0 0 var(--rg-s-6);
    font-family: var(--rg-font-display);
    font-size: var(--rg-h3);
    font-weight: var(--rg-w-bold);
    line-height: 1.3;
    color: var(--rg-ink);
}
.rg-long__note {
    margin: 0;
    padding: var(--rg-s-4) var(--rg-s-5);
    background: var(--rg-warn-bg);
    border: 1px solid var(--rg-warn-line);
    border-radius: var(--rg-r-md);
    color: var(--rg-warn-ink);
    font-size: var(--rg-body-sm);
}
.rg-long__extra { margin-top: var(--rg-s-7); }

@media (max-width: 900px) {
    .rg-long__hero { grid-template-columns: 1fr; }
    .rg-profile { grid-template-columns: 1fr; gap: var(--rg-s-5); }
    .rg-race {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: var(--rg-s-4);
    }
    .rg-race__link { grid-column: 1 / -1; text-align: center; }
}

@media (max-width: 600px) {
    .rg-form { padding: var(--rg-s-5); }
    .rg-long__body { padding-left: var(--rg-gutter); padding-right: var(--rg-gutter); }
}