nav a {
	color: var(--black);
	text-decoration: none;
	text-transform: uppercase;
	font-family: dharma-gothic-e, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 1.5rem;
}

nav li a {
	padding: 0 1rem;
}

.menu li {
	float: left;
}

/*#nav {
	background-image: url("../images/logo-light.svg");
	background-size: 10.4375rem 1.625rem;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	height: auto;
}*/

.navigation__logo {
	width: calc(100% - 12rem);
}

.navigation__logo img {
	max-width: 12rem;
	margin-left: 12rem;
}

nav a, .specific-intent a {
	text-decoration: none;
}

nav .current_page_item a {
	text-decoration: underline;
}

nav ul, footer ul, footer .footer-menus-container li:has(.sub-menu), footer .footer-menus-container .sub-menu, .menu-item.cart-contents, .cart-contents-count {
	padding-inline-start: .75rem;
	list-style-type: none;
	float: left;
	margin-block-end: 0;
	display: -webkit-box;
  	display: -webkit-flex;
  	display: -ms-flexbox;
  	display: flex;
  	align-items: center;
  	justify-content: center;
}

nav span.backslash {
	margin-left: .75rem;
}

nav ul li, footer ul li {
	padding-right: .75rem;
	margin-block-start: .0625rem;
}

.menu-item.cart-contents, .cart-contents-count {
	padding-inline-start: 0;
}

.menu-item.cart-contents {
	width: 12rem;
}

.menu-item.cart-contents img {
	max-width: 1.25rem;
}

.cart-contents-count {
	background-color: var(--red);
	color: var(--white);
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
}

/**** FOOTER AREA ****/

/* FOOTER MENUS */

footer ul, footer .footer-menus-container li:has(.sub-menu), footer .footer-menus-container .sub-menu {
	padding-inline-start: 0!important;
}

footer .footer-menus-container li {
	padding: .625rem 0;
}

footer .footer-menus-container li:has(.sub-menu), footer .footer-menus-container .sub-menu {
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}

footer .footer-menus-container li:has(.sub-menu) {
	padding-top: 0!important;
}

footer .footer-menus-container li:has(.sub-menu) > a {
	padding-bottom: .625rem;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--white);
	font-weight: 700;
}

footer .sub-menu li a {
	color: var(--white);
}

/* SOCIALS MENU */

#menu-socials-menu {
	gap: .75rem;
}

#menu-socials-menu li, #menu-socials-menu-1 li, #menu-socials-menu-1 li a {
	position: relative;
	width: 2rem;
	height: 2rem;
}

#menu-socials-menu li a, #menu-socials-menu-1 li a {
	position: absolute;
	width: 100%;
	height: 3rem;
	top: 0;
	left: 0;
	text-indent: -1000rem;
	color: transparent;
}

footer li.facebook:before {
	content: url("../images/icons/social/facebook.svg");
}

footer li.instagram:before {
	content: url("../images/icons/social/instagram.svg");
}

footer li.pinterest:before {
	content: url("../images/icons/social/pinterest.svg");
}

footer li.reddit:before {
	content: url("../images/icons/social/reddit.svg");
}

footer li.tiktok:before {
	content: url("../images/icons/social/tiktok.svg");
}

footer li.twitter-x:before {
	content: url("../images/icons/social/twitter-x.svg");
}

footer li.youtube:before {
	content: url("../images/icons/social/youtube.svg");
}

@media screen and (min-width: 48rem) {
	
	#menu-main-menu {
		width: 100%;
	}
	
	nav li.home {
		position: relative;
		width: 6.5rem;
		height: 4.625rem;
	}

	nav li.home a {
		font-size: 0;
		width: 100%;
		height: 4.625rem;
		color: transparent;
	}

	nav li.home a:after {
		background-image: url("../images/logo-light.svg");
    	background-size: 6.5rem 4.625rem;
    	display: inline-block;
    	width: 6.5rem;
		height: 4.625rem;
    	content:"";
	}
	
	.background-white-brand nav li.cta a {
		color: var(--black);
		border: solid .0625rem var(--black);
	}
	
	.background-white-brand nav li.home a:after {
		background-image: url("../images/logo-dark.svg");
	}
	
	nav #menu-main-menu li {
		text-align: center;
	}
	
	footer .footer-menus-container > div {
		flex: 0 0 33.3333%;
	}
	
	footer .footer-menus-container li:has(.sub-menu) {
		width: calc(100% - 1.5rem);
		padding-right: 1.5rem;
	}
	
}

