/* Подключение шрифта */
@font-face {
    font-family: 'HelveticaNeueCyr Roman';
    src: url('/fonts/helveticaneuecyr_roman.otf') format('opentype');
}

@font-face {
    font-family: 'HelveticaNeueCyr Thin';
    src: url('/fonts/helveticaneuecyr_thin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

body {
    background-color: #FFFFFF; /* Белый фон */
    margin: 0; /* Убираем отступы */
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
}

/* Предупреждение о повороте экрана для мобильных телефонов */
#orientationWarning {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(51, 63, 72, 0.98);
    z-index: 99999;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

#orientationWarning .warning-title {
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: bold;
    color: #00A9CE;
}

#orientationWarning .warning-text {
    font-size: 16px;
    max-width: 300px;
    line-height: 1.5;
    color: #FFFFFF;
}

#orientationWarning .warning-icon {
    margin-top: 30px;
    font-size: 48px;
    animation: rotate 2s ease-in-out infinite;
}

@keyframes rotate {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-90deg); }
    75% { transform: rotate(90deg); }
}

/* Стиль для изображения, чтобы оно занимало всю ширину и было прижато к верху */
.hero-image img {
    width: 100%;
    height: auto;
    display: block;
    margin-top: -100px; /* Убирает возможный отступ сверху */
}

/* Стили для блока фильтров */
.filter-section {
    margin-top: 20px;
    margin-left: 3.2%;
    display: flex;
    align-items: center;
}

/* Стили для иконки фильтров */
.filter-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

/* Стили для текста "Фильтры" */
.filter-text {
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 16px;
    color: #333F48;
}

/* Стиль для блока "Показать по:" */
.show-options {
    margin-left: 15%;
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 14px;
    color: #7A7A7A;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Стили для каждого варианта (12, 24, 60) */
.show-option {
    cursor: pointer;
    transition: color 0.3s ease;
}

/* Цвет при нажатии */
.show-option.active {
    color: #00A9CE;
}

/* Изменение цвета при наведении */
.show-option:hover {
    color: #00A9CE;
}

/* Стили для блока "Сортировка:" */
.sort-section {
    margin-left: 58.5%; /* Установим отступ для второй части строки */
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 14px;
    color: #7A7A7A;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: relative; /* Для позиционирования выпадающего списка */
}

/* Стили для элемента с надписью "По названию" */
.sort-option {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.3s ease;
}

/* Стиль для стрелочки */
.arrow-down {
    font-size: 10px;
}

/* Стили для выпадающего списка */
.sort-dropdown {
    display: none; /* Скрыт по умолчанию */
    position: absolute;
    top: 30px; /* Отступ сверху для расположения списка */
    left: 0;
    background-color: #fff;
    border: 1px solid #D9D9D9;
    width: 200px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* Чтобы список был выше других элементов */
}
/* Стили для элементов внутри выпадающего списка */
.sort-item {
    padding: 8px 10px;
    cursor: pointer;
    color: #333F48;
    font-size: 12px;
    transition: none; /* Убираем все переходы, чтобы не было увеличения */
    text-align: center;
}

/* Цвет при наведении на элемент списка */
.sort-item:hover {
    text-decoration: underline; /* Тонкая линия подчеркивания при наведении */
    text-decoration-color: #00A9CE;
    color: #333F48; /* Цвет текста остается прежним */
}

/* Показываем выпадающий список при активации */
.sort-section.active .sort-dropdown {
    display: block;
}

/* Стили для активного состояния (когда выпадающий список открыт) */
.sort-option.active {
    color: #00A9CE;
}

/* Строка «разделитель + название» — кликабельна по всей ширине, подсветка только у названия */
.filter-title-row {
    display: block;
    width: 100%;
    cursor: pointer;
}
/* Подчёркивание у названия и при наведении на всю строку */
.filter-title-row:hover .performance-title {
    border-bottom: 2px solid #00A9CE;
}

/* Стиль для разделителя */
.separator {
    width: 63%;
    height: 0.5px;
    background-color: #D9D9D9;
    margin-left: 13%;
    margin-top: 5px;
    margin-bottom: 10px;
}

/* Стиль для текста "ПРОИЗВОДИТЕЛЬНОСТЬ" */
.performance-title {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: #333F48;
    margin-left: 13%;
    margin-bottom: 10px;
    margin-top: 10px;
}

.performance-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    margin-left: 13%; 

}

.third-block {
    margin-bottom: 60px; /* Отступ только у этого блока */
}
.performance-list-wrapper {
    width: 298px; /* Ровно как кнопка */
    max-height: 105px;
    overflow-y: scroll;
    padding-right: 10px;
    position: relative;
    padding-right: 1px;
}

.performance-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 14px;
}

.performance-item {
    display: flex;
    align-items: flex-start; 
    gap: 10px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.checkbox {
    width: 26px;
    height: 26px;
    border: 1px solid #D9D9D9;
    position: relative;
    cursor: pointer;
    background-color: transparent;
    flex-shrink: 0; /* Добавьте это, чтобы чекбокс не сжимался */
}

.checkbox.selected {
    background-color: transparent; /* Убираем фон, когда выбран */
}

.checkbox::after {
    content: '';
    position: absolute;
    top: 50%; /* Центрируем по вертикали */
    left: 50%; /* Центрируем по горизонтали */
    width: 14px; /* Уменьшаем размер внутреннего квадратика */
    height: 14px; /* Уменьшаем размер внутреннего квадратика */
    background-color: transparent; /* Начальный фон — прозрачный */
    transform: translate(-50%, -50%); /* Сдвигаем на 50% относительно себя, чтобы центрировать */
    transition: background-color 0.2s ease;
}

/* Когда чекбокс выбран */
.checkbox.selected::after {
    background-color: #00A9CE; /* Цвет, когда чекбокс выбран */
}
.performance-item span {
    font-size: 14px;
    color: #333F48;
    line-height: 1.4; /* Добавляем межстрочный интервал */
    margin-top: 2px; /* Небольшой отступ сверху для выравнивания */
    word-break: break-word; /* Правильный перенос слов */
    flex: 1; /* Занимает все доступное пространство */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
/* Стили для кнопки "ПРИМЕНИТЬ" */
.apply-button {
    width: 298px;
    height: 48px;
    background-color: #FFFFFF; /* Белый фон */
    border: 1px solid #00A9CE; /* Голубая рамка */
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 14px;
    color: #00A9CE; /* Голубой текст */
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.3s, color 0.3s; /* Плавный переход */
}

/* Эффект при наведении */
.apply-button:hover {
    background-color: #00A9CE; /* Голубой фон */
    color: #FFFFFF; /* Белый текст */
}

/* Стиль для полосы прокрутки внутри блока */
.performance-list-wrapper::-webkit-scrollbar {
    width: 8px;
}

.performance-list-wrapper::-webkit-scrollbar-thumb {
    background-color: #00A9CE;
    border-radius: 10px;
}

.performance-list-wrapper::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

.search-input {
    background-color: #FAFAFA; /* Устанавливаем цвет фона поисковой строки */
}

/* Увеличиваем ширину третьего блока */
#equipment-list-wrapper {
    max-width: 500px;
    width: 100%; /* Занимает всю доступную ширину */
    max-height: 150px;
    overflow-y: scroll;
}

/* Основные стили для каталога */
.catalog-section {
    display: flex;
    margin-top: 30px;
}

.filter-column {
    width: 25%;
    padding-right: 30px;
    flex-shrink: 0;
}

.products-column {
    width: 75%;
    flex-grow: 1;
}

.catalog-wrapper {
    width: 100%;
}

.catalog-row {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 100px;
}

/* Стили карточек с сохранением текстовых стилей */
.catalog-card {
    background-color: white;
    border: 1px solid #00A9CE; /* Голубая рамка */
    width: calc((99% - 40px) / 3);      /* 3 карточки + 2 отступа по 20px */
    flex: 0 0 calc((99% - 40px) / 3);    /* То же самое для флекса */
    height: 400px;
    display: flex;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 200px;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform-origin: center;
}

.catalog-card:hover {
    transform: scale(1.03); /* Увеличение на 3% */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* Тень для эффекта "поднятия" */
    z-index: 10; /* Чтобы увеличенная карточка была поверх других */
}

/* Восстановленные стили для текста */
/* Восстановленные стили для текста */
.catalog-card .product-text-content h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #333F48;
    margin-top: 60px;
    margin-bottom: 5px;
    font-weight: bold;         /* Сделать жирным */
    line-height: 1.2;          /* Уменьшить межстрочное расстояние */
    letter-spacing: -0.2px;    /* Немного уменьшить расстояние между буквами */
}

.catalog-card .product-text-content .product-feature {
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 14px;
    color: #333F48;
    margin-top: 5px;
    margin-bottom: 5px;
    line-height: 0.9;          /* Уменьшить межстрочное расстояние */
    letter-spacing: -0.2px;    /* Немного уменьшить расстояние между буквами */
}


.product-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 180px; /* Фиксированная высота */
    padding-top: 110px;
    box-sizing: border-box;
    margin: 0 auto; /* Центрирование по горизонтали */
}

/* Контейнер для текста */
.product-text-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    margin-top: 35%;
}

/* Специальные случаи для 1 или 2 карточек */
.catalog-row:has(> .catalog-card:first-child:nth-last-child(1)) .catalog-card,
.catalog-row:has(> .catalog-card:first-child:nth-last-child(2)) .catalog-card {
    width: calc(50% - 15px) !important;
    max-width: calc(50% - 15px) !important;
    min-width: calc(50% - 15px) !important;
    flex: 0 0 calc(50% - 15px) !important;
}

/* Медиазапросы */
@media (max-width: 1024px) {
    .catalog-card {
        width: calc(50% - 15px) !important;
        flex: 0 0 calc(50% - 15px) !important;
    }
}

