/* =========================================================================
   Big Ear — Commerce
   Cart drawer, mobile header repair, buy blocks, lead form.
   Tokens are the site's own (--blaze, --bone, --asphalt…) with fallbacks so
   this file still renders correctly on pages that don't define them.
   ========================================================================= */

.becx-scope,
:root {
	--becx-asphalt:  #0B0B0A;
	--becx-gunmetal: #131312;
	--becx-stone:    #1B1B19;
	--becx-stone-2:  #232321;
	--becx-hairline: #333330;
	--becx-hairline-2:#46443D;
	--becx-blaze:    #FFE600;
	--becx-bone:     #F3F1E9;
	--becx-sand:     #A8A599;
	--becx-ok:       #7FB069;
	--becx-bad:      #FF6B5A;
	--becx-disp: var(--ff-disp, 'Oswald', 'Archivo', system-ui, sans-serif);
	--becx-body: var(--ff-body, 'Archivo', system-ui, -apple-system, sans-serif);
	--becx-ease: cubic-bezier(.16, 1, .3, 1);
}

.becx-sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------------------
   Cart count badge
   Sits on the header cart control. Hidden entirely at zero so an empty cart
   never shows a "0" — an empty badge reads as a bug.
   ------------------------------------------------------------------------- */

[data-becx-cart-btn] {
	position: relative;
}

.becx-badge {
	position: absolute;
	top: -2px;
	inset-inline-end: -4px;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	display: none;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--blaze, var(--becx-blaze));
	color: #000;
	font-family: var(--becx-body);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 0 0 2px var(--asphalt, var(--becx-asphalt));
	pointer-events: none;
}

.becx-badge.is-on { display: flex; }

@keyframes becx-pop {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.35); }
	100% { transform: scale(1); }
}

.becx-badge.is-bump { animation: becx-pop .42s var(--becx-ease); }

/* -------------------------------------------------------------------------
   Scrim + drawer
   ------------------------------------------------------------------------- */

.becx-scrim {
	position: fixed;
	inset: 0;
	z-index: 99998;
	background: rgba(0, 0, 0, .62);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity .28s var(--becx-ease);
}

.becx-scrim.is-open { opacity: 1; }
.becx-scrim[hidden] { display: none; }

.becx-drawer {
	position: fixed;
	top: 0;
	inset-inline-end: 0;
	z-index: 99999;
	width: min(420px, 100vw);
	height: 100dvh;
	display: flex;
	flex-direction: column;
	background: var(--gunmetal, var(--becx-gunmetal));
	border-inline-start: 1px solid var(--hairline, var(--becx-hairline));
	box-shadow: -24px 0 60px rgba(0, 0, 0, .55);
	color: var(--bone, var(--becx-bone));
	font-family: var(--becx-body);
	transform: translateX(100%);
	transition: transform .34s var(--becx-ease);
}

.becx-drawer.is-open { transform: translateX(0); }
.becx-drawer[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
	.becx-scrim,
	.becx-drawer { transition: none; }
	.becx-badge.is-bump { animation: none; }
}

.becx-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 20px 16px;
	border-bottom: 1px solid var(--hairline, var(--becx-hairline));
	flex: 0 0 auto;
}

.becx-drawer__title {
	margin: 0;
	font-family: var(--becx-disp);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bone, var(--becx-bone));
}

.becx-drawer__close {
	width: 44px;
	height: 44px;
	margin: -8px -10px -8px 0;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--sand, var(--becx-sand));
	cursor: pointer;
	transition: color .18s, background .18s;
}

.becx-drawer__close svg { width: 20px; height: 20px; }
.becx-drawer__close:hover { color: var(--bone, var(--becx-bone)); background: var(--stone, var(--becx-stone)); }

.becx-drawer :focus-visible,
.becx-buy :focus-visible,
.becx-lead :focus-visible {
	outline: 2px solid var(--blaze, var(--becx-blaze));
	outline-offset: 2px;
	border-radius: 6px;
}

.becx-drawer__flash {
	margin: 0;
	padding: 12px 20px;
	font-size: 13.5px;
	line-height: 1.45;
	background: rgba(127, 176, 105, .12);
	border-bottom: 1px solid rgba(127, 176, 105, .3);
	color: #C8E6B4;
	flex: 0 0 auto;
}

.becx-drawer__flash[data-tone="error"] {
	background: rgba(255, 107, 90, .12);
	border-bottom-color: rgba(255, 107, 90, .34);
	color: #FFC2BA;
}

.becx-drawer__flash[hidden] { display: none; }

.becx-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 6px 20px 20px;
}

