/* 
 * 静态展示样式（修复版）
 * static-display-fixed.css
 * 移除01.html中的鼠标悬停特效，改为静态展示
 * 修复：不影响其他元素的正常悬停效果
 */

/* ========== 1. 图片展示区域 - 移除悬停特效 ========== */

/* 移除图片容器的悬停效果 */
.image-container-single {
    /* 移除所有过渡和变换效果 */
    transition: none !important;
    animation: none !important;
}

/* 移除图片的悬停放大效果 */
.image-container-single img {
    /* 移除悬停变换 */
    transform: none !important;
    transition: none !important;
    
    /* 移除鼠标手型，改为默认指针 */
    cursor: default !important;
}

/* 移除图片悬停时的效果 */
.image-container-single:hover img {
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
}

/* 移除图片点击放大功能 */
.image-container-single a[href^="#image-"] {
    /* 移除链接的交互效果 */
    pointer-events: none;
    cursor: default;
}

/* ========== 2. 移除图片注释文字 ========== */

/* 隐藏图片下方的注释文字 */
.image-container-single + p,
.image-item-single > p.image-caption,
.image-caption {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

/* ========== 3. 按钮改为静态 - 移除悬停特效 ========== */

/* 立即购买按钮 - 移除所有特效 */
.btn-buy {
    /* 移除背景渐变动画 */
    background: #D4AF37 !important;
    background-image: none !important;
    
    /* 移除所有过渡效果 */
    transition: none !important;
    animation: none !important;
    
    /* 移除变换效果 */
    transform: none !important;
    
    /* 移除伪元素特效 */
    overflow: visible !important;
}

/* 移除购买按钮的悬停效果 */
.btn-buy:hover {
    background: #D4AF37 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* 移除购买按钮的伪元素特效 */
.btn-buy:before,
.btn-buy:after {
    display: none !important;
    content: none !important;
}

/* 联系客服按钮 - 移除所有特效 */
.btn-contact {
    /* 移除背景渐变动画 */
    background: rgba(255, 255, 255, 0.1) !important;
    background-image: none !important;
    
    /* 移除所有过渡效果 */
    transition: none !important;
    animation: none !important;
    
    /* 移除变换效果 */
    transform: none !important;
    
    /* 移除伪元素特效 */
    overflow: visible !important;
}

/* 移除联系按钮的悬停效果 */
.btn-contact:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* 移除联系按钮的伪元素特效 */
.btn-contact:before,
.btn-contact:after {
    display: none !important;
    content: none !important;
}

/* ========== 4. 移除所有按钮的通用特效 ========== */

/* 移除action-btn类的所有特效 */
.action-btn {
    /* 移除所有过渡和动画 */
    transition: none !important;
    animation: none !important;
    
    /* 移除变换效果 */
    transform: none !important;
    
    /* 移除伪元素特效 */
    overflow: visible !important;
}

/* 移除action-btn的伪元素 */
.action-btn:before,
.action-btn:after {
    display: none !important;
    content: none !important;
}

/* 移除action-btn的悬停效果 */
.action-btn:hover {
    transform: none !important;
    box-shadow: none !important;
    background: none !important;
}

/* ========== 5. 移除脚本区域的动画效果 ========== */

/* 移除淡入动画 */
.script-description,
.script-images,
.script-actions {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* ========== 6. 其他需要移除的交互效果 ========== */

/* 移除返回顶部按钮的悬停效果 */
.back-to-top:hover {
    transform: none !important;
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4) !important;
}

/* 移除模态框的动画效果 */
.image-overlay-full img {
    animation: none !important;
}

/* ========== 7. 响应式调整 ========== */

@media (max-width: 768px) {
    /* 移动端保持静态 */
    .btn-buy,
    .btn-contact {
        background: #D4AF37 !important;
    }
    
    .btn-contact {
        background: rgba(255, 255, 255, 0.1) !important;
    }
}

@media (max-width: 480px) {
    /* 小屏幕设备 */
    .image-container-single img {
        max-width: 100% !important;
    }
}

/* ========== 8. 打印样式优化 ========== */

@media print {
    /* 打印时移除所有交互元素 */
    .btn-buy,
    .btn-contact {
        display: none !important;
    }
    
    .image-container-single {
        break-inside: avoid;
    }
}

/* ========== 9. 重要声明 ========== */
/* 
 * 此样式表仅影响以下元素：
 * 1. .image-container-single 及其子元素
 * 2. .btn-buy 和 .btn-contact 按钮
 * 3. .action-btn 类按钮
 * 4. 图片注释文字 (.image-caption)
 * 
 * 不影响：
 * 1. 导航栏悬停效果
 * 2. 页脚链接悬停效果
 * 3. 其他页面元素的正常交互
 * 4. 网站整体样式和布局
 */