

/* start shop 1  */
.shop-1 .box img{
	width: 12rem;
	height: 12rem;
	border-radius: 50%;
	object-fit: cover;
	background: var(--bg-grey);
	padding: 1rem;
}
.shop-1 .box h4{
	color: var(--heading-color);
	font-size: 2rem;
	transition: var(--transition-3);
	margin-top: 2rem;
}
.shop-1 .box h4:hover{
	color: var(--primary-color);
}
/* end shop 1  */



/* start showing products  */
.show-product .filter-details{
	border-top: .1rem solid rgba(0, 0, 0, .2);
	border-bottom: .1rem solid rgba(0, 0, 0, .2);
	padding: 1rem 7rem;
}
.show-product .filter-details p{
	font-size: 1.4rem;
	color: var(--font-color);
}
.show-product .filter-details select{
	color: var(--font-color);
	font-size: 1.4rem;
}
.show-product .filter-details button{
	background: transparent;
	border: .1rem solid var(--heading-color);
	padding: 1rem 2rem;
	font-size: 1.6rem;
	color: var(--heading-color);
	margin-left: 3rem;
}
.show-product .filter-details button:hover{
	background-color: var(--heading-color);
	color: var(--white-color);
}
.show-product .filter-details button i{
	font-size: 1.6rem;
	color: var(--heading-color);
	margin-right: 1rem;
}
.show-product .filter-details button:hover i{
	color: var(--white-color);
}
.show-product .product{
	min-height: 55rem;
	margin-bottom: 5rem;
}
.show-product .product .img-box{
	position: relative;
}
.show-product .product .img-box .tags{
	position: absolute;
	top: 1rem;
	right: 1rem;
}
.show-product .product .img-box .tags button{
	margin-left: 1rem;
	padding: .5rem 1.5rem;
	color: var(--white-color);
	background-color: var(--heading-color);
	font-size: 1.4rem;
	text-transform: capitalize;
}
.show-product .product .img-box .overlay{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	transition: var(--transition-3);
}
.show-product .product:hover .img-box .overlay{
	opacity: 1;
}
.show-product .product .img-box .overlay img{
	filter: brightness(.8);
}
.show-product .product .img-box .overlay .btns{
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	z-index: 10;
}
.show-product .product .img-box .overlay .btns button{
	color: var(--heading-color);
	font-size: 1.8rem;
	margin-bottom: 2rem;
	background-color: transparent;
}
.show-product .product .img-box .overlay .btns button:hover{
	color: var(--white-color);
}
.show-product .product .img-box .overlay .main-btn{
	background-color: var(--white-color);
	border: .1rem solid var(--heading-color);
	color: var(--heading-color);
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}
.show-product .product .img-box .overlay .main-btn:hover{
	background-color: var(--heading-color);
	color: var(--white-color);
}
.show-product .product .product-body{
	padding: 1rem .5rem;
}
.show-product .product .product-body .category{
	font-size: 1.4rem;
	color: var(--primary-color);
	display: block;
}
.show-product .product .product-body .name{
	font-size: 2rem;
	color: var(--heading-color);
	transition: var(--transition-3);
}
.show-product .product .product-body .name:hover{
	color: var(--primary-color);
}
.show-product .product .product-body p{
	font-size: 1.4rem;
	color: var(--font-color);
	line-height: 2.6rem;
}
.show-product .product .product-body h4{
	font-size: 1.7rem;
	color: var(--headig-color);
}
.show-product .product .product-body .stars span{
	font-size: 1.4rem;
	margin-right: .5rem;
	color: #daa520;
}
.show-product .product img{
	width: 100%;
	object-fit: cover;
}
.show-product .pagination a{
	color: var(--heading-color);
	font-size: 1.8rem;
	background-color: transparent;
	height: 5rem;
	width: 5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: .1rem solid var(--heading-color);
	text-decoration: none !important;
}
.show-product .pagination a:hover,
.show-product .pagination a.active{
	color: var(--white-color);
	background-color: var(--heading-color);
}
/* end showing products  */


/* start filter block  */
.filter-block{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, .2);
	z-index: 2000;
	overflow-x: hidden;
	display: none;
}
.filter-block .block{
	width: 40%;
	margin-left: auto;
	height: 100vh;
	overflow-y: auto;
	padding: 3rem;
	background-color: var(--white-color);
	box-shadow: -2rem 0 4rem rgba(0, 0, 0, .1);
	transform: translateX(150%);
}
.filter-block.active{
	display: block;
}
.filter-block.active .block{
	transform: translateX(0);
}
.filter-block .close-filter-block{
	padding: 1rem;
	cursor: pointer;
}
.filter-block .box{
	padding: 3rem 0;
	border-bottom: .1rem solid rgba(0, 0, 0, .2);
}
.filter-block .price-box input[type="range"]{
	width: 100%;
	height: .5rem;
	filter: hue-rotate(191deg) saturate(.5);
}
.filter-block .price-box p{
	font-size: 1.4rem;
	color: var(--font-color);
	padding: 1rem 0;
}
.filter-block .box h1{
	color: var(--primary-color);
	font-size: 3rem;
	font-weight: 400;
}
.filter-block .box img{
	width: 6rem;
	height: 6rem;
}
.filter-block .box h4,
.filter-block .box label{
	color: var(--font-color);
	font-size: 1.8rem;
	margin-left: 1.8rem;
	transition: var(--transition-3);
}
.filter-block .box h4:hover,
.filter-block .box label:hover{
	color: var(--primary-color);
}
.filter-block .color span{
	width: 2.5rem;
	height: 2.5rem;
	border: .1rem solid rgba(0, 0, 0, .2);
	background-color: var(--product-color);
	border-radius: 50%;
	display: inline-block;
	cursor: pointer;
}
.filter-block .box input[type="checkbox"]{
	color: var(--primary-color);
}
/* end filter block  */