/* =========================================================================
   HEADER — UNIFIED (single source of truth)
   Loaded LAST on every page, so this file decides the final header look.

   States
   ------
   1) Home, at the very top  -> transparent nav, white text (over the hero)
   2) Home, scrolled         -> solid white nav, black text
   3) Every other page       -> solid white nav, black text (always)
   4) Announcement top bar   -> solid dark, white text (everywhere, always)

   The header is always pinned/visible on every page, exactly like the
   home page. Nav-link underlines appear on hover/keyboard focus only.
   ========================================================================= */

/* ---------- 0. Tokens ---------- */
:root{
  --hdr-bg:        #ffffff;
  --hdr-fg:        #111111;
  --hdr-line:      rgba(0,0,0,.08);
  --hdr-topbar-bg: #111111;
  --hdr-topbar-h:  40px;
  --hdr-topbar-fg: #ffffff;
}

/* ---------- 1. Chrome: always pinned, never slides away ---------- */
html #chrome,
html .chrome{
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 9999 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Neutralise every "hide on scroll down" transform, on every page */
html .chrome,
html #chrome,
html .chrome.is-hidden,
html #chrome.is-hidden,
html .chrome[data-hidden="true"],
html #chrome[data-hidden="true"]{
  transform: none !important;
}

/* ---------- 2. Announcement bar: dark everywhere ---------- */
html #chrome .topbar,
html.is-home #chrome .topbar,
html.is-scrolled #chrome .topbar,
html #chrome:hover .topbar,
html #chrome:focus-within .topbar{
  display: block !important;
  background: var(--hdr-topbar-bg) !important;
  color: var(--hdr-topbar-fg) !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

html #chrome .topbar__inner,
html.is-home #chrome .topbar__inner,
html #chrome:hover .topbar__inner,
html #chrome:focus-within .topbar__inner{
  color: var(--hdr-topbar-fg) !important;
  text-shadow: none !important;
}

/* 2b. …and present on every page, at one fixed height.
   styles.css used to hide the bar on the home page while mobile-topbar-480.css
   put it back on phones, so the header was a different height on the desktop
   home page than anywhere else. One height, one colour, everywhere. */
html #chrome .topbar,
html.is-home #chrome .topbar{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: var(--hdr-topbar-h, 40px) !important;
  min-height: var(--hdr-topbar-h, 40px) !important;
  max-height: var(--hdr-topbar-h, 40px) !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html #chrome .topbar__inner,
html.is-home #chrome .topbar__inner{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--hdr-topbar-h, 40px) !important;
  min-height: var(--hdr-topbar-h, 40px) !important;
  max-height: var(--hdr-topbar-h, 40px) !important;
  padding: 0 20px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html #chrome .topbar__inner span,
html.is-home #chrome .topbar__inner span{
  color: inherit !important;
}

/* ---------- 3. Nav: solid white + black text (default everywhere) ---------- */
html #chrome .nav{
  background: var(--hdr-bg) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hdr-line) !important;
  box-shadow: none !important;
  --text: var(--hdr-fg) !important;
  --link-color: var(--hdr-fg) !important;
  transition: background-color .25s ease, border-color .25s ease !important;
}

/* The links live in an inner <nav class="nav__center nav__links"> element, and
   chrome-sticky-scroll.css styles bare `nav` elements — so when the page was
   scrolled that inner element picked up a white background AND a 1px bottom
   border, drawing a permanent grey rule right under HOME DROPS ABOUT SHOP.
   Everything inside the header bar is transparent and border-free; only the
   header itself carries a background and a hairline. */
html #chrome .nav > .container,
html #chrome .nav .nav__row,
html #chrome .nav nav,
html #chrome .nav .nav__center,
html #chrome .nav .nav__links,
html #chrome .nav .nav__left,
html #chrome .nav .nav__right,
html #chrome .nav .nav__center--brandonly{
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html #chrome .nav .brand,
html #chrome .nav .brand__text,
html #chrome .nav .nav__links a,
html #chrome .nav .nav__center a,
html #chrome .nav .nav__icon,
html #chrome .nav .mobile-menu-btn,
html #chrome .nav .mobile-menu-icon{
  color: var(--hdr-fg) !important;
  opacity: 1 !important;
}

html #chrome .nav .nav__icon svg,
html #chrome .nav .mobile-menu-icon{
  stroke: currentColor !important;
}
html #chrome .nav svg [fill]:not([fill="none"]){
  fill: currentColor !important;
}

