/*
 * Дизайн-система «бумажной студии» — конструктор, страница поздравления,
 * календарь поводов. Токены и компоненты перенесены из макета
 * «Финальный дизайн 1c».
 */

:root {
    --paper: #fdf3ea;
    --ink: #2c3f47;
    --accent: #e8604c;
    --accent-dark: #c44a38;
    --soft: #75685a;
    --line: #f0dcc8;
    --muted: #b08d75;
    --yellow: #f3b64b;
    --teal: #4fa3a5;
    --white: #fff;

    --ui: 'Nunito Sans', system-ui, -apple-system, sans-serif;
    --script: 'Caveat', cursive;

    --radius-chip: 999px;
    --radius-btn: 14px;
    --radius-card: 20px;
    --radius-box: 18px;

    --shadow-card: 0 18px 46px rgba(120, 70, 50, .16);
    --shadow-accent: 0 6px 18px rgba(232, 96, 76, .35);
}

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

/*
 * Атрибут hidden обязан скрывать. Любое наше `display: flex/grid` перебивает
 * [hidden] { display: none } из стилей браузера — и скрытый блок (те же
 * «Ещё 21 категория») остаётся на виду.
 */
[hidden] {
    display: none !important;
}

body.studio-body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--ui);
    -webkit-font-smoothing: antialiased;
}

/*
 * Цвет ссылок по умолчанию — через :where(), у которого нулевая
 * специфичность. Обычное `.studio-body a` (0,1,1) перебивало бы .btn--accent
 * (0,1,0): текст «Ответить своей открыткой» становился оранжевым на оранжевом,
 * логотип и плитки категорий — тоже. Так любой компонент задаёт свой цвет сам.
 */
.studio-body :where(a) {
    color: var(--accent);
    text-decoration: none;
}

.studio-body :where(a:hover) {
    color: var(--accent-dark);
}

.studio-body button {
    font-family: inherit;
}

.wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------- шапка */

.site-header {
    border-bottom: 1px solid var(--line);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    max-width: 1280px;
    margin: 0 auto;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ink);
    flex: none;
}

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

.logo__text {
    font: 700 30px var(--script);
    line-height: 1;
    white-space: nowrap;
}

.logo__text em {
    font-style: normal;
    color: var(--accent);
}

.nav {
    display: flex;
    align-items: center;
    gap: 22px;
    font: 700 14.5px var(--ui);
    color: var(--soft);
}

.nav a,
.nav__toggle {
    color: var(--soft);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
    white-space: nowrap;
}

.nav a:hover,
.nav__toggle:hover,
.nav a.is-active {
    color: var(--accent);
}

.nav__group {
    position: relative;
}

/* Мегаменю категорий */
.megamenu {
    position: absolute;
    top: calc(100% + 16px);
    right: 0;
    width: min(820px, calc(100vw - 48px));
    background: var(--white);
    border: 2px solid var(--line);
    border-radius: var(--radius-box);
    box-shadow: 0 24px 60px rgba(120, 70, 50, .22);
    padding: 24px 28px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px 24px;
    z-index: 50;
}

.megamenu__title {
    display: block;
    font: 800 13.5px var(--ui);
    color: var(--ink);
    margin-bottom: 9px;
}

.megamenu__title:hover {
    color: var(--accent);
}

.megamenu__items {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.megamenu__items a {
    font: 600 13px var(--ui);
    color: var(--soft);
}

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

.chip {
    padding: 9px 16px;
    border-radius: var(--radius-chip);
    border: 2px solid var(--line);
    background: var(--white);
    color: var(--soft);
    font: 800 13.5px var(--ui);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s, box-shadow .15s;
}

.chip:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.chip.is-active,
.chip[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--white);
    box-shadow: 0 4px 12px rgba(232, 96, 76, .28);
}

.chip--link {
    border-color: transparent;
    background: transparent;
    color: var(--accent);
}

