/* ==========================================================================
   Huatai Theme · Components
   按钮 / 卡片 / 徽标 / 标签页 / 手风琴 / 分页 / 灯箱 / 提示条 / 统计 / 时间轴
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 按钮
   -------------------------------------------------------------------------- */
.btn {
    --btn-bg: var(--h-color-brand);
    --btn-fg: #fff;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--h-space-2xs);
    padding: 0.7em 1.4em;
    border: 1px solid transparent;
    border-radius: var(--h-radius-sm);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: var(--h-fs-300);
    font-weight: var(--h-fw-semibold);
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: var(--h-transition);
}

.btn:hover,
.btn:focus-visible {
    color: var(--btn-fg);
    translate: 0 -2px;
    box-shadow: var(--h-shadow-md);
}

.btn:active { translate: 0 0; }

.btn-primary {
    --btn-bg: var(--h-color-brand);
    box-shadow: 0 2px 10px rgb(184 84 80 / 28%);
}

.btn-primary:hover { --btn-bg: var(--h-color-brand-strong); }

.btn-outline {
    --btn-bg: transparent;
    --btn-fg: var(--h-text-strong);
    border-color: var(--h-border-strong);
}

.btn-outline:hover {
    --btn-bg: var(--h-color-brand-wash);
    --btn-fg: var(--h-color-brand-strong);
    border-color: var(--h-color-brand);
}

.btn-light {
    --btn-bg: #fff;
    --btn-fg: var(--h-color-brand-strong);
}

.btn-light:hover { --btn-bg: var(--h-color-brand-wash); }

.btn-ghost {
    --btn-bg: transparent;
    --btn-fg: var(--h-text-body);
}

.btn-ghost:hover {
    --btn-bg: var(--h-bg-sunken);
    --btn-fg: var(--h-text-strong);
}

.btn-success {
    --btn-bg: var(--h-state-success);
}

.btn-success:hover { --btn-bg: #24643F; }

.btn-lg { font-size: var(--h-fs-400); padding: 0.8em 1.7em; }
.btn-sm { font-size: var(--h-fs-200); padding: 0.5em 1em; }

.btn-block {
    display: flex;
    width: 100%;
}

.btn svg,
.btn i {
    width: 1em;
    height: 1em;
    flex: none;
    font-size: 1em;
}

/* 带箭头的“查看更多”按钮 */
.btn-more,
.product-more,
.read-more {
    display: inline-flex;
    align-items: center;
    gap: var(--h-space-3xs);
    font-size: var(--h-fs-200);
    font-weight: var(--h-fw-semibold);
    color: var(--h-color-brand);
    text-decoration: none;
}

.btn-more::after,
.product-more::after,
.read-more::after {
    content: "";
    width: 0.5em;
    height: 0.5em;
    border-block-start: 2px solid currentColor;
    border-inline-end: 2px solid currentColor;
    rotate: 45deg;
    transition: translate var(--h-dur-base) var(--h-ease-out);
}

.btn-more:hover::after,
.product-more:hover::after,
.read-more:hover::after { translate: 4px 0; }

/* 按钮组 */
.btn-wrapper,
.cta-buttons,
.hero-actions,
.product-actions,
.error-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--h-space-xs);
    margin-block-start: var(--h-space-md);
}

/* 产品详情的两个 CTA 等宽，避免一大一小 */
.product-actions .btn {
    flex: 1 1 0;
    min-width: 0;
}

/* --------------------------------------------------------------------------
   2. 卡片基类
   -------------------------------------------------------------------------- */
.product-card,
.project-card,
.news-card,
.service-card,
.feature-card,
.advantage-card,
.info-card,
.video-card,
.solution-item,
.related-post-card,
.suggestion-card,
.stat-box,
.award-item {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    overflow: hidden;
    background: var(--h-bg-surface);
    border: 1px solid var(--h-border-subtle);
    border-radius: var(--h-radius-lg);
    box-shadow: var(--h-shadow-xs);
    transition: translate var(--h-dur-base) var(--h-ease-out),
                box-shadow var(--h-dur-base) var(--h-ease-standard),
                border-color var(--h-dur-base) var(--h-ease-standard);
}

.product-card:hover,
.project-card:hover,
.news-card:hover,
.service-card:hover,
.feature-card:hover,
.advantage-card:hover,
.info-card:hover,
.video-card:hover,
.solution-item:hover,
.related-post-card:hover,
.suggestion-card:hover {
    translate: 0 -4px;
    border-color: var(--h-border-default);
    box-shadow: var(--h-shadow-lg);
}

