.woocommerce {

	// order tracking
	.woocommerce-form-track-order {
		max-width: 500px;
		padding: 3.5rem;
		margin: 1rem auto 2.5rem;

		@media #{$medium-down} {
			max-width: 100%;
		}

		&:before,
		&:after {
			background-image: radial-gradient(closest-side, transparent 9px, rgba(84,84,84,0.05) 100%);
			content: "";
			display: block;
			height: 10px;
			width: 100%;
			max-width: 500px;
			margin: 0 0 0 -3.5rem;
			background-color: transparent;
			background-size: 20px 20px;
			background-position: 0 10px, 40px 40px;
			position: absolute;
		}

		&:before {
			top: calc( 1rem - 10px );
		}

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

		> p {
			font-size: 13px;
		}

		.form-row {
			width: 100%;

			.button {
				margin-top: 1.5rem;
				width: 100%;
			}
		}
	}

	// order header
	.woocommerce-MyAccount-content > p mark {
		background-color: transparent;
	}

	.order-info {
		margin: 0 0 4rem;
		padding: 30px;
		position: relative;
		text-align: center;

		mark {
			background: none;
			font-weight: bold;
			margin: 0px 5px;
		}
	}

	// order titles
	h2.woocommerce-order-details__title,
	h2.woocommerce-order-downloads__title,
	h2.woocommerce-column__title {
		text-transform: uppercase;
		margin-bottom: 1rem;
	}

	.order-again {
		margin-top: 2.5rem;

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

	.woocommerce-order,
	.woocommerce-customer-details,
	.woocommerce-order-details,
	.woocommerce-order-downloads {
		margin: 0 auto 2rem;
		max-width: 1100px;
		width: 100%;
	}

	.woocommerce-order-downloads {
		.woocommerce-MyAccount-downloads-file {
			width: auto;
		}
	}

	.woocommerce-customer-details {
		p {
			font-size: 14px;
		}

		address {
			border: 0;
			font-size: 14px;
			padding: 0;
		}

		.col-1,
		.col-2 {
			@media #{$large-down} {
				margin-bottom: 2.5rem;
			}
		}
	}

	.woocommerce-thankyou-order-received {
		padding: 0 !important;
		margin-bottom: 2rem !important;
	}

	.woocommerce-thankyou-order-details.order_details {
		display: block;
		padding: 30px 25px 25px;
		text-align: center;

		+ p {
			margin: 4rem 0;
		}

		li {
			border: 0;
			padding: 0 30px 0 0;
			width: auto;
			display: inline-block;
			float: none;
			line-height: 1.3;
			margin-right: 20px;
			font-size: 13px;
			font-weight: bold;
			text-align: left;

			@media #{$large-down} {
				width: 100%;
				padding:0;
				margin-right: 0;
				margin-bottom: 25px;

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

			&:last-child {
				margin-right: 0;
				padding-right: 0;
			}

			strong {
				font-size: 16px !important;
				font-weight: normal;
				margin-top: 6px;
			}
		}
	}
}