/*!
 * Bollard Boys Site — chrome: skip link, utility bar, masthead + mega-menu, mobile drawer, footer.
 *
 * Ported from SiteHeader / UtilityBar / SiteFooter (.module.css) in the reference build.
 * Every selector starts with `body.bbs-active` + a scope root, per bbs-tokens.css. The one
 * exception is the skip link, which is a top-level sibling outside every scope root; it is
 * written as `body.bbs-active a.bbs-skiplink` (0,2,2) so it still beats the Elementor kit.
 *
 * Link colours: the scoped base in bbs-tokens.css gives every `a:hover` the accent at (0,3,2).
 * Each link class below therefore declares its own :hover (0,4,1), so dark-surface links never
 * inherit the light-surface accent hover.
 *
 * Translucent darks: rgba() first as the fallback for browsers without color-mix(), then the
 * token-based color-mix() declaration, which wins wherever it is supported.
 *
 * Type floor: no size below 12px (--bbs-fs-meta). Where a mono/uppercase label was raised to it,
 * its letter-spacing came down so the line keeps its length (a mono glyph is 0.6em wide).
 */

/* =========================================================================
   Skip link
   ========================================================================= */

body.bbs-active a.bbs-skiplink {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100001; /* above the WP admin bar (99999) and the drawer */
	transform: translateY(-120%);
	margin: 0;
	padding: 14px 20px;
	background: var(--bbs-navy);
	color: var(--bbs-surface);
	font-family: var(--bbs-font-mono);
	font-size: var(--bbs-fs-meta, 12px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

body.bbs-active a.bbs-skiplink:focus,
body.bbs-active a.bbs-skiplink:hover {
	transform: none;
	color: var(--bbs-surface);
	background: var(--bbs-navy);
	outline: 2px solid var(--bbs-surface);
	outline-offset: -6px;
}

/* =========================================================================
   Utility bar
   ========================================================================= */

body.bbs-active .bbs-utility {
	position: relative;
	margin: 0;
	background: var(--bbs-navy);
	color: var(--bbs-surface);
}

body.bbs-active .bbs-utility .bbs-utility__inner {
	max-width: var(--bbs-content-max);
	min-height: 40px;
	margin: 0 auto;
	padding: 0 var(--bbs-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 6px 24px;
	font-family: var(--bbs-font-mono);
	font-size: var(--bbs-fs-meta, 12px);
	line-height: 1.35;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

body.bbs-active .bbs-utility .bbs-utility__lead {
	color: var(--bbs-surface);
}

body.bbs-active .bbs-utility .bbs-utility__right {
	display: flex;
	align-items: center;
	gap: 24px;
}

body.bbs-active .bbs-utility .bbs-utility__freight {
	color: var(--bbs-blue-100);
}

body.bbs-active .bbs-utility .bbs-utility__wholesale {
	position: relative;
	color: var(--bbs-surface);
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	white-space: nowrap;
}

/* Invisible hit-area extension: 16px of text + 24px = a 40px target on the 40px bar. */
body.bbs-active .bbs-utility .bbs-utility__wholesale::after {
	content: "";
	position: absolute;
	inset: -12px 0;
}

body.bbs-active .bbs-utility .bbs-utility__wholesale:hover {
	color: var(--bbs-surface);
	border-bottom-color: var(--bbs-surface);
}

/* =========================================================================
   Masthead
   ========================================================================= */

body.bbs-active .bbs-masthead {
	position: sticky;
	top: var(--bbs-adminbar);
	z-index: 50;
	margin: 0;
	padding: 0;
	background: rgba(10, 14, 19, 0.92);
	background: color-mix(in srgb, var(--bbs-dark) 92%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	color: var(--bbs-surface);
}

body.bbs-active .bbs-masthead .bbs-masthead__inner {
	max-width: var(--bbs-content-max);
	height: var(--bbs-header-h);
	margin: 0 auto;
	padding: 0 var(--bbs-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}

body.bbs-active .bbs-masthead .bbs-masthead__brand {
	display: flex;
	align-items: center;
	flex: none;
	gap: 14px;
	min-height: 44px;
	color: var(--bbs-surface);
}

body.bbs-active .bbs-masthead .bbs-masthead__brand:hover {
	color: var(--bbs-surface);
}

/* The PNG has no alpha channel: invert + screen knocks its white ground out on the dark bar. */
body.bbs-active .bbs-masthead .bbs-masthead__monogram {
	display: block;
	width: auto;
	max-width: none;
	height: 40px;
	filter: invert(1);
	mix-blend-mode: screen;
	transform: rotate(-0.45deg);
}

body.bbs-active .bbs-masthead .bbs-masthead__wordmark {
	font-family: var(--bbs-font-display);
	font-weight: 800;
	font-size: 18px;
	line-height: 1;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--bbs-surface);
}

body.bbs-active .bbs-masthead .bbs-masthead__nav {
	display: flex;
	align-items: center;
	gap: 38px;
}

body.bbs-active .bbs-masthead .bbs-masthead__nav-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--bbs-font-body);
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--bbs-on-dark-hi);
}

body.bbs-active .bbs-masthead .bbs-masthead__nav-link:hover {
	color: var(--bbs-surface);
}

/* ---- Mega-menu -------------------------------------------------------- */

body.bbs-active .bbs-masthead .bbs-masthead__menu {
	position: relative;
	display: flex;
	align-items: center;
	height: var(--bbs-header-h);
}

body.bbs-active .bbs-masthead .bbs-masthead__menu-trigger {
	gap: 7px;
}

body.bbs-active .bbs-masthead .bbs-masthead__caret {
	font-family: var(--bbs-font-mono);
	font-size: var(--bbs-fs-meta, 12px);
}

body.bbs-active .bbs-masthead .bbs-masthead__mega {
	display: none;
	position: absolute;
	top: var(--bbs-header-h);
	right: -28px;
	left: auto;
	z-index: 60;
	width: min(640px, calc(100vw - 80px));
	padding: 30px 34px 32px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 34px;
	background: rgba(10, 14, 19, 0.98);
	background: color-mix(in srgb, var(--bbs-dark) 98%, transparent);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-top: 2px solid var(--bbs-accent);
	color: var(--bbs-surface);
	text-align: left;
}

/* Open states. Without JS (no --js class) plain CSS hover/focus opens it; with JS the
   script owns the state so that Escape can close it while focus sits on the trigger. */
body.bbs-active .bbs-masthead:not(.bbs-masthead--js) .bbs-masthead__menu:hover .bbs-masthead__mega,
body.bbs-active .bbs-masthead:not(.bbs-masthead--js) .bbs-masthead__menu:focus-within .bbs-masthead__mega,
body.bbs-active .bbs-masthead .bbs-masthead__menu--open .bbs-masthead__mega {
	display: grid;
}

body.bbs-active .bbs-masthead .bbs-masthead__mega-col {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

body.bbs-active .bbs-masthead .bbs-masthead__mega-heading {
	font-family: var(--bbs-font-mono);
	font-size: var(--bbs-fs-meta, 12px);
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bbs-blue-300);
}

body.bbs-active .bbs-masthead .bbs-masthead__mega-list {
	display: flex;
	flex-direction: column;
}

body.bbs-active .bbs-masthead .bbs-masthead__mega-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 32px;
	font-family: var(--bbs-font-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(255, 255, 255, 0.82);
}

body.bbs-active .bbs-masthead .bbs-masthead__mega-link:hover {
	color: var(--bbs-surface);
}

body.bbs-active .bbs-masthead .bbs-masthead__mega-name {
	min-width: 0;
	overflow-wrap: anywhere;
}

body.bbs-active .bbs-masthead .bbs-masthead__mega-count {
	flex: none;
	font-family: var(--bbs-font-mono);
	font-size: var(--bbs-fs-meta, 12px);
	letter-spacing: 0;
	color: var(--bbs-on-dark-low);
}

body.bbs-active .bbs-masthead .bbs-masthead__mega-footer {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px 24px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

body.bbs-active .bbs-masthead .bbs-masthead__mega-note {
	font-family: var(--bbs-font-mono);
	font-size: var(--bbs-fs-meta, 12px);
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bbs-on-dark-low);
}

body.bbs-active .bbs-masthead .bbs-masthead__mega-cta {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 12px 20px;
	background: var(--bbs-navy);
	color: var(--bbs-surface);
	font-family: var(--bbs-font-display);
	font-weight: 700;
	font-size: 12.5px;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

body.bbs-active .bbs-masthead .bbs-masthead__mega-cta:hover {
	background: var(--bbs-accent);
	color: var(--bbs-surface);
}

/* ---- Cart ------------------------------------------------------------- */

body.bbs-active .bbs-masthead .bbs-masthead__cart {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: var(--bbs-surface);
	font-family: var(--bbs-font-mono);
	font-size: 12.5px;
	line-height: 1.4;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

body.bbs-active .bbs-masthead .bbs-masthead__cart:hover {
	border-color: var(--bbs-accent);
	color: var(--bbs-surface);
}

/* ---- Phone quick actions: call + cart (switched on below 900px) -------- */

body.bbs-active .bbs-masthead .bbs-masthead__quick {
	display: none;
	flex: none;
	align-items: center;
	margin-left: auto;
}

/* Borderless 44px targets, so the bordered menu button stays the one obvious control. */
body.bbs-active .bbs-masthead .bbs-masthead__quick-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 44px;
	height: 44px;
	padding: 0 6px;
	color: var(--bbs-surface);
	font-family: var(--bbs-font-mono);
	font-size: var(--bbs-fs-label, 13px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	white-space: nowrap;
}

body.bbs-active .bbs-masthead .bbs-masthead__quick-link:hover {
	color: var(--bbs-blue-100);
}

body.bbs-active .bbs-masthead .bbs-masthead__quick-icon {
	display: block;
	flex: none;
	width: 20px;
	height: 20px;
}

/* ---- Hamburger (switched on below 900px) ------------------------------- */

/* A link to the footer's Shop list until bbs-chrome.js makes it a button (1.0.2 pages still
   cached at the edge print a <button>; both take these rules). */
body.bbs-active .bbs-masthead .bbs-masthead__toggle {
	display: none;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: var(--bbs-surface);
	text-decoration: none;
	cursor: pointer; /* the upgraded link has no href */
}

body.bbs-active .bbs-masthead .bbs-masthead__toggle:hover,
body.bbs-active .bbs-masthead .bbs-masthead__toggle:focus {
	background: transparent;
	border-color: var(--bbs-accent);
	color: var(--bbs-surface);
}

body.bbs-active .bbs-masthead .bbs-masthead__bars {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

body.bbs-active .bbs-masthead .bbs-masthead__bar {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
}

/* =========================================================================
   Mobile drawer
   ========================================================================= */

body.bbs-active .bbs-drawer {
	position: fixed;
	inset: 0;
	z-index: 100000; /* over the WP admin bar, which is fixed on 601–782px screens */
	margin: 0;
}

body.bbs-active .bbs-drawer[hidden] {
	display: none;
}

body.bbs-active .bbs-drawer .bbs-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(10, 14, 19, 0.68);
	background: color-mix(in srgb, var(--bbs-dark) 68%, transparent);
}

body.bbs-active .bbs-drawer .bbs-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(420px, 100%);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: rgba(10, 14, 19, 0.98);
	background: color-mix(in srgb, var(--bbs-dark) 98%, transparent);
	border-left: 2px solid var(--bbs-accent);
	color: var(--bbs-surface);
	animation: bbs-drawer-in 160ms ease-out;
}

@keyframes bbs-drawer-in {
	from {
		transform: translateX(16px);
		opacity: 0;
	}
}

body.bbs-active .bbs-drawer .bbs-drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: var(--bbs-header-h);
	padding: 14px 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

body.bbs-active .bbs-drawer .bbs-drawer__label {
	font-family: var(--bbs-font-mono);
	font-size: var(--bbs-fs-meta, 12px);
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--bbs-blue-300);
}

body.bbs-active .bbs-drawer .bbs-drawer__close {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: var(--bbs-surface);
}

body.bbs-active .bbs-drawer .bbs-drawer__close:hover,
body.bbs-active .bbs-drawer .bbs-drawer__close:focus {
	background: transparent;
	border-color: var(--bbs-accent);
	color: var(--bbs-surface);
}

body.bbs-active .bbs-drawer .bbs-drawer__close svg {
	display: block;
}

body.bbs-active .bbs-drawer .bbs-drawer__nav {
	display: flex;
	flex-direction: column;
	padding: 8px 20px 0;
}

body.bbs-active .bbs-drawer .bbs-drawer__link {
	display: flex;
	align-items: center;
	min-height: 52px;
	font-family: var(--bbs-font-display);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bbs-surface);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.bbs-active .bbs-drawer .bbs-drawer__link:hover {
	color: var(--bbs-blue-100);
}

body.bbs-active .bbs-drawer .bbs-drawer__cats {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 26px 20px 0;
}

body.bbs-active .bbs-drawer .bbs-drawer__cats-heading {
	font-family: var(--bbs-font-mono);
	font-size: var(--bbs-fs-meta, 12px);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bbs-blue-300);
}

body.bbs-active .bbs-drawer .bbs-drawer__cats-list {
	display: flex;
	flex-direction: column;
}

body.bbs-active .bbs-drawer .bbs-drawer__cat-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 44px;
	font-family: var(--bbs-font-body);
	font-size: 15px;
	line-height: 1.25;
	color: rgba(255, 255, 255, 0.82);
}