@media (max-width: 768px) {
    .catalog-section {
        flex-direction: column;
    }
    .filter-column, 
    .products-column {
        width: 100%;
    }
    .catalog-card {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* Стили для иконки в карточке */
.product-image-container {
    position: relative; /* Для правильного позиционирования иконки */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 180px; /* Фиксированная высота контейнера для изображения */
    box-sizing: border-box;
    margin: 0 auto; /* Центрирование по горизонтали */
}

.product-img {
    max-width: 300%; /* Уменьшаем размер изображения */
    max-height: 300%;
}

/* Иконка */
.product-image-container img.icon {
    position: absolute;
    top: 50%; /* Центрируем по вертикали относительно контейнера */
    left: 20%; /* Центрируем по горизонтали */
    transform: translate(-50%, -50%); /* Центрируем иконку */
    width: 96px;  /* Устанавливаем ширину иконки */
    height: 32px; /* Устанавливаем высоту иконки */
}

/* Если hit! или new == "нет", то сдвигаем иконку вправо */
.catalog-card.hit-not-new .product-image-container img.icon {
    right: 1px; /* Отступ от правой стороны */
    left: auto; /* Убираем left при правом выравнивании */
    transform: translateX(0); /* Отменяем трансформацию */
}


/* Обновленные стили для иконок */
.icon-with-text {
    position: absolute;
    top: 0px;
    right: 3px !important;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    right: 10px;
    align-items: flex-start;
}


.product-icon.article-icon {
    width: 96px;
    height: 32px;
    background-image: url('/images/icons/for_article.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    transform: translateX(30px); /* ← это реально сдвинет её */
}

.icon-text {
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 14px;
    color: #FFFFFF;
    display: block;
    pointer-events: none;
    margin: 0;
    text-align: center;
    line-height: 32px;
    font-weight: bold;
}

.product-icon-container {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-left: 1px;
    margin-right: 1px;
    flex-grow: 1; /* Это поможет равномерно распределить пространство */
}

.product-icon-new {
    width: 32px;
    height: 32px;
    position: relative;
}

.icon-text-new {
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 10px;
    color: #FFFFFF;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    width: 100%;
    text-align: center;
}

.product-icon-hit {
    width: 32px;
    height: 32px;
    position: relative;
    margin-left: 3px;
}

.icon-text-hit {
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 10px;
    color: #FFFFFF;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    width: 100%;
    text-align: center;
}

/* Дополнительный стиль для иконки HIT, чтобы она была между NEW и основной иконкой */
.product-icon-container.hit-icon {
    margin-left: 1px;
    margin-right: 1px;
}

.product-feature .feature-label {
    color: #7A7A7A;
    font-weight: normal;
}

.product-feature .feature-value {
    color: #333F48;
    font-weight: normal;
    margin-left: 4px;
}

.hero-image {
    position: relative;
    text-align: center;
}
        
.compressor-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Roboto', sans-serif;
    color: #FFFFFF;
    font-size: 44px;
    font-weight: bold;
    text-transform: uppercase;
}

.catalog-card {
    position: relative;
}

.bottom-icon {
    position: absolute;
    bottom: 0px;
    right: 2px;
    width: 46px;
    height: 46px;
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.bottom-icon img {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.compare-wrapper {
    position: relative;
    display: inline-block;
}

.compare-counter {
    position: absolute;
    top: 5px; /* выше картинки */
    width: 20px;
    height: 20px;
    background-color: #D50032; 
    color: #FFFFFF;
    font-size: 11px;
    font-weight: bold;
    font-family: Roboto, sans-serif;
    line-height: 20px;
    padding-top: 1px;
    text-align: center;
    border-radius: 50%;
    z-index: 10;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    right: 10px; 
    display: none; 
}

.search-container {
    position: relative;
    overflow: visible; /* ✅ Это главное */
    z-index: 1;
}

.compare-icon {
    width: 68px;  /* увеличь размер, например, с 24px → 36px */
    height: 68px;
}

.compare-popup {
    display: none; /* по умолчанию скрыт */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;

    justify-content: center;
    align-items: center;
}

.popup-content2 {
    position: relative;
    width: 799px;
    height: 646px;
    background-color: white;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 0 20px rgba(0,0,0,0.25);
    overflow-x: hidden !important;
}

/* Крестик */
.popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    color: #333;
    cursor: pointer;
    user-select: none;
}
.popup-close:hover {
    color: red;
}

.popup-title {
    font-family: 'Roboto', sans-serif;
    font-size: 30px;
    color: #333F48;
    margin-top: 30px;  /* верхний отступ — меняй как хочешь */
    margin-bottom: 20px; /* нижний отступ — тоже настраиваемый */
    text-align: center;
    text-align: left; 
    line-height: 1.2;
    padding-left: 30px;
}

.toggle-wrapper {
    margin-top: 20px;
    margin-left: 200px;
    margin-bottom: 5px;
    display: flex;
    align-items: center; /* Выравнивание по вертикали по центру */
    justify-content: flex-start; /* Выравнивание по горизонтали слева */
    gap: 10px; /* Отступ между ползунком и текстом */
}

.custom-toggle {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    margin-left: 30px;
    width: fit-content;
}

.toggle-text {
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 14px;
    color: #7A7A7A;
    transition: color 0.3s ease;
    line-height: 1; /* Убираем лишний межстрочный интервал */
    margin: 0;
    margin-bottom:50px; /* Убираем верхний отступ */
}

/* Изменение цвета текста при активации переключателя */
.custom-toggle input:checked ~ .toggle-text {
    color: #00A9CE;
}

/* Стили для самого переключателя (оставляем как было) */
.custom-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.slider {
    display: inline-block;
    width: 35px;
    height: 15px;
    background-color: #fff;
    border: 1px solid #D9D9D9;
    border-radius: 15px;
    transition: 0.4s;
    position: relative;
    flex-shrink: 0; /* Запрещаем сжимание */
    transform: translateY(27px); 
}

.slider:before {
    position: absolute;
    content: "";
    height: 13px;
    width: 13px;
    left: 1px;
    top: 1px;
    background-color: #D9D9D9;
    border-radius: 50%;
    transition: 0.4s;
}

.custom-toggle input:checked + .slider {
    border-color: #00A9CE;
}

.custom-toggle input:checked + .slider:before {
    transform: translateX(20px);
    background-color: #00A9CE;
}

.divider {
    width: 93%; /* Ширина линии, 80% от ширины контейнера */
    height: 1px; /* Толщина линии */
    background-color: #00A9CE; /* Цвет линии */
    margin: 0 auto; /* Центрируем по горизонтали, отступы сверху и снизу */
    margin-left: 30px; /* Отступ слева */
}

.divider1 {
    width: 93%; /* Ширина линии, 80% от ширины контейнера */
    height: 1px; /* Толщина линии */
    background-color: #00A9CE; /* Цвет линии */
    margin-left: 30px; /* Отступ слева */
    margin-top: -5px;
    font-weight: bold;
}

.articles-text {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #333F48;
    margin-top: 10px; /* Отступ сверху, чтобы не был слишком близк т о к линии */
    margin-left: 30px; /* Текст по центру */
}

.vertical-divider {
    position: absolute;
    top: 9%;
    left: 35%;
    transform: translateX(-50%);
    height: 80%;
    width: 1px;
    background-color: #00A9CE;
    z-index: 1;
}

.vertical-divider1 {
    position: absolute;
    top: 9%;
    left: 67.5%;
    transform: translateX(-50%);
    height: 80%;
    width: 1px;
    background-color: #00A9CE;
    z-index: 1;
}

.compare-products-container {
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: 20px auto;
    padding: 10px;
}

/* Стили для контейнеров с картинками */
.compare-product {
    background-color: #FAFAFA; /* Цвет фона карточки */
    width: 172px; /* Ширина карточки */
    height: 138px; /* Высота карточки */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    margin: 0 10px; /* Отступы между карточками */
}

/* Стили для картинок внутри карточек */
.compare-product img {
    width: 132px; /* Ширина картинки */
    height: 88px; /* Высота картинки */
    object-fit: contain; /* Сохранение пропорций изображения */
}

/* Перемещение первой карточки */
.compare-product-1 {
    transform: translateX(260px) translateY(-230px); /* Перемещает карточку влево */
}

/* Перемещение второй карточки */
.compare-product-2 {
    transform: translateX(20px) translateY(-230px); /* Перемещает карточку вправо */
}

.compare-characteristics {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* Отступ между колонками */
    padding: 20px;
}

.characteristics-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.characteristics-left,
.characteristics-right {
    width: 48%; /* Обе колонки занимают по 48% */
    display: flex;
    flex-direction: column;
}

.characteristics-title {
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    color: #7A7A7A;
    font-size: 14px;
    margin-bottom: 15px;
}

.characteristics-container {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.characteristics-left {
    width: 40%; /* Ширина колонки с названиями характеристик */
    padding-left: -50px !important;
}

.characteristics-right {
    width: 60%; /* Ширина колонки со значениями характеристик */
    display: flex;
    flex-direction: column;
}

.characteristics-value {
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    color: #333F48;
    font-size: 13px;
    margin-bottom: 15px;
    margin-top: 0px;
}

.compare-characteristics {
    width: 100%;
    margin-top: -175px;
    margin-left: 10px;
    padding: 0 10px 0 10px;
}

.characteristics-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.characteristic-name {
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    color: #7A7A7A;
    font-size: 13px;
    min-width: 200px;
    margin-left: -50px
}

.characteristic-values {
    display: flex;
    gap: 40px;
    flex-grow: 1;
}

.characteristic-value {
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    color: #333F48;
    font-size: 13px;
    text-align: left;
    flex: 1;
}

/* Добавьте этот стиль в ваш CSS файл */
.characteristic-value.highlight-difference {
    font-weight: bold !important;
    color: #333F48 !important;
}

.articles-text {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #333F48;
    margin-top: 10px;
    margin-left: 30px;
    display: flex;
    align-items: center;
}

/* Стили для артикулов */
#article1-text, #article2-text {
    font-weight: bold;
    color: #333F48;
    margin-left: 190px; /* Отступ слева для каждого артикула */
}

/* Дополнительный отступ для второго артикула */
#article2-text {
    margin-left: 185px; /* Больший отступ для второго артикула */
}

.characteristic-row {
    transition: all 0.3s ease;
}

/* Основной контейнер каталога */
.catalog-section {
    display: flex;
    flex-direction: row; /* По умолчанию блоки будут располагаться в ряд */
    margin-top: 30px;
}

/* Стили для карточек товаров */
.catalog-row {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 100px;
    justify-content: flex-start;
    margin-left: -5%;
}




/* Мобильная версия - карточки в столбик и ниже фильтров */
@media (max-width: 768px) {
    .catalog-section {
        flex-direction: column; /* Фильтры и товары вертикально */
    }
    
    .filter-column {
        width: 100%; /* Фильтры на всю ширину */
        padding-right: 0;
        margin-bottom: 20px; /* Отступ перед карточками */
    }
    
    .products-column {
        width: 100%; /* Карточки на всю ширину */
        order: 1; /* Перемещаем вниз */
    }
    
    .catalog-row {
        flex-direction: column; /* Карточки в столбик */
        gap: 20px;
        margin-top: 20px; /* Дополнительный отступ сверху */
    }
    
    .catalog-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin-bottom: 15px;
    }
    
    /* Для 1 или 2 карточек */
    .catalog-row:has(> .catalog-card:first-child:nth-last-child(1)) .catalog-card,
    .catalog-row:has(> .catalog-card:first-child:nth-last-child(2)) .catalog-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
    }
}

/* Десктопная версия (как было) */
@media (min-width: 769px) {
    .catalog-card {
        width: calc(33.333% - 20px);
        min-width: 280px;
    }
    
    /* Специальные случаи для 1 или 2 карточек */
    .catalog-row:has(> .catalog-card:first-child:nth-last-child(1)) .catalog-card,
    .catalog-row:has(> .catalog-card:first-child:nth-last-child(2)) .catalog-card {
        width: calc(50% - 15px) !important;
        max-width: calc(50% - 15px) !important;
        min-width: calc(50% - 15px) !important;
    }
}

@media (max-width: 768px) {
  .sort-section {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .filter-column {
    display: none;
  }

  .filter-column.active {
    display: block;
  }
}

@media (max-width: 768px) {
  .hero-image img {
    width: 100%;
    height: auto;
    margin-top: 0;
  }

  .compressor-text {
    font-size: 24px; /* Меньше на мобильных */
    padding: 0 10px; /* Защита от сжатия по краям */
    text-align: center;
    word-break: break-word; /* Перенос слов если длинные */
  }
}

@media (max-width: 480px) {
  .compressor-text {
    font-size: 18px; /* Ещё меньше на совсем маленьких экранах */
  }
}

/* === FIX CARDS LAYOUT (force override) === */
.products-column .catalog-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: flex-start !important; /* <-- убираем "дырку" посередине */
  row-gap: 40px !important; 
}

/* карточки: никаких фиксированных отступов вниз, используем gap контейнера */
.products-column .catalog-card {
  margin-bottom: 300px !important;
}

/* Переопределение для вертикальных планшетов */
@media (min-width: 768px) and (max-width: 1299px) and (orientation: portrait) {
    .products-column .catalog-card {
        margin-bottom: 180px !important;
    }
}

/* ДЛЯ НОУТ ВЕРСИИ ТУПО СКОПИРОВАТЬ МОЖНО !!!!!!!!!!!!!!!!!!*/
@media (min-width: 1280px) and (max-width: 1536px) {
    .filter-icon,
    .filter-text {
        position: relative;
        left: 10px; /* сдвиг вправо на 10px */
    }
}

