img {
                width: 100%; /* Ширина изображения равна ширине контейнера */
                object-fit: cover; /* Обеспечим обрезку и сохранение пропорций */
                display: block;
            }
 /* Текст "Корзина" по центру сверху */
            h2 {
                    font-family: Arial, sans-serif;
                    text-align: center; /* Текст отцентрован */
                    color: grey; /* Добавляем серый цвет */
                    font-weight: normal; /* Убираем жирность текста */
                    font-size: 26px;
                }

 /* КОРЗИНА */
.section13 {
    width: 70%; /* Ширина 70% от страницы */
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column; /* Выстраиваем дочерние элементы по вертикали */
    align-items: center; /* Центрируем содержимое по горизонтали */
    background-color: #ffffff;
    margin: 0 auto; /* Центрируем блок на странице */
    padding: 20px; /* Добавляем отступы для внутреннего содержимого */
}

.product-container88 {
    display: flex; /* Используем flexbox для выстраивания дочерних элементов в ряд */
    width: 100%; /* Ширина 100% от родительского контейнера */
    justify-content: space-between; /* Располагаем блоки 11 и 12 по краям */
}

/*БЛОК С ТОВАРАМИ КОРЗИНЫ*/
.section11 {
    width: 100%; /* Ширина 80% от родительского блока */
    height: auto; /* Автоматическая высота */
    margin-right: 20px; /* Отступ справа для разделения с section12 */
    background-color: #ffffff; /* Цвет фона для section12 */
    border-radius: 10px; /* Применение скругления углов */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Легкая тень для section12 */
    padding: 10px; /* Внутренние отступы для section12 */
}

/*БЛОК ОПЛАТЫ*/
.section12 {
    width: 30%; /* Ширина 20% от родительского блока */
    height: 50%; 
    background-color: #ffffff; /* Цвет фона для section12 */
    border-radius: 10px; /* Применение скругления углов */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Легкая тень для section12 */
    padding: 10px; /* Внутренние отступы для section12 */
    /* position: fixed; /* Фиксированное положение элемента */
    top: 20px;      /* Отступ от верхней части окна */
    right: 20px;    /* Отступ от правой стороны окна */
    z-index: 1000; /* Чтобы элемент был поверх других */
}
 
.section13 div, 
.section11 div {
    color: rgb(124, 124, 124);
}

.quantity-selector {
        display: flex;
        align-items: center;
        margin-top: 20px;
    }

    .quantity-container {
    display: flex; /* Выравниваем элементы по горизонтали */
    align-items: center; /* Центрируем элементы по вертикали */
    justify-content: center; /* Центрируем содержимое по горизонтали */
    border: 1px solid #7c7c7c79; /* Граница всего контейнера */
    border-radius: 5px; /* Скругление углов контейнера */
    background-color: #ffffff; /* Цвет фона контейнера */
    /* padding: 5px; /* Добавлено небольшое внутреннее поле для создания пространства */
    width: auto; /* Можно установить фиксированную ширину, если нужно */
    padding-left: 2px; /* Внутренний отступ слева */
    padding-right: 2px; /* Внутренний отступ справа */
    /*margin-left: 20%;  /* Задаёт внешний отступ слева */
    /*margin-right: 20%; /* Задаёт внешний отступ справа */
}

/* кнопки + и - */
.button-primary {
    width: auto; /* Уменьшенный размер кнопок для создания компактного контейнера */
    height: auto; /* Уменьшенная высота кнопок */
    font-size: 18px; /* Уменьшенный размер шрифта */
    color: #727272;
    background-color: #ffffff;
    border: none; /* Убираем границу кнопок для единообразия */
    cursor: pointer;
    transition: background-color 0.3s;
}

.button-primary:hover {
    background-color: #ffffff;
}

