1#@!#!123s

: / home3 / encodto1 / tresboutique.in / assets / sass / pages /
Filename : _shop.scss
back
/*SHOP*/

.product-cart-wrap {
	position: relative;
	background-color: #fff;
	border: 1px solid #cce7d0;
	border-radius: 25px;	
	overflow: hidden;	
	@include transistion-duration-2s;

	&:hover {
		box-shadow: 0 0 20px rgba(0,0,0,.08);
	}

	.product-img-action-wrap {
		position: relative;
		background-color: #fff;
		padding: 10px 12px;
		overflow: hidden;
		max-height: 320px;
		.product-img {
			position: relative;
			overflow: hidden;
			border-radius: 20px;
			
			a {
				overflow: hidden;
				display: flex;
				img {
					width: 100%;
					border-radius: 10px;
					&.hover-img {
						position: absolute;
						left: 0;
						top: 0;
						z-index: 2;
						opacity: 0;
						visibility: hidden;
						transition: 0.25s opacity, 0.25s visibility, transform 1.5s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 1.5s cubic-bezier(0, 0, 0.2, 1);
					}
				}
			}
		}
		.product-img-zoom {
			a {
				img {
					// -webkit-transition: all 1.5s cubic-bezier(0, 0, 0.1, 1);
					// -o-transition: all 1.5s cubic-bezier(0, 0, 0.1, 1);
					transition: all 1.5s cubic-bezier(0, 0, 0.05, 1);
				}
			}
		}
		
	}
	.product-action-1 {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translateX(-50%) translateY(-50%);
		opacity: 0;
		visibility: hidden;
		-webkit-transition: all .3s ease 0s;
		-o-transition: all .3s ease 0s;
		transition: all .3s ease 0s;
		z-index: 9;
		&.show {
			visibility: visible;
			opacity: 1;
			bottom: 26px;
			left: unset;
			right: 20px;
			top: unset;
			transform: none;
		}
		button, a.action-btn {
			width: 40px;
			height: 40px;
			line-height: 44px;
			border-radius: 50px;
			background-color: #e8f6ea;
			text-align: center;
			margin-right: 3px;
			position: relative;
			display: inline-block;
			border: 1px solid #cce7d0;

			&.small {
				width: 32px;
				height: 32px;
				line-height: 32px;
				i {
					font-size: 12px;
				}
			}
			&:after {
				bottom: 100%;
				left: 50%;
				position: absolute;
				white-space: nowrap;
				border-radius: 5px;					
				font-size: 11px;
				padding: 7px 10px;
				color: #ffffff;
				background-color: $color-brand;
				content: attr(aria-label);
				line-height: 1.3;
				-webkit-transition-delay: .1s;
				-o-transition-delay: .1s;
				transition-delay: .1s;
				-webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1);
				box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1);
				transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24), -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
				opacity: 0;
				visibility: hidden;
				-webkit-transform: translateX(-50%) translateY(0px);
				-ms-transform: translateX(-50%) translateY(0px);
				transform: translateX(-50%) translateY(0px);
			}
			&:before {
				content: '';
				position: absolute;
				left: calc(50% - 7px);
				bottom: 100%;
				-webkit-transition-delay: .1s;
				-o-transition-delay: .1s;
				transition-delay: .1s;
				border: 7px solid transparent;
				border-top-color: $color-brand;
				z-index: 9;
				margin-bottom: -13px;
				transition-delay: .1s;
				transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24), -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
				opacity: 0;
				visibility: hidden;
			}
			&:last-child {
				margin-right: 0;
			}
			i {
				font-size: 15px;
				margin-left: 1px;
			}
			&:hover {
				background-color: $color-brand;
				border: 1px solid transparent;
				&:after {
					opacity: 1;
					visibility: visible;
					-webkit-transform: translateX(-50%) translateY(-8px);
					-ms-transform: translateX(-50%) translateY(-8px);
					transform: translateX(-50%) translateY(-8px);
				}
				&:before {
					opacity: 1;
					visibility: visible;
					-webkit-transform: translateY(-8px);
					-ms-transform: translateY(-8px);
					transform: translateY(-8px);
				}
				i {
					color: #fff
				}
			}
		}
	}
	.product-badges {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		&.product-badges-mrg {
			margin: 0 0 10px;
		}
		&.product-badges-position {
			position: absolute;
			left: 20px;
			top: 19px;
			z-index: 9;
		}
		span {
			display: inline-block;
			font-size: 12px;
			line-height: 1;
			border-radius: 40px;
			color: #fff;
			padding: 5px 10px;
			&:last-child {
				margin-right: 0px;
			}
			&.hot {
				background-color: $color-hot;
			}
			&.new {
				background-color: $color-new;
			}
			&.sale {
				background-color: $color-sale;
			}
			&.best {
				background-color: $color-best;
			}
		}
	}
	.product-content-wrap {
		padding: 0 20px 15px 20px;
		.product-category {
			margin-bottom: 5px;
			a {
				color: $color-grey-4;
				font-size: 12px;
				&:hover {
					color: $color-brand;
				}
			}
		}
		h2 {
			font-size: 16px;
			font-weight: 600;
			a {
				color: $color-grey-1;
				&:hover {
					color: $color-brand;
				}
			}
		}
		.product-price {
			padding-top: 5px;
			span {
				font-size: 18px;
				font-weight: bold;
				color: $color-brand;
				&.new-price {
					color: $color-brand;
				}
				&.old-price {
					font-size: 14px;
					font-weight: 400;
					color: $color-grey-4;
					margin: 0 0 0 7px;
					text-decoration: line-through;
				}
			}
		}
		.rating-result {
			display: flex;
			> span {
				display: block;
				overflow: hidden;
				margin-left: 5px;
			}	
			&::before {
				font-family: "uicons-regular-straight"  !important;
				font-size: 11px;
				letter-spacing: 2px;
				content: '\f225' '\f225' '\f225' '\f225' '\f225';
				color: $color-warning;
			}		
		}
		.add-to-cart {
			width: 44px;
			height: 44px;
			line-height: 44px;
			border-radius: 5px;
			background-color: #f5f5f5;
			text-align: center;
			display: block;
			color: $color-grey-1;
			font-size: 16px;
			position: absolute;
			bottom: 25px;
			right: 20px;
			font-weight: 300;
			&:hover {
				background-color: $color-brand;
				color: #fff;
			}
			img {
				width: 20px;
				display: inline-block;
				margin-top: 11px;
			}
		}
	}
	.product-stock {
		.status-bar {
			background-color: #ededed;
			margin: 0px 0 10px;
			border-radius: 5px;
			.sold-bar {
				background-image: -webkit-linear-gradient(215deg, $color-brand 0%, #77ccfd 100%);
				background-image: -o-linear-gradient(215deg, $color-brand 0%, #77ccfd 100%);
				background-image: linear-gradient(235deg, $color-brand 0%, #77ccfd 100%);
				border-radius: 4px;
				height: 8px;
				&.sold-bar-width-33 {
					width: 33.333333333333%;
				}
				&.sold-bar-width-10 {
					width: 10%;
				}
				&.sold-bar-width-40 {
					width: 40%;
				}
				&.sold-bar-width-6 {
					width: 6.6666666666667%;
				}
				&.sold-bar-width-42 {
					width: 42.857142857143%;
				}
			}
		}
		.product-stock-status {
			display: -webkit-box;
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
			-webkit-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			.sold {
				-webkit-box-flex: 1;
				-webkit-flex-grow: 1;
				-ms-flex-positive: 1;
				flex-grow: 1;
				margin-right: 20px;
			}
			.available {
				-webkit-flex-shrink: 0;
				-ms-flex-negative: 0;
				flex-shrink: 0;
			}
			.stock-status-same-style {
				span {
					font-size: 15px;
					&.label {
						color: #1a1a1a;
					}
					&.value {
						font-weight: 700;
						color: #333;
					}
				}
			}
		}
	}
	&:hover {
		.product-img-action-wrap {
			.product-img {
				a {
					img {
						&.hover-img {
							opacity: 1;
							visibility: visible;
						}
					}
				}
			}
			.product-action-1 {
				opacity: 1;
				visibility: visible;
			}
		}
		.product-img-zoom {
			a {
				img {
					-webkit-transform: scale3d(1.05, 1.05, 1.05) translateZ(0);
					transform: scale3d(1.05, 1.05, 1.05) translateZ(0);
				}
			}
		}
	}
	&.small {
		border: 0;
		text-align: center;
		.rating-result {
			justify-content: center;
		}
		.product-content-wrap {
			padding: 5px 15px 0 15px;
		}
		.product-price {
			padding-top: 0;
		}
		&:hover {
			box-shadow: none;
		}
		h2 {
			border-bottom: 0;
			padding: 0;
			margin-bottom: 0;
		}
		.product-badges span {
			font-size: 10px;
		}
	}
}

.product-list-small {
	article:not(:last-child) {
		margin-bottom: 20px;
	}
	.title-small {
		font-size: 13px;
		font-weight: 500;
		margin-bottom: 5px;
		a {
			color: $color-grey-1
		}
	}
	.product-price {
		color: $color-brand;
		font-size: 16px;
		font-weight: 500;

		span.old-price {
			font-size: 14px;
			font-weight: 400;
			color: $color-grey-4;
			margin: 0 0 0 7px;
			text-decoration: line-through;
		}
	}
}


.range {
	.list-group-item {
		position: relative;
		display: block;
		padding: 0;
		background: none;
		border: 0;
	}
	.checkbox {
		font-size: 0.8em;
	}
	.price-filter {
		display: block;
		margin-top: 20px;
	}
	#slider-range {
		box-shadow: none;
		border: none;
		height: 4px;
		border-radius: 0px;
		background: $color-brand;
		color: $color-brand;
		.ui-slider-range {
			box-shadow: none;
			background: #222;
			border-radius: 0px;
			border: none;
		}
	}
	.ui-slider-handle {
		&.ui-state-default {
			&.ui-corner-all {
				width: 14px;
				height: 14px;
				line-height: 10px;
				background: $color-brand;
				border: none;
				border-radius: 100%;
				top: -5px;
			}
		}
	}
	.label-input {
		margin-top: 15px;
		span {
			margin-right: 5px;
			color: #282828;
		}
		input {
			border: none;
			margin: 0;
			height: unset;
			font-weight: 600;
			font-size: 14px;
			background: transparent;
			padding-left: 0;
		}
	}
	.check-box-list {
		margin-top: 15px;
		li {
			margin-bottom: 5px;
			&:last-child {
				margin: 0;
			}
			label {
				margin: 0;
				font-size: 14px;
				font-weight: 400;
				color: #333;
				cursor: pointer;
				input {
					display: inline-block;
					margin-right: 6px;
					position: relative;
					top: 1px;
				}
			}
		}
		.count {
			margin-left: 5px;
			color: #666;
		}
	}
}
.btn {
	&.btn-small {
		line-height: 1;
		padding: 10px 15px;
		min-width: unset;
		display: table;
		border-radius: 3px;
	}
}
.product-sidebar {
	.single-post {
		position: relative;
		&:not(:last-child) {
			margin-bottom: 10px;
			border-bottom: 1px dotted rgba(0, 0, 0, 0.15);
			padding-bottom: 10px;
		}
		.content {
			padding-left: 95px;
		}
		i {
			font-size: 12px;
		}
	}
	.image {
		height: 80px;
		width: 80px;
		float: left;
		margin-right: 10px;
		overflow: hidden;
	}
}

.shop-product-fillter {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
			justify-content: space-between;
	-webkit-box-align: center;
	-webkit-align-items: center;
		-ms-flex-align: center;
			align-items: center;
	margin: 0 0 30px;
	&.style-2 {
		padding-bottom: 20px;
		border-bottom: 1px solid #e2e9e1;
	}
	.sort-by-product-area {
		position: relative;
		display: flex;
		.sort-by-cover {
			position: relative;
		}
		.sort-by-product-wrap {
			display: -webkit-box;
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: center;
			-webkit-align-items: center;
			-ms-flex-align: center;
			align-items: center;
			background: #f7f8f9;
			border: 1px solid #f7f8f9;
			color: #777;
			padding: 9px 16px;
			border-radius: 26px;
			-webkit-transition: all .3s ease 0s;
			-o-transition: all .3s ease 0s;
			transition: all .3s ease 0s;
			cursor: pointer;
			border: 1px solid #e2e9e1;
			.sort-by {
				margin-right: 5px;
				i {
					margin-right: 10px;
					font-size: 14px;
					color: #ababab;
					position: relative;
					top: 2px;
				}
				span {
					font-size: 13px;
					font-weight: 500;
				}
			}
			.sort-by-dropdown-wrap {
				span {
					font-size: 13px;
					font-weight: 500;
					color: $color-text;
					i {
						font-size: 15px;
						color: $color-text;
						margin-left: 10px;
						position: relative;
						top: 2px;
					}
				}
			}
		}
		
	}
}
.sort-by-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 99;
	right: 0;
	padding: 16px 0 21px;
	background: #fff;
	border: 0;
	border-radius: 5px;
	visibility: hidden;
	opacity: 0;
	min-width: 100%;
	-webkit-box-shadow: 0 -3px 23px rgba(0, 0, 0, 0.06);
	box-shadow: 0 -3px 23px rgba(0, 0, 0, 0.06);
	color: $color-text;
	font-weight: 500;
	&.show {
		opacity: 1;
		visibility: visible;
	}
	ul {
		li {
			display: block;
			a {
				font-weight: 500;
				font-size: 13px;
				padding: 5px 30px;
				display: block;
				position: relative;
				color: $color-text;
				&.active {
					&::before {
						content: "\f143";
						position: absolute;
						top: 5px;
						left: 10px;
						font-size: 12px;
						color: $color-brand;
						font-family: 'uicons-regular-straight'  !important;
						font-weight: 900;
					}
					&:hover {
						&::before {
							color: #fff;
						}
					}
				}
				&:hover {
					background-color: $color-brand;
					color: #ffffff;
				}
			}
		}
	}
}
/*Product list*/
.product-list {
	position: relative;
	.product-cart-wrap {
		border: 0;
		border-radius: 0;
		overflow: unset;
		display: flex;
		&:not(:last-child) {
			margin-bottom: 30px;
		}
		&:hover {
			box-shadow: none;
			.product-img {
				-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
				box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
			}
		}
		.product-badges.product-badges-position {
			left: 30px;
			top: 28px;
		}
		.product-img-action-wrap {
			max-width: 33%;
			position: relative;
			.product-img {
				border: 1px solid #e2e9e1;
				border-radius: 10px;
				.product-img-inner {
					overflow: hidden;
					padding: 10px;
					a img {
						height: auto;
					}
				}
			}
		}
		
		h2 {
			font-size: 22px;
		}
		.product-content-wrap {
			.product-action-1 {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: justify;
				-ms-flex-pack: justify;
				justify-content: space-between;
				position: relative;
				bottom: unset;
				padding: 0 20px;
				margin-top: 20px;
	
				a.action-btn {
					border: none;
					width: auto;
					border-radius: 50px;
					background-color: $color-brand;
					color: #fff;
					text-align: center;
					margin-right: 0;
					position: relative;
					display: inline-block;
					padding: 0px 23px;
					height: 44px;
					font-weight: 500;
					i {
						margin-right: 8px;
						color: #fff;
					}
				}
			}
		}
		
	}
}

