/**
 * 图片懒加载样式
 */

/* 懒加载占位效果 */
img[data-src],
img[data-lazy] {
    background: #f5f5f5;
    min-height: 100px;
}

/* 加载中状态 */
img.lazyloading {
    background: #f5f5f5 url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDQiIGhlaWdodD0iNDQiIHZpZXdCb3g9IjAgMCA0NCA0NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiNjY2MiPgogICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2Utd2lkdGg9IjIiPgogICAgICAgIDxjaXJjbGUgY3g9IjIyIiBjeT0iMjIiIHI9IjEiPgogICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiBiZWdpbj0iMHMiIGR1cj0iMS44cyIgdmFsdWVzPSIxOyAyMCIgY2FsY01vZGU9InNwbGluZSIga2V5VGltZXM9IjA7IDEiIGtleVNwbGluZXM9IjAuMTY1LCAwLjg0LCAwLjQ0LCAxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ic3Ryb2tlLW9wYWNpdHkiIGJlZ2luPSIwcyIgZHVyPSIxLjhzIiB2YWx1ZXM9IjE7IDAiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOyAxIiBrZXlTcGxpbmVzPSIwLjMsIDAuNjEsIDAuMzU1LCAxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICAgICAgICA8L2NpcmNsZT4KICAgICAgICA8Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSIxIj4KICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49Ii0wLjlzIiBkdXI9IjEuOHMiIHZhbHVlcz0iMTsgMjAiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOyAxIiBrZXlTcGxpbmVzPSIwLjE2NSwgMC44NCwgMC40NCwgMSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1vcGFjaXR5IiBiZWdpbj0iLTAuOXMiIGR1cj0iMS44cyIgdmFsdWVzPSIxOyAwIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIga2V5U3BsaW5lcz0iMC4zLCAwLjYxLCAwLjM1NSwgMSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgPC9jaXJjbGU+CiAgICA8L2c+Cjwvc3ZnPg==') no-repeat center center;
    background-size: 44px 44px;
    opacity: 0.6;
}

/* 已加载状态 */
img.lazyloaded {
    opacity: 0;
    animation: fadeIn 0.3s ease-in forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 加载错误状态 */
img.lazyerror {
    background: #f5f5f5 url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSIzMiIgY3k9IjMyIiByPSIzMCIgZmlsbD0iI2Y1ZjVmNSIgc3Ryb2tlPSIjZGRkIiBzdHJva2Utd2lkdGg9IjIiLz4KICA8cGF0aCBkPSJNMzIgMTZjLTguODM3IDAtMTYgNy4xNjMtMTYgMTZzNy4xNjMgMTYgMTYgMTYgMTYtNy4xNjMgMTYtMTYtNy4xNjMtMTYtMTYtMTZ6bTAgMjhjLTYuNjI3IDAtMTItNS4zNzMtMTItMTJzNS4zNzMtMTIgMTItMTIgMTIgNS4zNzMgMTIgMTItNS4zNzMgMTItMTIgMTJ6IiBmaWxsPSIjOTk5Ii8+CiAgPHBhdGggZD0iTTMyIDI0Yy0xLjEwNSAwLTIgLjg5NS0yIDJ2OGMwIDEuMTA1Ljg5NSAyIDIgMnMyLS44OTUgMi0ydi04YzAtMS4xMDUtLjg5NS0yLTItMnptMCAxNGMtMS4xMDUgMC0yIC44OTUtMiAyczAuODk1IDIgMiAyIDItLjg5NSAyLTItLjg5NS0yLTItMnoiIGZpbGw9IiM5OTkiLz4KPC9zdmc+') no-repeat center center;
    background-size: 64px 64px;
    opacity: 0.5;
}

/* 缩略图列表优化 */
.goods-list img[data-src],
.goods-list img[data-lazy],
.thumb img[data-src],
.thumb img[data-lazy] {
    min-height: 100px;
    object-fit: cover;
}

/* 详情页主图 */
#midimg[data-src],
#midimg[data-lazy] {
    min-height: 480px;
}

/* 响应式图片 */
@media (max-width: 768px) {
    img[data-src],
    img[data-lazy] {
        min-height: 50px;
    }
}