/* TOP ANONS — стили темы. Визуальная основа — лента Telegram-канала: фон чата, «пузыри» постов, цена как главный акцент. */

@font-face {
    font-family: "Onest";
    src: url("../fonts/onest-cyrillic.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Onest";
    src: url("../fonts/onest-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
    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+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Unbounded";
    src: url("../fonts/unbounded-cyrillic.woff2") format("woff2");
    font-weight: 200 900;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Unbounded";
    src: url("../fonts/unbounded-latin.woff2") format("woff2");
    font-weight: 200 900;
    font-display: swap;
    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+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ========== Токены ==========
   Цвет: чернила + белый + фон чата; красный «ценника» — только цены и акции.
   Шрифты: Unbounded — заголовки и крупные цифры, Onest — всё остальное.
   Шкала текста (5 ступеней + 2 заголовочные): caption 13 → small 15 → body 17 → lead 19 → title 20 → h2 → h1.
   Шкала отступов кратна 4 px: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64. Скругления: 12 / 18 / 24 / пилюля. */

:root {
    --ink: #1b1f27;
    --ink-2: #2c323d;
    --ink-hover: #333a47;
    --paper: #ffffff;
    --chat: #e4ecf2;
    --line: #cdd6df;
    --muted: #5b6573;
    --muted-on-ink: #c5ccd6;
    --sale: #d3203c;
    --sale-strong: #b8192f; /* текст на розовой подложке, контраст 4.5:1 */
    --sale-bg: #fde8eb;
    --link: #2a7ab0;

    --font-body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Unbounded", "Onest", system-ui, sans-serif;

    --fs-caption: .8125rem;                          /* 13 — даты, счётчики, подписи */
    --fs-small: .9375rem;                            /* 15 — вторичный текст, карточки */
    --fs-body: 1.0625rem;                            /* 17 — основной */
    --fs-lead: clamp(1.0625rem, 1.4vw, 1.1875rem);   /* 17–19 — подзаголовки секций */
    --fs-title: 1.25rem;                             /* 20 — заголовки карточек (Unbounded) */
    --fs-num: clamp(1.5rem, 2.6vw, 2rem);            /* 24–32 — цифры и цены */
    --fs-num-sm: 1.375rem;                           /* 22 — цифры в компактных блоках телефона */
    --fs-h2: clamp(1.625rem, 3.4vw, 2.375rem);       /* 26–38 */
    --fs-h1: clamp(2.125rem, 4.6vw, 3.25rem);        /* 34–52 */

    --lh-display: 1.1;
    --lh-ui: 1.35;
    --lh-body: 1.55;

    --sp-1: .25rem;
    --sp-2: .5rem;
    --sp-3: .75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;

    --r-sm: .75rem;
    --r-md: 1.125rem;
    --r-lg: 1.5rem;
    --r-pill: 999px;

    --wrap: 72rem;
    --gutter: clamp(1rem, 4vw, 2.5rem);
    --section: clamp(4.5rem, 10vw, 8.5rem);
    --head-gap: clamp(var(--sp-6), 4vw, var(--sp-8));  /* заголовок секции → содержимое */
    --card-pad: clamp(1.25rem, 2.8vw, var(--sp-6));
    --display-weight: 300;                           /* заголовки и цифры Unbounded — тонкие */

    --shadow-post: 0 1px 2px rgba(27, 31, 39, .12);
    --shadow-lift: 0 10px 30px rgba(27, 31, 39, .16);
}

/* ========== Основа ========== */

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

html {
    font-size: 100%; /* Bootstrap 3 на странице оплаты ставит 10px */
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--link);
}

:focus-visible {
    outline: 3px solid var(--link);
    outline-offset: 2px;
}

.wrap {
    width: 100%;
    max-width: calc(var(--wrap) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.skip-link {
    position: absolute;
    left: var(--sp-4);
    top: -4rem;
    z-index: 100;
    padding: var(--sp-2) var(--sp-4);
    background: var(--ink);
    color: var(--paper);
}

.skip-link:focus {
    top: var(--sp-4);
}

/* Заголовки: Unbounded, плотная интерлиньяжная сетка */
.hero__title,
.section__title,
.entry__title,
.feed-cta__title,
.showcase__country,
.shops__name {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    letter-spacing: -.03em;
    line-height: var(--lh-display);
    text-wrap: balance;
}

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

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: var(--sp-3) 1.75rem;
    border: 1.5px solid var(--ink);
    border-radius: var(--r-pill);
    background: var(--ink);
    color: var(--paper);
    font: inherit;
    font-size: var(--fs-body);
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}

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

.button--small {
    min-height: 2.5rem;
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-small);
}

.button--ghost,
.showcase__all,
.showcase__more {
    background: transparent;
    color: var(--ink);
}

.button--ghost:hover,
.showcase__all:hover,
.showcase__more:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

.button--light {
    background: var(--paper);
    border-color: var(--paper);
    color: var(--ink);
}

.button--light:hover {
    background: var(--chat);
    border-color: var(--chat);
}

/* ========== Шапка ========== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(8px);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    min-height: 4rem;
}

.logo {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: -.01em;
    text-decoration: none;
    white-space: nowrap;
}

.nav {
    display: flex;
    gap: var(--sp-5);
    margin-left: auto;
}

.nav a {
    color: var(--ink);
    font-weight: 400;
    text-decoration: none;
}

.nav a:hover {
    color: var(--link);
}

.nav-toggle {
    display: none;
}

/* На узких экранах меню раскрывается кнопкой: класс .nav-ready ставит встроенный скрипт в <head> (functions.php); без скрипта список разделов виден. */
@media (max-width: 56rem) {
    .site-header__inner {
        flex-wrap: wrap;
        gap: var(--sp-3);
    }

    .nav {
        flex-wrap: wrap;
        gap: var(--sp-1) var(--sp-5);
        order: 3;
        width: 100%;
        margin-left: 0;
        padding-bottom: var(--sp-3);
    }

    .nav-ready .nav-toggle {
        display: block;
        margin-left: auto;
        min-height: 2.5rem;
        padding: var(--sp-2) var(--sp-4);
        border: 1px solid var(--line);
        border-radius: var(--r-pill);
        background: var(--paper);
        color: var(--ink);
        font: inherit;
        font-size: var(--fs-small);
        font-weight: 500;
        cursor: pointer;
    }

    .nav-ready .nav {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        gap: 0;
        padding: var(--sp-2) var(--gutter) var(--sp-4);
        background: var(--paper);
        border-bottom: 1px solid var(--line);
    }

    .nav-ready .nav:not(.is-open) {
        display: none;
    }

    .nav-ready .nav a {
        padding: var(--sp-3) 0;
        border-bottom: 1px solid var(--chat);
    }
}

@media (max-width: 26rem) {
    .site-header .button--small {
        display: none;
    }
}

.template-notices:empty {
    display: none;
}

/* ========== Секции ========== */

.section {
    padding-block: var(--section);
}

.section--chat {
    background: var(--chat);
}

.section--line {
    border-top: 1px solid var(--line);
}

.section--ink {
    background: var(--ink);
    color: var(--paper);
}

.section__head {
    max-width: 44rem;
    margin-bottom: var(--head-gap);
}

.section__title {
    font-size: var(--fs-h2);
}

.section__lead {
    max-width: 38rem;
    margin: var(--sp-4) 0 0;
    color: var(--muted);
    font-size: var(--fs-lead);
}

.section--ink .section__lead {
    color: var(--muted-on-ink);
}

/* ========== Первый экран ==========
   Компьютер: текст и цифры слева, пример поста справа на всю высоту.
   Телефон: текст на всю ширину, ниже — цифры и маленький наклонный пост рядом. */

.hero {
    padding-block: clamp(var(--sp-6), 6vw, 5rem);
}

.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
    grid-template-areas:
        "text  post"
        "facts post";
    column-gap: clamp(var(--sp-6), 6vw, 5rem);
    row-gap: clamp(var(--sp-6), 4vw, var(--sp-8));
    align-items: start;
}

.hero {
    padding-block: clamp(var(--sp-7), 8vw, 7rem);
}

/* Размер заголовка — от ширины колонки: длинное «профессиональных» широким Unbounded должно влезать в строку. */
.hero__text {
    grid-area: text;
    container-type: inline-size;
}

.hero__title {
    font-size: clamp(1.5rem, 8cqi, 3.5rem);
    line-height: 1.1;
}

.hero__since {
    display: inline-flex;
    margin: var(--sp-5) 0 0;
    padding: var(--sp-1) var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    color: var(--muted);
    font-size: var(--fs-small);
}

.hero__lead {
    max-width: 30rem;
    margin: var(--sp-4) 0 0;
    color: var(--muted);
    font-size: clamp(1.125rem, 1.8vw, 1.375rem);
    font-weight: 300;
    line-height: 1.5;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-7);
}

