/* ============================================
   СТИЛИ ИНТЕРНЕТ-МАГАЗИНА
   ============================================ */

/* ============================================
   1. ИКОНКА КОРЗИНЫ В ШАПКЕ
   ============================================ */

/* Выравнивание пунктов навигации (Меню и иконка корзины) по вертикали */
#nav > ul {
    display: flex;
    align-items: center;
    margin-right: 2em;
}

#nav > ul > li {
    display: flex;
    align-items: center;
}

/* Кнопка корзины в навигации
   Изменяемые параметры:
   - padding: отступы вокруг иконки (сверху-снизу слева-справа) */
.cart-toggle {
    position: relative;      /* Относительное позиционирование (для абсолютного позиционирования счётчика внутри) */
    display: flex;
    align-items: center;
    height: inherit;
    padding: 0 1em;
}

/* Более специфичный селектор чтобы перебить font-size: 0.9em из шаблона */
#header nav > ul > li > a.cart-toggle {
    font-size: 1.5em;        /* Размер иконки корзины */
}

/* Счётчик товаров на иконке корзины (красный кружок с цифрой)

   ВАЖНО для изменения:
   - background: цвет фона кружка
   - width и height: размер кружка (должны быть одинаковыми для круга)
   - top и right: позиция кружка относительно иконки корзины
   - font-size: размер цифры внутри кружка */
.cart-count {
    position: absolute;      /* Абсолютное позиционирование (относительно .cart-toggle) */
    top: 50%;               /* Центр по вертикали */
    right: 2px;             /* Позиция справа */
    transform: translateY(-110%); /* Сдвиг вверх от центра иконки */
    background: #ed4933;    /* Цвет фона счётчика (красный) */
    color: white;           /* Цвет текста (цифры) */
    border-radius: 50%;     /* Скругление углов на 50% = круг */
    min-width: 16px;        /* Минимальная ширина */
    height: 16px;           /* Высота кружка */
    display: flex;          /* Flexbox для выравнивания содержимого */
    align-items: center;    /* Выравнивание по вертикали (центр) */
    justify-content: center; /* Выравнивание по горизонтали (центр) */
    font-size: 0.55em;      /* Размер цифры */
    font-weight: 600;       /* Полужирное начертание для читаемости */
    line-height: 1;
    padding: 0 3px;
}

/* ============================================
   2. СЕТКА ТОВАРОВ НА ГЛАВНОЙ СТРАНИЦЕ
   ============================================ */

/* Контейнер для сетки товаров

   Используется CSS Grid для автоматического размещения карточек

   ВАЖНО для изменения:
   - minmax(250px, 1fr): минимальная/максимальная ширина карточки
     250px = минимальная ширина карточки
     1fr = карточка занимает доступное пространство
   - gap: расстояние между карточками
   - margin-top: отступ от заголовка секции */
.products-grid {
    display: grid;           /* Включаем режим CSS Grid */
    /* repeat(auto-fill, ...) = автоматически заполнять строки карточками
       minmax(250px, 1fr) = карточка минимум 250px, максимум занимает доступное место */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2em;               /* Расстояние между карточками по горизонтали и вертикали */
    margin-top: 2em;        /* Отступ сверху от заголовка */
}

/* ============================================
   3. КАРТОЧКА ТОВАРА
   ============================================ */

/* Карточка отдельного товара

   Это контейнер, который содержит:
   - Изображение товара (.product-image)
   - Блок с информацией (.product-info)

   ВАЖНО для изменения:
   - background: цвет/прозрачность фона
   - border: рамка вокруг карточки
   - border-radius: скругление углов */
.product-card {
    /* rgba(255, 255, 255, 0.05) = белый цвет с прозрачностью 95% (почти прозрачный) */
    background: #F5F0E8;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;     /* Скругление углов на 8 пикселей */
    overflow: hidden;       /* Скрываем содержимое, выходящее за границы (для изображения) */
    /* Плавная анимация при наведении: трансформация и тень занимают 0.3 секунды */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;        /* Курсор в виде руки (показывает, что элемент кликабельный) */
    display: flex;
    flex-direction: column;
}

