/* Keep the native scrollbar's footprint so the catalogue never changes width. */
html.rg-page-scroll-ready { scrollbar-color: transparent transparent; }
html.rg-page-scroll-ready::-webkit-scrollbar,
html.rg-page-scroll-ready::-webkit-scrollbar-track,
html.rg-page-scroll-ready::-webkit-scrollbar-thumb,
html.rg-page-scroll-ready::-webkit-scrollbar-button,
html.rg-page-scroll-ready::-webkit-scrollbar-corner {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
#rg-page-scroll {
  position: fixed;
  z-index: 10000;
  right: max(0px, env(safe-area-inset-right));
  top: clamp(96px, 15vh, 140px);
  bottom: max(28px, env(safe-area-inset-bottom));
  width: 16px;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  outline: none;
}
#rg-page-scroll[hidden] { display: none !important; }
#rg-page-scroll::before,
#rg-page-scroll-active {
  position: absolute;
  right: 5px;
  top: 0;
  bottom: 0;
  width: 6px;
  border-radius: 1px;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(66,65,60,.23) 0 2px, transparent 2px 10px);
}
#rg-page-scroll::before { content: ""; }
#rg-page-scroll-active {
  background: repeating-linear-gradient(to bottom, #df5745 0 2px, transparent 2px 10px);
  -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--rg-scroll-center) - 80px), #000 calc(var(--rg-scroll-center) - 18px), #000 calc(var(--rg-scroll-center) + 18px), transparent calc(var(--rg-scroll-center) + 80px));
  mask-image: linear-gradient(to bottom, transparent calc(var(--rg-scroll-center) - 80px), #000 calc(var(--rg-scroll-center) - 18px), #000 calc(var(--rg-scroll-center) + 18px), transparent calc(var(--rg-scroll-center) + 80px));
}
#rg-page-scroll:hover::before {
  background: repeating-linear-gradient(to bottom, rgba(66,65,60,.32) 0 2px, transparent 2px 10px);
}
#rg-page-scroll:focus-visible { outline: 1px solid #df5745; border-radius: 3px; }