/* === Side-cart scroll containers ================================= */
/* Shared rules for any side-cart scroller */
.sidecart-session-listing,
.sidecart-row-session-listing {
  /* Height guard-rails (default) */
  --sc-max-height: 280px;
  max-height: var(--sc-max-height);

  /* Flexbox guard so Elementor containers can't clamp the scroll area */
  min-height: 0 !important;

  /* Scroll behaviour (force auto in case Elementor overrides it) */
  overflow-y: auto !important;
  overflow-x: hidden;
  padding-right: 10px;
  position: relative;
  box-sizing: border-box;

  /* === Minimal scrollbar styling === */
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #888 #f0f0f0;

  /* WebKit (Chrome, Edge, Safari) */
}
.sidecart-session-listing::-webkit-scrollbar,
.sidecart-row-session-listing::-webkit-scrollbar       { width: 8px; }
.sidecart-session-listing::-webkit-scrollbar-track,
.sidecart-row-session-listing::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 10px; }
.sidecart-session-listing::-webkit-scrollbar-thumb,
.sidecart-row-session-listing::-webkit-scrollbar-thumb { background: #888; border-radius: 10px; border: 2px solid #f0f0f0; }
.sidecart-session-listing::-webkit-scrollbar-thumb:hover,
.sidecart-row-session-listing::-webkit-scrollbar-thumb:hover { background: #555; }

/* === Fade-out via CSS mask (default state) === */
.sidecart-session-listing,
.sidecart-row-session-listing {
  -webkit-mask-image: linear-gradient(to bottom, #000 85%, transparent);
          mask-image: linear-gradient(to bottom, #000 85%, transparent);
}

/* Remove mask when scrolled to bottom (JS toggles .at-bottom) */
.sidecart-session-listing.at-bottom,
.sidecart-row-session-listing.at-bottom {
  -webkit-mask-image: none;
          mask-image: none;
}

/* === Variant: “row” session listing (taller) (used for sidecart rows (newer items))=== */
.sidecart-row-session-listing {
  --sc-max-height: 680px;
}

/* === Variant: medium-height override via helper wrapper === */
.med-height-siderow .sidecart-session-listing,
.med-height-siderow .sidecart-row-session-listing {
  --sc-max-height: 340px;
}

/* === Mobile tweaks: reduce max heights only on small screens === */
@media (max-width: 480px) {
  /* Row variant gets a minor reduction on phones */
  .sidecart-row-session-listing {
    --sc-max-height: 640px;
  }
}