/* WooCommerce CSS for Shaka  */
@import 'vars';
@import 'variables';

// scss-lint:disable SelectorFormat QualifyingElement MergeableSelector SelectorDepth IdSelector NestingDepth ImportantRule

%products-grid {
	ul.products {
		padding-top: ptr(20);
		margin-bottom: 0;

		li {
			&:nth-child(odd) {
				&.product {
					@media (max-width: 767px) {
						margin-right: 4%;
					}
				}
			}

			&:nth-child(even) {
				&.product {
					@media (max-width: 767px) {
						margin-right: 0;
					}
				}
			}

			&.first,
			&.last {
				@media (max-width: 767px) {
					clear: none;
				}
			}

			&.product {
				margin-bottom: ptr(60);
				width: 48%;

				@media (min-width: 768px) {
					width: 30.8%;
				}

				a {
					color: $brand-primary;

					// Shop Product Image
					img {
						box-shadow: none;
						transition: all ease-in-out .1s;
					}

					// Shop Product Image Hover
					&:hover {
						img {
							box-shadow: 0 0 0 2px;
							color: $brand-primary;
						}
					}

					// Override link color for buttons
					&.button {
						color: #333333;

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

				// Title of Product - Shop
				h3 {
					font-weight: 800;
					font-size: ptr(20);
					color: $brand-secondary;
					margin-bottom: 0;
					margin-top: ptr(12);
					line-height: 1.2;
					padding: ptr(2) 0 ptr(6);
				}

				// Price of Product - Shop
				.price {
					font-weight: 800;
					color: $brand-secondary;
					font-size: ptr(30);
					line-height: 1.2;
					margin-bottom: ptr(3);
					margin-top: ptr(-3);

					del {
						font-size: ptr(18);
						color: $gray-light;
						font-weight: normal;
						padding-top: ptr(5);

						.woocommerce-Price-currencySymbol {
							display: inherit;
							font-size: inherit;
						}
					}

					.woocommerce-Price-currencySymbol {
						display: inline-block;
						font-size: ptr(15);
						vertical-align: top;
						padding-top: ptr(3);
					}
				}

				.onsale {
					margin: ptr(-7) ptr(-7) 0 0;
				}

				.button {
					margin-top: ptr(10);
				}
			}
		}

		// Ratings - Product
		.star-rating {
			margin: ptr(2) 0 ptr(7);
		}
	}

	// Buttons
	a.add_to_cart_button {
		width: 100%;
		text-align: center;
		text-transform: uppercase;
		font-weight: 800;
		background: #dddddd;
		border: 0;
		box-shadow: none;
		text-shadow: none;
		color: $brand-secondary;
		padding: ptr(15);
		transition: $primary-transition;
		margin-bottom: 0;

		&:hover {
			background: $brand-primary;
			color: $gray-dark;
			box-shadow: none;
		}
	}

	// Sort - Above the Shop
	.woocommerce-ordering {
		margin: 0;

		.orderby {
			border: 1px solid #ebedf2;
			background-color: #ffffff;
			padding: ptr(10);
			height: ptr(40);
		}
	}

	// On Sale Badge
	span {
		&.onsale {
			background: $gray-dark;
			text-shadow: none;
			box-shadow: none;
			height: ptr(40);
			width: ptr(40);
			color: #ffffff;
			font-weight: 800;
			line-height: ptr(36);
		}
	}

	.wc-forward::after {
		content: '\f054';
		font-family: 'FontAwesome';
		margin-left: ptr(10);
		font-size: ptr(14);
	}

	.star-rating {
		color: #fac800;

		&::before {
			content: '\53\53\53\53\53';
			color: $gray-lighter;
		}
	}
}

body.woocommerce-page {

	// #############################
	// ### Woocommerce Shop Page ###
	// #############################

	@extend %products-grid;

	a.button,
	input.button,
	input.button.alt,
	button.button {
		display: inline-block;
		text-transform: uppercase;
		font-weight: 800;
		font-size: ptr(12);
		padding: ptr(23) ptr(30) ptr(22);
		text-shadow: none;
		border-radius: ptr(60);
		background-color: #dddddd;
		color: #333333;
		transition: $primary-transition;

		&:hover {
			background-color: $brand-primary;
			color: #ffffff;
		}

		&:active {
			top: 0;
		}
	}

	// Disabled button fix
	button.button.disabled {
		padding: ptr(23) ptr(30) ptr(22);
	}

	// Ratings
	.woocommerce-product-rating {
		line-height: 1;
		margin-bottom: ptr(20);

		.star-rating {
			margin-top: 0;
			margin-right: ptr(15);
		}
	}

	// Results - Above the Shop
	.woocommerce-result-count {
		font-size: ptr(14);
		color: #a6acb2;
		letter-spacing: 0;
		margin-bottom: 0;
		margin-top: ptr(19);
	}

	// Pagination for WooCommerce
	nav {
		&.woocommerce-pagination {
			border-top: 1px dashed rgba(0, 0, 0, .1);
			padding-top: ptr(60);

			ul {
				display: inline-block;
				border: 0;

				li {
					border: 0;
					background-color: transparent;
					margin-left: -2px;

					.page-numbers {
						font-size: ptr(15);
						width: ptr(60);
						border: 2px solid #dddddd;
						background-color: transparent;
						padding: ptr(20) 0;
						font-weight: 800;
						border-radius: 0;
					}

					a {
						color: $brand-secondary;

						&:focus,
						&:hover {
							color: $brand-primary;
						}
					}

					span.current {
						position: relative;
						border: 2px solid $brand-primary;
						padding: ptr(20) 0;
						color: $brand-primary;
					}

					.prev,
					.next {
						border: 2px solid #dddddd;
						color: #ffffff;

						&:hover {
							color: #ffffff;

							&::before,
							&::after {
								color: $brand-secondary;
							}
						}

						&::before,
						&::after {
							font-weight: normal;
							font-family: 'FontAwesome';
							-webkit-font-smoothing: antialiased;
							color: #999999;
						}
					}

					.prev {
						border-top-left-radius: 60px;
						border-bottom-left-radius: 60px;

						&::before {
							content: '\f177';
							padding-left: ptr(22);
						}
					}

					.next {
						border-top-right-radius: 60px;
						border-bottom-right-radius: 60px;

						&::after {
							content: '\f178';
							padding-right: ptr(22);
						}
					}

					&:first-child {
						a {
							border-left: 2px solid #dddddd;
						}
					}
				}
			}
		}
	}

	.woocommerce-MyAccount-navigation {
		ul {
			display: inline-block;
			width: 100%;
			background-color: #ffffff;
			border: 2px solid #dddddd; // Border around whole menu.
			border-radius: ptr(4);
			list-style: none;
			padding-left: 0;

			> li {
				&:first-of-type {
					// First link in the menu doesn't need top border.
					> a {
						border-top: 0;
					}
				}
			}
		}

		a {
			position: relative;
			display: block;
			font-size: ptr(16);
			font-weight: 800;
			color: $brand-secondary;
			padding: ptr(17) ptr(25);
			border-top: 2px solid #dddddd; // Top border for each link.
			transition: $primary-transition;

			&:focus,
			&:hover {
				padding-left: ptr(57);
				text-decoration: none;
				color: $brand-primary;

				&::before {
					opacity: 1;
					visibility: visible;
				}
			}

			// Arrow which shows up on :hover.
			&::before {
				opacity: 0;
				visibility: visible;
				position: absolute;
				content: '\f178';
				font-family: 'FontAwesome';
				font-size: ptr(18);
				color: $brand-primary;
				left: ptr(25);
				transition: $primary-transition;
			}
		}
	}

	// Widget - Product Lists
	ul.product_list_widget {
		a {
			color: $gray-light;
		}

		li {
			img {
				box-shadow: none;
				border-radius: $border-radius;
				width: ptr(40);
				height: ptr(40);
				margin-bottom: ptr(15);
			}

			.remove {
				display: none;
			}

			&:last-of-type {
				padding-bottom: 0;

				a img {
					margin-bottom: 0;
				}
			}
		}

		.amount {
			color: $brand-primary;
		}
	}

	// ###############################
	// ### Woocommerce Single Page ###
	// ###############################
	div.product {
		div.images {
			margin-bottom: ptr(30);

			img {
				box-shadow: none;
				margin-bottom: ptr(30);
			}

			div.thumbnails {
				padding-top: 0;

				a {
					margin-bottom: ptr(15);
				}
			}
		}

		p.price {
			font-weight: 800;
			font-size: ptr(40);
			line-height: 1.2;
			color: $brand-secondary;
			margin-bottom: ptr(12);

			ins {
				text-decoration: none;
			}

			del {
				font-weight: normal;
				color: $gray-light;
				margin-bottom: ptr(-20);
			}

			.woocommerce-Price-currencySymbol {
				display: inline-block;
				font-size: ptr(20);
				vertical-align: top;
				padding-top: ptr(5);
			}
		}

		form.cart {
			margin: ptr(24) 0 ptr(23);

			div.quantity {
				margin-right: 0;

				~ .button.single_add_to_cart_button {
					width: calc(82% - #{ptr(30)});
					margin-left: ptr(30);
				}
			}

			.button.single_add_to_cart_button {
				width: 100%;
				margin-right: 0;
				background-color: $brand-primary;
				text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
				color: #ffffff;
				transition: none;

				&:focus,
				&:hover {
					color: #ffffff;
					background-color: darken($brand-primary, 6);
				}
			}

			.variations {
				width: 100%;

				td.label {
					width: 20%;
					padding-right: 0;
					color: $gray-dark;
					padding-top: ptr(10);

					label {
						margin-top: ptr(8);
					}
				}

				.value {
					width: 75%;
					padding-left: 5%;
				}

				select {
					width: 100%;
					height: ptr(45);
					border: 1px solid #ebedf2;
					border-radius: $border-radius;
					background-color: #ffffff;
					padding: ptr(10);
				}

				.reset_variations {
					display: inline-block;
					background-color: $gray-lightest;
					color: #999999;
					border-radius: $border-radius;
					padding: 0 ptr(12);
					margin-top: ptr(4);

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

			.single_variation {
				.price {
					color: $gray-dark;
					font-weight: 800;
					font-size: ptr(16);

					del {
						color: $gray-light;
						font-family: $primary-font;
						font-size: ptr(14);
					}

					ins {
						text-decoration: none;
					}
				}
			}

			.woocommerce-variation-description {
				p {
					margin-bottom: ptr(18);
				}
			}
		}

		// Description & Reviews
		.woocommerce-tabs {
			ul.tabs {
				position: relative;
				display: inline-block;
				width: 100%;
				padding: 0;
				padding-bottom: ptr(5);
				margin-bottom: 0;
				font-size: 0;
				border: 0;

				&::before {
					display: none;
				}

				li {
					background-color: transparent;
					border: 0;
					padding: 0;
					margin: 0;

					&::before,
					&::after {
						display: none;
					}

					&:first-of-type {
						a {
							border-left: 2px solid #dddddd;
							border-top-left-radius: ptr(60);
							border-bottom-left-radius: ptr(60);

							&::before {
								display: none;
							}
						}
					}

					&:last-of-type {
						a {
							border-top-right-radius: ptr(60);
							border-bottom-right-radius: ptr(60);
						}
					}

					a {
						position: relative;
						display: inline-block;
						font-size: ptr(14);
						font-weight: 800;
						text-transform: uppercase;
						text-shadow: none;
						color: $gray-dark;
						border: 2px solid #dddddd;
						border-left: 0;
						padding: ptr(15) ptr(25);
						transition: $primary-transition;

						&::before {
							position: absolute;
							content: '';
							z-index: 10;
							width: 2px;
							height: auto;
							left: -2px;
							top: -2px;
							bottom: -2px;
							transition: $primary-transition;
						}
					}

					&:hover {
						a {
							position: relative;
							color: $brand-primary;
							border-color: $brand-primary;
						}
					}

					&.active {
						a {
							color: $brand-primary;
							border-color: $brand-primary;

							&::before {
								background-color: $brand-primary;
							}
						}
					}
				}
			}

			h2 {
				font-size: ptr(24);
				margin-bottom: ptr(15);
			}

			.commentlist {
				padding-left: 0;
			}

			.panel {
				font-size: ptr(16);
				margin-top: ptr(30);
				margin-bottom: ptr(45);
			}
		}
	}

	.woocommerce-variation-price {
		border-top: 2px solid rgba(0, 0, 0, .1);
		padding-top: ptr(13);
		margin-bottom: ptr(14);

		.amount {
			font-size: ptr(30);
		}
	}

	// Reviews
	#reviews {
		#comments {
			width: 100%;

			ol.commentlist li .comment-text {
				border: 1px solid #ebedf2;

				.meta {
					padding-top: 0;
					border-top: 0;
					color: #666666;
				}
			}

			h2 {
				margin-top: 0;
			}
		}

		.comment-reply-title {
			font-size: ptr(15);
			margin-top: ptr(15);
		}

		label {
			font-weight: normal;
		}
	}

	.woocommerce-error,
	.woocommerce-info,
	.woocommerce-message {
		// scss-lint:disable Shorthand
		border-top: 0;
		background: $gray-lightest;
		text-shadow: none;
		padding: ptr(6) ptr(6) ptr(6) ptr(60) !important;
		color: $gray-dark;
		line-height: ptr(50);
		text-transform: uppercase;
		font-weight: 800;
		box-shadow: none;

		.showlogin,
		.showcoupon {
			color: $gray-dark;
			text-decoration: underline;

			&:hover {
				color: #000000;
			}
		}

		a.button {
			margin-right: 0;
			margin-bottom: 0;
			background-color: $brand-primary;
			color: #ffffff;
			padding: ptr(18) ptr(30);

			&:hover {
				background-color: darken($brand-primary, 5);
			}
		}

		&::before {
			background-color: transparent;
			color: $gray-dark;
			font-size: ptr(18);
			font-family: 'FontAwesome';
			padding-top: 0;
			box-shadow: none;
			top: calc(50% - #{ptr(24)});
		}

		.wc-forward::after {
			display: none;
		}
	}

	.woocommerce-message {
		&::before {
			content: '\f00c';
		}
	}

	.woocommerce-info {
		&::before {
			content: '\f129';
		}
	}

	.woocommerce-error {
		&::before {
			content: '\f00d';
		}
	}

	.short-description {
		// @extend %theme-heading;
		padding-top: ptr(15);
		margin-top: ptr(20);
		margin-bottom: ptr(20);
		border-top: 1px solid rgba(0, 0, 0, .08);

		&::before {
			position: absolute;
			content: '';
			background-color: $brand-primary;
			height: ptr(3);
			width: ptr(30);
			top: ptr(-3);
			left: 0;
		}

		p {
			margin-bottom: 0;
		}
	}

	// Review Forms
	#review_form {
		#respond {
			input,
			textarea {
				font-size: ptr(16);
				background-color: #ffffff;
				border: 2px solid #dddddd;
				border-radius: 4px;
				padding: ptr(8);
				transition: $primary-transition;

				&:hover {
					border: 2px solid #bbbbbb;
				}

				&:focus {
					border: 2px solid $gray-dark;
					background-color: #ffffff;
					outline: 0;
				}
			}

			input#submit {
				display: inline-block;
				background-color: $brand-primary;
				color: #ffffff;
				border: 0;
				box-shadow: none;
				font-weight: 800;
				font-size: ptr(12);
				text-transform: uppercase;
				padding: ptr(15) ptr(20);
				margin-bottom: ptr(5);
				margin-right: ptr(5);
				text-shadow: none;
				transition: $primary-transition;

				&:hover {
					background-color: darken($brand-primary, 6);
					text-shadow: none;
				}

				&:active {
					top: 0;
					outline: 0;
				}

				&:focus {
					outline: 0;
				}
			}

			.comment-reply-title {
				margin-bottom: ptr(10);
			}
		}
	}

	.upsells.products,
	.related {
		h2 {
			font-size: ptr(15);
			margin-top: 0;
		}

		ul.products li {
			&:nth-child(odd) {
				&.product {
					@media (max-width: 767px) {
						margin-right: 4%;
					}
				}
			}

			&:nth-child(even) {
				&.product {
					@media (max-width: 767px) {
						margin-right: 0;
					}
				}
			}

			&.product {
				width: 48%;

				@media (min-width: 768px) {
					width: 30.8%;
				}
			}
		}
	}

	p.stars {
		a {
			color: #fac800;
		}
	}

	.entry-summary {
		font-size: ptr(14);
		padding-left: ptr(3);

		.entry-title {
			color: $brand-secondary;
			font-weight: 800;
			font-size: ptr(30);
			margin-bottom: ptr(8);
			margin-top: 0;
		}

		p {
			font-size: ptr(16);
		}
	}

	.quantity {
		width: 18%;
		display: block;
		position: relative;

		.qty {
			width: 100%;
			height: ptr(60);
			font-size: ptr(16);
			background-color: #ffffff;
			color: $brand-secondary;
			border: 2px solid $brand-secondary;
			border-radius: 4px;
			padding: ptr(2) 0 0 ptr(12);

			&:focus {
				color: $brand-primary;
				border: 2px solid $brand-primary;
				outline: none;
			}
		}
	}

	button.button.alt {
		background: $brand-primary;
		border-color: $brand-primary;
		outline: none;
		color: #ffffff;

		&:hover {
			background: darken($brand-primary, 8);
			border-color: darken($brand-primary, 8);
			color: #ffffff;
		}
	}

	// #############################
	// ### Woocommerce Cart Page ###
	// #############################
	table.shop_table {
		border-radius: 0;
		table-layout: auto;
		border-top: 0;

		td {
			padding: ptr(6) ptr(17);
			border: 0;
			border-top: 1px solid rgba(0, 0, 0, .1);
		}

		th {
			color: $gray-dark;
			text-transform: uppercase;
			padding: ptr(15) ptr(17);
			font-weight: 800;
			border: 0;
			border-top: 1px solid rgba(0, 0, 0, .1);
		}

		.product-remove {
			padding: ptr(8);
			width: ptr(30);

			a.remove {
				color: $gray-dark !important;
				background-color: $gray-lightest;
				border-radius: $border-radius;
				height: ptr(30);
				width: ptr(30);
				line-height: ptr(30);

				&:hover {
					background-color: $gray-dark;
					color: #ebedf2 !important;
				}
			}
		}

		.product-thumbnail {
			padding-left: 0;
			border-radius: $border-radius;
			text-align: center;

			.attachment-shop_thumbnail {
				margin-bottom: 0;
			}
		}

		.product-name {
			a {
				color: $gray-light;
				font-size: ptr(14);
			}
		}

		.product-price {
			font-weight: bold;
			font-size: ptr(14);
		}

		.product-quantity {
			.quantity {
				width: ptr(60);
				margin: 0;

				.qty {
					height: ptr(30);
					font-size: ptr(14);
				}
			}
		}

		.product-subtotal {
			.amount {
				font-weight: bold;
				color: $gray-dark;
			}
		}

		td.actions {
			padding: ptr(6);
			border-top: 1px solid rgba(0, 0, 0, .1);

			.coupon {
				.input-text {
					background-color: #ffffff;
					border: 1px solid #dddddd;
					box-shadow: none;
					margin-right: ptr(12);
					padding: ptr(13) ptr(11) ptr(9);
					width: ptr(140);

					@media (min-width: 992px) {
						width: ptr(280);
					}

					&:focus {
						border-color: $gray-dark;
						color: $gray-dark;
					}
				}
			}

			input.button {
				height: ptr(40);
				font-size: ptr(12);
				padding: ptr(15) ptr(20);
			}

			input.button.alt {
				margin: 0 0 0 ptr(6);
				background: $brand-primary;
				color: $gray-dark;

				&:hover {
					background: darken($brand-primary, 6);
				}
			}
		}
	}

	.cart-collaterals {
		margin-top: ptr(60);

		@media (max-width: 767px) {
			display: flex;
			flex-direction: column-reverse;
		}

		.cart_totals {
			h2 {
				font-size: ptr(15);
				text-align: left;
				margin-top: 0;
				margin-bottom: ptr(16);
			}

			table {
				width: 100%;

				tr {
					th,
					td {
						border-top: 1px solid rgba(0, 0, 0, .12);
						padding: ptr(10) ptr(15);
					}

					th {
						border-right: 1px solid rgba(0, 0, 0, .12);
						width: 45%;
						color: $gray-dark;
						text-transform: uppercase;
						font-weight: 800;
					}

					td {
						background-color: $gray-lightest;
						text-align: left;
						font-size: ptr(14);
						vertical-align: middle;

						strong .amount {
							color: $gray-dark;
						}
					}
				}
			}
		}

		.shipping_calculator {
			h2 {
				// @extend %theme-heading;

				.shipping-calculator-button {
					font-size: ptr(18);
					color: $gray-dark;

					&::after {
						content: '\f0d7';
						font-family: 'FontAwesome';
					}
				}
			}
		}
	}

	form {
		.form-row {
			textarea,
			select,
			input.input-text {
				background-color: #ffffff;
				border: 1px solid #dddddd;
				box-shadow: none;
				width: 100%;
				border-radius: $border-radius;
				padding: ptr(10);
			}

			textarea,
			input.input-text {
				&:focus {
					border-color: #cccccc;
					color: $gray-dark;
				}
			}

			.chosen-container-single .chosen-single {
				background: $gray-lightest;
				border: 1px solid #ebedf2;
				box-shadow: none;
				height: ptr(40);
				vertical-align: middle;
				border-radius: $border-radius;
				padding: ptr(5) ptr(10);
				color: $gray-light;
			}
		}
	}

	.cross-sells {
		h2 {
			font-size: ptr(15);
		}
	}

	#customer_details {
		.checkbox {
			display: inline-block;
			margin: 0 ptr(5) 0 0;
		}
	}

	form.checkout_coupon {
		padding-bottom: ptr(6);
	}

	#payment {
		background: $gray-lightest;
		border-radius: $border-radius;
		padding: 0 ptr(10);
		border: 1px solid #ebedf2;
		color: $gray-dark;

		#place_order {
			background-color: $brand-primary;
			color: #ffffff;
			padding: ptr(18) ptr(30);

			&:hover {
				background-color: darken($brand-primary, 6);
			}
		}

		ul.payment_methods {
			border-bottom: 1px solid #ebedf2;

			li input {
				margin-right: ptr(5);
				vertical-align: middle;
			}
		}

		div.form-row {
			border-top: 0;
		}

		div.payment_box {
			background: $gray-lightest;
			border: 1px solid #ebedf2;
			box-shadow: none;
			border-radius: $border-radius;

			&::after {
				border-bottom-color: #ebedf2;
			}
		}
	}

	table.shop_table {
		th {
			color: $gray-dark;
		}

		tbody:first-child tr:first-child td,
		tbody:first-child tr:first-child th {
			border-top: 1px solid rgba(0, 0, 0, .1);
		}

		tfoot td {
			color: $gray-dark;
		}
	}

	a.button.added::before {
		top: ptr(12);
		right: ptr(-22);
	}

	// Margin Bottom in Cart with products with Options
	td.product-name dl.variation dd {
		margin-bottom: 0;
	}

	table {
		&.shop_attributes {
			th {
				border-left: 1px solid rgba(0, 0, 0, .1);
				padding: ptr(15) ptr(20);
			}

			td {
				padding: ptr(7) ptr(20);
			}
		}
	}
}

