/* Floating site header for the standalone shop pages (product, checkout, order, affiliate).
   Mirrors the header on the home page (public/index.html: `nav` rules) so the shop feels like one site.
   The dropdown uses :hover / :focus-within instead of inline handlers because these pages run under a strict CSP. */
body.shop-page{padding-top:96px}
#nv{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:99;box-sizing:border-box;width:calc(100% - 32px);max-width:1080px;height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 22px;backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);background:rgba(255,255,255,.82);border:1px solid rgba(0,0,0,.07);border-radius:50px;box-shadow:0 10px 30px rgba(0,0,0,.10);transition:height .3s,background .3s,box-shadow .3s,top .3s}
#nv.sc{top:10px;height:58px;background:rgba(255,255,255,.95);box-shadow:0 14px 38px rgba(0,0,0,.16)}
/* The logo PNG is 2000x2000 with the wordmark in the middle: cover-crop it, exactly as on the home page. */
#nv .logo{flex:none}
#nv .logo img{display:block;height:34px;width:200px;object-fit:cover;object-position:center}
#nv.sc .logo img{height:30px;width:176px}
#nv a{text-decoration:none}
#nv .nvl{display:flex;gap:4px;align-items:center}
#nv .nl{display:block;white-space:nowrap;color:#6b6b6b;font-size:13px;font-weight:600;padding:8px 12px;border-radius:8px;transition:color .15s,background .15s;cursor:pointer}
#nv .nl:hover,#nv .nl:focus-visible{color:#e4002b;background:rgba(228,0,43,.06)}
#nv .nv-dd{position:relative;display:flex;align-items:center}
#nv .nl-dd{display:inline-flex;align-items:center;gap:4px}
#nv .nl-caret{display:block;flex:none;margin-top:1px}
#nv .dd{display:none;position:absolute;top:100%;left:-8px;padding-top:8px;z-index:10}
#nv .nv-dd:hover .dd,#nv .nv-dd:focus-within .dd{display:block}
#nv .ddi{background:#fff;border:1px solid #eee;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.08);padding:8px 0;min-width:180px}
#nv .ddi a{display:block;padding:8px 16px;font-size:12px;font-weight:600;color:#555;transition:background .15s,color .15s}
#nv .ddi a:hover,#nv .ddi a:focus-visible{background:#f7f7f7;color:#e4002b}
#nv .ddi a.all{color:#e4002b}
#nv .ddi a.tool{padding:9px 16px;min-width:220px}
#nv .ddi a.tool b{display:block;font-size:12.5px;font-weight:700;color:#222}
#nv .ddi a.tool span{display:block;font-size:11px;font-weight:500;color:#888;margin-top:2px}
#nv .ddi a.tool:hover b,#nv .ddi a.tool:focus-visible b{color:#e4002b}
#nv .ddi hr{border:0;border-top:1px solid #eee;margin:4px 0}
#nv .nvr{display:flex;align-items:center;gap:6px;flex:none}
#nv #lb{background:rgba(228,0,43,.07);border:0;color:#e4002b;padding:5px 14px;border-radius:20px;font:700 12px inherit;font-family:inherit;letter-spacing:.5px;cursor:pointer;min-height:32px}
#nv #lb:hover{background:rgba(228,0,43,.13)}
#nv .mnav{display:none}

/* Below 900px the links would not fit on one line: use the two-row layout (a swipeable pill row) like on a phone. */
@media(max-width:900px){
  body.shop-page{padding-top:122px}
  /* Two rows on a phone: logo + tools, then a swipeable row of pills (as on the home page). */
  #nv,#nv.sc{top:8px;height:auto;width:calc(100% - 20px);flex-wrap:wrap;row-gap:0;padding:6px 8px 0 14px;align-items:center;border-radius:20px;background:rgba(255,255,255,.96);box-shadow:0 6px 24px rgba(0,0,0,.12)}
  #nv.sc{box-shadow:0 10px 30px rgba(0,0,0,.18)}
  #nv .logo img,#nv.sc .logo img{height:34px;width:142px}
  #nv .nvl{display:none}
  #nv #lb{padding:6px 12px}
  #nv .mnav{display:flex;flex:0 0 100%;gap:6px;margin:6px -8px 0 -14px;padding:7px 14px 8px;border-top:1px solid rgba(0,0,0,.06);overflow-x:auto;white-space:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #nv .mnav::-webkit-scrollbar{display:none}
  #nv .mnav a{flex:0 0 auto;padding:7px 12px;border-radius:50px;background:#f3f3f4;color:#14171c;font-size:11.5px;font-weight:700;line-height:1.2;-webkit-tap-highlight-color:transparent}
  #nv .mnav a.on{background:#e4002b;color:#fff}
}
@media(prefers-reduced-motion:reduce){#nv{transition:none}}