/* KUUSTE ADD TO CART POPUP */

#productToast {
    position: fixed !important;
    right: 30px !important;
    bottom: 30px !important;

    width: 370px !important;
    max-width: calc(100vw - 40px) !important;

    padding: 18px !important;

    display: flex !important;
    align-items: center !important;
    gap: 15px !important;

    background: #111 !important;
    color: #fff !important;

    border: 1px solid #333 !important;

    box-shadow:
        0 25px 70px rgba(0,0,0,.35) !important;

    z-index: 99999999 !important;

    overflow: hidden !important;

    opacity: 0 !important;

    transform:
        translateY(30px)
        scale(.96) !important;

    transition:
        opacity .3s ease,
        transform .3s ease !important;
}


/* VISIBLE */

#productToast.show {
    opacity: 1 !important;

    transform:
        translateY(0)
        scale(1) !important;
}


/* CHECK */

#productToast .toast-check {
    width: 44px !important;
    height: 44px !important;

    flex: 0 0 44px !important;

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

    border-radius: 50% !important;

    background: #fff !important;
    color: #111 !important;

    font-size: 17px !important;
    font-weight: 900 !important;
}


/* INFO */

#productToast .toast-info {
    flex: 1 !important;
    min-width: 0 !important;
}


#productToast .toast-info span {
    display: block !important;

    margin-bottom: 4px !important;

    color: #777 !important;

    font-size: 8px !important;
    font-weight: 800 !important;

    letter-spacing: 1.7px !important;
}


#productToast .toast-info strong {
    display: block !important;

    color: #fff !important;

    font-family: "Manrope", sans-serif !important;

    font-size: 15px !important;
    font-weight: 700 !important;
}


#productToast .toast-info p {
    margin: 4px 0 0 !important;

    color: #999 !important;

    font-size: 10px !important;
}


/* TIMER */

#productToast .toast-progress {
    position: absolute !important;

    left: 0 !important;
    bottom: 0 !important;

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

    background: #fff !important;

    transform-origin: left !important;

    animation:
        kuusteToastTimer 2.6s linear forwards !important;
}


@keyframes kuusteToastTimer {

    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}


/* MOBILE */

@media (max-width: 600px) {

    #productToast {
        right: 15px !important;
        bottom: 15px !important;

        width: calc(100vw - 30px) !important;
    }

}