/* Смена изображений с точками */
    #image-container {
        position: none;
        width: 100%;
        max-width: 70%; /* Максимальная ширина контейнера */
        height: auto; /* Автоматическая высота для адаптивности */
        overflow: hidden; /* Скрываем части изображения, выходящие за границы контейнера */
        margin: auto;
    }

    img {
        width: 100%; /* Ширина изображения равна ширине контейнера */
        
        object-fit: cover; /* Обеспечим обрезку и сохранение пропорций */
        display: block;
    }

    .dots {
        position: relative; /* Позиционируем точки относительно изображения */
        bottom: 18px; /* Располагаем точки снизу */
        left: 10px; /* Устанавливаем отступ слева */
        display: flex; /* Используем flex для выстраивания точек в ряд */
    }

    .dot {
        width: 10px;
        height: 10px;
        margin: 0 4px;
        border-radius: 50%;
        background-color: #ccc; /* Цвет неактивной точки */
        margin-right: 4px; /* Отступ между точками */
        cursor: pointer; /* Курсор манипулятора */
    }

    .active {
        background-color: #2a4e0ccb; /* Цвет активной точки */
    }




/* Галерея товаров с пагинацией */
    .section12 {
        height: auto;
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    }

    h1 {
        margin-bottom: 15px;
        color: #333;
        text-align: center;
    }

    .main-container {
        display: flex;
justify-content: center; /* Центрирование контейнера */
width: 100%;
max-width: 70%; /* Максимальная ширина контейнера */
margin: 0 auto;
    }

    #filter {
        text-align: center;
margin-bottom: 20px;
    }

    .filter-block {
        max-width: 15%;
width: 100%;
padding: 0px;
border-right: 2px solid #ffffff6c;
background-color: #ffffff;
color: #333;
    }

    .products-block {
        width: 100%;
display: flex;
justify-content: flex-e; /* Выровнять элементы по левому краю */
flex-wrap: wrap;
gap: 20px; /* Отступ между элементами в галерее */
padding-left: 25px; /* Добавляем отступ слева в 25 пикселей */
padding-right: 0px;
}

.arrows-block {
width: 100%;
padding-left: 25px; /* Добавляем отступ слева в 25 пикселей */
display: flex;
flex-wrap: wrap;
gap: 20px; /* Отступ между элементами в галерее */
padding-right: 0px;
justify-content: center; /* Выравнивание содержимого по центру */
align-items: center; /* Выравнивание по вертикали, если нужно */
}

    .gallery {
display: flex;
flex-wrap: wrap;
justify-content: flex-start; /* center Центрирование галереи ;  Меняем на flex-start для выравнивания по левому краю */
margin: 0; /* Убираем отступы справа */
width: 100%; /* Занимает всю ширину родительского контейнера */
}

    .gallery-item1 {
        width: calc(25% - 20px); /* Учитываем отступы */
margin: 0; /* Убираем отступы справа */
text-align: center;
cursor: pointer;
position: relative;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
overflow: hidden;
visibility: hidden;
    }

    .gallery-item1.visible {
        visibility: visible; 
        opacity: 1;
        transform: translateY(0);
    }

    .gallery-image {
        width: 100%;
        height: auto;
        transition: opacity 0.8s ease;
    }

    .gallery-image:hover {
        opacity: 0.99;
    }

    .title {
        font-size: 18px;
        margin: 10px 0 5px;
    }

    .description {
        font-size: 14px;
        color: #666;
        margin: 5px 0;
    }

    .description1,
    .description2 {
        font-size: 12px;
        font-weight: bold;
        color: #061100;
        margin: 0;
        display: inline;
    }

    .hover-image {
        display: none;
    }

    .gallery-item1:hover .normal-image {
        display: none;
    }

    .gallery-item1:hover .hover-image {
        display: block;
    }

    .custom-select {
        position: relative;
        width: 100%;
        margin: 10px 0;
        font-size: 18px;
        color: #525151;
        text-shadow: 1px 1px 2px #3057283a;
    }

    .select-button {
        width: 100%;
        height: 40px;
        border: 1px solid #ccc;
        background-color: #ffffff;
        color: #5f5f5f;
        padding: 5px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .select-options {
        display: none;
        position: absolute;
        background-color: white;
        border: 1px solid #ccc;
        width: 100%;
        z-index: 1;
    }

    .select-options.active {
        display: block;
    }

    .option {
        padding: 10px;
        cursor: pointer;
        color: #5f5f5f;
        transition: background-color 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
        font-size: 14px;
    }

    .option:hover {
        background-color: #30572869;
        color: white;
        text-shadow: 2px 2px 4px rgba(63, 63, 63, 0.37);
    }

    .pagination1 {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 0px;
    }

    /* Новый класс для добавления отступа, когда кнопка скрыта */
    .pagination1.hidden-show-more {
        margin-top: 4rem; /* Отступ вниз на 18 пикселей, когда кнопка "Показать ещё" скрыта */
    }

    .pagination1-button1 {
        margin: 0 5px;
        padding: 6px 10px;
        border: 1px solid #ffffff;
        background-color: #ffffff;
        cursor: pointer;
    }

    .pagination1-button1:disabled {
        background-color: #ffffff;
        cursor: not-allowed;
    }

    .active1 {
        font-weight: bold;
        background-color: #39643113;
        border: 1px solid #39643150;
    }

    .hidden1 {
        display: none;
    }

    #reset-filters {
        margin-top: 0px; 
    padding: 5px; 
    font-size: 13px; 
    cursor: pointer; 
    background-color: #ffffff07; /* Зеленый фон */
    color: #1f1f1fda; /* Цвет текста */
    border: 1px solid #0c3017ea;
    border-radius: 5px; /* Закругленные углы */
    width: 100%; /* Занимает всю ширину контейнера */
    max-width: 120px; /* Максимальная ширина для кнопки */
    margin-bottom: 0px; /* Отступ снизу для отделения от товаров */
    position: relative; /* Для позиционирования */
    left: 26.9%; /* Отступ 30% от левой стороны */
    display: inline-block;
    }

    #item-count {
        color: #0c3017ea; /* Цвет текста */
font-size: 13px; /* Размер шрифта */
text-align: right; /* Выравнивание текста по правому краю */
position: relative; /* Для позиционирования */
right: 15%; /* Отступ 30% от левой стороны */
margin-bottom: 0px; /* Отступ снизу для отделения от товаров */
    }

    .full-width-button {
width: 100%; /* Займет всю ширину контейнера */
background-color: #e6e6e6da; /* Светло-серый цвет */
color: #3964319a; /* Цвет текста */
font-weight: bold; /* Жирный шрифт */
border: none; /* Без рамки */
padding: 10px; /* Отступ внутри кнопки */
font-size: 16px; /* Размер шрифта */
cursor: pointer; /* Указатель при наведении */
border-radius: 8px; /* Закругленные углы */
transition: background-color 0.3s ease, border-color 0.3s ease; /* Плавный переход цвета */
}

.full-width-button:hover {
background-color: #e4e4e4; /* Темнее при наведении */
color: #396431da; /* Цвет текста */ 
}