/* -------------------------------------------
	Single Product Page
---------------------------------------------- */

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

/* Theme SCSS Framework */
// @set_theme_configuration

// Product Image Popup - PhotoSwipe
.pswp {
	z-index: 3010;
	.pswp__bg {
		background-color: rgba(0,0,0,.7);
		transition: opacity .3s;
	}
}
.pswp__scroll-wrap {
	opacity: 0;
	transition: opacity .5s;
}
.pswp--visible .pswp__scroll-wrap {
	opacity: 1;
}
.pswp__img {
	box-shadow: 0 0 15px 10px #333;
}
.pswp__img--placeholder--blank {
	background-color: #F2F3F5;
}
.pswp__caption {
	min-height: auto;
}
.pswp__caption__center {
	text-align: center;
}

// Product Image Popup - Arrow
.pswp__button--arrow--left,
.pswp__button--arrow--right {
	width: 4.8rem;
	height: 4.8rem;
	color: #fff;
	border-radius: 50%;
	font-size: font-size( 1.6rem );
	font-weight: 900;
	font-family: var(--fa-style-family-classic,"Font Awesome 6 Free");
	text-align: center;
	opacity: .5;
	right: 10%;
	transition: opacity .3s;
	border: 2px solid;
}
.pswp__ui > button {
	&::before {
		background: transparent;
		position: static;
	}
	&:hover {
		opacity: 1;
	}
}
.pswp__button--arrow--right::before {
	content: "\f054";
}
.pswp__button--arrow--left {
	left: 10%;
	right: auto;
	&::before {
		content: "\f053";
	}
}

// Woocommerce Notices
.single-product .woocommerce-notices-wrapper .alert{
	&:last-child {
		margin-bottom: 1rem;
	}
}

