.kbpg { width: 100%; }
.kbpg__wrap { display: flex; gap: 12px; align-items: flex-start; }
.kbpg__thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.kbpg__thumb { border: 1px solid rgba(0,0,0,.12); background: transparent; padding: 0; cursor: pointer; border-radius: 6px; overflow: hidden; line-height: 0; }
.kbpg__thumb img { display:block; width: 72px; height: 72px; object-fit: cover; }
.kbpg__thumb.is-active { outline: 2px solid currentColor; outline-offset: 1px; }
.kbpg__main { position: relative; flex: 1; min-width: 0; }
.kbpg__mainBtn {
  border: 1px solid rgba(0,0,0,.08);
  background: transparent;
  padding: 0;
  cursor: zoom-in;
  width: 100%;
  display:block;
  /* Critical: keep hover-zoom inside a viewport window */
  overflow: hidden;
  border-radius: 10px;
}
.kbpg__mainImg {
  width: 100%;
  height: auto;
  display:block;
  border: 0;
  border-radius: 0;
  will-change: transform;
}
.kbpg__zoomHint { position: absolute; right: 10px; bottom: 10px; font-size: 12px; padding: 4px 8px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; opacity: .7; }

/* side layout: thumbs column */
.kbpg__wrap--side .kbpg__thumbs { flex-direction: column; width: 86px; }
.kbpg__wrap--side .kbpg__thumb img { width: 78px; height: 78px; }

/* bottom layout */
.kbpg__wrap--bottom { flex-direction: column; }
.kbpg__wrap--bottom .kbpg__thumbs { order: 2; }

/* responsive: force bottom on <= 1024px */
@media (max-width: 1024px) {
  .kbpg__wrap { flex-direction: column; }
  .kbpg__thumbs { flex-direction: row; width: auto; }
}

/* Hover zoom (desktop only) */
@media (hover:hover) and (pointer:fine) {
  .kbpg__main.is-zooming .kbpg__mainImg { transform: scale(1.8); }
  .kbpg__mainImg { transform-origin: center center; transition: transform .08s linear; }
}

/* Lightbox */
.kbpg-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.86); display: none; z-index: 999999; }
.kbpg-lightbox.is-open { display: block; }
.kbpg-lightbox__bar { position: absolute; top: 12px; left: 12px; right: 12px; display:flex; gap: 10px; justify-content: flex-end; }
.kbpg-lightbox__btn { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.18); padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.kbpg-lightbox__stage { position:absolute; inset: 0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.kbpg-lightbox__img { max-width: 92vw; max-height: 86vh; transform: translate(0,0) scale(1); will-change: transform; cursor: grab; user-select: none; }
.kbpg-lightbox__nav { position:absolute; inset: 0; display:flex; align-items:center; justify-content:space-between; padding: 0 10px; pointer-events:none; }
.kbpg-lightbox__nav button { pointer-events:auto; }