body.bbs-active .bbs-drawer .bbs-drawer__cat-link:hover {
	color: var(--bbs-surface);
}

body.bbs-active .bbs-drawer .bbs-drawer__cat-name {
	min-width: 0;
	overflow-wrap: anywhere;
}

body.bbs-active .bbs-drawer .bbs-drawer__cat-count {
	flex: none;
	font-family: var(--bbs-font-mono);
	font-size: var(--bbs-fs-meta, 12px);
	letter-spacing: 0;
	color: var(--bbs-on-dark-low);
}

body.bbs-active .bbs-drawer .bbs-drawer__foot {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: auto;
	padding: 28px 20px;
	padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}

body.bbs-active .bbs-drawer .bbs-drawer__note {
	font-family: var(--bbs-font-mono);
	font-size: var(--bbs-fs-meta, 12px);
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bbs-on-dark-low);
}

/* Call, Cart and Account share one treatment. */
body.bbs-active .bbs-drawer :is(.bbs-drawer__call, .bbs-drawer__cart, .bbs-drawer__account) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 48px;
	padding: 12px 16px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	font-family: var(--bbs-font-mono);
	font-size: 12.5px;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bbs-surface);
}

body.bbs-active .bbs-drawer :is(.bbs-drawer__call, .bbs-drawer__cart, .bbs-drawer__account):hover {
	border-color: var(--bbs-accent);
	color: var(--bbs-surface);
}

