/*
 * Стилевой слой публичного контура promo-code.ru.
 *
 * Собран вручную из дизайн-системы promo-code-ui-kit (design-tokens.css и
 * ui-kit.css) и дополнен правилами страниц контура по макетам каталога
 * design/. Сборщика фронтенда у контура нет: Tailwind и Vite не применяются,
 * а готовый артефакт лежит в репозитории и отдаётся nginx с годовым
 * immutable-кэшем — версия стоит в имени файла.
 *
 * Бюджет листа — 46 080 байт без сжатия и 12 288 в gzip; его проверяет
 * сценарий статики. Понижать бюджет запрещено, ухудшать ради него вид — тем
 * более: не укладывается — поднимай предел решением, а не режь вёрстку.
 *
 * Шрифт Manrope v20 (SIL Open Font License 1.1) самохостится тремя
 * подмножествами; текст лицензии лежит рядом файлом manrope-v20-OFL.txt.
 */

/* Расширенная латиница: знак рубля U+20BD у каждой цены и денежной величины.
   Подмножество идёт до основной латиницы, как в исходной раскладке Google
   Fonts: на редких пересечениях диапазонов (U+0304, U+0308, U+0329, U+2020)
   выигрывает объявленное ниже. */
@font-face {
    font-family: 'Manrope Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url(manrope-latin-ext-v20.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Латиница: названия магазинов и коды. */
@font-face {
    font-family: 'Manrope Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url(manrope-latin-v20.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Кириллица: весь остальной текст страницы. */
@font-face {
    font-family: 'Manrope Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url(manrope-cyrillic-v20.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Токены дизайн-системы. */
:root {
    --bg: #f7f7fb;
    --surface: #fff;
    --surface-2: #f1eff7;
    --ink: #15151c;
    --ink-dark: #11131c;
    --muted: #777987;
    --faded: #888;
    --line: #e6e4ee;
    --primary: #7135e9;
    --primary-soft: #f0e8ff;
    --success: #18a968;
    --success-soft: #ecfaf3;
    --danger: #f45135;
    --mono-tint: #e5e9ff;
    --logo: 30px;
    --radius-xs: 8px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-pill: 999px;
    --shadow-sm: 0 4px 18px rgba(30, 20, 70, .06);
    --container: 1180px;
    --font: 'Manrope Variable', Manrope, Inter, Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Место под полосу прокрутки держится всегда. Без этого блокировка прокрутки
   под окном (body.dialog-open) убирала бы полосу вместе с прокруткой, область
   просмотра росла бы на её толщину, и страница прыгала бы вбок на каждом
   открытии окна и обратно на каждом закрытии. */
html {
    scrollbar-gutter: stable;
    /* Якорь не уходит под закреплённую шапку. */
    scroll-padding-top: 64px;
}

/* Каркас: колонка во всю высоту окна — подвал внизу и у короткой страницы. */
body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: var(--primary);
}

/* Кольцо фокуса одно на весь контур и только по :focus-visible: при щелчке
   мышью его нет, при переходе табом есть. На тёмной шапке цвет свой — лиловое
   кольцо на ней и на лиловой кнопке неразличимо. */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.site-header :focus-visible {
    outline-color: #fff;
}

img {
    max-width: 100%;
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
    margin: 0;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 16px;
}

/* Шапка и подвал сайта. */
.site-header,
.site-footer {
    background: var(--ink-dark);
    color: #fff;
}

/* Шапка закреплена сверху; sticky, а не fixed: место в потоке сохраняется.
   z-index ниже окна показа кода. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 5;
}

.site-main {
    flex-grow: 1;
}

.site-header__inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 56px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.wordmark {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
}

.wordmark span {
    color: #8b4dff;
}

.site-footer {
    margin-top: 32px;
    color: #737582;
}

/* Подвал по макету design/Main.dc.html: колонки знака, категорий и магазинов,
   под ними — копирайт отдельной строкой за разделителем. */
.site-footer__inner {
    display: grid;
    gap: 20px;
    padding-top: 24px;
    padding-bottom: 20px;
}

.site-footer__about {
    margin-top: 10px;
    max-width: 260px;
    font-size: 11px;
    line-height: 1.6;
}

.site-footer__heading {
    margin-bottom: 10px;
    font-size: 11px;
    color: #737582;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.site-footer__note {
    padding-top: 14px;
    padding-bottom: 20px;
    border-top: 1px solid #252733;
    font-size: 11px;
}

/* Крошки. */
.breadcrumbs {
    font-size: 11px;
    color: var(--muted);
    padding: 14px 0;
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.breadcrumbs li + li::before {
    content: "/";
    margin-right: 8px;
    color: var(--muted);
}

.breadcrumbs li:last-child {
    color: var(--ink);
}

/* Шапка магазина. */
.store-hero {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: 20px;
}

.store-hero__identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

/* Логотип героя не обрезается ни на какой ширине: скругление у него одно,
   как у широкой раскладки. Круг — только у монограммы узкой раскладки. */
.store-hero__monogram,
.store-hero__logo {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: var(--radius-lg);
    background: var(--mono-tint);
    object-fit: contain;
}

.store-hero__monogram {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
}

.store-hero__name {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.store-hero h1 {
    font-size: 26px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.025em;
    margin-top: 6px;
}

.store-hero__description {
    font-size: 14px;
    line-height: 1.65;
    max-width: 640px;
    margin-top: 12px;
    text-align: center;
}

/* Статистика магазина. */
.stats {
    background: var(--bg);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.stats__heading {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 14px;
}

.stats__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.stats__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.stats__label {
    font-size: 14px;
    color: var(--muted);
}

.stats__value {
    font-size: 22px;
    font-weight: 800;
    text-align: right;
}

.stats__value--discount {
    color: var(--danger);
}

.stats__value--success {
    color: var(--success);
    font-size: 16px;
}

/* Список действующих предложений. */
.offers {
    display: grid;
    gap: 13px;
    margin-top: 18px;
}

.offer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 15px;
}

.offer__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;
}

.offer__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

/* Плашка логотипа магазина: сторона только здесь. Строка названия ниже неё,
   и строку с названием держит плашка — как прежде монограмма. */
.merchant-logo {
    width: var(--logo);
    height: var(--logo);
    flex-shrink: 0;
    border-radius: var(--radius-xs);
}

.monogram {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mono-tint);
    font-size: 13px;
    font-weight: 800;
}

.offer__merchant {
    font-size: 16px;
    font-weight: 700;
}

.badge {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-pill);
    padding: 7px 11px;
    font-size: 11px;
    font-weight: 700;
    background: var(--success-soft);
    color: var(--success);
}

.offer__discount {
    display: block;
    color: var(--danger);
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.offer__title {
    font-size: 14px;
    line-height: 1.4;
}

.offer__description,
.offer__conditions {
    font-size: 11px;
    line-height: 1.45;
    color: var(--muted);
}

.offer__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chip {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-pill);
    padding: 7px 11px;
    font-size: 11px;
    background: var(--surface);
    border: 1px solid var(--line);
    white-space: nowrap;
}

.offer__expires {
    font-size: 11px;
    color: var(--faded);
}

/* Пустое состояние списка. */
.empty-state {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 32px 20px;
    text-align: center;
    margin-top: 18px;
}

.empty-state__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: var(--primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px auto;
}

.empty-state__title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.empty-state__note {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.6;
    max-width: 460px;
    margin: 8px auto 0 auto;
}

/* Инструкция и вопросы. */
.value-block {
    display: grid;
    gap: 13px;
    margin-top: 26px;
}

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 20px;
}

.panel__heading {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
    margin-bottom: 18px;
}

.howto__steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
    counter-reset: step;
}

