/*  custom style for woocommerce product  */

.woocommerce-page{
	.woocommerce{
		ul.products{
			li.product{
				padding-bottom:20px;
			}
		}
	}
}

.woocommerce{
	margin-top:30px;
	#breadcrumbs{
		display:none;
	}
	p.woocommerce-result-count{
		float:none;
		text-align:right;
	}
	ul.products{
		li.product{
			text-align:center;
			border:1px solid #e8e8e8;
			padding:10px;
			transition:all 0.5s;
			span.onsale{
				background: none;
				color: #333;
				border-radius: 4px;
				border: 1px solid;
				padding: 0px 10px;
				font-size: 15px;
				min-height: auto;
				height: auto;
				min-width: auto;
				width: auto;
				line-height: 30px;
				top:15px;
				right:15px;
			}
			h2.woocommerce-loop-product__title{
				font-size:1.5em;
				color:#333;
			}
			span.price{
				font-size:18px;
				color:#333;

				ins{
					text-decoration:none;
				}
				ins, del{
					margin:0px 5px;
				}
			}
			.star-rating{
				margin:10px auto;
				position:absolute;
				top:10px;
				left:15px;
			}
			a.button, a.added_to_cart{
				opacity:0;
			}
			&:hover{
				a.button, a.added_to_cart{
					opacity:1;
					animation:animateslide .3s 0s;
				}
			}
		}
	}
	.single-product{
		span.onsale{
			background: none;
			color: #333;
			border-radius: 4px;
			border: 1px solid;
			padding: 0px 10px;
			font-size: 15px;
			min-height: auto;
			height: auto;
			min-width: auto;
			width: 60px;
			line-height: 30px;
			top:15px;
			left:15px;
		}
		input.qty{
			border:1px solid #e8e8e8;
			border-radius:0px;
			padding:8px 3px;
			width:5em;
		}
		.price{
			ins{
				text-decoration:none;
			}
			del, ins{
				margin:0px 5px;
			}
		}
		.woocommerce-review-link{
			pointer-events:none;
		}
		table.variations{
			margin-top:10px;
			tr{
				td{
					label{
						color:#333;
						font-size:15px;
						display:table;
					}
				}
			}
		}
		div.product div.images .flex-control-thumbs{
			margin-top:10px;

			li{
				width:24%;
				margin:0.5% .5%;
			}
		}
		.woocommerce-tabs.wc-tabs-wrapper{

			ul.wc-tabs{
				width:100%;
				list-style:none;
				margin-top:30px;
				border-color:#e8e8e8;
				margin-bottom:0;

				li{
					border-radius:0px;
					border-color:#e8e8e8;
					background:none;
					a{
						color:#333;
						font-size:16px;
						display:block;
						padding:10px;
					}
				}
				li.active{
					border-bottom-color:transparent;
					a{
						color:$primary-color;
						outline:none;
					}
				}
				&::before{
					border-color:#e8e8e8;
				}
			}
			.woocommerce-Tabs-panel{
				width:100%;
				box-shadow:none;
				border:1px solid #e8e8e8;
				border-top-color:transparent;
				padding:20px;
				border-radius:0px;

				ol.commentlist{
					width:60%;
					display:inline-table;
					list-style:none;
					padding:0;

					li{
						margin:30px 0px;
						.comment-body{
							line-height:20px;
						}
					}
				}
				.comment-respond#respond{
					width:38%;
					display:inline-table;

					.comment-form-comment{
						label{
							display:block;
						}
						textarea{
							width:100%;
							border:1px solid #e8e8e8;
							border-radius:4px;
							padding:10px;
							&:focus{
								border:2px solid $primary-color;
								outline:none;
							}
						}
					}
					p{
						label{
							display:block;
						}
						input{
							width:100%;
							border:1px solid #e8e8e8;
							padding:7px 10px;
							border-radius:4px;

							&:focus{
								border:2px solid $primary-color;
								outline:none;
							}
						}
						input#submit{
							width:auto;
							float:right;
							border:1px solid $primary-color;
							padding:10px 15px;
							background:$primary-color;
							color:#fff;
							display:inline-block;
							border-radius:4px;
							margin:10px 0px;

							&:hover, &:focus, &:active{
								background:darken($primary-color , 10%);
								border-color:darken($primary-color , 10%);
								text-decoration:none;
								color:#fff;
								outline:none;
							}
						}
					}
				}
				.navigation{
					display:none;
				}
			}
			.woocommerce-message{
				border-top-color:$primary-color;

				&::before{
					color:$primary-color;
				}
			}
		}
		.product_meta{
			span{
				display:block;
				margin:10px 0px;

				span{
					display:inline-block;
				}
			}
		}
	}
	nav.woocommerce-pagination{	
		ul.page-numbers{
			float:right;
			margin-bottom:10px;
			border:none;
			li{
				border:1px solid $primary-color;
				margin:0px 5px;
				span, a{
					padding:8px 10px;
					color:#fff;
					background:$primary-color;

					&:hover{
						background:$primary-color;
						color:#fff;
					}
				}
				span.page-numbers.current{
					background:none;
					color:$primary-color;
				}
			}
		}
	}
	form.woocommerce-cart-form{
		table.shop_table{
			border:none;
			th{
				width:20%;
				&:first-child{
					width:5%;
				}
			}
			td{
				border:none;
				padding:20px;
				border-bottom:1px solid #e8e8e8;
				font-size:15px;

				input.qty{
					border:1px solid #e8e8e8;
					border-radius:0px;
					padding:8px 3px;
					width:5em;
				}

				&.product-name{
					a{
						color:#333;
						font-size:16px;
						text-decoration:none;
					}
				}
			}
			td.product-thumbnail{
				img{
					width:60%;
				}
			}
			tr{
				&:last-child{
					td{
						border:none;
					}
					.coupon{
						input[type="text"]{
							border:1px solid #e8e8e8;
							border-radius:4px;
							padding:7px 10px;
							width:auto;
						}
					}
				}
			}
		}
	}
	.cart-collaterals{
		div.cart_totals{
			width:40%;
			table.shop_table{
				margin-top:25px;
				border:none;
				th, td{
					border:none;
					border-bottom:1px solid #f0f0f0;
					padding-bottom:15px;
				}
				tbody{
					th{
						background:#f1f1f1;
					}
					td{
						background:#f9f9f9;
					}
				}
			}
			.form-row{
				.input-text{
					border:1px solid #e8e8e8;
					border-radius:5px;
					padding:7px 10px;

					&:focus{	
						border:2px solid $primary-color;
					}
				}
				.select2-selection{
					border-color:#e8e8e8;
				}
			}
		}
	}
	.woocommerce-additional-fields{
		margin:10px 0px 30px;
	}
	.wc-proceed-to-checkout{
		margin:10px 0px;
		overflow:hidden;
		.button{
			float:right;
			width:100%;
			text-align:center;
			margin:10px 0px;
		}
	}
	form.checkout_coupon{
		width:50%;
	}
	form.checkout.woocommerce-checkout{
		width:100%;
		margin:10px 0px;
		.col2-set{
			width:45%;
			display:inline-block;
			float:left;
			margin-right:4%;

			.col-1, .col-2{
				width:100%;
			}
		}
		table.shop_table{
			border:none;
			width:80%;
			margin:20px auto;

			thead, tfoot{
				th, td{
					border:none;

					&:last-child{
						text-align:right;
					}
				}
			}
			tbody{
				td{
					border:none;

					&:last-child{
						text-align:right;
					}
				}
			}
		}
		h3#order_review_heading{
			width:50%;
			text-align:center;
			float:right;
			clear:right;
		}
		.woocommerce-checkout-review-order{
			width:45%;
			margin:20px 20px;
			display:inline-block;
			float:right;
			clear:right;
			background: #fff;
			border: 1px solid #e8e8e8;
			box-shadow: 0px 0px 8px 1px rgba(56, 56, 56, 0.05);
			border-radius: 10px;	

			#payment{
				background:none;
				width:80%;
				margin:20px auto;
				button#place_order{
					float:none;
					width:100%;
					margin:auto;
				}
				.payment_box{
					background:none;
					border:2px solid $primary-color;

					&:before{
						display:none;
					}
				}
			}
		}
	}
}

