/* ==========================================================================
   Brushbeater — single global stylesheet. No build step, no Sass/Tailwind —
   plain CSS with custom properties, enqueued with a filemtime() cache-buster
   so edits show up immediately. See docs/07-architecture-overview.md.
   ========================================================================== */

:root {
  /* Minimalist modern overhaul (ref: emissarydevelopment.com) -- true black
     and white as the primary palette, gray strictly as connective tissue,
     red held back as a deliberate accent (CTAs, sale, out-of-stock) rather
     than the default color for everything, sharp corners throughout, and
     generous letter-spacing on small uppercase labels. Kept the theme's own
     red rather than adopting the reference's hue 1:1 -- Brushbeater's brand
     red (#C3282F) is already close in spirit, and this is a design-language
     overhaul, not a brand-color change. */
  --bb-black: #000000;
  --bb-near-black: #111111;
  --bb-red: #C3282F;
  --bb-off-white: #F6F6F6;
  --bb-white: #ffffff;
  --bb-gray: #666666;
  /* #767676 (an earlier fix for the old #999999, 2.84:1) still failed AA's
     4.5:1 minimum wherever it sits on the theme's off-white #f6f6f6 panels
     (shop sidebar, filters) rather than pure white -- 4.2:1, caught by a
     Lighthouse a11y re-audit. #6b6b6b clears 4.5:1 on both #f6f6f6 (4.93:1)
     and white (5.33:1) with headroom. */
  --bb-gray-light: #6b6b6b;
  --bb-border: #2a2a2a;
  --bb-border-light: #e2e2e2;

  /* Fixed chrome tokens -- the header, footer, and mega-menu bar are
     already a permanent black surface in light mode (not "light UI that
     happens to look dark"), so dark mode must NOT invert them the way it
     inverts --bb-black/--bb-off-white below, or the header would flip to a
     white bar. Anything that must stay a black bar with light text in both
     themes (header, footer, the nav row behind the mega-menu, the mobile
     hero photo caption scrim) reads from these two instead. */
  --bb-chrome-bg: #000000;
  --bb-chrome-ink: #f6f6f6;

  --bb-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bb-font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  /* Self-hosted (no CDN/Google Fonts <link>), single weight, used sparingly --
     only the hero H1 and the two major section titles below reach for this;
     every other heading in the site (product titles, footer, account pages)
     stays on --bb-font-heading's system stack, unchanged. */
  --bb-font-display: "BB Heading", var(--bb-font-heading);
  /* Self-hosted (UnifrakturCook, SIL OFL via Google Fonts -- downloaded once,
     no runtime Google Fonts request, same self-hosting policy as BB Heading
     above). Old-masthead blackletter, used only for the blog's "The
     Dispatch" nameplate -- a single deliberate flourish, not a second
     display-type system alongside --bb-font-display. */
  --bb-font-gothic: "UnifrakturCook", var(--bb-font-heading);
  --bb-tracking: 0.08em;
  --bb-tracking-wide: 0.14em;

  --bb-container-width: 1600px;
  --bb-header-height: 64px;
  /* Sharp corners are the single biggest signature of the new look -- 0
     everywhere this variable is used. Genuinely circular controls (icon
     buttons, count badges, carousel arrows) use an explicit 50%/999px
     instead of this variable, so they're unaffected and stay round, matching
     the reference's own circular icon-button pattern. */
  --bb-radius: 0;
  color-scheme: light;
}

/* ---------- Dark mode ----------
   Everything that isn't one of the two fixed --bb-chrome-* tokens above is
   already theme-relative by construction (the whole stylesheet was built on
   custom properties, not literal hex, specifically so this could be a
   values-only override instead of a parallel dark stylesheet) -- flipping
   --bb-black/--bb-off-white/--bb-white/--bb-gray*/--bb-border-light here is
   enough to re-theme content, cards, forms, and every WooCommerce screen at
   once. --bb-red is brightened rather than reused as-is: #C3282F only hits
   3.3:1 against the new #121212 page background (fails AA's 4.5:1 for text
   like hover links/out-of-stock labels), #E5484F clears 4.5:1+ while reading
   as the same brand red. assets/js/theme-toggle.js stamps data-theme on
   <html> (persisted in localStorage); the prefers-color-scheme block covers
   a first-time visitor who hasn't toggled anything yet, and yields the
   instant they do by excluding :not([data-theme="light"]). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bb-black: #f2f2f2;
    --bb-off-white: #121212;
    --bb-white: #1a1a1a;
    --bb-gray: #b3b3b3;
    --bb-gray-light: #8c8c8c;
    --bb-border-light: #333333;
    --bb-red: #e5484f;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bb-black: #f2f2f2;
  --bb-off-white: #121212;
  --bb-white: #1a1a1a;
  --bb-gray: #b3b3b3;
  --bb-gray-light: #8c8c8c;
  --bb-border-light: #333333;
  --bb-red: #e5484f;
  color-scheme: dark;
}

/* Smooth crossfade on toggle -- scoped to color-only properties (paint, not
   layout) so it's cheap, and already covered by the prefers-reduced-motion
   block below since that targets *, *::before, *::after generically. */
* {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, fill 0.25s ease, stroke 0.25s ease;
}

/* ---------- Fonts ---------- */
@font-face {
  font-family: "BB Heading";
  src: url("../fonts/bb-heading.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "UnifrakturCook";
  src: url("../fonts/unifraktur-cook-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--bb-font-body);
  color: var(--bb-black);
  background: var(--bb-off-white);
  line-height: 1.5;
  /* Belt-and-suspenders against horizontal dead-space scroll: absolutely
     positioned elements anchored near the edge of their container (e.g. the
     mega-menu's .bb-mega-menu__panel, min-width:640px centered on its own
     nav item) can widen the page's scrollable area even while
     visibility:hidden -- CSS visibility, unlike display:none, still occupies
     layout space. max-width keeps this container itself from ever
     exceeding the viewport regardless of what an absolutely-positioned
     descendant does. */
  max-width: 100vw;
  overflow-x: hidden;
}

/* Anyone who's told their OS they get motion-sick from animation gets none
   of it -- every transition/animation added for polish below is wrapped by
   this, not just decorative ones, since a partial reduction is more jarring
   than none at all. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* Keyboard-only "skip to content" -- off-screen until it receives focus
   (tab from the URL bar), then jumps above the header instead of forcing
   every keyboard/screen-reader visit through the full nav on every page. */
.bb-skip-link {
  position: absolute; top: -3rem; left: 0.5rem; z-index: 1000;
  background: var(--bb-black); color: var(--bb-white);
  padding: 0.65rem 1.1rem; font-size: 0.85rem; font-weight: 600;
  transition: top 0.15s ease;
}
.bb-skip-link:focus { top: 0.5rem; outline: 2px solid var(--bb-white); outline-offset: 2px; }
h1, h2, h3, h4 {
  font-family: var(--bb-font-heading); margin: 0 0 0.5em;
  font-weight: 700; letter-spacing: -0.01em;
}
/* Display typeface -- scoped to the hero heading (h1 on the first slide,
   h2 on every other slide -- see hero-carousel.php) and the two major
   homepage section titles only; everything else above keeps the
   system-font stack. */
.bb-hero__content h1,
.bb-hero__content h2,
.bb-product-section__title,
.bb-category-band__title {
  font-family: var(--bb-font-display);
}

.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

.bb-container {
  max-width: var(--bb-container-width);
  margin-inline: auto;
  padding-inline: 1rem;
}

.bb-btn {
  display: inline-block;
  padding: 0.85em 1.75em;
  background: var(--bb-red);
  color: #fff;
  border-radius: var(--bb-radius);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: var(--bb-tracking);
  border: none;
  cursor: pointer;
}
.bb-btn:hover { background: var(--bb-black); }

/* Consistent tactile feedback across every button-like control site-wide --
   smooth hover instead of an instant color snap, plus a slight press-down
   on click so clicking anything feels responsive rather than static. One
   shared rule instead of repeating transition/:active on each button class. */
.bb-btn,
.bb-search__submit,
.bb-hero__nav,
.bb-carousel__arrow,
.bb-wishlist-btn,
.bb-notify__toggle,
.bb-notify__form button[type="submit"],
.bb-newsletter-form__row .bb-btn,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.add_to_cart_button,
.bb-product-card__action a.button,
.bb-product-card__action a.add_to_cart_button,
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart button.button {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.bb-btn:active,
.bb-search__submit:active,
.bb-carousel__arrow:active,
.bb-wishlist-btn:active,
.bb-notify__toggle:active,
.bb-notify__form button[type="submit"]:active,
.woocommerce ul.products li.product a.button:active,
.woocommerce ul.products li.product a.add_to_cart_button:active,
.bb-product-card__action a.button:active,
.bb-product-card__action a.add_to_cart_button:active,
.woocommerce div.product form.cart .single_add_to_cart_button:active,
.woocommerce div.product form.cart button.button:active {
  transform: scale(0.96);
}

/* ---------- Header ---------- */
/* No spacer element needed: position:sticky keeps the header in normal
   document flow until the scroll threshold, unlike position:fixed -- an
   empty spacer div here would just render as a blank bar above it. */
.bb-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bb-chrome-bg);
  color: var(--bb-chrome-ink);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
/* .is-scrolled toggled by assets/js/header-scroll.js once the page has
   scrolled past the top -- a flat 1px border reads the sticky header's
   depth without a shadow, matching the reference's no-shadow ethos. */
.bb-header.is-scrolled { border-bottom-color: rgba(255, 255, 255, 0.12); }

/* Scroll-reveal (assets/js/scroll-reveal.js adds/removes these classes;
   plain CSS opacity/transform so there's nothing to see if JS fails to
   load -- content just renders normally instead of staying hidden). */
.bb-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s ease; }
.bb-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Shared fade-in for anything revealed by flipping the [hidden] attribute
   off via JS (the notify-me form, and every AJAX form's success/error
   message) -- a CSS animation plays automatically the instant an element
   starts matching :not([hidden]), so this needs zero JS changes. */
@keyframes bb-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Sits above .bb-header__top, whole bar is a link (not just its text) so
   the entire strip redirects to the on-sale-filtered shop, matching the
   existing ?on_sale=1 filter already wired up in inc/shop-filters.php. */
.bb-promo-banner {
  display: block;
  background: var(--bb-red);
  color: #fff;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--bb-tracking);
  padding-block: 0.6rem;
  transition: background-color 0.15s ease;
}
.bb-promo-banner:hover,
.bb-promo-banner:focus-visible { background: var(--bb-black); }

.bb-header__top {
  background: var(--bb-near-black); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: var(--bb-tracking);
}
.bb-header__top-inner {
  display: flex; justify-content: space-between; align-items: center;
  padding-block: 0.5rem;
}
.bb-header__top-inner a { color: var(--bb-chrome-ink); }

.bb-header__main-inner {
  display: flex; align-items: center; gap: 1.5rem;
  padding-block: 1rem;
  min-height: var(--bb-header-height);
}
.bb-header__logo {
  font-size: 1.1rem; font-weight: 700; color: #fff; white-space: nowrap;
  text-transform: uppercase; letter-spacing: var(--bb-tracking);
}
/* width: auto is required alongside max-height -- the uploaded logo's HTML
   width/height attributes (WordPress prints the custom logo's native pixel
   size) otherwise pin the width while height gets clamped, squishing the
   image out of its aspect ratio instead of scaling it down proportionally. */
.bb-header__logo img { max-height: 40px; width: auto; }

.bb-header__info-links {
  display: flex; align-items: center; gap: 1.75rem;
  list-style: none; margin: 0; padding: 0;
}
.bb-header__info-links a {
  color: var(--bb-chrome-ink); font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--bb-tracking);
  white-space: nowrap;
}
.bb-header__info-links a:hover { color: var(--bb-red); }

/* align-items:center matters once the group mixes box-shaped icons (the
   44x44 hamburger/search buttons, which center their own SVG internally)
   with bare-SVG anchors (account/wishlist/cart) that have no box of their
   own -- flex's default align-items:stretch was stretching those anchors
   to match the buttons' height without recentering their content, so they
   hung below the buttons' true vertical center instead of sharing it. */
.bb-header__icons { display: flex; align-items: center; gap: 1.25rem; margin-left: auto; }
.bb-header__icon { position: relative; color: var(--bb-chrome-ink); }
.bb-header__cart-count {
  position: absolute; top: -6px; right: -10px;
  background: var(--bb-red); color: #fff;
  border-radius: 999px; font-size: 0.65rem; padding: 1px 5px;
}

/* Dark-mode toggle -- lives in the always-dark header, so it deliberately
   uses the fixed --bb-chrome-* tokens (not the flipping --bb-black/white)
   for its own resting colors; only the page it's switching needs to invert,
   not the switch itself. A sliding pill (not a plain icon button) so the
   state change reads as a real animated toggle, not a static swap. */
.bb-theme-toggle {
  flex-shrink: 0; width: 44px; height: 24px; padding: 0; margin: 0;
  border: none; background: none; cursor: pointer;
  display: inline-flex; align-items: center;
}
.bb-theme-toggle__track {
  position: relative; display: block; width: 100%; height: 100%;
  border-radius: 999px; background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.bb-theme-toggle__thumb {
  position: absolute; top: 1px; left: 1px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--bb-chrome-ink);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.bb-theme-toggle[aria-pressed="true"] .bb-theme-toggle__thumb { transform: translateX(20px); }
.bb-theme-toggle__icon {
  position: absolute; color: var(--bb-chrome-bg);
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.bb-theme-toggle__icon--sun { opacity: 1; transform: rotate(0deg) scale(1); }
.bb-theme-toggle__icon--moon { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.bb-theme-toggle[aria-pressed="true"] .bb-theme-toggle__icon--sun { opacity: 0; transform: rotate(90deg) scale(0.6); }
.bb-theme-toggle[aria-pressed="true"] .bb-theme-toggle__icon--moon { opacity: 1; transform: rotate(0deg) scale(1); }
.bb-theme-toggle:focus-visible { outline: 2px solid var(--bb-chrome-ink); outline-offset: 3px; border-radius: 999px; }

.bb-header__nav { background: var(--bb-chrome-bg); }

/* Hamburger toggle -- hidden on desktop, where the mega-menu nav row is
   always visible; shown only once the mobile nav breakpoint (899px, matching
   the mega-menu's own accordion switch below) hides the nav by default. */
.bb-header__mobile-toggle {
  display: none;
  width: 44px; height: 44px; padding: 0; margin-left: auto;
  align-items: center; justify-content: center;
  background: none; border: none; color: var(--bb-chrome-ink); cursor: pointer;
}

/* Search-icon toggle -- hidden on desktop, where the full search input is
   always visible inline; shown only below the mobile breakpoint, where it
   replaces that input to keep the header down to icon-sized controls. */
.bb-header__search-toggle {
  display: none;
  width: 44px; height: 44px; padding: 0;
  align-items: center; justify-content: center;
  background: none; border: none; color: var(--bb-chrome-ink); cursor: pointer;
}

/* Off-canvas-only duplicate of the desktop info-links + wishlist icon (see
   header.php) -- hidden on desktop, where those already live in the main
   row; shown only inside the mobile nav drawer below 900px. */
.bb-header__nav-extra {
  display: none;
  list-style: none; margin: 0; padding: 1rem 0 0.5rem;
  border-top: 1px solid var(--bb-border);
}
.bb-header__nav-extra a {
  display: block; padding: 0.6rem 0;
  color: var(--bb-chrome-ink); font-size: 0.85rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--bb-tracking);
}
.bb-header__nav-extra a:hover { color: var(--bb-red); }

/* ---------- Search (prominent, centered) ---------- */
.bb-search {
  position: relative;
  flex: 1 1 auto;
  max-width: 520px;
  display: flex;
}
.bb-search__input {
  width: 100%;
  padding: 0.65em 2.75em 0.65em 1em;
  border-radius: var(--bb-radius);
  border: 1px solid var(--bb-gray);
  background: var(--bb-near-black); color: #fff;
  font-size: 0.9rem;
}
.bb-search__input::placeholder { color: var(--bb-gray-light); }
.bb-search__input:focus { border-color: var(--bb-red); }
.bb-search__input:focus-visible { outline: 2px solid var(--bb-red); outline-offset: 1px; }
.bb-search__submit {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 2.75em; background: transparent; border: none; color: #fff; cursor: pointer;
}
.bb-search__results {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--bb-white); color: var(--bb-black);
  border: 1px solid var(--bb-border-light); border-radius: var(--bb-radius);
  margin-top: 4px; max-height: 400px; overflow-y: auto; z-index: 1100;
}
.bb-search__results:not([hidden]) { animation: bb-fade-in 0.15s ease; }
.bb-search__result {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 1rem; border-bottom: 1px solid var(--bb-border-light);
}
.bb-search__result:hover, .bb-search__result:focus { background: var(--bb-off-white); }
.bb-search__result-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: var(--bb-radius); }
.bb-search__result-info { display: flex; flex-direction: column; }
.bb-search__result-title { font-weight: 600; font-size: 0.9rem; }
.bb-search__result-price { color: var(--bb-gray); font-size: 0.85rem; }
.bb-search__result-oos { color: var(--bb-red); font-size: 0.75rem; }
.bb-search__empty { padding: 1rem; color: var(--bb-gray); }