/* =========================================================================
   Footer
   ========================================================================= */

body.bbs-active .bbs-footer {
	margin: 0;
	padding: 0;
	background: var(--bbs-surface);
	border-top: 1px solid var(--bbs-border);
}

body.bbs-active .bbs-footer .bbs-footer__grid {
	max-width: var(--bbs-content-max);
	margin: 0 auto;
	padding: 76px var(--bbs-gutter) 40px;
	display: grid;
	/* Three columns now that the newsletter is gone; the brand track is a little wider so the
	   one-line flag row (about 346px) never runs into the Shop column. */
	grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr));
	gap: 44px 40px;
}

body.bbs-active .bbs-footer .bbs-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

/* Negative margins trim the logo file's baked-in whitespace so it aligns with the column edge. */
body.bbs-active .bbs-footer .bbs-footer__logo {
	display: block;
	width: 232px;
	max-width: none;
	height: auto;
	margin: -18px 0 -8px -14px;
}

body.bbs-active .bbs-footer .bbs-footer__blurb {
	max-width: 32ch;
	font-size: 15px;
	line-height: 1.55;
	color: var(--bbs-muted);
}

/* 8px apart: the two ~18px-tall links' centres stay 24px+ apart (WCAG 2.5.8) at every width. */
body.bbs-active .bbs-footer .bbs-footer__contact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