// Checkout button
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	background-color: $brand-primary;
	color: #ffffff;
	font-size: ptr(14);
	padding: ptr(19) ptr(20) ptr(17);

	&:hover {
		background-color: darken($brand-primary, 6);
		color: #ffffff;
	}
}

// Shortcodes for pagebuilder
.woocommerce {
	@extend %products-grid;
	font-size: ptr(14);

	// Color for button when is disabled
	button.button.alt:disabled, {
		background-color: $brand-primary;

		&:hover,
		&[disabled],
		&[disabled]:hover {
			background-color: $brand-primary;
		}
	}

	div.product {
		.woocommerce-product-rating {
			margin-bottom: ptr(30);
		}
	}
}

// Override WooCommerce next and previous icons
html body.woocommerce-page nav.woocommerce-pagination ul li .next:focus,
html body.woocommerce-page nav.woocommerce-pagination ul li .next:hover,
html body.woocommerce-page nav.woocommerce-pagination ul li .prev:focus,
html body.woocommerce-page nav.woocommerce-pagination ul li .prev:hover {
	color: #ffffff;
	text-shadow: none;
}

// Arrows in cart buttons
body.woocommerce-page .buttons .wc-forward::after {
	position: absolute;
	right: ptr(20);
}

// Paypal link
.about_paypal {
	margin-left: ptr(15);
}

