/**
 * Hamburger header at all widths.
 * Greg Natale — added Aug 2026.
 *
 * Turns the desktop header into the mobile layout:
 *   hamburger (left) · logo (centred) · icons (right)
 *
 * The theme already does this at <=1299px inside app-new.css
 * (@media max-width:1299px, line ~1440). This file lifts the same
 * behaviour above 1300px and retires the mega menu everywhere.
 *
 * To revert: dequeue this file in functions.php (gn_hamburger_header_assets).
 */

/* ---------------------------------------------------------------
   1. Mega menu retired at every width
   --------------------------------------------------------------- */

body.gn-nav-hamburger #header-content .header-menu {
	display: none !important;
}

/* ---------------------------------------------------------------
   2. Currency selector out of the bar — it still lives in the fly-out
   --------------------------------------------------------------- */

body.gn-nav-hamburger #header-content #currency-select {
	display: none !important;
}

/* ---------------------------------------------------------------
   3. Desktop (>=1300px) adopts the mobile header
   --------------------------------------------------------------- */

@media screen and (min-width: 1300px) {

	/* 3a. Left column: hamburger replaces the logo */

	body.gn-nav-hamburger #header-content .logo.desktop,
	body.gn-nav-hamburger #header-content .logo-sticky.desktop {
		display: none !important;
	}

	body.gn-nav-hamburger #header-content .header-left-container {
		display: flex;
		align-items: center;
	}

	body.gn-nav-hamburger #header-content a#trigger.visible-xs {
		display: block !important;
	}

	body.gn-nav-hamburger #header-content .nav-toggle {
		background: none;
		border: 0;
		height: 30px;
		margin-right: 10px;
		position: relative;
		cursor: pointer;
	}

	body.gn-nav-hamburger #header-content .bar1,
	body.gn-nav-hamburger #header-content .bar2,
	body.gn-nav-hamburger #header-content .bar3 {
		width: 20px;
		height: 2px;
		background-color: #000;
		margin: 6px 0;
		transition: 0.4s;
	}

	/* All three bars the same length. The theme narrows bar2 to 16px;
	   equal margins too, since bar2's `margin: 0 auto` left uneven gaps. */

	body.gn-nav-hamburger #header-content .bar2 {
		width: 20px;
		margin: 6px 0;
	}

	/* Home page: header sits transparent over a dark hero, so the bars
	   start white and flip to black on hover / once the bar is pinned.
	   Mirrors the <=1299px rule in app-new.css (~line 8883). */

	body.gn-nav-hamburger.home #header-content .bar1,
	body.gn-nav-hamburger.home #header-content .bar2,
	body.gn-nav-hamburger.home #header-content .bar3 {
		background-color: #fff;
	}

	body.gn-nav-hamburger.home #header-content:hover .bar1,
	body.gn-nav-hamburger.home #header-content:hover .bar2,
	body.gn-nav-hamburger.home #header-content:hover .bar3,
	body.gn-nav-hamburger.home #header-content .is-ticky .bar1,
	body.gn-nav-hamburger.home #header-content .is-ticky .bar2,
	body.gn-nav-hamburger.home #header-content .is-ticky .bar3 {
		background-color: #000;
	}

	/* 3b. Centre column: the logo */

	body.gn-nav-hamburger #header-content .header-logo-container .logo.mobile {
		display: block !important;
	}

	body.gn-nav-hamburger #header-content .header-logo-container {
		justify-content: center;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	body.gn-nav-hamburger #header-content .header-logo-container .logo.mobile img {
		/* 250px as of 21 Sep; the Aug mock measured 230px. */
		max-width: 250px;
	}

	/* 3c. The bar loses the mega menu's 70px, so hold the height */

	body.gn-nav-hamburger #header-content .header.align-bottom {
		padding-top: 18px;
		padding-bottom: 18px;
	}

	body.gn-nav-hamburger #header-content .header.align-bottom.is-ticky {
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

/* ---------------------------------------------------------------
   4. The fly-out panel itself (>=1300px)

   app-new.css and style.css build the panel's own header — logo, close X,
   currency row — inside @media max-width:1299px, so above 1300px the panel
   header collapsed to 0 height and the currency row went black-on-black.
   Values below mirror style.css (~line 281) and app-new.css (~line 4924).
   --------------------------------------------------------------- */

@media screen and (min-width: 1300px) {

	body.gn-nav-hamburger .mp-menu .header {
		padding: 8px 18px;
		border-width: 1px;
	}

	body.gn-nav-hamburger .mp-menu .header .logo {
		width: 120px;
	}

	body.gn-nav-hamburger .mp-menu .logo.mobile {
		display: block !important;
	}

	body.gn-nav-hamburger .mp-menu .logo img {
		filter: unset !important;
	}

	body.gn-nav-hamburger .mp-cover > .mp-level {
		top: 50px;
	}

	body.gn-nav-hamburger .mp-back {
		border-bottom: none;
		padding: 0.8em 1em 0.6em 1.8em;
	}

	/* Close X */

	body.gn-nav-hamburger .close-menu .bar1,
	body.gn-nav-hamburger .close-menu .bar2,
	body.gn-nav-hamburger .close-menu .bar3 {
		width: 20px;
		height: 2px;
		background-color: #000 !important;
		margin: 6px 0;
		transition: 0.4s;
	}

	body.gn-nav-hamburger .close-menu .bar1 {
		transform: rotate(45deg);
		margin-top: 5px;
	}

	body.gn-nav-hamburger .close-menu .bar3 {
		transform: rotate(-45deg);
		margin-top: -6px;
	}

	/* REMOVED 7 Sep 2026 — the currency row's white-on-black rule.

	   It was written when the panel was the theme's black-headed fly-out. §13
	   now paints the panel #E6E6E6 at every width, so white rendered the
	   Shipping label and the country name almost invisible against the grey —
	   and it out-specified §5's own `#000 !important` (extra
	   body.gn-nav-hamburger + .currency-li), so §5 could not win it back.
	   The row now takes §5's black and matches the ACCOUNT links. */
}

