/*!
 * product-zoom.css — styles for the <product-zoom> element.
 * Everything is driven by custom properties, so themes override tokens, not rules.
 */

product-zoom {
  /* --- tokens you will want to override ---------------------------------- */
  --pz-aspect: 1 / 1;
  --pz-gallery-width: 100%;
  --pz-panel-width: 480px;
  --pz-panel-gap: 16px;
  --pz-radius: 10px;
  --pz-gap: 12px;

  --pz-surface: #ffffff;
  --pz-surface-sunken: #f4f5f7;
  --pz-border: #dcdfe4;
  --pz-border-strong: #9aa1ab;
  --pz-accent: #1a1a1a;
  --pz-focus: #2563eb;
  --pz-lens-fill: rgba(37, 99, 235, 0.14);
  --pz-lens-stroke: rgba(37, 99, 235, 0.85);
  --pz-lens-scrim: rgba(255, 255, 255, 0.35);
  --pz-shadow: 0 10px 34px rgba(16, 20, 28, 0.18);
  --pz-viewer-backdrop: rgba(12, 14, 18, 0.92);
  --pz-viewer-fg: #f5f6f8;

  /* Overlay control chrome. Blue by default to match a typical map-style
     zoom bar; point these at your brand colour to restyle the whole bar. */
  --pz-ctl-accent: #1a7ad1;
  --pz-ctl-track: #d6d9dd;
  --pz-ctl-glyph: #2c3037;
  --pz-overlay-width: 780px;
  --pz-overlay-gutter: 12px;

  position: relative;
  display: block;
  width: var(--pz-gallery-width);
  max-width: 100%;
  /* Keeps the child list from setting up its own stacking context surprises. */
  isolation: isolate;
}

/* Dark tokens apply to the OS preference unless the page has explicitly opted
   into light, and to an explicit [data-theme="dark"] regardless of the OS. If
   your app uses a different attribute for its theme switch, change both
   selectors and nothing else. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) product-zoom {
    --pz-surface: #16181d;
    --pz-surface-sunken: #1e2127;
    --pz-border: #333840;
    --pz-border-strong: #6b727d;
    --pz-accent: #f2f3f5;
    --pz-focus: #7aa2ff;
    --pz-lens-fill: rgba(122, 162, 255, 0.16);
    --pz-lens-stroke: rgba(122, 162, 255, 0.9);
    --pz-lens-scrim: rgba(0, 0, 0, 0.42);
    --pz-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
    --pz-ctl-accent: #4f9bea;
    --pz-ctl-track: #3a4049;
    --pz-ctl-glyph: #d7dbe1;
  }
}

:root[data-theme="dark"] product-zoom {
  --pz-surface: #16181d;
  --pz-surface-sunken: #1e2127;
  --pz-border: #333840;
  --pz-border-strong: #6b727d;
  --pz-accent: #f2f3f5;
  --pz-focus: #7aa2ff;
  --pz-lens-fill: rgba(122, 162, 255, 0.16);
  --pz-lens-stroke: rgba(122, 162, 255, 0.9);
  --pz-lens-scrim: rgba(0, 0, 0, 0.42);
  --pz-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
  --pz-ctl-accent: #4f9bea;
  --pz-ctl-track: #3a4049;
  --pz-ctl-glyph: #d7dbe1;
}

/* --- stage ---------------------------------------------------------------- */

product-zoom .pz-stage {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--pz-aspect);
  background: var(--pz-surface);
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius);
  /* Reserve the box before the image decodes: no layout shift, no CLS. */
  contain: paint;
  cursor: zoom-in;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

product-zoom .pz-stage:focus-visible {
  outline: 3px solid var(--pz-focus);
  outline-offset: 3px;
}

