/**
 * izebuy global header.
 * Skip link · Top bar (logo + desktop nav + mega menu + hamburger) ·
 * Mobile navigation drawer · Backdrop.
 * Only the top header and its mobile menu drawer live here — the search/filter
 * bar is in filters.css and the mobile tab bar is in bottom-nav.css.
 * Depends on: tokens.css
 */

/* ── Skip-to-content link ───────────────────────────────────────────────── */
.ize-skip-link {
	position: absolute;
	top: -9999px; left: 50%;
	transform: translateX(-50%);
	background: var(--ize-ink);
	color: #fff;
	padding: 8px 16px;
	border-radius: 0 0 var(--ize-radius-sm) var(--ize-radius-sm);
	z-index: 9999;
	font-size: var(--ize-fs-sm);
	white-space: nowrap;
	text-decoration: none;
}
.ize-skip-link:focus { top: 0; }

/* Scroll-margin so the sticky header + filter bar don't cover anchor targets */
#main-content { scroll-margin-top: calc( var(--ize-header-bar-h) + var(--ize-search-row-h) ); }

/* ── Header shell ───────────────────────────────────────────────────────── */
/* Sticky logo bar: hides on scroll-down, returns on scroll-up (direction set by
 * assets/js/header.js). It hides by sliding up with a transform — NOT by
 * changing height or top. A transform is composited and never reflows the page,
 * so toggling it can't shift the scroll position and bounce the bar; animating
 * height/top would (this is the Headroom.js pattern). The sticky filter bar
 * rises to top:0 underneath it (filters.css), so there's no gap or grey bar. */
.ize-header {
	position: sticky;
	top: 0;
	z-index: calc( var(--ize-z-header) + 1 ); /* keep the mega-menu overlay above siblings */
	background: var(--ize-surface);
	transition: transform 0.25s var(--ize-ease, ease);
	will-change: transform;
}
/* Hide = slide the whole bar up out of view. translateY(-100%) is relative to
 * the bar's own height, so it always clears fully regardless of that height. */
.ize-header.is-hidden { transform: translateY(-100%); }

/* ── Top bar: logo + desktop-nav + hamburger ────────────────────────────── */
.ize-header__bar {
	height: var(--ize-header-bar-h);
	/* Visible so the desktop "More" dropdown can hang below the bar — it anchors to
	 * the "More" item, which lives inside this bar. The mega menu is unaffected: it
	 * still escapes by anchoring to .ize-header. */
	overflow: visible;
	background: var(--ize-topbar);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.ize-header__bar-inner {
	display: flex;
	align-items: center;
	height: 100%;
	max-width: var(--ize-container);
	margin: 0 auto;
	padding: 0 var(--ize-4);
	gap: var(--ize-3);
}

/* Logo */
.ize-header__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
	color: var(--ize-topbar-ink);
	outline: none;
	border: none;
}
.ize-header__logo img { max-height: 36px; width: auto; display: block; border: none; }
.ize-header__logo-text { font-size: var(--ize-fs-md); font-weight: 700; color: var(--ize-topbar-ink); }

/* Desktop nav — hidden on mobile */
.ize-header__nav {
	display: none;
	align-items: center;
	gap: var(--ize-3);
	margin-left: auto;
}
.ize-nav-menu {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0; padding: 0;
}
.ize-nav-menu > li > a {
	display: block;
	padding: 6px var(--ize-3);
	font-size: var(--ize-fs-md); /* 18px — large, prominent top nav. */
	font-weight: 600;
	color: var(--ize-topbar-ink);
	text-decoration: none;
	border-radius: var(--ize-radius-sm);
	white-space: nowrap;
	outline: none;
}
.ize-nav-menu > li > a:hover { background: var(--ize-topbar-hover); color: var(--ize-topbar-hover-ink, var(--ize-topbar-ink)); }
.ize-nav-menu > li.current-menu-item > a,
.ize-nav-menu > li.current_page_item > a { color: var(--ize-topbar-hover-ink, var(--ize-topbar-ink)); background: var(--ize-topbar-hover); }