/* ---------- Mega Menu ---------- */
.bb-mega-menu__level1 {
  display: flex; justify-content: center; flex-wrap: wrap; list-style: none; margin: 0; padding: 0;
  max-width: var(--bb-container-width); margin-inline: auto;
}
.bb-mega-menu__item--l1 { position: relative; }
.bb-mega-menu__item--l1 > a, .bb-mega-menu__item--l1 > .bb-mega-menu__label {
  display: block; width: 100%; padding: 0.9rem 1.35rem; color: var(--bb-chrome-ink);
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: var(--bb-tracking-wide);
  cursor: pointer;
  /* .bb-mega-menu__label is a <button> now (was a <span>) so it's reachable
     by keyboard -- reset it back to looking like the plain label it always
     was, not a browser default button. */
  background: none; border: none; font-family: inherit; font-weight: inherit; text-align: left;
}
.bb-mega-menu__item--l1 > .bb-mega-menu__label:focus-visible { outline: 2px solid var(--bb-chrome-ink); outline-offset: -2px; }
.bb-mega-menu__item--l1.has-children > a::after,
.bb-mega-menu__item--l1.has-children > .bb-mega-menu__label::after { content: " \25BE"; }

.bb-mega-menu__panel {
  display: flex;
  position: absolute; top: 100%; left: 50%;
  /* --bb-panel-shift is set inline (in px) by mega-menu.js right before a
     panel opens, to pull it back onscreen when centering under an item near
     the left/right edge would push this 640px-wide panel past the viewport
     -- unnoticeable on a wide desktop monitor with room to spare either side
     of the nav bar, but items near the edges overflow on a narrower window. */
  transform: translateX(calc(-50% + var(--bb-panel-shift, 0px))) translateY(-6px);
  background: var(--bb-white); color: var(--bb-black);
  border: 1px solid var(--bb-border-light);
  width: max-content; min-width: 640px; max-width: 90vw; padding: 2rem; z-index: 1050;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.bb-mega-menu__item--l1.is-open .bb-mega-menu__panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(calc(-50% + var(--bb-panel-shift, 0px))) translateY(0);
}

.bb-mega-menu__level2 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
  list-style: none; margin: 0; padding: 0; width: 100%;
}
.bb-mega-menu__item--l2 {
}
.bb-mega-menu__item--l2 > a, .bb-mega-menu__item--l2 > .bb-mega-menu__label {
  font-weight: 700; display: block; margin-bottom: 0.4rem;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: var(--bb-tracking-wide);
}
.bb-mega-menu__level3 { list-style: none; margin: 0; padding: 0; }
.bb-mega-menu__item--l3 a { 
  display: block; padding: 0.2rem 0; color: var(--bb-gray);
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: var(--bb-tracking-wide);
}
.bb-mega-menu__item--l3 a:hover { color: var(--bb-red); }

/* ---------- Hero ---------- */
.bb-hero { position: relative; height: 60vh; min-height: 420px; overflow: hidden; background: var(--bb-black); }

/* Hero Intro Overlay - 3D PVS-14 Animation */
.bb-hero__intro-overlay {
  position: fixed;
  inset: 0;
  /* Was z-index:100 -- lower than the sticky header (1000), mega-menu panel
     (1050), and search dropdown (1100), so those rendered on top of this
     fixed full-page overlay and visibly cut off the animation instead of
     it covering the whole page. Raised above all site chrome; kept below
     the age-gate (10000) and cookie-consent (9999) modals, which must
     still be able to interrupt on top of it. */
  z-index: 5000;
  /* The 3D model (pvs-viewer.js) renders as flat, unlit pure black
     (MeshBasicMaterial 0x000000) on a transparent canvas -- against the
     near-black #070707 this used to be, the model had almost no
     silhouette. Lightened so the black model reads as a silhouette
     against the backdrop instead of blending into it. */
  background: #2c2c30;
  overflow: hidden;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.95s ease;
}
.bb-hero__intro-overlay.is-fading-out {
  opacity: 0;
}
/* Hide on mobile */
@media (max-width: 767px) {
  .bb-hero__intro-overlay {
    display: none !important;
  }
}
/* Radial glow at top */
.bb-intro-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 55% at 50% -10%, rgba(240,238,230,.13), transparent 60%);
}
/* Falling streak lines */
.bb-intro-streaks {
  position: absolute;
  inset: 0;
}
.bb-intro-streak {
  position: absolute;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(240,238,230,.12), transparent);
}
.bb-intro-streak:nth-child(1) { left: 14%; top: 20vh; height: 38vh; }
.bb-intro-streak:nth-child(2) { left: 82%; top: 60vh; height: 48vh; opacity: 0.75; }
.bb-intro-streak:nth-child(3) { left: 28%; top: 110vh; height: 32vh; opacity: 0.6; }
.bb-intro-streak:nth-child(4) { left: 66%; top: 150vh; height: 44vh; opacity: 0.85; }
/* Category tags container */
.bb-intro-tags {
  position: absolute;
  inset: 0;
}
.bb-intro-tag {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 6vw;
  opacity: 0.2;
  transition: opacity 0.1s linear, transform 0.1s linear;
}
.bb-intro-tag__line {
  height: 1px;
  flex: 1;
  background: rgba(242,240,235,0.1);
}
.bb-intro-tag__label {
  font-family: var(--bb-font-heading);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.1em;
  color: rgba(242,240,235,0.4);
  white-space: nowrap;
}
.bb-intro-tag__num {
  font-size: 10px;
  color: rgba(242,240,235,0.35);
  letter-spacing: 0.14em;
}
/* Header elements */
.bb-intro-header-left {
  position: absolute;
  top: 20px;
  left: 28px;
  font-family: var(--bb-font-heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: rgba(242,240,235,0.55);
}
.bb-intro-header-right {
  position: absolute;
  top: 23px;
  right: 28px;
  font-size: 10px;
  letter-spacing: 0.13em;
  color: rgba(242,240,235,0.3);
}
/* 3D model container */
.bb-intro-model {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(56vmin, 480px);
  height: min(56vmin, 480px);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 30px 34px rgba(0,0,0,0.75));
}
/* Center vignette */
.bb-intro-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,0.75) 100%);
  pointer-events: none;
}
/* Progress bar */
.bb-intro-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(242,240,235,0.08);
}
.bb-intro-progress__fill {
  height: 100%;
  width: 0%;
  background: rgba(242,240,235,0.55);
  transition: width 0.05s linear;
}
/* Skip button */
.bb-intro-skip {
  position: absolute;
  bottom: 14px;
  right: 28px;
  font-size: 10px;
  letter-spacing: 0.13em;
  color: rgba(242,240,235,0.45);
  animation: bb-intro-pulse 2.4s ease-in-out infinite;
}
@keyframes bb-intro-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.75; }
}

.bb-hero__slide {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  opacity: 0; transition: opacity 0.8s ease, transform 0.6s ease, filter 0.6s ease;
  background-color: var(--bb-black);
  pointer-events: none; /* inactive slides stack on top in DOM order and must not intercept clicks meant for the active slide underneath */
}
.bb-hero__slide.is-active { opacity: 1; pointer-events: auto; }
.bb-hero__slide-image { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
/* Scroll "pull-focus" -- the active slide loses focus (scale + blur) once the
   user has scrolled far enough past the hero that it's no longer the thing
   they're looking at, like a scope drifting off target. Purely visual, no
   copy/content change; gated entirely behind assets/js/hero-focus.js, which
   never attaches its observer under prefers-reduced-motion. */
.bb-hero.is-defocused .bb-hero__slide { transform: scale(1.04); filter: blur(6px); }
/* Dark scrim behind the text column -- text-shadow alone isn't reliable
   contrast against lighter/busier hero photos (e.g. a sandy desert scene),
   so this guarantees legible white text no matter what the background image
   looks like. */
.bb-hero__slide::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.45) 40%, rgba(0,0,0,0) 75%);
}
.bb-hero__content { position: relative; z-index: 2; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.6); max-width: 640px; }
/* "Zeroed In" reticle frame -- a viewfinder/rangefinder-style corner-bracket
   frame around the hero interior, on-brand for a company selling rifle
   optics ("Khyber Optics", "Born from combat"). Deliberately just hairlines,
   no center crosshair/label -- the restraint is the point. Sits above the
   slides/scrim (z-index 0/1) and below the nav/dots (z-index 5) so it never
   intercepts clicks meant for the carousel controls. */
.bb-hero__reticle { position: absolute; inset: 1.5rem; z-index: 3; pointer-events: none; }
.bb-hero__bracket { position: absolute; width: 28px; height: 28px; }
.bb-hero__bracket--tl { top: 0; left: 0; border-top: 1px solid rgba(255,255,255,0.65); border-left: 1px solid rgba(255,255,255,0.65); }
.bb-hero__bracket--tr { top: 0; right: 0; border-top: 1px solid rgba(255,255,255,0.65); border-right: 1px solid rgba(255,255,255,0.65); }
.bb-hero__bracket--bl { bottom: 0; left: 0; border-bottom: 1px solid rgba(255,255,255,0.65); border-left: 1px solid rgba(255,255,255,0.65); }
.bb-hero__bracket--br { bottom: 0; right: 0; border-bottom: 1px solid rgba(255,255,255,0.65); border-right: 1px solid rgba(255,255,255,0.65); }
.bb-hero__content h1, .bb-hero__content h2 { font-size: 3rem; }
.bb-hero__content p { font-size: 1rem; text-transform: uppercase; letter-spacing: var(--bb-tracking); }
.bb-hero__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.4); color: #fff; border: none;
  font-size: 2rem; width: 48px; height: 48px; cursor: pointer; z-index: 5;
}
.bb-hero__nav--prev { left: 1rem; }
.bb-hero__nav--next { right: 1rem; }
.bb-hero__dots { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.375rem; z-index: 5; }
/* Hit target is 24x24 (WCAG 2.5.8 minimum) even though the visible dot stays
   a slim 10px -- the button carries the tap area, a centered ::after carries
   the dot, so the click/tap zone grows without the row reading as chunky. */
.bb-hero__dot {
  width: 24px; height: 24px; padding: 0; border: none; background: transparent;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.bb-hero__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.5); }
.bb-hero__dot.is-active::after { background: #fff; }

/* ---------- Category Band (Shop the Arsenal) ---------- */
.bb-category-band { padding: 4rem 0 1rem; }
.bb-category-band__title {
  text-transform: uppercase; letter-spacing: var(--bb-tracking-wide);
  border-bottom: 1px solid var(--bb-black); padding-bottom: 1rem; margin-bottom: 2rem;
}
.bb-category-band__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.25rem;
}
.bb-category-band__tile a { display: block; position: relative; }
.bb-category-band__image-wrap {
  position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--bb-white);
}
.bb-category-band__image {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  transition: transform 0.3s ease; padding: 1rem;
}
.bb-category-band__tile a:hover .bb-category-band__image { transform: scale(1.05); }
.bb-category-band__image-wrap::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.7) 100%);
}
.bb-category-band__label {
  position: absolute; left: 0.75rem; bottom: 0.75rem; z-index: 1; color: #fff;
  font-weight: 700; text-transform: uppercase; letter-spacing: var(--bb-tracking);
  font-size: 0.85rem;
}

/* ---------- Promo Row ---------- */
.bb-promo-row { padding: 5rem 0; }
.bb-promo-row__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; }
.bb-promo-row__tile {
  display: block;
  background: transparent; border: none; border-top: 1px solid var(--bb-black);
  border-radius: 0; padding: 1.75rem 0 0; text-align: left; color: inherit;
  transition: border-color 0.2s ease;
}
/* Tiles render as <a> when a button link is set, plain <div> otherwise
   (template-parts/home/promo-row.php) -- only the linked ones get an
   interactive hover state. */
a.bb-promo-row__tile:hover { border-top-color: var(--bb-red); }
.bb-promo-row__index {
  display: block; font-size: 0.7rem; font-weight: 600; color: var(--bb-gray-light);
  letter-spacing: var(--bb-tracking-wide); margin-bottom: 1.25rem;
}
.bb-promo-row__icon { display: block; color: var(--bb-black); margin-bottom: 1rem; }
a.bb-promo-row__tile:hover .bb-promo-row__icon { color: var(--bb-red); }
.bb-promo-row__tile h3 {
  font-size: 0.9rem; text-transform: uppercase; letter-spacing: var(--bb-tracking); margin: 0 0 0.6rem;
}
.bb-promo-row__tile p { color: var(--bb-gray); margin: 0 0 1.25rem; }
.bb-promo-row__link {
  display: inline-flex; align-items: center; gap: 0.4em;
  color: var(--bb-black); font-weight: 600; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: var(--bb-tracking);
  border-bottom: 1px solid var(--bb-black); padding-bottom: 2px;
}
.bb-promo-row__link::after {
  content: "\2192"; display: inline-block; transition: transform 0.2s ease;
}
a.bb-promo-row__tile:hover .bb-promo-row__link { color: var(--bb-red); border-color: var(--bb-red); }
a.bb-promo-row__tile:hover .bb-promo-row__link::after { transform: translateX(3px); }

/* ---------- Product Sections / Product Grid ---------- */
.bb-product-section { padding: 3rem 0; }
.bb-product-section__title {
  border-bottom: 1px solid var(--bb-black); padding-bottom: 1rem; margin-bottom: 2rem;
  text-transform: uppercase; letter-spacing: var(--bb-tracking); font-size: 1.1rem;
}

/* Base grid layout for plain (non-carousel) use, e.g. the Wishlist page. */
.bb-product-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
}

/* ---------- Carousel (Best Sellers / New Arrivals) ---------- */
/* overflow:hidden here is load-bearing, not decorative: the track's 20
   items are ~4x the visible width by design (5 visible, scroll for more),
   contained locally via overflow-x:auto on the track itself -- but without
   this on the wrapper too, that internal scroll width was leaking into the
   whole page's scrollWidth, making the entire site pan horizontally
   (verified: removing the carousel dropped document.scrollWidth from
   ~6056px to ~1645px at a 1600px viewport). The arrows are positioned
   inside the bounds (not with a negative offset outside them) specifically
   so this doesn't clip them. */
.bb-carousel { position: relative; overflow: hidden; }
.bb-product-grid.bb-carousel__track {
  list-style: none; margin: 0; padding: 0 0.25rem;
  display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}
