/* ==========================================================================
   visual-polish.css — SmartReadingPen 全站视觉精修（2026-06-25）

   设计原则：纯 CSS 叠加层，不改任何 HTML 结构 / 业务文案 / 统计数字。
   本文件必须最后加载；删除本文件或在 config.php 注释掉注册行即可完全回滚。

   分区：
     1. 设计令牌（主色：皇家企业蓝 #1D4ED8）
     2. 全局：链接 / 标题字距 / 表单焦点
     3. 顶栏与导航
     4. 按钮体系统一
     5. 卡片体系统一（产品 / 分类 / 评价 / FAQ / 博客 / 方案卡）
     6. 首页 Tab 面板错位修复
     7. FAQ 英雄区重绘（原青绿弧形顶穿导航）
     8. Contact 页修复
     9. 产品列表 / 详情残留青绿色归一
    10. 暖色块向冷色企业调统一（hero / newsletter / 面包屑带）
    11. 响应式
   ========================================================================== */

/* 1. 设计令牌 ---------------------------------------------------------------- */
:root {
    --color-primary: #1D4ED8;
    --primary-color: #1D4ED8;

    /* Bootstrap / xf 区块大量使用 rgba(var(--bs-primary-rgb), α)；
       原值为纯蓝 0,0,255，低透明度时泛紫，统一为皇家企业蓝 */
    --bs-primary: #1D4ED8 !important;
    --bs-primary-rgb: 29, 78, 216 !important;

    --vp-primary: #1D4ED8;
    --vp-primary-dark: #1E40AF;
    --vp-navy: #0F1E3D;
    --vp-tint: #EEF4FF;
    --vp-tint-2: #E3ECFB;
    --vp-tint-3: #F3F7FE;
    --vp-ink: #101828;
    --vp-text: #475467;
    --vp-muted: #667085;
    --vp-line: #E4E7EC;

    --vp-shadow-sm: 0 4px 16px rgba(16, 24, 41, .05);
    --vp-shadow-md: 0 12px 34px rgba(15, 27, 51, .08);
    --vp-shadow-lg: 0 22px 60px rgba(15, 27, 51, .12);
    --vp-shadow-blue: 0 12px 28px rgba(29, 78, 216, .22);

    /* xf3 区块悬停色原为亮蓝调校，这里对齐新主色 */
    --xf3-primary-hover: #1E40AF;
    --xf3-primary-deep: #173A9E;

    --vp-ease: cubic-bezier(.4, 0, .2, 1);
}

/* 2. 全局 -------------------------------------------------------------------- */
a { transition: color .18s var(--vp-ease); }
a:hover { color: var(--vp-primary-dark); }

h1, h2, h3,
.text-display-2,
.text-display-3,
.text-heading-1,
.text-heading-2,
.text-heading-3 {
    letter-spacing: -0.015em;
}

/* 3. 顶栏与导航 --------------------------------------------------------------- */
/* 顶部实用条：主蓝加深，形成「深蓝细条 + 皇家蓝主按钮」的层级 */
.header-top.header-top-green {
    background-color: #1E3A8A;
}

.header .main-menu > li > a,
.header .main-menu li a {
    transition: color .18s var(--vp-ease);
}
.header .main-menu li a:hover,
.header .main-menu li:hover > a {
    color: var(--vp-primary);
}

/* 头部 RFQ 按钮：已有品牌蓝，补统一投影与微交互 */
.rfq-header-btn {
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(29, 78, 216, .22);
    transition: background-color .2s var(--vp-ease), box-shadow .2s var(--vp-ease), transform .2s var(--vp-ease);
}
.rfq-header-btn:hover {
    background-color: var(--vp-primary-dark);
    border-color: var(--vp-primary-dark);
    box-shadow: 0 10px 24px rgba(29, 78, 216, .30);
    transform: translateY(-1px);
}

/* 下拉菜单选中项：原浅青绿 → 品牌蓝浅底 */
.dropdown .dropdown-menu.show .dropdown-item.active,
.dropdown .dropdown-menu .dropdown-item:active {
    background-color: var(--vp-tint);
    color: var(--vp-primary) !important;
}

