/* AminoVita Research — shared pill nav + ticker
   Used on shop, COAs, Library, account, and other research pages.
   Landing (index.html) keeps its own dark-hero variant.
   Self-contained: no CSS custom-property dependencies. */

/* --- Sitewide a11y primitives ---
   Skip-to-main link (WCAG 2.4.1): hidden off-screen until keyboard-
   focused, then anchored to the top-left as a solid ink pill. Every
   page that loads av-pillnav.css gets this for free even if it
   doesn't include av-shell.min.css. */
.av-skip-link{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;background:#14161C;color:#F9F9F6;font-family:'DM Sans',system-ui,sans-serif;font-size:13px;font-weight:600;letter-spacing:.06em;text-decoration:none;border-radius:0 0 8px 0;z-index:10000;}
.av-skip-link:focus{position:fixed;top:0;left:0;width:auto;height:auto;padding:12px 18px;margin:0;overflow:visible;clip:auto;white-space:normal;outline:2px solid #1D9E75;outline-offset:2px;}
/* Global keyboard focus ring (WCAG 2.4.7). :focus-visible fires for
   keyboard nav but stays quiet for mouse/touch users. */
:focus-visible{outline:2px solid #14161C;outline-offset:2px;border-radius:2px;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[role="button"]:focus-visible,[tabindex]:focus-visible{outline:2px solid #14161C;outline-offset:3px;box-shadow:0 0 0 4px rgba(20,22,28,0.12);}

/* Ticker (matches cart.html's inline ticker). text-size-adjust is
   pinned to 100% so iOS Safari doesn't auto-inflate the 11px text
   inside the wide marquee container — that inflation applies
   inconsistently across ticker items and makes some (e.g. "For
   in-vitro research use only") render way bigger than others. */
.av-pillnav-ticker{background:#0D0D0F;overflow:hidden;white-space:nowrap;position:relative;z-index:2;font-family:'DM Sans',system-ui,sans-serif;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
.av-pillnav-ticker-track{display:inline-flex;animation:av-pillnav-tick 135s linear infinite;}
.av-pillnav-ticker-item{display:inline-flex;align-items:center;gap:10px;padding:9px 22px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#A0A0A5;font-weight:500;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
.av-pillnav-ticker-pip{font-size:9px;font-weight:700;letter-spacing:.16em;color:#04241A;background:#1D9E75;padding:2px 8px;border-radius:999px;}
.av-pillnav-ticker-sep{color:#242424;padding:9px 0;}
/* Compliance flag, pinned to the left of the band so it does not drift
   past with the marquee. This is now the site's one standing statement:
   the long restatements on the landing, shop and compound pages were
   removed in favour of it, so it has to render on every page and at
   every width. It links to the full disclaimer because the short form
   is all we show outside the footer and the legal pages. */
.av-pillnav-ticker{display:flex;align-items:stretch;}
.av-pillnav-ruo{flex:0 0 auto;display:inline-flex;align-items:center;padding:9px 20px;font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#C6C6CB;text-decoration:none;border-right:1px solid #242424;transition:color .2s ease;}
.av-pillnav-ruo:hover{color:#fff;}
/* The marquee animates the track element itself, so now that the band
   is a flex row the track needs a clipping parent of its own — without
   it the 6x-repeated copy decides the band's width. */
.av-pillnav-ticker-scroll{flex:1 1 auto;min-width:0;overflow:hidden;}
@keyframes av-pillnav-tick{to{transform:translateX(-50%);}}
/* Respect prefers-reduced-motion — freeze the scroll for vestibular /
   attention-disorder users. The ticker copy is already repeated 6x in
   the track so a static frame still shows the messaging. */
@media (prefers-reduced-motion: reduce){
  .av-pillnav-ticker-track{animation:none;}
}

.av-pillnav{position:relative;z-index:50;background:transparent;pointer-events:none;font-family:'DM Sans',system-ui,sans-serif;}
/* Dark nav variant — extends the ticker's ink so the top of interior
   pages reads as one continuous dark surface instead of dark → white
   sliver → page content. Pills KEEP their liquid-glass styling — the
   bright semi-transparent whites read as premium floating pills over
   the black band, mirroring how the landing looks over its dark hero. */
.av-pillnav.av-pillnav--dark{background:#0D0D0F;}
.av-pillnav .nav-full,.av-pillnav .nav-compact{pointer-events:none;}
.av-pillnav .nav-pill,.av-pillnav .wordmark,.av-pillnav .compact-pill,.av-pillnav .menu-panel{pointer-events:auto;}
.av-pillnav .nav-inner{position:relative;display:flex;align-items:center;justify-content:flex-end;height:85px;max-width:1440px;margin:0 auto;padding:0 40px;}
/* Liquid glass — matches the landing page formula. Subtle white gradient
   over a dark backdrop with saturated blur; text/icons render white so
   the pills read as premium dark-glass floating over the ink band. */
.av-pillnav .nav-pill{display:flex;align-items:center;gap:2px;padding:6px;border-radius:999px;background:linear-gradient(135deg,rgba(255,255,255,0.16),rgba(255,255,255,0.06));border:1px solid rgba(255,255,255,0.22);backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);box-shadow:0 1px 0 rgba(255,255,255,0.35) inset, 0 -1px 1px rgba(0,0,0,0.15) inset, 0 8px 32px rgba(0,0,0,0.24);transition:background .35s ease,border-color .35s ease,box-shadow .35s ease;}
.av-pillnav .nav-pill:hover{background:linear-gradient(135deg,rgba(255,255,255,0.22),rgba(255,255,255,0.10));border-color:rgba(255,255,255,0.32);}
.av-pillnav .nav-link{font-size:12.5px;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.9);padding:9px 12px;border-radius:999px;transition:color .25s ease,background .25s ease,box-shadow .25s ease;white-space:nowrap;background:none;border:0;cursor:pointer;font-family:inherit;text-decoration:none;}
.av-pillnav .nav-link:hover{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.08));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 2px 8px rgba(0,0,0,.2);}
.av-pillnav .back-pill{padding:11px 20px 11px 16px;gap:9px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.9);display:flex;align-items:center;text-decoration:none;margin-right:auto;}
.av-pillnav .back-pill:hover{background:linear-gradient(135deg,rgba(255,255,255,0.22),rgba(255,255,255,0.10));border-color:rgba(255,255,255,.32);}
.av-pillnav .wordmark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;padding:8px 24px;border-radius:999px;background:linear-gradient(135deg,rgba(255,255,255,0.16),rgba(255,255,255,0.06));border:1px solid rgba(255,255,255,0.22);backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);box-shadow:0 1px 0 rgba(255,255,255,0.35) inset, 0 -1px 1px rgba(0,0,0,0.15) inset, 0 8px 32px rgba(0,0,0,0.24);text-decoration:none;}
.av-pillnav .wordmark-img{height:52px;width:auto;display:block;}
.av-pillnav .nav-right{display:flex;align-items:center;gap:10px;}
/* The wordmark is absolutely centred, so it cannot push the nav pill
   out of the way and the two overlap once the pill gets wide enough.
   Below this width drop it back into flow and let flex space them.
   Floor is 769px — under that the compact burger takes over. */
@media(min-width:769px) and (max-width:1380px){
  .av-pillnav .nav-inner{justify-content:space-between;}
  .av-pillnav .wordmark{position:static;transform:none;}
}
/* Narrow desktop: shrink the wordmark so the three groups still
   clear each other before the compact burger takes over. */
@media(min-width:769px) and (max-width:900px){
  .av-pillnav .wordmark{padding:6px 16px;}
  .av-pillnav .wordmark-img{height:40px;}
}
.av-pillnav .nav-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.92);cursor:pointer;transition:background .25s ease,box-shadow .25s ease;position:relative;background:transparent;border:0;padding:0;text-decoration:none;}
.av-pillnav .nav-icon:hover{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 2px 8px rgba(0,0,0,.2);}
.av-pillnav .cart-badge{position:absolute;top:0;right:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;border:1.2px solid currentColor;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;background:transparent;color:rgba(255,255,255,.92);}
.av-pillnav .cart-badge:empty{display:none;}

/* Mobile: full nav collapses to a compact pill — cart icon + hamburger only.
   Sizes tuned to match the hand-rolled compact-pill in index.html + cart.html
   exactly so every page's mobile nav pill renders identically. */
.av-pillnav .compact-pill{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.6);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 10px 32px rgba(20,22,28,.14), 0 2px 6px rgba(20,22,28,.05);}
.av-pillnav .compact-cart{position:relative;display:flex;align-items:center;justify-content:center;width:34px;height:34px;color:#14161C;border-radius:50%;transition:background .2s ease;text-decoration:none;}
.av-pillnav .compact-cart:hover{background:rgba(20,22,28,.06);}
.av-pillnav .compact-cart-badge{position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#14161C;color:#fff;font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;}
.av-pillnav .compact-cart-badge:empty{display:none;}
.av-pillnav .compact-burger{width:38px;padding:0 12px;display:flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;font-family:inherit;color:#14161C;transition:background .2s ease;}
.av-pillnav .compact-burger:hover{background:rgba(20,22,28,.06);}
.av-pillnav .burger-lines{display:inline-flex;flex-direction:column;gap:4px;width:16px;}
.av-pillnav .burger-lines span{display:block;height:1.6px;background:#14161C;border-radius:2px;}
/* Full-height mobile drawer — matches the wellness-side pattern. Lives
   outside .av-pillnav so it can overlay the viewport. */
.av-pillnav-overlay{position:fixed;inset:0;background:rgba(20,22,28,.5);z-index:998;opacity:0;pointer-events:none;transition:opacity .28s ease;}
.av-pillnav-overlay[hidden]{display:none;}
.av-pillnav-overlay.open{opacity:1;pointer-events:auto;}
.av-pillnav-drawer{position:fixed;top:0;right:0;bottom:0;width:86%;max-width:360px;background:#F9F9F6;z-index:999;transform:translateX(100%);transition:transform 280ms cubic-bezier(0.22,1,0.36,1);display:flex;flex-direction:column;box-shadow:-8px 0 32px rgba(20,22,28,.18);overflow-y:auto;font-family:'DM Sans',system-ui,sans-serif;}
.av-pillnav-drawer[hidden]{display:none;}
.av-pillnav-drawer.open{transform:translateX(0);}
.av-pillnav-drawer .drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid rgba(20,22,28,.08);}
.av-pillnav-drawer .drawer-title{font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:#14161C;}
.av-pillnav-drawer .drawer-close{background:transparent;border:none;cursor:pointer;color:#14161C;padding:6px;display:flex;align-items:center;justify-content:center;}
.av-pillnav-drawer .drawer-links{display:flex;flex-direction:column;padding:8px 0;}
.av-pillnav-drawer .drawer-links a{display:block;padding:18px 20px;font-size:16px;font-weight:500;color:#14161C;text-decoration:none;border-bottom:1px solid rgba(20,22,28,.06);transition:background .16s ease,color .16s ease;}
.av-pillnav-drawer .drawer-links a:hover,.av-pillnav-drawer .drawer-links a:active{background:rgba(20,22,28,.04);}
.av-pillnav-drawer .drawer-divider{height:1px;background:rgba(20,22,28,.10);margin:8px 20px;}
/* CTA is pushed to the bottom via margin-top:auto — the drawer is a
   column flex, so the button hugs the bottom regardless of link count. */
.av-pillnav-drawer .drawer-cta{display:flex;align-items:center;justify-content:center;gap:8px;margin:auto 20px 32px;padding:16px 20px;background:#14161C;color:#F9F9F6;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border-radius:999px;transition:background .18s ease,color .18s ease;}
.av-pillnav-drawer .drawer-cta:hover{background:#1D9E75;color:#04241A;}
.av-pillnav-drawer .drawer-cta svg{flex:0 0 auto;}
/* nav-compact is fixed to the viewport so it stays glued to the top of
   the window as the page scrolls. Default position (mobile) is
   top-right — the desktop rule below re-anchors it top-center so the
   scroll-collapse transition is a pure fade-in-place, not a slide. */
.av-pillnav .nav-compact{position:fixed;right:14px;top:14px;opacity:0;pointer-events:none;z-index:60;transition:opacity .38s cubic-bezier(.4,0,.2,1), transform .38s cubic-bezier(.4,0,.2,1);will-change:opacity,transform;}
.av-pillnav .nav-full{transition:opacity .38s cubic-bezier(.4,0,.2,1);}

/* Compact AV monogram between cart and burger — only rendered when
   pillnav is instantiated with data-scroll-collapse. Desktop-only:
   hidden on mobile so the compact-pill doesn't crowd. */
.av-pillnav .compact-logo{display:flex;align-items:center;justify-content:center;padding:0 8px;line-height:0;}
.av-pillnav .compact-logo-img{height:28px;width:auto;display:block;}

/* Scroll-collapse mode on desktop: pre-position the compact pill at
   its final top-center anchor (starting slightly scaled down + faded
   out), then transition ONLY opacity + scale when mode-scroll-compact
   toggles. No horizontal slide — matches the landing page feel where
   the pill fades into place at the same spot it lands. */
@media(min-width:769px){
  .av-pillnav .nav-compact{left:50%;right:auto;top:23px;transform:translateX(-50%) scale(.96);}
  .av-pillnav.mode-scroll-compact .nav-full{opacity:0;pointer-events:none;}
  .av-pillnav.mode-scroll-compact .nav-compact{opacity:1;pointer-events:auto;transform:translateX(-50%) scale(1);}
  .av-pillnav.mode-scroll-compact .nav-compact .compact-pill{pointer-events:auto;}
}

@media(max-width:768px){
  /* The scrolling marquee stays hidden on mobile — it's 42px of
     unreadable moving text on a screen that can't spare it. The
     compliance flag does not: it is the header statement now, so the
     band survives and collapses to just that, centred. The old note
     here said the RUO bit "lives in the footer and product listings",
     which is exactly what stopped being true. */
  .av-pillnav-ticker{display:flex;}
  .av-pillnav-ticker-scroll{display:none;}
  .av-pillnav-ruo{flex:1 1 auto;justify-content:center;border-right:0;padding:7px 14px;font-size:9px;letter-spacing:.18em;}
  .av-pillnav .nav-inner{height:64px;padding:0 14px;}
  .av-pillnav .nav-full{opacity:0;pointer-events:none;visibility:hidden;}
  /* Cleared past the flag band. The pill is fixed to the viewport, so
     at scroll-top it would otherwise sit on top of the statement. */
  .av-pillnav .nav-compact{top:40px;opacity:1;pointer-events:auto;}
  .av-pillnav .nav-compact .compact-pill{pointer-events:auto;}
  .av-pillnav .compact-logo{display:none;}

  /* Drop the dark strip on mobile so the pill floats on the page
     bg instead of sitting on a heavy black band. Flip the compact
     pill to a liquid-glass ink treatment — translucent dark tint
     over a backdrop blur so the pill picks up whatever's behind it
     (cream on shop, subtle warmth from imagery, etc.) with premium
     inset highlights. Pages that need the strip (dark hero right
     below the pill) opt back in with body.pillnav-dark-hero. */
  .av-pillnav.av-pillnav--dark{background:transparent;}
  .av-pillnav .compact-pill{
    background:linear-gradient(135deg,rgba(20,22,28,0.72),rgba(20,22,28,0.55));
    border:1px solid rgba(20,22,28,0.28);
    backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.30) inset,
      0 -1px 1px rgba(0,0,0,0.18) inset,
      0 10px 32px rgba(20,22,28,0.22);
  }
  .av-pillnav .compact-cart,
  .av-pillnav .compact-burger{color:#FFFFFF;}
  .av-pillnav .burger-lines span{background:#FFFFFF;}
  /* Cart badge — a plain white pill, on every page. Affiliate pages
     used to override this with gold; gold was retired sitewide, so
     there is no second treatment to opt into any more. */
  .av-pillnav .compact-cart-badge{background:#FFFFFF;color:#14161C;border-color:#FFFFFF;}

  /* Opt-in: pages with a dark ink hero directly under the pillnav get
     the strip back for continuity. Only the affiliate pages carry this
     class. It restyles the nav chrome and nothing else — the cart badge
     deliberately inherits the white treatment above. */
  body.pillnav-dark-hero .av-pillnav.av-pillnav--dark{background:#0D0D0F;}
  body.pillnav-dark-hero .av-pillnav .compact-pill{
    background:linear-gradient(135deg,rgba(255,255,255,0.16),rgba(255,255,255,0.06));
    border-color:rgba(255,255,255,0.22);
    backdrop-filter:blur(26px) saturate(180%);
    -webkit-backdrop-filter:blur(26px) saturate(180%);
    box-shadow:0 1px 0 rgba(255,255,255,0.35) inset, 0 -1px 1px rgba(0,0,0,0.15) inset, 0 8px 32px rgba(0,0,0,0.24);
  }
  body.pillnav-dark-hero .av-pillnav .compact-cart,
  body.pillnav-dark-hero .av-pillnav .compact-burger{color:rgba(255,255,255,.92);}
  body.pillnav-dark-hero .av-pillnav .burger-lines span{background:#14161C;}
}