/*------------------------------------*\
    $WOOCOMMERCE ARCHIVE
\*------------------------------------*/

@include media-query(lap-and-up){
	.woocommerce ul.products{
		margin: 0 -1.5%;
	}
}

html .woocommerce ul.products {
    text-align: center;

    li.product {
        margin-left: 1.25%;
        margin-right: 1.25%;
    }
}

.woocommerce ul.products li.product{
	position: relative;
	float: none !important;
	display: inline-block;
	vertical-align: top;

	text-align: center;

	@media screen and (max-width: 480px){
		width: 100%;
	}

	@media screen and (min-width: 481px){
		margin: 0 1.5%;
		margin-bottom: 78px;
	}

	@media screen and (min-width: 481px) and (max-width: 768px){
		width: 46% !important;
	}

	@media screen and (min-width: 769px){
		width: 30% !important;
	}

	.product__title{
		margin: 18px 0 3px;
	}

	.product__button{
		@extend %btn;
		@extend %btn--text;

		position: absolute;
		bottom: 0;
		left: 50%;
		@include transform(translateX(-50%));

		background: white !important;
		color: $accent;

		@include opacity(0);
		@include transition(opacity .2s linear);
	}

	&:hover {
		.product__button{
			@include opacity(1);
		}

		.price{
			@include opacity(0);
		}
	}

	.price{
		margin-bottom: 0 !important;

		font-size: 19px !important;
		font-family: $heading-font-family;
		color: $dark !important;

		@include transition(opacity .2s linear);

		ins{
			color: $accent;
			border-bottom: 0;
		}

		del{
			font-size: 19px !important;
		}
	}

	hr{
		margin: $_u2 0;
	}

	.product__cat{
		padding: 0 $_u4;
		border: 0;

		font-size: 13px;
		font-weight: normal;
		text-transform: uppercase;
		color: $lightest;
	}

	.added_to_cart{
		@extend %btn;
		@extend %btn--text;

		position: absolute;
		bottom: 0;
		left: 50%;
		z-index: 10;
		@include transform(translateX(-50%));

		margin-top: $_u2;

		&:after{
			content: none;
		}
		
		&:before{
			content: "";

			position: absolute;
			bottom: 0;
			left: 0;
			z-index: -1;

			background: white;
			width: 100%;
			height: 30px;
		}
	}

	a.added_to_cart{
		@extend %btn;
		@extemd %btn--text;

		padding: 0 !important;
		padding-bottom: 3px !important;
		font-size: 15px !important;
	}
}


.woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img{
	@include box-shadow(none !important);
}

.woocommerce-page ul.products li.product{
	.pagination {
		margin: 40px 0;
	}
}

.shop-categories{
	&.tabs__nav  {
		margin-bottom: 70px;
		margin-top: -12px;
	}

	a{
		margin: 0 $_u2;
		@include font-size(24px);
		@include transition(all 0.2s);
		// font-weight: 600;

		&.active{
			color: $accent;
			border-bottom: 3px solid $accent;
		}
	}
}