/*
 * responsive-fixes.css — Универсальные исправления адаптивности
 * ==============================================================
 * Подключается ПОСЛЕДНИМ после всех остальных CSS-файлов.
 * Исправляет скроллбар, хедер, осенний режим, футер и все ключевые
 * компоненты для корректного отображения на любом устройстве.
 *
 * Загружать ПОСЛЕ:
 *   style.css → style-additions.css → tryon.css → mobile.css
 *             → product-card-v3.css → responsive-fixes.css
 */

/* ══════════════════════════════════════════════════════════════
   1. СКРОЛЛБАР — чистый, без агрессивных анимаций
   ══════════════════════════════════════════════════════════════ */

html {
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary, #8B1A1A) #f5f0ea;
}
::-webkit-scrollbar          { width: 6px; height: 6px; }
::-webkit-scrollbar-track    { background: #f5f0ea; }
::-webkit-scrollbar-thumb    { background: var(--color-primary, #8B1A1A); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary-dark, #6B1010); }
::-webkit-scrollbar-corner   { background: transparent; }

/* Внутренние скроллеры (таблицы, табы, списки) — без полосы */
.table-wrap::-webkit-scrollbar,
.admin-nav::-webkit-scrollbar,
.admin-table-wrap::-webkit-scrollbar,
#pickupList::-webkit-scrollbar,
.sidebar-cats__list::-webkit-scrollbar,
.tabs::-webkit-scrollbar,
.tab-bar::-webkit-scrollbar,
.profile-tabs::-webkit-scrollbar { width: 0; height: 0; }

/* ══════════════════════════════════════════════════════════════
   2. ОСЕННИЙ РЕЖИМ — скроллбар и недостающие элементы
   ══════════════════════════════════════════════════════════════ */

body.autumn-mode {
    scrollbar-color: #c9742a #fdf0e0;
}
body.autumn-mode ::-webkit-scrollbar-track { background: #fdf0e0; }
body.autumn-mode ::-webkit-scrollbar-thumb { background: #c9742a; }
body.autumn-mode ::-webkit-scrollbar-thumb:hover { background: #a05018; }

/* Главная поисковая строка в осеннем режиме */
body.autumn-mode .home-search {
    background: linear-gradient(135deg, #fdf0e0 0%, #f5e0c0 50%, #fdf0e0 100%);
    border-bottom-color: rgba(123,58,16,.12);
}
body.autumn-mode .home-search__form {
    border-color: rgba(123,58,16,.3);
    box-shadow: 0 10px 40px rgba(123,58,16,.22), 0 2px 8px rgba(0,0,0,.06);
}
body.autumn-mode .home-search__hint {
    background: rgba(255,248,240,.8);
    border-color: rgba(123,58,16,.25);
    color: #6b4f1d;
}

/* Мобильная нижняя навигация в осеннем режиме */
body.autumn-mode .mobile-bottom-nav {
    background: #fff8f0;
    border-top-color: rgba(123,58,16,.2);
}
body.autumn-mode .mob-nav-item.active,
body.autumn-mode .mob-nav-item:hover {
    color: #7B3A10;
    background: rgba(123,58,16,.07);
}

/* Корзина в осеннем режиме */
body.autumn-mode .cart-sidebar {
    background: #fff8f0;
    border-color: rgba(123,58,16,.15);
}

/* Подсказки-дроп в осеннем режиме */
body.autumn-mode .suggest-dropdown {
    background: #fff8f0;
    border-color: rgba(123,58,16,.2);
}
body.autumn-mode .suggest-item:hover,
body.autumn-mode .suggest-item.active { background: #fdf0e0; }
body.autumn-mode .suggest-all {
    background: #fdf0e0;
    color: #7B3A10;
}

/* Разделитель секций в осеннем режиме */
body.autumn-mode .home-divider::after {
    background: #fff8f0;
    color: #c9742a;
}

/* Страница товара в осеннем режиме */
body.autumn-mode .product-price-block { background: #fdf0e0; }

/* Карточка авторизации в осеннем режиме */
body.autumn-mode .auth-card {
    background: #fff8f0;
    border-color: rgba(123,58,16,.2);
}

/* Хлебные крошки в осеннем режиме */
body.autumn-mode .breadcrumb { color: #7B3A10; }
body.autumn-mode .breadcrumb a { color: #9B5A1A; }

/* ══════════════════════════════════════════════════════════════
   3. БАЗОВЫЕ ПРАВИЛА — безопасная область, отступы, overflow
   ══════════════════════════════════════════════════════════════ */

/* Защита от горизонтального прокрута */
html, body { overflow-x: hidden; max-width: 100%; }

/* Все медиа-элементы не вылезают за контейнер */
img, video, iframe, svg, canvas { max-width: 100%; height: auto; }
.hero--fullscreen { overflow: hidden !important; }

/* Безопасная область для iPhone с «чёлкой» */
@supports (padding: env(safe-area-inset-left)) {
    .site-header .container {
        padding-left:  max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }
    .mobile-bottom-nav {
        padding-bottom: env(safe-area-inset-bottom);
        height: calc(64px + env(safe-area-inset-bottom));
    }
    .site-footer {
        padding-bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));
    }
}

/* ══════════════════════════════════════════════════════════════
   4. ШАПКА — надёжная на любой ширине
   ══════════════════════════════════════════════════════════════ */

.header-inner {
    flex-wrap: nowrap;
    min-width: 0;
}

/* Логотип не теряет минимальную ширину */
.header-logo {
    flex-shrink: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* На планшете убираем слово «Корзина» раньше */
@media (max-width: 900px) and (min-width: 769px) {
    .cart-btn-text { display: none; }
    .cart-btn { padding: 8px 12px; }
}

/* ══════════════════════════════════════════════════════════════
   5. HERO-БАННЕР — масштабируется без переполнения
   ══════════════════════════════════════════════════════════════ */

.hero {
    padding-left: 20px;
    padding-right: 20px;
}
.hero h1 {
    word-break: break-word;
    hyphens: auto;
}
.hero p {
    max-width: 100%;
    padding: 0 4px;
}
@media (max-width: 480px) {
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .btn { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════
   6. КАТАЛОГ — сетка и фильтры
   ══════════════════════════════════════════════════════════════ */

/* Фильтры на мобильных: горизонтальный скролл */
@media (max-width: 768px) {
    .catalog-layout {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 8px 0;
    }

    /* Сайдбар-фильтров — компактная сворачиваемая панель */
    .filters-sidebar {
        position: static !important;
        width: 100% !important;
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 12px;
        top: auto !important;
    }

    /* 2 колонки — стабильные */
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
}

/* Очень узкие экраны — всё равно 2 колонки */
@media (max-width: 360px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }
    .container { padding: 0 8px !important; }
}

/* ══════════════════════════════════════════════════════════════
   7. КАРТОЧКА ТОВАРА — единые правила на мобильных
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Убираем тяжёлый hover-сдвиг (нет hover на тачскрине) */
    .product-card:hover { transform: none !important; }

    /* Ограничиваем минимальную ширину */
    .product-card-title {
        font-size: 12px !important;
        min-height: 2.4em !important;
    }

    /* Карусель — стрелки всегда видны на тачскрине */
    .pc-nav { opacity: 1 !important; }
}

@media (max-width: 480px) {
    .product-card .product-card-body { padding: .65rem .65rem .8rem !important; }
    .product-card-title { font-size: 11px !important; }
    .product-card-price,
    .product-card .product-card-price { font-size: 1rem !important; }
}

/* ══════════════════════════════════════════════════════════════
   8. СТРАНИЦА ТОВАРА — вертикальное расположение
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .product-page {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 16px 0 !important;
    }

    .product-main-img {
        aspect-ratio: 1 / 1;
        max-height: 70vw;
    }

    .product-thumbs {
        gap: 6px;
        justify-content: flex-start;
    }
    .product-thumbs img,
    .product-thumbs .thumb-vid {
        width: 60px !important;
        height: 60px !important;
    }

    .product-info h1 { font-size: 20px !important; }

    .wb-sizes { gap: 6px; }
    .wb-size-chip { min-width: 38px; height: 36px; font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════════
   9. ОФОРМЛЕНИЕ ЗАКАЗА (CHECKOUT)
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .checkout-layout {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 12px 0 !important;
    }

    .checkout-card {
        padding: 16px !important;
        margin-bottom: 12px !important;
    }
    .checkout-card h3 { font-size: 16px !important; margin-bottom: 14px !important; }

    .checkout-support-block {
        flex-direction: column;
        gap: 10px;
        padding: 14px 16px;
    }
}

/* ══════════════════════════════════════════════════════════════
   10. КОРЗИНА (SIDEBAR)
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .cart-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        right: -100% !important;
    }
    .cart-sidebar.open { right: 0 !important; }
}

/* ══════════════════════════════════════════════════════════════
   11. ФОРМЫ — правила для iOS Safari (без авто-zoom)
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="date"],
    input[type="datetime-local"],
    textarea,
    select {
        font-size: 16px !important; /* предотвращает zoom в iOS */
        min-height: 44px;
        border-radius: 10px;
    }

    /* Кнопки — минимум 44px (Apple HIG / Google Material) */
    .btn, button:not(.pc-nav):not(.burger):not(.cart-close):not(.qty-btn):not(.pc-fav) {
        min-height: 44px;
    }
    .btn-sm { min-height: 36px; }
}

/* ══════════════════════════════════════════════════════════════
   12. ТАБЛИЦЫ — горизонтальный скролл вместо разлёта
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .table-wrap,
    .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    table { font-size: 13px; }
    table th, table td {
        padding: 8px 10px !important;
        white-space: nowrap;
    }
}

/* ══════════════════════════════════════════════════════════════
   13. ФУТЕР — надёжная многостолбцовая разбивка
   ══════════════════════════════════════════════════════════════ */

/* Все варианты footer-grid */
@media (max-width: 1100px) {
    .footer-grid,
    .footer-grid--5col {
        grid-template-columns: 1fr 1fr 1fr !important;
    }
}
@media (max-width: 700px) {
    .footer-grid,
    .footer-grid--5col {
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
    }
    .footer-support-col { grid-column: span 2; }
}
@media (max-width: 480px) {
    .footer-grid,
    .footer-grid--5col {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
    .footer-support-col { grid-column: span 1; }
    .footer-bottom {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    .footer-bottom span { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
}

/* Социальные иконки в футере — не разлезаются */
.footer-socials > div { flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════
   14. МОБИЛЬНАЯ НИЖНЯЯ НАВИГАЦИЯ — отступ снизу
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Нижняя навигация не перекрывает контент */
    body { padding-bottom: 64px; }

    /* Cookie-баннер — выше нижней навигации */
    .cookie-banner { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

    /* Уведомления — выше нижней навигации */
    .site-notif-corner { bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }

    /* Плавающая кнопка поддержки — выше нижней навигации */
    #supportFloatBtn,
    .side-fab-stack { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ══════════════════════════════════════════════════════════════
   15. ПРОФИЛЬ — вертикальная компоновка
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .profile-layout {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .tabs, .tab-bar, .profile-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        white-space: nowrap;
        padding-bottom: 4px;
    }

    .tab-btn {
        flex-shrink: 0;
        padding: 10px 14px !important;
        font-size: 14px !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   16. ГЛАВНАЯ СТРАНИЦА — блоки и секции
   ══════════════════════════════════════════════════════════════ */

/* Статистика — 2×2 на мобиле */
@media (max-width: 768px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
    .stat-value { font-size: 28px !important; }
}
@media (max-width: 480px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .stat-value { font-size: 24px !important; }
}

/* Секция «Рекомендуем» */
@media (max-width: 1024px) {
    .recommend-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 640px) {
    .recommend-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
}

/* Поисковая строка главной */
@media (max-width: 480px) {
    .home-search { padding: 24px 0 20px; }
    .home-search__title { font-size: 20px; }
    .home-search__form { margin: 0 0; padding: 4px; }
    .home-search__btn { padding: 10px 14px; font-size: 13px; }
    .home-search__input { padding: 12px 6px; font-size: 14px; }
    .home-search__icon { padding: 0 2px 0 10px; font-size: 16px; }
}

/* Плитки разделов */
@media (max-width: 480px) {
    .section-tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .section-tile { padding: 16px 8px; }
    .section-tile__icon { font-size: 28px; }
    .section-tile__name { font-size: 14px; }
}

/* ══════════════════════════════════════════════════════════════
   17. AI-ЧАТ — мобильный вид снизу
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .ai-chat {
        position: fixed !important;
        inset: auto 0 0 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        right: 0 !important;
        left: 0 !important;
        bottom: 64px !important;
        border-radius: 16px 16px 0 0 !important;
        max-height: 85vh;
        overflow-y: auto;
    }
}

/* ══════════════════════════════════════════════════════════════
   18. О КОМПАНИИ, ДОСТАВКА, КОНТАКТЫ
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .contacts-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
    .about-hero { padding: 32px 0; }

    .timeline { padding-left: 28px; }
    .timeline-item::before { left: -22px; }
}

/* ══════════════════════════════════════════════════════════════
   19. ПАГИНАЦИЯ — не разлетается
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .pagination { gap: 4px; margin-top: 24px; }
    .page-btn { width: 36px; height: 36px; font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════════
   20. ADMIN — мобильная панель
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .admin-main { padding: 16px 14px 60px !important; }
    .admin-topbar { padding: 14px 16px !important; }
    .admin-topbar h1 { font-size: 18px !important; }
    .admin-form-grid {
        grid-template-columns: 1fr !important;
    }
    .admin-form-grid .span-2 { grid-column: span 1 !important; }
    .ws-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px;
    }
    .ws-row > *:last-child { grid-column: span 2; }
}

/* ══════════════════════════════════════════════════════════════
   21. ПЛАШКА РАЗРАБОТЧИКА — адаптив
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 540px) {
    .dev-credit { padding: 12px 10px; }
    .dev-credit-row { gap: 6px; }
    .dev-credit-sep { display: none; }
    .dev-credit-link { flex-wrap: wrap; justify-content: center; gap: 6px; padding: 6px 10px; }
    .dev-credit-tag { display: none; }
    .dev-credit-text { font-size: 11px; }
    .dev-credit-name { font-size: 12px; }
}

/* ══════════════════════════════════════════════════════════════
   22. АДАПТИВНАЯ ТИПОГРАФИКА — fluid-размеры
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .section-title { font-size: 20px !important; }
    .section-subtitle { font-size: 14px !important; margin-bottom: 24px !important; }
    h1 { font-size: 20px !important; line-height: 1.25; }
    h2 { font-size: 17px !important; }
    h3 { font-size: 15px !important; }
}

/* ══════════════════════════════════════════════════════════════
   23. ПРОЧЕЕ — мелкие исправления
   ══════════════════════════════════════════════════════════════ */

/* Кнопки не вылезают за ширину родителя */
.btn { max-width: 100%; word-break: break-word; }

/* Тач-эффект — убираем синюю подсветку */
* { -webkit-tap-highlight-color: rgba(139,26,26,.12); }

/* Изображения в карточках без CLS-прыжков */
img[loading="lazy"] { background: #f5f0ea; }

/* Модалки на мобиле — на весь экран */
@media (max-width: 480px) {
    .modal, .dialog {
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        margin: 10px !important;
        max-height: calc(100vh - 20px);
        overflow-y: auto;
    }
}

/* Убираем hover-transform на тач-устройствах (нет hover) */
@media (hover: none) {
    .product-card:hover,
    .feature-card:hover,
    .cat-card:hover,
    .category-card:hover { transform: none !important; }
}