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


/* Исправление для body */
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Фикс для шапки */
.site-header {
    margin: 0;
    padding: 0;
    width: 100%;
    position: relative;

}

.site-header.scrolled {
    margin: 0;
    padding: 0;
}
.breadcrumbs {
    padding: 20px 5%;
    margin-top: 20px;
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 14px;
}

.breadcrumbs a {
    color: #7A7A7A;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 12px;
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
}

.breadcrumbs a:hover {
    color: #333F48;
}

.breadcrumbs span.current {
    color: #333F48;
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 12px;
}

/* Убираем заглавные буквы в хлебных крошках */
.breadcrumbs a, .breadcrumbs span {
    text-transform: none;
}

.breadcrumbs .separator {
    margin: 0 5px;
    color: #7A7A7A;
}

/* Начало текста про политику */
.materials_text {
    font-family: 'Roboto', sans-serif;
    font-size: 30px;
    color: #333F48;
    margin-top: 20px; /* Отступ сверху */
    margin-bottom: 20px; /* Отступ снизу */
    text-align: left; 
    padding-left: 5%; 
}

/* Стили для секции материалов */
.materials-menu {
    padding-left: 5%;
    margin-top: 30px;

}

.materials-menu a {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #333F48;
    margin-bottom: 10px;
    text-decoration: none;
    transition: color 0.3s ease;
   
}

.materials-menu a:hover {
    color: #00A9CE;
}

.materials-menu a.active {
    color: #00A9CE; /* Цвет активного пункта */
}

.menu-item {
    font-weight: 700 !important; /* или 400 для обычного веса */
}

/* Линия-разделитель */
.separator-line {
    width: 20%;
    height: 0.5px;
    background-color: #D9D9D9;
    margin: 15px 0;
}

/* Стили для отображаемой надписи */
.page-title {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;  /* Жирный шрифт */
    font-size: 20px;    /* Размер шрифта */
    color: #333F48;
    position: relative;
    left: 30%;          /* Отступ от левой стороны */
    margin-top: -345px;   /* Отступ сверху */
}

/* Стили для информации о презентации */
.presentation-info {
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 16px;
    color: #333F48;
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
    padding-left: 30%;
    padding-right: 5%;
}

.presentation-text {
    font-weight: normal;
    transition: color 0.3s ease, border-bottom 0.3s ease; /* Плавное изменение цвета и подчеркивания */
}

/* Подчеркивание и изменение цвета при наведении */
.pdf-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333F48; /* Цвет текста по умолчанию */
}

.pdf-link:hover .presentation-text {
    border-bottom: 1px solid #00A9CE;  /* Подчеркивание при наведении */
    color: #00A9CE; /* Изменение цвета текста при наведении */
}

/* Стили для изображения */
.image-container {
    margin-top: 20px; /* Небольшой отступ сверху */
    position: relative;
    left: 30%;
}

.image {
    width: 1002px; /* Ширина изображения */
    height: 564px; /* Высота изображения */
}

.image_1 {
    width: 1002px; /* Ширина изображения */
    height: 564px; /* Высота изображения */
    margin-bottom: 50px;
}

/* Разделительная полоса */
.separator-line_1 {
    width: 52.5%;          /* Длина линии 50% от ширины экрана */
    height: 0.5px;       /* Толщина линии */
    background-color: #D9D9D9; /* Цвет линии */
    margin: 40px 0;      /* Отступ сверху и снизу */
    position: relative;
    left: 30%;           /* Отступ слева 30% */
}

.presentation-info_1 {
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 16px;
    color: #333F48;
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    padding-left: 20%;
    padding-right: 5%;
    margin-bottom: 40px; /* Добавленный отступ снизу */
}

/* Скрываем по умолчанию */
.mobile-materials-dropdown {
  display: none;
}

/* Показываем только на мобильных */
@media (max-width: 768px) {
  .materials-menu {
    display: none;
  }

  .accordion-menu {
    display: none;
  }

  .mobile-materials-dropdown {
    display: block;
    margin: 0 5%;
    font-family: 'Roboto', sans-serif;
  }

  .dropdown-header {
    padding: 12px 15px;
    padding-left: 0;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border: none;
    outline: none;
  }

  .dropdown-arrow {
    font-size: 16px;
    content: '✓';
    color: #00A9CE ;
    transition: color 0.3s ease;
  }

  .dropdown-header.active .dropdown-arrow {
    color: #00A9CE;
  }

  /* ✅ Подсветка текста выбранного пункта */
  #dropdownSelected {
    color: #00A9CE !important;
    transition: color 0.3s ease;
  }

  .dropdown-list {
    display: none;
    border: 1px solid #ccc;
    border-top: none;
  }

  .dropdown-item {
    padding: 12px 15px;
    background-color: #fff;
    border-top: 1px solid #eee;
    cursor: pointer;
    color: #000;
    transition: color 0.3s ease;
  }

  .dropdown-item:hover {
    background-color: #f5f5f5;
  }

  .dropdown-item.active {
    color: #00A9CE;
    font-weight: normal;
  }

  .page-title {
    font-size: 18px;
    margin: 20px 5% 10px 5%;
    position: static;
    width: auto;
    left: auto !important;
  }

  .presentation-info {
    display: none !important;
    flex-direction: column;
    justify-content: initial !important;
    align-items: initial !important;
    font-size: 15px;
    margin: 20px 5% 0 5% !important;
    padding: 0 !important;
    width: auto;
  }

  .pdf-link {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
    text-align: left;
  }

  .image-container {
    width: 90% !important;
    left: auto !important;
    margin: 20px 5% !important;
    padding: 0 !important;
    display: none;
  }

  .image {
    width: 100%;
    height: auto;
  }

  .separator-line_1 {
    display: none !important;
    width: 90% !important;
    left: auto !important;
    margin: 30px 5% !important;
  }
  
  .separator-line_2 {
    width: 99% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 30px !important;
    margin-bottom: 30px !important;
    height: 1px;
    background-color: #ccc;
    display: block;
  }

  .presentation-info_1 {
    display: none !important;
    font-size: 15px;
    margin: 20px 5% !important;
    padding: 0 !important;
    width: auto;
  }

  .presentation-info_2 {
    font-size: 15px;
    margin: 20px 5% !important;
    padding: 0 !important;
    width: auto;
  }

  .separator-line_1,
  .image-container {
    margin-left: 5%;
    margin-right: 5%;
  }

  .presentation-text {
    display: block;
    margin: 0;
    padding: 0;
  }

  /* Показываем только для "О БРЕНДЕ" */
  .show-on-brand {
    display: block !important;
  }

  .show-on-brand-flex {
    display: flex !important;
  }
}



