/* ==========================================================================
   Better Performance Gear - brand layer
   Bootstrap-first: brand tokens are bound to Bootstrap's own --bs-* variables
   so .btn / .navbar / .offcanvas / .accordion / .form-control inherit the
   brand with no per-component overrides. Bespoke CSS below is limited to
   things Bootstrap has no primitive for.
   v1.0.0
   ========================================================================== */

/* ---------- 1. TOKENS -> BOOTSTRAP VARIABLES ---------- */
:root,
[data-bs-theme="dark"] {
  /* raw brand palette */
  --bpg-black: #0A0B0D;
  --bpg-charcoal: #16181D;
  --bpg-graphite: #23262E;
  --bpg-steel: #3A3F4A;
  --bpg-chalk: #F5F6F8;
  --bpg-ash: #9AA0AB;
  --bpg-smoke: #5E6470;
  --bpg-ignition: #FF4D1C;
  --bpg-ember: #FF7A4D;
  --bpg-ok: #3DD68C;

  --bpg-overlay: linear-gradient(180deg, rgba(10,11,13,0) 0%, rgba(10,11,13,.55) 55%, rgba(10,11,13,.92) 100%);
  --bpg-track-mono: .12em;
  --bpg-ease: cubic-bezier(.2,.7,.2,1);
  --bpg-ease-out: cubic-bezier(.16,1,.3,1);

  /* type scale (fluid) */
  --bpg-fs-hero: clamp(3rem, 8vw, 7rem);
  --bpg-fs-1: clamp(2.25rem, 5vw, 4rem);
  --bpg-fs-2: clamp(1.75rem, 3.5vw, 2.75rem);
  --bpg-fs-3: clamp(1.25rem, 2vw, 1.75rem);

  /* --- Bootstrap core --- */
  --bs-body-bg: var(--bpg-black);
  --bs-body-bg-rgb: 10, 11, 13;
  --bs-body-color: var(--bpg-chalk);
  --bs-body-color-rgb: 245, 246, 248;
  --bs-emphasis-color: var(--bpg-chalk);
  --bs-secondary-color: var(--bpg-ash);
  --bs-secondary-bg: var(--bpg-charcoal);
  --bs-tertiary-bg: var(--bpg-graphite);
  --bs-tertiary-color: var(--bpg-smoke);
  --bs-border-color: var(--bpg-steel);
  --bs-border-color-translucent: rgba(255,255,255,.09);
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 4px;

  --bs-primary: var(--bpg-ignition);
  --bs-primary-rgb: 255, 77, 28;
  --bs-primary-text-emphasis: var(--bpg-ember);
  --bs-primary-bg-subtle: rgba(255,77,28,.12);
  --bs-primary-border-subtle: rgba(255,77,28,.4);
  --bs-success: var(--bpg-ok);
  --bs-success-rgb: 61, 214, 140;

  --bs-link-color: var(--bpg-chalk);
  --bs-link-color-rgb: 245, 246, 248;
  --bs-link-hover-color: var(--bpg-ignition);
  --bs-link-hover-color-rgb: 255, 77, 28;

  --bs-body-font-family: "Inter", system-ui, -apple-system, sans-serif;
  --bs-font-monospace: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.6;
  --bs-heading-color: var(--bpg-chalk);
}

/* ---------- 2. BASE ---------- */
html { scroll-behavior: smooth; }
/* clip, not hidden: the closed offcanvas panel sits one viewport to the right and
   would otherwise make every page pannable sideways on mobile. `clip` contains it
   without creating a scroll container, which `hidden` would - that breaks the
   sticky navbar. */
html, body { overflow-x: clip; }
body { -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--bpg-ignition); color: var(--bpg-chalk); }
:focus-visible { outline: 2px solid var(--bpg-ignition); outline-offset: 2px; }

h1, h2, h3, h4, h5, h6, .bpg-display {
  font-family: "Archivo", system-ui, sans-serif;
  letter-spacing: -.02em;
}

/* display sizes - map onto Bootstrap's .display-* so markup stays idiomatic */
.display-1 { font-family: "Archivo", system-ui, sans-serif; font-weight: 900; font-size: var(--bpg-fs-hero); line-height: .92; letter-spacing: -.02em; }
.display-2 { font-family: "Archivo", system-ui, sans-serif; font-weight: 800; font-size: var(--bpg-fs-1); line-height: .95; letter-spacing: -.02em; }
.display-3 { font-family: "Archivo", system-ui, sans-serif; font-weight: 700; font-size: var(--bpg-fs-2); line-height: 1.05; letter-spacing: -.01em; }
.display-4 { font-family: "Archivo", system-ui, sans-serif; font-weight: 600; font-size: var(--bpg-fs-3); line-height: 1.15; letter-spacing: 0; }

.lead { font-size: 1.125rem; color: var(--bpg-ash); max-width: 60ch; }

/* mono eyebrow / label - the single most reused brand primitive */
.bpg-eyebrow {
  display: inline-block;
  font-family: var(--bs-font-monospace);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: var(--bpg-track-mono);
  text-transform: uppercase;
  color: var(--bpg-ash);
  margin: 0;
}
.bpg-eyebrow b { color: var(--bpg-ignition); font-weight: 700; }
/* Breadcrumb trail. WooCommerce/LiveCanvas pages run this markup through
   wpautop, which inserts a <br> after each line and stacks the segments
   vertically (Home / All gear became three lines). Lay the trail out as a
   row and drop the injected breaks so it flows: Home / All gear / ... */
nav[aria-label="Breadcrumb"] { display: flex; flex-wrap: wrap; align-items: center; }
nav[aria-label="Breadcrumb"] br { display: none; }
.bpg-mono { font-family: var(--bs-font-monospace); letter-spacing: var(--bpg-track-mono); text-transform: uppercase; }
.bpg-section { padding: clamp(64px, 10vw, 128px) 0; }
.bpg-tabnum { font-variant-numeric: tabular-nums; }

