/**
 * Department Navigation — frontend styles.
 *
 * The desktop row and the mobile drawer share one DOM. Below the breakpoint
 * the row becomes the drawer's first pane and the panel container slides over
 * it as the second, so no panel markup is duplicated.
 */

.wb-nav-departments {
	--wb-nav-brand: #1a5fe0;
	--wb-nav-foreground: #16181d;
	--wb-nav-muted: #6b7280;
	--wb-nav-border: #e4e7ec;
	--wb-nav-divider: #f4f6f9;
	--wb-nav-row-bg: #f6f7f9;
	--wb-nav-row-active-bg: #fff;
	--wb-nav-gutter: 32px;
	--wb-nav-tab-gap: 32px;

	/*
	 * Declared here as well as in the panel's own blocks, so a drawer rule
	 * that reaches for it resolves to the real value instead of falling
	 * through to the hardcoded default baked into each var() call.
	 */
	--wb-nav-accent: var(--wb-nav-brand);

	/* Matches the header shell so every row shares one content edge. */
	--wb-nav-wide: var(--wp--style--global--wide-size, 1260px);
	--wb-nav-row-width: calc(var(--wb-nav-wide) + 64px);

	/*
	 * Drawer-only values, deliberately named apart from their desktop
	 * counterparts. The desktop row and the mega-panel are out of scope for
	 * the mobile redesign, and these properties cascade into the panels'
	 * own blocks — so widening `--wb-nav-row-width` to mean "drawer width",
	 * or repointing `--wb-nav-row-bg` at the drawer's account ground, would
	 * repaint the desktop bar and every chip inside a panel.
	 *
	 * The width is full, both panes. It was 90% capped at 420, with the strip
	 * of page down the side doing the work of saying the drawer is a layer
	 * you can tap past to dismiss. Once a department pane took the whole
	 * screen that stopped being true of half the drawer, and a menu that
	 * changes width depending on how deep you are in it reads as two
	 * surfaces rather than one. The X and the back chevron are how you leave.
	 */
	--wb-nav-drawer-width: 100%;
	--wb-nav-drawer-gutter: 14px;
	--wb-nav-drawer-row-bg: #fafbfc;
	--wb-nav-drawer-shadow: 14px 0 34px -14px rgba(20, 30, 50, 0.5);

	/*
	 * Chevrons and other low-emphasis affordances. Not `--wb-nav-edge`:
	 * that name already means "border colour" to feature-card and
	 * term-list, both of which render inside a panel and would inherit it.
	 *
	 * Darker than the #c3cad4 the handover names. That measured 1.65:1 on
	 * white, and this mark is the only thing separating a row that opens a
	 * pane from one that leaves the drawer — it has to clear the 3:1 a
	 * meaningful control needs, not sit at the edge of visibility.
	 */
	--wb-nav-chevron: #9aa3b0;
	--wb-nav-scrim: rgba(22, 24, 29, 0.46);
	--wb-nav-motion: 220ms;
	--wb-nav-hit: 44px;

	position: relative;
	background: var(--wb-nav-row-bg);
	border-bottom: 1px solid var(--wb-nav-border);
}

/* ---------------------------------------------------------------- Row */

.wb-nav-departments__row {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 24px;
	max-width: var(--wb-nav-row-width);
	margin: 0 auto;
	padding: 0 var(--wb-nav-gutter);
}