.image {
    max-width: 100%;
    height: auto;
    display: block;
    pointer-events: none; /* <- важно */
    z-index: 0;
}

/* Стили для секции материалов */
.materials-menu {
    padding-left: 5%;
    margin-top: 30px;
}

/* Делаем пункты меню поверх других элементов */
.materials-menu a.menu-item {
    position: relative;
    z-index: 1000;
    display: inline-block;
}

.print-materials .presentation-info:last-child {
    margin-bottom: 30px; /* отступ снизу для последнего элемента */
}

/* Для печатных материалов тоже уменьшаем отступ */
.print-materials .presentation-info {
    padding-left: 29.5%; /* Меняем с 30% на 25% */
}

/* Для каталога PDF тоже */
.catalog-pdf .presentation-info {
    padding-left: 29.5%; /* Меняем с 30% на 25% */
}

.presentation-info {
    padding-left: 29.5%;
}

.presentation-image {
    width: 1200px; /* Фиксированная ширина */
    height: auto; /* Высота автоматически по пропорциям */
    object-fit: contain;
    margin-right: 10px;
    border-radius: 4px;
    vertical-align: middle;
    margin-bottom: 30px;
}

/* Для ноутбуков */
@media (min-width: 1280px) and (max-width: 1536px) {
    .presentation-image {
        width: 100%; /* Немного уменьшаем процент */
    }
}

/* Адаптация для горизонтальных планшетов - делаем картинки адаптивными */
@media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) {
    /* Опускаем поисковую строку ниже от шапки */
    html body .search-section {
        padding-top: 100px !important; /* Увеличиваем верхний padding, чтобы опустить ниже */
    }
    
    .presentation-image {
        width: 100% !important; /* Адаптивная ширина под экран */
        max-width: 100% !important; /* Максимальная ширина 100% */
        height: auto !important; /* Высота автоматически по пропорциям */
        object-fit: contain !important; /* Сохраняем пропорции */
    }
    
    /* Адаптация контейнеров для картинок в печатных материалах - только ширина, позиционирование сохраняем */
    .print-materials .image-container {
        width: calc(70% - 5%) !important; /* Ширина с учетом left: 30% и отступа справа */
        max-width: calc(70% - 5%) !important;
    }
    
    /* Адаптивность для картинок буклетов - только размер, позиционирование не меняем */
    .print-materials .image,
    .print-materials .image_1 {
        width: 100% !important; /* Адаптивная ширина под экран */
        max-width: 100% !important; /* Максимальная ширина 100% */
        height: auto !important; /* Высота автоматически по пропорциям */
        object-fit: contain !important; /* Сохраняем пропорции */
    }
}

.pdf-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    padding: 10px;
    transition: background-color 0.3s ease;
}

.pdf-link:hover {
    background-color: #f5f5f5;
    border-radius: 4px;
}

/* Поиск в шапке при скролле */
.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;
    gap: 8px;
}

.header-search-input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-size: 14px;
    padding: 5px;
    color: #333F48;
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
}

.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;
    transition: transform 0.2s ease;
}

.header-search-button:hover {
    transform: scale(1.1);
}

/* Шапка при скролле */
.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);
    }
}

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

.compare-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 799px;
    height: 646px;
    transform: translate(-50%, -50%);
    background-color: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    border-radius: 10px;
}

.compare-popup-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.compare-popup-text {
    font-size: 30px;
    color: #000;
    text-align: center;
    padding: 20px;
}

.compare-popup-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
}

.compare-popup-close:hover {
    color: #000;
}

.chargers-section {
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 16px;
    color: #333F48;
    margin-top: 15px;
    padding-left: 30%;
    padding-right: 5%;
    margin-bottom: 40px;
}

.chargers-title {
    font-weight: normal; /* Убрали жирный */
    margin-bottom: 15px; /* Отступ снизу для PDF файлов */
    
}

.pdf-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pdf-links .pdf-link {
    color: #333F48;
    text-decoration: none;
    transition: color 0.3s ease;
    padding: 5px 0;
}

.pdf-links .pdf-link:hover,
.pdf-links .pdf-link:active,
.pdf-links .pdf-link:focus {
    color: #00A9CE;
    text-decoration: underline;
}

.separator-line_3 {
    width: 100%;
    margin-top: 30px;
    margin-bottom: 30px;
    height: 1px;
    background-color: #ccc;
    display: block;
}

/* Стили для вертикального расположения новостей */
.news-section-vertical {
    background-color: #f2f2f2; /* Серый фон как в других разделах */
    padding: 20px 0 30px 0; /* Уменьшил верхний отступ, увеличил нижний */
    width: 100%;
    display: none;
    margin-top: 10px; /* Поднимаем блок выше */
}

.news-container-vertical {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5% 0 28%; /* Смещаем вправо - левый отступ 30% */
}

.news-heading-vertical {
    font-family: 'Roboto', sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #333F48;
    margin-bottom: 40px;
    text-align: left;
    margin-top: -10px; /* Поднимаем заголовок выше */
}

.news-list-vertical {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-left: 0; /* Убираем лишние отступы */
}

.news-card-vertical {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    padding: 20px;
    gap: 30px;
    margin-left: 0; /* Убираем лишние отступы */
}

