/* Image Magnifier Styles */

.image-magnifier-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  user-select: none;
}

.image-magnifier-container:hover {
  cursor: crosshair;
}

.image-magnifier-container.magnifying img {
  filter: none;
}

/* ── In-place zoom (mobile/tablet) ── */
.image-magnifier-container.inplace-zoom {
  cursor: move;
  overflow: hidden;
}

.image-magnifier-container.inplace-zoom img {
  transition: transform 0.15s ease-out;
  will-change: transform;
}

.magnifier-lens {
  position: absolute;
  left: 0;
  top: 0;
  /* box-sizing: border-box keeps the lens's visual size identical to the
     `width`/`height` declaration even with a 2px border. Without this the
     JS-cached half-width is 75px (content-only) while the visible lens is
     154px wide, so the lens drifts 2px away from the cursor on each axis. */
  box-sizing: border-box;
  border: 2px solid #007185;
  border-radius: 2px;
  background: rgba(0, 113, 133, 0.12);
  pointer-events: none;
  display: none;
  z-index: 10;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.85),
    0 2px 12px rgba(0, 0, 0, 0.18);
  /* CRITICAL: no transform/left/top transition. The lens must snap
     instantly to the cursor position each frame; any transition turns
     the lens into a delayed chaser, which is the exact "laggy" feel
     users were reporting. Opacity-only transition is fine for fade. */
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* ── Result panel (desktop side-panel zoom) ── */
.magnifier-result {
  position: fixed;
  /* Match the lens box model so the JS's panel-half-width centering math
     produces a pixel-accurate alignment between the lens center and the
     panel center. */
  box-sizing: border-box;
  border: 1px solid #d5d9d9;
  border-radius: 4px;
  background: white;
  background-repeat: no-repeat;
  background-position: 0 0;
  overflow: hidden;
  display: none;
  z-index: 10002;
  pointer-events: none;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.28),
    0 6px 14px rgba(0, 0, 0, 0.15);
  /* No transitions: background-position updates must be instant. */
  will-change: background-position;
}

.magnifier-result::before {
  content: '';
  display: none;
}

/* Hide the toggle button since we're using hover/tap activation */
.magnifier-toggle {
  display: none !important;
}

/* ── Desktop: default sizes ── */
.magnifier-lens {
  width: 150px;
  height: 150px;
}

.magnifier-result {
  width: 400px;
  height: 400px;
}

/* ── Mobile ≤768px: hide result panel (in-place zoom used instead) ── */
@media (max-width: 768px) {
  .magnifier-lens {
    display: none !important;  /* No lens on mobile – in-place zoom instead */
  }

  .magnifier-result {
    display: none !important;  /* No side panel on mobile */
  }

  .image-magnifier-container {
    cursor: zoom-in;
  }

  .image-magnifier-container.inplace-zoom {
    cursor: move;
  }
}

/* ── Landscape on short screens: cap result height ── */
@media (orientation: landscape) and (max-height: 500px) {
  .magnifier-lens {
    width: 100px !important;
    height: 100px !important;
  }

  .magnifier-result {
    max-height: calc(100vh - 20px) !important;
  }
}

/* ── Small desktop / tablet ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .magnifier-lens {
    width: 120px;
    height: 120px;
  }

  .magnifier-result {
    width: 300px;
    height: 300px;
  }
}

/* High-DPI: keep default bilinear interpolation. `crisp-edges` and
   `pixelated` make product photos look blocky when upscaled — we want
   smooth scaling on retina displays, not nearest-neighbor. */

/* Opacity-only transition. NEVER transition transform, left, top, or
   background-position — those carry the lens/result panel position and
   must update instantly each frame. The legacy rule `transition: transform 0.2s`
   on .magnifier-lens turned the lens into a delayed chaser whenever JS
   set its position via transform; we deliberately omit that here. */
.magnifier-lens,
.magnifier-result {
  transition: opacity 0.15s ease;
}

.image-magnifier-container img {
  transition: filter 0.3s ease;
}

/* Accessibility — disable the opacity fade if the user prefers
   reduced motion. The lens position itself was never animated, so
   nothing else to disable here. */
@media (prefers-reduced-motion: reduce) {
  .magnifier-lens,
  .magnifier-result,
  .magnifier-toggle,
  .image-magnifier-container img {
    transition: none;
  }
}

/* Print styles */
@media print {
  .magnifier-toggle,
  .magnifier-lens,
  .magnifier-result {
    display: none !important;
  }
}