@import '_theme_variables';

/*******************************************************
			 Product list Styles
********************************************************/

ul.product_list {
	.availability {
		
		span {
			display:inline-block;
			color:$light-text-color;
			font-weight:bold;
			padding:3px 8px 4px 8px;
			margin-bottom:20px;
			
			&.available-now {
				background:#46a74e;
				border:1px solid #36943e;
			}
			
			&.out-of-stock{
				background:#ff7430;
				border:1px solid #ea5e1a;
			}
		}
	}
	
	.color-list-container {
		margin-bottom:12px;
		
		ul {
			
			li {
				display:inline-block;
				border:1px solid $base-border-color;
				
				a {
					display:block;
					width:23px;
					height:23px;
					margin:1px;
				}	
			}
		}
	}
	.product-image-container {
		text-align:center;
		
		img {
			margin:0 auto;
		}	
		
		.quick-view {
			font:700 13px/16px $font-famaly;
			color:#777676;
			position:absolute;
			left:50%;
			top:50%;
			margin:-21px 0 0 -53px;
			padding:13px 0 0;
			background:rgba(255,255,255,0.82);
			width:107px;
			height:43px;
			text-align:center;
			@include box-shadow(rgba(black, 0.16) 0 2px 8px);
																		@media (min-width: $screen-lg) { // min 1200px
																			display:none;
																		}
			
																		@media (max-width: $screen-xs-max) { // max 767px
																			display:none;
																		}
		}
	}
	.comments_note {
		text-align:left;
		overflow:hidden;
		
		.star_content {
			float:left;
		}
		.nb-comments {overflow:hidden; font-style:italic;}
	}
}

/*******************************************************
			 Product list(Grid) Styles 
********************************************************/

