:root {

	/* BORDER */
	--nav-border-color: var(--gray-light);
	--nav-border-width: 1px;
	--nav-border-style: solid;
	--nav-border: var(--nav-border-width) var(--nav-border-style) var(--nav-border-color);
	--nav-border-radius: 10px;

	/* ANIMATION */
	--nav-transition-duration: 0.25s;
	--nav-transition-timing: ease-out;
	--nav-transform-origin: top right;

	/* SUBMENU TOGGLE */
	--nav-submenu-toggle-width: 30px;
	--nav-submenu-toggle-icon-size: 1.25em;

	/* SUBMENU DROPDOWN */
	--nav-submenu-min-width: 100px;
	--nav-submenu-padding: 3px;
	--nav-submenu-item-padding: var(--space-xxsmall) 0;

	/* TYPOGRAPHY */
	--nav-link-font: var(--label-large);
	--nav-link-decoration: none;
	--nav-link-white-space: nowrap;
	--nav-link-font-weight: var(--typeface-weight-body-bold);
	--nav-submenu-font-weight: var(--typeface-weight-body-medium);

	/* COLORS */
	--nav-surface: var(--color-surface);
	--nav-shadow: var(--box-shadow);
	--nav-link-color: inherit;
	--nav-link-current-color: var(--color-text);
	--nav-icon-color: var(--color-primary);

	/* SPACING */
	--nav-desktop-offset: 5px;
	--nav-item-gap: var(--space-large);
	--nav-item-padding: var(--space-small) var(--space-normal);
	--nav-padding: var(--space-xxsmall) var(--space-normal) var(--space-xsmall);
	--nav-padding-block: 5px;
	--nav-extra-item-padding: 0;
	--nav-icon-gap: var(--space-xsmall);
	--nav-item-max-width-offset: 50px;

	/* CATALOG ICON — inline SVG; catalog uses a custom glyph rather than the icon font */
	--icon-catalog-svg: url('data:image/svg+xml,<svg width="17" height="21" viewBox="0 0 17 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.6484 0.330002H2.46875C1.1075 0.330002 0 1.43746 0 2.79871V17.8613C0 19.2225 1.1075 20.33 2.46871 20.33H15.6484C15.972 20.33 16.2343 20.0677 16.2343 19.7441V15.9784V0.915939C16.2344 0.592346 15.9721 0.330002 15.6484 0.330002ZM3.7943 7.23633C3.86324 7.02422 4.04656 6.86961 4.26727 6.83758L6.56457 6.50383L7.59176 4.42227C7.69043 4.22227 7.89414 4.09563 8.11715 4.09563C8.34023 4.09563 8.54395 4.22223 8.64262 4.42223L9.66992 6.50383L11.967 6.83758C12.1877 6.86961 12.3711 7.02422 12.44 7.23633C12.509 7.44844 12.4515 7.68129 12.2918 7.83695L10.6297 9.45731L11.0166 11.7133C11.0262 11.7554 11.0313 11.7992 11.0313 11.8442C11.0313 12.1675 10.7694 12.4297 10.4462 12.4302C10.4457 12.4302 10.4451 12.4302 10.4445 12.4302C10.3512 12.4302 10.2576 12.4079 10.1719 12.3629L8.11719 11.2826L6.06254 12.3628C5.9768 12.4079 5.88316 12.4302 5.78992 12.4302C5.6684 12.4302 5.54754 12.3924 5.44547 12.3182C5.26504 12.1872 5.17461 11.965 5.21234 11.7452L5.60484 9.45735L3.94254 7.83703C3.78289 7.68129 3.72539 7.44844 3.7943 7.23633ZM15.0625 19.1581H2.46875C1.75363 19.1581 1.17188 18.5763 1.17188 17.8613C1.17188 17.8366 1.1727 17.8121 1.1741 17.7878C1.21234 17.1067 1.77836 16.5644 2.46875 16.5644H10.9609H15.0625V19.1581Z" fill="%23C81E11"/></svg>');
}

/* DO NOT EDIT BELOW THIS LINE — these are the actual styles using the above tokens. */

/* ===== BASE MENU LIST RESET ===== */

.menu,
.sub-menu {
	list-style: none;
}

.main-navigation ul.sub-menu {
	display: flex;
	flex-direction: column;
	gap: var(--space-xsmall);
	list-style: none;
}

/* ===== MAIN NAVIGATION CONTAINER ===== */

.main-navigation {
	flex-grow: 1;

	@media (min-width: 78.75em) {
		display: flex;
		justify-content: flex-end;
	}
}

/* Block editor sets flex-direction: column on .wp-block-group; override to row at all sizes */
.wp-block-group.site-header .wp-block-group.main-navigation {
	align-items: center;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0;

	@media (min-width: 78.75em) {
		justify-content: flex-end;
	}
}

.main-navigation .menu {
	margin: 0;

	@media (min-width: 78.75em) {
		display: flex;
		justify-content: flex-end;
	}
}

