/* -------------------------------------------
	Products 
		1. Default And Base Style
		2. Product Media
		3. Product Label
		4. Product Icon
		5. Product Button: quickview
		6. Product Action
			1. Vertical
			2. Horizontal
			3. Rating + Action
		7. Product Category
		8. Product Name
		9. Product Price
		10. Product Rating
		11. Product Variables
		12. Product Details
		13. Product Grid
		14. Ajax Loading
		15. Products Count
		16. Product deal countdown
		17. Responsive
		18. Wishlist & Compare
			18-1. Common
			18-2. Wishlist
			18-3. Compare

---------------------------------------------- */

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


// 1. Default And Base Style
.product-wrap {
	font-size: 1rem;
	.products > & {
		margin-bottom: 2rem;	
	}
}
.product-loop {
	position: relative;
	transition: .3s;

	&:hover {
		.product-action,
		.product-action-vertical {
			visibility: visible;
			opacity: 1;
		}
	}
	.action-panel {
		background-color: var(--alpha-white-color);
		box-shadow: 5px 5px 8px rgba(0, 0, 0, .08);
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
		width: 166px;
		max-width: 80%;
		border-radius: 3px;
		padding: 5px;
		transition: opacity .3s, visibility .3s, bottom .3s;

		.btn-product-icon {
			border: none;
			color: var(--alpha-change-color-dark-1);
			background-color: transparent;
			margin: 0;

			&:before,
			&.yith-wcwl-add-to-wishlist a:before {
				top: 0;
				line-height: 2.25em;
			}

			&.add_to_cart_button:not(.product_type_variable):before {
				top: 1px;
			}
					
			&.product_read_more::before,
			&.product_type_variable::before {
				font-size: 1.1em;
			}
		}
		.btn-product-icon:hover {
			color: var(--alpha-primary-color);
		}
	}
	.products &:hover .action-panel {
		bottom: 15px;
	}
	.products & {
		text-align: if-ltr(left, right);
	}
}

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

	&:hover {
		img:last-of-type {
			opacity: 1;
		}
	}
	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: 3px;

	&.label-featured {
		background: var(--alpha-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. Product Icon
.product-loop {
	.product-cat + .btn-product-icon.yith-wcwl-add-to-wishlist a {
		font-size: 1em;
	}
}

.btn-product-icon {

	.product-loop & {
		position: relative;
		display: block;
		width: 2.25em;
		height: 2.25em;
		line-height: 2.125em;
		margin-bottom: .5rem;
		color: var(--alpha-grey-color);
		font-size: 1.6em;
		transition: border-color .3s, color .3s, background-color .3s;
		overflow: hidden;

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

		&.yith-wcwl-add-to-wishlist a {
			font-size: 1.13em;
			color: inherit;
			transition: none;
		}

		&:hover {
			border-color: var(--alpha-primary-color);
			color: var(--alpha-white-color);
			background-color: var(--alpha-primary-color);
		}
	}
	.product-action-vertical & {
		background-color: var(--alpha-change-color-light-1);
	}
	.product-media & {
		border: 1px solid var(--alpha-change-border-color);
		border-radius: 50%;
	}
	.product-details & {
		width: 3rem;
		height: 3.5rem;
		line-height: 3.5rem;
		margin: side-values(0 0 0 1rem);
		color: var(--alpha-change-color-dark-1);
		transition: color .3s, background-color .3s, visibility .3s;
	
		& + .btn-product-icon {
			margin-#{$left}: .8rem;
		}
	
		i {
			font-size: 1.2em;
		}
	
		&:hover {
			color: var(--alpha-primary-color);
			background-color: transparent;
		}
	}
	&.btn-quickview::before {
		content: '\e97e';
		font-family: $theme-font;
		font-weight: 400;
		position: relative;
		top: -1px;
	}
	&.add_to_cart_button::before {
		content: '\e93a';
		font-family: $theme-font;
		font-weight: 400;
		position: relative;
		top: -1px;
	}
	&.product_read_more::before,
	&.product_type_variable::before {
		content: if-ltr('\e92c', '\e92b');
		font-family: $theme-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: $theme-font;
		font-weight: 400;
		position: relative;
		top: -1px;
	}
}

// 5. Product Button: quickview
.btn-quickview:not(.btn-outline) {
	border: 0;
	cursor: pointer;
}
.btn-product {
	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
	flex: 1;
	max-width: 100%;
	padding: 1.14em 0;
	background-color: var(--alpha-primary-color);
	color: var(--alpha-white-color);
	font-size: 1.4em;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	text-align: center;
	transition: opacity .3s;
	
	.product-media & {
		opacity: .8;
		transition: opacity .3s;
	
		&:hover {
			opacity: 1;
		}
	}
	.product-details & {
		flex: 1;
		min-width: 9.5rem;
		max-width: 12.3rem;
		height: 3.5rem;
		line-height: 3.5rem;
		// padding: .97em 0;
		font-size: 1.3em ;
		transition: color .3s, background-color .3s, border-color .3s;
		z-index: 1;
		color: var(--alpha-change-color-light-1);
		background-color: var(--alpha-change-color-dark-2);
	}
}

// 6. Product Action 
// 6-1. Vertical
.product-action-vertical {
	position: absolute;
	top: 15px;
	#{$right}: 15px;
	transition: opacity .3s, visibility .3s;
	opacity: 0;
	visibility: hidden;
}
// 6-2. 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;
	.product-details & {
		position: relative;
		visibility: visible;
		opacity: 1;
	}
	@include if-rtl() {
		flex-direction: row-reverse;
	}
}
// 6-3. Rating + Action
.woocommerce-product-rating + .product-action {
	margin-top: 10px;
}

// 7. 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-grey-color);

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

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

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

// 9. Product Price
.price {
	display: inline-block;
	vertical-align: middle;
	margin-bottom: .6rem;
	font-size: 1.6em ;
	font-weight: 600;
	letter-spacing: -.05em;
	color: var(--alpha-change-color-dark-1);

	del {
		color: #aaa;
		font-weight: 400;
	}
	ins {
		margin-#{$right}: 6px;
		text-decoration: none;
	}
}

// 10. Product Rating
.woocommerce-product-rating {
	display: flex;
	align-items: center;
	margin-#{$left}: 1px; // issue : need?
	line-height: 1.1;
	margin-bottom: .2rem;
	font-size: 1.2rem;
	white-space: nowrap;
	text-overflow: ellipsis;
	.products & {
		justify-content: flex-start;
	}
}
.star-rating {
	display: inline-block;
	position: relative;
	font-family: $theme-font;
	margin-#{$right}: .5rem;
	letter-spacing: .2em;
	cursor: pointer;

	&::before {
		content: "\e986" "\e986" "\e986" "\e986" "\e986";
		color: rgba(0, 0, 0, 0.2);
	}

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

	span {
		position: absolute;
		top: 0;
		#{$left}: 0;
		white-space: nowrap;
		overflow: hidden;
		text-align: $left;
		text-indent: -9999rem;
		.seller-rating &:first-child {
			height: 100%;
		}
		&::after {
			content: "\e986" "\e986" "\e986" "\e986" "\e986";
			text-indent: 0;
			position: absolute;
			#{$left}: 0;
			color: var(--alpha-secondary-color);
		}
	}

	.tooltiptext {
		#{$left}: 50%;
		top: auto;
		bottom: 150%;
		text-indent: 0;
		overflow: initial;
		letter-spacing: 0;
		line-height: 1;
		.seller-rating & {
			bottom: 100%;
		}
		&::after {
			float: none;
			content: '';
			#{$left}: inherit;
		}
	}

	+ a {
		margin: 2px 0;
		// font-size: 1em;
		line-height: 1.1;
		color: #aaa;
		text-transform: capitalize;
		overflow: hidden;
		text-overflow: ellipsis;
		.product-single & {
			margin: 0;
		}
		&:hover {
			color: var(--alpha-primary-color);
		}
	}
}

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

	.product-loop & {
		display: block;

		+ .short-desc {
			margin-top: 1rem;
		}
	}
	// 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;
		min-height: 26px;
		color: var(--alpha-body-color);
		border: 1px solid var(--alpha-light-color);
		border-radius: 2px;
		transition: .3s;

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

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

	.color {
		border: 0;
	}

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

// 12. Product Details
.product-details {
	position: relative;
	padding-top: 1.6rem;

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


// In 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%;
// 		}
// 	}
// }

// 13. Product Grid
.creative-grid {
	.product-loop {
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.product-media {
		flex: 1;
	}
}

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

// 15. Products Count
.count-progress {
	height: 1rem;
	margin: 1rem 0;
	border-radius: 1rem;
	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;
}

// 16. Product deal countdown
.product .countdown-container {
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 10px;
	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.4rem;
		font-weight: 700;
		color: inherit;
		letter-spacing: inherit;
	}

	.countdown-period {
		font-size: 1rem;
		color: inherit;
		letter-spacing: inherit;
		text-transform: capitalize;
		bottom: .8rem;
	}

	.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;
}

// 17. Responsive
@include mq(sm, max) {
	.product-action-vertical {
		top: 10px;
		#{$right}: 10px;
	}
	.product-label-group {
		top: 15px;
		#{$left}: 15px;
	}
}
@include mq(xs, max) {
	// Product-default
	.product-default .product-details {
		.btn-product {
			height: auto;
			padding: .8em 0;
			text-indent: 0;
		}

		.btn-product::before {
			display: none;
		}
	}
	.product-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: $theme-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: $theme-font;
			font-size: 18px;
			font-weight: 400;
		}
	}
}
@media ( max-width: 359px ) {
	.product-wrap .product-default .product-action .btn-quickview:first-child {
		padding: .8em 0;
	}
	.products .product {
		font-size: .9rem;
	}
	.products .btn-product-icon {
		margin-bottom: .25rem;
	}
}

