/*
 * assets/css/header.css
 * Version: 0.16.1
 *
 * Built to the Claude Design handoff, locked direction "Site Header 2026 - Search Bar".
 * Tokens, sizes and motion values are the handoff's, not invented here.
 *
 * MOBILE FIRST. Base rules are the phone, and the single 1000px breakpoint from the handoff
 * adds desktop. The site is 85%+ mobile, so the phone layout is the one that must not be an
 * afterthought.
 *
 * ONE SET OF MARKUP. No desktop copy, no mobile copy. There is also one cached copy of the
 * HTML for every device, so nothing here may depend on the server knowing the device.
 *
 * NO BORDER RADIUS ANYWHERE. Written !important because the theme and Elementor both set
 * their own on buttons, inputs and containers. The handoff makes this an explicit design rule
 * too ("Radius: 0 everywhere").
 */

.bdo-sh {
	/*
	 * NEUTRAL GREY, NOT WARM BONE. Brian, 2026-08-07: "i do not want beige at all, there or the
	 * main nav background."
	 *
	 * The handoff's palette was warm throughout - #faf9f7 canvas, #9a958c and #c0bab0 labels,
	 * #b7b2a8 search icon, #f1efeb hairlines. Changing only the two he named would have left
	 * the header sitting on neutral grey with beige LABELS on it, which reads as a mistake
	 * rather than a choice. So every warm tint is now its neutral equivalent at the same
	 * lightness, and nothing else about the design moved.
	 *
	 * The nav bar was #f1f1f1 and is now #fafafa, Brian's call 2026-08-08.
	 *
	 * --bdo-sh-bar IS NOW THE REAL SOURCE. It sat unused for weeks while `.bdo-sh__header` carried
	 * its own `rgba()`, because a frosted bar needs an alpha and a hex token cannot hold one. The
	 * frosting is gone (see that rule), so the token finally paints the bar and editing this line
	 * is enough.
	 */
	--bdo-sh-canvas: #f7f7f7;
	--bdo-sh-bar: #fafafa;
	--bdo-sh-ink: #141414;
	--bdo-sh-nav: #2b2b2b;
	--bdo-sh-nav-hover: #6b6b6b;
	--bdo-sh-panel-link: #333333;
	--bdo-sh-muted: #8f8f8f;
	--bdo-sh-muted-2: #b8b8b8;
	--bdo-sh-muted-3: #6f6f6f;
	--bdo-sh-on-dark: #f1f1f1;
	--bdo-sh-on-dark-dim: #a5a5a5;
	/*
	 * BRAND BLUE, GIVEN BY BRIAN 2026-08-07. Only used for the cart hover so far.
	 *
	 * The handoff listed #d98324 as "brand orange" and that was wrong - it is not his brand
	 * colour and never was. Do not take a colour labelled "brand" from a design file as fact.
	 */
	--bdo-sh-brand: #1f6fec;
	--bdo-sh-hair: rgba(20, 20, 20, .08);
	--bdo-sh-hair-2: #ededed;
	--bdo-sh-hair-3: #f1f1f1;
	--bdo-sh-h: 92px;
	--bdo-sh-logo: 60px;

	/*
	 * FULL-BLEED WIDTH. Fallback is 100vw; header.js replaces it with
	 * document.documentElement.clientWidth on load and resize.
	 *
	 * The swap is not decoration. 100vw INCLUDES the vertical scrollbar on Windows, so bleeding
	 * to 100vw inside a page that already scrolls pushes the document about 15px wider and adds
	 * a horizontal scrollbar. clientWidth excludes it.
	 *
	 * It is computed in the BROWSER on purpose. There is one cached copy of this HTML for every
	 * visitor, so a width worked out on the server would be wrong for most of them.
	 */
	--bdo-sh-vw: 100vw;

	box-sizing: border-box;
	width: 100%;
	font-family: 'Poppins', system-ui, -apple-system, sans-serif;
	color: var(--bdo-sh-ink);
	background: var(--bdo-sh-canvas);

	/*
	 * THE RED FLASH ON TAP IS THE THEME'S, AND IT IS NOT A BACKGROUND COLOUR.
	 *
	 * Brian, on a phone: *"when clicking a category the touch color is red which is clearly the
	 * hello elementor theme"*. Right - it is `-webkit-tap-highlight-color`, a WebKit-only overlay
	 * the browser paints over the whole tapped element. It cannot be overridden by setting a
	 * background, which is why it is easy to chase for a while.
	 *
	 * Killed here and replaced below with our own :active state, because a menu row that gives no
	 * feedback at all on a phone feels broken in a different way.
	 */
	-webkit-tap-highlight-color: transparent;
}

/*
 * ON THE DESCENDANTS TOO, AND WITH !important. Setting it on `.bdo-sh` alone was not enough:
 * Brian, still seeing it after that shipped - *"when i click a category on mobile the click color
 * becomes the hello elementor red"*, and the same on the hamburger.
 *
 * The property does NOT reliably inherit to form controls - a `<button>` takes the UA's own value
 * back - and the theme sets its own on elements it styles, which beats a parent. So it is stated
 * on everything inside this header, including the two elements he named, which are both buttons.
 *
 * The focus ring goes with it for the same reason: the theme paints a red outline on :focus, and
 * a tap counts as a focus on iOS. Keyboard users keep :focus-visible, which is the one that
 * actually matters for accessibility.
 */
.bdo-sh,
.bdo-sh * {
	-webkit-tap-highlight-color: transparent !important;
}

/*
 * THE RED IS THE THEME'S BUTTON STYLING, NOT A TAP HIGHLIGHT. This is the third and correct
 * diagnosis, and the first two were wrong in the same way.
 *
 * Brian: *"on mobile the menu is red and the x is red and the color behind it is red"* - a crimson
 * bar behind "Menu" and a crimson X, with the drawer rendering perfectly underneath.
 *
 * `-webkit-tap-highlight-color: transparent !important` was already live and did nothing, which
 * ruled the tap highlight out. What is left is ordinary CSS: the theme styles bare `button`,
 * including its `:hover`, `:focus` and `:active` states, at class-plus-element specificity. That
 * beats every single-class rule in this file - the SAME fight that shrink-wrapped the drill rows
 * an hour earlier.
 *
 * THE X WENT RED BECAUSE OF A CHANGE MADE HERE. Those SVG strokes were switched to `currentColor`
 * so they could invert on the black bar. That also opened a door: whatever colour wins on the
 * button now flows into the icon, so the theme's red arrived in the artwork as well as the
 * background.
 *
 * So every button in this header is stripped in all four states, and the ones that DO want a
 * background re-declare it below with !important. Blanket-reset-then-restate is heavier than
 * usual, but the alternative is discovering a fifth state months from now.
 */
