:root {
  --scrollbar-size: 5px;
  --scrollbar-size-page: 7px;
  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(198, 164, 106, 0.32);
  --scrollbar-thumb-hover: rgba(198, 164, 106, 0.62);
  --scrollbar-thumb-active: var(--color-gold);
  --bn-scrollbar-width: 0px;
}

html {
  scrollbar-gutter: stable;
}

/* Firefox */
*,
*::before,
*::after {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Chromium, Safari, Edge */
*::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 100px;
  border: 1px solid transparent;
  background-clip: padding-box;
  transition: background-color var(--transition-fast);
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-thumb:active {
  background-color: var(--scrollbar-thumb-active);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

/* Remove legacy Windows arrow buttons */
*::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

/* Main page rail — slim gold bar */
html::-webkit-scrollbar {
  width: var(--scrollbar-size-page);
}

/* Scrollable panels inherit a slightly clearer thumb */
.bn-scroll,
.mobile-nav__links,
.utility-panel__body,
.collection-filter__menu,
.search-overlay__results,
.search-overlay__inner {
  scrollbar-color: var(--scrollbar-thumb-hover) var(--scrollbar-track);
}

.bn-scroll::-webkit-scrollbar-thumb,
.mobile-nav__links::-webkit-scrollbar-thumb,
.utility-panel__body::-webkit-scrollbar-thumb,
.collection-filter__menu::-webkit-scrollbar-thumb,
.search-overlay__results::-webkit-scrollbar-thumb,
.search-overlay__inner::-webkit-scrollbar-thumb {
  background-color: rgba(198, 164, 106, 0.45);
}

/* Lock scroll without layout jump during overlays / animations */
body.bn-scroll-lock {
  overflow: hidden !important;
  padding-right: var(--bn-scrollbar-width);
}

@media (prefers-reduced-motion: reduce) {
  *::-webkit-scrollbar-thumb {
    transition: none;
  }
}