.grid-item {
    position: relative;
}

.grid-loading {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;

    transform: translateY(-12px);
    /*  ← اسپینر کمی بالاتر */
}


.spinner {
    width: 28px;
    height: 28px;
    border: 3px solid #ddd;
    border-top: 3px solid #333;
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

/* 
.cat-item {
    position: relative;
}

.cat-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cat-loading .spinner {
    width: 18px;
    height: 18px;
    border: 3px solid #ddd;
    border-top: 3px solid #333;
    border-radius: 50%;
    animation: spin .8s linear infinite;
} */