/* placeholder caption used on every unshot image */
.bpg-ph-cap {
  font-family: var(--bs-font-monospace);
  font-size: .62rem;
  letter-spacing: var(--bpg-track-mono);
  text-transform: uppercase;
  color: var(--bpg-smoke);
  background: rgba(10,11,13,.6);
  border: 1px solid var(--bpg-steel);
  padding: 3px 6px;
}
.bpg-ph-media {
  background: linear-gradient(150deg, #20242c, #0d0e11);
  color: #2a2f3a;
}

/* ---------- 3. BOOTSTRAP COMPONENT TUNING (variables only) ---------- */
.btn {
  --bs-btn-font-family: var(--bs-body-font-family);
  --bs-btn-font-weight: 600;
  --bs-btn-font-size: .875rem;
  --bs-btn-padding-x: 1.75rem;
  --bs-btn-padding-y: .875rem;
  --bs-btn-border-radius: 0;
  transition: transform .16s var(--bpg-ease), background-color .16s var(--bpg-ease), color .16s var(--bpg-ease), border-color .16s var(--bpg-ease);
}
.btn-primary {
  --bs-btn-color: var(--bpg-chalk);
  --bs-btn-bg: var(--bpg-ignition);
  --bs-btn-border-color: var(--bpg-ignition);
  --bs-btn-hover-color: var(--bpg-chalk);
  --bs-btn-hover-bg: var(--bpg-ember);
  --bs-btn-hover-border-color: var(--bpg-ember);
  --bs-btn-active-bg: var(--bpg-ember);
  --bs-btn-active-border-color: var(--bpg-ember);
}

.btn-outline-light {
  --bs-btn-color: var(--bpg-chalk);
  --bs-btn-border-color: var(--bpg-chalk);
  --bs-btn-hover-bg: var(--bpg-chalk);
  --bs-btn-hover-color: var(--bpg-black);
  --bs-btn-hover-border-color: var(--bpg-chalk);
}
.btn-dark {
  --bs-btn-bg: var(--bpg-black);
  --bs-btn-border-color: var(--bpg-black);
  --bs-btn-color: var(--bpg-chalk);
  --bs-btn-hover-bg: var(--bpg-ignition);
  --bs-btn-hover-border-color: var(--bpg-ignition);
  --bs-btn-hover-color: var(--bpg-chalk);
}
/* mono micro-button (Add / chips) */
.btn-bpg-mono {
  --bs-btn-font-family: var(--bs-font-monospace);
  --bs-btn-font-size: .75rem;
  --bs-btn-font-weight: 700;
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: .5rem;
  letter-spacing: var(--bpg-track-mono);
  text-transform: uppercase;
}

.form-control, .form-select {
  --bs-border-radius: 4px;
  background-color: transparent;
  border-color: var(--bpg-steel);
  color: var(--bs-body-color);
  padding: .875rem 1.25rem;
}
.form-control:focus, .form-select:focus {
  background-color: transparent;
  border-color: var(--bpg-ignition);
  box-shadow: 0 0 0 .2rem rgba(255,77,28,.2);
  color: var(--bs-body-color);
}
.form-control::placeholder { color: var(--bpg-smoke); }

.accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-color: var(--bs-body-color);
  --bs-accordion-border-color: var(--bpg-steel);
  --bs-accordion-border-width: 0 0 1px 0;
  --bs-accordion-border-radius: 0;
  --bs-accordion-btn-color: var(--bpg-chalk);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-btn-padding-x: 0;
  --bs-accordion-btn-padding-y: 1.5rem;
  --bs-accordion-body-padding-x: 0;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-active-color: var(--bpg-ignition);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FF4D1C'%3e%3cpath d='M7 1h2v14H7z'/%3e%3cpath d='M1 7h14v2H1z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FF4D1C'%3e%3cpath d='M1 7h14v2H1z'/%3e%3c/svg%3e");
}
.accordion-button {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 600;
  font-size: var(--bpg-fs-3);
}
.accordion-item:first-of-type > .accordion-header .accordion-button { border-radius: 0; }

.card {
  --bs-card-bg: var(--bpg-charcoal);
  --bs-card-border-color: var(--bpg-graphite);
  --bs-card-border-radius: 0;
  --bs-card-inner-border-radius: 0;
}
.badge { letter-spacing: var(--bpg-track-mono); text-transform: uppercase; font-family: var(--bs-font-monospace); }
.offcanvas { --bs-offcanvas-bg: var(--bpg-charcoal); --bs-offcanvas-color: var(--bpg-chalk); --bs-offcanvas-border-color: var(--bpg-steel); }
.dropdown-menu { --bs-dropdown-bg: var(--bpg-charcoal); --bs-dropdown-border-color: var(--bpg-steel); --bs-dropdown-link-hover-bg: var(--bpg-graphite); --bs-dropdown-border-radius: 0; }
hr { border-color: var(--bpg-steel); opacity: 1; }

/* ---------- 4. HEADER ---------- */
.bpg-bar {
  background: var(--bpg-black);
  border-bottom: 1px solid var(--bpg-steel);
  font-family: var(--bs-font-monospace);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: var(--bpg-track-mono);
  text-transform: uppercase;
  color: var(--bpg-ash);
}
.bpg-bar a { color: var(--bpg-chalk); text-decoration: none; }
.bpg-bar a:hover { color: var(--bpg-ignition); }
.bpg-bar__sep { color: var(--bpg-ignition); }

.bpg-nav {
  background: transparent;
  border-bottom: 1px solid var(--bpg-steel);
}
/* Frosted background lives on a ::before, NOT on .bpg-nav itself. An element
   with backdrop-filter becomes the containing block for its position:fixed
   descendants, which trapped the offcanvas inside the ~70px nav bar and made
   the menu render as a tiny strip "behind" the page. The ::before keeps the
   blur effect without creating that containing block. */
.bpg-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10,11,13,.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: -1;
}
.bpg-nav .navbar-brand {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bpg-chalk);
}
.bpg-nav .navbar-brand svg { width: 18px; height: 18px; color: var(--bpg-ignition); }
.bpg-nav .nav-link {
  --bs-nav-link-color: var(--bpg-chalk);
  --bs-nav-link-hover-color: var(--bpg-ignition);
  font-size: .875rem;
  font-weight: 500;
}
.bpg-nav .nav-link.active { color: var(--bpg-ignition); }
.bpg-nav__tool {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 0; color: var(--bpg-chalk); text-decoration: none;
  position: relative;
}
.bpg-nav__tool:hover { color: var(--bpg-ignition); }
.bpg-nav__count {
  position: absolute; top: -6px; right: -6px;
  min-width: 24px; height: 24px; padding: 0 6px;
  background: var(--bpg-ignition); color: var(--bpg-chalk);
  font-family: var(--bs-font-monospace); font-weight: 700; font-size: .8rem;
  border-radius: 0; display: none; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--bpg-black);
  transition: transform .16s var(--bpg-ease);
}
.bpg-nav__count:not(:empty) { display: flex; }
.bpg-nav__tool[data-bpg-cart-tool]:hover .bpg-nav__count:not(:empty) { transform: scale(1.1); }
.navbar-toggler { border-color: var(--bpg-steel); border-radius: 0; }

/* Keep the mobile header on a single row. Bootstrap's navbar container wraps
   by default, so the long uppercase wordmark pushes the tools + toggler onto a
   second line at the left. Stop the wrap, let the brand shrink, and pin the
   tools group to the right so the hamburger sits top-right where it belongs. */
.bpg-nav .container { flex-wrap: nowrap; }
.bpg-nav .navbar-brand { min-width: 0; }
.bpg-nav .d-flex.order-lg-3 { margin-left: auto; flex-shrink: 0; }

/* ---------- 5. HERO ---------- */
.bpg-hero { position: relative; min-height: 88vh; display: flex; align-items: flex-end; overflow: hidden; }
.bpg-hero__bg {
  position: absolute; inset: -10% 0;
  background:
    radial-gradient(120% 90% at 70% 20%, rgba(255,77,28,.10), transparent 60%),
    linear-gradient(120deg, #16181D 0%, #0A0B0D 60%);
}
.bpg-hero__bg::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.02) 0 2px, transparent 2px 90px),
    radial-gradient(80% 60% at 30% 80%, rgba(255,77,28,.06), transparent 70%);
}
.bpg-hero__bg::after { content: ""; position: absolute; inset: 0; background: var(--bpg-overlay); }
.bpg-hero__ph {
  position: absolute; right: 6%; top: 12%; width: 34%; max-width: 460px; aspect-ratio: 3/4;
  border: 1px solid var(--bpg-steel);
  background: linear-gradient(160deg, #1f232b, #0c0d10);
  display: flex; align-items: flex-end; justify-content: center; padding: 14px; overflow: hidden;
}
.bpg-hero__ph svg { width: 78%; opacity: .5; }
.bpg-hero__switch {
  font-family: "Archivo", system-ui, sans-serif; font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.4rem); color: var(--bpg-ignition);
  transition: opacity .25s, transform .25s;
}
.bpg-hero__scroll::after { content: ""; width: 40px; height: 1px; background: var(--bpg-steel); display: inline-block; vertical-align: middle; margin-left: .5rem; }