.howto__step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.howto__step::before {
    counter-increment: step;
    content: counter(step);
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: var(--radius-xs);
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.howto__title {
    font-size: 16px;
    font-weight: 700;
}

.howto__text,
.faq__answer {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.55;
    margin-top: 4px;
}

.faq__item {
    border-bottom: 1px solid var(--line);
    padding: 14px 0;
}

.faq__item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.faq__question {
    font-size: 16px;
    font-weight: 700;
}

/* Архив истёкших. */
.archive {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 20px;
    margin-top: 13px;
}

.archive__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    list-style: none;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.archive__summary::-webkit-details-marker {
    display: none;
}

.archive__summary::after {
    content: "";
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg);
    margin-bottom: 4px;
}

.archive[open] .archive__summary::after {
    transform: rotate(225deg);
    margin-bottom: 0;
}

.archive__note {
    font-size: 11px;
    color: var(--muted);
    margin-top: 12px;
}

.archive__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 16px;
    padding: 12px 0;
    border-top: 1px solid var(--surface-2);
}

.archive__code {
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 700;
    color: var(--faded);
    text-decoration: line-through;
}

.archive__title {
    font-size: 14px;
    color: var(--muted);
    flex-grow: 1;
}

.archive__discount {
    font-size: 14px;
    font-weight: 700;
    color: var(--faded);
}

