/**
 * Single
 * -----------------------------------------------------------------------------
 */
@include itemstyle();
.woocommerce {
	&.single-product {
		div.product {
			/* Onsale */
			.onsale {
				box-shadow: none;
				text-shadow: none;
				border: none;
				margin: 0;
				border-radius: 50%;
				min-width: 40px;
				min-height: 40px;
				line-height: 38px;
				font-size: 12px;
				z-index: 9;
				right: 10px !important;
			}
			/* Image and Summary */
			.content-details {
				&:after {
					content: "";
					display: block;
					clear: both;
				}
				/* Image */
				div.images {
					margin-left: -15px;
					img {
						width: auto;
						box-shadow: none;
						margin-left: 1px;
					}
					div.thumbnails {
						padding-top: 10px;
					}
					ul, li {
						list-style: none;
					}
					/* FlexSlider */
					.slides {
						margin: 0;
						&:after {
							display: block;
							content: "";
							clear: both;
						}
					}
					#product-slider {
						position: relative;
						/*img {
							width: 100%;
						}*/
					}
					#product-carousel {
						position: relative;
						li {
							img {
								cursor: pointer;
							}
							&.flex-active-slide {
								img {
									opacity: 0.6;
								}
							}
						}
					}
				}
				/* Summary */
				.entry-summary {
					.product_title {
						color: $title-color;
						font-size: 30px;
					}
					.price {
						font-size: 25px;
						margin-top: 12px;
						font-weight: bold;
						margin-bottom: 25px;
					}
					.product_meta {
						padding-top: 20px;
						padding-bottom: 24px;
						border-top: 1px solid #f3f3f3;
						border-bottom: 1px solid #f3f3f3;
						margin-top: 0;
						margin-bottom: 20px;
					}
					select {
						padding: 6px;
						outline: none;
					}
					.single_variation {
						margin-bottom: 14px;
					}
					label {
						color: $title-color;
					}
					form {
						margin: 22px 0;
						table, tr, td {
							border: none;
						}
						&.cart {
							div.quantity {
								width: 50px;
								height: 40px;
								margin: 0 17px 0 0;
								input.qty {
									height: 40px;
									width: 65px;
									border: 1px solid #bbb3b9;
								}
								.minus,
								.plus {
									height: 40px;
									width: 16px;
									background: transparent;
									box-shadow: none;
									border-radius: 0;
									&:hover {
										color: #fff;
									}
								}
								.plus {
									border-bottom: 1px solid #bbb3b9;
								}
								.minus {
									right: auto;
									left: 0;
								}
							}
							.button {
								border: none;
								text-shadow: none;
								box-shadow: none;
								padding: 14px 36px;
								@include rounded(0);
								font-size: 12px;
								font-weight: bold;
								text-transform: uppercase;
							}
						}
						&.variations_form {
						}
					}
					p.cart {
						margin: 22px 0;
						.button {
							border: none;
							text-shadow: none;
							box-shadow: none;

							padding: 14px 36px;
							@include rounded(0);
							font-size: 12px;
							font-weight: bold;
							text-transform: uppercase;
						}
					}
					a.compare.button {
						font-size: 0;
						width: 40px;
						height: 40px;
						line-height: 40px;
						text-align: left;
						background: #fff;
						border-radius: 0;
						float: left;
						padding: 0;
						border: 1px solid #bbb3b9;
						color: #bbb3b9;
						margin-right: 10px;
						box-shadow: none;
						@include transition(all 0.5s);
						&:before {
							content: "\f080";
							font-size: 16px;
							font-family: 'FontAwesome';
							position: absolute;
							margin-left: 12px;
						}
						&.added {
							color: #fff;
							&:before {
								font-family: WooCommerce;
								content: "\e017";
								right: 0;
								top: 0;
								left: 0;
							}
						}
						&:hover {
							color: #fff;
						}
					}
					.yith-wcwl-add-to-wishlist {
						margin-bottom: 10px;
						a.add_to_wishlist {
							position: relative;
							background: transparent;
							border: 1px solid #bbb3b9;
							color: #bbb3b9;
							text-align: center;
							font-size: 0 !important;
							width: 40px;
							height: 40px;
							line-height: 40px !important;
							display: inline-block;
							border-radius: 0 !important;
							&:active {
								top: 1px;
							}
							&:before {
								content: "\f08a";
								font-size: 16px;
								font-family: 'FontAwesome';
							}

							&:hover {
								color: #fff;
							}
						}
						a {
							position: relative;
							background: transparent;
							text-align: center;
							font-size: 0 !important;
							width: 40px;
							height: 40px;
							line-height: 40px !important;
							display: inline-block;
							border-radius: 0 !important;
							color: #ffffff;
							&:before {
								content: "\f08a";
								font-size: 16px;
								font-family: 'FontAwesome';
							}
						}

						.feedback {
							display: none;
						}
						.show, .yith-wcwl-wishlistexistsbrowse, .yith-wcwl-wishlistaddedbrowse {
							position: relative;
						}
					}
				}
				div[itemprop="description"] {
					clear: both;
				}
			}

			/* Tab */
			.woocommerce-tabs {
				margin-top: 25px;
				ul.tabs {
					overflow: visible;
					padding: 0;
					border-top: 1px solid $border-color;
					border-right: 1px solid $border-color;
					margin-bottom: 40px;
					&:before {
						border-bottom: 1px solid $border-color !important;
					}
					li {
						&:before, &:after {
							display: none;
						}
						box-shadow: none;
						border: 1px solid $border-color;
						border-top: none;
						border-radius: 0;
						position: relative;
						padding: 8px 44px;
						text-transform: uppercase;
						background: transparent;
						&:first-child {
							margin-left: 0;
						}
						&.active {
							color: #fff;
							&:after {
								border-left: 5px solid transparent;
								border-right: 5px solid transparent;
								bottom: -4px;
								content: "";
								display: inline-block;
								height: 0;
								left: 50%;
								margin-left: -5px;
								position: absolute;
								width: 0;
								box-shadow: none;
								text-shadow: none;
								border-bottom: none;
							}
						}
					}
				}
				.panel.entry-content {
					margin-bottom: 25px;
					border: none;
					box-shadow: none;
					border-radius: 0;
					ol, ul {
						margin-left: 30px;
					}
					#reviews {
						#comments ol.commentlist li {
							.comment-text {
								border-radius: 0;
							}
							img.avatar {
								padding: 0;
								border: none;
							}
						}
					}
				}

				h2, label {
					font-weight: 500;
					color: $title-color;
				}
				label{
					min-width: 60px;
				}

				textarea {
					padding: 10px;
				}
				.form-submit input#submit {
					box-shadow: none;
					text-shadow: none;
					border-radius: 0;
					text-transform: uppercase;
					color: $white;
					border: none;
					padding: 14px 20px 10px 20px;
					font-size: 13px;
					line-height: 100%;
				}
			}
			/**
			 * Description Toggle
			 * -----------------------------------------------------------------------------
			 */
			.toggle_desc {
				margin-top: 25px;
				.panel {
					border: none;
					-webkit-box-shadow: 0 0 0;
					border-radius: 0
				}
				.panel-heading {
					background: none;
					border: none;
					padding: 0;
					border-bottom: 1px solid $border-color;
				}
				.panel-heading p.panel-title {
					text-transform: uppercase;
					font-weight: normal;
					color: #2a2a2a;
					font-size: 14px
				}
				.panel-body {
					padding: 15px 0
				}
				.panel-group .panel + .panel {
					margin-top: 0
				}
				.panel-default > .panel-heading + .panel-collapse .panel-body {
					border-bottom: 1px solid $border-color;
					border-top: none;
				}
				.panel-heading p.panel-title a {
					position: relative;
					padding: 15px 0;
					display: block;
				}
				.panel-heading p.panel-title a.collapsed {
					color: #0e2a36;
				}
				.panel-heading p.panel-title a:after {
					content: "-";
					position: absolute;
					right: 0;
					top: 10px;
					width: 18px;
					height: 17px;
					display: inline-block;
					text-align: center;
					color: #adadad;
					font-size: 22px;
				}
				.panel-heading p.panel-title a.collapsed:after {
					content: "+";
				}

				h2, label {
					font-weight: 500;
					color: $title-color;
				}
				textarea {
					padding: 10px;
				}
				.form-submit input#submit {
					box-shadow: none;
					text-shadow: none;
					border-radius: 0;
					text-transform: uppercase;
					color: $white;
					border: none;
					padding: 14px 20px 10px 20px;
					font-size: 13px;
					line-height: 100%;
				}
			}

			/* Related */
			.related.products {
				margin-top: 25px;
				> h2 {
					font-size: 20px;
					padding: 20px 0;
					color: $title-color;
					border-bottom: 1px $border-color solid;
					margin-bottom: 0;
				}
				.blog-grid {
					li.product {
						width: 33.3333% !important;
					}
				}
			}
		}
	}
}