.card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* 信息卡（联系页侧栏等）：补齐内边距与卡片外观，避免文字贴边 */
.info-card {
    padding: var(--h-space-md);
    background: var(--h-bg-surface);
    border: 1px solid var(--h-border-subtle);
    border-radius: var(--h-radius-lg);
    box-shadow: var(--h-shadow-xs);
}

.info-card h3 {
    display: flex;
    align-items: center;
    gap: var(--h-space-2xs);
    margin-block-end: var(--h-space-sm);
    padding-block-end: var(--h-space-2xs);
    border-block-end: 1px solid var(--h-border-subtle);
    font-size: var(--h-fs-400);
}

.info-card > p { margin-block-end: var(--h-space-sm); }

/* 卡片内的图形/图标 */
.feature-icon,
.service-icon,
.advantage-icon,
.info-card h3 i,
.info-list li > i {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: none;
    margin-block-end: var(--h-space-sm);
    border-radius: var(--h-radius-md);
    background: linear-gradient(135deg, var(--h-color-brand-wash), var(--h-color-gold-wash));
    color: var(--h-color-brand);
    font-size: var(--h-fs-500);
}

.feature-icon svg,
.service-icon svg,
.advantage-icon svg { width: 24px; height: 24px; }

.feature-title,
.service-card h3,
.advantage-card h3,
.info-card h3,
.video-card h4,
.solution-title,
.news-card-title,
.product-title,
.project-title {
    font-size: var(--h-fs-400);
    font-weight: var(--h-fw-bold);
    line-height: var(--h-lh-snug);
    color: var(--h-text-strong);
}

.feature-desc,
.service-card p,
.advantage-card p,
.info-card > p,
.video-card p,
.solution-excerpt,
.news-card-excerpt,
.product-excerpt,
.project-excerpt {
    margin: 0;
    font-size: var(--h-fs-200);
    line-height: var(--h-lh-relaxed);
    color: var(--h-text-muted);
}

.news-card-title a:hover,
.product-title a:hover,
.project-title a:hover,
.solution-title a:hover { color: var(--h-color-brand); }

/* 卡片正文区 */
.news-card-content,
.product-content,
.project-content,
.solution-info,
.related-post-info,
.featured-info {
    display: flex;
    flex-direction: column;
    gap: var(--h-space-2xs);
    padding: var(--h-space-md);
}

.solution-info > *:last-child,
.product-content > *:last-child,
.project-content > *:last-child { margin-block-end: 0; }

/* 卡片缩略图（统一 4:3，避免不同尺寸图片排队不齐） */
.product-thumb,
.project-thumb,
.news-card-thumb,
.news-thumb,
.video-thumb,
.related-post-image,
.solution-image,
.news-image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--h-bg-sunken);
}

.product-thumb img,
.project-thumb img,
.news-card-thumb img,
.news-thumb img,
.video-thumb img,
.related-post-image img,
.solution-image img,
.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale var(--h-dur-slow) var(--h-ease-out);
}

/* 视频卡片：占位 iframe 撑满 4:3 缩略区，避免默认 560×315 溢出变形 */
.video-thumb iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* 视频卡片正文内边距：标题/描述不再顶格贴边 */
.video-card h4 {
    padding: var(--h-space-sm) var(--h-space-md) 0;
}

.video-card p {
    padding: 0 var(--h-space-md) var(--h-space-md);
}

/* 筛选空状态（theme.js 在分组全部隐藏时显示） */
.filter-empty {
    padding: var(--h-space-lg);
    text-align: center;
    color: var(--h-text-muted);
    font-size: var(--h-fs-300);
}

.product-card:hover .product-thumb img,
.project-card:hover .project-thumb img,
.news-card:hover .news-card-thumb img,
.video-card:hover .video-thumb img,
.related-post-card:hover .related-post-image img,
.solution-item:hover .solution-image img,
.news-item:hover .news-thumb img {
    scale: 1.06;
}

/* 没有图时的占位块 */
.product-thumb-placeholder,
.project-thumb-placeholder,
.news-card-thumb-placeholder,
.solution-image-placeholder {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, var(--h-bg-sunken), var(--h-bg-surface-alt));
    color: var(--h-text-muted);
    font-size: var(--h-fs-600);
}

.product-thumb-placeholder i,
.project-thumb-placeholder i,
.news-card-thumb-placeholder i,
.solution-image-placeholder i { opacity: 0.5; }

/* 产品/解决方案卡 + 图文左右排布 */
.solution-item {
    flex-direction: row;
}

.solution-image { flex: 0 0 42%; max-width: 42%; }
.solution-info { flex: 1 1 auto; justify-content: center; }

.product-grid.small .product-thumb,
.project-grid.small .project-thumb { aspect-ratio: 1 / 1; }

/* --------------------------------------------------------------------------
   3. 卡片网格容器
   -------------------------------------------------------------------------- */
