/* Detail-zoom: plusknop + fullscreen zoom met pan/zoom */
.zoom-container { position: relative; }
.zoom-trigger {
  position: absolute; right: 10px; bottom: 10px; z-index: 4;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(20, 24, 23, .18);
  background: rgba(255, 255, 255, .92); color: #141817;
  font: 500 22px/1 Inter, sans-serif; cursor: zoom-in;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
  opacity: .88; transition: opacity .2s ease, transform .2s ease;
}
.zoom-trigger:hover, .zoom-trigger:focus-visible { opacity: 1; transform: scale(1.06); }
.zoom-trigger:focus-visible { outline: 2px solid #141817; outline-offset: 2px; }
@media (hover: none) { .zoom-trigger { opacity: .95; } }

.zoom-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 8, 10, .96); color: #fff;
}
.zoom-overlay[hidden] { display: none; }
.zoom-toolbar {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  display: flex; gap: 8px; align-items: center;
}
.zoom-toolbar button {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .1); color: #fff;
  font: 400 22px/1 Inter, sans-serif; cursor: pointer;
}
.zoom-toolbar button:hover { background: rgba(255, 255, 255, .2); }
.zoom-toolbar button[data-zoom-reset] { width: auto; padding: 0 14px; border-radius: 999px; font-size: 11px; letter-spacing: .1em; }
.zoom-stage {
  position: absolute; inset: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  touch-action: none; cursor: grab;
}
.zoom-stage:active { cursor: grabbing; }
.zoom-stage img {
  max-width: 92vw; max-height: 88vh; width: auto; height: auto;
  object-fit: contain; user-select: none; -webkit-user-drag: none;
  transform-origin: center center; will-change: transform;
}
.zoom-hint {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  margin: 0; padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .75);
  font: 400 11px/1.4 Inter, sans-serif; white-space: nowrap;
}
@media (max-width: 520px) {
  .zoom-trigger { width: 32px; height: 32px; right: 8px; bottom: 8px; font-size: 20px; }
  .zoom-toolbar { top: 10px; right: 10px; gap: 6px; }
  .zoom-toolbar button { width: 38px; height: 38px; }
  .zoom-hint { font-size: 10px; bottom: 10px; }
}