/*
 * The site header - includes/header.php
 * ----------------------------------------------------------------------------
 * Rebuilt 2026-09-22 (owner: "improve the design of my header, must be great in
 * both mobile and desktop").
 *
 * It loads on 109 pages, so this sheet is deliberately narrow: it restyles the
 * one <nav> and the two dropdowns hanging off it, and touches nothing else.
 *
 * FIVE THINGS IT MUST NOT BREAK, all of them load-bearing elsewhere:
 *
 * 1. The height. 70px desktop / 50px phone, exactly as before. Those numbers
 *    are hard-coded in places this sheet cannot reach - `.affix{top:70px}` and
 *    `{top:50px}` in styles-bootstrap.css, `affix_table_head(51)` in global.js,
 *    Auction-Past.php's own sticky - and they are measured at runtime into
 *    --hdr, which every sticky thing on the catalog and lot pages positions
 *    off. So the bar is pinned to those heights with min-height here rather
 *    than being left to whatever the logo happens to be, which is what set it
 *    before (an <img height="70"> attribute).
 * 2. The classes `navbar navbar-default navbar-fixed-top` and `body.override`.
 *    lx_header_measure_js() finds the header by the first, and the phone
 *    auto-hide in lotx-shared.css keys off both.
 * 3. One opaque full-height box. The phone auto-hide slides the whole nav with
 *    translateY(-100%); anything that overflows it visibly gets dragged off
 *    screen too.
 * 4. The COLOUR is not set here. `.override .navbar-default{background:...}`
 *    and the nav link colour are emitted inline by includes/header.php from the
 *    seller's own theme (navbar_bg / navbar_link), and that inline block loads
 *    after this file and wins. Every white-label site keeps its own header
 *    colour. What this sheet sets is everything EXCEPT hue: shape, size,
 *    spacing, weight, and the translucent overlays - all of which are written
 *    in currentColor or white-alpha so they work on any background a seller
 *    picks, light or dark.
 * 5. The 1200px breakpoint. There is no Bootstrap collapse in this header: it
 *    ships two sibling containers and shows one. The show/hide is restated at
 *    the bottom of this file because this sheet loads after the one that
 *    originally declared it.
 */

/* ============================================================== the bar ===
   Height is pinned, not inherited from the logo. */
.override .navbar-default {
	border: 0;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}
/* .navbar-view-desktop, NOT `.navbar-default .container`. Both containers in
   this header are `.container`, so a display:flex on that selector beats
   .navbar-view-mobile's own display:none at higher specificity and renders
   BOTH bars, stacked, at every width. */
