/* Основной цвет фона сайта */
body {
    background-color: white !important;
}

main {
    flex: 1;
}

/* Стили для навигации */
.navbar-nav .nav-link.active {
    font-weight: 500;
    border-bottom: 2px solid white;
}

/* Карточки товаров */
.product-card {
    transition: transform 0.3s;
    margin-bottom: 20px;
    height: 100%;
}

/* стили раздела Новинки 3 шт */
.new-products .card {
    transition: transform 0.3s ease;
    border: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 50%;
    width: 250px;
    height: 250px;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
    aspect-ratio: 1/1;
}

.new-products .card:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.new-products .card-img-wrapper {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}

.new-products .card-img-top {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Стили для подписей товаров под карточками в разделе "новинки" */
.new-products .product-caption {
    text-align: center;
    margin-top: 15px;
}

.new-products .product-caption p {
    font-size: 1rem;
    margin-bottom: 5px;
}

.new-products .product-caption h6 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0;
}


.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.product-img {
    height: 200px;
    object-fit: cover;
}

/* Адаптивность */
@media (max-width: 768px) {
    .product-img {
        height: 150px;
    }
    
    .navbar-brand {
        font-size: 1.2rem;
    }
}

/* Стили для корзины */
.cart-item {
    transition: background-color 0.3s;
}

.cart-item:hover {
    background-color: #f8f9fa;
}

.quantity-input {
    max-width: 80px;
    text-align: center;
}

/* Стили для разделения корзины 60/40 */
.cart-container {
    display: flex;
    gap: 1.5rem;
}

.cart-items-section {
    flex: 0 0 60%;
    max-width: 60%;
}

.cart-order-section {
    flex: 0 0 40%;
    max-width: 40%;
}

/* Убираем ВСЕ рамки и разделители у карточек в корзине */
.cart-items-section .card,
.cart-items-section .card-header,
.cart-items-section .card-body,
.cart-order-section .card,
.cart-order-section .card-header,
.cart-order-section .card-body {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.cart-items-section .card .card {
    margin-bottom: 1rem !important;
}

.cart-items-section .card .card:hover {
    box-shadow: none !important;
    background: transparent !important;
}

/* Убираем скругления у изображений */
.cart-items-section .rounded {
    border-radius: 0 !important;
}

/* Кнопка "Оформить заказ" */
.btn-success {
    background-color: #ff8b00 !important;
    border-color: #ff8b00 !important;
    width: 30% !important;
}

.btn-success:hover {
    background-color: #e67a00 !important;
    border-color: #e67a00 !important;
}

/* Кнопка "Продолжить покупки" */
.btn-outline-secondary {
    width: 30% !important;
}

/* Кнопки + и - в корзине */
.cart-items-section .btn-outline-secondary {
    width: auto !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 4px !important;
}

.cart-items-section .btn-outline-secondary:hover {
    background-color: #f8f9fa !important;
    border-color: #adb5bd !important;
}

/* Кнопка "Оформить заказ" в одну строку для всех устройств */
.cart-order-section .btn-success,
.cart-order-section .d-grid .btn {
    white-space: nowrap !important;
    width: 100% !important;
    text-align: center !important;
    display: block !important;
}

@media (max-width: 991px) {
    .cart-container {
        flex-direction: column;
    }
    
    .cart-items-section,
    .cart-order-section {
        flex: 1;
        max-width: 100%;
    }
    
    /* Кнопка "Оформить заказ" в одну строку на мобильных */
    .cart-order-section .btn-success,
    .cart-order-section .d-grid .btn {
        white-space: nowrap !important;
        width: 100% !important;
        text-align: center !important;
        display: block !important;
    }
}

/* Адаптивные стили */
@media (max-width: 768px) {
    .table-responsive {
        font-size: 0.9rem;
    }
    
    .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
}

/* Анимации */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 0.5s ease-in;
}

/* /////////// Карусель "Хит продаж" ///////// */
.hits-carousel {
    padding: 2rem 0;
    background-color: #ffffff;
    position: relative;
}

.hits-header {
    text-align: center;
    margin-bottom: 2rem;
}

.hits-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    overflow: hidden;
}

.hits-slider {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(25% - 15px); /* 4 колонки с отступом */
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 20px 0;
    scrollbar-width: none; /* Скрываем скроллбар в Firefox */
}

