/**
 * Exact live Webflow scrollbar hide (spiko.io).
 * Kept in /public so Tailwind/LightningCSS cannot strip ::-webkit-scrollbar.
 */
html,
body {
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

* {
  scrollbar-width: none;
}

::-webkit-scrollbar {
  display: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/*
 * The one scrollbar live shows back: the expanded collateral sheet on product
 * pages (live `.backing_sheet_container.is-active`, rules copied from its
 * inline <style>). It has to follow the global hide above. In Chrome >= 121
 * the standard `scrollbar-width` / `scrollbar-color` pair wins over the
 * ::-webkit-scrollbar rules, so `thin` is what paints there (11px measured on
 * live); the webkit rules are live's too, kept verbatim (no `display` reset, as live).
 */
[data-collateral-sheet].is-active {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.05);
}

[data-collateral-sheet].is-active::-webkit-scrollbar {
  width: 6px;
}

[data-collateral-sheet].is-active::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
}

[data-collateral-sheet].is-active::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}