shop-the-look{display:block}.shop-the-look--m-small{--stl-h-mobile: 340px}.shop-the-look--m-medium{--stl-h-mobile: 460px}.shop-the-look--m-large{--stl-h-mobile: 580px}.shop-the-look--m-full{--stl-h-mobile: calc(100svh - var(--header-group-height, 0px))}@media screen and (min-width:750px){.shop-the-look--d-small{--stl-h: 460px}.shop-the-look--d-medium{--stl-h: 580px}.shop-the-look--d-large{--stl-h: 700px}.shop-the-look--d-full{--stl-h: calc(100svh - var(--header-group-height, 0px))}}.shop-the-look__frame{position:relative;aspect-ratio:var(--frame-ratio-mobile, auto)}@media screen and (max-width:749px){.shop-the-look--m-small .shop-the-look__frame,.shop-the-look--m-medium .shop-the-look__frame,.shop-the-look--m-large .shop-the-look__frame,.shop-the-look--m-full .shop-the-look__frame{aspect-ratio:auto;height:var(--stl-h-mobile)}}@media screen and (min-width:750px){.shop-the-look__frame{aspect-ratio:var(--frame-ratio, auto)}.shop-the-look--d-small .shop-the-look__frame,.shop-the-look--d-medium .shop-the-look__frame,.shop-the-look--d-large .shop-the-look__frame,.shop-the-look--d-full .shop-the-look__frame{aspect-ratio:auto;height:var(--stl-h)}}.shop-the-look__frame .banner-media{position:absolute;top:0;right:0;bottom:0;left:0;height:100%}.shop-the-look__frame .media__img{width:100%;height:100%;object-fit:cover}.shop-the-look__content-wrap{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:flex;padding:clamp(var(--space-6),5vw,var(--space-16));pointer-events:none}.shop-the-look--content-left .shop-the-look__content-wrap{justify-content:flex-start}.shop-the-look--content-center .shop-the-look__content-wrap{justify-content:center}.shop-the-look--content-right .shop-the-look__content-wrap{justify-content:flex-end}.shop-the-look--valign-top .shop-the-look__content-wrap{align-items:flex-start}.shop-the-look--valign-middle .shop-the-look__content-wrap{align-items:center}.shop-the-look--valign-bottom .shop-the-look__content-wrap{align-items:flex-end}.shop-the-look__content{display:flex;flex-direction:column;gap:var(--space-4);max-width:min(520px,100%);pointer-events:auto}.shop-the-look--text-left .shop-the-look__content{align-items:flex-start;text-align:left}.shop-the-look--text-center .shop-the-look__content{align-items:center;text-align:center}.shop-the-look--text-right .shop-the-look__content{align-items:flex-end;text-align:right}.shop-the-look--on-light .shop-the-look__content{color:#fff}.shop-the-look--on-dark .shop-the-look__content{color:#141414}.shop-the-look__subheading{opacity:.85}.shop-the-look__heading{font-size:calc(var(--font-size-h2) * var(--font-heading-scale) * var(--heading-size-scale, 1));line-height:1.15}.shop-the-look__text{max-width:46ch}.shop-the-look__button{margin-top:var(--space-3)}.shop-the-look--on-light .shop-the-look__content .button--secondary{border-color:currentColor;color:currentColor}.shop-the-look__hotspot{position:absolute;left:var(--spot-x-mobile);top:var(--spot-y-mobile);z-index:3}.shop-the-look__hotspot.is-active{z-index:4}@media screen and (min-width:750px){.shop-the-look__hotspot{left:var(--spot-x);top:var(--spot-y)}}.shop-the-look__dot{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:none;border-radius:50%;background-color:#fff;color:#141414;box-shadow:0 6px 18px #14141440;cursor:pointer;transition:background-color var(--duration-base) var(--ease-out-expo),color var(--duration-base) var(--ease-out-expo)}.shop-the-look--dot-dark .shop-the-look__dot{background-color:#141414;color:#fff}.shop-the-look__dot svg{transition:transform var(--duration-base) var(--ease-out-expo)}.shop-the-look__dot:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;border-radius:50%;background-color:inherit;opacity:0;animation:stl-pulse 2.6s cubic-bezier(.22,1,.36,1) infinite}@keyframes stl-pulse{0%{transform:scale(1);opacity:.45}70%,to{transform:scale(1.9);opacity:0}}.shop-the-look__hotspot.is-active .shop-the-look__dot{background-color:#141414;color:#fff}.shop-the-look--dot-dark .shop-the-look__hotspot.is-active .shop-the-look__dot{background-color:#fff;color:#141414}.shop-the-look__hotspot.is-active .shop-the-look__dot:before{animation:none}.shop-the-look__hotspot.is-active .shop-the-look__dot svg{transform:rotate(45deg)}.shop-the-look__card{position:absolute;top:50%;z-index:5;width:min(320px,78vw);padding:var(--space-4);background-color:var(--color-background);color:var(--color-foreground);box-shadow:0 18px 44px -18px #14141459;opacity:0;visibility:hidden;transform:translateY(calc(-50% + var(--card-shift, 0px))) scale(.97);transition:opacity var(--duration-base) var(--ease-out-expo),transform var(--duration-base) var(--ease-out-expo),visibility var(--duration-base) var(--ease-out-expo)}.shop-the-look__card[data-side=right]{left:calc(100% + var(--space-4));transform-origin:left center}.shop-the-look__card[data-side=left]{right:calc(100% + var(--space-4));transform-origin:right center}.shop-the-look__hotspot.is-active .shop-the-look__card{opacity:1;visibility:visible;transform:translateY(calc(-50% + var(--card-shift, 0px))) scale(1)}.shop-the-look__card-close,.shop-the-look__scrim{display:none}@media screen and (max-width:749px){.shop-the-look__card,.shop-the-look__card[data-side=left],.shop-the-look__card[data-side=right]{position:fixed;top:auto;left:var(--space-3);right:var(--space-3);bottom:var(--space-3);z-index:105;width:auto;transform:translateY(16px);transform-origin:center bottom}.shop-the-look__hotspot.is-active .shop-the-look__card{transform:translateY(0)}.shop-the-look__card-close{position:absolute;top:var(--space-2);right:var(--space-2);z-index:1;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:none;border-radius:50%;background-color:transparent;color:var(--color-foreground);cursor:pointer}.shop-the-look__scrim{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:104;background-color:#14141466;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--duration-base) ease,visibility var(--duration-base) ease}.shop-the-look.has-active .shop-the-look__scrim{opacity:1;visibility:visible;pointer-events:auto}}@media(prefers-reduced-motion:reduce){.shop-the-look__dot:before{animation:none}.shop-the-look__card{transition:opacity var(--duration-fast) ease,visibility var(--duration-fast) ease}}
/*# sourceMappingURL=/cdn/shop/t/5/assets/section-shop-the-look.css.map */