.news-card-vertical:hover {
    transform: scale(1.02); /* Карточка чуть увеличивается */
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

.news-image-container-vertical {
    flex: 0 0 300px;
    height: 200px;
    overflow: hidden;
    border-radius: 4px;
}

.news-image-vertical {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-content-vertical {
    flex: 1;
    padding: 0;
}

.news-title-vertical {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.4;
}

.news-text-vertical {
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 16px;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.5;
}

.news-read-more-vertical {
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 16px;
    color: #00a9ce;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: color 0.3s ease;
}

.news-read-more-vertical:hover {
    color: #007c9b;
}

.news-read-more-vertical::after {
    content: "→";
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.news-read-more-vertical:hover::after {
    transform: translateX(3px);
}

/* Адаптация для вертикальных планшетов - подвинуть правее под заголовок */
/* Медиа-запрос для вертикальных планшетов - такой же как в политике конфиденциальности */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    /* Отступ сверху для body, чтобы контент не перекрывался шапкой */
    html body {
        padding-top: 100px !important; /* Высота шапки */
    }
    
    /* Поднимаем поисковую строку ближе к шапке */
    html body .search-section {
        padding-top: 20px !important; /* Уменьшаем верхний padding, чтобы поднять выше */
    }
    
    /* Адаптация заголовка для вертикальных планшетов - опускаем немного ниже */
    html body .page-title {
        left: 28% !important; /* Выравниваем заголовок */
        margin-top: -320px !important; /* Опускаем немного ниже (было -345px) */
    }
    
    /* Адаптация "О бренде" - выравниваем под заголовок */
    html body #about-brand.presentation-info {
        padding-left: 28% !important; /* Выравниваем под заголовок */
        padding-right: 5% !important;
        padding-bottom: 60px !important; /* Отступ снизу, чтобы футер не поднимался под картинку */
        flex-direction: column !important; /* Вертикальное расположение */
        align-items: flex-start !important; /* Выравнивание по левому краю */
        position: relative; /* Для позиционирования картинки */
    }
    
    /* Картинка под текстом "Презентация о бренде TIREI" - такая же адаптация как у печатных материалов */
    html body #about-brand .presentation-image {
        width: 100% !important; /* Адаптивная ширина 100% внутри контейнера, как у картинок в печатных материалах */
        max-width: 100% !important; /* Максимальная ширина 100% */
        height: auto !important; /* Высота автоматически по пропорциям */
        object-fit: contain !important; /* Сохраняем пропорции, как у печатных материалов */
        margin-left: 0 !important; /* Убираем отступ слева */
        margin-right: 0 !important;
        margin-top: 15px !important; /* Отступ сверху после текста */
        margin-bottom: 30px !important; /* Отступ снизу после картинки */
        display: block; /* Блочный элемент */
    }
    
    /* Адаптация "Каталог PDF" - выравниваем под заголовок */
    html body .catalog-pdf {
        padding-bottom: 40px !important; /* Отступ снизу, чтобы футер не уезжал вверх */
    }
    
    html body .catalog-pdf .presentation-info {
        padding-left: 28% !important; /* Выравниваем под заголовок */
        padding-right: 5% !important;
    }
    
    /* Отступ снизу после последнего разделителя для сертификатов и инструкций */
    html body #guarantee-certificates .chargers-section:last-child .separator-line_3,
    html body #instructions .chargers-section:last-child .separator-line_3 {
        margin-bottom: 60px !important; /* Увеличиваем отступ снизу */
    }
    
    /* Адаптация сертификатов - выравниваем под заголовок */
    html body #guarantee-certificates.presentation-info {
        padding-left: 28% !important; /* Выравниваем контейнер сертификатов под заголовок */
        padding-right: 5% !important;
    }
    
    html body #guarantee-certificates .chargers-section {
        padding-left: 0 !important; /* Убираем отступ, так как контейнер уже выровнен */
        padding-right: 0 !important;
    }
    
    /* Адаптация инструкций - выравниваем под заголовок */
    html body #instructions {
        padding-bottom: 80px !important; /* Увеличиваем отступ снизу, чтобы картинка не наезжала на футер */
    }
    
    html body #instructions .chargers-section {
        padding-left: 28% !important; /* Выравниваем под заголовок */
        padding-right: 5% !important;
    }
    
    /* Дополнительный отступ для последнего элемента в инструкциях */
    html body #instructions .chargers-section:last-child {
        margin-bottom: 40px !important; /* Отступ снизу после последнего раздела */
    }
    
    /* Адаптация печатных материалов - выравниваем под заголовок */
    html body .print-materials {
        padding-bottom: 40px !important; /* Отступ снизу */
    }
    
    html body .print-materials .presentation-info {
        padding-left: 28% !important; /* Выравниваем под заголовок */
        padding-right: 5% !important;
    }
    
    html body .print-materials .image-container {
        width: calc(72% - 5%) !important; /* Ширина с учетом left: 28% и отступа справа */
        max-width: calc(72% - 5%) !important;
        left: 28% !important; /* Выравниваем под заголовок */
        margin-left: 0 !important;
        padding: 0 !important;
    }
    
    html body .print-materials .separator-line_1 {
        width: calc(72% - 5%) !important; /* Ширина с учетом left: 28% и отступа справа */
        left: 28% !important; /* Выравниваем под заголовок */
        margin: 40px 0 !important;
    }
    
    /* Адаптация картинок для вертикальных планшетов */
    html body .print-materials .image,
    html body .print-materials .image_1 {
        width: 100% !important; /* Адаптивная ширина под экран */
        max-width: 100% !important; /* Максимальная ширина 100% */
        height: auto !important; /* Высота автоматически по пропорциям */
        object-fit: contain !important; /* Сохраняем пропорции */
    }
    
    /* Адаптация новостей - выравниваем под заголовок "Новости" */
    html body .news-section-vertical {
        padding-bottom: 80px !important; /* Увеличиваем отступ снизу для последнего пункта меню */
        margin-bottom: 40px !important; /* Дополнительный отступ снизу */
    }
    
    html body .news-container-vertical {
        padding: 0 5% 0 28% !important; /* Выравниваем под заголовок */
    }
    
    html body .news-card-vertical {
        flex-direction: row !important; /* Оставляем горизонтальное расположение */
        align-items: center;
        gap: 20px;
    }
    
    html body .news-image-container-vertical {
        flex: 0 0 250px !important; /* Уменьшаем размер картинки */
        height: 180px !important;
        overflow: hidden;
    }
    
    html body .news-image-vertical {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important; /* Чтобы картинка полностью влезала */
    }
    
    html body .news-title-vertical {
        font-size: 16px !important; /* Уменьшаем размер шрифта */
        text-align: left !important; /* Выравнивание текста слева */
    }
    
    html body .news-text-vertical {
        font-size: 13px !important; /* Уменьшаем размер шрифта */
        text-align: left !important; /* Выравнивание текста слева */
    }
    
    html body .news-content-vertical {
        text-align: left !important; /* Выравнивание всего контента слева */
    }
    
    /* Прижимаем футер к низу экрана */
    html body {
        display: flex !important;
        flex-direction: column !important;
        min-height: 100vh !important;
    }
    
    html body .site-footer {
        height: auto !important; /* Автоматическая высота */
        min-height: auto !important; /* Убираем минимальную высоту */
        padding: 10px 0 0 0 !important; /* Минимальный верхний отступ, нижний убран */
        margin-bottom: 0 !important; /* Убираем нижний отступ */
        margin-top: auto !important; /* Прижимаем футер к низу через flex */
    }
    
    /* Уменьшаем отступы снизу у контента, чтобы футер поднялся выше */
    html body #about-brand.presentation-info {
        padding-bottom: 30px !important; /* Уменьшаем отступ снизу (было 60px) */
    }
    
    html body .catalog-pdf {
        padding-bottom: 20px !important; /* Уменьшаем отступ снизу (было 40px) */
    }
    
    html body #instructions {
        padding-bottom: 40px !important; /* Уменьшаем отступ снизу (было 80px) */
    }
    
    html body .print-materials {
        padding-bottom: 20px !important; /* Уменьшаем отступ снизу (было 40px) */
    }
    
    html body .news-section-vertical {
        padding-bottom: 40px !important; /* Уменьшаем отступ снизу (было 80px) */
        margin-bottom: 0 !important; /* Убираем дополнительный отступ */
    }
}