.becx-drawer__loading,
.becx-drawer__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 240px;
	color: var(--sand, var(--becx-sand));
	font-size: 14px;
	text-align: center;
}

.becx-drawer__empty p { margin: 0; max-width: 26ch; line-height: 1.5; }

.becx-spinner {
	width: 22px; height: 22px;
	border: 2px solid var(--hairline-2, var(--becx-hairline-2));
	border-top-color: var(--blaze, var(--becx-blaze));
	border-radius: 50%;
	animation: becx-spin .7s linear infinite;
}

@keyframes becx-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.becx-spinner { animation-duration: 2.4s; }
}

/* ---- line items ---- */

.becx-item {
	display: grid;
	grid-template-columns: 68px 1fr auto;
	gap: 14px;
	padding: 18px 0;
	border-bottom: 1px solid var(--hairline, var(--becx-hairline));
	align-items: start;
}

.becx-item:last-child { border-bottom: 0; }

.becx-item.is-new {
	animation: becx-fade .5s var(--becx-ease);
}

@keyframes becx-fade {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

.becx-item__media {
	width: 68px; height: 68px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--stone, var(--becx-stone));
	border: 1px solid var(--hairline, var(--becx-hairline));
}

.becx-item__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.becx-item__name {
	margin: 0 0 4px;
	font-family: var(--becx-disp);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.25;
}

.becx-item__name a { color: var(--bone, var(--becx-bone)); text-decoration: none; }
.becx-item__name a:hover { color: var(--blaze, var(--becx-blaze)); }

.becx-item__meta {
	margin: 0 0 8px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--sand, var(--becx-sand));
}

.becx-item__meta span { display: block; }

.becx-item__qty {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	border: 1px solid var(--hairline-2, var(--becx-hairline-2));
	border-radius: 8px;
	overflow: hidden;
}

.becx-item__qty button {
	width: 30px; height: 30px;
	display: grid; place-items: center;
	border: 0; background: transparent;
	color: var(--sand, var(--becx-sand));
	font-size: 15px; line-height: 1;
	cursor: pointer;
	transition: background .16s, color .16s;
}

.becx-item__qty button:hover:not(:disabled) { background: var(--stone-2, var(--becx-stone-2)); color: var(--bone, var(--becx-bone)); }
.becx-item__qty button:disabled { opacity: .35; cursor: default; }

.becx-item__qty output {
	min-width: 26px;
	text-align: center;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: var(--bone, var(--becx-bone));
}

.becx-item__right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}

.becx-item__price {
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.becx-item__remove {
	border: 0; background: transparent;
	padding: 4px;
	color: var(--sand, var(--becx-sand));
	font-size: 11.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.becx-item__remove:hover { color: var(--becx-bad); }

.becx-item.is-busy { opacity: .5; pointer-events: none; }

/* ---- footer ---- */

.becx-drawer__foot {
	flex: 0 0 auto;
	padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--hairline, var(--becx-hairline));
	background: var(--asphalt, var(--becx-asphalt));
	display: grid;
	gap: 10px;
}

.becx-drawer__foot[hidden] { display: none; }

.becx-drawer__line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	font-family: var(--becx-disp);
	font-size: 14px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sand, var(--becx-sand));
}

.becx-drawer__line strong {
	font-size: 22px;
	color: var(--bone, var(--becx-bone));
	font-variant-numeric: tabular-nums;
}

.becx-drawer__note {
	margin: -2px 0 4px;
	font-size: 12px;
	color: var(--sand, var(--becx-sand));
}

.becx-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 20px;
	border: 1px solid transparent;
	border-radius: 10px;
	font-family: var(--becx-disp);
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: transform .16s var(--becx-ease), filter .16s, background .16s, color .16s;
}

.becx-btn:active { transform: translateY(1px); }

.becx-btn--primary {
	background: var(--blaze, var(--becx-blaze));
	color: #000;
}