.bdo-sh button,
.bdo-sh button:hover,
.bdo-sh button:focus,
.bdo-sh button:active,
.bdo-sh button:focus-within {
	background-color: transparent !important;
	background-image: none !important;
	color: inherit !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

.bdo-sh button:focus,
.bdo-sh a:focus {
	outline: none;
}

.bdo-sh button:focus-visible,
.bdo-sh a:focus-visible {
	outline: 2px solid var(--bdo-sh-ink);
	outline-offset: -2px;
}

/*
 * Our own tap feedback, since the browser's was just turned off. A plain grey wash, the same
 * family as the hover states, on every row and link that can be pressed.
 *
 * TOUCH ONLY, VIA :active. There is no hover on a phone, and :active on desktop lasts exactly as
 * long as the mouse is down - which is the correct behaviour there too.
 */
.bdo-sh__sub-link:active,
.bdo-sh__mobile-foot a:active {
	background-color: #f0f0f0;
}

/* `.bdo-sh__row-item:active` is NOT in that list. It needs !important to beat the theme's own
   button states, so it lives with the drill rows further down - see the note there. Declaring it
   here as well would look like the rule that does the work, and it would be the one that loses. */

/* The `.bdo-sh__sub-all` rules that were here are gone with the class - "All <sport>" is an
   ordinary `.bdo-sh__sub-link` now and picks up the row feedback above. */

/*
 * THE WHOLE ROW IS THE TAP TARGET, EDGE TO EDGE. Brian: *"on mobile, the full width of the
 * category needs to be clickable."*
 *
 * Stated on both row types together rather than relying on what an `<a>` or a `<button>` happens
 * to do by default, because they do NOT agree: an anchor is inline until told otherwise, and a
 * button shrink-wraps its content. Either one leaves dead space beside the label that looks
 * tappable and is not.
 *
 * `box-sizing` matters here specifically - these rows carry 18px of horizontal padding, so
 * without it `width: 100%` makes them 36px wider than the drawer and the right-hand edge is
 * pushed out of reach rather than made tappable.
 */
.bdo-sh__row-item,
.bdo-sh__sub-link,
.bdo-sh__row-inner {
	display: flex;
	width: 100%;
	box-sizing: border-box;
	text-align: left;
}

.bdo-sh *,
.bdo-sh *::before,
.bdo-sh *::after {
	box-sizing: border-box;
	border-radius: 0 !important;
}

/*
 * THE THEME PAINTS EVERY LINK BLUE, AND IT WINS ON SPECIFICITY.
 *
 * Measured on the live page, not assumed: nav links and panel links both computed to
 * rgb(1, 88, 175). `color: inherit` alone lost. The header has to control its own colour
 * completely or the whole accent system is decoration over a blue nav.
 *
 * Same reasoning as the border-radius rule above: this is a component dropped into a theme
 * that styles bare tags, so it states its own values rather than hoping to inherit them.

 * THE RESET DOES NOT TOUCH COLOUR, AND THAT IS THE POINT. v0.2.2 put
 * `color: inherit !important` on this list and it broke the accent system - not because the
 * theme won, but because THIS RULE BEAT MY OWN. `.bdo-sh a:link` is a class plus a
 * pseudo-class plus an element (0,2,1); `.bdo-sh__panel-links a` is only (0,1,1). The reset
 * outranked every colour below it and every link in the header computed to the same #141414.
 *
 * So colour is stated explicitly on each element that needs one, with !important, competing
 * only against the theme. Nothing here competes with anything else in this file.
 */
.bdo-sh a,
.bdo-sh a:link,
.bdo-sh a:visited,
.bdo-sh a:hover,
.bdo-sh a:focus,
.bdo-sh a:active {
	text-decoration: none !important;
	box-shadow: none !important;
}

/* Default colour for links that have no colour of their own. Not !important, so the rules
 * further down win without a specificity fight. */
.bdo-sh a {
	color: inherit;
}

.bdo-sh__login,
.bdo-sh__cart,
.bdo-sh__feature,
.bdo-sh__mobile-foot a {
	color: inherit !important;
}

/* Panels sit inside a header that is itself the positioning context. */
.bdo-sh__panel[hidden],
.bdo-sh__sub[hidden],
.bdo-sh__mobile[hidden] {
	display: none !important;
}

.bdo-sh button {
	font-family: inherit;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

/*
 * The admin notice bar was removed in v0.3.1. Its rule is gone with it rather than left behind
 * styling an element that no longer renders.
 */

/* Shared animated underline, used on panel links and the utility login. */
.bdo-sh__ul,
.bdo-sh__login {
	position: relative;
}

.bdo-sh__ul::after,
.bdo-sh__login::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -3px;
	height: 1.5px;
	width: 0;
	background: currentColor;
	transition: width .25s ease;
}

.bdo-sh__ul:hover::after,
.bdo-sh__login:hover::after {
	width: 100%;
}

/* ------------------------------------------------------------------ utility bar */

/*
 * THE TWO BARS BLEED, THE CONTENT DOES NOT. Brian's call 2026-08-07.
 *
 * Only the black utility bar and the light header bar run edge to edge. Everything inside them
 * stays on the 1320px rail and re-centres on the VIEWPORT, so the colour is full width and the
 * logo, nav and search are not.
 *
 * This works whether or not the Elementor section is boxed - the negative margins cancel
 * whatever container width it sits in.
 */
.bdo-sh__utility,
.bdo-sh__header {
	margin-left: calc(50% - var(--bdo-sh-vw) / 2);
	margin-right: calc(50% - var(--bdo-sh-vw) / 2);
}

.bdo-sh__utility {
	background: var(--bdo-sh-ink);
	color: var(--bdo-sh-on-dark);
	font-size: 13px;
	overflow: hidden;
	/*
	 * Retracts on scroll. Animating max-height keeps it out of layout when closed.
	 *
	 * THIS VALUE MUST STAY ABOVE THE BAR'S REAL HEIGHT. It was 50px, and when v0.3.2 added
	 * 14px of padding top and bottom the bar became 62px - so `overflow: hidden` quietly CLIPPED
	 * the bottom 12px and the search box sat flush against the edge. It read as missing padding
	 * rather than as a clipped box, which is why it took a screenshot to spot.
	 *
	 * 120px is headroom, not a measurement. Nothing lines up against it, and it only has to be
	 * larger than the content for the open state to look un-clipped.
	 */
	max-height: 120px;
	transition: max-height .3s ease;
}

.bdo-sh.is-scrolled .bdo-sh__utility {
	max-height: 0;
}

/*
 * 12px TOP AND BOTTOM ON MOBILE, up from 8. Brian: *"id like to give a little top and bottom
 * spacing around the input box, it feels a little tight, can we try 4px on each side"*.
 *
 * MOBILE ONLY WITHOUT A NEW MEDIA QUERY. This file is mobile-first and the desktop block already
 * restates this padding at 14px, so raising the base value cannot reach desktop. Adding a
 * max-width query here would have created a second place that decides the same thing.
 *
 * The bar grows 8px overall, which the utility's `max-height: 120px` still clears comfortably -
 * worth checking, because that value HAS clipped this bar before when padding went up.
 */
.bdo-sh__utility-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 12px 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

/*
 * THE BORDER BELONGS TO THE BOX, NOT THE INPUT. Brian, 2026-08-07.
 *
 * The theme was drawing its own border on the <input>, so the line started to the RIGHT of the
 * magnifier and stopped short of the box - it looked like a misaligned outline rather than a
 * search field. Measured: 0.67px solid #666 on the input, and the input was 37.6px tall inside
 * a 34px box, so it overflowed top and bottom too.
 *
 * Killed there and drawn here, around the whole control, icon included.
 */
.bdo-sh__search {
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(255, 255, 255, .09);
	border: 1px solid rgba(255, 255, 255, .18);
	padding: 0 14px;
	height: 34px;
	/* Full width on mobile, a fixed field on desktop. */
	width: 100%;
	/* The results list is measured against this box - see .bdo-sh__results below. */
	position: relative;
}

/* Same grey as the placeholder beside it. fill="currentColor" on the SVG, so one value. */
.bdo-sh__search-icon {
	flex-shrink: 0;
	color: var(--bdo-sh-on-dark-dim);
}

.bdo-sh__search input {
	flex: 1;
	min-width: 0;
	/*
	 * !important on all FOUR: the theme sets a border, a height, a margin AND a padding on
	 * inputs.
	 *
	 * Padding was the one written without it, and it lost silently - measured on the live page,
	 * the input computed to `padding-right: 16px`. That pushed the browser's clear button about
	 * 30px in from the border while the magnifier on the left sat at 14px, which is the lopsided
	 * gap Brian spotted. With this it is 14px on both sides, so the two ends match.
	 */
	border: none !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none;
	outline: none;
	box-shadow: none;
	font-family: inherit;
	font-size: 16px;
	color: var(--bdo-sh-on-dark);
	/* 16px on mobile is deliberate: anything smaller makes iOS zoom the page on focus. */
}

.bdo-sh__search input::placeholder {
	color: var(--bdo-sh-on-dark-dim);
}

/*
 * THE CLEAR BUTTON, WHITE AND BOLD. Brian: *"a blue X on a gray background doesnt work"*.
 *
 * It is the browser's own control, not ours - `input[type="search"]` grows one as soon as there
 * is text in it - and it was picking up a blue that reads badly on the dark field.
 *
 * ITS COLOUR CANNOT BE SET DIRECTLY. The shadow-DOM button is an image, so `color` and `fill` do
 * nothing to it. The only reliable way is to remove it with `appearance: none` and paint our own
 * shape: a mask carries the X, `background-color` carries the white, so the colour lives in one
 * ordinary property that can be changed without touching the SVG.
 *
 * Stroke-width 3.5 on a 24 viewBox is where "bold" comes from, and the round caps stop it
 * reading as a spindly multiplication sign at 14px.
 *
 * WEBKIT ONLY, AND THAT IS FINE. Firefox draws no clear button on a search input at all, so
 * there is nothing there to restyle and nothing that regresses.
 */
.bdo-sh__search input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	width: 14px;
	height: 14px;
	cursor: pointer;
	background-color: #ffffff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6L18 18M18 6L6 18' stroke='black' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6L18 18M18 6L6 18' stroke='black' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ------------------------------------------------------------------ search results
 *
 * Hangs off the search form, which is why the form is position: relative - stated up in the
 * .bdo-sh__search rule rather than repeated here. Sits above the mega panels (z-index 55) and
 * the header itself (60), because a result list that appears behind the thing that opened it is
 * worse than none.
 */

/*
 * FIXED, NOT ABSOLUTE, AND THAT IS THE WHOLE FIX.
 *
 * The results list lives inside .bdo-sh__utility, which carries `overflow: hidden` so the bar
 * can retract on scroll. An absolutely positioned child was therefore CLIPPED by it - the list
 * appeared to hide behind the nav, but it was being cut off, not stacked wrong. Raising
 * z-index alone could never have fixed it, because a clipping ancestor does not care about
 * stacking order.
 *
 * The sticky header is a second obstacle: it sets z-index 60, creating its own stacking
 * context that an ancestor's child cannot climb out of.
 *
 * position: fixed escapes both at once. header.js sets left/top/width from the input's own
 * rect, and refreshes them on scroll and resize.
 */
.bdo-sh__results {
	position: fixed;
	z-index: 200;
	max-height: 60vh;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--bdo-sh-hair-2);
	box-shadow: 0 24px 48px -20px rgba(20, 20, 20, .3);
	text-align: left;
}

