/* 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) */
.av-pillnav-ticker{background:#0D0D0F;overflow:hidden;white-space:nowrap;position:relative;z-index:2;font-family:'DM Sans',system-ui,sans-serif;}
.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;}
.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;}
@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;}
.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:space-between;height:85px;max-width:1440px;margin:0 auto;padding:0 40px;}
.av-pillnav .nav-pill{display:flex;align-items:center;gap:2px;padding:6px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.58) 0%,rgba(255,255,255,.28) 100%);border:1px solid rgba(255,255,255,.65);backdrop-filter:blur(36px) saturate(200%);-webkit-backdrop-filter:blur(36px) saturate(200%);box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(20,22,28,.05), 0 10px 32px rgba(20,22,28,.12), 0 2px 6px rgba(20,22,28,.04);transition:box-shadow .3s ease;}
.av-pillnav .nav-pill:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(20,22,28,.05), 0 14px 40px rgba(20,22,28,.16), 0 4px 10px rgba(20,22,28,.06);}
.av-pillnav .nav-link{font-size:12.5px;font-weight:500;letter-spacing:.02em;color:#565B66;padding:9px 17px;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,.75),rgba(255,255,255,.45));color:#14161C;box-shadow:inset 0 1px 0 rgba(255,255,255,1), 0 2px 8px rgba(20,22,28,.08);}
.av-pillnav .back-pill{padding:11px 20px 11px 16px;gap:9px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#14161C;display:flex;align-items:center;text-decoration:none;}
.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(180deg,rgba(255,255,255,.58) 0%,rgba(255,255,255,.28) 100%);border:1px solid rgba(255,255,255,.65);backdrop-filter:blur(36px) saturate(200%);-webkit-backdrop-filter:blur(36px) saturate(200%);box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(20,22,28,.05), 0 10px 32px rgba(20,22,28,.12), 0 2px 6px rgba(20,22,28,.04);text-decoration:none;}
.av-pillnav .wordmark-img{height:43px;width:auto;display:block;}
.av-pillnav .nav-right{display:flex;align-items:center;gap:10px;}
.av-pillnav .nav-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#14161C;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,.75),rgba(255,255,255,.45));box-shadow:inset 0 1px 0 rgba(255,255,255,1), 0 2px 8px rgba(20,22,28,.08);}
.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;}
.av-pillnav .cart-badge:empty{display:none;}

/* Mobile: full nav collapses to a compact pill — cart icon + hamburger only. */
.av-pillnav .compact-pill{display:flex;align-items:center;gap:4px;padding:6px 10px;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);}
/* 44x44 minimum touch target (WCAG 2.5.5 / 2.5.8). Visual glyph stays
   small; the tap area matches guidance. */
.av-pillnav .compact-cart{position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:44px;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:4px;right:4px;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:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;font-family:inherit;color:#14161C;border-radius:50%;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:#D4AF37;}
.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;}
.av-pillnav .nav-compact{position:absolute;right:14px;top:14px;opacity:0;pointer-events:none;}

@media(max-width:768px){
  .av-pillnav .nav-inner{height:64px;padding:0 14px;}
  .av-pillnav .nav-full{opacity:0;pointer-events:none;visibility:hidden;}
  .av-pillnav .nav-compact{opacity:1;pointer-events:auto;}
  .av-pillnav .nav-compact .compact-pill{pointer-events:auto;}
}