/* Account links (desktop) */
.ize-header__account {
	display: flex;
	align-items: center;
	gap: var(--ize-3);
	padding-left: var(--ize-4);
	border-left: 1px solid rgba(0, 0, 0, 0.12);
	flex-shrink: 0;
}
.ize-header__account-link {
	font-size: var(--ize-fs-sm);
	font-weight: 600;
	color: var(--ize-topbar-ink);
	text-decoration: none;
	white-space: nowrap;
	outline: none;
	padding: 6px var(--ize-3);
	border-radius: var(--ize-radius-sm);
}
/* Same hover as the menu items so the whole nav bar reacts consistently to the
 * Navigation Bar Hover colour. */
.ize-header__account-link:hover { background: var(--ize-topbar-hover); color: var(--ize-topbar-hover-ink, var(--ize-topbar-ink)); text-decoration: none; }

/* Hamburger — mobile only. A labelled "Menu" button: the bars icon with the
 * word "Menu" stacked beneath it. Labelling the hamburger tests better for
 * discoverability than a bare icon. */
.ize-header__burger {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	margin-left: auto;
	min-height: 40px;
	padding: 2px 8px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--ize-topbar-ink);
	border-radius: var(--ize-radius-sm);
	flex-shrink: 0;
	line-height: 1;
}
/* Stepped up a notch (xl/sm) so the hamburger stays a comfortable tap target:
 * it's mobile-only, where the bump is 0, and this control shouldn't shrink with
 * the body-text revert. */
.ize-header__burger i { font-size: var(--ize-fs-xl); line-height: 1; }
.ize-header__burger-label { font-size: var(--ize-fs-sm); font-weight: 600; line-height: 1; }
.ize-header__burger:hover { background: var(--ize-topbar-hover); color: var(--ize-topbar-hover-ink, var(--ize-topbar-ink)); }

@media (min-width: 768px) {
	.ize-header__nav    { display: flex; }
	.ize-header__burger { display: none; }
}

/* ── Mobile navigation drawer ───────────────────────────────────────────── */
.ize-nav-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--ize-z-drawer);
	pointer-events: none;
	visibility: hidden;
}
.ize-nav-drawer.is-open {
	pointer-events: auto;
	visibility: visible;
}
.ize-nav-drawer__panel {
	position: absolute;
	top: 0; left: 0;
	width: 280px;
	max-width: 85vw;
	height: 100%;
	background: var(--ize-topbar);
	box-shadow: var(--ize-shadow-lg);
	display: flex;
	flex-direction: column;
	transform: translateX(-100%);
	transition: transform 0.25s var(--ize-ease);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.ize-nav-drawer.is-open .ize-nav-drawer__panel { transform: translateX(0); }

.ize-nav-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--ize-3) var(--ize-4);
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	flex-shrink: 0;
}
.ize-nav-drawer__title {
	font-size: var(--ize-fs-md);
	font-weight: 700;
	color: var(--ize-topbar-ink);
}
.ize-nav-drawer__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--ize-topbar-ink);
	font-size: var(--ize-fs-md);
	border-radius: var(--ize-radius-sm);
}
.ize-nav-drawer__close:hover { background: rgba(0, 0, 0, 0.08); }

.ize-nav-drawer__menu {
	list-style: none;
	margin: 0; padding: var(--ize-2) 0;
	flex: 1;
}
.ize-nav-drawer__menu li > a {
	display: block;
	padding: var(--ize-3) var(--ize-5);
	font-size: var(--ize-fs-base);
	font-weight: 600;
	color: var(--ize-topbar-ink);
	text-decoration: none;
	outline: none;
}
.ize-nav-drawer__menu li > a:hover { background: rgba(0, 0, 0, 0.08); color: var(--ize-topbar-hover-ink, var(--ize-topbar-ink)); }
.ize-nav-drawer__menu li.current-menu-item > a,
.ize-nav-drawer__menu li.current_page_item > a { font-weight: 700; background: rgba(0, 0, 0, 0.10); }
/* Sub-menu (depth 2) — a slightly darker shade of the top-bar colour so the
 * category list stays on-brand instead of dropping onto a white panel. */
