/* =============================================
   pages.css — конструктор контентных страниц витрины
   (информационные, юридические, SEO-гайды, «Полезные статьи»).

   Подключается через $page_styles в templates/layout.php, НЕ входит в
   base.css: эти блоки нужны 16 страницам из ~25 и не участвуют в рендере
   каталога/карточки/корзины — держать их в base.css значило бы грузить
   ~14 КБ на каждой денежной странице ради страниц, куда покупатель
   заходит один раз.

   Собственных цветовых констант тут НЕТ. Всё берётся из :root в base.css
   (--coral/--plum/--stone/--ink/--gold/--shadow/--font-display и т.п.), а
   индивидуальность страницы задают четыре переменные, которые шаблон
   страницы выставляет инлайн на корневом .pg:
     --pg-from / --pg-to  — градиент героя (та же роль, что и $banner_colors
                            у баннера категории в pages/catalog.php);
     --pg-ink             — акцент для иконок/цифр/активных состояний;
     --pg-tint            — светлая подложка того же тона.
   Фолбэки ниже (var(--pg-ink, var(--primary-h))) держат страницу
   работоспособной, если шаблон их не выставил.

   Анимации переиспользуют готовый механизм витрины — [data-animate] +
   [data-delay] из loader.css (IntersectionObserver в assets/js/animate.js),
   поэтому здесь нет ни своих @keyframes появления, ни своего наблюдателя.
   ВАЖНО: loader.css определяет только шаг задержек 100/150/200/250/300/
   350/400/500 — data-delay с другим числом (60/120/…) молча не действует.
   ============================================= */

.pg {
    --pg-radius-lg: 20px;
    --pg-accent: var(--pg-ink, var(--primary-h));
    --pg-soft: var(--pg-tint, var(--primary-light));
}

/* ---------- ГЕРОЙ ---------- */

.pg-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, var(--pg-from, #5B2A45) 0%, var(--pg-to, #2F1224) 100%);
}

/* Геометрия ОБЯЗАНА совпадать с .container из base.css (max-width 1220px,
   расширение до 1600px с 1440px, padding 0 24px) — иначе заголовок героя
   и содержимое секций под ним стоят на разных вертикалях. Поймано живой
   проверкой на проде: при собственном max-width 1180px текст героя
   начинался на 154px от края, а чипы рубрик под ним — на 24px. */
.pg-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 1220px;
    margin: 0 auto;
    padding: 52px 24px 58px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 40px;
}

@media (min-width: 1440px) {
    .pg-hero__inner {
        max-width: 1600px;
    }
}

/* Мягкие световые пятна — тот же приём, что уже держит .category-banner__icon
   (radial-gradient поверх сплошной заливки), только вынесенный в фон блока. */
.pg-hero__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(46px);
    opacity: .5;
    pointer-events: none;
}

.pg-hero__blob--a {
    width: 340px;
    height: 340px;
    background: rgba(255, 255, 255, .3);
    top: -140px;
    right: 16%;
}

.pg-hero__blob--b {
    width: 260px;
    height: 260px;
    background: rgba(255, 255, 255, .16);
    bottom: -150px;
    left: 6%;
}

.pg-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    font-size: .82rem;
    color: rgba(255, 255, 255, .72);
    margin-bottom: 16px;
}

.pg-crumbs a {
    color: inherit;
    text-decoration: none;
    transition: color .18s;
}

.pg-crumbs a:hover {
    color: #fff;
}

.pg-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .24);
    padding: 6px 13px;
    border-radius: 999px;
    margin-bottom: 16px;
}

.pg-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 4.6vw, 3rem);
    line-height: 1.12;
    color: #fff;
    margin: 0 0 14px;
    text-wrap: balance;
}

.pg-hero__lede {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .86);
    max-width: 56ch;
    margin: 0 0 24px;
}

.pg-hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 26px;
}

.pg-fact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    padding: 8px 15px;
    font-size: .875rem;
    font-weight: 500;
}

.pg-fact svg {
    flex-shrink: 0;
}