body.bbs-active .bbs-footer .bbs-footer__contact-link {
	font-family: var(--bbs-font-mono);
	font-size: 13.5px;
	line-height: 1.35;
	color: var(--bbs-navy);
	overflow-wrap: anywhere;
}

body.bbs-active .bbs-footer .bbs-footer__contact-link:hover {
	color: var(--bbs-accent);
}

body.bbs-active .bbs-footer .bbs-footer__regions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
}

body.bbs-active .bbs-footer .bbs-footer__flag {
	display: block;
	flex: none;
	width: 18.75px;
	height: 12.5px;
}

body.bbs-active .bbs-footer .bbs-footer__region {
	font-family: var(--bbs-font-mono);
	font-size: var(--bbs-fs-meta, 12px);
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--bbs-muted-alt);
}

body.bbs-active .bbs-footer .bbs-footer__divider {
	display: block;
	width: 1px;
	height: 14px;
	background: var(--bbs-border-strong);
}

body.bbs-active .bbs-footer .bbs-footer__col {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

body.bbs-active .bbs-footer .bbs-footer__heading {
	display: block;
	margin-bottom: 12px;
	font-family: var(--bbs-font-mono);
	font-size: var(--bbs-fs-meta, 12px);
	line-height: 1.3;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--bbs-faint);
}

body.bbs-active .bbs-footer .bbs-footer__list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

