/* Floating vial stage for product pages.
   Replaces the flat product photo with a transparent cutout that floats over an
   accent-coloured glow. Static under prefers-reduced-motion; tilt is desktop-only. */
.vial-stage {
  --vs: 63,208,230; --px: 0; --py: 0;
  position: relative; height: 400px; margin-bottom: 20px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; perspective: 900px; isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(var(--vs), 0.16), transparent 62%),
    linear-gradient(180deg, #06101C 0%, #0A1828 100%);
  border: 1px solid rgba(var(--vs), 0.16);
}
.vs-glow {
  position: absolute; left: 50%; top: 46%; width: 118%; aspect-ratio: 1; z-index: -1;
  transform: translate(calc(-50% + var(--px) * -14px), calc(-50% + var(--py) * -10px));
  background: radial-gradient(circle, rgba(var(--vs), 0.42) 0%, rgba(var(--vs), 0.12) 38%, transparent 68%);
  animation: vs-breathe 6s ease-in-out infinite;
  pointer-events: none;
}
.vs-vial {
  height: 88%; width: auto; max-width: 80%; object-fit: contain; display: block;
  transform: translate3d(calc(var(--px) * 8px), calc(var(--py) * 6px), 0) rotateY(calc(var(--px) * 9deg)) rotateX(calc(var(--py) * -6deg));
  filter: drop-shadow(0 22px 26px rgba(0,0,0,0.55)) drop-shadow(0 0 28px rgba(var(--vs), 0.28));
  animation: vs-float 6.5s ease-in-out infinite;
  will-change: transform;
}
.vs-floor {
  position: absolute; left: 50%; bottom: 6%; width: 46%; height: 16px; border-radius: 50%; z-index: -1;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(var(--vs), 0.5), transparent 70%);
  filter: blur(6px); animation: vs-floor 6.5s ease-in-out infinite;
}
.vial-stage.vs-fallback { height: auto; background: none; border: 0; overflow: visible; }
.vial-stage.vs-fallback .vs-vial { height: auto; width: 100%; max-width: 100%; border-radius: 12px; animation: none; transform: none; filter: none; }
.vial-stage.vs-fallback .vs-glow, .vial-stage.vs-fallback .vs-floor { display: none; }
@keyframes vs-float { 0%, 100% { translate: 0 6px; } 50% { translate: 0 -10px; } }
@keyframes vs-floor { 0%, 100% { opacity: 0.95; scale: 1; } 50% { opacity: 0.55; scale: 0.82; } }
@keyframes vs-breathe { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }
@media (max-width: 768px) { .vial-stage { height: 340px; } }
@media (prefers-reduced-motion: reduce) {
  .vs-vial, .vs-glow, .vs-floor { animation: none; }
  .vs-vial { transform: none; }
}

/* Sticky order bar (vial-stage.js). Phones/small tablets only. */
.ps-bar { display: none; }
@media (max-width: 768px) {
  .ps-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    background: rgba(4,12,22,0.94);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid rgba(63,208,230,0.22);
    transform: translateY(115%); transition: transform 0.35s cubic-bezier(.22,.9,.3,1);
  }
  .ps-bar.on { transform: none; }
  .ps-info { min-width: 0; line-height: 1.25; }
  .ps-info b { display: block; font-size: 14px; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ps-info span { font-size: 17px; font-weight: 900; color: var(--accent, #3FD0E6); }
  .ps-go {
    flex: none; padding: 13px 22px; border-radius: 50px; text-decoration: none;
    background: var(--accent, #3FD0E6); color: #020B16; font-weight: 800; font-size: 14px; letter-spacing: 0.3px;
    box-shadow: 0 0 28px rgba(63,208,230,0.32);
  }
  .ps-go:hover { text-decoration: none; opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) { .ps-bar { transition: none; } }