.becx-btn--primary:hover { filter: brightness(1.08); color: #000; }

.becx-btn--ghost {
	background: transparent;
	border-color: var(--hairline-2, var(--becx-hairline-2));
	color: var(--bone, var(--becx-bone));
}

.becx-btn--ghost:hover { border-color: var(--bone, var(--becx-bone)); color: var(--bone, var(--becx-bone)); }

/* -------------------------------------------------------------------------
   Header repairs
   The storefront header ships an empty .logo anchor and a --logo variable
   pointing at a path that 404s, so the wordmark never renders. Both are
   corrected here; the URL is written by PHP from site_url().
   ------------------------------------------------------------------------- */

header a.logo:empty,
header a.brand:empty {
	width: 66px;
	height: 40px;
	background-image: var(--becx-logo);
	background-position: left center;
	background-size: contain;
	background-repeat: no-repeat;
	flex: 0 0 auto;
}

/* The second hamburger. The header carries both .nav-toggle and .burger and
   renders both on small screens; .burger is the one that lives with the other
   header actions, so .nav-toggle stands down. */
header .nav-toggle + nav + .nav-r .burger ~ *,
body.becx-dedup-burger header .nav-toggle {
	display: none !important;
}

@media (max-width: 900px) {

	/* Cart must be reachable on a phone. It ships display:none. */
	header .nav-r [data-becx-cart-btn],
	header .bar [data-becx-cart-btn] {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
	}

	/* "Returning Customers" is a 165px pill on a 390px screen. Icon only. */
	header .nav-account span,
	header .nav-file .nav-file-t {
		display: none;
	}

	header .nav-account {
		width: 44px;
		height: 44px;
		padding: 0;
		justify-content: center;
	}

	/* The landing-page header packs breadcrumb + trust badges into the same
	   flex row as the nav, which overflows the viewport. */
	header .bcrumb,
	header .htrust {
		display: none;
	}

	header .bar,
	header .wrap.nav {
		gap: 6px;
		flex-wrap: nowrap;
		overflow: visible;
	}

	header .hbtn,
	header .nav-cta {
		font-size: 11.5px;
		padding: 0 12px;
		white-space: nowrap;
	}
}

/* The announcement bar eats a quarter of the first screen on a phone. */
@media (max-width: 640px) {
	.becx-tight-announce {
		font-size: 11px !important;
		line-height: 1.35 !important;
		padding-top: 6px !important;
		padding-bottom: 6px !important;
	}
}

/* -------------------------------------------------------------------------
   Mobile navigation panel
   The header's own toggle has no handler on storefront pages, so the menu
   never opens. This is a working replacement.
   ------------------------------------------------------------------------- */

.becx-nav {
	position: fixed;
	inset: 0 0 0 auto;
	z-index: 99999;
	width: min(360px, 88vw);
	height: 100dvh;
	background: var(--gunmetal, var(--becx-gunmetal));
	border-inline-start: 1px solid var(--hairline, var(--becx-hairline));
	box-shadow: -24px 0 60px rgba(0, 0, 0, .55);
	transform: translateX(100%);
	transition: transform .34s var(--becx-ease);
	display: flex;
	flex-direction: column;
	font-family: var(--becx-body);
	color: var(--bone, var(--becx-bone));
}

.becx-nav.is-open { transform: translateX(0); }
.becx-nav[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) { .becx-nav { transition: none; } }

.becx-nav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 1px solid var(--hairline, var(--becx-hairline));
}

.becx-nav__title {
	margin: 0;
	font-family: var(--becx-disp);
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sand, var(--becx-sand));
}

.becx-nav__list {
	list-style: none;
	margin: 0;
	padding: 8px 0 24px;
	overflow-y: auto;
	flex: 1 1 auto;
	overscroll-behavior: contain;
}

.becx-nav__list a {
	display: block;
	padding: 15px 20px;
	color: var(--bone, var(--becx-bone));
	text-decoration: none;
	font-family: var(--becx-disp);
	font-size: 16px;
	letter-spacing: .05em;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(51, 51, 48, .55);
}

.becx-nav__list a:hover,
.becx-nav__list a:focus-visible { background: var(--stone, var(--becx-stone)); color: var(--blaze, var(--becx-blaze)); }

.becx-nav__foot {
	padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--hairline, var(--becx-hairline));
	display: grid;
	gap: 9px;
	background: var(--asphalt, var(--becx-asphalt));
}

/* -------------------------------------------------------------------------
   Buy block (aviation landing pages)
   ------------------------------------------------------------------------- */

.becx-buy {
	margin: 40px 0;
	padding: 26px;
	border: 1px solid var(--hairline, var(--becx-hairline));
	border-radius: 14px;
	background:
		linear-gradient(180deg, rgba(255, 230, 0, .05), transparent 46%),
		var(--stone, var(--becx-stone));
	font-family: var(--becx-body);
	color: var(--bone, var(--becx-bone));
	display: grid;
	gap: 18px;
	scroll-margin-top: 90px;
}

.becx-buy__top {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px;
}

.becx-buy__eyebrow {
	margin: 0 0 6px;
	font-family: var(--becx-disp);
	font-size: 11.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--blaze, var(--becx-blaze));
}

.becx-buy__name {
	margin: 0;
	font-family: var(--becx-disp);
	font-size: clamp(20px, 3vw, 26px);
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	line-height: 1.15;
}