.override .navbar-default .navbar-view-desktop {
	min-height: 70px;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Making that a flex container takes the floats out of the game - `fl-r` on
   the two <ul>s is how this header used to order itself, and a float is
   ignored on a flex item, so everything piled up on the left in DOM order.
   Restated as flex order instead, which also fixes the thing floats were
   doing badly: the two groups now have a declared relationship rather than
   depending on source order being written backwards.
   Left to right: logo, the nav links, then the account group hard right. */
.override .navbar-default .navbar-view-desktop .navbar-header { order: 1; }
.override .navbar-default .navbar-view-desktop .navbar-nav {
	float: none;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 2px;
}
.override .navbar-default .navbar-view-desktop .navbar-nav > li { float: none; }
/* The auto margin sits on the NAV group, not the account group (owner,
   2026-09-22: "move the menu items to right beside the user avatar"). That
   pushes the links to the right-hand end and leaves the account controls
   immediately after them, so the bar reads logo ... links avatar. Putting it
   on the account group instead is what had the links sitting next to the
   logo with the whole width between them and the avatar. */
.override .navbar-default .navbar-view-desktop .navbar-nav.fl-r:not(.fl-nr) {
	order: 2;
	margin-left: auto;
}
.override .navbar-default .navbar-view-desktop .navbar-nav.fl-nr {
	order: 3;
	margin-left: 10px;
	gap: 6px;
}

/* The old rule was `padding: 24px 15px; font-size: 17px` plus
   `text-shadow: 1px 1px #555`. The shadow is most of why this bar read as
   dated - a hard one-pixel grey offset under white text on green, which is
   also what was making the type look furry. Gone.
   A link is now a 40px pill centred in the 70px bar: 15 + 40 + 15. The pill
   only appears on hover and on the open dropdown, so the resting bar is just
   words. */
.override .navbar-default .navbar-nav > li > a {
	/* 17px, which is what this bar has always been (owner: "my font looks
	   nicer and easier to read"). The rebuild had taken it to 15 with a touch
	   of negative tracking, which is a good size for a dense app bar and the
	   wrong one for five words on a wide screen.
	   The `text-shadow: 1px 1px #555` those 17px used to carry stays gone:
	   that is what was making the type look furry, and it is not the size. */
	font-size: 17px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: normal;
	text-shadow: none;
	padding: 0 13px;
	height: 40px;
	margin: 15px 0;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border-radius: 9px;
	transition: background-color .15s ease, color .15s ease;
}
/* currentColor, so this reads correctly whether a seller's navbar is dark
   (white links) or light (dark links) - it just deepens whatever is there. */
.override .navbar-default .navbar-nav > li > a:hover,
.override .navbar-default .navbar-nav > li > a:focus,
.override .navbar-default .navbar-nav > li .dropdown-toggle:hover,
.override .navbar-default .navbar-nav > .open > a,
.override .navbar-default .navbar-nav > .open > a:focus,
.override .navbar-default .navbar-nav > .open > a:hover {
	background-color: rgba(255, 255, 255, .25);
	background-color: color-mix(in srgb, currentColor 25%, transparent);
	/* NO `color: inherit` here, and that is the whole of why hover used to go
	   dark (owner, 2026-09-22). `inherit` does not mean "keep the link's own
	   colour" - it takes the PARENT's, and the parent chain ends at body,
	   whose text is the theme's dark body_text. So the words turned dark on
	   hover, and because the background above is mixed from currentColor,
	   the tint turned dark with them. Leaving colour alone keeps the link
	   white and keeps the tint light. */
}
.override .navbar-default .navbar-nav > li > a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

/* ---- a tap must not leave a ring behind ----
   The hamburger, the logo and the search glyph are all `<a href="#">`, which
   takes focus on click, so the browser's own focus ring stayed on screen
   after a tap. It is drawn in `currentColor` and this bar's colour is white,
   which is the white rounded box in the report, with the platform's tap
   highlight outside it (owner, 2026-09-22).

   `:focus:not(:focus-visible)` is the whole fix and the reason not to simply
   write `outline: none`: the ring goes for pointer and touch, and stays for
   anybody arriving by keyboard, who has nothing else to tell them where they
   are. Only the OUTLINE is cleared - Sign In carries its border as an inset
   box-shadow, and blanket-clearing that would flash its edge away on click. */
.override .navbar-fixed-top a:focus:not(:focus-visible),
.override .navbar-fixed-top button:focus:not(:focus-visible),
.override .navbar-fixed-top .pro-mode-btn:focus:not(:focus-visible) {
	outline: none;
}
.override .navbar-fixed-top a,
.override .navbar-fixed-top button {
	-webkit-tap-highlight-color: transparent;
}
/* Bootstrap ships `a:hover, a:focus { text-decoration: underline }`, which is
   the underline in the same report. */
.override .navbar-fixed-top a:hover,
.override .navbar-fixed-top a:focus,
.override .navbar-fixed-top a:active {
	text-decoration: none;
}

/* The caret that Bootstrap draws as a border triangle. Softened and given a
   little room, so "More" does not read as two glued things. */
.override .navbar-view-desktop .caret {
	margin-left: 1px;
	opacity: .85;
	border-top-width: 5px;
	border-right-width: 4px;
	border-left-width: 4px;
}

/* ============================================================ the logo ===
   Full bar height, 70px, which is the size it has always been (owner: "as big
   as the way it was").
   Still sized in CSS rather than by the <img height="70"> attribute it ships
   with, and that is the part worth keeping: the bar's own height is pinned by
   min-height above, so the logo now fills a 70px bar instead of BEING what
   makes the bar 70px. Same picture, but swapping the asset or nudging this
   number can no longer move --hdr and everything pinned to it. */
.override .navbar-header {
	display: flex;
	align-items: center;
	gap: 10px;
	float: none;
}
.override .navbar-header .navbar-logo {
	display: flex;
	align-items: center;
	padding: 0;
}
.override .navbar-header .navbar-logo img {
	height: 70px;
	width: auto;
	display: block;
}

/* ====================================================== search + avatar ===
   One shape for every round control in the bar, so the search glyph, the
   avatar and the hamburger stop being three different sizes. 40px matches the
   nav pills beside them. */
.override .navbar-default .main-header-search-icon {
	width: 40px;
	padding: 0 !important;
	justify-content: center;
}
.override .navbar-default .main-header-search-icon .fa {
	font-size: 18px;
}

/* The avatar dropdown toggle. `.p-d-i` in override.css puts !important 10px
   padding on it, which is why this has to be !important back. */
/* The avatar goes back to 50px, the size it has always been (owner), which
   means its control has to grow with it: a 50px picture does not fit a 40px
   pill. 6 + 58 + 6 keeps the bar at exactly 70, and the 50px avatar sits
   centred in the 58 with 4px either side. */
.override .navbar-nav > li > a.dropdown-toggle.p-d-i {
	padding: 0 8px 0 4px !important;
	height: 58px;
	margin: 6px 0;
	gap: 5px;
	border-radius: 999px;
}
.override .navbar-nav > li > a.dropdown-toggle.p-d-i img.img-circle,
.override .navbar-nav > li > a.dropdown-toggle.p-d-i .lx-avatar {
	width: 50px !important;
	height: 50px !important;
	font-size: 17px;
	border-radius: 50%;
	/* A hairline in the bar's own ink, so a pale avatar does not bleed into a
	   light navbar and a dark one does not vanish into a dark navbar. */
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .45);
	box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 45%, transparent);
}

