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

.woocommerce {
	#page-wrapper {
		#main #primary #main {
			padding: 0;
		}

		.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-right: 5px;
					margin-top: 0;
					max-width: 60px;
					padding: 11px 12px 10px;
					text-align: left;
					width: auto;
				}
			}

			.variations_form {

				td {
					padding-bottom: 10px;
				}

				select {
					padding-top: 5px;
					padding-bottom: 5px;
				}
			}

			.variations_form,
			.grouped_form {

				.single_variation_wrap,
				.single_add_to_cart_button {
					margin-right: auto;
				}
			}
		}

		.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%));
		}

	}

	a.added_to_cart {
		margin-left: 10px;
	}

	// Cart.
	.shop_table {

		.quantity .qty {
			width: 4.5em;
		}

		.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 {
				.clearfix();
				margin-bottom: 10px;

				a {
					text-decoration: none;
				}
			}

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

			.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;
		}

		button {
			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-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;
			}
		}
	}
}

/* WooCommerce Blocks */
.entry-content ul .wc-block-grid__product {
	margin-left: 0;
}

/* WooCommerce Mini Cart */
.site-header .shopping-cart {
	position: absolute;
	right: 0;
	top: 0;

	&:hover .shopping-cart-dropdown {
		display: block;
	}

	ul {
		box-shadow: none !important;
	}

	li {
		font-size: initial;
		text-transform: none;

		&:first-of-type {
			padding: 0;
		}

		&:hover {

			> a {
				background: none;
			}

			[class^="fa fa-"] {
				color: #fff;
			}
		}
	}

	&,
	& li,
	.shopping-cart-link {
		align-items: center;
		display: flex;
		height: 100%;
		justify-content: center;
	}

	.shopping-cart-link {
		max-width: 59px;
	}

	&-text {
		display: none;
	}

	&-link {

		.shopping-cart-icon-wrapper {
			position: relative;
		}

		[class^="fa fa-"] {
			color: #e2e2e2;
			font-size: 1.05em;
			line-height: normal;
			margin-right: 0;
			transition: .3s;
		}

		.shopping-cart-count {
			background: #00bcff;
			border-radius: 50%;
			color: #fff;
			font-size: 8px;
			height: 16px;
			line-height: 16px;
			min-width: 16px;
			position: absolute;
			right: -12px;
			text-align: center;
			top: -9px;
			transition: .3s;
		}
	}

	&-dropdown {
		background: #343538;
		box-shadow: 0 0 12px rgba(0, 0, 0, 0.16);
		color: #e2e2e2;
		display: none;
		left: auto;
		right: 0;
		width: 300px;
		z-index: 99999;

		.widget {
			color: #fff;
			margin: 20px;
			padding: 0;
			max-height: 70vh;
			overflow-y: auto;

			li {
				overflow: initial;

				&:hover > a {
					background: transparent;
				}
			}

			.product_list_widget {
				background: transparent;
				margin: 0;
				opacity: 1;
				padding: 0;
				position: static;
				visibility: visible;

				li.mini_cart_item {
					color: #e2e2e2;
					font-size: 13px;
					margin: 0 0 20px;
					padding: 0;
					position: relative;

					img {
						margin: 0;
						margin-right: 10px;
						width: 70px;
					}

					a {
						font-weight: bold;
						font-weight: 600;
						padding: 0;
						width: auto;

						&.remove {
							color: #e2e2e2 !important;
							left: initial;
							position: absolute;
							right: 0;
							top: 0;

							&:hover {
								color: #fff !important;
							}
						}
					}

					.quantity {
						display: block;
						margin-top: 12px;
					}
				}
			}

			.widget_shopping_cart .cart_list .mini_cart_item a {
				margin: 0;
			}

			.blockOverlay[style] {
				background-color: transparent !important;
			}

			.woocommerce-mini-cart__empty-message {
				color: #e2e2e2;
				display: block;
				font-size: 13px;
				font-weight: 600;
				margin: 0;
				padding: 0;
				text-transform: none;
			}

			.total {
				border-color: #b9b9b9;
				color: #e2e2e2;
				font-size: 13px;
				margin: 0 0 17px;
				padding-top: 20px;
			}

			.woocommerce-mini-cart__buttons {
				float: none;
				margin: 0;
				padding: 0;
				text-align: center;
				width: 100%;

				a {
					display: inline-block;
					margin: 0;
					transition: none;

					&:first-of-type {
						margin-right: 10px;
					}
				}
			}
		}
	}

	.mega-menu-primary & {
		right: 16px;

		// Fix drop down position.
		.shopping-cart-dropdown {
			position: absolute;
			right: -16px;
			top: 100%;
		}
	}
}