/*
====================================================================

Components

====================================================================
*/


/* ================================================================
   Sections and separators
   ================================================================ */

.dd-section {
    --dd-section-bg: var(--dd-background);

    background: var(--dd-section-bg);
}

.dd-section--footer {
    --dd-section-bg: var(--dd-footer-background);

    color: var(--dd-footer-text);
}

.dd-separator {
    --dd-separator-height: 90px;

    position: relative;

    height: var(--dd-separator-height);
    margin: calc(var(--dd-separator-height) * -1) 0 0 !important;

    overflow: hidden;
    pointer-events: none;
}

.dd-separator::after {
    position: absolute;
    inset: 0;
    z-index: 1;

    content: "";

    background: var(--dd-section-bg);
}

.dd-separator--diagonal-down::after {
    clip-path: polygon(0 0, 101% 100%, 0 100%);
}

.dd-separator--diagonal-up::after {
    clip-path: polygon(0 0, 0 100%, 101% 0);
}

.dd-separator--sm {
    --dd-separator-height: 56px;
}

.dd-separator--md {
    --dd-separator-height: clamp(64px, 5vw, 90px);
}

.dd-separator--lg {
    --dd-separator-height: clamp(90px, 7vw, 132px);
}


/* ================================================================
   База

   Горизонтальный скролл страницы запрещён: невыстрелившие
   reveal-элементы (translateX до появления) и любые будущие выносы
   не должны давать боковой дрейф. clip, а не hidden - не создаёт
   скролл-контейнер. То же делал референс (html{overflow-x:hidden}).
   ================================================================ */

html,
body {
    overflow-x: clip;
}

/* Якорные переходы не прячут цель под фиксированный навбар. */
html {
    scroll-padding-top: calc(var(--dd-navbar-height, 80px) + 16px);
    scroll-behavior: smooth;
}


/* ================================================================
   Footer
   ================================================================ */

.dd-footer {
    /* -1px сверху - против просвета под срезом главной. */
    margin: -1px 0 0 !important;
    /* +50px сверху: место под свисающий клин среза главной. */
    padding: calc(clamp(44px, 6vw, 84px) + 50px) 20px clamp(52px, 7vw, 104px);

    color: var(--dd-footer-text);
    background: var(--dd-footer-background);
}

.dd-footer a {
    color: var(--dd-footer-link);
}

.dd-footer a:hover,
.dd-footer a:focus-visible {
    color: var(--dd-primary-light);
}

.dd-footer__columns {
    gap: clamp(28px, 4vw, 64px);
    max-width: 1180px;
    margin: 0 auto !important;
}

.dd-footer__column {
    min-width: 0;
}

.dd-footer h2,
.dd-footer h3,
.dd-footer h4 {
    margin-top: 0;
    margin-bottom: 24px;

    color: inherit;
    font-size: 1.5rem;
    font-weight: var(--dd-font-weight-bold);
    line-height: 1.2;
}

.dd-footer h2 a,
.dd-footer h3 a,
.dd-footer h4 a {
    color: inherit;
}

.dd-footer p,
.dd-footer li {
    color: inherit;
    font-size: 1rem;
    line-height: 1.65;
}

.dd-footer ul {
    margin: 0;
    padding-left: 1.2em;
}

.dd-footer__badges {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-top: 42px;
}

.dd-footer__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 32px;
}

.dd-footer__badge svg {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.dd-footer__badge--vk svg {
    width: 32px;
    height: 32px;
}

.dd-footer__badge--ok span {
    display: block;
    width: 48px;
    height: 48px;
    background-image: url("https://st-ok.cdn-vk.ru/res/assets/redesign2023_logo@2x_fmfomkrg.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 48px;
}

.dd-footer__badge--award svg {
    width: 42px;
    height: 24px;
}

.dd-footer__site-map-list a,
.dd-footer__site-map-full a {
}

.dd-footer__payment-icons {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 34px;
}

.dd-footer__payment-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 42px;
}

.dd-footer__payment-badge--mir {
    width: 82px;
    margin-top: 6px;
}

.dd-footer__payment-badge img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 100%;
}

.dd-footer .wp-block-columns {
    margin-bottom: 0;
}

@media (max-width: 781px) {
    .dd-footer {
        padding-inline: 18px;
    }

    .dd-footer__columns {
        gap: 32px;
    }
}


/* ================================================================
   Navbar
   ================================================================ */