/* Эффект при наведении курсора на карточку

   :hover = когда курсор над элементом

   Создаёт эффект "всплытия" карточки:
   - Карточка поднимается вверх
   - Появляется тень снизу */
.product-card:hover {
    /* translateY(-5px) = сдвиг по оси Y (вертикаль) на -5px (вверх) */
    transform: translateY(-5px);
    /* Тень: горизонтальное смещение 0, вертикальное 10px, размытие 30px, черный с прозрачностью 70% */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Изображение товара в карточке

   ВАЖНО для изменения:
   - height: высота блока для изображения
   - object-fit: как изображение вписывается в блок
     scale-down = уменьшает изображение, сохраняя пропорции (не обрезает)
     cover = заполняет весь блок, обрезая лишнее
     contain = вписывает полностью, могут быть пустые края */
.product-image {
    width: 100%;            /* Ширина = 100% от ширины карточки */
    height: 250px;          /* Фиксированная высота блока */
    /* contain = изображение вписывается целиком, сохраняя пропорции */
    object-fit: contain;
    background: #F5F0E8;
}

/* Контейнер с информацией о товаре
   Измените padding для изменения внутренних отступов */
.product-info {
    padding: 1.5em;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Название товара
   Измените font-size для изменения размера текста */
.product-name {
    font-size: 1.2em;
    margin-bottom: 0.5em;
    font-weight: 500;
}

/* Цена товара
   Измените color для изменения цвета цены
   Измените font-size для изменения размера цены */
.product-price {
    font-size: 1.5em;
    color: #ed4933;         /* Цвет цены (красный) */
    margin-bottom: 0.5em;
}

/* Краткое описание товара (показывается 2 строки)
   Измените -webkit-line-clamp для изменения количества строк */
.product-description {
    font-size: 0.9em;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 1em;
    display: -webkit-box;
    -webkit-line-clamp: none;                   /* Количество видимых строк */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Контейнер для кнопок на карточке товара */
.product-actions {
    display: flex;
    gap: 0.5em;             /* Расстояние между кнопками */
    margin-top: auto;       /* Прижимаем кнопку к низу карточки */
}

/* Кнопки в карточке товара */
.product-actions button {
    flex: 1;
    padding: 0.5em;
    font-size: 0.85em;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   4. МОДАЛЬНЫЕ ОКНА (ПОПАПЫ)
   ============================================ */

/* Фоновый слой модального окна (затемнение)
   Используется для карточки товара и корзины
   Измените background-color для изменения затемнения */
.modal {
    display: none;          /* По умолчанию скрыто */
    position: fixed;
    z-index: 10000;         /* Поверх всех элементов */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(207, 207, 207, 0.8);  /* Черный с прозрачностью 80% */
    animation: fadeIn 0.3s;
}

/* Анимация появления модального окна (плавное затемнение) */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Показать модальное окно (класс добавляется через JavaScript) */
.modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Контейнер содержимого модального окна
   Измените background для изменения цвета фона
   Измените max-width для изменения максимальной ширины */
.modal-content {
    background: #F5F0E8;    /* Бежевый фон */
    margin: auto;
    padding: 2em;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 15px;    /* Скругление углов */
    width: 90%;
    max-width: 960px;       /* Максимальная ширина окна */
    position: relative;
    animation: slideIn 0.3s;
}

/* Анимация появления окна (выезд сверху) */
@keyframes slideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Кнопка закрытия (крестик)
   Измените right и top для изменения позиции */
.close {
    color: #333;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 10px;
}

/* Эффект при наведении на кнопку закрытия */
.close:hover,
.close:focus {
    color: #ed4933;
}

/* ============================================
   5. МОДАЛЬНОЕ ОКНО ТОВАРА
   ============================================ */

/* Тело модального окна (содержимое)
   Разделено на две колонки: изображение и информация */
.modal-body {
    display: flex;
    gap: 2em;               /* Расстояние между колонками */
    margin-top: 1em;
}

/* Контейнер для изображения товара */
.modal-image {
    flex: 1;                /* Занимает 50% ширины */
}

/* ============================================
   5.1 ГАЛЕРЕЯ ИЗОБРАЖЕНИЙ В МОДАЛЬНОМ ОКНЕ
   ============================================ */

/* Контейнер галереи с основным фото и стрелками */
.gallery {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Основное изображение в галерее */
.gallery > img {
    width: 100%;
    border-radius: 8px;
    max-height: 400px;
    object-fit: cover;
    cursor: zoom-in;
}

/* Стрелки навигации галереи */
.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    font-size: 1.5em;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
    z-index: 2;
    padding: 0;
    line-height: 1;
}

.gallery-arrow:hover {
    background: rgba(0, 0, 0, 0.8);
}

.gallery-prev {
    left: 10px;
}

.gallery-next {
    right: 10px;
}

/* Полоска миниатюр под основным фото */
.gallery-thumbnails {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Миниатюра */
.gallery-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.6;
    transition: opacity 0.3s, border-color 0.3s;
}

.gallery-thumb:hover {
    opacity: 0.9;
}

/* Активная (выбранная) миниатюра */
.gallery-thumb.active {
    border-color: #ed4933;
    opacity: 1;
}

/* Контейнер для информации о товаре */
.modal-info {
    flex: 1;                /* Занимает 50% ширины */
    display: flex;
    flex-direction: column;
}

/* Название товара в модальном окне */
.modal-info h2 {
    margin-bottom: 0.5em;
    color: #333;
}

/* Цена товара в модальном окне
   Измените color для изменения цвета
   Измените font-size для изменения размера */
.modal-price {
    font-size: 2em;
    color: #ed4933;         /* Цвет цены (красный) */
    margin-bottom: 1em;
    font-weight: bold;
}

/* Полное описание товара в модальном окне */
.modal-description {
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 2em;
    line-height: 1.6;
}

/* Контейнер для кнопок в модальном окне */
.modal-actions {
    display: flex;
    gap: 1em;
    margin-top: auto;       /* Прижимаем кнопки к низу */
}

/* Кнопки в модальном окне товара */
.modal-actions button {
    flex: 1;                /* Кнопки занимают равную ширину */
}

/* ============================================
   6. МОДАЛЬНОЕ ОКНО КОРЗИНЫ
   ============================================ */

/* Тело модального окна корзины (одна колонка вместо двух) */
#cart-modal .modal-body {
    display: block;
}

/* Заголовок корзины */
#cart-modal h2 {
    color: #333;
    margin-bottom: 1em;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 0.5em;
}

/* Контейнер со списком товаров в корзине
   Измените max-height для изменени я высоты прокручиваемой области */
.cart-items {
    max-height: 600px;      /* Максимальная высота списка */
    overflow-y: auto;       /* Прокрутка при переполнении */
    margin-bottom: 1em;
}

/* Отдельный товар в корзине */
.cart-item {
    display: flex;
    gap: 1em;
    padding: 1em;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    margin-bottom: 1em;
    align-items: center;
}

/* Миниатюра изображения товара в корзине
   Измените width и height для изменения размера */
.cart-item-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
}

/* Информация о товаре в корзине */
.cart-item-info {
    flex: 1;                /* Занимает всё доступное пространство */
}

/* Название товара в корзине */
.cart-item-name {
    font-weight: bold;
    margin-bottom: 0.25em;
}

/* Цена товара в корзине
   Измените color для изменения цвета */
.cart-item-price {
    color: #333;         /* Цвет цены (черный) */
}

/* Контейнер для изменения количества товара
   Содержит кнопки - и + и число между ними */
.cart-item-quantity {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-top: 0.5em;
}

/* Кнопки увеличения/уменьшения количества (- и +) */
.cart-item-quantity button {
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 1.5em;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

/* Кнопка удаления товара из корзины
   Измените background для изменения цвета кнопки */
.cart-item-remove {
    background: #ed4933;    /* Цвет кнопки (красный) */
    color: white;
    border: none;
    padding: 0.5em 1em;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    height: auto !important;
}

/* Эффект при наведении на кнопку удаления */
.cart-item-remove:hover {
    background: #d43d2a;    /* Темнее при наведении */
}

/* Блок с общей суммой заказа */
.cart-total {
    border-top: 2px solid rgba(0, 0, 0, 0.1);
    padding-top: 1em;
    margin-bottom: 1em;
}

/* Текст общей суммы */
.cart-total h3 {
    color: #333;
    text-align: right;
    font-size: 1.5em;
}

/* Контейнер для кнопок в корзине */
.cart-actions {
    display: flex;
    gap: 1em;
}

/* Кнопки в корзине */
.cart-actions button {
    flex: 1;                /* Кнопки занимают равную ширину */
}

/* Сообщение "Корзина пуста" */
.empty-cart {
    text-align: center;
    padding: 2em;
    color: rgba(0, 0, 0, 0.5);
}

/* ============================================
   8. МОДАЛЬНОЕ ОКНО ОФОРМЛЕНИЯ ЗАКАЗА (CHECKOUT)
   ============================================ */

/* Расширенное модальное окно для checkout */
.checkout-modal-content {
    max-width: 960px;
}

/* Заголовок checkout */
#checkout-modal h2 {
    color: #333;
    margin-bottom: 1em;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 0.5em;
}

/* Тело checkout — блочное вместо flex */
#checkout-modal .modal-body {
    display: block;
}

