//BEGIN PRODUCT_LIST SCSS
.label-sale{
	position: absolute;
	top: 30px;
	right: 20px;
	background-color: #03a9f4;
	color: #fff;
	padding: 0.5px 9px 0px 8px;
	display: inline-block;
	text-align: center;
	line-height: 30px;
	border-radius:4px;
	border-bottom-left-radius: 0;
	font-weight: 700;
	z-index: 2;
	font-size: 14px;
	&:before{
		content: "";
		border-right: 8px solid transparent;
		border-bottom: 5px solid #03a9f4;
		border-left: none;
		position: absolute;
		top: calc(100% + 1px);
		left: -2px;
		right: auto;
		transform: rotate(90deg);
	}
	&.red-right{
		right: 10px;
		top: 10px;
		background-color: #ff5722;
		&:before{
			border-bottom: 5px solid #ff5722;
		}
	}
	&.blue-left{
		top: 10px;
		left: 10px;
		right: auto;
		&:before{
			top: 100%;
			right: -3.5px;
			transform: rotate(60deg);
			left: auto;
		}
	}
	&.blue-right{
		right: 10px;
		top: 10px;
		&:before{
			left: -1.5px;
		}
	}
}

.price{
	color: #e12f2f;
	margin: 0 0 10px 0;
	font-size: 14px;
	font-weight: 700;
	.price-old{
		color: #999999;
		font-size: 12px;
		text-decoration: line-through;
		display: inline-block;
		font-weight: 400;
	}
}

.product-box{
	text-align: center;
	border: 1px solid #dddddd;
	margin-bottom: 3rem;
	position: relative;
	background-color: #fff;
	.product-image{
		position: relative;
		.c-img{
			&:before{
				content: '';
				display: inline-block;
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
				background: rgba(255, 255, 255, 0.6);
				opacity: 0;
				z-index: 1;
				transition: all 0.3s ease-in-out;
			}
			img{
				height: auto;
				width: 100%;
				object-fit: cover;
			}
		}
		.quickview{
			display: inline-block;
			width: 40px;
			height: 40px;
			background-color: #fff;
			color: #999999;
			font-size: 14px;
			border: 1px solid #dddddd;
			text-align: center;
			line-height: 40px;
			opacity: 0;
			position: absolute;
			top: 0;
			left: calc(50% - 20px);
			z-index: 2;
			transition: all 0.3s ease-in-out;
			transition: all 0.3s cubic-bezier(0.45, 0.22, 0.27, 1.55) 0s;
			&:hover{
				background-color: $vang;
				color: #fff;
				border: 1px solid $vang;
			}
		}
		&:hover{
			.link-product{
				&:before{
					opacity: 1;
				}
			}
			.quickview{
				opacity: 1;
				top: calc(50% - 20px);
			}
		}
	}
	.product-name{
		font-weight: 700;
		font-size: 14px;
		text-transform: uppercase;
		line-height: 22px;
	}
	.price{
		text-align: center;
	}
	.button-group{
		font-size: 0;
		background-color: #fff;
		margin-top: 15px;
		border-top: 1px solid #dddddd;
		button{
			text-align: center;
			height: 45px;
			line-height: 45px;
			border: none;
			vertical-align: top;
			background-color: #fff;
			&:hover{
				color: #fff;
				background-color: $vang;
			}
		}
		.wishlist-btn{
			width: 19.5%;
			font-size: 13px;
			color: #999999;
		}
		.add-to-cart{
			width: 61%;
			font-size: 12px;
			color: $vang;
			font-weight: 700;
		}
	}
	.label-sale.red-right:before{
		left: -1.5px;
	}
	.product-info{
		position: relative;
		.product-name{
			line-height: 22px;
		}
	}
}

.rating{
	.rating-box{
		font-size: 13px;
		color: #ff9600;
		.fa-stack{
			width: 1em;
		}
	}
}

.featured-title{
	margin-bottom: 3rem;
	text-align: center;
	margin-top: 0;
	font-size: 2rem;
	> span{
		display: inline-block;
		padding: 5px 0;
		font-weight: 700;
		color: $vang;
		border-top: 1px solid #444444;
		border-bottom: 1px solid #444444;
		> span{
			font-weight: 400;
			color: #444444;
		}
	}
}

