@charset "UTF-8";
/* ==========================================================================
   Sundis — single product page (آب انار و هویج سیاه، ساندیس لایف)
   --------------------------------------------------------------------------
   Loaded AFTER style.css → sundis.css → sundis-products.css. Everything this
   page shows is built from what those three already define:

   · tokens          — --sundis-purple / --gold / --ease / --container …
   · card language   — the asymmetric radius (12px 12px 46-60px 12px) and the
                       single --sundis-lift elevation scale from sundis.css
   · motion          — sundis-float, sundis-drift, sundis-morph,
                       sundis-splash-breathe — reused, never re-invented
   · components      — .breadcrumb, .section-head, .sundis-btn,
                       .sundis-story__eyebrow / __badge, .sundis-flavour

   Nothing here redefines a global token and nothing here leaks outside the
   page: every new selector is namespaced .sundis-pdp-*.
   ========================================================================== */

/* ==========================================================================
   1. Hero — the fruit centre stage, with the bottle waiting behind it

   Layering inside the banner:
     z0  drifting pattern corners
     z1  the copy column and the stage (the only pointer target)
   ========================================================================== */
.sundis-pdp-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: var(--hero-top) 68px;
  /* A quiet purple field and nothing else. The loose red blobs that used to
     drift here read as circles behind the product rather than as juice, and
     they competed with the one thing this section is about — so the ambient
     canvas is gone and the warm note is left as a whisper at the foot. */
  background:
    radial-gradient(120% 120% at 50% 112%, rgb(160 25 45 / .16), transparent 56%),
    radial-gradient(120% 140% at 84% 6%, rgb(var(--sundis-purple-rgb) / .48), transparent 62%),
    linear-gradient(155deg, var(--sundis-purple-deep) 0%, var(--sundis-purple) 64%, #5c2867 100%);
}

.sundis-pdp-hero__pattern {
  position: absolute;
  z-index: 0;
  width: 340px;
  height: auto;
  max-width: none;
  opacity: .13;
  pointer-events: none;
  animation: sundis-drift 24s ease-in-out infinite;
}
.sundis-pdp-hero__pattern--a { inset-inline-end: -70px; top: -60px; }
.sundis-pdp-hero__pattern--b {
  inset-inline-start: -90px;
  bottom: -70px;
  width: 260px;
  opacity: .1;
  animation-name: sundis-drift-flip;
  animation-delay: -11s;
}

/* One centred column: the product is the axis of the section, with the words
   above it and the proof points below. */
.sundis-pdp-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.sundis-pdp-hero__inner > * {
  animation: sundis-pdp-rise .75s var(--ease) both;
}
.sundis-pdp-hero__crumbs  { animation-delay: .02s; }
.sundis-pdp-hero__eyebrow { animation-delay: .1s; }
.sundis-pdp-hero__title   { animation-delay: .18s; }
.sundis-pdp-hero__lead    { animation-delay: .26s; }
.sundis-pdp-stage         { animation-delay: .34s; }
.sundis-pdp-hero__chips   { animation-delay: .46s; }
.sundis-pdp-hero__actions { animation-delay: .54s; }
@keyframes sundis-pdp-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sundis-pdp-hero__crumbs { margin-bottom: 14px; justify-content: center; }

.sundis-pdp-hero__title {
  margin-top: 10px;
  font-size: clamp(32px, 3.8vw, 50px);
  font-weight: 900;
  line-height: 1.3;
  color: #fff;
}
/* The second fruit takes the gold, so the headline has one focal word instead
   of two equal halves — the system's own "gold = emphasis" rule at display
   size. */
.sundis-pdp-hero__title-accent {
  position: relative;
  color: var(--gold);
  white-space: nowrap;
}
.sundis-pdp-hero__title-accent::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -.12em;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--gold) 22%, var(--gold) 78%, transparent);
  opacity: .5;
}

.sundis-pdp-hero__lead {
  max-width: 52ch;
  margin-top: 12px;
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.9;
  color: rgb(255 255 255 / .78);
}

/* ---- The stage ---------------------------------------------------------- *
   A rack focus, not a transition. The fruit stands at the front of the stage,
   sharp and lit; the bottle waits behind it, smaller and out of focus. Point
   at the stage and the focus pulls: the bottle steps forward and sharpens
   while the fruit falls back and softens. Both photographs are on screen the
   whole time, so nothing ever has to load, morph or be pressed to appear.
   ------------------------------------------------------------------------- */
.sundis-pdp-stage {
  position: relative;
  width: 100%;
  height: clamp(290px, 30vw, 404px);
  /* The lower margin carries the cue line, which grows into a status pill
     once the stage is pinned — sized for the taller of the two. */
  margin-block: 22px 66px;
}

.sundis-pdp-stage__pool {
  position: absolute;
  bottom: 0;
  inset-inline: 50%;
  width: 320px;
  height: 54px;
  margin-inline-start: -160px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(0 0 0 / .42), transparent 70%);
  filter: blur(7px);
  transition: width .7s var(--ease), margin-inline-start .7s var(--ease);
}
/* The bottle stands on a far narrower footprint than the fruit group — the
   shadow follows whichever one is in front, or the product looks like it is
   floating over someone else's shadow. */
.sundis-pdp-stage.is-bottle-front .sundis-pdp-stage__pool {
  width: 200px;
  margin-inline-start: -100px;
}

