/**
 * 搜索和详情页图片修复样式
 * 修复详情页大图不显示的问题
 */

/* 强制设置详情页大图容器样式 */
.tool-image-container-new {
    position: absolute !important;
    width: 100% !important;
    max-width: 620px !important;
    height: 340px !important;
    overflow: hidden !important;
    background-color: transparent !important;
    left: auto !important;
    right: 0 !important;
    top: 0 !important;
    z-index: 5 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    border-radius: 12px !important;
}

/* 强制设置详情页大图样式 - 移除过渡效果 */
.tool-image-new {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important; /* 默认为可见 */
    z-index: 6 !important;
    transition: none !important; /* 禁用所有过渡效果 */
    animation: none !important; /* 禁用所有动画效果 */
}

/* 覆盖默认隐藏和过渡效果 */
.tool-image, 
.tool-image-new {
    opacity: 1 !important; /* 强制显示 */
    transition: none !important; /* 移除过渡效果 */
    animation: none !important; /* 移除动画效果 */
}

/* 修复卡片图片显示问题 */
.tool-card__image {
    position: relative !important;
    width: 100% !important;
    height: 180px !important;
    overflow: hidden !important;
    background-color: transparent !important;
    border-radius: 8px !important;
    display: block !important;
}

.tool-card__image img {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1 !important;
    transition: none !important; /* 禁用过渡效果 */
}

/* 修复精选工具图片容器 */
.featured-tool-image-container {
    position: relative !important;
    width: 100% !important;
    height: 180px !important;
    overflow: hidden !important;
    background-color: transparent !important;
    border-radius: 8px !important;
    display: block !important;
}

.featured-tool-image-container img {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1 !important;
    transition: none !important; /* 禁用过渡效果 */
}

/* 强制显示所有图片 */
img[data-src] {
    visibility: visible !important;
    opacity: 1 !important;
    transition: none !important; /* 禁用过渡效果 */
}

/* 针对无图片元素的默认样式 */
.tool-image-container-new.empty::after,
.tool-image-new.empty::after,
.tool-card__image.empty::after,
.featured-tool-image-container.empty::after {
    display: none;
}

/* 强制删除加载状态 */
.loading {
    position: relative !important;
}

.loading::before {
    opacity: 0 !important;
    display: none !important;
}

/* 防止图片闪烁 */
img {
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    transform: translateZ(0) !important;
}