/* /styles/chrome-sticky-scroll.css (v4)
   GOAL:
   - Desktop: do NOTHING (let header.css handle slide-away)
   - Mobile: keep header visible; when scrolled -> white bg + black content
   - Keep overlays above chrome (all screens)
*/

/* =========================
   MOBILE ONLY
   ========================= */
@media (max-width: 480px){

  /* Keep chrome pinned on mobile */
  html #chrome,
  html .chrome{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    transform: translate3d(0,0,0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* On mobile we DON'T want slide-away; if .is-hidden ever appears, neutralize it */
  html #chrome.is-hidden,
  html .chrome.is-hidden{
    transform: translate3d(0,0,0) !important;
  }

  /* Mobile "scrolled" look: white header + black content */
  html.is-scrolled #chrome .topbar,
  html.is-scrolled #chrome .nav{
    background: #fff !important;
    color: #111 !important;
 
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html.is-scrolled #chrome .nav *,
  html.is-scrolled #chrome .topbar *{
    color: #111 !important;
  }

  /* SVGs follow currentColor */
  html.is-scrolled #chrome svg{
    stroke: currentColor !important;
  }
  html.is-scrolled #chrome svg [fill]:not([fill="none"]){
    fill: currentColor !important;
  }
}

/* =========================
   OVERLAYS ABOVE CHROME (ALL SCREENS)
   ========================= */
html .cart-overlay{ z-index: 2147483646 !important; }
html .cart-drawer { z-index: 2147483647 !important; }

html .mobile-drawer__overlay{ z-index: 2147483646 !important; }
html .mobile-drawer        { z-index: 2147483647 !important; }
/* =========================================================
   KEEP TOPBAR GREY EVEN WHEN HEADER/NAV TURNS WHITE
   ========================================================= */

/* default */
#chrome .topbar{
  background: #F1F1F1 !important;
  color: #111 !important;
}
#chrome .topbar__inner,
#chrome .topbar__inner *{
  color: #111 !important;
}

/* when scrolled (your nav can go white, but topbar stays grey) */
html.is-scrolled #chrome .topbar{
  background: #F1F1F1 !important;
  color: #111 !important;
}
html.is-scrolled #chrome .topbar__inner,
html.is-scrolled #chrome .topbar__inner *{
  color: #111 !important;
}
/* =========================================================
   SCROLLED HEADER = COLOR ONLY (no stroke, no weight changes)
   ========================================================= */

/* NAV: white bg, NO borders/shadows/filters */
html.is-scrolled #chrome .nav{
  background: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Topbar must STAY grey even when scrolled */
html.is-scrolled #chrome .topbar{
  background: #F1F1F1 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Only change color (and kill any “stroke”/shadow effects) */
html.is-scrolled #chrome .nav,
html.is-scrolled #chrome .nav *{
  color: #111 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

/* Lock weights so nothing looks “bolder” */
html.is-scrolled #chrome .brand__text{ font-weight: 800 !important; } /* same as your normal */
html.is-scrolled #chrome .nav__center a,
html.is-scrolled #chrome .nav__links a{ font-weight: 400 !important; } /* your Poptein weight */

/* SVG icons follow currentColor (hamburger uses stroke; others use fill) */
html.is-scrolled #chrome .mobile-menu-icon{ stroke: currentColor !important; }
html.is-scrolled #chrome svg{ color: currentColor !important; }
html.is-scrolled #chrome svg [fill]:not([fill="none"]){ fill: currentColor !important; }
html.is-scrolled #chrome svg [stroke]:not([stroke="none"]){ stroke: currentColor !important; }

/* Remove the “thin line” seam between topbar and nav without changing layout */
html.is-scrolled #chrome .nav{ margin-top: -1px !important; }
/* =========================================================
   WHITE HEADER STATE: COLOR ONLY (NO STROKE / NO BOLD LOOK)
   ========================================================= */

/* NAV goes white, TOPBAR stays grey */
html.is-scrolled #chrome .nav{
  background: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* keep topbar always grey (even while scrolled) */
#chrome .topbar,
html.is-scrolled #chrome .topbar{
  background: #F1F1F1 !important;
  background-image: none !important; /* kill gradients that can look like lines */
  border: 0 !important;              /* IMPORTANT: removes that “thin line” */
  box-shadow: none !important;
  outline: 0 !important;
}

/* kill ALL “stroke” style effects inside the header when scrolled */
html.is-scrolled #chrome,
html.is-scrolled #chrome *{
  text-shadow: none !important;
  filter: none !important;
  -webkit-text-stroke: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* only switch colors (no weight changes) */
html.is-scrolled #chrome .nav,
html.is-scrolled #chrome .nav *{
  color: #111 !important;
}

html.is-scrolled #chrome .topbar,
html.is-scrolled #chrome .topbar *{
  color: #111 !important;
}

