.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	.btn;
	.btn-success;
}

.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	.btn-primary;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .comment-form-email input,
.woocommerce .comment-form-author input {
	.form-control;
}

.woocommerce form .form-row textarea {
	min-height: 80px;
}

.woocommerce .woocommerce-message {
	line-height: 40px;
}

.woocommerce .woocommerce-info {
	clear: both;
}

/* Products Listing */
.woocommerce {
	&.post-type-archive-product,
	&.tax-product_cat {
		.site-content {
			background: #f7f7f7;
			overflow: hidden;
		}
	}

	.woocommerce-result-count {
		margin: 0 0 30px;
		line-height: 30px;
	}

	.shop-filter {
		float: left;

		.toggle-filter {
			line-height: 30px;
			margin-right: 20px;
			text-transform: uppercase;
			font-weight: bold;
		}

		.filter-inner {

			position: absolute;
			visibility: hidden;
			background: #fff;
			overflow: auto;
			width: 355px;
			z-index: 999;
			left: -75px;
			top: -15px;
			bottom: -60px;
			padding: 100px 30px 0 90px;
			box-shadow: 1px 0 2px rgba(0, 0, 0, 0.2);
			opacity: 0;
			// overflow: auto;
			.translate(-50%,0);
			.transition(all .5s);

			&.open {
				visibility: visible;
				opacity: 1;
				.translate(0,0);
				.transition(all .5s);
			}

			.toggle-filter {
				background: @brand-success;
				color: #fff;
				position: absolute;
				top: 0;
				display: block;
				left: 0;
				padding-left: 90px;
				height: 60px;
				right: -20px;
				line-height: 60px;

				.fa-times {
					float: right;
					line-height: 60px;
					margin-right: 25px;
				}
			}
		}
	}

	.layout-select {
		margin: 0 20px 30px 0;

		> a {
			display: block;
			height: 30px;
			line-height: 30px;
			width: 30px;
			text-align: center;
			float: left;
			background: #fff;
			color: #333;
			border-radius: 0 @border-radius-small @border-radius-small 0;
		}

		> a:first-child {
			border-radius: @border-radius-small 0 0 @border-radius-small;
		}

		> a.active {
			background: @gray-lighter;
			color: #aaa;
		}
	}

	.woocommerce-ordering {
		margin: 0 0 30px;
		background: @gray-lighter;
		padding: 0 5px;
		border-radius: @border-radius-small;

		select {
			background: none;
			border: none;
			height: 30px;
			outline: none;
		}
	}

	.shop-header {
		margin: -60px 0 60px;

		@media (max-width: @screen-xs-max ) {
	  	margin-top: -@line-height-computed;
	  }

		.page-template-page-full-width &,
		.page-template-page-vertical-navbar &,
		.page-template-page-no-header-footer & {
			margin-top: 0 !important;
		}
	}
	.star-rating {
		color: #ffc107;
	}
	.products > h2 {
		font-size: @font-size-base;
		text-transform: uppercase;
		margin: @line-height-computed * 3 0 @line-height-computed;
	}

	ul.products {
		.row;
		margin-bottom: 0;

		li.product {
			.make-lg-column(3);
			@media ( max-width: @screen-lg ) {
				.make-md-column(3);
			}
			@media ( max-width: @screen-md ) {
				.make-sm-column(4);
			}
			@media ( max-width: @screen-sm ) {
				.make-xs-column(12);
			}
			margin: 0;
			position: relative;

			.onsale {
				min-height: @line-height-computed;
				line-height: @line-height-computed;
				border-radius: @border-radius-base;
				min-height: 0;
				padding: 0 5px;
				text-transform: uppercase;
				top: 20px;
				left: 35px;
				background: @brand-danger;
				font-size: 11px;
				margin: 0;
				width: 50px;
			}

			a:first-child {
				.clearfix;
				display: block;
				background: #fff;
				border-radius: @border-radius-small;
				box-shadow: 0 0px 1px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.2);
				padding: 20px;
				margin: 0 0 30px;
			}

			h3 {
				display: block;
				border-top: 1px solid @gray-lighter;
				margin: 0 -20px;
				padding: 20px 20px 5px;
				font-size: 16px;
				line-height: 24px;
				font-weight: 500;
				clear: both;
			}

			.price {
				font-size: 16px;
				line-height: 25px;
				color: @brand-success;
				margin: 0;

				del {
					display: inline-block;
				}
			}

			.star-rating {
				float: left;
				height: 25px;
				line-height: 25px;
				color: #ffc107;
				font-size: 14px;
				letter-spacing: 2px;
				width: 82px;
				margin: 0 10px 0 0;
			}

			a img {
				max-height: 300px;
				width: auto !important;
				margin: 0 auto 20px !important;
				opacity: 1;
				float: none;
				.transition(all .3s);
			}

			div[itemprop=description] {
				display: none;
			}

			.button {
				.btn;
				.btn-success;
				.btn-block;
				.translate(0, -50%);
				.transition(all .3s);
				opacity: 0;
				position: absolute;
				width: 160px;
				top: 40px;
				left: 50%;
				margin-left: -80px;
			}

			.button + .button,
			.button + a + .button {
				top: 100px;
				.transition-delay(.1s);
			}

			.added_to_cart {
				display: none;
			}

			&:hover img {
				opacity: .5;
				.transition(all .3s);
			}

			&:hover .button {
				opacity: 1;
				.translate(0, 0);
				.transition(all .3s);
			}

			&:hover .button + .button {
				.transition-delay(.1s);
			}
		}
	}

	&.columns-6 ul.products li.product {
		.make-lg-column(2);

		@media ( max-width: @screen-lg ) {
			.make-md-column(4);
		}
		@media ( max-width: @screen-md ) {
			.make-sm-column(6);
		}
		@media ( max-width: @screen-sm ) {
			.make-xs-column(12);
		}
	}

	&.columns-5 ul.products li.product {
		.make-lg-column(3);
	}

	&.columns-3 ul.products li.product {
		.make-lg-column(4);
		@media ( max-width: @screen-lg ) {
			.make-md-column(4);
		}
		@media ( max-width: @screen-md ) {
			.make-sm-column(6);
		}
		@media ( max-width: @screen-sm ) {
			.make-xs-column(12);
		}
	}

	&.columns-2 ul.products li.product {
		.make-lg-column(6);
		@media ( max-width: @screen-lg ) {
			.make-md-column(6);
		}
		@media ( max-width: @screen-md ) {
			.make-sm-column(6);
		}
		@media ( max-width: @screen-sm ) {
			.make-xs-column(12);
		}
	}

	&.columns-1 ul.products li.product {
		.make-lg-column(12);
		@media ( max-width: @screen-lg ) {
			.make-md-column(12);
		}
		@media ( max-width: @screen-md ) {
			.make-sm-column(12);
		}
		@media ( max-width: @screen-sm ) {
			.make-xs-column(12);
		}

		a img {
			float: left;
			margin: 0 40px 0 0 !important;
		}

		h3 {
			clear: none;
			border: none;
			font-size: 24px;
			line-height: 1.2;
			padding-bottom: 10px;
		}

		.button {
			left: 70px;
			margin-left: 0;
		}

		div[itemprop=description] {
			display: block;
			margin: 10px 0 0;
			color: @text-color;
		}
	}
}
