/* 调整综合新闻容器内按钮的底部距精汉云离 */
.comprehensive-container .comprehensive-news-container .comprehensive-news-left-inner .comprehensive-news-left-inner-button {
    bottom: 28px; /* 按钮底部距离容器底部28px */
}

/* 表格样式设置 */
table.tftable {
    font-size: 15px; /* 表格字体大小 */
    color: #000; /* 文字颜色为黑色 */
    width: 100%; /* 表格宽度占满容器 */
    border-width: 0px; /* 边框宽度为0（无边框） */
    border-color: #729ea5; /* 边框颜色（虽然宽度为0，但预先定义） */
    border-collapse: collapse; /* 边框合并模式 */
}

/* 表格单元格样式 */
table.tftable td {
    font-size: 15px; /* 单元格字体大小 */
    border-width: 0px; /* 单元格边框宽度为0 */
    padding: 3px; /* 单元格内边距 */
    border-style: solid; /* 边框样式为实线 */
    border-color: #729ea5; /* 单元格边框颜色 */
}

/* 产品卡片中购买按钮的样式 */
.product-card .product-Parameters .buy-now-button {
    margin: 12px 20px 20px; /* 按钮外边距：上12px，左右20px，下20px */
    width: auto!important; /* 宽度自动适应内容，!important提高优先级 */
}

/* "精汉云广告"标签样式 */
.moqi_adv {
    display: inline-block; /* 行内块级元素 */
    padding-left: 3px; /* 左内边距 */
    padding-right: 3px; /* 右内边距 */
    border: 1px solid; /* 边框宽度1px，实线 */
    font-size: 12px !important; /* 字体大小12px，强制生效 */
    font-style: normal; /* 正常字体样式（非斜体） */
    line-height: 16px !important; /* 行高16px，强制生效 */
    border-radius: 2px; /* 边框圆角2px */
    border-color: #0008ff; /* 边框颜色为蓝色 */
    background: #fff; /* 背景色白色 */
    color: #0008ff !important; /* 文字颜色蓝色，强制生效 */
    position: relative; /* 相对定位 */
    float: right; /* 右浮动 */
    margin-top: 5px; /* 上外边距5px */
}

/* "标签"样式 */
.moqi_bq {
    background-color: rgba(252, 241, 235, 1); /* 浅橙色背景 */
    color: rgba(254, 95, 71, 1) !important; /* 橙红色文字，强制生效 */
    margin-right: 2px; /* 右外边距2px */
    min-width: max-content; /* 最小宽度适应内容 */
    padding: 0 8px; /* 左右内边距8px，上下0 */
    height: 24px; /* 高度24px */
    line-height: 24px !important; /* 行高24px（垂直居中），强制生效 */
    font-size: 12px !important; /* 字体大小12px，强制生效 */
    font-weight: bold; /* 粗体 */
    border-radius: 2px; /* 边框圆角2px */
    display: inline-block; /* 行内块级元素 */
    margin-bottom: 8px; /* 下外边距8px */
}

/* 库存信息段落样式 */
p.stock-info {
  display: none; /* 隐藏库存信息 */
}

/* 产品卡片样式 */
.product-card {
    border-radius: 12px; /* 卡片圆角12px */
    overflow: hidden; /* 超出部分隐藏（配合圆角） */
}

/* 产品卡片头部样式 */
.product-card-header {
    border-radius: 12px 12px 0 0; /* 头部圆角：上左右12px，下0 */
}

/* 产品参数区域样式 */
.product-Parameters {
    border-radius: 0 0 12px 12px; /* 参数区域圆角：下左右12px，上0 */
}

/* 调整精汉云标签圆角 */
.moqi_bq {
    border-radius: 6px; /* 增大圆角到6px */
}

/* 调整购买按钮圆角 */
.buy-now-button {
    border-radius: 6px; /* 按钮圆角6px */
}