.product-grid,
.project-grid,
.news-grid,
.services-grid,
.advantages-grid,
.featured-info-wrapper,
.stats-grid,
.testimonial-cards,
.related-posts .row,
.related-products .row,
.error-404-links-grid {
    display: grid;
    gap: var(--h-gutter);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    align-items: stretch;
}

/* 旧的 .row + .col-md-4 组合也要正确排列 —— 让 col 里的 card 高度一致 */
.row > [class*="col-"] > .product-card,
.row > [class*="col-"] > .project-card,
.row > [class*="col-"] > .news-card,
.row > [class*="col-"] > .service-card,
.row > [class*="col-"] > .info-card { height: 100%; }

/* --------------------------------------------------------------------------
   4. 元信息 / 徽标 / 标签
   -------------------------------------------------------------------------- */
.news-card-meta,
.post-meta-top,
.content-meta,
.video-meta,
.archive-post-meta,
.project-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--h-space-2xs);
    font-size: var(--h-fs-100);
    color: var(--h-text-muted);
}

.news-card-meta i,
.post-meta-top i,
.video-meta i { opacity: 0.75; }

.news-card-category,
.product-category,
.post-detail-category,
.solution-tag {
    display: inline-block;
    padding: 0.25em 0.7em;
    border-radius: var(--h-radius-pill);
    background: var(--h-color-brand-wash);
    color: var(--h-color-brand-strong);
    font-size: var(--h-fs-100);
    font-weight: var(--h-fw-semibold);
    line-height: 1.5;
    letter-spacing: 0;
    text-decoration: none;
}

.news-card-category:hover { background: var(--h-color-brand); color: #fff; }

.post-detail-category a:hover,
.product-category:hover { background: var(--h-color-brand); color: #fff; }

/* 油料标签云 */
.oil-types,
.solution-tags,
.post-tags,
.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--h-space-2xs);
}

.oil-tag,
.tag-link,
.post-tag,
.meta-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.35em 0.85em;
    border: 1px solid var(--h-border-default);
    border-radius: var(--h-radius-pill);
    background: var(--h-bg-surface);
    font-size: var(--h-fs-200);
    color: var(--h-text-body);
    text-decoration: none;
    transition: var(--h-transition);
}

.oil-tag:hover,
.tag-link:hover,
.post-tag:hover {
    border-color: var(--h-color-brand);
    background: var(--h-color-brand-wash);
    color: var(--h-color-brand-strong);
}

.tags-label,
.post-tags-label,
.meta-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-inline-end: var(--h-space-2xs);
    font-size: var(--h-fs-200);
    font-weight: var(--h-fw-semibold);
    color: var(--h-text-strong);
}

/* --------------------------------------------------------------------------
   5. 区块标题（带小标题 + “查看更多”）
   -------------------------------------------------------------------------- */
.section-header > .kicker,
.hero-subtitle,
.content-kicker {
    display: inline-block;
    margin-block-end: var(--h-space-2xs);
    padding: 0.3em 0.9em;
    border-radius: var(--h-radius-pill);
    background: var(--h-color-brand-wash);
    color: var(--h-color-brand-strong);
    font-size: var(--h-fs-100);
    font-weight: var(--h-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--h-tracking-caps);
}

/* --------------------------------------------------------------------------
   6. Hero（首页）
   -------------------------------------------------------------------------- */
.hero-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block-start: calc(var(--h-header-total) + clamp(1.5rem, 1rem + 5vw, 5rem));
    padding-block-end: clamp(3.5rem, 2.5rem + 6vw, 8rem);
    background: linear-gradient(135deg, var(--h-color-navy-deep) 0%, var(--h-color-navy-soft) 60%, #1F5AA8 100%);
    color: #fff;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.18;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
}

.hero-inner {
    max-width: calc(var(--h-container-max) + (var(--h-container-pad) * 2));
    margin-inline: auto;
    padding-inline: var(--h-container-pad);
}

.hero-content { max-width: 46rem; }

.hero-title {
    font-size: var(--h-fs-900);
    line-height: var(--h-lh-tight);
    color: #fff;
    letter-spacing: var(--h-tracking-tight);
}

.hero-desc {
    max-width: 44rem;
    margin-block-start: var(--h-space-sm);
    font-size: var(--h-fs-500);
    line-height: var(--h-lh-relaxed);
    color: var(--h-text-inverse-muted);
}

.hero-actions .btn-light { --btn-fg: var(--h-color-brand-strong); }

.hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
    gap: var(--h-space-md);
    margin-block-start: clamp(2rem, 1.5rem + 3vw, 4rem);
    padding-block-start: var(--h-space-md);
    border-block-start: 1px solid rgb(255 255 255 / 18%);
}

