/* ОСНОВА */
/* Цвет и шрифт основы */
body {
            font-family: Arial, sans-serif;
            background-color: #ffffff; /* Цвет основы страницы*/
            overflow: auto; /*добавляет прокрутку, только если необходимо.*/
            margin: 0;
            padding: 0;
            display: block;
            justify-content: center; /* Равномерное распределение */
            position: relative; /* Позволяет позиционировать снежинки относительно body */
            min-height: 100vh; /* Задаем минимальную высоту страницы */
        }

        /* верхняя часть страницы */
        .section9 {
    width: 100%; 
    height: auto;
    font-size: 12px;
    background-color: #ffffff;
    font-family: Arial, sans-serif;
    margin-top: 7px; /* Главный отступ для страницы */
    padding-bottom: 0px; /* Динамический отступ снизу */
    flex-shrink: 0; /* Запрещаем сжиматься */
}

.container1 {
    font-family: Arial, sans-serif;
    max-width: 70%; /* Максимальная ширина контейнера */
    display: flex;
    justify-content: space-between; /* Распределяем элементы по краям */
    background: rgba(255, 255, 255, 0.151); /* Цвет основного рабочего поля по центру */
    color: #464646;
    margin: 0 auto; /* Центрируем контейнер на странице */
    padding: 5px; /* Опционально: добавьте отступы для лучшего восприятия */
}

/* Бесплатная доставка */
.main-header {
    font-family: Arial, sans-serif;
    background-color: hsl(0, 0%, 100%);
    color: #464646;
    padding: 0;
    font-size: 12px;
    display: flex;
    justify-content: center;
}

.header-container {
    max-width: 70%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between; /* Будет распределять элементы по краям */
    align-items: center;
    padding: 0.5rem 0 0 0; /* Добавленный отступ сверху */
    background-color: hsl(0, 0%, 100%);
}

.right-elements {
    display: flex; /* Обеспечиваем, чтобы элементы также располагались в ряд */
}

.navbar {
    display: flex; /* Убедимся, что ссылки в navbar расположены в ряд */
}

.navbar-item {
    margin: 0 0px; /* Пространство между ссылками */
}

.navbar-link {
    color: #000000;
    padding: 6px; 
    text-decoration: none; /* Убираем подчеркивание по умолчанию */
    font-weight: normal; /* Убедимся, что значение 'normal' */
}

.navbar-link:hover {
    text-decoration: none; /* Убираем подчеркивание при наведении */
}

/* ЛОГОтипы вверху */
header {
    font-family: Arial, sans-serif;
    background-color: #396431ad;  /* Цвет под белым ЛОГО */
    color: rgb(69, 150, 66);
    text-align: center; /* Центрируем текст */
    display: flex; /* Используем Flexbox */
    flex-direction: column; /* Располагаем элементы по вертикали */
    align-items: center; /* Центрируем элементы по оси X */
    list-style: none; /* Убираем маркеры списка */
    flex-shrink: 0; /* Запрещаем сжиматься */
    padding-top: 20px;    /* Отступ сверху до лого */
    /*padding-bottom: 10px; /* Отступ снизу под лого */
}

/* МЕНЮ */
        nav ul {
            font-family: Arial, sans-serif;
            padding: 0;
            list-style: none;
            position: sticky;
            margin: 0;
            display: flex;
            justify-content: center;
            z-index: 1000;
            
        }

        nav ul li {
            font-family: Arial, sans-serif;
            margin: 0 30px; /* Расстояние между главами меню */
        }

        nav ul li a {
            color: white; /* Цвет МЕНЮ */
            text-decoration: none;
            font-weight: none;
            font-family: Arial, sans-serif;           
        }

/* Основное меню под МЕНЮ */
        .container {
            font-family: Arial, sans-serif;
            max-width: 70%;
            margin: 20px auto;
            padding: 20px;
            background: rgba(255, 255, 255, 0.151); /* Цвет основного рабочего поля (фона) по центру */

            border-radius: 5px;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.164);
        }

        h2 {
            font-family: Arial, sans-serif;
            text-align: center; /* Текст отцентрован */
        }

/* Postolnaya Group */
        footer {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 10px;
            position: relative;
            bottom: 0;
            width: 100%;
            background-color: #f1f1f1; /* Цвет фона под Postolnaya Group */
        }


/*СТРЕЛКА ВВЕРХ*/
    .section1 {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        margin: 0;
        padding: 0;
        height: 100vh; /* Увеличиваем высоту для демонстрации прокрутки */
    }

    .content {
        padding: 20px;
    }

    .scrollToTop {
        position: fixed;
        bottom: 50px;
        right: 20px;
        display: none; /* Изначально скрыт */
        background-color: #396431ad;
        color: white;
        border: none;
        border-radius: 4px;
        padding: 10px;
        cursor: pointer;
        font-size: 20px;
        font-weight: bold;
        z-index: 1000; /* Высокий z-index, чтобы отображался поверх других элементов */
    }

    .scrollToTop:hover {
        background-color: #3964316b;
    }