product-zoom .pz-main {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* --- lens ----------------------------------------------------------------- */

product-zoom .pz-lens {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  pointer-events: none;
  opacity: 0;
  background: var(--pz-lens-fill);
  border: 1px solid var(--pz-lens-stroke);
  /* A huge spread shadow dims everything outside the lens without a second element. */
  box-shadow: 0 0 0 9999px var(--pz-lens-scrim);
  transition: opacity 120ms ease-out;
  will-change: transform;
}

product-zoom.pz-panel-open .pz-lens { opacity: 1; }
product-zoom.pz-panel-open .pz-stage { cursor: crosshair; }

/* --- magnified panel ------------------------------------------------------ */

product-zoom .pz-panel {
  position: absolute;
  inset-block-start: 0;
  /* Closed, the panel is parked over the stage with no size of its own. An
     absolutely positioned box still contributes to scrollable overflow even
     when invisible, and a 480px panel hanging off a 360px phone screen is
     exactly how a page ends up scrolling sideways for no visible reason. */
  inset-inline-start: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  background: var(--pz-surface);
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius);
  box-shadow: var(--pz-shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 20;
}

product-zoom.pz-panel-open .pz-panel {
  inset-inline-start: calc(100% + var(--pz-panel-gap));
  width: var(--pz-panel-width);
  /* Match the stage, so the panel never looks like a detached popup.
     Split mode overrides this with the stage's measured height. */
  height: auto;
  aspect-ratio: var(--pz-aspect);
  max-height: 100%;
  opacity: 1;
  visibility: visible;
}

product-zoom.pz-panel-open.pz-panel-left .pz-panel {
  inset-inline-start: auto;
  inset-inline-end: calc(100% + var(--pz-panel-gap));
}

/* No room beside the gallery: magnify in place instead. */
product-zoom.pz-panel-open.pz-panel-inline .pz-panel {
  inset-inline: 0;
  width: 100%;
  max-height: none;
  box-shadow: none;
}

product-zoom .pz-panel-img {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  max-width: none;
  will-change: transform;
}

/* Hover zoom is a pointer affordance; suppress it where there is no pointer.
   Scoped to panel mode — split mode drives the same panel from a slider, which
   works perfectly well under a finger. */
@media (hover: none), (pointer: coarse) {
  product-zoom[data-mode="panel"] .pz-panel,
  product-zoom[data-mode="panel"] .pz-lens { display: none; }
}

/* --- thumbnails ----------------------------------------------------------- */

product-zoom .pz-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pz-gap);
  margin: var(--pz-gap) 0 0;
  padding: 0;
  list-style: none;
}

product-zoom .pz-thumbs > li { display: block; }

product-zoom .pz-thumb {
  display: block;
  width: 72px;
  aspect-ratio: var(--pz-aspect);
  padding: 0;
  overflow: hidden;
  background: var(--pz-surface-sunken);
  border: 1px solid var(--pz-border);
  border-radius: calc(var(--pz-radius) - 4px);
  cursor: pointer;
  transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}

product-zoom .pz-thumb:hover { border-color: var(--pz-border-strong); }

product-zoom .pz-thumb:focus-visible {
  outline: 3px solid var(--pz-focus);
  outline-offset: 2px;
}

product-zoom .pz-thumb.is-active {
  border-color: var(--pz-accent);
  box-shadow: inset 0 0 0 1px var(--pz-accent);
}

product-zoom .pz-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* --- slider mode ---------------------------------------------------------- */

/* Source order is stage → thumbs → controls (the controls are script-built, so
   they cannot exist before the markup). Flex order puts them where they belong
   without the script having to re-parent anything. */
product-zoom[data-mode="slider"] {
  display: flex;
  flex-direction: column;
}

product-zoom[data-mode="slider"] .pz-stage   { order: 1; }
product-zoom[data-mode="slider"] .pz-zoombar { order: 2; }
product-zoom[data-mode="slider"] .pz-thumbs  { order: 3; }

product-zoom[data-mode="slider"] .pz-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  /* At 1x the page must still scroll under a finger; once magnified the stage
     takes over both axes so drag-to-pan and pinch work. */
  touch-action: pan-y;
}

product-zoom[data-mode="slider"].pz-zoomed .pz-stage {
  cursor: grab;
  touch-action: none;
}

product-zoom[data-mode="slider"].pz-zoomed .pz-stage:active { cursor: grabbing; }

product-zoom[data-mode="slider"] .pz-main {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  transform-origin: center center;
  will-change: transform;
}

product-zoom[data-mode="slider"] .pz-main.pz-animate {
  transition: transform 190ms cubic-bezier(0.2, 0, 0, 1);
}

/* --- zoom bar --- */

product-zoom .pz-zoombar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block-start: var(--pz-gap);
}