.main-navigation .wp-block-navigation {

	@media (min-width: 78.75em) {
		padding-block: var(--nav-padding-block);
	}
}

/* ===== MOBILE MENU DRAWER ===== */

/*
 * Rendered by annalee-dolls/primary-nav block.
 * Toggle state managed by the FTM JS toggle system (.toggled class on .mobile-menu,
 * triggered by .mobile-menu-toggle in site-header.css).
 */

.mobile-menu {
	visibility: hidden;
	position: absolute;
	inset: var(--offscreen) 0 auto var(--offscreen);
	background-color: var(--nav-surface);
	box-shadow: var(--nav-shadow);
	transform: scale(0);
	transform-origin: var(--nav-transform-origin);
	transition: transform var(--nav-transition-duration) var(--nav-transition-timing);
	z-index: var(--z-layer-header-mobile-menu);

	&.toggled {
		visibility: visible;
		inset: 100% 0 auto 0;
		transform: scale(1);
	}

	@media (min-width: 78.75em) {
		box-shadow: none;
		inset: auto 0 auto auto;
		margin-inline-start: auto;
		margin-block-start: var(--nav-desktop-offset);
		position: static;
		transform: none;
		visibility: visible;
		width: auto;
	}
}

/* Reset spacing for elements inside the mobile drawer */
.mobile-menu .main-menu {
	padding-left: 0;
	margin-top: 0;
	margin-bottom: 0;
}

.mobile-menu .sub-menu {
	margin-left: 0;
	padding-left: 0;
}

.mobile-menu .al-extra-links-mobile {
	margin-top: 0;
}

/* ===== PRIMARY NAV: TOP-LEVEL LIST ITEMS ===== */

.main-navigation .menu:not(.tabs-menu) > li {
	border-top: var(--nav-border);

	@media (min-width: 78.75em) {
		border-top: none;
		display: inline-flex;
		margin-inline-start: var(--nav-item-gap);
	}
}

.main-navigation .menu.main-menu > li:first-child {
	border-top: none;
}

.main-navigation .menu:not(.tabs-menu) li {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	padding: var(--nav-item-padding);

	@media (min-width: 78.75em) {
		padding: 0;
	}

	li {
		padding: 0;
	}
}

/* ===== PRIMARY NAV: LINKS ===== */

.main-navigation a:not(.button) {
	color: var(--nav-link-color);
	font: var(--nav-link-font);
	text-decoration: var(--nav-link-decoration);
	font-weight: var(--nav-link-font-weight);

}

.main-navigation a[aria-current="page"] {
	color: var(--nav-link-current-color);
}

.main-navigation .sub-menu a:not(.button) {
	font-weight: var(--nav-submenu-font-weight);
}

.sub-menu a,
.al-primary-menu-extra a {

	@media (min-width: 78.75em) {
		white-space: var(--nav-link-white-space);
	}
}

/* ===== SUB-MENU TOGGLE BUTTON ===== */

.main-navigation .sub-menu-toggle,
.main-navigation .wp-block-navigation .wp-block-navigation__submenu-icon {
	align-self: center;
	background-color: transparent !important;
	border: 0;
	border-radius: 0;
	color: inherit;
	margin-inline-start: auto;
	padding: 0;
	width: var(--nav-submenu-toggle-width);
}

.main-navigation .sub-menu-toggle {
	font-size: var(--nav-submenu-toggle-icon-size);
}

.sub-menu-toggle::after {
	font: var(--icon-font);
	-webkit-font-smoothing: var(--icon-webkit-font-smoothing, antialiased);
	-moz-osx-font-smoothing: var(--icon-moz-osx-font-smoothing, grayscale);
}

.sub-menu-toggle[aria-expanded="false"]::after {
	content: var(--icon-ftm-angle-down);
}

.sub-menu-toggle[aria-expanded="true"]::after {
	content: var(--icon-ftm-angle-up);
}

.menu-item-has-children > a {
	max-width: calc(100% - var(--nav-item-max-width-offset));

	@media (min-width: 78.75em) {
		max-width: none;
	}
}

/* ===== SUB-MENU DROPDOWNS ===== */

.main-navigation li.menu-item-has-children {

	@media (min-width: 78.75em) {
		position: relative;
	}
}

.main-navigation .sub-menu {
	position: absolute;
	inset: var(--offscreen) auto auto var(--offscreen);
	width: 100%;
	visibility: hidden;
	transition: transform var(--nav-transition-duration) var(--nav-transition-timing);
	transform: scale(0);
	transform-origin: var(--nav-transform-origin);

	@media (min-width: 78.75em) {
		width: auto;
	}
}

.main-navigation .menu.main-menu > li.toggled > .sub-menu,
.main-navigation .menu.main-menu > li:hover > .sub-menu {

	@media (min-width: 78.75em) {
		background-color: var(--nav-surface);
		border: var(--nav-border);
		border-radius: var(--nav-border-radius);
		box-shadow: var(--nav-shadow);
		inset: 100% 0 auto auto;
		margin-top: 0;
		padding: var(--nav-padding);
		position: absolute;
		transform: scale(1);
		visibility: visible;
		width: auto;
		z-index: var(--z-layer-header-controls);
	}
}