/* Двухколоночная сетка: форма + итоги */
.checkout-grid {
    display: flex;
    gap: 2em;
}

/* Левая колонка: поля формы */
.checkout-fields {
    flex: 3;
}

/* Правая колонка: итоги заказа */
.checkout-summary {
    flex: 2;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    padding: 1.5em;
    align-self: flex-start;
    position: sticky;
    top: 1em;
}

/* Секция формы (контакты, доставка, оплата) */
.checkout-section {
    margin-bottom: 1.5em;
    padding-bottom: 1.5em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.checkout-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Заголовок секции */
.checkout-section-title {
    font-size: 1.15em;
    color: #333;
    margin-bottom: 1em;
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.checkout-section-title .icon {
    color: #ed4933;
}

/* Горизонтальная строка полей */
.checkout-row {
    display: flex;
    gap: 1em;
    margin-bottom: 0.75em;
}

.checkout-row:last-child {
    margin-bottom: 0;
}

/* Контейнер поля */
.checkout-field {
    flex: 1;
}

.checkout-field label {
    color: rgba(0, 0, 0, 0.75);
    font-size: 0.95em;
    margin-bottom: 0.4em;
    display: block;
    font-weight: 500;
}

/* Бежевый фон для полей ввода в checkout */
#checkout-modal input[type="text"],
#checkout-modal input[type="email"],
#checkout-modal input[type="tel"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #ffffff;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #333;
    display: block;
    outline: 0;
    padding: 0 1em;
    width: 100%;
    height: 2.75em;
    font-size: 0.95em;
}

#checkout-modal input[type="text"]:focus,
#checkout-modal input[type="email"]:focus,
#checkout-modal input[type="tel"]:focus {
    box-shadow: 0 0 0 2px #c8b99a;
}