.bdo-sh__results[hidden] {
	display: none !important;
}

.bdo-sh__result {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--bdo-sh-hair-3);
	color: var(--bdo-sh-ink) !important;
}

.bdo-sh__result:last-child {
	border-bottom: none;
}

.bdo-sh__result:hover,
.bdo-sh__result:focus {
	background: var(--bdo-sh-canvas);
}

.bdo-sh__result img,
.bdo-sh__result-noimg {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	object-fit: contain;
	background: var(--bdo-sh-canvas);
}

/*
 * KEEP THE PROMO IMAGE VISIBLE ON HOVER, now that the hover layer is gone.
 *
 * This is not tidying, it is the other half of removing it. The loop's own stylesheet does the
 * swap by crossfading two stacked layers:
 *
 *     .bdo-pl-card:hover .bdo-pl-img-hover   { opacity: 1; }
 *     .bdo-pl-card:hover .bdo-pl-img-primary { opacity: 0; }
 *
 * With the hover image stripped out of the header's markup, the second rule still fires and
 * there is nothing underneath - so hovering a promo would fade the image to NOTHING. Scoped to
 * .bdo-sh so category pages keep their swap untouched.
 */
.bdo-sh .bdo-pl-card:hover .bdo-pl-img-primary {
	opacity: 1 !important;
}

/* Team colours, LEADING the row to the left of the thumbnail: one bar, colour 1 stacked over
   colour 2. Same treatment as the Print Visualizer's team list, which is the point.

   `align-self: stretch` makes it exactly as tall as the row's tallest item (the thumbnail)
   without hardcoding a height that would then need a second value on mobile. Painted as one
   gradient, no inner elements. Only --r1 / --r2 come from the row. */
