/* ==========================================================================
   AFFANECOM - mobile navigation
   Astra's defaults leave the hamburger on its global link blue and the
   off-canvas menu as an unstyled list. Everything below is scoped to the
   mobile header and drawer so the desktop nav is untouched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hamburger trigger
   -------------------------------------------------------------------------- */
.ast-header-break-point #masthead .ast-button-wrap .main-header-menu-toggle,
.ast-header-break-point #masthead .ast-mobile-menu-trigger-minimal,
.ast-header-break-point #masthead .ast-mobile-menu-trigger-fill{
	width:42px !important;
	height:42px !important;
	padding:0 !important;
	display:grid !important;
	place-items:center;
	border:1px solid #E4E4DE !important;
	border-radius:11px !important;
	background:transparent !important;
	color:#252525 !important;
	box-shadow:none !important;
	transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.ast-header-break-point #masthead .ast-mobile-svg,
.ast-header-break-point #masthead .main-header-menu-toggle svg{
	width:19px !important;
	height:19px !important;
	fill:currentColor !important;
	color:inherit !important;
}
.ast-header-break-point #masthead .main-header-menu-toggle:hover,
.ast-header-break-point #masthead .main-header-menu-toggle:focus-visible{
	background:#252525 !important;
	border-color:#252525 !important;
	color:#fff !important;
}

/* Over the transparent hero the trigger has to read light. There is no hover
   on touch, so this keys off the scroll state class only. */
body.home.ast-header-break-point #masthead:not(.af-solid) .main-header-menu-toggle,
body.home.ast-header-break-point #masthead:not(.af-solid) .ast-mobile-menu-trigger-minimal{
	color:#fff !important;
	border-color:rgba(255,255,255,.42) !important;
}

/* --------------------------------------------------------------------------
   Drawer shell
   -------------------------------------------------------------------------- */
.ast-mobile-popup-drawer .ast-mobile-popup-inner{
	max-width:370px !important;
	width:88% !important;
	height:100% !important;
	background:#fff !important;
	box-shadow:-18px 0 60px rgba(37,37,37,.20) !important;
}
.ast-mobile-popup-drawer .ast-mobile-popup-overlay{
	background:rgba(37,37,37,.55) !important;
	backdrop-filter:blur(2px);
}
.ast-mobile-popup-drawer .ast-mobile-popup-header{
	padding:16px 20px !important;
	border-bottom:1px solid #EFEFEB;
	min-height:auto !important;
}
.ast-mobile-popup-drawer .menu-toggle-close{
	width:40px;
	height:40px;
	display:grid;
	place-items:center;
	border-radius:10px;
	border:1px solid #E4E4DE !important;
	background:#fff !important;
	color:#252525 !important;
	font-size:18px !important;
	transition:background-color .18s ease, color .18s ease;
}
.ast-mobile-popup-drawer .menu-toggle-close:hover{
	background:#252525 !important;
	color:#fff !important;
}
.ast-mobile-popup-drawer .ast-mobile-popup-content{
	padding:6px 0 32px !important;
}

/* --------------------------------------------------------------------------
   Top level items
   -------------------------------------------------------------------------- */
#ast-hf-mobile-menu{
	display:block !important;
	padding:0 !important;
	margin:0 !important;
}
#ast-hf-mobile-menu > .menu-item{
	border-bottom:1px solid #F2F2EE;
	position:relative;
}
#ast-hf-mobile-menu > .menu-item:last-child{ border-bottom:0; }

#ast-hf-mobile-menu > .menu-item > .menu-link{
	display:flex !important;
	align-items:center;
	padding:16px 22px !important;
	border:0 !important;
	font-family:"Inter",sans-serif !important;
	font-size:13.5px !important;
	font-weight:800 !important;
	letter-spacing:.1em !important;
	text-transform:uppercase;
	line-height:1.3 !important;
	color:#252525 !important;
	background:transparent !important;
	transition:background-color .16s ease, color .16s ease, padding-left .16s ease;
}
#ast-hf-mobile-menu > .menu-item > .menu-link:hover,
#ast-hf-mobile-menu > .menu-item:focus-within > .menu-link{
	color:#B85A0E !important;
	background:#FBF7F3 !important;
	padding-left:26px !important;
}

/* Current page: an orange rule down the left edge instead of Astra's
   full-width underline, which read as a divider rather than a state. */
#ast-hf-mobile-menu > .current-menu-item > .menu-link,
#ast-hf-mobile-menu > .current_page_item > .menu-link{
	color:#B85A0E !important;
	background:#FBF7F3 !important;
	box-shadow:inset 3px 0 0 #F47C20;
}

/* SALE badge carries over from the desktop nav. */
#ast-hf-mobile-menu > .nav-sale > .menu-link > .menu-text::after{
	content:"UP TO 40%";
	display:inline-block;
	margin-left:9px;
	vertical-align:middle;
	background:#F47C20;
	color:#fff;
	font-size:8px;
	font-weight:800;
	letter-spacing:.08em;
	padding:3px 6px;
	border-radius:4px;
	line-height:1;
}

/* --------------------------------------------------------------------------
   Submenu toggle
   -------------------------------------------------------------------------- */