/* 4. 按钮体系 ---------------------------------------------------------------- */
/* 黑色胶囊 CTA → 深海军蓝（与皇家蓝主按钮同一家族，主次分明） */
.btn.btn-black {
    background-color: var(--vp-navy);
    border-radius: 50px;
    box-shadow: 0 10px 24px rgba(15, 30, 61, .18);
    transition: background-color .2s var(--vp-ease), box-shadow .2s var(--vp-ease), transform .2s var(--vp-ease), color .2s var(--vp-ease);
}
.btn.btn-black:hover {
    background-color: var(--vp-primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--vp-shadow-blue);
}
/* 箭头在悬停时保持白色（原主题悬停切深色箭头，配浅底用，这里禁用） */
.btn.btn-black.icon-arrow-right-white:hover {
    background-color: var(--vp-primary);
    background-image: url(../imgs/template/icons/arrow-small-right-w.svg);
    color: #fff;
}

/* 产品卡「Send Inquiry」小芯片：原薄荷青底 → 品牌蓝浅底 */
.btn.btn-cart,
.btn.btn-cart-inquiry {
    background-color: var(--vp-tint) !important;
    background-image: none !important;
    color: var(--vp-primary) !important;
    border-radius: 8px;
    padding: 6px 18px !important;
    transition: background-color .18s var(--vp-ease);
}
.btn.btn-cart:hover,
.btn.btn-cart-inquiry:hover {
    background-color: var(--vp-tint-2) !important;
}

/* 首页 Tab 切换按钮激活态已是 var(--color-primary)，无需改动 */

/* 其它主题残留青绿按钮（列表筛选 / 资源卡，出现即统一） */
.btn.btn-explorer {
    background-color: var(--vp-tint);
    background-image: none;
    padding-right: 18px;
    color: var(--vp-primary);
}
.btn.btn-explorer:hover { background-color: var(--vp-tint-2); }
.btn-filter {
    background-color: var(--vp-primary);
    background-image: none;
    color: #fff;
    padding-left: 30px;
}
.btn.btn-border:hover {
    border-color: var(--vp-primary);
    color: var(--vp-primary);
}

/* 5. 卡片体系 ---------------------------------------------------------------- */
/* 5.1 产品卡 / 分类卡：悬停描边由青绿改为品牌蓝，投影更克制 */
.product-item-1,
.product-item-2,
.product-item-3,
.category-grid-3 {
    transition: border-color .22s var(--vp-ease), box-shadow .22s var(--vp-ease), transform .22s var(--vp-ease);
}
.product-item-1:hover,
.product-item-2:hover,
.product-item-3:hover {
    border-color: #C7D8F8;
    box-shadow: var(--vp-shadow-md);
    transform: translateY(-3px);
}
.category-grid-3:hover {
    border-color: #C7D8F8;
    box-shadow: var(--vp-shadow-md);
    transform: translateY(-3px);
}

/* 5.2 首页三张 OEM 能力卡（薄荷/婴儿蓝/蜜桃粉 → 白底精卡） */
.card-grid-1[style] {
    background-color: #fff !important;
    border: 1px solid var(--vp-line);
    border-radius: 18px;
    box-shadow: var(--vp-shadow-sm);
    padding: 18px 18px 34px;
    transition: border-color .22s var(--vp-ease), box-shadow .22s var(--vp-ease), transform .22s var(--vp-ease);
}
.card-grid-1[style]:hover {
    border-color: #C7D8F8;
    box-shadow: var(--vp-shadow-md);
    transform: translateY(-4px);
}
.card-grid-1 .grid-1-img img {
    width: 100%;
    border-radius: 12px;
}
.card-grid-1 .bg--before { opacity: .4; }

/* 5.3 客户评价卡：10px 粉底/紫描边 → 细边 + 圆角 + 投影；放开截断文字 */
.card-grid-style-3,
.card-grid-style-3.bd-bg-6,
.card-grid-style-3.bd-bg-10 {
    background: #fff;
    border: 1px solid var(--vp-line);
    border-radius: 18px;
    padding: 34px 32px 28px;
    box-shadow: var(--vp-shadow-sm);
    transition: border-color .22s var(--vp-ease), box-shadow .22s var(--vp-ease), transform .22s var(--vp-ease);
}
.card-grid-style-3:hover {
    border-color: #C7D8F8;
    box-shadow: var(--vp-shadow-md);
    transform: translateY(-3px);
}
.card-grid-style-3 .text-desc {
    height: auto;
}

/* 5.4 FAQ 分类卡：蜜桃底 → 白底精卡 */
.card-grid-style-6 {
    background: #fff;
    border: 1px solid var(--vp-line);
    border-radius: 18px;
    padding: 44px 40px;
    box-shadow: var(--vp-shadow-sm);
    transition: border-color .22s var(--vp-ease), box-shadow .22s var(--vp-ease), transform .22s var(--vp-ease);
}
.card-grid-style-6:hover {
    border-color: #C7D8F8;
    box-shadow: var(--vp-shadow-md);
    transform: translateY(-3px);
}
.card-grid-style-6 .grid-6-img img { margin: 0 auto; }

