/* -------------------------------------------
	Products
		1. Default And Base Style
		2. Product Media
		3. Product Label
		4. Wishlist
		5. Product Icon Button
		6. Product Button
		7. Product Action
			- Vertical
			- Horizontal
		8. Product Category
		9. Product Name
		10. Product Price
		11. Product Rating
		12. Product Variables
		13. Product Details
		14. Product Type
			- Product Default
			- Product Classic
			- Product Slideup
			- Product Card
			- Product Boxed
			- Product List & List-Small
		15. Content Align
		16. Grid Item
		17. Sidebar
		18. Ajax Loading
		19. Products Count
		20. Product deal countdown
		21. Responsive
		22. Other
---------------------------------------------- */

@import '../../../assets/sass/config';
@import '../../../assets/sass/direction';
@import '../../../assets/sass/mixins';

// 1. Default And Base Style
.product-label-round {
	.product-label {
		padding: .5rem 1.1rem;
		border-radius: $corner-lg;
	}
}
.text-center {
	.product-details {
		padding-left: .5rem;
		padding-right: .5rem;
	}
}
.product-wrap {
	font-size: 1rem;
}
.product-wrap .product {
	position: relative;
	transition: .3s;

	&:hover {
		.product-action,
		.product-action-vertical {
			visibility: visible;
			opacity: 1;
		}
	}
}
.product-media:hover {
	img:last-of-type {
		opacity: 1;
	}
}
.product {
	.products & {
		text-align: if-ltr(left, right);
	}

	&.content-center {
		text-align: center;
	}

	&.content-right {
		text-align: if-ltr(right, left);
	}
}

// 2. Product Media
.product-media {
	position: relative;
	margin-bottom: 0;
	transition: box-shadow .3s;

	img {
		display: block;
		width: 100%;
		height: auto;
		transition: opacity .5s;
	}

	img:last-of-type {
		position: absolute;
		opacity: 0;
		left: 0;
		right: 0;
		top: 0;
		object-fit: cover;
	}

	img:first-child {
		position: relative;
		opacity: 1;
	}
}

