/* HEISENBERG THEME - dark mode overrides (skin-only, reversible).
   Mechanism: class `hba-dark` on <html> (set inline in _Head.cshtml before first paint; toggled by scripts/hba-theme.js).
   Everything below is scoped under html.hba-dark except the toggle button's base styles (needed in both modes).
   Loads AFTER custom.css (dev.frontmend.com) so it cascades over the project styles.
   Heisenberg red (--theme-action-color: #bc241f) is left untouched: buttons, prices and accents keep the light-theme red.
   Revert: remove the HEISENBERG THEME lines from _Head.cshtml and _BodyClose.cshtml. */

/* ---------- toggle button (both modes) ---------- */
.hba-theme-li { vertical-align: middle; }
.hba-theme-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2rem; height: 2rem; padding: 0; margin: 0 2px 0 0;
	border: 1px solid transparent; border-radius: 50%; background: transparent;
	color: var(--neutral-darkest-color, #111); cursor: pointer; vertical-align: middle; line-height: 1;
	transition: color .2s, border-color .2s;
}
.hba-theme-toggle:hover, .hba-theme-toggle:focus { color: var(--theme-action-color, #bc241f); background: transparent; }
.hba-theme-toggle:focus { outline: none; }
.hba-theme-toggle:focus-visible { outline: 2px solid var(--theme-action-color, #bc241f); outline-offset: 2px; }
.hba-theme-toggle svg { width: 18px; height: 18px; display: block; }
.hba-theme-toggle .hba-ico-sun { display: none; }
html.hba-dark .hba-theme-toggle .hba-ico-sun { display: block; }
html.hba-dark .hba-theme-toggle .hba-ico-moon { display: none; }

/* NODs toggle icon - OPTION C (Gabe, Telegram 2026-09-07 18:40 "Let's do option C").
   Higgsfield-rendered skull-in-helmet PNGs, 160x160 RGBA, drawn at 30 CSS px (the 160px file stays the retina source):
     light theme -> /Skins/Default/images/hba/nods_c_day_light.png   (goggles stowed UP, dark lines)
     dark  theme -> /Skins/Default/images/hba/nods_c_night_dark.png  (goggles DOWN, green lenses, white lines)
   The green phosphor is baked into the PNG, so unlike the earlier inline-SVG build nothing here is
   load-bearing for colour. EVERY rule in this block is duplicated verbatim in the style block hba-theme.js
   injects (id hba-theme-v2-css) so the pill survives a stale copy of this stylesheet - KEEP THE TWO IN SYNC.
   SIZE PASS 2026-09-07 21:06 (Gabe, phone screenshot of the mobile header: "Can you make the day and night mode
   toggle a little smaller"): icon 40 -> 30 px, label 12 -> 11 px, padding 4px 14px 4px 8px -> 2px 10px 2px 6px
   (pill 50 -> 36 px tall, closer to the LOGIN/CART links' own 22.6 px row). Under 768 px - Bootstrap's xs, the
   same breakpoint that hides Wishlist - the label goes sr-only, so the pill is a ~36x36 icon-only button that
   shares one row with Logout/Cart/Checkout instead of wrapping onto its own row. Sizing only: same PNGs, same
   sound, same behaviour.
   Parked for revert: hba-dark.css.prev_bigtoggle (the 40 px labelled pill), hba-dark.css.prev_svg_nods_optionA
   (inline-SVG NODs + .lens phosphor rules), hba-dark.css.prev_sunmoon (the shipped sun/moon build).
   The sun/moon rules above are left in place. */
.hba-theme-toggle {
	position: relative; width: auto; height: auto; padding: 2px 10px 2px 6px;
	border: 1.5px solid currentColor; border-radius: 999px; gap: 6px;
	font: 700 11px/1 "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
	letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.hba-theme-toggle .hba-theme-label { display: inline-block; }
.hba-theme-toggle .hba-ico-nods { width: 30px; height: 30px; display: block; flex: 0 0 auto; object-fit: contain; }
.hba-theme-toggle .hba-ico-nods-on { display: none; }
html.hba-dark .hba-theme-toggle .hba-ico-nods-on { display: block; }
html.hba-dark .hba-theme-toggle .hba-ico-nods-off { display: none; }
/* mobile (<=820px, was <768px until 2026-09-09): icon-only pill - the label stays in the DOM, clipped to 1px, so assistive tech still reads it
   (the button also carries aria-label="Toggle night mode" + aria-pressed).
   border-radius drops 999px -> 8px ONLY here: the skin's own custom.css line 108 puts corner-shape:bevel on every
   button, so a 999px radius on a ~square box bevels into a full diamond whose edge cuts across the skull art.
   8px gives a beveled octagon badge - same angular language as the desktop pill, artwork clear. Desktop keeps 999px.
   (To go back to the diamond: delete this one border-radius declaration in BOTH copies of the rule.) */
@media (max-width: 820px) {
	.hba-theme-toggle { padding: 2px; gap: 0; border-radius: 8px; }
	.hba-theme-toggle .hba-theme-label {
		position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
		overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); border: 0; white-space: nowrap;
	}
}
/* fallback slot: only used when the skin hides the utility row (checkout page) */
.hba-theme-float { position: absolute; top: 12px; right: 12px; z-index: 5; }
body:has(.checkout-page) .header-row { position: relative; }

/* ---------- palette + project-variable overrides ---------- */
html.hba-dark {
	color-scheme: dark;
	--hba-bg: #111;
	--hba-panel: #1c1c1e;
	--hba-panel-2: #232326;
	--hba-border: #333;
	--hba-border-strong: #444;
	--hba-text: #e8e8e8;
	--hba-heading: #f2f2f2;
	--hba-muted: #a0a0a0;
	--hba-red: #bc241f;          /* Heisenberg red, unchanged */
	--hba-red-text: #e0524c;     /* lighter tint ONLY for small error/validation text on dark */
	--hba-white-well: #fff;      /* media wells stay white */
	/* project variables consumed by custom.css / asc.css */
	--neutral-darkest-color: var(--hba-text);
	--neutral-light-color: var(--hba-border);
	--neutral-medium-color: var(--hba-muted);
	--common-border-color: var(--hba-border);
}

/* ---------- page canvas + type ---------- */
html.hba-dark, html.hba-dark body { background-color: var(--hba-bg); color: var(--hba-text); }
html.hba-dark .background, html.hba-dark .body-background, html.hba-dark .main-content-wrapper, html.hba-dark #popup-body { background: var(--hba-bg); }
html.hba-dark h1, html.hba-dark h2, html.hba-dark h3, html.hba-dark h4, html.hba-dark h5, html.hba-dark h6,
html.hba-dark .h1, html.hba-dark .h2, html.hba-dark .h3, html.hba-dark .group-header, html.hba-dark legend,
html.hba-dark .checkout-header, html.hba-dark .order-header { color: var(--hba-heading); }
html.hba-dark .group-header, html.hba-dark legend, html.hba-dark .page-header { border-bottom-color: var(--hba-border); }
html.hba-dark hr { border-top-color: var(--hba-border); }
html.hba-dark a:not(.btn) { color: #fff; }
html.hba-dark a:not(.btn):hover, html.hba-dark a:not(.btn):focus { color: var(--hba-red); }
html.hba-dark .text-muted, html.hba-dark .help-block, html.hba-dark .form-text, html.hba-dark .form-description,
html.hba-dark .form-label-suffix-optional, html.hba-dark .cart-detail, html.hba-dark .kit-item-description,
html.hba-dark .orderconfirmation-thanks, html.hba-dark .productsku, html.hba-dark .product-listing .productsku,
html.hba-dark .breadcrumb, html.hba-dark .regular-price, html.hba-dark .pagebrake span,
html.hba-dark .tsearch_results .tSearchTopX, html.hba-dark .tsearch_results .tSearchViewAll { color: var(--hba-muted); }
html.hba-dark .product-description-wrap, html.hba-dark .summary-content, html.hba-dark .tab-pane, html.hba-dark .well,
html.hba-dark .panel-body, html.hba-dark .modal-body, html.hba-dark .checkout-content, html.hba-dark .order-details { color: var(--hba-text); }
html.hba-dark ::placeholder { color: #8a8a8a; opacity: 1; }
html.hba-dark mark, html.hba-dark #tsearch_results mark { background-color: #4a4a10; color: var(--hba-text); }
html.hba-dark .entitychecktext i { background-color: #b59b00; color: #111; }
html.hba-dark code, html.hba-dark pre { background-color: var(--hba-panel-2); color: var(--hba-text); border-color: var(--hba-border); }
html.hba-dark blockquote { border-left-color: var(--hba-border-strong); }
html.hba-dark a[disabled] { color: var(--hba-muted); }

/* ---------- header / utility row / search ---------- */
html.hba-dark .header-row { background-color: var(--hba-bg) !important; }
html.hba-dark .main-header { background: var(--hba-bg); box-shadow: none; }
html.hba-dark .header-row .header-cart .user-links a { color: var(--hba-text); }
html.hba-dark .header-row .header-cart .user-links a:hover, html.hba-dark .header-row .header-cart .user-links a:focus { color: var(--hba-red); }
html.hba-dark .header-row .search-form-group { background-color: var(--hba-panel); border-color: var(--hba-border-strong); }
html.hba-dark .header-row .search-form-group:hover, html.hba-dark .header-row .search-form-group:focus-within { border-color: var(--hba-red); }
html.hba-dark .header-row .search-form-group input.form-control.search-box { background-color: transparent; color: var(--hba-text); }
html.hba-dark .header-row .search-form-group .search-go::after { color: var(--hba-text); }
html.hba-dark .header-right, html.hba-dark .header-phone-number, html.hba-dark .top-header-left { color: var(--hba-text); }
html.hba-dark #tsearch_results, html.hba-dark .tsearch_results { background-color: var(--hba-panel); border-color: var(--hba-border-strong); color: var(--hba-text); }
html.hba-dark .tsearch_results ul li { border-top-color: var(--hba-border); }

/* ---------- navbar + dropdowns / mega menu ---------- */
html.hba-dark .navbar-default, html.hba-dark .navbar.navbar-default.topnav { background-color: transparent; box-shadow: none; border-color: var(--hba-border); }
html.hba-dark .navbar-default .navbar-collapse { border-color: var(--hba-border); }
html.hba-dark .navbar-default .navbar-brand, html.hba-dark .navbar-default .navbar-nav > li > a, html.hba-dark .navbar-default .navbar-nav a { color: var(--hba-text); text-shadow: none; }
html.hba-dark .navbar-default .navbar-nav > li > a:hover, html.hba-dark .navbar-default .navbar-nav > li > a:focus,
html.hba-dark .navbar-default .navbar-nav a:hover, html.hba-dark .navbar-default .navbar-nav a:focus,
html.hba-dark .navbar-default .navbar-nav > .open > a, html.hba-dark .navbar-default .navbar-nav > .open > a:hover, html.hba-dark .navbar-default .navbar-nav > .open > a:focus { color: var(--hba-red); background-color: rgba(255,255,255,.06); }
html.hba-dark .navbar-default .navbar-toggle .icon-bar { background-color: var(--hba-text); }
html.hba-dark .navbar-default .navbar-toggle:hover .icon-bar, html.hba-dark .navbar-default .navbar-toggle:focus .icon-bar { background-color: var(--hba-red); }
html.hba-dark .dropdown-menu { background-color: var(--hba-panel); border-color: var(--hba-border-strong); box-shadow: 0 8px 24px rgba(0,0,0,.6); color: var(--hba-text); }
html.hba-dark .dropdown-menu > li > a, html.hba-dark .dropdown-menu a { color: var(--hba-text) !important; }
html.hba-dark .dropdown-menu > li > a:hover, html.hba-dark .dropdown-menu > li > a:focus, html.hba-dark .dropdown-menu a:hover, html.hba-dark .dropdown-menu a:focus { color: var(--hba-red) !important; background-color: rgba(255,255,255,.04); }
html.hba-dark .dropdown-menu .divider { background-color: var(--hba-border); }
html.hba-dark .dropdown-menu > .active > a, html.hba-dark .dropdown-menu > .active > a:hover { background-color: var(--hba-red); color: #fff !important; }
html.hba-dark .navbar-nav .dropdown-menu .dropdown-menu > li { background-color: var(--hba-panel-2); border-color: var(--hba-border); }
html.hba-dark .navbar-nav .dropdown-menu a img { background-color: var(--hba-white-well); border-color: var(--hba-border-strong); padding: 3px; }
@media (max-width: 767px) {
	html.hba-dark .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: var(--hba-text) !important; }
	html.hba-dark .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, html.hba-dark .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: var(--hba-red) !important; }
}

/* ---------- breadcrumb ---------- */
html.hba-dark .breadcrumb { background-color: transparent; color: var(--hba-muted); }
html.hba-dark .breadcrumb a { color: var(--hba-text); }
html.hba-dark .breadcrumb a:hover, html.hba-dark .breadcrumb a:focus { color: var(--hba-red); }
html.hba-dark .breadcrumb > li + li:before { color: #666; }
html.hba-dark .breadcrumb > .active { color: var(--hba-muted); }

/* ---------- forms / inputs ---------- */
html.hba-dark input:not([type="radio"], [type="checkbox"], [type="button"], [type="submit"], [type="image"]),
html.hba-dark select, html.hba-dark textarea, html.hba-dark .form-control {
	background-color: var(--hba-panel); color: var(--hba-text); border-color: var(--hba-border-strong); box-shadow: none;
}
html.hba-dark .form-control:hover, html.hba-dark input:hover, html.hba-dark select:hover, html.hba-dark textarea:hover { border-color: #666; }
html.hba-dark .form-control:focus, html.hba-dark input:focus, html.hba-dark select:focus, html.hba-dark textarea:focus { border-color: var(--hba-red); box-shadow: 0 0 0 2px rgba(188,36,31,.35); outline: none; }
html.hba-dark select option { background-color: var(--hba-panel); color: var(--hba-text); }
html.hba-dark #variantSelector option:disabled { background-color: #333; color: #777; }
html.hba-dark .form-control[disabled], html.hba-dark .form-control[readonly], html.hba-dark fieldset[disabled] .form-control, html.hba-dark input[disabled] { background-color: #2a2a2d; color: var(--hba-muted); }
html.hba-dark .input-group-addon { background-color: var(--hba-panel-2); border-color: var(--hba-border-strong); color: var(--hba-text); }
html.hba-dark input:is([type="radio"], [type="checkbox"]) { border-color: #888; background-color: transparent; }
html.hba-dark input:is([type="radio"], [type="checkbox"]):checked { background-color: var(--hba-text); border-color: var(--hba-text); }
html.hba-dark input:is([type="radio"], [type="checkbox"]):focus-visible { outline: 2px solid var(--hba-red); outline-offset: 2px; }
html.hba-dark label, html.hba-dark .checkbox-label, html.hba-dark .form-label, html.hba-dark .control-label, html.hba-dark .radio label, html.hba-dark .checkbox label { color: var(--hba-text); }
html.hba-dark .form-label-prefix-required, html.hba-dark .form-label-suffix-required { color: var(--hba-red-text); }
html.hba-dark .field-validation-error, html.hba-dark .text-danger, html.hba-dark .has-error .help-block, html.hba-dark .has-error .control-label, html.hba-dark .has-error .form-label,
html.hba-dark .has-error .form-control-feedback::before, html.hba-dark .braintree-hosted-fields-invalid + span::before, html.hba-dark .shipping-tax-estimator-address .error, html.hba-dark .admin-alert-text { color: var(--hba-red-text); }
html.hba-dark .has-error .form-control, html.hba-dark .input-validation-error, html.hba-dark .address-control .input-validation-error { border-color: var(--hba-red-text); box-shadow: none; }
html.hba-dark .has-error .form-control:focus, html.hba-dark .address-control .input-validation-error:focus { border-color: var(--hba-red-text); box-shadow: 0 0 0 2px rgba(224,82,76,.35); }
html.hba-dark .has-success .form-control-feedback::before, html.hba-dark .braintree-hosted-fields-valid + span::before, html.hba-dark .in-stock-hint, html.hba-dark .text-success { color: #5fd070; }
html.hba-dark .has-success .form-control { border-color: #3e8e4a; }
html.hba-dark .out-stock-hint { color: var(--hba-red-text); }
html.hba-dark .secured-form { background-color: var(--hba-panel); border-color: var(--hba-border-strong); }
html.hba-dark .login-layout-table { border-bottom-color: var(--hba-border); }

/* ---------- buttons (red stays red) ---------- */
html.hba-dark .btn-default, html.hba-dark input.btn-default { background-color: var(--hba-panel); border-color: var(--hba-red); color: #fff; }
html.hba-dark .btn-default:hover, html.hba-dark .btn-default:focus, html.hba-dark input.btn-default:hover, html.hba-dark input.btn-default:focus { background-color: var(--hba-red); border-color: var(--hba-red); color: #fff; }
html.hba-dark .btn-primary, html.hba-dark .btn-link { background-color: var(--hba-red); border-color: var(--hba-red); color: #fff; }
html.hba-dark .btn-primary:hover, html.hba-dark .btn-primary:focus, html.hba-dark .btn-link:hover, html.hba-dark .btn-link:focus { background-color: #d42a24; border-color: #d42a24; color: #fff; }
html.hba-dark .btn-inverse { color: var(--hba-text); background-color: var(--hba-panel-2); border-color: var(--hba-border-strong); }
html.hba-dark .btn.disabled, html.hba-dark .btn[disabled] { opacity: .5; }
html.hba-dark .button-transparent { background: transparent; color: inherit; }
html.hba-dark .sub-entity-grid-item > .sub-entity-link.btn { color: var(--hba-text); background-color: var(--hba-panel); border-color: var(--hba-border-strong); }
html.hba-dark .btn:focus-visible, html.hba-dark button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- alerts / notices ---------- */
html.hba-dark .notice, html.hba-dark .alert { border-width: 1px; }
html.hba-dark .notice-info, html.hba-dark .alert-info { background-color: rgba(49,112,143,.22); border-color: #3b7f9c; color: #a9dcf0; }
html.hba-dark .notice-success, html.hba-dark .alert-success, html.hba-dark .bg-success { background-color: rgba(2,131,2,.2); border-color: #2f8f3a; color: #a3e3ab; }
html.hba-dark .notice-warning, html.hba-dark .alert-warning, html.hba-dark .bg-warning, html.hba-dark #browser-detection-notice { background-color: rgba(165,97,0,.22); border-color: #a56100; color: #f3d38a; }
html.hba-dark .notice-failure, html.hba-dark .alert-danger, html.hba-dark .bg-danger { background-color: rgba(164,25,21,.22); border-color: #a41915; color: #f5a5a1; }
html.hba-dark .notice .alert-link, html.hba-dark .alert .alert-link { color: #fff; }
html.hba-dark .block-success .checkout-header { color: #5fd070; border-bottom-color: #2f8f3a; }
html.hba-dark .block-danger .checkout-header { color: var(--hba-red-text); border-bottom-color: #a41915; }
html.hba-dark .admin-alert-wrap { background-color: #5a5200; }

/* ---------- home ---------- */
html.hba-dark .compunixSlider { background-color: var(--hba-bg); }
html.hba-dark .compunixSlider .slick-prev::before, html.hba-dark .compunixSlider .slick-next::before { color: rgba(255,255,255,.75); }
html.hba-dark .home-featured-brands .img-thumbnail, html.hba-dark .img-thumbnail, html.hba-dark .thumbnail { background-color: var(--hba-white-well); border-color: var(--hba-border-strong); }
html.hba-dark .featured-brand-image-wrap, html.hba-dark .grid-item-image-wrap { background-color: var(--hba-white-well); border-radius: .25rem; }

/* ---------- product / category tiles (white card behind the image) ---------- */
html.hba-dark .product-listing.grid a, html.hba-dark .category-listing a { background-color: transparent; border-color: var(--hba-border); }
html.hba-dark .product-listing.grid a > img, html.hba-dark .product-listing.grid img.product-image, html.hba-dark .category-listing a > img, html.hba-dark .category-listing img { background-color: var(--hba-white-well); padding: 6px; border-radius: .25rem; }
html.hba-dark .product-listing.grid a :not(h2):not(h3):not(.regular-price):not(.regular-price span):not(.sale-price):not(.sale-price span):not(.exactFitment):not(.productsku) { color: var(--hba-text); }
html.hba-dark :is(.product-listing, .category-listing) :is(h2, h3) { color: var(--hba-heading); }
html.hba-dark :is(.product-listing, .category-listing) a:is(:hover, :focus) :is(h2, h3) { color: var(--hba-red); }
html.hba-dark .product-listing.grid li:hover { background-color: transparent !important; }
html.hba-dark ul.condensed li:nth-child(odd) { background: var(--hba-panel); }
html.hba-dark .product-listing .product-on-sale { color: #fff !important; }
html.hba-dark .grid-item-inner, html.hba-dark .list-item-inner { color: var(--hba-text); }
html.hba-dark .list-item { border-bottom-color: var(--hba-border); }

/* ---------- prices ---------- */
html.hba-dark .price-wrap, html.hba-dark .variant-price, html.hba-dark .product-page .price-wrap .variant-price, html.hba-dark .price-per-round-boxcase { color: #fff; }
html.hba-dark .sale-price, html.hba-dark .level-price, html.hba-dark .promotion-call-to-action { color: var(--hba-red); }
html.hba-dark .regular-price { color: var(--hba-muted); }

/* ---------- product page ---------- */
html.hba-dark .product-page-top { background: transparent; }
html.hba-dark .product-page .image-wrap, html.hba-dark .product-page .product-image-wrap { background-color: var(--hba-white-well); border-radius: .3rem; padding: 10px; color: #111; }
html.hba-dark .product-page .image-wrap a:not(.btn), html.hba-dark .product-page .image-wrap button, html.hba-dark .product-page .image-wrap .pop-large-link { color: #111; }
html.hba-dark .product-page .image-wrap a:not(.btn):hover, html.hba-dark .product-page .image-wrap .pop-large-link:hover { color: var(--hba-red); }
html.hba-dark .hba-spin-wrap, html.hba-dark .hba-spin-video { background-color: var(--hba-white-well); }
html.hba-dark .product-manufacturer-icon { display: inline-block; background-color: var(--hba-white-well); padding: 4px 8px; margin: 4px 0 8px 8px; border-radius: .3rem; line-height: 0; }
html.hba-dark .product-brand-img { background-color: var(--hba-white-well); }
html.hba-dark .summary-content, html.hba-dark .description-heading { border-color: var(--hba-border); }
html.hba-dark .variant-info-wrap { border-top-color: var(--hba-border); }
html.hba-dark .variant-dropdown-buttons button { background-color: var(--hba-panel); border-color: var(--hba-border-strong); color: var(--hba-text); }
html.hba-dark .variant-dropdown-buttons button:hover, html.hba-dark .variant-dropdown-buttons button:focus, html.hba-dark .variant-dropdown-buttons button.active { border-color: var(--hba-red); color: #fff; background-color: rgba(188,36,31,.18); }
html.hba-dark .variant-info-wrap fieldset label { background-color: var(--hba-panel); border-color: var(--hba-border-strong); color: var(--hba-text); }
html.hba-dark .variant-info-wrap fieldset label:hover, html.hba-dark .variant-info-wrap fieldset label:focus, html.hba-dark .variant-info-wrap fieldset label:has(input:checked) { background-color: rgba(188,36,31,.18); border-color: var(--hba-red); color: #fff; }
html.hba-dark dl.product-specs-table { border-color: var(--hba-border); }
html.hba-dark .product-specs-table > div:not(:first-child) dt, html.hba-dark .product-specs-table > div:not(:first-child) dd { border-top-color: var(--hba-border); }
html.hba-dark .product-specs-table > div:nth-child(odd) dt, html.hba-dark .product-specs-table > div:nth-child(odd) dd { background-color: var(--hba-panel); }
html.hba-dark .product-specs-table dt { border-right-color: var(--hba-border); }
html.hba-dark .product-banner { background: var(--hba-panel); box-shadow: none; border-color: var(--hba-border); }
/* mail icon is a dark GIF background: invert the whole link, so pre-filter colours are set to their inverse */
html.hba-dark a.email-a-friend-link:not(.btn) { filter: invert(1) hue-rotate(180deg); color: #000; }
html.hba-dark a.email-a-friend-link:not(.btn):hover, html.hba-dark a.email-a-friend-link:not(.btn):focus { color: var(--hba-red); }
/* tabs (DESCRIPTION / RATINGS) */
html.hba-dark .nav-tabs { border-bottom-color: var(--hba-border); }
html.hba-dark .nav-tabs > li > a { color: var(--hba-text); background-color: transparent; border-color: transparent; }
html.hba-dark .nav-tabs > li > a:hover, html.hba-dark .nav-tabs > li > a:focus { color: var(--hba-red); background-color: transparent; border-color: transparent; }
html.hba-dark .nav-tabs > li.active > a, html.hba-dark .nav-tabs > li.active > a:hover, html.hba-dark .nav-tabs > li.active > a:focus { color: #fff; background-color: var(--hba-panel); border-color: var(--hba-border) var(--hba-border) transparent; }
html.hba-dark .tab-content > .tab-pane { background: var(--hba-panel); border-color: var(--hba-border); color: var(--hba-text); }
html.hba-dark .rating-comment-helpfulness-legend { color: inherit; }
html.hba-dark .downloads-page .related-product-wrap { box-shadow: 0 0 2px rgba(255,255,255,.2); }

/* ---------- category filters (ISearch3) ---------- */
html.hba-dark .searchbarheader, html.hba-dark div#pagecontrols { background: transparent; box-shadow: none; border-color: var(--hba-border); }
html.hba-dark #ISearch3FilterForm, html.hba-dark .filtercontainer { background: transparent; color: var(--hba-text); }
html.hba-dark .filtercontainer .filterlist, html.hba-dark .filterlist { background: transparent; color: var(--hba-text); }
html.hba-dark .filtertitlecontainer, html.hba-dark .filtertitle, html.hba-dark .filterlist label, html.hba-dark .filterlist .productcount, html.hba-dark .entitychecktext { color: var(--hba-text); }
html.hba-dark .filterlist label:hover, html.hba-dark .filterlist label:focus { color: var(--hba-red); }
html.hba-dark #filterholder fieldset:not(:first-of-type) { border-top-color: var(--hba-border); }
html.hba-dark .filterholder { border-right-color: var(--hba-border); }
html.hba-dark #ISearch3PriceSlider-Container input { background: var(--hba-panel); color: var(--hba-text); }
html.hba-dark .crumbs .crumb { background-color: var(--hba-panel); border-color: var(--hba-border-strong); color: var(--hba-text); }
html.hba-dark .crumbs .crumb i { color: var(--hba-red-text); }
html.hba-dark .navbardisplayitem { border-color: #666; }
html.hba-dark .pagebrake { border-bottom-color: var(--hba-border); }
html.hba-dark .filterToggle { color: #fff; }
html.hba-dark .ui-widget-content { background: var(--hba-panel-2); border-color: var(--hba-border-strong); color: var(--hba-text); }
html.hba-dark .ui-widget-header { background: var(--hba-red); border-color: var(--hba-red); }
html.hba-dark .ui-slider .ui-slider-handle, html.hba-dark .ui-state-default { background: #fff; border-color: #ccc; }
html.hba-dark .pagination > li > a, html.hba-dark .pagination > li > span, html.hba-dark .pager > li > a { background-color: var(--hba-panel); border-color: var(--hba-border-strong); color: #fff; }
html.hba-dark .pagination > li > a:hover, html.hba-dark .pagination > li > a:focus { background-color: var(--hba-panel-2); color: var(--hba-red); }
html.hba-dark .pagination > .active > a, html.hba-dark .pagination > .active > span { background-color: var(--hba-red); border-color: var(--hba-red); color: #fff; }
html.hba-dark .pagination > .disabled > span, html.hba-dark .pagination > .disabled > a { background-color: var(--hba-panel); color: #666; border-color: var(--hba-border); }

/* ---------- tables / wells / panels / list groups ---------- */
html.hba-dark .table > thead > tr > th, html.hba-dark .table > tbody > tr > th, html.hba-dark .table > tfoot > tr > th,
html.hba-dark .table > thead > tr > td, html.hba-dark .table > tbody > tr > td, html.hba-dark .table > tfoot > tr > td { border-top-color: var(--hba-border); }
html.hba-dark .table > thead > tr > th { border-bottom-color: var(--hba-border-strong); }
html.hba-dark .table-bordered, html.hba-dark .table-bordered > thead > tr > th, html.hba-dark .table-bordered > tbody > tr > th, html.hba-dark .table-bordered > tbody > tr > td, html.hba-dark .table-bordered > thead > tr > td { border-color: var(--hba-border); }
html.hba-dark .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--hba-panel); }
html.hba-dark .table-hover > tbody > tr:hover { background-color: var(--hba-panel-2); }
html.hba-dark .shipping-tax-estimator tr td, html.hba-dark .shipping-tax-estimator-address td, html.hba-dark .gift-card-row, html.hba-dark .wallet-card { border-color: var(--hba-border); }
html.hba-dark .well { background-color: var(--hba-panel); border-color: var(--hba-border); box-shadow: none; }
html.hba-dark .panel { background-color: var(--hba-panel); border-color: var(--hba-border); box-shadow: none; }
html.hba-dark .panel-default > .panel-heading { background-color: var(--hba-panel-2); border-color: var(--hba-border); color: var(--hba-text); }
html.hba-dark .panel-footer { background-color: var(--hba-panel-2); border-color: var(--hba-border); }
html.hba-dark .list-group-item { background-color: var(--hba-panel); border-color: var(--hba-border); color: var(--hba-text); }
html.hba-dark #order-history-wrap .order-history-table, html.hba-dark #account-header-links div a { border-color: var(--hba-border-strong); }
html.hba-dark #account-header-links div a { color: var(--hba-text); background-color: var(--hba-panel); }
html.hba-dark .discount-table-tooltip, html.hba-dark .card-code-tooltip, html.hba-dark .popover { background-color: var(--hba-panel-2); border-color: var(--hba-border-strong); color: var(--hba-text); }
html.hba-dark .brands-sidebar, html.hba-dark .nav-hint { background: var(--hba-panel-2); }
html.hba-dark .brand-list-heading { color: #fff; border-bottom-color: var(--hba-border); }
html.hba-dark .dealerResults li, html.hba-dark .locator { background-color: var(--hba-panel); border-color: var(--hba-border); box-shadow: none; }

/* ---------- cart / minicart / checkout ---------- */
html.hba-dark .modal-content { background-color: var(--hba-panel); border-color: var(--hba-border-strong); color: var(--hba-text); box-shadow: 0 10px 40px rgba(0,0,0,.7); }
html.hba-dark .modal-header, html.hba-dark .modal-footer { border-color: var(--hba-border); }
html.hba-dark .close { color: #fff; text-shadow: none; opacity: .6; }
html.hba-dark .close:hover, html.hba-dark .close:focus { color: #fff; opacity: 1; }
html.hba-dark .minicart-item { border-top-color: var(--hba-border); }
html.hba-dark .minicart-item-image-wrap img, html.hba-dark .cart-item-image, html.hba-dark .cart-upsell-image, html.hba-dark .cart-item .media-object { background-color: var(--hba-white-well); border-color: var(--hba-border-strong); padding: 3px; border-radius: .25rem; }
html.hba-dark .minicart-item-boxcase { background-color: var(--hba-panel-2); border-color: var(--hba-border-strong); color: var(--hba-text); }
html.hba-dark .minicart-contents-overlay { background: var(--hba-panel); }
html.hba-dark .switch-mini-link { color: #fff; }
html.hba-dark .switch-mini-link:hover, html.hba-dark .switch-mini-link:focus { color: var(--hba-red); }
html.hba-dark .checkout-page .checkout-block:not(.checkout-order-notes) { border-color: var(--hba-border); background-color: transparent; }
html.hba-dark .checkout-header, html.hba-dark .order-header { border-bottom-color: var(--hba-border); }
html.hba-dark .checkout-page .checkout-header span:has(a), html.hba-dark .checkout-status { color: var(--hba-text); }
html.hba-dark .order-details, html.hba-dark .shipping-estimator { background: var(--hba-panel); border-color: var(--hba-border); color: var(--hba-text); }
html.hba-dark .cart-item, html.hba-dark .cart-upsell-item, html.hba-dark .cart-order-option { border-bottom-color: var(--hba-border); }
html.hba-dark .order-summary-total { border-top-color: var(--hba-border-strong); }
html.hba-dark .checkout-page .cart-item-quantity .cart-delete-link { color: var(--hba-red-text); }
html.hba-dark .checkout-page .input-group .btn-default { border-color: var(--hba-border-strong); }
html.hba-dark #payment-method-choices .payment-option { background-color: var(--hba-panel); border-color: var(--hba-border-strong); }
html.hba-dark .payment-details, html.hba-dark .payment-method-options { color: var(--hba-text); }
html.hba-dark body:has(.checkout-page) .header-row { border-bottom-color: var(--hba-border); }
html.hba-dark .checkout-page .block-success .checkout-header { color: var(--hba-text); }
html.hba-dark .address-collapse-link:hover, html.hba-dark .address-collapse-link:focus { color: var(--hba-red); }
html.hba-dark .loading-message-wrap, html.hba-dark .minicart-loading { color: #fff; }
/* third-party payment fields keep their own white wells (iframes) */
html.hba-dark .card_field, html.hba-dark .card_field_50, html.hba-dark .card_field_75 { background: #fff; color: #3a3a3a; }

/* ---------- footer (already black in the light theme; keep hover red, ensure borders) ---------- */
html.hba-dark .footer-wrapper { border-top: 1px solid var(--hba-border); }
html.hba-dark .footer-list a:hover, html.hba-dark .footer-list a:focus { color: var(--hba-red); }

/* ---------- misc ---------- */
html.hba-dark .admin-link { background-color: #2d5f6b; color: #fff; }
html.hba-dark #skiptocontent a { color: #fff; }
html.hba-dark .notices:empty { display: none; }
html.hba-dark img.actionelement[src*="nopictureicon"], html.hba-dark img[src*="nopictureicon"] { background-color: var(--hba-white-well); }
html.hba-dark ::-webkit-scrollbar { width: 12px; height: 12px; }
html.hba-dark ::-webkit-scrollbar-track { background: var(--hba-bg); }
html.hba-dark ::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 6px; border: 2px solid var(--hba-bg); }

/* Brand / category grid tiles (Gabe 2026-09-08 12:31 MST: "remove the black borders around the brand logos"):
   ADNSF renders entity grid images with Bootstrap .img-thumbnail (1px border + 4px padding + radius). Drop it,
   both themes. Same treatment the theme already gives .home-featured-brands. Revert: delete this block, bump ?v=. */
img.img-thumbnail.sub-entity-grid-image, img.img-thumbnail.grid-item-image {
	border: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important;
}

/* Contact form: required fields marked with an asterisk plus a legend, instead of "(required)"
   after every single label (Cody, 2026-09-09 22:00 MST: "Where they say required can we just put
   an asterisk and then at the top put a legend or a spot where it shows that the stared areas are
   required"). The core view already ships the right hooks, so this is styling only — no view
   change, no string-resource edit, nothing to un-pick later.
   The "(required)" text is kept in the accessibility tree (font-size:0, not display:none) so
   screen readers still announce it; only the sighted label collapses to a *.
   SCOPED TO .contact-form on purpose: .form-label-suffix-required is used on checkout and account
   forms too, and a bare asterisk with no legend on those pages would be worse than the words.
   Say the word and it goes site-wide with a legend on each form.
   Revert: delete this block and bump ?v= on hba-dark.css in _Head.cshtml. */
.contact-form .form-label-suffix-required {
	font-size: 0; line-height: 0; letter-spacing: 0;
}
.contact-form .form-label-suffix-required::after {
	content: "*";
	/* NOT the `font` shorthand — `font: 700 1rem/1 inherit` is invalid CSS (inherit is not a
	   valid family in the shorthand), the whole declaration is dropped, and the asterisk then
	   inherits the font-size:0 above it and renders invisibly. Set the parts individually. */
	font-size: 15px; font-weight: 700; font-style: normal; line-height: 1;
	color: #e0342d; margin-left: .12em; vertical-align: baseline;
}
.contact-form::before {
	content: "* Required";
	display: block; margin: 0 0 16px;
	font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
	opacity: .6;
}


/* ---------- MOBILE HEADER UTILITY ROW ---------------------------------------
   Gabe, 2026-09-09 16:43 MST, phone screenshots: "on the phone the store header
   is broken - the user links wrap into three rows ... the toggle is not in the
   right spot." Desktop was and stays a single tidy row (at >=1440 px custom.css
   line ~134 gives .header-cart flex:0 0 auto and everything fits).

   WHAT WAS ACTUALLY WRONG. Measured on a byte-for-byte local replay of the live
   page (390x844, real iPhone UA — probe_before.json in this package):

     signed OUT  [NODs][Find A Gun Show Near You][Login][Cart (0)]  = 341 px
                 [Checkout]                                          <- wrapped
     signed IN   [Find A Gun Show Near You][NODs][Logout][Cart (0)]
                 [Checkout]                                          <- wrapped

   Two defects sharing one row:

   (1) THE TOGGLE MOVES. hba-theme.js and hba-shows.js both inject their <li>
       "immediately left of LOGIN" by looking up a.log-in-link. When you are
       SIGNED IN there is no a.log-in-link, so both fall back to ul.firstChild —
       and hba-shows.js is the later <script defer>, so it lands in FRONT of the
       toggle and the pill ends up buried mid-row. Signed out the pill is first,
       signed in it is second. That is the "not in the right spot".
       FIX: order:-1 on .hba-theme-li pins the pill to the head of the row in
       both states. Neither script has to change.

   (2) THE ROW IS ~48 PX TOO WIDE FOR A PHONE. 374 px of room, 422 px of links,
       so Checkout fell off. The biggest single item is the finder link at
       170.1 px. FIX: under 820 px it collapses to its own map-pin plus the word
       SHOWS (~55 px), which buys back ~115 px. The full "Find A Gun Show Near
       You" text stays IN THE DOM (font-size:0, not display:none) so the link's
       accessible name and hba-shows.js's own .hh-shows-headerlink selector and
       click handler are untouched. Same technique as
       .contact-form .form-label-suffix-required at the bottom of this file.

   WHY HERE AND NOT IN hba-shows.js: that file is the Cody seat's. The tidier
   fix — real <span> elements for the long and short labels, no font-size trick —
   is written up as a change request in this package's README. Hand it over
   rather than editing their file.

   BREAKPOINT 820 px, per the brief. 821-1439 px still wraps exactly as it did
   before this change; see README "OPEN — the 821-1439 px band" for the one-line
   switch if Gabe wants that too.

   REVERT: delete this block, put 767 back in the two toggle media queries (this
   file and hba-theme.js), bump ?v= on both. */
@media (max-width: 820px) {

	/* Give the utility row a line of its own instead of letting it fight the
	   search box for the last ~190 px of a three-across flex header
	   (asc.css line 141: .header-row .header-cart {flex:1 0 12rem}). Below
	   480 px it already had one; this is what fixes the 736-820 px band, which
	   was the worst of the lot at four rows. */
	.header-row .header-cart { flex: 1 1 100%; margin: 0; }

	/* One line, never two. nowrap is safe because the rules below leave 61 px of
	   slack at 390 px and 100 px at 430 px, signed in (the wider of the two
	   states) — measured, probe_after.json. */
	.header-row .header-cart .user-links { flex-wrap: nowrap; justify-content: center; align-items: center; }
	.header-row .header-cart .user-links > li { flex: 0 0 auto; }
	.header-row .header-cart .user-links a { padding: .25em .35em; }

	/* (1) the pill is the first thing in the row, signed in or signed out */
	.header-row .header-cart .user-links li.hba-theme-li { order: -1; }

	/* (2) "Find A Gun Show Near You" -> map-pin + SHOWS */
	.header-row .header-cart .user-links a.hh-shows-headerlink {
		/* em padding would collapse with the font, so px */
		font-size: 0; letter-spacing: 0; padding: 4px 6px;
	}
	.header-row .header-cart .user-links a.hh-shows-headerlink svg {
		/* hba-shows.js sizes this icon in em; 1em of font-size:0 is 0, so px here */
		width: 15px; height: 15px; margin-right: 4px; vertical-align: -2px;
	}
	.header-row .header-cart .user-links a.hh-shows-headerlink::after {
		content: "SHOWS";
		/* the ` / ""` form gives the generated text an empty alt, so a screen
		   reader announces only the link's real text and not "SHOWS" twice.
		   Declared twice on purpose: a browser that does not know the alt syntax
		   drops the second declaration and keeps the plain one. */
		content: "SHOWS" / "";
		font-size: .9rem; font-weight: bold; letter-spacing: .05em;
	}
}

/* Very small phones (iPhone SE 1st gen and the 320 px Android floor). At 320 px
   the rules above still come out 9 px wider than the row's content box - nothing
   clips and there is no horizontal scroll, because the overflow spills into the
   header's own 8 px padding, but it leaves no breathing room at all. Trimming the
   link padding gives back ~22 px across the five items. Nothing else changes. */
@media (max-width: 359px) {
	.header-row .header-cart .user-links a { padding: .25em .2em; }
	.header-row .header-cart .user-links a.hh-shows-headerlink { padding: 4px 3px; }
}

/* 2026-09-09 17:30 FN-Gabe: admin-only gear (.admin-link, themestyles.css fixed top:85px left:16px) sat over the night-mode pill on phones once the pill became first in the row. Park it bottom-left on phones. Customers never render this element. */
@media (max-width: 820px) { .admin-link { top: auto !important; bottom: 16px !important; } }

/* 2026-09-30 FN-Cody — Cody: "Make these distinguishable from their respective categories. A gap,
   underline, anything so that it doesn't look like a bunch of mush."
   In the Products flyout the column headers (Pistol Ammo, Rifle Ammo, Rimfire Ammo, Shotgun Ammo)
   rendered identically to the calibers under them, so each column read as one undifferentiated block.
   Level map: ul.dropdown-menu (Ammunition, Gear) > ul.dropdown-menu (column headers) > ul (calibers).
   Deliberately unscoped (not html.hba-dark) so it holds in light mode too; the red falls back to the
   literal if the custom property is not in scope. Revert: delete this block and bump hba-dark ?v=. */
/* NOTE: the nav face is Bebas Neue, a SINGLE-WEIGHT font — font-weight:700 computes back to 400 and
   buys nothing. Hierarchy here has to come from size, spacing and the rule, not from bold. */
.navbar-nav .dropdown-menu .dropdown-menu > li > a {
	font-size: 1.12em;
	letter-spacing: .07em;
	margin: 2px 10px 9px;
	padding-bottom: 5px;
	border-bottom: 2px solid var(--hba-red, #bc241f);
}
.navbar-nav .dropdown-menu .dropdown-menu > li > ul {
	margin-top: 2px;
	padding-left: 10px;
}
.navbar-nav .dropdown-menu .dropdown-menu > li > ul > li > a {
	font-weight: 400;
	letter-spacing: 0;
	opacity: .85;
}
.navbar-nav .dropdown-menu .dropdown-menu > li > ul > li > a:hover,
.navbar-nav .dropdown-menu .dropdown-menu > li > ul > li > a:focus { opacity: 1; }

/* ==== HBA PDP spec block (product_descriptions_2026-10-20) ==== */
/* Heisenberg PDP spec block - add to the skin (hba-dark.css or a new hba-pdp.css). The description HTML reads fine without it. */
#productDescription .hba-details{list-style:none;margin:0 0 1rem;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.4rem 1.2rem}
#productDescription .hba-details li{padding:.35rem 0;border-bottom:1px solid rgba(127,127,127,.25)}
#productDescription .hba-details strong{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;opacity:.7;font-weight:600}
#productDescription table.hba-specs{width:100%;max-width:640px;border-collapse:collapse;margin:0 0 1.2rem;font-variant-numeric:tabular-nums}
#productDescription table.hba-specs th,#productDescription table.hba-specs td{text-align:left;vertical-align:top;padding:.45rem .6rem;border-bottom:1px solid rgba(127,127,127,.25)}
#productDescription table.hba-specs th{width:38%;font-weight:600;white-space:nowrap}
#productDescription table.hba-specs tr:nth-child(odd){background:rgba(127,127,127,.06)}
@media (max-width:480px){#productDescription table.hba-specs th{white-space:normal;width:42%}}

/* HEISENBERG ratings hidden 2026-10-22 — Gabe: no stars until real reviews */
/* Hides the star row + "(0 Rating)" on every product card (category/manufacturer/search/Just Landed/featured/related) and the PDP
   header. Wrapper is hidden so no blank gap remains. Rollback: ratings_hide_2026-10-22/rollback.sh (restores the pre-change file). */
.product-ratings-stars { display: none !important; }

/* ===== HOME ALIGNMENT FIXES (FN-Gabe 2026-10-22, Gabe TG 14:20 + 14:38 "did you fix what I told you to fix per video?") =====
   Laptop-width video (~900-1250 px): header utility row wrapped 2-4 lines, Night Shift reel floated over the hero
   and under the Ask Heisenberg bubble, hero headline clipped on the LEFT ("OCK / E RANGE.").
   This block loads AFTER the rest of hba-dark.css but BEFORE hba-home.css, so every hero rule carries an extra
   `body` / `html` in front to out-rank hba-home.css's `#hba-home .hh-…` rules by specificity, not by order.
   Not touched: product grid, radii/corners, colors, Topic 53, _BodyClose, the claim/discount tab.
   Package + rollback: Heisenberg_HQ/projects/website_jan/home_align_2026-10-22/ (rollback.sh). */

/* ---------- FIX 3a: nothing on the home page may create horizontal scroll ----------
   ROOT CAUSE of the left-clipped headline: body:has(#hba-home){overflow-x:hidden} only hides the scrollbar - the
   viewport still had 16-230 px of horizontal scroll range (scrollbar-inclusive 100vw bleeds + the club band below),
   and focus/scrollIntoView/touchpad could shift the whole page left ("OCK", logo cut to "berg" in the video).
   (a) the brass-club band carries .hh-bleed but its own `margin: 40px 0 0` cancelled the bleed offset, so a
       100vw-wide band started at the content edge and ran off the right side (up to +232 px at 1920);
   (b) the full-width page wrapper clips horizontally. `clip` (not hidden) creates no scroll container, so
       position:sticky / fixed children (Ask Heisenberg, modals) are unaffected. Scoped to the home page. */
body #hba-home .hh-club-sec.hh-bleed { margin-left: calc(50% - 50vw); margin-right: 0; }
body:has(#hba-home) .body-background { overflow-x: clip; }

/* ---------- FIX 1: header utility row - one line at every width ----------
   Jan's asc.css lets .header-cart flex-grow from a 12rem basis and lets .user-links wrap, so between ~821 and
   1439 px the six links broke into 2-4 ragged lines beside the search box (custom.css only pins it at >=90rem).
   >= 1200: full labels, one row (measured: 614 px row + >=288 px search at 1200 with a 15 px scrollbar).
   900-1199: same row, shorter labels: NODs pill icon-only, "GUN SHOWS", cart/wishlist = icon + (count),
             checkout = icon. Link text stays in the DOM at font-size:0, so screen readers + hba-shows.js keep it.
   < 900: the stacked phone header (hba-dark.css's 820 px block) now applies up to 899 px - band rules below. */
@media (min-width: 900px) {
	.header-row { flex-wrap: nowrap; }
	.header-row .logo-wrap { flex: 0 0 auto; margin: 0; }
	.header-row .search-wrap { flex: 1 1 220px; min-width: 220px; }
	.header-row .header-cart { flex: 0 0 auto; margin: 0; }
	.header-row .header-cart .user-links { flex-wrap: nowrap; align-items: center; }
	.header-row .header-cart .user-links > li { flex: 0 0 auto; }
	.header-row .header-cart .user-links a { white-space: nowrap; }
}
@media (min-width: 900px) and (max-width: 1199.98px) {
	/* NODs pill -> icon-only badge (same treatment as phones; label kept for AT) */
	.header-row .header-cart .hba-theme-toggle { padding: 2px; gap: 0; border-radius: 8px; }
	.header-row .header-cart .hba-theme-toggle .hba-theme-label {
		position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
		overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); border: 0; white-space: nowrap;
	}
	/* "Find A Gun Show Near You" -> pin + GUN SHOWS */
	.header-row .header-cart .user-links a.hh-shows-headerlink { font-size: 0; letter-spacing: 0; padding: 4px 7px; }
	.header-row .header-cart .user-links a.hh-shows-headerlink svg { width: 15px; height: 15px; margin-right: 4px; vertical-align: -2px; }
	.header-row .header-cart .user-links a.hh-shows-headerlink::after { content: "GUN SHOWS"; content: "GUN SHOWS" / ""; font-size: .9rem; letter-spacing: .05em; }
	/* Cart / Wishlist / Checkout -> icon (+ count) */
	.header-row .header-cart .user-links a#js-show-cart,
	.header-row .header-cart .user-links a#js-show-wish,
	.header-row .header-cart .user-links a#js-header-checkout-link { font-size: 0; letter-spacing: 0; padding: 4px 7px; }
	.header-row .header-cart .user-links a#js-show-cart > span[aria-hidden],
	.header-row .header-cart .user-links a#js-show-wish > span[aria-hidden],
	.header-row .header-cart .user-links a#js-header-checkout-link > span[aria-hidden] { font-size: 1rem; }
	.header-row .header-cart .user-links a .minicart-count { font-size: .9rem; letter-spacing: .05em; margin-left: 3px; }
	.header-row .header-cart .user-links a .minicart-count::before { content: "("; }
	.header-row .header-cart .user-links a .minicart-count::after { content: ")"; }
}
/* 821-899: carry hba-dark.css's <=820 phone-header rules up to the new 900 breakpoint (copy of that block, same values) */
@media (min-width: 821px) and (max-width: 899.98px) {
	.header-row .header-cart { flex: 1 1 100%; margin: 0; }
	.header-row .header-cart .user-links { flex-wrap: nowrap; justify-content: center; align-items: center; }
	.header-row .header-cart .user-links > li { flex: 0 0 auto; }
	.header-row .header-cart .user-links a { padding: .25em .35em; }
	.header-row .header-cart .user-links li.hba-theme-li { order: -1; }
	.header-row .header-cart .user-links a.hh-shows-headerlink { font-size: 0; letter-spacing: 0; padding: 4px 6px; }
	.header-row .header-cart .user-links a.hh-shows-headerlink svg { width: 15px; height: 15px; margin-right: 4px; vertical-align: -2px; }
	.header-row .header-cart .user-links a.hh-shows-headerlink::after { content: "SHOWS"; content: "SHOWS" / ""; font-size: .9rem; font-weight: bold; letter-spacing: .05em; }
	.header-row .header-cart .hba-theme-toggle { padding: 2px; gap: 0; border-radius: 8px; }
	.header-row .header-cart .hba-theme-toggle .hba-theme-label {
		position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
		overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); border: 0; white-space: nowrap;
	}
}

/* ---------- FIX 2: hero = 2-column grid, reel in its own fixed 9:16 slot ----------
   Was: fixed 579 px hero with overflow:hidden, a 300x533 reel top-aligned in a 1.15fr/.85fr grid (it hung over
   the hero's bottom edge and sat under the fixed Ask Heisenberg bubble on short laptop windows), reel hidden <=820.
   Now: hero height follows its content; reel height = min(70vh, room left under the header and above the
   bubble), width from aspect-ratio; @heisenbergammo chip stays pinned inside the box (hba-home.css). */
html body #hba-home .hh-hero { height: auto; min-height: 0; }
html body #hba-home .hh-hero .hh-wrap {
	height: auto; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 40px; row-gap: 28px;
	padding: 40px 40px 88px;            /* 88 px bottom: the fixed Ask Heisenberg bubble (46 px + 18 px offset) clears the reel */
}
html body #hba-home .hh-hero .hh-wrap > div { min-width: 0; }
html body #hba-home .hh-reel {
	display: block; justify-self: end; align-self: center;
	height: clamp(300px, calc(100vh - 290px), min(70vh, 620px)); width: auto; aspect-ratio: 9 / 16;
}
/* tablet 768-1023: same two columns, narrower reel */
@media (max-width: 1023.98px) {
	html body #hba-home .hh-hero .hh-wrap { padding: 36px 32px 88px; column-gap: 28px; }
	html body #hba-home .hh-reel { height: clamp(280px, calc(100vh - 300px), min(60vh, 440px)); }
}
@media (min-width: 768px) and (max-width: 820px) {
	html body #hba-home .hh-hero .hh-wrap { grid-template-columns: minmax(0, 1fr) auto; align-content: center; }
}
/* phone < 768: reel full-width BELOW the text, 9:16 kept */
@media (max-width: 767.98px) {
	html body #hba-home .hh-hero .hh-wrap { grid-template-columns: minmax(0, 1fr); padding: 48px 20px 96px; }
	html body #hba-home .hh-reel { justify-self: stretch; width: 100%; height: auto; max-width: 440px; }
}

/* ---------- FIX 3b: headline never clips ----------
   One fluid size instead of 86/64/52 px steps; words are never broken - the size drops instead. */
html body #hba-home .hh-hero h1 {
	font-size: clamp(40px, calc(3.2vw + 28px), 80px);
	overflow-wrap: normal; word-break: normal; hyphens: none; max-width: 100%;
}
/* ===== /HOME ALIGNMENT FIXES ===== */

/* ===== UI OPTION C "HYBRID" (FN-Gabe 2026-10-22, Gabe 14:51 MST "i like option c hybrid") =====
   Square red CTAs kept (brand); everything else concentric: outer 12 / inner 6 (= 12 - 6px inset), 16px gutters,
   subtle card shadow. Source: ui_options_2026-10-22/options/C.css, deduped against the HOME ALIGNMENT block above
   (C's overflow / header layout / hero layout are NOT repeated - only their radii are carried here).
   Order: this block sits in hba-dark.css, which loads BEFORE hba-home.css, so home rules carry one extra `body`
   to out-rank hba-home.css's `#hba-home .hh-x` (1,1,0) rules; everything else stays low via :where().
   Never styled here: age gate / Mystery tab (#hh-age-overlay, #hh3-age, #hh3-tab, #hh3-mbox = Topic 53 lane),
   Ask Heisenberg (#askhb-root) and Claim tab (#hba-claim-tab) shadow widgets.
   Package + rollback: Heisenberg_HQ/projects/website_jan/ui_c_hybrid_2026-10-22/ (rollback.sh). */

/* --- TOKENS (dark values follow hba-dark's palette; media wells stay white) --- */
:root {
	--ui-r: 12px; --ui-ri: 6px; --ui-pad: 6px;           /* outer / inner / inset (inner = outer - inset) */
	--ui-rc: 0px; --ui-rp: 12px; --ui-rround: 50%;        /* CTAs square (brand) / search + badges / icon buttons */
	--ui-g: 16px; --ui-line: #e2e2e2; --ui-panel: #fff; --ui-well: #f5f5f5;
	--ui-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .05);
	--ui-shadow-hi: 0 2px 4px rgba(0, 0, 0, .08), 0 10px 24px rgba(0, 0, 0, .08);
}
html.hba-dark {
	--ui-line: var(--hba-border); --ui-panel: var(--hba-panel); --ui-well: var(--hba-white-well);
	--ui-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 12px rgba(0, 0, 0, .35);
	--ui-shadow-hi: 0 2px 4px rgba(0, 0, 0, .6), 0 10px 24px rgba(0, 0, 0, .5);
}

/* --- 0b. Jan's custom.css 107-108 sets `corner-shape: bevel` (Chrome 139+ only) on buttons/inputs/selects/search/
       grid images: every radius turns into a chamfer, pills into hexagons. One shape everywhere (!important: Jan's
       selectors out-rank any low-specificity reset). Topic 53 + widgets excluded (they set their own). --- */
@supports (corner-shape: round) {
	:where(*):not(#hh-age-overlay, #hh-age-overlay *, #hh3-age, #hh3-age *, #hh3-tab, #hh3-tab *, #hh3-mbox, #hh3-mbox *, #askhb-root, #hba-claim-tab) { corner-shape: round !important; }
}

/* --- 1+2 (look only; layout is home_align's): search pill, NODs badge, hamburger, reel + finder radii --- */
.header-row .search-form-group { border-radius: var(--ui-rp); overflow: hidden; }
.header-row .search-form-group input.form-control.search-box { border-radius: 0 !important; }
.header-row .header-cart .hba-theme-toggle { border-radius: var(--ui-rp); }
:where(.topnav) .navbar-toggle { border-radius: var(--ui-ri); }
body #hba-home .hh-reel { border-radius: var(--ui-r); }
body #hba-home .hh-finder-box { border-radius: var(--ui-r); }
body #hba-home .hh-finder select { border-radius: var(--ui-ri); }

/* --- 3. home buttons / chips / tiles (quick-contact pills .hh-qc keep their own rule) --- */
body #hba-home .hh-btn, body #hba-home .hh-cal { border-radius: var(--ui-rc); }
body #hba-home .hh-tiles { gap: var(--ui-g); }
body #hba-home .hh-tiles.hh-wide { margin-top: var(--ui-g); }
body #hba-home .hh-tile, body #hba-home .hh-leadtile { border-radius: var(--ui-r); }
body #hba-home .hh-arrows button, body #hba-home .hh-tile .hh-arrow { border-radius: var(--ui-rround); }

/* --- 4a. home product cards: image inset by --ui-pad, radius = outer - pad --- */
body #hba-home .hh-car { gap: var(--ui-g); align-items: stretch; }
@media (min-width: 1101px) { body #hba-home #hh-row1 { grid-auto-columns: calc((100% - 5 * var(--ui-g)) / 6); } }
@media (min-width: 821px) and (max-width: 1100px) { body #hba-home #hh-row1 { grid-auto-columns: calc((100% - 2 * var(--ui-g)) / 3); } }
body #hba-home .hh-card { border-radius: var(--ui-r); padding: var(--ui-pad); height: 100%; border: 1px solid var(--ui-line); box-shadow: var(--ui-shadow); }
body #hba-home .hh-media { border-radius: var(--ui-ri); }
body #hba-home .hh-card-body { padding: 10px calc(12px - var(--ui-pad)) calc(12px - var(--ui-pad)); }
body #hba-home .hh-name { min-height: 2.6em; }

/* --- 0. PHONES <768 (audit ui_responsive_2026-10-22 F4, coordinator 14:5x):
       (a) category / PDP / search scrolled 7px sideways at 390: Jan's <main> pads var(--common-responsive-padding)
           (= 8px) but Bootstrap .row pulls -15px. Match the row gutter to the page pad: content stays at x=8, no overhang.
       (b) the hamburger sat alone on a 4th header row: pin it top-right of the logo row (44px tap target). --- */
@media (max-width: 767.98px) {
	#maincontent main .row { margin-left: calc(var(--common-responsive-padding) * -1); margin-right: calc(var(--common-responsive-padding) * -1); }
	#maincontent main .row > [class*="col-"] { padding-left: var(--common-responsive-padding); padding-right: var(--common-responsive-padding); }
	.body-background > .container { position: relative; }
	nav .topnav.navbar { position: static; min-height: 0; }
	nav .topnav .navbar-header { position: absolute; top: 0; right: 4px; z-index: 5; }
	nav .topnav .navbar-toggle { margin: 0; padding: 14px 10px; }
	nav .topnav .navbar-brand.menu-label { display: none !important; }
}
/* (c) Gabe iPhone 15:00 "small gap/line above the hero": the grey line = Bootstrap .navbar-default 1px #e7e7e7
       border-bottom, the white strip = hba-ease's `.body-background nav{margin-bottom:4px!important}` (16px at 768).
       Home <900 only: hero butts straight against the header/nav. Desktop header untouched. */
@media (max-width: 899.98px) {
	body:has(#hba-home) .body-background nav { margin-bottom: 0 !important; }
	body:has(#hba-home) .navbar.navbar-default.topnav { border-bottom: 0 !important; }
}

/* --- 4b. category grid: 2 phone / 3 >=768 / 4 >=1200, equal gutters + heights, image well 1:1, price pinned low.
       Replaces Jan's float grid (col-* widths, a::before spacer, absolutely placed image). --- */
#productholder .product-listing.grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-g); margin: 0 !important; padding: 0; list-style: none; }
@media (min-width: 768px) { #productholder .product-listing.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { #productholder .product-listing.grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
#productholder .product-listing.grid > li.single-product-layout { width: auto !important; float: none !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; display: flex; }
#productholder .product-listing.grid > li > a { display: flex; flex-direction: column; width: 100%; padding: var(--ui-pad); border: 1px solid var(--ui-line); border-radius: var(--ui-r); background: var(--ui-panel); box-shadow: var(--ui-shadow); text-align: left; color: inherit; }
#productholder .product-listing.grid > li > a::before { content: none; display: none; }
#productholder .product-listing.grid img.product-image { position: static !important; inset: auto; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; object-fit: contain; background: var(--ui-well); border-radius: var(--ui-ri); padding: 8%; margin: 0 0 10px !important; }
#productholder .product-listing.grid h2 { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; line-height: 1.25; margin: 0 4px 8px !important; text-align: left; font-size: 15px !important; }
#productholder .product-listing.grid .productprice { margin: auto 4px 0 !important; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; text-align: left; }
#productholder .product-listing.grid .productprice .price-wrap, #productholder .product-listing.grid .variant-price { margin: 0 !important; }   /* asc.css .price-wrap > div 0.25rem !important */
#productholder .product-listing.grid .variant-price > span { display: none; }
#productholder .product-listing.grid .productsku { margin: 6px 4px 2px !important; text-align: left; font-size: 11px; }   /* bundle: .grid a > div margin 0 !important */
.filterToggle { border-radius: var(--ui-rc) !important; }
#CurrentPageSort { border-radius: var(--ui-ri) !important; }

/* --- 5. PDP buy box: pack buttons -> qty share the inner radius; Add to Cart stays a square red CTA --- */
#buttonVariantContainer button.hba-pk { border-radius: var(--ui-ri) !important; }
.add-to-cart-wrap .form-control.quantity-field { border-radius: var(--ui-ri) !important; height: 44px; }   /* (0,3,0) = asc.css .add-to-cart-group rule, later wins */
.add-to-cart-wrap .add-to-cart, .add-to-cart-wrap .add-to-wishlist { border-radius: var(--ui-rc) !important; min-height: 44px; }
.product-info-column .hc-box { border-radius: var(--ui-r) !important; box-shadow: var(--ui-shadow); }
.product-info-column .hc-box :is(input, button, a.hc-join) { border-radius: var(--ui-ri) !important; }
:where(.product-image-column) .medium-image-wrap img { border-radius: var(--ui-r); }
.nav-tabs > li > a { border-radius: var(--ui-ri) var(--ui-ri) 0 0 !important; }
.tab-content { border-radius: 0 var(--ui-r) var(--ui-r) var(--ui-r) !important; }

/* --- 6. footer blocks --- */
:where(footer) .social-links :is(a, img) { border-radius: var(--ui-rround); }
:where(footer) img[src*="payment-methods"] { border-radius: var(--ui-ri); }

/* --- LOOK C: subtle elevation, brand-square CTAs --- */
body #hba-home .hh-card:hover { transform: translateY(-2px); box-shadow: var(--ui-shadow-hi); }
#productholder .product-listing.grid > li > a:hover { box-shadow: var(--ui-shadow-hi); }
body #hba-home .hh-finder-box { box-shadow: var(--ui-shadow), 0 16px 40px rgba(0, 0, 0, .08); }
body #hba-home .hh-btn-red, .add-to-cart-wrap .add-to-cart { letter-spacing: .08em; }
html:not(.hba-dark) .header-row .search-form-group { background: #fff !important; }
:where(.navbar.navbar-default).topnav { border-bottom: 1px solid var(--ui-line) !important; }
#filterholder fieldset { border: 1px solid var(--ui-line); border-radius: var(--ui-r); padding: 12px 14px; margin-bottom: var(--ui-g); box-shadow: var(--ui-shadow); }
/* ===== /UI OPTION C "HYBRID" ===== */

/* ===== HEADER POLISH (FN-Gabe 2026-10-22, Gabe 15:17 MST video "The search bar looks off with the buttons below it when I make the window smaller") =====
   Measured (probe/FINDINGS.md): row 1 mixed three heights (search 47.6 / NODs badge 36 / links 23-25 px), the search
   box width jumped 400 -> 395 -> 315 -> 400 -> 310 px while the window narrowed (max-width 400 + auto margins in a
   flex column whose size flips at the 1200 label switch), and from 899 px down to 821 px the header broke into
   logo + search / buttons centred on a 2nd line / nav (home_align's carried phone band) = the frames in the video.
   Now >= 821 px: row 1 = grid  logo | search | utilities  on one centre line; search + every utility item 44 px tall;
   search width grows continuously with the window (no jump at any breakpoint); nav row flush with the logo, 12 px gap.
   Phones (<= 820 px, hba-dark.css's own phone header) untouched.
   Specificity: every rule starts `body header.header-row` (0,1,2+) so it out-ranks home_align's `.header-row ...`
   rules of the same tail; c_hybrid's `!important` on the search input radius is matched with !important here.
   OVERRIDES of earlier blocks (noted per rule below):
     [HA-1] home_align FIX 1 >=900: flex/nowrap row, .search-wrap flex 1 1 220px, .header-cart flex 0 0 auto -> grid.
     [HA-2] home_align 900-1199: link padding 4px 7px, badge padding 2px / radius 8px -> 44 px items, 0 10px pad, 12 px radius.
     [HA-3] home_align 821-899 band (header-cart 100% wide / centred 2nd line) -> same one-line grid as desktop.
     [CH-1] c_hybrid: .search-form-group overflow:hidden clipped the live type-ahead (#tsearch_results sits inside it,
            top:100%+.25rem) -> overflow visible; the input/button carry the inner radii instead.
   Not touched: Topic 53, _BodyClose, Mystery tab, Ask bubble, colours, fonts, labels' text.
   Package + rollback: Heisenberg_HQ/projects/website_jan/header_polish_2026-10-22/ (rollback.sh). */
@media (min-width: 821px) {
	/* Row 1: one grid line [HA-1][HA-3] */
	body header.header-row {
		display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 24px;
		flex-wrap: nowrap; margin: 0; padding: 10px 16px 11px; min-height: 0;   /* 11 + (46 px logo row - 44) / 2 = 12 px search -> nav */
	}
	body header.header-row::before, body header.header-row::after { content: none; display: none; }
	body header.header-row > .logo-wrap,
	body header.header-row > .search-wrap,
	body header.header-row > .header-cart { float: none; width: auto; min-width: 0; max-width: none; margin: 0; padding: 0; flex: none; min-height: 0; }
	body header.header-row > .logo-wrap { grid-column: 1; }
	body header.header-row > .search-wrap { grid-column: 2; }
	body header.header-row > .header-cart { grid-column: 3; justify-self: end; }
	body header.header-row > .search-wrap > form { margin: 0; }

	/* Search: 44 px, width follows the window continuously: 240 px floor, +1 px per px above 1196, 560 cap
	   (never wider than its column). Outer 12 px / button 6 px radius at a 6 px inset (2 border + 4 margin). */
	body header.header-row .search-form-group {
		height: 44px; margin: 0 auto; width: clamp(240px, calc(100vw - 956px), 560px); max-width: 100%;
		align-items: center; border-radius: 12px; overflow: visible;   /* [CH-1] */
	}
	body header.header-row .search-form-group input.form-control.search-box {
		flex: 1 1 0; min-width: 0; width: auto; height: 40px; padding-top: 0; padding-bottom: 0; align-self: center; border-radius: 10px 0 0 10px !important;   /* [CH-1] 12 - 2px border */
	}
	body header.header-row .search-form-group .search-go {
		flex: 0 0 32px; width: 32px; height: 32px; max-width: none; padding: 0; margin: 0 4px 0 0; border-radius: 6px; overflow: hidden;   /* Jan's ::before (200% tall) keeps the 'Go' text pushed out of view */
	}
	body header.header-row .search-form-group #tsearch_results { min-width: min(400px, 90vw); }   /* type-ahead stays readable when the box is 240 px */

	/* Utilities: every item 44 px tall, 12 px apart [HA-2] */
	body header.header-row .header-cart .user-links { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 12px; margin: 0; padding: 0; }
	body header.header-row .header-cart .user-links > li { flex: 0 0 auto; margin: 0; padding: 0; display: flex; align-items: center; }
	body header.header-row .header-cart .user-links a.user-link,
	body header.header-row .header-cart .user-links a.hh-shows-headerlink {
		display: inline-flex; align-items: center; height: 44px; padding: 0 6px; border-radius: 12px; white-space: nowrap; line-height: 1;
	}
	body header.header-row .header-cart .user-links a.user-link > span[aria-hidden] { margin-right: 4px; }
	body header.header-row .header-cart .hba-theme-toggle { height: 44px; min-width: 44px; margin: 0; padding: 0 12px 0 6px; border-radius: 12px; }
	body header.header-row .header-cart .hba-theme-toggle img { width: 32px; height: 32px; }
}
/* 821-1199: the short labels (home_align's 900-1199 set, extended down to 821 [HA-3]); NODs badge = 44 px square */
@media (min-width: 821px) and (max-width: 1199.98px) {
	body header.header-row .header-cart .hba-theme-toggle { width: 44px; padding: 0; gap: 0; justify-content: center; }
	body header.header-row .header-cart .user-links a.hh-shows-headerlink,
	body header.header-row .header-cart .user-links a#js-show-cart,
	body header.header-row .header-cart .user-links a#js-show-wish,
	body header.header-row .header-cart .user-links a#js-header-checkout-link { padding: 0 6px; }
	body header.header-row .header-cart .user-links a#js-show-cart > span[aria-hidden],
	body header.header-row .header-cart .user-links a#js-show-wish > span[aria-hidden],
	body header.header-row .header-cart .user-links a#js-header-checkout-link > span[aria-hidden] { margin-right: 0; }
	body header.header-row .header-cart .user-links a.hh-shows-headerlink svg { margin-right: 4px; }
	body header.header-row .header-cart .user-links a.hh-shows-headerlink::after { content: "GUN SHOWS"; content: "GUN SHOWS" / ""; font-size: .9rem; font-weight: normal; letter-spacing: .05em; }
	body header.header-row .header-cart .user-links li.hba-theme-li { order: 0; }
}
/* 821-899 only: home_align carried phone-band leftovers -> desktop values [HA-3] */
@media (min-width: 821px) and (max-width: 899.98px) {
	body header.header-row .header-cart { flex: none; }
	body header.header-row .header-cart .user-links { justify-content: flex-end; }
	body header.header-row .header-cart .user-links a.hh-shows-headerlink,
	body header.header-row .header-cart .user-links a#js-show-cart,
	body header.header-row .header-cart .user-links a#js-show-wish,
	body header.header-row .header-cart .user-links a#js-header-checkout-link,
	body header.header-row .header-cart .user-links a.log-in-link { font-size: 0; letter-spacing: 0; }
	body header.header-row .header-cart .user-links a.user-link > span[aria-hidden] { font-size: 1rem; margin-right: 0; }
	body header.header-row .header-cart .user-links a .minicart-count { font-size: .9rem; letter-spacing: .05em; margin-left: 3px; }
	body header.header-row .header-cart .user-links a .minicart-count::before { content: "("; }
	body header.header-row .header-cart .user-links a .minicart-count::after { content: ")"; }
	body header.header-row .header-cart .user-links a.hh-shows-headerlink::after { content: "SHOWS"; content: "SHOWS" / ""; }
}
/* ===== /HEADER POLISH ===== */

/* ===== HEADER LINE (FN-Gabe 2026-10-22, Gabe 15:40 MST photo of the 27" monitor: "Why is this line still here") =====
   Measured offline at 1440 (header_line_2026-10-22/local): .navbar.topnav border-bottom 1px rgb(226,226,226)
   (c_hybrid's `:where(.navbar.navbar-default).topnav` + Bootstrap .navbar-default) + `.body-background nav` margin-bottom
   16px = grey line + light strip, hero top 16 px below the nav. c_hybrid section (c) removed both only @media (max-width:899.98px).
   Now: the SAME two rules (same selectors, same !important, later in source -> they win) at EVERY width, home page only
   (body:has(#hba-home)). Header's own layout (header_polish grid, nav row, heights) untouched; other pages untouched.
   Package + rollback: Heisenberg_HQ/projects/website_jan/header_line_2026-10-22/ (rollback.sh). */
body:has(#hba-home) .body-background nav { margin-bottom: 0 !important; }
body:has(#hba-home) .navbar.navbar-default.topnav { border-bottom: 0 !important; }
/* ===== /HEADER LINE ===== */