.mpsc-root {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.mpsc-card {
    --mpsc-shape-x: 0px;
    --mpsc-shape-y: 0px;
    --mpsc-shape-hover-scale: 1;
    --mpsc-image-x: 0px;
    --mpsc-image-y: 0px;
    --mpsc-image-rotate: 0deg;
    --mpsc-image-hover-x: 0px;
    --mpsc-image-hover-y: -5px;
    --mpsc-image-hover-scale: 1.04;
    --mpsc-image-hover-rotate: 0deg;
    --mpsc-card-hover-y: 0px;

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    color: inherit;
    text-decoration: none;
    transform: translate3d(0, 0, 0);
    transition-property: transform, box-shadow, background-color, border-color;
    transition-timing-function: cubic-bezier(.2, .75, .25, 1);
    box-sizing: border-box;
    isolation: isolate;
}

.mpsc-card:hover,
.mpsc-card:focus-visible {
    transform: translate3d(0, var(--mpsc-card-hover-y), 0);
    text-decoration: none;
}

.mpsc-card:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

.mpsc-visual {
    position: relative;
    width: 100%;
    min-width: 0;
    display: grid;
    place-items: center;
    overflow: visible;
    isolation: isolate;
}

.mpsc-shape {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    pointer-events: none;
    transform: translate3d(calc(-50% + var(--mpsc-shape-x)), calc(-50% + var(--mpsc-shape-y)), 0) scale(1);
    transition-property: transform, background, background-color, border-color, box-shadow, opacity;
    transition-timing-function: cubic-bezier(.2, .75, .25, 1);
    background-color: #f1f1f1;
    box-sizing: border-box;
}

.mpsc-shape-circle .mpsc-shape {
    border-radius: 50%;
}

.mpsc-shape-rounded .mpsc-shape {
    border-radius: 28px;
}

.mpsc-shape-rectangle .mpsc-shape {
    border-radius: 0;
}

.mpsc-card:hover .mpsc-shape,
.mpsc-card:focus-visible .mpsc-shape {
    transform: translate3d(calc(-50% + var(--mpsc-shape-x)), calc(-50% + var(--mpsc-shape-y)), 0) scale(var(--mpsc-shape-hover-scale));
}

.mpsc-image {
    position: relative;
    z-index: 1;
    display: block;
    height: auto;
    max-width: none;
    object-position: center;
    transform-origin: center;
    transform: translate3d(var(--mpsc-image-x), var(--mpsc-image-y), 0) rotate(var(--mpsc-image-rotate)) scale(1);
    transition-property: transform, filter, opacity;
    transition-timing-function: cubic-bezier(.2, .75, .25, 1);
    will-change: transform;
}

.mpsc-card:hover .mpsc-image,
.mpsc-card:focus-visible .mpsc-image {
    transform: translate3d(
        calc(var(--mpsc-image-x) + var(--mpsc-image-hover-x)),
        calc(var(--mpsc-image-y) + var(--mpsc-image-hover-y)),
        0
    ) rotate(calc(var(--mpsc-image-rotate) + var(--mpsc-image-hover-rotate))) scale(var(--mpsc-image-hover-scale));
}

.mpsc-title {
    position: relative;
    z-index: 2;
    display: block;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    padding: 0;
    color: #191919;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 700;
    text-transform: uppercase;
    transition: color .25s ease;
    box-sizing: border-box;
}

.mew-rtl .mpsc-card {
    direction: rtl;
}

@media (prefers-reduced-motion: reduce) {
    .mpsc-card,
    .mpsc-shape,
    .mpsc-image,
    .mpsc-title {
        transition-duration: .001ms !important;
    }
}

/* WooCommerce/filter compatibility -------------------------------------------------
 * The widget intentionally exposes standard `.product`, `post-*`,
 * `product_cat-*`, `product_tag-*`, and attribute classes so client-side and
 * AJAX product filters can identify each card. Neutralize legacy WooCommerce
 * float/column rules without removing those useful classes.
 */
.elementor-widget-moemen_product_shape_card.product,
.mpsc-root.product {
    float: none;
    clear: none;
    width: 100%;
    min-width: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
}

.mpsc-root[hidden],
.mpsc-root.is-filtered-out,
.elementor-widget-moemen_product_shape_card[hidden],
.elementor-widget-moemen_product_shape_card.is-filtered-out {
    display: none !important;
}