/* Melina Dynamic Frame Sync v1.0 */

/* Upper artwork image */
.jdc-artwork-visual
img.jdc-artwork-main-image.melina-synced-frame {
    outline: 7px ridge
        var(--melina-frame-tone, #c7a978) !important;
    outline-offset: 0 !important;

    box-shadow:
        0 0 0 2px rgba(245,218,167,.75),
        0 0 0 9px rgba(63,42,29,.52),
        0 13px 26px rgba(0,0,0,.38) !important;
}

/* Zoom artwork image: frame travels with the artwork */
.melina-zoom-stage
> img.melina-synced-frame {
    outline: 11px ridge
        var(--melina-frame-tone, #c7a978) !important;
    outline-offset: 0 !important;

    box-shadow:
        0 0 0 2px rgba(245,218,167,.75),
        0 0 0 13px rgba(63,42,29,.65),
        0 18px 36px rgba(0,0,0,.48) !important;
}

/* Only upper artwork and zoom are affected */
@media (max-width: 600px) {
    .jdc-artwork-visual
    img.jdc-artwork-main-image.melina-synced-frame {
        outline-width: 4px !important;
        box-shadow:
            0 0 0 1px rgba(245,218,167,.75),
            0 0 0 5px rgba(63,42,29,.52),
            0 8px 16px rgba(0,0,0,.30) !important;
    }
}