.dd-navbar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;

    /*
     * Единый ритм навбара. Одно значение задаёт расстояние и между
     * группами ряда, и внутри группы телефонов, и между пунктами меню.
     * Пункты вычитают свои горизонтальные отступы (6px с каждой
     * стороны), чтобы визуальное расстояние между надписями совпадало
     * с расстоянием между кнопками, а не считалось от границ бокса.
     */
    --dd-navbar-gap: 16px;

    width: 100%;
    min-height: var(--dd-navbar-height, 80px);

    color: var(--dd-text);
    background: var(--dd-foreground);
    border-bottom: 1px solid var(--dd-primary-grey);
    box-shadow: var(--wp--preset--shadow--natural, 6px 6px 9px rgba(0, 0, 0, .2));
}

.dd-navbar a {
    color: inherit;
}

#content {
    padding-top: var(--dd-navbar-height, 80px);
}

.dd-breadcrumbs {
    position: relative;
    z-index: 10;

    margin: 0;
    padding-top: var(--dd-navbar-height, 80px);

    color: var(--dd-primary-light);

    /* Тот же фон, что у страниц (--dd-background): полоса крошек
       не должна отличаться оттенком от фона контента. */
    background: var(--dd-background);
}

.dd-breadcrumbs + #content {
    padding-top: 0;
}

.dd-breadcrumbs__inner {
    padding-top: 4px;
    padding-bottom: 5px;

    font-size: 1rem;
    line-height: 1.25;
    text-align: right;
}

.dd-breadcrumbs__label {
    color: var(--dd-primary-light);
}

.dd-breadcrumbs a {
    color: var(--dd-primary-light);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.dd-breadcrumbs a:first-of-type {
    color: var(--dd-primary-light);
}

.dd-breadcrumbs a:hover,
.dd-breadcrumbs a:focus-visible {
    color: var(--dd-primary);
}

.dd-navbar__inner {
    display: flex;
    align-items: center;
    gap: 18px;

    width: 100%;
    min-height: var(--dd-navbar-height, 80px);

    margin: 0 auto;
    padding-block: 0;
}

.dd-navbar__logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;

    min-width: 0;
}

.dd-navbar__logo-image {
    display: block;

    max-height: var(--dd-navbar-button-size, 50px);
    width: auto;
}

.dd-navbar__logo-image--compact {
    display: none;

    width: var(--dd-navbar-button-size, 50px);
    height: var(--dd-navbar-button-size, 50px);
    object-fit: contain;
}

.dd-navbar__menu {
    flex: 0 1 auto;
    min-width: 0;
}

.dd-navbar__menu-list,
.dd-navbar__mobile-menu-list {
    display: flex;
    align-items: center;
    gap: 4px;

    width: auto;
    margin: 0;
    padding: 0;

    list-style: none;
}

.dd-navbar__menu-list {
    flex: 0 0 auto;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    max-width: max-content;

    /* Минус горизонтальные отступы ссылки, по 6px с каждой стороны. */
    gap: calc(var(--dd-navbar-gap) - 12px);
}

.dd-navbar__menu-list li,
.dd-navbar__mobile-menu-list li {
    position: relative;
}

.dd-navbar__menu-list a {
    position: relative;
    display: inline-flex;
    align-items: center;

    min-height: 38px;
    padding: 8px 6px;

    color: var(--dd-primary);
    font-size: 1.25rem;
    border-radius: 6px;
    white-space: nowrap;
    transition: color .18s ease;
}

.dd-navbar__menu-list a:hover,
.dd-navbar__menu-list a:focus-visible {
    color: var(--dd-accent);
}

/*
 * Стрелка выведена из текстового потока (position: absolute), а не
 * стоит рядом как flex-элемент. Место под неё резервирует
 * padding-right у самой ссылки - единственный механизм, gap здесь
 * не нужен, так как абсолютный элемент не участвует в потоке.
 * Пункты без детей это правило не затрагивает.
 */
.dd-navbar__menu-list > .menu-item-has-children > a {
    padding-right: 24px;
}

.dd-navbar__menu-list > .menu-item-has-children > a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;

    width: 7px;
    height: 7px;

    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
    transition: transform .18s ease;
}

.dd-navbar__menu-list > .menu-item-has-children:hover > a::after,
.dd-navbar__menu-list > .menu-item-has-children:focus-within > a::after {
    transform: translateY(-50%) rotate(225deg);
}