.chip--link:hover {
    border-color: transparent;
    background: transparent;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Уточнение повода: «маме», «коллеге», «на юбилей».

   Отдельный подписанный блок, а не просто ещё один ряд фишек. Раньше ряды шли
   подряд и сливались в один длинный список — было непонятно, что от тебя ждут
   ВТОРОГО выбора. Линия слева и отступ показывают вложенность: это уточнение
   уже выбранного повода, а не новый шаг. */
.substep {
    margin-top: 14px;
    padding: 12px 0 2px 14px;
    border-left: 3px solid var(--line);
}

.substep__label {
    display: block;
    font: 800 11.5px var(--ui);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--soft);
    margin-bottom: 9px;
}

/* Ряд подчинённый: спорить с поводом по весу он не должен — отсюда мельче
   кегль и приглушённая рамка. */
.chips--sub .chip {
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 700;
    border-width: 1.5px;
    border-radius: 999px;
}

.chips--sub .chip[aria-pressed="true"] {
    background: var(--ink);
    border-color: var(--ink);
    box-shadow: none;
}

.chips--sub .chip--link {
    border-color: transparent;
    background: transparent;
}

/* Выбор картинки. Раньше это были фишки с названием повода, и выбрать можно
   было любую из тридцати — на день рождения ставились свадебные кольца. Теперь
   показываются только картинки выбранного повода, и показываются собой:
   миниатюре подпись не нужна, а двадцати сценам дня рождения не пришлось
   заводить двадцать ключей перевода на семнадцать языков. */
.scenes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.scene {
    padding: 0;
    border: 2px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--white);
    cursor: pointer;
    line-height: 0;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

.scene img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 320 / 170;
    object-fit: cover;
}

.scene:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.scene[aria-pressed="true"] {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent) inset, 0 6px 16px rgba(232, 96, 76, .25);
}

@media (max-width: 520px) {
    .scenes {
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
        gap: 8px;
    }
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: var(--radius-btn);
    border: 2px solid transparent;
    font: 800 14.5px var(--ui);
    cursor: pointer;
    white-space: nowrap;
    transition: transform .1s, box-shadow .15s, background .15s;
}

.btn:active {
    transform: translateY(1px);
}

.btn--accent {
    background: var(--accent);
    color: var(--white);
    box-shadow: var(--shadow-accent);
}

.btn--accent:hover {
    background: var(--accent-dark);
    color: var(--white);
}

.btn--ghost {
    background: var(--white);
    border-color: var(--line);
    color: var(--soft);
}

.btn--ghost:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.btn--dark {
    background: var(--ink);
    color: var(--white);
}

.btn--dark:hover {
    color: var(--white);
    opacity: .9;
}

.input {
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
    border-radius: 12px;
    border: 2px solid var(--line);
    background: var(--white);
    font: 700 14px var(--ui);
    color: var(--ink);
    outline: none;
}

.input:focus {
    border-color: var(--accent);
}

.input::placeholder {
    color: #b9a89a;
}

/* --------------------------------------------------------------- подписи */

