/* One presentation surface across catalog, PDP, related products and bag. */
:root{--product-photo-background:#e8dff8}
.product-image,.related-card>div,.pdp .product-stage,.pdp .product-stage.catalog-stage,.pdp .packaging-art,#shopping-bag .bag-item>img{background:var(--product-photo-background)!important}
.pdp .product-stage.catalog-stage:before,.pdp .product-stage.catalog-stage:after{display:none}
.pdp .product-stage.catalog-stage img{filter:none}
.product-image{aspect-ratio:1;height:auto;overflow:hidden}
.product-image img{max-height:100%;object-fit:contain;filter:none}
.related-card>div:has(img[src*=vial-uniform]),.related-card>div:has(img[src*=rotulo-original]){aspect-ratio:1;height:auto}
.related-card img[src*=vial-uniform],.related-card img[src*=rotulo-original]{width:100%;height:100%;object-fit:contain}
#shopping-bag .bag-item>img[src*=vial-uniform],#shopping-bag .bag-item>img[src*=rotulo-original]{padding:0;height:88px}

.product-image img[src*=uniform],.related-card img[src*=uniform]{width:100%;height:100%;object-fit:contain}
.related-card>div:has(img[src*=uniform]){aspect-ratio:1;height:auto}
#shopping-bag .bag-item>img[src*=uniform]{padding:0;height:88px}
.pdp .packaging-art img[src*=uniform]{width:100%;height:100%;max-height:none;object-fit:contain}

.ui-arrow{display:inline-block;width:16px;height:16px;flex-shrink:0;vertical-align:-2px}
/* The three-product campaign needs room at small screen widths. */
@media(max-width:760px){.campaign-image{height:clamp(240px,72vw,280px)}}

.campaign-video{pointer-events:none}.campaign-video[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.campaign-video{display:none}}


/* Full-width hero, complete 16:9 media, purple blending into the image. */
.campaign{--hero-height:clamp(520px,34vw,660px);--media-width:min(100%,calc(var(--hero-height)*16/9));width:100%;max-width:none;aspect-ratio:auto;height:var(--hero-height);min-height:0;max-height:none;background:#170e24}
.campaign>.campaign-image{position:absolute;inset:0 0 0 auto;width:var(--media-width);max-width:none;height:100%;object-fit:contain;object-position:right center;z-index:-2}
.campaign-shade{background:linear-gradient(90deg,#170e24 0%,#170e24 calc(100% - var(--media-width)),#170e24e0 calc(100% - var(--media-width) + 100px),#170e2480 calc(100% - var(--media-width) + 270px),#170e241a calc(100% - var(--media-width) + 450px),transparent calc(100% - var(--media-width) + 600px));z-index:-1}
.campaign-video{opacity:1;transition:none}
.campaign.motion-active>img.campaign-image{visibility:hidden}
@media(max-width:1050px) and (min-width:761px){.campaign-shade{background:linear-gradient(90deg,#170e24f5 0%,#170e24df 28%,#170e2480 55%,transparent 85%)}}
@media(prefers-reduced-motion:reduce){.campaign-video{transition:none}.campaign.motion-active .campaign-video{display:block}}

@media(max-width:760px){.campaign{--mobile-media-height:calc(100vw*9/16);height:auto;min-height:0;max-height:none;display:block}.campaign-content{padding-bottom:calc(var(--mobile-media-height) + 36px)}.campaign>.campaign-image{inset:auto 0 0;width:100%;height:var(--mobile-media-height);object-fit:contain;object-position:center}.campaign-shade{background:linear-gradient(to bottom,#170e24 0%,#170e24 calc(100% - var(--mobile-media-height)),#170e24b3 calc(100% - var(--mobile-media-height) + 24px),transparent calc(100% - var(--mobile-media-height) + 90px))}}