.pg-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Иллюстрация — тот же «медальон», что у .category-banner__icon в
   catalog.css, поэтому контентная страница и страница категории читаются
   как один сайт, а не два разных шаблона. */
.pg-art {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .24), rgba(255, 255, 255, .07) 70%);
    display: grid;
    place-items: center;
    color: #fff;
    flex-shrink: 0;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .22));
}

.pg-art svg {
    width: 132px;
    height: 132px;
}

@media (max-width: 880px) {
    .pg-hero__inner {
        grid-template-columns: 1fr;
        padding: 36px 20px 42px;
    }

    .pg-art {
        width: 150px;
        height: 150px;
        justify-self: start;
        order: -1;
        margin-bottom: 6px;
    }

    .pg-art svg {
        width: 90px;
        height: 90px;
    }
}

/* ---------- КАРТОЧКИ ---------- */

.pg-cards {
    display: grid;
    gap: 20px;
}

.pg-cards--2 {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.pg-cards--3 {
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.pg-cards--4 {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.pg-card {
    position: relative;
    overflow: hidden;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--pg-radius-lg);
    padding: 26px;
    box-shadow: var(--shadow);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1), box-shadow .28s, border-color .28s;
}

.pg-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    border-color: transparent;
}

.pg-card__icon {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    background: var(--pg-soft);
    color: var(--pg-accent);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

.pg-card:hover .pg-card__icon {
    transform: scale(1.09) rotate(-4deg);
}

.pg-card h3 {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    line-height: 1.3;
    color: var(--text);
    margin: 0 0 9px;
}

.pg-card p {
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--text-light);
    margin: 0;
}

.pg-card__meta {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--pg-accent);
}

/* ---------- ТАЙМЛАЙН ПРОЦЕССА ---------- */

.pg-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.pg-tl {
    position: relative;
    padding: 0 18px;
    text-align: center;
}

.pg-tl::before {
    content: '';
    position: absolute;
    top: 28px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--border) 0 7px, transparent 7px 14px);
}

.pg-tl:first-child::before {
    display: none;
}

.pg-tl__dot {
    position: relative;
    z-index: 2;
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--pg-soft);
    color: var(--pg-accent);
    display: grid;
    place-items: center;
    box-shadow: 0 4px 14px rgba(43, 30, 39, .08);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), border-color .3s;
}

.pg-tl:hover .pg-tl__dot {
    transform: scale(1.08);
    border-color: var(--pg-accent);
}

.pg-tl__num {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: var(--pg-accent);
    color: #fff;
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 700;
    display: grid;
    place-items: center;
}

.pg-tl h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--text);
    margin: 0 0 7px;
}

.pg-tl p {
    font-size: .875rem;
    line-height: 1.55;
    color: var(--text-light);
    margin: 0;
}

/* На узком экране таймлайн разворачивается в вертикальный список.
   Заголовок и текст ЯВНО кладутся во вторую колонку: .pg-tl — grid c тремя
   детьми, без этого <p> уезжает в первую колонку шириной 56px и текст
   рвётся по одному слову в строку. */
@media (max-width: 800px) {
    .pg-timeline {
        grid-template-columns: 1fr;
        gap: 26px;
        text-align: left;
    }

    .pg-tl {
        display: grid;
        grid-template-columns: 56px 1fr;
        grid-template-rows: auto auto;
        column-gap: 16px;
        row-gap: 5px;
        align-items: start;
        text-align: left;
        padding: 0;
    }

    .pg-tl::before {
        top: 60px;
        left: 27px;
        width: 2px;
        height: calc(100% - 34px);
        background: repeating-linear-gradient(180deg, var(--border) 0 7px, transparent 7px 14px);
    }

    .pg-tl:last-child::before {
        display: none;
    }

    .pg-tl__dot {
        grid-column: 1;
        grid-row: 1 / span 2;
        margin: 0;
    }

    .pg-tl h3 {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        margin: 0;
    }

    .pg-tl p {
        grid-column: 2;
        grid-row: 2;
    }
}

