/* =========================================================
   SV PRODUCT SLIDER — NATIVE SCROLL (OC3)
   ========================================================= */

:root{
  --svps-gap: 2px;
  --svps-vbar-w: 4px;
  --svps-bar-h: 5px;
  --svps-thumb-pc-h: 72px;
  --svps-thumb-mobile-w: 64px;
}

.sv-ps{
  position:relative;
  display:grid;
  grid-template-columns:auto auto 1fr;
  gap:0px;
  width:100%;
  align-items:stretch;
}

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

.sv-ps__main{
  position:relative;
  width:100%;
  min-width:0;
  align-self:stretch;
}

.sv-ps__link{
  display:block;
  position:relative;
  text-decoration:none;
  color:inherit;
}

.sv-ps__stage{
  position:relative;
  width:100%;
  overflow:hidden;
  background:#fff;
}

.sv-ps__sizer{
  width:100%;
  pointer-events:none;
  visibility:hidden;
}

.sv-ps__sizer-img{
  width:100%;
  height:auto;
  display:block;
}

.sv-ps__viewport{
  position:absolute;
  inset:0;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  cursor:grab;
  scroll-behavior:auto;
  scrollbar-width:none;
}

.sv-ps__viewport::-webkit-scrollbar{ display:none; }
.sv-ps__viewport:active{ cursor:grabbing; }

.sv-ps__track{
  display:flex;
  height:100%;
  gap:var(--svps-gap);
  transform:none !important;
  transition:none !important;
  will-change:scroll-position;
}

.sv-ps__slide{
  flex:0 0 100%;
  max-width:100%;
  height:100%;
  overflow:hidden;
  background:#fff;
}

.sv-ps__img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}

.sv-ps__thumbs{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
  align-self:stretch;
  height:100%;
  min-width:0;
}

.sv-ps__thumbs::-webkit-scrollbar{ display:none; }

.sv-ps__thumb{
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
  opacity:.45;
  transition:opacity .2s ease;
  flex:0 0 auto;
  overflow:hidden;
}

.sv-ps__thumb:hover{ opacity:.7; }

.sv-ps__thumb img{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:contain;
}

.sv-ps__thumb.is-active{
  opacity:1;
}

.sv-ps__vbars{
  display:flex;
  flex-direction:column;
  justify-content:stretch;
  gap:0;
  background:#ddd;
  width:var(--svps-vbar-w);
  min-width:var(--svps-vbar-w);
  max-width:var(--svps-vbar-w);
  overflow:hidden;
  align-self:stretch;
  height:100%;
  margin: 0px 5px;
}

.sv-ps__vbar{
  flex:1 1 auto;
  height:var(--svps-bar-h);
  min-height:var(--svps-bar-h);
  width:100%;
  margin:0;
  padding:0;
  border:none;
  background:transparent;
  cursor:pointer;
}

.sv-ps__vbar.is-active{
  background:#000;
}

.sv-ps__bars{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:none;
  gap:0;
  padding:0;
  z-index:5;
  background:#ddd;
  overflow:hidden;
}

.sv-ps__bar{
  flex:1 1 auto;
  height:var(--svps-bar-h);
  min-height:var(--svps-bar-h);
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
}

.sv-ps__bar.is-active{
  background:#000;
}

.sv-ps:not(.is-ready){ opacity:0; }
.sv-ps.is-ready{
  opacity:1;
  transition:opacity .25s ease;
}

.sv-psv-lock{
  overflow:hidden !important;
  touch-action:none;
}

.sv-psv{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
  background:rgba(0,0,0,.9);
}

.sv-psv.is-open{
  display:block;
}

.sv-psv *,
.sv-psv *::before,
.sv-psv *::after{
  box-sizing:border-box;
}

.sv-psv__wrap{
  position:relative;
  width:100%;
  height:100%;
}

.sv-psv__viewport{
  position:absolute;
  inset:0;
  margin:0;
  padding:0;
  overflow:hidden;
  touch-action:none;
}

.sv-psv__stage{
  position:absolute;
  inset:0;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.sv-psv__img{
  display:block;
  margin:0;
  padding:0;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:100vh;
  object-fit:contain;
  transform-origin:center center;
  transform:translate3d(0,0,0) scale(1);
  transition:transform .12s ease-out;
  user-select:none;
  -webkit-user-drag:none;
  will-change:transform;
}

.sv-psv.is-panning .sv-psv__img,
.sv-psv.is-zoomed .sv-psv__img{
  transition:none;
}

.sv-psv__btn{
  position:absolute;
  z-index:3;
  width:44px;
  height:44px;
  margin:0;
  padding:8px;
  border:0;
  border-radius:0;
  background:transparent !important;
  box-shadow:none !important;
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
}

.sv-psv__btn::before,
.sv-psv__btn::after{
  display:none !important;
}

.sv-psv__btn svg{
  display:block;
  width:100%;
  height:100%;
  fill:none;
  stroke:#a6a6a6;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.92;
  transition:opacity .18s ease, stroke .18s ease;
  filter:none !important;
}

.sv-psv__btn:hover svg,
.sv-psv__btn:focus svg{
  opacity:1;
  stroke:#c6c6c6;
}

.sv-psv__btn:disabled{
  cursor:default;
}

.sv-psv__btn:disabled svg{
  opacity:.35;
}

.sv-psv__btn--close{ top:16px; right:16px; }
.sv-psv__btn--prev{
  top:50%;
  left:16px;
  transform:translateY(-50%);
}
.sv-psv__btn--next{
  top:50%;
  right:16px;
  transform:translateY(-50%);
}
.sv-psv__zoom-ui{
  position:absolute;
  left:50%;
  bottom:18px;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  transform:translateX(-50%);
  pointer-events:none;
}
.sv-psv__zoom-ui .sv-psv__btn{
  position:static;
  transform:none;
  pointer-events:auto;
}
.sv-psv__zoom-val{
  min-width:64px;
  text-align:center;
  color:#a6a6a6;
  font-size:16px;
  line-height:1;
  letter-spacing:.02em;
  user-select:none;
}

@media (max-width:900px){
  .sv-ps{
    grid-template-columns:1fr;
    grid-template-areas:
      'main'
      'thumbs';
    gap:0px;
  }

  .sv-ps__main{
    grid-area:main;
  }

  .sv-ps__thumbs{
    grid-area:thumbs;
    flex-direction:row;
    align-items:flex-start;
    overflow-x:auto;
    overflow-y:hidden;
    width:100%;
    height:auto;
    padding-bottom:2px;
  }

  .sv-ps__vbars{
    display:none !important;
  }

  .sv-ps__bars{
    display:flex !important;
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    width:100%;
    margin: 0px;
    order:3;
  }

  .sv-psv__img{
    width:100%;
    max-width:100%;
    height:auto;
    max-height:none;
  }

  .sv-psv__btn--close{ top:10px; right:10px; }
  .sv-psv__btn--prev{ left:10px; }
  .sv-psv__btn--next{ right:10px; }
  .sv-psv__zoom-ui{ bottom:12px; gap:8px; }
  .sv-psv__zoom-val{ min-width:56px; font-size:15px; }
}