/* поле с количеством товаров */
.quantity-input {
    width: 35px; /* Уменьшенная ширина ввода количества */
    height: 30px; /* Уменьшенная высота поля ввода */
    text-align: center;
    margin: 0; /* Убираем отступы, чтобы элементы плотно прилегали друг к другу */
    border: none; /* Убираем границы, чтобы избежать двойной границы */
    font-size: 14px; /* Уменьшенный размер шрифта для текста ввода */
    color: #0f1b0d;
    outline: none; /* Убираем стандартный контур браузера */
    background-color: #ffffff; /* Цвет фона ввода количества для единообразия */
}

.quantity-input:focus {
    border-color: #7c7c7c79; /* Можно изменить на нужный цвет */
    box-shadow: none; /* Убирает тень при фокусе */
}

.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none; /* Убирает стрелки в Chrome/Safari */
    margin: 0; /* Убирает отступы */
}


    table {
    color: #666;
    width: 100%;
    /*border-collapse: collapse; */
    border-spacing: 0 10px; /* Устанавливаем расстояние между строками на 5 пикселей */
    background-color: white;
}
.table-header {
    /*padding: 10px; /* Устанавливаем отступы */
    padding-left: 0px; /* Внутренний отступ слева */
    padding-right: 0px; /* Внутренний отступ справа */
}

th, td {
    border: 1px solid #ffffff; /* Светло-серые линии */
    padding: 1px;
    text-align: center;
    position: relative; /* Необходимо для размещения псевдоэлемента */
}

th {
    background-color: #ffffff; /* Бледно-серый цвет заголовков #f6f6f6c5;  */
}

/* Добавление разделительной линии */
tr {
    position: relative;
}
tr::after {
    content: ""; /* Создаёт пустой элемент */
    display: block; /* Настройка отображения в виде блока */
    height: 1px; /* Высота линии */
    background-color: #ccc; /* Цвет линии */
    position: absolute; /* Позиционируем относительно родительского элемента */
    bottom: -5px; /* Сместим линию на 5 пикселей вниз */
    left: 0;
    right: 0; /* Занимает всю ширину строки */
    z-index: 1; /* Чтобы линия находилась соответственно выше ячеек */
}

/*tr:last-child::after {
    content: none; /* Убираем линию после последней строки }*/

 /* Ведёрко удаление */   
.remove-cart {
    padding: 6px 6px; /* Установите отступ для ячеек: 3px сверху и снизу, 4px слева и справа */
    background: none; /* Без фона для кнопки */
    border: none; /* Без границы */
    cursor: pointer; /* Изменяем курсор при наведении */
    font-size: 20px; /* Размер шрифта для кнопки */
    color: grey; /* Цвет текста кнопки */

   /* margin-bottom: 4px; /* Устанавливаем отступ снизу в 4px */
    
    /* Добавьте дополнительное свойство, чтобы разместить элемент внизу родительского контейнера */
   /* display: block; /* Или inline-block в зависимости от ваших нужд */
   /* position: relative; /* Позволяет использовать абсолютное позиционирование внутри родительского элемента */
   /* bottom: 0; /* Размещаем кнопку внизу контейнера, если это необходимо */
}

.product-image {
    width: 100%; /* Изображения заполняют всю ячейку */
    height: auto; /* Сохраняем пропорции */
    top: 0; /* Исключаем отступы сверху */
    left: 0; /* Исключаем отступы слева */
}

/* Стили для сообщения о пустом списке */
#no-items-message {
    text-align: center;
    font-size: 20px;
    color: #666;
    margin-top: 20px;
}
.small-text {
    font-size: 16px; /* Размер шрифта для второго сообщения */
    color: #666666c9; /* Цвет шрифта, если нужно */
}

button.add-to-cart {
    width: 65%; /*это всё характеристики кнопки В КОРЗИНУ*/
        height: 40px;
        font-size: 15px;
        background-color: #3964318c;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
}

button.add-to-cart:hover {
    background-color: #396431b9;
}
.empty-favorites {
    width: 100%; /* Занимаем всю ширину */
    height: auto; /* Занимаем всю высоту */
    display: flex; /* Используем flexbox */
    align-items: center; /* Центрируем по вертикали */
    justify-content: center; /* Центрируем по горизонтали */
}

