/* ══════════════════════════════════════════════════════════════════
   ABC PEPTIDES shared site header — a hardcoded copy of the homepage HUD shell.
   Used on product.html / status.html / support.html / pay.html /
   bacteriostatic-water.html / peptide-calculator.html so every page
   carries the same white-clinical sticky bar as the homepage. Values are
   hardcoded (not :root vars) so it renders identically regardless of the
   host page's own tokens — the homepage's resolved di- palette, inlined.
═══════════════════════════════════════════════════════════════════ */

/* SKIP LINK — off-screen until focused, so a keyboard or screen-reader user can jump
   the nav instead of tabbing the whole header on every page. Mirrors the homepage's
   own .skip-link rule (store_final.html) so both behave identically. */
.bba-skip{position:absolute;left:-9999px;top:0;z-index:1001;background:#102A4A;color:#fff;padding:12px 16px;border-radius:0 0 6px 0;font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:14px;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.bba-skip:focus{left:0}

/* An in-page jump lands its target UNDERNEATH a sticky bar unless the target reserves room for
   it. The header here is 72px, and #main-content carried no scroll-margin — so "Skip to content",
   the one affordance a keyboard or screen-reader user relies on, scrolled the heading to exactly
   where the header covers it and appeared to do nothing at all. :target covers every other
   in-page anchor on these pages (e.g. #buy on the bacteriostatic-water page) for the same reason. */
#main-content,:target{scroll-margin-top:84px}

/* PROMO — matches homepage .promo-bar: filled deep lab teal + cream type.
   Hardcoded (not :root) so product/status/etc. match store regardless of host tokens. */
.bba-promo{background:#0C6E78;color:#F7F5F1;font-family:'IBM Plex Mono',Consolas,'Courier New',monospace;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:9px 16px;border-bottom:1px solid rgba(4,20,26,.35);line-height:1.4}
.bba-promo a{color:#FFFFFF;text-decoration:none;font-weight:600;white-space:nowrap}
.bba-promo a:hover{text-decoration:underline}
.bba-promo .bba-dot{color:#CD4642}
@media(max-width:520px){.bba-promo{font-size:11px;padding:8px 12px;letter-spacing:.08em}}

/* HEADER BAR — homepage .site-header (store_final.html:4434): glass white,
   hairline base, scrolled state gets the fallback tint + backdrop blur. */
.bba-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.55);height:72px;border-bottom:1px solid rgba(20,26,32,.10);transition:background .32s cubic-bezier(.2,.75,.3,1),-webkit-backdrop-filter .32s cubic-bezier(.2,.75,.3,1),backdrop-filter .32s cubic-bezier(.2,.75,.3,1),border-color .32s cubic-bezier(.2,.75,.3,1)}
.bba-header.bba-scrolled{background:rgba(252,251,248,.90);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border-bottom-color:rgba(20,26,32,.16)}
.bba-header-inner{max-width:1200px;margin:0 auto;padding:0 32px;height:100%;display:flex;align-items:center;gap:40px}
.bba-logo{flex-shrink:0;text-decoration:none;display:flex;align-items:center;min-height:44px}
.bba-logo img{display:block;width:104px;height:auto}

/* NAV — homepage .header-nav a (store_final.html:4436): mono 11px .12em
   uppercase, graphite ink, hover to full-ink; teal underline on hover. */
.bba-nav{display:flex;align-items:center;gap:24px;margin-left:auto}
.bba-nav>a{position:relative;font-family:'IBM Plex Mono',Consolas,'Courier New',monospace;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(20,24,28,.80);text-decoration:none;white-space:nowrap;padding-bottom:3px;transition:color .12s ease}
.bba-nav>a:hover{color:#14181C}
.bba-nav>a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:#0C6E78;transition:width .25s ease}
.bba-nav>a:hover::after{width:100%}
.bba-nav>a:focus-visible{outline:2px solid rgba(12,110,120,.6);outline-offset:2px}

/* ACCOUNT — a quiet first-party account link next to the cart. */
.bba-account{position:relative;color:rgba(20,24,28,.80);text-decoration:none;font-family:'IBM Plex Mono',Consolas,'Courier New',monospace;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;padding-bottom:3px;margin-left:auto}
.bba-account:hover{color:#14181C}
.bba-account::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:#0C6E78;transition:width .25s ease}
.bba-account:hover::after{width:100%}
.bba-account:focus-visible{outline:2px solid rgba(12,110,120,.6);outline-offset:2px}

/* CART — outlined teal pill on the light bar; the count badge is solid teal. */
/* min-height 44px: the pill's own padding gave it a 38px hit area, under the 44px
   floor for a primary touch target — and this is the control that opens the cart. */
.bba-cart{display:flex;align-items:center;justify-content:center;gap:7px;padding:8px 15px;min-height:44px;border:1px solid rgba(12,110,120,.35);border-radius:999px;color:#14181C!important;font-family:'IBM Plex Mono',Consolas,'Courier New',monospace;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;margin-left:16px;position:relative;flex-shrink:0}
.bba-cart:hover{background:rgba(12,110,120,.08);border-color:rgba(12,110,120,.6)}
.bba-cart:focus-visible{outline:2px solid rgba(12,110,120,.6);outline-offset:2px}
.bba-cart-badge{background:#0C6E78;color:#fff;font-family:'IBM Plex Mono',monospace;font-size:11px;line-height:1;min-width:18px;height:18px;border-radius:999px;display:none;align-items:center;justify-content:center;padding:0 5px}
.bba-cart-badge.on{display:inline-flex}

.bba-burger{display:none;background:none;border:none;cursor:pointer;padding:10px;color:rgba(20,24,28,.72);margin-left:12px;flex-shrink:0;min-width:44px;min-height:44px;justify-content:center}
.bba-burger:hover{color:#14181C}
.bba-burger:focus-visible{outline:2px solid rgba(12,110,120,.6);outline-offset:2px;border-radius:4px}

.bba-drawer{display:none;position:absolute;top:72px;left:0;right:0;background:rgba(252,251,248,.98);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border-top:1px solid rgba(20,26,32,.10);border-bottom:1px solid rgba(20,26,32,.10);padding:8px 0 16px;z-index:99}
.bba-drawer.open{display:block}
.bba-drawer a{display:block;font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:15px;font-weight:500;color:rgba(20,24,28,.85);text-decoration:none;padding:12px 28px;border-bottom:1px solid rgba(20,26,32,.06);min-height:44px;box-sizing:border-box}
.bba-drawer a:hover{color:#14181C;background:rgba(20,26,32,.03)}
.bba-drawer a:focus-visible{outline:2px solid rgba(12,110,120,.6);outline-offset:-2px;background:rgba(12,110,120,.06)}

/* 1121–1240px was a dead zone: the nav was still shown but logo + 8 links + account +
   cart exceeded the available width, so every interior page carried a horizontal
   scrollbar (measured: scrollWidth 1191 vs clientWidth 1167, the cart hanging past the
   edge). Tighten the gaps through that band instead of collapsing the nav early. */
@media(max-width:1240px){
  .bba-header-inner{gap:24px}
  .bba-nav{gap:15px}
}
@media(max-width:1120px){
  .bba-nav{display:none}
  .bba-account{margin-left:auto}
  .bba-cart{margin-left:12px}
  .bba-burger{display:flex;align-items:center;margin-left:12px}
}
@media(max-width:640px){
  .bba-header-inner{padding:0 18px;gap:16px}
  .bba-logo img{width:88px}
  .bba-account{display:none}
  .bba-cart{margin-left:auto}
}

/* W2-A11Y residual — keyboard focus + motion for every page sharing this shell.
   Header links already had :focus-visible; body content (forms, CTAs) often did not. */
.bba-skip:focus-visible{left:0;outline:2px solid #2BB9C9;outline-offset:2px}
:where(a,button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"])):focus{outline:none}
:where(a,button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"])):focus-visible{
  outline:2px solid rgba(12,110,120,.72);outline-offset:2px
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion: reduce){
  .bba-header,.bba-nav>a,.bba-nav>a::after,.bba-account,.bba-account::after,.bba-cart,.bba-drawer a{transition:none!important}
}