/* SVG 暗色主题适配样式 */

/* 基础SVG样式 */
img[src*="no-image.svg"],
img[src*="loading.svg"],
img[src*="no-image-dark.svg"],
img[src*="loading-dark.svg"] {
    transition: opacity 0.3s ease;
}

/* 暗色主题SVG文件默认隐藏 */
img[src*="no-image-dark.svg"],
img[src*="loading-dark.svg"] {
    display: none;
}

/* 暗色模式下显示暗色版本，隐藏浅色版本 */
[data-theme="dark"] img[src*="no-image.svg"] {
    display: none;
}

[data-theme="dark"] img[src*="loading.svg"] {
    display: none;
}

[data-theme="dark"] img[src*="no-image-dark.svg"] {
    display: inline-block;
}

[data-theme="dark"] img[src*="loading-dark.svg"] {
    display: inline-block;
}

/* 媒体查询支持 - 系统偏好暗色模式 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) img[src*="no-image.svg"] {
        display: none;
    }

    :root:not([data-theme="light"]) img[src*="loading.svg"] {
        display: none;
    }

    :root:not([data-theme="light"]) img[src*="no-image-dark.svg"] {
        display: inline-block;
    }

    :root:not([data-theme="light"]) img[src*="loading-dark.svg"] {
        display: inline-block;
    }
}

/* 确保SVG在容器中正确显示 */
.product-image img[src*="no-image.svg"],
.product-image img[src*="loading.svg"],
.product-image img[src*="no-image-dark.svg"],
.product-image img[src*="loading-dark.svg"] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 产品卡片中的SVG样式 */
.product-card img[src*="no-image.svg"],
.product-card img[src*="loading.svg"],
.product-card img[src*="no-image-dark.svg"],
.product-card img[src*="loading-dark.svg"] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 表格中的SVG样式 */
.product-image-cell img[src*="no-image.svg"],
.product-image-cell img[src*="loading.svg"],
.product-image-cell img[src*="no-image-dark.svg"],
.product-image-cell img[src*="loading-dark.svg"] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 响应式加载SVG尺寸控制 */
img[src*="loading.svg"],
img[src*="loading-dark.svg"] {
    max-width: 80px;
    max-height: 80px;
}

/* 在小屏幕上保持合适大小 */
@media (max-width: 768px) {
    img[src*="loading.svg"],
    img[src*="loading-dark.svg"] {
        max-width: 60px;
        max-height: 60px;
    }
}

/* 在产品图片容器中的特殊处理 */
.product-image-container img[src*="loading.svg"],
.product-image-container img[src*="loading-dark.svg"],
.product-image img[src*="loading.svg"],
.product-image img[src*="loading-dark.svg"] {
    max-width: min(80px, 100%);
    max-height: min(80px, 100%);
    width: auto;
    height: auto;
}