/* Studio hero = the product-page Studio banner visual (product-studio-banner.css).
   The banner's desktop stage (280x240, canvas 132px, photo 117px) is kept as is
   and scaled as one piece by --s, so every proportion and the canvas turn match
   the product page at any width. The banner's own width/height media rules are
   overridden here. */
.vh-studio :where(#studio-main) .studio-hero__promo { --s: 1.95; min-height: 0; padding: 24px 0 40px; }
.studio-hero__stage { position: relative; width: calc(280px * var(--s)); height: calc(240px * var(--s)); }
.studio-hero__promo .vhps-visual { position: absolute; top: 0; left: 0; width: 280px; max-width: none; height: 240px; margin: 0; transform: scale(var(--s)); transform-origin: 0 0; }
.studio-hero__promo .vhps-canvas { width: 132px; left: 46%; top: 6%; }
.studio-hero__promo .vhps-photo { width: 117px; left: 1%; top: 28%; }
.studio-hero__promo .vhps-trail { width: 100%; height: 100%; top: 0; left: 0; }
.studio-hero__promo .vhps-spark--one { top: 3%; right: 7%; }
.studio-hero__promo .vhps-spark--two { bottom: 12%; left: 10%; }
/* Free delivery: a second pill under the canvas, floating out of step with the first. */
.studio-hero__promo .studio-hero__ship { top: auto; left: auto; right: 0; bottom: -2%; animation-delay: -2.2s; }
.studio-hero__promo.is-idle [data-promo-visual] * { animation-play-state: paused; }
@media (min-width: 1440px) { .vh-studio :where(#studio-main) .studio-hero__promo { --s: 2.15; } }
@media (max-width: 1100px) { .vh-studio :where(#studio-main) .studio-hero__promo { --s: 1.7; } }
@media (max-width: 760px) { .vh-studio :where(#studio-main) .studio-hero__promo { --s: 1.4; width: 100%; padding: 8px 0 28px; } }
@media (max-width: 420px) { .vh-studio :where(#studio-main) .studio-hero__promo { --s: 1.15; } }
@media (prefers-reduced-motion: reduce) { .studio-hero__promo [data-promo-visual] * { animation: none !important; } }