/* @group @variables */

@media all and (max-width:47.9375em) {

[class*="m-products-filter"] {

--height: 100vh;
--search-filter-transform: translateX(50rem);
}

[class*="a-products-filter-toggle"]:checked ~ section [class*="m-products-filter"] {
--search-filter-transform: translateX(0);
}

}

/* @end @variables */

/* @group @m-products-filter */

@media all and (max-width:47.9375em) {

[class*="m-products-filter"] {
box-sizing: border-box;
position: fixed;
overflow: hidden;
z-index: 91;
top: 0;
right: 0;
bottom: 0;
width: 90vw;
max-width: 30rem;
height: var(--height);
background-color: var(--color-white);
transition: var(--transition);
transform: var(--search-filter-transform);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-backdrop-filter: blur(.125rem);
backdrop-filter: blur(.125rem);
}

[class*="m-filter-body"] {
box-sizing: border-box;
overflow: hidden;
overflow-y: auto;
height: calc(100vh - 3rem);
padding-bottom: 4.5rem;
-ms-overflow-style: -ms-autohiding-scrollbar;
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
padding: 0 .75rem 3.75rem;
background-color: var(--color-white);
transition: var(--transition);
transform: var(--search-filter-transform);
-ms-overflow-style: -ms-autohiding-scrollbar;
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}

[class*="a-products-filter-toggle"]:checked ~ [class*="a-filter-overlay"] {
position: fixed;
z-index: 21;
inset: 0;
/*top: 0;
right: 0;
bottom: 0;
left: 0;*/
background-color: hsla(220, 5%, 20%, .5);
-webkit-backdrop-filter: blur(.125rem);
backdrop-filter: blur(.125rem);
transition: var(--transition);
}

}

/* @end @m-products-filter */