/* ---------------------------------------------------------------
   5. Fly-out footer — account + shipping currency (Amiri pattern)

   Markup lives in header.php inside <nav id="mp-menu">, as a sibling of
   .mp-level (NOT inside it) for two reasons: it can then pin to the panel
   bottom, and mlpushmenu.js binds a "close this level" click handler to
   every div.mp-level — anything inside would shut the menu when clicked.

   Applies at every width, mobile included.
   --------------------------------------------------------------- */

.mp-menu .mp-footer {
	position: absolute;
	bottom: 0;
	left: 0;
	/* .mp-level carries z-index: 99999 (component-pushmenu.css) and is a
	   sibling with an opaque white background — anything lower is painted
	   under it and simply never appears. */
	z-index: 100000;
	width: 100%;
	padding: 0 0 20px;
	background: #fff;
	transition: opacity 0.3s;
}

/* Hide while a sub-level is open, so it can't float over the sub-menu.
   The root .mp-level picks up .mp-level-overlay whenever a child opens. */

#mp-menu:has(> .mp-level.mp-level-overlay) .mp-footer {
	opacity: 0;
	pointer-events: none;
}

/* Account */

.mp-menu .mp-account-toggle {
	display: flex;
	align-items: center;
	padding: 0 18px;
	font-size: 12px;
	letter-spacing: 0.72px;
	text-transform: uppercase;
	color: #000;
	cursor: pointer;
}

.mp-menu .mp-account-toggle .icons {
	margin-right: 9px;
	font-size: 15px;
	color: #000;
}

.mp-menu .mp-account-label {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mp-menu .mp-account-links {
	display: none;
	margin: 10px 0 0;
	padding: 0 18px 0 42px;
	list-style: none;
}

.mp-menu .mp-footer-account.is-open .mp-account-links {
	display: block;
}

.mp-menu .mp-account-links li {
	margin: 0;
}

.mp-menu .mp-account-links li > a {
	display: block;
	padding: 7px 0;
	font-size: 12px;
	letter-spacing: 0.72px;
	text-transform: uppercase;
	color: #000;
	border: 0 !important;
}

/* Shipping / currency.

   The element keeps .currency-li so the plugin's select2 width and caret
   rules still apply, but style.css sets `background-color: #000 !important`
   on that class unscoped (~L387) for the old black bar. Overridden here. */

.mp-menu .mp-footer-currency,
.mp-menu .mp-footer-currency .select2-selection__rendered,
.mp-menu .mp-footer-currency .select2-selection,
.mp-menu .mp-footer-currency .select2-container--default .select2-selection--single .select2-selection__rendered {
	background-color: transparent !important;
	color: #000 !important;
	border: 0 !important;
}

.mp-menu .mp-footer-currency {
	display: flex;
	align-items: center;

	/* §21: same rhythm as a top-level menu row. */
	padding: 7px 40px 12px 49px;
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 0.66px;
	text-transform: none;
}

.mp-menu .mp-shipping-label {
	flex: 0 0 auto;
	margin-right: 8px;
	top: 0;
	font-family: inherit !important;
	text-transform: none !important;
}

.mp-menu .mp-footer-currency .wc-price-based-country {
	/* The header-bar version of this widget is nudged with
	   position:relative; left:-23px; padding-top:31px. Reset it here or the
	   select slides back over the "Shipping:" label. */
	position: static;
	left: auto;
	flex: 0 1 auto;
	width: auto;
	margin: 0;
	padding: 0;
}

.mp-menu .mp-footer-currency .select2-container {
	width: auto !important;
	min-width: 0;
}

.mp-menu .mp-footer-currency .select2-container--default .select2-selection--single {
	height: 14px !important;
	line-height: 14px !important;
}

.mp-menu .mp-footer-currency .select2-container--default .select2-selection--single .select2-selection__rendered {
	position: static;
	top: auto;
	padding: 0 20px 0 0;
	font-family: 'Semplicita Pro' !important;
	font-size: 11px !important;
	line-height: 14px !important;
	letter-spacing: 0.66px;
	margin-top: 0 !important;
	text-align: left;
	text-transform: none !important;
}

/* The theme draws two carets here — a background-image arrow on the rendered
   element and a rotated ">" via ::before. Keep the image, drop the duplicate. */

.mp-menu .mp-footer-currency .select2-container--default .select2-selection--single .select2-selection__rendered::before {
	content: none;
}

/* ---------------------------------------------------------------
   6. Account icon out of the header bar — it lives in the fly-out now
   --------------------------------------------------------------- */

body.gn-nav-hamburger #header-content #header-top-cart li.cart-toggle {
	display: none !important;
}

/* ---------------------------------------------------------------
   7. Fly-out open state — stop the page blowing out horizontally

   app-new.css (~L2648) sets `body.active { overflow:hidden; position:fixed }`
   with no width. A fixed body is shrink-to-fit, so its width resolves to the
   page's max-content — on the home page that's the full slideshow track
   (measured 15,264px at a 1696px viewport). The .mp-pusher then inherits that
   width and the fly-out never slides into view.

   Invisible below 1300px only because the pusher happened to stay near the
   viewport width there; it is the same latent bug. Pinning the body to the
   viewport fixes it at every width.
   --------------------------------------------------------------- */