.kicker {
    display: inline-block;
    font: 800 12px var(--ui);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.mini-label {
    font: 800 12px var(--ui);
    color: var(--muted);
    margin-bottom: 8px;
}

.hint {
    font: 600 12.5px var(--ui);
    color: var(--muted);
}

/* ------------------------------------------------------------- открытка */

/*
 * Открытка. Оформление приходит через custom properties: JS меняет бумагу
 * и шрифт, переписывая --card-*, а не перебирая элементы. Значения по
 * умолчанию — палитра «Сливки» и шрифт «Классика», как в SSR.
 */
.postcard {
    --card-bg: #fffdf8;
    --card-panel: #fdf1e0;
    --card-ink: #2c3f47;
    --card-accent: #e8604c;
    --card-soft: #75685a;
    --card-family: 'Literata', Georgia, serif;
    --card-weight: 400;
    --card-size: 17.5px;
    --card-lh: 1.6;

    width: 100%;
    background: var(--card-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 5.2%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: background .3s;
}

/* Пропорции держит сам блок: --ratio ставится из JS по выбранному формату. */
.postcard--fixed {
    aspect-ratio: var(--ratio, 4 / 5);
}

.postcard__panel {
    background: var(--card-panel);
    border-radius: 14px;
    overflow: hidden;
    flex: none;
    transition: background .3s;
}

/* Рисунок — это и есть панель: у сцены свой фон, отступа вокруг быть не должно,
   иначе по краю проступит цвет бумаги, которого в PNG для мессенджера нет. */
.postcard__art {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 320 / 170;
    object-fit: cover;
    /* Пока картинка грузится, панель не должна светить белым. */
    background: var(--card-panel);
}

.postcard__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    padding: 18px 8px 4px;
    min-height: 0;
}

.postcard__hello {
    font: 600 30px var(--script);
    color: var(--card-accent);
    margin-bottom: 4px;
}

.postcard__hello:empty {
    display: none;
}

.postcard__text {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    overflow: hidden;
    padding: 0;
    margin: 0;
    font-family: var(--card-family);
    font-weight: var(--card-weight);
    font-size: var(--card-size);
    line-height: var(--card-lh);
    color: var(--card-ink);
}

.postcard__sign {
    text-align: right;
    font: 600 22px var(--script);
    color: var(--card-soft);
    margin-top: 10px;
}

/* ------------------------------------------------------------ прогресс */

.progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 14px;
}

.progress__label {
    font: 800 12.5px var(--ui);
    color: var(--muted);
    white-space: nowrap;
}

.progress__track {
    width: 200px;
    height: 8px;
    background: var(--line);
    border-radius: var(--radius-chip);
    overflow: hidden;
}

.progress__bar {
    height: 100%;
    width: 20%;
    border-radius: var(--radius-chip);
    background: linear-gradient(90deg, var(--accent), var(--yellow));
    transition: width .4s;
}

/* ------------------------------------------------------------ конструктор */

.hero {
    text-align: center;
    padding: 34px 24px 6px;
}

.hero h1 {
    margin: 0 0 8px;
    font: 900 44px/1.15 var(--ui);
    letter-spacing: -.01em;
}

.hero h1 em {
    font-style: normal;
    color: var(--accent);
}

.hero p {
    margin: 0;
    font: 600 16.5px var(--ui);
    color: var(--soft);
}

.templates {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 22px 24px 0;
    max-width: 1140px;
    margin: 0 auto;
}

.studio {
    display: grid;
    grid-template-columns: 480px 1fr;
    gap: 44px;
    align-items: start;
    padding: 26px 24px 46px;
    max-width: 1280px;
    margin: 0 auto;
}

.studio__preview {
    position: sticky;
    top: 24px;
}

.studio__actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.studio__steps {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.studio__row {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    max-width: 540px;
}

.studio__style {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.swatches {
    display: flex;
    gap: 10px;
}

.swatch {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid var(--line);
    padding: 0;
}

.swatch[aria-pressed="true"] {
    border-color: var(--ink);
}

.swatch__name {
    font: 700 11px var(--ui);
    color: var(--soft);
    margin-top: 5px;
    text-align: center;
}

.teaser {
    background: var(--white);
    border: 2px dashed var(--line);
    border-radius: 14px;
    padding: 15px 20px;
    max-width: 460px;
}

.teaser__title {
    font: 800 13.5px var(--ui);
    color: var(--accent);
    margin-bottom: 4px;
}

.teaser__text {
    font: 600 13.5px/1.5 var(--ui);
    color: var(--soft);
}

/* -------------------------------------------------- страница поздравления */

.greeting {
    padding: 0 24px 52px;
}

.greeting__envelope {
    text-align: center;
    padding: 30px 0 20px;
    font: 600 26px var(--script);
    color: var(--muted);
}

.greeting__card {
    max-width: 620px;
    margin: 0 auto;
}

.greeting__card .postcard {
    padding: 34px 38px;
    text-align: center;
}

.greeting__card .postcard__hello {
    font-size: 36px;
    margin-bottom: 8px;
}

.greeting__card .postcard__sign {
    font-size: 26px;
    margin-top: 14px;
}

.greeting__actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
    flex-wrap: wrap;
}

.greeting__hint {
    text-align: center;
    margin-top: 12px;
}

.greeting__related {
    max-width: 980px;
    margin: 36px auto 0;
}

.related {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 12px;
}

.related__item {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--white);
    border: 2px solid var(--line);
    border-radius: 16px;
    padding: 18px 20px;
    cursor: pointer;
}