.ize-nav-drawer__menu ul {
	list-style: none; padding: 0;
	background: rgba(0, 0, 0, 0.10);
}
.ize-nav-drawer__menu ul li > a {
	/* Indentation is applied on the accordion links further down (so the row
	 * highlight can stay edge-to-edge); here we only set the sub-row type scale. */
	font-size: var(--ize-fs-base);
	font-weight: 600;
}
/* "Browse all categories" — the link to the category landing page, set a touch
 * apart from the live category list beneath it. */
.ize-nav-drawer__menu .ize-cat-all > a { font-weight: 600; }

.ize-nav-drawer__account {
	display: flex;
	flex-direction: column;
	gap: var(--ize-3);
	padding: var(--ize-4);
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	flex-shrink: 0;
}
.ize-nav-drawer__logout {
	font-size: var(--ize-fs-sm);
	font-weight: 700;
	color: var(--ize-topbar-ink);
	opacity: 0.85;
	text-decoration: none;
	text-align: center;
	padding: var(--ize-2) 0;
	outline: none;
}
.ize-nav-drawer__logout:hover { opacity: 1; text-decoration: underline; }

/* Backdrop */
.ize-nav-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: calc(var(--ize-z-drawer) - 1);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s var(--ize-ease);
}
.ize-nav-backdrop.is-visible { opacity: 1; pointer-events: auto; }

body.ize-drawer-open { overflow: hidden; }

/* Mega menu (desktop) — a TWO-PANE flyout, the pattern big catalogue sites use so
 * a large category tree stays tidy. Left rail = the top-level departments; hovering
 * or focusing one reveals ITS subcategories in the right pane, in balanced columns.
 * The panel is a FIXED, balanced box: opening a department never grows it or shifts
 * other items. The rail scrolls on its own (so the last departments are always
 * reachable) and each pane scrolls on its own. header.js restructures the nested
 * menu markup into .ize-mega-rail + .ize-mega-panes so the two sides scroll
 * independently (a single overflow on the panel can't do that — the panes live
 * inside the rail items). */
.ize-nav-menu .menu-item-mega { position: static; }
.ize-nav-menu .menu-item-mega > a::after {
	content: "\f107"; /* fa-angle-down */
	font-family: "Font Awesome 6 Free"; font-weight: 900;
	margin-left: 6px;
	font-size: 0.85em;
}

/* The panel: a fixed, balanced box (≈10 rows tall). It just frames the rail + panes,
 * which position themselves absolutely inside it. */
.ize-nav-menu .menu-item-mega > .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX( -50% );
	z-index: 5;
	width: 720px;
	max-width: 96vw;
	height: 430px;
	max-height: 80vh;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--ize-topbar);
	border: 1px solid rgba( 0, 0, 0, 0.18 );
	box-shadow: 0 8px 18px rgba( 0, 0, 0, 0.18 );
	overflow: hidden;          /* clip to the box; rail + panes scroll themselves */
}
.ize-nav-menu .menu-item-mega.is-open > .sub-menu,
.ize-nav-menu .menu-item-mega:focus-within > .sub-menu { display: block; }