body.active {
	top: 0;
	left: 0;
	width: 100%;
	max-width: 100vw;
}

/* ---------------------------------------------------------------
   8. Country switcher dropdown

   Labels now read "Australia / AUD $" (see
   woocommerce-product-price-based-on-countries/country-selector.php).
   select2 renders its dropdown at the end of <body>, so .mp-menu can't
   reach it — header-hamburger.js tags it with .gn-country-dropdown on open.
   --------------------------------------------------------------- */

/* select2 writes an inline width on .select2-dropdown to match the (tiny)
   closed control, so this needs !important to widen. */

.gn-country-dropdown .select2-dropdown {
	width: auto !important;
	min-width: 230px;
}

.gn-country-dropdown .select2-results__option {
	white-space: nowrap;
}

/* ---------------------------------------------------------------
   9. Search moved to the left, beside the hamburger

   The <li id="search-top"> was lifted out of #header-top-cart (right) into
   a .header-icons-left list inside .header-left-container — see header.php.
   Its fly-out is position:absolute against the nearest positioned ancestor,
   which is now .header-left-container (it already carries .position-relative),
   so it opens left-to-right from the icon instead of the right edge.
   --------------------------------------------------------------- */

#header-content .header-left-container {
	position: relative;
}

#header-content .header-icons-left {
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;

	/* The list inherits .header-icons-container's `justify-content: space-around`
	   and stretches to fill the left column, so its single item got centred in
	   the leftover space and drifted toward the logo. Shrink to content and
	   pack left, so the icon sits a clean 16px off the hamburger. */
	flex: 0 0 auto;
	justify-content: flex-start;
}

#header-content .header-icons-left li#search-top {
	display: flex !important;
	align-items: center;
	padding: 0;
	margin-left: 10px;
}

/* The theme ships TWO magnifiers and swaps them at 1300px:
 *
 *   @media (min-width:1300px) { .icon-search-mob { display:none } }   app-new ~L5319
 *   @media (max-width:1299px) { .icon-search2   { display:none } }    app-new ~L5347
 *
 * So everything that touches their display or size MUST stay inside a
 * min-width:1300px block. An unscoped `display:flex` on .icon-search2 revives
 * it below 1299 and you get both icons side by side on mobile.
 *
 * Within that block: the theme absolutely-positions the magnifier inside
 * .icon-search2 (with a -4px nudge) because it used to hang off the
 * right-hand icon row. That collapses the box to 0x0, so beside the hamburger
 * the icon drifted left and the gap closed up. Put it back in flow. */

@media screen and (min-width: 1300px) {

	body.gn-nav-hamburger #header-content .header-icons-left .icon-search2 {
		display: flex;
		position: relative;
		align-items: center;
		width: 18px;
		height: 18px;
	}

	body.gn-nav-hamburger #header-content .header-icons-left .icon-search2 .icons {
		position: static;
		top: auto;
		padding: 0;
		font-size: 18px;
		line-height: 1;
	}
}

/* The theme sizes the mobile magnifier at 20px while the desktop one is 18px,
   so beside a 20px hamburger it read noticeably heavier. Match them. */

#header-content .header-icons-left .icon-search-mob .icons {
	font-size: 18px;
	line-height: 1;
}

/* Give the fly-out room to open across the left third of the bar */

#header-content .header-icons-left #search-top .search-form {
	min-width: 260px;
}

/* Equal bars below 1300px too — the theme's own 16px bar2 lives in
   @media max-width:1299px (app-new.css ~L1482) and ~L4076 / ~L5081. */

@media screen and (max-width: 1299px) {
	#header-content .bar1,
	#header-content .bar2,
	#header-content .bar3 {
		width: 20px;
		margin: 6px 0;
	}
}

/* No shrink-down below 991/390 any more. The header is one design at every
   width now, so the hamburger keeps the same 20x2 bars and the search icon
   the same 18px throughout — the theme's smaller mobile sizes made the pair
   look heavier than their desktop counterparts. */

/* ---------------------------------------------------------------
   10. Fly-out close X — even strokes

   The theme builds the X by rotating bar1/bar3 in normal flow and nudging
   them together with margin-top: 5px / -6px. The two strokes end up with
   centres 2px apart vertically, so the X crosses off-centre and reads
   lopsided. Centre both strokes on the same point instead.

   Applies at every width; #mp-menu gives it the specificity to beat both the
   theme's rules and section 4 above.
   --------------------------------------------------------------- */

#mp-menu .close-menu {
	position: relative;
	display: block;
	width: 20px;
	height: 20px;
}

#mp-menu .close-menu .bar1,
#mp-menu .close-menu .bar2,
#mp-menu .close-menu .bar3 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 2px;
	margin: 0;
	background-color: #000 !important;
}

#mp-menu .close-menu .bar1 {
	transform: translate(-50%, -50%) rotate(45deg);
}

#mp-menu .close-menu .bar3 {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* Markup has no bar2 in the close button, but the theme's X styles reference
   it — hide it defensively so a future markup change can't add a third stroke. */

#mp-menu .close-menu .bar2 {
	display: none;
}