.sundis-pdp-stage__halo {
  position: absolute;
  inset-inline: 50%;
  pointer-events: none;
}
.sundis-pdp-stage__halo--glow {
  top: 4%;
  width: 520px;
  height: 92%;
  margin-inline-start: -260px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(186 166 96 / .2), transparent 72%);
  animation: sundis-splash-breathe 9s var(--ease) infinite;
  transition: opacity .62s var(--ease), background .62s var(--ease);
}
/* When the product takes the front, the pool of light behind it warms toward
   the juice's own colour — a lit set rather than a lamp that never moves. */
.sundis-pdp-stage.is-bottle-front .sundis-pdp-stage__halo--glow {
  background: radial-gradient(closest-side, rgb(186 166 96 / .3), rgb(160 25 45 / .16) 52%, transparent 74%);
}
.sundis-pdp-stage__halo--ring {
  top: 12%;
  width: 360px;
  height: 76%;
  margin-inline-start: -180px;
  border: 1px solid rgb(255 255 255 / .09);
  border-radius: 46% 54% 58% 42% / 52% 46% 54% 48%;
  animation: sundis-morph 17s var(--ease) infinite;
  transition: opacity .62s var(--ease);
}
/* The drawn ring is a resting ornament: it frames the fruit while the stage
   is idle and gets out of the product's way the moment it steps forward. */
.sundis-pdp-stage.is-bottle-front .sundis-pdp-stage__halo--ring { opacity: 0; }

.sundis-pdp-stage__trigger {
  position: relative;
  z-index: 1;
  display: block;
  width: min(88%, 500px);
  height: 100%;
  margin-inline: auto;
  border: 0;
  background: none;
  border-radius: 20px;
  cursor: pointer;
}
.sundis-pdp-stage__trigger:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 10px;
}

/* Both photographs are absolutely centred and hug their own width
   (inset-inline:0 + fit-content + auto margins) so each one can be scaled
   from its own base without the other's box shifting it. */
.sundis-pdp-stage__fruit,
.sundis-pdp-stage__bottle {
  position: absolute;
  inset-inline: 0;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  transform-origin: 50% 100%;
  /* Depth is carried by four properties at once — size, sharpness, brightness
     and stacking — because any one of them alone reads as a glitch rather
     than as distance. */
  transition:
    transform .62s cubic-bezier(.22, .68, .32, 1),
    filter .62s cubic-bezier(.22, .68, .32, 1),
    opacity .62s cubic-bezier(.22, .68, .32, 1);
}
.sundis-pdp-stage__fruit img,
.sundis-pdp-stage__bottle img {
  display: block;
  width: auto;
  height: 100%;
}

/* ---- Resting depth: fruit in front, bottle behind ----------------------- */
.sundis-pdp-stage__fruit {
  z-index: 2;
  bottom: 4%;
  height: 86%;
}
.sundis-pdp-stage__fruit img {
  filter: drop-shadow(0 26px 30px rgb(0 0 0 / .45)) drop-shadow(0 0 44px rgb(160 25 45 / .34));
  animation: sundis-pdp-breathe 6s var(--ease) infinite;
}
/* A slow swell, not a flash: it should read as "alive", not as an alert. */
@keyframes sundis-pdp-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.025); }
}

.sundis-pdp-stage__bottle {
  z-index: 1;
  bottom: 0;
  height: 100%;
  /* Behind the fruit and stepped to one side — not hidden straight behind it.
     Two subjects on the same axis read as one muddled shape; offsetting the
     back one lets its whole silhouette be seen at a glance, which is what
     makes the depth legible before anyone points at the stage. */
  transform: translateX(-13%) translateY(-8%) scale(.84);
  filter: blur(6px) brightness(.76) saturate(.86);
  opacity: .8;
}
.sundis-pdp-stage__bottle img {
  filter: drop-shadow(0 30px 34px rgb(0 0 0 / .42)) drop-shadow(0 0 40px rgb(160 25 45 / .3));
  animation: sundis-float 7s ease-in-out infinite;
}

/* ---- Focus pulled: bottle in front, fruit behind ------------------------ *
   Driven by hover on the stage's own control, by keyboard focus on it, and
   by the class the script toggles on tap — three ways into one state.
   ------------------------------------------------------------------------- */
.sundis-pdp-stage.is-bottle-front .sundis-pdp-stage__bottle {
  z-index: 3;
  transform: translateX(0) translateY(0) scale(1);
  filter: none;
  opacity: 1;
}
.sundis-pdp-stage.is-bottle-front .sundis-pdp-stage__fruit {
  z-index: 1;
  /* The fruit doesn't just blur in place — it drops back and steps aside, so
     the bottle stands clear of it instead of rising out of a smear the width
     of the whole stage. Softer and dimmer than the bottle ever is behind it,
     because the product is what this state is for. */
  transform: translateX(12%) translateY(-5%) scale(.72);
  filter: blur(9px) brightness(.66) saturate(.78);
  opacity: .62;
}

/* Glass shine: a diagonal band masked to the bottle's own PNG silhouette, so
   the light glints across glass and label instead of over a rectangle. It is
   held back until the bottle is the thing in focus — a highlight on a blurred
   object is the one detail that gives a fake depth-of-field away. */