// 3. Product Label
.product-label-group {
	position: absolute;
	#{$left}: 2rem;
	top: 2rem;
	max-width: 11rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.product-label {
	display: inline-block;
	margin-bottom: .5rem;
	padding: .6rem 1rem;
	font-size: 1.2rem;
	line-height: 1;
	color: var(--alpha-white-color);
	text-transform: uppercase;
	text-align: center;
	border-radius: $corner-sm;

	&.label-featured {
		background: $success-color;
	}
	&.label-new {
		background: var(--alpha-primary-color);
	}
	&.label-sale {
		background: var(--alpha-secondary-color);
	}
	&.label-stock {
		background: var(--alpha-light-color);
	}
	&.label-img {
		padding: 0;
	}
}

// 4. Wishlist
.yith-wcwl-add-to-wishlist {
	position: relative;
	display: inline-block;
	letter-spacing: -.025em;
	margin-#{$right}: 3rem;
	margin-#{$left}: 1px;
	
	a {
		display: inline-block;
		color: var(--alpha-body-color);
		&:before {
			content: '\e98d';
			font-family: $framework-font;
			margin-#{$right}: .3rem;
			font-size: 1.8rem;
			vertical-align: -.2rem;
			color: inherit;
		}
		&:hover {
			color: var(--alpha-primary-color);
		}

		i {
			display: none;
		}
	}
}

.yith-wcwl-wishlistaddedbrowse,
.yith-wcwl-wishlistexistsbrowse {
	a {
		&::before {
			content: '\e902';
			float: none;
			width: auto;
		}
	}
}

.products .yith-wcwl-add-to-wishlist a span,
.products .yith-wcwl-icon {
	display: none;
}

.product-action-vertical .yith-wcwl-add-to-wishlist {
	margin: 0;
	a:after {
		content: '';
		clear: both;
		display: block;
	}
}
.product-details {
	.yith-wcwl-wishlistaddedbrowse a,
	.yith-wcwl-wishlistexistsbrowse a {
		&:hover::before {
			transform: rotateY(180deg);
		}
	}
}
.product-links-wrapper .yith-wcwl-add-to-wishlist a:before {
	font-size: 1.29em;
}

// 5. Product Icon Button
.product-action-vertical .btn-product-icon {
	background-color: var(--alpha-white-color);
}
.product-loop {
	.btn-product-icon {
		position: relative;
		display: block;
		width: 4rem;
		height: 4rem;
		line-height: 4rem;
		margin-bottom: 1rem;
		color: var(--alpha-grey-color);
		font-size: 1.8em;
		transition: border-color .3s, color .3s, background-color .3s;
		overflow: hidden;

		&.compare {
			font-size: 1.25em;
			color: inherit;
		}

		&::before,
		&.yith-wcwl-add-to-wishlist a::before {
			float: left;
			width: 100%;
			text-indent: 0;
			text-align: center;
		}

		&.yith-wcwl-add-to-wishlist a {
			display: block;
			font-size: 0;
			color: inherit;
			transition: none;
		}

		&:hover {
			border-color: var(--alpha-primary-color);
			color: var(--alpha-white-color);
			background-color: var(--alpha-primary-color);
		}

		@include mq(xs, max) {
			& {
				width: 3.8rem;
				height: 3.8rem;
				line-height: 3.8rem;
			}
		}
	}
	.yith-wcwl-add-to-wishlist a:before,
	.compare:before {
		color: inherit;
		transition: none;
	}

	.star-rating {
		font-size: .86em;
		letter-spacing: .2em;

		span:after {
			--alpha-secondary-color: inherit;
			color: var(--alpha-secondary-color);
		}
	}

	.product-cat + .btn-product-icon.yith-wcwl-add-to-wishlist a {
		font-size: 1em;
	}
}
.product-media .btn-product-icon {
	border: 0;
	border-radius: 50%;
	box-shadow: 0 2px 1rem rgba(0,0,0,.07);
}
.btn-product-icon {
	&.btn-quickview::before {
		content: '\e97e';
		font-family: $framework-font;
		font-weight: 400;
		position: relative;
		top: -1px;
	}
	&.add_to_cart_button::before {
		content: '\e93a';
		font-family: $framework-font;
		font-weight: 400;
		position: relative;
		top: -1px;
	}
	&.product_read_more::before,
	&.product_type_variable::before {
		content: if-ltr('\e92c', '\e92b');
		font-family: $framework-font;
		font-weight: 400;
		position: relative;
		top: -1px;
	}
}
.outofstock a.btn-product-icon {
	text-indent: if-ltr( -9999px, 9999px );
	&::before {
		content: if-ltr('\e92c', '\e92b');
		font-family: $framework-font;
		font-weight: 400;
		position: relative;
		top: -1px;
	}
}

@include mq(xs, max) {
	.product-action-vertical .btn-quickview {
		display: none;
	}
}

// 6. Product Button
.btn-quickview {
	cursor: pointer;
	background: none;
	border: 0;
}
.btn-product {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	padding: 1.11em 0;
	background-color: var(--alpha-dark-color);
	color: var(--alpha-white-color);
	font-family: inherit;
	font-size: 1.4em;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	transition: opacity .3s;
}
.product-media .btn-product {
	opacity: .8;
	transition: opacity .3s;

	&:hover {
		opacity: 1;
	}
}

// 7. Product Action 

// Vertical
.product-action-vertical {
	position: absolute;
	top: 1.5rem;
	#{$right}: 1.5rem;
	transition: opacity .3s, visibility .3s;
	opacity: 0;
	visibility: hidden;
	z-index: 1;
}

// Horizontal
.product-action {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	background-color: transparent;
	z-index: 1;
	transition: opacity .3s, visibility .3s;
	opacity: 0;
	visibility: hidden;
	@include if-rtl() {
		flex-direction: row-reverse;
	}
}

// 8. Product Category
.product-cat {
	overflow: hidden;
	padding-#{$right}: 4rem;
	margin-bottom: 5px;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 1.1em;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	color: var(--alpha-light-color);

	a {
	   &:hover {
		   color: var(--alpha-primary-color);
	   }
	}
}

// 9. Product Name
.products {
	.woocommerce-loop-product__title {
		padding-#{$right}: 4rem;
	}
	.content-center .woocommerce-loop-product__title {
		padding-left: 2rem;
		padding-right: 2rem;
	}
	.content-right .woocommerce-loop-product__title {
		padding-#{$left}: 4rem;
		padding-#{$right}: 0;
	}
}
.woocommerce-loop-product__title {
	overflow: hidden;
	margin-bottom: .5rem;
	color: var(--alpha-dark-color);
	font-size: 1.4em;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	text-overflow: ellipsis;
	white-space: nowrap;

	a:hover {
		color: var(--alpha-primary-color);
	}
}

// 10. Product Price
.price {
	display: inline-block;
	margin-bottom: .6rem;
	font-size: 1.4em;
	font-weight: 600;
	color: var(--alpha-dark-color);

	del {
		color: var(--alpha-light-color);
		margin-#{$left}: 1rem;
	}
	ins {
		text-decoration: none;
		vertical-align: middle;
	}

	.products & {
		display: inline-flex;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}

.product-attr {
	display: inline-block;
	vertical-align: 1px;
}

span.price del {
	font-weight: 400;
}

// 11. Product Rating
.woocommerce-product-rating {
	display: flex;
	align-items: center;
	margin-#{$left}: 1px; // issue : need?
	line-height: 1.1;
	margin-bottom: .3rem;
	font-size: 1.2rem;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.products .woocommerce-product-rating {
	justify-content: flex-start;
}
.content-center .woocommerce-product-rating {
	justify-content: center;
}
.content-right .woocommerce-product-rating {
	justify-content: flex-end;
}

.star-rating {
	display: inline-block;
	position: relative;
	font-family: $framework-font;
	margin-#{$right}: .5rem;
	letter-spacing: 0;
	cursor: pointer;

	&::before {
		content: "\e986" "\e986" "\e986" "\e986" "\e986";
		// color: rgba(0, 0, 0, 0.2);
		color: var(--alpha-light-color);
	}

	&.rating-loaded:hover {
		.tooltiptext {
			visibility: visible;
			opacity: 1;
		}
	}

	span {
		position: absolute;
		top: 0;
		#{$left}: 0;
		white-space: nowrap;
		overflow: hidden;
		text-align: $left;
		text-indent: -9999rem;

		&::after {
			content: "\e986" "\e986" "\e986" "\e986" "\e986";
			text-indent: 0;
			position: absolute;
			#{$left}: 0;
		}
	}

	.tooltiptext {
		#{$left}: 50%;
		top: auto;
		bottom: 150%;
		text-indent: 0;
		overflow: initial;
		letter-spacing: 0;

		&::after {
			float: none;
			content: '';
			#{$left}: inherit;
		}
	}

	+ a {
		margin: 2px 0;
		line-height: 1.1;
		color: $body-color;
		text-transform: capitalize;
		overflow: hidden;
		text-overflow: ellipsis;
		&:hover {
			color: var(--alpha-primary-color);
		}
	}

	.product-loop & {
		margin-#{$right}: .8rem;
	}
}

.product .short-desc {
	font-size: 1.4em;
}

// 12. Product Variables
.product-variations {
	display: inline;

	// issue element-products
	.ratings-container + &{ 
		margin-top: -5px;
	}

	> * {
		// display: inline-block;
		margin: side-values(3px 8px 3px 0);
		padding: 0 .8rem;
		background-color: transparent;
		background-size: cover;
		font-size: 1.2rem;
		font-family: inherit;
		text-align: center; // issue: if use only button, no need
		vertical-align: middle;
		cursor: pointer;
		min-width: 26px;
		height: 26px;
		color: var(--alpha-body-color);
		border: 1px solid var(--alpha-light-color);
		border-radius: $corner-sm;
		transition: .3s;

		&:last-child {
			margin-#{$right}: 0;
		}
	}

	.color {
		border: 0;
	}

	> .active,
	> *:hover {
		color: var(--alpha-primary-color);
		border: 1px solid;
		// box-shadow: inset 0 0 0 2px var(--alpha-change-border-color);
	}

	.image,
	.color {
		position: relative;
		font-size: 0;
		&::before {
			content: '';
			position: absolute;
			display: block;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
		}
	}
}
.product-loop .product-variations {
	display: block;

	+ .short-desc {
		margin-top: 1rem;
	}
}

// 13. Product Details
.product-details,
.product-hide-details {
	.product-action {
		position: relative;
		visibility: visible;
		opacity: 1;
	}

	.btn-product-icon {
		width: 3rem;
		height: 3.5rem;
		line-height: 3.5rem;
		margin: side-values(0 0 0 2.5rem);
		color: var(--alpha-body-color);
		transition: color .3s, background-color .3s, visibility .3s;

		& + .btn-product-icon {
			margin-#{$left}: .9rem;
		}

		i {
			font-size: 1.2em;
		}

		&:hover {
			color: var(--alpha-primary-color);
			background-color: transparent;
		}
	}

	.btn-product {
		flex: 1;
		min-width: 9.5rem;
		max-width: 13.5rem;
		height: 4rem;
		line-height: 4rem;
		// padding: .97em 0;
		font-size: 1.3em ;
		transition: color .3s, background-color .3s, border-color .3s;
		z-index: 1;
		color: var(--alpha-white-color);
	}
}
.product-details {
	position: relative;
	padding-top: 1.7rem;

	> .yith-wcwl-add-to-wishlist {
		&.btn-product-icon {
			overflow: visible;
			position: absolute;
			top: 1.5rem;
			right: 0;
			z-index: 1;
			width: auto;
			height: auto;
			color: var(--alpha-grey-color);
			background: none;
			font-size: 1.6em ;
			line-height: 1;

			.content-right & {
				right: auto;
				left: 0;
				margin: 0 .8rem 0 0;
			}
		}
	
		a::before {
			display: block;
			transition: transform .3s;
		}
		a:hover {
			&::before {
				transform: rotateY(180deg);
			}
			color: var(--alpha-primary-color);
			background: none;
		}
	}

	.product-shadow & > .yith-wcwl-add-to-wishlist.btn-product-icon {
		#{$right}: 1.8rem;
	}

	>:last-child {
		margin-bottom: 0;
	}
}

@include only-for-ie() {
	.product-hide-details,
	.product-details {
		.add_to_cart_button {
			flex: 0 0 12.3rem;
		}
	}

	@include mq( sm,  max ) {
		.product-hide-details,
		.product-details {
			.add_to_cart_button {
				flex: 0 0 9.5rem;
			}
		}
	} 
}

// 14. Product Type

// Product Default
.product-default:not(.product-with-qty) .product-details {
	.btn-product {
		max-width: 100%;
	}
}
.product-with-qty {
	.quantity {
		height: 3.5rem;
		line-height: 3.5rem;
		margin-#{$right}: 1rem;
	}
}
.product-cart-popup {
	.price {
		margin-bottom: 0;
		opacity: 1;
		transition: opacity .3s;
	}
	
	.product-details .product-action .btn-product {
		display: block;
		flex: none;
		min-width: 0;
		height: auto;
		padding: 0;
		color: var(--alpha-primary-color);
		line-height: 1.6;
		background: transparent;

		&:after {
			content: "";
			display: block;
			margin-left: auto;
			margin-right: auto;
			width: 100%;
			height: 3px;
			border-top: 1px solid;
			border-bottom: 2px solid;
			transform: scaleX(0);
			transition: transform 0.3s;
		}

		&:hover:after {
			transform: scaleX(1);
		}
	}

	.product-hide-details {
		position: absolute;
		opacity: 0;
		bottom: -1rem;
		padding: 0;
		transition: opacity .3s, bottom .3s;
	}

	&.product-boxed {
		.price + .product-hide-details {
			bottom: 0;
		}
	}

	&.content-center .product-hide-details {
		left: 0;
		right: 0;
	}

	&:hover {
		.product-details .price + .product-hide-details {
			bottom: 0;
			opacity: 1;
		}
		&.product-boxed .price + .product-hide-details {
			bottom: 1rem;
		}
		.price {
			opacity: 0;
		}
		.product-details .alpha-sold-by-container + .product-hide-details {
			bottom: 1.8rem;
			opacity: 1;
		}
	}
}
@include mq(xs, max) {
	.product-with-qty {
		.quantity {
			margin-#{$right}: .5rem;
			button {
				padding: 8px 6px;
			}
			input {
				width: 36px;
			}
		}
	}
}

// Product Classic
.product-classic {
	.btn-product {
		display: block;
		padding: 0 0.3em;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		letter-spacing: -.025em;
		color: var(--alpha-white-color);
		background: var(--alpha-primary-color);
	}

	// Content Align Left
	.btn-product-icon {
		transform: translateX(-200%);
		opacity: 0;
		visibility: hidden;
		transition: transform .3s, opacity .3s, visibility .3s, color .3s, background-color .3s, border-color .3s;
	}

	.btn-quickview {
		transition: transform .5s, opacity .5s, visibility .5s, color .3s, background-color .3s, border-color .3s;
	}

	// Content Align Center
	&.content-center {
		.btn-product-icon {
			transform: translateX(if-ltr(200%, -200%));
			transition: transform .4s, opacity .3s, visibility .3s, color .3s, background-color .3s, border-color .3s;
		}
		.btn-quickview {
			transform: translateX(if-ltr(-200%, 200%));
		}
		.yith-wcwl-add-to-wishlist {
			margin: side-values(0 2.2rem 0 0);
		}
	}

	// Content Align Right
	&.content-right {
		.btn-product-icon {
			transform: translateX(200%);
			transition: transform .5s, opacity .5s, visibility .5s, color .3s, background-color .3s, border-color .3s;
		}
		.btn-quickview {
			transition: transform .3s, opacity .3s, visibility .3s, color .3s, background-color .3s, border-color .3s;
		}
		.btn-product-icon, .add_to_cart_button {
			margin: side-values(0 0 0 2rem);
		}
	}

	@include if-rtl {
		&.content-center .btn-product-icon {
			margin: 0 .8rem 0 0;
		}
		&.content-center .yith-wcwl-add-to-wishlist {
			margin: 0 0 0 .8rem;
		}
	}

	.product-action-vertical .btn-product-icon {
		transform: none;
	}

	// Hover
	&:hover {
		.btn-product-icon {
			transform: none;
			opacity: 1;
			visibility: visible;
		}
	}
}

// Product Slideup
.product-slideup {
	z-index: 1;

	.product-details {
		background-color: var(--alpha-white-color);
		transition: transform .3s;
	}
	.product-action {
		position: absolute;
		padding-top: .9rem;
		top: 100%;
		bottom: auto;
		visibility: hidden;
		opacity: 0;
		transition: transform .3s, visibility .3s, opacity .3s;
	}
	&:hover {
		.product-details {
			transform: translateY(-5.5rem);
		}
	}
}

// Product Card
.product-card {
	text-align: center;
	.product-details {
		padding: 1.8rem 2rem .7rem;
		margin: -2.4rem 2rem 0;
		box-shadow: 0 5px 20px rgb(0 0 0 / 7%);
		background: var(--alpha-white-color);
		border-radius: $corner-md;
		z-index: 1;
	}
	
	.woocommerce-loop-product__title {
		padding-right: 0;
		margin-bottom: .4rem;
	}

	&.product .countdown-container {
		bottom: 3.4rem;
	}

	@include mq(sm, max) {
		.product-details {
			padding:  1.8rem .5rem .7rem;
			margin: -2.4rem 1rem 0;
		}
	}
}
.product-slidedown {
	.product-details {
		padding-bottom: .8rem;
	}
	.product-action {
		visibility: hidden;
		opacity: 0;
	}
}

// Product Boxed
.product-boxed {
	padding: 1.7rem 1.5rem .9rem;
	background: var(--alpha-white-color);
	box-shadow: 0 5px 1.8rem rgba(0,0,0,.07);
	.product-details {
		padding-bottom: 1rem;
	}
	&.product-slideup {
		.product-hide-details .product-action {
			padding: 0 2rem 2rem;
		}
	}
	&:hover {
		box-shadow: 0 5px 20px rgba(0,0,0,0.05);
	}
}

// Sold by label
.alpha-sold-by-container {
	font-size: 1.2rem;
	> * :not(a) {
		color: var(--alpha-body-color);
	}
}

// Product List & List-Small
.product-list {
	.btn-product {
		max-width: 20.7rem;
		height: 4.5rem;
		color: var(--alpha-dark-color);
		background-color: transparent;
		border: 2px solid $light-color;
		// border: 2px solid var(--alpha-light-color);
		font-size: 1.3em;

		&:hover {
			color: var(--alpha-white-color);
			background-color: var(--alpha-primary-color);
			border-color: var(--alpha-primary-color);
		}
	}
	.add_to_cart_button:before {
		content: '\e93a';
		font-family: $framework-font;
		font-weight: 400;
		font-size: 1.4em;
		margin-#{$right}: .8rem;
	}
	&:not(.content-left) .add_to_cart_button {
		margin-#{$left}: 1rem;
	}
	.price {
		margin-bottom: 1.2rem;
	}
	.short-desc p {
		margin-bottom: 2.2rem;
	}
	.btn-product-icon {
		margin-#{$left}: 1.5rem;
	}
}

@include mq(xs, max) {
	.product-list .btn-product {
		height: 3.5rem;
		line-height: 3.1rem;
	}
}

.product-list,
.product-list-sm {
	display: flex;
	align-items: center;

	.woocommerce-loop-product__title {
		padding-#{$right}: 0;
	}
}

// List
@include mq(sm) {
	.product-list {
		.product-media {
			flex: 0 0 26rem;
			max-width: 26rem;
			margin: side-values(0 2rem 0 0);
		}
		.woocommerce-loop-product__title {
			font-size: 1.8em ;
			font-weight: 600;
		}
		.price {
			font-size: 1.8em ;
			// font-weight: 600;
		}
		.woocommerce-product-rating {
			margin-bottom: .8rem; 
		}
		.product-details {
			padding: 0;
			flex: 1;
			max-width: calc(100% - 28rem);
		}
	}
}
// List - Small
.product-list-sm {
	.product-media {
		line-height: 1.6;
		flex: 0 0 10rem;
		max-width: 10rem;
		margin-#{$right}: 1rem;
	}
	.woocommerce-loop-product__title {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-bottom: .4rem;
		color: var(--alpha-body-color);
		font-size: 1.4rem;
		font-weight: 400;
		line-height: 1.22;
		white-space: normal;
	}
	.woocommerce-product-rating {
		margin-bottom: .6rem;
	}
	.price {
		margin-bottom: .3rem;
		font-size: 1.6em;
	}
	.btn-product {
		display: inline-flex;
		margin-top: 1rem;
		height: 3.3rem;
		font-size: 1.2em ;
		min-width: 11rem;
	}
	&.content-right {
		justify-content: if-ltr(flex-end, flex-start);

		figure {
			order: 1;
			margin: 0 0 0 1rem;
		}
	}
	.product-details {
		padding: 0;
		flex: 1;
		max-width: calc(100% - 11rem);
		@include if-rtl {
			text-align: right;
		}
	}
}

// 15. Content Align
.content-left {
	.product-action {
		justify-content: if-ltr(flex-start, flex-end);
	}
}
.content-center {
	.product-cat {
		padding: 0;
	}
	.product-action {
		justify-content: center;
	}
	
	.product-variations {
		justify-content: center;
	}
}
.content-right {
	.product-cat {
		padding: 0;
		padding-#{$left}: 4rem;
	}
	.product-action {
		justify-content: if-ltr(flex-end, flex-start);
	}
	.product-variations {
		justify-content: if-ltr(flex-end, flex-start);
	}
}

// 16. Grid Item
.products.grid:not(.masonry) {
	.product-wrap {
		margin-bottom: 0;
	}

	.product {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.product-media {
		flex: 1;
		height: 0;

		> a {
			display: block;
			height: 100%;
		}

		img {
			height: 100%;
		}
	}
}

// 17. Sidebar
.products-col .product-list-sm {
	flex-flow: row;

	.product-media {
		margin: side-values(0 1rem 0 0);
	}
}

// 18. Ajax Loading
.add_to_cart_button.loading {
	opacity: 0.6;
}
.product-filtering + .d-loading {
	position: relative;
	min-height: 100px;
	margin-bottom: 2rem;
}

// 19. Products Count
.count-progress {
	height: 1rem;
	margin: 1rem 0;
	border-radius: $corner-lg;
	background: var(--alpha-change-border-color);
	overflow: hidden;
}

.count-now {
	background: var(--alpha-grey-color);
	border-radius: inherit;
	height: 100%;
}

.count-text {
	font-size: 1.3em;
	line-height: 1;
}

// 20. Product deal countdown
.product .countdown-container {
	position: absolute;
	left: 1.5rem;
	right: 1.5rem;
	bottom: 1.5rem;
	white-space: nowrap;
	overflow-x: auto;
	background-color: rgba(34, 34, 34, .8);
	color: var(--alpha-white-color);
	letter-spacing: -.025em;
	text-align: center;
	padding-left: 0;
	padding-right: 0;
	transition: opacity .3s, visibility .3s;
	
	&::-webkit-scrollbar {
		height: 5px;
	}
	&::-webkit-scrollbar-thumb {
		background: rgba(191,191,191,0.2);
	}
	&::-webkit-scrollbar-track {
		background: transparent;
	}

	.countdown {
		width: 100%;
	}

	.countdown-amount {
		font-size: 1.6rem;
		font-weight: 600;
		color: inherit;
	}

	.countdown-period {
		font-size: 1rem;
		color: inherit;
		text-transform: uppercase;
		bottom: .8rem;
		opacity: .6;
	}

	.countdown-section {
		padding: .7rem 1rem 2.2rem;

		&:not(:#{if-ltr(last, first)}-child) {
			margin-right: 1rem;

			&:after {
				content: none;
			}
		}
	}
}
.products .product:hover .countdown-container {
	opacity: 0;
	visibility: hidden;
}

// 21. Responsive
@include mq(sm, max) {
	.product-list {
		display: block;
		.product-media,
		.product-details {
			margin: 0;
			max-width: 100%;
		}
		.product-media { width: 100%; }
		.product-details {
			padding: 1.8rem 0 2rem;
		}
	}
	.product-action-vertical {
		top: 10px;
		#{$right}: 10px;
	}
	.product-label-group {
		top: 15px;
		#{$left}: 15px;
	}
	.product-details .btn-product-icon,
	.product-hide-details .btn-product-icon {
		margin: side-values(0 0 0 .8rem);
	}
	.product-classic {
		&.content-center .yith-wcwl-add-to-wishlist,
		&.content-right .btn-product-icon {
			margin: side-values(0 1rem 0 0);
		}
	}
}

@include mq(xs, max) {

	//Product-default
	.product-default:not(.product-with-qty) .product-details {
		.btn-product {
			height: auto;
			padding: .8em 0;
			text-indent: 0;
		}

		.btn-product::before {
			display: none;
		}
	}
	.product-default .product-hide-details .product-action .btn-product {
		padding: 0;
	}
	.product-details,
	.product-hide-details {
		.add_to_cart_button,
		.btn-product {
			min-width: 3.5rem;
			max-width: 3.5rem;
			padding: 0;
		}
		.add_to_cart_button {
			display: block;
			overflow: hidden;
			text-indent: -9999rem;
		}
		.add_to_cart_button::before {
			content: '\e93a';
			width: 100%;
			float: left;
			text-indent: 0;
			text-align: center;
			font-family: $framework-font;
			font-size: 18px;
			font-weight: 400;
			margin: 0;
		}
		.product_type_variable::before {
			content: if-ltr('\e92c', '\e92b');
		}
	}
	.outofstock a.btn-product {
		text-indent: if-ltr( -9999px, 9999px );
		&::before {
			content: if-ltr('\e92c', '\e92b');
			width: 100%;
			float: left;
			line-height: 4rem;
			text-indent: 0;
			text-align: center;
			font-family: $framework-font;
			font-size: 18px;
			font-weight: 400;
		}
	}
}

@include mq(xs, max) {
	.product-wrap .product-default .product-action .btn-quickview:first-child {
		padding: .8em 0;
	}
	.products .product {
		font-size: .9rem;
	}
	.products .btn-product-icon {
		margin-bottom: .5rem;
	}
}

@include mq(359px, max) {
	.product-loop .btn-product-icon {
		width: 3rem;
		height: 3rem;
		line-height: 3rem;

		a:before {
			font-size: 1.6rem;
		}
	}
}

// 22. Other

// Products Banner
.products-banner {
	display: flex;
	> .products-banner-inner,
	> .woocommerce {
		flex: 1;
		padding: 0 10px;
	}
	> .nav-filters {
		display: block;
	}
}

// Product Grid
.creative-grid {
	> .product-wrap {
		margin-bottom: 0;
	}

	.product {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.product-media {
		flex: 1;
	}

	.product-list,
	.product-list-sm,
	.product-single {
		flex-direction: row;
	}

	.product-list {
		.product-media {
			flex: 0 0 26rem;
			max-width: 26rem;
		}
	}
}
.product-single.product-widget .woocommerce-product-gallery__image {
	width: 100%;
}

// Nav Full Type
.owl-nav-full {
	.product-wrap {
		margin-bottom: 0;
	}
}

.woocommerce .products .product-list figure.product-media {
	margin-#{$right}: 3rem;
}
.woocommerce .products .product-list-sm figure.product-media {
	margin-#{$right}: 2rem;
}
.woocommerce .products .product-list-sm.content-right figure,
.woocommerce .products .product-list-sm.content-center figure {
	margin: side-values(0 0 0 2rem);
}