/* Supplied campaign artwork is displayed intact, including its embedded copy. */
.hero.hero-artwork{background:#fff;height:auto;border-radius:0}
.hero-artwork .hero-viewport{height:auto;aspect-ratio:3/1;background:#fff}
.hero-artwork .hero-track{height:100%}
.hero-artwork .hero-slide{background:#fff;height:100%}
.hero-artwork .hero-slide:after{display:none}
.hero-artwork .campaign-artwork{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0;background:#fff}
.campaign-picture{display:block;width:100%;height:100%}
.hero-artwork .campaign-artwork img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;filter:none;transform:none}
.hero-artwork .hero-slide:nth-child(2) .campaign-artwork{overflow:hidden}
.hero-artwork .hero-slide:nth-child(2) .campaign-desktop{transform:scale(1.04)}
/* The supplied skincare artwork has a dark last pixel row; hide that edge. */
.hero-artwork .hero-slide:nth-child(3) .campaign-desktop{object-fit:cover;object-position:right center;clip-path:inset(0 0 1px)}
.hero-artwork .campaign-artwork:focus-visible{outline:3px solid #007bb5;outline-offset:-5px}
.hero-accessible-title{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.hero.hero-artwork .hero-controls{bottom:16px;gap:10px}
.hero.hero-artwork .hero-controls .hero-dots,.hero.hero-artwork .hero-pause{background:#ffffffdf;border-color:#ffffffd9;box-shadow:0 2px 12px #142e4614;color:#174e6a}
.hero-artwork .indicator-track{background:#b5d1de}
.hero-artwork .indicator-fill{background:#008fc9}
@media(max-width:760px){
 .hero-artwork .hero-viewport{aspect-ratio:992/1586;height:auto}
 .hero-artwork .hero-slide:nth-child(n) .campaign-desktop{object-fit:contain;object-position:center;transform:none;clip-path:none}
 .hero.hero-artwork .hero-viewport .hero-controls{bottom:10px;gap:8px}
 /* Keep the skincare artwork's lower CTA clear of carousel controls. */
 .hero.hero-artwork:has(.hero-slide:nth-child(3)[aria-hidden="false"]) .hero-viewport .hero-controls{top:12px;bottom:auto}
 .hero.hero-artwork .hero-controls .hero-dots{height:32px;padding:0 7px;gap:2px;background:#ffffffce;box-shadow:none}
 .hero.hero-artwork .hero-dots button{width:22px;height:32px}
 .hero.hero-artwork .hero-dots button.active{width:38px}
 .hero.hero-artwork .hero-pause{width:32px;height:32px;padding:8px;background:#ffffffce;box-shadow:none}
 .hero.hero-artwork .hero-pause svg{width:16px;height:16px}
}