/* Пять шагов вместо четырёх («Возврат и обмен»). Отдельный модификатор,
   а не grid-auto-flow: число колонок должно быть ЯВНЫМ — иначе на узком
   десктопе последний шаг молча уезжает на вторую строку и ломает линию
   между точками. */
.pg-timeline--5 {
    grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1100px) and (min-width: 801px) {
    .pg-timeline--5 {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 34px;
    }

    /* При переносе на вторую строку соединительная черта у первого
       элемента новой строки тянулась бы из ниоткуда — гасим её. */
    .pg-timeline--5 .pg-tl:nth-child(4)::before {
        display: none;
    }
}

@media (max-width: 800px) {
    .pg-timeline--5 {
        grid-template-columns: 1fr;
    }
}

/* Карточка целиком — ссылка (телефон, почта на «Контактах»). Наследует
   вид обычной .pg-card, добавляет только поведение ссылки. */
.pg-card--link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.pg-card--link:hover h3 {
    color: var(--pg-accent);
}

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

/* Заголовок карточки-контакта — это номер и адрес почты: их читают по
   цифрам и по символам, поэтому без переносов внутри и с моноширинными
   цифрами. */
.pg-card--link h3 {
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* ---------- ВРЕЗКА ---------- */

.pg-callout {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--pg-soft);
    border-left: 3px solid var(--pg-accent);
    border-radius: var(--radius);
    padding: 20px 22px;
}

.pg-callout svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--pg-accent);
}

.pg-callout p {
    font-size: .9375rem;
    line-height: 1.6;
    margin: 0;
}

.pg-callout strong {
    display: block;
    margin-bottom: 4px;
    font-weight: 700;
}

/* ---------- ТАБЛИЦА ---------- */

.pg-tablewrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--pg-radius-lg);
    background: var(--white);
}

.pg-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: .9375rem;
}

.pg-table th {
    text-align: left;
    padding: 15px 20px;
    background: var(--bg);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--text-light);
    white-space: nowrap;
}

.pg-table td {
    padding: 15px 20px;
    border-top: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
}

.pg-table tr:hover td {
    background: var(--bg);
}

.pg-table td b {
    color: var(--pg-accent);
}

/* ---------- FAQ ---------- */

.pg-faq {
    display: grid;
    gap: 10px;
}

.pg-faq details {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}

.pg-faq details[open] {
    border-color: var(--pg-accent);
    box-shadow: var(--shadow);
}

.pg-faq summary {
    list-style: none;
    cursor: pointer;
    padding: 17px 20px;
    font-weight: 600;
    font-size: .9375rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.pg-faq summary::-webkit-details-marker {
    display: none;
}

.pg-faq summary::after {
    content: '';
    width: 9px;
    height: 9px;
    margin-right: 3px;
    border-right: 2px solid var(--pg-accent);
    border-bottom: 2px solid var(--pg-accent);
    transform: rotate(45deg);
    transition: transform .25s;
    flex-shrink: 0;
}

.pg-faq details[open] summary::after {
    transform: rotate(-135deg);
}

.pg-faq summary:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.pg-faq__body {
    padding: 0 20px 19px;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--text-light);
    animation: pgFaqIn .28s ease;
}

.pg-faq__body p {
    margin: 0 0 10px;
}

.pg-faq__body p:last-child {
    margin-bottom: 0;
}

@keyframes pgFaqIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- ЗАКРЫВАЮЩИЙ ПРИЗЫВ ---------- */

.pg-cta {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--pg-from, #5B2A45) 0%, var(--pg-to, #2F1224) 100%);
    border-radius: 24px;
    padding: 44px;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
}

.pg-cta::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    top: -130px;
    right: -70px;
}

.pg-cta__text {
    position: relative;
    z-index: 2;
    max-width: 52ch;
}

.pg-cta h2 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    line-height: 1.2;
    color: #fff;
    margin: 0 0 8px;
}

.pg-cta p {
    font-size: .9375rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .85);
    margin: 0;
}

.pg-cta__btns {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 640px) {
    .pg-cta {
        padding: 30px 24px;
    }
}