.becx-buy__price {
	font-family: var(--becx-disp);
	font-size: clamp(26px, 4vw, 34px);
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.becx-buy__price small {
	display: block;
	margin-top: 5px;
	font-family: var(--becx-body);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sand, var(--becx-sand));
}

.becx-buy__facts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--sand, var(--becx-sand));
}

.becx-buy__facts li {
	padding-inline-start: 18px;
	position: relative;
}

.becx-buy__facts li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: .55em;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--blaze, var(--becx-blaze));
}

.becx-buy__facts strong { color: var(--bone, var(--becx-bone)); font-weight: 600; }

.becx-buy__actions {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px;
	align-items: center;
}

@media (max-width: 560px) {
	.becx-buy { padding: 20px; }
	.becx-buy__actions { grid-template-columns: 1fr; }
}

.becx-buy__note {
	margin: 0;
	font-size: 12px;
	color: var(--sand, var(--becx-sand));
}

.becx-buy__link {
	color: var(--sand, var(--becx-sand));
	font-size: 12.5px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.becx-buy__link:hover { color: var(--blaze, var(--becx-blaze)); }

.becx-btn.is-busy { pointer-events: none; opacity: .72; }

/* -------------------------------------------------------------------------
   "We don't build that one yet" lead form
   ------------------------------------------------------------------------- */

.becx-lead {
	margin: 36px 0;
	padding: 26px;
	border: 1px solid var(--hairline, var(--becx-hairline));
	border-radius: 14px;
	background: var(--stone, var(--becx-stone));
	font-family: var(--becx-body);
	color: var(--bone, var(--becx-bone));
	scroll-margin-top: 90px;
}

.becx-lead h3 {
	margin: 0 0 8px;
	font-family: var(--becx-disp);
	font-size: clamp(18px, 2.6vw, 23px);
	letter-spacing: .03em;
	text-transform: uppercase;
}

.becx-lead__lede {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--sand, var(--becx-sand));
	max-width: 58ch;
}

.becx-lead__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

@media (max-width: 560px) { .becx-lead__grid { grid-template-columns: 1fr; } }

.becx-field { display: grid; gap: 6px; }
.becx-field--wide { grid-column: 1 / -1; }

.becx-field label {
	font-family: var(--becx-disp);
	font-size: 11.5px;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--sand, var(--becx-sand));
}

.becx-field .becx-req { color: var(--blaze, var(--becx-blaze)); }

.becx-field input,
.becx-field textarea {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--hairline-2, var(--becx-hairline-2));
	border-radius: 9px;
	background: var(--asphalt, var(--becx-asphalt));
	color: var(--bone, var(--becx-bone));
	font-family: var(--becx-body);
	font-size: 15px;
	transition: border-color .16s;
}

.becx-field textarea { min-height: 96px; resize: vertical; }

.becx-field input::placeholder,
.becx-field textarea::placeholder { color: #6E6B62; }

.becx-field input:focus,
.becx-field textarea:focus {
	outline: none;
	border-color: var(--blaze, var(--becx-blaze));
}

.becx-field[data-invalid] input,
.becx-field[data-invalid] textarea { border-color: var(--becx-bad); }

.becx-field__err {
	font-size: 12px;
	color: #FFC2BA;
	min-height: 0;
}

.becx-lead__actions {
	margin-top: 18px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.becx-lead__actions .becx-btn { min-width: 220px; }

.becx-lead__alt {
	font-size: 13px;
	color: var(--sand, var(--becx-sand));
}

.becx-lead__alt a { color: var(--bone, var(--becx-bone)); text-decoration: underline; text-underline-offset: 3px; }
.becx-lead__alt a:hover { color: var(--blaze, var(--becx-blaze)); }

.becx-lead__done {
	display: grid;
	gap: 10px;
	padding: 22px;
	border: 1px solid rgba(127, 176, 105, .4);
	border-radius: 12px;
	background: rgba(127, 176, 105, .08);
}

.becx-lead__done h3 { margin: 0; color: #C8E6B4; }
.becx-lead__done p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--bone, var(--becx-bone)); }

.becx-honey {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px; opacity: 0;
}

/* -------------------------------------------------------------------------
   Headset picker
   ------------------------------------------------------------------------- */

.becx-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

.becx-picker button {
	min-height: 46px;
	padding: 0 18px;
	border: 1px solid var(--hairline-2, var(--becx-hairline-2));
	border-radius: 999px;
	background: transparent;
	color: var(--bone, var(--becx-bone));
	font-family: var(--becx-disp);
	font-size: 13.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color .16s, background .16s, color .16s;
}

.becx-picker button:hover { border-color: var(--blaze, var(--becx-blaze)); }

.becx-picker button[aria-pressed="true"] {
	background: var(--blaze, var(--becx-blaze));
	border-color: var(--blaze, var(--becx-blaze));
	color: #000;
}

/* Keeps the page from scrolling behind an open drawer on iOS. */
body.becx-locked { overflow: hidden; }

/* -------------------------------------------------------------------------
   The impression kit explainer
   Shown at the cart, at checkout and beside Add to Cart, because "how do
   they get my ears?" is the question that ends the sale when unanswered.
   ------------------------------------------------------------------------- */

.becx-kit {
	font-family: var(--becx-body);
	color: var(--bone, var(--becx-bone));
	border: 1px solid var(--hairline, var(--becx-hairline));
	border-radius: 14px;
	background:
		linear-gradient(180deg, rgba(255, 230, 0, .045), transparent 40%),
		var(--stone, var(--becx-stone));
	padding: 28px;
	display: grid;
	gap: 22px;
}

.becx-kit--inline { margin: 34px 0; }

@media (max-width: 560px) { .becx-kit { padding: 20px; } }

.becx-kit__eyebrow {
	margin: 0 0 8px;
	font-family: var(--becx-disp);
	font-size: 11.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--blaze, var(--becx-blaze));
}