/* Поле телефона с фиксированным префиксом +380 */
.phone-input-wrapper {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.phone-prefix {
    padding: 0 0.5em 0 1em;
    color: #333;
    font-weight: 600;
    white-space: nowrap;
    height: 2.75em;
    line-height: 2.75em;
    background-color: #f0ebe3;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.phone-input-wrapper input[type="tel"] {
    border-radius: 0 3px 3px 0 !important;
    border: none !important;
    flex: 1;
}

.phone-input-wrapper:focus-within {
    box-shadow: 0 0 0 2px #c8b99a;
}

.phone-input-wrapper input[type="tel"]:focus {
    box-shadow: none !important;
}

/* Лейбл "Спосіб доставки: Нова Пошта" */
.checkout-delivery-method {
    color: rgba(0, 0, 0, 0.75);
    font-size: 0.95em;
    margin-bottom: 1em;
    padding: 0.5em 1em;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 3px;
    border-left: 3px solid #ed4933;
}

/* Группа radio-кнопок */
.checkout-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
}

.checkout-radio-option {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.checkout-radio-option label {
    cursor: pointer;
    color: rgba(0, 0, 0, 0.85);
    font-size: 1em;
}

/* Зелёная галочка для radio-кнопок оплаты */
.checkout-radio-option input[type="radio"]:checked + label:before {
    background: #4CAF50;
    color: #fff;
}

/* Стили для radio-выбора типа доставки (відділення/поштомат) */
.checkout-delivery-type {
    display: flex;
    gap: 1.5em;
    margin-bottom: 1em;
}

.checkout-delivery-type .checkout-radio-option input[type="radio"]:checked + label:before {
    background: #ed4933;
    color: #fff;
}

/* Блок реквизитов */
.checkout-bank-details {
    display: none;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    padding: 1em;
    margin-top: 0.75em;
    border-left: 3px solid #4CAF50;
    font-size: 0.95em;
    color: rgba(0, 0, 0, 0.75);
    line-height: 1.6;
}

.checkout-bank-details.visible {
    display: block;
}

.req-title {
    font-size: 0.9em;
    margin-bottom: 0.5em;
    color: rgba(0, 0, 0, 0.7);
}

.req-field {
    margin-top: 0.5em;
}

.req-field label {
    display: block;
    font-size: 0.85em;
    color: rgba(0, 0, 0, 0.55);
    margin-bottom: 0.2em;
}

.req-input {
    width: 100%;
    padding: 0.4em 0.6em;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    background: #fff;
    font-size: 0.9em;
    cursor: pointer;
    color: #333;
    outline: none;
    box-sizing: border-box;
}

.req-input:hover {
    border-color: #4CAF50;
    background: #f9fff9;
}

/* --- Список товаров в итогах --- */
.checkout-items {
    max-height: 250px;
    overflow-y: auto;
    margin-bottom: 1em;
}

.checkout-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5em 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 0.95em;
}