/* Общие стили для контейнера с кнопками */
.button-container {
    display: flex; /* Для горизонтального размещения кнопок */
    justify-content: space-between; /* Распределяем кнопки равномерно */
    margin-top: 20px; /* Отступ сверху для разделения от содержимого */
}

/* Общие стили для кнопок, которые не конфликтуют с конкретными классами */
button:not(.add-to-cart):not(.remove-favorite):not(.scrollToTop):not(.button-primary):not(.remove-cart):not(.entrance-button):not(.entrance1-button) {
    background-color: #ffffff; /* Основной цвет фона кнопок */
    color: rgb(73, 73, 73); /* Цвет текста на кнопках */
    border: 1px solid rgb(170, 170, 170); /* Устанавливаем границу толщиной 1px и серого цвета */
    border-radius: 18px; /* Скругленные углы */
    padding: 10px 15px; /* Внутренние отступы для создания пространства внутри кнопки */
    cursor: pointer; /* Меняем курсор при наведении для показателя интерактивности */
    font-size: 12px; /* Размер шрифта текста кнопок */
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Плавный переход цвета фона и границы при наведении */
    margin-left: 20px; /* Внешний отступ слева */
    margin-top: 10px; /* Отступ сверху для разделения от содержимого */
    margin-bottom: 20px; /* Устанавливаем отступ снизу */
}

/* Эффект наведения и нажатия для других кнопок */
button:not(.add-to-cart):not(.remove-favorite):not(.scrollToTop):not(.button-primary):not(.remove-cart):not(.entrance-button):not(.entrance1-button):hover {
    background-color: #ffffff; /* Более темный оттенок для кнопки при наведении */
    border: 1px solid rgb(85, 85, 85); /* Устанавливаем границу при наведении */
}

/* Эффект нажатия для кнопок */
button:not(.add-to-cart):not(.remove-favorite):not(.scrollToTop):not(.button-primary):not(.remove-cart):active {
    background-color: #ffffff; /* Цвет при нажатии (темнее, чем при наведении) */
    border: 1px solid gray;
}

.center-button {
    text-align: center; /* Центральное выравнивание текста внутри контейнера */
    margin-top: 20px; /* Отступ сверху для отделения кнопки от текста */
}

.catalog-button {
    display: inline-block; /* Делаем кнопку блочным элементом для возможности установки отступов */
    padding: 10px 20px; /* Отступы внутри кнопки */
    background-color: #fafafa; /* Цвет фона кнопки */
    color: rgb(73, 73, 73); /* Цвет текста на кнопках */
    text-decoration: none; /* Убираем подчеркивание */
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Плавный переход цвета фона и границы при наведении */
    border-radius: 5px; /* Скругление углов */
    border: 1px solid rgb(224, 224, 224); /* Устанавливаем границу при наведении */
}

.catalog-button:hover {
    background-color: #f3f3f3d5; /* Цвет фона кнопки */
    border: 1px solid rgb(192, 192, 192); /* Устанавливаем границу при наведении */
}

.icon2-wrapper {
        display: flex;
        align-items: center;
        cursor: pointer;
        font-size: 18px;
        color: #555;
        margin: 0; /* Убираем отступы для обёртки */
        padding: 0; /* Убираем внутренние отступы */
    }

    .icon2 {
        width: 25px;
        height: 25px;
        transition: fill 0.3s;
        margin-left: 2px; /* Отступ между иконками */
    }

    .heart-path {
        fill: transparent;
        stroke: rgb(36, 36, 36); /* Цвет обводки */
        stroke-width: 0.5; /* Ширина обводки */
    }

    .favorited .heart-path {
        fill: #fd0000af; /* Цвет сердца при добавлении в избранное */
        stroke: #720000; /* Изменяем цвет обводки на синий */
        stroke-width: 0.5; /* Устанавливаем толщину обводки на 0.5px */
    }