product-zoom .pz-zoom-step {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--pz-accent);
  background: var(--pz-surface);
  border: 1px solid var(--pz-border);
  border-radius: 6px;
  cursor: pointer;
}

product-zoom .pz-zoom-step:hover { border-color: var(--pz-border-strong); }

product-zoom .pz-zoom-step svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

product-zoom .pz-zoom-reset {
  flex: 0 0 auto;
  min-width: 4.5ch;
  padding: 4px 6px;
  color: var(--pz-accent);
  background: none;
  border: 0;
  border-radius: 4px;
  font: inherit;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  text-align: end;
  cursor: pointer;
}

product-zoom .pz-zoom-reset:disabled {
  color: var(--pz-border-strong);
  cursor: default;
}

product-zoom .pz-zoom-step:focus-visible,
product-zoom .pz-zoom-reset:focus-visible {
  outline: 3px solid var(--pz-focus);
  outline-offset: 2px;
}

/* --- range input (each engine needs its own pseudo-elements) --- */

product-zoom .pz-slider {
  flex: 1 1 auto;
  min-width: 0;
  height: 22px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

product-zoom .pz-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: var(--pz-border);
}

product-zoom .pz-slider::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--pz-border);
}

product-zoom .pz-slider::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--pz-accent);
}

product-zoom .pz-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-block-start: -6px;
  border: 2px solid var(--pz-surface);
  border-radius: 50%;
  background: var(--pz-accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}

product-zoom .pz-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid var(--pz-surface);
  border-radius: 50%;
  background: var(--pz-accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}

product-zoom .pz-slider:focus-visible {
  outline: 3px solid var(--pz-focus);
  outline-offset: 4px;
  border-radius: 4px;
}

/* --- minimap --- */

product-zoom .pz-minimap {
  position: absolute;
  inset-block-end: 10px;
  inset-inline-start: 10px;
  width: 88px;
  aspect-ratio: var(--pz-aspect);
  overflow: hidden;
  background: var(--pz-surface);
  border: 1px solid var(--pz-border);
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(16, 20, 28, 0.16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms ease-out, visibility 140ms;
  z-index: 3;
}

product-zoom.pz-zoomed .pz-minimap {
  opacity: 1;
  visibility: visible;
}

product-zoom .pz-minimap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

product-zoom .pz-minimap-rect {
  position: absolute;
  border: 1.5px solid var(--pz-lens-stroke);
  background: var(--pz-lens-fill);
  border-radius: 1px;
}

/* --- expand button --- */

product-zoom .pz-expand {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--pz-accent);
  background: var(--pz-surface);
  border: 1px solid var(--pz-border);
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.9;
  z-index: 3;
}

product-zoom .pz-expand:hover { opacity: 1; border-color: var(--pz-border-strong); }

product-zoom .pz-expand:focus-visible {
  outline: 3px solid var(--pz-focus);
  outline-offset: 2px;
}

product-zoom .pz-expand svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Slider mode has no hover panel; make sure neither artefact can appear. */
product-zoom[data-mode="slider"] .pz-panel,
product-zoom[data-mode="slider"] .pz-lens { display: none; }

/* --- split mode ----------------------------------------------------------- */

product-zoom:is([data-mode="split"], [data-mode="toggle"], [data-mode="overlay"]) {
  display: flex;
  flex-direction: column;
}

product-zoom:is([data-mode="toggle"], [data-mode="overlay"]) .pz-toolbar { order: 0; }
product-zoom:is([data-mode="split"], [data-mode="toggle"], [data-mode="overlay"]) .pz-stage   { order: 1; }
product-zoom:is([data-mode="split"], [data-mode="toggle"]) .pz-zoombar { order: 2; }
product-zoom:is([data-mode="split"], [data-mode="toggle"], [data-mode="overlay"]) .pz-thumbs  { order: 3; }

product-zoom:is([data-mode="split"], [data-mode="toggle"]) .pz-stage {
  cursor: default;
  touch-action: pan-y;
}

/* Once magnified, both halves are draggable and the stage owns both axes. */
product-zoom:is([data-mode="split"], [data-mode="toggle"]).pz-zoomed .pz-stage,
product-zoom:is([data-mode="split"], [data-mode="toggle"]).pz-zoomed .pz-panel {
  cursor: grab;
  touch-action: none;
}

