/* ------------------------------------------------------
   Product Card
-------------------------------------------------------*/
.product-block-skeleton {
    white-space: nowrap;
    overflow-x: hidden;
}

.product-container-skeleton {
    overflow: hidden;
    margin: 1rem 5rem 1rem 5rem;
    padding: 1rem;
    width: 30rem;
    height: 40rem;
    box-shadow: 0 0 3rem rgba(0, 0, 0, 0.08);
    border-radius: 5rem;
    display: inline-block;
    text-align: center;
    background-color: lightgray;
    animation: skeleton-loading 1.5s infinite;
}

/* ------------------------------------------------------
   Skeleton Loader For Device (Blue Theme)
-------------------------------------------------------*/
.device-card-skeleton {
    background: var(--color-surface);
    padding: 1rem;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    width: 100%;
    height: 320px;
}

.skeleton {
    background: linear-gradient( 90deg, var(--color-background-light) 25%, var(--color-background) 50%, var(--color-background-light) 75% );
    background-size: 400% 100%;
    border-radius: 8px;
    animation: shine 1.3s linear infinite;
}

.skeleton-title {
    width: 60%;
    height: 20px;
    margin-bottom: 16px;
}

.skeleton-line {
    width: 90%;
    height: 14px;
    margin-bottom: 12px;
}

.skeleton-button {
    width: 40%;
    height: 32px;
    margin-top: 20px;
}

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

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