// Appears at the top of the page above the primary banner.
#subsidiary-banner {
	background-color: #383838;
	position: relative;
	z-index: 100;

	.subsidiary-banner-wrap {
		clear: both;
		height: $subsidiary-banner-height;
		@include wrap();
	}

	.subsidiary-left-wrap {
		float: left;
	}

	.subsidiary-right-wrap {
		float: right;
	}

	.account {
		color: #fff;
		display: inline-block;
		vertical-align: top;
		height: $subsidiary-banner-height;
		overflow: hidden;
		margin: 0 -4px 0 0;
		@include font-size(1.4);

		a {
			color: #fff;
			padding: 17px 20px;
			display: block;
			border-left: 1px solid rgba(0,0,0,0.12);
			line-height: 1;

			&:hover {
				background-color: rgba(0,0,0,0.12);
			}
		}

		.my-account-section {
			display: inline-block;
			margin: 0 -3px 0 0;

			&:last-child {
				margin: 0;
				border-right: 1px solid rgba(0,0,0,0.12);
			}

			a:before {
				content: '\f007';
				margin: 0 6px 0 0;
				@include font-awesome();
			}
		}
	}

	.cart {
		color: #fff;
		display: inline-block;
		vertical-align: top;
		padding: 0;
		border-right: 1px solid rgba(0,0,0,0.12);
		position: relative;
		@include font-size(1.4);

		&:hover {
			.widget_shopping_cart_content {
				visibility: visible;
				opacity: 1;
			}
		}

		> a {
			color: #fff;
			padding: 17px 21px;
			display: block;
			line-height: 0;

			&:hover {
				.cart-item-quantity:after {
					display: block;
				}

				&:after {
					display: block;
				}
			}

			&:before {
				content: '\f07a';
				margin: 0 6px 0 0;
				@include font-awesome();
			}

			&:after {
				content: '';
				width: 0;
				height: 0;
				border-left: 6px solid transparent;
				border-right: 6px solid transparent;
				border-bottom: 6px solid #000;
				position: absolute;
				bottom: 0px;
				left: 50%;
				margin-left: -3px;
				display: none;
			}
		}

		.cart-item-quantity {
			color: #ccc;
			font-weight: 300;
			margin: 0 0 0 10px;
			position: relative;
		}

		.widget_shopping_cart_content {
			position: absolute;
			opacity: 0;
			visibility: hidden;
			background-color: #000;
			width: 290px;
			top: 48px;
			left: 50%;
			margin-left: -145px;
			padding: 24px;
			text-align: left;
			color: #ccc;
			@include font-size(1.8);

			&:before {
				content: '';
				width: 0;
				height: 0;
				border-left: 6px solid transparent;
				border-right: 6px solid transparent;
				border-bottom: 6px solid #000;
				position: absolute;
				top: -6px;
				left: 50%;
				margin-left: -3px;
			}

			ul {
				margin: 0;

				li {
					vertical-align: top;
					position: relative;
					margin: 0 0 25px;
					padding: 0;
					width: 100%;
					@include clearfix();

					&:before {
						display: none;
					}

					&:last-child {
						margin: 0;
					}

					&.empty {
						text-align: center;
					}

					> a {
						display: block;
						min-height: 72px;
					}
				}
			}

			a {
				color: #fff;
				line-height: 1.25;
				position: relative;

				&:hover, &:focus {
					border: 0;

					.product-title {
						color: $color__link;
						border-bottom: 1px solid $color__link;
					}
				}
			}

			.product-meta {
				padding: 0 0 0 90px;
			}

			img {
				position: absolute;
				top: 0;
				left: 0;
				width: 72px;
				height: 72px;
			}

			.product-title {
				display: inline;
				position: relative;
			}

			a.remove {
				position: absolute;
				background-color: #fff;
				border-radius: 50%;
				color: #000;
				width: 24px;
				height: 24px;
				border: 3px solid #000;
				top: -10px;
				left: -10px;
				z-index: 10;
				min-height: 0;
				line-height: 9999px;
				overflow: hidden;
				@include font-size(1.2);

				&:before {
					content: '\f00d';
					position: absolute;
					top: 3px;
					left: 4px;
					@include font-awesome();
				}

				&:hover {
					color: #fff;
					background-color: $color__link;
					border-color: #000;
				}
			}

			.quantity {
				display: block;
				margin: 6px 0 0 0;
				line-height: 1;
				color: #666;
				text-decoration: none;
				@include font-size(1.6);
			}

			.total {
				display: inline-block;
				border-top: 1px dotted #d9d9d9;
				padding: 15px 0 0 0;
				margin: 25px 0 15px 0;
			}

			.buttons {
				margin: 0;
				overflow: hidden;

				a {
					@include black-button-white-border();

					&:first-child {
						float: left;
						width: 49%;
					}

					&:last-child {
						float: right;
						width: 49%;
					}
				}
			}

			.variation { // too much information, hide for UX reasons
				display: none;
			}
		}
	}
}