/* ПОИСК ТОВАРОВ */
        .section10 {
            display: flex;
            justify-content: center;
            align-items: center;
            height: auto;
            margin: 0;
            background-color: #ffffff;
            font-family: Arial, sans-serif;
            margin-top: 0px; /* Главный отступ для страницы */
            flex-shrink: 0; /* Запрещаем сжиматься */
            margin-bottom: 9px; /* Регулировать отступ ДО header */
        }
        .container2 {
            max-width: 70%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center; /* Центрируем вертикально */
            padding: 0px 0px; /* Отступы внутри контейнера */
            margin: 0; /* Удаляем отступы у контейнера */
        }
        .search-icon-background {
            position: relative;
        }
        .search-input {
            width: 150px;
            padding: 9px 30px 9px 45px;
            border: 1px solid #7e7878;
            border-radius: 5px;
            /* background: url('{{ basic_info.lupa }}') no-repeat 10px center; */
            background: url('/static/images/lupa.png') no-repeat 10px center; /* Иконка как фон в формате Base64 */ 
            font-size: 12px;
            outline: none;
            transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Добавлен переход для тени */
        }
        .search-input:focus {
            border-color: #787b7e;
            box-shadow: 0 0 5px rgba(120, 123, 126, 0.5); /* Тень при фокусе */
        }
        #results {
            border: 1px solid #ccc;
            display: none;
            position: absolute;
            background: white;
            z-index: 1000;
            max-height: 50vh; /* Максимальная высота для прокрутки */
            overflow-y: auto; /* Включаем вертикальную прокрутку */
            width: 100%; /* Ширина выпадающего окна равна ширине поля ввода */
            border-radius: 5px; /* Закругление углов */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Тень для выпадающего окна */
        }
        .result-item {
            padding: 3px;
            cursor: pointer;
            transition: background 0.3s ease; /* Плавный переход для фона */
            display: flex;
            justify-content: center; /* Выравниваем элементы по горизонтали */
            align-items: center; /* Вертикальное выравнивание элементов */
        }
        .result-item:hover {
            background: #f0f0f0;
        }
        .result-image {
            width: 85%; /* Ширина изображения */
            height: auto; /* Авто высота для сохранения пропорций */
            display: block; /* Делаем элемент блочным для центрирования */
            margin: 0 auto; /* Центрируем изображение по горизонтали */
            margin-bottom: 0px; /* Отступ снизу для отделения от текста */
        }
        .text-link {
            color: #000000; /* Черный текст */
            text-decoration: none; /* Без подчеркивания */
            text-align: center; /* Центрирование текста */
        }
        .text-link:hover {
            text-decoration: none; /* Активируем подчеркивание при наведении underline */
            font-weight: none; /* Делаем текст жирным при наведении - bold*/
        }
        .right-elements {
            display: flex;
            align-items: center;
        }
        .icon-wrapper {
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: none;
            position: relative;
            margin-left: 10px; /* Отступ между иконками */
            text-decoration: none; /* Убирает подчеркивание */
        }
        .icon-wrapper:hover {
            transform: none; /* Увеличиваем иконку при наведении */
        }
        .icon {
            width: 25px;
            height: 25px;
            margin-right: 5px;
        }
        .text {
            font-size: 16px;
            color: #000000;
            margin-right: 10px; /* Добавляем отступ справа для "Избранное" */
        }
        .icon1 {
                    width: 27px;
                    height: 27px;
                    margin-right: 5px;
                }
                .notification1 {
                    position: relative; /* Или другой тип, если не требуется абсолютное позиционирование absolute */
                    top: -10px; /* Оставьте это значение для вертикального выравнивания */
                    left: 0px; /* Можете установить так, чтобы соседний элемент не перекрывал */
                    margin-left: -12px; /* Убедитесь, что оно находится близко к правому краю иконки */
                    width: 20px;
                    height: 20px;
                    background-color: #396431e8;
                    color: rgb(255, 255, 255);
                    border-radius: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 11px;
                    font-weight: bold;
                }
        .notification {
            position: relative;
            top: -10px; /* Корректное значение для уведомления */
            right: 7px;
            width: 20px;
            height: 20px;
            background-color: #396431e8;
            color: rgb(255, 255, 255);
            border-radius: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: bold;
        }

        .title1 {
            font-size: 12px;
            margin-top: 3px; /* Добавленный отступ сверху */
            margin-right: 5px; /* Отступ между элементами, если необходимо */
            margin-bottom: 3px; /* Отступ снизу */
            margin-left: 0; /* Обратите внимание, что отступ слева по умолчанию 0 */
            color: #474747;
            font-family: Arial, sans-serif;
            font-weight: bold;
        }

        .title2 {
            font-size: 14px;
            margin-top: 2px; /* Добавленный отступ сверху */
            margin: 0px 0 0px;
            color: #303030;
            font-family: Arial, sans-serif;
            margin-right: 3px; /* Отступ между элементами, если необходимо */
        }

        .scrollable-results::-webkit-scrollbar {
    width: 7px; /* Ширина полосы прокрутки */
    background-color: #f0f0f0; /* Цвет фона полосы прокрутки */
}