.sundis-pdp-stage__bottle::after {
  content: "";
  position: absolute;
  inset: 0;
  display: none;
  background: linear-gradient(115deg, transparent 36%, rgb(255 255 255 / .6) 50%, transparent 64%);
  background-size: 240% 240%;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  /* The same file the <img> uses, so the band is masked to the exact
     silhouette on screen — a mask cut from the uncropped original would sit a
     few pixels low and let the glint spill past the glass. */
  -webkit-mask-image: url("../assets/products/pomegranate-cut.png");
          mask-image: url("../assets/products/pomegranate-cut.png");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
@supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
  .sundis-pdp-stage__bottle::after { display: block; }
}
.sundis-pdp-stage.is-bottle-front .sundis-pdp-stage__bottle::after {
  opacity: 1;
  animation: sundis-pdp-shine 7s ease-in-out .35s infinite;
}
@keyframes sundis-pdp-shine {
  0%   { background-position: -160% -60%; }
  18%  { background-position: 160% 60%; }
  100% { background-position: 160% 60%; }
}

/* Everything that is driven by the POINTER lives in here, and nowhere else.
   A touch screen still applies :hover to whatever was last tapped and keeps
   it there until something else is tapped — so with these rules global, the
   first tap put the bottle forward and the second tap appeared to do nothing:
   the class had gone, but the stale hover (and the focus the tap left behind)
   were still holding the bottle in front. Scoped to (hover: hover), touch is
   left with exactly one driver — the class the script toggles. */
@media (hover: hover) {
  /* A click does do something here — it pins whatever is currently in front —
     so the control is allowed to look pressable. */
  .sundis-pdp-stage__trigger { cursor: pointer; }

  .sundis-pdp-stage:not(.is-locked):has(.sundis-pdp-stage__trigger:hover) .sundis-pdp-stage__pool,
  .sundis-pdp-stage:not(.is-locked):has(.sundis-pdp-stage__trigger:focus-visible) .sundis-pdp-stage__pool {
    width: 200px;
    margin-inline-start: -100px;
  }
  .sundis-pdp-stage:not(.is-locked):has(.sundis-pdp-stage__trigger:hover) .sundis-pdp-stage__halo--glow,
  .sundis-pdp-stage:not(.is-locked):has(.sundis-pdp-stage__trigger:focus-visible) .sundis-pdp-stage__halo--glow {
    background: radial-gradient(closest-side, rgb(186 166 96 / .3), rgb(160 25 45 / .16) 52%, transparent 74%);
  }
  .sundis-pdp-stage:not(.is-locked):has(.sundis-pdp-stage__trigger:hover) .sundis-pdp-stage__halo--ring,
  .sundis-pdp-stage:not(.is-locked):has(.sundis-pdp-stage__trigger:focus-visible) .sundis-pdp-stage__halo--ring { opacity: 0; }

  .sundis-pdp-stage:not(.is-locked) .sundis-pdp-stage__trigger:hover .sundis-pdp-stage__bottle,
  .sundis-pdp-stage:not(.is-locked) .sundis-pdp-stage__trigger:focus-visible .sundis-pdp-stage__bottle {
    z-index: 3;
    transform: translateX(0) translateY(0) scale(1);
    filter: none;
    opacity: 1;
  }
  .sundis-pdp-stage:not(.is-locked) .sundis-pdp-stage__trigger:hover .sundis-pdp-stage__fruit,
  .sundis-pdp-stage:not(.is-locked) .sundis-pdp-stage__trigger:focus-visible .sundis-pdp-stage__fruit {
    z-index: 1;
    transform: translateX(12%) translateY(-5%) scale(.72);
    filter: blur(9px) brightness(.66) saturate(.78);
    opacity: .62;
  }
  .sundis-pdp-stage:not(.is-locked) .sundis-pdp-stage__trigger:hover .sundis-pdp-stage__bottle::after,
  .sundis-pdp-stage:not(.is-locked) .sundis-pdp-stage__trigger:focus-visible .sundis-pdp-stage__bottle::after {
    opacity: 1;
    animation: sundis-pdp-shine 7s ease-in-out .35s infinite;
  }
  .sundis-pdp-stage:not(.is-locked) .sundis-pdp-stage__trigger:hover .sundis-pdp-stage__cue-ring { animation: none; opacity: 0; }
  .sundis-pdp-stage:not(.is-locked) .sundis-pdp-stage__trigger:hover ~ .sundis-pdp-stage__cue { opacity: 0; }
}

/* ---- The hover affordance ----------------------------------------------- */
.sundis-pdp-stage__cue-ring {
  position: absolute;
  inset-inline: 50%;
  bottom: 14%;
  width: 300px;
  height: 300px;
  margin-inline-start: -150px;
  border: 1.5px solid rgb(186 166 96 / .5);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: sundis-pdp-ping 3.4s var(--ease) infinite;
}
.sundis-pdp-stage__cue-ring--b { animation-delay: 1.7s; }
/* Once the visitor has found the interaction, the invitation stops. */
.sundis-pdp-stage.is-bottle-front .sundis-pdp-stage__cue-ring { animation: none; opacity: 0; }
@keyframes sundis-pdp-ping {
  0%   { opacity: 0;   transform: scale(.62); }
  22%  { opacity: .55; }
  100% { opacity: 0;   transform: scale(1.24); }
}

.sundis-pdp-stage__cue {
  position: absolute;
  inset-inline: 0;
  bottom: -44px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gold);
  opacity: 1;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}
/* One line at a time, and it always names the NEXT click: point / pin /
   play / back. A control whose effect is invisible in the moment it is used
   — pinning a picture that is already on screen — has to say what it did. */
