.category-scroll-controls { display: none; }

@media (max-width: 767px) {
  .category-scroll-controls {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: .65rem;
    margin: -.35rem var(--page-gutter) 0;
    padding: .35rem .5rem;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    background: rgba(7, 20, 37, .88);
  }
  .category-scroll-arrow {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    background: #ffc43b;
    color: #0b1530;
    cursor: pointer;
  }
  .category-scroll-arrow svg { width: 22px; height: 22px; }
  .category-scroll-arrow:disabled { background: transparent; color: #a6b4c4; border-color: #637388; cursor: default; }
  .category-scroll-position { appearance: none; -webkit-appearance: none; display: block; width: 100%; min-width: 0; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; accent-color: #ffc43b; cursor: ew-resize; }
  .category-scroll-position::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: #788b9d; }
  .category-scroll-position::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 32px; height: 16px; margin-top: -5px; border: 2px solid #fff0bf; border-radius: 999px; background: #ffc43b; box-shadow: 0 2px 6px #0005; }
  .category-scroll-position::-moz-range-track { height: 6px; border-radius: 999px; background: #788b9d; }
  .category-scroll-position::-moz-range-thumb { width: 28px; height: 12px; border: 2px solid #fff0bf; border-radius: 999px; background: #ffc43b; box-shadow: 0 2px 6px #0005; }
  .category-scroll-arrow:focus-visible, .category-scroll-position:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
}