.hero__facts {
    grid-area: facts;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
    max-width: 34rem;
    margin: 0;
}

.hero__facts dt {
    font-family: var(--font-display);
    font-size: var(--fs-num);
    font-weight: var(--display-weight);
    line-height: var(--lh-display);
}

.hero__facts dd {
    margin: var(--sp-2) 0 0;
    color: var(--muted);
    font-size: var(--fs-small);
    line-height: var(--lh-ui);
}

.hero__post {
    grid-area: post;
    justify-self: end;
    width: 100%;
    max-width: 23rem;
    margin: 0;
    padding: var(--sp-3);
    background: var(--chat);
    border-radius: calc(var(--r-md) + var(--sp-3));
}

@media (max-width: 52rem) {
    .hero__inner {
        grid-template-columns: minmax(0, 1fr) 8.5rem;
        grid-template-areas:
            "text  text"
            "facts post";
        column-gap: var(--sp-4);
        row-gap: var(--sp-7); /* воздух между кнопками и цифрами с постом */
        align-items: center;
    }

    .hero__facts {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-3);
    }

    .hero__facts > div {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: var(--sp-3);
    }

    .hero__facts dt {
        font-size: var(--fs-num-sm);
    }

    .hero__facts dd {
        margin: 0;
        font-size: var(--fs-caption);
    }

    /* Маленький наклонный пост: только коллаж, бренд и цена. */
    .hero__post {
        justify-self: end;
        padding: 0;
        background: none;
        transform: rotate(4deg);
    }

    .hero__post .bubble {
        box-shadow: var(--shadow-lift);
    }

    .hero__post .bubble__body {
        padding: var(--sp-2) var(--sp-3) var(--sp-3);
    }

    .hero__post .bubble__body p:not(.bubble__brand):not(.bubble__price),
    .hero__post .bubble__time {
        display: none;
    }

    .hero__post .bubble__brand {
        font-size: var(--fs-caption);
    }

    .hero__post .bubble__price {
        font-size: 1.125rem;
    }
}