.bb-product-grid.bb-carousel__track::-webkit-scrollbar { display: none; }
/* 5 visible at a time on desktop -- flex-basis accounts for 4 gaps between 5 cards. */
.bb-product-grid.bb-carousel__track > li {
  flex: 0 0 calc((100% - 4 * 1.5rem) / 5); scroll-snap-align: start;
}
.bb-carousel__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--bb-border-light);
  background: var(--bb-white); cursor: pointer; z-index: 2; font-size: 1.3rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; color: var(--bb-black);
}
.bb-carousel__arrow:hover { border-color: var(--bb-black); background: var(--bb-black); color: var(--bb-white); }
/* Inset (not offset outside the carousel bounds) -- .bb-carousel now has
   overflow:hidden as a fix for a real horizontal page-overflow bug (see the
   comment on .bb-carousel), which would otherwise clip an arrow sitting
   outside its box. */
.bb-carousel__arrow--prev { left: 0.5rem; }
.bb-carousel__arrow--next { right: 0.5rem; }

.bb-product-card {
  border: 1px solid var(--bb-border-light); border-radius: var(--bb-radius);
  background: var(--bb-white); display: flex; flex-direction: column;
  transition: border-color 0.18s ease;
  min-width: 0; /* allows flex children to shrink below content size */
}
.bb-product-card:hover { border-color: var(--bb-black); }
.bb-product-card__link { 
  display: block; padding: 1rem 1rem 0;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
.bb-product-card__image {
  position: relative;
  height: 180px; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.bb-product-card__image img { transition: transform 0.25s ease; }
.bb-product-card:hover .bb-product-card__image img { transform: scale(1.05); }
.bb-product-card__image img {
  height: 100%; width: 100%; object-fit: contain; object-position: center;
  display: block; margin: 0 auto; border-radius: var(--bb-radius);
}
.bb-product-card__title {
  font-size: 0.95rem; margin: 0.5rem 0 0.25rem;
  line-height: 1.75;
  min-height: calc(1.75em * 2);
  max-height: calc(1.75em * 2.15);
  overflow: hidden;
  word-wrap: break-word;
  word-break: break-word;
  width: 100%;
}
/* Neutral black by default -- red is held back for the ACTUAL sale price
   (ins) specifically, so it reads as a deliberate "this one's discounted"
   signal instead of every price on the page being colored the same. */
.bb-product-card__price { 
  font-weight: 600; color: var(--bb-black);
  margin: 0;
  clear: both;
}
.bb-product-card__price ins { color: var(--bb-red); text-decoration: none; }
/* WooCommerce core also sets "del { opacity: .7 }" -- washing the color out
   toward white regardless of what it's set to, silently reintroducing a
   contrast failure no matter how dark --bb-gray-light is. Overriding
   opacity back to 1 is what actually makes the color value below apply
   at full strength. */
.bb-product-card__price del { color: var(--bb-gray-light); opacity: 1; }
/* Bottom-anchored, not tucked directly under price -- grid rows stretch
   every card in a row to equal height, so margin-top:auto pushes the button
   to the same distance from the tile's bottom edge on every card,
   regardless of image size or title/price length. */
.bb-product-card__action {
  padding: 0.25rem 1rem 1rem; margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
}
.bb-product-card__action .bb-notify,
.bb-product-card__action a.button,
.bb-product-card__action a.add_to_cart_button,
.bb-product-card__action a.added_to_cart { flex: 1; min-width: 0; }
.bb-product-card__action a.button,
.bb-product-card__action a.add_to_cart_button {
  display: inline-block; padding: 0.6em 1.25em;
  background: var(--bb-red); color: #fff !important; border-radius: var(--bb-radius);
  font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: var(--bb-tracking);
  border: none; text-align: center;
  /* A variable product's "Select Options" wraps to two single-word lines
     in the card's narrow flex:1 button at 2-column mobile widths -- each
     word alone can still be wider than the ~50px the button actually gets,
     and with no word-break, an unbreakable word just overflows the button
     horizontally instead of wrapping (verified: SELECT/OPTIONS spilling
     past the button edge at a 320px viewport). break-word lets a genuinely
     too-long word break internally as a last resort, which "Add to Cart"'s
     three short words never need to invoke. */
  overflow-wrap: break-word; word-break: break-word;
}
.bb-product-card__action a.button:hover,
.bb-product-card__action a.add_to_cart_button:hover { background: var(--bb-black); }

/* At the 2-column mobile card grid (<=599px), the action row splits its
   width between the text button (flex:1) and the fixed-size wishlist
   heart -- leaving the button as little as ~50px, not enough for a longer
   single word like "OPTIONS" (a variable product's "Select Options") to
   wrap without breaking mid-word even with overflow-wrap set above.
   Stacking the button above the heart instead gives it the card's near-
   full width, which comfortably fits two full words on one or two normal
   lines. */
@media (max-width: 599px) {
  .bb-product-card__action { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .bb-product-card__action .bb-wishlist-btn { align-self: center; }
}
/* WooCommerce's AJAX add-to-cart doesn't replace the button on success --
   it marks it .added (which stock WC CSS shows as the button label plus a
   checkmark glyph, wrapping to 2 lines in this card's narrow width) AND
   appends "View cart" as a new sibling, so the card briefly shows both
   fighting for the same flex row. Hide the original button once WC marks
   it .added so "View cart" cleanly takes over its slot instead of
   squeezing in beside it. */
.bb-product-card__action a.add_to_cart_button.added { display: none; }
.bb-product-card__action a.added_to_cart.wc-forward {
  padding: 0.6em 1.25em; font-size: 0.78rem;
}

/* ---------- Promo chips (real, data-backed only -- e.g. Sale) ---------- */
/* Sharp rectangle tag, not a pill -- rounded badges read as more
   "ornamental sticker," flat tags fit the rest of the sharp-corner system. */
.bb-chip {
  position: absolute; top: 0; left: 0; z-index: 1;
  display: inline-block; padding: 0.35em 0.7em; border-radius: 0;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--bb-tracking);
  color: #fff;
}
.bb-chip--sale { background: var(--bb-red); }
/* WooCommerce's own default "Sale!" badge, restyled to match .bb-chip
   instead of the plain unstyled circle it renders as out of the box. */
.woocommerce span.onsale {
  position: absolute; top: 0; left: 0; z-index: 1;
  min-height: 0; min-width: 0; border-radius: 0;
  padding: 0.35em 0.7em; font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--bb-tracking); line-height: normal;
  background: var(--bb-red); color: #fff;
}
/* Price-per-round (ammo only, inc/ammo-price-per-round.php) -- anchored
   top-right instead of top-left so it never collides with a Sale badge on
   the same card. font-variant-numeric keeps the digits themselves from
   jumping around next to the plain-text "/rd" suffix. */
.bb-chip--ppr {
  left: auto; right: 0; background: var(--bb-black); color: var(--bb-white);
  font-variant-numeric: tabular-nums;
}
.bb-chip--ppr-unit { text-transform: lowercase; font-weight: 600; margin-left: 0.15em; }

/* ---------- Out of Stock (PSA-style: plain text, not a banner over the image) ---------- */
.bb-stock-text--oos {
  color: var(--bb-red); font-weight: 700; font-size: 0.85rem; margin: 0.25rem 0;
}
.woocommerce div.product p.stock.out-of-stock {
  color: var(--bb-red); font-weight: 700; font-size: 0.95rem;
}

/* ---------- "Notify When In Stock" ---------- */
.bb-notify { margin-top: 0.4rem; }
.bb-native-action-row .bb-notify { flex: 1; min-width: 0; margin-top: 0; }
.bb-notify__toggle {
  background: var(--bb-black); color: var(--bb-white); border: none; border-radius: var(--bb-radius);
  padding: 0.6em 1em; font-weight: 600; font-size: 0.72rem; cursor: pointer; width: 100%;
  text-transform: uppercase; letter-spacing: var(--bb-tracking);
}
.bb-notify__toggle:hover { background: var(--bb-red); }
/* :not([hidden]) so the plain [hidden] attribute (set on load, and toggled
   by stock-notify.js) keeps winning over this explicit display value --
   otherwise a bare `display: flex` here would override the UA stylesheet's
   `[hidden] { display: none }` and the form would show immediately. */
.bb-notify__form:not([hidden]) { display: flex; gap: 0.4rem; animation: bb-fade-in 0.25s ease; }
.bb-notify__form input[type="email"] {
  flex: 1; min-width: 0; padding: 0.55em 0.7em; border: 1px solid var(--bb-border-light); border-radius: var(--bb-radius);
  font-size: 0.85rem; font-family: inherit;
}
.bb-notify__form button[type="submit"] {
  background: var(--bb-red); color: #fff; border: none; border-radius: var(--bb-radius);
  padding: 0.55em 1em; font-weight: 600; font-size: 0.85rem; cursor: pointer; white-space: nowrap;
}
.bb-notify__form button[type="submit"]:hover { background: var(--bb-black); }
.bb-notify__message:not([hidden]) { animation: bb-fade-in 0.25s ease; }
.bb-notify__message { font-size: 0.8rem; margin: 0.4rem 0 0; color: var(--bb-gray); }
.bb-notify__message.is-error { color: var(--bb-red); }

/* ---------- Wishlist ---------- */
.bb-wishlist-btn {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 2.4em; height: 2.4em; padding: 0; border: 1px solid var(--bb-border-light); border-radius: var(--bb-radius);
  background: var(--bb-white); color: var(--bb-gray); cursor: pointer;
}
.bb-wishlist-btn:hover { border-color: var(--bb-red); color: var(--bb-red); }
.bb-wishlist-btn.is-active { border-color: var(--bb-red); color: var(--bb-red); }
.bb-wishlist-btn.is-active svg path { fill-opacity: 1; }
/* Replays automatically every time JS adds .is-active fresh (toggling a
   class off and back on restarts a CSS animation with no JS timing logic
   needed) -- a quick "pop" so adding to the wishlist has some life to it
   instead of the heart just silently filling in. */
@keyframes bb-heart-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.bb-wishlist-btn.is-active svg { animation: bb-heart-pop 0.35s ease; }
/* Single product page: not a flex-row context like the tiles, so it just
   sits as its own inline control under the add-to-cart form. Scoped to
   ".summary" (WooCommerce's own wrapper around the main product's
   title/price/add-to-cart column) rather than the whole ".bb-single-product"
   page body -- that wrapper also contains the Related Products grid lower
   on the same page, and its cards reuse this same compact heart-icon button;
   the wider selector was turning those into full-width text pills too,
   squeezing their neighboring add-to-cart/notify button down to a sliver
   (a real touch-target failure caught by a Lighthouse mobile re-audit). */
.summary .bb-wishlist-btn { width: auto; padding: 0.6em 1em; gap: 0.5em; margin-top: 0.75rem; }
.summary .bb-wishlist-btn::after {
  content: attr(aria-label); font-size: 0.85rem; font-weight: 600; margin-left: 0.4em;
}
/* ---------- Single Product ---------- */
.bb-single-product { padding-top: 2rem; padding-bottom: 3rem; }
.woocommerce div.product div.images,
.woocommerce div.product div.summary { margin-bottom: 1.5rem; }
.woocommerce div.product .summary p.price,
.woocommerce div.product .summary span.price {
  color: var(--bb-black); font-weight: 600;
}
.woocommerce div.product .summary .price ins { color: var(--bb-red); text-decoration: none; }
.woocommerce div.product .summary .price del { color: var(--bb-gray-light); opacity: 1; }
.product_meta {
  display: flex; flex-direction: column; gap: 0.35rem;
  margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--bb-border-light);
  font-size: 0.85rem; color: var(--bb-gray);
}
.product_meta > span { display: block; }
.product_meta a { color: var(--bb-red); }

/* ---------- Variation picker ("Choose an option") ---------- */
.woocommerce div.product form.cart .variations {
  width: 100%; margin-bottom: 1.25rem; border-collapse: separate; border-spacing: 0 0.75rem;
}
.woocommerce div.product form.cart .variations tr { display: flex; flex-direction: column; }
.woocommerce div.product form.cart .variations th.label {
  text-align: left; padding: 0 0 0.35rem; font-weight: 700; font-size: 0.9rem;
}
.woocommerce div.product form.cart .variations td.value { padding: 0; }
.woocommerce div.product form.cart .variations select {
  appearance: none; -webkit-appearance: none;
  width: 100%; max-width: 320px; padding: 0.65em 2.25em 0.65em 0.9em;
  border: 1px solid var(--bb-border-light); border-radius: var(--bb-radius); background-color: var(--bb-white);
  font-size: 0.95rem; font-family: inherit; color: var(--bb-black); cursor: pointer;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" fill="none" stroke="%23000000" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat; background-position: right 0.85em center;
  transition: border-color 0.15s ease;
}
.woocommerce div.product form.cart .variations select:hover { border-color: var(--bb-red); }
.woocommerce div.product form.cart .variations select:focus {
  border-color: var(--bb-red); box-shadow: 0 0 0 3px rgba(195, 40, 47, 0.15);
}
.woocommerce div.product form.cart .variations select:focus-visible {
  outline: 2px solid var(--bb-red); outline-offset: 1px;
}
.woocommerce div.product form.cart .reset_variations {
  display: inline-block; margin-top: 0.5rem; font-size: 0.82rem; color: var(--bb-gray); text-decoration: underline;
}
.woocommerce div.product form.cart .single_variation_wrap {
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--bb-border-light);
}
.woocommerce div.product form.cart .woocommerce-variation-price .price { color: var(--bb-red); font-weight: 700; }
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart button.button {
  background: var(--bb-red); color: #fff; border: none; border-radius: var(--bb-radius);
  padding: 0.9em 2em; font-weight: 600; font-size: 0.85rem; cursor: pointer;
  text-transform: uppercase; letter-spacing: var(--bb-tracking);
  transition: background 0.15s ease;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce div.product form.cart button.button:hover { background: var(--bb-black); }
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart button.button.disabled {
  background: var(--bb-border-light); color: #8a8580; cursor: not-allowed;
}

/* WooCommerce's own default classes we intentionally style, not fight. Its
   bundled woocommerce-layout.css forces float:left + a percentage width +
   large right-margin on every li.product (a legacy float-grid system) --
   those fight a CSS grid parent and produce badly-sized, gappy cards, so
   every one of those properties needs an explicit override here. */
.woocommerce ul.products {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem;
  list-style: none; padding: 0; margin: 0 0 2rem;
}
/* woocommerce-layout.css puts a content:" ";display:table clearfix on
   ::before/::after -- harmless under the float layout it was written for,
   but under this grid it becomes two extra (invisible) grid items: ::before
   steals row 1's first cell, shifting every real product over by one, and
   ::after eats a trailing cell. Must be neutralized, not just hidden with
   visibility, or it still occupies a grid track. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none !important;
  display: none !important;
}
.woocommerce ul.products li.product {
  float: none !important; width: auto !important; margin: 0 !important;
  border: 1px solid var(--bb-border-light); border-radius: var(--bb-radius); padding: 0.85rem;
  background: var(--bb-white); display: flex; flex-direction: column; font-size: 0.9rem;
  transition: border-color 0.18s ease;
  min-width: 0; /* allows flex children to shrink below content size */
}
.woocommerce ul.products li.product:hover { border-color: var(--bb-black); }
/* This theme's WooCommerce version wraps image + title + price together in
   one link (woocommerce_template_loop_product_link_open()/_close()), with
   the add-to-cart button as a separate sibling after it -- so the link
   itself needs to be a column, not a row, and only the <img> gets the
   fixed-height centering frame. Without this, images smaller than the
   standard product-photo size (e.g. the Khyber Optics logo flag) sit at
   their native size instead of centered in a consistent box. */
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
  display: flex; flex-direction: column;
  overflow: hidden; /* clips the hover zoom below to the image's own box */
  width: 100%;
  min-width: 0; /* allows flex children to shrink below content size */
}
.woocommerce ul.products li.product a.woocommerce-loop-product__link img {
  height: 180px; width: 100%;
  object-fit: contain; object-position: center;
  display: block; margin: 0 auto 0.6rem;
  border-radius: var(--bb-radius);
  transition: transform 0.25s ease;
}
.woocommerce ul.products li.product:hover a.woocommerce-loop-product__link img {
  transform: scale(1.05);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 0.88rem; margin: 0 0 0.25rem;
  line-height: 1.75;
  min-height: calc(1.75em * 2);
  max-height: calc(1.75em * 2.15);
  overflow: hidden;
  word-wrap: break-word;
  word-break: break-word;
  width: 100%;
}
.woocommerce ul.products li.product .price { font-weight: 600; color: var(--bb-black); margin: 0; font-size: 0.9rem; }
.woocommerce ul.products li.product .price ins { color: var(--bb-red); text-decoration: none; }
.woocommerce ul.products li.product .price del { color: var(--bb-gray-light); opacity: 1; }
/* The add-to-cart button (or notify form) and the wishlist heart both fire
   on woocommerce_after_shop_loop_item as separate siblings -- inc/wishlist.php
   wraps them in this row so the heart sits spaced out to the button's right
   instead of stacking on its own line underneath.
   Bottom-anchored, not tucked directly under price -- grid rows stretch
   every card in a row to equal height, so margin-top:auto pushes the row to
   the same distance from the tile's bottom edge on every card, regardless of
   image size or title/price length. */
