/**
 * woocommerce-theme.scss
 * Governs the general look and feel of WooCommerce sections of stores using themes that do not
 * integrate with WooCommerce specifically.
 *
 */

/**
 * Woo-elements
 * Cart page
 *
 */

.return-to-shop {
	padding-bottom: 40px;
}

.woocommerce {
	.wc-proceed-to-checkout {
		padding: 2.2em 0 1em;
		text-align: right;
	}

	a.remove {
		font-weight: 400;
		margin-left: 10px;
		font-size: 0;
		line-height: 1;

		&:hover {
			background: transparent;
		}

		&:before {
			content: '\e14c';
			font-family: 'Material Icons';
			font-size: 21px;
		}
	}

	table.shop_table {
		width: 100%;
		margin: 61px 0 30px;
		border: 1px solid $wooborder_color;
		border-collapse: collapse;
		@include media-breakpoint-up(md) {
			border: none;

			&.customer_details {
				border: 1px solid $wooborder_color;
				td {
					border-bottom: 1px solid $wooborder_color;
				}
			}
		}
		@media (max-width: 768px) {
			.product-thumbnail {
				display: none;
			}
		}

		thead {
			border-bottom: 1px solid $wooborder_color;

			th {
				padding: 20px 10px 21px;
				border: none;
				font-weight: 500;
				text-align: center;
				text-transform: uppercase;
				font-size: 12px;
				&.product-name {
					text-align: left;
				}

				@include media-breakpoint-up(lg) {
					padding: 30px 10px 32px;
				}
			}
		}

		tbody {
			tr {
				td {
					border: none;
					padding: 20px 10px 28px;
					vertical-align: middle;
					@include media-breakpoint-up(lg) {
						padding: 50px 10px 58px;
					}

					&.product-remove {
						width: 50px;
						padding: 0;
						position: relative;
						a.remove {
							position: absolute;
							left: 5px;
							top: 20%;
							@include media-breakpoint-up(md) {
								left: -15px;
								top: 41%;
							}
							&:before {
								@include linear-icon();
								content: "\e92a";
								font-size: 30px;
							}
						}
					}

					&.product-price,
					&.product-quantity {
						border-right: none;
						@include media-breakpoint-up(md) {
							border-right: 1px solid $wooborder_color;
						}
					}

					&.product-remove,
					&.product-thumbnail,
					&.product-name,
					&.product-subtotal,
					&.product-quantity,
					&.product-total,
					&.product-price {
						border-bottom: 1px solid $wooborder_color;
					}

					&.product-subtotal,
					&.product-quantity,
					&.product-total,
					&.product-price {
						text-align: center;
						border-bottom: 1px solid $wooborder_color;

						.amount {
							@include font-size(1.125);
							@include media-breakpoint-up(lg) {
								@include font-size(1.5);
							}
						}
					}

					&.product-subtotal,
					&.product-quantity,
					&.product-price {
						@include media-breakpoint-up(xl, $grid-breakpoints-old) {
							width: 232px;
						}

						&:before {
							margin-top: 0;
							@include media-breakpoint-up(md) {
								margin-top: 9px;
							}
						}
					}

					&.product-thumbnail {
						min-width: 161px;

						a {
							display: block;
						}

						img {
							display: block;
							width: auto;
							max-width: 100%;
						}
					}

					&.product-name {
						border-right: none;
						padding-left: 25px;
						@include media-breakpoint-up(md) {
							border-right: 1px solid $wooborder_color;
						}

						a {
							text-decoration: none;
						}

						h5 {
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						dl.variation {
							margin: 5px 0 0;

							dt {
								margin: 0 5px 0 0;
								padding: 0;
								font: inherit;
								font-size: 12px;
								font-style: italic;
							}

							dd {
								margin: 0;
								padding: 0;
								text-transform: lowercase;
								font-size: 12px;
								font-style: italic;

								p {
									margin: 0;
								}
							}
						}
					}

					input[type="number"] {
						width: 80px;
						padding: 7px;

						@include media-breakpoint-up(lg) {
							width: 115px;
							padding: 14px;
						}
					}

					&.actions {
						padding: 20px 0;
						border-bottom: 1px solid $wooborder_color;
						@include media-breakpoint-up(lg) {
							padding: 50px 0 28px;
						}

						.coupon {
							input.input-text#coupon_code {
								width: 100%;
								padding: 19px 20px 21px 55px;
								margin-bottom: 10px;
								border-color: lighten(desaturate(adjust_hue($wooborder_color, -240), 53.333333333333364%), 3.1372549019607874%);
								@include media-breakpoint-up(md) {
									width: auto;
									margin-right: 12px;
								}
							}
						}
					}
				}

				&.cart_item,
				&.order_item {
					background: none;

					td:before {
						margin-right: 15px;
					}
				}

				&.cart-subtotal,
				&.order-total,
				&.tax-total,
				&.tax-rate{
					background: none;
					border: none;
					display: block;
					text-align: right;
					line-height: 1.2em;

					th,
					td {
						display: inline;
						padding: 0;
					}

					td:before {
						display: none;
					}
				}
				&.cart-subtotal,
				&.tax-total,
				&.tax-rate {
					margin-bottom: 7px;

					th,
					td,
					.amount {
						font-size: 18px;
						line-height: 24px;
						font-weight: 300;
					}
				}
				&.order-total {
					th,
					td,
					.amount {
						font-size: 24px;
						line-height: 24px;
						font-weight: 300;
					}
				}
			}

			th {
				font-weight: 400;
				font-size: 18px;
				line-height: 24px;
				text-align: right;
			}
		}

		tfoot {

			th,
			td {
				border: none;
				padding: 10px;
				font-weight: normal;
			}

			tr {
				&:first-child {
					th,
					td {
						padding-top: 30px;
					}
				}
			}
		}

		&.woocommerce-checkout-review-order-table {
			margin-top: 32px;
			margin-bottom: 36px;
			@include media-breakpoint-up(md) {
				margin-bottom: 76px;
			}

			thead {
				tr {
					th,
					td {
						padding: 11px 10px 15px;
						@include media-breakpoint-up(md) {
							padding: 21px 0 30px;
						}
					}
				}
			}

			tbody {
				tr {
					th,
					td {
						padding: 21px 10px 27px;
						@include media-breakpoint-up(md) {
							padding: 31px 0 37px;
						}
					}
				}
			}
			th,
			td {
				padding: 0;
				&.product-total {
					text-align: right;
				}
			}

			tfoot {
				padding-top: 20px;
				tr {
					th {
						> span {
							&:after {
								content: ":";
							}
						}
					}

					&.cart-subtotal,
					&.order-total,
					&.tax-total,
					&.tax-rate{
						background: none;
						border: none;
						text-align: right;
						line-height: 1.2em;
						th, td {
							border: none;
						}
						td {
							padding-right: 10px;
						}
					}

					&.tax-total,
					&.tax-rate {
						th, td {
							padding-top: 10px;
						}
						th, td, .amount {
							font-size: 18px;
							line-height: 24px;
							font-weight: 300;
						}
					}

					&.cart-subtotal {
						th, td {
							padding-top: 25px;
							@include media-breakpoint-up(md) {
								padding-top: 45px;
							}
						}
						th, td, .amount {
							font-size: 18px;
							line-height: 24px;
							font-weight: 300;
						}
					}
					&.order-total {
						th, td {
							padding-top: 17px;
							padding-bottom: 20px;
							@include media-breakpoint-up(md) {
								padding-bottom: 0;
							}
						}
						th, td, .amount {
							font-size: 24px;
							line-height: 24px;
							font-weight: 300;
						}
					}
				}
			}
		}

		@media (max-width: 768px) {
			&.shop_table_responsive {
				tbody tr td {
					padding: 15px 10px;

					&:before {
						margin: 0;
						@include font-size(.875);
					}

					&:last-child {
						border-bottom: none;
					}

					&.product-remove {
						width: 100%;
						padding-top: 15px;
						border: none;

						a {
							margin-left: 0;
						}
					}

					&.product-quantity {
						&:before {
							margin-top: 8px;
						}
					}

					&.product-name a {
						width: 50%;
						margin-left: 20px;
						display: inline-block;
					}
				}
			}
		}
	}

	.cart-collaterals {
		padding-top: 8px;
		padding-bottom: 4em;

		div.cart_totals {
			table {
				margin: 0;
				border: none;

				tbody {
					tr,
					td,
					td,
					th {
						border: none;
						padding: 5px 0 5px;
						text-transform: none;
					}

					td {
						text-align: right;
					}
				}

				tr:nth-child(2n) td {
					background: none;
				}
			}

			.checkout-button {
				@include media-breakpoint-up(lg) {
					padding: 24px 39px 23px;
				}
			}
		}

		.cross-sells {
			width: 100%;
			padding-top: 50px;
			float: none;
			clear: both;
			text-align: center;
		}
	}
}