@media (max-width: 30rem) {
    .hero__actions .button {
        width: 100%;
    }
}

/* ========== Пузырь: пост и сообщение в стиле Telegram ========== */

.bubble {
    position: relative;
    overflow: hidden;
    background: var(--paper);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-post);
}

.bubble__image {
    display: block;
    width: 100%;
}

.bubble__body {
    padding: var(--sp-3) var(--sp-4) var(--sp-6);
    font-size: var(--fs-small);
    line-height: var(--lh-ui);
}

.bubble__body p {
    margin: 0;
}

.bubble__brand {
    font-weight: 600;
}

.bubble__price {
    color: var(--sale);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 400;
}

.bubble__link {
    margin-top: var(--sp-1) !important;
    color: var(--link);
    overflow-wrap: anywhere;
}

.bubble__time {
    position: absolute;
    right: var(--sp-4);
    bottom: var(--sp-2);
    color: var(--muted);
    font-size: var(--fs-caption);
}

/* ========== Подборки (разметка плагина topanons-showcase) ========== */

.showcase__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}

.showcase__tab {
    display: inline-flex;
    flex: none;
    align-items: center;
    min-height: 2.75rem;
    padding: var(--sp-2) var(--sp-5);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: var(--fs-body);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.showcase__tab[aria-selected="true"],
.showcase__tab[aria-current="page"] {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

/* Телефон: вкладки в одну строку с прокруткой, край гаснет — видно, что есть ещё. */
@media (max-width: 36rem) {
    .showcase__tabs {
        flex-wrap: nowrap;
        margin-inline: calc(-1 * var(--gutter));
        padding-inline: var(--gutter);
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 2.5rem), transparent);
        mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 2.5rem), transparent);
    }

    .showcase__tabs::-webkit-scrollbar {
        display: none;
    }

    .showcase__tab {
        padding-inline: var(--sp-4);
        font-size: var(--fs-small);
    }
}