product-zoom:is([data-mode="split"], [data-mode="toggle"]).pz-zoomed .pz-stage:active,
product-zoom:is([data-mode="split"], [data-mode="toggle"]).pz-zoomed .pz-panel:active { cursor: grabbing; }

/* Panel mode's panel is a passive readout; this one is a second handle. */
product-zoom:is([data-mode="split"], [data-mode="toggle"]).pz-panel-open .pz-panel { pointer-events: auto; }

/* The lens has nothing to mark once the panel is covering the source. */
product-zoom:is([data-mode="split"], [data-mode="toggle"]).pz-panel-inline .pz-lens { display: none; }

/* --- affordance badge --- */

product-zoom .pz-badge {
  position: absolute;
  inset-block-end: 10px;
  inset-inline-start: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  color: var(--pz-accent);
  background: var(--pz-surface);
  border: 1px solid var(--pz-border);
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(16, 20, 28, 0.1);
  font-size: 0.75rem;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0.94;
  transition: opacity 160ms ease-out;
  z-index: 3;
}

product-zoom .pz-badge svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
}

/* Its job is done once the shopper has zoomed. */
product-zoom.pz-zoomed .pz-badge { opacity: 0; }

@media (max-width: 420px) {
  product-zoom .pz-badge span { display: none; }
  product-zoom .pz-badge { padding: 6px 8px; }
}


/* --- toggle mode: labelled entry point above the image -------------------- */

product-zoom .pz-toolbar {
  display: flex;
  align-items: center;
  /* Right-aligned above the image. justify-content, not a margin, so adding a
     left-hand item later (a label, a badge) needs no other change. */
  justify-content: flex-end;
  margin-block-end: var(--pz-gap);
}

product-zoom .pz-zoom-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 11px;
  color: var(--pz-accent);
  background: var(--pz-surface);
  border: 1px solid var(--pz-border);
  border-radius: 6px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}

product-zoom .pz-zoom-toggle:hover { border-color: var(--pz-border-strong); }

/* Pressed is a real state, not a hover flourish: it says zoom is currently on. */
product-zoom .pz-zoom-toggle[aria-pressed="true"] {
  color: var(--pz-surface);
  background: var(--pz-accent);
  border-color: var(--pz-accent);
}

product-zoom .pz-zoom-toggle:focus-visible {
  outline: 3px solid var(--pz-focus);
  outline-offset: 2px;
}

product-zoom .pz-zoom-toggle svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

product-zoom .pz-zoom-toggle svg[hidden] { display: none; }


/* --- overlay mode: anchored panel with its own control bar ---------------- */

/* Hover-triggered overlay: the cursor is the affordance, so the button steps
   aside — but only where hover actually exists. On touch it is the only way in
   and stays put. */
@media (hover: hover) and (pointer: fine) {
  product-zoom[data-mode="overlay"][data-trigger="hover"] .pz-toolbar { display: none; }
}

product-zoom .pz-ov {
  position: absolute;
  inset-block-start: 0;
  /* The script sets inset-inline-start and width: beside the gallery when there
     is room for it, over the gallery when there is not. Either way the panel is
     allowed to run wider than the column and overlap what sits next to it —
     that extra width is the whole point of the mode. */
  inset-inline-start: 0;
  display: flex;
  flex-direction: column;
  background: var(--pz-surface);
  border: 1px solid var(--pz-border);
  border-radius: 3px;
  box-shadow: var(--pz-shadow);
  overflow: hidden;
  z-index: 40;
}

product-zoom .pz-ov[hidden] { display: none; }

/* --- control bar --- */

product-zoom .pz-ov-bar {
  display: flex;
  align-items: stretch;
  gap: 18px;
  padding: 10px 12px;
  border-block-end: 1px solid var(--pz-border);
  background: var(--pz-surface);
}

product-zoom .pz-ov-group {
  display: flex;
  min-width: 0;
}

product-zoom .pz-ov-zoomgroup {
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
}

product-zoom .pz-ov-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

product-zoom .pz-ov-pangroup {
  flex: 0 0 auto;
  align-items: flex-end;
  gap: 10px;
}