/*PRODUCT DETAILS*/
.detail-gallery {
	position: relative;
	.zoom-icon {
		position: absolute;
		top: 15px;
		right: 15px;
		z-index: 2;
	}
}
.slider-nav-thumbnails {
	.slick-slide {
		opacity: 0.5;
		position: relative;
		&.slick-current {
			opacity: 1;
			&::before {
				border-bottom: 5px solid #333;
				border-left: 5px solid transparent;
				border-right: 5px solid transparent;
				content: "";
				height: 0;
				left: 50%;
				margin-left: -5px;
				position: absolute;
				top: -6px;
				width: 0;
			}
			img {
				border: 2px solid #a2d2c9;
			}
		}
	}
	div {
		&.slick-slide {
			margin: 0 3px;
		}
	}
	button {
		&.slick-arrow {
			margin: 0;
		}
	}
	.slick-prev {
		left: 0;
	}
	.slick-next {
		right: 0;
	}
}
.slider-nav-thumbnails .slick-prev,
.slider-nav-thumbnails .slick-next {
	font-size: 12px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}




.product-rate {
	background-image: url("../imgs/theme/rating-stars.png");
	background-position: 0 -12px;
	background-repeat: repeat-x;
	height: 12px;
	width: 60px;
	transition: all 0.5s ease-out 0s;
	-webkit-transition: all 0.5s ease-out 0s;
}
.product-rating {
	height: 12px;
	background-repeat: repeat-x;
	background-image: url("../imgs/theme/rating-stars.png");
	background-position: 0 0;
}
.detail-info {
	.product-price {
		ins {
			font-size: 30px;
			text-decoration: none;
			font-weight: 600;
			span {
				&.old-price {
					text-decoration: line-through;
					color: #888;
					margin-left: 10px;
					font-size: 16px;
					font-weight: 500;
				}
			}
		}
	}
	.product-meta {
		border-top: 1px solid #e2e9e1;
		padding-top: 15px;
	}
}
.list-filter {
	margin: 0;
	padding: 0;
	list-style: none;
	li {
		display: inline-block;
		a {
			color: #555;
			display: block;
			min-width: 30px;
			text-align: center;
			position: relative;
			transition: all 0.5s ease-out 0s;
			-webkit-transition: all 0.5s ease-out 0s;
		}
	}
}