/* Стиль для самого "ползунка" полосы прокрутки */
.scrollable-results::-webkit-scrollbar-thumb {
    background-color: #31582a23; /* Цвет ползунка */
    border-radius: 10px; /* Закругление углов ползунка */
    transition: background-color 0.5s ease; /* Плавный переход для цвета */
}

/* Стиль ползунка при наведении курсора */
.scrollable-results::-webkit-scrollbar-thumb:hover {
    background-color: #31582a65; /* Измененный цвет ползунка при наведении */
}

/* Если необходимо изменить стиль вертикальной полосы прокрутки */
.scrollable-results::-webkit-scrollbar:vertical {
    background-color: #f0f0f0; /* Фон вертикальной полосы */
}
      


/* МЕНЮ, ЛОГО */
    .section3 {
        font-family: Arial, sans-serif;
        color: white; /* Цвет МЕНЮ */
        text-decoration: none;
        margin: 0px;
        text-align: center;
        padding: 0px 100px; /* Добавляем отступы для слова-родителя */
    }
    
    .dropdown {
        position: relative; /* Устанавливаем относительное позиционирование */
        display: inline-block; /* Чтобы элемент был строчно-блочным */
        transition: transform 0.2s; /* Плавный переход для увеличения */
        margin-bottom: 10px; /* Поля между коллекциями */
    }
    .dropbtn {
        font-weight: normal; /* Нормальный шрифт по умолчанию */
        color: rgb(255, 255, 255); /* Цвет текста по умолчанию */
        transition: color 0.50s, font-weight 0.50s; /* Плавный переход для цвета и жирности шрифта */
        text-decoration: none; /* Убираем подчеркивание */
    }
    .dropdown:hover .dropbtn {
        color: rgb(207, 207, 207); /* Цвет текста при наведении */
        font-weight: none; /* Жирный шрифт при наведении, например: bold */
    }               
    .dropdown-content {
        top: 100%; /* Устанавливаем позицию по вертикали сразу под родителем */
        left: 50%; /* Устанавливаем позицию по горизонтали по центру родителя */
        transform: translateX(-50%); /* Центруем содержимое по горизонтали */
        opacity: 0; /* Начальное состояние (непрозрачность) */
        visibility: hidden; /* Скрываем элемент по умолчанию / display: hidden; /* Скрываем выпадающее меню по умолчанию */
        position: absolute; /* Позиционируем его относительно родителя */
        background-color: #ffffff; /* Цвет фона выпадающего списка */
        min-width: 120px; /* Минимальная ширина выпадающего списка */
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Тень */
        border: 1px solid #ccc; /* Рамка */
        border-radius: 2px; /* Закруглённые углы */
        z-index: 1000; /* Обеспечиваем отображение поверх других элементов */
        transition: opacity 0.5s ease, visibility 0s 0.5s; /* Плавный переход для непрозрачности и задержка для видимости */
    }
    .dropdown:hover .dropdown-content {
        opacity: 1; /* Полная непрозрачность при наведении / display: none; /* Показываем при наведении, например block */
        visibility: visible; /* Делаем видимым при наведении */
        transition: opacity 0.5s ease; /* Восстанавливаем плавный переход для непрозрачности */
    }
    .dropdown-content a {
        color: rgb(12, 48, 23); /* Цвет текста */
        padding: 4px 2px; /* Отступы для элементов списка */
        text-decoration: none; /* Убираем подчеркивание */
        display: block; /* Отображаем элементы списка как блочные */
    }
    .dropdown-content a:hover {
        background-color: #30572869; /* Цвет фона при наведении на элемент */
        color: rgb(255, 255, 255); /* Цвет текста при наведении */
    }
    #collections-dropdown {
        /* Измените по вашим нуждам */
        background-color: white;
        border: 1px solid #ccc;
        position: absolute;
        z-index: 1000; 
    }
    /* Основной стиль для полосы прокрутки */
    .scroll-with-hover::-webkit-scrollbar {
        width: 7px; /* Ширина полосы прокрутки */
        background-color: #f0f0f0; /* Цвет фона полосы прокрутки */
    }
    /* Стиль для самого "ползунка" полосы прокрутки */
    .scroll-with-hover::-webkit-scrollbar-thumb {
        background-color: #31582a23; /* Цвет ползунка */
        border-radius: 10px; /* Закругление углов ползунка */
        transition: background-color 0.5s ease; /* Плавный переход для цвета */
    }
    /* Стиль ползунка при наведении курсора */
    .scroll-with-hover::-webkit-scrollbar-thumb:hover {
        background-color: #31582a65; /* Измененный цвет ползунка при наведении */
    }
    /* Если необходимо изменить стиль вертикальной полосы прокрутки */
    .scroll-with-hover::-webkit-scrollbar:vertical {
        background-color: #f0f0f0; /* Фон вертикальной полосы */
    }