.becx-kit__title {
	margin: 0 0 12px;
	font-family: var(--becx-disp);
	font-size: clamp(20px, 2.6vw, 27px);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--bone, var(--becx-bone));
	max-width: 24ch;
}

.becx-kit__lede {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--sand, var(--becx-sand));
	max-width: 68ch;
}

.becx-kit__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 26px;
	align-items: start;
}

@media (max-width: 760px) {
	.becx-kit__body { grid-template-columns: 1fr; gap: 22px; }
}

/* ---- video facade: nothing loads from YouTube until it is asked for ---- */

.becx-kit__play {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 1px solid var(--hairline-2, var(--becx-hairline-2));
	border-radius: 12px;
	overflow: hidden;
	background: #000;
	cursor: pointer;
	aspect-ratio: 16 / 9;
}

.becx-kit__play img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: .72;
	transition: opacity .2s, transform .35s var(--becx-ease);
}

.becx-kit__play:hover img { opacity: .9; transform: scale(1.02); }

.becx-kit__playicon {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 58px;
	height: 58px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--blaze, var(--becx-blaze));
	color: #000;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
	transition: transform .2s var(--becx-ease);
}

.becx-kit__playicon svg { width: 26px; height: 26px; margin-inline-start: 3px; }
.becx-kit__play:hover .becx-kit__playicon { transform: scale(1.07); }

.becx-kit__playlabel {
	position: absolute;
	left: 14px;
	bottom: 12px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(11, 11, 10, .82);
	color: var(--bone, var(--becx-bone));
	font-family: var(--becx-disp);
	font-size: 11.5px;
	letter-spacing: .11em;
	text-transform: uppercase;
}

.becx-kit__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--hairline-2, var(--becx-hairline-2));
}

.becx-kit__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.becx-kit__vidnote {
	margin: 10px 0 0;
	font-size: 12.5px;
	color: var(--sand, var(--becx-sand));
}

.becx-kit__vidnote a { color: var(--bone, var(--becx-bone)); text-underline-offset: 3px; }
.becx-kit__vidnote a:hover { color: var(--blaze, var(--becx-blaze)); }

/* ---- the four steps ---- */

.becx-kit__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
	counter-reset: becx-kit;
}

.becx-kit__steps li {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	gap: 13px;
	align-items: start;
}

.becx-kit__num {
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--blaze, var(--becx-blaze));
	color: #000;
	font-family: var(--becx-disp);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
}

.becx-kit__stepbody { display: grid; gap: 3px; }

.becx-kit__stepbody strong {
	font-family: var(--becx-disp);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--bone, var(--becx-bone));
}

.becx-kit__stepbody span {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--sand, var(--becx-sand));
}

/* ---- the drawer's one-liner ---- */

.becx-kit__hint {
	margin: 0 0 4px;
	padding: 12px 14px;
	border-radius: 9px;
	background: var(--stone-2, var(--becx-stone-2));
	border: 1px solid var(--hairline, var(--becx-hairline));
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--sand, var(--becx-sand));
}

.becx-kit__hintlink {
	display: inline;
	padding: 0;
	border: 0;
	background: none;
	color: var(--blaze, var(--becx-blaze));
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* ---- modal, for when the explainer is opened from the drawer ---- */

.becx-kit__modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	padding: 20px;
	background: rgba(0, 0, 0, .72);
	backdrop-filter: blur(4px);
	overflow-y: auto;
}

