/* 防止FOUC（Flash of Unstyled Content）CSS
 * 在JavaScript修复脚本加载和执行前隐藏产品卡片
 * 避免用户看到硬编码的占位符内容
 */

/* 1. 初始状态：隐藏所有产品卡片 */
.shop-col {
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    transition: none !important;
}

/* 2. 修复脚本加载后的状态 */
.shop-col.fix-applied,
.shop-col[data-product-id] {
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
}

/* 3. 隐藏的卡片保持隐藏 */
.shop-col.hidden-card,
.shop-col[aria-hidden="true"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* 4. 平滑显示动画 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.shop-col.fade-in {
    animation: fadeInUp 0.5s ease forwards;
}

/* 5. 防止布局抖动 */
.product-grid {
    min-height: 300px; /* 为产品区域保留最小高度 */
    position: relative;
}

/* 6. 加载指示器（可选） */
.product-grid::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: none;
}

.product-grid.loading::before {
    display: block;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 7. 响应式调整 */
@media (max-width: 768px) {
    .shop-col {
        transition: opacity 0.2s ease !important;
    }
}

/* 8. 打印时显示所有内容 */
@media print {
    .shop-col {
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }
    
    .shop-col.hidden-card,
    .shop-col[aria-hidden="true"] {
        display: none !important;
    }
}