/* Оформление блока Ваша корзина */

   /* html, body {*/
  /*  height: 100%; /* Обеспечивает 100% высоты для body */
  /*  margin: 0; /* Убираем отступы */
/*}*/

.size-dropdown {
    position: relative; /* Позволяет позиционировать дочерние элементы */
    display: inline-block; /* Установлено значение inline-block для выравнивания */
    vertical-align: middle; /* Выравнивание по центру по вертикали */
    margin-top: 10px; /* Отступ сверху для разделения от содержимого */
}

.size-selector {
    background-color: #396431ea;   /* Зелёный фон */
    color: white !important; /* Белый цвет для основного текста */
    padding: 5px 15px; /* Добавляем дополнительные отступы по бокам для ширины */
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease; /* Плавный переход для фона и текста */
    font-weight: normal; /* Нормальный вес шрифта */
    width: auto; /* Авто-ширина, можно задать фиксированную ширину */
    /*min-width: 150px; /* Минимальная ширина кнопки для предотвращения сжатия */
    white-space: nowrap; /* Предотвращает перенос текста на следующую строку */
    text-align: center; /* Центрирование текста */
}

.size-options {
    display: none; /* По умолчанию скрыты */
    position: absolute;
    top: 100%; /* Под элементом */
    left: 0;
    right: 0;
    background-color: white; /* Цвет фона опций */
    border: 1px solid #ccc;
    border-radius: 5px;
    z-index: 1000; /* Находится выше других элементов */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Тень */
                transition: opacity 0.5s ease, visibility 0s 0.5s; /* Плавный переход для непрозрачности и задержка для видимости */
}

.size-dropdown:hover .size-options, 
.size-dropdown:focus-within .size-options {
    display: block; /* Показываем опции при наведении или фокусе */
}

.size-option {
    /*padding: 5px; /* Отступы для каждой опции */
    cursor: pointer; /* Указатель */
    padding: 4px 2px; /* Отступы для элементов списка */
    color: rgb(12, 48, 23) !important; /* Цвет текста по умолчанию для опций */
    /*transition: background-color 0.3s ease, color 0.3s ease; /* Плавный переход */
}

.size-option:hover {
    background-color: #30572869; /* Цвет фона при наведении на элемент */
    color: rgb(255, 255, 255) !important; /* Белый текст при наведении на опцию */
}

.size-option.selected {
    font-weight: bold; /* Гладкий стиль для выбранного элемента */
}

/* Блок "Перейти к оформлению" */
.checkout-button {
    width: 100% !important; /* Кнопка занимает 100% ширины контейнера */
    padding: 10px !important; /* Отступы внутри кнопки */
    background-color: #4CAF50 !important; /* Цвет фона кнопки */
    color: #fff !important; /* Цвет текста */
    border: none !important; /* Убираем рамку */
    border-radius: 5px !important; /* Закругленные края */
    cursor: pointer !important; /* Курсор в виде руки */
    font-size: 16px !important; /* Размер шрифта */
    margin-left: auto !important; /* Центрирование кнопки по горизонтали */
    margin-right: auto !important; /* Центрирование кнопки по горизонтали */
    display: block !important; /* Превращаем кнопку в блочный элемент */
    margin-bottom: 0 !important; /* Убираем отступ снизу */
    transition: background-color 0.3s ease; /* Плавный переход для цвета фона */
}

.checkout-button:hover {
    background-color: #45a049 !important; /* Цвет фона при наведении (темнее на 10%) */
}

.checkout-button:active {
    background-color: #3e8e41 !important; /* Цвет фона при нажатии (темнее на 20%) */
}

/* Стили для неактивного состояния кнопки */
.checkout-button:disabled {
    background-color: #ccc !important; /* Цвет фона при неактивной кнопке */
    color: #666 !important; /* Цвет текста при неактивной кнопке */
}