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

.breadcrumbs {
    padding: 20px 5%;
    margin-top: 20px;
    margin-bottom: 0 !important; /* Убираем отступ снизу, чтобы не было белой полосы */
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 14px;
}

.breadcrumbs a {
    color: #7A7A7A;
    text-decoration: none;
    transition: color 0.3s ease;
}

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

.breadcrumbs span.current {
    color: #333F48;
}

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

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

/* Стиль для квадрата */

.square {
    width: 44px;
    height: 44px;
    background-color: #00A9CE;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 25px; /* Отступ сверху */
    margin-left: 9%; /* Выровнять квадрат по тому же отступу, что и заголовок */

}

.square_duble {
    width: 44px;
    height: 44px;
    background-color: #00A9CE;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 45px; /* Отступ сверху */
    margin-left: 9%; /* Выровнять квадрат по тому же отступу, что и заголовок */

}


/* Стиль для текста внутри квадрата */
.square-text {
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 14px;
    color: #FFFFFF;
}

/* Стиль для текста "ОБЩИЕ ПОЛОЖЕНИЯ" */
.general-terms {
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 16px;
    color: #333F48;
    margin-left: 12%; /* Выровнять по тому же отступу, что и заголовок */
    margin-top: -30px; /* Уменьшить отступ сверху, чтобы поднять текст */
    font-weight: normal; /* Убираем жирность */
    text-decoration: underline; /* Подчеркивание текста */
}

/* Стиль для текста политики */
.policy-text {
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 14px;
    color: #333F48;
    margin-left: 12%; /* Выровнять по тому же отступу, что и заголовок */
    margin-top: 20px; 
    line-height: 1.6;
}

/* Стиль для текста политики */
.policy-text_1 {
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 14px;
    color: #333F48;
    margin-left: 12%; /* Выровнять по тому же отступу, что и заголовок */
    margin-top: -43px; 
    line-height: 1.6;
}

/* Стиль для горизонтальной линии */
.divider-line {
    width: 60%;  /* Длина линии 60% экрана */
    height: 1px;  /* Высота линии - для тонкой линии используем 1px */
    background-color: #7A7A7A;  /* Цвет линии */
    margin-left: 9%;  /* Отступ слева, чтобы линия начиналась с того же отступа, что и другие элементы */
    margin-top: 30px;  /* Отступ сверху */
    margin-bottom: 30px;  /* Отступ снизу */
    border: none;  /* Убираем возможные границы */
    display: block;  /* Обеспечиваем, чтобы элемент занимал всю ширину */
}

/* Стиль для горизонтальной линии */
.divider-line_1 {
    width: 60%;  /* Длина линии 60% экрана */
    height: 0;  /* Высота линии - для тонкой линии используем 1px */
    background-color: #FAFAFA;  /* Цвет линии */
    margin-left: 9%;  /* Отступ слева, чтобы линия начиналась с того же отступа, что и другие элементы */
    margin-top: 30px;  /* Отступ сверху */
    margin-bottom: 30px;  /* Отступ снизу */
    border: none;  /* Убираем возможные границы */
    display: block;  /* Обеспечиваем, чтобы элемент занимал всю ширину */
}

/* Стиль для текста политики */
.policy-text_2 {
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 14px;
    color: #333F48;
    margin-left: 12%; /* Выровнять по тому же отступу, что и заголовок */
    margin-top: -35px; 
    line-height: 2;
}


.square_1 {
    width: 44px;
    height: 44px;
    background-color: #00A9CE;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 45px; /* Отступ сверху */
    margin-left: 9%; /* Выровнять квадрат по тому же отступу, что и заголовок */

}

/* Стиль для текста внутри квадрата */
.square-text {
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 14px;
    color: #FFFFFF;
}

@media (max-width: 768px) {
    
    .general-terms,
    .policy-text,
    .policy-text_1,
    .policy-text_2,
    .divider-line,
    .divider-line_1 {
        margin-left: 20%; /* или 25%, подберите визуально */
        margin-right: 2%;
    }

    .privacy-policy-title {
        padding-left: 5%; /* переопределение для мобильных */
    }
    .square,
    .square_1,
    .square_duble {
        margin-left: 5%;
    }
}