/* Left rail — the fixed 240px department column, scrolls independently. */
.ize-nav-menu .menu-item-mega .ize-mega-rail {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 240px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-y: auto;
	overflow-x: hidden;
	border-right: 1px solid rgba( 0, 0, 0, 0.14 );
	scrollbar-width: thin;
	scrollbar-color: rgba( 0, 0, 0, 0.28 ) transparent;
}
.ize-nav-menu .menu-item-mega .ize-mega-rail::-webkit-scrollbar { width: 8px; }
.ize-nav-menu .menu-item-mega .ize-mega-rail::-webkit-scrollbar-thumb { background: rgba( 0, 0, 0, 0.28 ); border-radius: 4px; }
.ize-nav-menu .menu-item-mega .ize-mega-rail > li { margin: 0; }
.ize-nav-menu .menu-item-mega .ize-mega-rail > li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 9px 12px;
	font-size: var(--ize-fs-sm);
	font-weight: 600;
	line-height: 1.2;
	color: var(--ize-topbar-ink);
	text-decoration: none;
}
/* Highlight the hovered / active department, and hint the flyout with a right
 * chevron on any department that has subcategories. */
.ize-nav-menu .menu-item-mega .ize-mega-rail > li:hover > a,
.ize-nav-menu .menu-item-mega .ize-mega-rail > li.is-active > a {
	background: rgba( 0, 0, 0, 0.12 );
}
.ize-nav-menu .menu-item-mega .ize-mega-rail > li.menu-item-has-children > a::after {
	content: "\f105"; /* fa-angle-right */
	font-family: "Font Awesome 6 Free"; font-weight: 900;
	font-size: 0.85em;
	flex: none;
	opacity: 0.7;
}
/* "Browse all categories" — pinned at the top of the rail. */
.ize-nav-menu .menu-item-mega .ize-mega-rail > .ize-cat-all { border-bottom: 1px solid rgba( 0, 0, 0, 0.12 ); }
.ize-nav-menu .menu-item-mega .ize-mega-rail > .ize-cat-all > a { font-weight: 700; }

/* Right pane area — fills the space right of the rail. Each department's pane
 * stacks here; only the active one shows, and it scrolls itself. */
.ize-nav-menu .menu-item-mega .ize-mega-panes {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 240px;
}
.ize-nav-menu .menu-item-mega .ize-mega-panes > .sub-menu {
	display: none;
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 12px 14px;
	list-style: none;
	overflow-y: auto;
	overflow-x: hidden;
	column-width: 165px;
	column-gap: 18px;
	scrollbar-width: thin;
	scrollbar-color: rgba( 0, 0, 0, 0.28 ) transparent;
}
.ize-nav-menu .menu-item-mega .ize-mega-panes > .sub-menu.is-active { display: block; }
.ize-nav-menu .menu-item-mega .ize-mega-panes > .sub-menu::-webkit-scrollbar { width: 8px; }
.ize-nav-menu .menu-item-mega .ize-mega-panes > .sub-menu::-webkit-scrollbar-thumb { background: rgba( 0, 0, 0, 0.28 ); border-radius: 4px; }

/* A subcategory group in the pane: a bold heading with its sub-items beneath.
 * break-inside avoids splitting a group across two columns. */
.ize-nav-menu .menu-item-mega .ize-mega-panes > .sub-menu > li {
	display: inline-block;
	width: 100%;
	margin: 0 0 12px;
	break-inside: avoid;
}
.ize-nav-menu .menu-item-mega .ize-mega-panes a {
	display: block;
	padding: 4px 6px;
	font-size: var(--ize-fs-sm);
	line-height: 1.3;
	color: var(--ize-topbar-ink);
	text-decoration: none;
	border-radius: var(--ize-radius-sm);
}
.ize-nav-menu .menu-item-mega .ize-mega-panes a:hover { background: rgba( 0, 0, 0, 0.10 ); }
/* Subcategory heading (level 2) reads stronger; its children (level 3+) are a
 * plain indented list, always shown — no nested accordions in the pane. */
.ize-nav-menu .menu-item-mega .ize-mega-panes > .sub-menu > li > a { font-weight: 700; }
/* Only the DEEPER nested lists (sub-subcategories) — NOT the pane itself, which is
 * also a .sub-menu and whose show/hide must stay controlled by .is-active above. */
