/* Product page gallery + full-screen viewer — Harrington & Sons */

.pg-stage {
  position: relative;
  border: 1px solid #E5E5E5;
  background: #FFFFFF;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  touch-action: pan-y;
}
.pg-slide {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  padding: 0; margin: 0; border: 0; background: #FFFFFF;
  cursor: zoom-in;
}
.pg-slide[hidden] { display: none; }
.pg-slide img {
  width: 100%; height: 100%;
  object-fit: contain;            /* whole photo, never cropped */
}

.pg-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #000; background: rgba(255,255,255,.92); color: #000;
  font: 400 30px/1 Georgia, serif; padding: 0 0 4px;
  cursor: pointer;
}
.pg-arrow:hover { background: #000; color: #FFFFFF; }
.pg-prev { left: 10px; }
.pg-next { right: 10px; }

.pg-count, .pg-hint {
  position: absolute; bottom: 10px; z-index: 2;
  font: 500 11px/1 "Lora", Georgia, serif; letter-spacing: .14em; text-transform: uppercase;
  background: rgba(255,255,255,.92); border: 1px solid #E5E5E5; padding: 6px 9px;
  pointer-events: none;
}
.pg-count { left: 10px; }
.pg-hint { right: 10px; }

.pg-thumbs {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 8px;
}
.pg-thumb {
  padding: 0; border: 1px solid #E5E5E5; background: #FFFFFF; cursor: pointer;
  aspect-ratio: 1; overflow: hidden; opacity: .6; transition: opacity .15s ease, border-color .15s ease;
}
.pg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-thumb:hover { opacity: 1; }
.pg-thumb.is-active { opacity: 1; border-color: #000; outline: 1px solid #000; outline-offset: -2px; }

/* Full-screen viewer */
.pg-viewer {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.94);
  display: flex; align-items: center; justify-content: center;
}
.pg-viewer[hidden] { display: none; }
body.pg-lock { overflow: hidden; }

.pg-viewer-frame {
  position: absolute; inset: 56px 64px 56px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-in;
  touch-action: none;
}
.pg-viewer-frame.is-zoomed { cursor: grab; }
.pg-viewer-frame.is-dragging { cursor: grabbing; }
.pg-viewer-img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  transform-origin: 50% 50%;
  transition: transform .2s ease;
  user-select: none; -webkit-user-drag: none;
}
.pg-viewer-frame.is-dragging .pg-viewer-img { transition: none; }

.pg-close {
  position: absolute; top: 10px; right: 12px; z-index: 3;
  width: 44px; height: 44px; border: 0; background: none; color: #FFFFFF;
  font: 300 38px/1 Georgia, serif; cursor: pointer;
}
.pg-viewer-arrow { background: rgba(0,0,0,.5); color: #FFFFFF; border-color: rgba(255,255,255,.6); }
.pg-viewer-arrow:hover { background: #FFFFFF; color: #000; }
.pg-viewer-arrow.pg-prev { left: 12px; }
.pg-viewer-arrow.pg-next { right: 12px; }

.pg-viewer-bar {
  position: absolute; left: 0; right: 0; bottom: 14px; margin: 0;
  display: flex; justify-content: center; gap: 18px;
  color: rgba(255,255,255,.8);
  font: 500 11px/1 "Lora", Georgia, serif; letter-spacing: .14em; text-transform: uppercase;
}

@media (max-width: 719px) {
  .pg-arrow { width: 38px; height: 38px; font-size: 26px; }
  .pg-viewer-frame { inset: 56px 0 48px; }
  .pg-viewer-arrow { top: auto; bottom: 4px; transform: none; }
  .pg-viewer-arrow.pg-prev { left: 8px; }
  .pg-viewer-arrow.pg-next { right: 8px; }
  .pg-viewer-tip { display: none; }
}