/**
 * WC Hover Gallery Swap — Frontend Styles
 * Three effects: fade | crossfade | slide-up
 */

/* ── Wrapper ──────────────────────────────────────────────────────── */
.wchg-wrapper {
    position: relative;
    display: block;
    overflow: hidden;
    /* Inherit the block's display so it doesn't break Elementor grid */
    line-height: 0;
}

/* Preserve any link wrapping */
a > .wchg-wrapper,
.wchg-wrapper > a {
    display: block;
}

/* ── Base image styles ────────────────────────────────────────────── */
.wchg-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    /* Do not reset margin/padding so theme styles stay intact */
}

/* ── Hover overlay image ──────────────────────────────────────────── */
.wchg-hover-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    pointer-events: none;
    z-index: 2;

    /* Default: invisible */
    --wchg-speed: 300ms;
}

/* ══════════════════════════════════════════════════════════════════ */
/*  EFFECT: FADE                                                      */
/* ══════════════════════════════════════════════════════════════════ */
.wchg-effect-fade .wchg-hover-img {
    opacity: 0;
    transition: opacity var(--wchg-speed) ease;
}

.wchg-effect-fade.wchg-active .wchg-hover-img {
    opacity: 1;
}

/* ══════════════════════════════════════════════════════════════════ */
/*  EFFECT: CROSSFADE (main image fades out, hover fades in)         */
/* ══════════════════════════════════════════════════════════════════ */
.wchg-effect-crossfade .wchg-hover-img {
    opacity: 0;
    transition: opacity var(--wchg-speed) ease;
}

.wchg-effect-crossfade .wchg-wrapper > img:first-child,
.wchg-effect-crossfade > img:first-of-type {
    transition: opacity var(--wchg-speed) ease;
}

.wchg-effect-crossfade.wchg-active .wchg-hover-img {
    opacity: 1;
}

.wchg-effect-crossfade.wchg-active > img:not(.wchg-hover-img) {
    opacity: 0.15;
}

/* ══════════════════════════════════════════════════════════════════ */
/*  EFFECT: SLIDE-UP                                                  */
/* ══════════════════════════════════════════════════════════════════ */
.wchg-effect-slide-up .wchg-hover-img {
    opacity: 0;
    transform: translateY(8%);
    transition:
        opacity var(--wchg-speed) ease,
        transform var(--wchg-speed) cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.wchg-effect-slide-up.wchg-active .wchg-hover-img {
    opacity: 1;
    transform: translateY(0);
}

/* ══════════════════════════════════════════════════════════════════ */
/*  DOT NAVIGATION                                                    */
/* ══════════════════════════════════════════════════════════════════ */
.wchg-dots {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.wchg-wrapper:hover .wchg-dots,
.wchg-wrapper.wchg-active .wchg-dots {
    opacity: 1;
}

.wchg-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(0, 0, 0, 0.15);
    transition: background 0.2s ease, transform 0.2s ease;
    display: block;
}

.wchg-dot.wchg-dot-active {
    background: #ffffff;
    transform: scale(1.3);
    box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

/* ══════════════════════════════════════════════════════════════════ */
/*  ELEMENTOR PRO COMPATIBILITY                                       */
/*  Elementor wraps thumbs in .woocommerce-product-gallery__image     */
/*  and its loop widget uses .e-loop-item etc.                        */
/* ══════════════════════════════════════════════════════════════════ */

/* Ensure the wrapper doesn't collapse in Elementor flex/grid loops */
.elementor-widget-woocommerce-products .wchg-wrapper,
.elementor-widget-loop-grid .wchg-wrapper,
.e-loop-item .wchg-wrapper {
    width: 100%;
}

/* WooCommerce default .attachment-woocommerce_thumbnail has a display:block already */
.wchg-wrapper img.attachment-woocommerce_thumbnail,
.wchg-wrapper img.wp-post-image {
    position: relative;
    z-index: 1;
}

/* ══════════════════════════════════════════════════════════════════ */
/*  REDUCED MOTION                                                    */
/* ══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .wchg-hover-img,
    .wchg-effect-crossfade > img:not(.wchg-hover-img),
    .wchg-dots {
        transition: none !important;
    }
}