/* New purple-cap artwork. Scoped to home/shop; all commerce styles remain intact. */
html body .hero .hero-vials{position:relative;isolation:isolate;width:100%;height:480px;overflow:visible;display:block}
html body .hero .hero-vials::before{content:"";position:absolute;inset:7% 4%;border-radius:50%;background:radial-gradient(circle,#f5dbbd 0%,#e5d5f5 55%,transparent 72%);z-index:-1}
html body .hero .hero-vials::after{display:none}
html body .hero .hero-vial{position:absolute;object-fit:contain;max-width:none;width:65%;height:90%;bottom:2%;filter:drop-shadow(0 18px 18px #48247520);animation:aur-vial-float 5s ease-in-out infinite;transform:rotate(var(--vial-tilt,0deg));pointer-events:none}
html body .hero .hero-vial.v1{left:-13%;height:77%;bottom:7%;--vial-tilt:-32deg;z-index:1;animation-delay:-1.7s}
html body .hero .hero-vial.v2{left:17%;height:100%;bottom:0;--vial-tilt:-8deg;z-index:3}
html body .hero .hero-vial.v3{right:-13%;height:78%;bottom:7%;--vial-tilt:5deg;z-index:2;animation-delay:-3.2s}
@keyframes aur-vial-float{0%,100%{transform:translateY(0) rotate(var(--vial-tilt,0deg))}50%{transform:translateY(-12px) rotate(var(--vial-tilt,0deg))}}
html body .shop-hero-products{overflow:hidden;min-height:420px;padding:105px 0 110px!important}
html body .shop-hero-products>.wrap{width:52%!important;max-width:760px;position:relative;z-index:2}
html body .shop-vial-pair{position:absolute;top:20px;bottom:-35px;width:28%;max-width:450px;pointer-events:none}
html body .shop-vial-left{left:-3%}
html body .shop-vial-right{right:-3%}
html body .shop-cutout{position:absolute;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 15px #48247520)}
html body .shop-vial-left .back{left:-13%;bottom:0;transform:rotate(-30deg)}
html body .shop-vial-left .front{left:22%;bottom:-2%;height:85%;transform:rotate(-3deg)}
html body .shop-vial-right .back{right:-14%;bottom:0;transform:rotate(0deg)}
html body .shop-vial-right .front{right:22%;bottom:-2%;height:85%;transform:rotate(-28deg)}
html body .home-order-cta{position:relative;isolation:isolate;overflow:hidden}
html body .home-order-cta>.wrap{position:relative;z-index:2}
html body .home-order-cta-inner{max-width:680px;margin:auto;padding:25px 0}
.cta-vial-art{position:absolute;inset:0;pointer-events:none;z-index:1}
.cta-vial{position:absolute;width:30%;height:95%;object-fit:contain;bottom:-16%;filter:drop-shadow(0 16px 15px #48247520)}
.cta-vial-left{left:-8%;transform:rotate(-32deg)}
.cta-vial-right{right:-8%;transform:rotate(5deg)}
@media(max-width:1050px){html body .hero .hero-vials{height:380px}html body .home-order-cta-inner{max-width:62%}.cta-vial{width:33%}}
@media(max-width:760px){
 html body .hero .hero-inner{display:flex;flex-direction:column;gap:20px}
 html body .hero .hero-vials{order:-1;height:320px;max-width:420px!important;margin:0 auto!important}
 html body .hero .hero-content{text-align:center}
 html body .hero .hero-btns{align-items:center}
 html body .hero .hero-btns-row{justify-content:center}
 html body .shop-hero-products{min-height:0;padding:54px 0 70px!important}
 html body .shop-hero-products>.wrap{width:calc(100% - 36px)!important;max-width:600px}
 html body .shop-vial-pair{display:none}
 html body .home-order-cta-inner{max-width:100%;padding:0 0 140px}
 .cta-vial{height:190px;width:180px;bottom:-48px}
 .cta-vial-left{left:calc(50% - 170px)}.cta-vial-right{right:calc(50% - 170px)}
}
@media(prefers-reduced-motion:reduce){html body .hero .hero-vial{animation:none}}
@media(max-width:760px){
 html body:not(#_):not(#_) .hero .hero-inner{flex-direction:column!important}
 html body:not(#_):not(#_) .hero .hero-vials{height:300px!important;flex:none;order:-1}
 html body:not(#_):not(#_) .hero .hero-btns-row{flex-wrap:wrap!important}
}

/* Something behind the homepage vials: dotted grid, drifting colour glows, slow rings, a glass platform,
   sparkles, plus the Halloween bats/moon/web. All behind the vials (they sit at z-index 1-3). */
html body:not(#_):not(#_) .hero .hero-vials::before{display:none}
.hero-scene{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-scene>*{position:absolute;pointer-events:none}
.hs-grid{inset:-14% -32% -6%;background-image:radial-gradient(rgba(76,37,140,.32) 1.7px,transparent 2.3px);background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 50% 52% at 50% 52%,#000 25%,transparent 72%);mask-image:radial-gradient(ellipse 50% 52% at 50% 52%,#000 25%,transparent 72%)}
.hs-blob{width:62%;aspect-ratio:1;border-radius:50%;filter:blur(38px);opacity:.9}
.hs-a{left:-6%;top:4%;background:radial-gradient(circle,#b98cff 0,#d7c2ff 45%,transparent 70%);animation:hs-drift-a 14s ease-in-out infinite}
.hs-b{right:-6%;top:14%;background:radial-gradient(circle,#ffc08a 0,#ffd9b8 45%,transparent 70%);animation:hs-drift-b 16s ease-in-out infinite}
@keyframes hs-drift-a{0%,100%{transform:translate(0,0)}50%{transform:translate(6%,-5%)}}
@keyframes hs-drift-b{0%,100%{transform:translate(0,0)}50%{transform:translate(-6%,5%)}}
.hs-ring{left:50%;top:50%;width:min(92%,560px);aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(142,71,205,.28);transform:translate(-50%,-50%);
  box-shadow:inset 0 0 60px rgba(255,255,255,.55),0 0 40px rgba(142,71,205,.08);background:radial-gradient(circle,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 62%)}
.hs-ring2{width:min(68%,410px);border:1.5px dashed rgba(212,94,0,.28);background:none;box-shadow:none;animation:hs-spin 60s linear infinite}
@keyframes hs-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.hs-podium{left:14%;right:14%;bottom:-2%;height:15%;border-radius:50%;
  background:radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.95) 0,rgba(241,235,255,.85) 45%,rgba(196,170,235,.5) 70%,transparent 72%);
  box-shadow:0 14px 30px -12px rgba(76,37,140,.35)}
.hs-spark{width:20px;height:20px;background:#fff;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);filter:drop-shadow(0 0 6px rgba(142,71,205,.6));animation:hs-twinkle 3.6s ease-in-out infinite}
.hs-spark.s1{left:8%;top:22%}.hs-spark.s2{right:9%;top:30%;width:15px;height:15px;animation-delay:-1.2s}.hs-spark.s3{left:18%;bottom:24%;width:13px;height:13px;animation-delay:-2.1s}
.hs-spark.s4{right:20%;bottom:18%;animation-delay:-.6s}.hs-spark.s5{left:47%;top:-2%;width:16px;height:16px;animation-delay:-2.8s}
@keyframes hs-twinkle{0%,100%{opacity:.45;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}
html body .hero .hero-vials::after{display:block;content:'';position:absolute;inset:-70px 2% auto;height:300px;background:url('/assets/halloween-detail.svg') center top/contain no-repeat;z-index:0;opacity:.9;pointer-events:none}
@media(max-width:760px){html body .hero .hero-vials::after{inset:-30px 0 auto;height:190px;opacity:.6}.hs-grid{inset:-8% -6% -4%}.hs-blob{filter:blur(32px)}}
@media(prefers-reduced-motion:reduce){.hs-a,.hs-b,.hs-ring2,.hs-spark{animation:none}}