/* 5.5 博客卡图片衬底：彩色变体全部统一为品牌蓝浅底，偏移一致 */
.card-grid-style-4 .grid-4-img:before,
.card-grid-style-4 .grid-4-img.color-bg-2:before,
.card-grid-style-4 .grid-4-img.color-bg-3:before,
.card-grid-style-4 .grid-4-img.color-bg-4:before,
.card-grid-style-4 .grid-4-img.color-bg-6:before {
    background-color: var(--vp-tint-2);
}
.card-grid-style-4 .grid-4-img img {
    border-radius: 14px;
    position: relative;
    z-index: 1;
}

/* 6. 首页 Tab 面板（4 个糖果色面板统一；修图片悬空/错位） ---------------------- */
.tab-content .panel-box[style] {
    background-color: var(--vp-tint-3) !important;
    border: 1px solid #E6EDFA;
    border-radius: 20px;
    overflow: hidden;
}
.tab-content .panel-box .box-optimized {
    padding: 56px 20px 56px 52px;
}
.tab-content .block-video {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 24px 40px;
}
.tab-content .block-video.icon-pattern img {
    max-height: 460px;
    width: auto;
    margin: 0 auto;
    /* 产品图自带白底方块：正片叠底让白底融入浅蓝卡面（底色色值极浅，笔身几乎不变色） */
    mix-blend-mode: multiply;
}
/* 原角落装饰图自带暖色块，与新冷色底冲突，隐藏 */
.tab-content .block-video.icon-pattern:before { content: none; }
/* 面板内白色按钮加轻投影，层次更清晰 */
.tab-content .panel-box .btn-white {
    box-shadow: 0 8px 22px rgba(15, 27, 51, .08);
}

/* 7. FAQ 英雄区 --------------------------------------------------------------- */
/* 原 margin-top:-140px 顶穿导航 + 青绿弧形照片 + 675px 高留白，重绘为品牌蓝渐变带 */
.banner-hero.banner-faqs-1 {
    margin-top: 0;
    min-height: 0;
    padding: 110px 0 96px;
    margin-bottom: 70px;
    background: linear-gradient(150deg, #1E3A8A 0%, #1D4ED8 56%, #2E5FE0 100%);
    border-radius: 0 0 28px 28px;
}
.banner-faqs-1 .text-display-3 { line-height: 1.2; }
.banner-faqs-1 .form-round {
    box-shadow: 0 20px 46px rgba(10, 28, 72, .28);
}
.banner-faqs-1 .form-round .input-round {
    border: 0;
    min-height: 52px;
}
.banner-faqs-1 .form-round .input-round:focus { box-shadow: none !important; }
/* 发送按钮：青绿 SVG 精灵换子主题蓝色版（同尺寸/同切片） */
.banner-faqs-1 .btn.btn-round-icon {
    background-image: url(../imgs/template/icons/btn-send-blue.svg);
    background-color: transparent;
}
.banner-faqs-1 .text-body-lead { opacity: .88; }

/* FAQ 手风琴展开项：近黑头 → 品牌蓝 */
.accordion-button:not(.collapsed) {
    background-color: var(--vp-primary);
    color: #fff;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .12);
}

/* 8. Contact 页 -------------------------------------------------------------- */
/* 顶部 Get in Touch 暖色面包屑带 → 冷色 */
.banner-hero.banner-breadcrums {
    background-color: var(--vp-tint-3);
    border-bottom: 1px solid #E6EDFA;
}

/* 办公室卡片：图片统一 64px 圆角缩略图，压缩空卡的多余留白 */
.list-icons .item-icon {
    padding-bottom: 26px;
    margin-bottom: 26px;
}
.list-icons .item-icon .icon-left { width: 64px; }
.list-icons .item-icon .icon-left img {
    max-width: 64px;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--vp-line);
}

