/* Curved 3D Carousel */
.ls-curved-carousel {
  --viewport-height: clamp(24rem, 50vh, 44rem);
  --viewport-height-m: 35rem;
  --perspective: 800px;
  --perspective-m: 480px;
  --block-offset: 0;
  --block-offset-m: 0;
  --fadeout: none;
  --slide-radius: 0;
  position: relative;
  width: 100%;
  height: var(--viewport-height);
  transform-style: preserve-3d;
  user-select: none;
  overflow: hidden; 
  max-width: 100%;
  contain: paint;
  margin-block: var(--block-offset);
}

.ls-curved-carousel.fadeout {
  --fadeout: linear-gradient(90deg, transparent, rgba(255,255,255,1) 8%, rgba(255,255,255,1) 92%, transparent 100%);
}
.ls-curved-carousel { -webkit-mask-image: var(--fadeout); mask-image: var(--fadeout); }

.ls-curved-carousel__stage {
  perspective: var(--perspective);
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}
.ls-curved-carousel__ring { position:absolute; inset:0; transform-style:preserve-3d; }

.ls-curved-carousel__slide {
  position: absolute;
  transform-style: preserve-3d;
  overflow: hidden;
  border-radius: var(--slide-radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  pointer-events: auto; /* ensure slide is clickable */
}
.ls-curved-carousel__media {
  width: 100%; height: 100%; object-fit: cover; display: block;
  pointer-events: auto; /* ensure img itself accepts click */
}

/* Edge arrows */
.ls-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 64px;
  border: none; background: rgba(0,0,0,.5);
  backdrop-filter: blur(6px);
  border-radius: 8px; cursor: pointer; z-index: 5;
}
.ls-nav:hover { background: rgba(0,0,0,.66); }
.ls-nav--prev { left: 10px; }
.ls-nav--next { right: 10px; }
.ls-nav::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 14px; height: 14px;
  border-top: 2px solid #fff; border-right: 2px solid #fff;
  transform: rotate(45deg);
}
.ls-nav--prev::before { transform: rotate(-135deg); left: 2px; }
.ls-nav--next::before { transform: rotate(45deg); right: 2px; }

/* Lightbox */
.ls-lightbox { position: fixed; inset:0; background: rgba(0,0,0,.82);
  display:grid; place-items:center; opacity:0; pointer-events:none;
  transition: opacity .25s ease; z-index:1000; }
.ls-lightbox[data-state="visible"] { opacity:1; pointer-events:all; }
.ls-lightbox__media { max-width:min(92vw, 1400px); max-height:90vh; object-fit:contain; border-radius:0; background:#000; box-shadow:0 20px 80px rgba(0,0,0,.5); }
.ls-lightbox__close { position:absolute; top:16px; right:16px; width:40px; height:40px; border:none; border-radius:8px; background:rgba(255,255,255,.2); cursor:pointer;}
.ls-lightbox__close::before, .ls-lightbox__close::after { content:""; position:absolute; left:50%; top:50%; width:22px; height:2px; background:#fff; transform-origin:center;}
.ls-lightbox__close::before { transform: translate(-50%,-50%) rotate(45deg);}
.ls-lightbox__close::after  { transform: translate(-50%,-50%) rotate(-45deg);}

@media (max-width: 767px) {
  .ls-curved-carousel { height: var(--viewport-height-m); margin-block: var(--block-offset-m); }
  .ls-curved-carousel__stage { perspective: var(--perspective-m); }
}

@media (max-width: 767px) {
  .ls-curved-carousel {
    --viewport-height-m: 280px; 
    --block-offset-m: 8px;      
  }

  .ls-nav { height: 48px; width: 36px; }
}

/* Lightbox nav (prev/next) */
.ls-lightbox__nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 64px;
  border: 0; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(6px);
  z-index: 1001;
}
.ls-lightbox__nav:hover{ background: rgba(255,255,255,.28); }
.ls-lightbox__nav--prev{ left: 16px; }
.ls-lightbox__nav--next{ right: 16px; }

.ls-lightbox__nav::before{
  content:""; position:absolute; inset:0; margin:auto;
  width:16px; height:16px;
  border-top:2px solid #fff; border-right:2px solid #fff;
  transform: rotate(45deg);
}
.ls-lightbox__nav--prev::before{ transform: rotate(-135deg); }
.ls-lightbox__nav--next::before{ transform: rotate(45deg); }

@media (max-width: 767px){
  .ls-lightbox__nav{ width: 38px; height: 56px; }
}