/*--------------------------------------------------------------
19.0 WooCommerce
--------------------------------------------------------------*/

.woocommerce {
	
	/* Buttons */
	a.button,
	input.button,
	input.button.alt,
	button.button,
	#respond input#submit {
		display: inline-block;
		padding: 19px 22px;
		font-size: 13px;
		border-radius: 1px;
		color: $white-color;
		text-transform: uppercase;
		background-color: $primary-color;
		transition: $primary-transition;

		&:hover {
			background-color: darken( $primary-color, 3);
			color: $white-color;
		}
	}

	/* Headings */
	#reviews #comments h2,
	#reviews h3,
	div.product .woocommerce-tabs h2,
	.related h2 {
		font-size: 24px;
		margin-bottom: 20px;
	}

	/* Forms */
	form {

		.form-row {
			padding: 0;

			&.woocommerce-invalid .select2-container,
			&.woocommerce-invalid input.input-text,
			&.woocommerce-invalid select {
				border-color: red;
			}

			input.input-text,
			textarea {
				display: block;
				padding: 15px;
				margin: 0 0 5px 0;
				font-size: 14px;
				font-weight: normal;
				color: $text-color;
				border: 1px solid #e6e6e6;
				border-radius: 1px;
			}
		}
	}

	/* Pagination */
	.woocommerce-pagination {
		display: block;
		margin: 0 0 55px 0;
		padding-top: 60px;
		text-align: center;
		border-style: dashed;
		border-width: 1px 0 0 0;
		border-color: #dedede;
	}
	nav.woocommerce-pagination {

		ul {
			position: relative;
			margin: 0;
			border: none;

			li {
				margin-right: 5px;
				border-right: none;

				span {

					&.current {
						color: $white-color;
						background-color: $primary-color;
						border-color: $primary-color;
					}

				}

				.page-numbers {
					color: $text-color;
					width: 60px;
					padding: 21px 0;
					font-weight: bold;
					border: 2px solid #f2f2f2;
					border-radius: 1px;
					transition: $primary-transition;
				}

				a {

					&:focus,
					&:hover {
						background-color: $primary-color;
						border-color: $primary-color;
						color: $white-color;
					}
				}
			}
		}
	}

	/* Product Summary */
	.woocommerce-ordering .orderby {
		padding: 5px 6px;
		height: 34px;
		margin: -7px 6px 15px 0;
		border: 1px solid #e6e6e6;
		background: none;
	}

	ul.products {

		li {

			&.product {
				
				@media(min-width: $screen-md) {
					width: 23%;
					margin: 0 2.5% 50px 0;
				}

				a {

					// Product Image in Grid
					img {
						margin-bottom: 20px;
						outline: 3px solid transparent;
						transition: $primary-transition;
					}

					&:hover img {
						outline-color: $primary-color;
					}
				}

				// Sale Badge
				.onsale {
					position: absolute;
					left: 25px;
					top: 25px;
					margin: 0;
					width: 70px;
					height: 30px;
					min-height: 10px;
					line-height: 24px;
					font-size: 14px;
					font-weight: bold;
					z-index: 2;
					border-radius: 1px;
					background-color: $primary-color;
					transition: $primary-transition;

					&:hover {
						background-color: darken( $primary-color, 3);
					}
				}

				// Product Title
				h3 {
					padding: 0;
					margin-bottom: 15px;
					font-size: 18px;
					color: $dark-color;
					transition: $primary-transition;

					&:hover {
						color: $primary-color;
					}
				}

				// Product Price
				.price {
					font-size: 18px;
					font-weight: bold;
					color: $dark-color;

					del {
						line-height: 19px;
					}
				}
			}

			&.last {
				margin-right: 0;
			}
		}
	}

	/* Single Product Page */
	
	// Quantity on single product page
	.quantity {
		width: 50%;
		margin-right: 0;

		.qty {
			width: 100%;
			height: 54px;
			padding: 0;
			font-size: 14px;
			color: $text-color;
			background-color: #f9f9f9;
			border: 1px solid #f5f5f5;
		}
	}

	// Sale Badge
	span.onsale {
		position: absolute;
		left: 25px;
		top: 25px;
		margin: 0;
		width: 70px;
		height: 30px;
		min-height: 10px;
		line-height: 24px;
		font-size: 14px;
		font-weight: bold;
		z-index: 2;
		border-radius: 1px;
		background-color: $primary-color;
		transition: $primary-transition;
	}

	div.product {

		// Product Title
		.product_title {
			margin-bottom: 0;
		}

		// Product Rating
		.woocommerce-product-rating {
			margin-bottom: 10px;

			.woocommerce-review-link {
				color: $text-color;
			}
		}

		.images,
		.summary {
			margin-top: 0;
		}

		// Product Price
		p.price {
			margin-bottom: 20px;
			padding-bottom: 20px;
			font-size: 30px;
			font-weight: bold;
			color: $primary-color;
			border-style: dashed;
			border-width: 0 0 1px 0;
			border-color: #dedede;

			del {
				font-weight: normal;
				color: $text-color;
			}
		}

		// Add to cart
		form.cart {
			margin: 30px 0;

			// Quantity single product
			div.quantity {
				margin: 0;
			}

			// Add to cart Button
			.button.single_add_to_cart_button {
				width: 45%;
				height: 54px;
				margin-left: 5%;
				font-size: 14px;
				background-color: $white-color;
				transition: $primary-transition;

				&:hover {
					background-color: #9ab643;
				}
			}
		}

		// Tabs
		.woocommerce-tabs {

			ul.tabs {
				margin-bottom: 40px;
				padding: 0;
				text-align: center;
				border-radius: 1px;
				background-color: #f2f2f2;

				li {
					padding: 0;
					margin: 0 -3px;
					background: none;
					border-style: solid;
					border-color: rgba(0,0,0,0.1);
					border-width: 0 1px 0 0;
					border-radius: 0;
					-ms-transform: skew(-25deg);
					-webkit-transform: skew(-25deg);
					-moz-transform: skew(-25deg);
					-o-transform: skew(-25deg);
					transform: skew(-25deg);
					transition: $primary-transition;

					&:first-of-type {
						border-left: 1px solid rgba(0,0,0,0.1);
					}

					&:hover,
					&:active {
						background-color: darken( $primary-color, 3);
						border-color: darken( $primary-color, 3);

						a {
							color: $white-color;
						}
					}

					a {
						padding: 18px 40px;
						color: $text-color;
						-ms-transform: skew(25deg);
						-webkit-transform: skew(25deg);
						-moz-transform: skew(25deg);
						-o-transform: skew(25deg);
						transform: skew(25deg);
					}
				}

				&::before,
				li.active::before,
				li.active::after,
				li::before,
				li::after {
					display: none;
				}
			}
		}

		// Review Area
		#reviews {

			// Review Heading
			h3 {
				margin-bottom: 20px;
			}

			// Single comment element
			#comments ol.commentlist li .comment-text {
				padding: 20px 20px 10px 20px;
				border-radius: 1px;
			}
		}

		// Review Stars
		.star-rating {

			span::before {
				color: $primary-color;
			}
		}
	}

	/* WooCommerce Widgets */

	// Widget Product Categories
	.widget_product_categories {

		.product-categories {

			li {
				position: relative;
				list-style: none;

				&:first-of-type a {
					border-top: none;
				}

				a {
					display: block;
					padding: 15px 25px;
					font-weight: bold;
					color: $white-color;
					text-decoration: none;
					background-color: $primary-color;
					border-top: 1px dashed #99b34a;
					text-shadow: 0 1px rgba(0,0,0,0.1);
					transition: $primary-transition;

					&:hover {
						color: $white-color;
						background-color: darken( $primary-color, 3);
					}
				}

				>span {
					position: absolute;
					right: 30px;
					top: 16px;
					font-size: 13px;
					color: $white-color;
				}
			}
		}
	}

	// Widget Product Search
	.widget_product_search {

		.search-field {
			float: left;
			height: 52px;
			outline: none;
			padding: 0 20px;
			width: 65%;
			border-width: 1px 0 1px 1px;
			border-style: solid;
			border-color: #e6e6e6;
		}

		input[type="submit"] {
			height: 52px;
			width: 35%;
			color: $white-color;
			cursor: pointer;
			outline: none;
			border-radius: 0 1px 1px 0;
		}
	}

	// Widget Toprated Products List
	ul.product_list_widget {

		li {
			padding: 10px 0;
			border-bottom: 1px dashed #dedede;

			&:first-of-type {
				padding-top: 0;
			}

			&:last-of-type {
				padding-bottom: 0;
				border-bottom: none;
			}

			a  {
				color: $dark-color;
				transition: $primary-transition;

				&:hover {
					color: $primary-color;
				}
			}

			.star-rating {
				display: block;
				margin: 3px 0 4px 0;
			}

			img {
				width: 50px;
				margin-top: 7px;
			}
		}
	}

	// Widget Price Filter
	.widget_price_filter {

		.price_slider_amount .button {
			padding: 12px 22px;
		}
		.price_slider_wrapper .ui-widget-content {
			background-color: #f9f9f9;
		}
		.ui-slider .ui-slider-range {
			background-color: #dedede;
		}
		.ui-slider .ui-slider-handle {
			background-color: $primary-color;
		}
	}

	// Widget Cart Widget
	.widget_shopping_cart {

		.cart_list {

			li {
				padding: 8px 0 8px 45px;

				&:first-of-type {
					padding-top: 10px;
				}

				&:last-of-type {
					padding-bottom: 10px;
				}

				a.remove {
					top: calc(50% - 10px);
				}
			}

			.product_list_widget li img {
				width: 30px;
			}
		}

		.total {
			padding-top: 10px;
			border-top: 1px solid #dedede;
		}

		.button {
			padding: 12px 22px;
			width: calc(50% - 2px);
			text-align: center;
		}
	}

	/* WooCommerce Cart Page */
	table.shop_table {
		border-radius: 1px;

		th,
		td {
			padding: 10px 15px;
			border-collapse: collapse;
			border-color: rgba(0,0,0,0.1);
		}

		.product-name a {
			font-weight: bold;
		}

		.product-quantity .quantity .qty {
			width: 100px;
			height: 40px;
		}

		a.remove {
			background-color: #f2f2f2;
			border-radius: 2px;
			color: $text-color!important; /* Need to overwrite */
			
			&:hover {
				color: $white-color!important; /* Need to overwrite */
				background-color: $primary-color;
			}
		}
	}

	table.cart {

		.button,
		input.button {
			height: 44px;
			line-height: 0;
			text-transform: uppercase;
		}

		td.actions .coupon .input-text {
			height: 44px;
			width: 200px;
			padding: 0 15px;
			margin-right: 10px;
			line-height: 15px;
			background-color: #f9f9f9;
			border: 1px solid #f5f5f5;
		}
	}

	.col2-set {
		margin-bottom: 30px;
	}
}

/* WooCommerce Page */
.woocommerce-page {

	.woocommerce-error,
	.woocommerce-info,
	.woocommerce-message {
		padding: 10px 10px 7px 70px!important; // Need to be important
		line-height: 54px;
		font-weight: bold;
		border-top: 0;
		border-radius: 1px;
		background: #f5f5f5;

		&::before {
			font-size: 20px;
			line-height: 31px;
			color: $primary-color;
		}

		a.button:hover {
			background-color: darken( $primary-color, 3);
		}
	}

	.col2-set {
		margin-bottom: 30px;
	}
}

/* WooCoomerce Cart */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	background-color: $primary-color;
	text-transform: uppercase;

	&:hover {
		background-color: darken( $primary-color, 3);
	}
}
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
	border: 1px solid #e6e6e6;
	padding: 20px 30px 5px 30px;
	border-radius: 1px;

	table {
		width: 100%;
	}
}