//  =================
//      Imports
//  =================

@import '../base/color_variables';      // Color Variables
@import '../base/fonticons';            // Fonticons Variables
@import '../base/urls';                 // URLS Variables
@import '../base/utilities_variables';  // Utilities Variables
/*  Related Products */
h5 {
	font-size: 16px;
	color: $additional-color-2;
	font-weight: 600;
}
.form-control {
	border-radius: $br-4;
	border-color: $color_622;
}
.product-detail-2 {
	background-color: $white;
	padding: $p-20;
	.product-slider {
		a.product-image {
			text-align: $align-center;
			div.preview-pic {
				background-color: $white;
				height: 425px;
				padding: 15px;
			}
		}
		ul.preview-thumbnail {
			margin-top: 15px;
			border-width: initial;
			border-style: none;
			border-color: initial;
			border-image: initial;
			li {
				width: 23%;
				margin-right: 1.5%;
				background-color: $color_164;
				text-align: $align-center;
				border: $b-width-1 $solid $color_6;
				padding: $p-5;
				a {
					padding: $p-5;
					img {
						height: 90px;
					}
				}
			}
		}
	}
	.product-details {
		.product-cat {
			font-size: 13px;
			margin: $m-0;
			margin-bottom: $m-5;
			color: $additional-color-11;
		}
		.product-title {
			font-weight: 600;
			font-size: 24px;
			margin: $m-0;
			color: $black;
			margin-bottom: 8px;
		}
		.product-description {
			color: $additional-color-6;
			font-size: 13px;
		}
		.product-pricing {
			.deleted-pricing {
				font-size: 19px;
			}
			.current-pricing {
				font-size: $fs-20;
				color: $additional-color-11;
				font-weight: 600;
				margin-left: $m-10;
			}
		}
		form.product-quantity {
			div.input-group {
				button {
					padding: .375rem .75rem;
				}
			}
		}
		.product-cart {
			button {
				border-radius: $br-20;
			}
		}
	}
	/*  Product description     */
	.product-description {
		margin-top: 150px;
		.nav-tabs {
			border-bottom: none;
			.nav-item {
				a.nav-link.active {
					color: $color_57;
					border-color: $color_none;
					border-bottom: $b-width-2 $solid $color_57;
					font-weight: 600;
				}
				&:first-child {
					border-top-left-radius: $b-width-5;
				}
				&:last-child {
					border-top-right-radius: $b-width-5;
				}
				a {
					color: $additional-color-6;
					font-weight: 600;
				}
			}
		}
		a.nav-link {
			border-radius: $br-20;
			color: $black;
			&:hover {
				border: $b-width-1 $solid $color_none;
			}
		}
		div.tab-pane {
			padding: $p-20;
		}
		.tab-content {
			h3 {
				color: $color_47;
				text-transform: $transform-upper;
				margin-bottom: 18px;
				font-weight: 600;
				font-size: 18px;
			}
			p {
				color: $additional-color-11;
			}
			#tabs-add-info {
				span.attribute-name {
					color: $additional-color-11;
				}
				span.attribute-properties {
					color: $additional-color-11;
				}
			}
		}
	}
}
.swiper-pagination-bullet-active {
	background: $color_56;
}
form.product-color-selector {
	label {
		cursor: pointer;
		&:before {
			top: 0.45rem;
		}
		&:after {
			top: 0.45rem;
		}
		span.color-section {
			width: 18px;
			height: 18px;
			margin-top: 6px;
			border-radius: $br-4;
		}
	}
	.custom-radio {
		.custom-control-input {
			&:checked~.custom-control-label {
				&::before {
					background-color: $color_57;
				}
			}
		}
	}
}
form.product-size-selector {
	label {
		padding: $p-5;
		position: $pos-rel;
		padding-left: 25px;
		input {
			display: none;
		}
		span {
			border: $b-width-1 $solid $light-gray-3;
			width: 2rem;
			height: 2rem;
			color: $color_2;
			position: $pos-abs;
			overflow: hidden;
			line-height: 2.4;
			text-align: $align-center;
			border-radius: 100%;
			font-size: 13px;
			left: 0;
			top: 50%;
			margin-top: -7.5px;
			&:hover {
				background-color: $light-success;
				cursor: pointer;
			}
		}
	}
	input {
		&:checked {
			&+span {
				background: $light-success;
				border-color: $light-success;
			}
		}
	}
}
.related-product {
	margin-top: 150px;
	margin-bottom: 50px;
	h3 {
		font-size: 21px;
		color: $color_56;
		margin-bottom: $m-20;
		font-weight: 600;
		text-transform: $transform-upper;
		border-bottom: $solid $b-width-1 $light-gray;
	}
	.related-product-carousel {
		width: 100%;
		margin: $m-10 auto;
		overflow: hidden;
		.swiper-pagination-bullet {
			width: 15px;
			height: 5px;
			border-radius: $b-width-5;
		}
	}
	.swiper-container-horizontal {
		>.swiper-pagination-bullets {
			bottom: -25px;
			left: 10px;
			width: 100%;
			text-align: left;
		}
	}
}
@media (max-width: 575px) {
	.product-detail-2 {
		.product-slider {
			ul.preview-thumbnail {
				li {
					width: 48%;
				}
			}
		}
	}
}