/**
 * Woo-elements
 * Checkout page
 *
 */
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
	border: none;
	padding: 0;
	margin: 0;
	border-radius: 0;
}

.woocommerce-checkout {
	.entry-content {
		padding-top: 74px;
	}

	.woocommerce-info {
		border: none;
		border-top: 1px solid $wooborder_color;
		background: none;
		padding: 58px 0 0 0 !important;
		margin-bottom: .95em !important;
		font-style: normal;

		&:first-child {
			border-top: none;
			padding-top: 0 !important;
			margin-top: 0;
		}

		> a {
			font-size: 14px;
			margin-left: 8px;
		}

		&:before {
			display: none;
		}
	}
}

//Styles for Woocommerce Country Select Menu
.select2-drop-active {
	border: 1px solid $color__border-input;

	.select2-results {
		font-size: 14px;
		line-height: 20px;
		font-style: italic;
	}
}

#tm_builder_outer_content .tm_pb_module.tm_pb_widget_area .widget ul.swiper-wrapper li {
	margin-top: 0;
}

.woocommerce {
	//Styles for Woocommerce Forms
	form .form-row.woocommerce-invalid .select2-container,
	form .form-row.woocommerce-invalid input.input-text,
	.form .form-row.woocommerce-invalid select {
		border-color: $woo_pink;
	}

	form .form-row.woocommerce-validated .select2-container,
	form .form-row.woocommerce-validated input.input-text,
	form .form-row.woocommerce-validated select {
		border-color: $woo_green;
	}

	form label {
		.woocommerce-cart &,
		.woocommerce-checkout & {
			font-size: 12px;
			padding-left: 10px;
		}
	}

	form.woocommerce-checkout {
		padding-top: 57px;
		margin-top: 25px;
		border-top: 1px solid $wooborder_color;
	}

	form {
		.form-row {
			max-width: 420px;
			padding: 0;
			margin-bottom: 15px;

			&.validate-postcode {
				margin-bottom: 25px;
			}

			&.create-account {
				input {
					width: 25px;
					height: 25px;
					margin-right: 5px;
					display: inline-block;
					top: 6px;
					position: relative;
					cursor: pointer;
				}

				label.checkbox {
					display: inline-block;
					cursor: pointer;
					font-size: 14px;
					line-height: 25px;
					position: relative;
					border: none;
					top: 6px;
				}
			}

			.select2-container.country_to_state {
				-webkit-appearance: none;
				border: none;
				@include border-radius;
				@include font-size(14/16);
				line-height: 1.2143;
				font-style: italic;
				transition: .3s;

				.select2-choice {
					padding: $input__indents_y $input__indents_x;
					border: 1px solid $color__border-input;
					background-color: $color__background-input;
					box-shadow: none;

					.select2-arrow b {
						&:after {
							@include linear-icon();
							content: "\e93a";
							border: none;
							font-size: 16px;
							line-height: 23px;
							margin: -12px 0 0 -24px;
						}
					}
				}
			}
		}

		.form-row-first,
		.form-row-last {
			float: none;
			width: auto;
		}

		&.login {
			padding-bottom: 0.8em;
			margin-bottom: 1em;

			.form-row-last {
				margin-bottom: 39px;
			}

			.form-row {
				label.inline {
					display: inline-block;
					position: relative;
					cursor: pointer;
					font-size: 14px;
					line-height: 25px;
					padding-left: 30px;
					margin: 16px 0 0 28px;

					input {
						width: 25px;
						height: 25px;
						display: block;
						position: absolute;
						left: 0;
						top: 0;
						cursor: pointer;
						border: none;
						outline: 0;
						background: $woo_black;
					}
				}
			}

			.lost_password {
				padding-top: 25px;
				font-size: 14px;
				line-height: 20px;
			}
		}

		&.checkout_coupon {
			padding: 0.5em 0 2em;
			margin-bottom: 1.2em;
			@include flexbox();
			@include flex-direction(row);
			@include flex-wrap(wrap);
			@include media-breakpoint-up(md) {
				padding: 0.8em 0 2em;
			}

			.form-row-first {
				@include flex(1 1 100%);
				min-width: 185px;
				@include media-breakpoint-up(sm) {
					@include flex(5 1 185px);
				}

				input {
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
					width: 100%;
					max-width: 100%;
					min-width: 50px;
				}
			}

			.form-row-last {
				@include flex(0 1 auto);
				@include media-breakpoint-up(sm) {
					margin-left: 10px;
				}
			}
		}
	}

	.entry-content table.shop_table,
	table.shop_table {
		&.order_details,
		&.customer_details {
			margin: 10px 0 50px;

			thead tr th.product-total {
				text-align: right;
			}

			tbody, tfoot {
				tr {
					th,
					td {
						padding: 10px;
						text-align: right;
					}
				}
			}
		}

		&.order_details,
		&.customer_details {
			tfoot {
				tr {
					&:first-child {
						th, td {
							padding-top: 20px;

							.amount {
								font-size: 18px;
								line-height: 24px;
								font-weight: 300;
							}
						}
					}
					th {
						font-weight: 300;
						padding: 0;
					}

					td {
						padding: 0;

						.amount {
							font-size: 24px;
							line-height: 24px;
							font-weight: 300;
						}
					}
				}
			}
		}
	}
}

