#nav {
	position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 2;
	display: flex; width: 100%;
	flex-direction: row;
	justify-content: flex-start;
	column-gap: 25px;
	padding: var(--nav-padding) 25px;
	margin-bottom: calc(-1 * (var(--nav-padding) * 2 + var(--home-btn-height)));
	
	background-color: #FFF;
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.1);
	
	color: #000;
}
body.loaded #nav {
	transition:
		z-index			  0s ease-out .4s,
		min-height		 .4s ease-out,
		padding			 .4s ease-out,
		margin			 .4s ease-out,
		background-color .4s ease-out,
		box-shadow		 .4s ease-out,
		color			 .4s ease-out;
}
body.menu-open #nav {
	z-index: 4;
	
	background-color: transparent;
	box-shadow: inset 0 -1px 0 rgba(0,0,0,0);

	transition:
		z-index			  0s ease-out,
		min-height		 .4s ease-out,
		padding			 .4s ease-out,
		margin			 .4s ease-out,
		background-color .4s ease-out,
		box-shadow		 .4s ease-out,
		color			 .4s ease-out;
}

@media (min-width: 900px) {
	body.static {
		--nav-padding: 20px;
		--home-btn-height: 50px;
	}
	body.scroll {
		--nav-padding: 10px;
		--home-btn-height: 40px;
	}
}
@media (max-width: 899.99px) {
	body {
		--nav-padding: 10px;
		--home-btn-height: 40px;
	}
	@media (max-width: 600px) { #nav { top: 0; } }
}
body.menu-open { --nav-padding: 20px; }

/*----------------------------------------------------------------------------------------------------------------*/

#nav > .home-btn {
	display: block; height: var(--home-btn-height); flex: 0 0 calc(var(--home-btn-height) / .25);
	
	background-image: url("../../images/logo-dark.svg");
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}
.loaded #nav > .home-btn {
	transition:
		height		.4s ease-out,
		flex-basis	.4s ease-out,
		opacity		.2s ease-out;
}
@media (min-width: 700px) {
	.menu-open #nav > .home-btn { opacity: 0; }
}

/*----------------------------------------------------------------------------------------------------------------*/

#nav > .nav {
	flex: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	column-gap: 25px;
}
#nav > .nav.left { justify-content: flex-start; }
#nav > .nav.right { justify-content: flex-end; }

/*----------------------------------------------------------------------------------------------------------------*/

#nav .menu-btn {
	position: relative;
	display: inline-grid;
	grid-template-areas: 'hamburger labels';
	align-items: center;
	column-gap: 15px;
	
	cursor: pointer;
}
.loaded #nav .menu-btn { transition: opacity .4s ease-out; }

#nav .menu-btn > .hamburger {
	grid-area: hamburger;
	position: relative;
	height: 14px; width: 25px;
}
#nav .menu-btn > .hamburger > div {
	position: absolute; left: 0; transform: translateY(-50%) rotate(0deg);
	width: 100%; height: 1px;
	
	background-color: currentColor;
	border-radius: .5px;
}
.loaded #nav .menu-btn > .hamburger > div {
	transition:
		opacity	  .2s ease-out,
		top		  .2s ease-out .2s,
		transform .2s ease-out;
}
#nav .menu-btn > .hamburger > .top { top: 0; }
#nav .menu-btn > .hamburger > .mid { top: 50%; }
#nav .menu-btn > .hamburger > .bot { top: 100%; }
.menu-open #nav .menu-btn > .hamburger > div {
	transition:
		opacity	  .2s ease-out,
		top		  .2s ease-out,
		color	  .2s ease-out,
		transform .2s ease-out .2s;
}
.menu-open #nav .menu-btn > .hamburger > .top { top: 50%; transform: translateY(-50%) rotate(45deg); }
.menu-open #nav .menu-btn > .hamburger > .mid { opacity: 0; }
.menu-open #nav .menu-btn > .hamburger > .bot { top: 50%; transform: translateY(-50%) rotate(-45deg); }

#nav .menu-btn > .label {
	grid-area: labels-start;
	position: relative;
	
	white-space: nowrap;
}
.loaded #nav .menu-btn > .label { transition: opacity .4s ease-out; }
#nav .menu-btn > .label.opened { opacity: 0; }
#nav .menu-btn > .label.closed { opacity: 1; }
.menu-open #nav .menu-btn > .label.opened { opacity: 1; }
.menu-open #nav .menu-btn > .label.closed { opacity: 0; }
@media (min-width: 900px)	 { #nav .menu-btn > .label { display: block; } }
@media (max-width: 899.99px) { #nav .menu-btn > .label { display: none; } }

/*----------------------------------------------------------------------------------------------------------------*/

#nav .menu {
	display: flex;
	flex-direction: row;
	align-items: center;
	column-gap: 35px;
	
	font-size: 15px;
}
.loaded #nav .menu { transition: opacity .4s ease-out; }

#nav .menu > a { line-height: 20px; }
#nav .menu > a > span { pointer-events: auto; }

@media (min-width: 900px)	 { #nav .menu { display: flex; } }
@media (max-width: 899.99px) { #nav .menu { display: none; } }
.menu-open #nav .menu { opacity: 0; }
.menu-open #nav .menu > a > span { pointer-events: none; }

/*----------------------------------------------------------------------------------------------------------------*/

#nav .cart-btn {
	position: relative;
	display: block; height: 30px; flex: 0 0 30px;
}
#nav .cart-btn:before {
	content: '';
	position: absolute; top: 0; left: 0;
	display: block; height: 100%; width: 100%;
	
	background-color: currentColor;
	
	--cart-btn-mask-image: url("../../images/icons/cart.svg");
	--cart-btn-mask-position: center;
	--cart-btn-mask-repeat: no-repeat;
	--cart-btn-mask-size: contain;
	
	-webkit-mask-image: var(--cart-btn-mask-image);
	mask-image: var(--cart-btn-mask-image);
	-webkit-mask-position: var(--cart-btn-mask-position);
	mask-position: var(--cart-btn-mask-position);
	-webkit-mask-repeat: var(--cart-btn-mask-repeat);
	mask-repeat: var(--cart-btn-mask-repeat);
	-webkit-mask-size: var(--cart-btn-mask-size);
	mask-size: var(--cart-btn-mask-size);
}
#nav .cart-btn:after {
	content: attr(data-size);
	position: absolute; top: 5px; left: 0; transform: translate(-50%, -50%);
	display: block; height: 16px; width: 16px;
	
	background-color: #EDAB4D;
	border-radius: 50%;
	
	text-align: center;
	line-height: 16px;
	font-size: 9px;
	font-weight: 400;
	color: #000;
}
.loaded #nav .cart-btn {
	transition:
		height		.4s ease-out,
		flex-basis	.4s ease-out,
		opacity		.2s ease-out;
}
@media (min-width: 700px) {
	.menu-open #nav .cart-btn { opacity: 0; }
}