/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 01 2026 | 02:30:24 */
/* ==========================================
   MB PRODUCT MOBILE — PERMANENT HOVER STATE
   CSS Class: mb-product-mobile
   ========================================== */


/* ==========================================
   MAIN CONTAINER
   ========================================== */

.mb-product-mobile {

    /* OVERLAY CONTROLS */
    --mb-overlay-color: #6b6b6b;
    --mb-overlay-opacity: 0.85;

    /* IMAGE ZOOM */
    --mb-image-zoom: 1.06;

    position: relative;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;

    align-items: center;
    justify-items: center;

    padding: 0 !important;
    gap: 0 !important;

    overflow: hidden;
    isolation: isolate;
}


/* ==========================================
   IMAGE — DETERMINES CARD HEIGHT
   ========================================== */

.mb-product-mobile > .elementor-widget-image {

    grid-area: 1 / 1;

    position: relative;

    width: 100%;
    height: auto;

    margin: 0 !important;

    z-index: 0;
    overflow: hidden;
}

.mb-product-mobile > .elementor-widget-image
.elementor-widget-container {

    width: 100%;
    height: 100%;
}

.mb-product-mobile > .elementor-widget-image img {

    display: block;

    width: 100%;
    height: auto;

    object-fit: cover;

    transform: scale(var(--mb-image-zoom));

    transition: none !important;
}


/* ==========================================
   GREY MULTIPLY OVERLAY — ALWAYS VISIBLE
   ========================================== */

.mb-product-mobile::before {

    content: "";

    position: absolute;
    inset: 0;

    background: var(--mb-overlay-color);

    mix-blend-mode: multiply;

    opacity: var(--mb-overlay-opacity);

    z-index: 1;
    pointer-events: none;

    transition: none !important;
}


/* ==========================================
   CONTENT — ALWAYS VISIBLE
   Class: mb-product-content
   ========================================== */

.mb-product-mobile > .mb-product-content {

    position: absolute !important;

    top: 50%;
    left: 50%;

    width: max-content;
    max-width: 90%;

    margin: 0 !important;

    z-index: 2;

    opacity: 1;

    transform: translate(-50%, -50%);

    pointer-events: auto;

    transition: none !important;
}


/* ==========================================
   CONTENT ALIGNMENT
   ========================================== */

.mb-product-mobile .mb-product-content {

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;
}


/* ==========================================
   HIDE DEFAULT PRODUCT TITLE
   ========================================== */

.mb-product-mobile > .mb-product-title {
    display: none !important;
}


/* ==========================================
   DISABLE HOVER ANIMATIONS
   ========================================== */

.mb-product-mobile:hover
> .elementor-widget-image img,

.mb-product-mobile:focus-within
> .elementor-widget-image img {

    transform: scale(var(--mb-image-zoom));
}

.mb-product-mobile:hover::before,
.mb-product-mobile:focus-within::before {

    opacity: var(--mb-overlay-opacity);
}

.mb-product-mobile:hover
> .mb-product-content,

.mb-product-mobile:focus-within
> .mb-product-content {

    opacity: 1;
    transform: translate(-50%, -50%);
}


/* ==========================================
   MB PRODUCT STACK — MOBILE ONLY
   HEADER-AWARE / 1REM LAYERED STACKING
   ========================================== */

@media (max-width: 767px) {

    /* ======================================
       STACK CONTROLS
       ====================================== */

    body {

        /* SPACE ABOVE CARDS */
        --mb-card-gap: 30px;

        /* VISIBLE HEADER HEIGHT */
        --mb-header-height: 64px;

        /* AMOUNT OF PREVIOUS CARD SHOWING */
        --mb-card-step: 1rem;

        /* DEFAULT — HEADER HIDDEN */
        --mb-card-header-offset: 0px;
    }


    /* ======================================
       HEADER VISIBLE
       ====================================== */

    body.mb-show-scroll-header {

        --mb-card-header-offset:
            var(--mb-header-height);
    }


    /* ======================================
       STICKY CARD BASE
       ====================================== */

    .mb-product-mobile.mb-product-stack {

        position: sticky !important;

        top: calc(
            var(--mb-card-gap) +
            var(--mb-card-header-offset) +
            var(--mb-card-level, 0) *
            var(--mb-card-step)
        ) !important;

        z-index: var(--mb-card-z, 1);

        transition:
            top 0.35s
            cubic-bezier(0.22, 1, 0.36, 1);
    }


    /* ======================================
       CARD STACKING ORDER
       ====================================== */

    .mb-product-mobile.mb-product-stack:nth-child(2) {
        --mb-card-level: 0;
        --mb-card-z: 1;
    }

    .mb-product-mobile.mb-product-stack:nth-child(3) {
        --mb-card-level: 1;
        --mb-card-z: 2;
    }

    .mb-product-mobile.mb-product-stack:nth-child(4) {
        --mb-card-level: 2;
        --mb-card-z: 3;
    }

    .mb-product-mobile.mb-product-stack:nth-child(5) {
        --mb-card-level: 3;
        --mb-card-z: 4;
    }

    .mb-product-mobile.mb-product-stack:nth-child(6) {
        --mb-card-level: 4;
        --mb-card-z: 5;
    }

    .mb-product-mobile.mb-product-stack:nth-child(7) {
        --mb-card-level: 5;
        --mb-card-z: 6;
    }

    .mb-product-mobile.mb-product-stack:nth-child(8) {
        --mb-card-level: 6;
        --mb-card-z: 7;
    }

    .mb-product-mobile.mb-product-stack:nth-child(9) {
        --mb-card-level: 7;
        --mb-card-z: 8;
    }

    .mb-product-mobile.mb-product-stack:nth-child(10) {
        --mb-card-level: 8;
        --mb-card-z: 9;
    }

    .mb-product-mobile.mb-product-stack:nth-child(11) {
        --mb-card-level: 9;
        --mb-card-z: 10;
    }

    .mb-product-mobile.mb-product-stack:nth-child(12) {
        --mb-card-level: 10;
        --mb-card-z: 11;
    }

    .mb-product-mobile.mb-product-stack:nth-child(13) {
        --mb-card-level: 11;
        --mb-card-z: 12;
    }

}


/* ==========================================
   MB PRODUCT STACK — SCROLL DARKENING
   MOBILE ONLY
   ========================================== */

@media (max-width: 767px) {

    .mb-product-mobile.mb-product-stack {

        --mb-stack-darkness: 0;
    }


    /* ======================================
       ADDITIONAL DARKENING OVERLAY
       ====================================== */

    .mb-product-mobile.mb-product-stack::after {

        content: "";

        position: absolute;
        inset: 0;

        background: #000;

        opacity: var(--mb-stack-darkness);

        z-index: 4;
        pointer-events: none;

        transition: opacity 0.08s linear;
    }

}