.shop-the-look__content {
    display: flex;
    flex-direction: column
}

.shop-the-look__content:not(.shop-the-look--mobile) {
    flex-direction: row;
    align-items: center;
    gap: 30px
}

.shop-the-look__content:not(.shop-the-look--mobile) .shop-the-look__image-container {
    width: calc((100% - 30px) * .666)
}

.shop-the-look__content:not(.shop-the-look--mobile) .shop-the-look__product-card-container {
    width: calc((100% - 30px) * .333)
}

.shop-the-look__content:not(.shop-the-look--mobile) .shop-the-look__modal-close,
.shop-the-look__content:not(.shop-the-look--mobile) .shop-the-look__open-modal-btn-container {
    display: none
}

.shop-the-look__image-container .shop-the-look__slide-inner {
    position: relative;
    transform: translateX(-10px);
    transition: transform .3s linear
}

.shop-the-look__image-container .swiper-slide-active .shop-the-look__slide-inner {
    transform: translateX(0)
}

.shop-the-look__image-container .swiper-pagination-arrows {
    transition: all .3s ease
}

.shop-the-look__placeholder-image svg,
.shop-the-look__placeholder-product-card .grid-view-item-image svg {
    box-sizing: border-box
}

.shop-the-look__hotspot {
    position: absolute;
    width: 44px;
    height: 44px;
    top: calc(var(--hotspot-vertical-position) - 22px);
    left: calc(var(--hotspot-horizontal-position) - 22px);
    background-color: transparent;
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.shop-the-look__hotspot[aria-current=true] .shop-the-look__hotspot-icon {
    transform: scale(1.8)
}

.shop-the-look__hotspot:focus-visible .shop-the-look__hotspot-icon {
    transform: scale(1.8)
}

@media screen and (pointer:fine) {
    .shop-the-look__hotspot:hover .shop-the-look__hotspot-icon {
        transform: scale(1.8)
    }
}

.XXshop-the-look__hotspot-icon {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: 0 1px 10px rgba(0, 0, 0, .25);
    position: relative;
    background-color: var(--hotspot-color);
    transition: transform .4s ease-in-out
}

.XXshop-the-look__hotspot-icon:after {
    position: absolute;
    content: "";
    width: inherit;
    height: inherit;
    left: 0;
    top: 0;
    border-radius: 50%;
    animation: 2s hotspotPulse ease-in-out infinite;
    opacity: .4
}

.shop-the-look--mobile .shop-the-look__product-card-container {
    visibility: hidden;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    max-height: calc(100vh - 20px);
    overflow: auto;
    padding: 40px;
    background-color: var(--color-scheme-background-color);
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .1);
    transform: translateY(100%);
    transition: all .4s ease-in-out
}

.shop-the-look--mobile.shop-the-look--modal-open .shop-the-look__image-container .swiper-pagination-arrows,
.shop-the-look--mobile.shop-the-look--modal-open .shop-the-look__open-modal-btn-container {
    visibility: hidden;
    opacity: 0
}

.shop-the-look--mobile.shop-the-look--modal-open .shop-the-look__product-card-container {
    visibility: visible;
    transform: translateY(0);
    z-index: 1001
}

.shop-the-look--mobile:not(.shop-the-look--modal-open) .shop-the-look__hotspot:not(:focus-visible) .shop-the-look__hotspot-icon {
    transform: none
}

body:has(.sticked):has(.shop-the-look--modal-open) .sticked {
    opacity: 0;
    visibility: hidden
}

.shop-the-look__open-modal-btn-container {
    display: flex;
    justify-content: center;
    margin-top: 15px;
    transition: all .3s ease
}

.shop-the-look__open-modal-btn-container .btn {
    width: 100%
}

.shop-the-look__modal-close {
    position: absolute;
    top: 0;
    right: 0
}

.shop-the-look__product-card-swiper[aria-current=false] {
    display: none
}

.shop-the-look__product-card-swiper.shop-the-look__fade-in {
    opacity: 0;
    transform: translateY(10px);
    animation: shopTheLookFadeIn .5s ease .1s forwards
}

.shop-the-look__product-card-swiper.shop-the-look__fade-out {
    opacity: 1;
    animation: shopTheLookFadeOut .3s ease forwards
}

.shop-the-look__product-card-swiper .swiper-wrapper {
    align-items: flex-end
}

.shop-the-look__product-card-swiper .swiper-wrapper.has-scrollbar {
    padding-bottom: 30px
}

.shop-the-look__product-card-swiper .swiper-scrollbar {
    height: 2px;
    background-color: var(--color-scheme-text-color-transparent10);
    cursor: pointer
}

.shop-the-look__product-card-swiper .swiper-scrollbar-drag {
    background-color: var(--color-scheme-text-color-transparent40)
}

.shop-the-look__product-card-swiper .swiper-slide-active .card-color-swatch--inner {
    pointer-events: auto !important
}

.shop-the-look__onboarding-product-prompt {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center
}

@keyframes hotspotPulse {
    0% {
        transform: scale(.95);
        box-shadow: 0 0 0 0 var(--hotspot-color);
        opacity: .7
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px var(--hotspot-color);
        opacity: 0
    }

    100% {
        transform: scale(.95);
        box-shadow: 0 0 0 0 var(--hotspot-color);
        opacity: 0
    }
}

@keyframes shopTheLookFadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes shopTheLookFadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}