.product-list{
	background-color: #eeeeee;
	padding: 40px 0;
	.aside-left{
		.close-aside-left{
			font-size: 18px;
			position: absolute;
			top: 6px;
			right: 14px;
			display: none;
		}
	}
	.filter-category{
		background-color: #fff;
		border: 1px solid $border;
		border-top: none;
	}
	.aside-title{
		font-size: 2rem;
		color: #fff;
		background-color: #444444;
		font-weight: 700;
		padding: 1.5rem 2rem;
	}
	.aside-filter{
		.filter-box{
			background-color: #fff;
			padding: 2rem 0 3rem;
			margin: 0 2rem;
			border-bottom: 1px dotted $border;
			&:last-child{
				border-bottom: none;
			}
			.filter-box-title{
				font-size: 14px;
				text-transform: uppercase;
				margin-bottom: 1.5rem;
			}
			.fillter-category{
				label{margin-bottom: 0;}
				.choose{
					display: block;
					&:not(:last-child){
						margin-bottom: 1.7rem;
					}
					p{
						float: left;
						line-height: 1;
						text-transform: capitalize;
					}

				}
				input[type='radio']{
					display: none;
					&:checked + .radio-checked{
						&:before{
							content: "";
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							background: #999999;
						}
						& + p{
							color: $vang;
						}
					}
				}
				.radio-checked{
					width: 11px;
					height: 11px;
					float: left;
					border: 2px solid #999999;
					margin-right: 10px;
					position: relative;
				}
			}
			.fillter-color{
				.table{
					display: table;
					margin-bottom: 1.7rem;
					&:last-child{
						margin-bottom: 0;
					}
				}
				.choose{
					display: table-cell;
					width: 50%;
					p{
						margin-top: 4px;
					}
				}
				input[type='radio']{
					display: none;
					&:checked + .radio-checked:before{
						@include transform (scale(1));
						@include transform (rotate(0deg));
						opacity: 1;
						content: "\f00c";
						font-family: "fontawesome";
						left: 3px;
						top: -1px;
						color: #fff;
						font-size: 15px;
						display: inline-block;
						background-color: transparent;
					}
				}
				.radio-checked{
					width: 20px;
					height: 20px;
					border: none;
					margin-right: 10px;
					&:before{
						content: "\f00c";
						font-family: "fontawesome";
						left: 3px;
						top: -1px;
						color: #fff;
						font-size: 15px;
						display: inline-block;
						background-color: transparent;
						opacity: 0;
						@include transform (scale(0));
						@include transform (rotate(-90deg));
						@include smooth(.4s);
					}
				}
			}
			.filter-price {
				width: 100%;
				border: 0;
				padding: 0;
				margin: 0; 
			}

			.price-container {
				width:100%;
			}

			.price-field {
				position: relative;
				width: 100%;
				box-sizing: border-box;
				padding: 3rem 0 1.5rem 0;
			}

			.price-field input[type=range] {
				position: absolute;
			}

			/* Reset style for input range */

			.price-field input[type=range] {
				width: 100%;
				outline: 0;
				box-sizing: border-box;
				pointer-events: none;
				-webkit-appearance: none;
				height: 4px;
				background-color: $vang;
				border-radius: 0;
				border: none;
			}

			.price-field input[type=range]::-webkit-slider-thumb {
				-webkit-appearance: none;
			}

			.price-field input[type=range]:active,
			.price-field input[type=range]:focus {
				outline: 0;
			}

			.price-field input[type=range]::-ms-track {
				width: 188px;
				height: 2px; 
				border: 0;
				outline: 0;
				box-sizing: border-box;
				border-radius: 5px;
				pointer-events: none;
				background: transparent;
				border-color: transparent;
				color: red;
				border-radius: 5px;
			}

			/* Style toddler input range */

			.price-field input[type=range]::-webkit-slider-thumb { 
				/* WebKit/Blink */
				position: relative;
				-webkit-appearance: none;
				margin: 0;
				border: 0;
				outline: 0;
				border-radius: 50%;
				height: 15px;
				width: 15px;
				margin-top: -7px;
				background-color: $vang;
				cursor: pointer;
				pointer-events: all;
				z-index: 100;
			}

			.price-field input[type=range]::-moz-range-thumb { 
				/* Firefox */
				position: relative;
				-webkit-appearance: none;
				margin: 0;
				border: 0;
				outline: 0;
				border-radius: 50%;
				height: 15px;
				width: 15px;
				margin-top: -7px;
				background-color: $vang;
				cursor: pointer;
				pointer-events: all;
				z-index: 100;
			}

			.price-field input[type=range]::-ms-thumb  { 
				/* IE */
				position: relative;
				-webkit-appearance: none;
				margin: 0;
				border: 0;
				outline: 0;
				border-radius: 50%;
				height: 15px;
				width: 15px;
				margin-top: -7px;
				background-color: $vang;
				cursor: pointer;
				pointer-events: all;
				z-index: 100;
			}

			/* Style track input range */

			.price-field input[type=range]::-webkit-slider-runnable-track { 
				/* WebKit/Blink */
				width: 188px;
				height: 2px;
				cursor: pointer;
				background: #555;
				border-radius: 5px;
			}

			.price-field input[type=range]::-moz-range-track { 
				/* Firefox */
				width: 188px;
				height: 2px;
				cursor: pointer;
				background: #242424;
				border-radius: 5px;
			}

			.price-field input[type=range]::-ms-track { 
				/* IE */
				width: 188px;
				height: 2px;
				cursor: pointer;
				background: #242424;
				border-radius: 5px;
			}

			/* Style for input value block */

			.price-wrap {
				color: #242424;
				font-size: 14px;
				line-height: 1.2em;
				font-weight: 400;
				margin-bottom: 0px;
			}

			.price-wrap-1, 
			.price-wrap-2 {
				border: 1px solid #ddd;
				padding: 3px 5px 2px 5px;
				float: left;
				margin-right: 10px;
				min-width: 60px;
				min-height: 35px;
			}
			.price-wrap #one, 
			.price-wrap #two {
				width: 30px;
				text-align: left;
				margin: 0;
				padding: 0;
				margin-right: 2px;
				background:  0;
				border: 0;
				outline: 0;
				color: #666;
			}

			.price-wrap label {
				text-align: right;
				margin-top: 6px;
				padding-left: 5px;
			}

			button[type='submit']{
				width: 80px;
				height: 35px;
				color: #fff;
				font-weight: 700;
				background-color: $vang;
				text-align: center;
				line-height: 35px;
				border: none;
				font-size: 12px;
			}

			/* Style for active state input */

			.price-field input[type=range]:hover::-webkit-slider-thumb {
				// box-shadow: 0 0 0 0.5px #242424;
				transition-duration: 0.3s;
			}

			.price-field input[type=range]:active::-webkit-slider-thumb {
				// box-shadow: 0 0 0 0.5px #242424;
				transition-duration: 0.3s;
			}
		}
	}

	.aside-best-seller{
		margin-top: 4rem;
		.deals-box{
			margin-top: 2rem;
			background-color: transparent;
			.box{
				margin-left: 130px;
			}
			.product-image-right{
				float: left;
				width: 110px;
				text-align: center;
			}
			.product-name{
				margin-top: 0;
				text-transform: uppercase;
			}
			.price{
				margin: 0;
			}
		}
	}
	.product-filter-top{
		background-color: #fff;
		border: 1px solid $border;
		.sidebar-overlay{
			background: rgba(0, 0, 0, 0.5);
			display: none;
			height: 100%;
			opacity: 1;
			position: fixed;
			top: 0;
			left: 0px;
			right: 0px;
			width: 100%;
			z-index: 998;
		}
		.sort-by{
			padding:0 2rem;
			padding: 7px 20px 7px 20px;
		}
		.control-label{
			margin-right: 3px;
		}
		select{
			border-radius: 0;
			font-family: "Open Sans";
			color: #404040;
			padding: 0 14px;
			height: 28px;
			border: 1px solid $border;
			font-size: 12px;
			box-shadow: unset;
			-webkit-appearance: none; /* Webkit */
			-moz-appearance: none; /* FF */
			-ms-appearance: none;
			appearance: none;
			&::-ms-expand{
				display: none;
			}
		}
		.list-view{
			font-size: 0;
			text-align: right;
			padding: 6px 6px 2px 0;
			button{
				font-size: 14px;
				background-color: #fff;
				width: 30px;
				height: 30px;
				text-align: center;
				line-height: 30px;
				padding: 0;
				color: #999999;
				border: 1px solid $border;
				@include smooth(.2s);
				&:nth-child(2n + 2){
					border-right: none;
				}
				&:nth-child(2n + 1){
					border-left: none;
				}
				&.active{
					background-color: $vang;
					color: #fff;
					border: 1px solid $vang;
					pointer-events: none;
				}
			}
			.sidebar-toggle-btn{
				height: 32px;
				display: none;
				width: auto;
				margin-right: 10px;
				border: 2px solid #dddddd !important;
				color: #444444;
				padding: 0 7px;
				i{
					margin-right: 5px;
				}
			}
		}
		ul.pagination{
			font-size: 0;
			text-align: right;
			width: 100%;
			margin: 0;
			padding: 7px 7px 6px 0;
			line-height: 1;
			li{
				display: inline-block;
				text-align: center;
				@include smooth(.2s);
				background-color: #fff;
				font-size: 12px;
				&:not(:last-child){
					margin-right: 3px;
				}
				a{
					color: #444444;
					display: block;
					padding: 4px 9px 4px 9px;
					min-width: 27px;
					min-height: 27px;
					border-radius: 0 !important;
				}
				&:hover a{
					background-color: $vang;
					color: #fff;
				}
				&.active span{
					padding: 4px 10px 4px 11px;
					min-width: 27px;
					min-height: 27px;
					border-radius: 0;
					font-size: 12px;
					background-color: $vang;
					color: #fff;
					border: 1px solid $vang;
				}
			}
		}
	}
	.product-list-view{
		padding-top: 3rem;
		.product-layout-table{
			@include transition (all 0.5s ease 0s);
			.product-box{
				background-color: #fff;
				.product-desc{
					display: none;
				}
			}
		}
		.product-layout-list{
			@include transition (all 0.5s ease 0s);
			.product-box{
				text-align: left;
				padding: 2rem;
				.product-image{
					width: 270px;
					display: inline-block;
					float: left;
				}
				.product-info{
					display: inline-block;
					vertical-align: top;
					margin-left: 20px;
					width: calc(100% - 290px);
					.product-name{
						margin-bottom: 10px;
					}
					.price{
						text-align: left;
						margin-bottom: 0;
					}
				}
				.product-desc{
					margin-bottom: 1.5rem;
				}
				.button-group{
					width: 270px;
					margin: 0 0 0 290px;
					border: 1px solid $border;
					.add-to-cart{
						border-left: 1px solid $border;
						border-right: 1px solid $border;
					}
				}
			}
		}
	}
	.product-list-view-04{
		.product-layout-table{
			.product-box{
				display: -ms-flexbox;
				display: flex;
				-ms-flex-wrap: wrap;
				flex-wrap: wrap;
				.product-image{
					width: 30%;
				}
				.product-info{
					width: 50%;
					padding: 2rem;
					text-align: left;
					.price{
						text-align: left;
						margin: 0;
					}
					.product-desc{
						margin: 1.5rem 0 0;
						padding: 1.5rem 0 0;
						border-top: 1px dotted #ddd;
						display: block;
					}
				}
				.button-group{
					width: 19.5%;
					margin: 0;
					border: 0;
					padding: 2rem 1rem;
					button{
						border: 1px solid $border;
						&:hover{
							border: 1px solid $vang;
						}
					}
					.add-to-cart{
						width: 100%;
						margin-bottom: 1rem;
						background-color: $vang;
						color: #fff;
						&:hover{
							background-color: #968946;
							border: 1px solid #968946;
						}
					}
					.wishlist-btn{
						width: calc(50% - 2px);
						&:last-child{
							margin-left: 2px;
						}
						&:not(:last-child){
							margin-right: 2px;
						}
					}
				}
			}
		}
		.product-layout-list{
			.product-box{
				padding: 0;
				background-color: #fff;
				.product-info{
					padding: 2rem 2rem 0 0;
					margin-bottom: 2rem;
					.product-name{
						margin-bottom: 5px;
					}
					.product-desc{
						margin: 1.5rem 0 0;
						padding: 1.5rem 0 0;
						border-top: 1px dotted #dddddd;
					}
				}
				.button-group{
					width: auto;
					border: none;
					margin-bottom: 2rem;
					button{
						border: 1px solid $border;
						&:hover{
							border: 1px solid $vang;
						}
					}
					.add-to-cart{
						width: 140px;
						height: 45px;
						background-color: $vang;
						color: #fff;
						margin-right: 10px;
						&:hover{
							background-color: #968946;
							border: 1px solid #968946;
						}
					}
					.wishlist-btn{
						width: 50px;
						height: 45px;
						margin-right: 4px;
					}
				}
			}
		}
	}
}

//END PRODUCT_LIST SCSS