.ize-nav-menu .menu-item-mega .ize-mega-panes > .sub-menu .sub-menu {
	display: block;
	position: static;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	list-style: none;
	column-width: auto;
	overflow: visible;
}
.ize-nav-menu .menu-item-mega .ize-mega-panes > .sub-menu .sub-menu a { padding-left: 14px; opacity: 0.92; }

/* ── "More" dropdown (desktop) ───────────────────────────────────────────────
 * A compact dropdown for the info / legal links, so they stay reachable from the
 * header on every page (the footer is hidden on the infinite-scroll home & search
 * pages). It anchors to the "More" item itself and drops straight down, directly
 * beneath it, right-aligned to the item's right edge so it never runs off-screen.
 * Opened on hover (JS .is-open, with a close delay) and on keyboard focus. */
.ize-nav-menu .menu-item-more { position: relative; }
.ize-nav-menu .menu-item-more > a::after {
	content: "\f107"; /* fa-angle-down */
	font-family: "Font Awesome 6 Free"; font-weight: 900;
	margin-left: 6px;
	font-size: 0.85em;
}
.ize-nav-menu .menu-item-more > .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	/* Anchored to the "More" item: drops straight down with its right edge aligned
	 * to the item, so it sits directly under "More" and opens leftward (stays
	 * on-screen since "More" is near the right of the bar). */
	right: 0;
	left: auto;
	z-index: 5;
	min-width: 220px;
	margin: 0;
	padding: var(--ize-2);
	list-style: none;
	background: var(--ize-topbar);
	/* Square, hard-edged box to match the mega menu. */
	border: 1px solid rgba( 0, 0, 0, 0.18 );
	box-shadow: 0 8px 18px rgba( 0, 0, 0, 0.18 );
}
.ize-nav-menu .menu-item-more.is-open > .sub-menu,
.ize-nav-menu .menu-item-more:focus-within > .sub-menu { display: block; }
.ize-nav-menu .menu-item-more > .sub-menu li { margin: 0; }
.ize-nav-menu .menu-item-more > .sub-menu a {
	display: block;
	padding: 8px var(--ize-3);
	color: var(--ize-topbar-ink);
	font-size: var(--ize-fs-sm);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.ize-nav-menu .menu-item-more > .sub-menu a:hover { background: rgba( 0, 0, 0, 0.10 ); }

/* ── Sub-menus on mobile = accordion (inside the drawer), any depth ──────── */
.ize-nav-drawer__menu .menu-item-has-children > a::after,
.ize-nav-drawer__menu .menu-item-mega > a::after {
	content: "\f107";
	font-family: "Font Awesome 6 Free"; font-weight: 900;
	float: right;
	transition: transform 0.15s ease;
}
.ize-nav-drawer__menu li.is-open > a::after { transform: rotate( 180deg ); }
.ize-nav-drawer__menu .sub-menu {
	display: none;
	list-style: none;
	margin: 0;
	/* No left padding on the panel: the indent lives on the link below, so each
	 * row's highlight fills the full width (flush both sides) like the top level,
	 * instead of being inset on the left and running flush off the right. */
	padding: 4px 0;
}
.ize-nav-drawer__menu li.is-open > .sub-menu { display: block; }
/* Edge-to-edge row; text indented via the link's left padding, one step deeper
 * per nesting level. Right padding matches the top level so the caret lines up. */
.ize-nav-drawer__menu .sub-menu a {
	display: block;
	padding: 8px var(--ize-5) 8px calc(var(--ize-5) + var(--ize-4));
}
.ize-nav-drawer__menu .sub-menu .sub-menu a { padding-left: calc(var(--ize-5) + var(--ize-4) * 2); }
.ize-nav-drawer__menu .sub-menu .sub-menu .sub-menu a { padding-left: calc(var(--ize-5) + var(--ize-4) * 3); }