/* =========================================================
   METALIZAR PRODUCT SHOWCASE
   v1.5.0
   ========================================================= */

.mps-showcase {
    --mps-duration: 680ms;
    --mps-ease: cubic-bezier(.22, 1, .36, 1);

    --mps-text: #f5f5f5;
    --mps-border: rgba(255,255,255,.15);

    position: relative;
    display: block;

    width: 100%;

    overflow: hidden;

    color: var(--mps-text);
}


/* =========================================================
   STAGE
   ========================================================= */

.mps-stage {
    position: relative;

    display: grid;

    grid-template-columns:
        52px
        minmax(0, 1fr)
        52px;

    align-items: center;

    gap: 8px;

    width: min(100%, 1320px);

    margin-inline: auto;

    min-width: 0;
}


/* =========================================================
   VISUAL WRAPPER
   ========================================================= */

.mps-visual-wrap {
    position: relative;

    min-width: 0;

    overflow: visible;

    touch-action: pan-y;

    cursor: grab;

    user-select: none;
    -webkit-user-select: none;
}


.mps-visual-wrap.is-dragging {
    cursor: grabbing;
}


/* =========================================================
   TRACK
   ========================================================= */

.mps-visual-track {
    position: relative;

    min-height:
        clamp(
            400px,
            40vw,
            570px
        );
}


/* =========================================================
   DEFAULT / HIDDEN PRODUCT
   ========================================================= */

.mps-visual-slide {
    position: absolute;

    inset: 0;

    display: grid;

    place-items: center;

    opacity: 0;

    transform:
        translate3d(0, 0, 0)
        scale(.55);

    pointer-events: none;

    z-index: 0;

    transition:
        transform
            var(--mps-duration)
            var(--mps-ease),

        opacity
            500ms
            ease;

    will-change:
        transform,
        opacity;
}


/* =========================================================
   OUTER LEFT
   ========================================================= */

.mps-visual-slide.is-prev-2 {
    opacity: 1;

    transform:
        translate3d(-36%, 8px, 0)
        scale(.58);

    pointer-events: none;

    z-index: 1;
}


/* =========================================================
   INNER LEFT
   ========================================================= */

.mps-visual-slide.is-prev {
    opacity: 1;

    transform:
        translate3d(-19%, 4px, 0)
        scale(.78);

    pointer-events: none;

    z-index: 3;
}


/* =========================================================
   ACTIVE
   ========================================================= */

.mps-visual-slide.is-active {
    opacity: 1;

    transform:
        translate3d(0, -4px, 0)
        scale(1);

    pointer-events: auto;

    z-index: 5;
}


/* =========================================================
   INNER RIGHT
   ========================================================= */

.mps-visual-slide.is-next {
    opacity: 1;

    transform:
        translate3d(19%, 4px, 0)
        scale(.78);

    pointer-events: none;

    z-index: 3;
}


/* =========================================================
   OUTER RIGHT
   ========================================================= */

.mps-visual-slide.is-next-2 {
    opacity: 1;

    transform:
        translate3d(36%, 8px, 0)
        scale(.58);

    pointer-events: none;

    z-index: 1;
}


/* =========================================================
   IMAGE FRAME
   ========================================================= */

.mps-image-link {
    position: relative;

    display: flex !important;

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

    width:
        min(90%, 500px);

    height:
        540px;

    max-height:
        calc(100% - 10px);

    margin:
        0 auto !important;

    padding:
        0 !important;

    text-decoration:
        none !important;

    overflow:
        visible;

    user-select:
        none;

    -webkit-user-select:
        none;
}


/*
 * Само active link може да прихваща мишката.
 */

.mps-visual-slide:not(.is-active)
.mps-image-link {
    pointer-events: none;
}


.mps-visual-slide.is-active
.mps-image-link {
    pointer-events: auto;

    cursor: pointer;
}


/* =========================================================
   PRODUCT IMAGE
   ========================================================= */