/* 表单面板：冷灰底 → 冷蓝灰，装饰信封缩小降噪，上间距收紧 */
.box-gray-100 {
    background-color: #F4F7FC;
}
.box-gray-100.icon-wave { margin-top: -56px; }
.icon-wave .icon-wave-before {
    width: 120px;
    height: 120px;
    right: 40px;
    top: 36px;
    opacity: .55;
}
.box-gray-100 .contact-form-input,
.box-gray-100 textarea.form-control {
    border: 1px solid var(--vp-line);
    border-radius: 10px;
    background-color: #fff;
    padding: 12px 16px;
    transition: border-color .18s var(--vp-ease), box-shadow .18s var(--vp-ease);
}
.box-gray-100 .contact-form-input:focus,
.box-gray-100 textarea.form-control:focus {
    border-color: var(--vp-primary);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .12) !important;
}

/* intl-tel-input：旗标区透明，输入文字为国家区号（+86）让出空间，避免与占位符重叠 */
.iti { display: block; }
.iti__flag-container,
.iti__selected-flag {
    background: transparent;
}
.iti.iti--separate-dial-code .iti__selected-flag,
.iti.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
    background-color: transparent;
}
.iti input.contact-form-input,
.iti input.form-control,
.iti input.iti__tel-input {
    padding-left: 82px !important;
}

/* 9. 产品列表 / 详情：青绿残留归一 --------------------------------------------- */
#products-filter-form .sidebar .widget-title {
    color: var(--vp-ink) !important;
}
/* 详情页描述 Tab */
.btn.btn-tab.active,
.btn.btn-tab:hover {
    border-color: #B9CEF6;
    color: var(--vp-primary) !important;
    background-color: var(--vp-tint);
}
/* 缩略图当前/悬停描边 */
.slider-nav-thumbnails .slick-slide:hover,
.slider-nav-thumbnails .slick-slide.slick-current {
    border: 1px solid var(--vp-primary);
}
.box-price .price,
.text-hurry,
input.qty-val,
.countdown-amount {
    color: var(--vp-ink);
}
.detail-extralink .detail-qty {
    border-color: var(--vp-line) !important;
    color: var(--vp-ink);
}
.product-extra-link2 .button.button-add-to-cart {
    background-color: var(--vp-primary);
    border-color: var(--vp-primary);
    color: #fff;
}
.product-extra-link2 .button.button-add-to-cart:hover {
    background-color: var(--vp-primary-dark);
    border-color: var(--vp-primary-dark);
}
.product-extra-link2 a { border-color: var(--vp-line); }
.product-extra-link2 a:hover { background-color: var(--vp-tint); }

/* 10. 暖色区块冷色统一 -------------------------------------------------------- */
/* 首页 / About 主英雄带：蜜桃 → 极浅蓝灰（黑白几何角饰不受影响） */
.banner-hero.banner-1 {
    background-color: #F2F6FD;
}
/* OEM vs ODM 指南页 hero 蜜桃 rgb → 与其他落地页一致的冷蓝 */
.xf-hero-centered[style*="252, 229, 205"],
.xf-hero-centered[style*="252,229,205"] {
    background-color: rgb(201, 218, 248) !important;
}
/* Newsletter 面板 / 全站蜜桃底 .bg-2（Workflow 带等）→ 极浅蓝灰 */
.bg-2,
.box-newsletter.bg-2[style],
.box-newsletter.bg-2 {
    background-color: #F2F6FD !important;
}
/* About 页 "One-Stop" 薄荷胶囊 → 品牌蓝浅底 */
.tag-1.bg-6 {
    background-color: var(--vp-tint) !important;
}
/* 产品页分类卡内粉/紫/薄荷衬底统一冷蓝灰（图不透底时无感） */
.style-1-img.color-bg-3,
.style-1-img.color-bg-4,
.style-1-img.color-bg-6,
.style-1-img.color-bg-10 {
    background-color: #EEF3FB !important;
}
/* About 评价区外层蜜桃面板（inline style）→ 冷蓝灰 */
.card-grid-style-3[style] {
    background-color: #F4F7FC !important;
}
/* 定价切换等主题青绿组件（如出现） */
.block-pricing-2 .box-pricing-item.active .tag-round,
.block-pricing-2 .box-pricing-item:hover .tag-round,
.block-pricing-3 .block-price-item.active .tag-round,
.block-pricing-3 .block-price-item:hover .tag-round {
    background-color: var(--vp-primary);
}

