ul.products {
	
	li.product {
		visibility: hidden;
		margin-bottom: 20px;
		@include breakpoint(medium down) {
			margin-bottom: 10px;
		}

		.product-inner-wrapper {
			position: relative;	
		}

		.product-inner {
			position: relative;			

			.product-image {
				position: relative;
				overflow: hidden;
				margin-bottom: rem-calc(20);

				@include breakpoint(medium down) {
					overflow: visible;
					margin-bottom: rem-calc(15);
				}

				.loop-thumbnail {
					overflow: hidden;
					position: relative;
					display: block;
					transition: opacity 1s ease;

					&:before {
						opacity: 0;
						transition: opacity 1s ease;
					}

					&.image-loading {
						color: transparent;
						@include loader(20px, 20px);

						&:before {
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							background-color: #fff;
							opacity: 0.3;
							content: "";
							z-index: 1;
							transition-delay:0.1s;
							transition: opacity 1s ease;							
						}

			    		&:after	{		
				    		color: #000;	
						    border-top: 2px solid;
						    position: absolute;
						    left: 50%;
						    top: 50%;
						    margin-top: -10px;
						    margin-left: -10px;
						   	z-index: 1;								    
						}

					}

					img {
						width: 100%;
						// opacity: 0;
					}

					.image-hover {

						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						opacity: 0;
						transition: opacity 0.5s ease, transform 2s cubic-bezier(0, 0, 0.44, 1.18);
					}

					&:hover {
						.image-hover {
							opacity: 1;

							transform: scale(1.08);
						}
					}
				}	

			    .footer-section {
			    	opacity: 0;
			    	z-index: 1;
				    text-align: center;
				    position: absolute;
				    // bottom: 0;
				    transform: translateY(-44px);
				    transform: translateY(0);
				    width: 100%;
				    transition: all 1s cubic-bezier(.19,1,.22,1);
				    transition-delay:0s;
				    // height: 30px;
				    // background-color: #eee;


				    @include breakpoint(medium down) {

				    	position: relative;
						transform: translateY(0px);
				    }

				    .footer-section-inner {
						display: flex;
						align-items: center;
						justify-content: center;				    	
						font-size: 0;

						@include breakpoint(medium down) {
						    display: flex;
						    flex-flow: row wrap;
						    justify-content:space-between;							
							max-width: 100%;
						}

						.added_to_cart:not(.button) {
							display: none;
						}

						.button {
							margin: 0;
							border-width: 1px;
							position: relative;
							height: auto;
							font-weight: 600 !important;
							padding: 10px 20px 9px;
							text-transform: capitalize;
							letter-spacing: 0;
							margin-bottom: 0;
							min-height: 40px;
							color: #000;
							background-color: #fff;
							white-space: normal;

							@include breakpoint(medium down) {
								font-size: 0;
								border-color: #e4e4e4;
								flex: 1 1 0px;
								width: auto;
							}

							&:before {
								background-color: #000;
								@include breakpoint(medium down) {
								}
								    
							}
				    		&:after	{	
				    			transition-delay:0s;			    			
							    position: absolute;
							    left: 50%;
							    top: 50%;
							    margin-top: -8px;
							    margin-left: -8px;
							   	z-index: 1;
							   	color: #000;

								@include breakpoint(medium down) {
								    font-size: 16px;								
									@include barberry-icon('\ea02');
								}							   	
							}

							&:hover {
								color: #fff;
								&:before {
									background-color: #000;
								}
								&:after	{
									color: #fff;
								}
							}

							&.loading {

								&.product_type_simple,
								&.product_type_subscription {
									color: transparent;
									@include loader(16px, 16px);

						    		&:after	{
						    			transition-delay:0.1s;		
							    		color: #000;	
									    border-top: 1px solid;
									    position: absolute;
									    left: 50%;
									    top: 50%;
									    margin-top: -8px;
									    margin-left: -8px;
									   	z-index: 1;								    
									}	

									&:hover {
										&:after	{
											color: #fff;
										}
									}
								}															
							}

							&.barberry_addtocart_button {
								.tooltip {
									display: none;
								}
							}


						}


						.product_type_simple,
						.added {
							@include breakpoint(medium down) {
								font-size: 0;


								&:after {
								  font-size: 16px;								
									@include barberry-icon('\ea02');
								}
							}	

						}

						.add_to_cart_button {
							@include breakpoint(medium down) {

								&:after {
								  font-size: 16px;								
									@include barberry-icon('\ea04');
								}
							}								
						}

						.product_type_variable {
							@include breakpoint(medium down) {
								font-size: 0;


								&:after {
								    font-size: 16px;								
									@include barberry-icon('\ea3b');
								}
							}							
						}

						.button {
							@include breakpoint(small only) {
								&:nth-last-child(4),
								&:nth-last-child(4) ~ .button {
									padding: 8px 10px 7px;
									&:after {
										font-size: 14px;
										margin-top: -7px;
										margin-left: -7px;
									}
								}
							}	

							@include breakpoint(1200px down) {
								&:nth-last-child(4),
								&:nth-last-child(4) ~ .button {
									&.product_type_simple,
									&.added:not(.barberry-compare) {
										font-size: 0;
										&:after {
										    font-size: 16px;								
											// @include barberry-icon('\ea04');
										}	

										&.loading {
											color: transparent;
											@include loader(16px, 16px);

								    		&:after	{
								    			transition-delay:0.1s;		
									    		color: #000;	
											    border-top: 1px solid;
											    position: absolute;
											    left: 50%;
											    top: 50%;
											    margin-top: -8px;
											    margin-left: -8px;
											   	z-index: 1;								    
											}	

											&:hover {
												&:after	{
													color: #fff;
												}
											}											
										}									
									}	

									&.product_type_variable {
										font-size: 0;
										&:after {
										    font-size: 16px;								
											@include barberry-icon('\ea3b');
										}											
									}								
										
									
								}
							}


						}

						

						// Quick View Button

						.barberry_product_quick_view_button {
							margin-right: -1px;
							background-color: #fff;
							height: 100%;
							transition: background-color 1s cubic-bezier(.19,1,.22,1);

							&:before {
								display: none;
							}

							&:after {
								@include barberry-icon('\ea15');
							}

							&:hover {
								background-color: #000;
								&:after {
									color: #fff;
									
									// animation: beat .6s ease-in-out infinite;
									// opacity: 0.3;
								}					
							}	
							
							&.loading {

								color: transparent;
								@include loader(16px, 16px);

					    		&:after	{
					    			transition-delay:0.1s;		
						    		color: #000;	
								    border-top: 1px solid;
								    position: absolute;
								    left: 50%;
								    top: 50%;
								    margin-top: -8px;
								    margin-left: -8px;
								   	z-index: 1;								    
								}	

								&:hover {
									&:after	{
										color: #fff;
									}
								}															
							}
																											
						}

						// Wishlist Button

						.barberry_product_wishlist_button {

							// display: inline-block;
							background-color: #fff;
							height: 100%;
							margin-left: -1px;
							transition: background-color 1s cubic-bezier(.19,1,.22,1);
							opacity: 1 !important;

							.blockUI {
								display: none !important;
							}

							&:before {
								display: none;
							}

							&:after {
								@include barberry-icon('\ea06');
							}

							&.added {

								&:after {
									@include barberry-icon('\ea05');
								}								
							}

							&:hover {
								background-color: #000;
								&:after {
									color: #fff;
									animation: beat .6s ease-in-out infinite;
									// opacity: 0.3;
								}					
							}

							&.loading {

								color: transparent;
								@include loader(16px, 16px);

					    		&:after	{
					    			transition-delay:0.1s;		
						    		color: #000;	
								    border-top: 1px solid;
								    position: absolute;
								    left: 50%;
								    top: 50%;
								    margin-top: -8px;
								    margin-left: -8px;
								   	z-index: 1;								    
								}	

								&:hover {
									&:after	{
										color: #fff;
									}
								}															
							}

						}


						// Compare

						.barberry_product_compare_button {
							background-color: #fff;
							height: 100%;
							margin-left: -1px;
							transition: background-color 1s cubic-bezier(.19,1,.22,1);
							opacity: 1 !important;

							.blockUI {
								display: none !important;
							}

							&:before {
								display: none;
							}
							&:after {
								@include barberry-icon('\ea41');
							}	
							&:hover {
								background-color: #000;
								&:after {
									color: #fff;
									animation: rotateIn .6s ease-in-out infinite;
									// opacity: 0.3;
								}
								&.added {
									&:after {
										animation: none;
									}
								}					
							}	

							&.loading {
								color: transparent;
								@include loader(16px, 16px);

					    		&:after	{
					    			transition-delay:0.1s;		
						    		color: #000;	
								    border-top: 1px solid;
								    position: absolute;
								    left: 50%;
								    top: 50%;
								    margin-top: -8px;
								    margin-left: -8px;
								   	z-index: 1;								    
								}	

								&:hover {
									&:after	{
										color: #fff;
									}
								}								
							}

							&.added {
								&:after {
									@include barberry-icon('\ea4b');
								}								
							}												
						}

				    }

				    
			    }

			}

			&.phover:hover {
				.product-image {
					overflow: visible;
				}
			}



			.product-details {
			    display: flex;
				-webkit-justify-content: space-between;
			    -ms-flex-pack: justify;
			    justify-content: space-between;	

			     @include breakpoint(768px down) {
			     	flex-wrap: wrap;
			     }

			    .star-rating {
			    	display: block;
			    	font-size: rem-calc(11);
			    	margin-bottom: 5px;

			    	 @include breakpoint(medium down) {
			    	 	display: block;
			    	 	margin-bottom: 5px;
						font-size: rem-calc(11);
			    	 }			    	
			    }

		    
			    .product-title {
			    	display: inline-block;
			    	max-width: 60%;
		    		font-size: 18px;		    		
		    		line-height: 1.4;
		    		margin-bottom: .3em;


		    		a {
			    		color: #000;
			    		font-size: 18px;
			    		line-height: 1.4;

			    		&:hover {
			    			color: #000;
			    			opacity: 0.7;
			    		}
			    	}

		    		@include breakpoint(768px down) {
		    			max-width: 100%;

		    			a {
		    				font-size: 16px;
		    				font-weight: 300 !important;
		    			}
		    		}

			    }

			    .price {
			    	max-width: 35%;
			    	text-align: right;
			    	font-size: 18px;
			    	line-height: 1;
						font-weight: 600;
						
						.subscription-details,
						.subscription-details .amount {
							font-size: 14px;
							font-weight: 300;
						}						

			    	.amount {
			    		line-height: 1.1;
			    	}

			    	.woocommerce-price-suffix {
			    		display: block;
			    		font-weight: 300;
			    	}

			    	sup {
					    font-size: 60%;
					    font-weight: 400;
					    line-height: 1.6;
					    margin-left: 0.1rem;			    		
			    	}

			    	@include breakpoint(768px down) {
			    		font-size: 16px;
			    		max-width: inherit;
			    		text-align: left;
			    	}

			    	del {
			    		text-align: right;
			    		position: relative;
			    		display: inline;
			    		// width: 100%;
			    		text-decoration: none;

			    		.amount {
			    			line-height: 1.4;
			    		}

			    		span {
			    			color: #333;
			    			font-size: 88%;
			    			font-weight: 300;
			    		}

			    		sup {
			    			// top:-3px;
			    			// font-size: 10px;
			    			font-weight: 300;
			    			// line-height: 2rem;
			    		}

				    	@include breakpoint(medium down) {
				    		text-align: left;
				    		width: 100%;
				    	}				    		

			    		.amount:before {
			    			width: 100%;
							position: absolute;
							content: "";
							right: 0;
							top: 50%;
							height: 0px;
							border-bottom: 1px solid #f9423a;
							opacity: 0.7;
							transform: rotate(-15deg);			    			
			    		}
			    	}

			    	ins {
			    		color: #f9423a;
			    		text-decoration: none;
			    		display: block;
			    		line-height: 1;
			    		padding: 0;
			    		width: 100%;

			    		@include breakpoint(medium down) {
			    			display: inline;
			    		}
			    	}

			    	@include breakpoint(medium down) {
			    		width: 100%;
			    	}

			    	.woocommerce-Price-currencySymbol {
			    		font-size: 70%;
			    		margin-right: 3px;
			    	}

			    	@include breakpoint(small only) {
				    	// font-size: 16px;
				    	line-height: 1.3;

				    	.woocommerce-Price-currencySymbol {
				    		margin-right: 2px;
				    	}

				    	sup {
						    font-weight: 400;
						    margin-left: 0.05rem;			    		
				    	}				    			    		
			    	}
			    }

			    a.button {
			    	display: none;
			    }

			}

			&:hover {
				.footer-section {

					transform: translateY(-55px);

					@include breakpoint(1024px down) {
						transform: translateY(0px);
					}

				}
			}


		}

	}


	&.product-grid-layout-2 {
		li.product {
			.product-inner {

				.product-image {
					margin-bottom: 0;

				    @include breakpoint(medium down) {
				    	margin-bottom: 15px;
				    }					
				}

				.product-details-wrapper {
					position: relative;
					transition: transform 1s cubic-bezier(.19,1,.22,1);
				}



				.product-details {
				    position: absolute;
				    width: 100%;
				    bottom: 30px;
				    z-index: 3;

				    .star-rating {
				    	opacity: 0;
				    	display: block;
				    	font-size: rem-calc(13);
				    	margin-bottom: 10px;

				    	body.is-mobile & {
				    		opacity: 1;
				    	}

				    	@include breakpoint(medium down) {
							opacity: 1;
				    	}


				    }				    

				    @include breakpoint(768px down) {
				    	position: relative;
				    	bottom: auto;
				    }

				    .product-title {
				    	max-width: 60%;
				    	margin-left: -30px;
				    	margin-bottom: 0;

					    @include breakpoint(768px down) {
					    	max-width: 100%;
					    	margin-left: 0;
					    	margin-bottom: .3em;
					    }				    	
				    	
				    	a {
				    		font-size: 40px;
				    		line-height: 1.2;

				    		div {
				    			width: auto;
				    			padding: 0;
				    			overflow: hidden;

				    			span {
				    				opacity: 0;
				    				display: inline-block;
				    				position: relative;

				    				@include breakpoint(medium down) {
				    					opacity: 1
				    				}

						    		&:after {
										width: 0;
										height: 1px;
										position: absolute;
										left: 0;
										bottom: 2px;
										content: " ";
										background-color: #000;
										-webkit-transition: width 1s cubic-bezier(.19,1,.22,1);
										-moz-transition: width 1s cubic-bezier(.19,1,.22,1);
										-o-transition: width 1s cubic-bezier(.19,1,.22,1);
										transition: width 1s cubic-bezier(.19,1,.22,1);	
										transition-delay: 0;

										@include breakpoint(small down) {
											display: none;
										}			    			
						    		}

				    				
				    			}	

								@for $i from 1 through 100 {
									&:nth-child(#{$i}) span:after {
										transition-delay: (.1s * $i);
									}
								}				    					    			

				    		}
				    	}
				    }

				    .price {
				    	position: relative;
				    	opacity: 0;
				    	display: block;
				    	max-width: 100px;
				    	margin-right: 30px;

				    	align-self: flex-end;
				    	bottom: 5px;
				    	overflow: hidden;
				    	text-align: right;

				    	body.is-mobile & {
							opacity: 1;
							}
							
							.subscription-details,
							.subscription-details .amount {
								font-size: 14px;
								font-weight: 300;
							}

				    	@include breakpoint(medium down) {
				    		bottom: 0;
				    	}

				    	@include breakpoint(768px down) {
							opacity: 1;
							
				    	}

	    				@include breakpoint(768px down) {
	    					text-align: left;
	    					display: block;
	    					max-width: 100%;
	    					opacity: 1;
	    					margin-right: 0;
	    					margin-bottom: 0;
	    				}				    	

				    }					
				}

				&:hover {
					.product-image {
						.loop-thumbnail {

							.image-hover {
								opacity: 1;
								transform: scale(1.08);
							}
							
						}
					}

					.product-details-wrapper {
						transform: translateY(-40px);
						transition: transform 1s cubic-bezier(.19,1,.22,1);

						@include breakpoint(medium down) {
							transform: none;
						}
					}

					.product-details {

						.product-title {
							a {
								div {
									span {
					    				&:after {
					    					width: 100%;
					    				}										
									}
								
								}
							}
						}						
					}

				}
			}			
		}		
	}

	li.product {
		&.active {
			.product-inner {
				.product-image {
					.footer-section {
						@include breakpoint(768px down) {
							transition-delay:.3s;
						}
						
						opacity: 1;
					}
				}
			}
			.product-labels {
				transition-delay:1s;
				transition: opacity 1s;
				opacity: 1;
			}
		}
	}
}