/* ========== БАЗОВЫЕ СТИЛИ ========== */
    /* Сбрасываем отступы и поля у всех элементов */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Размеры включают padding и border */
}

/* Основные стили для всей страницы */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6; /* Высота строки для читаемости */
    color: #1a1a1a; /* Основной цвет текста */
    background: #fafafa; /* Светлый фон страницы */
}

/* Контейнер для центрирования контента */
.container {
    max-width: 1200px; /* Максимальная ширина */
    margin: 0 auto; /* Центрирование */
    padding: 20px; /* Внутренние отступы */
}

/* ========== ХЛЕБНЫЕ КРОШКИ ========== */
/* Навигационная цепочка вверху страницы */
.breadcrumb {
    display: flex; /* Элементы в ряд */
    align-items: center; /* Вертикальное выравнивание */
    gap: 8px; /* Расстояние между элементами */
    margin-bottom: 32px; /* Отступ снизу */
    font-size: 14px; /* Размер шрифта */
    color: #666; /* Серый цвет */
}

/* Ссылки в хлебных крошках */
.breadcrumb a {
    color: #666;
    text-decoration: none; /* Убираем подчеркивание */
    transition: color 0.2s; /* Плавная смена цвета */
}

/* Эффект при наведении на ссылки */
.breadcrumb a:hover {
    color: #00b894; /* Зеленый цвет бренда */
}

/* Разделители между элементами */
.breadcrumb span {
    color: #ccc; /* Светло-серый */
}

/* ========== ОСНОВНАЯ ИНФОРМАЦИЯ О ТОВАРЕ ========== */
/* Главный блок с информацией о товаре (2 колонки) */
.product-details {
    display: grid; /* Сетка */
    grid-template-columns: 1fr 1fr; /* Две равные колонки */
    gap: 60px; /* Расстояние между колонками */
    margin-bottom: 60px; /* Отступ снизу */
    background: white; /* Белый фон */
    border-radius: 16px; /* Скругленные углы */
    padding: 40px; /* Внутренние отступы */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); /* Легкая тень */
}

/* ========== ИЗОБРАЖЕНИЯ ТОВАРА ========== */
/* Блок с фотографиями товара */
.product-images {
    position: sticky; /* Прилипание при скролле (только на десктопе) */
    top: 20px; /* Отступ от верха при прилипании */
    height: fit-content; /* Высота по содержимому */
}

/* Главное изображение товара */
.main-image {
    margin-bottom: 16px; /* Отступ снизу */
}

/* Стили для главной фотографии */
.main-image img {
    width: 100%; /* На всю ширину контейнера */
    height: 400px; /* Фиксированная высота */
    object-fit: cover; /* Обрезка с сохранением пропорций */
    border-radius: 12px; /* Скругленные углы */
    transition: transform 0.3s ease; /* Плавное увеличение */
}

/* Эффект увеличения при наведении */
.main-image img:hover {
    transform: scale(1.02); /* Увеличение на 2% */
}

/* Галерея миниатюр */
.image-gallery {
    display: flex; /* Элементы в ряд */
    gap: 12px; /* Расстояние между миниатюрами */
    overflow-x: auto; /* Горизонтальная прокрутка если много фото */
    padding: 4px; /* Небольшие отступы */
}

/* Контейнер для миниатюры */
.thumbnail {
    flex-shrink: 0; /* Не сжимать */
}

/* Стили миниатюр */
.thumbnail img {
    width: 70px; /* Фиксированная ширина */
    height: 70px; /* Фиксированная высота */
    object-fit: cover; /* Обрезка */
    border-radius: 8px; /* Скругление */
    cursor: pointer; /* Курсор "рука" */
    border: 2px solid transparent; /* Прозрачная рамка */
    transition: all 0.2s; /* Плавные переходы */
}

/* Эффект при наведении на миниатюру */
.thumbnail img:hover {
    border-color: #00b894; /* Зеленая рамка */
    transform: translateY(-2px); /* Подъем на 2px */
}

/* ========== ИНФОРМАЦИЯ О ТОВАРЕ ========== */
/* Заголовок товара */
.product-info h1 {
    font-size: 32px; /* Большой размер */
    font-weight: 600; /* Полужирный */
    margin-bottom: 16px; /* Отступ снизу */
    line-height: 1.3; /* Высота строки */
}

