/* Zoom only the main image, never the gallery, controls or product details. */
#modalPhoto.zoom-ready { cursor: zoom-in; touch-action: pan-y pinch-zoom; }
#modalPhoto.is-zoomed { cursor: zoom-out; touch-action: none; }
#modalPhoto.is-dragging { cursor: grabbing; }
#modalPhoto:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: -5px; }
#modalPhoto #modalImg {
  transform-origin: center;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
#modalPhoto.is-zoomed #modalImg { will-change: transform; }
#modalPhoto .placeholder-mark { width: 64px; height: 88px; color: var(--ink-2); opacity: .32; }
#modalPhoto .placeholder-mark svg { display: block; width: 100%; height: 100%; }
.image-zoom-tools {
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 5;
  cursor: default;
  max-width: calc(100% - 44px);
}
.image-zoom-tools[hidden], .image-zoom-levels[hidden], .image-zoom-hint[hidden] { display: none; }
.image-zoom-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  width: fit-content;
  padding: 4px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  box-shadow: 0 3px 16px rgba(40, 25, 12, .05);
  backdrop-filter: blur(8px);
}
.image-zoom-toolbar button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: 500 12px/1 var(--sans);
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.image-zoom-toolbar button:hover { background: var(--cream); color: var(--ink); }
.image-zoom-toolbar button:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.image-zoom-toolbar button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.image-zoom-toolbar svg { stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.image-zoom-levels { display: flex; gap: 2px; }
.zoom-contract, .is-zoomed .zoom-expand { display: none; }
.is-zoomed .zoom-contract { display: block; }
.image-zoom-hint {
  display: block;
  width: fit-content;
  margin-top: 9px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .9);
  color: var(--ink-2);
  font: 400 11px/1.4 var(--sans);
  pointer-events: none;
}
@media (pointer: coarse) {
  .image-zoom-toolbar button { min-height: 44px; min-width: 44px; }
}
@media (max-width: 640px) {
  .image-zoom-tools { top: 12px; left: 12px; max-width: calc(100% - 118px); }
  .image-zoom-toolbar button { padding-inline: 10px; gap: 5px; }
  .image-zoom-hint { max-width: 175px; }
}
@media (prefers-reduced-motion: reduce) {
  .image-zoom-toolbar button { transition: none; }
}