/* One backdrop sampling layer; content and pointer effects stay crisp above it. */
html{scroll-padding-top:124px}
.product-nav{
  position:sticky;top:12px;z-index:50;
  margin:12px clamp(12px,1.7vw,28px) 0;
  padding-inline:clamp(14px,2.2vw,40px);
  border:1px solid rgb(255 255 255 / .09);border-radius:24px;
  background:linear-gradient(135deg,rgb(255 255 255 / .035),transparent 65%),rgb(14 15 18 / .68);
  -webkit-backdrop-filter:blur(22px) saturate(145%);
  backdrop-filter:blur(22px) saturate(145%);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .045),0 8px 32px rgb(0 0 0 / .18);
  isolation:isolate;
}
.product-nav::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:rgb(5 7 10 / .16);opacity:0;
}
/* .hero{min-height:calc(100svh - 102px)} */
@supports(animation-timeline:scroll()){
  .product-nav::before{
    animation:nav-glass-depth linear both;
    animation-timeline:scroll(root block);animation-range:0px 140px;
  }
}
@keyframes nav-glass-depth{from{opacity:0}to{opacity:1}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .product-nav{background:rgb(15 16 19 / .97)}
}
@media(max-width:720px){
  html{scroll-padding-top:104px}
  .product-nav{top:8px;margin:8px 8px 0;padding-inline:12px;border-radius:22px}
  /* .hero{min-height:calc(90svh - 84px)} */
}
@media(max-width:360px){
  .product-nav{top:6px;margin:6px 6px 0;padding-inline:8px;border-radius:20px}
  /* .hero{min-height:calc(90svh - 82px)} */
}
@media(prefers-reduced-motion:reduce){.product-nav::before{animation:none;opacity:.5}}
@media(prefers-reduced-transparency:reduce){.product-nav{background:rgb(15 16 19 / .98);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* Home navigation melts into the scene; only its lower edge stays defined. */
body[data-view="home"] .product-nav{
  top:0;margin-top:0;
  border:0;border-radius:0;background:transparent;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
body[data-view="home"] .product-nav::before{
  inset:0 calc(-1 * clamp(12px,1.7vw,28px)) 0;
  border-radius:0;opacity:1;animation:none;
  background:linear-gradient(115deg,rgb(255 255 255 / .05),rgb(255 255 255 / .014) 55%,rgb(255 255 255 / .035));
  -webkit-backdrop-filter:blur(16px) saturate(150%) brightness(1.035);
  backdrop-filter:blur(16px) saturate(150%) brightness(1.035);
  -webkit-mask-image:none;mask-image:none;
}
body[data-view="home"] .product-nav::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgb(241 245 230 / .14) 16%,rgb(255 255 255 / .24) 50%,rgb(241 245 230 / .14) 84%,transparent);
}
@media(max-width:720px){body[data-view="home"] .product-nav::before{inset:0 -8px 0}}
@media(max-width:360px){body[data-view="home"] .product-nav::before{inset:0 -6px 0}}
@media(prefers-reduced-transparency:reduce){
  body[data-view="home"] .product-nav::before{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
}