/**
 * Skeleton Screen Styles
 * 用于动态加载内容的占位效果
 *
 * 使用方式：在容器元素上添加具体骨架屏类，在子元素上叠加 .skeleton 类。
 * 示例：
 *   <div class="skeleton-product">
 *     <div class="skeleton-product__image skeleton"></div>
 *     <div class="skeleton-product__title skeleton"></div>
 *     <div class="skeleton-product__price skeleton"></div>
 *     <div class="skeleton-product__btn skeleton"></div>
 *   </div>
 */

.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-gray-100) 25%,
        var(--color-gray-200) 50%,
        var(--color-gray-100) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: var(--radius-sm);
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* 产品卡片骨架屏 */
.skeleton-product {
    height: 400px;
    border-radius: var(--radius-xl);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-gray-100);
    padding: var(--spacing-4);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.skeleton-product__image {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
}

.skeleton-product__title {
    height: 20px;
    width: 80%;
}

.skeleton-product__price {
    height: 24px;
    width: 40%;
}

.skeleton-product__btn {
    margin-top: auto;
    height: 40px;
    width: 100%;
    border-radius: var(--radius-md);
}