.becx-kit__modalpanel {
	position: relative;
	width: min(760px, 100%);
	max-height: 92dvh;
	overflow-y: auto;
	border-radius: 16px;
}

.becx-kit__modalpanel .becx-kit {
	border-radius: 16px;
	background: var(--gunmetal, var(--becx-gunmetal));
}

.becx-kit__close {
	position: absolute;
	top: 10px;
	inset-inline-end: 10px;
	z-index: 2;
	background: rgba(11, 11, 10, .7);
}

/* In a narrow column the overlaid label collides with the play button. */
@media (max-width: 520px) {
	.becx-kit__playlabel {
		position: static;
		display: block;
		margin-top: 8px;
		background: none;
		padding: 0;
		text-align: center;
	}
	.becx-kit__play { aspect-ratio: auto; }
	.becx-kit__play img { aspect-ratio: 16 / 9; }
}

/* -------------------------------------------------------------------------
   Audience band
   Sits above the page's own opening, so a pilot arriving from a ProFlight ad
   reads about ProFlights before anything else.
   ------------------------------------------------------------------------- */

.becx-aud {
	display: block;
	border-bottom: 1px solid var(--hairline, var(--becx-hairline));
	background:
		linear-gradient(90deg, rgba(255, 230, 0, .07), transparent 58%),
		var(--gunmetal, var(--becx-gunmetal));
	font-family: var(--becx-body);
	color: var(--bone, var(--becx-bone));
}

.becx-aud__inner {
	max-width: var(--maxw, 1280px);
	margin-inline: auto;
	padding: 22px clamp(16px, 4vw, 40px) 24px;
	display: grid;
	gap: 12px;
	justify-items: start;
}

.becx-aud__eyebrow {
	margin: 0;
	font-family: var(--becx-disp);
	font-size: 11.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--blaze, var(--becx-blaze));
}

.becx-aud__line {
	margin: 0;
	font-size: clamp(14.5px, 1.4vw, 16.5px);
	line-height: 1.6;
	max-width: 78ch;
	color: var(--bone, var(--becx-bone));
}

.becx-aud__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 2px;
}

.becx-aud__cta { min-height: 46px; padding-inline: 26px; }