/* ---------- 6. MARQUEE ---------- */
.bpg-marquee {
  border-top: 1px solid var(--bpg-steel);
  border-bottom: 1px solid var(--bpg-steel);
  background: var(--bpg-black);
  overflow: hidden; user-select: none; cursor: grab;
}
.bpg-marquee.is-dragging { cursor: grabbing; }
.bpg-marquee__track { display: flex; width: max-content; animation: bpg-marq 38s linear infinite; will-change: transform; }
.bpg-marquee:hover .bpg-marquee__track { animation-play-state: paused; }
.bpg-marquee__track span {
  font-family: var(--bs-font-monospace); font-weight: 500; font-size: .875rem;
  letter-spacing: var(--bpg-track-mono); text-transform: uppercase;
  color: var(--bpg-ash); padding: 18px 0; white-space: nowrap;
}
.bpg-marquee__track i { color: var(--bpg-ignition); font-style: normal; padding: 18px 22px; }
@keyframes bpg-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 7. HORIZONTAL RAIL ---------- */
.bpg-rail__pin { overflow: hidden; }
.bpg-rail__track { display: flex; gap: 1.5rem; padding: 0 var(--bs-gutter-x, 1.5rem); will-change: transform; }
.bpg-rail__cta {
  flex: 0 0 auto; width: 280px;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--bpg-steel); color: var(--bpg-chalk); text-decoration: none;
}
.bpg-rail__cta:hover { border-color: var(--bpg-ignition); color: var(--bpg-ignition); }

/* ---------- 8. PRODUCT CARD (colour-hover) ---------- */
.bpg-pcard { flex: 0 0 auto; width: clamp(260px, 30vw, 360px); }
.bpg-pcard--grid { width: 100%; }
.bpg-pcard__media { position: relative; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.bpg-pcard__media svg { width: 62%; filter: grayscale(1); transition: filter .36s var(--bpg-ease), transform .36s var(--bpg-ease); }
.bpg-pcard:hover .bpg-pcard__media svg { filter: grayscale(0); transform: scale(1.04); }
.bpg-pcard__media::after {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .36s;
  background: linear-gradient(180deg, transparent 60%, rgba(10,11,13,.5));
}
.bpg-pcard:hover .bpg-pcard__media::after { opacity: 1; }
/* real product photo inside the rail card (placeholders are inline SVG) */
.bpg-pcard__media .bpg-pcard__realimg {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1);
  transition: filter .36s var(--bpg-ease), transform .36s var(--bpg-ease);
}
.bpg-pcard:hover .bpg-pcard__media .bpg-pcard__realimg { filter: grayscale(0); transform: scale(1.04); }
.bpg-pcard__media .price { color: var(--bpg-chalk); }
.bpg-pcard__name a { color: inherit; text-decoration: none; }
.bpg-pcard__name a:hover { color: var(--bpg-ignition); }