/* Navy, not body text: on touch there is no hover to reveal these as links. */
body.bbs-active .bbs-footer .bbs-footer__link {
	font-size: 15px;
	line-height: 1.2;
	color: var(--bbs-navy);
	overflow-wrap: anywhere;
}

body.bbs-active .bbs-footer .bbs-footer__link:hover {
	color: var(--bbs-accent);
}

body.bbs-active .bbs-footer .bbs-footer__hours {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 26px;
}

body.bbs-active .bbs-footer .bbs-footer__hours .bbs-footer__heading {
	margin-bottom: 0;
}

body.bbs-active .bbs-footer .bbs-footer__hours-row {
	font-size: 14.5px;
	line-height: 1.35;
	color: var(--bbs-muted);
}

body.bbs-active .bbs-footer .bbs-footer__legal {
	max-width: var(--bbs-content-max);
	margin: 0 auto;
	padding: 0 var(--bbs-gutter) 40px;
}

body.bbs-active .bbs-footer .bbs-footer__legal-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 24px;
	padding-top: 24px;
	border-top: 1px solid var(--bbs-border);
}

body.bbs-active .bbs-footer .bbs-footer__legal-text {
	font-family: var(--bbs-font-mono);
	font-size: var(--bbs-fs-meta, 12px);
	line-height: 1.4;
	color: var(--bbs-faint);
}

body.bbs-active .bbs-footer .bbs-footer__legal-links {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 28px;
}

body.bbs-active .bbs-footer .bbs-footer__legal-link {
	color: var(--bbs-navy);
}

body.bbs-active .bbs-footer .bbs-footer__legal-link:hover {
	color: var(--bbs-accent);
}

/* =========================================================================
   Breakpoints
   ========================================================================= */

/* The mega panel is anchored to the right edge of "Bollards". Once the nav slides far enough
   left it would run off the viewport, so below 1300px it anchors to the header's gutter. */
@media (max-width: 1300px) {
	body.bbs-active .bbs-masthead .bbs-masthead__menu {
		position: static;
	}

	body.bbs-active .bbs-masthead .bbs-masthead__mega {
		right: var(--bbs-gutter);
		left: auto;
		width: min(640px, calc(100% - (2 * var(--bbs-gutter))));
	}
}

@media (max-width: 1180px) {
	body.bbs-active .bbs-masthead .bbs-masthead__nav {
		gap: 30px;
	}

	/* The nowrap flag row no longer fits the brand column; it becomes flag + label rows.
	   (Flex-wrap would split a flag from its own label.) The divider only separated the pair. */
	body.bbs-active .bbs-footer .bbs-footer__regions {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		gap: 8px 10px;
	}

	body.bbs-active .bbs-footer .bbs-footer__divider {
		display: none;
	}
}

@media (max-width: 1080px) {
	body.bbs-active .bbs-masthead .bbs-masthead__inner {
		gap: 24px;
	}

	body.bbs-active .bbs-masthead .bbs-masthead__nav {
		gap: 24px;
	}

	body.bbs-active .bbs-utility .bbs-utility__inner {
		letter-spacing: 0.07em;
	}
}

@media (max-width: 980px) {
	body.bbs-active .bbs-masthead .bbs-masthead__nav {
		gap: 20px;
	}

	body.bbs-active .bbs-masthead .bbs-masthead__nav-link {
		font-size: 14px;
		letter-spacing: 0.06em;
	}

	body.bbs-active .bbs-masthead .bbs-masthead__wordmark {
		font-size: 16px;
		letter-spacing: 0.11em;
	}
}