.wb-nav-departments__list {
	display: flex;
	align-items: stretch;

	/*
	 * Tabs carry no horizontal padding, so a tab's box is exactly its text.
	 * That puts the first department's text on the content edge in line with
	 * the wordmark above it, and keeps the active underline the width of the
	 * word rather than the word plus padding. Separation comes from the gap.
	 */
	gap: var(--wb-nav-tab-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wb-nav-departments__tab {
	display: flex;
	align-items: center;
	min-height: 56px;
	padding: 0;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	color: var(--wb-nav-foreground);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.wb-nav-departments__tab:hover {
	color: var(--wb-nav-brand);
}

/*
 * The active department is marked by the underline and colour alone. A filled
 * tab would read as a raised card against the near-white row.
 */
.wb-nav-departments__tab.is-active {
	border-bottom-color: var(--wb-nav-brand);
	color: var(--wb-nav-brand);
	font-weight: 700;
}

.wb-nav-departments__editorial {
	display: flex;
	align-items: center;
	color: var(--wb-nav-muted);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.wb-nav-departments__editorial:hover {
	color: var(--wb-nav-brand);
}

/* ------------------------------------------------------------- Panels */

.wb-nav-departments__panel {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: 41;
	background: var(--wb-nav-row-active-bg);
	border-bottom: 1px solid var(--wb-nav-border);
	box-shadow: 0 18px 32px rgba(22, 24, 29, 0.08);
}

/*
 * Explicit, because a closed panel is only inert if something actually takes
 * it out of the layout. Relying on the user-agent [hidden] rule alone left
 * the panel's own controls hit-testable underneath the drawer.
 */
.wb-nav-departments__panel[hidden] {
	display: none;
}

.wb-nav-departments__panel-inner {
	max-width: var(--wb-nav-row-width);
	margin: 0 auto;
	padding: 28px var(--wb-nav-gutter) 36px;
}

/*
 * Opt-in four-column panel grid matching the design spec. A panel that
 * needs a different shape just uses a core Columns block instead.
 */
.wb-nav-panel-grid {
	display: grid;
	grid-template-columns: 1.15fr 1fr 1fr 300px;
	gap: 34px;
}

/*
 * Support column cards — the promo and tool slots at the right of a panel.
 * Content is ordinary blocks; these classes only supply the chrome.
 */
.wb-nav-panel-card {
	overflow: hidden;
	border: 1px solid var(--wb-nav-border);
	border-radius: 12px;
}

.wb-nav-panel-card > .wp-block-image {
	margin: 0;
}

.wb-nav-panel-card > .wp-block-image img {
	display: block;
	width: 100%;
	height: 132px;
	object-fit: cover;
}

.wb-nav-panel-card__body {
	padding: 16px 18px 18px;
}

.wb-nav-panel-card__body > * {
	margin: 0;
}

.wb-nav-panel-card__body strong {
	font-size: 14px;
	font-weight: 700;
}

/* Bordered callout, per the design's "why this slot exists" treatment. */
.wb-nav-panel-callout {
	padding: 16px 18px 18px;
	border: 1px solid var(--wb-nav-brand);
	border-radius: 12px;
	background: #f6f9ff;
}

.wb-nav-panel-callout > * {
	margin: 0;
}

.wb-nav-panel-callout__eyebrow {
	color: #1550c9;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/*
 * A stacked column, e.g. two term lists sharing one grid cell. The extra
 * class in the selector is deliberate: the theme's block-gap rule targets
 * `> * + *` too, and without it the theme wins and the spacing drifts.
 */

/*
 * The grid is also a block-editor group, so the theme's flow-layout rule adds
 * a 32px block gap to every child after the first. In a grid that shifts each
 * column down inside its own cell, leaving columns two onwards hanging below
 * column one. Column spacing is the grid gap's job.
 */
.wb-nav-panel-grid.wb-nav-panel-grid > * + * {
	margin-top: 0;
}

.wb-nav-panel-grid .wb-nav-panel-stack > * + *,
.wb-nav-panel-stack.wb-nav-panel-stack > * + * {
	margin-top: 26px;
}

/*
 * Doubled class on purpose. The theme's flow-layout rule puts a 32px block
 * gap between siblings inside any group, which is far too loose for a card
 * and read as a gap under the title.
 */
.wb-nav-panel-card__body.wb-nav-panel-card__body > * + * {
	margin-top: 6px;
}

.wb-nav-panel-callout.wb-nav-panel-callout > * + * {
	margin-top: 8px;
}

.wb-nav-panel-card--muted {
	background: #f6f7f9;
	border-color: transparent;
}

.wb-nav-departments__panel-head,
.wb-nav-departments__drawer-search,
.wb-nav-departments__drawer-footer {
	display: none;
}

.wb-nav-departments__scrim {
	display: none;
}

/*
 * The scrim dims the page behind an open panel, starting at the bottom of the
 * header rather than covering it. Stacking the header's rows above a
 * full-viewport scrim looked equivalent but was not: the rows are transparent
 * and width-constrained, so the dimmed surface behind them still showed
 * through, leaving grey bands down both edges. Starting below the header
 * removes the overlap entirely.
 *
 * The store publishes the header's live bottom edge as `--wb-nav-scrim-top`.
 * It has to be a viewport coordinate rather than the header's height: with
 * the admin bar, or anything else stacked above the header, the two differ
 * and the scrim rides up over the department row.
 */
.wb-nav-departments.is-open .wb-nav-departments__scrim {
	position: fixed;
	top: var(--wb-nav-scrim-top, 0);
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 30;
	display: block;
	background: rgba(22, 24, 29, 0.28);
}

.wb-nav-departments__drawer {
	position: relative;
	z-index: 40;
}

/* ----------------------------------------------------- Drawer toggle */

.wb-nav-departments__drawer-toggle {
	display: none;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 var(--wb-nav-gutter);
	border: 0;
	background: none;
	color: var(--wb-nav-foreground);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

/*
 * The burger and the close button are one glyph in two states. Both render
 * Lucide's `menu` — three lines, 2px, round caps — and the close is that same
 * glyph with the outer two crossed and the middle one gone. Drawing them from
 * the same three lines is what lets one become the other instead of being
 * swapped for a different picture.
 */
.wb-nav-departments__drawer-icon,
.wb-nav-departments__drawer-close-icon {
	display: block;
	width: 22px;
	height: 22px;
	color: inherit;
}

.wb-nav-departments__drawer-icon svg,
.wb-nav-departments__drawer-close-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/*
 * Each line turns about its own centre. Without `fill-box` the origin is the
 * whole SVG's border box, and the two outer lines swing around a point they
 * do not sit on — they cross well below the middle instead of on it.
 */
.wb-nav-departments__bar {
	transform-box: fill-box;
	transform-origin: center;
	transition:
		transform var(--wb-nav-motion) ease,
		opacity calc(var(--wb-nav-motion) / 2) ease;
}

/*
 * The X. The outer lines travel to the middle line's row and cross there; the
 * middle one goes, and goes first, so it is not still fading while the other
 * two land on top of it.
 */
.wb-nav-departments__drawer-close-icon .wb-nav-departments__bar--top {
	transform: translateY(6px) rotate(45deg);
}

.wb-nav-departments__drawer-close-icon .wb-nav-departments__bar--bot {
	transform: translateY(-6px) rotate(-45deg);
}

.wb-nav-departments__drawer-close-icon .wb-nav-departments__bar--mid {
	opacity: 0;
	transform: scaleX(0.4);
}

/*
 * Hidden utility text. A visible close button still needs an accessible
 * name distinct from its icon, and the theme's own `.screen-reader-text` is
 * not something this plugin can depend on being present.
 */
.wb-nav-departments__visually-hidden {
	position: absolute;
	overflow: hidden;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * The drawer's own title bar and close button. Desktop never shows a
 * drawer, so both are hidden until the mobile layout below turns them on.
 * The location row is the same story — desktop already carries it in the
 * header's utility strip, so it would be a second copy of the same control.
 */
.wb-nav-departments__drawer-header,
.wb-nav-departments__drawer-close,
.wb-nav-departments__drawer-brand {
	display: none;
}

/* ------------------------------------------------------------ Mobile */

@media (max-width: 900px) {
	/*
	 * A square target at the gutter, not a label-and-icon row. 44px is the
	 * floor a thumb needs, and the glyph is centred in it rather than the
	 * box being sized from the glyph.
	 */
	.wb-nav-departments__drawer-toggle {
		display: flex;
		justify-content: center;
		width: var(--wb-nav-hit);
		min-height: var(--wb-nav-hit);

		/*
		 * The negative trailing margin aligns the wordmark without shrinking
		 * the button's target.
		 */
		margin-left: calc(var(--wb-nav-gutter, 20px) - 13px);
		margin-right: -5px;
		padding: 0;
	}

	/*
	 * Both glyphs a touch smaller here than on the desktop row, but square:
	 * they are a 24-unit drawing now, so a width alone would squash it.
	 */
	.wb-nav-departments__drawer-icon,
	.wb-nav-departments__drawer-close-icon {
		width: 20px;
		height: 20px;
	}

	.wb-nav-departments__drawer {
		position: fixed;

		/*
		 * Offset by the admin bar when one is present. The drawer is fixed to
		 * the viewport, so without this its first department sits underneath
		 * the bar and cannot be tapped.
		 */
		top: var(--wb-nav-drawer-top, var(--wp-admin--admin-bar--height, 0));
		bottom: 0;
		left: 0;

		/*
		 * Above the cart plugin's floating button, which sits at 9998 and
		 * otherwise paints over the drawer. The cart's own drawer at 9999
		 * still wins, which is right: it is the later modal.
		 */
		z-index: 9998;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		width: var(--wb-nav-drawer-width);
		box-shadow: var(--wb-nav-drawer-shadow);
		background: var(--wb-nav-row-active-bg);
		transform: translateX(-100%);
		transition: transform var(--wb-nav-motion) ease;
		visibility: hidden;
	}

	.wb-nav-departments.is-drawer-open .wb-nav-departments__drawer {
		transform: none;
		visibility: visible;
	}

	/*
	 * The title bar. It sits above the scrolling body as a fixed-height flex
	 * item rather than inside it, so it can never be scrolled out of view —
	 * the only pinned chrome the drawer has, and the anchor everything else
	 * measures itself against.
	 *
	 * Sized to the header's brand row, which is the row it covers: the drawer
	 * opens directly beneath the location strip and carries the same wordmark,
	 * so any difference reads as the wordmark jumping as the menu opens.
	 *
	 * No rule under it, and none under the search below it either. The top of
	 * the drawer is one surface — wordmark, then the field — and drawing a
	 * line across it at each change of content cut that into three bands
	 * before a single department had been listed. The list's own dividers
	 * start where the list does.
	 */
	.wb-nav-departments__drawer-header {
		display: flex;
		box-sizing: border-box;
		flex: 0 0 auto;
		align-items: center;
		gap: 0;
		min-height: 60px;

		/*
		 * The drawer's own gutter on the right, not a value of its own. At
		 * 18 the cart inside it stopped four pixels short of where the page
		 * header's cart stops, so the same control moved sideways as the
		 * menu opened over it.
		 */
		padding: 0 var(--wb-nav-drawer-gutter) 0 0;
	}

	/*
	 * Drawn exactly as the page's wordmark is. The drawer covers the brand
	 * row and puts this in its place, so a different size or tracking makes
	 * the store's name hop the moment the menu opens — it was landing 4px
	 * right and 1.5px narrower.
	 */
	.wb-nav-departments__drawer-brand {
		display: block;

		/*
		 * Pulled onto the page wordmark's own left edge. The burger's 44px
		 * box and the close button's 40px one do not end in the same place,
		 * so matching the type alone still left the name starting 4px right
		 * of where it had been a moment earlier.
		 */
		margin-left: -4px;
		color: var(--wb-nav-foreground);
		font-size: 16px;
		font-weight: 800;
		letter-spacing: -0.01em;
		text-decoration: none;
	}

	.wb-nav-departments__drawer-cart {
		display: flex;
		align-items: center;
		margin-left: auto;
	}

	.wb-nav-departments__drawer-cart .cc-mini-cart {
		margin: 0 !important;
		animation: none;
	}

	/*
	 * Smaller than the header's copy. Up there the cart is one of three
	 * things in the bar; in here it sits beside a wordmark and a close
	 * button and was the loudest of the three, which put the emphasis on
	 * leaving with a cart rather than on the menu you just opened.
	 */
	.wb-nav-departments__drawer-cart .cc-mini-cart__button {
		width: 26px;
		height: 26px;
		padding: 3px;
	}

	.wb-nav-departments__drawer-cart .cc-mini-cart__icon {
		width: 18px;
		height: 18px;
	}

	/* Scaled with the glyph, so the count still sits on its corner. */
	.wb-nav-departments__drawer-cart .cc-mini-cart__badge {
		top: -2px;
		right: -3px;
		min-width: 13px;
		height: 13px;
		padding: 0 3px;
		font-size: 8.5px;
	}

	.wb-nav-departments__drawer-cart .cc-mini-cart__subtotal {
		color: var(--wb-nav-foreground);
		font-weight: 700;
		white-space: nowrap;
	}

	.wb-nav-departments__drawer-close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 44px;
		margin-left: 4px;
		border: 0;
		background: none;
		cursor: pointer;
	}

	/*
	 * The body owns the scrolling panes and their overscroll containment; the
	 * header above stays outside it entirely rather than being clipped by
	 * it. It is also the positioning context pane two's `inset: 0` resolves
	 * against, so an open panel fills the body and never draws under the
	 * header.
	 */
	.wb-nav-departments__drawer-body {
		position: relative;
		flex: 1 1 auto;
		display: flex;
		overflow: hidden;
		min-height: 0;
		overscroll-behavior: contain;
	}

	/*
	 * The drawer is a modal surface, so it does get a scrim — starting below
	 * the location strip, which stays at full strength above it. Where the
	 * order is going is a fact about the whole visit rather than part of the
	 * page the menu is covering, and dimming it made the drawer look like it
	 * had pushed the strip behind glass.
	 */
	.wb-nav-departments.is-drawer-open .wb-nav-departments__scrim {
		position: fixed;
		top: var(--wb-nav-drawer-top, var(--wp-admin--admin-bar--height, 0));
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 9997;
		display: block;
		background: var(--wb-nav-scrim);

		/*
		 * Dims with the drag. The swipe publishes how far the drawer has
		 * travelled as `--wb-nav-scrim-progress`; with no drag in flight the
		 * property is absent and the scrim is simply at full strength.
		 */
		opacity: var(--wb-nav-scrim-progress, 1);
		animation: wb-nav-scrim-in var(--wb-nav-motion) ease;
	}

	/* Pane one — the department list. */
	.wb-nav-departments__row {
		overscroll-behavior: contain;
		flex: 0 0 100%;
		flex-direction: column;
		justify-content: flex-start;
		gap: 0;
		overflow-y: auto;
		padding: 0;
		transform: translateX(0);
		transition: transform var(--wb-nav-motion) ease;
	}

	/*
	 * Pane one leaves as pane two arrives — 90% of its own width against the
	 * incoming pane's 100%, on the same duration and curve. It used to sit
	 * still while the panel slid over the top of it, which reads as a sheet
	 * covering a list. Moving them together makes the two panes one surface
	 * travelling sideways. The small ten-point difference keeps the outgoing
	 * content visible as a connected surface without competing with the arrival.
	 */
	.wb-nav-departments.is-open .wb-nav-departments__row {
		transform: translateX(-90%);
	}

	.wb-nav-departments__list {
		flex-direction: column;
		gap: 0;
	}

	.wb-nav-departments__item {
		border-bottom: 1px solid var(--wb-nav-divider);
	}

	/*
	 * No rule under the last one. A divider separates two rows, and under the
	 * final department it separates the list from the empty space above the
	 * footer — a line with nothing on the other side of it.
	 */
	.wb-nav-departments__item:last-child {
		border-bottom: 0;
	}

	.wb-nav-departments {
		/*
		 * The page's own gutter, matching the header's. This block declares
		 * its own copy — it renders inside the header but is not a child of
		 * the element carrying that custom property — so the two have to be
		 * set together or the burger sits inside the content it belongs to.
		 */
		--wb-nav-gutter: 14px;

		/* Only the hamburger shows at this width; the row itself is gone. */
		background: transparent;
		border-bottom: 0;
	}

	.wb-nav-departments__tab {
		/*
		 * The same 44px chevron band the category rows use, so the mark lands
		 * on one vertical line as you drill in and out. Flush against the
		 * gutter it sat 18px further right than the one in the pane it opens,
		 * which is the width of the drill button the category rows reserve.
		 */
		position: relative;
		width: 100%;
		min-height: var(--wb-nav-hit);

		/*
		 * 13px around an 18px line is 44px, the height every row in the
		 * drawer is drawn at. The label's inherited line-height made it 21
		 * and the row 47, which read as a looser list than the panels it
		 * opens.
		 */
		padding:
			13px calc(44px + var(--wb-nav-drawer-gutter)) 13px
			var(--wb-nav-drawer-gutter);
		line-height: 18px;
		border-bottom: 0;
		font-size: 14px;
	}

	/*
	 * Every row carries one. It used to mark only the departments that open
	 * a second pane, on the reasoning that a chevron promises a level below.
	 * Read down the list, though, the rows without one look like rows that
	 * do nothing rather than rows that go straight somewhere — and a list
	 * where some items are marked asks the reader to work out the rule.
	 * Marking all of them says "these all go somewhere", which is true.
	 */
	.wb-nav-departments__tab::after {
		position: absolute;
		top: calc(50% - 4px);

		/*
		 * The band's own 18px plus the gutter. A department row runs the full
		 * width of the drawer where a category row is inset by the panel's
		 * padding, so matching the inset alone still left this mark a gutter
		 * further out than the one it drills into.
		 */
		right: calc(18px + var(--wb-nav-drawer-gutter));
		width: 8px;
		height: 8px;
		border-right: 2px solid var(--wb-nav-chevron);
		border-bottom: 2px solid var(--wb-nav-chevron);
		transform: rotate(-45deg);
		content: "";
	}

	.wb-nav-departments__tab.is-active::after {
		border-color: var(--wb-nav-brand);
	}

	.wb-nav-departments__editorial {
		display: none;
	}

	/* Pane two — the panel, sliding over pane one. */
	.wb-nav-departments__panel {
		overscroll-behavior: contain;
		position: absolute;
		inset: 0;
		z-index: 1;
		overflow-y: auto;
		border-bottom: 0;
		box-shadow: none;
		transform: translateX(100%);
		transition: transform var(--wb-nav-motion) ease;
	}

	.wb-nav-departments.is-open .wb-nav-departments__panel:not([hidden]) {
		transform: none;
	}

	/*
	 * A row's worth of clearance at the foot. The footer is pinned over the
	 * pane, so a list that runs past it was being cut through the glyphs of
	 * whatever row landed on the boundary — which reads as breakage, not as
	 * "there is more below".
	 */
	.wb-nav-departments__panel-inner {
		padding: 12px var(--wb-nav-drawer-gutter) var(--wb-nav-hit);
	}

	/*
	 * Sticky rather than in the normal flow: panel content runs to almost
	 * two screens tall, and a back control that scrolls away with it leaves
	 * no way back to the department list short of the browser back gesture.
	 * The solid background is load-bearing — without it panel content shows
	 * straight through while it is pinned mid-scroll.
	 */

	/*
	 * Back and close share one pinned row. They are different intentions —
	 * one goes up a level, the other leaves — and two panes deep the only way
	 * out used to be the scrim.
	 */
	.wb-nav-departments.is-open .wb-nav-departments__drawer-header {
		display: none;
	}

	/*
	 * Same height as the title bar it replaces, and taken from the same
	 * property so the two cannot drift apart. Drilling into a department
	 * swaps one bar for the other in place: at 50px against the drawer
	 * header's 60 the bar visibly thinned on the way in, and the whole pane
	 * under it stepped up ten pixels and back down again on the way out.
	 */
	.wb-nav-departments__panel-head {
		position: sticky;
		z-index: 2;
		top: 0;
		display: flex;
		box-sizing: border-box;
		align-items: center;
		justify-content: space-between;
		min-height: var(--wb-nav-brand-row, 60px);

		/*
		 * No vertical padding: the row centres its controls anyway, and 8px
		 * on each side of a 44px tap target came to 61px, one over the band
		 * it is matching.
		 */
		padding: 0 var(--wb-nav-drawer-gutter);
		border-bottom: 1px solid var(--wb-nav-border);
		background: var(--wb-nav-row-active-bg);
	}

	/*
	 * The same 44px floor as the close button beside it. It had none at all
	 * — its height was whatever two lines of text came to, about 31 — and it
	 * is the control used on every drill-out, in the corner hardest to reach
	 * one-handed.
	 */
	.wb-nav-departments__panel-back {
		display: flex;
		align-items: center;
		gap: 12px;
		min-height: var(--wb-nav-hit);
		padding: 0;
		border: 0;
		background: none;
		color: var(--wb-nav-accent);
		font: inherit;
		text-align: left;
		cursor: pointer;
	}

	.wb-nav-departments__panel-close {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: var(--wb-nav-hit);
		height: var(--wb-nav-hit);
		padding: 0;
		border: 0;
		background: none;
		color: var(--wb-nav-foreground);
		cursor: pointer;
	}

	.wb-nav-departments__panel-back-icon {
		width: 9px;
		height: 9px;
		border-bottom: 2px solid currentcolor;
		border-left: 2px solid currentcolor;
		transform: rotate(45deg);
	}

	.wb-nav-departments__panel-back-text {
		display: flex;
		flex-direction: column;
		gap: 1px;
	}

	.wb-nav-departments__panel-back-parent {
		color: var(--wb-nav-muted);
		font-size: 10.5px;
		font-weight: 600;
	}

	.wb-nav-departments__panel-back-title {
		color: var(--wb-nav-foreground);
		font-size: 15px;
		font-weight: 800;
	}

	.wb-nav-panel-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.wb-nav-panel-grid > * {
		min-width: 0;
	}

	/*
	 * A desktop column with nothing in it must not leave a phantom grid
	 * track. Empty means empty now that no list is being dropped at this
	 * width — it used to mean "holds no feature card", which was true of
	 * Tiling's column and hid the whole department with it.
	 */
	.wb-nav-departments__panel .wb-nav-panel-stack:empty {
		display: none;
	}

	.wb-nav-departments__panel
		.wb-nav-panel-stack:has(> .wp-block-wb-nav-feature-card) {
		display: contents;
	}

	/*
	 * "Shop all" leads the pane instead of trailing it. term-list renders it
	 * last, which is right on desktop where it closes a column, but on mobile
	 * it is the likeliest destination in the pane and a thumb should not have
	 * to scroll a department's whole category list to reach it. Reordered
	 * rather than moved, so both layouts keep reading from one source.
	 */
	.wb-nav-departments__panel .wb-nav-term-list {
		display: flex;
		flex-direction: column;
	}

	.wb-nav-departments__panel
		.wb-nav-term-list--list
		.wb-nav-term-list__eyebrow {
		margin-bottom: 4px;
	}

	.wb-nav-departments__panel .wb-nav-term-list__more {
		order: -1;
		display: flex;
		align-items: center;
		justify-content: space-between;

		/* The likeliest destination in the pane, so not the smallest target. */
		min-height: var(--wb-nav-hit);
		margin: 0 0 14px;
		padding: 0 16px;
		border-radius: 8px;
		background: var(--wb-nav-accent);
		color: #fff;
		font-size: 14px;
		font-weight: 700;
	}

	/*
	 * Category links become full-width rows on the drawer's own rhythm. The
	 * chevron that opens the level below is term-list's, and only rendered
	 * for a term that actually has children. Rows without one draw a chevron
	 * of their own below, so the mark means "this goes somewhere" rather
	 * than "this opens a pane" — read down a list, a row without one looked
	 * like a row that did nothing.
	 */
	.wb-nav-departments__panel .wb-nav-term-list--list .wb-nav-term-list__item {
		position: relative;
		display: flex;
		align-items: center;
		margin-top: 0;

		/*
		 * Room kept for a chevron on every row, whether the row draws its own
		 * or carries the drill button. The button is a flex sibling taking
		 * 44px out of the row, so without this the counts would not share an
		 * edge.
		 */
		padding-right: 44px;
		border-top: 1px solid var(--wb-nav-divider);
	}

	/*
	 * A list that asked to be chips below the breakpoint is not a row list,
	 * whatever its desktop display says. Stated here rather than fought over
	 * with specificity in the term-list stylesheet, because the rule being
	 * undone is this file's.
	 */
	.wb-nav-departments__panel
		.wb-nav-term-list--mobile-chips
		.wb-nav-term-list__item {
		border-top: 0;
	}

	.wb-nav-departments__panel
		.wb-nav-term-list--mobile-chips
		.wb-nav-term-list__items {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.wb-nav-departments__panel
		.wb-nav-term-list--mobile-chips
		.wb-nav-term-list__eyebrow {
		margin-bottom: 0;
	}

	.wb-nav-departments__panel
		.wb-nav-term-list--mobile-chips
		.wb-nav-term-list__items::-webkit-scrollbar {
		display: none;
	}

	.wb-nav-departments__panel .wb-nav-term-list__item:first-child {
		border-top: 0;
	}

	.wb-nav-departments__panel .wb-nav-term-list--list .wb-nav-term-list__link {
		display: flex;

		/*
		 * The two clusters at opposite ends, so a long category name wraps
		 * inside its own half rather than pushing the count off the edge.
		 */
		justify-content: space-between;
		align-items: center;
		flex: 1;
		gap: 8px;
		min-width: 0;

		/*
		 * The same target as a department row in pane one. Drilling in should
		 * not change how big a thing you are tapping, and at 40 against 44 the
		 * list visibly tightened as you went a level down.
		 */
		min-height: var(--wb-nav-hit);

		/*
		 * 12px against a 20px line (below) leaves 44px, so the tap target is
		 * the row rather than something taller that happens to contain it —
		 * and a row with a badge in it stays the same height as one without.
		 */
		padding: 12px 0;
	}

	.wb-nav-departments__panel
		.wb-nav-term-list--mobile-chips
		.wb-nav-term-list__link {
		width: auto;
		min-height: 32px;
		padding: 0 14px;
	}

	/*
	 * A 20px line, so twelve pixels of padding on each side of it comes to
	 * the 44px the rows are specified at. The inherited 1.4 made it 21 and
	 * every row 45.
	 */
	.wb-nav-departments__panel .wb-nav-term-list--list .wb-nav-term-list__name {
		font-size: 13px;
		font-weight: 600;
		line-height: 20px;
	}

	/*
	 * The chevron a row draws for itself. A category with a third level has
	 * a real button for it; one without still goes somewhere, and a list
	 * where only some rows are marked asks the reader to work out the rule.
	 * Same 8px mark as the button's, centred in the same 44px band, so the
	 * two kinds of row are indistinguishable until you press one.
	 */
	.wb-nav-departments__panel
		.wb-nav-term-list--list
		.wb-nav-term-list__item:not(:has(.wb-nav-term-list__drill))::after {
		position: absolute;
		top: calc(50% - 4px);
		right: 18px;
		width: 8px;
		height: 8px;
		border-right: 2px solid var(--wb-nav-chevron);
		border-bottom: 2px solid var(--wb-nav-chevron);
		transform: rotate(-45deg);
		content: "";
	}

	.wb-nav-departments__panel
		.wb-nav-term-list--list
		.wb-nav-term-list__item:has(.wb-nav-term-list__drill) {
		padding-right: 0;
	}

	.wb-nav-departments__panel
		.wb-nav-term-list--list
		.wb-nav-term-list__count {
		/*
		 * The muted token, not a literal of its own. `--wb-nav-count` was
		 * never declared anywhere, so the #8a909b fallback always won — and
		 * at 11.5px that is 3.2:1 on white, under the 4.5 a small label needs
		 * to be read. The token the handover assigns to metadata is 4.8:1.
		 */
		color: var(--wb-nav-muted);
		font-size: 11.5px;
		font-weight: 400;
	}

	/*
	 * A fixed 20px so it matches the name's line rather than setting the
	 * row's height from its own padding and border — at its natural height
	 * every row carrying a badge came out three pixels taller than the rest.
	 */

	/*
	 * Weight as well as colour. A lone blue row among black ones reads as
	 * "this one is a link" rather than "this is where you are" — and it is
	 * the same blue as the Shop-all button above and the back chevron
	 * beside, so one colour was carrying three meanings in a single pane.
	 */
	.wb-nav-departments__panel
		.wb-nav-term-list__link[aria-current="page"]
		.wb-nav-term-list__name {
		font-weight: 700;
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.wb-nav-departments__panel .wb-nav-term-list__badge {
		display: inline-flex;
		align-items: center;
		flex: 0 0 auto;
		height: 20px;
		padding: 2px 6px;
		border: 0;
		border-radius: 5px;

		/*
		 * One treatment in the drawer whatever tone the editor picked. The
		 * row already carries the category's own emphasis; a badge that
		 * changes colour per term turns a list into a legend.
		 */
		background: var(--wb-nav-badge-bg, #e7f0ff);
		color: var(--wb-nav-badge-fg, #1550c9);
		font-size: 10px;
		font-weight: 800;
		line-height: 1;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	/*
	 * The drawer footer. Tinted and ruled off so it does not read as another
	 * department, and pushed to the bottom of pane one by `margin-top: auto`
	 * so it sits against the foot of a tall drawer rather than trailing the
	 * last department on a short one.
	 */

	/*
	 * The support column does not come into the drawer. A feature card and a
	 * "we also stock…" note are there to fill the fourth column of a wide
	 * panel; stacked in a drawer they are two screens of scrolling between a
	 * visitor and the links they opened the menu for. The links stay in the
	 * server HTML either way.
	 */

	/*
	 * While a sub-pane is showing, the pane underneath must not scroll: the
	 * sub-pane is positioned against the panel's content box, so any scroll
	 * offset underneath carries it off the top of the viewport.
	 */
	.wb-nav-departments__panel.is-subpane-open {
		overflow: hidden;
	}

	/*
	 * The support card stays hidden: it is a desktop column's worth of copy
	 * and earns its place beside three other columns, not on a screen of its
	 * own. The feature card is different — it is the one picture in the pane,
	 * and the handover puts it at the foot of every department.
	 */
	.wb-nav-departments__panel .wb-nav-panel-card {
		display: none;
	}

	/*
	 * Horizontal here, where the desktop card is a tall picture with copy
	 * under it. A column of that shape at the bottom of a pane is a second
	 * screen's worth of scrolling for one link.
	 *
	 * The eyebrow takes the full first row so it reads as the section label
	 * the other blocks in the pane have, rather than as a line of the card's
	 * own copy. `display: contents` on the body is what allows it: the
	 * eyebrow is nested inside that, and only a grid's own children can be
	 * placed into its areas.
	 */
	.wb-nav-departments__panel .wp-block-wb-nav-feature-card {
		position: relative;
		display: grid;
		grid-template-columns: 60px auto 1fr auto;
		grid-template-areas:
			"eyebrow eyebrow eyebrow eyebrow"
			"media   title   meta    cta"
			"media   text    text    cta";
		align-items: center;
		column-gap: 10px;
		padding: 0 10px 10px 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.wb-nav-departments__panel
		.wp-block-wb-nav-feature-card
		.wb-nav-feature-card__body {
		display: contents;
	}

	.wb-nav-departments__panel .wb-nav-feature-card__eyebrow {
		grid-area: eyebrow;
		margin-bottom: 8px;
		color: var(--wb-nav-muted);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	/*
	 * A fixed square rather than a stretched column. Spanning both text rows
	 * and sizing from them made the picture as tall as the copy beside it —
	 * 64 wide by 132 tall for a three-line description.
	 */
	.wb-nav-departments__panel .wb-nav-feature-card__media {
		grid-area: media;
		align-self: center;
		flex: 0 0 auto;
		justify-self: end;
		width: 50px;
		height: 50px;
		overflow: hidden;
		border-radius: 8px;
	}

	.wb-nav-departments__panel .wb-nav-feature-card__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.wb-nav-departments__panel .wb-nav-feature-card__title {
		grid-area: title;
		align-self: end;
		font-size: 15px;
		font-weight: 700;
		line-height: 20px;
	}

	.wb-nav-departments__panel .wb-nav-feature-card__meta {
		grid-area: meta;
		align-self: end;
		justify-self: start;
		color: var(--wb-nav-muted);
		font-size: 13.5px;
		line-height: 20px;
	}

	.wb-nav-departments__panel .wb-nav-feature-card__meta-full {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.wb-nav-departments__panel .wb-nav-feature-card__meta-mobile {
		display: inline;
	}

	.wb-nav-departments__panel .wb-nav-feature-card__text {
		grid-area: text;
		align-self: start;
		margin-top: 0;
		color: var(--wb-nav-muted);
		font-size: 12px;
		line-height: 16px;
	}

	/*
	 * The whole card is the link, so its written call to action is a second
	 * name for the same destination. Clipped rather than removed, because it
	 * is the only part that says where the card goes — a screen reader still
	 * reads "Shop cork flooring" at the end of it.
	 */
	.wb-nav-departments__panel .wb-nav-feature-card__cta {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.wb-nav-departments__panel .wp-block-wb-nav-feature-card::after {
		content: "";
		grid-area: cta;
		align-self: center;
		width: 7px;
		height: 7px;
		border-top: 2px solid var(--wb-nav-edge, #c3cad4);
		border-right: 2px solid var(--wb-nav-edge, #c3cad4);
		transform: rotate(45deg);
	}

	.wb-nav-departments__panel .wp-block-wb-nav-feature-card::before {
		position: absolute;
		top: 18px;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: -1;
		border: 1px solid var(--wb-nav-border);
		border-radius: 10px;
		background: #fff;
		content: "";
	}

	/*
	 * Nothing is dropped here any more. A list marked desktop-only used to be
	 * hidden on the reasoning that a column earning its place beside three
	 * others does not necessarily earn a screen of its own — but a pane is
	 * not a screen's worth of anything, it scrolls, and what it cost was
	 * real links. Flooring lost its accessories and its properties; Tiling
	 * lost its materials and its tools. A customer who drills into a
	 * department should find the department.
	 */

	/*
	 * Search leads the pane. It is the fastest route to a product, and a
	 * visitor who knows what they want should not have to walk a taxonomy to
	 * reach it.
	 */
	.wb-nav-departments__drawer-search {
		display: block;
		padding: 14px 18px 14px var(--wb-nav-drawer-gutter);
	}

	/*
	 * The drawer's floor. It sits beside the panes rather than inside pane
	 * one, so it does not scroll with the department list and a department
	 * pane cannot cover it — every pane keeps the account rows and the phone
	 * number. `flex: 0 0 auto` against the body's `flex: 1` is what holds it
	 * down there without a margin doing the work.
	 *
	 * Its own ground and a rule above it, so it reads as the drawer's edge
	 * rather than as two more rows at the end of whatever is above.
	 */
	.wb-nav-departments__drawer-footer {
		display: block;
		flex: 0 0 auto;
		border-top: 1px solid var(--wb-nav-border);
		background: var(--wb-nav-drawer-row-bg);
	}

	.wb-nav-departments__drawer-footer .wp-block-group {
		gap: 0;
	}

	.wb-nav-departments__drawer-footer .cc-track-order-link {
		display: none;
	}

	.wb-nav-departments__drawer-footer p {
		margin: 0;
	}

	.wb-nav-departments__drawer-footer a {
		display: flex;
		align-items: center;
		gap: 12px;
		min-height: var(--wb-nav-hit);
		padding: 12px var(--wb-nav-drawer-gutter);
		border-bottom: 1px solid var(--wb-nav-divider);
		color: var(--wb-nav-foreground);
		font-size: 14px;
		font-weight: 700;
		line-height: 20px;
		text-decoration: none;
	}

	/* The renderer replaces the editor-authored account copy per login state. */
	.wb-nav-departments__drawer-footer a[hidden] {
		display: none;
	}

	/*
	 * A chevron, so these read as rows that go somewhere — the same
	 * affordance the department rows above them carry. The phone row is
	 * excluded below: it is a number, not a destination.
	 */
	.wb-nav-departments__drawer-footer a::after {
		content: "";
		flex: 0 0 auto;
		width: 7px;
		height: 7px;
		margin-left: auto;
		border-top: 2px solid var(--wb-nav-edge, #c3cad4);
		border-right: 2px solid var(--wb-nav-edge, #c3cad4);
		transform: rotate(45deg);
	}

	/*
	 * An icon per row, drawn here rather than authored into the pattern.
	 * These rows are inner block content — plain links the editor writes —
	 * and the only thing in them that says which row is which is where the
	 * link goes. So the icon keys off the destination, the same way the
	 * phone row's own treatment already does. A changed URL loses its icon;
	 * it does not lose the row.
	 */
	.wb-nav-departments__drawer-footer a::before {
		content: "";
		flex: 0 0 auto;
		width: 20px;
		height: 20px;
		background-color: var(--wb-nav-muted);
		mask-position: center;
		mask-repeat: no-repeat;
		mask-size: 20px 20px;
	}

	.wb-nav-departments__drawer-footer a[href*="/my-account/"]::before {
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
	}

	.wb-nav-departments__drawer-footer a[href*="quote"]::before {
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3C/svg%3E");
	}

	/*
	 * A class here, not a destination. This row is rendered by
	 * cart-checkout's track-order-link block and its href is whichever order
	 * the customer currently has in progress, so there is no stable word in
	 * the URL to match on.
	 */
	.wb-nav-departments__drawer-footer a[href*="track"]::before,
	.wb-nav-departments__drawer-footer a.cc-track-order::before {
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.62l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E");
	}

	.wb-nav-departments__drawer-footer a[href^="tel:"]::before {
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	}

	/*
	 * The phone is the last row and is not a destination in the catalogue, so
	 * it reads as information rather than as another place to go: no rule
	 * under it, no chevron, and the label in the same muted ink as its icon.
	 */
	.wb-nav-departments__drawer-footer a[href^="tel:"] {
		/*
		 * Taller than the rows above it. It is the last thing in the drawer
		 * and the only one that does something other than navigate, and at
		 * the same 45px as the account rows it read as one more of them that
		 * happened to be greyed out.
		 */
		min-height: 60px;
		border-bottom: 0;
		color: var(--wb-nav-muted);
		font-weight: 600;
	}

	.wb-nav-departments__drawer-footer a[href^="tel:"] strong {
		color: var(--wb-nav-foreground);
		font-weight: 700;
	}

	.wb-nav-departments__drawer-footer a[href^="tel:"]::after {
		content: none;
	}
}

/*
 * The burger becoming the X. The close button sits where the burger was, so
 * the eye reads one glyph changing rather than two controls swapping — but
 * they are separate elements, and the close one is only shown as the drawer
 * arrives, so there is no state change for a transition to pick up. The
 * animation supplies the start: each line begins where `menu` had it and ends
 * where the stylesheet already puts it.
 *
 * Only the drawer's own close. The panel close, two panes deep, has no burger
 * behind it to have come from.
 */
@media (prefers-reduced-motion: no-preference) {
	.wb-nav-departments.is-drawer-open
		.wb-nav-departments__drawer-close
		.wb-nav-departments__bar--top,
	.wb-nav-departments.is-drawer-open
		.wb-nav-departments__drawer-close
		.wb-nav-departments__bar--bot {
		animation: wb-nav-bar-cross var(--wb-nav-motion) ease;
	}

	.wb-nav-departments.is-drawer-open
		.wb-nav-departments__drawer-close
		.wb-nav-departments__bar--mid {
		animation: wb-nav-bar-clear var(--wb-nav-motion) ease;
	}
}

/*
 * A `from` and no `to`: the end of each is whatever the rule above leaves the
 * line at, so the X is defined once and the animation only says where the
 * line travelled from.
 */
@keyframes wb-nav-bar-cross {
	from {
		transform: none;
	}
}

@keyframes wb-nav-bar-clear {
	from {
		opacity: 1;
		transform: none;
	}
}

/*
 * The scrim appears with the drawer rather than under it. It is a fresh
 * element each time the drawer opens, so it fades in with a keyframe — a
 * transition would have nothing to transition from.
 */
@keyframes wb-nav-scrim-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/*
 * Movement goes, the fade stays. What a reduced-motion setting asks for is
 * relief from things travelling across the screen — the drawer and its panes
 * arrive in place instead of sliding. A scrim changing opacity is not motion
 * in that sense, and taking it away replaces a soft dim with a hard one,
 * which is the more startling of the two.
 */
@media (prefers-reduced-motion: reduce) {
	.wb-nav-departments__drawer,
	.wb-nav-departments__panel,
	.wb-nav-departments__row {
		transition: none;
	}
}

/* -------------------------------------- Interaction and current state */

/*
 * Focus is drawn, not just coloured. Hover and focus were previously
 * identical, which left a keyboard user with no way to tell where they were.
 */
.wb-nav-departments__tab:focus-visible {
	border-radius: 4px;
	color: var(--wb-nav-brand);
	outline: 2px solid var(--wb-nav-brand);
	outline-offset: 3px;
}

/* The section the visitor is already in. */
.wb-nav-departments__tab[aria-current="page"] {
	border-bottom-color: #c3cede;
	color: var(--wb-nav-brand);
}

.wb-nav-departments__tab[aria-current="page"].is-active {
	border-bottom-color: var(--wb-nav-brand);
}

.wb-nav-departments__editorial:focus-visible {
	border-radius: 4px;
	color: var(--wb-nav-brand);
	outline: 2px solid var(--wb-nav-brand);
	outline-offset: 3px;
}

.wb-nav-departments__drawer-toggle:focus-visible,
.wb-nav-departments__panel-back:focus-visible {
	outline: 2px solid var(--wb-nav-brand);
	outline-offset: -2px;
}

/* ---------------------------------------------- While the drawer is open */

/*
 * The drawer is a modal surface. Without locking the document the page keeps
 * scrolling behind it, and other plugins' floating chrome keeps painting over
 * it: the cart's floating button and its add-to-cart toast both sit far above
 * any sensible header stacking order.
 */
html.wb-nav-drawer-open,
body.wb-nav-drawer-open {
	overflow: hidden;
}

/*
 * Hidden overflow is not a lock on iOS: Safari keeps scrolling the page on
 * touch regardless. Pinning the body holds it. The store records the scroll
 * position, offsets the body by it, and puts it back on close, so the page
 * does not jump to the top when the drawer closes.
 */
body.wb-nav-drawer-open {
	position: fixed;
	right: 0;
	left: 0;
	width: 100%;

	/*
	 * The admin bar's offset, put back. WordPress makes room for the bar with
	 * a margin on `html`, and a fixed body is positioned against the viewport
	 * rather than inside that margin — so pinning the body drops the gap the
	 * bar was occupying and the page slides up underneath it. That was
	 * invisible while the drawer covered the whole top of the screen; now
	 * that the location strip stays above the drawer, the strip is what ends
	 * up hidden.
	 *
	 * Padding and not margin: the bar is `position: absolute; top: 0` against
	 * the body, so its containing block is the padding box, which padding
	 * does not move. A margin shifts the border box and carries the bar down
	 * with everything else, leaving the overlap exactly where it was.
	 *
	 * The departments store measures the bar's live bottom edge into this
	 * property as the drawer opens, and it is 0 when there is no bar at all.
	 */
	padding-top: var(--wb-nav-admin-bar, 0);
}

/*
 * The cart plugin's floating chrome, out of the way while the drawer is open.
 * All three sit above any sensible header stacking order — the drawer is at
 * 9998 and cannot outrank them — so they are hidden rather than layered.
 *
 * The third is the cart panel itself, which is a bottom bar by design and
 * stands 37px into the viewport even with nothing open. At 9999 its top
 * border drew a hairline straight across the drawer, through the phone icon
 * in the footer, in every pane. Only the closed one goes: a cart the customer
 * has actually opened is the later modal and should win.
 */
body.wb-nav-drawer-open .cc-cart-fab,
body.wb-nav-drawer-open .cc-mini-cart__toast,
body.wb-nav-drawer-open .cc-cart:not(.cc-cart--opened) {
	display: none;
}