.bb-native-action-row {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
}
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.add_to_cart_button {
  display: inline-block; padding: 0.5em 1em;
  background: var(--bb-red); color: #fff !important; border-radius: var(--bb-radius);
  font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: var(--bb-tracking);
  border: none; text-align: center;
}
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover { background: var(--bb-black); }
/* Same "View cart" takeover as .bb-product-card__action above (see that
   rule's comment) -- this is the OTHER add-to-cart card markup on the site
   (the stock WooCommerce shop/category grid and Related/Cross-sells loops,
   via inc/wishlist.php's .bb-native-action-row wrapper, vs. the custom
   homepage-carousel cards) and needed its own copy of the fix: a shared
   .bb-product-card__action-only selector never matched this row, so the
   old two-buttons-fighting-for-space/checkmark-wrap behavior was still live
   everywhere except the homepage carousels. */
/* !important on the hide: the base rule two blocks up
   (".woocommerce ul.products li.product a.add_to_cart_button") is (0,4,3)
   specificity, higher than a same-source-order ".bb-native-action-row
   a.add_to_cart_button.added" (0,3,1) could ever beat on its own -- its
   display:inline-block would keep winning and the button would stay
   visible regardless of the .added class. */
.woocommerce ul.products li.product a.add_to_cart_button.added { display: none !important; }
.bb-native-action-row a.added_to_cart.wc-forward {
  padding: 0.5em 1em; font-size: 0.7rem;
}

/* ---------- Shop/Category Layout + Filter Sidebar (inc/shop-filters.php) ---------- */
/* Two-column grid: filter panel as its own column on the left, main content
   (title, result count/sort, product grid, pagination -- all rendered by
   woocommerce_content()) on the right. Sidebar is first in both DOM and
   column order, so no explicit `order` is needed to keep it on the left. */
.bb-shop-layout {
  display: grid; grid-template-columns: 280px 1fr; gap: 1rem 2.5rem; align-items: start;
}

.bb-shop-filters {
  border: 1px solid var(--bb-border-light); padding: 1.75rem;
}
.bb-shop-filters__heading {
  font-size: 0.95rem; text-transform: uppercase; letter-spacing: var(--bb-tracking);
  border-bottom: 1px solid var(--bb-black); padding-bottom: 0.85rem; margin: 0 0 1.5rem;
}
/* Desktop: the heading is a <button> now (for the mobile toggle below) but
   reads identically to the plain text it replaced -- full width, left
   aligned, no button chrome, not interactive-looking, since it's inert here. */
.bb-shop-filters__toggle {
  display: block; width: 100%; text-align: left; background: none; border: none;
  border-bottom: 1px solid var(--bb-black); font-family: inherit; cursor: default;
}
.bb-shop-filters__section { margin-bottom: 1.75rem; }
.bb-shop-filters__section-title {
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: var(--bb-tracking);
  color: var(--bb-gray); margin: 0 0 0.85rem;
}
.bb-shop-filters__price-row { display: flex; align-items: center; gap: 0.6rem; }
.bb-shop-filters__price-row input[type="number"] {
  width: 100%; min-width: 0; padding: 0.55em 0.65em; border: 1px solid var(--bb-border-light); border-radius: var(--bb-radius);
  font-size: 0.85rem; font-family: inherit;
}
.bb-shop-filters__price-row input[type="number"]:focus { border-color: var(--bb-black); }
.bb-shop-filters__price-row input[type="number"]:focus-visible { outline: 2px solid var(--bb-black); outline-offset: 1px; }
.bb-shop-filters__dash { color: var(--bb-gray-light); flex-shrink: 0; }
.bb-shop-filters__check {
  display: flex; align-items: center; gap: 0.6em; cursor: pointer;
  font-size: 0.85rem; margin-bottom: 0.75rem;
}
.bb-shop-filters__check:last-child { margin-bottom: 0; }
.bb-shop-filters__submit { width: 100%; padding: 0.7em 1em; font-size: 0.75rem; }
.bb-shop-filters__clear {
  display: block; text-align: center; color: var(--bb-gray); font-size: 0.78rem;
  text-decoration: underline; text-underline-offset: 2px; margin-top: 1rem;
}
.bb-shop-filters__clear:hover { color: var(--bb-red); }
.bb-shop-filters__section--categories { margin-top: 0.25rem; padding-top: 1.75rem; border-top: 1px solid var(--bb-border-light); }
.bb-shop-filters__cat-list { list-style: none; margin: 0; padding: 0; }
.bb-shop-filters__cat-list li + li { border-top: 1px solid var(--bb-border-light); }
.bb-shop-filters__cat-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.6em 0; color: var(--bb-black); font-size: 0.85rem;
}
.bb-shop-filters__cat-list a:hover { color: var(--bb-red); }
.bb-shop-filters__cat-list a.is-active { color: var(--bb-red); font-weight: 600; }
.bb-shop-filters__cat-count { color: var(--bb-gray-light); font-size: 0.78rem; }

/* Tablet tier (768-899px, e.g. iPad Mini/Air/Pro in portrait): the header's
   899px breakpoint is shared with the hamburger nav, which genuinely needs
   that width to switch (the desktop mega-menu row doesn't fit a portrait
   tablet either) -- but the shop sidebar has no such constraint. Reusing
   899px for it too was collapsing a perfectly good 280px sidebar into an
   accordion on every portrait iPad, purely because it shared a breakpoint
   with an unrelated component. Kept as its own narrower fixed column here
   instead of the full 280px so the content column doesn't get squeezed. */
@media (min-width: 768px) and (max-width: 899px) {
  .bb-shop-layout { grid-template-columns: 220px 1fr; gap: 1rem 1.5rem; }
  .bb-shop-filters { padding: 1.25rem; }
}
@media (max-width: 767px) {
  .bb-shop-layout { grid-template-columns: 1fr; }
  .bb-shop-filters { margin-bottom: 2rem; padding: 0; border: none; }
  /* Collapsed by default -- previously always rendered fully expanded above
     the product grid, pushing 1000px+ of filter UI between the page header
     and the first product on every shop/category page load. */
  .bb-shop-filters__toggle {
    cursor: pointer; padding: 1.1rem 1.75rem; border: 1px solid var(--bb-border-light);
    display: flex; align-items: center; justify-content: space-between;
  }
  .bb-shop-filters__toggle::after {
    content: "+"; font-size: 1.1rem; transition: transform 0.15s ease;
  }
  .bb-shop-filters.is-open .bb-shop-filters__toggle::after { transform: rotate(45deg); }
  .bb-shop-filters__active-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--bb-red); margin-left: 0.5em;
  }
  .bb-shop-filters__body {
    display: none; padding: 1.75rem; border: 1px solid var(--bb-border-light); border-top: none;
  }
  .bb-shop-filters.is-open .bb-shop-filters__body { display: block; }
}

/* ---------- Training Video (portrait 9:16 embed) ---------- */
/* Sits in the filter sidebar column rather than full container width -- a
   9:16 embed stretched across the page would tower over everything else.
   aspect-ratio + absolutely-positioned iframe matches the existing pattern
   for product-card thumbs/hero banner above (style.css ~612, 1890). */
.bb-training-video {
  position: relative; width: 100%; aspect-ratio: 9 / 16;
  overflow: hidden; background: var(--bb-black);
  margin-top: 1.5rem;
}
.bb-training-video iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* ---------- Brand Picker ---------- */
.bb-brand-grid {
  list-style: none; margin: 2rem 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem;
}
.bb-brand-grid__tile a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.35rem; padding: 2rem 1rem; text-align: center;
  border: 1px solid var(--bb-border-light); border-radius: var(--bb-radius); background: var(--bb-white);
}
.bb-brand-grid__tile a:hover { border-color: var(--bb-black); }
.bb-brand-grid__logo { max-width: 100%; max-height: 72px; object-fit: contain; }
.bb-brand-grid__name {
  font-weight: 700; font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: var(--bb-tracking);
}
.bb-brand-grid__count { font-size: 0.8rem; color: var(--bb-gray); }
@media (max-width: 899px) { .bb-brand-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Generic Page / Contact / Blog ---------- */
.bb-page { padding-block: 2.5rem 4rem; max-width: 900px; margin-inline: auto; }
/* Single blog posts fall back to this generic template (see index.php) --
   scripts/crawl_brushbeater.py's clean_blog_body_html() rebuilds each post
   into real <p>/<h2>/<h3>/<ul>/<a>/<iframe> markup, so it needs the same
   kind of prose spacing the product Description tab gets rather than
   relying on browser defaults. */
.bb-page__content { max-width: 68ch; }
.bb-page__content h2, .bb-page__content h3, .bb-page__content h4 { margin-top: 1.75rem; }
.bb-page__content p, .bb-page__content ul, .bb-page__content ol, .bb-page__content blockquote { margin: 0 0 1.1rem; }
.bb-page__content ul, .bb-page__content ol { padding-left: 1.25rem; }
.bb-page__content li { margin-bottom: 0.4rem; }
.bb-page__content a { color: var(--bb-red); text-decoration: underline; }
.bb-page__content blockquote {
  border-left: 3px solid var(--bb-border-light); padding-left: 1rem; color: var(--bb-gray); font-style: italic;
}
.bb-page__content iframe { max-width: 100%; aspect-ratio: 16 / 9; width: 100%; height: auto; margin: 0 0 1.1rem; }
.bb-contact-page { max-width: 1100px; margin-inline: auto; padding-block: 2.5rem 4rem; }
.bb-contact-page__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 3rem; align-items: start; }

.bb-about-page { max-width: 900px; margin-inline: auto; padding-block: 2.5rem 4rem; }
.bb-about-page__icon { width: 160px; margin: 0 auto 2rem; }
.bb-about-page__icon img { width: 100%; height: auto; display: block; }
.bb-about-page__content > *:first-child { margin-top: 0; }

/* ---------- Blog Listing ---------- */
.bb-blog { max-width: 1180px; margin-inline: auto; padding-block: 3rem 5rem; }

/* Centered hero band -- eyebrow + display-font title + subtitle, the same
   "large display type used sparingly" language as the homepage hero H1 and
   the two major section titles (see --bb-font-display's comment up top),
   so the blog page reads as a real section of the site rather than a bare
   <h1>Blog</h1> dropped on an otherwise-empty page. */
.bb-blog-hero { text-align: center; max-width: 640px; margin: 0 auto 3.5rem; }
.bb-blog-hero__eyebrow {
  display: block; text-transform: uppercase; letter-spacing: var(--bb-tracking-wide);
  font-size: 0.8rem; font-weight: 600; color: var(--bb-red); margin-bottom: 0.75rem;
}
.bb-blog-hero__title {
  font-family: var(--bb-font-gothic); font-weight: 700;
  font-size: clamp(3.25rem, 8vw, 5rem); line-height: 1.1; letter-spacing: 0.01em;
  margin: 0.15rem 0 1rem; padding-bottom: 1rem;
  border-top: 3px solid var(--bb-black); border-bottom: 1px solid var(--bb-black);
  padding-top: 0.6rem;
}
.bb-blog-hero__subtitle { color: var(--bb-gray); font-size: 1.05rem; margin: 0 0 2rem; }

/* Blog search -- header's .bb-search is dark-background-only (see the 404
   fallback note below), so this gets its own light-background styling
   rather than reusing those classes on the off-white blog page. */
.bb-blog-search { position: relative; display: flex; gap: 0.6rem; max-width: 420px; margin: 0 auto; text-align: left; }
.bb-blog-search__input {
  flex: 1 1 auto; min-width: 0; padding: 0.7em 1em;
  border: 1px solid var(--bb-border-light); border-radius: var(--bb-radius);
  font-size: 0.9rem; font-family: inherit;
}
.bb-blog-search__input:focus { border-color: var(--bb-black); }
.bb-blog-search__input:focus-visible { outline: 2px solid var(--bb-black); outline-offset: 1px; }
.bb-blog-search__submit {
  padding: 0 1.1em; font-size: 0.78rem; font-weight: 600;
  background: var(--bb-black); color: var(--bb-white); border: none; border-radius: var(--bb-radius); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.bb-blog-search__submit:hover { background: var(--bb-red); }
.bb-blog-search__results {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 0.4rem; z-index: 20;
  background: var(--bb-white); border: 1px solid var(--bb-border-light); border-radius: var(--bb-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); max-height: 60vh; overflow-y: auto;
}
.bb-blog-search__results:not([hidden]) { animation: bb-fade-in 0.15s ease; }
.bb-blog-search__result {
  display: flex; gap: 0.75rem; padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--bb-border-light);
}
.bb-blog-search__result:last-child { border-bottom: none; }
.bb-blog-search__result:hover, .bb-blog-search__result:focus { background: var(--bb-off-white); }
.bb-blog-search__result-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: var(--bb-radius); flex-shrink: 0; }
.bb-blog-search__result-info { display: flex; flex-direction: column; min-width: 0; }
.bb-blog-search__result-title { font-weight: 600; font-size: 0.9rem; }
.bb-blog-search__result-date { color: var(--bb-gray); font-size: 0.78rem; margin: 0.1rem 0 0.2rem; }
.bb-blog-search__result-excerpt {
  color: var(--bb-gray); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.bb-blog-search__empty { padding: 1rem; color: var(--bb-gray); font-size: 0.9rem; }

/* Card grid -- same centered-image-with-hover-zoom + sharp-corner language
   as .bb-category-band__image-wrap, swapped from the old single-column
   left-image/right-text row so the page reads as a modern editorial grid. */
.bb-blog__list {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 2rem;
}
.bb-blog__post { display: flex; flex-direction: column; }
.bb-blog__post-thumb {
  display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--bb-off-white); margin-bottom: 1.1rem;
}
.bb-blog__post-thumb img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.3s ease;
}
.bb-blog__post:hover .bb-blog__post-thumb img { transform: scale(1.05); }
.bb-blog__post-meta {
  color: var(--bb-gray-light); font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--bb-tracking); margin: 0 0 0.4rem;
}
.bb-blog__post-title { font-size: 1.15rem; line-height: 1.3; margin: 0 0 0.5rem; }
.bb-blog__post-title a:hover { color: var(--bb-red); }
.bb-blog__post-excerpt { color: var(--bb-gray); font-size: 0.92rem; margin: 0 0 0.75rem; }
.bb-blog__post-more {
  display: inline-flex; align-items: center; gap: 0.4em; align-self: flex-start; margin-top: auto;
  color: var(--bb-black); font-weight: 600; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: var(--bb-tracking);
  border-bottom: 1px solid var(--bb-black); padding-bottom: 2px;
}
.bb-blog__post-more::after { content: "\2192"; display: inline-block; transition: transform 0.2s ease; }
.bb-blog__post:hover .bb-blog__post-more { color: var(--bb-red); border-color: var(--bb-red); }
.bb-blog__post:hover .bb-blog__post-more::after { transform: translateX(3px); }
.bb-blog__pagination { margin-top: 3rem; display: flex; justify-content: center; align-items: center; gap: 0.5rem; }
.bb-blog__pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.25rem; height: 2.25rem; padding: 0 0.6rem;
  border: 1px solid var(--bb-border-light); font-size: 0.85rem; font-weight: 600;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.bb-blog__pagination a.page-numbers { color: var(--bb-black); }