@media (min-width: 1280px) and (max-width: 1536px) {
  /* Отступ между словом и цифрами */
  .show-options {
    display: inline-flex; 
    align-items: center;
    margin-left: 14.3%;
  }
  .show-options .show-option { 
    margin-left: 10px;        /* добавим отступ каждой цифре */
  }
  .show-options .show-option:first-of-type {
    margin-left: 10px;        /* первая цифра — чуть больше от слова */
  }

  /* Сдвиг блока "Сортировка" правее */
  /* Вариант 1 — чуть добавить к margin-left */
  .sort-section {
    margin-left: 51%;         /* было 58.5% */
  }
}
@media (min-width: 1280px) and (max-width: 1536px) {
  .apply-button {
    width: 240px; /* было 298px — подбери под свой вкус */
  }
}

@media (min-width: 1280px) and (max-width: 1536px) {
  .performance-list-wrapper {
    width: 240px; /* было 298px — подгони под кнопку */
  }
}

/* Устанавливаем курсор "pointer" для заголовков фильтров */
.performance-title, 
#chargeCycleTitle, 
#maxCurrentTitle, 
#protectionClassTitle {
    cursor: pointer;
    display: inline-block;
    position: relative;
}

/* Добавляем подчеркивание при наведении */
.performance-title:hover, 
#chargeCycleTitle:hover, 
#maxCurrentTitle:hover, 
#protectionClassTitle:hover {
    border-bottom: 3px solid #00A9CE;
}

/* Скрываем фильтры по умолчанию */
#chargeCycleFilter, 
#maxCurrentFilter, 
#protectionClassFilter {
    display: none; /* Скрытие контейнеров фильтров */
}

/* Показываем фильтры при наличии класса active */
#chargeCycleFilter.active, 
#maxCurrentFilter.active, 
#protectionClassFilter.active {
    display: block;  /* Показываем контейнер при добавлении класса active */
}

.performance-title {
    cursor: pointer;
}
.performance-title:hover {
    border-bottom: 2px solid #00A9CE;
}
.performance-container {
    display: none;
}
.performance-container.active {
    display: block;
}

/* Стили для прямоугольника с названием страницы */
.subtitle-section {
    display: flex;
    justify-content: center;
    margin-top: -60px;
    position: relative;
    z-index: 3;
}

.subtitle-container {
    background: white;
    padding: 50px 170px;
    margin-top: -60px; /* Поднимаем контейнер ближе к тексту */
    position: relative;
    z-index: 3;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

}

.hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.subtitle-text {
    color: #333F48;
    font-size: 2rem;
    text-align: center;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .subtitle-container {
        padding: 30px 50px;
        margin-top: -30px;
    }
    
    .subtitle-text {
        font-size: 1.5rem;
    }
}



/* Отступ для body когда шапка fixed */
body.header-fixed {
    padding-top: 80px;
}

.site-header {
    background: rgba(30, 30, 30, 0.5); /* Добавьте эту строку */
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: all 0.3s ease;
}

.site-header.scrolled {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(30, 30, 30, 0.9); /* Убедитесь что здесь тот же цвет */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
    animation: slideDown 0.3s ease;
}
@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Поиск в шапке при скролле */
.header-search {
    display: none;
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    width: 200px;
    background: white;
    border-radius: 20px;
    padding: 5px 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
}

.header-search.active {
    display: flex;
    align-items: center;
}

.header-search-input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-size: 14px;
    padding: 5px;
    color: #333F48;
}

.header-search-input::placeholder {
    color: #7A7A7A;
}

.header-search-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Увеличенная белая лупа для ноутов */
.header-search.notebook-mode {
    width: 50px !important;
    height: 50px !important;
    background: transparent !important;
    box-shadow: none !important;
    right: 60px !important;
    border-radius: 50% !important;
    padding: 0 !important;
}

.header-search.notebook-mode .header-search-input {
    display: none !important;
}

.header-search.notebook-mode .header-search-button {
    padding: 12px !important;
    border-radius: 50% !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
}

.header-search.notebook-mode .header-search-button:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

.header-search.notebook-mode .header-search-button svg {
    width: 24px !important;
    height: 24px !important;
    stroke: white !important;
}

/* Убедимся что лупа видна при скролле */
.site-header.scrolled .header-search.notebook-mode .header-search-button svg {
    stroke: white !important;
}

/* Выпадающая поисковая строка */
.dropdown-search {
    display: none;
    position: absolute;
    top: 100%;
    right: 60px;
    width: 300px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    padding: 15px;
    z-index: 1001;
    margin-top: 5px;
}

.dropdown-search.active {
    display: block;
    animation: slideDown 0.3s ease;
}

.dropdown-search-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dropdown-search-input {
    flex: 1;
    border: 1px solid #00A9CE;
    border-radius: 20px;
    padding: 10px 15px;
    font-size: 14px;
    outline: none;
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
}

.dropdown-search-input:focus {
    border-color: #007B9A;
}

.dropdown-search-button {
    background: #00A9CE;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease;
}

.dropdown-search-button:hover {
    background: #007B9A;
}
/* Адаптивность для поиска в шапке */
@media (max-width: 768px) {
    .header-search {
        right: 80px;
        width: 150px;
    }
    
    .header-search-input {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .header-search {
        right: 60px;
        width: 120px;
    }
}

/* ДОБАВЬТЕ новые стили с галочкой */
.bottom-icon {
    position: absolute;
    bottom: 0px;
    right: 2px;
    width: 46px;
    height: 46px;
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
    z-index: 2;
    transition: all 0.3s ease;
}

.bottom-icon.selected {
    border: none;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
    background-color: #FFFFFF; /* Белый фон остается */
}

/* Стили для галочки */
.checkmark {
    display: none;
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    z-index: 3;
}

.bottom-icon.selected .checkmark {
    display: block;
}

/* Убедитесь что SVG галочки правильные */
.checkmark circle {
    fill: #D50032; /* Красный круг */
}

.checkmark path {
    stroke: white; /* Белая галочка */
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Стили для модального окна выбора товаров */
.selection-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(2px);
}

.selection-modal.active {
    display: flex;
}

.modal-content {
    background: white;
    padding: 60px 40px;
    text-align: center;
    max-width: 700px;
    width: 85%;
    position: relative;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

#closeModal {
    position: absolute;
    top: 20px;
    right: 25px;
    background: none;
    border: none;
    font-size: 32px;
    cursor: pointer;
    color: #333F48;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 10001;
}

#closeModal:hover {
    background-color: transparent;
    color: #D50032;
    transform: rotate(90deg);
}

.modal-message {
    margin: 20px 0;
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 18px;
    color: #333;
    line-height: 1.5;
    font-weight: 500;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .modal-content {
        padding: 30px 20px;
        margin: 20px;
        max-width: 320px;
    }
    
    .modal-message {
        font-size: 16px;
        padding: 0 10px;
    }
    
    #closeModal {
        top: 10px;
        right: 15px;
        font-size: 24px;
    }
}

/* Стили для попапа сравнения с 3 товарами */
.popup-content2 {
    position: relative;
    height: 730px !important;
    background-color: white;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 0 20px rgba(0,0,0,0.25);
    overflow-y: auto;
}

/* Разделители для 3 товаров */
.vertical-divider {
    position: absolute;
    top: 9%;
    left: 35%;
    transform: translateX(-50%);
    height: 60%;
    width: 1px;
    background-color: #00A9CE;
    z-index: 1;
}

.vertical-divider1 {
    position: absolute;
    top: 9%;
    left: 67.5%;
    transform: translateX(-50%);
    height: 60%;
    width: 1px;
    background-color: #00A9CE;
    z-index: 1;
}

.vertical-divider2 {
    position: absolute;
    top: 9%;
    left: 75%;
    transform: translateX(-50%);
    height: 60%;
    width: 1px;
    background-color: #00A9CE;
    z-index: 1;
    display: none; /* Скрыт по умолчанию */
}

/* Когда только отличия — линии короче */
.only-differences .vertical-divider,
.only-differences .vertical-divider1,
.only-differences .vertical-divider2 {
    height: 50%;
}

/* Контейнер для товаров */
.compare-products-container {
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: 20px auto;
    padding: 10px;
}

/* Стили для контейнеров с картинками */
.compare-product {
    background-color: #FAFAFA;
    width: 172px;
    height: 138px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    margin: 0 10px;
}

/* Стили для картинок внутри карточек */
.compare-product img {
    width: 132px;
    height: 88px;
    object-fit: contain;
}

/* Позиционирование для 2 товаров */
.compare-product-1 {
    transform: translateX(260px) translateY(-230px);
}

.compare-product-2 {
    transform: translateX(20px) translateY(-230px);
}

.compare-product-3 {
    transform: translateX(-100px) translateY(-230px);
    display: none; /* Скрыт по умолчанию */
}

/* Стили для характеристик */
.compare-characteristics {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
    margin-top: -210px;
    margin-bottom: 30px;
    overflow-x: hidden !important;
}

/* Стили для артикулов 3 товаров */
#article3-text {
    display: none; /* Скрыт по умолчанию */
}

/* Принудительные стили для ширины попапа */
.popup-content2.large-popup {
    width: 1200px !important;
    max-width: 1200px !important;
}

.popup-content2.normal-popup {
    width: 850px !important;
    max-width: 850px !important;
}

/* Контейнер для кнопок фильтров */
.filter-buttons-container {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 298px;
    margin-left: 13%;
}

/* Кнопки фильтров */
.filter-apply-btn,
.filter-reset-btn {
    width: 100% !important;
    height: 48px;
    background-color: #FFFFFF;
    border: 1px solid #00A9CE;
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 14px;
    color: #00A9CE;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    margin-top: 0 !important;
}

.filter-apply-btn:hover,
.filter-reset-btn:hover {
    background-color: #00A9CE;
    color: #FFFFFF;
}

/* Убираем отступ у третьего блока */
.third-block {
    margin-bottom: 0 !important;
}

/* Убираем старые кнопки ПРИМЕНИТЬ внутри фильтров */
.performance-container .apply-button {
    display: none !important;
}

/* === ВЫПАДАЮЩЕЕ МЕНЮ КАТАЛОГА === */
.dropdown { position: relative; display: inline-block; }
.dropdown-content {
    position: absolute; top: 109%; left: 0; width: 336px;
    background: #FAFAFA !important; font-family: 'HelveticaNeueCyr Thin' !important;
    font-size: 14px; padding: 8px 0; display: none; z-index: 999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-top: 2px solid #00a9ce;
    opacity: 0; transform: translateY(-10px); transition: opacity 0.3s ease, transform 0.3s ease;
}
.dropdown-content a {
    display: block; padding: 10px 20px; text-decoration: none;
    color: #7A7A7A !important; font-family: 'HelveticaNeueCyr Thin' !important;
    font-weight: 100 !important; font-size: 16px; letter-spacing: 1.5px;
    transition: all 0.2s ease; border-left: 3px solid transparent; background: transparent;
}
.dropdown-content a:hover {
    background: #f8f8f8; color: #00a9ce !important; border-left-color: #00a9ce;
    padding-left: 25px; font-weight: 300;
}
.dropdown:hover .dropdown-content { display: block; opacity: 1; transform: translateY(0); }

/* Плавающая кнопка сравнения - КВАДРАТНАЯ */
.floating-compare {
    position: fixed;
    bottom: 30px;
    right: 30px;
    left: auto;
    z-index: 10000;
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.floating-compare.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.floating-compare-wrapper {
    position: relative;
    width: 60px;  /* Ширина квадрата */
    height: 60px; /* Высота квадрата */
    background: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid #00A9CE;
}

.floating-compare-wrapper:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
    background: #f8f8f8;
}