.hero-stat-number {
    display: block;
    font-size: var(--h-fs-700);
    font-weight: var(--h-fw-bold);
    line-height: 1.1;
    color: var(--h-color-gold-soft);
}

.hero-stat-label {
    display: block;
    margin-block-start: 2px;
    font-size: var(--h-fs-200);
    color: var(--h-text-inverse-muted);
}

/* --------------------------------------------------------------------------
   7. 统计 / 奖项 / 时间轴 / 能力表
   -------------------------------------------------------------------------- */
.stats-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }

.stat-box,
.stat-item,
.award-item {
    gap: 2px;
    padding: var(--h-space-md);
    text-align: center;
    align-items: center;
}

.stat-number,
.hero-stat-number {
    display: block;
    font-size: var(--h-fs-700);
    font-weight: var(--h-fw-bold);
    color: var(--h-color-brand);
    line-height: 1.1;
}

.stat-label {
    font-size: var(--h-fs-200);
    color: var(--h-text-muted);
}

.stat-box strong,
.award-item div strong { font-size: var(--h-fs-500); color: var(--h-text-strong); }
.stat-box span,
.award-item div span { font-size: var(--h-fs-200); color: var(--h-text-muted); }

.award-item i,
.w-item i {
    font-size: var(--h-fs-600);
    color: var(--h-color-gold);
}

.awards-list,
.info-list,
.feature-list,
.download-list {
    display: grid;
    gap: var(--h-space-xs);
}

.info-list li,
.feature-list li,
.download-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--h-space-2xs);
    min-width: 0;
}

.feature-list li i,
.info-list li > i {
    flex: none;
    margin-block-start: 0.25em;
    color: var(--h-state-success);
    font-size: var(--h-fs-300);
}

.feature-list li { font-size: var(--h-fs-300); line-height: 1.55; }

.capacity-table {
    width: 100%;
    font-size: var(--h-fs-200);
    border-collapse: collapse;
}

.capacity-table th,
.capacity-table td {
    padding: var(--h-space-2xs) var(--h-space-xs);
    text-align: start;
    border-block-end: 1px solid var(--h-border-subtle);
    white-space: nowrap;
}

.capacity-table th {
    background: var(--h-bg-surface-alt);
    font-weight: var(--h-fw-semibold);
    color: var(--h-text-strong);
}

.capacity-table tr:hover td { background: var(--h-color-brand-wash); }

/* 时间轴 */
.timeline {
    position: relative;
    display: grid;
    gap: var(--h-space-md);
    padding-inline-start: var(--h-space-lg);
}

.timeline::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 8px;
    width: 2px;
    background: linear-gradient(180deg, var(--h-color-brand), var(--h-color-gold));
}

.timeline-item {
    position: relative;
}

.timeline-item::before {
    content: "";
    position: absolute;
    inset-block-start: 0.45em;
    inset-inline-start: calc(-1 * var(--h-space-lg) + 3px);
    width: 12px;
    height: 12px;
    border: 2px solid var(--h-color-brand);
    border-radius: 50%;
    background: var(--h-bg-surface);
}

.timeline-year {
    display: inline-block;
    margin-block-end: 2px;
    font-size: var(--h-fs-100);
    font-weight: var(--h-fw-bold);
    letter-spacing: var(--h-tracking-caps);
    color: var(--h-color-brand);
}

.timeline-content h3 { font-size: var(--h-fs-400); }
.timeline-content p { margin: 0; font-size: var(--h-fs-200); color: var(--h-text-muted); }

/* --------------------------------------------------------------------------
   8. 筛选按钮 & 标签页
   -------------------------------------------------------------------------- */
.gallery-filter,
.video-categories,
.faq-categories,
.filter-bar,
.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--h-space-2xs);
    margin-block-end: var(--h-space-lg);
}

.cat-btn,
.filter-btn,
.vcat-btn,
.nav-tabs a,
.nav-tabs button {
    padding: 0.45em 1em;
    border: 1px solid var(--h-border-default);
    border-radius: var(--h-radius-pill);
    background: var(--h-bg-surface);
    font-size: var(--h-fs-200);
    font-weight: var(--h-fw-medium);
    color: var(--h-text-body);
    text-decoration: none;
    transition: var(--h-transition);
}

/* 产品详情标签页：按钮等宽并居中，避免 Description / Enquête 大小不一 */
.product-tabs .nav-tabs { margin-block-end: var(--h-space-lg); }
.product-tabs .nav-tabs a,
.product-tabs .nav-tabs button {
    flex: 1 1 0;
    justify-content: center;
    text-align: center;
}

