/*
 * POWER.CRO - Homepage hero product carousel.
 *
 * Embedded ABOVE the existing Elementor 2-image hero (elementor-element-c0a01fe)
 * via a host-blind slot marker filled in home-hero-carousel.php. Static styles
 * live here (Cloudflare/Redis cacheable); only the per-request, per-language slide
 * DATA is printed inline by PHP into window.ppcroHeroSlides.
 *
 * Origin: gemini-code hero (storage/hero-carousel-01). Adapted for embedding:
 *  - :root design tokens scoped to .pp-hero-shell (no global leak).
 *  - .pp-hero-shell min-height dropped from 100vh (it is a band, not a full screen).
 *  - mobile `body{background}` rescoped to .pp-hero-shell (never touch the page body).
 *  - ppCardIdleDrift keyframe `100` typo fixed to `100%`.
 *  - prefers-reduced-motion honoured.
 */

.pp-hero-shell {
  --pp-purple: #5d4f89;
  --pp-purple-dark: #332958;
  --pp-green: #486d54;
  --pp-ink: #15131f;
  --pp-muted: rgba(21, 19, 31, .68);
  --pp-white: #ffffff;
  --pp-soft: #f7f4ff;
  --pp-line: rgba(93, 79, 137, .18);
  --pp-glass: rgba(255, 255, 255, .58);

  --pp-shadow: 0 34px 90px rgba(37, 30, 66, .25);
  --pp-glow-purple: 0 0 40px rgba(93, 79, 137, 0.45);
  --pp-glow-green: 0 0 40px rgba(72, 109, 84, 0.35);

  --pp-radius-xl: 34px;
  --pp-radius-lg: 24px;
  --pp-radius-pill: 999px;

  position: relative;
  /* Embedded band, NOT a full viewport: was min-height:100vh. */
  min-height: auto;
  padding: clamp(20px, 3vw, 44px);
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
}

/* External backdrop removed per request: the carousel card sits directly on the
   page's own background - no ambient blobs, noise grain or orbit rings. The
   decorative nodes still exist in the markup but render nothing. */
.pp-hero-shell { background: transparent; }

.pp-hero-shell::before,
.pp-hero-shell::after { content: none; }

.pp-noise,
.pp-orbit { display: none; }

.pp-orbit.one {
  width: 74vw;
  height: 28vw;
  min-width: 620px;
  min-height: 230px;
  top: 19%;
  right: -18%;
}

.pp-orbit.two {
  width: 68vw;
  height: 24vw;
  min-width: 560px;
  min-height: 210px;
  bottom: 12%;
  left: -22%;
  transform: rotate(16deg);
}

.pp-hero {
  width: min(1440px, 100%);
  min-height: min(720px, calc(100vh - 48px));
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
  gap: clamp(22px, 4vw, 72px);
  align-items: center;
  padding: clamp(22px, 4.8vw, 72px);
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: clamp(28px, 4vw, 54px);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .80), rgba(255, 255, 255, .50)),
    radial-gradient(circle at 85% 30%, rgba(93, 79, 137, .20), transparent 40%);
  box-shadow: var(--pp-shadow), inset 0 0 40px rgba(255,255,255,0.6);
  overflow: hidden;
  backdrop-filter: blur(30px) saturate(1.2);
}

.pp-hero::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: calc(clamp(28px, 4vw, 54px) - 10px);
  border: 1px solid rgba(93, 79, 137, .12);
  pointer-events: none;
}

.pp-title {
  margin: 26px 0 0;
  font-size: clamp(44px, 6.2vw, 104px);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.065em;
  max-width: 780px;
}

.pp-title .line {
  display: block;
  overflow: hidden;
  padding-bottom: .08em;
}

.pp-title .word {
  display: inline-block;
  transform: translateY(112%) rotateX(52deg) scale(.96);
  opacity: 0;
  transform-origin: left bottom;
  will-change: transform, opacity;
}