/* SVGs follow currentColor */
html.is-scrolled #chrome svg [fill]:not([fill="none"]){ fill: currentColor !important; }
html.is-scrolled #chrome svg [stroke]:not([stroke="none"]){ stroke: currentColor !important; }

/* seam killer between topbar and nav (GPU hairline) */
#chrome .nav{ margin-top: -1px !important; }
/* =========================================================
   STOP “BOLD/STROKE” ON SCROLL — lock header rendering
   Put at VERY END of /styles/chrome-sticky-scroll.css
   ========================================================= */

/* 1) Color-only scrolled state (no borders/shadows/filters) */
html.is-scrolled #chrome .nav{
  background:#fff !important;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  filter:none !important;
  text-shadow:none !important;
  -webkit-text-stroke:0 !important;
}

/* Keep topbar grey always (and NO border line) */
#chrome .topbar,
html.is-scrolled #chrome .topbar{
  background:#F1F1F1 !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  filter:none !important;
}

/* 2) Kill ANY outline/shadow effects inside chrome (these cause “stroke”) */
#chrome, #chrome *{
  text-shadow:none !important;
  filter:none !important;
  -webkit-text-stroke:0 !important;
}

/* 3) Hard-lock the actual weights so nothing can “feel” heavier */
#chrome .brand__text{ font-weight:800 !important; }     /* your normal */
#chrome .topbar__inner{ font-weight:600 !important; }   /* your normal */
#chrome .nav__links a{ font-weight:400 !important; }    /* keep links from becoming 700 */
#chrome { font-synthesis: none !important; }            /* prevents fake bold */

/* 4) MOBILE: prevent GPU re-rasterization thickening on scroll */
@media (max-width:480px){
  #chrome{
    transform:none !important;       /* critical: stops “thicker” raster */
    will-change:auto !important;     /* don’t hint GPU */
    backface-visibility:visible !important;
  }
}
/* =========================================================
   FIX: header goes white -> icons/text look “stroked/bold”
   Put at the VERY END of /styles/chrome-sticky-scroll.css
   ========================================================= */

/* Scrolled state = WHITE NAV + BLACK CONTENT (color only) */
html.is-scrolled #chrome .nav{
  background:#fff !important;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
}

/* Keep topbar grey always */
html.is-scrolled #chrome .topbar{
  background:#F1F1F1 !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
}

/* Kill anything that makes “outline/stroke” look */
html.is-scrolled #chrome,
html.is-scrolled #chrome *{
  text-shadow:none !important;
  filter:none !important;
  -webkit-text-stroke:0 !important;
  box-shadow:none !important;
  outline:0 !important;
}

/* Set content color (ONLY) */
html.is-scrolled #chrome .nav,
html.is-scrolled #chrome .nav *{
  color:#111 !important;
}

/* ---------- IMPORTANT PART: stop SVG OUTLINES ---------- */
/* If ANY CSS is adding stroke to icons, this nukes it */
html.is-scrolled #chrome .nav__icon svg,
html.is-scrolled #chrome .nav__icon svg *{
  filter:none !important;
  stroke:none !important;        /* <-- removes the “outlined” cart */
  stroke-width:0 !important;
  paint-order:normal !important;
}

/* Cart + Account are FILL icons: force fill = currentColor */
html.is-scrolled #chrome a.nav__icon[aria-label="Cart"] svg *,
html.is-scrolled #chrome a.nav__icon[aria-label="Account"] svg *{
  fill: currentColor !important;
  stroke: none !important;
  stroke-width: 0 !important;
}

/* Hamburger is STROKE icon: re-enable stroke only there */
html.is-scrolled #chrome .mobile-menu-icon,
html.is-scrolled #chrome .mobile-menu-icon *{
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
}

/* (Optional) remove the 1px seam between topbar and nav */
#chrome .nav{ margin-top:-1px !important; }
/* =========================================================
   DESKTOP: prevent white flash when header hides
   (hover state briefly makes nav white during scroll)
   ========================================================= */
@media (min-width: 481px){

  /* When sliding away, ignore hover/focus visuals */
  #chrome.is-hidden,
  #chrome.is-hidden *{
    transition: none !important;        /* stops bg fade/flash */
  }

  /* Lock backgrounds so it can't flip to white mid-hide */
  #chrome.is-hidden{
    pointer-events: none !important;    /* hover can't trigger while hiding */
    background: transparent !important;
  }
  #chrome.is-hidden .nav,
  #chrome.is-hidden .topbar{
    background: transparent !important; /* or keep as your normal non-hover state */
    box-shadow: none !important;
    border: 0 !important;
  }

  /* Extra: if you have a "home hover makes nav white" rule, nuke it during hide */
  html.is-home #chrome.is-hidden:hover .nav,
  html.is-home #chrome.is-hidden:focus-within .nav{
    background: transparent !important;
  }
}