// 18. Wishlist & Compare

// 18-1. Common
.product .action-panel {
	a.btn-product-icon.compare:before,
	.btn-product-icon.yith-wcwl-add-to-wishlist a {
		position: relative;
		top: 1px;
	}
	a.btn-product-icon.compare:before {
		font-size: 1.2em;
		line-height: 2em;
	}
	.btn-product-icon.yith-wcwl-add-to-wishlist a {
		font-size: 1.05em;
	}
}

// 18-2. Compatibility with YITH Wishlist
.product-loop {
	.yith-wcwl-add-to-wishlist a span,
	.yith-wcwl-icon {
		display: none;
	}
}
.yith-wcwl-add-to-wishlist {
	a {
		i {
			display: none;
		}
		&::before {
			content: '\e98d';
			font-family: $theme-font;
			font-weight: 400;
		}
		.products &::after {
			content: '';
			clear: both;
			display: block;
		} 
	}
}
.yith-wcwl-wishlistaddedbrowse a,
.yith-wcwl-wishlistexistsbrowse a {
	&::before {
		content: '\e902';
	}
	&:hover::before {
		transform: rotateY(180deg);
	}
}
.product {
	> .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;
		}
	
		a::before {
			display: block;
			transition: transform .3s;
		}
		a:hover {
			&::before {
				transform: rotateY(180deg);
			}
			color: var(--alpha-primary-color);
			background: none;
		}
	}
}

// 18-3. Compare
.compare {
	&.btn-product-icon::before {
		font-family: $theme-font;
		content: "\e93d";
		font-size: 1.25em;
		color: inherit;
	}
	.product &.added::before {
		content: "\e969";
	}
	.summary &.btn-product-icon::before {
		font-size: 1.5em;
	}
}
