/*
 * Woo Vendor Menu — the Woo Inbox drawer's sibling.
 *
 * Same parts as the Inbox, so the two blocks read as one control cluster beside
 * the Mini Cart: the same button box and count badge, the same overlay tint and
 * .3s slide, the same dark base surface with white type under a 2rem Uncut Sans
 * title band. Two things part company on purpose: this block's counts are round
 * rather than pills, and its panel is one flat list with no section labels. Every token below is named and defaulted exactly like the Inbox's,
 * shipped from this plugin's theme.json, so Global Styles → Blocks → Woo Vendor
 * Menu tunes this drawer on its own without disturbing the Inbox.
 */

.woo-vendor-menu {
	display: inline-block;
	color: inherit;

	/*
	 * Design tokens. Every value below ships as a default in this plugin's
	 * theme.json and can be retuned from Global Styles → Blocks → Woo Vendor Menu.
	 */
	--woo-vendor-menu-accent: var(--wp--custom--woo-vendor-menu--accent, var(--wp--preset--color--contrast, #265cd9));
	--woo-vendor-menu-accent-fg: var(--wp--custom--woo-vendor-menu--accent-text, var(--wp--preset--color--primary, #ffffff));
	--woo-vendor-menu-urgent: var(--wp--custom--woo-vendor-menu--urgent, #d63638);
	--woo-vendor-menu-badge-bg-default: var(--wp--custom--woo-vendor-menu--badge-background, var(--wp--preset--color--primary, #ffffff));
	--woo-vendor-menu-badge-fg: var(--wp--custom--woo-vendor-menu--badge-text, var(--wp--preset--color--base, #0b0a0f));
	--woo-vendor-menu-panel-bg: var(--wp--custom--woo-vendor-menu--panel-background, var(--wp--preset--color--base, #0b0a0f));
	--woo-vendor-menu-panel-fg: var(--wp--custom--woo-vendor-menu--panel-text, var(--wp--preset--color--primary, #ffffff));
	--woo-vendor-menu-panel-muted: var(--wp--custom--woo-vendor-menu--panel-muted, var(--wp--preset--color--secondary, #a5a5a7));
	--woo-vendor-menu-panel-border: var(--wp--custom--woo-vendor-menu--panel-border, rgba(255, 255, 255, 0.14));
	--woo-vendor-menu-panel-width: var(--wp--custom--woo-vendor-menu--panel-width, 30rem);
	--woo-vendor-menu-panel-size: var(--wp--custom--woo-vendor-menu--panel-font-size, 1rem);
	--woo-vendor-menu-panel-title-bg: var(--wp--custom--woo-vendor-menu--panel-title-background, var(--wp--preset--color--base, #0b0a0f));
	--woo-vendor-menu-panel-title-fg: var(--wp--custom--woo-vendor-menu--panel-title-text, var(--wp--preset--color--primary, #ffffff));
	--woo-vendor-menu-heading-font: var(--wp--preset--font-family--uncut-sans, inherit);
	--woo-vendor-menu-panel-faint: var(--wp--custom--woo-vendor-menu--panel-faint, rgba(255, 255, 255, 0.55));
	--woo-vendor-menu-panel-line: var(--wp--custom--woo-vendor-menu--panel-line, rgba(255, 255, 255, 0.24));
	--woo-vendor-menu-panel-tint: var(--wp--custom--woo-vendor-menu--panel-tint, var(--wp--preset--color--tertiary, rgba(58, 90, 233, 0.08)));
	--woo-vendor-menu-button-radius: var(--wp--custom--woo-vendor-menu--panel-button-radius, 5px);
	--woo-vendor-menu-scrim: var(--wp--custom--woo-vendor-menu--panel-scrim, rgba(0, 0, 0, 0.35));
}

/* === button === */

/*
 * The Mini Cart's own square once: 0.3em of padding around a glyph whose 1.7em box and -0.1em margin
 * leave a 1.5em footprint, 42px with the two together at the header's 1.25rem. Matching the padding as
 * well as the glyph is what made the row read evenly, since the plate each of these buttons sits in is
 * sized by the button alone. The four header icons were asked a half step smaller together, and in
 * this figure a half step is 0.1em: this button and the Mini Cart gave back 0.1em of the 0.4em they
 * wore, and the Add Product and Inbox took the same 0.1em off their 0.3em, which brought the cluster
 * from 46px to 42px. The Cart's own glyph has since been asked a touch smaller - 1.6em, 32px - so
 * that button now measures 41px and the Add Product's has come in above and below to 42x40, which
 * leaves this button the only one of the four still drawing the cluster's 42px square.
 *
 * An ask then took all four button paddings a half step smaller again - 0.1em, which is 2px a side at
 * this header's 20px - so this button gave back 0.1em of the 0.3em it wore and measured 40px, and none
 * of the four was left on that square. That ask has since been reverted, and this figure has the 0.3em
 * it wore before it back: the button returns to the Mini Cart's own square, and the cluster to the
 * spacing it held - the four stand 42, 41, 41 and 40 again where the cut had them at 40, 39, 39 and 38.
 *
 * The mark's own size has come down twice since - 1.6em to 1.55em, and now to 1.5em - and this figure
 * has carried the pixel back inside the button each time rather than follow it down, for the reason
 * this note opens with: the plate is sized by the button alone, and the second of those asks said in
 * as many words that the plates were to stay. So the padding read 0.35em over the glyph, 0.325em beside
 * it and 0.3em under it - 7px, 6.5px and 6px at the header's 20px - which over the 26px footprint this
 * mark leaves (its 30px box less the -0.1em margin on each side) was 39 by 39, and the plate's content
 * box the same 39 by 42.1875.
 *
 * The reader has now asked this button onto the Inbox's square, and the figure is one value rather than
 * three: 0.35em all round, which is 7px at this header's 20px and, over the same 26px footprint, makes
 * the button 40 by 40 - the Inbox button's own box to the pixel, a pixel up on both axes from the 39 it
 * wore. The asymmetry the three values carried goes with them: it existed to buy back the half pixel of
 * centre that a 30px mark box and its -0.1em margin cost over a 26px footprint, and 7px above a 26px
 * mark in a 40px box centres it exactly, so the half pixel is refunded rather than paid. The plate this
 * button sits in answers the same ask in its own rule below, where the 2px it had been carrying above
 * and below the block is given back.
 *
 * Its padding has since carried the half pixel of the mark's next ask: 0.35em to 0.3375em, 7px to 6.75px a
 * side, which over the 26.5px footprint the slightly larger mark leaves keeps this button at the 40 by 40 the
 * values above buy, and keeps the mark centred in it. The plate's own figure is untouched.
 */
.woo-vendor-menu__button {
	align-items: center;
	background-color: transparent;
	border: none;
	color: inherit;
	display: flex;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	gap: 0.5em;
	line-height: 1;
	padding: 0.3375em;
	white-space: nowrap;
}

.woo-vendor-menu__button:hover {
	cursor: pointer;
}

.woo-vendor-menu__button:focus-visible {
	border-radius: 2px;
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.woo-vendor-menu__quantity-badge {
	align-items: center;
	display: flex;
	position: relative;
}

.woo-vendor-menu__quantity-badge:empty {
	display: none;
}

/*
 * The account glyph, drawn on the same 32-unit grid as the rest of the cluster, so the buttons sit
 * on one line.
 *
 * The Mini Cart's own figures, so the two glyphs drew at one size and nothing in the row read heavier
 * than its neighbour: a 1.7em box with the same -0.1em margin that trick uses, taking back 0.1em on
 * each side so the icon sits in the button without inflating it. The Cart's own box has since come
 * down a touch - 1.7em to 1.65em - so this figure now stands a little the larger of the two.
 *
 * The ink is this rule's `color`: the figure is an open outline stroked in currentColor, so naming
 * the token here answers for it, and it is what the Inbox bell and the Add product mark wear, the
 * circles side by side carrying one mark colour in either mode. #e4e6ea on #2c3138 measures 10.5:1,
 * where the #666666 the markup falls back to managed 3.18:1 on the lighter circle that glyph was
 * drawn for. That fallback earns its place here, because the header sets currentColor to white,
 * which would leave the figure invisible on the light plate behind it.
 *
 * The drawing was asked a touch shorter with the plus, the bell and the Cart beside it: 1.7em to
 * 1.65em, 34px to 33px at the header's 20px. It kept the 1px it had always held over those three,
 * which came down in the same step to 1.6em, so the cluster read as this mark sitting a shade larger.
 *
 * The reader then asked this mark a slight decrease of its own, and it took that same 1.6em: the four
 * marks of the cluster stood at one figure for the first time, 32px at the header's 20px, 1px down from
 * the 33 this mark carried. The lead this drawing had held over them was the whole of what that ask gave
 * up, given up deliberately rather than by arithmetic, because 1.6em is the next figure the three beside
 * it are drawn at.
 *
 * The reader then asked it a very slight decrease again, so the figure came down the same way, by
 * the pixel: 1.6em to 1.55em, 32px to 31px at the header's 20px - and the drawing that had just come
 * level with the plus, the bell and the Cart now sits 1px under them. That is the one thing this figure
 * costs, and it is worth stating plainly, because the lead it gave up in the step before was the last of
 * its scale: from here the mark reads as the smallest of the four rather than as one of them. A figure
 * between the two, 1.58em at 31.6px, is the one-declaration form if that 1px under should be a
 * half-pixel; 1.6em is where it stood if the cluster should read level after all, and so is 1.55em
 * with the three beside it brought down to match.
 *
 * The -0.1em margin is left as it was. Unlike the Cart's, the notes in this file do
 * not tie it to a footprint the drawing has to preserve, so nothing says it should have moved with
 * the figure: it is left as found rather than moved on a guess, and named here so a later pass can
 * settle it against the plate this mark sits in.
 *
 * The reader has now asked this mark a second slight decrease, and the figure comes down the same pixel
 * again: 1.55em to 1.5em, 31px to 30px at the header's 20px. The ask named the mark alone and said the
 * plates were to stay as they were, so this one figure is the only thing about the button that moves:
 * the padding carries the pixel, in the three figures the button's note above records, and the button
 * measures the 39 by 39 it did before this round with the plate behind it the same 39 by 42.1875 - the
 * pixel is paid back inside the button rather than pushed out of it.
 *
 * What the drawing gives up instead is half a pixel of position. Its footprint - a 30px box less the
 * -0.1em margin, 26px where it read 27 - is met by 7px of padding over it where 6 met it before, and
 * the button's own middle is 19.5px down, so the mark's centre comes to 20: half a pixel low in its
 * button where it sat dead centre. That half is the whole of the cost, and it buys the plate's height,
 * which is the figure the ask was protecting. A symmetric 0.325em would hold the drawing centred and
 * let the plate follow the ascent down instead - half a pixel - and 1.55em is where this mark stood if
 * the ask proves to have wanted a smaller step; 1.5em with the three beside it brought down to match
 * is the other way to read level at this size.
 *
 * The reader has since asked this mark very slightly larger, and in this session's reading of that adverb the
 * very slight step is half of the one this mark's asks have moved in: 0.025em rather than 0.05em, so the box
 * comes up from 1.5em to 1.525em - 30px to 30.5px at the header's 20px. The button carries the half pixel the
 * way it has carried every other step here, by its padding: 0.35em becomes 0.3375em, 7px to 6.75px a side, so
 * over the 26.5px footprint the mark now leaves (its 30.5px box less the -0.1em margin) the button measures the
 * 40 by 40 it did before and the plate behind it is untouched. With that padding symmetric the mark stays dead
 * centred in it: its box begins 4.75px into the button and its middle is 20px down, the button's own middle.
 *
 * This leaves the mark still the smallest of the cluster, 30.5px against the 32 the three beside it draw. The
 * figure beside this one, if the whole pixel was wanted - the two rounds recorded above moved 1px apiece - is
 * 1.55em, 31px, which is where this mark stood two rounds ago; 1.575em is the step above that.
 */

/*
 * The mark is lifted half a pixel, on the ask, in this session's reading of "very slightly" for an
 * alignment nudge.
 *
 * What the lift corrects is the drawing rather than the box, and the two figures are worth keeping apart.
 * The box has been centred all along: at the header's 20px the svg is 1.525em, 30.5px, and the render puts
 * it at y=28 with the button's own 40 by 40 box beginning at y=23, so box and button share a middle. The
 * ink inside that box does not: the drawing's highest point is the head's crown at 6.34 units of the
 * 32-unit grid and its lowest is the shoulder path's foot at 26.67, so at 0.953125px a unit the ink runs
 * 6.04px to 25.42px and its middle stands at 15.73px where the box's is 15.25 - a shade under half a pixel
 * low, which is the figure this declaration spends.
 *
 * `transform` alone, so the step is paint only: the 30.5px box keeps its size and its place, the badge and
 * the 40 by 40 button are untouched, and the ground behind the mark is neither named nor moved here - which
 * is how the ask's second half is answered, the mark lifted and no background changed.
 *
 * The levers, if the lift reads as overshoot: -0.25px for half this step, or back to where the ink stood.
 */
.woo-vendor-menu__icon {
	color: var(--wp--preset--color--filter-dark-text, #e4e6ea);
	display: block;
	fill: none;
	height: 1.525em;
	margin: -0.1em;
	stroke: currentColor;
	transform: translateY(-0.5px);
	width: 1.525em;
}

/*
 * The glyph's weight, on the path the outline is drawn from.
 *
 * The markup states 2 units, which drew 2.06px in the 1.65em box and draws 1.906px at the 1.525em box
 * this mark now wears, a 30.5px box over a 32-unit grid being 0.953125px a unit. This sat at 2.35, the
 * step the reader's ask left it at, drawing about 2.24px at that scale - a shade under the 2.55 that
 * drew 2.63px while that box was 1.65em. That 2.55 was the cart's own frame to the hundredth - the basket's two-unit drawing plus
 * its two-fifths stroke - and the basket beside this mark keeps it, so the two no longer weigh alike: a
 * slight thinning was the ask, and this is it.
 *
 * The figure under this width is the panel's own profile mark, taken up onto this box's 32-unit grid,
 * so the two the reader compares - the button's mark and the row's - are one drawing at two scales; the
 * markup's docblock carries those figures. The step down also brings this mark nearer the panel's own
 * 1.85, which that drawing is cut at among the rows, though it still stands over it. It stays clear of
 * the bell's own 0.4 stroke: that figure suits a stroke running beside a filled ribbon, and in a figure
 * as small as this head it would read as a hairline instead.
 *
 * The width lives here rather than in the markup for the reason the other glyphs' does: a retuning
 * stays one rule and the drawing itself is never touched.
 *
 * The whole glyph now carries its ink on one channel, the stroke this width belongs to: the head is an
 * unfilled ring like the shoulders, both of them stroked in currentColor, so this one rule weighs the
 * figure and nothing in the markup needs a fill of its own. The markup's #666666 and fill="none" hold
 * those sides as the fallbacks on a page that never loads this sheet.
 *
 * The weight has since been asked up very slightly, and the very slight step on a stroke is half this
 * ladder's rung, the 0.2 the rounds above stepped in: 2.35 to 2.45, the same 0.1 the add-product mark's
 * last weight round took. On this grid - 0.953125px a unit - the glyph now draws about 2.34px where it
 * drew 2.24, so the weight sentence above is the round before this one, its 2.35 and its 2.24px being the
 * figures this ask moves. What the two marks' relation comes to is stated there too: the cart's own 2.55
 * would draw 2.43px on this box, so this mark now stands 0.09px under it where it stood 0.19, and the
 * panel's rows' 1.85 - 1.76px here - is still the figure it stands over. The width is the only figure
 * that moves: nothing is filled, both the head and the shoulders being stroked as they were, and the box,
 * the ink and the place are the ones the rounds above set.
 */
.woo-vendor-menu__icon path,
.woo-vendor-menu__icon circle {
	stroke-width: 2.45;
}

/*
 * No hover ink on this mark, and nothing follows this note: it records a rule that has been taken off.
 *
 * The four marks of the cluster were once asked to take one hover ink - a figure a step above the box,
 * then #404040, what the sidebar's two search marks wore at the time - and it was one declaration here, on
 * the colour channel, because this glyph's ink
 * is stroke: currentColor alone and a single colour moves the whole figure, ring and shoulders alike. It
 * has since been asked back off, so that the marks do not change under the pointer at all, and the figure
 * has moved to the plate beneath them; the plates have since come back to #353535, the box's own warm. The
 * plate is the better home for it, which the arithmetic agrees with: at #353535 the mark's own #e4e6ea
 * falls to about 1.2 to 1 as the pointer arrives, where on the plate it holds at about 9.8 to 1 and only
 * the control lights up.
 */

.woo-vendor-menu__label {
	white-space: nowrap;
}

/* === badge === */

/* Count badge: the cart badge's diameter, drawn as a circle. */
.woo-vendor-menu__badge {
	align-items: center;
	background-color: var(--woo-vendor-menu-badge-bg, var(--woo-vendor-menu-badge-bg-default));
	/*
	 * A circle, so one digit and two sit in the same round face. Only the "99+" cap
	 * widens it into a stadium, which is the one case where it is not a true circle.
	 */
	border-radius: 50%;
	box-sizing: border-box;
	color: var(--woo-vendor-menu-badge-color, var(--woo-vendor-menu-badge-fg));
	display: flex;
	font-size: 0.875em;
	font-weight: inherit;
	height: 1.4285714286em;
	justify-content: center;
	/*
	 * Half the badge's own width back from the right edge of the icon box — the
	 * landing spot the Inbox badge uses, so the count sits on the button's edge.
	 */
	left: 100%;
	margin-left: -50%;
	min-width: 1.4285714286em;
	padding: 0 0.1em;
	position: absolute;
	transform: translateY(-50%);
	white-space: nowrap;
	z-index: 1;
}

.woo-vendor-menu__badge:empty {
	opacity: 0;
}

/* === drawer === */

/*
 * The Mini Cart's slide-out drawer, down to the overlay tint and the .3s slide:
 * a base-coloured surface of white type pinned to the inline-end edge, square
 * cornered because it meets the viewport edge. The scrim and the panel are both
 * position: fixed, so no header ancestor can clip either of them.
 */
.woo-vendor-menu__scrim {
	background: var(--woo-vendor-menu-scrim);
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	transition: opacity 0.3s, visibility 0.3s;
	visibility: hidden;
	z-index: 9999;
}

.woo-vendor-menu__scrim.is-open {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
}

/*
 * Sits clear of the admin bar exactly as WooCommerce's drawer does, and leaves
 * towards the edge it is pinned to, so RTL mirrors for free.
 *
 * This rule carries both the plate the reader sees and the box it measures, which is why the reader's ask
 * about the menu's background is a width ask: `width` is read from `--woo-vendor-menu-panel-width` rather
 * than written here, so the figure lives in one place - theme.json's `panelWidth`. It held 480px from the
 * start and the reader has since asked it very slightly narrower, and 476px is that step: four pixels off
 * a plate half a screen wide, which reads as the same panel until the two are put side by side.
 *
 * The Inbox panel keeps the 30rem it has always held, so the two plates part by those four pixels on this
 * round - they were one figure before it. The fallback below is left standing at 30rem where it was, since
 * it speaks only if the token is ever unwritten, and the two figures agree whenever it does.
 */
.woo-vendor-menu__drawer {
	background: var(--woo-vendor-menu-panel-bg);
	box-sizing: border-box;
	color: var(--woo-vendor-menu-panel-fg);
	display: flex;
	flex-direction: column;
	font-size: var(--woo-vendor-menu-panel-size);
	height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
	inset-inline-end: 0;
	line-height: 1.5;
	margin-top: var(--wp-admin--admin-bar--height, 0);
	position: fixed;
	top: 0;
	transform: translateX(100%);
	transition: transform 0.3s, visibility 0.3s;
	visibility: hidden;
	width: min(var(--woo-vendor-menu-panel-width, 30rem), 100vw);
	z-index: 10000;
}

html[dir="rtl"] .woo-vendor-menu__drawer {
	transform: translateX(-100%);
}

.woo-vendor-menu__drawer.is-open {
	transform: none;
	visibility: visible;
}

/* The page behind an open overlay stops scrolling, as it does behind the cart's. */
html.woo-vendor-menu-drawer-open {
	overflow: hidden;
}

/* Title band and footer stay put; only the menu between them scrolls. */
.woo-vendor-menu__drawer > :not(.woo-vendor-menu__panel) {
	flex: none;
}

/*
 * The panel is the menu's scroll area, and it claims the vertical axis for itself.
 * The menu is a stack of full-width rows, so a horizontal drag has nothing to do
 * here: naming pan-y keeps a sideways swipe from being read as a gesture while a
 * vertical one scrolls the list. Pinch-zoom stays allowed, because taking that away
 * would leave the panel the one part of the page a reader cannot magnify.
 *
 * Momentum scrolling is named explicitly as well: a bounded scroll area inside a
 * fixed, transformed drawer is exactly where iOS otherwise drops it.
 */
.woo-vendor-menu__drawer .woo-vendor-menu__panel {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	touch-action: pan-y pinch-zoom;
	-webkit-overflow-scrolling: touch;
}

/* === head === */

/*
 * The Mini Cart's title band: same surface as the panel, white Uncut Sans at 19px.
 *
 * It read as one surface with the panel, and carried no rule under it, until the reader asked the four
 * drawers' head and foot bands for an edge of #252525 - the hex the Inbox panel's two bands are drawn
 * with, and the figure those panels now share. The line is stated on the band rather than on the panel,
 * so it runs the drawer's full width while the menu's rows keep their own 20px inset: this box is the
 * drawer's, edge to edge, because its padding is what the title stands in.
 *
 * The band grows by the single pixel the border adds, between the title's own 20px below it and the
 * menu's first row.
 *
 * The reader has since asked the panel's border colours away, the way they asked the Inbox panel's
 * before it. The colour goes and the pixel stays: transparent rather than none, so the depth this note
 * just described is unmoved and the step under the title is the one it was. What is left is a head with
 * no line beneath it, which is what the Inbox's head has drawn since its own round.
 */
.woo-vendor-menu__drawer-head {
	background: var(--woo-vendor-menu-panel-title-bg);
	border-bottom: 1px solid transparent;
	color: var(--woo-vendor-menu-panel-title-fg);
	padding: 20px;
	padding-inline-end: 64px;
	position: relative;
}

/*
 * The title row. A row of its own rather than turning the head into a flex container, so the head
 * stays the block the close button is positioned against and its tuned offset is untouched. The
 * title's box is unchanged either way: it is a flex item with its own line box, so the close still
 * lands on its centre.
 */
.woo-vendor-menu__drawer-heading {
	align-items: center;
	display: flex;
	gap: 10px;
}

.woo-vendor-menu__drawer-title {
	font-family: var(--woo-vendor-menu-heading-font);
	/*
	 * 19px. All four header drawers — Create, Inbox, Cart and Account — were drawn to read at one size,
	 * each plugin naming that size in its own rule so the four moved together; this panel's title alone
	 * has since been asked down to 19px, so it now reads a step under the other three, and the parity is
	 * broken here on purpose. Bringing the others down with it is the same figure in their three rules,
	 * which is the whole of what held them level.
	 */
	font-size: 1.1875rem;
	font-weight: 500;
	letter-spacing: -0.025rem;
	line-height: 1.1;
	margin: 0;
	overflow-wrap: break-word;
}

/*
 * The Mini Cart's cross, at the Mini Cart's own size: a 56px box holding the same 24px
 * glyph, 12px from the top and inline-end edge, at 60% opacity.
 */
/*
 * The box is placed so its centre lands on the title's. The head pads 20px and the
 * title's line is 20.9px tall at the 19px it now wears, so that centre sits 30.45px
 * below the head's top; this box is 56px tall, half of it 28px — 20 + 10.45 - 28 = 2.45.
 * That figure was 4.1 while the title was 22px and its line 24.2px. The head's padding
 * drops to 16px on phones, where the same sum gives -1.55px: the box's top edge then rides
 * that far above the head, which costs nothing, since the box is transparent and the 16px
 * of padding it carries is what holds its 24px glyph inside the band. The media query at
 * the foot names it too.
 */
.woo-vendor-menu__drawer-close {
	align-items: center;
	background: transparent;
	border: none;
	border-radius: var(--woo-vendor-menu-button-radius);
	color: inherit;
	cursor: pointer;
	display: flex;
	inset-inline-end: 12px;
	justify-content: center;
	opacity: 0.6;
	padding: 16px;
	position: absolute;
	top: 2.45px;
	z-index: 2;
}

.woo-vendor-menu__drawer-close:hover,
.woo-vendor-menu__drawer-close:focus-visible {
	opacity: 1;
}

/*
 * The X is a filled outline polygon, not a stroked path, so there is no stroke width of its own to
 * raise. Stroking it in its own colour grows the drawn shape by half the width on every side, which is
 * what thickens the two arms, and the geometry itself is untouched. The round join keeps the four
 * corners from throwing a spike.
 *
 * The figure below is therefore the whole of the weight *and* the whole of the round: the arms are
 * drawn 1.35 units wide, so 1.35 was the first figure at which every end closed as a semicircle instead
 * of a shaved corner, and the reader asked that weight on the four drawer heads together. At that figure
 * the arms read 2.7 units against the 2.1 the 0.75 gave them and the 1.85 the 0.5 before it - a step
 * heavier as well as rounder, which is what rounding a filled glyph costs, since half the stroke is
 * added to every side. The 0.5 is the toggle's own figure, chosen so the header's marks thickened as one
 * family, and the toggle, in a plugin that is not ours to edit, keeps it.
 *
 * The reader then asked the four closes a slight step lighter, so the figure was 1.2 for a round and the
 * arms read 2.55 units. It is a shade under the drawn width, which is where a stroked filled glyph gives
 * its round back: each end loses (1.35 - 1.2) / 2 = 0.075 units - 0.075px in the 24-unit frame this
 * 24px box renders the glyph at, so the ends no longer close as full semicircles - the notch was under a
 * fifth of a pixel and did not read, which is why the step was taken rather than the round being kept.
 * The 1.35 stands as the figure at which the round is complete; 0.75 is still the one number for the
 * weight this close wore before that round.
 *
 * The round after took the same step again, so the four closes are a step lighter once more and this one
 * steps with them: the figure below is 1.05, and the arms read 2.4 units - 0.15 down, which is the step
 * the round above took, and the smallest this family's notes have figures for. Each end now loses
 * (1.35 - 1.05) / 2 = 0.15 units - 0.15px in the 24-unit frame this 24px box renders the glyph at - which
 * is still under the fifth of a pixel that round named as the point the notch would begin to read at, so
 * the ends give back a little more of their semicircle and the eye still does not find it. The rung after
 * this one, 1.0, leaves 0.175px and stays under that figure as well; 0.9 passes it at 0.225px and the
 * round would begin to show, so 1.0 is where this ladder ends rather than the next step's figure. The
 * 1.35, the 1.2 and the 0.75 keep their places in the list above; the toggle, still in the plugin that is
 * not ours to edit, keeps its 0.5.
 */
.woo-vendor-menu__drawer-close svg {
	display: block;
	height: 24px;
	stroke: currentColor;
	stroke-linejoin: round;
	stroke-width: 1.05;
	width: 24px;
}

/* === panel === */

/*
 * The panel's gutter matches the head's 20px, so the list's text — and the
 * hairline under each row — sits directly beneath the title rather than 4px
 * to its left.
 */
.woo-vendor-menu__panel {
	flex: 1;
	overflow-y: auto;
	/*
	 * The two ends of the list carry no space of their own: the ask took away what sat above the first
	 * row and below the last, so the block's 16px of bottom padding is gone and the rows' own padding
	 * is the only air left at either end. The side figures stand, since they are the gutter named above.
	 */
	padding: 0 20px;
	/*
	 * The bar is drawn inline rather than floating over the rows, and this is the inbox panel's own
	 * arrangement matched on the ask: `stable` reserves the strip whether or not the list is long enough to
	 * need one, so a short list and a long one keep the same text column and the rows never shift sideways
	 * as the bar appears. The head above the panel keeps its own 20px gutter while the rows' text column
	 * sits the rail's width to its left, which is the relationship the inbox panel's head and list have.
	 */
	scrollbar-gutter: stable;
}

/*
 * The panel's own bar, drawn from these four rules - the inbox panel's bar, matched on the ask, which is
 * why every figure below is that sheet's. `width` is what the strip is worth: 8px, the same rail the
 * inbox panel and the add-product panel's fields scroll against, and the gutter above reserves exactly
 * this much. Track and thumb both read the site's presets - surface-raised behind, control for the thumb -
 * and the pointer's step is #303030, the figure the reader has asked this site's controls onto, written out
 * rather than read from control-hover, which still holds #353535. It is squared off at the corners, like
 * every bar on the site.
 *
 * None of it was drawn before this ask: the panel scrolled with the engine's own bar, and nothing in
 * this sheet named a scrollbar at all. The standard `scrollbar-width`/`scrollbar-color` pair is
 * deliberately left unset, as the inbox sheet leaves it, because setting either makes the engine ignore
 * these rules and draw its own wider bar instead.
 */
.woo-vendor-menu__panel::-webkit-scrollbar {
	width: 8px;
}

/* The track takes surface-raised, #202020 - the figure the inbox panel's rail runs in. On that panel it
   reads as a recess; on this drawer, whose surface is the base preset's near-black, it stands above the
   ground instead. Only the thumb answers the pointer above, and it is square like the rest. */
.woo-vendor-menu__panel::-webkit-scrollbar-track {
	background: var(--wp--preset--color--surface-raised, #202020);
}

.woo-vendor-menu__panel::-webkit-scrollbar-thumb {
	background-color: var(--wp--preset--color--control, #292929);
	border-radius: 0;
}

.woo-vendor-menu__panel::-webkit-scrollbar-thumb:hover {
	background-color: #303030;
}

.woo-vendor-menu__empty {
	color: var(--woo-vendor-menu-panel-muted);
	font-size: 1rem;
	margin: 32px 8px;
	text-align: center;
}

/* === rows === */

/*
 * One flat list, with no section labels above it. The spacing the labels' own padding used to give the
 * first row is gone as well: the ask was to take the space above it away, so the first row now sits at
 * the panel's top edge. The rows keep their 8px of overhang to sit their focus surface in.
 */
.woo-vendor-menu__group {
	padding-top: 0;
}

.woo-vendor-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * The hairline runs the panel's full width, as the Inbox's rows do - and, like the Inbox's rows, it is
 * drawn in transparent. The reader asked the panel's border colours away, and the rows carry one between
 * every pair of them, so they are the bulk of what was being looked at. The pixel is kept for the same
 * reason the bands keep theirs: the box is what each row steps by, and only the ink has gone. The Inbox
 * arrived here the other way round - its rows were already uncoloured when its own bands were asked
 * clear - so the two panels now draw no border colour anywhere, which is the state this line was written
 * to match.
 */
.woo-vendor-menu__row {
	border-bottom: 1px solid transparent;
}

.woo-vendor-menu__row:last-child {
	border-bottom: none;
}

.woo-vendor-menu__item {
	align-items: center;
	border-radius: 0;
	color: inherit;
	display: flex;
	gap: 12px;
	/*
	 * Pulled out by the panel's own 20px, so the hover fill opens and closes on the panel's two side
	 * edges. The side padding gives that same 20px back, so the plate, the gap and the label all sit
	 * exactly where they sat before; the figure is the panel's own padding, and the pair moves with it. The
	 * vertical padding is the row's own figure and has come down a step, 14px to 12px, on the ask that the
	 * menu run tighter; only the sides are tied to the panel.
	 */
	margin: 0 -20px;
	padding: 12px 20px;
	text-decoration: none;
	transition: background-color 0.1s ease;
}

/*
 * The row's hover: the cart's own effect, since the ask was for the two panels to agree. The mini-cart's
 * product rows fill with #252525 when the pointer is over them, and they do it in a 100ms background
 * transition - the time the Inbox's rows lift in as well - so both the fill and the timing are read off
 * that sheet rather than chosen here. #252525 is a shade lighter than the #303030 the row's own controls
 * wear, which is what keeps a hovered row reading as a ground its controls sit on rather than as one
 * surface with them.
 *
 * The fill runs the panel's whole width for the same reason it runs the cart row's: the item is pulled
 * out by the panel's own 20px on each side, so the band opens and closes on the panel's two side edges.
 * The hairline under the row is not carried with it - that line belongs to the row, which still spans the
 * panel's padding box and stops 20px in from either edge.
 *
 * Its corner is square, which is the last of the cart's terms to land: the band copies that row's fill,
 * its timing and its corner with no exception left. The item carries no radius of its own any more -
 * square is its shape at rest as well as under the pointer - so the hover rule states only the fill, and
 * the focus ring, which is drawn to the item's own corner, is square with it. The panel's button radius
 * is still the token it always was, and the close and the theme's buttons still wear it; this item is
 * simply no longer one of them.
 *
 * The transition is declared on the item itself rather than inside the hover rule, so the fill eases
 * both ways. The cart names its own inside the hover and so snaps back the moment the pointer leaves;
 * that is the one difference between the two, it is deliberate, and it is one line to match if the snap
 * is what is wanted.
 *
 * The reader has since asked the panel's rows and its switch onto the title's own gutter, so that the
 * marks open on the line the heading starts from. The rows already do, and that is a property of the two
 * figures above rather than of this rule: the panel pads 0 20px at its sides, and this item gives that
 * 20px back in its own padding after pulling itself out by the same amount, so the plate - the item's
 * first child - stands 20px from the drawer's edge, which is where the head's own 20px puts the title. On
 * phones the pair follows the head down together, the panel to 16px and the head to 16px, so the plates
 * and the title stay in line at that width as well. The figure to move, if the plates should ever sit off
 * that line, is the panel's side padding: this item's -20/+20 is the pair that keeps the change invisible.
 */
.woo-vendor-menu__item:hover {
	background-color: #252525;
}

/*
 * The row's mark: the product filter's plate, drawn in that block's own icon idiom.
 *
 * The ask was that these read as the filter's icons, so nothing below is a new idea, only a new
 * audience: a mark whose drawing is flex-centred on a 24-unit box, stroked at 2 through round caps and
 * joins, in the filter's ink - a step under the 2.5 that block strokes its own drawings at, since the
 * weight here has been asked down twice, so the idiom is the filter's and the weight is two notches
 * lighter than it. The drawing came in at that block's 18px, was asked
 * up twice to 22px with the stroke down half a step to 2.25, was brought back to the block's own figures,
 * and then followed the filter a step tighter to 19px in a 28px plate. The ask now is that the mark span
 * the row's two lines of text - flush with the top of the label above and the bottom of the description
 * below - and that is a taller box than the filter's, so this is the one figure here that leaves that
 * block: the plate is set to the height the text block itself occupies, 35.5px, and the drawing keeps the
 * plate's own ratio at 24px, which is the ratio the filter's 19px in 28px establishes. So the air around
 * the drawing is 5.75px where the filter's is 4.5, and on a 24-unit box at 24px the drawing is drawn at
 * its own scale exactly once - so the stroke draws its own figure as written, 2px. This is the figure to
 * move for the drawings, and the plate's own 35.5px the one to move for the mark.
 *
 * The plate is a rounded ring where the filter's is a cornered square, which is the second respect this
 * mark leaves that block besides its height: the ask was for a rounded, outlined style, so the corner
 * became a circle and the fill became a ring. The circle is the same 35.5px box at radius 50%, 17.75px
 * where the filter draws 6 and this plate wore 7.5. The ring is a 1px border plus an inset 0.5px spread,
 * which is what a step of weight on an outline has to be here: this engine floors a border width to whole
 * pixels, so 1.25px and 1.5px both compute to the 1px the border already was - measured, not assumed -
 * while the shadow's spread is painted and keeps its fraction. The ring therefore reads 1.5px of ink and
 * the box does not move: box-sizing counts the border inside the 35.5px, the spread draws inward, nothing
 * outside the plate shifts, and the row's focus ring still stands outside it as the affordance. The
 * drawing is flex-centred in what the border leaves, which shifts it a quarter of a pixel and no more.
 *
 * The plate carries the colour and the drawing carries none - the sprite's symbols are bare geometry,
 * and the stroke, its weight and its caps are all named here, so a retuning stays one rule and no
 * drawing is ever touched, which is also how the filter's own sheet divides the two.
 *
 * The tint is that block's own, twice over: the panel wears the filter's seven section colours, and the
 * seven it has besides are those same seven a single step darker in the same hue, so every colour on this
 * panel traces back to one the filter already uses and no two rows repeat. Where the colour is the
 * filter's own, its token is named with its hex as the fallback, since that block defines them at the
 * root and only on pages that carry the block; the siblings are named by hex alone, each with the
 * section it is a tone of noted beside it. The pairs are drawn so that neighbours differ - a row and its
 * sibling are never adjacent, and the muted sign-out takes the darker of the two greys. The colour is
 * keyed on the row's own id, which every item carries and which the row writes into data-icon. Each rule
 * now declares that colour as --woo-vendor-menu-item-tint rather than as a background, and the plate
 * spends the one declaration twice: on the ring, and through currentColor on the drawing itself.
 *
 * The ink is the row's own tint, on both channels - which is what makes the pair read as an outline and
 * not as a chip with a light mark in it, and is the third respect this mark leaves the trigger's idiom.
 * Every tint was picked as a ground for a light drawing, so its weight as ink is worth stating: against
 * the panel the filter's seven run 3.00:1 to 5.56:1, categories at the foot and the include grey at the
 * head, and the seven siblings run 2.14:1 to 3.70:1, coupons at the foot and the sign-out grey at the
 * head. The drawings are decorative, hidden from assistive tech, and every row states its label in words
 * beside them, so the dimmer seven are legible where they need to be; a step of light on those seven is
 * the lever if they are to read brighter than that.
 *
 * The mark hangs on the label's first line rather than on the row's centre, since the ask was that its
 * top sit flush with the label's. Its top is therefore set level with the letters rather than with the
 * line's box: the label is 16px type in a 21.6px line, and its letters begin about 4.5px below that
 * line box's top - the half-leading above the em box, then the gap from the em box down to the cap and
 * ascender line - so margin-top carries the plate exactly there. align-self is set on the plate alone,
 * so the row's own centring still holds the count badge and the chevron. Until this the plate was
 * centred against the two-line block and its top sat 7.95px down, some 3.45px under the letters. The
 * filter centres its own plates against its rows; this one hangs on the letters instead, which is the
 * single respect in which the two deliberately differ, and it was asked for in so many words.
 *
 * The row still does not grow. The text block beside the plate is 43.89px of label over meta at this
 * size, and the mark now occupies 4.5 + 35.5 = 40px of that, so the height the row had is the height it
 * keeps; and the 12px from the plate to the label is the row's own gap, unchanged. The 3.89px left under
 * the plate is the meta line's own half-leading rather than a decision: the plate ends on the letters, and
 * the line box goes on a little past them.
 */
.woo-vendor-menu__item-icon {
	align-items: center;
	align-self: flex-start;
	/*
	 * The flat #202020, on the ask that these plates carry that ground. It is the figure the filter's plates
	 * and the four badges rest at, and the one the inbox panel's rail is cut into. Coming from no ground at
	 * all - the plate was transparent and only its ring and its mark drew - the plate now stands a step off
	 * the surface it sits on: the drawer's own ground is the base preset's near-black, #0b0a0f, so the step
	 * measures about 1.2 to 1 and reads as a faint lift. The ring and the tinted mark carry the plate
	 * exactly as before: the tint stays on the ring and the glyph, not on the ground.
	 */
	background: #202020;
	border: 1px solid var(--woo-vendor-menu-item-tint, transparent);
	border-radius: 50%;
	box-shadow: inset 0 0 0 0.5px currentColor;
	box-sizing: border-box;
	color: var(--woo-vendor-menu-item-tint, var(--wp--preset--color--filter-dark-text, #e4e6ea));
	display: flex;
	flex: 0 0 auto;
	height: 35.5px;
	justify-content: center;
	margin-top: 4.5px;
	min-height: 35.5px;
	min-width: 35.5px;
	width: 35.5px;
}

/*
 * The mark inside the plate. The fourteen drawings are symbols on a 24-unit grid, and this rule draws
 * them in a 24px box, so one unit of the drawing is one pixel of the page: the stroke below is the
 * mark's whole weight, not a share of a shape's.
 *
 * The newest ask is that these marks take the style of this block's own header mark, and the stroke is
 * the one axis on which the two differed. The head is drawn on a 32-unit grid in the 1.65em box it
 * wears - 33px at the header's 20px - so one of its units is 1.03125px and its 2.55-unit stroke draws
 * 2.63px. These fourteen stood at 1.75, two thirds of that, so the drawer's rows read as a finer line
 * than the mark that opens the drawer. 2.6 closes the gap to a tenth of a pixel, which is under what
 * any page shows.
 *
 * Everything else the two already held in common, which is why nothing else here moves. Both are
 * unfilled outlines: fill: none above, and the same in the head's own markup, where SVG's default fill
 * of black would otherwise have to be overridden. Both carry one ink on one channel, the stroke
 * answering currentColor. Both round their caps and joins - declared here, and stated as attributes on
 * the head, which cannot hold a var() and so never wears this sheet's ink. The size stays as it was:
 * these draw in a 24px box and the head in 33px, and the box is not what the ask names. The ink stays
 * as it was too, and deliberately: the head wears the cluster's #e4e6ea while these fourteen wear the
 * tints the reader asked for one row at a time, so matching the style leaves each mark its colour.
 *
 * The weight has moved twice. These fourteen were asked up to 2.6 with the aim of matching the trigger they
 * sit under in the same panel, and have now come down a step - the 0.25 this site spends on a stroke - to
 * 2.35, on the reader's word that they read too heavy there. The figures as drawn, in pixels: these fourteen
 * sit on a 24-unit grid inside a 24px box, so one unit is one pixel and they draw at 2.35px; the trigger
 * draws 2.63px; and the filter panel's own section marks are authored at 2.5 units but scaled into a 17px
 * box, which draws them at about 1.77px. So the drawer's marks are the middle weight of the three rather
 * than the heaviest: still under the trigger they were matched to, and still over the panel's finer line.
 * The figure to restore either end is named here - 2.6 for the match, 1.75 for the block's original set.
 *
 * The weight has come down a step again, to 2.1: the 0.25 this site spends on a stroke, off the 2.35, on a
 * plain ask that the marks read slightly lighter. Nothing but this declaration moved, which is what the
 * ask's second half turns on - the fourteen drawings keep their paths, their 24px box, their round caps and
 * joins, their unfilled fill and their own per-row tints, so each mark's outline is the same outline drawn
 * with a lighter pen rather than a different shape. As drawn: these fourteen are one unit to the pixel, so
 * 2.1 is 2.1px; the trigger above them keeps its 2.63px; and the filter panel's section marks keep their
 * finer 1.77px. The marks now sit nearer the panel's line than the trigger's, still between the two.
 * Restoration, all three named: 2.35 for the figure this ask left, 2.6 for the trigger's match, 1.75 for
 * the block's original set.
 *
 * The weight has come down the same step a third time, to 1.85 - the 0.25 this site spends on a stroke,
 * off the 2.1 - on the same plain ask, that the marks read a little lighter again. As before, nothing but
 * this declaration moved: the fourteen drawings keep their paths, their 24px box, their round caps and
 * joins, their unfilled fill and their own per-row tints, so each mark keeps its outline and changes only
 * the pen it is drawn with. As drawn: these fourteen are one unit to the pixel, so 1.85 is 1.85px; the
 * trigger above them keeps its 2.63px; and the filter panel's section marks keep their 1.77px. That leaves
 * the drawer's line under a tenth of a pixel over the panel's own, so the two families now read together
 * rather than apart, while the trigger stays the heaviest of the three, as the mark that opens the drawer.
 * Restoration, all four named: 2.1 for the figure this ask left, 2.35 for the one before it, 2.6 for the
 * trigger's match, 1.75 for the block's original set.
 */
.woo-vendor-menu__item-icon svg {
	display: block;
	fill: none;
	height: 24px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.85;
	width: 24px;
}

/*
 * The symbols themselves: a dictionary at the head of the panel, never a box on the page. Sized to
 * nothing rather than set to `display: none`, which is the shape every icon system hides a sprite in:
 * a hidden-by-display container is a thing browsers have differed on, and a zero-sized one cannot
 * differ.
 */
.woo-vendor-menu__sprite {
	height: 0;
	overflow: hidden;
	position: absolute;
	width: 0;
}

/*
 * Fourteen tints, and every one of them the filter's: its seven sections' colours, each with a sibling a
 * single step darker in the same hue, so the palette is that block's and the rows still differ. Where
 * the colour is the filter's own the token is named first with its hex as the fallback, because that
 * block defines them at the root and only on pages that carry the block: this drawer opens on pages with
 * no filter on them at all, and its plates still have to be tinted there. The seven siblings are named
 * by hex alone, each with the section it is a tone of beside it.
 */
.woo-vendor-menu__item-icon[data-icon="dashboard"] {
	--woo-vendor-menu-item-tint: var(--woo-filter-dark-icon-locate, #53708f);
}

.woo-vendor-menu__item-icon[data-icon="profile"] {
	--woo-vendor-menu-item-tint: var(--woo-filter-dark-icon-type, #6e5e7b);
}

.woo-vendor-menu__item-icon[data-icon="settings"] {
	--woo-vendor-menu-item-tint: var(--woo-filter-dark-icon-sort, #517c73);
}

.woo-vendor-menu__item-icon[data-icon="payments"] {
	--woo-vendor-menu-item-tint: var(--woo-filter-dark-icon-quality, #8e705f);
}

/* type, a step darker */
.woo-vendor-menu__item-icon[data-icon="products"] {
	--woo-vendor-menu-item-tint: #55495f;
}

.woo-vendor-menu__item-icon[data-icon="users"] {
	--woo-vendor-menu-item-tint: var(--woo-filter-dark-icon-categories, #7c515e);
}

.woo-vendor-menu__item-icon[data-icon="reviews"] {
	--woo-vendor-menu-item-tint: var(--woo-filter-dark-icon-classType, #966374);
}

/* sort, a step darker */
.woo-vendor-menu__item-icon[data-icon="analytics"] {
	--woo-vendor-menu-item-tint: #3e6059;
}

/* categories, a step darker */
.woo-vendor-menu__item-icon[data-icon="coupons"] {
	--woo-vendor-menu-item-tint: #603e48;
}

.woo-vendor-menu__item-icon[data-icon="downloads"] {
	--woo-vendor-menu-item-tint: var(--woo-filter-dark-icon-include, #888888);
}

/* locate, a step darker */
.woo-vendor-menu__item-icon[data-icon="addresses"] {
	--woo-vendor-menu-item-tint: #40566e;
}

/* quality, a step darker */
.woo-vendor-menu__item-icon[data-icon="payment-methods"] {
	--woo-vendor-menu-item-tint: #71594c;
}

/* classType, a step darker */
.woo-vendor-menu__item-icon[data-icon="account-details"] {
	--woo-vendor-menu-item-tint: #754d5a;
}

/* include, a step darker - the quiet row keeps the darker of the two greys */
.woo-vendor-menu__item-icon[data-icon="sign-out"] {
	--woo-vendor-menu-item-tint: #6b6b6b;
}

/*
 * The rows now carry the cart's own hover fill (see the note on the item), so the tint here belongs to
 * the focus ring alone: it is the affordance rather than an ornament, and it stays put.
 */
.woo-vendor-menu__item:focus-visible {
	background: var(--woo-vendor-menu-panel-tint);
	outline: 2px solid var(--woo-vendor-menu-accent);
	outline-offset: -2px;
}

.woo-vendor-menu__item-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.woo-vendor-menu__item-label {
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.35;
}

.woo-vendor-menu__item-meta {
	color: var(--woo-vendor-menu-panel-muted);
	font-size: 0.875rem;
	line-height: 1.45;
}

/* Sign-out reads one weight quieter than the navigation around it. */
.woo-vendor-menu__row.is-muted .woo-vendor-menu__item-label {
	font-weight: 500;
}

/*
 * Every countable row carries its figure. A live number takes the accent fill;
 * a zero stays quiet, so an empty catalogue does not read as a wall of alerts.
 * Like the button's badge it is round: 22px across holds one or two digits, and a
 * longer figure widens it into a stadium rather than squeezing the digits.
 */
.woo-vendor-menu__count {
	align-items: center;
	background: var(--woo-vendor-menu-accent);
	border-radius: 50%;
	box-sizing: border-box;
	color: var(--woo-vendor-menu-accent-fg);
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	height: 22px;
	justify-content: center;
	min-width: 22px;
	padding: 0 3px;
}

.woo-vendor-menu__row.is-quiet .woo-vendor-menu__count {
	background: var(--woo-vendor-menu-panel-border);
	color: var(--woo-vendor-menu-panel-faint);
}

/* The block's "show a count on every countable row" setting, switched off. */
.woo-vendor-menu.is-counts-off .woo-vendor-menu__count {
	display: none;
}

/*
 * The chevron is the sort selector's mark, read off that control rather than drawn here: the filter
 * panel's sort trigger carries an 18px box, a three-unit stroke in a 24-unit viewBox, and the caret
 * `6 9 12 15 18 9`. This row points along rather than down, so the same polyline is used rotated a
 * quarter turn - 6 9 12 15 18 9 becomes 9 18 15 12 9 6 - which keeps the drawing, its span and its
 * weight identical to the sort's and leaves only the direction to differ. At 18px the visible mark is
 * 4.5px wide and 9px tall, where the 16px box it wore drew 4.33 by 8.33, and the stroke goes from 2 to
 * 3 units: at this box that is 2.25px of ink, which is what the sort selector's own three units render
 * to as well.
 *
 * The ink is the panel's own text token rather than the faint line colour the mark carried. That token
 * resolves to the theme's primary preset, #e4e6ea, which is the figure the sort chevron renders in
 * (rgb(228, 230, 234)) - so the two marks are the same colour by value, not merely by eye.
 *
 * Because the mark now carries the panel's text ink at rest, the pair of rules that used to brighten it
 * on hover and focus would set exactly what is already there, and they are gone. The row's hover
 * feedback is the #252525 fill the rows took, and the focus ring is unchanged.
 *
 * The reader has since asked this mark onto the head's close, on both axes at once - its colour and its
 * hover effect - and the two turned out to be one figure apart. The close inherits the head's ink,
 * `--woo-vendor-menu-panel-title-fg`, a chain ending in the same preset this chevron reads
 * `--woo-vendor-menu-panel-fg` from: both resolve to the theme's primary, #e4e6ea, so the two marks were
 * already the same colour by value, and the difference the eye reads is the close's `opacity: 0.6` at
 * rest, lifted to 1 while it is hovered or focus-visible. The chevron takes that pair here, and the rule
 * below is the lift: 0.6 of this ink over the panel's own ground is the grey the close draws in.
 *
 * The lift answers the row rather than the 18px mark, because the row is the button the mark sits in -
 * hovering or focusing the row is what a pointer or a keyboard does to reach this chevron's target, and
 * the close's own two states are its same two. Nothing else here moves: the ink, the 18px box, the
 * drawing and the three-unit stroke are all as they were, so the mark is the sort selector's caret in the
 * close's hand rather than a mark of its own. To restore it flat, take the 0.6 out and with it the rule
 * below: the chevron then holds the close's full ink at rest, which is where it stood before this ask.
 */
.woo-vendor-menu__chevron {
	color: var(--woo-vendor-menu-panel-fg);
	display: block;
	flex: 0 0 auto;
	height: 18px;
	opacity: 0.6;
	width: 18px;
}

/*
 * The close's own two states, read onto the chevron through the row that holds it.
 */
.woo-vendor-menu__item:hover .woo-vendor-menu__chevron,
.woo-vendor-menu__item:focus-visible .woo-vendor-menu__chevron {
	opacity: 1;
}

/* Visibility directives own the hidden attribute; keep it authoritative. */
.woo-vendor-menu [hidden] {
	display: none;
}

/* === theme switch band === */

/*
 * The tray's own edge, above whichever band opens it: the toggle's band when the palette switch is
 * active, and the foot when it is not. The reader's ask, and the counterpart of the line under the
 * head - 1px of #252525 across the drawer's full width, written as the hex it was asked in.
 *
 * Stated on the panel's next sibling rather than on the foot, because the foot is not always what
 * follows the menu: the toggle's band is rendered between the two whenever the palette switch is
 * active, and the drawer then reads as one tray with this line above both bands. Written this way the
 * absent band falls out of the picture on its own and the band below it carries the edge, so no rule
 * here has to be kept in step with the guard in the plugin's render.
 *
 * The lever, if this line should instead sit between the toggle and the action buttons: name
 * .woo-vendor-menu__drawer-foot here alone and take the toggle's band back off.
 *
 * This line's colour has been asked away since, on the same words as the Inbox panel's own edges: the
 * border is transparent now and still a pixel, so the band above the footer keeps the depth it had and
 * the two selectors above still name one line.
 */
.woo-vendor-menu__panel + .woo-vendor-menu__drawer-theme,
.woo-vendor-menu__panel + .woo-vendor-menu__drawer-foot {
	border-top: 1px solid transparent;
}

/*
 * The light/dark toggle's band, below the menu and above the footer.
 *
 * It is a sibling of the panel, so the drawer's own rule already holds it in place while the menu
 * scrolls; all it once needed was the footer's padding, so the two bands lined up while both were a
 * flat 16px. The foot then took the sidebar footer's own air - 20px above and below, 16px at the sides -
 * and this band kept the drawer's 16px on all four, which left the two bands 4px out of step vertically
 * and level in the width.
 *
 * The reader has since asked the switch onto the title's own gutter, so this band's sides are the head's
 * figure rather than its own: 20px here, 16px on phones, the same pair the head and the panel move
 * between. Its one child lands on the line the heading starts from - the title stands at the head's
 * 20px, and the switch now stands at 20px too. The foot keeps its 16px sides, which is why the two bands
 * are 4px apart in the width rather than level: the ask named the switch, not the action buttons. The
 * foot is one declaration from joining them - `padding: 20px 20px` here and 12px 16px on phones.
 *
 * The reader has since asked this band's top and bottom padding onto the sidebar footer's, which is the
 * figure the foot below already carries: 20px above and below rather than the drawer's 16, so the two
 * bands that close the panel stand in one shape, and that shape is the filter panel's own. The sides are
 * not part of the ask and stay at the 20px above / 16px on phones this band took for the switch. The
 * phone figures already agree - both bands pad 12px above and below there - so nothing moves in that
 * breakpoint: the vertical pair now reads 20/20 on a desktop and 12/12 on a phone.
 */
.woo-vendor-menu__drawer-theme {
	align-items: center;
	display: flex;
	padding: 20px;
}

/*
 * The switch itself: the light/dark plugin's button, retuned from here rather than in that plugin, which
 * is not ours to edit. Every rule below is written one class wider than the plugin's own, so the outcome
 * does not depend on which sheet loads last.
 *
 * The plugin draws its knob at 30px with 7px of track above and below it but only 3px at the two ends,
 * which is the unevenness - the rim sits closer to the ends than to the top - and its glyphs are 20px on
 * 8px of padding, inside a 64 by 44 track whose knob travels 28px.
 *
 * So the track is retuned to 68 by 32, a step down from the 76 by 38 it wore, on the ask that the switch
 * take up less room. The knob comes down a step with it, to 22px, which leaves 5px of track on the top and
 * the bottom - 5 + 22 + 5 = 32 - and the horizontal inset was set to that same 5px, so the rim read the
 * same distance from every edge. The glyphs come down a step with the knob, to 16px, keeping the proportion
 * the pair had.
 *
 * The rest followed from those three figures. The knob's centre was its inset plus half its height, 5 + 11 =
 * 16px from either end, so the glyphs were padded to centre on it: 16 - 8 = 8px. And the width and the
 * padding together fixed the travel, which is why the plugin's 28px could not stand: 68 - 2 x 16 = 36px.
 * The padding ask that followed - 16px at the ends, matching the sidebar footer's Apply and Clear - has
 * been taken back off, on the ask that the toggle's previous state be restored. What it cost is what comes
 * back, and the geometry falls out of it the way it did the first time. With the button padded 8px at the
 * ends, each mark's centre is 16px from the end it sits at, and this switch centres the knob on the mark
 * rather than the mark on the knob: the live icon rides the knob in its ground colour, so a glyph left
 * hanging over the rim would read against two grounds at once. The knob's inset is therefore its centre
 * less half its height, 16 - 11 = 5px - the same 5px of track it keeps above and below, so the rim reads
 * the same distance from every edge again - and its travel is the track less two of those centres,
 * 68 - 2 x 16 = 36px, up from the 20px the 16px padding had left it.
 *
 * The reader has since asked the block itself a slight step up, so the box is 72 by 34 and the chain is
 * worked again with the knob and the glyphs where those rounds left them. The box grew at the ends rather
 * than under the marks, so the padding takes the step with it, to 9px, and each mark's centre follows to
 * 17 - 9 + 8 = 17. The knob's inset is that centre less half its height again, 17 - 11 = 6px, which is
 * also the track it keeps above and below: 6 + 22 + 6 = 34. The travel is the track less two of those
 * centres, 72 - 2 x 17 = 38px, up from the 36 it wore. The knob and the glyphs are untouched - 22px and
 * 16px - so what grew is the room around them rather than the marks in it, which is what the ask named.
 * Taking the marks up a step with the box is the knob's two figures, the glyphs' two, and the inset and
 * the travel that would answer them; the four are named here so the pair can be moved together if it is
 * ever wanted.
 *
 * Both figures, if the 16px ends are ever wanted again: grow the box rather than shrink the padding back.
 * At 84px wide the travel is 36px while the padding stays 16px, and at 48px tall the rim reads 13px all
 * round. The size stands at 72 by 34 now; the arithmetic above is the knob's and the padding's rather than
 * the box's, so both hypotheses hold at either size, and 68 by 32 is the figure the earlier rounds were
 * worked at.
 *
 * The light state is restated below for the geometry's sake: the rule above moves the knob to the dark end,
 * and the plugin's own light rule is written no wider than the base it has to undo, so it cannot reach a
 * transform stated here.
 *
 * The outline this once wore has been taken back off, on the ask that the previous edit to it be removed:
 * the plugin draws none of its own and ours now adds none either, so the switch reads on its track alone.
 * That ring idiom stays with the families it was drawn for - the vendor rows, the filter's section icons
 * and the four badges, where a 1px border and a 0.5px inset spread together read 1.5px of ink. The one
 * declaration the border had shifted is the knob's inset, and the rounds since have moved it: the 5px this
 * restore gave it, and the 6px the newest step up leaves it at. The padding the glyphs sit on began as the
 * plugin's own 8px and this sheet states it now, at 9px, taken with the box.
 *
 * The reader has since asked the disc behind the active glyph to take the colour of the other one: the light
 * icon active on the light ground, that ground wearing what the dark icon wears when it is the one standing
 * still, and the dark icon active wearing the same in its turn. Read against this block that is one figure
 * twice over, because both inactive glyphs are drawn the same way: the inherited ink at 45%. So the disc
 * takes that same 45% of currentColor, and the two positions then differ by their glyphs alone - the live one
 * left in the ground colour it is knocked out of the disc with, the other washed on the track as before. The
 * plugin's own disc is its primary, that brightness being what both marks were read against; the figure is
 * stated here rather than in the plugin's sheet, which is not ours to edit, and this rule is where the
 * block's one instance is restated. Nothing else about the knob moves: its 22px, its 6px inset and its 38px
 * travel are as they were, only its paint answers the ask.
 *
 * The pair of figures the switch now works between is the disc at 45 percent and the track at 8, so the disc
 * still reads as the moving thing on the track rather than as a light of its own: against the drawer's ground
 * it lands near #757678 where the primary put it at #e4e6ea, and the ground-coloured glyph knocked out of it
 * keeps about 3.8 to 1, clear of the 3 to 1 a graphic is held to. On the plugin's own selector instead the same declaration would reach every placement
 * of the block, if it is ever put anywhere but this drawer.
 */
.woo-vendor-menu__drawer-theme .light-dark-toggle {
	height: 34px;
	padding: 0 9px;
	width: 72px;
}

.woo-vendor-menu__drawer-theme .light-dark-toggle svg {
	height: 16px;
	width: 16px;
}

.woo-vendor-menu__drawer-theme .light-dark-toggle::before {
	background: color-mix(in srgb, currentColor 45%, transparent);
	height: 22px;
	inset-block-start: 6px;
	inset-inline-start: 6px;
	transform: translateX(38px);
	width: 22px;
}

html[data-theme="light"] .woo-vendor-menu__drawer-theme .light-dark-toggle::before {
	transform: translateX(0);
}

/* === footer === */

/*
 * The drawer's foot takes the sidebar footer's own air: the filter panel's Apply/Clear band pads
 * itself 20px above and below its buttons and 16px at the sides, so the drawer's action sits in the
 * same band shape rather than the flat 16px it wore. The sides were already that 16px, so the figure
 * that moves is the vertical one.
 *
 * The tray's 1px edge above this band, asked for in the round that gave the head its own, is stated
 * with the tray it belongs to - see the theme switch band's note, where both of the bands that can
 * open the tray are named together. It adds that single pixel to this band's depth.
 */
.woo-vendor-menu__drawer-foot {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 20px 16px;
}

/* The theme's primary button: contrast fill, 5px radius, small bold label. */
.woo-vendor-menu__action {
	align-items: center;
	background: var(--woo-vendor-menu-accent);
	border-radius: var(--woo-vendor-menu-button-radius);
	color: var(--woo-vendor-menu-accent-fg);
	display: inline-flex;
	font-size: var(--wp--preset--font-size--small, 0.8125rem);
	font-weight: 600;
	justify-content: center;
	line-height: 1.5;
	padding: calc(0.667em + 2px) calc(1.333em + 2px);
	text-decoration: none;
}

.woo-vendor-menu__action:hover,
.woo-vendor-menu__action:focus-visible {
	filter: brightness(1.1);
}

/* The theme's outline button: a secondary-coloured ring, same metrics as the fill. */
.woo-vendor-menu__secondary {
	align-items: center;
	background: none;
	border: none;
	border-radius: var(--woo-vendor-menu-button-radius);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--secondary, #a5a5a7);
	color: var(--woo-vendor-menu-panel-fg);
	display: inline-flex;
	font-size: var(--wp--preset--font-size--small, 0.8125rem);
	font-weight: 600;
	justify-content: center;
	line-height: 1.5;
	padding: calc(0.667em + 2px) calc(1.333em + 2px);
	text-decoration: none;
}

/* The tint is kept for the focus ring only, as the rows keep theirs. */
.woo-vendor-menu__secondary:focus-visible {
	background: var(--woo-vendor-menu-panel-tint);
}

.woo-vendor-menu__sync {
	color: var(--woo-vendor-menu-panel-faint);
	font-size: 0.8125rem;
	margin: 0 0 0 auto;
}

/* === responsive === */

@media (max-width: 600px) {
	.woo-vendor-menu__drawer-head {
		padding: 16px;
		padding-inline-end: 56px;
	}

	/* The head pads 16px here, so the close's own sum changes with it: -1.55px. */
	.woo-vendor-menu__drawer-close {
		top: -1.55px;
	}

	.woo-vendor-menu__panel {
		/*
		 * The head drops to 16px here, so the panel follows it down — and the bottom pad
		 * clears the home indicator on the phones that have one, which is the last thing
		 * a menu scrolled to its end should sit behind.
		 */
		padding: 0 16px calc(12px + env(safe-area-inset-bottom, 0px));
	}

	.woo-vendor-menu__drawer-foot {
		padding: 12px;
	}

	/* The head drops to 16px here, so the band's sides follow the head, as the panel's do. */
	.woo-vendor-menu__drawer-theme {
		padding: 12px 16px;
	}
}

/* === the plate (header) === */

/*
 * The circle the menu sits on. The header draws each control on a Group block and lets the group
 * carry the fill, as an inline style with the radius beside it - which is why this declaration is
 * important: only an important author rule out-ranks an inline style, and without it the plate would
 * keep the lighter grey the template paints on it.
 *
 * It shares the product search box's rest figure - #303030 - at the same 150ms the box fades over. The
 * fill is written as a literal rather than through the palette token it used to name, because that token,
 * filter-dark-chip-bg, is the fill the filter's own controls wear and retuning it to reach these four
 * would have carried them. The Mini Cart's circle, the Inbox's and the Add product circle's take the same
 * fills in the same pass, so the four controls read as one cluster.
 *
 * The pointer figure, on the newest ask, has come back to the box's own: all four warm to #353535 again,
 * so the box and the icons are one construction on both halves of the hover; they had been asked a step
 * past the box, onto #404040, for a round. The mark's own #e4e6ea holds at about 10.6 to 1 at rest and
 * about 9.8 to 1 under the pointer.
 *
 * Scoped with :has(> .woo-vendor-menu) because the plates are siblings in one flex row. A rule on the
 * group alone, or on the children, would repaint every circle in the cluster: only the one that
 * actually holds this block takes the chip.
 *
 * The reader asked this plate 2px of height once, so that it stood even with the Mini Cart's circle beside
 * it. The two did not: this plate measured 42.1875 and that one 44.1875, and since the row centres its
 * items, those 2px were being split into a 1px offset at each end - this plate a pixel low at the top and
 * a pixel short at the bottom, which is what the eye reads as the circles being out of step. The 2px came
 * in as padding and split evenly, a pixel above the content and a pixel below, rather than as a height: the
 * plate's content is a line box the block builds for itself, so a height here would have had to restate
 * that leading, and a padding is the figure the box already understands. Splitting it is what kept the
 * mark's place: grown downward alone, the plate's extra pixel would have pushed the mark a pixel up in its
 * own plate once the row re-centred the taller box. Both declarations carried !important because the
 * pattern writes padding-top and padding-bottom on this group inline, and nothing below that flag outranks
 * an inline longhand.
 *
 * The reader has since asked this plate back onto the Mini Cart's circle, and the 2px this note was
 * written for returns whole: the half pixel that came off each side last round goes back on, so the plate
 * measured 40 by 44.1875 - the Mini Cart plate's width and height to the pixel, as that circle stood then.
 * A row that centres two
 * equal heights centres their tops alike, so both edges now stand level with that circle, which is the line
 * this round was asked for; at 43.1875 the top edge sat a pixel below it and the bottom edge on it, and it
 * is the top the eye reads. The mark's place is unmoved by the growth: the padding above the content gains
 * a half pixel while the taller plate rises a half once the row re-centres it, and the two cancel, so this
 * mark keeps the line it held - level, as it happens, with the Cart's own, whose centre sits half a pixel
 * below the middle of its 42px button exactly as this one does in its 40px. The Inbox plate is the one a
 * pixel short after this round, since it carries no padding where this plate carries two: the figure that
 * would bring it onto the same box is 0.5px 0, which leaves its own mark a half pixel high, its descender
 * being a pixel taller than this plate's.
 *
 * The reader then asked the Inbox's circle very slightly wider, then the Mini Cart's on the same words, and
 * then this one's. The sides took the figure the height carried, where they had carried nothing: 1px where
 * they were 0, which is the move the round above refused for the mark's sake and that one could afford, a side
 * padding being invisible to the vertical. The plate measured 42 by 44.1875, so its width stood with the Mini
 * Cart's again, the 44.1875 being the height those two then shared. The height was untouched on both halves,
 * so nothing moved on the vertical - the row centred this plate's box where it had centred it, and the mark
 * kept the place in it that the round above took care to keep. The 2px landed on the plate's right edge, this
 * being the row's last circle and the row packing from its left.
 *
 * The plate's ground is the palette's control step, on the reader's newest ask: it is the same entry the
 * other three boxes in this row read, so the cluster is one fill. #303030, which this rule stated before,
 * is that entry's old value.
 *
 * The reader has now asked that all four header plates match the size of the Add product's, which settles the
 * shape of this cluster for good: the Add product's plate reads 40.5 by 42.6875, so the sides come down from
 * 1px to 0.25px - the 40px button plus a quarter pixel either side is the 40.5 the family reads - and the
 * height is stated at 42.6875 rather than left to the line box the mark's ascent builds, which is what had
 * made this plate 44.4375 and one of four different shapes. The pixel of padding above and below is kept,
 * since it is the figure the round above used to place this mark, and a stated height carries it without
 * changing the box: the row re-centres the shorter plate, so this plate's top edge comes down onto the line
 * the Add product's already stands on, which the rounds above were each reaching for a pair at a time.
 */
.wp-block-group.has-background:has(> .woo-vendor-menu) {
	background-color: var(--wp--preset--color--control, #292929) !important;
	height: 42.6875px !important;
	padding: 1px 0.25px !important;
	transition: background-color 0.15s ease;
}

/*
 * The cluster's own warm, at the same 150ms. It is #303030, the figure the reader has asked onto every
 * control in this family under the pointer - the filter panel's pills, its selects and its two buttons, the
 * cards' buttons and their tag links, the search box and its suggestion rows all take it - so this plate
 * takes it with them. It is written out rather than read from the palette's control-hover entry, which still
 * holds the older step, #353535: naming that entry here would leave this plate a step brighter under the
 * pointer than the rest of its family. One target, not two: the button fills the plate, so there is no ring
 * of plate left uncovered for the pointer to stand on instead.
 */
.wp-block-group.has-background:has(> .woo-vendor-menu):hover {
	background-color: #303030 !important;
}

/*
 * The plate's own entry, in its own block so that it follows the rule above: a media query does not
 * win on its own, and at equal specificity the later declaration is the one that counts.
 */
@media (prefers-reduced-motion: reduce) {
	.wp-block-group.has-background:has(> .woo-vendor-menu) {
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.woo-vendor-menu__drawer,
	.woo-vendor-menu__scrim {
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.woo-vendor-menu__item {
		transition: none;
	}
}

/* === variations === */

.woo-vendor-menu.is-style-ghost .woo-vendor-menu__button {
	background-color: transparent;
}

/* Filled: the accent becomes a solid pill, like a filled CTA button. */
.woo-vendor-menu.is-style-filled .woo-vendor-menu__button {
	background-color: var(--woo-vendor-menu-accent);
	border-radius: 999px;
	color: var(--woo-vendor-menu-accent-fg);
	padding: 0.5em 0.85em;
}

.woo-vendor-menu.is-style-filled .woo-vendor-menu__badge {
	background-color: var(--woo-vendor-menu-accent-fg);
	color: var(--woo-vendor-menu-accent);
}

/* Outline: a hairline ring in the block's own colour. */
.woo-vendor-menu.is-style-outline .woo-vendor-menu__button {
	border: 1px solid currentColor;
	border-radius: 999px;
	padding: 0.5em 0.85em;
}

/* ------------------------------------------------------------- editor only -- */

/* Help text inside the block's inspector panels (never rendered on the front end). */
.woo-vendor-menu-editor-note {
	color: #757575;
	font-size: 12px;
	line-height: 1.5;
	margin: 12px 0 0;
}