.bb-blog__pagination a.page-numbers:hover { border-color: var(--bb-red); color: var(--bb-red); }
.bb-blog__pagination .page-numbers.current { background: var(--bb-black); color: var(--bb-white); border-color: var(--bb-black); }
.bb-blog__pagination .page-numbers.dots { border-color: transparent; }
.bb-blog__empty { text-align: center; color: var(--bb-gray); }
@media (max-width: 899px) {
  .bb-blog__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  .bb-blog__list { grid-template-columns: 1fr; }
}
.bb-contact-form p { margin: 0 0 1rem; }
.bb-contact-form label { display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.9rem; }
.bb-contact-form input, .bb-contact-form textarea {
  width: 100%; padding: 0.6em 0.8em; border-radius: var(--bb-radius);
  border: 1px solid var(--bb-border-light); font-family: inherit; font-size: 1rem;
}
.bb-contact-form input:focus, .bb-contact-form textarea:focus { border-color: var(--bb-black); }
.bb-contact-form input:focus-visible, .bb-contact-form textarea:focus-visible { outline: 2px solid var(--bb-black); outline-offset: 1px; }
.bb-contact-form__message:not([hidden]) { animation: bb-fade-in 0.25s ease; }
.bb-contact-form__message { margin-top: 0.75rem; }
.bb-contact-form__message.is-error { color: var(--bb-red); }
@media (max-width: 899px) {
  .bb-contact-page__grid { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
.bb-footer { background: var(--bb-chrome-bg); color: var(--bb-chrome-ink); margin-top: 3rem; }
.bb-footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; padding-block: 4rem; }
/* A grid item's automatic minimum width defaults to its content's
   min-content size, not 0 -- at the narrowest phone tier (single column),
   the newsletter form's flex row (email input + a flex-shrink:0
   "SUBSCRIBE" button) has a combined natural width of ~324px, wider than a
   320px viewport's ~288px content column, and nothing forced it to shrink
   further despite the input's own min-width:0. Verified via
   document.documentElement.scrollWidth (340px, page-level horizontal
   scroll) on a 320px viewport. This is the standard fix pattern for CSS
   Grid's implicit min-size floor. */
.bb-footer__col { min-width: 0; }
.bb-footer__col h3, .bb-footer__col h4 {
  color: #fff; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: var(--bb-tracking-wide);
}
.bb-footer__social { display: flex; gap: 0.75rem; margin-top: 0.75rem; }
.bb-footer__social a {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.08); color: var(--bb-chrome-ink);
}
.bb-footer__social a:hover { background: var(--bb-red); }
.bb-footer__social svg { width: 18px; height: 18px; }
.bb-footer__links { list-style: none; margin: 0; padding: 0; }
.bb-footer__links li { margin-bottom: 0.4rem; }
.bb-footer__bottom { border-top: 1px solid var(--bb-border); padding-block: 1rem; font-size: 0.8rem; text-align: center; }

.bb-newsletter-form__row { display: flex; gap: 0.5rem; }
.bb-newsletter-form__row input {
  flex: 1 1 auto; min-width: 0; padding: 0.6em 0.8em;
  border-radius: var(--bb-radius); border: 1px solid var(--bb-border);
  background: rgba(255,255,255,0.05); color: var(--bb-chrome-ink);
}
.bb-newsletter-form__row .bb-btn { padding: 0.6em 1.1em; flex-shrink: 0; }
.bb-newsletter-form__message:not([hidden]) { animation: bb-fade-in 0.25s ease; }
.bb-newsletter-form__message { margin-top: 0.6rem; font-size: 0.85rem; }
.bb-newsletter-form__message.is-error { color: var(--bb-red); }

/* ---------- Cart / Checkout / My Account ---------- */
/* None of WooCommerce's cart/checkout/account templates had ever been
   restyled -- they rendered with WC's stock purple (#7f54b3) buttons and
   blue focus/accent lines, clashing with the black/white/red system used
   everywhere else, right at the final conversion step. */
.woocommerce-cart h1.page-title,
.woocommerce-checkout h1.page-title,
.woocommerce-account h1.page-title { margin-bottom: 1.5rem; }

/* Cart/Checkout are real WP Pages rendered through page.php like any prose
   page (About Us, Terms of Service), so they inherit .bb-page's 900px cap
   and .bb-page__content's 68ch (~586px) "readable article line length"
   constraint -- both are right for body text, but they squeeze the cart
   table + order-summary two-column layout into a single narrow column with
   a large dead margin on the right. WordPress adds these body classes
   automatically on the Cart/Checkout pages, so widen just those two rather
   than loosening the constraint for every other page.php page. */
body.woocommerce-cart .bb-page,
body.woocommerce-checkout .bb-page {
  max-width: 1200px;
}
body.woocommerce-cart .bb-page__content,
body.woocommerce-checkout .bb-page__content {
  max-width: none;
}

/* Coupon-toggle / info notices default to a blue-bordered box -- flatten to
   the site's neutral border language. */
.woocommerce-info, .woocommerce-message, .woocommerce-noreviews,
.woocommerce-form-coupon-toggle .woocommerce-info {
  border-top-color: var(--bb-black);
  background: var(--bb-off-white); color: var(--bb-black);
}
.woocommerce-info::before, .woocommerce-message::before { color: var(--bb-black); }

/* Shared table treatment: cart line items, cart totals, checkout order
   review -- same bordered/sharp-corner language as the product grid. */
table.shop_table {
  width: 100%; border-collapse: collapse; border: 1px solid var(--bb-border-light);
  margin: 0 0 1.5rem;
}
table.shop_table th {
  text-align: left; padding: 0.85em 1em; border-bottom: 1px solid var(--bb-black);
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: var(--bb-tracking); font-weight: 600;
}
table.shop_table td {
  padding: 0.85em 1em; border-bottom: 1px solid var(--bb-border-light); vertical-align: middle;
}
table.shop_table tr:last-child td { border-bottom: none; }
table.shop_table tfoot th, table.shop_table tfoot td { padding: 0.85em 1em; }

/* Cart line-item thumbnail -- was rendering at whatever aspect ratio the
   source photo happens to be (e.g. 300x95 for a wide flag graphic),
   unreadable at this display size. Same fixed-box + object-fit treatment as
   .bb-product-card__image img. */
/* WooCommerce's own woocommerce.css has
   ".woocommerce-cart table.cart img { width: 32px }" -- 2 classes + 2
   elements outranks a plain "td.product-thumbnail img", so this needs the
   same ancestor classes to actually win. */
td.product-thumbnail { width: 84px; }
.woocommerce-cart table.cart td.product-thumbnail img {
  width: 64px; height: 64px; max-width: 64px; object-fit: contain; object-position: center;
  border: 1px solid var(--bb-border-light);
}
td.product-name a { color: var(--bb-black); font-weight: 600; }
a.remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5em; height: 1.5em; color: var(--bb-gray) !important;
  border: 1px solid var(--bb-border-light); border-radius: 50%;
  background: transparent !important; font-size: 1rem; line-height: 1;
}
a.remove:hover { color: #fff !important; background: var(--bb-red) !important; border-color: var(--bb-red); }

/* Quantity steppers -- cart table + single-product form share this markup. */
.quantity .qty,
.woocommerce div.product form.cart div.quantity input.qty {
  width: 3.5em; padding: 0.5em 0.5em; border: 1px solid var(--bb-border-light); border-radius: var(--bb-radius);
  font-size: 0.9rem; font-family: inherit; text-align: center;
}
.quantity .qty:focus { border-color: var(--bb-black); }
.quantity .qty:focus-visible { outline: 2px solid var(--bb-black); outline-offset: 1px; }

/* Coupon field + Update Cart row. */
.woocommerce-cart-form .coupon { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.woocommerce-cart-form .coupon #coupon_code {
  padding: 0.6em 0.8em; border: 1px solid var(--bb-border-light); border-radius: var(--bb-radius);
  font-size: 0.85rem; font-family: inherit; min-width: 180px;
}
.woocommerce-cart-form .coupon #coupon_code:focus { border-color: var(--bb-black); }
.woocommerce-cart-form .coupon #coupon_code:focus-visible { outline: 2px solid var(--bb-black); outline-offset: 1px; }
.woocommerce-cart-form button[name="apply_coupon"],
.woocommerce-cart-form button[name="update_cart"] {
  padding: 0.6em 1.25em; font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--bb-tracking);
  background: var(--bb-black); color: var(--bb-white); border: none; border-radius: var(--bb-radius); cursor: pointer;
}
.woocommerce-cart-form button[name="apply_coupon"]:hover,
.woocommerce-cart-form button[name="update_cart"]:hover { background: var(--bb-red); }
.woocommerce-cart-form button[name="update_cart"]:disabled { background: var(--bb-gray-light); cursor: default; }

/* Local Pickup availability note appended in inc/woocommerce-hooks.php --
   secondary to the rate name/price it sits next to, not equal weight. */
.bb-pickup-hours-note {
  display: block; font-size: 0.75rem; color: var(--bb-gray); font-weight: 400;
}

.cart_totals h2 {
  font-size: 1.1rem; text-transform: uppercase; letter-spacing: var(--bb-tracking);
  border-bottom: 1px solid var(--bb-black); padding-bottom: 0.75rem; margin: 0 0 1rem;
}
.cart_totals .order-total .amount { font-weight: 700; font-size: 1.1rem; }

/* Cart-page cross-sells ("You may be interested in...") share the same
   ul.products markup as the main shop grid, but .cart-collaterals sits them
   in a narrow column next to .cart_totals -- at ~280-580px wide, the
   viewport-width-based column breakpoints on .woocommerce ul.products above
   (tuned for the full-width shop grid) squeeze 4-5 columns into that
   sliver, wrapping every card's text to one letter per line. WooCommerce
   already marks the intended column count via its own "columns-2" class on
   this ul -- honor that instead of the generic grid. */
.cross-sells ul.products {
  grid-template-columns: repeat(2, 1fr) !important;
}
/* Dropped entirely on mobile (same breakpoint the rest of the site treats
   as "mobile" -- hamburger nav, mobile hero, etc. all switch here too):
   on a narrow single-column cart page, "You may be interested in..." pushes
   the actual cart totals/checkout button an extra screen or more down,
   competing with the primary task instead of supporting it. */
@media (max-width: 899px) {
  .cross-sells { display: none; }
  /* a.remove (the cart row's circular "x") is 1.5em (24px) -- fine as a
     precise mouse target but under WCAG 2.5.8's 44px minimum for touch,
     the same standard the header icons are explicitly sized to elsewhere
     in this file. Bumped for touch without changing its look on desktop. */
  a.remove { width: 2.75em; height: 2.75em; font-size: 1.15rem; }
  /* Native number-input spinner buttons are otherwise a fixed, unstyleable
     ~20px tall regardless of the input's own font-size -- taller padding
     gives the whole control (including the spinner) more vertical room to
     tap accurately. */
  .quantity .qty,
  .woocommerce div.product form.cart div.quantity input.qty { padding: 0.75em 0.5em; }
}

/* Primary conversion buttons: Proceed to Checkout, Place Order -- WC's
   default purple, restyled to the site's red/uppercase/tracked button
   language and made full-width for a confident, unmissable final CTA. */
/* WooCommerce's own woocommerce.css has ".woocommerce a.button.alt" (3
   classes), which outranks a 2-class selector regardless of our stylesheet
   loading last -- match the same classes actually on the markup
   (checkout-button.button.alt) so ours wins on specificity, not load order. */
a.checkout-button.button.alt,
#place_order.button.alt {
  display: block; width: 100%; text-align: center;
  padding: 0.9em 1.5em; font-size: 0.85rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--bb-tracking);
  background: var(--bb-red); color: #fff !important; border: none; border-radius: var(--bb-radius);
  cursor: pointer; transition: background-color 0.15s ease;
}
a.checkout-button.button.alt:hover,
#place_order.button.alt:hover { background: var(--bb-black); }

/* Empty-cart "Return to shop" -- same ".woocommerce button.button" gray
   default and same fix (match its own classes for specificity parity). */
a.button.wc-backward {
  display: inline-block; padding: 0.6em 1.5em; font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--bb-tracking);
  background: var(--bb-black); color: var(--bb-white) !important; border: none; border-radius: var(--bb-radius);
}
a.button.wc-backward:hover { background: var(--bb-red); }

/* "View cart" -- shown two places after adding an item, neither previously
   restyled: WooCommerce's own light-lavender-on-off-white notice button
   (.button.wc-forward, in the "X has been added to your cart" bar) reads as
   barely-there low contrast against this theme's equally pale off-white
   notice background; the AJAX shop-loop swap (.added_to_cart.wc-forward,
   replacing "Add to Cart" in place) had no button styling at all, just bare
   text. Same solid black/white treatment as wc-backward above for both. */
a.button.wc-forward,
a.added_to_cart.wc-forward {
  display: inline-block; padding: 0.6em 1.5em; font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--bb-tracking);
  background: var(--bb-black); color: var(--bb-white) !important; border: none; border-radius: var(--bb-radius);
}
a.button.wc-forward:hover,
a.added_to_cart.wc-forward:hover { background: var(--bb-red); }

/* Checkout form fields -- billing/shipping rows and the account login/
   register forms share the same .form-row markup. */
.woocommerce form .form-row label { font-size: 0.85rem; margin-bottom: 0.3rem; display: inline-block; }
.woocommerce form .form-row .required { color: var(--bb-red); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row select {
  width: 100%; padding: 0.6em 0.75em; border: 1px solid var(--bb-border-light); border-radius: var(--bb-radius);
  font-size: 0.9rem; font-family: inherit; background: var(--bb-white);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus { border-color: var(--bb-black); }
.woocommerce form .form-row input.input-text:focus-visible,
.woocommerce form .form-row textarea:focus-visible,
.woocommerce form .form-row select:focus-visible { outline: 2px solid var(--bb-black); outline-offset: 1px; }
.woocommerce-checkout #payment,
.woocommerce-checkout-review-order { background: transparent; border: none; padding: 0; }
.woocommerce-checkout-review-order-table { margin-top: 1rem; }

/* Payment method list -- default is a lavender-gray box; flatten to a
   bordered panel matching the rest of the site. */
.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid var(--bb-border-light); padding: 0 0 1rem; margin: 0 0 1rem; list-style: none;
}
.woocommerce-checkout #payment li.wc_payment_method { padding: 0.6em 0; }
/* WC's own rule is ".woocommerce-checkout #payment div.payment_box" -- the
   extra "div" element qualifier out-specifies a selector without it. */
.woocommerce-checkout #payment div.payment_box {
  background: var(--bb-off-white); border: 1px solid var(--bb-border-light); border-radius: var(--bb-radius);
  padding: 1rem; margin: 0.75rem 0 0; font-size: 0.85rem; color: var(--bb-gray);
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
/* Native radio/checkbox accent color -- browser default is blue, clashing
   with the black/red system used everywhere else. */
.woocommerce-checkout input[type="radio"],
.woocommerce-checkout input[type="checkbox"],
.woocommerce-cart input[type="checkbox"] { accent-color: var(--bb-black); }

/* My Account login/register. */
.woocommerce-form-login, .woocommerce-form-register {
  border: 1px solid var(--bb-border-light); border-radius: var(--bb-radius); padding: 1.75rem;
}
/* WooCommerce core's password show/hide toggle sizes its clickable area
   entirely off its ::before icon's fixed 22x22 box (no width/height of its
   own) -- 2px under the 24x24 touch-target minimum, caught by a Lighthouse
   a11y audit. Centering the icon inside an explicit 24x24 button box fixes
   the target size without changing how the icon itself looks. */
.woocommerce-form-login .show-password-input,
.woocommerce-form-register .show-password-input {
  min-width: 24px; min-height: 24px; display: flex; align-items: center; justify-content: center;
}
/* WC's own ".woocommerce button.button" rule (gray #e9e6ed) beats a plain
   2-class selector -- adding the "button" element keeps specificity equal,
   which then resolves in our favor since style.css loads last. */
.woocommerce-form-login button.woocommerce-form-login__submit,
.woocommerce-form-register button[type="submit"] {
  padding: 0.6em 1.5em; font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--bb-tracking);
  background: var(--bb-black); color: var(--bb-white); border: none; border-radius: var(--bb-radius); cursor: pointer;
}
.woocommerce-form-login button.woocommerce-form-login__submit:hover,
.woocommerce-form-register button[type="submit"]:hover { background: var(--bb-red); }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--bb-border-light);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 0.6em 0; color: var(--bb-black); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--bb-red); font-weight: 600; }