.related__item:hover {
    border-color: var(--accent);
}

.related__tone {
    font: 800 12px var(--ui);
    color: var(--accent);
    margin-bottom: 8px;
}

.related__text {
    margin: 0;
    font: 600 13.5px/1.5 var(--ui);
    color: var(--soft);
}

/* ------------------------------------------------------------- календарь */

.holidays {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 1080px;
    margin: 26px auto 0;
    padding: 0 24px 52px;
}

.holiday {
    background: var(--white);
    border: 2px solid var(--line);
    border-radius: var(--radius-box);
    padding: 22px 24px;
}

.holiday:hover {
    border-color: var(--accent);
}

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

.holiday__emoji {
    font-size: 30px;
    line-height: 1;
}

.holiday__name {
    font: 800 16px var(--ui);
}

.holiday__date {
    font: 700 13px var(--ui);
    color: var(--accent);
}

.holiday__left {
    margin-top: 12px;
    font: 600 13px var(--ui);
    color: var(--soft);
}

.holiday__cta {
    display: inline-block;
    margin-top: 14px;
    padding: 10px 18px;
    border-radius: var(--radius-chip);
    background: var(--paper);
    border: 2px solid var(--line);
    font: 800 13px var(--ui);
    color: var(--accent);
}

.holiday__cta:hover {
    border-color: var(--accent);
}

/* ----------------------------------------------------------- «Поделиться» */

.sheet {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(44, 63, 71, .55);
    z-index: 100;
}

.sheet__box {
    background: var(--white);
    border-radius: var(--radius-box);
    padding: 28px;
    width: min(420px, 100%);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .3);
    text-align: center;
}

.sheet__title {
    margin: 0 0 6px;
    font: 900 22px var(--ui);
}

.sheet__hint {
    margin: 0 0 20px;
    font: 600 13.5px/1.5 var(--ui);
    color: var(--soft);
}

.sheet__targets {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sheet__link {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.sheet__close {
    margin-top: 16px;
    background: none;
    border: 0;
    color: var(--soft);
    font: 700 13px var(--ui);
    cursor: pointer;
}

/* ---------------------------------------------------------------- тост */

.toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    background: var(--ink);
    color: var(--white);
    border-radius: var(--radius-chip);
    padding: 13px 26px;
    font: 700 14px var(--ui);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .3);
    z-index: 110;
    animation: toastpop .25s ease;
}