.floating-compare-icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.floating-compare-counter {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 24px;
    height: 24px;
    background-color: #D50032;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
    font-family: Roboto, sans-serif;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
    z-index: 10;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
    display: none;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .floating-compare {
        bottom: 20px;
        right: 20px;
        z-index: 10000;
    }
    
    .floating-compare-wrapper {
        width: 55px;  /* Квадрат для мобильных */
        height: 55px; /* Квадрат для мобильных */
        border-radius: 6px; /* Меньшие скругления на мобильных */
    }
    
    .floating-compare-icon {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 768px) {
    .catalog-section {
        flex-direction: column;
    }
    
    .filter-column, 
    .products-column {
        width: 100%;
        padding: 0 15px !important; /* ← ОТСТУПЫ СПРАВА И СЛЕВА */
        box-sizing: border-box;
    }
    
    .catalog-row {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin-bottom: 30px;
        margin-left: 0 !important;
        margin-top: 20px;
        width: 100%;
    }
    
    .catalog-card {
        width: 100% !important; /* ← ЗАНИМАЕТ ВСЮ ШИРИНУ С ОТСТУПАМИ */
        max-width: 350px !important;
        height: 280px !important;
        margin: 0 auto !important;
        border: 1px solid #00A9CE;
        padding: 8px;
        margin-bottom: 0 !important;
        box-sizing: border-box;
    }
    
    .product-image-container {
        height: 150px !important;
        width: 100% !important;
        padding: 20px 10px 10px 10px !important;
        margin: 0 auto !important;
        box-sizing: border-box;
    }
    
    .product-img {
        max-height: 50% !important;
        max-width: 50% !important;
        transform: scale(1.2) !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
    }
    
    .product-text-content {
        margin-top: 120px !important;
        padding: 0 8px !important;
        margin-bottom: 5px;
    }
    
    .catalog-card .product-text-content h3 {
        font-family: 'Roboto', sans-serif !important;
        font-size: 14px !important;
        color: #333F48 !important;
        margin: 10px 0 5px 0 !important;
        line-height: 1.2 !important;
        font-weight: bold;
    }
    
    .catalog-card .product-text-content .product-feature {
        font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif !important;
        font-size: 12px !important;
        color: #333F48 !important;
        margin: 2px 0 !important;
        line-height: 1.3 !important;
    }
    
    .product-feature .feature-label {
        color: #7A7A7A !important;
        font-weight: normal;
    }
    
    .product-feature .feature-value {
        color: #333F48 !important;
        font-weight: normal;
        margin-left: 4px;
    }
    
    /* ВОЗВРАЩАЕМ ИКОНКИ НА ПРЕЖНИЕ МЕСТА */
    .icon-with-text {
        position: absolute;
        top: 0px;
        right: 10px !important; /* ← ВОЗВРАЩАЕМ СПРАВА */
        left: auto !important;
        display: flex;
        gap: 3px;
        z-index: 2;
        flex-direction: row !important; /* ← В РЯД КАК БЫЛО */
        align-items: flex-start;
    }
    
    .product-icon-container {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
        margin-bottom: 0; /* ← УБИРАЕМ ОТСТУП */
    }
    
    .product-icon-container img {
        width: 32px;
        height: 32px;
    }
    
    .icon-text-hit,
    .icon-text-new {
        color: #FFFFFF;
        font-size: 10px;
        font-weight: bold;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
        white-space: nowrap;
        text-align: center;
    }
    
    .product-icon.article-icon {
        width: 96px;
        height: 32px;
        background-image: url('/images/icons/for_article.svg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        flex-shrink: 0;
    }
    
    .icon-text {
        font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
        font-size: 14px;
        color: #FFFFFF;
        pointer-events: none;
        white-space: nowrap;
    }
    
    /* ВОЗВРАЩАЕМ КНОПКУ СРАВНЕНИЯ НА ПРЕЖНЕЕ МЕСТО */
    .bottom-icon {
        position: absolute !important;
        bottom: 0px !important;
        right: 2px !important; /* ← ВОЗВРАЩАЕМ СПРАВА */
        left: auto !important;
        width: 46px !important;
        height: 46px !important;
        background-color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
        z-index: 2;
    }
    
    .bottom-icon img {
        width: 46px !important;
        height: 46px !important;
        object-fit: contain;
    }
    
    /* Для 1 или 2 карточек */
    .catalog-row:has(> .catalog-card:first-child:nth-last-child(1)) .catalog-card,
    .catalog-row:has(> .catalog-card:first-child:nth-last-child(2)) .catalog-card {
        width: 100% !important;
        max-width: 350px !important;
        height: 280px !important;
        margin: 0 auto !important;
    }
    
    /* Убираем старые стили которые мешают */
    .products-column .catalog-card {
        margin-bottom: 0 !important;
    }

    /* Чуть уменьшаем все элементы */
    .icon-with-text {
        transform: scale(0.9);
        transform-origin: top right;
    }

    .bottom-icon {
        transform: scale(0.9);
        transform-origin: bottom right;
    }

    .catalog-card .product-text-content h3 {
        font-size: 13px !important;
    }

    .catalog-card .product-text-content .product-feature {
        font-size: 11px !important;
    }

    .product-icon-container img {
        width: 28px !important;
        height: 28px !important;
    }

    .product-icon.article-icon {
        width: 86px !important;
        height: 28px !important;
    }

    .icon-text {
        font-size: 12px !important;
    }

    .icon-text-hit,
    .icon-text-new {
        font-size: 9px !important;
    }

    .bottom-icon img {
        width: 42px !important;
        height: 42px !important;
    }
    /* Подвинуть текст внутри артикула */
    .product-icon.article-icon .icon-text {
        margin-left: 0 !important;
        text-align: center !important;
    }

    /* Подвинуть текст внутри хит и нью */
    .icon-text-hit {
        margin-left: 1px !important;
    }

    .icon-text-new {
        margin-left: 1px !important;
    }
}

@media (max-width: 768px) {
    .product-img {
        transform: scale(3) !important; /* было 1.2 */
        margin-top: 120px !important; /* ← ОТСТУП СВЕРХУ */
    }
}


/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .floating-compare {
        bottom: 20px;
        right: 20px;
        z-index: 10000;
    }
    
    .floating-compare-wrapper {
        width: 55px;  /* Квадрат для мобильных */
        height: 55px; /* Квадрат для мобильных */
        border-radius: 6px; /* Меньшие скругления на мобильных */
    }
    
    .floating-compare-icon {
        width: 24px;
        height: 24px;
    }
}

/* Адаптация hero-image для мобильной версии */
@media (max-width: 768px) {

    .subtitle-container {
        padding: 20px 30px !important; /* Меньшие отступы */
        margin-top: -30px !important; /* Меньший подъем */
        width: 80%; /* Уже на мобильных */
        max-width: 300px;
    }
    
    .subtitle-text {
        font-size: 1.2rem !important; /* Меньший размер шрифта */
        padding: 0 10px;
        line-height: 1.3;
    }
}

/* Для очень маленьких экранов */
@media (max-width: 480px) {

    
    .subtitle-container {
        padding: 15px 20px !important;
        margin-top: -25px !important;
        width: 85%;
    }
    
    .subtitle-text {
        font-size: 1rem !important; /* Еще меньше */
    }
}

@media (max-width: 768px) {
    .floating-compare-wrapper {
        padding: 0 !important;
        border-radius: 0 !important;
        width: 35px !important; /* ← МЕНЬШЕ */
        height: 35px !important; /* ← МЕНЬШЕ */
    }
    
    .floating-compare-icon {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    .floating-compare-counter {
        top: -6px !important;
        right: -6px !important;
        width: 18px !important;
        height: 18px !important;
        font-size: 10px !important;
        line-height: 18px !important;
    }
}

@media (max-width: 768px) {

    .popup-title br {
        display: none; /* ← ЭТА СТРОЧКА УБИРАЕТ ПЕРЕНОС */
    }

    /* СКРЫВАЕМ ГОРИЗОНТАЛЬНЫЕ РАЗДЕЛИТЕЛИ */
    .divider,
    .divider1 {
        display: none !important;
    }
    
    /* ПОДВИГАЕМ ВЕСЬ БЛОК С ПОЛЗУНКОМ И ТЕКСТОМ ВНИЗ */
    .toggle-container {
        margin: 10px 0 20px 0 !important;
        padding: 0 10px;
    }

    /* ВЫРАВНИВАЕМ ПОЛЗУНОК И ТЕКСТ НА ОДНОЙ ЛИНИИ */
    .custom-toggle {
        display: inline-flex !important;
        align-items: center !important;
        gap: 15px !important;
        margin: 0 !important;
        padding: 0 !important;
        width: fit-content !important;
    }
    
    /* ПОЛЗУНОК */
    .slider {
        transform: translateY(0) !important;
        width: 50px !important;
        height: 20px !important;
        margin: 0 !important;
        flex-shrink: 0;
    }
    
    .slider:before {
        height: 16px !important;
        width: 16px !important;
        top: 2px !important;
        left: 2px !important;
    }
    
    .custom-toggle input:checked + .slider:before {
        transform: translateX(30px) !important;
    }
    
    /* ТЕКСТ "ТОЛЬКО ОТЛИЧИЯ" */
    .toggle-text {
        font-size: 16px !important;
        color: #00A9CE !important;
        margin: 0 !important;
        font-weight: 500 !important;
        line-height: 1 !important;
    }
    
    /* ЗАГОЛОВОК */
    .popup-title {
        font-size: 24px !important;
        text-align: left !important;
        padding-left: 10px !important;
        margin-top: 15px !important;
        margin-bottom: 5px !important;
        line-height: 1.1;
    }
    
    /* ОСТАЛЬНОЙ КОД БЕЗ ИЗМЕНЕНИЙ */
    .compare-products-container,
    .articles-text,
    .compare-characteristics {
        display: none !important;
    }
    
    .vertical-divider,
    .vertical-divider1,
    .vertical-divider2 {
        display: none !important;
    }
    
    .compare-popup {
        padding: 10px;
        align-items: flex-start;
    }
    
    .popup-content2 {
        width: 95vw !important;
        max-width: 95vw !important;
        height: auto;
        max-height: 90vh;
        overflow-y: auto;
        padding: 15px;
        margin: 15px 30px !important;
        margin-left: 10px !important; /* ← ЯВНО УКАЖИ ЛЕВЫЙ ОТСТУП */
        margin-right: 25px !important; /* ← И ПРАВЫЙ */
    }
    
    /* Контейнер товаров - вертикальное расположение */
    .compare-products-container {
        flex-direction: column;
        align-items: center;
        gap: 40px; /* Уменьшил расстояние между карточками */
        margin: 20px 0;
        transform: none !important;
    }
    
    /* Каждая карточка товара с артикулом и характеристиками ПОД НЕЙ */
    .compare-product {
        width: 100%;
        max-width: 300px;
        height: auto;
        margin: 0 !important;
        transform: none !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        padding: 20px;
        background-color: #FAFAFA;
        border-radius: 8px;
        border: 1px solid #00A9CE;
    }
    
    .compare-product-1,
    .compare-product-2,
    .compare-product-3 {
        transform: none !important;
        display: flex !important;
    }
    
    .compare-product-3 {
        transform: none !important;
        display: none !important;
    }
    
    .compare-product img {
        width: 120px;
        height: 80px;
        object-fit: contain;
    }
    
    /* Артикул под картинкой */
    .compare-product::after {
        content: attr(data-article);
        font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
        font-size: 14px;
        font-weight: bold;
        color: #333F48;
        text-align: center;
        padding: 8px 15px;
        background: white;
        border-radius: 4px;
        border: 1px solid #00A9CE;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* БЛОК ХАРАКТЕРИСТИК ПОД КАЖДОЙ КАРТОЧКОЙ */
    .compare-product .product-characteristics {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 10px;
    }
    
    .compare-product .characteristic-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .compare-product .char-name {
        font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
        font-size: 13px;
        color: #7A7A7A;
        font-weight: normal;
        flex: 1;
    }
    
    .compare-product .char-value {
        font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
        font-size: 13px;
        color: #333F48;
        font-weight: bold;
        flex: 1;
        text-align: right;
    }
    
    /* Скрываем старый блок с артикулами */
    .articles-text {
        display: none !important;
    }
    
    #article1-text,
    #article2-text,
    #article3-text {
        display: none !important;
    }
    
    /* ВАЖНО: НЕ СКРЫВАЕМ старый блок характеристик, а ПЕРЕДЕЛЫВАЕМ его */
    .compare-characteristics {
        display: none !important; /* Старый формат скрываем */
    }
    
    /* СОЗДАЕМ НОВЫЙ КОНТЕЙНЕР ДЛЯ ХАРАКТЕРИСТИК В МОБИЛЬНОЙ ВЕРСИИ */
    .mobile-characteristics {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-top: 20px;
        width: 100%;
    }
    
    .mobile-product-characteristics {
        background: #FAFAFA;
        padding: 15px;
        border-radius: 8px;
        border: 1px solid #00A9CE;
    }
    
    .mobile-product-header {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #00A9CE;
    }
    
    .mobile-product-header img {
        width: 200px !important;
        height: 150px !important;
        object-fit: contain;
    }
    
    .mobile-product-article {
        font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
        font-size: 14px;
        font-weight: bold;
        color: #333F48;
        margin-left: 30px !important;
    }
    
    .mobile-characteristics-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .mobile-characteristic-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        transition: all 0.3s ease;
    }
    
    .mobile-char-name {
        font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
        font-size: 14px;
        color: #7A7A7A;
        flex: 1;
    }
    
    .mobile-char-value {
        font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
        font-size: 14px;
        color: #333F48;
        font-weight: bold;
        flex: 1;
        text-align: right;
        transition: all 0.3s ease;
    }
    
    /* Стили для выделения различий в мобильной версии */
    .mobile-char-value.highlight-difference {
        color: #00A9CE !important;
        background-color: rgba(0, 169, 206, 0.1);
        padding: 4px 8px;
        border-radius: 4px;
        font-weight: bold;
    }
    
    /* Скрытие одинаковых характеристик при включенном переключателе */
    .mobile-characteristic-item.hidden {
        display: none !important;
    }
    
    /* Крестик закрытия */
    .popup-close {
        top: 5px;
        right: 10px;
        font-size: 24px;
        z-index: 10001;
    }
}

/* Дополнительные стили для очень маленьких экранов */
@media (max-width: 480px) {
    .popup-content2 {
        width: 98vw !important;
        padding: 10px;
    }
    
    .popup-title {
        font-size: 20px !important;
        margin-top: 10px !important;
        margin-bottom: 0 !important;
    }
    

    .toggle-text {
        font-size: 14px !important;
    }
    
    .slider {
        width: 45px !important;
        height: 18px !important;
    }
    
    .slider:before {
        height: 14px !important;
        width: 14px !important;
    }
    
    .custom-toggle input:checked + .slider:before {
        transform: translateX(27px) !important;
    }
    
    .compare-product {
        max-width: 280px;
        padding: 15px;
    }
    
    .compare-product img {
        width: 100px;
        height: 70px;
    }
    
    .compare-product::after {
        font-size: 12px;
        padding: 6px 12px;
    }
    
    .compare-product .char-name,
    .compare-product .char-value {
        font-size: 12px;
    }
    
    .mobile-product-characteristics {
        padding: 12px;
    }
    
    .mobile-product-header img {
        width: 50px;
        height: 35px;
    }
    
    .mobile-product-article {
        font-size: 13px;
    }
    
    .mobile-char-name,
    .mobile-char-value {
        font-size: 13px;
    }
    
    .mobile-char-value.highlight-difference {
        padding: 3px 6px;
        font-size: 13px;
    }
}

/* Стиль для выделения различий в десктопной версии */
@media (max-width: 768px) {
    .char-value.highlight-difference {
        color: #00A9CE !important;
        background-color: rgba(0, 169, 206, 0.1);
        padding: 2px 6px;
        border-radius: 3px;
        font-weight: bold;
    }
}

/* Для мобильной версии */
@media (max-width: 768px) {
    .site-header {
        background: #333F48 !important;
    }
    
    .site-header.scrolled {
        background: rgba(20, 20, 20, 0.92) !important; /* Еще темнее при скролле */
    }
}

@media (max-width: 768px) {
    .floating-compare {
        display: none !important;
    }
}

@media (max-width: 768px) {
    /* Делаем шрифт внутри артикула жирным с Roboto */
    .product-icon.article-icon .icon-text {
        font-family: 'Roboto', sans-serif !important;
        font-weight: 700 !important; /* 700 = bold */
    }
}

/* ============================================
   АДАПТАЦИЯ ДЛЯ ПЛАНШЕТОВ, НОУТБУКОВ И ДЕСКТОПОВ (из компрессоров)
   ============================================ */

/* ============================================
   АДАПТАЦИЯ ДЛЯ ПЛАНШЕТОВ
   ============================================ */

/* 📱 ВЕРТИКАЛЬНЫЕ ПЛАНШЕТЫ (768px-1024px, portrait) - точно как в chargers.css */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    /* Шапка для вертикальных планшетов - убираем прозрачность */
    .site-header {
        background-color: #333F48 !important;
        opacity: 1 !important;
    }
    
    /* Шапка при скролле - тоже без прозрачности */
    .site-header.scrolled {
        background-color: #333F48 !important;
        opacity: 1 !important;
    }
    
    /* Скрываем меню по умолчанию на вертикальных планшетах */
    .nav-menu {
        display: none !important;
        flex-direction: column !important;
        position: absolute !important;
        top: 60px !important;
        left: 0 !important;
        width: 100% !important;
        background-color: #333F48 !important;
        padding: 20px 0 !important;
        z-index: 999 !important;
        margin-top: 0 !important;
        border-top: 1px solid rgba(255,255,255,0.1) !important;
    }
    
    /* Показываем меню при добавлении класса open */
    .nav-menu.open {
        display: flex !important;
    }

    /* Показываем бургер-меню */
    .hamburger {
        display: flex !important;
    }

    /* Стили для анимации гамбургера в крестик */
    .hamburger.active div:nth-child(1) {
        transform: translateY(8.5px) rotate(45deg) !important;
    }
    
    .hamburger.active div:nth-child(2) {
        opacity: 0 !important;
    }
    
    .hamburger.active div:nth-child(3) {
        transform: translateY(-8.5px) rotate(-45deg) !important;
    }

    .hamburger div {
        transition: all 0.3s ease !important;
        height: 3px !important;
        background-color: white !important;
        border-radius: 2px !important;
    }

    /* Стили для элементов меню на вертикальных планшетах */
    .nav-menu a {
        padding: 10px 20px !important;
        font-size: 18px !important;
    }

    .contact-button {
        margin: 15px 20px !important;
        width: 20% !important;
    }

    .lang-switch {
        text-align: center !important;
        margin-top: 10px !important;
    }
    
    /* Убираем отступ сверху у картинки под шапкой */
    .hero-image {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    .hero-image img {
        margin-top: 0 !important;
        display: block !important;
    }
    
    /* Лупа при скролле - двигаем левее */
    .site-header.scrolled .header-search {
        right: 50px !important;
    }
    
    /* Фильтры */
    .filter-section {
        margin-left: 2%;
        flex-wrap: wrap;
        gap: 15px;
    }
    
    .show-options {
        margin-left: 9%;
    }
    
    .sort-section {
        margin-left: 15%;
    }
    
    /* Каталог */
    .catalog-section {
        flex-direction: row;
        margin-top: 20px;
        margin-bottom: 30px !important;
    }
    
    .filter-column {
        width: 30%;
        padding-right: 20px;
    }
    
    .products-column {
        width: 70%;
    }
    
    /* Карточки товаров - 2 в ряд */
    .catalog-row {
        gap: 20px;
        margin-bottom: 60px;
    }
    
    .catalog-card {
        width: calc(50% - 10px) !important;
        flex: 0 0 calc(50% - 10px) !important;
        height: 300px !important;
        margin-bottom: 180px !important;
    }
    
    /* Переопределяем общий стиль для вертикальных планшетов */
    .products-column .catalog-card {
        margin-bottom: 180px !important;
    }
    
    /* Изображения по центру карточки - чуть увеличены */
    .products-column .catalog-card .product-image-container {
        height: 250px !important;
        min-height: 250px !important;
        max-height: 250px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .products-column .catalog-card .product-image-container .product-img,
    .products-column .catalog-card .product-image-container img.product-img {
        max-width: 75% !important;
        max-height: 75% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        transform: none !important;
        margin: 0 !important;
        display: block !important;
    }
    
    /* Текст под карточками - в 2 раза выше */
    .products-column .catalog-card .product-text-content,
    .products-column .catalog-row .catalog-card .product-text-content,
    .catalog-section .products-column .catalog-card .product-text-content {
        margin-top: 5px !important;
        margin-bottom: 30px !important;
        padding-bottom: 30px !important;
    }
    
    /* Сдвигаем "Фильтры" правее */
    .filter-section .filter-icon,
    .filter-section .filter-text {
        margin-left: 10px !important;
    }
    
    /* Уменьшаем расстояние между квадратом с лупой и кнопкой сравнения только для вертикальных планшетов */
    .search-container .compare-wrapper {
        margin-left: 1px !important;
    }
    
    /* Элементы футера в одну строчку */
    .footer-bottom {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 100px !important;
    }
    
    /* Опускаем тексты внутри футера и сдвигаем влево */
    .footer-bottom .footer-copy,
    .footer-bottom .footer-privacy {
        margin: 0 !important;
        margin-top: 120px !important;
        margin-left: -10% !important;
        margin-bottom: 2% !important;
        padding-bottom: 0 !important;
    }
    
    /* Уменьшаем высоту всего футера */
    .site-footer {
        height: 12vh !important;
        min-height: 12vh !important;
        padding: 15px 0 !important;
    }
    
    /* Уменьшаем шрифт текста в футере на 1px */
    .footer-text p {
        font-size: 15px !important;
    }
    
    /* Для 1 или 2 карточек */
    .catalog-row:has(> .catalog-card:first-child:nth-last-child(1)) .catalog-card,
    .catalog-row:has(> .catalog-card:first-child:nth-last-child(2)) .catalog-card {
        width: calc(50% - 10px) !important;
        flex: 0 0 calc(50% - 10px) !important;
    }
    
    /* Фильтры */
    .performance-list-wrapper {
        width: 100%;
        max-width: 250px;
    }
    
    .apply-button {
        width: 66% !important;
        margin-left: -3% !important;
        max-width: none !important;
    }
    
    .filter-apply-btn,
    .filter-reset-btn {
        width: 66% !important;
        margin-left: -3% !important;
    }
    
    .separator {
        width: 80%;
        margin-left: 10%;
    }
    
    .performance-title {
        margin-left: 10%;
        font-size: 15px;
    }
    
    .performance-container {
        margin-left: 10%;
    }
    
    /* Заголовок */
    .subtitle-container {
        padding: 40px 100px;
        margin-top: -50px;
    }
    
    .subtitle-text {
        font-size: 1.6rem;
    }
    
    /* Поиск */
    .search-section {
        padding: 15px 2%;
    }
    
    .search-container {
        padding: 12px 15px;
    }
    
    /* ========== СТИЛИ ТОЛЬКО ДЛЯ ДВУХ ТОВАРОВ НА ВЕРТИКАЛЬНЫХ ПЛАНШЕТАХ ========== */
    /* Попап сравнения - поднимаем картинки выше для двух товаров */
    .compare-popup:not(:has(#article3-text:not(:empty))) .compare-product-1,
    .compare-popup:not(:has(#article3-text:not(:empty))) .compare-product-1[style],
    .compare-popup .popup-content2[style*="width: 850px"] .compare-product-1,
    .compare-popup .popup-content2[style*="width: 850px"] .compare-product-1[style] {
        transform: translateX(295px) translateY(-230px) !important;
    }
    
    /* Для двух товаров - вторая карточка */
    .compare-popup:not(:has(#article3-text:not(:empty))) .compare-product-2,
    .compare-popup:not(:has(#article3-text:not(:empty))) .compare-product-2[style],
    .compare-popup .popup-content2[style*="width: 850px"] .compare-product-2,
    .compare-popup .popup-content2[style*="width: 850px"] .compare-product-2[style] {
        transform: translateX(20px) translateY(-230px) !important;
    }
    
    /* ========== СТИЛИ ТОЛЬКО ДЛЯ ТРЕХ ТОВАРОВ НА ВЕРТИКАЛЬНЫХ ПЛАНШЕТАХ ========== */
    /* Для трех товаров - первая картинка левее, вторая и третья правее */
    .compare-popup:has(#article3-text:not(:empty)) .compare-product-1,
    .compare-popup:has(#article3-text:not(:empty)) .compare-product-1[style],
    .compare-popup .popup-content2[style*="width: 1200px"] .compare-product-1,
    .compare-popup .popup-content2[style*="width: 1200px"] .compare-product-1[style] {
        transform: translateX(190px) translateY(-230px) !important;
    }
    
    .compare-popup:has(#article3-text:not(:empty)) .compare-product-2,
    .compare-popup:has(#article3-text:not(:empty)) .compare-product-2[style],
    .compare-popup .popup-content2[style*="width: 1200px"] .compare-product-2,
    .compare-popup .popup-content2[style*="width: 1200px"] .compare-product-2[style] {
        transform: translateX(115px) translateY(-230px) !important;
    }
    
    .compare-popup:has(#article3-text:not(:empty)) .compare-product-3,
    .compare-popup:has(#article3-text:not(:empty)) .compare-product-3[style],
    .compare-popup .popup-content2[style*="width: 1200px"] .compare-product-3,
    .compare-popup .popup-content2[style*="width: 1200px"] .compare-product-3[style] {
        transform: translateX(40px) translateY(-230px) !important;
    }
    
    /* Немного уменьшаем размер контейнеров для трех товаров, позиции не меняются */
    .compare-popup:has(#article3-text) .compare-product {
        width: 160px !important;
        height: 130px !important;
    }
    
    /* Отступ сверху для характеристик для трех товаров */
    .compare-popup:has(#article3-text) .compare-characteristics {
        margin-top: -200px !important;
    }
    
    /* Первый артикул для двух товаров на вертикальных планшетах */
    .compare-popup:not(:has(#article3-text:not(:empty))) #article1-text,
    .compare-popup .popup-content2[style*="width: 850px"] #article1-text {
        left: 16% !important;
    }
    
    /* Первый артикул для трех товаров на вертикальных планшетах */
    .compare-popup:has(#article3-text:not(:empty)) #article1-text,
    .compare-popup .popup-content2[style*="width: 1200px"] #article1-text {
        left: 3% !important;
    }
    
    /* Характеристики первого товара для трех товаров - независимое позиционирование */
    .compare-popup:has(#article3-text:not(:empty)) .characteristic-value[data-product-index="0"],
    .compare-popup .popup-content2[style*="width: 1200px"] .characteristic-value[data-product-index="0"] {
        position: relative !important;
        left: -9% !important;
    }
    
    /* Второй артикул левее для трех товаров */
    .compare-popup:has(#article3-text) #article2-text {
        left: 28% !important;
    }
    
    /* Характеристики второго товара для трех товаров - независимое позиционирование */
    .compare-popup:has(#article3-text:not(:empty)) .characteristic-value[data-product-index="1"],
    .compare-popup .popup-content2[style*="width: 1200px"] .characteristic-value[data-product-index="1"] {
        position: relative !important;
        left: -19% !important;
    }
    
    /* Третий артикул левее для трех товаров */
    .compare-popup:has(#article3-text:not(:empty)) #article3-text,
    .compare-popup .popup-content2[style*="width: 1200px"] #article3-text {
        left: 580px !important;
    }
    
    /* Характеристики третьего товара для трех товаров - независимое позиционирование */
    .compare-popup:has(#article3-text:not(:empty)) .characteristic-value[data-product-index="2"],
    .compare-popup .popup-content2[style*="width: 1200px"] .characteristic-value[data-product-index="2"] {
        position: relative !important;
        left: -12% !important;
    }
    
    /* Второй артикул левее для двух товаров на вертикальных планшетах */
    .compare-popup:not(:has(#article3-text:not(:empty))) #article2-text,
    .compare-popup .popup-content2[style*="width: 850px"] #article2-text {
        left: 375px !important;
    }
    
    /* Характеристики первого товара для двух товаров - независимое позиционирование */
    .compare-popup:not(:has(#article3-text:not(:empty))) .characteristic-value[data-product-index="0"],
    .compare-popup .popup-content2[style*="width: 850px"] .characteristic-value[data-product-index="0"] {
        position: relative !important;
        left: 2% !important;
    }
    
    /* Характеристики второго товара для двух товаров - независимое позиционирование */
    .compare-popup:not(:has(#article3-text:not(:empty))) .characteristic-value[data-product-index="1"],
    .compare-popup .popup-content2[style*="width: 850px"] .characteristic-value[data-product-index="1"] {
        position: relative !important;
        left: -7% !important;
    }
    
    /* Разделители правее для двух товаров на вертикальных планшетах */
    .compare-popup:not(:has(#article3-text:not(:empty))) .vertical-divider,
    .compare-popup .popup-content2[style*="width: 850px"] .vertical-divider {
        left: 38% !important;
    }
    
    .compare-popup:not(:has(#article3-text:not(:empty))) .vertical-divider1,
    .compare-popup .popup-content2[style*="width: 850px"] .vertical-divider1 {
        left: 70% !important;
    }
    
    /* Разделители правее для трех товаров (переопределяют стили для двух товаров) */
    .compare-popup:has(#article3-text:not(:empty)) .vertical-divider,
    .compare-popup .popup-content2[style*="width: 1200px"] .vertical-divider {
        left: 29% !important;
    }
    
    .compare-popup:has(#article3-text:not(:empty)) .vertical-divider1,
    .compare-popup .popup-content2[style*="width: 1200px"] .vertical-divider1 {
        left: 52.5% !important;
    }
    
    .compare-popup:has(#article3-text:not(:empty)) .vertical-divider2,
    .compare-popup .popup-content2[style*="width: 1200px"] .vertical-divider2 {
        left: 75.2% !important;
    }
    
    /* Попап сравнения - адаптивная высота и без скролла */
    .compare-popup .popup-content2 {
        height: auto !important;
        min-height: auto !important;
        max-height: 90vh !important;
        overflow-y: hidden !important;
        overflow-x: hidden !important;
        padding-bottom: 20px !important;
    }
    
    .compare-popup {
        overflow-x: hidden !important;
        overflow-y: hidden !important;
    }
    
    .compare-popup .compare-characteristics {
        overflow-x: hidden !important;
        overflow-y: hidden !important;
    }
    
    /* Характеристики первого товара для двух товаров на вертикальных планшетах (как в зарядных устройствах) */
    .compare-popup:not(:has(#article3-text:not(:empty))) .characteristic-value[data-product-index="0"],
    .compare-popup .popup-content2[style*="width: 850px"] .characteristic-value[data-product-index="0"] {
        padding-left: 40px !important;
    }
    
    /* Характеристики второго товара для двух товаров на вертикальных планшетах (как в зарядных устройствах) */
    .compare-popup:not(:has(#article3-text:not(:empty))) .characteristic-value[data-product-index="1"],
    .compare-popup .popup-content2[style*="width: 850px"] .characteristic-value[data-product-index="1"] {
        padding-left: 50px !important;
    }
    
    /* Характеристики второго товара для трех товаров на вертикальных планшетах - сдвигаем чуть правее независимо */
    .compare-popup:has(#article3-text:not(:empty)) .characteristic-value[data-product-index="1"],
    .compare-popup .popup-content2[style*="width: 1200px"] .characteristic-value[data-product-index="1"] {
        position: relative !important;
        left: -8% !important;
    }
    
    /* Перенос "Максимальная производительность" на две строки */
    .compare-popup [data-characteristic="maximum_performance"] {
        line-height: 1.3 !important;
    }
}

/* 📱 ГОРИЗОНТАЛЬНЫЕ ПЛАНШЕТЫ (768px-1024px, landscape) */
@media (min-width: 768px) and (max-width: 1299px) and (orientation: landscape) {
    /* Фильтры */
    .filter-section {
        margin-left: 2%;
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .show-options {
        margin-left: 14.2% !important;
        font-size: 13px;
    }
    
    .sort-section {
        margin-left: auto !important;
        margin-right: 2.2% !important;
        font-size: 13px;
    }
    
    /* Каталог */
    .catalog-section {
        flex-direction: row;
        margin-top: 15px;
    }
    
    .filter-column {
        width: 28%;
        padding-right: 15px;
    }
    
    .products-column {
        width: 72%;
        margin-right: 1.5% !important;
    }
    
    /* Карточки товаров - 3 в ряд */
    .catalog-row {
        gap: 15px;
        margin-bottom: 50px;
        row-gap: 50% !important;
    }
    
    .catalog-card {
        width: calc(33.333% - 10px) !important;
        flex: 0 0 calc(33.333% - 10px) !important;
        height: 280px;
        margin-bottom: 200px !important;
    }
    
    /* Для 1 или 2 карточек */
    .catalog-row:has(> .catalog-card:first-child:nth-last-child(1)) .catalog-card,
    .catalog-row:has(> .catalog-card:first-child:nth-last-child(2)) .catalog-card {
        width: calc(50% - 8px) !important;
        flex: 0 0 calc(50% - 8px) !important;
    }
    
    /* Фильтры */
    .performance-list-wrapper {
        width: 100%;
        max-width: 220px;
    }
    
    .filter-buttons-container {
        width: 60% !important;
        margin-left: 6% !important;
    }
    
    .apply-button,
    .filter-apply-btn,
    .filter-reset-btn {
        width: 100% !important;
        margin-left: 0 !important;
        max-width: none !important;
    }
    
    .apply-button {
        height: 42px;
        font-size: 13px;
    }
    
    .separator {
        width: 60%;
        margin-left: 7.5%;
    }
    
    .performance-title {
        margin-left: 7.5%;
        font-size: 14px;
    }
    
    .performance-container {
        margin-left: 7.5%;
    }
    
    .performance-item span {
        font-size: 13px;
    }
    
    /* Заголовок */
    .subtitle-container {
        padding: 30px 80px;
        margin-top: -40px;
    }
    
    .subtitle-text {
        font-size: 1.4rem;
    }
    
    /* Поиск */
    .search-section {
        padding: 0 2% !important;
        margin-top: 15px !important;
        margin-bottom: 15px !important;
    }
    
    .search-container {
        padding: 0 !important;
        display: flex;
        align-items: stretch;
        height: 68px;
        background-color: #FAFAFA !important;
    }
    
    .search-input {
        height: 68px !important;
        font-size: 16px !important;
        padding: 0 20px !important;
        flex: 1;
        margin: 0 !important;
        border: none !important;
        background-color: #FAFAFA !important;
    }
    
    .search-input::placeholder {
        font-size: 16px !important;
    }
    
    .search-button {
        width: 68px !important;
        height: 68px !important;
        flex-shrink: 0;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .search-button svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    .compare-wrapper {
        width: 68px !important;
        height: 68px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0;
        margin: 0 !important;
        margin-left: 10px !important;
        padding: 0 !important;
    }
    
    .compare-icon {
        width: 68px !important;
        height: 68px !important;
    }
    
    .compare-counter {
        width: 24px !important;
        height: 24px !important;
        font-size: 12px !important;
        line-height: 24px !important;
        top: 2px !important;
        right: 2px !important;
    }
    
    /* Карточки - уменьшаем отступы и центрируем фото */
    .products-column .catalog-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
    }
    
    .products-column .catalog-card .product-image-container {
        height: 220px !important;
        min-height: 220px !important;
        max-height: 220px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        position: relative !important;
        flex-shrink: 0 !important;
        overflow: hidden !important;
        width: 100% !important;
    }
    
    .products-column .catalog-card .product-image-container .product-img,
    .products-column .catalog-card .product-image-container img.product-img {
        max-width: 90% !important;
        max-height: 90% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        margin: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        transform: none !important;
        display: block !important;
        position: static !important;
        padding: 0 !important;
    }
    
    .products-column .catalog-card .product-text-content {
        margin-top: 60px !important;
        margin-bottom: 15px !important;
        padding: 0 10px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
    }
    
    .products-column .catalog-card .product-text-content h3,
    .products-column .catalog-row .catalog-card .product-text-content h3 {
        font-family: 'Roboto', sans-serif !important;
        font-size: 15px !important;
        color: #333F48 !important;
        margin-top: 0 !important;
        margin-bottom: 3px !important;
        margin-block-start: 0 !important;
        margin-block-end: 0 !important;
        margin-inline-start: 0 !important;
        margin-inline-end: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        font-weight: bold !important;
        line-height: 1.4 !important;
        letter-spacing: 0.3px !important;
        display: block !important;
        unicode-bidi: isolate !important;
    }
    
    .products-column .catalog-card .product-text-content .product-feature {
        font-size: 13px !important;
        margin-top: 2px !important;
        margin-bottom: 2px !important;
        line-height: 1.5 !important;
        letter-spacing: 0.2px !important;
    }
    
    /* Лупа при скролле - двигаем правее */
    .site-header.scrolled .header-search {
        right: 10px !important;
    }
    
    /* Пункты меню при скролле - двигаем левее */
    .site-header.scrolled .nav-menu {
        transform: translateX(-20px);
        transition: transform 0.3s ease;
    }
    
    /* Для горизонтальных планшетов уменьшаем расстояние */
    .search-container .compare-wrapper {
        margin-left: 7px !important;
    }
    
    /* Footer-bottom - уменьшаем шрифт и двигаем правее */
    .footer-bottom {
        margin-left: 5% !important;
        transition: margin-left 0.3s ease;
    }
    
    .footer-copy,
    .footer-privacy {
        font-size: 12px !important;
    }
    
    /* Попап сравнения - адаптивная высота и без горизонтального скролла */
    .compare-popup .popup-content2 {
        height: auto !important;
        min-height: auto !important;
        max-height: 90vh !important;
        overflow-y: hidden !important;
        overflow-x: hidden !important;
        padding-bottom: 20px !important;
        position: relative;
    }
    
    .compare-popup {
        overflow-x: hidden !important;
        overflow-y: hidden !important;
    }
    
    .compare-popup .compare-characteristics {
        overflow-x: hidden !important;
        overflow-y: hidden !important;
    }
    
    .compare-popup .compare-products-container {
        overflow: visible !important;
        position: relative;
        z-index: 100;
    }
    
    /* Фото товаров поверх всех слоев и не обрезаются */
    .compare-popup .compare-product-1,
    .compare-popup .compare-product-2,
    .compare-popup .compare-product-3 {
        position: relative;
        z-index: 100 !important;
        overflow: visible !important;
    }
    
    /* ========== СТИЛИ ТОЛЬКО ДЛЯ ДВУХ ТОВАРОВ НА ГОРИЗОНТАЛЬНЫХ ПЛАНШЕТАХ ========== */
    /* Карточки для двух товаров - проверяем что article3-text пустой (нет текста) */
    .compare-popup:has(#article2-text):not(:has(#article3-text:not(:empty))) .compare-product-1,
    .compare-popup:has(#article2-text):not(:has(#article3-text:not(:empty))) .compare-product-1[style] {
        transform: translateX(260px) translateY(-240px) !important;
    }
    
    .compare-popup:has(#article2-text):not(:has(#article3-text:not(:empty))) .compare-product-2,
    .compare-popup:has(#article2-text):not(:has(#article3-text:not(:empty))) .compare-product-2[style] {
        transform: translateX(-10px) translateY(-240px) !important;
    }
    
    /* Альтернативный селектор - проверка ширины попапа (для двух товаров 850px) */
    .compare-popup .popup-content2[style*="width: 850px"] .compare-product-1,
    .compare-popup .popup-content2[style*="width: 850px"] .compare-product-1[style] {
        transform: translateX(260px) translateY(-240px) !important;
    }
    
    .compare-popup .popup-content2[style*="width: 850px"] .compare-product-2,
    .compare-popup .popup-content2[style*="width: 850px"] .compare-product-2[style] {
        transform: translateX(20px) translateY(-240px) !important;
    }
    
    /* Для трех товаров */
    .compare-popup:has(#article3-text) .compare-product-3 {
        transform: translateX(-15px) translateY(-240px) !important;
    }
    
    /* Первая карточка левее для трех товаров */
    .compare-popup:has(#article3-text) .compare-product-1 {
        transform: translateX(220px) translateY(-230px) !important;
    }
    
    /* Вторая карточка правее для трех товаров */
    .compare-popup:has(#article3-text) .compare-product-2 {
        transform: translateX(90px) translateY(-230px) !important;
    }
    
    /* Первый артикул для двух товаров на горизонтальных планшетах */
    .compare-popup:not(:has(#article3-text:not(:empty))) #article1-text,
    .compare-popup .popup-content2[style*="width: 850px"] #article1-text {
        left: 11% !important;
    }
    
    /* Первый артикул для трех товаров на горизонтальных планшетах */
    .compare-popup:has(#article3-text:not(:empty)) #article1-text,
    .compare-popup .popup-content2[style*="width: 1200px"] #article1-text {
        left: 6% !important;
    }
    
    /* Характеристики первого товара для трех товаров - сдвигаем немного правее */
    .compare-popup:has(#article3-text:not(:empty)) .characteristic-value[data-product-index="0"],
    .compare-popup .popup-content2[style*="width: 1200px"] .characteristic-value[data-product-index="0"] {
        position: relative !important;
        left: -0.5% !important;
    }
    
    /* Второй артикул левее для трех товаров */
    .compare-popup:has(#article3-text:not(:empty)) #article2-text,
    .compare-popup .popup-content2[style*="width: 1200px"] #article2-text {
        left: 33% !important;
    }
    
    /* Характеристики второго товара для трех товаров - сдвигаем чуть правее независимо */
    .compare-popup:has(#article3-text:not(:empty)) .characteristic-value[data-product-index="1"],
    .compare-popup .popup-content2[style*="width: 1200px"] .characteristic-value[data-product-index="1"] {
        position: relative !important;
        left: 30% !important;
    }
    
    /* Третий артикул левее для трех товаров */
    .compare-popup:has(#article3-text:not(:empty)) #article3-text,
    .compare-popup .popup-content2[style*="width: 1200px"] #article3-text {
        left: 77.5% !important;
    }
    
    /* Характеристики третьего товара для трех товаров - независимое позиционирование */
    .compare-popup:has(#article3-text:not(:empty)) .characteristic-value[data-product-index="2"],
    .compare-popup .popup-content2[style*="width: 1200px"] .characteristic-value[data-product-index="2"] {
        position: relative !important;
        left: -38.5% !important;
    }
    
    /* Второй артикул левее для двух товаров на горизонтальных планшетах */
    .compare-popup:has(#article2-text):not(:has(#article3-text:not(:empty))) #article2-text,
    .compare-popup .popup-content2[style*="width: 850px"] #article2-text {
        left: 360px !important;
    }
    
    /* Характеристики второго товара для двух товаров на горизонтальных планшетах */
    .compare-popup:has(#article2-text):not(:has(#article3-text:not(:empty))) .characteristic-value[data-product-index="1"],
    .compare-popup .popup-content2[style*="width: 850px"] .characteristic-value[data-product-index="1"] {
        margin-left: -70px !important;
    }
    
    /* Характеристики первого товара для двух товаров на горизонтальных планшетах */
    .compare-popup:has(#article2-text):not(:has(#article3-text:not(:empty))) .characteristic-value[data-product-index="0"],
    .compare-popup .popup-content2[style*="width: 850px"] .characteristic-value[data-product-index="0"] {
        padding-left: 15px !important;
    }
    
    /* Разделители для двух товаров на горизонтальных планшетах */
    /* Первый разделитель справа от слова "АРТИКУЛЫ" с отступом 15% */
    .compare-popup:has(#article2-text):not(:has(#article3-text:not(:empty))) .vertical-divider,
    .compare-popup .popup-content2[style*="width: 850px"] .vertical-divider {
        left: calc(30px + 110px + 15%) !important; /* margin-left слова (30px) + ширина слова "АРТИКУЛЫ" (~110px) + 15% отступ от ширины попапа */
    }
    
    .compare-popup:has(#article2-text):not(:has(#article3-text:not(:empty))) .vertical-divider1,
    .compare-popup .popup-content2[style*="width: 850px"] .vertical-divider1 {
        left: 65% !important;
    }
    
    /* Разделители для трех товаров на горизонтальных планшетах */
    /* Первый разделитель справа от слова "АРТИКУЛЫ" с отступом 10% */
    .compare-popup:has(#article3-text) .vertical-divider {
        left: calc(30px + 110px + 10%) !important; /* margin-left слова (30px) + ширина слова "АРТИКУЛЫ" (~110px) + 10% отступ от ширины попапа */
    }
    
    .compare-popup:has(#article3-text) .vertical-divider1 {
        left: 45% !important;
    }
    
    .compare-popup:has(#article3-text) .vertical-divider2 {
        left: 72% !important;
    }
    
    /* Характеристики первого товара для двух товаров на горизонтальных планшетах (как в зарядных устройствах) */
    .compare-popup:not(:has(#article3-text:not(:empty))) .characteristic-value[data-product-index="0"],
    .compare-popup .popup-content2[style*="width: 850px"] .characteristic-value[data-product-index="0"] {
        padding-left: 40px !important;
    }
    
    /* Характеристики второго товара для трех товаров на горизонтальных планшетах - независимое позиционирование */
    .compare-popup:has(#article3-text:not(:empty)) .characteristic-value[data-product-index="1"],
    .compare-popup .popup-content2[style*="width: 1200px"] .characteristic-value[data-product-index="1"] {
        position: relative !important;
        left: 33% !important;
    }
    
    /* Характеристики третьего товара для трех товаров на горизонтальных планшетах - независимое позиционирование */
    .compare-popup:has(#article3-text:not(:empty)) .characteristic-value[data-product-index="2"],
    .compare-popup .popup-content2[style*="width: 1200px"] .characteristic-value[data-product-index="2"] {
        position: relative !important;
        left: -37% !important;
    }
    
    /* Перенос "Максимальная производительность" на две строки */
    .compare-popup [data-characteristic="maximum_performance"] {
        line-height: 1.3 !important;
    }
}

/* 📱 СПЕЦИАЛЬНО ДЛЯ IPAD (1100px-1200px в ширину) - гарантируем 3 карточки в ряд */
@media (min-width: 1100px) and (max-width: 1200px) {
    .catalog-card {
        width: calc(33.333% - 10px) !important;
        flex: 0 0 calc(33.333% - 10px) !important;
        min-width: calc(33.333% - 10px) !important;
        max-width: calc(33.333% - 10px) !important;
    }
    
    .catalog-row {
        gap: 15px !important;
    }
    
    /* Для 1 или 2 карточек */
    .catalog-row:has(> .catalog-card:first-child:nth-last-child(1)) .catalog-card,
    .catalog-row:has(> .catalog-card:first-child:nth-last-child(2)) .catalog-card {
        width: calc(50% - 8px) !important;
        flex: 0 0 calc(50% - 8px) !important;
    }
}

/* 💻 НОУТБУКИ (1300px - 1599px) */
@media (min-width: 1300px) and (max-width: 1599px) {
    /* Уменьшаем отступ между лупой и кнопкой сравнения */
    .search-container .compare-wrapper {
        margin-left: 2px !important;
    }
    
    /* Кнопки фильтров по размеру как разделитель */
    .apply-button,
    .filter-apply-btn,
    .filter-reset-btn {
        width: 80% !important;
    }
    
    
    /* Попап сравнения для двух товаров - поднимаем картинки выше */
    .compare-popup .compare-product-1 {
        transform: translateX(260px) translateY(-250px) !important;
    }
    
    .compare-popup .compare-product-2 {
        transform: translateX(0px) translateY(-250px) !important;
    }
    
    /* Попап сравнения - адаптивная высота и без скроллов */
    .compare-popup .popup-content2 {
        height: auto !important;
        min-height: 400px !important;
        max-height: 90vh !important;
        overflow-y: hidden !important;
        overflow-x: hidden !important;
    }
    
    .compare-popup {
        overflow-x: hidden !important;
    }
    
    .compare-popup .compare-characteristics {
        overflow-x: hidden !important;
    }
    
    /* Вертикальные разделители адаптивные (высота устанавливается через JS) */
    .compare-popup .vertical-divider,
    .compare-popup .vertical-divider1,
    .compare-popup .vertical-divider2 {
        transition: none !important;
        /* Высота устанавливается через JS функцию updateVerticalDividersHeight() */
        /* JS устанавливает divider.style.height через inline стили, которые имеют приоритет над CSS */
        /* Базовые стили с height: 128% будут переопределены inline стилями от JS */
        /* Видимость разделителей управляется через JS (display устанавливается через inline стили) */
    }
    
    /* Первый артикул правее для двух товаров на ноутбуках */
    .compare-popup:not(:has(#article3-text)) #article1-text {
        left: 90px !important;
    }
    
    /* Второй артикул правее для двух товаров */
    .compare-popup #article2-text {
        left: 370px !important;
    }
    
    /* Второй артикул правее для трех товаров */
    .compare-popup:has(#article3-text) #article2-text {
        left: 439px !important;
    }
    
    /* ========== СТИЛИ ТОЛЬКО ДЛЯ ДВУХ ТОВАРОВ НА НОУТБУКАХ ========== */
    /* Характеристики первого товара для двух товаров - независимое позиционирование */
    .compare-popup:not(:has(#article3-text:not(:empty))) .characteristic-value[data-product-index="0"],
    .compare-popup:not(:has(#article3-text:not(:empty))) .characteristic-value[data-product-index="0"][style],
    .compare-popup .popup-content2[style*="width: 850px"] .characteristic-value[data-product-index="0"],
    .compare-popup .popup-content2[style*="width: 850px"] .characteristic-value[data-product-index="0"][style] {
        position: relative !important;
        left: 3% !important;
    }
    
    /* Характеристики второго товара для двух товаров - независимое позиционирование */
    .compare-popup:not(:has(#article3-text:not(:empty))) .characteristic-value[data-product-index="1"],
    .compare-popup:not(:has(#article3-text:not(:empty))) .characteristic-value[data-product-index="1"][style],
    .compare-popup .popup-content2[style*="width: 850px"] .characteristic-value[data-product-index="1"],
    .compare-popup .popup-content2[style*="width: 850px"] .characteristic-value[data-product-index="1"][style] {
        position: relative !important;
        left: -3% !important;
    }
    
    /* Первый артикул правее для трех товаров на ноутбуках */
    .compare-popup:has(#article3-text) #article1-text {
        left: 125px !important;
    }
    
    /* ========== СТИЛИ ТОЛЬКО ДЛЯ ТРЕХ ТОВАРОВ НА НОУТБУКАХ ========== */
    /* Характеристики первого товара правее для трех товаров на ноутбуках - оставляем как есть */
    .compare-popup:has(#article3-text) .characteristic-value[data-product-index="0"] {
        padding-left: 63px !important;
        margin-left: -10px !important;
    }
    
    /* Характеристики второго товара правее для трех товаров на ноутбуках - оставляем как есть */
    .compare-popup:has(#article3-text) .characteristic-value[data-product-index="1"] {
        padding-left: 30px !important;
        margin-left: -2px !important;
    }
    
    /* Характеристики третьего товара правее для трех товаров на ноутбуках - независимое позиционирование */
    .compare-popup:has(#article3-text:not(:empty)) .characteristic-value[data-product-index="2"],
    .compare-popup:has(#article3-text:not(:empty)) .characteristic-value[data-product-index="2"][style],
    .compare-popup .popup-content2[style*="width: 1200px"] .characteristic-value[data-product-index="2"],
    .compare-popup .popup-content2[style*="width: 1200px"] .characteristic-value[data-product-index="2"][style] {
        position: relative !important;
        padding-left: 55px !important;
        margin-left: -15px !important;
        left: -7% !important;
    }
    
    /* Третий артикул правее для трех товаров на ноутбуках */
    .compare-popup:has(#article3-text) #article3-text {
        left: 880px !important;
    }
    
    /* Контейнер для текста на ноутбуках */
    .product-text-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
        margin-top: 50% !important;
    }
}

/* Плавающая кнопка сравнения - КВАДРАТНАЯ */
.floating-compare {
    position: fixed;
    bottom: 30px;
    right: 30px;
    left: auto;
    z-index: 10000;
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.floating-compare.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.floating-compare-wrapper {
    position: relative;
    width: 60px;  /* Ширина квадрата */
    height: 60px; /* Высота квадрата */
    background: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid #00A9CE;
}

.floating-compare-wrapper:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
    background: #f8f8f8;
}

.floating-compare-icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.floating-compare-counter {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 24px;
    height: 24px;
    background-color: #D50032;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
    font-family: Roboto, sans-serif;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
    z-index: 10;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
    display: none;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .floating-compare {
        bottom: 20px;
        right: 20px;
        z-index: 10000;
    }
    
    .floating-compare-wrapper {
        width: 55px;  /* Квадрат для мобильных */
        height: 55px; /* Квадрат для мобильных */
        border-radius: 6px; /* Меньшие скругления на мобильных */
    }
    
    .floating-compare-icon {
        width: 24px;
        height: 24px;
    }
}

/* 🖥️ БОЛЬШИЕ ДЕСКТОПЫ (1600px и выше) */
@media (min-width: 1600px) {
    /* Уменьшаем отступ между лупой и кнопкой сравнения */
    .search-container .compare-wrapper {
        margin-left: 2px !important;
    }
    
    /* Подвигаем "Показать по:" и "Сортировка:" правее */
    .show-options {
        margin-left: 15.5% !important;
    }
    
    .sort-section {
        margin-left: 60.5% !important;
    }
    
    /* Кнопки фильтров по размеру как разделитель */
    .apply-button,
    .filter-apply-btn,
    .filter-reset-btn {
        width: 110% !important;
    }
    
    /* Попап сравнения для двух товаров - поднимаем картинки выше */
    .compare-popup .compare-product-1 {
        transform: translateX(260px) translateY(-250px) !important;
    }
    
 
    
    /* Попап сравнения - адаптивная высота и без скроллов */
    .compare-popup .popup-content2 {
        height: auto !important;
        min-height: 400px !important;
        max-height: 90vh !important;
        overflow-y: hidden !important;
        overflow-x: hidden !important;
    }
    
    .compare-popup {
        overflow-x: hidden !important;
    }
    
    .compare-popup .compare-characteristics {
        overflow-x: hidden !important;
    }
    
    /* Вертикальные разделители адаптивные (высота устанавливается через JS) */
    .compare-popup .vertical-divider,
    .compare-popup .vertical-divider1,
    .compare-popup .vertical-divider2 {
        transition: none !important;
        /* Высота устанавливается через JS функцию updateVerticalDividersHeight() */
        /* JS устанавливает divider.style.height через inline стили, которые имеют приоритет над CSS */
        /* Базовые стили с height: 128% будут переопределены inline стилями от JS */
        /* Видимость разделителей управляется через JS (display устанавливается через inline стили) */
    }
    
    /* Первый артикул правее для двух товаров на десктопах */
    .compare-popup:not(:has(#article3-text)) #article1-text {
        left: 90px !important;
    }
    
    /* Второй артикул правее для двух товаров */
    .compare-popup #article2-text {
        left: 370px !important;
    }
    
    /* Второй артикул правее для трех товаров */
    .compare-popup:has(#article3-text) #article2-text {
        left: 439px !important;
    }
    
    /* Характеристики первого товара для двух товаров на десктопах - независимое позиционирование */
    .compare-popup:not(:has(#article3-text:not(:empty))) .characteristic-value[data-product-index="0"],
    .compare-popup .popup-content2[style*="width: 850px"] .characteristic-value[data-product-index="0"] {
        position: relative !important;
        left: 3% !important;
    }
    
    /* Характеристики второго товара для двух товаров на десктопах - независимое позиционирование */
    .compare-popup:not(:has(#article3-text:not(:empty))) .characteristic-value[data-product-index="1"],
    .compare-popup .popup-content2[style*="width: 850px"] .characteristic-value[data-product-index="1"] {
        position: relative !important;
        left: -3% !important;
    }
    
    /* Характеристики второго товара для трех товаров */
    .compare-popup:has(#article3-text) .characteristic-value[data-product-index="1"] {
        padding-left: 0px !important;
        margin-left: -25px !important;
    }
    
    /* Первый артикул правее для трех товаров на десктопах */
    .compare-popup:has(#article3-text) #article1-text {
        left: 125px !important;
    }
    
    /* Характеристики первого товара правее для трех товаров на десктопах */
    .compare-popup:has(#article3-text) .characteristic-value[data-product-index="0"] {
        padding-left: 63px !important;
        margin-left: -10px !important;
    }
    
    /* Характеристики второго товара правее для трех товаров на десктопах */
    .compare-popup:has(#article3-text) .characteristic-value[data-product-index="1"] {
        padding-left: 30px !important;
        margin-left: -2px !important;
    }
    
    /* Характеристики третьего товара правее для трех товаров на десктопах - независимое позиционирование */
    .compare-popup:has(#article3-text:not(:empty)) .characteristic-value[data-product-index="2"],
    .compare-popup:has(#article3-text:not(:empty)) .characteristic-value[data-product-index="2"][style],
    .compare-popup .popup-content2[style*="width: 1200px"] .characteristic-value[data-product-index="2"],
    .compare-popup .popup-content2[style*="width: 1200px"] .characteristic-value[data-product-index="2"][style] {
        position: relative !important;
        padding-left: 55px !important;
        margin-left: -15px !important;
        left: -7% !important;
    }
    
    /* Третий артикул правее для трех товаров на десктопах */
    .compare-popup:has(#article3-text) #article3-text {
        left: 880px !important;
    }
    
    /* Футер чуть левее на десктопах */
    .footer-bottom {
        left: -33% !important;
    }
}

/* Плавающая кнопка сравнения - КВАДРАТНАЯ */
.floating-compare {
    position: fixed;
    bottom: 30px;
    right: 30px;
    left: auto;
    z-index: 10000;
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.floating-compare.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.floating-compare-wrapper {
    position: relative;
    width: 60px;  /* Ширина квадрата */
    height: 60px; /* Высота квадрата */
    background: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid #00A9CE;
}

.floating-compare-wrapper:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
    background: #f8f8f8;
}

.floating-compare-icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.floating-compare-counter {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 24px;
    height: 24px;
    background-color: #D50032;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
    font-family: Roboto, sans-serif;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
    z-index: 10;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
    display: none;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .floating-compare {
        bottom: 20px;
        right: 20px;
        z-index: 10000;
    }
    
    .floating-compare-wrapper {
        width: 55px;  /* Квадрат для мобильных */
        height: 55px; /* Квадрат для мобильных */
        border-radius: 6px; /* Меньшие скругления на мобильных */
    }
    
    .floating-compare-icon {
        width: 24px;
        height: 24px;
    }
}