/*--------------------------------------------------------------
	#shop-single-page
--------------------------------------------------------------*/
/*--------------------------------------------------------------
#5.1	shop-single-section
--------------------------------------------------------------*/
.shop-single-section {
	padding-bottom: 80px;

	@include media-query(991px) {
		padding-bottom: 70px;
	}

	@include media-query(767px) {
		padding-bottom: 60px;
	}

	/*** product slider ***/
	.shop-single-slider {
		.slider-for {
			text-align: center;

			img {
				display: inline-block;
			}
		}

		.slider-nav {
			padding: 0;
			margin-top: 35px;
		}

		.slider-nav > i {
			position: absolute;
			top: 50%;
			left: 0;
			@include translatingY();
			z-index: 100;
		}

		.slider-nav > i:hover {
			cursor: pointer;
		}

		.slider-nav .nav-btn-rt {
			left: auto;
			right: 0;
		}

		.slider-nav .slick-slide {
			text-align: center;
			img {
				display: inline-block;
			}
		}

		.slider-nav .slick-slide {
			width: auto !important;
			margin-right: 15px;
		}

		.slider-nav .slick-slide {
			border: 1px solid transparent;
		}

		.slider-nav .slick-slide.slick-current.slick-active {
			border: 1px solid $black;
		}
	}

	.product-details {
		padding: 50px 30px 93px;

		@include media-query(1199px) {
			padding: 40px 30px 85px;
		}

		@include media-query(991px) {
			margin-top: 45px;
			padding: 40px 30px;
		}

		@include media-query(767px) {
			padding: 0;
		}

		h2 {
			font-size: 45px;
			margin: 0 0 0.5em;

			@include media-query(767px) {
				font-size: 22px;
			}
		}

		.price {
			font-size: 28px;
			font-weight: 400;
			margin: 0.4em 0 0.5em;

			@include media-query(991px) {
				font-size: 20px;
			}
		}

		.rating {
			margin-bottom: 25px;

			.fi:before {
				font-size: 12px;
				color: $theme-primary-color;
			}

			span {
				font-weight: 300;
			}
		}

		p {
			font-weight: 300;
			margin-bottom: 1.3em;
		}

		p:last-child {
			margin: 0;
		}

		/*** product option ***/
		.product-option {
			margin: 35px 0;

			input {
				font-size: 17px;
				font-weight: 300;
			}

			.btn {
				padding: 7px 4px 7px 6px;
				font-size: 8px;
				font-weight: normal;
				position: relative;

				&:hover {
					background-color: $black !important;
				}
			}

			.product-count {
				width: 65px;
				position: relative;
				height: 50px;
				border-right: 0;
			}

			.input-group-btn-vertical {
				position: absolute;
				top: 0;
				right: 0;

			}

			.bootstrap-touchspin-up {
				background: transparent;
				color: $black;
				font-size: 16px;
				padding: 4px 0 7px 0;
				font-size: 15px;
				width: 25px;
				top: 0;
				right: 0;
				position: absolute;
			}

			.bootstrap-touchspin-down {
				background: transparent;
				width: 25px;
				color: $black;
				font-size: 16px;
				padding: 4px 0 7px 0;
				font-size: 15px;
				border-top: 0;
				bottom: 0;
				position: absolute;
			}

			form button[type="submit"] {
				font-size: 12px;
				border: 0;
			}
		}

		.product-option .product-row {
			overflow: hidden;

			button:after {
				display: none;
			}
		}

		.product-option .product-row > div {
			display: inline-block;
			float: left;
		}

		.product-option .product-row > div + div {
			margin-left: 15px;
		}

		.product-option .product-row > div:first-child {
			width: 85px;
			height: 50px;
		}

		.product-option .product-row > div:last-child .theme-btn:hover {
			background: $theme-primary-color;
			border-color: $theme-primary-color;
			color: $white;
		}

		.product-option .theme-btn {
			background-color: $black;
			padding: 16px 45px;

			@include media-query(991px) {
				font-size: 12px;
				padding: 17px 25px;
			}

			@include media-query(767px) {
				font-size: 12px;
				padding: 17px 20px;
			}


			&:hover,
			&:focus,
			&:active {
				background-color: darken($theme-primary-color, 5%);
				color: $white;
				border: 0;
				outline: 0;
			}
		}

		.product-option .heart-btn i {
			font-size: 15px;
		}

		.product-count {
			border-radius: 0;
			border: 1px solid lighten($black, 90%);
		}

		.product-count:focus {
			box-shadow: none;
			outline: none;
		}

		.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up,
		.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down {
			border-radius: 0;
			border-color: lighten($black, 90%);

			&:hover {
				background-color: $theme-primary-color;
				color: $white;
			}
		}
	}

	.thb-product-meta-before {
		.product_meta {
			font-weight: 500;
			color: $black;
		}

		.product_meta > span {
			display: block;
			font-size: 14px;
			font-weight: 500;
			margin-bottom: 5px;
			color: $black;

			span {
				color: #717171;
				font-weight: 300;
				display: inline-block;
				padding-left: 5px;
			}

			a {
				font-weight: 300;
				color: $text-color;
			}

			a:hover {
				text-decoration: underline;
			}
		}
	}

	/*** single-product info ***/
	.single-product-info {
		margin-top: 75px;
		text-align: center;

		@include widther(1200px) {
			padding-left: 138px;
		}

		h4 {
			font-size: 18px;
			font-weight: 400;
			margin: 0;
			line-height: 1.7em;
		}

		p {
			margin-bottom: 1.3em;
		}

		.tab-pane p:last-child {
			margin-bottom: 0;
		}

		/*** tabs ***/
		.nav-tabs {
			border: 0;
			margin-top: 5px;

			@include media-query(767px) {
				margin-bottom: 20px;
			}
		}

		.nav-tabs li {
			border: 0;
			margin-right: 1px;
			position: relative;

			&:after {
				content: "";
				background: $black;
				width: 100%;
				height: 2px;
				position: absolute;
				left: 0;
				bottom: 0;
				opacity: 0;
			}
		}

		.nav-tabs li.active a {
			border: 0;
			outline: 0;
		}

		.nav-tabs li.active:after {
			opacity: 1;
		}

		.nav-tabs a {
			font-family: $heading-font;
			font-weight: 500;
			font-size: 13px;
			color: $text-color;
			border: 0;
			border-radius: 0;
			margin: 0;
			display: block;
			padding: 12px 20px 11px;
			text-transform: uppercase;

			@include media-query(767px) {
				font-size: 14px;
				font-weight: normal;
				padding: 10px 10px 8px;
				text-transform: none;
			}
		}

		.nav-tabs a:hover,
		.nav-tabs .active a {
			background-color: transparent;
			color: $heading-color;
		}

		.tab-content {
			border-top: 1px solid #e8e8e8;
			padding: 35px 0;	
			margin-top: -1px;
			text-align: left;	

			@include media-query(767px) {
				border: 0;
				padding: 0;
				margin: 0;
			}	
		}

		/*** client rv ***/
		.client-rv {
			overflow: hidden;
			margin-bottom: 30px;

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

			.client-pic {
				width: 60px;
				float: left;

				@include media-query(767px) {
					width: 100%;
					float: none;
					margin-bottom: 10px;
				}
			}

			.details {
				width: calc(100% - 80px);
				float: right;
				@include media-query(767px) {
					width: 100%;
					float: none;
				}
			}

			.name-rating-time {
				@include media-query(767px) {
					padding-bottom: 3px;
				}
			}

			.name-rating-time > div,
			.name-rating > div {
				display: inline-block;
				font-size: 14px;

				@include media-query(767px) {
					font-size: 12px;
					display: block;
				}
			}

			.rating .fi:before {
				font-size: 12px;
			}

			.rating {
				font-size: 12px;
				color: $theme-primary-color;
				padding-left: 12px;

				@include media-query(767px) {
					padding-left: 0;
					margin: 4px 0 7px;
				}
			}

			.name-rating-time .time {
				font-size: 14px;
				font-weight: 500;
				margin-top: 3px;
				display: block;
				color: lighten($black, 70%);
				text-transform: uppercase;

				@include media-query(767px) {
					float: none;
				}
			}

			.review-body {
				padding-top: 12px;
			}
		}

		/*** review form ***/
		.review-form-wrapper {
			margin-top: 50px;

			@include widther(1200px) {
				padding-left: 15px;
			}
		}

		.review-form {
			@include media-query(991px) {
				margin-top: 45px;
			}

			h4 {
				margin-bottom: 1.73em;
				font-weight: 400;
			}

			form {
				input,
				textarea {
					width: 100%;
					height: auto;
				    border: 1px solid #ddd;
				    border-radius: 0;
				    padding: 12px 15px;
				    box-shadow: none;

				    @include media-query(991px) {
				        padding: 10px 15px;
				    }

				    &:focus {
				        border: 1px solid $black;
				        outline: none;
				        box-shadow: none;
				    }
				}

				textarea {
					height: 130px;
				}

				> div {
					margin-bottom: 27px;
				}

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

				.rating-wrapper > div {
					display: inline-block;
					@include media-query(767px) {
						display: block;
						float: none !important;
					}
				}

				.rating-wrapper > div:last-child {
					float: right;
					@include media-query(767px) {
						margin-top: 20px;
					}
				}

				.rating a {
					font-size: 14px;
					color: lighten($black, 80%);
					display: inline-block;
					margin-right: 10px;

					@include media-query(767px) {
						font-size: 12px;
						margin-right: 5px;
					}
				}

				.rating a:last-child {
					margin: 0;
				}

				.rating a:hover {
					color: $theme-primary-color;
				}
			}
		}

		.review-form .submit button {
			border: 0;
			outline: none;
			@include transition-time(0.3s);
		}
	}

	.slider-nav .slick-slide:focus {
		outline: none;
	}

	.products {
		overflow: hidden;
		margin: 0 -15px;

		> li {
			width: calc(25% - 30px);
			float: left;
			margin: 0 15px 30px;

			@include media-query(1500px) {
				width: calc(33.33% - 30px);
			}

			@include media-query(1300px) {
				width: calc(50% - 30px);
			}

			@include media-query(500px) {
				width: calc(100% - 30px);
				float: none;
			}
		}
	}	

	.product-holder {
		position: relative;

		.product-badge {
			background-color: $theme-primary-color;
			font-size: 12px;
			color: $white;
			padding: 5px 15px;
			display: inline-block;
			position: absolute;
			right: 0;
			top: 25px;
		}
	}

	.product:hover .shop-action-wrap {
		opacity: 1;
		visibility: visible;
		bottom: 35px;
	}

	.shop-action-wrap {
		width: 100%;
		text-align: center;
		position: absolute;
		left: 0;
		bottom: 15px;
		opacity: 0;
		visibility: hidden;
		@include transition-time(0.3s);
	}

	.shop-action {
		display: inline-block;

		> li {
			float: left;
			text-align: center;
		}

		> li + li {
			margin-left: 5px;
		}

		li a {
			background-color: $white;
			width: 45px;
			height: 45px;
			line-height: 45px;
			color: $black;
			display: inline-block;
			border-radius: 45px;
			box-shadow: 0px 3px 6.58px 0.42px rgba(0, 0, 0, 0.08);
		}

		li a:hover {
			background-color: $black;
			color: $white;
		}

		a i:before {
			font-size: 15px;
		}

		> li:first-child i:before {
			font-size: 16px;
		}

		> li:nth-child(2) a {
			line-height: 50px;
		}
	}

	.product-info {
		text-align: center;
		padding-top: 25px;

		h4 {
			font-family: $base-font;
			font-size: 14px;
			font-weight: 500;
			margin: 0 0 0.5em;
		}

		h4 a {
			color: $heading-color;
		}

		h4 a:hover {
			text-decoration: underline;
		}

		.woocommerce-Price-amount {
			font-family: $heading-font;
			font-size: 16px;
		}

		ins {
			font-weight: 500;
			color: $heading-color;
			text-decoration: none;
		}

		del {
			display: inline-block;
			padding-left: 8px;
			color: #a9a9a9;
		}

		.product-description {
			display: none;
		}
	}
}

.shop-single-vertical-thumb {

	@include widther(1200px) {
		.slider-for {
			max-width: 535px;
			float: right;
		}

		.slider-nav .slick-slide {
			margin-bottom: 15px;
		}

		.shop-single-slider .slider-nav .slick-slide,
		.shop-single-slider .slider-nav .slick-track {
			width: 100px !important;
		}

		.slider-nav	.slick-slide {
			float: none;
		}

		.single-product-info {
			margin-top: 110px;
		}
	}

	@include widther(1450px) {
		.slider-for {
			max-width: 615px;
			float: right;
		}
	}
}