.bdo-sh__result-bars {
	flex: 0 0 auto;
	align-self: stretch;
	width: 14px;
	border-radius: 0 !important;
	/* Split at 50% rather than a pixel value: the height comes from align-self and changes with
	   the thumbnail size, so a percentage needs no mobile override. */
	background-image: linear-gradient(
		to bottom,
		var(--r1, #12161f) 0,
		var(--r1, #12161f) 50%,
		var(--r2, #5b6377) 50%,
		var(--r2, #5b6377) 100%
	);
}

.bdo-sh__result-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

/* Sits UNDER the title, Brian's call - the order is set by the DOM in header.js, not here, so
   this rule only has to carry the type. Kept as the small caps label it already was rather than
   restyled: the only thing that changed is where it sits. */
.bdo-sh__result-kind {
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--bdo-sh-muted);
}

.bdo-sh__result-title {
	font-size: 14px;
	line-height: 1.3;
	/* Two lines maximum. Product titles here run long and would otherwise push the list past
	   the fold on a phone. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* "View all N results" - the last row, only present when the cap actually hid something.

   IT IS A BUTTON, NOT A ROW. Brian 2026-08-08: *"needs to be more visible, right now its at the
   bottom with a regular white row, so we'd want to make that stand out more, maybe a color
   background as well as the >> Font Awesome emoji."*

   It was styled as one more white row in a list of white rows, so the one thing on screen that
   leads somewhere else looked like the least important item. Brand blue and white type make it
   read as the action it is.

   THE BLUE IS THE SITE'S EXISTING CTA COLOUR, not a new one - the same #1f6fec already used for
   the cart hover here and for the homepage's "shop sports stadium artwork" button. A fresh accent
   introduced in a dropdown would be a third blue on one page.

   NO border-top, deliberately. `.bdo-sh__result:last-child` drops its bottom border, but once
   this row exists the last result is no longer the last child - so it keeps that border and
   already draws the separator. */
.bdo-sh__result-all {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 12px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: center;
	background: var(--bdo-sh-brand);
	color: #ffffff !important;
	border-radius: 0 !important;
	transition: background .2s ease;
}

/* Darkened rather than lightened: the row is already the brightest thing in the list, so hover
   has to go the other way to register as a change at all. */
.bdo-sh__result-all:hover,
.bdo-sh__result-all:focus {
	background: #1857c4;
}

/* The chevron travels on hover, the same movement as the promo rows. */
.bdo-sh__result-all i {
	font-size: 12px;
	line-height: 1;
	transition: transform .2s ease;
}

.bdo-sh__result-all:hover i {
	transform: translateX(3px);
}

.bdo-sh__no-results {
	margin: 0;
	padding: 16px 12px;
	font-size: 13.5px;
	color: var(--bdo-sh-muted-3);
}

/* Holds "Login", or "Logout | My Account" when signed in. */
.bdo-sh__account {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	white-space: nowrap;
}

.bdo-sh__account-sep {
	opacity: .45;
}

.bdo-sh__login {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	opacity: .82;
	flex-shrink: 0;
}

.bdo-sh__login:hover {
	opacity: 1;
}

/* The mobile footer holds the same account links; they share the row with Cart. */
.bdo-sh__mobile-foot .bdo-sh__login {
	flex: 1;
	justify-content: center;
	gap: 10px;
	padding: 18px;
	font-size: 15px;
	font-weight: 500;
	opacity: 1;
	border-right: 1px solid var(--bdo-sh-hair-2);
}

.bdo-sh__mobile-foot i {
	font-size: 19px;
	line-height: 1;
}

.bdo-sh__hide-mobile {
	display: none;
}

/* ------------------------------------------------------------------ sticky
 *
 * THE HEADER STICKS ON BOTH DESKTOP AND MOBILE, and this rule is why it actually does.
 *
 * `.bdo-sh__header` has said `position: sticky` since the first build and it never worked once,
 * because STICKY IS BOUNDED BY ITS CONTAINING BLOCK. Measured on the live page: every ancestor
 * from .bdo-sh up through the Elementor column and section is exactly as tall as the header
 * itself, so the element had nothing to travel through - it "stuck" for zero pixels and left with
 * its parent. Nothing about it looked broken in the CSS, which is why it survived this long.
 *
 * The first ancestor with real height is <header class="elementor-location-header">, a direct
 * child of body. So that is the element that has to stick.
 *
 * REACHING OUTSIDE OUR OWN MARKUP IS DELIBERATE AND SCOPED. `:has(.bdo-sh)` means this only ever
 * touches a header location that actually contains this component; a site or template without it
 * is untouched. If :has ever fails to match, the header simply does not stick - the same as
 * before, not something worse.
 *
 * Z-INDEX 100 IS ABOVE EVERYTHING THAT SCROLLS UNDER IT. The theme's own Jet sticky sections
 * compute to 5. The mobile overlay's 999999 and the search results' 200 are INSIDE this stacking
 * context now, which is fine while nothing on the page outranks 100 - and if that ever changes,
 * this is the number to look at first.
 */
body > header.elementor-location-header:has(.bdo-sh) {
	position: sticky;
	top: 0;
	z-index: 100;
}

/*
 * STICK BELOW THE ADMIN BAR, NOT UNDER IT. Brian, signed in: *"scrolling the menu nav bar on
 * desktop kinda gets cut off half way"* - the logo and nav sliced horizontally through the middle.
 *
 * WordPress's admin bar is `position: fixed; top: 0` and 32px tall. A sticky header also pinned to
 * `top: 0` slides underneath it and loses its top 32px. Nobody signed out ever sees this, which is
 * why it took until now to notice.
 *
 * 46px below 782px - the admin bar gets taller on small screens, and that is WordPress's own
 * breakpoint, not one of ours.
 */
body.admin-bar > header.elementor-location-header:has(.bdo-sh) {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar > header.elementor-location-header:has(.bdo-sh) {
		top: 46px;
	}
}

/* ------------------------------------------------------------------ main header */

/*
 * NOT STICKY. THE ANCESTOR IS. Two nested sticky elements both pinned to top: 0 were fighting.
 *
 * This rule carried `position: sticky` from the first build and, as the v0.25.0 note above
 * records, it NEVER STUCK ONCE - every ancestor was exactly as tall as it, so it had zero pixels
 * to travel. It was harmless dead code for that reason.
 *
 * v0.25.0 made `header.elementor-location-header` sticky, which gave this one room to travel for
 * the first time. So a rule that had done nothing for weeks silently came alive, and the two now
 * recalculate against each other every scroll frame. Brian: *"the header bar and black bar where
 * the search is seems jumpy."*
 *
 * The ancestor is the correct element to stick - it is the one with real height. This one only
 * needs its stacking context, so the z-index stays and the sticky goes.
 */
.bdo-sh__header {
	position: relative;
	z-index: 60;
	/*
	 * ITS OWN GPU LAYER, WHICH IS WHAT STOPS THE FLICKER ON A PHONE.
	 *
	 * Brian: *"on mobile the flicker issue is still there on scroll, the main nav bar flickers as
	 * content passes behind it on scroll"*. Not transparency - the frosted glass went in an earlier
	 * version and this bar computes a solid #fafafa. It is a REPAINT artifact: an un-promoted bar
	 * pinned over moving content gets repainted every frame, and Safari tears while it does.
	 *
	 * PUT ON THIS ELEMENT AND NOWHERE ELSE, AND THAT IS THE WHOLE TRAP. `transform` and
	 * `will-change` both make an element a containing block for `position: fixed` DESCENDANTS:
	 *
	 *     .bdo-sh          contains .bdo-sh__mobile, the full-screen overlay - promoting this
	 *                      would pin the overlay to the header instead of the viewport
	 *     .bdo-sh__utility contains .bdo-sh__results, whose left/top header.js sets from the
	 *                      input's VIEWPORT rect - promoting this would land the list somewhere
	 *                      else entirely
	 *
	 * This bar holds neither. The mega panels inside it are `absolute`, which is unaffected.
	 */
	transform: translateZ(0);
	backface-visibility: hidden;
	/*
	 * OPAQUE. THE FROSTED GLASS IS GONE, and it was causing two separate complaints.
	 *
	 * Brian, on a phone: *"the gray bar seems jumpy, but that seems more like the colors of the
	 * graphics behind it, like maybe theres some transparency, this shouldnt happen, nothing
	 * should appear behind the header bar."* Read exactly right - it was `rgba(250,250,250,.86)`
	 * with a `backdrop-filter`, so every image the page scrolled underneath tinted the bar.
	 *
	 * It also cost frames. `backdrop-filter` forces the browser to re-blur whatever is behind the
	 * element on EVERY scroll frame, on a sticky element that spans the viewport - one of the
	 * more reliable ways to make a header stutter on a phone. So this is half of the jumpiness
	 * fix and the two-threshold change in header.js is the other half.
	 *
	 * The design called for frosted glass. It is not worth a header that shimmers over artwork on
	 * a site that is 85%+ mobile, and a solid bar is what Brian asked for.
	 */
	background: var(--bdo-sh-bar);
	border-bottom: 1px solid var(--bdo-sh-hair);
	transition: border-color .3s;
}

.bdo-sh.is-panel-open .bdo-sh__header {
	border-bottom-color: transparent;
}

.bdo-sh__row {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 28px;
	display: flex;
	align-items: center;
	gap: 28px;
	height: var(--bdo-sh-h);
	transition: height .3s ease;
}

.bdo-sh.is-scrolled {
	--bdo-sh-h: 68px;
	--bdo-sh-logo: 42px;
}

/*
 * !important HERE AND ON THE DESKTOP `display: none` (see the media query at the end of this
 * file). Measured on the live page: the theme forces `display: block` on this button and beat the
 * plain rules, so the hamburger was showing on desktop next to the logo. Neither value survived
 * without it, which is why the pair have to stay in step.
 *
 * BIGGER, AND ONE GLYPH INSTEAD OF THREE SPANS. Brian asked for both in the same breath.
 *
 * `text-align: center` rather than the flex centring that used to be here: this is a <button>, and
 * Safari will not make one a flex container (v0.23.3). `inline-flex !important` was in this rule
 * and Safari was quietly ignoring it - the icon only looked centred because a 22px box in a 42px
 * button lands near the middle anyway. A line-height equal to the button height centres it
 * vertically in both engines.
 *
 * 46px matches the close button in the mobile drawer, so the two controls that open and shut the
 * same menu are the same size.
 */
.bdo-sh__burger {
	display: inline-block !important;
	width: 46px;
	height: 46px;
	line-height: 46px;
	text-align: center;
	flex-shrink: 0;
	color: var(--bdo-sh-ink);
}

/*
 * 30px. The old hand-drawn bars were 22px, v0.35.0 took the glyph to 26px, and Brian asked for
 * bigger again. The 46px button is unchanged, so this grows the mark inside its target rather
 * than the target itself - the tap area was already past the 44px minimum.
 */
.bdo-sh__burger .fa-bars {
	font-size: 30px;
	line-height: inherit;
	vertical-align: middle;
}

/* The `.bdo-sh__burger-bars` rules are gone with the spans they drew. */

/* Logo centres itself on mobile, sits left on desktop. */
.bdo-sh__logo {
	display: flex;
	align-items: center;
	flex: 1;
	justify-content: center;
	min-width: 0;
}

/*
 * THE THEME SIZES IMAGES AND IT WINS. Measured live: this logo computed to 500x185 and blew
 * the header apart. !important on both axes, and an explicit max-width so a wide source cannot
 * stretch the row.
 */
.bdo-sh__logo img {
	height: var(--bdo-sh-logo) !important;
	width: auto !important;
	max-width: 100% !important;
	display: block;
	transition: height .3s ease;
}

.bdo-sh__nav {
	display: none;
}

.bdo-sh__actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

/*
 * Bigger and solid. Brian: a lot of his shoppers are older and this is the one control they
 * must never have to hunt for. Started as a 20px outline in a 42px target, went to 24px in 48px.
 *
 * NOW MATCHED TO THE HAMBURGER - 30px glyph, 46px box. Brian: *"we should probably make the cart
 * icon in the header on mobile match the hamburger menu"*. They are the two controls that bookend
 * the mobile bar with the logo between them, so a 24px bag beside a 30px burger read as one of
 * them being wrong rather than as a hierarchy.
 *
 * Kept as flex, unlike the burger: this is an <a>, and the Safari restriction that forced the
 * burger to inline-block only applies to <button>.
 */
.bdo-sh__cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	font-size: 30px;
	line-height: 1;
	color: var(--bdo-sh-ink) !important;
	transition: background .18s;
}

/*
 * The icon changes colour, no box behind it. Brian's call - the grey square the handoff drew
 * read as a button appearing out of nowhere.
 *
 * Brand orange, the one warm colour kept when the rest of the palette went neutral, because
 * here it is doing a job rather than tinting a background.
 */
.bdo-sh__cart:hover,
.bdo-sh__cart:focus-visible {
	background: none;
	color: var(--bdo-sh-brand) !important;
}

/* ------------------------------------------------------------------ mega panels */

/* Hidden entirely below the breakpoint. The mobile drill-down replaces them. */
.bdo-sh__panels {
	display: none;
}

/* ------------------------------------------------------------------ mobile menu */

.bdo-sh__mobile {
	position: fixed;
	inset: 0;
	/*
	 * ABOVE EVERYTHING ON THE PAGE, NOT JUST ABOVE THIS HEADER.
	 *
	 * 200 was picked against this component's own layers - the mega panels at 55 and the sticky
	 * header at 60 - and it lost to the THEME. Photographed on Brian's phone: the old Jet header
	 * painted straight through the open menu, its wrapped two-up nav sitting across our rows, so
	 * the overlay read as broken layout rather than as one element stacked under another.
	 *
	 * Jet's section computes to z-index 5 sitting still, which is why this looked fine on the
	 * desktop page - it is the STUCK state that raises itself, so the bug only appears on a phone
	 * after a scroll. Competing with a number that only exists mid-interaction is not a fight
	 * worth having: a full-screen overlay has no legitimate reason to be under anything.
	 */
	z-index: 999999;
	background: #fff;
	display: flex;
	flex-direction: column;
	animation: bdo-sh-fade .18s ease;
}

/* Its [hidden] rule is in the shared group near the top of this file, with !important. */

@keyframes bdo-sh-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/*
 * THE TOP BAR. White at level 0, black with the sport's accent once drilled in - the treatment
 * that used to sit on "All <sport>" one row below it. Brian's call.
 *
 * It suits this element and not that one: this IS the title of the screen, so an inverted bar
 * reads as a heading. On the row below it read as a heading sitting underneath the actual
 * heading, which is why the two looked like they were competing.
 */
.bdo-sh__mobile-top {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--bdo-sh-hair-2);
	flex-shrink: 0;
	position: relative;
	transition: background .2s ease, color .2s ease;
}

/*
 * THE DRILLED TITLE BAR IS THE CATEGORY'S OWN COLOUR, NOT BLACK. Brian: *"instead of black
 * background bar at the top, match the color to the category color in the category grid or
 * desktop nav (green for baseball, etc) match the hex color exact"*.
 *
 * IT IS ALREADY EXACT WITHOUT A NEW VALUE BEING TYPED ANYWHERE. `--bdo-sh-drill` is set by
 * header.js from the tapped row's own colour bar, which is printed from the nav array, which was
 * copied from bdo-category-grid's CATS map. So the green here IS the green on the category tile
 * and the desktop hover accent - one value, three places, no chance of drift.
 *
 * Black stays as the fallback for the same reason the bar was transparent at level 0: if the
 * variable is ever unset, the bar looks deliberate rather than broken.
 *
 * WORTH KNOWING: white type is strong on baseball, football, college and coasters, and thinner on
 * hockey (#68a8dd) and basketball (#f78138), which are light. Brian asked for the exact hexes, so
 * they are the exact hexes.
 */
.bdo-sh__mobile.is-drilled .bdo-sh__mobile-top {
	background: var(--bdo-sh-drill, var(--bdo-sh-ink));
	color: #fff;
	border-bottom-color: var(--bdo-sh-drill, var(--bdo-sh-ink));
}

/*
 * The accent, painted from --bdo-sh-drill which header.js reads off the tapped row.
 *
 * ALWAYS RENDERED, never toggled: at level 0 the variable is unset and the fallback is
 * transparent, so the same markup covers both states. A rule that has to be added and removed is
 * a rule that gets left behind.
 *
 * ONCE DRILLED IT IS INVISIBLE - the bar behind it is now the same colour - and it stays anyway.
 * It still holds its 4px plus the gap, so the chevron and the title sit in the same place on both
 * levels instead of jumping left on drill-in.
 *
 * inline-block, because the button that holds it is a block. See the note on .bdo-sh__back.
 */
.bdo-sh__mobile-bar {
	display: inline-block;
	vertical-align: middle;
	width: 4px;
	height: 22px;
	background: var(--bdo-sh-drill, transparent);
	transition: background .2s ease;
}

/*
 * THE BACK CONTROL IS THE WHOLE LEFT SIDE OF THE BAR - accent, arrow and title in one button.
 * See the note in the shortcode: a 46px chevron chip gave no clue the bar was tappable, and the
 * title next to it was the obvious target and did nothing.
 *
 * `flex: 1` makes it take everything the close button leaves, so the dead zone between the title
 * and the X is part of the target rather than a gap that swallows taps. That property still
 * applies - this button is a flex ITEM of .bdo-sh__mobile-top even though it is not a flex
 * CONTAINER itself, which is the distinction the next note is about.
 *
 * A BLOCK WITH INLINE CHILDREN, NOT A FLEX ROW, AND BOTH HALVES OF THAT ARE DELIBERATE.
 *
 * Brian: *"youre rendering it center of the category name it should be far left"* - the chevron
 * was landing dead centre, printed straight through the middle of "Baseball Stadiums".
 *
 * MEASURED, NOT GUESSED. On the live page this button computes `display: block` - the theme's
 * button rules beat ours, the same fight v0.30.0 documented. So `display: flex` never applied,
 * `justify-content: flex-start` was styling nothing, and the theme's `text-align: center` was
 * free to centre the glyph inside a 360px button.
 *
 * FLEX IS NOT THE FIX. Safari refuses to make a <button> a flex container at all (v0.23.3), so
 * winning the specificity fight would have fixed Chrome and left the phone exactly as it is - on
 * a site that is 85%+ mobile, the wrong half to fix.
 *
 * A block with inline children behaves identically in both, needs no inner wrapper, and lines up
 * with `vertical-align: middle` instead of `align-items`. The title is absolutely centred when
 * drilled, so the only things left in flow here are the accent bar and the chevron.
 *
 * !important ON BOTH because the theme states them too and this file's order is what decides.
 */
.bdo-sh__back {
	flex: 1;
	min-width: 0;
	display: block !important;
	text-align: left !important;
	padding: 0;
	background: none;
	/* Inherited by the icon glyph, which is currentColor - see the shortcode. */
	color: var(--bdo-sh-ink);
}

/*
 * At level 0 there is nowhere to go back to. The button is disabled rather than hidden, because
 * it carries the title - so it has to stop LOOKING pressable without dimming the words.
 */
.bdo-sh__back[disabled] {
	cursor: default;
	opacity: 1;
}

.bdo-sh__back[disabled] .bdo-sh__back-chev {
	display: none;
}

/*
 * Now a Font Awesome glyph rather than an inline SVG, so it is sized in type terms. 20px matches
 * the height the 20x20 SVG occupied, and `line-height: 1` stops the icon font adding leading that
 * would push it off the title's centre line.
 */
.bdo-sh__back-chev {
	display: inline-block;
	vertical-align: middle;
	/* The gap the flex `gap` used to give, now that the row is not a flex row. */
	margin-left: 10px;
	font-size: 20px;
	line-height: 1;
}

/*
 * These re-declare what the blanket button reset above stripped. !important on both sides, so the
 * order of this file is what decides, not a specificity race with the theme.
 */
.bdo-sh__close {
	width: 46px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--bdo-sh-hair-3) !important;
	flex-shrink: 0;
	color: var(--bdo-sh-ink) !important;
}

/* On the black bar the grey chip would read as a smudge. Let the bar show through instead. */
.bdo-sh__mobile.is-drilled .bdo-sh__back,
.bdo-sh__mobile.is-drilled .bdo-sh__close {
	background-color: transparent !important;
	color: #fff !important;
}

/* Tap feedback for a control that now spans most of the bar and has no background of its own. */
.bdo-sh__mobile.is-drilled .bdo-sh__back:active {
	background-color: #2b2b2b !important;
}

/* The drill rows keep their own grey tap wash, which the reset above would otherwise remove. */
.bdo-sh__row-item:active,
.bdo-sh__row-item--btn:active {
	background-color: #f0f0f0 !important;
}

/* The `.bdo-sh__back[hidden]` rule is gone: the back control carries the title now, so it is
   never hidden - it is disabled at level 0. Hiding it would take the title with it. */

.bdo-sh__mobile-title {
	/* No `flex: 1` any more - it is inside the back button, which does the stretching. */
	display: inline-block;
	vertical-align: middle;
	/* Level 0 only: the gap after the accent bar, where there is no chevron to provide one. */
	margin-left: 10px;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * DRILLED: ARROW HARD LEFT, CATEGORY NAME CENTRED IN THE BAR, AND BOTH STILL ONE BACK BUTTON.
 * Brian: *"make the << and the category name one large clickable back area and the X closes it"*.
 *
 * CENTRED AGAINST THE BAR, NOT THE BUTTON. Centring it inside the button would land it half the
 * X's width to the left of true centre - close enough to look like a mistake rather than a
 * decision. Absolute positioning against `.bdo-sh__mobile-top`, which is already
 * `position: relative`, puts it dead centre no matter what sits either side of it.
 *
 * `pointer-events: none` IS WHAT KEEPS IT ONE TARGET. Taking the title out of the flow lifts it
 * off the button it belongs to; without this, tapping the words would hit the label instead of
 * the button underneath and the biggest thing on the bar would do nothing - which is the exact
 * bug the one-button design was built to fix.
 *
 * The 60px insets clear the arrow on one side and the X on the other, so a long name ellipses
 * rather than running under either control.
 */
.bdo-sh__mobile.is-drilled .bdo-sh__mobile-title {
	position: absolute;
	left: 60px;
	right: 60px;
	/* The level-0 gap would push a centred title 10px off centre. */
	margin-left: 0;
	text-align: center;
	pointer-events: none;
}

.bdo-sh__mobile-body {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}

/* One level visible at a time, on a sliding track. */
.bdo-sh__track {
	width: 200%;
	display: flex;
	transition: transform .28s cubic-bezier(.4, 0, .2, 1);
	transform: translateX(0);
}

.bdo-sh__mobile.is-drilled .bdo-sh__track {
	transform: translateX(-50%);
}

.bdo-sh__level {
	width: 50%;
	flex-shrink: 0;
}

.bdo-sh__row-item {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--bdo-sh-hair-3);
	font-size: 16px;
	font-weight: 500;
	color: var(--bdo-sh-ink) !important;
	text-align: left;
}

/*
 * SAFARI WILL NOT MAKE A <button> A FLEX CONTAINER, so the drill rows lay themselves out one
 * level in, inside .bdo-sh__row-inner. See the note in the shortcode - this broke every sport row
 * on Brian's phone while looking correct in desktop Chrome. The padding moves inside with the
 * flex, so the tap target is unchanged and the two row types still measure the same.
 *
 * !important, AND THIS IS THE WHOLE BUG BRIAN REPORTED THREE TIMES.
 *
 * Measured on the live page, not guessed - the drill button computed to:
 *
 *     display: inline-block        our `display: block` lost
 *     width:   278.53px            our `width: 100%` lost, so it shrink-wrapped
 *     margin-left on the chevron: 0px   our `margin-left: auto` lost
 *
 * while the ANCHOR rows beside them measured the full 2235px. That difference is the tell: the
 * theme styles bare `button`, at class-plus-element specificity, which outranks a single class of
 * ours. Anchors were never in that fight.
 *
 * All three of Brian's complaints were this one thing:
 *
 *   "theres still clear red default theme on clicks"   the tap highlight was drawing the button's
 *                                                      REAL shape, which was 73% of the row
 *   "not full width clickable on top level categories" the button was shrink-wrapped
 *   "the arrows are still staggered"                   each chevron sat at the end of its own
 *                                                      button's content, so every row differed
 *
 * The red was never a colour to override. It was the correct highlight on a wrongly-sized box.
 *
 * This file already had the same fight over inputs - see the search field, "!important on all
 * four: the theme sets a border, a height, a margin AND a padding". Buttons needed it too.
 */
.bdo-sh__row-item--btn {
	display: block !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-bottom: 1px solid var(--bdo-sh-hair-3) !important;
	background: none !important;
	text-align: left !important;
}

/* `display: flex`, `width: 100%` and `text-align` come from the shared row rule near the top of
   this file. Only the spacing is particular to this element. */
.bdo-sh__row-inner {
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
}

.bdo-sh__row-bar {
	width: 4px;
	height: 22px;
	flex-shrink: 0;
}

.bdo-sh__row-emoji {
	width: 30px;
	font-size: 20px;
	line-height: 1;
	flex-shrink: 0;
}

.bdo-sh__row-label {
	flex: 1;
	min-width: 0;
}

/*
 * THE CHEVRONS LINE UP IN ONE COLUMN. Brian: *"because category widths are not the same the
 * arrows look staggered, so lets put the arrows in a consistent vertical visual space."*
 *
 * `margin-left: auto` pins it to the row's right edge no matter what the label does. It was
 * relying on the label's `flex: 1` to push it there, which is the same result only while every
 * ancestor stays a flex container - and Safari's refusal to flex a `<button>` had already broken
 * that once. This does not depend on it.
 *
 * The fixed width means the arrow occupies the same column whether or not a row has one.
 */
/* Duplicate of this rule removed - there were two, and the second reset nothing but added noise. */
.bdo-sh__row-chev {
	margin-left: auto !important;
	flex-shrink: 0;
	width: 18px;
}

/* Its [hidden] rule is in the shared group near the top of this file, with !important. */

/*
 * `.bdo-sh__sub-all` HAS NO RULE ANY MORE, and that is the change rather than an omission. The
 * "All <sport>" row renders with `.bdo-sh__sub-link` now, so it IS a division row - there is
 * nothing left to keep in step with them. Its black-fill-plus-accent treatment moved up to
 * `.bdo-sh__mobile-top`, which is the title of the screen and the thing that treatment suited.
 */
.bdo-sh__sub-link {
	display: flex;
	align-items: center;
	padding: 16px 18px 16px 36px;
	border-bottom: 1px solid var(--bdo-sh-hair-3);
	font-size: 16px;
	color: var(--bdo-sh-panel-link) !important;
}

.bdo-sh__mobile-foot {
	display: flex;
	border-top: 1px solid var(--bdo-sh-hair-2);
	flex-shrink: 0;
}

.bdo-sh__mobile-foot a {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 18px;
	font-size: 15px;
	font-weight: 500;
}

.bdo-sh__mobile-foot a:first-child {
	border-right: 1px solid var(--bdo-sh-hair-2);
}

/* ================================================================== DESKTOP
 *
 * Single breakpoint at 1000px, from the handoff. Above it: horizontal nav with hover
 * mega-panels, search as a fixed field, Login in the black bar.
 */
@media (min-width: 1001px) {

	.bdo-sh__burger {
		display: none !important;
	}

	/*
	 * The cart keeps the size it has always had up here. It grew on mobile to match the hamburger,
	 * and there is no hamburger on desktop to match - so growing it here too would be a change to
	 * a bar nobody asked to change.
	 */
	.bdo-sh__cart {
		width: 48px;
		height: 48px;
		font-size: 24px;
	}

	.bdo-sh__hide-mobile {
		display: inline-flex;
	}

	/*
	 * More air above and below the search box. Brian: it looked "so tight in the black bar".
	 * Desktop only - on mobile this bar sits above the fold on a site that is 85%+ phones, and
	 * padding here pushes everything below it down the page.
	 */
	.bdo-sh__utility-inner {
		padding-top: 14px;
		padding-bottom: 14px;
	}

	.bdo-sh__search {
		width: 420px;
		max-width: 46vw;
	}

	.bdo-sh__search input {
		font-size: 13.5px;
	}

	/*
	 * BIGGER LOGO ON DESKTOP ONLY. Brian: "i dont want it to flush the edges at all but if
	 * theres room to make it a little bigger on desktop lets do it."
	 *
	 * 60 -> 70 inside a 92px bar leaves 11px of air above and below, and 42 -> 48 inside the
	 * 68px condensed bar leaves 10px. Both stay clear of the edges, and the two states keep
	 * roughly the same proportion so the shrink on scroll still reads as one movement.
	 *
	 * Mobile is untouched at 60px. The phone bar is the same height but the logo is centred
	 * between a hamburger and a cart, so height is not what constrains it there.
	 */
	.bdo-sh {
		--bdo-sh-logo: 70px;
	}

	.bdo-sh.is-scrolled {
		--bdo-sh-logo: 48px;
	}

	.bdo-sh__logo {
		flex: 0 0 auto;
		justify-content: flex-start;
	}

	.bdo-sh__nav {
		display: flex;
		align-items: center;
		margin: 0 auto;
		height: 100%;
	}

	.bdo-sh__nav ul {
		display: flex;
		align-items: center;
		gap: 2px;
		height: 100%;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.bdo-sh__nav-item {
		height: 100%;
	}

	.bdo-sh__nav-item > a {
		display: inline-flex;
		align-items: center;
		height: 100%;
		padding: 0 15px;
		white-space: nowrap;
		font-size: 15px;
		font-weight: 500;
		color: var(--bdo-sh-nav) !important;
		transition: color .18s;
	}

	/* The 2px accent sits directly above the label, transparent until hover. */
	.bdo-sh__nav-label {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		border-top: 2px solid transparent;
		padding-top: 5px;
		transition: border-color .18s;
	}

	.bdo-sh__caret {
		font-size: 10px;
		color: var(--bdo-sh-ink);
		transition: transform .2s, color .18s;
	}

	.bdo-sh__nav-item.is-active > a {
		color: var(--bdo-sh-nav-hover) !important;
	}

	/*
	 * NO !important HERE, AND THAT IS THE CORRECTION.
	 *
	 * This rule was briefly "proved" broken and given !important. It was never broken. The
	 * measurement was: read borderTopColor after adding .is-active, get rgba(0,0,0,0), even
	 * with an INLINE `border-top-color: red !important` - which nothing in the cascade can
	 * override, so it looked like a fifth theme collision.
	 *
	 * The real cause was the MEASURING TAB, not the CSS. It reported document.hidden === true,
	 * and a hidden tab does not advance CSS transitions - so `transition: border-color .18s`
	 * meant every read returned the PRE-transition value forever. Setting `transition: none`
	 * first returned rgb(116,161,103), i.e. #74a167, correct all along.
	 *
	 * When checking any transitioned property from an automated tab, kill the transition first.
	 */
	.bdo-sh__nav-item.is-active .bdo-sh__nav-label {
		border-top-color: var(--bdo-sh-accent);
	}

	.bdo-sh__nav-item.is-active .bdo-sh__caret {
		color: var(--bdo-sh-accent);
		transform: rotate(180deg);
	}

	.bdo-sh__actions {
		margin-left: auto;
	}

	/* --- the panel --- */

	.bdo-sh__panels {
		display: block;
	}

	/*
	 * THE PANEL BLEEDS TOO, as of 2026-08-07. Brian reversed his earlier call once he saw it:
	 * "you can make the category hover overlays full width."
	 *
	 * Its header is already full-bleed, so left:0/right:0 is all it takes. The INNER grid keeps
	 * its 1320px rail, so the white runs edge to edge while the links stay lined up under the
	 * nav above them.
	 */
	.bdo-sh__panel {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		z-index: 55;
		background: #fff;
		border-top: 2px solid var(--bdo-sh-accent);
		box-shadow: 0 30px 60px -24px rgba(20, 20, 20, .28);
		animation: bdo-sh-panel .22s ease;
	}

	/* Its [hidden] rule is in the shared group near the top of this file, with !important. */

	@keyframes bdo-sh-panel {
		from { opacity: 0; transform: translateY(-8px); }
		to   { opacity: 1; transform: translateY(0); }
	}

	.bdo-sh__panel-inner {
		/*
		 * THE PANEL CONTENT SITS EXACTLY UNDER THE NAV. Brian, 2026-08-07: "id love to try to
		 * get the overlay content within the red lines so they fall within the categories
		 * invisible boundaries."
		 *
		 * Not a rail width at all, but the nav's own left edge and width, measured in the
		 * browser by header.js and published as these two variables. The white space under the
		 * hovered category was the whole complaint, and no promo layout was ever going to fix
		 * it - the content was centred on the page while the categories sat left of centre.
		 *
		 * The fallbacks are the old 1000px centred rail, used below the breakpoint where the
		 * nav is display:none and before the script has measured.
		 */
		/*
		 * 15% WIDER THAN THE NAV, GROWING RIGHT ONLY. Brian 2026-08-08: *"can we widen the
		 * content area just to give the elements a little space? i am thinking 10-20%?"*
		 *
		 * The LEFT edge stays pinned to the nav's left edge, which is the alignment he asked for
		 * originally and the one that is actually visible - the panel content lines up under the
		 * hovered category. Growing symmetrically would have moved that edge left and undone it,
		 * for space that is already empty on the right.
		 *
		 * The max-width is not belt and braces. The rail sits well right of the viewport's left
		 * edge, so `100%` of the panel is NOT the room available - a 15% overshoot past the nav
		 * would push the content off the right of the screen on a narrow desktop. Subtracting the
		 * left offset and a 28px gutter caps it at what is genuinely there, matching the gutter
		 * the header row already uses.
		 */
		width: calc(var(--bdo-sh-rail-w, 1000px) * 1.15);
		max-width: calc(100% - var(--bdo-sh-rail-left, 0px) - 28px);
		margin: 0 0 0 var(--bdo-sh-rail-left, auto);
		/*
		 * TOP PADDING 40px -> 22px. Brian 2026-08-08: *"we need to move the overlay content up a
		 * little so theres not so much top spacing, id rather do that than make the overlay
		 * taller."*
		 *
		 * So the panel gets SHORTER by 18px rather than the content getting more room - which is
		 * the same instinct as capping the promo column earlier: the panel's height is the thing
		 * being protected, because it is what drops over the page on hover.
		 *
		 * The bottom stays at 34px. It is not symmetrical on purpose - the last thing in the left
		 * column is "View all", which carries its own descender space, so matching the top would
		 * read as too tight underneath.
		 */
		padding: 22px 0 34px;
		display: grid;
		/*
		 * Was 1.15fr .85fr, when the right side held one small feature card.
		 *
		 * The cards are now CAPPED rather than given a share of the width. At full width they
		 * rendered 322px wide with a 321px square image, which made the panel 538px tall - a
		 * third of it empty space under "view all". Capping the column at 560px puts them near
		 * 270px each and takes about 80px off the panel.
		 *
		 * Brian authorised the shrink: "so long as you retain the aspect ratio for all
		 * elements". Nothing here sets a ratio - the loop's own cards are fluid, so a narrower
		 * column shrinks them proportionally on its own.
		 */
		/*
		 * The rail is now the nav's width, about 655px, so the 64px gutter that suited a
		 * 1000-1320px panel would eat a tenth of it. Divisions take what they need, the cards
		 * take the rest.
		 */
		grid-template-columns: auto minmax(0, 376px);
		gap: 32px;
	}

	/*
	 * "View all" sits at the BOTTOM of its column, not directly under the links.
	 *
	 * Brian: "id probably like the bottom of the overlay to fall just below the VIEW ALL
	 * CATEGORY". Aligning the panel edge to it exactly is not possible - the cards would have to
	 * come down to an 81px image, which is uselessly small. What he is actually seeing is the
	 * dead space AFTER it, so the link drops to the bottom of the column and the panel closes
	 * just below both columns at once.
	 *
	 * margin-top: auto keeps the 26px as a floor when the column is short.
	 */
	.bdo-sh__panel-main {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	/*
	 * SHARED BY THE DIVISIONS HEADING AND THE PROMOS HEADING, so the two columns cannot drift
	 * apart. The promo one adds .bdo-sh__panel-title--plain to drop the accent dot's spacing.
	 *
	 * NOT UPPERCASED. Brian 2026-08-08: *"dont ALL caps the Category like 'Football Divisions'
	 * NOT 'FOOTBALL DIVISIONS'."* The letter-spacing goes with it - .14em was there to keep
	 * all-caps readable, and on sentence case it just looks stretched.
	 */
	.bdo-sh__panel-title {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 22px;
		font-size: 13px;
		font-weight: 600;
		letter-spacing: .02em;
		color: var(--bdo-sh-muted);
	}

	/*
	 * The promos heading has no accent dot, so it needs the 22px baseline the divisions heading
	 * gets from its own line-height. Set explicitly rather than left to chance, so the two column
	 * headings sit on the same line as each other.
	 */
	.bdo-sh__panel-title--plain {
		min-height: 9px;
	}

	.bdo-sh__panel-dot {
		width: 9px;
		height: 9px;
		background: var(--bdo-sh-accent);
		flex-shrink: 0;
	}

	.bdo-sh__panel-links {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2px 40px;
		/* The gap to "View all" underneath. Was a second .bdo-sh__panel-links rule 40 lines up. */
		margin-bottom: 26px;
	}

	/*
	 * Fill the first column top to bottom, then start the second. Basketball only, where three
	 * divisions across rows would read Atlantic, Pacific / Central.
	 *
	 * grid-template-rows is set from the count so the split lands where it should: with 3 items
	 * and 2 rows, the third wraps into column two.
	 */
	.bdo-sh__panel-links.is-flow-down {
		grid-auto-flow: column;
		grid-template-rows: repeat(2, auto);
	}

	.bdo-sh__panel-links a {
		display: inline-block;
		width: fit-content;
		padding: 9px 0;
		font-size: 17px;
		font-weight: 500;
		color: var(--bdo-sh-panel-link) !important;
	}

	.bdo-sh__panel-all {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		margin-top: auto;
		font-size: 14px;
		font-weight: 600;
		letter-spacing: .04em;
		text-transform: uppercase;
		color: var(--bdo-sh-accent) !important;
	}

	/* The chevron inherits the sport accent from the link, so it needs no colour of its own. */
	.bdo-sh__panel-all i {
		font-size: 13px;
		line-height: 1;
	}

	/* The "Featured" eyebrow was removed in v0.6.4; its rule went with it. */

	/*
	 * THE PRODUCT CARDS INSIDE THE PANEL.
	 *
	 * EVERY RULE HERE IS SCOPED UNDER .bdo-sh AND NOTHING TOUCHES bdo-product-loop.css.
	 * Brian, explicitly: "i am refering ONLY to the header category overlays, DO NOT change any
	 * sizing on product loop anywhere else." The cards on category pages, product pages and the
	 * cart must be completely unaffected by anything in this file.
	 *
	 * The cards are FLUID, so they size themselves to whatever column they are given and keep
	 * their own aspect ratios while doing it - which is the requirement. Nothing here sets a
	 * card width, an image height or a ratio; it only decides how much room the column gets.
	 */
	/*
	 * COMPACT ROWS, NOT CARDS. Brian's call 2026-08-08, to Claude Design's "1c Compact row".
	 *
	 * Two promo CARDS became two horizontal ROWS: thumbnail, bold stadium, one grey line of team
	 * and city, a chevron at the right, hairline between them.
	 *
	 * THE MARKUP DID NOT CHANGE, AND DID NOT NEED TO. The loop's card already emits every piece
	 * this design needs - .bdo-pl-media, -stadium, -team, -city - just stacked vertically and
	 * centred. So this is entirely a restyle of markup the header already renders. No new
	 * template, no PHP, and nothing added to bdo-product-loop.
	 *
	 * STILL SCOPED UNDER .bdo-sh, and that is Brian's standing condition: "i am refering ONLY to
	 * the header category overlays, DO NOT change any sizing on product loop anywhere else."
	 * Category pages, product pages and the cart keep the cards exactly as they are.
	 *
	 * WHAT WAS DELETED WITH THIS. The .bdo-sh__feature-card / -img / -title / -sub / -cta rules
	 * that lived here were dead - a comment above them claimed the horizontal promo variant had
	 * been "deleted rather than left behind as dead switchable code", but only the markup went.
	 * The CSS had been styling elements that stopped rendering on 2026-08-07.
	 */
	.bdo-sh__feature .bdo-pl-grid {
		/* One column: the rows stack. The loop's own --cols vars are overridden, not removed. */
		grid-template-columns: 1fr !important;
		gap: 0;
	}

	/*
	 * The row itself. The loop's card is a bordered white box with a team-coloured accent bar on
	 * top; the design asks for none of that, so the box is dropped to a plain row and only the
	 * bottom hairline is kept as the separator.
	 */
	.bdo-sh__feature .bdo-pl-card {
		flex-direction: row;
		align-items: center;
		gap: 16px;
		/*
		 * PADDED LEFT, THEN PULLED BACK BY THE SAME AMOUNT. Brian: *"the left is also flush
		 * against the edge, id like some thumbnail left spacing. its only noticeable on hover."*
		 *
		 * Padding alone would have indented the thumbnail 12px from "Featured Products" above it,
		 * trading one misalignment for another. The negative margin cancels that, so the
		 * thumbnail stays exactly where it is and only the HOVER TINT grows leftward - which is
		 * the only thing that was ever flush.
		 *
		 * Left only. The right side already has its distance, and padding there would move the
		 * chevron, which is positioned against this box's edge.
		 */
		padding: 14px 0 14px 12px;
		margin-left: -12px;
		background: none;
		border: 0;
		border-bottom: 1px solid var(--bdo-sh-hair-2);
		position: relative;
	}

	/*
	 * The loop lifts a card on hover with translateY and a shadow. That reads as a card picking
	 * itself up off the page, which is wrong for a flush row - it would jump against the hairline
	 * above it. A background tint instead, the same one the search result rows use, so the two
	 * lists in this header behave alike.
	 */
	.bdo-sh__feature .bdo-pl-card:hover {
		transform: none;
		box-shadow: none;
		background: var(--bdo-sh-canvas);
	}

	/*
	 * 72px square. Deliberately NOT a new image size - the file is still the 300x300
	 * woocommerce_thumbnail, which is the same URL the category page loop requests, so arriving
	 * from /nfl-football/ makes this a cache hit. See trim_loop_html().
	 *
	 * The `sizes="150px"` that trim_loop_html writes STAYS AT 150 and must not be dropped to 72
	 * to "match". 150 is what pins both 1x and 2x onto the 300 file: at 72px a 1x browser would
	 * ask for 72, and the smallest candidate at or above that is the 100x100 - a different URL,
	 * which throws the cache sharing away for a file that is barely smaller.
	 */
	.bdo-sh__feature .bdo-pl-media {
		flex: 0 0 auto;
		width: 72px;
		height: 72px;
		aspect-ratio: auto;
	}

	.bdo-sh__feature .bdo-pl-body {
		flex: 1 1 auto;
		min-width: 0;
		padding: 0;
		text-align: left;
		/* Room for the chevron and the space it now keeps from the edge. */
		padding-right: 36px;
	}

	/* No eyebrow on a row - "FEATURED FOOTBALL ART" above the list already says what these are. */
	.bdo-sh__feature .bdo-pl-type {
		display: none;
	}

	.bdo-sh__feature .bdo-pl-stadium {
		font-size: 15px;
		font-weight: 700;
		line-height: 1.3;
	}

	/*
	 * Team and city on ONE line, separated by a middle dot - the same separator the search
	 * results use, so a stadium reads identically in both places.
	 *
	 * They are two block-level spans in the loop's markup, so they are turned inline here and the
	 * dot is drawn by the city's ::before rather than being typed into the PHP. That way a
	 * product with a team and no city, or a city and no team, cannot render a dangling separator.
	 */
	.bdo-sh__feature .bdo-pl-team,
	.bdo-sh__feature .bdo-pl-city {
		display: inline;
		font-size: 12.5px;
		color: var(--bdo-sh-muted-3);
		margin: 0;
	}

	.bdo-sh__feature .bdo-pl-team + .bdo-pl-city::before {
		content: " · ";
	}

	/*
	 * fas fa-angle-double-right, the same glyph as "view all" and the promo bar. Brian's standing
	 * call: a plain text arrow "looks like basic Claude Code". Design's mock drew a single thin
	 * chevron; this is the site's own icon instead.
	 *
	 * Drawn as a ::after on the card rather than added to the markup, because the markup belongs
	 * to the product loop and must not gain header-only elements.
	 */
	.bdo-sh__feature .bdo-pl-card::after {
		content: "\f101";
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		position: absolute;
		/*
		 * IT KEEPS ITS DISTANCE FROM THE EDGE, hovered or not. Brian: *"see how the >> is flush
		 * against the edge on hover since the background color changes? there should be some
		 * space to the right of the >>."*
		 *
		 * The first version animated 2px -> 0, so hovering pushed the glyph INTO the edge. That
		 * was invisible while the row had no background, and the moment the hover tint arrived it
		 * read as a chevron falling off the row. The nudge is kept - it is what makes the row feel
		 * like it goes somewhere - but it now runs 14px -> 10px, so there is air on both sides of
		 * the movement.
		 */
		right: 14px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 13px;
		color: var(--bdo-sh-muted-2);
		transition: color .2s ease, right .2s ease;
	}

	.bdo-sh__feature .bdo-pl-card:hover::after {
		color: var(--bdo-sh-ink);
		right: 10px;
	}

	/* The overlay is mobile-only. Never let it open above the breakpoint. */
	.bdo-sh__mobile {
		display: none !important;
	}
}