/* Светлая кнопка на градиенте — .btn-primary/.btn-outline из base.css на
   цветном фоне героя нечитаемы (они рассчитаны на песочный фон страницы). */
.btn-light {
    background: #fff;
    color: var(--text);
    border-color: #fff;
}

.btn-light:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
    color: var(--text);
}

.btn-ghost {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .4);
    color: #fff;
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

/* ---------- ЦИФРЫ ---------- */

.pg-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 20px;
}

.pg-stat {
    text-align: center;
    padding: 28px 18px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--pg-radius-lg);
    transition: transform .28s, box-shadow .28s;
}

.pg-stat:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.pg-stat__num {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--pg-accent);
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
}

.pg-stat__label {
    font-size: .875rem;
    line-height: 1.5;
    color: var(--text-light);
}

/* ---------- СПИСОК «ДА / НЕТ» ---------- */

.pg-checks {
    display: grid;
    gap: 11px;
}

.pg-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 15px 18px;
    transition: border-color .2s, transform .2s;
}

.pg-check:hover {
    border-color: var(--pg-accent);
    transform: translateX(3px);
}

.pg-check__mark {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.pg-check--yes .pg-check__mark {
    background: #E6F0E8;
    color: #3E6B47;
}

.pg-check--no .pg-check__mark {
    background: #FBE4E0;
    color: var(--brick);
}

.pg-check p {
    font-size: .9375rem;
    line-height: 1.6;
    margin: 0;
}

.pg-check b {
    display: block;
    margin-bottom: 2px;
}

/* ---------- ЮРИДИЧЕСКАЯ СТРАНИЦА: ОГЛАВЛЕНИЕ + СЕКЦИИ ---------- */

.pg-legal {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 40px;
    align-items: start;
}

.pg-toc {
    position: sticky;
    top: 76px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--pg-radius-lg);
    padding: 20px;
    box-shadow: var(--shadow);
}

.pg-toc h2 {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .11em;
    color: var(--text-light);
    margin: 0 0 13px;
}

.pg-toc ol {
    list-style: none;
    counter-reset: pgtoc;
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
}

.pg-toc a {
    counter-increment: pgtoc;
    display: flex;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: .875rem;
    text-decoration: none;
    color: var(--text-light);
    transition: background .18s, color .18s;
}

.pg-toc a::before {
    content: counter(pgtoc);
    font-weight: 700;
    color: var(--pg-accent);
    opacity: .55;
    font-variant-numeric: tabular-nums;
}

.pg-toc a:hover {
    background: var(--pg-soft);
    color: var(--text);
}

/* Оглавление тем на «Частых вопросах».
   Базовый .pg-toc сделан для юридических страниц: он липкий (стоит сбоку
   от текста) и нумерует пункты, потому что там разделы действительно идут
   по порядку и на них ссылаются номером. Темы вопросов — не
   последовательность: «Оплата» не следует за «Доставкой», к ним приходят
   напрямую. Поэтому здесь номера убраны, список превращён в ряд ссылок, а
   липкость снята — блок стоит один раз в начале страницы, и прилипать ему
   не к чему. */
.pg-toc--topics {
    position: static;
}

.pg-toc--topics ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.pg-toc--topics a {
    padding: 9px 15px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-weight: 600;
    color: var(--text);
}

.pg-toc--topics a::before {
    content: none;
}

.pg-toc--topics a:hover {
    border-color: var(--pg-accent);
    background: var(--pg-soft);
}

.pg-legal__sec {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--pg-radius-lg);
    padding: 28px;
    margin-bottom: 16px;
}

.pg-legal__sec h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--text);
    margin: 0 0 12px;
    scroll-margin-top: 80px;
}

.pg-legal__sec p {
    font-size: .9375rem;
    line-height: 1.7;
    color: var(--text-light);
    margin: 0 0 11px;
}

.pg-legal__sec p:last-child {
    margin-bottom: 0;
}

/* list-style возвращаем явно: base.css гасит маркеры глобально (ul,ol
   {list-style:none}) ради навигационных списков, и без этого перечисление
   в юридическом разделе выглядит как набор оборванных строк. */