/* 11. 响应式 ----------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .tab-content .panel-box .box-optimized { padding: 40px 32px; }
    .tab-content .block-video { padding: 0 24px 32px; }
    .tab-content .block-video.icon-pattern img { max-height: 320px; }
}

@media (max-width: 767.98px) {
    .banner-hero.banner-faqs-1 {
        padding: 84px 0 72px;
        margin-bottom: 48px;
        border-radius: 0 0 20px 20px;
    }
    .card-grid-style-6 { padding: 36px 28px; }
    .card-grid-style-3,
    .card-grid-style-3.bd-bg-6,
    .card-grid-style-3.bd-bg-10 {
        padding: 28px 24px 22px;
    }
    .card-grid-1[style] { padding: 14px 14px 28px; }
    .icon-wave .icon-wave-before {
        width: 84px;
        height: 84px;
        right: 24px;
        top: 24px;
    }
}

/* ============================================================
   WhatsApp 统一入口（2026-09-25）
   全站不打国际电话：电话/WA 入口统一 wa.me 链接。
   链接继承所在上下文文字色，hover 变品牌蓝，图标基线对齐。
   ============================================================ */
a.sr-wa,
a.sr-wa:link,
a.sr-wa:visited,
a.sr-wa:hover,
a.sr-wa:active {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease, opacity .2s ease;
}
a.sr-wa i { font-size: 1.05em; line-height: 1; }
a.sr-wa:hover { color: var(--bs-primary, #1D4ED8); }
/* 顶栏深蓝底：hover 用浅蓝高亮 */
.header-top a.sr-wa:hover { color: #93C5FD; }

/* ============================================================
   导入博客正文排版（Markdown→HTML: 表格/引用块/SVG图表/CTA）
   ============================================================ */
.sr-post-content h2 { margin-top: 2.2em; margin-bottom: .8em; }
.sr-post-content h3 { margin-top: 1.6em; margin-bottom: .6em; }
.sr-post-content .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.6em 0; }
.sr-post-content table {
  width: 100%; margin: 0; border-collapse: collapse;
  font-size: .94rem;
}
.sr-post-content th, .sr-post-content td {
  border: 1px solid #D8DEE9; padding: .55rem .7rem; text-align: left; vertical-align: top;
}
.sr-post-content thead th { background: #F1F5F9; font-weight: 700; }
.sr-post-content tbody tr:nth-child(even) { background: #FAFBFD; }
blockquote {
  margin: 1.6em 0; padding: .9rem 1.2rem;
  border-left: 4px solid var(--bs-primary, #1D4ED8) !important;
  background: #F5F8FF; border-radius: 0 8px 8px 0; color: #334155;
}
.sr-post-content blockquote.audience-note {
  border-left-color: #0EA5E9 !important; background: #F0F9FF; font-size: .97rem;
}
.sr-post-content blockquote.buyer-tip {
  border-left-color: #22C55E !important; background: #F0FDF4;
}
.sr-post-content .chart-figure { text-align: center; margin: 2em 0; }
.sr-post-content .chart-img {
  max-width: 100%; height: auto; border: 1px solid #E2E8F0;
  border-radius: 10px; background: #fff; padding: 8px;
}
.sr-post-content .post-cta {
  margin: 2.4em 0 1em; padding: 1.6rem; text-align: center;
  background: linear-gradient(135deg, #F5F8FF 0%, #EFF6FF 100%);
  border: 1px solid #BFDBFE; border-radius: 12px;
}
.sr-post-content .post-cta .btn {
  font-weight: 700; letter-spacing: .01em;
  padding: .8rem 2rem; border-radius: 999px;
  box-shadow: 0 8px 20px rgba(29,78,216,.25);
}

/* FAQ 折叠面板（数据来自 sr_post_faq sidecar，模板 post.blade.php 渲染） */
.sr-faq-section { margin: 2.6em 0 1em; }
.sr-faq-title { margin-bottom: .8em; }
.sr-faq-item {
  border: 1px solid #E2E8F0; border-radius: 10px; margin-bottom: .7rem;
  background: #fff; overflow: hidden;
}
.sr-faq-item summary {
  cursor: pointer; padding: .9rem 2.6rem .9rem 1.1rem; position: relative;
  font-weight: 600; color: #0F172A; list-style: none;
}
.sr-faq-item summary::-webkit-details-marker { display: none; }
.sr-faq-item summary::after {
  content: "+"; position: absolute; right: 1rem; top: .75rem;
  font-size: 1.3rem; color: var(--bs-primary, #1D4ED8); font-weight: 400;
}
.sr-faq-item[open] summary::after { content: "\2212"; }
.sr-faq-item[open] { border-color: #BFDBFE; box-shadow: 0 2px 10px rgba(29,78,216,.08); }
.sr-faq-answer { padding: 0 1.1rem 1rem; color: #334155; line-height: 1.7; }