/* Дополнительный медиа-запрос для вертикальных планшетов без ориентации (на случай если ориентация не определяется) */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Отступ сверху для body, чтобы контент не перекрывался шапкой */
    html body {
        padding-top: 100px !important; /* Высота шапки */
    }
    
    /* Поднимаем поисковую строку ближе к шапке */
    html body .search-section {
        padding-top: 20px !important; /* Уменьшаем верхний padding, чтобы поднять выше */
    }
    
    /* Адаптация заголовка для вертикальных планшетов - опускаем немного ниже */
    html body .page-title {
        left: 28% !important; /* Выравниваем заголовок */
        margin-top: -320px !important; /* Опускаем немного ниже (было -345px) */
    }
    
    /* Адаптация "О бренде" - выравниваем под заголовок */
    html body #about-brand.presentation-info {
        padding-left: 28% !important; /* Выравниваем под заголовок */
        padding-right: 5% !important;
        padding-bottom: 60px !important; /* Отступ снизу, чтобы футер не поднимался под картинку */
        flex-direction: column !important; /* Вертикальное расположение */
        align-items: flex-start !important; /* Выравнивание по левому краю */
        position: relative; /* Для позиционирования картинки */
    }
    
    /* Картинка под текстом "Презентация о бренде TIREI" - такая же адаптация как у печатных материалов */
    html body #about-brand .presentation-image {
        width: 100% !important; /* Адаптивная ширина 100% внутри контейнера, как у картинок в печатных материалах */
        max-width: 100% !important; /* Максимальная ширина 100% */
        height: auto !important; /* Высота автоматически по пропорциям */
        object-fit: contain !important; /* Сохраняем пропорции, как у печатных материалов */
        margin-left: 0 !important; /* Убираем отступ слева */
        margin-right: 0 !important;
        margin-top: 15px !important; /* Отступ сверху после текста */
        margin-bottom: 30px !important; /* Отступ снизу после картинки */
        display: block; /* Блочный элемент */
    }
    
    /* Адаптация "Каталог PDF" - выравниваем под заголовок */
    html body .catalog-pdf {
        padding-bottom: 40px !important; /* Отступ снизу, чтобы футер не уезжал вверх */
    }
    
    html body .catalog-pdf .presentation-info {
        padding-left: 28% !important; /* Выравниваем под заголовок */
        padding-right: 5% !important;
    }
    
    /* Отступ снизу после последнего разделителя для сертификатов и инструкций */
    html body #guarantee-certificates .chargers-section:last-child .separator-line_3,
    html body #instructions .chargers-section:last-child .separator-line_3 {
        margin-bottom: 60px !important; /* Увеличиваем отступ снизу */
    }
    
    /* Адаптация сертификатов - выравниваем под заголовок */
    html body #guarantee-certificates.presentation-info {
        padding-left: 28% !important; /* Выравниваем контейнер сертификатов под заголовок */
        padding-right: 5% !important;
    }
    
    html body #guarantee-certificates .chargers-section {
        padding-left: 0 !important; /* Убираем отступ, так как контейнер уже выровнен */
        padding-right: 0 !important;
    }
    
    /* Адаптация инструкций - выравниваем под заголовок */
    html body #instructions {
        padding-bottom: 80px !important; /* Увеличиваем отступ снизу, чтобы картинка не наезжала на футер */
    }
    
    html body #instructions .chargers-section {
        padding-left: 28% !important; /* Выравниваем под заголовок */
        padding-right: 5% !important;
    }
    
    /* Дополнительный отступ для последнего элемента в инструкциях */
    html body #instructions .chargers-section:last-child {
        margin-bottom: 40px !important; /* Отступ снизу после последнего раздела */
    }
    
    /* Адаптация печатных материалов - выравниваем под заголовок */
    html body .print-materials {
        padding-bottom: 40px !important; /* Отступ снизу */
    }
    
    html body .print-materials .presentation-info {
        padding-left: 28% !important; /* Выравниваем под заголовок */
        padding-right: 5% !important;
    }
    
    html body .print-materials .image-container {
        width: calc(72% - 5%) !important; /* Ширина с учетом left: 28% и отступа справа */
        max-width: calc(72% - 5%) !important;
        left: 28% !important; /* Выравниваем под заголовок */
        margin-left: 0 !important;
        padding: 0 !important;
    }
    
    html body .print-materials .separator-line_1 {
        width: calc(72% - 5%) !important; /* Ширина с учетом left: 28% и отступа справа */
        left: 28% !important; /* Выравниваем под заголовок */
        margin: 40px 0 !important;
    }
    
    /* Адаптация картинок для вертикальных планшетов */
    html body .print-materials .image,
    html body .print-materials .image_1 {
        width: 100% !important; /* Адаптивная ширина под экран */
        max-width: 100% !important; /* Максимальная ширина 100% */
        height: auto !important; /* Высота автоматически по пропорциям */
        object-fit: contain !important; /* Сохраняем пропорции */
    }
    
    /* Адаптация новостей - выравниваем под заголовок "Новости" */
    html body .news-section-vertical {
        padding-bottom: 80px !important; /* Увеличиваем отступ снизу для последнего пункта меню */
        margin-bottom: 40px !important; /* Дополнительный отступ снизу */
    }
    
    html body .news-container-vertical {
        padding: 0 5% 0 28% !important; /* Выравниваем под заголовок */
    }
    
    html body .news-card-vertical {
        flex-direction: row !important; /* Оставляем горизонтальное расположение */
        align-items: center;
        gap: 20px;
    }
    
    html body .news-image-container-vertical {
        flex: 0 0 250px !important; /* Уменьшаем размер картинки */
        height: 180px !important;
        overflow: hidden;
    }
    
    html body .news-image-vertical {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important; /* Чтобы картинка полностью влезала */
    }
    
    html body .news-title-vertical {
        font-size: 16px !important; /* Уменьшаем размер шрифта */
        text-align: left !important; /* Выравнивание текста слева */
    }
    
    html body .news-text-vertical {
        font-size: 13px !important; /* Уменьшаем размер шрифта */
        text-align: left !important; /* Выравнивание текста слева */
    }
    
    html body .news-content-vertical {
        text-align: left !important; /* Выравнивание всего контента слева */
    }
    
    /* Прижимаем футер к низу экрана */
    html body {
        display: flex !important;
        flex-direction: column !important;
        min-height: 100vh !important;
    }
    
    html body .site-footer {
        height: auto !important; /* Автоматическая высота */
        min-height: auto !important; /* Убираем минимальную высоту */
        padding: 10px 0 0 0 !important; /* Минимальный верхний отступ, нижний убран */
        margin-bottom: 0 !important; /* Убираем нижний отступ */
        margin-top: auto !important; /* Прижимаем футер к низу через flex */
    }
}