#ast-hf-mobile-menu .ast-menu-toggle{
	position:absolute !important;
	right:16px;
	top:8px;
	width:34px !important;
	height:34px !important;
	padding:0 !important;
	display:grid !important;
	place-items:center;
	border:1px solid #E8E8E2 !important;
	border-radius:9px !important;
	background:#F7F7F5 !important;
	color:#252525 !important;
	transition:background-color .16s ease, color .16s ease, transform .2s ease;
}
#ast-hf-mobile-menu .ast-menu-toggle:hover{
	background:#252525 !important;
	border-color:#252525 !important;
	color:#fff !important;
}
#ast-hf-mobile-menu .ast-menu-toggle svg,
#ast-hf-mobile-menu .ast-menu-toggle .ast-icon{
	width:13px;
	height:13px;
	fill:currentColor !important;
	color:inherit !important;
	transition:transform .2s ease;
}
#ast-hf-mobile-menu .menu-item.ast-submenu-expanded > .ast-menu-toggle svg,
#ast-hf-mobile-menu .menu-item.ast-submenu-expanded > .ast-menu-toggle .ast-icon{
	transform:rotate(180deg);
}

/* --------------------------------------------------------------------------
   Submenus
   -------------------------------------------------------------------------- */
#ast-hf-mobile-menu .sub-menu{
	background:#FAFAF8 !important;
	border-top:1px solid #F2F2EE;
	padding:4px 0 8px !important;
	margin:0 !important;
}
#ast-hf-mobile-menu .sub-menu .menu-link{
	padding:11px 22px 11px 34px !important;
	border:0 !important;
	font-family:"Inter",sans-serif !important;
	font-size:14px !important;
	font-weight:500 !important;
	letter-spacing:0 !important;
	text-transform:none !important;
	color:#5F5F5B !important;
	background:transparent !important;
}
#ast-hf-mobile-menu .sub-menu .menu-link:hover,
#ast-hf-mobile-menu .sub-menu .current-menu-item > .menu-link{
	color:#B85A0E !important;
	background:#F4EFE9 !important;
}
#ast-hf-mobile-menu .sub-menu .ast-menu-toggle{ top:2px; }

/* --------------------------------------------------------------------------
   Nothing behind the drawer should show through
   -------------------------------------------------------------------------- */
.ast-mobile-popup-drawer.active .ast-mobile-popup-inner{
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
}

@media (prefers-reduced-motion:reduce){
	.ast-header-break-point #masthead .main-header-menu-toggle,
	#ast-hf-mobile-menu > .menu-item > .menu-link,
	#ast-hf-mobile-menu .ast-menu-toggle,
	#ast-hf-mobile-menu .ast-menu-toggle svg{
		transition:none !important;
	}
}

/* ==========================================================================
   Corrections

   Astra gives the mobile menu the same `main-header-menu` class as the desktop
   nav, so the sliding orange underline written for the desktop bar was firing
   on tap and on the current page. It has no place in a stacked list, where the
   left-edge rule already signals state.
   ========================================================================== */
#ast-hf-mobile-menu .menu-link::after,
#ast-hf-mobile-menu > .menu-item > .menu-link::after,
#ast-hf-mobile-menu > .current-menu-item > .menu-link::after,
#ast-hf-mobile-menu > .current_page_item > .menu-link::after,
.ast-mobile-popup-drawer .main-header-menu > .menu-item > .menu-link::after{
	content:none !important;
	display:none !important;
}

/* --------------------------------------------------------------------------
   Duplicate chevrons

   Astra outputs two arrows on a parent item: a span inside the link
   (.ast-header-navigation-arrow) and a separate toggle button after it. Only
   the button is interactive, so the span was rendering as a loose chevron
   floating beside the styled button. Submenu links carry a third decorative
   arrow before their label.
   -------------------------------------------------------------------------- */
#ast-hf-mobile-menu .menu-link > .ast-header-navigation-arrow,
#ast-hf-mobile-menu .menu-link > .dropdown-menu-toggle,
#ast-hf-mobile-menu .sub-menu .menu-link > .ast-icon{
	display:none !important;
}

/* The toggle button is the only arrow, so give it room and centre its glyph. */
#ast-hf-mobile-menu > .menu-item-has-children > .menu-link{
	padding-right:64px !important;
}
#ast-hf-mobile-menu .ast-menu-toggle{
	top:50% !important;
	transform:translateY(-50%);
	line-height:0 !important;
}
#ast-hf-mobile-menu .ast-menu-toggle .ast-icon{
	display:grid !important;
	place-items:center;
	line-height:0;
	margin:0 !important;
}
#ast-hf-mobile-menu .ast-menu-toggle .ast-icon svg{
	display:block;
	margin:0 !important;
}

/* Submenu rows sit inside a nested list, so their toggle needs its own
   vertical centring rather than inheriting the top-level offset. */
#ast-hf-mobile-menu .sub-menu .ast-menu-toggle{
	top:50% !important;
	transform:translateY(-50%);
	width:30px !important;
	height:30px !important;
}
#ast-hf-mobile-menu .sub-menu .menu-item-has-children > .menu-link{
	padding-right:60px !important;
}

/* Rotation applies to the button, not the glyph, now that it is centred. */
#ast-hf-mobile-menu .menu-item.ast-submenu-expanded > .ast-menu-toggle{
	background:#252525 !important;
	border-color:#252525 !important;
	color:#fff !important;
}
#ast-hf-mobile-menu .menu-item.ast-submenu-expanded > .ast-menu-toggle svg{
	transform:rotate(180deg);
}