.catalog-page{display: flex; flex-direction: column; gap: 20px; align-items: start; position: relative}

/* Компактные фильтры для десктопа */
.catalog-compact-filters{width: 100%;margin-bottom: 10px}
.compact-filter-header{display: flex; align-items: center; gap: 15px; flex-wrap: wrap}
.filter-title{font-weight: bold;font-family: 'Play', sans-serif;white-space: nowrap;font-size: 26px;}

.compact-filter-tabs{display: flex;gap: 10px;flex-wrap: wrap}
.filter-tab{position: relative; cursor: pointer}
.filter-tab > span{font-size: 18px;transition: all 0.3s ease;padding: 12px 25px;display: block;font-weight: 700;height: auto;}
.filter-tab:hover > span{/* background: #f0f0f0; */}
.filter-tab.active > span{background: #1D1D1B;color: #fff;}

.filter-dropdown{display: none;position: absolute;top: 100%;left: 0;background: #fff;border: 1px solid #e5e7e8;padding: 15px;box-shadow: 0 4px 12px rgba(0,0,0,0.1);z-index: 1000;min-width: 200px;margin-top: 10px;}
.filter-tab.active .filter-dropdown{display: block}

.filter-checkboxes{display: flex; flex-direction: column; gap: 10px}
.filter-checkbox{display: flex;align-items: center;gap: 10px;cursor: pointer;padding: 5px 0;font-family: 'Roboto', sans-serif;position: relative;margin: 0;font-size: 18px;}
.filter-checkbox input[type="checkbox"]{position: absolute; z-index: -1; opacity: 0; display: block; width: 0; height: 0}
.custom-checkbox{min-width: 18px; width: 18px; height: 18px; border: 2px solid #1D1D1B; display: block; flex-shrink: 0; transition: all 0.3s ease}
.filter-checkbox input:checked ~ .custom-checkbox{background: #1d1d1b url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="14" height="14"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>') no-repeat center center; border-color: #1d1d1b}
.items__block{height:100%}
.btn-reset{padding: 12px 25px;background: transparent;border: 1px solid #dc3545;color: #dc3545;cursor: pointer;font-size: 18px;white-space: nowrap;margin-left: auto;height: auto;}
.btn-reset:hover{background: #dc3545; color: white}

/* Выбранные фильтры */
.selected-filters-compact{display: flex;flex-wrap: wrap;gap: 8px;margin-top: 10px;}
.selected-filter-tag{display: inline-flex;align-items: center;background: #FFD100;padding: 8px 15px;font-size: 16px;transition: all 0.3s ease;cursor: pointer;border-radius: 4px;font-weight: 500;}
.selected-filter-tag:hover{background: #1d1d1b; color:#fff}
.selected-filter-tag .remove-filter{margin-left: 8px;cursor: pointer;font-weight: bold;font-size: 18px;line-height: 1;}

/* Мобильный фильтр */
.mobile-filter-toggle{display: none; align-items: center; gap: 8px; padding: 12px 25px; background: #FFD100; border: none; border-radius: 0; font-weight: 700; font-family: 'Play', sans-serif; cursor: pointer; margin: 0 auto 20px; font-size: 18px;}
.mobile-filter-toggle svg{flex-shrink: 0}

.mobile-filter-overlay{display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 9998; opacity: 0; transition: opacity 0.3s ease}
.mobile-filter-overlay.active{display: block; opacity: 1}

.mobile-filter-sidebar{position: fixed;top: 0;left: -100%;width: 300px;max-width: 400px;height: 100vh;background: #1d1d1d;z-index: 9999;transition: left 0.3s ease;display: flex;flex-direction: column}
.mobile-filter-sidebar.active{left: 0;}

.mobile-filter-header{display: flex;justify-content: space-between;align-items: center;padding: 20px;border-bottom: 2px solid #fff;background: #f8f9fa}
.mobile-filter-header h3{margin: 0; font-weight: bold; font-family: 'Play', sans-serif; font-size: 24px;}
.mobile-filter-close{opacity:0; visibility:hidden; background: none;border: none;font-size: 28px;cursor: pointer;color: #1D1D1B;width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;position: fixed;right: 10px;background: #fff;border: none;border-radius: 100%;font-size: 40px;padding-bottom: 8px;}
.mobile-filter-close:hover{color: #dc3545}
.mobile-filter-sidebar.active .mobile-filter-close{opacity:1; visibility:visible}

.mobile-filter-content{flex: 1; overflow-y: auto; padding: 20px}
.mobile-filter-group{margin-bottom: 15px;}
.mobile-filter-group h4{margin: 0 0 15px 0; font-weight: 600; font-family: 'Play', sans-serif; color: #1D1D1B; font-size: 20px;}
.mobile-filter-checkboxes{display: flex; flex-direction: column; gap: 12px}

.mobile-filter-footer{display: flex; gap: 10px; padding: 20px; border-top: 1px solid #eee; background: #f8f9fa}
.btn-mobile-reset{flex: 1; padding: 12px; background: transparent; border: 1px solid #dc3545; color: #dc3545; font-weight: 700; cursor: pointer; font-family: 'Play', sans-serif; font-size: 16px;}
.btn-mobile-apply{flex: 1; padding: 12px; background: #FFD100; border: 1px solid #FFD100; color: #1D1D1B; font-weight: 700; cursor: pointer; font-family: 'Play', sans-serif; font-size: 16px;}
.btn-mobile-reset:hover{background: #dc3545; color: white}
.btn-mobile-apply:hover{background: #1D1D1B; border-color: #1D1D1B; color: white}

#no-results-message{grid-column: 1 / -1; text-align: center; padding: 40px 20px; font-size: 18px; color: #6c757d}

/* Плитка товаров по 3 в ряд */
.catalog-content{width: 100%}
#items-container .col-lg-4{flex: 0 0 33.333333%; max-width: 33.333333%}

/* Адаптивность */
@media (min-width: 768px) {
	.items__title{min-height:85px}
}/*
@media (max-width: 1259px) {
    .compact-filter-header{flex-direction: column; align-items: flex-start; gap: 10px;}
    .compact-filter-tabs{width: 100%; justify-content: flex-start;}
    .btn-reset{margin-left: 0; margin-top: 10px;}
}*/

@media (max-width: 991px) {
    #items-container .col-lg-4{flex: 0 0 50%; max-width: 50%}
    .filter-tab > span{font-size: 16px; padding: 10px 20px;}
    .btn-reset{font-size: 16px; padding: 9px 20px}
}

@media (max-width: 767px) {
    .catalog-compact-filters{display: none}
    .mobile-filter-toggle{display: flex}

    
    #items-container .col-lg-4{flex: 0 0 100%; max-width: 100%; padding-bottom:20px}
}

@media (max-width: 575px) {
    .mobile-filter-sidebar{/* width: 100%; */max-width: none}
    .mobile-filter-header{padding: 15px 0;margin: 0 15px;}
    .mobile-filter-content{padding: 15px;}
    .mobile-filter-footer{padding: 15px;}
    .filter-checkbox{font-size: 16px;}
	
	.mobile-filter-content, .mobile-filter-header{background:#1D1D1B}
	.mobile-filter-group{background:#fff}
    .mobile-filter-group h4{padding:15px;font-size: 18px;background:#FFD100;margin: 0;}
	.mobile-filter-checkboxes{padding:15px; gap:0;}
	.mobile-filter-header h3{color:#fff}
	.btn-mobile-reset{text-transform:none;font-weight: 400;padding: 0;max-width: 130px;background: #FFD100;border: none;color: #1d1d1d;font-weight: 700;height: 40px;}
	.btn-mobile-reset:hover{background:#fff}
}