/* ======================================================== the dropdowns ===
   Bootstrap 3's default is a 2px-radius box with a hard 1px border and a
   heavy shadow. Brought in line with the catalog and lot pages: 12px radius,
   a hairline, and the two-layer tinted lift those pages use. */
.override .navbar-default .dropdown-menu {
	margin-top: 6px;
	padding: 6px;
	min-width: 220px;
	border: 1px solid #E7E7E3;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(16, 19, 23, .05), 0 12px 32px -10px rgba(16, 19, 23, .16);
	background: #fff;
}
.override .navbar-default .dropdown-menu > li > a {
	padding: 9px 12px;
	border-radius: 8px;
	font-size: 14.5px;
	font-weight: 500;
	color: #3D444E;
	white-space: nowrap;
	transition: background-color .13s ease, color .13s ease;
}
.override .navbar-default .dropdown-menu > li > a:hover,
.override .navbar-default .dropdown-menu > li > a:focus {
	background: #F4F4F1;
	color: #101317;
}
.override .navbar-default .dropdown-menu > li > a.f-b {
	color: #101317;
	font-weight: 650;
	line-height: 1.35;
}
.override .navbar-default .dropdown-menu > .divider {
	margin: 6px 4px;
	background: #F0F0EC;
}

/* ====================================================== signed-out pair ===
   ONE design, used twice (owner, 2026-09-25: "we're showing 2 different
   button designs, I'd rather we have only 1 design so it's consistent").

   The pair used to differ in four ways at once, which is why it read as two
   components rather than two buttons: Sign In had a 1px INSET ring at half
   opacity, Register a 1.5px OUTSET ring at full opacity over an accent fill,
   plus a heavier weight and wider padding. An outset ring also sits outside
   the radius, so Register looked both larger and rounder than its neighbour
   at the same height.

   The fill was the odd one out for a second reason worth keeping written
   down: --acc IS the header colour on the main site, so `background:
   var(--acc)` painted a green button on a green bar and only the ring was
   ever doing the work. Dropping it costs nothing there, and it removes the
   same trap for any white-label seller whose navbar happens to match their
   accent - the case that already caught the avatar chip and the Pro chip.

   Both now take the base nav pill and add the same hairline in currentColor,
   so the ring follows the button's own ink whether a seller's navbar is dark
   or light, and hover is the base pill's for both. */
.override .navbar-view-desktop .navbar-nav > li > a[href*="Login.php"],
.override .navbar-view-desktop .navbar-nav > li > a[href*="Register.php"] {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 50%, transparent);
}
/* Space between the two. A gap, not a difference in kind. */
.override .navbar-view-desktop .navbar-nav > li > a[href*="Register.php"] {
	margin-left: 4px;
}