.single-product {
	.woocommerce-error .button {
		background-color: var(--rio-alert-color, #b10001);
		border-color: var(--rio-alert-color, #b10001);
		color: #fff;
	}
}

// Product Gallery
.woocommerce-product-gallery {
	margin-bottom: 3rem;
}
.product-gallery {
	// Grid & Masonry Layout
	&.row {
		> * {
			margin-bottom: 2rem;
		}

		.product-image-full {
			#{$right}: 1rem;
		}
	}

	&.grid {
		margin-top: 0;

		>*:first-child {
			// woocommerce starts zooming images after isotope has been ran,
			// jquery.zoom add position relative to style
			// position: absolute!important;
			max-width: 100%;
			flex: 0 0 100%;
		}
	}
	&.grid-gallery {
		&,
		&.gutter-md {
			.woocommerce-product-gallery__image {
				margin-bottom: 0;
				padding: var(--rio-gutter-md);
			}
		}
		&.gutter-sm {
			.woocommerce-product-gallery__image {
				margin-bottom: 0;
				padding: var(--rio-gutter-sm);
			}
		}
		&.gutter-lg {
			.woocommerce-product-gallery__image {
				margin-bottom: 0;
				padding: var(--rio-gutter-lg);
			}
		}
		&.gutter-xs {
			.woocommerce-product-gallery__image {
				margin-bottom: 0;
				padding: 1px;
			}
		}
		&.gutter-no {
			.woocommerce-product-gallery__image {
				margin-bottom: 0;
				padding: 0;
			}
		}
	}
}

// Sticky Both
.sticky-both {
	@include mq(lg) {
		.single_add_to_cart_button,
		.variations,
		.select-box,
		select {
			width: 100%;
		}
		.variations .value>*:not(:last-child) {
			margin-#{$right}: 0;
		}

		form.cart:not(.variations_form),
		.woocommerce-variation-add-to-cart {
			display: flex;
			flex-wrap: wrap;
			.product-divider {
				flex: 0 0 100%;
			}
			.single_add_to_cart_button {
				width: auto;
				flex: 1;
				padding: 0;
				margin-#{$left}: .5rem;
			}
		}
	}
	.woocommerce-product-gallery {
		margin-bottom: 0;
	}
	.woocommerce-product-details__short-description p {
		margin-bottom: 0;
	}

	.sticky-sidebar {
		padding-bottom: 2rem;
	}

	.woocommerce-notices-wrapper {
		margin-top: -2rem;
		margin-bottom: 3rem;
	}
}

.product-gallery-carousel {
	a
	// ,img : issue : single product gallery type widget - bug
	{
		height: 100%;
	}
	img {
		object-fit: cover;
	}
}

// Product Image
.product-image-full {
	padding: 1rem;
	#{$right}: 1rem;
	bottom: 1rem;
	border: 0;
	color: #999;
	background: transparent;
	font-size: font-size( 2rem );
	line-height: 1;
	opacity: 0;
	transition: opacity .3s, color .3s;
	z-index: 1;
	cursor: pointer;

	:hover > &,
	div:hover > & {
		opacity: 1;
	}
	&:hover {
		color: var(--rio-primary-color, #27c);
	}

	.product-gallery & {
		position: absolute;
		width: auto;
	}
}

// Product Navigation
.product-navigation {
	display: flex;
	justify-content: space-between;
	padding-#{$left}: 2px;

	a, .delimiter {
		opacity: 1;
		color: #999;
	}
	.breadcrumb {
		flex: 1;
		flex-wrap: nowrap;
		padding: side-values(0 5rem 0 0);
		overflow: hidden;
		white-space: nowrap;
		color: #222;
		font-size: inherit;

		li:last-child {
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	li {
		padding: 0 0 1.1rem;
		&.disabled {
			pointer-events: none;
			opacity: .5;
		}
	}
	.main-content > &, .main > &, .main > div > & {
		margin-top: -2rem;
	}
	+ .woocommerce-notices-wrapper > .alert:first-child {
		margin-top: 0;
	}
}
.product-nav {
	position: relative;
	display: flex;
	margin-#{$right}: 1px;
	color: #999;

	@include only-for-retina(2) {
		margin-top: 1px;
	}

	i {
		font-size: 1.9rem;
		margin-bottom: 1px;
	}

	li + li {
		margin-#{$left}: 2rem;
	}

	li {
		position: relative;
	}

	span span {
		margin-top: 5px;
		color: #666;
		font-size: font-size( 1.2rem );

		@include text-block();
	}

	li:hover > a{
		color: var(--rio-primary-color, #27c);
	}

	li:hover .product-nav-popup {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	@include if-rtl {
		.product-nav-prev i:before {
			content: '\e97f';
		}
		.product-nav-next i:before {
			content: '\e97e';
		}
	}
}
.product-nav-prev i {
	margin-#{$right}: 2px;
	line-height: 0;
	vertical-align: middle;
}
.product-nav-next i {
	margin-#{$right}: 2px;
	line-height: 0;
	vertical-align: middle;
}
.product-nav-popup {
	position: absolute;
	top: 100%;
	#{$right}: 0;
	z-index: 30;
	width: 120px;
	padding: 0 5px 5px;
	line-height: 1.5;
	text-align: center;
	background-color: #fff;
	box-shadow: 1px 1px 7px rgba(0,0,0,.1);
	visibility: hidden;
	opacity: 0;
	transform: scale(.9);
	transform-origin: top;
	transition: opacity .3s, transform .3s;

	// Triangle
	&::before {
		content: '';
		position: absolute;
		top: -8px;
		#{$right}: 18px;
		width: 16px;
		height: 16px;
		transform: rotate(45deg);
		background-color: #fff;
		box-shadow: inherit;
	}
	img {
		position: relative;
		width: 100%;
		padding-top: 5px;
		background-color: #fff;
	}
}
li:not(:last-child)>*> .product-nav-popup {
	#{$right}: auto;
	#{$left}: 0;

	&::before {
		#{$right}: 8.6rem;
	}
}

// Product Tabs
.woocommerce-tabs {
	&.accordion {
		.card-body {
			margin-top: -1rem;
		}
	}

	.active > .nav-link,
	.nav-link.active,
	*:hover > .nav-link {
		&::after {
			transform: scaleX(1) translateX(-50%);
		}
	}

	.nav-link {
		font-size: font-size(2rem);
		color: #222;
		padding: 1rem 2.5rem;
		line-height: 1.2;
	}

	.tabs .nav-item {
		margin-right: 0;
	}

	.tab-pane {
		padding: 1.5rem 2px;
		line-height: 1.86; // issue. pixel perfect
	}
	.tab-pane + .tab-pane,
	.wc-tab > h2:first-child, // H2, H3 Headings Not Displaying
	.wc-tab > h3:first-child {
		display: none;
	}
	p {
		margin-bottom: 1.5rem;
	}

	.form-submit {
		margin-bottom: 0;
	}

	table p {
		margin-bottom: 0;
	}

	.shop_attributes {
		margin-bottom: 0;
		td, th {
			padding: 0;
			border-bottom: none;
		}
	}

	.shop_attributes th {
		width: 200px;
		padding-#{$right}: 1rem;
		color: #222;
		font-weight: inherit;
		text-align: $left;
		text-transform: capitalize;
		&::after {
			content: ':';
		}
	}

	.product-single > & {
		margin-top: 4rem;
	}

	.woocommerce-Reviews h2 {
		display: none;
	}
}
.tab .comment-respond {
	margin-bottom: 0;
}

.product-status {
	line-height: 2;
}

// Reviews tab
.product-reviews-left {
	position: sticky;
	top: 30px;
	padding-top: 2.5rem;
}

// Review
.woocommerce-Reviews-title {
	font-size: 2rem;
}
.avg-rating-container {
	display: flex;
	align-items: center;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1;
	margin-#{$left}: -.4rem;
	margin-bottom: 2.2rem;

	mark {
		margin-bottom: 0;
		margin-#{$right}: 1.8rem;
		color: var(--riode-primary-color, $primary-color);
		font-size: 6em;
		font-weight: 700;
		line-height: 1;
		letter-spacing: -.025em;
		background: none;
	}

	.ratings-review {
		letter-spacing: 0;
		color: #999;
	}
}
.avg-rating-title {
	display: block;
	font-size: 1.4rem;
	margin-bottom: .9rem;
}
.ratings-list {
	margin-bottom: 3rem;
	.star-rating {
		margin-#{$right}: 1.8rem;
	}

	.progress-value {
		margin-#{$left}: 2rem;
		min-width: 4rem;
	}
}
.ratings-item {
	display: flex;
	align-items: center;
	line-height: 1;
	margin-bottom: 1.5rem;
	font-size: 1.2rem;
}
.rating-percent {
	background: $border-color-light;
	height: .8rem;
	width: 20rem;
	max-width: 100%;
	border-radius: 1rem;
	overflow: hidden;
	span {
		display: block;
		height: 100%;
		background: $grey-color;
	}
}

.product-comments-list {
	.review {
		padding-top: 4rem;
		padding-bottom: 4.5rem;
		&:last-child {
			margin-bottom: 0;
			padding-bottom: 0;
		}
		&:not(:first-child) {
			border-top: 1px solid #e1e1e1;
		}
	}
	.star-rating {
		margin-right: 0;
		font-size: 12px;
	}
	.meta {
		&::before {
			content: 'by';
		}
		.review-date::before {
			content: 'on';
			margin-#{$right}: 3px;
			color: #666;
		}
		strong,
		time {
			color: #222;
		}
		strong {
			font-weight: 600;
		}
	}
	@include mq(sm) {
		.comment-avatar {
			max-width: 8rem;
			flex: 0 0 8rem;
			height: 8rem; 
		}
	}
	.comment-text {
		padding: side-values( 0.5rem 0 0 2rem );
	}
}
.review-form-section {
	 .offcanvas-content {
		width: 50rem;
		right: -50rem;
	}
}
.comment-form-rating {
	margin-bottom: 1rem;
}
.comment-respond .comment-form-cookies-consent {
	margin-bottom: 2rem;
}
.stars {
	display: inline-block;
	margin: side-values(0 0 0 1rem);
	line-height: 1;

	.comment-respond & {
		margin-bottom: 0;
	}

	span {
		display: flex;
		position: relative;
		height: font-size(12px);
		font-size: font-size( 12px );
	}

	a {
		color: #999;
		text-indent: if-ltr(-9999px, 9999px);
		width: font-size(14px);
	}

	a:before {
		content: '';
		position: absolute;
		#{$left}: 0;
		height: font-size(12px);
		line-height: 1;
		font-family: 'riode';
		text-indent: 0;
		overflow: hidden;
		white-space: nowrap;
		letter-spacing: 0.2em;
	}

	a.active:before,
	a:hover:before {
		content: "\e955\e955\e955\e955\e955";
		color: var(--rio-secondary-color, #d26e4b);
	}

	.star-1 {
		z-index: 10;
	}

	.star-2 {
		z-index: 9;
	}

	.star-3 {
		z-index: 8;
	}

	.star-4 {
		z-index: 7;
	}

	.start-5 {
		z-index: 6;
	}

	.star-1:before {
		width: 20%;
	}

	.star-2:before {
		width: 40%;
	}

	.star-3:before {
		width: 60%;
	}

	.star-4:before {
		width: 80%;
	}

	.star-5:before {
		content: "\e955\e955\e955\e955\e955";
	}
}
.woocommerce-Reviews {
	.order-select {
		label {
			margin-#{$right}: 5px;
		}
		select {
			display: inline-block;
		}
	}
	.filter-medias .active,
	.filter-medias a:hover {
		color: var(--rio-primary-color);
		border-color: var(--rio-primary-color);
		background: none;
	}
}

// Single Product Reviews
.woocommerce-Reviews {
	.toolbox {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 2.25rem;
		padding-bottom: 1.25rem;
		border-bottom: 1px solid #e1e1e1;
		& + .woocommerce-noreviews {
			margin-top: 2rem;
		}
	}
	.toolbox-left {
		margin-#{$right}: auto;
	}
	.order-select {
		padding: 1.25rem 0;
		white-space: nowrap;
	}
}
.filter-medias {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding: 1.25rem 0;
	margin-top: -.5rem;
	margin-bottom: -.5rem;
	> a {
		margin: side-values( .5rem 1rem .5rem 0 );
		padding: 1.3rem 2rem 1.2rem;
		border: 1px solid #ccc;
		font-size: 13px;
	}
}

.row .summary + .woocommerce-tabs {
	#comments {
		& > .row {
			display: block;
			& > .col-lg-4,
			& > .col-lg-8 {
				max-width: 100%;
			}
		}
	}
}

// Product Sticky
.product-sticky-content {
	&:not(.fixed) {
		.sticky-product-details {
			display: none;
		}
		.container {
			display: flex;
			flex-wrap: wrap;
			padding: 0;
			max-width: none;
		}
	}
	&.fixed {
		padding: 1rem 0;
		.container {
			display: flex;
			align-items: center;
		}

		.label,
		.product-divider {
			display: none;
		}

		.quantity, .single_add_to_cart_button { margin-#{$right}: .8rem; }
		.single_add_to_cart_button:last-child { margin-#{$right}: 0; }

		.cart & .container .single_add_to_cart_button {
			flex: none;
			padding: 0 3.5em;
		}
	}
}
.sticky-content.fixed .quantity,
.sticky-content.fixed .single_add_to_cart_button,
.sticky-content.fixed .product-buy-now {
	margin-bottom: 0;
}
.sticky-product-details {
	display: flex;
	align-items: center;
	margin-#{$right}: auto;

	img {
		width: 9rem;
		height: 9rem;
		object-fit: cover;
		margin-#{$right}: 1rem;
	}

	.star-rating {
		font-size: 1.6rem;
		line-height: 1;
	}

	.product-title { 
		margin-bottom: 1rem;
		font-weight: 700;
	}
	.price {
		font-weight: 600;
		font-size: font-size( 2rem );
		margin: side-values(0 2rem 0 0);
		ins {
			margin-right: 0;
		}
		del {
			font-size: .9em;
		}
	}
	.product-title {
		font-size: font-size( 2rem );
	}
}
.product-info {
	display: flex;
}

.main-content > .product_title {
	text-align: center;
}

.product-single .col-md-6 {
	.summary:last-child {
		position: sticky;
		top: 10px;
	}
}
.product-single .summary {
	z-index: 10; 
}
.product-single .related,
.product-single .up-sells {
	margin-top: 6.5rem;
}
// Responsive
@include mq(lg) {
	// Sticky Both Type
	.woocommerce-product-gallery + .col-lg-3 {
		order: -1;
	}
}
// Product FullWidth
@include mq(xxl) {
	.container-fluid {
		.product-thumbs.owl-carousel {
			width: calc(100% + 20px);
			margin: 0 -10px;
		}
		.product-thumb {
			margin: 0 10px;
		}
		.product-thumbs-wrap {
			margin-top: 20px;
		}
		.product-thumbs .owl-prev {
			#{$left}: 10px;
		}
		.product-thumbs .owl-next {
			#{$right}: 10px;
		}
		.pg-vertical {
			.product-thumb {
				margin: 0 0 20px;
			}
			.product-thumbs-wrap {
				margin: side-values(0 20px 0 0);
			}
			.product-single-carousel {
				max-width: calc(100% - 129px);
			}
		}
	}
}
// Masonry Type
@include mq(sm) {
	.product-masonry-type {
		align-items: center;

		.woocommerce-product-gallery__image:nth-child(4n+1),
		.woocommerce-product-gallery__image:nth-child(4n+2) {
			max-width: 33.3333%;
			flex-basis: 33.3333%;
		}
		.woocommerce-product-gallery__image:nth-child(4n),
		.woocommerce-product-gallery__image:nth-child(4n+3) {
			max-width: 66.6667%;
			flex-basis: 66.6667%;
		}
		.woocommerce-product-gallery__image:first-child {
			max-width: 100%;
			flex-basis: 100%;
		}
	}
}
// Sticky Info Type
.sticky-info .woocommerce-tabs {
	margin-bottom: 5rem;
}
@include mq(md, max) {
	.sticky-info .woocommerce-product-gallery {
		margin-bottom: 0
	}
	.product-single > .woocommerce-tabs {
		margin-top: 0;
	}
}

@include mq(sm, max) {
	.woocommerce-tabs tbody th {
		width: 100px;
	}

	.woocommerce-tabs .commentlist {
		padding: 0 0 2.5rem;
	}

	.product-single .related {
		margin-top: 4rem;
	}

	.product-navigation .breadcrumb {
		padding-right: 2rem;
		flex: none;
		flex-wrap: wrap;
		max-width: 100%;
	}

	.product-navigation {
		flex-wrap: wrap;
	}
}

@media (max-width: 479px) {
	.summary .product-navigation {
		display: block;

		li .product-nav-popup {
			left: 0;
			right: auto;

			&::before {
				right: 8.6rem;
			}
		}
	}
}

/* video thumbnail & 360 degree gallery */
.product-single .riode-video-thumbnail-viewer,
.product-single .riode-360-gallery-viewer {
	position: relative;
	display: block;
	z-index: 2;

	&::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.1);
		transition: background .3s;
	}

	&:hover::before {
		background: rgba(0, 0, 0, 0.2);
	}

	&::after {
		font-weight: 800;
		color: #fff;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border: 2px solid #fff;
		border-radius: 50%;
		width: 40px;
		height: 40px;
		line-height: 36px;
		text-align: center;
		transition: box-shadow .3s;
	}

	&:hover::after {
		box-shadow: 0 0 0 15px rgba(255, 255, 255, 0.2);
	}
}
.product-single {
	.riode-video-thumbnail-viewer {
		&::after {
			content: '\f04b';
			font-family: var(--fa-style-family-classic,"Font Awesome 6 Free");
			font-size: 16px;
		}
	}
}
.product-single {
	.riode-360-gallery-viewer {
		&::after {
			content: '\f021';
			font-family: var(--fa-style-family-classic,"Font Awesome 6 Free");
			font-size: 16px;
		}
	}
}
.single-product {
	.product_title {
		margin-top: 0;
	}

	.mfp-content .riode-video-popup-wrapper {
		background: transparent;
	}

	.riode-video-popup-wrapper video {
		display: block;
		width: 100%;
		height: auto;
	}

	.mfp-content .riode-360-gallery-wrapper {
		min-height: 500px;
		max-width: 80rem;
	}
}

@include mq('md', 'max') {
	.single-product .mfp-content .riode-360-gallery-wrapper {
		min-height: 30rem;
	}
}

// needed only in demos
.riode-demo .woocommerce-Tabs-panel--description {
	.btn-video-iframe { font-size: 35px !important; }
	.icon-box-side .icon-box-title { padding-top: 5px !important; }
	.divider { margin-top: 5px !important; }
	.image-box figure { margin-bottom: 5px !important; }
}
.riode-demo .woocommerce-Tabs-panel {
	.sizes-table {
		display: block;
	}
}

// wishlist
.yith-wcwl-add-to-wishlist a {
	display: inline-flex;
	align-items: center;
}