/* ==========================================
   RESPONSIVE STYLES
   ========================================== */

/* --- ПЛАНШЕТЫ (до 1024px) --- */
@media (max-width: 1024px) {
    .container { padding: 0 15px; }
    
    .shop-container { gap: 20px; }
    
    .sidebar-menu { width: 220px; }
    
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

/* --- МАЛЕНЬКИЕ ПЛАНШЕТЫ (до 992px) --- */
@media (max-width: 992px) {
    .top-nav { display: none; } /* Скрываем верхнюю полоску */

    /* Шапка: логотип и основные кнопки */
    .header-left { gap: 15px; }
    .logo img { height: 45px; }
    
    .order-type-switch { padding: 2px; }
    .switch-btn { padding: 8px 15px; font-size: 13px; }
    
    .address-info { display: none; } /* Скрываем адрес в строке, оставим в модалке */
    .cart-branch-info { display: none; }

    .checkout-layout { flex-direction: column; }
    .checkout-form-section { max-width: 100%; }
    .checkout-stepper-section { width: 100%; position: static; }
}

/* --- МОБИЛЬНЫЕ (до 768px) --- */
@media (max-width: 768px) {
    .main-header { padding: 15px 0; }
    
    /* Промо-баннеры: превращаем в горизонтальный свайп */
    .promo-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 15px;
        margin: 0 -15px;
        padding: 0 15px 10px 15px;
    }
    .promo-grid::-webkit-scrollbar { display: none; }
    .promo-item {
        flex: 0 0 85%;
        scroll-snap-align: center;
    }

    /* Магазин: Сайдбар становится горизонтальным меню */
    .shop-container { flex-direction: column; }
    
    .sidebar-menu {
        width: calc(100% + 30px);
        margin: 0 -15px 20px -15px;
        border-radius: 0;
        position: sticky;
        top: 0;
        z-index: 100;
        display: flex;
        overflow-x: auto;
        padding: 10px 15px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }
    .sidebar-menu ul { display: flex; gap: 5px; }
    .sidebar-menu li a {
        padding: 8px 15px;
        white-space: nowrap;
        border-left: none;
        border-bottom: 3px solid transparent;
        font-size: 14px;
        flex-direction: column;
        gap: 5px;
    }
    .sidebar-menu li.active a {
        border-left-color: transparent;
        border-bottom-color: #f28b1a;
    }

    /* Сетка товаров */
    .category-title { font-size: 24px; top: 75px; } /* С учетом высоты меню */
    .products-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки на мобиле */
        gap: 10px;
    }
    .product-card { padding: 12px; }
    .product-image { height: 120px; }
    .product-name { font-size: 14px; min-height: 40px; }
    .price-value { font-size: 15px; }
    .btn-add-circle { width: 32px; height: 32px; font-size: 14px; }

    /* Модальное окно товара */
    .product-modal-content {
        max-width: 100%;
        height: 100%;
        border-radius: 0;
        padding: 20px;
        overflow-y: auto;
    }
    .product-modal-body { flex-direction: column; gap: 20px; }
    .product-modal-left img { max-width: 200px; }
    .product-modal-footer {
        flex-direction: column;
        position: sticky;
        bottom: 0;
        background: var(--bg-color);
        padding-bottom: 20px;
    }
    .btn-add-to-cart { width: 100%; }

    /* Футер */
    .footer-links-row { flex-direction: column; text-align: center; }
    .app-links { flex-direction: row; justify-content: center; }
    .footer-bottom { flex-direction: column; gap: 20px; text-align: center; }
    .footer-copyright { flex-direction: column; }
    
    /* Корзина (Sidebar) */
    .cart-sidebar {
        width: 100%;
        right: -100%;
    }

    .cart-sidebar-footer {
        padding-bottom: 60px; 
    }

    #productModal .modal-content {
        max-width: 100%;
        height: 100%;
        border-radius: 0;
        padding: 60px 20px 20px 20px; /* Отступ сверху для кнопки */
        overflow-y: auto;
    }

    #productModal .modal-body {
        flex-direction: column;
        gap: 20px;
    }

    /* Перемещаем кнопку закрыть ВНУТРЬ модального окна на мобилке */
    #productModal .modal-close {
        top: 15px; /* Позиционируем внутри, сверху справа */
        right: 15px;
        background: var(--white);
        width: 35px;
        height: 35px;
        border-radius: 50%;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        opacity: 1;
        z-index: 1002;
    }

    /* ==============================
       2. ИСПРАВЛЕНИЕ КНОПОК CHECKOUT
       ============================== */
    
    .checkout-page {
        padding: 20px 10px;
    }

    .checkout-page-title {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .checkout-layout {
        flex-direction: column;
    }

    .checkout-form-section {
        max-width: 100%;
        padding: 20px;
    }

    .checkout-row-3, .checkout-row-2 {
        flex-direction: column;
        gap: 15px;
    }

    .checkout-stepper-section {
        width: 100%;
        position: static;
        margin-top: 20px;
    }

    /* Сплющенные кнопки чекаута: делаем их вертикальными */
    .checkout-actions {
        flex-direction: column;
        gap: 10px;
    }

    /* Убираем flex: 1 и делаем на всю ширину */
    .checkout-actions button {
        width: 100%;
        flex: none;
        padding: 18px; /* Чуть больше паддинг для удобства тапа */
        font-size: 16px;
    }


}

/* --- МАЛЕНЬКИЕ МОБИЛЬНЫЕ (до 480px) --- */
@media (max-width: 480px) {
    .header-flex { 
        flex-wrap: nowrap; /* Запрещаем перенос */
        gap: 10px; 
        justify-content: space-between;
    }

    .header-left { 
        width: auto; 
        flex-shrink: 1; /* Позволяем блоку немного сжаться */
        overflow: hidden; 
    }

    .header-right { 
        width: auto; 
        flex-shrink: 0; /* Корзина не должна сжиматься */
    }

    .logo img { 
        height: 35px; /* Уменьшаем лого, чтобы всё влезло */
    }

    .switch-btn { 
        padding: 6px 10px; 
        font-size: 11px; 
    }
    
    .btn-cart {
        width: 40px;
        height: 40px;
        min-width: 40px;
        padding: 0;
    }
    
    #headerCartCount {
        font-size: 14px;
    }
}