@media screen and (max-width: 47.9375rem) {
	
	#nav {
		background-size: 7rem 1.0825rem;
	}
	
	.menu-item.cart-contents {
		width: 3rem;
		z-index: 1;
	}
	
	.navigation__logo {
		width: calc(100% - 3rem);
	}

	.navigation__logo img {
		max-width: 8rem;
		margin-left: 3rem;
	}
	
	.navigation__wrapper {
		flex-grow: 1;
		padding-right: .25rem!important;
		position: relative;
	}

	.navigation__links {
		position: fixed;
		width: 19rem;
		height: 100vh;
		padding-top: 1.5rem;
		left: -63rem;
		top: -.625rem;
		transition: left .2s ease-in;
		background: var(--red);
		color: var(--black);
		list-style: none;
		box-shadow: .0625rem .0625rem .625rem 0rem rgba(0,0,0,0.75);
		flex-direction: column;
		justify-content: flex-start;
		z-index: 2;
	}
	
	.navigation__links li {
		padding: .5rem 1.5rem;
		text-align: right;
		width: 84%;
		flex-basis: 0;
	}
	
	.navigation__links a {
		color: var(--black);
		text-decoration: none;
		font-size: 1.75rem;
	}
	
	#hamburger {
		visibility: hidden;
		width: 0;
	}
	
	.navigation__button {
		position: relative;
		display: inline-block;
		width: 2.25rem;
		height: 2rem;
		background: transparent;
		cursor: pointer;
	}
	
	.navigation__button span {
		position: absolute;
		right: 0;
		display: inline-block;
		width: 1.5rem;
		height: .125rem;
		background-color: var(--white);
		transform-origin: center;
		transition: opacity 0.2s linear, all 0.3s linear;
	}
	
	.navigation__button span:nth-of-type(1) {
		top: .5625rem;
	}
	
	.navigation__button span:nth-of-type(2) {
		top: .9375rem;
	}
	
	.navigation__button span:nth-of-type(3) {
		top: 1.3125rem;
	}

/* Here comes the magic */
	#hamburger:checked ~ .navigation__links {
  /* Or it can be "input[type="checkbox"] ~ .navigation__links" */
		left: 0;
	}

/* Styles for our "close" button */
	#hamburger:checked ~ .navigation__button span:nth-of-type(1) {
		transform: rotate(45deg);
		top: 1rem;
	}
	
	#hamburger:checked ~ .navigation__button span:nth-of-type(2) {
		opacity: 0;
	}
	
	#hamburger:checked ~ .navigation__button span:nth-of-type(3) {
		transform: rotate(-45deg);
		top: 1rem;
	}
	
	/* ACCORDION */
	.faq-drawer__content-wrapper {
		line-height: 1.35;
		max-height: 0rem;
		overflow: hidden;
		transition: 0.25s ease-in-out;
	}
	
	.faq-drawer__title {
		display: block;
		padding: 0;
		position: relative;
		margin-bottom: 0;
		transition: all 0.2s ease-out;
	}
	
	.faq-drawer__title::after {
		border-style: solid;
		border-width: .0625rem .0625rem 0 0;
		content: " ";
		display: inline-block;
		float: right;
		height: .625rem;
		left: -.125rem;
		position: relative;
		right: 1.5em;
		top: .125rem;
		transform: rotate(135deg);
		transition: 0.3s ease-in-out;
		vertical-align: top;
		width: .625rem;
	}
	
	.faq-drawer__trigger:checked + .faq-drawer__title + .faq-drawer__content-wrapper {
		max-height: 100vh;
	}
	
	.faq-drawer__trigger:checked + .faq-drawer__title::after {
		transform: rotate(-45deg);
		transition: 0.2s ease-in-out;
	}
	
	footer .footer-menus-container {
		margin-top: 1.5rem;
	}
	
	footer .footer-menus-container > div {
		flex: 0 0 100%;
	}
	
	footer .footer-menus-container li:has(.sub-menu) {
		width: 100%;
		padding-right: 0;
		margin-bottom: 1rem;
	}
	
}