html.krp-gv-open, body.krp-gv-open { overflow: hidden !important; }

#krp-gv {
  position: fixed; inset: 0; z-index: 2147483000;
  display: none; background: rgba(0,0,0,.98);
  opacity: 0; transition: opacity .18s ease;
  font-family: Arial, sans-serif;
}
#krp-gv.krp-gv-visible { display: block; }
#krp-gv.krp-gv-ready { opacity: 1; }

#krp-gv-stage {
  position: absolute; inset: 0;
  overflow: hidden;
  touch-action: none;
}
#krp-gv-img {
  position: absolute; left: 50%; top: 50%;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 110px);
  width: auto; height: auto;
  transform-origin: 50% 50%;
  transform: translate3d(-50%,-50%,0) scale(1);
  will-change: transform;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
  cursor: default;
}
#krp-gv.krp-gv-zoomed #krp-gv-img { cursor: grab; }
#krp-gv.krp-gv-dragging #krp-gv-img { cursor: grabbing; }

.krp-gv-btn {
  position: absolute; z-index: 5;
  border: 0; color: #fff; background: rgba(0,0,0,.34);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#krp-gv-close {
  top: max(14px, env(safe-area-inset-top)); right: 14px;
  width: 46px; height: 46px; border-radius: 50%;
  font-size: 32px; font-weight: 300; line-height: 1;
}
.krp-gv-arrow {
  top: 50%; width: 48px; height: 64px;
  margin-top: -32px; border-radius: 24px;
  font-size: 46px; font-weight: 200; line-height: 1;
}
#krp-gv-prev { left: 10px; }
#krp-gv-next { right: 10px; }

#krp-gv-count {
  position: absolute; z-index: 5;
  left: 50%; bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  color: #fff; background: rgba(0,0,0,.40);
  border-radius: 999px; padding: 7px 13px;
  font-size: 14px; line-height: 1;
  pointer-events: none;
}
#krp-gv-loading {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  color:#fff; font-size:14px; opacity:.8;
}
#krp-gv.krp-gv-zoomed .krp-gv-arrow { opacity: .35; }

@media (min-width: 768px) {
  #krp-gv-img { max-width: calc(100vw - 120px); max-height: calc(100vh - 90px); }
  .krp-gv-arrow { width: 54px; height: 72px; border-radius: 27px; }
  #krp-gv-prev { left: 20px; } #krp-gv-next { right: 20px; }
}