.mps-product-image {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit:
        contain !important;

    object-position:
        center center !important;

    transform:
        none !important;

    transform-origin:
        center center !important;

    /*
     * По принцип винаги е напълно плътна.
     *
     * Само .is-switching временно я fade-ва.
     */
    opacity: 1;

    user-select:
        none !important;

    -webkit-user-select:
        none !important;

    -webkit-user-drag:
        none !important;

    transition:
        opacity 450ms ease,
        filter 450ms ease !important;

    will-change:
        opacity,
        filter;
}


/* =========================================================
   FRONT / BACK FADE
   ========================================================= */

.mps-product-image.is-switching {
    opacity: 0 !important;
}


/*
 * Никакъв zoom при hover.
 */

.mps-image-link:hover
.mps-product-image {
    transform:
        none !important;
}


/* =========================================================
   DEPTH EFFECT
   WITHOUT TRANSPARENCY
   ========================================================= */


/* ACTIVE */

.mps-visual-slide.is-active
.mps-product-image {
    filter:
        brightness(1)
        saturate(1)
        drop-shadow(
            0 24px 38px
            rgba(0,0,0,.24)
        );
}


/* INNER LEFT + RIGHT */

.mps-visual-slide.is-prev
.mps-product-image,

.mps-visual-slide.is-next
.mps-product-image {
    filter:
        brightness(.75)
        saturate(.92)
        drop-shadow(
            0 18px 28px
            rgba(0,0,0,.18)
        );
}


/* OUTER LEFT + RIGHT */

.mps-visual-slide.is-prev-2
.mps-product-image,

.mps-visual-slide.is-next-2
.mps-product-image {
    filter:
        brightness(.48)
        saturate(.82)
        drop-shadow(
            0 12px 22px
            rgba(0,0,0,.14)
        );
}


/* =========================================================
   PRICE TAG
   NAVY / SILVER CLOTHING LABEL
   ========================================================= */

.mps-price-sticker {
    position: absolute;

    left: 50%;
    bottom: 25px;

    z-index: 15;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    min-width: 160px;

    padding:
        12px 28px
        13px 22px;

    box-sizing: border-box;


    /*
     * NAVY BACKGROUND
     *
     * Много фин highlight само в самия материал.
     * Няма външен glow.
     */
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.045) 0%,
            rgba(255,255,255,.018) 30%,
            rgba(255,255,255,0) 56%
        ),
        linear-gradient(
            180deg,
            #1b2b45 0%,
            #15253d 48%,
            #101d31 100%
        );


    /*
     * ЕДНАКЪВ BORDER НАВСЯКЪДЕ
     */
    border:
        1px solid
        rgba(184,191,201,.42);

    border-radius:
        2px;


    /*
     * ВЪНШНА СЯНКА
     *
     * Това е сянката, която пада
     * върху тениската.
     */
    box-shadow:
        0 11px 20px rgba(0,0,0,.30),
        0 4px 7px rgba(0,0,0,.20),

        /*
         * INNER SHADOW / DEPTH
         */
        inset 0 1px 0 rgba(255,255,255,.075),
        inset 0 -1px 0 rgba(0,0,0,.35),
        inset 4px 0 10px rgba(255,255,255,.018),
        inset -5px 0 12px rgba(0,0,0,.08),
        inset 0 -12px 20px rgba(0,0,0,.12);


    color:
        #d7dade;

    font-family:
        "Oswald",
        "Arial Narrow",
        Arial,
        sans-serif;

    line-height: 1;

    text-align: left;

    white-space: nowrap;

    opacity: 0;
    visibility: hidden;

    transform:
        translate3d(-50%, 10px, 0)
        rotate(-1.2deg)
        scale(.96);

    transform-origin:
        center center;

    pointer-events: none;

    transition:
        opacity 280ms ease,
        transform 360ms var(--mps-ease),
        visibility 280ms ease;

    will-change:
        opacity,
        transform;
}


/* =========================================================
   PRICE LABEL
   ========================================================= */