.hits-slider::-webkit-scrollbar {
    display: none; /* Скрываем скроллбар в Chrome/Safari */
}

.hit-card {
    scroll-snap-align: start;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s;
    width: 100%;
    margin: 0;
}

.hit-card:hover {
    transform: translateY(-5px);
}

.hit-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.hit-card-body {
    padding: 15px;
    text-align: left;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.hit-card-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    padding: 10px 0;
    text-align: left;
}

.hit-card h5 {
    margin: 0 0 8px 0;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    text-align: left;
}

.hit-card p {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #2c3e50;
    text-align: left;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: white;
    border: none;
    border-radius: 50%;
    box-shadow: none;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #333;
    transition: all 0.3s ease;
}

.carousel-btn:hover {
    border: 2px solid #333;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.carousel-btn.prev {
    left: 12px;
}

.carousel-btn.next {
    right: 12px;
}

/* Адаптивность */
@media (max-width: 1200px) {
    .hits-slider {
        grid-auto-columns: calc(33.333% - 13.33px); /* 3 колонки на планшетах */
    }
}
@media (max-width: 768px) {
    .hits-slider {
        grid-auto-columns: calc(50% - 10px); /* 2 колонки на мобильных */
    }
}
@media (max-width: 480px) {
    .hits-slider {
        grid-auto-columns: 100%; /* 1 колонка на очень маленьких экранах */
    }
}

/* ////// Блок блога 20шт//////*/
.blog-section {
    padding: 4rem 0;
    background-color: #fff;
}

.blog-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.blog-header {
    text-align: center;
    margin-bottom: 3rem;
}

.blog-header h2 {
    font-size: 2rem;
    color: #2c3e50;
    margin-bottom: 1rem;
}

