html {
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.header {
	& {
		text-align: center;
		background: rgba($color-primary, .9);
		box-shadow: 0 0 2px rgba($color-foreground, .1);
		background-position: center center;
		background-repeat: no-repeat;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}
	.grid {
		overflow: visible;
	}
	a {
		color: $color-background;
	}
	.logo {
		& {
			font-family: $font-face-logo;
			font-size: $font-size-xxxl;
			display: inline-block;
			padding: 0 $spacing/2;
			color: $color-background;
			text-shadow: 1px 1px $color-foreground;
		}
		&:hover {
			text-decoration: none;
		}
	}
	img {
		float: left;
	}
}

@mixin header-desktop {
	.header {
		& {
			text-align: left;
		}
		.col-1-2 {
			position: relative;
			min-height: 82px;
		}
		.user-nav {
			position: absolute;
			top: 0;
			right: 0;
			background: rgba($color-foreground, .2);
			padding: $spacing/4 $spacing 0;
		}
		.cart-nav {
			position: absolute;
			min-width: 300px;
			bottom: -1.6em;
			right: 0;
		}
	}
}