.cat-btn:hover,
.filter-btn:hover,
.vcat-btn:hover,
.nav-tabs a:hover {
    border-color: var(--h-color-brand);
    color: var(--h-color-brand);
}

.cat-btn.active,
.filter-btn.active,
.vcat-btn.active,
.nav-tabs a.active,
.nav-tabs button.active {
    border-color: var(--h-color-brand);
    background: var(--h-color-brand);
    color: #fff;
}

.tab-content { margin-block-start: var(--h-space-md); }
.tab-pane { display: none; }
.tab-pane.show,
.tab-pane.active { display: block; }
.tab-pane.fade.show { display: block; }

/* --------------------------------------------------------------------------
   9. 手风琴（FAQ）
   -------------------------------------------------------------------------- */
.faq-group + .faq-group { margin-block-start: var(--h-space-lg); }

.group-title {
    display: flex;
    align-items: center;
    gap: var(--h-space-2xs);
    margin-block-end: var(--h-space-sm);
    font-size: var(--h-fs-500);
    color: var(--h-text-strong);
}

.group-title i { color: var(--h-color-brand); }

.faq-item {
    border: 1px solid var(--h-border-subtle);
    border-radius: var(--h-radius-md);
    background: var(--h-bg-surface);
    overflow: hidden;
    transition: border-color var(--h-dur-base) var(--h-ease-standard);
}

.faq-item + .faq-item { margin-block-start: var(--h-space-2xs); }
.faq-item:hover { border-color: var(--h-border-default); }

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--h-space-sm);
    width: 100%;
    padding: var(--h-space-sm) var(--h-space-md);
    font-size: var(--h-fs-400);
    font-weight: var(--h-fw-semibold);
    color: var(--h-text-strong);
    text-align: start;
    cursor: pointer;
    transition: var(--h-transition);
}

.faq-question:hover { color: var(--h-color-brand); }

.faq-question i {
    flex: none;
    color: var(--h-color-brand);
    transition: rotate var(--h-dur-base) var(--h-ease-standard);
}

.faq-item.active .faq-question i { rotate: 180deg; }
.faq-item.active .faq-question { color: var(--h-color-brand); }

.faq-answer {
    display: none;
    padding: 0 var(--h-space-md) var(--h-space-md);
    font-size: var(--h-fs-300);
    line-height: var(--h-lh-relaxed);
}

.faq-item.active .faq-answer { display: block; }
.faq-answer p { margin: 0; }

/* --------------------------------------------------------------------------
   10. 画廊 & 灯箱
   -------------------------------------------------------------------------- */
.gallery-group + .gallery-group { margin-block-start: var(--h-space-xl); }

.project-gallery .row,
.gallery-grid {
    display: block;
    gap: var(--h-space-sm);
}

.gallery-item,
.project-gallery a {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--h-radius-md);
    background: var(--h-bg-sunken);
    aspect-ratio: 4 / 3;
}

.gallery-item img,
.project-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale var(--h-dur-slow) var(--h-ease-out);
}

.project-gallery a:hover img,
.gallery-item:hover img { scale: 1.07; }

.gallery-overlay,
.project-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgb(15 12 10 / 55%);
    color: #fff;
    opacity: 0;
    transition: opacity var(--h-dur-base) var(--h-ease-standard);
}

.project-gallery a:hover::after,
.gallery-item:hover .gallery-overlay,
.project-card:hover .project-overlay { opacity: 1; }

.gallery-overlay i,
.project-overlay i,
.zoom-btn i {
    font-size: var(--h-fs-600);
}

.project-view {
    display: inline-flex;
    align-items: center;
    gap: var(--h-space-2xs);
    padding: 0.5em 1em;
    border: 1px solid rgb(255 255 255 / 60%);
    border-radius: var(--h-radius-pill);
    font-size: var(--h-fs-200);
    color: #fff;
}

.zoom-btn {
    position: absolute;
    inset-block-end: var(--h-space-2xs);
    inset-inline-end: var(--h-space-2xs);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--h-radius-pill);
    background: rgb(255 255 255 / 92%);
    color: var(--h-text-strong);
    transition: var(--h-transition);
}

.zoom-btn:hover { background: #fff; scale: 1.08; }

.zoom-btn svg { width: 18px; height: 18px; }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--h-z-modal);
    display: none;
    place-items: center;
    padding: var(--h-space-md);
    background: rgb(10 8 7 / 88%);
    backdrop-filter: blur(4px);
}

.lightbox.active { display: grid; }

.lightbox-content {
    position: relative;
    max-width: min(100%, 1100px);
    max-height: 88vh;
}

.lightbox-content img {
    max-height: 80vh;
    width: auto;
    margin-inline: auto;
    object-fit: contain;
    border-radius: var(--h-radius-md);
}