@keyframes toastpop {
    from {
        opacity: 0;
        transform: translate(-50%, 10px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* ----------------------------------------------------------- SEO-подвал */

.seo {
    border-top: 1px solid var(--line);
    padding: 44px 24px 56px;
}

.seo__inner {
    max-width: 1080px;
    margin: 0 auto;
}

.seo h2 {
    margin: 0 0 6px;
    font: 900 26px var(--ui);
}

.seo__lede {
    margin: 0 0 20px;
    font: 600 15px var(--ui);
    color: var(--soft);
}

.seo__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.seo__cat {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--white);
    border: 2px solid var(--line);
    border-radius: 14px;
    padding: 13px 16px;
    font: 700 14px var(--ui);
    color: var(--ink);
}

.seo__cat:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.seo__count {
    margin-left: auto;
    font: 700 12px var(--ui);
    color: var(--muted);
}

.site-footer {
    border-top: 1px solid var(--line);
    padding: 26px 24px 40px;
}

.site-footer__inner {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    font: 600 13.5px var(--ui);
    color: var(--soft);
}

.site-footer a {
    color: var(--soft);
}

.site-footer a:hover {
    color: var(--accent);
}

.langs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.langs a {
    text-transform: uppercase;
    font: 800 12px var(--ui);
}

.langs a.is-active {
    color: var(--accent);
}

/* -------------------------------------------------------------- мобильный */

@media (max-width: 1080px) {
    .studio {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .studio__preview {
        position: static;
        max-width: 480px;
        margin: 0 auto;
        width: 100%;
    }

    .related,
    .holidays {
        grid-template-columns: 1fr 1fr;
    }

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

@media (max-width: 720px) {
    /*
     * Логотип и меню в одну строку на 390px не помещаются: строка распирала
     * документ шире экрана, и обрезался уже весь сайт — заголовки, чипы,
     * карточки. Переносим меню на вторую строку.
     */
    .site-header__inner {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        padding: 12px 18px;
    }

    .logo__text {
        font-size: 22px;
    }

    .nav {
        gap: 16px;
        font-size: 13px;
    }

    .hero {
        padding: 22px 18px 4px;
    }

    .hero h1 {
        font-size: 28px;
    }

    .hero p {
        font-size: 14.5px;
    }

    .studio {
        padding: 18px 18px 36px;
    }

    .studio__row {
        flex-direction: column;
    }

    .studio__style {
        gap: 20px;
    }

    .related,
    .holidays {
        grid-template-columns: 1fr;
    }

    .greeting__card .postcard {
        padding: 22px 20px;
    }

    .progress__track {
        width: 120px;
    }

    .megamenu {
        position: fixed;
        left: 12px;
        right: 12px;
        top: 64px;
        width: auto;
        max-height: 70vh;
        overflow-y: auto;
    }

    .studio__actions .btn {
        flex: 1;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
 * КАТАЛОГ — поводы, подкатегории, пожелания, поиск, статические страницы.
 * Тот же набор токенов, что и у конструктора: сайт должен читаться как одно
 * целое, а не как две сшитые половины.
 * ═══════════════════════════════════════════════════════════════════════ */

/* ------------------------------------------------------------ поиск в шапке */

.nav-search {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: 4px;
}

.nav-search__input {
    width: 190px;
    padding: 8px 36px 8px 14px;
    border-radius: var(--radius-chip);
    border: 2px solid var(--line);
    background: var(--white);
    font: 600 13.5px var(--ui);
    color: var(--ink);
    outline: none;
    transition: border-color .15s, width .2s;
}

.nav-search__input:focus {
    border-color: var(--accent);
    width: 230px;
}

.nav-search__input::placeholder {
    color: #b9a89a;
}

.nav-search__btn {
    position: absolute;
    right: 4px;
    display: flex;
    padding: 6px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--muted);
    cursor: pointer;
}

.nav-search__btn:hover {
    color: var(--accent);
}

/* Лупа вместо поля — появляется, когда поле прячется (см. медиазапрос ниже). */
.nav__search-link {
    display: none;
    align-items: center;
    color: var(--soft);
}

.nav__search-link:hover {
    color: var(--accent);
}

/* ------------------------------------------------------------- хлебные крошки */

.crumbs {
    max-width: 1080px;
    margin: 0 auto;
    padding: 18px 24px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font: 600 13px var(--ui);
    color: var(--muted);
}

.crumbs a {
    color: var(--soft);
}

.crumbs a:hover {
    color: var(--accent);
}

.crumbs__current {
    color: var(--ink);
    font-weight: 800;
}

/* ---------------------------------------------------------------- шапка страницы */

.page-head {
    max-width: 780px;
    margin: 0 auto;
    padding: 26px 24px 8px;
    text-align: center;
}

.page-head__emoji {
    display: block;
    font-size: 44px;
    line-height: 1;
    margin-bottom: 10px;
}

.page-head h1 {
    margin: 0 0 10px;
    font: 900 36px/1.2 var(--ui);
    letter-spacing: -.01em;
}

.page-head__lede {
    margin: 0 0 20px;
    font: 600 16px/1.6 var(--ui);
    color: var(--soft);
}

.page-head--error .error-code {
    font: 900 64px var(--ui);
    color: var(--line);
    line-height: 1;
    margin-bottom: 4px;
}

.error-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    padding-bottom: 40px;
}

/* ------------------------------------------------------------------ поводы */

.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
    padding: 16px 0 56px;
}

.cat {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--white);
    border: 2px solid var(--line);
    border-radius: 16px;
    padding: 16px 18px;
    font: 800 15px var(--ui);
    color: var(--ink);
    transition: border-color .15s, transform .1s;
}

.cat:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px);
}

