/* ==========================================================================
   Skeleton loading states — match product card dimensions exactly
   ========================================================================== */

.product-card--skeleton {
    pointer-events: none;
}

.product-card--skeleton .product-card__image-wrapper {
    background: linear-gradient(
        90deg,
        var(--color-vault)          25%,
        var(--color-vault-raised)   50%,
        var(--color-vault)          75%
    );
    background-size: 200% 100%;
    animation: skeleton-pulse 1.4s ease-in-out infinite;
}

.product-card--skeleton .product-card__name,
.product-card--skeleton .product-card__set,
.product-card--skeleton .product-card__price {
    background: linear-gradient(
        90deg,
        var(--color-vault)          25%,
        var(--color-vault-raised)   50%,
        var(--color-vault)          75%
    );
    background-size: 200% 100%;
    animation: skeleton-pulse 1.4s ease-in-out infinite;
    border-radius: var(--radius-sm);
    color: transparent;
    user-select: none;
}

.product-card--skeleton .product-card__name { height: 1.2em; width: 80%; }
.product-card--skeleton .product-card__set  { height: 0.9em; width: 55%; }
.product-card--skeleton .product-card__price { height: 1.4em; width: 45%; }

/* Stagger animation per card */
.product-card--skeleton:nth-child(2) .product-card__image-wrapper,
.product-card--skeleton:nth-child(2) .product-card__name { animation-delay: 0.1s; }
.product-card--skeleton:nth-child(3) .product-card__image-wrapper,
.product-card--skeleton:nth-child(3) .product-card__name { animation-delay: 0.2s; }
.product-card--skeleton:nth-child(4) .product-card__image-wrapper,
.product-card--skeleton:nth-child(4) .product-card__name { animation-delay: 0.3s; }

/* Grid overlay during reload */
.mana-card-grid--loading {
    position: relative;
}

.mana-card-grid--loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(28, 28, 24, 0.4);
    border-radius: var(--radius-base);
    pointer-events: none;
    z-index: var(--z-raised);
}