/**
 * 2025-2026 CyliumDev
 * @license   Proprietary - Non-commercial use only
 *
 * Product hover image widget (cyliumee-hoverimage handle).
 * Split out of front.css so a page only pays for the widgets it renders;
 * depends on 'cyliumee-front' (shared commons) for cascade order.
 */

/*
 * Advanced > Border > Radius is generated by Creative Elements on the widget
 * wrapper's direct `> .elementor-widget-container` child
 * (creativeelements/includes/widgets/common.php:845-855), never on our markup.
 * `.cyliumee-phi` is a square, opaque box that paints over those rounded
 * corners, so the native control looked dead — the merchant then reached for a widget-level radius as a
 * workaround (seen on new-prod document 9040101: both were set to 20px).
 *
 * The clip must sit on the CONTAINER, not on the child: with an Advanced border
 * the corner has to be clipped at the padding box, which is exactly what
 * overflow on the bordered element does. Nothing in this widget is meant to
 * overflow the container, so this is safe when no radius is set.
 */
.elementor-widget-cyliumee-product-hover-image > .elementor-widget-container {
    overflow: hidden;
}

.cyliumee-phi {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.cyliumee-phi__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.cyliumee-phi__image {
    display: block;
    width: 100%;
    height: auto;
}

.cyliumee-phi--ratio .cyliumee-phi__image {
    height: 100%;
}

.cyliumee-phi--fit-cover   .cyliumee-phi__image { object-fit: cover; }

.cyliumee-phi--fit-contain .cyliumee-phi__image { object-fit: contain; }

.cyliumee-phi__image--hover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: opacity var(--cee-phi-duration, 350ms) ease,
                transform var(--cee-phi-duration, 350ms) ease;
    opacity: 0;
    pointer-events: none;
}

.cyliumee-phi--fade .cyliumee-phi__image--hover         { opacity: 0; }

.cyliumee-phi--fade:hover .cyliumee-phi__image--hover   { opacity: 1; }

.cyliumee-phi--slide-left  .cyliumee-phi__image--hover  { opacity: 1; transform: translateX(100%); }

.cyliumee-phi--slide-right .cyliumee-phi__image--hover  { opacity: 1; transform: translateX(-100%); }

.cyliumee-phi--slide-up    .cyliumee-phi__image--hover  { opacity: 1; transform: translateY(100%); }

.cyliumee-phi--slide-down  .cyliumee-phi__image--hover  { opacity: 1; transform: translateY(-100%); }

.cyliumee-phi--slide-left:hover  .cyliumee-phi__image--hover,
.cyliumee-phi--slide-right:hover .cyliumee-phi__image--hover,
.cyliumee-phi--slide-up:hover    .cyliumee-phi__image--hover,
.cyliumee-phi--slide-down:hover  .cyliumee-phi__image--hover { transform: translate(0, 0); }

.cyliumee-phi--zoom .cyliumee-phi__image--hover         { opacity: 0; transform: scale(0.85); }

.cyliumee-phi--zoom:hover .cyliumee-phi__image--hover   { opacity: 1; transform: scale(1); }

.cyliumee-phi--none .cyliumee-phi__image--hover         { transition: none; opacity: 0; }

.cyliumee-phi--none:hover .cyliumee-phi__image--hover   { opacity: 1; }

@media (hover: none) {
    .cyliumee-phi__image--hover { display: none; }
}