.lightbox-caption {
    margin-block-start: var(--h-space-2xs);
    text-align: center;
    font-size: var(--h-fs-200);
    color: rgb(255 255 255 / 80%);
}

.lightbox-close {
    position: fixed;
    inset-block-start: var(--h-space-md);
    inset-inline-end: var(--h-space-md);
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--h-radius-pill);
    background: rgb(255 255 255 / 12%);
    color: #fff;
    font-size: var(--h-fs-500);
}

.lightbox-close:hover { background: var(--h-color-brand); }

.lightbox-nav {
    position: absolute;
    inset-block-start: 50%;
    translate: 0 -50%;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--h-radius-pill);
    background: rgb(255 255 255 / 12%);
    color: #fff;
    font-size: var(--h-fs-500);
    transition: var(--h-transition);
}

.lightbox-nav:hover { background: var(--h-color-brand); }
.lightbox-nav.prev { inset-inline-start: var(--h-space-2xs); }
.lightbox-nav.next { inset-inline-end: var(--h-space-2xs); }

@media (max-width: 47.99em) {
    .lightbox-nav { display: none; }
}

/* 自建 [data-lightbox] 灯箱（产品/案例页），与 page-gallery 的 #lightbox 解耦 */
.ht-lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--h-z-modal);
    display: none;
    place-items: center;
    padding: var(--h-space-md);
    background: rgb(10 8 7 / 88%);
    backdrop-filter: blur(4px);
}

.ht-lightbox.is-open { display: grid; }

.ht-lightbox__backdrop {
    position: absolute;
    inset: 0;
    cursor: zoom-out;
}

.ht-lightbox__content {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--h-space-2xs);
    justify-items: center;
    margin: 0;
    max-width: min(100%, 1100px);
    max-height: 88vh;
}

.ht-lightbox__img {
    max-height: 80vh;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: var(--h-radius-md);
}

.ht-lightbox__caption {
    max-width: 80ch;
    text-align: center;
    font-size: var(--h-fs-200);
    color: rgb(255 255 255 / 80%);
}

.ht-lightbox__btn {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--h-radius-pill);
    background: rgb(255 255 255 / 12%);
    color: #fff;
    cursor: pointer;
    transition: var(--h-transition);
}

.ht-lightbox__btn:hover { background: var(--h-color-brand); }

.ht-lightbox__btn svg { width: 22px; height: 22px; }

.ht-lightbox__close {
    inset-block-start: var(--h-space-sm);
    inset-inline-end: var(--h-space-sm);
}

.ht-lightbox__nav {
    inset-block-start: 50%;
    translate: 0 -50%;
}

.ht-lightbox__nav--prev { inset-inline-start: var(--h-space-sm); }
.ht-lightbox__nav--next { inset-inline-end: var(--h-space-sm); }

body.has-lightbox-open { overflow: hidden; }

@media (max-width: 47.99em) {
    .ht-lightbox__nav { display: none; }
}

/* --------------------------------------------------------------------------
   11. 视频
   -------------------------------------------------------------------------- */
.video-wrapper,
.featured-player .video-wrapper,
.video-featured {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--h-radius-md);
    background: #000;
}

.video-wrapper iframe,
.featured-player .video-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.play-btn {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 100%;
    color: #fff;
    font-size: var(--h-fs-700);
    background: rgb(15 12 10 / 30%);
    transition: background-color var(--h-dur-base) var(--h-ease-standard);
}

.play-btn::before {
    content: "";
    position: absolute;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--h-color-brand);
    transition: scale var(--h-dur-base) var(--h-ease-out);
}

.play-btn i,
.play-btn svg { position: relative; z-index: 1; }
.video-thumb:hover .play-btn { background: rgb(15 12 10 / 45%); }
.video-thumb:hover .play-btn::before { scale: 1.12; }

/* --------------------------------------------------------------------------
   12. 分页 & 上下篇导航
   -------------------------------------------------------------------------- */
.pagination,
.page-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--h-space-2xs);
    margin-block-start: var(--h-space-xl);
}

.pagination a,
.pagination span,
.page-links a {
    display: grid;
    place-items: center;
    min-width: 40px;
    min-height: 40px;
    padding-inline: var(--h-space-2xs);
    border: 1px solid var(--h-border-default);
    border-radius: var(--h-radius-sm);
    background: var(--h-bg-surface);
    font-size: var(--h-fs-200);
    font-weight: var(--h-fw-medium);
    color: var(--h-text-body);
    text-decoration: none;
    transition: var(--h-transition);
}

.pagination a:hover,
.page-links a:hover {
    border-color: var(--h-color-brand);
    background: var(--h-color-brand);
    color: #fff;
}