.woocommerce, .woocommerce-page {
	.col2-set {
		@include flexbox();
		@include flex-direction(row);
		@include flex-wrap(wrap);
		@include justify-content(flex-start);
		@include align-content(flex-start);
		@include align-items(flex-start);
		border-bottom: 1px solid $wooborder_color;
		padding-bottom: 59px;
		margin-bottom: 57px;

		.col-1, .col-2 {
			width: auto;
		}

		.col-1 {
			float: none;
			@include flex(0 1 100%);
			@include media-breakpoint-up(md) {
				@include flex(0 1 48%);
			}
			@include media-breakpoint-up(lg) {
				@include flex(0 1 420px);
			}
		}

		.col-2 {
			float: none;
			@include flex(0 1 100%);
			padding-top: 30px;
			@include media-breakpoint-up(lg) {
				@include flex(0 1 420px);
			}
			@include media-breakpoint-up(md) {
				@include flex(1 1 auto);
				padding: 0 0 0 50px;
			}

			.form-row {
				width: 100%;
				max-width: none;
			}
		}
	}
}

.woocommerce-checkout-payment#payment {
	border-top: 1px solid $wooborder_color;
	padding: 27px 0 40px 0;
	@include media-breakpoint-up(md) {
		padding: 57px 0 40px 0;
	}

	ul.payment_methods {
		padding: 0;
		border: none;
		li {
			label {
				padding: 0 0 10px 0;
				@include media-breakpoint-up(md) {
					padding: 0 0 27px 0;
				}
			}
		}
	}

	div.form-row {
		padding: 0;
		max-width: none;

		&.place-order {
			padding-top: 40px;
		}
	}
}

