.ps-slider{
  --ps-slider-height:320px;
  --ps-ratio-w:24;
  --ps-ratio-h:10;
  --ps-slider-radius:16px;
  --ps-slider-speed:500ms;
  --ps-slider-gap:0px;
  --ps-dot:#9b1f9a;
  position:relative;
  z-index:auto;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0 0 var(--ps-slider-gap);
  direction:ltr;
  unicode-bidi:isolate;
  box-sizing:border-box;
  clear:both;
}

.ps-slider *,
.ps-slider *::before,
.ps-slider *::after{
  box-sizing:border-box;
}

.ps-slider__viewport{
  position:relative;
  overflow:hidden;
  border-radius:var(--ps-slider-radius);
  background:transparent;
  width:100%;
  max-width:100%;
  min-width:0;
}

/* Fixed height mode */
.ps-slider--fixed .ps-slider__viewport{
  height:var(--ps-slider-height);
  background:#f3f3f3;
}

.ps-slider--fixed .ps-slider__track{
  position:relative;
  width:100%;
  height:100%;
}

.ps-slider--fixed .ps-slider__slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.ps-slider--fixed .ps-slider__image{
  width:100%;
  height:100%;
  object-fit:cover;
}

/*
  Auto mode: active slide stays in normal document flow.
  Height comes from the real image — no aspect-ratio/padding hacks,
  so next sections cannot collapse into or under this block incorrectly.
*/
.ps-slider--auto .ps-slider__track{
  position:relative;
  width:100%;
  height:auto;
}

.ps-slider--auto .ps-slider__slide{
  position:absolute;
  left:0;
  right:0;
  top:0;
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
}

.ps-slider--auto .ps-slider__slide.is-active{
  position:relative;
  height:auto;
  z-index:2;
}

.ps-slider--auto .ps-slider__link{
  display:block;
  width:100%;
  line-height:0;
}

.ps-slider--auto .ps-slider__image{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:contain;
  object-position:center center;
  vertical-align:middle;
}

.ps-slider--auto .ps-slider__slide:not(.is-active) .ps-slider__image{
  height:100%;
  object-fit:cover;
}

/* Manual ratio mode — reserved box, still in flow */
.ps-slider--ratio .ps-slider__viewport{
  height:0;
  padding-bottom:calc((var(--ps-ratio-h) / var(--ps-ratio-w)) * 100%);
  background:#f3f3f3;
}

.ps-slider--ratio .ps-slider__track{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.ps-slider--ratio .ps-slider__slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.ps-slider--ratio .ps-slider__image{
  width:100%;
  height:100%;
  object-fit:cover;
}

.ps-slider__slide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity var(--ps-slider-speed) ease, visibility var(--ps-slider-speed) ease;
}

.ps-slider__slide.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.ps-slider--slide .ps-slider__slide{
  transform:translateX(6%);
  transition:opacity var(--ps-slider-speed) ease, transform var(--ps-slider-speed) ease, visibility var(--ps-slider-speed) ease;
}

.ps-slider--slide .ps-slider__slide.is-active{
  transform:translateX(0);
}

.ps-slider--slide .ps-slider__slide.is-leaving{
  transform:translateX(-6%);
  opacity:0;
}

.ps-slider__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:42px;
  height:42px;
  border:0;
  border-radius:999px;
  background:rgba(0,0,0,.42);
  color:#fff;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  line-height:1;
  padding:0;
  transition:background .2s ease, opacity .2s ease;
  -webkit-tap-highlight-color:transparent;
}

.ps-slider__arrow:hover,
.ps-slider__arrow:focus-visible{
  background:rgba(0,0,0,.62);
  outline:0;
}

.ps-slider__arrow--prev{left:10px}
.ps-slider__arrow--next{right:10px}

.ps-slider__dots{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
  padding:0 4px;
}

.ps-slider__dot{
  width:9px;
  height:9px;
  border-radius:999px;
  border:0;
  padding:0;
  cursor:pointer;
  background:rgba(155, 31, 154, .35);
  background:color-mix(in srgb, var(--ps-dot) 35%, #ffffff);
  transition:transform .2s ease, background .2s ease, width .2s ease;
  -webkit-tap-highlight-color:transparent;
}

.ps-slider__dot.is-active{
  width:22px;
  background:var(--ps-dot);
}

@media (max-width:767px){
  .ps-slider__arrow{
    width:32px;
    height:32px;
    font-size:20px;
  }

  .ps-slider__arrow--prev{left:6px}
  .ps-slider__arrow--next{right:6px}

  .ps-slider__dots{
    margin-top:8px;
    gap:6px;
  }

  .ps-slider__dot{
    width:8px;
    height:8px;
  }

  .ps-slider__dot.is-active{
    width:18px;
  }
}