.dd-navbar__menu-list .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;

    display: none;
    min-width: 220px;

    margin: 0;
    padding: 8px;

    list-style: none;
    background: var(--dd-foreground);
    border: 1px solid var(--dd-primary-grey);
    box-shadow: 0 18px 40px rgba(6, 17, 47, .12);
}

.dd-navbar__menu-list li:hover > .sub-menu,
.dd-navbar__menu-list li:focus-within > .sub-menu {
    display: block;
}

.dd-navbar__menu-list .sub-menu a {
    display: flex;
    width: 100%;
}

.dd-navbar__items {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--dd-navbar-gap);

    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
}

.dd-navbar__phones {
    display: flex;
    align-items: center;
    gap: var(--dd-navbar-gap);

    white-space: nowrap;
}

.dd-navbar__phone-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dd-navbar__phones .dd-navbar__phone-link {
    color: var(--dd-primary);
    font-size: 1.0625rem;
}

.dd-navbar__action,
.dd-navbar__search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /*
     * Кнопки не сжимаются: при тесноте flex давил их по ширине, высоту
     * не трогал, и круг превращался в овал. Сжиматься должен зазор
     * между кнопками, а не сами кнопки.
     */
    flex: 0 0 auto;

    width: var(--dd-navbar-button-size, 50px);
    height: var(--dd-navbar-button-size, 50px);
    padding: 0;

    color: var(--dd-foreground);
    background: var(--dd-primary);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

.dd-navbar a.dd-navbar__action {
    color: var(--dd-foreground);
}

.dd-navbar__action:hover,
.dd-navbar__action:focus-visible,
.dd-navbar__search-submit:hover,
.dd-navbar__search-submit:focus-visible {
    color: var(--dd-foreground);
    background: var(--dd-accent);
}

.dd-icon {
    display: block;

    width: 27px;
    height: 27px;

    flex: 0 0 auto;
}

.dd-icon--image {
    max-width: 70%;
    max-height: 70%;
    object-fit: contain;
}

.dd-navbar__inline-svg-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: var(--dd-inline-svg-width, auto);
    height: var(--dd-inline-svg-height, auto);

    flex: 0 0 auto;
}

.dd-navbar__inline-svg-link svg {
    display: block;
    width: var(--dd-inline-svg-width, auto);
    height: var(--dd-inline-svg-height, auto);
}