@media (max-width: 900px) {
	/* Utility bar: one 46px line. The passive notes collapse (visually hidden, so they stay
	   in the accessibility tree) in priority order; the wholesale link survives at every width. */
	body.bbs-active .bbs-utility .bbs-utility__inner {
		min-height: 46px;
		flex-wrap: nowrap;
		gap: 16px;
	}

	body.bbs-active .bbs-utility .bbs-utility__lead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	body.bbs-active .bbs-utility .bbs-utility__right {
		flex: 1;
		min-width: 0;
		gap: 16px;
		justify-content: space-between;
	}

	/* 16px text + 30px = 44px target inside the 46px row. */
	body.bbs-active .bbs-utility .bbs-utility__wholesale::after {
		inset: -15px 0;
	}

	/* Masthead: inline nav gives way to the hamburger + drawer. */
	body.bbs-active .bbs-masthead .bbs-masthead__nav {
		display: none;
	}

	body.bbs-active .bbs-masthead .bbs-masthead__toggle {
		display: inline-flex;
	}

	body.bbs-active .bbs-masthead .bbs-masthead__quick {
		display: flex;
	}

	/* A minimum only: space-between (and the quick actions' auto margin) spread the row. */
	body.bbs-active .bbs-masthead .bbs-masthead__inner {
		gap: 8px;
	}

	body.bbs-active .bbs-masthead .bbs-masthead__wordmark {
		font-size: 18px;
		letter-spacing: 0.13em;
	}

	/* Footer: brand across the top, Shop + Company side by side below it. */
	body.bbs-active .bbs-footer .bbs-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 24px;
		padding-top: 56px;
	}

	body.bbs-active .bbs-footer .bbs-footer__brand {
		grid-column: 1 / -1;
	}

	/* Every footer link becomes its own 44px row; the list gap folds into that height. */
	body.bbs-active .bbs-footer .bbs-footer__list,
	body.bbs-active .bbs-footer .bbs-footer__contact {
		gap: 0;
	}

	body.bbs-active .bbs-footer .bbs-footer__link,
	body.bbs-active .bbs-footer .bbs-footer__contact-link,
	body.bbs-active .bbs-footer .bbs-footer__legal-link {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	body.bbs-active .bbs-footer .bbs-footer__heading {
		margin-bottom: 4px;
	}

	body.bbs-active .bbs-footer .bbs-footer__hours {
		margin-top: 22px;
	}

	body.bbs-active .bbs-footer .bbs-footer__legal-inner {
		gap: 4px 24px;
	}
}

@media (max-width: 640px) {
	body.bbs-active .bbs-utility .bbs-utility__freight {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	body.bbs-active .bbs-utility .bbs-utility__right {
		justify-content: center;
	}

	/* No wholesale link to show (Partner page unpublished): the freight note stays, so the bar is not an empty strip. */
	body.bbs-active .bbs-utility.bbs-utility--no-wholesale .bbs-utility__freight {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip-path: none;
		white-space: normal;
	}

	body.bbs-active .bbs-footer .bbs-footer__grid {
		padding-top: 48px;
	}

	body.bbs-active .bbs-footer .bbs-footer__legal-inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Brand, call, cart and menu must share one row: the wordmark steps down to its 901–980px size.
   Scoped to markup with the quick actions, so pages still cached from 1.0.2 keep their wordmark. */
@media (max-width: 480px) {
	body.bbs-active .bbs-masthead .bbs-masthead__inner--quick .bbs-masthead__wordmark {
		font-size: 16px;
		letter-spacing: 0.11em;
	}
}

/* The brand lock-up plus the 44px targets must clear the gutters on a 320px screen. */
@media (max-width: 420px) {
	body.bbs-active .bbs-masthead .bbs-masthead__brand {
		gap: 8px;
	}

	body.bbs-active .bbs-masthead .bbs-masthead__monogram {
		height: 30px;
	}

	/* __inner matches old and new markup alike and outranks the scoped ≤480px rule above. */
	body.bbs-active .bbs-masthead .bbs-masthead__inner .bbs-masthead__wordmark {
		font-size: 14px;
		letter-spacing: 0.09em;
	}
}

@media (max-width: 380px) {
	body.bbs-active .bbs-footer .bbs-footer__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	body.bbs-active .bbs-footer .bbs-footer__logo {
		width: 200px;
		margin: -16px 0 -8px -12px;
	}
}

/* Below 360px the wordmark no longer fits beside three 44px targets. It is only hidden visually;
   the brand link's aria-label still names it. */
@media (max-width: 359.98px) {
	body.bbs-active .bbs-masthead .bbs-masthead__inner--quick .bbs-masthead__wordmark {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* =========================================================================
   Print
   ========================================================================= */

@media print {
	body.bbs-active a.bbs-skiplink,
	body.bbs-active .bbs-drawer,
	body.bbs-active .bbs-masthead .bbs-masthead__nav,
	body.bbs-active .bbs-masthead .bbs-masthead__toggle,
	body.bbs-active .bbs-masthead .bbs-masthead__quick,
	body.bbs-active .bbs-utility {
		display: none;
	}

	body.bbs-active .bbs-masthead {
		position: static;
		background: var(--bbs-surface);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border-bottom: 1px solid var(--bbs-border);
	}

	body.bbs-active .bbs-masthead .bbs-masthead__monogram {
		filter: none;
		mix-blend-mode: normal;
	}

	body.bbs-active .bbs-masthead .bbs-masthead__wordmark {
		color: var(--bbs-text);
	}
}