/* FFL/NFA/SOT forced-shipment system (inc/ffl-shipping.php). */
.bb-ffl-checkout {
  border: 1px solid var(--bb-border-light); border-radius: var(--bb-radius);
  background: var(--bb-off-white); padding: 1.5rem; margin: 1.5rem 0;
}
.bb-ffl-checkout h3 {
  margin: 0 0 0.75rem; font-size: 1rem; text-transform: uppercase; letter-spacing: var(--bb-tracking);
}
.bb-ffl-checkout__notice { font-size: 0.85rem; color: var(--bb-gray); margin: 0 0 1rem; }
.bb-ffl-checkout__notice--sot { color: var(--bb-red); font-weight: 600; }
.bb-ffl-checkout__fields { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.bb-ffl-checkout__sot-confirm { font-size: 0.85rem; }
.bb-ffl-checkout__sot-confirm label { display: flex; align-items: flex-start; gap: 0.5em; }
.bb-ffl-checkout__method { margin-bottom: 1rem; }
.bb-ffl-checkout__method label { display: flex; align-items: center; gap: 0.5em; font-size: 0.9rem; }
.bb-ffl-checkout__pickup-info { font-size: 0.8rem; color: var(--bb-gray); margin: 0.15rem 0 0.75rem 1.6em; }
.bb-ffl-checkout__lookup-help { font-size: 0.8rem; color: var(--bb-gray); flex: 0 0 100%; margin: 0 0 0.75rem; }
.bb-ffl-checkout__lookup-help a { color: var(--bb-black); text-decoration: underline; }
.bb-ffl-checkout__lookup-help a:hover { color: var(--bb-red); }

.bb-ffl-badge {
  color: var(--bb-red); font-weight: 700; font-size: 0.85rem; margin: 0.25rem 0;
  text-transform: uppercase; letter-spacing: var(--bb-tracking);
}
.bb-ffl-badge--loop { font-size: 0.7rem; }
.bb-ffl-badge--sot { color: var(--bb-black); }

/* ITAR checkout certification (inc/itar-notice.php) -- same card treatment
   as .bb-ffl-checkout above for a consistent "regulated item" section style
   at checkout. */
.bb-itar-checkout {
  border: 1px solid var(--bb-border-light); border-radius: var(--bb-radius);
  background: var(--bb-off-white); padding: 1.5rem; margin: 1.5rem 0;
}
.bb-itar-checkout h3 {
  margin: 0 0 0.75rem; font-size: 1rem; text-transform: uppercase; letter-spacing: var(--bb-tracking);
}
.bb-itar-checkout__notice { font-size: 0.85rem; color: var(--bb-gray); margin: 0 0 1rem; }
.bb-itar-checkout__confirm { font-size: 0.85rem; }
.bb-itar-checkout__confirm label { display: flex; align-items: flex-start; gap: 0.5em; }

/* ---------- Blocking gate modals (age verification, ITAR certification) ----------
   Deliberately its own class, not .bb-modal (assets/js/wishlist-multi.js) --
   that system's global Escape/overlay-click handlers close ANY .bb-modal,
   which would let a shopper dismiss a mandatory gate without making a
   choice. Visually matches .bb-modal for consistency; behaviorally
   independent. */
.bb-gate-modal {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
}
.bb-gate-modal[hidden] { display: none; }
.bb-gate-modal__overlay {
  position: absolute; inset: 0; background: rgba(0, 0, 0, 0.75);
}
.bb-gate-modal__box {
  position: relative; z-index: 1; background: var(--bb-white); color: var(--bb-black);
  border-radius: var(--bb-radius); max-width: 480px; width: 90%;
  padding: 1.75rem; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
.bb-gate-modal__box h2 { margin: 0 0 0.75rem; font-size: 1.15rem; }
.bb-gate-modal__box p { margin: 0 0 0.75rem; font-size: 0.85rem; line-height: 1.5; }
.bb-gate-modal__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: flex-end; margin-top: 1rem; }
.bb-gate-modal__no {
  background: transparent; color: var(--bb-black); border: 1px solid var(--bb-black);
  padding: 0.65rem 1.25rem; font-size: 0.8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--bb-tracking); cursor: pointer;
  border-radius: var(--bb-radius);
}
.bb-gate-modal__no:hover { background: rgba(0, 0, 0, 0.05); }
body.bb-gate-open { overflow: hidden; }

.bb-ffl-cart-notice {
  border: 1px solid var(--bb-red); border-radius: var(--bb-radius);
  padding: 0.85rem 1.1rem; margin-bottom: 1.25rem; font-size: 0.9rem;
}
.bb-ffl-cart-notice p { margin: 0; }
.bb-ffl-cart-notice--sot { border-color: var(--bb-black); background: var(--bb-off-white); }

.bb-ffl-admin-block { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--bb-border-light); }
.bb-ffl-admin-block h4 { margin: 0 0 0.5rem; }

/* Shared compliance-notice box (ITAR: inc/itar-notice.php, Prop 65:
   inc/prop65-notice.php, FFL/SOT: inc/ffl-shipping.php) -- deliberately
   heavier than .bb-ffl-cart-notice: these are legal restrictions on the
   shopper themselves, not shipping logistics notes, so they need to read as
   a stop sign, not a footnote. Color modifier distinguishes restriction
   type at a glance: red for "can't ship/export this", amber for a Prop 65
   chemical-exposure warning, matching the real-world CA Prop 65 signage
   convention so the two aren't visually conflated. */
.bb-compliance-notice {
  border: 1px solid; border-left-width: 6px;
  border-radius: var(--bb-radius); background: var(--bb-off-white);
  padding: 1rem 1.25rem; margin: 0.5rem 0 1.5rem;
}
.bb-compliance-notice__heading {
  margin: 0 0 0.4rem; font-size: 0.85rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--bb-tracking);
}
.bb-compliance-notice__heading::before { content: "\26A0  "; }
.bb-compliance-notice__body { margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--bb-black); }

.bb-compliance-notice--red { border-color: var(--bb-red); }
.bb-compliance-notice--red .bb-compliance-notice__heading { color: var(--bb-red); }

.bb-compliance-notice--amber { border-color: #b8860b; }
.bb-compliance-notice--amber .bb-compliance-notice__heading { color: #b8860b; }
@media (prefers-color-scheme: dark) {
  .bb-compliance-notice--amber { border-color: #e0a92e; }
  .bb-compliance-notice--amber .bb-compliance-notice__heading { color: #e0a92e; }
}
:root[data-theme="dark"] .bb-compliance-notice--amber { border-color: #e0a92e; }
:root[data-theme="dark"] .bb-compliance-notice--amber .bb-compliance-notice__heading { color: #e0a92e; }

/* Prop 65 reads compact/footnote-style rather than the ITAR "stop sign"
   treatment above -- it's a required disclosure, not a hard restriction on
   the sale, and with the catalog-wide Prop 65 pass it now shows up on far
   more product pages than ITAR does, so it needs to stay out of the way of
   the buy box rather than compete with it for attention. */
.bb-compliance-notice--amber {
  padding: 0.5rem 0.75rem; margin: 0.5rem 0 1rem; border-left-width: 3px;
}
.bb-compliance-notice--amber .bb-compliance-notice__heading { font-size: 0.7rem; margin-bottom: 0.25rem; }
.bb-compliance-notice--amber .bb-compliance-notice__body { font-size: 0.75rem; line-height: 1.4; }

/* ---------- Product Gallery ---------- */
/* The main gallery frame itself has no default WC background tint (that
   lavender look on some products is the photo's own studio backdrop, not
   CSS) -- what actually needed polish was the floating zoom icon's plain
   default chrome and the thumbnail strip's opacity-only (no border) active
   state, both of which read as stock/unfinished next to the rest of the
   site's consistently bordered image treatment. */
.woocommerce-product-gallery__wrapper { border: 1px solid var(--bb-border-light); position: relative; }
.woocommerce-product-gallery__trigger { border: 1px solid var(--bb-border-light); }
.woocommerce-product-gallery__trigger:hover { background: var(--bb-off-white); }

/* Prev/next arrows -- flexslider's own directionNav feature (enabled via
   inc/woocommerce-hooks.php's woocommerce_single_product_carousel_options
   filter; off by default in WC core, which ships no styling for it at all)
   appends this markup directly inside .woocommerce-product-gallery__wrapper
   above, hence the position:relative added there. Deliberately a bare
   chevron, no button/circle chrome around it -- tried that first and it
   looked heavy sitting on top of a product photo. */
.flex-direction-nav { margin: 0; padding: 0; list-style: none; }
.flex-direction-nav li { margin: 0; }
.flex-direction-nav a {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  z-index: 2;
  /* flexslider's link text ("Previous"/"Next") is kept for screen readers
     but visually replaced by the chevron pseudo-element below. */
  font-size: 0; line-height: 0; color: transparent; overflow: hidden;
}
.flex-direction-nav a::before {
  content: ""; display: block; width: 0.7rem; height: 0.7rem;
  border-right: 3px solid var(--bb-black); border-top: 3px solid var(--bb-black);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
  transition: border-color 0.15s ease;
}
.flex-direction-nav .flex-nav-prev a { left: 0.5rem; }
.flex-direction-nav .flex-nav-prev a::before { transform: rotate(-135deg); }
.flex-direction-nav .flex-nav-next a { right: 0.5rem; }
.flex-direction-nav .flex-nav-next a::before { transform: rotate(45deg); }
.flex-direction-nav a:hover::before { border-color: var(--bb-red); }
.flex-direction-nav a.flex-disabled { opacity: 0; pointer-events: none; }

/* Thumbnail strip: a single non-wrapping row of small tiles rather than the
   previous 4-per-line wrap, which on a 10+ image gallery pushed several rows
   of thumbnails down the page. overflow is deliberately hidden, not
   scrollable by drag/wheel -- the only way to reach a thumbnail past the
   first screenful is to cycle to it (via these thumbnails or the
   .flex-direction-nav arrows above), at which point
   assets/js/product-gallery-thumbs.js scrolls it into view.
   flexslider generates this strip itself at runtime (no static markup to
   hook a separate divider element onto), so the stylized divider above it
   is a pseudo-element on the strip's own top edge instead: a plain rule
   would read too close to the wrapper's border above it, so a short red
   center tick (this theme's recurring accent color -- add-to-cart buttons,
   sale badges) marks it as a deliberate break rather than a stray line. */
.flex-control-thumbs {
  position: relative; display: flex; flex-wrap: nowrap; overflow: hidden; gap: 0.4rem;
  margin-top: 0.85rem; padding-top: 0.85rem;
  scroll-behavior: smooth;
}
.flex-control-thumbs::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--bb-border-light);
}
.flex-control-thumbs::after {
  content: ""; position: absolute; top: -1.5px; left: 50%; transform: translateX(-50%);
  width: 2.5rem; height: 4px; background: var(--bb-red); border-radius: 2px;
}
.flex-control-thumbs li { width: 3.75rem; flex: 0 0 3.75rem; float: none; }
.flex-control-thumbs li img {
  width: 100%; height: 3.75rem; object-fit: cover;
  border: 2px solid transparent; border-radius: var(--bb-radius);
  transition: border-color 0.15s ease, opacity 0.15s ease;
}
.flex-control-thumbs li img:hover,
.flex-control-thumbs li img.flex-active { border-color: var(--bb-black); }

/* ---------- Breadcrumbs ---------- */
/* Called directly from archive-product.php / single-product.php (see
   inc/woocommerce-hooks.php) rather than a hook this theme never fires. */
/* WooCommerce's own core CSS sets both of these with a more specific
   selector (".woocommerce:where(...) .woocommerce-breadcrumb[ a]", two
   classes) at a flat #767676, which otherwise silently wins over a plain
   ".woocommerce-breadcrumb" rule regardless of source order and reintroduces
   the sub-4.5:1 contrast fixed above. Matching that specificity via the
   #main wrapper's own class (loaded after WooCommerce's stylesheet, so ties
   resolve in the theme's favor) is what actually makes the override apply. */
.woocommerce-breadcrumb,
.bb-site-main .woocommerce-breadcrumb {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: var(--bb-tracking);
  color: var(--bb-gray-light); margin: 0 0 1.25rem;
}
/* text-decoration, not just color, distinguishes the link from the plain
   "/ Category" text around it -- a color-only difference this close in
   value (WCAG 1.4.1) isn't enough on its own. */
.woocommerce-breadcrumb a,
.bb-site-main .woocommerce-breadcrumb a { color: var(--bb-gray); text-decoration: underline; }
.woocommerce-breadcrumb a:hover,
.bb-site-main .woocommerce-breadcrumb a:hover { color: var(--bb-black); }

/* ---------- Product Tabs (Description / Reviews) ---------- */
/* Default WC tabs are rounded "speech bubble" notches (pseudo-element
   box-shadow tricks) in a lavender fill -- flattened to the same
   bordered-uppercase language as .bb-product-section__title. */
.woocommerce-tabs ul.tabs { border-bottom: 1px solid var(--bb-black); padding: 0; margin: 0 0 1.5rem; }
.woocommerce-tabs ul.tabs li {
  border: none; background: transparent; border-radius: 0; margin: 0 1.5rem 0 0; padding: 0 0 0.75rem;
}
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce-tabs ul.tabs li a {
  color: var(--bb-gray); font-weight: 600; padding: 0;
  text-transform: uppercase; letter-spacing: var(--bb-tracking); font-size: 0.78rem;
}
.woocommerce-tabs ul.tabs li a:hover { color: var(--bb-black); }
.woocommerce-tabs ul.tabs li.active { border-bottom: 2px solid var(--bb-black); margin-bottom: -1px; }
.woocommerce-tabs ul.tabs li.active a { color: var(--bb-black); }

/* WC core floats each ul.tabs li left with no wrap handling of its own --
   fine on desktop's wide summary column, but "ADDITIONAL INFORMATION" alone
   is wider than a phone viewport, so the floats wrapped into what looked
   like three stacked full-width blocks instead of a tab bar (no visual tab
   affordance left at all). Same horizontal-scroll-strip treatment as the
   product carousel track: un-float, lay out in one row, let it scroll
   instead of wrap. */
@media (max-width: 899px) {
  /* WC core's own rule is ".woocommerce div.product .woocommerce-tabs
     ul.tabs" (4 classes + 2 types) -- out-specifies the 2-class selector
     this rule started with regardless of load order, so its own
     "overflow:hidden" silently won and made the third tab (and any tab
     scrolled out of view) invisible instead of swipeable. Matching the
     same selector, same fix as a.checkout-button.button.alt elsewhere in
     this file. */
  .woocommerce div.product .woocommerce-tabs ul.tabs,
  .woocommerce-tabs ul.tabs {
    display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }
  .woocommerce-tabs ul.tabs li {
    float: none; flex: 0 0 auto; white-space: nowrap; margin: 0 1.25rem 0 0;
  }
}

/* Description-tab body content. Sub-section headings inside the description
   itself (Specifications, Package Includes, Warning, ...) are <h3> -- one
   level under the tab's own "Description" <h2> -- and .bb-spec-list is the
   compare-table-style spec sheet (scripts/crawl_brushbeater.py rebuilds it
   as a real <dl>) rendered as a two-column label/value table instead of a
   run of plain text. */
.woocommerce-Tabs-panel--description h3 {
  font-size: 0.95rem; text-transform: uppercase; letter-spacing: var(--bb-tracking);
  margin: 2rem 0 0.85rem;
}
.woocommerce-Tabs-panel--description p,
.woocommerce-Tabs-panel--description ul,
.woocommerce-Tabs-panel--description ol { margin: 0 0 1rem; max-width: 68ch; }
.woocommerce-Tabs-panel--description ul,
.woocommerce-Tabs-panel--description ol { padding-left: 1.25rem; }
.woocommerce-Tabs-panel--description li { margin-bottom: 0.4rem; }
.bb-spec-list {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  max-width: 44rem; margin: 0 0 1rem; border-top: 1px solid var(--bb-border-light);
}
.bb-spec-list dt, .bb-spec-list dd {
  margin: 0; padding: 0.55rem 1rem 0.55rem 0; border-bottom: 1px solid var(--bb-border-light);
  font-size: 0.9rem;
}
.bb-spec-list dt { color: var(--bb-gray); font-weight: 600; }
.bb-spec-list dd { color: var(--bb-black); padding-left: 1rem; }

/* Reviews-tab body content. This is stock WooCommerce/WordPress comment
   markup (#reviews/#comments/.commentlist come from the theme's native
   comments_template() call, not a theme override) -- previously unstyled,
   so it rendered in the WC/browser default look while every other tab on
   the page had been redesigned. Matches the bordered, uppercase-label
   language used elsewhere on this page (.woocommerce-tabs, .bb-spec-list)
   instead of introducing a new visual style just for this tab. */
#reviews .woocommerce-Reviews-title,
#reviews #reply-title {
  font-size: 0.95rem; text-transform: uppercase; letter-spacing: var(--bb-tracking);
  margin: 0 0 1.25rem; font-weight: 700;
}
#reviews .commentlist { list-style: none; margin: 0 0 2rem; padding: 0; }
#reviews .comment {
  display: flex; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--bb-border-light);
}
#reviews .comment:first-child { border-top: 1px solid var(--bb-border-light); }
#reviews .comment_container .avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
}
#reviews .comment-text { flex: 1; min-width: 0; }
#reviews .comment-text .star-rating { margin: 0 0 0.4rem; }
#reviews .comment-text .meta {
  display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: var(--bb-tracking);
  color: var(--bb-gray); margin: 0 0 0.5rem;
}
#reviews .comment-text .meta strong { color: var(--bb-black); font-weight: 600; }
#reviews .comment-text .description p { margin: 0; max-width: 60ch; }
#reviews .woocommerce-verified {
  display: inline-block; margin-left: 0.4rem; font-size: 0.72rem; color: var(--bb-red);
  text-transform: uppercase; letter-spacing: var(--bb-tracking); font-weight: 600;
}
#reviews .star-rating { color: var(--bb-red); }
#reviews .star-rating::before { color: var(--bb-border-light); }
#reviews .woocommerce-noreviews { color: var(--bb-gray); margin: 0 0 1.5rem; }

