/* 图片优化相关CSS */

/* 防止图片加载时的布局偏移 */
.product-image {
    position: relative;
    overflow: hidden;
    background-color: #f5f5f5;
    aspect-ratio: 1/1;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-image:hover img {
    transform: scale(1.05);
}

/* 无图片时的占位符样式 */
.no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    color: #999;
    font-size: 14px;
    text-align: center;
    padding: 20px;
}

/* 图片预加载动画 */
.product-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: shimmer 2s infinite;
    pointer-events: none;
    opacity: 0;
}

.product-image.loading::before {
    opacity: 1;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* 响应式图片容器 */
.img-container {
    position: relative;
    overflow: hidden;
}

/* 确保图片不会超出容器 */
img {
    max-width: 100%;
    height: auto;
}

/* 关键图片优先加载 */
.header-logo img {
    max-height: 60px;
    width: auto;
}

/* 延迟加载的图片容器 */
.lazy-image-container {
    position: relative;
    overflow: hidden;
}

/* 优化移动设备上的图片显示 */
@media (max-width: 768px) {
    .product-image {
        aspect-ratio: 3/4;
    }
}