.color-filter {
	&.list-filter {
		a {
			span {
				display: block;
				width: 26px;
				height: 26px;
				border-radius: 40px;
				&.product-color-white {
					border: 1px solid #ddd;
				}
			}
		}
		li {
			&.active {
				a {
					&::before {
						content: "";
						display: inline-block;
						font-style: normal;
						font-variant: normal;
						text-rendering: auto;
						line-height: 1;
						position: absolute;
						right: 3px;
						top: -3px;
						background: #4cd964;
						width: 10px;
						height: 10px;
						border-radius: 50%;
						border: 1px solid #fff;
					}
				}
			}
		}
	}
}
.size-filter {
	&.list-filter {
		a {
			border-radius: 4px;
			padding: 0 7px;
			background: #fff;
		}
		li {
			a {
				border: 1px solid #e5e5e5;
				color: #555;
				height: 30px;
				line-height: 30px;
				min-width: 30px;
				text-align: center;
				text-transform: uppercase;
			}
		}
	}
}
.size-filter.list-filter li a:hover,
.size-filter.list-filter li.active a {
	color: #fff;
	background-color: $color-brand;
	border-color: $color-brand;
}




.detail-qty {
	max-width: 80px;
	padding: 9px 20px;
	position: relative;
	width: 100%;
	border-radius: 4px;
	& > a {
		font-size: 16px;
		position: absolute;
		right: 8px;
		color: #707070;
		&:hover {
			color: $color-brand;
		}
		&.qty-up {
			top: 0;
		}
		&.qty-down {
			bottom: 0;
		}
	}
}
.attr-detail {
	.select-box {
		select {
			height: 40px;
			width: 100%;
		}
	}
	&.attr-brand {
		margin-top: 23px;
		.select-box {
			display: block;
			margin-bottom: 20px;
		}
	}
	&.attr-color {
		table {
			margin-bottom: 15px;
		}
	}
}
.detail-extralink {
	& > div {
		display: inline-block;
		vertical-align: top;
	}
	.detail-qty {
		margin: 0 6px 15px 0;
		background: #fff;
	}
}
.detail-info {
	.product-price-cover {
		border-top: 1px solid #e2e9e1;
		border-bottom: 1px solid #e2e9e1;
		padding: 15px 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.product-price {
			line-height: 1;
		}
	}
	
}
.button {
	&.button-add-to-cart {
		padding: 8px 40px;
	}
}
.product-extra-link2 {
	a {
		background: #fff none repeat scroll 0 0;
		border: 1px solid #e5e5e5;
		color: #333;
		border-radius: 4px;
		display: inline-block;
		height: 40px;
		line-height: 40px;
		position: relative;
		text-align: center;
		vertical-align: top;
		width: 40px;
		margin: 0 3px;
		transition: all 0.5s ease-out 0s;
		-webkit-transition: all 0.5s ease-out 0s;
		&:hover {
			background-color: $color-brand;
			color: #fff;
		}
	}
}

