/* ============================================================
   PRODUCT FIGURE — inline product photography. Every figure holds a
   single stable .pf-img, EXCEPT a [data-cycle] figure (Hero and
   Transparency), which stacks three bottles and crossfades between
   them (js/product-cycle.js toggles .is-on, one shared clock across
   every [data-cycle] figure on the page). Product images render as
   final assets exactly as exported — no filters/reprocessing either way.
   ============================================================ */
/* Product images are flat rectangular photography — no lighting layers
   (no ambient glow, no drop-shadow, no filters/blends/masks). They sit
   directly on the section's own pure #fff background; hierarchy comes
   from size and composition only, never from atmosphere behind them. */
.product-figure {
  position: relative;
  display: grid;
  place-items: center;
}
.pf-img {
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
/* [data-cycle]-only stacking/crossfade — every other figure (Simplicity,
   Transparency, Membership) has exactly one .pf-img and must stay at
   opacity:1 unconditionally, so this is scoped strictly to [data-cycle],
   never applied to the bare .pf-img rule above. */
[data-cycle] .pf-img {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity var(--duration-fade) ease;
}
[data-cycle] .pf-img.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  [data-cycle] .pf-img { transition: none; }
}

/* hero bottle — 97.75% of the space between the 64px header and the
   bottom edge (85% + a further 15% bump), computed directly off the
   real viewport. No ancestor transform to cancel out (the hero no
   longer wraps everything in a single transform:scale() canvas, only
   the bottle itself is sticky — see css/sections/hero.css), so this is
   just plain svh math, named as --figure-hero-h in tokens.css. */
@media (min-width: 768px) {
  .product-figure-hero .pf-img { width: auto; height: var(--figure-hero-h); }
}
/* transparency's cropped back label (.product-figure-crop) is sized and
   clip-cropped entirely in css/sections/transparency.css — the desktop
   height/clip-window ratio and the mobile width-driven sizing both live
   there, next to the section that owns them. Nothing generic to set here. */
/* the crop stops mid-label (just above each bottle's own QR code) — a
   hard edge there reads as an accidental cut, so a soft fade back to
   the page's own white stands in for a "natural" bottom edge instead.
   Reuses --scrim-fade-light verbatim (same fade already used by the
   mobile hero CTA dock) rather than a one-off gradient. Height is a %
   of the now content-matched figure (was a fixed clamp tuned to the old,
   much taller hero-height image — that would have swallowed a third of
   this shorter crop). */
.product-figure-crop {
  position: relative;
}
.product-figure-crop::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  background: var(--scrim-fade-light);
  pointer-events: none;
}
/* refill pouch — desktop only; mobile sizing set below. Sized so the
   pouch reads at roughly 45-48% of the section's width (see
   .membership-grid, css/sections/membership.css), noticeably smaller
   than a full-catalogue render so the benefits column reads first,
   even though the pouch is still the visual anchor. */
@media (min-width: 768px) {
  .product-figure-pouch .pf-img { height: var(--figure-pouch-h); }
}

/* ============================================================
   MOBILE PRODUCT SIZING — width-driven (vw), not height-driven.
   A height/svh clamp starves width on a narrow, tall viewport
   (e.g. 48svh tall on a 390px phone forces the bottle down to
   ~150px / 39vw — small and cramped). Sizing by width instead
   makes every product read as large & premium, per the product
   scale rule: bottle 72–86vw, back label 86–110vw (may crop),
   refill pouch 90–120vw (may crop off the right edge). Sections
   grow to fit — that's correct, not a bug.
   ============================================================ */
@media (max-width: 767px) {
  .product-figure-hero .pf-img {
    width: var(--figure-hero-w-mobile);
    height: auto;
  }
  /* transparency's back label — bigger again, allowed to crop horizontally
     instead of shrinking to fit inside the gutter. max-width:none overrides
     the shared .pf-img{max-width:100%} rule, which otherwise caps the image
     to its gutter-padded container and silently cancels the crop. */
  .product-figure-sticky .pf-img {
    width: var(--figure-crop-w-mobile);
    max-width: none;
    height: auto;
  }
  /* refill pouch — large enough to crop off the right edge; left-aligned
     within its row (see .membership-figure below) so the crop reads as
     "the pouch is bigger than the frame", not an awkward double-sided trim */
  .product-figure-pouch .pf-img {
    width: var(--figure-pouch-w-mobile);
    max-width: none;
    height: auto;
  }
  .membership-figure {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    overflow: hidden; /* clip the pouch's crop to this row, not the whole page */
  }
}