.showcase__note {
    margin: 0 0 var(--sp-4);
    color: var(--muted);
    font-size: var(--fs-small);
}

.showcase__panel + .showcase__panel {
    margin-top: var(--sp-7);
}

.showcase--tabs .showcase__panel + .showcase__panel {
    margin-top: 0;
}

.showcase__country {
    margin-bottom: var(--sp-4);
    font-size: var(--fs-title);
}

/* Название страны дублирует вкладку — оставляем только для скринридеров. */
.showcase--tabs .showcase__country,
.showcase__country--hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.showcase__list {
    display: grid;
    gap: var(--sp-4);
}

/* Подборка: шапка магазина и лента постов-анонсов, листается вбок. */
.showcase-coll {
    min-width: 0;
    padding: var(--card-pad) var(--card-pad) var(--sp-3);
    background: rgba(255, 255, 255, .55);
    border-radius: var(--r-lg);
}

.showcase-coll:focus-visible,
.showcase-coll__row:focus-visible {
    outline: 3px solid var(--link);
    outline-offset: 2px;
}

.showcase-coll__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-4);
    margin-bottom: var(--sp-4);
}

.showcase-coll__shop {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
    margin-right: auto;
}

/* Прямоугольная рамка: вытянутые логотипы читаются, квадратные встают по центру; размер фиксирован — без сдвигов. */
.showcase-coll__logo {
    flex: none;
    width: 5.5rem;
    height: 3rem;
    padding: var(--sp-1) var(--sp-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--paper);
    object-fit: contain;
}

.showcase-coll__name {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: var(--lh-ui);
}

.showcase-coll__date,
.showcase-coll__count {
    margin: 0;
    color: var(--muted);
    font-size: var(--fs-caption);
}

.showcase-coll__promo {
    margin: 0;
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-pill);
    background: var(--sale-bg);
    color: var(--sale-strong);
    font-size: var(--fs-caption);
    font-weight: 600;
}

.showcase-coll__row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 12.75rem; /* на широком экране видна часть следующего поста — понятно, что ряд листается */
    gap: var(--sp-3);
    align-items: start;
    margin: 0 calc(-1 * var(--card-pad));
    padding: 0 var(--card-pad) var(--sp-3);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--card-pad);
    list-style: none;
}

@media (max-width: 36rem) {
    .showcase-coll__row {
        grid-auto-columns: 72%;
    }
}

.anon-post {
    overflow: hidden;
    background: var(--paper);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-post);
    scroll-snap-align: start;
}

.anon-post__image {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background: var(--chat);
}

.anon-post__caption {
    padding: var(--sp-3);
    font-size: var(--fs-small);
    line-height: var(--lh-ui);
}

.anon-post__caption p {
    margin: 0;
}

.anon-post__brand {
    font-weight: 600;
}

.anon-post__price {
    font-weight: 500;
}

.anon-post__link {
    position: relative;
    display: block;
    overflow: hidden;
    color: var(--link);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Зона нажатия ссылки ~44 px по высоте без изменения вида строки. */
.anon-post__link::after {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--sp-3)) 0;
}

.anon-post__link:hover {
    text-decoration: underline;
}

.anon-more {
    display: grid;
    place-items: center;
    align-self: stretch;
    min-height: 10rem;
    padding: var(--sp-4);
    border: 1px dashed var(--line);
    border-radius: var(--r-md);
    font-size: var(--fs-small);
    text-align: center;
    scroll-snap-align: start;
}

.anon-more a {
    display: grid;
    place-items: center;
    align-self: stretch;
    justify-self: stretch;
    min-height: 2.75rem;
    color: var(--ink);
    font-weight: 500;
    text-decoration: none;
}

.anon-more a:hover {
    color: var(--link);
}

.showcase__all-wrap,
.showcase__more-wrap {
    display: flex;
    justify-content: center;
    margin-top: var(--sp-5);
}

.showcase__all,
.showcase__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: var(--sp-3) var(--sp-6);
    border: 2px solid var(--ink);
    border-radius: var(--r-pill);
    font: inherit;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.showcase__more[aria-busy="true"] {
    opacity: .6;
    pointer-events: none;
}

/* Запасной вариант без данных бота: статичные примеры. */
.examples {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(14rem, 17rem);
    gap: var(--sp-4);
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter) var(--sp-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    list-style: none;
}