/* ---------- 4. Home, at the very top: transparent over the hero ---------- */
@media (min-width: 481px){
  html.is-home:not(.is-scrolled) #chrome .nav:not(:hover):not(:focus-within){
    background: transparent !important;
    border-bottom-color: transparent !important;
    backdrop-filter: none !important;
    --text: #fff !important;
    --link-color: #fff !important;
  }
  html.is-home:not(.is-scrolled) #chrome .nav:not(:hover):not(:focus-within) .brand,
  html.is-home:not(.is-scrolled) #chrome .nav:not(:hover):not(:focus-within) .brand__text,
  html.is-home:not(.is-scrolled) #chrome .nav:not(:hover):not(:focus-within) .nav__links a,
  html.is-home:not(.is-scrolled) #chrome .nav:not(:hover):not(:focus-within) .nav__center a,
  html.is-home:not(.is-scrolled) #chrome .nav:not(:hover):not(:focus-within) .nav__icon{
    color: #fff !important;
  }
}

/* Phones have no hover, so key the transparent state off scroll only */
@media (max-width: 480px){
  html.is-home:not(.is-scrolled) #chrome .nav{
    background: transparent !important;
    border-bottom-color: transparent !important;
    --text: #fff !important;
    --link-color: #fff !important;
  }
  html.is-home:not(.is-scrolled) #chrome .nav .brand,
  html.is-home:not(.is-scrolled) #chrome .nav .brand__text,
  html.is-home:not(.is-scrolled) #chrome .nav .nav__icon,
  html.is-home:not(.is-scrolled) #chrome .nav .mobile-menu-btn,
  html.is-home:not(.is-scrolled) #chrome .nav .mobile-menu-icon{
    color: #fff !important;
  }
}

/* ---------- 5. Nav links: underline on hover / keyboard focus only ---------- */
html #chrome .nav .nav__links a,
html #chrome .nav .nav__center a{
  position: relative !important;
  display: inline-block !important;
  text-decoration: none !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  transition: opacity .2s ease, color .25s ease !important;
}

/* Hidden by default — in EVERY state, including the current page link */
html #chrome .nav .nav__links a::after,
html #chrome .nav .nav__center a::after,
html #chrome .nav .nav__links a[aria-current]::after,
html #chrome .nav .nav__center a[aria-current]::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: -4px !important;
  width: 100% !important;
  height: 2px !important;
  background: currentColor !important;   /* always matches the link colour */
  transform: scaleX(0) !important;
  transform-origin: left center !important;
  transition: transform .25s ease !important;
  pointer-events: none !important;
}

/* Shown only while hovering / focusing that one link */
html #chrome .nav .nav__links a:hover::after,
html #chrome .nav .nav__center a:hover::after,
html #chrome .nav .nav__links a:focus-visible::after,
html #chrome .nav .nav__center a:focus-visible::after{
  transform: scaleX(1) !important;
}

@media (hover: none){
  html #chrome .nav .nav__links a:hover::after,
  html #chrome .nav .nav__center a:hover::after{ transform: scaleX(0) !important; }
}

/* ---------- 6. Cart icon + count badge sit ON TOP of the header ---------- */
html #chrome .nav,
html #chrome .nav > .container,
html #chrome .nav .nav__row,
html #chrome .nav .nav__right{
  overflow: visible !important;   /* never clip the badge */
}

html #chrome .nav .nav__right{
  position: relative !important;
  z-index: 20 !important;
}

html #chrome .nav .nav__icon{
  position: relative !important;
  z-index: 21 !important;
}

html #chrome .nav .nav__icon .cart-badge{
  position: absolute !important;
  z-index: 30 !important;              /* above the header surface */
  background: #ef4444 !important;
  color: #fff !important;
  border: 0 !important;
  outline: 0 !important;
  pointer-events: none !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 9999px !important;
  font-weight: 800 !important;
  text-align: center !important;
}
html #chrome .nav .nav__icon .cart-badge[hidden]{ display: none !important; }

/* Desktop badge */
@media (min-width: 481px){
  html #chrome .nav .nav__icon .cart-badge{
    top: 2px !important; right: 2px !important;
    min-width: 18px !important; height: 18px !important;
    padding: 0 5px !important;
    font-size: 11px !important; line-height: 18px !important;
    transform: translate(20%, -20%) !important;
    box-shadow: 0 0 0 2px var(--hdr-bg) !important;
  }
  html.is-home:not(.is-scrolled) #chrome .nav:not(:hover):not(:focus-within) .nav__icon .cart-badge{
    box-shadow: none !important;
  }
}

/* Phones: keep the badge fully inside the header box so nothing can cover it */
@media (max-width: 480px){
  html #chrome .nav .nav__icon .cart-badge{
    top: 2px !important;
    right: 0 !important;
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 4px !important;
    font-size: 10px !important;
    line-height: 17px !important;
    /* kept fully inside the nav band so nothing can ever clip or cover it */
    transform: translate(25%, 0) !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,.9) !important;
  }
  html.is-home:not(.is-scrolled) #chrome .nav .nav__icon .cart-badge{
    box-shadow: 0 0 0 2px rgba(0,0,0,.25) !important;
  }
}

/* ---------- 7. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html #chrome .nav,
  html #chrome .nav .nav__links a,
  html #chrome .nav .nav__links a::after{
    transition: none !important;
  }
}