:root {
    /* --- 核心主题变量 (合并后) --- */
    --primary-color: #cb935d; /* 活力红，突出 */
    --accent-color: #337ab7;  /* 辅助蓝，用于链接 */
    --border-color: #dee2e6;
    --shadow-light: 0 4px 12px rgba(0, 0, 0, 0.08);

    /* --- 产品页专用变量 (Tailwind 风格命名) --- */
    --primary-cpy: #2563EB; /* blue-600 */
    --primary-dark-cpy: #1D4ED8; /* blue-700 */
    --text-main-cpy: #111827; /* gray-900 */
    --text-body-cpy: #4B5563; /* gray-600 */
    --text-light-cpy: #9CA3AF; /* gray-400 */
    --bg-page-cpy: #F9FAFB; /* gray-50 */
    --border-cpy: #E5E7EB; /* gray-200 */

    /* --- 阴影变量 --- */
    --shadow-sm-cpy: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md-cpy: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg-cpy: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl-cpy: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* =========================================
   1. 全局工具与布局 (Utilities & Layout)
   ========================================= */
.product-page-wrapper-cpy {
    line-height: 1.5;
    box-sizing: border-box;
    overflow: unset !important;
}

.container-cpy {
    max-width: 1536px;
    margin: 0 auto;
    padding: 0 1rem;
}

.hidden-cpy { display: none !important; }
.flex-cpy { display: flex; }
.items-center-cpy { align-items: center; }
.justify-between-cpy { justify-content: space-between; }

/* =========================================
   2. 产品页组件 (Product Page Components)
   ========================================= */

/* --- Hero Section --- */
.hero-section-cpy { padding: 2rem 0 2rem 0; }
.hero-grid-cpy {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}
.section-block-cpy{scroll-margin-top: 140px;}
@media (min-width: 1024px) {
    .hero-grid-cpy { flex-direction: row; }
    .hero-left-cpy, .hero-right-cpy { width: 50%; }
}

/* --- Gallery (相册) --- */
.main-image-box-cpy {
    border: 1px solid var(--border-cpy);
    border-radius: 0.5rem;
    overflow: hidden;
    background: white;
    box-shadow: var(--shadow-sm-cpy);
    margin-bottom: 1rem;
    position: relative;
}
.main-image-cpy {
    display: block;
    transition: transform 0.5s;
}
.main-image-box-cpy:hover .main-image-cpy { transform: scale(1.05); }

.badge-best-seller-cpy {
    position: absolute; top: 1rem; left: 1rem;
    background-color: var(--theme-color1); color: white;
    font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.75rem; border-radius: 0.25rem;
}

.thumb-grid-cpy { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.thumb-item-cpy {
    border: 2px solid transparent;
    border-radius: 0.25rem;
    cursor: pointer;
    overflow: hidden;
    opacity: 0.7;
    transition: all 0.2s;
}
.thumb-item-cpy img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-item-cpy:hover { opacity: 1; }
.thumb-item-cpy.active-cpy { border-color: var(--theme-color1); opacity: 1; }

/* --- Right Info (右侧信息) --- */
.product-h1-cpy {
    font-size: 1.875rem; font-weight: 700; color: var(--text-main-cpy);
    margin-top: 0; margin-bottom: 0.5rem; line-height: 1.2;
}
@media (min-width: 768px) { .product-h1-cpy { font-size: 2.25rem; }}

.meta-info-cpy { display: flex; align-items: center; margin-bottom: 1rem; font-size: 0.875rem; }
.stars-cpy { color: #FBBF24; margin-right: 0.5rem; }
.review-count-cpy { color: #6B7280; cursor: pointer; margin-right: 0.75rem; }
.review-count-cpy:hover { color: var(--primary-cpy); }
.stock-text-cpy { color: var(--theme-color1); font-weight: 600; display: flex; align-items: center; }
/*产品详情页右侧漂浮板块*/
.cross-sell-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.cross-sell-list li {
    margin-bottom: 1rem;
}

.cross-sell-list li a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.cross-sell-list img {
    width: 5rem;
    height: 5rem;
    object-fit: cover;
    border-radius: 0.25rem;
}
.cross-sell-list li:hover {
    transform: scale(1.05);
    border-color: #3b82f6;
	color: #3b82f6;
}
.cross-sell-list h5 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1F2937;
    margin: 0;
}
/* --- Highlights (蓝色特性框) --- */
.features-box-cpy {
    background-color: #EFF6FF; 
    border-left: 5px solid var(--theme-color1);
    padding: 1rem;
    border-radius: 0.5rem 0 0 0.5rem;
    margin: 0 2.5rem 2.5rem;
}
.features-list-cpy { list-style: none; padding: 0; margin: 0; }
.features-list-cpy li { display: flex; align-items: flex-start; margin-bottom: 0.5rem; font-size: 1rem; color: #374151; }
.features-list-cpy li i { color: var(--theme-color1); margin-top: 0.25rem; margin-right: 0.5rem; width: 1.25rem; text-align: center; }
.features-box-bkxqy {
	background-color: #f0f8ff;
    padding: 25px;
    border-left: 5px solid var(--theme-color1);
    border-radius: 8px;
	margin-bottom: 40px;
}
/* --- Buttons (按钮) --- */
.action-buttons-cpy { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .action-buttons-cpy { flex-direction: row; } }

.btn-inquiry-cpy {
    flex: 1;
    background-color: var(--primary-cpy); color: white;
    font-weight: 700; padding: 1rem 1.5rem; border-radius: 0.375rem;
    border: none; cursor: pointer; font-size: 1.125rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-lg-cpy); transition: all 0.2s;
}
.btn-inquiry-cpy:hover { background-color: var(--primary-dark-cpy); transform: translateY(-1px); }
.btn-secondary-sycp {border: 2px solid transparent;line-height: 16px;color: var(--theme-color1);
    background-color: transparent;
    border-color: var(--theme-color1);}
.btn-pdf-cpy {
    flex: 1;
    background-color: white; color: #374151;
    font-weight: 700; padding: 1rem 1.5rem; border-radius: 0.375rem;
    border: 2px solid #D1D5DB; cursor: pointer; font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; transition: all 0.2s;
}
.btn-pdf-cpy:hover { border-color: var(--primary-cpy); color: var(--primary-cpy); }

.trust-icons-cpy {
	display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-top: 0.5rem; border-top: 1px solid #F3F4F6;
    color: #9CA3AF; font-size: 0.875rem;
}
@media (max-width: 1295px) {.trust-icons-cpy {grid-template-columns: repeat(2, minmax(0, 1fr));font-size: 0.8rem;padding-left: 10px;}}
/* --- Sticky Nav (吸顶导航) --- */
.sticky-bar-cpy {
    position: sticky; top: 66px; /* Offset for header */
    background: white; border-bottom: 1px solid var(--border-cpy);
    z-index: 40; box-shadow: var(--shadow-sm-cpy);
    display: none;
}
@media (min-width: 768px) { .sticky-bar-cpy { display: block; } }

.nav-links-cpy { display: flex; list-style: none; padding: 0; margin: 0; gap: 2rem; overflow-x: auto; }
.nav-links-cpy a {
    display: block; padding: 1rem 0; text-decoration: none;
    color: #4B5563; font-weight: 500; border-bottom: 2px solid transparent;font-weight: bold;
}
.nav-links-cpy a:hover { color: var(--theme-color1); border-bottom-color: var(--theme-color1); }
/* 新增：高亮激活状态的样式 (JavaScript 会自动添加这个类) */
.nav-links-cpy a.active {
    color: var(--theme-color1);
    border-bottom: 2px solid var(--theme-color1);
}
/* --- Content Body (详情内容区) --- */
.details-container-cpy { padding: 3rem 0; display: flex; flex-direction: column; gap: 3rem; }
@media (min-width: 1024px) { .details-container-cpy { flex-direction: row; } }

.content-left-cpy { width: 100%; }
@media (min-width: 1024px) { .content-left-cpy { width: 75%; } }

.sidebar-right-cpy { width: 100%; }
@media (min-width: 1024px) { .sidebar-right-cpy { width: 25%; } }


/* =========================================
   3. 博客文章布局 (Blog Post Layout)
   ========================================= */

.blog-post {
    display: flex;
    max-width: 1600px;
    margin: 40px auto;
    padding: 0 25px;
    gap: 50px;
}
/* 文章主体：增加背景和阴影来提升层次感 */
.post-content {
    flex: 3;
    min-width: 0;
    background-color: #ffffff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: var(--shadow-light);
}
/* 侧边栏：模块化处理 */
.post-sidebar {
    flex: 1;
    min-width: 400px;
}
/* 媒体查询：小屏幕堆叠 */
@media (max-width: 992px) {
    .blog-post { flex-direction: column; gap: 30px; }
    .post-content { padding: 25px; }
    .post-sidebar { padding-top: 0; }
}


/* =========================================
   4. 通用内容样式 (Common Content: Tables, Lists, Typography)
   注意：这是两段代码重叠最多的部分，已合并处理
   ========================================= */

/* 列表样式 */
.post-content ol { padding-inline-start: 40px; }
.post-content ol li { list-style: decimal; padding-left: 5px; margin-bottom: 5px; }
.post-content ul { list-style: disc; margin-left: 2rem; }
.post-content ul li { list-style: unset;margin-bottom: 0.8rem;}

/* 表格样式 (合并优化版) */
.post-content table {
    width: 100% !important;
    max-width: 100%;
    margin-bottom: 1rem;
    background-color: transparent;
}
.post-content table a{color: var(--theme-color1);font-weight: 700;}
.post-content table a:hover{color: #333;text-decoration: underline;}
.post-content table th, .post-content table td {
    padding: 10px;
    vertical-align: middle;
    font-size: 14px;
    border: 1px solid #dee2e6;
    text-align: center;
}
.post-content table tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.03);
}

/* 图片与标题 */
.post-content img { max-width: 100%; height: auto !important; }

/* 标题样式：带左侧边框的H2 */
.post-content h2 {
    font-size: 2rem;
    border-left: 5px solid var(--theme-color1);
    padding-left: 15px;
    padding-bottom: 0;
	margin-bottom: 1.5rem;
} 
.post-content .sub-title {
	position: relative;
	font-size: var(--sec-title-subtitle-font-size);
	color: var(--sec-title-subtitle-color);
	line-height: var(--sec-title-subtitle-line-height);
	font-weight: var(--sec-title-subtitle-font-weight);
	font-family: var(--sec-title-subtitle-font-family);
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: .1em;
	padding-left: 12px;
	margin-bottom: 9px
}
.post-content .sub-title:before {
	position: absolute;
	left: 0;
	top: 0;
	content: "/";
	color: var(--theme-color1)
}
/* 引用块 */
.post-content blockquote {
    font-size: 1.2em;
    border-left: 6px solid var(--accent-color);
    padding: 15px 25px;
    margin: 30px 0;
    background-color: #f0f8ff;
    font-style: italic;
    color: #555;
}

/* 移动端内容适配 */
@media (max-width: 768px) {
    .post-content table {
        display: block;
        overflow-x: auto; /* 关键：表格横向滚动 */
    }
	.product-h1-cpy{font-size: 20px;}
    .post-content h1 { font-size: 22px; line-height: 1.2; }
    .post-content h2 { font-size: 20px !important; }
    .post-content h3 { font-size: 18px !important; }
    .post-content h4 { font-size: 16px !important; }
    .post-content h5 { font-size: 16px !important; }
    .blog-post { padding: 0; margin: 0; }
    .table-of-contents { padding: 5px 5px; }
    .post-content ol { padding-inline-start: 20px; line-height: 1.2; }
.features-box-cpy {margin: 0;}
}


/* =========================================
   5. 博客特有组件 (Blog Specifics)
   ========================================= */

/* 元信息 */
.post-meta {
    color: #888;
    margin-bottom: 40px;
    padding-bottom: 15px;
    border-bottom: 1px dashed var(--border-color);
}
.blog-post a{font-weight: 700;text-decoration: underline;}
.blog-post a:hover{color: var(--text-color);}
/* 特色图片 */
.featured-image {
    width: 100%; height: auto;
    border-radius: 8px; object-fit: cover;
    margin-bottom: 25px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}
/* 目录 (TOC) */
.table-of-contents {
    background-color: #ffffff;
    border: 1px solid var(--theme-color1);
    border-left: 5px solid var(--theme-color1);
    padding: 5px 20px;
    margin: 15px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border-radius: 6px;
}
.table-of-contents h2 {
    border-left: none; /* 重置 TOC 内部样式 */
    padding-left: 0;
    margin-top: 0.5em;
    font-size: 1.4em;
    text-align: left;
}
.table-of-contents a { color: var(--theme-color1); text-decoration: none; }
.table-of-contents a:hover { text-decoration: underline; }

/* 侧边栏模块 */
.post-sidebar section {
    background-color: #ffffff;
    padding: 25px;
    margin-bottom: 25px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.post-sidebar .author-bio a:hover{color: var(--text-color);text-decoration: underline;}
.post-sidebar .newsletter-signup a + a {
  margin-left: 20px;
}
.post-sidebar .newsletter-signup a:hover{color: var(--text-color);text-decoration: underline;}
.author-bio img {
    width: 80px; height: 80px;
    border-radius: 50%;
    margin-bottom: 10px;
    border: 3px solid var(--theme-color1);
}
.post-sidebar h3 {
    font-family: var(--font-body);
    font-size: 1.4em;
    color: var(--heading-color);
    margin-top: 0;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 5px;
    margin-bottom: 15px;
}
.related-posts ul { list-style: none; padding-left: 0; }
.related-posts li a {
    color: var(--text-color);
    text-decoration: none;
    display: block;
    padding: 5px 0;
    border-bottom: 1px dashed #eee;
}
.related-posts li a:hover { color: var(--theme-color1); }


/* =========================================
   6. 交互组件与弹窗 (Components & Modals)
   ========================================= */

/* FAQ */
.faq-card-cpy { border: 1px solid var(--border-cpy); border-radius: 0.5rem; margin-bottom: 1rem; overflow: hidden; }
.faq-btn-cpy {
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    padding: 1rem; background: #F9FAFB; border: none; cursor: pointer;
    font-weight: 600; color: #1F2937; text-align: left; font-size: 1rem;
    transition: background 0.2s;
}
.faq-btn-cpy:hover { background-color: #F3F4F6; }
.faq-btn-cpy i.fa-plus{color: var(--theme-color1) !important;}
.faq-text-cpy { display: none; padding: 1rem; color: #4B5563; background: white; border-top: 1px solid var(--border-cpy); }
.faq-text-cpy.open-cpy { display: block; }

/* Sidebar Contact (产品页侧边栏) */
.contact-box-cpy {
    background: white; padding: 1.5rem; border-radius: 0.5rem;
    border: 1px solid var(--border-cpy); box-shadow: var(--shadow-md-cpy);
    position: sticky; top: 140px;
}
.contact-person-cpy { display: flex; align-items: center; margin-bottom: 1rem; }
.avatar-circle-cpy {
    width: 2.5rem; height: 2.5rem; background-color: #DBEAFE; color: var(--theme-color1);
    border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 0.75rem;
}
.contact-person-cpy .thumb {
	height: 60px;
    width: 60px;
    padding: 2px;
    background: -webkit-gradient(linear, left bottom, left top, from(var(--theme-color8-ggh)), to(var(--theme-color1)));
    background: linear-gradient(to top, var(--theme-color8-ggh), var(--theme-color1));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
}
.contact-person-cpy .thumb img {
	border-radius: 50%;
}
.btn-email-sidebar-cpy {
    display: block; width: 100%; text-align: center; background: #F3F4F6;
    color: #1F2937; font-weight: 600; padding: 0.75rem; border-radius: 0.375rem;
    text-decoration: none; margin-bottom: 0.5rem; transition: background 0.2s;
}
.btn-email-sidebar-cpy:hover { background: #E5E7EB; }

.btn-wa-sidebar-cpy {
    display: flex; align-items: center; justify-content: center; width: 100%;
    background: #22C55E; color: white; font-weight: 600; padding: 0.75rem;
    border-radius: 0.375rem; text-decoration: none; transition: background 0.2s;
}
.btn-wa-sidebar-cpy:hover { background: #16A34A; }

.cross-sell-cpy {
    margin-top: 1.5rem; padding: 0.5rem; border: 1px solid var(--border-cpy);
    background: white; border-radius: 0.5rem;
}
/* Animations */
@keyframes fadeInCpy { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUpCpy { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }