/* RA Lab v2 — header */

.brpdp-h, .brpdp-h *, .brpdp-h *::before, .brpdp-h *::after { box-sizing: border-box; }

.brpdp-h {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  background: var(--brpdp-bg);
  color: var(--brpdp-ink);
  border-bottom: 1px solid var(--brpdp-ink);
  font-family: var(--brpdp-sans);
  -webkit-font-smoothing: antialiased;
  z-index: 100;
}

/* Header is non-sticky (normal flow); content needs no fixed-header offset. */
body.page-template-page-v2 { padding-top: 0px !important; }
@media (max-width: 960px) { body.page-template-page-v2 { padding-top: 0px !important; } }
@media (max-width: 540px) { body.page-template-page-v2 { padding-top: 0px !important; } }

.brpdp-h__shell {
  max-width: var(--brpdp-max);
  margin: 0 auto;
  padding: 0 var(--brpdp-gutter);
  height: 72px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 40px;
}

@media (max-width: 960px) { .brpdp-h__shell { height: 60px; gap: 16px; } }
@media (max-width: 540px) { .brpdp-h__shell { height: 56px; } }

/* Logo */
.brpdp-h__logo {
  font-family: var(--brpdp-sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--brpdp-ink);
  text-decoration: none;
  white-space: nowrap;
}
.brpdp-h__logo b { display: block; font-weight: 500; }
.brpdp-h__logo em {
  display: block;
  font-style: normal;
  font-weight: 500;
  color: var(--brpdp-ink-2);
}

/* Primary nav (desktop) */
.brpdp-h__nav { display: flex; align-items: center; justify-content: flex-start; gap: 40px; }
.brpdp-h__nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 40px; }
.brpdp-h__nav a {
  color: var(--brpdp-ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  position: relative;
  padding: 8px 0;
  transition: color .15s ease;
}
.brpdp-h__nav a:hover,
.brpdp-h__nav a:focus-visible { color: var(--brpdp-accent); }
.brpdp-h__nav a:hover::after,
.brpdp-h__nav a:focus-visible::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--brpdp-accent);
}

/* Mega-menu panel (rendered by walker as a sibling <ul>) */
.brpdp-h__nav li.menu-item-has-children { position: relative; }
.brpdp-h__nav .sub-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 720px;
  background: var(--brpdp-paper);
  border: 1px solid var(--brpdp-ink);
  border-radius: 12px;
  padding: 24px;
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  box-shadow: 0 12px 40px rgba(17,17,16,0.10);
  list-style: none;
}
.brpdp-h__nav .sub-menu[data-open="true"] { display: grid; }
.brpdp-h__nav .sub-menu li { margin: 0; }
.brpdp-h__nav .sub-menu a {
  display: block;
  padding: 12px 0;
  font-size: 15px;
  font-weight: 500;
}

/* Right actions */
.brpdp-h__actions { display: flex; align-items: center; gap: 20px; }
.brpdp-h__icon-btn {
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--brpdp-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.brpdp-h__icon-btn:hover { color: var(--brpdp-accent); }
.brpdp-h__icon-btn svg { width: 18px; height: 18px; display: block; }

.brpdp-h__cart { position: relative; }
.brpdp-h__cart-count {
  position: absolute;
  right: 2px;
  bottom: 2px;
  background: var(--brpdp-accent);
  color: var(--brpdp-accent-ink);
  font-family: var(--brpdp-mono);
  font-size: 10px;
  line-height: 1;
  border-radius: 999px;
  min-width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

.brpdp-h__account {
  font-family: var(--brpdp-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brpdp-ink);
  text-decoration: none;
  white-space: nowrap;
}
.brpdp-h__account:hover { color: var(--brpdp-accent); }

/* Search drawer */
.brpdp-h__search {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .2s ease-out;
  background: var(--brpdp-bg-2);
  border-bottom: 1px solid var(--brpdp-line);
}
.brpdp-h__search[data-open="true"] { grid-template-rows: 1fr; }
.brpdp-h__search > div { overflow: hidden; }
.brpdp-h__search form {
  max-width: var(--brpdp-max);
  margin: 0 auto;
  padding: 16px var(--brpdp-gutter);
  display: flex;
  align-items: center;
  gap: 16px;
}
.brpdp-h__search input[type="search"] {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: var(--brpdp-mono);
  font-size: 16px;
  color: var(--brpdp-ink);
  padding: 8px 0;
}
.brpdp-h__search input::placeholder { color: var(--brpdp-muted); }

/* Hamburger + mobile drawer */
.brpdp-h__hamburger { display: none; }
@media (max-width: 960px) {
  .brpdp-h__nav, .brpdp-h__actions { display: none; }
  .brpdp-h__shell { grid-template-columns: auto 1fr auto; }
  .brpdp-h__hamburger { display: inline-flex; margin-left: auto; }
}

.brpdp-h__drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(420px, 100vw);
  background: var(--brpdp-bg);
  transform: translateX(100%);
  transition: transform .25s ease-out;
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding: 24px var(--brpdp-gutter);
}
.brpdp-h__drawer[data-open="true"] { transform: translateX(0); }
.brpdp-h__drawer-close {
  align-self: flex-end;
  background: transparent;
  border: 0;
  font-family: var(--brpdp-mono);
  font-size: 18px;
  cursor: pointer;
  color: var(--brpdp-ink);
}
.brpdp-h__drawer ul { list-style: none; margin: 24px 0 0; padding: 0; }
.brpdp-h__drawer ul a {
  display: block;
  font-family: var(--brpdp-sans);
  font-size: 24px;
  font-weight: 500;
  color: var(--brpdp-ink);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid var(--brpdp-line);
}
.brpdp-h__drawer details summary {
  list-style: none;
  cursor: pointer;
  font-size: 24px;
  font-weight: 500;
  padding: 12px 0;
  border-bottom: 1px solid var(--brpdp-line);
}
.brpdp-h__drawer details summary::-webkit-details-marker { display: none; }
.brpdp-h__drawer details[open] summary { color: var(--brpdp-accent); }
.brpdp-h__drawer details .sub-menu {
  list-style: none;
  padding: 8px 0 8px 16px;
  margin: 0;
}
.brpdp-h__drawer details .sub-menu a { font-size: 18px; font-weight: 400; }
.brpdp-h__drawer-bottom {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid var(--brpdp-line);
  font-family: var(--brpdp-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.brpdp-h__drawer-bottom a { color: var(--brpdp-ink); text-decoration: none; }
.brpdp-h__drawer-bottom a:hover { color: var(--brpdp-accent); }

body.brpdp-no-scroll { overflow: hidden; }

.brpdp-h__overlay {
  position: fixed;
  inset: 0;
  background: rgba(17,17,16,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease-out;
  z-index: 150;
}
.brpdp-h__overlay[data-open="true"] { opacity: 1; pointer-events: auto; }

/* ─────────────────────────────────────────────────────────────────────
 * v2-page-only overrides — hide site-wide plugin chrome that clashes
 * with the redesigned page. Scoped to .page-template-page-v2 so other
 * pages keep their existing chrome unchanged.
 * ───────────────────────────────────────────────────────────────────── */

/* MTS Sticky Notification Bar — the red ON SALE NOW banner above the header */
body.page-template-page-v2 .mtsnb,
body.page-template-page-v2 #mtsnb-119355,
body.page-template-page-v2 .mtsnb-show,
body.page-template-page-v2 .mtsnb-hide { display: none !important; }
body.page-template-page-v2.has-mtsnb { padding-top: 0 !important; }

/* reCAPTCHA invisible-mode error badge / floating widget on v2 pages */
body.page-template-page-v2 .grecaptcha-badge,
body.page-template-page-v2 iframe[src*="recaptcha"] { display: none !important; }

/* Hide v2 mobile drawer / overlay on desktop. The CSS already used
 * transform:translateX(100%) to slide it off-screen, but the off-screen
 * position created a 480px horizontal overflow on Playwright fullPage
 * screenshots and could cause unwanted horizontal scroll. Make it
 * display:none above 960px so it doesn't exist in the box model. */
.brpdp-h__drawer,
.brpdp-h__overlay { display: none; }
@media (max-width: 960px) {
  .brpdp-h__drawer { display: flex; }
  .brpdp-h__overlay { display: block; }
}

/* Real header logo */
.brpdp-h__logo-img { display: block; height: 40px; width: auto; }
@media (max-width: 540px) { .brpdp-h__logo-img { height: 32px; } }

/* ── v2 fixed-chrome stack (2026-06-05) ─────────────────────────────
 * The v2 header (.brpdp-h) and the WP admin bar (#wpadminbar) are
 * position:fixed; the notification bar (.mtsnb) ships position:absolute
 * (anchored to <body>, so it scrolls and can't stay stacked under the fixed
 * header). Pin the notice bar too and stack all three so nothing is hidden:
 *   admin bar -> notice bar -> header -> content.
 *
 *   --brpdp-adminbar-h  : admin-bar height (CSS only; 0 when logged out)
 *   --brpdp-noticebar-h : notification-bar height (set by brpdp-chrome-stack.js)
 *   --brpdp-header-h    : v2 header height (per breakpoint)
 * ─────────────────────────────────────────────────────────────────── */
:root {
  --brpdp-adminbar-h: 0px;
  --brpdp-noticebar-h: 0px;
  --brpdp-header-h: 72px;
}
@media (max-width: 960px) { :root { --brpdp-header-h: 60px; } }
@media (max-width: 540px) { :root { --brpdp-header-h: 56px; } }

/* Admin-bar height is a known constant; expose it without JS. */
body.admin-bar { --brpdp-adminbar-h: 32px; }
@media screen and (max-width: 782px) { body.admin-bar { --brpdp-adminbar-h: 46px; } }

/* Pin the notification bar directly below the admin bar (it ships
 * position:absolute, which scrolls away and can't stack under a fixed header). */
.mtsnb.mtsnb-top { position: fixed !important; top: var(--brpdp-adminbar-h) !important; }

/* Header top offset neutralized (non-sticky, normal flow). */
.brpdp-h { top: 0; }

/* Page content clears the fixed notification bar + header. (The admin bar is
 * already accounted for by WordPress's html{margin-top}.) Overrides both the
 * plugin's inline body padding-top and the rollout's earlier flat offset. */
body.brpdp-v2:not(.page-template-page-v2) {
  padding-top: var(--brpdp-noticebar-h) !important;
}

/* ── v2 chrome above the Qode content wrapper (2026-06-05) ───────────
 * The v2 header/overlay/drawer render OUTSIDE .qodef-wrapper, which Qode
 * gives z-index:1000. With the original v2 z-indexes (100/150/200) the
 * wrapper — and its leftover full-viewport .qodef-cover overlay — painted
 * over the fixed header, blocking hovers and letting content scroll over it.
 * Lift the fixed chrome above the wrapper and disable the unused cover.
 * (Notice bar 9999 and admin bar 99999 stay above the header.)
 * ─────────────────────────────────────────────────────────────────── */
.brpdp-h         { z-index: 1100; }
.brpdp-h__overlay { z-index: 1190; }
.brpdp-h__drawer  { z-index: 1200; }
.qodef-cover      { pointer-events: none !important; }

/* ── vertical dropdowns (2026-06-05) ────────────────────────────────
 * The mega-panel shipped as a 720px 4-column grid; list sub-items in a
 * single vertical column instead. */
.brpdp-h__nav .sub-menu {
  min-width: 240px;
  grid-template-columns: none;
  gap: 0;
  padding: 10px 8px;
}
.brpdp-h__nav .sub-menu[data-open="true"] { display: block; }
.brpdp-h__nav .sub-menu a { padding: 10px 16px; white-space: nowrap; }

/* No hover/focus underline on dropdown (sub-menu) links — keep it on top-level nav only. */
.brpdp-h__nav .sub-menu a:hover::after,
.brpdp-h__nav .sub-menu a:focus-visible::after { display: none; }

/* Links always keep the pointer cursor (site-wide) — prevents the cursor from
 * flickering to the default arrow while hovering a link and its contents. */
a[href], a[href] *, a[href]::before, a[href]::after { cursor: pointer !important; }

/* Right-side control cluster: give the whole group (and the gaps between the
 * small icons) the pointer cursor, so it can't flip to the default arrow as
 * the mouse crosses the cluster. The controls already recolor on hover. */
.brpdp-h__actions { cursor: pointer; }

/* ── eliminate legacy per-page content-top gap under the v2 header (2026-06-06) ──
 * Pages carry a Qode `qodef_page_content_padding` meta (e.g. "50px 20px 0px 20px")
 * that Qode emits as inline CSS top-padding on the content container. Under the old
 * Qode chrome this padding sat BELOW the page title area and read as intentional;
 * the v2 site-wide rollout removed that title area, so the padding now renders as a
 * bare white gap directly under the fixed header (measured 30–70px, varying per
 * page). Zero ONLY the top padding (keep side padding) on v2-wrapped pages so
 * content/heroes sit flush under the header. Full-bleed page-v2 template excluded.
 * Reversible: delete this block (theme mtime ?ver= auto-busts the cache). */
body.brpdp-v2:not(.page-template-page-v2) .qodef-content .qodef-content-inner > .qodef-container > .qodef-container-inner,
body.brpdp-v2:not(.page-template-page-v2) .qodef-content .qodef-content-inner > .qodef-full-width > .qodef-full-width-inner {
  padding-top: 0 !important;
}