/* Base */
.zoom-wrapper { display:inline-block; position:relative; }
.zoom-target { background:none; border:0; padding:0; height: 100%; width: 100%; }
.zoomable { display:block; cursor: url(media/tealzoom.gif) 16 16, auto !important; }

.zoom-target img { object-fit: cover; height: 100%; width: 100%; }

/* Close (×) – hidden by default */
.zoom-close {
  position:fixed; top:16px; right:16px; width:40px; height:40px;
  display:none; cursor:pointer; z-index:10002; -webkit-tap-highlight-color:transparent;
}
.zoom-close::before, .zoom-close::after {
  content:""; position:absolute; top:50%; left:50%; width:24px; height:2px;
  background:var(--line); transform-origin:center;
}
.zoom-close::before { transform:translate(-50%,-50%) rotate(45deg); }
.zoom-close::after  { transform:translate(-50%,-50%) rotate(-45deg); }

/* Fullscreen transparent dismiss layer */
.zoom-dismiss {
  position:fixed; inset:0; display:none; cursor:pointer; z-index:10000;
  touch-action:none; overscroll-behavior:none; -webkit-overflow-scrolling:auto;
}

/* Touch niceties */
.zoom-target, .zoom-close, .zoom-dismiss, .zoomable {
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-user-drag:none;
}

/* Unified zoom behavior (desktop + mobile) */
.zoom-wrapper.is-open .zoomable {
  position:fixed; top:50%; left:50%;
  max-height:90vh; max-width:90vw; width:auto; height:auto;
  transform:translate(-50%,-50%); z-index:9999; cursor: url(media/tealzoom.gif) 16 16, auto !important;
  box-shadow:0 8px 24px rgba(0,0,0,.4); border-radius:8px; background:#fff;
  will-change:transform, top, left; backface-visibility:hidden;
}
.zoom-wrapper.is-open .zoom-close { display:block; }
.zoom-wrapper.is-open .zoom-dismiss { display:block; }

/* Larger close target on touch devices */
@media (hover:none), (pointer:coarse) {
  .zoom-close { width:48px; height:48px; top:20px; right:20px; }
}