.hero-slider{isolation:isolate;touch-action:pan-y}.hero-frame{position:absolute;inset:0;pointer-events:none}.hero-frame>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 46%}.hero-slider::after{display:none}.hero-shade{position:absolute;z-index:4;inset:0;background:linear-gradient(180deg,#0003,transparent 22%,transparent 80%,#0002);pointer-events:none}.hero-controls{position:absolute;z-index:5;bottom:26px;right:var(--pad);display:flex;align-items:center;gap:23px;color:white}.hero-dots{display:flex;gap:17px}.hero-dots button{display:flex;align-items:center;gap:8px;min-height:44px;padding:0;font-size:12px;color:#fffb}.hero-dots button[aria-pressed=true]{color:white}.hero-dots i{width:18px;height:2px;background:#ffffff70;transition:width .4s,background-color .4s}.hero-dots button[aria-pressed=true] i{width:42px;background:white}.hero-play{height:40px;width:40px;border:1px solid #ffffff80;border-radius:50%;display:grid;place-items:center;background:#15313b18;backdrop-filter:blur(8px);font-size:15px;color:white}.hero-controls button:active{transform:scale(.95)}.hero-chevron{position:absolute;z-index:5;top:50%;transform:translateY(-50%);width:64px;height:80px;padding:18px;border:0;border-radius:0;background:transparent;color:white;display:grid;place-items:center;opacity:.85;transition:opacity .18s;cursor:pointer;filter:drop-shadow(0 1px 5px #0005)}.hero-chevron svg{width:24px;height:40px;transition:transform .18s}.hero-chevron-prev{left:calc(var(--pad) - 18px)}.hero-chevron-next{right:calc(var(--pad) - 18px)}.hero-chevron:hover{opacity:1}.hero-chevron:disabled{opacity:.35;cursor:default}.hero-chevron:focus-visible{outline:2px solid white;outline-offset:1px}.hero-slider:focus-visible{outline:3px solid var(--aqua);outline-offset:-3px}.hero-info [data-hero-name]{max-width:48ch;line-height:1.4}.hero-info [data-hero-volume]{white-space:nowrap}.hero-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.hero-slider[aria-busy=true] .hero-frame{will-change:transform,filter,opacity}
@media(max-width:1000px){.hero-info{gap:18px}.hero-info>span{padding-left:18px}.hero-info [data-hero-name]{font-size:13px;max-width:38ch}.hero-info strong{font-size:25px}}
@media(max-width:600px){.hero-frame>img{object-position:58% center}.hero-frame:has(img[src*=hero-serum])>img,.hero-frame:has(img[src*=hero-shampoo])>img{object-position:72% center}.hero-controls{right:22px;left:22px;bottom:19px;justify-content:flex-end;gap:15px}.hero-dots{margin-right:auto;gap:12px}.hero-dots button[aria-pressed=true] i{width:26px}.hero-dots i{width:12px}.hero-play{width:36px;height:36px}.hero-chevron{width:44px;height:64px;padding:13px;opacity:.9}.hero-chevron svg{width:18px;height:32px}.hero-chevron-prev{left:6px}.hero-chevron-next{right:6px}.hero-info [data-hero-name]{font-size:12px;max-width:27ch;flex:1}.hero-info strong{font-size:25px}}
@media(prefers-reduced-motion:reduce){.hero-dots i,.hero-chevron,.hero-chevron svg{transition:none}}

.hero-chevron:active{transform:translateY(-50%)}.hero-chevron:hover svg,.hero-chevron:active svg{transform:none}.hero-dots i{position:relative;overflow:hidden;width:42px;flex-shrink:0;background:#ffffff50;transition:none}.hero-dots i b{position:absolute;inset:0;background:white;transform:scaleX(0);transform-origin:left}.hero-dots button[aria-pressed=true] i{background:#ffffff50}.hero-dots button[aria-pressed=true] i b{transform:scaleX(var(--hero-progress,0))}.hero-play{width:44px;height:44px;padding:6px;border:0;background:transparent;backdrop-filter:none}.hero-play img{display:block;width:32px;height:32px;filter:invert(1)}
@media(max-width:600px){.hero-dots i,.hero-dots button[aria-pressed=true] i{width:26px}.hero-play{width:44px;height:44px;padding:6px}}