.sundis-pdp-stage__cue-text--tap { display: none; }
@media (hover: none) {
  .sundis-pdp-stage__cue-text--hover { display: none; }
  .sundis-pdp-stage__cue-text--tap { display: inline; }
}
.sundis-pdp-stage.is-locked .sundis-pdp-stage__cue-text--hover,
.sundis-pdp-stage.is-locked .sundis-pdp-stage__cue-text--tap { display: none; }
.sundis-pdp-stage__cue svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sundis-pdp-stage.is-bottle-front .sundis-pdp-stage__cue { opacity: 0; }
/* Once a click takes over — pinned, or presenting itself — the stage says
   nothing at all: the picture is the point, and a caption under it would only
   compete with it. The invitation ring stops for the same reason. */
.sundis-pdp-stage.is-locked .sundis-pdp-stage__cue { opacity: 0; }
.sundis-pdp-stage.is-locked .sundis-pdp-stage__cue-ring { animation: none; opacity: 0; }

/* ---- Proof points + actions --------------------------------------------- */
.sundis-pdp-hero__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
/* The badge component is drawn for a light ground (purple ink on a faint
   purple wash) — restated for the dark hero it sits on here. */
.sundis-pdp-hero__chips .sundis-story__badge {
  background: rgb(255 255 255 / .1);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.sundis-pdp-hero__chips .sundis-story__badge svg {
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.7;
  stroke-linejoin: round;
}

.sundis-pdp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}
.sundis-pdp-hero__actions-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s var(--ease);
}
.sundis-btn--solid:hover .sundis-pdp-hero__actions-icon { transform: translateY(3px); }

/* ==========================================================================
   2. Key visual — the packaging banner, rebuilt as a parallax stage
   ========================================================================== */
.sundis-pdp-key { padding-block: 86px 0; }

.sundis-pdp-key__card {
  position: relative;
  display: grid;
  /* Lockup on the inline-start half (the right, in RTL) and the packshot on
     the inline-end — the same reading order the reference sheet uses: name
     first, bottle second. The packshot column stays generous so the bottle
     has room to lift and tilt past its own box on hover without meeting the
     lockup beside it. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  align-items: center;
  gap: 30px;
  min-height: 470px;
  padding: 48px 56px;
  isolation: isolate;
  /* The card language of this whole brand: the wide bottom-start corner and
     the one elevation scale sundis.css defines. The gold-cream gradient is
     the CTA band's own pair, so the banner and the page's closing section
     are recognisably the same warm surface. */
  border-radius: 12px 12px 60px 12px;
  background: linear-gradient(118deg, var(--sundis-canvas-warm) 0%, #efdcb2 46%, #e3cd9c 100%);
  box-shadow: var(--sundis-lift);
}
/* The card never clips. Toggling overflow on hover was what cut the bottle in
   half on the way back: the crop returned the instant the pointer left, while
   the bottle still had most of its travel to go, so it came home through a
   hard edge. The clipping job belongs to the frame below instead — a fixed
   crop that has no reason to change. */
.sundis-pdp-key__frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

/* The brand's line pattern across the gold field — as two cropped copies,
   never as a repeating tile. pattern-sundis.png is a composed piece (one
   tall arrangement of arcs and rounded strokes, 1143x3377), not a seamless
   swatch: tiling it butts its nearly-empty left edge against its busy right
   edge and cuts every arc mid-stroke, which is what made the field read as
   broken. Two copies anchored to opposite flanks, each showing a DIFFERENT
   region of the artwork and one of them mirrored, is the same idiom the
   footer plate uses (.plate__pattern--a/--b) — whole motifs, cropped only by
   the card's own edge, with the middle left open for the bottle and the
   lockup. The lines are white, so they read here as a cream texture over
   gold at plain opacity; `multiply` would erase them on a light ground. */
.sundis-pdp-key__frame::before,
.sundis-pdp-key__frame::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -14%;
  bottom: -14%;
  width: 480px;
  background-image: url("../assets/pattern-sundis.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  pointer-events: none;
}
.sundis-pdp-key__frame::before {
  inset-inline-start: -70px;
  background-position: 50% 6%;
  opacity: .4;
}
.sundis-pdp-key__frame::after {
  inset-inline-end: -90px;
  background-position: 50% 88%;
  opacity: .3;
  transform: scaleX(-1);
}

/* One larger motif over the tile, drifting, so the field has a focal texture
   as well as an even one. */
.sundis-pdp-key__watermark {
  position: absolute;
  inset-inline-end: 34%;
  top: -70px;
  width: 400px;
  height: auto;
  max-width: none;
  opacity: .4;
  pointer-events: none;
  animation: sundis-drift 26s ease-in-out infinite;
}

/* Sized by HEIGHT, not width: the bottle is 169×401, so any width big enough
   to read would stand taller than the card and get cut off by its own
   overflow. Height-first keeps the packshot whole inside the frame. */
.sundis-pdp-key__bottle {
  position: relative;
  z-index: 1;
  display: block;
  justify-self: center;
  height: 366px;
  transform-origin: 50% 100%;
  /* Unhurried: the bottle leans out of the card over a beat you can follow,
     on an ease-out so it arrives softly rather than snapping into place. */
  transition: transform .62s cubic-bezier(.22, .68, .32, 1);
  /* Above the lockup and the marks once it grows past its own column, so it
     reads as stepping toward the viewer rather than being cut by the text
     beside it. */
  will-change: transform;
}
/* The idle float lives on the IMAGE, never on the wrapper the hover moves.
   Two rules writing `transform` on one element is what made this feel instant:
   an animation always beats a plain declaration, so the hover had to kill the
   animation outright — and the frame that killed it snapped the bottle to its
   new pose with nothing left to transition from. One element per job means the
   lean can simply ease, while the float keeps breathing underneath it. */
.sundis-pdp-key__bottle img {
  display: block;
  width: auto;
  height: 100%;
  animation: sundis-float 7.5s ease-in-out infinite;
  /* The packshot's own baked-in grey ground shadow was cut out of the file
     (pomegranate-cut.png); the shade under the bottle is drawn here instead,
     so it can soften and spread as the bottle leaves the ground rather than
     sitting under it as a fixed grey patch. */
  filter: drop-shadow(0 16px 16px rgb(68 47 114 / .2));
  transition: filter .62s cubic-bezier(.22, .68, .32, 1);
}
/* A lean, not a leap: the bottle tips toward the viewer and rises far enough
   to clear the card's own top edge — the card's overflow opens at the same
   moment, so the packshot stands proud of the frame instead of being cut by
   it. The scale stays almost imperceptible; the tilt and the lift carry the
   whole gesture, which is why it reads as a move rather than an explosion. */
.sundis-pdp-key__card:hover .sundis-pdp-key__bottle,
.sundis-pdp-key__card:focus-within .sundis-pdp-key__bottle {
  z-index: 3;
  transform: translateY(-86px) scale(1.06) rotate(-5deg);
}
.sundis-pdp-key__card:hover .sundis-pdp-key__bottle img,
.sundis-pdp-key__card:focus-within .sundis-pdp-key__bottle img {
  filter: drop-shadow(0 44px 30px rgb(68 47 114 / .26));
}

.sundis-pdp-key__lockup {
  position: relative;
  z-index: 1;
  max-width: 560px;
}

/* The lockup is Latin, so it is laid out LTR inside the RTL page — otherwise
   the wordmark and "Life" swap places and the brand reads backwards. */
.sundis-pdp-key__brand {
  display: inline-flex;
  direction: ltr;
  align-items: flex-end;
  gap: 10px;
}
.sundis-pdp-key__brand img {
  width: 190px;
  height: auto;
  /* The wordmark ships in brand purple; on this warm gold ground the deep
     purple is exactly the contrast the packaging itself uses. */
  filter: none;
}
/* "Life" is set, not imported: the sub-brand has no separate asset in the
   project, and a lockup faked from the main wordmark would be worse than an
   honest typographic pairing. */
.sundis-pdp-key__life {
  font-size: 30px;
  font-weight: 900;
  font-style: normal;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--sundis-purple);
  padding-bottom: 4px;
}