.becx-aud__alt {
	color: var(--sand, var(--becx-sand));
	font-size: 13.5px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.becx-aud__alt:hover { color: var(--blaze, var(--becx-blaze)); }

.becx-aud__switch {
	margin-top: 2px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sand-dim, #95907f);
	font-family: var(--becx-body);
	font-size: 12.5px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.becx-aud__switch:hover { color: var(--bone, var(--becx-bone)); }

.becx-aud__chooser {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

.becx-aud__chooser[hidden] { display: none; }

.becx-aud__chooser button {
	min-height: 38px;
	padding: 0 15px;
	border: 1px solid var(--hairline-2, var(--becx-hairline-2));
	border-radius: 999px;
	background: transparent;
	color: var(--bone, var(--becx-bone));
	font-family: var(--becx-disp);
	font-size: 12.5px;
	letter-spacing: .05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color .16s, color .16s;
}

.becx-aud__chooser button:hover { border-color: var(--blaze, var(--becx-blaze)); color: var(--blaze, var(--becx-blaze)); }

.becx-aud__chooser .becx-aud__clear {
	border-style: dashed;
	color: var(--sand, var(--becx-sand));
}

.becx-aud :focus-visible {
	outline: 2px solid var(--blaze, var(--becx-blaze));
	outline-offset: 2px;
	border-radius: 6px;
}

/* -------------------------------------------------------------------------
   The no-dead-ends shelf
   Any page that cannot sell anything gets one of these, so a visitor is never
   more than one click from a checkout.
   ------------------------------------------------------------------------- */

.becx-buy--shelf {
	max-width: var(--maxw, 1280px);
	margin-inline: auto;
	margin-block: 48px;
}

.becx-shelf {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 18px;
}

.becx-card {
	display: grid;
	gap: 10px;
	align-content: start;
	padding: 18px;
	border: 1px solid var(--hairline, var(--becx-hairline));
	border-radius: 12px;
	background: var(--gunmetal, var(--becx-gunmetal));
}

.becx-card__media {
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 9px;
	overflow: hidden;
	background: var(--asphalt, var(--becx-asphalt));
	border: 1px solid var(--hairline, var(--becx-hairline));
}

.becx-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.becx-card__name {
	margin: 2px 0 0;
	font-family: var(--becx-disp);
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.25;
}

.becx-card__name a { color: var(--bone, var(--becx-bone)); text-decoration: none; }
.becx-card__name a:hover { color: var(--blaze, var(--becx-blaze)); }

.becx-card__price {
	margin: 0;
	font-family: var(--becx-disp);
	font-size: 22px;
	font-weight: 600;
	line-height: 1;
	color: var(--bone, var(--becx-bone));
	font-variant-numeric: tabular-nums;
}

.becx-card__price small {
	display: block;
	margin-top: 5px;
	font-family: var(--becx-body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sand, var(--becx-sand));
}

.becx-card__btn { width: 100%; min-height: 46px; }

/* -------------------------------------------------------------------------
   One way to buy
   The primary action is always the same two words, and it always leads to
   payment. Everything else on the page is secondary to it.
   ------------------------------------------------------------------------- */

.becx-buynow,
.becx-btn--primary.becx-card__btn {
	font-weight: 700;
	letter-spacing: .04em;
}

.becx-buynow.is-busy { opacity: .72; pointer-events: none; }

/* A phone should never lose the buy button off the bottom of a product page. */
@media (max-width: 760px) {
	.single_add_to_cart_button.becx-buynow {
		width: 100%;
		min-height: 52px;
		font-size: 16px;
	}
}

/* -------------------------------------------------------------------------
   Impressions you already have
   ------------------------------------------------------------------------- */

.becx-imp {
	font-family: var(--becx-body);
	color: var(--bone, var(--becx-bone));
	border: 1px solid var(--hairline, var(--becx-hairline));
	border-inline-start: 3px solid var(--blaze, var(--becx-blaze));
	border-radius: 14px;
	background: var(--stone, var(--becx-stone));
	padding: 26px 28px;
}

.becx-imp--inline { margin: 28px 0; }

@media (max-width: 560px) { .becx-imp { padding: 20px; } }

.becx-imp__eyebrow {
	margin: 0 0 8px;
	font-family: var(--becx-disp);
	font-size: 11.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--blaze, var(--becx-blaze));
}

.becx-imp__title {
	margin: 0 0 16px;
	font-family: var(--becx-disp);
	font-size: clamp(18px, 2.2vw, 23px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--bone, var(--becx-bone));
	max-width: 28ch;
}

.becx-imp__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
}

.becx-imp__list li {
	display: grid;
	gap: 3px;
	padding-inline-start: 18px;
	position: relative;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--sand, var(--becx-sand));
}

.becx-imp__list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: .62em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--blaze, var(--becx-blaze));
}

.becx-imp__list strong {
	color: var(--bone, var(--becx-bone));
	font-weight: 600;
}

.becx-imp__list em { font-style: normal; color: var(--blaze, var(--becx-blaze)); }

.becx-imp__foot {
	margin: 18px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--hairline, var(--becx-hairline));
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--sand, var(--becx-sand));
}

.becx-imp__foot a { color: var(--bone, var(--becx-bone)); text-underline-offset: 3px; }
.becx-imp__foot a:hover { color: var(--blaze, var(--becx-blaze)); }

/* The one-liner, where the kit question is asked. */
.becx-imp__line {
	margin: 10px 0 0;
	padding: 12px 14px;
	border: 1px solid var(--hairline, var(--becx-hairline));
	border-radius: 10px;
	background: rgba(255, 230, 0, .05);
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--sand, var(--becx-sand));
}

.becx-imp__link {
	appearance: none;
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	color: var(--blaze, var(--becx-blaze));
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.becx-imp__link:hover { color: var(--bone, var(--becx-bone)); }

/* -------------------------------------------------------------------------
   Returning customers
   ------------------------------------------------------------------------- */

.becx-welcome {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 18px;
	background: var(--gunmetal, var(--becx-gunmetal));
	border-bottom: 1px solid var(--hairline, var(--becx-hairline));
	font-family: var(--becx-body);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--sand, var(--becx-sand));
}

.becx-welcome strong { color: var(--bone, var(--becx-bone)); font-weight: 600; }

.becx-welcome__dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--blaze, var(--becx-blaze));
	box-shadow: 0 0 0 4px rgba(255, 230, 0, .16);
}

.becx-onfile {
	margin: 10px 0 0;
	padding: 12px 14px;
	border: 1px solid var(--blaze, var(--becx-blaze));
	border-radius: 10px;
	background: rgba(255, 230, 0, .07);
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--bone, var(--becx-bone));
}

.becx-onfile strong { color: var(--blaze, var(--becx-blaze)); }

/* -------------------------------------------------------------------------
   Folded on a phone
   Nothing is removed. It opens on a tap — and it stops standing between a
   decided buyer and the first field.
   ------------------------------------------------------------------------- */