.examples li {
    scroll-snap-align: start;
}

.examples img {
    display: block;
    width: 100%;
    border-radius: var(--r-md);
}

/* На главной подпись о задержке витрины не показываем — она остаётся на странице подборок. */
.home .showcase__note {
    display: none;
}

/* ========== Магазины ========== */

.shops {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(17rem, calc((100% - 2 * var(--sp-4)) / 3));
    gap: var(--sp-4);
    align-items: start;
    margin: 0 calc(-1 * var(--gutter));
    padding: var(--sp-1) var(--gutter) var(--sp-4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    list-style: none;
}

.shops__country {
    padding: var(--card-pad);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    scroll-snap-align: start;
}

.shops__name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-1) var(--sp-3);
    margin-bottom: var(--sp-4);
    font-size: var(--fs-title);
}

.shops__count {
    color: var(--muted);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: 500;
    letter-spacing: 0;
}

.shops__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Свёрнутый список: одинаковая высота карточек, раскрывается кнопкой (assets/js/main.js). */
.shops__list.is-clamped {
    max-height: 14.5rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
    mask-image: linear-gradient(to bottom, #000 72%, transparent);
}

.shops__list li {
    padding: var(--sp-1) var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-size: var(--fs-small);
    line-height: var(--lh-ui);
}

.shops__toggle {
    min-height: 2.75rem;
    margin-top: var(--sp-3);
    padding: var(--sp-2) 0;
    border: 0;
    background: none;
    color: var(--link);
    font: inherit;
    font-size: var(--fs-small);
    font-weight: 500;
    cursor: pointer;
}

.shops__toggle:hover {
    text-decoration: underline;
}

/* ========== Бот ========== */

.bot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(var(--sp-6), 6vw, 5rem);
    align-items: center;
}

.bot .button {
    margin-top: var(--sp-6);
}

/* Куда публикует бот: текстовые метки с точкой в цвете сети, без чужих логотипов. */
.networks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: var(--sp-5) 0 0;
    padding: 0;
    list-style: none;
}

.networks__item {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-3);
    border: 1px solid var(--ink-2);
    border-radius: var(--r-pill);
    background: var(--ink-2);
    font-size: var(--fs-small);
    font-weight: 500;
}

.networks__item::before {
    content: "";
    width: .625rem;
    height: .625rem;
    border-radius: 50%;
    background: var(--network);
}

