/* -------------------------------------------
	@Component - Product Single
---------------------------------------------- */

// Variables
@include set-default(
	(
		product-single: (
			name: (
				font-size: font-size( 2.6rem ),
				font-weight: 700,
				letter-spacing: -0.025em
			),
			price: (
				color: var(--rio-secondary-color, #d26e4b),
				font-size: font-size( 3rem ),
				font-weight: 700,
			),
			old-price: (
				font-size: font-size( 2.4rem ),
				font-weight: 600,
				text-decoration: false,
			),
			product-meta: (
				color: #999,
				font-size: font-size( 1.2rem ),
			),
			label: (
				color: $primary-color-dark,
			),
			variation: (
				width: 3rem,
				height: 3rem,
			),
			btn-cart: (
				max-width: 20.7rem,
				height: 4.5rem,
			),
			rating: (
				color: #666,
				review-color: #999,
			)
		)
	)
);


// Product Gallery Thumbs
.woocommerce-product-gallery__image a,
.woocommerce-product-gallery__image img {
	width: 100%;
	display: block;
}
.product-thumbs-wrap,
.product-single-carousel {
	flex-basis: 100%;
	max-width: 100%;
}

.product-single-carousel {
	overflow: hidden;
}

.product-single .col-md-6 .woocommerce-product-gallery {
	position: sticky;
	top: 0;
}

.product-single-carousel .owl-nav .owl-prev,
.product-single-carousel .owl-nav .owl-next {
	color: $primary-color-dark;
	border: 0;
}

.product-gallery {
	position: relative;
	display: flex;
	flex-wrap: wrap;
}

// Product Thumbs Dots
.product-thumbs-wrap {
	position: relative;
	margin-top: 1rem;
	overflow: hidden;
	user-select: none;
	-webkit-user-select: none;

	img {
		display: block;
		width: 100%;
	}

	button {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 2.4rem;
		border: 0;
		transition: opacity .3s, transform .3s;
		z-index: 2;
		opacity: 0;
		box-shadow: 0 0 1rem rgba(0,0,0,.1);
		-webkit-appearance: none;
		cursor: pointer;
	}
	&:hover button:not(.disabled) {
		opacity: .9;
		transform: none;
	}
	button:not(.disabled):hover {
		opacity: 1;
	}
	> button {
		display: none;
	}
}
.product-thumbs-wrap button,
.product-thumbs .owl-nav .owl-prev,
.product-thumbs .owl-nav .owl-next {
	background-color: #fff;
	color: #666;
	font-size: font-size(1.6rem);
}
.product-thumbs-wrap button,
.product-thumb::after {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
.product-thumbs {
	transition: top .3s ease-out;
	display: flex;

	&.row {
		flex-wrap: nowrap;
		margin: 0 -.5rem;
		width: calc(100% + 1rem);
	}

	&.owl-carousel {
		width: calc(100% + 8px);
		margin: 0 -4px;
	}
	.owl-stage {
		display: flex;
	}
	.owl-prev {
		#{$left}: 4px;
		#{$right}: auto;
		transform: translateX(if-ltr(-100%, 100%));
	}
	.owl-next {
		#{$left}: auto;
		#{$right}: 4px;
		transform: translateX(if-ltr(100%, -100%));
	}
}
.product-thumb {
	position: relative;
	margin: 0 .5rem;
	cursor: pointer;
	backface-visibility: hidden;

	.row > & {
		max-width: calc(25% - 1rem);
		flex: 0 0 25%;
	}

	&::after {
		content: '';
		transition: border-color .3s;
		border: 2px solid transparent;
	}
	&.active::after {
		border-color: var(--rio-primary-color, #27c);
	}
}

// Product Detail
.product-single {
	position: relative;

	.summary > hr {
		margin-bottom: 1rem;
	}

	.compare {
		&:hover {
			color: var(--rio-primary-color, #27c);
		}
		&::before {
			font-size: font-size(2.2rem);
		}
	}
}
.woocommerce-product-gallery .product-label-group {
	z-index: 2;
	#{$left}: 2rem;
}

.sticky-both .product-label-group {
	#{$left}: 3rem;
}

.summary {
	padding: 0 0 2rem;
	.woocommerce-review-link {
		@include css(color, product-single, rating, review-color);
		font-size: font-size(1.2rem);
	}
	.woocommerce-product-rating {
		margin-bottom: 1.8rem;
		font-size: 1.4rem;
	}
	.star-rating {
		//margin-top: -2px;
		span::after {
			@include css(color, product-single, rating, color);
		}
	}

	.yith-wcwl-add-to-wishlist {
		position: relative;
		display: inline-block;
		margin: 0.5rem 0 1rem;
		a {
			color: #666;
			font-size: font-size(1.4rem);
			&::before {
				display: inline-block;
				margin: side-values(0 5px 0 0);
				vertical-align: middle;
				font-size: 1.8rem;
				line-height: 0;
			}
			&:hover {
				color: var(--rio-primary-color, #27c);
			}
		}
	}
	.yith-wcwl-wishlistaddedbrowse {
		a {
			line-height: inherit;
			background: transparent;

			&::before{
				float: none;
				width: auto;
			}
		}
	}

	.yith-wcwl-add-to-wishlist + .compare {
		position: relative;
		margin-#{$left}: 4rem;

		&:after {
			content: '';
			position: absolute;
			#{$left}: -2.1rem;
			height: 2.1rem;
			border-#{$left}: 1px solid #ccc;
		}
	}

	// variation - list box type
	.product-variations{
		> * {
			@include css(min-width, product-single, variation, width);
			@include css(height, product-single, variation, height);
		}
		> .active,
		> *:hover {
			border: 1px solid;
			box-shadow: inset 0 0 0 2px #fff;
		}
	}
	.social-icons {
		padding-#{$right}: 1rem;
		margin-#{$right}: 1.5rem;
		margin-#{$left}: 0;
		border-#{$right}: 1px solid #e1e1e1;

		&:last-child {
			border-#{$right}: none;
		}
	}
}

.product-countdown-container {
	margin-bottom: 2.5rem;
	text-transform: none;
	line-height: 3.4rem;
	color: #fff;
	font-weight: 600;

	label {
		margin-#{$right}: .5rem;
		text-transform: none;
		font-weight: 400;
		color: #fff;
	}

	.product-sale-info {
		position: relative;
		font-weight: 700;
		text-transform: uppercase;
		flex: 1;
		white-space: nowrap;

		i {
			margin-#{$right}: 8px;
			display: inline-block;
			vertical-align: middle;
		}

		&::after {
			content: '';
			display: inline-block;
			vertical-align: middle;
			margin-#{$right}: 1.5rem;
			margin-#{$left}: 1.5rem;
			height: 2.4rem;
			width: 1px;
			background: rgba(#fff, 0.2);
		}
	}

	.product-countdown {
		margin-#{$left}: .5rem;
	}
	.countdown-amount {
		color: inherit;
		font-size: inherit;
	}
	.countdown-wrap {
		display: inline-flex;
		position: relative;
		flex-wrap: wrap;
		align-items: center;
		padding: 0 1.6rem;
		border: 1px solid #444;
		background-color: #444;
		border-radius: 2px;
		overflow: hidden;
	}
	&.countdown-variations {
		display: none;
	}
}

.product-gallery + .product-countdown-container {
	position: absolute;
	bottom: 20px;
	margin: 0 -50% 0 50%;
	transform: translateX(-50%);
}

.product-variations > .disabled {
	cursor: not-allowed;
	// pointer-events: none;
	opacity: .3;
}

.product_title {
	@include print_css(product-single, name);
	line-height: 1.4;
	margin-bottom: .6rem;

	&:first-child {
		margin-top: 1.5rem;
	}

	.single-product-type-gallery & {
		margin-top: 0;
	}

	a {
		color: inherit;
	}
}

p.price {
	display: block;
	margin-bottom: 1rem;
	@include css(color, product-single, price, color);
	@include css(font-size, product-single, price, font-size);
	@include css(font-weight, product-single, price, font-weight);
	@include css(letter-spacing, product-single, price, letter-spacing);
	line-height: 1;

	del {
		@include css(font-size, product-single, old-price, font-size);
		@include css(font-weight, product-single, old-price, font-weight);
		@include css(text-decoration, product-single, old-price, text-decoration);
	}
}

// Variations Form
.variations_form .label,
.quantity .label {
	padding-#{$right}: 1rem;
	min-width: 7.5rem;
	@include css(color, product-single, label, color);
	font-size: font-size(16px);
	letter-spacing: -0.025em;
	&::after{
		content: ':';
	}
}

.quantity-minus {
	border-radius: side-values( 3px 0 0 3px );
}

.quantity-plus {
	border-radius: side-values( 0 3px 3px 0 );
}

.variations {
	margin-bottom: 0;
	width: auto;
	border-collapse: separate;

	td {
		padding: 0;
		border-bottom: 1.4rem solid transparent;
	}

	.list-type:last-child td {
		border-bottom-width: 1.5rem;
	}

	.select-type td {
		border-bottom-width: 2rem;
	}

	.select-type .label {
		line-height: 37px;
	}

	.value > * {
		display: inline-block;

		&:not(:last-child) {
			margin-#{$right}: 2rem;
		}
	}
	.select-box::before {
		#{$right}: 1.4rem;
		font-size: font-size(1.2rem);
		color: #222;
	}
	select {
		max-width: none;
		padding: side-values(.8rem 3rem .8rem 1.4rem);
		color: #222;
		border-color: #ccc;
		font-size: font-size(1.3rem);
	}
	.list-type {
		line-height: 36px;
	}
}

.variations .reset-variation-cont {
	display: block;
}
.variations .reset_variations {
	display: inline-block;
	margin-top: 1em;
	padding: .3em 1em;
	background: #f4f4f4;
	font-size: font-size(1rem);
	line-height: 2;
}
.variations .product-variations + select,
.reset-variation-tr {
	display: none;
}
hr.product-divider {
	margin-top: 0;
	margin-bottom: 2rem;
}

p.out-of-stock,
.woocommerce-variation p,
p.stock.available-on-backorder,
p.in-stock {
	display: inline-block;
	padding: 4px 2rem;
	margin-bottom: 2rem;
	border-radius: 2px;
	color: #fff;
	background: var(--rio-secondary-color, #d26e4b);
	font-weight: 600;

	.woocommerce-variation-availability & {
		margin-top: 1rem;
		margin-bottom: 1rem;
	}
}
p.out-of-stock {
	margin-top: 0;
	margin-bottom: 2rem;
	background: #ccc;

	.woocommerce-variation & {
		margin-top: 1rem;
		margin-bottom: 1rem;
	}
}
.stock.hurryup-bar {
	margin-bottom: 3rem;

	.woocommerce-variation-availability & {
		margin-bottom: 1rem;
	}

	> p {
		margin-bottom: 0.5rem;
		color: #222;
		background: transparent;
		padding: 0;
	}

	.bar {
		position: relative;
		display: block;
		width: 100%;
		max-width: 38rem;
		height: 14px;
		background: #eee;
		border-radius: 10px;
		overflow: hidden;
	}

	.stock-bar {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		display: block;
		background: var(--rio-secondary-color, #d26e4b);
		border-radius: 10px;
	}
}
.woocommerce-variation {
	display: none;

	.price {
		margin-bottom: -10px;
	}
}
.woocommerce-variation > * {
	transform: translateY(-10px);
}

.cart .quantity {
	margin-#{$right}: 8px;
	margin-bottom: 2rem;
}

.single_add_to_cart_button,
.product-buy-now {
	display: inline-block;
	width: auto;
	margin-bottom: 2rem;
	border: 0;
	font-size: font-size(1.4rem);
	font-weight: 600;
	line-height: 4.5rem;
	padding: 0 3.5em;
	vertical-align: middle;
	border-radius: 3px;
	text-transform: none;
}

.single_add_to_cart_button {
	margin-#{$right}: 8px;

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

.product-buy-now {
	background-color: #313438;
	color: #fff;

	&:not(.disabled):hover {
		background-color: var(--rio-primary-color, #27c);
		color: #fff;
	}

	&.disabled {
		cursor: not-allowed;
	}
}

.single_add_to_cart_button::#{$before} {
	content: '\e942';
	font-family: "riode";
	font-size: 1.4em;
	font-weight: 400;
	line-height: 1;
	margin-right: 1rem;
	position: relative;
	bottom: -1px;
}

.external_add_to_cart_button {
	margin-top: 1rem;
	background-color: #ee8204;
	text-transform: uppercase;

	&::#{$before} {
		content: none;
	}
}

.external-product-form {
	hr {
		display: none;
	}
}

.product_meta {
	margin-bottom: 1.5rem;
	@include css(color, product-single, product-meta, color);
	@include css(font-size, product-single, product-meta, font-size);

	> span {
		display: inline-block;
		margin: side-values(0 1.5rem 0 0);
		text-transform: uppercase;
	}

	a {
		text-transform: none;
	}
}

// Product Variations Form
.guide-link {
	line-height: 30px;
	color: var(--rio-primary-color, #27c);

	&:hover {
		text-decoration: underline;
	}

	i {
		margin-#{$right}: .8rem;
		font-size: 2.1rem;
		vertical-align: middle;
		line-height: 0;
		color: #666;
	}
}
.woocommerce-variation-price {
	.price {
		font-size: font-size(2.4rem);
		font-weight: 700;
	}
	del {
		font-weight: 400;
	}
}

// Grouped Product
.grouped_form {
	.product {
		box-shadow: none;
	}

	.product-thumbnail {
		width: 100px;

		img {
			display: block;
		}
	}

	td, th {
		vertical-align: middle;
		padding: 20px 10px;
		border-bottom-color: #eee;

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

	.group_table {
		line-height: 1.4;
		border-top: 1px solid #eee;

		.btn {
			display: block;
			width: 110px;
			padding-left: 1rem;
			padding-right: 1rem;
		}
	}

	.woocommerce-grouped-product-list-item__label {
		padding-#{$right}: 3rem;
	}

	.woocommerce-grouped-product-list-item__price {
		font-weight: 600;
		color: #222;
		width: 23%;

		del {
			color: #ccc;
			margin-#{$left}: 5px;
		}
	}

	.woocommerce-grouped-product-list-item__quantity {
		width: 120px;
	}

	.quantity {
		margin-bottom: 0;
		margin-right: 0;
	}

	.sell-individually input {
		margin-#{$right}: 8px;
	}

	hr,
	+ hr {
		display: none;
	}

	> button {
		margin-top: 1rem;
	}
}

@include mq(lg) {
	.product-label-group.pg-vertical-label {
		#{$left}: 140px;
	}

	.product-single .col-md-6 .summary,
	.product-single .col-md-6 .woocommerce-tabs {
		padding-#{$left}: 1rem;
	}

	.pg-vertical {
		.product-thumbs-wrap {
			order: -1;
			max-width: 109px;
			margin: side-values(0 10px 0 0);
		}
		.product-single-carousel {
			max-width: calc(100% - 119px);
		}
		.product-thumbs {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: 0;
			width: 100%;
		}
		.product-thumb {
			margin: 0 0 1rem;

			img {
				margin-bottom: -1px;
			}
		}
		.row > .product-thumb {
			flex: 0;
			max-width: none;
		}
		.thumb-up,
		.thumb-down {
			display: flex;
			width: 100%;
			height: 2.4rem;
		}
		.thumb-up{
			transform: translateY(-100%);

			&::before {
				content: "\f077";
			}
		}
		.thumb-down{
			top: auto;
			transform: translateY(100%);

			&::before {
				content: "\f078";
			}
		}
	}
	.variations select {
		width: 20rem;
	}
}

@include mq(sm, max) {
	.summary .social-icons {
		display: flex;
		border-#{$right}: none;
	}
}
@media (min-width: 992px) and (max-width: 1200px) {
	.sidebar + .main-content .product-single .social-icons {
		display: flex;
	}
}
@media (max-width: 399px) {
	.summary .yith-wcwl-add-to-wishlist + .compare {
		display: block;
		margin-#{$left}: 0;
		&:after {
			content: '';
		}
	}
}

@media (max-width: 575px) {
	.grouped_form {
		.group_table td {
			display: block;
			width: 100%;
			padding: 5px;
			text-align: center;
			border: none;
		}

		tbody {
			display: flex;
			flex-wrap: wrap;
			border-#{$left}: 1px solid #eee;
		}

		tr {
			width: 50%;
			display: block;
			padding: 20px 10px;
			border: 1px solid #eee;
			border-width: 0 1px 1px 0;
		}
	}
}