.sundis-pdp-key__name {
  margin-top: 22px;
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 900;
  line-height: 1.35;
  color: var(--sundis-purple-deep);
}
.sundis-pdp-key__latin {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .01em;
  color: rgb(var(--sundis-purple-rgb) / .72);
}

/* One line of provenance under the name — the banner's right half was
   noticeably lighter than its packshot half without it. */
.sundis-pdp-key__from {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  font-size: 14.5px;
  font-weight: 500;
  color: rgb(var(--sundis-purple-rgb) / .8);
}
.sundis-pdp-key__from::before {
  content: "";
  width: 30px;
  height: 1px;
  background: var(--sundis-purple);
  opacity: .5;
}

.sundis-pdp-key__marks {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}
.sundis-pdp-key__mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 96px;
  padding: 12px 20px;
  border: 1.4px solid rgb(var(--sundis-purple-rgb) / .3);
  border-radius: 12px 12px 22px 12px;
  background: rgb(255 255 255 / .5);
  text-align: center;
  color: var(--sundis-purple-deep);
}
.sundis-pdp-key__mark strong { font-size: 19px; font-weight: 900; line-height: 1.2; }
.sundis-pdp-key__mark span { font-size: 12px; font-weight: 500; color: rgb(var(--sundis-purple-rgb) / .7); }
.sundis-pdp-key__mark--wide strong { font-size: 15.5px; }

/* ==========================================================================
   3. Composition — three rings that draw themselves once, on scroll
   ========================================================================== */
.sundis-pdp-compose { padding-block: 86px 0; }

.sundis-pdp-compose__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  max-width: 1120px;
  margin-inline: auto;
}

.sundis-pdp-compose__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 38px 26px 34px;
  border-radius: 12px 12px 40px 12px;
  background: #fff;
  text-align: center;
  box-shadow: var(--sundis-lift);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.sundis-pdp-compose__item:hover {
  transform: translateY(-6px);
  box-shadow: var(--sundis-lift-raised);
}

.sundis-pdp-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
}
.sundis-pdp-ring svg {
  width: 100%;
  height: 100%;
  /* Starts the stroke at 12 o'clock instead of 3 — a progress ring that
     begins on the side reads as a bar bent into a circle. */
  transform: rotate(-90deg);
}
.sundis-pdp-ring__track {
  fill: none;
  stroke: rgb(var(--sundis-purple-rgb) / .1);
  stroke-width: 9;
}
.sundis-pdp-ring__bar {
  fill: none;
  stroke: var(--gold);
  stroke-width: 9;
  stroke-linecap: round;
  /* 2πr for r=52. The dash offset starts fully retracted and js/sundis-
     product.js sets --dash once the ring scrolls into view. */
  stroke-dasharray: 326.73;
  stroke-dashoffset: 326.73;
  transition: stroke-dashoffset 1.6s var(--ease);
}
.is-in .sundis-pdp-ring__bar { stroke-dashoffset: var(--dash, 326.73); }
/* A "zero" ring has nothing to draw, so the empty track itself becomes the
   statement — a thin gold dot marks the start rather than leaving the
   viewer wondering whether the animation failed. */