/* Tab */
@media (max-width: 480px) {
	.woocommerce #content div.product .woocommerce-tabs,
	.woocommerce div.product .woocommerce-tabs,
	.woocommerce-page #content div.product .woocommerce-tabs,
	.woocommerce-page div.product .woocommerce-tabs {
		ul.tabs {
			li {
				display: block;
				margin: 0;
			}
		}
	}
}

/**
 * Related
 * -----------------------------------------------------------------------------
 */
@media (max-width: 767px) {
	.woocommerce {
		&.single-product {
			.content-site-main {
				#content {
					div.product {
						.related.products {
							ul.products {
								li {
									width: 50%;
								}
							}
						}
					}
				}
			}
		}
	}
}

@media (max-width: 380px) {
	.woocommerce {
		&.single-product {
			.content-site-main {
				#content {
					div.product {
						.related.products {
							ul.products {
								li {
									width: 100%;
								}
							}
						}
					}
				}
			}
		}
	}
}

/* layout */
.woocommerce {
	&.single-product {
		div.product {
			div.images {
				width: 100% !important;
				&.hide {
					display: none;
				}
			}
			div.summary {
				width: 100% !important;
			}
		}
	}
}

#carousel {
	margin-top: 20px;
}

@media (max-width: 768px) {
	.woocommerce {
		&.single-product {
			div.product {
				div.images {
					width: 100% !important;
				}
				div.summary {
					width: 100% !important;
				}
			}
			.product-sidebar-left,
			.product-sidebar-right {
				div.product {
					div.images {
						width: 100% !important;
					}
					div.summary {
						width: 100% !important;
					}
				}
			}
		}
	}
}
