/* ==========================================
   CFP ART VIEWER
========================================== */

.cfp-art-viewer {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    touch-action: pan-y;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================
   PRODUCT IMAGE
========================================== */

.cfp-art-viewer img {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
}

/* ==========================================
   LENS
========================================== */

.cfp-art-viewer-lens {
    position: absolute;
    width: 220px;
    height: 220px;

    border: 2px solid rgba(255, 255, 255, 0.96);
    border-radius: 50%;

    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0.04);

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.26),
        inset 0 0 0 1px rgba(255, 255, 255, 0.35);

    pointer-events: none;

    opacity: 0;
    transform: scale(0.97);

    transition:
        opacity 140ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;

    will-change:
        left,
        top,
        background-position,
        transform;

    z-index: 20;
}

/* ==========================================
   LENS HIGHLIGHT
========================================== */

.cfp-art-viewer-lens::before {
    content: '';

    position: absolute;
    top: 10%;
    left: 14%;

    width: 34%;
    height: 18%;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.34),
            rgba(255, 255, 255, 0)
        );

    filter: blur(3px);

    opacity: 0.62;
}

/* ==========================================
   ACTIVE LENS
========================================== */

.cfp-art-viewer-lens.is-active {
    opacity: 1;
    transform: scale(1);

    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.30),
        inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767px) {

    .cfp-art-viewer-lens {
        width: 170px;
        height: 170px;

        border-width: 2px;

        box-shadow:
            0 8px 22px rgba(0, 0, 0, 0.24),
            inset 0 0 0 1px rgba(255, 255, 255, 0.30);
    }

}