/* ---------------------------------------------------------------
   11. Fly-out overlays the page instead of pushing it

   mlpushmenu reveals the panel by translating #mp-pusher (the whole page)
   sideways — the panel sits inside the pusher at translate3d(-100%,0,0) and
   rides in with it. Its `type: 'cover'` option only governs how sub-levels
   stack, not this.

   So: pin the pusher, and give the panel its own transform to slide in over
   the top. _openMenu / _closeMenu still write inline transforms on the
   pusher for every level change; !important makes those no-ops.

   The dimming layer is .mp-pusher::after (z-index 9) and still appears —
   the panel's z-index 99999 keeps it above.
   --------------------------------------------------------------- */

body.active #mp-pusher,
body.active #mp-pusher.mp-pushed {
	transform: none !important;
	-webkit-transform: none !important;
}

.mp-menu {
	transition: transform 0.5s;
}

body.active #mp-menu {
	transform: translate3d(0, 0, 0) !important;
	-webkit-transform: translate3d(0, 0, 0) !important;
}

/* ---------------------------------------------------------------
   12. Fly-out type matched to the old horizontal mega menu

   Measured off .header-menu before it was retired:
     top level   — Semplicita Pro SemiBold, 11px, 0.66px tracking, uppercase
     dropdowns   — Semplicita Pro, 11px, weight 600, 0.8px tracking, no caps

   The fly-out used one treatment for everything (13.3px uppercase SemiBold),
   so the two tiers are re-created here.

   style.css (~L168) sets font-family AND text-transform on `.mp-menu ul li>a`
   with !important, so both need !important to shift.

   Padding is pinned in px to what the em values previously resolved to —
   dropping 13.3px → 11px would otherwise shrink every row by ~4px, and only
   the type was meant to change.
   --------------------------------------------------------------- */

/* Top level */

#mp-menu > .mp-level > ul > li > a {
	padding: 11px 13px 13px 24px;
	font-family: 'Semplicita Pro SemiBold' !important;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.66px;
	text-transform: uppercase !important;
}

/* Sub-levels */

#mp-menu ul.child li > a,
#mp-menu ul.grandchild li > a {
	padding: 11px 13px 13px 24px;
	font-family: 'Semplicita Pro' !important;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.8px;
	text-transform: none !important;
}

/* The rule above groups .child and .grandchild. These split them back apart
   at every width — §13 only did it above 1300px, so below that tier 2 was
   rendering sentence case and at the grandchild's weight. */

#mp-menu ul.child li > a {
	font-family: 'Semplicita Pro SemiBold' !important;
	text-transform: uppercase !important;
}

#mp-menu ul.grandchild li > a {
	font-weight: 400;
	text-transform: none !important;
}

/* Back link reads as the parent's label, so it takes the top-level treatment */

#mp-menu a.mp-back {
	padding: 11px 13px 13px 24px;
	font-family: 'Semplicita Pro SemiBold' !important;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.66px;
	text-transform: uppercase !important;
}

/* ---------------------------------------------------------------
   13. Fly-out matched to the Aug 2026 nav mock (WebsiteHomeMainNav.pdf)

   Measured off the PDF — the logo is 230px there and 230px live, so the
   mock's units are CSS px 1:1. Key numbers:

     panel        375px wide, #E6E6E6, top edge at the header bar's bottom
     page behind  NOT dimmed (hero pixels identical open vs closed)
     panel header none — the site header stays put, hamburger becomes an X
     rows         ~28px pitch top level, ~18.7px sub-items, no dividers
     indent       49px top level, ~53px sub (barely stepped)
     tier 2       uppercase, #000    tier 3  sentence case, #4d4d4d
     footer       ACCOUNT + Shipping after the list, pushed to the panel
                  bottom when the list is short (§18)

   APPLIES AT EVERY WIDTH as of 7 Sep 2026. It was originally gated to
   >=1300px on the reasoning that the mock is a desktop design and mobile was
   already signed off. That gate turned out to be the single cause of four
   separate "bugs" — dividers between sections, tier 2 in sentence case, the
   footer overlapping the list, and loose row spacing — every one of them
   just the pre-mock skin showing through below 1300px. Sam agreed to drop
   it. Keep it dropped.

   The one value that cannot run all the way down is the panel width: 375px
   is wider than a 360px phone, so it keeps a >=768px breakpoint of its own
   and small screens stay on the theme's width.

   Row typography and padding are NOT set here any more — §12, §17 and §19
   own them, ungated. §13's copies used padding-right:24px and, carrying the
   extra body.gn-nav-hamburger specificity, were beating §19's 40px above
   1300px and crowding the arrows.

   Height rule differs from the mock by agreement: the mock ties the panel
   to the 705px hero, which does not exist on shop/product/content pages, so
   it runs header-bottom to window-bottom everywhere instead.
   --------------------------------------------------------------- */

/* 13a. Panel box */

body.gn-nav-hamburger #mp-menu {
	top: var(--gn-header-h, 89px);
	height: calc(100% - var(--gn-header-h, 89px));
	max-height: none;
	background: #E6E6E6;
}

/* The one mock value that can't carry down to a phone. */

@media screen and (min-width: 768px) {

	body.gn-nav-hamburger #mp-menu {
		width: 375px;
	}
}

/* The panel's own logo + close X are gone — the site header keeps both */

body.gn-nav-hamburger #mp-menu > .header {
	display: none !important;
}

/* Panel grey on every level. Position/height/overflow of the root level are
   left to §18, which sets them !important for the flex column. */

body.gn-nav-hamburger #mp-menu > .mp-level,
body.gn-nav-hamburger #mp-menu.mp-cover > .mp-level,
body.gn-nav-hamburger #mp-menu .mp-level {
	background: #E6E6E6;
}