.pagination span.current,
.pagination .current {
    border-color: var(--h-color-brand);
    background: var(--h-color-brand);
    color: #fff;
    font-weight: var(--h-fw-bold);
}

.pagination .prev,
.pagination .next { padding-inline: var(--h-space-sm); }

.post-navigation,
.post-nav {
    display: grid;
    gap: var(--h-space-sm);
    margin-block-start: var(--h-space-xl);
    padding-block-start: var(--h-space-md);
    border-block-start: 1px solid var(--h-border-subtle);
}

@media (min-width: 48em) {
    .post-navigation,
    .post-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.post-nav-prev,
.post-nav-next,
.nav-prev,
.nav-next {
    padding: var(--h-space-sm) var(--h-space-md);
    border: 1px solid var(--h-border-subtle);
    border-radius: var(--h-radius-md);
    background: var(--h-bg-surface);
    font-size: var(--h-fs-200);
    color: var(--h-text-muted);
    text-decoration: none;
    transition: var(--h-transition);
}

.nav-prev:hover,
.nav-next:hover,
.post-nav-prev a:hover strong,
.post-nav-next a:hover strong {
    border-color: var(--h-color-brand);
    color: var(--h-color-brand);
}

.post-nav-prev a,
.post-nav-next a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.post-nav-prev strong,
.post-nav-next strong,
.nav-title {
    display: block;
    color: var(--h-text-strong);
    font-size: var(--h-fs-300);
    line-height: 1.45;
}

/* --------------------------------------------------------------------------
   13. 分享按钮
   -------------------------------------------------------------------------- */
.post-share,
.product-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--h-space-2xs);
    margin-block-start: var(--h-space-md);
}

.post-share span,
.product-share span,
.share-label {
    font-size: var(--h-fs-200);
    font-weight: var(--h-fw-semibold);
    color: var(--h-text-strong);
}

.post-share a,
.product-share a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--h-radius-pill);
    background: var(--h-bg-sunken);
    color: var(--h-text-body);
    font-size: var(--h-fs-300);
    transition: var(--h-transition);
}

.post-share a:hover,
.product-share a:hover {
    color: #fff;
    translate: 0 -2px;
}

.share-facebook:hover,
.product-share a:nth-child(1):hover { background: #1877F2; }
.share-twitter:hover,
.product-share a:nth-child(2):hover { background: #0F1419; }
.share-linkedin:hover,
.product-share a:nth-child(3):hover { background: #0A66C2; }
.share-email:hover { background: var(--h-color-brand); }
.share-whatsapp:hover { background: #25D366; }

/* --------------------------------------------------------------------------
   14. 提示条
   -------------------------------------------------------------------------- */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--h-space-2xs);
    padding: var(--h-space-sm) var(--h-space-md);
    border-radius: var(--h-radius-md);
    border-inline-start: 4px solid;
    font-size: var(--h-fs-300);
    line-height: 1.55;
}

.alert i { flex: none; margin-block-start: 0.2em; }

.alert-success {
    border-color: var(--h-state-success);
    background: var(--h-state-success-wash);
    color: #1E5C3A;
}

.alert-danger,
.alert-error {
    border-color: var(--h-state-danger);
    background: var(--h-state-danger-wash);
    color: #8C1D18;
}

.alert-warning {
    border-color: var(--h-state-warning);
    background: var(--h-state-warning-wash);
    color: #8A5200;
}

/* --------------------------------------------------------------------------
   15. 高亮框 / CTA 区块
   -------------------------------------------------------------------------- */
.highlight-box,
.form-security-note,
.form-note,
.project-cta-box,
.detail-meta-box,
.warranty-box,
.about-cta {
    padding: var(--h-space-md);
    border-radius: var(--h-radius-lg);
    border: 1px solid var(--h-border-subtle);
    background: var(--h-bg-surface-alt);
}

.highlight-box { border-inline-start: 4px solid var(--h-color-gold); }

.project-cta-box,
.about-cta,
.cta-section {
    padding: clamp(1.5rem, 1.25rem + 2vw, 3rem);
    border-radius: var(--h-radius-lg);
    background: linear-gradient(135deg, var(--h-color-navy-deep), var(--h-color-navy-soft));
    color: var(--h-text-inverse-muted);
}

.project-cta-box h3,
.about-cta h2,
.cta-title {
    color: #fff;
    font-size: var(--h-fs-600);
}

.project-cta-box p,
.about-cta p,
.cta-desc {
    max-width: 52ch;
    margin-block-start: var(--h-space-2xs);
    color: var(--h-text-inverse-muted);
}

.about-cta .btn-primary:hover { box-shadow: var(--h-shadow-lg); }

.cta-wide {
    max-width: none;
    /* 整段去掉圆角，作为通栏区块更利落 */
    border-radius: 0;
    /* PC 端背景图：工业感几何图案 + 深蓝叠色保证文字对比度（内联，无需外链资源） */
    background-image:
        linear-gradient(135deg, rgb(0 26 82 / 88%), rgb(23 69 127 / 82%)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.06'%3E%3Cpath d='M0 60h120M60 0v120'/%3E%3Ccircle cx='60' cy='60' r='42'/%3E%3Ccircle cx='60' cy='60' r='22'/%3E%3C/g%3E%3C/svg%3E");
    background-size: cover, cover;
    background-position: center, center;
}

/* 移动端：改用更小、更轻的图案，降低渲染开销 */
@media (max-width: 47.99em) {
    .cta-wide {
        background-image:
            linear-gradient(135deg, rgb(0 26 82 / 92%), rgb(23 69 127 / 86%)),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/svg%3E");
        background-size: cover, 320px;
    }
}

/* 标题与按钮左右分布，移动端堆叠 */
.cta-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--h-space-lg);
}

.cta-text { flex: 1 1 22rem; min-width: 0; }
.cta-text .cta-title { margin: 0; }
.cta-text .cta-desc { margin-block-start: var(--h-space-2xs); }

.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--h-space-sm);
}

