Header

The site header, rendered on every page from header-group. Left side: the wordmark or logo, linking home. Right side: the main navigation, then the icon row — hamburger, search, account, wishlist, bag.

It sits on the coal ground and closes with a 2px burnt-orange rule along its bottom edge. That rule is deliberate: the header pins over sections of every background colour, and coal-on-coal gave it no edge at all. The same accent line closes the mega panels, so the whole navigation system reads as one piece.

Section settings

Setting	Type	Default	What it does
Sticky header	Select	`pin`	How the header behaves on scroll. See Sticky modes
Logo	Image	—	Rendered at up to 400px wide. Falls back to the global Brand → Logo setting, then to the wordmark
Wordmark	Text	—	Shown in the white block when no logo is set. Defaults to the store name
Menu	Link list	`main-menu`	The main navigation. Any link that has sub-links opens a mega panel
Mega panel note	Text	`Four drops a year, four hundred units a run. Nothing is restocked.`	Shown in a panel’s side column when no promo block targets that menu item
Mobile menu parent link	Text	`Go to [title]`	The row at the top of an expanded item in the mobile drawer. See The parent link row

sticky_mode options:

Sticky header	Behaviour
Off — scrolls away	The header scrolls out of view like any other content
Pin — always visible	Stays at the top of the viewport
Pin and hide on scroll down	Tucks away going down the page, returns on the way up

Blocks

One block type, Mega panel promo, up to 4 per header.

Setting	Type	Default	What it does
Menu position	Range 1–4	`1`	Which drop-down this promo belongs to, counting only menu items that have sub-links
Heading	Text	`Drop 04`	Display-type heading in the panel’s side column
Text	Text	—	A line of body copy under the heading
Image	Image	—	Artwork for the side column, rendered 4:5
Product	Product	—	If set, the product’s featured image and `Title – Price` replace the image
Result button	Text	—	Underlined link with an arrow
Button link	URL	—	Where that link goes

Mega panels

Any top-level link with sub-links becomes a mega panel: hovering it on desktop opens the panel, and the sub-links render as columns. Third-level links render underneath their parent column heading.

Two panel modes

Signal picks the panel’s shape from how much there is to show, rather than making it a setting. A menu of two plain links does not earn a full-bleed panel — stretching one across 1440px is what made an “About us” dropdown look empty.

A panel goes wide (full bleed) when any of these is true:

the menu item has 4 or more sub-links, or
any sub-link has its own sub-links (a third level), or
a promo block targets it and that promo has real artwork — an image or a product

Otherwise it goes compact: a narrow drop-down, positioned by script so its links line up with the trigger’s text rather than the panel’s edge. If the trigger sits near the right edge the panel is nudged back on screen.

Opening and closing

Hover a trigger to open it; moving between triggers swaps panels.
Click a trigger to open it; a second click follows the link.
Opening with the keyboard (Enter) moves focus into the panel’s first link, because the panel comes after the whole header in reading order and would otherwise be several tabs away.
Escape closes and returns focus to the trigger.
Tabbing out of the last link closes the panel.
A pointer-tracking guard closes the panel when the cursor leaves the trigger, the panel, and the band of header padding between them — so sliding sideways along the nav row no longer leaves a panel hanging open.
A stray mouse move never closes a panel that is currently being tabbed through.

Sticky modes

Sticky is applied to the section wrapper (.hdr-sec), not the header element — a sticky box cannot travel outside its parent, and .lab-hdr sits in a wrapper only as tall as itself.

On any scroll, the script adds .stuck to the section, so the header only becomes sticky once the page has actually moved.
Past 220px it adds .condensed, which trims the header’s vertical padding from 11px to 6px.
On pin_hide only, past 260px and moving down, it adds .hide and the header translates up out of view. Scrolling up — or returning above 260px — brings it back.

Hiding is suppressed while the mobile drawer, a mega panel or the search overlay is open, so the header never slides out from under something the shopper is using. Under prefers-reduced-motion: reduce the transform and its transition are both dropped.

The icon row

Icon	Shown when	Behaviour
Hamburger	At 900px and below, where the desktop nav is hidden	Opens the mobile drawer
Search	Always	Opens the search overlay
Account	`shop.customer_accounts_enabled`	Links to the account page. Its text label is swapped for an icon at 900px and below, so the link carries an `aria-label` as well
Wishlist	Quick view & wishlist → Enable wishlist is on	Opens the wishlist drawer; the `href` is still a real link to the wishlist page, so it still works if scripting is unavailable. Carries a saved-count badge
Bag	Always	Opens the cart drawer. Carries the item count, hidden at zero

The mobile drawer

Below 900px the desktop navigation is hidden and the hamburger takes over. Tapping it slides in a full-height panel. Top-level links with sub-links become <details> rows with a plus affordance; plain links are rendered as display-type rows. Third-level links render in a nested list — the desktop panel always showed those, and the drawer did not, so grandchild links used to exist on desktop only.

The drawer’s footer repeats the account link, the wishlist link and a link to the search page.

Opening locks <html> scrolling; Escape or the backdrop closes it.

The parent link row

Because an expandable parent is a <summary>, tapping it opens the list rather than following the link — so “About us” itself would be unreachable in the drawer even though it is a real page that desktop links straight to.

Signal inserts a row at the top of the expanded list that goes to the parent item. parent_link_label is its wording, and [title] in that label is replaced with the menu item’s own name. With the default Go to [title], expanding “About us” shows a row reading Go to About us.

The row is only added when it actually goes somewhere useful. It is suppressed when:

the parent link is blank or # — a menu item used purely as a label, or
the parent points at the same URL as one of its own children, which would just repeat a row already below it.

Accessibility

Mega triggers carry aria-expanded, kept in sync as panels open and close.
Escape closes mega panels, the mobile drawer and the search overlay, and returns focus to the control that opened them.
Every icon control has an accessible name; the account link keeps an aria-label for the width at which its text label is hidden.
The <nav> elements are labelled.

Section groups — where the header lives
Announcement bar — the strip above it
Cart drawer · Wishlist drawer