/* DS KNWLS Scroll Viewer v6.2 SAFE
   - Background pure white (mobile + desktop)
   - Remove top spacer (images go up; topbar overlays image)
   - Mobile zoom via real width (no cut on iOS)
   - Gaps: mobile 1px, desktop 2px
*/

:root{
  --bg:#ffffff; /* ✅ white */
  --ui:#000;
  --ui-hover:rgba(0,0,0,.7);

  --dot-inactive:rgba(255,255,255,.95);
  --dot-active:rgba(0,0,0,.55);

  --font-d:500 11px/1 Helvetica, Arial, sans-serif;
  --font-m:500 10px/1 Helvetica, Arial, sans-serif;

  --zoom:1;
  --gap-d:2px;
  --gap-m:1px;

  --top-d:64px;
  --top-m:58px;
}

.dskv{
  position:fixed;
  inset:0;
  z-index:999999;
  background:var(--bg);
  display:none;
}
.dskv.dskv--open{display:block;}

/* Topbar overlays (no spacer). Keep transparent so image shows behind */
.dskv__top{
  position:fixed;
  top:0; left:0; right:0;
  height:var(--top-d);
  padding:0 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  pointer-events:none;
  z-index:20;
  background:transparent;
}
.dskv__counter{
  font:var(--font-d);
  text-transform:uppercase;
  color:var(--ui);
  opacity:.85;
}
.dskv__close{
  pointer-events:auto;
  border:0;
  background:transparent !important;
  box-shadow:none !important;
  outline:none;
  font:var(--font-d);
  color:var(--ui);
  cursor:pointer;
  padding:4px 6px;
  border-radius:0;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  transition:color .18s ease, transform .18s ease;
}
.dskv__close:hover{ color:var(--ui-hover); transform:translateY(-1px); }
.dskv__close:active,
.dskv__close:focus,
.dskv__close:focus-visible{ background:transparent !important; color:var(--ui-hover); outline:none !important; }

.dskv__scroller{
  position:absolute;
  inset:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  box-sizing:border-box;
  padding:0;
}

/* Items stacked with tight gaps */
.dskv__item{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  margin:0 0 var(--gap-d) 0;
  padding:0;
  overflow:visible;
}
.dskv__inner{
  width:min(100vw, 980px);
}
.dskv__img{
  width:100%;
  height:auto;
  display:block;
  max-width:100%;
}

/* Dots */
.dskv__dots{
  position:fixed;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:5px;
  z-index:30;
  pointer-events:auto;
  background:transparent !important;
}
.dskv__dotbtn{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent !important;
  padding:6px 10px;
  margin:0;
  cursor:pointer;
  line-height:0;
  border-radius:0;
  box-shadow:none !important;
  outline:none !important;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.dskv__dotline{
  display:block;
  width:1px;
  height:18px;
  background:var(--dot-inactive);
  transform:scaleX(.5);
  transition:background .2s ease;
}
.dskv__dotbtn.is-active .dskv__dotline{ background:var(--dot-active); }

@media(max-width:767px){
  .dskv__top{ height:var(--top-m); padding:0 16px; }
  .dskv__counter{ font:var(--font-m); }
  .dskv__close{ font:var(--font-m); }
  .dskv__item{ margin-bottom:var(--gap-m); }
  .dskv__inner{ width:100vw; overflow:visible; }

  /* ✅ Real zoom for iOS: image width expands; height follows => no cut */
  .dskv__img{
    width:calc(100vw * var(--zoom));
    max-width:none;
    margin:0 auto;
  }

  .dskv__dots{ right:10px; gap:4px; }
  .dskv__dotbtn{ padding:8px 12px; }
  .dskv__dotline{ height:16px; }
}