.archive__expired {
    font-size: 11px;
    color: var(--faded);
}

/* Элементы, которые без Alpine не работают, до его инициализации не видны.
   Правило держит инвариант контура: неработающей кнопки на странице не бывает
   ни секунды, а без исполненного скрипта ни маски, ни кнопок, ни диалога в
   видимой части нет вовсе. Alpine снимает атрибут сам, когда доходит до
   элемента.

   Форма поиска им не помечается: её отправляет сам браузер. */
[x-cloak] {
    display: none !important;
}

/* Вкладки-фильтры по типу предложения. */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 26px;
}

.tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.tab--on {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.tab__count {
    font-size: 11px;
    opacity: .7;
}

/* Кнопки контура. */
.button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.button--primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.button--ghost {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}

/* Наведение из макета: кнопка чуть темнеет целиком. Цвет подписи назван
   заново, потому что `a:hover` красит ссылку-кнопку в цвет её же фона и подпись
   пропадает; вес 0-1-1 бьёт `.button--primary`, поэтому нужен модификатор. */
.button:hover {
    filter: brightness(.94);
}

.button--primary:hover {
    color: #fff;
}

.button--ghost:hover {
    color: var(--ink);
}

.button[disabled] {
    opacity: .55;
    cursor: not-allowed;
}

.link,
.site-nav__burger,
.site-nav__more {
    border: 0;
    padding: 0;
    background: none;
    font: inherit;
    cursor: pointer;
}

.link {
    font-size: 11px;
    color: var(--muted);
    text-decoration: underline;
    cursor: pointer;
}

/* Карточка с промокодом: маска, кнопка показа и кнопка жалобы. */
.offer__aside {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.offer__mask {
    font-family: var(--mono);
    border: 1px dashed #aa78ff;
    color: var(--primary);
    border-radius: 9px;
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .08em;
    padding: 12px 10px;
}

.offer__report {
    text-align: center;
}

/* Окно показа кода и жалобы. Разметка одна, раскладки две: на узком экране это
   bottom sheet макета design/RevealSheet.dc.html, на широком — модальное окно
   design/RevealModal.dc.html. Второй разметки под второй экран не заводится. */

/* Пока окно открыто, страница под ним не прокручивается; класс ставит
   клиентский слой. Правило на body: прокрутку области просмотра браузер берёт
   у него. В паре к нему `scrollbar-gutter: stable` у html — снимать одно без
   другого нельзя. */
body.dialog-open {
    overflow: hidden;
}

.dialog {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(21, 21, 28, .55);
}

.dialog__panel {
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
    background: var(--surface);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: 0 10px 30px rgba(30, 20, 70, .08);
    padding: 20px;
}

.dialog__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.dialog__identity {
    flex-grow: 1;
}

.dialog__merchant {
    font-size: 16px;
    font-weight: 700;
}

.dialog__verified {
    margin-top: 4px;
}

.dialog__close {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    cursor: pointer;
}

.dialog__discount {
    display: block;
    color: var(--danger);
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.03em;
    margin-top: 18px;
}

.dialog__title {
    font-size: 14px;
    line-height: 1.45;
    margin-top: 6px;
}

.dialog__chips {
    font-size: 11px;
    color: var(--muted);
    margin-top: 12px;
}

.dialog__body {
    margin-top: 18px;
}

.dialog__reveal {
    display: flex;
    align-items: center;
    gap: 9px;
}

/* Код остаётся выделяемым текстом: при отказе браузера в доступе к буферу
   обмена его переписывают руками. */
.dialog__code {
    flex-grow: 1;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    border: 1px dashed #aa78ff;
    background: var(--primary-soft);
    color: var(--primary);
    border-radius: 9px;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: .12em;
    user-select: all;
}

.dialog__copy {
    width: 130px;
    flex-shrink: 0;
}

.pending,
.dialog__note {
    font-size: 14px;
    color: var(--muted);
}

.dialog__subtitle {
    font-size: 16px;
    font-weight: 700;
    padding: 0;
    margin-bottom: 10px;
}

.dialog__done {
    background: var(--success-soft);
    color: var(--success);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    font-weight: 700;
    margin-top: 12px;
}

.dialog__error {
    color: var(--danger);
    font-weight: 700;
    margin-top: 12px;
}

.dialog__error + .button,
.pending + .dialog__reveal {
    margin-top: 12px;
}

.dialog__foot {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--surface-2);
    margin-top: 14px;
    padding-top: 12px;
}

/* Форма жалобы: четыре причины §FR-06 ТЗ. */
.report__reasons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 0;
    padding: 0;
    margin: 0 0 14px 0;
}