/* Бейдж категории */
.category-badge {
    margin-bottom: 20px; /* Отступ снизу */
}

/* Ссылка на категорию */
.category-badge a {
    background: linear-gradient(135deg, #00b894, #00a085); /* Градиент */
    color: white; /* Белый текст */
    padding: 6px 16px; /* Внутренние отступы */
    text-decoration: none; /* Без подчеркивания */
    border-radius: 20px; /* Закругленная форма */
    font-size: 13px; /* Маленький шрифт */
    font-weight: 500; /* Средняя жирность */
    transition: transform 0.2s; /* Плавное движение */
}

/* Эффект при наведении на категорию */
.category-badge a:hover {
    transform: translateY(-1px); /* Подъем */
    box-shadow: 0 4px 12px rgba(0, 184, 148, 0.3); /* Тень */
}

/* Блок с ценой */
.price {
    margin: 24px 0; /* Отступы сверху и снизу */
}

/* Цена товара */
.current-price {
    font-size: 36px; /* Большой размер */
    font-weight: 700; /* Жирный шрифт */
    color: #00b894; /* Зеленый цвет бренда */
}

/* Короткое описание товара */
.short-description {
    margin: 24px 0; /* Отступы */
    color: #666; /* Серый цвет */
    line-height: 1.7; /* Высота строки для читаемости */
    font-size: 16px; /* Размер шрифта */
}

/* ========== ДОБАВЛЕНИЕ В КОРЗИНУ ========== */
/* Секция с выбором количества и кнопкой */
.add-to-cart-section {
    margin: 36px 0; /* Отступы */
    padding: 24px; /* Внутренние отступы */
    background: #f8f9fa; /* Светло-серый фон */
    border-radius: 12px; /* Скругление */
    border: 1px solid #e9ecef; /* Тонкая рамка */
}

/* Подпись для выбора количества */
.quantity-selector label {
    font-weight: 500; /* Средняя жирность */
    color: #333; /* Темный цвет */
    margin-bottom: 12px; /* Отступ снизу */
    display: block; /* На всю ширину */
}

/* Контролы для изменения количества */
.quantity-controls {
    display: flex; /* В ряд */
    align-items: center; /* Вертикальное выравнивание */
    gap: 12px; /* Расстояние между элементами */
    margin-bottom: 20px; /* Отступ снизу */
}

/* Кнопки + и - */
.quantity-controls button {
    width: 44px; /* Фиксированная ширина */
    height: 44px; /* Фиксированная высота */
    background: white; /* Белый фон */
    border: 2px solid #e9ecef; /* Серая рамка */
    border-radius: 8px; /* Скругление */
    cursor: pointer; /* Курсор "рука" */
    display: flex; /* Для центрирования содержимого */
    align-items: center; /* Вертикальное центрирование */
    justify-content: center; /* Горизонтальное центрирование */
    font-weight: 600; /* Жирный шрифт */
    transition: all 0.2s; /* Плавные переходы */
}

/* Эффект при наведении на кнопки */
.quantity-controls button:hover {
    border-color: #00b894; /* Зеленая рамка */
    color: #00b894; /* Зеленый текст */
}

/* Поле ввода количества */
.quantity-controls input {
    width: 80px; /* Ширина */
    height: 44px; /* Высота */
    text-align: center; /* Центрирование текста */
    border: 2px solid #e9ecef; /* Рамка */
    border-radius: 8px; /* Скругление */
    font-size: 16px; /* Размер шрифта */
    font-weight: 500; /* Средняя жирность */
}

/* Фокус на поле ввода */
.quantity-controls input:focus {
    outline: none; /* Убираем стандартную рамку */
    border-color: #00b894; /* Зеленая рамка */
}

/* Кнопка "Добавить в корзину" */
.add-to-cart-btn {
    width: 100%; /* На всю ширину */
    background: linear-gradient(135deg, #00b894, #00a085); /* Градиент */
    color: white; /* Белый текст */
    padding: 16px 24px; /* Внутренние отступы */
    border: none; /* Без рамки */
    border-radius: 12px; /* Скругление */
    cursor: pointer; /* Курсор "рука" */
    font-size: 16px; /* Размер шрифта */
    font-weight: 600; /* Жирный шрифт */
    display: flex; /* Для размещения иконки и текста */
    align-items: center; /* Вертикальное выравнивание */
    justify-content: center; /* Центрирование */
    gap: 8px; /* Расстояние между иконкой и текстом */
    transition: all 0.2s; /* Плавные переходы */
}

/* Эффект при наведении на кнопку (если не заблокирована) */
.add-to-cart-btn:hover:not(:disabled) {
    transform: translateY(-2px); /* Подъем */
    box-shadow: 0 8px 20px rgba(0, 184, 148, 0.3); /* Тень */
}

/* Заблокированная кнопка */
.add-to-cart-btn:disabled {
    background: #ddd; /* Серый фон */
    cursor: not-allowed; /* Курсор "запрещено" */
}

/* ========== ОПИСАНИЕ ТОВАРА ========== */
/* Блок с полным описанием */
.product-description {
    background: white; /* Белый фон */
    padding: 40px; /* Внутренние отступы */
    border-radius: 16px; /* Скругление */
    margin-bottom: 60px; /* Отступ снизу */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); /* Тень */
}

/* Заголовок описания */
.product-description h2 {
    font-size: 24px; /* Размер шрифта */
    font-weight: 600; /* Жирный */
    margin-bottom: 24px; /* Отступ снизу */
    color: #1a1a1a; /* Темный цвет */
}

/* Текст описания */
.product-description div {
    line-height: 1.8; /* Высота строки */
    color: #666; /* Серый цвет */
}




/* ========== ПОХОЖИЕ ТОВАРЫ ========== */
/* Секция с похожими товарами */
.related-section {
    margin: 60px 0; /* Отступы сверху и снизу */
}

/* Заголовок секции */
.related-section h2 {
    font-size: 28px; /* Размер шрифта */
    font-weight: 600; /* Жирный */
    margin-bottom: 32px; /* Отступ снизу */
    text-align: center; /* Центрирование */
}

/* Сетка похожих товаров */
.related-products {
    display: grid; /* Сетка */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Адаптивные колонки */
    gap: 24px; /* Расстояние между карточками */
}

/* Карточка похожего товара */
.related-item {
    background: white; /* Белый фон */
    border-radius: 16px; /* Скругление */
    padding: 24px; /* Внутренние отступы */
    text-align: center; /* Центрирование содержимого */
    transition: all 0.3s ease; /* Плавные переходы */
    border: 1px solid #f0f0f0; /* Тонкая рамка */
}

/* Эффект при наведении на карточку */
.related-item:hover {
    transform: translateY(-4px); /* Подъем */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); /* Тень */
}