/* Mock puts the first item 65px below the panel's top edge. Targets the
   list by position, not id — the mobile menu's ul id comes from the WP
   menu name (currently #menu-main-menu-mobile) and would change with it. */

body.gn-nav-hamburger #mp-menu > .mp-level > ul {
	margin-bottom: 0;
	padding-top: 65px;
}

/* 13b. No dim over the page */

body.gn-nav-hamburger #mp-pusher::after,
body.gn-nav-hamburger #mp-pusher.mp-pushed::after {
	width: 0 !important;
	height: 0 !important;
	opacity: 0 !important;
}

/* 13c. Hamburger becomes the close X while the panel is open */

body.gn-nav-hamburger.active #header-content .bar1,
body.gn-nav-hamburger.active #header-content .bar2,
body.gn-nav-hamburger.active #header-content .bar3 {
	transition: transform 0.3s, opacity 0.2s;
}

body.gn-nav-hamburger.active #header-content .bar2 {
	opacity: 0;
}

body.gn-nav-hamburger.active #header-content .bar1 {
	transform: translateY(8px) rotate(45deg);
}

body.gn-nav-hamburger.active #header-content .bar3 {
	transform: translateY(-8px) rotate(-45deg);
}

/* 13d. Back link picks up the panel's palette rather than the old black bar.
   Hidden by §16 in the accordion, kept in case the sliding model is ever
   restored. Selector matches section 12's `#mp-menu a.mp-back` on
   specificity, so it has to name the element too or the 11px there wins. */

body.gn-nav-hamburger #mp-menu a.mp-back,
body.gn-nav-hamburger #mp-menu li.grey-nav > .mp-level > a.mp-back {
	padding: 7px 24px 12px 49px;
	background: transparent !important;
	border: 0 !important;
	font-size: 12px;
	line-height: 14px;
	letter-spacing: 0.66px;
	text-align: left;
	color: #000 !important;
	padding-top: 65px;
}

/* The footer stays put on sub-levels. Section 5 hides it because a sliding
   sub-panel would cover it; the accordion never covers it, and the mock
   shows ACCOUNT / Shipping at all times. */

body.gn-nav-hamburger #mp-menu:has(> .mp-level.mp-level-overlay) .mp-footer {
	opacity: 1;
	pointer-events: auto;
}

body.gn-nav-hamburger #mp-menu ul li.grey-nav,
body.gn-nav-hamburger #mp-menu ul li.grey-nav .mp-level-open {
	background: #E6E6E6 !important;
}

body.gn-nav-hamburger #mp-menu ul li.grey-nav > a,
body.gn-nav-hamburger #mp-menu ul li.grey-nav a {
	color: #000 !important;
	border: 0 !important;
}

/* 13e. Footer sits on the panel grey */

body.gn-nav-hamburger #mp-menu .mp-footer {
	padding-bottom: 56px;
	background: #E6E6E6;
}

/* ---------------------------------------------------------------
   14. Header bar runs full width

   The bar's inner .container is max-width:1500px and centred, so on a wide
   screen the hamburger and the cart sat ~105px in from each edge. The nav
   mock runs the bar edge to edge with the icons ~42px from each side
   (measured: leftmost ink 42.2px, rightmost 41.3px from the right edge on a
   1901px artboard).

   .header already carries 10px of side padding, so 32px here lands the
   trigger at 42. The left and right columns stay 300px each, so the centred
   logo is unaffected.

   The announcement bar above has its own near-full-width container and
   centred text, so it's left alone.
   --------------------------------------------------------------- */

@media screen and (min-width: 1300px) {

	body.gn-nav-hamburger #header-content .header > .container {
		width: 100%;
		max-width: none;
		padding-left: 32px;
		padding-right: 32px;
	}
}


/* ---------------------------------------------------------------
   15. Right-hand icons were running off the screen on mobile

   app-new.css (~L1440, @media max-width:1299px) pulls the icon list out with
   `margin-right: -15px`, and .cart-contents adds another 10px of its own —
   compensation for the old layout's li padding. The list is position:absolute,
   so nothing clips it: at a 388px viewport its right edge measured 393px,
   5px past the window.

   Zeroing both lands the list flush with the header container, giving the
   same 10px inset as the hamburger on the left.
   --------------------------------------------------------------- */

@media screen and (max-width: 1299px) {

	#header-content #header-top-cart > ul {
		margin-right: 0;
	}

	#header-content #header-top-cart .cart-contents {
		margin-right: 0;
	}
}

/* ---------------------------------------------------------------
   16. Accordion sub-levels (all widths)

   Replaces the sliding sub-panels with in-place expansion, per the Aug 2026
   nav mock. Behaviour lives in header-hamburger.js; this is the presentation.

   The nested panels are the same `div.mp-level` elements mlpushmenu slid in
   from the left, so every positioning property it relies on has to be undone:
   absolute positioning, the translate, the 100% height, the opaque background
   and the z-index. Only NESTED levels change — the root .mp-level is still the
   scrolling container.
   --------------------------------------------------------------- */

/* Every nested panel loses the sliding geometry. */

#mp-menu .mp-level .mp-level {
	position: static;
	top: auto;
	left: auto;
	width: auto;
	height: auto;
	background: transparent;
	box-shadow: none;
	z-index: auto;
	transform: none !important;
	-webkit-transform: none !important;
}