.dd-navbar__search {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dd-navbar__search-input {
    width: 170px;
    height: var(--dd-navbar-button-size, 50px);
    padding: 0 14px;

    color: var(--dd-text);
    background: var(--dd-foreground);
    border: 1px solid var(--dd-primary-grey);
    border-radius: 999px;
}

.dd-navbar__action--search {
    display: none;
}

.dd-navbar__toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.dd-navbar__burger {
    display: none;
    flex-direction: column;
    gap: 5px;
}

.dd-navbar__burger span {
    display: block;
    width: 22px;
    height: 2px;

    background: currentColor;
}

.dd-navbar__mobile-menu {
    display: none;
    padding: 0 20px 18px;

    background: var(--dd-foreground);
    border-top: 1px solid var(--dd-primary-grey);
}

.dd-navbar__mobile-menu-list {
    display: block;
    max-width: 1440px;

    margin: 0 auto;
}

.dd-navbar__mobile-menu-list a {
    display: flex;
    align-items: center;

    min-height: 44px;
    padding: 10px 8px;

    color: var(--dd-primary);
    border-bottom: 1px solid var(--dd-primary-grey);
}

.dd-navbar__mobile-menu-list a:hover,
.dd-navbar__mobile-menu-list a:focus-visible {
    color: var(--dd-accent);
}

.dd-navbar__mobile-menu-list .sub-menu {
    margin: 0;
    padding: 0 0 0 16px;

    list-style: none;
}

.dd-navbar__toggle:checked ~ .dd-navbar__burger {
    color: var(--dd-foreground);
    background: var(--dd-accent);
}

.dd-navbar__burger {
    color: var(--dd-foreground);
    background: var(--dd-accent);
}

.dd-navbar__burger:hover,
.dd-navbar__burger:focus-visible {
    color: var(--dd-foreground);
    background: var(--dd-text-light);
}

.dd-navbar:has(.dd-navbar__toggle:checked) .dd-navbar__mobile-menu {
    display: block;
}

/*
====================================================================

Размерная лесенка навбара

Правая часть шапки — flex-ряд с фиксированным бюджетом ширины. Каждый
брейкпоинт снимает один элемент там, где ряд перестаёт его вмещать при
кегле меню 20px, а не «на глаз». Пороги выведены измерением на стенде.

Приоритет ценности (сбрасывается последним = держится дольше):
бейдж и меню держатся до бургера; логотип-надпись и телефоны — сильные
знаки, но уходят раньше; поле ввода поиска — роскошь, уходит первым (у
него есть замена кнопкой-лупой).

Геометрия: логотип слева, меню прижато вправо, между ними воздух. Пока
воздух есть, широкий логотип «бесплатен» для меню. Воздух кончается
около 1200px — ниже широкий логотип (300px) начинает наезжать на меню,
поэтому там иконка.

Сверху вниз, кегль меню 20px:

    >= 1580   поле ввода поиска (полная форма)
    >= 1402   ритм 24px; ниже 16px
    >= 1322   телефоны в ряду (в десктопном режиме)
    >= 1201   широкий логотип-надпись; ниже — компактная иконка
    >= 1025   десктопное меню; ниже — бургер
    <= 390    бейдж скрыт

Измеренные нижние границы (кегль 20, круглая кнопка поиска):
телефоны+меню до 1322, широкий логотип+меню без телефонов до ~1200,
иконка+меню без телефонов до ~918 — поэтому бургер на 1024 с запасом.

====================================================================
*/

/* Поле ввода поиска — только там, где для полной формы есть место. */
@media (max-width: 1579px) {
    .dd-navbar__search {
        display: none;
    }

    .dd-navbar__action--search {
        display: inline-flex;
    }
}

/* Просторный ритм там, где он влезает; ниже — плотный базовый 16px. */
@media (min-width: 1402px) {
    .dd-navbar {
        --dd-navbar-gap: 24px;
    }
}

/*
 * Телефоны конкурируют с меню за место в правой группе. В узкой
 * десктопной полосе, где меню при 20px иначе наезжает, телефоны
 * скрыты. В режиме бургера (<=1024) конкуренции нет, телефоны
 * показываются рядом с бургером на планшете (см. полосу 561-1024).
 */
@media (min-width: 1025px) and (max-width: 1321px) {
    .dd-navbar__phone-list {
        display: none;
    }
}

/*
 * Логотип-надпись «бесплатен» для меню только пока между логотипом
 * слева и меню справа есть свободный воздух. Он кончается около
 * 1200px: ниже широкий логотип (300px) начинает наезжать на меню при
 * кегле 20. Поэтому с 1200px и ниже — компактная иконка, и меню
 * доезжает до бургера уже с ней.
 */
@media (max-width: 1200px) {
    .dd-navbar__logo-image--wide {
        display: none;
    }

    .dd-navbar__logo-image--compact {
        display: block;
        width: 70px;
        height: 70px;
        max-height: 70px;
    }
}

/* Бургер — там, где даже с иконкой десктопное меню становится тесным. */
@media (max-width: 1024px) {
    .dd-navbar__menu--desktop {
        display: none;
    }

    .dd-navbar__burger {
        display: inline-flex;
    }

    .dd-navbar__inner {
        justify-content: space-between;
    }
}

/* На узком телефоне номера в шапке не помещаются рядом с кнопками. */
@media (max-width: 560px) {
    .dd-navbar__phone-list {
        display: none;
    }
}

@media (max-width: 390px) {
    .dd-navbar__inner {
        gap: 6px;
    }

    .dd-navbar__inline-svg-link {
        display: none;
    }
}


/*
====================================================================

Deneb signature

Подпись студии в правой части нижней полосы: — by {deneb.su} —
Портируемый компонент студии, класс namespace сохранён (deneb-),
чтобы не расходиться с мастер-сниппетом. Источник:
_MY-SNIPPETS_/deneb-signature-snippet.html

====================================================================
*/

/*
 * Декоративные линии обрамляют всю нижнюю полосу: одна перед копирайтом
 * слева, другая после подписи справа. Живут прямыми детьми .dd-bottom-bar
 * (флекс-ряд по центру), поэтому ширину линий задаём здесь на самой полосе.
 */
.dd-bottom-bar {
    --deneb-signature-line-width: clamp(1.5rem, 5vw, 4rem);
}

/* Небольшой зазор между линией (с кружком на конце) и текстом полосы. */
.dd-bottom-bar > .deneb-signature__line {
    margin-right: 8px;
}

.dd-bottom-bar > .deneb-signature__line--right {
    margin-right: 0;
    margin-left: 8px;
}

.deneb-signature__line {
    position: relative;
    flex: 0 1 var(--deneb-signature-line-width);
    width: var(--deneb-signature-line-width);
    height: 1px;

    background: linear-gradient(to right, transparent, currentColor);
    transform: translateY(1px);
}

.deneb-signature__line--right {
    background: linear-gradient(to left, transparent, currentColor);
}

.deneb-signature__line::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -.2rem;

    width: .3rem;
    aspect-ratio: 1;

    border: 1px solid currentColor;
    border-radius: 50%;
    transform: translateY(-50%);
}