// Specific margin for shop sidebar
.woocommerce-shop-page .sidebar {
	margin-top: ptr(14);
}

// All headings in the Checkout
.woocommerce-checkout {
	h3,
	h2 {
		font-size: ptr(15);
		margin-top: ptr(15);
		margin-bottom: ptr(15);
	}
}

// Shortcodes with different columns.
.woocommerce.columns-1,
.woocommerce.columns-2,
.woocommerce.columns-3,
.woocommerce.columns-4 {
	margin-bottom: 30px;

	&::after {
		content: '';
		display: table;
		clear: both;
	}
}

.woocommerce.columns-1 ul.products li.product,
.woocommerce.columns-2 ul.products li.product,
.woocommerce.columns-3 ul.products li.product,
.woocommerce.columns-4 ul.products li.product {
	@media (min-width: 768px) {
		float: left;
		margin: 0 30px 30px 0;
	}
}

.woocommerce.columns-1 ul.products li.product {
	@media (min-width: 768px) {
		max-width: 100%;
	}
}

.woocommerce.columns-2 ul.products li.product {
	@media (min-width: 768px) {
		max-width: calc(50% - 30px);
	}
}

.woocommerce.columns-3 ul.products li.product {
	@media (min-width: 768px) {
		max-width: calc(33.3% - 30px);
	}
}