.checkout-summary-item:last-child {
    border-bottom: none;
}

.checkout-summary-item-name {
    flex: 1;
    color: rgba(0, 0, 0, 0.8);
}

.checkout-summary-item-qty {
    display: flex;
    align-items: center;
    gap: 0.4em;
    margin: 0 0.75em;
    white-space: nowrap;
}

.checkout-qty-btn {
    width: 24px;
    height: 24px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.05);
    color: #333;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    padding: 0;
    line-height: 1;
    transition: background 0.2s;
}

.checkout-qty-btn:hover {
    background: rgba(0, 0, 0, 0.12);
}

.checkout-qty-count {
    color: rgba(0, 0, 0, 0.7);
    min-width: 1.2em;
    text-align: center;
}

.checkout-summary-item-price {
    color: #333;
    font-weight: 600;
    white-space: nowrap;
}

/* --- Строки итогов (подсчёт) --- */
.checkout-totals {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 0.75em;
    margin-bottom: 1.5em;
}

.checkout-totals-row {
    display: flex;
    justify-content: space-between;
    padding: 0.35em 0;
    font-size: 0.95em;
    color: rgba(0, 0, 0, 0.7);
}

.checkout-totals-final {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    margin-top: 0.5em;
    padding-top: 0.5em;
}

/* --- Валидация: ошибки --- */
.checkout-field.error input,
.checkout-field.error select {
    box-shadow: 0 0 0 2px #ed4933;
}

.checkout-field .error-message {
    color: #ed4933;
    font-size: 0.8em;
    margin-top: 0.3em;
    display: none;
}

.checkout-field.error .error-message {
    display: block;
}

/* --- Экран успешного оформления --- */
.checkout-success {
    text-align: center;
    padding: 3em 2em;
}

.checkout-success .icon {
    font-size: 3em;
    color: #4CAF50;
    margin-bottom: 0.5em;
}

.checkout-success h3 {
    margin-bottom: 0.5em;
}

.checkout-success p {
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 1.5em;
}