@media (min-width: 1025px) and (max-width: 1680px) {
    .general-terms,
    .policy-text,
    .policy-text_1,
    .policy-text_2,
    .divider-line,
    .divider-line_1 {
        margin-left: 13%;
    }
}

/* Синяя полоса */
.blue-stripe {
    width: 100%;
    height: 320px; /* Увеличили высоту полосы для нормального отображения контента */
    background-color: #00A9CE;
    margin: 20px 0;
    overflow: hidden;
}

/* Белая полоса */
.white-stripe {
    background-color: #FAFAFA !important;
}

/* Текст ПЕРЧАТКИ в белой полосе - черный цвет */
.white-stripe .gloves-text {
    color: #000000 !important;
}

/* Текст компрессоров/зарядных устройств в белой полосе - черный цвет */
.white-stripe .compressor-text {
    color: #000000 !important;
}

/* Подписи (АПТЕЧКИ, ПРЕДОХРАНИТЕЛИ и т.д.) в белой полосе - черный цвет */
.white-stripe .noguarantee-caption {
    color: #000000 !important;
}

.white-stripe .noguarantee-caption-link {
    text-decoration: none;
    display: block;
    cursor: pointer;
}

/* Первая синяя полоса - убираем отступ сверху, чтобы прилегала к контейнеру с текстом */
.blue-stripe:first-of-type {
    margin-top: 0 !important; /* Убираем отступ сверху */
    margin-bottom: 0 !important; /* Убираем отступ снизу, чтобы прижать элемент ПОЖИЗНЕННАЯ ГАРАНТИЯ */
    padding: 0 5%; /* Увеличиваем ширину через padding */
}

/* Первая синяя полоса - увеличиваем ширину */
.blue-stripe:first-of-type {
    padding: 0 5%; /* Увеличиваем ширину через padding */
    margin-top: 0; /* Убираем отступ сверху, чтобы прилегала к контейнеру с текстом */
    margin-bottom: 0; /* Убираем отступ снизу, чтобы прижать элемент ПОЖИЗНЕННАЯ ГАРАНТИЯ */
}

.stripe-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible; /* Убираем обрезание содержимого */
}

.stripe-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s ease;
    padding: 10px; /* Добавили отступы вокруг ссылки */
}

.stripe-link:hover {
    transform: scale(1.05); /* Увеличение при наведении */
}

.stripe-image {
    height: 150px; /* Фиксированная высота для картинки */
    width: auto;
    object-fit: contain;
    margin-bottom: 10px; /* Уменьшили отступ между картинкой и текстом */
    transition: transform 0.3s ease;
}

.stripe-link:hover .stripe-image {
    transform: scale(1.1); /* Увеличение картинки при наведении */
}

.stripe-text {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #FFFFFF;
    text-align: center;
    margin: 0;
    font-weight: bold !important; /* Добавляем жирность */
}

/* Для мобильных устройств - базовые стили (переопределяются в медиа-запросах выше) */
@media (max-width: 768px) {
    .blue-stripe {
        height: 100px; /* Уменьшили для мобильных */
        margin: 15px 0;
    }
    
    .stripe-image {
        height: 50px; /* Фиксированная высота для мобильных */
        margin-bottom: 8px;
    }
    
    .stripe-text {
        font-size: 14px;
    }
}

/* Контейнер с текстом ПОЖИЗНЕННАЯ ГАРАНТИЯ */
.lifetime-guarantee-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px auto;
    max-width: 1200px;
    padding: 0 20px;
    margin-top: 70px;
}

/* Контейнер с текстом ПОЖИЗНЕННАЯ ГАРАНТИЯ - делаем синим фоном и позиционируем над синей полосой */
.lifetime-guarantee-container1 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 20px 5%;
    background-color: #00A9CE;
    position: relative;
    z-index: 10;
}

/* Когда контейнер находится внутри синей полосы - убираем фон и настраиваем отображение */
.blue-stripe > .lifetime-guarantee-container1 {
    background-color: transparent;
    padding: 20px 5% 10px 5%;
}

