/* ?? Shimmer Container with Fade */
.cartsync-widget-shimmer-loader {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background-color: #f6f7f8;
    border-radius: 8px;
    opacity: 0;
    transform: translateY(5px);
    animation: shimmerFadeIn 400ms ease forwards;
}

@keyframes shimmerFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.shimmer-block {
    height: 20px;
    width: 100%;
    border-radius: 4px;
    background: linear-gradient( 90deg, #f6f7f8 0%, #edeef1 50%, #f6f7f8 100% );
    background-size: 200% 100%;
    animation: shimmerSlide 1.5s infinite ease-in-out;
}

@keyframes shimmerSlide {
    0% {
        background-position: -100% 0;
    }

    100% {
        background-position: 100% 0;
    }
}

/* snippets */
.cartsync-snippet-fade {
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 300ms ease, transform 300ms ease;
}

.cartsync-snippet-fade.show {
    opacity: 1;
    transform: translateY(0);
}
/* end snippets */