/* Marketing site navbar: mega panels on desktop, drawer + accordions below 992px. */

.site-nav {
	--sn-ink: #191e3a;
	--sn-muted: #555b6e;
	--sn-orange: #ed8134;
	--sn-orange-deep: #be672a;
	--sn-wash: #fbe6d6;
	--sn-wash-soft: #fdf3eb;
	--sn-mist: #f1f2f3;
	--sn-line: #e0e6ed;
	--sn-white: #ffffff;
	--sn-float: 0 18px 40px -12px rgba(25, 30, 58, 0.18), 0 2px 6px rgba(25, 30, 58, 0.06);
	--sn-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--sn-h: 76px;

	position: relative;
	z-index: 1030;
	height: var(--sn-h);
	color: var(--sn-ink);
	font-size: 0.8rem; /* 16px: theme root is 20px */
	transition: background-color 0.2s var(--sn-ease), box-shadow 0.2s var(--sn-ease);
}

.site-nav-slot {
	height: 76px;
}

.site-nav--solid,
.site-nav.is-stuck,
.site-nav.has-open {
	background: var(--sn-white);
}

.site-nav.is-stuck {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	box-shadow: 0 1px 0 var(--sn-line);
	animation: site-nav-drop 0.3s var(--sn-ease);
}

.site-nav.has-open {
	box-shadow: 0 1px 0 var(--sn-line);
}

@keyframes site-nav-drop {
	from { transform: translateY(-100%); }
}

.site-nav a,
.site-nav a:hover {
	color: inherit;
	text-decoration: none;
}

.site-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav__bar {
	display: flex;
	align-items: center;
	gap: 24px;
	height: 100%;
}

.site-nav__logo {
	display: inline-flex;
	flex-shrink: 0;
}

.site-nav__logo img {
	display: block;
	width: 135px;
	height: 30px;
}

.site-nav__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.site-nav__login {
	padding: 8px 12px;
	border-radius: 5px;
	font-weight: 600;
}

.site-nav a.site-nav__login:hover {
	color: var(--sn-orange-deep);
}

.site-nav__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 8px 18px;
	border: 1px solid transparent;
	border-radius: 5px;
	font-weight: 600;
	white-space: nowrap;
	transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
}

.site-nav .site-nav__btn--primary,
.site-nav .site-nav__btn--primary:hover {
	background: var(--sn-orange);
	color: var(--sn-white);
}

.site-nav .site-nav__btn--primary:hover {
	background: var(--sn-orange-deep);
}

.site-nav__btn--secondary {
	background: var(--sn-white);
	border-color: var(--sn-line);
}

.site-nav__btn--secondary:hover {
	border-color: var(--sn-ink);
}

.site-nav__trigger {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 8px 12px;
	border: 0;
	border-radius: 5px;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease-out;
}

/* Hover recolors only: a grey fill clashes with the tinted hero behind the transparent bar */
.site-nav .site-nav__trigger:hover,
.site-nav a.site-nav__trigger:hover {
	color: var(--sn-orange-deep);
}

.site-nav__item.is-open > .site-nav__trigger {
	background: var(--sn-wash-soft);
}

.site-nav__caret {
	flex-shrink: 0;
	transition: transform 0.2s var(--sn-ease);
}

.site-nav__item.is-open .site-nav__caret {
	transform: rotate(180deg);
}

.site-nav :focus-visible {
	outline: 2px solid var(--sn-ink);
	outline-offset: 2px;
	border-radius: 5px;
}

/* Panel content (shared by desktop and drawer) */

.site-nav__col-title {
	margin: 0 0 8px;
	padding: 0 10px;
	color: var(--sn-muted);
	font-size: 0.8125em;
	font-weight: 600;
}

.site-nav__link {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 9px 10px;
	border-radius: 8px;
	transition: background-color 0.15s ease-out;
}

.site-nav__link:hover {
	background: var(--sn-wash-soft);
}

.site-nav__icon {
	--tone: var(--sn-ink);
	--tone-bg: var(--sn-mist);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: var(--tone-bg);
	color: var(--tone);
	font-size: 1.15em;
	transition: transform 0.15s ease-out;
}

.site-nav__link:hover .site-nav__icon {
	transform: scale(1.06);
}