/* Стили для карточек блога 6 шт*/
.blog-section .card {
    width: 300px;
    height: 300px;
    overflow: hidden;
    margin: 0 auto;
    transition: transform 0.3s ease;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.blog-section .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.blog-section .card-img-top {
    height: 150px;
    object-fit: cover;
    width: 100%;
}

.blog-section .card-body {
    padding: 15px;
    display: flex;
    flex-direction: column;
    height: 150px;
}

.blog-section .card-title {
    font-size: 1.1rem;
    margin-bottom: 10px;
    font-weight: 500;
}

.blog-section .card-text {
    flex-grow: 1;
    font-size: 0.9rem;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

.blog-header p {
    color: #6c757d;
    max-width: 600px;
    margin: 0 auto;
}

.blog-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    margin-bottom: 2rem;
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.blog-card:hover {
    transform: translateY(-5px);
}

.blog-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.blog-card-content {
    padding: 1.5rem;
}

.blog-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: #2c3e50;
}

.blog-card p {
    color: #6c757d;
    margin-bottom: 1rem;
    line-height: 1.6;
}

.blog-meta {
    display: flex;
    justify-content: space-between;
    color: #6c757d;
    font-size: 0.875rem;
}

.read-more {
    display: inline-block;
    color: #28a745;
    text-decoration: none;
    font-weight: 500;
    margin-top: 1rem;
}

.read-more:hover {
    text-decoration: underline;
}

/* Стили для подвала */
.custom-footer {
    background-color: #9dab8a !important;
}

/* ===== Галерея на странице товара =====
   Главное фото сверху, под ним сетка миниатюр по 2 в ряд.
   Раньше миниатюры стояли вертикальным столбиком справа (класс flex-column),
   из-за этого фото на странице товара выстраивались «буквой Г». */
.product-gallery {
    position: relative;   /* нужен для относительного позиционирования внутри */
    max-width: 440px;     /* чтобы галерея не распирала колонку col-md-5 */
}

/* Главное (большое) фото товара — всегда квадрат, без искажений */
.product-gallery .main-image img {
    width: 100%;
    aspect-ratio: 1 / 1;            /* всегда квадрат, даже если исходник прямоугольный */
    object-fit: cover;              /* обрезаем по центру, картинку не растягиваем */
    transition: opacity 0.3s ease;  /* плавная смена при клике по миниатюре */
}

/* Миниатюры: каждая занимает половину ширины галереи (значит ровно 2 в ряд) */
.product-gallery .thumbnail {
    width: 100%;
    aspect-ratio: 1 / 1;            /* миниатюры тоже квадратные */
    object-fit: cover;
    cursor: pointer;                /* по клику меняется главное фото */
    border: 2px solid #dee2e6;      /* обычная серая рамка */
    border-radius: 4px;
    transition: all 0.3s ease;      /* плавный ховер */
}

/* Миниатюра под курсором — чуть увеличивается и получает тень */
.product-gallery .thumbnail:hover {
    transform: scale(1.03);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Миниатюра основного фото — зелёная рамка */
.product-gallery .thumbnail.active {
    border: 2px solid #28a745;
}

/* ===== Телефон (<768px): сетка фото по 2 в ряд, главного фото нет =====
   Раньше здесь была свайп-лента с одним большим фото: на телефоне было видно
   только первое фото и казалось, что фото всего одно. Теперь на телефоне, как
   и на десктопе, показываем все фото сеткой по 2 в ряд, но без главного фото.
   Раскладку по 2 в ряд даёт Bootstrap-сетка `row row-cols-2` из шаблона,
   а внешний вид квадратных фото берётся из общих правил `.product-gallery .thumbnail`. */
@media (max-width: 767.98px) {
    /* главное (большое) фото на телефоне прячем — сразу идут все фото товара */
    .product-gallery.has-thumbs .main-image {
        display: none;
    }

    /* галерея занимает всю ширину колонки, чтобы 2 фото в ряд были крупными
       (на десктопе ширина ограничена 440px, чтобы фото не распирало колонку) */
    .product-gallery {
        max-width: 100%;
    }
}

/* ===== Кнопка «наверх» (стрелочка перемотки страницы вверх) =====
   Разметка лежит в общем шаблоне templates/base/base.html, поэтому кнопка
   есть на всех страницах сайта. Показывается только после прокрутки вниз:
   класс .show добавляет/убирает скрипт static/js/main.js.
   Фон сделан полупрозрачным, чтобы кнопка не перекрывала контент страницы. */
.back-to-top {
    position: fixed;        /* всегда в углу экрана, при прокрутке не уезжает */
    right: 20px;
    bottom: 20px;
    width: 48px;            /* размер 48px удобен и для мыши, и для пальца на телефоне */
    height: 48px;
    display: flex;
    align-items: center;    /* иконка стрелки по центру кнопки */
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;     /* круглая кнопка */
    /* Фон — постоянный акцентный оранжевый сайта (#ff8b00) в той же прозрачности,
       которая раньше была только при наведении: кнопка всегда выглядит подсвеченной.
       Прозрачность оставлена, чтобы кнопка не перекрывала контент страницы. */
    background-color: rgba(255, 139, 0, 0.85);
    /* Стрелка тёмная, а не белая: белая иконка на светлом полупрозрачном оранжевом фоне
       даёт слишком слабый контраст (≈1.6:1 при норме для иконок ≥3:1).
       Тёмно-зелёный #2f3d22 на этом фоне — ≈5:1. */
    color: #2f3d22;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    z-index: 1040;          /* выше контента, но ниже модалок Bootstrap (1055) и баннера cookie (9999) */
    /* По умолчанию кнопка невидима — появляется только после прокрутки страницы вниз */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;   /* скрытую кнопку нельзя случайно нажать или «поймать» тапом */
    transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.3s ease;
}

/* Класс .show включает кнопку (ставится скриптом при прокрутке больше 300px) */
.back-to-top.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Наведение мышью и фокус с клавиатуры фон кнопки отдельно не меняют:
   он постоянно такой же оранжевый, как был раньше при наведении (правило .back-to-top выше).
   Для фокуса с клавиатуры ниже остаётся видимый контур outline. */

/* Кнопка остаётся видимой, пока на ней фокус: после возврата в начало страницы
   скрипт снимает .show, и без этого правила кнопка исчезала бы прямо под фокусом
   (фокус уезжал бы в body). Здесь же — видимый контур для тех, кто ходит сайтом
   с клавиатуры (Tab). */
.back-to-top:focus-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    outline: 2px solid #ff8b00;
    outline-offset: 2px;
}

/* Телефон (<768px): кнопка чуть компактнее и ближе к краю экрана */
@media (max-width: 768px) {
    .back-to-top {
        right: 12px;
        bottom: 12px;
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }
}

/* Кому в системе включено «уменьшить движение» — анимация кнопки не нужна:
   плавный возврат в начало в этом случае и так не делается (см. static/js/main.js) */
@media (prefers-reduced-motion: reduce) {
    .back-to-top {
        transition: none;
    }
}