/* ========================================================== the mobile ===
   Restated here, not inherited: the rule that swaps the two containers lives
   in styles-bootstrap.css, which loads BEFORE this sheet, so a bare
   `display:flex` on .navbar-view-mobile here would beat its media query and
   show the phone bar at every width. */
.override .navbar-view-mobile { display: none; }

@media only screen and (max-width: 1200px) {
	.override .navbar-view-mobile {
		display: flex;
		align-items: center;
		gap: 4px;
		min-height: 50px;
		padding: 0 6px;
	}
	/* Specificity has to MATCH the rule that turns the desktop bar into a flex
	   container above, `.override .navbar-default .navbar-view-desktop` at
	   (0,3,0). A bare `.override .navbar-view-desktop` here is (0,2,0) and
	   loses, which puts both bars on screen stacked. */
	.override .navbar-default .navbar-view-desktop { display: none; }

	/* 44px thumb targets for the two icons, which were a 20px glyph with
	   padding either side and no real box. The logo keeps its original 50px,
	   filling the bar. */
	.override .navbar-view-mobile > a.fl-l:first-child {
		width: 44px;
		height: 44px;
		padding: 0 !important;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10px;
		font-size: 19px;
		flex: 0 0 auto;
	}
	.override .navbar-view-mobile > a.fl-l:first-child:hover {
		background: rgba(255, 255, 255, .2);
		background: color-mix(in srgb, currentColor 20%, transparent);
	}
	.override .navbar-view-mobile > a.fl-l:first-child:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: -3px;
	}
	.override .navbar-view-mobile > a.fl-l:nth-child(2) {
		display: flex;
		align-items: center;
		margin-left: 2px;
		flex: 0 1 auto;
		min-width: 0;
	}
	.override .navbar-view-mobile > a.fl-l:nth-child(2) img {
		height: 50px;
		width: auto;
		max-width: 100%;
		display: block;
		padding: 0;
		/* Below about 340 there is not room for the wordmark at its full
		   167px, and max-width clamps it. Without object-fit that clamp
		   squashes the artwork horizontally against a fixed 50px height -
		   measured 136x50 at 320, where the natural ratio wants 167. contain
		   keeps the proportions and letterboxes instead. */
		object-fit: contain;
		object-position: left center;
	}

	/* The right-hand group stops floating and becomes the row's end. */
	.override .navbar-view-mobile .navbar-nav {
		display: flex;
		align-items: center;
		gap: 2px;
		margin: 0 0 0 auto;
		float: none;
		flex: 0 0 auto;
	}
	.override .navbar-view-mobile .navbar-nav > li { float: none; }
	.override .navbar-view-mobile .navbar-nav > li > a {
		height: 38px;
		margin: 0;
		padding: 0 11px;
		font-size: 14.5px;
		font-weight: 600;
		border-radius: 9px;
	}
	/* The magnifier is the last item and wants to be square, not a wide pill. */
	.override .navbar-view-mobile .navbar-nav > li:last-child > a {
		width: 44px;
		height: 44px;
		padding: 0;
		justify-content: center;
		font-size: 17px;
	}
}

/* Below 360 the word and the two icons stop fitting beside a 30px wordmark.
   The mark alone still identifies the site, and Sign In is the one thing on
   this bar somebody cannot get to any other way. */
@media only screen and (max-width: 359px) {
	.override .navbar-view-mobile .navbar-nav > li > a { padding: 0 8px; }
}

/* ==================================================== the mobile drawer ===
   #menuheader, the full-screen sheet the hamburger opens. This IS the mobile
   navigation.

   Rebuilt on a WHITE sheet (owner, 2026-09-22: "looks really ugly, change the
   background ... make it just white background"). It was a photograph of a
   mountain range tinted with btn_tertiary_bg, dimmed to 90% brightness and
   blurred behind the content - a decorative image doing nothing for a list of
   twenty-three links, and the thing that made every row hard to read.

   The white applies everywhere, white-label sites included, and that is a
   judgement worth stating: the background it replaces came from
   `btn_tertiary_bg`, which is a BUTTON colour being borrowed as a menu
   surface. A seller's brand still comes through where it belongs - the accent
   on Sign In and on the active row - and a white menu works with every accent,
   which a tinted photograph does not.

   Beating the inline block that sets all this is a specificity problem, not a
   source-order one: includes/header.php emits `.override .menuheader{...}`
   AFTER this file loads, so these rules are written one step higher at
   `body.override .menuheader` to win. */