/* Only panels owned by an <li> collapse — those are the togglable ones.
   Tier 3 sits inside an extra `div.grand-level` wrapper that also carries
   .mp-level but has no li of its own, so a `.mp-level .mp-level` collapse
   rule pinned it shut at max-height 0 no matter what the li did. Scoping to
   `li > .mp-level` leaves that wrapper to flow normally.

   max-height is the only way to animate to an unknown content height; the
   value just has to clear the tallest branch with a sub-level also open. */

#mp-menu li > .mp-level {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.35s ease;
}

#mp-menu li.gn-open > .mp-level {
	max-height: 1600px;
}

/* The back link is the sliding model's affordance — no place for it here. */

#mp-menu .mp-back {
	display: none !important;
}

/* mlpushmenu's overlay/scroll states don't apply to a nested accordion panel */

#mp-menu .mp-level .mp-level.mp-level-open,
#mp-menu .mp-level .mp-level.mp-level-overlay {
	overflow: hidden;
	transform: none !important;
}

#mp-menu .mp-level .mp-level::after,
#mp-menu .mp-level .mp-level::before {
	display: none;
}

/* The sliding model reserved 50px under each child list for the panel that
   used to slide over it (app-new.css ~L2630). Inline, that reads as a hole
   between a section's last row and the next top-level item. 8px is enough to
   separate the group. */

#mp-menu .mp-level .mp-level > ul {
	height: auto;
	padding-bottom: 8px;
}

/* Tier indents at every width — §13 only sets these above 1300px, and with
   the accordion all three tiers are on screen together at any size. */

#mp-menu ul.child li > a {
	padding-left: 53px;
}

#mp-menu ul.grandchild li > a {
	padding-left: 62px;
}

/* ---------------------------------------------------------------
   17. No dividers; active parent underlined

   style.css (~L206) puts `border-bottom: #ccc 1px solid !important` on the
   fly-out's menu anchors. §13 clears it, but only above 1300px — so the lines
   were still there on tablet and phone. Cleared at every width here.

   The underline goes on the OPEN item at every level, not just the top. The
   mock underlines both ACCESSORIES and DECOR, and the live mega menu marks
   its current item the same way (app-new.css: `.new-megamenu > li[class*=
   "current-"] > a { border-bottom: 2px solid #000 }`).

   text-decoration rather than a border because the mock's underline is the
   width of the text, not the full row — a border-bottom would span the row.

   WordPress's `current-*` classes are not usable here: they never reach this
   menu (checked on a category page — 0 of 154 items carried one), because
   menu-2's items point at URLs that don't match the rendered permalinks.
   --------------------------------------------------------------- */

#mp-menu .mp-level a,
#mp-menu .mp-level li,
#mp-menu ul.child li > a,
#mp-menu ul.grandchild li > a,
#mp-menu a.mp-back {
	border: 0 !important;
}

#mp-menu li.gn-open > a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}


/* ---------------------------------------------------------------
   18. Panel is a flex column, so the footer is pushed down rather than
       pinned over the list

   Previously the footer was position:absolute at bottom:0 and §13 held the
   list off it with `bottom: 118px` — but only above 1300px. Below that the
   list ran the full panel height and the ACCOUNT / Shipping block sat on top
   of it. With the accordion any section can now push the list past the
   bottom, so reserving a fixed strip is the wrong model anyway.

   Flex column instead:
     short menu -> margin-top:auto on the footer pushes it to the bottom
     long menu  -> no free space, so the footer simply flows after the list
                   and the whole panel scrolls

   The nested accordion panels are already position:static (§16), so nothing
   inside the level depends on the old absolute positioning.

   !important on a few properties because §13's equivalents are prefixed with
   body.gn-nav-hamburger and would otherwise out-specify these.
   --------------------------------------------------------------- */

#mp-menu {
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	overflow-y: auto;
}

#mp-menu > .header {
	flex: 0 0 auto;
}

#mp-menu > .mp-level {
	position: relative !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	height: auto !important;
	flex: 0 0 auto;
	overflow: visible !important;
}

#mp-menu .mp-footer {
	position: static !important;
	width: auto;
	flex: 0 0 auto;
	margin-top: auto;

	/* Breathing room for when it flows straight after a long list. Harmless
	   in the pinned case — there's already a large gap there. */
	padding-top: 24px;
}

/* ---------------------------------------------------------------
   19. Mock row rhythm at every width, and arrows that track the row

   SPACING. §13 carries the mock's rhythm but is gated to ≥1300px, so below
   that §12's looser padding was still in force (46px pitch instead of 28px).
   These repeat the mock values ungated — above 1300 they simply restate what
   §13 already says.

   ARROWS. The theme draws the chevron as a ">" glyph on `li::before` at
   `position: absolute; top: 0`. That was fine when the li was one row tall,
   but an accordion li now wraps its whole expanded panel — so the glyph
   anchored to the top of the *section*, not the row, and sat above the text's
   centre line.

   Redrawn as a CSS chevron on the ANCHOR with `top: 50%`, which centres it
   against whatever row it belongs to regardless of that tier's padding. It
   also rotates to point down when the section is open — the affordance the
   sliding model got from sliding.

   `menu-item-has-children` is the hook: it is present on both the top-level
   (`has-dropdown`) and deeper (`has-child`) parents, unlike either of those.
   --------------------------------------------------------------- */

/* --- spacing ------------------------------------------------------------ */

#mp-menu > .mp-level > ul > li > a {
	padding: 7px 40px 12px 49px;
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 0.66px;
}

#mp-menu ul.child li > a {
	padding: 7px 40px 12px 53px;
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 0.66px;
}

