/* Product detail gallery (5 images, slider, zoom) */
.pd-gallery { display: grid; gap: 16px; }
.pd-main { position: relative; width: 100%; max-width: 480px; }
.pd-main-viewport { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid #ddd; border-radius: 8px; display:flex; align-items:center; justify-content:center; background:#fff; }
.pd-main-viewport img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.pd-prev, .pd-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); color:#fff; border:0; width:36px; height:36px; border-radius: 50%; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.pd-prev { left: 8px; } .pd-next { right: 8px; }
.pd-prev:disabled, .pd-next:disabled { opacity: .4; cursor: default; }

.pd-thumbs { display:flex; gap: 8px; flex-wrap: wrap; max-width: 520px; }
.pd-thumb { border: 2px solid transparent; padding:0; background: transparent; cursor: pointer; border-radius: 6px; overflow: hidden; width: 72px; height: 72px; }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; display:block; }
.pd-thumb.is-active { border-color: #222; }

/* Zoom overlay */
.pd-zoom-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.8); display: none; align-items: center; justify-content: center; z-index: 9999; }
.pd-zoom-overlay.is-open { display: flex; }
.pd-zoom-img-wrap { position: relative; overflow: hidden; max-width: 90vw; max-height: 90vh; }
.pd-zoom-img { transform-origin: center center; cursor: grab; user-select: none; -webkit-user-drag: none; display:block; max-width: none; }
.pd-zoom-close { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,0.6); color:#fff; border:0; padding:8px 12px; border-radius: 6px; cursor: pointer; }
.pd-zoom-hint { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); color:#fff; background: rgba(0,0,0,0.35); padding: 6px 10px; border-radius: 6px; font-size: 12px; text-align: center;}

@media (min-width: 960px) {
  .productDetail { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
  .pd-main { max-width: 560px; }
  .pd-thumbs { max-width: 560px; }
}