ul.product_list.grid {
	> li {
		margin-bottom:20px;
		text-align:center;
		
																		@media (min-width: $screen-xs) and (max-width: $screen-xs-max) { // min 480px max 767px
																			width:50%;
																			float:left;
																		}
		
		.product-container {
			background:$light-background;
			padding:0;
			position:relative;
				
			.product-image-container {
				border:1px solid $base-listing-border-color;
				padding:9px;
				margin-bottom:13px;
				position:relative;
				
																		@media (max-width: $screen-xs-max) { // max 767px
																			max-width:290px;
																			margin-left:auto;
																			margin-right:auto;	
																		}
				
				.content_price {
					position:absolute;
					left:0;
					bottom:-1px;
					width:100%;
					background:url(../img/price-container-bg.png);
					padding:9px 0;
					display:none;
					
					span {
						color:$light-text-color;
						
						&.old-price {color:#b1b0b0;}
					}
				}
			}
			
			h5 {
				padding:0 15px 7px 15px;
				min-height:53px;
			}
			.comments_note {
																		@media (min-width: $screen-lg) { // min 1200px
																			display:none;
																		}
				.star_content {
					margin-left:59px;
					margin-right:3px;
					margin-bottom:12px;	
				}
			}
			.product-desc {
				display:none;	
			}
			
			.content_price {padding-bottom:9px; line-height:21px;}
			
			.old-price, .price, .price-percent-reduction {display:inline-block;}
			
			.product-flags {display:none;}
			
			.old-price { margin-right:5px;}
			
			.button-container {
				margin-bottom:14px;
																		@media (min-width: $screen-lg) { // min 1200px
																			display:none;
																		}
				
				.ajax_add_to_cart_button, span.button { margin-right:6px;}	
			}
			
			.functional-buttons {
				background:url(../img/functional-bt-shadow.png) repeat-x;
				padding:11px 0 5px;
																		@media (min-width: $screen-lg) { // min 1200px
																			display:none;
																		}
				div {
					width:50%;
					float:left;
					padding:3px 0 4px 0;
					
					a, label {
						font-weight:bold;
						color:#777676;
						cursor:pointer;
							&:hover { color:#000;}	
					}
					
					&.wishlist { 
						border-right:1px solid $base-border-color;
						a:before {
							display:inline-block;
							font-family:$font-icon;
							content:"";
							margin-right:3px;
		            }
		
		            a.checked:before {
		              content:"";  
		            }
																		@media (min-width: $screen-md) and (max-width: $screen-md-max) { // min 992px max 1199px
																			border-right:0;
																			
																			a:before {display:none;}
																		}
						
																		@media (min-width: $screen-xs) and (max-width: $screen-xs-max) { // min 480px max 767px
																			border-right:0;
																			
																			a:before {display:none;}
																		}
					}
					
					&.compare {
						a {
							&:before {
								content:"";
								display:inline-block;
								font-family:$font-icon;
								margin-right:3px;
																			@media (min-width: $screen-md) and (max-width: $screen-md-max) { // min 992px max 1199px
																				display:none;
																			}
								
																			@media (min-width: $screen-xs) and (max-width: $screen-xs-max) { // min 480px max 767px
																				display:none;
																			}
							}
							&.checked {
								
								&:before {
									content:"";
								}
							}	
						}
					}
				}
			}
		}
	@media (min-width: $screen-lg) { // min 1200px
		&.hovered {
			margin-bottom:-300px;
			padding-bottom:226px;
			
			.product-container {
				@include box-shadow(rgba(black, 0.17) 0 0 13px);
				position:relative;
				z-index:10;
				
				.content_price { display:none;}
				
				.product-image-container {
					.content_price {
						display:block;	
					}
					.quick-view {display:block;}
				}
				.functional-buttons, .button-container, .comments_note {display:block}
			}
		}
	}
	@media (min-width: $screen-md) { // min 991px
		&.first-in-line {clear:left;}
	}
	
	@media (min-width: $screen-xs) and (max-width: $screen-sm-max) { // min 480px max 991px
		&.first-item-of-tablet-line {clear:left;}
	}
	}
}
#blockpack {
	ul {
		>li {
			@media (min-width: $screen-lg) { // min 1200px
				&.last-line {
					border:none;
					padding-bottom:0;
					margin-bottom:0;
					
					&.hovered {
						margin-bottom:-320px;
						padding-bottom:250px;	
					}
				}
			}
			@media (min-width: $screen-xs) and (max-width: $screen-xs-max) { // min 480px max 767px
				&.first-item-of-tablet-line {clear:none;}
				&.first-item-of-mobile-line {clear:left;}
			}
		}
	}
}
/*******************************************************
			 Product list(List) Styles 
********************************************************/

ul.product_list.list {
	> li {
		
		.left-block {
																		@media (max-width: $screen-xs - 1) { // max 479px
																			width:100%;	
																		}
		}
		.product-container {
			border-top:1px solid $base-border-color;
			padding:30px 0 30px;	
		}
		
		.product-image-container {
			position:relative;
			border:1px solid $base-listing-border-color;
			padding:9px;
																		@media (max-width: $screen-xs - 1) { // max 479px
																			max-width:290px;
																			margin:0 auto;
																		}
			.content_price {
				display:none !important;	
			}
		}
		.product-flags {
			color:$base-text-color;
			margin:-5px 0 10px 0;
			
			.discount {
				color:#f13340;	
			}
		}
		h5 { padding-bottom:8px;}
		
		.product-desc { margin-bottom:15px;}
		
		.center-block {
																		@media (max-width: $screen-xs - 1) { // max 479px
																			width:100%;	
																		}	
			.comments_note {
				margin-bottom:12px;	
			}
		}
		
		.right-block {
			
			.right-block-content {
																		@media (min-width: $screen-md) { // min 991px
																			margin:0;
																			border-left:1px solid $base-border-color;
																			padding-left:15px;
																			padding-bottom:16px;
																		}
																		
																		@media (max-width: $screen-sm-max) { // max 991px
																			padding-top:20px;
																		}
																		
																		@media (max-width: $screen-xs - 1) { // max 479px
																			padding-top:5px;	
																		}
				.content_price {
					padding-bottom:10px;
																		@media (max-width: $screen-sm-max) { // max 991px
																			padding-top:13px;
																			padding-bottom:0;	
																		}
					
																		@media (max-width: $screen-xs - 1) { // max 479px
																			padding-top:0;
																			width:100%;
																		}
					span{
						display:inline-block;
						margin-top:-4px;
						margin-bottom:14px;
						
						&.old-price {
							margin-right:8px;
						}
					}
				}
				.button-container {
					overflow:hidden;
					padding-bottom:20px;
																		@media (max-width: $screen-xs - 1) { // max 479px
																			width:100%;
																		}
					.btn {
						margin-bottom:10px;
																		@media (min-width: $screen-md) { // min 991px
																			float:left;
																			clear:both;	
																		}
					}
				}
				.functional-buttons {
																		@media (min-width: $screen-md) { // min 991px
																			overflow:hidden;
																		}
																		@media (max-width: $screen-sm-max) { // max 991px
																			clear:both;
																			
																			> div {
																				float:left;
																				padding-top:0 !important;
																				padding-right:20px;
																			}
																		}
					
																		@media (max-width: $screen-xs - 1) { // max 479px
																			float:none;
																			display:inline-block;
																			
																			a, label {
																				i, &:before {display:none !important;}
																			}
																		}
					a {
							font-weight:bold;
							color:#777676;
							cursor:pointer;
					}
					.wishlist {
							a:before {
									content:"";
									font-family:$font-icon;
									width:30px;
									height:30px;
									font-size:15px;
									text-align:center;
									display:inline-block;
									background:#929292;
									color:$light-text-color;
									padding:7px 0 0 0;
									@include border-radius(100px);
									margin-right:3px;
									font-weight:normal;
									margin-right:7px;
							}
							a:hover {
									color:$base-text-color;
									
											&:before {
													background:$dark-background;
											}
							}
							a.checked {
									&:before {
											content:"";        
									}
							}
					}
					
					.compare {
						padding-top:10px;
						
						a {
							
							&:before {
								content:"";
								display:inline-block;
								font-family:$font-icon;
								width:30px;
								height:30px;
								font-size:15px;
								text-align:center;
								background:#929292;
								@include border-radius(100px);
								margin-right:3px;
								padding:6px 0 0 0;
								color:$light-text-color;
							}
							
							&:hover {
								color:$base-text-color;
								
								&:before {
									background:$dark-background;	
								}
							}
						}
						a.checked {
							&:before {
								background:$light-background;
								border:1px solid #929292;
								color:#929292;
								padding-top:5px;
							}
						}
					}
				}
			}
		}
		
		&:first-child {
			.product-container{}	
		}
		@media (min-width: $screen-lg) { // min 1200px
			&:hover {
				
				.product-image-container {	
					
					.quick-view {display:block;}
				}
			}
		}
		
		@media (max-width: $screen-xs - 1) {	// max 479px
			text-align:center;	
		}
	}
}

/*******************************************************
			 Product list(Index page) Styles 
********************************************************/

#index {
	ul.product_list.tab-pane {
		> li {
			padding-bottom:10px;
			margin-bottom:10px;
																		@media (min-width: $screen-lg) { // min 1200px
																			padding-bottom:35px;
																			margin-bottom:50px;
																		}
			
			@media (min-width: $screen-lg) { // min 1200px
				&.hovered {
					margin-bottom:-300px;
				}
			}
			.availability {display:none;}
			
			@media (min-width: $screen-lg) { // min 1200px
				&.last-line {
					border:none;
					padding-bottom:0;
					margin-bottom:0;
					
					&.hovered {
						margin-bottom:-300px;
						padding-bottom:235px;	
					}
				}
			}
			
			@media (min-width: $screen-xs) and (max-width: $screen-xs-max) { // min 480px max 767px
				&.first-item-of-tablet-line {clear:none;}
				&.first-item-of-mobile-line {clear:left;}
			}
		}
	}
}