.main-navigation li.toggled-on-load > .sub-menu,
.main-navigation li.toggled > .sub-menu {
	position: static;
}

.main-navigation .menu > li.toggled-on-load > .sub-menu {

	@media (min-width: 78.75em) {
		position: absolute;
		visibility: hidden;
	}
}

.main-navigation .toggled-on-load > .sub-menu,
.main-navigation .toggled > .sub-menu {
	visibility: visible;
	transform: scale(1);
}

.main-navigation .sub-menu li {
	padding: var(--nav-submenu-item-padding);
}

.main-navigation .wp-block-navigation ul.wp-block-navigation {

	@media (min-width: 78.75em) {
		gap: var(--nav-item-gap);
	}
}

.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {

	@media (min-width: 78.75em) {
		border-radius: var(--nav-border-radius);
		min-width: var(--nav-submenu-min-width);
		padding: var(--nav-submenu-padding);
	}
}

/* ===== UTILITY / EXTRA LINKS ===== */

/* Desktop utility nav (phone, catalog, rewards, my account) */
.al-primary-menu-extra {
	display: none;

	@media (min-width: 78.75em) {
		display: flex;
	}
}

.al-primary-menu-extra li,
.wp-block-navigation.al-primary-menu-extra .wp-block-navigation-item {

	@media (min-width: 78.75em) {
		padding: var(--nav-extra-item-padding);
	}
}

.al-primary-menu-extra a,
.wp-block-navigation.al-primary-menu-extra .wp-block-navigation-item__content {
	display: flex;
}

/* Icon pseudo-elements — shared between desktop extra row and mobile menu extra links */
.wp-block-navigation.al-primary-menu-extra .wp-block-navigation-item__content[href="/my-account/"]::before,
.wp-block-navigation.al-primary-menu-extra .wp-block-navigation-item__content[href="/rewards/"]::before,
.wp-block-navigation.al-primary-menu-extra .wp-block-navigation-item__content[href^="tel:"]::before,
.wp-block-navigation.al-primary-menu-extra .wp-block-navigation-item__content[href*="/catalog"]::before,
.al-extra-links-mobile a[href^="tel:"]::before,
.al-extra-links-mobile a[href*="/catalog"]::before,
.al-extra-links-mobile a[href="/rewards/"]::before,
.al-extra-links-mobile a[href="/my-account/"]::before {
	font: var(--icon-font);
	-webkit-font-smoothing: var(--icon-webkit-font-smoothing, antialiased);
	-moz-osx-font-smoothing: var(--icon-moz-osx-font-smoothing, grayscale);
	color: var(--nav-icon-color);
	margin-inline-end: var(--nav-icon-gap);
	align-self: center;
}

.wp-block-navigation.al-primary-menu-extra .wp-block-navigation-item__content[href="/my-account/"]::before,
.al-extra-links-mobile a[href="/my-account/"]::before {
	content: var(--icon-ftm-user);
}

.wp-block-navigation.al-primary-menu-extra .wp-block-navigation-item__content[href="/rewards/"]::before,
.al-extra-links-mobile a[href="/rewards/"]::before {
	content: var(--icon-ftm-dollar);
}

.wp-block-navigation.al-primary-menu-extra .wp-block-navigation-item__content[href^="tel:"]::before,
.al-extra-links-mobile a[href^="tel:"]::before {
	content: var(--icon-ftm-phone);
}

.wp-block-navigation.al-primary-menu-extra .wp-block-navigation-item__content[href*="/catalog"]::before,
.al-extra-links-mobile a[href*="/catalog"]::before {
	content: var(--icon-catalog-svg);
}

/* Block editor overrides .al-primary-menu-extra display; replicate show/hide here */
.wp-block-group.site-header .wp-block-navigation.al-primary-menu-extra {
	display: none !important;

	@media (min-width: 78.75em) {
		display: flex !important;
	}
}

/* Mobile extra links — rendered inside the mobile-menu nav drawer */
.al-extra-links-mobile {
	border-top: var(--nav-border);
	list-style: none;
	margin: 0;
	padding: 0;

	@media (min-width: 78.75em) {
		display: none;
	}
}

.al-extra-links-mobile > li {
	display: flex;
	padding: var(--nav-item-padding);
	border-top: var(--nav-border);

	&:first-child {
		border-top: none;
	}
}

.al-extra-links-mobile a {
	align-items: center;
	display: flex;
}

/* ===== BLOCK EDITOR OVERRIDES ===== */

/* Hide redundant secondary nav items on desktop (duplicates extra row links) */
.wp-block-navigation-item.al-header-secondary-link {

	@media (min-width: 78.75em) {
		display: none;
	}
}