ul.woo-products {
	width: 100%;
	margin: 0 0;

	li {
		margin: 0 0 30px 0;
		float: left;
		clear: none;
		padding: 0 15px;
	}

	.product-content {
		background: #fff;
		transition: box-shadow .1s ease-in-out;
	}

	img {
		width: 100%;
		margin: 0;
		vertical-align: top;
	}

	.image-wrap {
		width: 100%;
		position: relative;
		overflow: hidden;
		transition: opacity .2s ease-in-out;

	}
	a.button {
		display: none;
	}

	.slider {
		width: 100%;
		padding: 0;
		margin: 0;
		z-index: 1;

		img {
			width: 100%;
			height: auto;
			display: none;

			&:first-child {
				display: block;
			}
		}

		&.visible {
			img {
				display: block;
			}
		}

		.owl-stage-outer {
			padding-top: 0;
			margin-top: 0;
		}

		.owl-dots {
			width: 20px;
			margin-top: 0;
			position: absolute;
			top: 30px;
			left: auto;
			right: 25px;

			.owl-dot {
				display: block;
				margin-bottom: 10px;

				&.active {
					margin-left: 5px;
				}
			}
		}

		.owl-nav {
			display: none;
		}
	}

	.added_to_cart {
		display: none;
	}

	.wc-product-title-wrap {
		background: #f7f7f7;
		padding: 15px 25px 15px;
		position: relative;

		.yith-wcwl-add-to-wishlist {
			width: 30px;
			height: 25px;
			color: $color_dark;
			margin-top: 4px;
			margin-right: -5px;
			overflow: hidden;
			z-index: 2;
			position: absolute;
			bottom: 15px;
			right: 20px;

			i {
				font-size: 22px;
				display: inline-block;
				margin: -1px 10px 0 1px;
			}
		}
	}

	h3 {
		text-align: left;
		font-size: 14.7px; 
		margin: 5px 0 10px;
		line-height: 1.1;
	}

	.price {
		margin: 0;
		padding: 0 25px 0 0;
	}

	.without-price {
		h3 {
			margin-bottom: 5px;
			padding: 0 30px 0 0;
		}

		.left {
			display: none;
		}

		.yith-wcwl-add-to-wishlist {
			margin-top: -28px;
		}
	}

	li.product {
		&:hover {
			.image-wrap {
				opacity: .8;
			}
			h3 a {
				color: $color_brand;
			}
		}
	}

	// For woo categories shortcode
	li.product-category {
		padding: 0 15px;
		position: relative;

		.wrap {
			width: 100%;
			position: relative;
			background-size: cover;
		}

		> a:after {
			background: transparent;
			content: '';
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			transition: background .2s ease-in-out;
			z-index: 2;
		}

		&:hover > a:after {
			background: rgba(255,255,255,.2);
		}

		.info-wrap {
			width: 100%;
			height: 100%;
			padding: 30px;
			position: absolute;
			overflow: hidden;
			bottom: 0px;
			left: 0px;
			z-index: 3;

			.wrap-bg {
				background: rgba($color_dark, .6);
				padding: 20px;
			}

			.description p {
				color: $color_gray;
				font-weight: 300;
				margin: -5px 0 5px;
			}

			h3 {
				font-size: 34px;
				font-weight: 600;
				margin: 0;
				display: block;
				text-align: inherit;
			}

			h3, h3 a, .description {
				margin: 10px 0;
				color: $color_dark;
			}

			.shop-now {
				font-size: $font_extra_small-size;
				margin: 15px 0 0;
			}


			&.text-right {
				.plus {
					right: auto;
					left: 50px;
				}
			}

			&.style-2 {
				height: auto;

				.content-center {
					background: rgba($color_dark,.9);
					padding: 8px 20px;
				}

				h3 {
					font-size: 30px;
				}

				h3, h3 a, .description {
					margin: 8px 0;
					color: #fff;
				}

				.shop-now {
					margin-top: 5px;
					margin-bottom: 10px;
				}

				.plus {
					color: #fff;
					font-size: 36px;
					font-weight: 300;
					position: absolute;
					bottom: 0px;
					right: 0px;
				}

				&.text-center .plus {
					display: none;
				}

				&.text-right .plus {
					right: auto;
					left: 0;
				}
			}
		}

		@media screen and (max-width: 768px){
			padding: 0px;
		}
	}
}


// Standart WooCommerce grid

$columns: ( "2": 50%, "3": 33.2%, "4": 25%, "5": 20%, "6": 16.666% );

.woo-products .product,
.woo-products li {
	width: 100%;
}

@media screen and (min-width: 1025px) {
	@each $name, $value in $columns {
		.columns-#{$name} .product {
			width: $value;

			&:nth-child(#{$name}n + 1) {
				clear: both;
			}
		}
	}
}


@media screen and (max-width: 1024px) and (min-width: 768px) {
	@each $name, $value in $columns {
		.columns-md-#{$name} .product {
			width: $value;

			&:nth-child(#{$name}n + 1) {
				clear: both;
			}
		}
	}
}

@media screen and (max-width: 767px) {
	@each $name, $value in $columns {
		.columns-sm-#{$name} .product {
			width: $value;

			&:nth-child(#{$name}n + 1) {
				clear: both;
			}
		}
	}
}