.prk-loop-image {
    width: 100%;
    --prk-loop-image-hover-scale: 1.12;
    --prk-loop-image-hover-shift: 16px;
    --prk-loop-image-hover-rotate: 4deg;
    --prk-loop-image-hover-blur: 2px;
}

.prk-loop-image__holder {
    width: 100%;
    box-sizing: border-box;
}

.prk-loop-image__media {
    position: relative;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.prk-loop-image__link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
    transition-property: all;
    transition-timing-function: ease;
}

.prk-loop-image__img {
    display: block;
    width: 100%;
    height: 100%;
    transition-property: transform, filter, opacity;
    transition-timing-function: ease;
    backface-visibility: hidden;
    will-change: transform, filter, opacity;
}

.prk-loop-image__img--primary {
    position: relative;
    z-index: 1;
}

.prk-loop-image__img--hover {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
}

/* self hover swap */
.prk-loop-image[data-hover-swap-enabled="yes"][data-hover-swap-scope="self"]:hover .prk-loop-image__img--hover,
.prk-loop-image[data-hover-swap-enabled="yes"][data-hover-swap-scope="both"]:hover .prk-loop-image__img--hover {
    opacity: 1;
}

.prk-loop-image[data-hover-swap-enabled="yes"][data-hover-swap-scope="self"]:hover .prk-loop-image__img--primary,
.prk-loop-image[data-hover-swap-enabled="yes"][data-hover-swap-scope="both"]:hover .prk-loop-image__img--primary {
    opacity: 0;
}

/* parent hover swap */
:is(.prk-loop-item-template:hover, .prk-loop-carousel__slide:hover, [data-loop-object-id]:hover, [data-object-id]:hover, .elementor.product:hover, .product:hover) .prk-loop-image[data-hover-swap-enabled="yes"][data-hover-swap-scope="parent"] .prk-loop-image__img--hover,
:is(.prk-loop-item-template:hover, .prk-loop-carousel__slide:hover, [data-loop-object-id]:hover, [data-object-id]:hover, .elementor.product:hover, .product:hover) .prk-loop-image[data-hover-swap-enabled="yes"][data-hover-swap-scope="both"] .prk-loop-image__img--hover {
    opacity: 1;
}

:is(.prk-loop-item-template:hover, .prk-loop-carousel__slide:hover, [data-loop-object-id]:hover, [data-object-id]:hover, .elementor.product:hover, .product:hover) .prk-loop-image[data-hover-swap-enabled="yes"][data-hover-swap-scope="parent"] .prk-loop-image__img--primary,
:is(.prk-loop-item-template:hover, .prk-loop-carousel__slide:hover, [data-loop-object-id]:hover, [data-object-id]:hover, .elementor.product:hover, .product:hover) .prk-loop-image[data-hover-swap-enabled="yes"][data-hover-swap-scope="both"] .prk-loop-image__img--primary {
    opacity: 0;
}

/* self hover effects */
.prk-loop-image[data-self-effect="zoom-in"]:hover .prk-loop-image__img {
    transform: scale(var(--prk-loop-image-hover-scale));
}

.prk-loop-image[data-self-effect="zoom-out"]:hover .prk-loop-image__img {
    transform: scale(calc(2 - var(--prk-loop-image-hover-scale)));
}

.prk-loop-image[data-self-effect="slide-right"]:hover .prk-loop-image__img {
    transform: translateX(var(--prk-loop-image-hover-shift));
}

.prk-loop-image[data-self-effect="slide-left"]:hover .prk-loop-image__img {
    transform: translateX(calc(var(--prk-loop-image-hover-shift) * -1));
}

.prk-loop-image[data-self-effect="rotate"]:hover .prk-loop-image__img {
    transform: rotate(var(--prk-loop-image-hover-rotate));
}

.prk-loop-image[data-self-effect="zoom-rotate"]:hover .prk-loop-image__img {
    transform: scale(var(--prk-loop-image-hover-scale)) rotate(var(--prk-loop-image-hover-rotate));
}

.prk-loop-image[data-self-effect="blur"]:hover .prk-loop-image__img {
    filter: blur(var(--prk-loop-image-hover-blur));
}

.prk-loop-image[data-self-effect="grayscale"]:hover .prk-loop-image__img {
    filter: grayscale(100%);
}

/* parent hover effects */
:is(.prk-loop-item-template:hover, .prk-loop-carousel__slide:hover, [data-loop-object-id]:hover, [data-object-id]:hover, .elementor.product:hover, .product:hover) .prk-loop-image[data-parent-effect="zoom-in"] .prk-loop-image__img {
    transform: scale(var(--prk-loop-image-hover-scale));
}

:is(.prk-loop-item-template:hover, .prk-loop-carousel__slide:hover, [data-loop-object-id]:hover, [data-object-id]:hover, .elementor.product:hover, .product:hover) .prk-loop-image[data-parent-effect="zoom-out"] .prk-loop-image__img {
    transform: scale(calc(2 - var(--prk-loop-image-hover-scale)));
}

:is(.prk-loop-item-template:hover, .prk-loop-carousel__slide:hover, [data-loop-object-id]:hover, [data-object-id]:hover, .elementor.product:hover, .product:hover) .prk-loop-image[data-parent-effect="slide-right"] .prk-loop-image__img {
    transform: translateX(var(--prk-loop-image-hover-shift));
}

:is(.prk-loop-item-template:hover, .prk-loop-carousel__slide:hover, [data-loop-object-id]:hover, [data-object-id]:hover, .elementor.product:hover, .product:hover) .prk-loop-image[data-parent-effect="slide-left"] .prk-loop-image__img {
    transform: translateX(calc(var(--prk-loop-image-hover-shift) * -1));
}

:is(.prk-loop-item-template:hover, .prk-loop-carousel__slide:hover, [data-loop-object-id]:hover, [data-object-id]:hover, .elementor.product:hover, .product:hover) .prk-loop-image[data-parent-effect="rotate"] .prk-loop-image__img {
    transform: rotate(var(--prk-loop-image-hover-rotate));
}

:is(.prk-loop-item-template:hover, .prk-loop-carousel__slide:hover, [data-loop-object-id]:hover, [data-object-id]:hover, .elementor.product:hover, .product:hover) .prk-loop-image[data-parent-effect="zoom-rotate"] .prk-loop-image__img {
    transform: scale(var(--prk-loop-image-hover-scale)) rotate(var(--prk-loop-image-hover-rotate));
}

:is(.prk-loop-item-template:hover, .prk-loop-carousel__slide:hover, [data-loop-object-id]:hover, [data-object-id]:hover, .elementor.product:hover, .product:hover) .prk-loop-image[data-parent-effect="blur"] .prk-loop-image__img {
    filter: blur(var(--prk-loop-image-hover-blur));
}

:is(.prk-loop-item-template:hover, .prk-loop-carousel__slide:hover, [data-loop-object-id]:hover, [data-object-id]:hover, .elementor.product:hover, .product:hover) .prk-loop-image[data-parent-effect="grayscale"] .prk-loop-image__img {
    filter: grayscale(100%);
}