/* Изображение похожего товара */
.related-image {
    margin-bottom: 20px; /* Отступ снизу */
}

/* Ссылка на изображение */
.related-image a {
    display: block; /* На всю ширину */
    border-radius: 12px; /* Скругление */
    overflow: hidden; /* Обрезка выходящего контента */
}

/* Само изображение */
.related-image img {
    width: 100%; /* На всю ширину */
    height: 300px; /* Фиксированная высота */
    object-fit: cover; /* Обрезка */
    transition: transform 0.3s ease; /* Плавное увеличение */
}

/* Увеличение изображения при наведении на карточку */
.related-item:hover .related-image img {
    transform: scale(1.05); /* Увеличение на 5% */
}

/* Информация о похожем товаре */
.related-info h4 {
    margin: 16px 0; /* Отступы */
    font-size: 18px; /* Размер шрифта */
    font-weight: 600; /* Жирный */
    line-height: 1.4; /* Высота строки */
}

/* Ссылка на товар */
.related-info h4 a {
    text-decoration: none; /* Без подчеркивания */
    color: #1a1a1a; /* Темный цвет */
    transition: color 0.2s; /* Плавная смена цвета */
}

/* Эффект при наведении на название */
.related-info h4 a:hover {
    color: #00b894; /* Зеленый цвет */
}

