.catalog-layout {display: flex;gap: 30px;align-items: flex-start;}
/* Sidebar */
.catalog-sidebar {width: 250px;flex-shrink: 0}
.filter-group {margin-bottom: 30px;border-bottom: 1px solid var(--border-color);padding-bottom: 20px}
.filter-group:last-of-type {border-bottom: none}
.filter-title {font-size: 16px;font-weight: 700;margin-bottom: 16px}
.filter-list {list-style: none;padding: 0;margin: 0;display: flex;flex-direction: column;gap: 12px}
.filter-list a {color: var(--text-main);text-decoration: none;font-size: 14px;transition: color 0.2s}
.filter-list a:hover, .filter-list a.active {color: var(--primary-color);}
.filter-list a.active {font-weight: 600;}
.price-inputs {display: flex;align-items: center;gap: 10px}
.price-inputs input {background:#fff; width: 100%;padding: 8px 12px;border: 1px solid #fff;border-radius: 8px;font-size: 14px;outline: none;font-family: 'Inter', sans-serif}
.price-inputs input:focus {border-color: var(--primary-color);}
.brand-search {position: relative;margin-bottom: 15px;}
.brand-search iconify-icon {position: absolute;left: 12px;top: 50%;transform: translateY(-50%);color: var(--text-muted)}
.brand-search input {background:#fff; width: 100%;padding: 10px 12px 10px 36px;border: 1px solid #fff;border-radius: 8px;font-size: 14px;outline: none;font-family: 'Inter', sans-serif}
.brand-search input:focus {border-color: var(--primary-color);}
.brand-list{display: flex;flex-direction: column;gap: 12px;max-height: 200px;overflow-y: auto}
.checkbox-label{display: flex;align-items: center;gap: 10px;font-size: 14px;cursor: pointer}
.checkbox-label input {width: 16px;height: 16px;accent-color: var(--primary-color);cursor: pointer}
.catalog-sidebar .btn-apply {width: 100%;margin-bottom: 10px}
.catalog-sidebar .btn-reset{width: 100%;background: transparent;border: none;color: var(--text-muted);font-size: 14px;cursor: pointer;font-weight: 500}
.catalog-sidebar .btn-reset:hover {color: var(--primary-color)}
/* Main Area */
.catalog-main{flex-grow: 1}
.catalog-search {display: flex;margin-bottom: 30px;position: relative}
.catalog-search input{background:#fff; width: 100%;padding: 14px 20px;border: 1px solid #fff ;border-radius: 12px;font-size: 16px;outline: none;font-family: 'Inter', sans-serif;transition: border-color 0.2s;}
.catalog-search input:focus {border-color: var(--primary-color)}
.catalog-search button {background:#fff; position: absolute;right: 12px;top: 50%;transform: translateY(-50%);background: var(--primary-color);color: #fff;border: none;width: 40px;height: 40px;border-radius: 8px;display: flex;align-items: center;justify-content: center;cursor: pointer;font-size: 20px;transition: background 0.2s}
.catalog-search button:hover {background: #ff7733}
.catalog-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap: 20px}
.catalog-card {display: flex;flex-direction: column;text-decoration: none;color: var(--text-main);background: #fff;border-radius: 16px;overflow: hidden;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);border: 1px solid var(--border-color);transition: transform 0.2s, box-shadow 0.2s;}
.catalog-card:hover {transform: translateY(-5px);box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08)}
.catalog-card-img{height: 160px;width: 100%;overflow: hidden;background: #f5f5f5}
.catalog-card-img img{width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s}
.catalog-card:hover .catalog-card-img img{transform: scale(1.05)}
.catalog-card-title{padding: 16px;font-weight: 600;font-size: 16px;display: flex;flex-direction: column;gap: 4px}
.catalog-card-title .count{font-size: 13px;color: var(--text-muted);font-weight: 400}
@media (max-width: 992px) {
    .catalog-layout {flex-direction: column;}
    .catalog-main{width: 100%}
    .catalog-sidebar {width: 100%;display: none;}
}
@media (max-width: 576px) {
    .catalog-grid {grid-template-columns: repeat(2, 1fr);gap: 12px;}
    .catalog-card-img {height: 120px;}
    .catalog-card-title {font-size: 14px;padding: 12px;}
    .catalog-title {font-size: 24px;}
}

/* Прелоадер */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.8);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #e0e0e0;
    border-top-color: #333;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}




.product-card {transition: opacity 0.3s ease, transform 0.3s ease}
.product-card.fade-out {opacity: 0;transform: scale(0.9)}
.product-card.fade-in{opacity: 1;transform: scale(1)}
.cat-count {font-size: 11px;color: #999;margin-left: 4px}
.btn-apply, .btn-reset {transition: all 0.2s ease}
.btn-apply:active, .btn-reset:active {transform: scale(0.96);}

.no-products-message{grid-column: 1 / -1;  text-align: center; padding: 24px;background: #fdfdfd;border-radius: 16px;border: 1px dashed #dcdcdc}
.no-products-message p{font-size: 18px;color: var(--primary-color); font-weight: 600; margin-bottom: 5px;}
.no-products-message .no-products-hint {font-size: 16px;color: #333}