/* Tier 3 sat 30px below its tier-2 heading (12px row padding + 15px on the
   ul + 3px on the anchor) — a bigger gap than between two whole rows. The
   15px is app-new.css ~L8814. 6px here brings the total to 21px: still reads
   as a group under its heading, no longer as a break. */

#mp-menu ul.grandchild {
	padding-top: 6px;
}

/* font-family, not font-weight, was what made tier 3 look heavy. style.css
   (~L216) forces 'Semplicita Pro SemiBold' on every fly-out anchor with
   !important, and §12's `#mp-menu ul.child li > a` re-asserts it — that
   selector uses a descendant `li`, so it reaches INTO ul.grandchild and its
   id-level specificity beats app-new's `.wrapper-container .mp-menu
   ul.grandchild li>a` correction. Named explicitly here.

   §13 used to paper over this above 1300px; removing §13's typography when
   the gate was dropped is what made it visible at every width. */

#mp-menu ul.grandchild li > a {
	padding: 3px 40px 8px 62px;
	font-family: 'Semplicita Pro' !important;
	font-size: 11px;
	font-weight: 400;
	line-height: 13px;
	letter-spacing: 0.8px;
	color: #4d4d4d;
}

#mp-menu ul.grandchild li:last-child > a {
	color: #000;
}

/* --- arrows ------------------------------------------------------------- */

#mp-menu li::before {
	display: none !important;
}

#mp-menu li.menu-item-has-children > a {
	position: relative;
}

#mp-menu li.menu-item-has-children > a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 24px;
	width: 6px;
	height: 6px;
	margin-top: -4px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.3s ease;
}

#mp-menu li.menu-item-has-children.gn-open > a::after {
	transform: rotate(45deg);
	margin-top: -6px;
}


/* ---------------------------------------------------------------
   20. Currency dropdown has to clear the fly-out panel

   select2 appends its dropdown to <body> — outside #mp-menu — and gives it
   z-index 1051. The fly-out footer sits at 100000 (§5) and the panel at
   99999, so the country list opened *behind* the panel: the control worked
   perfectly, it just had nowhere visible to draw. It reads as a dead click.

   Scoped to body.active (fly-out open) so checkout's own .country_select
   dropdowns, which use the same select2 classes, keep their normal stacking.
   --------------------------------------------------------------- */

body.active .select2-container--open,
body.active .select2-container--open .select2-dropdown,
body.active .select2-dropdown {
	z-index: 100010 !important;
}


/* ---------------------------------------------------------------
   21. Footer type and rhythm matched to the menu rows

   The ACCOUNT block and the Shipping row were still on the sizes they
   inherited when the footer was first built (13/14px, 0.72/0.56px tracking,
   20.8px line-height, 18px indent). Beside §19's menu rows — 12px, 14px
   line-height, 0.66px tracking, 49px indent — they read as a different
   component. These line the two up.

   Indent maths for the ACCOUNT toggle: it is a flex row of a 16px icon with
   a 9px right margin, then the label. 24 + 16 + 9 = 49, so the label lands
   exactly on the menu's left edge and the icon hangs in the gutter — the
   same trick the chevrons use on the right.

   Account sub-links take the tier 2 indent (53px) because that is what they
   are: children of the row above.
   --------------------------------------------------------------- */

/* --- ACCOUNT toggle: tier 1 --------------------------------------------- */

#mp-menu .mp-footer .mp-account-toggle {
	padding: 7px 40px 12px 24px;
	font-family: 'Semplicita Pro SemiBold' !important;
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 0.66px;
	text-transform: uppercase;
}

#mp-menu .mp-footer .mp-account-toggle .mp-account-label {
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 0.66px;
}

/* --- ACCOUNT sub-links: tier 2 ------------------------------------------ */

#mp-menu .mp-footer .mp-account-links {
	margin-top: 0;
	padding-left: 0;
	padding-right: 0;
}

#mp-menu .mp-footer .mp-account-links li > a {
	display: block;
	padding: 7px 40px 12px 53px;
	font-family: 'Semplicita Pro SemiBold' !important;
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 0.66px;
	text-transform: uppercase;
}

/* --- Shipping / currency row -------------------------------------------- */

/* Set in §5 rather than repeated here — those rules already carry
   !important (they fight style.css's black-bar styling), so an unweighted
   copy at the end of the file would silently lose. §5 now reads
   7px 40px 12px 49px / 11px / 14px / 0.66px, and the select2 control's
   height and line-height come down to 14px with it. */

/* --- ACCOUNT icon sits on the row's 14px line --------------------------- */

#mp-menu .mp-footer .mp-account-toggle .icon-user {
	line-height: 14px;
}


/* ---------------------------------------------------------------
   22. Opening the fly-out gives the header its scrolled (white) look

   On the home page the header sits transparent over the hero: the bar has
   no background, the logo is inverted white (app-new.css ~L8840), and the
   hamburger, search and cart icons are white. Open the fly-out and the grey
   panel butted straight up against that transparent bar with a dark hero
   showing through it.

   The theme already has this exact treatment for two other states —
   `.header.is-ticky` (scrolled past 130px, header.php's inline script) and
   `.home header:hover`. This repeats the COLOUR half of it for
   `body.active`, i.e. while the panel is open.

   Deliberately NOT copied: `.is-ticky` also sets `position: fixed; top: 0`
   and drops the bar's padding from 18px to 10px, which would pull the bar
   over the announcement strip and change its height from 71px to 55px.
   That moves the whole header — and with it --gn-header-h and the panel's
   top edge. The ask was the white background, not the reposition, so only
   the paint is taken.

   A genuinely scrolled header is already white, so these are no-ops there.
   --------------------------------------------------------------- */