/* Адаптация для горизонтальных планшетов - подвинуть правее под заголовок */
@media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) {
    .news-container-vertical {
        padding: 0 5% 0 20% !important; /* Смещаем вправо под заголовок */
    }
    
    .news-card-vertical {
        flex-direction: row !important; /* Оставляем горизонтальное расположение */
        align-items: center;
        gap: 25px;
    }
    
    .news-image-container-vertical {
        flex: 0 0 280px !important; /* Размер картинки */
        height: 200px !important;
        overflow: hidden;
    }
    
    .news-image-vertical {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important; /* Чтобы картинка полностью влезала */
    }
}

/* Адаптация для ноутбуков и десктопов - подвинуть правее под заголовок */
@media (min-width: 1025px) {
    /* Опускаем поисковую строку ниже от шапки */
    html body .search-section {
        padding-top: 100px !important; /* Увеличиваем верхний padding, чтобы опустить ниже */
    }
    
    .news-container-vertical {
        padding: 0 5% 0 28% !important; /* Смещаем вправо под заголовок "Новости" */
    }
    
    .news-image-vertical {
        object-fit: contain !important; /* Чтобы картинка полностью влезала */
    }
}

/* Сдвигаем новости левее только на очень больших десктопах (не ноутбуки) */
@media (min-width: 1920px) {
    .news-container-vertical {
        padding-left: 20% !important; /* Сдвигаем левее на больших десктопах */
    }
}

/* Адаптация для планшетов (общий запрос) */
@media (max-width: 992px) {
    .news-container-vertical {
        padding: 0 10% 0 10%; /* Уменьшаем отступы для планшетов */
    }
    
    .news-card-vertical {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .news-image-container-vertical {
        flex: 0 0 auto;
        width: 100%;
        max-width: 400px;
        height: auto !important; /* Автоматическая высота */
    }
    
    .news-image-vertical {
        object-fit: contain !important; /* Чтобы картинка полностью влезала */
    }
    
    .news-content-vertical {
        width: 100%;
    }
}

/* Адаптация для вертикальных телефонов */
@media (max-width: 768px) and (orientation: portrait) {
    /* Отступ сверху для поисковой строки от шапки на мобильных */
    html body .search-section {
        padding-top: 100px !important; /* Отступ от шапки */
    }
    
    .news-section-vertical {
        padding: 20px 0 40px 0;
        margin-top: -10px;
    }
    
    .news-container-vertical {
        padding: 0 20px; /* На мобильных убираем смещение вправо */
    }
    
    .news-heading-vertical {
        font-size: 24px;
        margin-bottom: 30px;
        margin-top: 0;
    }
    
    .news-card-vertical {
        padding: 15px;
        gap: 15px;
        flex-direction: column;
    }
    
    .news-image-container-vertical {
        width: 100% !important;
        height: auto !important;
        max-height: 200px;
    }
    
    .news-image-vertical {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important; /* Чтобы картинка полностью влезала */
    }
    
    .news-title-vertical {
        font-size: 18px;
    }
    
    .news-text-vertical {
        font-size: 14px;
    }
    
    .news-read-more-vertical {
        font-size: 14px;
    }
}

/* Адаптация для горизонтальных телефонов */
@media (max-width: 768px) and (orientation: landscape) {
    .news-section-vertical {
        padding: 20px 0 40px 0;
        margin-top: -10px;
    }
    
    .news-container-vertical {
        padding: 0 15px;
    }
    
    .news-card-vertical {
        padding: 12px;
        gap: 12px;
        flex-direction: row;
    }
    
    .news-image-container-vertical {
        flex: 0 0 200px !important;
        height: 120px !important;
    }
    
    .news-image-vertical {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important; /* Чтобы картинка полностью влезала */
    }
    
    .news-title-vertical {
        font-size: 16px;
    }
    
    .news-text-vertical {
        font-size: 12px;
    }
    
    .news-read-more-vertical {
        font-size: 12px;
    }
}

/* Специальные стили для маленьких мобильных устройств */
@media (max-width: 480px) {
    .news-container-vertical {
        padding: 0 15px;
    }
    
    .news-heading-vertical {
        font-size: 22px;
        margin-bottom: 25px;
    }
    
    .news-card-vertical {
        padding: 12px;
        flex-direction: column;
    }
    
    .news-image-container-vertical {
        width: 100% !important;
        height: auto !important;
        max-height: 150px;
    }
    
    .news-image-vertical {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important; /* Чтобы картинка полностью влезала */
    }
    
    .news-title-vertical {
        font-size: 16px;
        margin-bottom: 10px;
    }
    
    .news-text-vertical {
        font-size: 13px;
        margin-bottom: 15px;
    }
}

/* Исправление для разделителей в меню материалов */
.materials-menu .separator-line {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}


/* Шапка при скролле - уменьшаем z-index */
.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: 100; /* Уменьшаем с 1000 до 100 */
    animation: slideDown 0.3s ease;
}