/* #review_form: the "leave a review" form, gated behind
   woocommerce_review_before_comment_form/wp_list_comments -- same bordered
   input language as the rest of the theme's forms (checkout, contact). */
#review_form-wrapper { max-width: 40rem; }
#review_form .comment-form-rating { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
#review_form .comment-form-rating label {
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: var(--bb-tracking); font-weight: 600;
}
#review_form .comment-form-rating select { display: none; }
#review_form p.comment-form-author,
#review_form p.comment-form-email,
#review_form p.comment-form-comment { margin: 0 0 1rem; }
#review_form label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem; }
#review_form input[type="text"],
#review_form input[type="email"],
#review_form textarea {
  width: 100%; border: 1px solid var(--bb-border-light); background: var(--bb-white);
  color: var(--bb-black); padding: 0.65rem 0.85rem; font: inherit; border-radius: 0;
}
#review_form input[type="text"]:focus,
#review_form input[type="email"]:focus,
#review_form textarea:focus { outline: 2px solid var(--bb-black); outline-offset: 1px; }
#review_form .form-submit input#submit {
  background: var(--bb-black); color: var(--bb-white); border: 1px solid var(--bb-black);
  padding: 0.75rem 1.75rem; text-transform: uppercase; letter-spacing: var(--bb-tracking);
  font-weight: 600; font-size: 0.85rem; cursor: pointer;
}
#review_form .form-submit input#submit:hover { background: var(--bb-red); border-color: var(--bb-red); }
@media (max-width: 599px) {
  .bb-spec-list { grid-template-columns: 1fr; }
  .bb-spec-list dt { border-bottom: none; padding-bottom: 0.15rem; }
  .bb-spec-list dd { padding-left: 0; }
}

/* ---------- Related Products / Upsells / Recently Viewed ---------- */
.related.products > h2,
.upsells.products > h2,
.bb-recently-viewed > h2 {
  font-size: 1.1rem; text-transform: uppercase; letter-spacing: var(--bb-tracking);
  border-bottom: 1px solid var(--bb-black); padding-bottom: 1rem; margin: 0 0 2rem;
}
.bb-recently-viewed { margin-top: 3rem; }

/* ---------- 404 ---------- */
.bb-404 { padding: 4rem 0 6rem; }
.bb-404 h1 { margin-bottom: 0.75rem; }
.bb-404 p { color: var(--bb-gray); margin-bottom: 1.5rem; max-width: 640px; }
/* searchform.php's no-JS fallback form reuses the .bb-search class but has
   no __input/__submit modifier classes on its bare input/button, and the
   header's own .bb-search__input styling is dark-background-only anyway --
   style the raw elements directly for this light-background context. */
.bb-404 .bb-search--fallback { display: flex; gap: 0.6rem; max-width: 420px; }
.bb-404 .bb-search--fallback input[type="search"] {
  flex: 1 1 auto; min-width: 0; padding: 0.65em 1em;
  border: 1px solid var(--bb-border-light); border-radius: var(--bb-radius);
  font-size: 0.9rem; font-family: inherit;
}
.bb-404 .bb-search--fallback input[type="search"]:focus { border-color: var(--bb-black); }
.bb-404 .bb-search--fallback input[type="search"]:focus-visible { outline: 2px solid var(--bb-black); outline-offset: 1px; }
.bb-404 .bb-search--fallback button[type="submit"] {
  padding: 0.65em 1.5em; font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--bb-tracking);
  background: var(--bb-black); color: var(--bb-white); border: none; border-radius: var(--bb-radius); cursor: pointer;
}
.bb-404 .bb-search--fallback button[type="submit"]:hover { background: var(--bb-red); }

/* ---------- Multi-Wishlist Page ---------- */
.bb-wishlists-page { max-width: 1200px; }
.bb-wishlists-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 2rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--bb-border-light);
}
.bb-wishlists-empty {
  text-align: center; padding: 4rem 2rem;
  background: var(--bb-off-white); border-radius: var(--bb-radius);
}
.bb-wishlists-container { display: flex; flex-direction: column; gap: 2rem; }
.bb-wishlist-card {
  border: 1px solid var(--bb-border-light); border-radius: var(--bb-radius);
  background: var(--bb-white);
}
.bb-wishlist-card--default {
  border-color: var(--bb-black);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.bb-wishlist-card--default .bb-wishlist-card__header {
  background: var(--bb-off-white);
}
.bb-wishlist-card__header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.5rem; border-bottom: 1px solid var(--bb-border-light);
}
.bb-wishlist-card__title {
  margin: 0; font-size: 1.25rem; font-weight: 600;
  display: flex; align-items: center; gap: 0.5rem;
}
.bb-wishlist-count {
  font-size: 0.875rem; font-weight: 400; color: var(--bb-gray);
}
.bb-wishlist-card__actions {
  display: flex; gap: 0.75rem;
}
.bb-wishlist-rename, .bb-wishlist-delete {
  background: transparent; border: none; cursor: pointer;
  padding: 0.5rem; color: var(--bb-gray); transition: color 0.2s ease;
}
.bb-wishlist-rename:hover { color: var(--bb-black); }
.bb-wishlist-delete:hover { color: var(--bb-red); }
.bb-wishlist-card__empty {
  padding: 3rem 2rem; text-align: center; color: var(--bb-gray);
}
.bb-wishlist-items { display: flex; flex-direction: column; }
.bb-wishlist-item {
  display: flex; gap: 1.5rem; padding: 1.5rem;
  border-bottom: 1px solid var(--bb-border-light);
  transition: background 0.2s ease;
}
.bb-wishlist-item:hover { background: var(--bb-off-white); }
.bb-wishlist-item:last-child { border-bottom: none; }
.bb-wishlist-item__image {
  flex-shrink: 0; width: 100px; height: 100px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bb-white); border: 1px solid var(--bb-border-light);
  border-radius: var(--bb-radius);
}
.bb-wishlist-item__image img {
  max-width: 100%; max-height: 100%; object-fit: contain;
}
.bb-wishlist-item__details { flex: 1; min-width: 0; }
.bb-wishlist-item__title {
  margin: 0 0 0.5rem; font-size: 1rem; font-weight: 600;
}
.bb-wishlist-item__title a {
  color: var(--bb-black); text-decoration: none;
}
.bb-wishlist-item__title a:hover { color: var(--bb-red); }
.bb-wishlist-item__meta {
  font-size: 0.875rem; color: var(--bb-gray); margin-bottom: 0.5rem;
}
.bb-wishlist-item__price {
  font-size: 1rem; font-weight: 600; color: var(--bb-black);
  margin-bottom: 0.5rem;
}
.bb-wishlist-item__stock-notice {
  font-size: 0.875rem; color: var(--bb-red); font-weight: 600;
}
.bb-wishlist-item__actions {
  display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-end;
}
.bb-wishlist-item-remove {
  background: transparent; border: none; cursor: pointer;
  padding: 0.5rem; color: var(--bb-gray); transition: color 0.2s ease;
}
.bb-wishlist-item-remove:hover { color: var(--bb-red); }
.bb-wishlist-card__footer {
  padding: 1.5rem; border-top: 1px solid var(--bb-border-light);
  background: var(--bb-off-white);
}
.bb-add-all-to-cart {
  width: 100%;
}

/* Modal Styles */
.bb-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
}
.bb-modal__overlay {
  position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6);
}
.bb-modal__content {
  position: relative; z-index: 1; background: var(--bb-white);
  border-radius: var(--bb-radius); max-width: 500px; width: 90%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.bb-modal__header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.5rem; border-bottom: 1px solid var(--bb-border-light);
}
.bb-modal__title {
  margin: 0; font-size: 1.25rem; font-weight: 600;
}
.bb-modal__close {
  background: transparent; border: none; font-size: 2rem;
  line-height: 1; cursor: pointer; color: var(--bb-gray);
  padding: 0; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
}
.bb-modal__close:hover { color: var(--bb-black); }
.bb-modal__body {
  padding: 1.5rem;
}
.bb-modal__actions {
  display: flex; gap: 1rem; justify-content: flex-end; margin-top: 1.5rem;
}
.bb-form-group {
  margin-bottom: 1rem;
}
.bb-form-group label {
  display: block; margin-bottom: 0.5rem; font-weight: 600;
  font-size: 0.875rem; text-transform: uppercase;
  letter-spacing: var(--bb-tracking);
}
.bb-form-input {
  width: 100%; padding: 0.75rem 1rem;
  border: 1px solid var(--bb-border-light);
  border-radius: var(--bb-radius);
  font-family: inherit; font-size: 1rem;
}
.bb-form-input:focus-visible {
  outline: 2px solid var(--bb-black); outline-offset: 1px;
}
.bb-form-input:focus {
  border-color: var(--bb-black);
}

/* Button Styles */
.bb-btn {
  display: inline-block; padding: 0.75rem 1.5rem;
  font-size: 0.875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--bb-tracking);
  border: none; border-radius: var(--bb-radius);
  cursor: pointer; transition: all 0.2s ease;
  text-decoration: none; text-align: center;
}
.bb-btn--primary {
  background: var(--bb-black); color: var(--bb-white);
}
.bb-btn--primary:hover {
  background: var(--bb-red);
}
.bb-btn--secondary {
  background: var(--bb-white); color: var(--bb-black);
  border: 1px solid var(--bb-black);
}
.bb-btn--secondary:hover {
  background: var(--bb-black); color: var(--bb-white);
}
.bb-btn:disabled {
  opacity: 0.5; cursor: not-allowed;
}

/* ---------- Cookie Consent ---------- */
.bb-cookie-consent {
  position: fixed; left: 1.25rem; right: 1.25rem; bottom: 1.25rem; z-index: 999;
  max-width: 560px; margin: 0 auto;
  background: var(--bb-black); color: var(--bb-white);
  border: 1px solid var(--bb-border);
  padding: 1.25rem 1.5rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.bb-cookie-consent p { margin: 0; flex: 1 1 260px; font-size: 0.9rem; line-height: 1.5; }
.bb-cookie-consent__actions { display: flex; gap: 0.75rem; flex-shrink: 0; }
.bb-cookie-consent__decline {
  background: transparent; color: var(--bb-white); border: 1px solid var(--bb-white);
  padding: 0.65rem 1.25rem; font-size: 0.8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--bb-tracking); cursor: pointer;
}
.bb-cookie-consent__decline:hover { background: rgba(255, 255, 255, 0.1); }
.bb-cookie-consent__accept.bb-btn { padding: 0.65rem 1.25rem; font-size: 0.8rem; }
@media (max-width: 599px) {
  .bb-cookie-consent { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; padding: 1rem; }
}

