/* Zoom reveal — styles for the "Zoom reveal" HTML Block (Elementor).
   .qst-zoom         tall wrapper (its height = scroll length)
   .qst-zoom__stage  the screen that stays pinned while scrolling
   .qst-zoom__wide   image widget: the product in full (zooms in)
   .qst-zoom__macro  image widget: the close-up (opens through a growing circle)
   --qst-zoom-x / --qst-zoom-y = the spot the camera zooms into (and where the circle opens) */
.elementor .e-con.qst-zoom {
  --qst-accent: #c6ff00;
  --qst-zoom-x: 54%;
  --qst-zoom-y: 50%;
  display: block;
  position: relative;
  padding: 0;
  gap: 0;
  background: #0a0a0a;
}
.qst-zoom .elementor-widget { margin: 0; }

/* Editor / no script: the two images side by side under the heading, so both are easy to pick and replace */
.elementor .e-con.qst-zoom__stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  position: relative;
  width: 100%;
  padding: 0;
  overflow: hidden;
}
.qst-zoom__stage .qst-zoom__copy { grid-column: 1 / -1; order: -1; }
.qst-zoom__wide img, .qst-zoom__macro img { display: block; width: 100%; height: 60vh; object-fit: cover; border-radius: 0; }

/* ── Copy ── */
.elementor .e-con.qst-zoom__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: auto;
  padding: clamp(2.5rem, 12vh, 7rem) clamp(1.25rem, 5.5vw, 7rem) 2rem;
}
.qst-zoom .qst-zoom__eyebrow .elementor-heading-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 0.8rem;
  font-family: inherit;
  font-size: clamp(0.66rem, 0.85vw, 0.85rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}
.qst-zoom .qst-zoom__eyebrow .elementor-heading-title::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--qst-accent);
}
.qst-zoom .qst-zoom__title .elementor-heading-title {
  margin: 0;
  padding: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: clamp(2.8rem, 8vw, 8.5rem);
  line-height: 0.88;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 30px rgba(0,0,0,0.35);
}
.qst-zoom .qst-zoom__accent { color: var(--qst-accent); }

/* ── Pinned mode (zoom.js adds .is-js and drives transform / clip-path from the scroll position) ── */
.qst-zoom.is-js { height: 280vh; }
.qst-zoom.is-js .qst-zoom__stage {
  display: block;
  position: sticky;
  top: 0;
  height: 100vh;
}
.qst-zoom.is-js .qst-zoom__wide,
.qst-zoom.is-js .qst-zoom__macro {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.qst-zoom.is-js .qst-zoom__wide *,
.qst-zoom.is-js .qst-zoom__macro * { height: 100%; }
.qst-zoom.is-js .qst-zoom__wide img,
.qst-zoom.is-js .qst-zoom__macro img { width: 100%; height: 100%; object-fit: cover; }
.qst-zoom.is-js .qst-zoom__wide {
  z-index: 1;
  transform-origin: var(--qst-zoom-x) var(--qst-zoom-y);
  will-change: transform;
}
.qst-zoom.is-js .qst-zoom__macro {
  z-index: 2;
  clip-path: circle(0% at var(--qst-zoom-x) var(--qst-zoom-y));
  will-change: clip-path;
}
.qst-zoom.is-js .qst-zoom__macro img { transform-origin: var(--qst-zoom-x) var(--qst-zoom-y); will-change: transform; }
.qst-zoom.is-js .qst-zoom__stage::after {            /* soft dark edge so the white text always reads */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0.45), transparent 38%), radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,0.5));
}
.qst-zoom.is-js .qst-zoom__copy {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  will-change: transform, opacity;
}
.qst-zoom__ring {                                     /* the thin circle marking where the camera goes */
  position: absolute;
  left: var(--qst-zoom-x);
  top: var(--qst-zoom-y);
  z-index: 4;
  width: clamp(84px, 9vw, 150px);
  aspect-ratio: 1;
  margin: calc(clamp(84px, 9vw, 150px) / -2) 0 0 calc(clamp(84px, 9vw, 150px) / -2);
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}
.qst-zoom__ring::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 50%;
  animation: qstZoomPulse 2.2s ease-out infinite;
}
@keyframes qstZoomPulse { from { transform: scale(1); opacity: 0.7; } to { transform: scale(1.7); opacity: 0; } }

@media (max-width: 768px) {
  .qst-zoom.is-js { height: 230vh; }
}
@media (prefers-reduced-motion: reduce) {
  .qst-zoom__ring::after { animation: none; }
}