.category-bar{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 48px;
  align-items:stretch;
  width:100%;
  max-width:100%;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.category-bar .category-strip{
  min-width:0;
  padding-left:8px;
  padding-right:8px;
  border:0;
  scrollbar-width:thin;
  scrollbar-color:#b9b5d8 transparent;
}
.category-bar .category-strip::-webkit-scrollbar{display:block;height:6px}
.category-bar .category-strip::-webkit-scrollbar-thumb{border-radius:99px;background:#b9b5d8}
.category-arrow{
  border:0;
  background:#fff;
  color:var(--blue);
  font-size:2rem;
  font-weight:900;
  cursor:pointer;
}
.category-arrow:hover,.category-arrow:focus{background:#f0effb;outline:0}
@media(max-width:640px){
  .category-bar{display:block;position:sticky;top:calc(76px + env(safe-area-inset-top));z-index:15}
  .category-arrow{display:none}
  .category-bar .category-strip{position:static;padding-left:16px;padding-right:16px;scrollbar-width:none}
  .category-bar .category-strip::-webkit-scrollbar{display:none}
}