/* ---------- 9. BEFORE / AFTER ---------- */
.bpg-ba {
  position: relative; aspect-ratio: 4/5; width: 100%; overflow: hidden;
  cursor: ew-resize; --p: 50%;
  touch-action: none;        /* otherwise touch scrolls the page instead of dragging */
  user-select: none;
  -webkit-user-select: none;
}
.bpg-ba.is-dragging { cursor: grabbing; }
.bpg-ba img {
  pointer-events: none;      /* pointer events belong to the slider, not the photo */
  -webkit-user-drag: none;
  user-drag: none;
}
/* the knob should not swallow the drag either */
.bpg-ba__handle, .bpg-ba__knob { pointer-events: none; }
.bpg-ba__img { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.bpg-ba__img svg { width: 60%; }
.bpg-ba__before { background: linear-gradient(150deg, #20242c, #0d0e11); }
.bpg-ba__after { background: linear-gradient(150deg, #2a1410, #0d0e11); clip-path: inset(0 0 0 var(--p)); }
.bpg-ba__handle { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; background: var(--bpg-ignition); transform: translateX(-1px); }
.bpg-ba__knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 36px; height: 36px; border-radius: 0; background: var(--bpg-ignition);
  display: flex; align-items: center; justify-content: center; color: var(--bpg-chalk);
  font-family: var(--bs-font-monospace); font-weight: 700;
}

/* ---------- 10. SPEC BARS ---------- */
.bpg-specbar__track { height: 4px; background: var(--bpg-graphite); border-radius: 0; overflow: hidden; }
.bpg-specbar__fill { height: 100%; background: var(--bpg-ignition); width: 0; transition: width .7s var(--bpg-ease-out); }

/* ---------- 11. SNAP RACK (reviews / related) ---------- */
.bpg-rack {
  display: flex; gap: 1rem; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: .75rem var(--bs-gutter-x, 1.5rem) 2rem;
}
.bpg-rack::-webkit-scrollbar { display: none; }
.bpg-rack > * { scroll-snap-align: center; flex: 0 0 auto; width: min(420px, 80vw); }
.bpg-stars { color: var(--bpg-ignition); letter-spacing: .12em; }

/* ---------- 12. COMPARE TABLE ---------- */
.bpg-cmp { border: 1px solid var(--bpg-steel); }
.bpg-cmp .row { --bs-gutter-x: 0; border-bottom: 1px solid var(--bpg-graphite); align-items: center; }
.bpg-cmp .row:last-child { border-bottom: 0; }
.bpg-cmp .row > div { padding: 1.5rem; }
.bpg-cmp__us { background: var(--bpg-ignition); color: var(--bpg-chalk); }
.bpg-cmp__them { background: var(--bpg-charcoal); color: var(--bpg-ash); }
.bpg-cmp .row + .row .bpg-cmp__us { background: transparent; color: var(--bpg-chalk); }
.bpg-cmp .row + .row .bpg-cmp__them { background: transparent; color: var(--bpg-smoke); }

/* ---------- 13. TIKTOK GRID ---------- */
.bpg-clip { position: relative; overflow: hidden; border: 1px solid var(--bpg-graphite); background: linear-gradient(150deg, #1a1e26, #08090b); }
.bpg-clip::after { content: ""; position: absolute; inset: 0; background: var(--bpg-overlay); opacity: .7; }
.bpg-clip__play {
  position: absolute; inset: 0; margin: auto; z-index: 2;
  width: 52px; height: 52px; border-radius: 0; border: 2px solid var(--bpg-chalk);
  display: flex; align-items: center; justify-content: center; color: var(--bpg-chalk);
  transition: background .16s, border-color .16s, transform .16s;
}
.bpg-clip:hover .bpg-clip__play { background: var(--bpg-ignition); border-color: var(--bpg-ignition); transform: scale(1.08); }

/* ---------- 14. INVERTED (newsletter) ---------- */
.bpg-invert { background: var(--bpg-chalk); color: var(--bpg-black); }
.bpg-invert h1, .bpg-invert h2, .bpg-invert h3, .bpg-invert .display-2 { color: var(--bpg-black); }
.bpg-invert p { color: #3a3f4a; }
.bpg-invert .bpg-eyebrow { color: var(--bpg-smoke); }
.bpg-invert .form-control { border-color: var(--bpg-graphite); color: var(--bpg-black); }
.bpg-invert .form-control::placeholder { color: var(--bpg-smoke); }

/* ---------- 15. FOOTER ---------- */
.bpg-footer { border-top: 1px solid var(--bpg-steel); background: var(--bpg-charcoal); }
.bpg-footer a { color: var(--bpg-chalk); text-decoration: none; }
.bpg-footer a:hover { color: var(--bpg-ignition); }
.bpg-footer h4 {
  font-family: var(--bs-font-monospace); font-weight: 700; font-size: .75rem;
  letter-spacing: var(--bpg-track-mono); text-transform: uppercase; color: var(--bpg-ash);
}
.bpg-footer__bottom { border-top: 1px solid var(--bpg-graphite); color: var(--bpg-smoke); font-size: .875rem; }

/* ---------- 16. PDP ---------- */
.bpg-gallery { position: sticky; top: 96px; }
.bpg-thumb { position: relative; aspect-ratio: 1/1; border: 1px solid var(--bpg-graphite); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .16s; background: linear-gradient(150deg, #20242c, #0d0e11); }
.bpg-thumb svg { width: 50%; opacity: .6; filter: grayscale(1); }
.bpg-thumb.active { border-color: var(--bpg-ignition); }
.bpg-thumb.active svg { opacity: 1; filter: grayscale(0); }
.bpg-opt {
  font-size: .875rem; font-weight: 500; padding: .75rem 1.125rem;
  border: 1px solid var(--bpg-steel); border-radius: 4px;
  background: transparent; color: var(--bpg-chalk); cursor: pointer; transition: all .16s;
}
.bpg-opt:hover { border-color: var(--bpg-chalk); }
.bpg-opt.active { background: var(--bpg-chalk); color: var(--bpg-black); border-color: var(--bpg-chalk); }
.bpg-opt.unavail { color: var(--bpg-smoke); text-decoration: line-through; cursor: not-allowed; opacity: .5; }
.bpg-qty { display: inline-flex; border: 1px solid var(--bpg-steel); border-radius: 4px; overflow: hidden; }
.bpg-qty button { width: 44px; height: 48px; background: transparent; color: var(--bpg-chalk); border: 0; font-size: 1.2rem; cursor: pointer; }
.bpg-qty button:hover { background: var(--bpg-graphite); }
.bpg-qty input { width: 56px; text-align: center; background: transparent; color: var(--bpg-chalk); border: 0; font-variant-numeric: tabular-nums; }

/* ---------- 17. CHIPS (collection filters) ---------- */
/* collection filter chips: smaller, sharp-cornered (not pills), toned down
   so they read as quiet filters, not buttons. */
.bpg-chip {
  display: inline-block; text-decoration: none;
  font-family: var(--bs-font-monospace); font-weight: 500; font-size: .68rem;
  letter-spacing: var(--bpg-track-mono); text-transform: uppercase;
  padding: .4rem .7rem; border-radius: 0; border: 1px solid var(--bpg-graphite);
  color: var(--bpg-ash); background: transparent; cursor: pointer;
  transition: color .16s, border-color .16s, background .16s;
}
.bpg-chip:hover { color: var(--bpg-chalk); border-color: var(--bpg-steel); background: var(--bpg-charcoal); }
.bpg-chip.active { background: var(--bpg-ignition); color: var(--bpg-chalk); border-color: var(--bpg-ignition); }
/* wrapper: a little more air on mobile so the wrapped rows separate cleanly */
.bpg-chips { gap: .5rem; }
@media (max-width: 575.98px) {
  .bpg-chips { gap: .625rem; }
  .bpg-chip { padding: .4rem .65rem; }
}

/* ---------- 17b. WOOCOMMERCE LOOP ----------
   Woo prints its own <ul class="products"> markup, so the BPG card design is
   applied to that markup rather than replaced with template overrides. */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin: 0 0 3rem;
  padding: 0;
  list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  background: var(--bpg-charcoal);
  border: 1px solid var(--bpg-graphite);
  display: flex;
  flex-direction: column;
  position: relative;
  text-align: left;
}
.woocommerce ul.products li.product .woocommerce-loop-product__link { display: block; }

/* image: square, grayscale until hover (colour-hover cards) */
.woocommerce ul.products li.product img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0;
  filter: grayscale(1);
  transition: filter .36s var(--bpg-ease), transform .36s var(--bpg-ease);
}
.woocommerce ul.products li.product:hover img { filter: grayscale(0); transform: scale(1.04); }

.woocommerce ul.products li.product .onsale {
  position: absolute; top: .5rem; right: .5rem; left: auto; margin: 0;
  background: var(--bpg-ignition); color: var(--bpg-chalk);
  font-family: var(--bs-font-monospace); font-weight: 700; font-size: .62rem;
  letter-spacing: var(--bpg-track-mono); text-transform: uppercase;
  border-radius: 0; padding: .25rem .5rem; min-height: 0; line-height: 1.4;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.25;
  color: var(--bpg-chalk);
  padding: 1.25rem 1.25rem 0;
  /* CJ imports ship 20-word titles; clamp so the grid stays on a baseline */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title { color: var(--bpg-ignition); }

.woocommerce ul.products li.product .price {
  color: var(--bpg-chalk);
  font-family: var(--bs-body-font-family);
  font-weight: 600;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  padding: .75rem 1.25rem 0;
  margin: 0 0 1rem;
  display: block;
}
.woocommerce ul.products li.product .price del { color: var(--bpg-smoke); font-weight: 400; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

.woocommerce ul.products li.product .button {
  margin: auto 1.25rem 1.25rem;
  align-self: flex-start;
  background: var(--bpg-ignition);
  color: var(--bpg-chalk);
  font-family: var(--bs-font-monospace);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: var(--bpg-track-mono);
  text-transform: uppercase;
  border-radius: 0;
  padding: .5rem 1rem;
  border: 1px solid var(--bpg-ignition);
  transition: background .16s var(--bpg-ease), border-color .16s var(--bpg-ease), transform .16s var(--bpg-ease);
}

.woocommerce ul.products li.product .button:hover { background: var(--bpg-ember); color: var(--bpg-chalk); }
.woocommerce ul.products li.product .added_to_cart { display: none; }

/* pagination + result count */
.woocommerce nav.woocommerce-pagination ul { border: 0; gap: .5rem; display: flex; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border: 1px solid var(--bpg-steel); border-radius: 0;
  min-width: 44px; padding: .5rem .75rem; color: var(--bpg-chalk);
  font-family: var(--bs-font-monospace); font-size: .75rem;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--bpg-ignition); border-color: var(--bpg-ignition); color: var(--bpg-chalk);
}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select {
  font-family: var(--bs-font-monospace); font-size: .75rem;
  letter-spacing: var(--bpg-track-mono); text-transform: uppercase; color: var(--bpg-ash);
}
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
  background: var(--bpg-charcoal); border-top-color: var(--bpg-ignition); color: var(--bpg-chalk);
}

@media (max-width: 991.98px) {
  .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  .woocommerce ul.products, .woocommerce-page ul.products { gap: .75rem; }
  /* 2-up grid leaves ~150px of card width: shrink the pill so it stays on one
     line and stops dominating the card */
  .woocommerce ul.products li.product .button {
    font-size: .625rem;
    letter-spacing: .08em;
    padding: .5rem .75rem;
    margin: auto .875rem .875rem;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title { padding: 1rem .875rem 0; font-size: .9375rem; }
  .woocommerce ul.products li.product .price { padding: .5rem .875rem 0; font-size: .9375rem; margin-bottom: .75rem; }
  .woocommerce ul.products li.product .onsale { font-size: .55rem; padding: .2rem .4rem; }
}

/* ---------- 17c. SINGLE-PRODUCT PDP ----------
   Woo prints its own single-product markup (gallery + summary + tabs + related).
   We reskin that markup to the BPG brand system rather than override templates:
   a two-column grid like the mockup's .pdp, a sticky gallery, a big display
   title, a clean price block, a qty stepper + "Add to bag", a mini trust row,
   and the Woo tabs rebuilt as a relaxed accordion. */

/* page shell: no Woo page title (we keep the H1 product title), tighter top */
.single-product .woocommerce-notices-wrapper { margin-top: 1rem; }

/* two-column grid: gallery (1.1fr) + info (0.9fr), gallery sticky on desktop */
.single-product div.product {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: start;
  margin-top: 1.5rem;
  min-width: 0;
}
.single-product div.product > * { min-width: 0; }

/* BPG PDP column-fill fix
   Woo's classic layout still applies float + width:48% to the gallery and the
   summary. Inside this grid the 48% resolves against the COLUMN track, not the
   row, so each column rendered at roughly half its width on desktop and left a
   large empty gutter. Mobile was unaffected because the single column is narrow. */
.woocommerce.single-product div.product > div.woocommerce-product-gallery,
.woocommerce.single-product div.product > div.summary,
.woocommerce.single-product div.product > div.entry-summary {
  width: 100%;
  float: none;
}
/* no sticky gallery: the mockup's sticky read as the image floating for no
   reason and, on mobile, made the title scroll under the photos. Let it flow. */
.single-product .woocommerce-product-gallery { min-width: 0; }
.single-product .woocommerce-product-gallery .flex-control-thumbs img { min-width: 0; }

/* gallery main + zoom trigger */
.single-product .woocommerce-product-gallery__trigger {
  top: .5rem; right: .5rem; left: auto; margin: 0;
  width: 40px; height: 40px; border-radius: 0;
  background: rgba(10,11,13,.6); border: 1px solid var(--bpg-steel);
  color: var(--bpg-chalk); display: flex; align-items: center; justify-content: center;
  font-size: 1rem; backdrop-filter: blur(6px); transition: border-color .16s, color .16s;
}
.single-product .woocommerce-product-gallery__trigger:hover { border-color: var(--bpg-ignition); color: var(--bpg-ignition); }
.single-product .flex-viewport { border: 1px solid var(--bpg-graphite); background: var(--bpg-charcoal); }
.single-product .woocommerce-product-gallery img { border-radius: 0; }

/* thumbnail row: square, muted, active = ignition border + full colour */
.single-product .woocommerce-product-gallery .flex-control-thumbs {
  display: flex; gap: .625rem; margin: .625rem 0 0; padding: 0; list-style: none;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs li { flex: 1; }
.single-product .woocommerce-product-gallery .flex-control-thumbs img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; margin: 0;
  border: 1px solid var(--bpg-graphite); opacity: .55; filter: grayscale(.6);
  cursor: pointer; transition: opacity .2s, filter .2s, border-color .2s;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.single-product .woocommerce-product-gallery .flex-control-thumbs img:hover {
  opacity: 1; filter: none; border-color: var(--bpg-ignition);
}

/* sale badge on the single image */
.single-product .woocommerce-product-gallery .onsale,
.single-product .onsale {
  position: absolute; top: .5rem; left: .5rem; right: auto; margin: 0; z-index: 2;
  background: var(--bpg-ignition); color: var(--bpg-chalk);
  font-family: var(--bs-font-monospace); font-weight: 700; font-size: .68rem;
  letter-spacing: var(--bpg-track-mono); text-transform: uppercase;
  border-radius: 0; padding: .3rem .55rem; min-height: 0; line-height: 1.4;
}

/* INFO COLUMN */
.single-product .summary { padding-top: .25rem; }
.single-product .product_title {
  font-family: "Archivo", system-ui, sans-serif; font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.02; letter-spacing: -.01em;
  color: var(--bpg-chalk); margin: 0 0 .75rem;
}
.single-product .woocommerce-product-details__short-description {
  color: var(--bpg-ash); font-size: 1.0625rem; line-height: 1.6; margin: 0 0 1.5rem;
}

/* price block */
.single-product .summary .price {
  display: flex; align-items: baseline; gap: .75rem; margin: 0 0 1rem;
  font-family: var(--bs-body-font-family); flex-wrap: wrap;
}
.single-product .summary .price del { color: var(--bpg-smoke); font-weight: 400; font-size: 1rem; }
.single-product .summary .price ins { text-decoration: none; color: var(--bpg-chalk); font-weight: 700; font-size: 2rem; font-variant-numeric: tabular-nums; }
.single-product .summary .price > .woocommerce-Price-amount { font-size: 2rem; font-weight: 700; color: var(--bpg-chalk); font-variant-numeric: tabular-nums; }
.single-product .summary .price .screen-reader-text { position: absolute !important; }

/* stock line: small mono, calm */
.single-product .summary .stock {
  font-family: var(--bs-font-monospace); font-size: .72rem; letter-spacing: var(--bpg-track-mono);
  text-transform: uppercase; color: var(--bpg-ash); margin: 0 0 1.25rem;
}
.single-product .summary .stock.in-stock::before { content: "\2713  "; color: var(--bpg-ignition); }

/* cart form: divider, then qty stepper + button on one row */
/* qty + button row. Simple products: qty + button are direct children of
   form.cart. Variable products: they live in .woocommerce-variation-add-to-cart,
   so form.cart stays block (variations table full-width above) and the
   add-to-cart container is the flex row. */
.single-product .product-type-simple form.cart {
  display: flex; gap: 1rem; align-items: stretch;
  border-top: 1px solid var(--bpg-steel); padding-top: 1.5rem; margin: 0 0 1.5rem;
}
.single-product .product-type-variable form.cart { display: block; }
.single-product .product-type-variable .variations { margin-bottom: 1.5rem; }
.single-product .woocommerce-variation-add-to-cart {
  display: flex; gap: 1rem; align-items: stretch; flex-wrap: wrap;
  border-top: 1px solid var(--bpg-steel); padding-top: 1.5rem; margin: 0 0 1.5rem;
}
.single-product .quantity { flex: 0 0 auto; }
.single-product .quantity {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--bpg-steel); border-radius: 4px; overflow: hidden;
}
.single-product .quantity .bpg-qty-btn {
  width: 44px; background: transparent; color: var(--bpg-chalk); border: 0;
  font-size: 1.2rem; line-height: 1; cursor: pointer; transition: background .16s;
}
.single-product .quantity .bpg-qty-btn:hover { background: var(--bpg-graphite); }
.single-product .quantity .qty {
  width: 56px; border: 0; border-left: 1px solid var(--bpg-steel); border-right: 1px solid var(--bpg-steel);
  background: transparent; color: var(--bpg-chalk); text-align: center; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; box-shadow: none; padding: 0; height: auto;
}
.single-product .quantity .qty::-webkit-outer-spin-button,
.single-product .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* add to bag button. Woo's .single_add_to_cart_button.alt is compiled with the
   parent theme's SCSS $primary (Bootstrap blue), so it needs a higher-specificity
   selector + !important to take the brand ignition -> ember hover + scale. */
.single-product .single_add_to_cart_button.button.alt {
  --bs-btn-color: var(--bpg-chalk);
  --bs-btn-bg: var(--bpg-ignition);
  --bs-btn-border-color: var(--bpg-ignition);
  --bs-btn-hover-color: var(--bpg-chalk);
  --bs-btn-hover-bg: var(--bpg-ember);
  --bs-btn-hover-border-color: var(--bpg-ember);
  flex: 1 1 auto; display: inline-flex !important; align-items: center; justify-content: center; gap: .4rem;
  border: 1px solid var(--bs-btn-border-color) !important;
  border-radius: var(--bs-border-radius, 0) !important;
  background-color: var(--bs-btn-bg) !important; color: var(--bs-btn-color) !important;
  font-family: var(--bs-body-font-family) !important; font-size: .9375rem !important;
  font-weight: 700 !important; line-height: 1.4 !important;
  padding: .75rem 1.5rem !important; min-height: 52px;
  cursor: pointer; text-transform: none !important; letter-spacing: 0 !important;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.single-product .single_add_to_cart_button.button.alt:hover { background-color: var(--bs-btn-hover-bg) !important; border-color: var(--bs-btn-hover-border-color) !important; color: var(--bs-btn-hover-color) !important; transform: scale(1.02); }
.single-product .single_add_to_cart_button.button.alt:active { transform: translateY(1px); }
.single-product .single_add_to_cart_button.button.alt.disabled,
.single-product .single_add_to_cart_button.button.alt:disabled,
.single-product .single_add_to_cart_button.button.alt[disabled] { filter: grayscale(.5); opacity: .7; }

/* variable products: keep the variation selects + quantity usable on the dark theme */
.single-product .variations { margin-bottom: 1rem; }
.single-product .variations select {
  background: var(--bpg-charcoal); color: var(--bpg-chalk); border: 1px solid var(--bpg-steel);
  border-radius: 4px; padding: .5rem .75rem;
}
.single-product .variations td { padding: .4rem 0; border: 0; }
.single-product .variations label { color: var(--bpg-ash); font-family: var(--bs-font-monospace); font-size: .72rem; letter-spacing: var(--bpg-track-mono); text-transform: uppercase; }

/* mini trust row under the button */
.bpg-minitrust {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  padding: 1.25rem 0; border-bottom: 1px solid var(--bpg-steel); margin-bottom: 1.5rem;
}
.bpg-minitrust__cell { display: flex; flex-direction: column; gap: 4px; }
.bpg-minitrust__t { font-family: var(--bs-font-monospace); font-weight: 700; font-size: .68rem; letter-spacing: var(--bpg-track-mono); text-transform: uppercase; color: var(--bpg-chalk); }
.bpg-minitrust__d { color: var(--bpg-ash); font-size: .8125rem; }

/* SKU + category line removed via PHP; keep this as a guard in case of fallback */
.single-product .product_meta { display: none; }

/* TABS -> RELAXED ACCORDION
   JS rebuilds the Woo tabs as .bpg-acc and hides the originals. "Relaxed" =
   generous padding, mid-weight headings, comfortable line-height, no all-caps
   mono. Only one panel open at a time. */
.woocommerce-tabs.bpg-acc-built .wc-tabs,
.woocommerce-tabs.bpg-acc-built > .woocommerce-Tabs-panel { display: none !important; }
.bpg-acc { margin: 2.25rem 0 0; border-top: 1px solid var(--bpg-steel); }
.bpg-acc__item { border-bottom: 1px solid var(--bpg-steel); }
.bpg-acc__head {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  padding: 1.4rem 0; color: var(--bpg-chalk); transition: color .16s;
  font-family: "Archivo", system-ui, sans-serif; font-weight: 600; font-size: 1.125rem; line-height: 1.3;
}
.bpg-acc__head:hover { color: var(--bpg-ignition); }
.bpg-acc__icon { color: var(--bpg-ignition); font-family: var(--bs-font-mono); font-size: 1.35rem; line-height: 1; transition: transform .2s var(--bpg-ease); flex: 0 0 auto; }
.bpg-acc__item.open .bpg-acc__icon { transform: rotate(45deg); }
.bpg-acc__body { max-height: 0; overflow: hidden; transition: max-height .32s var(--bpg-ease); }
.bpg-acc__item.open .bpg-acc__body { max-height: 2400px; }
.bpg-acc__body-inner { padding: 0 0 1.5rem; color: var(--bpg-ash); font-size: .9375rem; line-height: 1.75; }
/* Normalize CJ-imported descriptions: some ship large inline font-sizes and big
   headings, so the same accordion looked different per product. Force every
   element to inherit one size/line-height (!important beats inline
   style="font-size"), with headings bumped one step above body. */
.bpg-acc__body-inner * { font-size: inherit !important; line-height: inherit !important; letter-spacing: normal !important; text-transform: none !important; }
.bpg-acc__body-inner h2, .bpg-acc__body-inner h3 { color: var(--bpg-chalk); font-weight: 700; font-size: 1.0625rem !important; margin: 1.25rem 0 .5rem !important; line-height: 1.3 !important; }
.bpg-acc__body-inner h4, .bpg-acc__body-inner h5, .bpg-acc__body-inner h6 { color: var(--bpg-chalk); font-weight: 700; font-size: .9375rem !important; margin: 1rem 0 .4rem !important; }
.bpg-acc__body-inner p { margin: 0 0 .65rem !important; }
.bpg-acc__body-inner ul, .bpg-acc__body-inner ol { margin: .5rem 0 !important; padding: 0 0 0 1.25rem !important; }
.bpg-acc__body-inner ul { list-style: none; }
.bpg-acc__body-inner li { padding: .25rem 0 !important; position: relative; }
.bpg-acc__body-inner ul li::before { content: "+"; position: absolute; left: 0; color: var(--bpg-ignition); font-family: var(--bs-font-monospace); }
.bpg-acc__body-inner a { color: var(--bpg-ignition) !important; text-decoration: none; }
.bpg-acc__body-inner a:hover { text-decoration: underline; }
.bpg-acc__body-inner img { max-width: 100%; height: auto; }
.bpg-acc__body-inner table { width: 100%; border-collapse: collapse; margin: .75rem 0; }
.bpg-acc__body-inner td, .bpg-acc__body-inner th { padding: .5rem .6rem !important; border: 1px solid var(--bpg-graphite); color: var(--bpg-ash) !important; background: transparent !important; }
.bpg-acc__body-inner tr:nth-child(odd) td { background: var(--bpg-charcoal) !important; }
/* CJ imports ship inline light-mode styles (color:#333, big font-size, bg); force readable + uniform on dark */
.bpg-acc__body-inner :is(p, span, div, li, td, th, strong, em, b, h4, h5, h6)[style] { color: var(--bpg-ash) !important; background: transparent !important; }

/* related products: branded heading, existing loop card styles carry the grid */
.single-product .related.products { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--bpg-steel); }
.single-product .related.products > h2 {
  font-family: "Archivo", system-ui, sans-serif; font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2rem); color: var(--bpg-chalk); margin-bottom: 1.5rem;
}

/* responsive: stack to one column, gallery not sticky, buy row stacks */
@media (max-width: 991.98px) {
  .single-product div.product { grid-template-columns: 1fr; gap: 1.75rem; }
}
@media (max-width: 575.98px) {
  .single-product .product-type-simple form.cart,
  .single-product .woocommerce-variation-add-to-cart { flex-direction: column; gap: 1.25rem; }
  .single-product .quantity { align-self: stretch; justify-content: center; }
  .single-product .quantity .bpg-qty-btn { flex: 1; }
  .single-product .single_add_to_cart_button { width: 100%; }
  .bpg-minitrust { gap: .5rem; }
  .bpg-minitrust__d { font-size: .75rem; }
}

/* ---------- 18. RESPONSIVE ---------- */
@media (max-width: 575.98px) {
  /* compare table: the two verdict columns are narrow on phones, so tighten
     the padding and label size instead of letting the headers wrap to 4 lines */
  .bpg-cmp .row > div { padding: 1rem .75rem; }
  .bpg-cmp__us, .bpg-cmp__them { font-size: .625rem; }
}
@media (max-width: 991.98px) {
  .bpg-hero__ph { display: none; }
  .bpg-hero { min-height: 78vh; }
  .bpg-gallery { position: static; }
  .bpg-rail__pin { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .bpg-rail__pin::-webkit-scrollbar { display: none; }
  .bpg-rail__track { transform: none !important; }
  .bpg-pcard { scroll-snap-align: center; width: min(80vw, 340px); }
}

/* Mobile header: scale the wordmark with the viewport so "BETTER PERFORMANCE
   GEAR" fits beside the cart + toggler on one line. The nav is replaced by the
   offcanvas below the lg breakpoint, so this only needs to cover <992px. */
@media (max-width: 991.98px) {
  .bpg-nav .navbar-brand {
    font-size: clamp(.76rem, 3.2vw, 1.05rem);
    letter-spacing: .02em;
  }
}
@media (max-width: 575.98px) {
  .bpg-nav .navbar-brand { letter-spacing: .01em; }
  /* announcement bar: let the promo line wrap on narrow phones instead of
     forcing horizontal overflow under the dismiss button */
  .bpg-bar .container { flex-wrap: wrap; padding-right: 2.5rem; }
}

/* ---------- 19. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .bpg-pcard__media svg, .bpg-thumb svg { filter: grayscale(0); opacity: 1; }
  .bpg-marquee__track { animation: none; }
  .bpg-hero__bg { transform: none !important; }
}
body.bpg-reduced .bpg-marquee__track { animation: none; }
body.bpg-reduced .bpg-hero__switch { opacity: 1 !important; transform: none !important; }

/* BPG hidden elements
   Requested 2026-08-04: suppress Woo's message/info notice bars and the
   Bootstrap light-subtle background utility site-wide. */
.woocommerce-error,
.woocommerce-info,
.woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message {
  display: none;
}

.bg-light-subtle {
  display: none;
}

/* BPG block checkout fields
   Woo's block checkout renders white inputs with the field LABEL floating
   inside them. The theme colours labels near-white for the dark page, so the
   label sat white-on-white at 1.08:1 and you could not tell what any field was
   for. Bring the fields into the dark palette so label and value both read. */
.wc-block-checkout .wc-block-components-text-input input[type="text"],
.wc-block-checkout .wc-block-components-text-input input[type="email"],
.wc-block-checkout .wc-block-components-text-input input[type="tel"],
.wc-block-checkout .wc-block-components-text-input input[type="number"],
.wc-block-checkout .wc-block-components-text-input input[type="url"],
.wc-block-checkout .wc-block-components-combobox input[type="text"],
.wc-block-checkout .wc-block-components-textarea textarea,
.wc-block-checkout .wc-block-components-form select,
.wc-block-checkout .wc-block-components-country-input select,
.wc-block-checkout .wc-block-components-state-input select {
  background-color: var(--bpg-charcoal);
  color: var(--bpg-chalk);
  border: 1px solid var(--bpg-steel);
  border-radius: 0;
}
.wc-block-checkout .wc-block-components-text-input input:focus,
.wc-block-checkout .wc-block-components-combobox input:focus,
.wc-block-checkout select:focus {
  border-color: var(--bpg-ignition);
  outline: none;
  box-shadow: none;
}
.wc-block-checkout .wc-block-components-text-input label,
.wc-block-checkout .wc-block-components-combobox label,
.wc-block-checkout .wc-block-components-country-input label,
.wc-block-checkout .wc-block-components-state-input label,
.wc-block-checkout .wc-block-components-checkbox__label {
  color: var(--bpg-ash);
}
.wc-block-checkout ::placeholder { color: var(--bpg-smoke); opacity: 1; }

/* BPG hero vertical centring
   .bpg-hero uses align-items:flex-end, which pinned the copy to the bottom of
   an 88vh banner and left a large dead band above it on desktop. Centre it from
   the lg breakpoint up; mobile keeps the bottom anchor where it reads better. */
.bpg-hero { align-items: center; }
.bpg-hero > .container { padding-bottom: 0; }

/* BPG pagination restyle
   Was pill-shaped (radius 999px) with a solid ignition fill on the current page
   and .5rem/.75rem padding that left the numeral cramped against the edge.
   Square it off to match the rest of the UI, open up the padding, and mark the
   current page with a border accent rather than a loud filled chip. */
.woocommerce nav.woocommerce-pagination { margin: 2.5rem 0 4.5rem; }
.woocommerce nav.woocommerce-pagination ul { gap: .5rem; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border-radius: 0;
  padding: .5rem .875rem;
  min-width: 44px;
  background: transparent;
  border-color: var(--bpg-graphite);
  color: var(--bpg-ash);
  line-height: 1;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: transparent;
  border-color: var(--bpg-steel);
  color: var(--bpg-chalk);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: transparent;
  border-color: var(--bpg-ignition);
  color: var(--bpg-chalk);
}

/* BPG desktop nav typography
   The three menu items were left on Bootstrap's default Inter 14px sentence
   case while the adjacent "Shop now" tool link already used the brand's
   mono / uppercase / tracked label style, so the bar read as two typefaces.
   Match .bpg-eyebrow, and give three items room instead of a 24px huddle. */
@media (min-width: 992px) {
  .bpg-nav .navbar-nav { gap: 2.25rem !important; align-items: center; } /* beats .gap-lg-4 utility */
  .bpg-nav .nav-link {
    font-family: var(--bs-font-monospace);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: var(--bpg-track-mono);
    text-transform: uppercase;
    padding: .5rem 0;
    position: relative;
  }
  /* active/hover marked by a rule under the word rather than colour alone */
  .bpg-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--bpg-ignition);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .18s var(--bpg-ease);
  }
  .bpg-nav .nav-link:hover::after,
  .bpg-nav .nav-link.active::after { transform: scaleX(1); }
}
body.bpg-reduced .bpg-nav .nav-link::after { transition: none; }

/* BPG sorting control
   The orderby select had brand typography but a stock Bootstrap box: white
   background, 6px radius, grey border, and ash text on white at ~2.6:1. On a
   near-black site it read as an unstyled browser control. Box it in the brand
   palette with a custom chevron, and match the result count beside it. */
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
  background-color: var(--bpg-charcoal);
  color: var(--bpg-chalk);
  border: 1px solid var(--bpg-steel);
  border-radius: 0;
  padding: .625rem 2.5rem .625rem .875rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239AA0AB' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .875rem center;
  background-size: 10px 6px;
  cursor: pointer;
  transition: border-color .16s var(--bpg-ease);
}
.woocommerce .woocommerce-ordering select:hover { border-color: var(--bpg-ash); }
.woocommerce .woocommerce-ordering select:focus {
  border-color: var(--bpg-ignition);
  outline: none;
  box-shadow: none;
}
/* native dropdown list follows the OS, but set what we can */
.woocommerce .woocommerce-ordering select option {
  background: var(--bpg-charcoal);
  color: var(--bpg-chalk);
}

/* keep the count and the control on one baseline, and stack cleanly on mobile */
.woocommerce .woocommerce-result-count { margin: 0; }
@media (min-width: 768px) {
  .woocommerce .woocommerce-ordering { margin: 0; }
}
@media (max-width: 767.98px) {
  .woocommerce .woocommerce-ordering { width: 100%; margin: .75rem 0 0; }
  .woocommerce .woocommerce-ordering select { width: 100%; }
}

/* BPG tiktok section gate
   The homepage TikTok section renders "Seen on TikTok // @betterperformancegear"
   above six empty clip slots. The handle does not exist yet and the slots have no
   footage, so on a live store it reads as both broken and untrue.
   DELETE THIS RULE the moment real clips are in place. */
#tiktok { display: none; }

/* BPG hero photo
   The hero background was pure CSS gradient with a placeholder card floating on
   the right. Photo goes underneath, with the gradient kept but made translucent
   so it still darkens the left where the headline sits (text is centered now,
   so the darkening has to work mid-height, not only at the bottom). */
.bpg-hero__bg {
  background:
    radial-gradient(120% 90% at 70% 20%, rgba(255,77,28,.12), transparent 60%),
    linear-gradient(105deg, rgba(10,11,13,.90) 0%, rgba(10,11,13,.62) 48%, rgba(10,11,13,.78) 100%),
    url("/wp-content/uploads/2026/08/bpg-hero-gym.jpg") center center / cover no-repeat;
}
/* the 3:4 placeholder card is redundant against a full bleed photo */
.bpg-hero__ph { display: none; }

/* ----- add-to-cart toast (mobile: fixed bottom bar, desktop: floating chip) ----- */

/* ----- add-to-cart toast (mobile: fixed bottom bar, desktop: floating chip) ----- */

/* ----- add-to-cart toast (mobile: fixed bottom bar, desktop: wide bar) ----- */
#bpg-cart-toast {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--bpg-charcoal);
  border-top: 1px solid var(--bpg-steel);
  color: var(--bpg-chalk);
  padding: 0.75rem 1rem;
  font-family: var(--bs-font-monospace);
  font-size: 0.75rem;
  letter-spacing: var(--bpg-track-mono);
  text-transform: uppercase;
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 -8px 32px rgba(0,0,0,.35);
}
#bpg-cart-toast.bpg-toast--visible {
  pointer-events: auto;
}
.bpg-cart-toast__msg {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1.3;
  overflow: hidden;
}
.bpg-cart-toast__msg::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bpg-ignition);
  flex-shrink: 0;
}
.bpg-cart-toast__msg b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#bpg-cart-toast__cta {
  --bs-btn-color: var(--bpg-chalk);
  --bs-btn-bg: var(--bpg-ignition);
  --bs-btn-border-color: var(--bpg-ignition);
  --bs-btn-hover-color: var(--bpg-chalk);
  --bs-btn-hover-bg: var(--bpg-ember);
  --bs-btn-hover-border-color: var(--bpg-ember);
  font-size: 0.7rem;
  padding: 0.4rem 0.9rem;
  text-transform: uppercase;
  letter-spacing: var(--bpg-track-mono);
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: 0;
}
@media (min-width: 576px) {
  #bpg-cart-toast {
    padding: 0.875rem 1.5rem;
  }
  .bpg-cart-toast__msg b {
    max-width: 360px;
  }
}

