.category-quick-nav{display:none}

@media(max-width:1100px){
  .category-quick-nav{
    position:relative;
    z-index:24;
    display:flex;
    align-items:stretch;
    min-height:48px;
    padding-inline:18px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    overscroll-behavior-inline:contain;
    background:#f2f2f0;
    border-bottom:1px solid rgba(89,91,97,.24);
    box-shadow:0 8px 20px rgba(35,36,38,.08);
  }
  .category-quick-nav::-webkit-scrollbar{display:none}
  .category-quick-nav button{
    position:relative;
    flex:none;
    min-height:48px;
    padding:0 16px;
    border:0;
    background:transparent;
    color:#6c6e73;
    font:700 12px/1.1 "Instrument Sans",Arial,sans-serif;
    white-space:nowrap;
    cursor:pointer;
  }
  .category-quick-nav button:after{
    content:"";
    position:absolute;
    right:16px;
    bottom:0;
    left:16px;
    height:3px;
    background:#ff8726;
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .25s cubic-bezier(.16,1,.3,1);
  }
  .category-quick-nav button[aria-current="true"]{color:#393a3d}
  .category-quick-nav button[aria-current="true"]:after{transform:scaleX(1)}
  .category-quick-nav button:focus-visible{outline:2px solid #393a3d;outline-offset:-5px}
}

@media(max-width:420px){
  .category-quick-nav{padding-inline:10px}
  .category-quick-nav button{padding-inline:13px;font-size:11px}
  .category-quick-nav button:after{right:13px;left:13px}
}

@media(prefers-reduced-motion:reduce){
  .category-quick-nav button:after{transition:none}
}