.ax-cs_slide{
  width:100%;
}
.ax-cs_slide .splide__list{
  align-items:stretch;
}
.ax-cs_slide .splide__slide{
  display:block;
  height:auto;
}
.ax-cs--no-dots .splide__pagination{
  display:none!important;
}
.ax-cs--no-arrows .splide__arrows{
  display:none!important;
}
.ax-cs_slide.ax-cs--mounted{
  display:block;
}
.ax-cs_slide .splide__list{
  align-items:stretch;
}
.ax-cs_slide .splide__slide{
  height:auto;
}
.ax-remote.is-disabled a{
  background-color:#e0e0e0;
  pointer-events:none;
}

/* -------------------------------------------------------
   Remote dots (text dots, custom dots)
-------------------------------------------------------- */

/* Basic affordance (safe defaults) */
.ax-remote-dot{
  cursor:pointer;
  user-select:none;
}

/* Active state hook */
.ax-remote-dot.is-active{
  opacity:1;
}

/* -------------------------------------------------------
   Per-dot progress bar (ax-dot-progress)
   - uses CSS var: --ax-dot-progress (0..1)
   - inserted automatically by JS when enabled
-------------------------------------------------------- */

.ax-remote-dot{
  position:relative;
}

/* the bar element appended as <span class="ax-dot-progress"></span> */
.ax-remote-dot > .ax-dot-progress{
  position:absolute;
  left:0;
  right:0;
  height:3px;
  transform:scaleX(var(--ax-dot-progress,0));
  transform-origin:left center;
  opacity:1;
  pointer-events:none;
}

/* default position (bottom) */
.ax-remote-dot > .ax-dot-progress{
  bottom:-6px;
}

/* If you want top/bottom styling via wrapper semantics:
   We don’t force special wrapper classes – we simply respect the attribute by placement.
   Since Elementor users often style their dot containers manually, these are minimal. */
[data-cs-dot-progress="top"] .ax-remote-dot > .ax-dot-progress{
  top:-6px;
  bottom:auto;
}
[data-cs-dot-progress="bottom"] .ax-remote-dot > .ax-dot-progress{
  bottom:-6px;
  top:auto;
}

/* Single dot progress (when attribute is on the dot element itself) */
.ax-remote-dot[data-cs-dot-progress="top"] > .ax-dot-progress{
  top:-6px;
  bottom:auto;
}
.ax-remote-dot[data-cs-dot-progress="bottom"] > .ax-dot-progress{
  bottom:-6px;
  top:auto;
}

/* -------------------------------------------------------
   Slider-level progress bar (ax-cs-progress)
-------------------------------------------------------- */

.ax-cs-progress{
  position:absolute;
  left:0;
  right:0;
  height:3px;
  pointer-events:none;
  z-index:50;
}
.ax-cs-progress--top{
  top:0;
}
.ax-cs-progress--bottom{
  bottom:0;
}
.ax-cs-progress__bar{
  height:100%;
  width:0%;
}