/* ----- legal pages (terms, privacy, shipping, returns) ----- */
.bpg-legal {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) 1.5rem;
}
.bpg-legal__header {
  margin-bottom: clamp(32px, 5vw, 56px);
  padding-bottom: clamp(24px, 4vw, 40px);
  border-bottom: 1px solid var(--bpg-graphite);
}
.bpg-legal__header .display-2 {
  font-size: clamp(2.5rem, 6vw, 4rem);
}
.bpg-legal__h2 {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  letter-spacing: -0.01em;
  color: var(--bpg-chalk);
  margin-top: clamp(32px, 5vw, 48px);
  margin-bottom: 16px;
}
.bpg-legal p,
.bpg-legal li {
  color: var(--bpg-ash);
  font-size: 1rem;
  line-height: 1.7;
}
.bpg-legal a {
  color: var(--bpg-ignition);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bpg-legal a:hover {
  color: var(--bpg-ember);
}
.bpg-legal__list {
  padding-left: 1.25rem;
  margin: 0 0 1.25rem;
  list-style: none;
}
.bpg-legal__list li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.75rem;
}
.bpg-legal__list li::before {
  content: "//";
  position: absolute;
  left: 0;
  color: var(--bpg-ignition);
  font-family: var(--bs-font-monospace);
  font-size: 0.75rem;
  letter-spacing: var(--bpg-track-mono);
}
.bpg-legal__list strong {
  color: var(--bpg-chalk);
  font-weight: 600;
}