.cat__emoji {
    font-size: 24px;
    line-height: 1;
    flex: none;
}

.cat__name {
    flex: 1;
    min-width: 0;
    /* «Профессиональные» — одно длинное слово, без переноса оно наезжает на счётчик. */
    overflow-wrap: anywhere;
}

.cat__count {
    font: 700 12px var(--ui);
    color: var(--muted);
    flex: none;
}

/* ----------------------------------------------------------- подкатегории */

.subcats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
    margin-top: 12px;
    padding-bottom: 56px;
}

.subcat {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 2px solid var(--line);
    border-radius: var(--radius-box);
    padding: 20px 22px;
    color: var(--ink);
    transition: border-color .15s, transform .1s;
}

.subcat:hover {
    border-color: var(--accent);
    color: var(--ink);
    transform: translateY(-2px);
}

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

.subcat__name {
    margin: 0;
    font: 800 17px var(--ui);
}

.subcat__count {
    font: 700 12px var(--ui);
    color: var(--muted);
    flex: none;
}

/* Три примера пожеланий — по ним видно, что внутри, ещё до перехода. */
.subcat__preview {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.subcat__preview p {
    margin: 0;
    padding-left: 12px;
    border-left: 2px solid var(--line);
    font: 600 13px/1.5 var(--ui);
    color: var(--soft);
}

.subcat__more {
    margin-top: 16px;
    font: 800 13px var(--ui);
    color: var(--accent);
}

/* ------------------------------------------------------------- пожелания */

.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 8px 0 4px;
}

/* Фильтры — те же чипы, что в конструкторе, но ссылками. */
a.chip {
    display: inline-block;
    text-decoration: none;
}

.results-count {
    margin: 14px 0 12px;
    font: 600 13px var(--ui);
    color: var(--muted);
}

.wishes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}

.wish {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 2px solid var(--line);
    border-radius: var(--radius-box);
    padding: 20px 22px;
    transition: border-color .15s;
}

.wish:hover {
    border-color: var(--accent);
}

.wish__tone {
    font: 800 11px var(--ui);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
}

.wish__text {
    margin: 0 0 16px;
    flex: 1;
    font: 400 15px/1.65 'Literata', Georgia, serif;
    color: var(--ink);
}

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

.wish__copies {
    margin-left: auto;
    font: 700 12px var(--ui);
    color: var(--muted);
}

.btn--sm {
    padding: 9px 15px;
    border-radius: 11px;
    font: 800 13px var(--ui);
}

.empty {
    padding: 48px 0 64px;
    text-align: center;
    font: 600 16px var(--ui);
    color: var(--soft);
}

/* ------------------------------------------------------------- пагинация */

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 34px 0 56px;
}

.pager__btn,
.pager__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    border: 2px solid var(--line);
    background: var(--white);
    font: 800 13.5px var(--ui);
    color: var(--soft);
}

.pager__btn:hover,
.pager__page:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.pager__page.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--white);
}

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

.pager__gap {
    align-self: center;
    color: var(--muted);
    padding: 0 2px;
}

/* -------------------------------------------------------------- поиск */

.search-big {
    display: flex;
    gap: 8px;
    max-width: 560px;
    margin: 0 auto 8px;
}

/* ------------------------------------------- статические страницы и формы */