product-zoom .pz-ov-label {
  color: var(--pz-ctl-accent);
  font-size: 0.8125rem;
  line-height: 1.2;
  white-space: nowrap;
}

product-zoom .pz-ov-step {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  color: var(--pz-ctl-glyph);
  background: none;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

product-zoom .pz-ov-step:hover { background: var(--pz-surface-sunken); }

product-zoom .pz-ov-step:focus-visible {
  outline: 3px solid var(--pz-focus);
  outline-offset: 1px;
}

product-zoom .pz-ov-step svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

/* --- range: a thick rounded track, filled to the thumb --- */

product-zoom .pz-ov-slider {
  flex: 1 1 auto;
  min-width: 0;
  height: 24px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* WebKit has no progress pseudo-element, so the fill is a gradient stop that
   the script moves with the value. Firefox gets ::-moz-range-progress below. */
product-zoom .pz-ov-slider::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(
    to right,
    var(--pz-ctl-accent) 0 var(--pz-fill, 0%),
    var(--pz-ctl-track) var(--pz-fill, 0%) 100%);
}

product-zoom .pz-ov-slider::-moz-range-track {
  height: 10px;
  border-radius: 5px;
  background: var(--pz-ctl-track);
}

product-zoom .pz-ov-slider::-moz-range-progress {
  height: 10px;
  border-radius: 5px;
  background: var(--pz-ctl-accent);
}

product-zoom .pz-ov-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-block-start: -6px;
  border: 0;
  border-radius: 50%;
  background: var(--pz-ctl-accent);
}

product-zoom .pz-ov-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: var(--pz-ctl-accent);
}

product-zoom .pz-ov-slider:focus-visible {
  outline: 3px solid var(--pz-focus);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --- pan navigator --- */

product-zoom .pz-ov-map {
  position: relative;
  flex: 0 0 auto;
  height: 58px;
  aspect-ratio: var(--pz-aspect);
  overflow: hidden;
  background: var(--pz-surface-sunken);
  border: 1px solid var(--pz-border);
  border-radius: 2px;
  cursor: pointer;
  touch-action: none;
}

product-zoom .pz-ov-mapimg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

product-zoom .pz-ov-maprect {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  border: 1px solid var(--pz-ctl-glyph);
  background: transparent;
  pointer-events: none;
  will-change: transform;
}

/* --- close --- */

product-zoom .pz-ov-close {
  flex: 0 0 auto;
  align-self: flex-start;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--pz-ctl-glyph);
  background: var(--pz-surface);
  border: 1px solid var(--pz-border);
  border-radius: 3px;
  cursor: pointer;
}

product-zoom .pz-ov-close:hover { border-color: var(--pz-border-strong); }

product-zoom .pz-ov-close:focus-visible {
  outline: 3px solid var(--pz-focus);
  outline-offset: 2px;
}

product-zoom .pz-ov-close svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* --- magnified body --- */

product-zoom .pz-ov-body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--pz-ov-body-height, 420px);
  overflow: hidden;
  background: var(--pz-surface);
  /* The panel owns every gesture inside it; the page is not scrolling here. */
  touch-action: none;
  cursor: default;
}

product-zoom .pz-ov-body.pz-ov-pannable { cursor: grab; }
product-zoom .pz-ov-body.pz-ov-pannable:active { cursor: grabbing; }

product-zoom .pz-ov-img {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  /* The script sets an explicit width/height that covers the body, so the image
     must not be constrained back down to it. */
  max-width: none;
  max-height: none;
  object-fit: contain;
  transform-origin: center center;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}

/* --- fullscreen viewer ---------------------------------------------------- */

html.pz-viewer-open { overflow: hidden; }

dialog.pz-viewer {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--pz-viewer-backdrop, rgba(12, 14, 18, 0.92));
  color: var(--pz-viewer-fg, #f5f6f8);
  overflow: hidden;
  overscroll-behavior: contain;
}

dialog.pz-viewer::backdrop { background: rgba(10, 12, 16, 0.86); }

/* Scrims: product shots are often near-white, and the controls have to stay
   legible on top of them without darkening the product itself. */
dialog.pz-viewer::before,
dialog.pz-viewer::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 120px;
  pointer-events: none;
  z-index: 1;
}