#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
	border-radius: 0;

	div.payment_box {
		font-size: 14px;
		line-height: 20px;
		padding: 7px 16px;
		border-radius: 2px;
		font-style: italic;
		background: $woo_payment_box_bg;
		margin-bottom: 1em;
		@include media-breakpoint-up(md) {
			margin-bottom: 3em;
		}

		&:before {
			display: none;
		}
	}
}

/**
 * Woo-elements
 * Order details page
 *
 */

.woocommerce-checkout .woocommerce-thankyou-order-details {
	background: $woo_info_bg;
	padding: 15px;
	position: relative;

	li {
		strong {
			font-weight: 500;
			display: block;
			padding-top: 10px;

			.amount {
				font-size: 24px;
				line-height: 1em;
			}
		}

		&.method {
			&:after {
				position: absolute;
				right: 1em;
				top: .7em;
				@include linear-icon();
				content: "\e88a";
				font-size: 30px;
			}
		}
	}
}

/**
 * Woo-elements
 * Account page
 *
 */
.woocommerce-account.logged-in {
	.entry-content > .woocommerce {
		@include flexbox;
		@include flex-direction(column);

		.woocommerce-MyAccount-navigation,
		.woocommerce-MyAccount-content {
			@include flex(0 1 100%);
			width: auto;
			float: none;
			padding: 20px;
		}

		.woocommerce-MyAccount-navigation {
			text-transform: uppercase;

			ul,
			li:last-child {
				margin-bottom: 0;
			}
		}

		.woocommerce-MyAccount-content {
			fieldset {
				border: 2px solid $color__background-hr;
				margin-bottom: 25px;
			}

			table.shop_table {
				thead th {
					padding: 20px 10px;
					text-align: left;
					text-transform: uppercase;
				}

				tbody tr {
					td {
						padding: 10px;

						&:before {
							margin-right: 10px;
						}
					}

					+ tr td {
						border-top: 2px solid $color__background-hr;
					}
				}
			}

			@include media-breakpoint-down(lg) {
				.woocommerce-info {
					&:before {
						display: none;
					}
				}
			}

			@include media-breakpoint-down(sm) {
				.woocommerce-info {
					padding: 2em !important;

					a.button {
						margin: 0 500px 15px 0;
						float: none;
					}
				}
			}
		}

		@include media-breakpoint-up(lg) {
			@include flex-direction(row);

			.woocommerce-MyAccount-navigation {
				@include flex(1 0 30%);
				max-width: 30%;
				padding: 30px 40px;
			}

			.woocommerce-MyAccount-content {
				@include flex(0 1 70%);
				max-width: 70%;
				padding: 30px 40px;
			}
		}
	}
}