.ppg-hero{position:relative;width:100%;background:#fff}.ppg-hero__stage{position:relative;width:100%}.ppg-hero__image{display:block;width:100%;height:auto}.ppg-hero__intro{position:relative;z-index:2;width:100%;padding:1.8rem 1rem .7rem;color:var(--ppg-intro-color);font-size:clamp(.72rem,3.3vw,.95rem);font-weight:400;line-height:1.4;text-align:center}.ppg-hero__intro p{margin:0}.ppg-hero__intro strong{font-weight:800}.ppg-hero__intro br{display:none}.ppg-hero__hotspot{position:absolute;left:var(--ppg-x-mobile);top:var(--ppg-y-mobile);z-index:3;display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:2px solid #d4d4d4;border-radius:50%;background:#ffffffb8;color:#c6c6c6;font-family:var(--ff-body);font-size:18px;font-weight:500;line-height:1;letter-spacing:0;text-transform:none;transform:translate(-50%,-50%);cursor:pointer;transition:transform .2s ease,border-color .2s ease,color .2s ease}.ppg-hero__hotspot:hover,.ppg-hero__hotspot:focus-visible,.ppg-hero__hotspot.is-open{z-index:10;color:#111;border-color:#111;outline:none}.ppg-hero__character{position:absolute;left:50%;bottom:calc(100% - 8px);width:var(--ppg-character-size);max-width:none;height:auto;transform:translate(-50%);pointer-events:none}.ppg-hero__character.is-floating{animation:ppg-float 2.8s ease-in-out infinite}.ppg-hero__card{position:absolute;bottom:calc(100% + 10px);left:50%;width:min(290px,calc(100vw - 32px));padding:13px 15px;transform:translate(-50%);border:1px solid #efefef;border-radius:10px;background:#fff;box-shadow:0 8px 22px #0000001f;color:#202020;font-family:var(--ff-body);font-size:14px;font-weight:400;line-height:1.6;letter-spacing:0;text-align:center;text-transform:none;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .32s ease,visibility .32s ease}.ppg-hero__hotspot[data-align=start] .ppg-hero__card{left:0;transform:none}.ppg-hero__hotspot[data-align=end] .ppg-hero__card{right:0;left:auto;transform:none}.ppg-hero__hotspot:focus-visible .ppg-hero__card,.ppg-hero__hotspot.is-open .ppg-hero__card{opacity:1;visibility:visible}.ppg-hero__name{display:block;margin-bottom:5px;font-family:var(--ff-body);font-weight:600}@media(hover:hover)and (pointer:fine){.ppg-hero__hotspot:hover .ppg-hero__card{opacity:1;visibility:visible}}@media(min-width:769px){.ppg-hero__intro{position:absolute;top:var(--ppg-intro-y);left:var(--ppg-intro-x);width:min(var(--ppg-intro-width),34vw);padding:0;font-size:clamp(1rem,1.43vw,1.72rem);line-height:1.35;text-align:left;transform:translateY(-50%)}.ppg-hero__intro br{display:inline}.ppg-hero__hotspot{left:var(--ppg-x);top:var(--ppg-y);width:38px;height:38px;font-size:25px}.ppg-hero__card{top:calc(100% + 12px);bottom:auto}}@media(prefers-reduced-motion:reduce){.ppg-hero__character.is-floating{animation:none}.ppg-hero__card{transition:none}}@keyframes ppg-float{0%,to{transform:translate(-50%)}50%{transform:translate(-50%) translateY(-10px)}}
/*# sourceMappingURL=/cdn/shop/t/1012/assets/section-powerpuff-hero.css.map */