dialog.pz-viewer::before {
  inset-block-start: 0;
  background: linear-gradient(to bottom, rgba(8, 10, 14, 0.5), rgba(8, 10, 14, 0));
}

dialog.pz-viewer::after {
  inset-block-end: 0;
  background: linear-gradient(to top, rgba(8, 10, 14, 0.45), rgba(8, 10, 14, 0));
}

.pz-viewer-stage {
  position: absolute;
  inset: 0;
  /* Flex, not grid: the image's `max-height: 100%` needs a definite containing
     block, and an auto-sized grid row does not give it one. */
  display: flex;
  align-items: center;
  justify-content: center;
  /* All panning and pinching is handled in JS; keep the browser out of it. */
  touch-action: none;
  cursor: zoom-in;
  overflow: hidden;
}

.pz-viewer-stage.pz-zoomed { cursor: grab; }
.pz-viewer-stage.pz-zoomed:active { cursor: grabbing; }

.pz-viewer-img {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform-origin: center center;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}

.pz-viewer-img.pz-animate { transition: transform 200ms cubic-bezier(0.2, 0, 0, 1); }

.pz-viewer-btn {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: #fff;
  background: rgba(14, 16, 21, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.pz-viewer-btn:hover { background: rgba(14, 16, 21, 0.85); }
.pz-viewer-btn:focus-visible { outline: 3px solid #7aa2ff; outline-offset: 2px; }
.pz-viewer-btn[hidden] { display: none; }

.pz-viewer-btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pz-viewer-close { inset-block-start: 16px; inset-inline-end: 16px; }
.pz-viewer-prev  { inset-inline-start: 16px; inset-block-start: 50%; transform: translateY(-50%); }
.pz-viewer-next  { inset-inline-end: 16px;   inset-block-start: 50%; transform: translateY(-50%); }

.pz-viewer-status {
  position: absolute;
  z-index: 2;
  inset-block-start: 20px;
  inset-inline-start: 20px;
  margin: 0;
  color: #fff;
  font: 500 0.875rem/1.4 system-ui, sans-serif;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  max-width: min(60ch, calc(100% - 100px));
}

.pz-viewer-hint {
  position: absolute;
  z-index: 2;
  inset-block-end: 20px;
  inset-inline: 0;
  margin: 0;
  text-align: center;
  color: #fff;
  font: 500 0.8125rem/1.4 system-ui, sans-serif;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  opacity: 0.92;
  transition: opacity 600ms ease-out;
  pointer-events: none;
}

.pz-viewer-hint.pz-fade { opacity: 0; }

/* --- accessibility preferences -------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  product-zoom .pz-lens,
  product-zoom .pz-thumb,
  product-zoom .pz-minimap,
  product-zoom .pz-badge,
  .pz-viewer-hint { transition-duration: 1ms; }
  product-zoom .pz-main.pz-animate,
  .pz-viewer-img.pz-animate { transition: none; }
}

@media (forced-colors: active) {
  product-zoom .pz-lens {
    background: transparent;
    border: 2px solid CanvasText;
    box-shadow: none;
  }
  product-zoom .pz-thumb.is-active { border-color: Highlight; }
  product-zoom .pz-minimap-rect { background: transparent; border-color: Highlight; }
  product-zoom .pz-zoom-step,
  product-zoom .pz-zoom-toggle,
  product-zoom .pz-ov-close,
  product-zoom .pz-expand,
  product-zoom .pz-badge,
  .pz-viewer-btn { border-color: CanvasText; }
  product-zoom .pz-slider::-webkit-slider-thumb { background: Highlight; }
  product-zoom .pz-slider::-moz-range-thumb { background: Highlight; }
}

/* --- no-JS fallback ------------------------------------------------------- */

/* Until the element upgrades there is no panel or lens to hide, and the
   markup is a plain image with links to the full-size files. */
product-zoom:not(.pz-ready) .pz-stage { cursor: pointer; }

@media print {
  product-zoom .pz-panel,
  product-zoom .pz-lens,
  product-zoom .pz-zoombar,
  product-zoom .pz-toolbar,
  product-zoom .pz-minimap,
  product-zoom .pz-badge,
  product-zoom .pz-expand,
  product-zoom .pz-ov,
  dialog.pz-viewer { display: none !important; }
  product-zoom .pz-main { transform: none !important; }
}