.woocommerce.columns-4 ul.products li.product {
	@media (min-width: 768px) {
		max-width: calc(25% - 30px);
	}
}

.woocommerce.columns-1 ul.products li.product:nth-of-type(1n),
.woocommerce.columns-2 ul.products li.product:nth-of-type(2n),
.woocommerce.columns-3 ul.products li.product:nth-of-type(3n),
.woocommerce.columns-4 ul.products li.product:nth-of-type(4n) {
	@media (min-width: 768px) {
		margin-right: 0;
	}
}

// ###########################
// ### Woocommerce Widgets ###
// ###########################

// Widget - Filter by Price
.widget_price_filter {
	.ui-slider {
		.ui-slider-handle,
		.ui-slider-range {
			background: $brand-primary;
			box-shadow: none;
			border: 0;
		}

		.ui-slider-handle {
			top: ptr(-3);

			&:last-child {
				margin-left: ptr(-12);
			}
		}
	}

	.price_slider_wrapper {
		.ui-widget-content {
			background: $gray-lightest;
			margin: ptr(20) 0;
		}

		.price_label {
			font-size: ptr(16);
			line-height: ptr(44);
		}

		.price_slider_amount {
			input {
				width: 100%;
				margin-bottom: ptr(10);
				border: 1px solid #edeff2;
				border-radius: $border-radius;
				background-color: $gray-lightest;
				padding: ptr(6) ptr(12);

				&:focus {
					background-color: #ffffff;
				}
			}
		}
	}
}