.sundis-pdp-ring--empty .sundis-pdp-ring__track { stroke: rgb(var(--sundis-purple-rgb) / .14); }
.sundis-pdp-ring--empty .sundis-pdp-ring__bar { stroke-dasharray: 2 324.73; stroke-dashoffset: 0; }

.sundis-pdp-ring__value {
  position: absolute;
  font-size: 30px;
  font-weight: 900;
  color: var(--sundis-purple);
}

.sundis-pdp-compose__title {
  margin-top: 22px;
  font-size: 19px;
  font-weight: 700;
  color: var(--sundis-purple);
}
.sundis-pdp-compose__note {
  margin-top: 10px;
  max-width: 30ch;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--grey-600);
}

/* ==========================================================================
   4. Facts — energy table + specification table
   ========================================================================== */
.sundis-pdp-facts { padding-block: 96px 0; }
.sundis-pdp-facts .section-head { margin-bottom: 46px; }

.sundis-pdp-facts__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  /* Stretch (the grid default) so both cards share the row's own height —
     whichever list of rows is longer sets it, the shorter card's white panel
     simply extends to match instead of ending early. */
  align-items: stretch;
}

.sundis-pdp-card {
  position: relative;
  padding: 36px 34px 34px;
  border-radius: 12px 12px 46px 12px;
  background: #fff;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--sundis-lift);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.sundis-pdp-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sundis-lift-raised);
}
/* One faint wash in the card's own corner, echoing the flavour cards' juice
   light without repeating the splash photograph on an information panel. */
.sundis-pdp-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline-end: -60px;
  top: -70px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--sundis-purple-rgb) / .09), transparent 74%);
}

.sundis-pdp-card__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 16px;
  padding-bottom: 22px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgb(var(--sundis-purple-rgb) / .1);
}
.sundis-pdp-card__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px 12px 18px 12px;
  background: rgb(var(--sundis-purple-rgb) / .08);
}
.sundis-pdp-card__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.7;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.sundis-pdp-card__title {
  align-self: end;
  font-size: 20px;
  font-weight: 900;
  color: var(--sundis-purple);
}
.sundis-pdp-card__meta {
  align-self: start;
  font-size: 13px;
  font-weight: 300;
  color: var(--grey-600);
}

/* Energy rows ------------------------------------------------------------ */
.sundis-pdp-nutri__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 16px;
  padding-block: 15px;
  border-bottom: 1px solid rgb(var(--sundis-purple-rgb) / .07);
}
.sundis-pdp-nutri__row:last-child { border-bottom: 0; padding-bottom: 4px; }

.sundis-pdp-nutri__label { font-size: 15.5px; font-weight: 500; color: var(--ink); }
.sundis-pdp-nutri__value {
  font-size: 17px;
  font-weight: 900;
  color: var(--sundis-purple);
  white-space: nowrap;
}
.sundis-pdp-nutri__value i { font-size: 12.5px; font-weight: 400; font-style: normal; color: var(--grey-600); }

/* The bar is the one thing the reference's plain table could not do: show at
   a glance which of these numbers is actually large. Values are relative to
   the row's own scale, not to one another — it is a reading aid, not a
   nutrition claim, which is why it carries aria-hidden. */
.sundis-pdp-nutri__bar {
  grid-column: 1 / -1;
  display: block;
  height: 5px;
  border-radius: 999px;
  background: rgb(var(--sundis-purple-rgb) / .08);
  overflow: hidden;
}
.sundis-pdp-nutri__bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sundis-purple), var(--gold));
  transition: width 1.2s var(--ease);
}
.is-in .sundis-pdp-nutri__bar span { width: var(--fill, 0%); }
.sundis-pdp-nutri__row--zero .sundis-pdp-nutri__value { color: var(--grey-400); }

/* Specification rows ----------------------------------------------------- */
.sundis-pdp-spec__row {
  display: grid;
  grid-template-columns: minmax(0, 140px) minmax(0, 1fr);
  gap: 18px;
  padding-block: 16px;
  border-bottom: 1px solid rgb(var(--sundis-purple-rgb) / .07);
}
.sundis-pdp-spec__row:last-child { border-bottom: 0; padding-bottom: 4px; }
.sundis-pdp-spec__row dt { font-size: 14.5px; font-weight: 500; color: var(--grey-600); }
.sundis-pdp-spec__row dd {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--sundis-purple);
}

/* ==========================================================================
   5. Benefits — a short, warm passage beside the product itself
   ========================================================================== */
.sundis-pdp-benefits { padding-block: 96px 0; }
.sundis-pdp-benefits .section-head { margin-bottom: 40px; }

/* Flex, not a 1fr/fixed grid — a grid track this lopsided leaves the text
   sized to its own max-width but still anchored to the far edge of an
   oversized column, stranding a gap between it and the image. Flex sizes
   both children to their own content caps and holds them together as one
   centred pair instead. */
.sundis-pdp-benefits__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

/* Wide enough to read as a full passage, but no longer stretched to fill a
   leftover grid track — this cap now sizes the element itself. */
.sundis-pdp-benefits__copy { flex: 0 1 620px; }
/* The brand's own eyebrow device (see .sundis-story__eyebrow in sundis.css)
   — the short gold line and label the About page opens its own passages
   with, borrowed rather than re-invented. */
.sundis-pdp-benefits__copy .sundis-story__eyebrow { margin-bottom: 14px; }