/* 深色背景上的 ghost 按钮：白字 + 半透明描边，避免与深色融为一片 */
.cta-buttons .btn-ghost {
    --btn-bg: transparent;
    --btn-fg: #fff;
    border-color: rgb(255 255 255 / 45%);
}

.cta-buttons .btn-ghost:hover {
    --btn-bg: rgb(255 255 255 / 12%);
    --btn-fg: #fff;
    border-color: #fff;
}

@media (max-width: 47.99em) {
    .cta-inner { flex-direction: column; align-items: flex-start; }
    .cta-buttons { width: 100%; }
    .cta-buttons .btn { flex: 1 1 auto; }
}

.warranty-box,
.q-step {
    display: flex;
    align-items: flex-start;
    gap: var(--h-space-2xs);
}

.w-item + .w-item { margin-block-start: var(--h-space-2xs); }
.w-item strong,
.q-step strong { color: var(--h-text-strong); }

.quality-steps {
    display: grid;
    gap: var(--h-space-sm);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.q-step {
    flex-direction: column;
    padding: var(--h-space-md);
    border-radius: var(--h-radius-md);
    background: var(--h-bg-surface);
    border: 1px solid var(--h-border-subtle);
}

.q-step span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-block-end: var(--h-space-2xs);
    border-radius: var(--h-radius-pill);
    background: var(--h-color-brand);
    color: #fff;
    font-weight: var(--h-fw-bold);
}

/* --------------------------------------------------------------------------
   16. 搜索框 & 无结果
   -------------------------------------------------------------------------- */
.search-box,
.faq-search,
.error-404-search {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 480px;
    width: 100%;
}

.search-box i,
.faq-search i {
    position: absolute;
    inset-inline-start: var(--h-space-sm);
    color: var(--h-text-muted);
    pointer-events: none;
}

.search-box input,
.faq-search input,
.search-form .search-field,
.error-404-search .search-field {
    width: 100%;
    min-width: 0;
    padding: 0.75em 1em 0.75em 2.6em;
    border: 1px solid var(--h-border-default);
    border-radius: var(--h-radius-pill);
    background: var(--h-bg-surface);
    font-size: var(--h-fs-300);
    transition: var(--h-transition);
}

.search-box input:focus,
.faq-search input:focus,
.search-form .search-field:focus {
    border-color: var(--h-color-brand);
    box-shadow: var(--h-shadow-focus);
    outline: none;
}

.search-form {
    display: flex;
    gap: var(--h-space-2xs);
    width: 100%;
}

.search-submit,
.search-form button {
    flex: none;
    padding: 0.75em 1.4em;
    border-radius: var(--h-radius-pill);
    background: var(--h-color-brand);
    color: #fff;
    font-size: var(--h-fs-300);
    font-weight: var(--h-fw-semibold);
    transition: var(--h-transition);
}

.search-submit:hover { background: var(--h-color-brand-strong); }

.no-results,
.search-no-results,
.solution-empty,
.error-404-content {
    display: grid;
    gap: var(--h-space-xs);
    justify-items: center;
    padding: clamp(2rem, 1.5rem + 3vw, 4rem) var(--h-space-md);
    text-align: center;
    background: var(--h-bg-surface);
    border: 1px solid var(--h-border-subtle);
    border-radius: var(--h-radius-lg);
}

.no-results i,
.search-no-results i,
.error-404-icon {
    font-size: var(--h-fs-800);
    color: var(--h-text-muted);
    opacity: 0.4;
}