.pp-title .word.is-in {
  animation: ppTextIn .9s cubic-bezier(.18, .92, .16, 1) forwards;
}

.pp-gradient-text {
  background: linear-gradient(90deg, var(--pp-purple), #907fc4 44%, var(--pp-green));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 30px rgba(144, 127, 196, 0.2);
}

.pp-description-wrap {
  position: relative;
  min-height: 108px;
  margin-top: 24px;
}

.pp-description {
  font-size: clamp(16px, 1.24vw, 20px);
  line-height: 1.65;
  color: var(--pp-muted);
  max-width: 590px;
  margin: 0;
  transform: translateY(18px);
  opacity: 0;
  filter: blur(8px);
}

.pp-description.is-in {
  animation: ppFadeUp .76s cubic-bezier(.22, 1, .36, 1) .18s forwards;
}

.pp-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
  max-width: 580px;
}

.pp-metric {
  min-height: 92px;
  padding: 15px 15px 14px;
  border-radius: 22px;
  border: 1px solid rgba(93, 79, 137, .16);
  background: rgba(255, 255, 255, .65);
  box-shadow: 0 12px 38px rgba(93, 79, 137, .08);
  transform: translateY(18px);
  opacity: 0;
}

.pp-metric.is-in {
  animation: ppFadeUp .66s cubic-bezier(.22, 1, .36, 1) forwards;
}

.pp-metric strong {
  display: block;
  font-size: clamp(20px, 2.2vw, 31px);
  letter-spacing: -.05em;
  color: var(--pp-purple-dark);
}

.pp-metric span {
  display: block;
  margin-top: 6px;
  color: rgba(21, 19, 31, .58);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 650;
}

.pp-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.pp-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 22px;
  border-radius: 18px 28px 18px 28px;
  border: 0;
  text-decoration: none;
  cursor: pointer;
  font-weight: 850;
  letter-spacing: -.02em;
  overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease, border-radius .28s ease;
  will-change: transform;
}

.pp-btn:hover {
  transform: translateY(-3px);
  border-radius: 28px 18px 28px 18px;
}

.pp-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--pp-purple) 0%, #7a69a8 56%, var(--pp-green) 100%);
  box-shadow: 0 18px 46px rgba(93, 79, 137, .35), 0 0 40px rgba(93, 79, 137, 0.45);
}

.pp-btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(-120%);
  transition: transform .7s ease;
}

.pp-btn-primary:hover::before {
  transform: translateX(120%);
}

.pp-btn-ghost {
  color: var(--pp-purple-dark);
  background: rgba(255, 255, 255, .65);
  border: 1px solid rgba(93, 79, 137, .22);
  box-shadow: 0 14px 38px rgba(93, 79, 137, .10);
}

.pp-hero-right {
  position: relative;
  z-index: 2;
  min-height: 620px;
  perspective: 1400px;
  display: grid;
  place-items: center;
}

.pp-product-stage {
  position: relative;
  width: min(620px, 100%);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
}

.pp-product-halo {
  position: absolute;
  width: 86%;
  height: 86%;
  border-radius: 42% 58% 48% 52%;
  background:
    radial-gradient(circle at 36% 30%, rgba(255,255,255,.95), transparent 30%),
    linear-gradient(145deg, rgba(93, 79, 137, .45), rgba(72, 109, 84, .30));
  box-shadow:
    inset 0 0 30px rgba(255,255,255,.6),
    0 46px 110px rgba(93, 79, 137, .4),
    0 0 60px rgba(93, 79, 137, 0.2);
  transform: translateZ(-80px) rotate(-8deg);
}