.bpg-footer__credit {
  font-family: var(--bs-font-monospace);
  font-size: .65rem;
  letter-spacing: var(--bpg-track-mono);
  text-transform: uppercase;
  color: var(--bpg-smoke);
}
.bpg-footer__credit a {
  color: var(--bpg-ash);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bpg-footer__credit a:hover { color: var(--bpg-ignition); }

/* ---------- 20. RELATED PRODUCTS (PDP): 3-up, more breathing room ----------
   Scoped so the shop/archive loop keeps its 4-up grid. Higher specificity than
   the shared .woocommerce ul.products rule, so this wins on desktop; the
   media queries below win over the shared 2-up at <=991. */
.single-product .related.products ul.products {
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
@media (max-width: 991.98px) {
  .single-product .related.products ul.products { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}
@media (max-width: 575.98px) {
  .single-product .related.products ul.products { gap: 1rem; }
}
/* The tabs/upsells/related blocks are children of div.product's 2-col grid.
   Span them full width so they sit below the gallery+summary row, not trapped
   in one grid column (which cramped related to ~550px wide). */
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .upsells,
.single-product div.product > .related.products { grid-column: 1 / -1; }
/* .bpg-ph-cap: readable against the white comparison letterbox bars but still
   subtle. Translucent white box + thin steel border + dark mono text reads on
   both the white bars and the photo, instead of the muddy dark-on-dark box. */
.bpg-ph-cap {
  color: var(--bpg-charcoal);
  background: rgba(255, 255, 255, .85);
  border: 1px solid var(--bpg-steel);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}