.pg-legal__sec ul {
    display: grid;
    gap: 6px;
    margin: 0 0 11px 20px;
    padding: 0;
    list-style: disc;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--text-light);
}

.pg-legal__sec li::marker {
    color: var(--pg-accent);
}

.pg-updated {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .875rem;
    color: var(--text-light);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 16px;
    margin-bottom: 22px;
}

@media (max-width: 900px) {
    .pg-legal {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .pg-toc {
        position: static;
    }
}

/* ---------- ТЕКСТ + ИЛЛЮСТРАЦИЯ ---------- */

.pg-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    align-items: center;
}

.pg-split__art {
    aspect-ratio: 1;
    border-radius: 28px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--pg-from, #5B2A45), var(--pg-to, #2F1224));
}

.pg-split__art svg {
    width: 46%;
    height: 46%;
}

.pg-prose p {
    font-size: .9375rem;
    line-height: 1.75;
    color: var(--text-light);
    margin: 0 0 13px;
}

.pg-prose p:last-child {
    margin-bottom: 0;
}

.pg-quote {
    border-left: 3px solid var(--pg-accent);
    padding: 6px 0 6px 22px;
    margin: 26px 0;
    font-family: var(--font-display);
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--dark);
}

.pg-quote cite {
    display: block;
    margin-top: 11px;
    font-family: var(--font-body);
    font-size: .8125rem;
    font-style: normal;
    font-weight: 500;
    color: var(--text-light);
}

@media (max-width: 820px) {
    .pg-split {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .pg-split__art {
        max-width: 320px;
        justify-self: center;
        width: 100%;
    }
}

/* ---------- ПЕРЕЛИНКОВКА ---------- */

.pg-links {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.pg-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--card-bg);
    border: 1.5px solid var(--border);
    border-radius: 999px;
    padding: 9px 17px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    transition: border-color .2s, color .2s, transform .2s, box-shadow .2s;
}

.pg-link:hover {
    border-color: var(--pg-accent);
    color: var(--pg-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.pg-links-title {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-light);
    margin: 0 0 12px;
}

/* Подборка товаров на SEO-странице: пояснение вместо пустой сетки и ряд
   ссылок под сеткой. */
.pg-empty-note {
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--text-light);
    margin: 0 0 16px;
}

.pg-links--after-grid {
    margin-top: 26px;
}

/* ---------- КАТАЛОГ СТАТЕЙ ---------- */

/* Фильтр рубрик без JS: радиокнопка + соседний .ar-grid. Инпуты скрыты
   визуально, но НЕ через display:none — иначе они выпадают из порядка
   табуляции и рубрику нельзя выбрать с клавиатуры. Тот же приём и та же
   разметка, что уже применяет .rv-size-fit в pages/reviews.php. */
.ar-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 26px;
}

.ar-filter > input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    /* clip-path, а не устаревший clip: rect(...) — тот же визуальный
       результат, но clip помечен deprecated (Stylelint property-no-
       deprecated). Соседний .rv-stars в reviews.php ещё на старом
       свойстве; переведём его вместе с переработкой отзывов, отдельной
       правкой в чужом файле сейчас не лезем. */
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.ar-filter > label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    background: var(--card-bg);
    cursor: pointer;
    font-size: .875rem;
    transition: border-color .18s, background .18s, color .18s, transform .18s;
}

.ar-filter > label:hover {
    border-color: var(--pg-accent);
    transform: translateY(-1px);
}

.ar-filter > input:checked + label {
    background: var(--pg-accent);
    border-color: var(--pg-accent);
    color: #fff;
}

.ar-filter > input:focus-visible + label {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.ar-filter__n {
    font-size: .75rem;
    opacity: .65;
    font-variant-numeric: tabular-nums;
}

/* .ar-grid — последний ребёнок .ar-filter, поэтому доступен как соседний
   селектор каждой радиокнопки. Скрытие через display:none на карточке
   (а не visibility) — иначе сетка сохраняет пустые ячейки. */
#ar_cat_size:checked ~ .ar-grid .ar-card:not([data-cat="size"]),
#ar_cat_style:checked ~ .ar-grid .ar-card:not([data-cat="style"]),
#ar_cat_season:checked ~ .ar-grid .ar-card:not([data-cat="season"]),
#ar_cat_help:checked ~ .ar-grid .ar-card:not([data-cat="help"]) {
    display: none;
}

