.woocommerce-cart {

	.page-title {
		@media #{$medium-up} {
			margin-bottom: 65px;
		}
	}

	.entry-content .woocommerce {
		max-width: 1275px;
		position: relative;
		margin: 0 auto;
	}

	.woocommerce-cart-form {
		width: 60%;
		float: left;
		margin-bottom: 100px;

		@media #{$large-down} {
			width: 100%;
			float: none;
			margin-bottom: 60px;
		}

		.shop_table.cart {
			border-collapse: collapse;
			margin-top: 0;

			thead {
				display: none;
			}
			tbody {
				tr {
					border-bottom: 1px solid;
					display: block;
					width: 100%;

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

					&:first-child {
						td {
							padding-top: 0;
						}
					}

					td {
						border: 0;

						&.product-remove {
							width: 5%;
							padding: 0;

							@media #{$xmedium-down} {
								padding: 35px 0 0 0;
								width: 100%;
							}

							> a {
								font-size: 0;
								width: auto;
								height: auto;

								&:after {
									content: "\e912";
									font-family: 'Shopkeeper-Icon-Font';
									font-size: 16px;
									font-weight: normal;
									display: inline-block;
									transform: rotate(45deg);
								}
							}
						}

						&.product-thumbnail {
							width: 20%;

							@media #{$xmedium-down} {
								display: block !important;
								width: 100%;
							    padding: 15px 0 35px 0;
								text-align: center !important;

								&:before {
									content: none;
								}

								img {
									width: 50% !important;
								}
							}

							img {
								width: 100%;
							}
						}

						&.product-name {
							width: 30%;

							@media #{$xmedium-down} {
								padding: 15px 0;
								width: 100%;
							}

							dl.variation {

								dt {
									font-size: 13px;
									padding: 0;
									margin-top: 3px;
									margin-right: 5px;
									font-weight: normal;
									text-transform: uppercase;
								}

								dd p {
									font-size: 13px;
									margin-top: 3px;
								}
							}
						}

						&.product-price {
							width: 15%;

							@media #{$xmedium-down} {
								padding: 15px 0;
								width: 100%;
							}

							.amount {
								font-weight: bold;
							}
						}

						&.product-quantity {
							width: 15%;

							@media #{$xmedium-down} {
								padding: 15px 0;
								width: 100%;

								.quantity.custom {
									justify-content: flex-end;
								}
							}

							.quantity.custom {
								margin: 0;
							}

							.quantity.default {
								margin: 0;
							    text-align: right;
							    width: fit-content;
							    display: inline-block;
							}
						}

						&.product-subtotal {
							width: 15%;

							@media #{$xmedium-down} {
								padding: 15px 0 35px 0;
								width: 100%;
							}

							@media #{$large-down} {
								text-align: right;
							}
						}

						&.actions {
							padding: 40px 0 0;
							width: 100%;
							display: block;
							position: relative;

							.coupon {
								display: flex;
								width: 100%;
								border-bottom: 1px solid;
							    padding: 0 calc( 5% + 15px ) 40px calc( 5% + 15px ) !important;
								position: relative;

								@media #{$xmedium-down} {
									padding: 0 0 40px 0 !important;
								}

								&:before {
									content: "\e909" !important;
									font-family: 'Shopkeeper-Icon-Font';
									position: absolute;
									left: calc( 5% + 15px );
									top: 13px;
									font-size: 24px;
									width: 24px;
									height: 24px;

									@media #{$xmedium-down} {
										left: 0;
									}
								}

								input#coupon_code {
									flex: 1;
									padding: 20px 20px 20px 42px;
									background-color: transparent;
									border: 0;
									height: 50px;
									display: block;
									margin-right: 25px;

									&::-webkit-input-placeholder {
										font-weight: bold;
									}

									&::-moz-placeholder {
										font-weight: bold;
									}

									&:-ms-input-placeholder {
										font-weight: bold;
									}
								}

								button[name="apply_coupon"] {
									flex: 1;
									padding: 0!important;
									background: transparent;
									height: auto;
									float: none;
									transition: all 0.3s;
									min-width: fit-content;
									max-width: fit-content;
								}
							}

							.button[name="update_cart"] {
								background: none !important;
								width: 100%;
								text-align: center;
								padding: 30px 0 0 !important;
								position: relative;
								visibility: visible;
								opacity: 1;
								transition: all .3s ease;

								@media #{$xmedium-down} {
									padding: 40px 0 0 !important;
									text-align: center;
								}

								&:disabled {
									visibility: hidden;
									opacity: 0;
								}

								&:before {
									content: "\e90f";
									font-family: 'Shopkeeper-Icon-Font';
									font-size: 19px;
									-webkit-font-smoothing: initial;
									padding-right: 14px;
									position: relative;
									top: 3px;
								}
							}
						}
					}
				}
			}
		}
	}

	.cart-collaterals {
		width: 35%;
		float: right;
		padding: 0;
		margin-bottom: 40px;

		@media #{$large-down} {
			width: 100vw;
			float: none;
			margin-left: calc( -100vw / 2 + 100% / 2 );
			margin-right: calc( -100vw / 2 + 100% / 2 );
			max-width: 100vw;
		}

		&:after, &:before {
			content: "";
			display: block;
			height: 10px;
			width: 100%;
			position: relative;
			background-color: transparent;
			background-size: 20px 20px;
			background-position: 0 10px, 40px 40px;
		}

		&:before {
			top: -10px;
		}

		&:after {
			bottom: -10px;
			transform: rotate(180deg);
		}

		.cross-sells {
			width: 100%;
			float: none;
			padding: 40px 40px 0;

			@media #{$large-down} {
				padding: 40px 60px 0;
			}

			h2 {
				margin: 0 0 25px;
				text-align: left;
				font-size: 13px;
				text-transform: uppercase;
			}

			ul {
				margin-bottom: 0;
			}
		}

		.cross-sells + .cart_totals {
			padding: 20px 40px 30px;

			@media #{$large-down} {
				padding: 20px 60px 40px;
			}
		}

		.cart_totals {
			width: 100% !important;
			float: none;
			padding: 40px 40px 30px;

			@media #{$large-down} {
				padding: 40px 60px 30px;
			}

			h2 {
				padding: 0 0 15px;
				margin: 0 0 15px;
				border-bottom-width: 1px;
				border-bottom-style: solid;
				text-align: left;
				font-size: 13px;
				text-transform: uppercase;
			}

			table.shop_table {
				margin: 0;

				tr {

					&.cart-subtotal {
						.amount {
							font-weight: bold;
						}
					}

					&.order-total {

						th, td {
							border-top: 1px solid;
						}

						th {
						    padding: 30px 15px 15px 0;
						}

						td {
						    padding: 30px 0 15px 15px;

							@media #{$xmedium-down} {
								padding: 30px 0 15px 0;
							}
						}

						strong .woocommerce-Price-amount {
							display: block;
							font-size: 24px;
						}

						.includes_tax {
							display: block;
							margin-top: 10px;

							.woocommerce-Price-amount {
								font-weight: normal;
							}
						}

						.amount {
							font-weight: bold;
						}
					}

					&.woocommerce-shipping-totals {
						p.woocommerce-shipping-destination {
							font-size: 12px;
							line-height: 1.4;
							margin: 15px 0;
							font-weight: normal;

							* {
								font-weight: normal;
							}
						}

						ul#shipping_method {
							margin-top: -3px;
						}

						form.woocommerce-shipping-calculator {
							.shipping-calculator-button {
								font-size: 13px;
								text-transform: uppercase;
								font-weight: bold;
							    margin-top: 0;
								margin-bottom: 5px;

								&:after {
									content: none;
								}
							}

							.shipping-calculator-form {
								margin: 5px 0 0;

								p {
									margin-bottom: 0;
								}

								button[name="calc_shipping"] {
									width: 100%;
								    margin-top: 7px;
								    margin-bottom: 10px;
									transition: all .3s ease;

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

					th {
						border: 0;
						font-size: 13px;
						text-transform: uppercase;
						width: 100px;
					}

					td {
						border: 0;
						font-size: 13px;

						@media #{$xmedium-down} {
							padding: 15px 0;

							&:before {
								line-height: 1.5;
							}

							> small, > strong, > span, > ul, > p, > form {
								width: 60%;
								display: block;
								text-align: left;
							}

							> strong, > span, > ul {
								margin: 0 0 0 auto !important;
							}

							> small, > p, > form {
								margin: 15px 0 0 auto !important;
							}
						}

						> p {
							text-transform: none;
							text-align: left;
						}
					}
				}
			}

			.wc-proceed-to-checkout {
				padding: 15px 0 0;

				.button {
					margin: 0;
				}
			}
		}
	}

	.shopkeeper-continue-shopping {
		text-align: center;
		clear: right;
		width: 35%;
		float: right;
		margin: 0 auto 100px;

		@media #{$large-down} {
			width: 100%;
			float: none;
		}

		.button,
		.button:hover {
			background: transparent!important;
			opacity: 1;
		}
	}

	.cart-empty {
		text-align: center;
		font-size: 30px;
		font-weight: 700;
		line-height: 1.4;

		&:before {
			content: "\e908";
			font-family: 'Shopkeeper-Icon-Font';
			display: block;
			font-weight: normal;
			font-size: 128px;
			line-height: 170px;
		}
	}

	.return-to-shop {
		margin-bottom: 60px;
		text-align: center;

		a.button.wc-backward {
			background-color: transparent !important;
			min-width: 0;
			padding: 0 !important;
			font-size: 0.8125em !important;
			font-weight: 700 !important;
			padding-bottom: 5px !important;
			border-bottom: 1px solid;
			text-transform: uppercase;
			width: auto;
		}
	}
}

// Cart Widget
.widget_shopping_cart {
	.widget_shopping_cart_content {
		ul.cart_list {
			li {
				border-bottom: 1px solid;
				padding-top: 10px !important;
				padding-bottom: 10px;
				margin-bottom: 0;

				&:last-child {
					border: 0;
				}

				.quantity,
				.quantity .amount {
					font-size: 13px;
				}

				a.remove {
					text-align: left;
					top: 40% !important;
				}
			}
		}

		.total {
			border-top: none;
			line-height: 24px;
			padding: 25px 0;
			margin: 0;

			strong {
				font-size: 14px;
				text-transform: uppercase;
			}

			.amount {
				font-weight: 700;
				font-size: 24px;
				margin-top: 0;
				float: right;
			}
		}

		.buttons {
			margin-bottom: 0;

			a {
				color: #ffffff;
				margin-right: 0;
				transition: all 0.3s;
				width: 100%;
				margin: 0 0 10px;

				&:hover {
					opacity: 1;
				}

				&:after {
					display: none;
				}
			}

			.button:hover {
				color: #ffffff;
				opacity: 0.8;
			}
		}
	}
}