.reason {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
}

/* Навигация по категориям в шапке (design/Main.dc.html, design/HomeMobile.dc.html).
   Прокрутки здесь нет и быть не должно.

   Узкая раскладка: знак слева, бургер справа, поле поиска строкой ниже. Панель
   выпадает из потока под всю шапку, и строка от раскрытия не перестраивается.
   Опора панели — сама шапка (`position: sticky`), поэтому навигация здесь не
   позиционируется: это нужно только широкой, под раскрытие «Ещё». */
.site-nav {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.site-nav__burger {
    display: flex;
    padding: 11px;
    border-radius: var(--radius-sm);
    background: #252733;
    color: #fff;
}

.site-nav__panel {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: 6px 0;
    background: var(--ink-dark);
    border-top: 1px solid #252733;
    box-shadow: var(--shadow-sm);
}

.site-nav--open .site-nav__panel {
    display: block;
}

/* Пункт меню, а не строка текста: касаться нужно всей строки, поэтому ссылка
   занимает ширину панели целиком, а её высота с отступами даёт область
   касания в 44 пикселя. Выключка левая — как у любого списка меню. */
.site-nav a {
    display: block;
    padding: 12px 16px;
}

.site-nav__more {
    display: none;
    align-items: center;
    gap: 5px;
}

/* Категории в подвале: тот же список целиком. */
.site-footer__nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.site-footer__nav a {
    font-size: 11px;
}

.site-nav a,
.site-nav__more,
.site-footer__nav a {
    color: #bfc0c8;
    font-weight: 600;
}

.site-nav a:hover,
.site-nav__more:hover,
.site-footer__nav a:hover {
    color: #fff !important;
}

/* Страница категории: заголовок и вводный текст по design/Category.dc.html. */
.category-page h1 {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.03em;
}

.category-intro {
    line-height: 1.7;
    color: var(--muted);
    margin-top: 14px;
    max-width: 780px;
}

/* Базовые правила поля поиска и заголовка страницы поиска стоят до
   медиазапроса намеренно: правило равной специфичности после него побеждает, и
   настольные переопределения не применялись бы вовсе. */
.search {
    display: flex;
    gap: 8px;
    flex-grow: 1;
    min-width: 240px;
}

.search-page h1 {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.02em;
    padding-top: 20px;
}

/* Главная: герой, ленты и блоки по макетам design/Main.dc.html и
   design/HomeMobile.dc.html. Подсветки фона взяты из настольного макета и на
   узкой ширине не мешают: градиент места в потоке не занимает. */
.home-hero {
    background:
        radial-gradient(900px 420px at 10% 18%, #f2ebff 0%, rgba(242, 235, 255, 0) 62%),
        radial-gradient(760px 400px at 82% 12%, #ffe9f4 0%, rgba(255, 233, 244, 0) 64%),
        linear-gradient(180deg, #fff 0%, #fbf9ff 58%, var(--bg) 100%);
    padding-bottom: 18px;
}

.home-hero__inner {
    display: flex;
    flex-direction: column;
    padding-top: 18px;
}

/* Без обнуления минимальной ширины длинный заголовок выдавил бы картинку. */
.home-hero__main {
    min-width: 0;
}

.home-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    font-size: 11px;
    font-weight: 700;
}

.home-hero h1 {
    margin-top: 14px;
    font-size: 27px;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -.03em;
}

.home-hero__lead {
    margin-top: 10px;
    max-width: 460px;
    line-height: 1.5;
    color: var(--muted);
}

/* Числа и картинка стоят рядом: на узкой ширине картинка справа от чисел
   (HomeMobile), на широкой — столбик чисел между текстом и картинкой (Main). */
.home-hero__facts {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

/* Изображение декоративное и свисает за край — как в мобильном макете. */
.home-hero__art {
    display: block;
    width: 152px;
    height: auto;
    margin: 0 -8px -18px auto;
}

/* Поле героя белое и во всю ширину: здесь это главное действие страницы.
   Отступ сверху — из макетов, 28px от чисел до поля: картинка свисает в него
   на 18px, и под ней остаётся воздух, а не стык с полем. */
.home-hero__search {
    margin-top: 28px;
    padding-bottom: 4px;
}

.home-hero__search .search__icon {
    left: 16px;
    color: var(--primary);
}

.home-hero__search .search__input {
    height: 48px;
    padding: 0 16px 0 42px;
    background: var(--surface);
    border-color: var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    color: var(--ink);
}

.home-hero__search .search__submit {
    height: 48px;
    padding: 0 24px;
}

/* Счётчики: строкой на узкой ширине, столбиком на широкой; третий карточкой. */
.counters {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 16px;
}

.counters__value {
    display: block;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
}

.counters__value--accent {
    color: var(--danger);
}

.counters__value--success {
    color: var(--success);
}

/* Подпись переносится по словам, а не тянет число в свою строку: в мобильном
   макете числа стоят парой рядом с картинкой, и подпись под ними двухстрочная. */
.counters__label {
    display: block;
    max-width: 88px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--muted);
}

.counters__item--success {
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

/* Лента категорий: карточка со строкой плиток, прокручиваемой вбок. */
.categories-rail {
    margin-top: 18px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.categories-rail ul {
    display: flex;
    gap: 6px;
    overflow-x: auto;
}

/* Плитки делят ширину поровну и не сжимаются уже своей меры: за ней лента
   прокручивается. Растягивается элемент списка, ссылка занимает его целиком. */
.categories-rail li {
    display: flex;
    flex: 1 0 104px;
}

.categories-rail__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    gap: 9px;
    padding: 12px 6px;
    border-radius: var(--radius-lg);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

.categories-rail__link:hover {
    background: #faf9fe;
}

/* Плитка категории вместо иконки макета: признака иконки у категории нет. */
.categories-rail__mark {
    width: 46px;
    height: 46px;
    border-radius: var(--radius-md);
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 15px;
}

.categories-rail__name {
    line-height: 1.25;
}

/* Разделы главной. */
.home {
    padding-bottom: 8px;
}

.home-section {
    margin-top: 26px;
}

.home-section__title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.home-section__count {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
}

/* Лента горячих промокодов: строка карточек со стрелками по краям. */
.rail {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.rail__arrow {
    display: none;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    color: var(--muted);
    cursor: pointer;
}

.teasers {
    display: flex;
    gap: 13px;
    flex-grow: 1;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 4px;
}

/* Полосы прокрутки у лент нет — её нет и в макете. Прокрутка остаётся вся:
   пальцем, колесом, стрелками и переходом по ссылкам с клавиатуры. */
.teasers,
.categories-rail ul {
    scrollbar-width: none;
}

.teasers::-webkit-scrollbar,
.categories-rail ul::-webkit-scrollbar {
    display: none;
}

/* Карточка ленты — компактная и по центру, форма макета. */
.teaser {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    width: 202px;
    padding: 18px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.teaser__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.teaser__merchant {
    font-weight: 800;
}

.teaser__discount {
    margin-top: 8px;
    color: var(--danger);
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.025em;
}

.teaser__title {
    min-height: 31px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--muted);
}

.teaser .offer__aside {
    /* Боковая колонка в 210px здесь не при чём: в ленте она во всю ширину. */
    width: auto;
    margin-top: auto;
    padding-top: 8px;
}

/* Показ кода: отказ и подсказка о буфере. */
.offer__failure,
.offer__note {
    font-size: 11px;
    text-align: center;
    color: var(--muted);
}

.offer__failure {
    color: var(--danger);
}

/* Постоянный блок о проверке. */
.benefits__list {
    display: grid;
    gap: 16px;
    margin-top: 14px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.benefits__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.benefits__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background: #f5f2ff;
}

.benefits__title {
    font-size: 16px;
    font-weight: 700;
}

.benefits__text {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--muted);
}

@media (min-width: 900px) {
    .container {
        padding: 0 20px;
    }

    .site-header__inner {
        flex-wrap: nowrap;
        min-height: 64px;
        gap: 24px;
    }

    /* Широкий экран: строка вместо бургера и панели, а раскрытие «Ещё»
       выпадает из-под строки и считает края от навигации. */
    .site-nav {
        position: relative;
        flex-grow: 1;
        min-width: 0;
        margin-left: 0;
        gap: 18px;
    }

    .site-nav__burger {
        display: none;
    }

    /* Раскрытое состояние на широкой ширине панель не перестраивает: правило
       раскрытия старше по специфичности, и без этой пары «Ещё» ломало бы
       строку в столбец. */
    /* Строка не показывается, пока её не померили: иначе видно, как лишние
       из неё исчезают. Скрыта видимостью, а не показом: померить
       ненарисованное нельзя. */
    .site-nav__panel {
        visibility: hidden;
    }

    .site-nav--ready .site-nav__panel {
        visibility: visible;
    }

    .site-nav__panel,
    .site-nav--open .site-nav__panel {
        display: flex;
        align-items: center;
        gap: 18px;
        position: static;
        min-width: 0;
        padding: 0;
        background: none;
        border-top: 0;
        box-shadow: none;
    }

    .site-nav__pinned {
        display: flex;
        gap: 18px;
        min-width: 0;
    }

    /* Название стоит в строке целиком либо не стоит вовсе: сокращений в
       шапке не бывает. Пункт не сжимается, а непоместившийся уводит под
       «Ещё» клиентский слой — померить текст может только он. */
    .site-nav__pinned li {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .site-nav__pinned a {
        display: inline;
        padding: 0;
    }

    .site-nav--overflow .site-nav__more {
        display: inline-flex;
    }

    .site-nav__rest {
        display: none;
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        min-width: 200px;
        padding: 6px 0;
        border-radius: var(--radius-md);
        background: var(--ink-dark);
        box-shadow: var(--shadow-sm);
    }

    .site-nav--open .site-nav__rest {
        display: block;
    }

    .search {
        flex-grow: 0;
        max-width: 420px;
        margin-left: auto;
    }

    .search-page h1 {
        font-size: 30px;
        padding-top: 28px;
    }

    .category-page h1 {
        font-size: 40px;
        line-height: 1.08;
    }

    /* Колонки в строку, первая шире прочих. Строка, а не сетка с дорожками:
       колонок две или три, смотря что страница передала. */
    .site-footer__inner {
        display: flex;
        gap: 24px;
        padding-top: 34px;
        padding-bottom: 24px;
    }

    .site-footer__brand {
        flex: 1.4;
    }

    .site-footer__nav {
        flex: 1;
    }

    .site-footer__nav ul {
        flex-direction: column;
        gap: 8px;
    }

    .breadcrumbs {
        padding: 16px 0;
    }

    .store-hero {
        flex-direction: row;
        align-items: flex-start;
        gap: 32px;
        padding: 28px;
    }

    .store-hero__main {
        flex-grow: 1;
    }

    .store-hero__identity {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 16px;
    }

    .store-hero__monogram {
        border-radius: var(--radius-lg);
    }

    .store-hero h1 {
        font-size: 34px;
        line-height: 1.1;
    }

    .store-hero__description {
        margin-top: 20px;
        text-align: left;
    }

    .stats {
        width: 268px;
        flex-shrink: 0;
    }

    .offers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .offer {
        flex-direction: row;
        align-items: flex-start;
        gap: 20px;
    }

    .offer__aside {
        width: 210px;
        flex-shrink: 0;
    }

    .empty-state {
        padding: 40px 25px;
    }

    .value-block {
        grid-template-columns: 1.2fr 1fr;
    }

    .value-block--single {
        grid-template-columns: 1fr;
    }

    .panel,
    .archive {
        padding: 25px;
    }

    /* Ряд архива — сетка с явными дорожками, а не гибкая строка: колонки
       кода и скидки выводятся условно, и дорожка держит место колонки и без
       элемента — заголовок не съезжает. */
    .archive__row {
        display: grid;
        grid-template-columns: 130px 1fr auto 150px;
    }

    .archive__code {
        grid-column: 1;
    }

    .archive__title {
        grid-column: 2;
    }

    .archive__discount {
        grid-column: 3;
    }

    .archive__expired {
        grid-column: 4;
        text-align: right;
    }

    /* Bottom sheet мобильного превращается в модальное окно: раскладку
       меняет медиазапрос, а не вторая разметка. */
    .dialog {
        align-items: center;
        padding: 20px;
    }

    .dialog__panel {
        width: 460px;
        border-radius: var(--radius-xl);
        padding: 24px;
    }

    .home-hero__inner {
        flex-direction: row;
        align-items: center;
        gap: 36px;
        padding-top: 34px;
    }

    .home-hero__main {
        flex-grow: 1;
        max-width: 500px;
    }

    .home-hero h1 {
        font-size: 40px;
        line-height: 1.06;
        letter-spacing: -.035em;
    }

    /* Раскладка настольного макета: числа столбиком, картинка крупнее. */
    .home-hero__facts {
        align-items: center;
        gap: 36px;
    }

    .home-hero__art {
        width: 320px;
        flex-shrink: 0;
        margin: 0;
    }

    /* Столбик счётчиков между текстом и изображением — раскладка макета. */
    .counters {
        flex-direction: column;
        width: 176px;
        flex-shrink: 0;
        gap: 22px;
        margin-top: 0;
    }

    .counters__value {
        font-size: 27px;
    }

    /* В столбике счётчика ширина своя, и подпись переносить нечем. */
    .counters__label {
        max-width: none;
    }

    /* Поле героя во всю ширину: в шапке оно ужато и прижато вправо. */
    .home-hero__search .search {
        flex-grow: 1;
        max-width: none;
        margin-left: 0;
    }

    .home-section__title {
        font-size: 22px;
    }

    /* Стрелки ленты появляются там, где на них хватает места. */
    .rail__arrow {
        display: flex;
    }

    /* По три в ряд и без остатка: двадцать четыре карточки — восемь рядов. */
    .offers--grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Столбец: на треть ряда боковая колонка в 210px не встаёт. Растяжение
       возвращается — у строки оно прижато к верху, и кнопка сжалась бы. */
    .offers--grid .offer {
        flex-direction: column;
        align-items: stretch;
    }

    .offers--grid .offer__aside {
        width: auto;
        margin-top: auto;
        padding-top: 5px;
    }

    .benefits__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px;
        padding: 24px;
    }


}

/* Поиск в шапке; поле тёмное — по design/Store.dc.html.

   Вид поля несёт сам `input`, а не обёртка: кольцо фокуса рисуется вокруг
   элемента, который фокус получил, и на обёртке оно ложилось прямоугольником
   внутрь скруглённого поля — чужой рамкой поверх карточки. Теперь кольцо
   повторяет поле; гасить его не пришлось. Значок лежит поверх и кликов не
   ловит. */
.search__field {
    position: relative;
    display: flex;
    align-items: center;
    flex-grow: 1;
    min-width: 0;
}

.search__icon {
    position: absolute;
    left: 12px;
    color: #737582;
    pointer-events: none;
}

.search__input {
    flex-grow: 1;
    min-width: 0;
    height: 40px;
    padding: 0 12px 0 36px;
    background: #252733;
    border: 1px solid #252733;
    border-radius: var(--radius-sm);
    font: inherit;
    font-weight: 600;
    color: #fff;
}

.search__submit {
    width: auto;
    flex-shrink: 0;
    padding: 0 18px;
}

/* Подпись для программ чтения с экрана: глаз её не видит. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Страница поиска. */
.search-summary {
    font-size: 11px;
    color: var(--muted);
    margin-top: 8px;
}

.section-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-top: 22px;
}

.section-label__count {
    color: var(--primary);
}

/* Найденные магазины. */
.found {
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-top: 8px;
    overflow: hidden;
}

.found__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--surface-2);
}

.found li:last-child .found__link {
    border-bottom: 0;
}

.found__name {
    font-weight: 700;
    flex-grow: 1;
}

.found__meta {
    font-size: 11px;
    color: var(--muted);
}

/* Подсказки поиска. */
.pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.pill {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 15px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    border: 1px solid var(--line);
    font-weight: 600;
}