body.override .menuheader {
	background: none;
	filter: none;
	-webkit-filter: none;
	/* The sheet scrolls, not the modal shell. Bootstrap makes .modal the
	   scroll container, which on a side sheet gives you two nested scrollbars
	   and a sheet that can be scrolled away from the edge. */
	overflow: hidden;
}

/* ---- a side sheet, not the full screen ----
   Owner, 2026-09-22: "make it like the filters on the lot list". Same
   geometry as `.bd-rail` on the catalog, deliberately, so the two sheets on
   this site are one idea: pinned to the left edge, min(92vw, 394px) wide,
   full height, sliding in on the same 220ms curve.
   The specificity is doing real work here. Bootstrap's own
   `.modal.fade .modal-dialog{transform:translate(0,-25%)}` and
   styles-bootstrap.css's `.override .menuheader .modal-dialog{width:100%}`
   both have to lose, which is why every rule is written from `body.override`
   at (0,3,1). */
body.override .menuheader .modal-dialog {
	position: fixed;
	inset: 0 auto 0 0;
	width: min(92vw, 394px);
	max-width: none;
	height: 100%;
	margin: 0;
	transform: translateX(-100%);
	transition: transform .22s ease;
}
body.override .menuheader.in .modal-dialog {
	transform: none;
}
/* While a finger is on it the sheet follows the finger, so the transition
   has to be out of the way or every move chases 220ms behind the thumb. */
body.override .menuheader.is-dragging .modal-dialog {
	transition: none;
}
body.override .menuheader .modal-content {
	height: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: #fff;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border: 0;
	border-right: 1px solid #E7E7E3;
	border-radius: 0;
	box-shadow: 0 0 60px rgba(0, 0, 0, .3);
	/* Hands the browser the vertical scrolling this sheet needs and keeps the
	   horizontal axis for the swipe handler in includes/header.php, the same
	   bargain .bd-rail strikes. */
	touch-action: pan-y;
}
body.override .menuheader .modal-body {
	padding: 8px 10px 44px;
}

/* ---- who you are ----
   Avatar, name, and the line under it, the way the reference opens. The whole
   block is the link to Account, which is why Account is not also a row. */
body.override .menuheader .mh-me {
	display: flex;
	align-items: center;
	gap: 13px;
	margin: 2px 4px 16px;
	padding: 4px 2px;
	text-decoration: none;
}
body.override .menuheader .mh-me:hover,
body.override .menuheader .mh-me:focus { text-decoration: none; }
body.override .menuheader .mh-me__av {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--acc, #00A65A);
	color: var(--acc-ink, #fff);
	font-size: 22px;
	font-weight: 700;
}
body.override .menuheader .mh-me__av--img { padding: 0; object-fit: cover; }
body.override .menuheader .mh-me__id {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}
body.override .menuheader .mh-me__id b {
	font-size: 19px;
	font-weight: 700;
	color: #101317;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
body.override .menuheader .mh-me__id i {
	font-style: normal;
	font-size: 14px;
	color: #6A7078;
}

/* ---- the three quick tiles ----
   Icon over label, three across, the way the reference stacks Payments /
   Notifications / Messages. These are the settings-ish destinations, parked
   here so the list below can be about bidding. */
body.override .menuheader .mh-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 0 4px 20px;
}
body.override .menuheader .mh-tiles a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 82px;
	padding: 8px 4px;
	border-radius: 14px;
	background: #F4F4F1;
	color: #101317;
	font-size: 12.5px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background-color .13s ease;
}
body.override .menuheader .mh-tiles a:hover,
body.override .menuheader .mh-tiles a:focus {
	background: #EDEDE8;
	text-decoration: none;
}
body.override .menuheader .mh-tiles .material-icons {
	font-size: 25px;
	color: #3D444E;
}

/* ---- section heading ----
   Big and dark, like the reference's "Shopping". The small grey caps this had
   were readable but recessive: they labelled the groups without ever giving
   the sheet a structure you could see from across the room. */
body.override .menuheader .mh-h {
	margin: 22px 4px 4px;
	padding: 0 2px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	color: #101317;
}