/* ---------- Mobile ---------- */
@media (max-width: 1279px) {
  .woocommerce ul.products { grid-template-columns: repeat(4, 1fr); }
  /* 4 visible per carousel page instead of 5. */
  .bb-product-grid.bb-carousel__track > li { flex-basis: calc((100% - 3 * 1.5rem) / 4); }
}
@media (max-width: 899px) {
  /* The nav row (mega-menu) is hidden until the hamburger toggles
     body.bb-mobile-nav-open -- previously this always rendered open,
     burying every page's content under the full category list before a
     visitor could see anything. Lives inside .bb-header__icons now (moved
     there in header.php) so it's part of the same right-aligned toolbar as
     search/account/cart instead of sitting alone on the opposite edge from
     them -- that 1-icon-left/3-icons-right split, with the logo stranded
     in the gap between, was the "not proportional" mobile header layout.
     No order/margin override needed anymore: it's simply the first child
     in that flex group now, and .bb-header__icons' own margin-left:auto
     pushes the whole cluster to the right edge as one unit. */
  .bb-header__mobile-toggle { display: inline-flex; margin-left: 0; }
  .bb-header__nav { display: none; max-height: calc(100vh - var(--bb-header-height)); overflow-y: auto; }
  body.bb-mobile-nav-open .bb-header__nav { display: block; }
  .bb-header__nav-extra { display: block; }

  /* ---------- Minimal mobile header ----------
     Strips the mobile header down to logo + four icon-sized actions
     (search, nav, cart, account) -- the showroom/phone bar, the text nav
     links, and a permanently-open search input are all either redundant
     (already in the footer) or relocated into the nav drawer above, rather
     than dropped. */
  .bb-header__top { display: none; }
  .bb-header__info-links { display: none; }
  .bb-header__search-toggle { display: inline-flex; }

  /* Every icon in the mobile toolbar becomes a matching 44x44 tap target,
     not just the two that were already buttons (hamburger/search) -- the
     account/cart links were bare SVGs with no box of their own, so even
     with align-items:center fixing their vertical position (see the base
     .bb-header__icons rule above), the gap between a 44px box's edge and a
     22px bare icon's edge still read as visually uneven. Uniform boxes
     make both the spacing and the centering consistent, and are a better
     touch target size besides. */
  .bb-header__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
  }
  /* Two-class selector so this reliably wins over the single-class
     .bb-header__icon display:inline-flex rule above regardless of source
     order -- a same-specificity, later-wins version of this rule
     previously got silently overridden when .bb-header__icon was added
     after it, un-hiding the wishlist icon on mobile again. */
  .bb-header__icons .bb-header__wishlist-icon { display: none; }
  /* .bb-header__cart-count's top/-right offsets are tuned against the
     22x22 cart icon's own tight bounding box (still true on desktop) --
     inside the new 44x44 mobile tap target that icon sits centered with
     11px of padding on every side, so the same offsets would land the
     badge 11px further out than intended, floating away from the glyph
     instead of sitting on its corner. Re-anchored to the icon's actual
     position within the bigger box instead. */
  .bb-header__cart-count { top: 5px; right: 1px; }

  .bb-header__main-inner {
    position: relative;
    padding-block: 0.65rem;
    min-height: 52px;
    transition: padding-block 0.2s ease, min-height 0.2s ease;
  }
  .bb-header__logo {
    transition: opacity 0.2s ease, max-width 0.2s ease, margin 0.2s ease;
    overflow: hidden;
  }

  /* The search form becomes a collapsed-by-default dropdown anchored under
     the header, opened via .bb-header__search-toggle (assets/js/
     header-search-toggle.js) instead of sitting inline and always expanded. */
  .bb-search {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    max-width: none; flex: none;
    background: var(--bb-near-black);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bb-border);
    z-index: 1050;
  }
  .bb-search.is-open { display: flex; animation: bb-fade-in 0.15s ease; }

  /* Scroll-condensed state (assets/js/header-scroll.js adds .is-condensed
     past a larger scroll threshold than .is-scrolled) -- drops the logo and
     shrinks the row further, leaving just the hamburger + icon strip, the
     same "contemporary" shrinking-header pattern used by most mobile
     storefronts so the page content gets more room once a visitor is
     actively browsing rather than just arriving. */
  /* Previously hid the logo entirely (opacity:0, max-width:0, pointer-
     events:none) once condensed -- since it's also the only way back to the
     homepage, that left a scrolled-down mobile visitor with no home link
     until they scrolled all the way back up. Keep it visible; the header
     still gets shorter via .bb-header__main-inner below. */
  .bb-header.is-condensed .bb-header__main-inner {
    padding-block: 0.4rem; min-height: 44px;
  }

  .bb-mega-menu__level1 { flex-direction: column; }
  /* Mobile is a real accordion, not the desktop hover/fade dropdown --
     assets/js/mega-menu.js already toggles .is-open per item on tap (with
     closeAll() ensuring only one is ever open), so this just needs to keep
     the panel collapsed (display:none) until that class is present, reusing
     the same .is-open selector the desktop hover rule uses above. Previously
     this forced every panel permanently visible regardless of .is-open,
     which buried all page content under every category's full flyout on
     every load. */
  .bb-mega-menu__panel {
    position: static; display: none; box-shadow: none; border: none; min-width: 0;
    /* The base rule's width:max-content + min-width:640px is sized for the
       desktop flyout -- left un-reset here, the accordion panel kept trying
       to lay out at desktop width on a phone-width parent, pushing its
       3-column grid off both edges of the screen instead of stacking within
       it. */
    width: 100%; max-width: 100%;
    padding: 0.5rem 0 0.75rem 1rem;
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  }
  /* The base (non-media-query) .is-open rule below carries higher selector
     specificity than the plain .bb-mega-menu__panel reset above (three
     classes vs. one), so it keeps winning the cascade at any screen size --
     its desktop translateX(-50%) centering hack was shoving this
     now-position:static panel almost entirely off the left edge of the
     screen instead of sitting flush in the accordion. Needs its own,
     equally-specific override here rather than relying on source order. */
  .bb-mega-menu__item--l1.is-open .bb-mega-menu__panel { display: block; transform: none; }
  /* Same reason: the desktop 3-column grid (RIFLES / SHOTGUNS / ... side by
     side) doesn't fit a phone-width accordion panel -- stack level2 groups
     vertically instead. */
  .bb-mega-menu__level2 { grid-template-columns: 1fr; gap: 1rem; }
  .bb-mega-menu__item--l1.has-children > a::after,
  .bb-mega-menu__item--l1.has-children > .bb-mega-menu__label::after {
    display: inline-block; transition: transform 0.15s ease;
  }
  .bb-mega-menu__item--l1.is-open.has-children > a::after,
  .bb-mega-menu__item--l1.is-open.has-children > .bb-mega-menu__label::after {
    transform: rotate(180deg);
  }
  .bb-category-band__grid { grid-template-columns: repeat(3, 1fr); }
  .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); }
  /* Plain (non-carousel) product grid -- used by the single Wishlist page
     (page-wishlist.php) -- was hard-locked to repeat(4, 1fr) at every
     viewport width with no override anywhere, unlike every other product
     grid on the site. Same 3-tier step-down as .woocommerce ul.products
     above, just starting from 4 instead of 5 since that's this grid's own
     desktop column count. */
  .bb-product-grid:not(.bb-carousel__track) { grid-template-columns: repeat(3, 1fr); }
  .bb-footer__grid { grid-template-columns: repeat(2, 1fr); }

  /* ---------- Promo row: 2-column tablet ----------
     Always exactly 4 tiles (template-parts/home/promo-row.php slices to 4),
     so the general 3-column tablet grid never fit it well (left an orphaned
     4th tile on its own row). 2 columns keeps the full description text --
     there's still enough width at this size -- and turns into the tighter
     square-card treatment only below 599px, where a tablet-sized square
     would otherwise balloon into an oversized, mostly-empty box. */
  .bb-promo-row__grid { grid-template-columns: repeat(2, 1fr); }
  /* 3 visible per carousel page. */
  .bb-product-grid.bb-carousel__track > li { flex-basis: calc((100% - 2 * 1.5rem) / 3); }

  /* ---------- Mobile hero: same full-bleed overlay treatment as desktop ----------
     A previous version rendered the banner at its native ~3:1 aspect ratio
     as a plain band with a solid text panel stacked below it, to avoid
     over-cropping the source image -- but that left the image a thin ~130px
     strip dwarfed by the text panel underneath. Reverted to the desktop
     approach instead (absolute-positioned, object-fit:cover, text overlaid
     directly on the photo with the gradient scrim for legibility): mainly
     just a shorter fixed height than desktop's 60vh so the hero doesn't eat
     the whole first screen on a phone. Everything else below is inherited,
     unchanged, from the non-media-query rules above -- only what actually
     needs to differ at this width is overridden here. */
  .bb-hero { height: 52vh; min-height: 320px; }
  .bb-hero__content h1, .bb-hero__content h2 { font-size: 2rem; }
  /* The corner-bracket reticle reads as a fussy detail at this size, and
     prev/next arrows compete with real tap targets on a narrow screen --
     autoplay + dots remain as mobile's carousel controls, matching the
     swipe-first convention most mobile users already expect. */
  .bb-hero__reticle { display: none; }
  .bb-hero__nav { display: none; }
}

/* ---------- Very narrow phones (<=374px, e.g. iPhone SE 1st-gen/older
   budget Android) ----------
   The mobile header toolbar is 5 real 44px tap targets (theme toggle,
   hamburger, search, account, cart) plus the gap between the logo and that
   group -- 220px of icons alone, before any gap or the logo. At the default
   1.25rem icon gap + 1.5rem logo/icon-group gap, the row measured 20px+
   wider than a 320px viewport (verified via document.documentElement.
   scrollWidth), pushing the cart icon partially off-screen -- a real
   "losing part of the page" bug on the smallest common phones, not just a
   tight fit. Tightening the gaps (not the 44px targets themselves, which
   are sized to the WCAG 2.5.8 minimum used everywhere else in this file)
   recovers enough width without shrinking anything tappable. */
@media (max-width: 374px) {
  .bb-header__main-inner { gap: 0.5rem; }
  .bb-header__icons { gap: 0.35rem; }
}

@media (max-width: 599px) {
  .bb-category-band__grid { grid-template-columns: repeat(2, 1fr); }
  .bb-footer__grid { grid-template-columns: 1fr; }
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
  .bb-product-grid:not(.bb-carousel__track) { grid-template-columns: repeat(2, 1fr); }
  .bb-hero__content h1, .bb-hero__content h2 { font-size: 1.6rem; }

  /* ---------- Promo row: 2x2 square grid ----------
     Phone-width only -- at tablet widths a forced-square tile has enough
     column width to balloon into a huge, mostly-empty box (see the 899px
     rule above, which just keeps 2 columns without forcing a square). Here
     there's little enough width that a compact square card is both a
     natural fit for this always-4-tiles set and meaningfully shorter than
     the single stacked column this used below 599px before -- four
     substantial content blocks in a row used to mean a long scroll of
     screen space before anything else on the page was reachable. */
  .bb-promo-row { padding: 2.5rem 0; }
  .bb-promo-row__grid { gap: 0.75rem; }
  .bb-promo-row__tile {
    /* min-width:0 -- same CSS Grid implicit-minimum-size floor as
       .bb-footer__col elsewhere in this file: without it, a tile whose
       heading/link text can't shrink below its own min-content width
       forced its whole 1fr column wider than the 2-column grid's actual
       available space, overflowing the page horizontally at narrow phone
       widths (verified via document.documentElement.scrollWidth at a
       320px viewport). */
    min-width: 0;
    aspect-ratio: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    border: 1px solid var(--bb-border-light);
    padding: 1rem;
  }
  .bb-promo-row__index { display: none; }
  .bb-promo-row__icon { margin: 0 0 0.6rem; }
  .bb-promo-row__icon svg { width: 22px; height: 22px; }
  .bb-promo-row__tile h3 { font-size: 0.72rem; margin: 0 0 0.5rem; }
  /* The longer description paragraph is what made a full-content tile too
     tall to read as "square" -- dropped here, not truncated, since the
     heading + link already say where the tile goes and the fuller copy is
     one tap away on the linked page. */
  .bb-promo-row__tile p { display: none; }
  .bb-promo-row__link { font-size: 0.68rem; }

  /* 2 visible per carousel page. */
  .bb-product-grid.bb-carousel__track > li { flex-basis: calc((100% - 1.5rem) / 2); }

  /* ---------- Wishlists Manager (page-wishlists.php) ----------
     Had zero responsive coverage anywhere: .bb-wishlist-item is a 3-child
     flex row (100px image, flexible details, a right-aligned actions column
     holding a real text "Add to Cart" button) sized for desktop's spare
     width. At phone width that left ~100-150px total for title/price/meta
     after the fixed image and the button column ate the rest -- title text
     wrapped to near-nothing. Wrapping the row and forcing actions onto its
     own full-width second line (image+details keep sharing the first line)
     fixes it without restructuring the markup. */
  .bb-wishlist-item { flex-wrap: wrap; gap: 0.75rem; padding: 1rem; }
  .bb-wishlist-item__image { width: 64px; height: 64px; }
  .bb-wishlist-item__actions {
    flex-direction: row; align-items: center; justify-content: flex-end;
    flex-basis: 100%; order: 3; gap: 0.75rem;
  }
  .bb-add-to-cart-single { flex: 1; }
  .bb-wishlist-card__header { padding: 1rem; }
  .bb-wishlist-card__footer { padding: 1rem; }
  /* "My Wishlists" + "+ Create New Wishlist" side by side was tight enough
     at phone width to wrap mid-button-label; stacking reads cleaner than a
     cramped two-up row. */
  .bb-wishlists-header { flex-direction: column; align-items: stretch; gap: 1rem; }
}

/* ---------- Testimonials (homepage review carousel) ----------
   Dark chrome band (same --bb-chrome-* tokens as the header/footer, not the
   flipping --bb-black/off-white) so it reads as one continuous dark zone
   running into .bb-footer directly below it, rather than a seam between two
   different section treatments. */
.bb-testimonials { background: var(--bb-chrome-bg); color: var(--bb-chrome-ink); padding: 5rem 0; }
.bb-testimonials__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.bb-testimonials__eyebrow {
  display: block; color: var(--bb-red); font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--bb-tracking-wide); margin-bottom: 0.5rem;
}
.bb-testimonials__title { margin: 0 0 3rem; text-transform: uppercase; letter-spacing: var(--bb-tracking); }
.bb-testimonials__stage { position: relative; width: 100%; max-width: 760px; min-height: 220px; }
.bb-testimonials__slide {
  position: absolute; inset: 0; margin: 0;
  display: flex; flex-direction: column; align-items: center;
  opacity: 0; pointer-events: none; transition: opacity 0.5s ease;
}
.bb-testimonials__slide.is-active { position: relative; opacity: 1; pointer-events: auto; }
.bb-testimonials__stars { color: var(--bb-red); font-size: 1.1rem; letter-spacing: 0.2em; margin-bottom: 1.25rem; }
.bb-testimonials__quote { margin: 0; }
.bb-testimonials__quote p {
  font-family: var(--bb-font-heading); font-size: 1.15rem; line-height: 1.6;
  color: var(--bb-chrome-ink);
}
.bb-testimonials__author {
  margin-top: 1.25rem; font-size: 0.8rem; font-weight: 600; color: var(--bb-gray-light);
  text-transform: uppercase; letter-spacing: var(--bb-tracking);
}
.bb-testimonials__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: transparent; border: none; color: var(--bb-chrome-ink);
  opacity: 0.5; font-size: 2rem; width: 40px; height: 40px; cursor: pointer;
}
.bb-testimonials__nav:hover { opacity: 1; }
.bb-testimonials__nav--prev { left: -2.5rem; }
.bb-testimonials__nav--next { right: -2.5rem; }
.bb-testimonials__dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 2rem; }
/* Hit target is 24x24 (WCAG 2.5.8 minimum) even though the visible dot stays
   a slim 8px, matching the same pattern used for .bb-hero__dot above. */
.bb-testimonials__dot {
  width: 24px; height: 24px; padding: 0; border: none; background: transparent;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.bb-testimonials__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.3); }
.bb-testimonials__dot.is-active::after { background: var(--bb-red); }

@media (max-width: 899px) {
  .bb-testimonials { padding: 3.5rem 0; }
  .bb-testimonials__title { margin-bottom: 2rem; }
  /* No room outside a narrower stage for off-canvas arrows -- dots (already
     present) remain the mobile carousel control, same convention as the
     hero at this width. */
  .bb-testimonials__nav { display: none; }
}
@media (max-width: 599px) {
  .bb-testimonials__quote p { font-size: 1rem; }
}

.bb-contact-page__info p { margin: 0 0 1.1rem; color: var(--bb-gray); }
.bb-contact-page__info h3 { margin: 0 0 0.5rem; }
.bb-contact-page__info a { color: var(--bb-black); text-decoration: underline; }
.bb-contact-page__info a:hover { color: var(--bb-red); }
.bb-contact-form .wpcf7-form-control-wrap { display: block; }
.bb-contact-form input[type="submit"] {
  width: auto; display: inline-block; padding: 0.85em 1.75em;
  background: var(--bb-red); color: #fff; border: none; border-radius: var(--bb-radius);
  font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: var(--bb-tracking);
  cursor: pointer; transition: background-color 0.15s ease;
}
.bb-contact-form input[type="submit"]:hover { background: var(--bb-black); }
.bb-contact-page__map { margin-top: 3rem; }
.bb-contact-page__map iframe {
  width: 100%; height: 420px; border: 1px solid var(--bb-border-light); display: block;
}