/* 动画效果 */
.product-card {
    /* 变换过渡效果：变换和阴影在0.3秒内平滑过渡 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 注释掉的产品卡片悬停效果
.product-card:hover {
    transform: translateY(-4px); 向上移动4px
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); 增加阴影
}
*/

/* 购买按钮过渡效果 */
.buy-now-button {
    transition: all 0.3s ease; /* 所有属性在0.3秒内过渡 */
}

/* 购买按钮悬停效果 */
.buy-now-button:hover {
    opacity: 0.9; /* 透明度90% */
}

/* 购买按钮点击效果 */
.buy-now-button:active {
    transform: translateY(1px); /* 点击时向下移动1px */
}

/* 价格过渡效果 */
.price {
    transition: transform 0.3s ease; /* 变换在0.3秒内过渡 */
}

/* 注释掉的价格悬停效果
.product-card:hover .price {
    transform: scale(1.1); 放大1.1倍
}
*/

/* 标题前添加图标 */
.header-title h5::before {
    content: ''; /* 伪元素内容为空 */
    display: inline-block; /* 行内块级 */
    width: 32px; /* 宽度32px */
    height: 32px; /* 高度32px */
    margin-right: 8px; /* 右外边距8px */
    vertical-align: middle; /* 垂直居中对齐 */
    background-image: url("/themes/web/www/upload/local68fc826a55b4c.png"); /* 背景图片 */
    background-size: contain; /* 背景图适应元素 */
    background-repeat: no-repeat; /* 不重复 */
    background-position: center; /* 居中显示 */
}

/* 新增UI优化 */
.product-card {
    border: 1px solid #f0f0f0; /* 浅灰色边框 */
    /* 过渡效果：变换、阴影、边框颜色在0.3秒内过渡 */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* 产品卡片悬停时的边框效果 */
.product-card:hover {
    border-color: #d0d0d0; /* 边框颜色变深 */
}

/* 金额文字样式 */
.amount {
    font-weight: 700; /* 粗体（700等同于bold） */
}

/* 精汉云标签过渡效果 */
.moqi_bq {
    transition: opacity 0.3s ease, transform 0.2s ease; /* 透明度和变换过渡 */
}

/* 精汉云标签悬停效果 */
.moqi_bq:hover {
    opacity: 0.8; /* 透明度80% */
    transform: translateY(-1px); /* 向上移动1px */
}

/* 精汉云广告标签过渡效果 */
.moqi_adv {
    transition: all 0.3s ease; /* 所有属性过渡 */
}

/* 精汉云广告标签悬停效果 */
.moqi_adv:hover {
    background: #0008ff; /* 背景色变为蓝色 */
    color: #fff !important; /* 文字颜色变为白色 */
}

/* 标题前图标过渡效果 */
.header-title h5::before {
    transition: transform 0.3s ease; /* 变换过渡 */
}

/* 产品卡片悬停时标题图标的效果 */
.product-card:hover .header-title h5::before {
    transform: rotate(5deg); /* 旋转5度 */
}

/* 购买按钮悬停效果增强 */
.buy-now-button:hover {
    opacity: 0.9; /* 透明度90% */
    transform: translateY(-1px); /* 向上移动1px */
}

/* 产品描述文字过渡效果 */
.product-description {
    transition: color 0.3s ease; /* 颜色过渡 */
}

/* 产品卡片悬停时描述文字颜色变化 */
.product-card:hover .product-description {
    color: #333; /* 文字颜色变为深灰色 */
}

/* 新增特殊效果 - 低饱和度 */

/* 卡片加载动画 */
@keyframes cardFadeIn { /* 定义名为cardFadeIn的动画 */
    from { /* 动画开始状态 */
        opacity: 0; /* 完全透明 */
        transform: translateY(20px); /* 向下移动20px */
    }
    to { /* 动画结束状态 */
        opacity: 1; /* 完全不透明 */
        transform: translateY(0); /* 回到原位 */
    }
}

/* 应用卡片加载动画 */
.product-card {
    animation: cardFadeIn 0.6s ease-out; /* 使用cardFadeIn动画，0.6秒完成，缓出效果 */
}

/* 价格闪烁动画 */
@keyframes priceGlow { /* 定义名为priceGlow的动画 */
    0%, 100% { /* 开始和结束状态 */
        text-shadow: none; /* 无文字阴影 */
    }
    50% { /* 中间状态 */
        text-shadow: 0 0 8px rgba(231, 76, 60, 0.3); /* 红色阴影 */
    }
}

/* 产品卡片悬停时价格应用动画 */
.product-card:hover .amount {
    animation: priceGlow 2s ease-in-out infinite; /* 使用priceGlow动画，2秒一次，无限循环 */
}

/* 按钮高光划过效果 */
.buy-now-button {
    position: relative; /* 相对定位（为伪元素提供定位参考） */
    overflow: hidden; /* 超出部分隐藏 */
}

/* 按钮高光效果的伪元素 */
.buy-now-button::before {
    content: ''; /* 内容为空 */
    position: absolute; /* 绝对定位 */
    top: 0; /* 顶部对齐 */
    left: -100%; /* 初始位置在左侧外部 */
    width: 100%; /* 宽度100% */
    height: 100%; /* 高度100% */
    /* 渐变背景：透明->白色半透明->透明 */
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.8s ease; /* left属性过渡效果 */
}

/* 按钮悬停时高光划过 */
.buy-now-button:hover::before {
    left: 100%; /* 移动到右侧外部（产生划过效果） */
}

/* 标签组顺序动画 */
/* 第一个标签延迟0.1秒过渡 */
.product-card:hover .moqi_bq:nth-child(1) {
    transition-delay: 0.1s;
}

/* 第二个标签延迟0.2秒过渡 */
.product-card:hover .moqi_bq:nth-child(2) {
    transition-delay: 0.2s;
}

/* 第三个标签延迟0.3秒过渡 */
.product-card:hover .moqi_bq:nth-child(3) {
    transition-delay: 0.3s;
}

/* 产品卡片内容缩放效果（注释掉） */
.product-card:hover .product-card-body {
    /*transform: scale(1.02); 放大1.02倍 */
    transition: transform 0.3s ease; /* 变换过渡 */
}

/* HR线条动画 */
hr {
    position: relative; /* 相对定位 */
    overflow: hidden; /* 超出部分隐藏 */
}

/* HR线条的动画伪元素 */
hr::after {
    content: ''; /* 内容为空 */
    position: absolute; /* 绝对定位 */
    top: 0; /* 顶部对齐 */
    left: -100%; /* 初始位置在左侧外部 */
    width: 100%; /* 宽度100% */
    height: 1px; /* 高度1px（线条） */
    /* 渐变背景：透明->蓝紫色->透明 */
    background: linear-gradient(90deg, transparent, #667eea, transparent);
    transition: left 0.8s ease; /* left属性过渡 */
}

/* 卡片悬停时HR线条动画 */
.product-card:hover hr::after {
    left: 100%; /* 移动到右侧外部（产生划过效果） */
}

/* 焦点状态的高亮指示器 */
.product-card:focus-within {
    outline: 2px solid rgba(102, 126, 234, 0.3); /* 蓝紫色轮廓 */
    outline-offset: 2px; /* 轮廓偏移2px */
}

/* 产品描述样式调整 */
.product-card .product-card-body .product-description {
    padding: 10px 18px 0; /* 内边距：上10px，左右18px，下0 */
    margin-bottom: 0px; /* 下外边距0 */
    width: 100%; /* 宽度100% */
}