/* Header and footer details the Elementor and UAE controls cannot express.
   Everything else lives in the two templates and stays editable. */

/* The handoff frames the Merch dropdown with a hairline and a soft drop shadow;
   UAE only exposes radius and dividers for it. */
.soso-menu .sub-menu {
	border: 1px solid #424c36;
	box-shadow: 0 15px 30px #0004;
}

/* Collapsed, the handoff drops the frame and marks the nested links with a
   lime rule instead. */
@media (max-width: 767px) {
	.soso-menu .sub-menu {
		border: 0;
		border-left: 2px solid #b6ef39;
		box-shadow: none;
	}

	/* UAE hides the collapsed menu but leaves it in the flow, where it still
	   reserves its full width and pushes the cart off a phone screen. Lifting
	   the panel out of the flow leaves just the toggle in the bar. */
	.soso-nav {
		flex: 0 0 auto;
	}

	.soso-nav nav.hfe-nav-menu__layout-horizontal {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		z-index: 99;
		background: #11140f;
	}
}

/* Both logo marks are fixed-size and must not be squeezed by the flex row. */
.soso-logo .soso-logo-mascot,
.soso-logo .soso-logo-wordmark {
	flex: 0 0 auto;
}

.soso-logo img,
.soso-footer-logo img {
	display: block;
}