/* Suite Gallery Slider */

.sg-section { position: relative; }

.sg-slider-wrapper {
  width: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: visible;
}

.sg-slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
  gap: 0;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  width: 100%;
}
/* When Swiper is initialized on sg-slider, disable native snap/overflow to avoid conflicts */
.sg-slider.swiper {
  overflow: hidden;
  scroll-snap-type: none;
}
.sg-slider::-webkit-scrollbar { display: none; }

.sg-slider::after { content: ''; flex: 0 0 0; }

.sg-item {
  width: 100%;
  min-width: 100%;
  flex-basis: 100%;
  flex-shrink: 0;
  margin-right: 0;
  scroll-snap-align: start;
  display: flex;
}

.sg-media { width: 100%; height: 620px; }
.sg-media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }

/* Caption below */
.sg-caption { margin-top: 20px; color: var(--body-primary); font: 300 16px/1.4 'Work Sans', sans-serif; }

/* Arrows */
.sg-arrow {
    border-bottom: none !important;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  padding: 0 !important;
  border: none;
  background: transparent !important;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 3;
  transition: box-shadow .2s ease, transform .2s ease, opacity .2s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.sg-arrow:active { transform: translateY(-50%) scale(.98); }
.sg-arrow svg, .sg-arrow img { width: 27px; height: 8px; pointer-events: none; display: block; }
.sg-arrow .icon-inactive { display: none; }
/* Support both legacy .is-disabled and Swiper's .swiper-button-disabled */
.sg-arrow.is-disabled .icon-active,
.sg-arrow.swiper-button-disabled .icon-active { display: none; }
.sg-arrow.is-disabled .icon-inactive,
.sg-arrow.swiper-button-disabled .icon-inactive { display: block; }

/* Position left/right offset */
.sg-prev { left: 8px; }
.sg-next { right: 8px; }

@media (min-width: 1024px) {
  .sg-prev { left: -50px; }
  .sg-next { right: -50px; }
}