// Widget - Shopping Cart
.widget_shopping_cart_content {
	.buttons {
		margin-bottom: 0;

		.wc-forward {
			width: 100%;
			margin-bottom: ptr(10);
		}

		.checkout {
			margin-bottom: 0;
			background-color: $brand-primary;
			color: #ffffff;
			border: 1px solid $brand-primary;
			box-shadow: none;

			&:hover {
				background-color: darken($brand-primary, 5);
			}
		}
	}
}

// Widget - Product Categories
.widget_product_categories {
	// Generic links
	a {
		display: block;
		color: $brand-secondary;

		&:focus,
		&:hover {
			text-decoration: none;
			color: $brand-primary;
		}
	}

	// Main (1. level) links.
	.product-categories {
		display: inline-block;
		width: 100%;
		background-color: #ffffff;
		border: 2px solid #dddddd; // Border around whole menu.
		border-radius: ptr(4);
		list-style: none;
		padding-left: 0;

		a {
			position: relative;
			display: block;
			font-size: ptr(16);
			font-weight: 800;
			color: $brand-secondary;
			padding: ptr(17) ptr(25);
			border-top: 2px solid #dddddd; // Top border for each link.
			transition: $primary-transition;

			&:focus,
			&:hover {
				padding-left: ptr(57);
				text-decoration: none;
				color: $brand-primary;

				&::before {
					opacity: 1;
					visibility: visible;
				}
			}

			// Arrow which shows up on :hover.
			&::before {
				opacity: 0;
				visibility: visible;
				position: absolute;
				content: '\f178';
				font-family: 'FontAwesome';
				font-size: ptr(18);
				color: $brand-primary;
				left: ptr(25);
				transition: $primary-transition;
			}
		}

		> li {
			&:first-of-type {
				// First link in the menu doesn't need top border.
				> a {
					border-top: 0;
				}
			}

			&.current-cat {
				&:first-of-type {
					// Correct border :active state for first link.
					> a {
						border-top: 2px solid $brand-primary;
						margin-top: -2px;
						border-top-left-radius: ptr(4);
						border-top-right-radius: ptr(4);
					}
				}

				&:last-of-type {
					// Correct border :active state for last link.
					> a {
						border-bottom-left-radius: ptr(4);
						border-bottom-right-radius: ptr(4);
					}
				}
			}
		}

		li { // generic li
			&.current-cat {
				> a {
					color: $brand-primary;
					border: 2px solid $brand-primary;
					margin-left: -2px;
					margin-right: -2px;
					margin-bottom: -2px;
					z-index: 1;
				}
			}
		}
	}

	// Children (2. level) links.
	.children {
		list-style: none;
		padding-left: 0;

		a {
			text-transform: none;
			padding-left: ptr(42);
		}

		.children {
			a {
				padding-left: ptr(57);
			}

			.children {
				a {
					padding-left: ptr(72);
				}

				.children {
					a {
						padding-left: ptr(87);
					}
				}
			}
		}
	}
}

