/* Skeleton Loader Styles */
.skeleton-loader {
    pointer-events: none;
    cursor: default;
}

.skeleton-image {
    width: 100%;
    height: 200px;
    background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 12px;
    margin-bottom: 15px;
}

.skeleton-text {
    height: 16px;
    background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 10px;
}

.skeleton-brand {
    width: 40%;
    height: 12px;
}

.skeleton-name {
    width: 80%;
    height: 18px;
}

.skeleton-variant {
    width: 60%;
    height: 14px;
}

.skeleton-button {
    width: 100%;
    height: 44px;
    background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px;
    margin-top: 15px;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

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