/* Theme palette tones (icon tiles + featured cards), matching the old features menu */
.site-nav__tone--primary { --tone: var(--sn-orange); --tone-bg: var(--sn-wash); }
.site-nav__tone--blue { --tone: var(--bs-blue, #3f78e0); --tone-bg: var(--bs-pale-blue, #e0e9fa); }
.site-nav__tone--sky { --tone: var(--bs-sky, #5eb9f0); --tone-bg: var(--bs-pale-sky, #e5f4fd); }
.site-nav__tone--purple { --tone: #747ed1; --tone-bg: var(--bs-pale-purple, #e9eaf8); }
.site-nav__tone--grape { --tone: var(--bs-grape, #605dba); --tone-bg: var(--bs-pale-grape, #e6e5f4); }
.site-nav__tone--violet { --tone: var(--bs-violet, #a07cc5); --tone-bg: var(--bs-pale-violet, #f0eaf6); }
.site-nav__tone--pink { --tone: #d16b86; --tone-bg: var(--bs-pale-pink, #f8e7ec); }
.site-nav__tone--fuchsia { --tone: var(--bs-fuchsia, #e668b3); --tone-bg: var(--bs-pale-fuchsia, #fbe7f3); }
.site-nav__tone--red { --tone: var(--bs-red, #e2626b); --tone-bg: var(--bs-pale-red, #fae6e7); }
.site-nav__tone--orange { --tone: var(--bs-orange, #f78b77); --tone-bg: var(--bs-pale-orange, #feece9); }
.site-nav__tone--yellow { --tone: var(--bs-yellow, #fab758); --tone-bg: var(--bs-pale-yellow, #fef3e4); }
.site-nav__tone--green { --tone: var(--bs-green, #45c4a0); --tone-bg: var(--bs-pale-green, #e1f6f0); }
.site-nav__tone--leaf { --tone: var(--bs-leaf, #7cb798); --tone-bg: var(--bs-pale-leaf, #eaf3ef); }
.site-nav__tone--aqua { --tone: var(--bs-aqua, #54a8c7); --tone-bg: var(--bs-pale-aqua, #e4f1f6); }
.site-nav__tone--navy { --tone: #343f52; --tone-bg: var(--bs-pale-navy, #dfe0e3); }

.site-nav__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.site-nav__label {
	font-weight: 600;
	line-height: 1.3;
}

.site-nav__label .uil {
	font-size: 0.9em;
	color: var(--sn-muted);
}

.site-nav__desc {
	color: var(--sn-muted);
	font-size: 0.8125em;
	line-height: 1.4;
}

.site-nav__col--compact .site-nav__link {
	padding: 6px 10px;
}

.site-nav__col--compact .site-nav__label {
	font-weight: 500;
}

/* Featured cards: tinted with the link's tone so they read apart from the plain lists */
.site-nav__feature-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 12px;
}

.site-nav__feature {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 100%;
	padding: 16px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: var(--tone-bg);
	transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}

.site-nav a.site-nav__feature:hover {
	border-color: var(--tone);
	box-shadow: 0 5px 15px rgba(85, 85, 85, 0.1);
}

.site-nav__feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	background: var(--sn-white);
	color: var(--tone);
	font-size: 1.4em;
}

.site-nav__feature .site-nav__desc {
	display: block;
	color: var(--sn-ink);
	opacity: 0.75;
}

.site-nav__feature-arrow {
	margin-left: auto;
	color: var(--tone);
	font-size: 1.15em;
	transition: transform 0.15s ease-out;
}

.site-nav__feature:hover .site-nav__feature-arrow {
	transform: translateX(3px);
}

/* Shop cards: vertical, tinted like the featured cards */
.site-nav__cards {
	grid-column: 1 / -1;
}

.site-nav__card-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
}

.site-nav__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	height: 100%;
	padding: 20px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: var(--tone-bg);
	transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out, transform 0.15s ease-out;
}

.site-nav a.site-nav__card:hover {
	border-color: var(--tone);
	box-shadow: 0 5px 15px rgba(85, 85, 85, 0.1);
	transform: translateY(-2px);
}

.site-nav__card .site-nav__feature-icon {
	margin-bottom: 10px;
}

.site-nav__card .site-nav__label {
	font-size: 1.125em;
}

.site-nav__card .site-nav__desc {
	display: block;
	color: var(--sn-ink);
	opacity: 0.75;
}

.site-nav__card-cta {
	margin-top: auto;
	padding-top: 12px;
	white-space: nowrap;
	color: var(--sn-ink);
	font-weight: 700;
}

.site-nav__card-cta .uil {
	display: inline-block;
	color: var(--tone);
	transition: transform 0.15s ease-out;
}

.site-nav__card:hover .site-nav__card-cta .uil {
	transform: translateX(3px);
}

.site-nav__promo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 24px;
	border-radius: 8px;
	background: var(--sn-mist);
}

.site-nav__promo-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 16px;
	border-radius: 8px;
	background: var(--sn-wash);
	color: var(--sn-orange-deep);
	font-size: 1.4em;
}

.site-nav__promo-title {
	margin: 0 0 6px;
	color: var(--sn-ink);
	font-size: 1.125em;
	font-weight: 700;
	line-height: 1.3;
}

.site-nav__promo-text {
	margin: 0 0 16px;
	color: var(--sn-muted);
	font-size: 0.8125em;
	line-height: 1.5;
}

/* Dark promo: a destination panel (Stores) that shouldn't read as another category card.
   Brand gradient under a navy wash that's heaviest where the text sits. */
.site-nav__promo--dark {
	background:
		linear-gradient(160deg, rgba(25, 30, 58, 0.75) 0%, rgba(25, 30, 58, 0.45) 50%, rgba(25, 30, 58, 0) 90%),
		url("../img/gradients/e2c-gradient-flipped-560.webp") 0 0 / 170% auto no-repeat,
		var(--sn-ink);
}

/* Tall panels (spanning the featured row) scale the gradient to height instead */
.site-nav__panel-inner.has-featured .site-nav__promo--dark {
	background-size: auto, cover, auto;
}

.site-nav__promo--dark .site-nav__promo-title {
	color: var(--sn-white);
}

.site-nav__promo--dark .site-nav__promo-text {
	color: #c9ccd8;
}

.site-nav .site-nav__promo--dark .site-nav__promo-cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px 16px;
	border-radius: 5px;
	background: var(--sn-white);
	color: var(--sn-ink);
	text-decoration: none;
}

.site-nav .site-nav__promo--dark .site-nav__promo-cta:hover {
	background: var(--sn-mist);
	text-decoration: none;
}

.site-nav__promo-cta,
.site-nav__more {
	margin-top: auto;
	font-weight: 600;
}

.site-nav__promo-cta .uil,
.site-nav__more .uil {
	display: inline-block;
	transition: transform 0.15s ease-out;
}

.site-nav__promo-cta:hover .uil,
.site-nav__more:hover .uil {
	transform: translateX(3px);
}

.site-nav__promo-cta:hover,
.site-nav__more:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.site-nav__drawer-head,
.site-nav__drawer-foot {
	display: none;
}

.site-nav__burger,
.site-nav__close {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--sn-ink);
	font-size: 1.6em;
	cursor: pointer;
}

.site-nav__burger:hover,
.site-nav__close:hover {
	background: var(--sn-mist);
}

/* Desktop */

@media (min-width: 992px) {
	.site-nav__drawer {
		display: flex;
		flex: 1;
		align-self: stretch;
	}

	.site-nav__menu {
		display: flex;
		align-items: center;
		gap: 12px;
		margin: 0 auto !important;
	}

	.site-nav__item {
		display: flex;
		align-items: center;
		height: 100%;
	}

	.site-nav__item--sm {
		position: relative;
	}

	.site-nav__panel {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--sn-white);
		border-top: 1px solid var(--sn-line);
		box-shadow: var(--sn-float);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-6px);
		transition: opacity 0.18s var(--sn-ease), transform 0.18s var(--sn-ease), visibility 0s linear 0.18s;
	}

	.site-nav__item.is-open > .site-nav__panel {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition-delay: 0s;
	}

	/* Until site-nav.js is ready, open panels on hover/focus so the menu never feels dead */
	.site-nav:not(.is-ready) .site-nav__item:focus-within > .site-nav__panel {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition-delay: 0s;
	}

	.site-nav__panel--sm {
		left: 50%;
		right: auto;
		width: 360px;
		margin-left: -180px;
		border: 1px solid var(--sn-line);
		border-radius: 8px;
		top: calc(100% - 8px);
	}

	.site-nav__panel-inner {
		display: grid;
		grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
		gap: 16px 24px;
		padding-top: 28px;
		padding-bottom: 28px;
	}

	.site-nav__panel-inner.has-promo {
		grid-template-columns: repeat(var(--cols), minmax(0, 1fr)) minmax(240px, 280px);
	}

	.site-nav__panel-inner.has-featured.has-promo .site-nav__promo {
		grid-column: -2 / -1;
		grid-row: 1 / span 2;
	}

	.site-nav__card-list {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}

	/* Heading gets its own row so the side panel lines up with the cards */
	.site-nav__panel-inner.has-cards .site-nav__cards {
		display: contents;
	}

	.site-nav__panel-inner.has-cards .site-nav__cards > .site-nav__col-title {
		grid-column: 1 / -1;
		margin-bottom: -8px;
	}

	.site-nav__panel-inner.has-cards .site-nav__card-list {
		grid-column: 1 / -1;
	}

	.site-nav__panel-inner.has-cards.has-promo .site-nav__card-list {
		grid-column: 1 / -2;
	}

	.site-nav__panel-inner.has-cards.has-promo .site-nav__promo {
		grid-column: -2 / -1;
		grid-row: 2;
	}

	.site-nav__featured {
		grid-column: 1 / -1;
		padding-top: 8px;
	}

	.site-nav__panel-inner.has-promo .site-nav__featured {
		grid-column: 1 / -2;
	}

	.site-nav__panel--sm .site-nav__panel-inner {
		padding: 16px 10px;
	}

	.site-nav__panel-foot {
		padding-top: 14px;
		padding-bottom: 14px;
		border-top: 1px solid var(--sn-line);
	}

	.site-nav__more {
		padding: 0 10px;
	}
}

@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
	.site-nav:not(.is-ready) .site-nav__item:hover > .site-nav__panel {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition-delay: 0s;
	}
}

@media (min-width: 992px) and (max-width: 1199.98px) {
	.site-nav__menu {
		gap: 6px;
	}

	.site-nav__card-list {
		gap: 12px;
	}

	.site-nav__card {
		padding: 16px;
	}

	.site-nav__trigger {
		padding: 8px 9px;
	}

	.site-nav__desc {
		display: none;
	}

	.site-nav__link {
		align-items: center;
	}

	.site-nav__panel-inner.has-promo {
		grid-template-columns: repeat(var(--cols), minmax(0, 1fr)) 200px;
		gap: 16px;
	}

	.site-nav__promo {
		padding: 16px;
	}
}

/* Mobile drawer */

@media (max-width: 991.98px) {
	.site-nav {
		--sn-h: 64px;
	}

	.site-nav-slot {
		height: 64px;
	}

	.site-nav__burger,
	.site-nav__close {
		display: inline-flex;
	}

	.site-nav__actions .site-nav__login {
		display: none;
	}

	.site-nav__actions .site-nav__btn {
		min-height: 38px;
		padding: 6px 14px;
	}

	.site-nav__drawer {
		position: fixed;
		inset: 0;
		z-index: 1050;
		display: flex;
		flex-direction: column;
		background: var(--sn-white);
		overflow-y: auto;
		overscroll-behavior: contain;
		visibility: hidden;
		opacity: 0;
		transform: translateX(16px);
		transition: opacity 0.22s var(--sn-ease), transform 0.22s var(--sn-ease), visibility 0s linear 0.22s;
	}

	.site-nav.is-drawer-open .site-nav__drawer {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition-delay: 0s;
	}

	.site-nav__drawer-head {
		position: sticky;
		top: 0;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 64px;
		padding: 0 16px;
		background: var(--sn-white);
		border-bottom: 1px solid var(--sn-line);
	}

	.site-nav__menu {
		padding: 8px 16px !important;
	}

	.site-nav__item {
		border-bottom: 1px solid var(--sn-line);
	}

	.site-nav__trigger {
		justify-content: space-between;
		width: 100%;
		min-height: 56px;
		padding: 12px 4px;
		font-size: 1.125em;
	}

	.site-nav__trigger:hover,
	.site-nav__item.is-open > .site-nav__trigger {
		background: none;
	}

	.site-nav__caret {
		width: 20px;
		height: 20px;
	}

	.site-nav__panel {
		display: none;
		padding-bottom: 12px;
	}

	.site-nav__item.is-open > .site-nav__panel {
		display: block;
	}

	.site-nav__panel .container {
		padding: 0;
		max-width: none;
	}

	.site-nav__panel-inner {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.site-nav__desc {
		display: none;
	}

	.site-nav__link {
		align-items: center;
		min-height: 44px;
		padding: 6px 4px;
	}

	.site-nav__col-title {
		padding: 0 4px;
	}

	.site-nav__icon {
		width: 32px;
		height: 32px;
		font-size: 1em;
	}

	.site-nav__promo {
		padding: 16px;
	}

	.site-nav__promo-icon {
		display: none;
	}

	.site-nav__feature {
		padding: 12px;
	}

	.site-nav__card-list {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.site-nav__card {
		flex-direction: row;
		align-items: center;
		gap: 12px;
		padding: 10px 12px;
	}

	.site-nav__card .site-nav__feature-icon {
		width: 36px;
		height: 36px;
		margin-bottom: 0;
		font-size: 1.15em;
	}

	.site-nav__card .site-nav__label {
		font-size: 1em;
	}

	.site-nav__card .site-nav__desc,
	.site-nav__card-cta {
		display: none;
	}

	.site-nav__more {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0 4px;
	}

	.site-nav__drawer-foot {
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin-top: auto;
		padding: 16px;
	}

	.site-nav__drawer-foot .site-nav__btn {
		min-height: 48px;
	}

	.site-nav__drawer-social {
		display: flex;
		justify-content: center;
		gap: 4px;
		margin-top: 6px;
	}

	.site-nav__drawer-social a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 8px;
		color: var(--sn-muted);
		font-size: 1.15em;
	}

	.site-nav .site-nav__drawer-social a:hover {
		color: var(--sn-ink);
		background: var(--sn-mist);
	}
}

@media (max-width: 359.98px) {
	.site-nav__actions .site-nav__btn {
		display: none;
	}
}

html.site-nav-locked {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.site-nav,
	.site-nav *,
	.site-nav *::before {
		animation: none !important;
		transition: none !important;
	}
}