.woocomerce__sortbuttons .item {

			white-space: nowrap;
		}
		@media (max-width: 1480px) {
			.woocomerce__sortbuttons{
				max-width: 400px;
				overflow-x: scroll;
			}
		}
		@media (min-width: 980px) {
			.woocomerce__shopsidebar{
				position: sticky;
				top: 20px;
			}
		}
		.woocomerce__feature-wrapper{
			grid-template-columns: repeat(1, 1fr);
			grid-gap: 70px 0;
		}
		.text-details-project{
			position: absolute; bottom: 0; left: 0;  z-index: 999; width: 100%; padding: 0  15px 15px 15px; 
		}
		@media (max-width: 991px) {
			.woocomerce__shopsidebar {

				top: 30px;

			}
		}

		.woocomerce__shopsidebar .accordion-button, .woocomerce__shopsidebar label{
			font-size: 16px;
		}
		.woocomerce__shopsidebar-title{
			font-size: 16px;
		}


		.filter-button-grid-list button{
			background: #eeeeee;
			border:1px solid #eeeeee; 
			width: 50px;
			border-radius: 30px;
			height: 50px;
		}
		.filter-button-grid-list button.active{
			background: #212529;
			border-color: #212529;
		}
		.filter-button-grid-list button.active svg{
			fill: #ffffff;
		}
		.select-style-1 select{
			height: 50px;
			border-color: #212529;
			padding: .375rem 3.25rem .375rem 1.75rem;
			border-radius: 30px;
		}
		.select-style-1 select:focus{
			box-shadow: none;
			border-color: #212529;
		}
		.filters{ 
			border: 1px solid #212529;
			padding: 30px 20px 20px 20px;
		}
		.filters .filter-item {
			margin-bottom: 20px;
		}
		.filters .filter-search input{
			border-radius: 30px;
			background: #eeeeee; 
			padding: 13px  15px 13px 35px;
			border: none;
			width: 100%;
		}
		.filters .filter-search{
			position: relative;
			display: flex;
			align-items: center;
			margin-bottom: 35px;
		}
		.filters .filter-search-btn{
			position: absolute;

			left: 10px;
			cursor: pointer;

		}
		.h-filter{
			font-weight: 600;
			text-transform: uppercase;
			font-size: 16px;
			margin-bottom: 10px;
		}
		.list-filter-variation{
			display: flex;
			flex-wrap: wrap;
			row-gap: 5px;
			column-gap: 10px;
		}
		.filters .form-check-input:focus{
			box-shadow: none; 
		}
		.filters .form-check-input[type=checkbox] {
			border-radius: 0;
			box-shadow: none;
			border-color: #212529;
		} 
		.filters .form-check-input:checked {
			background-color: #212529;
			border-color: #212529;
		}
		.filters label{
			font-size: 18px;
			line-height: 1;
			width: 100%;
		}

		.projectsCatalog.grid{
			display: grid;
			gap: 20px;
			grid-template-columns: repeat(2, 1fr);
		}
		.projectsCatalog.list{
			display: grid;
			row-gap: 20px;
			grid-template-columns: repeat(1, 1fr);
		}
		.button{
			border: 1px solid #212529;
			border-radius: 30px;
			color: #212529; 
			font-size: 18px;
			padding: 13px  20px 13px 20px;
		}
		.button:hover{
			background: #212529;
			border: 1px solid #212529;
			color: #ffffff;

		}
		.projectsCatalog .item{
			position: relative; 
			border-radius: 20px;
			overflow: hidden;
		}
		.projectsCatalog .descriptionProject{
			padding: 10px;
			height: 100%;
			width: 100%;
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			position: absolute; 
			z-index: 2; 
		}
		.projectsCatalog .descriptionProject .categoryProject span{
			line-height: 1;
			color: #000000;
			border-radius: 2px;
			background: #ffffffd1;
			padding: 3px 7px;
			font-size: 14px;
		}
		.projectsCatalog .descriptionProject .categoryProject  {
			gap: 4px;
			display: flex; 
			align-self: flex-end;    
		}
		.projectsCatalog .descriptionProject .characterProject  {
			gap: 10px;
			display: flex;    
		}
		.projectsCatalog .descriptionProject .characterProject span{
			color: #ffffff;
			font-weight: 600;
			line-height: 1;
			font-size: 14px;
			display: flex;
			gap: 3px;
			align-items: center;
		}

		.projectsCatalog .descriptionProject::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%; 
			background: linear-gradient(to bottom, 
				rgba(0, 0, 0, 0) 0%, 
				rgba(0, 0, 0, 0) 69%, 
				rgba(0, 0, 0, 0.4) 100%
			);
			z-index: -1;
		}
		.projectsCatalog .descriptionProject .nameProjects h3{
			font-size: 28px;
		} 
		.projectsCatalog   .priceProject{
			font-size: 28px;
			color: #ffffff;
			display: flex;
			align-items: flex-end;
			gap: 3px;
			line-height: 1;
		}
		.projectsCatalog   .priceProject span{
			font-size: 21px; 
		}
		.woocomerce__sortbuttons.category-filter-list .btn{
			border: none;
			background-color: var(--gray-4);
			color: #212529;
		}
		.woocomerce__sortbuttons.category-filter-list .btn-check:active+.btn, .btn-check:checked+.btn, .btn.active, .btn.show, .btn:active{
			background-color: #212529;
			color: #ffffff;
		}
		.woocomerce__sortbuttons.category-filter-list .btn-check:focus+.btn, .btn-check:checked+.btn, .btn.active, .btn.show, .btn:focus{
			box-shadow: none;
		}
		.filter-mobile	{
			background: #eeeeee;
			border: 1px solid #eeeeee;
			border-radius: 30px;
			height: 50px;
			padding-left: 20px;
			/* font-size: 16px; */
			padding-right: 20px;
		}
		@-webkit-keyframes slide {
			100% { left: 0; }
		}
		.button-reset{
			border-color: red;
			color: red;
		}
		.button-reset svg{ 
			fill: red;
		}

		@keyframes slide {
			100% { left: 0; }
		}
		@media (max-width: 991px) {
			.select-style-1 select{ 
				padding: .375rem 15px .375rem 15px; 
			}
			.filters{
				position: absolute; 
				left: -150%; 
				background: #ffffff; 
			}
			.filters.active{
				-webkit-animation: slide 0.5s forwards;
				-webkit-animation-delay: 0s;
				animation: slide 0.5s forwards;
				animation-delay: 0s;
				z-index: 9991;
				width: 100%;
				max-height: 450px;
				overflow-y: auto;
				position: fixed;
				bottom: 0;
				padding-bottom: 100px;
				padding-top: 0;
			}

			.projectsCatalog.grid  .descriptionProject .nameProjects h3{
				font-size: 12px;
			} 
			.projectsCatalog.list  .descriptionProject .nameProjects h3{
				font-size: 20px;
			} 
			.projectsCatalog.grid  .descriptionProject{
				padding: 8px;

			}
			.projectsCatalog.grid  .descriptionProject .priceProject{
				font-size: 14px;
			}
			.projectsCatalog.grid  .descriptionProject .priceProject span{
				font-size: 12px;
			}
			.projectsCatalog.grid  .descriptionProject .priceProject svg{
				width: 10px;
				height: 10px;
			}
			#app .col-md-9{
				padding: 5px;
			}
			.projectsCatalog.grid  .descriptionProject .characterProject{
				gap: 3px; 
			}
			.projectsCatalog.grid  .descriptionProject .characterProject span{
				gap: 0;
				font-size: 8px;
			}
			.projectsCatalog.grid .descriptionProject .categoryProject span{
				font-size: 8px;
			}
			.projectsCatalog.grid{
				gap: 10px;
			}
			.projectsCatalog.list{
				gap: 10px;
			} 
			.categoryName{
				width: 100%;
			} 
			.filter-button-grid-list{
				display: none;
			}
			.projectsCatalog .priceProject {
				font-size: 24px; 
			}
			.filters.active .button-reset-reload{
				margin-bottom: 0 !important;
				position: fixed;
				bottom: 0;
				width: 99%;
				left: 0;
				padding: 20px;
				margin-left: 1px;
				margin-right: 1px;
				background: #ffffff;
				border-radius: 30px;
				z-index: 9;
			}
			.filters.active .close-btn{
				background: #ffffff;
				position: fixed; 
				left: 0; 

				will-change: transform;
				transform: translateZ(0);
				top: auto;
				width: 99%;
				border-top-left-radius: 20px;
				border-top-right-radius: 20px;
				padding: 10px 20px 10px 20px;
				margin: 0 1px;
				z-index: 999;
			}
			.filters .filter-item:nth-child(2){
				margin-top: 60px;
			}

		}

		.filters {
			border-radius: 20px;
		}
		.projectsCatalog .item:first-child img {
			border-radius: 20px;
		}

		.filter-button{
			display: none;
			position: fixed;
			bottom: 20px;
			justify-content: center;
			z-index: 9;
		}
		.filter-button div{
			font-size: 16px; 
			padding-right: 50px;
			padding-left: 50px;
		}
		.filter-button.filter-active{
			display: flex;
			width: 100%;
			z-index: 999;
		}

		.backdrop {
			position: fixed;
			inset: 0;
			background-color: rgba(0, 0, 0, 0.6);
			z-index: 1000;

			/* Опционально: размытие фона (как в твоём прошлом запросе) */
			backdrop-filter: blur(8px);
			-webkit-backdrop-filter: blur(8px);

			opacity: 0;
			visibility: hidden;
			transition: opacity 0.3s ease, visibility 0.3s;
		}

		.backdrop.active {
			opacity: 1;
			visibility: visible;
		}