input{
  -webkit-appearance:none;
}
.stage-drawer{
  -webkit-overflow-scrolling:touch;
  background-color:rgba(var(--color-page-background));
  bottom:0;
  color:#000;
  display:none;
  max-width:95%;
  overflow:hidden;
  position:fixed;
  top:0;
  transition:transform .25s cubic-bezier(.165, .84, .44, 1);
  width:340px;
  z-index:130;
}
.stage-drawer.is-transitioning{
  display:block !important;
  visibility:visible !important;
}
.stage-drawer .drawer--content{
  display:flex;
  flex-direction:column;
  height:100%;
}
.stage-drawer .drawer__header--fixed{
  flex-shrink:0;
  height:70px;
  overflow:visible;
}
.stage-drawer .drawer__main{
  -webkit-overflow-scrolling:touch;
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  overflow:hidden;
  overflow-y:auto;
  padding-top:15px;
}
.stage-drawer .drawer__header--fixed,.stage-drawer .drawer__main{
  padding-left:15px;
  padding-right:15px;
}
.stage-drawer .drawer__header--content{
  border-bottom:1px solid rgba(var(--color-entry-line));
  display:table;
  height:100%;
  padding:12px 0;
  width:100%;
}
.stage-drawer .drawer__close,.stage-drawer .drawer__title{
  display:table-cell;
  vertical-align:middle;
}
.stage-drawer .drawer__title{
  width:100%;
}
.stage-drawer .drawer__close{
  color:rgba(var(--color-text));
  text-align:center;
  width:1%;
}
.stage-drawer .drawer__close button{
  padding-right:8px;
}
.stage-drawer .drawer__back{
  color:rgba(var(--color-text));
  display:flex;
  height:100%;
}
.stage-drawer .drawer__back button{
  padding-left:0;
}
.stage-drawer .drawer__button{
  align-items:center;
  background:none;
  border:none;
  color:inherit;
  cursor:pointer;
  display:flex;
  height:100%;
  padding:0 15px;
  position:relative;
}

.stage-drawer[data-position=right]{
  right:-340px;
}
.stage-drawer[data-position=right].stage-drawer--is-open{
  transform:translateX(-340px);
}

.stage-drawer[data-position=left]{
  left:-340px;
}
.stage-drawer[data-position=left].stage-drawer--is-open{
  transform:translateX(340px);
}

.stage-drawer--is-open{
  display:block;
  transition-duration:.45s;
}
.stage-drawer--is-open .stage-drawer__animation--appear{
  opacity:1;
  transform:translateY(0);
  will-change:transform;
}

.stage-drawer--is-open.stage-drawer-nested .stage-drawer-sub__animation--appear{
  opacity:1;
  transform:translateY(0);
}

@media (min-width:750px){
  .stage-drawer{
    width:400px;
  }
  .stage-drawer .drawer__header--fixed{
    height:80px;
  }
  .stage-drawer .drawer__header--fixed,.stage-drawer .drawer__main{
    padding-left:30px;
    padding-right:30px;
  }
  .stage-drawer[data-position=right]{
    right:-400px;
  }
  .stage-drawer[data-position=right].stage-drawer--is-open{
    transform:translateX(-400px);
  }
  .stage-drawer[data-position=left]{
    left:-400px;
  }
  .stage-drawer[data-position=left].stage-drawer--is-open{
    transform:translateX(400px);
  }
  .stage-drawer[data-cart]{
    width:440px;
  }
  .stage-drawer[data-cart][data-position=right]{
    right:-440px;
  }
  .stage-drawer[data-cart][data-position=right].stage-drawer--is-open{
    transform:translateX(-440px);
  }
  .stage-drawer[data-cart][data-position=left]{
    left:-440px;
  }
  .stage-drawer[data-cart][data-position=left].stage-drawer--is-open{
    transform:translateX(440px);
  }
}
.stage-drawer-root-closing:after,.stage-drawer-root-open:after{
  background-color:rgba(var(--color-mask));
  bottom:0;
  content:"";
  display:block;
  left:0;
  opacity:0;
  position:fixed;
  right:0;
  top:0;
  transition:all .3s;
  z-index:128;
}

.stage-drawer-root-open{
  height:100%;
  overflow:hidden;
}
.stage-drawer-root-open:after{
  opacity:.6;
}

.stage-drawer-sub__animation--appear,.stage-drawer__animation--appear{
  opacity:0;
  transform:translateY(60px);
}

.stage-drawer-nested{
  max-width:100%;
}