.checkout-order-number {
    font-size: 1.1em;
    color: #333 !important;
    margin: 1em 0;
}

.checkout-order-number strong {
    color: #ed4933;
    font-size: 1.2em;
}

/* --- Экран загрузки --- */
.checkout-loading {
    text-align: center;
    padding: 3em 2em;
}

.checkout-loading h3 {
    margin: 1em 0 0.5em 0;
    color: #333;
}

.checkout-loading p {
    color: rgba(0, 0, 0, 0.6);
}

/* Спиннер (анимированный индикатор загрузки) */
.spinner {
    margin: 0 auto;
    width: 50px;
    height: 50px;
    border: 4px solid #F5F0E8;
    border-top: 4px solid #ed4933;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- Экран ошибки --- */
.checkout-error {
    text-align: center;
    padding: 3em 2em;
}

.checkout-error .icon {
    font-size: 3em;
    color: #ed4933;
    margin-bottom: 0.5em;
}

.checkout-error h3 {
    margin-bottom: 0.5em;
    color: #333;
}

.checkout-error p {
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 1.5em;
}

/* Кнопки в модальных окнах — тёмная рамка и текст на бежевом фоне */
.modal-content .button,
.modal-content button {
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);
    color: #333;
}

.modal-content .button:hover,
.modal-content button:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

.modal-content .button.primary,
.modal-content button.primary {
    box-shadow: none !important;
    color: #333 !important;
}

/* ============================================
   9. LIGHTBOX (ПОЛНОЭКРАННЫЙ ПРОСМОТР ФОТО)
   ============================================ */

/* Оверлей lightbox */
.lightbox {
    display: none;
    position: fixed;
    z-index: 20000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s;
}

.lightbox.show {
    display: flex;
}

/* Изображение в lightbox */
.lightbox > img {
    max-width: 90%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
    animation: slideIn 0.3s;
}

/* Кнопка закрытия lightbox */
.lightbox-close {
    position: absolute;
    top: 15px;
    right: 25px;
    color: #fff;
    font-size: 36px;
    font-weight: bold;
    cursor: pointer;
    z-index: 2;
    transition: color 0.2s;
}

.lightbox-close:hover {
    color: #ed4933;
}

/* Стрелки навигации lightbox */
.lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: none;
    font-size: 1.8em;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
    z-index: 2;
    padding: 0;
    line-height: 1;
}

.lightbox-arrow:hover {
    background: rgba(255, 255, 255, 0.35);
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

/* ============================================
   10. АДАПТИВНЫЙ ДИЗАЙН (ПЛАНШЕТЫ И МОБИЛЬНЫЕ)
   ============================================ */

/* Шаблон на мобильных ставит height: auto — масштабируем по пропорциям фото (2:3) */
@media screen and (max-width: 736px) {
    #banner {
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 2 / 3;
    }
}

/* Стили для планшетов (ширина экрана до 980px) */
@media screen and (max-width: 980px) {
    /* Уменьшаем минимальную ширину карточек товаров */
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 1.5em;
    }

    /* Увеличиваем ширину модального окна на маленьких экранах */
    .modal-content {
        width: 95%;
        padding: 1.5em;
    }

    /* Делаем модальное окно одноколоночным (изображение сверху, текст снизу) */
    .modal-body {
        flex-direction: column;
    }

    /* Уменьшаем высоту изображения в модальном окне */
    .gallery > img {
        max-height: 300px;
    }

    .gallery-thumb {
        width: 50px;
        height: 50px;
    }

    /* Checkout: одна колонка */
    .checkout-grid {
        flex-direction: column;
    }

    .checkout-summary {
        position: static;
    }

    /* Уменьшаем высоту изображений в карточках */
    .product-image {
        height: 200px;
    }

    /* Ограничиваем высоту списка корзины по экрану */
    .cart-items {
        max-height: 70vh;
    }
}