.pp-product-card {
  position: relative;
  width: min(535px, 88vw);
  aspect-ratio: 1 / 1;
  padding: 14px;
  border-radius: 38px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.45)),
    radial-gradient(circle at 50% 0%, rgba(93, 79, 137, .20), transparent 60%);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow:
    0 46px 100px rgba(43, 35, 74, .25),
    0 0 40px rgba(255, 255, 255, 0.4);
  --pp-card-ry: -10deg;
  --pp-card-rx: 7deg;
  --pp-card-z: 50px;
  --pp-card-scale: 1;
  transform: rotateY(var(--pp-card-ry)) rotateX(var(--pp-card-rx)) translate3d(0, 0, var(--pp-card-z)) scale(var(--pp-card-scale));
  animation: ppCardIdleDrift 7.5s ease-in-out infinite;
  transform-style: preserve-3d;
  overflow: hidden;
  will-change: transform;
}

.pp-product-card::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: conic-gradient(from 180deg, transparent, rgba(255,255,255,.85), transparent 40%);
  animation: ppShine 5s linear infinite;
  opacity: .65;
}

.pp-product-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 37px;
  background: linear-gradient(145deg, rgba(255,255,255,.6), rgba(255,255,255,.2));
  pointer-events: none;
}

.pp-product-img {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 30px;
  filter:
    drop-shadow(0 34px 36px rgba(32, 27, 54, .28))
    drop-shadow(0 0 20px rgba(93, 79, 137, 0.2));
  transform: translateY(30px) scale(.9) rotate(-4deg);
  opacity: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
  will-change: transform, opacity, filter;
}

/* When a WebP/optimizer plugin wraps the product <img> in a <picture>, .pp-product-img
   lands on the <picture> (a non-replaced block, so its object-fit is inert) - make the
   inner <img> fill it. Harmless when .pp-product-img is a plain <img> (no child img). */
.pp-product-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.pp-product-shadow {
  position: absolute;
  bottom: 34px;
  left: 50%;
  width: 62%;
  height: 24px;
  border-radius: 50%;
  background: rgba(43, 35, 74, .22);
  filter: blur(1px);
  transform: translateX(-50%) rotate(-7deg);
  z-index: 1;
}

.pp-slide-rail {
  position: absolute;
  left: clamp(22px, 4.8vw, 72px);
  right: clamp(22px, 4.8vw, 72px);
  bottom: clamp(18px, 2.4vw, 34px);
  z-index: 6;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
}

.pp-progress-wrap {
  display: grid;
  gap: 12px;
}

.pp-slide-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 780;
  color: rgba(21,19,31,.56);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.pp-slide-meta .current {
  color: var(--pp-purple-dark);
  text-shadow: 0 0 10px rgba(93, 79, 137, 0.2);
}

.pp-progress {
  position: relative;
  height: 4px;
  width: min(410px, 42vw);
  border-radius: var(--pp-radius-pill);
  overflow: hidden;
  background: rgba(93,79,137,.14);
}

.pp-progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pp-purple), var(--pp-green));
  box-shadow: 0 0 10px var(--pp-purple);
}

.pp-progress-bar.is-running {
  animation: ppProgress var(--duration, 6200ms) linear forwards;
}

.pp-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pp-arrow,
.pp-dot {
  border: 1px solid rgba(93,79,137,.2);
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 12px 32px rgba(43, 35, 74, .12);
  cursor: pointer;
  transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
}

.pp-arrow {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 17px 23px 17px 23px;
  color: var(--pp-purple-dark);
  font-size: 20px;
}

.pp-arrow:hover {
  transform: translateY(-2px);
  background: var(--pp-purple);
  color: #fff;
  box-shadow: 0 8px 20px rgba(93, 79, 137, 0.4);
}

.pp-dots {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(255,255,255,.6);
}

.pp-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  padding: 0;
  background: rgba(93, 79, 137, .24);
  box-shadow: none;
}

.pp-dot.is-active {
  width: 34px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pp-purple), var(--pp-green));
  box-shadow: 0 0 8px var(--pp-purple);
}