.ar-grid {
    flex-basis: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 22px;
}

.ar-card {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--pg-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s;
}

.ar-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
}

.ar-card__art {
    height: 150px;
    display: grid;
    place-items: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.ar-card__art svg {
    width: 74px;
    height: 74px;
    transition: transform .4s cubic-bezier(.34, 1.4, .64, 1);
}

.ar-card:hover .ar-card__art svg {
    transform: scale(1.12) rotate(-4deg);
}

.ar-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 9px;
    padding: 20px;
}

.ar-card__chip {
    align-self: flex-start;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--stone-deep);
    color: var(--plum-deep);
}

.ar-card h2 {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    line-height: 1.3;
    color: var(--text);
    margin: 0;
}

.ar-card p {
    flex: 1;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--text-light);
    margin: 0;
}

.ar-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: .8125rem;
    color: var(--text-light);
}

.ar-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ar-card__go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--primary-h);
    transition: gap .2s;
}

.ar-card:hover .ar-card__go {
    gap: 11px;
}

/* ---------- КАРТА ДОСТАВКИ ---------- */

.map-split {
    display: grid;
    grid-template-columns: minmax(300px, 400px) 1fr;
    gap: 48px;
    align-items: center;
}

.map-figure {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 26px 26px 20px;
    box-shadow: var(--shadow);
}

.map-figure svg {
    width: 100%;
    height: auto;
    display: block;
}

.mp-fill {
    fill: var(--bg);
    stroke: none;
}

.mp-dist {
    fill: none;
    stroke: var(--border);
    stroke-width: 2.2;
    stroke-linejoin: round;
}

.mp-tr {
    fill: url("#mpNoGo");
    stroke: var(--brick);
    stroke-width: 5;
    stroke-linejoin: round;
}

.mp-out {
    fill: none;
    stroke: var(--text-light);
    stroke-width: 5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.mp-cities circle {
    fill: var(--pg-accent);
}

.mp-cities .mp-cap {
    fill: var(--text);
}

.mp-cities .mp-no {
    fill: var(--white);
    stroke: var(--brick);
    stroke-width: 5;
}

.mp-cities text {
    font-family: var(--font-body);
    font-size: 34px;
    font-weight: 600;
    fill: var(--text);
    stroke: var(--white);
    stroke-width: 7;
    paint-order: stroke fill;
    stroke-linejoin: round;
}

.mp-cities .mp-lbl-no {
    fill: var(--brick);
    font-weight: 500;
}

.map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 16px;
    font-size: .8125rem;
    color: var(--text-light);
}

.map-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.map-legend i {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    flex-shrink: 0;
}

.map-legend .lg-ok {
    background: var(--bg);
    border: 1.5px solid var(--text-light);
}

.map-legend .lg-no {
    background: repeating-linear-gradient(45deg, #A8433B 0 4px, #FBEDE9 4px 8px);
    border: 1.5px solid var(--brick);
}

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

    .map-figure {
        max-width: 320px;
        justify-self: center;
        width: 100%;
    }
}

/* ── СТРАНИЦА ПОДБОРА РАЗМЕРА (/podbor-razmera) ──────────────────────────
   Форма и результат живут рядом: на десктопе в две колонки, на мобильном
   друг под другом. Поля переиспользуют оформление виджета с карточки товара
   (.prd-size-calc__field и соседние из product.css) -- намеренно, чтобы один
   и тот же инструмент выглядел одинаково в обоих местах, а не как два разных. */
.calc-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    margin-bottom: 32px;
}
.calc-page__form {
    padding: 24px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 18px;
}
.calc-page__result:empty { display: none; }
.calc-page__result {
    padding: 24px;
    background: var(--primary-light);
    border-radius: 18px;
}
/* Ответ -- главное, ради чего страницу открыли: он крупнее всего остального
   на экране и набран акцидентным шрифтом заголовков. */