.becx-kit__fold,
.becx-revs__more {
	display: none;
	appearance: none;
	width: 100%;
	min-height: 46px;
	margin-top: 12px;
	padding: 12px 16px;
	border: 1px solid var(--hairline, var(--becx-hairline));
	border-radius: 10px;
	background: rgba(255, 255, 255, .03);
	font-family: var(--becx-disp);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--blaze, var(--becx-blaze));
	cursor: pointer;
}

.becx-kit__fold:hover,
.becx-revs__more:hover { background: rgba(255, 230, 0, .08); }

@media (max-width: 899px) {
	.becx-kit--fold { padding: 16px 18px; gap: 0; }

	.becx-kit--fold .becx-kit__title {
		font-size: 16px;
		line-height: 1.35;
		margin-bottom: 0;
		max-width: none;
		letter-spacing: .01em;
	}

	.becx-kit--fold .becx-kit__lede,
	.becx-kit--fold .becx-kit__body { display: none; }

	.becx-kit--fold .becx-kit__fold { display: block; }

	.becx-kit--fold[data-open] { gap: 20px; }
	.becx-kit--fold[data-open] .becx-kit__lede { display: block; margin-top: 12px; }
	.becx-kit--fold[data-open] .becx-kit__body { display: grid; }

	.becx-revs { max-height: 220px; overflow: hidden; position: relative; }

	.becx-revs::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		bottom: 0;
		height: 90px;
		background: linear-gradient(to bottom, transparent, var(--asphalt, var(--becx-asphalt)));
		pointer-events: none;
	}

	.becx-revs[data-open] { max-height: none; }
	.becx-revs[data-open]::after { display: none; }

	.becx-revs__more { display: block; }
}

/* -------------------------------------------------------------------------
   Sticky buy bar — phones only
   The real button is seven screens down a product page, below the gallery,
   the description and every required option. This brings it to the thumb.
   ------------------------------------------------------------------------- */

.becx-sticky {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 9990;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
	background: rgba(11, 11, 10, .93);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--hairline, var(--becx-hairline));
	font-family: var(--becx-body);
	transform: translateY(0);
	transition: transform .26s var(--becx-ease), opacity .26s var(--becx-ease);
}

.becx-sticky.is-hidden {
	transform: translateY(110%);
	opacity: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.becx-sticky { transition: none; }
}

.becx-sticky__meta {
	display: grid;
	gap: 1px;
	min-width: 0;
}

.becx-sticky__label {
	font-family: var(--becx-disp);
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sand, var(--becx-sand));
}

.becx-sticky__price {
	font-family: var(--becx-disp);
	font-size: 18px;
	font-weight: 600;
	color: var(--bone, var(--becx-bone));
	white-space: nowrap;
}

.becx-sticky__btn {
	appearance: none;
	flex: 1 1 auto;
	min-height: 50px;
	border: 0;
	border-radius: 10px;
	background: var(--blaze, var(--becx-blaze));
	color: #000;
	font-family: var(--becx-disp);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
}

.becx-sticky__btn:active { transform: scale(.985); }

.becx-sticky__btn:focus-visible {
	outline: 2px solid var(--bone, var(--becx-bone));
	outline-offset: 2px;
}

/* Never let the bar cover the last of the page. */
.becx-has-sticky { padding-bottom: 86px; }

@media (min-width: 761px) {
	.becx-sticky { display: none; }
	.becx-has-sticky { padding-bottom: 0; }
}

/* The chat bubble and the buy bar were landing on the same corner of the
   phone screen, with the bubble covering the button. The bubble moves up. */
@media (max-width: 760px) {
	.becx-has-sticky #formilla-frame,
	.becx-has-sticky iframe[id^="formilla"],
	.becx-has-sticky [class*="formilla-frame"] {
		bottom: 92px !important;
	}
}

/* -------------------------------------------------------------------------
   Superseded products
   Kept live so their customer reviews survive, but no longer for sale.
   ------------------------------------------------------------------------- */

.becx-legacy {
	margin: 0 0 22px;
	padding: 18px 20px;
	border: 1px solid var(--hairline, var(--becx-hairline));
	border-inline-start: 3px solid var(--sand, var(--becx-sand));
	border-radius: 12px;
	background: var(--stone, var(--becx-stone));
	font-family: var(--becx-body);
}

.becx-legacy__eyebrow {
	margin: 0 0 6px;
	font-family: var(--becx-disp);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--sand, var(--becx-sand));
}

.becx-legacy__body {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--bone, var(--becx-bone));
}

.becx-legacy__btn { margin-top: 14px; display: inline-block; }