/* Описание похожего товара */
.related-info p {
    font-size: 14px; /* Маленький шрифт */
    color: #666; /* Серый цвет */
    margin: 12px 0; /* Отступы */
    line-height: 1.5; /* Высота строки */
}

/* Цена похожего товара */
.related-price {
    font-weight: 700 !important; /* Жирный шрифт */
    color: #00b894 !important; /* Зеленый цвет */
    margin: 16px 0 !important; /* Отступы */
    font-size: 20px !important; /* Размер шрифта */
}

/* Действия с похожим товаром */
.related-actions {
    margin-top: 20px; /* Отступ сверху */
}

/* Кнопка добавления в корзину в карточке */
.related-actions .add-to-cart-btn {
    width: 100%; /* На всю ширину */
    padding: 12px 16px; /* Внутренние отступы */
    font-size: 14px; /* Размер шрифта */
    margin-bottom: 12px; /* Отступ снизу */
}

/* Ссылка "Посмотреть" */
.related-actions a {
    background: #f8f9fa; /* Светлый фон */
    color: #666; /* Серый цвет */
    padding: 8px 16px; /* Внутренние отступы */
    border-radius: 8px; /* Скругление */
    text-decoration: none; /* Без подчеркивания */
    font-size: 13px; /* Маленький шрифт */
    display: inline-flex; /* Для размещения иконки */
    align-items: center; /* Вертикальное выравнивание */
    gap: 6px; /* Расстояние между иконкой и текстом */
    transition: all 0.2s; /* Плавные переходы */
}

/* Эффект при наведении на ссылку */
.related-actions a:hover {
    background: #e9ecef; /* Более темный фон */
    color: #333; /* Более темный текст */
}

/* ========== АДАПТИВНЫЙ ДИЗАЙН ========== */
/* Планшеты и маленькие ноутбуки */
@media (max-width: 768px) {
    .container {
        padding: 16px; /* Меньшие отступы */
    }

    .product-details {
        grid-template-columns: 1fr; /* Одна колонка вместо двух */
        gap: 32px; /* Меньший разрыв */
        padding: 24px; /* Меньшие внутренние отступы */
    }

    /* ✅ ИСПРАВЛЕНИЕ: Убираем sticky на мобильных */
    .product-images {
        position: static; /* Убираем прилипание */
        top: auto; /* Сбрасываем позицию */
        height: auto; /* Автоматическая высота */
        margin-bottom: 20px; /* Отступ снизу */
    }

    .product-info h1 {
        font-size: 24px; /* Меньший размер заголовка */
    }

    .current-price {
        font-size: 28px; /* Меньший размер цены */
    }

    .related-products {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Меньшие карточки */
        gap: 20px; /* Меньший разрыв */
    }

    .breadcrumb {
        font-size: 12px; /* Меньший шрифт */
        flex-wrap: wrap; /* Перенос на новую строку */
    }
}

/* Мобильные телефоны */
@media (max-width: 480px) {
    .main-image img {
        height: 280px; /* Меньшая высота изображения */
    }

    .product-details {
        padding: 20px; /* Еще меньшие отступы */
    }

    .related-image img {
        height: 160px; /* Меньшие изображения в похожих товарах */
    }

    /* ✅ ДОПОЛНИТЕЛЬНО: Убираем sticky и на очень маленьких экранах */
    .product-images {
        position: static; /* Убираем прилипание */
        top: auto; /* Сбрасываем позицию */
        height: auto; /* Автоматическая высота */
        margin-bottom: 20px; /* Отступ снизу */
    }
}

/* ========== СОСТОЯНИЯ ЗАГРУЗКИ И АНИМАЦИИ ========== */
/* Состояние загрузки */
.loading {
    opacity: 0.7; /* Полупрозрачность */
    pointer-events: none; /* Блокируем клики */
}

/* Анимация пульсации */
@keyframes pulse {
    0% { transform: scale(1); } /* Обычный размер */
    50% { transform: scale(1.05); } /* Увеличение */
    100% { transform: scale(1); } /* Возврат к обычному */
}

/* Класс для применения анимации */
.success-pulse {
    animation: pulse 0.3s ease-in-out; /* Быстрая пульсация */
}