.calc-page__answer {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.25;
    color: var(--primary-h);
}
.calc-page__saved {
    margin: 14px 0 0;
    font-size: var(--fs-xs);
    color: var(--text-light);
    line-height: 1.45;
}
.calc-page__how { margin-top: 8px; }
.calc-page__how h2 { font-size: 1.125rem; margin: 0 0 10px; }
.calc-page__how ul { margin: 0 0 14px; padding-left: 20px; }
.calc-page__how li { margin-bottom: 6px; line-height: 1.5; }
.calc-page__note {
    margin: 0;
    padding-left: 12px;
    border-left: 3px solid var(--border);
    color: var(--text-light);
    line-height: 1.5;
}
@media (max-width: 860px) {
    .calc-page { grid-template-columns: 1fr; gap: 20px; }
    .calc-page__form { padding: 18px; }
    .calc-page__result { padding: 18px; }
}

/* ── /tablica-razmerov ────────────────────────────────────────────────────
   Конвертер и таблица соответствия. Живут здесь, а не в product.css: там
   стили виджета на карточке товара (.prd-size-calc__*), а этот блок --
   отдельная посадочная и грузится вместе с остальными статичными страницами.

   Таблица широкая по определению: восемь колонок не сожмутся до 360px без
   потери читаемости. Поэтому она не «адаптируется», а горизонтально
   прокручивается внутри своего контейнера -- страница при этом не едет
   вбок. Первая колонка при прокрутке залипает, иначе на телефоне пропадает
   ответ на вопрос «а это чья строка». */
.sc-convert {
    background: var(--pg-soft);
    border-radius: var(--pg-radius-lg);
    padding: 20px;
    margin-bottom: 24px;
}

.sc-convert__controls { display: flex; flex-wrap: wrap; gap: 16px; }

.sc-convert__field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 180px; }
.sc-convert__field > span { font-size: var(--fs-xs); font-weight: 600; color: var(--text); }

.sc-convert__field select {
    width: 100%;
    padding: 10px 12px;
    font-size: var(--fs-sm);
    font-family: inherit;
    color: var(--dark);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.sc-convert__field select:focus {
    outline: none;
    border-color: var(--pg-accent);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.sc-convert__answer:empty { display: none; }
.sc-convert__answer { margin-top: 16px; }
.sc-answer__line { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--dark); font-weight: 600; }
.sc-answer__body { margin: 6px 0 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--text); }
.sc-answer__cta { margin-top: 14px; }

.sc-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: var(--pg-radius-lg);
}

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

.sc-table th,
.sc-table td {
    padding: 10px 14px;
    text-align: center;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}

.sc-table thead th {
    position: sticky;
    top: 0;
    background: var(--pg-soft);
    color: var(--pg-accent);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sc-table tbody tr:last-child th,
.sc-table tbody tr:last-child td { border-bottom: 0; }

.sc-table tbody tr:hover td,
.sc-table tbody tr:hover > th { background: var(--pg-soft); }

/* Российский размер -- и заголовок строки, и ссылка в каталог: справочный
   запрос должен иметь выход к товару на каждой строке, а не одной кнопкой. */
.sc-table tbody th {
    position: sticky;
    left: 0;
    background: #fff;
    font-weight: 700;
}

.sc-table tbody th a { color: var(--pg-accent); text-decoration: none; border-bottom: 1px solid transparent; }
.sc-table tbody th a:hover { border-bottom-color: currentColor; }

.sc-notes { margin-top: 20px; }
.sc-notes p { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-light); margin: 0 0 10px; }

@media (max-width: 600px) {
    .sc-convert { padding: 16px; }
    .sc-convert__controls { gap: 12px; }
    .sc-table th,
    .sc-table td { padding: 8px 10px; }
}

.calc-page__crosslink { margin: 18px 0 0; font-size: var(--fs-sm); }
.calc-page__crosslink a { color: var(--pg-accent); }
.sc-answer__cta + .sc-answer__cta { margin-left: 10px; }