.networks__item--telegram { --network: #2aabee; }
.networks__item--max { --network: #8b6cff; }
.networks__item--vk { --network: #0077ff; }

.bot__settings {
    display: grid;
    gap: var(--sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bot__settings li {
    justify-self: start;
    max-width: 100%;
    padding: var(--sp-3) var(--sp-4);
    background: var(--ink-2);
    border-radius: var(--r-md) var(--r-md) var(--r-md) var(--sp-1);
    font-size: var(--fs-small);
}

.bot__settings li::first-letter {
    text-transform: uppercase;
}

@media (max-width: 52rem) {
    .bot {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ========== Тарифы ==========
   Три карточки: две страны и выгодный набор из обеих (выделен). */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
}

.plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.75rem 2rem;
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    background: var(--paper);
}

.plan--featured {
    border-color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--ink);
    background: var(--chat);
}

.plan__badge {
    position: absolute;
    top: 0;
    right: 1.75rem;
    transform: translateY(-50%);
    margin: 0;
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-pill);
    background: var(--sale-bg);
    color: var(--sale-strong);
    font-size: var(--fs-caption);
    font-weight: 600;
}

.plan__name {
    margin: 0 0 1.25rem;
    font-family: var(--font-display);
    font-size: var(--fs-title);
    font-weight: 400;
    letter-spacing: -.02em;
    line-height: var(--lh-ui);
}

.plan__flags {
    margin-right: .25rem;
    font-family: var(--font-body);
}

.plan__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .625rem;
    margin: 0 0 1rem;
    font-family: var(--font-display);
    font-size: var(--fs-num);
    font-weight: var(--display-weight);
    letter-spacing: -.03em;
    line-height: var(--lh-display);
}

.plan__price s,
.plan__price small {
    font-family: var(--font-body);
    color: var(--muted);
    font-size: var(--fs-small);
    letter-spacing: 0;
}

.plan__details {
    flex: 1;
    margin: 0 0 1.75rem;
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: var(--fs-small);
}

.plan__details li + li {
    margin-top: .375rem;
}

.plan__cta {
    width: 100%;
}

.plans__note {
    margin: 2rem 0 0;
    color: var(--muted);
}

@media (max-width: 52rem) {
    .plans {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    .plan {
        padding: 1.5rem 1.25rem;
    }

    .plan__name {
        margin-bottom: .5rem;
    }

    .plan__price {
        margin-bottom: .75rem;
    }

    .plan__details {
        margin-bottom: 1.25rem;
    }
}

/* ========== Отзывы ========== */

.reviews {
    columns: 2 22rem;
    column-gap: var(--sp-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bubble--text {
    break-inside: avoid;
    margin-bottom: var(--sp-4);
    padding: var(--sp-4) var(--sp-4) var(--sp-6);
    border-bottom-left-radius: var(--sp-1);
}

.bubble--text blockquote {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-body);
}

/* ========== Партнёрство ==========
   Узкая полоса над подвалом: текст и кнопка в одну строку, на телефоне — друг под другом. */

.partnership {
    padding-block: var(--sp-5);
    border-top: 1px solid var(--line);
}

.partnership__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3) var(--sp-5);
}

.partnership__text {
    color: var(--muted);
    font-size: var(--fs-small);
}

/* Заголовок секции в виде короткой жирной фразы перед текстом. */
.partnership__title,
.partnership__text p {
    display: inline;
    margin: 0;
}

.partnership__title {
    margin-right: var(--sp-1);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: inherit;
    font-weight: 600;
    letter-spacing: normal;
}

/* ========== Подвал ========== */

.site-footer {
    padding-block: var(--sp-7) var(--sp-6);
    background: var(--ink);
    color: var(--muted-on-ink);
    font-size: var(--fs-small);
}

.site-footer__inner {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.5fr;
    gap: var(--sp-6);
}

.site-footer .logo {
    color: var(--paper);
}

.site-footer__brand p {
    max-width: 20rem;
    margin: var(--sp-3) 0 0;
}

.site-footer__col {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.site-footer__title {
    margin: 0 0 var(--sp-1);
    color: var(--paper);
    font-size: var(--fs-body);
    font-weight: 600;
}

.site-footer a:not(.logo) {
    color: var(--muted-on-ink);
    text-decoration: none;
}

.site-footer a:not(.logo):hover {
    color: var(--paper);
    text-decoration: underline;
}

.site-footer__copy {
    margin: var(--sp-7) 0 0;
    padding-top: var(--sp-5);
    border-top: 1px solid var(--ink-hover);
    font-size: var(--fs-caption);
}

@media (max-width: 44rem) {
    .site-footer__inner {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ========== Закреплённая кнопка пробного периода (телефон) ========== */

.dock {
    display: none;
}

@media (max-width: 52rem) {
    .dock {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, .96);
        border-top: 1px solid var(--line);
        box-shadow: 0 -6px 18px rgba(27, 31, 39, .08);
        backdrop-filter: blur(8px);
        transform: translateY(110%);
        transition: transform .25s ease;
    }

    .dock.is-visible {
        transform: none;
    }

    .dock[hidden] {
        display: none;
    }

    .dock__text {
        flex: 1;
        margin: 0;
        color: var(--muted);
        font-size: var(--fs-caption);
        line-height: var(--lh-ui);
    }

    .dock__text b {
        display: block;
        color: var(--ink);
        font-size: var(--fs-small);
    }

    .dock__button {
        min-height: 2.75rem;
        padding-inline: var(--sp-5);
        font-size: var(--fs-small);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dock {
        transition: none;
    }
}

/* ========== Страница «Подборки за 5 дней» ========== */

.feed-hero {
    padding-block: clamp(var(--sp-6), 6vw, var(--sp-8)) var(--sp-5);
}

.feed-hero .hero__title {
    max-width: 52rem;
}

.feed-hero .section__lead {
    margin-top: var(--sp-4);
}

.feed-body {
    padding-block: 0 var(--section);
}

.feed-cta {
    padding-block: clamp(var(--sp-8), 9vw, 7.5rem);
    background: var(--chat);
    border-top: 1px solid var(--line);
}

.feed-cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(var(--sp-6), 5vw, var(--sp-8));
    align-items: center;
}

.feed-cta__title {
    font-size: var(--fs-h2);
}

.feed-cta__lead {
    max-width: 30rem;
    margin: var(--sp-4) 0 0;
    color: var(--muted);
    font-size: var(--fs-lead);
}

.feed-cta__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-4);
    margin: var(--sp-6) 0;
    padding: var(--sp-5) 0;
    border-block: 1px solid var(--line);
}

.feed-cta__stats dt {
    font-family: var(--font-display);
    font-size: var(--fs-num);
    font-weight: var(--display-weight);
    line-height: var(--lh-display);
    white-space: nowrap;
}

.feed-cta__stats dd {
    margin: var(--sp-2) 0 0;
    color: var(--muted);
    font-size: var(--fs-small);
    line-height: var(--lh-ui);
}

.feed-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

/* Веер свежих постов: средний сверху, крайние повёрнуты. */
.feed-cta__fan {
    position: relative;
    height: clamp(22rem, 36vw, 30rem);
}

.cta-post {
    position: absolute;
    width: min(15rem, 62%);
    overflow: hidden;
    background: var(--paper);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lift);
}

.cta-post img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}

