.ss-card-carousel{
  position:relative;
  overflow:hidden;
  background:#111;
  touch-action:pan-y;
  user-select:none;
}

.ss-card-carousel-view{
  position:relative;
}

.ss-card-carousel .result-thumb,
.ss-card-carousel-image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.ss-card-carousel-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  border:0;
  border-radius:999px;
  background:rgba(10, 10, 10, 0.62);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  z-index:3;
  transition:opacity .15s ease, background .15s ease;
}

.ss-card-carousel-arrow:hover{
  background:rgba(10, 10, 10, 0.82);
}

.ss-card-carousel-arrow[disabled]{
  opacity:0;
  pointer-events:none;
}

.ss-card-carousel-arrow--prev{
  left:10px;
}

.ss-card-carousel-arrow--next{
  right:10px;
}

.ss-card-carousel-dots{
  position:absolute;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  display:flex;
  gap:6px;
  z-index:3;
}

.ss-card-carousel-dot{
  width:7px;
  height:7px;
  border-radius:999px;
  background:rgba(255,255,255,.42);
  transition:background .15s ease, transform .15s ease;
}

.ss-card-carousel-dot.is-active{
  background:#fff;
  transform:scale(1.12);
}

.ss-card-carousel.is-single .ss-card-carousel-arrow,
.ss-card-carousel.is-single .ss-card-carousel-dots{
  display:none;
}

.detail-media[data-has-gallery="1"]{
  position:relative;
}

.detail-media[data-has-gallery="1"] .ss-card-carousel{
  border-radius:12px;
}

.detail-media .ss-modal-carousel{
  border-radius:12px;
  max-width:100%;
}

.detail-media .ss-modal-carousel .ss-card-carousel-view{
  border-radius:12px;
  background:#111;
}

.detail-media .ss-modal-carousel img{
  cursor:zoom-in;
}

body.ss-image-preview-open{
  overflow:hidden;
}

.ss-image-preview-backdrop{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  box-sizing:border-box;
  background:rgba(0,0,0,.92);
  z-index:16000;
}

.ss-image-preview-backdrop.open{
  display:flex;
}

.ss-image-preview-shell{
  position:relative;
  width:min(96vw, 1200px);
  height:min(92vh, 920px);
  display:flex;
  align-items:center;
  justify-content:center;
}

.ss-image-preview-view{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  touch-action:pan-y;
}

.ss-image-preview-image{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}

.ss-image-preview-close{
  position:absolute;
  top:12px;
  right:12px;
  width:42px;
  height:42px;
  border:0;
  border-radius:999px;
  background:rgba(10,10,10,.72);
  color:#fff;
  font-size:28px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:4;
}

.ss-image-preview-shell .ss-card-carousel-arrow{
  width:44px;
  height:44px;
  background:rgba(10,10,10,.72);
}

.ss-image-preview-shell .ss-card-carousel-dots{
  bottom:14px;
}

@media (max-width: 900px){
  .ss-card-carousel-arrow{
    display:none;
  }

  .detail-media .ss-modal-carousel .ss-card-carousel-arrow,
  .ss-image-preview-shell .ss-card-carousel-arrow{
    display:flex !important;
  }

  .ss-image-preview-backdrop{
    padding:16px;
  }
}