/* Harden the controls against the theme's (WoodMart) <button> base styles -
   appearance / min-height / padding / line-height / text-transform bleed that
   distorts the small round dots. Higher specificity (.pp-hero-shell ...) + an
   appearance reset re-asserts the original look. Dot dimensions are constant
   across breakpoints, so re-stating them here is mobile-safe; the arrow keeps its
   own per-breakpoint width/height (48px desktop, 44px mobile). */
.pp-hero-shell .pp-arrow,
.pp-hero-shell .pp-dot {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  margin: 0;
  min-height: 0;
  min-width: 0;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  flex: 0 0 auto;
}

.pp-hero-shell .pp-dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 1px solid rgba(93, 79, 137, .2);
  border-radius: 50%;
  background: rgba(93, 79, 137, .24);
  box-shadow: none;
}

.pp-hero-shell .pp-dot.is-active {
  width: 34px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pp-purple), var(--pp-green));
  box-shadow: 0 0 8px var(--pp-purple);
}

.pp-bg-word {
  position: absolute;
  right: -2vw;
  bottom: 12%;
  z-index: 0;
  font-size: clamp(68px, 14vw, 210px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.08em;
  color: rgba(93, 79, 137, .065);
  white-space: nowrap;
  transform: rotate(-8deg);
  pointer-events: none;
  user-select: none;
  filter: blur(1px);
}

@keyframes ppPulseGlow {
  from { transform: scale(1); box-shadow: 0 0 8px rgba(93, 79, 137, 0.4); }
  to { transform: scale(1.05); box-shadow: 0 0 18px rgba(93, 79, 137, 0.7); }
}

@keyframes ppTextIn {
  to { transform: translateY(0) rotateX(0deg) scale(1); opacity: 1; }
}

@keyframes ppFadeUp {
  to { transform: translateY(0) scale(1); opacity: 1; filter: blur(0); }
}

@keyframes ppProgress {
  from { width: 0%; }
  to { width: 100%; }
}

@keyframes ppShine {
  to { transform: rotate(360deg); }
}

@keyframes ppCardIdleDrift {
  0%, 100% {
    transform: rotateY(var(--pp-card-ry)) rotateX(var(--pp-card-rx)) translate3d(0, 0, var(--pp-card-z)) scale(var(--pp-card-scale));
    box-shadow: 0 46px 100px rgba(43, 35, 74, .25), 0 0 40px rgba(255, 255, 255, 0.4);
  }
  50% {
    transform: rotateY(calc(var(--pp-card-ry) + 2deg)) rotateX(calc(var(--pp-card-rx) - 1deg)) translate3d(0, -10px, var(--pp-card-z)) scale(var(--pp-card-scale));
    box-shadow: 0 55px 110px rgba(43, 35, 74, .3), 0 0 60px rgba(93, 79, 137, 0.4);
  }
}

.pp-product-img.is-in {
  animation: ppProductTileIn 1s cubic-bezier(.16, .94, .18, 1) forwards;
}

@keyframes ppProductTileIn {
  0% {
    opacity: 0;
    transform: translateY(36px) scale(.88) rotate(-7deg);
    filter: drop-shadow(0 18px 18px rgba(32, 27, 54, .06)) blur(8px);
  }
  64% {
    opacity: 1;
    transform: translateY(-7px) scale(1.025) rotate(2deg);
    filter: drop-shadow(0 34px 34px rgba(32, 27, 54, .20)) blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(-1.5deg);
    filter: drop-shadow(0 28px 32px rgba(32, 27, 54, .24)) drop-shadow(0 0 20px rgba(93, 79, 137, 0.2));
  }
}

@media (min-width: 1081px) {
  .pp-hero { padding-bottom: clamp(88px, 6.3vw, 112px); }
  .pp-title { margin-top: 19px; font-size: clamp(30px, 3.2vw, 52px); line-height: 1; letter-spacing: -.04em; max-width: 620px; }
  .pp-description-wrap { min-height: 80px; margin-top: 15px; }
  .pp-description { font-size: clamp(13.5px, .95vw, 16px); line-height: 1.54; max-width: 510px; }
  .pp-metrics { margin-top: 18px; max-width: 520px; }
  .pp-metric { min-height: 74px; padding: 11px 12px; border-radius: 18px; }
  .pp-metric strong { font-size: clamp(16px, 1.55vw, 23px); }
  .pp-actions { margin-top: 22px; }
  .pp-slide-rail { bottom: clamp(20px, 2vw, 30px); }
}

@media (max-width: 1180px) {
  .pp-hero { grid-template-columns: minmax(0, .98fr) minmax(380px, 1.02fr); gap: 26px; }
  .pp-product-card { width: min(480px, 84vw); }
}

@media (max-width: 1080px) {
  .pp-hero { grid-template-columns: 1fr; min-height: auto; padding-bottom: 112px; padding-top: clamp(22px, 4vw, 48px); }
  .pp-product-card { width: min(520px, 76vw); }
  .pp-title { font-size: clamp(30px, 5.4vw, 50px); max-width: 720px; }
  .pp-description-wrap { min-height: auto; }
  .pp-hero-right { min-height: 530px; margin-top: -20px; }
}

/* Mobile: side-by-side large product (+50%). No shell backdrop (removed) - the
   carousel card sits on the page's own background. */
@media (max-width: 760px) {
  .pp-hero-shell {
    padding: 10px;
  }

  .pp-hero {
    width: 100%;
    border-radius: 28px;
    padding: 24px 14px 18px;
    gap: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
  }
  .pp-hero::before { inset: 7px; border-radius: 22px; }

  .pp-hero-left {
    display: contents;
  }

  .pp-title {
    grid-column: 1;
    grid-row: 1;
    margin-top: 0;
    font-size: clamp(26px, 7.5vw, 36px);
    line-height: 1.05;
    padding-right: 12px;
    align-self: center;
  }

  .pp-hero-right {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    perspective: 900px;
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
  }

  .pp-product-stage {
    width: 225px;
    aspect-ratio: 1 / 1;
    margin: 0;
  }

  .pp-product-card {
    --pp-card-ry: -5deg; --pp-card-rx: 4deg; --pp-card-z: 15px;
    width: 100%;
    max-width: 198px;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    padding: 4px;
    animation: ppMobileCardFloat 6.8s ease-in-out infinite;
  }
  /* On phones the product image stays visible across swipes: the per-slide entrance
     (ppProductTileIn) starts at opacity:0, and the JS replays it on every slide change
     by toggling .is-in - which read as the image vanishing on swipe. Mobile keeps the
     image at opacity:1 and runs ONLY the gentle float. */
  .pp-product-img { opacity: 1; }
  .pp-product-img.is-in {
    animation: ppMobileProductImgFloat 6.2s ease-in-out infinite;
  }

  .pp-description-wrap {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 20px;
    min-height: auto;
  }
  .pp-description { font-size: 13.2px; line-height: 1.46; }

  .pp-metrics {
    grid-column: 1 / -1;
    grid-row: 3;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 12px;
  }
  .pp-metric { min-height: 66px; padding: 8px 7px; border-radius: 15px; display: grid; }
  .pp-metric strong { font-size: clamp(12px, 3.4vw, 15px); }
  .pp-metric span { font-size: 8.4px; text-align: left; margin-top: 3px; }

  .pp-actions {
    grid-column: 1 / -1;
    grid-row: 4;
    display: grid;
    grid-template-columns: 1fr 1fr;   /* both CTAs on one row */
    gap: 9px;
    margin-top: 14px;
  }
  .pp-btn { width: 100%; min-height: 44px; font-size: 13px; padding: 0 12px; }
  /* Mobile: drop the trailing arrow glyph after "View product" (saves width so the
     two buttons fit on one row). */
  .pp-btn-primary span[aria-hidden] { display: none; }

  .pp-slide-rail {
    grid-column: 1 / -1;
    grid-row: 5;
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    grid-template-columns: 1fr;
    margin-top: 32px;
    width: 100%;
  }

  .pp-controls { justify-content: space-between; }
  .pp-arrow { width: 44px; height: 44px; }
  .pp-dots { flex: 1; justify-content: center; min-height: 44px; }
  .pp-bg-word { right: -16vw; bottom: 39%; font-size: clamp(58px, 21vw, 92px); opacity: .8; }
}

@media (max-width: 420px) {
  .pp-product-stage { max-width: 180px; }
  .pp-product-card { max-width: 158px; }
  .pp-title { font-size: clamp(20px, 5.5vw, 26px); }
  .pp-metrics { grid-template-columns: 1fr; gap: 7px; }
  .pp-metric { min-height: unset; grid-template-columns: .8fr 1.2fr; align-items: center; padding: 10px 11px; }
  .pp-metric span { text-align: right; }
}

@keyframes ppMobileCardFloat {
  0%, 100% { transform: rotateY(var(--pp-card-ry)) rotateX(var(--pp-card-rx)) translate3d(0, 0, var(--pp-card-z)); }
  50% { transform: rotateY(calc(var(--pp-card-ry) + 1.6deg)) rotateX(calc(var(--pp-card-rx) - .9deg)) translate3d(3px, -5px, var(--pp-card-z)); }
}

@keyframes ppMobileProductImgFloat {
  0%, 100% { transform: translate3d(0, 0, 40px) scale(1) rotate(-1.5deg); filter: drop-shadow(0 28px 32px rgba(32, 27, 54, .24)); }
  50% { transform: translate3d(3px, -4px, 40px) scale(1.01) rotate(-0.2deg); filter: drop-shadow(0 34px 36px rgba(93, 79, 137, 0.3)); }
}

/* Respect reduced-motion: kill the infinite ambient loops and the entrance animations,
   leaving everything in its resting state. The carousel still advances (content swaps),
   it just does so without transform/blur theatrics. */
@media (prefers-reduced-motion: reduce) {
  .pp-product-card,
  .pp-product-card::before,
  .pp-title .word,
  .pp-description,
  .pp-metric,
  .pp-product-img,
  .pp-product-img.is-in {
    animation: none !important;
  }
  .pp-title .word { transform: none; opacity: 1; }
  .pp-description { transform: none; opacity: 1; filter: none; }
  .pp-metric { transform: none; opacity: 1; }
  .pp-product-img { transform: translateZ(40px) scale(1) rotate(-1.5deg); opacity: 1; }
  .pp-btn, .pp-arrow, .pp-dot { transition: none !important; }
}

/* Exception: on PHONES the product keeps its gentle self-drift even under
   reduce-motion - matching the original (the image moves on its own; no pointer
   needed). Desktop stays calm under reduce-motion (it has the big pointer tilt). */
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .pp-product-card {
    animation: ppMobileCardFloat 6.8s ease-in-out infinite !important;
  }
  .pp-product-img,
  .pp-product-img.is-in {
    opacity: 1;
    animation: ppMobileProductImgFloat 6.2s ease-in-out infinite !important;
  }
}

/* Off-screen / hidden-tab pause: the JS toggles .pp-paused on #ppHeroCarousel via an
   IntersectionObserver + visibilitychange, so the infinite ambient loops (card drift,
   conic shine, product float) and the progress bar stop doing GPU work while the
   visitor reads the rest of the page or the tab is backgrounded. */
.pp-hero.pp-paused .pp-product-card,
.pp-hero.pp-paused .pp-product-card::before,
.pp-hero.pp-paused .pp-product-img,
.pp-hero.pp-paused .pp-progress-bar {
  animation-play-state: paused !important;
}