/* Absolute overlay scrollbar approach */
.image-scroller {
  position: relative;
  border-radius: 2rem;
  overflow: hidden;
}
.images-track {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 0.5rem;
  overflow: hidden;
  border-radius: 2em;
}
.images-track img {
  height: 100%;
  flex-shrink: 0;
  border-radius: 2rem;
  object-fit: cover;
}
/* Custom horizontal pill scrollbar */
.h-scrollbar {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  width: 75%;
  height: var(--sb-size, 18px);
  background: #fff;
  border-radius: 9999px;
  z-index: 5;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.h-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 48px;
  background: #c6c6c6;
  border-radius: 9999px;
  cursor: grab;
}
.h-thumb:active {
  cursor: grabbing;
}
/* Fade-in of images + bar; skeleton shimmer while loading */
.image-scroller .images-track,
.image-scroller .h-scrollbar {
  transition: opacity 200ms ease;
}
.image-scroller.is-loading .images-track,
.image-scroller.is-loading .h-scrollbar {
  opacity: 0;
}
.skeleton-track {
  position: absolute;
  inset: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
}
.image-scroller.is-loading .skeleton-track {
  opacity: 1;
}
.skeleton-item {
  height: 100%;
  width: var(--skeleton-w, 280px);
  flex-shrink: 0;
  border-radius: 2rem;
  background: linear-gradient(
    90deg,
    #1818182a 25%,
    #2b2b2b3a 50%,
    #3f3f3f2f 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Custom vertical pill scrollbar inside overlay */
.custom-scroll-content {
  position: relative;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
/* Hide native scrollbars across browsers */
.custom-scroll-content::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.custom-scroll-content {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.custom-scrollbar {
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  right: 0.5rem;
  width: var(--vsb-width, 14px);
  background: #fff;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  z-index: 15;
}
.custom-scrollbar-thumb {
  position: absolute;
  left: 0;
  width: 100%;
  height: 40px;
  background: #c6c6c6;
  border-radius: 9999px;
  cursor: grab;
}
.custom-scrollbar-thumb:active {
  cursor: grabbing;
}
/* Overlay row mapping: use 3 cols at >=1400px, 2 cols below */
.overlay-panel {
  --rowIndex: var(--rowIndex3);
  --totalRows: var(--totalRows3);
}
@media (max-width: 1399.98px) {
  .overlay-panel {
    --rowIndex: var(--rowIndex2);
    --totalRows: var(--totalRows2);
  }
}