/* ==========================================================================
   Custom scrollbar — everything scrollbar-related in one place
   Rename .frame-picker__* to match your Webflow class names.
   ========================================================================== */

/* Apply this to your actual scrolling element (the grid/collection list).
   Hides the native scrollbar across browsers so only the custom
   track/thumb below is visible. The element still scrolls normally —
   only its default scrollbar chrome is hidden. */
.frames-grid {
  overflow-x: scroll;
  scrollbar-width: none;         /* Firefox */
  -ms-overflow-style: none;      /* older Edge/IE */
}
.frames-grid::-webkit-scrollbar {
  display: none;                 /* Chrome, Safari */
}

/* REMOVED — content-visibility on the frame thumbnails.
   -----------------------------------------------------------------------
   The idea was to skip rasterizing the ~55 thumbnails that are scrolled off
   to the side, each carrying a moulding <img> plus the shadow PNG. It broke
   layout twice and is not worth a third attempt in its current form:

     v1 on .f-cms-thumbnail  -> thumbnails past the first few never painted.
     v2 on .frame-component  -> the grid's width blew up enormously.

   Root cause both times is size containment. .frames-grid sizes its columns
   as a PERCENTAGE (grid-template-columns / grid-auto-columns: 30%) while its
   own width is auto, and the items use `width: 100%` + `aspect-ratio`. Adding
   an element that reports zero content size into that chain makes percentage
   resolution circular, and the grid resolves against the wrong basis.

   Any retry needs the grid on fixed or fr-based track sizing first — e.g.
   `grid-auto-columns: 220px` — so nothing in the chain depends on content
   size. Until then the images are already covered by loading="lazy" plus the
   sizes fix in JS/thumbnail-sizes.js, which is where most of the win was. */

/* Custom scrollbar track. */
.f-scroll-track {
  cursor: pointer;
}

/* Custom scrollbar thumb. Width and left position are set via JS,
   calculated from the scroll container's real scrollLeft / scrollWidth / clientWidth. */
.f-scroll-track {
  cursor: grab;
}
.f-scroll-track:active {
  cursor: grabbing;
}