@charset "UTF-8";

/* ============================================
   СТРУКТУРА ФАЙЛА (по отчёту CSS_CLASSES_REPORT.md)
   --------------------------------------------
   | Секция | Назначение                    | Классы/правила                    |
   |--------|-------------------------------|------------------------------------|
   | 1. ОБА | Контент, формы, утилиты       | общие + изолированные servergate   |
   | 2. ОБА | CSS-переменные                | :root                             |
   | 3. SG2 | header-r, footer-r (@layer)   | изолированные servergate2 + общие |
   | 4. SG  | Блог, пустые состояния, FAQ   | servergate2 + общие (контент)     |
   | 5. ОБА | Контейнер, z-index            | общие                             |
   Источники анализа: PHP, JS, компоненты. Скрипт: analyze_css_classes.py
   ============================================ */

/* ---------- 1. ОБА: Контент, формы, утилиты (общие + изолированные servergate) ---------- */
/* Перенесено из servergate/css/custom.css (коммит 6b2f54d) */

.style2{
    border:0px;
}
.items-filters{
    padding:10px 10px;
    margin-bottom:10px;
}

.items-filters .filter_title{
    font-size: 12px;
    margin-bottom: 5px;
    display: block;
}

.items-filters .items-filter__list{
    padding:5px 5px;
    height: 40px;
}

/* --- Типографика и текст контента --- */
.preview_text{
    font-size: 18px;
    color: #606060;
    margin-bottom: 30px;
    margin-top:30px;
}
/* .detail_text text format */
.detail_text{
    font-size: 16px;
    color: #333;
    margin-bottom: 30px;
    margin-top:30px;
}
.detail_text h1,
.detail_text h2,
.detail_text h3,
.detail_text h4,
.detail_text h5,
.detail_text h6 {
    /*font-family: sans-serif;*/
    font-weight: bold;
    max-width: 50rem;
    color: #22446b;
}
.detail_text h1 {
    font-size: 1.625em !important;
    line-height: 1.1 !important;
    margin: 3.23076923em auto 0.92307692em !important;
}
.detail_text h2 {
    font-size: 1.4375em !important;
    line-height: 1.2 !important;
    margin: 3.13043478em auto 1.04347826em !important;
}
.detail_text h3 {
    font-size: 1.25em !important;
    line-height: 1.3 !important;
    margin: 3em auto 1.2em !important;
}
.detail_text h4 {
    font-size: 1.125em !important;
    line-height: 1.4 !important;
    margin: 2.66666667em auto 1.33333333em !important;
}
.detail_text h5 {
    font-size: 1em !important;
    line-height: 1.5 !important;
    margin: 2.25em auto 1.5em !important;
}
.detail_text h6 {
    font-size: 0.75em !important;
    line-height: 2 !important;
    margin: 2em auto 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
@media (min-width: 768px) {
    .detail_text h1 {
        font-size: 2.4375em !important;
        margin-top: 3.07692308em !important;
        margin-bottom: 0.61538462em !important;
    }
    .detail_text h2 {
        font-size: 1.9375em !important;
        margin-top: 3.09677419em !important;
        margin-bottom: 0.77419355em !important;
    }
    .detail_text h3 {
        font-size: 1.5625em !important;
        margin-top: 2.88em !important;
        margin-bottom: 0.96em !important;
    }
    .detail_text h4 {
        font-size: 1.25em !important;
        margin-top: 2.4em !important;
        margin-bottom: 1.2em !important;
    }
}
.detail_text h1:first-child,
.detail_text h2:first-child,
.detail_text h3:first-child,
.detail_text h4:first-child,
.detail_text h5:first-child,
.detail_text h6:first-child {
    margin-top: 0;
}
/* double headers */
.detail_text h1 + h2 {
    margin-top: 1.2em !important;
}
.detail_text h2 + h3 {
    margin-top: 1.3em !important;
}
.detail_text h3 + h4 {
    margin-top: 1.4em !important;
}
.detail_text h4 + h5 {
    margin-top: 1.5em !important;
}
.detail_text h5 + h6 {
    margin-top: 2em !important;
}
.detail_text b,
.detail_text strong {
    font-weight: bold;
}
.detail_text p {
    margin: 0 auto 1.5em;
    max-width: 50rem;
    color: #333;
}
.detail_text ul:not([class]),
.detail_text ol:not([class]) {
    margin: 0 auto 1.5em !important;
    max-width: calc(47.5rem);
    padding-left: 0 !important;
    padding-right: 2.5em !important;
}
.detail_text ul:not([class]) ul,
.detail_text ol:not([class]) ul,
.detail_text ul:not([class]) ol,
.detail_text ol:not([class]) ol {
    margin-bottom: 0;
}
.detail_text ul:not([class]) li,
.detail_text ol:not([class]) li {
    transform: translateX(2.5em);
    animation: fixlists 1s;
}
.detail_text ol:not([class]) li{
    list-style: decimal;
}
.detail_text ul:not([class]) li{
    list-style: disc;
    padding-left: 0 !important;
    margin-bottom: 0 !important;
}
.detail_text ul:not([class]) li li{
    list-style: circle;
}
.detail_text ul:not([class]) li li li{
    list-style: square;
}
.detail_text ul:not([class]) li:before{
    display: none !important;
}
@keyframes fixlists {
    0% {
        text-indent: -0.001em;
    }
    100% {
        text-indent: 0;
    }
}
/* text format end */

/* --- Каталог/серверы, попапы, формы --- */
.servers .items-filter {
    margin-bottom: 16px!important;
}

.popup.popup--form_id{
    max-width:800px;
}

.popup--form_id.form_size1{
    max-width:600px;
}

.popup.popup--form_id .server-select-form-left{
    height:100%;
    margin-bottom:0px;
}


.popup--form_id.form_size1 .server-select-form-left{
    width:100%;
}

.popup--form_id .popup__close::before, .popup--form_id .popup__close::after{
    background-color: #000000!important;
}

.popup--form_id .server-select-form-right:before{
    box-shadow: none;
}

.filter_customs .sb-filter__list{
    overflow-y:auto;
    max-height:400px;
}

/* --- Поля, кнопки, чекбоксы --- */
.property_text{
    display: block;
    width: 100%;
    max-width: 100%;
    height: 44px;
    background-color: #fff;
    border: 1px solid #e8ebef;
    border-radius: 3px;
    padding: 12px 15px;
}

.btn_reset_form, .btn_default_filter{
    margin-top:5px;
}

.btn{
    margin: 2px 0px !important;
}

.checkbox__label {
    word-wrap: normal;
    white-space: unset;
}

.detail_text{
    margin-top:20px;
}

.popup-form__error-text {
    color: #d00;
}

.popup-form__captcha-text p span {
    margin-left: 5px;
    color: #d00;
}

.equipment-request__btn{
    height:72px;
    margin:0px!important;
}

.equipment-request__btn span {
    display:block;
    line-height:26px;
    margin-top:6px;
}

.popup-desc{
    width: 100%;
    max-width: 330px;
    height: 100%;
    background-color: #0684bd;
    position: absolute;
    top: 0;
    right: 0;
    color:#fff;
    padding: 52px 55px;
}


.popup-desc p {
    display: block;
    line-height: 1.5;
    color: #fff;
    margin-bottom: 15px;
}

#pdf_phone .popup-form__input--submit, #pdf_email .popup-form__input--submit{
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: end;
    justify-content: start;
    margin-bottom: 33px;
}