.cta-post:nth-child(1) {
    left: 0;
    top: 2.5rem;
    transform: rotate(-6deg);
}

.cta-post:nth-child(2) {
    right: 0;
    top: 0;
    transform: rotate(5deg);
}

.cta-post:nth-child(3) {
    left: 50%;
    top: 4.5rem;
    z-index: 2;
    transform: translateX(-50%);
}

.cta-post__caption {
    padding: var(--sp-2) var(--sp-3) var(--sp-3);
    font-size: var(--fs-small);
    line-height: var(--lh-ui);
}

.cta-post__caption p {
    margin: 0;
}

.cta-post__time {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: var(--fs-caption);
}

.cta-post__new {
    color: var(--sale);
    font-weight: 600;
}

.cta-post__brand {
    font-weight: 600;
}

.cta-post__lock {
    position: absolute;
    inset: auto 0 0;
    display: grid;
    place-items: center;
    height: 46%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, .92) 45%);
}

.cta-post__lock span {
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-pill);
    background: var(--ink);
    color: var(--paper);
    font-size: var(--fs-caption);
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 52rem) {
    .feed-cta__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .feed-cta__fan {
        order: -1;
        height: 19rem;
    }

    .cta-post {
        width: 10rem;
    }

    .cta-post:nth-child(1),
    .cta-post:nth-child(2) {
        top: var(--sp-4);
    }

    .cta-post__lock span {
        padding: var(--sp-1) var(--sp-2);
    }

    .feed-cta__stats {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-2);
    }

    .feed-cta__stats > div {
        display: flex;
        align-items: baseline;
        gap: var(--sp-3);
    }

    .feed-cta__stats dt {
        font-size: var(--fs-num-sm);
    }

    .feed-cta__stats dd {
        margin: 0;
    }

    .feed-cta__actions .button {
        width: 100%;
    }
}

/* ========== Страницы (оферта, политика, 404) ========== */

.entry {
    padding-block: clamp(var(--sp-6), 6vw, var(--sp-8));
}

.entry__title {
    max-width: 46rem;
    margin-bottom: var(--sp-6);
    font-size: var(--fs-h2);
}

.prose {
    max-width: 46rem;
}

.prose h2,
.prose h3 {
    margin: var(--sp-7) 0 var(--sp-3);
    font-weight: 600;
    line-height: var(--lh-ui);
}

.prose h2 {
    font-size: var(--fs-title);
}

.prose h3 {
    font-size: var(--fs-body);
}

.prose p,
.prose ul,
.prose ol {
    margin: 0 0 var(--sp-4);
}

.prose li + li {
    margin-top: var(--sp-2);
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-small);
}

.prose th,
.prose td {
    padding: var(--sp-2);
    border: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.prose .wp-block-table {
    margin: 0 0 var(--sp-4);
    overflow-x: auto;
}

/* ========== Страница оплаты km-pay (Bootstrap 3) ========== */

.page-pay .site-main {
    padding-bottom: var(--sp-7);
}

.page-pay .site-main h1 {
    margin-top: var(--sp-7);
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: var(--display-weight);
    letter-spacing: -.02em;
}