/* Kadence DOM Carousel (DOM-safe, pixel-perfect)
   - Activates on: .carousel-list / .carousel-group
   - Uses native scrolling + scroll-snap for precise alignment
   - Only wraps existing DOM; no innerHTML/clone
*/

.kdc-carousel {
  position: relative;
  width: 100%;
  --kdc-cols: 3;
  --kdc-gap: 24px;
}

.kdc-viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  /* Default to auto; JS enables smooth only for button/dot navigation.
     Safari can flicker when smooth + snap + momentum are combined. */
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  /* Let users feel the scroll; snapping is handled by snap points, not forced stops */
  scroll-snap-stop: normal;
  touch-action: pan-x pan-y;

  /* hide scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* iOS Safari: keep mandatory snapping ("sticky" feel). Flicker/jitter was caused
   by JS forcing scrollLeft during momentum, which we no longer do on iOS. */
@supports (-webkit-touch-callout: none) {
  .kdc-viewport {
    scroll-snap-type: x mandatory;
    scroll-snap-stop: normal;
  }
}
.kdc-viewport::-webkit-scrollbar { display: none; }

/* Track */
.kdc-track {
  display: flex !important;
  gap: var(--kdc-gap);
  align-items: stretch;
  margin: 0 !important;
  padding: 0 !important;
}

/* List reset */
ul.kdc-track {
  list-style: none !important;
  padding-left: 0 !important;
}

/* Slide width */
.kdc-slide {
  flex: 0 0 calc((100% - (var(--kdc-gap) * (var(--kdc-cols) - 1))) / var(--kdc-cols));
  box-sizing: border-box;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

/* Card look for list items only (groups keep their own design) */
ul.kdc-track > li.kdc-slide {
  padding: 1.1em 1.2em;
  background: rgba(255, 255, 255, 0.65);
  border-radius: 14px;
}

/* Nav buttons (theme-proof) */
.kdc-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border: 0;
  padding: 0;
  margin: 0;
  line-height: 0;
  cursor: pointer;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  z-index: 5;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
}

/* Keep arrows inside the carousel bounds by default */
.kdc-prev { left: 10px; }
.kdc-next { right: 10px; }

/* Chevron perfectly centered */
.kdc-nav::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border: solid rgba(0,0,0,0.55);
  border-width: 0 2px 2px 0;
  transform-origin: center;
}

.kdc-prev::before { transform: translate(-50%, -50%) rotate(135deg); }
.kdc-next::before { transform: translate(-50%, -50%) rotate(-45deg); }

/* On larger screens, allow a slight "outside" look if desired */
@media (min-width: 781px) {
  .kdc-prev { left: -20px; }
  .kdc-next { right: -20px; }
}

.kdc-carousel.is-dragging .kdc-viewport { cursor: grabbing; }
.kdc-viewport { cursor: grab; }

/* Prevent text highlighting while dragging */
.kdc-noselect,
.kdc-noselect * {
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* Dots (theme-proof) */
.kdc-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.kdc-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 8px;
  min-height: 8px;
  flex: 0 0 auto;
  line-height: 0;
  cursor: pointer;
  background: rgba(0,0,0,0.25);
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
}

.kdc-dot.is-active {
  background: rgba(0,0,0,0.6);
}


.kdc-nav:hover,
.kdc-nav:focus {
	background-color:var(--global-palette1)!important;
}
.kdc-nav:hover:before,
.kdc-nav:focus:before{
	border-color:var(--global-palette9)!important;
}