.tab-style3 {
	.nav-tabs {
		.nav-item {
			a {
				&.active {
					border-bottom-color: $color-brand;
					color: $color-brand;
				}
			}
		}
		li {
			&.nav-item {
				a {
					background-color: transparent;
					display: block;
					padding: .5rem 1rem;
					border-top: 0;
					border-left: 0;
					border-right: 0;
					border-bottom: 2px solid rgba(0,0,0,0);
					text-align: center;
					text-transform: uppercase;
					border-radius: 0;
				}
			}
		}
	}
}
.tab-content {
	&.shop_info_tab {
		margin-top: 40px;
	}
}
.tab-pane {
	.comments-area {
		padding-top: 0;
		border: 0;
	}
}
.product-color {
	&-red {background:#ff596d;}
	&-yellow{background:#ffdb33;}
	&-white{background:#ffffff;}
	&-orange{background:#ffbb51;}
	&-cyan{background:#80e6ff;}
	&-green{background:#38cf46;}
	&-purple{background:#ff8ff8;}
}
.detail-gallery .slick-slider {
	background-color: #000;
	margin-bottom: 30px;
	border-radius: 10px;
	img {
		opacity: 0.96;
	}
	&.slider-nav-thumbnails {
		background: none;
		border-radius: 0;
	}
	button.slick-arrow {
		background: none;
		border: 0;
		padding: 0;
		font-size: 14px;
		i {
			color: $color-grey-4;
		}
	}
}
.mail-to-friend {
	color: $color-grey-4;
	font-size: 12px;
	i {
		margin-right: 5px;
	}
}
.attr-color, .attr-size {
	display: flex;
	align-items: center;
}

.product-detail-rating {
	display: flex;	
	align-items: center;
	padding: 15px 0;
	justify-content: space-between;
}
.product-detail {
	.section-title.style-1 {
		font-size: 22px;
	}
}
.product-more-infor {
	padding: 0 0 0px 14px;
	li {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		margin: 0 0 10px;
		position: relative;
		::before {
			position: absolute;
			left: -14px;
			top: 9px;
			content: "";
			height: 6px;
			width: 6px;
			border-radius: 100%;
			background-color: #9b9b9b;
		}
		span {
			-webkit-box-flex: 0;
			-webkit-flex: 0 0 165px;
			-ms-flex: 0 0 165px;
			flex: 0 0 165px;
			display: inline-block;
		}
		&:last-child {
			margin: 0 0 0;
		}
	}
}
.progress {
	& + .progress {
		margin-top: 1rem;
	}
	span {
		line-height: 16px;
		background: #fff;
		padding-right: 10px;
		width: 45px;
	}
}
.progress-bar {
	background-color: $color-brand;
	
}
.shop-filter-toogle {
	margin-bottom: 20px;
	display: block;
	position: relative;
	i {
		margin-left: 5px;
		&.angle-down {
			opacity: 0;
			visibility: hidden;
			display: none;
		}
	}
	&.active {
		i {
			&.angle-down {
				opacity: 1;
				visibility: visible;
				display: inline-block;
				
			}
			&.angle-up {
				opacity: 0;
				visibility: hidden;
				display: none;
			}
		}
	}
}
.shop-product-fillter-header {
	border: 1px solid #e2e9e1;
	border-radius: 4px;
	margin-bottom: 50px;
	padding: 30px;
	-webkit-box-shadow: $box-shadown-3;
	box-shadow: $box-shadown-3;
	
	.categor-list {
		li {
			font-size: 12px;
			& + li {
				border-top: 1px solid #f7f8f9;
				padding-top: 5px;
				margin-top: 5px;
			}
			a {
				font-size: 14px;
				color: $color-text;
				margin-right: 10px;
				&:hover {
					color: $color-brand;
				}
			}
		}
	}
	.color-filter {
		border-bottom: 1px solid #e2e9e1;
		padding-bottom: 20px;
		margin-bottom: 20px;
	}
	.product-rate-cover {
		& + .product-rate-cover {
			margin-top: 15px;
		}
	}
}
.shopping-summery tbody tr img {
	border-radius: 0;
	max-width: 80px;
}

.order_review {
	border: 1px solid #e2e9e1;
	padding: 30px;
	border-radius: 10px;
}
.toggle_info {
	padding: 20px;
	background-color: #f7f8f9;
	border-radius: 10px;
	border: 1px solid #e2e9e1;
}
.login_form .panel-body, .coupon_form .panel-body {
	border: 1px solid #e2e9e1;
	padding: 30px;
	margin-top: 30px;
	border-radius: 10px;
}
.payment_option .custome-radio{margin-bottom:10px;}
.payment_option .custome-radio .form-check-label{color:#292b2c;font-weight:600;}
.custome-radio .form-check-label::before{content:"";border:1px solid #908f8f;height:16px;width:16px;display:inline-block;border-radius:100%;vertical-align:middle;margin-right:8px;}
.custome-radio input[type="radio"] + .form-check-label::after{content:"";height:10px;width:10px;border-radius:100%;position:absolute;top:8px;left:3px;opacity:0;}
.custome-radio input[type="radio"]:checked + .form-check-label::after{opacity:1;background-color: $color-brand;}

.related-products .product-img-action-wrap {padding: 0;margin-bottom: 15px;}