/* ============================================================
   БАЗОВЫЕ АДАПТИВНЫЕ СТИЛИ
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
}

img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* Контейнер */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* ============================================================
   ПЛАНШЕТЫ (≤ 992px)
   ============================================================ */
@media (max-width: 992px) {
    /* Каталог */
    .catalog-layout {
        grid-template-columns: 1fr !important;
    }
    
    .catalog-sidebar {
        order: -1;
        position: static !important;
    }
    
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
        gap: 15px !important;
    }
    
    /* Категории — раскрываем в горизонтальный список */
    .category-list {
        max-height: 300px;
    }
    
    /* Заголовки */
    h1 { font-size: 24px !important; }
    h2 { font-size: 20px !important; }
    
    /* Карточки товаров */
    .product-card {
        font-size: 14px;
    }
    
    .product-info h3 { font-size: 14px; }
}

/* ============================================================
   ТЕЛЕФОНЫ (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
    /* Шапка */
    .top-bar .container {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .top-bar .contacts {
        flex-direction: column;
        gap: 5px;
        align-items: center;
    }
    
    .header-content {
        flex-direction: column;
        gap: 15px;
    }
    
    .logo h2 { font-size: 20px !important; }
    
    /* Поиск */
    .search-wrapper {
        max-width: 100% !important;
        width: 100%;
    }
    
    .search-form input {
        min-width: auto !important;
    }
    
    /* Навигация */
    .nav-menu {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 5px;
        gap: 15px !important;
        -webkit-overflow-scrolling: touch;
    }
    
    .nav-menu::-webkit-scrollbar {
        height: 3px;
    }
    
    .nav-menu::-webkit-scrollbar-thumb {
        background: #3498db;
        border-radius: 3px;
    }
    
    /* Кнопки */
    .header-actions {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px !important;
    }
    
    .cta-button {
        font-size: 13px;
        padding: 6px 12px;
    }
    
    /* Каталог */
    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .product-image {
        height: 140px !important;
    }
    
    .product-info {
        padding: 10px !important;
    }
    
    .product-info h3 {
        font-size: 13px !important;
        line-height: 1.3;
    }
    
    .product-article {
        font-size: 11px;
    }
    
    .price, .new-price { font-size: 16px !important; }
    .old-price { font-size: 13px !important; }
    
    /* Фильтры */
    .catalog-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .catalog-controls {
        flex-direction: column;
        gap: 10px;
    }
    
    .sort-select,
    .search-form {
        width: 100%;
    }
    
    .catalog-sidebar {
        padding: 15px !important;
    }
    
    /* Пагинация */
    .pagination {
        flex-wrap: wrap;
        gap: 4px !important;
    }
    
    .page-link {
        min-width: 34px !important;
        height: 34px !important;
        padding: 0 8px !important;
        font-size: 13px !important;
    }
    
    /* Хлебные крошки */
    .breadcrumbs {
        font-size: 12px;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    /* Детальная товара */
    .product-details {
        grid-template-columns: 1fr !important;
    }
    
    .main-image {
        height: 250px !important;
    }
    
    .product-actions {
        flex-direction: column;
    }
    
    .btn-cart {
        width: 100%;
    }
    
    /* Формы */
    .form-row,
    .form-row-3 {
        grid-template-columns: 1fr !important;
    }
    
    /* Корзина */
    .cart-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    /* Профиль */
    .profile-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Админка */
    .admin-sidebar {
        width: 60px !important;
        position: fixed;
        z-index: 1000;
        height: 100vh;
        overflow-y: auto;
    }
    
    .admin-sidebar .admin-user-info,
    .admin-sidebar .admin-logo h3,
    .admin-sidebar .menu-item a span {
        display: none !important;
    }
    
    .admin-sidebar .menu-item a {
        justify-content: center;
        padding: 15px 0;
    }
    
    .admin-content {
        margin-left: 60px;
        padding: 15px !important;
    }
    
    /* Таблицы админки */
    .admin-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        font-size: 13px;
    }
    
    .admin-table th,
    .admin-table td {
        padding: 8px !important;
    }
    
    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr !important;
        text-align: center;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .legal-links {
        flex-direction: column;
        gap: 8px !important;
    }
    
    /* Модальные окна */
    .modal-content {
        width: 95% !important;
        margin: 5% auto !important;
        padding: 15px !important;
    }
    
    /* Hero */
    .hero h1 { font-size: 26px !important; }
    .hero-content { font-size: 15px !important; }
}

/* ============================================================
   МАЛЕНЬКИЕ ТЕЛЕФОНЫ (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
    h1 { font-size: 20px !important; }
    h2 { font-size: 18px !important; }
    
    .container {
        padding: 0 10px;
    }
    
    /* Сетка товаров — одна колонка */
    .product-grid {
        grid-template-columns: 1fr !important;
    }
    
    .product-image {
        height: 180px !important;
    }
    
    /* Пагинация — компактнее */
    .page-link {
        min-width: 30px !important;
        height: 30px !important;
        font-size: 12px !important;
    }
    
    /* Кнопки */
    .btn, .btn-primary, .btn-secondary {
        padding: 8px 15px !important;
        font-size: 14px !important;
    }
    
    /* Уведомления */
    .notification {
        right: 10px !important;
        left: 10px !important;
        top: 10px !important;
    }
    
    /* Модальные окна */
    .modal-content {
        margin: 10% auto !important;
    }
}

/* ============================================================
   ЛАНДШАФТ НА ТЕЛЕФОНЕ
   ============================================================ */
@media (max-width: 900px) and (orientation: landscape) {
    .hero {
        padding: 30px 15px !important;
    }
}

/* ============================================================
   RETINA (2x) — качественные изображения
   ============================================================ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ============================================================
   ПЕЧАТЬ
   ============================================================ */
@media print {
    .header,
    .footer,
    .admin-sidebar,
    .cta-button,
    .pagination,
    .catalog-sidebar {
        display: none !important;
    }
    
    body {
        color: #000;
        background: #fff;
    }
}

/* ============================================================
   ДОСТУПНОСТЬ
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Фокус для клавиатуры */
:focus-visible {
    outline: 2px solid #3498db;
    outline-offset: 2px;
}