/* ============================================
   CATALOG PREMIUM STYLES - Mobile First
   ============================================ 
   
   BREAKPOINTS (единые для всего проекта):
   - Mobile:        0 - 639px  (базовые стили, 2 колонки)
   - Small Tablet:  640px+     (3 колонки)
   - Tablet:        768px+     (3-4 колонки)
   - Desktop:       1024px+    (4 колонки)
   - Large Desktop: 1280px+    (4-5 колонок)
   - XL Desktop:    1536px+    (5 колонок)
   - XXL Desktop:   2560px+    (6 колонок)
   ============================================ */

/* Убираем отступ между header и каталогом */
.catalog-page {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Breadcrumbs - ТОЧНО КАК НА СТРАНИЦЕ ТОВАРА */
.breadcrumbs{
    padding:1rem 0;
    color:#666;
    font-size:0.8125rem;
    overflow-x:auto;
    white-space:nowrap;
}

.breadcrumbs a{color:#666;text-decoration:none}
.breadcrumbs a:hover{color:#000}

/* Container управляется через container-system.css (1400px) */
/* Удалены все переопределения width и max-width */

/* Layout - sidebar + content на десктопе */
.catalog-page .catalog-layout{
    display:block !important;
    width:100%;
    max-width:100%;
    gap:0;
    padding:0;
    grid-template-columns:none !important;
    overflow:hidden;
}

.content{
    min-width:0;
    width:100%;
    max-width:100%;
    overflow:hidden;
}

.quick-filters-sizes,
.sizes-scroll-container{
    min-width:0;
    max-width:100%;
    overflow:hidden;
}

.quick-filters-bar{
    max-width:100%;
    overflow-x:auto;
}

@media (min-width:1024px){
    .catalog-page .catalog-layout{
        display:block !important;
        grid-template-columns:none !important;
    }

    .content{
        min-width:0;
    }
}

/* Sidebar - всплывающая панель ВСЕГДА (и на десктопе тоже) */
.sidebar{
    position:fixed;
    top:0;
    left:-100%;
    width:90%;
    max-width:420px;
    height:100vh;
    background:#fff;
    z-index:1200;
    transition:left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y:auto;
    box-shadow:4px 0 32px rgba(0,0,0,0.15);
}
.sidebar.active{left:0}

@media (min-width:1024px){
    .sidebar{
        max-width:520px;
    }
}
.sidebar-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1.75rem 1.5rem;
    border-bottom:2px solid #e5e7eb;
    background:linear-gradient(135deg,#f9fafb 0%,#fff 100%);
    position:sticky;
    top:0;
    z-index:10;
    backdrop-filter:blur(10px);
}
.sidebar-header h3{font-size:1.375rem;font-weight:800;display:flex;align-items:center;gap:0.625rem;color:#111}
.sidebar-header h3::before{content:'🎯';font-size:1.75rem}
.close-btn{background:#f3f4f6;border:none;width:42px;height:42px;border-radius:50%;cursor:pointer;color:#666;display:flex;align-items:center;justify-content:center;font-size:1.375rem;transition:all 0.25s;box-shadow:0 2px 8px rgba(0,0,0,0.05)}
.close-btn:hover{background:#000;color:#fff;transform:rotate(90deg) scale(1.05);box-shadow:0 4px 12px rgba(0,0,0,0.15)}

/* Sidebar header всегда видим */

/* Аккордеон фильтров */
.filter-group{border-bottom:1px solid #e5e7eb;transition:background 0.2s}
.filter-group:hover{background:#fafbfc}
.filter-title{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;font-size:0.8125rem;font-weight:700;text-transform:uppercase;color:#111;cursor:pointer;margin:0;user-select:none;letter-spacing:0.5px;transition:all 0.2s}
.filter-title:hover{background:rgba(0,0,0,0.02)}
.filter-title i{font-size:1rem;color:#666;transition:transform 0.3s,color 0.2s}
.filter-group.open .filter-title i{transform:rotate(180deg);color:#000}
.filter-content{display:none;padding:0 1.25rem 1.25rem;max-height:0;overflow:hidden;transition:max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1)}
.filter-group.open .filter-content{display:block;max-height:500px}

/* Поиск в фильтре */
.filter-search{width:100%;padding:0.5rem;border:1px solid #e5e7eb;border-radius:6px;font-size:0.8125rem;margin-bottom:0.75rem}
.filter-search:focus{outline:none;border-color:#000}

/* Скролл контейнер */
.filter-scroll{max-height:280px;overflow-y:auto;margin-right:-0.5rem;padding-right:0.5rem}
.filter-scroll::-webkit-scrollbar{width:4px}
.filter-scroll::-webkit-scrollbar-track{background:#f1f1f1;border-radius:2px}
.filter-scroll::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px}
.filter-scroll::-webkit-scrollbar-thumb:hover{background:#999}

.filter-item{display:flex;align-items:center;padding:0.5rem 0.75rem;gap:0.625rem;cursor:pointer;font-size:0.875rem;border-radius:6px;transition:all 0.15s;margin-bottom:0.25rem;position:relative}
.filter-item:hover{background:#f3f4f6}
.filter-item input{width:20px;height:20px;cursor:pointer;accent-color:#000}
.filter-item span:nth-child(2){flex:1;font-weight:500;transition:all 0.2s}
.filter-item input:checked ~ span:nth-child(2){font-weight:600;color:#000}
.filter-item:has(input:checked){background:#f0f9ff;border-left:3px solid #3b82f6;padding-left:calc(0.75rem - 3px)}
.filter-item .count{color:#666;font-size:0.8125rem;background:#f3f4f6;padding:0.125rem 0.5rem;border-radius:12px;font-weight:600;min-width:28px;text-align:center;transition:all 0.2s}
.filter-item:has(input:checked) .count{background:#3b82f6;color:#fff}
.filter-item.disabled{opacity:0.5;cursor:not-allowed}
.filter-item.disabled input{cursor:not-allowed}
.filter-item.hidden{display:none}

.filter-actions{
    position:sticky;
    bottom:0;
    display:flex;
    gap:0.5rem;
    padding:1rem 1.25rem;
    border-top:1px solid #e5e7eb;
    background:linear-gradient(180deg, rgba(255,255,255,0.95) 0%, #fff 60%);
    backdrop-filter:blur(8px);
    z-index:10;
    box-shadow:0 -6px 24px rgba(15,23,42,0.06);
}

.filter-actions .btn{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.5rem;
    font-weight:600;
    border-radius:8px;
}

@media (max-width:767px){
    .catalog-page .filter-actions{
        padding:1rem 1.25rem calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
        border-radius:0 0 18px 18px;
        box-shadow:0 -10px 32px rgba(15,23,42,0.16);
    }
}

/* Size Filter Grid (с ограничением высоты и скроллом) */
.size-filter-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0.5rem;
    margin-top:0.5rem;
    max-height:240px;
    overflow-y:auto;
    padding-right:0.25rem;
    scrollbar-width:thin;
    scrollbar-color:#e5e7eb transparent;
}
.size-filter-grid::-webkit-scrollbar{width:6px}
.size-filter-grid::-webkit-scrollbar-track{background:transparent}
.size-filter-grid::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:3px}
.size-filter-grid::-webkit-scrollbar-thumb:hover{background:#d1d5db}

.size-filter-btn{position:relative;cursor:pointer}
.size-filter-btn input{position:absolute;opacity:0;pointer-events:none}
.size-filter-btn span{display:flex;align-items:center;justify-content:center;padding:0.625rem;border:2px solid #e5e7eb;border-radius:6px;font-weight:600;font-size:0.875rem;transition:all 0.2s;background:#fff}
.size-filter-btn:hover span{border-color:#000;transform:scale(1.05)}
.size-filter-btn input:checked + span{border-color:#000;background:#000;color:#fff}

/* Color Filter Grid (как на Lamoda/Wildberries) */
.color-filter-grid{display:grid;gap:0.75rem;margin-top:0.5rem}
.color-filter-item{display:flex;align-items:center;gap:0.75rem;padding:0.5rem;border-radius:6px;cursor:pointer;transition:background 0.2s}
.color-filter-item:hover{background:#f3f4f6}
.color-filter-item input{width:18px;height:18px;cursor:pointer}
.color-circle{width:28px;height:28px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 1px rgba(0,0,0,0.1) inset}
.color-name{font-size:0.875rem;flex:1}
.color-filter-item input:checked ~ .color-circle{box-shadow:0 0 0 3px #000,0 0 0 1px rgba(0,0,0,0.1) inset}

/* Фильтр по цене - улучшенный дизайн */
#price-slider{
    margin:1.25rem 0 1rem 0;
    height:6px;
}
.price-inputs{
    display:flex;
    gap:0.75rem;
    align-items:center;
    margin-top:1rem;
    padding:0 0.25rem;
}
.price-inputs span{
    color:#9ca3af;
    font-weight:500;
    font-size:0.875rem;
}
.price-inputs input{
    flex:1;
    padding:0.75rem 0.875rem;
    border:2px solid #e5e7eb;
    border-radius:8px;
    text-align:center;
    font-size:0.9375rem;
    font-weight:600;
    color:#1f2937;
    background:#f9fafb;
    transition:all 0.2s ease;
    cursor:default;
}
.price-inputs input:focus{
    outline:none;
    border-color:#3b82f6;
    background:#fff;
    box-shadow:0 0 0 3px rgba(59, 130, 246, 0.1);
}
.btn-apply{width:calc(100% - 2.5rem);padding:1.25rem;background:linear-gradient(135deg,#000,#1f2937);color:#fff;border:none;border-radius:14px;font-weight:700;font-size:1.0625rem;cursor:pointer;margin:1.5rem 1.25rem;position:sticky;bottom:1rem;box-shadow:0 -8px 32px rgba(0,0,0,0.15),0 4px 12px rgba(0,0,0,0.1);display:flex;align-items:center;justify-content:center;gap:0.75rem;transition:all 0.25s;backdrop-filter:blur(10px)}
.btn-apply:hover{transform:translateY(-3px);box-shadow:0 -12px 40px rgba(0,0,0,0.2),0 6px 20px rgba(0,0,0,0.15);background:linear-gradient(135deg,#1f2937,#374151)}
.btn-apply:active{transform:translateY(-1px)}
.btn-apply::before{content:'✓';font-size:1.375rem;font-weight:900}

/* НОВОЕ: Quick Filters Bar - Бренды (отдельный контейнер) */
.quick-filters-bar{
    display:flex;
    align-items:center;
    gap:0.375rem;
    padding:0.5rem 0;
    margin-bottom:0.5rem;
    overflow-x:auto;
    overflow-y:hidden;
    flex-wrap:nowrap;
    scrollbar-width:thin;
    scrollbar-color:#e5e7eb transparent;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
}
.quick-filters-bar::-webkit-scrollbar{height:6px}
.quick-filters-bar::-webkit-scrollbar-track{background:transparent}
.quick-filters-bar::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:3px}
.quick-filters-bar::-webkit-scrollbar-thumb:hover{background:#d1d5db}

/* Quick Filters: Размеры (отдельный блок) */
.quick-filters-sizes{
    display:flex;
    flex-direction:column;
    gap:0.5rem;
    margin-bottom:0.75rem;
    border-top:1px solid #f3f4f6;
    padding-top:0.75rem;
}

@media (min-width:1280px){
    /* На больших экранах размеры в одну строку с брендами */
    .quick-filters-sizes{
        margin-bottom:0.5rem;
        padding-top:0.5rem;
        gap:0.75rem;
    }
}

/* Wrapper для размеров и стрелок навигации */
.sizes-with-nav{
    position:relative;
    flex:1;
    width:100%;
}

/* Кнопки навигации размеров (стрелки) */
.size-nav-btn{
    display:none;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:28px;
    height:28px;
    border-radius:50%;
    background:#fff;
    border:1.5px solid #e5e7eb;
    cursor:pointer;
    z-index:5;
    transition:all 0.2s;
    align-items:center;
    justify-content:center;
    box-shadow:0 2px 6px rgba(0,0,0,0.08);
}
.size-nav-btn:hover{
    background:#000;
    color:#fff;
    border-color:#000;
    box-shadow:0 3px 10px rgba(0,0,0,0.15);
}
.size-nav-btn:active{
    transform:translateY(-50%) scale(0.95);
}
.size-nav-btn i{
    font-size:0.875rem;
    font-weight:700;
}
.size-nav-left{
    left:0.25rem;
}
.size-nav-right{
    right:0.25rem;
}

/* Десктоп - стрелки побольше */
@media (min-width:1024px){
    .size-nav-btn{
        width:36px;
        height:36px;
        border:2px solid #e5e7eb;
        box-shadow:0 2px 8px rgba(0,0,0,0.1);
    }
    .size-nav-btn:hover{
        box-shadow:0 4px 12px rgba(0,0,0,0.2);
    }
    .size-nav-btn i{
        font-size:1.125rem;
    }
    .size-nav-left{
        left:0.5rem;
    }
    .size-nav-right{
        right:0.5rem;
    }
}

/* Контейнер со скроллом для размеров */
.sizes-scroll-container{
    flex:1;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
}
.sizes-scroll-container::-webkit-scrollbar{display:none}

@media (max-width:1023px){
    .sizes-scroll-container{
        scrollbar-width:none;
    }
    .sizes-scroll-container::-webkit-scrollbar{
        display:none;
    }
}

.quick-chip{
    display:inline-flex;
    align-items:center;
    gap:0.375rem;
    padding:0.5rem 0.75rem;
    background:#fff;
    border:1.5px solid #e5e7eb;
    border-radius:16px;
    font-size:0.8125rem;
    font-weight:600;
    cursor:pointer;
    transition:all 0.2s;
    color:#111;
    white-space:nowrap;
    flex-shrink:0;
}
.quick-chip i{font-size:0.875rem;transition:transform 0.2s}
.quick-chip:hover{background:#000;color:#fff;border-color:#000;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.quick-chip:hover i{transform:scale(1.1)}
.quick-chip.active{background:#000;color:#fff;border-color:#000}

/* Brand chips - with counter */
.brand-chip .chip-count{font-size:0.6875rem;color:#999;margin-left:0.25rem;font-weight:500}
.brand-chip:hover .chip-count{color:#fff}
.brand-chip.active .chip-count{color:#fff}

/* Size chips - compact */
.size-chip{
    padding:0.5rem 0.75rem;
    min-width:52px;
    justify-content:center;
    font-size:0.875rem;
    font-weight:700;
}
.size-chip i{font-size:0.75rem}

/* Size System Toggle - переключатель размерных сеток */
.size-system-toggle{display:inline-flex;align-items:center;gap:0.25rem;background:#f3f4f6;padding:0.25rem;border-radius:10px;margin-right:0.5rem}
.size-system-btn{padding:0.375rem 0.75rem;background:transparent;border:none;border-radius:8px;font-size:0.75rem;font-weight:700;cursor:pointer;transition:all 0.2s;color:#6b7280;text-transform:uppercase}
.size-system-btn:hover{background:#e5e7eb;color:#111}
.size-system-btn.active{background:#000;color:#fff;box-shadow:0 2px 6px rgba(0,0,0,0.15)}

/* Size groups - контейнеры для каждой системы размеров */
.size-group{
    display:inline-flex;
    flex-wrap:nowrap;
    align-items:center;
    gap:0.375rem;
    flex-shrink:0;
    padding:0 32px;
}

@media (min-width:1024px){
    .size-group{
        padding:0 42px;
    }
}

/* Переключатель в сайдбаре - компактный */
.size-system-toggle-sidebar{display:flex;gap:0.25rem;background:#f9fafb;padding:0.25rem;border-radius:8px}
.size-system-btn-small{padding:0.375rem 0.625rem;background:transparent;border:none;border-radius:6px;font-size:0.6875rem;font-weight:700;cursor:pointer;transition:all 0.15s;color:#6b7280;text-transform:uppercase}
.size-system-btn-small:hover{background:#e5e7eb;color:#111}
.size-system-btn-small.active{background:#000;color:#fff;box-shadow:0 2px 4px rgba(0,0,0,0.1)}

/* НОВОЕ: Кнопка расширенных фильтров */
.show-advanced-filters-btn{width:calc(100% - 2.5rem);display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;margin:1rem 1.25rem;background:#f9fafb;border:2px dashed #e5e7eb;border-radius:10px;cursor:pointer;transition:all 0.25s;font-weight:700;font-size:0.9375rem;color:#111}
.show-advanced-filters-btn:hover{background:#fff;border-color:#000;transform:translateY(-2px)}
.show-advanced-filters-btn .count{color:#666;font-size:0.8125rem;margin-left:0.5rem}
.show-advanced-filters-btn .toggle-icon{transition:transform 0.3s}
.show-advanced-filters-btn.active .toggle-icon{transform:rotate(180deg)}

/* НОВОЕ: Advanced Filters Wrapper */
.advanced-filters-wrapper{animation:slideDown 0.3s ease-out}
@keyframes slideDown{from{opacity:0;max-height:0}to{opacity:1;max-height:3000px}}

/* Content */
.content-header{margin-bottom:0.375rem;padding:0}
.content-header h1{font-size:1.125rem;font-weight:800;margin:0;letter-spacing:-0.3px;display:flex;align-items:center;gap:0.5rem}
.products-count{font-size:0.875rem;font-weight:500;color:#666}

/* Catalog Toolbar - Sticky (mobile optimized) */
.catalog-toolbar{display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,0.98);padding:0.5rem 0;margin-bottom:0.75rem;box-shadow:0 2px 8px rgba(0,0,0,0.08);border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:90;backdrop-filter:blur(10px);transition:all 0.2s}

.toolbar-left{display:flex;align-items:center;gap:1rem}

.filter-toggle-btn{display:flex;align-items:center;gap:0.375rem;background:#000;color:#fff;border:none;padding:0.5rem 1rem;border-radius:8px;font-weight:700;font-size:0.875rem;cursor:pointer;transition:all 0.2s;box-shadow:0 2px 8px rgba(0,0,0,0.15)}
.filter-toggle-btn:hover{background:#1f2937;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.2)}
.filter-toggle-btn:active{transform:translateY(0)}
.filter-toggle-btn .filters-count{background:#ef4444;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:0.6875rem;margin-left:0.25rem;font-weight:800;animation:pulse 2s infinite;box-shadow:0 0 0 2px rgba(239,68,68,0.2)}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}

.toolbar-right{display:flex;align-items:center;gap:0.5rem}

.sort-select{display:flex;align-items:center;gap:0.375rem}
.sort-select label{font-size:0.75rem;color:#666;font-weight:600;display:none;align-items:center;gap:0.25rem}
.sort-select select{padding:0.5rem 0.75rem;border:1px solid #e5e7eb;border-radius:8px;font-size:0.8125rem;background:#fff;cursor:pointer;min-width:140px;font-weight:500;transition:all 0.2s}
.sort-select select:hover{border-color:#000}
.sort-select select:focus{outline:none;border-color:#000;box-shadow:0 0 0 2px rgba(0,0,0,0.05)}

/* Active Filters - компактно */
.active-filters{display:flex;flex-wrap:wrap;gap:0.375rem;margin-bottom:0.75rem;padding:0.5rem 0}
.tag{display:inline-flex;align-items:center;gap:0.375rem;padding:0.375rem 0.625rem;background:#f3f4f6;border-radius:16px;font-size:0.75rem;font-weight:500}
.tag a{color:#666;text-decoration:none;display:flex;align-items:center;justify-content:center;width:16px;height:16px}
.tag a:hover{color:#000}
.clear-all{color:#ef4444;text-decoration:none;font-weight:600;font-size:0.75rem;display:inline-flex;align-items:center;padding:0.375rem 0.625rem}

/* Loading Overlay */
.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.9);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center}
.spinner{width:50px;height:50px;border:4px solid #e5e7eb;border-top:4px solid #000;border-radius:50%;animation:spin 0.8s linear infinite}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.loading-overlay p{margin-top:1rem;font-weight:600;color:#000}

/* Disabled filter items */
.filter-item.disabled{opacity:0.4;cursor:not-allowed}
.filter-item.disabled input{cursor:not-allowed;pointer-events:none}
.filter-item.disabled .count{color:#999}

/* Skeleton Loading */
.skeleton-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:2rem}
.product-skeleton{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.skeleton-img{padding-top:125%;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb 50%,#f3f4f6 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}
.skeleton-info{padding:1rem}
.skeleton-line{height:14px;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb 50%,#f3f4f6 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px;margin-bottom:0.75rem}
.skeleton-line.short{width:40%}
.skeleton-line.medium{width:70%}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Floating Apply Button - определен в catalog-layout.css */
/* Удалено дублирование стилей */

/* УЛУЧШЕННЫЙ GRID - Mobile First */
/* Mobile: авто-подбор карточек (минимум 160px) */
.products{
    display:grid !important;
    grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)) !important;
    gap:0.75rem;
    transition:all 0.3s;
    width:100% !important;
    max-width:100% !important;
    justify-items:stretch;
}

/* Grid классы — на мобиле повторяем базовую логику */
.products.grid-3{grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)) !important}
.products.grid-4{grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)) !important}
.products.grid-5{grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)) !important}

/* УДАЛЕНЫ старые конфликтующие стили для .product .img и .product .info */
/* Используются стили из catalog-card.css для .product-image-wrapper и .product-card-body */

/* Empty */
.empty{grid-column:1/-1;text-align:center;padding:4rem 1rem}
.empty i{font-size:4rem;color:#e5e7eb;margin-bottom:1rem}
.empty h3{margin-bottom:1rem;color:#666}
.empty button{background:#000;color:#fff;border:none;padding:0.75rem 2rem;border-radius:6px;font-weight:600;cursor:pointer}

/* Pagination - ИСПРАВЛЕНО: правильная вложенность для Yii2 LinkPager */
.pagination{margin-top:2rem;margin-bottom:2rem;display:flex;justify-content:center;align-items:center}
.pagination ul{display:flex;gap:0.5rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.pagination li{display:flex}
.pagination a,.pagination span{display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 0.75rem;background:#fff;border:1px solid #e5e7eb;border-radius:6px;text-decoration:none;color:#000;font-weight:600;transition:all 0.2s}
.pagination a:hover{background:#f3f4f6;border-color:#000}
.pagination li.active a{background:#000;color:#fff;border-color:#000}
.pagination li.disabled span{opacity:0.5;cursor:not-allowed;background:#f9fafb}
.pagination li.prev a,.pagination li.next a{font-size:1.125rem}
.pagination li.prev,.pagination li.next{margin:0 0.25rem}

/* Infinite Scroll Loading */
.infinite-scroll-loading{display:flex;align-items:center;justify-content:center;padding:3rem 1rem;min-height:120px}
.infinite-scroll-loading .spinner{width:50px;height:50px;border:4px solid #e5e7eb;border-top:4px solid #000;border-radius:50%;animation:spin 0.8s linear infinite}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.infinite-scroll-loading p{font-size:0.9375rem;color:#666;font-weight:500}

/* Overlay - улучшенный */
.overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1100;backdrop-filter:blur(6px);animation:fadeIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);cursor:pointer}
.overlay.active{display:block}
@keyframes fadeIn{from{opacity:0;backdrop-filter:blur(0)}to{opacity:1;backdrop-filter:blur(6px)}}

/* ============================================
   RESPONSIVE GRID IMPROVEMENTS
   ============================================ */

/* ============================================
   RESPONSIVE: SMALL TABLET (640px+)
   ============================================ */
@media (min-width:640px){
    .products,
    .products.grid-3,
    .products.grid-4,
    .products.grid-5{
        grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)) !important;
        gap:0.875rem;
    }
    .skeleton-grid{grid-template-columns:repeat(3,1fr);gap:1.25rem}
    /* УДАЛЕНО: Устаревший стиль .product h3 - используется .product-card-name из catalog-card.css */
}

/* ============================================
   RESPONSIVE: TABLET (768px+)
   ============================================ */
@media (min-width:768px){
    .breadcrumbs-nav{margin-top:0;margin-bottom:0.5rem}
    .products,
    .products.grid-3,
    .products.grid-4,
    .products.grid-5{
        grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)) !important;
        gap:1rem;
    }
    .skeleton-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}
    .sidebar{max-width:520px}
    .filter-group.open .filter-content{max-height:600px}
    .filter-scroll{max-height:450px}
    .catalog-page .btn-apply-floating{display:none}
    .content-header h1{font-size:1.125rem}
    .products-count{font-size:0.9375rem}
    .sort-select label{display:flex}
    .filter-toggle-btn span{display:inline}
    .catalog-toolbar{padding:0.5rem 0}
    .quick-filters-bar{padding:0.5rem 0}
    .content-header{margin-top:0}
}

/* ============================================
   RESPONSIVE: DESKTOP (1024px+)
   ============================================ */
@media (min-width:1024px){
    .products,
    .products.grid-3,
    .products.grid-4,
    .products.grid-5{
        grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)) !important;
        gap:1rem;
    }
    .skeleton-grid{grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));gap:1.25rem}
    .catalog-toolbar{padding:0.75rem 0}
    .content-header h1{font-size:1.5rem}
    .products-count{font-size:1.125rem}
    .filter-scroll{max-height:500px}
    /* УДАЛЕНО: Устаревшие стили .product h3, .product .info, .product .brand, .product .current, .product .fav - используются новые классы из catalog-card.css */
    .catalog-page .btn-apply-floating{display:none}
    /* На всех устройствах кнопка фильтров видна */
    .filter-toggle-btn{display:flex !important}
    .quick-filters-bar{padding:0.625rem 0}
    .content-header{margin-bottom:0.5rem;margin-top:0}
    .breadcrumbs-nav{margin-bottom:0.5rem}
    .catalog-layout{padding:0.5rem 0}
    /* .catalog-page .container управляется через container-system.css */
}

/* ============================================
   RESPONSIVE: LARGE DESKTOP (1280px+)
   ============================================ */
@media (min-width:1280px){
    .products,
    .products.grid-3,
    .products.grid-4,
    .products.grid-5{
        grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)) !important;
        gap:1.25rem;
    }
    .skeleton-grid{grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));gap:1.5rem}
    .sidebar{max-width:480px}
    /* .catalog-page .container управляется через container-system.css */
    
    /* Объединяем бренды и размеры в единую компактную секцию */
    .quick-filters-bar{
        margin-bottom:0.375rem;
        padding:0.375rem 0;
    }
    
    .quick-filters-sizes{
        margin-bottom:0.375rem;
        padding-top:0.375rem;
        border-top-color:#f9fafb;
    }
    
    .content-header{
        margin-bottom:0.375rem;
    }
    
    .catalog-toolbar{
        margin-bottom:0.375rem;
    }
    
    /* Компактные breadcrumbs */
    .breadcrumbs{
        padding:0.625rem 0;
        font-size:0.8125rem;
    }
}

/* ============================================
   RESPONSIVE: XL DESKTOP (1536px+)
   ============================================ */
@media (min-width:1536px){
    /* .catalog-page .container управляется через container-system.css */
    .products,
    .products.grid-3,
    .products.grid-4,
    .products.grid-5{
        grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)) !important;
        gap:1.25rem;
    }
    .skeleton-grid{grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));gap:2rem}
    .sidebar{max-width:520px}
    
    /* На XL экранах максимально компактно */
    .quick-filters-bar,
    .quick-filters-sizes{
        margin-bottom:0.25rem;
        padding:0.25rem 0;
    }
    
    .quick-filters-sizes{
        padding-top:0.25rem;
    }
    
    .content-header{
        margin-bottom:0.25rem;
    }
    
    .catalog-toolbar{
        margin-bottom:0.375rem;
        padding:0.375rem 0;
    }
    
    .breadcrumbs{
        padding:0.5rem 0;
    }
}

/* ============================================
   RESPONSIVE: XXL DESKTOP (2560px+) - Ultra Wide
   ============================================ */
@media (min-width:2560px){
    /* .catalog-page .container управляется через container-system.css */
    .products,
    .products.grid-3,
    .products.grid-4,
    .products.grid-5{
        grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)) !important;
        gap:1.5rem;
    }
    .skeleton-grid{grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));gap:2.5rem}
}

/* Стили для rating, colors, sizes-quick - в catalog-card.css */

/* Quick View Modal */
.quick-view-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:300;align-items:center;justify-content:center;padding:1rem}
.quick-view-modal.active{display:flex}
.qv-content{background:#fff;border-radius:12px;max-width:900px;width:100%;max-height:90vh;overflow-y:auto;position:relative}
.qv-close{position:absolute;top:1rem;right:1rem;width:40px;height:40px;background:#fff;border:none;border-radius:50%;cursor:pointer;font-size:1.5rem;z-index:10;box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.qv-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;padding:1.5rem}
.qv-gallery img{width:100%;border-radius:8px}
.qv-thumbs{display:flex;gap:0.5rem;margin-top:1rem}
.qv-thumbs img{width:80px;height:80px;object-fit:cover;border-radius:6px;cursor:pointer;border:2px solid transparent}
.qv-thumbs img:hover{border-color:#000}
.qv-brand{font-size:0.75rem;font-weight:700;text-transform:uppercase;color:#666;margin-bottom:0.5rem}
.qv-details h2{font-size:1.5rem;font-weight:800;margin-bottom:1rem}
.qv-price{font-size:1.75rem;font-weight:900;margin-bottom:1.5rem}
.qv-sizes,.qv-colors{margin-bottom:1rem}
.qv-sizes h4,.qv-colors h4{font-size:0.875rem;font-weight:700;margin-bottom:0.5rem}
.qv-full{display:inline-block;margin-top:1rem;color:#666;text-decoration:none;font-weight:600}
@media (min-width:768px){.qv-grid{grid-template-columns:1fr 1fr;gap:2rem;padding:2rem}}

/* View History - История просмотров */
.view-history-section{margin:3rem 0;padding:2rem;background:#fafbfc;border-radius:16px}
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.section-header h2{font-size:1.5rem;font-weight:800;display:flex;align-items:center;gap:0.625rem}
.section-header h2 i{font-size:1.75rem;color:#3b82f6}
.btn-clear-history{background:#f3f4f6;border:none;padding:0.5rem 1rem;border-radius:8px;font-size:0.875rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:0.375rem;transition:all 0.2s}
.btn-clear-history:hover{background:#ef4444;color:#fff}
.view-history-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.history-product{background:#fff;border-radius:12px;overflow:hidden;transition:transform 0.2s,box-shadow 0.2s;box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.history-product:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.12)}
.history-product a{text-decoration:none;color:inherit;display:block}
.history-img{padding-top:100%;position:relative;background:#ffffff}
.history-img img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.history-info{padding:1rem}
.history-info .brand{font-size:0.6875rem;font-weight:700;text-transform:uppercase;color:#666;margin-bottom:0.25rem}
.history-info h4{font-size:0.875rem;font-weight:600;margin-bottom:0.5rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.history-info .price{font-size:1rem;font-weight:800;color:#000}
.loading-history{text-align:center;padding:2rem;color:#666;font-size:1.125rem}
@media (min-width:640px){.view-history-grid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1024px){.view-history-grid{grid-template-columns:repeat(6,1fr)}}

/* noUiSlider Custom */
.noUi-target{background:#e5e7eb;border:none;box-shadow:none;height:4px;border-radius:2px}
.noUi-connect{background:#000}
.noUi-handle{width:18px;height:18px;border-radius:50%;background:#000;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,0.15);cursor:pointer;top:-7px}
.noUi-handle:before,.noUi-handle:after{display:none}

/* КРИТИЧНО: Primary image ВСЕГДА видна (усиленное правило для гарантии отображения) */
.product-image.primary,
.modern-card .product-image.primary,
.product-card .product-image.primary{
    opacity:1 !important;
    visibility:visible !important;
    display:block !important;
}

/* ОСТАЛЬНЫЕ стили карточек - в catalog-card.css */

/* Loading dots анимация */
.loading-dots{display:inline-flex;align-items:center;gap:2px}
.loading-dots .dot{animation:dotPulse 1.4s infinite;opacity:0}
.loading-dots .dot:nth-child(2){animation-delay:0.2s}
.loading-dots .dot:nth-child(3){animation-delay:0.4s}
.loading-dots .dot:nth-child(4){animation-delay:0.6s}
@keyframes dotPulse{0%,80%,100%{opacity:0}40%{opacity:1}}

/* УДАЛЕНО: Стили для .quick-actions и .action-btn перенесены в catalog-card.css для избежания дублирования */

/* Mobile & Tablet: скрываем Quick Actions */
@media (max-width:767px){.quick-actions{display:none}}

/* НОВОЕ: Mobile UX - Bottom Sheet улучшения */
@media (max-width:767px){
    /* Sidebar как Bottom Sheet на mobile */
    .sidebar{
        top:auto;
        bottom:-100%;
        left:0;
        width:100%;
        max-width:100%;
        height:85vh;
        border-radius:20px 20px 0 0;
        transition:bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .sidebar.active{
        bottom:0;
        left:0;
    }
    
    /* Drag handle для свайпа */
    .sidebar-header::before{
        content:'';
        position:absolute;
        top:-12px;
        left:50%;
        transform:translateX(-50%);
        width:40px;
        height:4px;
        background:rgba(0,0,0,0.2);
        border-radius:2px;
    }
    
    /* Quick Filters всегда видимы на mobile */
    .quick-filters-bar{
        position:sticky;
        top:0;
        z-index:80;
        background:#fff;
        padding:0.75rem;
        margin:0 -1rem;
        box-shadow:0 2px 8px rgba(0,0,0,0.06);
    }
    
    /* Floating Apply Button - показывается только когда sidebar активен на мобильных */
    .catalog-page .sidebar.active .btn-apply-floating{
        display:flex !important;
        width:calc(100% - 2rem);
        position:fixed;
        bottom:1rem;
        left:1rem;
        right:1rem;
        z-index:9999;
        padding:1rem;
        background:linear-gradient(135deg,#000,#1f2937);
        color:#fff;
        border:none;
        border-radius:12px;
        font-weight:700;
        font-size:1rem;
        justify-content:center;
        align-items:center;
        gap:0.5rem;
        box-shadow:0 8px 24px rgba(0,0,0,0.25);
    }
}

/* ============================================
   RESPONSIVE: MOBILE (до 640px)
   ============================================ */
@media (max-width:639px){
    .products.grid-5{grid-template-columns:repeat(2,1fr);gap:0.75rem}
    .catalog-toolbar{flex-wrap:wrap;gap:0.5rem;padding:0.5rem 0}
    .toolbar-left{flex:1;min-width:0}
    .toolbar-right{flex:1;min-width:0}
    .sort-select{justify-content:flex-end}
    .sort-select select{min-width:0;max-width:140px;font-size:0.75rem;padding:0.375rem 0.5rem}
    /* На mobile кнопка фильтров видна */
    .filter-toggle-btn{display:flex !important;padding:0.5rem 0.875rem;font-size:0.8125rem}
    .filter-toggle-btn span{display:none}
    .filter-toggle-btn .filters-count{margin-left:0.25rem}
    .content-header{margin-bottom:0.375rem}
    .content-header h1{font-size:1rem;flex-wrap:wrap}
    .products-count{font-size:0.75rem}
    
    /* Quick filters - мобильная версия */
    .quick-filters-bar{gap:0.25rem;padding:0.375rem 0;margin-bottom:0.5rem}
    .quick-chip{padding:0.375rem 0.625rem;font-size:0.75rem;gap:0.25rem}
    .quick-chip i{font-size:0.75rem}
    .brand-chip .chip-count{font-size:0.625rem}
    .size-chip{padding:0.375rem 0.625rem;min-width:46px;font-size:0.8125rem}
    
    /* Size filters на мобильных */
    .quick-filters-sizes{
        flex-direction:column;
        align-items:flex-start;
        gap:0.5rem;
        padding:0.5rem 0;
        margin-bottom:0.5rem;
    }
    .size-system-toggle{
        padding:0.2rem;
        gap:0.2rem;
        margin-right:0;
        width:100%;
        justify-content:space-between;
    }
    .size-system-btn{padding:0.375rem 0.625rem;font-size:0.6875rem;flex:1}
    .sizes-scroll-container{width:100%}
    .size-group{gap:0.25rem}
}

/* ============================================
   RESPONSIVE: TABLET (640px - 1023px)
   ============================================ */
@media (min-width:640px) and (max-width:1023px){
    .products.grid-5{grid-template-columns:repeat(3,1fr) !important}
}

@media (min-width:1024px){
    .products.grid-5{grid-template-columns:repeat(5,1fr) !important}
    
    /* На десктопе переключатель и размеры в одну строку */
    .quick-filters-sizes{
        flex-direction:row;
        align-items:center;
        margin-bottom:0.5rem;
        padding-top:0.5rem;
        border-top:none;
    }
    
    /* Компактные quick-filters на десктопе */
    .quick-filters-bar{
        padding:0.5rem 0;
        margin-bottom:0.5rem;
        gap:0.5rem;
    }
    
    .quick-chip{
        padding:0.4rem 0.875rem;
        font-size:0.8125rem;
    }
    
    .size-chip{
        padding:0.4rem 0.75rem;
        min-width:56px;
        font-size:0.8125rem;
    }
    
    .size-system-toggle{
        margin-right:0.75rem;
        padding:0.2rem;
    }
    
    .size-system-btn{
        padding:0.3rem 0.625rem;
        font-size:0.75rem;
    }
    
    /* Компактный toolbar */
    .catalog-toolbar{
        padding:0.5rem 0;
        margin-bottom:0.5rem;
    }
    
    /* Уменьшаем отступы у заголовка */
    .content-header{
        margin-bottom:0.5rem;
        margin-top:0;
        padding:0;
    }
    
    .content-header h1{
        font-size:1.375rem;
        margin:0;
    }
    
    /* Breadcrumbs компактнее */
    .breadcrumbs{
        padding:0.75rem 0;
    }
}