/* Short and warm rather than a nutrition dump — the facts table two sections
   up already carries every number a reader could want; this is the one
   sentence that says why the pairing exists at all. */
.sundis-pdp-benefits__text {
  font-size: 19px;
  font-weight: 300;
  line-height: 1.9;
  color: var(--sundis-purple-deep);
}

/* Four short claims as the brand's own pill badge (sundis.css), not a
   bulleted list — the same device the About page uses for exactly this: a
   handful of facts too short to be sentences and too many to be one. */
.sundis-pdp-benefits__badges { margin-top: 28px; }

/* The photograph side: the same fruit-and-bottle pairing the hero press and
   the key-visual banner already use — floating free on the section's own
   canvas rather than boxed into a card, since these are cut-out product
   photographs with their own transparency, not a flat rectangle of art that
   needs a frame to sit in. A soft blurred glow behind them (the same device
   as .sundis-cta__glow) gives them a place to rest without drawing a box. */
.sundis-pdp-benefits__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  flex: 0 1 360px;
  width: 360px;
}
.sundis-pdp-benefits__glow {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--sundis-purple-rgb) / .1), transparent 72%);
  animation: sundis-splash-breathe 8s var(--ease) infinite;
}
.sundis-pdp-benefits__fruit {
  position: absolute;
  inset-inline-start: 4%;
  bottom: 2%;
  width: 66%;
  height: auto;
  filter: drop-shadow(0 20px 28px rgb(var(--sundis-purple-rgb) / .18));
}
.sundis-pdp-benefits__bottle {
  position: absolute;
  inset-inline-end: 8%;
  bottom: 0;
  height: 88%;
  width: auto;
  filter: drop-shadow(0 18px 24px rgb(var(--sundis-purple-rgb) / .24));
}

/* ==========================================================================
   6. Related — the archive's own shelf, four cards wide
   ========================================================================== */
/* Bottom padding here, unlike every other section on this page, because the
   section BELOW this one is the CTA — a band with its own warm background.
   Every other seam on the page is canvas meeting canvas, where the next
   section's top padding is the whole gap; here the colour changes at the
   seam, so with no bottom padding the cards ended exactly on the band's edge
   and their shadows fell across it, which read as the two sections running
   into each other. */
