.shop-filter-offcanvas{
  position:fixed; top:0; right:0; height:100vh; width:80%; max-width:360px;
  background:#fff; transform:translateX(100%); transition:transform .3s ease;
  z-index:10000; overflow:auto; -webkit-overflow-scrolling:touch;
}
.shop-filter-offcanvas.open{ transform:translateX(0); }
.shop-filter-offcanvas .close{
  position:sticky; top:0; right:0; float:right; margin:10px;
  background:transparent; border:0; font-size:28px; line-height:1; cursor:pointer;
}
.shop-filter-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transition:.2s ease; z-index:9999;
}
.shop-filter-overlay.visible{ opacity:1; visibility:visible; }