/*
 * privacy / terms / contact остались на своей разметке (у формы обратной связи
 * своя валидация и капча) — здесь только перекрашиваем её старые классы.
 */
.static-page {
    padding: 8px 0 56px;
}

.static-page .container,
.contact-page {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 24px;
}

.static-page .page-title {
    margin: 24px 0 16px;
    font: 900 34px/1.2 var(--ui);
    text-align: center;
    /* «Конфиденциальности», «Nutzungsbedingungen» — одно слово шире экрана. */
    overflow-wrap: break-word;
}

.static-content {
    background: var(--white);
    border: 2px solid var(--line);
    border-radius: var(--radius-box);
    padding: 30px 34px;
    /* В юридическом тексте есть почта и ссылки: без переноса они на телефоне
       вылезали за край и растягивали всю страницу шире экрана. */
    overflow-wrap: break-word;
}

.static-content h2 {
    margin: 26px 0 8px;
    font: 800 19px var(--ui);
    color: var(--ink);
}

.static-content h2:first-of-type {
    margin-top: 8px;
}

.static-content p {
    margin: 0 0 12px;
    font: 400 15px/1.7 'Literata', Georgia, serif;
    color: var(--soft);
}

.static-content .last-updated,
.contact-intro {
    font: 600 13.5px var(--ui);
    color: var(--muted);
}

.static-footer {
    margin-top: 22px;
    text-align: center;
}

.form-row {
    display: flex;
    gap: 12px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
    flex: 1;
    min-width: 0;
}

.form-group label {
    font: 800 13px var(--ui);
    color: var(--ink);
}

.form-group .required {
    color: var(--accent);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    border: 2px solid var(--line);
    background: var(--white);
    font: 600 14px var(--ui);
    color: var(--ink);
    outline: none;
    resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--accent);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #b9a89a;
}

.form-group .error-message {
    font: 700 12px var(--ui);
    color: var(--accent);
}

.form-group .char-count {
    align-self: flex-end;
    font: 700 11px var(--ui);
    color: var(--muted);
}

.captcha-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.captcha-question {
    font: 800 15px var(--ui);
    color: var(--ink);
}

.captcha-refresh {
    display: flex;
    padding: 6px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--muted);
    cursor: pointer;
}

.captcha-refresh:hover {
    color: var(--accent);
}

/* Ловушка для спам-ботов: людям её видеть не нужно. */
.form-field-honey {
    position: absolute;
    left: -9999px;
    opacity: 0;
    height: 0;
    overflow: hidden;
}

.form-status {
    margin-top: 12px;
    font: 700 13.5px var(--ui);
}

/*
 * Старые классы кнопок из шаблонов, которые мы не переписывали.
 * Базовый .btn уже задаёт форму — здесь только цвет.
 */
.studio-body .btn-primary {
    background: var(--accent);
    color: var(--white);
    box-shadow: var(--shadow-accent);
}

.studio-body .btn-primary:hover {
    background: var(--accent-dark);
    color: var(--white);
}

.studio-body .btn-outline {
    background: var(--white);
    border-color: var(--line);
    color: var(--soft);
}

.studio-body .btn-outline:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* ------------------------------------------------------------- мобильный */

@media (max-width: 900px) {
    .nav-search__input {
        width: 130px;
    }

    .nav-search__input:focus {
        width: 160px;
    }
}

@media (max-width: 720px) {
    /* Поле рядом с меню не помещается — меняем его на лупу, ведущую на /search.
       Совсем прятать поиск нельзя: другого входа в него на телефоне нет. */
    .nav-search {
        display: none;
    }

    .nav__search-link {
        display: flex;
    }

    .page-head h1 {
        font-size: 26px;
    }

    .page-head__emoji {
        font-size: 34px;
    }

    .wishes,
    .subcats,
    .cat-grid {
        grid-template-columns: 1fr;
    }

    .static-content {
        padding: 22px 20px;
    }

    .static-page .page-title {
        font-size: 24px;
    }

    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .search-big {
        flex-direction: column;
    }
}