/* Стили для мобильных телефонов (ширина экрана до 736px) */
@media screen and (max-width: 736px) {
    /* Одна колонка для товаров на мобильных */
    .products-grid {
        grid-template-columns: 1fr;
    }

    /* Кнопки в столбик вместо строки */
    .modal-actions,
    .cart-actions {
        flex-direction: column;
    }

    /* Кнопки на всю ширину */
    .modal-actions button,
    .cart-actions button {
        width: 100%;
    }

    /* Checkout: поля в столбик */
    .checkout-row {
        flex-direction: column;
    }

    /* Уменьшаем высоту изображений товаров */
    .product-image {
        height: 180px;
    }

    /* Уменьшаем padding модальных окон */
    .modal-content {
        width: 98%;
        padding: 1em;
    }

    /* Уменьшаем изображения в корзине */
    .cart-item-image {
        width: 60px;
        height: 60px;
    }

    /* Уменьшаем миниатюры галереи */
    .gallery-thumb {
        width: 40px;
        height: 40px;
    }

    /* Уменьшаем высоту галереи */
    .gallery > img {
        max-height: 250px;
    }

    /* Ограничиваем высоту списка корзины */
    .cart-items {
        max-height: 50vh;
    }

    /* Уменьшаем кнопку закрытия */
    .close {
        font-size: 24px;
        right: 12px;
        top: 8px;
    }

    /* Уменьшаем заголовки секций checkout */
    .checkout-section-title {
        font-size: 1em;
    }

    /* Ограничиваем высоту списка товаров в checkout */
    .checkout-items {
        max-height: 180px;
    }

    /* Уменьшаем цену в модалке */
    .modal-price {
        font-size: 1.5em;
    }

    /* Lightbox: стрелки ближе к краям */
    .lightbox-prev {
        left: 10px;
    }

    .lightbox-next {
        right: 10px;
    }

    .lightbox-arrow {
        width: 40px;
        height: 40px;
        font-size: 1.4em;
    }

    .lightbox-close {
        top: 10px;
        right: 15px;
        font-size: 30px;
    }
}

/* Стили для маленьких телефонов (ширина экрана до 480px) */
@media screen and (max-width: 480px) {
    /* Уменьшаем высоту изображений товаров */
    .product-image {
        height: 150px;
    }

    /* Уменьшаем padding карточки */
    .product-info {
        padding: 1em;
    }

    /* Уменьшаем размер названия товара */
    .product-name {
        font-size: 1em;
    }

    /* Уменьшаем размер цены */
    .product-price {
        font-size: 1.2em;
    }

    /* Минимальный padding модального окна */
    .modal-content {
        padding: 0.75em;
    }

    /* Уменьшаем изображения в корзине */
    .cart-item-image {
        width: 50px;
        height: 50px;
    }

    /* Уменьшаем миниатюры галереи */
    .gallery-thumb {
        width: 35px;
        height: 35px;
    }

    .gallery-thumbnails {
        gap: 4px;
    }

    /* Уменьшаем стрелки галереи */
    .gallery-arrow {
        width: 32px;
        height: 32px;
        font-size: 1.2em;
    }

    /* Уменьшаем цену в модалке */
    .modal-price {
        font-size: 1.3em;
        margin-bottom: 0.5em;
    }

    /* Уменьшаем badge корзины */
    .cart-count {
        width: 16px;
        height: 16px;
        font-size: 0.55em;
    }

    /* Уменьшаем padding итогов checkout */
    .checkout-summary {
        padding: 1em;
    }

    /* Уменьшаем gap в товаре корзины */
    .cart-item {
        gap: 0.5em;
        padding: 0.75em;
    }

    /* Уменьшаем кнопки +/- в корзине */
    .cart-item-quantity button {
        width: 26px;
        height: 26px;
        font-size: 1em;
    }

    /* Уменьшаем кнопку удаления */
    .cart-item-remove {
        padding: 0.4em 0.75em;
        font-size: 0.85em;
    }
}

/* ============================================
   КОНЕЦ ФАЙЛА
   Основные цвета для быстрого изменения:
   - Красный акцент: #ed4933
   - Бежевый фон: #F5F0E8
   - Тёмный текст: #333
   ============================================ */