.popup-overlay .popup--text {
    width: 100%;
    max-width: 670px;
    background-color: #fff;
    box-shadow: 0 100px 80px rgb(0 0 0 / 7%), 0 46.233px 36.9864px rgb(0 0 0 / 5%), 0 26.4535px 21.1628px rgb(0 0 0 / 5%), 0 16.0571px 12.8457px rgb(0 0 0 / 4%), 0 9.67509px 7.74008px rgb(0 0 0 / 4%), 0 5.38772px 4.31018px rgb(0 0 0 / 3%),
    0 2.31722px 1.85378px rgb(0 0 0 / 2%);
    padding: 30px 30px 32px;
}
.popup-overlay .popup--text h3 {
    font-family: RFRufo;
    font-size: 32px;
    line-height: 40px;
    margin-bottom: 30px;
}
.popup-overlay .popup--text p {
    font-family: RFRufo;
    font-size: 20px;
    line-height: 1.2;
    max-width: 540px;
}
.popup-overlay .popup--text .btn-close {
    padding-left: 24px;
    padding-right: 24px;
    margin-top: 24px;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.constructorForm .errors{
    color:red;
}

.policy_div{
    font-size:14px;
    margin-bottom:10px;
}
.policy_div .checkbox__label{
    background:none!important;
}

.policy_div a{
    color:#0684bd;
}

.btn--buy{
    margin:0!important;
}

.select_list_checkboxes, .select_list{
    position: relative!important;
}

/* --- Категории и фильтры --- */
.yandex_variant .btn.btn--blue.equipment-request__btn.open-popup {
    height: 72px!important;
    background-color: #E88A0C!important;
}

.server-select-form-row{
    align-items: flex-start!important;
}

.deactive_prop{
    opacity:0.2;
}

.categoryFilterAllItem svg,  .categoryItems span.svg {
    width: 16px;
    height: 16px;
    max-height: 16px;
    max-width: 16px;
    display: block;
    fill: currentColor;
}

.categoryFilterAllItem {
    display: flex;
    flex-wrap: nowrap;
    position: relative;
}

.categoryFilterAllItem span.svg,  .categoryItems span.svg{
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
}

.categoryItems .cat_item{
    position:relative;
}

.categoryFilterAllItem span.c_title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.categoryItems{
    margin-top:10px;
}

.categoryItems .cat_item{
    margin:10px 0px;
}

.breadcrumbs__list{
    max-width: 78%;
}

.sb-filter__list .disabled{
    color: #aaa;
}

.sb-filter__list .disabled .checkbox__custom{
    border-color: #cacedb;
}

/* --- Медиа, утилиты, сообщения об ошибках --- */
.video_block {
    min-height: 360px;
    position: relative;
}
.video_block video {
    width: 100%;
    height: auto;
    max-height: 100%;
    vertical-align: top;
    object-fit: contain;
    transform-origin: center center;
}

.hide{
    display:none;
}

/* Скрытие служебного описания (schema) в карточках СХД — параметры контроллер/SSD/HDD не показывать */
.servers__grid .item-card__name--conf .hide {
    display: none !important;
}

.raid_error{
    font-size:12px;
    font-weight: 700;
    color: #000;
    margin-bottom: 10px;
}

.block_error{
    background-color: #ffe9e9;
    border-color: #f74040;
    padding:5px 5px;
    color:red;
    margin-bottom:40px;
}

.lan2_block1.quantity-limit {
    border:0px!important;
}

/* ---------- 2. ОБА: CSS-переменные (:root для header/footer) ---------- */
/* ============================================
   CSS ПЕРЕМЕННЫЕ ДЛЯ HEADER И FOOTER
   ============================================ */
:root {
    /* Шрифты */
    --font-inter: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --font-akrobat: Akrobat,Arial,sans-serif;
    
    /* Цвета */
    --footer-text-color: rgba(255, 255, 255, 0.75);
    
    /* Размеры шрифтов */
    --header-phone-size: 17px;
    --header-menu-size: 16px;
    --header-search-size: 16px;
    --header-search-placeholder-size: 12px;
    --header-counter-size: 14px;
    
    /* Размеры иконок */
    --header-icon-size-32: 32px;
    --header-icon-size-28: 28px;
    --header-icon-size-24: 24px;
    --header-icon-size-20: 20px; /* Мобильные */
    
    /* Веса шрифтов */
    --font-weight-semibold: 600;
    --font-weight-regular: 400;
    
    /* Line-height */
    --header-line-height-1: 1;
    --header-menu-line-height: 16px;
    
    /* Отступы */
    --header-top-padding: 12px 0;
    --header-menu-gap: 60px;
}

/* Промежуточный диапазон 1025px–1249px: меню 12px, телефон 15px */
@media (min-width: 1025px) and (max-width: 1249px) {
    :root {
        --header-menu-size: 12px;
        --header-phone-size: 15px;
        --header-menu-line-height: 14px;
    }
}

/* ============================================
   FOOTER - Изоляция от глобальных стилей
   Переопределяет глобальное правило p { color: #000; }
   Устанавливает полупрозрачный белый цвет rgba(255, 255, 255, 0.75)
   
   Стратегия: Применение стилей на верхнем уровне .footer-r
   для изоляции от глобальных стилей и уменьшения дублирования
   Использование @layer для контроля каскадности
   ============================================ */
/* ---------- 3. SERVERGATE2: header-r, footer-r (@layer) — изолированные servergate2 + общие ---------- */
@layer header-footer {

/* Изоляция footer от глобальных стилей - применяем на верхнем уровне */
.footer-r {
    /* Единый шрифт для всех элементов footer */
    font-family: var(--font-inter) !important;
    /* Цвет текста по умолчанию */
    color: var(--footer-text-color) !important;
    /* Запрещаем синтез жирного шрифта глобально для всех элементов footer */
    font-synthesis: none !important;
}
/* Наследование шрифта, цвета и font-synthesis для всех вложенных элементов */
/* Усиленное правило для всех текстовых элементов, чтобы перебить глобальные стили */
/* Исключаем .footer-r-title для применения собственного шрифта Akrobat */
.footer-r *:not([aria-hidden="true"]):not(.footer-r-title),
.footer-r a:not(.footer-r-title),
.footer-r button:not(.footer-r-title),
.footer-r input:not(.footer-r-title),
.footer-r select:not(.footer-r-title),
.footer-r textarea:not(.footer-r-title),
.footer-r span:not(.footer-r-title),
.footer-r p:not(.footer-r-title),
.footer-r div:not(.footer-r-title),
.footer-r li:not(.footer-r-title),
.footer-r ul:not(.footer-r-title),
.footer-r h1:not(.footer-r-title),
.footer-r h2:not(.footer-r-title),
.footer-r h3:not(.footer-r-title),
.footer-r h4:not(.footer-r-title),
.footer-r h5:not(.footer-r-title),
.footer-r h6:not(.footer-r-title) {
    font-family: inherit !important;
    color: inherit;
    font-synthesis: inherit !important;
}

/* Переопределение для ссылок с hover эффектом */
.footer-r a {
    color: inherit;
    transition: color 0.3s ease-in-out;
}

.footer-r a:hover {
    color: var(--white, #fff);
}

/* Специфичные переопределения для элементов, которые не должны наследовать */
.footer-r p:not([aria-hidden="true"]),
.footer-r-requisites p {
    color: var(--footer-text-color) !important;
}

/* Стили для заголовков в footer - используем шрифт Akrobat */
.footer-r-title {
    font-family: var(--font-akrobat) !important; /* Шрифт Akrobat для заголовков footer */
    font-synthesis: none !important; /* Запрещаем синтез жирного шрифта */
}

    /* Поддержка высокого контраста для доступности */
    @media (prefers-contrast: high) {
        .footer-r {
            color: var(--footer-text-color) !important;
        }
        
        .footer-r *:not([aria-hidden="true"]) {
            color: inherit;
            text-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
        }
    }

    /* ============================================
       HEADER-R - SVG иконки
       Исправление: глобальное правило svg { max-width: 100%; height: auto; }
       ломает иконки с фиксированными размерами
       ============================================ */
    .header-r svg {
        max-width: none !important;
        flex-shrink: 0;
    }

    /* Фиксированные размеры для иконок */
    .header-r-top__phone svg {
        width: var(--header-icon-size-24) !important;
        height: var(--header-icon-size-24) !important;
    }

    .header-r-search svg {
        width: var(--header-icon-size-28) !important;
        height: var(--header-icon-size-28) !important;
    }

    .header-r-favorites svg,
    .header-r-cart svg,
    .header-r-lk svg {
        width: var(--header-icon-size-32) !important;
        height: var(--header-icon-size-32) !important;
    }

    .header-r-menu svg {
        width: var(--header-icon-size-24) !important;
        height: var(--header-icon-size-24) !important;
    }

    /* Адаптивность для мобильных устройств */
    @media (max-width: 767px) {
        .header-r-top__phone svg {
            width: var(--header-icon-size-20) !important;
            height: var(--header-icon-size-20) !important;
        }
        
        .header-r-search svg {
            width: var(--header-icon-size-24) !important;
            height: var(--header-icon-size-24) !important;
        }
        
        .header-r-favorites svg,
        .header-r-cart svg,
        .header-r-lk svg {
            width: var(--header-icon-size-28) !important;
            height: var(--header-icon-size-28) !important;
        }
    }

    /* ============================================
       HEADER-R - Изоляция от глобальных стилей
       Приведение к единому виду с главной страницей
       
       Стратегия: Применение стилей на верхнем уровне .header-r
       для изоляции от глобальных стилей и уменьшения дублирования
       ============================================ */

    /* Изоляция header-r от глобальных стилей - применяем на верхнем уровне */
    .header-r {
        /* Единый шрифт для всех элементов header-r */
        font-family: var(--font-inter) !important;
        /* Запрещаем синтез жирного шрифта глобально для всех элементов header-r */
        font-synthesis: none !important;
    }

    /* Наследование шрифта и font-synthesis для всех вложенных текстовых элементов */
    /* Усиленное правило для всех текстовых элементов, чтобы перебить глобальные стили */
    .header-r *,
    .header-r a,
    .header-r button,
    .header-r input,
    .header-r select,
    .header-r textarea,
    .header-r span,
    .header-r p,
    .header-r div,
    .header-r li,
    .header-r ul {
        font-family: inherit !important;
        font-synthesis: inherit !important;
    }

    /* Стили для навигации в header-r-top__nav */
    .header-r-top__nav ul {
        line-height: var(--header-line-height-1);
        gap: 14px;
    }

    .header-r-top__link {
        font-family: var(--font-inter) !important; /* Единый шрифт Inter для навигации */
        line-height: var(--header-line-height-1);
        display: inline-flex;
        align-items: center;
        padding: 4px 0;
    }

    .header-r-top__link--active,
    .header-r-top__link.active {
        font-weight: var(--font-weight-semibold);
    }

    /* Стили для телефона в header-r-top__phone */
    .header-r-top__phone a {
        font-family: var(--font-inter) !important; /* Единый шрифт Inter для телефона */
        color: var(--text, rgba(0, 0, 0, 0.9)) !important;
        font-size: var(--header-phone-size) !important;
        font-weight: var(--font-weight-semibold) !important;
        line-height: var(--header-line-height-1) !important;
        text-transform: none !important;
        display: inline-block !important;
        transition: color 0.3s ease-in-out !important;
    }

    .header-r-top__phone a:hover {
        color: var(--praimary, #0684bd);
    }

    .header-r-search form input::placeholder {
        color: var(--text2, rgba(0, 0, 0, 0.7));
        opacity: 1;
        font-size: var(--header-search-placeholder-size) !important; /* Размер placeholder 14px */
        font-weight: var(--font-weight-regular) !important; /* Используем Inter-Regular для placeholder */
    }

    /* Стили для кнопки поиска в header-r-search */
    .header-r-search form button {
        max-height: var(--header-icon-size-28);
    }

    .header-r-search input[type="search"]::-webkit-search-cancel-button,
    .header-r-mobile-search__inner input[type="search"]::-webkit-search-cancel-button,
    .header-r-mobile-search form input[type="search"]::-webkit-search-cancel-button {
        -webkit-appearance: none;
        height: 16px;
        width: 16px;
        cursor: pointer;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='%2303a7f0' stroke-width='2' stroke-linecap='round' d='M6 6l12 12m0-12L6 18'/%3E%3C/svg%3E") no-repeat center center;
        background-size: contain;
    }

    /* Стили для кнопок меню header-r - оптимизированный селектор */
    .header-r-menu-container a,
    .header-r-menu-container button,
    .header-r-menu-container > ul > li > a,
    .header-r-menu-container > ul > li > button,
    .header-r-menu-container > ul > li.has-submenu > button {
        font-family: var(--font-inter) !important; /* Единый шрифт Inter для кнопок меню */
        font-size: var(--header-menu-size) !important;
        font-weight: var(--font-weight-semibold) !important;
        font-synthesis: none !important; /* Запрещаем синтез жирного шрифта */
        appearance: auto !important; /* Приведение к виду главной страницы */
        line-height: var(--header-menu-line-height) !important; /* Фиксированный line-height для единообразия с главной страницей */
        padding: 18px 0;
        background-color: transparent; /* Убираем белый фон у кнопок меню */
    }

    /* Стили для кнопки конфигуратора */
    .button-r-config {
        font-family: var(--font-inter) !important; /* Единый шрифт Inter для кнопки конфигуратора */
        font-size: var(--header-menu-size) !important;
        text-transform: none;
    }

    /* ============================================
       HEADER-R - Подменю (submenu)
       ============================================ */

    /* Стили для заголовков категорий в подменю */
    .header-r-menu-submenu-tab__category-title h3 {
        font-family: var(--font-inter) !important; /* Единый шрифт Inter для заголовков категорий */
        font-size: var(--header-menu-size) !important;
        font-weight: var(--font-weight-semibold) !important;
        font-synthesis: none !important; /* Запрещаем синтез жирного шрифта */
    }

    /* Стили для заголовков элементов списка в подменю */
    .header-r-menu-submenu-tab__category-list-item-title h4 {
        font-family: var(--font-inter) !important; /* Единый шрифт Inter для заголовков элементов */
        font-size: var(--header-menu-size) !important;
        font-weight: var(--font-weight-semibold) !important;
        font-synthesis: none !important; /* Запрещаем синтез жирного шрифта */
        text-transform: none !important; /* Не должны быть прописными */
    }

    /* Стили для ссылок в списке категорий подменю - не должны быть жирными */
    .header-r-menu-submenu-tab__category-list-item ul li a {
        font-family: var(--font-inter) !important; /* Единый шрифт Inter для ссылок */
        font-weight: var(--font-weight-regular) !important; /* Обычный вес шрифта, не жирный */
        font-synthesis: none !important; /* Запрещаем синтез жирного шрифта */
    }

    /* ============================================
       HEADER-R - Фокус и доступность
       ============================================ */

    /* Общие стили фокуса для всех интерактивных элементов header-r */
    .header-r a:focus-visible,
    .header-r button:focus-visible {
        outline: 2px solid var(--praimary, #0684bd);
        outline-offset: 2px;
        border-radius: 2px;
    }

    /* Стили фокуса для элементов footer */
    .footer-r a:focus-visible {
        outline: 2px solid var(--white, #fff);
        outline-offset: 2px;
        border-radius: 2px;
    }

    /* ============================================
       HEADER-R - Другие исправления
       ============================================ */

    /* Исправление размера логотипа - защита от глобального правила img { max-width: 100%; height: auto; } */
    .header-r-logo {
        line-height: var(--header-line-height-1) !important;
        max-height: 47px !important;
    }

    .header-r-logo img {
        max-width: none !important;
        display: block;
    }

    /* Исправление отображения блоков header-r */
    .header-r .header-r-menu-yandex,
    .header-r .header-r-top__phone,
    .header-r .header-r-search {
        display: flex;
        align-items: center;
    }

    /* Фиксируем максимальную высоту для Yandex блока */
    .header-r .header-r-menu-yandex {
        max-height: 50px;
    }

    /* Фиксируем размеры для блока избранного */
    .header-r-favorites {
        width: var(--header-icon-size-32) !important;
        height: var(--header-icon-size-32) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
    }

    /* Стили для ссылок в блоках избранного и корзины */
    .header-r-favorites a,
    .header-r-cart a,
    .header-r-lk a {
        display: block;
        max-height: var(--header-icon-size-32);
    }


    /* ============================================
       HEADER-R - Высота и отступы
       Приведение к единому виду с главной страницей
       ============================================ */

    /* Фиксируем высоту элементов социальных сетей в header-r-top__society */
    .header-r-top__society li {
        height: var(--header-icon-size-24) !important; /* Единая высота для иконок социальных сетей */
    }

    .header-r-top__society li a {
        height: var(--header-icon-size-24);
        display: block;
    }

    /* ============================================
       АДАПТИВНОСТЬ
       ============================================ */
    @media (max-width: 767px) {
        :root {
            --header-touch-target: 44px; /* Минимальный размер touch-целей (WCAG 2.5.5) */
        }
        
        .footer-r {
            padding-top: 30px;
            padding-bottom: 40px;
        }
        
        /* Увеличение touch-целей для мобильных устройств (минимум 44×44px) */
        .header-r-top__phone a {
            min-height: var(--header-touch-target);
            display: flex;
            align-items: center;
        }
        
        .header-r-top__link {
            min-height: var(--header-touch-target);
        }
        
        .header-r-search form input {
            min-height: var(--header-touch-target);
        }
    }
    
    /* Медиа-запрос для планшетов */
    @media (max-width: 1023px) {
        .header-r-menu {
            gap: 40px !important; /* Уменьшаем отступы для планшетов */
        }
    }

    /* При ширине экрана < 1240px: блок Yandex скрывается */
    @media (max-width: 1239px) {
        /* Увеличиваем специфичность для переопределения display: flex !important */
        .header-r-menu .header-r-menu-yandex {
            display: none;
        }
        
        /* Старые правила переноса блока на новую строку (закомментированы, могут пригодиться) */
        /*
        .header-r-menu {
            flex-wrap: wrap;
            gap: 0;
        }
        .header-r-menu-yandex {
            flex-basis: 100%;
            display: flex;
            justify-content: flex-end;
            margin: 0 0 5px;
        }
        */
    }


    @media (prefers-reduced-motion: reduce) {
        .header-r-top__phone a,
        .header-r-search form input {
            transition: none !important;
        }

        .footer-r {
            text-shadow: none;
        }

        .footer-r *:not([aria-hidden="true"]) {
            text-shadow: none;
        }
    }

/* Уникальные правила: servergate (overflow контейнеров), servergate2 (footer/header), оба (visually-hidden и др.) */
.servers-select.dark-breadcrumb + .servers-select-items > .container {
    overflow: visible;
}

.gratitude > .container {
    overflow: visible;
}

.footer-r-society ul li a img {
    width: 24px;
    height: 24px;
    display: block;
    object-fit: contain;
    object-position: center;
}

/* [servergate] Legacy: старый хедер .header__search — оставлено в @layer для каскада */
.header__search input {
    background-color: #fff;
}

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

.cat1{
    width:270px!important;
    height:214px!important;
    object-fit: contain!important;
}

#subscribeMessage .error{
    color:red;
    margin-top:10px;
    font-size:12px;
}

#subscribeMessage .success{
    color:green;
    margin-top:10px;
    font-size:12px;
}

.soc_hidden{
    display:none;
    position:absolute;
    right:0px;
}

.soc_hidden.active{
    display:block!important;
}

.blog-page-list-r-sections-item-list-btn.active {
    background-color: var(--praimary);
    color: var(--white);
}

/* min-width только на широких экранах, чтобы при ресайзе не появлялась горизонтальная прокрутка */
.blog-empty {
    min-width: 0;
    width: 100%;
    max-width: 100%;
}
@media screen and (min-width: 835px) {
    .blog-empty {
        min-width: 835px;
    }
}

.blog-inner-r-footer{
    position:relative;
}

.blog-inner-r-footer .soc_hidden{
    position: absolute;
    right: 49px;
    bottom: -6px;
}

/* Social Share Buttons */
.main-share {
    display: flex;
    gap: 12px;
    list-style: none;
    padding: 10px !important;
    margin: 0 !important;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-radius: 8px;
    box-sizing: border-box;
}

.main-share-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-share-icon a {
    display: block;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: opacity 0.2s;
}

.main-share-icon a:hover {
    opacity: 0.8;
}

.main-share-vk { background-image: url('../logo-svg/vk.svg'); }
.main-share-tg { background-image: url('../logo-svg/tg.svg'); }
.main-share-zen { background-image: url('../logo-svg/zen.svg'); }
.main-share-ok { background-image: url('../logo-svg/ok.svg'); }
.main-share-mail { background-image: url('../logo-svg/mail.svg'); }

.setLink{
    cursor:pointer;
}

.faq-article-r__main-wrapper {margin-bottom: 30px;}
}
/* ---------- 4. SERVERGATE: Контент страниц — изолированные servergate2 (блог, empty) + общие (FAQ, избранное) ---------- */
/* ============================================
   Стили для пустых состояний (Empty States)
   ============================================ */

/* Базовые стили для всех пустых состояний */
.faq-category-r-empty,
.blog-empty-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--blue);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    /* Fluid padding: от 30px на мобильных до 60-80px на десктопе */
    padding: clamp(30px, 5vw, 60px) clamp(15px, 4vw, 40px);
    /* Fluid min-height: от 250px на мобильных до 400px на десктопе */
    min-height: clamp(250px, 40vh, 400px);
    margin: clamp(20px, 3vw, 40px) 0;
}

/* Специфичные стили для блога */
.blog-empty-message {
    /* Переопределяем grid-area для корректного отображения */
    grid-area: unset;
    /* Убираем верхний padding и margin для выравнивания с blog-page-list-r-sections */
    padding-top: 0;
    padding-right: clamp(20px, 4vw, 40px);
    padding-bottom: clamp(40px, 6vw, 80px);
    padding-left: clamp(20px, 4vw, 40px);
    min-height: clamp(300px, 45vh, 400px);
    /* Убираем верхний margin для точного выравнивания */
    margin-top: 0;
    margin-bottom: clamp(20px, 3vw, 40px);
}

/* Переопределяем padding родителя для точного выравнивания */
.blog-page-list-r-item.f1.blog-empty-message {
    padding-top: 0;
}

/* Убираем gap сверху для контейнера с пустым сообщением */
.blog-empty.blog-page-list-r-grid {
    gap: 0;
    margin-top: 0;
}

/* Скрываем стандартные элементы блога внутри empty-message */
.blog-empty-message > .blog-page-list-r-item-header,
.blog-empty-message > .blog-page-list-r-item-body,
.blog-empty-message > .blog-page-list-r-item-btns {
    display: none;
}

/* Иконки с плавным масштабированием */
.faq-category-r-empty__icon,
.blog-empty-message__icon {
    width: clamp(48px, 8vw, 80px);
    height: clamp(48px, 8vw, 80px);
    margin-bottom: clamp(16px, 3vw, 30px);
    color: var(--praimary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.faq-category-r-empty__icon svg,
.blog-empty-message__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Заголовки с fluid typography */
.faq-category-r-empty__title,
.blog-empty-message__title {
    font-weight: 700;
    color: var(--text);
    font-family: "Akrobat", Arial, sans-serif;
    line-height: 1.3;
    margin-bottom: clamp(10px, 2vw, 16px);
    /* Fluid font-size: от 18px на мобильных до 28px на десктопе */
    font-size: clamp(18px, 2.5vw + 0.5rem, 28px);
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.faq-category-r-empty__title {
    font-size: clamp(18px, 2vw + 0.5rem, 24px);
}

/* Текст с fluid typography */
.faq-category-r-empty__text,
.blog-empty-message__text {
    color: var(--text2);
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    /* Fluid font-size: от 13px на мобильных до 18px на десктопе */
    font-size: clamp(13px, 1.5vw + 0.25rem, 18px);
    max-width: min(90%, 700px);
    padding: 0 clamp(5px, 1vw, 0);
}

.faq-category-r-empty__text {
    font-size: clamp(14px, 1.5vw + 0.25rem, 16px);
    max-width: min(90%, 600px);
}

.faq-article-r .container-r{
    position:relative;
}

.faq-article-r .elementSearch {
    position: relative;
    margin: -20px 0 32px auto;
}

@media screen and (max-width: 900px) {
    .faq-article-r .elementSearch {
        margin: -20px 0 24px 0;
    }
}

.faq-category-r__title { padding-bottom: 43px;}

.blog-page-list-r-item.f2 .blog-page-list-r-item-header-date, .blog-page-list-r-item.f3 .blog-page-list-r-item-header-date{
     display: block!important;
}

.faq-article-r__feedback-thanks{
    color:green;
}

/* ============================================
   Адаптивные стили для контейнеров
   ============================================ */

/* Исправление для контейнера блога на мобильных */
@media screen and (max-width: 768px) {
    .blog-empty {
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }

    /* Переопределение grid-area для корректного отображения */
    .blog-page-list-r-item.f1.blog-empty-message {
        grid-area: unset;
    }
}

/* Дополнительные исправления для очень маленьких экранов */
@media screen and (max-width: 515px) {
    .blog-empty {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .blog-page-list-r-item.f1.blog-empty-message {
        grid-area: unset;
    }
}

/* ============================================
   Стили для социальных сетей в header
   ============================================ */
.header-r-top__society li a {
    height: 24px;
    display: block;
}

/* ============================================
   Стили для логотипа в header
   ============================================ */
.header-r-logo {
    line-height: 1 !important;
    max-height: 47px !important;
}

/* Переопределение после @layer: ссылки избранного/корзины/ЛК (фиксированные 32px для совместимости с main) */
.header-r-favorites a,
.header-r-cart a,
.header-r-lk a {
    display: block;
    max-height: 32px;
}

/* Отступы для элементов меню: одинаковый padding-x (переменная) — равное расстояние между краями текстов. */
.header-r-menu-container > ul > li > a,
.header-r-menu-container > ul > li > button {
    margin: 0;
    padding-top: 18px;
    padding-bottom: 18px;
    padding-left: var(--header-menu-text-padding-x, 16px);
    padding-right: var(--header-menu-text-padding-x, 16px);
}

/* ============================================
   Стили для Yandex блока в header
   ============================================ */
.header-r-menu-yandex {
    max-height: 50px;
}

/* ============================================
   Стили для кнопки поиска в header
   ============================================ */
.header-r-search form button {
    max-height: 28px;
}

/* ============================================
   Стили для placeholder поля поиска в header
   ============================================ */
.header-r-search form input::placeholder {
    font-size: 12px; /* Размер placeholder 12px */
    color: rgba(0, 0, 0, 0.7);
    opacity: 1;
}

.header-r-search form {
    gap: 12px;
}

.header-r-search form input {
    flex: 1 1 auto;
    min-width: 0;
}

.header-r-search__hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 12px;
    margin-left: auto;
    border-radius: 999px;
    border: none;
    background-color: rgba(6, 132, 189, 0.08);
    color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.header-r-search__hint::after {
    content: "↵";
    font-size: 16px;
    line-height: 1;
    opacity: 0.8;
}

@media (max-width: 900px) {
    .header-r-search__hint {
        display: none;
    }
}

/* Конец @layer header-footer */

/* ---------- 5. ОБА: Контейнер и z-index (общие) ---------- */
/* overflow: hidden на контейнер */
.container {
    overflow: hidden;
}

/* Конфигуратор и оформление заказа: предки без overflow для position:sticky (.js-sticky) */
.main:has(.configurator),
.main:has(.order-cols) {
    overflow: visible !important;
}
/* Секция формы с декоративными SVG — разрешаем выход за границы */
.main:has(section.servers-select-form) {
    overflow: visible !important;
}
/* Страница заказа: цепочка до .js-sticky для position:sticky */
#main_area:has(section.order),
section.order,
section.order .container,
section.order .order-make-block-lp,
section.order .order-cols,
section.order .order-products {
    overflow: visible !important;
}
.configurator .container,
.container:has(.order-cols) {
    overflow: visible !important;
}

/* ============================================
   Z-INDEX СТРАТЕГИЯ ДЛЯ НАВИГАЦИИ И МЕНЮ
   
   СТРУКТУРА СЛОЕВ (от низкого к высокому):
   ├─ 10-50   → Элементы контента (слайдеры, иконки, списки)
   ├─ 100     → Header контейнер
   ├─ 101     → Кнопки управления меню
   ├─ 500     → Навигационные меню (desktop + mobile)
   ├─ 501     → Элементы управления внутри меню
   ├─ 550     → Мобильный фильтр конфигуратора
   ├─ 1000+   → Модальные окна (.popup-overlay)
   ├─ 99992   → Fancybox галерея
   └─ 999999  → Критичные элементы (loaders)
   
   ТЕХНИЧЕСКИЕ ДЕТАЛИ:
   • CSS переменные для централизованного управления
   • Медиа-запросы для адаптивности (breakpoint: 991px, 1023px)
   • !important только для переопределения main.css
   • Поддержка keyboard navigation (:focus-within)
   • Совместимость с MobileMenuManager.js (.active класс)
   
   ЛОГИКА РАБОТЫ JS:
   • MobileMenuManager управляет классом .active для мобильных меню
   • Desktop меню раскрывается по клику (aria + .is-open), закрывается по кнопке/вне/ESC
   • Взаимоисключающее открытие: одно меню закрывает другое
   ============================================ */
/* SERVERGATE2: навигация и меню (header-r) */

:root {
    /* Z-index переменные для единого управления слоями */
    --z-header: 100;
    --z-header-controls: 101;
    --z-menu-overlay: 500;
    --z-menu-controls: 501;
    --z-modal: 1000;
}

/* ============================================
   БАЗОВЫЕ Z-INDEX
   ============================================ */

/* Header контейнер - базовый уровень для всей шапки */
.header-r {
    position: relative;
    z-index: var(--z-header);
}

/* Desktop выпадающее меню - управление через клик (+aria), единообразие с servergate */
.header-r-menu-submenu {
    z-index: var(--z-menu-overlay) !important;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Левая колонка мега-меню: список вкладок и подвал (под списком, не справа) */
.header-r-menu-submenu__nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.header-r-menu-submenu__root-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-weight: 600;
    color: var(--text, rgba(0, 0, 0, 0.9));
    text-decoration: none;
    transition: color 0.2s ease;
}

.header-r-menu-submenu__root-link-all {
    font-weight: 300;
    font-size: 13px;
    border: 1px solid var(--praimary);
    border-radius: 5px;
    padding: 5px;
    color: var(--praimary);
    flex-shrink: 0;
}

/* Подвал мега-меню: разделитель, ссылка на корневой раздел, кнопка «Закрыть» */
.header-r-menu-submenu__divider {
    width: 100%;
    margin: 16px 0 12px;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.header-r-menu-submenu__footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 8px;
}

.header-r-menu-submenu__root-link {
    font-weight: 600;
    color: var(--text, rgba(0, 0, 0, 0.9));
    text-decoration: none;
    transition: color 0.2s ease;
}

.header-r-menu-submenu__root-link:hover {
    color: var(--praimary, #0684bd);
}

.header-r-menu-submenu__close {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    font-size: 14px;
    color: var(--text3, rgba(0, 0, 0, 0.4));
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

.header-r-menu-submenu__close:hover {
    color: var(--text2, rgba(0, 0, 0, 0.6));
}

/* Мобильные меню - активируются через класс .active (JS) */
.header-r-mobile-menu-info,
.header-r-mobile-menu-catalog {
    z-index: var(--z-menu-overlay) !important;
}

/* КРИТИЧНО: Активное меню всегда поверх неактивного
   Гарантирует правильное наложение при переключении между меню */
.header-r-mobile-menu-info.active {
    z-index: calc(var(--z-menu-overlay) + 1) !important;
}

.header-r-mobile-menu-catalog.active {
    z-index: calc(var(--z-menu-overlay) + 1) !important;
}

/* Элементы управления внутри мобильного меню */
.header-r-mobile-menu-catalog-header {
    z-index: var(--z-menu-controls) !important;
}

.header-r-mobile-menu-catalog .slinky-container {
    z-index: var(--z-menu-controls) !important;
}

@media (min-width: 1024px) {
    /* Строка с меню выше контента на всех страницах — клики доходят до кнопок has-submenu */
    .header-r .header-r__inner {
        position: relative;
        z-index: 101;
    }
    .header-r-menu-container > ul > li.has-submenu:hover > button {
        box-shadow: none;
    }

    .header-r-menu-container > ul > li.has-submenu:hover .header-r-menu-submenu {
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
    }

    .header-r-menu-container > ul > li.has-submenu.is-open > button {
        position: relative;
        z-index: 2;
        box-shadow: 0 8px 28px 0 rgba(27, 27, 27, 0.3);
    }

    .header-r-menu-container > ul > li.has-submenu.is-open .header-r-menu-submenu {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
    }
}

/* ============================================
   АДАПТИВНОСТЬ
   ============================================ */

/* Кнопки бургер-меню и каталога (mobile only) */
@media (max-width: 991px) {
    .header-r-mobile-burger,
    .header-r-mobile-catalog,
    .catalog-btn {
        z-index: var(--z-header-controls) !important;
    }
}

/* 1025px–1249px: скрываем иконку звонка (оставляем только номер) */
@media (min-width: 1025px) and (max-width: 1249px) {
    .header-r-top__phone svg {
        display: none !important;
    }
}

/* Промежуточный диапазон 1025px–1300px: при сужении шрифты уменьшаются. (1300-1025)=275 */
@media (min-width: 1025px) and (max-width: 1300px) {
    /* Телефон: 15px при 1025px → 18px при 1300px */
    .header-r-top__phone,
    .header-r-top__phone a {
        font-size: clamp(15px, calc(15px + 3 * (100vw - 1025px) / 275), 17px) !important;
    }
    /* Верхнее меню: 12px при 1025px → 16px при 1300px */
    .header-r-top__nav ul li a {
        font-size: clamp(12px, calc(12px + 4 * (100vw - 1025px) / 275), 16px) !important;
    }
    /* Основное меню: 14px при 1025px → 16px при 1300px; line-height 14→18 */
    .header-r-menu-container > ul > li > a,
    .header-r-menu-container > ul > li > button,
    .header-r-menu-container > ul > li.has-submenu > button {
        font-size: clamp(14px, calc(14px + 2 * (100vw - 1025px) / 275), 16px) !important;
        line-height: clamp(14px, calc(14px + 4 * (100vw - 1025px) / 275), 18px) !important;
    }
}

/* При ширине экрана < 1240px: блок Yandex скрывается */
@media (max-width: 1239px) {
    /* Увеличиваем специфичность для переопределения display: flex !important */
    .header-r-menu .header-r-menu-yandex {
        display: none;
    }
    
    /* Старые правила переноса блока на новую строку (закомментированы, могут пригодиться) */
    /*
    .header-r-menu {
        flex-wrap: wrap;
        gap: 0;
    }
    .header-r-menu-yandex {
        flex-basis: 100%;
        display: flex;
        justify-content: flex-end;
        margin: 0 0 5px;
    }
    */
}

/* ============================================
   ДОСТУПНОСТЬ (A11Y)
   ============================================ */

/* Поддержка keyboard navigation - меню остаются доступными при фокусе */
.header-r-menu-submenu:focus-within,
.header-r-mobile-menu-info:focus-within,
.header-r-mobile-menu-catalog:focus-within {
    z-index: var(--z-menu-overlay) !important;
}

/* ============================================
   ИНТЕГРАЦИЯ С МОДАЛЬНЫМИ ОКНАМИ
   ============================================ */

/* Desktop меню автоматически скрывается при открытии Fancybox
   Fancybox добавляет класс .compensate-for-scrollbar к body */
body.compensate-for-scrollbar .header-r-menu-submenu {
    pointer-events: none;
    opacity: 0;
}

/* ============================================
   КОНТЕНТНЫЕ ЭЛЕМЕНТЫ (z-index: 10-50)
   SERVERGATE: элементы контента ниже навигационных меню
   ============================================ */

/* IonRangeSlider - используется в фильтрах и конфигураторе */
.irs--round .irs-bar,
.irs--round .irs-line,
.irs--round .irs-handle,
.irs-handle,
.irs-bar,
.irs-bar--single {
    z-index: 50 !important;
}

/* Выпадающие списки товаров */
.priority-goods__select-dropdown {
    z-index: 50 !important;
}

/* Иконка показа/скрытия пароля */
.common-form__input-password .password-icon {
    z-index: 10 !important;
}

/* Старая версия header - совместимость */
.header__cart:hover .cart-list,
.header__cart-link,
.header .header-menu__item {
    z-index: 50 !important;
}

/* Счетчик найденных товаров в мобильном конфигураторе */
.configurator .conf-section__item .conf-section-filter-mob-found {
    z-index: 50 !important;
}

/* RAID калькулятор – ползунки jQuery UI */
.raidcalc .calc-slider .slider-line span a,
.raidcalc .calc-slider .slider-line .ui-slider-range {
    z-index: 50 !important;
}

/* Поля ввода значений диапазона */
.extra-controls {
    z-index: 10 !important;
}

/* ============================================
   МОБИЛЬНЫЙ ФИЛЬТР КОНФИГУРАТОРА (z-index: 2000)
   ============================================ */

/* Полноэкранный оверлей фильтра на мобильных устройствах
   Позиционируется ВЫШЕ навигационных меню и модальных окон (чтобы перекрыть шапку)
   Это обеспечивает правильную иерархию: Фильтр > Модалки > Меню > Контент */
@media (max-width: 1023px) {
    .configurator .conf-section__item .conf-section-filter {
        z-index: 2000 !important;
    }
    
    /* Слайдеры внутри фильтра используют относительный z-index
       для правильного отображения относительно родительского контейнера */
    .configurator .conf-section__item .conf-section-filter .irs-handle,
    .configurator .conf-section__item .conf-section-filter .irs-bar {
        z-index: 2 !important;
    }

    /* Исправление положения иконки закрытия */
    .mob-filter-close .close-icon {
        top: 25px !important;
        left: 25px !important;
    }
}

/* Разблокировка stacking context для .main, чтобы фильтр мог перекрыть шапку */
.main, #main_area {
    z-index: auto !important;
}

/* Переключатель фильтров на мобильных (кнопка "сбросить фильтры" в top) */
@media (max-width: 1023px) {
    .configurator .conf-section__item .conf-section-filter-block .conf-section-filter-top {
        z-index: 10;
    }
    
    .configurator .conf-section__item .conf-section-filter-clear {
        display: block !important; /* Всегда показываем на мобильных */
        position: relative;
        width: 40px;
        height: 20px;
        background: #eee;
        border-radius: 20px;
        font-size: 0;
        transition: background 0.3s;
        cursor: pointer;
    }

    .configurator .conf-section__item .conf-section-filter-block.active .conf-section-filter-clear {
        background: #ff9000;
    }

    /* Состояние, когда фильтры установлены, но временно отключены (пауза) */
    .configurator .conf-section__item .conf-section-filter-block.active.is-bypassed .conf-section-filter-clear {
        background: #eee;
    }

    .configurator .conf-section__item .conf-section-filter-clear::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: 16px;
        height: 16px;
        background: #fff;
        border-radius: 50%;
        transition: left 0.3s;
    }

    .configurator .conf-section__item .conf-section-filter-block.active .conf-section-filter-clear::after {
        left: 22px;
    }

    .configurator .conf-section__item .conf-section-filter-block.active.is-bypassed .conf-section-filter-clear::after {
        left: 2px;
    }
}


.title-search-result a{
    color: #0684bd;
}

/* ============================================
   Страница избранного (для шаблона servergate)
   ============================================ */
.favorites-page.priority-goods {
    padding: 26px 0 160px;
}

.favorites-page .priority-goods-header {
    margin-bottom: 24px;
}

.favorites-page__desc {
    margin-top: 8px;
    color: var(--text2, rgba(0, 0, 0, 0.6));
    font-size: 15px;
    line-height: 1.5;
}

.favorites-page__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}

.favorites-page__card {
    min-width: 0;
}

/* Пустое состояние избранного */
.favorites-page__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
    min-height: 320px;
}

.favorites-page__empty-icon {
    color: var(--icon, rgba(75, 75, 75, 0.9));
    opacity: 0.5;
    margin-bottom: 24px;
}

.favorites-page__empty-icon svg {
    display: block;
    width: 80px;
    height: 80px;
}

.favorites-page__empty-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--text, rgba(0, 0, 0, 0.9));
}

.favorites-page__empty-desc {
    font-size: 15px;
    line-height: 1.5;
    color: var(--text2, rgba(0, 0, 0, 0.6));
    margin: 0 0 24px;
    max-width: 400px;
}

.favorites-page__empty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    text-decoration: none;
    border-radius: 0;
    font-weight: 600;
    transition: opacity 0.2s, background-color 0.2s;
}

