html{background:#fff}
html,body{min-height:100%;background:#fff}
button,a,[tabindex]{-webkit-tap-highlight-color:transparent}
button:focus,a:focus,[tabindex]:focus{outline:none}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:none}
html.panel-open,body.panel-open{overflow:hidden!important;overscroll-behavior:none!important;background:#fff!important}

/* Mobile-friendly navigation: animate one fixed compositor layer, not the page. */
body::after{
  content:"";
  position:fixed;
  z-index:99999;
  inset:0;
  background:#fff;
  opacity:0;
  pointer-events:none;
  will-change:opacity;
  animation:navigation-reveal .2s ease-out backwards;
}

body.page-leaving{pointer-events:none}
body.page-leaving::after{animation:navigation-cover .16s ease-in forwards}

.product-grid{transition:opacity .16s ease-out}
.product-grid.products-changing{opacity:0}

@keyframes navigation-cover{from{opacity:0}to{opacity:1}}
@keyframes navigation-reveal{from{opacity:1}to{opacity:0}}

@media(prefers-reduced-motion:reduce){
  body::after,body.page-leaving::after{animation:none;opacity:0}
  .product-grid{transition:none}
}