.sundis-pdp-related { padding-block: 96px 72px; }
.sundis-pdp-related .section-head { margin-bottom: 46px; }
.sundis-pdp-related__grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  max-width: none;
  gap: 30px;
  margin-top: 0;
}
@media (min-width: 1180px) {
  .sundis-pdp-related__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   7. Scroll reveal — one shared transition for every [data-reveal] block.
   Elements start hidden ONLY once JS has confirmed it will observe them
   (js/sundis-product.js adds .sundis-pdp-reveal-ready to <html>), so a
   failed or blocked script can never leave the page blank.
   ========================================================================== */
.sundis-pdp-reveal-ready [data-reveal] {
  opacity: 0;
  /* Kept short on purpose: a wider slide leaves a wider window, mid-scroll,
     where a still-animating row visually laps into the section below it
     before the transition finishes settling into place. */
  transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.sundis-pdp-reveal-ready [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   8. Responsive — the project's own breakpoints, no new ones
   ========================================================================== */
@media (max-width: 1200px) {
  .sundis-pdp-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 40px; }
  .sundis-pdp-key__card { padding: 40px 40px; gap: 30px; }
  .sundis-pdp-key__frame::before,
  .sundis-pdp-key__frame::after { width: 380px; }
  .sundis-pdp-key__watermark { width: 340px; }
}

@media (max-width: 1024px) {
  .sundis-pdp-hero { padding-block: var(--hero-top) 72px; }
  .sundis-pdp-stage { height: clamp(270px, 38vw, 360px); margin-block: 26px 58px; }
  .sundis-pdp-stage__trigger { width: min(92%, 380px); }
  .sundis-pdp-stage__halo--glow { width: 360px; margin-inline-start: -180px; }
  .sundis-pdp-stage__halo--ring { width: 260px; margin-inline-start: -130px; }
  .sundis-pdp-stage__cue-ring { width: 210px; height: 210px; margin-inline-start: -105px; }

  .sundis-pdp-key { padding-block: 68px 0; }
  .sundis-pdp-key__card {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    padding: 40px 28px 44px;
  }
  .sundis-pdp-key__bottle { height: 300px; }
  /* A shorter packshot needs a shorter lift to clear the same edge. */
  .sundis-pdp-key__card:hover .sundis-pdp-key__bottle,
  .sundis-pdp-key__card:focus-within .sundis-pdp-key__bottle {
    transform: translateY(-64px) scale(1.05) rotate(-5deg);
  }
  .sundis-pdp-key__brand { justify-content: center; }
  .sundis-pdp-key__marks { justify-content: center; }

  .sundis-pdp-compose { padding-block: 68px 0; }
  .sundis-pdp-compose__grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; }

  .sundis-pdp-facts,
  .sundis-pdp-benefits { padding-block: 72px 0; }
  /* Cleared of the closing band below it — see the desktop rule. */
  .sundis-pdp-related { padding-block: 72px 56px; }
  .sundis-pdp-facts__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sundis-pdp-benefits__grid { flex-direction: column; gap: 32px; }
  .sundis-pdp-benefits__copy { flex-basis: auto; max-width: none; text-align: center; }
  .sundis-pdp-benefits__copy .sundis-story__eyebrow,
  .sundis-pdp-benefits__badges { justify-content: center; }
  /* width, not just max-width: every child here (the glow and both photos)
     is position:absolute, so the box has no normal-flow content to size
     itself against — an explicit width keeps it from collapsing. */
  .sundis-pdp-benefits__visual { flex-basis: auto; width: 100%; max-width: 320px; }
}

@media (max-width: 620px) {
  .sundis-pdp-hero { padding-block: var(--hero-top) 56px; }
  .sundis-pdp-hero__title { font-size: clamp(27px, 8vw, 34px); }
  .sundis-pdp-hero__title-accent { white-space: normal; }
  .sundis-pdp-hero__lead { font-size: 16px; }
  /* The stage keeps its full share of a phone screen — it is the section's
     whole reason to exist — but the halos tighten around it. */
  .sundis-pdp-stage { height: clamp(240px, 64vw, 300px); margin-block: 22px 52px; }
  .sundis-pdp-stage__trigger { width: 100%; }
  .sundis-pdp-stage__pool { width: 200px; margin-inline-start: -100px; height: 40px; }
  .sundis-pdp-stage.is-bottle-front .sundis-pdp-stage__pool { width: 140px; margin-inline-start: -70px; }
  .sundis-pdp-stage__halo--glow { width: 260px; margin-inline-start: -130px; }
  .sundis-pdp-stage__halo--ring { width: 190px; margin-inline-start: -95px; }
  .sundis-pdp-stage__cue-ring { width: 165px; height: 165px; margin-inline-start: -82.5px; }
  .sundis-pdp-stage__cue { bottom: -38px; font-size: 13px; }
  .sundis-pdp-hero__chips .sundis-story__badge { font-size: 13px; padding: 8px 15px; }
  .sundis-pdp-hero__actions .sundis-btn { flex: 1 1 100%; justify-content: center; }

  .sundis-pdp-key { padding-block: 52px 0; }
  .sundis-pdp-key__card { padding: 34px 20px 38px; border-radius: 12px 12px 40px 12px; }
  /* One flank only at phone width: two 260px copies on a ~330px card would
     leave no plain gold between them for the product to sit against. */
  .sundis-pdp-key__frame::before { width: 260px; inset-inline-start: -50px; opacity: .34; }
  .sundis-pdp-key__frame::after { display: none; }
  .sundis-pdp-key__bottle { height: 250px; }
  .sundis-pdp-key__card:hover .sundis-pdp-key__bottle,
  .sundis-pdp-key__card:focus-within .sundis-pdp-key__bottle {
    transform: translateY(-46px) scale(1.04) rotate(-4deg);
  }
  .sundis-pdp-key__brand img { width: 140px; }
  /* The rule before the provenance line pushes it into an awkward wrap once
     the card is one narrow column — the line carries itself there. */
  .sundis-pdp-key__from { font-size: 13px; }
  .sundis-pdp-key__from::before { display: none; }
  .sundis-pdp-key__life { font-size: 23px; }
  .sundis-pdp-key__marks { gap: 10px; }
  .sundis-pdp-key__mark { min-width: 0; flex: 1 1 130px; padding: 10px 14px; }

  .sundis-pdp-compose { padding-block: 52px 0; }
  .sundis-pdp-compose__grid { grid-template-columns: minmax(0, 1fr); max-width: 330px; }

  .sundis-pdp-facts,
  .sundis-pdp-benefits,
  .sundis-pdp-related { padding-block: 56px 44px; }
  .sundis-pdp-card { padding: 28px 22px 26px; }
  .sundis-pdp-spec__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .sundis-pdp-related__grid { grid-template-columns: 1fr; max-width: 320px; margin-inline: auto; }
}

/* ==========================================================================
   9. Reduced motion — everything decorative stops; nothing disappears.
   The reveal blocks in particular must end up visible, not frozen at
   opacity 0.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sundis-pdp-hero__pattern,
  .sundis-pdp-hero__inner > *,
  .sundis-pdp-stage__halo,
  .sundis-pdp-stage__bottle,
  .sundis-pdp-stage__bottle img,
  .sundis-pdp-stage__fruit img,
  .sundis-pdp-stage__cue-ring,
  .sundis-pdp-stage__cue svg,
  .sundis-pdp-key__watermark,
  .sundis-pdp-key__bottle,
  .sundis-pdp-key__bottle img,
  .sundis-pdp-key__card:hover .sundis-pdp-key__bottle,
  .sundis-pdp-key__card:focus-within .sundis-pdp-key__bottle,
  .sundis-pdp-benefits__glow {
    animation: none;
    opacity: 1;
    transform: none;
    transition: none;
    filter: drop-shadow(0 26px 26px rgb(68 47 114 / .3));
  }
  /* No rack focus here: a depth swap is exactly the kind of movement this
     setting asks for less of. The stage simply holds the finished product,
     and the invitation to explore is withdrawn rather than left on screen
     promising motion that will not come. */
  .sundis-pdp-stage__fruit { opacity: 0; visibility: hidden; }
  .sundis-pdp-stage__trigger { cursor: default; }
  .sundis-pdp-stage__cue,
  .sundis-pdp-stage__cue-ring { display: none; }
  /* A shine band frozen mid-sweep reads as a stray highlight, not a glint. */
  .sundis-pdp-stage__bottle::after { display: none; }

  .sundis-pdp-reveal-ready [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .sundis-pdp-nutri__bar span { transition: none; }
  .sundis-pdp-ring__bar { transition: none; }
}