.favorites-page__empty-btn:hover {
    opacity: 0.9;
}

@media (max-width: 768px) {
    .favorites-page__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .favorites-page__empty {
        padding: 40px 16px;
        min-height: 280px;
    }

    .favorites-page__empty-title {
        font-size: 20px;
    }

    .favorites-page__empty-desc {
        font-size: 14px;
    }
}

/* Адаптация выпадающего меню хедера: не выходить за экран при ширине < 1160px */
.header-r-menu-submenu__inner .tab-content {
    min-width: 0;
}

.header-r-menu-submenu-tab__inner {
    max-width: 100%;
    min-width: 0;
}

@media screen and (max-width: 1160px) {
    .header-r-menu-submenu-tab__inner {
        column-count: 1;
        column-gap: 40px;
    }

    .header-r-menu-submenu-tab__categories:not(:last-child) {
        margin-bottom: 40px;
    }

    .header-r-menu-submenu-tab__category-list {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   OVERFLOW FIX ДЛЯ КОНТЕНТНЫХ БЛОКОВ С НЕГАТИВНЫМИ ОТСТУПАМИ
   Блоки с отрицательными margin должны выходить за пределы родителя
   для корректного наложения поверх предыдущих секций
   
   Кроссплатформенное решение:
   - overflow-x, overflow-y для точного контроля
   - contain: none для современных браузеров (CSS Containment)
   - clip-path: none для отмены обрезки
   ============================================ */

/* Родительская секция для блока выбора серверов - разрешаем overflow */
section.servers-select-items .container{
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    contain: none !important;
    clip-path: none !important;
}

/* Секция формы «ИМЕЕТСЯ ЗАДАЧКА ПОСЛОЖНЕЕ»: картинки (SVG) могут выходить за границы блока */
section.servers-select-form,
section.servers-select-form .container,
section.servers-select-form .container.constr_div {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    contain: none !important;
    clip-path: none !important;
}

/* Обёртки декоративных SVG в форме — не обрезать */
.servers-select-form-svg-1,
.servers-select-form-svg-2 {
    overflow: visible !important;
}

/* На странице конфигуратора скрыть второй экземпляр блока формы (дубликат) */
.main.configure-block section.servers-select-form ~ section.servers-select-form {
    display: none !important;
}

/* Внутри одной секции оставить только один блок svg-1 (нижняя картинка не дублируется) */
section.servers-select-form .servers-select-form-svg-1 ~ .servers-select-form-svg-1 {
    display: none !important;
}

/* Родительская секция для отзывов - разрешаем overflow */
section.gratitude .container {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    contain: none !important;
    clip-path: none !important;
}

/* Временно: скрыть иконку сравнения до появления функционала сравнения */
.add-comparison-r {
    display: none !important;
}

@media screen and (max-width: 991px) {
    .header-r-mobile-menu-catalog .slinky li.outer-r-src a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        min-height: 45px;
        padding: 0 16px;
        font-size: 16px;
        text-align: center;
        white-space: normal;
        line-height: 1.2;
    }
}









.faq-article-r__feedback-action {
    position: relative;
}

.faq-article-r__feedback-toast {
    position: absolute;
    left: 0;
    top: calc(100% + -8px);
    z-index: 5;

    max-width: 280px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.35;

    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

.faq-article-r__feedback-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.faq-article-r__feedback-toast.is-success {
    background: #03a7f0;
    color: #0f5132;
    border: 1px solid #b7ebcd;
}

.faq-article-r__feedback-toast.is-error {
    background: #fef2f2;
    color: #842029;
    border: 1px solid #f5c2c7;
}

.faq-article-r__feedback-button.is-active {
    border-color: #3b82f6;
    background: #eff6ff;
    color: #fff;
}