.widget_shopping_cart_content ul.product_list_widget li:last-of-type a img {
	margin-bottom: ptr(15);
}

.widget_shopping_cart .cart_list li {
	padding-left: 0;
}

.widget_shopping_cart .total {
	border-top: 1px solid rgba(0, 0, 0, .1);
	padding-top: ptr(10);
	color: $gray-dark;

	.amount {
		color: $brand-primary;
	}
}

// Widget - Search
.widget_product_search {
	.screen-reader-text {
		display: none;
	}

	.search-field {
		width: 100%;
		border: 2px solid $brand-secondary;
		background-color: #ffffff;
		padding: ptr(6) ptr(5) ptr(6) ptr(10);
		font-weight: normal;
		height: ptr(50);
		border-radius: 4px;
		margin-bottom: ptr(10);

		@media (min-width: 992px) {
			float: left;
			width: 70%;
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
			border-right: 0;
		}

		&:focus {
			background-color: #ffffff;
			outline: none;
		}
	}

	.search-field + input {
		width: 100%;
		height: ptr(50);
		background-color: $brand-secondary;
		color: #ffffff;
		border: 2px solid $brand-secondary;
		border-left: 0;
		border-radius: $border-radius;
		transition: $primary-transition;
		font-weight: 800;
		text-transform: uppercase;
		font-size: ptr(12);

		@media (min-width: 992px) {
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
			width: 30%;
		}

		&:hover,
		&:focus {
			background-color: $brand-primary;
			color: #ffffff;
			border-color: $brand-primary;
			outline: none;
		}
	}
}
