/* ==========================================================================
   zoom.css — the magnifier and the full-screen photograph viewer
   --------------------------------------------------------------------------
   Loaded on product.html only, which is the only page with a gallery.
   Behaviour is in assets/js/zoom.js.

   Nothing here names a colour except through --brand, so it comes out red on
   the brand token, so a restyle reaches it with no edit here.
   ========================================================================== */

/* ==========================================================================
   1. THE HOVER MAGNIFIER
   --------------------------------------------------------------------------
   The picture scales up with its transform-origin following the pointer, so
   whatever is under the cursor stays under the cursor. --zoom is written by
   zoom.js per image and is capped at that file's own resolution — see the
   comment at the top of zoom.js for why that matters.
   ========================================================================== */
.pdp__stage {
  /* set by zoom.js; the fallbacks keep the rules valid before it runs */
  --zoom: 1;
  --ox: 50%;
  --oy: 50%;
}

.pdp__stage.is-zoomable { cursor: zoom-in; }

.pdp__stage img {
  transform-origin: var(--ox) var(--oy);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.3, 1);
  will-change: transform;
}

/*
  No transition while magnified: the origin changes on every mousemove, and a
  transition on top of that lags behind the pointer instead of tracking it.
*/
.pdp__stage.is-magnifying img {
  transform: scale(var(--zoom));
  transition: none;
}

/* a quiet hint, so it is discoverable without a label shouting about it */
.pdp__stage.is-zoomable::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background:
    /* a magnifier drawn from gradients — no icon file */
    linear-gradient(currentColor, currentColor) 15px 20px / 8px 2px no-repeat,
    radial-gradient(circle 6px at 12px 12px, transparent 4.4px, currentColor 4.4px 6px, transparent 6px);
  color: #6d7175;
  background-color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  opacity: 0.85;
  transform: rotate(-45deg);
  pointer-events: none;
  transition: opacity 200ms ease;
}

.pdp__stage.is-magnifying::after { opacity: 0; }

/* on a touch screen there is no hover, so the hint would be a lie about how it
   works — the tap-to-open behaviour is the same either way */
@media (hover: none) {
  .pdp__stage.is-zoomable { cursor: default; }
  .pdp__stage.is-zoomable::after { opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
  .pdp__stage img { transition: none; }
  .pdp__stage.is-magnifying img { transform: none; }
}

/* ==========================================================================
   2. THE FULL-SCREEN VIEWER
   ========================================================================== */
html.zoom-open { overflow: hidden; }   /* stop the page scrolling behind it */

.zoombox {
  position: fixed;
  inset: 0;
  z-index: 200;                        /* above the cart drawer and its scrim */
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(12, 12, 14, 0.94);
  backdrop-filter: blur(3px);
  animation: zoomIn 180ms ease;
}

.zoombox[hidden] { display: none; }

@keyframes zoomIn { from { opacity: 0; } to { opacity: 1; } }

.zoombox__frame {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.zoombox__img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  background: #fff;
  border-radius: 4px;
  /* the photographs are studio shots on white, so a white plate behind them
     reads as the photograph rather than as a box */
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
}

/* only offer 1:1 when the file is genuinely bigger than the screen */
.zoombox__img.can-actual { cursor: zoom-in; }

.zoombox__img.is-actual {
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  cursor: grab;
}

.zoombox__img.is-dragging { cursor: grabbing; }

/* ------------------------------- controls ------------------------------ */
.zoombox__close,
.zoombox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease;
}

.zoombox__close:hover,
.zoombox__nav:hover { background: var(--brand); border-color: var(--brand); }

.zoombox__close:focus-visible,
.zoombox__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.zoombox__close svg,
.zoombox__nav svg { width: 20px; height: 20px; }

.zoombox__close {
  top: clamp(0.75rem, 2vw, 1.5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
}

.zoombox__nav { top: 50%; transform: translateY(-50%); }
.zoombox__nav--prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.zoombox__nav--next { right: clamp(0.5rem, 2vw, 1.5rem); }

/* with a single photograph there is nowhere to go */
.zoombox:not(.has-many) .zoombox__nav { display: none; }

.zoombox__count {
  position: absolute;
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--vh-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.7);
}

/*
  SAY SO WHEN THE FILE IS SMALL. Several of these photographs came from
  suppliers at 300 to 600 pixels across. Opening one full-screen and finding it
  soft looks like a fault in the website; saying it is the picture, not the
  page, is more use to a customer deciding whether to ring up and ask.
*/
.zoombox.is-lowres .zoombox__frame::after {
  content: "This is the largest version of this photograph we have. Ask at the counter for a closer look at the part.";
  display: block;
  max-width: 34rem;
  margin-top: 0.9rem;
  font-family: var(--vh-mono, ui-monospace, monospace);
  font-size: 0.68rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
}

/* ------------------------------ right-to-left -------------------------- */
/* the arrows swap sides; "next" still means the next photograph */
[dir="rtl"] .zoombox__close { right: auto; left: clamp(0.75rem, 2vw, 1.5rem); }
[dir="rtl"] .zoombox__nav--prev { left: auto; right: clamp(0.5rem, 2vw, 1.5rem); }
[dir="rtl"] .zoombox__nav--next { right: auto; left: clamp(0.5rem, 2vw, 1.5rem); }
[dir="rtl"] .zoombox__nav svg { transform: scaleX(-1); }

[lang="ur"] .zoombox.is-lowres .zoombox__frame::after {
  content: "اس تصویر کا اس سے بڑا سائز ہمارے پاس نہیں۔ پرزہ قریب سے دیکھنے کے لیے کاؤنٹر پر پوچھیں۔";
  font-family: var(--ur-face);
  font-size: 0.95rem;
  line-height: 2;
  letter-spacing: normal;
}

@media (prefers-reduced-motion: reduce) {
  .zoombox { animation: none; }
}