.woocommerce form.woocommerce-cart-form table.shop_table tr:last-child .coupon input[type="text"]:focus{
	border:2px solid $primary-color;
}

@keyframes animateslide{
	0%{transform:translateY(15px);}
	100%{transform:translateY(0);}
}

.container{
	.woocommerce{
		a.button, input.button, button.button, button.button.alt, a.button.alt{
			border:1px solid $primary-color;
			padding:10px 15px;
			background:$primary-color;
			color:#fff;
			display:inline-block;
			border-radius:4px;
			margin:0px 10px;

			&:hover, &:focus, &:active{
				background:darken($primary-color , 10%);
				border-color:darken($primary-color , 10%);
				text-decoration:none;
				color:#fff;
				outline:none;
			}
		}
		button.button.alt.disabled{
			background:lighten($primary-color , 5%);	

			&:hover{
				background:lighten($primary-color , 2%);
			}
		}
	}
	.woocommerce-message{
		border-top-color:$primary-color;

		&::before{
			color:$primary-color;
		}
	}

	.woocommerce-info{
		border-top-color:darken($primary-color , 15%);

		&::before{
			color:darken($primary-color , 15%);
		}

		a{
			color:darken($primary-color , 15%);
		}
	}
	.woocommerce-additional-fields{
		textarea{
			padding:15px;

			&:focus{
				border:2px solid $primary-color;
			}
		}
	}
	.woocommerce-account-fields{
		label.woocommerce-form__label-for-checkbox{
			input[type="checkbox"]{
				width:20px;
				height:20px;
				vertical-align:middle;
			}
			span{
				margin-left:25px;
			}
		}
	}
	.woocommerce-shipping-fields{
		padding-left:25px;
	}
}


@media only screen and (max-width:768px){
	.woocommerce{
		.single-product{
			.woocommerce-tabs.wc-tabs-wrapper{
				ul.wc-tabs{
					width:100%;
				}	
				.woocommerce-Tabs-panel{
					width:100%;
					.comment-respond#respond{
						width:100%;
					}
					ol.commentlist{
						width:100%;
					}
				}
			}
		}
		form.checkout.woocommerce-checkout{
			.col2-set, h3#order_review_heading, .woocommerce-checkout-review-order{
				width:100%;
				margin:20px auto;
			}
		}
	}
}