﻿
.shimmer-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.shimmer-box {
    width: 100%;
    padding: 8px;
}

.shimmer-product {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shimmer-image {
    width: 100%;
    height: 180px;
    background: linear-gradient(90deg, #f4f4f4 25%, #eaeaea 50%, #f4f4f4 75%);
    background-size: 200% 100%;
    animation: shimmer-animation 1.5s infinite;
    border-radius: 8px;
}

.shimmer-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.shimmer-title {
    width: 70%;
    height: 16px;
    background: linear-gradient(90deg, #f4f4f4 25%, #eaeaea 50%, #f4f4f4 75%);
    background-size: 200% 100%;
    animation: shimmer-animation 1.5s infinite;
    border-radius: 4px;
}

.shimmer-price {
    width: 50%;
    height: 16px;
    background: linear-gradient(90deg, #f4f4f4 25%, #eaeaea 50%, #f4f4f4 75%);
    background-size: 200% 100%;
    animation: shimmer-animation 1.5s infinite;
    border-radius: 4px;
}

@keyframes shimmer-animation {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}