.lifetime-guarantee-text {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #000000;
    text-align: center;
    margin: 0;
    font-weight: bold !important; /* Добавляем жирность */
}

/* Текст внутри синей полосы - белый цвет */
.blue-stripe > .lifetime-guarantee-container .lifetime-guarantee-text {
    color: #FFFFFF !important;
}

/* Текст внутри белой полосы - черный цвет (переопределяет белый) */
.white-stripe > .lifetime-guarantee-container .lifetime-guarantee-text {
    color: #000000 !important;
}

/* Контейнер внутри синей полосы - настраиваем отступы */
.blue-stripe > .lifetime-guarantee-container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 20px 5% 10px 5%;
}

/* Текст ПОЖИЗНЕННАЯ ГАРАНТИЯ на синем фоне - белый цвет */
.lifetime-guarantee-container1 .lifetime-guarantee-text {
    color: #FFFFFF;
}

/* Для мобильных устройств - базовые стили (переопределяются в медиа-запросах выше) */
@media (max-width: 768px) {
    .lifetime-guarantee-container {
        padding: 0 15px;
    }
    
    .lifetime-guarantee-text {
        font-size: 14px;
    }
    
    .blue-stripe:first-of-type .stripe-content::before {
        font-size: 14px;
    }
}

/* Контейнер для перчаток */
.gloves-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.gloves-images {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 15px;
    gap: 12%; /* Отступ 5% между картинками */
}

.glove-image {
    width: 170px; /* Фиксированная ширина */
    height: auto; /* Высота автоматически подстроится */
    object-fit: contain;
    transition: transform 0.3s ease;
}

.stripe-link:hover .glove-image {
    transform: scale(1.1);
}

