/* This will override anything from WooCommerce core CSS */
@import "../mixins";

.woocommerce {
	#page-wrapper {
		.button {
			.bordered(#d2d2d2, #c3c3c3, #9f9f9f, #c3c3c3);
			.gradient(#ffffff, #dfdfdf, #ffffff);
			.rounded(3px);
			color: #646464;

			.box-shadow(~"0 1px 1px rgba(0,0,0,0.125), inset 0 1px 0 rgba(255, 255, 255, 0.5)");
			width: auto;
			text-decoration: none;

			// Improves usability and consistency of cursor style between image-type 'input' and others.
			cursor: pointer;

			line-height: 1;
			text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
		}

		h1.page-title {
			color: #3b3b3b;
			font-size: 20px;
			font-weight: 500;
			line-height: 1.35em;
			margin-bottom: 1em;

			a {
				color: inherit;
				text-decoration: none;
			}
		}

		.product {
			h1.entry-title{
				font-size: 22px;
				color: #3b3b3b;
				margin-bottom: 20px;

				a {
					color: inherit;
					text-decoration: none;
					font-weight: bold;
					font-size: 20px;
				}
			}

			.woocommerce-product-gallery {
				.flex-control-thumbs {
					margin-top: 15px;
					
						li {
						margin: 0 2.5% 2.5% 0;
						width: 23.125%;
						
						&:nth-child(4n) {
							margin-right: 0;
						}
					}
				}
			}	

			.cart {
				.qty {
					margin-top: 5px;
					margin-right: 5px;
				}
			}
		}

		.upsells.products,
		.related.products{
			h2 {
				font-size: 14px;
				font-weight: 500;
				margin-bottom: 1em;
			}

			ul.products li.product {
				max-width: 150px;
				margin: 0 2% 30px 0;
			}
		}

		.woocommerce-message {
			border-top-color: #00bcff;

			a.button {
				margin-top: -5px;
				margin-bottom: -5px;
			}
		}

		.woocommerce-breadcrumb {
			font-weight: 500;
			color: #5e5e5e;
			margin-bottom: 20px;
		}

		#reply-title {
			display: block;
			margin-bottom: 1em;
			border-bottom: none;
		}

	}

	// The more generic WooCommerce elements.
	a.remove {
		padding: 2px;
		line-height: 0.85em;
	}

	a.button,
	.checkout-button,
	input.button,
	.button.alt{
		.vantage-button();
	}

	.button.alt {
		font-size: 1em;
		text-shadow: none;

		.bordered(#0086c5, #007ebd, #0077b4, #007ebd);
		.gradient(#00bcff, #00aaeb, #00bcff);

		&:hover,
		&:active,
		&:focus,
		&.disabled,
		&:disabled,
		&:disabled[disabled],
		&.disabled:hover,
		&:disabled:hover,
		&:disabled[disabled]:hover {
			.bordered( lighten(#0086c5, 3%), lighten(#007ebd, 3%), lighten(#0077b4, 3%), lighten(#007ebd, 3%));
			.gradient( lighten(#00bcff, 3%), lighten(#00aaeb, 3%), lighten(#00bcff, 3%));
		}

	}

	.shop_table .actions .button {
		padding-top: 7px;
		padding-bottom: 7px;
	}


	td.product-name {
		dl.variation {
			margin-bottom: 0.5em;

			dt {
				line-height: 1em;
				margin-right: 0.5em;
			}
			dd {
				line-height: 1em;
				margin: 0;

				p {
					margin-top: 0;
				}
			}

			&:last-child {
				margin-bottom: 0;
			}
		}
	}
}

.woocommerce-page {
	#container {
		float: left;
		width: 71.287%;
	}

	&.no-sidebar {
		#container {
			float: none;
			width: auto;
		}
	}

	&.sidebar-position-left #container {
		float: right;
	}

	&.sidebar-position-none #container {
		width: 100%;
	}

}

@media (max-width:680px) {
	body.responsive.woocommerce-page {
		#container {
			float: none;
			width: auto;
		}

		.product-thumbnail {
			display: none;
		}

		.cart_totals  {
			width: 100%;
			float: none;
		}
	}

}

@media (max-width:480px) {
	body.responsive.woocommerce-page {

		#container ul.products li.product {
			width: 240px;
			float:none;
			margin-right: auto;
			margin-left: auto;
		}

		#content div.product div.images,
		#content div.product div.summary {
			float: none;
			width: auto;
		}


		table.shop_table {
			td,th {
				padding-left: 3px;
				padding-right: 3px;
			}
		}

		#content table.cart .actions {
			.coupon {
				float: none;

				#coupon_code {
					margin-bottom: 6px;
				}

				input {
					float: none;
					display: block;
					width: 100%;
				}
			}

			> input {
				float: none;
				display: block;
				width: 100%;
				margin-bottom: 6px;

				&.checkout-button {
					margin-bottom: 0;
				}
			}
		}

		.col2-set {
			.col-1, .col-2  {
				display: block;
				float: none;
				width: auto;
			}
		}

	}
}


.widget.woocommerce {

	.clearfix();

	.product_list_widget {
		li {
			display: block;
			width: auto;
			text-align: left;
			padding-left: 45px;
			margin-bottom: 10px;

			a.remove {
				top: 3px;
			}

			img {
				float: left;
				margin-left: -45px;
				width: 55px;
				margin-right: 8px;
			}

			.quantity {
				.amount {
					display: inline;
				}
			}

			dl.variation {
				padding: 0;
				border: none;
				display: block;
				line-height: 1em;
				margin-top: 0.5em;

				dt {
					clear: none;
				}

				dd {
					padding: 0;
					margin: 0;
				}
			}
		}
	}

	&.widget_shopping_cart {
		.product_list_widget li{
			padding-left: 75px;
		}

		.cart_list {

			.mini_cart_item {
				margin-bottom: 10px;
				.clearfix();

				a {
					text-decoration: none;
				}
			}

			.mini_cart_img {
				display: inline-block;
				width: 55px;
				margin-right: 8px;
				float: left;
			}

			.mini_cart_details {
				margin-left: 65px;

				.mini_cart_product {
					margin-bottom: 5px;
				}

				.mini_cart_cost {
					margin-bottom: 0;
				}
			}
		}
	}

	&.widget_product_search {
		label{
			display: none;
		}

		input[type="search"] {
			padding: 5px;
			display: block;
			outline: none;
			width: 100%;
			border-radius: 3px;
			border: 1px solid #ccc;
		}

		input[type="submit"] {
			display: none;
		}
	}

	.total {
		border-top: 1px solid #e8e8e8;
		padding-top: 1em;
		margin-top: 1em;
		margin-bottom: 1em;
		text-align: right;
	}

	.buttons {
		float: right;
		display: inline-block;
	}

	.button {
		padding-top: 7px;
		padding-bottom: 7px;
	}
}

/* Page Layouts */
.woocommerce-page {
	&.woocommerce-cart,
	&.woocommerce-checkout {
		#primary {
			float: left;
			width: 71.287%;
		}

		&.no-sidebar {
			#primary {
				float: none;
				width: auto;
			}
		}

		&.sidebar-position-left #primary {
			float: right;
		}

		&.sidebar-position-none #primary {
			width: 100%;
		}
	}

	&.woocommerce-checkout {
		#ship-to-different-address-checkbox {
			margin: 3px 10px 0 0 ;
			float: left;
		}
	}
	
	&.post-type-archive-product {
		&.page-layout-no-sidebar,
		&.page-layout-full-width {
			#container {
				float: none;
				width: auto;
			}
		}
	}

}
