html{scroll-behavior:smooth}
header,.hdr-main{overflow:visible}
.ui-toggle{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;pointer-events:none}
label[for]{cursor:pointer}
.icon-x{display:none}
.mnav-panel{max-height:0;overflow:hidden;transition:max-height .5s}
#mnav-open:checked~header .icon-menu{display:none}
#mnav-open:checked~header .icon-x{display:block}
#mnav-open:checked~header .mnav-panel{
  max-height:80vh;
  border-bottom:1px solid hsl(var(--border));
}
.mnav-sub{max-height:0;overflow:hidden;transition:max-height .3s}
.mnav-acc:checked+.mnav-acc-lab .nav-chev{transform:rotate(180deg)}
.mnav-acc:checked~.mnav-sub{max-height:15rem;padding-top:.5rem}
.nav-drop{
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-4px);
  transition:all .3s;
}
.nav-item:hover .nav-drop,
.nav-item:hover .nav-drop:hover{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%,0);
}
.nav-item:hover .nav-chev{transform:rotate(180deg)}
@media (min-width:1024px){
  .mnav-panel{display:none!important;max-height:none}
}
@supports (animation-timeline:scroll()){
  .hdr-bar{
    animation:af-hdr linear both;
    animation-timeline:scroll();
    animation-range:0 40px;
  }
}
@keyframes af-hdr{
  to{
    background:#ffffff8c;
    -webkit-backdrop-filter:blur(14px) saturate(120%);
    backdrop-filter:blur(14px) saturate(120%);
    border-color:#f6f4ee99;
    box-shadow:0 1px 2px #1e1c1a0a,0 12px 32px -12px #1e1c1a1f;
  }
}
.qty-btn{background:none;border:0;cursor:default}
.img-cover{object-fit:cover}
.hero-scroll{animation:af-bob 1.8s ease-in-out infinite}
@keyframes af-bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(6px)}
}