/* ---- a row ----
   Icon badge, title, and the line that says what it is for. The second line
   is the real change from every earlier version of this menu: a list of bare
   nouns makes somebody guess what "Bid Results" holds. */
body.override .menuheader .mh-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 9px 8px;
	margin: 0 -2px;
	border-radius: 12px;
	text-decoration: none;
	transition: background-color .13s ease;
}
body.override .menuheader .mh-row:hover,
body.override .menuheader .mh-row:focus {
	background: #F4F4F1;
	text-decoration: none;
}
body.override .menuheader .mh-row__i {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #F4F4F1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
body.override .menuheader .mh-row:hover .mh-row__i { background: #E7E7E3; }
body.override .menuheader .mh-row__i .material-icons {
	font-size: 23px;
	color: #3D444E;
}
body.override .menuheader .mh-row__t {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
body.override .menuheader .mh-row__t b {
	font-size: 15.5px;
	font-weight: 600;
	color: #101317;
	line-height: 1.25;
}
body.override .menuheader .mh-row__t i {
	font-style: normal;
	font-size: 13px;
	line-height: 1.35;
	color: #6A7078;
}

/* ---- the way in, for somebody signed out ---- */
body.override .menuheader .mh-cta {
	margin: 2px 4px 16px;
	padding: 16px 14px 14px;
	border-radius: 14px;
	background: #F4F4F1;
}
body.override .menuheader .mh-cta b {
	display: block;
	font-size: 18px;
	font-weight: 700;
	color: #101317;
}
body.override .menuheader .mh-cta p {
	margin: 5px 0 13px;
	font-size: 13.5px;
	line-height: 1.5;
	color: #6A7078;
}
body.override .menuheader .mh-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 650;
	color: #101317;
	background: #fff;
	box-shadow: inset 0 0 0 1px #E0E0DA;
	text-decoration: none;
}
body.override .menuheader .mh-btn + .mh-btn { margin-top: 8px; }
body.override .menuheader .mh-btn--go {
	background: var(--acc, #00A65A);
	color: var(--acc-ink, #fff);
	box-shadow: none;
}
body.override .menuheader .mh-btn:hover,
body.override .menuheader .mh-btn:focus { text-decoration: none; }
body.override .menuheader .mh-btn--go:hover,
body.override .menuheader .mh-btn--go:focus {
	color: var(--acc-ink, #fff);
	filter: brightness(1.08);
}

/* ---- out ---- */
body.override .menuheader .mh-out {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	margin: 22px 4px 0;
	border-radius: 10px;
	background: #FDF0EC;
	color: #A8341C;
	font-size: 15px;
	font-weight: 650;
	text-decoration: none;
}
body.override .menuheader .mh-out:hover,
body.override .menuheader .mh-out:focus {
	background: #F9E2DB;
	color: #A8341C;
	text-decoration: none;
}

/* ---- the close ----
   Floated, so the list runs from the very top and the first item sits beside
   it rather than under it. Reserving a row for this button is exactly what
   put an empty band above the first link (owner, 2026-09-22). */
body.override .menuheader .close {
	float: right;
	position: relative;
	z-index: 1;
	opacity: 1;
	width: 36px;
	height: 36px;
	margin: 4px 4px 0 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	/* Its own white disc with a hairline. The first thing in the sheet is a
	   card - the identity block, or the sign-in block - and a bare glyph
	   floating onto that card's corner reads as "dismiss this card" rather
	   than "close the menu". On its own surface it belongs to the sheet. */
	background: #F0F0EC;
	color: #3D444E;
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	text-shadow: none;
}
body.override .menuheader .close:hover {
	background: #F4F4F1;
	color: #101317;
}

/* ========================================================== the account ===
   Initials when the member has no photograph, sized to the 30px the real
   avatar gets.
   NOT in the accent, which is what it was while the bar was dark: the accent
   IS the header green on the main site, so a green chip on a green bar
   disappears. A neutral translucent with a ring instead, which holds on a
   green navbar, a dark one and the white one a white-label seller gets by
   default - any of which `navbar_bg` can be. */
.override .navbar-nav > li > a.dropdown-toggle .lx-avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
	/* SOLID, not a tint. Measured over the header green: a white tint reaches
	   1.37 at 28%, 1.89 at 55% and only 2.26 at 70%, all of them under the 3:1
	   a non-text surface needs to read as an object. Solid white is 3.18, and
	   it is why the switch track beside this one was always legible while the
	   chip was not.
	   Near-black initials on it rather than the accent: green on white is also
	   3.18, which is borderline for two letters at this size, where #12161C is
	   17:1. The ring is currentColor so it still appears on a light navbar,
	   where a white chip would otherwise have no edge. */
	background: #fff;
	color: #12161C;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
	box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent);
	flex: 0 0 auto;
}
/* Sign Out was `style="color: red !important"` inline, which beat every
   stylesheet including this one. It is a class now, and a calmer red - the
   old one was pure #f00. */
.override .navbar-default .dropdown-menu > li > a.lx-signout {
	color: #A8341C;
	font-weight: 600;
}
.override .navbar-default .dropdown-menu > li > a.lx-signout:hover,
.override .navbar-default .dropdown-menu > li > a.lx-signout:focus {
	background: #FDF0EC;
	color: #A8341C;
}

/* ========================================================= PRO MODE ===
   A switch (owner, 2026-09-22). It was an 85px block with a 3px #ccc border
   and two stacked strips, then a label beside a chip reading TURN OFF - which
   is a state and an action fighting over the same two words. A switch says
   the state and offers the action in one object, and everybody already knows
   how to read one.

   Drawn ENTIRELY from the two classes global.js already flips. It rewrites
   `.turn-off` to `.turn-on` and back on every toggle, so the knob slides and
   the track changes colour with no change to that handler at all. The words
   it writes into the element are still there for a screen reader; they are
   just no longer what you see (`font-size: 0`).

   Neither state uses the accent for the TRACK, for the reason that keeps
   coming up on this bar: --acc is the header's own green on the main site, so
   a green track on a green bar disappears. The track carries the contrast
   (grey when off, white when on) and the knob sits against it. That holds on
   a dark navbar and a white one too. */
.override .pro-mode-btn {
	width: auto;
	border: 0;
	margin: 15px 0 15px 6px;
	height: 40px;
	padding: 0 10px 0 13px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .22);
	background: color-mix(in srgb, currentColor 22%, transparent);
	/* The ring is what actually draws this pill; the fill only softens it. At
	   55% it measures 1.89 against the bar, which is plenty for a 1px line. */
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 55%, transparent);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease;
}
.override .pro-mode-btn:hover { background: rgba(255, 255, 255, .28); }
.override .pro-mode-btn:hover { background: color-mix(in srgb, currentColor 28%, transparent); }
.override .pro-mode-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
.override .pro-mode-btn .pro-mode-text {
	background: none;
	color: inherit;
	opacity: 1;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-align: left;
	white-space: nowrap;
}

/* ---- the switch itself ---- */
.override .pro-mode-btn .turn-on,
.override .pro-mode-btn .turn-off {
	position: relative;
	flex: 0 0 auto;
	width: 40px;
	height: 22px;
	padding: 0;
	border-radius: 999px;
	/* The handler's own words, kept for assistive tech and taken off screen. */
	font-size: 0;
	transition: background-color .22s ease;
}
.override .pro-mode-btn .turn-on::after,
.override .pro-mode-btn .turn-off::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(16, 19, 23, .35);
	/* The same curve the sheets in this codebase slide on. */
	transition: transform .22s cubic-bezier(.32, .72, .34, 1), background-color .22s ease;
}

/* .turn-off is what the click WOULD do, so Pro is on right now: knob right. */
.override .pro-mode-btn .turn-off { background: #fff; }
.override .pro-mode-btn .turn-off::after {
	transform: translateX(18px);
	background: var(--acc, #00A65A);
}

/* .turn-on means the click turns it on, so Pro is off: knob left. */
/* Dark, not a tint of the bar: the knob on this state is white, so a light
   track would swallow it. A dark track reads against green, against white and
   against the near-black a seller might pick. */
.override .pro-mode-btn .turn-on { background: rgba(16, 19, 23, .38); }
.override .pro-mode-btn .turn-on::after {
	transform: translateX(0);
	background: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.override .pro-mode-btn .turn-on,
	.override .pro-mode-btn .turn-off,
	.override .pro-mode-btn .turn-on::after,
	.override .pro-mode-btn .turn-off::after { transition: none; }
}