.mps-price-sticker::before {
    content: "ЦЕНА";

    display: block;

    margin-bottom: 6px;

    color:
        rgba(208,213,220,.78);

    font-family:
        "Oswald",
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size:
        9px;

    font-weight:
        500;

    line-height:
        1;

    letter-spacing:
        2.6px;

    text-transform:
        uppercase;

    text-shadow:
        0 1px 1px
        rgba(0,0,0,.45);
}


/* =========================================================
   PRICE TAG HOLE
   ========================================================= */

.mps-price-sticker::after {
    content: "";

    position: absolute;

    top: 11px;
    right: 12px;

    width: 8px;
    height: 8px;

    border-radius:
        50%;

    background:
        #0b1320;

    /*
     * Дупката също е inset,
     * без glow.
     */
    box-shadow:
        inset 0 1px 3px rgba(0,0,0,.85),
        0 0 0 1px rgba(184,191,201,.40);
}


/* =========================================================
   ACTIVE PRICE TAG
   ========================================================= */

.mps-visual-slide.is-active
.mps-price-sticker {
    opacity: 1;
    visibility: visible;

    transform:
        translate3d(-50%, 0, 0)
        rotate(-1.2deg)
        scale(1);
}


/* =========================================================
   PRICE TYPOGRAPHY
   ========================================================= */

.mps-price-sticker
.price {
    display: flex;

    align-items: baseline;

    justify-content:
        flex-start;

    gap:
        7px;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #d9dde2 !important;

    line-height:
        1 !important;
}


.mps-price-sticker
.woocommerce-Price-amount {
    color:
        #d9dde2 !important;

    font-family:
        "Oswald",
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size:
        28px;

    font-weight:
        500;

    line-height:
        1 !important;

    letter-spacing:
        .4px;

    /*
     * Съвсем лек depth върху буквите.
     * Не е glow.
     */
    text-shadow:
        0 1px 0 rgba(255,255,255,.10),
        0 2px 2px rgba(0,0,0,.35);
}


.mps-price-sticker
.woocommerce-Price-currencySymbol {
    color:
        rgba(217,221,226,.86);

    font-size:
        .78em;
}


/* =========================================================
   SALE PRICE
   ========================================================= */

.mps-price-sticker
del {
    margin-right:
        5px;

    color:
        rgba(172,178,186,.68) !important;

    font-size:
        .63em;

    font-weight:
        400;

    opacity:
        1 !important;

    text-decoration-thickness:
        1px;
}


.mps-price-sticker
del
.woocommerce-Price-amount {
    color:
        rgba(172,178,186,.68) !important;

    font-size:
        inherit;
}


.mps-price-sticker
del
.woocommerce-Price-currencySymbol {
    color:
        rgba(172,178,186,.68) !important;
}


.mps-price-sticker
ins {
    color:
        #eef1f4 !important;

    font-weight:
        500;

    text-decoration:
        none !important;

    background:
        transparent !important;
}


.mps-price-sticker
ins
.woocommerce-Price-amount {
    color:
        #eef1f4 !important;
}


/* =========================================================
   ARROWS
   ========================================================= */

.mps-arrow {
    position: relative;

    z-index: 20;

    display: inline-grid;

    place-items: center;

    width: 48px;
    height: 48px;

    padding: 0;

    border:
        1px solid
        var(--mps-border);

    border-radius:
        999px;

    background:
        rgba(0,0,0,.14);

    color:
        var(--mps-text);

    cursor:
        pointer;

    transition:
        background 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}


.mps-arrow span {
    display: block;

    font-size:
        34px;

    line-height:
        1;

    transform:
        translateY(-1px);
}


.mps-arrow:hover,
.mps-arrow:focus-visible {
    background:
        rgba(255,255,255,.09);

    border-color:
        rgba(255,255,255,.32);

    transform:
        scale(1.04);
}


/* =========================================================
   DOTS
   ========================================================= */

.mps-dots {
    display: flex;

    justify-content:
        center;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        7px;

    min-height:
        10px;

    margin-top:
        5px;
}