/* Для мобильных устройств - общие стили */
@media (max-width: 768px) {
    .gloves-images {
        gap: 8px;
        justify-content: center;
        align-items: center;
    }
    
    .glove-image {
        width: 60px;
        height: 60px;
        object-fit: contain;
    }
    
    .gloves-container,
    .tools-container,
    .noguarantee-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .gloves-images,
    .tools-images,
    .noguarantee-images {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
}

/* Текст для перчаток */
.gloves-text {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #FFFFFF;
    text-align: center;
    margin: 0;
    margin-top: -70px; /* Поднимаем текст выше */
    font-weight: bold !important; /* Добавляем жирность */
}

/* Ссылки для каждой перчатки */
.glove-link {
    display: block;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.glove-link:hover {
    transform: scale(1.15); /* Увеличение при наведении */
}

.glove-image {
    width: 170px;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* Дополнительная анимация для самой картинки */
.glove-link:hover .glove-image {
    transform: scale(1.1);
}


/* Текст для перчаток */
.compressor-text {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #FFFFFF;
    text-align: center;
    margin: 0;
    margin-top: 100px; /* Поднимаем текст выше */
    font-weight: bold !important; /* Добавляем жирность */
}

/* Контейнер для компрессоров - те же стили что и у перчаток */
.compressor-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.compressor-images {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 12%;
}

.compressor-image {
    width: 230px;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
    margin-top: -10px;
}

/* Ссылки для каждого компрессора */
.compressor-link {
    display: block;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.compressor-link:hover {
    transform: scale(1.15);
}

.compressor-link:hover .compressor-image {
    transform: scale(1.1);
}

/* Текст для компрессоров */
.compressor-text {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #FFFFFF;
    text-align: center;
    margin: 0;
    margin-top: -50px;
}

/* Для мобильных устройств */
@media (max-width: 768px) {
    .compressor-images {
        gap: 8px;
        justify-content: center;
        align-items: center;
    }
    
    .compressor-image {
        width: 70px;
        height: 60px;
        object-fit: contain;
        margin-top: 0;
    }
    
    .compressor-text {
        font-size: 14px;
        margin-top: 10px;
    }
    
    .compressor-link:hover {
        transform: scale(1.1);
    }
}

/* Стили для зарядных устройств - такие же как у компрессоров */
.charge-image {
    width: 300px !important;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
    margin-top: -10px;
}

/* Ссылки для каждого зарядного устройства */
.glove-link:hover .charge-image {
    transform: scale(1.1);
}

/* Для мобильных устройств */
@media (max-width: 768px) {
    .charge-image {
        width: 70px;
        height: 60px;
        object-fit: contain;
        margin-top: 0;
    }
}

/* Контейнер для инструментов */
.tools-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.tools-images {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 12%;
}

/* Картинки инструментов */
.tool-image {
    width: 170px;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
    margin-top: -30px;
}

/* Ссылки для каждого инструмента */
.tool-link {
    display: block;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.tool-link:hover {
    transform: scale(1.15);
}

.tool-link:hover .tool-image {
    transform: scale(1.1);
}

/* Контейнер для картинки с текстом */
.tool-with-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Текст под картинкой */
.tool-caption {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #FFFFFF;
    margin-top: 10px;
    text-align: center;
    transition: transform 0.3s ease, font-size 0.3s ease;
    font-weight: bold !important; /* Добавляем жирность */
}

/* Стили для ссылки на подпись */
.tool-caption-link {
    text-decoration: none;
    display: block;
    cursor: pointer;
}

.tool-caption-link:hover .tool-caption {
    transform: scale(1.1); /* Увеличиваем текст на 10% */
}

/* Увеличиваем текст при наведении на картинку */
.tool-link:hover ~ .tool-caption-link .tool-caption,
.tool-with-text:hover .tool-caption {
    transform: scale(1.1); /* Увеличиваем текст на 10% */
}

/* Опускаем только домкрат */
.tool-with-text:first-child {
    margin-top: 10px; /* Опускаем весь первый блок с домкратом */
}

/* Или более конкретный вариант */
.tool-with-text:first-child .tool-image {
    margin-top: -12px !important;
}

/* Или используйте transform для точного позиционирования */
.tool-with-text:first-child .tool-image {
    transform: translateY(10px) !important;
}

.tool-link:hover .tool-with-text:first-child .tool-image {
    transform: translateY(10px) scale(1.1) !important;
}

/* Поднимаем текст домкратов выше */
.tool-with-text:first-child .tool-caption {
    margin-top: -10px; /* Поднимаем текст на 10px выше */
}

/* Для мобильных устройств */
@media (max-width: 768px) {
    .tools-images {
        gap: 8px;
        justify-content: center;
        align-items: center;
    }
    
    .tool-image {
        width: 60px;
        height: 60px;
        object-fit: contain;
        margin-top: 0;
    }
    
    .tool-caption {
        font-size: 12px;
        margin-top: 5px;
    }
    
    .tool-with-text:first-child {
        margin-top: 0;
    }
    
    .tool-with-text:first-child .tool-image {
        margin-top: 0 !important;
        transform: none !important;
    }
    
    .tool-link:hover {
        transform: scale(1.1);
    }
}

/* Контейнер для товаров без гарантии - такие же стили как у перчаток */
.noguarantee-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: visible; /* Убираем обрезание */
}

/* Добавляем отступ снизу к последней синей полосе */
.blue-stripe:last-of-type {
    margin-bottom: 60px; /* Большой отступ перед футером */
}

.noguarantee-images {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Изменено с center на flex-start для лучшего выравнивания */
    width: 100%;
    margin-bottom: 15px;
    gap: 10%;
    overflow: visible; /* Убираем обрезание */
    padding-bottom: 20px; /* Добавляем место снизу */
}

/* Картинки без гарантии */
.noguarantee-image {
    width: 170px;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;

}

/* Ссылки для каждого товара без гарантии */
.noguarantee-link {
    display: block;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.noguarantee-link:hover {
    transform: scale(1.15);
}

.noguarantee-link:hover .noguarantee-image {
    transform: scale(1.1);
}

/* Контейнер для картинки с текстом */
.noguarantee-with-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 30px; /* Добавляем место для текста при наведении */
    overflow: visible; /* Убираем обрезание */
    min-height: fit-content; /* Контейнер подстраивается под содержимое */
}

/* Текст под картинкой */
.noguarantee-caption {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #FFFFFF;
    margin-top: 10px;
    text-align: center;
    transition: transform 0.3s ease;
    font-weight: bold !important; /* Добавляем жирность */
}

/* Стили для ссылки на подпись */
.noguarantee-caption-link {
    text-decoration: none;
    display: block;
    cursor: pointer;
}

/* Анимация текста при наведении - применяется ко всем элементам */
.noguarantee-caption-link:hover .noguarantee-caption,
.noguarantee-link:hover ~ .noguarantee-caption-link .noguarantee-caption,
.noguarantee-with-text:hover .noguarantee-caption {
    transform: scale(1.1) translateY(15px);
}

/* Текст для категории без гарантии */
.noguarantee-text {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #FFFFFF;
    text-align: center;
    margin: 0;
    margin-top: -70px;
    font-weight: bold !important; /* Добавляем жирность */
}

/* Для мобильных устройств */
@media (max-width: 768px) {
    .noguarantee-images {
        gap: 8px;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }
    
    .noguarantee-image {
        width: 50px;
        height: 50px;
        object-fit: contain;
    }
    
    .noguarantee-caption {
        font-size: 12px;
        margin-top: 5px;
    }
    
    .noguarantee-with-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .noguarantee-with-text:nth-child(1),
    .noguarantee-with-text:nth-child(2) {
        margin-top: 0;
    }
    
    .noguarantee-link:hover {
        transform: scale(1.1);
    }
    
    .noguarantee-text {
        font-size: 14px;
        margin-top: -40px;
    }
}

/* Опускаем первую и вторую картинки вместе с текстом */
.noguarantee-with-text:nth-child(2) {
    margin-top: 30px; /* Опускаем на 30px */
}

/* Опускаем первую и вторую картинки вместе с текстом */
.noguarantee-with-text:nth-child(1) {
    margin-top: 60px; /* Опускаем на 30px */
}

/* ============================================
   АДАПТАЦИЯ ДЛЯ ВСЕХ ТИПОВ УСТРОЙСТВ
   ============================================ */

/* 📱 ВЕРТИКАЛЬНЫЕ МОБИЛЬНЫЕ (до 768px, portrait) */
@media (max-width: 768px) and (orientation: portrait) {
    .breadcrumbs {
        padding: 15px 5%;
        font-size: 12px;
    }
    
    .lifetime-guarantee-container,
    .lifetime-guarantee-container1 {
        margin-top: 40px;
        padding: 0 15px;
    }
    
    .lifetime-guarantee-text {
        font-size: 14px;
    }
    
    .blue-stripe {
        height: auto;
        min-height: 120px;
        margin: 15px 0;
        padding: 15px 0;
    }
    
    .blue-stripe > .lifetime-guarantee-container {
        padding: 10px 5% 5px 5%;
    }
    
    .stripe-content {
        padding: 10px 0;
    }
    
    .stripe-image {
        height: 60px;
        margin-bottom: 8px;
    }
    
    .stripe-text {
        font-size: 12px;
    }
    
    /* Перчатки - выравнивание картинок */
    .gloves-images {
        gap: 8px;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
    }
    
    .glove-image {
        width: 70px;
        height: 70px;
        object-fit: contain;
    }
    
    .gloves-text {
        font-size: 12px;
        margin-top: -15px;
    }
    
    /* Компрессоры - выравнивание */
    .compressor-images {
        gap: 8px;
        justify-content: center;
        align-items: center;
    }
    
    .compressor-image {
        width: 80px;
        height: 70px;
        object-fit: contain;
        margin-top: 0;
    }
    
    .compressor-text {
        font-size: 12px;
        margin-top: 5px;
    }
    
    /* Зарядные устройства - сближаем картинки */
    .charge-image {
        width: 70px;
        height: 60px;
        object-fit: contain;
        margin-top: 0;
    }
    
    /* Зарядные устройства на таком же расстоянии, как компрессоры */
    /* Устанавливаем gap для контейнера с зарядными устройствами */
    .white-stripe .gloves-container .gloves-images {
        gap: 8px !important;
        display: flex !important;
        justify-content: center !important;
    }
    
    /* Дополнительное правило для зарядных устройств через селектор по изображениям */
    .gloves-images .charge-image {
        flex-shrink: 0;
    }
    
    /* Убеждаемся, что gap применяется */
    .blue-stripe.white-stripe .stripe-content .gloves-container .gloves-images {
        gap: 8px !important;
    }
    
    /* Первая картинка зарядного устройства - сдвигаем правее через transform (только для второй белой полосы) */
    .white-stripe .gloves-container .gloves-images .glove-link:first-child .charge-image {
        transform: translateX(60px) !important;
    }
    
    /* Вторая картинка зарядного устройства - сдвигаем влево через transform */
    .white-stripe .gloves-container .gloves-images .glove-link:last-child .charge-image {
        transform: translateX(-60px) !important;
    }
    
    /* При hover первая картинка тоже сдвигается, но с масштабированием */
    .white-stripe .gloves-container .gloves-images .glove-link:first-child:hover .charge-image {
        transform: translateX(60px) scale(1.1) !important;
    }
    
    /* При hover вторая картинка тоже сдвигается, но с масштабированием */
    .white-stripe .gloves-container .gloves-images .glove-link:last-child:hover .charge-image {
        transform: translateX(-60px) scale(1.1) !important;
    }
    
    /* Для перчаток (первая белая полоса) убираем transform */
    .white-stripe:first-of-type .gloves-container .gloves-images .glove-link:first-child .glove-image {
        transform: none !important;
    }
    
    /* Инструменты - выравнивание */
    .tools-images {
        gap: 8px;
        justify-content: center;
        align-items: center;
    }
    
    .tool-image {
        width: 60px;
        height: 60px;
        object-fit: contain;
        margin-top: 0;
    }
    
    .tool-caption {
        font-size: 11px;
        margin-top: 5px;
    }
    
    .tool-with-text:first-child {
        margin-top: 0;
    }
    
    .tool-with-text:first-child .tool-image {
        margin-top: 0 !important;
        transform: none !important;
    }
    
    .tool-with-text:first-child .tool-caption {
        margin-top: 5px;
    }
    
    /* Товары без гарантии - выравнивание и опускаем вниз */
    .noguarantee-container {
        margin-top: 25px;
    }
    
    .noguarantee-images {
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    
    .noguarantee-image {
        width: 50px;
        height: 50px;
        object-fit: contain;
    }
    
    .noguarantee-caption {
        font-size: 11px;
        margin-top: 5px;
    }
    
    .noguarantee-with-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .noguarantee-with-text:nth-child(1),
    .noguarantee-with-text:nth-child(2) {
        margin-top: 0;
    }
}

/* 📱 ГОРИЗОНТАЛЬНЫЕ МОБИЛЬНЫЕ (до 768px, landscape) */
@media (max-width: 768px) and (orientation: landscape) {
    .breadcrumbs {
        padding: 15px 5%;
        font-size: 12px;
    }
    
    .lifetime-guarantee-container,
    .lifetime-guarantee-container1 {
        margin-top: 30px;
        padding: 0 15px;
    }
    
    .lifetime-guarantee-text {
        font-size: 13px;
    }
    
    .blue-stripe {
        height: auto;
        min-height: 100px;
        margin: 12px 0;
        padding: 10px 0;
    }
    
    .blue-stripe > .lifetime-guarantee-container {
        padding: 8px 5% 5px 5%;
    }
    
    .stripe-content {
        padding: 8px 0;
    }
    
    .stripe-image {
        height: 50px;
        margin-bottom: 5px;
    }
    
    .stripe-text {
        font-size: 11px;
    }
    
    /* Перчатки - выравнивание картинок */
    .gloves-images {
        gap: 6px;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
    }
    
    .glove-image {
        width: 60px;
        height: 60px;
        object-fit: contain;
    }
    
    .gloves-text {
        font-size: 11px;
        margin-top: -25px;
    }
    
    /* Компрессоры - выравнивание */
    .compressor-images {
        gap: 6px;
        justify-content: center;
        align-items: center;
    }
    
    .compressor-image {
        width: 70px;
        height: 60px;
        object-fit: contain;
        margin-top: 0;
    }
    
    .compressor-text {
        font-size: 11px;
        margin-top: 3px;
    }
    
    /* Зарядные устройства */
    .charge-image {
        width: 70px;
        height: 60px;
        object-fit: contain;
        margin-top: 0;
    }
    
    /* Зарядные устройства на таком же расстоянии, как компрессоры */
    .white-stripe .gloves-container .gloves-images {
        gap: 8px !important;
        display: flex !important;
        justify-content: center !important;
    }
    
    /* Первая картинка зарядного устройства - сдвигаем правее через transform */
    .white-stripe .gloves-container .gloves-images .glove-link:first-child .charge-image {
        transform: translateX(60px) !important;
    }
    
    /* Вторая картинка зарядного устройства - сдвигаем влево через transform */
    .white-stripe .gloves-container .gloves-images .glove-link:last-child .charge-image {
        transform: translateX(-60px) !important;
    }
    
    /* При hover первая картинка тоже сдвигается, но с масштабированием */
    .white-stripe .gloves-container .gloves-images .glove-link:first-child:hover .charge-image {
        transform: translateX(60px) scale(1.1) !important;
    }
    
    /* При hover вторая картинка тоже сдвигается, но с масштабированием */
    .white-stripe .gloves-container .gloves-images .glove-link:last-child:hover .charge-image {
        transform: translateX(-60px) scale(1.1) !important;
    }
    
    /* Для перчаток (первая белая полоса) убираем transform */
    .white-stripe:first-of-type .gloves-container .gloves-images .glove-link:first-child .glove-image,
    .white-stripe:first-of-type .gloves-container .gloves-images .glove-link:last-child .glove-image {
        transform: none !important;
    }
    
    /* Инструменты - выравнивание */
    .tools-images {
        gap: 6px;
        justify-content: center;
        align-items: center;
    }
    
    .tool-image {
        width: 60px;
        height: 60px;
        object-fit: contain;
        margin-top: 0;
    }
    
    .tool-caption {
        font-size: 10px;
        margin-top: 3px;
    }
    
    .tool-with-text:first-child {
        margin-top: 0;
    }
    
    .tool-with-text:first-child .tool-image {
        margin-top: 0 !important;
        transform: none !important;
    }
    
    .tool-with-text:first-child .tool-caption {
        margin-top: 3px;
    }
    
    /* Товары без гарантии - выравнивание и опускаем вниз */
    .noguarantee-container {
        margin-top: 20px;
    }
    
    .noguarantee-images {
        gap: 6px;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    
    .noguarantee-image {
        width: 55px;
        height: 55px;
        object-fit: contain;
    }
    
    .noguarantee-caption {
        font-size: 10px;
        margin-top: 3px;
    }
    
    .noguarantee-with-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .noguarantee-with-text:nth-child(1),
    .noguarantee-with-text:nth-child(2) {
        margin-top: 0;
    }
}

/* 📱 ВЕРТИКАЛЬНЫЕ ПЛАНШЕТЫ (768px-1024px, portrait) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .breadcrumbs {
        padding: 18px 5%;
        font-size: 13px;
    }
    
    .lifetime-guarantee-container,
    .lifetime-guarantee-container1 {
        margin-top: 50px;
        padding: 0 20px;
    }
    
    .lifetime-guarantee-text {
        font-size: 15px;
    }
    
    .blue-stripe {
        height: auto;
        min-height: 180px;
        margin: 18px 0;
        padding-bottom: 20px;
    }
    
    .stripe-image {
        height: 100px;
        margin-bottom: 10px;
    }
    
    .stripe-text {
        font-size: 14px;
    }
    
    .gloves-images {
        gap: 8%;
    }
    
    .glove-image {
        width: 120px;
        height: auto;
    }
    
    .gloves-text {
        font-size: 14px;
        margin-top: -60px;
    }
    
    .compressor-images {
        gap: 8%;
    }
    
    .compressor-image {
        width: 150px;
    }
    
    .compressor-text {
        font-size: 14px;
        margin-top: -40px;
    }
    
    /* Зарядные устройства - текст должен быть виден */
    .charge-image {
        width: 180px;
    }
    
    .white-stripe .compressor-text {
        font-size: 14px !important;
        margin-top: -30px !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    .tools-images {
        gap: 8%;
    }
    
    .tool-image {
        width: 120px;
        margin-top: -13px;
    }
    
    /* Для вертикальных планшетов */
    .tool-with-text:first-child .tool-image {
        margin-top: 2px !important;
    }
    
    .tool-caption {
        font-size: 14px;
        margin-top: 8px;
        position: relative !important;
        z-index: 10 !important;
    }
    
    /* Убеждаемся, что надписи видны */
    .tool-with-text {
        position: relative !important;
    }
    
    .tool-with-text .tool-caption {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .noguarantee-images {
        gap: 6%;
        align-items: flex-start !important;
    }
    
    .noguarantee-image {
        width: 100px;
    }
    
    .noguarantee-caption {
        font-size: 13px;
        margin-top: 8px;
        position: relative !important;
        z-index: 10 !important;
        white-space: nowrap !important;
    }
    
    /* Убеждаемся, что надписи видны */
    .noguarantee-with-text {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .noguarantee-with-text .noguarantee-caption {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-top: 10px !important;
    }
    
    .noguarantee-with-text:nth-child(1) {
        margin-top: 32px;
    }
    
    .noguarantee-with-text:nth-child(2) {
        margin-top: 20px;
    }
}

/* 📱 ГОРИЗОНТАЛЬНЫЕ ПЛАНШЕТЫ (768px-1366px, landscape) */
@media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) {
    .breadcrumbs {
        padding: 18px 5%;
        font-size: 13px;
    }
    
    .lifetime-guarantee-container,
    .lifetime-guarantee-container1 {
        margin-top: 40px;
        padding: 0 20px;
    }
    
    .lifetime-guarantee-text {
        font-size: 15px;
    }
    
    .blue-stripe {
        height: auto;
        min-height: 200px;
        margin: 18px 0;
        padding-bottom: 20px;
    }
    
    .stripe-image {
        height: 120px;
        margin-bottom: 10px;
    }
    
    .stripe-text {
        font-size: 15px;
    }
    
    .gloves-images {
        gap: 10%;
    }
    
    .glove-image {
        width: 140px;
        height: auto;
    }
    
    .gloves-text {
        font-size: 15px;
        margin-top: -30px;
    }
    
    .compressor-images {
        gap: 10%;
    }
    
    .compressor-image {
        width: 180px;
    }
    
    .compressor-text {
        font-size: 15px;
        margin-top: -20px;
    }
    
    /* Зарядные устройства - текст должен быть виден */
    .charge-image {
        width: 220px;
    }
    
    .white-stripe .compressor-text {
        font-size: 15px !important;
        margin-top: -40px !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    .tools-images {
        gap: 10%;
        align-items: flex-start !important;
    }
    
    .tool-image {
        width: 140px;
        margin-top: -10px;
    }
    
    /* Для горизонтальных планшетов */
    .tool-with-text:first-child .tool-image {
        margin-top: -12px !important;
    }
    
    .tool-caption {
        font-size: 15px;
        margin-top: 10px;
        position: relative !important;
        z-index: 10 !important;
        white-space: nowrap !important;
    }
    
    /* Убеждаемся, что надписи видны */
    .tool-with-text {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .tool-with-text .tool-caption {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-top: 12px !important;
    }
    
    .noguarantee-images {
        gap: 8%;
        align-items: flex-start !important;
    }
    
    .noguarantee-image {
        width: 120px;
    }
    
    .noguarantee-caption {
        font-size: 14px;
        margin-top: 10px;
        position: relative !important;
        z-index: 10 !important;
        white-space: nowrap !important;
    }
    
    /* Убеждаемся, что надписи видны */
    .noguarantee-with-text {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .noguarantee-with-text .noguarantee-caption {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-top: 12px !important;
    }
    
    .noguarantee-with-text:nth-child(1) {
        margin-top: 40px;
    }
    
    .noguarantee-with-text:nth-child(2) {
        margin-top: 25px;
    }
}

/* На десктопах и ноутбуках сдвигаем текст копирайта левее */
@media (min-width: 769px) {
  .footer-copy {
    left: -140px !important;
  }
}