/* Основная шапка - также уменьшаем z-index */
.site-header {
    position: relative;
    z-index: 100; /* Добавляем и для обычного состояния */
}

/* Меню материалов - убираем высокий z-index */
.materials-menu {
    padding-left: 5%;
    margin-top: 30px;
    position: relative;
    z-index: 1; /* Уменьшаем с 1000 до 1 */
}

/* Убираем высокий z-index у пунктов меню */
.materials-menu a.menu-item {
    position: relative;
    z-index: auto; /* Меняем с 1000 на auto */
    display: inline-block;
}

/* Поиск в шапке - также уменьшаем z-index */
.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: 101; /* Делаем чуть выше шапки, но не сильно */
}

/* Попапы должны быть выше всего */
.compare-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 799px;
    height: 646px;
    transform: translate(-50%, -50%);
    background-color: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 10000; /* Попапы остаются поверх всего */
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    border-radius: 10px;
}

/* Новостной попап также должен быть поверх всего */
.news-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000; /* Оставляем высоким для попапов */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Разделители - убираем высокий z-index */
.separator-line {
    width: 20%;
    height: 0.5px;
    background-color: #D9D9D9;
    margin: 15px 0;
    position: relative;
    z-index: auto; /* Убираем !important и высокий z-index */
}

/* Мобильное меню также корректируем */
.mobile-materials-dropdown {
    position: relative;
    z-index: 1;
}

/* Dropdown контент */
.dropdown-content {
    z-index: 102; /* Чуть выше шапки для выпадающих меню */
}


/* Ограничиваем область меню материалов */
.materials-menu {
    padding-left: 5%;
    margin-top: 30px;
    position: relative;
    z-index: 10; /* Возвращаем нормальный z-index */
    width: 20%; /* Ограничиваем ширину меню */
    max-width: 250px; /* Максимальная ширина */
}

/* Убираем высокий z-index у пунктов меню, но ограничиваем их область */
.materials-menu a.menu-item {
    position: relative;
    z-index: 11; /* Немного выше меню, но не за его пределами */
    display: block;
    width: 100%; /* Занимает всю ширину меню */
}

/* Разделители также ограничиваем областью меню */
.materials-menu .separator-line {
    width: 100%; /* Теперь 100% от ширины меню, а не экрана */
    height: 0.5px;
    background-color: #D9D9D9;
    margin: 15px 0;
    position: relative;
    z-index: auto;
}

/* Для всех остальных кликабельных элементов в контенте повышаем z-index */
.presentation-info,
.catalog-pdf,
.chargers-section,
.print-materials,
.news-section-vertical {
    position: relative;
    z-index: 5; /* Ниже чем меню, но достаточно для кликабельности */
}

/* Повышаем z-index только для конкретных кликабельных элементов в контенте */
.pdf-link,
.news-read-more-vertical,
.pdf-links .pdf-link {
    position: relative;
    z-index: 6; /* Чуть выше своих контейнеров */
    pointer-events: auto;
}

/* Убираем pointer-events у изображений которые могут мешать */
.presentation-image,
.image,
.image_1,
.news-image-vertical {
    pointer-events: none;
}

/* Гарантируем, что меню не перекрывает контент */
.materials-menu {
    pointer-events: none; /* Отключаем события для всей области меню */
}

/* Но включаем события для самих пунктов меню */
.materials-menu a.menu-item {
    pointer-events: auto; /* Включаем только для ссылок */
}

/* Для мобильной версии возвращаем нормальное поведение */
@media (max-width: 768px) {
    /* Отступ сверху для поисковой строки от шапки на мобильных */
    html body .search-section {
        padding-top: 100px !important; /* Отступ от шапки */
    }
    .mobile-materials-dropdown {
        pointer-events: auto;
        width: auto;
        max-width: none;
    }
    
    .dropdown-header,
    .dropdown-item {
        pointer-events: auto;
    }
}

#guarantee-certificates .chargers-section {
    padding-left: 1% !important;
}

.news-section {
    background-color: #FAFAFA;
    padding: 60px 0;
    width: 100%;
}

.news-container {
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 15px;
}

.news-heading-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    padding: 0 15px;
}

.news-heading {
    font-family: 'Roboto', sans-serif;
    font-size: 40px;
    font-weight: 700;
    color: #333;
    text-align: center;
    margin: 0;
}

.news-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

#news-page-indicator {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    color: #333;
}