.mps-dot {
    width:
        24px;

    height:
        4px;

    padding:
        0;

    border:
        0;

    border-radius:
        999px;

    background:
        rgba(255,255,255,.25);

    cursor:
        pointer;

    transition:
        width 260ms var(--mps-ease),
        background 260ms ease;
}


.mps-dot.is-active {
    width:
        48px;

    background:
        rgba(255,255,255,.96);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .mps-stage {
        grid-template-columns:
            44px
            minmax(0, 1fr)
            44px;

        width:
            100%;
    }


    .mps-visual-track {
        min-height:
            min(96vw, 500px);
    }


    .mps-image-link {
        width:
            min(86%, 450px);

        height:
            min(90vw, 470px);
    }


    .mps-visual-slide.is-prev-2 {
        opacity: 1;

        transform:
            translate3d(-47%, 7px, 0)
            scale(.50);

        z-index: 1;
    }


    .mps-visual-slide.is-prev {
        opacity: 1;

        transform:
            translate3d(-25%, 4px, 0)
            scale(.72);

        z-index: 3;
    }


    .mps-visual-slide.is-active {
        opacity: 1;

        transform:
            translate3d(0, -3px, 0)
            scale(1);

        z-index: 5;
    }


    .mps-visual-slide.is-next {
        opacity: 1;

        transform:
            translate3d(25%, 4px, 0)
            scale(.72);

        z-index: 3;
    }


    .mps-visual-slide.is-next-2 {
        opacity: 1;

        transform:
            translate3d(47%, 7px, 0)
            scale(.50);

        z-index: 1;
    }


    /* PRICE TAG */

    .mps-price-sticker {
        bottom:
            21px;

        min-width:
            145px;

        padding:
            10px 25px
            12px 20px;
    }


    .mps-price-sticker::before {
        margin-bottom:
            5px;

        font-size:
            8px;

        letter-spacing:
            2.2px;
    }


    .mps-price-sticker
    .woocommerce-Price-amount {
        font-size:
            24px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 520px) {

    /*
     * Държим целия carousel вътре
     * в ширината на телефона.
     */
    .mps-showcase {
        width: 100%;
        max-width: 100%;

        overflow: hidden;
    }


    .mps-stage {
        grid-template-columns:
            34px
            minmax(0, 1fr)
            34px;

        width: 100%;
        max-width: 100%;

        gap: 0;

        padding:
            0
            4px;

        box-sizing: border-box;
    }


    .mps-arrow {
        width: 34px;
        height: 34px;
    }


    .mps-arrow span {
        font-size: 27px;
    }


    /*
     * Самата зона за продуктите.
     */
    .mps-visual-wrap {
        width: 100%;
        max-width: 100%;

        min-width: 0;

        overflow: visible;
    }


    .mps-visual-track {
        width: 100%;
        max-width: 100%;

        min-height:
            90vw;
    }


    /*
     * Главната тениска е една идея
     * по-тясна, за да остане място
     * за страничните.
     */
    .mps-image-link {
        width:
            76%;

        max-width:
            300px;

        height:
            84vw;

        max-height:
            410px;
    }


    /* =====================================================
       OUTER LEFT
       ===================================================== */

    .mps-visual-slide.is-prev-2 {
        opacity: 1;

        transform:
            translate3d(-42%, 6px, 0)
            scale(.40);

        z-index: 1;
    }


    /* =====================================================
       INNER LEFT
       ===================================================== */

    .mps-visual-slide.is-prev {
        opacity: 1;

        transform:
            translate3d(-23%, 3px, 0)
            scale(.62);

        z-index: 3;
    }


    /* =====================================================
       ACTIVE
       ===================================================== */

    .mps-visual-slide.is-active {
        opacity: 1;

        transform:
            translate3d(0, -2px, 0)
            scale(1);

        z-index: 5;
    }


    /* =====================================================
       INNER RIGHT
       ===================================================== */

    .mps-visual-slide.is-next {
        opacity: 1;

        transform:
            translate3d(23%, 3px, 0)
            scale(.62);

        z-index: 3;
    }


    /* =====================================================
       OUTER RIGHT
       ===================================================== */

    .mps-visual-slide.is-next-2 {
        opacity: 1;

        transform:
            translate3d(42%, 6px, 0)
            scale(.40);

        z-index: 1;
    }


    /* =====================================================
       DEPTH — INNER
       ===================================================== */

    .mps-visual-slide.is-prev
    .mps-product-image,

    .mps-visual-slide.is-next
    .mps-product-image {
        filter:
            brightness(.74)
            saturate(.90)
            drop-shadow(
                0 14px 22px
                rgba(0,0,0,.17)
            );
    }


    /* =====================================================
       DEPTH — OUTER
       ===================================================== */

    .mps-visual-slide.is-prev-2
    .mps-product-image,

    .mps-visual-slide.is-next-2
    .mps-product-image {
        filter:
            brightness(.46)
            saturate(.80)
            drop-shadow(
                0 10px 18px
                rgba(0,0,0,.13)
            );
    }


    /* =====================================================
       PRICE TAG
       ===================================================== */

    .mps-price-sticker {
        bottom:
            12px;

        min-width:
            122px;

        padding:
            8px
            20px
            9px
            16px;

        border:
            1px solid
            rgba(184,191,201,.42);

        border-radius:
            2px;

        transform:
            translate3d(-50%, 8px, 0)
            rotate(-1.2deg)
            scale(.96);

        box-shadow:
            0 8px 15px rgba(0,0,0,.27),
            0 3px 5px rgba(0,0,0,.17),

            inset 0 1px 0 rgba(255,255,255,.065),
            inset 0 -1px 0 rgba(0,0,0,.32),
            inset 3px 0 8px rgba(255,255,255,.015),
            inset 0 -9px 15px rgba(0,0,0,.11);
    }


    .mps-visual-slide.is-active
    .mps-price-sticker {
        transform:
            translate3d(-50%, 0, 0)
            rotate(-1.2deg)
            scale(1);
    }


    .mps-price-sticker::before {
        margin-bottom:
            4px;

        font-size:
            7px;

        letter-spacing:
            1.8px;
    }


    .mps-price-sticker::after {
        top:
            8px;

        right:
            9px;

        width:
            6px;

        height:
            6px;
    }


    .mps-price-sticker
    .woocommerce-Price-amount {
        font-size:
            20px;

        letter-spacing:
            .3px;
    }


    .mps-price-sticker
    .price {
        gap:
            5px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .mps-showcase *,
    .mps-showcase *::before,
    .mps-showcase *::after {

        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;
    }
}

/* =========================================================
   MOBILE — ONLY ACTIVE IMAGE MAY FADE / FLIP
   ========================================================= */

@media (max-width: 520px) {

    /*
     * Самите slides могат само да се местят.
     * НЕ fade-ваме целия carousel.
     */
    .mps-visual-slide {
        transition:
            transform
            var(--mps-duration)
            var(--mps-ease) !important;
    }


    /*
     * SIDE PRODUCTS:
     *
     * никакъв fade
     * никакъв filter transition
     * никаква image animation
     */
    .mps-visual-slide:not(.is-active)
    .mps-product-image {
        transition: none !important;

        opacity: 1 !important;
    }


    /*
     * ACTIVE:
     *
     * само централната тениска
     * има front/back fade.
     */
    .mps-visual-slide.is-active
    .mps-product-image {
        transition:
            opacity 450ms ease !important;
    }


    /*
     * Fade-out при реалния
     * front/back switch.
     *
     * Само ако е ACTIVE.
     */
    .mps-visual-slide.is-active
    .mps-product-image.is-switching {
        opacity: 0 !important;
    }


    /*
     * Ако по някаква причина side product
     * остане с is-switching от предишен state,
     * НЕ му позволяваме да fade-не.
     */
    .mps-visual-slide:not(.is-active)
    .mps-product-image.is-switching {
        opacity: 1 !important;
    }
}