/**
 * MJT — scroll affordance for panels with hidden / subtle scrollbars.
 * Cue sits outside the overflow pane so it never scrolls away.
 */

.mjt-scroll-hint {
  --mjt-scroll-hint-fade: var(--mjt-color-surface);
  position: relative;
  display: block;
  min-height: 0;
}

.mjt-scroll-hint__cue {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: 2.1rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 0.1rem;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
  background: linear-gradient(
    to top,
    var(--mjt-scroll-hint-fade) 38%,
    color-mix(in srgb, var(--mjt-scroll-hint-fade) 55%, transparent) 72%,
    transparent
  );
}

.mjt-scroll-hint.is-more-below .mjt-scroll-hint__cue {
  opacity: 1;
  visibility: visible;
}

.mjt-scroll-hint__cue-icon {
  display: block;
  width: 15px;
  height: 15px;
  color: var(--mjt-color-text-muted);
  filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--mjt-scroll-hint-fade) 90%, transparent));
}

.mjt-scroll-hint.is-more-below .mjt-scroll-hint__cue-icon {
  animation: mjt-scroll-hint-bob 1.25s ease-in-out infinite;
}

@keyframes mjt-scroll-hint-bob {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.72;
  }
  50% {
    transform: translateY(3px);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mjt-scroll-hint.is-more-below .mjt-scroll-hint__cue-icon {
    animation: none;
    opacity: 1;
  }
}

/* Filter lists: keep scroll inside the list (don't let sidebar steal the wheel). */
.mjt-wc-filter .mjt-scroll-hint,
.mjt-shop-sidebar .mjt-scroll-hint {
  --mjt-scroll-hint-fade: var(--mjt-color-surface);
}

.mjt-shop-layout--editorial .mjt-shop-sidebar .mjt-scroll-hint {
  --mjt-scroll-hint-fade: var(--mjt-color-surface);
}

.mjt-wc-filter__body > .mjt-scroll-hint {
  max-height: 280px;
  display: block;
}

.mjt-wc-filter__body > .mjt-scroll-hint > .mjt-wc-filter__list {
  max-height: 280px;
  padding-bottom: 1.85rem;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.mjt-wc-filter__body > .mjt-scroll-hint > .mjt-scroll-hint__cue {
  height: 2.35rem;
}

.mjt-shop-layout--editorial .mjt-shop-sidebar .mjt-scroll-hint {
  --mjt-scroll-hint-fade: var(--mjt-color-surface);
}

/* Full sidebar scroller (more filters below). */
.mjt-shop-sidebar > .mjt-scroll-hint--sidebar {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.mjt-shop-sidebar > .mjt-scroll-hint--sidebar > .mjt-shop-sidebar__body {
  flex: 1 1 auto;
  min-height: 0;
}

.mjt-shop-sidebar > .mjt-scroll-hint--sidebar > .mjt-scroll-hint__cue {
  height: 2.65rem;
}

.mjt-shop-sidebar > .mjt-scroll-hint--sidebar > .mjt-scroll-hint__cue .mjt-scroll-hint__cue-icon {
  width: 18px;
  height: 18px;
}

@media (min-width: 992px) {
  .mjt-shop-sidebar > .mjt-scroll-hint--sidebar {
    max-height: calc(100vh - var(--mjt-sticky-offset) - 6rem);
  }

  .mjt-shop-sidebar > .mjt-scroll-hint--sidebar > .mjt-shop-sidebar__body {
    max-height: none;
  }
}

@media (max-width: 991px) {
  .mjt-shop-sidebar > .mjt-scroll-hint--sidebar {
    flex: 1 1 auto;
    min-height: 0;
  }
}

/* Mega: parents column uses soft alt background. */
.mjt-mega-menu__sidebar > .mjt-scroll-hint {
  --mjt-scroll-hint-fade: color-mix(in srgb, var(--mjt-color-bg-alt) 82%, var(--mjt-color-surface));
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.mjt-mega-menu__sidebar > .mjt-scroll-hint > .mjt-mega-menu__parents {
  flex: 1 1 auto;
  min-height: 0;
}

.mjt-mega-menu__inner > .mjt-scroll-hint:has(> .mjt-mega-menu__panels) {
  --mjt-scroll-hint-fade: var(--mjt-color-surface);
  min-height: 0;
  max-height: var(--mjt-mega-max-h, min(70vh, 540px));
  overflow: hidden;
}

.mjt-mega-menu__inner > .mjt-scroll-hint > .mjt-mega-menu__panels {
  max-height: 100%;
  height: 100%;
}

[data-theme="dark"] .mjt-scroll-hint {
  --mjt-scroll-hint-fade: var(--mjt-color-surface);
}