.filterart-top-title{
	display: grid;
	grid-template-columns: 260px auto;
	grid-template-rows: repeat(6, auto);
	grid-template-areas: 
		"numerator numerator"
		"h1 h1"
		"h2 h2"
		"filter_indicator filter_indicator"
		"sorters-filters sorters-filters"
		"product-filters paintingListStage"
	;
	@media screen and (max-width:760px) {
		grid-template-areas:
			"numerator"
			"h1"
			"h2"
			"filter_indicator"
			"filter_button_mobile"
			"sorters-filters"
			"product-filters"
			"paintingListStage";
		grid-template-columns: 1fr;
		grid-template-rows: repeat(8, auto);
	}

	
	& > .filterart-top-title-num{
		grid-area: numerator;
		font-size: 1.4rem;
		padding: 0 0 10px 0;
		font-weight: 600;
		margin-block: 0;
		& .items-num-holder{
			font-size: 0.5em;
		}
	}
	& > h1{
		grid-area: h1;
		font-size: 1.6rem;
		font-weight: 600;
		margin-block: 0;
	}
	& > h2{
		grid-area: h2;
		font-size: 1.2rem;
		font-weight: 500;
		margin: 7px 0 0 0;
	}
	& .product-filters{
		grid-area: product-filters;
	}
}



.artwork-filter-cat{
	border-bottom: solid 1px rgba(0,0,0,1);
	cursor: pointer;
	font-size: 0.9em;
	padding: 10px 0;
	text-transform: uppercase;
	font-weight:600;
	& span {
		float:right;
	}
}
@media (min-width: 992px) {
  .artwork-filter-cat,
  .artwork-filter-cat-container {
    width: 90%;
  }
}

.artwork-filter-cat-container{
	margin-top: 10px;
	border-bottom: solid 1px #ddd;
	width: 90%;
	& .artwork-filter-cat-area{
		max-height: 250px;
		overflow-y: auto;
		width:100%;
		& .artwork-filter-cat-item{
			width: 100%;
			& .filter-block{
				display: flex;
			    align-items: center;
			    gap: 8px;
				padding: 5px 0;
				cursor:pointer;
				font-weight:600;
				& .filter-checkbox,
				& .filter-prices-checkbox,
				& .filter-sizes-checkbox{
					width: 23px;
					height: 23px;
					flex-shrink: 0;
					accent-color: #000;
				}
				& a{
					color:black;
					text-decoration:none;
					display: inline;
				}
			}
		}
	}
}

ul.artwork-container{
    --row-n: 3;
    --column-gap: 1.5rem;
    --row-gap: 2rem;
    
    display: grid;
    grid-template-columns: repeat(var(--row-n), minmax(0, 1fr));
    gap: var(--row-gap) var(--column-gap);
    width: 100%;
	padding: 0;
	margin: 0;
	list-style: none;
    & > * {
        min-width: 0;
		display: flex;
		gap:0;
		overflow: hidden;
		aspect-ratio: 1 / 1.7;
		@media screen and (max-width: 600px) {
			aspect-ratio: 1 / 1.85;
			font-size: 1.35rem;
			& div.buttons{
				top:auto;				
				bottom: 0;
				width: 3.5em;
				font-size: 1.8em;
			}
			& div.list_item_container {
				aspect-ratio: 1 / 1.85;
			}
			& div.list_item_container  price{
				right:auto;
				bottom:.5em;
				font-size: 1.1em;
				left: 0;
			}
		}
	
    }
	@media screen and (max-width: 1000px) {
		--row-n: 2;	
		--column-gap:0.2rem;
		
	}
	@media screen and (max-width: 320px) {
		--row-n: 1;	
	}
}

#paintingListStage{
	grid-area: paintingListStage;	
	text-transform: uppercase;
	padding-top:0;
	box-sizing: border-box;
	& li {
		list-style: none;
	}
	
}
.strip_art{
	box-sizing: border-box;
	grid-area:  filter_indicator;
	padding: 10px 0 0 0;
	width:100%;
	background-color: rgba(229,229,229,1);
	border-radius: 25px;
	font-size: 0.9rem;
	padding: 7px;
	font-weight: 600;
	display: flex;
    justify-content: left;
    align-items: center;
	flex-wrap: wrap;
    gap: 5px;
	text-transform: uppercase;
	margin: 15px 0px;
	& .filter-block{
		padding: 6px 7px;
		border-radius: 25px;
		cursor:pointer;
		background-color: #fff;
		border: solid 1px rgba(0,0,0,1);
		display: flex;
		align-items: center;     
		justify-content: space-between; 
		gap: 0.5rem;            
		& .icon {
		  width: 16px;
		  height: 16px;
		  flex-shrink: 0;
		}
	}
	& .bgblack{
		background-color:#000;
		color:#fff;
		& .icon circle {
		  fill: black;
		}
		& .icon path {
		  fill: white;
		}
	}
}
.strip_art:empty {
    padding: 0;
}
.sorters-filters{
	grid-area: sorters-filters;
	padding: 20px 0 30px 0;
	& * {box-sizing: border-box; white-space: nowrap;}
	& .sorters-block{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		flex-wrap: wrap;
		gap: 1em;
		& > * {
			flex: 0 0 auto;
		}
		@media screen and (max-width: 550px) {
			font-size: 0.83rem;
		}
		@media screen and (max-width: 450px) {
			font-size: 0.9rem;
			gap: 0.2em;
			justify-content: flex-start;
			flex-direction: column;
			align-items: flex-start;
			
		}
		& .sort-title{
			padding: 5px;
			width:auto;
			text-transform: uppercase;
			
		}
		& .sort-continer{
			
			
			position: relative;
			@media screen and (max-width: 750px) {
				
			}
			& .sort_selected{
				border-bottom: solid 1px rgba(0,0,0,1);
				cursor: pointer;
				padding: 5px 5px 5px 10px;
				
				text-align: left;
				
				text-transform: uppercase;
			}
			& .sort-list{
				top: 100%;
				height: auto;
				z-index: 1;
				background-color: rgba(255,255,255,1);
				border: solid 1px rgba(229,229,229,1);
				box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.06);
				position: absolute;
				
				& .sort_artworks{
					padding: 10px 5px 0px 10px;
					cursor:pointer;
				}
				.sort_artworks:last-child {
				  padding-bottom: 10px;
				}
			}
		}
		& .per-page-container{
			
			position: relative;
			@media screen and (max-width: 750px) {
				/* float: left;
				width: 100%; */
			}
			& .per-page-selected{
				text-transform: uppercase;
				border-bottom: solid 1px rgba(0,0,0,1);
				cursor: pointer;
				padding:5px 10px;
			
				& .top_per_page_artworks{
					font-weight:600;
				}
			}
			& .items-per-page{
				width: 100%;
				position: absolute;
				top: 100%;
				height: auto;
				z-index: 1;
				background-color: rgba(255,255,255,1);
				border: solid 1px rgba(229,229,229,1);
				box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.06);
				padding-right: 10px;
				& .per_page_artworks{
					padding: 10px 5px 0px 10px;
					cursor:pointer;
				}
				.per_page_artworks:last-child {
				  padding-bottom: 10px;
				}
			}
		}
	}
}

.filter-button{
	grid-area:  filter_button_mobile;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 4px 3px 8px;
	border: 1px solid black;
	border-radius: 999px;
	background: none;
	font-size: 14px;
	cursor: pointer;
	font-weight: 500;
	margin: 10px 0px;
	width: 77px;
	& .filter-icon {
	  width: 16px;
	  height: 16px;
	  stroke: black;
	  fill: none;
	}
}