/* The bar itself */

body.gn-nav-hamburger.active #header-content .header {
	background: #fff;
}

/* Hamburger / close X strokes. §3a paints these white on the home hero at
   the same specificity, so this has to sit later in the file — it does. */

body.gn-nav-hamburger.active.home #header-content .bar1,
body.gn-nav-hamburger.active.home #header-content .bar2,
body.gn-nav-hamburger.active.home #header-content .bar3 {
	background-color: #000;
}

/* Logo drops its white inversion */

body.gn-nav-hamburger.active.home #header-content .logo img {
	filter: brightness(0);
}

/* Search, wishlist, cart, cart count — the same list app-new.css uses for
   `.home header:hover` (~L8866). */

body.gn-nav-hamburger.active.home #header-content .menu-icons,
body.gn-nav-hamburger.active.home #header-content .header-icons-container .icons,
body.gn-nav-hamburger.active.home #header-content span#cart-count,
body.gn-nav-hamburger.active.home #header-content .icon-globe:before {
	color: #000;
}


/* ---------------------------------------------------------------
   23. Cart count reads against a transparent header

   The bag glyph is an outline that flips white over the home hero and black
   on a white bar, but the number inside it is pinned black by app-new.css
   ~L9034 (`#header-content.new-header .cart-count-num { color: #000 }`) in
   every state. Over the hero that leaves a black digit inside a white
   outline on a photograph — the one place it doesn't read.

   `color: inherit` is NOT the fix: the digit's parent (`a#cartToggle`)
   computes white on a white header too, so inheriting would hide it on
   every non-home page. The colour is set per-state instead.

   Condition = the three things that make the bar transparent: home page,
   not scrolled (`.header` has no `.is-ticky`), and the fly-out closed —
   §22 paints the bar white while it's open, so the digit must stay black
   there. Specificity (1,5,2) clears app-new's (1,1,1).

   On a white bar the digit stays black, which is what reads there.
   --------------------------------------------------------------- */

body.gn-nav-hamburger.home:not(.active) #header-content:not(:hover) .header:not(.is-ticky) .cart-count-num {
	color: #fff;
}


/* ---------------------------------------------------------------
   24. Search icon stays put on scroll

   `app-new.css` ~L9007 gives the search box 15px of bottom padding once the
   header goes sticky:

       .is-ticky .icon-search2 { padding-bottom: 15px; }

   §9 put that box back in normal flow as an 18x18 square, so the extra
   padding makes it 18x33 with the glyph pinned to the top — and in the
   centred flex row that lifts the magnifier 7.5px above the hamburger.
   Measured: glyph centre 0px off the hamburger at rest, -7.5px scrolled.

   The written-for-the-old-header siblings are already neutralised by §9 and
   are left alone (verified computing to 0 in both states):
     .is-ticky #search-top { margin-top: 23px }        styles.css ~L4921
     .is-ticky li#search-top { padding-left: 5px }     app-new.css ~L8781
     .new-header .is-ticky … .icons { top: -1px }      app-new.css ~L430
   --------------------------------------------------------------- */

body.gn-nav-hamburger #header-content .is-ticky .icon-search2 {
	padding-bottom: 0;
}


/* ---------------------------------------------------------------
   25. Cart digit centred in the bag

   The digit was positioned by hand in app-new.css ~L9034 —
   `margin-left: -15px; position: relative; bottom: 2px` — i.e. laid out
   inline after the bag glyph and then dragged back on top of it. It landed
   low and right of the bag's body and drifted whenever the glyph's font
   size or the anchor's box changed.

   `a#cartToggle` is already `position: relative`, so the digit can just be
   an absolutely-positioned overlay centred on it. `left/right: 0` plus
   `text-align: center` handles the horizontal; `top: 50%` + translate
   handles the vertical, with GN_BAG_NUDGE below correcting for the bag's
   handle, which sits above the square and pulls the glyph's box centre
   above the square's centre.

   Specificity (1,3,1) clears app-new's (1,2,1).
   --------------------------------------------------------------- */

body.gn-nav-hamburger #header-content.new-header .cart-count-num {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	bottom: auto;
	margin: 0;

	/* GN_BAG_NUDGE: +Xpx pushes the digit down toward the square's centre. */
	transform: translateY(calc(-50% + 1px));

	text-align: center;
	line-height: 1;
}


/* ---------------------------------------------------------------
   26. Sticky header clears the WP admin bar

   `.is-ticky` pins the bar at `top: 0` (`custom.scss.css` ~L188 sets it
   `!important`). WordPress's admin bar is also fixed at the top, 32px tall,
   at z-index 999999999 — an order of magnitude above the bar's 99999999. So
   for a logged-in user the top 32px of the 55px sticky bar is painted behind
   the admin bar: the logo and hamburger are almost entirely covered and the
   header reads as having vanished on scroll.

   Logged-out visitors never saw this — no admin bar, nothing to hide behind.
   It is purely an authoring-time annoyance, but it makes the sticky header
   impossible to check while signed in.

   WP's own breakpoint: the admin bar is 32px at >=783px and 46px below that.
   `!important` is needed to beat custom.scss.css.
   --------------------------------------------------------------- */

body.admin-bar.gn-nav-hamburger #header-content .header.is-ticky {
	top: 32px !important;
}

@media screen and (max-width: 782px) {

	body.admin-bar.gn-nav-hamburger #header-content .header.is-ticky {
		top: 46px !important;
	}
}