.news-nav {
    width: 48px;
    height: 48px;
    border: 2px solid #999;
    background: white;
    font-size: 22px;
    color: #00a9ce;
    cursor: pointer;
    transition: border-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-nav:hover {
    border-color: #00a9ce;
}

.news-nav:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Стили для отображения контента материалов на мобильных */
@media (max-width: 768px) {
    /* Показываем активную секцию */
    .presentation-info[style*="display: block"],
    .catalog-pdf[style*="display: block"],
    .instructions-section[style*="display: block"],
    .print-materials[style*="display: block"],
    .news-section-vertical[style*="display: block"] {
        display: block !important;
        padding-bottom: 40px; /* Отступ снизу для отделения от футера */
    }
    
    /* Убираем фиксированную высоту у серых блоков если есть */
    .light-gray-block {
        min-height: auto !important;
    }
    
    /* Гарантируем что контент виден */
    .presentation-info,
    .catalog-pdf,
    .instructions-section,
    .print-materials,
    .news-section-vertical {
        position: relative;
        z-index: 2;
    }
    
    /* Исправляем отступы для контента на мобильных */
    .presentation-info {
        margin: 20px 5% !important;
        padding: 0 !important;
        width: auto;
    }
    
    .chargers-section {
        margin: 20px 5% !important;
        padding: 0 !important;
        width: auto;
    }
    
    .catalog-pdf .presentation-info {
        margin: 20px 5% !important;
        padding: 0 !important;
    }
    
    .print-materials .presentation-info {
        margin: 20px 5% !important;
        padding: 0 !important;
    }
    
    .news-section-vertical {
        margin: 20px 0 !important;
        padding: 20px 0 !important;
    }
    
    .news-container-vertical {
        padding: 0 20px !important;
    }
    
    /* Показываем изображения в печатных материалах на мобильных */
    .print-materials .image-container {
        display: block !important;
        margin: 20px 5% !important;
        width: 90% !important;
        left: auto !important;
    }
    
    .print-materials .image,
    .print-materials .image_1 {
        width: 100% !important;
        height: auto !important;
    }
    
    /* Показываем разделители на мобильных */
    .print-materials .separator-line_1 {
        display: block !important;
        width: 90% !important;
        left: auto !important;
        margin: 30px 5% !important;
    }
    
    /* Убираем отрицательные margin которые могут скрывать контент */
    .page-title {
        margin-top: 20px !important;
        position: static !important;
        left: auto !important;
        margin-bottom: 20px !important;
    }
}

/* Уменьшение размера картинки о бренде для мобильной версии */
@media (max-width: 768px) {
    .presentation-image {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 15px 0 !important;
    }
}

/* Стили для секции сертификатов на мобильных */
@media (max-width: 768px) {
    #guarantee-certificates {
        margin-left: 0 !important;
        padding-left: 5% !important;
        padding-right: 5% !important;
    }
    
    #guarantee-certificates .chargers-section {
        margin-left: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }
    
    /* Уменьшаем шрифт заголовков */
    #guarantee-certificates .chargers-title {
        font-size: 18px !important;
        margin-bottom: 12px !important;
    }
    
    /* Уменьшаем шрифт ссылок */
    #guarantee-certificates .pdf-link {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
    
    /* Уменьшаем отступы между ссылками */
    #guarantee-certificates .pdf-links {
        gap: 8px !important;
    }
    
    /* Разделители тоже сдвигаем */
    #guarantee-certificates .separator-line_3 {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    
    /* Гарантируем перенос длинных названий файлов */
    #guarantee-certificates .pdf-link {
        word-break: break-word;
        overflow-wrap: break-word;
    }
}

/* Стили для секции инструкций на мобильных */
@media (max-width: 768px) {
    #instructions {
        margin-left: 0 !important;
        padding-left: 5% !important;
        padding-right: 5% !important;
    }
    
    #instructions .chargers-section {
        margin-left: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }
    
    /* Уменьшаем шрифт заголовков */
    #instructions .chargers-title {
        font-size: 18px !important;
        margin-bottom: 12px !important;
    }
    
    /* Уменьшаем шрифт ссылок */
    #instructions .pdf-link {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
    
    /* Уменьшаем отступы между ссылками */
    #instructions .pdf-links {
        gap: 8px !important;
    }
    
    /* Разделители тоже сдвигаем */
    #instructions .separator-line_3 {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    
    /* Гарантируем перенос длинных названий файлов */
    #instructions .pdf-link {
        word-break: break-word;
        overflow-wrap: break-word;
    }
}

/* Стили для секции печатных материалов на мобильных */
@media (max-width: 768px) {
    #print-materials {
        margin-left: 0 !important;
        padding-left: 5% !important;
        padding-right: 5% !important;
    }
    
    #print-materials .presentation-info {
        display: flex !important;
        margin: 20px 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
    
    /* Уменьшаем шрифт текста */
    #print-materials .presentation-text {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }
    
    /* Адаптивные картинки */
    #print-materials .image-container {
        display: block !important;
        margin: 15px 0 !important;
        width: 100% !important;
        left: auto !important;
        padding: 0 !important;
    }
    
    #print-materials .image,
    #print-materials .image_1 {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }
    
    /* Разделители */
    #print-materials .separator-line_1 {
        display: block !important;
        width: 100% !important;
        left: auto !important;
        margin: 30px 0 !important;
        background-color: #D9D9D9;
    }
    
    /* Ссылки */
    #print-materials .pdf-link {
        word-break: break-word;
        overflow-wrap: break-word;
    }
    
    #print-materials .pdf-link:hover .presentation-text {
        color: #00A9CE;
    }
}

/* Стили для вертикального блока новостей */
.news-section-vertical {
    background-color: #FAFAFA;
    padding: 60px 0;
    width: 100%;
}