.deneb-signature__line--right::after {
    right: auto;
    left: -.2rem;
}

/*
 * На мобильном нижняя полоса складывается в столбик, и линии-усики
 * переносятся отдельными строками-обрубками - на узких экранах
 * прячем их совсем.
 */
@media (max-width: 600px) {

    .deneb-signature__line {
        display: none;
    }

}


.deneb-signature__link {
    color: inherit;
    text-underline-offset: .2em;
    transition: text-shadow 160ms ease;
}

.deneb-signature__link:hover {
    text-shadow: 0 0 .55rem currentColor;
}

.deneb-signature__link:focus-visible {
    border-radius: .15rem;
    outline: 2px solid currentColor;
    outline-offset: .2rem;
}


/* ================================================================
   Шторка-лоадер (inc/loader/loader.php)

   Показ управляется инлайновым скриптом: скрытие по window load
   или через 3 секунды. Плавное растворение, после него шторка
   полностью выключается из событий.
   ================================================================ */

.dd-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(251, 253, 253, .96);
    transition: opacity .45s ease, visibility 0s linear .45s;
}

.dd-loader__box {
    position: relative;
    width: clamp(170px, 24vw, 300px);
    aspect-ratio: 1;
}

/*
 * Заполняющееся кольцо вокруг логотипа: дуга растёт 3 секунды -
 * ровно окно жизни шторки, читается как индикатор загрузки.
 */
.dd-loader__ring {
    position: absolute;
    inset: 0;
    transform: rotate(-90deg);
}

.dd-loader__ring circle {
    fill: none;
    stroke-width: 1;
}

.dd-loader__ring-track {
    stroke: var(--dd-primary-grey);
}

.dd-loader__ring-fill {
    stroke: var(--dd-primary);
    stroke-linecap: round;
    stroke-dasharray: 351.86;
    stroke-dashoffset: 351.86;

    animation: dd-loader-ring 3s linear forwards;
}

.dd-loader__logo {
    position: absolute;
    inset: 20%;

    width: 60%;
    height: 60%;
    object-fit: contain;

    animation: dd-loader-pulse 1.6s ease-in-out infinite;
}

/*
 * Круг заполнился, а страница ещё грузится: кольцо переходит во
 * вращение - дуга в 3/4 оборота крутится, пока не придёт load.
 */
.dd-loader.is-spinning .dd-loader__ring {
    animation: dd-loader-spin 1s linear infinite;
}

.dd-loader.is-spinning .dd-loader__ring-fill {
    stroke-dashoffset: 88;
    transition: stroke-dashoffset .3s ease;
    animation: none;
}

.dd-loader.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@keyframes dd-loader-spin {

    from {
        transform: rotate(-90deg);
    }

    to {
        transform: rotate(270deg);
    }

}

@keyframes dd-loader-ring {

    to {
        stroke-dashoffset: 0;
    }

}

@keyframes dd-loader-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .55;
        transform: scale(.96);
    }

}

@media (prefers-reduced-motion: reduce) {

    .dd-loader__logo {
        animation: none;
    }

    .dd-loader__ring-fill {
        animation: none;
        stroke-dashoffset: 0;
    }

    .dd-loader.is-spinning .dd-loader__ring {
        animation: none;
    }

}


/* ================================================================
   Заголовок секции-ссылка (главная): выглядит как заголовок,
   цвет наследует, глобальный красный a:hover не применяется.
   На ховере - тонкое подчёркивание.
   ================================================================ */

.dd-section-title-link {
    color: inherit;
}

.dd-section-title-link:hover,
.dd-section-title-link:focus-visible {
    color: inherit;
    opacity: .82;
}