// The primary banner.
#header {
	background-color: #fff;
	border-bottom: 1px solid #ebebeb;
	position: relative;
	z-index: 90;

	.primary-header-outer-wrap {
		height: $masthead-height;
		@include wrap();
	}

	.primary-header-inner-wrap {
		width: 100%;
		height: 100%;
		display: table;
	}

	.site-branding {
		display: table-cell;
		vertical-align: middle;
		white-space: nowrap;
		padding: 0 $masthead-horizontal-padding 0 0;

		.site-title {
			margin: 0;
			padding: 0;
			line-height: 30px;
			@include font-size(3);

			a {
				color: #000;
				letter-spacing: -1px;
				font-weight: 900;
				text-transform: none;

				&:hover {
					color: $color__link;
				}
			}
		}
	}

	.site-tagline {
		color: #999;
		font-style: italic;
		line-height: 1.5;
		border-left: 1px solid $color__border-masthead;
		display: table-cell;
		vertical-align: middle;
		min-width: 235px;
		padding: 0 $masthead-horizontal-padding;
		font-weight: 300;
		@include font-size(1.6);
	}

	.masthead-search-wrap {
		display: table-cell;
		vertical-align: middle;
		white-space: nowrap;
		color: #333;
		width: 100%;
		text-align: right;
		line-height: 1;
		@include font-size(1.8);

		form {
			position: relative;
		}

		.search-submit {
			display: none;
		}

		$tl: 0.6s; // transition length

		input[type="search"]::-webkit-search-decoration,
		input[type="search"]::-webkit-search-cancel-button,
		input[type="search"]::-webkit-search-results-button,
		input[type="search"]::-webkit-search-results-decoration { display: none; }

		input[type="search"].search-field {
			width: 40px;
			height: 40px;
			border-radius: 20px;
			border: none;
			cursor: pointer;
			background-color: #f1f1f1;
			-webkit-appearance: textfield;
			@include transition(
				width $tl ease,
				border-radius $tl ease,
				background $tl ease,
				box-shadow $tl ease
			);

			& + label {
				cursor: pointer;
				position: absolute;
				right: 0px;
				color: #333;
				width: 40px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				@include transition( color $tl ease );

				&:before {
					content: '\f002';
					@include font-awesome();
				}
			}

			&:hover {
				color: #fff;
				background: rgb(200, 200, 200);
				box-shadow: 0 0 0 5px rgb(61, 71, 82);

				& + label {
					color: #fff;
				}
			}

			&:focus {
				border: none;
				outline: none;
				box-shadow: none;
				padding: 0 30px 0 20px;
				cursor: text;
				width: 100%;
				border-radius: auto;
				color: #000;
				background-color: #f1f1f1;
				@include transition(
					width $tl ease,
					border-radius $tl
				);

				& + label {
					color: #333;
				}
			}

			&:not(:focus) {
				text-indent: -5000px;
			} // for more-graceful falling back (:not browsers likely support indent)
		}
	}

	.menu-toggle-button {
		position: absolute;
		top: 25px;
		left: 0;
		width: 40px;
		height: 40px;
		border: 1px solid #ebebeb;
		cursor: pointer;
		text-align: center;
		display: block;
		display: none;

		&:hover {
			border: 1px solid #ddd;
		}

		span {
			position: absolute;
			display: block;
			top: 50%;
			left: 50%;
			margin: -1px 0 0 -10px;

			&:after,
			&:before {
				content: "";
				position: absolute;
				left: 0;
				top: -5px;
			}

			&:after {
				top: 5px;
			}
		}

		span, span:before, span:after {
			width: 20px;
			height: 2px;
			background-color: #333;
			transition: all 0.3s;
			backface-visibility: hidden;
			border-radius: 1px;
		}
	}

	#menu-toggle {
		display: none;

		@include breakpoint(850px) {
			&:checked + #menu-primary {
				display: block;
			}
		}
	}
}