.news-container-vertical {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.news-list-vertical {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Стили карточек вертикальных новостей */
.news-card-vertical {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: row;
    min-height: 300px;
}

.news-card-vertical:hover {
    transform: scale(1.02); /* Карточка чуть увеличивается */
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.news-image-container-vertical {
    flex: 0 0 40%;
    min-width: 0;
    overflow: hidden;
}

.news-image-vertical {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.news-card-vertical:hover .news-image-vertical {
    transform: none !important; /* Картинка остается на месте при наведении */
}

.news-content-vertical {
    flex: 1;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.news-title-vertical {
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.3;
}

.news-text-vertical {
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 16px;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.5;
    flex-grow: 1;
}

.news-read-more-vertical {
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 16px;
    color: #00a9ce;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: color 0.3s ease;
    align-self: flex-start;
}

.news-read-more-vertical:hover {
    color: #007c9b;
}

.news-read-more-vertical::after {
    content: "→";
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.news-read-more-vertical:hover::after {
    transform: translateX(3px);
}

/* Адаптация для планшетов */
@media (max-width: 992px) {
    .news-section-vertical {
        padding: 50px 0;
    }
    
    .news-container-vertical {
        max-width: 100%;
        padding: 0 20px;
    }
    
    .news-list-vertical {
        gap: 25px;
    }
    
    .news-card-vertical {
        min-height: 280px;
    }
    
    .news-image-container-vertical {
        flex: 0 0 45%;
    }
    
    .news-content-vertical {
        padding: 25px;
    }
    
    .news-title-vertical {
        font-size: 22px;
    }
    
    .news-text-vertical {
        font-size: 15px;
    }
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
    .news-section-vertical {
        padding: 40px 0;
    }
    
    .news-container-vertical {
        padding: 0 15px;
    }
    
    .news-list-vertical {
        gap: 20px;
    }
    
    /* ПЕРЕКЛЮЧАЕМ НА ВЕРТИКАЛЬНЫЙ МАКЕТ */
    .news-card-vertical {
        flex-direction: column;
        min-height: auto;
    }
    
    .news-image-container-vertical {
        flex: 0 0 auto;
        height: 250px; /* Фиксированная высота для мобильных */
    }
    
    .news-content-vertical {
        padding: 20px;
    }
    
    .news-title-vertical {
        font-size: 20px;
        margin-bottom: 12px;
    }
    
    .news-text-vertical {
        font-size: 14px;
        margin-bottom: 15px;
    }
    
    .news-read-more-vertical {
        font-size: 15px;
    }
}

/* Адаптация для маленьких мобильных устройств */
@media (max-width: 480px) {
    .news-section-vertical {
        padding: 30px 0;
    }
    
    .news-container-vertical {
        padding: 0 10px;
    }
    
    .news-list-vertical {
        gap: 15px;
    }
    
    .news-image-container-vertical {
        height: 200px; /* Еще меньше для очень маленьких экранов */
    }
    
    .news-content-vertical {
        padding: 15px;
    }
    
    .news-title-vertical {
        font-size: 18px;
        margin-bottom: 10px;
    }
    
    .news-text-vertical {
        font-size: 13px;
        margin-bottom: 12px;
    }
    
    .news-read-more-vertical {
        font-size: 14px;
    }
}

/* Для очень маленьких экранов */
@media (max-width: 360px) {
    .news-image-container-vertical {
        height: 180px;
    }
    
    .news-content-vertical {
        padding: 12px;
    }
    
    .news-title-vertical {
        font-size: 16px;
    }
    
    .news-text-vertical {
        font-size: 12px;
    }
    
    .news-read-more-vertical {
        font-size: 13px;
    }
}

/* Дополнительные улучшения */
.news-card-vertical:last-child {
    margin-bottom: 0;
}

/* Оптимизация для высоких экранов */
@media (min-width: 769px) and (max-height: 800px) {
    .news-card-vertical {
        min-height: 250px;
    }
    
    .news-content-vertical {
        padding: 20px;
    }
}

/* Поддержка режима reduced-motion для доступности */
@media (prefers-reduced-motion: reduce) {
    .news-card-vertical,
    .news-image-vertical,
    .news-read-more-vertical::after {
        transition: none;
    }
    
    .news-card-vertical:hover {
        transform: none;
    }
}

/* Стили только для мобильной версии */
@media (max-width: 768px) {
    .compare-popup {
        position: fixed;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 10000;
        padding: 0 15px;
        margin: 0 !important;
        transform: none !important;
    }
    
    .compare-popup.active {
        display: flex !important;
    }
    
    .compare-popup-content {
        background: white;
        border-radius: 12px;
        padding: 15px 10px; /* УМЕНЬШИЛ отступы */
        max-width: 280px; /* УМЕНЬШИЛ максимальную ширину */
        width: 90%; /* УМЕНЬШИЛ ширину */
        height: 200px; /* УМЕНЬШИЛ высоту - сделал меньше */
        text-align: center;
        position: relative;
        margin: 0 !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .compare-popup-close {
        position: absolute;
        top: 8px; /* УМЕНЬШИЛ отступ */
        right: 10px; /* УМЕНЬШИЛ отступ */
        font-size: 20px; /* УМЕНЬШИЛ размер крестика */
        background: none;
        border: none;
        cursor: pointer;
        color: #999;
        line-height: 1;
        z-index: 10001;
    }
    
    .compare-popup-text {
        font-size: 14px; /* УМЕНЬШИЛ размер текста */
        color: #333;
        line-height: 1.3; /* УМЕНЬШИЛ межстрочный интервал */
        margin: 0;
        padding: 0 10px; /* Добавил небольшие отступы по бокам текста */
        font-weight: bold; /* ДОБАВИЛ ЖИРНЫЙ ШРИФТ */
        font-family: 'Roboto', sans-serif; /* ДОБАВИЛ ШРИФТ ДЛЯ ЛУЧШЕЙ ЧИТАЕМОСТИ */
    }
}

/* Для очень маленьких экранов */
@media (max-width: 480px) {
    .compare-popup {
        padding: 0 10px;
    }
    
    .compare-popup-content {
        padding: 12px 8px; /* ЕЩЕ МЕНЬШЕ отступы */
        max-width: 250px; /* ЕЩЕ МЕНЬШЕ ширина */
        height: 180px; /* ЕЩЕ МЕНЬШЕ высота */
    }
    
    .compare-popup-text {
        font-size: 13px; /* ЕЩЕ МЕНЬШЕ размер текста */
        line-height: 1.2;
        font-weight: bold; /* ЖИРНЫЙ ШРИФТ И ДЛЯ МАЛЕНЬКИХ ЭКРАНОВ */
    }
    
    .compare-popup-close {
        top: 6px;
        right: 8px;
        font-size: 18px;
    }
}